/* Направление «Интернет-магазин»: /magazin/ и /magazin/tarify/.
 *
 * Макет — Figma wGC5YgBMUF7AxqsAquKJKC, кадры 1176:7187 и 1176:8567
 * (утверждены владельцем 20.10.2026). ПК-вёрстка 1440 с контейнером 1200;
 * на телефоне колонки встают в стопку, отдельного мобильного макета нет.
 *
 * ⚠ Все правила — под `.mg` (обёртка `<main class="mg">`): шапка и подвал сайта
 * лежат вне неё, поэтому пилюли-кнопки и контейнер 1200 их не трогают. Общие
 * классы landing.css (.wrap, .section, .section__head, .eyebrow, .btn, .faq,
 * .lead, .lead-ways) используются как есть, здесь они только подогнаны под кадр.
 * Свои классы — с приставкой `mg-`; в чужие CSS этот файл ничего не пишет.
 *
 * Токены сайта (--ink, --muted, --line, --blue, --tint, --bg-soft) берутся из
 * landing.css; недостающие (сильный tint, градиенты плиток, тени) — ниже.
 */

.mg {
	--mg-tint-strong: #dbeafe;
	--mg-shadow: 0 10px 30px rgba(17, 24, 39, .06);
	--mg-shadow-sm: 0 10px 15px rgba(17, 24, 39, .06);
	--mg-grad-blue: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	--mg-grad-violet: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
	--mg-grad-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
	--mg-grad-amber: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	color: var(--ink);
}

.mg .wrap { max-width: 1248px; }
.mg [id] { scroll-margin-top: 96px; }

/* ── Общие части ──────────────────────────────────────────────────────── */

.mg .section { padding: 88px 0; }
.mg .section--soft { background: var(--bg-soft); }

.mg .section__head { max-width: 820px; margin: 0 auto 48px; text-align: center; }
.mg .section__head h2 {
	margin: 16px 0 0;
	font-size: 40px;
	line-height: 48px;
	font-weight: 700;
	letter-spacing: 0;
}
.mg .section__head p { margin: 16px 0 0; font-size: 20px; line-height: 30px; color: var(--muted); }
.mg .section__head p:empty { display: none; }

/* Бейдж секции: пилюля tint с синей точкой, капсом. */
.mg .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--tint);
	color: var(--blue);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .08em;
}
.mg .eyebrow::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

/* Кнопки кадра: пилюля высотой 52. Primary — штатный `.btn`. */
.mg .btn {
	justify-content: center;
	min-height: 52px;
	padding: 0 28px;
	border-radius: 999px;
	font-size: 16px;
	line-height: 1.2;
}
/* Secondary: белая пилюля с линией. */
.mg .btn--line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.mg .btn--line:hover { background: var(--tint); color: var(--blue); }
/* Ghost на синей полосе: белый текст без фона. */
.mg .btn--clear { background: transparent; color: #fff; }
.mg .btn--clear:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.mg .btn--block { width: 100%; }

/* Крошки. */
.mg .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; line-height: 17px; color: var(--muted); }
.mg .crumbs a:hover { color: var(--blue); }
.mg .crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }

/* Плитка-иконка с градиентом: 40 в схеме, 48 в «Что внутри», 44 в услугах, 56 в демо/пробе. */
.mg-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--mg-grad-blue);
	color: #fff;
}
.mg-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mg-ico--blue { background: var(--mg-grad-blue); }
.mg-ico--violet { background: var(--mg-grad-violet); }
.mg-ico--green { background: var(--mg-grad-green); }
.mg-ico--amber { background: var(--mg-grad-amber); }
.mg-ico--lg { width: 48px; height: 48px; border-radius: 14px; }
.mg-ico--lg svg { width: 24px; height: 24px; }
.mg-ico--md { width: 44px; height: 44px; border-radius: 14px; }
.mg-ico--md svg { width: 22px; height: 22px; }
.mg-ico--xl { width: 56px; height: 56px; border-radius: 16px; }
.mg-ico--xl svg { width: 28px; height: 28px; }

/* Чип: пилюля tint, синий текст 14 Medium. */
.mg-chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--tint);
	color: var(--blue);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
}
a.mg-chip:hover { background: #fff; }

/* ── Hero /magazin/ ───────────────────────────────────────────────────── */

.mg-hero { padding: 48px 0 88px; background: linear-gradient(90deg, var(--bg-soft) 0%, #e8ecfb 100%); }

.mg-hero__cols {
	display: grid;
	grid-template-columns: minmax(0, 600fr) minmax(0, 520fr);
	gap: 80px;
	align-items: center;
	margin-top: 40px;
}

.mg-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.mg-hero h1 { margin: 0; font-size: 56px; line-height: 64px; font-weight: 700; letter-spacing: 0; }
.mg-hero__lead { margin: 0; font-size: 20px; line-height: 30px; color: var(--muted); }

/* Выбор отрасли + «Смотреть демо» + пояснение. */
.mg-demo { display: flex; flex-direction: column; gap: 12px; }
.mg-demo__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mg-demo__note { font-size: 14px; line-height: 20px; color: var(--muted); }

.mg-select { position: relative; width: 300px; max-width: 100%; }
.mg-select select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 52px;
	padding: 0 48px 0 20px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center / 20px;
	color: var(--muted);
	font: inherit;
	font-size: 16px;
	cursor: pointer;
}
/* Пока выбран пустой пункт (required), цвет приглушён; выбрали отрасль — чернила. */
.mg-select select:valid { color: var(--ink); }
.mg-select select:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29, 78, 216, .16); }
.mg-select option { color: var(--ink); }
.mg-select option:disabled { color: #9ca3af; }

/* Мозаика справа: карточка товара, канал, чек, этикетка. */
.mg-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.mg-mosaic__col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mg-mosaic__col--b { padding-top: 56px; }

.mg-mcard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--mg-shadow);
}
.mg-mcard__cap { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--muted); }
.mg-mcard__name { font-size: 16px; line-height: 22px; font-weight: 600; }
.mg-mcard__price { font-size: 20px; line-height: 24px; font-weight: 700; white-space: nowrap; }

.mg-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 140px;
	border-radius: 16px;
	background: linear-gradient(147deg, #e8eefc 0%, #c7d6f8 100%);
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
}

.mg-pill { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: #ecfdf5; color: #059669; font-size: 12px; line-height: 15px; font-weight: 600; }

.mg-channel { display: flex; align-items: center; gap: 10px; }
.mg-channel .mg-ico { width: 36px; height: 36px; border-radius: 12px; }
.mg-channel .mg-ico svg { width: 18px; height: 18px; }
.mg-channel__t b { display: block; font-size: 14px; line-height: 17px; font-weight: 600; }
.mg-channel__t span { display: block; font-size: 12px; line-height: 15px; color: var(--muted); }

.mg-post { width: 100%; padding: 12px 14px; border-radius: 16px; background: var(--tint); }
.mg-post b { display: block; margin-bottom: 6px; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--blue); }
.mg-post p { margin: 0; font-size: 14px; line-height: 20px; }

.mg-receipt__title { font-size: 20px; line-height: 24px; font-weight: 700; }
.mg-receipt__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; font-size: 14px; line-height: 17px; white-space: nowrap; }
.mg-receipt__row span { color: var(--muted); }
.mg-receipt__row b { font-weight: 500; }
.mg-receipt__row--sum span { color: var(--ink); font-weight: 600; }
.mg-receipt__row--sum b { font-weight: 700; }
.mg-receipt hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--line); }

.mg-label { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.mg-label b { display: block; font-size: 14px; line-height: 17px; font-weight: 600; }
.mg-label span { display: block; margin: 6px 0; font-size: 12px; line-height: 15px; color: var(--muted); }
.mg-bars { display: flex; align-items: stretch; gap: 2px; height: 44px; }
.mg-bars i { display: block; flex: none; background: var(--ink); }

/* ── «Как это работает» ───────────────────────────────────────────────── */

.mg-flow { display: flex; align-items: center; }
.mg-flow__node {
	display: flex;
	align-items: center;
	flex: 1 1 0;
	gap: 8px;
	min-width: 0;
	height: 96px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--mg-shadow);
}
.mg-flow__node b { display: block; font-size: 15px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.mg-flow__node span { display: block; margin-top: 2px; font-size: 13px; line-height: 16px; color: var(--muted); white-space: nowrap; }
.mg-flow__arrow { display: flex; flex: 0 0 50px; align-items: center; justify-content: center; color: #9ca3af; }
.mg-flow__arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── «Что внутри»: восемь плиток ──────────────────────────────────────── */

.mg-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.mg-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--mg-shadow-sm);
}
.mg-tile h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.mg-tile p { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted); }

/* ── Уровни: карточки (одни и те же на /magazin/ и /magazin/tarify/) ──── */

.mg-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }

.mg-level {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--mg-shadow-sm);
}
/* Популярный: рамка синяя 2 px; padding уменьшен на 1 px, чтобы высота не прыгала. */
.mg-level--pop { padding: 27px; border: 2px solid var(--blue); }

.mg-level__head { display: flex; flex-direction: column; gap: 6px; }
.mg-level__name { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mg-level__name h3 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; }
.mg-level__tag { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12px; line-height: 1.2; font-weight: 600; }
.mg-level__for { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }

.mg-level__price { display: flex; flex-direction: column; gap: 4px; }
.mg-level__sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.mg-level__sum b { font-size: 40px; line-height: 48px; font-weight: 700; white-space: nowrap; }
.mg-level__sum span { font-size: 14px; line-height: 20px; color: var(--muted); }

.mg-level hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--line); }

.mg-level__list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mg-level__list li { display: flex; align-items: flex-start; gap: 12px; }
.mg-level__list b { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
.mg-level__list span { display: block; font-size: 14px; line-height: 20px; color: var(--muted); }

/* Значок «входит» / «нет»: круг 20, рисуется фоном — лишних файлов не надо. */
.mg-mark { flex: none; width: 20px; height: 20px; border-radius: 10px; background: #f3f4f6 center / 12px no-repeat; }
.mg-mark--yes {
	background-color: var(--mg-tint-strong);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231d4ed8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E");
}
.mg-mark--no {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 6h6'/%3E%3C/svg%3E");
}

.mg-more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 48px; text-align: center; }
.mg-more p { margin: 0; font-size: 14px; color: var(--muted); }

/* ── Услуги направления ───────────────────────────────────────────────── */

.mg-srv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.mg-srv__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--mg-shadow);
}
.mg-srv__item h3 { min-height: 56px; margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.mg-srv__price { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.mg-srv__price b { font-size: 28px; line-height: 36px; font-weight: 700; white-space: nowrap; }
.mg-srv__price span { font-size: 14px; line-height: 20px; color: var(--muted); }
.mg-srv__item hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--line); }
.mg-srv__item p { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }

/* ── Кейсы ────────────────────────────────────────────────────────────── */

.mg-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mg-case {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--mg-shadow);
	transition: transform .15s, box-shadow .15s;
}
.mg-case:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(17, 24, 39, .1); }
.mg-case__shot {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 220px;
	background: linear-gradient(148deg, #dbeafe 0%, #e8ecfb 70.7%);
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}
.mg-case__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 20px 24px; }
.mg-case__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; color: var(--muted); }
.mg-case h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.mg-case p { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.mg-case__more { margin-top: auto; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--blue); }

/* ── Синяя полоса: демо под отрасль ───────────────────────────────────── */

.mg-strip { padding: 40px 0; background: #fff; }
.mg-band {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 64px;
	border-radius: 32px;
	background: linear-gradient(90deg, #1d4ed8 0%, #1e40af 100%);
	color: #fff;
	text-align: center;
}
.mg-band h2 { margin: 0; font-size: 40px; line-height: 48px; font-weight: 700; color: #fff; }
.mg-band p { margin: 0; font-size: 20px; line-height: 30px; color: var(--mg-tint-strong); }
.mg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-bottom: 8px; }
.mg-chip--outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
a.mg-chip--outline:hover { background: rgba(255, 255, 255, .14); }
.mg-band__btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }

/* ── CTA: светлая полоса с формой ─────────────────────────────────────── */

.mg-cta { padding: 40px 0 88px; background: #fff; }
.mg-cta__band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	gap: 64px;
	align-items: center;
	padding: 56px 64px;
	border: 1px solid var(--mg-tint-strong);
	border-radius: 32px;
	background: var(--tint);
}
.mg-cta__text h2 { margin: 0 0 12px; font-size: 40px; line-height: 48px; font-weight: 700; }
.mg-cta__text p { margin: 0; font-size: 20px; line-height: 30px; color: var(--muted); }

/* Форма заявки — общий партиал; в светлой полосе она белая карточка без тяжёлой
   тени (тень рассчитана на тёмную подложку), заголовок убран: он уже слева. */
.mg-cta .lead { gap: 14px; padding: 28px; border-radius: 24px; box-shadow: var(--mg-shadow); }
.mg-cta .lead .lead__title { display: none; }
.mg-cta .lead .lead__submit { min-height: 52px; border-radius: 999px; font-size: 16px; }
.mg-cta .lead .lead__note:empty { display: none; }

/* ── FAQ: строки с плюсом (партиал faq.php) ───────────────────────────── */

.mg .wrap--narrow { max-width: 1248px; }
.mg .faq { display: flex; flex-direction: column; gap: 0; max-width: none; margin: 0; }
.mg .faq__item { padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.mg .faq__item summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 0;
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}
.mg .faq__item summary::-webkit-details-marker { display: none; }
.mg .faq__item summary::after {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	margin-left: auto;
	border-radius: 50%;
	background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231d4ed8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M7 2v10M2 7h10'/%3E%3C/svg%3E") center / 14px no-repeat;
	transform: none;
}
.mg .faq__item[open] summary::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231d4ed8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 7h10'/%3E%3C/svg%3E");
	transform: none;
}
.mg .faq__answer { padding: 0 64px 24px 0; font-size: 16px; line-height: 24px; color: var(--muted); }
.mg .faq__answer p { margin: 0; }
/* FAQ тарифов — на белом, как в кадре; у партиала фон секции всегда мягкий. */
.mg-faq--white .section--soft { background: #fff; }

/* ── /magazin/tarify/: заголовок, бонусы, таблица, демо и проба ───────── */

.mg-top { padding: 48px 0 72px; background: linear-gradient(90deg, var(--bg-soft) 0%, #e8ecfb 100%); }
.mg-top__text { display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin-top: 24px; }
.mg-top h1 { margin: 0; font-size: 56px; line-height: 64px; font-weight: 700; letter-spacing: 0; }
.mg-top p { margin: 0; font-size: 20px; line-height: 30px; color: var(--muted); }

.mg-levels-sec { padding: 64px 0 88px; background: #fff; }

.mg-bonus { padding: 72px 0; background: var(--bg-soft); }
.mg-bonus__band {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 40px 56px;
	border-radius: 32px;
	background: linear-gradient(90deg, #1d4ed8 0%, #1e40af 100%);
	color: #fff;
}
.mg-bonus__text { flex: 1; min-width: 0; }
.mg-bonus__text h2 { margin: 0 0 8px; font-size: 28px; line-height: 36px; font-weight: 700; color: #fff; }
.mg-bonus__text p { margin: 0; font-size: 16px; line-height: 24px; color: var(--mg-tint-strong); }
.mg-bonus__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mg-bonus__chips b { padding: 14px 20px; border-radius: 999px; background: #fff; color: var(--blue); font-size: 20px; line-height: 24px; font-weight: 700; white-space: nowrap; }

/* Таблица дополнений: 332 + 444 + остаток — как колонки кадра (300/420/366 плюс поля). */
.mg-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--mg-shadow);
}
.mg-table thead th {
	padding: 14px 12px;
	background: var(--bg-soft);
	color: var(--muted);
	font-size: 12px;
	line-height: 15px;
	font-weight: 600;
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
}
.mg-table tbody td { padding: 20px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mg-table tbody tr:last-child td { border-bottom: 0; }
.mg-table th:first-child, .mg-table td:first-child { width: 332px; padding-left: 32px; }
.mg-table th:nth-child(2), .mg-table td:nth-child(2) { width: 444px; }
.mg-table th:last-child, .mg-table td:last-child { padding-right: 32px; }
.mg-table__name { font-size: 16px; line-height: 24px; font-weight: 600; }
.mg-table__price { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--blue); }
.mg-table__note { font-size: 14px; line-height: 20px; color: var(--muted); }

.mg-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.mg-duo__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 40px;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--mg-shadow);
}
.mg-duo__card--trial { padding: 39px; border: 2px solid var(--mg-tint-strong); }
.mg-duo__card h3 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; }
.mg-duo__card p { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted); }
.mg-duo__card p.mg-duo__small { font-size: 14px; line-height: 20px; }
.mg-duo__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-nowrap { white-space: nowrap; }
.mg-duo__fill { flex: 1; width: 100%; min-height: 8px; }
.mg-duo__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Планшет ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	.mg-hero__cols { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.mg-mosaic { max-width: 520px; }
	.mg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mg-srv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mg-cta__band { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px; }
	.mg-bonus__band { flex-direction: column; align-items: flex-start; }
	.mg-flow { flex-direction: column; align-items: stretch; }
	.mg-flow__node { flex: none; }
	.mg-flow__arrow { flex: none; height: 40px; transform: rotate(90deg); }
}

@media (max-width: 900px) {
	.mg-levels { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
	.mg-cases { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
	.mg-duo { grid-template-columns: minmax(0, 1fr); }
}

/* ── Телефон: всё в стопку, ничего не выходит за экран ────────────────── */

@media (max-width: 760px) {
	.mg .section { padding: 56px 0; }
	.mg .section__head { margin-bottom: 32px; }
	.mg .section__head h2,
	.mg-band h2,
	.mg-cta__text h2 { font-size: 30px; line-height: 38px; }
	.mg .section__head p,
	.mg-band p,
	.mg-cta__text p,
	.mg-hero__lead,
	.mg-top p { font-size: 17px; line-height: 26px; }

	.mg-hero { padding: 32px 0 56px; }
	.mg-hero__cols { margin-top: 24px; }
	.mg-hero h1, .mg-top h1 { font-size: 36px; line-height: 42px; }
	.mg-top { padding: 32px 0 48px; }
	.mg-top__text { margin-top: 24px; }
	.mg-levels-sec { padding: 40px 0 56px; }

	.mg-demo__row { flex-direction: column; align-items: stretch; }
	.mg-select { width: 100%; }
	.mg-demo__row .btn { width: 100%; }

	.mg-mosaic { grid-template-columns: minmax(0, 1fr); }
	.mg-mosaic__col--b { padding-top: 0; }

	.mg-tiles, .mg-srv { grid-template-columns: minmax(0, 1fr); }
	.mg-srv__item h3 { min-height: 0; }

	.mg-strip { padding: 24px 0; }
	.mg-band { padding: 40px 20px; }
	.mg-band__btns { flex-direction: column; width: 100%; }
	.mg-band__btns .btn { width: 100%; }

	.mg-cta { padding: 24px 0 56px; }
	.mg-cta__band { padding: 28px 20px; border-radius: 24px; }
	.mg-cta .lead { padding: 20px; }

	.mg-bonus { padding: 40px 0; }
	.mg-bonus__band { padding: 28px 20px; border-radius: 24px; }

	.mg-duo__card { padding: 28px 22px; }
	.mg-duo__card--trial { padding: 27px 21px; }
	.mg-duo__btns .btn { width: 100%; }

	.mg .faq__item summary { font-size: 17px; line-height: 24px; }
	.mg .faq__answer { padding-right: 0; }

	/* Таблица дополнений: каждая строка — карточкой. */
	.mg-table, .mg-table tbody, .mg-table tr, .mg-table td { display: block; }
	.mg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mg-table tbody tr { padding: 18px 20px; border-bottom: 1px solid var(--line); }
	.mg-table tbody tr:last-child { border-bottom: 0; }
	.mg-table tbody td,
	.mg-table th:first-child, .mg-table td:first-child,
	.mg-table th:nth-child(2), .mg-table td:nth-child(2),
	.mg-table th:last-child, .mg-table td:last-child { width: auto; padding: 0; border: 0; }
	.mg-table td + td { margin-top: 6px; }
}