/* ============================================================
   Промо-страница тарифного пакета Start Up
   Figma: MSE — Start Up, 99:323 (desktop), 110:1103 (mobile)

   Здесь только страничное: базовая типографика секций,
   мелкие сноски и перекрытия стилей компонентов под этот лендинг.
   Сами компоненты лежат в
   local/templates/ipotekatmpl/components/ipotekabank/html.content/
   ============================================================ */

:root {
	--startup-green: #52ae30;
	--startup-text: #151617;
	--startup-text-2: #50545d;
	--startup-surface: #f6f7fa;

	/* переиспользованные компоненты промо-микрозайма (шапка, icon-list)
	   читают эти переменные — без них они теряют шрифт и цвет */
	--promo-green: var(--startup-green);
	--promo-text: var(--startup-text);
	--promo-font-head: var(--font-family-headline);
	--promo-font-body: var(--font-family-body);
}

/* длинные суммы и номера не должны ломать сетку */
.startup-promo,
.startup-footer {
	overflow-wrap: anywhere;
}

main:has(.startup-promo),
main.startup-promo {
	padding-top: 0;
}

/* ---------- Секции ---------- */

.startup-promo .section {
	padding: 1.5rem 0;
}

.startup-promo .section .section__header {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	text-align: center;
}

.startup-promo .section .section__title {
	margin: 0;
	font-family: var(--hero-font-family);
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 1.14;
	color: var(--startup-text);
}

.startup-promo .section .section__subtitle {
	margin: 0;
	font-size: 1rem;
	line-height: 1.37;
	color: var(--startup-text-2);
}

.startup-promo .section .section__title,
.startup-promo .section .section__subtitle {
	text-align: inherit;
}

/* hero открывает страницу — сверху отступ минимальный */
.startup-promo .startup-hero-section {
	padding-top: 0.75rem;
}

/* полоса фактов идёт вплотную к hero */
.startup-promo .promo-facts-section {
	padding-top: 0.5rem;
}

/* ---------- Мелкие сноски под блоками ---------- */

.startup-promo .section:has(+ .small-text-section) {
	padding-bottom: 0;
}

.small-text-section {
	padding: 0.75rem 0 1.5rem;
}

.small-text {
	margin: 0;
	font-family: var(--font-family-body);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--startup-text-2);
	text-align: center;
}

.small-text a {
	color: var(--startup-green);
	text-decoration: underline;
}

.small-text a:hover {
	text-decoration: none;
}

/* ---------- Сравнение (gold-bars-purchase) ---------- */

.startup-promo .gold-purchase-section .section__title {
	text-align: center;
}

@media (min-width: 768px) {

	.startup-promo .section {
		padding: 4rem 0;
	}

	.startup-promo .section .section__header {
		gap: 1rem;
		margin-bottom: 2.5rem;
	}

	.startup-promo .section .section__title {
		max-width: 56.25rem;
		align-self: center;
		font-size: 2.25rem;
		line-height: 1.22;
	}

	.startup-promo .section .section__subtitle {
		max-width: 48.75rem;
		align-self: center;
		font-size: 1.125rem;
		line-height: 1.33;
	}

	.startup-promo .startup-hero-section {
		padding-top: 2rem;
		padding-bottom: 0;
	}

	.startup-promo .promo-facts-section {
		padding: 2.75rem 0;
	}

	.small-text-section {
		padding: 1.25rem 0 2.5rem;
	}

	/* --- Пример экономии: в макете блок не такой высокий, как на p2p --- */

	.startup-promo .p2p-savings-section {
		padding: 4rem 0;
	}
}

/* ---------- FAQ ---------- */

.startup-promo .accordion-button {
	font-size: 1.25rem;
	line-height: 1.2;
	font-weight: 600;
}

@media (min-width: 768px) {

	.startup-promo .accordion-item {
		border-radius: 2rem;
	}

	.startup-promo .accordion-button {
		font-size: 1.5rem;
		line-height: 2rem;
		font-weight: 700;
	}
}

/* ---------- Форма заявки ---------- */

.startup-promo .autocredit-form-section.section {
	padding-bottom: 0;
}

.startup-promo .autocredit-form {
	background-color: var(--startup-surface);
}

/* ---------- Example ---------- */

.p2p-savings__row {
	flex-direction: column;
	align-items: start;
}