/* Направление «Интернет-магазин»: страницы /magazin/demo/ и /magazin/kabinet/.
 *
 * Макеты: Figma wGC5YgBMUF7AxqsAquKJKC, кадры 1174:5072 (демо) и 1174:5379
 * (кабинет). ПК по макету: 1440, контейнер 1200. Отдельного мобильного дизайна
 * нет — на телефоне колонки встают в стопку.
 *
 * Все правила — под префиксом .mzd-, а общие классы сайта (.faq, .eyebrow,
 * .lead, .crumbs) переопределяются только внутри body.mzd: файл подключается
 * к двум страницам и не должен задеть ничего на остальном сайте. Цвета и
 * радиусы берём из landing.css (--ink, --muted, --line, --blue, --blue-dark,
 * --tint); недостающие — локальные переменные ниже.
 *
 * ⚠ Файл НЕ зависит от public/magazin/magazin.css (его пишет другой агент) и
 * ничего в нём не правит.
 */

body.mzd {
	--mzd-soft: #f6f8fd;
	--mzd-soft-2: #e8ecfb;
	--mzd-tint-2: #dbeafe;
	--mzd-violet: #6d28d9;
	--mzd-amber: #d97706;
	--mzd-faint: #9ca3af;
	--mzd-shadow: 0 10px 30px rgba(17, 24, 39, .06);
	background: #fff;
	color: var(--ink);
}

/* ── Каркас ──────────────────────────────────────────────────────────────── */

.mzd-wrap { width: 100%; max-width: 1248px; margin: 0 auto; padding: 0 24px; }

/* Якорь не прячется под липкой шапкой. */
.mzd-sec { scroll-margin-top: 96px; }

.mzd-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
	white-space: nowrap;
}

/* Бейдж секции: пилюля tint с синей точкой, капсом. */
.mzd-badge {
	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: normal;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.mzd-badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

/* Заголовок секции: бейдж, H2 40/48, подзаголовок 20/30. */
.mzd-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.mzd-head--left { align-items: flex-start; text-align: left; }
.mzd-head h2 { margin: 0; font-size: 40px; line-height: 48px; font-weight: 700; color: var(--ink); }
.mzd-head p { max-width: 760px; margin: 0; font-size: 20px; line-height: 30px; color: var(--muted); }
.mzd-head--left p { max-width: 800px; }

/* Кнопки: пилюля 52. Свои классы, а не .btn: у .btn на сайте радиус 17. */
.mzd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--blue);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.mzd-btn:hover { background: var(--blue-dark); color: #fff; }
.mzd-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.mzd-btn--secondary { border-color: var(--line); background: #fff; color: var(--ink); }
.mzd-btn--secondary:hover { border-color: var(--blue); background: #fff; color: var(--blue); }

.mzd-btn--ghost { background: transparent; color: var(--blue); }
.mzd-btn--ghost:hover { background: var(--tint); color: var(--blue); }

/* В карточке отрасли кнопки ниже: 40 и 36, шрифт 14. */
.mzd-btn--sm { height: 40px; padding: 0 10px; font-size: 14px; line-height: 20px; }
.mzd-btn--xs { height: 36px; padding: 0 10px; font-size: 14px; line-height: 20px; }

/* Отрасль второй волны: те же кнопки, но без ссылки. */
.mzd-btn.is-off { cursor: default; pointer-events: none; }

/* Хлебные крошки */
body.mzd .crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--muted);
}
body.mzd .crumbs a { color: var(--muted); }
body.mzd .crumbs a:hover { color: var(--blue); }
body.mzd .crumbs > span { color: var(--mzd-faint); }
body.mzd .crumbs > span[aria-current] { color: var(--ink); font-weight: 500; }

/* Галочка «входит»: круг 20 tint-strong с синей отметкой. */
.mzd-tick {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--mzd-tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.4L4.9 8.8L9.5 3.4' stroke='%231D4ED8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

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

/* Градиентные плашки значков: четыре цвета по кругу. */
.mzd-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
.mzd-ico--violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.mzd-ico--green { background: linear-gradient(135deg, #10b981, #059669); }
.mzd-ico--amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.mzd-ico svg { display: block; width: 24px; height: 24px; }

/* Шаг: круг с номером, заголовок, описание. Карточка — общая для «после 14 дней»
   и «маркета модулей». */
.mzd-step {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--mzd-shadow);
}
.mzd-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--blue);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
}
.mzd-step--off .mzd-step__num { background: var(--muted); }
.mzd-step h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.mzd-step p { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted); }

/* ── /magazin/demo/ · 01 · Первый экран ─────────────────────────────────── */

.mzd-hero {
	padding: 56px 0 72px;
	background: linear-gradient(90deg, var(--mzd-soft), var(--mzd-soft-2));
	text-align: center;
}
.mzd-hero__in { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.mzd-hero h1 { margin: 0; font-size: 56px; line-height: 64px; font-weight: 700; color: var(--ink); }
.mzd-hero__lead { max-width: 800px; margin: 0; font-size: 20px; line-height: 30px; color: var(--muted); }

.mzd-pick { display: flex; align-items: center; gap: 12px; margin-top: 4px; }

/* Выпадающий список: родной <select>, стрелка — фоном. */
.mzd-select {
	display: block;
	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' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236B7280' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 18px center / 20px no-repeat;
	color: var(--ink);
	font: inherit;
	font-size: 16px;
	line-height: 24px;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.mzd-select.is-empty { color: var(--muted); }
.mzd-select:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(29, 78, 216, .14); }
.mzd-pick .mzd-select { width: 420px; }

/* ── /magazin/demo/ · 02 · Сетка отраслей ───────────────────────────────── */

.mzd-grid-sec { padding: 72px 0 96px; background: #fff; }
.mzd-grid-sec .mzd-head { margin-bottom: 40px; }

.mzd-inds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }

.mzd-ind {
	--g1: #bfdbfe;
	--g2: #60a5fa;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--mzd-shadow);
}

/* Цвет превью — по ключу отрасли. Ключ, которого здесь нет, остаётся синим. */
.mzd-ind--elektronika { --g1: #bfdbfe; --g2: #60a5fa; }
.mzd-ind--odezhda { --g1: #fbcfe8; --g2: #f472b6; }
.mzd-ind--kosmetika { --g1: #fecdd3; --g2: #fb7185; }
.mzd-ind--stroy { --g1: #fed7aa; --g2: #fb923c; }
.mzd-ind--avto { --g1: #cbd5e1; --g2: #64748b; }
.mzd-ind--detskie { --g1: #fde68a; --g2: #fbbf24; }
.mzd-ind--mebel { --g1: #fde8c8; --g2: #d6a06a; }
.mzd-ind--tehnika { --g1: #c7d2fe; --g2: #818cf8; }
.mzd-ind--opt { --g1: #bae6fd; --g2: #38bdf8; }
.mzd-ind--produkty { --g1: #bbf7d0; --g2: #4ade80; }

.mzd-ind__shot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 136px;
	padding: 0 12px;
	background: linear-gradient(148.5deg, var(--g1) 14.6%, var(--g2) 85.4%);
}

/* Мини-плитка товара: белая карточка с «фото» и строкой. */
.mzd-ind__tile {
	flex: 1 1 0;
	min-width: 0;
	padding: 6px;
	border-radius: 10px;
	background: #fff;
}
.mzd-ind__tile::before { content: ""; display: block; height: 34px; margin-bottom: 6px; border-radius: 6px; background: var(--mzd-soft); }
.mzd-ind__tile::after { content: ""; display: block; height: 6px; border-radius: 3px; background: var(--line); }

.mzd-ind__tag {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--blue);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}
.mzd-ind__tag--soon { background: #f3f4f6; color: var(--muted); font-weight: 500; }

.mzd-ind__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px; }
.mzd-ind__name { margin: 0; min-height: 48px; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ink); }
.mzd-ind__in { margin: 0; min-height: 40px; font-size: 14px; line-height: 20px; color: var(--muted); }
.mzd-ind__btns { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 6px; }
.mzd-ind--soon .mzd-ind__btns { opacity: .45; }

/* «Не нашли отрасль?» */
.mzd-uni {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 40px;
	padding: 32px 40px;
	border: 1px solid var(--mzd-tint-2);
	border-radius: 24px;
	background: var(--tint);
}
.mzd-uni__text { flex: 1; min-width: 0; }
.mzd-uni h3 { margin: 0 0 8px; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--ink); }
.mzd-uni p { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted); }

/* ── /magazin/demo/ · 03 · Что можно покликать ──────────────────────────── */

.mzd-click-sec { padding: 88px 0 80px; background: var(--mzd-soft); }
.mzd-click-sec .mzd-head { margin-bottom: 48px; }

.mzd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mzd-tile {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--mzd-shadow);
}
.mzd-tile__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
.mzd-tile__ico::before { content: ""; width: 22px; height: 22px; border: 2.5px solid #fff; border-radius: 7px; }
.mzd-tile__ico--violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.mzd-tile__ico--green { background: linear-gradient(135deg, #10b981, #059669); }
.mzd-tile__ico--amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.mzd-tile h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.mzd-tile p { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted); }
.mzd-click-note { margin: 48px 0 0; text-align: center; font-size: 14px; line-height: 20px; color: var(--muted); }

/* ── /magazin/demo/ · 04 · Проба 14 дней ────────────────────────────────── */

.mzd-trial-sec { padding: 96px 0; background: #fff; }
.mzd-trial { display: flex; align-items: flex-start; gap: 64px; }
.mzd-trial__text { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 20px; }
.mzd-trial__text h2 { margin: 0; font-size: 40px; line-height: 48px; font-weight: 700; color: var(--ink); }
.mzd-trial__lead { margin: 0; font-size: 20px; line-height: 30px; color: var(--muted); }
.mzd-checks { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mzd-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 24px; color: var(--ink); }
.mzd-checks .mzd-tick { margin-top: 2px; }

.mzd-trial__card {
	flex: none;
	width: 560px;
	max-width: 100%;
	padding: 36px;
	border: 1px solid var(--blue);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--mzd-shadow);
}
.mzd-trial__card h3 { margin: 0 0 16px; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--ink); }

/* Общая форма заявки (.lead из landing.css) в белой карточке пробы: вид полей
   по макету — высота 52, радиус 14, подписи 14/500. */
body.mzd .lead { gap: 16px; margin-top: 0; }
body.mzd .lead .lead__field { gap: 8px; }
body.mzd .lead .lead__field > span:not(.lead__phone) { color: var(--ink); font-size: 14px; font-weight: 500; line-height: 20px; }
body.mzd .lead input[type="text"],
body.mzd .lead input[type="tel"],
body.mzd .lead select {
	width: 100%;
	height: 52px;
	padding: 0 18px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background-color: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 16px;
	line-height: 24px;
}
body.mzd .lead input::placeholder { color: var(--muted); opacity: 1; }
body.mzd .lead .lead__phone input { padding-left: 60px; }
body.mzd .lead .lead__code { left: 18px; font-size: 16px; }
body.mzd .lead input:focus,
body.mzd .lead select:focus { border-color: var(--blue); background-color: #fff; box-shadow: 0 0 0 3px rgba(29, 78, 216, .14); outline: none; }
body.mzd .lead select {
	padding-right: 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236B7280' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 18px center;
	background-repeat: no-repeat;
	background-size: 20px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
body.mzd .lead select.is-empty { color: var(--muted); }
body.mzd .lead .lead__submit {
	height: 52px;
	margin-top: 0;
	padding: 0 28px;
	border-radius: 999px;
	background: var(--blue);
	font-size: 16px;
	font-weight: 600;
	box-shadow: none;
}
body.mzd .lead .lead__submit:hover { background: var(--blue-dark); }
body.mzd .lead .lead__note { font-size: 14px; }

/* Галочка «Добавить примеры товаров»: настоящий checkbox спрятан, рисуем свой. */
.mzd-check { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
body.mzd .lead .mzd-check input {
	position: absolute;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}
.mzd-check__box {
	flex: none;
	width: 22px;
	height: 22px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #fff;
}
.mzd-check input:checked + .mzd-check__box {
	border-color: var(--blue);
	background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.917 7L5.833 9.917L11.083 4.083' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.mzd-check input:focus-visible + .mzd-check__box { box-shadow: 0 0 0 3px rgba(29, 78, 216, .25); }
.mzd-check > span { font-size: 15px; line-height: 22px; color: var(--ink); }

/* Лимиты пробы */
.mzd-limits { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.mzd-limits__title { margin: 0; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--ink); }
.mzd-limits__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mzd-limits__note { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }

/* ── /magazin/demo/ · 05 · После 14 дней ────────────────────────────────── */

.mzd-after-sec { padding: 88px 0 96px; background: var(--mzd-soft); }
.mzd-after-sec .mzd-head { margin-bottom: 48px; }
.mzd-steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mzd-after-more { display: flex; justify-content: center; margin-top: 48px; }

/* ── /magazin/demo/ · 06 · FAQ (общий партиал faq.php) ──────────────────── */

.mzd-faq .section { padding: 88px 0 96px; background: var(--mzd-soft); }
.mzd-faq .wrap { max-width: 1248px; }
.mzd-faq .section__head { max-width: none; margin: 0 0 40px; text-align: center; }
.mzd-faq .section__head .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: .08em;
}
.mzd-faq .section__head .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.mzd-faq .section__head h2 { margin: 16px 0 0; font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: 0; }
.mzd-faq .section__head p:empty { display: none; }
.mzd-faq .faq { display: block; max-width: none; }
.mzd-faq .faq__item { border-bottom: 1px solid var(--line); }
.mzd-faq .faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 0;
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	color: var(--ink);
	list-style: none;
	cursor: pointer;
}
.mzd-faq .faq__item summary::-webkit-details-marker { display: none; }
.mzd-faq .faq__item summary::after {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M7 2V7M7 7V12M7 7H2M7 7H12' stroke='%231D4ED8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.mzd-faq .faq__item[open] summary::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2 7H12' stroke='%231D4ED8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.mzd-faq .faq__item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mzd-faq .faq__answer { padding: 0 0 24px; }
.mzd-faq .faq__answer p { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted); }

/* ── /magazin/kabinet/ · 01 · Первый экран ──────────────────────────────── */

.mzd-khero {
	padding: 80px 0;
	background: linear-gradient(90deg, var(--mzd-soft), var(--mzd-soft-2));
}
.mzd-khero__in { display: flex; align-items: center; gap: 48px; }
.mzd-khero__text { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 24px; }
.mzd-khero h1 { margin: 0; font-size: 56px; line-height: 64px; font-weight: 700; color: var(--ink); }
.mzd-khero__lead { margin: 0; font-size: 20px; line-height: 30px; color: var(--muted); }
.mzd-khero__btns { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; }

/* Окно кабинета: рисованная иллюстрация, не скриншот. */
.mzd-mock {
	flex: none;
	width: 560px;
	max-width: 100%;
	overflow: hidden;
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--mzd-shadow);
}
.mzd-mock__bar { display: flex; align-items: center; gap: 8px; padding: 14px 20px; background: var(--mzd-soft); }
.mzd-mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: #f87171; }
.mzd-mock__bar i:nth-child(2) { background: #fbbf24; }
.mzd-mock__bar i:nth-child(3) { background: #34d399; }
.mzd-mock__bar span { font-size: 12px; line-height: 16px; color: var(--muted); }
.mzd-mock__win { display: flex; }
.mzd-mock__menu { display: flex; flex: none; flex-direction: column; gap: 12px; width: 150px; padding: 16px; background: #fff; }
.mzd-mock__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: var(--muted);
}
.mzd-mock__item::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--line); }
.mzd-mock__item.is-on { background: var(--tint); color: var(--blue); font-weight: 600; }
.mzd-mock__item.is-on::before { background: var(--blue); }
.mzd-mock__main {
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	background: linear-gradient(141deg, var(--tint), var(--mzd-tint-2));
}
.mzd-mock__stats { display: flex; gap: 12px; }
.mzd-mock__stat { flex: 1; min-width: 0; padding: 14px; border-radius: 16px; background: #fff; white-space: nowrap; }
.mzd-mock__stat small { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }
.mzd-mock__stat b { display: block; margin-top: 4px; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ink); }
.mzd-mock__chart {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	height: 170px;
	padding: 24px 24px 20px;
	border-radius: 16px;
	background: #fff;
}
.mzd-mock__chart i { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #60a5fa, var(--mzd-tint-2)); }

/* ── /magazin/kabinet/ · 02 · Группы модулей ────────────────────────────── */

.mzd-mod-sec { padding: 96px 0; background: #fff; }
.mzd-mod-sec .mzd-head p { max-width: 880px; }

.mzd-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 56px 0; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--muted); }
.mzd-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.mzd-legend__item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.mzd-lv--standart { color: var(--muted); }
.mzd-lv--prodvinutyy { color: var(--blue); }
.mzd-lv--professionalnyy { color: var(--mzd-violet); }
.mzd-lv--addon { color: var(--mzd-amber); }

.mzd-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mzd-grp {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--mzd-shadow);
}
.mzd-grp__head { display: flex; align-items: center; gap: 16px; }
.mzd-grp__head h3 { flex: 1; min-width: 0; margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--ink); }
.mzd-grp__items { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mzd-grp__items li { display: flex; align-items: center; gap: 12px; }
.mzd-grp__name { flex: 1; min-width: 0; font-size: 16px; line-height: 24px; color: var(--ink); }
.mzd-grp__lv { flex: none; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.mzd-grp__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}
.mzd-grp__in { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--muted); }

/* ── /magazin/kabinet/ · 03 · Маркет модулей ────────────────────────────── */

.mzd-market-sec { padding: 96px 0; background: var(--mzd-soft); }
.mzd-market-sec .mzd-head { margin-bottom: 48px; }
.mzd-market { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); align-items: stretch; gap: 16px; }
.mzd-market__arrow {
	align-self: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--mzd-tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.167 10H15.833' stroke='%231D4ED8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.833 5L15.833 10L10.833 15' stroke='%231D4ED8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* ── /magazin/kabinet/ · 04 · Без оплаты за пользователя ────────────────── */

.mzd-flat-sec { padding: 96px 0; background: #fff; }
.mzd-flat {
	display: flex;
	align-items: center;
	gap: 56px;
	padding: 56px;
	border-radius: 32px;
	background: linear-gradient(90deg, var(--blue), var(--blue-dark));
	color: #fff;
}
.mzd-flat__text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 16px; }
.mzd-flat h2 { margin: 0; font-size: 40px; line-height: 48px; font-weight: 700; color: #fff; }
.mzd-flat p { margin: 0; font-size: 20px; line-height: 30px; color: var(--mzd-tint-2); }
.mzd-flat__list { display: flex; flex: none; flex-direction: column; gap: 12px; width: 400px; margin: 0; padding: 0; list-style: none; }
.mzd-flat__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 24px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .14);
}
.mzd-flat__list b { flex: 1; min-width: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: #fff; }
.mzd-flat__list span { flex: none; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--mzd-tint-2); white-space: nowrap; }

/* ── /magazin/kabinet/ · 05 · CTA ───────────────────────────────────────── */

.mzd-cta-sec { padding: 96px 0; background: var(--mzd-soft); text-align: center; }
.mzd-cta { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.mzd-cta h2 { margin: 0; font-size: 40px; line-height: 48px; font-weight: 700; color: var(--ink); }
.mzd-cta p { max-width: 720px; margin: 0; font-size: 20px; line-height: 30px; color: var(--muted); }
.mzd-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-top: 8px; }
.mzd-cta__host { font-size: 14px; line-height: 20px; color: var(--muted); }

/* ── Планшет и телефон: колонки встают в стопку ─────────────────────────── */

@media (max-width: 1180px) {
	.mzd-inds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mzd-khero__in { flex-direction: column; align-items: stretch; }
	.mzd-mock { align-self: center; }
}

@media (max-width: 960px) {
	.mzd-trial { flex-direction: column; align-items: stretch; gap: 40px; }
	.mzd-trial__card { width: 100%; }
	.mzd-steps3 { grid-template-columns: 1fr; }
	.mzd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mzd-groups { grid-template-columns: 1fr; }
	.mzd-market { grid-template-columns: 1fr; }
	.mzd-market__arrow { justify-self: center; transform: rotate(90deg); }
	.mzd-flat { flex-direction: column; align-items: stretch; padding: 40px; }
	.mzd-flat__list { width: 100%; }
	.mzd-uni { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
	.mzd-wrap { padding: 0 16px; }

	.mzd-hero { padding: 40px 0 48px; }
	.mzd-hero h1, .mzd-khero h1 { font-size: 34px; line-height: 40px; }
	.mzd-hero__lead, .mzd-head p, .mzd-trial__lead, .mzd-khero__lead, .mzd-flat p, .mzd-cta p { font-size: 17px; line-height: 26px; }
	.mzd-head h2, .mzd-trial__text h2, .mzd-faq .section__head h2, .mzd-flat h2, .mzd-cta h2 { font-size: 30px; line-height: 38px; }

	.mzd-pick { flex-direction: column; align-items: stretch; width: 100%; }
	.mzd-pick .mzd-select { width: 100%; }

	.mzd-inds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.mzd-ind__body { padding: 14px; }
	.mzd-ind__name { font-size: 16px; line-height: 22px; min-height: 44px; }
	.mzd-grid-sec, .mzd-click-sec, .mzd-trial-sec, .mzd-after-sec, .mzd-mod-sec, .mzd-market-sec, .mzd-flat-sec, .mzd-cta-sec { padding-top: 56px; padding-bottom: 56px; }
	.mzd-faq .section { padding: 56px 0; }
	.mzd-faq .faq__item summary { font-size: 17px; line-height: 24px; }

	.mzd-uni { padding: 24px; }
	.mzd-tiles { grid-template-columns: 1fr; }
	.mzd-trial__card { padding: 24px; }
	.mzd-step, .mzd-grp { padding: 24px; }
	.mzd-khero { padding: 48px 0; }
	.mzd-mock__menu { display: none; }
	.mzd-mock__main { padding: 16px; }
	.mzd-mock__stat b { font-size: 16px; line-height: 24px; }
	.mzd-mock__chart { height: 130px; padding: 16px 16px 14px; }
	.mzd-flat { padding: 28px 24px; gap: 28px; }
	.mzd-legend { margin: 40px 0; gap: 8px 16px; }
}

@media (max-width: 460px) {
	.mzd-inds { grid-template-columns: 1fr; }
	.mzd-grp__items li { flex-wrap: wrap; }
	.mzd-grp__lv { margin-left: 32px; }
}

@media (prefers-reduced-motion: reduce) {
	.mzd-btn { transition: none; }
}