/**
 * Страница услуги.
 *
 * reference: design-reference/услуга.html.
 * Каждое значение помечено комментарием `reference:` — это величина
 * из макета, а не подобранная на глаз.
 *
 * Все размеры desktop совпадают с макетом с 1024px (сетки) и 1280px
 * (вертикальный ритм секций, --tri-section-scale = 1). Ниже сетки
 * складываются, значения отступов масштабируются общим коэффициентом.
 *
 * Порядок секций совпадает с порядком в макете.
 */

/* ====================================================================
 * 1. HERO УСЛУГИ
 * reference: background #EDF2FD + фото на всю секцию + вуаль
 * linear-gradient(90deg, rgba(255,255,255,0.55), rgba(255,255,255,0.18) 46%, transparent)
 * ================================================================== */

.tri-sv-hero {
	position: relative;
	background-color: var(--tri-color-surface-edf2fd);
	overflow: hidden;
}

.tri-sv-hero__bg,
.tri-sv-hero__veil {
	position: absolute;
	inset: 0;
}

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

.tri-sv-hero__veil {
	background-image: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(255, 255, 255, 0.18) 46%,
		rgba(255, 255, 255, 0) 100%
	);
	pointer-events: none;
}

/* reference: padding:18px 0 0 у ряда с крошками */
.tri-sv-hero__crumbs {
	position: relative;
	padding-block-start: var(--tri-space-18);
}

/* Плашка крошек (rgba(255,255,255,0.9), border #DDE0E6, radius 6px,
   padding 8px 14px, 13px/700) описана в компоненте
   assets/css/components/breadcrumbs.css — она снята именно с этого
   макета. Повторять её здесь нельзя: получилась бы двойная рамка. */

/* reference (v3): padding:22px 0 36px */
.tri-sv-hero__body {
	position: relative;
	padding-block: var(--tri-space-22) var(--tri-space-36);
}

/* reference (v3): width:620px; rgba(255,255,255,0.9); radius 20px;
   padding 30px 34px; shadow 0 26px 60px rgba(4,34,92,0.14).
   Панель в v3 уже и компактнее: справа остаётся видна фотография,
   ради которой у секции и есть фон. */
.tri-sv-hero__panel {
	max-width: 620px;
	background-color: rgba(255, 255, 255, 0.9);
	border: var(--tri-border-width) solid rgba(255, 255, 255, 0.9);
	border-radius: var(--tri-radius-20);
	padding: var(--tri-space-30) var(--tri-space-34);
	box-shadow: var(--tri-shadow-navy-60-14);
}

/* reference: 12px/800; ls 0.12em; uppercase; плашка padding 9px 16px */
.tri-sv-hero__eyebrow {
	display: inline-flex;
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-12);
	text-transform: uppercase;
	color: var(--tri-color-ink);
	background-color: rgba(255, 255, 255, 0.9);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-6);
	padding: var(--tri-space-9) var(--tri-space-16);
}

/* reference: 50px/1.12/700; ls -0.028em; margin-top:24px */
.tri-sv-hero__title {
	font-size: clamp(2rem, 1.36rem + 2.5vw, 3.125rem); /* 32px → 50px на 1280px */
	line-height: var(--tri-lh-1-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-028);
	margin: var(--tri-space-24) 0 0;
}

/* reference: 17px/1.6 #3A3F49; margin-top:22px; max-width:64ch */
.tri-sv-hero__lead {
	font-size: var(--tri-fs-17);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
	margin-block-start: var(--tri-space-22);
	max-width: var(--tri-measure);
}

/* reference: 15px/1.6 #5A6270; margin-top:14px; max-width:64ch */
.tri-sv-hero__note {
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-14);
	max-width: var(--tri-measure);
}

/* reference: gap:14px; margin-top:30px */
.tri-sv-hero__actions {
	gap: var(--tri-space-14);
	margin-block-start: var(--tri-space-30);
}

/* reference: полоса фактов — repeat(4,1fr) gap 12px; width 900px;
   padding 0 0 40px */
.tri-sv-hero__facts {
	position: relative;
	display: grid;
	/* На узких экранах факты идут парами: одиночная колонка растягивает
	   короткие значения и превращает полосу в длинный список. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr));
	gap: var(--tri-space-12);
	max-width: 900px;
	padding-block-end: var(--tri-space-40);
	list-style: none;
	margin: 0;
}

/* reference: rgba(255,255,255,0.82); radius 10px; padding 14px 22px */
.tri-sv-hero__fact {
	background-color: rgba(255, 255, 255, 0.82);
	border: var(--tri-border-width) solid rgba(255, 255, 255, 0.9);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-14) var(--tri-space-22);
	min-width: 0;
}

/* reference: 19px/800; line-height:1 */
.tri-sv-hero__fact-value {
	font-size: var(--tri-fs-19);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	line-height: 1;
}

/* reference: 12px/600 #5A6270; margin-top:6px */
.tri-sv-hero__fact-label {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-6);
}

/* ====================================================================
 * 1a. НАВИГАЦИЯ ПО УСЛУГЕ (v3)
 *
 * reference: sticky под шапкой; высота 56px; фон rgba(255,255,255,0.96)
 * с backdrop-filter blur(8px); нижняя граница #EBEDF1; пункты 14px,
 * padding 8px 14px, radius 8px; правая ссылка 13.5px/700 #12295C.
 *
 * Смещение берём из переменной высоты шапки, а не из числа макета:
 * шапка на разных ширинах разной высоты, и жёсткие 118px оставили бы
 * полосу либо под шапкой, либо с щелью под ней.
 * ================================================================== */

.tri-sv-nav {
	position: sticky;
	inset-block-start: var(--tri-header-height);
	/* Высота шапки меняется при сворачивании — едем за ней плавно. */
	transition: inset-block-start var(--tri-duration-28) var(--tri-ease);
	z-index: 40;
	background-color: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	border-block-end: var(--tri-border-width) solid var(--tri-color-divider);
}

.tri-sv-nav__inner {
	display: flex;
	align-items: center;
	gap: var(--tri-space-6);
	min-block-size: 56px;
	overflow-x: auto;
	scrollbar-width: none;
}

/*
 * Полоса горизонтально прокручивается на узком экране. Полосу прокрутки
 * прячем: она перекрывала бы нижнюю границу и выглядела бы как вторая
 * линия под навигацией.
 */
.tri-sv-nav__inner::-webkit-scrollbar {
	display: none;
}

.tri-sv-nav__link,
.tri-sv-nav__link {
	padding: var(--tri-space-8) var(--tri-space-14);
	border-radius: var(--tri-radius-8);
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted);
}

.tri-sv-nav__link:hover,
.tri-sv-nav__link:focus-visible {
	color: var(--tri-color-ink);
	background-color: var(--tri-color-surface-f5f8ff);
}

/*
 * Якоря уводят под липкую полосу, если не учесть её высоту: базовый
 * scroll-padding в base.css знает только про шапку, а у разделов
 * услуги в макете стоит собственный отступ 150px. Добавляем к нему
 * высоту полосы — иначе заголовок раздела встаёт ровно под ней.
 */
.tri-sv-about,
.tri-sv-result,
.tri-sv-price,
.tri-sv-steps,
.tri-sv-cabinet,
.tri-sv-case,
.tri-sv-experts,
.tri-sv-faq {
	scroll-margin-block-start: calc(150px + 56px);
}

/* ====================================================================
 * 2. КОМУ НУЖНА УСЛУГА
 * reference: border-top 1px #EBEDF1; padding:104px 0 0; scroll-margin 150px
 * ================================================================== */

.tri-sv-about,
.tri-sv-result,
.tri-sv-price,
.tri-sv-case {
	scroll-margin-top: 150px;
}

/* reference: 14px/700 #5A6270 */
.tri-sv-eyebrow {
	display: block;
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted);
}

/* reference: 40px/700; ls -0.022em; margin-top:14px; max-width:760px */
.tri-sv-title {
	font-size: var(--tri-fs-40);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-022);
	margin: var(--tri-space-14) 0 0;
	max-width: 760px;
}

/* reference: repeat(4,1fr); gap:18px; margin-top:44px */
.tri-sv-about__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--tri-space-18);
	margin-block-start: var(--tri-space-44);
	list-style: none;
	padding: 0;
}

/* reference: radius 14px; padding 26px 26px 28px; gap 12px */
.tri-sv-scenario {
	background-color: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.1);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-26) var(--tri-space-26) var(--tri-space-28);
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-12);
	min-width: 0;
}

/* reference: акцентная карточка сценария — тёмная */
.tri-sv-scenario--accent {
	background-color: var(--tri-color-navy);
	border-color: var(--tri-color-navy);
}

/* reference: 18.5px/800; lh 1.3; margin-top:6px */
.tri-sv-scenario__title {
	font-size: var(--tri-fs-18-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	line-height: var(--tri-lh-1-3);
	margin: var(--tri-space-6) 0 0;
}

/* reference: 15px/1.55 */
.tri-sv-scenario__text {
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin: 0;
}

.tri-sv-scenario--accent .tri-sv-scenario__title {
	color: var(--tri-color-white);
}

.tri-sv-scenario--accent .tri-sv-scenario__text {
	color: var(--tri-color-on-dark-c8cdd6);
}

/* reference: 1.25fr 1fr; gap:20px; margin-top:32px */
.tri-sv-about__pair {
	display: grid;
	gap: var(--tri-space-20);
	margin-block-start: var(--tri-space-32);
}

/* reference: #F5F8FF; radius 20px; padding 32px 34px */
.tri-sv-checklist {
	background-color: var(--tri-color-surface-f5f8ff);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.1);
	border-radius: var(--tri-radius-20);
	padding: var(--tri-space-32) var(--tri-space-34);
	min-width: 0;
}

/* reference: 14px/700 #5A6270 */
.tri-sv-checklist__eyebrow {
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted);
}

/* reference: 26px/1.2/700; ls -0.014em; margin-top:12px */
.tri-sv-checklist__title {
	font-size: var(--tri-fs-26);
	line-height: var(--tri-lh-1-2);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-014);
	margin: var(--tri-space-12) 0 0;
}

/* reference: 15px/1.55 #5A6270; margin-top:10px; max-width:560px */
.tri-sv-checklist__text {
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-10);
	max-width: 560px;
}

/* reference: строки — border-top 1px #E2E5EA; padding 14px 0; gap 12px;
   последняя строка добавляет border-bottom */
.tri-sv-checklist__list {
	display: flex;
	flex-direction: column;
	margin-block-start: var(--tri-space-20);
	list-style: none;
	padding: 0;
}

.tri-sv-checklist__list li {
	display: flex;
	gap: var(--tri-space-12);
	align-items: flex-start;
	border-block-start: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	padding-block: var(--tri-space-14);
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-45);
	color: var(--tri-color-ink);
	font-weight: var(--tri-fw-600);
}

.tri-sv-checklist__list li:last-child {
	border-block-end: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
}

.tri-sv-checklist__list svg {
	flex-shrink: 0;
	margin-block-start: var(--tri-space-3);
	/* reference: штрих галочки #12295C */
	color: var(--tri-color-navy);
}

/* reference: #12295C; radius 20px; padding 32px 34px */
.tri-sv-ask {
	background-color: var(--tri-color-navy);
	border-radius: var(--tri-radius-20);
	padding: var(--tri-space-32) var(--tri-space-34);
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* reference: 28px/1.2/700; ls -0.014em */
.tri-sv-ask__title {
	font-size: var(--tri-fs-28);
	line-height: var(--tri-lh-1-2);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	letter-spacing: var(--tri-ls-n0-014);
	margin: 0;
}

/* reference: 16px/1.55 #C8CDD6; margin-top:14px */
.tri-sv-ask__text {
	font-size: var(--tri-fs-16);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-on-dark-c8cdd6);
	margin-block-start: var(--tri-space-14);
}

/* reference: кнопка прижата к низу, padding-top:26px */
.tri-sv-ask__action {
	margin-block-start: auto;
	padding-block-start: var(--tri-space-26);
	align-self: flex-start;
}

/* ====================================================================
 * 3. РЕЗУЛЬТАТ
 * reference: border-top 1px #EBEDF1; padding:104px 0 0
 * ================================================================== */

/* reference: 13px/700 #12295C + черта 34x2 #F8B327; gap 12px */
.tri-sv-kicker {
	display: flex;
	align-items: center;
	gap: var(--tri-space-12);
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-navy);
}

.tri-sv-kicker::after {
	content: "";
	width: 34px;
	height: 2px;
	background-color: var(--tri-color-accent);
}

/* reference: 42px/1.14/700; ls -0.022em; margin-top:16px; max-width:720px */
.tri-sv-result__title {
	font-size: var(--tri-fs-42);
	line-height: var(--tri-lh-1-14);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-022);
	margin: var(--tri-space-16) 0 0;
	max-width: 720px;
}

/* reference: 17.5px/1.55 #5A6270; margin-top:16px; max-width:64ch */
.tri-sv-result__lead {
	font-size: var(--tri-fs-17-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-16);
	max-width: var(--tri-measure);
}

/* reference: 1fr 520px; gap:52px; margin-top:44px */
.tri-sv-result__grid {
	display: grid;
	gap: var(--tri-space-52);
	margin-block-start: var(--tri-space-44);
	align-items: start;
}

/* reference: список результата — 1fr 1fr; gap:0 40px */
.tri-sv-deliverables {
	display: grid;
	gap: 0 var(--tri-space-40);
	list-style: none;
	padding: 0;
	margin: 0;
	min-width: 0;
}

/* reference: border-top 1px #EBEDF1; padding 20px 0 22px */
.tri-sv-deliverable {
	border-block-start: var(--tri-border-width) solid var(--tri-color-divider);
	padding-block: var(--tri-space-20) var(--tri-space-22);
	min-width: 0;
}

/* reference: точка 7x7 #F8B327; gap 11px; 18px/700; ls -0.012em */
.tri-sv-deliverable__title {
	display: flex;
	align-items: center;
	gap: var(--tri-space-11);
	font-size: var(--tri-fs-18);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-012);
}

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

/* reference: 15.5px/1.55 #5A6270; margin-top:9px; padding-left:18px */
.tri-sv-deliverable__text {
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-9);
	padding-inline-start: var(--tri-space-18);
}

/* reference: гарантия — #F5F8FF; radius 14px; padding 20px 24px;
   gap 16px; margin-top:24px; занимает обе колонки */
.tri-sv-guarantee {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: var(--tri-space-16);
	background-color: var(--tri-color-surface-f5f8ff);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.1);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-20) var(--tri-space-24);
	margin-block-start: var(--tri-space-24);
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-5);
	color: var(--tri-color-ink);
	font-weight: var(--tri-fw-600);
}

.tri-sv-guarantee svg {
	flex-shrink: 0;
}

/* reference: пример результата — #F5F8FF; radius 20px; padding 26px 28px;
   gap 16px */
.tri-sv-sample {
	background-color: var(--tri-color-surface-f5f8ff);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.1);
	border-radius: var(--tri-radius-20);
	padding: var(--tri-space-26) var(--tri-space-28);
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-16);
	min-width: 0;
}

/* reference: 13px/700 #6B7280 */
.tri-sv-sample__eyebrow {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted-soft);
}

/* reference: рамка документа — height 380px; radius 14px; padding 16px */
.tri-sv-sample__frame {
	height: 380px;
	border-radius: var(--tri-radius-14);
	overflow: hidden;
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	padding: var(--tri-space-16);
}

.tri-sv-sample__frame img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* reference: 14.5px/1.55 #5A6270 */
.tri-sv-sample__text {
	font-size: var(--tri-fs-14-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin: 0;
}

/*
 * Строка о самом файле: «PDF · 2,4 МБ». Собирается по вложению, а не
 * пишется руками, поэтому не расходится с документом при замене.
 * reference: 12.5px/600 #6B7280 под подписью примера.
 */
.tri-sv-sample__meta {
	margin: var(--tri-space-6) 0 0;
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted-soft);
}

/* ====================================================================
 * 4. ПОЧЕМУ «ТРИАДА»
 * reference: border-top 1px #EBEDF1; padding:104px 0 0
 * ================================================================== */

/* reference: 17.5px/1.5 #5A6270; margin-top:14px; max-width:760px */
.tri-sv-why__lead {
	font-size: var(--tri-fs-17-5);
	line-height: var(--tri-lh-1-5);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-14);
	max-width: 760px;
}

/* reference: 1fr 1fr; gap:18px; margin-top:44px */
.tri-sv-why__grid {
	display: grid;
	gap: var(--tri-space-18);
	margin-block-start: var(--tri-space-44);
	list-style: none;
	padding: 0;
}

/* reference: #FAFBFF; radius 20px; padding 32px */
.tri-sv-adv {
	background-color: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.1);
	border-radius: var(--tri-radius-20);
	padding: var(--tri-space-32);
	min-width: 0;
}

/* reference: тёмная карточка кабинета */
.tri-sv-adv--dark {
	background-color: var(--tri-color-navy);
	border-color: var(--tri-color-navy);
}

/* reference: карточки с иллюстрацией — 1fr 150px и 1fr 200px; gap 20px */
.tri-sv-adv--media {
	display: grid;
	gap: var(--tri-space-20);
}

/* reference: 21px/800 */
.tri-sv-adv__title {
	font-size: var(--tri-fs-21);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin: 0;
}

/* reference: 15px/1.6 #5A6270; margin-top:12px; max-width:64ch */
.tri-sv-adv__text {
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-12);
	max-width: var(--tri-measure);
}

.tri-sv-adv--dark .tri-sv-adv__title {
	color: var(--tri-color-white);
}

.tri-sv-adv--dark .tri-sv-adv__text {
	color: var(--tri-color-on-dark-c8cdd6);
}

/* reference: 14px/800; margin-top:14px */
.tri-sv-adv__link {
	display: inline-flex;
	align-items: center;
	gap: var(--tri-space-7);
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin-block-start: var(--tri-space-14);
	text-decoration: none;
}

.tri-sv-adv--dark .tri-sv-adv__link {
	color: var(--tri-color-white);
}

/* reference: иллюстрация — radius 10px; min-height 150px */
.tri-sv-adv__media {
	border-radius: var(--tri-radius-10);
	overflow: hidden;
	min-height: 150px;
	background-color: var(--tri-color-surface-edf2fd);
}

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

/* reference: показатели внутри карточки — gap 28px; 26px/800 */
.tri-sv-adv__stats {
	display: flex;
	gap: var(--tri-space-28);
	margin-block-start: var(--tri-space-18);
	flex-wrap: wrap;
}

.tri-sv-adv__stat-value {
	font-size: var(--tri-fs-26);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

/* reference: 13px/500 #6B7280 */
.tri-sv-adv__stat-label {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-muted-soft);
}

/* reference: мини-виджет проекта — #FFFFFF; radius 10px; padding 14px 16px */
.tri-sv-widget {
	background-color: var(--tri-color-white);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-14) var(--tri-space-16);
	align-self: center;
}

/* reference: 12px/800 #6B7280; ls 0.05em */
.tri-sv-widget__eyebrow {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-muted-soft);
	letter-spacing: var(--tri-ls-p0-05);
}

/* reference: 12.5px/800 #16181D; margin-top:4px */
.tri-sv-widget__title {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin-block-start: var(--tri-space-4);
}

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

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

/* reference: подпись под полосой — space-between; margin-top:6px */
.tri-sv-widget__row {
	display: flex;
	justify-content: space-between;
	gap: var(--tri-space-8);
	margin-block-start: var(--tri-space-6);
	font-size: var(--tri-fs-12);
	color: var(--tri-color-muted-soft);
	font-weight: var(--tri-fw-600);
}

.tri-sv-widget__row b {
	color: var(--tri-color-ink);
	font-weight: var(--tri-fw-800);
}

/* reference: строка «Экспертиза + Личный кабинет + …» — 15.5px/800; gap 12px */
.tri-sv-adv__chain {
	display: flex;
	align-items: center;
	gap: var(--tri-space-12);
	margin-block-start: var(--tri-space-20);
	flex-wrap: wrap;
	font-size: var(--tri-fs-15-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

.tri-sv-adv__chain span:nth-child(even) {
	color: var(--tri-color-muted-soft);
	font-size: var(--tri-fs-18);
}

/* ====================================================================
 * 5. ЭТАПЫ — МАРШРУТ (v3)
 *
 * reference: background #F5F8FF; padding 84px 0 72px; заголовок и
 * подсказка в одной строке (align-items:flex-end; gap 32px);
 * холст маршрута 1200x460, дорожка #DCE4F5 шириной 10, пройденная
 * часть #12295C шириной 4.
 *
 * Бегунка на услуге нет — см. пояснение в template-parts/service/steps.php.
 * Стили самой точки этапа общие с главной и лежат в components/route.css.
 * ================================================================== */

.tri-sv-steps {
	background-color: var(--tri-color-surface-f5f8ff);
	margin-block-start: calc(var(--tri-space-88) * var(--tri-section-scale));
	scroll-margin-top: 150px;
}

/* reference: заголовок и подсказка в строку, подсказка прижата к низу */
.tri-sv-steps__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--tri-space-32);
}

/* reference: 13px/600 #6B7280; иконка 14x14; padding-bottom 8px */
.tri-sv-steps__hint {
	display: flex;
	align-items: center;
	gap: var(--tri-space-8);
	padding-block-end: var(--tri-space-8);
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted-soft);
	white-space: nowrap;
}

/* reference: margin-top 28px; высота холста 460px */
.tri-sv-steps__route {
	position: relative;
	margin-block-start: var(--tri-space-28);
}

/*
 * До 1024px кривая не показывается: сжатая до ширины телефона она
 * нечитаема. Этапы остаются тем же списком, но идут вертикально —
 * это и есть маршрут на узком экране.
 */
.tri-sv-steps__svg {
	display: none;
}

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

@media (min-width: 1024px) {
	.tri-sv-steps__route {
		block-size: 460px;
	}

	.tri-sv-steps__svg {
		display: block;
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		overflow: visible;
	}

	/* reference: дорожка #DCE4F5, ширина 10 */
	.tri-sv-steps__track {
		fill: none;
		stroke: var(--tri-color-route-track);
		stroke-width: 10;
		stroke-linecap: round;
	}

	/* reference: пройденная часть #12295C, ширина 4, переход .7s */
	.tri-sv-steps__progress {
		fill: none;
		stroke: var(--tri-color-navy);
		stroke-width: 4;
		stroke-linecap: round;
		transition: stroke-dasharray 0.7s var(--tri-ease);
	}

	.tri-sv-steps__list {
		display: block;
		block-size: 100%;
	}
}

/* ====================================================================
 * 6. ЛИЧНЫЙ КАБИНЕТ
 * reference: #12295C + фото + вуаль
 * linear-gradient(90deg,rgba(4,18,46,0.95),rgba(4,18,46,0.84) 55%,rgba(4,18,46,0.7));
 * padding:96px 0; margin-top:104px; сетка 1fr 1.2fr gap 64px
 * ================================================================== */

.tri-sv-cabinet {
	position: relative;
	background-color: var(--tri-color-navy);
	/* reference (v3): margin-top 88px */
	margin-block-start: calc(var(--tri-space-88) * var(--tri-section-scale));
	overflow: hidden;
	scroll-margin-top: 150px;
}

.tri-sv-cabinet__bg,
.tri-sv-cabinet__veil {
	position: absolute;
	inset: 0;
}

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

.tri-sv-cabinet__veil {
	background-image: linear-gradient(
		90deg,
		rgba(4, 18, 46, 0.95) 0%,
		rgba(4, 18, 46, 0.84) 55%,
		rgba(4, 18, 46, 0.7) 100%
	);
	pointer-events: none;
}

/*
 * СОДЕРЖИМОЕ ДОЛЖНО БЫТЬ ПОЗИЦИОНИРОВАНО.
 *
 * Фон и затемнение секции — position:absolute, а контейнер с текстом
 * оставался статическим. По правилам отрисовки позиционированные
 * элементы рисуются поверх обычного потока, поэтому затемнение
 * закрывало собой заголовок, список преимуществ и макет кабинета:
 * в разметке всё было, а на экране оставалась почти пустая тёмная
 * полоса.
 *
 * Так же устроен первый экран услуги, где текст читается: там
 * контейнер тела объявлен relative. Повторяем этот приём — z-index не
 * нужен, контейнер и так идёт в разметке последним.
 */
.tri-sv-cabinet > .tri-container {
	position: relative;
}

.tri-sv-cabinet__grid {
	display: grid;
	gap: var(--tri-space-64);
	align-items: center;
}

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

/* reference: пункты — gap 18px; margin-top:32px */
.tri-sv-cabinet__points {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-18);
	margin-block-start: var(--tri-space-32);
	list-style: none;
	padding: 0;
}

.tri-sv-cabinet__point {
	display: flex;
	gap: var(--tri-space-14);
	align-items: flex-start;
}

.tri-sv-cabinet__point svg {
	flex-shrink: 0;
	margin-block-start: var(--tri-space-2);
}

/* reference: 17px/800 #FFFFFF */
.tri-sv-cabinet__point-title {
	font-size: var(--tri-fs-17);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-white);
}

/* reference: 14.5px/1.55 #C8CDD6; margin-top:3px */
.tri-sv-cabinet__point-text {
	font-size: var(--tri-fs-14-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-on-dark-c8cdd6);
	margin-block-start: var(--tri-space-3);
}

.tri-sv-cabinet__action {
	margin-block-start: var(--tri-space-30);
}

/* reference: стеклянная рамка — rgba(255,255,255,0.08);
   border rgba(255,255,255,0.16); radius 20px; padding 28px */
.tri-sv-mock {
	background-color: rgba(255, 255, 255, 0.08);
	border: var(--tri-border-width) solid rgba(255, 255, 255, 0.16);
	border-radius: var(--tri-radius-20);
	padding: var(--tri-space-28);
	min-width: 0;
}

/* reference: окно — #FFFFFF; radius 14px; shadow 0 14px 36px rgba(4,34,92,0.10) */
.tri-sv-mock__window {
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.09);
	border-radius: var(--tri-radius-14);
	overflow: hidden;
	box-shadow: var(--tri-shadow-navy-36-1);
}

/* reference: строка адреса — #FAFBFF; border-bottom #EBEDF1; padding 10px 16px */
.tri-sv-mock__bar {
	display: flex;
	align-items: center;
	gap: var(--tri-space-7);
	background-color: 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-sv-mock__dot {
	width: 9px;
	height: 9px;
	border-radius: var(--tri-radius-circle);
	background-color: var(--tri-color-border-e2e5ea);
	flex-shrink: 0;
}

/* reference: 12px/700 #6B7280; margin-left:8px */
.tri-sv-mock__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);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* reference: тело окна — 170px 1fr (боковое меню появляется с 768px) */
.tri-sv-mock__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* reference: боковое меню — border-right #EBEDF1; padding 18px 14px; gap 4px */
.tri-sv-mock__side {
	display: none;
	flex-direction: column;
	gap: var(--tri-space-4);
	background-color: var(--tri-color-white);
	border-inline-end: var(--tri-border-width) solid var(--tri-color-divider);
	padding: var(--tri-space-18) var(--tri-space-14);
}

/* reference: пункты меню 12.5px; активный — заливка #12295C, radius 6px */
.tri-sv-mock__side span {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-muted);
	padding: var(--tri-space-8) var(--tri-space-10);
	border-radius: var(--tri-radius-6);
}

.tri-sv-mock__side span:first-child {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

.tri-sv-mock__side span.is-active {
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	background-color: var(--tri-color-navy);
}

/* reference: контент окна — #FAFBFF; padding 20px */
.tri-sv-mock__main {
	background-color: var(--tri-color-surface-fafbff);
	padding: var(--tri-space-20);
	min-width: 0;
}

/* reference: 14px/800 */
.tri-sv-mock__project {
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

/* reference: 12px/500 #6B7280; margin-top:3px */
.tri-sv-mock__meta {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-muted-soft);
	margin-block-start: var(--tri-space-3);
}

/* reference: карточка этапа — #FFFFFF; border #E2E5EA; radius 10px;
   padding 14px 16px; margin-top:14px */
.tri-sv-mock__stage {
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-14) var(--tri-space-16);
	margin-block-start: var(--tri-space-14);
}

.tri-sv-mock__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--tri-space-12);
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

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

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

/* reference: 12px/600 #6B7280; margin-top:9px */
.tri-sv-mock__deadline {
	font-size: var(--tri-fs-12);
	color: var(--tri-color-muted-soft);
	font-weight: var(--tri-fw-600);
	margin-block-start: var(--tri-space-9);
}

/* reference: файл — border #E2E5EA; radius 10px; padding 12px 16px;
   margin-top:10px */
.tri-sv-mock__file {
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-12) var(--tri-space-16);
	margin-block-start: var(--tri-space-10);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--tri-space-12);
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted);
}

.tri-sv-mock__file b {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

/* reference: сообщение куратора — #EDF2FD; radius 10px; padding 11px 16px;
   margin-top:10px; 12px/700 */
.tri-sv-mock__note {
	background-color: var(--tri-color-surface-edf2fd);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-11) var(--tri-space-16);
	margin-block-start: var(--tri-space-10);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
}

/* ====================================================================
 * 7. СТОИМОСТЬ
 * reference: border-top 1px #EBEDF1; padding:104px 0 0
 * ================================================================== */

/* reference: 1fr 1fr; gap:18px; margin-top:44px */
.tri-sv-price__grid {
	display: grid;
	gap: var(--tri-space-18);
	margin-block-start: var(--tri-space-44);
}

/* reference: #FAFBFF; radius 20px; padding 36px */
.tri-sv-price__panel {
	background-color: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.1);
	border-radius: var(--tri-radius-20);
	padding: var(--tri-space-36);
	min-width: 0;
}

/* reference: 20px/800 */
.tri-sv-price__subtitle {
	font-size: var(--tri-fs-20);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin: 0;
}

/* reference: факторы — gap 14px; margin-top:22px; точка 7x7 #12295C */
.tri-sv-price__factors {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-14);
	margin-block-start: var(--tri-space-22);
	list-style: none;
	padding: 0;
}

.tri-sv-price__factors li {
	display: flex;
	gap: var(--tri-space-12);
	align-items: flex-start;
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-ink-secondary);
	font-weight: var(--tri-fw-500);
}

.tri-sv-price__factors li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: var(--tri-radius-circle);
	background-color: var(--tri-color-navy);
	flex-shrink: 0;
	margin-block-start: var(--tri-space-7);
}

/* reference: сноска — #FFFFFF; border #E2E5EA; radius 10px;
   padding 18px 20px; margin-top:26px; 14.5px/1.55 */
.tri-sv-price__note {
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-18) var(--tri-space-20);
	margin-block-start: var(--tri-space-26);
	font-size: var(--tri-fs-14-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	font-weight: var(--tri-fw-500);
}

/* reference: калькулятор — #12295C; radius 20px; padding 36px */
/* --------------------------------------------------------------------
 * Калькулятор uCalc
 *
 * Обёртка повторяет карточку прежнего расчёта, чтобы блок стоимости не
 * менял вид от того, чем именно считают.
 *
 * Высота НЕ задаётся: рамку внутрь подставляет загрузчик сервиса и сам
 * управляет её высотой через postMessage. Любое наше значение потом
 * дерётся с этим механизмом — либо режет длинную форму, либо оставляет
 * пустоту. Задаём только ширину и радиус.
 * ------------------------------------------------------------------ */

.tri-sv-calc--ucalc {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-16);
}

.tri-sv-calc__embed {
	width: 100%;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--tri-radius-14);
	background-color: var(--tri-color-white);
}

.tri-sv-calc__embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* Карточка калькулятора тёмная — примечание светлое. */
.tri-sv-calc__hint {
	margin: 0;
	font-size: var(--tri-fs-13);
	line-height: var(--tri-lh-1-5);
	color: var(--tri-color-on-dark-c8cdd6);
}

.tri-sv-calc {
	background-color: var(--tri-color-navy);
	border-radius: var(--tri-radius-20);
	padding: var(--tri-space-36);
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tri-sv-calc__subtitle {
	font-size: var(--tri-fs-20);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-white);
	margin: 0;
}

.tri-sv-calc__field {
	margin-block-start: var(--tri-space-26);
}

/* reference: подпись слева 14px/700 #C8CDD6, значение справа 15px/800 */
.tri-sv-calc__row {
	display: flex;
	justify-content: space-between;
	gap: var(--tri-space-12);
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-on-dark-c8cdd6);
}

/*
 * Базовый стиль <label> красит подпись в почти чёрный — на тёмной
 * карточке расчёта её было не прочитать (правки 14.09). Внутри строки
 * подпись берёт цвет самой строки.
 */
.tri-sv-calc__row label {
	color: inherit;
}

.tri-sv-calc__value {
	font-size: var(--tri-fs-15);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-white);
}

/* reference: ползунок на всю ширину; accent-color #FFFFFF; margin-top:12px */
.tri-sv-calc__range {
	width: 100%;
	margin-block-start: var(--tri-space-12);
	accent-color: var(--tri-color-white);
}

/* reference: два переключателя — gap 10px; margin-top:22px;
   border 1.5px; radius 10px; padding 12px 10px; 13.5px/700 */
.tri-sv-calc__toggles {
	display: flex;
	gap: var(--tri-space-10);
	margin-block-start: var(--tri-space-22);
	flex-wrap: wrap;
}

.tri-sv-calc__toggle {
	flex: 1 1 46%;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1.5px solid rgba(255, 255, 255, 0.24);
	color: var(--tri-color-white);
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-700);
	padding: var(--tri-space-12) var(--tri-space-10);
	border-radius: var(--tri-radius-10);
	cursor: pointer;
	font-family: inherit;
	text-align: center;
	min-width: 0;
}

/* reference: включённый переключатель — белая заливка, тёмный текст */
.tri-sv-calc__toggle[aria-pressed="true"] {
	background-color: var(--tri-color-white);
	border-color: var(--tri-color-white);
	color: var(--tri-color-navy);
}

/* reference: итог — border-top rgba(255,255,255,0.14);
   margin-top:26px; padding-top:22px */
.tri-sv-calc__total {
	border-block-start: var(--tri-border-width) solid rgba(255, 255, 255, 0.14);
	margin-block-start: var(--tri-space-26);
	padding-block-start: var(--tri-space-22);
}

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

/* reference: 38px/800 #FFFFFF; ls -0.01em; margin-top:6px */
.tri-sv-calc__amount {
	font-size: var(--tri-fs-38);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-white);
	margin-block-start: var(--tri-space-6);
	letter-spacing: var(--tri-ls-n0-01);
}

/* reference: 13px/1.5 #9AA1AE; margin-top:8px */
.tri-sv-calc__hint {
	font-size: var(--tri-fs-13);
	line-height: var(--tri-lh-1-5);
	color: var(--tri-color-on-dark-9aa1ae);
	margin-block-start: var(--tri-space-8);
}

.tri-sv-calc__action {
	margin-block-start: auto;
	padding-block-start: var(--tri-space-24);
}

/* reference: три карточки под калькулятором — 1fr 1fr 1fr; gap 18px;
   margin-top:18px; border rgba(18,41,92,0.09); radius 14px; padding 26px 28px */
.tri-sv-price__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--tri-space-18);
	margin-block-start: var(--tri-space-18);
	list-style: none;
	padding: 0;
}

.tri-sv-price__fact {
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.09);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-26) var(--tri-space-28);
	min-width: 0;
}

.tri-sv-price__fact-label {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted-soft);
}

/* reference: 24px/800; margin-top:10px */
.tri-sv-price__fact-value {
	font-size: var(--tri-fs-24);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin-block-start: var(--tri-space-10);
}

/* reference: 14px/1.55 #5A6270; margin-top:8px */
.tri-sv-price__fact-text {
	font-size: var(--tri-fs-14);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-8);
}

/* reference: вариант без значения — текст 14.5px/1.6 #3A3F49 w500 */
.tri-sv-price__fact-body {
	font-size: var(--tri-fs-14-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
	font-weight: var(--tri-fw-500);
	margin-block-start: var(--tri-space-10);
}

/* ====================================================================
 * 8. КЕЙС
 * reference: border-top 1px #EBEDF1; padding:104px 0 0
 * ================================================================== */

/* reference: #FAFBFF; radius 20px; 440px 1fr; margin-top:40px */
.tri-sv-case__card {
	background-color: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.1);
	border-radius: var(--tri-radius-20);
	display: grid;
	overflow: hidden;
	margin-block-start: var(--tri-space-40);
}

/* reference: min-height:380px */
.tri-sv-case__media {
	position: relative;
	min-height: 380px;
	background-color: var(--tri-color-surface-edf2fd);
}

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

/* reference: печать «Согласовано с 1-го раза» — top/right 20px;
   border 2px #12295C; radius 10px; padding 9px 15px; rotate(-4deg);
   13px/700 #5A6270 */
.tri-sv-case__stamp {
	position: absolute;
	top: var(--tri-space-20);
	right: var(--tri-space-20);
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.93);
	border: 2px solid var(--tri-color-navy);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-9) var(--tri-space-15);
	transform: rotate(-4deg);
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted);
	pointer-events: none;
}

/* reference: padding:38px 44px */
.tri-sv-case__body {
	padding: var(--tri-space-38) var(--tri-space-44);
	min-width: 0;
}

/* reference: тег #EDF2FD; radius 100px; padding 5px 12px; 12px/800 */
.tri-sv-case__tags {
	display: flex;
	gap: var(--tri-space-10);
	align-items: center;
	flex-wrap: wrap;
}

.tri-sv-case__tag {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	background-color: var(--tri-color-surface-edf2fd);
	border-radius: var(--tri-radius-100);
	padding: var(--tri-space-5) var(--tri-space-12);
}

/* reference: 13px/500 #6B7280 */
.tri-sv-case__meta {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-muted-soft);
}

/* reference: 24px/700; margin-top:16px */
.tri-sv-case__title {
	font-size: var(--tri-fs-24);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	margin: var(--tri-space-16) 0 0;
}

/* reference: строки 1fr 1fr; gap:8px 32px; margin-top:22px */
.tri-sv-case__rows {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--tri-space-8) var(--tri-space-32);
	margin-block-start: var(--tri-space-22);
	list-style: none;
	padding: 0;
}

/* reference: padding 10px 0; border-bottom 1px #EBEDF1 */
.tri-sv-case__row {
	padding-block: var(--tri-space-10);
	border-block-end: var(--tri-border-width) solid var(--tri-color-divider);
	min-width: 0;
}

/* reference: 12px/800; ls 0.05em; uppercase; #6B7280 */
.tri-sv-case__row-label {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-05);
	text-transform: uppercase;
	color: var(--tri-color-muted-soft);
}

/* reference: 14.5px/1.5/600 #3A3F49; margin-top:4px */
.tri-sv-case__row-value {
	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);
	margin-block-start: var(--tri-space-4);
}

/* reference: подвал карточки — gap 22px; margin-top:24px */
.tri-sv-case__foot {
	display: flex;
	align-items: center;
	gap: var(--tri-space-22);
	margin-block-start: var(--tri-space-24);
	flex-wrap: wrap;
}

.tri-sv-case__badge {
	display: flex;
	align-items: center;
	gap: var(--tri-space-8);
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

.tri-sv-case__link {
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin-inline-start: auto;
	text-decoration: none;
}

/* reference: полоса доверия — border rgba(18,41,92,0.09); radius 14px;
   padding 22px 32px; gap 40px; margin-top:18px */
.tri-sv-trust {
	display: flex;
	align-items: center;
	gap: var(--tri-space-40);
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.09);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-22) var(--tri-space-32);
	margin-block-start: var(--tri-space-18);
	flex-wrap: wrap;
}

/* reference: 15px/800; nowrap */
.tri-sv-trust__title {
	font-size: var(--tri-fs-15);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

/* reference: логотипы — gap 14px; плашка height 52px; #FAFBFF;
   border #EBEDF1; radius 10px; padding 10px */
.tri-sv-trust__logos {
	display: flex;
	gap: var(--tri-space-14);
	flex: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	flex-wrap: wrap;
}

.tri-sv-trust__logo {
	height: 52px;
	flex: 1 1 100px;
	background-color: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid var(--tri-color-divider);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-10);
	min-width: 0;
}

.tri-sv-trust__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ====================================================================
 * 9. БАННЕР AI
 * reference: padding:104px 0 0; панель #12295C radius 24px padding 44px 48px
 * ================================================================== */






/* reference: 34px/1.16/700 #FFFFFF; ls -0.02em; margin-top:20px;
   max-width:520px */



/* reference: две карточки-скриншота 1fr 1fr; gap:14px;
   #FFFFFF; radius 14px; shadow 0 20px 44px rgba(4,18,46,0.34) */


/* reference: шапка карточки — #F8F9FB; border-bottom #EBEDF1;
   padding 9px 13px; точки 7x7 #DDE0E6 */




/* reference: строки ЛНА — border #E2E5EA; radius 8px; padding 9px 11px;
   между строками 7px */








/* reference: ответ — border #E2E5EA; radius 8px; padding 10px 12px;
   margin-top:8px; 12px/1.45 #3A3F49 */



/* ====================================================================
 * 10. ГЕОГРАФИЯ УСЛУГИ
 * reference: border-top 1px #EBEDF1; padding:112px 0 0; 380px 1fr; gap 64px
 * ================================================================== */

/* reference (v3): gap 44px — в v2 было 64px */
.tri-sv-geo__grid {
	display: grid;
	gap: var(--tri-space-44);
	align-items: center;
}

/* reference: 40px/1.15/700; ls -0.02em */
.tri-sv-geo__title {
	font-size: var(--tri-fs-40);
	line-height: var(--tri-lh-1-15);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-02);
	margin: 0;
}

/* reference: 16px/1.6 #5A6270; margin-top:16px; max-width:64ch */
.tri-sv-geo__text {
	font-size: var(--tri-fs-16);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-16);
	max-width: var(--tri-measure);
}

/* reference: показатели — gap 36px; margin-top:26px; 34px/800 ls -0.02em */
.tri-sv-geo__stats {
	display: flex;
	gap: var(--tri-space-36);
	margin-block-start: var(--tri-space-26);
	flex-wrap: wrap;
}

.tri-sv-geo__stat-value {
	font-size: var(--tri-fs-34);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-02);
}

/* reference: 13px/500 #6B7280; margin-top:4px */
.tri-sv-geo__stat-label {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-muted-soft);
	margin-block-start: var(--tri-space-4);
}

/* reference: строки регионов — border-top 1px #EBEDF1; padding 13px 0 */
.tri-sv-geo__rows {
	display: flex;
	flex-direction: column;
	margin-block-start: var(--tri-space-24);
	list-style: none;
	padding: 0;
}

.tri-sv-geo__row {
	border-block-start: var(--tri-border-width) solid var(--tri-color-divider);
	padding-block: var(--tri-space-13);
}

/* reference: 15.5px/800 */
.tri-sv-geo__row-title {
	font-size: var(--tri-fs-15-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

/* reference: 13.5px/600 #6B7280; margin-top:3px */
.tri-sv-geo__row-note {
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted-soft);
	margin-block-start: var(--tri-space-3);
}

/* reference: 14.5px/800; margin-top:20px */
.tri-sv-geo__link {
	display: inline-flex;
	margin-block-start: var(--tri-space-20);
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	text-decoration: none;
}

/* reference: панель карты — #FAFBFF; radius 20px; padding 18px */
.tri-sv-geo .tri-map {
	padding: var(--tri-space-18);
}

/* ====================================================================
 * 11. СПЕЦИАЛИСТЫ
 * reference: #12295C + фото + вуаль
 * linear-gradient(180deg,rgba(4,18,46,0.94),rgba(4,18,46,0.84));
 * padding:96px 0; margin-top:104px; сетка 360px 1fr; gap 56px
 * ================================================================== */

.tri-sv-experts {
	position: relative;
	background-color: var(--tri-color-navy);
	margin-block-start: calc(var(--tri-space-104) * var(--tri-section-scale));
	overflow: hidden;
	scroll-margin-top: 150px;
}

.tri-sv-experts__bg,
.tri-sv-experts__veil {
	position: absolute;
	inset: 0;
}

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

.tri-sv-experts__veil {
	background-image: linear-gradient(
		180deg,
		rgba(4, 18, 46, 0.94) 0%,
		rgba(4, 18, 46, 0.84) 100%
	);
	pointer-events: none;
}

.tri-sv-experts__grid {
	display: grid;
	gap: var(--tri-space-56);
}

/* reference: 13px/700 #C8CDD6 + черта 34x2 #F8B327 */
.tri-sv-experts__kicker {
	display: flex;
	align-items: center;
	gap: var(--tri-space-12);
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-on-dark-c8cdd6);
}

.tri-sv-experts__kicker::after {
	content: "";
	width: 34px;
	height: 2px;
	background-color: var(--tri-color-accent);
}

/* reference: 38px/1.14/700 #FFFFFF; ls -0.022em; margin-top:18px */
.tri-sv-experts__title {
	font-size: var(--tri-fs-38);
	line-height: var(--tri-lh-1-14);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	letter-spacing: var(--tri-ls-n0-022);
	margin: var(--tri-space-18) 0 0;
}

/* reference: часть заголовка выделена жёлтым */
.tri-sv-experts__title em {
	font-style: normal;
	color: var(--tri-color-accent);
}

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

/* reference: плашка счётчика — rgba(255,255,255,0.10);
   border rgba(255,255,255,0.20); radius 14px; padding 22px 24px;
   margin-top:28px */
.tri-sv-experts__count {
	background-color: rgba(255, 255, 255, 0.1);
	border: var(--tri-border-width) solid rgba(255, 255, 255, 0.2);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-22) var(--tri-space-24);
	margin-block-start: var(--tri-space-28);
}

.tri-sv-experts__count-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--tri-space-16);
}

/* reference: 38px/700 #F8B327; line-height:1; ls -0.02em */
.tri-sv-experts__count-value {
	font-size: var(--tri-fs-38);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-accent);
	line-height: 1;
	letter-spacing: var(--tri-ls-n0-02);
}

/* reference: 14.5px/1.45/600 #FFFFFF; margin-top:12px */
.tri-sv-experts__count-text {
	font-size: var(--tri-fs-14-5);
	line-height: var(--tri-lh-1-45);
	color: var(--tri-color-white);
	font-weight: var(--tri-fw-600);
	margin-block-start: var(--tri-space-12);
}

/* reference: широкая жёлтая кнопка — radius 14px; padding 18px 24px;
   15.5px/700; margin-top:14px */
.tri-sv-experts__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tri-space-16);
	background-color: var(--tri-color-accent);
	color: var(--tri-color-ink);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-18) var(--tri-space-24);
	margin-block-start: var(--tri-space-14);
	font-size: var(--tri-fs-15-5);
	font-weight: var(--tri-fw-700);
	text-decoration: none;
	transition:
		transform var(--tri-duration-32) var(--tri-ease),
		box-shadow var(--tri-duration-32) var(--tri-ease);
}

.tri-sv-experts__cta:hover,
.tri-sv-experts__cta:focus-visible {
	color: var(--tri-color-ink);
	transform: translateY(-2px);
	box-shadow: var(--tri-shadow-accent-30-3);
}

/* reference: карточки — repeat(3,1fr); gap:16px; aspect-ratio 4/5 */
.tri-sv-experts__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--tri-space-16);
	align-content: start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tri-sv-expert {
	position: relative;
	border-radius: var(--tri-radius-14);
	overflow: hidden;
	background-color: var(--tri-color-surface-edf2fd);
	/*
	 * Портрет 3/4. Жёсткой нижней границы высоты здесь больше нет:
	 * вместе с aspect-ratio она задавала карточке ширину 300px, и три
	 * карточки не помещались в свою колонку — они наезжали друг на
	 * друга (правки 14.09).
	 */
	aspect-ratio: 3 / 4;
	min-width: 0;
	transition:
		transform var(--tri-duration-32) var(--tri-ease),
		box-shadow var(--tri-duration-32) var(--tri-ease);
}

.tri-sv-expert:hover,
.tri-sv-expert:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--tri-shadow-deep-56-4);
}

.tri-sv-expert img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* reference: вуаль linear-gradient(180deg,transparent 46%,
   rgba(4,18,46,0.55) 68%, rgba(4,18,46,0.92) 100%) */
.tri-sv-expert__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;
}

/* reference: тег top/left 14px; градиент #EDAA2A → #F8B327; radius 6px;
   padding 6px 11px; 12px/700 */
.tri-sv-expert__tag {
	position: absolute;
	top: var(--tri-space-14);
	left: var(--tri-space-14);
	background-image: linear-gradient(180deg, #edaa2a 0%, #f8b327 100%);
	color: var(--tri-color-ink);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	border-radius: var(--tri-radius-6);
	padding: var(--tri-space-6) var(--tri-space-11);
	max-width: calc(100% - 28px);
	line-height: var(--tri-lh-1-25);
}

/* reference: подпись — padding 20px 20px 22px */
.tri-sv-expert__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--tri-space-20) var(--tri-space-20) var(--tri-space-22);
}

/* reference: 19px/700 #FFFFFF; ls -0.012em */
.tri-sv-expert__name {
	font-size: var(--tri-fs-19);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	letter-spacing: var(--tri-ls-n0-012);
}

/* reference: черта 34x2 #F8B327; margin 9px 0 10px */
.tri-sv-expert__rule {
	width: 34px;
	height: 2px;
	background-color: var(--tri-color-accent);
	margin: var(--tri-space-9) 0 var(--tri-space-10);
}

/* reference: 13px/700 #FFFFFF; lh 1.35 */
.tri-sv-expert__role {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	line-height: var(--tri-lh-1-35);
}

/* reference: 12.5px/500 #C8CDD6; margin-top:5px; lh 1.35 */
.tri-sv-expert__spec {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-on-dark-c8cdd6);
	margin-block-start: var(--tri-space-5);
	line-height: var(--tri-lh-1-35);
}

/* ====================================================================
 * 12. ЭКСПЕРТНЫЙ БЛОК (SEO-текст)
 * reference: border-top 1px #EBEDF1; padding:112px 0 0; внутри ещё одна
 * линия и padding-top:72px; сетка 280px 1fr; gap 72px; статья 780px
 * ================================================================== */

.tri-sv-article__grid {
	display: grid;
	gap: var(--tri-space-72);
	border-block-start: var(--tri-border-width) solid var(--tri-color-divider);
	padding-block-start: var(--tri-space-72);
}

/* reference: содержание прилипает при top:150px */
.tri-sv-toc {
	position: sticky;
	top: 150px;
	align-self: start;
	min-width: 0;
}

/* reference: 13px/700 #6B7280 */
.tri-sv-toc__title {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted-soft);
}

/* reference: список — gap 2px; margin-top:16px; border-left 2px #EBEDF1 */
.tri-sv-toc__list {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-2);
	margin-block-start: var(--tri-space-16);
	border-inline-start: 2px solid var(--tri-color-divider);
	list-style: none;
	padding: 0;
}

/* reference: 14px/600 #5A6270; padding 8px 0 8px 16px;
   margin-left:-2px; при наведении левая линия #12295C */
.tri-sv-toc__link {
	display: block;
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted);
	padding: var(--tri-space-8) 0 var(--tri-space-8) var(--tri-space-16);
	margin-inline-start: -2px;
	border-inline-start: 2px solid transparent;
	text-decoration: none;
	line-height: var(--tri-lh-1-35);
}

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

/* reference: карточка вопроса — #FAFBFF; border rgba(18,41,92,0.09);
   radius 14px; padding 20px; margin-top:28px */
.tri-sv-toc__ask {
	background-color: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.09);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-20);
	margin-block-start: var(--tri-space-28);
}

.tri-sv-toc__ask-title {
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

.tri-sv-toc__ask-text {
	font-size: var(--tri-fs-13);
	line-height: var(--tri-lh-1-5);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-6);
}

.tri-sv-toc__ask-link {
	display: inline-flex;
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin-block-start: var(--tri-space-10);
	text-decoration: none;
}

/* reference: статья max-width:780px */
.tri-sv-article {
	max-width: 780px;
	min-width: 0;
}

/* reference: 34px/800; ls -0.01em; scroll-margin-top:150px;
   первый заголовок без верхнего отступа, остальные — 56px */
.tri-sv-article h2 {
	font-size: var(--tri-fs-34);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-01);
	margin: var(--tri-space-56) 0 0;
	scroll-margin-top: 150px;
}

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

/* reference: 17px/1.65 #3A3F49; первый абзац 18px, следующие 14px */
.tri-sv-article p {
	font-size: var(--tri-fs-17);
	line-height: var(--tri-lh-1-65);
	color: var(--tri-color-ink-secondary);
	margin-block-start: var(--tri-space-18);
}

.tri-sv-article p + p {
	margin-block-start: var(--tri-space-14);
}

/* reference: маркированный список — точка 7x7 #12295C; gap 10px;
   16.5px/1.6; margin-top:20px */
.tri-sv-article__list {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-10);
	margin-block-start: var(--tri-space-20);
	list-style: none;
	padding: 0;
}

.tri-sv-article__list li {
	display: flex;
	gap: var(--tri-space-12);
	align-items: flex-start;
	font-size: var(--tri-fs-16-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
}

.tri-sv-article__list li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: var(--tri-radius-circle);
	background-color: var(--tri-color-navy);
	flex-shrink: 0;
	margin-block-start: var(--tri-space-9);
}

/* reference: врезки — radius 10px; padding 20px 24px; margin-top:26px;
   левая полоса 3px */
.tri-sv-note {
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-20) var(--tri-space-24);
	margin-block-start: var(--tri-space-26);
}

/* reference: практика эксперта — #FAFBFF; border #E2E5EA; полоса #12295C */
.tri-sv-note--practice {
	background-color: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-inline-start: 3px solid var(--tri-color-navy);
}

/* reference: риск — #FDF3F1; border #F0CFC6; полоса #C1533A */
.tri-sv-note--risk {
	background-color: var(--tri-color-error-surface);
	border: var(--tri-border-width) solid var(--tri-color-error-border);
	border-inline-start: 3px solid var(--tri-color-error-accent);
}

/* reference: важно — #FFF8EC; border #F0DDBA; полоса #E9A13B */
.tri-sv-note--important {
	background-color: var(--tri-color-warn-surface);
	border: var(--tri-border-width) solid var(--tri-color-warn-border);
	border-inline-start: 3px solid var(--tri-color-warn-accent);
}

/* reference: заголовок врезки 13px/700 (риск — 12.5px/800 uppercase) */
.tri-sv-note__label {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted);
}

.tri-sv-note--risk .tri-sv-note__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-error-text);
}

.tri-sv-note--important .tri-sv-note__label {
	color: var(--tri-color-warn-text-strong);
}

/* reference: текст врезки 15.5px/1.6; margin-top:8px */
.tri-sv-note p {
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
	margin-block-start: var(--tri-space-8);
}

.tri-sv-note--risk p {
	color: var(--tri-color-error-text-soft);
}

.tri-sv-note--important p {
	color: var(--tri-color-warn-text);
}

/* reference: нормативная база — 1fr 1fr; gap:14px; margin-top:22px */
.tri-sv-legal {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--tri-space-14);
	margin-block-start: var(--tri-space-22);
	list-style: none;
	padding: 0;
}

/* reference: border rgba(18,41,92,0.09); radius 14px; padding 20px 22px */
.tri-sv-legal__item {
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.09);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-20) var(--tri-space-22);
	min-width: 0;
}

/* reference: номер документа 13px/800 + иконка 18x18; gap 10px */
.tri-sv-legal__num {
	display: flex;
	align-items: center;
	gap: var(--tri-space-10);
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

/* reference: 15.5px/800; lh 1.4; margin-top:10px */
.tri-sv-legal__title {
	font-size: var(--tri-fs-15-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin-block-start: var(--tri-space-10);
	line-height: var(--tri-lh-1-4);
}

/* reference: 13.5px/1.55 #5A6270; margin-top:8px */
.tri-sv-legal__why {
	font-size: var(--tri-fs-13-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-8);
}

/* reference: карточки базы знаний — repeat(3,1fr); gap:14px; margin-top:22px */
.tri-sv-wiki {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--tri-space-14);
	margin-block-start: var(--tri-space-22);
	list-style: none;
	padding: 0;
}

.tri-sv-wiki__link {
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.09);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-20) var(--tri-space-22);
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-8);
	height: 100%;
	text-decoration: none;
	transition: border-color var(--tri-duration-3) var(--tri-ease);
}

.tri-sv-wiki__link:hover,
.tri-sv-wiki__link:focus-visible {
	border-color: var(--tri-color-ink);
}

/* reference: 13px/700 #6B7280 */
.tri-sv-wiki__eyebrow {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted-soft);
}

/* reference: 15.5px/800; lh 1.4 */
.tri-sv-wiki__title {
	font-size: var(--tri-fs-15-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	line-height: var(--tri-lh-1-4);
}

/* reference: 13.5px/800; прижата к низу */
.tri-sv-wiki__more {
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	margin-block-start: auto;
}

/* ====================================================================
 * 13. FAQ
 * reference: #F5F8FF; padding:96px 0; margin-top:112px; 380px 1fr; gap 64px
 * ================================================================== */

.tri-sv-faq {
	background-color: var(--tri-color-surface-f5f8ff);
	/* reference (v3): margin-top 88px */
	margin-block-start: calc(var(--tri-space-88) * var(--tri-section-scale));
	scroll-margin-top: 150px;
}

.tri-sv-faq__grid {
	display: grid;
	gap: var(--tri-space-64);
}

/* reference: 38px/700; ls -0.014em; margin-top:14px */
/*
 * Вводная часть — карточка того же вида, что у FAQ программы обучения
 * и AI-агента: одна визуальная семья на трёх страницах (правки 14.09).
 */
.tri-sv-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-sv-faq__title {
	font-size: var(--tri-fs-38);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-014);
	margin: var(--tri-space-14) 0 0;
}

/* reference: 15.5px/1.6 #5A6270; margin-top:16px; max-width:64ch */
.tri-sv-faq__text {
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-16);
	max-width: var(--tri-measure);
}

/* reference: 14.5px/800; margin-top:18px */
.tri-sv-faq__link {
	display: inline-flex;
	align-items: center;
	gap: var(--tri-space-8);
	margin-block-start: var(--tri-space-18);
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	text-decoration: none;
}

/* reference: список вопросов — gap 10px */
.tri-sv-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-10);
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* reference: #FFFFFF; radius 14px; активный вопрос — рамка #12295C */
.tri-sv-faq__item {
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-divider);
	border-radius: var(--tri-radius-14);
	overflow: hidden;
}

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

/* reference: кнопка — padding 20px 24px; 16.5px/800; lh 1.4; gap 20px */
.tri-sv-faq__button {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--tri-space-20);
	background: none;
	border: 0;
	cursor: pointer;
	padding: var(--tri-space-20) var(--tri-space-24);
	text-align: left;
	font-family: inherit;
	font-size: var(--tri-fs-16-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	line-height: var(--tri-lh-1-4);
}

/* reference: знак «+» 20px/700, при раскрытии поворачивается на 45° */
.tri-sv-faq__sign {
	font-size: var(--tri-fs-20);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	flex-shrink: 0;
	transition: transform var(--tri-duration-32) var(--tri-ease);
}

.tri-sv-faq__button[aria-expanded="true"] .tri-sv-faq__sign {
	transform: rotate(45deg);
}

/* reference: ответ — padding 0 24px 20px; 15px/1.6 #5A6270; max-width 700px */
.tri-sv-faq__answer {
	padding: 0 var(--tri-space-24) var(--tri-space-20);
}

.tri-sv-faq__answer p {
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin: 0;
	max-width: 700px;
}

/* ====================================================================
 * 14. СВЯЗАННЫЕ УСЛУГИ
 * reference: border-top 1px #EBEDF1; padding:104px 0 0;
 * repeat(4,1fr); gap:18px; margin-top:40px
 * ================================================================== */

.tri-sv-related__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--tri-space-18);
	margin-block-start: var(--tri-space-40);
	list-style: none;
	padding: 0;
}

/* reference: radius 14px; padding 26px; gap 10px; hover border #16181D
   + shadow 0 10px 28px rgba(4,34,92,0.08) */
.tri-sv-related__card {
	background-color: var(--tri-color-surface-fafbff);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.1);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-26);
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-10);
	height: 100%;
	text-decoration: none;
	min-width: 0;
	transition:
		border-color var(--tri-duration-3) var(--tri-ease),
		box-shadow var(--tri-duration-32) var(--tri-ease);
}

.tri-sv-related__card:hover,
.tri-sv-related__card:focus-visible {
	border-color: var(--tri-color-ink);
	box-shadow: var(--tri-shadow-navy-28-08);
}

/* reference: тёмная карточка в ряду */
.tri-sv-related__card--dark {
	background-color: var(--tri-color-navy);
	border-color: var(--tri-color-navy);
}

/* reference: аббревиатура 13px/800; ls 0.04em */
.tri-sv-related__abbr {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-navy);
	letter-spacing: var(--tri-ls-p0-04);
}

/* reference: 17.5px/800; lh 1.35 */
.tri-sv-related__title {
	font-size: var(--tri-fs-17-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	line-height: var(--tri-lh-1-35);
}

/* reference: 14px/1.55 #5A6270 */
.tri-sv-related__text {
	font-size: var(--tri-fs-14);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
}

/* reference: 13.5px/800; прижата к низу */
.tri-sv-related__more {
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-navy);
	margin-block-start: auto;
}

.tri-sv-related__card--dark .tri-sv-related__abbr,
.tri-sv-related__card--dark .tri-sv-related__more {
	color: var(--tri-color-accent);
}

.tri-sv-related__card--dark .tri-sv-related__title {
	color: var(--tri-color-white);
}

.tri-sv-related__card--dark .tri-sv-related__text {
	color: var(--tri-color-on-dark-c8cdd6);
}

/* ====================================================================
 * 15. ФИНАЛЬНЫЙ CTA
 * reference: border-top 1px #EBEDF1; padding:112px 0 0;
 * панель #12295C + сетка-паттерн 56x56; radius 24px; 1.25fr 1fr
 * ================================================================== */




/* reference: вуаль linear-gradient(90deg,rgba(18,41,92,0.94),
   rgba(18,41,92,0.82) 55%, rgba(18,41,92,0.62)) */






/* reference: поля — rgba(255,255,255,0.14); border rgba(255,255,255,0.34);
   radius 10px; padding 13px 16px; 15px */






/* reference: правая колонка — rgba(255,255,255,0.06);
   border-left rgba(255,255,255,0.12); padding 40px; gap 12px */








/* ====================================================================
 * DESKTOP: точные сетки макета
 * ================================================================== */

@media (min-width: 768px) {
	/* Боковое меню макета кабинета помещается только с планшета. */
	.tri-sv-mock__body {
		grid-template-columns: 170px minmax(0, 1fr);
	}

	.tri-sv-mock__side {
		display: flex;
	}
}

@media (min-width: 1024px) {
	/* reference: repeat(4,1fr) */
	.tri-sv-hero__facts,
	.tri-sv-about__cards,
	.tri-sv-related__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	/* reference: 1.25fr 1fr */
	.tri-sv-about__pair {
		grid-template-columns: 1.25fr minmax(0, 1fr);
	}
	/* reference: 1fr 520px */
	.tri-sv-result__grid {
		grid-template-columns: minmax(0, 1fr) 520px;
	}
	/* reference: список результата в две колонки */
	.tri-sv-deliverables {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* reference: 1fr 1fr */
	.tri-sv-why__grid,
	.tri-sv-price__grid,
	.tri-sv-legal {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* reference: карточка с иллюстрацией 1fr 150px, тёмная 1fr 200px */
	.tri-sv-adv--media {
		grid-template-columns: minmax(0, 1fr) 150px;
	}
	.tri-sv-adv--dark.tri-sv-adv--media {
		grid-template-columns: minmax(0, 1fr) 200px;
	}
	/* reference: repeat(6,1fr) */
	.tri-sv-steps__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	/* reference: 1fr 1.2fr */
	.tri-sv-cabinet__grid {
		grid-template-columns: minmax(0, 1fr) 1.2fr;
	}
	/* reference: 440px 1fr */
	.tri-sv-case__card {
		grid-template-columns: 440px minmax(0, 1fr);
	}
	/* reference: 380px 1fr */
	.tri-sv-faq__grid {
		/* Ширина вводной колонки как у FAQ обучения и AI-агента. */
		grid-template-columns: 360px minmax(0, 1fr);
	}

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

	/* reference (v3): 320px 1fr — колонка текста у географии уже */
	.tri-sv-geo__grid {
		grid-template-columns: 320px minmax(0, 1fr);
	}
	/* reference: 360px 1fr */
	.tri-sv-experts__grid {
		/* Левая колонка уже: по правкам 14.09 карточки специалистов
		   должны быть крупнее. */
		grid-template-columns: 300px minmax(0, 1fr);
	}

	/* Вертикальный портрет: карточка выше, чем 3/4, — как в референсе. */
	.tri-sv-expert {
		aspect-ratio: 5 / 8;
	}
	/* reference: repeat(3,1fr) */
	.tri-sv-wiki {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/*
	 * reference (v3): колонок ровно столько, сколько специалистов, но
	 * не больше трёх. Жёсткие три оставили бы пустую колонку, когда
	 * над услугой работают один или двое.
	 */
	.tri-sv-experts__list {
		grid-template-columns: repeat(var(--tri-expert-cols, 3), minmax(0, 1fr));
	}
	/* reference: 280px 1fr */
	.tri-sv-article__grid {
		grid-template-columns: 280px minmax(0, 1fr);
	}
	/* reference: три карточки условий */
	.tri-sv-price__facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	/* reference: строки кейса в две колонки */
	.tri-sv-case__rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ====================================================================
 * НИЖЕ DESKTOP: смягчение внутренних отступов
 * ================================================================== */

@media (max-width: 1023px) {
	.tri-sv-hero__panel {
		padding: var(--tri-space-24);
		/*
		 * На телефоне панель немногим шире карточек внутри неё, и
		 * скругление 20px рядом с их 10px читалось как чужая деталь.
		 * 14px сохраняет иерархию «контейнер крупнее вложенного», но
		 * рамка первого экрана и мини-карточки становятся одной семьёй.
		 * Толщина и тон рамки у них уже общие.
		 */
		border-radius: var(--tri-radius-14);
	}

	.tri-sv-checklist,
	.tri-sv-ask,
	.tri-sv-price__panel,
	.tri-sv-calc,
	.tri-sv-adv {
		padding: var(--tri-space-24);
	}

	.tri-sv-case__body {
		padding: var(--tri-space-24);
	}

	.tri-sv-case__media {
		min-height: 240px;
	}

	.tri-sv-sample__frame {
		height: 280px;
	}

	/* Содержание не липнет, когда идёт над текстом. */
	.tri-sv-toc {
		position: static;
	}

	.tri-sv-article__grid {
		gap: var(--tri-space-32);
		padding-block-start: var(--tri-space-40);
	}

	.tri-sv-trust {
		gap: var(--tri-space-20);
	}
}

/* ------------------------------------------------------------------
 * ЦЕЛИ НАЖАТИЯ НА СЕНСОРНЫХ ЭКРАНАХ (мобильный этап 14.09)
 *
 * Правила стоят в конце файла намеренно: они перебивают display у
 * ссылок, иначе строчный элемент игнорирует минимальную высоту.
 * ---------------------------------------------------------------- */
@media (max-width: 1023px) {
	.tri-sv-nav__link,
	.tri-sv-toc__link,
	.tri-sv-faq__button,
	.tri-sv-calc__toggle,
	.tri-sv-sample__link {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}

	.tri-sv-faq__button {
		display: flex;
		justify-content: space-between;
	}

	.tri-sv-calc__toggle {
		justify-content: center;
	}
}