/* /devices/ (12.11.2026): своя схема страницы - окно «New phone» (версия Android + страна), остальное - social.css и sol.css.
   Указатели стоят внутри своих целей (плитка версии, кнопка Create) - попадают в них при любой ширине карточки.
   Без движения виден итог: версия выбрана, строка «Phone 3 is starting» на месте. Движение - только transform и opacity. */
.dv-new{position:relative;width:100%;max-width:350px}
.dv-row{display:block;padding:13px 14px;border-top:1px solid var(--sn-soft)}
.dv-new .sn-card-h+.dv-row{border-top:0}
.dv-lab{display:block;margin-bottom:8px;font-size:11px;font-weight:600;color:var(--sn-mut)}
.dv-chips{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.dv-chips i{position:relative;display:flex;align-items:center;justify-content:center;height:32px;border:1px solid var(--sn-line);border-radius:9px;font-style:normal;font-size:12.5px;font-weight:600;color:var(--sn-ink)}
.dv-chips i::before{content:"";position:absolute;inset:-1px;border:1.5px solid var(--sn-ok);border-radius:9px;background:rgba(22,163,74,.1);opacity:0}
.dv-chips i.b::before{opacity:1}
.dv-chips .sn-cur{left:52%;top:56%}
.dv-cc{display:flex;align-items:center;gap:9px;height:36px;padding:0 11px;border:1px solid var(--sn-line);border-radius:9px;font-weight:600}
.dv-cc svg{width:13px;height:13px;margin-left:auto;color:var(--sn-mut)}
.dv-go{display:flex;flex-direction:column;gap:10px;padding:13px 14px 14px;border-top:1px solid var(--sn-soft)}
.dv-go .sn-btn{position:relative;display:block;padding:11px;border-color:#17171d;border-radius:9px;background:#17171d;font-size:12.5px;color:#fff;text-align:center}
.dv-go .sn-cur{left:58%;top:52%}
.dv-done{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--sn-oktx)}
.dv-done svg{width:13px;height:13px}

@keyframes dv-pick-a{0%,29%{opacity:1}32%,97%{opacity:0}100%{opacity:1}}
@keyframes dv-pick-b{0%,29%{opacity:0}32%,97%{opacity:1}100%{opacity:0}}
@keyframes dv-cur1{0%{opacity:0;transform:translate(-64px,38px)}8%{opacity:1}26%{transform:translate(0,0)}29%{transform:translate(0,0) scale(.84)}32%,42%{opacity:1;transform:translate(0,0)}48%,100%{opacity:0;transform:translate(0,0)}}
@keyframes dv-cur2{0%,46%{opacity:0;transform:translate(-86px,-46px)}52%{opacity:1}64%{transform:translate(0,0)}67%{transform:translate(0,0) scale(.84)}70%,84%{opacity:1;transform:translate(0,0)}90%,100%{opacity:0;transform:translate(0,0)}}
@keyframes dv-press{0%,66%{transform:none}68%{transform:scale(.97)}71%,100%{transform:none}}
@keyframes dv-done{0%,69%{opacity:0;transform:translateY(4px)}74%,97%{opacity:1;transform:none}100%{opacity:0}}
.sn-anim .sn-in .dv-chips i.a::before{animation:dv-pick-a 8s 1s infinite both}
.sn-anim .sn-in .dv-chips i.b::before{animation:dv-pick-b 8s 1s infinite both}
.sn-anim .sn-in .dv-chips .sn-cur{transform-origin:0 0;animation:dv-cur1 8s 1s infinite both}
.sn-anim .sn-in .dv-go .sn-cur{transform-origin:0 0;animation:dv-cur2 8s 1s infinite both}
.sn-anim .sn-in .dv-go .sn-btn{animation:dv-press 8s 1s infinite both}
.sn-anim .sn-in .dv-done{animation:dv-done 8s 1s infinite both}
@media (prefers-reduced-motion:reduce){.dv-chips i::before,.dv-new .sn-cur,.dv-go .sn-btn,.dv-done{animation:none!important}}
/* 12.11: заголовок героя RU «… всегда онлайн.» - зелёная галочка в кружке перед зелёными словами (только русская версия: html[lang=ru]) */
html[lang="ru"] .sn-hero h1 .hl{white-space:nowrap}
html[lang="ru"] .sn-hero h1 .hl::before{content:"";display:inline-block;vertical-align:.02em;margin:0 .16em 0 .04em;width:.62em;height:.62em;border-radius:50%;background:#16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 8.4l2.4 2.4 5.2-5.4'/%3E%3C/svg%3E") center/64% no-repeat;box-shadow:0 0 0 .1em rgba(22,163,74,.16)}