/* Стили, уникальные для главной страницы. Общее — в system.css */

/* Полосы лендинга сами задают себе отступы, общие сверху и снизу не нужны */

.page-content-bands {
	padding-top: 0;
	padding-bottom: 0;
}

/* Поперечная полоса лендинга во всю ширину окна */

.band {
	padding-top: 62px;
	padding-bottom: 62px;
}

/* Полоса с подложкой, отделяющая соседние по смыслу разделы */

.band-shaded {
	background-color: #f9fafb;
	border-top: 1px solid #eef0f2;
	border-bottom: 1px solid #eef0f2;
}

/* Первый экран дышит свободнее остальных полос */

.band-hero {
	padding-top: 72px;
	padding-bottom: 72px;
}

/* Заголовок первого экрана */

.hero-title {
	max-width: 780px;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.5px;
	color: #1f2328;
}

/* Пояснение под заголовком первого экрана */

.hero-text {
	max-width: 680px;
	margin-top: 18px;
	font-size: 18px;
	line-height: 1.6;
	color: #6b7280;
}

/* Строка коротких признаков под пояснением */

.hero-marks {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-top: 24px;
	list-style: none;
}

/* Один признак: значок и подпись в строку */

.hero-mark {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	margin-top: 8px;
	margin-right: 26px;
	font-size: 15px;
	font-weight: 600;
	color: #1f2328;
}

/* Значок признака */

.hero-mark-icon {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-right: 8px;
}

/* Ряд кнопок первого экрана */

.hero-buttons {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-top: 32px;
}

/* Кнопка первого экрана крупнее обычной */

.hero-button {
	margin-top: 10px;
	margin-right: 12px;
	padding: 14px 26px;
	font-size: 16px;
}

/* Первый экран: текст и анимация графа в два столбца */

.hero-inner {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	-ms-flex-align: center;
	align-items: center;
}

/* Текстовая колонка первого экрана занимает свободное место */

.hero-copy {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
}

/* Холст с анимацией графа нейросети справа от текста */

.hero-graph {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	display: block;
	width: 220px;
	height: 340px;
	margin-left: 44px;
}

/* Заголовок полосы */

.band-title {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.25;
	color: #1f2328;
}

/* Сетка карточек с возможностями */

.feature-list {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-top: 26px;
	margin-left: -10px;
	margin-right: -10px;
	list-style: none;
}

/* Ячейка сетки: треть ширины с внутренним просветом */

.feature-item {
	-ms-flex: 0 0 33.333%;
	flex: 0 0 33.333%;
	max-width: 33.333%;
	padding: 10px;
}

/* Карточка возможности тянется на всю высоту ряда */

.feature-card {
	height: 100%;
	padding: 24px 22px;
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
}

/* Значок возможности */

.feature-icon {
	display: block;
	width: 30px;
	height: 30px;
}

/* Название возможности */

.feature-title {
	margin-top: 14px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: #1f2328;
}

/* Пояснение к возможности */

.feature-text {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.6;
	color: #6b7280;
}

/* Ряд шагов подключения */

.step-list {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-top: 26px;
	margin-left: -14px;
	margin-right: -14px;
	list-style: none;
}

/* Один шаг занимает треть ряда */

.step-item {
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
	padding: 14px;
}

/* Порядковый номер шага в зелёном кружке */

.step-number {
	width: 38px;
	height: 38px;
	font-size: 17px;
	font-weight: 700;
	line-height: 38px;
	text-align: center;
	color: #ffffff;
	background-color: #1C8830;
	border-radius: 19px;
}

/* Название шага */

.step-title {
	margin-top: 14px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: #1f2328;
}

/* Пояснение к шагу */

.step-text {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.6;
	color: #6b7280;
}

/* Карточка с порядком оплаты */

.payment-card {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-top: 24px;
	padding: 26px 24px;
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
}

/* Значок рядом с порядком оплаты */

.payment-icon {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	margin-right: 18px;
}

/* Пояснение о порядке оплаты */

.payment-text {
	font-size: 16px;
	line-height: 1.65;
	color: #4b5563;
}

/* Ссылка на почту внутри пояснения об оплате */

.payment-link {
	font-weight: 600;
	color: #1C8830;
	text-decoration: none;
}

/* Ссылка на почту под указателем */

.payment-link:hover {
	text-decoration: underline;
}

/* Завершающая полоса с призывом выделена оттенком бренда */

.band-final {
	text-align: center;
	background-color: #f0fdf4;
	border-top: 1px solid #d7f0de;
}

/* Заголовок завершающей полосы */

.final-title {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.25;
	color: #1f2328;
}

/* Пояснение завершающей полосы */

.final-text {
	margin-top: 12px;
	font-size: 17px;
	color: #6b7280;
}

/* Кнопка завершающей полосы */

.final-button {
	margin-top: 26px;
	padding: 14px 26px;
	font-size: 16px;
}

/* Средние экраны: карточки встают по две в ряд */

@media (max-width: 860px) {

	/* Полосы становятся ниже */

	.band {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	/* Первый экран тоже поджимается */

	.band-hero {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	/* Заголовок первого экрана уменьшается */

	.hero-title {
		font-size: 34px;
	}

	/* Пояснение первого экрана уменьшается */

	.hero-text {
		font-size: 17px;
	}

	/* Заголовки полос уменьшаются */

	.band-title,
	.final-title {
		font-size: 26px;
	}

	/* Возможности встают по две в ряд */

	.feature-item {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	/* Шаги тоже встают по две в ряд */

	.step-item {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

}

/* Узкие экраны: всё выстраивается в одну колонку */

@media (max-width: 560px) {

	/* Заголовок первого экрана ещё меньше */

	.hero-title {
		font-size: 28px;
		letter-spacing: -0.2px;
	}

	/* Пояснение первого экрана ещё меньше */

	.hero-text {
		font-size: 16px;
	}

	/* Заголовки полос ещё меньше */

	.band-title,
	.final-title {
		font-size: 23px;
	}

	/* Возможности выстраиваются столбиком */

	.feature-item {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Шаги выстраиваются столбиком */

	.step-item {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Кнопки первого экрана занимают всю ширину */

	.hero-button {
		display: block;
		width: 100%;
		margin-right: 0;
		text-align: center;
	}

	/* Значок оплаты уходит наверх, над текстом */

	.payment-card {
		display: block;
	}

	/* Просвет справа от значка меняется на просвет снизу */

	.payment-icon {
		margin-right: 0;
		margin-bottom: 12px;
	}

}

/* Совсем узкие экраны: убираем всё лишнее из полей */

@media (max-width: 380px) {

	/* Полосы прижимаются ещё плотнее */

	.band,
	.band-hero {
		padding-top: 38px;
		padding-bottom: 38px;
	}

	/* Заголовок первого экрана уменьшается до предела */

	.hero-title {
		font-size: 24px;
	}

	/* Заголовки полос выравниваются с заголовком первого экрана */

	.band-title,
	.final-title {
		font-size: 21px;
	}

	/* Карточки возможностей ужимают поля */

	.feature-card {
		padding: 18px 16px;
	}

	/* Карточка оплаты ужимает поля */

	.payment-card {
		padding: 20px 16px;
	}

}

/* При 980px и ниже герой встаёт в колонку, а граф уходит над заголовком */

@media (max-width: 980px) {

	/* Столбцы первого экрана выстраиваются сверху вниз */

	.hero-inner {
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-align: stretch;
		align-items: stretch;
	}

	/* Граф растягивается по ширине и встаёт над заголовком */

	.hero-graph {
		width: 100%;
		height: 200px;
		margin-left: 0;
		margin-bottom: 30px;
	}

}