/* Телефон (≤ 760 px): витрина как приложение. Разметка — #m в index.html, сцены — mobile/app.js.
   Две темы: Atelier (бумага, чернила, синий) и Sapphire (ночь, стекло, лайм). Десктоп не затронут.
   Иврит (dir=rtl): всё, что едет по горизонтали, умножается на --hr-dir (sapphire.tokens.css), начала и концы
   строк — логическими свойствами, чтобы подсветка стояла под своим пунктом, а линии росли от начала строки. */
#m{display:none}

#m{
  --m-bg:#f7f6f1;--m-card:#fdfcf9;--m-card2:#f1f0ea;--m-line:#e2e1da;--m-ink:#101214;--m-muted:#62666d;
  --m-brand:#315efb;--m-accent:#101214;--m-on-accent:#fff;--m-lime:#d2ff38;--m-mark:#dcf77f;
  --m-glass:rgba(247,246,241,.8);--m-glass-line:rgba(16,18,20,.08);
  --m-shadow:0 1px 0 rgba(16,18,20,.03),0 12px 32px rgba(16,18,20,.07);
  --m-ok:#1d6b3a;--m-ok-bg:#e3f3e7;--m-arc:#315efb;--m-note:#fdfcf9;
  --m-spring:cubic-bezier(.22,1.28,.36,1);--m-out:cubic-bezier(.16,1,.3,1);
  --m-top:calc(58px + env(safe-area-inset-top));--m-bottom:calc(88px + env(safe-area-inset-bottom));
  color:var(--m-ink);font-family:Rubik,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
[data-landing-theme="sapphire"] #m{
  --m-bg:#03182c;--m-card:rgba(13,58,98,.62);--m-card2:rgba(120,190,255,.09);--m-line:rgba(168,214,255,.17);
  --m-ink:#f5faff;--m-muted:#9ab6cf;--m-brand:#62bbff;--m-accent:#d2ff38;--m-on-accent:#122200;
  --m-glass:rgba(3,24,44,.66);--m-glass-line:rgba(168,214,255,.14);
  --m-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 40px rgba(0,8,24,.38);
  --m-ok:#a6ec82;--m-ok-bg:rgba(166,236,130,.13);--m-arc:#d2ff38;--m-note:rgba(11,50,90,.94);
}

@media (max-width:760px){
  #landing,#intro,#pricingDetailsModal{display:none!important}
  #m{display:block;position:relative;min-height:100svh;overflow-x:clip}
  /* Как у приложения: страница не болтается вбок и не отскакивает. */
  html,body{background:var(--m-bg-page,#f7f6f1)!important;overflow-x:hidden;overscroll-behavior:none;scroll-snap-type:none!important;scroll-behavior:auto!important}
  html.m-intro,html.m-intro body{overflow:hidden}
  html.m-intro .m-splash{display:grid}
  [data-landing-theme="sapphire"]{--m-bg-page:#03182c}
  body.m-lock{overflow:hidden}
  ::view-transition-old(root){animation:none}
  ::view-transition-new(root){animation:m-reveal .7s var(--m-out,ease) both}
  /* Новая тема ложится на старую обычным наложением, а не сложением яркостей (plus-lighter браузера):
     круг открывает её как есть, а наплыв при «уменьшить анимацию» — честный переход (1 − α)·старая + α·новая,
     без вспышки бумаги поверх ночи. */
  ::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
}
@keyframes m-reveal{from{clip-path:circle(0 at var(--vt-x,90%) var(--vt-y,4%))}to{clip-path:circle(160% at var(--vt-x,90%) var(--vt-y,4%))}}

/* Фон: бумага или ночное небо с лентами, чуть плывёт за прокруткой. */
#m::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--m-bg)}
[data-landing-theme="sapphire"] #m::before{
  background:linear-gradient(rgba(3,24,44,.5),rgba(3,24,44,.62)),radial-gradient(120% 60% at 80% 0%,rgba(0,107,255,.35),transparent 60%),
    radial-gradient(90% 50% at 0% 100%,rgba(0,180,255,.16),transparent 60%),
    url("/design-system/sapphire-ribbons.webp") 50% 20% / 300% auto no-repeat,#03182c}
#m>.m-screens{position:relative;z-index:1}
:where(#m) svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:where(#m) svg .m-fill{fill:currentColor;stroke:none}
:where(#m) a{color:inherit;text-decoration:none}
:where(#m) :is(h2,h3,p,ul,ol){margin:0;padding:0}
:where(#m) :is(ul,ol){list-style:none}
:where(#m) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.m-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── Заставка: с первого кадра, пока страница грузится ── */
.m-splash{position:fixed;inset:0;z-index:100;display:none;place-items:center;align-content:center;gap:26px;
  background:#f7f6f1;color:#101214;transition:transform .95s cubic-bezier(.65,0,.25,1),border-radius .95s}
[data-landing-theme="sapphire"] .m-splash{background:radial-gradient(90% 60% at 50% 42%,#0b4a86,#03182c 72%);color:#f5faff}
html.m-intro-out .m-splash{transform:translateY(-104%);border-radius:0 0 44px 44px}
.m-splash-logo{width:210px;height:auto;overflow:visible}
.m-splash-logo .sp-c{fill:#2348f5;opacity:0;animation:sp-corner .6s cubic-bezier(.22,1.28,.36,1) both}
[data-landing-theme="sapphire"] .m-splash-logo .sp-c{fill:#62bbff}
.sp-c1{--x:-46px;--y:-46px}.sp-c2{--x:46px;--y:-46px;animation-delay:.06s!important}.sp-c3{--x:-46px;--y:46px;animation-delay:.12s!important}.sp-c4{--x:46px;--y:46px;animation-delay:.18s!important}
@keyframes sp-corner{from{opacity:0;transform:translate(var(--x),var(--y)) scale(.6)}to{opacity:1;transform:none}}
.m-splash-logo .sp-t{fill:currentColor;opacity:0;animation:sp-rise .55s cubic-bezier(.16,1,.3,1) both}
.m-splash-logo .sp-hr{animation-delay:.4s}.m-splash-logo .sp-num{animation-delay:.6s}
@keyframes sp-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.m-splash-logo .sp-line{fill:#cfee5a;transform-box:fill-box;transform-origin:0 50%;animation:sp-line .6s cubic-bezier(.16,1,.3,1) .95s both}
[data-landing-theme="sapphire"] .m-splash-logo .sp-line{fill:#d2ff38}
@keyframes sp-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.m-splash-words{margin:0;display:flex;gap:.34em;font:600 21px/1.1 Rubik,system-ui,sans-serif;letter-spacing:-.03em}
.m-splash-words span{opacity:0;animation:sp-rise .6s cubic-bezier(.22,1.28,.36,1) both}
.m-splash-words span:nth-child(1){animation-delay:1.35s}
.m-splash-words span:nth-child(2){animation-delay:1.6s}
.m-splash-words span:nth-child(3){animation-delay:1.85s;color:#315efb}
[data-landing-theme="sapphire"] .m-splash-words span:nth-child(3){color:#62bbff}

/* ── Верхняя панель ───────────────────────────────────── */
.m-bar{position:fixed!important;top:0;left:0;right:0;z-index:20!important;height:var(--m-top);padding:env(safe-area-inset-top) 14px 0;display:flex;align-items:center;gap:8px;
  background:var(--m-glass);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);border-bottom:1px solid transparent}
/* Край прокрутки (08.10): когда под панелью едет содержимое, оно уходит под стекло мягкой тенью, а не
   обрезается линией. Ниже полоски прогресса. */
.m-bar::after{content:"";position:absolute;inset-inline:0;top:calc(100% + 1px);height:12px;pointer-events:none;background:linear-gradient(var(--m-glass),transparent);opacity:0;transition:opacity .3s}
.m-bar.is-scrolled::after{opacity:1}
.m-logo{display:flex;width:78px;flex:none}
.m-logo svg{width:78px;height:22px;stroke:none!important}
.m-logo-frame{fill:#2348f5}.m-logo-text{fill:currentColor}.m-logo-line{fill:var(--m-mark)}
[data-landing-theme="sapphire"] .m-logo-frame{fill:#62bbff}
[data-landing-theme="sapphire"] .m-logo-line{fill:#d2ff38}
.m-bar-title{flex:1;min-width:0;height:20px;overflow:hidden;text-align:center;font-size:13px;font-weight:600;letter-spacing:-.01em}
.m-bar-title span{display:block;transition:transform .45s var(--m-out),opacity .3s}
.m-bar-title span.is-out{transform:translateY(-100%);opacity:0}
.m-bar-title span.is-in{transform:translateY(100%);opacity:0;transition:none}
.m-round{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--m-line)!important;background:var(--m-card)!important;font-size:18px;transition:scale var(--hr-motion-duration-release,180ms) var(--hr-motion-easing-settle,cubic-bezier(.16,1,.3,1))}
/* Нажатие — на касании, отдельным свойством scale (токены; при «уменьшить анимацию» — 1 и притемнение). */
.m-round:active,.m-login:active,.m-btn:active,.m-tabs a:active,.m-stepper button:not(:disabled):active,.m-seg button:active{scale:var(--hr-press-scale,.97);transition-duration:var(--hr-motion-duration-press,90ms);transition-timing-function:ease-out}
.m-login{height:36px;padding:0 14px;display:grid;place-items:center;border-radius:999px;background:var(--m-accent);color:var(--m-on-accent)!important;font-size:13.5px;font-weight:600;transition:scale var(--hr-motion-duration-release,180ms) var(--hr-motion-easing-settle,cubic-bezier(.16,1,.3,1))}
/* Кнопки панели 36 px, а палец просит 44: невидимое поле по 4 px с каждой стороны (зазор между ними 8 px). */
.m-round,.m-login{position:relative}
.m-round::before,.m-login::before{content:"";position:absolute;inset:-4px}
.m-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--m-brand),var(--m-lime))}
[dir="rtl"] .m-progress{transform-origin:100% 50%;background:linear-gradient(270deg,var(--m-brand),var(--m-lime))}

/* ── Нижние вкладки ───────────────────────────────────── */
.m-tabs{position:fixed!important;z-index:20!important;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));height:64px;display:grid;grid-template-columns:repeat(5,1fr);padding:6px;border-radius:24px;
  background:var(--m-glass);-webkit-backdrop-filter:saturate(170%) blur(20px);backdrop-filter:saturate(170%) blur(20px);border:1px solid var(--m-glass-line);box-shadow:0 18px 40px rgba(0,0,0,.14)}
.m-tabs a{position:relative;z-index:1;display:grid;place-items:center;align-content:center;gap:3px;color:var(--m-muted)!important;font-size:10.5px;font-weight:500;letter-spacing:.01em;transition:color .3s,scale var(--hr-motion-duration-release,180ms) var(--hr-motion-easing-settle,cubic-bezier(.16,1,.3,1))}
.m-tabs a svg{font-size:22px}
.m-tabs a[aria-current="true"]{color:var(--m-ink)!important}
/* Подсветка вкладки садится без перелёта (пружина с критическим затуханием): отскок — только после броска. */
.m-tabs-pill{position:absolute;z-index:0;top:6px;bottom:6px;inset-inline-start:6px;width:calc((100% - 12px)/5);border-radius:18px;background:var(--m-card2);border:1px solid var(--m-line);
  transform:translateX(calc(var(--i,0) * 100% * var(--hr-dir,1)));transition:transform var(--hr-motion-duration-settle,500ms) var(--hr-motion-easing-settle,cubic-bezier(.16,1,.3,1))}
[data-landing-theme="sapphire"] .m-tabs-pill{background:rgba(210,255,56,.12);border-color:rgba(210,255,56,.3)}
[data-landing-theme="sapphire"] .m-tabs a[aria-current="true"]{color:#d2ff38!important}

/* ── Экраны ───────────────────────────────────────────── */
.m-screen{min-height:100svh;box-sizing:border-box;overflow-x:clip;padding:calc(var(--m-top) + 14px) 16px calc(var(--m-bottom) + 10px);display:flex;flex-direction:column;justify-content:center;gap:16px;}
.m-head{display:grid;gap:8px}
.m-num{font:500 10.5px/1 "Martian Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--m-brand)}
.m-head h2{font-size:31px;line-height:1.02;font-weight:600;letter-spacing:-.045em;text-wrap:balance}
.m-head p{font-size:.9375rem;line-height:1.45;color:var(--m-muted);max-width:34ch}
.m-stage{position:relative}
.m-card,.m-post,.m-cand,.m-list li,.m-step,.m-hire-row,.m-hire-card,.m-ppl-who,.m-tile,.m-hours,.m-know,.m-knob,.m-plan,.m-agency li,.m-my-next,.m-my-grid p,.m-my-toast,.m-note{
  background:var(--m-card);border:1px solid var(--m-line);border-radius:20px;box-shadow:var(--m-shadow)}
.m-ava{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:600;letter-spacing:.02em;background:linear-gradient(135deg,#dfe7ff,#c8d6ff);color:#1c2f86}
[data-landing-theme="sapphire"] .m-ava{background:linear-gradient(135deg,#2a79d6,#0d3e75);color:#eaf5ff}
.m-ava-lg{width:46px;height:46px;font-size:14px}
.m-pill{flex:none;height:26px;padding:0 10px;border-radius:999px;display:inline-grid;place-items:center;font-size:11.5px;font-weight:600;background:var(--m-card2);border:1px solid var(--m-line);transition:background .4s,color .4s,border-color .4s}
.m-pill-ok,.m-pill.is-hired{background:var(--m-ok-bg);color:var(--m-ok);border-color:transparent}
.m-more{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--m-brand)!important;padding:6px 0}
/* Стрелка «вперёд» смотрит по ходу чтения: в иврите — влево (scale), толчок при нажатии — туда же
   (translate стоит снаружи scale, поэтому множится на --hr-dir, а не переворачивается вместе со стрелкой).
   «Демо» с ▶ не зеркалится: знак воспроизведения от направления письма не зависит. */
[dir="rtl"] #m :is(.m-more,.m-btn-main) svg{scale:-1 1}
.m-more svg{transition:translate .2s}.m-more:active svg{translate:calc(3px * var(--hr-dir,1)) 0}
.m-btn{height:52px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:600;transition:scale var(--hr-motion-duration-release,180ms) var(--hr-motion-easing-settle,cubic-bezier(.16,1,.3,1));white-space:nowrap}
.m-btn svg{font-size:18px}
.m-btn-main{background:var(--m-accent);color:var(--m-on-accent)!important;box-shadow:0 10px 26px rgba(16,18,20,.18)}
[data-landing-theme="sapphire"] .m-btn-main{box-shadow:0 10px 30px rgba(210,255,56,.25)}
.m-btn-soft{background:var(--m-card);border:1px solid var(--m-line)}
.m-btn-wide{width:100%}
.m-cta-row{display:grid;grid-template-columns:1fr auto;gap:10px}

/* ── Главная ──────────────────────────────────────────── */
.m-hero{justify-content:flex-end;gap:18px}
.m-eyebrow{font:500 10.5px/1.5 "Martian Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--m-muted);max-width:30ch}
.m-hero-title{font-size:clamp(46px,14vw,60px);line-height:.94;font-weight:600;letter-spacing:-.058em}
.m-hero-title span{display:block;padding-bottom:.04em}
.m-hero-title span:nth-child(3){position:relative;width:max-content}
.m-hero-title span:nth-child(3)::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.16em;border-radius:9px;background:var(--m-mark);z-index:-1;transform-origin:0 50%;transform:scaleX(var(--u,1));transition:transform .9s var(--m-out) .5s}
[data-landing-theme="sapphire"] .m-hero-title span{background:linear-gradient(100deg,#f5faff 35%,#9ed8ff 50%,#f5faff 65%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
/* Блик проходит по строкам один раз, когда заголовок встал (08.10): бесконечный круг в 0,18 Гц ничего не объяснял. */
[data-landing-theme="sapphire"] #m-home.s1 .m-hero-title span{animation:m-sheen 1.6s var(--m-out) .9s 1}
[data-landing-theme="sapphire"] #m-home.s1 .m-hero-title span:nth-child(2){animation-delay:1.05s}
[data-landing-theme="sapphire"] #m-home.s1 .m-hero-title span:nth-child(3){animation-delay:1.2s}
[data-landing-theme="sapphire"] .m-hero-title span:nth-child(3)::after{background:#d2ff38;opacity:.9;height:.1em;bottom:-.02em}
@keyframes m-sheen{from{background-position:100% 0}to{background-position:-200% 0}}
.m-lead{font-size:17px;font-weight:500;letter-spacing:var(--hr-font-tracking-body,0)}
.m-feed{position:relative;height:124px}
.m-note{background:var(--m-note)!important;position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:36px 1fr;gap:11px;padding:12px 13px;border-radius:20px;
  transform-origin:50% 0;transition:transform .7s var(--m-spring),opacity .5s,filter .5s;opacity:0;transform:translateY(-26px) scale(1.03)}
.m-note.p0{opacity:1;transform:none;z-index:3}
.m-note.p1{opacity:.62;transform:translateY(13px) scale(.94);z-index:2;filter:saturate(.7)}
.m-note.p2{opacity:.3;transform:translateY(24px) scale(.88);z-index:1;filter:saturate(.5)}
.m-note.gone{opacity:0;transform:translateY(32px) scale(.82);z-index:0}
.m-note-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:19px;color:#fff}
.m-ico-recruit{background:linear-gradient(135deg,#4d7bff,#2348f5)}
.m-ico-hire{background:linear-gradient(135deg,#1fb66a,#138a4f)}
.m-ico-people{background:linear-gradient(135deg,#ff9d3d,#f06d1b)}
.m-note-app{display:flex;justify-content:space-between;font:500 9.5px/1.2 "Martian Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--m-muted)}
.m-note-title{margin-top:3px!important;font-size:14.5px;font-weight:600;letter-spacing:var(--hr-font-tracking-body,0)}
.m-note-body{margin-top:2px!important;font-size:12.8px;line-height:1.35;color:var(--m-muted)}
.m-fine{font-size:12px;color:var(--m-muted);text-align:center}
.m-cue{align-self:center;width:22px;height:34px;border-radius:12px;border:1.5px solid var(--m-line);display:grid;justify-items:center;padding-top:6px;box-sizing:border-box}
.m-cue i{width:4px;height:8px;border-radius:2px;background:var(--m-muted);animation:m-cue 1.8s var(--m-out) infinite}
/* Подсказка «листай» нужна до первой прокрутки, дальше стоит. */
html.m-scrolled .m-cue i{animation:none;opacity:.6}
@keyframes m-cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}

/* ── Recruit: пост → кандидат ─────────────────────────── */
.m-rec{display:grid;gap:10px}
.m-post,.m-cand{grid-area:1/1;padding:14px;border-radius:20px}
.m-post{position:relative;overflow:hidden;transition:opacity .5s,transform .7s var(--m-out),filter .5s}
.m-post-group{font:500 9.5px/1.2 "Martian Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--m-muted)}
.m-post-who{display:flex;gap:10px;align-items:center;margin:10px 0 8px}
.m-post-who b,.m-cand b,.m-list b,.m-hire-row b,.m-hire-head b,.m-ppl-who b,.m-my-toast b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.m-post-who small,.m-cand small,.m-list small,.m-hire-row small,.m-hire-head small,.m-ppl-who small,.m-my-toast small{display:block;font-size:12.5px;color:var(--m-muted);margin-top:1px}
.m-post-text{font-size:15px;line-height:1.45}
.m-post-text mark{background:linear-gradient(var(--m-mark),var(--m-mark)) 0 88%/0% 38% no-repeat;color:inherit;border-radius:3px;transition:background-size .5s var(--m-out)}
[data-landing-theme="sapphire"] .m-post-text mark{background-image:linear-gradient(rgba(210,255,56,.45),rgba(210,255,56,.45))}
.m-scan{position:absolute;top:0;bottom:0;inset-inline-start:0;width:30%;background:linear-gradient(90deg,transparent,rgba(49,94,251,.22),transparent);opacity:0;translate:calc(-100% * var(--hr-dir,1)) 0}
.m-cand{display:grid;gap:12px;opacity:0;transform:translateY(18px) scale(.97);transition:opacity .5s,transform .8s var(--m-spring)}
.m-cand-top{display:flex;align-items:center;gap:10px}
.m-cand-top>div{flex:1;min-width:0}
.m-score{position:relative;width:46px;height:46px;display:grid;place-items:center}
.m-score svg{position:absolute;inset:0;width:46px;height:46px;transform:rotate(-90deg)}
.m-score circle{stroke:var(--m-line);stroke-width:3.2}
.m-score .m-score-arc{stroke:var(--m-arc);stroke-dasharray:119.4;stroke-dashoffset:119.4;transition:stroke-dashoffset 1.2s var(--m-out)}
.m-score b{font-size:14px!important;font-variant-numeric:tabular-nums}
.m-chips{display:flex;flex-wrap:wrap;gap:6px}
.m-chips span{font-size:12px;font-weight:500;padding:6px 10px;border-radius:999px;background:var(--m-card2);border:1px solid var(--m-line);opacity:0;transform:scale(.7);transition:opacity .3s,transform .5s var(--m-spring)}
.m-list{display:grid;gap:8px}
.m-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;opacity:0;transform:translateX(calc(40px * var(--hr-dir,1)));transition:opacity .4s,transform .6s var(--m-spring)}
.m-list li div{flex:1}
.m-list em{font-style:normal;font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;color:var(--m-brand)}
.m-list .m-ava{width:32px;height:32px;font-size:11px}
#m-recruit.s2 .m-scan{animation:m-scan 1.1s var(--m-out) forwards}
#m-recruit.s2 .m-post-text mark{background-size:100% 38%}
#m-recruit.s2 .m-post-text mark:nth-of-type(2){transition-delay:.2s}
#m-recruit.s2 .m-post-text mark:nth-of-type(3){transition-delay:.4s}
#m-recruit.s2 .m-post-text mark:nth-of-type(4){transition-delay:.6s}
/* Сдвиг в долях своей ширины (30 % поста): от −30 % до 110 % поста — без пересчёта раскладки на кадре. */
@keyframes m-scan{0%{translate:calc(-100% * var(--hr-dir,1)) 0;opacity:1}100%{translate:calc(366.67% * var(--hr-dir,1)) 0;opacity:1}}
#m-recruit.s3 .m-post{opacity:0;transform:translateY(-14px) scale(.96);filter:blur(4px)}
#m-recruit.s3 .m-cand{opacity:1;transform:none}
#m-recruit.s3 .m-chips span{opacity:1;transform:none}
#m-recruit.s3 .m-chips span:nth-child(2){transition-delay:.1s}
#m-recruit.s3 .m-chips span:nth-child(3){transition-delay:.2s}
#m-recruit.s3 .m-chips span:nth-child(4){transition-delay:.3s}
#m-recruit.s3 .m-score-arc{stroke-dashoffset:7.2}
#m-recruit.s4 .m-list li{opacity:1;transform:none}
#m-recruit.s4 .m-list li:nth-child(2){transition-delay:.12s}
#m-recruit.s4 .m-list li:nth-child(3){transition-delay:.24s}

/* ── Шаги: листаются вбок ─────────────────────────────── */
.m-swipe{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 8px;scrollbar-width:none;overscroll-behavior-x:contain}
.m-swipe::-webkit-scrollbar{display:none}
.m-step{flex:0 0 82%;scroll-snap-align:center;padding:18px;border-radius:24px;display:grid;gap:10px;align-content:start;opacity:0;transform:translateX(calc(60px * var(--hr-dir,1)));transition:opacity .5s,transform .8s var(--m-spring)}
#m-start.s1 .m-step{opacity:1;transform:none}
#m-start.s1 .m-step:nth-child(2){transition-delay:.1s}
#m-start.s1 .m-step:nth-child(3){transition-delay:.2s}
.m-step-n{font-size:44px;font-weight:600;letter-spacing:-.06em;line-height:1;color:var(--m-brand)}
.m-chip-time{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:5px 10px;border-radius:999px;background:var(--m-card2);border:1px solid var(--m-line)}
.m-step h3{font-size:20px;font-weight:600;letter-spacing:var(--hr-font-tracking-subhead,-.015em)}
.m-step p{font-size:14px;line-height:1.45;color:var(--m-muted)}
.m-step-art{margin-top:4px;min-height:52px;border-radius:16px;background:var(--m-card2);border:1px dashed var(--m-line);display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:13px;font-weight:500}
.m-art-google span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#4285f4;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.15)}
/* Мигает, только пока экран шагов на виду. */
.m-art-ext i{width:12px;height:12px;border-radius:50%;background:var(--m-brand);opacity:.3;animation:m-blink 1.2s infinite paused}
#m-start.is-live .m-art-ext i{animation-play-state:running}
.m-art-ext i:nth-child(2){animation-delay:.2s}.m-art-ext i:nth-child(3){animation-delay:.4s}
@keyframes m-blink{50%{opacity:1}}
.m-art-groups{flex-wrap:wrap;gap:6px}
.m-art-groups span{padding:5px 9px;border-radius:999px;background:var(--m-card);border:1px solid var(--m-line);font-size:12px}
.m-art-wa{color:#1a9a55}.m-art-wa svg{font-size:20px}
.m-dots{display:flex;justify-content:center;gap:6px}
.m-dots i{width:6px;height:6px;border-radius:3px;background:var(--m-line);transition:width .4s var(--hr-motion-easing-settle,cubic-bezier(.16,1,.3,1)),background .3s}
.m-dots i.on{width:20px;background:var(--m-brand)}

/* ── Hire: строка раскрывается в карточку ─────────────── */
.m-hire{display:grid}
.m-hire-row,.m-hire-card{grid-area:1/1}
.m-hire-row{align-self:start;position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;padding:12px;border-radius:20px;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .6s var(--m-spring)}
.m-hire-row>div{flex:1}
.m-tap{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;background:var(--m-brand);opacity:0}
.m-hire-card{padding:12px;border-radius:20px;display:grid;gap:12px;clip-path:inset(0 0 calc(100% - 66px) 0 round 20px);opacity:0;transition:clip-path .9s var(--m-out),opacity .2s}
.m-hire-head{display:flex;align-items:center;gap:10px}
.m-hire-head>div{flex:1}
.m-bubble{justify-self:start;max-width:88%;padding:10px 12px;border-radius:18px 18px 18px 6px;background:#dcf8c6;color:#0f2d17;display:grid;gap:6px;opacity:0;transform:translateY(10px) scale(.96);transform-origin:0 100%;transition:opacity .3s,transform .5s var(--m-spring)}
[data-landing-theme="sapphire"] .m-bubble{background:#0f5c3a;color:#e7ffef}
.m-bubble-app{display:flex;align-items:center;gap:6px;font:600 10px/1 "Martian Mono",monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.m-bubble-text{font-size:14px;line-height:1.4;min-height:4.2em}
.m-bubble-file{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.m-bubble-file span{margin-left:auto;font-weight:500;font-size:11px;opacity:0;transition:opacity .3s;color:#1d7fd6}
[data-landing-theme="sapphire"] .m-bubble-file span{color:#7fd0ff}
.m-track{display:grid;gap:2px;padding:0 4px}
.m-track li{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:7px 0;font-size:14px;opacity:.35;transition:opacity .4s}
.m-track li i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--m-line);font-size:14px;color:transparent;transition:background .4s,border-color .4s,color .4s,transform .5s var(--m-spring)}
.m-track li b{font-weight:500}
.m-track li time{font-size:12px;color:var(--m-muted);font-variant-numeric:tabular-nums}
.m-track li.on{opacity:1}
.m-track li.on i{background:var(--m-ok);border-color:var(--m-ok);color:var(--m-bg);transform:scale(1.08)}
#m-hire.s1 .m-hire-row{opacity:1;transform:none}
#m-hire.s2 .m-tap{animation:m-tap .6s ease-out forwards}
@keyframes m-tap{0%{opacity:.3;transform:scale(.2)}100%{opacity:0;transform:scale(9)}}
#m-hire.s3 .m-hire-row{opacity:0;transition-duration:.15s}
#m-hire.s3 .m-hire-card{opacity:1;clip-path:inset(0 0 0 0 round 20px)}
#m-hire.s4 .m-bubble{opacity:1;transform:none}
#m-hire.s5 .m-bubble-file span{opacity:1}

/* ── Your People ──────────────────────────────────────── */
.m-ppl{display:grid;gap:10px}
.m-ppl-who{display:flex;align-items:center;gap:10px;padding:12px;border-radius:20px}
.m-ppl-who>div{flex:1}
.m-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-tile{padding:12px 10px;border-radius:18px;display:grid;gap:6px;justify-items:start;align-content:space-between;min-height:92px;box-sizing:border-box}
.m-tile small{font-size:11.5px;color:var(--m-muted);line-height:1.2}
.m-tile>b,.m-big{font-size:20px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.m-ring{position:relative;width:44px;height:44px;display:grid;place-items:center}
.m-ring svg{position:absolute;inset:0;width:44px;height:44px;transform:rotate(-90deg)}
.m-ring circle{stroke:var(--m-line);stroke-width:3.4}
.m-ring .m-ring-arc{stroke:var(--m-arc);stroke-dasharray:94.25;stroke-dashoffset:calc(94.25 * (1 - var(--k)));transition:stroke-dashoffset 1.2s var(--m-out)}
.m-ring b{font-size:11.5px;font-weight:600}
.m-bar-k{width:100%;height:8px;border-radius:4px;background:var(--m-card2);border:1px solid var(--m-line);overflow:hidden;margin-top:8px}
.m-bar-k i{display:block;height:100%;width:100%;background:var(--m-arc);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.2s var(--m-out)}
[dir="rtl"] .m-bar-k i{transform-origin:100% 50%}
.m-hours{padding:14px;border-radius:20px;display:grid;gap:10px}
.m-hours-top{display:flex;justify-content:space-between;align-items:start}
.m-hours-top small{font-size:12px;color:var(--m-muted)}
.m-hours-top b{display:block;font-size:30px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.m-chart{position:relative;height:90px;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;margin-bottom:18px}
.m-chart span{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;font-size:0}
.m-chart span::before{content:"";width:62%;height:calc(var(--h) * 100%);border-radius:8px 8px 4px 4px;background:linear-gradient(var(--m-brand),color-mix(in srgb,var(--m-brand) 55%,transparent));transform-origin:50% 100%;transform:scaleY(0);transition:transform .8s var(--m-spring),opacity .6s,border-radius .6s}
.m-chart span::after{content:attr(data-d);position:absolute;bottom:-18px;font-size:10.5px;color:var(--m-muted)}
.m-chart-line{position:absolute;inset:0;width:100%!important;height:100%!important;z-index:2;overflow:visible}
.m-chart-line polyline{stroke:var(--m-arc)!important;stroke-width:3!important;fill:none;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.2s var(--m-out)}
.m-hours-foot{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;margin-top:14px!important}
.m-hours-foot i{margin-left:auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--m-ok);color:var(--m-bg);font-size:13px;transform:scale(0);transition:transform .5s var(--m-spring)}
.m-ppl-who,.m-tile,.m-hours{opacity:0;transform:translateY(18px);transition:opacity .45s,transform .7s var(--m-spring)}
#m-people.s1 .m-ppl-who,#m-people.s1 .m-tile{opacity:1;transform:none}
#m-people.s1 .m-tile:nth-child(2){transition-delay:.08s}
#m-people.s1 .m-tile:nth-child(3){transition-delay:.16s}
#m-people.s1 .m-ring{--k:.8}
#m-people.s1 .m-bar-k i{transform:scaleX(.55)}
#m-people.s2 .m-hours{opacity:1;transform:none}
#m-people.s2 .m-chart span::before{transform:scaleY(1)}
#m-people.s2 .m-chart span:nth-child(3)::before{transition-delay:.06s}
#m-people.s2 .m-chart span:nth-child(4)::before{transition-delay:.12s}
#m-people.s2 .m-chart span:nth-child(5)::before{transition-delay:.18s}
#m-people.s2 .m-chart span:nth-child(6)::before{transition-delay:.24s}
#m-people.s3 .m-chart span::before{opacity:.28}
#m-people.s3 .m-chart-line polyline{stroke-dashoffset:0}
#m-people.s4 .m-hours-foot i{transform:scale(1)}

/* ── Знания: три вкладки ──────────────────────────────── */
.m-seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:14px;background:var(--m-card2);border:1px solid var(--m-line)}
.m-seg button{position:relative;z-index:1;height:34px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--m-muted)!important;transition:color .3s,scale var(--hr-motion-duration-release,180ms) var(--hr-motion-easing-settle,cubic-bezier(.16,1,.3,1))}
.m-seg button[aria-selected="true"]{color:var(--m-ink)!important;font-weight:600}
.m-seg-pill{position:absolute;top:4px;bottom:4px;inset-inline-start:4px;width:calc((100% - 8px)/var(--n,3));border-radius:10px;background:var(--m-card);box-shadow:0 2px 8px rgba(0,0,0,.08);transform:translateX(calc(var(--i,0) * 100% * var(--hr-dir,1)));transition:transform var(--hr-motion-duration-settle,500ms) var(--hr-motion-easing-settle,cubic-bezier(.16,1,.3,1))}
[data-landing-theme="sapphire"] .m-seg-pill{background:rgba(98,187,255,.2);border:1px solid rgba(98,187,255,.3);box-sizing:border-box}
.m-seg-aud{--n:2}
.m-know{min-height:290px;padding:14px;border-radius:22px;box-sizing:border-box;overflow:hidden}
.m-know .m-panel{position:absolute;inset:14px 14px auto;display:grid;gap:10px;align-content:start;opacity:0;transform:translateX(calc(24px * var(--hr-dir,1)));pointer-events:none;transition:opacity .35s,transform .5s var(--m-out)}
.m-know .m-panel.is-on{opacity:1;transform:none;pointer-events:auto}
.m-know .m-panel.is-left{transform:translateX(calc(-24px * var(--hr-dir,1)))}
.m-q{justify-self:end;max-width:86%;padding:10px 13px;border-radius:18px 18px 6px 18px;background:var(--m-accent);color:var(--m-on-accent);font-size:14px;line-height:1.4}
.m-caret{display:inline-block;width:2px;height:1em;vertical-align:-2px;margin-left:1px;background:currentColor;animation:m-caret 1s steps(1) infinite}
@keyframes m-caret{50%{opacity:0}}
.m-typing{display:none;gap:4px;padding:10px 12px;border-radius:14px;background:var(--m-card2);justify-self:start}
.m-typing.on{display:flex}
.m-typing i{width:6px;height:6px;border-radius:50%;background:var(--m-muted);animation:m-dot 1s infinite}
.m-typing i:nth-child(2){animation-delay:.15s}.m-typing i:nth-child(3){animation-delay:.3s}
@keyframes m-dot{30%{transform:translateY(-4px)}}
.m-a{display:grid;gap:7px}
.m-a p{font-size:13.5px;line-height:1.4;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .5s var(--m-out)}
.m-a p b{display:block;font:600 9.5px/1.4 "Martian Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--m-brand)}
.m-a p.in{opacity:1;transform:none}
.m-src{font-size:12px!important;color:var(--m-muted)}
.m-search{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-radius:12px;background:var(--m-card2);border:1px solid var(--m-line);font-size:14.5px}
.m-search svg{color:var(--m-muted)}
.m-hits{display:grid;gap:8px}
.m-hits li{padding:10px 12px;border-radius:12px;border:1px solid var(--m-line);opacity:0;transform:translateY(10px);transition:opacity .3s,transform .5s var(--m-spring)}
.m-hits li.in{opacity:1;transform:none}
.m-hits b{display:block;font-size:14px;font-weight:600}.m-hits small{font-size:12px;color:var(--m-muted)}
.m-calc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m-calc p{padding:12px;border-radius:14px;background:var(--m-card2);display:grid;gap:4px}
.m-calc small{font-size:12px;color:var(--m-muted)}
.m-calc b{font-size:19px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.m-calc-net{background:var(--m-accent)!important;color:var(--m-on-accent)}
.m-calc-net small{color:inherit;opacity:.7}
.m-calc-rows{display:grid;gap:2px}
.m-calc-rows li{display:flex;justify-content:space-between;padding:8px 2px;font-size:13px;border-bottom:1px solid var(--m-line);opacity:0;transition:opacity .4s}
.m-calc-rows li.in{opacity:1}
.m-calc-rows span{color:var(--m-muted)}

/* ── Путь человека ────────────────────────────────────── */
.m-life{position:relative;display:grid;gap:14px;padding-inline-start:34px!important}
.m-life::before{content:"";position:absolute;inset-inline-start:11px;top:6px;bottom:6px;width:2px;border-radius:1px;background:linear-gradient(var(--m-brand),var(--m-lime));transform-origin:50% 0;transform:scaleY(0);transition:transform 1.4s var(--m-out)}
.m-life li{position:relative;opacity:0;transform:translateX(calc(16px * var(--hr-dir,1)));transition:opacity .4s,transform .6s var(--m-spring)}
.m-life li::before{content:"";position:absolute;inset-inline-start:-28px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--m-bg);border:2px solid var(--m-brand)}
.m-life time{font:500 10.5px/1 "Martian Mono",monospace;letter-spacing:.12em;color:var(--m-brand)}
.m-life b{display:block;margin-top:4px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.m-life small{display:block;font-size:13.5px;color:var(--m-muted)}
.m-life::after{content:"";position:absolute;inset-inline-start:8px;top:0;width:8px;height:8px;border-radius:50%;background:var(--m-lime);box-shadow:0 0 0 4px color-mix(in srgb,var(--m-lime) 30%,transparent),0 0 18px var(--m-lime);opacity:0}
#m-journey.s1 .m-life::before{transform:scaleY(1)}
#m-journey.s1 .m-life li{opacity:1;transform:none}
#m-journey.s1 .m-life li:nth-child(2){transition-delay:.25s}
#m-journey.s1 .m-life li:nth-child(3){transition-delay:.5s}
#m-journey.s1 .m-life li:nth-child(4){transition-delay:.75s}
/* Импульс бежит, только пока экран на виду; сдвигом translate на высоту линии (--life-h ставит app.js). */
#m-journey.is-live.s2 .m-life::after{animation:m-pulse 3.2s ease-in-out infinite}
@keyframes m-pulse{0%{translate:0 0;opacity:0}10%{opacity:1}90%{opacity:1}100%{translate:0 calc(var(--life-h,8px) - 8px);opacity:0}}
.m-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-stats p{padding:12px 10px;border-radius:16px;border:1px solid var(--m-line);display:grid;gap:4px;align-content:start}
.m-stats b{font-size:26px;font-weight:600;letter-spacing:-.05em}
.m-stats small{font-size:11.5px;line-height:1.3;color:var(--m-muted)}

/* ── My HR0110 ────────────────────────────────────────── */
.m-my{display:grid;gap:10px;padding:16px;border-radius:30px;border:1px solid var(--m-line);background:linear-gradient(160deg,var(--m-card2),transparent 60%)}
.m-my-hi small{display:block;font-size:13px;color:var(--m-muted)}
.m-my-hi b{display:block;font-size:26px;font-weight:600;letter-spacing:-.04em}
.m-my-next{padding:14px;border-radius:18px;display:grid;gap:3px;background:var(--m-accent)!important;color:var(--m-on-accent);border:0!important}
.m-my-next small{font:500 9.5px/1.3 "Martian Mono",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.m-my-next b{font-size:18px;font-weight:600;letter-spacing:-.02em}
.m-my-next span{font-size:13px;opacity:.75}
.m-my-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m-my-grid p{display:flex;align-items:center;gap:8px;padding:12px;border-radius:14px;font-size:13.5px;font-weight:500}
.m-my-grid svg{font-size:18px;color:var(--m-brand)}
.m-my-toast{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:18px}
.m-my-toast>div{flex:1}
.m-my-toast .m-ava{width:34px;height:34px;font-size:11px}
.m-my-hi,.m-my-next,.m-my-grid p{opacity:0;transform:translateY(14px);transition:opacity .4s,transform .6s var(--m-spring)}
.m-my-toast{opacity:0;transform:translateY(-30px) scale(.95);transition:opacity .4s,transform .7s var(--m-spring)}
#m-my.s1 :is(.m-my-hi,.m-my-next,.m-my-grid p){opacity:1;transform:none}
#m-my.s1 .m-my-next{transition-delay:.08s}
#m-my.s1 .m-my-grid p:nth-child(1){transition-delay:.16s}
#m-my.s1 .m-my-grid p:nth-child(2){transition-delay:.22s}
#m-my.s1 .m-my-grid p:nth-child(3){transition-delay:.28s}
#m-my.s1 .m-my-grid p:nth-child(4){transition-delay:.34s}
#m-my.s2 .m-my-toast{opacity:1;transform:none}

/* ── Тарифы ───────────────────────────────────────────── */
#m-pricing>.m-panel{display:none;gap:12px}
#m-pricing>.m-panel.is-on{display:grid;animation:m-fade .45s var(--m-out)}
@keyframes m-fade{from{opacity:0;transform:translateY(10px)}}
.m-knobs{display:grid;gap:8px}
.m-knob{display:grid;gap:10px;padding:12px 14px;border-radius:18px}
.m-knob>span{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px}
.m-knob small{grid-column:1/-1;font-size:12px;color:var(--m-muted)}
.m-knob b{font-size:28px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.m-knob em{font-style:normal;font-size:12.5px;color:var(--m-muted);justify-self:end}
.m-knob-seats{grid-template-columns:1fr auto;align-items:center}
.m-knob-seats>span{grid-template-columns:1fr}
.m-knob-seats em{justify-self:start}
.m-knob input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0}
.m-knob input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--m-brand) var(--fill,30%),var(--m-line) var(--fill,30%))}
.m-knob input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--m-brand) var(--fill,30%),var(--m-line) var(--fill,30%))}
/* В иврите ползунок идёт справа налево — заливка растёт оттуда же, за пальцем. */
[dir="rtl"] .m-knob input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(270deg,var(--m-brand) var(--fill,30%),var(--m-line) var(--fill,30%))}
[dir="rtl"] .m-knob input[type=range]::-moz-range-track{background:linear-gradient(270deg,var(--m-brand) var(--fill,30%),var(--m-line) var(--fill,30%))}
.m-knob input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 8px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.04)}
.m-knob input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.m-stepper{display:flex;align-items:center;gap:4px;padding:4px;border-radius:14px;background:var(--m-card2);border:1px solid var(--m-line)}
.m-stepper button{width:38px;height:38px;border-radius:10px;font-size:22px!important;line-height:1;background:var(--m-card)!important;transition:scale var(--hr-motion-duration-release,180ms) var(--hr-motion-easing-settle,cubic-bezier(.16,1,.3,1))}
.m-stepper button:disabled{opacity:.35}
.m-stepper b{min-width:34px;text-align:center;font-size:20px!important}
.m-plans{padding-bottom:6px;min-height:392px;box-sizing:border-box}
.m-plan{flex:0 0 78%;scroll-snap-align:center;padding:16px;border-radius:24px;display:grid;gap:8px;align-content:start;position:relative;box-sizing:border-box}
.m-plan.is-hot{border-color:var(--m-brand)}
[data-landing-theme="sapphire"] .m-plan.is-hot{border-color:rgba(210,255,56,.55);box-shadow:var(--m-shadow),0 0 0 1px rgba(210,255,56,.25)}
.m-plan-tag{position:absolute;top:14px;inset-inline-end:14px;font:600 9.5px/1 "Martian Mono",monospace;letter-spacing:.1em;text-transform:uppercase;padding:6px 8px;border-radius:999px;background:var(--m-brand);color:#fff}
[data-landing-theme="sapphire"] .m-plan-tag{background:#d2ff38;color:#122200}
.m-plan h3{font-size:15px;font-weight:600;color:var(--m-muted)}
.m-plan-price{display:flex;align-items:baseline;gap:6px}
.m-plan-price b{font-size:38px;font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:1}
.m-plan-price small{font-size:12.5px;color:var(--m-muted)}
.m-plan-extra{font-size:12px;color:var(--m-muted);min-height:1.2em}
.m-plan p{font-size:13.5px;line-height:1.4}
.m-plan ul{display:grid;gap:6px;margin-top:4px!important}
.m-plan li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding-top:6px;border-top:1px solid var(--m-line)}
.m-plan li span{color:var(--m-muted)}
.m-plan .m-btn{height:44px;font-size:14.5px;margin-top:6px}
.m-plans-wait{font-size:14px;color:var(--m-muted);padding:20px 0}
/* Текущий тариф — тот, что в центре; соседние притушены и встают в центр по касанию (владелец 09.10). */
.m-plans .m-plan{transition:opacity .3s ease,scale var(--hr-motion-duration-release,180ms) var(--hr-motion-easing-settle,cubic-bezier(.16,1,.3,1))}
.m-plans .m-plan:not(.is-current){opacity:.6;cursor:pointer}
.m-plans .m-plan:not(.is-current):active{scale:var(--hr-press-scale-card,.985);transition-duration:var(--hr-motion-duration-press,90ms)}
/* Точки тоже нажимаются: поле касания шире самой точки. */
.m-dots i{position:relative;cursor:pointer}
.m-dots i::before{content:"";position:absolute;inset:-12px -3px}
.m-agency{display:grid;gap:8px}
.m-agency li{padding:14px;border-radius:18px}
.m-agency b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em}
.m-agency small{display:block;font-size:13px;line-height:1.4;color:var(--m-muted);margin-top:3px}
/* Вид агентства выбирается касанием: выбранный — в рамке цвета бренда, как «Popular» у тарифов. */
.m-agency li{position:relative;cursor:pointer;transition:border-color .3s,box-shadow .3s,scale var(--hr-motion-duration-release,180ms) var(--hr-motion-easing-settle,cubic-bezier(.16,1,.3,1))}
.m-agency li:active{scale:var(--hr-press-scale-card,.985);transition-duration:var(--hr-motion-duration-press,90ms)}
.m-agency li:focus-visible{outline:2px solid var(--m-brand);outline-offset:2px}
.m-agency li.is-picked{border-color:var(--m-brand);box-shadow:var(--m-shadow),0 0 0 1px var(--m-brand)}
[data-landing-theme="sapphire"] .m-agency li.is-picked{border-color:rgba(210,255,56,.55);box-shadow:var(--m-shadow),0 0 0 1px rgba(210,255,56,.25)}
.m-agency li.is-picked::after{content:"";position:absolute;top:14px;inset-inline-end:14px;width:18px;height:18px;border-radius:50%;background:var(--m-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
[data-landing-theme="sapphire"] .m-agency li.is-picked::after{background-color:#d2ff38;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23122200' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.m-agency li b{padding-inline-end:26px}

/* ── Финал ────────────────────────────────────────────── */
.m-final{align-items:center;text-align:center;gap:14px}
.m-mark{width:170px;height:170px}
.m-final-title{font-size:40px;line-height:.98;font-weight:600;letter-spacing:-.055em}
.m-final-sub{font-size:15px;line-height:1.45;color:var(--m-muted);max-width:30ch}
.m-final .m-cta-row{width:100%}
.m-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:12px;color:var(--m-muted);margin-top:8px!important}
.m-final-title,.m-final-sub,.m-final .m-cta-row{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .8s var(--m-spring)}
#m-final.s1 :is(.m-final-title,.m-final-sub,.m-cta-row){opacity:1;transform:none}
#m-final.s1 .m-final-sub{transition-delay:.1s}
#m-final.s1 .m-cta-row{transition-delay:.2s}

/* ── Главная: заголовок ───────────────────────────────── */
.mjs .m-hero-title span{clip-path:inset(0 0 100% 0);transform:translateY(.45em);transition:clip-path .9s var(--m-out),transform .9s var(--m-out)}
.mjs .m-hero-title span:nth-child(3){--u:0}
.mjs .m-hero :is(.m-eyebrow,.m-lead,.m-cta-row,.m-fine,.m-cue){opacity:0;transform:translateY(12px);transition:opacity .5s,transform .7s var(--m-out)}
#m-home.s1 .m-hero-title span{clip-path:inset(0 0 -10% 0);transform:none}
#m-home.s1 .m-hero-title span:nth-child(2){transition-delay:.1s}
#m-home.s1 .m-hero-title span:nth-child(3){transition-delay:.2s;--u:1}
#m-home.s1 :is(.m-eyebrow,.m-lead,.m-cta-row,.m-fine,.m-cue){opacity:1;transform:none}
#m-home.s1 .m-lead{transition-delay:.3s}
#m-home.s1 .m-cta-row{transition-delay:.45s}
#m-home.s1 .m-fine,#m-home.s1 .m-cue{transition-delay:.55s}

/* Без JS и при «уменьшить анимацию» — всё на месте сразу. */
html:not(.mjs) #m :is(.m-cand,.m-list li,.m-step,.m-hire-card,.m-bubble,.m-ppl-who,.m-tile,.m-hours,.m-a p,.m-hits li,.m-calc-rows li,.m-life li,.m-my-hi,.m-my-next,.m-my-grid p,.m-my-toast,.m-final-title,.m-final-sub,.m-final .m-cta-row,.m-chips span){opacity:1;transform:none;clip-path:none}
html:not(.mjs) #m .m-post,html:not(.mjs) #m .m-hire-row{display:none}
html:not(.mjs) #m .m-note{position:relative;opacity:1;transform:none;margin-bottom:8px}
html:not(.mjs) #m .m-feed{height:auto}
html:not(.mjs) #m .m-track li{opacity:1}

/* ── Материалы: без прозрачности — сплошные, при повышенном контрасте — с явной границей ── */
@media (prefers-reduced-transparency:reduce){
  #m{--m-glass:var(--m-bg)}
  [data-landing-theme="sapphire"] #m{--m-glass:#03182c;--m-card:#0b3358;--m-card2:#0e3d66;--m-note:#0b3256}
  .m-bar,.m-tabs{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  #m,[data-landing-theme="sapphire"] #m{--m-glass:var(--m-bg);--m-line:color-mix(in srgb,var(--m-ink) 55%,transparent)}
  .m-bar{border-bottom-color:var(--m-ink)}
  .m-tabs{border-color:var(--m-ink);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* «Уменьшить анимацию» как у Apple (владелец 08.10): ничего не едет, смена состояния — короткий наплыв.
   Общее правило — в design-system/landing-motion.css; здесь то, что у телефона своё. Заставка не
   показывается вовсе, как и раньше. Тема меняется наплывом, а не кругом. */
@media (prefers-reduced-motion:reduce){
  /* Сцены здесь встают сразу в конечное состояние, сдвиги меняются мгновенно, а прозрачность плывёт 180 мс.
     Поэтому без сдвига — то, что уходит с экрана, пока его видно: панели знаний и пост группы (вверх, мельче,
     размыт). Остальное в сценах только входит из прозрачности 0 — там мгновенный сдвиг не виден; строка найма
     в конечном состоянии прозрачна и не сдвинута; стопка уведомлений по кругу не идёт. */
  #m .m-know .m-panel{transform:none!important}
  #m .m-post{transform:none!important;filter:none!important}
  #m .m-more:active svg{translate:none}
  #m-pricing>.m-panel.is-on{animation:hr-fade var(--hr-motion-duration-normal,180ms) ease!important}
  #m :is(.m-round,.m-login,.m-btn,.m-tabs a,.m-stepper button:not(:disabled),.m-seg button):active{opacity:var(--hr-press-opacity,.7);transition-duration:0s!important}
  #m :is(.m-agency li,.m-plans .m-plan:not(.is-current)):active{scale:none}
  .m-splash{display:none!important}
  /* Смена темы — 180 мс. На десктопе это родной наплыв браузера (оба слоя тают навстречу, яркости складываются);
     на телефоне старая тема стоит, новая проявляется поверх обычным наложением (правило выше, ≤ 760 px). */
  ::view-transition-group(root){animation-duration:180ms}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  ::view-transition-new(root){animation:hr-fade 180ms ease}
}