/* XenonWeb — «Новый дизайн» (черновик с нуля, страница /new-design/).
   Ничего не наследуется от base.css/style-b.css — чистый файл, только под
   этот дизайн. Значения — точная транскрипция Xenon Landing.dc.html /
   UI Kit.dc.html (см. reference_xenonweb_ui_kit.md). Функциональные классы
   чата (xw-chat-panel, xw-chat-dock*, xw-open-callback и т.п.) не
   переименованы — их использует общий assets/js/interactive.js. */

*, *::before, *::after { box-sizing: border-box; }

:root {
	/* Тёмная база */
	--dark-bg: #0B0B0C;
	--dark-surface: #1A1A1A;
	--dark-surface-2: #101010;

	/* Светлая база */
	--light-bg: #EFEFED;
	--card-bg: #FFFFFF;

	/* Текст на тёмном */
	--dark-text: #F4F4F2;
	--dark-text-2: #E6E6E3;
	--dark-text-3: #BFBFBB;
	--dark-placeholder: #A8A8A5;

	/* Текст на светлом */
	--text: #101010;
	--text-2: #2B2B29;
	--text-3: #4A4A47;
	--label: #6B6B67;

	/* Единственный цветной акцент */
	--online: #4ADE80;
	--error: #E08A8A;

	/* Стекло */
	--glass-light-bg: rgba(255, 255, 255, 0.55);
	--glass-light-border: rgba(255, 255, 255, 0.8);
	--glass-dark-bg: rgba(255, 255, 255, 0.07);
	--glass-dark-border: rgba(255, 255, 255, 0.16);

	--radius-lg: 26px;
	--radius-md: 18px;
	--radius-pill: 100px;

	--shadow-light: 0 40px 80px -50px rgba(16, 16, 16, 0.4);
	--shadow-light-lift: 0 50px 100px -40px rgba(16, 16, 16, 0.5);
	--shadow-dark: 0 44px 90px -40px rgba(16, 16, 16, 0.6);
	--shadow-dark-lift: 0 54px 110px -36px rgba(16, 16, 16, 0.7);

	--font-body: 'Manrope', sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;

	--wrap: 1328px;
	--pad-y: 96px;
	--pad-x: 24px;
}
@media (max-width: 1024px) {
	:root { --pad-y: 72px; --pad-x: 22px; }
}
@media (max-width: 640px) {
	:root { --pad-y: 56px; --pad-x: 20px; }
}

/* Плавный скролл нужен для кнопок "Рассчитать стоимость" (hero и блок
   "Как работает система") — обе ведут на #builder. Файл грузится только
   на /new-design/ и на главной, так что на остальные страницы сайта это
   не влияет; в этом дизайне нет закреплённого хедера, поэтому смещение
   scroll-margin-top не нужно. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; background: var(--dark-bg); font-family: var(--font-body); }
/* Юридические страницы (/privacy/, /offer/, /sitemap/) — старая вёрстка
   (.xw-legal, тёмный текст под светлый фон), но теперь грузят и этот файл
   ради нового хедера. body { background: var(--dark-bg) } выше делает их
   нечитаемыми (тёмный текст на тёмном фоне) — возвращаем светлый фон
   только там, где есть .xw-legal, остальные страницы (hero и т.п.) не
   трогаем. */
body:has(.xw-legal) { background: var(--light-bg); }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--font-body); letter-spacing: -0.03em; }

.xn-wrap { position: relative; z-index: 2; max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* ===================== Кнопки ===================== */
.xn-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 13px 22px;
	border-radius: var(--radius-pill);
	white-space: nowrap;
	border: none;
	cursor: pointer;
	transition: box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.xn-btn--primary { background: var(--dark-text); color: var(--dark-bg); box-shadow: 0 22px 50px -26px rgba(255, 255, 255, 0.4); }
.xn-btn--primary:hover { box-shadow: 0 0 0 3px rgba(244, 244, 242, 0.3); }
.xn-btn--primary:active { box-shadow: inset 0 0 0 3px var(--dark-bg); }
/* padding по спеку UI Kit ("Кнопки" -> Secondary: padding 12px 22px) —
   было 10px 21px (значение из самой Xenon Landing.dc.html, там эта
   кнопка чуть меньше, чем в UI Kit — расхождение уже в самих исходниках,
   берём за основу явный спек UI Kit). */
.xn-btn--outline { background: transparent; color: var(--dark-text); border: 1px solid rgba(255, 255, 255, 0.6); font-weight: 600; padding: 12px 22px; }
.xn-btn--outline:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.85); }
.xn-btn--outline:active { background: rgba(255, 255, 255, 0.16); border-color: var(--dark-text); }
.xn-btn--dark { background: var(--dark-surface); color: var(--dark-text); box-shadow: 0 22px 44px -24px rgba(16, 16, 16, 0.6); }
.xn-btn--dark:hover { box-shadow: 0 22px 44px -24px rgba(16, 16, 16, 0.6), 0 0 0 3px rgba(16, 16, 16, 0.2); }
.xn-btn--dark:active { box-shadow: inset 0 0 0 3px var(--dark-text); }
.xn-btn--light { background: var(--card-bg); color: var(--text); border: 1px solid rgba(16, 16, 16, 0.12); box-shadow: var(--shadow-light); }
.xn-btn--light:hover { box-shadow: var(--shadow-light), 0 0 0 3px rgba(16, 16, 16, 0.1); }
.xn-btn--light:active { box-shadow: inset 0 0 0 3px rgba(16, 16, 16, 0.15); }
/* Кнопка в панели расчёта калькулятора в макете крупнее обычной
   (17px/padding 20px 28px против 14px/13px 22px у остальных) —
   единственное такое место на странице, не меняю общий .xn-btn. */
.xn-btn--lg { font-size: 17px; padding: 20px 28px; }
.xn-arrow { display: inline-flex; font-weight: 400; }
.xn-arrow svg { display: block; }

/* ===================== Hero (+ хедер внутри) ===================== */
.xn-hero {
	position: relative;
	overflow: hidden;
	background: var(--dark-bg);
	color: var(--dark-text);
	/* Секция дублирует класс .xw-hero только для JS (interactive.js ищет
	   heroSection через querySelector('.xw-hero')) — но у .xw-hero в base.css
	   есть свой padding-top/bottom (spacing--70/80), который иначе просочится
	   сюда и раздует хедер. Сбрасываем явно, реальные отступы — у .xn-header
	   и .xn-hero__grid. */
	padding: 0;
}
.xn-hero__bg {
	position: absolute;
	inset: 0;
	/* X-координаты сдвинуты ближе к центру относительно макета (было
	   20%/90%) — на широкоформатном экране секция намного шире контентной
	   колонки, и близкие к краю (0-15% / 85-100%) координаты уводят пятно
	   далеко за пределы видимого контента. Y не трогаем, по высоте секция
	   не "разъезжается" так же, как по ширине. */
	background-image:
		radial-gradient(900px 520px at 27% 6%, #26262A 0%, rgba(38, 38, 42, 0) 62%),
		radial-gradient(760px 520px at 73% 96%, #1A1A1D 0%, rgba(26, 26, 29, 0) 66%);
}
.xn-hero__x {
	position: absolute;
	left: 50%;
	/* Позиционируем от верхнего края .xn-hero фиксированным отступом
	   (а не top:%+translateY, где итоговая позиция "плавает" вместе с
	   высотой всей секции). Раньше хедер был первым ребёнком внутри hero,
	   и 76px были подобраны так, чтобы верх буквы прятался под хедером.
	   Теперь хедер — отдельный элемент ПЕРЕД секцией (см. new-hero.php),
	   верхний край .xn-hero уже начинается там, где раньше заканчивался
	   хедер — отступ уменьшен до небольшого зазора, а не компенсации
	   высоты хедера. */
	top: 16px;
	transform: translateX(-50%);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 900px;
	line-height: 0.72;
	letter-spacing: -0.06em;
	color: #FFFFFF;
	opacity: 0.08;
	user-select: none;
	pointer-events: none;
}
.xn-hero__sheen {
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 42%);
}
@media (max-width: 1024px) {
	/* На десктопе буква сидит в пустой правой зоне (сетка в 2 колонки).
	   С 1024px hero-грид уже в одну колонку — под буквой нет свободного
	   места, она режет прямо по чек-листу и тексту. Проще убрать, чем
	   подбирать размер, который нигде не будет мешать. */
	.xn-hero__x { display: none; }
}

.xn-header {
	position: relative;
	z-index: 50;
	/* Раньше хедер был первым ребёнком внутри .xn-hero и получал не только
	   тёмный фон, но и левое пятно градиента секции (.xn-hero__bg) —
	   выглядело как один сплошной холст. Теперь хедер — отдельный элемент
	   перед hero (см. new-hero.php), и без своего фона на десктопе при
	   sticky-скролле сквозь него будет просвечивать содержимое следующих
	   (светлых) секций. Плоский var(--dark-bg) убирал прозрачность, но
	   выглядел отдельной чёрной полосой — повторяю то же самое пятно
	   градиента, что и в .xn-hero__bg (те же координаты 27% 6%), поверх
	   var(--dark-bg): у этого пятна огромный радиус (900x520px) при
	   крошечной высоте хедера, так что видна только его верхушка — ровно
	   то же самое, что было видно на месте хедера раньше. */
	background:
		radial-gradient(900px 520px at 27% 6%, #26262A 0%, rgba(38, 38, 42, 0) 62%),
		var(--dark-bg);
	padding: 26px 0 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 1025px) {
	/* Липкий хедер — только на десктопе, по просьбе. */
	.xn-header { position: sticky; top: 0; }
}
/* scroll-margin-top для #builder задан ниже, у .xn-section-head —
   десктопное значение специально СИЛЬНЕЕ (110px, компенсирует липкий
   хедер) объявлено ПОСЛЕ базового 24px, а не здесь, иначе более позднее
   правило в каскаде просто перетирает более раннее с той же ID-специфичностью
   (уже наступали на эти грабли с font-size в других блоках). */
.xn-header__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px 22px; flex-wrap: wrap; }
.xn-logo { display: inline-flex; align-items: baseline; gap: 9px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--dark-text); }
.xn-logo__accent { font-family: var(--font-mono); font-size: 20px; font-weight: 400; letter-spacing: 0.24em; opacity: 0.55; }
.xn-header__right { display: flex; align-items: center; gap: 18px; }
.xn-header__hours { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; text-align: center; color: var(--dark-text-3); }
.xn-header__cta-short { display: none; }
@media (max-width: 640px) {
	/* Мобильный хедер: только лого + кнопка, без времени работы — часы не
	   помещаются в одну строку и переносятся некрасивым "лесенкой" текстом. */
	.xn-header__hours { display: none; }
	.xn-header__cta-full { display: none; }
	.xn-header__cta-short { display: inline; }
}

.xn-hero__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	/* padding-top меньше, чем в макете (был 74px) — с реальным хедером
	   (у него ещё своя нижняя граница+padding) суммарный отступ до
	   контента получался слишком большим на глаз. padding-bottom не
	   трогаем — это отступ перед следующей секцией. */
	padding-top: 40px;
	padding-bottom: 74px;
}
@media (max-width: 1024px) {
	.xn-hero__grid { grid-template-columns: 1fr; gap: 32px; padding-top: 34px; padding-bottom: 60px; }
}
@media (max-width: 640px) {
	.xn-hero__grid { padding-top: 28px; padding-bottom: 48px; }
	.xn-header { padding-top: 20px; }
	.xn-header__row { padding-bottom: 16px; }
}

.xn-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-pill);
	padding: 9px 18px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dark-text-2);
	margin-bottom: 30px;
}
.xn-eyebrow__break { display: none; }
@media (max-width: 640px) {
	/* inline-flex — центрируется через text-align родителя, как обычный
	   инлайновый элемент. */
	.xn-hero__copy { text-align: center; }
	/* Плашка в одну строку: при исходных 11px + letter-spacing:0.16em +
	   паддинг 18px текст шире, чем помещается на телефоне (~320-335px
	   доступной ширины). Уменьшаем шрифт/трекинг/паддинги, чтобы влезло
	   без переноса — .xn-eyebrow__break остаётся выключен (display:none). */
	.xn-eyebrow { font-size: 10px; letter-spacing: 0.08em; padding: 8px 14px; white-space: nowrap; margin-bottom: 18px; }
	/* Плашка была inline-flex — по ширине под свой текст, уже, чем чек-лист
	   ниже. Растягиваем на всю ширину колонки (как чек-лист), текст внутри
	   остаётся по центру. */
	.xn-eyebrow { display: flex; width: 100%; justify-content: center; box-sizing: border-box; }
}

.xn-h1 { font-weight: 800; font-size: 54px; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 36px; max-width: 520px; color: var(--dark-text); }
@media (max-width: 1024px) { .xn-h1 { font-size: 42px; } }
@media (max-width: 640px) {
	/* margin-bottom был 18px — тот же внутренний отступ, что и у плашки над
	   заголовком (плашка+заголовок — одна смысловая группа). Но переход
	   "заголовок → чек-лист" — это граница между разными группами
	   (заголовок vs список доказательств), как и "чек-лист → кнопка" (30px)
	   — по правилу внутренний/внешний должен быть на том же, внешнем,
	   уровне, а не равен внутреннему. */
	.xn-h1 { font-size: 46px; max-width: none; text-align: center; margin-bottom: 28px; }
}
.xn-plus { font-weight: 400; color: var(--dark-placeholder); }
.xn-nowrap { white-space: nowrap; }

.xn-checklist { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; max-width: 520px; }
@media (max-width: 640px) { .xn-checklist { gap: 20px; } }
/* text-align:center у .xn-hero__copy (мобильный, см. выше) наследуется и
   сюда — переносы внутри буллета центрировались вместо выравнивания по
   левому краю под галочкой. Буллеты остаются левым текстом всегда. */
.xn-checklist { text-align: left; }
@media (max-width: 640px) { .xn-checklist { max-width: none; } }
.xn-checklist__item {
	display: flex;
	align-items: center;
	gap: 14px;
	background: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 16px 20px;
	font-size: 18px;
	font-weight: 400;
	color: var(--dark-text);
}
.xn-checklist__item strong { font-weight: 700; }
.xn-check {
	width: 24px;
	height: 24px;
	flex: none;
	border-radius: 50%;
	background: var(--dark-text);
	color: var(--dark-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}
@media (max-width: 640px) {
	/* align-items:center на .xn-checklist__item (как в макете) хорошо
	   работает, пока текст в одну строку — на мобильном пункты 2 и 3
	   переносятся на 2 строки, и галочка "провисает" по центру между
	   строк вместо того, чтобы стоять вровень с первой строкой. */
	.xn-checklist__item { align-items: flex-start; }
	.xn-check { margin-top: 2px; }
}

.xn-hero__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 640px) {
	.xn-hero__cta { flex-direction: column; align-items: center; width: 100%; }
	/* Кнопка и ряд плашек были каждый по ширине своего содержимого — по
	   просьбе растягиваем на всю ширину колонки, как чек-лист выше. */
	.xn-hero__cta .xn-btn--primary { width: 100%; justify-content: center; box-sizing: border-box; }
	/* flex:1 (поровну) заставлял длинный текст "Директ оформлен на вас"
	   переноситься на 2 строки в узкой половине — по просьбе плашки снова
	   по ширине своего текста (короче/длиннее пропорционально содержимому,
	   а не 50/50), но края ряда всё равно у краёв колонки (space-between);
	   при увеличенном паддинге зазор между ними уже небольшой. */
	.xn-hero__cta .xn-pills { width: 100%; justify-content: space-between; gap: 10px; }
	.xn-hero__cta .xn-pill { flex: none; white-space: nowrap; padding: 14px 30px; box-sizing: border-box; }
}
.xn-pills { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark-text-3); flex-wrap: wrap; }
.xn-pill { border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); padding: 10px 14px; border-radius: var(--radius-pill); }

.xn-hero__caption { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 14px; color: var(--dark-text-2); }
.xn-hero__caption svg { opacity: 0.75; flex: none; width: 16px; height: 16px; }
.xn-hero__caption-break { display: none; }
@media (max-width: 640px) {
	/* Увеличенная стрелка, отступ слева и перенос текста на 2 строки —
	   только для мобильного (см. правки этой сессии); на десктопе всё
	   осталось как было изначально. */
	.xn-hero__caption { margin: 32px 0 14px; padding-left: 16px; }
	.xn-hero__caption svg { width: 30px; height: 30px; }
	.xn-hero__caption span { text-align: left; }
	.xn-hero__caption-break { display: block; }
}

/* ===================== Виджет чата ===================== */
.xn-chat-panel {
	/* Класс дублирует .xw-chat-panel только для JS — но у .xw-chat-panel в
	   base.css есть свои max-width:560px и margin:auto (центрирование под
	   старый дизайн), которые иначе просочатся сюда и сожмут/сдвинут панель
	   внутри колонки. Сбрасываем явно. */
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	position: relative;
	z-index: 2;
	width: 100%;
	/* Было height:auto + min-height — это только "пол", не потолок: когда
	   человек реально переписывается с ассистентом, новые сообщения
	   продолжали растягивать блок вниз без предела. Нужна настоящая
	   фиксированная высота (не тронет .is-floating ниже — там свои
	   height/max-height, эта база их не перебивает по специфичности). */
	/* 640px было подобрано с запасом под мобильный сценарий с кнопками-
	   подсказками в один столбец — на десктопе давало слишком много
	   пустого места внизу докнутой панели, снизили до 460px — но это
	   тоже было мало (диалог не помещался, см. коммит 664389f) — 540px,
	   реально проверенное как достаточное значение. */
	height: 480px;
	/* Раньше был var(--glass-dark-bg) (rgba(255,255,255,0.07) + backdrop-filter) —
	   в hero это «стекло» просвечивает тёмный фон секции и выглядит тёмным,
	   но эта же панель через JS переезжает в блок «Остались вопросы», где фон
	   секции светлый — то же стекло там просвечивает светлое и выглядит
	   белёсым. Сплошной var(--dark-surface) даёт одинаковый тёмный цвет вне
	   зависимости от фона под панелью (в макете у контактной версии тоже
	   сплошной #1A1A1A, не стекло). */
	background: var(--dark-surface);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-lg);
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 1;
}
.xn-chat-panel__head { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.09); flex: none; }
.xn-chat-panel__avatar { width: 42px; height: 42px; flex: none; border-radius: 14px; overflow: hidden; background: var(--dark-text); display: flex; align-items: center; justify-content: center; }
.xn-chat-panel__avatar .xn-chat-panel__avatar-icon {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-weight: 800;
	/* 18px тонула в 42px плашке и читалась как крестик закрытия — крупнее
	   и с отрицательным трекингом (как гигантская "X" в фоне hero) буква
	   выглядит самостоятельным логотипом, а не иконкой. */
	font-size: 26px;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--dark-bg);
}
.xn-chat-panel__id { flex: 1; min-width: 0; }
.xn-chat-panel__name { margin: 0; font-weight: 700; font-size: 16px; color: var(--dark-text); }
.xn-chat-panel__status { margin: 0.15rem 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--dark-text-3); }
.xn-chat-panel__status-dot { color: var(--online); animation: xn-pulse 3.2s ease-in-out infinite; display: inline-block; }
@keyframes xn-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.75; transform: scale(0.94); } }
.xn-chat-panel__close { flex: none; width: 28px; height: 28px; border: none; background: rgba(255, 255, 255, 0.08); border-radius: 50%; color: var(--dark-text-3); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.xn-chat-panel__close:hover { background: rgba(255, 255, 255, 0.14); color: var(--dark-text); }

/* min-height был 480px (задел под то, чтобы тело сразу занимало итоговую
   высоту диалога у стыкованной панели, см. историю правок выше). В
   плавающей мобильной шторке высота панели теперь ограничена 100dvh (тем
   более с клавиатурой) — если доступно меньше 480px, min-height не давал
   телу сжаться, панель вылезала за max-height и обрезалась через
   overflow:hidden. У панели теперь и так своя фиксированная/предельная
   высота, flex:1 сам корректно посчитает тело без явного min-height. */
/* overflow-anchor:none — браузер иначе может сам подтягивать scrollTop
   при вставке новых сообщений/кнопок (scroll anchoring), споря с
   программной прокруткой к низу списка в interactive.js. */
.xn-chat-panel__body { position: relative; z-index: 1; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; overflow-y: auto; overflow-anchor: none; min-height: 0; }

.xw-msg { align-self: flex-start; max-width: 90%; border-radius: 18px 18px 18px 6px; padding: 14px 18px; font-size: 16px; line-height: 1.5; white-space: pre-line; font-family: var(--font-body); }
.xw-msg--bot { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--dark-text); }
.xw-msg--user { align-self: flex-end; background: var(--dark-text); color: var(--dark-bg); }
.xw-msg--typing { display: flex; gap: 5px; align-items: center; padding: 16px 18px; }
.xw-msg--typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--dark-text-2); animation: xn-typing 1s ease-in-out infinite; }
.xw-msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.xw-msg--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes xn-typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.xw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s; }
.xw-chips.is-visible { opacity: 1; transform: translateY(0); }
.xw-chip {
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: transparent;
	color: var(--dark-text-2);
	padding: 9px 15px;
	border-radius: var(--radius-pill);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--font-body);
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
	/* <button> как flex-элемент по умолчанию не сжимается меньше своего
	   текста в одну строку (min-width:auto) — длинный чип ("Покажи пример
	   диалога с клиентом") не помещался в ряд и раздвигал границы панели
	   вместо переноса текста внутри себя. */
	min-width: 0;
	max-width: 100%;
	white-space: normal;
	text-align: left;
}
.xw-chip:hover { background: var(--dark-text); color: var(--dark-bg); border-color: var(--dark-text); }
.xw-chip:active { background: #C9C9C5; border-color: #C9C9C5; color: var(--dark-bg); }

.xn-chat-panel__input { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-top: 1px solid rgba(255, 255, 255, 0.09); flex: none; }
.xn-chat-panel__field { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: 16px; color: var(--dark-text); }
.xn-chat-panel__field::placeholder { color: var(--dark-placeholder); }
.xn-chat-panel__send { flex: none; width: 42px; height: 42px; border-radius: 14px; border: none; background: var(--dark-text); color: var(--dark-bg); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.15s; }
.xn-chat-panel__send:hover { background: var(--dark-text-2); }

/* ---- Состояния из interactive.js (докинг/сворачивание/плавающая панель) ---- */
/* min-height был 0 — когда панель сворачивается в кнопку или открывается
   шторкой (position:fixed, выходит из потока), причал схлопывался до 0px
   вместе с ней, и высота ВСЕЙ страницы менялась при каждом переходе — это
   и вызывало ощущение "перемотки" при скролле. Причал держит место
   всегда, вне зависимости от текущего состояния панели — значение
   совпадает с фиксированной высотой самой панели (.xn-chat-panel). */
.xw-chat-dock { position: relative; min-height: 480px; }
@media (max-width: 640px) {
	/* На мобильном кнопки-подсказки идут в один столбец на всю ширину
	   (не по 2 в ряд, как на десктопе) — суммарно занимают больше высоты.
	   460px (десктопное значение) там обрезает контент; здесь — снова
	   640px, как было временно на обоих размерах, но теперь только тут.
	   Причал держит место в паре с фактической высотой панели. */
	.xn-chat-panel { height: 670px; }
	.xw-chat-dock { min-height: 670px; }
	/* Шапка панели (аватар + "ИИ-ассистент" + статус) была высоковата на
	   мобильном — уменьшены внутренние отступы, чтобы больше места
	   доставалось переписке. */
	.xn-chat-panel__head { padding: 14px 18px; gap: 12px; }
	/* Крестик закрытия и кнопка отправки были мелковаты для тапа на
	   мобильном (28px и 42px) — увеличены. */
	.xn-chat-panel__close { width: 48px; height: 48px; font-size: 2rem; }
	.xn-chat-panel__send { width: 56px; height: 56px; }
	.xn-chat-panel__send svg { width: 24px; height: 24px; }
}
.xn-chat-panel.is-floating {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: min(360px, calc(100vw - 48px));
	height: auto;
	max-height: min(500px, calc(100vh - 120px));
	min-height: 0;
	z-index: 200;
}
/* is-collapsed стремится выглядеть КАК плавающая кнопка (.xw-chat-bubble) —
   тот же radius:50%, тот же тёмный фон, та же буква X по центру — чтобы
   переход "окно → кнопка" читался как один предмет, а не смена одного
   элемента на другой. Раньше тут был radius:14px (скруглённый квадрат) и
   весь .xn-chat-panel__head (включая светлую аватарку) резко скрывался —
   выглядело как "окно исчезает, потом ниоткуда возникает кружок". */
.xn-chat-panel.is-collapsed { width: 56px; height: 56px; min-height: 0; border-radius: 50%; }
.xn-chat-panel.is-collapsed .xn-chat-panel__body,
.xn-chat-panel.is-collapsed .xn-chat-panel__input { display: none; }
.xn-chat-panel.is-collapsed .xn-chat-panel__head { padding: 0; border-bottom: none; height: 100%; justify-content: center; }
.xn-chat-panel.is-collapsed .xn-chat-panel__id,
.xn-chat-panel.is-collapsed .xn-chat-panel__close { display: none; }
.xn-chat-panel.is-collapsed .xn-chat-panel__avatar { width: 100%; height: 100%; border-radius: 50%; background: transparent; }
.xn-chat-panel.is-collapsed .xn-chat-panel__avatar .xn-chat-panel__avatar-icon { color: var(--dark-text); font-size: 30px; }

.xw-chat-bubble {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	/* Плавающая кнопка появляется поверх обычных (светлых) блоков сайта,
	   пока крутишь страницу — светлый var(--dark-text) на светлом фоне
	   секции почти не виден. Сплошной тёмный var(--dark-surface) даёт
	   контраст на любом фоне под кнопкой. */
	background: var(--dark-surface);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 16px 34px -10px rgba(16, 16, 16, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1);
	cursor: pointer;
	z-index: 190;
	opacity: 0;
	transform: scale(0.6);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.xw-chat-bubble.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.xw-chat-bubble:hover { transform: scale(1.08); }
.xw-chat-bubble__icon { font-family: var(--font-body); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: var(--dark-text); line-height: 1; }

.xw-chat-backdrop { display: none; position: fixed; inset: 0; z-index: 195; background: rgba(11, 11, 12, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.xw-chat-backdrop.is-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 1024px) {
	.xn-chat-panel.is-floating {
		left: 0; right: 0; bottom: 0; top: auto;
		width: 100%;
		max-width: none;
		border-radius: 20px 20px 0 0;
		/* max-height наследовался с десктопа как calc(100vh - 120px) —
		   на мобильном 100vh обычно считается от "полного" экрана без
		   учёта открытой клавиатуры, а не от текущей видимой области.
		   Панель, прижатая к bottom:0 такой высоты, вылезала верхним
		   краем (шапкой) выше видимой части экрана — на глаз выглядело
		   как "обрезано сверху". 100dvh отслеживает реальную видимую
		   высоту (с учётом клавиатуры) в браузерах, которые её понимают.
		   Запас снизу увеличен — панель подсказок Chrome ("Пароли/Карты/
		   Данные") встаёт НАД клавиатурой отдельным слоем браузера, и
		   100dvh не всегда полностью её учитывает, из-за чего инпут мог
		   упираться прямо в эту полосу. */
		max-height: calc(100dvh - 64px);
	}
	.xn-chat-panel.is-floating.is-collapsed {
		left: auto;
		right: 24px;
		bottom: 24px;
		width: 56px;
		height: 56px;
		/* Было 14px (скруглённый квадрат) — тот же баг с анимацией
		   сворачивания, что чинили на десктопе: этот селектор из трёх
		   классов специфичнее универсального .xn-chat-panel.is-collapsed
		   (radius:50%) и перебивал его именно на мобильном/планшете. */
		border-radius: 50%;
	}
	.xw-chat-backdrop { display: block; }
}
@media (max-width: 640px) {
	.xn-chat-panel.is-floating.is-collapsed,
	.xw-chat-bubble { right: 16px; bottom: 16px; }
}

/* ===================== Общие примитивы секций (светлая тема) ===================== */
/* В макете нет чередования "белая секция / серая секция" — у всех
   светлых секций один и тот же фон #EFEFED (--light-bg), а разница
   между ними — только в положении декоративного радиального блика
   (.xn-section__glow, свой у каждой секции). .xn-section--surface
   раньше был отдельным белым цветом — это была отсебятина, сводим
   к тому же --light-bg. */
.xn-section { position: relative; overflow: hidden; padding: var(--pad-y) 0; }
.xn-section:has(#xw-estimate-sticky) { overflow: visible; }
.xn-section--light, .xn-section--surface { background: var(--light-bg); color: var(--text); }

/* Читаемый текстовый блок для generic-страниц/записей (patterns/page-content.php)
   — узкая колонка, свои h1/h2/p/ul/a, независимо от .xw-legal/body:has()
   из base.css (см. комментарий в page-content.php). */
.xw-page-prose { max-width: 42rem; margin: 0 auto; }
.xw-page-prose h2 { font-size: 1.125rem; font-weight: 700; margin: 2rem 0 0.75rem; color: var(--text); }
.xw-page-prose p, .xw-page-prose li { font-size: 0.9375rem; line-height: 1.7; color: var(--text-2); margin: 0 0 1rem; }
.xw-page-prose ul { padding-left: 1.25rem; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.xw-page-prose a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.xw-page-prose a:hover { color: var(--text-2); }
.xn-section--dark { background: var(--dark-bg); color: var(--dark-text); }
.xn-section__glow { position: absolute; inset: 0; pointer-events: none; }

.xn-eyebrow-mono { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label); margin: 0 0 14px; }

/* В макете заголовок секции и пояснительный текст всегда стоят в два
   столбца (grid 1fr 1fr, align-items:end), а не друг под другом —
   раньше .xn-section-head был просто блоком, и <p class="xn-lead"> падал
   второй строкой. Только на узких экранах текст уходит вниз. */
.xn-section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 52px; }
@media (max-width: 1024px) { .xn-section-head { grid-template-columns: 1fr; gap: 32px; margin-bottom: 36px; } }
@media (max-width: 640px) { .xn-section-head { gap: 24px; margin-bottom: 28px; } }
.xn-section-head .xn-h2 { margin-bottom: 0; }
.xn-section-head .xn-lead { max-width: 520px; margin: 0 0 6px; }
/* Якорь #builder — на заголовке, а не на всей секции: у секции большой
   свой padding-top (var(--pad-y), 96px), и плавный скролл "Рассчитать
   стоимость" утыкался в пустое пространство над заголовком, а не в сам
   заголовок. Небольшой запас всё равно оставляем, чтобы не прилипал
   к самому краю экрана. */
#builder { scroll-margin-top: 24px; }
@media (min-width: 1025px) {
	/* На десктопе хедер теперь sticky (position:sticky; top:0) — обычных
	   24px запаса не хватает, заголовок уезжает под хедер. Отступ ≈ высота
	   хедера (26+41+22+1≈90px) + небольшой запас. Правило должно идти
	   ПОСЛЕ базового #builder выше по каскаду, а не в блоке .xn-header —
	   иначе то, что раньше здесь и побеждало. */
	#builder { scroll-margin-top: 110px; }
}
.xn-h2 { font-weight: 800; font-size: 52px; letter-spacing: -0.04em; line-height: 1.02; margin: 0 0 16px; color: inherit; }
@media (max-width: 1024px) { .xn-h2 { font-size: 40px; } }
@media (max-width: 640px) { .xn-h2 { font-size: 32px; } }
.xn-h2--center { text-align: center; margin-left: auto; margin-right: auto; }
/* В макете font-size у "лида" (пояснительного текста под/рядом с
   заголовком) везде одинаковый — 19px, было ошибочно 18px. */
.xn-lead { font-size: 19px; line-height: 1.55; color: var(--text-2); max-width: 620px; margin: 0; }
.xn-lead--center { margin-left: auto; margin-right: auto; text-align: center; }

.xn-row-head-side { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 520px; }
.xn-row-head-side .xn-lead { margin: 0; }

.xn-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: var(--text); white-space: nowrap; border-bottom: 1px solid rgba(16, 16, 16, 0.3); padding-bottom: 2px; transition: border-color 0.15s; }
.xn-link-arrow:hover { color: var(--text); border-bottom-color: var(--text); }

/* Карточки на светлом / тёмном + hover-lift на десктопе (по README: ≥1024px)
   Мобильный/планшетный scroll-center-lift из README здесь не реализован —
   это отдельная доработка поверх базовой вёрстки (см. заметку в чате). */
.xn-card {
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-light);
	padding: 32px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.xn-card--dark { background: var(--dark-surface); color: var(--dark-text); box-shadow: var(--shadow-dark); }
@media (min-width: 1024px) {
	.xn-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-light-lift); }
	.xn-card--dark:hover { box-shadow: var(--shadow-dark-lift); }
}

.xn-card-icon { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(16, 16, 16, 0.06); border: 1px solid rgba(255, 255, 255, 0.8); font-family: var(--font-mono); font-size: 15px; color: var(--text); flex: none; }
.xn-card--dark .xn-card-icon { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.16); color: var(--dark-text); }
/* font-size у макета — ровно 11px (сверено с исходником), там же он не
   жирный. Первая правка (10px) сдвигала не туда — реальная причина
   "крупнее, чем в макете" была в font-weight:500, которого в макете
   нет вообще (там обычный текст без начертания), а не в самом кегле. */
/* .xn-card-tag — это <p>, и .xn-card p (ниже) тоже на него claim'ит —
   у .xn-card p specificity выше (класс+тег против одного класса), так
   что оно ВСЕГДА побеждало, и все правки font-size у .xn-card-tag были
   бесполезны (реально применялось 17px из .xn-card p). Обёртка
   .xn-card-head поднимает specificity выше .xn-card p. */
.xn-card-head .xn-card-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); margin: 0; }
.xn-card--dark .xn-card-head .xn-card-tag { color: #D6D6D2; }
.xn-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.xn-card-head--spaced { margin-bottom: 76px; }
@media (max-width: 640px) { .xn-card-head--spaced { margin-bottom: 40px; } }
.xn-card h3 { font-weight: 700; font-size: 24px; letter-spacing: -0.03em; margin: 0 0 10px; color: var(--text); }
.xn-card p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-2); }
/* h1-h6 получают color:ink напрямую из глобальных стилей темы — это
   прямое совпадение по элементу, оно всегда побеждает унаследованный
   color с .xn-card--dark, сколько бы там specificity ни было. Без явного
   переопределения заголовок на тёмной карточке становится нечитаемым
   (тёмный текст на тёмном фоне). */
.xn-card--dark h3 { color: var(--dark-text); }
.xn-card--dark p { color: var(--dark-text-2); }

/* ===================== Как работает система + сравнение ===================== */
/* margin-bottom тут раньше компенсировал отсутствие отдельной секции у
   сравнения (когда оно было без заголовка внутри этой же секции) — c тех
   пор сравнение переехало в свою секцию xn-section с собственным
   padding-top 96px, и старый отступ вместе с padding-bottom этой секции
   стал давать в сумме ~264px вместо 192px, как в макете между секциями. */
.xn-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .xn-steps-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 641px) and (max-width: 1024px) { .xn-steps-grid .xn-card--dark { grid-column: 1 / -1; } }
@media (max-width: 640px) { .xn-steps-grid { grid-template-columns: 1fr; gap: 16px; } }
/* В макете у карточек этого блока h3 чуть крупнее (27px), чем у карточек
   "Почему по отдельности не работает" (26px) — общий .xn-card h3 (24px)
   был приближением сразу для обеих секций, уточняем по месту. */
.xn-steps-grid .xn-card h3 { font-size: 27px; }

.xn-funnel { background: var(--glass-light-bg); backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%); border: 1px solid var(--glass-light-border); border-radius: 30px; box-shadow: 0 44px 90px -50px rgba(16, 16, 16, 0.42); padding: 36px; }
@media (max-width: 640px) { .xn-funnel { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: none; box-shadow: none; border-radius: 0; padding: 0; } }

.xn-funnel-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid rgba(16, 16, 16, 0.09); }
.xn-funnel-head__group { display: flex; align-items: baseline; gap: 12px; }
.xn-funnel-head__num { font-weight: 800; font-size: 40px; letter-spacing: -0.04em; }
.xn-funnel-head__label { font-size: 16px; color: var(--text-2); }
.xn-funnel-head__arrow { font-family: var(--font-mono); font-size: 18px; color: var(--text-3); }
.xn-funnel-head__tail { font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); white-space: nowrap; }
@media (min-width: 641px) and (max-width: 1024px) {
	.xn-funnel-head { gap: 10px; flex-wrap: nowrap; }
	.xn-funnel-head__group { gap: 8px; }
	.xn-funnel-head__num { font-size: 28px; }
	.xn-funnel-head__label { font-size: 13px; }
	.xn-funnel-head__arrow { font-size: 14px; }
	.xn-funnel-head__tail { font-size: 11px; letter-spacing: 0.04em; }
}
@media (max-width: 640px) { .xn-funnel-head { flex-direction: column; align-items: stretch; gap: 16px; padding-bottom: 20px; border-bottom: none; } .xn-funnel-head__group { background: rgba(16, 16, 16, 0.045); border-radius: 18px; padding: 10px 16px; align-items: center; } .xn-funnel-head__arrow { display: none; } .xn-funnel-head__tail { padding-top: 2px; padding-left: 16px; } }

.xn-funnel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 28px; }
@media (max-width: 640px) { .xn-funnel-cols { grid-template-columns: 1fr; } }

.xn-funnel-col { background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(16, 16, 16, 0.1); border-radius: 22px; padding: 26px; box-shadow: 0 30px 60px -40px rgba(16, 16, 16, 0.25); }
.xn-funnel-col--dark { background: var(--dark-surface); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--dark-text); box-shadow: 0 34px 70px -40px rgba(16, 16, 16, 0.7); }

.xn-funnel-col__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.xn-funnel-col__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; }
.xn-funnel-col--dark .xn-funnel-col__tag { color: var(--dark-text-2); }
.xn-funnel-col__title { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--text-2); margin: 0; }
.xn-funnel-col--dark .xn-funnel-col__title { color: var(--dark-text); }
.xn-funnel-col__stat { text-align: right; }
.xn-funnel-col__num { display: block; font-weight: 800; font-size: 40px; letter-spacing: -0.04em; line-height: 1; color: var(--text-3); }
.xn-funnel-col--dark .xn-funnel-col__num { color: var(--dark-text); }
.xn-funnel-col__note { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.xn-funnel-col--dark .xn-funnel-col__note { color: var(--dark-text-2); }
@media (max-width: 640px) { .xn-funnel-col__head { gap: 8px; } .xn-funnel-col__title { font-size: 17px; white-space: nowrap; } .xn-funnel-col__note { white-space: nowrap; } }

.xn-dot-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 7px; margin-bottom: 18px; }
.xn-dot { aspect-ratio: 1; border-radius: 7px; background: transparent; border: 1px solid rgba(16, 16, 16, 0.18); }
.xn-dot--lost { background: #6B6B67; border-color: #6B6B67; }
.xn-funnel-col--dark .xn-dot { border-color: rgba(255, 255, 255, 0.28); }
.xn-dot--won { background: var(--dark-text); border-color: var(--dark-text); }

.xn-funnel-col__foot { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: var(--text-2); }
.xn-funnel-col--dark .xn-funnel-col__foot { color: var(--dark-text-2); }

.xn-funnel-disclaimer { margin: 24px 0 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--text-3); }

.xn-funnel-banner { margin-top: 20px; background: var(--glass-light-bg); backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%); border: 1px solid var(--glass-light-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-light); padding: 30px 36px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.xn-funnel-banner__stat { display: flex; align-items: baseline; gap: 16px; font-size: 20px; color: var(--text-2); }
.xn-funnel-banner__stat strong { font-weight: 800; font-size: 52px; letter-spacing: -0.05em; color: var(--text); }
@media (max-width: 640px) { .xn-funnel-banner { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; border-radius: 0; padding: 0; gap: 20px; } .xn-funnel-banner__stat { align-items: baseline; gap: 10px; font-size: 18px; } .xn-funnel-banner__stat strong { font-size: 30px; } .xn-funnel-banner .xn-btn { width: 100%; justify-content: center; } }

/* ===================== Почему по отдельности не работает ===================== */
.xn-flow-row { background: var(--glass-light-bg); backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%); border: 1px solid var(--glass-light-border); box-shadow: var(--shadow-light); border-radius: var(--radius-lg); padding: 28px 32px; margin-bottom: 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.xn-flow-chip { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; padding: 13px 22px; border-radius: var(--radius-pill); border: 1px solid rgba(16, 16, 16, 0.14); background: rgba(255, 255, 255, 0.6); color: var(--text); }
.xn-flow-chip--active { background: var(--dark-surface); color: var(--dark-text); border-color: var(--dark-surface); font-weight: 700; }
.xn-flow-line { flex: 1; min-width: 24px; height: 1px; background: rgba(16, 16, 16, 0.18); }
@media (max-width: 640px) { .xn-flow-row { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 32px; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: none; box-shadow: none; border-radius: 0; } .xn-flow-chip { justify-content: center; } .xn-flow-line { display: flex; align-items: center; justify-content: center; background: none; width: 100%; height: 20px; min-width: 0; margin: 0; } .xn-flow-line::after { content: ""; width: 9px; height: 9px; border-right: 2px solid rgba(16, 16, 16, 0.32); border-bottom: 2px solid rgba(16, 16, 16, 0.32); transform: rotate(45deg); margin-top: -4px; } }

.xn-mistakes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 20px; }
@media (max-width: 1024px) { .xn-mistakes-grid { grid-template-columns: 1fr; } }
.xn-mistakes-grid .xn-card h3 { font-size: 26px; margin-top: 8px; margin-bottom: 0; }
@media (max-width: 640px) { .xn-mistake-head { margin-bottom: 20px; } .xn-mistakes-grid .xn-card h3 { margin-top: 0; margin-bottom: 8px; } }

.xn-mistake-head { display: flex; align-items: center; justify-content: space-between; }
.xn-mistake-badge { width: 42px; height: 42px; flex: none; border-radius: 14px; background: rgba(16, 16, 16, 0.05); border: 1px dashed rgba(16, 16, 16, 0.22); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 15px; }
.xn-mistake-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #42423F; }
.xn-mistake-label--accent { color: var(--error); }
.xn-mistake-warn { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed rgba(16, 16, 16, 0.16); font-size: 16px; font-weight: 600; color: var(--text); }
.xn-mistake-warn__x { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid var(--text); display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; }

.xn-summary-panel { background: var(--dark-surface); color: var(--dark-text); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-dark); }
@media (max-width: 640px) { .xn-summary-panel { padding: 28px 24px; } }
.xn-summary-panel p { margin: 0 0 26px; font-weight: 800; font-size: 30px; }
.xn-summary-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .xn-summary-list { grid-template-columns: 1fr; gap: 14px; } }
.xn-summary-list li { display: flex; align-items: flex-start; gap: 14px; padding-top: 18px; font-size: 17px; line-height: 1.5; color: var(--dark-text); }
.xn-summary-list__check { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--dark-text); color: var(--dark-surface-2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }

/* ===================== Всё, что мы создаём, остаётся вашим ===================== */
.xn-ownership-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .xn-ownership-grid { grid-template-columns: 1fr; gap: 32px; } }
.xn-ownership-card { background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-light); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; }
@media (min-width: 1024px) { .xn-ownership-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-light-lift); } }
/* Медиа-плейсхолдер в макете пустой (только радиальный градиент,
   без play-кнопки и подписи) — они были моей отсебятиной, убрала. */
.xn-ownership-media { position: relative; aspect-ratio: 16/10; border-radius: 26px 26px 0 0; overflow: hidden; background: var(--dark-surface-2); }
.xn-ownership-media::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 260px at 50% 40%, #2A2A2E 0%, rgba(42, 42, 46, 0) 70%); }
.xn-ownership-media img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.xn-lightbox-trigger { cursor: zoom-in; }
.xn-ownership-body { padding: 26px 28px; }
/* В макете перед заголовком нет иконки — просто текст. */
.xn-ownership-body h3 { font-weight: 700; font-size: 18px; letter-spacing: -0.03em; margin: 0 0 16px; }
.xn-ownership-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.xn-ownership-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--text-2); border-top: 1px solid rgba(16, 16, 16, 0.1); padding-top: 12px; }
.xn-ownership-check { flex: none; color: var(--text); }

/* ===================== Калькулятор ===================== */
.xn-calc { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: stretch; }
@media (max-width: 1024px) { .xn-calc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1024px) { .xn-calc:has(.xw-estimate-toggle:checked) { padding-bottom: 320px; } }

.xn-calc-label { font-weight: 700; font-size: 22px; margin: 0 0 6px; }
.xn-calc-label--spaced { margin-top: 28px; }
.xn-calc-hint { font-size: 15px; color: var(--label); margin: 0 0 14px; line-height: 1.5; }
.xn-calc-hint--spaced { margin-top: -6px; margin-bottom: 20px; }
.xn-calc-hint strong { color: var(--text-2); font-weight: 600; }

/* .xw-builder/.xw-segment сохранены только ради JS (initBuilder() ищет
   их напрямую) — все визуальные свойства, которые могли просочиться из
   base.css (grid, border, padding и т.п.), переопределяем явно, ничего
   не оставляем на "унаследуется". */
/* В макете весь левый блок калькулятора — стеклянная карточка (та же
   поверхность, что и в UI Kit -> "Стекло на светлом"); у меня её не
   было вообще, .xw-builder лежал прямо на фоне секции. */
.xw-builder { display: block; grid-template-columns: none; gap: 0; align-items: initial; background: var(--glass-light-bg); backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%); border: 1px solid var(--glass-light-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-light); padding: 34px; }
@media (max-width: 640px) { .xw-builder { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: none; box-shadow: none; border-radius: 0; padding: 0; } }
.xn-calc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
@media (max-width: 640px) { .xn-calc-grid { grid-template-columns: minmax(0, 1fr); } }
.xn-calc-grid--tariffs { margin-top: 14px; }

.xw-segment {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: left;
	border: 1px solid rgba(16, 16, 16, 0.12);
	border-radius: var(--radius-md);
	padding: 16px 18px;
	cursor: pointer;
	/* В макете невыбранная карточка полупрозрачная (сквозь неё немного
	   виден блик секции за стеклянной .xw-builder-обёрткой), а не
	   сплошная белая. */
	background: rgba(255, 255, 255, 0.6);
	transition: border-color 0.15s, background-color 0.15s;
}
.xw-segment input { position: absolute; opacity: 0; pointer-events: none; }
/* В макете выбранная карточка заливается тёмным целиком (не просто
   обводка) — весь текст внутри при этом переключается на светлый,
   иначе он потеряется на тёмном фоне. */
.xw-segment:has(input:checked) { border-color: var(--dark-surface); background: var(--dark-surface); box-shadow: none; }
.xw-segment:has(input:checked) .xn-segment-name,
.xw-segment:has(input:checked) .xn-segment-price,
.xw-segment:has(input:checked) .xn-segment-audience,
.xw-segment:has(input:checked) .xn-segment-budget { color: var(--dark-text); }
.xn-segment-name { font-weight: 700; font-size: 17px; }
.xn-segment-price { font-family: var(--font-mono); font-size: 13px; color: var(--label); }
.xn-segment-audience { font-size: 13px; color: var(--label); line-height: 1.4; }
.xn-segment-budget { font-size: 13px; font-weight: 600; margin-top: 2px; }
@media (max-width: 640px) { #xw-site-types .xw-segment { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; } #xw-site-types .xw-segment::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(16, 16, 16, 0.28); flex: none; } #xw-site-types .xw-segment:has(input:checked)::before { content: "✓"; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--dark-surface); border-color: #fff; font-size: 11px; font-weight: 700; } #xw-site-types .xn-segment-price { margin-left: auto; } }
@media (max-width: 640px) { #xw-tariffs .xw-segment { padding: 16px 18px 16px 46px; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } #xw-tariffs .xw-segment::before { content: ""; position: absolute; left: 18px; top: 16px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(16, 16, 16, 0.28); } #xw-tariffs .xw-segment:has(input:checked)::before { content: "✓"; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--dark-surface); border-color: #fff; font-size: 11px; font-weight: 700; } #xw-tariffs .xn-segment-audience { display: none; } #xw-tariffs .xn-segment-price { margin-left: auto; } #xw-tariffs .xn-segment-budget { flex-basis: 100%; margin-top: 4px; } }

.xn-period-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* Фраза раньше была во всю ширину строки, из-за чего плашкам месяцев
   не хватало места и они падали на отдельную строку ниже. Сужаем
   фразу (переносится на 2 строки) — плашки остаются справа на той же
   строке, пока не станет совсем тесно (тогда сработает flex-wrap выше). */
.xn-period-row .xn-calc-hint { max-width: 180px; flex: none; }
@media (max-width: 640px) { .xn-period-row .xn-calc-hint { max-width: none; font-size: 13px; white-space: nowrap; } }
.xn-period-row--spaced { margin-top: 28px; }
.xn-period-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.xn-period-pills label { position: relative; cursor: pointer; }
.xn-period-pills input { position: absolute; opacity: 0; pointer-events: none; }
.xn-period-pills span { display: inline-flex; padding: 10px 16px; border-radius: var(--radius-pill); border: 1px solid rgba(16, 16, 16, 0.14); background: rgba(255, 255, 255, 0.6); font-size: 14px; font-weight: 600; color: var(--text-2); transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.xn-period-pills input:checked + span { background: var(--dark-surface); color: var(--dark-text); border-color: var(--dark-surface); }
@media (max-width: 640px) {
	/* Было flex-wrap: 4 плашки переносились неровно (1+3) — "1 мес"
	   одна в строке, остальные три налезали друг на друга. Сетка 2x2
	   даёт ровный, предсказуемый перенос без сжатия текста/паддингов
	   (сравнивали с вариантом "всё в одну строку со скроллом" — ширины
	   не хватает, пришлось бы делать плашки неудобно мелкими). */
	.xn-period-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; flex: 1 1 100%; }
	.xn-period-pills label { display: block; }
	.xn-period-pills span { width: 100%; box-sizing: border-box; justify-content: center; }
}

/* Раньше была position:sticky, чтобы карточка "плыла" рядом с более
   длинной левой колонкой. Теперь высота колонок выровнена
   (align-items:stretch у .xn-calc), sticky больше нечему давать —
   высота одинаковая, скроллиться относительно соседа нечем. Вместо
   этого растягиваем контент по высоте флексом, кнопка прижимается
   к низу (margin-top:auto) — карточка выглядит "полной", а не
   обрезанной по контенту. */
.xn-estimate { background: var(--dark-surface); color: var(--dark-text); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-dark); display: flex; flex-direction: column; justify-content: center; }
.xn-estimate-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dark-text-3); margin: 0 0 10px; }
.xn-estimate-label--spaced { margin-top: 22px; }
.xn-estimate-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 16px; line-height: 1.45; }
.xn-estimate-row span:first-child { color: var(--dark-text-2); max-width: 65%; }
.xn-estimate-row span:last-child { font-weight: 700; white-space: nowrap; }
.xn-estimate-note { font-size: 15px; color: var(--dark-text-3); margin: 8px 0 0; }
.xn-estimate-total { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.xn-estimate-total-value { font-weight: 800; font-size: 34px; letter-spacing: -0.04em; line-height: 1.15; margin-top: 4px; }
.xn-estimate .xn-btn { margin-top: 24px; width: 100%; justify-content: center; }

.xw-estimate-toggle { position: absolute; opacity: 0; pointer-events: none; }
.xn-estimate-sticky, .xn-estimate-sticky__contact { display: none; }
@media (max-width: 1024px) {
	.xn-estimate-sticky {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		position: sticky;
		bottom: 92px;
		margin-top: 20px;
		z-index: 20;
		opacity: 0;
		pointer-events: none;
		transform: translateY(6px);
		transition: opacity 0.25s ease, transform 0.25s ease;
	}
	.xn-estimate-sticky.is-visible { opacity: 1; pointer-events: auto; transform: none; }
	.xn-estimate-sticky__card { background: rgba(26, 26, 26, 0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--dark-text); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-lg); box-shadow: var(--shadow-dark-lift); overflow: hidden; }
	.xn-estimate-sticky__detail-rows { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
	.xn-calc:has(.xw-estimate-toggle:checked) .xn-estimate-sticky__detail-rows { grid-template-rows: 1fr; }
	.xn-estimate-sticky__detail-inner { min-height: 0; overflow: hidden; }
	.xn-estimate-sticky__detail-pad { padding: 22px 24px 20px; }
	.xn-estimate-sticky__bar { display: flex; align-items: center; padding: 14px 24px; }
	.xn-estimate-sticky__trigger { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
	.xn-estimate-sticky__value { font-weight: 700; font-size: 16px; margin-left: auto; }
	.xn-estimate-sticky__chevron { flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease, background-color 0.15s ease; }
	.xn-calc:has(.xw-estimate-toggle:checked) .xn-estimate-sticky__chevron { transform: rotate(180deg); }
	.xn-estimate { display: none; }
	.xn-estimate-sticky__contact { display: flex; margin-top: 12px; width: 100%; justify-content: center; box-sizing: border-box; }
}

/* ===================== Кейсы ===================== */
.xn-cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .xn-cases-grid { grid-template-columns: 1fr; gap: 32px; } }
.xn-case { background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-light); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; display: flex; flex-direction: column; height: 100%; }
@media (min-width: 1024px) { .xn-case:hover { transform: translateY(-6px); box-shadow: var(--shadow-light-lift); } }
.xn-case-thumb { aspect-ratio: 16/10; background: repeating-linear-gradient(135deg, rgba(16, 16, 16, 0.04), rgba(16, 16, 16, 0.04) 10px, rgba(16, 16, 16, 0.07) 10px, rgba(16, 16, 16, 0.07) 20px); display: flex; align-items: center; justify-content: center; }
.xn-case-thumb span { font-family: var(--font-mono); font-size: 12px; color: var(--label); }
.xn-case-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.xn-case-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.xn-case-body > .xn-link-arrow { align-self: flex-start; margin-top: auto; padding-top: 16px; }
.xn-case-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #42423F; margin: 0 0 14px; }
.xn-case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.xn-case-tags span { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); background: transparent; border: 1px solid rgba(16, 16, 16, 0.14); border-radius: var(--radius-pill); padding: 8px 14px; }
.xn-case-metric { font-weight: 800; font-size: 52px; letter-spacing: -0.05em; line-height: 1; margin-bottom: 12px; }
@media (max-width: 1024px) { .xn-case-metric { font-size: 40px; } }
@media (max-width: 640px) { .xn-case-metric { font-size: 32px; } }
.xn-case-headline { font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 12px; color: var(--text); }
.xn-case-metric span { display: block; font-weight: 500; font-size: 13px; color: var(--label); letter-spacing: 0; margin-top: 6px; }
.xn-case-desc { font-size: 17px; color: var(--text-2); margin: 0 0 16px; line-height: 1.5; }

/* ===================== Как мы будем работать ===================== */
/* В макете это 2-колоночная сетка (как .xn-section-head): заголовок
   один в левой колонке, а лид и бейдж — вместе в правой (было:
   заголовок+лид сгруппированы вместе, бейдж отдельно "прибит" в угол). */
/* grid с 1fr у второй колонки просто занимает всё оставшееся место
   без видимого зазора — в макете это flex с justify-content:
   space-between, где свободное место само становится широким
   отступом между заголовком и группой лид+бейдж. Возвращаю технику
   из макета: обе стороны — по своей естественной ширине, а весь
   излишек уходит в промежуток между ними. */
.xn-process-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
.xn-process-head .xn-h2 { margin-bottom: 0; }
/* flex-wrap:wrap тут раньше и ронял лид с бейджем на разные строки
   при первой нехватке места — убрано специально: бейдж не должен
   сжиматься (flex:none), а лид пусть переносится ВНУТРИ себя
   (несколько строк текста), но остаётся в одном ряду с бейджем. */
.xn-process-head__side { display: flex; align-items: center; gap: 24px; }
.xn-process-head__side .xn-lead { min-width: 0; max-width: 300px; }
/* Бейдж был без фона вообще (просто текст в углу) — в макете это
   тёмная плашка. */
.xn-process-badge { background: var(--dark-surface); border-radius: 20px; padding: 16px 22px; display: flex; flex-direction: column; gap: 4px; flex: none; }
.xn-process-badge__value { font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: var(--dark-text); }
.xn-process-badge__note { font-family: var(--font-mono); font-size: 11px; color: var(--dark-text-3); }
@media (max-width: 640px) {
	/* На узком экране лид (max-width:300px) + бейдж в одну строку не
	   влезают — переносим весь блок в колонку: заголовок, затем лид+бейдж
	   друг под другом на всю ширину. */
	.xn-process-head { flex-direction: column; align-items: flex-start; gap: 20px; }
	.xn-process-head__side { flex-direction: column; align-items: flex-start; gap: 20px; }
	.xn-process-head__side .xn-lead { max-width: none; }
	/* Бейдж "от 7 дней / на запуск системы" был в 2 строки узким столбиком —
	   на мобильном (после того как сам блок стал на всю ширину) переводим
	   в один ряд: крупный текст слева, подпись справа по краям бейджа. */
	.xn-process-badge { flex-direction: row; align-items: baseline; justify-content: space-between; width: 100%; }
}

.xn-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) { .xn-rail { grid-template-columns: 1fr 1fr; row-gap: 40px; } }
@media (max-width: 640px) { .xn-rail { grid-template-columns: 1fr; row-gap: 32px; } }
.xn-rail__line { position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: rgba(16, 16, 16, 0.12); }
@media (max-width: 1024px) { .xn-rail__line { display: none; } }

.xn-rail__item { position: relative; }
/* В макете все 4 точки одинаковые — закрашенные, со светлым "кольцом"
   (border) для отделения от линии; последняя точка не должна быть
   полой, это была ошибка. */
.xn-rail__dot { position: absolute; top: -3px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--text); border: 3px solid var(--light-bg); }
@media (max-width: 1024px) { .xn-rail__dot { display: none; } }
/* padding был асимметричный (26px 24px) — в макете ровные 28px. Флекс +
   gap:14px вместо margin на отдельных детях — точнее повторяет ритм
   макета (padding:28px; display:flex; flex-direction:column; gap:14px). */
.xn-rail__card { background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-light); padding: 28px; display: flex; flex-direction: column; gap: 14px; margin-top: 26px; height: 100%; transition: transform 0.25s ease, box-shadow 0.25s ease; }
@media (max-width: 1024px) { .xn-rail__card { margin-top: 0; } }
@media (min-width: 1024px) { .xn-rail__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-light-lift); } }
.xn-rail__item:last-child .xn-rail__card { background: var(--dark-surface); color: var(--dark-text); box-shadow: var(--shadow-dark); }
@media (min-width: 1024px) { .xn-rail__item:last-child .xn-rail__card:hover { box-shadow: var(--shadow-dark-lift); } }
/* .xn-rail__tag — это <p>, и более специфичное .xn-rail__card p (16px)
   побеждало его собственный font-size:11px (тот же баг, что был у
   card-tag/Трафик-Сайт-Ассистент). Оборачиваю в .xn-rail__card, чтобы
   specificity была выше. margin убран — теперь карточка flex+gap:14px,
   свой margin только дублировал бы отступ. */
.xn-rail__card .xn-rail__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #42423F; margin: 0; }
.xn-rail__item:last-child .xn-rail__tag { color: var(--dark-text-3); }
.xn-rail__card h3 { font-weight: 700; font-size: 24px; letter-spacing: -0.03em; margin: 0; color: var(--text); }
.xn-rail__card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.xn-rail__item:last-child .xn-rail__card h3 { color: var(--dark-text); }
.xn-rail__item:last-child .xn-rail__card p { color: var(--dark-text-2); }
.xn-rail__you { margin-top: auto; padding-top: 14px; border-top: 1px dashed rgba(16, 16, 16, 0.18); font-size: 15px; font-weight: 600; color: #1A1A1A; }
.xn-rail__item:last-child .xn-rail__you { border-top-color: rgba(255, 255, 255, 0.24); color: var(--dark-text); }

/* ===================== FAQ ===================== */
.xn-faq {
	max-width: 900px;
	margin: 0 auto;
	background: var(--glass-light-bg);
	backdrop-filter: blur(26px) saturate(150%);
	-webkit-backdrop-filter: blur(26px) saturate(150%);
	border: 1px solid var(--glass-light-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-light);
	padding: 8px 30px;
	display: flex;
	flex-direction: column;
	/* overflow-anchor:none — иначе браузер сам подтягивает позицию скролла,
	   когда контент внутри меняет высоту (scroll anchoring), из-за чего при
	   открытии/закрытии спойлера вопрос визуально "прыгал" вверх/вниз. */
	overflow-anchor: none;
}
.xw-faq-item {
	/* base.css тоже стилизует .xw-faq-item (старый дизайн) — border, фон и
	   border-radius оттуда иначе просочатся поверх сплошной карточки-стекла. */
	border: none;
	background: none;
	border-radius: 0;
	border-top: 1px solid rgba(16, 16, 16, 0.1);
	padding: 6px 0;
}
.xw-faq-item:first-child { border-top: none; }
.xw-faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 0;
	font-weight: 600;
	font-size: 19px;
	transition: opacity 0.2s ease;
}
.xw-faq-item summary:hover { opacity: 0.7; }
.xw-faq-item summary::-webkit-details-marker { display: none; }
.xw-faq-item summary::after {
	content: "+";
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(16, 16, 16, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 400;
	transition: transform 0.3s ease;
}
.xw-faq-item[open] summary::after { transform: rotate(45deg); }
/* Нативный <details> обычно скрывает контент через display:none в UA-стилях,
   когда закрыт — это нельзя анимировать. Снимаем это правило и вместо него
   анимируем grid-template-rows 0fr→1fr (как в макете), а видимую границу
   задаёт overflow:hidden на самом .xw-faq-a. Раскрытие/закрытие по-прежнему
   нативное — просто по атрибуту [open], JS не нужен. */
.xw-faq-item > *:not(summary) { display: block; }
.xw-faq-rows { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.xw-faq-item[open] .xw-faq-rows { grid-template-rows: 1fr; }
.xw-faq-a { min-height: 0; overflow: hidden; margin: 0; padding: 0 60px 24px 0; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.xw-faq-a a { text-decoration: underline; color: inherit; }
@media (max-width: 640px) {
	/* padding:8px 30px у панели + padding-right:60px у ответа (запас под
	   кружок +/× в макете) на узком экране съедали почти всю ширину —
	   вопрос и ответ переносились в 2-3 слова на строке. */
	.xn-faq { padding: 4px 18px; }
	.xw-faq-item summary { font-size: 17px; gap: 14px; }
	.xw-faq-a { padding: 0 0 20px; }
}

/* ===================== Остались вопросы (второй чат) ===================== */
.xn-contact-title { max-width: 720px; }
.xn-contact-wrap { display: flex; justify-content: center; }
/* 616px = ширина одной колонки hero-грида ((1328 - 2*24 - 48) / 2) —
   панель та же самая (переезжает через JS), должна быть того же размера. */
.xn-contact-wrap .xw-chat-dock { width: 100%; max-width: 616px; }

/* ===================== Команда ===================== */
.xn-team-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 56px; align-items: start; }
@media (max-width: 1024px) { .xn-team-grid { grid-template-columns: 1fr; gap: 40px; } }
.xn-team-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.xn-team-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.5; color: var(--text-2); border-top: 1px solid rgba(16, 16, 16, 0.12); padding-top: 14px; }
.xn-team-points li + li { margin-top: 14px; }
.xn-team-check { flex: none; color: var(--text); }

.xn-team-people { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .xn-team-people { grid-template-columns: 1fr; gap: 32px; } }
.xn-team-card { background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-light); padding: 28px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease; }
@media (min-width: 1024px) { .xn-team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-light-lift); } }
.xn-team-avatar-wrap { position: relative; width: 72px; height: 72px; margin-bottom: 14px; }
.xn-team-avatar { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--dark-surface); color: var(--dark-text); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.xn-team-avatar--photo { object-fit: cover; }
.xn-team-photo-badge { position: absolute; bottom: -4px; right: -4px; display: flex; align-items: center; gap: 4px; background: var(--card-bg); box-shadow: 0 4px 10px rgba(16, 16, 16, 0.2); border-radius: var(--radius-pill); padding: 4px 8px; font-family: var(--font-mono); font-size: 9px; color: var(--label); }
.xn-team-name { font-weight: 700; font-size: 21px; letter-spacing: -0.02em; margin: 0; }
.xn-team-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label); margin: 6px 0 0; }
.xn-team-list { width: 100%; list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; text-align: left; }
.xn-team-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--text-2); border-top: 1px solid rgba(16, 16, 16, 0.1); padding-top: 12px; }
.xn-team-list li + li { margin-top: 12px; }

/* ===================== Футер ===================== */
.xn-footer { padding: 56px 0 32px; }
.xn-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.xn-footer-links { display: flex; gap: 24px; }
.xn-footer-links a { font-size: 14px; color: var(--dark-text-2); }
.xn-footer-links a:hover { color: var(--dark-text); }
.xn-footer-links a.is-copied, .xn-footer-links a.is-copied:hover { color: var(--online); }
.xn-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; }
.xn-footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.xn-footer-legal a { font-size: 13px; color: var(--dark-text-3); }
.xn-footer-legal a:hover { color: var(--dark-text); }
.xn-footer-copy { margin: 0; font-size: 13px; color: var(--dark-text-3); }
@media (max-width: 640px) { .xn-footer-legal { flex-direction: column; gap: 12px; } .xn-footer-links { gap: 18px; } .xn-footer-links a { padding: 10px 16px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-pill); } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ===================== Попап обратного звонка =====================
   .xw-modal* / .xw-field / .xw-consent / .xw-btn-dark — общие классы,
   их стилизует base.css (тот же попап есть и на боевом hero.php). Эти
   правила грузятся только там, где подключён new-design.css (см.
   functions.php), так что на /login/, /cabinet/ и т.п. base.css остаётся
   как есть — здесь просто перекрываем внешний вид для новой главной,
   не трогая ни разметку, ни JS-классы, которые ищет initCallbackModal(). */
.xw-modal__backdrop { background: rgba(11, 11, 12, 0.6); }
.xw-modal__panel {
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	box-shadow: 0 50px 100px -40px rgba(16, 16, 16, 0.5);
	padding: 40px;
	/* Было 440px (совпадало со старым max-width .xw-auth-section, см.
	   комментарий у /login/ ниже) — с переключателем вкладок «Написать в
	   мессенджер» стало не помещаться в одну строку. У .xw-auth-section
	   своё отдельное значение 440px, здесь его не трогаем. */
	max-width: 520px;
	font-family: var(--font-body);
}
.xw-modal__close { width: 40px; height: 40px; top: 24px; right: 24px; background: rgba(16, 16, 16, 0.06); color: var(--text); font-size: 17px; }
.xw-modal__close:hover { background: rgba(16, 16, 16, 0.12); }
.xw-modal__title { font-weight: 800; font-size: 34px; letter-spacing: -0.02em; color: var(--text); margin: 0 0 12px; padding-right: 48px; }
.xw-modal__desc { font-size: 18px; line-height: 1.45; color: var(--text-2); margin: 0 0 10px; }
.xw-modal__hours { font-family: var(--font-mono); font-size: 13px; color: var(--label); margin: 0 0 26px; }
.xw-modal-form { gap: 16px; }
.xw-field { gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.xw-field input {
	background: rgba(16, 16, 16, 0.03);
	border: 1px solid rgba(16, 16, 16, 0.14);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
}
.xw-field input:focus { border-color: var(--text); }
.xw-field input::placeholder { color: var(--label); }
.xw-btn-dark {
	width: 100%;
	justify-content: center;
	background: var(--dark-surface);
	color: var(--dark-text);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 15px 22px;
	border-radius: var(--radius-pill);
	box-shadow: 0 22px 44px -24px rgba(16, 16, 16, 0.6);
}
.xw-btn-dark:hover:not(:disabled) { box-shadow: 0 22px 44px -24px rgba(16, 16, 16, 0.6), 0 0 0 3px rgba(16, 16, 16, 0.2); }
.xw-btn-dark:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
/* Было 24px — по просьбе уменьшено. */
.xw-consent input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--text); }
.xw-consent__text { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--text-2); }
.xw-consent__text a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.xw-consent__text a:hover { color: var(--text-2); }
.xw-modal-messenger-note a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.xw-modal-messenger-note a:hover { color: var(--text-2); }

/* ===================== [Новый дизайн] Страница кейса ===================== */
.xn-cs-hero-section { padding-top: 40px; }
.xn-cs-back { margin: 0 0 28px; }
.xn-cs-back a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 13px; color: var(--label); }
.xn-cs-back a:hover { color: var(--text); }

.xn-cs-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 1024px) { .xn-cs-hero__grid { grid-template-columns: 1fr; gap: 32px; } }

.xn-cs-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); background: rgba(16, 16, 16, 0.04); border: 1px solid rgba(16, 16, 16, 0.12); border-radius: var(--radius-pill); padding: 8px 16px; margin-bottom: 20px; }

.xn-cs-title { font-weight: 800; font-size: 44px; letter-spacing: -0.03em; line-height: 1.12; margin: 0 0 20px; color: var(--text); }
@media (max-width: 1024px) { .xn-cs-title { font-size: 36px; } }
@media (max-width: 640px) { .xn-cs-title { font-size: 30px; } }

.xn-cs-lead { font-size: 17px; line-height: 1.55; color: var(--text-2); margin: 0 0 24px; max-width: 480px; }

.xn-cs-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.xn-cs-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--dark-text); background: var(--dark-surface); border-radius: var(--radius-pill); padding: 9px 16px 9px 14px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
@media (max-width: 640px) { .xn-cs-chips { flex-direction: column; align-items: stretch; } .xn-cs-chip { justify-content: center; box-sizing: border-box; } }
@media (min-width: 1024px) { .xn-cs-chip:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(16, 16, 16, 0.55); } }

.xn-cs-browser { background: var(--card-bg); border-radius: 6px; overflow: hidden; }
/* Тёмная рамка-ноутбук вокруг превью сайта/виджета — плоская, без фото-
   мокапа (чтобы не зависеть от пиксель-в-пиксель подгонки под конкретную
   картинку): камера сверху, тонкая "подставка" снизу с ножкой по центру. */
.xn-cs-device { background: var(--dark-surface); border-radius: 10px; padding: 7px 6px 5px; box-shadow: var(--shadow-dark); margin-top: 58px; }
.xn-cs-device__cam { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); margin: 0 auto 5px; }
.xn-cs-device__base { position: relative; height: 5px; margin-top: 5px; }
.xn-cs-device__base::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 40px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
/* Рамка телефона (по аналогии с .xn-cs-device — рамкой монитора выше) —
   для скриншотов виджета/мобильных экранов. Без подставки снизу (у
   телефона её нет), вместо камеры сверху — динамик-полоска. */
.xn-cs-phone-row { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.xn-cs-phone { background: var(--dark-surface); border-radius: 32px; padding: 12px 10px; box-shadow: var(--shadow-dark); width: 300px; max-width: 100%; flex: none; }
.xn-cs-phone__notch { width: 50px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); margin: 0 auto 8px; }
.xn-cs-phone__screen { background: var(--card-bg); border-radius: 22px; overflow: hidden; }
.xn-cs-phone__screen img { display: block; width: 100%; height: auto; }
.xn-cs-browser__bar { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-bottom: 1px solid rgba(16, 16, 16, 0.08); }
.xn-cs-browser__bar span:not(.xn-cs-browser__url) { width: 6px; height: 6px; border-radius: 50%; background: rgba(16, 16, 16, 0.14); flex: none; }
.xn-cs-browser__url { margin-left: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--label); }
.xn-cs-browser__body { aspect-ratio: 16 / 8; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, rgba(16, 16, 16, 0.03) 0 10px, rgba(16, 16, 16, 0.05) 10px 20px); }
.xn-cs-browser__body span { font-family: var(--font-mono); font-size: 13px; color: var(--label); }
.xn-cs-browser__body img { display: block; width: 100%; height: 100%; object-fit: cover; }

.xn-cs-block__grid { display: grid; grid-template-columns: 7fr 3fr; gap: 56px; align-items: start; }
@media (max-width: 1024px) { .xn-cs-block__grid { grid-template-columns: 1fr; gap: 32px; } }
.xn-cs-block__grid .xn-lead { max-width: none; }
.xn-cs-block__grid .xn-cs-checklist { max-width: none; }
@media (min-width: 1025px) { .xn-cs-block__grid--reverse .xn-cs-browser { order: 2; } }

.xn-cs-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .xn-cs-cards { grid-template-columns: 1fr; } }



/* Карточки блока "Задача" переиспользуют .xn-cs-card ниже. */
.xn-cs-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .xn-cs-cards--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .xn-cs-cards--4 { grid-template-columns: 1fr; } }
.xn-cs-kit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .xn-cs-kit-grid { grid-template-columns: 1fr; } }
.xn-cs-kit-tile { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-light); cursor: zoom-in; }
.xn-cs-kit-tile img { display: block; width: 100%; height: auto; }

.xn-cs-card { background: var(--card-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-light); padding: 24px; }
.xn-cs-card__title { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--text); }
.xn-cs-card__desc { font-size: 14px; line-height: 1.5; color: var(--text-2); margin: 0; }

.xn-cs-head-center { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.xn-cs-head-center .xn-eyebrow-mono { text-align: center; }
.xn-cs-head-center .xn-h2 { margin-bottom: 0; }
.xn-cs-head-left { max-width: 50%; margin: 0 0 44px; }
@media (max-width: 640px) { .xn-cs-head-left { max-width: none; } }
.xn-cs-head-left .xn-h2 { margin-bottom: 16px; }
.xn-cs-head-left .xn-lead { max-width: none; }

.xn-cs-checklist { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 0; max-width: 520px; }
.xn-cs-checklist__item { display: flex; align-items: center; gap: 14px; background: rgba(16, 16, 16, 0.03); border: 1px solid rgba(16, 16, 16, 0.08); border-radius: 16px; padding: 16px 20px; font-size: 16px; color: var(--text); }
.xn-cs-check { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--text); color: var(--card-bg); display: flex; align-items: center; justify-content: center; }
@media (max-width: 640px) { .xn-cs-checklist__item { align-items: flex-start; } .xn-cs-check { margin-top: 2px; } }

.xn-cs-cta { position: relative; overflow: hidden; text-align: center; background: var(--dark-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-dark); padding: 64px 40px; }
@media (max-width: 640px) { .xn-cs-cta { padding: 44px 24px; } }
.xn-cs-cta__glow { position: absolute; inset: 0; background: radial-gradient(700px 400px at 50% 0%, #26262A 0%, rgba(38, 38, 42, 0) 62%); pointer-events: none; }
.xn-cs-cta__inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.xn-cs-cta__title { font-weight: 800; font-size: 36px; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 16px; color: var(--dark-text); }
@media (max-width: 640px) { .xn-cs-cta__title { font-size: 26px; } }
.xn-cs-cta__text { font-size: 17px; line-height: 1.5; color: var(--dark-text-2); margin: 0 0 28px; }


/* Прокрутка превью демо-сайта в рамке браузера (карточка кейса) — статично
   показывает верх скриншота. Нативный overflow-y:auto вместо CSS-transform
   даёт пользователю два независимых способа посмотреть остальное: (1)
   колесо мыши / тач-скролл в любой момент, (2) авто-прокрутка по hover на
   десктопе / по появлению в центре экрана на мобильном (см.
   initCaseScrollPreview в interactive.js — крутит scrollTop через rAF,
   ручной скролл её сразу отменяет, чтобы не бороться за позицию). */
.xn-cs-browser__body--scroll { align-items: flex-start; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.xn-cs-browser__body--scroll img { display: block; width: 100%; height: auto; }

/* Лайтбокс для скриншотов (кейсы) — клик по .xn-cs-browser__body--scroll
   открывает картинку целиком, скроллится обычным колесом мыши внутри
   .xn-lightbox__scroll. См. initImageLightbox() в interactive.js. */
.xn-cs-browser__body--scroll, .xn-lightbox-trigger { cursor: zoom-in; }
.xn-lightbox { position: fixed; inset: 0; z-index: 200; }
.xn-lightbox[hidden] { display: none; }
.xn-lightbox__backdrop { position: fixed; inset: 0; background: rgba(11, 11, 12, 0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.xn-lightbox__close { position: fixed; top: 20px; right: 24px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.12); color: var(--dark-text); font-size: 24px; line-height: 1; cursor: pointer; }
.xn-lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }
.xn-lightbox__scroll { position: relative; z-index: 1; width: min(900px, 92vw); max-height: 92vh; overflow-y: auto; margin: 4vh auto; border-radius: 0; box-shadow: var(--shadow-dark-lift); background: var(--card-bg); }
.xn-lightbox__img { display: block; width: 100%; height: auto; }
.xn-lightbox__scroll--fit { width: auto; max-width: 92vw; overflow: visible; background: none; box-shadow: none; display: flex; justify-content: center; }
.xn-lightbox__scroll--fit .xn-lightbox__img { width: auto; height: auto; max-width: 92vw; max-height: 88vh; border-radius: var(--radius-lg); }

/* ===================== Cookie-баннер (переопределение поверх base.css) ===================== */
/* base.css/style-b.css рисуют его сплошной полосой на всю ширину экрана со
   старым сиреневым акцентом (--wp--preset--color--accent) — не в стиле
   нового дизайна. new-design.css грузится позже base.css на этих страницах,
   так что этот блок полностью переопределяет вид, ничего в разметке/JS не
   меняя (те же #id, тот же .xw-cookie-banner[hidden] переключатель).
   Белая карточка (не тёмная и не светлое стекло) — баннер fixed и может
   оказаться и над тёмным hero, и над светлыми секциями; сплошной тёмный
   фон сливался с тёмным hero, светлое стекло выглядело грязным пятном.
   Белая карточка чётко читается на обоих фонах за счёт цветового
   контраста + тени. Кнопка "Принять все" — .xn-btn--dark (тёмная кнопка
   на светлой карточке, как у кнопки "Обсудить с человеком" в
   калькуляторе), "Отказаться" — обводка под тот же светлый контекст. */
.xw-cookie-banner {
	position: fixed;
	left: 20px;
	right: auto;
	bottom: 20px;
	z-index: 60;
	width: 380px;
	max-width: calc(100vw - 40px);
	background: var(--card-bg);
	color: var(--text);
	border: 1px solid rgba(16, 16, 16, 0.08);
	border-radius: var(--radius-lg);
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.4);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.xw-cookie-banner[hidden] { display: none; }
.xw-cookie-banner__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.xw-cookie-banner__text a { color: var(--text); text-decoration: underline; }
.xw-cookie-banner__actions { display: flex; align-items: center; gap: 10px; }
.xw-cookie-banner__btn { flex: 1; box-sizing: border-box; }
#xw-cookie-necessary { background: transparent; border: 1px solid rgba(16, 16, 16, 0.2); color: var(--text); }
#xw-cookie-necessary:hover { background: rgba(16, 16, 16, 0.05); }
@media (max-width: 640px) {
	.xw-cookie-banner { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; padding: 20px; }
	.xw-cookie-banner__actions { flex-direction: column; align-items: stretch; }
}
/* Тонкий скроллбар вместо толстого системного — у превью в рамке и у
   лайтбокса на странице кейса. */
.xn-lightbox__scroll,
.xn-cs-browser__body--scroll { scrollbar-width: thin; scrollbar-color: rgba(16, 16, 16, 0.25) transparent; }
.xn-lightbox__scroll::-webkit-scrollbar,
.xn-cs-browser__body--scroll::-webkit-scrollbar { width: 6px; }
.xn-lightbox__scroll::-webkit-scrollbar-track,
.xn-cs-browser__body--scroll::-webkit-scrollbar-track { background: transparent; }
.xn-lightbox__scroll::-webkit-scrollbar-thumb,
.xn-cs-browser__body--scroll::-webkit-scrollbar-thumb { background: rgba(16, 16, 16, 0.25); border-radius: 3px; }
.xn-lightbox__scroll::-webkit-scrollbar-thumb:hover,
.xn-cs-browser__body--scroll::-webkit-scrollbar-thumb:hover { background: rgba(16, 16, 16, 0.4); }

/* ===================== Вход / Регистрация (/login/, /register/) =====================
   Раньше — обычные страницы сайта с общей шапкой/футером (parts/header.html,
   base.css) — единственные, помимо главной, кто их использовал. Переехали на
   новый дизайн по тому же образцу, что и главная: собственная минимальная
   шапка (только логотип, см. patterns/auth-login.php/auth-register.php),
   без общего header.html/footer.html (см. templates/page-login.html/
   page-register.html). HTML/PHP самих форм не тронуты — те же классы
   .xw-auth-section/.xw-field/.xw-eyebrow/.xw-auth-submit, что стилизует и
   base.css (там — тёмный островок на светлой странице), здесь то же самое
   переопределение поверх, что и чуть выше у попапа обратного звонка:
   .xw-field/.xw-field input уже полностью готовы (использует их этот же
   попап), карточка — тот же .xw-modal__panel-паттерн (даже max-width
   совпадает: 440px и там, и в contentSize самого блока auth-login.php) —
   заново их не переопределяю, просто добавляю недостающее оформление
   .xw-auth-section и его прямых детей. */
.xn-auth-header { padding: 40px 0 0; }
.xn-auth-header .xn-wrap { display: flex; justify-content: center; }
.xw-auth-section {
	background: var(--light-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-light-lift);
	padding: 36px;
	max-width: 440px;
	margin: 32px auto 64px;
}
.xw-auth-section .xw-eyebrow {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-2);
	background: rgba(16, 16, 16, 0.04);
	border: 1px solid rgba(16, 16, 16, 0.12);
	border-radius: var(--radius-pill);
	padding: 8px 16px;
	margin: 0 0 16px;
}
.xw-auth-section .xw-section-title { font-weight: 800; font-size: 28px; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); margin: 0 0 8px; }
.xw-auth-section .xw-section-intro { font-size: 14.5px; line-height: 1.5; color: var(--text-2); margin: 0; }
.xw-auth-section .xw-form-error {
	background: rgba(224, 138, 138, 0.14);
	color: #B5433F;
	border-radius: var(--radius-md);
	padding: 10px 14px;
	margin-top: 16px;
	font-size: 13.5px;
}
.xw-auth-section .xw-auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
/* .xw-field input без явного :not — общий селектор ниже по файлу weaker
   (0,0,2,0), чем .xw-auth-section .xw-field input из base.css/style-b.css
   (0,0,3,0, тёмная тема), поэтому та тёмная версия всегда выигрывала здесь
   у светлой карточки — белый текст на почти белом фоне поля, невидимо. */
.xw-auth-section .xw-field { color: var(--text-2); }
.xw-auth-section .xw-field input {
	background: rgba(16, 16, 16, 0.03);
	border: 1px solid rgba(16, 16, 16, 0.14);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
}
.xw-auth-section .xw-field input:focus { border-color: var(--text); }
.xw-auth-section .xw-field input::placeholder { color: var(--label); }
/* .xw-btn-dark уже полностью готова (см. попап обратного звонка выше) —
   переиспользуем 1-в-1 капсулу/тени/hover, просто добавляем недостающий
   верхний отступ под контекст формы входа. */
.xw-auth-section .xw-auth-submit {
	width: 100%;
	justify-content: center;
	background: var(--dark-surface);
	color: var(--dark-text);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 15px 22px;
	border-radius: var(--radius-pill);
	box-shadow: 0 22px 44px -24px rgba(16, 16, 16, 0.6);
	margin-top: 4px;
	border: none;
	cursor: pointer;
	transition: box-shadow 0.15s ease;
}
.xw-auth-section .xw-auth-submit:hover { box-shadow: 0 22px 44px -24px rgba(16, 16, 16, 0.6), 0 0 0 3px rgba(16, 16, 16, 0.2); }
.xw-auth-section .xw-auth-links { margin-top: 20px; font-size: 13.5px; color: var(--label); text-align: center; }
.xw-auth-section .xw-auth-links a { color: var(--text-2); }
.xw-auth-section .xw-auth-links a:hover { color: var(--text); }
.xw-auth-section .xw-auth-links-sep { margin: 0 6px; color: var(--label); }