/* /guide/: step-by-step instructions with interface mock-ups; guide.js plays them, the markup is their final frame */

/* ---------- page ---------- */
.g-hero{padding:clamp(48px,7vw,96px) 0 clamp(44px,6vw,72px)}
.g-hero h1{font-size:clamp(40px,7.4vw,92px);margin:20px 0 20px;max-width:900px}
.g-nav{display:flex;flex-wrap:wrap;gap:10px}
.g-nav a{padding:10px 18px;border:1.5px solid var(--ink);border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;transition:background-color .15s ease,color .15s ease}
.g-nav a:hover{background:var(--ink);color:var(--yellow)}
.g-hint{margin:26px 0 0;max-width:620px;font-size:14px;color:var(--ink-soft)}

.g-steps{display:flex;flex-direction:column;gap:clamp(64px,9vw,120px)}
.g-step{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,96px);align-items:center}
.g-step.flip .g-fig{order:-1}
.g-step.wide{grid-template-columns:1fr;gap:clamp(28px,4vw,48px)}
.g-step.big{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(32px,5vw,72px)}
.g-step.big.flip{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
.g-step.wide .g-text{max-width:820px}
.g-n{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--yellow);font-family:var(--display);font-weight:800;font-size:20px;margin-bottom:22px}
.dark .g-n{background:var(--yellow);color:var(--ink)}
.g-text h3{font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,36px);line-height:1.1;margin:0 0 16px}
.g-text p{margin:0 0 14px;max-width:560px;color:var(--ink-soft)}
.g-text b{color:var(--ink)}
.dark .g-text p,.dark .g-text li{color:var(--white-soft)}
.dark .g-text b{color:var(--white)}
.g-text a:not(.btn){text-decoration-thickness:2px;text-underline-offset:3px}
.dark .g-text a:not(.btn){color:var(--yellow)}
.g-text code{font-family:var(--text);font-weight:600;font-size:.95em;padding:1px 8px;border-radius:6px;background:var(--ink);color:var(--yellow);white-space:nowrap}
.dark .g-text code{background:var(--yellow);color:var(--ink)}
.g-list{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:10px;max-width:560px}
.g-list li{position:relative;padding-left:22px;color:var(--ink-soft)}
.g-list li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.dark .g-list li::before{background:var(--yellow)}
.g-ol{margin:0 0 16px;padding:0;list-style:none;counter-reset:g;display:grid;gap:14px;max-width:560px}
.g-ol li{counter-increment:g;display:flex;gap:14px;color:var(--ink-soft)}
.g-ol li::before{content:counter(g);flex:none;width:28px;height:28px;margin-top:-1px;border-radius:50%;border:1.5px solid currentColor;font-family:var(--display);font-weight:700;font-size:13px;display:grid;place-items:center}
.dark .g-ol li::before{border-color:var(--yellow);color:var(--yellow)}
.g-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.g-tip{margin:18px 0 0;max-width:560px;padding:14px 18px;border-radius:16px;background:rgba(6,17,31,.06);font-size:15px;color:var(--ink-soft)}
.light .g-tip{background:#FFF6D1}
.dark .g-tip{background:rgba(255,255,255,.06);color:var(--white-soft)}
.g-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.g-fig figcaption{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.dark .g-fig figcaption{color:var(--white-soft)}
.g-figs{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,5vw,72px)}
.g-wide{width:100%;max-width:600px;justify-self:center;container-type:inline-size}
.guide .faq summary{text-align:left}

/* ---------- mock-up machinery ---------- */
.mock{position:relative;isolation:isolate;flex:none;user-select:none;-webkit-user-select:none}
.frames{position:absolute;inset:0;transition:opacity .3s ease}
.mock.is-fading .frames{opacity:0}
.frame{position:absolute;inset:0;display:flex;flex-direction:column;background:#FBF5E2;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.frame.is-cur{opacity:1;visibility:visible;z-index:2;transition:opacity .35s ease}
.frame.is-prev{opacity:1;visibility:visible;z-index:1;transition:none}
.finger{position:absolute;left:0;top:0;z-index:30;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;opacity:0;transition:transform .5s cubic-bezier(.45,0,.2,1),opacity .2s ease}
.finger.is-on{opacity:1}
.finger.no-move{transition:none}
.finger::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.6);border:2px solid var(--ink);box-shadow:0 6px 16px -4px rgba(6,17,31,.55);transition:transform .15s ease}
.finger.is-press::before{transform:scale(.76)}
.finger::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--yellow);opacity:0}
.finger.is-press::after{animation:g-ripple .5s ease-out}
@keyframes g-ripple{from{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.7)}}
.tp{transition:transform .15s ease,background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .3s ease,opacity .2s ease}
.tp.is-tap{transform:scale(.95)}

/* ---------- phone ---------- */
.g-phone{width:272px;padding:9px;background:var(--ink);border-radius:44px;box-shadow:0 30px 56px -24px rgba(6,17,31,.55)}
.dark .g-phone{box-shadow:0 0 0 1px var(--line-light),0 30px 56px -24px rgba(0,0,0,.8)}
.g-screen{position:relative;height:540px;border-radius:35px;overflow:hidden;background:#FBF5E2;color:var(--ink);font-size:13px;line-height:1.4}
.g-screen::before{content:"";position:absolute;top:10px;left:50%;z-index:12;width:84px;height:23px;margin-left:-42px;background:var(--ink);border-radius:999px}
.g-sb{position:absolute;top:0;left:0;right:0;z-index:11;display:flex;justify-content:space-between;align-items:center;height:42px;padding:2px 26px 0 30px;color:#fff;mix-blend-mode:difference;font-size:12.5px;font-weight:700;pointer-events:none}
.g-sb svg{width:56px;height:11px}
.g-screen .frames{z-index:1}

/* telegram */
.g-tg{background:#FBF5E2}
.g-tg .tg-head{padding-top:46px}
.g-chat{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:12px 10px;overflow:hidden}
.g-chat .msg{max-width:92%;font-size:12.5px}
.g-chat .kbd{margin:0}
.g-chat .kbd span{font-size:11.5px}
.g-tg .tg-input{padding-bottom:22px}
.kbd span.tp.is-tap{background:var(--yellow);color:var(--ink)}
.msg.photo{padding:4px 4px 7px}
.msg.photo .qr{width:100%;padding:14px;border-radius:12px 12px 4px 4px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-dark)}
.msg.photo .qr svg{width:136px;height:136px;margin:0 auto}
.msg.photo p{padding:6px 8px 0}
.g-code{display:inline-block;margin:2px 0;padding:1px 5px;border-radius:5px;background:rgba(6,17,31,.08);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;word-break:break-all}
.g-code.is-tap{background:var(--yellow)}
.g-toast{position:absolute;left:50%;bottom:76px;z-index:9;padding:8px 14px;border-radius:999px;background:rgba(6,17,31,.9);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;transform:translate(-50%,10px);transition:opacity .25s ease,transform .25s ease}
.c-toast{bottom:22px}
.t-toast{top:100px;bottom:auto}
.g-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* app store */
.g-store{background:#fff;padding:50px 16px 0}
.st-back{color:#0A7AFF;font-size:13px;margin-bottom:16px}
.st-app{display:flex;gap:14px}
.st-ic{flex:none;width:84px;height:84px;border-radius:20px;background:linear-gradient(145deg,#22303F,var(--ink));display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:34px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.st-app b{display:block;font-size:16px;line-height:1.2}
.st-app small{display:block;color:rgba(6,17,31,.5);font-size:12px;margin:2px 0 12px}
.st-btn{position:relative;display:grid;place-items:center;width:92px;height:30px;border-radius:999px;background:#0A7AFF;color:#fff;font-weight:700;font-size:13px;overflow:hidden;transition:width .25s ease,background-color .25s ease,color .25s ease}
.st-btn>*{grid-area:1/1;transition:opacity .2s ease}
.st-btn .l-open,.st-btn .ring{opacity:0}
.st-btn.is-load{width:30px;background:transparent}
.st-btn.is-load .l-get{opacity:0}
.st-btn.is-load .ring{opacity:1}
.st-btn.is-done{background:#EEF1F6;color:#0A7AFF}
.st-btn.is-done .l-get{opacity:0}
.st-btn.is-done .l-open{opacity:1}
.ring{width:30px;height:30px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3}
.ring .bg{stroke:#DCE3EE}
.ring .fg{stroke:#0A7AFF;stroke-dasharray:69.1;stroke-dashoffset:69.1}
.st-btn.is-load .ring .fg{animation:g-load 2.1s linear forwards}
@keyframes g-load{to{stroke-dashoffset:0}}
.st-facts{display:flex;justify-content:space-between;margin:20px 0 14px;padding:12px 0;border-block:1px solid rgba(6,17,31,.1);font-size:11px;color:rgba(6,17,31,.5);text-align:center}
.st-facts b{display:block;font-size:14px;color:rgba(6,17,31,.75)}
.st-shots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-shots i{height:230px;border-radius:16px;background:linear-gradient(#0E1726,#1B2638);position:relative;overflow:hidden}
.st-shots i::before{content:"";position:absolute;left:50%;top:38px;width:62px;height:62px;margin-left:-31px;border-radius:50%;border:3px solid rgba(255,255,255,.18)}
.st-shots i::after{content:"";position:absolute;left:14px;right:14px;top:124px;height:64px;border-radius:10px;background:repeating-linear-gradient(rgba(255,255,255,.1) 0 12px,transparent 12px 20px)}

/* happ-like app */
.hp{background:#0E1726;color:#E9EEF5}
.hp-top{display:flex;align-items:center;justify-content:space-between;padding:46px 14px 6px}
.hp-ic{width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#E9EEF5}
.hp-ic svg{width:18px;height:18px}
.hp-ic.is-tap{background:rgba(255,255,255,.2)}
.hp-ic.blank{background:none}
.hp-title{font-weight:800;font-size:16px;letter-spacing:.02em}
.hp-power{position:relative;width:112px;height:112px;margin:14px auto 8px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#1E2A3B,#121B29);border:3px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55)}
.hp-power svg{width:42px;height:42px}
.hp-power::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid transparent}
.hp-power.is-wait{color:var(--yellow)}
.hp-power.is-wait::after{border-top-color:var(--yellow);animation:g-spin .8s linear infinite}
.hp-power.is-on{border-color:#1DB954;color:#3DD68C;box-shadow:0 0 0 10px rgba(29,185,84,.12),0 0 44px rgba(29,185,84,.35)}
.hp-power.off{opacity:.45}
@keyframes g-spin{to{transform:rotate(360deg)}}
.hp-state{display:grid;justify-items:center;font-size:12.5px;color:rgba(255,255,255,.6)}
.hp-state>*{grid-area:1/1;transition:opacity .2s ease}
.hp-state .s-wait,.hp-state .s-on{opacity:0}
.hp-power.is-wait+.hp-state .s-off,.hp-power.is-on+.hp-state .s-off{opacity:0}
.hp-power.is-wait+.hp-state .s-wait{opacity:1}
.hp-power.is-on+.hp-state .s-on{opacity:1;color:#3DD68C;font-weight:600}
.hp-group{margin:14px 12px 0;padding:10px 10px 6px;border-radius:16px;background:rgba(255,255,255,.06)}
.hp-gh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 6px}
.hp-gh b{font-size:13.5px}
.hp-gh small{display:block;font-size:11px;color:rgba(255,255,255,.5)}
.hp-gh svg{width:16px;height:16px;color:rgba(255,255,255,.55)}
.hp-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:11px;border:1.5px solid transparent}
.hp-row .flag{width:22px;height:22px;box-shadow:none}
.hp-row span{flex:1}
.hp-row i{font-style:normal;font-size:11px;color:#7FD6A0;white-space:nowrap}
.hp-row.is-sel{border-color:var(--yellow);background:rgba(246,202,47,.1)}
.hp-row.is-tap{background:rgba(255,255,255,.1)}
.mock.is-live .frame.is-cur .hp-row.pop{animation:g-in .4s both}
.hp-row.pop:nth-child(3){animation-delay:.08s!important}
.hp-row.pop:nth-child(4){animation-delay:.16s!important}
.hp-row.pop:nth-child(5){animation-delay:.24s!important}
.hp-row.pop:nth-child(6){animation-delay:.32s!important}
@keyframes g-in{from{opacity:0;transform:translateY(8px)}}
.hp-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 30px 40px;text-align:center}
.hp-empty b{font-size:15px}
.hp-empty p{margin:0;font-size:12.5px;color:rgba(255,255,255,.55)}
.hp-btn{margin-top:12px;padding:9px 18px;border-radius:999px;background:var(--yellow);color:var(--ink);font-weight:700;font-size:13px}
.hp-menu{position:absolute;top:86px;right:12px;z-index:6;width:214px;padding:6px;border-radius:14px;background:#1E2A3C;color:#E9EEF5;white-space:nowrap;box-shadow:0 18px 40px -10px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:scale(.9);transform-origin:top right;transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
.hp-menu.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}
.hp-menu span{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:12.5px}
.hp-menu svg{flex:none;width:16px;height:16px;color:var(--yellow)}
.hp-menu span.is-tap{background:rgba(255,255,255,.12)}
.hp-set{flex:1;padding:4px 12px}
.hp-set h4{margin:4px 4px 12px;font-size:20px}
.hp-li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
.hp-li em{font-style:normal;color:rgba(255,255,255,.45)}
.hp-li.is-tap{background:rgba(255,255,255,.08);border-radius:10px}
.hp-li small{display:block;font-size:11px;color:rgba(255,255,255,.45)}
.sw{flex:none;position:relative;width:42px;height:25px;border-radius:999px;background:rgba(255,255,255,.18);transition:background-color .25s ease}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:transform .25s ease}
.sw.is-on{background:#1DB954}
.sw.is-on::after{transform:translateX(17px)}

/* system dialogs */
.al{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}
.al.is-on{opacity:1;visibility:visible;transition:opacity .2s ease}
.al>div{width:236px;border-radius:16px;background:rgba(246,246,248,.98);color:#000;text-align:center;overflow:hidden;transform:scale(1.1);transition:transform .2s ease}
.al.is-on>div{transform:none}
.al p{margin:0;padding:16px 16px 14px;font-size:11.5px;line-height:1.35}
.al p b{display:block;margin-bottom:4px;font-size:13px}
.al .bs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(0,0,0,.14)}
.al .bs span{padding:10px 4px;font-size:13px;color:#0A7AFF}
.al .bs span+span{border-left:1px solid rgba(0,0,0,.14);font-weight:600}
.al .bs span.is-tap{background:rgba(0,0,0,.08)}

/* browser + personal account */
.br{background:var(--yellow)}
.br-bar{padding:44px 10px 8px;background:#F2F2F4;border-bottom:1px solid var(--line-dark)}
.br-url{display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 10px;border-radius:10px;background:#fff;font-size:12px}
.br-url svg{width:11px;height:11px}
.lk{flex:1;padding:12px 14px;overflow:hidden}
.lk-top{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line-dark);font-family:var(--display);font-weight:800;font-size:13px}
.lk-top svg{width:30px;height:auto;overflow:visible}
.lk h4{margin:14px 0 0;font-family:var(--display);font-weight:800;font-size:21px}
.lk>small{display:block;color:var(--ink-soft);font-size:11.5px}
.lk-card{margin-top:12px;padding:12px;border:2px solid var(--ink);border-radius:16px;background:#fff}
.lk-head{display:flex;align-items:center;justify-content:space-between}
.lk-head b{font-family:var(--display);font-size:14px}
.lk-pill{padding:2px 9px;border:2px solid #1F7A3D;border-radius:999px;color:#1F7A3D;font-size:10.5px;font-weight:700}
.lk-term{margin:10px 0 6px}
.lk-term b{font-family:var(--display);font-size:24px;margin-right:6px}
.lk-term span{font-size:11.5px;color:var(--ink-soft)}
.lk-bar{height:6px;border-radius:6px;background:rgba(6,17,31,.1);overflow:hidden}
.lk-bar i{display:block;width:92%;height:100%;background:var(--ink)}
.lk-meta{margin:10px 0 0;padding:0;list-style:none;font-size:11.5px}
.lk-meta li{display:flex;justify-content:space-between;padding:4px 0;border-top:1px solid rgba(6,17,31,.08)}
.lk-meta span{color:var(--ink-soft)}
.lk-act{display:flex;gap:6px;margin-top:10px}
.lk-act>span{flex:1;display:grid;place-items:center;padding:8px 4px;white-space:nowrap;border:2px solid var(--ink);border-radius:999px;font-size:11.5px;font-weight:700}
.lk-act .c-copy{background:var(--ink);color:var(--yellow)}
.lk-act .c-copy>*{grid-area:1/1;transition:opacity .2s ease}
.lk-act .c-copy .l-ok{opacity:0}
.lk-act .c-copy.is-ok{background:#1F7A3D;border-color:#1F7A3D;color:#fff}
.lk-act .c-copy.is-ok .l-copy{opacity:0}
.lk-act .c-copy.is-ok .l-ok{opacity:1}

/* computer window and TV: sized in em so they shrink with their column */
.g-win .frame,.g-tv .frame,.g-mini .frame{background:#0E1726}
.g-win{position:relative;width:100%;max-width:60em;font-size:10px;font-size:min(10px,100cqw/60);aspect-ratio:16/10;border-radius:1.4em;background:#0E1726;color:#E9EEF5;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 3em 5.6em -2.4em rgba(0,0,0,.8);line-height:1.4}
.g-win-bar{position:absolute;top:0;left:0;right:0;height:3.2em;display:flex;align-items:center;gap:.7em;padding:0 1.3em;background:#0A1220;font-size:1em}
.g-win-bar i{width:1.1em;height:1.1em;border-radius:50%;background:#FF5F57}
.g-win-bar i:nth-child(2){background:#FEBC2E}
.g-win-bar i:nth-child(3){background:#28C840}
.g-win-bar b{flex:1;margin-right:4.6em;text-align:center;font-size:1.25em;font-weight:600;color:rgba(255,255,255,.6)}
.g-win .frames{top:3.2em}
.dk{flex-direction:row}
.dk-side{width:21em;flex:none;display:flex;flex-direction:column;gap:.6em;padding:1.4em 1.2em;border-right:1px solid rgba(255,255,255,.08);font-size:1em}
.dk-add{display:flex;align-items:center;gap:.7em;padding:.9em 1.2em;border-radius:1em;background:var(--yellow);color:var(--ink);font-weight:700;font-size:1.3em}
.dk-add svg{width:1.3em;height:1.3em}
.dk-side>small{margin-top:1em;font-size:1.2em;color:rgba(255,255,255,.45);text-align:center}
.dk-side .hp-gh{padding:.8em .4em .2em}
.dk-side .hp-gh b{font-size:1.35em}
.dk-side .hp-gh small{font-size:1.1em}
.dk-side .hp-row{gap:1em;padding:.7em .9em;border-radius:1em;font-size:1.3em}
.dk-side .hp-row .flag{width:1.7em;height:1.7em}
.dk-side .hp-row i{font-size:.85em}
.dk-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em}
.dk-main .hp-power{width:13em;height:13em;margin:0 0 1em;border-width:.3em}
.dk-main .hp-power svg{width:4.6em;height:4.6em}
.dk-main .hp-power.is-on{box-shadow:0 0 0 1em rgba(29,185,84,.12),0 0 4.4em rgba(29,185,84,.35)}
.dk-main .hp-state{font-size:1.4em}
.dk-main>small{font-size:1.2em;color:rgba(255,255,255,.45)}
.g-win .hp-menu{top:8.6em;left:1.2em;right:auto;width:auto;padding:.6em;border-radius:1.2em;transform-origin:top left}
.g-win .hp-menu span{gap:1em;padding:.9em 1em;font-size:1.3em;border-radius:.8em}
.g-win .hp-menu svg{width:1.3em;height:1.3em}
.g-win .finger,.g-tvset .finger{width:26px;height:26px;margin:-13px 0 0 -13px}

.g-tvset{position:relative;width:100%;max-width:60em;font-size:10px;font-size:min(10px,100cqw/60);padding:0 0 3em}
.g-tv{position:relative;width:43em;aspect-ratio:16/9;border:1em solid var(--ink);border-radius:1.6em;background:#0E1726;color:#E9EEF5;overflow:hidden;box-shadow:0 3em 5.6em -2.4em rgba(6,17,31,.6);line-height:1.4}
.g-tvset::before{content:"";position:absolute;left:16.5em;bottom:1.4em;width:10em;height:1.6em;border-radius:.4em .4em 1em 1em;background:var(--ink)}
.tv-qr{flex-direction:row;align-items:center;gap:2.4em;padding:0 3em}
.tv-qr div{flex:1}
.tv-qr b{display:block;font-size:2.2em;font-weight:800;margin-bottom:.4em}
.tv-qr p{margin:0 0 .8em;font-size:1.25em;color:rgba(255,255,255,.65)}
.tv-qr .qr{flex:none;width:14em;height:14em;padding:1.2em;border-radius:1.2em;background:#fff;color:var(--ink)}
.tv-qr .qr svg{width:100%;height:100%}
.tv-list{flex-direction:row;align-items:center;gap:2.4em;padding:0 3em}
.tv-list .hp-power{flex:none;width:10.5em;height:10.5em;margin:0;border-width:.3em}
.tv-list .hp-power svg{width:3.8em;height:3.8em}
.tv-list .hp-power.is-on{box-shadow:0 0 0 1em rgba(29,185,84,.12),0 0 4.4em rgba(29,185,84,.35)}
.tv-list .hp-group{flex:1;margin:0;padding:1em;border-radius:1.4em}
.tv-list .hp-gh{padding:0 .4em .6em}
.tv-list .hp-gh b{font-size:1.5em}
.tv-list .hp-gh small{font-size:1.15em}
.tv-list .hp-row{gap:1em;padding:.5em .8em;border-radius:1em;font-size:1.3em}
.tv-list .hp-row .flag{width:1.6em;height:1.6em}
.tv-list .hp-row i{font-size:.8em}
.tv-list .s-on{margin-top:.6em;font-size:1.4em;color:#3DD68C;font-weight:600;text-align:center}

/* small phone in front of the TV */
.g-mini{position:absolute;right:0;bottom:0;z-index:3;width:15.5em;padding:.7em;border-radius:2.6em;background:var(--ink);box-shadow:0 2em 4em -1.6em rgba(6,17,31,.7)}
.g-mini-screen{position:relative;height:31em;border-radius:2em;overflow:hidden;background:#0E1726;color:#E9EEF5;font-size:1em;line-height:1.35}
.g-mini .hp-top{padding:2.6em 1em .6em}
.g-mini .hp-ic{width:2.6em;height:2.6em;border-radius:.9em}
.g-mini .hp-ic svg{width:1.4em;height:1.4em}
.g-mini .hp-title{font-size:1.3em}
.g-mini .hp-group{margin:.8em .8em 0;padding:.7em;border-radius:1.1em}
.g-mini .hp-gh{padding:0 .3em .4em}
.g-mini .hp-gh b{font-size:1.15em}
.g-mini .hp-gh small{font-size:.95em}
.g-mini .hp-row{gap:.7em;padding:.5em .6em;border-radius:.8em;font-size:1.1em}
.g-mini .hp-row .flag{width:1.5em;height:1.5em}
.g-mini .hp-row i{font-size:.85em}
.g-mini .hp-menu{top:5.6em;right:.8em;width:12.4em;padding:.4em;border-radius:1em}
.g-mini .hp-menu span{gap:.6em;padding:.7em .7em;font-size:1.05em;border-radius:.7em}
.g-mini .hp-menu svg{width:1.2em;height:1.2em}
.g-mini .cam{background:#05080D;align-items:center;justify-content:center}
.cam-box{position:relative;width:11em;height:11em}
.cam-box svg{width:100%;height:100%;padding:1.4em;color:rgba(255,255,255,.35)}
.cam-box::before{content:"";position:absolute;inset:0;border-radius:1em;background:linear-gradient(var(--yellow),var(--yellow)) 0 0/2.4em .3em,linear-gradient(var(--yellow),var(--yellow)) 0 0/.3em 2.4em,linear-gradient(var(--yellow),var(--yellow)) 100% 0/2.4em .3em,linear-gradient(var(--yellow),var(--yellow)) 100% 0/.3em 2.4em,linear-gradient(var(--yellow),var(--yellow)) 0 100%/2.4em .3em,linear-gradient(var(--yellow),var(--yellow)) 0 100%/.3em 2.4em,linear-gradient(var(--yellow),var(--yellow)) 100% 100%/2.4em .3em,linear-gradient(var(--yellow),var(--yellow)) 100% 100%/.3em 2.4em;background-repeat:no-repeat}
.cam-box::after{content:"";position:absolute;left:.8em;right:.8em;top:50%;height:.2em;background:var(--yellow);box-shadow:0 0 1em var(--yellow)}
.mock.is-live .frame.is-cur .cam-box::after{animation:g-scan 1.4s ease-in-out infinite alternate}
@keyframes g-scan{from{top:12%}to{top:88%}}
.cam small{margin-top:1.4em;font-size:1.05em;color:rgba(255,255,255,.6)}
.send{padding:0 1em}
.send h5{margin:2.8em 0 .9em;font-size:1.35em}
.send .hp-row{font-size:1.1em;gap:.7em;padding:.7em;border-radius:.8em;background:rgba(255,255,255,.06)}
.send .hp-row b{flex:none;width:1.5em;height:1.5em;border-radius:.4em;background:var(--yellow);color:var(--ink);display:grid;place-items:center;font-size:.9em}
.send .hp-btn{display:block;margin:1.4em 0 0;padding:.8em;border-radius:999px;font-size:1.15em;text-align:center}
.sent{align-items:center;justify-content:center;gap:.8em;text-align:center;padding:0 1.4em}
.sent i{width:4em;height:4em;border-radius:50%;background:#1DB954;display:grid;place-items:center;color:#fff}
.sent i svg{width:2em;height:2em}
.sent b{font-size:1.2em}

@media (max-width:960px){
  .g-step,.g-step.flip,.g-step.big,.g-step.big.flip{grid-template-columns:1fr}
  .g-step.flip .g-fig{order:0}
}
@media (max-width:560px){
  .g-nav{gap:8px}
  .g-nav a{padding:8px 14px;font-size:14px}
  .g-n{width:44px;height:44px;font-size:18px;margin-bottom:16px}
  .g-links .btn{flex:1 1 auto;justify-content:center}
  .g-phone{width:260px}
  .g-screen{height:520px}
}
@media (prefers-reduced-motion:reduce){
  .g-nav a,.tp,.frame,.frames,.finger{transition:none}
}