/**
 * Программа обучения.
 *
 * reference: «TRIADA Обучение v3 — Программа Б (standalone).html»
 * из «НОВЫЙ САЙТ ТРИАДА (11)».
 *
 * Значения берутся из общих токенов темы: палитра, кегли, отступы и
 * радиусы у этой страницы те же, что у услуги и статьи. Собственных
 * литералов здесь минимум — только там, где макет задаёт величину,
 * которой в наборе нет; такие места помечены `reference:`.
 *
 * НИ ОДНА СЕТКА НЕ РАССЧИТАНА НА КОНКРЕТНОЕ ЧИСЛО КАРТОЧЕК. Модулей,
 * этапов, сценариев платформы и экспертов может быть сколько угодно:
 * колонки задаются repeat(N, minmax(0, 1fr)), а не перечнем дочерних
 * элементов, и лишний элемент переносится, а не ломает ряд.
 *
 * Сетки складываются в одну колонку ниже 1024px, вертикальный ритм
 * масштабируется общим коэффициентом --tri-section-scale.
 */

/* ====================================================================
 * 1. ОБЩЕЕ ДЛЯ СЕКЦИЙ ПРОГРАММЫ
 * ================================================================== */

/* reference: заголовки секций в макете — 40px, начертание 700. На узких
   экранах кегль снижен: 40px в 320px не помещается без переносов слов. */
.tri-tr-title {
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-26);
	font-weight: var(--tri-fw-700);
	line-height: var(--tri-lh-1-15);
	letter-spacing: var(--tri-ls-n0-022);
	color: var(--tri-color-ink);
	margin: 0;
}

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

/* reference: надзаголовок секции — 12px, 800, прописные, синий. */
.tri-tr-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);
	margin-block-end: var(--tri-space-14);
}

/* ====================================================================
 * 2. ПЕРВЫЙ ЭКРАН
 * reference: v3 — тёмно-синий экран, фотография под градиентной вуалью
 * ================================================================== */

/* reference: в v3 первый экран стал тёмным: #12295C и фотография,
   связанная с тематикой обучения. Прежний светлый градиент к белому
   оставлял экран плоским — это и отмечено в правках. */
.tri-tr-hero {
	position: relative;
	background-color: var(--tri-color-navy);
	color: var(--tri-color-white);
	overflow: hidden;
	padding-block:
		calc(var(--tri-space-26) * var(--tri-section-scale))
		calc(var(--tri-space-64) * var(--tri-section-scale));
}

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

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

/* reference: linear-gradient(100deg, rgba(6,20,52,.97), rgba(10,30,74,.9)
   48%, rgba(18,41,92,.68)). Вуаль обязательна: без неё белый H1
   пропадает на светлых участках производственной фотографии. */
.tri-tr-hero__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(
		100deg,
		rgba(6, 20, 52, 0.97) 0%,
		rgba(10, 30, 74, 0.9) 48%,
		rgba(18, 41, 92, 0.68) 100%
	);
}

.tri-tr-hero .tri-container {
	position: relative;
}

/*
 * Крошки лежат прямо на тёмном фоне — своей плашки в v3 у них нет.
 *
 * Плашку обязательно снимать здесь. Базовый компонент снят со страницы
 * услуги, где крошки стоят на светлом: у него белая подложка и серая
 * рамка. На тёмном первом экране программы эта подложка оставалась, а
 * текущий пункт перекрашивался в светлый — светлый текст на белой
 * плашке читается как пустая обрезанная полоска. Так же, как на
 * странице агента, подложка снимается, и остаётся один текст.
 */
.tri-tr-hero .tri-breadcrumbs__inner {
	padding: 0;
	background: none;
	border: 0;
	gap: var(--tri-space-12);
}

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

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

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

/* reference: 54fr / 46fr на десктопе; ниже 1024px карточка уходит под текст. */
.tri-tr-hero__grid {
	display: grid;
	gap: var(--tri-space-32);
	align-items: center;
	margin-top: var(--tri-space-24);
}

.tri-tr-hero__card,
.tri-tr-hero__aside {
	min-width: 0;
}

.tri-tr-hero__marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tri-space-10);
}

.tri-tr-hero__badge {
	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-white);
	background: rgba(248, 179, 39, 0.16);
	border: var(--tri-border-width) solid rgba(248, 179, 39, 0.4);
	border-radius: var(--tri-radius-100);
	padding: var(--tri-space-5) var(--tri-space-13);
}

.tri-tr-hero__eyebrow {
	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-on-dark-9aa1ae);
}

/* reference: 44px, 700, межстрочный 1.12 */
.tri-tr-hero__title {
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-28);
	font-weight: var(--tri-fw-700);
	line-height: var(--tri-lh-1-12);
	letter-spacing: var(--tri-ls-n0-022);
	color: var(--tri-color-white);
	margin: var(--tri-space-22) 0 0;
}

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

.tri-tr-hero__note {
	font-size: var(--tri-fs-14);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-on-dark-9aa1ae);
	margin: var(--tri-space-12) 0 0;
	max-width: 60ch;
}

/* reference: каждый показатель — в собственной рамке. Раньше это была
   строка однотипных подписей; правка просит именно рамку. */
.tri-tr-hero__facts {
	list-style: none;
	margin: var(--tri-space-28) 0 0;
	padding: 0;
	display: grid;
	gap: var(--tri-space-10);
	max-width: 560px;
}

.tri-tr-fact {
	border: var(--tri-border-width) solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--tri-radius-12);
	padding: var(--tri-space-14) var(--tri-space-16);
	min-width: 0;
}

.tri-tr-fact__value {
	display: block;
	font-size: var(--tri-fs-19);
	font-weight: var(--tri-fw-800);
	line-height: var(--tri-lh-1-1);
	color: var(--tri-color-white);
	font-variant-numeric: tabular-nums lining-nums;
	overflow-wrap: break-word;
}

.tri-tr-fact__label {
	display: block;
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-on-dark-c8cdd6);
	margin-top: var(--tri-space-7);
}

.tri-tr-hero__actions {
	margin-top: var(--tri-space-28);
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-14);
}

/* --------------------------------------------------------------------
 * Карточка результата обучения на первом экране
 * reference: белое окно поверх тёмного экрана. Это иллюстрация того,
 * что остаётся у слушателя, а не рабочий кабинет: ссылок внутри нет.
 * ------------------------------------------------------------------ */

.tri-tr-outcome {
	background: var(--tri-color-white);
	border-radius: var(--tri-radius-16);
	overflow: hidden;
	box-shadow: var(--tri-shadow-deep-64-34);
	color: var(--tri-color-ink);
}

.tri-tr-outcome__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tri-space-12);
	flex-wrap: wrap;
	background: var(--tri-color-surface-fafbff);
	border-block-end: var(--tri-border-width) solid var(--tri-color-divider);
	padding: var(--tri-space-12) var(--tri-space-18);
}

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

.tri-tr-outcome__badge {
	font-size: var(--tri-fs-11-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-success);
	background: var(--tri-color-success-surface);
	border-radius: var(--tri-radius-100);
	padding: var(--tri-space-4) var(--tri-space-10);
}

.tri-tr-outcome__body {
	padding: var(--tri-space-20) var(--tri-space-22);
	display: grid;
	gap: var(--tri-space-10);
}

.tri-tr-outcome__row {
	display: flex;
	align-items: center;
	gap: var(--tri-space-14);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-12);
	padding: var(--tri-space-14) var(--tri-space-16);
	min-width: 0;
}

.tri-tr-outcome__icon {
	width: 44px;
	height: 54px;
	flex-shrink: 0;
	border-radius: var(--tri-radius-6);
	background: var(--tri-color-surface-edf2fd);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tri-color-navy);
}

.tri-tr-outcome__text {
	min-width: 0;
}

.tri-tr-outcome__title {
	display: block;
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	line-height: var(--tri-lh-1-3);
}

.tri-tr-outcome__note {
	display: block;
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted-soft);
	margin-top: var(--tri-space-3);
	line-height: var(--tri-lh-1-4);
}

.tri-tr-outcome__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tri-space-12);
	flex-wrap: wrap;
	margin: 0 var(--tri-space-22) var(--tri-space-20);
	padding-block-start: var(--tri-space-14);
	border-block-start: var(--tri-border-width) solid var(--tri-color-divider);
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted);
}

.tri-tr-outcome__link {
	color: var(--tri-color-navy);
	font-weight: var(--tri-fw-800);
}

/* Полоса доверия под первым экраном — выводится, если её заполнили. */
.tri-tr-trust {
	position: relative;
	border-block-start: var(--tri-border-width) solid rgba(255, 255, 255, 0.14);
	margin-block-start: var(--tri-space-32);
}

.tri-tr-trust__list {
	list-style: none;
	margin: 0;
	padding: var(--tri-space-18) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-12) var(--tri-space-28);
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-on-dark-c8cdd6);
}

/* ====================================================================
 * 3. КОМУ НУЖНА ПРОГРАММА
 * reference: надзаголовок, крупный заголовок, вводное описание, карточки
 * с нумерацией и значком, тёмный акцент со сноской ниже
 * ================================================================== */

.tri-tr-audience__intro {
	max-width: 760px;
}

.tri-tr-audience__list {
	list-style: none;
	margin: var(--tri-space-40) 0 0;
	padding: 0;
	display: grid;
	gap: var(--tri-space-14);
}

/* reference: #FAFBFF, рамка rgba(18,41,92,.12), радиус 18, отступ 28. */
.tri-tr-audience__card {
	background: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.12);
	border-radius: var(--tri-radius-18);
	padding: var(--tri-space-26);
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

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

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

/* Номер — часть оформления: порядок задаёт сам список. */
.tri-tr-audience__icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: var(--tri-radius-12);
	background: var(--tri-color-navy);
	color: var(--tri-color-white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tri-tr-audience__title {
	font-size: var(--tri-fs-20);
	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);
	margin: var(--tri-space-24) 0 0;
}

.tri-tr-audience__text {
	font-size: var(--tri-fs-14-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin: var(--tri-space-10) 0 0;
}

/* reference: тёмная плашка с жёлтой чертой слева — отдельный нижний
   акцент для периодичности обучения. */
.tri-tr-audience__note {
	display: flex;
	align-items: center;
	gap: var(--tri-space-20);
	flex-wrap: wrap;
	background: var(--tri-color-navy);
	border-radius: var(--tri-radius-16);
	padding: var(--tri-space-22) var(--tri-space-26);
	margin-top: var(--tri-space-20);
}

.tri-tr-audience__note-bar {
	width: 4px;
	align-self: stretch;
	min-height: 40px;
	border-radius: var(--tri-radius-4);
	background: var(--tri-color-accent);
	flex-shrink: 0;
}

.tri-tr-audience__note-text {
	flex: 1 1 320px;
	min-width: 0;
	font-size: var(--tri-fs-16);
	line-height: var(--tri-lh-1-45);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	margin: 0;
}

.tri-tr-audience__note-action {
	flex-shrink: 0;
}

/* ====================================================================
 * 4. РЕЗУЛЬТАТ — СВЕТЛАЯ И ТЁМНАЯ КАРТОЧКИ
 * reference: слева светлая карточка «Слушатель», справа тёмно-синяя
 * «Работодатель»; у каждой значок роли и галочки в списке
 * ================================================================== */

.tri-tr-result__grid {
	display: grid;
	gap: var(--tri-space-20);
	margin-top: var(--tri-space-32);
}

.tri-tr-result__card {
	border-radius: var(--tri-radius-18);
	padding: var(--tri-space-26);
	min-width: 0;
}

.tri-tr-result__card--light {
	background: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.12);
}

.tri-tr-result__card--dark {
	background: var(--tri-color-navy);
	border: var(--tri-border-width) solid var(--tri-color-navy);
	color: var(--tri-color-white);
}

.tri-tr-result__head {
	display: flex;
	align-items: center;
	gap: var(--tri-space-14);
	padding-block-end: var(--tri-space-18);
	border-block-end: var(--tri-border-width) solid var(--tri-color-divider);
}

.tri-tr-result__card--dark .tri-tr-result__head {
	border-block-end-color: rgba(255, 255, 255, 0.14);
}

.tri-tr-result__role {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: var(--tri-radius-12);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tri-color-navy);
	color: var(--tri-color-white);
}

.tri-tr-result__card--dark .tri-tr-result__role {
	background: var(--tri-color-accent);
	color: var(--tri-color-navy);
}

.tri-tr-result__col-title {
	font-size: var(--tri-fs-20);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-n0-012);
	color: var(--tri-color-ink);
	margin: 0;
}

.tri-tr-result__card--dark .tri-tr-result__col-title {
	color: var(--tri-color-white);
}

.tri-tr-result__items {
	list-style: none;
	margin: var(--tri-space-8) 0 0;
	padding: 0;
}

.tri-tr-result__items li {
	display: flex;
	align-items: flex-start;
	gap: var(--tri-space-12);
	padding: var(--tri-space-14) 0;
	border-block-end: var(--tri-border-width) solid var(--tri-color-divider);
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-ink-secondary);
}

.tri-tr-result__card--dark .tri-tr-result__items li {
	border-block-end-color: rgba(255, 255, 255, 0.14);
	color: var(--tri-color-on-dark-c8cdd6);
}

.tri-tr-result__items li:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.tri-tr-result__check {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border-radius: var(--tri-radius-circle);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tri-color-surface-edf2fd);
	color: var(--tri-color-navy);
}

.tri-tr-result__card--dark .tri-tr-result__check {
	background: rgba(255, 255, 255, 0.12);
	color: var(--tri-color-accent);
}

/* ====================================================================
 * 5. ПРОГРАММА КУРСА
 * reference: слева прилипающая панель со сводкой и полосой положения,
 * справа модули-аккордеон; одновременно раскрыт один
 * ================================================================== */

.tri-tr-program__grid {
	display: grid;
	gap: var(--tri-space-32);
	align-items: start;
}

.tri-tr-program__panel {
	min-width: 0;
}

/* reference: тёмная панель сводки, радиус 16, отступ 24. */
.tri-tr-summary {
	background: var(--tri-color-navy);
	border-radius: var(--tri-radius-16);
	padding: var(--tri-space-24);
	margin-top: var(--tri-space-26);
	color: var(--tri-color-white);
}

/* Плиток может быть одна или две: объём выводится только когда он
   складывается из всех модулей. auto-fit не даст пустого столбца. */
.tri-tr-summary__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--tri-space-10);
}

.tri-tr-summary__tile {
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-12) var(--tri-space-14);
	min-width: 0;
}

.tri-tr-summary__value {
	display: block;
	font-size: var(--tri-fs-22);
	font-weight: var(--tri-fw-800);
	line-height: var(--tri-lh-1);
	color: var(--tri-color-white);
	font-variant-numeric: tabular-nums lining-nums;
	overflow-wrap: anywhere;
}

.tri-tr-summary__label {
	display: block;
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-on-dark-c8cdd6);
	margin-top: var(--tri-space-6);
}

.tri-tr-summary__state {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tri-space-12);
	margin-top: var(--tri-space-18);
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-on-dark-c8cdd6);
}

.tri-tr-summary__state-value {
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-white);
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}

.tri-tr-summary__track {
	height: 6px;
	border-radius: var(--tri-radius-100);
	background: rgba(255, 255, 255, 0.14);
	margin-top: var(--tri-space-8);
	overflow: hidden;
}

.tri-tr-summary__track > span {
	display: block;
	height: 100%;
	border-radius: var(--tri-radius-100);
	background: var(--tri-color-accent);
	transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tri-tr-summary__hint {
	font-size: var(--tri-fs-12);
	line-height: var(--tri-lh-1-45);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-on-dark-9aa1ae);
	margin: var(--tri-space-8) 0 0;
}

.tri-tr-program__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-10);
	min-width: 0;
}

.tri-tr-module {
	background: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-14);
	overflow: hidden;
	transition: border-color 0.3s ease;
}

.tri-tr-module.is-open {
	border-color: var(--tri-color-navy);
}

.tri-tr-module__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.tri-tr-module__button {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--tri-space-14);
	flex-wrap: wrap;
	background: none;
	border: 0;
	cursor: pointer;
	padding: var(--tri-space-18) var(--tri-space-20);
	text-align: start;
	font-family: inherit;
	color: inherit;
}

.tri-tr-module__tag {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-muted-soft);
	flex-shrink: 0;
}

.tri-tr-module__title {
	flex: 1 1 220px;
	min-width: 0;
	font-size: var(--tri-fs-16-5);
	line-height: var(--tri-lh-1-35);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

.tri-tr-module__hours {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted-soft);
	white-space: nowrap;
}

/* reference: круглый значок «плюс», поворачивающийся в «крестик». */
.tri-tr-module__sign {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: var(--tri-radius-circle);
	border: 1.5px solid var(--tri-color-border-c9cdd5);
	background: var(--tri-color-white);
	color: var(--tri-color-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.tri-tr-module__button[aria-expanded="true"] .tri-tr-module__sign {
	transform: rotate(45deg);
	background: var(--tri-color-navy);
	border-color: var(--tri-color-navy);
	color: var(--tri-color-white);
}

.tri-tr-module__panel {
	padding: 0 var(--tri-space-20) var(--tri-space-20);
}

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

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

.tri-tr-module__tags li {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-navy);
	background: var(--tri-color-surface-edf2fd);
	border-radius: var(--tri-radius-100);
	padding: var(--tri-space-5) var(--tri-space-11);
}

/* ====================================================================
 * 6. СТОИМОСТЬ И РАСЧЁТ
 * reference: слева заголовок, описание и условия, справа тёмно-синяя
 * панель с ползунком и итоговой суммой
 * ================================================================== */

.tri-tr-price__grid {
	display: grid;
	gap: var(--tri-space-32);
	align-items: start;
}

.tri-tr-price__intro {
	min-width: 0;
}

.tri-tr-price__notes {
	list-style: none;
	margin: var(--tri-space-24) 0 0;
	padding: 0;
	display: grid;
	gap: var(--tri-space-10);
}

.tri-tr-price__notes li {
	position: relative;
	padding-inline-start: var(--tri-space-18);
	font-size: var(--tri-fs-14-5);
	line-height: var(--tri-lh-1-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-ink-secondary);
}

.tri-tr-price__notes li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: var(--tri-radius-circle);
	background: var(--tri-color-navy);
}

/* reference: тёмная панель расчёта, радиус 20, отступ 36. */
.tri-tr-calc {
	background: var(--tri-color-navy);
	border-radius: var(--tri-radius-20);
	padding: var(--tri-space-26);
	color: var(--tri-color-white);
	display: grid;
	gap: var(--tri-space-26);
	min-width: 0;
}

.tri-tr-calc__field {
	min-width: 0;
}

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

.tri-tr-calc__row label {
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-on-dark-c8cdd6);
}

.tri-tr-calc__value {
	font-size: var(--tri-fs-16);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-white);
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}

.tri-tr-calc__range {
	width: 100%;
	margin-top: var(--tri-space-12);
	accent-color: var(--tri-color-white);
}

/* Подписи концов шкалы: «1» и «10+». Это не отдельный контент, а
   разметка самой шкалы, поэтому значения приходят из настроек расчёта. */
.tri-tr-calc__scale {
	display: flex;
	justify-content: space-between;
	gap: var(--tri-space-12);
	margin: var(--tri-space-6) 0 0;
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-on-dark-9aa1ae);
	font-variant-numeric: tabular-nums lining-nums;
}

.tri-tr-calc__total {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-block-start: var(--tri-space-22);
	border-block-start: var(--tri-border-width) solid rgba(255, 255, 255, 0.14);
}

.tri-tr-calc__total-label {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-on-dark-c8cdd6);
}

.tri-tr-calc__amount {
	font-size: var(--tri-fs-30);
	font-weight: var(--tri-fw-800);
	line-height: var(--tri-lh-1-15);
	letter-spacing: var(--tri-ls-n0-01);
	color: var(--tri-color-white);
	margin: var(--tri-space-8) 0 0;
	font-variant-numeric: tabular-nums lining-nums;
	overflow-wrap: anywhere;
}

/* За порогом на месте суммы стоит фраза, а не число: кегль цифры на
   длинной строке выглядел бы обрубленным. */
.tri-tr-calc__amount.is-custom {
	font-size: var(--tri-fs-20);
	font-weight: var(--tri-fw-700);
	line-height: var(--tri-lh-1-3);
}

.tri-tr-calc__hint {
	font-size: var(--tri-fs-12-5);
	line-height: var(--tri-lh-1-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-on-dark-9aa1ae);
	margin: var(--tri-space-6) 0 0;
}

.tri-tr-calc__action {
	margin-top: var(--tri-space-20);
}

/* ====================================================================
 * 7. МАРШРУТ ОБУЧЕНИЯ
 * reference: этапы на одной кривой; нажатие подсвечивает точку,
 * дотягивает линию до неё и меняет карточку справа
 * ================================================================== */

.tri-tr-steps__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--tri-space-24);
	flex-wrap: wrap;
}

.tri-tr-steps__hint {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted-soft);
}

.tri-tr-journey {
	display: grid;
	gap: var(--tri-space-24);
	align-items: start;
	margin-top: var(--tri-space-28);
}

.tri-tr-journey__canvas {
	position: relative;
	min-width: 0;
}

/* Кривая появляется только там, где на неё хватает ширины: ниже 1024px
   этапы читаются вертикальным списком, а не сплющенной загогулиной. */
.tri-tr-journey__svg {
	display: none;
}

.tri-tr-journey__track {
	fill: none;
	stroke: var(--tri-color-route-track);
	stroke-width: 10;
	stroke-linecap: round;
}

.tri-tr-journey__progress {
	fill: none;
	stroke: var(--tri-color-navy);
	stroke-width: 4;
	stroke-linecap: round;
	transition: stroke-dasharray 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tri-tr-journey__steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- Вертикальный маршрут: телефон, планшет и запасной режим --- */

.tri-tr-journey .tri-process-step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--tri-space-14);
	padding: 0 0 var(--tri-space-20) var(--tri-space-4);
}

/* Рельс между точками. У последнего этапа его нет: линия, уходящая
   в пустоту после последнего шага, обещала бы шаг, которого нет. */
.tri-tr-journey .tri-process-step:not(:last-child)::before {
	content: "";
	position: absolute;
	inset-inline-start: 12px;
	top: 22px;
	bottom: 0;
	width: 2px;
	background: var(--tri-color-route-track);
}

.tri-tr-journey .tri-process-step__dot {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	padding: 0;
	border-radius: var(--tri-radius-circle);
	border: 3px solid var(--tri-color-white);
	box-shadow: 0 0 0 2px var(--tri-color-border-c9cdd5);
	background: var(--tri-color-white);
	cursor: pointer;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.tri-tr-journey .tri-process-step.is-active .tri-process-step__dot {
	background: var(--tri-color-accent);
	box-shadow: 0 0 0 2px var(--tri-color-accent);
}

.tri-tr-journey .tri-process-step__body {
	display: block;
	min-width: 0;
	cursor: pointer;
}

.tri-tr-journey .tri-process-step__num {
	display: block;
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-19);
	font-weight: var(--tri-fw-800);
	line-height: var(--tri-lh-1);
	color: var(--tri-color-border-c9cdd5);
	font-variant-numeric: tabular-nums lining-nums;
	transition: color 0.3s ease;
}

.tri-tr-journey .tri-process-step.is-active .tri-process-step__num {
	color: var(--tri-color-warn-text-strong);
}

.tri-tr-journey .tri-process-step__name {
	display: block;
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-25);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin-top: var(--tri-space-7);
	transition: color 0.3s ease;
}

.tri-tr-journey .tri-process-step.is-active .tri-process-step__name {
	color: var(--tri-color-navy);
}

/* --- Карточка подробностей выбранного этапа --- */

.tri-tr-journey__detail {
	min-width: 0;
}

/* [hidden] обязан побеждать display из класса: у правила с классом
   специфичность выше, чем у общего правила браузера для [hidden], и
   без этой строки скрытые карточки этапов рисовались бы все сразу. */
.tri-tr-journey__panel[hidden],
.tri-tr-platform__panel[hidden] {
	display: none;
}

.tri-tr-journey__panel {
	background: var(--tri-color-navy);
	border-radius: var(--tri-radius-18);
	padding: var(--tri-space-26);
	color: var(--tri-color-white);
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tri-tr-journey__counter {
	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-accent);
	font-variant-numeric: tabular-nums lining-nums;
}

.tri-tr-journey__title {
	font-size: var(--tri-fs-22);
	line-height: var(--tri-lh-1-2);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-n0-012);
	color: var(--tri-color-white);
	margin: var(--tri-space-14) 0 0;
}

.tri-tr-journey__text {
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-on-dark-c8cdd6);
	margin: var(--tri-space-12) 0 0;
}

.tri-tr-journey__points {
	list-style: none;
	margin: var(--tri-space-20) 0 0;
	padding-block-start: var(--tri-space-20);
	padding-inline: 0;
	border-block-start: var(--tri-border-width) solid rgba(255, 255, 255, 0.14);
	display: grid;
	gap: var(--tri-space-8);
}

.tri-tr-journey__points li {
	display: flex;
	align-items: flex-start;
	gap: var(--tri-space-9);
	font-size: var(--tri-fs-13-5);
	line-height: var(--tri-lh-1-45);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-white);
}

.tri-tr-journey__points li > span:first-child {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--tri-color-accent);
	display: flex;
}

/* ====================================================================
 * 8. ПЛАТФОРМА TRIADA EXPERT (тёмная секция)
 * reference: надзаголовок, крупный заголовок, переключатель сценариев,
 * наглядный экран платформы и примечание о корпоративном кабинете
 * ================================================================== */

.tri-tr-platform__badge {
	display: block;
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-08);
	text-transform: uppercase;
	color: var(--tri-color-white);
}

.tri-tr-platform__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--tri-space-32);
	flex-wrap: wrap;
}

.tri-tr-platform__title {
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-28);
	line-height: var(--tri-lh-1-15);
	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;
	max-width: 24ch;
}

.tri-tr-platform__lead {
	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-14) 0 0;
	max-width: 64ch;
}

/* reference: переключатель-пилюля. Разметка — общий контракт вкладок
   темы (role=tablist/tab), поэтому оформление цепляется за состояние
   aria-selected, а не за собственный класс «активна». */
.tri-tr-platform__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-8);
}

.tri-tr-platform__tab {
	background: transparent;
	border: var(--tri-border-width) solid rgba(255, 255, 255, 0.3);
	color: var(--tri-color-on-dark-c8cdd6);
	font-family: inherit;
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-800);
	padding: var(--tri-space-11) var(--tri-space-22);
	border-radius: var(--tri-radius-100);
	cursor: pointer;
	transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease;
}

.tri-tr-platform__tab:hover {
	border-color: var(--tri-color-white);
	color: var(--tri-color-white);
}

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

.tri-tr-platform__panel {
	display: grid;
	gap: var(--tri-space-28);
	align-items: center;
	margin-top: var(--tri-space-32);
}

.tri-tr-platform__side {
	min-width: 0;
}

.tri-tr-platform__kicker {
	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-accent);
}

.tri-tr-platform__subtitle {
	font-size: var(--tri-fs-24);
	line-height: var(--tri-lh-1-2);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-n0-012);
	color: var(--tri-color-white);
	margin: var(--tri-space-12) 0 0;
}

.tri-tr-platform__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-12) 0 0;
}

/* Примечание обязательное: корпоративный кабинет не нужен, чтобы
   обучить одного человека. */
.tri-tr-platform__note {
	display: block;
	font-size: var(--tri-fs-13-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-on-dark-9aa1ae);
	margin: var(--tri-space-28) 0 0;
	padding-block-start: var(--tri-space-18);
	border-block-start: var(--tri-border-width) solid rgba(255, 255, 255, 0.14);
	max-width: 72ch;
}

/* --- Макет экрана платформы --- */

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

.tri-tr-screen__bar {
	display: flex;
	align-items: center;
	gap: var(--tri-space-7);
	background: var(--tri-color-surface-fafbff);
	border-block-end: var(--tri-border-width) solid var(--tri-color-divider);
	padding: var(--tri-space-10) var(--tri-space-16);
}

.tri-tr-screen__dot {
	width: 9px;
	height: 9px;
	flex-shrink: 0;
	border-radius: var(--tri-radius-circle);
	background: var(--tri-color-border-e2e5ea);
}

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

.tri-tr-screen__host-sep {
	margin-inline: var(--tri-space-5);
}

.tri-tr-screen__body {
	list-style: none;
	margin: 0;
	padding: var(--tri-space-18) var(--tri-space-20);
	display: grid;
	gap: var(--tri-space-7);
}

.tri-tr-screen__row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--tri-space-12);
	border: var(--tri-border-width) solid var(--tri-color-divider);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-10) var(--tri-space-14);
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
}

.tri-tr-screen__mark {
	width: 8px;
	height: 8px;
	border-radius: var(--tri-radius-circle);
	background: var(--tri-color-border-c9cdd5);
}

.tri-tr-screen__row.is-current .tri-tr-screen__mark {
	background: var(--tri-color-success-2fa36b);
}

.tri-tr-screen__text {
	min-width: 0;
}

.tri-tr-screen__track {
	grid-column: 1 / -1;
	height: 6px;
	border-radius: var(--tri-radius-100);
	background: var(--tri-color-divider);
	overflow: hidden;
}

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

.tri-tr-screen__row.is-current .tri-tr-screen__track > span {
	background: var(--tri-color-success-2fa36b);
}

/* ====================================================================
 * 9. КУРС В ПОДАРОК И МЕСТО ПОД ФОРМУ
 * reference: тёмно-синяя карточка со скруглением, сеткой 56x56 и
 * фотографией-подложкой; справа — форма заявки
 * ================================================================== */

.tri-tr-gift__card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	gap: var(--tri-space-24);
	background-color: var(--tri-color-navy);
	border-radius: var(--tri-radius-24);
	padding: var(--tri-space-32);
	align-items: center;
}

.tri-tr-gift__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
}

/* Фотография лежит под содержимым и приглушена: в макете она задаёт
   настроение, а не спорит с текстом. */
.tri-tr-gift__photo {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.48;
	pointer-events: none;
}

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

.tri-tr-gift__body {
	min-width: 0;
}

.tri-tr-gift__badge {
	display: inline-block;
	background: var(--tri-color-accent);
	color: var(--tri-color-navy);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-08);
	text-transform: uppercase;
	border-radius: var(--tri-radius-100);
	padding: var(--tri-space-5) var(--tri-space-13);
}

.tri-tr-gift__title {
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-26);
	line-height: var(--tri-lh-1-2);
	font-weight: var(--tri-fw-700);
	letter-spacing: var(--tri-ls-n0-014);
	color: var(--tri-color-white);
	margin: var(--tri-space-18) 0 0;
}

.tri-tr-gift__text {
	font-size: var(--tri-fs-16);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-on-dark-c8cdd6);
	margin: var(--tri-space-14) 0 0;
	max-width: 52ch;
}

.tri-tr-gift__actions {
	margin-top: var(--tri-space-24);
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-12);
}

.tri-tr-gift__note {
	font-size: var(--tri-fs-12-5);
	line-height: var(--tri-lh-1-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-on-dark-9aa1ae);
	margin: var(--tri-space-18) 0 0;
}

.tri-tr-gift__aside {
	min-width: 0;
}

/* Белая карточка вокруг места под форму. Что именно окажется внутри —
   форма Contact Form 7 или каноническая форма темы — решает слот. */
.tri-tr-gift__panel {
	background: var(--tri-color-white);
	border-radius: var(--tri-radius-16);
	padding: var(--tri-space-24);
	box-shadow: var(--tri-shadow-deep-56-4);
	min-width: 0;
}

.tri-tr-gift__panel .tri-form-slot__title {
	font-size: var(--tri-fs-18);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-n0-012);
	color: var(--tri-color-ink);
	margin: 0 0 var(--tri-space-14);
}

.tri-tr-gift__panel .tri-form-slot {
	min-width: 0;
}

/* ====================================================================
 * 10. ДОКУМЕНТЫ, ЛИЦЕНЗИЯ, AI, ПОЧЕМУ МЫ
 * ================================================================== */

.tri-tr-ai__list,
.tri-tr-why__list,
/*
 * Документы — вертикальные блоки: сверху образец документа, под ним
 * название и пояснение (правки 14.09). Образец задаётся в админке
 * полем «Образец документа»; без него блок просто остаётся текстовым.
 */
.tri-tr-docs__list {
	list-style: none;
	margin: var(--tri-space-32) 0 0;
	padding: 0;
	display: grid;
	gap: var(--tri-space-20);
}

.tri-tr-docs__card {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-14);
}

.tri-tr-docs__frame {
	background: var(--tri-color-surface-f5f8ff);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-12);
	/* Лист документа: пропорция листа, картинка целиком, без обрезки. */
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.tri-tr-docs__frame img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	border-radius: var(--tri-radius-6);
}

.tri-tr-ai__card,
.tri-tr-why__card,
.tri-tr-docs__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-tr-ai__title,
.tri-tr-why__title,
.tri-tr-docs__title {
	font-size: var(--tri-fs-17);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin: 0;
}

.tri-tr-ai__text,
.tri-tr-why__text,
.tri-tr-docs__text {
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin: var(--tri-space-10) 0 0;
}
/* ====================================================================
 * 10. ДОКУМЕНТЫ И ЛИЦЕНЗИЯ
 * ================================================================== */

.tri-tr-license {
	display: grid;
	gap: var(--tri-space-24);
	margin-top: var(--tri-space-24);
	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-surface-f5f8ff);
	align-items: center;
}

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

.tri-tr-license__title {
	font-size: var(--tri-fs-18);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin: 0;
}

.tri-tr-license__text {
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin: var(--tri-space-10) 0 0;
}

.tri-tr-license__link {
	display: inline-block;
	margin-top: var(--tri-space-12);
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-link-2a56b8);
	text-decoration: none;
}

/* ====================================================================
 * 11. ЭКСПЕРТНЫЙ БЛОК: ОГЛАВЛЕНИЕ + ТЕКСТ
 * ================================================================== */

.tri-tr-article__grid {
	display: grid;
	gap: var(--tri-space-44);
	align-items: start;
}

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

.tri-tr-toc__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-tr-toc__list {
	list-style: none;
	margin: var(--tri-space-14) 0 0;
	padding: 0;
	display: grid;
	gap: var(--tri-space-4);
}

.tri-tr-toc__link {
	display: block;
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-ink-secondary);
	padding: var(--tri-space-8) 0 var(--tri-space-8) var(--tri-space-16);
	border-inline-start: 2px solid transparent;
	text-decoration: none;
	line-height: var(--tri-lh-1-35);
}

.tri-tr-toc__link:hover,
.tri-tr-toc__link:focus-visible {
	color: var(--tri-color-ink);
	border-inline-start-color: var(--tri-color-accent);
}

.tri-tr-ask {
	margin-top: var(--tri-space-24);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-20);
	background: var(--tri-color-surface-f5f8ff);
}

.tri-tr-ask__title {
	font-size: var(--tri-fs-15);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

.tri-tr-ask__text {
	font-size: var(--tri-fs-13-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin: var(--tri-space-8) 0 0;
}

.tri-tr-ask__action {
	margin-top: var(--tri-space-14);
}

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

.tri-tr-article h2 {
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-26);
	font-weight: var(--tri-fw-800);
	line-height: var(--tri-lh-1-25);
	color: var(--tri-color-ink);
	margin: var(--tri-space-36) 0 var(--tri-space-14);
	scroll-margin-top: 136px;
}

.tri-tr-article h2:first-child {
	margin-top: 0;
}

.tri-tr-article p {
	margin: 0 0 var(--tri-space-16);
}

.tri-tr-article ul,
.tri-tr-article ol {
	margin: 0 0 var(--tri-space-16);
	padding-inline-start: var(--tri-space-20);
	display: grid;
	gap: var(--tri-space-8);
}

.tri-tr-article img {
	max-width: 100%;
	height: auto;
	border-radius: var(--tri-radius-14);
}


/* ====================================================================
 * 12. КТО ОТВЕЧАЕТ ЗА ПРОГРАММУ
 * reference: крупная карточка ответственного эксперта и до двух
 * карточек рядом; бело-сине-жёлтая система
 * ================================================================== */

/* Вводный абзац и нижняя плашка экспертного блока (правки 14.09). */
.tri-tr-experts__lead {
	font-size: var(--tri-fs-17);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin: var(--tri-space-14) 0 0;
	max-width: var(--tri-measure);
}

.tri-tr-experts__note {
	margin: var(--tri-space-24) 0 0;
	padding: var(--tri-space-18) var(--tri-space-22);
	background: var(--tri-color-surface-f5f8ff);
	border-left: 3px solid var(--tri-color-accent);
	border-radius: var(--tri-radius-10);
	font-size: var(--tri-fs-15);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-ink);
}

.tri-tr-experts__grid {
	display: grid;
	gap: var(--tri-space-20);
	align-items: start;
	margin-top: var(--tri-space-32);
}

.tri-tr-expert {
	display: flex;
	gap: var(--tri-space-20);
	align-items: center;
	min-width: 0;
	scroll-margin-top: 136px;
}

/* Основная карточка — на голубой подложке с синей чертой слева. */
.tri-tr-expert--primary {
	background: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.12);
	border-inline-start: 3px solid var(--tri-color-navy);
	border-radius: var(--tri-radius-18);
	padding: var(--tri-space-26);
}

.tri-tr-expert--secondary {
	background: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-18) var(--tri-space-20);
	gap: var(--tri-space-14);
}

.tri-tr-expert__photo {
	width: 120px;
	height: 120px;
	flex-shrink: 0;
	border-radius: var(--tri-radius-circle);
	overflow: hidden;
	background: var(--tri-color-surface-edf2fd);
}

.tri-tr-expert--secondary .tri-tr-expert__photo {
	width: 72px;
	height: 72px;
}

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

.tri-tr-expert__body {
	min-width: 0;
}

.tri-tr-expert__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-muted-soft);
}

.tri-tr-expert__name {
	font-size: var(--tri-fs-20);
	line-height: var(--tri-lh-1-25);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin: var(--tri-space-6) 0 0;
}

.tri-tr-expert--secondary .tri-tr-expert__name {
	font-size: var(--tri-fs-16);
	margin: 0;
}

.tri-tr-expert__role {
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-600);
	line-height: var(--tri-lh-1-45);
	color: var(--tri-color-muted);
	margin: var(--tri-space-4) 0 0;
}

.tri-tr-expert__spec {
	font-size: var(--tri-fs-14);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin: var(--tri-space-10) 0 0;
	max-width: 56ch;
}

/* Жёлтая метка — единственный жёлтый элемент блока: она отмечает
   именно основную карточку. */
.tri-tr-expert__tag {
	display: inline-block;
	margin-top: var(--tri-space-12);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-navy);
	background: var(--tri-color-accent);
	border-radius: var(--tri-radius-100);
	padding: var(--tri-space-4) var(--tri-space-11);
}

.tri-tr-experts__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--tri-space-12);
	min-width: 0;
}

/* ====================================================================
 * 13. ВОПРОСЫ
 * reference: слева компактная вводная карточка, справа вертикальные
 * блоки вопросов; одновременно раскрыт один ответ
 * ================================================================== */

.tri-tr-faq__grid {
	display: grid;
	gap: var(--tri-space-24);
	align-items: start;
}

.tri-tr-faq__intro {
	background: var(--tri-color-white);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.1);
	border-radius: var(--tri-radius-18);
	padding: var(--tri-space-26);
	min-width: 0;
}

.tri-tr-faq__title {
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-24);
	line-height: var(--tri-lh-1-15);
	font-weight: var(--tri-fw-700);
	letter-spacing: var(--tri-ls-n0-018, -0.018em);
	color: var(--tri-color-ink);
	margin: 0;
}

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

.tri-tr-faq__action {
	margin-top: var(--tri-space-22);
}

.tri-tr-faq__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-10);
	min-width: 0;
}

.tri-tr-faq__item {
	background: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-14);
	overflow: hidden;
	transition: border-color 0.3s ease;
}

.tri-tr-faq__item:has(.tri-tr-faq__button[aria-expanded="true"]) {
	border-color: var(--tri-color-navy);
}

.tri-tr-faq__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.tri-tr-faq__button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tri-space-18);
	background: none;
	border: 0;
	cursor: pointer;
	padding: var(--tri-space-20) var(--tri-space-22);
	text-align: start;
	font-family: inherit;
	font-size: var(--tri-fs-16);
	line-height: var(--tri-lh-1-4);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

.tri-tr-faq__sign {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: var(--tri-radius-circle);
	border: 1.5px solid var(--tri-color-border-c9cdd5);
	background: var(--tri-color-white);
	color: var(--tri-color-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.tri-tr-faq__button[aria-expanded="true"] .tri-tr-faq__sign {
	transform: rotate(45deg);
	background: var(--tri-color-navy);
	border-color: var(--tri-color-navy);
	color: var(--tri-color-white);
}

.tri-tr-faq__answer {
	padding: 0 var(--tri-space-22) var(--tri-space-22);
}

.tri-tr-faq__answer > p {
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-65);
	color: var(--tri-color-ink-secondary);
	margin: 0;
	max-width: 72ch;
}
/* ====================================================================
 * 13. СВЯЗАННЫЕ ПРОГРАММЫ И МАТЕРИАЛЫ
 * ================================================================== */

.tri-tr-related__list {
	list-style: none;
	margin: var(--tri-space-32) 0 0;
	padding: 0;
	display: grid;
	gap: var(--tri-space-16);
}

.tri-tr-related__card {
	display: grid;
	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;
}

.tri-tr-related__card:hover,
.tri-tr-related__card:focus-visible {
	border-color: var(--tri-color-navy);
}

.tri-tr-related__tag {
	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-muted-soft);
}

.tri-tr-related__title {
	font-size: var(--tri-fs-17);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

.tri-tr-related__text {
	font-size: var(--tri-fs-14-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
}

.tri-tr-related__more {
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-link-2a56b8);
}

.tri-tr-materials {
	margin-top: var(--tri-space-32);
}

.tri-tr-materials__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-tr-materials__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--tri-space-8);
}

.tri-tr-materials__list a {
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-link-2a56b8);
	text-decoration: none;
}


/* ====================================================================
 * 15. ФИНАЛЬНЫЙ CTA
 * ================================================================== */

/* Отступ снизу задан классом секции (pb-104), а не здесь: раньше у
   блока стоял pb-0, и панель упиралась в подвал. */

/* ====================================================================
 * 16. ПЛАНШЕТ И ДЕСКТОП
 * ================================================================== */

@media (min-width: 768px) {
	.tri-tr-hero__title {
		font-size: var(--tri-fs-36);
	}

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

	.tri-tr-title {
		font-size: var(--tri-fs-32);
	}

	.tri-tr-platform__title {
		font-size: var(--tri-fs-34);
	}

	.tri-tr-audience__list,
	.tri-tr-ai__list,
	.tri-tr-why__list,
	.tri-tr-related__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Каждый документ — свой вертикальный блок в ряд. */
	.tri-tr-docs__list {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	}

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

	.tri-tr-gift__card,
	.tri-tr-calc {
		padding: var(--tri-space-40);
	}

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

@media (min-width: 1024px) {
	.tri-tr-hero {
		padding-block:
			calc(var(--tri-space-26) * var(--tri-section-scale))
			calc(var(--tri-space-64) * var(--tri-section-scale));
	}

	/* reference: 54fr / 46fr */
	.tri-tr-hero__grid {
		grid-template-columns: 54fr 46fr;
		gap: var(--tri-space-48);
		margin-top: var(--tri-space-44);
	}

	.tri-tr-hero__title {
		font-size: var(--tri-fs-44);
	}

	.tri-tr-hero__lead {
		font-size: var(--tri-fs-17-5);
	}

	/* Показателей три в ряд, и подпись в них — не число, а слово
	   («Удостоверение»). Пока колонка узкая, кегль ниже: перенос
	   посреди слова читается хуже, чем чуть меньший шрифт. */
	.tri-tr-hero__facts {
		max-width: none;
	}

	.tri-tr-fact {
		padding: var(--tri-space-14) var(--tri-space-12);
	}

	.tri-tr-fact__value {
		font-size: var(--tri-fs-17);
	}

	.tri-tr-hero__aside {
		justify-self: end;
		width: 100%;
		max-width: 460px;
	}

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

	.tri-tr-platform__title {
		font-size: var(--tri-fs-42);
	}

	.tri-tr-audience__list,
	.tri-tr-why__list,
	.tri-tr-docs__list,
	.tri-tr-ai__list,
	.tri-tr-related__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tri-tr-audience__card {
		padding: var(--tri-space-28);
	}

	.tri-tr-result__card {
		padding: var(--tri-space-32);
	}

	/* reference: 340px + остаток, зазор 48 */
	.tri-tr-program__grid,
	.tri-tr-price__grid {
		grid-template-columns: 340px minmax(0, 1fr);
		gap: var(--tri-space-48);
	}

	/* Панель сводки следует за чтением модулей. */
	.tri-tr-program__panel {
		position: sticky;
		top: 110px;
	}

	.tri-tr-module__button {
		gap: var(--tri-space-20);
		padding: var(--tri-space-18) var(--tri-space-24);
		flex-wrap: nowrap;
	}

	.tri-tr-module__tag {
		width: 84px;
	}

	.tri-tr-module__panel {
		padding: 0 var(--tri-space-24) var(--tri-space-20) 128px;
	}

	/* --- Маршрут: кривая и точки по координатам макета --- */

	.tri-tr-journey {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: var(--tri-space-32);
	}

	.tri-tr-journey__panel {
		min-height: 300px;
		padding: var(--tri-space-28);
	}

	.tri-tr-journey__points {
		margin-top: auto;
	}

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

	.tri-tr-platform__panel {
		grid-template-columns: 1.3fr minmax(0, 1fr);
		gap: var(--tri-space-40);
		margin-top: var(--tri-space-36);
	}

	.tri-tr-screen__body {
		padding: var(--tri-space-18) var(--tri-space-20) var(--tri-space-20);
	}

	/* --- Подарочный блок и форма --- */

	.tri-tr-gift__card {
		grid-template-columns: 1.25fr minmax(0, 1fr);
		gap: var(--tri-space-40);
		padding: var(--tri-space-48);
	}

	.tri-tr-gift__card--plain {
		grid-template-columns: minmax(0, 1fr);
	}

	.tri-tr-gift__title {
		font-size: var(--tri-fs-36);
	}

	.tri-tr-gift__panel {
		padding: var(--tri-space-26);
	}

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

	.tri-tr-experts__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--tri-space-24);
	}

	/* Одна карточка без дополнительных занимает ряд целиком:
	   пустой колонки-заглушки рядом с ней не появляется. */
	.tri-tr-experts__grid--solo {
		grid-template-columns: minmax(0, 1fr);
		max-width: 720px;
	}

	.tri-tr-experts__list {
		grid-template-columns: minmax(0, 1fr);
	}

	/* --- Документы, лицензия, текст --- */

	.tri-tr-license {
		grid-template-columns: 240px minmax(0, 1fr);
	}

	/* reference: сетка «оглавление 230px + материал» — как в статье */
	.tri-tr-article__grid {
		grid-template-columns: 230px minmax(0, 1fr);
	}

	.tri-tr-toc {
		position: sticky;
		top: 136px;
	}

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

	.tri-tr-faq__grid {
		grid-template-columns: 360px minmax(0, 1fr);
		gap: var(--tri-space-40);
	}

	.tri-tr-faq__intro {
		position: sticky;
		top: 110px;
		padding: var(--tri-space-30) var(--tri-space-32);
	}

	.tri-tr-faq__title {
		font-size: var(--tri-fs-30);
	}

	.tri-tr-faq__button {
		padding: var(--tri-space-22) var(--tri-space-26);
		font-size: var(--tri-fs-16-5);
	}

	.tri-tr-faq__answer {
		padding: 0 var(--tri-space-26) var(--tri-space-24);
	}
}

@media (min-width: 1280px) {
	.tri-tr-fact {
		padding: var(--tri-space-14) var(--tri-space-16);
	}

	.tri-tr-fact__value {
		font-size: var(--tri-fs-22);
	}
}

/* Две колонки расчёта — только там, где на них хватает места: между
   1024 и 1280 правая колонка секции сама по себе узкая, и ползунок
   в ней сплющивался бы до нечитаемого. */
@media (min-width: 768px) and (max-width: 1023.98px), (min-width: 1280px) {
	.tri-tr-calc {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: var(--tri-space-40);
		align-items: stretch;
	}

	.tri-tr-calc__total {
		padding-block-start: 0;
		padding-inline-start: var(--tri-space-40);
		border-block-start: 0;
		border-inline-start: var(--tri-border-width) solid rgba(255, 255, 255, 0.14);
	}

	.tri-tr-calc__action {
		margin-top: auto;
	}
}

@media (min-width: 1440px) {
	.tri-tr-hero__aside {
		max-width: 460px;
	}
}

/*
 * КРИВАЯ МАРШРУТА — ТОЛЬКО ОТ 1280px.
 *
 * Подписи этапов — коробки по 170px, а их места заданы долями холста
 * шириной 860. Холст — это колонка слева от карточки подробностей:
 * при контейнере 1192 и карточке 340 с отступом 32 он равен 820px, и
 * подписи ещё сходятся. На 1024 от него остаётся около 604px: те же
 * 170px занимают уже почти треть ширины, подписи наезжают друг на
 * друга и на карточку справа.
 *
 * Поэтому ниже 1280px маршрут показывается вертикальным списком —
 * тем самым, что и на телефоне. Это не запасной режим на случай
 * поломки, а честный вид для ширины, на которой кривая не помещается.
 */
@media (min-width: 1280px) {
	.tri-tr-journey:not(.tri-tr-journey--linear) .tri-tr-journey__canvas {
		height: 420px;
	}

	.tri-tr-journey:not(.tri-tr-journey--linear) .tri-tr-journey__svg {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	.tri-tr-journey:not(.tri-tr-journey--linear) .tri-process-step {
		position: static;
		display: block;
		padding: 0;
	}

	.tri-tr-journey:not(.tri-tr-journey--linear) .tri-process-step::before {
		content: none;
	}

	/* Точка стоит там, где её поставил макет, и никуда не едет:
	   по нажатию она только меняет цвет, а линия дотягивается до неё. */
	.tri-tr-journey:not(.tri-tr-journey--linear) .tri-process-step__dot {
		position: absolute;
		left: var(--tri-step-x);
		top: var(--tri-step-y);
		transform: translate(-50%, -50%);
		margin: 0;
		z-index: 2;
	}

	.tri-tr-journey:not(.tri-tr-journey--linear) .tri-process-step__body {
		position: absolute;
		left: var(--tri-step-lx);
		top: var(--tri-step-ly);
		width: 170px;
	}
}

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