/*
 * ПОСАДОЧНАЯ, БЛОК 1 — ПЕРВЫЙ ЭКРАН.
 * Макеты: all-screens/01-hero.png и mobile/01-hero-mobile.png.
 * Зависит от landing/tokens.css и landing/base.css, подключается после них.
 *
 * КОМПОЗИЦИЯ МАКЕТА. Экран асимметричен: слева текстовая колонка примерно
 * в 45% ширины, справа портрет, перекрывающий браузерную раму, и рама,
 * уходящая за правый край экрана. Обрезка честная — секция режет её собой
 * (overflow: hidden в base.css), а не полупрозрачной заглушкой поверх.
 *
 * МОБИЛЬНЫЙ МАКЕТ ЕСТЬ: mobile/01-hero-mobile.png. Он не сжатый desktop —
 * у него свой состав и свой порядок, разобранные в блоке телефона в конце
 * файла. Общее с широким экраном одно: тезис, объяснение, действие,
 * доказательство; портрет и кейс встают ПОД действие и остаются
 * читаемыми, а не сжимаются в миниатюру.
 */

/* ---------------------------------------------------------------------- */
/* Каркас экрана                                                          */
/* ---------------------------------------------------------------------- */

.lp .lp-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*
	 * Место под сквозную фиксированную шапку и видимый ряд якорей.
	 * На телефоне навигация прокручивается второй строкой, поэтому одного
	 * размера шапки недостаточно: иначе первый заголовок окажется под ней.
	 */
	padding-top: clamp(11rem, 10rem + 3vw, 12rem);
	padding-bottom: var(--lp-space-xl);
}

@media (min-width: 64em) {
	.lp .lp-hero {
		/*
		 * svh, а не vh: на мобильных браузерах vh считается по экрану без
		 * адресной строки, и первый экран уезжает под неё. Потолок в 62rem
		 * не даёт композиции расползтись на очень высоком мониторе.
		 */
		min-height: min(84svh, 54rem);
	}
}

/* До 1200px шапка честно живёт в несколько строк; иначе элементы давят друг
   друга или первый заголовок уходит под них. */
@media (min-width: 75em) {
	.lp .lp-hero {
		padding-top: clamp(6rem, 4rem + 3vw, 8rem);
	}
}

.lp .lp-hero__inner {
	/*
	 * Зазор между рядами первого экрана вынесен в переменную не для красоты:
	 * ровно на эту величину портрет должен опуститься ниже своей колонки,
	 * чтобы встать НА нижнюю линию экрана, а не висеть над ней.
	 */
	--lp-hero-gap: clamp(2rem, 1rem + 3vw, 4rem);

	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--lp-hero-gap);
	width: 100%;
}

/* ---------------------------------------------------------------------- */
/* Шапка                                                                  */
/* ---------------------------------------------------------------------- */

.lp .lp-hero__header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--lp-z-float);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lp-space-md) var(--lp-space-lg);
	width: 100%;
	min-height: 4.75rem;
	padding:
		var(--lp-space-sm)
		max(var(--lp-gutter), calc((100vw - var(--lp-container)) / 2 + var(--lp-gutter)));
	background: var(--lp-field);
	border-bottom: 1px solid var(--lp-line);
	backdrop-filter: blur(14px);
}

@supports (background: color-mix(in srgb, black 50%, transparent)) {
	.lp .lp-hero__header {
		background: color-mix(in srgb, var(--lp-field) 92%, transparent);
	}
}

.lp .lp-hero__brand {
	margin-right: auto;
}

.lp .lp-hero__logo {
	width: auto;
	height: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
}

.lp .lp-hero__wordmark {
	font-family: var(--lp-font-display);
	font-size: var(--lp-text-h3);
	font-weight: var(--lp-display-weight);
	letter-spacing: var(--lp-tracking-nav);
	text-transform: uppercase;
	color: var(--lp-ink);
}

/* Якоря принадлежат посадочной и не должны смешиваться с меню услуг. */
.lp .lp-hero__nav--anchors {
	order: 5;
	display: block;
	width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.lp .lp-hero__nav--anchors::-webkit-scrollbar {
	display: none;
}

.lp .lp-hero__nav-list {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: max-content;
	gap: var(--lp-space-lg);
}

.lp .lp-hero__nav-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--lp-tap-min);
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-nav);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--lp-ink);
	text-decoration: none;
	transition: color var(--lp-duration) var(--lp-ease);
}

.lp .lp-hero__nav-link:hover {
	color: var(--lp-crimson);
}

.lp .lp-hero__header-cta {
	min-height: 44px;
	padding-left: var(--lp-space-md);
	padding-right: var(--lp-space-md);
}

/*
 * Сквозная навигация: <details> остаётся доступной и без JavaScript.
 *
 * ЗДЕСЬ ТОЛЬКО КНОПКА. Выпадающая панель и её раскладка принадлежат
 * components/lp-mega-menu.css — включая `position` самого <details>,
 * которым панель привязывается то к кнопке, то к шапке. Держать эту
 * привязку здесь нельзя: секции подключаются ПОСЛЕ компонентов и
 * перебивали бы широкую раскладку правилом той же силы.
 */
.lp .lp-site-menu {
	margin-left: 0;
}

.lp .lp-site-menu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lp-space-xs);
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--lp-space-sm);
	color: var(--lp-ink);
	border: 1px solid var(--lp-line-control);
	cursor: pointer;
	list-style: none;
}

.lp .lp-site-menu__toggle::-webkit-details-marker {
	display: none;
}

.lp .lp-site-menu__toggle-label {
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
}

.lp .lp-site-menu__burger,
.lp .lp-site-menu__burger::before,
.lp .lp-site-menu__burger::after {
	display: block;
	width: 1.125rem;
	height: 1px;
	background: currentColor;
	content: '';
	transition: transform var(--lp-duration) var(--lp-ease);
}

.lp .lp-site-menu__burger {
	position: relative;
}

.lp .lp-site-menu__burger::before,
.lp .lp-site-menu__burger::after {
	position: absolute;
	left: 0;
}

.lp .lp-site-menu__burger::before {
	top: -0.35rem;
}

.lp .lp-site-menu__burger::after {
	top: 0.35rem;
}

.lp .lp-site-menu[open] .lp-site-menu__burger {
	background: transparent;
}

.lp .lp-site-menu[open] .lp-site-menu__burger::before {
	transform: translateY(0.35rem) rotate(45deg);
}

.lp .lp-site-menu[open] .lp-site-menu__burger::after {
	transform: translateY(-0.35rem) rotate(-45deg);
}

/* ---------------------------------------------------------------------- */
/* Контакты в шапке                                                       */
/* ---------------------------------------------------------------------- */

/*
 * На узкой ширине контакты уходят СВОЕЙ строкой под навигацию: втиснуть
 * в один ряд логотип, иконки, номер и кнопку на 375 пикселях невозможно
 * без того, чтобы что-то из этого стало неприцельным.
 */
.lp .lp-hero__contacts {
	order: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lp-space-xs) var(--lp-space-md);
	width: 100%;
}

.lp .lp-hero__messengers {
	display: flex;
	align-items: center;
	gap: var(--lp-space-3xs);
}

/*
 * Мишень нажатия — 48px, как требует PRODUCT.md, при иконке в 1.5rem.
 * Иконка маленькая, промахнуться по ней пальцем легко, поэтому кликабельна
 * вся площадка вокруг неё, а не сам рисунок.
 */
.lp .lp-hero__messenger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--lp-tap-min);
	min-height: var(--lp-tap-min);
	padding: 0 var(--lp-space-2xs);
	color: var(--lp-ink);
	text-decoration: none;
	transition: opacity var(--lp-duration) var(--lp-ease), color var(--lp-duration) var(--lp-ease);
}

.lp .lp-hero__messenger:hover {
	opacity: 0.75;
	color: var(--lp-crimson);
}

.lp .lp-hero__messenger-icon {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
}

.lp .lp-hero__messenger-label {
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * ТЕЛЕФОН КРУПНЕЕ НАВИГАЦИИ, А НЕ вровень с ней. В шапке он не
 * пункт меню, а второе действие рядом с кнопкой: кто готов звонить
 * сейчас, должен найти номер глазами, а не вычитывать его из ряда
 * одинаковых ссылок.
 *
 * Разрядка МЕНЬШЕ навигационной, а не больше: на жирном
 * начертании широкие пробелы рассыпают номер на отдельные группы
 * цифр, и читать его становится дольше.
 */
.lp .lp-hero__phone {
	display: inline-flex;
	align-items: center;
	min-height: var(--lp-tap-min);
	font-size: 1.0625rem;
	font-weight: var(--lp-weight-bold);
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--lp-ink);
	text-decoration: none;
	transition: color var(--lp-duration) var(--lp-ease);
}

.lp .lp-hero__phone:hover {
	color: var(--lp-crimson);
}

@media (max-width: 74.99em) {
	/* На узкой и планшетной ширине действие уже есть в первом экране; в
	   шапке важнее контакты и короткий путь к разделам, чем второй такой CTA. */
	.lp .lp-hero__header {
		gap: var(--lp-space-xs);
		min-height: 4.5rem;
		padding-top: var(--lp-space-2xs);
		padding-bottom: var(--lp-space-2xs);
	}

	/*
	 * Уходит ВТОРАЯ КНОПКА, А НЕ КОНТАКТЫ. Действие уже есть ниже,
	 * под заголовком, а номер и мессенджеры в шапке остаются: с телефона
	 * звонят и пишут чаще, чем заполняют формы.
	 */
	.lp .lp-hero__header-cta {
		display: none;
	}

	/*
	 * Подпись «Услуги» уходит С ЭКРАНА, НО НЕ ИЗ РАЗМЕТКИ: место в строке
	 * она занимает, а имя кнопке даёт. Убери её `display: none` — и у кнопки
	 * не останется ни текста, ни атрибута, то есть читалка объявит просто
	 * «кнопка», а голосовое управление не найдёт «Услуги».
	 */
	.lp .lp-site-menu__toggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.lp .lp-hero__contacts {
		order: 0;
		width: auto;
	}

	.lp .lp-hero__messenger {
		min-width: 2.75rem;
		min-height: 2.75rem;
	}

	.lp .lp-site-menu__toggle {
		width: 2.75rem;
		min-width: 2.75rem;
		padding: 0;
	}
}

@media (max-width: 47.99em) {
	.lp .lp-hero__header {
		flex-wrap: nowrap;
	}

	.lp .lp-hero__brand {
		min-width: 0;
		margin-right: auto;
	}

	.lp .lp-hero__nav--anchors {
		display: none;
	}

	.lp .lp-hero__contacts {
		flex-wrap: nowrap;
		gap: var(--lp-space-3xs);
	}

	.lp .lp-hero__messenger-label {
		display: none;
	}
}

@media (min-width: 75em) {
	/* Места хватает — якоря, контакты и меню услуг встают в один ряд. */
	.lp .lp-hero__brand {
		margin-right: 0;
	}

	.lp .lp-hero__nav--anchors {
		order: 0;
		width: auto;
		margin-right: auto;
		overflow: visible;
	}

	.lp .lp-hero__nav--anchors .lp-hero__nav-list {
		gap: clamp(var(--lp-space-sm), 0.5rem + 1vw, var(--lp-space-lg));
	}

	.lp .lp-hero__contacts {
		order: 0;
		width: auto;
		flex-wrap: nowrap;
	}
}

/* ---------------------------------------------------------------------- */
/* Тезис и действия                                                       */
/* ---------------------------------------------------------------------- */

.lp .lp-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 4vw, 3.5rem);
	align-items: center;
}

@media (min-width: 64em) {
	.lp .lp-hero__grid {
		grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
		gap: var(--lp-space-lg);
		/*
		 * Колонки тянутся на всю высоту строки, а не центрируются каждая
		 * по себе. Без этого правая колонка оказывалась короче ряда, и
		 * портрет «висел в воздухе»: его низ равнялся по низу собственной
		 * коробки, а не по нижней линии первого экрана.
		 */
		align-items: stretch;
	}

	/* Текст по-прежнему стоит по центру — растягивается только колонка. */
	.lp .lp-hero__lead {
		align-self: center;
	}

	.lp .lp-hero__grid--solo {
		grid-template-columns: minmax(0, 1fr);
	}
}

.lp .lp-hero__title-line {
	display: block;
}

.lp .lp-hero__text {
	margin-top: var(--lp-space-lg);
	max-width: 30em;
}

.lp .lp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lp-space-md) var(--lp-space-2xl);
	margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.75rem);
}

/*
 * Строка доверия есть в разметке всегда, а показывается только на
 * телефоне: так в мобильном макете. На широком экране её место
 * занимает ссылка на кейсы рядом с кнопкой.
 */
.lp .lp-hero__marker {
	display: none;
}

.lp .lp-hero__cta {
	min-width: min(18rem, 100%);
}

/*
 * КНОПКА И ССЫЛКА НА КЕЙСЫ ДОЛЖНЫ СТОЯТЬ В ОДИН РЯД, КАК В МАКЕТЕ.
 * Базовые значения (18rem + зазор 4.5rem) считаны на широкий монитор:
 * левая колонка — 45% от 105rem-контейнера. На типичном ноутбучном
 * экране (1280–1550px) та же 45%-колонка заметно уже, и пара уже не
 * помещается в строку — ссылка падает под кнопку. Здесь колонка узкая
 * именно в этом диапазоне, поэтому кнопка и зазор сужаются вместе с ней.
 */
@media (min-width: 64em) {
	.lp .lp-hero__cta {
		min-width: min(14rem, 100%);
	}

	.lp .lp-hero__actions {
		gap: var(--lp-space-sm);
	}
}

/* ---------------------------------------------------------------------- */
/* Портрет и экран кейса                                                  */
/* ---------------------------------------------------------------------- */

/*
 * СЦЕНА ОДНА НА ВСЕ ШИРИНЫ. Разворот, лесенка и порядок наложения описаны
 * здесь один раз; широкий экран ниже меняет только МАСШТАБ — шаги ступеней,
 * силу перспективы и посадку портрета. Так телефон получает ту же сцену,
 * а не отдельную упрощённую вёрстку, которая живёт своей жизнью.
 *
 * Портрет и стопка стоят на одной нижней линии и перекрываются: на узкой
 * ширине места нет, и наезд честнее, чем сжатие обоих до нечитаемого.
 */
.lp .lp-hero__visual {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	min-width: 0;
	min-height: 20rem;
}

.lp .lp-hero__stack {
	position: relative;
	/* Стопка прижата вправо: слева на неё наезжает портрет. */
	width: 84%;
	margin-left: auto;
	perspective: 700px;
	perspective-origin: 30% 50%;
}

.lp .lp-hero__frame {
	/*
	 * РАЗВОРОТ УМЕРЕННЫЙ, А НЕ В ПОЛСОТНИ ГРАДУСОВ. Сильный поворот имел
	 * смысл, пока рам было четыре: он строил глубину, и края дальних экранов
	 * работали доказательством объёма. Сейчас блок показывает ОДИН главный
	 * кейс (см. lp-hero.php), и те же 46° просто отрезали от единственного
	 * доказательства треть ширины — содержимое экрана переставало читаться.
	 * На 34° сцена остаётся объёмной, а сайт клиента виден почти целиком.
	 */
	--lp-hero-frame-turn: -34deg;  /* вокруг вертикали: левый край вглубь */
	--lp-hero-frame-pitch: 1.5deg; /* лёгкий наклон верхнего края от зрителя */
	--lp-hero-step-x: 2rem;        /* ширина ступени вдоль плоскости экранов */
	--lp-hero-step-y: 1.2rem;      /* и высота ступени */

	/* Ближняя рама лежит выше всех — дальние получат меньший z-index. */
	position: relative;
	z-index: 1;

	/*
	 * ШИРИНА СЧИТАЕТСЯ ОТ ЧИСЛА СТУПЕНЕЙ. Вся лесенка обязана поместиться
	 * в колонку: каждый экран должен быть виден целиком, а не обрубком.
	 * Количество приходит из разметки (--lp-n) — вёрстка не может его
	 * угадать, а от него зависит ширина рамы.
	 *
	 * Коэффициент 0.6, а не единица: ступени уезжают ВДОЛЬ развёрнутой
	 * плоскости, и на экране их след короче собственной длины ровно из-за
	 * разворота. Считать как для фронтальной раскладки — значит зря
	 * отрезать от ширины экранов.
	 */
	width: calc(100% - (var(--lp-n, 1) - 1) * var(--lp-hero-step-x) * 0.6);
	margin-left: calc((var(--lp-n, 1) - 1) * var(--lp-hero-step-x) * 0.6);

	/*
	 * ТОЧКА ВРАЩЕНИЯ — ПРАВЫЙ КРАЙ. На развороте почти в полсотни градусов
	 * это принципиально: вокруг левого края рама уходила бы правым боком
	 * НА зрителя и вылезала за колонку. Вокруг правого она уводит вглубь
	 * левый бок, оставаясь в своих границах.
	 */
	transform-origin: right center;
	transform:
		rotateY(var(--lp-hero-frame-turn))
		rotateX(var(--lp-hero-frame-pitch))
		translate3d(
			calc(var(--lp-i, 0) * var(--lp-hero-step-x) * -1),
			calc(var(--lp-i, 0) * var(--lp-hero-step-y) * -1),
			0
		);
}

/*
 * Дальние рамы ложатся поверх ближней абсолютом и разъезжаются ступенями.
 * Спуск идёт ОТ ДАЛЬНЕЙ: самая глубокая стоит выше и левее всех, ближняя —
 * ниже и правее.
 */
.lp .lp-hero__frame + .lp-hero__frame {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(100% - (var(--lp-n, 1) - 1) * var(--lp-hero-step-x) * 0.6);
	/*
	 * Порядок наложения задан явно, а не отдан на откуп сортировке по оси Z:
	 * в разметке дальние рамы идут ПОСЛЕ ближней и без этого рисовались бы
	 * поверх неё.
	 */
	z-index: calc(1 - var(--lp-i, 0));
	/*
	 * Чем глубже в стопке, тем темнее — воздух между экранами гасит дальние.
	 * Затемнение слабое: из дальних рам виден только левый край с логотипом
	 * сайта, и гасить его сильно значит потерять единственное, по чему
	 * проект узнаётся.
	 */
	opacity: calc(1 - var(--lp-i, 0) * 0.07);
}

/*
 * Портрет стоит на той же нижней линии, что и стопка, и наезжает на неё
 * слева. Высота коробки, а не ширина, задаёт размер фигуры: пропорции
 * портрета вертикальные, и при object-fit: contain он упирается в высоту.
 */
.lp .lp-hero__portrait {
	position: absolute;
	left: -4%;
	bottom: 0;
	z-index: 2;
	width: 54%;
	max-height: none;
	height: 100%;
	object-fit: contain;
	object-position: left bottom;
}

@media (min-width: 64em) {
	.lp .lp-hero__visual {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		/*
		 * Колонка тянется на всю высоту ряда (align-items: stretch выше),
		 * поэтому портрету есть на что опереться низом. Минимум держит
		 * композицию, пока картинки ещё грузятся, — иначе экран дёргается
		 * в момент их появления.
		 */
		min-height: 29rem;
	}

	/* Наезжать больше не нужно — места хватает, стопка занимает всю колонку. */
	.lp .lp-hero__stack {
		width: 100%;
		margin-left: 0;
		/* Сцена глубже: на большом экране слабая перспектива читается плоско. */
		perspective: 1500px;
	}

	/* Ступени крупнее ровно настолько, насколько больше сама колонка. */
	.lp .lp-hero__frame {
		--lp-hero-step-x: 7rem;
		--lp-hero-step-y: 3rem;
	}

	.lp .lp-hero__portrait {
		/*
		 * Нижний край портрета совмещён с разделительной линией перед
		 * метками. Для этого фигура проходит ровно через межстрочный зазор
		 * между основной сеткой и строкой метаданных, но не проваливается
		 * ниже линии.
		 */
		left: -10%;
		bottom: calc(var(--lp-hero-gap) * -1);
		width: 62%;
		height: calc(100% + var(--lp-hero-gap));
	}
}

/* ---------------------------------------------------------------------- */
/* Нижние метки                                                           */
/* ---------------------------------------------------------------------- */

.lp .lp-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lp-space-md) var(--lp-space-lg);
	padding-top: var(--lp-space-md);
	border-top: 1px solid var(--lp-line);
}

.lp .lp-hero__caption {
	display: inline-flex;
	align-items: center;
	gap: var(--lp-space-md);
}

/* Четыре проверяемых условия занимают свободную полосу под метками, а не
   раздувают оффер до списка обещаний. */
.lp .lp-hero__proofs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	flex-basis: 100%;
	gap: var(--lp-space-sm) var(--lp-space-lg);
	width: 100%;
	margin: 0;
	padding-top: var(--lp-space-md);
	border-top: 1px solid var(--lp-line);
	list-style: none;
}

.lp .lp-hero__proof {
	display: flex;
	align-items: flex-start;
	gap: var(--lp-space-2xs);
	font-size: var(--lp-text-micro);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	line-height: 1.45;
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

.lp .lp-hero__proof .lp-marker__dot {
	margin-top: 0.38em;
	flex: 0 0 auto;
}

@media (min-width: 64em) {
	.lp .lp-hero__proofs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------- */
/* Чертёжный слой                                                         */
/* ---------------------------------------------------------------------- */

/*
 * Слой .lp-draft объявлен в base.css — здесь только координаты для этого
 * экрана: линия с красным пунктиром идёт над заголовком, перекрестие стоит
 * правее, в промежутке между текстом и портретом.
 */
.lp .lp-hero__draft {
	--lp-draft-line-y: 20%;
	--lp-draft-cross-x: 38%;
	--lp-draft-cross-y: 8%;
}

/* ---------------------------------------------------------------------- */
/* Редакционный маршрут: «запрос → сайт → аналитика»                     */
/* ---------------------------------------------------------------------- */

.lp .lp-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--lp-space-xs);
	margin: 0 0 var(--lp-space-md);
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	line-height: 1.35;
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

.lp .lp-hero__eyebrow .lp-marker__dot {
	flex: 0 0 auto;
}

.lp .lp-hero__route {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--lp-space-xs);
	margin: 0;
	padding: var(--lp-space-md) 0;
	border-top: 1px solid var(--lp-line);
	border-bottom: 1px solid var(--lp-line);
	list-style: none;
}

.lp .lp-hero__route-step {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--lp-space-2xs);
	align-items: baseline;
	min-width: 0;
}

.lp .lp-hero__route-point {
	grid-row: 1 / span 2;
	align-self: center;
	width: 0.55rem;
	height: 0.55rem;
	border: 1px solid var(--lp-crimson);
	border-radius: 50%;
	box-shadow: 0 0 0 0.22rem var(--lp-field);
}

.lp .lp-hero__route-number {
	font-family: var(--lp-font-num);
	font-size: var(--lp-text-micro);
	letter-spacing: 0.05em;
	color: var(--lp-crimson);
}

.lp .lp-hero__route-title {
	font-family: var(--lp-font-display);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3rem);
	font-weight: var(--lp-display-weight-soft);
	line-height: 1;
	letter-spacing: var(--lp-tracking-nav);
	text-transform: uppercase;
	color: var(--lp-ink);
}

/* ---------------------------------------------------------------------- */
/* Первый экран, направление «редакционная архитектура»                  */
/* ---------------------------------------------------------------------- */

.lp .lp-hero__title {
	/*
	 * БЕЗ ЛИМИТА ШИРИНЫ. При 8.8ch здесь заголовок оставался узким и на
	 * планшетной, и на «ноутбучной» ширине (48–74.99em), где крупный кегль
	 * из --lp-text-display уже вырос почти до максимума: колонка рвалась на
	 * пять-шесть строк вместо трёх заданных редактором. Лимит по факту
	 * нужен только на телефоне — там он объявлен отдельно, ниже по файлу.
	 */
	max-width: none;
	line-height: 0.83;
	text-wrap: initial;
}

/*
 * ЗАГОЛОВОК БЕЗ ПЛАШКИ. В макете 01 все три строки H1 набраны одной светлой
 * краской: выделение последней строки бордовой заливкой было домыслом
 * вёрстки. Плашка ломала и ритм — строка «одна система» вставала уже
 * остальных и тянула глаз вниз, к декору, а не к офферу.
 */
.lp .lp-hero__title-line:last-child {
	margin-top: 0.06em;
}

.lp .lp-hero__text {
	max-width: 32em;
}

.lp .lp-hero__meta {
	min-height: 2.75rem;
}

@media (min-width: 75em) {
	.lp .lp-hero {
		padding-bottom: clamp(2.25rem, 1.4rem + 2vw, 4.5rem);
	}

	.lp .lp-hero__inner {
		--lp-hero-gap: clamp(1.5rem, 0.9rem + 2vw, 3rem);
	}

	.lp .lp-hero__grid {
		grid-template-columns: minmax(0, 0.39fr) minmax(8.5rem, 0.12fr) minmax(0, 0.49fr);
		gap: 0;
		min-height: clamp(32rem, 38vw, 42rem);
	}

	.lp .lp-hero__lead {
		z-index: 3;
		align-self: center;
		padding: var(--lp-space-lg) var(--lp-space-lg) var(--lp-space-lg) 0;
	}

	.lp .lp-hero__title {
		/* Переносы H1 задаёт редактор в ACF; не ломаем их ещё раз CSS-лимитом. */
		max-width: none;
		font-size: clamp(4.5rem, 4vw + 1.25rem, 7rem);
	}

	.lp .lp-hero__route {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-self: stretch;
		gap: 0;
		margin: clamp(1rem, 2vw, 2.5rem) 0;
		padding: 0;
		border: 0;
	}

	.lp .lp-hero__route::before {
		position: absolute;
		top: 12%;
		bottom: 12%;
		left: 0.26rem;
		width: 1px;
		border-left: 1px dashed var(--lp-crimson);
		content: '';
	}

	.lp .lp-hero__route-step {
		grid-template-columns: 1rem 1fr;
		grid-template-rows: auto auto;
		column-gap: var(--lp-space-sm);
		padding: clamp(1.15rem, 1vw, 1.75rem) 0;
	}

	.lp .lp-hero__route-point {
		position: relative;
		z-index: 1;
		width: 0.56rem;
		height: 0.56rem;
		box-shadow: 0 0 0 0.28rem var(--lp-field);
	}

	.lp .lp-hero__route-number {
		font-size: var(--lp-text-label);
	}

	.lp .lp-hero__route-title {
		font-size: clamp(1.2rem, 1.2vw, 1.65rem);
	}

	.lp .lp-hero__visual {
		z-index: 1;
		min-height: 0;
		overflow: visible;
	}

	.lp .lp-hero__stack {
		position: absolute;
		right: -3%;
		bottom: 4%;
		width: 86%;
		margin: 0;
		perspective: none;
	}

	.lp .lp-hero__frame {
		width: 100%;
		margin: 0;
		transform: rotate(-4deg);
		transform-origin: right center;
	}

	.lp .lp-hero__portrait {
		left: -13%;
		bottom: -0.5rem;
		z-index: 2;
		width: 47%;
		height: auto;
		max-height: none;
		object-position: left bottom;
	}

	.lp .lp-hero__meta {
		position: relative;
		z-index: 4;
		margin-top: calc(var(--lp-hero-gap) * -0.2);
	}
}

@media (max-width: 47.99em) {
	.lp .lp-hero__title {
		max-width: 9ch;
	}

	.lp .lp-hero__route {
		margin-top: 0;
	}

	.lp .lp-hero__route-title {
		font-size: 1.05rem;
	}
}

/* ---------------------------------------------------------------------- */
/* Первый экран: техническая схема вокруг реального кейса                */
/* ---------------------------------------------------------------------- */

.lp .lp-hero__diagnostics {
	display: grid;
	gap: var(--lp-space-sm);
	margin: var(--lp-space-lg) 0 0;
	padding: var(--lp-space-md) 0;
	border-top: 1px solid var(--lp-line);
	border-bottom: 1px solid var(--lp-line);
	list-style: none;
}

.lp .lp-hero__diagnostic {
	position: relative;
	display: grid;
	grid-template-columns: 0.75rem minmax(0, 1fr);
	column-gap: var(--lp-space-xs);
	align-items: start;
}

.lp .lp-hero__diagnostic-wire {
	display: none;
}

.lp .lp-hero__traffic-arrows,
.lp .lp-hero__offer-pointer,
.lp .lp-hero__lead-signal {
	display: none;
}

.lp .lp-hero__diagnostic-point {
	position: relative;
	width: 0.6rem;
	height: 0.6rem;
	margin-top: 0.35rem;
	border: 1px solid var(--lp-crimson);
	border-radius: 50%;
	box-shadow: 0 0 0 0.24rem var(--lp-field), inset 0 0 0 0.16rem var(--lp-field);
	background: var(--lp-crimson);
}

.lp .lp-hero__diagnostic-copy,
.lp .lp-hero__journey-copy {
	display: grid;
	min-width: 0;
}

.lp .lp-hero__diagnostic-title,
.lp .lp-hero__journey-title,
.lp .lp-hero__case-caption-label {
	font-family: var(--lp-font-display);
	font-size: var(--lp-text-label);
	font-weight: var(--lp-display-weight-soft);
	letter-spacing: var(--lp-tracking-label);
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--lp-ink);
}

.lp .lp-hero__diagnostic-text,
.lp .lp-hero__journey-text {
	margin-top: 0.35rem;
	font-size: var(--lp-text-micro);
	font-weight: var(--lp-weight-medium);
	line-height: 1.45;
	color: var(--lp-ink-muted);
}

/* Нижняя полоса — отдельный, хорошо считываемый итог схемы. */
.lp .lp-hero__journey-rail {
	display: grid;
	gap: var(--lp-space-md);
	margin-top: var(--lp-space-lg);
	padding: var(--lp-space-md) 0 0;
	border-top: 3px solid var(--lp-burgundy);
}

.lp .lp-hero__journey {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lp-space-md) var(--lp-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp .lp-hero__journey-step {
	--lp-journey-delay: 40ms;

	position: relative;
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: var(--lp-space-xs);
	align-items: center;
}

.lp .lp-hero__journey-step:nth-child(2) {
	--lp-journey-delay: 160ms;
}

.lp .lp-hero__journey-step:nth-child(3) {
	--lp-journey-delay: 280ms;
}

.lp .lp-hero__journey-step:nth-child(4) {
	--lp-journey-delay: 400ms;
}

.lp .lp-hero__journey-icon {
	position: relative;
	display: grid;
	width: 4rem;
	height: 4rem;
	place-items: center;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(173, 19, 36, 0.24), rgba(173, 19, 36, 0) 68%);
	box-shadow: inset 0 0 0 2px var(--lp-field), 0 0 1rem rgba(173, 19, 36, 0.18);
	transform: translateY(0);
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease-out;
}

/*
 * КОЛЬЦО ДОРИСОВЫВАЕТСЯ ПО КОНТУРУ. Линия идёт от 12 часов по часовой стрелке
 * и замыкается в целую окружность — 2px, непрозрачный crimson, без
 * притушенной альфы и без статичного разрыва, что был здесь раньше.
 *
 * Анимируется сам процент прохода (--lp-journey-ring) — под него заведён
 * @property ниже, иначе браузер не умеет плавно интерполировать аргумент
 * conic-gradient. Кольцо — по-прежнему donut, не заливка: conic-gradient
 * красит целый круг, а mask (exclude content-box) вырезает середину,
 * оставляя только 2px по краю.
 */
.lp .lp-hero__journey-icon::before {
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: inherit;
	background: conic-gradient(var(--lp-crimson) var(--lp-journey-ring, 100%), transparent var(--lp-journey-ring, 100%));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	content: '';
	transition: filter 220ms ease-out;
	animation: lp-journey-ring-draw 760ms cubic-bezier(0.65, 0, 0.35, 1) var(--lp-journey-delay) backwards;
}

.lp .lp-hero__journey-icon img {
	position: relative;
	z-index: 1;
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
	transform: scale(1);
	transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), filter 220ms ease-out;
	animation: lp-journey-symbol-enter 520ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--lp-journey-delay) + 80ms) backwards;
}

@media (hover: hover) and (pointer: fine) {
	.lp .lp-hero__journey-icon:hover {
		box-shadow: inset 0 0 0 2px var(--lp-field), 0 0.65rem 1.35rem rgba(173, 19, 36, 0.3);
		transform: translateY(-0.2rem);
	}

	.lp .lp-hero__journey-icon:hover::before {
		filter: drop-shadow(0 0.2rem 0.3rem rgba(247, 49, 60, 0.34));
	}

	.lp .lp-hero__journey-icon:hover img {
		filter: drop-shadow(0 0.25rem 0.45rem rgba(247, 49, 60, 0.38));
		transform: scale(1.1);
	}
}

.lp .lp-hero__journey-number {
	margin-bottom: 0.2rem;
	font-family: var(--lp-font-num);
	font-size: var(--lp-text-micro);
	letter-spacing: 0.08em;
	color: var(--lp-crimson);
}

.lp .lp-hero__case-caption {
	display: grid;
	gap: var(--lp-space-2xs);
	margin: 0;
	padding: var(--lp-space-sm) 0 0;
	border-top: 1px solid var(--lp-line);
	text-transform: uppercase;
}

.lp .lp-hero__case-caption-value {
	font-family: var(--lp-font-num);
	font-size: var(--lp-text-label);
	letter-spacing: var(--lp-tracking-label);
	color: var(--lp-crimson);
}

@media (min-width: 75em) {
	.lp .lp-hero {
		padding-bottom: clamp(2.25rem, 1.4rem + 2vw, 4.5rem);
	}

	.lp .lp-hero__inner {
		--lp-hero-gap: clamp(1.5rem, 0.9rem + 2vw, 3rem);
	}

	.lp .lp-hero__grid {
		position: relative;
		grid-template-columns: minmax(0, 0.41fr) minmax(0, 0.59fr);
		gap: 0;
		min-height: clamp(34rem, 38vw, 42rem);
	}

	.lp .lp-hero__lead {
		position: relative;
		z-index: 5;
		align-self: center;
		padding: var(--lp-space-lg) var(--lp-space-lg) var(--lp-space-lg) 0;
	}

	.lp .lp-hero__title {
		max-width: none;
		font-size: clamp(4.35rem, 4vw + 1.25rem, 7rem);
		line-height: 0.84;
	}

	.lp .lp-hero__text {
		max-width: 29em;
	}

	.lp .lp-hero__visual {
		grid-column: 2;
		z-index: 2;
		min-height: 0;
		overflow: visible;
	}

	.lp .lp-hero__stack {
		position: absolute;
		right: -2%;
		bottom: 9%;
		width: 92%;
		margin: 0;
		perspective: 1500px;
		perspective-origin: 30% 50%;
	}

	.lp .lp-hero__frame {
		width: 100%;
		margin: 0;
		transform:
			rotateY(var(--lp-hero-frame-turn))
			rotateX(var(--lp-hero-frame-pitch))
			translate3d(
				calc(var(--lp-i, 0) * var(--lp-hero-step-x) * -1),
				calc(var(--lp-i, 0) * var(--lp-hero-step-y) * -1),
				0
			);
		transform-origin: right center;
		box-shadow: 0 1.75rem 3rem rgba(0, 0, 0, 0.34);
	}

	.lp .lp-hero__portrait {
		left: -12%;
		bottom: 1%;
		z-index: 3;
		width: 48%;
		height: auto;
		max-height: none;
		object-position: left bottom;
	}

	.lp .lp-hero__diagnostics {
		position: absolute;
		z-index: 4;
		inset: 0;
		display: block;
		margin: 0;
		padding: 0;
		border: 0;
		pointer-events: none;
	}

	.lp .lp-hero__diagnostic {
		position: absolute;
		display: block;
		width: min(12rem, 15vw);
	}

	.lp .lp-hero__diagnostic-point {
		position: absolute;
		z-index: 2;
		left: 0;
		top: 0;
		margin: 0;
	}

	.lp .lp-hero__diagnostic-copy {
		position: relative;
		z-index: 1;
		width: 10rem;
		margin-left: 2.1rem;
		padding-top: 0;
	}

	.lp .lp-hero__diagnostic-wire {
		position: absolute;
		display: block;
		border-color: rgba(247, 49, 60, 0.75);
		border-style: dashed;
		opacity: 0.85;
		content: '';
	}

	.lp .lp-hero__diagnostic--1 {
		left: 55%;
		top: 2%;
		width: 31%;
		height: clamp(7.5rem, 9vw, 10rem);
	}

	.lp .lp-hero__diagnostic--1 .lp-hero__diagnostic-copy {
		position: absolute;
		left: 0;
		top: 0;
		width: 11rem;
		margin: 0;
	}

	.lp .lp-hero__diagnostic--1 .lp-hero__diagnostic-point,
	.lp .lp-hero__diagnostic--1 .lp-hero__diagnostic-wire {
		display: none;
	}

	.lp .lp-hero__traffic-arrows {
		position: absolute;
		left: clamp(8.5rem, 11vw, 12rem);
		top: 0.25rem;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: flex-start;
		justify-content: space-around;
	}

	.lp .lp-hero__traffic-arrow {
		--lp-traffic-drop: 82%;

		position: relative;
		display: block;
		width: 1.4rem;
		height: var(--lp-traffic-drop);
		filter: drop-shadow(0 0.2rem 0.35rem rgba(173, 19, 36, 0.28));
		animation: lp-traffic-drop 2.8s var(--lp-ease) infinite;
	}

	.lp .lp-hero__traffic-arrow:nth-child(2) {
		--lp-traffic-drop: 88%;
		animation-delay: -1.15s;
	}

	.lp .lp-hero__traffic-arrow:nth-child(3) {
		--lp-traffic-drop: 68%;
		animation-delay: -2.05s;
	}

	.lp .lp-hero__traffic-arrow::before {
		position: absolute;
		left: calc(50% - 1px);
		top: 0;
		bottom: 0.58rem;
		width: 2px;
		border-radius: 2px;
		background: linear-gradient(to bottom, rgba(247, 49, 60, 0.18), rgba(247, 49, 60, 0.94) 72%);
		content: '';
	}

	.lp .lp-hero__traffic-arrow::after {
		position: absolute;
		left: calc(50% - 0.45rem);
		bottom: 0;
		width: 0.9rem;
		height: 0.72rem;
		background: var(--lp-crimson);
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		content: '';
	}

	.lp .lp-hero__diagnostic--2 {
		left: 65%;
		top: 25%;
		width: 24rem;
		height: 14rem;
	}

	/*
	 * ПОДПИСЬ УЗКАЯ И В ДВЕ СТРОКИ — как в макете 01-hero.png. Дело не в
	 * красоте: она стоит в коридоре между фигурой и экраном кейса, а коридор
	 * после укрупнения портрета — около 97px при ширине окна 1440. Строка в
	 * 8.5rem (136px) туда не помещалась и ложилась человеку на голову.
	 * Правый край подписи привязан к локтю поводка, поэтому ширина и отступ
	 * меняются парой: сумма (ширина + 0.5rem) и есть отступ.
	 */
	.lp .lp-hero__diagnostic--2 .lp-hero__diagnostic-copy {
		position: absolute;
		left: -6.25rem;
		top: 0.15rem;
		width: 5.75rem;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.lp .lp-hero__diagnostic--2 .lp-hero__diagnostic-point {
		left: 0;
		top: 13rem;
	}

	.lp .lp-hero__diagnostic--2 .lp-hero__diagnostic-wire {
		display: none;
	}

	.lp .lp-hero__offer-pointer {
		position: absolute;
		left: -6.25rem;
		top: 5rem;
		display: block;
		width: 3.45rem;
		height: 2px;
		background: rgba(247, 49, 60, 0.9);
		filter: drop-shadow(0 0.18rem 0.28rem rgba(173, 19, 36, 0.24));
	}

	/*
	 * Диагональ поводка ведёт от локтя ровно в точку на экране: по
	 * горизонтали ей нужно пройти 2.8rem (от конца прямого отрезка на
	 * -6.25rem + 3.45rem до левого края выноски), по вертикали — 8rem
	 * (от top: 5rem до точки на top: 13rem). Отсюда и длина √(2.8² + 8²),
	 * и угол arctg(8 / 2.8): сдвинешь подпись — пересчитай оба числа,
	 * иначе линия повиснет мимо точки.
	 */
	.lp .lp-hero__offer-pointer::before {
		position: absolute;
		left: 100%;
		top: 0;
		width: 8.48rem;
		height: 2px;
		background: inherit;
		transform: rotate(70.7deg);
		transform-origin: left center;
		content: '';
	}

	.lp .lp-hero__offer-pointer::after {
		content: none;
	}

	.lp .lp-hero__diagnostic--3 {
		right: 6%;
		bottom: 0;
		width: 15rem;
		height: 7.5rem;
	}

	.lp .lp-hero__diagnostic--3 .lp-hero__diagnostic-copy {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 15rem;
		min-height: 4.35rem;
		align-content: center;
		margin: 0;
		padding: 0.75rem 1rem 0.75rem 4rem;
	}

	.lp .lp-hero__diagnostic--3 .lp-hero__diagnostic-point {
		left: 1.6rem;
		top: 0;
	}

	.lp .lp-hero__diagnostic--3 .lp-hero__diagnostic-wire {
		left: 1.88rem;
		top: 0.4rem;
		width: 1px;
		height: 2.9rem;
		border-width: 0 0 0 1px;
	}

	.lp .lp-hero__lead-signal {
		position: absolute;
		z-index: 2;
		left: 0.9rem;
		bottom: 1.05rem;
		display: block;
		width: 2.35rem;
		height: 2.35rem;
		border: 1px solid var(--lp-crimson);
		background: var(--lp-field);
	}

	.lp .lp-hero__lead-signal::before {
		position: absolute;
		left: 0.62rem;
		top: 0.55rem;
		width: 0.8rem;
		height: 0.45rem;
		border-left: 2px solid var(--lp-crimson);
		border-bottom: 2px solid var(--lp-crimson);
		transform: rotate(-45deg);
		content: '';
	}

	.lp .lp-hero__journey-rail {
		position: relative;
		z-index: 6;
		grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem);
		align-items: stretch;
		gap: clamp(1.25rem, 2vw, 3rem);
		margin-top: calc(var(--lp-hero-gap) * -0.35);
		padding: clamp(1rem, 1vw, 1.5rem) clamp(1rem, 1.1vw, 1.75rem);
		border: 1px solid var(--lp-line);
		border-top: 3px solid var(--lp-burgundy);
		background: rgba(14, 14, 16, 0.82);
	}

	.lp .lp-hero__journey {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: clamp(0.75rem, 1.5vw, 2rem);
	}

	.lp .lp-hero__journey-step {
		grid-template-columns: clamp(4.15rem, 4vw, 4.85rem) minmax(0, 1fr);
		gap: var(--lp-space-xs);
	}

	.lp .lp-hero__journey-step:not(:last-child)::after {
		position: absolute;
		right: calc(clamp(0.75rem, 1.5vw, 2rem) * -1);
		top: calc(50% - 0.375rem);
		width: clamp(1.4rem, 1.9vw, 2.35rem);
		height: 0.75rem;
		background: var(--lp-crimson);
		clip-path: polygon(
			0 42%,
			calc(100% - 0.65rem) 42%,
			calc(100% - 0.65rem) 10%,
			100% 50%,
			calc(100% - 0.65rem) 90%,
			calc(100% - 0.65rem) 58%,
			0 58%
		);
		content: '';
		transform: scaleX(1);
		transform-origin: left center;
		animation: lp-journey-arrow-enter 420ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--lp-journey-delay) + 360ms) backwards;
	}

	.lp .lp-hero__journey-step:not(:last-child)::before {
		content: none;
	}

	.lp .lp-hero__journey-icon {
		width: clamp(4.15rem, 4vw, 4.85rem);
		height: clamp(4.15rem, 4vw, 4.85rem);
	}

	.lp .lp-hero__journey-icon img {
		width: 2.5rem;
		height: 2.5rem;
	}

	.lp .lp-hero__journey-title {
		font-size: clamp(0.82rem, 0.68rem + 0.32vw, 1rem);
	}

	.lp .lp-hero__journey-text {
		font-size: clamp(0.65rem, 0.55rem + 0.2vw, 0.78rem);
	}

	.lp .lp-hero__case-caption {
		align-content: center;
		padding: 0 0 0 clamp(1rem, 1.5vw, 2rem);
		border-top: 0;
		border-left: 1px solid var(--lp-line-strong);
		text-align: right;
	}
}

/*
 * Тип для --lp-journey-ring обязателен: без @property браузер не умеет
 * интерполировать пользовательское свойство между кадрами и просто прыгает
 * с 0% на 100%, а не дорисовывает конус кадр за кадром.
 */
@property --lp-journey-ring {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 100%;
}

@keyframes lp-journey-ring-draw {
	from {
		--lp-journey-ring: 0%;
	}

	to {
		--lp-journey-ring: 100%;
	}
}

/* ---------------------------------------------------------------------- */
/* Финальная сверка с полированным макетом                                */
/* ---------------------------------------------------------------------- */

@media (min-width: 75em) {
	/* Не центрируем композицию по высоте viewport: после фиксированной шапки
	   оставляем только компактный служебный отступ. */
	.lp .lp-hero {
		justify-content: flex-start;
		padding-top: clamp(5.75rem, 5.25rem + 0.8vw, 6.5rem);
	}

	.lp .lp-hero__grid {
		grid-template-columns: minmax(0, 0.405fr) minmax(0, 0.595fr);
		min-height: clamp(36rem, 37vw, 44rem);
	}

	.lp .lp-hero__lead {
		padding-right: clamp(2rem, 3vw, 4rem);
	}

	.lp .lp-hero__title {
		font-size: clamp(4.25rem, 3.4vw + 1rem, 6rem);
		line-height: 0.83;
	}

	.lp .lp-hero__title-line {
		white-space: nowrap;
	}

	.lp .lp-hero__text {
		max-width: 31em;
		line-height: 1.62;
	}

	/*
	 * СЦЕНА КРУПНЕЕ, ГЛАВНЫЙ В НЕЙ — ЧЕЛОВЕК. Экран кейса растёт и уходит
	 * правым краем за границу секции: обрезка честная, её делает сама секция
	 * (`overflow: hidden` в base.css), и она же говорит, что проект больше
	 * окна. Портрет растёт СИЛЬНЕЕ экрана и стоит перед ним — на первом
	 * экране продают не скриншот, а специалиста, который за него отвечает.
	 */
	.lp .lp-hero__stack {
		right: -6%;
		bottom: 13%;
		width: 82%;
	}

	.lp .lp-hero__frame {
		box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.38);
	}

	/*
	 * РАЗМЕР ФИГУРЫ УПИРАЕТСЯ В ВЫСОТУ РЯДА, А НЕ ВО ВКУС. Портрет стоит
	 * низом на базовой линии и растёт вверх по своей пропорции (≈1:1.3):
	 * лишние проценты ширины упираются макушкой в фиксированную шапку.
	 * Поэтому фигура заодно опускается ниже ряда — срез приходится ровно
	 * на черту рейла, как в макете, и освободившаяся высота уходит в рост.
	 */
	.lp .lp-hero__portrait {
		left: -10%;
		bottom: -5%;
		width: 53%;
	}

	.lp .lp-hero__journey-rail {
		margin-top: calc(var(--lp-hero-gap) * -0.2);
		background: rgba(12, 12, 14, 0.72);
	}

	/* В макете пиктограммы — спокойные технические маркеры, а не светящиеся
	   бейджи. Кольцо — только одно, то, что рисует ::before: раньше здесь
	   ещё был инсетный box-shadow того же красного по самому краю контейнера,
	   и получались два концентричных кольца — тусклое статичное снаружи и
	   яркое анимированное внутри. Статичное убрано. */
	.lp .lp-hero__journey-icon {
		background: rgba(173, 19, 36, 0.08);
	}

	.lp .lp-hero__journey-icon::before {
		inset: 0.18rem;
		padding: 2px;
		background: conic-gradient(var(--lp-crimson) var(--lp-journey-ring, 100%), transparent var(--lp-journey-ring, 100%));
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
	}

	.lp .lp-hero__journey-icon img {
		width: 2.35rem;
		height: 2.35rem;
	}
}

/* На компактном desktop дублирующая CTA в шапке уступает место меню.
   Основная кнопка уже находится прямо под оффером. */
@media (min-width: 75em) and (max-width: 89.99em) {
	.lp .lp-hero__header-cta {
		display: none;
	}
}

@keyframes lp-journey-symbol-enter {
	from {
		opacity: 0.45;
		filter: blur(0.08rem);
		transform: scale(0.76);
	}

	to {
		opacity: 1;
		filter: blur(0);
		transform: scale(1);
	}
}

@keyframes lp-journey-arrow-enter {
	from {
		opacity: 0.25;
		transform: scaleX(0);
	}

	to {
		opacity: 1;
		transform: scaleX(1);
	}
}

@keyframes lp-traffic-drop {
	0%,
	100% {
		opacity: 0.45;
		transform: translateY(-0.35rem);
	}

	50% {
		opacity: 1;
		transform: translateY(0.35rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp .lp-hero__traffic-arrow {
		animation: none;
	}

	.lp .lp-hero__journey-icon,
	.lp .lp-hero__journey-icon::before,
	.lp .lp-hero__journey-icon img,
	.lp .lp-hero__journey-step::after {
		animation: none;
	}

	.lp .lp-hero__journey-icon:hover,
	.lp .lp-hero__journey-icon:hover::before,
	.lp .lp-hero__journey-icon:hover img {
		transform: none;
	}
}

@media (max-width: 47.99em) {
	.lp .lp-hero__diagnostic-title {
		font-size: 0.88rem;
	}

	.lp .lp-hero__journey {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------- */
/* ТЕЛЕФОН. Макет: output/design/landing-v2/mobile/01-hero-mobile.png      */
/* ---------------------------------------------------------------------- */

/*
 * У мобильного экрана СВОЙ макет, а не сжатый desktop, и он короче по
 * составу: в нём нет ни диагностических выносок вокруг портрета, ни рейла
 * «запрос → посадочная → Директ → Метрика». Содержание не теряется — тот же
 * маршрут четырьмя шагами набран в мобильном макете блока 3
 * (`mobile/03-system-mobile.png`), и там ему просторнее. На первом экране
 * телефона остаётся только то, ради чего на него пришли: тезис, объяснение,
 * действие и доказательство.
 *
 * Блок стоит ПОСЛЕДНИМ в файле: он перебивает правила той же силы, которые
 * написаны выше для широких экранов, и без порядка следования они бы спорили.
 */

@media (max-width: 47.99em) {

	/*
	 * Воздух под шапкой считается от неё самой. Общие 11rem заложены под
	 * шапку, которая до 1200px честно живёт в несколько строк; на телефоне
	 * она одна строка в 4.5rem, и от лишних семи сантиметров пустоты
	 * этикетка и заголовок уезжали ниже сгиба.
	 */
	.lp .lp-hero {
		padding-top: 6.25rem;
		padding-bottom: var(--lp-space-lg);
	}

	/*
	 * ШАПКА НА ТЕЛЕФОНЕ: логотип, номер, мессенджеры, бургер —
	 * всё в одну строку. В макете там только вордмарк и бургер, но
	 * владелец попросил контакты: с телефона звонят и пишут чаще, чем
	 * заполняют формы.
	 *
	 * Четыре предмета в 375 пикселей влезают впритык, и места в строке
	 * нет ни на что лишнее. Контакты здесь главнее логотипа, поэтому
	 * сжимается логотип и промежутки, а не номер и не мессенджеры.
	 */
	.lp .lp-hero__header {
		gap: 0.5rem;
	}

	/*
	 * НОМЕР РАСТЁТ ВМЕСТЕ С ЭКРАНОМ. Постоянный кегль пришлось бы брать под
	 * самый узкий телефон — и на 390–430 px номер оставался бы мелким при
	 * свободном месте в строке. Формула прямая: на 375 px номеру остаётся
	 * ~130 px ширины, и он набран 14px; каждый следующий пиксель экрана
	 * отдаётся номеру, пока тот не дорастёт до 18px (к ~410 px). Запас
	 * в 8 px оставлен на то, что San Francisco на iPhone шире Segoe UI,
	 * по которому снимались замеры.
	 */
	.lp .lp-hero__phone {
		font-size: clamp(0.875rem, 11.67vw - 1.86rem, 1.125rem);
		letter-spacing: 0;
	}

	.lp .lp-hero__contacts {
		gap: 0.4rem;
	}

	.lp .lp-hero__messengers {
		gap: 0.25rem;
	}

	/*
	 * Мишень — 36px: меньше нельзя, это нижняя граница того, во что
	 * попадают пальцем без промаха. Внутренних полей у кнопки мессенджера
	 * здесь нет: с общими 0.5rem по бокам кружок сжимался до 20px внутри
	 * своих 36, и иконка выглядела точкой рядом с крупным номером. Теперь
	 * кружок почти во всю мишень — крупнее на две трети без единого
	 * лишнего пикселя в строке.
	 */
	.lp .lp-hero__messenger,
	.lp .lp-site-menu__toggle {
		min-width: 2.25rem;
		width: 2.25rem;
		min-height: 2.25rem;
	}

	.lp .lp-hero__messenger {
		padding: 0;
	}

	.lp .lp-hero__messenger-icon {
		width: 2.125rem;
		height: 2.125rem;
	}

	/*
	 * Логотип уменьшается высотой, а не `max-width`: ширина у него `auto`,
	 * и ограничение ширины при заданной высоте сплющило бы знак. 24px —
	 * из этого места строка и получает ширину под крупные контакты.
	 */
	.lp .lp-hero__logo {
		height: 1.5rem;
	}

	/*
	 * Узкие телефоны (уже 375 px): четырём предметам в строке тесно,
	 * и номер пришлось бы набирать мельче 14px. Уходит ЛОГОТИП, а не
	 * контакты: на своём сайте посетителю нужнее позвонить, чем ещё раз
	 * увидеть, куда он попал, — тем более что вордмарк есть в подвале.
	 */
	@media (max-width: 23.43em) {
		.lp .lp-hero__brand {
			display: none;
		}

		/* Без логотипа места в строке с запасом — номер снова крупный. */
		.lp .lp-hero__phone {
			font-size: 1rem;
		}

		/*
		 * К правому краю бургер прижимал логотип своим margin-right: auto.
		 * Логотипа нет — прижимает сам бургер, иначе он вставал вплотную
		 * к номеру, а справа оставалась пустая полоса.
		 */
		.lp .lp-site-menu {
			margin-left: auto;
		}
	}

	/*
	 * ЗАГОЛОВОК ЛОМАЕТСЯ ТАМ, ГДЕ ЕГО СЛОМАЛ ВЛАДЕЛЕЦ, И БОЛЬШЕ НИГДЕ.
	 * Выше по файлу у H1 стоят `max-width: 9ch` и унаследованный
	 * `text-wrap: balance`: вместе они рвали «Сайт и Яндекс» ещё раз, и
	 * плакатные три строки макета превращались в пять с дырой вокруг тире.
	 * Строка целиком помещается в ширину телефона с запасом — рвать её
	 * было нечем, кроме этих двух правил.
	 */
	.lp .lp-hero__title {
		max-width: none;
		font-size: clamp(2.4rem, 13.3vw, 3.4rem);
		line-height: 0.95;
		text-wrap: initial;
	}

	.lp .lp-hero__text {
		margin-top: var(--lp-space-md);
	}

	/* Кнопка во всю ширину — как в макете. */
	.lp .lp-hero__actions {
		gap: var(--lp-space-sm);
		margin-top: var(--lp-space-lg);
	}

	.lp .lp-hero__cta {
		width: 100%;
		min-width: 0;
	}

	/*
	 * Ссылка на кейсы уступает место строке доверия: в мобильном макете под
	 * кнопкой стоит «10+ лет в performance-маркетинге», а ссылки нет.
	 */
	.lp .lp-hero__link {
		display: none;
	}

	.lp .lp-hero__marker {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		margin: var(--lp-space-md) 0 0;
		font-family: var(--lp-font-num);
		font-size: var(--lp-text-label);
		letter-spacing: var(--lp-tracking-label);
		text-transform: uppercase;
		color: var(--lp-ink);
	}

	/* Выноски вокруг портрета и рейл маршрута — см. врезку выше. */
	.lp .lp-hero__diagnostics,
	.lp .lp-hero__journey {
		display: none;
	}

	/*
	 * Рейл остаётся ради подписи к кейсу, но перестаёт быть рейлом: без
	 * четырёх шагов бордовая черта сверху отчёркивала бы пустоту.
	 */
	.lp .lp-hero__journey-rail {
		gap: 0;
		margin-top: var(--lp-space-md);
		padding-top: 0;
		border-top: 0;
	}

	/*
	 * СЦЕНА ДОХОДИТ ДО КРАЯ ОКНА. В макете экран кейса обрезан правым краем
	 * телефона — обрезка и есть композиция: она говорит, что проект не
	 * помещается в экран, а не что его ужали до миниатюры. Отрицательное
	 * поле ровно в поле контейнера; секция режет вылет собой
	 * (`overflow: hidden` в base.css), заглушки поверх нет.
	 */
	/*
	 * ВЫСОТА СЦЕНЫ ЗАДАЁТ РОСТ ФИГУРЫ. У портрета `object-fit: contain`, и
	 * при вертикальной пропорции (≈1:1.3) его рисованная высота считается
	 * от ШИРИНЫ коробки, а не от её высоты. Поэтому высота здесь — это
	 * запас: она должна быть не меньше того, во что вырастет фигура,
	 * иначе снизу останется пустая полоса, а сама фигура не увеличится.
	 */
	.lp .lp-hero__visual {
		min-height: 21rem;
		margin-right: calc((var(--lp-gutter) + 2rem) * -1);
	}

	.lp .lp-hero__stack {
		width: 82%;
	}

	/*
	 * ФИГУРА КРУПНАЯ И НАЕЗЖАЕТ НА ЭКРАН — так в мобильном макете: человек
	 * стоит перед проектом, а не рядом с ним. Перекрытие левой трети экрана
	 * не потеря: справа он всё равно уходит за край окна, и читается по
	 * центральной части, которая остаётся открытой.
	 */
	.lp .lp-hero__portrait {
		left: -9%;
		width: 62%;
	}

	/*
	 * Подпись к кейсу встаёт одной строкой у правого края, и к ней слева
	 * ведёт черта с точкой — так в макете. Черта — псевдоэлемент, а не
	 * рамка сверху: рамка отчёркивала бы строку целиком, а нужен
	 * поводок, приводящий глаз к названию проекта.
	 */
	.lp .lp-hero__case-caption {
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: center;
		gap: 0.45rem;
		margin-top: var(--lp-space-2xs);
		padding-top: 0;
		border-top: 0;
	}

	.lp .lp-hero__case-caption::before {
		grid-column: 1;
		height: 1px;
		content: '';
		background-image: linear-gradient(to right, transparent, var(--lp-crimson));
	}

	.lp .lp-hero__case-caption-label {
		grid-column: 2;
	}

	/* Срединная точка между подписью и названием — как в макете. */
	.lp .lp-hero__case-caption-value {
		grid-column: 3;
	}

	.lp .lp-hero__case-caption-value::before {
		content: '· ';
		color: var(--lp-ink-muted);
	}
}

/* ---------------------------------------------------------------------- */
/* ВАРИАНТ «ДВА КАНАЛА»: маркетплейс + свой интернет-магазин              */
/* ---------------------------------------------------------------------- */

/*
 * Включается разметкой (.lp-hero--channels), когда в блоке загружен экран
 * маркетплейса. Левая колонка, шапка и цепочка — те же; меняется только
 * правая сцена: два устройства одного магазина с выносками.
 *
 * Блок стоит в самом конце файла и пишет правила через модификатор секции:
 * он обязан перебить и широкий экран, и телефонный блок выше.
 */

.lp .lp-hero--channels .lp-hero__visual--channels {
	position: relative;
	display: block;
	min-height: 0;
}

.lp .lp-hero--channels .lp-hero__devices {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10.5;
	perspective: 1800px;
	perspective-origin: 70% 50%;
}

/*
 * РАМЫ — УСТРОЙСТВА, А НЕ ОКНА БРАУЗЕРА. Толстая графитовая оправа вокруг
 * экрана читается как планшет и монитор; ближний правый край чуть крупнее
 * дальнего левого — обе рамы развёрнуты к зрителю одинаково, как в макете.
 */
.lp .lp-hero--channels .lp-hero__device {
	position: absolute;
	padding: 0 0.55rem 0.55rem;
	border-radius: 1rem;
	background: #101012;
	transform: rotateY(-14deg) rotateX(2deg);
	transform-origin: right center;
}

.lp .lp-hero--channels .lp-hero__device .lp-frame__bar {
	padding: 0.45rem 0.35rem;
}

.lp .lp-hero--channels .lp-hero__device .lp-frame__shot {
	border-radius: 0.3rem;
}

.lp .lp-hero--channels .lp-hero__device--market {
	left: 0;
	bottom: 12%;
	z-index: 1;
	width: 44%;
	filter: brightness(0.92);
}

/*
 * Экран маркетплейса обрезан по ширине: в макете видна только левая часть
 * витрины — шапка площадки и две карточки. Целиком он стал бы мелкой
 * таблицей товаров, в которой ничего не разобрать.
 */
.lp .lp-hero--channels .lp-hero__device--market .lp-frame__shot {
	aspect-ratio: 10 / 11;
	object-fit: cover;
	object-position: left top;
}

.lp .lp-hero--channels .lp-hero__device--store {
	right: 0;
	top: 6%;
	z-index: 2;
	width: 72%;
}

/* Выноски: на узких экранах остаётся только итоговая подпись под сценой. */
.lp .lp-hero--channels .lp-hero__callout {
	display: none;
	margin: 0;
	font-family: var(--lp-font-display);
	font-size: var(--lp-text-label);
	font-weight: var(--lp-display-weight-soft);
	letter-spacing: var(--lp-tracking-label);
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--lp-ink);
}

.lp .lp-hero--channels .lp-hero__callout--channels {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin-top: var(--lp-space-sm);
	font-size: var(--lp-text-micro);
	color: var(--lp-ink-muted);
}

.lp .lp-hero--channels .lp-hero__callout-point {
	position: relative;
	flex: 0 0 auto;
	width: 0.7rem;
	height: 0.7rem;
	border: 1px solid var(--lp-crimson);
	border-radius: 50%;
	background: var(--lp-crimson);
	box-shadow: 0 0 0 0.22rem var(--lp-field), 0 0 0 0.3rem rgba(247, 49, 60, 0.45);
}

.lp .lp-hero--channels .lp-hero__callout-wire {
	display: none;
}

/* Итог цепочки — вместо подписи к кейсу, тем же местом справа. */
.lp .lp-hero--channels .lp-hero__journey-result {
	margin: 0;
	padding: var(--lp-space-sm) 0 0;
	border-top: 1px solid var(--lp-line);
	font-family: var(--lp-font-display);
	font-size: var(--lp-text-label);
	font-weight: var(--lp-display-weight-soft);
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--lp-crimson);
}

@media (min-width: 75em) {
	.lp .lp-hero--channels .lp-hero__grid {
		grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
		min-height: clamp(34rem, 36vw, 42rem);
	}

	/*
	 * Заголовок здесь длиннее: «Свой интернет-магазин —» против «Сайт и
	 * Яндекс». Строки по-прежнему не переносятся, поэтому кегль ниже —
	 * ровно настолько, чтобы самая длинная строка встала в колонку.
	 */
	.lp .lp-hero--channels .lp-hero__title {
		font-size: clamp(3.6rem, 2.9vw + 0.9rem, 5.6rem);
		line-height: 0.9;
	}

	.lp .lp-hero--channels .lp-hero__text {
		max-width: 34em;
	}

	/* Сцена во всю высоту ряда и чуть за правый край, как экран кейса. */
	.lp .lp-hero--channels .lp-hero__visual--channels {
		grid-column: 2;
		align-self: stretch;
	}

	.lp .lp-hero--channels .lp-hero__devices {
		position: absolute;
		right: -3%;
		top: 13%;
		width: 103%;
	}

	.lp .lp-hero--channels .lp-hero__device {
		padding: 0 0.7rem 0.7rem;
		border-radius: 1.2rem;
		box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.5);
	}

	.lp .lp-hero--channels .lp-hero__device .lp-frame__bar {
		padding: 0.55rem 0.4rem;
	}

	/* ВЫНОСКИ. Точка с кольцом, подпись и пунктир к своему устройству. */
	.lp .lp-hero--channels .lp-hero__callout {
		position: absolute;
		z-index: 4;
		display: flex;
		align-items: center;
		gap: 0.85rem;
		white-space: nowrap;
	}

	.lp .lp-hero--channels .lp-hero__callout-wire {
		position: absolute;
		display: block;
		border: 0 dashed rgba(247, 49, 60, 0.8);
		pointer-events: none;
	}

	/* Кейс — крупное кольцо-мишень и две строки-«заглушки» под названием. */
	.lp .lp-hero--channels .lp-hero__callout--case {
		left: 24%;
		top: 2%;
		align-items: flex-start;
	}

	.lp .lp-hero--channels .lp-hero__callout--case .lp-hero__callout-point {
		width: 2.6rem;
		height: 2.6rem;
		border: 2px solid var(--lp-crimson);
		background: radial-gradient(circle, var(--lp-crimson) 0 0.3rem, transparent 0.32rem);
		box-shadow: 0 0 1.2rem rgba(173, 19, 36, 0.35);
	}

	.lp .lp-hero--channels .lp-hero__callout--case .lp-hero__callout-text {
		padding-top: 0.2rem;
		padding-bottom: 1.3rem;
		background:
			linear-gradient(var(--lp-line-strong), var(--lp-line-strong)) 0 calc(100% - 0.7rem) / 5.5rem 2px no-repeat,
			linear-gradient(var(--lp-line-strong), var(--lp-line-strong)) 0 100% / 4rem 2px no-repeat;
	}

	/* Пунктир от кольца вниз и направо — к верхней кромке своего сайта. */
	.lp .lp-hero--channels .lp-hero__callout--case .lp-hero__callout-wire {
		left: 1.3rem;
		top: 2.6rem;
		width: 14rem;
		height: 4.6rem;
		border-left-width: 1px;
		border-bottom-width: 1px;
	}

	.lp .lp-hero--channels .lp-hero__callout--market {
		left: 5%;
		top: 22%;
	}

	.lp .lp-hero--channels .lp-hero__callout--market .lp-hero__callout-wire {
		left: 0.35rem;
		top: 0.7rem;
		height: 1.6rem;
		border-left-width: 1px;
	}

	.lp .lp-hero--channels .lp-hero__callout--store {
		right: 12%;
		top: 3%;
		transform: rotate(-4deg);
	}

	.lp .lp-hero--channels .lp-hero__callout--store .lp-hero__callout-wire {
		left: 0.35rem;
		top: 0.7rem;
		height: 1.5rem;
		border-left-width: 1px;
	}

	/* Итог сцены — под обеими рамами, пунктиром к каждой из них. */
	.lp .lp-hero--channels .lp-hero__callout--channels {
		left: 46%;
		bottom: -1%;
		margin: 0;
		font-size: var(--lp-text-micro);
		color: var(--lp-ink);
	}

	.lp .lp-hero--channels .lp-hero__callout--channels .lp-hero__callout-wire {
		right: 100%;
		bottom: 50%;
		width: 9rem;
		height: 1.4rem;
		margin-right: 1.6rem;
		border-left-width: 1px;
		border-bottom-width: 1px;
	}

	.lp .lp-hero--channels .lp-hero__callout--channels::after {
		width: 4.5rem;
		height: 0;
		border-top: 1px dashed rgba(247, 49, 60, 0.8);
		content: '';
	}

	/* Цепочка без плашки: тонкая черта сверху, как в макете. */
	.lp .lp-hero--channels .lp-hero__journey-rail {
		grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem);
		margin-top: 0;
		padding: var(--lp-space-md) 0 0;
		border: 0;
		border-top: 1px solid rgba(173, 19, 36, 0.6);
		background: none;
	}

	.lp .lp-hero--channels .lp-hero__journey-result {
		align-self: center;
		padding: 0.6rem 0 0.6rem clamp(1rem, 1.5vw, 2rem);
		border-top: 0;
		border-left: 1px solid var(--lp-line-strong);
		font-size: clamp(0.85rem, 0.7rem + 0.35vw, 1.05rem);
		text-align: center;
	}
}

@media (max-width: 47.99em) {
	/* Самая длинная строка заголовка встаёт в ширину телефона целиком. */
	.lp .lp-hero--channels .lp-hero__title {
		font-size: clamp(1.9rem, 9vw, 3rem);
	}

	/* На телефоне сцена в ширину контейнера: два устройства и так мелкие. */
	.lp .lp-hero--channels .lp-hero__visual--channels {
		margin-right: 0;
	}

	.lp .lp-hero--channels .lp-hero__device {
		padding: 0 0.35rem 0.35rem;
		border-radius: 0.6rem;
	}

	.lp .lp-hero--channels .lp-hero__device .lp-frame__bar {
		gap: 0.25rem;
		padding: 0.3rem 0.2rem;
	}

	.lp .lp-hero--channels .lp-hero__device .lp-frame__dot {
		width: 0.35rem;
		height: 0.35rem;
	}

	.lp .lp-hero--channels .lp-hero__journey-result {
		display: none;
	}
}

/*
 * Планшет и узкий ноутбук: колонка текста — меньше половины экрана, и без
 * отдельного кегля «Свой интернет-магазин —» рассыпался на пять строк.
 * Строки держатся целыми, как на широком экране.
 */
@media (min-width: 48em) and (max-width: 74.99em) {
	.lp .lp-hero--channels .lp-hero__title {
		font-size: clamp(2.4rem, 4.3vw, 3.6rem);
		line-height: 0.94;
	}

	.lp .lp-hero--channels .lp-hero__title-line {
		white-space: nowrap;
	}
}