:root{--how-bg:#08070a;--how-panel:#121015;--how-text:#f8f5f7;--how-muted:#a09aa2;--how-line:#302b32;--how-pink:#ff2e78;--how-cyan:#25f4ee}:root[data-theme=light]{--how-bg:#f7f3f6;--how-panel:#fff;--how-text:#1d181c;--how-muted:#746d72;--how-line:#ded5db}.howPage{background:radial-gradient(circle at 83% 9%,#25f4ee10,transparent 24%),radial-gradient(circle at 10% 30%,#ff2e7817,transparent 26%),var(--how-bg);min-height:100vh;color:var(--how-text);padding-bottom:90px;font-family:Arial,sans-serif;overflow:hidden}.howPage *{box-sizing:border-box}.howPage header{z-index:10;border-bottom:1px solid var(--how-line);background:color-mix(in srgb,var(--how-bg) 88%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);justify-content:space-between;align-items:center;height:72px;padding:0 max(20px,5vw);display:flex;position:relative}.howLogo{isolation:isolate;display:block;position:relative}.howLogo img{content:url(/brand/scrollxxx-wordmark-transparent-dark.svg);width:158px;animation:6s ease-in-out infinite howLogoSettle;display:block}:root[data-theme=light] .howLogo img{content:url(/brand/scrollxxx-wordmark-light.svg)}.howLogo:before{content:"";z-index:-1;background:radial-gradient(#ff2e783d,#0000 68%);animation:4s ease-in-out infinite howLogoAura;position:absolute;inset:-12px}.howLogo:after{content:"";filter:blur(2px);background:linear-gradient(90deg,#0000,#fff8,#0000);width:22px;animation:5.5s cubic-bezier(.55,0,.25,1) infinite howLogoSweep;position:absolute;top:-4px;bottom:-4px;left:-35px;transform:skew(-18deg)}.backFeed{border:1px solid var(--how-line);color:var(--how-text);border-radius:999px;align-items:center;gap:10px;padding:10px 14px;font-size:12px;text-decoration:none;transition:all .2s;display:flex}.backFeed b{color:var(--how-pink);transition:transform .2s}.backFeed:hover{border-color:#ff2e7870}.backFeed:hover b{transform:translate(3px)}.howHero{grid-template-columns:minmax(0,1fr) minmax(330px,.72fr);align-items:center;gap:50px;max-width:1080px;min-height:690px;margin:auto;padding:70px 28px 80px;display:grid}.howHeroCopy>span,.howIntro>span,.howControl>div>span,.howNotes>div>span,.howCta>span{color:var(--how-pink);letter-spacing:.22em;font-size:10px;font-weight:900}.howHero h1{letter-spacing:-.065em;margin:17px 0 25px;font-size:clamp(54px,7.5vw,92px);line-height:.91}.howHero h1 em{color:#0000;background:linear-gradient(100deg,#ff2e78,#ff7bac 55%,#25f4ee);-webkit-background-clip:text;background-clip:text;font-style:normal}.howHeroCopy>p{max-width:610px;color:var(--how-muted);font-size:18px;line-height:1.7}.howHeroCopy>a{color:var(--how-text);align-items:center;gap:13px;margin-top:25px;font-size:12px;font-weight:800;text-decoration:none;display:inline-flex}.howHeroCopy>a b{color:#fff;background:#ff2e78;border-radius:50%;place-items:center;width:26px;height:26px;display:grid}.howPhoneWrap{perspective:1000px;place-items:center;min-height:520px;display:grid;position:relative}.howPhone{z-index:2;background:#0c0b0d;border:8px solid #29242b;border-radius:39px;width:270px;animation:5s ease-in-out infinite phoneFloat;position:relative;overflow:hidden;transform:rotateY(-7deg)rotateX(2deg);box-shadow:0 48px 90px #000b,0 0 0 1px #4a414b}.phoneTop{color:#eae5e8;justify-content:space-between;align-items:center;height:46px;padding:0 13px;font-size:9px;display:flex}.phoneTop i{background:#ff2e78;border-radius:50%;width:7px;height:7px;box-shadow:0 0 8px #ff2e78}.phoneTop b{color:#777}.phoneVideo{background:linear-gradient(155deg,#3d1728,#110d13 43%,#0d3234);height:355px;position:relative;overflow:hidden}.videoGlow{background:radial-gradient(circle,#ff4d8b55,#0000 66%);border-radius:50%;width:220px;height:220px;animation:4s ease-in-out infinite videoGlow;position:absolute;top:60px;left:25px}.playMark{background:#08060988;border:1px solid #fff5;border-radius:50%;place-items:center;width:54px;height:54px;font-size:16px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.phoneRail{gap:12px;display:grid;position:absolute;bottom:18px;right:12px}.phoneRail i{background:#080609aa;border-radius:50%;place-items:center;width:32px;height:32px;font-size:14px;font-style:normal;display:grid}.phoneMeta{gap:8px;height:82px;padding:14px;display:grid}.phoneMeta b{font-size:11px}.phoneMeta span{color:#a49ca4;font-size:8px}.howOrbit{border:1px solid #ff2e783b;border-radius:50%;animation:15s linear infinite orbitSpin;position:absolute}.orbitOne{width:430px;height:430px}.orbitTwo{border-color:#25f4ee2e;width:350px;height:350px;animation-duration:12s;animation-direction:reverse}.howOrbit:before{content:"";background:var(--how-pink);width:8px;height:8px;box-shadow:0 0 14px var(--how-pink);border-radius:50%;position:absolute;top:-4px;left:50%}.orbitTwo:before{background:var(--how-cyan);box-shadow:0 0 14px var(--how-cyan)}.floatingChip{z-index:3;color:#ddd5db;background:#171319e8;border:1px solid #423943;border-radius:999px;padding:9px 12px;font-size:9px;font-weight:800;animation:4s ease-in-out infinite chipDrift;position:absolute;box-shadow:0 8px 25px #0007}.chipOne{top:24%;left:0}.chipTwo{animation-delay:-1.5s;top:47%;right:-5px}.chipThree{animation-delay:-2.7s;bottom:17%;left:5%}.howIntro{max-width:1024px;margin:0 auto 30px;padding:30px 28px}.howIntro h2{letter-spacing:-.045em;margin:10px 0 8px;font-size:clamp(36px,5vw,56px)}.howIntro p{color:var(--how-muted);margin:0;font-size:15px}.howTimeline{grid-template-columns:1fr 1fr;gap:14px;max-width:1024px;margin:auto;padding:0 28px;display:grid;position:relative}.howTimeline:before{content:"";background:linear-gradient(transparent,var(--how-pink),var(--how-cyan),transparent);opacity:.35;width:1px;position:absolute;top:20px;bottom:20px;left:50%}.howStep{border:1px solid var(--how-line);background:linear-gradient(145deg,color-mix(in srgb,var(--how-panel) 95%,#ff2e78),var(--how-panel));min-height:190px;transition:border-color .25s,transform .25s,box-shadow .25s;transition-delay:var(--step-delay);border-radius:20px;grid-template-columns:42px 48px 1fr;align-items:start;gap:14px;padding:25px;display:grid;position:relative}.howStep:hover{border-color:#ff2e7860;transform:translateY(-4px);box-shadow:0 22px 50px #0005}.stepNumber{color:#736c74;letter-spacing:.12em;padding-top:15px;font-size:10px;font-weight:900}.stepIcon{color:#ff6a9e;background:#26121b;border:1px solid #49333e;border-radius:15px;place-items:center;width:48px;height:48px;font-size:18px;font-weight:900;display:grid}.howStep h2{margin:4px 0 10px;font-size:21px}.howStep p{color:var(--how-muted);margin:0;font-size:13px;line-height:1.65}.howControl{border:1px solid var(--how-line);background:radial-gradient(circle at 85% 45%,#25f4ee18,transparent 30%),radial-gradient(circle at 75% 50%,#ff2e781b,transparent 48%),var(--how-panel);border-radius:28px;grid-template-columns:1fr 300px;align-items:center;gap:50px;max-width:968px;margin:90px auto 0;padding:48px;display:grid}.howControl h2{letter-spacing:-.045em;margin:12px 0;font-size:clamp(36px,5vw,56px)}.howControl p{max-width:580px;color:var(--how-muted);margin:0;line-height:1.7}.controlRings{place-items:center;width:240px;height:240px;margin:auto;display:grid;position:relative}.controlRings i{border:1px solid #ff2e7844;border-radius:50%;animation:4s ease-in-out infinite ringPulse;position:absolute}.controlRings i:first-child{inset:0}.controlRings i:nth-child(2){border-color:#25f4ee44;animation-delay:-1.3s;inset:34px}.controlRings i:nth-child(3){animation-delay:-2.6s;inset:68px}.controlRings b{letter-spacing:.12em;background:linear-gradient(135deg,#ff2e78,#812442);border-radius:50%;place-items:center;width:68px;height:68px;font-size:11px;display:grid;box-shadow:0 0 40px #ff2e7845}.howNotes{grid-template-columns:.75fr 1.25fr;gap:60px;max-width:968px;margin:90px auto 0;padding:0 5px;display:grid}.howNotes h2{letter-spacing:-.04em;margin:12px 0;font-size:36px;line-height:1.05}.howNotes ul{border-top:1px solid var(--how-line);gap:0;margin:0;padding:0;list-style:none;display:grid}.howNotes li{border-bottom:1px solid var(--how-line);grid-template-columns:150px 1fr;gap:20px;padding:18px 0;display:grid}.howNotes li b{font-size:12px}.howNotes li span{color:var(--how-muted);font-size:12px;line-height:1.55}.howCta{text-align:center;background:linear-gradient(125deg,#391321,#171015 58%,#103337);border-radius:30px;max-width:968px;margin:95px auto 0;padding:72px 28px}.howCta h2{letter-spacing:-.055em;margin:12px 0 26px;font-size:clamp(42px,7vw,72px)}.howCta>a{color:#171015;background:#fff;border-radius:999px;align-items:center;gap:12px;padding:14px 20px;font-size:12px;font-weight:900;text-decoration:none;display:inline-flex}.howCta>a b{color:#ff2e78}.howReveal{opacity:0;transition:opacity .75s,transform .75s cubic-bezier(.2,.75,.25,1);transform:translateY(28px)}.howReveal.isVisible{opacity:1;transform:none}@keyframes phoneFloat{0%,to{transform:rotateY(-7deg)rotateX(2deg)translateY(0)}50%{transform:rotateY(-4deg)rotateX(1deg)translateY(-12px)}}@keyframes orbitSpin{to{transform:rotate(360deg)}}@keyframes chipDrift{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes videoGlow{0%,to{opacity:.65;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}@keyframes ringPulse{0%,to{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}@keyframes howLogoSettle{0%,72%,to{filter:none;transform:translate(0)}76%{filter:drop-shadow(2px 0 #25f4ee)drop-shadow(-2px 0 #ff2e78);transform:translate(-1px)}80%{transform:translate(1px)}84%{filter:drop-shadow(0 0 8px #ff2e7866);transform:translate(0)}}@keyframes howLogoAura{0%,to{opacity:.25;transform:scale(.9)}50%{opacity:.65;transform:scale(1.05)}}@keyframes howLogoSweep{0%,58%{opacity:0;left:-35px}64%{opacity:.8}78%{opacity:0;left:170px}to{opacity:0;left:170px}}@media (width<=850px){.howHero{grid-template-columns:1fr;min-height:0;padding-top:65px}.howHeroCopy{text-align:center}.howHeroCopy>p{margin-left:auto;margin-right:auto}.howHeroCopy>a{justify-content:center}.howPhoneWrap{min-height:560px}.howTimeline{grid-template-columns:1fr}.howTimeline:before{display:none}.howControl{grid-template-columns:1fr;margin-left:20px;margin-right:20px}.howNotes{grid-template-columns:1fr;gap:25px;margin-left:28px;margin-right:28px}.howCta{margin-left:20px;margin-right:20px}}@media (width<=560px){.howPage header{height:64px;padding:0 16px}.howLogo img{width:137px}.backFeed span{display:none}.backFeed{justify-content:center;width:38px;height:38px;padding:0}.howHero{padding:55px 18px 60px}.howHero h1{font-size:52px}.howHeroCopy>p{font-size:16px}.howPhoneWrap{min-height:470px;margin:-30px 0;transform:scale(.86)}.howTimeline{padding:0 16px}.howStep{grid-template-columns:36px 42px 1fr;min-height:0;padding:20px}.stepIcon{width:42px;height:42px}.howControl{padding:30px 22px}.controlRings{width:200px;height:200px}.howNotes li{grid-template-columns:1fr;gap:7px}.howCta{padding:55px 20px}}@media (prefers-reduced-motion:reduce){.howPage *{scroll-behavior:auto!important}.howLogo:before,.howLogo:after,.howLogo img,.howPhone,.howOrbit,.floatingChip,.videoGlow,.controlRings i{animation:none!important}.howReveal{opacity:1;transition:none;transform:none}}