/* Точка ноль, 17.10: слайды на одном экране поверх кабинета. Сверху знак, полоски хода и «Пропустить», в середине слайд,
   внизу «Назад» и «Дальше». Прокрутки нет ни на одной ширине: на узком экране текст сверху, телефон занимает остаток высоты.
   Раскладка считается от ширины контейнера .ix, размер телефона от высоты окна под ним (.ix-vis, container size) */
html.ix-lock,html.ix-lock body{overflow:hidden}
.ix-sheet{position:fixed;inset:0;z-index:60;overflow:hidden;outline:0;overscroll-behavior:contain;background:var(--bg);
  transform:translateY(6%);opacity:0;transition:transform .8s var(--ease),opacity .5s var(--ease)}
.ix-sheet.in{transform:none;opacity:1}
.ix-sheet.out{transform:translateY(-100%);opacity:1;pointer-events:none;transition:transform .65s cubic-bezier(.7,0,.3,1)}
.ix{--ix-acc:var(--ok);--ix-glow:rgba(52,211,153,.12);
  container:ix/inline-size;position:relative;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;
  padding:clamp(10px,2.2vh,22px) max(clamp(16px,4vw,48px),calc((100% - 1328px) / 2)) max(clamp(12px,2.6vh,28px),env(safe-area-inset-bottom))}
html[data-theme="light"] .ix{--ix-acc:#111110;--ix-glow:rgba(17,17,16,.06)}
.ix::before{content:"";position:absolute;z-index:-1;right:-14%;top:-10%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,var(--ix-glow),transparent);pointer-events:none}
.ix-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* верх: знак, полоски хода, пропустить */
.ix-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(14px,3cqi,40px);min-height:44px}
.ix-top .logo{font-size:12px}
@container ix (max-width:520px){.ix-top .logo{font-size:0;gap:0}}
.ix-prog{display:flex;gap:6px;max-width:520px;width:100%;justify-self:center}
.ix-prog button{flex:1;display:grid;align-items:center;height:28px;padding:0;border:0;background:none;cursor:pointer}
.ix-prog i{display:block;height:3px;border-radius:99px;background:var(--rule-2);overflow:hidden;position:relative}
.ix-prog i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ix-acc);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.ix-prog .done i::after,.ix-prog .now i::after{transform:none}
.ix-prog .done i::after{opacity:.45}
.ix-prog button:hover i{background:var(--ink-3)}
.ix-skip{padding:8px 0;border:0;background:none;color:var(--ink-3);font:inherit;font-size:14px;cursor:pointer;transition:color .2s}
.ix-skip:hover{color:var(--ink)}
.ix-skip.off{visibility:hidden}

/* сцена: слайды друг на друге, видимый один. Новый въезжает справа, прошлые уходят влево */
.ix-stage{position:relative;min-height:0;touch-action:pan-y}
.ix-sl{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(12px,3vh,24px);padding-top:clamp(8px,2.4vh,24px);
  visibility:hidden;opacity:0;transform:translateX(48px);transition:opacity .35s var(--ease),transform .55s var(--ease),visibility 0s .55s}
.ix-sl.past{transform:translateX(-48px)}
.ix-sl.on{visibility:visible;opacity:1;transform:none;transition:opacity .5s var(--ease) .06s,transform .7s var(--ease) .04s,visibility 0s}
@container ix (min-width:860px){
  .ix-sl{grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5cqi,80px);padding-top:0}
  .ix-vis{align-self:stretch}
}
.ix-tx>*{opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
.ix-sl.on .ix-tx>*{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .8s var(--ease)}
.ix-sl.on .ix-tx>:nth-child(2){transition-delay:.08s}
.ix-sl.on .ix-tx>:nth-child(3){transition-delay:.16s}
.ix-sl.on .ix-tx>:nth-child(4){transition-delay:.24s}

/* текст слайда */
.ix-k{margin:0 0 clamp(8px,1.6vh,14px);font-size:13.5px;line-height:1.3;color:var(--ink-3)}
.ix-h{margin:0;max-width:16ch;font-family:var(--disp);font-weight:600;letter-spacing:-.04em;line-height:1.06;text-wrap:balance;
  font-size:clamp(24px,7.4cqi,36px)}
@container ix (min-width:860px){.ix-h{font-size:clamp(36px,4.6cqi,62px)}}
.ix-h em{font-style:normal;color:var(--ix-acc)}
.ix-p{margin:clamp(10px,2vh,22px) 0 0;max-width:46ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
@container ix (min-width:860px){.ix-p{font-size:clamp(16px,1.45cqi,18.5px);line-height:1.6}}
.ix-pts{display:none;list-style:none;margin:clamp(14px,2.6vh,28px) 0 0;padding:0;max-width:46ch;border-top:1px solid var(--rule)}
@container ix (min-width:860px){.ix-pts{display:block}}
.ix-pts li{position:relative;padding:11px 0 11px 22px;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.45;color:var(--ink-2)}
.ix-pts li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--ix-acc)}

/* справа или снизу: телефон по высоте свободного места */
.ix-vis{position:relative;min-height:0;container-type:size;display:grid;place-items:center}
.ix-fan,.ix-one{--pw:min(62cqw,100cqh / 2.12);position:relative;width:100%;height:100%}
.ix-fan{--pw:min(44cqw,100cqh / 2.16)}
@container ix (min-width:860px){.ix-one{--pw:min(60cqw,100cqh / 2.12)}.ix-fan{--pw:min(42cqw,100cqh / 2.2)}}
.ix-phone{--x:0%;--y:0%;--a:0deg;--r:0deg;--s:1;--z:3;position:absolute;left:50%;top:50%;z-index:var(--z);margin:0;
  width:var(--pw);aspect-ratio:71.6/147.6;padding:calc(var(--pw) * .034);border-radius:calc(var(--pw) * .17);background:#0a0b0c;
  box-shadow:0 0 0 1px #2a2c2f,0 0 0 calc(var(--pw) * .012 + 1px) #5d6064,0 0 0 calc(var(--pw) * .012 + 2px) #1d1f21,
    0 70px 90px -50px var(--shadow),0 30px 60px -36px var(--shadow);
  transform:translate(-50%,-50%) translateX(var(--x)) translateY(var(--y)) perspective(1400px) rotateY(var(--a)) rotate(var(--r)) scale(var(--s));
  transition:transform 1.15s var(--ease),filter 1s var(--ease)}
html[data-theme="light"] .ix-phone{box-shadow:0 0 0 1px #3b3d40,0 0 0 calc(var(--pw) * .012 + 1px) #c9c4ba,0 0 0 calc(var(--pw) * .012 + 2px) #9d988f,
  0 70px 90px -50px var(--shadow),0 30px 60px -36px var(--shadow)}
.ix-phone::before,.ix-phone::after{content:"";position:absolute;width:calc(var(--pw) * .012 + 2px);border-radius:2px;background:#4a4d51}
html[data-theme="light"] .ix-phone::before,html[data-theme="light"] .ix-phone::after{background:#b3ada3}
.ix-phone::before{left:calc(var(--pw) * -.012 - 4px);top:21%;height:10%}
.ix-phone::after{right:calc(var(--pw) * -.012 - 4px);top:27%;height:14%}
/* веер: центральный впереди, боковые развёрнуты к нему; до показа слайда сложены в один */
.ix-fan .ix-phone{cursor:pointer}
.ix-fan .ix-phone[data-pos="1"]{--x:60%;--y:3%;--a:-17deg;--r:4deg;--s:.84;--z:1;filter:brightness(.74) saturate(.85)}
.ix-fan .ix-phone[data-pos="2"]{--x:-60%;--y:3%;--a:17deg;--r:-4deg;--s:.84;--z:1;filter:brightness(.74) saturate(.85)}
html[data-theme="light"] .ix-fan .ix-phone[data-pos="1"],html[data-theme="light"] .ix-fan .ix-phone[data-pos="2"]{filter:brightness(.93) saturate(.8)}
.ix-sl:not(.on) .ix-fan .ix-phone{--x:0%;--y:6%;--a:0deg;--r:0deg;--s:.9}
.ix-phone.back{z-index:0;animation:ix-back 1.15s var(--ease)}
@keyframes ix-back{50%{transform:translate(-50%,-50%) translateY(-1%) scale(.64);filter:brightness(.5)}}
.ix-one .ix-phone{--y:4%;--s:.96;transition:transform 1s var(--ease)}
.ix-sl.on .ix-one .ix-phone{--y:0%;--s:1}
.ix-scr{position:relative;display:flex;flex-direction:column;height:100%;border-radius:calc(var(--pw) * .136);overflow:hidden;background:var(--bg);isolation:isolate}
.ix-sb{position:relative;flex:none;display:grid;grid-template-columns:1fr 31% 1fr;align-items:center;height:calc(var(--pw) * .128);padding-top:calc(var(--pw) * .012);
  color:var(--ink);background:var(--bg);font:600 calc(var(--pw) * .043)/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;letter-spacing:-.02em;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.ix-sb b{justify-self:center;font-weight:600}
.ix-sb>i{position:absolute;left:50%;top:calc(var(--pw) * .026);width:31%;height:calc(var(--pw) * .088);border-radius:99px;background:#000;transform:translateX(-50%)}
.ix-sb span{grid-column:3;justify-self:center;display:flex;align-items:center;gap:.3em}
.ix-sb svg{display:block;width:auto;fill:currentColor;shape-rendering:geometricPrecision}
.ix-sig{height:.72em}
.ix-bat{height:.84em}
.ix-feed{position:relative;flex:1;overflow:hidden}
.ix-feed img{display:block;width:100%;height:auto;transform:translateY(0);transition:transform 1s var(--ease)}
.ix-phone.live .ix-feed img{transform:translateY(calc(var(--sy,0px) * -1));transition:transform 4.2s cubic-bezier(.45,0,.25,1) 1.4s}
.ix-scr::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 38%)}

/* подпись у низа телефона: главная цифра экрана барабанами */
.ix-call{position:absolute;left:50%;z-index:4;bottom:calc(50% - var(--pw) * 1.03 + var(--pw) * .1);width:min(100%,max(calc(var(--pw) * 1.4),240px));
  transform:translateX(-50%);display:grid}
.ix-call p{grid-area:1/1;display:grid;justify-items:center;gap:5px;margin:0;padding:12px 16px 13px;text-align:center;
  border:1px solid var(--rule-2);border-radius:16px;background:color-mix(in srgb,var(--paper) 80%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 30px 60px -30px var(--shadow);opacity:0;transform:translateY(10px) scale(.97);transition:opacity .25s,transform .4s var(--ease);pointer-events:none}
.ix-call p.on{opacity:1;transform:none;transition:opacity .5s var(--ease) .45s,transform .7s var(--ease) .45s}
.ix-call strong{font-family:var(--num);font-weight:600;font-size:clamp(20px,calc(var(--pw) * .13),34px);line-height:1;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.ix-call .loss strong{color:var(--loss)}
.ix-call .ok strong{color:var(--ok)}
.ix-call em{font-style:normal;font-size:13px;line-height:1.35;color:var(--ink-2)}
.ix-odo{display:inline-flex;align-items:flex-start;--lh:1.08em;line-height:var(--lh);font-feature-settings:"tnum" 1,"lnum" 1}
.ix-od{display:inline-block;height:var(--lh);overflow:hidden}
.ix-od>span{display:flex;flex-direction:column;transition:transform 0s .6s}
.ix-od i{display:block;height:var(--lh);font-style:normal;text-align:center}
.ix-od-s{white-space:pre}
.ix-call p.on .ix-od>span{transform:translateY(calc(var(--d) * var(--lh) * -1));transition:transform 1.5s cubic-bezier(.16,.84,.24,1) calc(var(--i) * 70ms + .15s)}

/* последний слайд: путь по шагам окном интерфейса, первый шаг отмечен «Сейчас» */
.ix-path{list-style:none;margin:0;padding:clamp(4px,1vh,10px) clamp(16px,3cqw,26px);width:min(100%,480px);border:1px solid var(--rule);border-radius:16px;
  background:var(--paper);box-shadow:0 40px 80px -50px var(--shadow)}
.ix-path li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:14px;align-items:center;
  padding:clamp(8px,1.9vh,15px) 0;border-top:1px solid var(--rule);opacity:0;transform:translateX(14px);transition:opacity .3s,transform .3s}
.ix-path li:first-child{border-top:0}
.ix-sl.on .ix-path li{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(var(--j) * 90ms + .2s),transform .7s var(--ease) calc(var(--j) * 90ms + .2s)}
.ix-pn{grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--rule-2);font-family:var(--num);font-size:13px;font-weight:600;color:var(--ink-2)}
.ix-path b{font-weight:600;font-size:15.5px;line-height:1.3;color:var(--ink)}
.ix-path li>span:not(.ix-pn){grid-column:2;font-size:13.5px;line-height:1.35;color:var(--ink-3)}
.ix-path em{grid-column:3;grid-row:1/span 2;font-style:normal;font-size:12px;padding:3px 10px;border-radius:99px;background:var(--ix-acc);color:var(--bg)}
.ix-path .now .ix-pn{border-color:var(--ix-acc);background:var(--ix-acc);color:var(--bg)}

/* низ: назад, номер слайда, дальше. На узком экране главная кнопка во всю ширину */
.ix-nav{display:flex;align-items:center;gap:12px;padding-top:clamp(10px,2vh,18px)}
.ix-nav .btn{padding:14px 22px;font-size:15.5px;border-radius:12px}
.ix-nav .btn{white-space:nowrap}
.ix-prev{display:inline-flex;align-items:center;gap:8px}
.ix-prev[hidden]{display:none}
.ix-n{margin-right:auto;font-size:13px;color:var(--ink-3);font-feature-settings:"tnum" 1}
.ix-prev:not([hidden])+.ix-n{margin-left:8px}
@container ix (max-width:620px){
  .ix-n{display:none}
  .ix-next{flex:1;justify-content:center}
  .ix-prev span{display:none}
  .ix-prev{padding-inline:16px}
}
@container ix (max-width:360px){.ix-nav{gap:10px}.ix-nav .btn{padding-inline:14px;font-size:14.5px}}

/* низкое окно: телефон важнее второстепенного текста */
@media (max-height:640px){
  .ix-k{margin-bottom:6px;font-size:12.5px}
  .ix-p{font-size:14px;line-height:1.45;margin-top:8px}
  .ix-nav .btn{padding:12px 18px}
}
@media (max-height:640px) and (max-width:859px){
  .ix-path{padding-block:2px}
  .ix-path li{padding:6px 0;column-gap:10px;grid-template-columns:24px minmax(0,1fr) auto}
  .ix-pn{width:24px;height:24px;font-size:12px}
  .ix-path b{font-size:14px}
  .ix-path li>span:not(.ix-pn){font-size:12.5px}
}
@media (max-height:600px) and (max-width:859px){.ix-path li>span:not(.ix-pn){display:none}.ix-pn{grid-row:auto}}
@media (max-height:520px){
  @container ix (max-width:859px){.ix-p{display:none}}
  .ix-pts{display:none}
}

@media (prefers-reduced-motion:reduce){.ix *,.ix-sheet{animation:none!important;transition:none!important}}