/*
 * LANDING V2 — СОБСТВЕННАЯ СИСТЕМА АНАЛИТИКИ.
 * Макет: 04 · «Вы видите не только заявки, но и результат рекламы».
 *
 * ЧЕТЫРЕ ЯРУСА, ОДИН РИТМ. Сверху — обещание и снимок кабинета, ниже —
 * цепочка «запрос → выручка», пример двух кампаний и доступ к отчёту.
 * Ярусы разделены волосяной чертой, а не фоном: каждая часть со своей
 * подложкой превратила бы секцию в четыре чужие друг другу карточки.
 *
 * ЦВЕТА ГРАФИКОВ ЖИВУТ ЗДЕСЬ. Синий, бирюзовый и зелёный нужны ровно
 * одному блоку страницы — полосам примера. В общих токенах они стали бы
 * приглашением раскрасить ими что-нибудь ещё.
 */

.lp .lp-analytics {
	position: relative;
	overflow: hidden;

	--lp-tone-cost: var(--lp-crimson);
	--lp-tone-leads: #3E7BFA;
	--lp-tone-cpl: #22A3C4;
	--lp-tone-deals: #2FA84F;
	--lp-tone-revenue: #2FA84F;
}

/* Чертёжная сетка на фоне — та же, что у разбора интерфейсов: обе секции
   показывают экран продукта и обязаны читаться одним миром. */
.lp .lp-analytics__grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--lp-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--lp-line) 1px, transparent 1px);
	background-size: 3rem 3rem;
	opacity: 0.28;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
	mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}

.lp .lp-analytics__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(2.5rem, 4vw, 4.5rem);
}

/* --- Верхний ярус: обещание и снимок ------------------------------------- */

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

.lp .lp-analytics__intro {
	display: grid;
	align-content: start;
	gap: clamp(1rem, 2vw, 1.65rem);
	min-width: 0;
}

.lp .lp-analytics__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
	font-size: var(--lp-text-label);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

.lp .lp-analytics__eyebrow-num {
	color: var(--lp-crimson);
}

.lp .lp-analytics__eyebrow-num::after {
	display: inline-block;
	width: 1px;
	height: 0.9em;
	margin-left: 0.85rem;
	content: '';
	background: var(--lp-line-strong);
	vertical-align: -0.05em;
}

.lp .lp-analytics__title {
	max-width: 14ch;
	font-size: clamp(2.5rem, 1.7rem + 3.4vw, 5rem);
	line-height: 0.9;
	text-transform: uppercase;
}

/* Красным выделена ровно та часть обещания, ради которой блок написан. */
.lp .lp-analytics__title-accent {
	color: var(--lp-crimson);
}

.lp .lp-analytics__text {
	max-width: 36em;
	margin: 0;
}

/*
 * Четыре показателя кабинета — карточки с рамкой, как в макете: они стоят
 * напротив снимка интерфейса и без рамки растекались бы по всей колонке,
 * теряя связь «пункт — экран». Рамка волосяная и неяркая, спорить со
 * снимком ей нечем.
 */
.lp .lp-analytics__items {
	display: grid;
	gap: clamp(0.65rem, 1.2vw, 0.9rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp .lp-analytics__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.85rem;
	align-items: start;
	padding: clamp(0.85rem, 1.6vw, 1.15rem) clamp(0.9rem, 1.8vw, 1.35rem);
	background: var(--lp-frame-surface);
	border: 1px solid var(--lp-line-strong);
	transition: border-color var(--lp-duration) var(--lp-ease);
}

.lp .lp-analytics__item:hover {
	border-color: var(--lp-line-control);
}

.lp .lp-analytics__item-index {
	font-family: var(--lp-font-display);
	font-size: 1.2rem;
	line-height: 1.15;
	color: var(--lp-crimson);
}

/*
 * Иконка стоит между номером и названием, как в макете. Размер привязан к
 * строке заголовка, а не задан в пикселях: карточка растёт вместе с типом,
 * и приколоченная иконка на большом экране выглядела бы значком из
 * панели инструментов.
 */
.lp .lp-analytics__item--iconed {
	grid-template-columns: auto auto minmax(0, 1fr);
}

.lp .lp-analytics__item-glyph {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--lp-ink-muted);
	transform: translateY(-0.15rem);
	transition: color var(--lp-duration) var(--lp-ease);
}

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

.lp .lp-analytics__item-body {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
}

.lp .lp-analytics__item-title {
	font-family: var(--lp-font-display);
	font-size: clamp(0.95rem, 0.88rem + 0.24vw, 1.1rem);
	font-weight: var(--lp-display-weight-soft);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink);
}

.lp .lp-analytics__item-text {
	font-size: var(--lp-text-sm);
	line-height: 1.5;
	color: var(--lp-ink-muted);
}

/*
 * Снимок кабинета. Рамка и тень те же, что у разбора интерфейсов; красная
 * кромка сверху — метка продукта, а не шапка окна браузера.
 *
 * РАЗВОРОТ ТОТ ЖЕ, ЧТО У ПЕРВОГО ЭКРАНА. Углы, ось и точка вращения взяты
 * из lp-hero.css один в один: обе секции показывают снимок продукта, и
 * два разных разворота на одной странице читались бы небрежностью, а не
 * приёмом. Левый край уходит вглубь, вращение — вокруг правого края:
 * вокруг левого рама наезжала бы правым боком на зрителя и вылезала за
 * колонку.
 *
 * Перспектива объявлена на самой раме, а не на родителе: у первого экрана
 * родителем служит стопка из нескольких рам, а здесь снимок один, и лишняя
 * обёртка в разметке ради одного свойства не нужна.
 */
.lp .lp-analytics__shot {
	--lp-analytics-shot-turn: -34deg;  /* вокруг вертикали: левый край вглубь */
	--lp-analytics-shot-pitch: 1.5deg; /* лёгкий наклон верхнего края от зрителя */
	--lp-analytics-shot-depth: 1600px; /* удалённость камеры, см. ниже */

	position: relative;
	margin: 0;
	min-width: 0;
	padding: clamp(0.4rem, 0.8vw, 0.7rem);
	background: var(--lp-frame-surface);
	border: 1px solid var(--lp-line-control);
	box-shadow: var(--lp-frame-shadow);
	transform:
		perspective(var(--lp-analytics-shot-depth))
		rotateY(var(--lp-analytics-shot-turn))
		rotateX(var(--lp-analytics-shot-pitch));
	transform-origin: right center;
}

/*
 * КАМЕРА ДАЛЬШЕ, ЧЕМ У ПЕРВОГО ЭКРАНА, ПРИ ТОМ ЖЕ УГЛЕ. У hero под
 * разворотом стоит узкая стопка, и перспектива в 700px сходится на ней
 * мягко; здесь рама вдвое шире, и та же камера уводила дальний край почти
 * вдвое — от экрана оставалась узкая полоса у правого края, а половина
 * колонки была пустой. Сам hero на широком экране делает ровно это же
 * (lp-hero.css: perspective 1500px в медиазапросе).
 */

/* Красная кромка внутри рамки: метка продукта над самим экраном. */
.lp .lp-analytics__shot::before {
	display: block;
	height: 3px;
	margin-bottom: clamp(0.4rem, 0.8vw, 0.7rem);
	content: '';
	background: var(--lp-crimson);
}

/*
 * Внешний контур — чертёжная обводка вокруг рамки, как в макете. Она
 * повторяет наклон вместе с рамкой и потому не спорит с сеткой на фоне.
 */
.lp .lp-analytics__shot::after {
	position: absolute;
	inset: clamp(-1.4rem, -2vw, -0.9rem);
	content: '';
	pointer-events: none;
	border: 1px solid var(--lp-line-strong);
}

.lp .lp-analytics__shot-image {
	display: block;
	width: 100%;
	height: auto;
}

.lp .lp-analytics__shot-caption {
	padding: 0.85rem clamp(0.9rem, 2vw, 1.25rem) 1rem;
	font-size: var(--lp-text-micro);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink-muted);
	border-top: 1px solid var(--lp-line-strong);
}

/* --- Цепочка «от запроса до выручки» ------------------------------------- */

.lp .lp-analytics__flow {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding-top: clamp(2rem, 3.5vw, 3rem);
	border-top: 1px solid var(--lp-line-strong);
}

.lp .lp-analytics__flow-head {
	display: grid;
	gap: 0.35rem;
}

.lp .lp-analytics__flow-title {
	margin: 0;
	font-family: var(--lp-font-display);
	font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
	font-weight: var(--lp-display-weight-soft);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-crimson);
}

.lp .lp-analytics__flow-text {
	margin: 0;
	font-family: var(--lp-font-display);
	font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
	font-weight: var(--lp-display-weight-soft);
	line-height: 1.15;
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink);
}

.lp .lp-analytics__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: clamp(1.5rem, 2.5vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp .lp-analytics__step {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.6rem;
	min-width: 0;
	text-align: center;
}

/*
 * Кружок с номером. В макете внутри него пиктограмма; номер честнее:
 * пиктограммы пришлось бы заводить полем и объяснять владельцу, какие
 * из них уместны, а порядок шагов он и так задаёт руками.
 */
.lp .lp-analytics__step-mark {
	display: grid;
	place-items: center;
	width: clamp(3.4rem, 6vw, 4.5rem);
	aspect-ratio: 1;
	font-family: var(--lp-font-display);
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem);
	color: var(--lp-crimson);
	border: 1px solid var(--lp-crimson);
	border-radius: 50%;
}

/* Иконка в кружке: те же пропорции, что у цифры, которую она заменяет. */
.lp .lp-analytics__step-glyph {
	width: 45%;
	height: 45%;
}

/*
 * Стрелка между шагами. Рисуется у самого шага, а не отдельным элементом
 * разметки: у последнего шага её нет, а пустые «соединители» в HTML
 * пришлось бы прятать от читалки по одному.
 */
.lp .lp-analytics__step + .lp-analytics__step .lp-analytics__step-mark::before {
	position: absolute;
	top: clamp(1.7rem, 3vw, 2.25rem);
	right: calc(100% - clamp(1rem, 2vw, 1.5rem));
	width: clamp(1.5rem, 2.5vw, 2.25rem);
	height: 1px;
	content: '';
	background: var(--lp-crimson);
}

.lp .lp-analytics__step + .lp-analytics__step .lp-analytics__step-mark::after {
	position: absolute;
	top: clamp(1.45rem, 3vw, 2rem);
	right: calc(100% - clamp(1rem, 2vw, 1.5rem));
	width: 0.5rem;
	height: 0.5rem;
	content: '';
	border-top: 1px solid var(--lp-crimson);
	border-right: 1px solid var(--lp-crimson);
	transform: rotate(45deg);
}

.lp .lp-analytics__step-title {
	font-family: var(--lp-font-display);
	font-size: clamp(0.95rem, 0.88rem + 0.24vw, 1.1rem);
	font-weight: var(--lp-display-weight-soft);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink);
}

.lp .lp-analytics__step-text {
	max-width: 18em;
	font-size: var(--lp-text-sm);
	line-height: 1.45;
	color: var(--lp-ink-muted);
}

/* --- Иллюстративный пример ----------------------------------------------- */

.lp .lp-analytics__example {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	padding-top: clamp(2rem, 3.5vw, 3rem);
	border-top: 1px solid var(--lp-line-strong);
}

.lp .lp-analytics__example-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin: 0;
	font-size: var(--lp-text-label);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
}

.lp .lp-analytics__example-label {
	color: var(--lp-crimson);
}

.lp .lp-analytics__example-note {
	color: var(--lp-ink-muted);
}

.lp .lp-analytics__campaigns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

/*
 * Кампании — единственные карточки с рамкой в секции: здесь рамка и нужна,
 * она отделяет один пример от другого и делает сравнение возможным.
 */
.lp .lp-analytics__campaign {
	display: grid;
	align-content: start;
	gap: clamp(1rem, 2vw, 1.5rem);
	min-width: 0;
	padding: clamp(1.1rem, 2vw, 1.75rem);
	background: var(--lp-frame-surface);
	border: 1px solid var(--lp-line-strong);
}

.lp .lp-analytics__campaign-head {
	display: grid;
	gap: 0.3rem;
	padding-bottom: clamp(0.75rem, 1.5vw, 1rem);
	border-bottom: 1px solid var(--lp-line-strong);
}

.lp .lp-analytics__campaign-title {
	font-family: var(--lp-font-display);
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
	font-weight: var(--lp-display-weight-soft);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink);
}

.lp .lp-analytics__campaign-subtitle {
	font-size: var(--lp-text-sm);
	color: var(--lp-ink-muted);
}

.lp .lp-analytics__bars {
	display: grid;
	gap: 0.7rem;
	margin: 0;
}

.lp .lp-analytics__bar {
	display: grid;
	grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1.6fr);
	align-items: center;
	gap: 0.75rem;
}

.lp .lp-analytics__bar-label {
	margin: 0;
	font-size: var(--lp-text-sm);
	line-height: 1.3;
	color: var(--lp-ink-muted);
}

.lp .lp-analytics__bar-track {
	margin: 0;
	min-width: 0;
}

/*
 * Полоса. Ширина приходит инлайн-переменной: это единственное, что
 * меняется от строки к строке, и заводить под каждый процент свой класс
 * значило бы держать в CSS сотню правил-близнецов.
 */
.lp .lp-analytics__bar-fill {
	display: block;
	width: var(--lp-bar, 50%);
	height: 0.75rem;
	background: var(--lp-tone-cost);
}

.lp .lp-analytics__bar-fill--cost {
	background: var(--lp-tone-cost);
}

.lp .lp-analytics__bar-fill--leads {
	background: var(--lp-tone-leads);
}

.lp .lp-analytics__bar-fill--cpl {
	background: var(--lp-tone-cpl);
}

.lp .lp-analytics__bar-fill--deals {
	background: var(--lp-tone-deals);
}

.lp .lp-analytics__bar-fill--revenue {
	background: var(--lp-tone-revenue);
}

.lp .lp-analytics__verdict {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0.85rem;
	margin: 0;
	padding-top: clamp(0.75rem, 1.5vw, 1rem);
	border-top: 1px solid var(--lp-line-strong);
	font-size: var(--lp-text-sm);
	line-height: 1.5;
	color: var(--lp-ink-muted);
}

.lp .lp-analytics__verdict-mark {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	font-size: 1rem;
	line-height: 1;
}

.lp .lp-analytics__verdict--good .lp-analytics__verdict-mark {
	color: var(--lp-ink);
	background: var(--lp-crimson);
}

.lp .lp-analytics__verdict--bad .lp-analytics__verdict-mark {
	color: var(--lp-ink-muted);
	border: 1px solid var(--lp-line-control);
}

/* --- Доступ к онлайн-отчёту ---------------------------------------------- */

.lp .lp-analytics__access {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
	padding-top: clamp(2rem, 3.5vw, 3rem);
	border-top: 1px solid var(--lp-line-strong);
}

.lp .lp-analytics__access-intro {
	display: grid;
	align-content: start;
	gap: 0.85rem;
	min-width: 0;
}

.lp .lp-analytics__access-title {
	margin: 0;
	text-transform: uppercase;
}

.lp .lp-analytics__access-text {
	margin: 0;
	font-size: var(--lp-text-sm);
	line-height: 1.55;
	color: var(--lp-ink-muted);
}

/*
 * Перечень прижат к верху: при одной-двух строках отцентрованный список
 * повисал в середине пустой колонки и выглядел потерянным куском текста.
 */
.lp .lp-analytics__access-items {
	display: grid;
	align-content: start;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	min-width: 0;
	list-style: none;
}

.lp .lp-analytics__access-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.75rem;
	align-items: center;
	font-size: var(--lp-text-sm);
	line-height: 1.45;
	color: var(--lp-ink-muted);
}

.lp .lp-analytics__access-glyph {
	width: 1.35rem;
	height: 1.35rem;
	color: var(--lp-crimson);
}

/* Запасная метка, если у строки выбрано «без иконки». */
.lp .lp-analytics__access-dot {
	width: 0.4rem;
	height: 0.4rem;
	margin: 0 0.45rem;
	background: var(--lp-crimson);
}

/*
 * Второй экран живёт по тем же правилам, что и первый: рама, красная
 * кромка, чертёжный контур и разворот вглубь. Два снимка продукта в одной
 * секции, поданные по-разному, читались бы как снимки из разных мест.
 *
 * Разворот мягче, чем у главного снимка: эта рама втрое у́же, и на 34° от
 * раздела отчётов осталась бы полоска, в которой ничего не разобрать.
 * Сторона та же — оба экрана уводят вглубь левый край.
 */
.lp .lp-analytics__access-shot {
	--lp-analytics-shot-turn: -26deg;
	--lp-analytics-shot-pitch: 1.2deg;
	--lp-analytics-shot-depth: 1600px;

	position: relative;
	margin: 0;
	min-width: 0;
	padding: clamp(0.35rem, 0.7vw, 0.6rem);
	background: var(--lp-frame-surface);
	border: 1px solid var(--lp-line-control);
	box-shadow: var(--lp-frame-shadow);
	transform:
		perspective(var(--lp-analytics-shot-depth))
		rotateY(var(--lp-analytics-shot-turn))
		rotateX(var(--lp-analytics-shot-pitch));
	transform-origin: right center;
}

.lp .lp-analytics__access-shot::before {
	display: block;
	height: 3px;
	margin-bottom: clamp(0.35rem, 0.7vw, 0.6rem);
	content: '';
	background: var(--lp-crimson);
}

.lp .lp-analytics__access-shot::after {
	position: absolute;
	inset: clamp(-1.1rem, -1.6vw, -0.7rem);
	content: '';
	pointer-events: none;
	border: 1px solid var(--lp-line-strong);
}

.lp .lp-analytics__access-image {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Раскладка ----------------------------------------------------------- */

@media (min-width: 64em) {

	.lp .lp-analytics__top {
		grid-template-columns: minmax(22rem, 1fr) minmax(30rem, 1fr);
		column-gap: clamp(2rem, 5vw, 5rem);
	}

	/*
	 * ШИРИНА РАМЫ БОЛЬШЕ КОЛОНКИ — НА СТОЛЬКО, СКОЛЬКО СЪЕДАЕТ РАЗВОРОТ.
	 * Развёрнутый экран занимает на странице примерно две трети своей
	 * ширины: дальний край уходит вглубь. Считать раму по колонке значило
	 * бы оставить треть колонки пустой — именно это и было видно как дыра
	 * между текстом и экраном. Рама растёт ВЛЕВО (отрицательное поле):
	 * вращение идёт вокруг правого края, и правый край обязан остаться на
	 * месте, у границы контейнера.
	 */
	/*
	 * Снимок стоит по центру своей колонки: он ниже текстовой колонки, и
	 * прижатый к верху оставлял бы под собой провал во всю разницу высот.
	 * Разделённый пополам, тот же остаток читается полями, а не дырой.
	 */
	.lp .lp-analytics__shot {
		width: 165%;
		margin-left: -65%;
		align-self: center;
	}

	/*
	 * ЯРУС ДОСТУПА — ДВЕ КОЛОНКИ, А НЕ ТРИ. Текст и перечень говорят об
	 * одном и том же и потому стоят друг под другом слева; третья колонка
	 * под короткий список означала полосу пустоты во всю высоту снимка.
	 * Снимок занимает оба ряда правой колонки и центрируется по ним.
	 */
	.lp .lp-analytics__access--with-shot {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		grid-template-rows: auto auto;
		row-gap: clamp(1rem, 2vw, 1.75rem);
	}

	.lp .lp-analytics__access--with-shot .lp-analytics__access-intro {
		grid-column: 1;
		grid-row: 1;
	}

	.lp .lp-analytics__access--with-shot .lp-analytics__access-items {
		grid-column: 1;
		grid-row: 2;
	}

	/* Та же компенсация разворота, что и у главного снимка, по своему углу. */
	.lp .lp-analytics__access--with-shot .lp-analytics__access-shot {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: 132%;
		margin-left: -32%;
		align-self: center;
	}
}

/*
 * ПУНКТЫ КАБИНЕТА ВСТАЮТ В ДВА СТОЛБЦА НА ШИРОКОМ ЭКРАНЕ. В столбик
 * четыре карточки вытягивали левую колонку почти вдвое выше снимка —
 * под экраном оставалась полоса пустоты в треть высоты яруса. Двумя
 * столбцами колонки сравниваются по высоте, и ярус читается как один
 * разворот, а не как длинный список с картинкой сбоку.
 */
@media (min-width: 85em) {

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

/*
 * ПОДПИСИ ШАГОВ СТОЯТ В ОДНУ ЛИНИЮ. Тексты шагов разной длины, и без общей
 * сетки строк название шага с двухстрочным пояснением уезжало вниз —
 * цепочка читалась сломанной. Subgrid отдаёт всем шагам одни и те же три
 * строки: кружок, название, пояснение.
 */
@supports (grid-template-rows: subgrid) {

	@media (min-width: 48em) {

		.lp .lp-analytics__steps {
			grid-template-rows: auto auto auto;
		}

		.lp .lp-analytics__step {
			grid-row: span 3;
			grid-template-rows: subgrid;
			row-gap: 0.6rem;
		}
	}
}

@media (max-width: 63.99em) {

	/*
	 * На узком экране шаги выстраиваются в столбец, и горизонтальная
	 * стрелка указывала бы в пустоту слева. Убираем её: порядок держат
	 * номера в кружках.
	 */
	.lp .lp-analytics__step + .lp-analytics__step .lp-analytics__step-mark::before,
	.lp .lp-analytics__step + .lp-analytics__step .lp-analytics__step-mark::after {
		content: none;
	}

	/*
	 * Наклон снимка живёт только на широком экране. На узком рамка занимает
	 * всю ширину колонки: развёрнутая, она упиралась бы в поля страницы —
	 * и мелкий текст интерфейса под углом уже не прочесть.
	 */
	.lp .lp-analytics__shot,
	.lp .lp-analytics__access-shot {
		transform: none;
	}

	.lp .lp-analytics__shot::after,
	.lp .lp-analytics__access-shot::after {
		inset: -0.6rem;
	}
}

@media (max-width: 47.99em) {

	.lp .lp-analytics__title {
		max-width: 12ch;
		font-size: clamp(2.35rem, 11vw, 3.4rem);
	}

	.lp .lp-analytics__steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.lp .lp-analytics__step {
		grid-template-columns: auto minmax(0, 1fr);
		justify-items: start;
		column-gap: 1rem;
		text-align: left;
	}

	.lp .lp-analytics__step-mark {
		grid-row: 1 / span 2;
		width: 3.2rem;
	}

	.lp .lp-analytics__bar {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.35rem;
	}
}

/* --- Появление ----------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

	.lp-js .lp-analytics .lp-analytics__shot {
		opacity: 0;
		translate: 1rem 0;
		transition:
			opacity var(--lp-duration-slow) var(--lp-ease-out),
			translate var(--lp-duration-slow) var(--lp-ease-out);
	}

	.lp-js .lp-analytics.is-visible .lp-analytics__shot {
		opacity: 1;
		translate: none;
	}
}