/* Стили страниц курса и общих блоков — из эталона «Морская живопись» (дизайн-система v1.9) */

/* Образец страницы курса, версия 2 (03.10.2026).
   Цвет курса «Море»: тон #E3E9ED, пилюля #BFD9E6, глубокий #1C3448.
   Задача страницы: максимум заявок в отдел продаж. Все триггеры ведут на «первый урок бесплатно»;
   оплата и рассрочка доступны тем, кто готов купить без менеджера.
   Блоки с префиксом .mz- после согласования переедут в tokens.css и генератор build-kurs.py. */
body { overflow-x: hidden; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* ── Липкая шапка с бургером ── */
.mz-top { position: sticky; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 80; max-width: var(--ha-container); margin: 10px auto 0; padding: 0 var(--ha-gutter); }
.mz-top__in { display: flex; align-items: center; gap: 18px; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-radius: 20px; padding: 10px 12px 10px 20px; box-shadow: 0 6px 24px rgba(61,36,27,.08); }
.mz-top__logo img { height: 30px; display: block; }
.mz-top__nav { display: flex; gap: 20px; margin-left: 12px; flex: 1; }
.mz-top__nav a { font-weight: 700; font-size: 15px; color: var(--ha-ink-2); text-decoration: none; }
.mz-top__nav a:hover { color: var(--ha-ink); }
.mz-login { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--ha-ink); text-decoration: none; padding: 8px 10px; border-radius: 12px; }
.mz-login:hover { background: var(--ha-paper); color: var(--ha-ink); }
.mz-btn-ink { background: var(--ha-ink); color: var(--ha-on-dark); border: 0; }
.mz-btn-ink:hover { background: #2a1912; color: var(--ha-on-dark); }
.mz-burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--ha-paper); color: var(--ha-ink); cursor: pointer; place-items: center; }
.mz-menu { display: none; margin-top: 8px; background: var(--ha-canvas); border-radius: 20px; padding: 18px; box-shadow: 0 16px 40px rgba(61,36,27,.16); }
.mz-menu.open { display: grid; gap: 14px; }
.mz-menu nav { display: grid; }
.mz-menu nav a { font-weight: 700; font-size: 18px; color: var(--ha-ink); text-decoration: none; padding: 12px 4px; border-bottom: 1px solid var(--ha-line); }
.mz-menu .ha-btn { width: 100%; }

/* ── Первый экран: три картины веером за преподавателем ── */
.mz-hero { background: var(--ha-dir-tint); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: center; overflow: hidden; padding-bottom: 0; }
.mz-hero h1 { font-size: clamp(42px, 5vw, 68px); line-height: 1.02; margin: 14px 0 16px; }
.mz-hero__text { padding-bottom: 40px; }
.mz-hero__note { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ha-ink-2); }
.mz-hero__note span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ha-dir-deep); margin-right: 7px; vertical-align: 2px; }
.mz-fan { position: relative; height: 600px; }
.mz-fan .p { position: absolute; border-radius: 4px; box-shadow: 0 22px 46px rgba(28,52,72,.28); height: auto; }
.mz-fan .ship { left: 50%; top: -1%; width: 33%; transform: rotate(-7deg); z-index: 1; }
.mz-fan .rus { left: 0; top: 24%; width: 31%; transform: rotate(-9deg); z-index: 2; }
.mz-fan .wave { right: 0; top: 40%; width: 31%; transform: rotate(14deg); z-index: 2; }
.mz-fan .who { position: absolute; left: 47%; bottom: 0; transform: translateX(-50%); height: 86%; width: auto; z-index: 3; filter: drop-shadow(0 18px 30px rgba(28,52,72,.18)); }
.mz-fan .cap { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4; background: rgba(255,255,255,.94); border-radius: 16px; padding: 12px 18px; width: min(380px, 86%); box-shadow: 0 10px 26px rgba(28,52,72,.14); }
.mz-fan .cap b { display: block; font-size: 16px; } .mz-fan .cap span { font-size: 14px; color: var(--ha-ink-2); }

/* ── Факты, о курсе ── */
.mz-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mz-fact { background: var(--ha-canvas); border-radius: 22px; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 6px; }
.mz-fact img { width: 64px; height: 64px; object-fit: contain; }
.mz-fact b { font-size: 34px; font-weight: 800; line-height: 1; color: var(--ha-dir-deep); letter-spacing: -.02em; }
.mz-fact span { font-size: 15px; color: var(--ha-ink-2); }
.mz-about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
.mz-about p { font-size: 18px; line-height: 1.6; color: var(--ha-ink-2); margin: 0 0 14px; } .mz-about p b { color: var(--ha-ink); }
.mz-levels { display: grid; gap: 12px; }
.mz-level { background: var(--ha-dir-tint); border-radius: 18px; padding: 18px 20px; } .mz-level b { display: block; font-size: 17px; margin-bottom: 4px; } .mz-level span { font-size: 15px; color: var(--ha-ink-2); line-height: 1.5; }

/* ── Программа: Pinterest, по клику полное описание урока ── */
.mz-pin figure { cursor: zoom-in; position: relative; }
.mz-pin figure .n { position: absolute; left: 10px; top: 10px; background: var(--ha-dir-deep); color: #fff; border-radius: 999px; font: 800 12px/1 var(--ha-font); padding: 6px 10px; }
.mz-pin figure .more { display: block; margin-top: 6px; font-weight: 700; font-size: 13px; color: var(--ha-terra); }
.mz-pin figure:hover img { box-shadow: 0 14px 30px rgba(28,52,72,.25); }

/* ── Цитата преподавателя ── */
.mz-band { background: var(--ha-dir-deep); color: var(--ha-on-dark); border-radius: var(--ha-r-big); padding: 52px 56px; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 32px; align-items: start; }
.mz-band__ava { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid var(--ha-dir-pill); }
.mz-band blockquote { margin: 0; font-family: var(--ha-font-em); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.4; position: relative; }
.mz-band blockquote::before { content: '«'; position: absolute; left: -.6em; top: -.05em; color: var(--ha-dir-pill); }
.mz-band__who { margin-top: 18px; font-size: 15px; color: var(--ha-on-dark-2); } .mz-band__who b { color: var(--ha-on-dark); }

.mz-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mz-why > div { background: var(--ha-paper); border-radius: 22px; padding: 22px 20px; }
.mz-why .ha-num { background: var(--ha-dir-pill); color: var(--ha-dir-deep); margin-bottom: 14px; }
.mz-why h4 { margin: 0 0 8px; font-size: 18px; font-weight: 800; } .mz-why p { margin: 0; font-size: 15px; color: var(--ha-ink-2); line-height: 1.5; }

/* ── Мы с вами: куратор + живой чат ── */
.mz-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 36px; align-items: center; }
.mz-kurator { display: flex; gap: 14px; align-items: center; background: var(--ha-dir-tint); border-radius: 18px; padding: 12px 16px 12px 12px; margin: 16px 0 4px; }
.mz-kurator img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.mz-kurator b { display: block; } .mz-kurator span { font-size: 14px; color: var(--ha-ink-2); }
.mz-steps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; counter-reset: s; }
.mz-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.mz-steps li::before { counter-increment: s; content: counter(s); width: 44px; height: 44px; border-radius: 50%; background: var(--ha-dir-deep); color: #fff; display: grid; place-items: center; font-weight: 800; }
.mz-steps b { display: block; font-size: 17px; } .mz-steps span { font-size: 15px; color: var(--ha-ink-2); }
.mz-chatbox { background: var(--ha-dir-tint); border-radius: 22px; padding: 22px; min-height: 360px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.mz-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.mz-msg.show { opacity: 1; transform: none; }
.mz-msg img.a { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.mz-msg .b { background: var(--ha-canvas); border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: 15px; line-height: 1.4; }
.mz-msg .b small { display: block; font-weight: 700; color: var(--ha-dir-deep); font-size: 12px; margin-bottom: 2px; }
.mz-msg.me { align-self: flex-end; flex-direction: row-reverse; } .mz-msg.me .b { background: var(--ha-dir-pill); border-radius: 16px 16px 4px 16px; }
.mz-msg .pic { width: 150px; border-radius: 10px; display: block; margin-top: 6px; }
.mz-typing { display: none; align-self: flex-start; gap: 4px; background: var(--ha-canvas); border-radius: 14px; padding: 12px 14px; margin-left: 42px; }
.mz-typing.show { display: inline-flex; } .mz-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ha-ink-3); animation: mzdot 1s infinite; } .mz-typing i:nth-child(2) { animation-delay: .15s; } .mz-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mzdot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* ── Платформа: два экрана ── */
.mz-plat { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 36px; align-items: center; }
.mz-phones { display: flex; justify-content: center; align-items: flex-start; gap: 18px; }
.mz-phone { width: 240px; height: 470px; flex: none; border: 9px solid var(--ha-ink); border-radius: 36px; background: var(--ha-paper); padding: 18px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 24px 50px rgba(61,36,27,.22); overflow: hidden; }
.mz-phone + .mz-phone { margin-top: 40px; }
.mz-phone .t { font-size: 12px; font-weight: 800; text-align: center; margin-bottom: 4px; }
.mz-phone .r { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; background: var(--ha-canvas); border-radius: 12px; padding: 6px; font-size: 11px; line-height: 1.25; }
.mz-phone .r img { width: 40px; height: 52px; object-fit: cover; border-radius: 6px; } .mz-phone .r b { display: block; font-size: 11.5px; } .mz-phone .r i { font-style: normal; font-weight: 800; color: var(--ha-ok); display: flex; }
.mz-phone .r.now { outline: 2px solid var(--ha-dir-deep); } .mz-phone .r.now i { color: var(--ha-dir-deep); } .mz-phone .r.lock { opacity: .5; } .mz-phone .r.lock i { color: var(--ha-ink-3); }
.mz-phone .vid { position: relative; border-radius: 12px; overflow: hidden; background: #1c2a36; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; }
.mz-phone .vid img { max-width: 100%; max-height: 100%; width: auto; height: auto; opacity: .85; }
.mz-phone .vid .pl { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ha-dir-deep); display: grid; place-items: center; }
.mz-phone .vid .bar { position: absolute; left: 8px; right: 8px; bottom: 7px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.35); } .mz-phone .vid .bar i { display: block; width: 38%; height: 100%; border-radius: 4px; background: #fff; }
.mz-phone .lt { font-size: 12.5px; font-weight: 800; margin: 4px 2px 0; } .mz-phone .ls { font-size: 11px; color: var(--ha-ink-3); margin: 0 2px 2px; }
.mz-phone .act { display: flex; align-items: center; gap: 8px; background: var(--ha-canvas); border-radius: 12px; padding: 9px 10px; font-size: 11.5px; font-weight: 700; color: var(--ha-ink); }
.mz-phone .act svg { color: var(--ha-dir-deep); flex: none; }
.mz-phone .act.main { background: var(--ha-dir-deep); color: #fff; } .mz-phone .act.main svg { color: #fff; }
.mz-bul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 14px; }
.mz-bul li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; } .mz-bul img { width: 48px; height: 48px; object-fit: contain; }
.mz-bul b { display: block; font-size: 17px; } .mz-bul span { font-size: 15px; color: var(--ha-ink-2); }

/* ── Доступ навсегда ── */
.mz-forever { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.mz-forever > img { width: 96px; height: 96px; object-fit: contain; }
.mz-forever h2 { margin: 0 0 8px; }
.mz-forever p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ha-ink-2); max-width: 640px; } .mz-forever p b { color: var(--ha-ink); }
.mz-forever__nums { display: flex; gap: 12px; }
.mz-forever__nums div { background: var(--ha-dir-tint); border-radius: 18px; padding: 14px 16px; min-width: 112px; }
.mz-forever__nums b { display: block; font-size: 30px; font-weight: 800; color: var(--ha-dir-deep); line-height: 1; } .mz-forever__nums span { font-size: 13px; color: var(--ha-ink-2); }

/* ── Преподаватель ── */
.mz-teacher { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
.mz-teacher .ph img { width: 100%; height: auto; display: block; border-radius: 24px; }
.mz-teacher blockquote { margin: 0 0 18px; font-size: clamp(19px, 2vw, 24px); line-height: 1.4; font-weight: 700; }
.mz-teacher ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.mz-teacher li { padding-left: 26px; position: relative; font-size: 16px; color: var(--ha-ink-2); line-height: 1.5; } .mz-teacher li::before { content: ''; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--ha-dir-deep); }
.mz-tstats { display: flex; gap: 28px; flex-wrap: wrap; } .mz-tstats b { display: block; font-size: 34px; font-weight: 800; color: var(--ha-dir-deep); line-height: 1; } .mz-tstats span { font-size: 14px; color: var(--ha-ink-3); }

/* ── Подарки: мини-курс листается, картина или сертификат одной карточкой ── */
.mz-gifts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mz-gift { background: var(--ha-canvas); border-radius: 22px; padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mz-gift__strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: 230px; align-items: stretch; }
.mz-gift__strip::-webkit-scrollbar { display: none; }
.mz-gift__strip img { height: 100%; width: auto; flex: none; border-radius: 8px; scroll-snap-align: start; }
.mz-gift__one { height: 230px; display: flex; align-items: center; justify-content: center; }
.mz-gift__one img { max-height: 100%; max-width: 100%; width: auto; height: auto; border-radius: 6px; box-shadow: 0 8px 20px rgba(61,36,27,.14); }
.mz-gift__tx { padding: 0 6px; display: grid; gap: 6px; }
.mz-gift__tag { justify-self: start; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: var(--ha-sun); color: var(--ha-sun-ink); }
.mz-gift__tag--all { background: var(--ha-dir-pill); color: var(--ha-dir-deep); }
.mz-gift b { font-size: 17px; } .mz-gift span.d { font-size: 15px; color: var(--ha-ink-2); line-height: 1.45; }
.mz-gift__swipe { font-size: 13px; font-weight: 700; color: var(--ha-ink-3); }
.mz-gifts-note { margin: 16px 0 0; font-size: 15px; color: var(--ha-ink-2); }

/* ── Стоимость и оплата: два тарифа. 990 ₽ отдельно; полная оплата и рассрочка банка вместе, подарки только там ── */
.mz-tar-lead { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: var(--ha-ink-2); max-width: 760px; } .mz-tar-lead b { color: var(--ha-ink); }
.mz-tars { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.mz-tar { background: var(--ha-paper); border-radius: 24px; padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 14px; position: relative; border: 2px solid transparent; }
.mz-tar--best { background: var(--ha-canvas); border-color: var(--ha-dir-deep); }
.mz-tar__kind { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ha-dir-deep); }
.mz-tar h3 { margin: -6px 0 0; font-size: 24px; font-weight: 800; }
.mz-tar__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mz-tar__price b { font-size: 36px; font-weight: 800; letter-spacing: -.02em; line-height: 1; } .mz-tar__price s { font-size: 17px; color: var(--ha-ink-3); font-weight: 600; }
.mz-tar__price span { font-size: 16px; font-weight: 700; color: var(--ha-ink-2); }
.mz-tar__price em { flex-basis: 100%; font-style: normal; font-size: 16px; font-weight: 700; color: var(--ha-ink); }
.mz-tar p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ha-ink-2); }
.mz-tar__h { font-size: 14px; font-weight: 800; color: var(--ha-ink); margin-top: 2px; }
.mz-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15px; line-height: 1.4; }
.mz-check li { padding-left: 28px; position: relative; } .mz-check li::before { content: ''; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 6px; background: var(--ha-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.mz-check b { color: var(--ha-ink); }
.mz-tar--best .mz-check { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.mz-bonus-box { background: var(--ha-dir-tint); border-radius: 20px; padding: 18px; display: grid; gap: 12px; }
.mz-bonus-box__h { font-size: 18px; font-weight: 800; }
.mz-bonus-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--ha-canvas); border-radius: 16px; padding: 10px 14px 10px 10px; }
.mz-bonus-row > img { width: 56px; height: 56px; object-fit: contain; background: var(--ha-paper); border-radius: 10px; }
.mz-bonus-row b { display: block; font-size: 16px; } .mz-bonus-row span { font-size: 13.5px; color: var(--ha-ink-2); line-height: 1.4; display: block; }
.mz-bonus-row i { font-style: normal; text-align: right; font-size: 13px; color: var(--ha-ink-3); white-space: nowrap; } .mz-bonus-row i s { display: block; } .mz-bonus-row i strong { display: block; color: var(--ha-ok); font-size: 14px; }
.mz-tar__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.mz-tar .ha-btn { width: 100%; }
.mz-tar__note { font-size: 13.5px; color: var(--ha-ink-3); }
.mz-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 18px 0 0; font-size: 13.5px; color: var(--ha-ink-2); }
.mz-trust span { display: inline-flex; align-items: center; gap: 6px; } .mz-trust svg { color: var(--ha-dir-deep); }
.mz-paylogos { display: inline-flex; gap: 6px; } .mz-paylogos b { font-size: 12px; font-weight: 800; border: 1px solid var(--ha-line); background: var(--ha-canvas); border-radius: 8px; padding: 4px 8px; color: var(--ha-ink); }
.mz-pay-try { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; background: var(--ha-dir-tint); border-radius: 18px; padding: 14px 18px; font-size: 15px; }
.mz-pay-try b { flex: 1; min-width: 220px; }

/* ── Поп-ап «бонусные рубли за заявку»: уход со страницы на десктопе, через 40 с или половину страницы на телефоне, один раз за визит ── */
.mz-pop { position: fixed; inset: 0; z-index: 110; background: rgba(20,30,40,.6); display: none; align-items: center; justify-content: center; padding: 16px; }
.mz-pop.open { display: flex; }
.mz-pop__box { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow: auto; background: var(--ha-canvas); border-radius: 28px; padding: 14px 14px 22px; display: grid; gap: 14px; }
.mz-pop__art { position: relative; height: 210px; border-radius: 20px; background: var(--ha-dir-tint); overflow: hidden; }
.mz-pop__art .p { position: absolute; height: auto; border-radius: 4px; box-shadow: 0 12px 26px rgba(28,52,72,.25); }
.mz-pop__art .p1 { width: 26%; left: 8%; top: 22px; transform: rotate(-8deg); } .mz-pop__art .p2 { width: 26%; right: 8%; top: 30px; transform: rotate(9deg); }
.mz-pop__art .cat { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); height: 190px; width: auto; }
.mz-pop__art .sum { position: absolute; left: 14px; top: 14px; background: var(--ha-sun); color: var(--ha-sun-ink); font-weight: 800; font-size: 18px; border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.mz-pop h3 { margin: 4px 8px 0; font-size: 28px; line-height: 1.12; font-weight: 800; text-align: center; text-wrap: balance; }
.mz-pop p { margin: 0 8px; text-align: center; font-size: 15px; color: var(--ha-ink-2); line-height: 1.5; }
.mz-pop form { display: grid; gap: 10px; padding: 0 8px; }
.mz-pop input:not([type=checkbox]) { font: 500 16px var(--ha-font); border: 1px solid var(--ha-line); background: var(--ha-paper); border-radius: 999px; padding: 15px 20px; color: var(--ha-ink); }
.mz-pop .ha-check { font-size: 12.5px; }
.mz-pop__x { position: absolute; top: 22px; right: 22px; z-index: 2; }
.mz-pop__done { display: none; text-align: center; font-size: 16px; padding: 0 8px; } .mz-pop.done form { display: none; } .mz-pop.done .mz-pop__done { display: block; }

/* ── Когда начинается ── */
.mz-start { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 36px; align-items: start; margin-top: 36px; }
.mz-start p { font-size: 16px; line-height: 1.6; color: var(--ha-ink-2); }
.mz-start ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: k; }
.mz-start li { background: var(--ha-paper); border-radius: 18px; padding: 14px 16px; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; }
.mz-start li::before { counter-increment: k; content: counter(k); width: 38px; height: 38px; border-radius: 50%; background: var(--ha-dir-deep); color: #fff; display: grid; place-items: center; font-weight: 800; }
.mz-start li b { display: block; } .mz-start li span { font-size: 14px; color: var(--ha-ink-3); }

/* ── Форма: урок бесплатно / запись с выбором оплаты ── */
.mz-form { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; align-items: end; }
.mz-form-tabs { display: inline-flex; background: var(--ha-canvas); border-radius: 999px; padding: 5px; gap: 4px; margin-bottom: 18px; }
.mz-form-tabs button { border: 0; background: none; border-radius: 999px; padding: 10px 18px; font: 700 15px var(--ha-font); color: var(--ha-ink-2); cursor: pointer; }
.mz-form-tabs button.on { background: var(--ha-dir-deep); color: #fff; }
.mz-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mz-fields input { font: 500 16px var(--ha-font); border: 1px solid var(--ha-line); background: var(--ha-canvas); border-radius: 999px; padding: 15px 20px; color: var(--ha-ink); min-width: 0; }
.mz-fields input:focus { outline: 2px solid var(--ha-dir-deep); outline-offset: 1px; }
.mz-fields .ha-btn { grid-column: 1 / -1; }
.mz-after { margin: 12px 0 0; font-size: 14px; color: var(--ha-ink-2); }
.mz-done { display: none; background: var(--ha-canvas); border-radius: 18px; padding: 18px 20px; margin-top: 14px; font-size: 16px; line-height: 1.5; }
.mz-done.show { display: block; }
.mz-art { position: relative; display: flex; flex-direction: column; align-items: center; }
.mz-art img { width: 100%; max-width: 300px; height: auto; }
.mz-art__say { position: relative; background: var(--ha-canvas); border-radius: 20px; padding: 14px 18px; font-weight: 800; font-size: 19px; line-height: 1.25; text-align: center; box-shadow: 0 10px 24px rgba(61,36,27,.12); margin-bottom: 6px; max-width: 260px; }
.mz-art__say::after { content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; border: 10px solid transparent; border-bottom: 0; border-top-color: var(--ha-canvas); }
.mz-art [data-for] { display: none; } .mz-art [data-for].on { display: block; }

.mz-mess { display: grid; gap: 12px; }
.mz-mess__h { font-weight: 800; font-size: 18px; }
.mz-mess__btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.mz-mess__b { display: flex; align-items: center; gap: 12px; background: var(--ha-canvas); border: 2px solid transparent; border-radius: 18px; padding: 14px 16px; text-decoration: none; color: var(--ha-ink); transition: border-color var(--ha-fast), transform var(--ha-fast); }
.mz-mess__b:hover { border-color: var(--ha-dir-deep); color: var(--ha-ink); transform: translateY(-1px); }
.mz-mess__b img { width: 40px; height: 40px; flex: none; border-radius: 10px; }
.mz-mess__b b { display: block; font-size: 16px; } .mz-mess__b span { font-size: 13px; color: var(--ha-ink-2); line-height: 1.3; }
@media (max-width: 640px) { .mz-mess__btns { grid-template-columns: minmax(0, 1fr); } }
/* ── Мессенджеры с настоящими логотипами ── */
.mz-msgr { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mz-msgr a { display: inline-flex; align-items: center; gap: 8px; background: var(--ha-canvas); border: 1px solid var(--ha-line); border-radius: 999px; padding: 6px 14px 6px 6px; font-weight: 700; font-size: 14px; color: var(--ha-ink); text-decoration: none; }
.mz-msgr a:hover { border-color: var(--ha-ink-3); color: var(--ha-ink); }
.mz-msgr img { width: 28px; height: 28px; display: block; border-radius: 8px; }

.mz-close { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: end; }
.mz-close .ph { align-self: end; justify-self: center; height: 340px; width: auto; margin-bottom: -32px; }
.mz-similar .ha-course-tile p { min-height: 0; }
.mz-similar .ha-courses { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .mz-similar .ha-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Лайтбокс урока: картина целиком + полное описание ── */
.mz-lb { position: fixed; inset: 0; z-index: 100; background: rgba(20,30,40,.72); display: none; align-items: center; justify-content: center; padding: 24px; }
.mz-lb.open { display: flex; }
.mz-lb__box { position: relative; background: var(--ha-canvas); border-radius: 24px; max-width: 1040px; width: 100%; max-height: calc(100vh - 48px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); overflow: hidden; }
.mz-lb__art { background: var(--ha-dir-tint); display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 0; }
.mz-lb__art img { max-width: 100%; max-height: calc(100vh - 100px); width: auto; height: auto; border-radius: 6px; box-shadow: 0 16px 34px rgba(28,52,72,.22); }
.mz-lb__tx { padding: 28px 28px 22px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.mz-lb__tx h3 { margin: 0; font-size: 26px; font-weight: 800; padding-right: 40px; }
.mz-lb__tx p { margin: 0; color: var(--ha-ink-2); line-height: 1.6; font-size: 15.5px; }
.mz-lb__tx ul { margin: 0; padding-left: 20px; color: var(--ha-ink-2); line-height: 1.55; font-size: 15px; display: grid; gap: 4px; }
.mz-lb__tx .fi { background: var(--ha-dir-tint); border-radius: 14px; padding: 12px 14px; font-size: 15px; line-height: 1.5; }
.mz-lb__nav { margin-top: 6px; display: flex; gap: 8px; align-items: center; position: sticky; bottom: -22px; background: var(--ha-canvas); padding: 10px 0 0; }
.mz-lb__x { position: absolute; top: 14px; right: 14px; z-index: 2; }

/* ── Триггеры ── */
.mz-float { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; align-items: center; gap: 10px; background: var(--ha-terra); color: #fff; border-radius: 999px; padding: 6px 20px 6px 6px; font: 800 15px var(--ha-font); text-decoration: none; box-shadow: 0 14px 30px rgba(184,78,40,.35); animation: mzwig 7s ease-in-out infinite; transition: opacity .3s, transform .3s; }
.mz-float img { width: 52px; height: 52px; object-fit: contain; background: var(--ha-canvas); border-radius: 50%; padding: 2px; }
.mz-float:hover { color: #fff; background: var(--ha-terra-d); }
.mz-float.hide, .mz-sticky.hide { opacity: 0; pointer-events: none; transform: translateY(20px); animation: none; }
@keyframes mzwig { 0%, 86%, 100% { transform: none; } 88% { transform: rotate(-4deg) scale(1.04); } 90% { transform: rotate(4deg) scale(1.04); } 92% { transform: rotate(-3deg); } 94% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .mz-float { animation: none; } html { scroll-behavior: auto; } }
.mz-sticky { display: none; }
.mz-sheet { display: none; position: fixed; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 61; background: var(--ha-canvas); border-radius: 20px; padding: 16px; box-shadow: 0 16px 40px rgba(61,36,27,.22); }
.mz-sheet.open { display: block; } .mz-sheet b { display: block; margin-bottom: 4px; } .mz-sheet .mz-msgr { margin-top: 8px; }

@media (max-width: 1080px) { .mz-top__nav { gap: 14px; } .mz-top__nav a { font-size: 14px; } }
@media (max-width: 960px) {
  .mz-top__nav, .mz-top .mz-cta { display: none; }
  .mz-burger { display: grid; } .mz-top__in { justify-content: space-between; gap: 6px; } .mz-login { margin-left: auto; }
  .mz-hero { grid-template-columns: minmax(0, 1fr); }
  .mz-hero__text { padding-bottom: 0; }
  .mz-fan { height: 520px; }
  .mz-facts, .mz-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mz-about, .mz-split, .mz-plat, .mz-teacher, .mz-start, .mz-close, .mz-form { grid-template-columns: minmax(0, 1fr); }
  .mz-gifts, .mz-tars { grid-template-columns: minmax(0, 1fr); }
  .mz-forever { grid-template-columns: 72px minmax(0, 1fr); } .mz-forever > img { width: 72px; height: 72px; } .mz-forever__nums { grid-column: 1 / -1; }
  .mz-band { grid-template-columns: minmax(0, 1fr); padding: 32px 24px 32px 40px; gap: 18px; } .mz-band__ava { width: 84px; height: 84px; }
  .mz-lb { padding: 0; } .mz-lb__box { grid-template-columns: minmax(0, 1fr); overflow: auto; max-height: 100vh; height: 100%; border-radius: 0; } .mz-lb__art img { max-height: 46vh; } .mz-lb__tx { overflow: visible; }
  .mz-close .ph { height: 260px; margin-bottom: -24px; }
  .mz-tar--best { order: -1; }
}
@media (max-width: 640px) {
  .mz-top { padding: 0 12px; } .mz-top__in { padding: 8px 8px 8px 14px; } .mz-top__logo img { height: 26px; }
  .mz-hero h1 { font-size: 46px; }
  .mz-hero .ha-row .ha-btn { width: 100%; }
  .mz-fan { height: 430px; } .mz-fan .rus { left: 4%; top: 22%; width: 28%; } .mz-fan .wave { right: 4%; top: 38%; width: 28%; } .mz-fan .ship { left: 47%; top: 1%; width: 32%; } .mz-fan .cap { bottom: 16px; padding: 10px 14px; } .mz-fan .cap b { font-size: 14px; } .mz-fan .cap span { font-size: 13px; }
  .mz-facts { gap: 10px; } .mz-fact b { font-size: 26px; }
  .mz-why { grid-template-columns: minmax(0, 1fr); } .mz-why > div { display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; } .mz-why .ha-num { grid-row: span 2; margin: 0; }
  .mz-phones { gap: 10px; } .mz-phone { width: 168px; height: 360px; border-width: 7px; border-radius: 28px; padding: 14px 8px; gap: 6px; } .mz-phone + .mz-phone { margin-top: 28px; }
  .mz-phone .r { grid-template-columns: 30px 1fr auto; font-size: 9.5px; padding: 5px; gap: 6px; } .mz-phone .r img { width: 30px; height: 40px; } .mz-phone .r b { font-size: 10px; }
  .mz-phone .act { font-size: 10px; padding: 7px 8px; gap: 6px; } .mz-phone .lt { font-size: 11px; } .mz-phone .ls { font-size: 9.5px; } .mz-phone .t { font-size: 10.5px; }
  .mz-forever { grid-template-columns: minmax(0, 1fr); gap: 14px; } .mz-forever > img { width: 60px; height: 60px; }
  .mz-phone .r.lock + .r.lock { display: none; } .mz-phone .r span { min-width: 0; }
  .mz-forever__nums { flex-wrap: wrap; } .mz-forever__nums div { flex: 1; min-width: 92px; padding: 12px; } .mz-forever__nums b { font-size: 24px; } .mz-forever__nums span { font-size: 12px; line-height: 1.3; display: block; margin-top: 4px; }
  .mz-tstats { gap: 20px; flex-wrap: nowrap; } .mz-tstats b { font-size: 28px; } .mz-tstats span { font-size: 13px; }
  .mz-gift__strip, .mz-gift__one { height: 260px; }
  .mz-fields { grid-template-columns: minmax(0, 1fr); }
  .mz-tar--best .mz-check, .mz-tar__btns { grid-template-columns: minmax(0, 1fr); } .mz-tar { padding: 22px 18px 20px; } .mz-bonus-row { grid-template-columns: 48px minmax(0, 1fr); } .mz-bonus-row > img { width: 48px; height: 48px; } .mz-bonus-row i { grid-column: 2; text-align: left; } .mz-bonus-row i s, .mz-bonus-row i strong { display: inline; margin-right: 6px; }
  .mz-form-tabs { display: flex; } .mz-form-tabs button { flex: 1; padding: 10px 8px; }
  .mz-art img { max-width: 210px; } .mz-art__say { font-size: 17px; } .mz-art [data-for].on { display: flex; flex-direction: column; align-items: center; }
  .mz-similar .ha-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mz-similar .ha-course-tile { padding: 10px; border-radius: 18px; } .mz-similar .ha-course-tile__grid { gap: 4px; } .mz-similar .ha-course-tile h4 { font-size: 15px; margin: 6px 0 2px; } .mz-similar .ha-course-tile p { font-size: 12.5px; } .mz-similar .ha-course-tile .ha-pill { font-size: 11px; padding: 3px 8px; } .mz-similar .ha-course-tile__foot { flex-direction: column; align-items: stretch; gap: 6px; } .mz-similar .ha-course-tile__foot .ha-btn { width: 100%; }
  .mz-float { display: none; }
  .mz-sticky { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(248,243,234,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--ha-line); transition: opacity .3s, transform .3s; }
  .mz-sticky .ha-btn--primary { flex: 1; min-height: 50px; padding: 0 12px; font-size: 15.5px; }
  .mz-sticky .mz-ask { flex: none; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--ha-line); background: var(--ha-canvas); color: var(--ha-ink); display: grid; place-items: center; cursor: pointer; }
  body { padding-bottom: 80px; }
}