/* ============================================================
Вита — Конструктор контента · Экспортные стили vcc-v1
Этот файл — ЕДИНСТВЕННЫЙ источник стилей экспорта: билдер вшивает
его в редактор (окно предпросмотра) и отдаёт кнопкой «Скачать CSS».
Тема Вита поставляет этот же файл как
catalog/view/theme/vita/stylesheet/vita-content-constructor.css.
Правила: только var(--mp-*, fallback) — ни одного литерального
цвета в правилах. Контракт vcc-v1 эволюционирует аддитивно.
============================================================ */

.vcc-content {
	color: var(--mp-text-body, #2D3748);
	font-family: var(--mp-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	font-size: 16px;
	line-height: 1.65;
	overflow-wrap: break-word;
}
.vcc-content > *:first-child { margin-top: 0; }
.vcc-content > *:last-child { margin-bottom: 0; }

/* --- Заголовки --- */
.vcc-heading {
	color: var(--mp-text-main, #2D3748);
	font-weight: 700;
	line-height: 1.3;
	margin: 32px 0 14px;
}
.vcc-heading--h2 { font-size: 26px; }
.vcc-heading--h3 { font-size: 21px; }
.vcc-heading--h4 { font-size: 18px; }

/* --- Абзацы --- */
.vcc-paragraph { margin: 0 0 14px; }
.vcc-paragraph p { margin: 0 0 14px; }

/* --- Ссылки и инлайн --- */
/* Ссылки стилизуем через :where() + :not(.vcc-btn): правило не матчит
   кнопки вовсе, иначе (0,1,1) против (0,1,0) у .vcc-btn--primary
   цвет ссылки побеждал --mp-text-inverse и текст сливался с фоном. */
.vcc-content :where(a:not(.vcc-btn)) { color: var(--mp-primary, #8C9D93); text-decoration: none; }
.vcc-content :where(a:not(.vcc-btn)):hover { color: var(--mp-primary-hover, #7A8B81); text-decoration: underline; }
.vcc-code {
	background: var(--mp-bg-subtle, #f8fafc);
	border: 1px solid var(--mp-border-divider, #F1F5F9);
	border-radius: var(--mp-radius-sm, 2px);
	color: var(--mp-text-main, #2D3748);
	font-size: 0.9em;
	padding: 1px 6px;
}

/* --- Списки --- */
/* Списки по референсу plain-list: без диск-буллетов — квадратная точка-акцент
 * 8×8 слева, компактная строка 14px. Нумерованный — те же строки с цифрами. */
.vcc-list { list-style: none; margin: 0 0 14px; padding: 0; }
.vcc-list li { color: var(--mp-text-muted, #64748B); font-size: 14px; margin-bottom: 8px; padding-left: 18px; position: relative; }
.vcc-list li strong { color: var(--mp-text-main, #2D3748); }
.vcc-list:not(.vcc-list--ordered) li::before {
	background: var(--mp-primary, #8C9D93);
	content: "";
	height: 8px;
	left: 0;
	position: absolute;
	top: 7px;
	width: 8px;
}
.vcc-list--ordered { counter-reset: vcc-list-item; padding-left: 0; }
.vcc-list--ordered li { counter-increment: vcc-list-item; padding-left: 24px; }
.vcc-list--ordered li::before {
	background: none;
	color: var(--mp-primary, #8C9D93);
	content: counter(vcc-list-item) ".";
	font-weight: 700;
	left: 0;
	position: absolute;
	top: 0;
	width: auto;
}

/* --- Цитата (рестайл: редакторская, с левой акцентной чертой) --- */
.vcc-quote {
	background: var(--mp-bg-subtle, #f8fafc);
	border-left: 3px solid var(--mp-primary, #8C9D93);
	border-radius: 0;
	box-shadow: none;
	color: var(--mp-text-muted, #64748B);
	font-size: 17px;
	font-style: italic;
	line-height: 1.6;
	margin: 18px 0;
	padding: 18px 22px;
}
/* Стиль «Рамка» (0.10.8) — референс quote-stack: полная рамка + жёсткая тень,
 * текст нейтрального цвета, автор mono uppercase 11px. */
.vcc-quote--frame {
	background: var(--mp-bg-surface, #ffffff);
	border: 1px solid var(--mp-border-color, #E2E8F0);
	border-left: 1px solid var(--mp-border-color, #E2E8F0);
	box-shadow: 4px 4px 0 rgba(150, 150, 150, 0.1);
	color: var(--mp-text-body, #2D3748);
	font-size: 15px;
	padding: 24px;
}
.vcc-quote--frame .vcc-quote__author {
	color: var(--mp-text-muted, #64748B);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: 0.1em;
}
.vcc-quote__author {
	color: var(--mp-text-main, #2D3748);
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-top: 10px;
	text-transform: uppercase;
}

/* --- Врезки (alert): 0.10.5 — три исполнения (fill/leftbar/topline).
 * fill — референс донора: цветная заливка + цветная рамка + цветной текст.
 * leftbar — warning-card референса: левая кромка 4px, остальное нейтральное.
 * topline — прежний вид (линия сверху), оставлен для собранных статей.
 * Цвет текста/рамки/заливки берётся из утилит-токенов темы; на каждой паре
 * (фон/текст) держим контраст — текст фиксирован РЯДОМ с фоном. */
.vcc-alert {
	border: 1px solid var(--mp-border-color, #E2E8F0);
	border-radius: 0;
	box-shadow: none;
	margin: 18px 0;
	padding: 16px 20px;
}
/* Базовые цветовые пары по стилям (заливка): референсные тёплые заливки
 * адаптированы в токены: фон = цветной soft, рамка/текст = сам цвет. */
.vcc-alert--fill.vcc-alert--info    { background: var(--mp-primary-light, #F2F6F4); border-color: var(--mp-primary, #8C9D93); color: var(--mp-text-main, #2D3748); }
.vcc-alert--fill.vcc-alert--success { background: var(--mp-badge-express-bg, #059669); background: color-mix(in srgb, var(--mp-badge-express-bg, #059669) 10%, var(--mp-bg-surface, #ffffff)); border-color: var(--mp-badge-express-bg, #059669); color: var(--mp-text-main, #2D3748); }
.vcc-alert--fill.vcc-alert--warning { background: color-mix(in srgb, var(--mp-badge-hit-bg, #d97706) 10%, var(--mp-bg-surface, #ffffff)); border-color: var(--mp-badge-hit-bg, #d97706); color: var(--mp-text-main, #2D3748); }
.vcc-alert--fill.vcc-alert--danger  { background: color-mix(in srgb, var(--mp-badge-discount-bg, #dc2626) 10%, var(--mp-bg-surface, #ffffff)); border-color: var(--mp-badge-discount-bg, #dc2626); color: var(--mp-text-main, #2D3748); }
/* Левая кромка (warning-card референса) */
.vcc-alert--leftbar { border-left: 4px solid var(--mp-border-color, #E2E8F0); }
.vcc-alert--leftbar.vcc-alert--info    { border-left-color: var(--mp-primary, #8C9D93); }
.vcc-alert--leftbar.vcc-alert--success { border-left-color: var(--mp-badge-express-bg, #059669); }
.vcc-alert--leftbar.vcc-alert--warning { border-left-color: var(--mp-badge-hit-bg, #d97706); }
.vcc-alert--leftbar.vcc-alert--danger  { border-left-color: var(--mp-badge-discount-bg, #dc2626); }
/* Линия сверху (старое поведение — собранные статьи) */
.vcc-alert--topline.vcc-alert--info    { background: var(--mp-primary-light, #F2F6F4); border-top: 2px solid var(--mp-primary, #8C9D93); }
.vcc-alert--topline.vcc-alert--success { background: var(--mp-bg-subtle, #f8fafc); border-top: 2px solid var(--mp-badge-express-bg, #059669); }
.vcc-alert--topline.vcc-alert--warning { background: var(--mp-bg-subtle, #f8fafc); border-top: 2px solid var(--mp-badge-hit-bg, #d97706); }
.vcc-alert--topline.vcc-alert--danger  { background: var(--mp-bg-subtle, #f8fafc); border-top: 2px solid var(--mp-badge-discount-bg, #dc2626); }
/* Совместимость: старый экспорт без look-класса = topline */
.vcc-alert--info:not([class*="vcc-alert--fill"]):not([class*="vcc-alert--leftbar"]):not([class*="vcc-alert--topline"]) { background: var(--mp-primary-light, #F2F6F4); border-top: 2px solid var(--mp-primary, #8C9D93); }
.vcc-alert--success:not([class*="vcc-alert--fill"]):not([class*="vcc-alert--leftbar"]):not([class*="vcc-alert--topline"]),
.vcc-alert--warning:not([class*="vcc-alert--fill"]):not([class*="vcc-alert--leftbar"]):not([class*="vcc-alert--topline"]),
.vcc-alert--danger:not([class*="vcc-alert--fill"]):not([class*="vcc-alert--leftbar"]):not([class*="vcc-alert--topline"]) { background: var(--mp-bg-subtle, #f8fafc); border-top: 2px solid var(--mp-border-color, #E2E8F0); }
/* Тёмная тема магазина: заливки color-mix на белом не читаются — тихие тёмные фоны, кромки цветные (аддитивное правило) */
[data-theme="dark"] .vcc-alert--fill.vcc-alert--info    { background: var(--mp-bg-hover, #38343E); color: var(--mp-text-main, #2D3748); }
[data-theme="dark"] .vcc-alert--fill.vcc-alert--success,
[data-theme="dark"] .vcc-alert--fill.vcc-alert--warning,
[data-theme="dark"] .vcc-alert--fill.vcc-alert--danger  { background: var(--mp-bg-hover, #38343E); color: var(--mp-text-main, #2D3748); }
[data-theme="dark"] .vcc-alert--topline.vcc-alert--info { background: var(--mp-bg-hover, #38343E); }
/* Сравнение: та же история — выделенная строка на светлом токене получает
 * тёмный фон, иначе светлый текст исчезает на светлом (контраст 1.18:1) */
[data-theme="dark"] .vcc-compare__row--us { background: var(--mp-bg-hover, #38343E); }
.vcc-alert p:last-child { margin-bottom: 0; }
.vcc-alert__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.vcc-alert__actions:empty { display: none; }

/* --- stats: стиль lined — полоса с линиями-разделителями (том-модерн stats-strip):
 * значение 32px, лейбл mono uppercase 11px с трекингом (0.10.8 — замер референса) --- */
.vcc-stats--lined { background: var(--mp-bg-surface, #ffffff); border-bottom: 1px solid var(--mp-border-color, #E2E8F0); border-top: 1px solid var(--mp-border-color, #E2E8F0); gap: 0; text-align: center; }
.vcc-stats--lined .vcc-stat { border-right: 1px solid var(--mp-border-color, #E2E8F0); padding: 36px 20px; }
.vcc-stats--lined .vcc-stat:last-child { border-right: 0; }
.vcc-stats--lined .vcc-stat__value { font-size: 32px; letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; }
.vcc-stats--lined .vcc-stat__label { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.12em; }
.vcc-stats--lined .vcc-stat__suffix { font-size: 0.6em; opacity: 0.8; }
@media (max-width: 767px) { .vcc-stats--lined { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vcc-stats--lined .vcc-stat { border-bottom: 1px solid var(--mp-border-color, #E2E8F0); border-right: 0; padding: 20px 12px; } }

/* --- Спойлер --- */
.vcc-spoiler {
	border: 1px solid var(--mp-border-color, #E2E8F0);
	border-radius: 0;
	margin: 14px 0;
}
.vcc-spoiler__summary {
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	padding: 12px 16px;
	color: var(--mp-text-main, #2D3748);
}
.vcc-spoiler__summary:hover { color: var(--mp-primary, #8C9D93); }
.vcc-spoiler__body {
	border-top: 1px solid var(--mp-border-divider, #F1F5F9);
	padding: 12px 16px;
}
.vcc-spoiler__body p:last-child { margin-bottom: 0; }

/* --- Табы --- */
.vcc-tabs { margin: 18px 0; }
.vcc-tabs__nav {
	border-bottom: 1px solid var(--mp-border-color, #E2E8F0);
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.vcc-tabs__btn {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--mp-text-muted, #64748B);
	cursor: pointer;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: -1px;
	padding: 10px 16px;
	text-transform: uppercase;
}
.vcc-tabs__btn.is-active {
	border-bottom-color: var(--mp-primary, #8C9D93);
	color: var(--mp-text-main, #2D3748);
}
.vcc-tabs__panel { display: none; padding-top: 14px; }
.vcc-tabs__panel.is-active { display: block; }

/* --- Таблица --- */
.vcc-table-wrap { margin: 18px 0; overflow-x: auto; }
.vcc-table {
	border-collapse: collapse;
	width: 100%;
}
.vcc-table th,
.vcc-table td {
	border: 1px solid var(--mp-border-color, #E2E8F0);
	padding: 9px 12px;
	text-align: left;
}
.vcc-table th {
	background: var(--mp-bg-subtle, #f8fafc);
	color: var(--mp-text-main, #2D3748);
	font-weight: 600;
}
.vcc-table tr:nth-child(even) td { background: var(--mp-bg-subtle, #f8fafc); }

/* --- Спецификация (spec-list): строки «лейбл → значение» --- */
.vcc-speclist { border-top: 1px solid var(--mp-border-color, #E2E8F0); margin: 18px 0; }
.vcc-speclist__row {
	align-items: baseline;
	border-bottom: 1px solid var(--mp-border-color, #E2E8F0);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	padding: 11px 0;
}
.vcc-speclist__label {
	color: var(--mp-text-light, #94A3B8);
	flex: 0 0 200px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.vcc-speclist__value { flex: 1 1 260px; }

/* --- Сравнение (comparison): «альтернатива / мы» с выделением нашей строки --- */
.vcc-compare { margin: 18px 0; }
.vcc-compare__row {
	border-bottom: 1px solid var(--mp-border-color, #E2E8F0);
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr 1fr;
	padding: 12px 0;
}
.vcc-compare__row > span { color: var(--mp-text-light, #94A3B8); }
.vcc-compare__row > strong { font-weight: 600; }
.vcc-compare__row--us {
	background: var(--mp-primary-light, rgba(140, 157, 147, 0.12));
	border-bottom: 2px solid var(--mp-primary, #8C9D93);
	border-top: 2px solid var(--mp-primary, #8C9D93);
	padding: 12px 14px;
}
.vcc-compare__row--us > span { color: var(--mp-text-main, #2D3748); }
.vcc-compare__note { color: var(--mp-text-light, #94A3B8); font-size: 13px; margin-top: 10px; }
@media (max-width: 767px) { .vcc-compare__row { grid-template-columns: 1fr; } }

/* --- Типичные проблемы (pain-points): сетка рамочных карточек «болей» --- */
.vcc-pains { display: grid; gap: 18px; }
.vcc-pains--c2 { grid-template-columns: repeat(2, 1fr); }
.vcc-pains--c3 { grid-template-columns: repeat(3, 1fr); }
.vcc-pains--c4 { grid-template-columns: repeat(4, 1fr); }
.vcc-pain {
	background: var(--mp-bg-surface, #ffffff);
	border: 1px solid var(--mp-border-color, #E2E8F0);
	border-left: 3px solid var(--mp-badge-discount-bg, #DC2626);
	height: 100%;
	padding: 24px;
}
.vcc-pain__title { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 8px; text-transform: uppercase; }
.vcc-pain__title::before {
	background: var(--mp-badge-discount-bg, #DC2626);
	content: "";
	display: inline-block;
	height: 10px;
	margin-right: 8px;
	vertical-align: baseline;
	width: 10px;
}
.vcc-pain__text { color: var(--mp-text-muted, #64748B); font-size: 14px; }

/* --- Обновления (updates-grid): сетка article-рамок «что нового» --- */
.vcc-updates { display: grid; gap: 18px; }
.vcc-updates--c2 { grid-template-columns: repeat(2, 1fr); }
.vcc-updates--c3 { grid-template-columns: repeat(3, 1fr); }
.vcc-update {
	background: var(--mp-bg-surface, #ffffff);
	border: 1px solid var(--mp-border-color, #E2E8F0);
	height: 100%;
	padding: 24px;
}
.vcc-update__title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.vcc-update__text { color: var(--mp-text-muted, #64748B); font-size: 14px; }
.vcc-update__tag {
	background: var(--mp-bg-subtle, #f8fafc);
	border: 1px solid var(--mp-border-color, #E2E8F0);
	color: var(--mp-text-light, #94A3B8);
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: 14px;
	padding: 3px 8px;
	text-transform: uppercase;
}
.vcc-update__tag--new { background: var(--mp-badge-express-bg, #059669); border-color: var(--mp-badge-express-bg, #059669); color: var(--mp-text-inverse, #ffffff); }

/* --- Картинка --- */
.vcc-figure { margin: 18px 0; }
.vcc-figure__img {
	border-radius: var(--mp-radius-md, 4px);
	height: auto;
	max-width: 100%;
}
.vcc-figure__caption {
	color: var(--mp-text-light, #94A3B8);
	font-size: 13px;
	margin-top: 6px;
	text-align: center;
}

/* --- Оглавление --- */
.vcc-toc {
	background: var(--mp-bg-subtle, #f8fafc);
	border: 1px solid var(--mp-border-divider, #F1F5F9);
	border-radius: var(--mp-radius-lg, 6px);
	margin: 18px 0;
	padding: 14px 20px;
}
.vcc-toc__title {
	color: var(--mp-text-main, #2D3748);
	font-weight: 600;
	margin-bottom: 8px;
}
.vcc-toc__list { margin: 0; padding-left: 20px; }
.vcc-toc__list li { margin-bottom: 4px; }

/* --- Оглавление «фиксированная левая колонка» (v0.10.0) ---
 * Образец — vita-news-sections--column / vita-news-toc темы:
 * sticky aside 240px + flex-обёртка, на <992px — колонка сверху.
 * Обёртку .vcc-toc-wrap строит рантайм темы (initVccBlocks). */
.vcc-toc-wrap {
	align-items: flex-start;
	display: flex;
	gap: 28px;
}
.vcc-toc--column {
	flex: 0 0 240px;
	margin: 0;
	max-height: calc(100vh - 110px);
	max-width: 240px;
	overflow-y: auto;
	position: sticky;
	top: 90px;
}
.vcc-toc-wrap__main { min-width: 0; }
@media (max-width: 991px) {
	.vcc-toc-wrap { display: block; }
	.vcc-toc--column { margin: 0 0 20px; max-height: none; max-width: none; position: static; }
}

/* ==== v0.7.0 landing ==== */

/* --- Секции: каркас --- */
.vcc-section { position: relative; overflow: hidden; }
.vcc-section--bg-light   { background: var(--mp-bg-subtle, #f8fafc); }
.vcc-section--bg-surface { background: var(--mp-bg-surface, #ffffff); }
.vcc-section--bg-primary { background: var(--mp-primary, #8C9D93); color: var(--mp-text-inverse, #ffffff); }
.vcc-section--bg-image, .vcc-section--bg-video {
	background-color: var(--mp-bg-surface, #ffffff);
	background-position: center;
	background-size: cover;
}
.vcc-section__video {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}
/* Оверлей — слой СЕКЦИИ (z1): под контентом (inner z2), над фоном/видео
 * (video z0). На __inner он затемнял бы сам текст. */
.vcc-section--overlay::before {
	background: rgba(0, 0, 0, 0.45);
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}
.vcc-section__inner { position: relative; z-index: 2; }
.vcc-section--pad-s { padding: 40px 0; }
.vcc-section--pad-m { padding: 64px 0; }
.vcc-section--pad-l { padding: 84px 0; }
.vcc-section--pad-xl { padding: 120px 0; }
/* Ширина контента повторяет настройку темы «Ширина сайта»
   (Дизайн и стили): --vita-container-max приходит из пресета
   (1210/1400/1640/100%) — предпросмотр равен витрине. */
.vcc-container { margin: 0 auto; max-width: var(--vita-container-max, 1640px); padding: 0 24px; }
.vcc-section--w-narrow .vcc-container { max-width: 720px; }
.vcc-section--w-full .vcc-container { max-width: none; }

/* --- Заголовок секции (рестайл Tom Modern, этап 1) ---
 * 0.10.5: бровь — как у донора: ГОЛЫЙ текст (mono-стиль иным шрифтом темы),
 * без плашки и маркера; плашка — опция --badge (старое поведение).
 * Заголовок: 34px, плотный трекинг, короткая акцентная черта сверху.
 * Только токены --mp-*: на bg-primary бокс/маркер/черта идут в currentColor. */
.vcc-section__head { margin: 0 0 32px; }
.vcc-section__head--center { text-align: center; }
.vcc-eyebrow {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--mp-text-muted, #64748B);
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	gap: 8px;
	letter-spacing: 0.14em;
	margin-bottom: 12px;
	padding: 0;
	text-transform: uppercase;
}
.vcc-eyebrow::before {
	background: var(--mp-primary, #8C9D93);
	content: '';
	display: none;
	flex-shrink: 0;
	height: 6px;
	width: 6px;
}
/* Опция-плашка (прежний вид) */
.vcc-eyebrow--badge {
	background: var(--mp-bg-surface, #ffffff);
	border: 1px solid var(--mp-border-color, #E2E8F0);
	color: var(--mp-text-main, #2D3748);
	padding: 6px 12px;
}
.vcc-eyebrow--badge::before { display: inline-block; }
.vcc-section--bg-primary .vcc-eyebrow {
	background: transparent;
	border-color: currentColor;
	color: var(--mp-text-inverse, #ffffff);
	opacity: 0.9;
}
.vcc-section--bg-primary .vcc-eyebrow::before { background: currentColor; }
.vcc-section__title {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 12px 0 8px;
	padding-top: 14px;
	position: relative;
}
.vcc-section__title::before {
	background: var(--mp-primary, #8C9D93);
	content: '';
	height: 3px;
	left: 0;
	position: absolute;
	top: 0;
	width: 44px;
}
.vcc-section__head--center .vcc-section__title::before { left: 50%; transform: translateX(-50%); }
.vcc-section--bg-primary .vcc-section__title::before { background: currentColor; }
.vcc-section__sub { color: var(--mp-text-muted, #64748B); margin: 10px 0 0; max-width: 640px; }
.vcc-section__head--center .vcc-section__sub { margin-left: auto; margin-right: auto; }
.vcc-section--bg-primary .vcc-section__sub { color: var(--mp-text-inverse, #ffffff); opacity: 0.9; }

/* --- Кнопки (рестайл Tom Modern: острые углы, плотный вес) --- */
.vcc-btn {
	align-items: center;
	border: 1px solid transparent;
	border-radius: 0;
	box-sizing: border-box;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.03em;
	min-height: 44px;
	padding: 10px 28px;
	text-decoration: none;
}
/* Контраст кнопок при наведении (глобальное правило против «текст = фону»):
 * тема красит a:hover в --mp-primary; если кнопка при hover меняет фон,
 * цвет текста обязан фиксироваться РЯДОМ с фоном — иначе текст исчезает. */
.vcc-btn,
.vcc-btn:hover,
.vcc-btn:focus,
.vcc-btn:active { text-decoration: none; }
/* Референс донора: uppercase 13px, ls 0.08em, паддинг 16×22, hover-сдвиг
 * translate(-2px,-2px) + жёсткая тень 8×8. Базовая primary — ТЁМНАЯ
 * (--tm-text референса), палитра — вариант --accent. */
.vcc-btn {
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.vcc-btn:not(.vcc-btn--link) { transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.15s ease, border-color 0.15s ease; }
.vcc-btn:not(.vcc-btn--link):not(.vcc-btn--full):hover { transform: translate(-2px, -2px); }
.vcc-btn--primary { background: var(--mp-primary, #8C9D93); }
.vcc-btn--primary,
.vcc-btn--primary:hover,
.vcc-btn--primary:focus,
.vcc-btn--primary:active { color: var(--mp-text-inverse, #ffffff); }
.vcc-btn--primary:hover,
.vcc-btn--primary:focus { background: var(--mp-primary-hover, #7A8B81); transform: none; box-shadow: none; }
.vcc-btn--secondary { background: var(--mp-secondary, #5A8F76); }
.vcc-btn--secondary,
.vcc-btn--secondary:hover,
.vcc-btn--secondary:focus,
.vcc-btn--secondary:active { color: var(--mp-text-inverse, #ffffff); }
.vcc-btn--secondary:hover,
.vcc-btn--secondary:focus { background: var(--mp-primary-hover, #7A8B81); filter: none; transform: none; box-shadow: none; }
.vcc-btn--ghost { background: transparent; border-color: var(--mp-border-color, #E2E8F0); color: inherit; }
.vcc-btn--ghost:hover { background: var(--mp-bg-subtle, #f8fafc); border-color: var(--mp-text-muted, #64748B); color: inherit; transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(150, 150, 150, 0.12); }
.vcc-hero .vcc-btn--ghost,
.vcc-section--bg-primary .vcc-btn--ghost { border-color: currentColor; }

/* --- Универсальная кнопка (0.10.3): фон dark/link у ЛЮБОГО блока + размеры --- */
/* Тёмная нейтральная референса — теперь глобальный модификатор (раньше только
 * внутри promocard/hero; фабрика 0.10.3 даёт её каждому блоку) */
.vcc-btn--dark { background: var(--vita-btn-dark, #27272A); }
.vcc-btn--dark,
.vcc-btn--dark:hover,
.vcc-btn--dark:focus,
.vcc-btn--dark:active { color: var(--mp-text-inverse, #ffffff); }
.vcc-btn--dark:hover,
.vcc-btn--dark:focus { background: var(--vita-btn-dark-hover, #3F3F46); }
[data-theme="dark"] .vcc-btn--dark { background: var(--mp-text-inverse, #ffffff); }
[data-theme="dark"] .vcc-btn--dark:hover,
[data-theme="dark"] .vcc-btn--dark:focus { background: var(--mp-bg-hover, #38343E); }
[data-theme="dark"] .vcc-btn--dark,
[data-theme="dark"] .vcc-btn--dark:hover,
[data-theme="dark"] .vcc-btn--dark:focus,
[data-theme="dark"] .vcc-btn--dark:active { color: var(--mp-text-main, #2D3748); }
/* Текстовая кнопка-ссылка: без фона/рамки, цвет — акцент */
.vcc-btn--link { background: transparent; border-color: transparent; color: var(--mp-primary, #8C9D93); min-height: auto; padding: 4px 0; }
.vcc-btn--link:hover,
.vcc-btn--link:focus { color: var(--mp-primary-hover, #7A8B81); text-decoration: underline; }
/* Размеры */
.vcc-btn--sm { min-height: 36px; padding: 6px 16px; font-size: 12px; }
.vcc-btn--lg { min-height: 54px; padding: 14px 36px; font-size: 16px; }
.vcc-btn--full { display: flex; width: 100%; }
/* Ряд кнопок после контентных блоков (heading/paragraph/list/quote/tabs/table/image) */
.vcc-btnrow { margin-top: 16px; }
.vcc-btnrow .vcc-btn--full + .vcc-btn--full { margin-top: 10px; }
/* Иконка внутри кнопки: не бейдж 40×40, а знак цвета текста кнопки.
 * Селектор на vcc-icon (не на модификатор): рантайм темы заменяет span
 * на <i class="fa … vcc-icon"> — модификатор --inline при этом теряется. */
.vcc-btn .vcc-icon--inline,
.vcc-btn .vcc-icon { background: transparent; border-radius: 0; color: inherit; height: 16px; width: 16px; font-size: 14px; }

/* --- Иконка (span -> i рантаймом темы): тихий квадрат донора (0.10.4).
 * Референс features: бокс 40×40, фон --mp-bg-subtle, глиф --mp-text-muted,
 * прижата влево вместе с текстом карточки. Бывшая заливка палитрой
 * выглядела «огромной цветной плашкой» — убрана. */
.vcc-icon {
	align-items: center;
	background: var(--mp-bg-subtle, #f8fafc);
	border-radius: 0;
	color: var(--mp-text-muted, #64748B);
	display: inline-flex;
	font-size: 16px;
	height: 40px;
	justify-content: center;
	width: 40px;
}
.vcc-section--bg-primary .vcc-icon { background: rgba(255, 255, 255, 0.18); color: inherit; }

/* --- Акцент inline --- */
.vcc-accent { color: var(--mp-primary, #8C9D93); font-weight: inherit; }
.vcc-section--bg-primary .vcc-accent {
	color: var(--mp-text-inverse, #ffffff);
	text-decoration: underline;
	text-decoration-color: var(--mp-text-inverse, #ffffff);
}

/* --- hero --- */
.vcc-hero { padding: 8px 0; }
.vcc-hero--center { text-align: center; }
/* 0.10.4: заголовки рендерятся нейтральными тегами (div/p) — явный font-weight
 * обязателен, браузерного bold от <h1..h6> больше нет */
.vcc-hero__title { font-size: 42px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 14px; }
.vcc-hero__sub { color: var(--mp-text-muted, #64748B); font-size: 19px; margin: 0 auto 28px; max-width: 720px; }
.vcc-section--bg-primary .vcc-hero__sub,
.vcc-section--bg-image .vcc-hero__sub,
.vcc-section--bg-video .vcc-hero__sub { color: inherit; opacity: 0.9; }
.vcc-hero__actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
.vcc-hero--center .vcc-hero__actions { justify-content: center; }
.vcc-hero__note { color: var(--mp-text-light, #94A3B8); font-size: 13px; margin: 18px 0 0; }
/* Референс hero-notes (0.10.8): строка доверия mono с трекингом; версия с
 * линией сверху получает отступ 20px и список-флекс с gap как у донора. */
.vcc-hero__note--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.06em; }
.vcc-hero__note--lined.vcc-hero__note--mono { letter-spacing: 0.06em; }

/* Панель-визуал hero (референс hero-visual): рамочный блок справа с topline
 * и метриками; раскладка — flex-пара «main + visual» от 992px, колонка ниже. */
.vcc-hero--split { align-items: center; display: flex; flex-wrap: wrap; gap: 40px; text-align: left; }
.vcc-hero--split .vcc-hero__main { flex: 1 1 460px; }
.vcc-hero__visual {
	background: var(--mp-bg-surface, #ffffff);
	border: 1px solid var(--mp-border-color, #E2E8F0);
	box-shadow: 8px 8px 0 var(--mp-border-color, #E2E8F0);
	flex: 1 1 320px;
	padding: 20px;
}
.vcc-hero__visual-top {
	align-items: baseline;
	border-bottom: 1px solid var(--mp-border-color, #E2E8F0);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding-bottom: 12px;
}
.vcc-hero__visual-kicker {
	background: var(--mp-badge-express-bg, #059669);
	color: var(--mp-text-inverse, #ffffff);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 3px 8px;
	text-transform: uppercase;
}
.vcc-hero__visual-metrics { display: grid; gap: 0; }
.vcc-hero__visual-metrics article {
	border-bottom: 1px solid var(--mp-border-divider, #F1F5F9);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 10px 0;
}
.vcc-hero__visual-metrics article:last-child { border-bottom: 0; padding-bottom: 0; }
.vcc-hero__visual-metrics strong { font-size: 22px; letter-spacing: -0.01em; }
.vcc-hero__visual-metrics span { color: var(--mp-text-light, #94A3B8); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.vcc-section--bg-primary .vcc-hero__visual { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.12); }
.vcc-section--bg-primary .vcc-hero__visual-metrics span { color: inherit; opacity: 0.85; }
@media (max-width: 991px) { .vcc-hero--split .vcc-hero__visual { flex-basis: 100%; } }

/* --- hero: панель «карточка ключа + плитки» (visual=keycard) ---
 * Обёртка колонки панели; сама разметка карточек и плиток — штатные
 * vcc-keycard/vcc-stats, никаких параллельных классов. */
.vcc-hero__panel { display: flex; flex: 1 1 320px; flex-direction: column; gap: 18px; min-width: 0; }
.vcc-hero__panel .vcc-keycard > * { max-width: none; }
/* Специфичность выше базового .vcc-stats (объявлен позже) — сетка панели фиксированная */
.vcc-hero .vcc-hero__tiles { gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.vcc-hero .vcc-hero__tiles.vcc-stats--boxed .vcc-stat__value { font-size: 26px; }
.vcc-hero .vcc-hero__tiles .vcc-stat__label { font-size: 10px; }
@media (max-width: 991px) { .vcc-hero--split .vcc-hero__panel { flex-basis: 100%; } }
@media (max-width: 767px) { .vcc-hero .vcc-hero__tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
/* strips-плитки в панели hero: лейбл над значением (референс донора — readout-tile) */
.vcc-hero .vcc-hero__tiles.vcc-stats--strips .vcc-stat { display: flex; flex-direction: column; }
.vcc-hero .vcc-hero__tiles.vcc-stats--strips .vcc-stat__label { order: -1; margin-bottom: 6px; }
/* опция заголовка H1 в верхнем регистре (референс донора) */
.vcc-hero__title--upper { text-transform: uppercase; line-height: 0.98; letter-spacing: -0.02em; }
.vcc-section--bg-primary .vcc-hero__note,
.vcc-section--bg-image .vcc-hero__note,
.vcc-section--bg-video .vcc-hero__note { color: inherit; opacity: 0.75; }

/* --- logos --- */
.vcc-logos { align-items: center; display: flex; flex-wrap: wrap; gap: 40px; row-gap: 24px; }
/* Центрированный заголовок секции — центрируем и ряд логотипов,
   иначе 3-4 знака липнут к левому краю широкого контейнера. */
.vcc-section__head--center + .vcc-logos { justify-content: center; }
.vcc-logos__img { height: 40px; width: auto; opacity: 0.75; }
.vcc-logos__link:hover .vcc-logos__img { opacity: 1; }

/* --- features (Tom Modern: рамочная карточка 0px, статичная —
   без hover-сдвига: в статьях эффект наведения отвлекает и
   отсутствует у донора-эталона) --- */
.vcc-features { display: grid; gap: 18px; }
.vcc-features--c2 { grid-template-columns: repeat(2, 1fr); }
.vcc-features--c3 { grid-template-columns: repeat(3, 1fr); }
.vcc-features--c4 { grid-template-columns: repeat(4, 1fr); }
.vcc-feature {
	background: var(--mp-bg-surface, #ffffff);
	border: 1px solid var(--mp-border-color, #E2E8F0);
	border-radius: 0;
	box-shadow: var(--vita-shadow-soft, 4px 4px 0 rgba(150, 150, 150, 0.1));
	height: 100%;
	padding: 28px;
	text-align: left;
}
/* Карточки фич ВСЕГДА прижаты влево — как у донора: иконка и текст слева,
 * даже когда заголовок секции по центру (центрированный ряд карточек с
 * центрированной иконкой — не референс). */
.vcc-feature { text-align: left; }
.vcc-section__head--center + .vcc-features .vcc-feature { text-align: left; }
.vcc-feature .vcc-icon { margin-bottom: 12px; }
.vcc-feature__icon { margin-bottom: 0; }
.vcc-feature__title { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 8px; text-transform: uppercase; }
.vcc-feature__text { color: var(--mp-text-muted, #64748B); font-size: 14px; }
.vcc-feature__text p { margin: 0 0 10px; }
.vcc-feature__text p:last-child { margin-bottom: 0; }
/* Карточка на зелёной секции остаётся поверхностной: текст — токены, не inherit */
.vcc-section--bg-primary .vcc-feature__text { color: var(--mp-text-muted, #64748B); }

/* --- media_text --- */
.vcc-media-text { align-items: center; display: grid; gap: 40px; grid-template-columns: 1fr 1fr; }
.vcc-media-text--flip .vcc-media-text__media { order: 2; }
.vcc-media-text--flip .vcc-media-text__body { order: 1; }
.vcc-media-text__media { margin: 0; }
.vcc-media-text__media img { border-radius: 0; height: auto; max-width: 100%; }
.vcc-media-text__actions { margin-top: 20px; }

/* --- steps --- */
.vcc-steps { display: grid; gap: 20px; }/* Таймлайн: точное соответствие референсу — тонкая ровная линия слева,
   маленькие сплошные точки-маркеры на линии, карточки без рамки с мягкой
   тенью, год — обычный жирный акцентный текст (не капс). */
.vcc-steps--timeline { gap: 24px; padding-left: 56px; position: relative; }
.vcc-steps--timeline::before {
	background: var(--mp-border-color, #E2E8F0);
	bottom: 44px;
	content: '';
	left: 7px;
	position: absolute;
	top: 31px;
	width: 2px;
}
.vcc-steps--timeline .vcc-step {
	background: var(--mp-card-bg, #ffffff);
	border: 1px solid var(--mp-border-color, #E2E8F0);
	border-radius: 0;
	box-shadow: none;
	height: 100%;
	padding: 24px 30px 26px;
	position: relative;
}
/* Точка-маркер на линии: сплошная, маленькая (10px), цвет бренда;
   центр точно на оси линии (left: -53px → центр 8px = центр линии 8px).
   На hover карточки точка мягко увеличивается. */
.vcc-steps--timeline .vcc-step__num {
	background: var(--mp-primary, #8C9D93);
	border: 0;
	border-radius: 50%;
	font-size: 0;
	height: 10px;
	left: -53px;
	overflow: hidden;
	position: absolute;
	top: 31px;
	transition: transform 0.25s ease;
	width: 10px;
}
.vcc-steps--timeline .vcc-step:hover .vcc-step__num { transform: scale(1.5); }
/* Стиль «Номера» — горизонтальная сетка колонок (как у «Преимуществ»):
   4 шага и меньше — во столько же колонок, 5+ — в 3; на мобильных — колонка.
   Карточка: номер-круг слева, заголовок справа по центру круга,
   описание под заголовком — без пустой строки под номером. */
.vcc-steps--numbers { grid-template-columns: repeat(3, 1fr); }
.vcc-steps--numbers.is-c2 { grid-template-columns: repeat(2, 1fr); }
.vcc-steps--numbers.is-c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767px) {
	.vcc-steps--numbers,
	.vcc-steps--numbers.is-c2,
	.vcc-steps--numbers.is-c4 { grid-template-columns: 1fr; }
}
.vcc-steps--numbers .vcc-step {
	background: var(--mp-card-bg, #ffffff);
	border: 1px solid var(--mp-border-color, #E2E8F0);
	border-radius: 0;
	box-shadow: none;
	display: flex;
	gap: 16px;
	height: 100%;
	padding: 24px 26px;
}
.vcc-steps--numbers .vcc-step__num {
	align-items: center;
	background: transparent;
	border: 2px solid var(--mp-primary, #8C9D93);
	border-radius: 0;
	box-shadow: none;
	color: var(--mp-primary, #8C9D93);
	display: inline-flex;
	flex-shrink: 0;
	font-size: 18px;
	font-weight: 700;
	height: 48px;
	justify-content: center;
	line-height: 1;
	margin-bottom: 0;
	position: static;
	transition: background 0.18s ease, color 0.18s ease;
	width: 48px;
}
/* Заголовок прижат к кругу: первая строка визуально по центру круга (44px),
   описание идёт ниже на всю ширину колонки тела. */
.vcc-steps--numbers .vcc-step__body { flex: 1 1 auto; min-width: 0; }
.vcc-steps--numbers .vcc-step__label { margin-bottom: 2px; }
.vcc-steps--numbers .vcc-step__title { line-height: 48px; margin: -2px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcc-steps--numbers .vcc-step:hover .vcc-step__num {
	background: var(--mp-primary, #8C9D93);
	color: var(--mp-text-inverse, #ffffff);
}
.vcc-step__label {
	color: var(--mp-primary, #8C9D93);
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 3px;
}
.vcc-step__title { font-size: 19px; font-weight: 700; margin: 6px 0 6px; }
.vcc-step__text { color: var(--mp-text-muted, #64748B); }
/* Стиль «Карточка» (0.10.8) — референс step-card: карточка с ШАПКОЙ
 * (фон surface, снизу бордер) с номером 44×44 квадратом mono с рамкой 2px
 * нейтрального цвета (НЕ акцент) + тело с текстом 14px. */
.vcc-steps--card { gap: 18px; }
.vcc-steps--card .vcc-step {
	background: var(--mp-bg-surface, #ffffff);
	border: 1px solid var(--mp-border-color, #E2E8F0);
	box-shadow: 4px 4px 0 rgba(150, 150, 150, 0.1);
	overflow: hidden;
	padding: 0;
}
.vcc-steps--card .vcc-step__head {
	align-items: center;
	background: var(--mp-bg-subtle, #f8fafc);
	border-bottom: 1px solid var(--mp-border-color, #E2E8F0);
	display: flex;
	gap: 16px;
	padding: 20px 24px;
}
.vcc-steps--card .vcc-step__num {
	align-items: center;
	border: 2px solid var(--mp-border-color, #E2E8F0);
	color: var(--mp-text-main, #2D3748);
	display: inline-flex;
	flex-shrink: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 18px;
	height: 44px;
	justify-content: center;
	line-height: 1;
	width: 44px;
}
.vcc-steps--card .vcc-step__title { font-size: 16px; letter-spacing: -0.02em; margin: 0; text-transform: uppercase; }
.vcc-steps--card .vcc-step__label { color: var(--mp-text-muted, #64748B); font-size: 13px; font-weight: 600; margin: 2px 0 0; }
.vcc-steps--card .vcc-step__text { font-size: 14px; padding: 24px; }
[data-theme="dark"] .vcc-steps--card .vcc-step__head { background: var(--mp-bg-hover, #38343E); }
.vcc-step__text p { margin: 0 0 8px; }
.vcc-step__text p:last-child { margin-bottom: 0; }
/* Тёмная тема: карточки на --mp-card-bg (токен сам тёмный),
   рамки/тени тоже токенные — отдельные оверраиды больше не нужны. */
.vcc-step__text p { margin: 0 0 8px; }
.vcc-step__text p:last-child { margin-bottom: 0; }

/* --- stats --- */
.vcc-stats { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); text-align: center; }
.vcc-stat__value { color: inherit; display: block; font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.vcc-stat__suffix { font-size: 0.55em; font-weight: 600; margin-left: 2px; opacity: 0.85; }
.vcc-stat__label { color: var(--mp-text-muted, #64748B); font-size: 14px; }
.vcc-section--bg-primary .vcc-stat__label { color: inherit; opacity: 0.85; }

/* --- reviews --- */
.vcc-reviews { display: grid; gap: 18px; }
.vcc-reviews--c2 { grid-template-columns: repeat(2, 1fr); }
.vcc-reviews--c3 { grid-template-columns: repeat(3, 1fr); }
.vcc-review {
	background: var(--mp-bg-surface, #ffffff);
	border: 1px solid var(--mp-border-color, #E2E8F0);
	border-radius: 0;
	box-shadow: none;
	color: var(--mp-text-body, #2D3748);
	font-style: normal;
	margin: 0;
	padding: 24px;
}
.vcc-review__text { margin: 0 0 12px; }
.vcc-stars { color: var(--mp-star-color, #f59e0b); display: block; font-size: 15px; letter-spacing: 2px; margin-bottom: 10px; }
.vcc-review__person { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.vcc-review__avatar { border-radius: var(--mp-radius-pill, 9999px); height: 40px; width: 40px; object-fit: cover; }
.vcc-review__name { color: var(--mp-text-main, #2D3748); }
.vcc-review__role { color: var(--mp-text-light, #94A3B8); display: block; font-size: 13px; width: 100%; }

/* --- before_after (До / После) --- */
.vcc-ba { display: grid; gap: 24px; }
.vcc-ba--c2 { grid-template-columns: repeat(2, 1fr); }
.vcc-ba--c3 { grid-template-columns: repeat(3, 1fr); }
.vcc-ba--c4 { grid-template-columns: repeat(4, 1fr); }
.vcc-ba__item { margin: 0; }
.vcc-ba__media {
	position: relative;
	overflow: hidden;
	border-radius: 0;
	box-shadow: none;
}
.vcc-ba__media img {
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}
.vcc-ba__label {
	background: var(--mp-primary, #8C9D93);
	border-radius: 0;
	color: var(--mp-text-inverse, #ffffff);
	font-size: 12px;
	font-weight: 700;
	left: 12px;
	letter-spacing: 0.04em;
	padding: 4px 12px;
	position: absolute;
	top: 12px;
}
.vcc-ba__item:hover .vcc-ba__media {
	box-shadow: var(--mp-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
}
.vcc-ba__caption { color: var(--mp-text-muted, #64748B); font-size: 14px; margin-top: 10px; }
.vcc-ba__caption p { margin: 0 0 8px; }
.vcc-ba__caption p:last-child { margin-bottom: 0; }
.vcc-section__head--center + .vcc-ba .vcc-ba__caption { text-align: center; }

/* --- team --- */
.vcc-team { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* --- team (рестайл: рамочная карточка 0px, квадратное фото, uppercase-роль) --- */
.vcc-member {
	background: var(--mp-bg-surface, #ffffff);
	border: 1px solid var(--mp-border-color, #E2E8F0);
	border-radius: 0;
	height: 100%;
	padding: 24px;
	text-align: center;
}
.vcc-member__photo { border-radius: 0; height: 128px; object-fit: cover; width: 128px; }
.vcc-member__name { color: var(--mp-text-main, #2D3748); display: block; font-weight: 700; margin-top: 14px; }
.vcc-member__role {
	color: var(--mp-text-muted, #64748B);
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-top: 4px;
	text-transform: uppercase;
}
.vcc-member__text { color: var(--mp-text-muted, #64748B); font-size: 14px; margin-top: 10px; }
.vcc-member__text p { margin: 0 0 8px; }
.vcc-member__text p:last-child { margin-bottom: 0; }

/* --- documents --- */
.vcc-docs { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.vcc-doc { color: inherit; display: block; text-align: center; text-decoration: none; }
.vcc-doc__img { border: 1px solid var(--mp-border-color, #E2E8F0); border-radius: var(--mp-radius-md, 4px); height: auto; max-width: 100%; }
.vcc-doc__title { color: var(--mp-text-muted, #64748B); display: block; font-size: 14px; margin-top: 8px; }
.vcc-doc:hover .vcc-doc__title { color: var(--mp-primary, #8C9D93); }

/* --- cta --- */
.vcc-cta { text-align: center; }
.vcc-cta__title { font-weight: 700; margin: 0 0 12px; }
.vcc-cta__text { color: var(--mp-text-muted, #64748B); margin: 0 auto 24px; max-width: 640px; }
.vcc-section--bg-primary .vcc-cta__text { color: inherit; opacity: 0.9; }
.vcc-cta__actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* --- contacts --- */
/* --- contacts (рестайл: строки-спецификации с uppercase-лейблами) --- */
.vcc-contacts { display: grid; gap: 0; }
.vcc-contact {
	align-items: center;
	border-bottom: 1px solid var(--mp-border-divider, #F1F5F9);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 12px 0;
}
.vcc-contact:last-child { border-bottom: none; }
.vcc-contact__label {
	color: var(--mp-text-light, #94A3B8);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	min-width: 130px;
	text-transform: uppercase;
}
.vcc-contact__value { color: var(--mp-text-main, #2D3748); font-weight: 600; text-decoration: none; }
a.vcc-contact__value:hover { color: var(--mp-primary, #8C9D93); text-decoration: underline; }

/* --- socials --- */
.vcc-socials { display: flex; flex-wrap: wrap; gap: 14px; }
.vcc-socials--center { justify-content: center; }
.vcc-social {
	align-items: center;
	border: 1px solid var(--mp-border-color, #E2E8F0);
	border-radius: var(--mp-radius-pill, 9999px);
	color: var(--mp-text-body, #2D3748);
	display: inline-flex;
	gap: 8px;
	padding: 8px 18px 8px 10px;
	position: relative;
	text-decoration: none;
}
.vcc-social .vcc-icon { height: 32px; width: 32px; font-size: 15px; }
.vcc-social:hover { border-color: var(--mp-primary, #8C9D93); color: var(--mp-primary, #8C9D93); }

/* --- badges --- */
.vcc-badges { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.vcc-badge {
	align-items: center;
	background: var(--mp-bg-surface, #ffffff);
	border: 1px solid var(--mp-border-color, #E2E8F0);
	border-radius: var(--mp-radius-md, 4px);
	display: flex;
	gap: 12px;
	padding: 14px 16px;
}
.vcc-badge .vcc-icon { flex: 0 0 auto; height: 40px; width: 40px; font-size: 17px; }
/* Тёмная тема: тихий квадрат донора переворачивается токенами */
[data-theme="dark"] .vcc-icon { background: var(--mp-bg-hover, #38343E); color: var(--mp-text-muted, #64748B); }
.vcc-badge__title { color: var(--mp-text-main, #2D3748); display: block; font-weight: 600; }
.vcc-badge__text { color: var(--mp-text-light, #94A3B8); display: block; font-size: 13px; }

/* --- checklist --- */
.vcc-checklist { list-style: none; margin: 0; padding: 0; }
.vcc-checklist--c2 { display: grid; gap: 8px 32px; }
.vcc-checklist__item { padding: 6px 0 6px 34px; position: relative; }
.vcc-checklist__item::before {
	color: var(--mp-primary, #8C9D93);
	content: '\2713';
	font-weight: 700;
	left: 4px;
	position: absolute;
}

/* --- divider --- */
.vcc-divider {
	align-items: center;
	display: flex;
	justify-content: center;
}
.vcc-divider--line { border-top: 1px solid var(--mp-border-color, #E2E8F0); }
.vcc-divider__ornament { color: var(--mp-text-light, #94A3B8); font-size: 20px; letter-spacing: 6px; }

/* --- seotext --- */
.vcc-seotext {
	background: var(--mp-bg-subtle, #f8fafc);
	border: 1px solid var(--mp-border-divider, #F1F5F9);
	border-radius: var(--mp-radius-md, 4px);
}
.vcc-seotext__summary {
	color: var(--mp-text-main, #2D3748);
	cursor: pointer;
	font-weight: 600;
	padding: 14px 18px;
}
.vcc-seotext__summary:hover { color: var(--mp-primary, #8C9D93); }
.vcc-seotext__body { border-top: 1px solid var(--mp-border-divider, #F1F5F9); padding: 14px 18px; }
.vcc-seotext__body p:last-child { margin-bottom: 0; }

/* --- pricing --- */
.vcc-plans { align-items: stretch; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vcc-plan {
	background: var(--mp-bg-surface, #ffffff);
	border: 1px solid var(--mp-border-color, #E2E8F0);
	border-radius: 0;
	display: flex;
	flex-direction: column;
	padding: 28px 24px;
	position: relative;
	text-align: center;
}
.vcc-plan--left { text-align: left; }
.vcc-plan--featured {
	background: var(--mp-primary-light, #F2F6F4);
	border-color: var(--mp-primary, #8C9D93);
	box-shadow: 6px 6px 0 var(--mp-border-color, #E2E8F0);
}
.vcc-plan__flag {
	background: var(--mp-primary, #8C9D93);
	border-radius: 0;
	color: var(--mp-text-inverse, #ffffff);
	font-size: 11px;
	font-weight: 700;
	left: 50%;
	letter-spacing: 0.08em;
	padding: 4px 14px;
	position: absolute;
	text-transform: uppercase;
	top: -12px;
	transform: translateX(-50%);
}
.vcc-plan__name { color: var(--mp-text-main, #2D3748); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; margin: 4px 0 10px; text-transform: uppercase; }
.vcc-plan__price { color: var(--mp-text-main, #2D3748); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.vcc-plan__period { color: var(--mp-text-muted, #64748B); font-size: 15px; font-weight: 400; margin-left: 4px; }
.vcc-plan__old { color: var(--mp-text-light, #94A3B8); text-decoration: line-through; }
.vcc-plan__features { list-style: none; margin: 18px 0 22px; padding: 0; text-align: left; }
.vcc-plan__features li { border-bottom: 1px solid var(--mp-border-divider, #F1F5F9); padding: 8px 0 8px 24px; position: relative; }
.vcc-plan__features li::before { color: var(--mp-primary, #8C9D93); content: '\2713'; font-weight: 700; left: 2px; position: absolute; }
.vcc-plan__features li:last-child { border-bottom: none; }
.vcc-plan .vcc-btn { margin-top: auto; width: 100%; }
.vcc-plan__note { color: var(--mp-text-light, #94A3B8); font-size: 12px; margin-top: 10px; }

/* --- video --- */
.vcc-video {
	position: relative;
	width: 100%;
}
.vcc-video--16x9 { aspect-ratio: 16 / 9; }
.vcc-video--4x3 { aspect-ratio: 4 / 3; }
.vcc-video--1x1 { aspect-ratio: 1 / 1; }
.vcc-video__frame,
.vcc-video__link {
	border: 0;
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
.vcc-video__link {
	align-items: center;
	background: var(--mp-bg-subtle, #f8fafc);
	border-radius: var(--mp-radius-md, 4px);
	color: var(--mp-text-body, #2D3748);
	display: flex;
	justify-content: center;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}
.vcc-video__link::before { color: var(--mp-primary, #8C9D93); content: '\25B6'; font-size: 28px; margin-right: 12px; }
.vcc-video__caption { color: var(--mp-text-light, #94A3B8); font-size: 13px; margin: 8px 0 0; text-align: center; }

/* --- columns --- */
.vcc-columns { display: grid; gap: 28px; }
.vcc-columns--c2 { grid-template-columns: repeat(2, 1fr); }
.vcc-columns--c3 { grid-template-columns: repeat(3, 1fr); }
.vcc-columns--c4 { grid-template-columns: repeat(4, 1fr); }
.vcc-column p { margin: 0 0 12px; }
.vcc-column p:last-child { margin-bottom: 0; }
/* Заголовки markdown (##/###/####) внутри колонок: обнуляем верхний
 * отступ vcc-heading (32px) — в колонке заголовок стоит первым и должен
 * совпадать по базовой линии с первым абзацем соседней колонки. */
.vcc-column > .vcc-heading:first-child { margin-top: 0; }

/* --- Адаптив: один паттерн, сетки схлопываются в колонку --- */
@media (max-width: 767px) {
	.vcc-hero__title { font-size: 31px; }
	.vcc-section__title { font-size: 26px; }
	.vcc-features--c2, .vcc-features--c3, .vcc-features--c4,
	.vcc-media-text, .vcc-reviews--c2, .vcc-reviews--c3,
	.vcc-columns--c2, .vcc-columns--c3, .vcc-columns--c4,
	.vcc-pains--c2, .vcc-pains--c3, .vcc-pains--c4,
	.vcc-updates--c2, .vcc-updates--c3, .vcc-updates--c4,
	.vcc-ba--c2, .vcc-ba--c3, .vcc-ba--c4 {
		grid-template-columns: 1fr;
	}
	/* Спецификация: фикс-колонка лейблов на мобиле становится стеком */
	.vcc-speclist__row { gap: 2px 0; }
	.vcc-speclist__label { flex-basis: 100%; padding-right: 0; }
	.vcc-speclist__value { flex-basis: 100%; }
	.vcc-media-text--flip .vcc-media-text__media { order: 0; }
	.vcc-media-text--flip .vcc-media-text__body { order: 0; }
	.vcc-section--pad-s { padding: 36px 0; }
	.vcc-section--pad-m { padding: 52px 0; }
	.vcc-section--pad-l { padding: 64px 0; }
	.vcc-section--pad-xl { padding: 80px 0; }
}

/* --- Тёмная тема: ровно два аддитивных оверрая (спека §4.4) --- */
[data-theme="dark"] .vcc-plan--featured { background: var(--mp-bg-hover, #38343E); }
[data-theme="dark"] .vcc-section--overlay::before { background: rgba(0, 0, 0, 0.65); }

/* ============================================================
   v0.10.0: Новые блоки Tom Modern — key_card и code_window.
   Перевод палитры оригинала на токены Виты: тёмная карточка
   = инверсия --mp-text-main/--mp-text-inverse (в светлой теме
   карточка тёмная, в тёмной — светлая); янтарь метки =
   --mp-star-color; «светофор» и синтаксис = badge-токены.
   ============================================================ */

/* --- key_card (премиум-карточка ключа) --- */
.vcc-keycard { align-items: center; display: flex; flex-direction: column; }
.vcc-keycard > * { max-width: 390px; width: 100%; }
.vcc-keycard__meta {
	border-bottom: 1px solid var(--mp-border-color, #E2E8F0);
	color: var(--mp-text-muted, #64748B);
	display: flex;
	font-size: 10px;
	font-weight: 700;
	gap: 12px;
	justify-content: space-between;
	letter-spacing: 0.14em;
	margin-bottom: 14px;
	padding: 0 2px 10px;
	text-transform: uppercase;
}
.vcc-keycard__card {
	background: linear-gradient(155deg, var(--mp-text-main, #2D3748) 0%, var(--mp-text-body, #2D3748) 55%, var(--mp-secondary, #5A8F76) 160%);
	color: var(--mp-text-inverse, #ffffff);
	overflow: hidden;
	padding: 24px 22px 18px;
	position: relative;
}
.vcc-keycard__sheen {
	animation: vcc-sheen-sweep 2.4s ease-out 0.2s 1;
	background: linear-gradient(115deg,
		transparent 32%,
		rgba(255, 255, 255, 0.14) 42%,
		rgba(255, 255, 255, 0.2) 50%,
		rgba(255, 255, 255, 0.1) 56%,
		transparent 66%);
	height: 180%;
	left: -65%;
	mix-blend-mode: screen;
	pointer-events: none;
	position: absolute;
	top: -40%;
	transform: rotate(9deg) translateX(-12%);
	width: 170%;
	z-index: 0;
}
@keyframes vcc-sheen-sweep {
	from { transform: rotate(9deg) translateX(-38%); }
	to { transform: rotate(9deg) translateX(-12%); }
}
@media (prefers-reduced-motion: reduce) {
	.vcc-keycard__sheen { animation: none; }
}
.vcc-keycard__label {
	color: var(--mp-star-color, #f59e0b);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-bottom: 12px;
	position: relative;
	text-transform: uppercase;
	z-index: 1;
}
.vcc-keycard__value {
	display: flex;
	flex-wrap: wrap;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 22px;
	font-weight: 500;
	gap: 2px;
	letter-spacing: 1px;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}
.vcc-keycard__value .vcc-keycard__sep { opacity: 0.35; }
.vcc-keycard__value .vcc-keycard__seg--dim { opacity: 0.32; }
.vcc-keycard__perforation {
	border-top: 1px dashed rgba(255, 255, 255, 0.28);
	position: relative;
}
[data-theme="dark"] .vcc-keycard__perforation { border-color: rgba(0, 0, 0, 0.25); }
.vcc-keycard__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 0 0;
	position: relative;
	z-index: 1;
}
.vcc-keycard__footer .vcc-chip,
.vcc-chip {
	align-items: center;
	border: 1px solid;
	border-color: rgba(255, 255, 255, 0.22);
	border-radius: var(--mp-radius-pill, 9999px);
	display: inline-flex;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 10.5px;
	gap: 5px;
	letter-spacing: 0.06em;
	padding: 5px 10px;
	text-transform: uppercase;
}
[data-theme="dark"] .vcc-chip { border-color: rgba(0, 0, 0, 0.22); }
/* Иконка чипа: компактная, поверх бейдж-базовой стилизации .vcc-icon */
.vcc-chip .vcc-icon {
	background: transparent;
	color: inherit;
	font-size: 12px;
	height: 14px;
	margin: 0;
	vertical-align: middle;
	width: 14px;
}

/* --- code_window (код-окно) --- */
.vcc-codewin {
	border: 1px solid rgba(17, 21, 23, 0.12);
	box-shadow: 0 28px 90px rgba(22, 22, 22, 0.14);
	overflow: hidden;
	position: relative;
}
/* Референс: окно ЦЕЛИКОМ тёмное — шапка чуть светлее тела, дотсы —
 * канонический «светофор» macOS. Токены не подходят: в тёмной
 * теме они перевернулись бы и сломали артефакт (как с купоном). */
.vcc-codewin__header {
	align-items: center;
	background: var(--vita-code-panel, #151A1D);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	gap: 14px;
	min-height: 44px;
	padding: 0 18px;
}
.vcc-codewin__dots { display: inline-flex; flex: 0 0 auto; gap: 8px; }
.vcc-codewin__dots span { border-radius: var(--mp-radius-pill, 9999px); height: 11px; width: 11px; }
.vcc-codewin__dots span:nth-child(1) { background: var(--vita-code-dot1, #ff5f57); }
.vcc-codewin__dots span:nth-child(2) { background: var(--vita-code-dot2, #ffbd2e); }
.vcc-codewin__dots span:nth-child(3) { background: var(--vita-code-dot3, #28c840); }
.vcc-codewin__title {
	color: rgba(238, 242, 245, 0.58);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}
.vcc-codewin__body {
	background: var(--vita-code-bg, #111517);
	color: var(--vita-code-text, #D8DEE9);
	overflow-x: auto;
	padding: 24px;
	position: relative;
}
/* Тело окна изолировано от стилей темы для голых pre/code:
   конкретные селекторы с !important бьют любые правила витрины. */
.vcc-codewin__body pre {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
}
.vcc-codewin__body code {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	display: block !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
	padding: 0 !important;
	white-space: pre-wrap !important;
}
.vcc-codewin__body code::before,
.vcc-codewin__body code::after { content: none !important; }
.vcc-codewin__body pre code span { color: inherit; }
.vcc-codewin__body .vcc-tok-comment { color: var(--mp-text-light, #94A3B8); opacity: 0.8; }
.vcc-codewin__body .vcc-tok-keyword { color: var(--mp-star-color, #f59e0b); }
.vcc-tok-keyword { color: var(--mp-star-color, #f59e0b); }
.vcc-tok-function { color: var(--mp-badge-express-bg, #059669); }
.vcc-tok-string { color: var(--mp-secondary, #5A8F76); }
.vcc-tok-number { color: var(--mp-badge-hit-bg, #d97706); }
.vcc-tok-property { color: var(--mp-primary, #8C9D93); }
.vcc-tok-comment { color: var(--mp-text-light, #94A3B8); opacity: 0.8; }
.vcc-tok-punctuation { opacity: 0.55; }
[data-theme="dark"] .vcc-codewin__body { background: var(--vita-code-bg, #111517); }

/* ============================================================
   v0.10.2: Ряд (row), promo_card, key_card «тёмное окно»,
   универсальная копи-кнопка. Референсы — две страницы
   opencartforum.com.ru (Tom Modern). Только токены --mp-*.
   ============================================================ */

/* --- Ряд: двухколоночная композиция «контент + карточка» --- */
.vcc-row { align-items: center; display: flex; flex-wrap: wrap; gap: 40px; }
.vcc-row__main { flex: 1 1 420px; min-width: 0; }
.vcc-row__side { flex: 1 1 320px; min-width: 0; }
/* Пропорции колонок референса: текстовая шире карточки */
.vcc-row--ratio-wide .vcc-row__main { flex-grow: 2; }
.vcc-row--ratio-wide .vcc-row__side { flex-grow: 1; flex-basis: 300px; }
.vcc-row__sidebtn { margin-top: 16px; }
.vcc-row__sidebtn .vcc-copybtn { width: 100%; }
@media (max-width: 991px) { .vcc-row { display: block; } .vcc-row__side { margin-top: 32px; } }

/* --- promo_card: промо-карточка (шапка-полоса, бейдж, заголовок, текст, кнопка) --- */
.vcc-promocard { background: var(--mp-bg-surface, #ffffff); border: 1px solid var(--mp-border-color, #E2E8F0); }
.vcc-promocard__top {
	align-items: center;
	background: var(--mp-bg-subtle, #f8fafc);
	border-bottom: 1px solid var(--mp-border-color, #E2E8F0);
	display: flex;
	justify-content: center;
	min-height: 48px;
	padding: 10px 20px;
}
.vcc-promocard__logo { display: block; height: auto; max-height: 44px; max-width: 180px; width: auto; }
.vcc-promocard__body { padding: 20px 16px 24px; }
.vcc-promocard__badge {
	background: color-mix(in srgb, var(--mp-primary, #8C9D93) 8%, transparent);
	border: 1px solid var(--mp-primary, #8C9D93);
	color: var(--mp-primary, #8C9D93);
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: 14px;
	padding: 3px 10px;
	text-transform: uppercase;
}
/* color-mix не поддержан старыми браузерами — тонировка фоном токена */
@supports not (background: color-mix(in srgb, red 8%, transparent)) {
	.vcc-promocard__badge { background: var(--mp-bg-subtle, #f8fafc); }
}
.vcc-promocard__title { color: var(--mp-text-main, #2D3748); font-size: 17px; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 10px; text-transform: uppercase; }
.vcc-promocard__text { color: var(--mp-text-muted, #64748B); font-size: 15px; }
.vcc-promocard__text p { margin: 0 0 10px; }
.vcc-promocard__text p:last-child { margin-bottom: 0; }
.vcc-promocard__actions { margin-top: 20px; }
/* Тёмная нейтральная кнопка референса: с 0.10.3 — глобальный модификатор
 * .vcc-btn--dark (секция кнопок); прежние scoped-правила promocard/hero
 * удалены — значения те же, а дубль ломал dark-тему равной специфичностью. */

/* --- key_card: вид тела «тёмное окно» (сине-тёмный градиент референса;
 * фиксированные цвета окна — часть артефакта, как у code_window) --- */
.vcc-keycard__card--window {
	background: linear-gradient(135deg, var(--vita-window-1, #1A2837) 0%, var(--vita-window-2, #182437) 55%, var(--vita-window-3, #14302F) 100%);
	/* Окно — артефакт с фиксированным градиентом в ОБЕИХ темах, поэтому и текст
	 * фиксированный белый: --mp-text-inverse в тёмной теме переворачивается в
	 * тёмный и делает код купона невидимым на синем градиенте. */
	color: var(--vita-window-text, #FFFFFF);
}
.vcc-keycard__card--window .vcc-keycard__label { color: var(--mp-keycard-amber, #E8B872); }
/* В режиме окна пунктир уже рисует __window (линия с выемками) — перфорация
 * над чипами свою линию не дублирует */
.vcc-keycard__card--window .vcc-keycard__perforation { border-top: 0; }
/* Тёмная тема: выемки заливаются фоном СТРАНИЦЫ под карточкой (--mp-bg-body),
 * чтобы читаться вырезом (круг на краю окна сливается с окружением).
 * --mp-bg-hover здесь давал серые кляксы: он светлее фона страницы. */
[data-theme="dark"] .vcc-keycard__window::before,
[data-theme="dark"] .vcc-keycard__window::after { background: var(--mp-bg-body, #221F24); }
/* Чипы на фиксированно-тёмном окне: тёмное правило даёт чёрные бордеры —
 * на синем градиенте они невидимы; внутри окна бордер всегда светлый. */
[data-theme="dark"] .vcc-keycard__card--window .vcc-chip { border-color: rgba(255, 255, 255, 0.22); }
/* Выемки купона (0.10.4, замер донора: диаметр ~16px, глубина 9px, центр на
 * пунктире). Механика донора: тёмное тело тянется до КРАЯ карточки, белые
 * круги стоят центроном на краю, внешняя половина срезается overflow:hidden
 * карточки — остаётся полукруглая выемка. Для этого окно растягивается на
 * ширину карточки отрицательными полями (padding карточки 24px 22px 18px). */
.vcc-keycard__window {
	border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
	margin: 0 -22px 16px;
	position: relative;
}
.vcc-keycard__window::before,
.vcc-keycard__window::after {
	background: var(--mp-bg-surface, #ffffff);
	border-radius: 50%;
	content: '';
	height: 16px;
	position: absolute;
	top: -8px;
	width: 16px;
}
.vcc-keycard__window::before { left: -8px; }
.vcc-keycard__window::after { right: -8px; }

/* --- Универсальная копи-кнопка (любой блок; source — data-vcc-copy) --- */
.vcc-copybtn {
	align-items: center;
	background: var(--vita-btn-dark, #27272A);
	border: 1px solid var(--vita-btn-dark, #27272A);
	display: inline-flex;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	gap: 8px;
	justify-content: center;
	letter-spacing: 0.08em;
	min-height: 44px;
	padding: 10px 24px;
	text-transform: uppercase;
}
.vcc-copybtn, .vcc-copybtn:hover, .vcc-copybtn:focus, .vcc-copybtn:active { color: var(--mp-text-inverse, #ffffff); }
.vcc-copybtn:hover { background: var(--vita-btn-dark-hover, #3F3F46); }
.vcc-copybtn.is-copied { background: var(--mp-badge-express-bg, #059669); border-color: var(--mp-badge-express-bg, #059669); }
.vcc-copybtn .vcc-icon { background: transparent; color: inherit; height: 14px; width: 14px; }
/* Мини-вариант рядом с контентом (не полноширинный) */
.vcc-copybtn--inline { min-height: 36px; padding: 6px 14px; }

/* --- stats: вид «рамки» и вид «полоска + лейбл + значение» --- */
.vcc-stats--boxed { gap: 16px; text-align: center; }
.vcc-stats--boxed .vcc-stat { background: var(--mp-bg-surface, #ffffff); border: 1px solid var(--mp-border-color, #E2E8F0); padding: 18px 14px; }
.vcc-stats--boxed .vcc-stat__value { font-size: 28px; }
.vcc-stats--boxed .vcc-stat__label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.vcc-stats--strips { gap: 16px; text-align: left; }
.vcc-stats--strips .vcc-stat { background: var(--mp-bg-surface, #ffffff); border: 1px solid var(--mp-border-color, #E2E8F0); padding: 16px; position: relative; }
.vcc-stats--strips .vcc-stat::before { background: var(--mp-primary, #8C9D93); content: ''; height: 5px; left: 16px; position: absolute; top: 0; width: 32px; }
.vcc-stats--strips .vcc-stat__value { font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.45; }
.vcc-stats--strips .vcc-stat__label { color: var(--mp-text-light, #94A3B8); display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 10px; text-transform: uppercase; }

/* --- hero: кикер (аннотация над H1), размер заголовка, линия над note --- */
.vcc-hero__kicker { color: var(--mp-text-light, #94A3B8); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; margin: 0 0 14px; text-transform: uppercase; }
.vcc-hero__title--sm { font-size: 34px; }
.vcc-hero__title--md { font-size: 56px; }
.vcc-hero__title--lg { font-size: 64px; }
.vcc-hero__title--xl { font-size: 76px; line-height: 1.05; }
.vcc-hero__note--lined { border-top: 1px solid var(--mp-border-color, #E2E8F0); padding-top: 14px; }
/* Бровь секции в стиле plain: без плашки и маркера */
.vcc-eyebrow--plain { background: transparent; border: 0; color: var(--mp-text-light, #94A3B8); padding: 0; }
.vcc-eyebrow--plain::before { display: none; }
.vcc-section__title--md { font-size: 40px; }
.vcc-section__title--lg { font-size: 48px; }

/* --- Живой пример в редакторе (внутри формы блока) --- */
.vcc-live { border: 1px dashed var(--mp-border-color, #E2E8F0); margin-top: 14px; overflow: hidden; }
.vcc-live__bar { background: var(--mp-bg-subtle, #f8fafc); border-bottom: 1px dashed var(--mp-border-color, #E2E8F0); color: var(--mp-text-light, #94A3B8); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; padding: 4px 10px; text-transform: uppercase; }
.vcc-live__body { padding: 12px; }

/* --- Копи-кнопка: адаптива не требует (inline-flex), тёмная тема — токен фона --- */
[data-theme="dark"] .vcc-copybtn { background: var(--mp-text-inverse, #ffffff); border-color: var(--mp-text-inverse, #ffffff); color: var(--mp-text-main, #2D3748); }
[data-theme="dark"] .vcc-copybtn:hover { background: var(--mp-bg-hover, #38343E); border-color: var(--mp-bg-hover, #38343E); color: var(--mp-text-inverse, #ffffff); }
[data-theme="dark"] .vcc-copybtn.is-copied { background: var(--mp-badge-express-bg, #059669); border-color: var(--mp-badge-express-bg, #059669); color: var(--mp-text-inverse, #ffffff); }
[data-theme="dark"] .vcc-promocard { background: var(--mp-bg-surface, #ffffff); }
[data-theme="dark"] .vcc-promocard__top { background: var(--mp-bg-subtle, #f8fafc); }
[data-theme="dark"] .vcc-stats--boxed .vcc-stat, [data-theme="dark"] .vcc-stats--strips .vcc-stat { background: var(--mp-bg-surface, #ffffff); }
@media (max-width: 767px) {
	.vcc-hero__title--sm { font-size: 27px; }
	.vcc-hero__title--md { font-size: 38px; }
	.vcc-hero__title--lg { font-size: 44px; }
	.vcc-hero__title--xl { font-size: 48px; }
	.vcc-section__title--md { font-size: 30px; }
	.vcc-section__title--lg { font-size: 34px; }
}