/*
 * ПОСАДОЧНАЯ, БЛОК 8 — FAQ И ЗАЯВКА. Макет: design-handoff/08-faq-cta.png.
 * Зависит от landing/tokens.css и landing/base.css.
 *
 * КОМПОЗИЦИЯ — РАЗВОРОТ. Слева тёмная половина с вопросами, справа бордовая
 * с формой. Форма получает собственный цвет поверхности намеренно: это
 * последнее действие страницы, и оно не должно теряться в общем графите.
 *
 * Заявка, согласие и статусы формы принадлежат самой посадочной: никаких
 * крючков родительской темы в этом блоке нет.
 */

.lp .lp-faq__split {
	--lp-split-cols: minmax(0, 1fr) minmax(0, 38%);
}

/*
 * Нижнее поле разворота уже, чем стандартное. Раньше низ тёмной половины
 * держали Telegram и ссылка на политику — без них список вопросов упирается
 * в стандартный отступ секции и оставляет пустой воздух над собой (список
 * стоит прижатым к низу, см. .lp-faq__list). Уменьшенный отступ снизу
 * подтягивает обе половины разворота, не трогая верхний ритм страницы.
 */
.lp .lp-faq__split .lp-split__pane {
	padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 5.5rem);
}

/* ---------------------------------------------------------------------- */
/* Тёмная половина: вопросы                                               */
/* ---------------------------------------------------------------------- */

.lp .lp-faq__side {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 1.2rem + 2.4vw, 3.5rem);
}

.lp .lp-faq__draft {
	--lp-draft-line-y: 6%;
	--lp-draft-line-w: min(58%, 40rem);
	--lp-draft-cross-x: 62%;
	--lp-draft-cross-y: 18%;
}

.lp .lp-faq__title,
.lp .lp-faq__list {
	position: relative;
	z-index: 1;
}

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

/* Вопросы прижаты к низу половины: заголовок сверху, подвал под ними. */
.lp .lp-faq__list {
	margin-top: auto;
}

.lp .lp-faq__item {
	border-bottom: 1px solid var(--lp-line-strong);
}

.lp .lp-faq__item:first-child {
	border-top: 1px solid var(--lp-line-strong);
}

/*
 * Собственный маркер <details> убран: вместо треугольника в макете стоит
 * плюс, который на раскрытом вопросе становится минусом.
 */
.lp .lp-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lp-space-md);
	min-height: var(--lp-tap-min);
	padding: var(--lp-space-md) 0;
	list-style: none;
	cursor: pointer;
}

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

/*
 * ВОПРОСЫ НАБРАНЫ ОБЫЧНЫМ РЕГИСТРОМ, а не капсом, как остальные метки.
 *
 * Капс с разрядкой — язык коротких подписей: «КЕЙСЫ», «ЧТО ВХОДИТ». Вопрос
 * же длиной в предложение, и капс отнимает у него верхний профиль букв, по
 * которому слово опознаётся целиком, — читать приходится по буквам. Это
 * последний блок перед формой, и здесь торговаться за скорость чтения нечем.
 *
 * Кегль поднят с метки (13px) до lead: вопросы — основное содержание этой
 * половины разворота, а не подпись к чему-то. Ответы под ними набраны тем же
 * порядком, поэтому пара «вопрос — ответ» читается единым текстом.
 */
.lp .lp-faq__question-text {
	font-size: var(--lp-text-lead);
	font-weight: var(--lp-weight-medium);
	letter-spacing: normal;
	text-transform: none;
	line-height: var(--lp-leading-tight);
	color: var(--lp-ink);
	transition: color var(--lp-duration) var(--lp-ease);
}

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

/* Плюс собран из двух линий: горизонтальная остаётся, вертикальная уходит. */
.lp .lp-faq__sign {
	position: relative;
	flex: none;
	width: 1rem;
	height: 1rem;
}

.lp .lp-faq__sign::before,
.lp .lp-faq__sign::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: var(--lp-ink);
	transform: translate(-50%, -50%);
}

.lp .lp-faq__sign::before {
	width: 100%;
	height: 1px;
}

.lp .lp-faq__sign::after {
	width: 1px;
	height: 100%;
	transition: opacity var(--lp-duration) var(--lp-ease);
}

.lp .lp-faq__item[open] .lp-faq__sign::after {
	opacity: 0;
}

.lp .lp-faq__answer {
	padding-bottom: var(--lp-space-md);
	max-width: 46em;
	color: var(--lp-ink-muted);
}

.lp .lp-faq__answer p {
	margin: 0 0 var(--lp-space-sm);
}

.lp .lp-faq__answer p:last-child {
	margin-bottom: 0;
}

/*
 * .lp-faq__policy стилизует ссылку на политику внутри чекбокса согласия
 * формы (см. ниже, «Согласие»). Собственного подвала с этой ссылкой и
 * Telegram у половины больше нет — вопросы теперь сами упираются в низ.
 */
.lp .lp-faq__policy {
	display: inline;
	max-width: 100%;
	padding: 0;
	margin: 0;
	background: none;
	font-size: var(--lp-text-label);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	text-align: left;
	white-space: normal;
	color: var(--lp-ink-muted);
	text-decoration: none;
	transition: color var(--lp-duration) var(--lp-ease);
}

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

/* ---------------------------------------------------------------------- */
/* Бордовая половина: форма                                               */
/* ---------------------------------------------------------------------- */

.lp .lp-faq__form-pane {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--lp-space-lg);
}

.lp .lp-faq__form-title {
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	font-weight: var(--lp-display-weight);
	letter-spacing: var(--lp-tracking-display);
}

.lp .lp-faq__fields {
	display: grid;
	gap: var(--lp-space-md);
}

.lp .lp-faq__form {
	display: grid;
	gap: var(--lp-space-md);
}

.lp .lp-field__hint {
	margin-left: 0.35em;
	font-weight: var(--lp-weight-regular);
	letter-spacing: normal;
	text-transform: none;
	color: var(--lp-ink-muted);
}

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

/*
 * Согласие. Обёртка расширяет область нажатия чекбокса до пальца: padding
 * увеличивает мишень, равный отрицательный margin возвращает геометрию
 * на место, поэтому раскладка не смещается ни на пиксель.
 */
.lp .lp-faq__agreement {
	display: flex;
	align-items: flex-start;
	gap: var(--lp-space-sm);
}

.lp .lp-faq__agreement-box {
	display: inline-flex;
	align-items: flex-start;
	flex: 0 0 auto;
	padding: var(--lp-space-2xs);
	margin: calc(-1 * var(--lp-space-2xs));
	margin-right: 0;
	cursor: pointer;
}

.lp .lp-faq__agreement-box input {
	width: 1rem;
	height: 1rem;
	margin: 0.18rem 0 0;
	accent-color: var(--lp-crimson);
}

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

.lp .lp-faq__agreement-text .lp-faq__policy {
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	color: var(--lp-ink);
}

.lp .lp-field__error--agreement {
	margin-top: var(--lp-space-2xs);
}

.lp .lp-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Кнопка отправки стоит НА бордовой панели, где фирменная бордовая заливка
 * почти сливается с фоном. Алый контур возвращает ей границу: это
 * единственный цвет системы, различимый на этой поверхности.
 */
.lp .lp-faq__submit {
	border-color: var(--lp-crimson);
}

.lp .lp-faq__submit:hover {
	background-color: var(--lp-crimson);
	border-color: var(--lp-crimson);
	/* Тёмный текст на алом — 5.05:1. */
	color: var(--lp-field);
}

.lp .lp-faq__form-note {
	max-width: 34em;
}


/* ====================================================================== */
/* СВЕРКА С МАКЕТОМ 12                                                    */
/* output/design/landing-v2/all-screens/12-faq-cta.png                    */
/*                                                                        */
/* Что здесь дописано против прежней вёрстки:                             */
/*   - плашка раздела «11 — FAQ» над заголовком;                          */
/*   - номера у вопросов и у полей формы;                                 */
/*   - вопросы в общей рамке, а не просто разлинованы;                    */
/*   - поля формы подчёркиванием, а не светлыми коробками;                */
/*   - уголки обреза у кнопки отправки.                                   */
/* ====================================================================== */

.lp .lp-faq__eyebrow {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-size: var(--lp-text-label);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

.lp .lp-faq__eyebrow-num {
	font-family: var(--lp-font-display);
	font-size: 1.15rem;
	font-weight: var(--lp-display-weight);
	line-height: 1;
	color: var(--lp-crimson);
}

.lp .lp-faq__eyebrow-rule {
	width: clamp(1.25rem, 3vw, 2.5rem);
	height: 1px;
	background: var(--lp-crimson);
}

/*
 * Вопросы стоят в общей рамке. Верхняя граница первого вопроса теперь
 * лишняя — её роль играет сама рамка, иначе линии удваиваются.
 */
.lp .lp-faq__list {
	border: 1px solid var(--lp-line-strong);
}

.lp .lp-faq__item:first-child {
	border-top: 0;
}

.lp .lp-faq__item:last-child {
	border-bottom: 0;
}

.lp .lp-faq__question,
.lp .lp-faq__answer {
	padding-inline: clamp(1rem, 2vw, 1.75rem);
}

/* Номер вопроса — отдельная колонка, чтобы вопросы стояли по одной линии. */
.lp .lp-faq__question {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--lp-space-sm);
}

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

.lp .lp-faq__item[open] .lp-faq__question-num {
	color: var(--lp-crimson);
}

/* Ответ выключен по левому краю вопроса, а не по краю рамки. */
.lp .lp-faq__answer {
	padding-left: calc(clamp(1rem, 2vw, 1.75rem) + 2.25rem + var(--lp-space-sm));
}

/* ---------------------------------------------------------------------- */
/* Поля формы: подчёркивание вместо коробки                               */
/* ---------------------------------------------------------------------- */

/*
 * Правило нарочно ограничено формой этого блока. `.lp-input` из base.css
 * обслуживает и другие формы посадочной, включая модальное окно, — там
 * светлая коробка на своём месте, и переписывать её глобально нельзя.
 */
.lp .lp-faq__form .lp-field {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	align-items: baseline;
	gap: 0.35rem var(--lp-space-sm);
}

.lp .lp-faq__form .lp-field__label {
	grid-column: 2;
	font-size: var(--lp-text-label);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink);
}

.lp .lp-faq__field-num {
	grid-column: 1;
	grid-row: 1;
	font-family: var(--lp-font-num);
	font-size: var(--lp-text-label);
	font-variant-numeric: tabular-nums;
	color: var(--lp-crimson);
}

.lp .lp-faq__form .lp-input,
.lp .lp-faq__form .lp-textarea {
	grid-column: 2;
	min-height: 2.75rem;
	padding: 0.35rem 0;
	border: 0;
	border-bottom: 1px solid var(--lp-crimson);
	border-radius: 0;
	background: transparent;
	color: var(--lp-ink);
}

.lp .lp-faq__form .lp-textarea {
	min-height: 4.5rem;
}

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

/*
 * Невалидное поле. Светлой заливки-предупреждения на подчёркнутом поле нет,
 * поэтому вторая примета ошибки помимо цвета — утолщённая черта: только
 * цветом сигнал передавать нельзя.
 */
.lp .lp-faq__form .lp-input.is-invalid,
.lp .lp-faq__form .lp-textarea.is-invalid,
.lp .lp-faq__form .lp-input.validate_error,
.lp .lp-faq__form .lp-textarea.validate_error,
.lp .lp-faq__form input[aria-invalid="true"] {
	background: transparent;
	border-bottom-width: 2px;
	border-bottom-color: var(--lp-crimson);
}

.lp .lp-faq__form .lp-field__error {
	grid-column: 2;
}

/* Ошибка и согласие лежат вне сетки поля — им колонка номера не нужна. */
.lp .lp-faq__form .lp-faq__agreement {
	grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------- */
/* Кнопка отправки                                                        */
/* ---------------------------------------------------------------------- */

/*
 * В макете кнопка залита алым и взята в уголки обреза. Уголки нарисованы
 * фоном обёртки, а не рамкой самой кнопки: рамка мешала бы заливке.
 */
.lp .lp-faq__submit {
	--lp-corner: 0.85rem;

	position: relative;
	background-color: var(--lp-crimson);
	border-color: var(--lp-crimson);
	color: var(--lp-field);
}

.lp .lp-faq__submit:hover {
	background-color: var(--lp-burgundy);
	border-color: var(--lp-burgundy);
	color: var(--lp-ink);
}

.lp .lp-faq__submit::after {
	position: absolute;
	inset: -0.55rem;
	pointer-events: none;
	content: '';
	background-image:
		linear-gradient(var(--lp-crimson), var(--lp-crimson)),
		linear-gradient(var(--lp-crimson), var(--lp-crimson)),
		linear-gradient(var(--lp-crimson), var(--lp-crimson)),
		linear-gradient(var(--lp-crimson), var(--lp-crimson)),
		linear-gradient(var(--lp-crimson), var(--lp-crimson)),
		linear-gradient(var(--lp-crimson), var(--lp-crimson)),
		linear-gradient(var(--lp-crimson), var(--lp-crimson)),
		linear-gradient(var(--lp-crimson), var(--lp-crimson));
	background-repeat: no-repeat;
	background-position:
		0 0, 0 0,
		100% 0, 100% 0,
		0 100%, 0 100%,
		100% 100%, 100% 100%;
	background-size:
		1px var(--lp-corner), var(--lp-corner) 1px,
		1px var(--lp-corner), var(--lp-corner) 1px,
		1px var(--lp-corner), var(--lp-corner) 1px,
		1px var(--lp-corner), var(--lp-corner) 1px;
}