/**
 * Баннер маркетинга.
 *
 * Оформление живёт здесь, а не в полях записи: редактор выбирает один
 * из трёх вариантов, а не подбирает цвета. Значения — те же токены и
 * та же геометрия, что у соседних панелей сайта (блок контактов
 * главной, блок ИИ услуги), чтобы баннер не выглядел чужим.
 *
 * ОДНА КОЛОНКА ПО УМОЛЧАНИЮ. Вторая появляется только когда экран
 * достаточно широк И у баннера есть иллюстрация: на узком экране
 * картинка идёт под текстом, а не сжимает его до нечитаемого.
 */

.tri-banner {
	position: relative;
	overflow: hidden;
	border-radius: var(--tri-radius-24);
	margin-block: var(--tri-space-40);
}

/* Фон и затемнение — под содержимым: контейнер ниже позиционирован. */
.tri-banner__bg {
	position: absolute;
	inset: 0;
}

.tri-banner__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tri-banner__veil {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		90deg,
		rgba(4, 18, 46, 0.92) 0%,
		rgba(4, 18, 46, 0.78) 55%,
		rgba(4, 18, 46, 0.6) 100%
	);
	pointer-events: none;
}

/*
 * Содержимое обязано быть позиционировано: фон и затемнение объявлены
 * absolute и иначе перекрыли бы текст — та же ошибка, что уже была в
 * блоке «Контроль проекта».
 */
.tri-banner__inner {
	position: relative;
	display: grid;
	gap: var(--tri-space-32);
	align-items: center;
	padding-block: var(--tri-space-44);
	min-width: 0;
}

.tri-banner__body {
	min-width: 0;
}

.tri-banner__eyebrow {
	display: inline-block;
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-12);
	text-transform: uppercase;
	margin-block-end: var(--tri-space-12);
}

.tri-banner__title {
	margin: 0;
	font-size: var(--tri-fs-32);
	line-height: var(--tri-lh-1-2);
	font-weight: var(--tri-fw-700);
	letter-spacing: var(--tri-ls-n0-022);
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.tri-banner__text {
	margin: var(--tri-space-14) 0 0;
	font-size: var(--tri-fs-16);
	line-height: var(--tri-lh-1-55);
	max-width: 60ch;
}

/* Кнопки переносятся, а не выезжают за край. */
.tri-banner__actions {
	margin-block-start: var(--tri-space-24);
	flex-wrap: wrap;
}

.tri-banner__media {
	min-width: 0;
}

.tri-banner__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--tri-radius-14);
}

/* --- Варианты оформления ------------------------------------------- */

.tri-banner--dark {
	background-color: var(--tri-color-navy);
	color: var(--tri-color-white);
}

.tri-banner--dark .tri-banner__eyebrow {
	color: var(--tri-color-accent);
}

.tri-banner--dark .tri-banner__title {
	color: var(--tri-color-white);
}

.tri-banner--dark .tri-banner__text {
	color: var(--tri-color-on-dark-c8cdd6);
}

.tri-banner--light {
	background-color: var(--tri-color-surface-edf2fd);
	color: var(--tri-color-ink);
}

.tri-banner--light .tri-banner__eyebrow,
.tri-banner--light .tri-banner__title {
	color: var(--tri-color-navy);
}

.tri-banner--light .tri-banner__text {
	color: var(--tri-color-ink-secondary);
}

.tri-banner--accent {
	background-color: var(--tri-color-accent);
	color: var(--tri-color-navy);
}

.tri-banner--accent .tri-banner__eyebrow,
.tri-banner--accent .tri-banner__title,
.tri-banner--accent .tri-banner__text {
	color: var(--tri-color-navy);
}

/* --- Широкие экраны ------------------------------------------------- */

@media (min-width: 1024px) {
	.tri-banner__inner {
		padding-block: var(--tri-space-52);
	}

	/* Две колонки — только когда есть что во вторую положить. */
	.tri-banner__inner:has(.tri-banner__media) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
		gap: var(--tri-space-48);
	}

	.tri-banner__title {
		font-size: var(--tri-fs-40);
	}
}

/* ====================================================================
 * СОСТАВЫ БАННЕРА.
 *
 * Эти правила переехали сюда из стилей главной. Причина простая: с
 * появлением общего баннера тот же блок печатается и на услуге, а
 * стили главной на услуге не подключаются — блок остался бы без
 * оформления. Место стилей определяется тем, где компонент выводится,
 * а не тем, где он появился впервые.
 *
 * Имена классов переименованы вслед за переездом: «tri-home-contact»
 * на странице услуги вводил бы в заблуждение.
 * ================================================================== */

/* reference: 14px/700 #5A6270 */
/* reference: 40px/1.14/700; ls -0.022em; margin-top:14px */
/* reference: 17px/1.55 #5A6270; margin-top:16px; max-width:64ch */
/* reference: repeat(3,1fr); gap:18px; margin-top:44px */
/* reference: #12295C; radius 10px; padding 14px; height 104px */
/* reference: 12px/800 #B4BAC5 ls0.06em */
/* reference: 7px; #1E355F; radius 100px; 85% и 60% */
/* reference: gap:8px; margin-top:14px; height 22px; radius 6px */
/* reference: 19px/800 #16181D; margin-top:6px */
/* reference: 14.5px/1.5 #5A6270 */
/* reference: 12px/600 #16181D; bg #F8B327; radius 100px; padding 5px 12px */
.tri-banner-expert {
	/* reference (v2): секция сплошная белая */
	background-color: var(--tri-color-white);
}

.tri-banner-expert__panel {
	position: relative;
	background-image: linear-gradient(135deg, #0e2050 0%, var(--tri-color-navy) 55%, #1b3f8f 100%);
	border-radius: var(--tri-radius-20);
	display: grid;
	overflow: hidden;
	/* reference (v2): 1fr 440px, зазор 44px, внутренние поля панели —
	   белая карточка не должна упираться в её край. */
	gap: var(--tri-space-44);
	padding: var(--tri-space-48) var(--tri-space-44);
}

.tri-banner-expert__body {
	position: relative;
	padding: 0; /* reference (v2): поля даёт сама панель */
}

/* reference: 44px/700 #FFFFFF; ls -0.022em */
.tri-banner-expert__title {
	font-size: var(--tri-fs-40); /* reference (v2): 40px */
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	letter-spacing: var(--tri-ls-n0-022);
	margin: 0;
}

/* reference: 18px/1.55 #C8CDD6; margin-top:16px; max-width:480px */
.tri-banner-expert__text {
	font-size: var(--tri-fs-18);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-on-dark-c8cdd6);
	margin-block-start: var(--tri-space-16);
	max-width: 480px;
}

/* reference: gap:14px; margin-top:34px */
.tri-banner-expert__actions {
	margin-block-start: var(--tri-space-34);
}

/* reference: gap:28px; margin-top:36px */
.tri-banner-expert__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-28);
	margin-block-start: var(--tri-space-36);
}

/* reference: 17px/800 #FFFFFF */
.tri-banner-expert__phone {
	font-size: var(--tri-fs-17);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-white);
	text-decoration: none;
}

/* reference: 17px/700 #C8CDD6 */
.tri-banner-expert__email {
	font-size: var(--tri-fs-17);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-on-dark-c8cdd6);
	text-decoration: none;
}

.tri-banner-expert__aside {
	background-color: var(--tri-color-white);
	border-radius: var(--tri-radius-16);
	box-shadow: 0 26px 56px rgba(4, 18, 46, 0.3);
	padding: var(--tri-space-28);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--tri-space-18);
}

/* reference: 96x96; radius 50% */
.tri-banner-expert__avatar {
	width: 96px;
	height: 96px;
	border-radius: var(--tri-radius-circle);
	overflow: hidden;
	background-color: var(--tri-color-surface-edf2fd);
	flex-shrink: 0;
}

.tri-banner-expert__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * У выбранного эксперта может не быть снимка. Тогда на его месте —
 * та же подсказка, что в карточках команды макета: место сохраняется,
 * разметка не показывает «сломанную» картинку, и редактору понятно,
 * что нужно сделать.
 */
.tri-banner-expert__avatar--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--tri-space-8);
	background-color: rgba(255, 255, 255, 0.08);
	border: var(--tri-border-width) solid rgba(255, 255, 255, 0.16);
	color: var(--tri-color-on-dark-c8cdd6);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	line-height: var(--tri-lh-1-25);
	text-align: center;
}

/* reference: 20px/800 #FFFFFF */
.tri-banner-expert__person {
	font-size: var(--tri-fs-20);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-white);
}

/* reference: 14.5px/600 #C8CDD6; margin-top:4px */
.tri-banner-expert__role {
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-on-dark-c8cdd6);
	margin-block-start: var(--tri-space-4);
}

.tri-banner-expert__quote {
	background-color: rgba(255, 255, 255, 0.06);
	border: var(--tri-border-width) solid rgba(255, 255, 255, 0.12);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-14) var(--tri-space-18);
	font-size: var(--tri-fs-14);
	color: var(--tri-color-on-dark-c8cdd6);
	font-weight: var(--tri-fw-600);
	margin: 0;
}

@media (min-width: 1024px) {
	/* reference: grid-template-columns:1.4fr 1fr */
	.tri-banner-expert__panel {
		grid-template-columns: minmax(0, 1fr) 440px; /* reference (v2) */
	}
	/*
	 * Формы нет — второй колонки тоже: пустая половина панели читалась
	 * бы как незагрузившийся блок.
	 */
	.tri-banner-expert__panel--no-form {
		grid-template-columns: minmax(0, 1fr);
	}
	.tri-banner-expert__aside {
		border-left: var(--tri-border-width) solid rgba(255, 255, 255, 0.1);
	}
}

@media (max-width: 1023px) {
	.tri-banner-expert__body {
		padding: 0;
	}
	.tri-banner-expert__aside {
		padding: var(--tri-space-24);
		border-top: var(--tri-border-width) solid rgba(255, 255, 255, 0.1);
	}
}

@media (min-width: 1024px) {
}

@media (min-width: 768px) and (max-width: 1023px) {
}

/* ====================================================================
 * СОСТАВ «AI-ИНСТРУМЕНТЫ — ТЁМНАЯ ПАНЕЛЬ» (услуга).
 *
 * Правила переехали сюда из стилей услуги вместе с блоком: теперь его
 * печатает общий баннер, а стили услуги подключаются не везде, где
 * баннер может встать.
 *
 * Второй состав AI-инструментов существует не по недосмотру: в
 * утверждённых макетах блок на главной и блок на услуге — разные, и
 * общий состав означал бы потерю одного из них.
 * ================================================================== */
/*
 * reference (услуга v3): панель стала компактнее — 32px 36px вместо
 * 44px 48px в v2. Баннер стоит между двумя плотными блоками услуги, и
 * прежние поля растягивали его сильнее соседей.
 *
 * Состав `service_ai_tools` выводится только в местах услуги, поэтому
 * правка не затрагивает главную, программу и агента.
 */
.tri-banner-svtools__panel {
	position: relative;
	overflow: hidden;
	background-color: var(--tri-color-navy);
	border-radius: var(--tri-radius-24);
	padding: var(--tri-space-32) var(--tri-space-36);
}

/* reference: сетка-паттерн 52x52 из rgba(248,179,39,0.06) */
.tri-banner-svtools__pattern {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(248, 179, 39, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(248, 179, 39, 0.06) 1px, transparent 1px);
	background-size: 52px 52px;
	pointer-events: none;
}

/* reference: подсветка 560x560; right -6%; top -30% */
.tri-banner-svtools__glow {
	position: absolute;
	right: -6%;
	top: -30%;
	width: 560px;
	height: 560px;
	border-radius: var(--tri-radius-circle);
	background-image: radial-gradient(
		circle,
		rgba(248, 179, 39, 0.22) 0%,
		rgba(248, 179, 39, 0.05) 46%,
		rgba(18, 41, 92, 0) 72%
	);
	pointer-events: none;
}

/* reference: 1fr 1.05fr; gap:52px */
.tri-banner-svtools__grid {
	position: relative;
	display: grid;
	gap: var(--tri-space-52);
	align-items: center;
}

/* reference: плашка #F8B327; radius 8px; padding 7px 14px; 12px/700 */
.tri-banner-svtools__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--tri-space-9);
	background-color: var(--tri-color-accent);
	color: var(--tri-color-navy);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	border-radius: var(--tri-radius-8);
	padding: var(--tri-space-7) var(--tri-space-14);
}

.tri-banner-svtools__title {
	font-size: var(--tri-fs-34);
	line-height: var(--tri-lh-1-16);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	letter-spacing: var(--tri-ls-n0-02);
	margin: var(--tri-space-20) 0 0;
	max-width: 520px;
}

/* reference: 16.5px/1.55 #C8CDD6; margin-top:14px; max-width:64ch */
.tri-banner-svtools__text {
	font-size: var(--tri-fs-16-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-on-dark-c8cdd6);
	margin-block-start: var(--tri-space-14);
	max-width: var(--tri-measure);
}

/* reference: gap:16px; margin-top:28px */
.tri-banner-svtools__actions {
	gap: var(--tri-space-16);
	margin-block-start: var(--tri-space-28);
	align-items: center;
}

.tri-banner-svtools__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--tri-space-14);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tri-banner-svtools__card {
	background-color: var(--tri-color-white);
	border-radius: var(--tri-radius-14);
	overflow: hidden;
	box-shadow: var(--tri-shadow-deep-44-34);
	min-width: 0;
}

.tri-banner-svtools__card-bar {
	display: flex;
	align-items: center;
	gap: var(--tri-space-7);
	background-color: var(--tri-color-surface-f8f9fb);
	border-block-end: var(--tri-border-width) solid var(--tri-color-divider);
	padding: var(--tri-space-9) var(--tri-space-13);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted-soft);
}

.tri-banner-svtools__card-dot {
	width: 7px;
	height: 7px;
	border-radius: var(--tri-radius-circle);
	background-color: var(--tri-color-border);
	flex-shrink: 0;
}

.tri-banner-svtools__card-title {
	margin-inline-start: var(--tri-space-6);
}

/* reference: тело карточки — padding 14px 15px */
.tri-banner-svtools__card-body {
	padding: var(--tri-space-14) var(--tri-space-15);
}

.tri-banner-svtools__doc {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tri-space-10);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-8);
	padding: var(--tri-space-9) var(--tri-space-11);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
}

.tri-banner-svtools__doc + .tri-banner-svtools__doc {
	margin-block-start: var(--tri-space-7);
}

.tri-banner-svtools__doc--pending {
	color: var(--tri-color-muted-soft);
}

/* reference: статус «готово» — #17703D; «62%» — #8A5A0F */
.tri-banner-svtools__status {
	color: var(--tri-color-success);
	white-space: nowrap;
}

.tri-banner-svtools__status--progress {
	color: var(--tri-color-warn-text-strong);
}

/* reference: полоса 5px; #EBEDF1; radius 100px; margin-top:12px */
.tri-banner-svtools__track {
	height: 5px;
	background-color: var(--tri-color-divider);
	border-radius: var(--tri-radius-100);
	margin-block-start: var(--tri-space-12);
	overflow: hidden;
}

.tri-banner-svtools__track > span {
	display: block;
	height: 100%;
	background-color: var(--tri-color-navy);
	border-radius: var(--tri-radius-100);
}

/* reference: вопрос — #EDF2FD; radius 8px; padding 10px 12px; 12px/1.4 */
.tri-banner-svtools__q {
	background-color: var(--tri-color-surface-edf2fd);
	border-radius: var(--tri-radius-8);
	padding: var(--tri-space-10) var(--tri-space-12);
	font-size: var(--tri-fs-12);
	line-height: var(--tri-lh-1-4);
	color: var(--tri-color-ink);
	font-weight: var(--tri-fw-600);
}

.tri-banner-svtools__a {
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-8);
	padding: var(--tri-space-10) var(--tri-space-12);
	margin-block-start: var(--tri-space-8);
	font-size: var(--tri-fs-12);
	line-height: var(--tri-lh-1-45);
	color: var(--tri-color-ink-secondary);
}

/* reference: сноска — точка 6x6 #F8B327; 12px/700 #6B7280; margin-top:10px */
.tri-banner-svtools__source {
	display: flex;
	align-items: center;
	gap: var(--tri-space-7);
	margin-block-start: var(--tri-space-10);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted-soft);
}

.tri-banner-svtools__source::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var(--tri-radius-circle);
	background-color: var(--tri-color-accent);
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	/* reference: 1fr 1.05fr */
	.tri-banner-svtools__grid {
		grid-template-columns: minmax(0, 1fr) 1.05fr;
	}
	/* reference: две карточки-скриншота в ряд */
	.tri-banner-svtools__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.tri-sv-case__body,
	.tri-banner-svtools__panel,
	.tri-sv-cta__body,
	.tri-sv-cta__aside {
		padding: var(--tri-space-24);
	}
}

/* ====================================================================
 * СОСТАВ «AI-ИНСТРУМЕНТЫ» — ГЛАВНАЯ
 *
 * reference (v2): тёмная полоса с диагональным градиентом
 * 120deg #0E2050 → #12295C 48% → #1B3F8F и мелкой белой сеткой 48x48.
 * Слева текст и ссылка, справа панель «AI-команда» с белыми строками.
 *
 * Состав услуги (tri-banner-svtools) остаётся прежним и независимым:
 * это два разных утверждённых макета.
 * ================================================================== */

.tri-banner-tools {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-image: linear-gradient(120deg, #0e2050 0%, var(--tri-color-navy) 48%, #1b3f8f 100%);
}

.tri-banner-tools__grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
}

.tri-banner-tools__inner {
	display: grid;
	gap: var(--tri-space-44);
	padding-block: var(--tri-space-80);
}

.tri-banner-tools__eyebrow {
	display: block;
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-1);
	text-transform: uppercase;
	color: var(--tri-color-accent);
}

.tri-banner-tools__title {
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-36); /* reference (v2): 36px */
	line-height: var(--tri-lh-1-14);
	font-weight: var(--tri-fw-700);
	letter-spacing: var(--tri-ls-n0-022);
	color: var(--tri-color-white);
	margin: var(--tri-space-14) 0 0;
}

.tri-banner-tools__text {
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-on-dark-c8cdd6);
	margin: var(--tri-space-16) 0 0;
}

/* Оговорка отделена вертикальной чертой, как в макете. */
.tri-banner-tools__note {
	font-size: var(--tri-fs-13-5);
	line-height: var(--tri-lh-1-5);
	color: var(--tri-color-on-dark-e6eaf2);
	border-inline-start: 2px solid var(--tri-color-accent);
	padding: var(--tri-space-4) 0 var(--tri-space-4) var(--tri-space-16);
	margin: var(--tri-space-20) 0 0;
}

.tri-banner-tools__link {
	display: inline-flex;
	align-items: center;
	gap: var(--tri-space-8);
	margin-block-start: var(--tri-space-24);
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	text-decoration: none;
}

.tri-banner-tools__link:hover {
	color: var(--tri-color-accent);
}

.tri-banner-tools__panel {
	background-color: rgba(255, 255, 255, 0.1);
	border: var(--tri-border-width) solid rgba(255, 255, 255, 0.2);
	border-radius: var(--tri-radius-16);
	padding: var(--tri-space-22);
}

.tri-banner-tools__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tri-space-12);
}

.tri-banner-tools__panel-title {
	font-size: var(--tri-fs-15);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-white);
}

.tri-banner-tools__panel-count {
	font-size: var(--tri-fs-11);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-navy);
	background-color: var(--tri-color-accent);
	border-radius: var(--tri-radius-6);
	padding: var(--tri-space-4) var(--tri-space-10);
}

.tri-banner-tools__list {
	list-style: none;
	margin: var(--tri-space-16) 0 0;
	padding: 0;
	display: grid;
	gap: var(--tri-space-10);
}

/* Строка инструмента — белая карточка на тёмной панели. */
.tri-ai-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--tri-space-14);
	background-color: var(--tri-color-white);
	border-radius: var(--tri-radius-12);
	padding: var(--tri-space-12) var(--tri-space-14);
}

.tri-ai-row__icon {
	display: grid;
	gap: 3px;
	align-content: center;
	inline-size: 34px;
	border-radius: var(--tri-radius-8);
	background-color: var(--tri-color-navy);
	padding: var(--tri-space-8);
}

.tri-ai-row__bar {
	block-size: 3px;
	border-radius: var(--tri-radius-pill);
	background-color: rgba(255, 255, 255, 0.35);
}

.tri-ai-row__bar--accent {
	background-color: var(--tri-color-accent);
}

.tri-ai-row__bar--short {
	inline-size: 60%;
	background-color: rgba(255, 255, 255, 0.2);
}

.tri-ai-row__title {
	display: block;
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

.tri-ai-row__text {
	display: block;
	font-size: var(--tri-fs-12-5);
	line-height: var(--tri-lh-1-45);
	color: var(--tri-color-muted);
	margin-block-start: 2px;
}

.tri-ai-row__tag {
	font-size: var(--tri-fs-11);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-navy);
	background-color: var(--tri-color-surface-edf2fd);
	border-radius: var(--tri-radius-6);
	padding: var(--tri-space-4) var(--tri-space-10);
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.tri-banner-tools__inner {
		grid-template-columns: 1fr 1.1fr; /* reference (v2) */
		align-items: center;
	}
}

/* Правая колонка финального блока в v2 — белая карточка на градиенте,
   поэтому текст в ней тёмный, а не «на тёмном». */
.tri-banner-expert__aside .tri-banner-expert__person,
.tri-banner-expert__aside .tri-banner-expert__quote {
	color: var(--tri-color-muted);
}

.tri-banner-expert__aside .tri-banner-expert__name {
	color: var(--tri-color-ink);
}

/* ====================================================================
 * ВСТРОЕННАЯ ФОРМА ФИНАЛЬНОГО БЛОКА
 *
 * reference (v2): белая карточка radius 16, padding 28, поля radius 9
 * с рамкой #DDE0E6, жёлтая кнопка во всю ширину.
 *
 * Это не отдельная форма, а второе представление общей: разметку даёт
 * тот же шаблон, что и поп-апу, поэтому здесь только оболочка.
 * ================================================================== */

.tri-banner-expert__aside--form {
	display: block;
	gap: 0;
}

.tri-banner-expert__form-title {
	font-size: var(--tri-fs-15);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin: 0 0 var(--tri-space-12);
}

.tri-banner-expert__form {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-12);
}

.tri-banner-expert__form .tri-popup__field {
	display: block;
}

.tri-banner-expert__form .tri-popup__label {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted);
}

.tri-banner-expert__form .tri-popup__input {
	inline-size: 100%;
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-9);
	padding: var(--tri-space-12) var(--tri-space-14);
	font-size: var(--tri-fs-14-5);
	font-family: inherit;
	color: var(--tri-color-ink);
	background-color: var(--tri-color-white);
}

.tri-banner-expert__form .tri-popup__input:focus-visible {
	outline: 2px solid var(--tri-color-navy);
	outline-offset: 1px;
}

.tri-banner-expert__form .tri-popup__consent {
	font-size: var(--tri-fs-12);
	line-height: var(--tri-lh-1-45);
	color: var(--tri-color-muted);
}

/* На узких экранах панель финального блока прижимается компактнее. */
@media (max-width: 767px) {
	.tri-banner-expert__panel {
		padding: var(--tri-space-28) var(--tri-space-20);
		gap: var(--tri-space-24);
	}
}

/* ------------------------------------------------------------------
 * ЦЕЛИ НАЖАТИЯ НА СЕНСОРНЫХ ЭКРАНАХ (мобильный этап 14.09)
 *
 * Ссылки-действия внутри карточек набраны мелким шрифтом: по высоте
 * они занимали 20–26px, и палец попадал в них через раз. Размер
 * шрифта и вид ссылки не меняются — увеличивается только область,
 * по которой можно нажать.
 * ---------------------------------------------------------------- */
@media (max-width: 1023px) {
	.tri-banner-expert__phone {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}
}

/* Телефон и почта — тоже цели нажатия (мобильный этап 14.09). */
@media (max-width: 1023px) {
	.tri-banner-expert__email {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}
}