/* S0 «Установи NOCTRA» (PLAN_V6 §1, js/install.js): the S2.5/S3 frame — logo, glass card, one pill — plus progress dots,
   a quiet footer and an arrow pointing at the browser's own button. Screen switching comes from .ob (onboarding.css). */
.in{display:flex;flex-direction:column;align-items:center;
  padding:max(calc(var(--app-h) * .04),calc(var(--safe-t) + 30px)) calc(16px + var(--safe-r)) calc(var(--safe-b) + 50px) calc(16px + var(--safe-l))}
.in__top{flex:none;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--text)}
.in__top > svg{height:16px;width:auto;display:block;overflow:visible}
.in__dots{display:flex;gap:9px}
.in__dots i{width:6px;height:6px;border-radius:50%;border:1px solid rgba(255,255,255,.45)}
.in__dots i.is-on{background:var(--ice);border-color:var(--ice);box-shadow:0 0 8px var(--ice-glow)}

.in__card{flex:0 1 auto;min-height:0;overflow:auto;width:clamp(300px,76%,340px);margin-top:calc(var(--app-h) * .03);
  padding:clamp(16px,2.6vh,22px) 18px 18px;text-align:center;background:rgba(16,17,20,.62);border-color:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.5)}
.in__icon{width:46px;height:46px;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;color:var(--ice);
  border:1px solid color-mix(in srgb,var(--ice) 60%,transparent);box-shadow:0 0 16px rgba(140,215,240,.3),inset 0 0 10px rgba(140,215,240,.2)}
.in__icon svg{width:24px;height:24px}
.in__icon--app{width:auto;height:auto;border:0;border-radius:0;box-shadow:none}
.in__app{display:block;width:72px;height:72px;border-radius:17px;box-shadow:0 0 26px rgba(164,239,249,.35),0 0 0 1px rgba(255,255,255,.16)}
.in__title{margin:0;font:300 clamp(14px,4.2vw,16px)/1.4 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;text-wrap:balance}
.in__text{margin:10px 0 0;font:300 11.5px/1.55 var(--f-sans);color:var(--text-2);text-wrap:balance}
.in__or{margin:16px 0 8px;font:400 8.5px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
/* mini illustrations: the browser buttons to press, in order; the first one glows */
.in__rows{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;text-align:left}
.in__or + .in__rows{margin-top:0}
.in__rows li{display:flex;align-items:center;gap:12px;font:400 9.5px/1.35 var(--f-mono);letter-spacing:.05em;color:var(--text)}
.in__key{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.in__key svg{width:18px;height:18px}
.in__rows li:first-child .in__key{color:var(--ice);border-color:color-mix(in srgb,var(--ice) 70%,transparent);box-shadow:0 0 10px rgba(140,215,240,.3)}

.in__cta{flex:none;align-self:stretch;margin-top:calc(var(--app-h) * .03);display:flex;flex-direction:column;align-items:center;gap:4px}
.in__cta:empty{display:none}
a.in__pill{text-decoration:none}
.in__copy{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;font:400 9px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)}
.in__copy svg{width:15px;height:15px}
.in__copy:active{color:var(--text)}

.in__foot{flex:none;margin-top:auto;padding-top:10px;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.in__links{display:flex;justify-content:center;gap:28px}
.in__link{padding:8px 2px;font:400 8.5px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.in__link:active{color:var(--text)}
.in__note{margin:0;font:300 8px/1.5 var(--f-mono);letter-spacing:.04em;color:var(--text-3);text-wrap:balance}

/* the arrow towards the browser's button (outside the page: Telegram ⋯ / Chrome ⋮ on top, Safari's bar at the bottom) */
.in__point{position:absolute;width:28px;height:28px;color:var(--ice);filter:drop-shadow(0 0 6px var(--ice-glow));pointer-events:none;
  opacity:0;transition:opacity 500ms var(--ease-out)}
.in.is-active .in__point{opacity:1;transition-delay:700ms}
.in__point svg{width:100%;height:100%;transform:rotate(var(--r));animation:in-point 1.6s var(--ease) infinite}
@keyframes in-point{0%,100%{transform:rotate(var(--r)) translateX(-3px)}50%{transform:rotate(var(--r)) translateX(5px)}}
.in__point--tr{--r:-45deg;top:calc(var(--safe-t) + 44px);right:calc(14px + var(--safe-r))}
.in__point--br{--r:45deg;bottom:calc(var(--safe-b) + 8px);right:calc(14px + var(--safe-r))}
.in__point--bc{--r:90deg;bottom:calc(var(--safe-b) + 8px);left:calc(50% - 14px)}

@media (max-height:600px){
  .in__icon{width:38px;height:38px;margin-bottom:8px}
  .in__text{margin-top:6px}
  .in__rows{margin-top:10px;gap:6px}
  .in__key{width:28px;height:28px}
}