/* Step-by-step setup guide (/setup-guide). Prefix gx-. */
.gx-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 56px}
.gx-map a{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:18px;background:var(--surface,#151D39);border:1px solid var(--border,#26304D);text-decoration:none;color:inherit;transition:transform .15s,border-color .15s}
.gx-map a:hover{transform:translateY(-2px);border-color:#7C4DFF}
.gx-map-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#8B3DFF,#2F8BFF);color:#fff;font:800 15px/1 Inter,system-ui,sans-serif}
.gx-map b{font:800 17px/1.3 Manrope,Inter,system-ui,sans-serif}
.gx-map small{font-size:13px;color:var(--muted,#AAB2CB)}
.gx-phase{margin:0 0 64px;scroll-margin-top:90px}
.gx-phase-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding-bottom:14px;margin-bottom:8px;border-bottom:1px solid var(--border,#26304D)}
.gx-phase-n{font:800 12px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#FF2E93}
.gx-phase-head h2{margin:0;font:800 clamp(26px,3.2vw,36px)/1.15 Manrope,Inter,system-ui,sans-serif}
.gx-phase-head p{margin:0;color:var(--muted,#AAB2CB);font-size:15px}
.gx-steps{list-style:none;margin:0;padding:0}
.gx-step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;align-items:center;padding:40px 0;border-bottom:1px dashed color-mix(in srgb,var(--border,#26304D) 80%,transparent)}
.gx-step:last-child{border-bottom:0}
.gx-flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.gx-flip .gx-text{order:2}
.gx-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.gx-num{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#8B3DFF 0%,#5B5BFF 55%,#2F8BFF 100%);color:#fff;font:800 20px/1 Manrope,Inter,system-ui,sans-serif;box-shadow:0 10px 26px -10px rgba(91,91,255,.9)}
.gx-min{padding:6px 11px;border-radius:999px;border:1px solid var(--border,#26304D);font:600 12.5px/1 Inter,system-ui,sans-serif;color:var(--muted,#AAB2CB)}
.gx-text h3{margin:0 0 10px;font:800 clamp(21px,2.3vw,26px)/1.25 Manrope,Inter,system-ui,sans-serif}
.gx-text p{margin:0 0 12px;font-size:16.5px;line-height:1.7;color:var(--subtle,#C8D0E6)}
.gx-text .hx-call{margin:12px 0 0}
.gx-media{display:flex;flex-direction:column;gap:16px;align-items:center;min-width:0}
.gx-phones{flex-direction:row;justify-content:center;align-items:flex-start;gap:14px}
.gx-shot{margin:0;width:100%}
.gx-shot img{display:block;width:100%;height:auto}
.gx-card img{border-radius:16px;border:1px solid var(--border,#26304D);box-shadow:0 24px 60px -30px rgba(0,0,0,.7)}
.gx-browser{border-radius:14px;overflow:hidden;border:1px solid var(--border,#26304D);background:#0D1330;box-shadow:0 30px 70px -34px rgba(0,0,0,.8)}
.gx-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#161D3D;border-bottom:1px solid var(--border,#26304D)}
.gx-bar i{width:10px;height:10px;border-radius:50%;background:#FF5F57}.gx-bar i+i{background:#FEBC2E}.gx-bar i+i+i{background:#28C840}
.gx-bar span{margin-left:12px;padding:3px 12px;border-radius:8px;background:#0B1029;font:500 12px/1.4 Inter,system-ui,sans-serif;color:#8F99BD}
.gx-phone{max-width:250px;padding:9px;border-radius:38px;background:#05070F;border:1px solid #2A3157;box-shadow:0 30px 60px -28px rgba(0,0,0,.85)}
.gx-phone img{border-radius:30px}
.gx-phones .gx-phone{flex:1 1 0;min-width:0}
.gx-tv{display:flex;flex-direction:column;align-items:center}
.gx-tv-in{width:100%;padding:10px;border-radius:14px;background:#05070F;border:1px solid #2A3157;box-shadow:0 30px 70px -30px rgba(0,0,0,.85),0 0 90px -40px rgba(91,91,255,.6)}
.gx-tv-in img{border-radius:4px}
.gx-stand{display:block;width:28%;height:12px;margin-top:-1px;border-radius:0 0 8px 8px;background:linear-gradient(#141A38,#0B1029)}
.gx-faq{margin-top:8px}
[data-theme=light] .gx-browser{background:#fff}
[data-theme=light] .gx-bar{background:#EEF1F8}
[data-theme=light] .gx-bar span{background:#fff;color:#5B6584}
@media (max-width:900px){
  .gx-map{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gx-step,.gx-flip{grid-template-columns:1fr;gap:22px;padding:30px 0}
  .gx-flip .gx-text{order:0}
  .gx-phone{max-width:220px}
}
@media (max-width:520px){
  .gx-map{gap:10px}.gx-map a{padding:14px}.gx-map b{font-size:15px}
  .gx-phones{gap:8px}
  .gx-phones .gx-phone{padding:5px;border-radius:24px}
  .gx-phones .gx-phone img{border-radius:20px}
}