/* «Что ещё умеет Мисторика» — увод в продукт с Луны и календаря стрижек (Дизайнер, 14.10: «оформить мощнее»).
   Язык первых экранов знаков и блока «Сколько стоит»: герой — ИИ-психолог (медальон ins-eye на вращающейся астролябии,
   золотая полудуга Playfair, бирюза, сравнение «от 3 000 ₽ / за 1 ₽» акцентом), ниже три бесплатные возможности медальонами,
   цены — строкой Playfair под растровым орнаментом. Акциденты без контейнеров, облака по краям. На телефоне мелкая декоративка скрыта. */
/* цифры в ценах: seo.css грузит только кириллицу Playfair, и цифры падали в Georgia со старинными цифрами («3 ООО»). Свой латинский подмножественный Playfair только для цифр — с lnum. */
@font-face{font-family:'Mp Num';font-style:normal;font-display:swap;font-weight:400 900;src:url(/assets/fonts/playfair-display-latin-wght-normal.woff2) format('woff2');unicode-range:U+0030-0039}
@font-face{font-family:'Mp Num';font-style:italic;font-display:swap;font-weight:400 900;src:url(/assets/fonts/playfair-display-latin-wght-italic.woff2) format('woff2');unicode-range:U+0030-0039}
.mp{position:relative;isolation:isolate;margin:88px 0 64px;padding:0;text-align:center}
.mp>.j-cloud{z-index:-1}
.mp-c1{width:min(30vw,340px);left:-30%;top:330px;opacity:.34}
.mp-c2{width:min(36vw,420px);right:-20%;top:120px;background-image:url(/assets/img/clouds-2.webp);aspect-ratio:900/216;opacity:.28;animation-duration:55s;animation-delay:-18s}
.mp-c3{width:min(26vw,300px);right:-26%;bottom:-20px;opacity:.24;animation-duration:48s;animation-delay:-9s;transform:scaleX(-1)}

/* ---------- шапка ---------- */
.mp-eyebrow{display:flex;justify-content:center;align-items:center;gap:12px;margin:0 0 12px;font:600 12px/1.35 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--moon)}
.mp-eyebrow:before,.mp-eyebrow:after{content:'';flex:none;width:18px;height:18px;background:url(/assets/img/star-gold.webp) center/contain no-repeat;filter:drop-shadow(0 0 6px #f3d79e88)}
.mp-h{margin:0 0 12px;font:500 clamp(32px,4.6vw,50px)/1.1 var(--display);text-wrap:balance}
.mp-h em{font-style:italic;background:linear-gradient(90deg,#f3d79e,#ffe9c2 45%,#c9b4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.06em}
.mp-h:before,.mp-h:after{content:none!important;display:none!important}
.mp-lead{max-width:580px;margin:0 auto;color:#d8d0f0;font:italic 400 19px/1.5 var(--display);text-wrap:balance}

/* ---------- герой: ИИ-психолог ---------- */
.mp-psy{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:20px 44px;align-items:center;margin:40px 0 0;text-align:left}
.mp-orb{position:relative;isolation:isolate;aspect-ratio:1;display:grid;place-items:center}
.mp-orb:before{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:132%;aspect-ratio:1;transform:translate(-50%,-50%);background:url(/assets/img/goroskop-astrolabe-560.webp) center/contain no-repeat;mix-blend-mode:screen;opacity:.5;-webkit-mask:radial-gradient(closest-side,#000 58%,transparent);mask:radial-gradient(closest-side,#000 58%,transparent);animation:mp-spin 240s linear infinite}
.mp-orb:after{content:'';position:absolute;z-index:-1;inset:16%;border-radius:50%;background:radial-gradient(closest-side,#5fc9c066,#5fc9c000);filter:blur(16px)}
.mp-orb img{width:58%;height:auto;filter:drop-shadow(0 20px 40px #040210bb) drop-shadow(0 0 30px #5fc9c077);animation:mp-float 9s ease-in-out infinite}
.mp-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mp-arc-t{font:italic 400 25px var(--display);letter-spacing:.03em}
.mp-arc image{filter:drop-shadow(0 0 6px #ffe6a8cc)}
.mp-psy-h{margin:0 0 6px;font:500 clamp(34px,4.4vw,48px)/1.08 var(--display);background:linear-gradient(90deg,#9fe7df,#ecfffb 55%,#7fd6cc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.06em}
.mp-psy-h:before,.mp-psy-h:after{content:none!important;display:none!important}
.mp-psy-h span{font:inherit;color:inherit}
/* первая ступень лестницы — золотой строкой прямо над сравнением (PRICING_COPY.md, ступень 1) */
.mp-first{margin:14px 0 0;font:italic 400 21px/1.3 var(--display);color:#ffe9c2}
.mp-first:before{content:'';display:inline-block;width:16px;height:16px;margin-right:10px;vertical-align:-.05em;background:url(/assets/img/star-gold.webp) center/contain no-repeat;filter:drop-shadow(0 0 6px #f3d79e88)}
.mp-first b{font-style:normal;font-weight:500;color:#f3d88a}
/* сравнение цены — сетка с общими строками: подписи на одной линии, числа на общей базовой линии, звезда между ними (владелец 14.10) */
.mp-vs{display:grid;grid-template-columns:max-content 18px max-content;grid-template-rows:auto auto;column-gap:20px;row-gap:8px;margin:14px 0 16px;justify-content:start}
.mp-vs>span{display:grid;grid-row:1/span 2;grid-template-rows:subgrid;row-gap:8px}
.mp-vs-a{grid-column:1}.mp-vs-b{grid-column:3}
.mp-vs:before{content:'';grid-column:2;grid-row:2;align-self:center;width:18px;height:18px;background:url(/assets/img/star-gold.webp) center/contain no-repeat;filter:drop-shadow(0 0 8px #f3d79eaa)}
.mp-vs small{align-self:end;max-width:160px;font:600 11px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#aaa4c8}
.mp-vs-b small{color:#9fe7df}
.mp-vs b{align-self:last baseline;font-family:'Mp Num',var(--display);font-weight:500;line-height:1;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.mp-vs .rub{font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-style:normal;font-weight:500;font-size:.82em;padding-left:.02em}
.mp-vs-a b{font-size:34px;color:#cfc7ea}
.mp-vs-b b{font-size:52px;background:linear-gradient(90deg,#f3d79e,#ffe9c2 50%,#e3b465);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 18px #f3d79e55);padding-right:.04em}
.mp-vs-b .rub{-webkit-text-fill-color:#f3d88a;color:#f3d88a}
.mp-d{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mp-note{margin:0 0 4px;font:600 11.5px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#9fe7df}
/* кнопка-призыв с бликом, как на первых экранах знаков */
.mp .btn{position:relative;overflow:hidden}
.mp-go{gap:14px;min-height:56px;padding:16px 26px;font-size:16px}
.mp-go:after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,#ffffffaa,transparent);transform:skewX(-20deg);animation:mp-shine 4.5s ease-in-out infinite;pointer-events:none}
.mp-go svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.mp-go:hover svg{transform:translateX(4px)}

/* ---------- три бесплатные возможности ---------- */
.mp-grid{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 34px}
.mp-grid li{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0}
.mp-grid li:before{content:none}
.mp-grid img{width:128px;height:128px;object-fit:contain;margin-bottom:4px;filter:drop-shadow(0 14px 28px #040210aa) drop-shadow(0 0 24px #f3d79e33)}
.mp-grid b{font:500 24px/1.2 var(--display);color:var(--ink)}
.mp-grid span{max-width:250px;font-size:15px;line-height:1.5;color:#ddd5ef}
.mp-grid small{margin-top:2px;font:600 11.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--moon)}
.mp-grid span{flex:1 0 auto}
.mp-grid .btn{margin-top:14px}

/* ---------- цены: строка Playfair под орнаментом ---------- */
.mp-price{margin:60px auto 0;font:italic 400 21px/1.6 var(--display);color:#e4dcf7}
.mp-price>span{white-space:nowrap}
.mp-price:before{content:'';display:block;width:min(400px,80%);aspect-ratio:840/173;margin:0 auto 18px;background:url(/assets/img/divider-840.webp) center/contain no-repeat;opacity:.9}
.mp-price .rub{font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-style:normal;font-size:.85em}
.mp-price b{font-family:'Mp Num',var(--display);font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;font-style:normal;font-weight:500;color:#f3d88a;white-space:nowrap}
.mp-price span+span:before{content:'';display:inline-block;width:14px;height:14px;margin:0 14px;vertical-align:.05em;background:url(/assets/img/star-gold.webp) center/contain no-repeat}

@keyframes mp-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes mp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes mp-shine{0%,55%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.mp-orb:before,.mp-orb img,.mp-go:after{animation:none}}

/* ---------- планшет и телефон ---------- */
@media(max-width:760px){
 .mp-psy{grid-template-columns:1fr;justify-items:center;text-align:center;margin-top:28px}
 .mp-orb{width:min(300px,82vw)}
 .mp-vs{justify-content:center}
 .mp-vs small{text-align:center}
 .mp-first{text-align:center}
 .mp-grid{grid-template-columns:1fr;gap:48px;margin-top:52px}
}
@media(max-width:640px){
 .mp{margin:64px 0 48px}
 .mp>.j-cloud,.mp-arc image,.mp-eyebrow:before,.mp-eyebrow:after,.mp-price span+span:before{display:none}
 .mp-lead{font-size:18px}
 .mp-orb{width:min(270px,76vw)}
 .mp-arc-t{font-size:27px}
 .mp-vs{column-gap:12px;grid-template-columns:max-content 14px max-content;justify-content:center}
 .mp-vs:before{width:14px;height:14px}
 .mp-first{font-size:19px}
 .mp-vs small{font-size:10px;letter-spacing:.1em;max-width:132px}
 .mp-vs-a b{font-size:28px}
 .mp-vs-b b{font-size:42px}
 .mp-go{display:flex;justify-content:center;width:100%;max-width:340px;margin-left:auto;margin-right:auto}
 .mp-copy{width:100%}
 .mp-grid{gap:36px;margin-top:48px;max-width:420px;margin-left:auto;margin-right:auto}
 .mp-grid li{display:grid;grid-template-columns:92px minmax(0,1fr);column-gap:18px;row-gap:6px;align-items:start;justify-items:start;text-align:left}
 .mp-grid img{grid-row:1/span 4;width:92px;height:92px;margin:0}
 .mp-grid b{font-size:22px}
 .mp-grid small{font-size:10.5px;letter-spacing:.1em}
 .mp-grid span{max-width:none;font-size:14.5px}
 .mp-grid .btn{margin-top:6px;padding:12px 18px}
 .mp-price{margin-top:48px;font-size:19px}
 .mp-price>span{display:block}
}