/* ============================================================
   РСЯ-посадочная (/direct/fulfilment/) — только её стили.

   Отдельным файлом, а не в style.css, осознанно: правила нужны ровно на одной
   странице, а style.css грузится на всём сайте. Токены и компоненты берём из
   дизайн-системы (design/design-system.md) — здесь только композиция блоков,
   которых в системе не было. Новых цветов, радиусов и теней не вводим.
   Точки перелома совпадают со style.css: 1023 / 767 / 560.
   ============================================================ */

/* --- Шапка рекламного режима --------------------------------- */
/* Меню нет: единственный путь вперёд — расчёт.
   Правка 29.07.2026: логотип стал ССЫЛКОЙ на главную — страница попала в меню
   сайта, и без выхода она была тупиком. Правило для --static оставлено на случай
   откáта к нелинкуемому логотипу. */
.fs-header--direct .fs-header__inner { justify-content: space-between; }
.fs-header__logo--static { cursor: default; text-decoration: none; }
.fs-header__actions--direct { display: flex; align-items: center; gap: var(--fs-sp-4); }

@media (max-width: 767px) {
	/* На узком экране в шапке остаётся только звонок: кнопка расчёта живёт
	   в липкой панели снизу, дублировать её сверху — терять первый экран. */
	.fs-header__actions--direct .fs-header__tg,
	.fs-header__actions--direct .fs-btn--primary { display: none; }
}

/* --- Подвал рекламного режима -------------------------------- */
.fs-footer--direct .fs-footer__bottom { border-top: 0; }
.fs-footer__contacts--direct {
	display: flex; flex-wrap: wrap; gap: var(--fs-sp-5);
	list-style: none; margin: var(--fs-sp-4) 0; padding: 0;
}

/* --- Блоки страницы ----------------------------------------- */
/* Две равные колонки. auto-fit не годится: колонки здесь смысловые пары
   (FBS/FBO, старт/ответственность), их нельзя разрывать произвольно. */
.fs-direct__cols {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fs-sp-6);
}

@media (max-width: 1023px) {
	.fs-direct__cols { grid-template-columns: 1fr; gap: var(--fs-sp-7); }
}

.fs-direct__col { min-width: 0; }

/* Карточка-схема: заголовок, текст, список, кнопка прижата вниз, чтобы у
   FBS и FBO кнопки стояли на одной линии при разной длине текста. */
.fs-direct__col.fs-card {
	display: flex; flex-direction: column; gap: var(--fs-sp-3);
	padding: var(--fs-sp-6);
}
.fs-direct__col.fs-card:hover { transform: none; border-color: var(--fs-line); box-shadow: var(--fs-shadow-card); }
.fs-direct__col.fs-card h3 { margin-bottom: 0; }
.fs-direct__col.fs-card p { color: var(--fs-text); font-size: var(--fs-fs-body); margin-bottom: 0; }
.fs-direct__col.fs-card .fs-btn { margin-top: auto; align-self: flex-start; }

/* --- Списки -------------------------------------------------- */
.fs-direct__list { list-style: none; margin: var(--fs-sp-4) 0 0; padding: 0; }
.fs-direct__list li {
	position: relative; padding-left: var(--fs-sp-5);
	margin-bottom: var(--fs-sp-3); color: var(--fs-text);
	font-size: var(--fs-fs-body); line-height: 1.6;
}
.fs-direct__list li::before {
	content: ""; position: absolute; left: 0; top: .6em;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--fs-primary);
}
.fs-direct__list--check li::before {
	content: "✓"; top: 0; width: auto; height: auto;
	border-radius: 0; background: none;
	color: var(--fs-accent-2-600); font-weight: 700;
}
.fs-direct__list strong { color: var(--fs-ink); font-weight: 600; }

/* --- Блок «что считается отдельно» --------------------------- */
/* Подложка, а не карточка с тенью: это уточнение к прайс-логике, оно не должно
   визуально конкурировать с гридом услуг над ним. */
.fs-direct__note {
	margin-top: var(--fs-sp-7); padding: var(--fs-sp-6);
	background: var(--fs-white); border: 1px solid var(--fs-line);
	border-radius: 10px; border-left: 3px solid var(--fs-primary);
}
.fs-direct__note h3 { margin-bottom: var(--fs-sp-2); }
.fs-direct__note .fs-lead { color: var(--fs-slate); margin-bottom: 0; }
.fs-direct__note .fs-direct__list { max-width: 90ch; }

/* --- Заявка -------------------------------------------------- */
.fs-direct__form {
	max-width: 760px; padding: var(--fs-sp-7);
	background: var(--fs-white); border: 1px solid var(--fs-line);
	border-radius: 12px; box-shadow: var(--fs-shadow-card);
}

@media (max-width: 560px) {
	.fs-direct__form { padding: var(--fs-sp-5); }
}

/* Параметры партии — попарно: пять коротких полей в столбик выглядят как
   анкета и снижают шанс заполнения. */
.fs-direct__grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fs-sp-4); margin-bottom: var(--fs-sp-5);
}
.fs-direct__grid .fs-field { margin-bottom: 0; }

@media (max-width: 560px) {
	.fs-direct__grid { grid-template-columns: 1fr; }
}

.fs-direct__or { margin-top: var(--fs-sp-5); color: var(--fs-slate); }
.fs-direct__or a { color: var(--fs-primary); font-weight: 600; }

/* --- Липкая кнопка на мобильном ------------------------------ */
/* Только там, где она нужна: на десктопе CTA всегда рядом в потоке. */
.fs-direct__sticky { display: none; }

@media (max-width: 767px) {
	.fs-direct__sticky:not([hidden]) {
		display: flex; gap: var(--fs-sp-3); align-items: center;
		position: fixed; inset: auto 0 0 0; z-index: 40;
		padding: var(--fs-sp-3) var(--fs-sp-4);
		padding-bottom: calc( var(--fs-sp-3) + env( safe-area-inset-bottom, 0px ) );
		background: rgb(255 255 255 / 96%);
		border-top: 1px solid var(--fs-line);
		box-shadow: 0 -4px 16px rgb(20 24 31 / 8%);
	}
	.fs-direct__sticky .fs-btn--primary { flex: 1 1 auto; text-align: center; }
	.fs-direct__sticky .fs-btn--ghost {
		flex: 0 0 auto; display: inline-flex; align-items: center;
		padding-inline: var(--fs-sp-4);
	}
	/* Чтобы панель не накрывала подвал и последнюю кнопку. */
	.fs-direct .fs-footer--direct { padding-bottom: var(--fs-sp-9); }
}

/* Анимации появления у панели сознательно НЕТ.
   Проверка на 390×844 показала, почему: панель показывается сменой display в
   медиазапросе, анимация в этот момент стартует от translateY(100%) и элемент
   остаётся за нижней границей экрана — единственная кнопка на мобильном
   становится недоступной. Для элемента управления предсказуемость важнее
   плавности, а по канону дозировки анимаций (≤3 акцента, только на вход)
   этот случай в бюджет и не входил.
*/

/* --- Быстрая заявка ВНУТРИ карточки расчёта -----------------------------------
 * Правила переехали в style.css (2026-07-29): блок печатает общий островок
 * fs_calc_island(), и он теперь на всех страницах с калькулятором, а не только
 * здесь. Держать копию правил в landing-only файле нельзя — разъедутся.
 * Классы: .fs-calc2__lead (исходное место в разметке) и .fs-calcres__lead (слот
 * внутри карточки результата, куда узел переносит calc.js).
 *
 * Здесь остаётся только рекламная специфика посадочной. */
.fs-direct__or { margin-top: 14px; }

/* --- FAQ на посадочной: по ширине контента (правка 29.07.2026) ---------------
 * Замечание владельца: блок «Вопросы» не отцентрован и не растянут. Замер на 1422:
 * .fs-faq в style.css имеет max-width 800px и нулевые внешние отступы, поэтому
 * аккордеон стоял по левому краю внутри контентной области 1232px — справа
 * оставалась пустая полоса 432px, особенно заметная под двухколоночными блоками.
 *
 * Тянем аккордеон на всю ширину контента: правый край выравнивается с карточками
 * выше, левый остаётся на общей сетке (заголовки секций тоже слева). Строку ответа
 * при этом ограничиваем 70ch — иначе текст в 1232px читается плохо.
 * Правка ТОЛЬКО для рекламной страницы: FAQ на остальных 11 страницах не трогаем,
 * они уже в индексации. Захотите так же на сайте — переносится в style.css одной строкой.
 */
.fs-direct .fs-faq { max-width: none; }
.fs-direct .fs-faq details p { max-width: 70ch; }