/* ======================= E-mail сервер: общее ======================= */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html * {
	max-height: 9001em;
}

body {
	letter-spacing: normal;
}

:root {
	--ems-blue: #005295;
	--ems-blue-btn: #0254A2;
	--ems-blue-btn-h: #0F4985;
	--ems-green: #72B634;
	--ems-green-h: #5D9F24;
	--ems-text: #222222;
	--ems-line: #DEE4EC;
}

.bdw {
	z-index: 10;
	position: relative;
}

	#submenu td {
		padding: 8px;
	}

.page-mail-server .container {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
	position: relative;
}

/* гасим списочные правила site.css */

.page-mail-server ul, .page-mail-server ol {
	list-style: none;
}

.page-mail-server li {
	line-height: inherit;
}

.page-mail-server li:before {
	content: "";
	margin-right: 0;
}

.page-mail-server p {
	margin: 0;
	max-width: none;
}

/* <picture> - инлайновый элемент, и внутри флекса его картинка тянет
   min-content по своей натуральной ширине; блок это снимает */

.page-mail-server picture {
	display: block;
}

.page-mail-server h1, .page-mail-server h2, .page-mail-server h3 {
	font-weight: 500;
	margin: 0;
	overflow-wrap: break-word;
}

.page-mail-server h2 {
	margin-bottom: 20px;
}

/* кнопки: канон site-wide - синяя #0254A2 / #0F4985, зеленая #72B634 / #5D9F24.
   :focus описан обязательно и выше :hover - иначе button:focus из __main.css
   красит кнопку в серый после клика */

.ems-btn {
	display: block;
	width: 100%;
	max-width: 320px;
	padding: 12px 26px;
	border: 2px solid var(--ems-blue-btn);
	border-radius: 5px;
	background: var(--ems-blue-btn);
	color: #fff;
	font-family: StemWebLight, Verdana;
	font-size: 17px;
	line-height: 120%;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition-duration: 200ms;
}

.ems-btn:focus {
	color: #fff;
	background: var(--ems-blue-btn);
	border-color: var(--ems-blue-btn);
}

.ems-btn:hover {
	color: #fff;
	background: var(--ems-blue-btn-h);
	border-color: var(--ems-blue-btn-h);
}

.ems-btn--grn {
	background: var(--ems-green);
	border-color: var(--ems-green);
}

.ems-btn--grn:focus {
	background: var(--ems-green);
	border-color: var(--ems-green);
}

.ems-btn--grn:hover {
	background: var(--ems-green-h);
	border-color: var(--ems-green-h);
}

/* ======================= 1. Первый экран ======================= */

.ems-hero {
	padding: 10px 0 40px 0;
}

.ems-hero__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

.ems-hero__col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	width: 100%;
}

.ems-hero__title {
	font-size: 32px;
	line-height: 115%;
	color: var(--ems-text);
}

.ems-hero__text {
	font-weight: 350;
	font-size: 17px;
	line-height: 145%;
	color: var(--ems-text);
}

.ems-hero__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 8px;
}

.ems-hero__steps-item {
	padding-left: 12px;
	border-left: 4px solid var(--ems-green);
	border-radius: 5px 0 0 5px;
	font-weight: 350;
	font-size: 14px;
	line-height: 120%;
	color: var(--ems-text);
}

.ems-hero__img {
	display: block;
	width: 100%;
	max-width: 440px;
	height: auto;
	margin: 0 auto;
}

/* ======================= 2. Полоса цифр ======================= */

.ems-stat {
	padding: 0 0 40px 0;
}

.ems-stat__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 0;
	padding: 26px 16px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 0 25px rgba(34, 34, 34, .14);
}

.ems-stat__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	min-width: 0;
	text-align: center;
}

.ems-stat__item + .ems-stat__item {
	border-left: 1px dashed var(--ems-line);
}

/* иконки из макета - вектором в css, не создают запросов и весят
   на порядок меньше, чем pic1-pic4 в png */

.ems-stat__icon {
	width: 56px;
	height: 56px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.ems-stat__icon--1 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3ClinearGradient id='p1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237BB347'/%3E%3Cstop offset='1' stop-color='%236EA43F'/%3E%3C/linearGradient%3E%3Ccircle cx='32' cy='32' r='32' fill='url(%23p1)'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M21.99 45.16C20.88 43.82 22.4 37 24.26 34.94C26.18 32.81 26.94 32.57 31.83 32.49C37.81 32.4 39.39 33.27 40.99 37.55C41.73 39.53 42.44 44 42.14 44.78C41.77 45.76 22.78 46.11 21.99 45.16ZM13.37 40.69C12.72 40.28 13.06 37.22 13.98 35.31C15.13 32.9 15.93 32.52 20.08 32.39C23.95 32.27 24.45 32.52 22.96 33.87C21.98 34.75 21.15 36.5 20.66 38.71C20.26 40.51 20.19 40.6 19.04 40.79C17.24 41.09 13.9 41.03 13.37 40.69ZM43.51 39.43C43.25 37.71 41.98 34.92 40.93 33.77C39.86 32.6 40.43 32.33 43.99 32.33C47.06 32.33 47.35 32.39 48.32 33.21C49.75 34.41 50.64 36.29 50.88 38.61L51.08 40.56L49.5 40.78C48.62 40.9 46.97 41 45.82 41L43.74 41L43.51 39.43ZM17.49 29.22C15.93 27.66 15.72 26.55 16.65 24.8C18.87 20.6 25.14 23.02 23.67 27.5C22.74 30.31 19.48 31.22 17.49 29.22ZM29.26 29.78C26.57 28.36 25.69 25.03 27.26 22.19C29.55 18.03 35.02 18.38 37.04 22.81C39.12 27.39 33.79 32.17 29.26 29.78ZM41.52 29.21C38.33 26.2 41.75 21.2 45.76 23.03C48.29 24.18 48.23 28.27 45.65 29.79C44.17 30.66 42.87 30.48 41.52 29.21Z'/%3E%3C/svg%3E");
}

.ems-stat__icon--2 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3ClinearGradient id='p2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23386BF4'/%3E%3Cstop offset='1' stop-color='%232754E9'/%3E%3C/linearGradient%3E%3Ccircle cx='32' cy='32' r='32' fill='url(%23p2)'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M26.82 45.62C26.1 45.17 27.18 40.74 31.34 27.1C31.66 26.05 31.87 25.2 31.8 25.2C31.74 25.2 32.1 23.89 32.6 22.3C33.5 19.46 33.55 19.4 34.96 19.28C37.29 19.07 37.29 19.3 34.94 27.6C34.41 29.47 33.51 32.51 32.94 34.36C32.37 36.21 31.87 37.92 31.82 38.16C30.33 45.17 29.07 47.05 26.82 45.62ZM17.5 36.97C15.36 34.87 13.6 33.02 13.6 32.85C13.6 32.69 15.49 30.69 17.79 28.42C21.84 24.44 22.02 24.32 22.89 24.89C24.66 26.06 24.31 27.1 21.14 30.04L18.2 32.76L21.1 35.55C24.17 38.5 24.44 39.08 23.27 40.14C22.07 41.22 21.58 40.95 17.5 36.97ZM40.23 40.17C39.26 39.2 39.4 38.92 42.4 35.83C45.77 32.36 45.74 32.99 42.6 29.97C39.81 27.29 39.43 26.24 40.8 25C41.58 24.3 41.68 24.37 45.8 28.42C48.11 30.69 50 32.74 50 32.98C49.99 33.61 42.15 40.8 41.46 40.8C41.13 40.8 40.57 40.52 40.23 40.17Z'/%3E%3C/svg%3E");
}

.ems-stat__icon--3 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3ClinearGradient id='p3' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237BB346'/%3E%3Cstop offset='1' stop-color='%236EA53F'/%3E%3C/linearGradient%3E%3Ccircle cx='32' cy='32' r='32' fill='url(%23p3)'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M16.68 46.94C15.91 46.18 16.39 39.2 17.2 39.2C17.87 39.2 18 39.47 18 40.8L18 42.4L19.8 42.4L21.6 42.4L21.6 40.8C21.6 39.35 21.7 39.2 22.61 39.2L23.63 39.2L23.51 43.1C23.41 46.7 23.34 47 22.6 47C21.94 47 21.8 46.73 21.78 45.4L21.75 43.8L19.9 43.68L18.05 43.56L17.92 45.25C17.81 46.85 17.29 47.55 16.68 46.94ZM27.48 46.94C27.32 46.79 27.2 45.26 27.2 43.53L27.2 40.4L25.8 40.4C24.82 40.4 24.4 40.22 24.4 39.8C24.4 39.31 25.04 39.2 27.8 39.2C30.56 39.2 31.2 39.31 31.2 39.8C31.2 40.2 30.8 40.4 30.02 40.4L28.83 40.4L28.72 43.67C28.61 46.66 28.22 47.69 27.48 46.94ZM32.68 46.94C32.52 46.79 32.4 44.99 32.4 42.93C32.4 38.43 33.1 37.95 35.2 41C36.72 43.2 36.72 43.2 38.2 40.99C40.32 37.83 41.44 39.3 41.04 44.73C40.78 48.23 39.6 48.1 39.6 44.58C39.6 42.37 39.16 41.82 38.42 43.1C37.03 45.49 36.85 45.53 35.38 43.8L34.01 42.2L33.93 43.6C33.89 44.37 33.83 45.44 33.81 45.97C33.77 46.95 33.18 47.45 32.68 46.94ZM42.8 43.22C42.8 39.47 42.85 39.2 43.6 39.2C44.33 39.2 44.4 39.47 44.4 42.4L44.4 45.6L46.43 45.6C49.88 45.6 49.04 46.96 45.5 47.12L42.8 47.24L42.8 43.22ZM29.05 25.1L29.1 18.2L31.75 18.08C34.34 17.97 34.4 17.99 34.4 18.96C34.4 19.78 34.18 19.97 33.1 20.07L31.8 20.2L31.69 25.1L31.58 30L32.99 30C33.76 30 34.4 30.17 34.4 30.37C34.4 30.57 34.51 31.02 34.64 31.37C34.85 31.91 34.46 32 31.94 32L29 32L29.05 25.1ZM36.99 30.78C36.67 29.76 37.26 29.03 39.49 27.73C42.34 26.06 41.98 23.19 38.71 21.43C36.42 20.2 35.72 19.03 37 18.55C37.63 18.3 40.8 19.96 42.3 21.32C43.06 22.01 43.2 22.55 43.2 24.8C43.2 27.76 43.07 27.96 39.53 30.34C37.31 31.83 37.33 31.83 36.99 30.78ZM22.3 29.36L20 27.55L20.01 24.67L20.02 21.8L22.6 20.1C25.45 18.23 25.7 18.15 26.35 18.93C26.86 19.55 25.98 20.48 23.5 21.97C21.06 23.43 21.28 26.07 24.01 28C26.07 29.46 26.33 29.91 25.52 30.72C24.86 31.38 24.89 31.39 22.3 29.36Z'/%3E%3C/svg%3E");
}

.ems-stat__icon--4 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3ClinearGradient id='p4' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23386BF4'/%3E%3Cstop offset='1' stop-color='%232957EB'/%3E%3C/linearGradient%3E%3Ccircle cx='32' cy='32' r='32' fill='url(%23p4)'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M23.6 46.17C16.08 42.68 16 42.63 16 41.38C16 38.5 17.34 38.53 23.74 41.56C32.14 45.53 30.66 45.56 39.71 41.23C45.28 38.57 46.59 38.41 47.06 40.31C47.53 42.16 47.39 42.26 39 46.25C31.35 49.89 31.62 49.89 23.6 46.17ZM23.2 37.06L16.2 33.76L16.08 32.28C15.91 30.3 17.35 29.5 19.33 30.48C20.54 31.08 21.5 31.53 27.73 34.36C31.66 36.15 31.12 36.26 40.54 31.84C44.72 29.88 45.21 29.76 46.43 30.41C48.93 31.75 47.36 33.21 39.12 37.19C31.04 41.09 31.8 41.1 23.2 37.06ZM24.4 28.88C21.21 27.38 18.06 25.9 17.4 25.58C15.92 24.86 15.49 22.71 16.68 22C18.78 20.75 31.05 15.2 31.72 15.2C32.15 15.2 34.41 16.11 36.75 17.23C50.48 23.78 50.34 23.15 39.18 28.34C30.74 32.26 31.57 32.23 24.4 28.88Z'/%3E%3C/svg%3E");
}

.ems-stat__numb {
	font-size: 30px;
	line-height: 110%;
	color: var(--ems-text);
}

.ems-stat__text {
	font-weight: 350;
	font-size: 14px;
	line-height: 130%;
	color: var(--ems-text);
}

/* ======================= 3. Протоколы ======================= */

.ems-proto {
	padding: 40px 0;
}

.ems-proto__title {
	font-size: 28px;
	line-height: 120%;
	text-align: center;
	color: var(--ems-text);
	margin-bottom: 14px;
}

.ems-proto__description {
	font-weight: 350;
	font-size: 16px;
	line-height: 140%;
	text-align: center;
	color: var(--ems-text);
	margin: 0 auto 26px auto;
	max-width: 760px;
}

.ems-proto__area {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.ems-proto__circle img {
	display: block;
	width: 100%;
	max-width: 400px;
	height: auto;
	margin: 0 auto;
}

.ems-proto__item {
	padding-left: 14px;
	border-left: 4px solid var(--ems-green);
	border-radius: 5px 0 0 5px;
}

.ems-proto__item-title {
	font-size: 18px;
	line-height: 120%;
	color: var(--ems-green-h);
	margin-bottom: 8px;
}

.ems-proto__item-text {
	font-weight: 350;
	font-size: 16px;
	line-height: 140%;
	color: var(--ems-text);
}

.ems-proto__button {
	margin: 6px auto 0 auto;
}

/* ================== 4. Возможности (block.png) ================== */

.ems-feat {
	padding: 0 0 40px 0;
}

.ems-feat__title {
	font-size: 28px;
	line-height: 120%;
	color: var(--ems-text);
	margin-bottom: 14px;
	text-align: center;
}

.ems-feat__description {
	font-weight: 350;
	font-size: 16px;
	line-height: 140%;
	color: var(--ems-text);
	margin-bottom: 26px;
	/*max-width: 720px;*/
	text-align: center;
}

.ems-feat__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

/* до 768px полосы из block.png нечитаемы (на 360px это лента 40px высотой),
   поэтому вместо них - карточки с вырезанной иконкой и цветом своей полосы */

.ems-feat__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding: 14px 16px;
	border-radius: 14px;
	color: #fff;
}

.ems-feat__item--1 { background: #56D1FE }
.ems-feat__item--2 { background: #01BBFE }
.ems-feat__item--3 { background: #0294F6 }
.ems-feat__item--4 { background: #0172DC }
.ems-feat__item--5 { background: #0158C7 }
.ems-feat__item--6 { background: #0041AA }

.ems-feat__numb {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	order: -1;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .28);
	font-size: 17px;
	line-height: 1;
}

.ems-feat__pic {
	flex: 0 0 56px;
	min-width: 0;
	line-height: 0;
}

.ems-feat__pic img {
	display: block;
	width: 100%;
	height: auto;
}

/* на 320px текст переносится под иконку - в 118px заголовок не влезает */
.ems-feat__text {
	flex: 1 1 145px;
	min-width: 0;
}

.ems-feat__item-title {
	font-size: 16px;
	line-height: 125%;
	overflow-wrap: break-word;
	margin-bottom: 4px;
}

.ems-feat__item-text {
	font-weight: 350;
	font-size: 14px;
	line-height: 135%;
}

/* ============ 5. Не тратьте время на ручную отправку ============ */

.ems-auto {
	padding: 40px 0;
}

.ems-auto__title {
	font-size: 28px;
	line-height: 120%;
	text-align: center;
	color: var(--ems-text);
	margin-bottom: 14px;
}

.ems-auto__description {
	font-weight: 350;
	font-size: 16px;
	line-height: 140%;
	text-align: center;
	color: var(--ems-text);
	margin: 0 auto 26px auto;
	max-width: 780px;
}

.ems-auto__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 26px;
}

.ems-auto__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 0;
	text-align: center;
}

.ems-auto__icon {
	width: 130px;
}

.ems-auto__icon img {
	display: block;
	width: 100%;
	height: auto;
}

.ems-auto__item-title {
	font-size: 17px;
	line-height: 125%;
	color: var(--ems-text);
}

.ems-auto__item-text {
	font-weight: 350;
	font-size: 16px;
	line-height: 140%;
	color: var(--ems-text);
}

/* ================= 6. Как работает (center.png) ================= */

.ems-flow {
	padding: 40px 0 0 0;
}

.ems-flow__title {
	font-size: 28px;
	line-height: 120%;
	text-align: center;
	color: var(--ems-text);
	margin-bottom: 26px;
}

.ems-flow__area {
	position: relative;
}

.ems-flow__pic {
	display: none;
}

.ems-flow__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px 40px 15px;
}

.ems-flow__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 14px 16px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 0 25px rgba(34, 34, 34, .12);
}

.ems-flow__icon {
	flex: 0 0 76px;
	min-width: 0;
	line-height: 0;
}

.ems-flow__icon img {
	display: block;
	width: 100%;
	height: auto;
}

.ems-flow__content {
	flex: 1 1 auto;
	min-width: 0;
}

.ems-flow__item-title {
	font-size: 17px;
	line-height: 125%;
	color: var(--ems-text);
	margin-bottom: 6px;
}

.ems-flow__item-text {
	font-weight: 350;
	font-size: 15px;
	line-height: 140%;
	color: var(--ems-text);
}

/* ======================= 7. Тарифы ======================= */

.ems-cost {
	padding: 40px 0;
	background: var(--ems-blue);
}

.ems-cost__title {
	font-size: 30px;
	line-height: 120%;
	text-align: center;
	color: #fff;
	margin-bottom: 30px;
}

/* инклуд тарифов сам закрывает .container и открывает свои .bdw */

.ems-cost .bdw {
	min-width: 0;
}

/* широкие таблицы тарифов прокручиваются внутри своего блока */
.ems-cost #_sms {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ниже этой ширины таблица нечитаема - дальше включается прокрутка */
.ems-cost #_sms table.trfs_tbl,
.ems-cost #tab_99 > table {
	min-width: 860px;
}

/* строка с ползунком объема рассылки переносится, а не растягивает блок */
.ems-cost #slider tbody tr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* у первой ячейки инлайновый min-width: 140px - перебить можно только !important */
.ems-cost #slider td {
	white-space: normal;
	min-width: 0 !important;
}

.ems-cost #slider td[width="20"] {
	display: none;
}

/* ================= 8. Как подключить (socket.png) ================= */

.ems-conn {
	padding: 40px 0;
}

.ems-conn__title {
	font-size: 28px;
	line-height: 120%;
	text-align: center;
	color: var(--ems-text);
	margin-bottom: 30px;
}

.ems-conn__area {
	position: relative;
}

.ems-conn__plug {
	display: none;
}

.ems-conn__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.ems-conn__item {
	display: block;
	position: relative;
	padding: 20px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 0 25px rgba(34, 34, 34, .14);
	text-align: center;
}

.ems-conn__numb {
	position: absolute;
	top: 12px;
	left: 20px;
	font-size: 26px;
	line-height: 1;
	color: #8CC63F;
}

.ems-conn__icon {
	width: 120px;
	margin: 0 auto 14px auto;
}

.ems-conn__icon img {
	display: block;
	width: 100%;
	height: auto;
}

.ems-conn__item-title {
	font-size: 17px;
	line-height: 125%;
	color: var(--ems-text);
}

.ems-conn__item-text {
	font-weight: 350;
	font-size: 15px;
	line-height: 145%;
	color: var(--ems-text);
	margin-top: 10px;
}

.ems-conn__button {
	margin: 26px auto 0 auto;
}

/* ======================= 9. FAQ ======================= */

.ems-faq {
	padding: 40px 0;
}

.ems-faq__title {
	font-size: 52px;
	line-height: 120%;
	text-align: center;
	margin-bottom: 26px;
}

.ems-faq__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.ems-faq__item {
	display: block;
	padding: 18px 20px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 0 25px rgba(34, 34, 34, .12);
}

.ems-faq__details {
	width: 100%;
}

.ems-faq__summary {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
}

.ems-faq__summary::-webkit-details-marker {
	display: none;
}

.ems-faq__summary-title {
	font-size: 17px;
	line-height: 130%;
	text-align: left;
	margin: 0;
}

.ems-faq__summary-arrow {
	flex-shrink: 0;
	transition: all .3s ease;
}

.ems-faq__details[open] .ems-faq__summary-arrow {
	transform: rotate(180deg);
}

.ems-faq__content {
	font-weight: 350;
	font-size: 15px;
	line-height: 150%;
	text-align: left;
	color: var(--ems-text);
	padding-top: 14px;
}

.ems-faq__content a {
	color: var(--ems-green);
	border-bottom: 0;
	text-decoration: underline;
}

/* ======================= планшеты ======================= */

@media (min-width: 768px) {
	.ems-hero {
		padding: 20px 0 50px 0;
	}

	.ems-hero__row {
		flex-direction: row;
		align-items: center;
		gap: 24px;
	}

	.ems-hero__col {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ems-hero__col--img {
		flex: 0 0 auto;
		width: 42%;
	}

	.ems-hero__title {
		font-size: 44px;
	}

	.ems-hero__text {
		font-size: 20px;
	}

	.ems-hero__img {
		max-width: 100%;
	}

	.ems-hero .ems-btn {
		max-width: 300px;
	}

	.ems-stat__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding: 34px 20px;
	}

	.ems-stat__numb {
		font-size: 40px;
	}

	.ems-stat__icon {
		width: 64px;
		height: 64px;
	}

	.ems-proto__title, .ems-feat__title, .ems-auto__title,
	.ems-flow__title, .ems-conn__title {
		font-size: 36px;
	}

	.ems-proto__description, .ems-auto__description,
	.ems-feat__description, .ems-proto__item-text {
		font-size: 17px;
	}

	.ems-proto {
		padding: 60px 0 10px 0;
	}

	.ems-auto, .ems-conn, .ems-cost {
		padding: 60px 0;
	}

	.ems-faq {
		padding: 30px 0;
	}

	.ems-proto__area {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: 24px;
	}

	.ems-proto__circle {
		grid-column: 1 / -1;
	}

	.ems-proto__circle img {
		max-width: 400px;
	}

	.ems-proto__button {
		margin: 0;
		align-self: center;
	}

	/* ---- возможности: шесть полос из block.png встык, текст поверх ---- */

	.ems-feat__list {
		display: block;
	}

	.ems-feat__item {
		position: relative;
		display: block;
		gap: 0;
		padding: 0;
		border-radius: 0;
		background: none;
		/* нахлест в 1px убирает волосяные щели между полосами при дробном масштабе */
		margin-top: -1px;
	}

	.ems-feat__item--1 {
		margin-top: 0;
	}

	.ems-feat__numb {
		display: none;
	}

	.ems-feat__pic {
		flex: none;
	}

	.ems-feat__text {
		position: absolute;
		left: 52.7%;
		right: 7%;
		top: 50%;
		transform: translateY(-50%);
	}

	/* полоса масштабируется вместе с контейнером - кегль тоже */
	.ems-feat__item-title {
		font-size: 15px;
		font-size: min(calc(8px + .8vw), 19px);
		margin-bottom: 2px;
	}

	.ems-feat__item-text {
		font-size: 13px;
		font-size: min(calc(7px + .68vw), 16px);
	}

	.ems-feat__item--1 .ems-feat__text {
		top: 63%;
	}

	.ems-feat__item--6 .ems-feat__text {
		top: 37.4%;
	}

	/* ---- не тратьте время: три шага со стрелками ---- */

	.ems-auto__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}

	.ems-auto__item:after {
		content: '';
		position: absolute;
		top: 62px;
		left: 100%;
		width: 20px;
		height: 14px;
		margin-left: -10px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'%3E%3Cpath d='M1 7h26' stroke='%230254A2' stroke-width='2' stroke-linecap='round' stroke-dasharray='4 5'/%3E%3Cpath d='M30 2l6 5-6 5' stroke='%230254A2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	.ems-auto__item:last-child:after {
		display: none;
	}

	.ems-auto__icon {
		width: 150px;
	}

	/* ---- схема: до 1160px подписи поверх картинки не помещаются,
	   вместо нее - карточки с медальонами ---- */

	.ems-flow {
		padding: 60px 0;
	}

	.ems-flow__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		padding-bottom: 0;
	}

	.ems-flow__item {
		padding: 18px 20px;
	}

	.ems-flow__item-title {
		font-size: 18px;
	}

	.ems-flow__item-text {
		font-size: 16px;
	}

	.ems-conn__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.ems-conn__item {
		text-align: left;
	}

	.ems-conn__icon {
		margin: 18px 0 14px 0;
	}

	.ems-faq__title {
		font-size: 44px;
	}

	.ems-faq__item {
		padding: 22px 26px;
	}

	.ems-faq__summary-title {
		font-size: 24px;
		color: black;
	}

	.ems-conn__item-text {
		font-size: 17px;
	}

	.ems-faq__content {
		font-size: 17px;
	}
}

/* ======================= десктоп ======================= */

@media (min-width: 1160px) {
	.page-mail-server .container {
		padding: 0;
	}

	.ems-hero__title {
		font-size: 56px;
	}

	.ems-hero__text {
		font-size: 24px;
	}

	.ems-hero__steps {
		grid-template-columns: 152px 152px 168px;
		gap: 25px;
	}

	.ems-hero__col--img {
		width: 46%;
	}

	.ems-proto__title, .ems-feat__title, .ems-auto__title,
	.ems-flow__title, .ems-conn__title {
		font-size: 44px;
	}

	.ems-stat__numb {
		font-size: 46px;
	}

	.ems-stat__text {
		font-size: 16px;
	}

	/* ---- протоколы: круг в центре, четыре угла с выносками ---- */

	.ems-proto__area {
		display: block;
		position: relative;
		min-height: 550px;
	}

	.ems-proto__circle {
		position: absolute;
		left: 54.7%;
		top: 54px;
		width: 420px;
		margin-left: -260px;
	}

	.ems-proto__circle img {
		max-width: 100%;
	}

	.ems-proto__item {
		position: absolute;
		width: 300px;
		padding: 0;
		border: 0;
		border-radius: 0;
	}

	.ems-proto__item:before {
		content: '';
		position: absolute;
		left: 0;
		top: -46px;
		width: 470px;
		height: 66px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='470' height='66' viewBox='0 0 470 66'%3E%3Cpath d='M0 2H300L370 64H470' stroke='%2372B634' stroke-width='2.4' fill='none'/%3E%3C/svg%3E") no-repeat left top;
	}

	.ems-proto__item--tl {
		left: 0;
		top: 92px;
	}

	.ems-proto__item--tr {
		right: 0;
		top: 84px;
	}

	.ems-proto__item--tr:before {
		left: auto;
		right: 0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='470' height='66' viewBox='0 0 470 66'%3E%3Cpath d='M470 2H170L100 64H0' stroke='%2372B634' stroke-width='2.4' fill='none'/%3E%3C/svg%3E");
		background-position: right top;
	}

	.ems-proto__item--bl {
		left: 0;
		top: 396px;
	}

	.ems-proto__button {
		position: absolute;
		right: 0;
		top: 410px;
		width: 300px;
		max-width: none;
		margin: 0;
	}

	.ems-proto__item-title {
		font-size: 20px;
	}

	/* ---- схема: картинка в рамках макета, подписи поверх ----
	   во всю ширину экрана она вырастала до 1050px по высоте и не влезала
	   в экран целиком; по бокам труба продолжается фоном из вертикальных
	   срезов той же картинки (flow-l / flow-r), поэтому блок по-прежнему
	   уходит за края */

	.ems-flow {
		padding: 60px 0;
		overflow: hidden;
	}

	.ems-flow__area {
		max-width: 1400px;
		margin: 0 auto;
	}

	.ems-flow__pic {
		display: block;
		line-height: 0;
	}

	.ems-flow__pic img {
		display: block;
		width: 100%;
		height: auto;
	}

	.ems-flow__list {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.ems-flow__item {
		position: absolute;
		display: block;
		width: 26%;
		padding: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.ems-flow__icon {
		display: none;
	}

	/* картинка схемы дальше 1400px не растет, поэтому кегль фиксированный */
	.ems-flow__item-title {
		font-size: 17px;
		margin-bottom: 6px;
	}

	.ems-flow__item-text {
		font-size: 15px;
	}

	/* подписи слева от схемы прижаты к ней правым краем - так их текст
	   растет в пустое поле, а не наезжает на медальон */

	.ems-flow__item--1 { left: 47%; top: 15% }
	.ems-flow__item--3 { left: 60%; top: 42% }

	.ems-flow__item--2 {
		left: 0;
		right: 67.6%;
		top: 45%;
		width: auto;
		padding-left: 4%;
		text-align: right;
	}

	.ems-flow__item--4 {
		left: 0;
		right: 54.6%;
		top: 72%;
		width: auto;
		padding-left: 12%;
		text-align: right;
	}

	/* ---- как подключить: четыре карточки и провод ---- */

	.ems-conn__area {
		min-height: 450px;
	}

	.ems-conn__plug {
		display: block;
		position: absolute;
		left: 42.4%;
		top: -30px;
		width: 46%;
		z-index: 1;
		line-height: 0;
	}

	.ems-conn__plug img {
		display: block;
		width: 100%;
		height: auto;
	}

	.ems-conn__list {
		position: relative;
		z-index: auto;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: start;
		gap: 24px;
	}

	.ems-conn__item {
		z-index: 2;
		padding: 26px 22px;
	}

	/* провод из макета проходит поверх третьей карточки */
	.ems-conn__item--3 {
		z-index: 0;
		margin-top: 150px;
	}

	.ems-conn__button {
		position: relative;
		z-index: 1;
		width: calc((100% - 72px) / 4);
		max-width: none;
		margin: 0 0 0 auto;
		top: -52px;
	}

	.ems-auto__icon {
		width: 170px;
	}

	.ems-auto__item:after {
		top: 76px;
		width: 56px;
		margin-left: -28px;
	}
}

/* хвосты трубы нужны только там, где экран шире самой схемы */

@media (min-width: 1400px) {
	/* срез по горизонтали однороден, поэтому его не размножаем плиткой
	   (стыки видны на тени под трубой), а растягиваем на всю ширину поля */

	.ems-flow__area:before, .ems-flow__area:after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		width: 50vw;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	/* заезжаем на 2px под картинку - там край, размытый ресайзом браузера */
	.ems-flow__area:before {
		right: calc(100% - 2px);
		background-image: url(/im/mail-server/flow-l.png);
	}

	.ems-flow__area:after {
		left: calc(100% - 2px);
		background-image: url(/im/mail-server/flow-r.png);
	}
}

/* три колонки шагов не вмещают длинные слова на узком экране */

@media (max-width: 480px) {
	.ems-hero__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

@media (max-width: 560px) {
	.ems-btn {
		max-width: none;
		padding: 12px 20px;
		font-size: 19px;
	}

	.ems-faq__title {
		font-size: 40px;
	}

	.ems-stat__list {
		padding: 22px 10px;
	}

	.ems-stat__numb {
		font-size: 26px;
	}
}