/**
 * Страница AI-агента.
 *
 * reference: «TRIADA AI — Тендерный отдел». Все величины — общие токены
 * темы; собственных кеглей, цветов и отступов здесь не заводится.
 *
 * Сетки объявлены явно (`minmax(0, 1fr)`): неявная колонка `auto` не
 * сжимается уже́ содержимого и даёт горизонтальную прокрутку на узком
 * экране — эта ошибка на сайте уже была.
 */

/* --- Первый экран ---------------------------------------------------- */

.tri-ai-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--tri-color-navy);
	color: var(--tri-color-white);
	padding-block: 0 var(--tri-space-56);
}

.tri-ai-hero__bg {
	position: absolute;
	inset: 0;
}

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

.tri-ai-hero__veil {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		90deg,
		rgba(4, 18, 46, 0.94) 0%,
		rgba(4, 18, 46, 0.82) 55%,
		rgba(4, 18, 46, 0.66) 100%
	);
	pointer-events: none;
}

/* Содержимое обязано быть позиционировано: фон и вуаль — absolute. */
.tri-ai-hero .tri-container {
	position: relative;
}

/* reference: v3, верх первого экрана.

   КРОШКИ НА ТЁМНОМ ФОНЕ. Общий компонент рисует белую плашку — она
   рассчитана на светлые шапки и на тёмно-синем первом экране читалась
   заплаткой, а её внутренние отступы съедали расстояние до H1. Здесь
   плашка снимается и задаётся ритм макета: 26px от шапки до крошек и
   44px от крошек до заголовка. Файл компонента не меняется — правила
   действуют только внутри этого первого экрана. */
.tri-ai-hero__crumbs {
	padding-block-start: var(--tri-space-26);
}

.tri-ai-hero__crumbs .tri-breadcrumbs__inner {
	padding: 0;
	background: none;
	border: 0;
	gap: var(--tri-space-12);
}

.tri-ai-hero__crumbs .tri-breadcrumbs,
.tri-ai-hero__crumbs .tri-breadcrumbs a {
	color: var(--tri-color-on-dark-9aa1ae);
}

.tri-ai-hero__crumbs .tri-breadcrumbs a:hover,
.tri-ai-hero__crumbs .tri-breadcrumbs a:focus-visible {
	color: var(--tri-color-white);
}

.tri-ai-hero__crumbs .tri-breadcrumbs__current,
.tri-ai-hero__crumbs .tri-breadcrumbs .breadcrumb_last {
	color: var(--tri-color-on-dark-e6eaf2);
}

/*
 * МАКЕТ ПОИСКА НА ПЕРВОМ ЭКРАНЕ.
 *
 * В макете правая половина первого экрана — нарисованное окно поиска
 * тендеров. Картинки у него нет, поэтому окно собрано разметкой: так
 * текст внутри остаётся текстом и масштабируется вместе со страницей.
 *
 * До 1024px окно уезжает под текст: рядом с заголовком на узком экране
 * ему не хватает ширины, а сжатая копия интерфейса нечитаема.
 */
.tri-ai-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-32);
	min-width: 0;
	padding-block: var(--tri-space-44) 0;
}

.tri-ai-hero__mock {
	min-width: 0;
}

.tri-ai-search {
	position: relative;
	background: var(--tri-color-white);
	border-radius: var(--tri-radius-14);
	box-shadow: var(--tri-shadow-deep-64-34);
}

.tri-ai-search__bar {
	border-start-start-radius: var(--tri-radius-14);
	border-start-end-radius: var(--tri-radius-14);
}

.tri-ai-search__bar {
	display: flex;
	gap: var(--tri-space-8);
	align-items: center;
	padding: var(--tri-space-12) var(--tri-space-16);
	background: var(--tri-color-surface-f8f9fb);
	border-bottom: 1px solid var(--tri-color-border-e2e5ea);
}

.tri-ai-search__dot {
	width: 8px;
	height: 8px;
	background: var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-pill);
}

.tri-ai-search__host {
	margin-inline-start: var(--tri-space-8);
	overflow: hidden;
	font-size: var(--tri-fs-12);
	font-weight: 700;
	color: var(--tri-color-muted-soft);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* reference: макет поиска на первом экране.

   КОЛОНКА ДОЛЖНА УМЕТЬ СЖИМАТЬСЯ. Ячейка сетки по умолчанию не уже
   своего содержимого (min-width: auto), поэтому на 320px колонка
   вырастала до 300px внутри 244px — правый край макета срезался и
   доскроллить до него было нельзя. minmax(0, 1fr) снимает этот нижний
   предел, пропорции на широких экранах не меняются. */
.tri-ai-search__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-16);
	padding: var(--tri-space-20) var(--tri-space-22);
}

.tri-ai-search__row {
	display: flex;
	gap: var(--tri-space-10);
	align-items: center;
}

/* reference: рамка у поля, кнопка рядом — не внутри него */
.tri-ai-search__query {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	padding: var(--tri-space-10) var(--tri-space-16);
	font-size: var(--tri-fs-14);
	font-weight: 600;
	color: var(--tri-color-ink);
	text-overflow: ellipsis;
	white-space: nowrap;
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-10);
}

.tri-ai-search__go {
	flex: none;
	padding: var(--tri-space-10) var(--tri-space-16);
	font-size: var(--tri-fs-13);
	font-weight: 600;
	color: var(--tri-color-ink);
	background: var(--tri-color-accent);
	border-radius: var(--tri-radius-10);
}

.tri-ai-search__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tri-ai-search__filter {
	padding: var(--tri-space-8) var(--tri-space-12);
	font-size: var(--tri-fs-12);
	font-weight: 700;
	color: var(--tri-color-ink);
	background: var(--tri-color-surface-f5f8ff);
	border-radius: var(--tri-radius-pill);
}

.tri-ai-search__found {
	margin: 0;
	font-size: var(--tri-fs-13);
	font-weight: 800;
	color: var(--tri-color-ink);
}

.tri-ai-search__results {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tri-ai-result {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-8);
	padding: var(--tri-space-16);
	border: 1px solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-10);
}

/* Плашка соответствия не переносится по словам, поэтому на узком
   экране заголовок и плашка встают друг под друга, а не растягивают
   карточку. */
.tri-ai-result__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-12);
	align-items: flex-start;
	justify-content: space-between;
}

.tri-ai-result__head > * {
	min-width: 0;
}

.tri-ai-result__title {
	min-width: 0;
	font-size: var(--tri-fs-13);
	font-weight: 800;
	line-height: 1.35;
	color: var(--tri-color-ink);
}

.tri-ai-result__score {
	flex: none;
	padding: var(--tri-space-4) var(--tri-space-12);
	font-size: var(--tri-fs-12);
	font-weight: 800;
	color: var(--tri-color-navy);
	background: var(--tri-color-surface-edf2fd);
	border-radius: var(--tri-radius-pill);
	white-space: nowrap;
}

.tri-ai-result__score--match {
	color: var(--tri-color-success);
	background: var(--tri-color-success-surface);
}

.tri-ai-result__meta {
	margin: 0;
	font-size: var(--tri-fs-12);
	font-weight: 500;
	color: var(--tri-color-muted-soft);
}

.tri-ai-result__note {
	margin: 0;
	font-size: var(--tri-fs-12);
	font-weight: 700;
	line-height: 1.45;
	color: var(--tri-color-ink);
}

/*
 * ПЛАШКА РАСЧЁТА. В макете она вынесена за угол окна и лежит поверх
 * него отдельной карточкой с сильной тенью — так видно, что расчёт
 * делает другой агент, а не сам поиск.
 *
 * Вынос включается только на широком экране: на узком плашка,
 * выехавшая за край, создала бы горизонтальную прокрутку страницы.
 */
.tri-ai-calc {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-12);
	padding: var(--tri-space-16);
	background: var(--tri-color-navy);
	border-radius: var(--tri-radius-14);
	box-shadow: var(--tri-shadow-black-44-25);
}

.tri-ai-calc__title {
	margin: 0;
	font-size: var(--tri-fs-12);
	font-weight: 800;
	color: var(--tri-color-white);
}

.tri-ai-calc__rows {
	display: grid;
	gap: var(--tri-space-8);
	margin: 0;
}

.tri-ai-calc__row {
	display: flex;
	gap: var(--tri-space-12);
	align-items: baseline;
	justify-content: space-between;
}

.tri-ai-calc__label {
	font-size: var(--tri-fs-12);
	font-weight: 600;
	color: var(--tri-color-on-dark-c8cdd6);
}

.tri-ai-calc__value {
	margin: 0;
	font-size: var(--tri-fs-12);
	font-weight: 800;
	color: var(--tri-color-white);
	text-align: end;
}

.tri-ai-calc__value--good {
	color: var(--tri-color-success-on-dark);
}

.tri-ai-hero__body {
	min-width: 0;
	max-width: 46rem;
}

.tri-ai-hero__marks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-12);
	align-items: center;
	margin-block-start: var(--tri-space-24);
}

.tri-ai-hero__badge {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-08);
	text-transform: uppercase;
	color: var(--tri-color-navy);
	background: var(--tri-color-accent);
	border-radius: var(--tri-radius-pill);
	padding: var(--tri-space-4) var(--tri-space-12);
}

.tri-ai-hero__eyebrow {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-08);
	text-transform: uppercase;
	color: var(--tri-color-on-dark-c8cdd6);
}

.tri-ai-hero__title {
	margin: var(--tri-space-16) 0 0;
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-40);
	line-height: var(--tri-lh-1-12);
	font-weight: var(--tri-fw-700);
	letter-spacing: var(--tri-ls-n0-015);
	color: var(--tri-color-white);
	overflow-wrap: anywhere;
}

.tri-ai-hero__lead {
	margin: var(--tri-space-16) 0 0;
	font-size: var(--tri-fs-17);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-on-dark-c8cdd6);
	max-width: 60ch;
}

.tri-ai-hero__actions {
	margin-block-start: var(--tri-space-28);
	flex-wrap: wrap;
}

.tri-ai-hero__note {
	margin: var(--tri-space-16) 0 0;
	font-size: var(--tri-fs-14);
	color: var(--tri-color-on-dark-c8cdd6);
}

/* --- Общие заголовки -------------------------------------------------- */

/* reference: заголовки секций в макете — 40px, начертание 700. При
   переносе они уменьшились до 32px, и страница стала читаться как
   сплошной текст без выраженных разделов. */
.tri-ai-title {
	margin: 0;
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-40);
	line-height: var(--tri-lh-1-2);
	font-weight: var(--tri-fw-700);
	letter-spacing: var(--tri-ls-n0-022);
	color: var(--tri-color-ink);
	overflow-wrap: anywhere;
}

.tri-ai-lead {
	margin: var(--tri-space-14) 0 0;
	font-size: var(--tri-fs-16-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	max-width: 72ch;
}

/* --- Карточные секции ------------------------------------------------- */

.tri-ai-cards__list {
	list-style: none;
	margin: var(--tri-space-28) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-16);
}

.tri-ai-cards__card {
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-16);
	padding: var(--tri-space-24);
	background: var(--tri-color-white);
	min-width: 0;
}

.tri-ai-cards__title {
	margin: 0;
	font-size: var(--tri-fs-18);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-navy);
	overflow-wrap: anywhere;
}

.tri-ai-cards__text {
	margin: var(--tri-space-8) 0 0;
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
}

/* --- Полоса признаков продукта ---------------------------------------- */

.tri-ai-signals__list {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-16);
}

.tri-ai-signals__item {
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-20);
	background: var(--tri-color-surface-edf2fd);
	min-width: 0;
}

.tri-ai-signals__title {
	font-size: var(--tri-fs-15-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-navy);
	overflow-wrap: anywhere;
}

.tri-ai-signals__text {
	margin: var(--tri-space-4) 0 0;
	font-size: var(--tri-fs-14);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
}

/* --- Не чат-бот: карточки агентов -------------------------------------- */

/* reference: v3, экран «Не чат-бот». Ряд карточек: четыре рабочих агента
   и завершающая тёмная карточка решения сотрудника — она шире прочих,
   поэтому её колонка получает свою долю, а не общий 1fr. */

.tri-ai-flow__intro {
	max-width: 62ch;
}

/*
 * Шаг человека во вводной части (правки 14.09): агенты делают работу,
 * решение принимает специалист. Это не карточка агента, поэтому и
 * выглядит иначе — строкой с жёлтым акцентом, а не плиткой в сетке.
 */
.tri-ai-flow__human {
	display: flex;
	align-items: flex-start;
	gap: var(--tri-space-12);
	margin: var(--tri-space-20) 0 0;
	padding: var(--tri-space-14) var(--tri-space-18);
	background: var(--tri-color-surface-f5f8ff);
	border-left: 3px solid var(--tri-color-accent);
	border-radius: var(--tri-radius-10);
}

.tri-ai-flow__human-mark {
	flex-shrink: 0;
	color: var(--tri-color-navy);
	line-height: 0;
	margin-block-start: 2px;
}

.tri-ai-flow__human-title {
	display: block;
	font-size: var(--tri-fs-15);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

.tri-ai-flow__human-text {
	display: block;
	margin-block-start: var(--tri-space-4);
	font-size: var(--tri-fs-14-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
}

.tri-ai-flow__list {
	list-style: none;
	margin: var(--tri-space-44) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-14);
	align-items: stretch;
}

/* Крупный порядковый номер в углу карточки — как в референсе 14.09. */
.tri-ai-flow__num {
	position: absolute;
	top: var(--tri-space-14);
	right: var(--tri-space-18);
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-40);
	font-weight: var(--tri-fw-800);
	line-height: 1;
	color: rgba(18, 41, 92, 0.1);
	font-variant-numeric: tabular-nums lining-nums;
	pointer-events: none;
}

.tri-ai-flow__step {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 230px;
	padding: var(--tri-space-22) var(--tri-space-22) var(--tri-space-24);
	background: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-16);
	transition: border-color var(--tri-duration-3) var(--tri-ease), box-shadow var(--tri-duration-3) var(--tri-ease);
}

.tri-ai-flow__step:hover {
	border-color: var(--tri-color-navy);
	box-shadow: var(--tri-shadow-navy-34-10);
}

/* reference: карточка сотрудника — тёмная, с сеткой поверх подложки.
   Признак приходит из данных («Решение принимает человек»), а не из
   позиции: у другого агента шагов может быть больше. */
.tri-ai-flow__step--human {
	position: relative;
	overflow: hidden;
	background: var(--tri-color-navy);
	border-color: var(--tri-color-navy);
}

.tri-ai-flow__step--human::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
}

.tri-ai-flow__step--human:hover {
	border-color: var(--tri-color-navy);
	box-shadow: none;
}

.tri-ai-flow__step--human > * {
	position: relative;
}

.tri-ai-flow__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tri-space-12);
	min-height: var(--tri-space-22);
}

.tri-ai-flow__tag {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-04);
	color: var(--tri-color-navy);
}

.tri-ai-flow__step--human .tri-ai-flow__tag {
	padding: var(--tri-space-4) var(--tri-space-11);
	background: var(--tri-color-accent);
	border-radius: var(--tri-radius-pill);
	font-size: var(--tri-fs-12);
	letter-spacing: normal;
	color: var(--tri-color-ink);
}

.tri-ai-flow__mark {
	display: inline-flex;
	color: var(--tri-color-white);
}

.tri-ai-flow__title {
	margin: var(--tri-space-18) 0 0;
	font-size: var(--tri-fs-19);
	line-height: var(--tri-lh-1-25);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-n0-012);
	color: var(--tri-color-ink);
	overflow-wrap: anywhere;
}

.tri-ai-flow__step--human .tri-ai-flow__title {
	color: var(--tri-color-white);
}

.tri-ai-flow__text {
	margin: var(--tri-space-8) 0 0;
	font-size: var(--tri-fs-13-5);
	line-height: var(--tri-lh-1-5);
	color: var(--tri-color-ink-secondary);
}

.tri-ai-flow__step--human .tri-ai-flow__text {
	color: var(--tri-color-on-dark-c8cdd6);
}

/* Строка результата прижата к низу карточки: ряд читается как таблица,
   даже если описания разной длины. */
.tri-ai-flow__out {
	margin: auto 0 0;
	padding-block-start: var(--tri-space-14);
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted-soft);
}

.tri-ai-flow__out-value {
	color: var(--tri-color-ink);
}

.tri-ai-flow__step--human .tri-ai-flow__out {
	color: var(--tri-color-on-dark-9aa1ae);
}

/* --- Демонстрация: вкладки --------------------------------------------- */

/* reference: v3, экран «Демо платформы». Вкладки сверху, активный экран
   виден сразу. Разметка — настоящий tablist; здесь только оформление,
   переключение делает assets/js/sections.js. */

.tri-ai-demo__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-8);
	margin-block-start: var(--tri-space-32);
}

.tri-ai-demo__tab {
	appearance: none;
	margin: 0;
	padding: var(--tri-space-12) var(--tri-space-24);
	font-family: inherit;
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink-secondary);
	background: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border-c9cdd5);
	border-radius: var(--tri-radius-pill);
	cursor: pointer;
	transition: color var(--tri-duration-28) var(--tri-ease), background-color var(--tri-duration-28) var(--tri-ease), border-color var(--tri-duration-28) var(--tri-ease);
}

.tri-ai-demo__tab:hover {
	color: var(--tri-color-navy);
	border-color: var(--tri-color-navy);
}

.tri-ai-demo__tab[aria-selected="true"] {
	color: var(--tri-color-white);
	background: var(--tri-color-navy);
	border-color: var(--tri-color-navy);
}

/* Панель получает фокус с клавиатуры — обводка нужна, рамка нет. */
.tri-ai-demo__panel {
	margin-block-start: var(--tri-space-24);
}

.tri-ai-demo__panel:focus-visible {
	outline: 2px solid var(--tri-color-navy);
	outline-offset: 4px;
	border-radius: var(--tri-radius-14);
}

.tri-ai-demo__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-32);
	align-items: start;
}

/* Нарисованное окно продукта. Это иллюстрация, а не рабочий интерфейс:
   ссылок и полей ввода внутри нет. */
.tri-ai-demo__screen {
	min-width: 0;
	background: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-14);
	overflow: hidden;
	box-shadow: var(--tri-shadow-navy-34-10);
}

.tri-ai-demo__bar {
	display: flex;
	align-items: center;
	gap: var(--tri-space-8);
	padding: var(--tri-space-12) var(--tri-space-16);
	background: var(--tri-color-surface-fafbff);
	border-block-end: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
}

.tri-ai-demo__dot {
	width: 8px;
	height: 8px;
	background: var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-pill);
}

.tri-ai-demo__host {
	margin-inline-start: var(--tri-space-8);
	overflow: hidden;
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted-soft);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tri-ai-demo__body {
	padding: var(--tri-space-22) var(--tri-space-24);
}

.tri-ai-demo__ui {
	margin: 0;
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted-soft);
}

.tri-ai-demo__rows {
	list-style: none;
	margin: var(--tri-space-10) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-10);
}

.tri-ai-demo__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tri-space-12);
	padding: var(--tri-space-13) var(--tri-space-16);
	border: var(--tri-border-width) solid var(--tri-color-divider);
	border-radius: var(--tri-radius-10);
	min-width: 0;
}

.tri-ai-demo__key {
	min-width: 0;
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	overflow-wrap: anywhere;
}

.tri-ai-demo__value {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-navy);
	text-align: end;
}

.tri-ai-demo__note {
	margin: var(--tri-space-14) 0 0;
	padding: var(--tri-space-12) var(--tri-space-16);
	background: var(--tri-color-surface-edf2fd);
	border-radius: var(--tri-radius-10);
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
}

.tri-ai-demo__side {
	min-width: 0;
}

.tri-ai-demo__step {
	display: block;
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-04);
	color: var(--tri-color-navy);
}

.tri-ai-demo__title {
	margin: var(--tri-space-10) 0 0;
	font-size: var(--tri-fs-26);
	line-height: var(--tri-lh-1-2);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-n0-014);
	color: var(--tri-color-ink);
}

.tri-ai-demo__text {
	margin: var(--tri-space-12) 0 0;
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
}

.tri-ai-demo__flow {
	margin: var(--tri-space-22) 0 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-14);
}

.tri-ai-demo__flow-item {
	min-width: 0;
}

.tri-ai-demo__flow-label {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-06);
	text-transform: uppercase;
	color: var(--tri-color-muted-soft);
}

.tri-ai-demo__flow-text {
	margin: var(--tri-space-6) 0 0;
	font-size: var(--tri-fs-14-5);
	line-height: var(--tri-lh-1-45);
	color: var(--tri-color-ink);
}

/* reference: строка о правилах компании с жёлтой отбивкой. Отдельного
   экрана под эту мысль в v3 нет — она стоит здесь одной строкой. */
.tri-ai-demo__rule {
	display: flex;
	gap: var(--tri-space-12);
	margin: var(--tri-space-24) 0 0;
	padding: var(--tri-space-14) var(--tri-space-16);
	background: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-12);
	font-size: var(--tri-fs-13-5);
	line-height: var(--tri-lh-1-5);
	color: var(--tri-color-ink-secondary);
}

.tri-ai-demo__rule::before {
	content: "";
	flex: 0 0 4px;
	align-self: stretch;
	background: var(--tri-color-accent);
	border-radius: var(--tri-radius-4);
}

/* Текст обёрнут в одну ячейку флекса: иначе заголовок и продолжение
   встали бы двумя колонками, а не одной строкой с переносом. */
.tri-ai-demo__rule-body {
	min-width: 0;
}

.tri-ai-demo__rule-title {
	color: var(--tri-color-ink);
}

/* --- Круг «человек в контуре» ----------------------------------------- */

.tri-ai-loop__list {
	list-style: none;
	margin: var(--tri-space-28) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-12);
}

.tri-ai-loop__step {
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-20);
	background: var(--tri-color-navy);
	color: var(--tri-color-white);
	min-width: 0;
}

.tri-ai-loop__step--human {
	background: var(--tri-color-accent);
	color: var(--tri-color-navy);
}

.tri-ai-loop__title {
	display: block;
	font-size: var(--tri-fs-16-5);
	font-weight: var(--tri-fw-700);
	overflow-wrap: anywhere;
}

.tri-ai-loop__text {
	display: block;
	margin-block-start: var(--tri-space-4);
	font-size: var(--tri-fs-14);
	color: inherit;
	opacity: 0.85;
}

/* --- Что меняется в работе отдела -------------------------------------- */

/* reference: v3, экран «Что меняется». Слева крупное вступление
   фиксированной ширины, справа — строки результата, разделённые
   линейками. Сухой сетки одинаковых плиток, как было в v2, здесь нет. */

.tri-ai-outcomes__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-32);
}

/*
 * Правки 14.09: слева акцентная вводная панель, справа — аккуратные
 * нумерованные карточки вместо сухой таблицы строк.
 */
.tri-ai-outcomes__intro {
	min-width: 0;
	/* Панель по высоте текста: у секции без вводного абзаца иначе
	   получалось высокое пустое поле рядом с карточками. */
	align-self: start;
	padding: var(--tri-space-28);
	background: var(--tri-color-surface-f5f8ff);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-18);
}

.tri-ai-outcomes__list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-12);
	min-width: 0;
}

.tri-ai-outcomes__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-6);
	padding: var(--tri-space-18) var(--tri-space-20);
	background: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-left: 3px solid var(--tri-color-navy);
	border-radius: var(--tri-radius-14);
}

/* Шаги чередуют акцент — так ряд читается как последовательность. */
.tri-ai-outcomes__row:nth-child(even) {
	border-left-color: var(--tri-color-accent);
}

.tri-ai-outcomes__term {
	display: flex;
	align-items: baseline;
	gap: var(--tri-space-12);
	font-size: var(--tri-fs-18);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	overflow-wrap: anywhere;
}

.tri-ai-outcomes__num {
	flex-shrink: 0;
	min-inline-size: 34px;
	padding: var(--tri-space-4) var(--tri-space-8);
	border-radius: var(--tri-radius-6);
	background: var(--tri-color-surface-edf2fd);
	color: var(--tri-color-navy);
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-800);
	text-align: center;
	font-variant-numeric: tabular-nums lining-nums;
}

.tri-ai-outcomes__row:nth-child(even) .tri-ai-outcomes__num {
	background: rgba(248, 179, 39, 0.24);
	color: var(--tri-color-ink);
}

.tri-ai-outcomes__term-text {
	min-width: 0;
}

.tri-ai-outcomes__text {
	margin: 0;
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-ink-secondary);
}

/* --- Платформа -------------------------------------------------------- */

.tri-ai-platform__panel {
	border-radius: var(--tri-radius-24);
	background: var(--tri-color-navy);
	color: var(--tri-color-white);
	padding: var(--tri-space-44) var(--tri-space-32);
	min-width: 0;
}

.tri-ai-platform__title {
	margin: 0;
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-32);
	line-height: var(--tri-lh-1-2);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	overflow-wrap: anywhere;
}

.tri-ai-platform__lead {
	margin: var(--tri-space-14) 0 0;
	font-size: var(--tri-fs-16-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-on-dark-c8cdd6);
	max-width: 60ch;
}

.tri-ai-platform__list {
	list-style: none;
	margin: var(--tri-space-28) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-12);
}

.tri-ai-platform__item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--tri-space-8);
	padding: var(--tri-space-16);
	border-radius: var(--tri-radius-14);
	background: rgba(255, 255, 255, 0.07);
	color: var(--tri-color-on-dark-c8cdd6);
	min-width: 0;
}

.tri-ai-platform__item--active {
	background: var(--tri-color-white);
	color: var(--tri-color-navy);
}

.tri-ai-platform__name {
	font-size: var(--tri-fs-15-5);
	font-weight: var(--tri-fw-700);
	overflow-wrap: anywhere;
}

.tri-ai-platform__state {
	font-size: var(--tri-fs-12-5);
	letter-spacing: var(--tri-ls-p0-08);
	text-transform: uppercase;
}

/* --- Тестовый доступ -------------------------------------------------- */

.tri-ai-access__panel {
	position: relative;
	overflow: hidden;
	border-radius: var(--tri-radius-24);
	background: var(--tri-color-navy);
	color: var(--tri-color-white);
	min-width: 0;
}

/* reference: сетка 56x56 поверх заливки — как в макете. */
.tri-ai-access__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
}

.tri-ai-access__photo {
	position: absolute;
	inset: 0;
}

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

.tri-ai-access__veil {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(90deg, rgba(4, 18, 46, 0.94) 0%, rgba(4, 18, 46, 0.7) 100%);
	pointer-events: none;
}

/* Содержимое поверх фона: фон и вуаль объявлены absolute. */
.tri-ai-access__body {
	position: relative;
	padding: var(--tri-space-44) var(--tri-space-32);
	min-width: 0;
}

.tri-ai-access__title {
	margin: 0;
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-32);
	line-height: var(--tri-lh-1-2);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	overflow-wrap: anywhere;
}

.tri-ai-access__text {
	margin: var(--tri-space-14) 0 0;
	font-size: var(--tri-fs-16-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-on-dark-c8cdd6);
	max-width: 60ch;
}

.tri-ai-access__list {
	list-style: none;
	margin: var(--tri-space-20) 0 0;
	padding: 0;
	display: grid;
	gap: var(--tri-space-8);
}

.tri-ai-access__item {
	position: relative;
	padding-inline-start: var(--tri-space-24);
	font-size: var(--tri-fs-15-5);
	color: var(--tri-color-on-dark-c8cdd6);
}

.tri-ai-access__item::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	width: var(--tri-space-8);
	height: var(--tri-space-8);
	border-radius: 50%;
	background: var(--tri-color-accent);
}

.tri-ai-access__actions {
	margin-block-start: var(--tri-space-24);
	flex-wrap: wrap;
}

/* --- Корпоративные данные и контроль доступа --------------------------- */

/* reference: v3, экран «Безопасность». Заголовок и описание стоят рядом
   по нижнему краю, ниже — сетка 2×2 из крупных карточек: номер сверху,
   заголовок и текст прижаты к низу. Вторая карточка тёмная — это
   оформление ряда, поэтому признак не заводится полем. */

.tri-ai-data__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-16);
	align-items: end;
}

.tri-ai-data__title {
	margin: 0;
	line-height: var(--tri-lh-1-1);
}

.tri-ai-data__lead {
	margin: 0;
	max-width: 60ch;
	font-size: var(--tri-fs-16-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
}

.tri-ai-data__list {
	list-style: none;
	margin: var(--tri-space-40) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-14);
}

.tri-ai-data__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 220px;
	padding: var(--tri-space-32) var(--tri-space-34);
	background: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-18);
}

.tri-ai-data__card--dark {
	background: var(--tri-color-navy);
	border-color: var(--tri-color-navy);
}

.tri-ai-data__num {
	font-size: var(--tri-fs-15);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-02);
	color: var(--tri-color-navy);
}

.tri-ai-data__card--dark .tri-ai-data__num {
	color: var(--tri-color-accent);
}

/* Заголовок прижат к низу карточки: в макете номер и текст разведены
   по краям, а высота карточек в ряду одинакова. */
.tri-ai-data__card-title {
	margin: auto 0 0;
	padding-block-start: var(--tri-space-34);
	font-size: var(--tri-fs-26);
	line-height: var(--tri-lh-1-2);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-n0-014);
	color: var(--tri-color-ink);
	overflow-wrap: anywhere;
}

.tri-ai-data__card--dark .tri-ai-data__card-title {
	color: var(--tri-color-white);
}

.tri-ai-data__text {
	margin: var(--tri-space-10) 0 0;
	max-width: 52ch;
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-ink-secondary);
}

.tri-ai-data__card--dark .tri-ai-data__text {
	color: var(--tri-color-on-dark-c8cdd6);
}

/* --- Продукт или внедрение -------------------------------------------- */

.tri-ai-choice__cols {
	margin-block-start: var(--tri-space-28);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-16);
}

.tri-ai-choice__col {
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-16);
	padding: var(--tri-space-28);
	background: var(--tri-color-white);
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tri-ai-choice__col--product {
	background: var(--tri-color-navy);
	border-color: var(--tri-color-navy);
	color: var(--tri-color-white);
}

.tri-ai-choice__title {
	margin: 0;
	font-size: var(--tri-fs-20);
	font-weight: var(--tri-fw-700);
	overflow-wrap: anywhere;
}

.tri-ai-choice__col--custom .tri-ai-choice__title {
	color: var(--tri-color-navy);
}

.tri-ai-choice__text {
	margin: var(--tri-space-12) 0 0;
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-6);
}

.tri-ai-choice__col--product .tri-ai-choice__text {
	color: var(--tri-color-on-dark-c8cdd6);
}

.tri-ai-choice__col--custom .tri-ai-choice__text {
	color: var(--tri-color-ink-secondary);
}

.tri-ai-choice__list {
	list-style: none;
	margin: var(--tri-space-20) 0 0;
	padding: 0;
	display: grid;
	gap: var(--tri-space-8);
	flex: 1 1 auto;
}

.tri-ai-choice__item {
	position: relative;
	padding-inline-start: var(--tri-space-24);
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-6);
}

.tri-ai-choice__item::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	width: var(--tri-space-8);
	height: var(--tri-space-8);
	border-radius: 50%;
	background: var(--tri-color-accent);
}

.tri-ai-choice__col--custom .tri-ai-choice__item {
	color: var(--tri-color-ink-secondary);
}

.tri-ai-choice__actions {
	margin-block-start: var(--tri-space-24);
	flex-wrap: wrap;
}

/* --- Команда ---------------------------------------------------------- */

/* reference: v3, экран «Команда». Слева вступление, справа портреты 3:4
   с подписью поверх нижнего края. Подложка секции — переход от белого к
   светло-синему, как в макете. */

.tri-ai-team {
	background-image: linear-gradient(180deg, var(--tri-color-white) 0%, var(--tri-color-surface-f3f7fe) 100%);
}

.tri-ai-team__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-40);
	align-items: start;
}

.tri-ai-team__intro {
	min-width: 0;
}

.tri-ai-team__title {
	margin: 0;
	line-height: var(--tri-lh-1-12);
}

.tri-ai-team__lead {
	margin: var(--tri-space-16) 0 0;
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-ink-secondary);
}

.tri-ai-team__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-14);
}

.tri-ai-team__card {
	position: relative;
	min-width: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--tri-color-surface-edf2fd);
	border-radius: var(--tri-radius-14);
}

.tri-ai-team__photo,
.tri-ai-team__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.tri-ai-team__photo img {
	object-fit: cover;
	display: block;
}

.tri-ai-team__veil {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		180deg,
		rgba(4, 18, 46, 0) 46%,
		rgba(4, 18, 46, 0.55) 68%,
		rgba(4, 18, 46, 0.92) 100%
	);
	pointer-events: none;
}

.tri-ai-team__body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: var(--tri-space-18) var(--tri-space-18) var(--tri-space-16);
	color: var(--tri-color-white);
}

.tri-ai-team__name {
	display: block;
	font-size: var(--tri-fs-16);
	font-weight: var(--tri-fw-700);
	overflow-wrap: anywhere;
}

.tri-ai-team__rule {
	display: block;
	width: 26px;
	height: 2px;
	margin-block: var(--tri-space-8);
	background: var(--tri-color-accent);
}

.tri-ai-team__role {
	display: block;
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-700);
	line-height: var(--tri-lh-1-35);
}

.tri-ai-team__spec {
	display: block;
	margin-block-start: var(--tri-space-3);
	font-size: var(--tri-fs-12);
	color: var(--tri-color-on-dark-c8cdd6);
}

/* --- Экспертный текст -------------------------------------------------- */

.tri-ai-article__grid {
	margin-block-start: var(--tri-space-28);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-32);
}

.tri-ai-toc {
	min-width: 0;
}

.tri-ai-toc__title,
.tri-ai-ask__title {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-08);
	text-transform: uppercase;
	color: var(--tri-color-muted-soft);
}

.tri-ai-toc__list {
	margin: var(--tri-space-12) 0 0;
	padding-inline-start: var(--tri-space-20);
	display: grid;
	gap: var(--tri-space-8);
}

.tri-ai-toc__list > li {
	min-width: 0;
}

.tri-ai-toc__link {
	font-size: var(--tri-fs-15-5);
	color: var(--tri-color-link-2a56b8);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.tri-ai-toc__link:hover,
.tri-ai-toc__link:focus-visible {
	text-decoration: underline;
}

.tri-ai-ask {
	margin-block-start: var(--tri-space-28);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-16);
	padding: var(--tri-space-20);
	background: var(--tri-color-surface-edf2fd);
	min-width: 0;
}

.tri-ai-ask__title {
	color: var(--tri-color-navy);
}

.tri-ai-ask__text {
	margin: var(--tri-space-8) 0 0;
	font-size: var(--tri-fs-14);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
}

.tri-ai-ask__action {
	margin-block-start: var(--tri-space-16);
}

.tri-ai-article {
	min-width: 0;
	font-size: var(--tri-fs-16-5);
	line-height: var(--tri-lh-1-7);
	color: var(--tri-color-ink-secondary);
}

/*
 * Подзаголовки внутри материала были одного размера с заголовком
 * раздела, и текст читался как набор одинаковых крупных строк.
 * По правкам 14.09 они мельче: главный вопрос остаётся главным.
 */
.tri-ai-article h2 {
	font-size: var(--tri-fs-26);
	line-height: var(--tri-lh-1-25);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin-block: var(--tri-space-36) var(--tri-space-12);
}

.tri-ai-article h3 {
	font-size: var(--tri-fs-19);
	line-height: var(--tri-lh-1-35);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin-block: var(--tri-space-26) var(--tri-space-10);
}

.tri-ai-article > :first-child {
	margin-block-start: 0;
}

/* --- Вопросы ----------------------------------------------------------- */

/* reference: v3, экран FAQ. Слева компактная карточка-вступление, она
   держится у верхнего края при прокрутке; справа — аккордеон. Список
   рассчитан на 10–15 вопросов, поэтому вступление не должно уезжать. */

.tri-ai-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-32);
	align-items: start;
}

.tri-ai-faq__intro {
	min-width: 0;
	padding: var(--tri-space-30) var(--tri-space-32);
	background: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-18);
}

.tri-ai-faq__eyebrow {
	display: block;
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-08);
	text-transform: uppercase;
	color: var(--tri-color-navy);
}

.tri-ai-faq__title {
	margin: var(--tri-space-14) 0 0;
	font-size: var(--tri-fs-30);
	line-height: var(--tri-lh-1-15);
	font-weight: var(--tri-fw-700);
	letter-spacing: var(--tri-ls-n0-02);
	color: var(--tri-color-ink);
}

.tri-ai-faq__text {
	margin: var(--tri-space-14) 0 0;
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
}

.tri-ai-faq__actions {
	margin-block-start: var(--tri-space-22);
}

.tri-ai-faq__list {
	margin: 0;
	min-width: 0;
}

/* --- Другие агенты ----------------------------------------------------- */

.tri-ai-related__list {
	list-style: none;
	margin: var(--tri-space-28) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tri-space-16);
}

.tri-ai-related__card {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-8);
	height: 100%;
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-16);
	padding: var(--tri-space-24);
	background: var(--tri-color-white);
	text-decoration: none;
	min-width: 0;
}

.tri-ai-related__card:hover,
.tri-ai-related__card:focus-visible {
	border-color: var(--tri-color-link-2a56b8);
}

.tri-ai-related__tag {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-08);
	text-transform: uppercase;
	color: var(--tri-color-muted-soft);
}

.tri-ai-related__title {
	font-size: var(--tri-fs-18);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-navy);
	overflow-wrap: anywhere;
}

.tri-ai-related__text {
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
}

.tri-ai-related__more {
	margin-block-start: auto;
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-link-2a56b8);
}

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

/*
 * ДО 768px ВСЁ ИДЁТ ОДНОЙ КОЛОНКОЙ. Это не «мобильная версия», а
 * состояние по умолчанию: каждая сетка выше объявлена как
 * `minmax(0, 1fr)`, а колонки добавляются здесь. На 390px первый экран
 * складывается, вкладки переносятся, сетки становятся одноколоночными,
 * вопросы и портреты идут списком — горизонтальной прокрутки не
 * возникает ни в одном блоке.
 */

@media (min-width: 768px) {
	.tri-ai-cards__list,
	.tri-ai-signals__list,
	.tri-ai-flow__list,
	.tri-ai-team__list,
	.tri-ai-related__list,
	.tri-ai-choice__cols,
	.tri-ai-data__list,
	.tri-ai-demo__flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tri-ai-outcomes__row {
		grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
		gap: var(--tri-space-28);
		align-items: baseline;
	}
}

@media (min-width: 1024px) {
	.tri-ai-hero {
		padding-block: 0 var(--tri-space-72);
	}

	.tri-ai-hero__title {
		font-size: var(--tri-fs-46);
	}

	/* reference: 48fr / 52fr — окно продукта чуть шире текстовой колонки. */
	.tri-ai-hero__grid {
		grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
		gap: var(--tri-space-48);
		align-items: center;
		padding-block: var(--tri-space-44) var(--tri-space-16);
	}

	/* reference: плашка расчёта вынесена за угол окна */
	.tri-ai-calc {
		position: absolute;
		inset-inline-end: -8px;
		inset-block-end: -44px;
		width: 300px;
	}

	/*
	 * Место под вынесенную плашку. Без него она легла бы поверх
	 * последней найденной закупки и закрыла её оценку соответствия —
	 * в макете плашка перекрывает пустой низ окна, а не текст.
	 */
	.tri-ai-search__body {
		padding-block-end: 104px;
	}

	.tri-ai-cards__list,
	.tri-ai-related__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tri-ai-signals__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/*
	 * reference: ряд «repeat(4, 1fr) 1.15fr» — четыре карточки агентов
	 * равной ширины и более широкая карточка сотрудника.
	 *
	 * ЗДЕСЬ ФЛЕКС, А НЕ СЕТКА. Число агентов задаёт редактор: в сетке
	 * пришлось бы объявить точное количество колонок и промахиваться
	 * каждый раз, когда шагов станет больше или меньше. Во флексе доля
	 * записана на самой карточке, поэтому ряд остаётся верным при любом
	 * составе, а `min-width: 0` не даёт длинному слову разорвать строку.
	 */
	/*
	 * Правки 14.09: агентов ровно четыре и они стоят сеткой 2×2 —
	 * карточка получает место под крупный заголовок, описание и теги.
	 * Прежний ряд в одну строку делал их слишком узкими.
	 */
	.tri-ai-flow__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--tri-space-18);
	}

	.tri-ai-flow__step {
		min-height: 210px;
		padding: var(--tri-space-26) var(--tri-space-28) var(--tri-space-28);
	}

	.tri-ai-flow__num {
		font-size: var(--tri-fs-56);
	}

	.tri-ai-loop__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.tri-ai-platform__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* reference: 1.3fr / 1fr — окно продукта шире описания этапа. */
	.tri-ai-demo__grid {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: var(--tri-space-44);
	}

	.tri-ai-demo__flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* reference: 340px под вступление, остальное — под строки. */
	.tri-ai-outcomes__grid {
		grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
		gap: var(--tri-space-48);
	}

	.tri-ai-outcomes__row {
		grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	}

	.tri-ai-data__head {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--tri-space-48);
	}

	.tri-ai-data__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* reference: 320px под вступление, три портрета рядом. */
	.tri-ai-team__grid {
		grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	}

	.tri-ai-team__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* reference: 360px под карточку вопросов, она держится при прокрутке. */
	.tri-ai-faq__grid {
		grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
		gap: var(--tri-space-40);
	}

	.tri-ai-faq__intro {
		position: sticky;
		top: calc(var(--tri-header-height) + var(--tri-space-20));
	}

	.tri-ai-article__grid {
		grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
		gap: var(--tri-space-48);
	}

	.tri-ai-platform__panel,
	.tri-ai-access__body {
		padding: var(--tri-space-52);
	}
}

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