/* ======================= Mobile ID: общее ======================= */

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

html * {
	max-height: 9001em;
}

body {
	letter-spacing: normal;
}

:root {
	--mid-blue: #005295;
	--mid-blue-d: #09539F;
	--mid-green: #67B544;
	--mid-green-h: #5D9F24;
	--mid-text: #222222;
}

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

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

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

.page-mobile-id ul, .page-mobile-id ol {
	list-style: none;
}

.page-mobile-id li {
	line-height: inherit;
}

.page-mobile-id li:before {
	content: "";
	margin-right: 0;
}

.page-mobile-id p {
	margin: 0;
	max-width: none;
}

.page-mobile-id h1, .page-mobile-id h2, .page-mobile-id h3 {
	font-weight: 500;
	margin: 0;
}

.page-mobile-id h2 {
	margin-bottom: 40px;
}

/* кнопки */

.mid-btn {
	display: block;
	width: 100%;
	max-width: 320px;
	padding: 14px 26px;
	border: 2px solid var(--mid-blue-d);
	border-radius: 6px;
	background: var(--mid-blue-d);
	color: #fff;
	font-weight: 500;
	font-size: 17px;
	line-height: 120%;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all .3s ease;
}

.mid-btn:hover {
	background: #0F4985;
	border-color: #0F4985;
	color: #fff;
}

.mid-btn:active {
	background: #1C406B;
	border-color: #1C406B;
}

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

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

.mid-btn--sm {
	max-width: none;
	padding: 11px 20px;
	border-radius: 24px;
	font-size: 15px;
}

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

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

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

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

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

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

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

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

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

/* =========== 2-3. Зелёная зона: отказы + что меняется =========== */

.mid-green {
	position: relative;
	overflow: hidden;
	padding: 30px 0 40px 0;
}

.mid-green::before {
	content: '';
	position: absolute;
	left: -8%;
	right: -8%;
	top: 130px;
	bottom: 0;
	background: var(--mid-green);
}

.mid-green > * {
	position: relative;
	z-index: 1;
}

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

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

.mid-drop__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px;
	border-radius: 16px;
	background: var(--mid-blue);
	color: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}

.mid-drop__item-title {
	font-size: 20px;
	line-height: 125%;
}

.mid-drop__item-text {
	font-weight: 350;
	font-size: 16px;
	line-height: 140%;
}

.mid-drop__item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 170px;
	margin-top: auto;
	border-radius: 12px;
	background: rgba(255, 255, 255, .26);
}

.mid-drop__item-icon img {
	width: 90px;
	height: auto;
}

.mid-drop__note {
	margin-top: 24px;
	padding: 16px 24px;
	border-radius: 12px;
	background: var(--mid-blue);
	color: #fff;
	font-size: 16px;
	line-height: 135%;
	text-align: center;
}

.mid-change {
	padding-top: 40px;
}

.mid-change .container {
	margin-top: 20px;
}

.mid-change__title {
	font-size: 28px;
	line-height: 120%;
	color: #fff;
	margin-bottom: 14px;
}

.mid-change__description {
	font-weight: 350;
	font-size: 16px;
	line-height: 140%;
	color: #fff;
	max-width: 720px;
	margin-bottom: 26px;
}

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

.mid-change__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(34, 34, 34, .14);
}

.mid-change__icon {
	display: flex;
	flex-shrink: 0;
	width: 52px;
}

.mid-change__icon img {
	width: 100%;
	height: auto;
}

.mid-change__text {
	flex: 1 1 auto;
	font-weight: 350;
	font-size: 16px;
	line-height: 130%;
	text-align: center;
	color: var(--mid-text);
}

/* ======================= 4. Как это работает ======================= */

.mid-how {
	padding: 40px 0;
}

.mid-how__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 30px 18px;
	border-radius: 20px;
	background: linear-gradient(180deg, #044485 0%, #0D5498 100%);
	color: #fff;
}

.mid-how__title {
	font-size: 30px;
	line-height: 120%;
	color: #fff;
	margin-bottom: 12px;
}

.mid-how__description {
	font-weight: 350;
	font-size: 17px;
	line-height: 140%;
	margin-bottom: 26px;
}

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

.mid-how__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 22px;
	border-radius: 18px;
	background: #125492;
	overflow: hidden;
}

.mid-how__numb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--mid-green);
	font-size: 24px;
	line-height: 1;
}

.mid-how__item-title {
	font-size: 24px;
	line-height: 120%;
	margin-bottom: 12px;
}

.mid-how__item-text {
	font-weight: 350;
	font-size: 16px;
	line-height: 140%;
}

.mid-how__phone {
	position: relative;
	width: 210px;
	margin: 0 auto -22px auto;
}

.mid-how__phone::before {
	content: '';
	position: absolute;
	left: -8%;
	right: -8%;
	top: 38%;
	bottom: 26px;
	border-radius: 16px;
	background: var(--mid-green);
}

.mid-how__phone img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

.mid-how__note {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	padding: 18px 20px;
	border-radius: 16px;
	background: #125796;
	width: 80%;
	margin-left: 10%;
}

.mid-how__note-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: #fff;
}

.mid-how__note-text {
	font-weight: 350;
	font-size: 15px;
	line-height: 145%;
}

/* ============ декоративные окружности (белая обводка) ============ */

.mid-circle {
	display: none;
}

/* ======================= 5. Кейсы ======================= */

.mid-case {
	padding: 40px 0;
}

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

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

.mid-case__item {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 20px;
	border: 3px solid #CCDCEA;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 0 25px rgba(34, 34, 34, .14);
}

.mid-case__item--accent {
	border-color: transparent;
}

.mid-case__item-title {
	font-size: 26px;
	line-height: 115%;
	color: var(--mid-blue-d);
}

.mid-case__item-desc {
	font-weight: 350;
	font-size: 14px;
	line-height: 140%;
	color: #555;
}

.mid-case__item-res {
	font-weight: 350;
	font-size: 17px;
	line-height: 140%;
	color: var(--mid-text);
	margin-top: auto;
}

.mid-case__item--accent {
	background: var(--mid-green);
}

.mid-case__item--accent .mid-case__item-title,
.mid-case__item--accent .mid-case__item-desc,
.mid-case__item--accent .mid-case__item-res {
	color: #fff;
}

/* =================== 6. Почему бизнес выбирает =================== */

.mid-why {
	padding: 40px 0;
}

.mid-why__row {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mid-why__aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
	border-radius: 20px;
	background: var(--mid-green);
}

.mid-why__stat {
	font-weight: 350;
	font-size: 16px;
	line-height: 135%;
	color: #fff;
}

.mid-why__main {
	min-width: 0;
}

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

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

.mid-why__card {
	display: block;
	padding: 22px;
	border: 3px solid #CCDCEA;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(34, 34, 34, .20);
}

.mid-why__card-title {
	font-size: 17px;
	line-height: 130%;
	color: var(--mid-blue-d);
	margin-bottom: 12px;
}

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

.mid-why__bottom {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 20px;
}

.mid-why__green {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	border-radius: 20px;
	background: var(--mid-green);
}

.mid-why__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 130px;
	height: 130px;
	margin: 0 auto;
	border-radius: 20px;
	background: #fff;
}

.mid-why__icon img {
	width: 100px;
	height: auto;
}

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

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

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

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

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

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

.mid-conn__area {
	position: relative;
}

.mid-conn__plug {
	display: none;
}

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

.mid-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;
}

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

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

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

.mid-conn__item-title a {
	color: var(--mid-blue-d);
	border-bottom: 0;
	text-decoration: underline;
	font-size: 17px;
}

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

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

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

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

.mid-faq__title {
	font-size: 52px;
	line-height: 120%;
	text-align: center;
	/*color: var(--mid-text);*/
	margin-bottom: 26px;
}

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

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

.mid-faq__details {
	width: 100%;
}

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

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

.mid-faq__summary-title {
	font-size: 17px;
	line-height: 130%;
	text-align: left;
	/*color: #555;*/
	margin: 0;
}

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

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

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

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

.page-mobile-id .mid-faq__ol {
	counter-reset: mid-faq;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.page-mobile-id .mid-faq__ol li {
	display: block;
	counter-increment: mid-faq;
	padding-left: 26px;
	position: relative;
}

.page-mobile-id .mid-faq__ol li:before {
	content: counter(mid-faq) ".";
	position: absolute;
	left: 4px;
	top: 0;
	color: var(--mid-blue-d);
}

/* ======================= 10. Запросить КП ======================= */

.mid-kp {
	padding: 20px 0 50px 0;
}

.mid-kp__panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 30px 22px;
	border-radius: 20px;
	background: var(--mid-blue);
	overflow: hidden;
}

.mid-kp__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.mid-kp__title {
	font-size: 28px;
	line-height: 120%;
	color: #fff;
}

.mid-kp__text {
	font-weight: 350;
	font-size: 16px;
	line-height: 140%;
	color: #fff;
}

.mid-kp__image {
	display: flex;
	justify-content: center;
}

.mid-kp__image img {
	width: 100%;
	max-width: 320px;
	height: auto;
}

/* переносы в заголовках включаем только на широких экранах */

.mid-case__title br, .mid-why__title br, .mid-kp__title br, .mid-how__description br {
	display: none;
}

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

@media (min-width: 768px) {
	.mid-case__title br, .mid-why__title br, .mid-kp__title br, .mid-how__description br {
		display: inline;
	}

	.mid-hero {
		padding: 20px 0 50px 0;
	}

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

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

	.mid-hero__col--img {
		flex: 0 0 auto;
		width: 40%;
	}

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

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

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

	.mid-hero .mid-btn {
		max-width: 280px;
	}

	.mid-green {
		padding: 50px 0 60px 0;
	}

	.mid-green::before {
		top: 150px;
		bottom: -70px;
		transform: rotate(-4deg);
	}

	.mid-drop__title, .mid-change__title, .mid-case__title,
	.mid-why__title, .mid-conn__title, .mid-kp__title {
		font-size: 36px;
	}

	.mid-drop__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.mid-drop__note {
		font-size: 17px;
	}

	.mid-change__description, .mid-change__text, .mid-why__card-text {
		font-size: 17px;
	}

	.mid-change__list {
		grid-template-columns: repeat(2, 38%);
		justify-content: start;
		gap: 22px 4%;
	}

	.mid-change__item:nth-child(n+3) {
		transform: translateX(18%);
	}

	.mid-change__item:nth-child(n+5) {
		transform: translateX(36%);
	}

	.mid-how, .mid-case, .mid-why, .mid-conn, .mid-faq, .mid-cost {
		padding: 60px 0;
	}

	.mid-how__panel {
		padding: 40px 30px;
	}

	.mid-how__title {
		font-size: 44px;
	}

	.mid-how__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.mid-how__item {
		flex-direction: row;
		align-items: stretch;
		gap: 28px;
		min-height: 300px;
		padding-bottom: 0;
	}

	.mid-how__item-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1 1 auto;
		min-width: 0;
		padding-bottom: 22px;
	}

	.mid-how__phone {
		flex: 0 0 40%;
		width: auto;
		margin: 0;
	}

	.mid-how__phone::before {
		top: 42%;
		bottom: 10px;
	}

	.mid-how__phone img {
		position: absolute;
		left: 0;
		top: 4%;
		width: 100%;
	}

	.mid-case__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mid-why__row {
		flex-direction: row;
		align-items: stretch;
		gap: 24px;
	}

	.mid-why__aside {
		flex: 0 0 24%;
		justify-content: space-between;
		padding: 30px 22px;
	}

	.mid-why__main {
		flex: 1 1 auto;
	}

	.mid-why__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
	}

	.mid-why__green {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		padding: 24px;
	}

	.mid-why__icon {
		width: 150px;
		height: 150px;
	}

	.mid-why__icon img {
		width: 115px;
	}

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

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

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

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

	.mid-conn__item-text {
		font-size: 18px;
	}

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

	.mid-kp__panel {
		flex-direction: row;
		align-items: center;
		gap: 30px;
		padding: 40px;
	}

	.mid-kp__content {
		flex: 1 1 auto;
	}

	.mid-kp__text {
		font-size: 17px;
	}

	.mid-kp__image {
		flex: 0 0 34%;
	}

	.mid-kp__image img {
		max-width: 100%;
	}
}

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

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

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

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

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

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

	.mid-drop__title, .mid-change__title, .mid-case__title,
	.mid-why__title, .mid-conn__title, .mid-kp__title, .mid-how__title {
		font-size: 44px;
	}

	.mid-drop__list {
		gap: 30px;
	}

	.mid-drop__item {
		padding: 26px;
	}

	.mid-drop__item-title {
		font-size: 22px;
	}

	.mid-change__list {
		grid-template-columns: repeat(2, 34%);
		gap: 24px 4.4%;
	}

	.mid-change__item {
		padding: 16px 24px;
	}

	.mid-change__item:nth-child(n+3) {
		transform: translateX(40%);
	}

	.mid-change__item:nth-child(n+5) {
		transform: translateX(78%);
	}

	.mid-change__icon {
		width: 60px;
	}

	.mid-how__panel {
		padding: 50px 40px;
	}

	.mid-how__item {
		min-height: 330px;
		padding: 26px;
		padding-bottom: 0;
	}

	.mid-how__phone {
		flex: 0 0 38%;
	}

	.mid-case__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: stretch;
	}

	.mid-case__item {
		position: relative;
		z-index: 1;
		padding: 26px 22px;
	}

	/* фон даёт сплошной слой .mid-solid, у карточки своего фона нет */
	.mid-case__item--accent {
		background: none;
		box-shadow: none;
	}

	.mid-case {
		padding-bottom: 30px;
	}

	.mid-why {
		position: relative;
		z-index: 1;
		padding-top: 0;
		padding-bottom: 0;
		margin-bottom: 60px;
	}

	.mid-why__main {
		padding-top: 40px;
	}

	.mid-why__aside {
		flex: 0 0 calc((100% - 60px) / 4);
		background: none;
	}

	.mid-why__bottom {
		position: relative;
		flex-direction: row;
		margin-top: 22px;
		padding-bottom: 141px;
	}

	.mid-why__card--wide {
		position: relative;
		z-index: 2;
		width: 49%;
		margin: 0;
		box-shadow: 0 14px 26px -8px rgba(34, 34, 34, .28);
	}

	.mid-why__bottom::before {
		content: '';
		position: absolute;
		z-index: -1;
		left: -24px;
		width: calc(50% + 36px);
		top: -30px;
		bottom: 108px;
		border-radius: 24px;
		background: #fff;
	}

	.mid-why__green {
		position: absolute;
		z-index: 0;
		left: calc(50% + 12px);
		right: 0;
		top: 0;
		bottom: 0;
		border-radius: 20px;
	}

	.mid-solid {
		position: relative;
		max-width: 1200px;
		margin: 0 auto;
	}

	.mid-solid::before, .mid-solid::after {
		content: '';
		position: absolute;
		z-index: 0;
		border-radius: 20px;
		background: var(--mid-green);
	}

	.mid-solid::before {
		left: 0;
		top: 0;
		bottom: 0;
		width: calc((100% - 60px) / 4);
	}

	.mid-solid::after {
		left: 0;
		right: 0;
		bottom: 0;
		height: 150px;
	}

	.mid-conn__area {
		min-height: 470px;
	}

	.mid-conn__plug {
		display: block;
		position: absolute;
		left: 32%;
		top: -10px;
		width: 53%;
		height: auto;
		z-index: 1;
	}

	.mid-conn__list {
		position: relative;
		z-index: auto;
		align-items: start;
		gap: 30px;
	}

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

	.mid-conn__item:nth-child(2) {
		z-index: 0;
		margin-top: 170px;
	}

	.mid-conn__button {
		position: relative;
		z-index: 1;
		width: calc((100% - 60px) / 3);
		max-width: none;
		margin: 0 0 0 auto;
		top: -34px;
	}

	.mid-kp__panel {
		padding: 50px;
	}

	.mid-kp__title {
		font-size: 40px;
	}
}

/* ============ декоративные окружности (белая обводка) ============ */

@media (min-width: 768px) {
	.mid-circle {
		display: block;
		position: absolute;
		z-index: -1;
		border: 3px solid rgba(255, 255, 255, .90);
		border-radius: 50%;
		pointer-events: none;
	}

	/* зелёная полоса: «почему бросают» */
	.mid-circle--g1 {
		width: 500px;
		height: 500px;
		left: -330px;
		top: 90px;
	}

	.mid-circle--g2 {
		width: 560px;
		height: 560px;
		right: -350px;
		top: -110px;
	}

	/* зелёная полоса: «что меняется» */
	.mid-circle--g3 {
		width: 380px;
		height: 380px;
		left: -50px;
		top: 130px;
	}

	.mid-circle--g4 {
		width: 460px;
		height: 460px;
		right: -300px;
		top: 120px;
	}

	/* синяя панель «как это работает» — еле заметные дуги */
	.mid-circle--h1, .mid-circle--h2 {
		border-color: rgba(255, 255, 255, .13);
	}

	.mid-circle--h1 {
		width: 460px;
		height: 460px;
		right: -150px;
		top: -190px;
	}

	.mid-circle--h2 {
		width: 300px;
		height: 300px;
		right: -30px;
		top: -70px;
	}

}

@media (min-width: 1160px) {
	.mid-circle--g3 {
		left: 20px;
		top: 150px;
	}

	/* сплошной зелёный слой: кейсы + «почему бизнес» */
	.mid-circle--s1 {
		width: 340px;
		height: 340px;
		left: -120px;
		top: 30px;
	}

	.mid-circle--s2 {
		width: 240px;
		height: 240px;
		left: -155px;
		bottom: 20px;
	}

	/* дуга в правом нижнем углу зелёного блока (обрезается его краями) */
	.mid-circle--s3 {
		width: 214px;
		height: 214px;
		right: -21%;
		bottom: -34px;
	}

	/* дуга выходит из-за карточки «Простое подключение по API»:
	   лежит под карточкой (z-index 0 против её z-index 1), концы уходят за неё */
	.mid-circle--s4 {
		z-index: 0;
		width: 198px;
		height: 198px;
		left: 36.2%;
		top: 49px;
	}
}