/* Dojostreams setup guides page (ADR 0026). Built from docs/design/guides/guides-mobile.dc.html (phone, below 768 px)
 * and guides-desktop.dc.html (from 768 px): the designs' values, easings and delays are kept. Differences: one markup
 * for both (.mob / .dsk show one or the other), the hero plays on load with CSS only, and the front card of the deck
 * sits in the page flow (natural height, no layout shift) while the others stay absolute. Header, phone menu, footer,
 * fonts and page base: ../site/site.css (loaded first). Keyframes are prefixed g-. */

/* ================= base ================= */
.dj-guides main *,.dj-guides main *::before,.dj-guides main *::after{box-sizing:border-box}
@media (max-width:767px){.dj-guides .dsk{display:none!important}}
@media (min-width:768px){.dj-guides .mob{display:none!important}}
.dj-guides [hidden]{display:none!important}
.dj-guides .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dj-guides .eyebrow{font:600 12px Lexend,dj-lexend-fb,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5A2FE0}
.dj-guides .h1{font:600 38px/1.06 Lexend,dj-lexend-fb,sans-serif;letter-spacing:-.03em;margin:0;color:#2F1C6A}
.dj-guides .h2{font:600 30px/1.1 Lexend,dj-lexend-fb,sans-serif;letter-spacing:-.025em;margin:0;color:#2F1C6A}
.dj-guides .pu{color:#673DE6}
.dj-guides .p{font:400 16px/1.55 'DM Sans',dj-dmsans-fb,sans-serif;margin:0;color:#494C4F}
.dj-guides .sm{font:400 13px/1.45 'DM Sans',dj-dmsans-fb,sans-serif;margin:0}
.dj-guides .mut{color:#5E6175}
.dj-guides .annc .wrap{margin-left:auto;margin-right:auto} /* the shared announcement bar is "wrap sm": keep it centred despite .sm{margin:0} */
.dj-guides .card{background:#fff;border:1px solid #ECEAF8;border-radius:24px;box-shadow:0 1px 2px rgba(47,28,106,.06),0 12px 28px -10px rgba(103,61,230,.24),0 40px 80px -30px rgba(103,61,230,.32)}
.dj-guides .btn2{height:52px;border-radius:999px;border:1.5px solid #D9D6EE;background:#fff;color:#2F1C6A;font:500 15px Lexend,dj-lexend-fb,sans-serif;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;padding:0 20px;transition:border-color .2s,transform .2s}
.dj-guides .btn2:hover{color:#2F1C6A}
.dj-guides .btn2:active{transform:scale(.98)}
.dj-guides .pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:#F7F6FD;border:1px solid #ECEAF8;font:500 13px Lexend,dj-lexend-fb,sans-serif;color:#2F1C6A}
.dj-guides .chip{display:inline-flex;align-items:center;gap:4px;font:500 12px Lexend,dj-lexend-fb,sans-serif;padding:3px 9px;border-radius:999px;white-space:nowrap}
.dj-guides .chip.lav{background:#F0EDFF;color:#4B25C9}.dj-guides .chip.green{background:#E2F7F1;color:#00785F}.dj-guides .chip.grey{background:#F1F0F6;color:#494C4F}.dj-guides .chip.solid{background:#673DE6;color:#fff}
.dj-guides .isq{width:40px;height:40px;border-radius:12px;background:#F0EDFF;color:#673DE6;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.dj-guides .isq img{display:block;object-fit:contain;border-radius:6px}
.dj-guides .tl{font:600 15px/1.3 Lexend,dj-lexend-fb,sans-serif;color:#2F1C6A}
.dj-guides .lnk{font:500 14px 'DM Sans',dj-dmsans-fb,sans-serif;color:#5A2FE0;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.dj-guides .lnk:hover{color:#2F1C6A}
.dj-guides .back{border:0;background:none;padding:0 2px;min-height:44px;display:inline-flex;align-items:center;gap:6px;font:500 13px Lexend,dj-lexend-fb,sans-serif;color:#5A2FE0;cursor:pointer}
.dj-guides form{margin:0}
.dj-guides .lnk:focus-visible,.dj-guides .btn2:focus-visible,.dj-guides .wab:focus-visible,.dj-guides .vid:focus-visible,.dj-guides .hdot:focus-visible,.dj-guides .fqh a:focus-visible,.dj-guides .rb a:focus-visible{outline:2px solid #673DE6;outline-offset:3px}
.dj-guides .ctitle:focus{outline:none}
@keyframes g-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes g-cardUp{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
@keyframes g-slideIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
/* Phones: the Depth switch scales and fades without blur (measured 2026-10-26: blurring the big cards was 2/3 of the
 * drawing work on a weak phone chip); desktop keeps the design's blur (redefined in the 768 px block). */
@keyframes g-focusIn{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
@keyframes g-softIn{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes g-depthOut{0%{transform:none;opacity:1}100%{transform:translateY(-16px) scale(.92);opacity:0}}
@keyframes g-pop{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}
@keyframes g-pulse{from{box-shadow:0 0 0 0 rgba(103,61,230,.38)}to{box-shadow:0 0 0 14px rgba(103,61,230,0)}}
@keyframes g-sheen{0%{transform:translateX(-125%) skewX(-16deg);opacity:1}90%{opacity:1}100%{transform:translateX(250%) skewX(-16deg);opacity:0}}
@keyframes g-draw{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
@keyframes g-grow{from{transform:scaleY(0)}to{transform:none}}

/* ================= hero (plays once on load, CSS only) ================= */
.dj-guides .hero{position:relative;background:linear-gradient(180deg,#FFFFFF 0%,#F4F5FF 100%)}
.dj-guides .bloom{position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 32% at 92% 10%,rgba(103,61,230,.20),transparent 70%),radial-gradient(50% 30% at 0% 60%,rgba(95,101,244,.10),transparent 70%)}
@media (max-width:1099px){.dj-guides .hero{padding-top:64px}} /* the sticky phone header overlaps the hero */
.dj-guides .hwrap{padding:0;max-width:none}
.dj-guides .hr{position:relative;z-index:1;padding:16px 20px 28px;display:flex;flex-direction:column;gap:14px}
.dj-guides .hlnk{display:none}
.dj-guides .hero.lm .hdef{display:none}
.dj-guides .hero.lm .hlnk{display:flex;padding-bottom:12px}
.dj-guides .hlnk .h1{font-size:34px}
.dj-guides .hlnk .pills{display:flex;gap:6px;flex-wrap:wrap}
.dj-guides .hero .hr>*{animation:g-rise .8s cubic-bezier(.16,1,.3,1) both}
.dj-guides .hero .hr>*:nth-child(2){animation-delay:.07s}.dj-guides .hero .hr>*:nth-child(3){animation-delay:.14s}.dj-guides .hero .hr>*:nth-child(4){animation-delay:.21s}.dj-guides .hero .hr>*:nth-child(5){animation-delay:.28s}

/* hero TV (boot screen) · compact, with three trust bubbles */
@keyframes g-tvIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes g-screenOn{from{opacity:0;transform:scale(1.015);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes g-floatIn{from{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes g-fadeIn{from{opacity:0}to{opacity:1}}
@keyframes g-tileIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes g-shadowIn{from{opacity:0;transform:scaleX(.7)}to{opacity:1;transform:none}}
@keyframes g-logoIn{from{opacity:0;transform:scale(.92);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes g-bootOut{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:scale(1.03);filter:blur(4px)}}
@keyframes g-load{0%{transform:scaleX(0)}42%{transform:scaleX(.46)}58%{transform:scaleX(.46)}100%{transform:scaleX(1)}}
.dj-guides .mill{position:relative;margin:12px auto 0;width:350px;height:214px}
@media (max-width:389px){.dj-guides .hdef .h1{font-size:34px}} /* narrow phones: the headline keeps the design's two lines */
@media (max-width:389px){.dj-guides .mill{margin-left:calc(50% - 175px);transform:scale(.914);transform-origin:50% 0;margin-bottom:-18px}}
.dj-guides .mtvw{position:absolute;z-index:1;left:25px;top:6px;width:300px}
.dj-guides .mtv{position:relative;border-radius:7px;padding:3px;background:linear-gradient(180deg,#2C2742 0%,#15121F 100%);box-shadow:0 0 0 1px #100D19,inset 0 1px 0 rgba(255,255,255,.14),0 20px 40px -24px rgba(47,28,106,.5),0 50px 80px -40px rgba(103,61,230,.35)}
.dj-guides .mtv::after{content:"";position:absolute;left:50%;bottom:-5px;width:52px;height:6px;margin-left:-26px;border-radius:0 0 4px 4px;clip-path:polygon(0 0,100% 0,95% 100%,5% 100%);background:linear-gradient(#5A5370,#5A5370) 50% 2px/10px 1.5px no-repeat,linear-gradient(180deg,#221E33 0%,#15121F 100%)}
.dj-guides .mscr{position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:#0E0A1C}
.dj-guides .mlit{position:absolute;inset:0;background:linear-gradient(160deg,#FFFFFF 0%,#F1EDFF 100%)}
.dj-guides .mlit::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;pointer-events:none;opacity:0;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45) 48%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.45) 52%,rgba(255,255,255,0));transform:translateX(-125%) skewX(-16deg);z-index:6}
.dj-guides .mapp{position:absolute;inset:0;padding:9px 10px;display:flex;flex-direction:column;gap:7px}
.dj-guides .mtop{display:flex;align-items:center;gap:5px}
.dj-guides .mwm{font:600 7.5px Lexend,dj-lexend-fb,sans-serif;letter-spacing:.12em;color:#171420}
.dj-guides .mrdy{margin-left:auto;display:inline-flex;align-items:center;gap:3px;height:15px;padding:0 6px;border-radius:999px;background:#E2F7F1;color:#00785F;font:500 8px Lexend,dj-lexend-fb,sans-serif}
.dj-guides .mfeat{flex:1;border-radius:7px;background:radial-gradient(60% 90% at 90% 0%,rgba(255,255,255,.22),transparent 65%),linear-gradient(135deg,#7651F0 0%,#673DE6 50%,#4B25C9 100%);display:flex;align-items:flex-end;gap:8px;padding:9px}
.dj-guides .mpl{width:24px;height:24px;border-radius:50%;background:#fff;color:#673DE6;display:flex;align-items:center;justify-content:center;flex:none}
.dj-guides .mfb{display:flex;flex-direction:column;gap:4px;padding-bottom:3px}
.dj-guides .mfb i{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.55)}
.dj-guides .mtrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.dj-guides .mtrow i{display:block;aspect-ratio:16/10;border-radius:5px}
.dj-guides .mboot{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(60% 70% at 50% 45%,#FFFFFF 0%,#FBFAFF 60%,#F4F1FF 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0}
.dj-guides .mbw{font:600 9.5px Lexend,dj-lexend-fb,sans-serif;letter-spacing:.16em;color:#171420}
.dj-guides .mlbar{width:78px;height:2.5px;border-radius:3px;background:#ECE8FB;overflow:hidden;margin-top:5px}
.dj-guides .mlbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#9C86F5,#673DE6);transform-origin:0 50%}
.dj-guides .mfeet{position:relative;height:22px}
.dj-guides .mblade{position:absolute;top:-2px;width:32px;height:4px;background:linear-gradient(180deg,#3A3452 0%,#15121F 100%);clip-path:polygon(0 30%,100% 0,100% 100%,0 70%)}
.dj-guides .mblade.l{left:-11px;transform-origin:100% 50%;transform:rotate(-32deg)}
.dj-guides .mblade.r{right:-11px;transform-origin:0 50%;transform:rotate(32deg);clip-path:polygon(0 0,100% 30%,100% 70%,0 100%)}
.dj-guides .mmount{position:absolute;top:-2px;width:12px;height:3px;border-radius:0 0 2px 2px;background:#15121F}
.dj-guides .mmount.l{left:14px}.dj-guides .mmount.r{right:14px}
.dj-guides .mfloor{position:absolute;left:10px;width:330px;top:192px;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(47,28,106,.15),transparent)}
.dj-guides .mtbs{list-style:none;margin:0;padding:0}
.dj-guides .mtb{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px 0 4px;border-radius:999px;background:#fff;border:1px solid #ECEAF8;font:500 11px Lexend,dj-lexend-fb,sans-serif;color:#2F1C6A;white-space:nowrap;box-shadow:0 1px 2px rgba(47,28,106,.05),0 10px 22px -12px rgba(103,61,230,.28),0 22px 40px -24px rgba(103,61,230,.3)}
.dj-guides .mtb .tk{width:17px;height:17px;border-radius:50%;background:#E2F7F1;color:#00896D;display:flex;align-items:center;justify-content:center;flex:none}
.dj-guides .mtb1{left:4px;top:-12px}
.dj-guides .mtb2{right:2px;top:88px}
.dj-guides .mtb3{left:8px;top:162px}
.dj-guides .hero .mtvw{animation:g-tvIn 1s cubic-bezier(.16,1,.3,1) .35s both}
.dj-guides .hero .mfloor{animation:g-shadowIn 1s cubic-bezier(.16,1,.3,1) .5s both}
.dj-guides .hero .mlit{animation:g-screenOn .9s cubic-bezier(.16,1,.3,1) .85s both}
.dj-guides .hero .mboot{animation:g-bootOut .7s cubic-bezier(.4,0,.2,1) 2.6s both}
.dj-guides .hero .mboot svg{animation:g-logoIn .9s cubic-bezier(.16,1,.3,1) 1.05s both}
.dj-guides .hero .mbw{animation:g-rise .8s cubic-bezier(.16,1,.3,1) 1.25s both}
.dj-guides .hero .mlbar{animation:g-fadeIn .4s ease 1.35s both}
.dj-guides .hero .mlbar i{animation:g-load 1.1s cubic-bezier(.45,0,.55,1) 1.45s both}
.dj-guides .hero .mtop{animation:g-fadeIn .6s ease 2.8s both}
.dj-guides .hero .mfeat{animation:g-tileIn .8s cubic-bezier(.16,1,.3,1) 2.87s both}
.dj-guides .hero .mtrow i{animation:g-tileIn .7s cubic-bezier(.16,1,.3,1) both}
.dj-guides .hero .mtrow i:nth-child(1){animation-delay:3s}.dj-guides .hero .mtrow i:nth-child(2){animation-delay:3.08s}.dj-guides .hero .mtrow i:nth-child(3){animation-delay:3.16s}.dj-guides .hero .mtrow i:nth-child(4){animation-delay:3.24s}
.dj-guides .hero .mtb1{animation:g-floatIn 1s cubic-bezier(.16,1,.3,1) 3.1s both}
.dj-guides .hero .mtb2{animation:g-floatIn 1s cubic-bezier(.16,1,.3,1) 3.3s both}
.dj-guides .hero .mtb3{animation:g-floatIn 1s cubic-bezier(.16,1,.3,1) 3.5s both}
.dj-guides .hero .mtb .tk{animation:g-pop .45s cubic-bezier(.34,1.56,.64,1) both}
.dj-guides .hero .mtb1 .tk{animation-delay:3.4s}.dj-guides .hero .mtb2 .tk{animation-delay:3.6s}.dj-guides .hero .mtb3 .tk{animation-delay:3.8s}
.dj-guides .hero .mlit::after{animation:g-sheen 1.3s cubic-bezier(.25,.1,.25,1) 4.2s both}

/* ================= how it works (phone: swipe carousel) =================
 * Two accessibility changes from the design, as on the trial page: faded cards at 88 % (design 60 %) so their text
 * keeps AA contrast, and the dots 16 px apart (design 6 px) for the 24 px tap-target spacing. */
.dj-guides .how{background:#F4F5FF;padding:8px 0 28px}
.dj-guides .hww{padding:0;display:flex;flex-direction:column;gap:14px}
.dj-guides .hwh{padding:0 20px;display:flex;justify-content:space-between;align-items:flex-end}
.dj-guides .hwt{display:flex;flex-direction:column;gap:6px}
.dj-guides .hwt2{font:600 20px/1.2 Lexend,dj-lexend-fb,sans-serif;letter-spacing:-.015em}
.dj-guides .hstage{position:relative;overflow-x:auto;padding:4px 0 16px}
.dj-guides .how.js .hstage{overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.dj-guides .how.js .hstage:active{cursor:grabbing}
.dj-guides .htrack{display:flex;gap:12px;padding:0 24px;transition:transform .75s cubic-bezier(.16,1,.3,1);will-change:transform;width:max-content}
.dj-guides .htrack.i0{transform:translateX(0)}.dj-guides .htrack.i1{transform:translateX(var(--h1,-274px))}.dj-guides .htrack.i2{transform:translateX(var(--h2,-468px))}
.dj-guides .how.inn .htrack.hint{animation:g-nudge 1.2s cubic-bezier(.65,0,.35,1) 1.15s both}
@keyframes g-nudge{0%{transform:translateX(0)}45%{transform:translateX(-30px)}100%{transform:translateX(0)}}
.dj-guides .hcard{flex:none;width:262px;padding:18px;border-radius:20px;background:#fff;border:1px solid #ECEAF8;display:flex;flex-direction:column;gap:10px;box-shadow:0 12px 28px -18px rgba(103,61,230,.35);transition:opacity .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.dj-guides .hcard .sm{font-size:14px}
.dj-guides .hcard.off{opacity:.88;box-shadow:0 8px 20px -18px rgba(103,61,230,.3)}
.dj-guides .num{width:32px;height:32px;border-radius:50%;background:#F0EDFF;color:#4B25C9;font:600 14px Lexend,dj-lexend-fb,sans-serif;display:flex;align-items:center;justify-content:center}
.dj-guides .hdots{display:flex;gap:16px;justify-content:center;align-items:center;margin-top:-2px}
.dj-guides .how:not(.js) .hdots{display:none!important}
.dj-guides .hdot{position:relative;width:8px;height:8px;border-radius:8px;border:0;padding:0;background:#D9D6EE;cursor:pointer;transition:width .5s cubic-bezier(.16,1,.3,1),background-color .3s}
.dj-guides .hdot::before{content:"";position:absolute;inset:-14px -6px}
.dj-guides .hdot.on{width:24px;background:#673DE6}
.dj-guides .swipe{display:inline-flex;align-items:center;gap:4px}
.dj-guides .swipe svg{color:#9C86F5}
.dj-guides .how.wait .hwh>*,.dj-guides .how.wait .hcard,.dj-guides .how.wait .hdots{opacity:0}
.dj-guides .how.inn .hwh>*{animation:g-rise .8s cubic-bezier(.16,1,.3,1) both}
.dj-guides .how.inn .hwh>*:nth-child(2){animation-delay:.07s}
.dj-guides .how.inn .hcard{animation:g-slideIn .85s cubic-bezier(.16,1,.3,1) backwards}
.dj-guides .how.inn .hcard:nth-child(1){animation-delay:.14s}.dj-guides .how.inn .hcard:nth-child(2){animation-delay:.24s}.dj-guides .how.inn .hcard:nth-child(3){animation-delay:.34s}
.dj-guides .how.inn .hdots{animation:g-rise .7s cubic-bezier(.16,1,.3,1) .5s both}
.dj-guides .how.inn .swipe svg{animation:g-hintArrow 1.2s cubic-bezier(.65,0,.35,1) 1.15s both}
@keyframes g-hintArrow{0%,100%{transform:none}45%{transform:translateX(4px)}}

/* ================= stepper ================= */
.dj-guides .stp{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0 6px}
.dj-guides .stp li{display:flex;align-items:center;gap:8px;font:500 13px Lexend,dj-lexend-fb,sans-serif;color:#5E6175;white-space:nowrap;transition:color .4s}
.dj-guides .stp .n{position:relative;width:28px;height:28px;border-radius:50%;border:1.5px solid #E4DFFA;display:flex;align-items:center;justify-content:center;background:#fff;flex:none;transition:border-color .4s,box-shadow .5s,transform .2s}
.dj-guides .stp .n .bg{position:absolute;inset:-1.5px;border-radius:50%;background:#673DE6;transform:scale(0);transition:transform .55s cubic-bezier(.34,1.4,.64,1),background-color .4s}
.dj-guides .stp .n .nm{position:relative;font:600 12px Lexend,dj-lexend-fb,sans-serif;color:#5E6175;transition:color .3s,opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.dj-guides .stp .n .ic{position:absolute;color:#00896D;opacity:0;transform:scale(.4);transition:opacity .25s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.dj-guides .stp li.on{color:#2F1C6A}
.dj-guides .stp li.on .n{border-color:#673DE6;box-shadow:0 0 0 4px rgba(103,61,230,.16)}
.dj-guides .stp li.on .n .bg{transform:scale(1)}
.dj-guides .stp li.on .n .nm{color:#fff}
.dj-guides .stp li.ok{color:#2F1C6A}
.dj-guides .stp li.ok .n{border-color:#E2F7F1}
.dj-guides .stp li.ok .n .bg{transform:scale(1);background:#E2F7F1}
.dj-guides .stp li.ok .n .nm{opacity:0;transform:scale(.5)}
.dj-guides .stp li.ok .n .ic{opacity:1;transform:none;transition-delay:.12s}
.dj-guides .stp .sb{display:flex;align-items:center;gap:8px;border:0;background:none;padding:0 4px 0 0;margin:0;font:inherit;color:inherit;min-height:44px;border-radius:999px;cursor:default}
.dj-guides .stp .sb:disabled{opacity:1;color:inherit}
.dj-guides .stp li.ok .sb{cursor:pointer}
.dj-guides .stp li.ok .sb:hover{color:#673DE6}
.dj-guides .stp li.ok .sb:hover .n{box-shadow:0 0 0 4px rgba(0,137,109,.14)}
.dj-guides .stp li.ok .sb:active .n{transform:scale(.92)}
.dj-guides .stp .sb:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(103,61,230,.25)}
.dj-guides .stp .ln{flex:1;height:2px;min-width:12px;border-radius:2px;background:#E9E5FB;overflow:hidden;padding:0}
.dj-guides .stp .ln i{display:block;height:100%;background:#673DE6;transform:scaleX(0);transform-origin:0 50%;transition:transform .55s cubic-bezier(.65,0,.35,1)}
.dj-guides .stp .ln i.on{transform:scaleX(1)}

/* ================= wizard + deck (Depth) ================= */
.dj-guides .wz{background:#F4F5FF;padding:8px 14px 36px}
.dj-guides .wzw{padding:0;display:flex;flex-direction:column;gap:14px}
.dj-guides .wz.wait .stp,.dj-guides .wz.wait .deck{opacity:0}
.dj-guides .wz.inn .stp{animation:g-rise .7s cubic-bezier(.16,1,.3,1) both}
.dj-guides .wz.inn .deck{animation:g-cardUp .9s cubic-bezier(.16,1,.3,1) .1s both}
.dj-guides .deck{position:relative;display:flow-root;transition:height .55s cubic-bezier(.2,.8,.2,1)} /* flow-root: the front card's top margin stays inside */
.dj-guides .mcard{position:absolute;left:0;right:0;top:44px;min-height:150px;background:#fff;border:1px solid #ECEAF8;border-radius:24px;box-shadow:0 1px 2px rgba(47,28,106,.06),0 12px 28px -10px rgba(103,61,230,.24),0 40px 80px -30px rgba(103,61,230,.32);transform-origin:50% 0;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s cubic-bezier(.2,.8,.2,1),top .85s cubic-bezier(.16,1,.3,1)} /* shadow and background switch with the slot: fading them repaints the whole card every frame */
.dj-guides .face{position:absolute;left:0;right:0;top:0;height:150px;padding:14px 18px;display:flex;justify-content:space-between;align-items:flex-start;font:600 13px Lexend,dj-lexend-fb,sans-serif;color:#2F1C6A;transition:opacity .3s}
.dj-guides .cin{position:absolute;left:0;right:0;top:0;padding:20px;display:flex;flex-direction:column;gap:16px;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s}
.dj-guides .mcard.s0 .face,.dj-guides .mcard.sx .face{opacity:0}
.dj-guides .mcard.s0 .cin,.dj-guides .mcard.sx .cin{position:relative;opacity:1;visibility:visible;transition:opacity .25s,visibility 0s} /* visible at once, so focus can move to it */
.dj-guides .mcard:not(.s0) .cin{pointer-events:none}
/* the front card is in the page flow (the deck takes its height); the others stay absolute behind it */
.dj-guides .s0{position:relative;top:0;margin-top:44px;z-index:5;transform:none;transition:transform .85s cubic-bezier(.16,1,.3,1) .08s,opacity .5s,margin-top .85s cubic-bezier(.16,1,.3,1)}
.dj-guides .s0 .cin{animation:g-focusIn .8s cubic-bezier(.16,1,.3,1) .22s both}
.dj-guides .s1{z-index:4;transform:translate(-4px,-28px) rotate(-3deg) scale(.95);box-shadow:0 12px 30px -12px rgba(103,61,230,.3)}
.dj-guides .s2{z-index:3;transform:translate(14px,-44px) rotate(3deg) scale(.9);background:#F7F5FF;box-shadow:0 10px 24px -12px rgba(103,61,230,.25)}
.dj-guides .sx{z-index:6;opacity:0;pointer-events:none;animation:g-depthOut .6s cubic-bezier(.4,0,1,1) forwards}
.dj-guides .sx.still{animation:none;visibility:hidden}
.dj-guides .s0.still .cin{animation:none}
.dj-guides .deck.nopeek .mcard{top:14px}
.dj-guides .deck.nopeek .s0{margin-top:14px}

/* Phones: the sections below the deck move as layers while the deck changes height (as on the trial page) */
@media (max-width:767px){.dj-guides .faq,.dj-guides .ast,.dj-guides .ft{will-change:transform}}

/* card header rows */
.dj-guides .chead{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:14px;border-bottom:1px solid #EFEDF8}
.dj-guides .chl{display:flex;align-items:center;gap:10px;min-width:0}
.dj-guides .cdn{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dj-guides .ghw{display:flex;flex-direction:column;gap:2px;min-width:0}
.dj-guides .ctw{display:flex;flex-direction:column;gap:6px}
.dj-guides .ctitle{font:600 20px/1.2 Lexend,dj-lexend-fb,sans-serif;letter-spacing:-.015em;margin:0;color:#2F1C6A}
.dj-guides .csub{font-size:14px}

/* device tiles */
.dj-guides .dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dj-guides .dv{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 10px 16px;border-radius:18px;border:1.5px solid #E4E1F5;background:#fff;text-align:center;cursor:pointer;min-height:150px;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:border-color .25s,box-shadow .3s,background-color .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.dj-guides .dv:hover{border-color:#C9BEF7;box-shadow:0 10px 22px -16px rgba(103,61,230,.5)}
.dj-guides .dv:active{transform:scale(.97)}
.dj-guides .dv:focus-visible,.dj-guides .ap:focus-visible,.dj-guides .copy:focus-visible,.dj-guides .back:focus-visible,.dj-guides .fqb:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(103,61,230,.22)}
.dj-guides .dimg{width:60px;height:60px;border-radius:16px;background:#F7F6FD;border:1px solid #ECEAF8;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#9C86F5;margin-bottom:6px;transition:box-shadow .3s,background-color .3s,border-color .3s}
.dj-guides .dimg img{width:100%;height:100%;object-fit:contain;padding:10px;display:block}
.dj-guides .dv .nm{font:600 14.5px/1.3 Lexend,dj-lexend-fb,sans-serif;color:#2F1C6A}
.dj-guides .dv .sbl{font:400 12.5px/1.45 'DM Sans',dj-dmsans-fb,sans-serif;color:#5E6175}
.dj-guides .dv.sel{border-color:#673DE6;background:#FBFAFF;box-shadow:0 0 0 1px #673DE6,0 14px 28px -16px rgba(103,61,230,.55)}
.dj-guides .dv.sel .dimg{background:#fff;border-color:#fff;box-shadow:0 0 0 2px #673DE6}
.dj-guides .bdg{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:#673DE6;color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.4);transition:opacity .2s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.dj-guides .dv.sel .bdg,.dj-guides .ap.picked .bdg{opacity:1;transform:none}
.dj-guides .pop{position:absolute;top:-11px;left:50%;transform:translateX(-50%)}
.dj-guides .cfoot{display:flex;justify-content:center}

/* apps */
.dj-guides .note{display:flex;gap:14px;padding:14px 16px;border-radius:16px;background:#F7F6FD;border:1px solid #ECEAF8}
.dj-guides .note b{display:block;font:600 14px Lexend,dj-lexend-fb,sans-serif;color:#2F1C6A;margin-bottom:4px}
.dj-guides .note .t{font:400 13.5px/1.45 'DM Sans',dj-dmsans-fb,sans-serif;color:#494C4F}
.dj-guides .aplist{display:flex;flex-direction:column;gap:14px;padding-top:6px}
.dj-guides .ap{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:20px;border:1.5px solid #E4E1F5;background:#fff;text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .25s,box-shadow .3s,background-color .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.dj-guides .ap:active{transform:scale(.985)}
.dj-guides .ap.rec{border-color:#C9BEF7}
.dj-guides .ap.picked{border-color:#673DE6;background:#FBFAFF;box-shadow:0 0 0 1px #673DE6,0 14px 28px -16px rgba(103,61,230,.55)}
.dj-guides .ap .who{display:flex;align-items:center;gap:12px}
.dj-guides .ap .nmw{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.dj-guides .ap .nmw .tl{flex:1}
.dj-guides .ap .nmw .chip{margin-right:22px}
.dj-guides .facts{display:flex;flex-direction:column;gap:6px}
.dj-guides .fact{display:flex;gap:8px;align-items:flex-start;font:400 13.5px/1.45 'DM Sans',dj-dmsans-fb,sans-serif;color:#494C4F}
.dj-guides .fact svg{margin-top:1px;color:#673DE6}
.dj-guides .ap .go{align-self:flex-end;font:600 14px Lexend,dj-lexend-fb,sans-serif;color:#5A2FE0;display:flex;align-items:center;gap:6px}
.dj-guides .ap .go svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.dj-guides .ap:hover .go svg,.dj-guides .ap.picked .go svg{transform:translateX(3px)}
.dj-guides .ap .bdg{top:12px;right:12px}
.dj-guides .rib{position:absolute;top:-11px;left:16px}
.dj-guides .aimg{width:44px;height:44px;border-radius:13px;background:#F7F6FD;border:1px solid #ECEAF8;display:flex;align-items:center;justify-content:center;color:#9C86F5;flex:none;overflow:hidden;transition:box-shadow .3s,background-color .3s}
.dj-guides .aimg img{width:100%;height:100%;object-fit:contain;padding:5px;border-radius:12px;display:block}
.dj-guides .ap.picked .aimg{background:#fff;border-color:#fff;box-shadow:0 0 0 2px #673DE6}
.dj-guides .oth{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.dj-guides .wab{height:54px;width:100%;border:0;border-radius:999px;background:linear-gradient(180deg,#7350F0,#673DE6);color:#fff;font:600 16px Lexend,dj-lexend-fb,sans-serif;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 10px 24px -12px rgba(103,61,230,.6);text-decoration:none}
.dj-guides .wab:hover{color:#fff}

/* guide rail (Sequence) */
.dj-guides .mcard[data-card="2"] .cin{gap:20px}
.dj-guides .gtw{display:flex;flex-direction:column;gap:10px;margin-top:-4px}
.dj-guides .gtw .ctitle{font-size:22px}
.dj-guides .gchips{display:flex;gap:6px}
.dj-guides .wz.lm .gtw{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* title stays for screen readers (heading order) */
.dj-guides .gintro{font-size:15px}
.dj-guides .rail{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:24px}
.dj-guides .rtrack,.dj-guides .rfill{position:absolute;left:17px;top:18px;width:2px;border-radius:2px}
.dj-guides .rtrack{height:var(--rt,0px);background:#E9E5FB;transform-origin:50% 0}
.dj-guides .rfill{height:0;background:linear-gradient(180deg,#7651F0,#673DE6);transition:height .4s cubic-bezier(.65,0,.35,1)}
.dj-guides .seq .rtrack{animation:g-grow .9s cubic-bezier(.16,1,.3,1) .3s both}
.dj-guides .rs{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px}
.dj-guides .rn{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid #E4DFFA;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px #fff;transition:border-color .4s}
.dj-guides .rn .bg{position:absolute;inset:-2px;border-radius:50%;background:linear-gradient(180deg,#7651F0,#673DE6);transform:scale(0);transition:transform .5s cubic-bezier(.34,1.4,.64,1)}
.dj-guides .rn .nm{position:relative;font:600 14px Lexend,dj-lexend-fb,sans-serif;color:#673DE6;transition:color .3s}
.dj-guides .rn::after{content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none}
.dj-guides .rs.on .rn{border-color:#673DE6}
.dj-guides .rs.on .rn .bg{transform:scale(1)}
.dj-guides .rs.on .rn .nm{color:#fff}
.dj-guides .rs.cur .rn::after{animation:g-pulse .9s cubic-bezier(.16,1,.3,1) .1s both}
.dj-guides .rb{display:flex;flex-direction:column;gap:10px;padding-top:6px;min-width:0;transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.dj-guides .rs:not(.on) .rb{opacity:0;transform:translateY(14px)}
.dj-guides .rt{font:600 16px/1.35 Lexend,dj-lexend-fb,sans-serif;color:#2F1C6A;margin:0}
.dj-guides .rb .p{font-size:15px}
.dj-guides .rb ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font:400 15px/1.5 'DM Sans',dj-dmsans-fb,sans-serif;color:#494C4F}
.dj-guides .two{display:flex;flex-direction:column;gap:10px}
.dj-guides .kb{font:600 13px Lexend,dj-lexend-fb,sans-serif;padding:2px 8px;border-radius:8px;background:#F0EDFF;color:#4B25C9;white-space:nowrap}
.dj-guides .path{font:500 14px Lexend,dj-lexend-fb,sans-serif;color:#2F1C6A}
.dj-guides .crs{display:flex;flex-direction:column;gap:8px}
.dj-guides .cr{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:14px;background:#F7F6FD;border:1px solid #ECEAF8;min-width:0}
.dj-guides .cw{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dj-guides .ck{font:500 11px Lexend,dj-lexend-fb,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#5E6175}
.dj-guides .cv{font:500 14px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#171420;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dj-guides .copy{position:relative;flex:none;height:44px;min-width:78px;border-radius:12px;border:0;background:#F0EDFF;color:#4B25C9;font:600 13px Lexend,dj-lexend-fb,sans-serif;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .25s,color .25s,transform .2s}
.dj-guides .copy:active{transform:scale(.95)}
.dj-guides .copy.done{background:#E2F7F1;color:#00785F}
.dj-guides .copy .ct{display:inline-flex;align-items:center;gap:5px}
.dj-guides .copy.done .ct{animation:g-pop .35s cubic-bezier(.34,1.56,.64,1) both}
.dj-guides .vid{position:relative;border:0;padding:0;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:radial-gradient(60% 80% at 80% 10%,rgba(103,61,230,.22),transparent 70%),linear-gradient(160deg,#F4F1FF,#E7E1FF);display:flex;align-items:center;justify-content:center;cursor:pointer}
.dj-guides .vid .pl{width:60px;height:60px;border-radius:50%;background:#fff;color:#673DE6;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -12px rgba(75,37,201,.6);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.dj-guides .vid:hover .pl{transform:scale(1.06)}
.dj-guides .vid:active .pl{transform:scale(.94)}
.dj-guides .vid .vl{position:absolute;left:12px;bottom:12px;right:12px;display:flex;justify-content:space-between;align-items:center;font:500 12px Lexend,dj-lexend-fb,sans-serif;color:#2F1C6A}
/* with the video's thumbnail (owner, 2026-10-26): the picture fills the button, a soft dark fade keeps the label readable */
.dj-guides .vid .vthumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dj-guides .vid.has-thumb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,rgba(23,20,32,0),rgba(23,20,32,.72));pointer-events:none}
.dj-guides .vid.has-thumb .pl{position:relative;z-index:1}
.dj-guides .vid.has-thumb .vl{z-index:1;color:#fff;gap:8px}
.dj-guides .vid .vl>span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.dj-guides .vfr{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:16px;background:#0E0A1C}
.dj-guides .shot{width:100%;aspect-ratio:16/9;border-radius:16px;background:#F7F6FD;border:1px dashed #D9D6EE;display:flex;align-items:center;justify-content:center;font:500 12px Lexend,dj-lexend-fb,sans-serif;color:#5E6175;text-align:center;padding:12px}
.dj-guides .shotimg{display:block;width:100%;height:auto;border-radius:16px}
.dj-guides .call{display:flex;gap:12px;padding:14px;border-radius:16px;background:#FFF7E8;border:1px solid #F6E3BF}
.dj-guides .call .ci{width:32px;height:32px;border-radius:10px;background:#FFE9C2;color:#8A5300;display:flex;align-items:center;justify-content:center;flex:none}
.dj-guides .call b{display:block;font:600 14px Lexend,dj-lexend-fb,sans-serif;color:#5C3800;margin-bottom:2px}
.dj-guides .call span{font:400 14px/1.45 'DM Sans',dj-dmsans-fb,sans-serif;color:#5C3800}
.dj-guides .glink{min-height:36px;align-self:flex-start}
.dj-guides .rb a:not(.lnk){color:#5A2FE0}
.dj-guides .allset{position:relative;overflow:hidden;padding:18px;border-radius:20px;background:#F4FBF8;border:1px solid #D7F0E6;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.dj-guides .allset.show{opacity:1;transform:none}
.dj-guides .allset::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:55%;pointer-events:none;opacity:0;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55) 45%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.55) 55%,rgba(255,255,255,0));transform:translateX(-125%) skewX(-16deg)}
.dj-guides .seq .allset.show::after{animation:g-sheen 1.1s cubic-bezier(.25,.1,.25,1) .45s both}
.dj-guides .ash{display:flex;align-items:center;gap:12px}
.dj-guides .ast3{font:600 20px/1.2 Lexend,dj-lexend-fb,sans-serif;letter-spacing:-.015em;color:#2F1C6A}
.dj-guides .allset .p{font-size:15px}
.dj-guides .allset .lnk{min-height:40px;align-self:flex-start}
.dj-guides .okc{width:44px;height:44px;border-radius:50%;background:#E2F7F1;color:#00896D;display:flex;align-items:center;justify-content:center;flex:none}
.dj-guides .seq .allset.show .okc svg{animation:g-pop .5s cubic-bezier(.34,1.56,.64,1) .2s both}

/* ================= troubleshooting (FAQ) ================= */
.dj-guides .faq{background:#FFFFFF;padding:48px 20px}
.dj-guides .fqw{padding:0;display:flex;flex-direction:column;gap:18px}
.dj-guides .fqh{display:flex;flex-direction:column;gap:8px}
.dj-guides .fqh .p{font-size:15px}
.dj-guides .fqc{padding:4px 20px}
.dj-guides .fqmore{font-size:14px}
.dj-guides .fq{border-bottom:1px solid #EFEDF8}
.dj-guides .fq.last{border-bottom:0}
.dj-guides .fqb{width:100%;min-height:64px;border:0;background:none;padding:0;display:flex;align-items:center;justify-content:space-between;gap:14px;font:500 16px/1.35 Lexend,dj-lexend-fb,sans-serif;color:#2F1C6A;text-align:left;cursor:pointer;border-radius:8px}
.dj-guides .pm{flex:none;color:#673DE6;stroke-width:2;width:20px;height:20px}
.dj-guides .pm .vl{transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s}
.dj-guides .fq.open .pm .vl{transform:scaleY(0);opacity:0}
.dj-guides .fqa{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.dj-guides .fq.open .fqa{grid-template-rows:1fr}
.dj-guides .fqin{min-height:0;overflow:hidden}
.dj-guides .fqin p{padding:0 0 18px;font-size:15px;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.dj-guides .fq.open .fqin p{opacity:1;transform:none;transition-delay:.08s}
.dj-guides .faq.wait .fqh>*,.dj-guides .faq.wait .fqc{opacity:0}
.dj-guides .faq.inn .fqh>*{animation:g-rise .8s cubic-bezier(.16,1,.3,1) both}
.dj-guides .faq.inn .fqh>*:nth-child(2){animation-delay:.07s}.dj-guides .faq.inn .fqh>*:nth-child(3){animation-delay:.14s}
.dj-guides .faq.inn .fqc{animation:g-cardUp .9s cubic-bezier(.16,1,.3,1) .16s both}
.dj-guides .faq.inn .fq{animation:g-rise .6s cubic-bezier(.16,1,.3,1) both}
.dj-guides .faq.inn .fq:nth-child(1){animation-delay:.28s}.dj-guides .faq.inn .fq:nth-child(2){animation-delay:.34s}.dj-guides .faq.inn .fq:nth-child(3){animation-delay:.4s}.dj-guides .faq.inn .fq:nth-child(4){animation-delay:.46s}.dj-guides .faq.inn .fq:nth-child(5){animation-delay:.52s}.dj-guides .faq.inn .fq:nth-child(6){animation-delay:.58s}

/* ================= need help (Draw + sheen) ================= */
.dj-guides .ast{background:#F4F5FF;padding:28px 12px 40px}
.dj-guides .ast .wrap{padding:0}
.dj-guides .asst{position:relative;overflow:hidden;isolation:isolate;border-radius:32px;padding:36px 24px 32px;background:linear-gradient(150deg,#7651F0 0%,#673DE6 45%,#4B25C9 100%);box-shadow:0 40px 80px -40px rgba(75,37,201,.7);color:#fff;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.dj-guides .orb{position:absolute;width:340px;height:340px;right:-140px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);pointer-events:none}
.dj-guides .gate{position:absolute;left:50%;margin-left:-240px;bottom:-138px;width:480px;height:480px;opacity:.36;pointer-events:none;z-index:0}
.dj-guides .gate path{stroke-dasharray:30;stroke-dashoffset:0}
.dj-guides .asst .tx,.dj-guides .asst .wa{position:relative;z-index:2}
.dj-guides .tx{display:flex;flex-direction:column;gap:14px;align-items:center}
.dj-guides .ae{font:600 12px Lexend,dj-lexend-fb,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#E9E3FF}
.dj-guides .ah{color:#fff}
.dj-guides .ap2{margin:0;font:400 15px/1.55 'DM Sans',dj-dmsans-fb,sans-serif;color:#ECE7FF}
.dj-guides .wa{height:56px;border-radius:999px;background:#fff;color:#4B25C9;font:600 16px Lexend,dj-lexend-fb,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 26px;text-decoration:none;box-shadow:0 18px 36px -14px rgba(20,8,70,.6);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.dj-guides .wa:hover{color:#4B25C9;transform:translateY(-2px);box-shadow:0 24px 40px -14px rgba(20,8,70,.7)}
.dj-guides .wa:focus-visible{outline:3px solid #fff;outline-offset:3px}
.dj-guides .asst::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:55%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.1) 40%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.1) 60%,rgba(255,255,255,0));transform:translateX(-125%) skewX(-16deg);opacity:0;pointer-events:none;z-index:3}
.dj-guides .ast.wait .tx>*,.dj-guides .ast.wait .wa,.dj-guides .ast.wait .orb{opacity:0}
.dj-guides .ast.wait .gate path{stroke-dashoffset:30}
.dj-guides .ast.inn .orb{animation:g-rise 1.2s cubic-bezier(.16,1,.3,1) both}
.dj-guides .ast.inn .tx>*{animation:g-rise .8s cubic-bezier(.16,1,.3,1) both}
.dj-guides .ast.inn .tx>*:nth-child(2){animation-delay:.06s}.dj-guides .ast.inn .tx>*:nth-child(3){animation-delay:.12s}
.dj-guides .ast.inn .gate path{animation:g-draw .6s cubic-bezier(.65,0,.35,1) both}
.dj-guides .ast.inn .gate .g1{animation-duration:.65s;animation-delay:.15s}
.dj-guides .ast.inn .gate .g2{animation-duration:.28s;animation-delay:.6s}
.dj-guides .ast.inn .gate .g3{animation-duration:.55s;animation-delay:.68s}
.dj-guides .ast.inn .gate .g4,.dj-guides .ast.inn .gate .g5{animation-duration:.75s;animation-delay:.88s}
.dj-guides .ast.inn .wa{animation:g-rise .8s cubic-bezier(.16,1,.3,1) 1.05s both}
.dj-guides .ast.inn .asst::after{animation:g-sheen 1.1s cubic-bezier(.25,.1,.25,1) 1.6s both}

/* ================= desktop (guides-desktop.dc.html), from 768 px ================= */
@media (min-width:768px){
	@keyframes g-depthOut{0%{transform:none;opacity:1;filter:blur(0)}100%{transform:translateY(-18px) scale(.94);opacity:0;filter:blur(6px)}}
	@keyframes g-focusIn{from{opacity:0;transform:scale(1.035);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
	.dj-guides .rb{transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .55s cubic-bezier(.16,1,.3,1)}
	.dj-guides .rs:not(.on) .rb{filter:blur(4px)}
	.dj-guides .allset{filter:blur(4px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .6s cubic-bezier(.16,1,.3,1)}
	.dj-guides .allset.show{filter:blur(0)}
	@keyframes g-pulse{from{box-shadow:0 0 0 0 rgba(103,61,230,.38)}to{box-shadow:0 0 0 16px rgba(103,61,230,0)}}
	.dj-guides .eyebrow{font-size:13px}
	.dj-guides .h1{font:600 50px/1.05 Lexend,dj-lexend-fb,sans-serif;letter-spacing:-.03em}
	.dj-guides .h2{font:600 46px/1.08 Lexend,dj-lexend-fb,sans-serif;letter-spacing:-.03em}
	.dj-guides .p{font:400 17px/1.6 'DM Sans',dj-dmsans-fb,sans-serif}
	.dj-guides .sm{font:400 14px/1.5 'DM Sans',dj-dmsans-fb,sans-serif}
	.dj-guides .tl{font:600 19px/1.3 Lexend,dj-lexend-fb,sans-serif}
	.dj-guides .card{border-radius:28px}
	.dj-guides .btn{height:48px;border:0;border-radius:999px;background:linear-gradient(180deg,#7350F0,#673DE6);color:#fff;font:600 16px Lexend,dj-lexend-fb,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 10px 24px -12px rgba(103,61,230,.6);text-decoration:none;padding:0 24px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
	.dj-guides .btn:hover{color:#fff;transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(103,61,230,.7)}
	.dj-guides .btn:focus-visible{outline:2px solid #673DE6;outline-offset:3px}
	.dj-guides .pill{height:36px;padding:0 14px;background:#fff;font-size:14px}
	.dj-guides .chip{padding:3px 10px}
	.dj-guides .isq{width:44px;height:44px;border-radius:14px}
	.dj-guides .lnk{font-size:15px}
	.dj-guides .lnk svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
	.dj-guides .lnk:hover svg{transform:translateX(3px)}
	.dj-guides .back{font-size:14px}

	/* hero */
	.dj-guides .hero{overflow:hidden}
	.dj-guides .bloom{background:radial-gradient(35% 55% at 30% 60%,rgba(103,61,230,.16),transparent 70%)}
	.dj-guides .hwrap{max-width:1200px;padding:64px 20px 72px;display:flex;flex-wrap:wrap;gap:48px;align-items:center;justify-content:space-between}
	.dj-guides .hcol{flex:1 1 460px;max-width:580px;display:flex;flex-direction:column;gap:18px}
	.dj-guides .hr{padding:0;gap:18px}
	.dj-guides .hero.lm .hlnk{padding-bottom:0}
	.dj-guides .hlnk .h1{font-size:50px}
	.dj-guides .pills,.dj-guides .hlnk .pills{display:flex;flex-wrap:wrap;gap:8px}
	.dj-guides .hlink{align-self:flex-start}
	.dj-guides .hero .hr>*:nth-child(5){animation-delay:.3s}
	@keyframes g-xTvIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
	@keyframes g-xFloat{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
	@keyframes g-xTile{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
	@keyframes g-xFadeOut{from{opacity:1}to{opacity:0}}
	@keyframes g-xPress{0%{transform:none}50%{transform:scale(.93)}100%{transform:none}}
	@keyframes g-xGreen{from{background:#F0EDFF;color:#4B25C9}to{background:#E2F7F1;color:#00785F}}
	@keyframes g-xLogo{from{opacity:0;transform:scale(.92);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
	@keyframes g-xBootOut{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:scale(1.03);filter:blur(5px)}}
	.dj-guides .xill{position:relative;flex:0 0 520px;width:520px;height:430px}
	.dj-guides .xtvw{position:absolute;left:25px;top:40px;width:470px;z-index:1}
	.dj-guides .xtv{position:relative;border-radius:8px;padding:3px;background:linear-gradient(180deg,#2C2742 0%,#15121F 100%);box-shadow:0 0 0 1px #100D19,inset 0 1px 0 rgba(255,255,255,.14),0 28px 56px -30px rgba(47,28,106,.5),0 70px 110px -50px rgba(103,61,230,.35)}
	.dj-guides .xtv::after{content:"";position:absolute;left:50%;bottom:-6px;width:74px;height:7px;margin-left:-37px;border-radius:0 0 5px 5px;clip-path:polygon(0 0,100% 0,95% 100%,5% 100%);background:linear-gradient(#5A5370,#5A5370) 50% 2px/14px 1.5px no-repeat,linear-gradient(180deg,#221E33 0%,#15121F 100%);box-shadow:0 1px 0 #100D19}
	.dj-guides .xscr{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#0E0A1C}
	.dj-guides .xlit{position:absolute;inset:0;background:linear-gradient(160deg,#FFFFFF 0%,#F1EDFF 100%)}
	.dj-guides .xlit::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;pointer-events:none;opacity:0;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45) 48%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.45) 52%,rgba(255,255,255,0));transform:translateX(-125%) skewX(-16deg);z-index:6}
	.dj-guides .xapp{position:absolute;inset:0;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
	.dj-guides .xtop{display:flex;align-items:center;gap:7px}
	.dj-guides .xwm{font:600 10px Lexend,dj-lexend-fb,sans-serif;letter-spacing:.12em;color:#171420}
	.dj-guides .xrdy{margin-left:auto;display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:999px;background:#E2F7F1;color:#00785F;font:500 10px Lexend,dj-lexend-fb,sans-serif}
	.dj-guides .xfeat{flex:1;border-radius:10px;background:radial-gradient(60% 90% at 90% 0%,rgba(255,255,255,.22),transparent 65%),linear-gradient(135deg,#7651F0 0%,#673DE6 50%,#4B25C9 100%);display:flex;align-items:flex-end;gap:12px;padding:14px}
	.dj-guides .xpl{width:34px;height:34px;border-radius:50%;background:#fff;color:#673DE6;display:flex;align-items:center;justify-content:center;flex:none}
	.dj-guides .xfb{display:flex;flex-direction:column;gap:6px;padding-bottom:4px}
	.dj-guides .xfb i{display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.55)}
	.dj-guides .xrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
	.dj-guides .xrow i{display:block;aspect-ratio:16/10;border-radius:8px}
	.dj-guides .xboot{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(60% 70% at 50% 45%,#FFFFFF 0%,#FBFAFF 60%,#F4F1FF 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0}
	.dj-guides .xbw{font:600 13px Lexend,dj-lexend-fb,sans-serif;letter-spacing:.16em;color:#171420}
	.dj-guides .xlbar{width:112px;height:3px;border-radius:3px;background:#ECE8FB;overflow:hidden;margin-top:8px}
	.dj-guides .xlbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#9C86F5,#673DE6);transform-origin:0 50%}
	.dj-guides .xfeet{position:relative;height:30px}
	.dj-guides .xblade{position:absolute;top:-3px;width:46px;height:5px;background:linear-gradient(180deg,#3A3452 0%,#15121F 100%);clip-path:polygon(0 30%,100% 0,100% 100%,0 70%)}
	.dj-guides .xblade.l{left:-16px;transform-origin:100% 50%;transform:rotate(-32deg)}
	.dj-guides .xblade.r{right:-16px;transform-origin:0 50%;transform:rotate(32deg);clip-path:polygon(0 0,100% 30%,100% 70%,0 100%)}
	.dj-guides .xmount{position:absolute;top:-2px;width:16px;height:4px;border-radius:0 0 2px 2px;background:#15121F}
	.dj-guides .xmount.l{left:20px}.dj-guides .xmount.r{right:20px}
	.dj-guides .xfloor{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(47,28,106,.15),transparent)}
	.dj-guides .xfloor.wide{left:10px;width:500px;top:322px;height:20px}
	.dj-guides .xfloor.tip{width:40px;height:8px;top:333px;background:radial-gradient(closest-side,rgba(23,20,32,.28),transparent)}
	.dj-guides .xfloor.tip.l{left:4px}.dj-guides .xfloor.tip.r{left:476px}
	.dj-guides .xfc{position:absolute;z-index:3;background:#fff;border:1px solid #ECEAF8;border-radius:16px;box-shadow:0 1px 2px rgba(47,28,106,.05),0 10px 24px -12px rgba(103,61,230,.22),0 30px 60px -30px rgba(103,61,230,.28)}
	.dj-guides .xcr{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px}
	.dj-guides .xcw{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
	.dj-guides .xck{font:500 10.5px Lexend,dj-lexend-fb,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#5E6175}
	.dj-guides .xcv{font:500 14px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#171420;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	.dj-guides .xbtn{position:relative;flex:none;height:36px;min-width:82px;border-radius:10px;background:#F0EDFF;color:#4B25C9;font:600 12.5px Lexend,dj-lexend-fb,sans-serif;display:grid;place-items:center;padding:0 12px}
	.dj-guides .xbtn.g{background:#E2F7F1;color:#00785F}
	.dj-guides .xbtn>span{grid-area:1/1;display:inline-flex;align-items:center;gap:5px}
	.dj-guides .xbtn .t1{opacity:0}
	.dj-guides .xtm{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px}
	.dj-guides .xsq{width:34px;height:34px;border-radius:10px;background:#F0EDFF;color:#673DE6;display:flex;align-items:center;justify-content:center}
	.dj-guides .xtm b{display:block;font:600 14px Lexend,dj-lexend-fb,sans-serif;color:#2F1C6A}
	.dj-guides .xtm span.s{font:400 12.5px 'DM Sans',dj-dmsans-fb,sans-serif;color:#5E6175}
	.dj-guides .xfa{left:0;top:-24px;width:232px}
	.dj-guides .xfb2{left:268px;top:240px;width:252px}
	.dj-guides .xfcc{left:18px;top:354px}
	.dj-guides .hero .xtvw{animation:g-xTvIn 1.1s cubic-bezier(.16,1,.3,1) .15s both}
	.dj-guides .hero .xfloor{animation:g-shadowIn 1.1s cubic-bezier(.16,1,.3,1) .3s both}
	.dj-guides .hero .xlit{animation:g-screenOn 1s cubic-bezier(.16,1,.3,1) .7s both}
	.dj-guides .hero .xboot{animation:g-xBootOut .7s cubic-bezier(.4,0,.2,1) 2.55s both}
	.dj-guides .hero .xboot svg{animation:g-xLogo .9s cubic-bezier(.16,1,.3,1) .95s both}
	.dj-guides .hero .xbw{animation:g-rise .8s cubic-bezier(.16,1,.3,1) 1.15s both}
	.dj-guides .hero .xlbar{animation:g-fadeIn .4s ease 1.25s both}
	.dj-guides .hero .xlbar i{animation:g-load 1.15s cubic-bezier(.45,0,.55,1) 1.35s both}
	.dj-guides .hero .xtop{animation:g-fadeIn .6s ease 2.75s both}
	.dj-guides .hero .xfeat{animation:g-xTile .8s cubic-bezier(.16,1,.3,1) 2.82s both}
	.dj-guides .hero .xrow i{animation:g-xTile .7s cubic-bezier(.16,1,.3,1) both}
	.dj-guides .hero .xrow i:nth-child(1){animation-delay:2.95s}.dj-guides .hero .xrow i:nth-child(2){animation-delay:3.03s}.dj-guides .hero .xrow i:nth-child(3){animation-delay:3.11s}.dj-guides .hero .xrow i:nth-child(4){animation-delay:3.19s}
	.dj-guides .hero .xfa{animation:g-xFloat 1s cubic-bezier(.16,1,.3,1) 3.25s both}
	.dj-guides .hero .xfb2{animation:g-xFloat 1s cubic-bezier(.16,1,.3,1) 3.5s both}
	.dj-guides .hero .xfcc{animation:g-xFloat 1s cubic-bezier(.16,1,.3,1) 3.75s both}
	.dj-guides .hero .xbtn.g{animation:g-xPress .35s cubic-bezier(.2,.8,.2,1) 4.35s both,g-xGreen .35s ease 4.45s both}
	.dj-guides .hero .xbtn.g .t1{animation:g-xFadeOut .2s ease 4.43s both}
	.dj-guides .hero .xbtn.g .t2{animation:g-pop .45s cubic-bezier(.34,1.56,.64,1) 4.5s both}
	.dj-guides .hero .xlit::after{animation:g-sheen 1.4s cubic-bezier(.25,.1,.25,1) 4.95s both}

	/* how it works: three cards in a row */
	.dj-guides .how{background:#FFFFFF;padding:72px 0}
	.dj-guides .hww{padding:0 20px;gap:28px}
	.dj-guides .hwh{padding:0}
	.dj-guides .hwt{gap:10px}
	.dj-guides .hwt2{font:600 32px/1.08 Lexend,dj-lexend-fb,sans-serif;letter-spacing:-.03em}
	.dj-guides .hstage,.dj-guides .how.js .hstage{overflow:visible;padding:0;cursor:auto;touch-action:auto}
	.dj-guides .htrack,.dj-guides .htrack.i1,.dj-guides .htrack.i2{flex-wrap:wrap;gap:20px;padding:0;width:auto;transform:none;will-change:auto}
	.dj-guides .how.inn .htrack.hint{animation:none}
	.dj-guides .hcard,.dj-guides .hcard.off{flex:1 1 260px;width:auto;padding:24px;border-radius:24px;gap:12px;opacity:1;box-shadow:0 12px 28px -18px rgba(103,61,230,.35);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
	.dj-guides .hcard:hover{transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(103,61,230,.5)}
	.dj-guides .hcard .sm{font-size:15px}
	.dj-guides .num{width:36px;height:36px;font-size:15px}
	.dj-guides .how.inn .hcard{animation-name:g-cardUp}

	/* stepper */
	.dj-guides .stp{gap:10px;padding:0;flex-wrap:wrap}
	.dj-guides .stp li{font-size:15px;gap:10px}
	.dj-guides .stp .sb{gap:10px;padding:0 6px 0 0}
	.dj-guides .stp li.ok .sb:hover .n{box-shadow:0 0 0 5px rgba(0,137,109,.14)}
	.dj-guides .stp .n{width:34px;height:34px}
	.dj-guides .stp .n .nm{font-size:14px}
	.dj-guides .stp li.on .n{box-shadow:0 0 0 5px rgba(103,61,230,.16)}
	.dj-guides .stp .ln{flex:none;width:56px}

	/* wizard */
	.dj-guides .wz{padding:88px 0 96px}
	.dj-guides .wzw{padding:0 20px;gap:24px}
	.dj-guides .wzh{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;min-height:96px}
	.dj-guides .hsw{display:flex;flex-direction:column;gap:10px;animation:g-softIn .7s cubic-bezier(.16,1,.3,1) both}
	.dj-guides .wz.wait .wzh,.dj-guides .wz.wait .aside{opacity:0}
	.dj-guides .wz.inn .wzh{animation:g-rise .8s cubic-bezier(.16,1,.3,1) both}
	.dj-guides .wz.inn .stp{animation:none}
	.dj-guides .wz.inn .deck{animation-delay:.12s}
	.dj-guides .wz.inn .aside{animation:g-rise .8s cubic-bezier(.16,1,.3,1) .26s both}
	.dj-guides .wzb{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
	.dj-guides .deck{flex:999 1 640px;min-width:0}
	.dj-guides .mcard{top:52px;border-radius:28px}
	.dj-guides .s0{margin-top:52px}
	.dj-guides .deck.nopeek .mcard{top:16px}
	.dj-guides .deck.nopeek .s0{margin-top:16px}
	.dj-guides .face{padding:16px 26px;font-size:14px}
	.dj-guides .cin{padding:36px 36px 28px;gap:22px}
	.dj-guides .s1{transform:translate(0,-26px) rotate(-1.2deg) scale(.97)}
	.dj-guides .s2{transform:translate(0,-46px) rotate(1.4deg) scale(.93)}
	.dj-guides .ctw{gap:4px}
	.dj-guides .ctitle{font:600 26px/1.15 Lexend,dj-lexend-fb,sans-serif;letter-spacing:-.02em}
	.dj-guides .csub{font-size:15px}
	.dj-guides .chead{gap:12px;padding-bottom:18px}
	.dj-guides .chl{gap:12px}
	.dj-guides .cdn{font-size:15px}

	/* device tiles */
	.dj-guides .dgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
	.dj-guides .dv{padding:26px 12px 20px;border-radius:22px;min-height:186px;transition:border-color .25s,box-shadow .3s,background-color .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
	.dj-guides .dv:hover{box-shadow:0 14px 28px -18px rgba(103,61,230,.55);transform:translateY(-3px)}
	.dj-guides .dv:active{transform:translateY(-1px) scale(.98)}
	.dj-guides .dimg{width:76px;height:76px;border-radius:20px;margin-bottom:8px}
	.dj-guides .dimg img{padding:12px}
	.dj-guides .dv .nm{font:600 16px/1.3 Lexend,dj-lexend-fb,sans-serif}
	.dj-guides .dv .sbl{font:400 13.5px/1.4 'DM Sans',dj-dmsans-fb,sans-serif}
	.dj-guides .dv.sel{box-shadow:0 0 0 1px #673DE6,0 16px 32px -18px rgba(103,61,230,.6);transform:none}
	.dj-guides .bdg{top:12px;right:12px;width:24px;height:24px}
	.dj-guides .cfoot{flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid #EFEDF8}

	/* apps */
	.dj-guides .note{padding:18px 20px;border-radius:20px}
	.dj-guides .note .isq{width:38px;height:38px;border-radius:12px}
	.dj-guides .note b{font-size:15px;margin-bottom:2px}
	.dj-guides .note .t{font:400 15px/1.55 'DM Sans',dj-dmsans-fb,sans-serif}
	.dj-guides .aplist{gap:16px;padding-top:8px}
	.dj-guides .ap{flex-direction:row;flex-wrap:wrap;align-items:center;gap:18px 24px;padding:24px;border-radius:22px;transition:border-color .25s,box-shadow .3s,background-color .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
	.dj-guides .ap:hover{border-color:#C9BEF7;box-shadow:0 14px 28px -18px rgba(103,61,230,.55);transform:translateY(-2px)}
	.dj-guides .ap.picked{box-shadow:0 0 0 1px #673DE6,0 16px 32px -18px rgba(103,61,230,.6);transform:none}
	.dj-guides .ap .who{flex:1 1 240px;gap:16px;min-width:0}
	.dj-guides .ap .nmw{flex:none;flex-direction:column;align-items:flex-start;gap:6px}
	.dj-guides .ap .nmw .tl{flex:none}
	.dj-guides .ap .nmw .chip{margin-right:0}
	.dj-guides .aimg{width:64px;height:64px;border-radius:18px}
	.dj-guides .aimg img{padding:8px;border-radius:14px}
	.dj-guides .facts{flex:2 1 300px;padding:0 0 0 24px;border-left:1px solid #EFEDF8;gap:7px}
	.dj-guides .fact{gap:10px;font:400 15px/1.45 'DM Sans',dj-dmsans-fb,sans-serif}
	.dj-guides .fact svg{margin-top:2px}
	.dj-guides .fact.k{color:#4B25C9;font-weight:500}
	.dj-guides .ap .go{flex:none;align-self:auto;height:48px;border-radius:999px;padding:0 22px;gap:8px;font:600 15px Lexend,dj-lexend-fb,sans-serif;background:#F0EDFF;color:#4B25C9;transition:background-color .3s,color .3s}
	.dj-guides .ap.rec .go,.dj-guides .ap.picked .go{background:linear-gradient(180deg,#7350F0,#673DE6);color:#fff;box-shadow:0 10px 24px -12px rgba(103,61,230,.6)}
	.dj-guides .ap .bdg{top:14px;right:14px}
	.dj-guides .rib{left:24px}
	.dj-guides .oth{gap:16px;max-width:560px}
	.dj-guides .wab{width:auto;padding:0 28px;font-size:16px}

	/* guide */
	.dj-guides .mcard[data-card="2"] .cin{gap:28px}
	.dj-guides .ghead{flex-wrap:wrap;padding-bottom:22px}
	.dj-guides .ghead .chl{gap:14px}
	.dj-guides .gtw,.dj-guides .wz.lm .gtw{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
	.dj-guides .gintro{font-size:17px}
	.dj-guides .rail{gap:32px}
	.dj-guides .rtrack,.dj-guides .rfill{left:21px;top:22px;width:3px;border-radius:3px}
	.dj-guides .rs{grid-template-columns:44px minmax(0,1fr);gap:20px}
	.dj-guides .rn{width:44px;height:44px;box-shadow:0 0 0 6px #fff}
	.dj-guides .rn .nm{font-size:16px}
	.dj-guides .rb{gap:12px;padding-top:8px}
	.dj-guides .rt{font:600 20px/1.3 Lexend,dj-lexend-fb,sans-serif}
	.dj-guides .rb .p{font-size:17px}
	.dj-guides .rb ul{padding-left:20px;gap:8px;font:400 16px/1.55 'DM Sans',dj-dmsans-fb,sans-serif}
	.dj-guides .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;align-items:start}
	.dj-guides .kb{font-size:14px}
	.dj-guides .path{font-size:15px}
	.dj-guides .crs{max-width:420px}
	.dj-guides .crs.many{max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
	.dj-guides .crs.many .cr:first-child{grid-column:1/-1}
	.dj-guides .cr{padding:8px 8px 8px 16px}
	.dj-guides .cv{font-size:15px}
	.dj-guides .copy{min-width:84px;padding:0 14px}
	.dj-guides .copy:hover{background:#E6E0FF}
	.dj-guides .copy.done:hover{background:#E2F7F1}
	.dj-guides .vid{border-radius:18px}
	.dj-guides .vfr{border-radius:18px}
	.dj-guides .vid .pl{width:64px;height:64px}
	.dj-guides .vid:hover .pl{transform:scale(1.07)}
	.dj-guides .vid .vl{left:14px;bottom:14px;right:14px;font-size:13px}
	.dj-guides .shot{font-size:13px}
	.dj-guides .call{padding:16px}
	.dj-guides .call .ci{width:34px;height:34px}
	.dj-guides .call b{font-size:15px}
	.dj-guides .call span{font:400 15px/1.5 'DM Sans',dj-dmsans-fb,sans-serif}
	.dj-guides .allset{padding:24px 28px;border-radius:22px;gap:12px}
	.dj-guides .allset::after{width:45%}
	.dj-guides .seq .allset.show::after{animation-duration:1.2s}
	.dj-guides .ash{gap:14px}
	.dj-guides .ast3{font:600 24px/1.2 Lexend,dj-lexend-fb,sans-serif;letter-spacing:-.02em}
	.dj-guides .allset .p{font-size:17px}
	.dj-guides .okc{width:48px;height:48px}

	/* aside: your setup so far + help */
	.dj-guides .aside{flex:1 1 300px;display:flex;flex-direction:column;gap:20px;padding-top:52px;transition:padding-top .85s cubic-bezier(.16,1,.3,1)}
	.dj-guides .aside.np{padding-top:16px}
	.dj-guides .sofar{padding:24px;border-radius:24px}
	.dj-guides .sofar .eyebrow{font-size:12px}
	.dj-guides .srows{margin-top:12px}
	.dj-guides .srow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #EFEDF8}
	.dj-guides .srow.first{border-top:0}
	.dj-guides .sr2{flex:1;min-width:0;display:flex;flex-direction:column}
	.dj-guides .mk{position:relative;width:40px;height:40px;border-radius:12px;border:1.5px dashed #D9D6EE;display:flex;align-items:center;justify-content:center;color:#B9AEE8;flex:none;transition:border-color .4s,color .4s}
	.dj-guides .mk .mbg{position:absolute;inset:-1.5px;border-radius:12px;background:#673DE6;transform:scale(.4);opacity:0;transition:transform .5s cubic-bezier(.34,1.4,.64,1),opacity .3s,background-color .4s}
	.dj-guides .mk .mki{position:relative;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
	.dj-guides .mk .mkt{position:absolute;color:#00896D;opacity:0;transform:scale(.4);transition:opacity .25s,transform .45s cubic-bezier(.34,1.56,.64,1)}
	.dj-guides .srow.on .mk{border-color:transparent;color:#fff}
	.dj-guides .srow.on .mk .mbg{transform:none;opacity:1}
	.dj-guides .srow.ok .mk{border-color:transparent}
	.dj-guides .srow.ok .mk .mbg{transform:none;opacity:1;background:#E2F7F1}
	.dj-guides .srow.ok .mk .mki{opacity:0;transform:scale(.5)}
	.dj-guides .srow.ok .mk .mkt{opacity:1;transform:none;transition-delay:.12s}
	.dj-guides .sv{display:grid}
	.dj-guides .sv>span{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1);font:600 15px Lexend,dj-lexend-fb,sans-serif;color:#2F1C6A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	.dj-guides .sv>span.on{opacity:1;transform:none;transition-delay:.1s}
	.dj-guides .sv>span.c{color:#673DE6}
	.dj-guides .sv>span.p{color:#5E6175;font-weight:500}
	.dj-guides .chg{opacity:0;visibility:hidden;transform:translateX(6px);transition:opacity .3s,transform .4s cubic-bezier(.16,1,.3,1),visibility 0s linear .3s}
	.dj-guides .srow.ok .chg{opacity:1;visibility:visible;transform:none;transition:opacity .3s .15s,transform .4s cubic-bezier(.16,1,.3,1) .15s,visibility 0s linear 0s}
	.dj-guides .helpc{padding:28px;border-radius:24px;display:flex;flex-direction:column;gap:12px}
	.dj-guides .helpc .btn{height:52px}
	.dj-guides .helpc .sm{font-size:15px}
	.dj-guides .stack{display:grid}
	.dj-guides .stack>*{grid-area:1/1;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1);visibility:hidden}
	.dj-guides .stack>.on{opacity:1;transform:none;visibility:visible;transition-delay:.1s}
	.dj-guides .aside>.lnk{padding-left:4px}

	/* FAQ */
	.dj-guides .faq{padding:96px 0}
	.dj-guides .fqw{padding:0 20px;flex-direction:row;flex-wrap:wrap;gap:48px;align-items:flex-start}
	.dj-guides .fqh{flex:1 1 320px;gap:14px;max-width:400px}
	.dj-guides .fqh .p{font-size:17px}
	.dj-guides .fqc{flex:999 1 560px;padding:8px 32px;border-radius:28px}
	.dj-guides .fqb{min-height:68px;font-size:17px;transition:color .2s}
	.dj-guides .fqb:hover{color:#673DE6}
	.dj-guides .pm{width:22px;height:22px}
	.dj-guides .fqin p{padding:0 0 22px;font-size:16px}

	/* need help */
	.dj-guides .ast{padding:96px 0}
	.dj-guides .ast .wrap{padding:0 20px}
	.dj-guides .asst{border-radius:44px;padding:64px;background:linear-gradient(140deg,#7651F0 0%,#673DE6 45%,#4B25C9 100%);flex-direction:row;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between;text-align:left}
	.dj-guides .orb{width:480px;height:480px;right:-160px;top:-220px}
	.dj-guides .gate{left:auto;margin-left:0;bottom:auto;right:-60px;top:-40px;width:520px;height:520px}
	.dj-guides .tx{align-items:flex-start;max-width:560px}
	.dj-guides .ae{font-size:13px}
	.dj-guides .ap2{font:400 17px/1.6 'DM Sans',dj-dmsans-fb,sans-serif}
	.dj-guides .wa{height:60px;font-size:17px;padding:0 30px}
	.dj-guides .asst::after{width:40%}
	.dj-guides .ast.inn .asst::after{animation-duration:1.2s}
}
/* tablets in the phone-header range: the sticky header overlaps the hero */
@media (min-width:768px) and (max-width:1099px){.dj-guides .hero{padding-top:64px}}
@media (min-width:1200px){.dj-guides .hwrap,.dj-guides .hww,.dj-guides .wzw,.dj-guides .fqw,.dj-guides .ast .wrap{padding-left:24px;padding-right:24px}}

/* ================= reduced motion: final state, no animation ================= */
@media (prefers-reduced-motion:reduce){
	.dj-guides main *,.dj-guides main *::before,.dj-guides main *::after{animation:none!important;transition:none!important}
	.dj-guides .allset::after,.dj-guides .asst::after,.dj-guides .mlit::after,.dj-guides .xlit::after{opacity:0!important}
	.dj-guides .xbtn.g .t1{opacity:0}
}