/* Страница «Обслуживание и поддержка сайтов»: часовая мастерская. Предметы это фотографии с прозрачным фоном (maintenance/img), движение рисуют css и js:
   шестерни вращаются, лупа ходит за курсором, блик ползёт по механизму. План: MAINTENANCE-PAGE-PLAN.md. Читаемый исходник, без сборки.
   Шапка, меню, подвал, кнопки и окно формы общие (css/site-chrome.css, css/site-form.css), здесь тема страницы и её экраны (mt-*), всё в слое page.
   Логические свойства (inline, block): страница готова к RTL. */
@layer page {

body.mt {
  --site-bg: #0a0806;           /* тёплый чёрный */
  --site-dim: rgba(240, 232, 214, 0.72);
  --site-line: rgba(232, 184, 74, 0.22);
  --site-accent: #f2c75c;
  --site-accent-ink: #0a0806;
  --site-signal: #f2c75c;
  --site-wrap: 78rem;
  --bg-2: #14100a;
  --gold: #f2c75c;
  --gold-hi: #fff1bf;
  --gold-lo: #b07d22;
  --amber: #e8b84a;
  --ink: #0a0806;
  --team-card: rgba(232, 184, 74, 0.06);
  --team-line: rgba(242, 199, 92, 0.25);
  --team-accent: var(--gold);
  --faq-accent: var(--gold);
  --faq-accent-ink: var(--ink);
  --faq-radius: 0.6rem;
  --faq-line-open: rgba(242, 199, 92, 0.6);
}
html { scroll-behavior: smooth; }

/* ---------- каркас в теме страницы ---------- */
.site-head::before { background: linear-gradient(to bottom, rgba(10, 8, 6, 0.94) 55%, rgba(10, 8, 6, 0)); }
.site-head.is-scrolled::before { background: rgba(10, 8, 6, 0.9); }
.site-head__tag { position: relative; z-index: 2; }
.site-head__tag li:first-child { color: var(--gold-hi); }
.site-menu { background: rgba(10, 8, 6, 0.985); }
.site-menu__n { color: var(--gold); }
.site-menu__list a:hover { color: var(--gold-hi); }
.site-menu__list a[aria-current="page"] { color: var(--gold); }
.site-footer__col ul a:hover, .site-footer__col > p > a:hover { color: var(--gold-hi); }
.site-footer__col .site-footer__h { color: var(--gold); }
.site-top:hover { border-color: var(--gold); }
.site-head__lang { white-space: nowrap; }
.site-footer__col ul a { display: inline-block; padding-block: 0.35rem; margin-block: -0.35rem; }

.site-btn {
  min-height: 3.1rem; padding: 0 1.9rem; border: 1.5px solid transparent; border-radius: 3rem; background: none;
  transition: transform 0.25s, background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.site-btn:hover { border-color: transparent; }
.mt .site-btn--main { color: var(--ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo)); box-shadow: 0 0 0 0 rgba(242, 199, 92, 0.4); background-origin: border-box; }
.mt .site-btn--main:hover { box-shadow: 0 0 0 6px rgba(242, 199, 92, 0.14), 0 0 30px rgba(242, 199, 92, 0.3); }
.site-btn--main::after { content: none; }
.site-btn--ghost { border-color: rgba(242, 199, 92, 0.5); }
.site-btn--ghost:hover { border-color: var(--gold-hi); background: rgba(242, 199, 92, 0.08); }

.site-dialog { border-radius: 0.5rem; background: var(--bg-2); }
.site-dialog::backdrop { background: rgba(6, 5, 3, 0.8); }
.site-dialog__title { color: var(--gold-hi); }
.site-input { border-radius: 0.25rem; background: rgba(232, 184, 74, 0.06); }
.site-input:focus { border-color: var(--gold); }
.site-form__consent input { accent-color: var(--gold); }
.site-form__status[data-state="ok"] { color: var(--gold-hi); }

/* хлебные крошки */
.crumbs { margin: 0 0 0.4rem; font-size: 0.85rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0; padding: 0; list-style: none; color: var(--site-dim); }
.crumbs li + li::before { content: "/"; margin-inline-end: 0.5rem; color: rgba(240, 232, 214, 0.35); }
.crumbs a { display: inline-block; padding-block: 0.5rem; text-decoration: none; color: var(--site-dim); }
.crumbs a:hover { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 0.2em; }
.crumbs [aria-current="page"] { color: var(--site-fg); }


/* ---------- общие элементы экранов ---------- */
.mt [hidden] { display: none !important; }
.mt main { overflow-x: clip; }
.mt-rp__side .mt-actions { margin-block-start: 1.2rem; }
.mt-sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mt-h2 { margin: 0 0 1rem; font-family: var(--site-font-head); font-weight: 400; text-transform: uppercase; line-height: 1.02; font-size: clamp(1.9rem, 4.6vw, 3.4rem); color: var(--gold-hi); }
.mt-lead { margin: 0 0 1.8rem; max-width: 46rem; color: var(--site-dim); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.6; }
.mt-lead--lines span { display: block; }
.mt-note { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--site-dim); text-align: center; }
.mt .site-btn--ghost { color: var(--site-fg); }
.mt-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
@keyframes mt-rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
.mt-rise { animation: mt-rise 0.8s ease both; animation-delay: calc(var(--i, 0) * 0.12s); }

/* ---------- M1. Первый экран: заголовок и часовой механизм под лупой ---------- */
.mt-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-block-size: calc(100vh - 3rem); min-block-size: calc(100svh - 3rem);   /* следующий экран виден лишь чуть-чуть */
  padding: clamp(5.5rem, 7vw, 6.5rem) var(--site-gutter) clamp(1.5rem, 3vw, 2.5rem);
  background: #0b0907;
}
.mt-hero__bg { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.mt-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 9, 7, 0.92), rgba(11, 9, 7, 0.35) 60%, rgba(11, 9, 7, 0.1)); }
.mt-dust { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 1; pointer-events: none; }
.mt-hero__in { position: relative; z-index: 2; display: grid; gap: 1.6rem; inline-size: 100%; }
.mt-intro { max-inline-size: 38rem; }
@media (min-width: 62rem) {
  .mt-hero__in { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 2rem; }
}
.mt-h1 { margin: 0 0 1rem; font-family: var(--site-font-head); font-weight: 400; text-transform: uppercase; line-height: 1.02; font-size: clamp(1.7rem, 3.6vw, 2.8rem); color: var(--gold-hi); }
.mt-h1 span { display: block; }
.mt-h1 span:nth-child(2) { color: var(--gold); }
.mt-sub { margin: 0 0 1.3rem; max-width: 40rem; color: var(--site-dim); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.55; }
.mt-pains { display: grid; gap: 0.5rem; margin: 0 0 1.8rem; padding: 0; list-style: none; max-width: 34rem; }
.mt-pains li { position: relative; padding-inline-start: 2rem; min-block-size: 1.5rem; color: var(--site-fg); font-size: 0.98rem; line-height: 1.45; }
.mt-pains li::before { content: ""; position: absolute; inset-inline-start: 0.22rem; inset-block-start: 0.3em; inline-size: 1.08rem; block-size: 1.08rem;
  border-radius: 0 50% 50% 50%; transform: rotate(45deg);
  background:
    radial-gradient(circle at 24% 60%, rgba(255, 255, 255, 0.95) 0 6%, rgba(255, 190, 205, 0.45) 8% 16%, transparent 26%),
    conic-gradient(from 10deg at 55% 55%, #ff4a73, #a1102f, #e83a62, #6a0824, #ff4a73, #8f0c2c, #d12a50, #5a0720, #ff4a73);
  filter: drop-shadow(0 0 4px rgba(255, 50, 90, 0.7)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)); }

/* сцена: квадрат, все предметы в процентах от него */
.mt-stage { position: relative; inline-size: min(100%, 44rem); aspect-ratio: 1; margin-inline: auto; touch-action: pan-y; }
@media (max-width: 61.99rem) { .mt-stage { inline-size: min(100%, 34rem); } }
.mt-glowspot { position: absolute; inset: -6%; background: radial-gradient(closest-side, rgba(255, 206, 130, 0.16), transparent 72%); pointer-events: none; }
.mt-mvwrap { position: absolute; z-index: 3; inset-inline-start: 2%; inset-block-start: 3%; inline-size: 66%; aspect-ratio: 1; }
.mt-mv { position: relative; z-index: 1; display: block; inline-size: 100%; block-size: auto; }
.mt-mvshadow { position: absolute; inset: 4% -2% -6% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent); filter: blur(10px); }
.mt-glint { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; clip-path: circle(48.6% at 50% 50%); }
.mt-glint::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%; inline-size: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 240, 200, 0.5), transparent); transform: skewX(-12deg); animation: mt-glint 7s ease-in-out infinite; }
@keyframes mt-glint { 0%, 55% { transform: translateX(0) skewX(-12deg); } 100% { transform: translateX(480%) skewX(-12deg); } }

.mt-loose { position: absolute; z-index: 2; aspect-ratio: 1; }
.mt-loose img { position: relative; display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
.mt-sh { position: absolute; inset: 6% -4% -6% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.65), transparent); filter: blur(8px); }
.mt-loose--l { inset-inline-start: 62%; inset-block-start: 50%; inline-size: 38%; z-index: 2; }
.mt-trio { position: absolute; z-index: 2; inset-inline-start: 0; inset-block-start: 58%; inline-size: 48%; aspect-ratio: 100 / 88; pointer-events: none; }
.mt-loose--s { inset-inline-start: 66%; inset-block-start: 0; inline-size: 28%; z-index: 2; }
.mt-spin { animation: mt-rot 90s linear infinite; }
.mt-spin--rev { animation-direction: reverse; animation-duration: 60s; }
@keyframes mt-rot { to { transform: rotate(360deg); } }

/* лупа: ручная, стекло повёрнуто к зрителю; круглая линза с крупным механизмом лежит ПОД фото (стекло на фото прозрачное, видны только оправа, блики и ручка) */
.mt-lp { position: absolute; z-index: 6; inset-inline-start: 0; inset-block-start: 0; inline-size: 38%; aspect-ratio: 1; pointer-events: none; will-change: transform; }
.mt-lp::before { content: ""; position: absolute; inset: 9% 28% 32% 9%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), transparent); transform: translate(6%, 10%); }
.mt-lp__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.mt-lp__lens { position: absolute; inset-inline-start: 8.5%; inset-block-start: 8.5%; inline-size: 43%; block-size: 43%; overflow: hidden; border-radius: 50%; display: none; background: rgba(8, 6, 4, 0.2); }
.mt-js .mt-lp__lens { display: block; }
.mt-lp__view { position: absolute; inset: 0; }
.mt-lp__mag { position: absolute; inset-inline-start: 0; inset-block-start: 0; max-inline-size: none; will-change: transform; }
html:not(.mt-js) .mt-lp { inset-inline-start: 36%; inset-block-start: 40%; }

/* пауза вне экрана и при просьбе системы убрать анимацию */
.mt-paused, .mt-paused *, .mt-paused *::before, .mt-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .mt-spin, .mt-glint::before, .mt-gear__img, .mt-rise { animation: none; }
}

/* ---------- M2. Что внутри механизма ---------- */
.mt-in { position: relative; isolation: isolate; padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #100d0a; }
.mt-in::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.55; pointer-events: none;
  background: radial-gradient(55% 50% at 25% 40%, rgba(255, 206, 130, 0.12), transparent 70%), url(../img/desk-s.webp) 80% 60% / cover no-repeat; }
.mt-in__grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 62rem) { .mt-in__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3rem; } }
.mt-bench { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.6rem); }
@media (min-width: 40rem) { .mt-bench { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mt-gear { position: relative; display: grid; justify-items: center; gap: 0.6rem; padding: 0.8rem 0.4rem 0.6rem; border: 1px solid transparent; border-radius: 0.8rem; background: none; color: var(--site-fg); cursor: pointer; font: inherit;
  transition: border-color 0.25s, background-color 0.25s, transform 0.25s; }
.mt-gear:hover { transform: translateY(-3px); }
.mt-gear:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mt-gear[aria-pressed="true"] { border-color: var(--site-line); background: rgba(242, 199, 92, 0.06); }
.mt-gear__sh { position: absolute; inset-inline: 14% ; inset-block-start: 26%; block-size: 46%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); filter: blur(8px); transform: translate(6%, 10%); }
.mt-gear__img { position: relative; inline-size: min(100%, 11rem); block-size: auto; aspect-ratio: 1; object-fit: contain; animation: mt-rot 70s linear infinite; }
.mt-gear:nth-child(even) .mt-gear__img { animation-direction: reverse; }
.mt-gear[aria-pressed="true"] .mt-gear__img { animation-duration: 9s; }
.mt-gear--1 .mt-gear__img { animation: mt-breath 5s ease-in-out infinite; }
.mt-gear--1[aria-pressed="true"] .mt-gear__img { animation-duration: 1.8s; }
.mt-gear--3 .mt-gear__img { animation: mt-swing 2.6s ease-in-out infinite alternate; }
.mt-gear--3[aria-pressed="true"] .mt-gear__img { animation-duration: 1.1s; }
.mt-gear--5 .mt-gear__img { animation: mt-wobble 3.4s ease-in-out infinite alternate; }
.mt-gear--5[aria-pressed="true"] .mt-gear__img { animation-duration: 1.4s; }
@keyframes mt-breath { 50% { transform: scale(1.04); } }
@keyframes mt-swing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes mt-wobble { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.mt-gear__ruby { position: absolute; inset-inline-end: 10%; inset-block-start: 4%; inline-size: 2.6rem; opacity: 0; transform: scale(0.4); filter: drop-shadow(0 0 0.7rem rgba(230, 30, 80, 0.75)); transition: opacity 0.3s, transform 0.3s; }
.mt-gear__ruby img { display: block; inline-size: 100%; block-size: auto; }
.mt-gear[aria-pressed="true"] .mt-gear__ruby { opacity: 1; transform: none; }
.mt-gear__name { font-size: 0.95rem; line-height: 1.25; text-align: center; color: var(--gold-hi); }

.mt-panels { padding: clamp(1.2rem, 2.5vw, 2rem); border: 1px solid var(--team-line); border-radius: 0.8rem; background: rgba(20, 16, 10, 0.78); }
.mt-panel + .mt-panel { margin-block-start: 1.6rem; padding-block-start: 1.6rem; border-block-start: 1px solid var(--site-line); }
.mt-js .mt-panel { display: none; margin: 0; padding: 0; border: 0; }
.mt-js .mt-panel.is-on { display: block; animation: mt-rise 0.45s ease both; }
.mt-panel__h { margin: 0 0 1rem; font-family: var(--site-font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--gold); }
.mt-panel__l { display: grid; gap: 1rem; margin: 0; }
.mt-panel__l dt { margin: 0 0 0.2rem; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.mt-panel__l dd { margin: 0; line-height: 1.55; color: var(--site-fg); }
.mt-panel__l div + div { padding-block-start: 1rem; border-block-start: 1px solid rgba(242, 199, 92, 0.12); }

/* ---------- M3. Месяц по неделям ---------- */
.mt-wk { position: relative; isolation: isolate; padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #0b0907; }
.mt-wk::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 55% at 28% 55%, rgba(255, 206, 130, 0.1), transparent 70%); }
.mt-wk__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 62rem) { .mt-wk__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; } }
.mt-dial { position: relative; inline-size: min(100%, 30rem); margin-inline: auto; aspect-ratio: 800 / 768; }
.mt-dial__sh { position: absolute; inset: 6% -2% -6% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent); filter: blur(12px); }
.mt-dial__img { position: relative; display: block; inline-size: 100%; block-size: 100%; }
.mt-dial__orbit { position: absolute; inset: 0; transform: rotate(calc((var(--w, 1) - 1) * 90deg)); transition: transform 0.9s cubic-bezier(0.5, 0, 0.2, 1); }
.mt-dial[data-week="1"] { --w: 1; } .mt-dial[data-week="2"] { --w: 2; } .mt-dial[data-week="3"] { --w: 3; } .mt-dial[data-week="4"] { --w: 4; }
.mt-dial__ruby { position: absolute; inset-inline-start: 43.5%; inset-block-start: 6.5%; inline-size: 13%; filter: drop-shadow(0 0 0.8rem rgba(230, 30, 80, 0.7)) drop-shadow(0 5px 4px rgba(0, 0, 0, 0.6));
  transform: rotate(calc((var(--w, 1) - 1) * -90deg)); transition: transform 0.9s cubic-bezier(0.5, 0, 0.2, 1); }
.mt-dial__ruby img { display: block; inline-size: 100%; block-size: auto; }
.mt-wk__tabs, .mt-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-block-end: 1rem; }
@media (min-width: 40rem) { .mt-wk__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mt-tab { display: grid; gap: 0.2rem; align-content: center; min-block-size: 3.4rem; padding: 0.6rem 0.8rem; border: 1px solid var(--site-line); border-radius: 0.6rem; background: rgba(242, 199, 92, 0.03); color: var(--site-fg); font: inherit; text-align: start; cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s, transform 0.25s; }
.mt-tab b { font-size: 0.78rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.mt-tab span { font-size: 0.92rem; line-height: 1.25; }
.mt-tab:hover { border-color: var(--gold); transform: translateY(-2px); }
.mt-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mt-tab[aria-pressed="true"] { border-color: var(--gold); background: rgba(242, 199, 92, 0.1); }
.mt-tab--s { text-align: center; }
.mt-modes { max-inline-size: 26rem; }
.mt-ticks { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.mt-ticks li { position: relative; padding-inline-start: 1.7rem; line-height: 1.5; color: var(--site-fg); }
.mt-ticks li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.4em; inline-size: 0.8rem; block-size: 0.8rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); box-shadow: 0 0 0.5rem rgba(242, 199, 92, 0.4); }
.mt-note--l { text-align: start; max-inline-size: 36rem; }

/* ---------- M4. Если сайт встал ---------- */
.mt-nt { position: relative; isolation: isolate; padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #100d0a; }
.mt-nt::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; pointer-events: none; background: url(../img/desk-s.webp) 20% 40% / cover no-repeat; }
.mt-nt__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 62rem) { .mt-nt__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }
.mt-scene { position: relative; inline-size: min(100%, 36rem); margin-inline: auto; aspect-ratio: 1; overflow: hidden; border-radius: 0.8rem; }
.mt-scene__img { transition: filter 0.6s; }
.mt-scene[data-mode="night"] .mt-scene__img { filter: brightness(0.36) saturate(0.7); }
.mt-scene[data-mode="night"][data-step="4"] .mt-scene__img { filter: brightness(0.75) saturate(0.9); }
.mt-scene__mv { position: absolute; inset-inline-start: 5%; inset-block-start: 8%; inline-size: 82%; aspect-ratio: 1; }
.mt-scene__img { position: relative; z-index: 1; display: block; inline-size: 100%; block-size: auto; }
.mt-glint--ok { opacity: 0; transition: opacity 0.8s; }
.mt-glint--ok::before { animation-duration: 3.4s; }
.mt-scene[data-step="4"] .mt-glint--ok { opacity: 1; }
.mt-grain { position: absolute; z-index: 3; inset-inline-start: 44%; inset-block-start: 44%; inline-size: 9%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer;
  transition: transform 1.1s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.5s; }
.mt-grain__img { position: relative; display: block; inline-size: 100%; block-size: auto; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6)); }
.mt-grain__ring { position: absolute; inset: -60%; border-radius: 50%; border: 2px solid rgba(255, 60, 90, 0.8); animation: mt-ping 1.8s ease-out infinite; }
@keyframes mt-ping { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(1.1); opacity: 0; } }
.mt-grain:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.mt-tw { position: absolute; z-index: 4; inset-inline-start: 46.9%; inset-block-start: 4%; inline-size: 52%; aspect-ratio: 800 / 736; pointer-events: none; transform-origin: 3% 93%;
  opacity: 0; transition: transform 1.1s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.5s; transform: translate(55%, -55%) rotate(12deg); filter: drop-shadow(8px 12px 8px rgba(0, 0, 0, 0.5)); }
.mt-tw__img { display: block; inline-size: 100%; block-size: auto; }
.mt-scene[data-step="1"] .mt-tw, .mt-scene[data-step="2"] .mt-tw { transform: none; opacity: 1; }
.mt-scene[data-step="3"] .mt-tw { opacity: 1; }
.mt-scene[data-step="3"] .mt-tw, .mt-scene[data-step="4"] .mt-tw { transform: translate(55%, -55%) rotate(12deg); }
.mt-scene[data-step="3"] .mt-grain, .mt-scene[data-step="4"] .mt-grain { transform: translate(318%, -290%); }
.mt-scene[data-step="4"] .mt-grain { opacity: 0; }
.mt-scene:not([data-step="0"]) .mt-grain__ring { animation: none; opacity: 0; }
.mt-scene__ok { position: absolute; z-index: 6; inset-inline: 0; inset-block-end: 1.2rem; margin: 0; text-align: center; font-family: var(--site-font-head); font-size: clamp(1.1rem, 2.4vw, 1.5rem); text-transform: uppercase; color: var(--gold-hi); opacity: 0; transform: translateY(0.6rem); transition: opacity 0.6s 0.4s, transform 0.6s 0.4s; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
.mt-scene[data-step="4"] .mt-scene__ok { opacity: 1; transform: none; }
.mt-nt__mode { display: none; margin: 0 0 1.2rem; max-inline-size: 36rem; line-height: 1.55; color: var(--site-dim); }
.mt-nt__mode.is-on, html:not(.mt-js) .mt-nt__mode { display: block; }
.mt-steps { display: grid; gap: 0.7rem; margin: 0 0 1.6rem; padding: 0; list-style: none; counter-reset: none; }
.mt-steps li { display: flex; align-items: center; gap: 0.8rem; color: var(--site-dim); transition: color 0.4s; }
.mt-steps li span { flex: none; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border: 1px solid var(--site-line); border-radius: 50%; font-size: 0.9rem; color: var(--gold); transition: background-color 0.4s, color 0.4s, border-color 0.4s; }
.mt-steps li.is-on { color: var(--site-fg); }
.mt-steps li.is-on span { border-color: var(--gold); background: var(--gold); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .mt-dial__orbit, .mt-dial__ruby, .mt-tw, .mt-grain, .mt-scene__img, .mt-scene__ok, .mt-glint--ok { transition: none; }
  .mt-grain__ring { animation: none; }
}

/* ---------- M5. Образец отчёта ---------- */
.mt-rp { position: relative; isolation: isolate; padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #0b0907; }
.mt-rp::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(45% 55% at 30% 50%, rgba(255, 206, 130, 0.12), transparent 70%); }
.mt-rp__grid { display: grid; gap: 2rem; align-items: center; perspective: 1400px; }
@media (min-width: 62rem) { .mt-rp__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; } }
.mt-card { position: relative; container-type: inline-size; inline-size: min(100%, 34rem); margin-inline: auto; aspect-ratio: 880 / 1168; }
.mt-card__sh { position: absolute; inset: 4% -3% -4% 5%; background: rgba(0, 0, 0, 0.7); filter: blur(16px); border-radius: 1rem; }
.mt-card__paper { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.mt-card__in { position: absolute; inset: 12% 10% 10% 11%; transform: rotate(-4.6deg); transform-origin: 50% 45%; color: #3b2a15; font-size: 2.7cqw; line-height: 1.22; }
.mt-card__pane { display: none; }
.mt-card[data-view="month"] .mt-card__pane[data-pane="month"], .mt-card[data-view="rec"] .mt-card__pane[data-pane="rec"] { display: block; }
.mt-card__h { margin: 0 0 1cqw; font-family: var(--site-font-head); font-weight: 400; text-transform: uppercase; font-size: 6.6cqw; line-height: 1.05; color: #2a1a08; }
.mt-card__site { margin: 0 0 4cqw; font-size: 3.2cqw; color: rgba(59, 42, 21, 0.72); }
.mt-card__stamp { position: absolute; inset-inline-end: -1cqw; inset-block-start: -1cqw; padding: 0.4cqw 2.4cqw; border: 0.7cqw solid rgba(165, 25, 45, 0.72); border-radius: 1cqw; transform: rotate(-9deg);
  font-family: var(--site-font-head); font-size: 6.5cqw; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(165, 25, 45, 0.72); mix-blend-mode: multiply; pointer-events: none; }
.mt-card.is-flip { animation: mt-flip 0.6s ease; }
@keyframes mt-flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(88deg); } 100% { transform: rotateY(0); } }

.mt-card__h { font-size: 5cqw; }
.mt-card__site { margin-block-end: 1.4cqw; font-size: 2.4cqw; }
.mt-card__sec { margin: 0 0 0.8cqw; font-size: 2.2cqw; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(59, 42, 21, 0.75); }
.mt-card__it { display: grid; gap: 0.8cqw; margin: 0 0 2cqw; padding: 0; list-style: none; }
.mt-card__it > li { display: grid; grid-template-columns: 1fr auto; column-gap: 2cqw; padding-block-end: 0.8cqw; border-block-end: 0.3cqw dotted rgba(59, 42, 21, 0.45); }
.mt-card__it b { font-weight: 700; color: #24160a; }
.mt-card__it em { font-style: normal; font-weight: 700; color: #24160a; text-align: end; }
.mt-card__it span { grid-column: 1 / -1; color: rgba(36, 22, 10, 0.92); }
.mt-card__it small { grid-column: 1 / -1; font-size: 2.1cqw; font-style: italic; color: rgba(59, 42, 21, 0.7); }
.mt-card__tot { display: flex; justify-content: space-between; margin: 0 0 1.4cqw; padding-block: 0.8cqw; border-block: 0.5cqw double rgba(59, 42, 21, 0.6); font-weight: 700; color: #24160a; }
.mt-card__plan { margin: 0; padding-inline-start: 3.4cqw; }
.mt-card__plan li { margin-block-end: 0.6cqw; }
.mt-card__it--rec { gap: 2cqw; }
.mt-pts { display: grid; gap: 1.1rem; margin: 0 0 1.2rem; padding: 0; list-style: none; max-inline-size: 36rem; }
.mt-pts li { display: grid; gap: 0.25rem; padding-inline-start: 1rem; border-inline-start: 2px solid var(--site-line); }
.mt-pts b { font-weight: 600; color: var(--gold-hi); }
.mt-pts span { line-height: 1.5; color: var(--site-dim); }

/* ---------- M6. Какой уход нужен вашему сайту ---------- */
.mt-ca { position: relative; isolation: isolate; padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #100d0a; }
.mt-ca::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; pointer-events: none; background: url(../img/desk-s.webp) 70% 50% / cover no-repeat; }
.mt-ca__grid { display: grid; gap: 2.4rem; align-items: start; }
.mt-ca__left .mt-head .mt-lead { margin-block-end: 1.4rem; }
.mt-ca__left .mt-h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
@media (min-width: 62rem) { .mt-ca__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: stretch; } .mt-res { align-self: start; margin-block-start: calc(clamp(1.9rem, 3.4vw, 2.8rem) * 1.02); } }
.mt-q { margin: 0 0 1.5rem; padding: 0; border: 0; min-inline-size: 0; }
.mt-q legend { margin: 0 0 0.6rem; padding: 0; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.mt-q__opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mt-opt { position: relative; }
.mt-opt input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mt-opt span { display: block; padding: 0.6rem 1rem; border: 1px solid var(--site-line); border-radius: 2rem; background: rgba(242, 199, 92, 0.03); font-size: 0.95rem; line-height: 1.25; transition: border-color 0.25s, background-color 0.25s; }
.mt-opt:hover span { border-color: var(--gold); }
.mt-opt input:checked + span { border-color: var(--gold); background: rgba(242, 199, 92, 0.14); color: var(--gold-hi); }
.mt-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.mt-res { position: relative; padding: clamp(1.2rem, 2.5vw, 2rem); border: 1px solid var(--team-line); border-radius: 0.8rem; background: rgba(20, 16, 10, 0.82); }
.mt-nojs { margin: 0; color: var(--site-dim); }
.mt-js .mt-nojs { display: none; }
html:not(.mt-js) .mt-res__in { display: none; }
.mt-res__gears { position: absolute; inset-inline-end: -0.6rem; inset-block-start: -2.6rem; inline-size: 9.5rem; aspect-ratio: 1.15; pointer-events: none; }
.mt-rg { position: absolute; display: block; filter: drop-shadow(5px 8px 6px rgba(0, 0, 0, 0.55)); }
.mt-rg--a { inset-inline-start: 0; inset-block-start: 22%; inline-size: 56%; }
.mt-rg--b { inset-inline-start: 50%; inset-block-start: 0; inline-size: 40%; }
.mt-rg--c { inset-inline-start: 38%; inset-block-start: 58%; inline-size: 34%; }
.mt-rg__i { display: block; inline-size: 100%; block-size: auto; animation: mt-rot var(--sp, 30s) linear infinite; }
.mt-rg__i--b { animation-direction: reverse; }
.mt-res__k { margin: 0 0 0.3rem; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.mt-res__n { margin: 0 0 1rem; font-family: var(--site-font-head); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; text-transform: uppercase; color: var(--gold-hi); }
.mt-res__n span { font-size: 0.45em; color: var(--site-dim); }
.mt-bars { display: grid; gap: 0.45rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.mt-bars li { display: grid; grid-template-columns: 4.2rem 1fr 2.4rem; gap: 0.6rem; align-items: center; font-size: 0.85rem; color: var(--site-dim); }
.mt-bars em { font-style: normal; }
.mt-bars i { position: relative; display: block; block-size: 0.5rem; border-radius: 0.5rem; background: rgba(242, 199, 92, 0.1); overflow: hidden; }
.mt-bars i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--v, 0) * 100%); border-radius: 0.5rem; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transition: inline-size 0.5s ease; }
.mt-bars b { font-weight: 600; text-align: end; color: var(--site-fg); }
.mt-res__pack { margin: 0 0 0.4rem; font-size: 1.2rem; }
.mt-res__pack b { font-family: var(--site-font-head); font-weight: 400; text-transform: uppercase; font-size: 1.7rem; color: var(--gold); }
.mt-res__pack span { color: var(--site-dim); }
.mt-res__price { margin: 0 0 1rem; font-size: 1.05rem; color: var(--site-fg); }
.mt-res__price b { font-size: 1.5rem; color: var(--gold-hi); }
.mt-res__price small { font-size: 0.85rem; color: var(--site-dim); }
.mt-res__more { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--site-line); border-radius: 0.5rem; color: var(--site-fg); line-height: 1.5; }
.mt-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; }
.mt-chip { position: relative; display: grid; gap: 0.1rem; justify-items: start; min-inline-size: 5.2rem; padding: 0.5rem 0.9rem; border: 1px solid var(--site-line); border-radius: 0.7rem; background: rgba(242, 199, 92, 0.03); color: var(--site-fg); font: inherit; text-align: start; cursor: pointer; transition: border-color 0.25s, background-color 0.25s, transform 0.25s; }
.mt-chip span { font-size: 0.95rem; font-weight: 600; }
.mt-chip small { font-size: 0.75rem; color: var(--site-dim); }
.mt-chip:hover { border-color: var(--gold); transform: translateY(-2px); }
.mt-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mt-chip[aria-pressed="true"] { border-color: var(--gold); background: rgba(242, 199, 92, 0.16); color: var(--gold-hi); }
.mt-chip__r { position: absolute; inset-inline-end: 0.4rem; inset-block-start: -0.55rem; display: none; padding: 0.05rem 0.45rem; border-radius: 1rem; background: var(--gold); color: var(--ink); font-size: 0.62rem; font-style: normal; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.mt-chip.is-rec .mt-chip__r { display: block; }
.mt-res__hint { margin: 0 0 1rem; font-size: 0.82rem; color: var(--site-dim); }
.mt-fn { margin: 0 0 1.2rem; border-block-start: 1px solid var(--site-line); }
.mt-fn__head { display: flex; align-items: center; gap: 0.8rem; margin: 0; padding: 0.9rem 0; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); cursor: pointer; list-style: none; }
.mt-fn__head::-webkit-details-marker { display: none; }
.mt-fn__head:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 0.3rem; }
.mt-fn__head em { margin-inline-start: auto; }
.mt-fn__chev { flex: none; inline-size: 0.7rem; block-size: 0.7rem; border-inline-end: 2px solid var(--gold); border-block-end: 2px solid var(--gold); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.3s; }
.mt-fn[open] > .mt-fn__head .mt-fn__chev { transform: rotate(-135deg) translate(-2px, -2px); }
.mt-fn__t { display: inline-block; margin-inline-start: 0.35rem; padding: 0.05rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; font-style: normal; letter-spacing: 0.04em; text-transform: none; vertical-align: 0.1em; }
.mt-fn__t--always { background: rgba(242, 199, 92, 0.18); color: var(--gold-hi); }
.mt-fn__t--pool { background: rgba(255, 255, 255, 0.08); color: var(--site-fg); }
.mt-fn__t--opt { background: rgba(255, 255, 255, 0.05); color: var(--site-dim); }
.mt-fn__head em { font-style: normal; letter-spacing: 0.08em; color: var(--site-dim); }
.mt-fn__body { padding-block-end: 0.2rem; }
.mt-fn__l li.is-off .mt-fn__n { color: var(--site-dim); }
.mt-fn__l { display: grid; gap: 0; margin: 0 0 0.9rem; padding: 0; list-style: none; }
.mt-fn__l li { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; padding-block: 0.55rem; border-block-end: 1px solid rgba(242, 199, 92, 0.12); }
.mt-fn__n { color: var(--site-fg); line-height: 1.3; }
.mt-fn__h { text-align: end; white-space: nowrap; font-weight: 600; color: var(--gold-hi); transition: color 0.3s; }
.mt-fn__l small { grid-column: 1 / -1; margin-block-start: 0.15rem; font-size: 0.8rem; line-height: 1.35; color: var(--site-dim); }
.mt-fn__bt { margin: 0 0 0.3rem; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.mt-fn__bonus ul { margin: 0 0 0.8rem; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
.mt-fn__bonus li { position: relative; padding-inline-start: 1.1rem; font-size: 0.88rem; color: var(--site-fg); }
.mt-fn__bonus li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.4em; inline-size: 0.55rem; block-size: 0.55rem; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: conic-gradient(from 10deg at 55% 55%, #ff4a73, #a1102f, #e83a62, #6a0824, #ff4a73, #8f0c2c, #d12a50, #5a0720, #ff4a73); }
.mt-fn__bonus[hidden], .mt-fn__bonus li[hidden] { display: none; }
.mt-fn__approx { margin: 0; padding: 0.6rem 0.8rem; border: 1px dashed var(--site-line); border-radius: 0.5rem; font-size: 0.82rem; line-height: 1.45; color: var(--site-dim); }
@media (prefers-reduced-motion: reduce) { .mt-card.is-flip { animation: none; } .mt-rg__i { animation: none; } .mt-bars i::after { transition: none; } }

/* ---------- спутник у курсора: рубин-капля облетает указатель (js, только мышь и тачпад) ---------- */
.mt-sat { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 60; inline-size: 22px; block-size: 22px; pointer-events: none; opacity: 0; transition: opacity 0.3s; will-change: transform; }
.mt-sat.is-on { opacity: 1; }
.mt-sat__d { position: absolute; inset: 2px; border-radius: 0 50% 50% 50%; transform: rotate(225deg);
  background:
    radial-gradient(circle at 24% 60%, rgba(255, 255, 255, 0.95) 0 6%, rgba(255, 190, 205, 0.45) 8% 16%, transparent 26%),
    conic-gradient(from 10deg at 55% 55%, #ff4a73, #a1102f, #e83a62, #6a0824, #ff4a73, #8f0c2c, #d12a50, #5a0720, #ff4a73);
  filter: drop-shadow(0 0 6px rgba(255, 50, 90, 0.85)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }

/* ---------- M9. Ключи от мастерской ---------- */
.mt-ky { position: relative; isolation: isolate; padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #0d0a08; }
.mt-ky::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 55% at 28% 50%, rgba(255, 206, 130, 0.12), transparent 70%); }
.mt-ky__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 62rem) { .mt-ky__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; } }
.mt-keys { position: relative; inline-size: min(100%, 26rem); margin-inline: auto; aspect-ratio: 1; }
.mt-keys__sh { position: absolute; inset: 14% 0 -4% 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); filter: blur(14px); }
.mt-keys__img { position: relative; display: block; inline-size: 100%; block-size: 100%; object-fit: contain; filter: drop-shadow(6px 10px 8px rgba(0, 0, 0, 0.5)); }
.mt-hk { position: absolute; inset-inline-start: calc(var(--x) * 1% - 7%); inset-block-start: calc(var(--y) * 1% - 7%); inline-size: 14%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.mt-hk::before { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: 50%; transition: border-color 0.3s; }
.mt-hk[aria-pressed="true"]::before { border-color: var(--gold-hi); animation: mt-ping 1.8s ease-out infinite; }
.mt-hk b { position: absolute; inset: 22%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, #c8962e 60%, #6f4410); color: #2a1a08; font-size: 0.85rem; font-weight: 700; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); transition: transform 0.25s; }
.mt-hk:hover b { transform: scale(1.12); }
.mt-hk:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mt-panel__p { margin: 0; line-height: 1.65; font-size: 1.05rem; color: var(--site-fg); }
.mt-ky .mt-wk__tabs { margin-block-end: 1rem; }

/* ---------- M10. Чего мы не делаем: карточки с переворотом, рядом забракованные детали ---------- */
.mt-no { position: relative; isolation: isolate; overflow-x: clip; padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #100d0a; }
.mt-no::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.45; pointer-events: none; background: url(../img/desk-s.webp) 40% 60% / cover no-repeat; }
.mt-head--tw { display: grid; gap: 1.2rem; align-items: center; }
@media (min-width: 62rem) { .mt-head--tw { grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr); } }
.mt-no__tw { position: relative; inline-size: min(78%, 20rem); aspect-ratio: 1; justify-self: end; }
.mt-no__bin { position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: 44%; block-size: auto; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.55)); }
.mt-no__tw-i { position: absolute; inset-inline-start: 18%; inset-block-start: 0; inline-size: 82%; block-size: auto; transform: rotate(-4deg); transform-origin: 3% 93%; animation: mt-wobble 5s ease-in-out infinite alternate; filter: drop-shadow(8px 12px 8px rgba(0, 0, 0, 0.5)); }
.mt-no__gr { position: absolute; inset-inline-start: 17%; inset-block-start: 71%; inline-size: 9%; block-size: auto; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6)); }
.mt-flips { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2.4rem 1rem; margin: 0; padding: 1.4rem 0 0; list-style: none; }
@media (min-width: 62rem) {
  .mt-flips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mt-flips > li { grid-column: span 2; }
  .mt-flips > li:nth-child(n+4) { grid-column: span 3; }
}
.mt-flips > li { position: relative; }
.mt-flip { display: block; inline-size: 100%; block-size: 14rem; padding: 0; border: 0; background: none; color: var(--site-fg); font: inherit; text-align: start; cursor: pointer; perspective: 900px; }
.mt-flip:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 0.8rem; }
.mt-flip__in { position: relative; display: block; inline-size: 100%; block-size: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.5, 0, 0.2, 1); }
.mt-flip.is-flipped .mt-flip__in { transform: rotateY(180deg); }
.mt-flip__f, .mt-flip__b { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.7rem; padding: 1.2rem 7rem 1.2rem 1.2rem; border: 1px solid var(--team-line); border-radius: 0.8rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mt-flip__f { background: linear-gradient(160deg, #1f170d, #120d07); box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.5); }
.mt-flip__b { transform: rotateY(180deg); padding-inline-end: 1.2rem; background: linear-gradient(160deg, #2b1f0e, #17100a); border-color: var(--gold); }
.mt-flip small { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.mt-flip__f b { font-family: var(--site-font-head); font-weight: 400; font-size: 1.5rem; line-height: 1.1; text-transform: uppercase; color: var(--site-fg); text-decoration: line-through; text-decoration-color: rgba(230, 40, 75, 0.9); text-decoration-thickness: 2px; }
.mt-flip__b > span { line-height: 1.55; color: var(--site-fg); }
.mt-flip__o { position: absolute; z-index: 3; inset-inline-end: -0.4rem; inset-block-start: -1.4rem; inline-size: 6.6rem; pointer-events: none; transform: rotate(var(--r, 8deg)); filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.55)); transition: transform 0.5s; }
.mt-flip__o img { display: block; inline-size: 100%; block-size: auto; }
.mt-flip__o--1 { --r: -10deg; } .mt-flip__o--2 { --r: 6deg; } .mt-flip__o--3 { --r: 14deg; } .mt-flip__o--4 { --r: -6deg; } .mt-flip__o--5 { --r: 10deg; }
.mt-flips > li:hover .mt-flip__o { transform: rotate(calc(var(--r) * -1)) translateY(-3px); }
html:not(.mt-js) .mt-flip { block-size: auto; perspective: none; }
html:not(.mt-js) .mt-flip__in { display: grid; gap: 0.6rem; transform: none; }
html:not(.mt-js) .mt-flip__f, html:not(.mt-js) .mt-flip__b { position: relative; transform: none; backface-visibility: visible; }
@media (prefers-reduced-motion: reduce) { .mt-flip__in, .mt-flip__o { transition: none; } .mt-no__tw-i { animation: none; } }

/* ---------- M11. Первые 14 дней ---------- */
.mt-fd { position: relative; isolation: isolate; padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #0b0907; }
.mt-fd::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(48% 55% at 28% 50%, rgba(255, 206, 130, 0.11), transparent 70%); }
.mt-fd__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 62rem) { .mt-fd__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; } }
.mt-wk__tabs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mt-wind { position: relative; inline-size: min(88%, 22rem); margin-inline: auto; aspect-ratio: 1; --p: 8; transition: --p 0.9s cubic-bezier(0.5, 0, 0.2, 1); }
.mt-wind[data-day="1"] { --p: 8; } .mt-wind[data-day="2"] { --p: 50; } .mt-wind[data-day="3"] { --p: 100; }
.mt-wind__ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold-lo), var(--gold-hi) calc(var(--p) * 1%), rgba(242, 199, 92, 0.12) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px)); mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px)); }
.mt-wind__sh { position: absolute; inset: 22% 8% 4% 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.65), transparent); filter: blur(12px); }
.mt-wind__img { position: absolute; inset: 14%; inline-size: 72%; block-size: 72%; object-fit: contain; animation: mt-breath 5s ease-in-out infinite; }
.mt-wind__d { position: absolute; display: grid; place-items: center; inline-size: 1.9rem; block-size: 1.9rem; margin: -0.95rem 0 0 -0.95rem; border-radius: 50%; font-size: 0.78rem; font-weight: 700; color: #2a1a08;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #c8962e 60%, #6f4410); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); transition: transform 0.4s, box-shadow 0.4s; }
.mt-wind__d--1 { left: 74%; top: 6.2%; } .mt-wind__d--2 { left: 50%; top: 100%; } .mt-wind__d--3 { left: 50%; top: 0; }
.mt-wind[data-day="1"] .mt-wind__d--1, .mt-wind[data-day="2"] .mt-wind__d--2, .mt-wind[data-day="3"] .mt-wind__d--3 { transform: scale(1.35); box-shadow: 0 0 0 3px rgba(255, 233, 168, 0.35), 0 0 1rem rgba(242, 199, 92, 0.7); }

/* ---------- M12. Что обслуживаем ---------- */
.mt-pl { position: relative; isolation: isolate; padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #100d0a; }
.mt-pl::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.45; pointer-events: none; background: url(../img/desk-s.webp) 60% 40% / cover no-repeat; }
.mt-pl__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 62rem) { .mt-pl__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; } }
.mt-ring { position: relative; inline-size: min(100%, 34rem); margin-inline: auto; aspect-ratio: 1; }
.mt-ring__glow { position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 206, 130, 0.2), transparent); }
.mt-ring__c { position: absolute; inset: 21%; display: block; filter: drop-shadow(6px 10px 8px rgba(0, 0, 0, 0.55)); }
.mt-ring__img { display: block; inline-size: 100%; block-size: auto; }
.mt-ring__beam { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: 38%; block-size: 2px; transform-origin: 0 50%; transform: rotate(calc(var(--a, 0deg) - 90deg));
  background: linear-gradient(90deg, rgba(255, 233, 168, 0), var(--gold-hi)); box-shadow: 0 0 0.6rem rgba(242, 199, 92, 0.6); transition: transform 0.7s cubic-bezier(0.5, 0, 0.2, 1); }
.mt-plate { position: absolute; inset-inline-start: calc(var(--x) * 1%); inset-block-start: calc(var(--y) * 1%); transform: translate(-50%, -50%); padding: 0.55rem 0.9rem; border: 1px solid var(--site-line); border-radius: 2rem;
  background: rgba(20, 16, 10, 0.92); color: var(--site-fg); font: inherit; font-size: 0.9rem; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s; }
.mt-plate:hover { border-color: var(--gold); }
.mt-plate:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mt-plate[aria-pressed="true"] { border-color: var(--gold); background: rgba(60, 44, 14, 0.95); color: var(--gold-hi); box-shadow: 0 0 1rem rgba(242, 199, 92, 0.35); }
.mt-pl__more { margin-block-start: 0.6rem; font-size: 0.8rem; line-height: 1.5; }
.mt-panel__k { margin: 0 0 0.4rem; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 40rem) {
  .mt-ring { aspect-ratio: auto; display: grid; gap: 1rem; }
  .mt-ring__glow, .mt-ring__beam { display: none; }
  .mt-ring__c { position: relative; inset: auto; inline-size: 60%; margin-inline: auto; }
  .mt-ring__plates { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
  .mt-plate { position: static; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .mt-wind, .mt-wind__d, .mt-ring__beam { transition: none; } .mt-wind__img { animation: none; } }

.mt-eyebrow { margin: 0 0 0.9rem; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }

/* ---------- M13. Смежные услуги ---------- */
.mt-rl { padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #0b0907; }
.mt-rel { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .mt-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .mt-rel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mt-rel a { position: relative; display: grid; gap: 0.5rem; align-content: start; block-size: 100%; padding: 1.2rem 1.3rem 1.3rem; border: 1px solid var(--site-line); border-radius: 1rem; background: rgba(20, 16, 10, 0.6); color: inherit; text-decoration: none;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.mt-rel a:hover, .mt-rel a:focus-visible { border-color: rgba(242, 199, 92, 0.6); transform: translateY(-3px); box-shadow: 0 0 24px rgba(242, 199, 92, 0.12); }
.mt-rel__o { display: block; inline-size: 7.5rem; block-size: 7.5rem; margin-block-end: 0.4rem; }
.mt-rel__o img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; filter: drop-shadow(5px 8px 6px rgba(0, 0, 0, 0.55)); transition: transform 0.6s cubic-bezier(0.5, 0, 0.2, 1); }
.mt-rel a:hover .mt-rel__o--tw img { transform: rotate(-12deg) translateX(-4px); }
.mt-rel a:hover .mt-rel__o--gr img { transform: rotate(90deg); }
.mt-rel a:hover .mt-rel__o--lp img { transform: rotate(-14deg) scale(1.06); }
.mt-rel a:hover .mt-rel__o--ky img { transform: rotate(8deg); transform-origin: 20% 10%; }
.mt-rel__t { margin: 0; font-size: 1.15rem; font-weight: 400; color: var(--gold-hi); }
.mt-rel__d { line-height: 1.5; color: var(--site-dim); }
.mt-rel__m { color: var(--gold); font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) { .mt-rel a, .mt-rel__o img { transition: none; } }

/* ---------- M14. Команда ---------- */
.mt-tm { padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #100d0a; }
.mt-tm__in { display: grid; gap: 2rem; }
.mt-tm__tx { max-inline-size: 52rem; }
.mt-tm .site-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.mt-tm .site-team__item { padding: 0.45rem 0.45rem 0.8rem; }
.mt-tm .site-team__n { font-size: 1rem; }
.mt-tm .site-team__r { font-size: 0.78rem; }
.mt-tm .site-team__t { font-size: 0.8125rem; }
@media (min-width: 62rem) { .mt-tm .site-team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .mt-tm .site-team__item { padding: 0.75rem 0.75rem 1.1rem; } .mt-tm .site-team__n { font-size: 1.125rem; } .mt-tm .site-team__r { font-size: 0.8125rem; } .mt-tm .site-team__t { font-size: 0.9375rem; } }

/* ---------- M16. Вопросы и ответы ---------- */
.mt-fq { padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #0b0907; }

/* ---------- M17. Финал ---------- */
.mt-end { position: relative; isolation: isolate; overflow-x: clip; padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #100d0a; }
.mt-end::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(11, 9, 7, 0.92), rgba(11, 9, 7, 0.4) 70%, rgba(11, 9, 7, 0.15)), url(../img/desk-s.webp) 70% 50% / cover no-repeat; }
.mt-end__in { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 62rem) { .mt-end__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; } }
.mt-end__tx .mt-ticks { margin: 0 0 1.6rem; max-inline-size: 34rem; }
.mt-nums { display: flex; flex-wrap: wrap; gap: 1.2rem 3rem; margin: 2.2rem 0 0; padding: 1.4rem 0 0; list-style: none; border-block-start: 1px solid var(--site-line); }
.mt-nums li { display: grid; }
.mt-nums b { font-family: var(--site-font-head); font-weight: 400; font-size: 2.2rem; color: var(--gold-hi); }
.mt-nums span { color: var(--site-dim); font-size: 0.9rem; }
.mt-end__art { position: relative; inline-size: min(100%, 26rem); aspect-ratio: 1; margin-inline: auto; }
.mt-end__mv { position: relative; z-index: 1; display: block; inline-size: 100%; block-size: auto; }
.mt-end__art .mt-glint { inset: 0; }

/* ---------- M7. Пакеты ---------- */
.mt-pk { padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #0b0907; }
.mt-pkl { display: grid; gap: 1rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
@media (min-width: 40rem) { .mt-pkl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .mt-pkl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mt-pkc { position: relative; display: grid; gap: 0.6rem; align-content: start; padding: 1.3rem 1.4rem 1.4rem; border: 1px solid var(--site-line); border-radius: 1rem; background: rgba(20, 16, 10, 0.7); transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; }
.mt-pkc::before { content: ""; position: absolute; inset-inline: 1.4rem; inset-block-start: 0; block-size: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi), var(--gold-lo)); }
.mt-pkc:hover { border-color: rgba(242, 199, 92, 0.6); transform: translateY(-3px); box-shadow: 0 0 24px rgba(242, 199, 92, 0.12); }
.mt-pkc__g { position: absolute; inset-inline-end: 1.1rem; inset-block-start: 1rem; inline-size: 4.2rem; }
.mt-pkc__g > img { position: relative; display: block; inline-size: 100%; block-size: auto; animation-duration: var(--sp, 30s); }
.mt-pkc:hover .mt-pkc__g > img { animation-duration: 4s; }
.mt-pkc__n { margin: 0; font-family: var(--site-font-head); font-weight: 400; text-transform: uppercase; font-size: 1.7rem; line-height: 1; color: var(--gold); }
.mt-pkc__h { margin: 0; color: var(--site-dim); }
.mt-pkc__h b { font-family: var(--site-font-head); font-weight: 400; font-size: 2.8rem; line-height: 1; color: var(--gold-hi); }
.mt-pkc__p { margin: 0 0 0.4rem; color: var(--site-fg); }
.mt-pkc__p b { font-size: 1.4rem; color: var(--gold-hi); }
.mt-pkc__p small { font-size: 0.82rem; color: var(--site-dim); }
.mt-pkc__l { display: grid; gap: 0.5rem; margin: 0 0 0.6rem; padding: 0; list-style: none; }
.mt-pkc__l li { position: relative; padding-inline-start: 1.3rem; line-height: 1.45; font-size: 0.95rem; color: var(--site-fg); }
.mt-pkc__l li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.45em; inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); }
.mt-pkc__l li.is-bonus::before { border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: conic-gradient(from 10deg at 55% 55%, #ff4a73, #a1102f, #e83a62, #6a0824, #ff4a73, #8f0c2c, #d12a50, #5a0720, #ff4a73); }
.mt-pkc .site-btn { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .mt-pkc { transition: none; } .mt-pkc__g > img { animation: none; } }

/* ---------- M8. Часы и что сверх пакета ---------- */
.mt-hr { position: relative; isolation: isolate; padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #100d0a; }
.mt-hr::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.45; pointer-events: none; background: url(../img/desk-s.webp) 30% 50% / cover no-repeat; }
.mt-hr__grid { display: grid; gap: 2.2rem; align-items: start; }
@media (min-width: 62rem) { .mt-hr__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }
.mt-rng { display: flex; justify-content: space-between; gap: 1rem; margin: 0.4rem 0 0.6rem; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.mt-rng b { white-space: nowrap; font-family: var(--site-font-head); font-weight: 400; font-size: 1.6rem; letter-spacing: 0; color: var(--gold-hi); }
.mt-rng__i { inline-size: 100%; min-block-size: 2rem; margin: 0 0 1.2rem; accent-color: var(--gold); cursor: pointer; }
.mt-rng__i:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.mt-scale { position: relative; block-size: 1.1rem; border-radius: 1rem; background: rgba(242, 199, 92, 0.1); overflow: hidden; }
.mt-scale i { position: absolute; inset-block: 0; inset-inline-start: 0; display: block; transition: inline-size 0.45s ease, inset-inline-start 0.45s ease; }
.mt-scale__in { background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); }
.mt-scale__ex { background: linear-gradient(90deg, #a1102f, #ff4a73); }
.mt-scale__mk { inline-size: 2px !important; background: #fff; box-shadow: 0 0 0.4rem rgba(255, 255, 255, 0.8); }
.mt-hr__res { position: relative; padding: clamp(1.2rem, 2.5vw, 2rem); border: 1px solid var(--team-line); border-radius: 0.8rem; background: rgba(20, 16, 10, 0.82); }
.mt-hr__bal { position: absolute; inset-inline-end: 1rem; inset-block-start: -5.4rem; inline-size: 6.6rem; pointer-events: none; }
.mt-hr__bal > img { position: relative; display: block; inline-size: 100%; block-size: auto; animation: mt-swing var(--sp, 2.4s) ease-in-out infinite alternate; }
@media (max-width: 61.99rem) { .mt-hr__bal { position: relative; inset: auto; inline-size: 5rem; margin: -0.4rem auto 0.8rem; } }
.mt-hr__l { margin: 0 0 0.8rem; }
.mt-hr__l > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.6rem; border-block-end: 1px solid rgba(242, 199, 92, 0.15); }
.mt-hr__l dt { margin: 0; color: var(--site-dim); }
.mt-hr__l dd { margin: 0; font-weight: 600; color: var(--site-fg); }
.mt-hr__l .is-ex dd { color: #ff7d9a; }
.mt-hr__l .is-tot dd, .mt-hr__l .is-tot dd b { font-size: 1.4rem; color: var(--gold-hi); }
@media (prefers-reduced-motion: reduce) { .mt-scale i { transition: none; } .mt-hr__bal > img { animation: none; } }

/* ---------- M15. Отзывы ---------- */
.mt-rv { padding: clamp(3.5rem, 8vw, 7rem) var(--site-gutter); background: #0b0907; }
.mt-rv__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.mt-rv__nav { display: flex; align-items: center; gap: 0.6rem; margin-block-end: 1.8rem; }
.mt-rv__g { position: relative; display: block; inline-size: 4.2rem; margin-inline-end: 0.8rem; }
.mt-rv__g > img { position: relative; display: block; inline-size: 100%; block-size: auto; }
.mt-rv__b { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; padding: 0; border: 1px solid var(--site-line); border-radius: 50%; background: rgba(20, 16, 10, 0.7); cursor: pointer; transition: border-color 0.25s, background-color 0.25s, opacity 0.25s; }
.mt-rv__b:hover:not(:disabled) { border-color: var(--gold); background: rgba(242, 199, 92, 0.12); }
.mt-rv__b:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mt-rv__b:disabled { opacity: 0.35; cursor: default; }
.mt-rv__b i { display: block; inline-size: 0.7rem; block-size: 0.7rem; border-inline-end: 2px solid var(--gold); border-block-end: 2px solid var(--gold); }
.mt-rv__b--n i { transform: rotate(-45deg) translate(-1px, -1px); }
.mt-rv__b--p i { transform: rotate(135deg) translate(-1px, -1px); }
.mt-rqs { display: flex; gap: 1rem; margin: 0; padding: 0.4rem 0 0.4rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mt-rqs::-webkit-scrollbar { display: none; }
.mt-rqs:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 0.5rem; }
.mt-rqs > li { flex: 0 0 86%; scroll-snap-align: start; }
@media (min-width: 40rem) { .mt-rqs > li { flex-basis: calc((100% - 1rem) / 2); } }
@media (min-width: 62rem) { .mt-rqs > li { flex-basis: calc((100% - 2rem) / 3); } }
.mt-rv__bar { position: relative; block-size: 3px; margin-block-start: 1.2rem; border-radius: 3px; background: rgba(242, 199, 92, 0.12); overflow: hidden; }
.mt-rv__bar i { position: absolute; inset-block: 0; inset-inline-start: 0; display: block; inline-size: 30%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transition: inset-inline-start 0.25s, inline-size 0.25s; }
.mt-rq { position: relative; display: grid; gap: 0.9rem; align-content: space-between; padding: 1.6rem 1.4rem 1.3rem; border: 1px solid var(--site-line); border-radius: 1rem; background: rgba(20, 16, 10, 0.7); }
.mt-rq__m { position: absolute; inset-inline-start: 1.1rem; inset-block-start: -0.2rem; font-family: var(--site-font-head); font-size: 4rem; line-height: 1; color: var(--gold); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.mt-rq blockquote { margin: 1.4rem 0 0; }
.mt-rq blockquote p { margin: 0; line-height: 1.6; color: var(--site-fg); }
.mt-rq mark { background: none; color: var(--gold-hi); font-weight: 600; }
.mt-rq__w { display: grid; gap: 0.15rem; margin: 0; padding-block-start: 0.8rem; border-block-start: 1px solid rgba(242, 199, 92, 0.15); }
.mt-rq__w b { color: var(--gold-hi); }
.mt-rq__w span { font-size: 0.85rem; color: var(--site-dim); }

/* ---------- строки призыва к действию внизу экранов ---------- */
.mt-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem; margin-block-start: clamp(1.8rem, 4vw, 2.8rem); padding: 1rem 1.2rem; border: 1px solid var(--site-line); border-radius: 0.8rem; background: rgba(20, 16, 10, 0.6); }
.mt-cta p { flex: 1 1 16rem; margin: 0; font-size: 1.05rem; line-height: 1.45; color: var(--site-fg); }
.mt-cta .site-btn { flex: none; }

/* образец отчёта на телефоне: лист по высоте текста, шрифт в rem (в cqw на 343 px выходило 7 px) */
@media (max-width: 40rem) {
  .mt-card { container-type: normal; aspect-ratio: auto; inline-size: 100%; padding: 2.6rem 1.6rem 2.2rem; }
  .mt-card__sh { inset: 2% -2% -3% 3%; }
  .mt-card__paper { object-fit: cover; }
  .mt-card__in { position: relative; inset: auto; transform: none; font-size: 0.92rem; line-height: 1.35; }
  .mt-card__h { margin: 0 0 0.2rem; font-size: 1.7rem; }
  .mt-card__site { margin-block-end: 0.7rem; font-size: 0.85rem; }
  .mt-card__sec { margin: 0 0 0.4rem; font-size: 0.75rem; }
  .mt-card__it { gap: 0.55rem; margin-block-end: 0.7rem; }
  .mt-card__it > li { column-gap: 0.8rem; padding-block-end: 0.5rem; border-block-end-width: 2px; }
  .mt-card__it small { font-size: 0.78rem; }
  .mt-card__tot { margin-block-end: 0.7rem; padding-block: 0.3rem; border-block-width: 3px; }
  .mt-card__plan { padding-inline-start: 1.2rem; }
  .mt-card__plan li { margin-block-end: 0.2rem; }
  .mt-card__stamp { inset-inline-end: -0.1rem; inset-block-start: -0.6rem; padding: 0.1rem 0.8rem; border-width: 2px; border-radius: 0.3rem; font-size: 1.5rem; }
}

} /* @layer page */

@property --p { syntax: "<number>"; inherits: true; initial-value: 8; }