/* STX+ realistic phone mockup (titanium frame, glass, dynamic island). Everything inside scales with the phone width. */
.sx-pw{container-type:inline-size;position:relative;width:var(--xw,320px);max-width:100%;margin:0 auto}
.sx-p{position:relative;padding:3.4cqw;border-radius:15.5cqw;background:linear-gradient(145deg,#9aa0ab 0,#4a505b 14%,#171a21 40%,#2b303a 72%,#8b919c 100%);box-shadow:inset 0 0 0 .4cqw rgba(255,255,255,.32),inset 0 0 0 1px rgba(0,0,0,.4);filter:drop-shadow(0 46px 40px rgba(0,0,0,.5)) drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.sx-p>i{position:absolute;width:1cqw;border-radius:.6cqw;background:linear-gradient(90deg,#7a808a,#2a2e36)}
.sx-p .b1{left:-.8cqw;top:15%;height:3.6%}.sx-p .b2{left:-.8cqw;top:22%;height:7%}.sx-p .b3{left:-.8cqw;top:31%;height:7%}.sx-p .b4{right:-.8cqw;top:27%;height:11%}
.sx-p-s{position:relative;aspect-ratio:390/844;overflow:hidden;border-radius:12.2cqw;background:#05070c;color:#eef2f8;font:400 3.82cqw/1.3 Inter,system-ui,sans-serif;box-shadow:0 0 0 1.3cqw #030408;-webkit-user-select:none;user-select:none;pointer-events:none}
.sx-p-s::after{content:"";position:absolute;inset:0;z-index:70;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.09),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 72%,rgba(255,255,255,.035))}
.sx-i{position:absolute;z-index:60;top:.75em;left:50%;width:7.9em;height:2.3em;margin-left:-3.95em;border-radius:2em;background:#000}
.sx-i::after{content:"";position:absolute;right:.85em;top:50%;width:.85em;height:.85em;margin-top:-.42em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3b6b,#090c18 62%)}
.sx-s{position:absolute;z-index:58;top:0;left:0;right:0;height:3.5em;display:flex;align-items:center;justify-content:space-between;padding:.6em 2.1em 0 2.4em;font-size:.94em;font-weight:650}
.sx-s span{display:flex;align-items:center;gap:.4em}.sx-s svg{height:.8em;width:auto;fill:#fff}
.sx-h{position:absolute;z-index:62;bottom:.55em;left:50%;width:8.6em;height:.34em;margin-left:-4.3em;border-radius:1em;background:rgba(255,255,255,.75)}
.sx-b{position:absolute;inset:0;padding-top:3.6em;overflow:hidden;background:radial-gradient(110% 40% at 50% 0,rgba(24,120,255,.14),transparent 70%),#05070c}
.sx-a{display:flex;align-items:center;gap:.55em;padding:.7em 1.1em .6em}
.sx-a>div{flex:1;min-width:0}.sx-a small{display:block;font-size:.8em;color:#7d889b}.sx-a b{display:block;font-size:1.4em;font-weight:800;letter-spacing:-.02em}
.sx-ib{display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:#cfd6e2}
.sx-ib svg{width:1.15em;height:1.15em}.sx-ib.me{background:linear-gradient(145deg,#4aa8ff,#2750b8);color:#fff;font-size:.82em;font-weight:700}
.sx-t{display:flex;gap:1.5em;margin:0 1.1em;border-bottom:1px solid rgba(255,255,255,.08);font-size:.92em;font-weight:600;color:#667287}.sx-t span{padding:.6em 0 .7em}.sx-t .on{color:#fff;box-shadow:0 .2em 0 #18b2ff}
.sx-f{display:flex;gap:.5em;padding:.95em 1.1em 0}
.sx-f span{flex:1;display:flex;align-items:center;justify-content:center;gap:.35em;height:2.6em;border-radius:2em;font-size:.76em;font-weight:650;color:#9aa6ba;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sx-f svg{width:1.2em;height:1.2em}.sx-f .on{color:#fff;background:rgba(61,155,255,.16);box-shadow:inset 0 0 0 1px rgba(61,155,255,.55)}.sx-f .on svg{color:#6cb4ff}.sx-f .bu svg{color:#31d89e}.sx-f .se svg{color:#ff5d78}.sx-f .wa svg{color:#6cb4ff}
.sx-c{margin:.9em 1em 0;padding:1em;border-radius:1.5em;background:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 1.2em 2em -1.2em rgba(0,0,0,.8)}
.sx-c header{display:flex;align-items:center;gap:.7em}.sx-c header>div{flex:1;min-width:0}.sx-c header b{display:flex;align-items:center;gap:.4em;font-size:1em}.sx-c header small{font-size:.8em;color:#7d889b}.sx-c header small em{font-style:normal;color:#31d89e}
.sx-av{display:grid;place-items:center;flex:none;width:2.8em;height:2.8em;border-radius:50%;background:linear-gradient(145deg,var(--c,#a78bfa),#2d2760);font-size:.8em;font-weight:750;color:#fff;box-shadow:0 0 0 .18em #05070c,0 0 0 .3em rgba(227,197,140,.7)}
.sx-v{width:1.05em;height:1.05em;border-radius:50%;background:#e3c58c;color:#2b2210;display:inline-grid;place-items:center}.sx-v svg{width:.7em;height:.7em}
.sx-lv{padding:.25em .65em;border-radius:2em;font-size:.72em;font-weight:700;color:#c9b8ff;background:rgba(167,139,250,.15)}
.sx-c p{margin:.8em 0 0;font-size:.95em;line-height:1.45;color:#cdd5e1}
.sx-k{margin-top:.85em;padding:.9em;border-radius:1.2em;background:#080b11;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.sx-k-h{display:flex;align-items:center;gap:.7em}.sx-k-h>div{flex:1}.sx-k-h b{font-size:1.02em;margin-right:.45em}.sx-k-h small{display:block;font-size:.78em;color:#7d889b}
.sx-k-h i{font-style:normal;font-size:.68em;font-weight:700;padding:.3em .7em;border-radius:2em;color:#31d89e;background:rgba(49,216,158,.14);vertical-align:.1em}
.sx-k-h strong{font:800 1.45em/1 'Outfit',Inter,sans-serif;color:#31d89e;text-align:right}.sx-k-h strong small{margin-top:.35em;font:600 .5em Inter,sans-serif;color:#7d889b}
.sx-lg{display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:.8em;background:#141b27;font-size:.7em;font-weight:750;color:#9aa6ba}
.sx-k svg.ch{display:block;width:100%;height:6.6em;margin:.7em 0 .5em}
.sx-r{display:flex;align-items:center;gap:.8em;font-size:.72em;color:#7d889b}.sx-r span{display:grid;gap:.15em}.sx-r span:last-child{text-align:right}.sx-r b{font-size:1.15em;color:#fff}
.sx-r u{flex:1;height:.4em;border-radius:1em;background:rgba(255,255,255,.1);overflow:hidden;text-decoration:none}.sx-r u i{display:block;width:100%;height:100%;border-radius:1em;background:linear-gradient(90deg,#18b2ff,#31d89e)}
.sx-act{display:flex;gap:1.7em;margin-top:.85em;font-size:.85em;color:#7d889b}.sx-act span{display:flex;align-items:center;gap:.4em}.sx-act svg{width:1.25em;height:1.25em}
.sx-d{position:absolute;z-index:40;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:.8em .4em 2em;background:linear-gradient(180deg,rgba(5,7,12,.5),rgba(5,7,12,.97) 45%);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 -1px 0 rgba(255,255,255,.07)}
.sx-d span{display:grid;justify-items:center;gap:.25em;font-size:.68em;font-weight:650;color:#667287}.sx-d svg{width:2.2em;height:2.2em}.sx-d .on{color:#fff}.sx-d .on svg{color:#18b2ff}
.sx-h1{padding:.5em 1.1em 0}.sx-h1 b{display:block;font-size:1.7em;font-weight:800;letter-spacing:-.025em}.sx-h1 small{color:#7d889b;font-size:.85em}
.sx-seg{display:flex;margin:.9em 1.1em 0;padding:.25em;border-radius:.9em;background:rgba(255,255,255,.05)}.sx-seg span{flex:1;text-align:center;padding:.5em 0;border-radius:.7em;font-size:.82em;font-weight:650;color:#7d889b}.sx-seg .on{color:#fff;background:rgba(255,255,255,.12)}
.sx-br{margin:1em 1.1em 0}.sx-br div{display:flex;justify-content:space-between;font-size:.78em;color:#9aa6ba;font-weight:600}.sx-br div b{color:#31d89e}.sx-br div em{font-style:normal;color:#ff5d78}
.sx-br u{display:flex;height:.5em;margin-top:.5em;border-radius:1em;overflow:hidden;text-decoration:none;background:#ff5d78}.sx-br u i{display:block;width:68%;background:#31d89e}
.sx-hm{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:3.55em;gap:.35em;margin:1em 1.1em 0}
.sx-hm span{display:flex;flex-direction:column;justify-content:flex-end;padding:.55em .6em;border-radius:.8em;font-size:.74em;font-weight:700;line-height:1.15;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}.sx-hm span em{font-style:normal;font-weight:600;opacity:.85}
.sx-st{display:flex;gap:.6em;margin:.9em 1.1em 0}.sx-st div{flex:1;padding:.8em .9em;border-radius:1.1em;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:.8em;color:#7d889b}.sx-st b{display:block;margin-top:.25em;font-size:1.1em;color:#fff}.sx-st b em{font-style:normal;color:#31d89e}.sx-st div+div b em{color:#ff5d78}
.sx-cv{position:relative;height:9em;background:radial-gradient(90% 120% at 80% 0,rgba(120,100,255,.55),transparent 60%),linear-gradient(135deg,#1b2a6b,#0d1230 60%,#05070c)}
.sx-cv .sx-lv{position:absolute;right:1.1em;top:4.3em;font-size:.78em;color:#e3c58c;background:rgba(227,197,140,.12);box-shadow:inset 0 0 0 1px rgba(227,197,140,.4)}
.sx-pr{position:relative;padding:0 1.2em}.sx-pr .sx-av{width:5.6em;height:5.6em;margin-top:-2.8em;font-size:1.35em;box-shadow:0 0 0 .2em #05070c,0 0 0 .38em #e3c58c}
.sx-pr h3{display:flex;align-items:center;gap:.4em;margin:.7em 0 0;font-size:1.45em;font-weight:800}.sx-pr h3 .sx-v{width:.9em;height:.9em}
.sx-pr small{display:block;margin-top:.15em;color:#7d889b;font-size:.85em}
.sx-pr .fo{display:flex;gap:1.2em;margin-top:.7em;font-size:.88em;color:#7d889b}.sx-pr .fo b{color:#fff}.sx-pr .fo em{margin-left:auto;font-style:normal;font-weight:700;color:#ffab5c;padding:.2em .7em;border-radius:2em;box-shadow:inset 0 0 0 1px rgba(255,171,92,.4)}
.sx-sr{display:flex;margin:1em 1.1em 0;padding:.9em 0;border-radius:1.2em;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.sx-sr div{flex:1;text-align:center}.sx-sr div+div{box-shadow:-1px 0 0 rgba(255,255,255,.08)}.sx-sr b{display:block;font-size:1.3em;font-weight:800}.sx-sr b.up{color:#31d89e}.sx-sr small{font-size:.74em;color:#7d889b}
.sx-sc{display:flex;justify-content:space-between;align-items:baseline;margin:1.1em 1.2em .1em}.sx-sc b{font-size:1.05em}.sx-sc small{font-size:.8em;color:#7d889b}
.sx-bd{display:flex;gap:.6em;margin:.5em 1.1em 0}.sx-bd div{flex:1;display:grid;justify-items:center;gap:.3em;padding:.8em .3em .7em;border-radius:1.1em;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:.72em;font-weight:650;text-align:center}
.sx-bd [data-medal]{display:block;width:3.9em;height:3.9em}
.sx-rc{display:flex;align-items:center;gap:.7em;margin:.55em 1.1em 0;padding:.75em .9em;border-radius:1.1em;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.sx-rc>div{flex:1}.sx-rc b{font-size:.95em}.sx-rc small{display:block;font-size:.76em;color:#7d889b}.sx-rc strong{color:#31d89e;font-size:.95em}
.sx-rc em{font-style:normal;font-size:.68em;font-weight:700;color:#04261a;background:#31d89e;padding:.3em .7em;border-radius:2em}
/* page integration */
.hf2-stage{height:auto;padding:28px 0}.hf2-stage .sx-pw .hf2-float{z-index:80}
.sx-pw .hf2-float.f2{top:auto;bottom:15%;right:-13%}.sx-pw .hf2-float.f3{top:28%;bottom:auto;left:-13%}
.sc-stage .sx-pw{--xw:min(372px,100%)}
.sc-slide{padding:0!important}.sc-slide::after{display:none!important}
.pf-back{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:8px 14px 8px 10px;border-radius:999px;font:600 .85rem Inter,sans-serif;color:var(--pf-tx2,#a3acbd);text-decoration:none;box-shadow:inset 0 0 0 1px var(--pf-ln,rgba(255,255,255,.12));transition:color .2s,background .2s}.pf-back:hover{color:var(--pf-tx,#fff);background:rgba(255,255,255,.05)}.pf-back svg{width:16px;height:16px}
@media(max-width:520px){.sx-pw .hf2-float{transform:scale(.88)}.sx-pw .hf2-float.f2{right:-8%}.sx-pw .hf2-float.f3{left:-8%}}

/* v60 */
.sx-hd{display:flex;align-items:center;justify-content:space-between;padding:.7em 1.2em .2em}.sx-hd b{font-size:1.05em}.sx-hd span{font-size:.9em;color:#7d889b}
.sx-lb{margin:1.05em 1.2em .45em;font-size:.68em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#667287}
.sx-fld{display:flex;justify-content:space-between;align-items:center;margin:0 1.1em;padding:.8em 1em;border-radius:1.1em;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}.sx-fld b{font-size:1.3em}.sx-fld em{font-style:normal;font-weight:700;font-size:.85em;color:#31d89e}
.sx-dir{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;margin:0 1.1em}.sx-dir div{display:grid;justify-items:center;gap:.3em;padding:.8em 0;border-radius:1.1em;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);font-size:.82em;font-weight:700;color:#9aa6ba}.sx-dir svg{width:1.6em;height:1.6em}.sx-dir small{font-weight:500;font-size:.74em;color:#7d889b}
.sx-dir .on{color:#31d89e;background:rgba(49,216,158,.1);box-shadow:inset 0 0 0 1px rgba(49,216,158,.6),0 .8em 1.6em -.9em rgba(49,216,158,.8)}
.sx-tf{display:flex;gap:.4em;margin:0 1.1em}.sx-tf span{flex:1;text-align:center;padding:.6em 0;border-radius:2em;font-size:.72em;font-weight:650;color:#9aa6ba;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}.sx-tf .on{color:#fff;background:rgba(61,155,255,.16);box-shadow:inset 0 0 0 1px rgba(61,155,255,.55)}
.sx-tx{margin:0 1.1em;padding:.85em 1em;border-radius:1.1em;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);font-size:.88em;line-height:1.45;color:#cdd5e1}.sx-tx small{display:block;margin-top:.4em;text-align:right;font-size:.78em;color:#667287}
.sx-lk{display:flex;gap:.7em;align-items:center;margin:1em 1.2em 0;font-size:.74em;line-height:1.4;color:#9aa6ba}.sx-lk svg{flex:none;width:1.7em;height:1.7em;color:#e3c58c}
.sx-cta{position:absolute;left:1.1em;right:1.1em;bottom:2.3em;display:grid;place-items:center;height:3.1em;border-radius:2em;font-weight:750;color:#fff;background:linear-gradient(180deg,#34acff,#1668e6);box-shadow:0 1em 2em -.8em rgba(24,120,255,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.sx-ld{display:flex;align-items:center;gap:.6em;margin:.5em 1.1em 0;padding:.7em .8em;border-radius:1.2em;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sx-ld.top{background:linear-gradient(135deg,rgba(227,197,140,.17),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(227,197,140,.5),0 1em 2em -1.2em rgba(227,197,140,.7)}.sx-ld.me{background:rgba(61,155,255,.1);box-shadow:inset 0 0 0 1px rgba(61,155,255,.55)}
.sx-rk{width:1.4em;text-align:center;font:800 1.05em 'Outfit',Inter,sans-serif;color:#7d889b}.sx-ld.top .sx-rk{color:#e3c58c}
.sx-ld>div:not(.sx-hr){flex:1;min-width:0}.sx-ld b{display:flex;align-items:center;gap:.35em;font-size:.92em;white-space:nowrap}.sx-ld small{font-size:.72em;color:#7d889b;white-space:nowrap}.sx-ld .sx-av{width:2.5em;height:2.5em;font-size:.72em}
.sx-hr{text-align:right}.sx-hr strong{display:block;font-size:1.1em;color:#31d89e}.sx-hr small{font-size:.66em}
.sx-fb{padding:.4em .8em;border-radius:2em;font-size:.72em;font-weight:700;color:#fff;background:rgba(61,155,255,.2);box-shadow:inset 0 0 0 1px rgba(61,155,255,.6)}
.sx-wn{text-align:center;background:radial-gradient(90% 38% at 50% 27%,rgba(49,216,158,.3),transparent 70%),radial-gradient(110% 35% at 50% 0,rgba(24,120,255,.18),transparent 70%),#05070c!important}
.sx-pill{display:inline-flex;align-items:center;gap:.45em;margin-top:1.2em;padding:.45em 1em;border-radius:2em;font-size:.8em;font-weight:700;color:#e3c58c;background:rgba(227,197,140,.12);box-shadow:inset 0 0 0 1px rgba(227,197,140,.4)}
.sx-rg{position:relative;width:12.5em;height:12.5em;margin:1.2em auto 0}.sx-rg>svg{width:100%;height:100%;filter:drop-shadow(0 0 1em rgba(49,216,158,.45))}.sx-rg>div{position:absolute;inset:0;display:grid;place-content:center}.sx-rg strong{font:800 2.7em/1 'Outfit',Inter,sans-serif;color:#31d89e}.sx-rg small{margin-top:.6em;font-size:.82em;color:#9aa6ba}
.sx-sub{margin:.9em 0 .4em;font-size:.84em;color:#9aa6ba}
.sx-rw{display:flex;align-items:center;gap:.8em;margin:.6em 1.1em 0;padding:.8em 1em;border-radius:1.2em;text-align:left;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}.sx-rw>div{flex:1}.sx-rw b{display:block;font-size:.95em}.sx-rw small{font-size:.76em;color:#7d889b}
.sx-xp{height:.45em;margin-top:.55em;border-radius:1em;background:rgba(255,255,255,.1);overflow:hidden}.sx-xp i{display:block;width:64%;height:100%;background:linear-gradient(90deg,#18b2ff,#31d89e)}
.sx-p [data-medal] svg{width:100%;height:100%}

/* Real app screenshots inside the phone frame (Floor mockups) */
.sx-p-s.has-shot{background:#070810}
.sx-shot{position:absolute;z-index:1;left:0;top:5.57%;width:100%;height:auto;display:block;-webkit-user-drag:none}
.sx-p-s.has-shot .sx-s{text-shadow:0 1px 6px rgba(0,0,0,.35)}
/* Home-page phone: slow crossfade between the two screens, no JS needed */
.sx-xf .sx-shot{opacity:0;animation:sxXf 11s ease-in-out infinite}
.sx-xf .sx-shot+.sx-shot{animation-delay:-5.5s}
@keyframes sxXf{0%,4%{opacity:0}12%,46%{opacity:1}54%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.sx-xf .sx-shot{animation:none;opacity:0}.sx-xf .sx-shot:first-of-type{opacity:1}}
/* Phone depth: soft ground shadow under the device */
.hf2-stage .sx-pw::after,.sc-stage .sx-pw::after{content:"";position:absolute;left:12%;right:12%;bottom:-26px;height:34px;border-radius:50%;background:radial-gradient(closest-side,rgba(24,178,255,.28),transparent);filter:blur(10px);z-index:-1;pointer-events:none}