/*
 * БАЗА ПОСАДОЧНОЙ S-M DIGITAL. Словарь классов, из которого собраны все
 * восемь секций. ЗАВИСИТ ОТ landing/tokens.css — подключается после него.
 *
 * ГЛАВНОЕ ПРАВИЛО ФАЙЛА: каждый селектор начинается с .lp.
 * Ни одного правила на голый тег, ни одного на класс родительской темы.
 *
 * Landing V2 подключает только свои стили. База явно задаёт отступы, границы,
 * фокус и оформление полей, чтобы страница не зависела от правил родителя.
 */

/* ====================================================================== */
/* 1. КАРКАС                                                              */
/* ====================================================================== */

.lp {
	font-family: var(--lp-font-body);
	font-size: var(--lp-text-body);
	line-height: var(--lp-leading-normal);
	color: var(--lp-ink);
	background-color: var(--lp-field);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.lp *,
.lp *::before,
.lp *::after {
	box-sizing: border-box;
}

/*
 * Родитель запрещает выделять текст на всей странице. На посадочной, где
 * посетитель захочет скопировать телефон или название кейса, это вредит.
 */
.lp,
.lp * {
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}

.lp h1,
.lp h2,
.lp h3,
.lp p,
.lp ul,
.lp ol,
.lp dl,
.lp figure {
	margin: 0;
	padding: 0;
}

.lp ul,
.lp ol {
	list-style: none;
}

.lp img,
.lp svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ====================================================================== */
/* 2. СЕКЦИЯ И КОНТЕЙНЕР                                                  */
/* ====================================================================== */

.lp-section {
	position: relative;
	scroll-margin-top: 4.75rem;
	padding-top: var(--lp-section-y);
	padding-bottom: var(--lp-section-y);
	background-color: var(--lp-field);
	overflow: hidden;
}

/* WordPress сдвигает документ вниз под админ-панель. Компенсация нужна
   только в авторизованном предпросмотре, иначе перед якорем виден хвост
   предыдущей секции. */
body.admin-bar .lp-section {
	scroll-margin-top: 2.75rem;
}

@media screen and (max-width: 48.875em) {
	.lp-section {
		scroll-margin-top: 4.5rem;
	}

	body.admin-bar .lp-section {
		scroll-margin-top: 1.625rem;
	}
}

/* Блоки, где макет ощутимо глубже основного графита. */
.lp-section--deep {
	background-color: var(--lp-field-deep);
}

/*
 * Секции-развороты (результаты, обо мне, FAQ): бордовая половина и тёмная
 * половина делят экран. На узком экране разворот распадается в поток.
 */
.lp-section--split {
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * РАЗВОРОТ ДЕРЖИТ ТУ ЖЕ ШИРИНУ, ЧТО И ОСТАЛЬНЫЕ СЕКЦИИ.
 *
 * Раньше он шёл во всю ширину окна, а девять остальных секций стояли
 * в контейнере на 105rem. На экране в 2200 пикселей это 2185 против 1680:
 * заголовки развернувшихся блоков уезжали к самому обрезу и переставали
 * стоять на одной вертикали с заголовками соседей — страница читалась
 * как две разные вёрстки, поставленные встык.
 *
 * Внутренние отступы половин остались прежними (--lp-gutter), поэтому
 * текст в них теперь начинается ровно там же, где текст в .lp-container.
 * Заливка половины при этом доходит до края контейнера, а не до края
 * окна: за 1680 пикселей у макета нет ни одного объекта, и тянуть туда
 * бордовое поле значило бы дорисовывать композицию за автора.
 */
.lp-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	max-width: var(--lp-container);
	margin-inline: auto;
}

@media (min-width: 64em) {
	.lp-split {
		grid-template-columns: var(--lp-split-cols, minmax(0, 1fr) minmax(0, 1fr));
		align-items: stretch;
	}
}

.lp-split__pane {
	padding: var(--lp-section-y) var(--lp-gutter);
	min-width: 0;
}

.lp-split__pane--burgundy {
	background-color: var(--lp-burgundy-panel);
}

.lp-split__pane--light {
	background-color: var(--lp-panel-light);
	color: var(--lp-field);
}

.lp-container {
	width: 100%;
	max-width: var(--lp-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--lp-gutter);
	padding-right: var(--lp-gutter);
}

.lp-container--narrow {
	max-width: var(--lp-container-narrow);
}

/* ====================================================================== */
/* 3. ТИПОГРАФИКА                                                         */
/* ====================================================================== */

/*
 * Плакатный заголовок. Прописные, плотный интерлиньяж, узкий гротеск —
 * строки должны читаться единым вертикальным монументом, как в макете.
 */
.lp-display,
.lp-h2 {
	font-family: var(--lp-font-display);
	font-weight: var(--lp-display-weight);
	line-height: var(--lp-leading-display);
	letter-spacing: var(--lp-tracking-display);
	text-transform: uppercase;
	color: var(--lp-ink);
	text-wrap: balance;
}

.lp-display {
	font-size: var(--lp-text-display);
}

.lp-h2 {
	font-size: var(--lp-text-h2);
}

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

.lp-lead {
	font-size: var(--lp-text-lead);
	line-height: var(--lp-leading-normal);
	color: var(--lp-ink);
	max-width: 34em;
}

.lp-text {
	font-size: var(--lp-text-body);
	line-height: var(--lp-leading-normal);
	color: var(--lp-ink-muted);
	max-width: 38em;
}

.lp-text--tight {
	max-width: 26em;
}

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

/* Мелкая прописная подпись с разрядкой — язык «чертёжных» меток макета. */
.lp-label {
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

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

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

.lp-micro {
	font-size: var(--lp-text-micro);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

/* Светлая панель переворачивает роли текста целиком. */
.lp-split__pane--light .lp-h2,
.lp-split__pane--light .lp-h3,
.lp-split__pane--light .lp-lead {
	color: var(--lp-field);
}

.lp-split__pane--light .lp-text,
.lp-split__pane--light .lp-label,
.lp-split__pane--light .lp-note {
	color: var(--lp-ink-muted-on-light);
}

/* ====================================================================== */
/* 4. ДЕЙСТВИЯ                                                            */
/* ====================================================================== */

.lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lp-space-xs);
	min-height: var(--lp-tap-min);
	padding: 0 var(--lp-space-lg);
	font-family: var(--lp-font-body);
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--lp-radius-control);
	cursor: pointer;
	transition:
		background-color var(--lp-duration) var(--lp-ease),
		border-color var(--lp-duration) var(--lp-ease),
		color var(--lp-duration) var(--lp-ease);
}

/*
 * Главное действие. Бордовый работает ТОЛЬКО заливкой: на графите он даёт
 * 2.68:1 и текстом быть не может. Светлый текст на нём — 6.38:1.
 */
.lp-btn--primary {
	min-height: 62px;
	color: var(--lp-ink);
	background-color: var(--lp-burgundy);
	border-color: var(--lp-burgundy);
}

.lp-btn--primary:hover {
	background-color: var(--lp-burgundy-hover);
	border-color: var(--lp-burgundy-hover);
}

/* Вторичное действие: контур, без заливки. */
.lp-btn--outline {
	color: var(--lp-ink);
	background-color: transparent;
	border-color: var(--lp-burgundy);
}

.lp-btn--outline:hover {
	background-color: var(--lp-burgundy);
	border-color: var(--lp-burgundy);
}

.lp-btn--block {
	display: flex;
	width: 100%;
}

.lp-btn[disabled],
.lp-btn.is-disabled,
.lp-btn.disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/*
 * Текстовая ссылка со стрелкой — вторичный путь. Собственной карточки или
 * рамки не получает: в макете она намеренно тише главной кнопки.
 */
.lp-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--lp-space-sm);
	min-height: var(--lp-tap-min);
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: color var(--lp-duration) var(--lp-ease);
}

/*
 * Стрелка сдвигается по наведению, а не удлиняется.
 * Анимация width пересчитывает раскладку на каждом кадре; transform
 * живёт на композиторе и не трогает поток. Визуально разницы нет —
 * стрелка так же «уходит вперёд».
 */
.lp-arrow-link__arrow {
	display: inline-block;
	width: 2.25rem;
	height: 1px;
	position: relative;
	background-color: var(--lp-crimson);
	transform: translateX(0);
	transition: transform var(--lp-duration) var(--lp-ease);
	will-change: transform;
}

/* Наконечник рисуем поворотом псевдоэлемента: без иконки и лишнего запроса. */
.lp-arrow-link__arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 0.4rem;
	height: 0.4rem;
	border-top: 1px solid var(--lp-crimson);
	border-right: 1px solid var(--lp-crimson);
	transform: translateY(-50%) rotate(45deg);
}

.lp-arrow-link:hover .lp-arrow-link__arrow {
	transform: translateX(0.5rem);
}

.lp-split__pane--light .lp-arrow-link {
	color: var(--lp-field);
}

/* ====================================================================== */
/* 5. ЧЕРТЁЖНЫЙ СЛОЙ                                                      */
/* ====================================================================== */

/*
 * Тонкие линии, перекрестия и координатные метки. Контраст 1.29:1 —
 * это фактура, а не содержание: текст и границы контролов на ней не строим.
 */
.lp-rule {
	height: 1px;
	background-color: var(--lp-line);
	border: none;
}

.lp-rule--strong {
	background-color: var(--lp-line-strong);
}

/* Красный пунктир-акцент рядом с линией — подпись «здесь смысловой узел». */
.lp-dash {
	display: inline-block;
	width: 2rem;
	height: 1px;
	background-image: linear-gradient(
		to right,
		var(--lp-crimson) 0 40%,
		transparent 40% 100%
	);
	background-size: 0.55rem 1px;
	background-repeat: repeat-x;
}

/*
 * Слой чертёжной фактуры: линия с красным пунктиром и перекрестие. В макетах
 * он есть почти на каждом развороте, поэтому живёт здесь, а не в файле секции.
 *
 * Секция ставит его первым элементом и двигает координатами-переменными:
 *
 *     .lp-problem__draft { --lp-draft-line-y: 8%; --lp-draft-cross-x: 88%; }
 *
 * Скрыт на узком экране: там фактура только отнимает место у текста. Рисуется
 * градиентами — ни одного запроса и ни одного элемента, который читалка могла
 * бы объявить (сам слой всегда aria-hidden в разметке).
 */
.lp-draft {
	display: none;
}

@media (min-width: 64em) {
	.lp-draft {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
	}

	.lp-draft::before {
		content: "";
		position: absolute;
		left: var(--lp-draft-line-x, var(--lp-gutter));
		top: var(--lp-draft-line-y, 20%);
		width: var(--lp-draft-line-w, min(36%, 38rem));
		height: 1px;
		background:
			repeating-linear-gradient(
				to right,
				var(--lp-crimson) 0 0.35rem,
				transparent 0.35rem 0.7rem
			) 3rem 0 / 3.5rem 1px no-repeat,
			linear-gradient(var(--lp-line-strong), var(--lp-line-strong)) 0 0 / 100% 1px no-repeat;
	}

	.lp-draft::after {
		content: "";
		position: absolute;
		left: var(--lp-draft-cross-x, 38%);
		top: var(--lp-draft-cross-y, 8%);
		width: 3rem;
		height: 3rem;
		background:
			linear-gradient(var(--lp-line-strong), var(--lp-line-strong)) center / 1px 100% no-repeat,
			linear-gradient(var(--lp-line-strong), var(--lp-line-strong)) center / 100% 1px no-repeat;
	}
}

/* Круглая координатная метка. Точка, а не декоративный бейдж. */
.lp-marker {
	display: inline-flex;
	align-items: center;
	gap: var(--lp-space-sm);
}

.lp-marker__dot {
	width: 0.5rem;
	height: 0.5rem;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--lp-crimson);
	position: relative;
}

.lp-marker__dot::after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background-color: var(--lp-crimson);
}

/* ====================================================================== */
/* 6. БРАУЗЕРНАЯ РАМА                                                     */
/* ====================================================================== */

/*
 * Матовая рама вокруг реального скриншота проекта. Единственное место
 * системы с заметным скруглением: оно повторяет форму физического экрана.
 * Внутри — только настоящая работа, без перекрашивания в фирменный цвет.
 */
.lp-frame {
	background-color: var(--lp-frame-surface);
	border: 1px solid var(--lp-line-strong);
	border-radius: var(--lp-radius-frame);
	overflow: hidden;
	box-shadow: var(--lp-frame-shadow);
}

.lp-frame__bar {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 0.9rem;
}

.lp-frame__dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background-color: var(--lp-line-strong);
}

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

/* Пустая рама, пока владелец не загрузил скриншот. */
.lp-frame__empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 16rem;
	padding: var(--lp-space-lg);
	text-align: center;
}

/* ====================================================================== */
/* 7. СПИСКИ                                                              */
/* ====================================================================== */

/* Нумерованный перечень 01 / 02 / 03 из макетов 04 и 05. */
.lp-steps {
	display: grid;
	gap: 0;
}

.lp-steps__item {
	display: grid;
	gap: var(--lp-space-3xs);
	padding: var(--lp-space-md) 0;
	border-top: 1px solid var(--lp-line);
}

.lp-steps__item:last-child {
	border-bottom: 1px solid var(--lp-line);
}

.lp-steps__num {
	font-family: var(--lp-font-num);
	font-size: var(--lp-text-label);
	color: var(--lp-crimson);
	font-variant-numeric: tabular-nums;
}

.lp-steps__title {
	font-family: var(--lp-font-display);
	font-size: var(--lp-text-h3);
	font-weight: var(--lp-display-weight-soft);
	line-height: var(--lp-leading-tight);
	text-transform: uppercase;
	letter-spacing: var(--lp-tracking-nav);
	color: var(--lp-ink);
}

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

/* Перечень с короткой красной чертой вместо маркера (макет 07). */
.lp-ruled {
	display: grid;
}

.lp-ruled__item {
	display: flex;
	align-items: center;
	gap: var(--lp-space-md);
	padding: var(--lp-space-md) 0;
	border-top: 1px solid var(--lp-line);
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink);
}

.lp-ruled__item:last-child {
	border-bottom: 1px solid var(--lp-line);
}

.lp-ruled__tick {
	width: 1.5rem;
	height: 2px;
	flex: none;
	background-color: var(--lp-crimson);
}

/* ====================================================================== */
/* 8. ФОРМЫ                                                               */
/* ====================================================================== */

.lp-field {
	display: flex;
	flex-direction: column;
	gap: var(--lp-space-2xs);
	min-width: 0;
}

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

/* Светлое поле даёт надёжный контраст с набираемым текстом на тёмной форме. */
.lp-input,
.lp-textarea {
	display: block;
	width: 100%;
	min-height: var(--lp-tap-min);
	padding: 0.75rem var(--lp-space-sm);
	font-family: var(--lp-font-body);
	font-size: var(--lp-text-body);
	line-height: 1.4;
	color: var(--lp-field);
	background-color: var(--lp-panel-light);
	border: 1px solid var(--lp-line-control);
	border-radius: var(--lp-radius-control);
	appearance: none;
	-webkit-appearance: none;
	transition: border-color var(--lp-duration) var(--lp-ease);
}

.lp-textarea {
	min-height: 7rem;
	resize: vertical;
}

.lp-input:hover,
.lp-textarea:hover {
	border-color: var(--lp-ink-muted);
}

/* Вторая, независимая примета ошибки: одним цветом сигнал не передаётся. */
.lp-input.validate_error,
.lp-textarea.validate_error,
.lp-input.is-invalid,
.lp-textarea.is-invalid,
.lp input[aria-invalid="true"] {
	background-color: var(--lp-danger-soft);
	border-color: var(--lp-crimson);
}

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

.lp-form-status {
	margin: 0;
	font-size: var(--lp-text-sm);
	line-height: 1.5;
	color: var(--lp-ink);
}

.lp-form-status.is-error {
	color: var(--lp-ink);
}

.lp-form-status.is-success {
	color: var(--lp-ink);
}

/* ====================================================================== */
/* 9. ФОКУС                                                               */
/* ====================================================================== */

/*
 * Кольцо рисуем тенью: подложка цветом фона плюс контрастный контур поверх.
 * Прозрачный outline оставлен для режима высокой контрастности Windows.
 */
.lp a:focus-visible,
.lp button:focus-visible,
.lp input:focus-visible,
.lp textarea:focus-visible,
.lp summary:focus-visible,
.lp [tabindex]:focus-visible {
	outline: var(--lp-focus-width) solid transparent;
	outline-offset: var(--lp-focus-offset);
	box-shadow:
		0 0 0 var(--lp-focus-width) var(--lp-focus-inner),
		0 0 0 calc(var(--lp-focus-width) * 2) var(--lp-focus-outer);
	border-radius: var(--lp-radius-control);
}

/* На светлой панели кольцо переворачивается. */
.lp-split__pane--light a:focus-visible,
.lp-split__pane--light button:focus-visible,
.lp-split__pane--light input:focus-visible,
.lp-split__pane--light textarea:focus-visible {
	box-shadow:
		0 0 0 var(--lp-focus-width) var(--lp-panel-light),
		0 0 0 calc(var(--lp-focus-width) * 2) var(--lp-field);
}

@media (forced-colors: active) {
	.lp a:focus-visible,
	.lp button:focus-visible,
	.lp input:focus-visible,
	.lp textarea:focus-visible,
	.lp summary:focus-visible {
		outline: 2px solid CanvasText;
	}
}

/* ====================================================================== */
/* 10. ДВИЖЕНИЕ                                                           */
/* ====================================================================== */

/*
 * ПОЯВЛЕНИЕ БЛОКОВ ПРИ ПРОКРУТКЕ.
 *
 * Спрятать элемент вправе ТОЛЬКО тот, кто умеет показать его обратно.
 * Поэтому начальная непрозрачность висит не на .lp-reveal, а на потомке
 * корня с классом .lp-js, который ставит landing.js — и ставит лишь тогда,
 * когда действительно собирается наблюдать за элементами.
 *
 * Скрипт не загрузился, упал до этой строки, вырезан оптимизатором,
 * IntersectionObserver недоступен, посетитель просит меньше движения —
 * класса нет, и вся страница просто читается целиком. Это не теоретическая
 * осторожность: без такой развязки одна ошибка в скрипте гасит всё ниже
 * первого экрана, а страница живёт на платном трафике.
 */
.lp-reveal {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.lp-js .lp-reveal {
		opacity: 0;
		transform: translateY(1.25rem);
		transition:
			opacity var(--lp-duration-slow) var(--lp-ease-out),
			transform var(--lp-duration-slow) var(--lp-ease-out);
	}

	.lp-js .lp-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp *,
	.lp *::before,
	.lp *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ====================================================================== */
/* 11. УТИЛИТЫ                                                            */
/* ====================================================================== */

.lp-visually-hidden {
	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-stack {
	display: flex;
	flex-direction: column;
	gap: var(--lp-space-md);
	align-items: flex-start;
}

.lp-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lp-space-lg);
}

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

/*
 * Иконка этапа (макет 04). Появляется только там, где она есть, поэтому
 * сетка объявлена на самом элементе с иконкой, а не на всех .lp-steps__item:
 * перечни без иконок в других секциях должны остаться однострочными.
 *
 * Кольцо нарисовано внутри файла иконки, а не псевдоэлементом: в макете у
 * каждого знака своя разбивка засечек, и общим кольцом это не повторить.
 */
.lp-steps__item:has(.lp-steps__icon) {
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: var(--lp-space-sm);
}

.lp-steps__item:has(.lp-steps__icon) > .lp-steps__icon {
	grid-row: 1 / span 3;
}

.lp-steps__icon img {
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	object-fit: contain;
}

/* Узкие экраны: знак уезжает над текстом, иначе заголовку остаётся треть строки. */
@media (max-width: 40rem) {
	.lp-steps__item:has(.lp-steps__icon) {
		grid-template-columns: 1fr;
	}

	.lp-steps__item:has(.lp-steps__icon) > .lp-steps__icon {
		grid-row: auto;
	}

	.lp-steps__icon img {
		width: 3.5rem;
		height: 3.5rem;
	}
}