/* Spixor A8.1 public redesign - cinematic, organized, responsive and theme-aware. */
:root{
  color-scheme:dark;
  --bg:#030712;
  --bg-2:#07111f;
  --bg-3:#0b1324;
  --surface:rgba(9,17,32,.72);
  --surface-solid:#0b1324;
  --surface-2:rgba(15,26,46,.78);
  --surface-3:rgba(20,35,59,.78);
  --text:#f7fbff;
  --text-soft:#d8e6f7;
  --secondary:#a9bad1;
  --muted:#75859b;
  --cyan:#18c9f5;
  --cyan-2:#6be8ff;
  --blue:#2563eb;
  --blue-2:#0b84ff;
  --orange:#f59e0b;
  --green:#3ee6a5;
  --red:#ff5570;
  --purple:#6d5dfc;
  --border:rgba(218,236,255,.12);
  --border-strong:rgba(218,236,255,.20);
  --border-accent:rgba(24,201,245,.38);
  --shadow:0 32px 110px rgba(0,0,0,.42);
  --shadow-soft:0 18px 70px rgba(0,0,0,.24);
  --radius-xl:34px;
  --radius-lg:24px;
  --radius-md:16px;
  --container:1180px;
  --side:clamp(18px,5vw,76px);
  --ease:cubic-bezier(.22,.8,.27,1);
}

html[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f8fc;
  --bg-2:#eef3fa;
  --bg-3:#ffffff;
  --surface:rgba(255,255,255,.78);
  --surface-solid:#ffffff;
  --surface-2:rgba(248,250,255,.86);
  --surface-3:#eef6ff;
  --text:#101828;
  --text-soft:#1d2939;
  --secondary:#475467;
  --muted:#667085;
  --cyan:#078fc2;
  --cyan-2:#0ea5e9;
  --blue:#2563eb;
  --blue-2:#0b74de;
  --orange:#d97706;
  --green:#047857;
  --red:#d92d20;
  --purple:#5b5bd6;
  --border:rgba(15,23,42,.10);
  --border-strong:rgba(15,23,42,.16);
  --border-accent:rgba(14,165,233,.28);
  --shadow:0 28px 90px rgba(22,34,64,.12);
  --shadow-soft:0 18px 56px rgba(22,34,64,.10);
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  min-height:100%;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  background:
    radial-gradient(900px 560px at 83% -8%, rgba(24,201,245,.17), transparent 62%),
    radial-gradient(820px 520px at 4% 8%, rgba(37,99,235,.14), transparent 58%),
    radial-gradient(760px 640px at 92% 62%, rgba(109,93,252,.10), transparent 62%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
}
html[data-theme="light"] body{
  background:
    radial-gradient(920px 540px at 82% -10%,rgba(14,165,233,.22),transparent 58%),
    radial-gradient(760px 480px at 3% 3%,rgba(37,99,235,.12),transparent 60%),
    radial-gradient(680px 560px at 88% 68%,rgba(7,143,194,.08),transparent 64%),
    linear-gradient(180deg,#f6f8fc 0%,#eef3fa 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  opacity:.72;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.16) 0 1px,transparent 1.5px),
    radial-gradient(circle at 62% 18%,rgba(107,232,255,.16) 0 1px,transparent 1.7px),
    radial-gradient(circle at 80% 78%,rgba(255,255,255,.12) 0 1px,transparent 1.4px);
  background-size:190px 190px,260px 260px,220px 220px;
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.82) 38%,transparent 100%);
}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit}
::selection{background:rgba(24,201,245,.32)}
.skip-link{position:absolute;left:-999px;top:12px;z-index:80;background:var(--cyan);color:#031018;border-radius:14px;padding:10px 14px;font-weight:900;text-decoration:none}.skip-link:focus{left:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;
  padding:14px var(--side);
  backdrop-filter:blur(18px) saturate(145%);
  background:rgba(3,7,18,.72);
  border-bottom:1px solid var(--border);
}
html[data-theme="light"] .site-header{background:rgba(246,248,252,.76)}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font-weight:950;letter-spacing:-.02em;white-space:nowrap}.brand img{width:38px;height:38px;border-radius:12px;object-fit:cover;box-shadow:0 0 0 1px var(--border),0 10px 28px rgba(24,201,245,.14)}.brand span{font-size:19px}.site-nav{display:flex;align-items:center;justify-content:center;gap:8px}.site-nav>a,.nav-group>a,.nav-actions>a{min-height:42px;display:inline-flex;align-items:center;text-decoration:none;border-radius:999px;padding:9px 13px;color:var(--secondary);font-weight:850;transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}.site-nav>a:hover,.nav-group>a:hover,.nav-actions>a:hover{color:var(--text);background:rgba(255,255,255,.06);transform:translateY(-1px)}html[data-theme="light"] .site-nav>a:hover,html[data-theme="light"] .nav-group>a:hover,html[data-theme="light"] .nav-actions>a:hover{background:rgba(14,165,233,.08)}
.nav-group{position:relative}.nav-group>a::after{content:"⌄";font-size:12px;margin-left:7px;opacity:.68}.nav-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);width:min(310px,calc(100vw - 30px));display:grid;gap:6px;padding:10px;border:1px solid var(--border);border-radius:22px;background:rgba(5,10,22,.94);box-shadow:var(--shadow-soft);opacity:0;visibility:hidden;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s var(--ease)}html[data-theme="light"] .nav-menu{background:rgba(255,255,255,.96)}.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}.nav-menu a{display:flex;min-height:42px;align-items:center;text-decoration:none;border-radius:15px;padding:10px 12px;color:var(--secondary);font-weight:850}.nav-menu a:hover{background:rgba(24,201,245,.10);color:var(--text)}.nav-actions{display:flex;align-items:center;gap:10px}.nav-toggle{display:none;width:46px;height:46px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);cursor:pointer}.nav-toggle span:not(.sr-only){display:block;width:18px;height:2px;margin:4px auto;border-radius:99px;background:currentColor}.theme-toggle{min-height:42px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.05);color:var(--text);padding:9px 13px;font-weight:900;cursor:pointer}.theme-toggle:hover{border-color:var(--border-accent);background:rgba(24,201,245,.08)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 18px;border-radius:999px;border:1px solid var(--border);font-weight:950;text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);color:var(--text);white-space:nowrap}.btn:hover{transform:translateY(-2px);border-color:var(--border-accent)}.btn.primary{background:linear-gradient(135deg,var(--cyan),var(--blue-2));border-color:rgba(107,232,255,.55);color:#fff;box-shadow:0 18px 54px rgba(24,201,245,.20)}.btn.primary:hover{box-shadow:0 22px 68px rgba(24,201,245,.28)}.btn.ghost{background:rgba(255,255,255,.055)}html[data-theme="light"] .btn.ghost{background:rgba(255,255,255,.82)}.btn[disabled],.btn.is-disabled{opacity:.56;cursor:not-allowed;pointer-events:none}

main{min-height:70vh}.eyebrow{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:8px 11px;border-radius:999px;border:1px solid var(--border-accent);background:rgba(24,201,245,.09);color:var(--cyan-2);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.105em}.eyebrow.alpha{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.10);color:#ffd08a}html[data-theme="light"] .eyebrow.alpha{color:#a15c00}.alpha-note{font-size:14px!important;color:#ffd08a!important;border-left:3px solid var(--orange);padding-left:14px;margin-top:22px}.hero,.page-hero{padding:clamp(76px,11vw,150px) var(--side) clamp(48px,8vw,96px)}
.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.82fr) minmax(360px,1.18fr);gap:clamp(26px,6vw,92px);align-items:center;min-height:min(920px,calc(100svh - 72px));overflow:hidden}.hero::before{content:"";position:absolute;right:-18vw;top:-14vw;width:min(70vw,880px);height:min(70vw,880px);border-radius:50%;background:radial-gradient(circle at 34% 26%,rgba(107,232,255,.50),rgba(24,201,245,.18) 28%,rgba(37,99,235,.08) 56%,transparent 68%);filter:blur(.2px);opacity:.72;z-index:-1}.hero::after{content:"";position:absolute;right:4vw;top:12%;width:min(52vw,720px);height:min(52vw,720px);border:1px solid rgba(107,232,255,.20);border-radius:50%;transform:rotate(-21deg) scaleX(1.48);z-index:-1;opacity:.70}.cosmic-depth{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(circle at 18% 20%,rgba(255,255,255,.18) 0 1px,transparent 1.5px),radial-gradient(circle at 74% 16%,rgba(107,232,255,.18) 0 1px,transparent 1.5px),radial-gradient(circle at 54% 74%,rgba(255,255,255,.14) 0 1px,transparent 1.5px),linear-gradient(115deg,transparent 0 44%,rgba(24,201,245,.07) 45%,transparent 47% 100%);background-size:160px 160px,220px 220px,190px 190px,100% 100%;animation:spxStarDrift 30s linear infinite;opacity:.74}@keyframes spxStarDrift{from{background-position:0 0,0 0,0 0,0 0}to{background-position:160px 90px,-220px 120px,190px -110px,0 0}}
.hero h1,.page-hero h1{margin:16px 0 18px;font-size:clamp(48px,8.2vw,104px);line-height:.90;letter-spacing:-.075em;font-weight:1000}.page-hero.compact h1{font-size:clamp(42px,7vw,82px)}.hero p,.page-hero p,.section p,.article p{font-size:clamp(17px,2vw,21px);color:var(--secondary);max-width:780px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.hero-points span{display:inline-flex;align-items:center;gap:8px;min-height:40px;border:1px solid var(--border-accent);border-radius:999px;background:rgba(24,201,245,.085);padding:8px 12px;color:var(--text-soft);font-weight:900}.hero-points span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px rgba(24,201,245,.75)}
.product-frame{position:relative;margin:0;border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(24,201,245,.13),rgba(37,99,235,.06)),var(--surface);padding:10px;box-shadow:var(--shadow);overflow:hidden}.product-frame::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 28%,rgba(255,255,255,.13) 34%,transparent 42% 100%);transform:translateX(-60%);opacity:.35;pointer-events:none}.product-frame img{border-radius:18px;border:1px solid rgba(255,255,255,.08);background:#07101d;width:100%}.hero-product{transform:perspective(1300px) rotateX(2deg) rotateY(-5deg);box-shadow:0 42px 120px rgba(0,0,0,.48),0 0 0 1px rgba(24,201,245,.08)}.hero-product::after{content:"";position:absolute;inset:auto 10% -26px 10%;height:42px;background:radial-gradient(closest-side,rgba(24,201,245,.36),transparent);filter:blur(18px);pointer-events:none}.hero-product figcaption{position:absolute;inset:10px;pointer-events:none}.hero-product figcaption span{position:absolute;left:var(--x);top:var(--y);transform:translate(-8px,-50%);border:1px solid rgba(107,232,255,.38);background:rgba(4,10,22,.84);color:#e7fbff;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:950;box-shadow:0 16px 40px rgba(0,0,0,.28)}html[data-theme="light"] .hero-product figcaption span{background:rgba(255,255,255,.92);color:#0b2c3d}.hero-product figcaption span::after{content:"";position:absolute;left:14px;bottom:-18px;width:1px;height:18px;background:linear-gradient(var(--cyan),transparent)}

/* Section architecture */
.section{padding:72px var(--side);max-width:var(--container)}.section h2,.intro h2,.pricing-preview h2,.roadmap-strip h2,.final-cta h2,.command-center h2,.builder-showcase h2,.export-pathway h2,.comparison h2,.mini-demo-copy h2{font-size:clamp(34px,5.3vw,64px);line-height:1.02;letter-spacing:-.05em;margin:14px 0}.intro{max-width:1040px}.intro p{font-size:clamp(18px,2vw,23px)}.command-center,.builder-showcase,.export-pathway,.comparison,.plain-explainer,.mini-builder-demo,.pricing-preview,.roadmap-strip,.final-cta,.faq-block,.article,.maintenance-card{position:relative;margin:36px var(--side) 82px;border:1px solid var(--border);border-radius:var(--radius-xl);background:radial-gradient(900px 330px at 12% 0%,rgba(24,201,245,.14),transparent 64%),linear-gradient(180deg,rgba(9,17,32,.74),rgba(5,10,22,.64));padding:clamp(24px,4vw,50px);box-shadow:var(--shadow-soft);overflow:hidden}.command-center::after,.builder-showcase::after,.mini-builder-demo::after,.roadmap-strip::after{content:"";position:absolute;right:-130px;top:-130px;width:260px;height:260px;border:1px solid rgba(24,201,245,.16);border-radius:50%;transform:scaleX(1.5) rotate(-16deg);pointer-events:none}html[data-theme="light"] .command-center,html[data-theme="light"] .builder-showcase,html[data-theme="light"] .export-pathway,html[data-theme="light"] .comparison,html[data-theme="light"] .plain-explainer,html[data-theme="light"] .mini-builder-demo,html[data-theme="light"] .pricing-preview,html[data-theme="light"] .roadmap-strip,html[data-theme="light"] .final-cta,html[data-theme="light"] .faq-block,html[data-theme="light"] .article,html[data-theme="light"] .maintenance-card{background:radial-gradient(900px 330px at 12% 0%,rgba(14,165,233,.13),transparent 64%),linear-gradient(180deg,rgba(255,255,255,.90),rgba(248,250,255,.82));box-shadow:var(--shadow)}
.command-center{display:grid;grid-template-columns:.88fr 1.12fr;gap:28px;align-items:center}.command-center p,.builder-showcase p,.comparison p,.mini-demo-copy p,.maintenance-card p{color:var(--secondary)}.command-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.command-grid div,.compare-grid div,.explain-grid p,.feature-card,.price-card,.roadmap-node{border:1px solid var(--border);border-radius:22px;background:rgba(255,255,255,.045);padding:20px;box-shadow:0 12px 36px rgba(0,0,0,.08)}html[data-theme="light"] .command-grid div,html[data-theme="light"] .compare-grid div,html[data-theme="light"] .explain-grid p,html[data-theme="light"] .feature-card,html[data-theme="light"] .price-card,html[data-theme="light"] .roadmap-node{background:rgba(255,255,255,.72)}.command-grid b{display:block;color:var(--cyan);font-size:32px;line-height:1}.command-grid span{display:block;margin-top:8px;color:var(--text);font-weight:950}.showcase-head{max-width:900px;margin-bottom:26px}.step-tabs{display:grid;grid-template-columns:minmax(220px,.34fr) minmax(0,1fr);gap:20px}.step-list{display:grid;gap:10px;align-content:start}.step-list button{text-align:left;border:1px solid var(--border);border-radius:20px;background:rgba(255,255,255,.045);color:var(--text);padding:15px;font-weight:950;cursor:pointer;transition:.18s var(--ease)}.step-list button:hover{border-color:var(--border-accent);transform:translateY(-1px)}.step-list button small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.10em;margin-bottom:4px}.step-list button.is-active{border-color:var(--border-accent);background:rgba(24,201,245,.11);box-shadow:0 18px 50px rgba(24,201,245,.11)}.step-panel{display:none;grid-template-columns:.42fr .58fr;gap:20px;align-items:center}.step-panel.is-active{display:grid}.step-panel h3{font-size:clamp(28px,4vw,46px);line-height:1.04;margin:12px 0}.step-panel p{color:var(--secondary)}
.card-grid,.roadmap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:20px var(--side) 82px}.feature-card{text-decoration:none;min-height:210px;transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}.feature-card:hover{transform:translateY(-5px);border-color:var(--border-accent);background:rgba(24,201,245,.075)}.feature-card h2,.feature-card h3,.price-card h2,.price-card h3{margin:14px 0 9px;font-size:24px;line-height:1.12}.feature-card p,.price-card p{color:var(--secondary);margin:0}.icon-mark{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:16px;background:rgba(24,201,245,.10);border:1px solid var(--border-accent);color:var(--cyan-2);font-weight:1000}.split{display:grid;grid-template-columns:.86fr 1.14fr;gap:32px;align-items:center;max-width:none}.plain-explainer{display:grid;grid-template-columns:.72fr 1.28fr;gap:28px}.explain-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.explain-grid p{margin:0;color:var(--secondary)}.explain-grid b{color:var(--text)}.pathway{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px}.pathway span{border:1px solid var(--border-accent);border-radius:999px;background:rgba(24,201,245,.09);padding:12px 15px;font-weight:950}.pathway i{width:36px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}.compare-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}.compare-grid b{display:block;font-size:18px;margin-bottom:6px;color:var(--text)}

/* Interactive mini builder */
.mini-builder-demo{display:grid;grid-template-columns:.82fr 1.18fr;gap:28px;align-items:center}.mini-demo-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.mini-demo-controls button{border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.055);color:var(--text);padding:10px 14px;font-weight:950;cursor:pointer}.mini-demo-controls button.is-active{border-color:var(--border-accent);background:rgba(24,201,245,.13);color:var(--cyan-2)}.mini-builder-surface{border:1px solid var(--border-strong);border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#0a1324,#050711);box-shadow:var(--shadow);min-height:430px}html[data-theme="light"] .mini-builder-surface{background:linear-gradient(180deg,#fff,#eef6ff)}.mini-topbar{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border);color:var(--secondary);font-weight:950}.mini-topbar b{color:var(--cyan)}.mini-body{display:grid;grid-template-columns:128px 1fr 172px;gap:14px;padding:16px}.mini-body aside{display:grid;align-content:start;gap:10px}.mini-body aside button,.mini-inspector label{border:1px solid var(--border);border-radius:15px;background:rgba(255,255,255,.055);padding:10px;color:var(--secondary);font-weight:850}.mini-body aside button.is-active{color:var(--text);border-color:var(--border-accent)}.mini-body main{display:grid;gap:12px;min-height:0}.mini-canvas-hero{min-height:230px;border:1px solid var(--border-accent);border-radius:24px;padding:26px;background:radial-gradient(420px 180px at 18% 0%,rgba(24,201,245,.20),transparent 70%),linear-gradient(145deg,rgba(24,201,245,.08),rgba(37,99,235,.07));display:grid;align-content:center;transition:transform .28s var(--ease),background .28s var(--ease),box-shadow .28s var(--ease)}.mini-canvas-hero span{color:var(--cyan);font-weight:950;text-transform:uppercase;font-size:12px;letter-spacing:.11em}.mini-canvas-hero h3{font-size:clamp(28px,4vw,48px);line-height:1;margin:8px 0}.mini-canvas-hero p{color:var(--secondary);margin:0}.mini-canvas-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mini-canvas-row i{height:62px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.05)}.mini-inspector b{color:var(--text)}.mini-builder-surface[data-mode="focus"] .mini-canvas-hero{transform:scale(1.018);box-shadow:0 22px 70px rgba(24,201,245,.16)}.mini-builder-surface[data-mode="theme"] .mini-canvas-hero{background:radial-gradient(420px 180px at 18% 0%,rgba(62,230,165,.20),transparent 70%),linear-gradient(145deg,rgba(62,230,165,.12),rgba(14,165,233,.10))}.mini-builder-surface[data-mode="export"] .mini-canvas-hero{background:radial-gradient(420px 180px at 18% 0%,rgba(245,158,11,.20),transparent 70%),linear-gradient(145deg,rgba(245,158,11,.12),rgba(24,201,245,.08))}

/* Pricing / roadmap */
.pricing-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:22px 0}.pricing-cards.wide{padding:0 var(--side) 44px}.price-card strong{display:block;font-size:clamp(36px,5vw,58px);line-height:1;margin:16px 0}.price-card.accent{border-color:var(--border-accent);box-shadow:0 24px 80px rgba(24,201,245,.12)}.price-list{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:9px;color:var(--secondary)}.roadmap-orbit{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}.roadmap-orbit::before{content:"";position:absolute;inset:12% 8%;border:1px solid rgba(24,201,245,.13);border-radius:50%;transform:rotate(-4deg);pointer-events:none}.roadmap-orbit span{position:relative;border:1px solid var(--border-accent);border-radius:18px;background:rgba(24,201,245,.09);padding:14px;font-weight:950;color:var(--text)}.roadmap-cinema{position:relative;margin:30px var(--side) 82px}.roadmap-cinema::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--cyan),transparent);opacity:.36}.roadmap-lane{position:relative;margin:0 0 20px;border:1px solid var(--border);border-radius:var(--radius-xl);background:radial-gradient(560px 220px at 0% 0%,rgba(24,201,245,.11),transparent 70%),linear-gradient(180deg,var(--surface-2),rgba(5,10,22,.56));padding:26px;box-shadow:var(--shadow-soft)}html[data-theme="light"] .roadmap-lane{background:radial-gradient(560px 220px at 0% 0%,rgba(14,165,233,.10),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.88),rgba(248,250,255,.78))}.roadmap-lane h2{font-size:clamp(28px,4vw,46px);line-height:1.08;margin:12px 0}.roadmap-lane>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.roadmap-node{position:relative;margin:0;color:var(--secondary)}.roadmap-node::before{content:"";position:absolute;right:16px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 20px rgba(24,201,245,.75)}.roadmap-node b{display:block;color:var(--text);margin-bottom:6px}.roadmap-node span{font-size:12px;color:var(--cyan);font-weight:950}

/* Auth / legal / support */
.auth-shell{min-height:78vh;display:grid;place-items:center;padding:78px var(--side)}.auth-shell-rich{grid-template-columns:minmax(280px,520px) minmax(320px,560px);gap:28px;align-items:center}.auth-card,.auth-story{width:min(100%,580px);border:1px solid var(--border);border-radius:var(--radius-xl);background:radial-gradient(620px 240px at 0% 0%,rgba(24,201,245,.12),transparent 68%),linear-gradient(180deg,var(--surface-2),rgba(5,10,22,.68));padding:clamp(24px,4vw,48px);box-shadow:var(--shadow)}html[data-theme="light"] .auth-card,html[data-theme="light"] .auth-story{background:radial-gradient(620px 240px at 0% 0%,rgba(14,165,233,.11),transparent 68%),linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,255,.86))}.auth-card h1,.auth-story h2{font-size:clamp(34px,6vw,62px);line-height:.98;letter-spacing:-.055em;margin:14px 0}.auth-card p,.auth-story p,.auth-story-points span{color:var(--secondary)}.auth-story-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.auth-story-points span{border:1px solid var(--border);border-radius:999px;padding:9px 12px;background:rgba(255,255,255,.05);font-weight:850}.auth-form{display:grid;gap:14px}.auth-form label{display:grid;gap:7px;color:var(--secondary);font-weight:850}.auth-form input,.auth-form select,.auth-form textarea,.register-step select{min-height:48px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text);padding:12px 13px;outline:0}html[data-theme="light"] .auth-form input,html[data-theme="light"] .auth-form select,html[data-theme="light"] .register-step select{background:#fff}.auth-form input:focus,.auth-form select:focus{border-color:var(--border-accent);box-shadow:0 0 0 4px rgba(24,201,245,.10)}.google-btn{display:flex;justify-content:center;align-items:center;min-height:48px;border-radius:999px;border:1px solid var(--border);text-decoration:none;background:rgba(255,255,255,.055);font-weight:950;color:var(--text);cursor:pointer}.steps{display:flex;gap:9px;margin:20px 0}.steps span{width:34px;height:34px;border-radius:14px;border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);font-weight:950}.steps span.is-active{background:var(--cyan);color:#03111e;border-color:transparent}.register-step{display:none}.register-step.is-active{display:grid;gap:13px}.captcha-box{border:1px dashed var(--border-accent);border-radius:20px;padding:15px;background:rgba(24,201,245,.07)}.legal-consent{display:flex!important;grid-template-columns:auto 1fr!important;align-items:flex-start;gap:11px;border:1px dashed var(--border-accent);border-radius:20px;padding:15px;background:rgba(24,201,245,.07)}.legal-consent input{min-height:auto!important;width:19px;height:19px;margin-top:3px}.legal-consent a{color:var(--cyan);font-weight:950}.form-status{min-height:22px;font-size:14px}.form-status.is-error{color:var(--red)}.form-status.is-ok{color:var(--green)}.auth-links{display:flex;justify-content:space-between;gap:14px;margin-top:16px}.maintenance-lock{border:1px solid rgba(245,158,11,.24);border-radius:20px;background:rgba(245,158,11,.09);padding:16px;margin-top:16px}.legal-article h2{font-size:clamp(24px,3vw,36px);margin:28px 0 8px;letter-spacing:-.025em}.legal-article p{font-size:17px}
.faq-item{border:1px solid var(--border);border-radius:18px;margin:12px 0;background:rgba(255,255,255,.045);overflow:hidden}.faq-item summary{cursor:pointer;padding:16px 18px;font-weight:950}.faq-item p{padding:0 18px 18px;margin:0;color:var(--secondary)}.filter-row{display:flex;flex-wrap:wrap;gap:10px;padding:0 var(--side) 24px}.filter-row button{border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.055);color:var(--secondary);padding:10px 14px;font-weight:950;cursor:pointer}.filter-row button.is-active{background:var(--cyan);border-color:transparent;color:#03111e}.maintenance-banner{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin:0;padding:12px var(--side);border-bottom:1px solid rgba(245,158,11,.24);background:linear-gradient(90deg,rgba(245,158,11,.15),rgba(24,201,245,.07));color:#ffe2ae}.maintenance-banner strong{color:var(--text);font-weight:950}.maintenance-banner span{color:var(--secondary)}.maintenance-banner a{color:#071018;background:var(--orange);text-decoration:none;border-radius:999px;padding:7px 11px;font-weight:950}

/* Footer / reveals */
.site-footer{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;border-top:1px solid var(--border);padding:32px var(--side);color:var(--secondary);background:rgba(3,7,18,.74);backdrop-filter:blur(14px)}html[data-theme="light"] .site-footer{background:rgba(255,255,255,.64)}.site-footer nav{display:flex;flex-wrap:wrap;gap:16px}.site-footer a{text-decoration:none}.footer-brand img{width:30px;height:30px}.reveal{opacity:0;transform:translateY(22px);transition:opacity .68s var(--ease),transform .68s var(--ease)}.reveal.is-visible{opacity:1;transform:none}

@media(max-width:1080px){
  .site-header{grid-template-columns:auto auto;justify-content:space-between}.nav-toggle{display:block}.site-nav,.nav-actions{display:none}.site-header.is-open .site-nav,.site-header.is-open .nav-actions{display:grid;grid-column:1/-1;justify-content:stretch}.site-header.is-open .site-nav{gap:6px}.site-header.is-open .site-nav>a,.site-header.is-open .nav-group>a,.site-header.is-open .nav-actions>a{justify-content:flex-start}.nav-menu{position:static;width:auto;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;border:0;padding:0 0 0 14px}.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{transform:none}.hero,.page-hero,.split,.command-center,.step-tabs,.step-panel,.plain-explainer,.mini-builder-demo,.auth-shell-rich{grid-template-columns:1fr}.hero{min-height:auto}.hero-product{transform:none}.hero-product{order:-1}.compare-grid,.roadmap-lane>div,.roadmap-orbit{grid-template-columns:1fr 1fr}.command-grid,.explain-grid,.pricing-cards,.pricing-cards.wide{grid-template-columns:1fr}.card-grid,.roadmap-grid{grid-template-columns:1fr 1fr}.mini-body{grid-template-columns:1fr}.mini-body aside{grid-template-columns:repeat(3,1fr)}.roadmap-cinema::before{left:14px}.pathway i{display:none}.auth-story{order:2}.cosmic-depth{animation-duration:48s;opacity:.48}
}
@media(max-width:640px){
  :root{--side:14px}.site-header{padding:12px var(--side)}.brand img{width:34px;height:34px}.brand span{font-size:17px}.hero,.page-hero{padding-top:46px}.hero h1,.page-hero h1{font-size:clamp(42px,14vw,64px);letter-spacing:-.065em}.hero-actions,.nav-actions,.auth-links{display:grid}.btn{width:100%}.hero-product figcaption span{display:none}.card-grid,.roadmap-grid,.compare-grid,.roadmap-lane>div,.roadmap-orbit{grid-template-columns:1fr}.command-center,.builder-showcase,.export-pathway,.comparison,.plain-explainer,.mini-builder-demo,.pricing-preview,.roadmap-strip,.final-cta,.faq-block,.article,.maintenance-card{border-radius:24px;margin-top:26px;margin-bottom:56px}.step-list{display:flex;overflow:auto;padding-bottom:4px}.step-list button{min-width:210px}.mini-canvas-row,.mini-body aside{grid-template-columns:1fr}.mini-builder-surface{min-height:auto}.site-footer{grid-template-columns:1fr}.maintenance-banner{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.cosmic-depth{animation:none}}

/* A8.9 navigator + hero cinematic section pass */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  transition:background .34s var(--ease), border-color .34s var(--ease), box-shadow .34s var(--ease), padding .34s var(--ease), transform .34s var(--ease);
  background:linear-gradient(180deg, rgba(3,7,18,.18), rgba(3,7,18,.05));
  border-bottom-color:transparent;
  box-shadow:none;
}
html[data-theme="light"] .site-header{background:linear-gradient(180deg, rgba(246,248,252,.10), rgba(246,248,252,.02));}
.site-header.is-scrolled,
.site-header.is-open,
.site-header:focus-within{
  background:rgba(3,7,18,.78);
  border-bottom-color:var(--border);
  box-shadow:0 16px 50px rgba(0,0,0,.22);
  padding-top:10px;
  padding-bottom:10px;
}
html[data-theme="light"] .site-header.is-scrolled,
html[data-theme="light"] .site-header.is-open,
html[data-theme="light"] .site-header:focus-within{
  background:rgba(246,248,252,.84);
  box-shadow:0 16px 46px rgba(20,35,70,.10);
}
.site-header .brand{position:relative;padding:6px 10px 6px 6px;border-radius:999px;transition:background .25s var(--ease), transform .25s var(--ease)}
.site-header .brand:hover{background:rgba(255,255,255,.055);transform:translateY(-1px)}
html[data-theme="light"] .site-header .brand:hover{background:rgba(14,165,233,.08)}
.site-header .brand img{border-radius:999px;box-shadow:0 0 0 1px rgba(107,232,255,.24),0 0 34px rgba(24,201,245,.16)}
.site-nav>a,.nav-group>a,.nav-actions>a,.theme-toggle{backdrop-filter:blur(12px);}
.nav-group-mega{position:relative}.nav-group-mega .mega-menu{
  width:min(780px,calc(100vw - 32px));
  left:50%;
  grid-template-columns:1fr;
  padding:16px;
  border-radius:30px;
  background:linear-gradient(145deg,rgba(4,10,24,.96),rgba(8,20,38,.94));
  border:1px solid rgba(107,232,255,.16);
  box-shadow:0 34px 110px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}
.nav-group-mega .mega-menu::before{content:"";position:absolute;inset:-35%;background:radial-gradient(circle at 20% 20%,rgba(24,201,245,.18),transparent 34%),radial-gradient(circle at 85% 30%,rgba(37,99,235,.14),transparent 40%),linear-gradient(115deg,transparent 0 49%,rgba(107,232,255,.10) 50%,transparent 52%);pointer-events:none;opacity:.92}
html[data-theme="light"] .nav-group-mega .mega-menu{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(238,246,255,.96));box-shadow:0 30px 80px rgba(22,34,64,.16), inset 0 1px 0 rgba(255,255,255,.82)}
.mega-intro,.mega-grid,.mega-footer{position:relative;z-index:1}.mega-intro{display:grid;gap:5px;padding:8px 10px 16px;border-bottom:1px solid var(--border);margin-bottom:12px}.mega-intro span{color:var(--cyan-2);font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em}.mega-intro strong{font-size:clamp(19px,2.2vw,28px);line-height:1.04;letter-spacing:-.045em}.mega-intro small{color:var(--secondary);font-weight:750}.mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mega-grid.small{grid-template-columns:repeat(2,minmax(0,1fr))}.mega-card{position:relative;display:grid!important;gap:6px!important;min-height:96px!important;padding:16px!important;border-radius:21px!important;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);overflow:hidden;color:var(--text)!important;transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease)}.mega-card::before{content:"";position:absolute;width:72px;height:72px;border-radius:50%;right:-22px;top:-24px;background:radial-gradient(circle,rgba(24,201,245,.32),transparent 65%);opacity:.76;transition:transform .25s var(--ease),opacity .25s var(--ease)}.mega-card:hover{transform:translateY(-3px);border-color:rgba(107,232,255,.28);background:rgba(24,201,245,.08);box-shadow:0 18px 46px rgba(0,0,0,.22)}.mega-card:hover::before{transform:scale(1.35);opacity:1}.mega-card b{font-size:15px;letter-spacing:-.02em}.mega-card span{font-size:13px!important;line-height:1.35;color:var(--secondary)!important;font-weight:750!important}.mega-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:12px;padding:12px 12px 4px;color:var(--secondary);font-size:13px;font-weight:850}.mega-footer a{color:var(--cyan-2);text-decoration:none}.resources-mega .mega-menu{width:min(560px,calc(100vw - 32px))}.resources-mega .mega-card{min-height:86px!important}
.spx-public main{padding-top:0}.spx-aurora-hero{min-height:clamp(820px,100svh,1040px);padding-top:clamp(120px,13vw,170px);padding-bottom:clamp(98px,11vw,150px);grid-template-columns:minmax(0,.92fr) minmax(390px,1.08fr);background:radial-gradient(ellipse at 50% 105%, rgba(7,17,31,.70), transparent 58%);}
html[data-theme="light"] .spx-aurora-hero{background:radial-gradient(ellipse at 50% 105%, rgba(238,243,250,.94), transparent 62%)}
.spx-aurora-hero::before{right:-10vw;top:-9vw;width:min(78vw,980px);height:min(78vw,980px);background:radial-gradient(circle at 34% 26%,rgba(142,236,255,.70),rgba(24,201,245,.30) 28%,rgba(37,99,235,.16) 52%,rgba(8,15,34,.05) 68%,transparent 76%);animation:spxPlanetPulse 7s ease-in-out infinite alternate}.spx-aurora-hero::after{right:5vw;top:9%;width:min(60vw,800px);height:min(60vw,800px);border-color:rgba(107,232,255,.25);box-shadow:0 0 90px rgba(24,201,245,.09);animation:spxOrbitFloat 12s ease-in-out infinite alternate}.milkyway-field{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 72% 15%,rgba(24,201,245,.23),transparent 32%),radial-gradient(ellipse at 24% 16%,rgba(77,103,255,.19),transparent 33%),radial-gradient(ellipse at 56% 42%,rgba(161,219,255,.16),transparent 26%),linear-gradient(180deg,#030712 0%,#07111f 64%,rgba(7,17,31,0) 100%)}html[data-theme="light"] .milkyway-field{background:radial-gradient(ellipse at 72% 15%,rgba(14,165,233,.30),transparent 32%),radial-gradient(ellipse at 24% 16%,rgba(37,99,235,.16),transparent 33%),radial-gradient(ellipse at 56% 42%,rgba(7,143,194,.13),transparent 28%),linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,rgba(246,248,252,0) 100%)}.milkyway-field::before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 210deg at 55% 28%, transparent 0 20%, rgba(80,214,255,.17) 24%, rgba(37,99,235,.13) 32%, transparent 46%, rgba(255,255,255,.10) 52%, transparent 60% 100%);filter:blur(34px);transform:rotate(-10deg);animation:spxMilkyFlow 26s ease-in-out infinite alternate}.milkyway-field::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 25%,rgba(255,255,255,.36) 0 1px,transparent 1.7px),radial-gradient(circle at 35% 12%,rgba(107,232,255,.28) 0 1px,transparent 1.6px),radial-gradient(circle at 80% 30%,rgba(255,255,255,.22) 0 1px,transparent 1.5px),radial-gradient(circle at 60% 68%,rgba(255,255,255,.16) 0 1px,transparent 1.5px);background-size:180px 180px,240px 240px,210px 210px,260px 260px;animation:spxStarDrift 42s linear infinite;opacity:.76}.milkyway-field i{position:absolute;border-radius:999px;filter:blur(24px);opacity:.60;animation:spxNebulaPulse 9s ease-in-out infinite alternate}.milkyway-field i:nth-child(1){width:280px;height:120px;background:rgba(24,201,245,.16);left:10%;top:19%;transform:rotate(-18deg)}.milkyway-field i:nth-child(2){width:360px;height:140px;background:rgba(37,99,235,.18);right:14%;top:12%;transform:rotate(18deg);animation-delay:-2s}.milkyway-field i:nth-child(3){width:260px;height:110px;background:rgba(107,232,255,.14);left:47%;top:37%;transform:rotate(-8deg);animation-delay:-4s}.hero-content-fade{height:160px;margin-top:-160px;position:relative;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(7,17,31,.70) 46%,var(--bg-2) 100%)}html[data-theme="light"] .hero-content-fade{background:linear-gradient(180deg,transparent 0%,rgba(246,248,252,.72) 50%,#eef3fa 100%)}.hero-copy{position:relative;z-index:3}.hero-copy h1{max-width:850px;text-wrap:balance}.hero-lead{font-size:clamp(18px,2.1vw,24px)!important;line-height:1.55;color:var(--text-soft)!important;max-width:760px!important}.hero-trust-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:24px;max-width:760px}.hero-trust-row span{position:relative;min-height:82px;padding:16px;border-radius:20px;border:1px solid rgba(107,232,255,.18);background:rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);color:var(--secondary);font-weight:760;overflow:hidden}.hero-trust-row span::after{content:"";position:absolute;right:-28px;top:-28px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(24,201,245,.18),transparent 68%)}.hero-trust-row b{display:block;color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:5px}.hero-product-system{position:relative;min-height:620px;perspective:1200px}.builder-holo-card{position:absolute;inset:8% 2% auto 0;min-height:430px;border-radius:34px;border:1px solid rgba(107,232,255,.22);background:linear-gradient(145deg,rgba(8,17,36,.82),rgba(5,10,22,.68));box-shadow:0 36px 130px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(22px) saturate(150%);transform:rotateY(-8deg) rotateX(5deg) rotateZ(-1deg);overflow:hidden;transition:transform .45s var(--ease)}.builder-holo-card::before{content:"";position:absolute;inset:-1px;background:linear-gradient(115deg,transparent 0 30%,rgba(107,232,255,.18) 45%,transparent 58% 100%);animation:spxScan 5s ease-in-out infinite;pointer-events:none}.holo-topbar{height:54px;display:flex;align-items:center;gap:8px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08);color:var(--secondary);font-size:13px;font-weight:900}.holo-topbar span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}.holo-topbar span:nth-child(1){background:#ff6b86}.holo-topbar span:nth-child(2){background:#ffd166}.holo-topbar span:nth-child(3){background:#51e6a7}.holo-topbar b{margin-left:auto;color:var(--text);letter-spacing:.02em}.holo-workspace{display:grid;grid-template-columns:126px 1fr 150px;gap:12px;padding:16px;height:376px}.holo-sidebar,.holo-inspector,.holo-canvas{border:1px solid rgba(255,255,255,.08);border-radius:22px;background:rgba(255,255,255,.045)}.holo-sidebar,.holo-inspector{display:grid;align-content:start;gap:10px;padding:14px;color:var(--secondary);font-size:12px;font-weight:850}.holo-sidebar b,.holo-inspector b{color:var(--text)}.holo-sidebar span{padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.045)}.holo-sidebar .is-on{background:rgba(24,201,245,.15);color:var(--cyan-2)}.holo-sidebar i{height:68px;border-radius:15px;background:linear-gradient(135deg,rgba(24,201,245,.15),rgba(37,99,235,.08));margin-top:4px}.holo-inspector label{display:grid;gap:3px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}.holo-inspector span{color:var(--cyan-2)}.holo-canvas{position:relative;padding:18px;overflow:hidden;background:radial-gradient(circle at 75% 15%,rgba(24,201,245,.12),transparent 34%),rgba(255,255,255,.04)}.holo-site-nav{height:24px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.045));margin-bottom:18px}.holo-canvas section{border-radius:24px;min-height:185px;padding:24px;background:linear-gradient(135deg,rgba(24,201,245,.16),rgba(37,99,235,.08));border:1px solid rgba(107,232,255,.18)}.holo-canvas small{color:var(--cyan-2);font-weight:1000;text-transform:uppercase;letter-spacing:.10em}.holo-canvas strong{display:block;margin-top:12px;font-size:clamp(24px,3.1vw,42px);line-height:1;letter-spacing:-.06em}.holo-canvas em{display:block;width:58%;height:9px;border-radius:999px;background:rgba(255,255,255,.26);margin-top:20px}.holo-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.holo-blocks i{height:64px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06)}.hero-floating-card{position:absolute;z-index:4;max-width:205px;padding:15px 16px;border-radius:20px;border:1px solid rgba(107,232,255,.22);background:rgba(5,10,22,.74);box-shadow:0 22px 70px rgba(0,0,0,.28);backdrop-filter:blur(18px);animation:spxFloatCard 6s ease-in-out infinite alternate}.hero-floating-card b{display:block;color:var(--text);font-size:14px}.hero-floating-card span{display:block;margin-top:3px;color:var(--secondary);font-size:12px;line-height:1.35}.hero-floating-card.card-a{left:-3%;top:5%}.hero-floating-card.card-b{right:1%;top:18%;animation-delay:-2s}.hero-floating-card.card-c{left:6%;bottom:18%;animation-delay:-4s}.hero-screenshot-frame{position:absolute;right:4%;bottom:3%;width:min(430px,58%);margin:0;transform:rotateY(-13deg) rotateX(4deg) rotateZ(2deg);opacity:.86}.hero-scroll-cue{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:24px;height:38px;border:1px solid rgba(107,232,255,.28);border-radius:999px;display:grid;place-items:start center;padding-top:7px;opacity:.72}.hero-scroll-cue span{width:4px;height:8px;border-radius:99px;background:var(--cyan-2);animation:spxScrollCue 1.4s ease-in-out infinite}
html[data-theme="light"] .builder-holo-card{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(238,246,255,.70));box-shadow:0 34px 95px rgba(22,34,64,.16),inset 0 1px 0 rgba(255,255,255,.84)}html[data-theme="light"] .holo-sidebar,html[data-theme="light"] .holo-inspector,html[data-theme="light"] .holo-canvas{background:rgba(255,255,255,.72);border-color:rgba(15,23,42,.10)}html[data-theme="light"] .hero-floating-card{background:rgba(255,255,255,.76);box-shadow:0 22px 60px rgba(22,34,64,.13)}
@keyframes spxPlanetPulse{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2%,1%,0) scale(1.035)}}@keyframes spxOrbitFloat{from{transform:rotate(-21deg) scaleX(1.48) translateY(0)}to{transform:rotate(-17deg) scaleX(1.54) translateY(18px)}}@keyframes spxMilkyFlow{from{transform:translate3d(-2%,0,0) rotate(-12deg) scale(1)}to{transform:translate3d(3%,2%,0) rotate(-7deg) scale(1.08)}}@keyframes spxNebulaPulse{from{transform:translate3d(0,0,0) rotate(var(--r,0deg)) scale(.96);opacity:.42}to{transform:translate3d(18px,-12px,0) rotate(var(--r,0deg)) scale(1.08);opacity:.74}}@keyframes spxScan{0%,100%{transform:translateX(-42%);opacity:.15}48%{transform:translateX(46%);opacity:.55}}@keyframes spxFloatCard{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-14px,0)}}@keyframes spxScrollCue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(13px);opacity:.25}100%{transform:translateY(0);opacity:1}}
@media (hover:hover){.builder-holo-card[data-tilt-active="1"]{transform:rotateY(var(--tilt-x,-8deg)) rotateX(var(--tilt-y,5deg)) rotateZ(-1deg) translateY(-4px)}}
@media(max-width:1050px){.site-header{grid-template-columns:auto auto 1fr}.nav-toggle{display:block;order:3;justify-self:end}.site-nav{display:none}.site-header.is-open .site-nav{display:grid;position:absolute;left:16px;right:16px;top:calc(100% + 10px);padding:12px;border:1px solid var(--border);border-radius:26px;background:rgba(4,10,22,.96);box-shadow:var(--shadow-soft);justify-content:stretch}.site-header.is-open .nav-actions{display:flex}.nav-actions{justify-self:end}.nav-group-mega .mega-menu,.resources-mega .mega-menu{position:static;width:100%;opacity:1;visibility:visible;transform:none;margin-top:8px}.mega-grid,.mega-grid.small{grid-template-columns:1fr}.spx-aurora-hero{grid-template-columns:1fr;min-height:auto;padding-top:128px}.hero-product-system{min-height:560px}.builder-holo-card{inset:4% 0 auto 0}.hero-screenshot-frame{right:0;width:min(470px,66%)}}
@media(max-width:720px){.site-header{padding-left:16px;padding-right:16px}.nav-actions .btn.primary,.nav-actions .btn.ghost{display:none}.spx-aurora-hero{padding-left:18px;padding-right:18px;padding-top:112px;padding-bottom:84px}.hero h1{font-size:clamp(46px,14vw,70px);letter-spacing:-.08em}.hero-trust-row{grid-template-columns:1fr}.hero-product-system{min-height:520px}.builder-holo-card{min-height:390px;transform:none}.holo-workspace{grid-template-columns:1fr;padding:12px;height:auto}.holo-sidebar,.holo-inspector{display:none}.holo-canvas{min-height:310px}.hero-floating-card{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin:10px 0 0 auto;max-width:250px}.hero-floating-card.card-a{margin-top:410px}.hero-screenshot-frame{display:none}.mega-footer{display:grid}.hero-content-fade{height:110px;margin-top:-110px}}



/* ==========================================================================
   A8.12 HERO FROM SCRATCH — interactive Milky Way experience
   ========================================================================== */

/* Navigator polish kept isolated and appended after older public CSS. */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:90;
  background:transparent!important;
  border-bottom:1px solid transparent;
  transition:background .34s var(--ease), border-color .34s var(--ease), box-shadow .34s var(--ease), padding .34s var(--ease);
}
.site-header.is-scrolled,
.site-header.is-open,
.site-header:focus-within{
  background:rgba(3,7,18,.78)!important;
  border-bottom-color:rgba(218,236,255,.12);
  box-shadow:0 18px 54px rgba(0,0,0,.30);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
}
html[data-theme="light"] .site-header.is-scrolled,
html[data-theme="light"] .site-header.is-open,
html[data-theme="light"] .site-header:focus-within{
  background:rgba(246,248,252,.86)!important;
  border-bottom-color:rgba(15,23,42,.10);
  box-shadow:0 18px 52px rgba(22,34,64,.12);
}
.nav-home-link::before{
  content:"";
  display:inline-block;
  width:7px;height:7px;
  margin-right:9px;
  border-radius:50%;
  vertical-align:1px;
  background:var(--cyan-2);
  box-shadow:0 0 18px rgba(24,201,245,.72);
}
.site-nav>a,
.nav-group>a,
.nav-actions>a,
.theme-toggle{
  transition:transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), color .22s var(--ease);
}
.site-nav>a:hover,
.nav-group:hover>a,
.nav-actions>a:hover,
.theme-toggle:hover{
  transform:translateY(-1px);
}
.nav-actions .btn.primary{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 52%,#18c9f5 100%);
  box-shadow:0 14px 42px rgba(14,165,233,.25), inset 0 1px 0 rgba(255,255,255,.26);
}
.nav-actions .btn.primary::after{
  content:"";
  position:absolute;
  inset:-70% -40%;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.34),transparent 65%);
  transform:translateX(-72%) rotate(12deg);
  transition:transform .72s var(--ease);
}
.nav-actions .btn.primary:hover::after{transform:translateX(72%) rotate(12deg)}
.nav-group-mega .mega-menu{
  border-radius:30px;
  border:1px solid rgba(107,232,255,.20);
  background:
    radial-gradient(circle at 14% 8%,rgba(24,201,245,.14),transparent 28%),
    radial-gradient(circle at 90% 0%,rgba(37,99,235,.18),transparent 30%),
    rgba(4,10,22,.92);
  box-shadow:0 34px 110px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(24px) saturate(150%);
}
html[data-theme="light"] .nav-group-mega .mega-menu{
  background:
    radial-gradient(circle at 14% 8%,rgba(14,165,233,.16),transparent 30%),
    radial-gradient(circle at 90% 0%,rgba(37,99,235,.12),transparent 32%),
    rgba(255,255,255,.94);
  box-shadow:0 34px 90px rgba(22,34,64,.14);
}

/* Completely new hero root. It does not use the older .hero/.spx-aurora-hero classes. */
.spx-hero-v12{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(850px,100svh,1120px);
  padding:clamp(126px,12vw,174px) var(--side) clamp(142px,13vw,196px);
  color:var(--text);
  background:#020511;
}
html[data-theme="light"] .spx-hero-v12{
  background:#eef6ff;
}
.spx-hero-space,
.spx-hero-nebula,
.spx-hero-bottom-fade{
  position:absolute;
  pointer-events:none;
}
.spx-hero-space{
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  display:block;
  background:
    radial-gradient(980px 540px at 76% 16%,rgba(37,99,235,.18),transparent 62%),
    radial-gradient(760px 440px at 12% 78%,rgba(24,201,245,.12),transparent 66%),
    linear-gradient(180deg,#020511 0%,#06101e 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-space{
  background:
    radial-gradient(980px 540px at 76% 16%,rgba(37,99,235,.12),transparent 62%),
    radial-gradient(760px 440px at 12% 78%,rgba(14,165,233,.11),transparent 66%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 74%,#eef3fa 100%);
}
.spx-hero-nebula{
  inset:-8% -6%;
  z-index:1;
  overflow:hidden;
}
.spx-hero-nebula::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:5%;
  height:86%;
  background:
    linear-gradient(111deg,
      transparent 0 29%,
      rgba(64,119,255,.08) 35%,
      rgba(107,232,255,.22) 43%,
      rgba(255,255,255,.34) 49%,
      rgba(185,226,255,.20) 55%,
      rgba(47,127,255,.10) 63%,
      transparent 71% 100%);
  filter:blur(12px) saturate(140%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-hero-x,0px) * .10),calc(var(--spx-hero-y,0px) * .08),0);
  opacity:.88;
  animation:spxV12GalaxyDrift 24s ease-in-out infinite alternate;
}
.spx-hero-nebula::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 42% 48%,rgba(255,255,255,.14),transparent 34%),
    radial-gradient(ellipse at 50% 53%,rgba(107,232,255,.18),transparent 43%),
    radial-gradient(ellipse at 34% 62%,rgba(255,170,245,.08),transparent 35%);
  filter:blur(24px);
  transform:rotate(-18deg) translate3d(calc(var(--spx-hero-x,0px) * .06),calc(var(--spx-hero-y,0px) * .05),0);
  opacity:.78;
  animation:spxV12NebulaBreath 14s ease-in-out infinite alternate;
}
html[data-theme="light"] .spx-hero-nebula::before{
  opacity:.62;
  background:
    linear-gradient(111deg,
      transparent 0 30%,
      rgba(37,99,235,.06) 36%,
      rgba(14,165,233,.15) 44%,
      rgba(255,255,255,.64) 49%,
      rgba(125,211,252,.14) 55%,
      rgba(37,99,235,.07) 63%,
      transparent 71% 100%);
}
html[data-theme="light"] .spx-hero-nebula::after{
  opacity:.52;
}
.nebula-cloud{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(36px);
  opacity:.50;
  transform:translate3d(calc(var(--spx-hero-x,0px) * .18),calc(var(--spx-hero-y,0px) * .14),0);
  animation:spxV12CloudFloat 12s ease-in-out infinite alternate;
}
.cloud-a{left:3%;top:62%;width:46vw;height:13vw;background:rgba(107,232,255,.14);transform:rotate(-17deg)}
.cloud-b{right:5%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.16);transform:rotate(-18deg);animation-delay:-3s}
.cloud-c{left:40%;top:42%;width:36vw;height:10vw;background:rgba(255,188,244,.09);transform:rotate(-18deg);animation-delay:-6s}
.spx-logo-constellation{
  position:absolute;
  right:clamp(18px,7vw,96px);
  top:clamp(120px,15vw,220px);
  width:min(38vw,500px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  opacity:.07;
  filter:drop-shadow(0 0 90px rgba(24,201,245,.22));
  transform:rotate(-8deg) translate3d(calc(var(--spx-hero-x,0px) * -.12),calc(var(--spx-hero-y,0px) * -.08),0);
}
.spx-logo-constellation::before{
  content:"";
  position:absolute;
  inset:5%;
  border-radius:50%;
  border:1px solid rgba(107,232,255,.18);
  box-shadow:0 0 90px rgba(24,201,245,.10),inset 0 0 62px rgba(24,201,245,.08);
}
.spx-logo-constellation img{
  width:62%;
  height:62%;
  object-fit:contain;
  border-radius:999px;
}
html[data-theme="light"] .spx-logo-constellation{opacity:.045}

.spx-hero-shell{
  position:relative;
  z-index:4;
  width:min(1360px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(460px,1.04fr) minmax(420px,.96fr);
  gap:clamp(34px,5vw,82px);
  align-items:center;
}
.spx-hero-message{
  grid-column:2;
  max-width:740px;
}
.spx-hero-product{
  grid-column:1;
  grid-row:1;
  position:relative;
  min-height:650px;
  perspective:1400px;
  transform:translate3d(calc(var(--spx-hero-x,0px) * .55),calc(var(--spx-hero-y,0px) * .45),0);
}
.spx-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(107,232,255,.22);
  background:rgba(24,201,245,.10);
  color:#bff4ff;
  font-weight:1000;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
html[data-theme="light"] .spx-hero-kicker{
  color:#075985;
  background:rgba(14,165,233,.10);
  border-color:rgba(14,165,233,.22);
}
.spx-hero-message h1{
  margin:18px 0 0;
  font-size:clamp(52px,6vw,92px);
  line-height:.92;
  letter-spacing:-.088em;
  text-wrap:balance;
}
.spx-hero-lead{
  margin:24px 0 0;
  max-width:710px;
  color:var(--text-soft);
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.56;
}
.spx-hero-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.spx-hero-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:26px;
}
.spx-hero-points span{
  min-height:104px;
  padding:17px;
  border-radius:22px;
  border:1px solid rgba(107,232,255,.17);
  background:rgba(255,255,255,.052);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  color:var(--secondary);
  font-weight:800;
}
html[data-theme="light"] .spx-hero-points span{
  background:rgba(255,255,255,.64);
  border-color:rgba(15,23,42,.10);
}
.spx-hero-points b{
  display:block;
  margin-bottom:6px;
  color:var(--cyan-2);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.builder-photo-behind{
  position:absolute;
  left:clamp(-220px,-14vw,-80px);
  top:44px;
  width:min(650px,78vw);
  margin:0;
  z-index:1;
  opacity:.64;
  transform:rotateY(-18deg) rotateX(5deg) rotateZ(-4deg);
  filter:saturate(1.08) contrast(1.05);
}
.builder-photo-behind::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:34px;
  background:linear-gradient(90deg,rgba(2,5,17,.62),rgba(2,5,17,.05) 48%,rgba(2,5,17,.44));
  pointer-events:none;
}
.builder-photo-behind img{
  display:block;
  width:100%;
  border-radius:34px;
  border:1px solid rgba(107,232,255,.18);
  box-shadow:0 38px 130px rgba(0,0,0,.42);
}
.spx-builder-window{
  position:absolute;
  left:clamp(0px,4vw,62px);
  top:104px;
  z-index:3;
  width:min(690px,92%);
  min-height:470px;
  border-radius:34px;
  border:1px solid rgba(107,232,255,.22);
  background:linear-gradient(145deg,rgba(8,17,36,.86),rgba(5,10,22,.70));
  box-shadow:0 42px 140px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(22px) saturate(150%);
  overflow:hidden;
  transform:rotateY(-9deg) rotateX(5deg) rotateZ(-1.5deg);
  transition:transform .34s var(--ease);
}
html[data-theme="light"] .spx-builder-window{
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(238,246,255,.74));
  box-shadow:0 36px 110px rgba(22,34,64,.18),inset 0 1px 0 rgba(255,255,255,.80);
}
.spx-builder-window::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(115deg,transparent 0 32%,rgba(107,232,255,.18) 45%,transparent 60% 100%);
  animation:spxV12Scan 5.2s ease-in-out infinite;
  pointer-events:none;
}
.spx-builder-bar{
  height:56px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--secondary);
  font-size:13px;
  font-weight:900;
}
.spx-builder-bar span{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.22);
}
.spx-builder-bar span:nth-child(1){background:#ff6b86}
.spx-builder-bar span:nth-child(2){background:#ffd166}
.spx-builder-bar span:nth-child(3){background:#51e6a7}
.spx-builder-bar strong{margin-left:auto;color:var(--text);letter-spacing:.01em}
.spx-builder-bar em{
  font-style:normal;
  padding:5px 8px;
  border-radius:999px;
  color:var(--cyan-2);
  background:rgba(24,201,245,.10);
  border:1px solid rgba(107,232,255,.16);
}
.spx-builder-workspace{
  display:grid;
  grid-template-columns:126px 1fr 148px;
  gap:12px;
  padding:16px;
  min-height:414px;
}
.spx-builder-left,
.spx-builder-right,
.spx-builder-canvas{
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:rgba(255,255,255,.045);
}
html[data-theme="light"] .spx-builder-left,
html[data-theme="light"] .spx-builder-right,
html[data-theme="light"] .spx-builder-canvas{
  border-color:rgba(15,23,42,.10);
  background:rgba(255,255,255,.70);
}
.spx-builder-left,
.spx-builder-right{
  display:grid;
  align-content:start;
  gap:10px;
  padding:14px;
  color:var(--secondary);
  font-size:12px;
  font-weight:850;
}
.spx-builder-left b,
.spx-builder-right b{color:var(--text)}
.spx-builder-left i{
  font-style:normal;
  padding:9px 10px;
  border-radius:13px;
  background:rgba(255,255,255,.045);
}
.spx-builder-left i.active{
  background:rgba(24,201,245,.15);
  color:var(--cyan-2);
}
.spx-builder-left small{
  display:block;
  height:72px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(24,201,245,.15),rgba(37,99,235,.08));
}
.spx-builder-right label{
  display:grid;
  gap:3px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.spx-builder-right span{color:var(--cyan-2)}
.spx-builder-canvas{
  position:relative;
  padding:18px;
  overflow:hidden;
  background:radial-gradient(circle at 75% 15%,rgba(24,201,245,.12),transparent 34%),rgba(255,255,255,.04);
}
.fake-browser-nav{
  height:25px;
  margin-bottom:18px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.045));
}
.spx-builder-canvas section{
  min-height:202px;
  padding:24px;
  border-radius:24px;
  border:1px solid rgba(107,232,255,.18);
  background:linear-gradient(135deg,rgba(24,201,245,.16),rgba(37,99,235,.08));
}
.spx-builder-canvas small{
  color:var(--cyan-2);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.spx-builder-canvas h2{
  margin:13px 0 0;
  max-width:410px;
  font-size:clamp(26px,2.8vw,42px);
  line-height:1;
  letter-spacing:-.06em;
}
.spx-builder-canvas p{
  max-width:360px;
  color:var(--secondary);
}
.spx-canvas-blocks{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px;
}
.spx-canvas-blocks i{
  height:64px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.06);
}
.spx-hero-card{
  position:absolute;
  z-index:4;
  max-width:220px;
  padding:15px 16px;
  border-radius:21px;
  border:1px solid rgba(107,232,255,.22);
  background:rgba(5,10,22,.74);
  box-shadow:0 22px 70px rgba(0,0,0,.28);
  backdrop-filter:blur(18px);
  animation:spxV12Float 6s ease-in-out infinite alternate;
}
html[data-theme="light"] .spx-hero-card{
  background:rgba(255,255,255,.78);
  box-shadow:0 22px 60px rgba(22,34,64,.13);
}
.spx-hero-card b{
  display:block;
  color:var(--text);
  font-size:14px;
}
.spx-hero-card span{
  display:block;
  margin-top:4px;
  color:var(--secondary);
  font-size:12px;
  line-height:1.35;
}
.card-visual{left:-1%;top:34px}
.card-export{right:2%;bottom:84px;animation-delay:-2.5s}
.spx-hero-bottom-fade{
  left:0;right:0;bottom:-1px;
  z-index:2;
  height:240px;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.28) 42%,
      rgba(7,17,31,.78) 73%,
      var(--bg-2) 100%);
}
html[data-theme="light"] .spx-hero-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.36) 42%,
      rgba(246,248,252,.82) 73%,
      #eef3fa 100%);
}
.spx-hero-v12 + .section.intro{
  margin-top:-52px;
  position:relative;
  z-index:5;
}

@keyframes spxV12GalaxyDrift{
  0%{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.05);opacity:.76}
  100%{transform:rotate(-16deg) translate3d(1.4%,-.8%,0) scale(1.12);opacity:.94}
}
@keyframes spxV12NebulaBreath{
  from{opacity:.50;transform:rotate(-18deg) scale(1.0)}
  to{opacity:.82;transform:rotate(-16deg) scale(1.06)}
}
@keyframes spxV12CloudFloat{
  from{opacity:.38;filter:blur(34px)}
  to{opacity:.62;filter:blur(42px)}
}
@keyframes spxV12Scan{
  0%,30%{transform:translateX(-62%)}
  70%,100%{transform:translateX(62%)}
}
@keyframes spxV12Float{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,-12px,0)}
}

@media(max-width:1120px){
  .spx-hero-shell{
    grid-template-columns:1fr;
    max-width:900px;
  }
  .spx-hero-message,
  .spx-hero-product{
    grid-column:1;
    grid-row:auto;
  }
  .spx-hero-message{max-width:850px}
  .spx-hero-product{min-height:600px}
  .builder-photo-behind{left:-120px;width:min(640px,88vw)}
  .spx-builder-window{left:clamp(0px,6vw,56px);width:min(690px,94%)}
}
@media(max-width:720px){
  .spx-hero-v12{
    min-height:auto;
    padding:112px 18px 128px;
  }
  .spx-hero-message h1{
    font-size:clamp(42px,13vw,66px);
    letter-spacing:-.075em;
  }
  .spx-hero-actions{display:grid}
  .spx-hero-points{grid-template-columns:1fr}
  .spx-hero-product{min-height:520px}
  .builder-photo-behind{left:-112px;top:18px;width:520px;opacity:.48}
  .spx-builder-window{
    left:0;
    top:90px;
    width:100%;
    min-height:390px;
    transform:none!important;
  }
  .spx-builder-workspace{
    grid-template-columns:1fr;
    min-height:auto;
    padding:12px;
  }
  .spx-builder-left,.spx-builder-right{display:none}
  .spx-builder-canvas{min-height:320px}
  .spx-builder-canvas h2{font-size:34px}
  .card-visual{left:0;top:0;transform:none}
  .card-export{right:0;bottom:8px}
  .spx-logo-constellation{width:70vw;right:-18vw;top:12%;opacity:.045}
}
@media(prefers-reduced-motion:reduce){
  .spx-hero-nebula::before,
  .spx-hero-nebula::after,
  .nebula-cloud,
  .spx-builder-window::before,
  .spx-hero-card{
    animation:none!important;
  }
}


/* ==========================================================================
   A8.13 HERO REFINEMENT — live builder preview + darker interactive nebula
   ========================================================================== */

.spx-hero-v12{display:none!important}
.spx-hero-v13{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(820px,100svh,1060px);
  padding:clamp(126px,11vw,166px) var(--side) clamp(136px,12vw,190px);
  color:var(--text);
  background:#020511;
}
html[data-theme="light"] .spx-hero-v13{background:#eef6ff}

.spx-hero-v13 .spx-hero-space,
.spx-hero-v13 .spx-hero-nebula,
.spx-hero-v13 .spx-hero-bottom-fade{
  position:absolute;
  pointer-events:none;
}
.spx-hero-v13 .spx-hero-space{
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  display:block;
  background:
    radial-gradient(900px 560px at 76% 15%,rgba(37,99,235,.16),transparent 62%),
    radial-gradient(760px 480px at 10% 74%,rgba(24,201,245,.10),transparent 68%),
    radial-gradient(720px 460px at 47% 48%,rgba(83,44,146,.10),transparent 66%),
    linear-gradient(180deg,#020511 0%,#050b17 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v13 .spx-hero-space{
  background:
    radial-gradient(900px 560px at 76% 15%,rgba(37,99,235,.10),transparent 62%),
    radial-gradient(760px 480px at 10% 74%,rgba(14,165,233,.09),transparent 68%),
    radial-gradient(720px 460px at 47% 48%,rgba(99,102,241,.08),transparent 66%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}

.spx-hero-v13 .spx-hero-nebula{
  inset:-10% -8%;
  z-index:1;
  overflow:hidden;
}
.spx-hero-v13 .spx-hero-nebula::before{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  top:4%;
  height:92%;
  background:
    linear-gradient(111deg,
      transparent 0 28%,
      rgba(12,40,88,.02) 34%,
      rgba(28,91,148,.12) 41%,
      rgba(84,192,235,.18) 46%,
      rgba(194,233,255,.22) 49%,
      rgba(94,178,230,.15) 53%,
      rgba(46,82,176,.08) 61%,
      transparent 72% 100%),
    radial-gradient(ellipse at 46% 50%,rgba(128,219,255,.12),transparent 37%),
    radial-gradient(ellipse at 38% 58%,rgba(186,132,255,.06),transparent 38%);
  filter:blur(18px) saturate(128%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-hero-x,0px) * .10),calc(var(--spx-hero-y,0px) * .08),0);
  opacity:.72;
  animation:spxV13GalaxyDrift 26s ease-in-out infinite alternate;
}
.spx-hero-v13 .spx-hero-nebula::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 48% 52%,rgba(255,255,255,.07),transparent 32%),
    radial-gradient(ellipse at 50% 54%,rgba(107,232,255,.11),transparent 43%),
    radial-gradient(ellipse at 35% 62%,rgba(255,170,245,.055),transparent 36%);
  filter:blur(32px);
  transform:rotate(-18deg) translate3d(calc(var(--spx-hero-x,0px) * .06),calc(var(--spx-hero-y,0px) * .05),0);
  opacity:.72;
  animation:spxV13NebulaBreath 15s ease-in-out infinite alternate;
}
html[data-theme="light"] .spx-hero-v13 .spx-hero-nebula::before{
  opacity:.50;
  background:
    linear-gradient(111deg,
      transparent 0 30%,
      rgba(37,99,235,.04) 36%,
      rgba(14,165,233,.11) 44%,
      rgba(255,255,255,.48) 49%,
      rgba(125,211,252,.12) 55%,
      rgba(37,99,235,.05) 63%,
      transparent 72% 100%);
}
.spx-hero-v13 .nebula-cloud{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(44px);
  opacity:.38;
  transform:translate3d(calc(var(--spx-hero-x,0px) * .16),calc(var(--spx-hero-y,0px) * .12),0);
  animation:spxV13CloudFloat 13s ease-in-out infinite alternate;
}
.spx-hero-v13 .cloud-a{left:2%;top:64%;width:44vw;height:13vw;background:rgba(107,232,255,.10);transform:rotate(-17deg)}
.spx-hero-v13 .cloud-b{right:4%;top:17%;width:38vw;height:11vw;background:rgba(37,99,235,.12);transform:rotate(-18deg);animation-delay:-3s}
.spx-hero-v13 .cloud-c{left:40%;top:43%;width:36vw;height:10vw;background:rgba(255,188,244,.06);transform:rotate(-18deg);animation-delay:-6s}

.spx-hero-v13 .spx-hero-shell{
  position:relative;
  z-index:4;
  width:min(1360px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(520px,1.06fr) minmax(380px,.94fr);
  gap:clamp(38px,5vw,84px);
  align-items:center;
}

/* Right-side copy: shorter, clearer, less oversized. */
.spx-hero-v13 .spx-hero-message{
  max-width:620px;
}
.spx-hero-v13 .spx-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(107,232,255,.22);
  background:rgba(24,201,245,.10);
  color:#bff4ff;
  font-weight:1000;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
html[data-theme="light"] .spx-hero-v13 .spx-hero-kicker{
  color:#075985;
  background:rgba(14,165,233,.10);
  border-color:rgba(14,165,233,.22);
}
.spx-hero-v13 .spx-hero-message h1{
  margin:18px 0 0;
  max-width:620px;
  font-size:clamp(44px,4.8vw,76px);
  line-height:.96;
  letter-spacing:-.074em;
  text-wrap:balance;
}
.spx-hero-v13 .spx-hero-lead{
  margin:22px 0 0;
  max-width:590px;
  color:var(--text-soft);
  font-size:clamp(16px,1.18vw,19px);
  line-height:1.56;
}
.spx-hero-v13 .spx-hero-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-hero-v13 .spx-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.spx-hero-v13 .spx-hero-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:24px;
}
.spx-hero-v13 .spx-hero-points span{
  min-height:92px;
  padding:15px;
  border-radius:20px;
  border:1px solid rgba(107,232,255,.16);
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  color:var(--secondary);
  font-weight:820;
  font-size:13px;
}
html[data-theme="light"] .spx-hero-v13 .spx-hero-points span{
  background:rgba(255,255,255,.64);
  border-color:rgba(15,23,42,.10);
}
.spx-hero-v13 .spx-hero-points b{
  display:block;
  margin-bottom:6px;
  color:var(--cyan-2);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* Left side: public-safe live builder inspired by the real builder canvas. */
.spx-live-builder{
  position:relative;
  min-height:570px;
  border-radius:36px;
  border:1px solid rgba(107,232,255,.24);
  background:
    linear-gradient(145deg,rgba(8,17,36,.88),rgba(5,10,22,.76)),
    radial-gradient(circle at 24% 0%,rgba(24,201,245,.16),transparent 40%);
  box-shadow:0 46px 150px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(22px) saturate(150%);
  overflow:hidden;
  transform:perspective(1400px) rotateY(6deg) rotateX(3deg);
}
html[data-theme="light"] .spx-live-builder{
  background:
    linear-gradient(145deg,rgba(255,255,255,.88),rgba(238,246,255,.78)),
    radial-gradient(circle at 24% 0%,rgba(14,165,233,.13),transparent 40%);
  box-shadow:0 36px 110px rgba(22,34,64,.18),inset 0 1px 0 rgba(255,255,255,.80);
}
.spx-live-builder::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(115deg,transparent 0 34%,rgba(107,232,255,.14) 47%,transparent 60% 100%);
  animation:spxV13Scan 5.8s ease-in-out infinite;
  pointer-events:none;
}
.spx-live-builder__top{
  position:relative;
  z-index:2;
  height:58px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--secondary);
  font-size:13px;
  font-weight:900;
}
.spx-live-builder__top > span{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.22);
}
.spx-live-builder__top > span:nth-child(1){background:#ff6b86}
.spx-live-builder__top > span:nth-child(2){background:#ffd166}
.spx-live-builder__top > span:nth-child(3){background:#51e6a7}
.spx-live-builder__top strong{margin-left:auto;color:var(--text);letter-spacing:.01em}
.spx-live-builder__top em{
  font-style:normal;
  padding:5px 9px;
  border-radius:999px;
  color:var(--cyan-2);
  background:rgba(24,201,245,.10);
  border:1px solid rgba(107,232,255,.16);
}
.spx-live-builder__body{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:134px minmax(0,1fr) 156px;
  gap:12px;
  padding:16px;
  min-height:456px;
}
.spx-live-builder__rail,
.spx-live-builder__inspector,
.spx-live-builder__viewport{
  border:1px solid rgba(255,255,255,.08);
  border-radius:23px;
  background:rgba(255,255,255,.045);
}
html[data-theme="light"] .spx-live-builder__rail,
html[data-theme="light"] .spx-live-builder__inspector,
html[data-theme="light"] .spx-live-builder__viewport{
  border-color:rgba(15,23,42,.10);
  background:rgba(255,255,255,.70);
}
.spx-live-builder__rail,
.spx-live-builder__inspector{
  display:grid;
  align-content:start;
  gap:10px;
  padding:14px;
  color:var(--secondary);
  font-size:12px;
  font-weight:850;
}
.spx-live-builder__rail b,
.spx-live-builder__inspector b{color:var(--text)}
.spx-live-builder__rail button{
  all:unset;
  cursor:default;
  padding:9px 10px;
  border-radius:13px;
  background:rgba(255,255,255,.045);
}
.spx-live-builder__rail button.is-active{
  background:rgba(24,201,245,.15);
  color:var(--cyan-2);
}
.spx-live-builder__rail i{
  display:block;
  height:76px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(24,201,245,.15),rgba(37,99,235,.08));
}
.spx-live-builder__inspector label{
  display:grid;
  gap:3px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.spx-live-builder__inspector span{color:var(--cyan-2)}
.spx-live-builder__viewport{
  position:relative;
  overflow:hidden;
  min-height:420px;
  cursor:grab;
  background:
    radial-gradient(circle at 75% 15%,rgba(24,201,245,.12),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  touch-action:none;
}
.spx-live-builder__viewport:active{cursor:grabbing}
.spx-live-builder__viewport::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(107,232,255,.055) 1px, transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.055) 1px, transparent 1px);
  background-size:34px 34px;
  transform:translate3d(var(--pan-x,0px),var(--pan-y,0px),0);
  opacity:.55;
}
.spx-live-canvas{
  position:absolute;
  left:50%;
  top:50%;
  width:560px;
  transform:translate3d(calc(-50% + var(--pan-x,0px)),calc(-50% + var(--pan-y,0px)),0);
  transition:box-shadow .25s var(--ease);
}
.spx-live-canvas.is-dragging{transition:none}
.spx-live-page{
  position:relative;
  padding:18px;
  border-radius:28px;
  border:1px solid rgba(107,232,255,.24);
  background:linear-gradient(180deg,rgba(9,20,42,.98),rgba(5,13,30,.96));
  box-shadow:0 30px 90px rgba(0,0,0,.34),0 0 0 8px rgba(255,255,255,.025);
}
html[data-theme="light"] .spx-live-page{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(238,246,255,.96));
  box-shadow:0 30px 90px rgba(22,34,64,.14),0 0 0 8px rgba(255,255,255,.30);
}
.spx-live-page nav{
  height:28px;
  display:flex;
  gap:8px;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.075);
}
html[data-theme="light"] .spx-live-page nav{background:rgba(15,23,42,.055)}
.spx-live-page nav span{
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.20);
}
.spx-live-page nav span:nth-child(1){width:70px}
.spx-live-page nav span:nth-child(2){width:44px}
.spx-live-page nav span:nth-child(3){width:52px;margin-left:auto}
.spx-live-hero-block{
  margin-top:18px;
  padding:26px;
  border-radius:26px;
  border:1px solid rgba(107,232,255,.20);
  background:
    radial-gradient(circle at 78% 12%,rgba(24,201,245,.16),transparent 38%),
    linear-gradient(135deg,rgba(24,201,245,.14),rgba(37,99,235,.07));
}
.spx-live-hero-block small{
  color:var(--cyan-2);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.spx-live-hero-block h2{
  max-width:390px;
  margin:12px 0 0;
  color:var(--text);
  font-size:38px;
  line-height:1;
  letter-spacing:-.06em;
}
.spx-live-hero-block p{
  max-width:360px;
  color:var(--secondary);
  margin:12px 0 0;
}
.spx-live-hero-block div{
  display:flex;
  gap:10px;
  margin-top:18px;
}
.spx-live-hero-block i{
  display:block;
  width:96px;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.20);
}
.spx-live-section-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px;
}
.spx-live-section-grid article{
  min-height:82px;
  padding:13px;
  border-radius:19px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.055);
}
html[data-theme="light"] .spx-live-section-grid article{
  background:rgba(15,23,42,.035);
  border-color:rgba(15,23,42,.07);
}
.spx-live-section-grid b{
  display:block;
  color:var(--text);
  font-size:13px;
}
.spx-live-section-grid span{
  display:block;
  height:9px;
  margin-top:17px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}
.spx-live-builder__hint{
  position:relative;
  z-index:2;
  margin:0 16px 16px;
  padding:10px 13px;
  border-radius:16px;
  border:1px solid rgba(107,232,255,.15);
  background:rgba(24,201,245,.07);
  color:var(--secondary);
  font-size:12px;
  font-weight:820;
}
.spx-hero-v13 .spx-hero-bottom-fade{
  left:0;right:0;bottom:-1px;
  z-index:2;
  height:250px;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.22) 34%,
      rgba(7,17,31,.72) 68%,
      var(--bg-2) 100%);
}
html[data-theme="light"] .spx-hero-v13 .spx-hero-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.34) 40%,
      rgba(246,248,252,.82) 72%,
      #eef3fa 100%);
}
.spx-hero-v13 + .section.intro{
  margin-top:-54px;
  position:relative;
  z-index:5;
}

@keyframes spxV13GalaxyDrift{
  0%{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.05);opacity:.62}
  100%{transform:rotate(-16deg) translate3d(1.4%,-.8%,0) scale(1.12);opacity:.78}
}
@keyframes spxV13NebulaBreath{
  from{opacity:.48;transform:rotate(-18deg) scale(1)}
  to{opacity:.74;transform:rotate(-16deg) scale(1.05)}
}
@keyframes spxV13CloudFloat{
  from{opacity:.30;filter:blur(42px)}
  to{opacity:.48;filter:blur(52px)}
}
@keyframes spxV13Scan{
  0%,34%{transform:translateX(-64%)}
  70%,100%{transform:translateX(64%)}
}

@media(max-width:1120px){
  .spx-hero-v13 .spx-hero-shell{
    grid-template-columns:1fr;
    max-width:920px;
  }
  .spx-live-builder{
    transform:none;
    min-height:560px;
  }
  .spx-hero-v13 .spx-hero-message{
    max-width:850px;
  }
}
@media(max-width:760px){
  .spx-hero-v13{
    min-height:auto;
    padding:112px 18px 132px;
  }
  .spx-hero-v13 .spx-hero-message h1{
    font-size:clamp(40px,12vw,62px);
    letter-spacing:-.07em;
  }
  .spx-hero-v13 .spx-hero-actions{display:grid}
  .spx-hero-v13 .spx-hero-points{grid-template-columns:1fr}
  .spx-live-builder{
    min-height:auto;
    border-radius:28px;
  }
  .spx-live-builder__body{
    grid-template-columns:1fr;
    min-height:430px;
    padding:12px;
  }
  .spx-live-builder__rail,
  .spx-live-builder__inspector{
    display:none;
  }
  .spx-live-builder__viewport{
    min-height:405px;
  }
  .spx-live-canvas{
    width:520px;
  }
}
@media(max-width:900px){
  html body.spx-public.spx-mobile-nav-open .site-header{
    height:74px!important;
    overflow:visible!important;
  }
  html body.spx-public.spx-mobile-nav-open .site-nav{
    position:fixed!important;
    left:18px!important;
    right:18px!important;
    top:84px!important;
    z-index:850!important;
    max-height:calc(100svh - 104px)!important;
    overflow-y:auto!important;
    padding:14px!important;
    border-radius:24px!important;
    border:1px solid rgba(218,236,255,.12)!important;
    background:linear-gradient(180deg,rgba(8,15,32,.97),rgba(5,10,22,.94))!important;
    box-shadow:0 28px 80px rgba(0,0,0,.42)!important;
  }
  html body.spx-public.spx-mobile-nav-open .site-nav > a,
  html body.spx-public.spx-mobile-nav-open .site-nav .nav-group > a{
    background:rgba(255,255,255,.055)!important;
    border:1px solid rgba(218,236,255,.10)!important;
    color:#eef8ff!important;
  }
  html body.spx-public.spx-mobile-nav-open .nav-menu{
    max-height:0!important;
    overflow:hidden!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
  }
  html body.spx-public.spx-mobile-nav-open .nav-group:focus-within .nav-menu,
  html body.spx-public.spx-mobile-nav-open .nav-group:hover .nav-menu{
    max-height:min(62svh,560px)!important;
    overflow-y:auto!important;
    padding:10px!important;
    margin-top:8px!important;
    border:1px solid rgba(218,236,255,.10)!important;
    border-radius:20px!important;
    background:linear-gradient(180deg,rgba(11,22,42,.94),rgba(8,15,32,.90))!important;
  }
  html body.spx-public.spx-mobile-nav-open .nav-menu a{
    color:#eef8ff!important;
    background:rgba(255,255,255,.045)!important;
    border:1px solid rgba(218,236,255,.08)!important;
  }
  html[data-theme="light"] body.spx-public.spx-mobile-nav-open .site-nav{
    background:rgba(255,255,255,.97)!important;
    border-color:rgba(15,23,42,.10)!important;
    box-shadow:0 28px 70px rgba(15,23,42,.18)!important;
  }
  html[data-theme="light"] body.spx-public.spx-mobile-nav-open .site-nav > a,
  html[data-theme="light"] body.spx-public.spx-mobile-nav-open .site-nav .nav-group > a{
    color:#0f172a!important;
    background:rgba(15,23,42,.04)!important;
    border-color:rgba(15,23,42,.10)!important;
  }
  html[data-theme="light"] body.spx-public.spx-mobile-nav-open .nav-group:focus-within .nav-menu,
  html[data-theme="light"] body.spx-public.spx-mobile-nav-open .nav-group:hover .nav-menu{
    background:rgba(248,250,254,.96)!important;
    border-color:rgba(15,23,42,.10)!important;
  }
  html[data-theme="light"] body.spx-public.spx-mobile-nav-open .nav-menu a{
    color:#0f172a!important;
    background:rgba(255,255,255,.78)!important;
    border-color:rgba(15,23,42,.08)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-hero-v13 .spx-hero-nebula::before,
  .spx-hero-v13 .spx-hero-nebula::after,
  .spx-hero-v13 .nebula-cloud,
  .spx-live-builder::before{
    animation:none!important;
  }
}



/* ==========================================================================
   A8.15 — Spixor Orbit Interface hero + stricter professional navigator
   Inspiration direction: space-tech cinematic clarity + modern visual-builder SaaS.
   ========================================================================== */

.spx-nav-v15{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,28px);
  align-items:center;
  padding:18px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), padding .28s var(--ease);
}
.spx-nav-v15.is-scrolled,
.spx-nav-v15.is-open,
.spx-nav-v15:focus-within{
  padding-top:12px;
  padding-bottom:12px;
  background:rgba(4,9,18,.78)!important;
  border-bottom-color:rgba(218,236,255,.12);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}
html[data-theme="light"] .spx-nav-v15.is-scrolled,
html[data-theme="light"] .spx-nav-v15.is-open,
html[data-theme="light"] .spx-nav-v15:focus-within{
  background:rgba(246,248,252,.86)!important;
  border-bottom-color:rgba(15,23,42,.10);
  box-shadow:0 18px 54px rgba(22,34,64,.10);
}
.spx-nav-v15 .brand{
  padding:6px 10px 6px 6px;
  border-radius:14px;
}
.spx-nav-v15 .brand img{
  width:38px;
  height:38px;
  border-radius:10px;
}
.spx-nav-v15 .brand span{
  font-weight:950;
  letter-spacing:-.04em;
}
.spx-nav-v15 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px;
  border:1px solid rgba(218,236,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="light"] .spx-nav-v15 .site-nav{
  background:rgba(255,255,255,.54);
  border-color:rgba(15,23,42,.08);
}
.spx-nav-v15 .site-nav>a,
.spx-nav-v15 .nav-group>a{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  color:var(--text-soft);
  padding:9px 14px;
  border-radius:10px;
  border:1px solid transparent;
  font-weight:900;
  font-size:14px;
  letter-spacing:-.015em;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v15 .site-nav>a:hover,
.spx-nav-v15 .nav-group:hover>a,
.spx-nav-v15 .nav-group>a:focus-visible{
  color:var(--text);
  background:rgba(24,201,245,.105);
  border-color:rgba(107,232,255,.18);
  transform:translateY(-1px);
}
.spx-nav-v15 .nav-home-link::before{
  content:"";
  width:7px;height:7px;
  border-radius:2px;
  margin-right:9px;
  background:var(--cyan-2);
  box-shadow:0 0 16px rgba(24,201,245,.72);
}
.spx-nav-v15 .nav-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.spx-nav-v15 .nav-actions .btn,
.spx-nav-v15 .theme-toggle{
  min-height:42px;
  border-radius:12px;
  padding:9px 14px;
  font-weight:950;
  letter-spacing:-.015em;
}
.spx-nav-v15 .nav-actions .btn.ghost,
.spx-nav-v15 .theme-toggle{
  border:1px solid rgba(218,236,255,.13);
  background:rgba(255,255,255,.045);
}
html[data-theme="light"] .spx-nav-v15 .nav-actions .btn.ghost,
html[data-theme="light"] .spx-nav-v15 .theme-toggle{
  background:rgba(255,255,255,.66);
  border-color:rgba(15,23,42,.10);
}
.spx-nav-v15 .nav-actions .btn.primary{
  border-radius:12px;
  background:linear-gradient(135deg,#078fc2,#2563eb 65%,#18c9f5);
  box-shadow:0 14px 44px rgba(14,165,233,.24), inset 0 1px 0 rgba(255,255,255,.22);
}
.spx-nav-v15 .nav-group-mega .mega-menu{
  width:min(920px,calc(100vw - 36px));
  border-radius:18px;
  padding:18px;
  border:1px solid rgba(107,232,255,.18);
  background:
    linear-gradient(180deg,rgba(5,11,23,.96),rgba(4,9,18,.91)),
    radial-gradient(circle at 18% 0%,rgba(24,201,245,.11),transparent 30%);
  box-shadow:0 32px 100px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="light"] .spx-nav-v15 .nav-group-mega .mega-menu{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,248,252,.92));
  box-shadow:0 30px 80px rgba(22,34,64,.13);
}
.spx-nav-v15 .mega-intro,
.spx-nav-v15 .mega-card{
  border-radius:12px;
}
.spx-nav-v15 .mega-card{
  padding:16px;
}
.spx-nav-v15 .mega-card:hover{
  transform:translateY(-3px);
}

/* Hide older hero experiments when a v15 hero exists. */
.spx-hero-v12,
.spx-hero-v13,
.hero.spx-aurora-hero{display:none!important}

.spx-hero-v15{
  position:relative;
  min-height:clamp(840px,100svh,1100px);
  overflow:hidden;
  isolation:isolate;
  padding:clamp(132px,11vw,170px) var(--side) clamp(140px,13vw,198px);
  background:#02050d;
  color:var(--text);
}
html[data-theme="light"] .spx-hero-v15{
  background:#eef6ff;
}
.spx-hero-v15 .spx-hero-space{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:
    radial-gradient(900px 580px at 76% 14%,rgba(37,99,235,.16),transparent 62%),
    radial-gradient(760px 500px at 12% 78%,rgba(24,201,245,.09),transparent 68%),
    linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v15 .spx-hero-space{
  background:
    radial-gradient(900px 580px at 76% 14%,rgba(37,99,235,.10),transparent 62%),
    radial-gradient(760px 500px at 12% 78%,rgba(14,165,233,.08),transparent 68%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}
.spx-hero-v15 .spx-nebula-plane{
  position:absolute;
  inset:-10% -8%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.spx-hero-v15 .spx-nebula-plane::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:7%;
  height:86%;
  background:
    linear-gradient(112deg,
      transparent 0 30%,
      rgba(37,99,235,.045) 37%,
      rgba(24,201,245,.13) 44%,
      rgba(210,244,255,.18) 49%,
      rgba(82,181,230,.11) 54%,
      rgba(48,86,180,.055) 62%,
      transparent 72% 100%),
    radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.10),transparent 39%),
    radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 40%);
  filter:blur(20px) saturate(125%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v15-x,0px) * .10),calc(var(--spx-v15-y,0px) * .08),0);
  opacity:.66;
  animation:spxV15Galaxy 28s ease-in-out infinite alternate;
}
.spx-hero-v15 .spx-nebula-plane::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 49% 53%,rgba(255,255,255,.055),transparent 33%),
    radial-gradient(ellipse at 52% 55%,rgba(107,232,255,.095),transparent 44%);
  filter:blur(36px);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v15-x,0px) * .07),calc(var(--spx-v15-y,0px) * .05),0);
  opacity:.68;
  animation:spxV15Nebula 16s ease-in-out infinite alternate;
}
.spx-hero-v15 .nebula-cloud{
  position:absolute;
  display:block;
  border-radius:999px;
  opacity:.34;
  filter:blur(48px);
  transform:translate3d(calc(var(--spx-v15-x,0px) * .13),calc(var(--spx-v15-y,0px) * .10),0);
  animation:spxV15Cloud 14s ease-in-out infinite alternate;
}
.spx-hero-v15 .cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.spx-hero-v15 .cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.spx-hero-v15 .cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.spx-hero-v15 .orbit-line{
  position:absolute;
  border:1px solid rgba(107,232,255,.13);
  transform:rotate(-14deg) translate3d(calc(var(--spx-v15-x,0px) * -.06),calc(var(--spx-v15-y,0px) * -.05),0);
  opacity:.44;
}
.spx-hero-v15 .line-a{
  right:6%;
  top:18%;
  width:720px;
  height:320px;
  border-radius:50%;
}
.spx-hero-v15 .line-b{
  right:22%;
  bottom:17%;
  width:560px;
  height:240px;
  border-radius:50%;
  opacity:.28;
}

.spx-hero-v15 .spx-hero-shell{
  position:relative;
  z-index:5;
  width:min(1380px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(390px,.78fr) minmax(560px,1.22fr);
  gap:clamp(44px,5vw,88px);
  align-items:center;
}
.spx-hero-v15 .spx-hero-copy{
  max-width:560px;
}
.spx-hero-v15 .spx-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:8px;
  border:1px solid rgba(107,232,255,.20);
  background:rgba(24,201,245,.08);
  color:#bff4ff;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html[data-theme="light"] .spx-hero-v15 .spx-hero-kicker{
  color:#075985;
  background:rgba(14,165,233,.09);
  border-color:rgba(14,165,233,.20);
}
.spx-hero-v15 .spx-hero-copy h1{
  margin:18px 0 0;
  max-width:610px;
  font-size:clamp(46px,5.2vw,84px);
  line-height:.95;
  letter-spacing:-.082em;
  text-wrap:balance;
}
.spx-hero-v15 .spx-hero-lead{
  margin:22px 0 0;
  max-width:540px;
  color:var(--text-soft);
  font-size:clamp(16px,1.25vw,20px);
  line-height:1.56;
}
.spx-hero-v15 .spx-hero-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-hero-v15 .spx-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.spx-hero-v15 .spx-hero-actions .btn{
  border-radius:12px;
}
.spx-hero-v15 .spx-hero-proof{
  margin-top:28px;
  display:grid;
  gap:10px;
}
.spx-hero-v15 .spx-hero-proof span{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(107,232,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--secondary);
  font-weight:850;
  border-radius:10px;
}
html[data-theme="light"] .spx-hero-v15 .spx-hero-proof span{
  background:rgba(255,255,255,.62);
  border-color:rgba(15,23,42,.09);
}
.spx-hero-v15 .spx-hero-proof b{
  width:34px;
  height:26px;
  display:grid;
  place-items:center;
  color:var(--cyan-2);
  border:1px solid rgba(107,232,255,.20);
  border-radius:7px;
  font-size:11px;
}

.spx-orbit-interface{
  position:relative;
  min-height:620px;
  perspective:1200px;
  transform:translate3d(calc(var(--spx-v15-x,0px) * .35),calc(var(--spx-v15-y,0px) * .25),0);
}
.spx-orbit-backplate{
  position:absolute;
  inset:6% 4% 7% 8%;
  border:1px solid rgba(107,232,255,.12);
  background:
    linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),
    repeating-linear-gradient(90deg,rgba(107,232,255,.035) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(0deg,rgba(107,232,255,.025) 0 1px,transparent 1px 54px);
  clip-path:polygon(6% 0,100% 0,100% 83%,88% 100%,0 100%,0 9%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 42px 120px rgba(0,0,0,.32);
}
html[data-theme="light"] .spx-orbit-backplate{
  background:
    linear-gradient(135deg,rgba(255,255,255,.75),rgba(238,246,255,.38)),
    repeating-linear-gradient(90deg,rgba(14,165,233,.04) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(0deg,rgba(14,165,233,.03) 0 1px,transparent 1px 54px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 42px 100px rgba(22,34,64,.13);
}
.spx-trajectory{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.spx-trajectory svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.spx-trajectory path{
  fill:none;
  stroke:rgba(107,232,255,.23);
  stroke-width:1.2;
  stroke-dasharray:9 12;
  animation:spxV15Dash 20s linear infinite;
}
.spx-trajectory path:nth-child(2){
  stroke:rgba(255,255,255,.10);
  stroke-dasharray:5 16;
  animation-duration:26s;
}
.spx-command-panel{
  position:absolute;
  left:13%;
  top:14%;
  z-index:4;
  width:min(600px,74%);
  min-height:420px;
  border:1px solid rgba(107,232,255,.22);
  background:
    radial-gradient(circle at 85% 10%,rgba(24,201,245,.12),transparent 34%),
    linear-gradient(150deg,rgba(8,17,36,.88),rgba(4,9,18,.76));
  clip-path:polygon(5% 0,100% 0,100% 88%,91% 100%,0 100%,0 8%);
  box-shadow:0 46px 130px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px) saturate(145%);
  transform:rotateY(-5deg) rotateX(3deg);
}
html[data-theme="light"] .spx-command-panel{
  background:
    radial-gradient(circle at 85% 10%,rgba(14,165,233,.12),transparent 34%),
    linear-gradient(150deg,rgba(255,255,255,.90),rgba(238,246,255,.72));
  box-shadow:0 40px 110px rgba(22,34,64,.16),inset 0 1px 0 rgba(255,255,255,.78);
}
.spx-command-panel .panel-top{
  height:54px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
html[data-theme="light"] .spx-command-panel .panel-top{border-bottom-color:rgba(15,23,42,.08)}
.spx-command-panel .panel-top span{
  width:9px;height:9px;border-radius:3px;
  background:rgba(255,255,255,.20);
}
.spx-command-panel .panel-top span:nth-child(1){background:#ff6b86}
.spx-command-panel .panel-top span:nth-child(2){background:#ffd166}
.spx-command-panel .panel-top span:nth-child(3){background:#51e6a7}
.spx-command-panel .panel-top strong{
  margin-left:auto;
  color:var(--text);
  font-size:13px;
}
.spx-command-panel .panel-body{
  display:grid;
  grid-template-columns:1fr .95fr;
  gap:18px;
  padding:22px;
}
.panel-visual{
  position:relative;
  min-height:260px;
  border:1px solid rgba(107,232,255,.14);
  background:
    radial-gradient(circle at 70% 20%,rgba(24,201,245,.10),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  overflow:hidden;
  clip-path:polygon(9% 0,100% 0,100% 88%,88% 100%,0 100%,0 10%);
}
.panel-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(107,232,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.055) 1px,transparent 1px);
  background-size:34px 34px;
}
.panel-visual i{
  position:absolute;
  display:block;
  border:1px solid rgba(107,232,255,.18);
  background:rgba(255,255,255,.055);
}
.panel-visual i:nth-child(1){left:12%;top:13%;width:56%;height:18%;clip-path:polygon(5% 0,100% 0,95% 100%,0 100%)}
.panel-visual i:nth-child(2){left:12%;top:40%;width:34%;height:42%}
.panel-visual i:nth-child(3){right:12%;top:40%;width:36%;height:18%}
.panel-visual i:nth-child(4){right:12%;bottom:17%;width:36%;height:18%}
.spx-command-panel[data-state="theme"] .panel-visual i:nth-child(1){background:rgba(24,201,245,.16)}
.spx-command-panel[data-state="theme"] .panel-visual i:nth-child(2){background:rgba(37,99,235,.13)}
.spx-command-panel[data-state="theme"] .panel-visual i:nth-child(3){background:rgba(255,186,245,.08)}
.spx-command-panel[data-state="export"] .panel-visual i:nth-child(1){width:42%;height:42%;left:30%;top:18%;clip-path:polygon(0 0,100% 0,100% 78%,78% 100%,0 100%)}
.spx-command-panel[data-state="export"] .panel-visual i:nth-child(2){left:18%;top:68%;width:64%;height:9%}
.spx-command-panel[data-state="export"] .panel-visual i:nth-child(3){left:24%;top:82%;width:52%;height:7%}
.spx-command-panel[data-state="export"] .panel-visual i:nth-child(4){display:none}
.panel-copy small{
  color:var(--cyan-2);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}
.panel-copy h2{
  margin:12px 0 0;
  color:var(--text);
  font-size:clamp(28px,2.8vw,42px);
  line-height:1;
  letter-spacing:-.065em;
}
.panel-copy p{
  color:var(--secondary);
  margin:14px 0 0;
  font-size:14px;
  line-height:1.55;
}
.panel-status{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin:0 22px 22px;
  padding:12px 14px;
  border:1px solid rgba(107,232,255,.13);
  color:var(--secondary);
  font-size:12px;
  font-weight:850;
  background:rgba(255,255,255,.035);
}
.panel-status b{color:var(--cyan-2)}

.spx-orbit-node{
  position:absolute;
  z-index:5;
  width:176px;
  padding:14px 15px;
  border:1px solid rgba(107,232,255,.18);
  background:rgba(5,11,23,.78);
  color:var(--secondary);
  cursor:pointer;
  clip-path:polygon(10% 0,100% 0,100% 78%,88% 100%,0 100%,0 18%);
  box-shadow:0 22px 60px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
  transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
html[data-theme="light"] .spx-orbit-node{
  background:rgba(255,255,255,.78);
  box-shadow:0 20px 48px rgba(22,34,64,.12);
}
.spx-orbit-node:hover,
.spx-orbit-node.is-active{
  transform:translateY(-4px);
  color:var(--text);
  border-color:rgba(107,232,255,.42);
  background:rgba(12,28,52,.86);
}
html[data-theme="light"] .spx-orbit-node:hover,
html[data-theme="light"] .spx-orbit-node.is-active{
  background:rgba(238,246,255,.92);
}
.spx-orbit-node span{
  display:block;
  color:var(--cyan-2);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
  font-weight:950;
}
.spx-orbit-node b{
  display:block;
  margin-top:6px;
  color:inherit;
  font-size:15px;
}
.node-build{left:2%;top:7%}
.node-manage{right:1%;top:20%}
.node-export{right:12%;bottom:5%}

.spx-hero-v15 .spx-hero-bottom-fade{
  position:absolute;
  left:0;right:0;bottom:-1px;
  z-index:3;
  height:250px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.28) 38%,rgba(7,17,31,.82) 72%,var(--bg-2) 100%);
}
html[data-theme="light"] .spx-hero-v15 .spx-hero-bottom-fade{
  background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.86) 72%,#eef3fa 100%);
}
.spx-hero-v15 + .section.intro{
  margin-top:-54px;
  position:relative;
  z-index:5;
}

@keyframes spxV15Galaxy{
  from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.58}
  to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.72}
}
@keyframes spxV15Nebula{
  from{opacity:.48;transform:rotate(-18deg) scale(1)}
  to{opacity:.68;transform:rotate(-16deg) scale(1.05)}
}
@keyframes spxV15Cloud{
  from{opacity:.25;filter:blur(44px)}
  to{opacity:.42;filter:blur(54px)}
}
@keyframes spxV15Dash{to{stroke-dashoffset:-400}}

@media(max-width:1120px){
  .spx-nav-v15{grid-template-columns:auto auto 1fr}
  .spx-nav-v15 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v15 .site-nav{display:none}
  .spx-nav-v15.is-open .site-nav{
    display:grid;
    position:absolute;
    left:16px;
    right:16px;
    top:calc(100% + 10px);
    justify-content:stretch;
    border-radius:16px;
    background:rgba(4,10,22,.96);
  }
  html[data-theme="light"] .spx-nav-v15.is-open .site-nav{background:rgba(255,255,255,.96)}
  .spx-nav-v15.is-open .nav-actions{display:flex}
  .spx-nav-v15 .nav-group-mega .mega-menu,
  .spx-nav-v15 .resources-mega .mega-menu{
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    margin-top:8px;
  }
  .spx-hero-v15 .spx-hero-shell{
    grid-template-columns:1fr;
    max-width:920px;
  }
  .spx-hero-v15 .spx-hero-copy{max-width:860px}
  .spx-orbit-interface{min-height:590px}
}
@media(max-width:760px){
  .spx-hero-v15{
    min-height:auto;
    padding:112px 18px 134px;
  }
  .spx-hero-v15 .spx-hero-copy h1{
    font-size:clamp(42px,13vw,66px);
  }
  .spx-hero-v15 .spx-hero-actions{display:grid}
  .spx-hero-v15 .spx-hero-proof{grid-template-columns:1fr}
  .spx-orbit-interface{min-height:640px}
  .spx-command-panel{
    left:0;
    top:92px;
    width:100%;
    min-height:420px;
    transform:none;
  }
  .spx-command-panel .panel-body{
    grid-template-columns:1fr;
  }
  .panel-visual{min-height:190px}
  .spx-orbit-node{width:150px}
  .node-build{left:0;top:0}
  .node-manage{right:0;top:30px}
  .node-export{right:6%;bottom:0}
  .spx-nav-v15 .nav-actions .btn.primary,
  .spx-nav-v15 .nav-actions .btn.ghost{display:none}
}
@media(prefers-reduced-motion:reduce){
  .spx-hero-v15 .spx-nebula-plane::before,
  .spx-hero-v15 .spx-nebula-plane::after,
  .spx-hero-v15 .nebula-cloud,
  .spx-trajectory path{
    animation:none!important;
  }
}



/* ==========================================================================
   A8.16 — Cinematic Flow Hero + Strict Premium Navigator
   ========================================================================== */

.spx-nav-v15,
.spx-hero-v15,
.spx-hero-v13,
.spx-hero-v12,
.hero.spx-aurora-hero{display:none!important}

.spx-nav-v16{
  display:grid!important;
  position:fixed;
  top:0;left:0;right:0;
  z-index:110;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,30px);
  align-items:center;
  padding:18px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.spx-nav-v16.is-scrolled,
.spx-nav-v16.is-open,
.spx-nav-v16:focus-within{
  padding-top:12px;
  padding-bottom:12px;
  background:rgba(3,8,17,.82)!important;
  border-bottom-color:rgba(218,236,255,.12);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  box-shadow:0 18px 64px rgba(0,0,0,.30);
}
html[data-theme="light"] .spx-nav-v16.is-scrolled,
html[data-theme="light"] .spx-nav-v16.is-open,
html[data-theme="light"] .spx-nav-v16:focus-within{
  background:rgba(246,248,252,.88)!important;
  border-bottom-color:rgba(15,23,42,.10);
  box-shadow:0 18px 54px rgba(22,34,64,.10);
}
.spx-nav-v16 .brand{
  padding:5px 9px 5px 5px;
  border-radius:10px;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v16 .brand:hover{
  background:rgba(255,255,255,.055);
  transform:translateY(-1px);
}
.spx-nav-v16 .brand img{
  width:38px;
  height:38px;
  border-radius:8px;
}
.spx-nav-v16 .brand span{
  font-weight:950;
  letter-spacing:-.045em;
}
.spx-nav-v16 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:3px;
  padding:5px;
  border:1px solid rgba(218,236,255,.11);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="light"] .spx-nav-v16 .site-nav{
  background:rgba(255,255,255,.58);
  border-color:rgba(15,23,42,.08);
}
.spx-nav-v16 .site-nav>a,
.spx-nav-v16 .nav-group>a{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:9px 14px;
  color:var(--text-soft);
  border:1px solid transparent;
  border-radius:8px;
  font-weight:900;
  font-size:14px;
  letter-spacing:-.015em;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.spx-nav-v16 .site-nav>a:hover,
.spx-nav-v16 .nav-group:hover>a,
.spx-nav-v16 .nav-group>a:focus-visible{
  color:var(--text);
  background:rgba(24,201,245,.105);
  border-color:rgba(107,232,255,.18);
  transform:translateY(-1px);
}
.spx-nav-v16 .nav-home-link::before{
  content:"";
  width:7px;height:7px;
  margin-right:9px;
  border-radius:2px;
  background:#18c9f5;
  box-shadow:0 0 16px rgba(24,201,245,.72);
}
.spx-nav-v16 .nav-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.spx-nav-v16 .nav-actions .btn,
.spx-nav-v16 .theme-toggle{
  min-height:42px;
  border-radius:10px;
  padding:9px 14px;
  font-weight:950;
  letter-spacing:-.015em;
}
.spx-nav-v16 .nav-actions .btn.ghost,
.spx-nav-v16 .theme-toggle{
  border:1px solid rgba(218,236,255,.14);
  background:rgba(255,255,255,.045);
}
html[data-theme="light"] .spx-nav-v16 .nav-actions .btn.ghost,
html[data-theme="light"] .spx-nav-v16 .theme-toggle{
  background:rgba(255,255,255,.66);
  border-color:rgba(15,23,42,.10);
}
.spx-nav-v16 .nav-actions .btn.primary{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:linear-gradient(135deg,#078fc2,#2563eb 62%,#18c9f5);
  box-shadow:0 14px 42px rgba(14,165,233,.24),inset 0 1px 0 rgba(255,255,255,.22);
}
.spx-nav-v16 .nav-actions .btn.primary::after{
  content:"";
  position:absolute;
  inset:-70% -40%;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.32),transparent 65%);
  transform:translateX(-70%) rotate(12deg);
  transition:transform .7s var(--ease);
}
.spx-nav-v16 .nav-actions .btn.primary:hover::after{transform:translateX(70%) rotate(12deg)}
.spx-nav-v16 .nav-group-mega .mega-menu{
  width:min(920px,calc(100vw - 36px));
  padding:18px;
  border-radius:14px;
  border:1px solid rgba(107,232,255,.18);
  background:
    linear-gradient(180deg,rgba(5,11,23,.97),rgba(4,9,18,.93)),
    radial-gradient(circle at 18% 0%,rgba(24,201,245,.10),transparent 34%);
  box-shadow:0 34px 110px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(24px) saturate(150%);
}
html[data-theme="light"] .spx-nav-v16 .nav-group-mega .mega-menu{
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(246,248,252,.94));
  box-shadow:0 30px 80px rgba(22,34,64,.14);
}
.spx-nav-v16 .mega-intro,
.spx-nav-v16 .mega-card{
  border-radius:10px!important;
}
.spx-nav-v16 .mega-intro{
  border:1px solid rgba(107,232,255,.14);
  background:rgba(255,255,255,.04);
}
.spx-nav-v16 .mega-card{
  padding:16px;
  background:rgba(255,255,255,.035);
  border-color:rgba(218,236,255,.09);
}
.spx-nav-v16 .mega-card:hover{
  transform:translateY(-3px);
  border-color:rgba(107,232,255,.24);
  background:rgba(24,201,245,.075);
}

/* New cinematic hero */
.spx-hero-v16{
  display:block!important;
  position:relative;
  min-height:clamp(850px,100svh,1100px);
  overflow:hidden;
  isolation:isolate;
  padding:clamp(134px,11vw,174px) var(--side) clamp(142px,13vw,200px);
  color:var(--text);
  background:#02050d;
}
html[data-theme="light"] .spx-hero-v16{background:#eef6ff}
.spx-hero-v16 .spx-hero-space{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:
    radial-gradient(900px 580px at 78% 15%,rgba(37,99,235,.15),transparent 62%),
    radial-gradient(760px 520px at 10% 78%,rgba(24,201,245,.09),transparent 68%),
    linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v16 .spx-hero-space{
  background:
    radial-gradient(900px 580px at 78% 15%,rgba(37,99,235,.10),transparent 62%),
    radial-gradient(760px 520px at 10% 78%,rgba(14,165,233,.08),transparent 68%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}
.spx-v16-nebula{
  position:absolute;
  inset:-10% -8%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.spx-v16-nebula::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:7%;
  height:88%;
  background:
    linear-gradient(112deg,
      transparent 0 31%,
      rgba(37,99,235,.04) 38%,
      rgba(24,201,245,.12) 45%,
      rgba(210,244,255,.17) 49%,
      rgba(82,181,230,.10) 54%,
      rgba(48,86,180,.05) 62%,
      transparent 73% 100%),
    radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),
    radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);
  filter:blur(22px) saturate(125%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v16-x,0px) * .10),calc(var(--spx-v16-y,0px) * .08),0);
  opacity:.64;
  animation:spxV16Galaxy 30s ease-in-out infinite alternate;
}
.spx-v16-nebula::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 49% 53%,rgba(255,255,255,.050),transparent 33%),
    radial-gradient(ellipse at 52% 55%,rgba(107,232,255,.090),transparent 44%);
  filter:blur(38px);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v16-x,0px) * .07),calc(var(--spx-v16-y,0px) * .05),0);
  opacity:.66;
  animation:spxV16Nebula 18s ease-in-out infinite alternate;
}
.spx-v16-nebula .nebula-cloud{
  position:absolute;
  display:block;
  border-radius:999px;
  opacity:.32;
  filter:blur(50px);
  transform:translate3d(calc(var(--spx-v16-x,0px) * .13),calc(var(--spx-v16-y,0px) * .10),0);
  animation:spxV16Cloud 15s ease-in-out infinite alternate;
}
.spx-v16-nebula .cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.spx-v16-nebula .cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.spx-v16-nebula .cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.spx-v16-nebula .light-beam{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(107,232,255,.24),transparent);
  transform:rotate(-18deg);
  opacity:.45;
}
.spx-v16-nebula .beam-a{left:4%;right:12%;top:42%}
.spx-v16-nebula .beam-b{left:18%;right:2%;top:56%;opacity:.25}

.spx-v16-shell{
  position:relative;
  z-index:5;
  width:min(1400px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(450px,.86fr) minmax(560px,1.14fr);
  gap:clamp(48px,6vw,96px);
  align-items:center;
}
.spx-v16-copy{
  max-width:640px;
}
.spx-v16-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:8px;
  border:1px solid rgba(107,232,255,.20);
  background:rgba(24,201,245,.08);
  color:#bff4ff;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html[data-theme="light"] .spx-v16-kicker{
  color:#075985;
  background:rgba(14,165,233,.09);
  border-color:rgba(14,165,233,.20);
}
.spx-v16-copy h1{
  margin:18px 0 0;
  font-size:clamp(56px,6.7vw,112px);
  line-height:.88;
  letter-spacing:-.095em;
  text-wrap:balance;
}
.spx-v16-copy h1::after{
  content:"";
  display:block;
  width:min(280px,44%);
  height:2px;
  margin-top:24px;
  background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);
  box-shadow:0 0 22px rgba(24,201,245,.42);
}
.spx-v16-lead{
  margin:24px 0 0;
  max-width:610px;
  color:var(--text-soft);
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.55;
}
.spx-v16-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-v16-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.spx-v16-actions .btn{
  border-radius:12px;
}
.spx-v16-metrics{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.spx-v16-metrics span{
  min-height:96px;
  padding:15px;
  border:1px solid rgba(107,232,255,.14);
  background:rgba(255,255,255,.035);
  color:var(--secondary);
  font-size:13px;
  font-weight:850;
  border-radius:10px;
}
html[data-theme="light"] .spx-v16-metrics span{
  background:rgba(255,255,255,.62);
  border-color:rgba(15,23,42,.09);
}
.spx-v16-metrics b{
  display:block;
  margin-bottom:7px;
  color:var(--cyan-2);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
}

.spx-v16-showcase{
  position:relative;
  min-height:610px;
  transform:translate3d(calc(var(--spx-v16-x,0px) * .32),calc(var(--spx-v16-y,0px) * .22),0);
}
.showcase-frame{
  position:absolute;
  inset:5% 0 6% 2%;
  border:1px solid rgba(107,232,255,.18);
  background:
    linear-gradient(135deg,rgba(255,255,255,.050),rgba(255,255,255,.016)),
    repeating-linear-gradient(90deg,rgba(107,232,255,.035) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(0deg,rgba(107,232,255,.026) 0 1px,transparent 1px 56px);
  clip-path:polygon(6% 0,100% 0,100% 86%,88% 100%,0 100%,0 9%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 46px 130px rgba(0,0,0,.34);
  backdrop-filter:blur(18px) saturate(145%);
  padding:clamp(18px,2.2vw,30px);
}
html[data-theme="light"] .showcase-frame{
  background:
    linear-gradient(135deg,rgba(255,255,255,.82),rgba(238,246,255,.44)),
    repeating-linear-gradient(90deg,rgba(14,165,233,.04) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(0deg,rgba(14,165,233,.03) 0 1px,transparent 1px 56px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 40px 110px rgba(22,34,64,.14);
}
.showcase-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(218,236,255,.10);
}
.showcase-header span{
  color:var(--secondary);
  font-weight:900;
  font-size:13px;
}
.showcase-header b{
  color:var(--cyan-2);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.flow-stage{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:26px;
}
.flow-step{
  all:unset;
  position:relative;
  z-index:2;
  min-height:150px;
  padding:18px;
  cursor:pointer;
  border:1px solid rgba(107,232,255,.14);
  background:rgba(5,11,23,.72);
  clip-path:polygon(10% 0,100% 0,100% 82%,88% 100%,0 100%,0 14%);
  transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}
html[data-theme="light"] .flow-step{
  background:rgba(255,255,255,.72);
  border-color:rgba(15,23,42,.10);
}
.flow-step:hover,
.flow-step.is-active{
  transform:translateY(-5px);
  border-color:rgba(107,232,255,.42);
  background:rgba(8,24,45,.86);
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}
html[data-theme="light"] .flow-step:hover,
html[data-theme="light"] .flow-step.is-active{
  background:rgba(238,246,255,.92);
  box-shadow:0 22px 56px rgba(22,34,64,.13);
}
.flow-step i{
  display:grid;
  place-items:center;
  width:38px;height:30px;
  border:1px solid rgba(107,232,255,.22);
  color:var(--cyan-2);
  font-style:normal;
  font-weight:950;
  font-size:11px;
  border-radius:6px;
}
.flow-step b{
  display:block;
  margin-top:18px;
  color:var(--text);
  font-size:18px;
  line-height:1.1;
}
.flow-step small{
  display:block;
  margin-top:8px;
  color:var(--secondary);
  font-size:12px;
  line-height:1.35;
}
.flow-connector{
  position:absolute;
  left:8%;
  right:8%;
  top:54%;
  height:2px;
  z-index:1;
  background:linear-gradient(90deg,transparent,rgba(107,232,255,.32),transparent);
}
.flow-connector span{
  position:absolute;
  top:50%;
  width:9px;height:9px;
  margin-top:-4px;
  border-radius:50%;
  background:#18c9f5;
  box-shadow:0 0 18px rgba(24,201,245,.72);
  animation:spxV16Pulse 2.8s ease-in-out infinite;
}
.flow-connector span:nth-child(1){left:14%}
.flow-connector span:nth-child(2){left:50%;animation-delay:-.9s}
.flow-connector span:nth-child(3){right:14%;animation-delay:-1.8s}

.flow-detail{
  margin-top:24px;
  min-height:210px;
  padding:26px;
  border:1px solid rgba(107,232,255,.15);
  background:
    radial-gradient(circle at 86% 18%,rgba(24,201,245,.12),transparent 36%),
    rgba(255,255,255,.040);
  clip-path:polygon(4% 0,100% 0,100% 84%,92% 100%,0 100%,0 10%);
}
html[data-theme="light"] .flow-detail{
  background:
    radial-gradient(circle at 86% 18%,rgba(14,165,233,.11),transparent 36%),
    rgba(255,255,255,.68);
  border-color:rgba(15,23,42,.10);
}
.flow-detail small{
  color:var(--cyan-2);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}
.flow-detail h2{
  max-width:560px;
  margin:12px 0 0;
  font-size:clamp(30px,3.2vw,50px);
  line-height:1;
  letter-spacing:-.07em;
}
.flow-detail p{
  max-width:570px;
  margin:14px 0 0;
  color:var(--secondary);
  font-size:15px;
  line-height:1.56;
}
.flow-output{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.flow-output span{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(107,232,255,.15);
  background:rgba(24,201,245,.07);
  color:var(--secondary);
  font-size:12px;
  font-weight:900;
}
.spx-v16-bottom-fade{
  position:absolute;
  left:0;right:0;bottom:-1px;
  z-index:3;
  height:260px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.28) 38%,rgba(7,17,31,.82) 72%,var(--bg-2) 100%);
}
html[data-theme="light"] .spx-v16-bottom-fade{
  background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.86) 72%,#eef3fa 100%);
}
.spx-hero-v16 + .section.intro{
  margin-top:-54px;
  position:relative;
  z-index:5;
}

@keyframes spxV16Galaxy{
  from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.56}
  to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.70}
}
@keyframes spxV16Nebula{
  from{opacity:.46;transform:rotate(-18deg) scale(1)}
  to{opacity:.66;transform:rotate(-16deg) scale(1.05)}
}
@keyframes spxV16Cloud{
  from{opacity:.24;filter:blur(46px)}
  to{opacity:.40;filter:blur(56px)}
}
@keyframes spxV16Pulse{
  0%,100%{opacity:.34;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.18)}
}

@media(max-width:1120px){
  .spx-nav-v16{grid-template-columns:auto auto 1fr}
  .spx-nav-v16 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v16 .site-nav{display:none}
  .spx-nav-v16.is-open .site-nav{
    display:grid;
    position:absolute;
    left:16px;
    right:16px;
    top:calc(100% + 10px);
    justify-content:stretch;
    border-radius:12px;
    background:rgba(4,10,22,.96);
  }
  html[data-theme="light"] .spx-nav-v16.is-open .site-nav{background:rgba(255,255,255,.96)}
  .spx-nav-v16 .nav-group-mega .mega-menu{
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    margin-top:8px;
  }
  .spx-v16-shell{
    grid-template-columns:1fr;
    max-width:940px;
  }
  .spx-v16-showcase{min-height:560px}
}
@media(max-width:760px){
  .spx-hero-v16{
    min-height:auto;
    padding:112px 18px 136px;
  }
  .spx-v16-copy h1{
    font-size:clamp(44px,13vw,70px);
  }
  .spx-v16-actions{display:grid}
  .spx-v16-metrics,
  .flow-stage{grid-template-columns:1fr}
  .spx-v16-showcase{min-height:auto}
  .showcase-frame{
    position:relative;
    inset:auto;
    clip-path:polygon(5% 0,100% 0,100% 94%,92% 100%,0 100%,0 4%);
  }
  .flow-step{min-height:104px}
  .flow-connector{display:none}
  .spx-nav-v16 .nav-actions .btn.primary,
  .spx-nav-v16 .nav-actions .btn.ghost{display:none}
}
@media(prefers-reduced-motion:reduce){
  .spx-v16-nebula::before,
  .spx-v16-nebula::after,
  .spx-v16-nebula .nebula-cloud,
  .flow-connector span{animation:none!important}
}



/* ==========================================================================
   A8.17 — Open cinematic hero + text-link navigator
   ========================================================================== */

/* Hide previous hero/nav experiments. */
.spx-nav-v16,
.spx-nav-v15,
.spx-hero-v16,
.spx-hero-v15,
.spx-hero-v13,
.spx-hero-v12,
.hero.spx-aurora-hero{display:none!important}

/* Navigator: no more blocks-in-blocks around normal links. */
.spx-nav-v17{
  display:grid!important;
  position:fixed;
  top:0;left:0;right:0;
  z-index:120;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,3vw,42px);
  align-items:center;
  padding:24px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.spx-nav-v17.is-scrolled,
.spx-nav-v17.is-open,
.spx-nav-v17:focus-within{
  padding-top:14px;
  padding-bottom:14px;
  background:rgba(3,8,17,.78)!important;
  border-bottom-color:rgba(218,236,255,.10);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  box-shadow:0 18px 64px rgba(0,0,0,.24);
}
html[data-theme="light"] .spx-nav-v17.is-scrolled,
html[data-theme="light"] .spx-nav-v17.is-open,
html[data-theme="light"] .spx-nav-v17:focus-within{
  background:rgba(246,248,252,.86)!important;
  border-bottom-color:rgba(15,23,42,.08);
  box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v17 .brand{
  gap:10px;
  padding:0;
  border-radius:0;
  background:transparent;
}
.spx-nav-v17 .brand img{
  width:38px;
  height:38px;
  border-radius:8px;
}
.spx-nav-v17 .brand span{
  font-weight:960;
  letter-spacing:-.045em;
}
.spx-nav-v17 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(18px,2.6vw,34px);
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.spx-nav-v17 .site-nav>a,
.spx-nav-v17 .nav-group>a{
  position:relative;
  min-height:0;
  padding:7px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text-soft);
  font-weight:900;
  font-size:14px;
  letter-spacing:-.01em;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v17 .site-nav>a::after,
.spx-nav-v17 .nav-group>a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s var(--ease);
  box-shadow:0 0 16px rgba(24,201,245,.38);
}
.spx-nav-v17 .site-nav>a:hover,
.spx-nav-v17 .nav-group:hover>a,
.spx-nav-v17 .nav-group>a:focus-visible{
  color:var(--text);
  transform:translateY(-1px);
}
.spx-nav-v17 .site-nav>a:hover::after,
.spx-nav-v17 .nav-group:hover>a::after,
.spx-nav-v17 .nav-group>a:focus-visible::after{
  transform:scaleX(1);
}
.spx-nav-v17 .nav-home-link::before{display:none!important}
.spx-nav-v17 .nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.spx-nav-v17 .theme-toggle{
  min-height:40px;
  padding:8px 11px;
  border-radius:9px;
  border:1px solid rgba(218,236,255,.12);
  background:rgba(255,255,255,.035);
  font-weight:900;
}
.spx-nav-v17 .nav-actions .btn{
  min-height:40px;
  padding:8px 14px;
  border-radius:9px;
  font-weight:930;
}
.spx-nav-v17 .nav-actions .btn.ghost{
  background:transparent;
  border:1px solid rgba(218,236,255,.12);
}
.spx-nav-v17 .nav-actions .btn.primary{
  background:linear-gradient(135deg,#078fc2,#2563eb 64%,#18c9f5);
  box-shadow:0 14px 42px rgba(14,165,233,.23),inset 0 1px 0 rgba(255,255,255,.20);
}
html[data-theme="light"] .spx-nav-v17 .theme-toggle,
html[data-theme="light"] .spx-nav-v17 .nav-actions .btn.ghost{
  background:rgba(255,255,255,.56);
  border-color:rgba(15,23,42,.09);
}
.spx-nav-v17 .nav-group-mega .mega-menu{
  width:min(980px,calc(100vw - 42px));
  padding:0;
  border-radius:0;
  border:1px solid rgba(107,232,255,.16);
  background:rgba(5,11,23,.91);
  box-shadow:0 34px 110px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(24px) saturate(150%);
  overflow:hidden;
}
html[data-theme="light"] .spx-nav-v17 .nav-group-mega .mega-menu{
  background:rgba(255,255,255,.94);
  box-shadow:0 30px 80px rgba(22,34,64,.13);
}
.spx-nav-v17 .nav-panel-lead{
  display:grid;
  gap:8px;
  padding:22px 24px;
  border-bottom:1px solid rgba(218,236,255,.09);
  background:
    linear-gradient(90deg,rgba(24,201,245,.10),transparent 55%),
    rgba(255,255,255,.025);
}
.spx-nav-v17 .nav-panel-lead span{
  color:var(--cyan-2);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:950;
}
.spx-nav-v17 .nav-panel-lead strong{
  max-width:720px;
  color:var(--text);
  font-size:clamp(24px,2vw,34px);
  line-height:1.05;
  letter-spacing:-.06em;
}
.spx-nav-v17 .nav-panel-columns{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.spx-nav-v17 .nav-panel-columns a{
  min-height:148px;
  padding:22px;
  border-right:1px solid rgba(218,236,255,.08);
  color:var(--secondary);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v17 .nav-panel-columns a:last-child{border-right:0}
.spx-nav-v17 .nav-panel-columns a:hover{
  background:rgba(24,201,245,.075);
  transform:translateY(-2px);
}
.spx-nav-v17 .nav-panel-columns b{
  display:block;
  color:var(--text);
  font-size:15px;
}
.spx-nav-v17 .nav-panel-columns span{
  display:block;
  margin-top:8px;
  font-size:13px;
  line-height:1.4;
}

/* Hero: open cinematic composition, no blocky right widget. */
.spx-hero-v17{
  display:block!important;
  position:relative;
  min-height:clamp(850px,100svh,1120px);
  overflow:hidden;
  isolation:isolate;
  padding:clamp(142px,12vw,188px) var(--side) clamp(148px,14vw,210px);
  color:var(--text);
  background:#02050d;
}
html[data-theme="light"] .spx-hero-v17{background:#eef6ff}
.spx-hero-v17 .spx-hero-space{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:
    radial-gradient(900px 580px at 78% 15%,rgba(37,99,235,.16),transparent 62%),
    radial-gradient(820px 560px at 12% 76%,rgba(24,201,245,.10),transparent 68%),
    linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v17 .spx-hero-space{
  background:
    radial-gradient(900px 580px at 78% 15%,rgba(37,99,235,.10),transparent 62%),
    radial-gradient(820px 560px at 12% 76%,rgba(14,165,233,.08),transparent 68%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}
.spx-v17-sky{
  position:absolute;
  inset:-10% -8%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.spx-v17-sky::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:5%;
  height:88%;
  background:
    linear-gradient(112deg,
      transparent 0 30%,
      rgba(37,99,235,.040) 38%,
      rgba(24,201,245,.12) 45%,
      rgba(210,244,255,.17) 49%,
      rgba(82,181,230,.10) 54%,
      rgba(48,86,180,.05) 62%,
      transparent 73% 100%),
    radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),
    radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);
  filter:blur(24px) saturate(125%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v17-x,0px) * .10),calc(var(--spx-v17-y,0px) * .08),0);
  opacity:.62;
  animation:spxV17Galaxy 30s ease-in-out infinite alternate;
}
.spx-v17-sky::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 49% 53%,rgba(255,255,255,.045),transparent 34%),
    radial-gradient(ellipse at 52% 55%,rgba(107,232,255,.085),transparent 44%);
  filter:blur(40px);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v17-x,0px) * .07),calc(var(--spx-v17-y,0px) * .05),0);
  opacity:.62;
  animation:spxV17Nebula 18s ease-in-out infinite alternate;
}
.v17-cloud{
  position:absolute;
  display:block;
  border-radius:999px;
  opacity:.30;
  filter:blur(54px);
  transform:translate3d(calc(var(--spx-v17-x,0px) * .13),calc(var(--spx-v17-y,0px) * .10),0);
  animation:spxV17Cloud 15s ease-in-out infinite alternate;
}
.v17-cloud.cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.v17-cloud.cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.v17-cloud.cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.v17-horizon{
  position:absolute;
  left:6%;
  right:6%;
  bottom:14%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(107,232,255,.28),transparent);
  box-shadow:0 0 42px rgba(24,201,245,.20);
}
.v17-orbit{
  position:absolute;
  border:1px solid rgba(107,232,255,.13);
  transform:rotate(-16deg) translate3d(calc(var(--spx-v17-x,0px) * -.06),calc(var(--spx-v17-y,0px) * -.05),0);
  opacity:.42;
}
.v17-orbit.orbit-a{right:4%;top:18%;width:760px;height:330px;border-radius:50%}
.v17-orbit.orbit-b{right:20%;bottom:16%;width:560px;height:240px;border-radius:50%;opacity:.25}

.spx-v17-shell{
  position:relative;
  z-index:5;
  width:min(1360px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(520px,.98fr) minmax(460px,1.02fr);
  gap:clamp(46px,6vw,96px);
  align-items:center;
}
.spx-v17-copy{
  max-width:680px;
}
.spx-v17-kicker{
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border:1px solid rgba(107,232,255,.20);
  border-radius:7px;
  background:rgba(24,201,245,.08);
  color:#bff4ff;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html[data-theme="light"] .spx-v17-kicker{
  color:#075985;
  background:rgba(14,165,233,.09);
  border-color:rgba(14,165,233,.20);
}
.spx-v17-copy h1{
  margin:18px 0 0;
  max-width:740px;
  font-size:clamp(64px,8.3vw,138px);
  line-height:.84;
  letter-spacing:-.105em;
  text-wrap:balance;
}
.spx-v17-copy h1::after{
  content:"";
  display:block;
  width:min(320px,42%);
  height:2px;
  margin-top:28px;
  background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);
  box-shadow:0 0 24px rgba(24,201,245,.42);
}
.spx-v17-lead{
  margin:24px 0 0;
  max-width:570px;
  color:var(--text-soft);
  font-size:clamp(18px,1.45vw,23px);
  line-height:1.52;
}
.spx-v17-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-v17-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.spx-v17-actions .btn{
  border-radius:10px;
}

/* Right side: lightweight, open visual flow instead of boxed widget. */
.spx-v17-sequence{
  position:relative;
  min-height:560px;
  transform:translate3d(calc(var(--spx-v17-x,0px) * .32),calc(var(--spx-v17-y,0px) * .22),0);
}
.sequence-line{
  position:absolute;
  left:4%;
  right:4%;
  top:50%;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(107,232,255,.46),rgba(37,99,235,.30),transparent);
  box-shadow:0 0 34px rgba(24,201,245,.20);
  transform:rotate(-10deg);
}
.sequence-step{
  all:unset;
  position:absolute;
  z-index:4;
  width:190px;
  min-height:118px;
  padding:18px;
  cursor:pointer;
  color:var(--secondary);
  border-left:1px solid rgba(107,232,255,.24);
  background:linear-gradient(90deg,rgba(5,11,23,.74),rgba(5,11,23,.18));
  backdrop-filter:blur(14px);
  transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
html[data-theme="light"] .sequence-step{
  background:linear-gradient(90deg,rgba(255,255,255,.78),rgba(255,255,255,.20));
}
.sequence-step:hover,
.sequence-step.is-active{
  color:var(--text);
  transform:translateY(-7px);
  border-left-color:rgba(107,232,255,.60);
  background:linear-gradient(90deg,rgba(10,28,52,.88),rgba(10,28,52,.22));
}
html[data-theme="light"] .sequence-step:hover,
html[data-theme="light"] .sequence-step.is-active{
  background:linear-gradient(90deg,rgba(238,246,255,.94),rgba(238,246,255,.30));
}
.sequence-step i{
  display:block;
  color:var(--cyan-2);
  font-style:normal;
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
}
.sequence-step b{
  display:block;
  margin-top:12px;
  color:inherit;
  font-size:25px;
  line-height:1;
  letter-spacing:-.05em;
}
.sequence-step span{
  display:block;
  margin-top:7px;
  font-size:13px;
  color:var(--secondary);
}
.sequence-step:nth-of-type(1){left:3%;top:17%}
.sequence-step:nth-of-type(2){left:38%;top:44%}
.sequence-step:nth-of-type(3){right:4%;top:20%}

.sequence-focus{
  position:absolute;
  right:3%;
  bottom:6%;
  z-index:3;
  width:min(440px,72%);
  padding:26px 0 0 26px;
  border-left:1px solid rgba(107,232,255,.20);
}
.sequence-focus small{
  color:var(--cyan-2);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}
.sequence-focus strong{
  display:block;
  margin-top:12px;
  color:var(--text);
  font-size:clamp(28px,3vw,48px);
  line-height:1;
  letter-spacing:-.07em;
}
.sequence-focus p{
  max-width:420px;
  margin:14px 0 0;
  color:var(--secondary);
  font-size:15px;
  line-height:1.56;
}
.spx-v17-bottom-fade{
  position:absolute;
  left:0;right:0;bottom:-1px;
  z-index:3;
  height:270px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.26) 38%,rgba(7,17,31,.82) 72%,var(--bg-2) 100%);
}
html[data-theme="light"] .spx-v17-bottom-fade{
  background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.86) 72%,#eef3fa 100%);
}
.spx-hero-v17 + .section.intro{
  margin-top:-56px;
  position:relative;
  z-index:5;
}

@keyframes spxV17Galaxy{
  from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.54}
  to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.68}
}
@keyframes spxV17Nebula{
  from{opacity:.44;transform:rotate(-18deg) scale(1)}
  to{opacity:.62;transform:rotate(-16deg) scale(1.05)}
}
@keyframes spxV17Cloud{
  from{opacity:.22;filter:blur(48px)}
  to{opacity:.38;filter:blur(58px)}
}

@media(max-width:1120px){
  .spx-nav-v17{grid-template-columns:auto auto 1fr}
  .spx-nav-v17 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v17 .site-nav{display:none}
  .spx-nav-v17.is-open .site-nav{
    display:grid;
    position:absolute;
    left:18px;
    right:18px;
    top:calc(100% + 10px);
    justify-content:stretch;
    gap:6px;
    padding:16px;
    border:1px solid rgba(218,236,255,.10);
    background:rgba(4,10,22,.96);
  }
  html[data-theme="light"] .spx-nav-v17.is-open .site-nav{background:rgba(255,255,255,.96)}
  .spx-nav-v17 .nav-group-mega .mega-menu{
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    margin-top:8px;
  }
  .spx-nav-v17 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}
  .spx-v17-shell{
    grid-template-columns:1fr;
    max-width:940px;
  }
  .spx-v17-sequence{min-height:520px}
}
@media(max-width:760px){
  .spx-hero-v17{
    min-height:auto;
    padding:118px 18px 138px;
  }
  .spx-v17-copy h1{
    font-size:clamp(52px,16vw,78px);
  }
  .spx-v17-actions{display:grid}
  .spx-v17-sequence{min-height:620px}
  .sequence-step{
    position:relative;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:auto;
    margin:12px 0;
  }
  .sequence-line{display:none}
  .sequence-focus{
    position:relative;
    right:auto;
    bottom:auto;
    width:auto;
    margin-top:24px;
  }
  .spx-nav-v17 .nav-actions .btn.primary,
  .spx-nav-v17 .nav-actions .btn.ghost{display:none}
  .spx-nav-v17 .nav-panel-columns{grid-template-columns:1fr}
  .spx-nav-v17 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}
}
@media(prefers-reduced-motion:reduce){
  .spx-v17-sky::before,
  .spx-v17-sky::after,
  .v17-cloud{animation:none!important}
}



/* ==========================================================================
   A8.18 — Central launch hero, opaque dropdowns, clear theme switch, animated grid
   ========================================================================== */

/* Hide earlier public hero/nav experiments. */
.spx-nav-v17,
.spx-nav-v16,
.spx-nav-v15,
.spx-hero-v17,
.spx-hero-v16,
.spx-hero-v15,
.spx-hero-v13,
.spx-hero-v12,
.hero.spx-aurora-hero{display:none!important}

/* Navigator: text links stay clean; dropdowns become opaque and easier to read. */
.spx-nav-v18{
  display:grid!important;
  position:fixed;
  top:0;left:0;right:0;
  z-index:130;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,3vw,42px);
  align-items:center;
  padding:24px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.spx-nav-v18.is-scrolled,
.spx-nav-v18.is-open,
.spx-nav-v18:focus-within{
  padding-top:14px;
  padding-bottom:14px;
  background:rgba(3,8,17,.84)!important;
  border-bottom-color:rgba(218,236,255,.11);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  box-shadow:0 18px 64px rgba(0,0,0,.26);
}
html[data-theme="light"] .spx-nav-v18.is-scrolled,
html[data-theme="light"] .spx-nav-v18.is-open,
html[data-theme="light"] .spx-nav-v18:focus-within{
  background:rgba(246,248,252,.90)!important;
  border-bottom-color:rgba(15,23,42,.09);
  box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v18 .brand{
  gap:10px;
  padding:0;
  background:transparent;
}
.spx-nav-v18 .brand img{
  width:38px;
  height:38px;
  border-radius:8px;
}
.spx-nav-v18 .brand span{
  font-weight:960;
  letter-spacing:-.045em;
}
.spx-nav-v18 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(18px,2.6vw,34px);
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.spx-nav-v18 .site-nav>a,
.spx-nav-v18 .nav-group>a{
  position:relative;
  padding:7px 0;
  color:var(--text-soft);
  background:transparent;
  border:0;
  border-radius:0;
  font-weight:900;
  font-size:14px;
  letter-spacing:-.01em;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v18 .site-nav>a::after,
.spx-nav-v18 .nav-group>a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s var(--ease);
  box-shadow:0 0 16px rgba(24,201,245,.36);
}
.spx-nav-v18 .site-nav>a:hover,
.spx-nav-v18 .nav-group:hover>a,
.spx-nav-v18 .nav-group>a:focus-visible{
  color:var(--text);
  transform:translateY(-1px);
}
.spx-nav-v18 .site-nav>a:hover::after,
.spx-nav-v18 .nav-group:hover>a::after,
.spx-nav-v18 .nav-group>a:focus-visible::after{
  transform:scaleX(1);
}
.spx-nav-v18 .nav-home-link::before{display:none!important}
.spx-nav-v18 .nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.spx-nav-v18 .nav-actions .btn{
  min-height:40px;
  padding:8px 14px;
  border-radius:9px;
  font-weight:930;
}
.spx-nav-v18 .nav-actions .btn.ghost{
  background:transparent;
  border:1px solid rgba(218,236,255,.12);
}
.spx-nav-v18 .nav-actions .btn.primary{
  background:linear-gradient(135deg,#078fc2,#2563eb 64%,#18c9f5);
  box-shadow:0 14px 42px rgba(14,165,233,.23),inset 0 1px 0 rgba(255,255,255,.20);
}
html[data-theme="light"] .spx-nav-v18 .nav-actions .btn.ghost{
  background:rgba(255,255,255,.56);
  border-color:rgba(15,23,42,.09);
}

/* Clear dark/light switch */
.spx-theme-switch{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 10px 7px 7px;
  border-radius:999px;
  border:1px solid rgba(218,236,255,.14);
  background:rgba(255,255,255,.055);
  color:var(--text-soft);
  font-weight:900;
  line-height:1;
}
html[data-theme="light"] .spx-theme-switch{
  background:rgba(255,255,255,.68);
  border-color:rgba(15,23,42,.10);
}
.spx-theme-switch .switch-track{
  position:relative;
  width:48px;
  height:26px;
  border-radius:999px;
  background:linear-gradient(135deg,#111827,#0b1220);
  border:1px solid rgba(218,236,255,.12);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.28);
}
.spx-theme-switch .switch-track i{
  position:absolute;
  left:3px;
  top:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#93c5fd 55%,#2563eb);
  box-shadow:0 0 16px rgba(147,197,253,.38);
  transition:transform .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease);
}
html[data-theme="light"] .spx-theme-switch .switch-track{
  background:linear-gradient(135deg,#e0f2fe,#f8fafc);
  border-color:rgba(14,165,233,.18);
}
html[data-theme="light"] .spx-theme-switch .switch-track i{
  transform:translateX(22px);
  background:radial-gradient(circle at 35% 35%,#fff7cc,#facc15 58%,#f59e0b);
  box-shadow:0 0 18px rgba(245,158,11,.32);
}
.spx-theme-switch .switch-label{
  min-width:36px;
  text-align:left;
  font-size:12px;
}

/* Dropdown panels: opaque + blurred background behind them for readability. */
.spx-nav-v18 .nav-group-mega .mega-menu{
  width:min(980px,calc(100vw - 42px));
  padding:0;
  border-radius:0;
  border:1px solid rgba(107,232,255,.18);
  background:#050b17;
  box-shadow:0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  overflow:hidden;
}
html[data-theme="light"] .spx-nav-v18 .nav-group-mega .mega-menu{
  background:#ffffff;
  border-color:rgba(15,23,42,.10);
  box-shadow:0 30px 80px rgba(22,34,64,.16);
}
.spx-nav-v18 .nav-group-mega .mega-menu::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(2,6,23,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}
html[data-theme="light"] .spx-nav-v18 .nav-group-mega .mega-menu::before{
  background:rgba(246,248,252,.28);
}
.spx-nav-v18 .nav-panel-lead{
  display:grid;
  gap:8px;
  padding:22px 24px;
  border-bottom:1px solid rgba(218,236,255,.10);
  background:linear-gradient(90deg,rgba(24,201,245,.10),rgba(37,99,235,.05),transparent 70%);
}
html[data-theme="light"] .spx-nav-v18 .nav-panel-lead{
  border-bottom-color:rgba(15,23,42,.08);
  background:linear-gradient(90deg,rgba(14,165,233,.10),rgba(37,99,235,.05),transparent 70%);
}
.spx-nav-v18 .nav-panel-lead span{
  color:var(--cyan-2);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:950;
}
.spx-nav-v18 .nav-panel-lead strong{
  max-width:720px;
  color:var(--text);
  font-size:clamp(24px,2vw,34px);
  line-height:1.05;
  letter-spacing:-.06em;
}
.spx-nav-v18 .nav-panel-lead small{
  max-width:640px;
  color:var(--secondary);
  font-weight:760;
}
.spx-nav-v18 .nav-panel-columns{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.spx-nav-v18 .nav-panel-columns a{
  min-height:154px;
  padding:22px;
  border-right:1px solid rgba(218,236,255,.09);
  color:var(--secondary);
  background:transparent;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
html[data-theme="light"] .spx-nav-v18 .nav-panel-columns a{
  border-right-color:rgba(15,23,42,.07);
}
.spx-nav-v18 .nav-panel-columns a:last-child{border-right:0}
.spx-nav-v18 .nav-panel-columns a:hover{
  background:rgba(24,201,245,.075);
  transform:translateY(-2px);
}
.spx-nav-v18 .nav-panel-columns b{
  display:block;
  color:var(--text);
  font-size:15px;
}
.spx-nav-v18 .nav-panel-columns span{
  display:block;
  margin-top:8px;
  font-size:13px;
  line-height:1.4;
}

/* Hero: real central re-composition, not left/right repeated layout. */
.spx-hero-v18{
  display:block!important;
  position:relative;
  min-height:clamp(900px,105svh,1180px);
  overflow:hidden;
  isolation:isolate;
  padding:clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px);
  color:var(--text);
  background:#02050d;
}
html[data-theme="light"] .spx-hero-v18{background:#eef6ff}
.spx-hero-v18 .spx-hero-space{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:
    radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.15),transparent 62%),
    radial-gradient(920px 620px at 18% 78%,rgba(24,201,245,.10),transparent 68%),
    linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v18 .spx-hero-space{
  background:
    radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.10),transparent 62%),
    radial-gradient(920px 620px at 18% 78%,rgba(14,165,233,.08),transparent 68%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}
.spx-v18-sky{
  position:absolute;
  inset:-10% -8%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.spx-v18-sky::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:2%;
  height:92%;
  background:
    linear-gradient(112deg,
      transparent 0 30%,
      rgba(37,99,235,.040) 38%,
      rgba(24,201,245,.12) 45%,
      rgba(210,244,255,.17) 49%,
      rgba(82,181,230,.10) 54%,
      rgba(48,86,180,.05) 62%,
      transparent 73% 100%),
    radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),
    radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);
  filter:blur(24px) saturate(125%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v18-x,0px) * .10),calc(var(--spx-v18-y,0px) * .08),0);
  opacity:.64;
  animation:spxV18Galaxy 30s ease-in-out infinite alternate;
}
.spx-v18-sky::after{
  content:"";
  position:absolute;
  inset:6% 0 0;
  background:
    linear-gradient(rgba(107,232,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  transform:perspective(900px) rotateX(62deg) translate3d(calc(var(--spx-v18-x,0px) * .18),calc(var(--spx-v18-y,0px) * .10),0);
  transform-origin:center bottom;
  opacity:.36;
  animation:spxV18GridDrift 18s linear infinite;
  mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 76%,transparent 100%);
}
html[data-theme="light"] .spx-v18-sky::after{
  opacity:.25;
}
.v18-cloud{
  position:absolute;
  display:block;
  border-radius:999px;
  opacity:.30;
  filter:blur(54px);
  transform:translate3d(calc(var(--spx-v18-x,0px) * .13),calc(var(--spx-v18-y,0px) * .10),0);
  animation:spxV18Cloud 15s ease-in-out infinite alternate;
}
.v18-cloud.cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.v18-cloud.cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.v18-cloud.cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.v18-glow{
  position:absolute;
  width:34vw;
  height:34vw;
  border-radius:50%;
  filter:blur(34px);
  opacity:.16;
}
.v18-glow.glow-a{right:6%;top:18%;background:rgba(24,201,245,.28)}
.v18-glow.glow-b{left:8%;bottom:12%;background:rgba(37,99,235,.22)}
.v18-asset-placeholders{
  position:absolute;
  inset:0;
  z-index:2;
  transform:translate3d(calc(var(--spx-v18-x,0px) * .22),calc(var(--spx-v18-y,0px) * .15),0);
}
.asset-ghost{
  position:absolute;
  width:clamp(178px,14vw,238px);
  min-height:98px;
  padding:16px;
  border:1px solid rgba(107,232,255,.16);
  background:linear-gradient(135deg,rgba(5,11,23,.62),rgba(5,11,23,.16));
  color:var(--secondary);
  opacity:.48;
  backdrop-filter:blur(12px);
}
html[data-theme="light"] .asset-ghost{
  background:linear-gradient(135deg,rgba(255,255,255,.68),rgba(255,255,255,.20));
  border-color:rgba(14,165,233,.16);
  opacity:.56;
}
.asset-ghost b{
  display:block;
  color:var(--text);
  font-size:13px;
}
.asset-ghost small{
  display:block;
  margin-top:7px;
  line-height:1.35;
}
.asset-canvas{right:10%;top:22%;transform:rotate(-4deg)}
.asset-settings{left:7%;bottom:30%;transform:rotate(3deg)}
.asset-export{right:18%;bottom:17%;transform:rotate(2deg)}

.spx-v18-shell{
  position:relative;
  z-index:5;
  width:min(1280px,100%);
  margin:0 auto;
  display:grid;
  justify-items:center;
  text-align:center;
}
.spx-v18-copy{
  max-width:980px;
}
.spx-v18-kicker{
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border:1px solid rgba(107,232,255,.20);
  border-radius:7px;
  background:rgba(24,201,245,.08);
  color:#bff4ff;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html[data-theme="light"] .spx-v18-kicker{
  color:#075985;
  background:rgba(14,165,233,.09);
  border-color:rgba(14,165,233,.20);
}
.spx-v18-copy h1{
  margin:20px auto 0;
  max-width:1050px;
  font-size:clamp(66px,9.5vw,154px);
  line-height:.82;
  letter-spacing:-.11em;
  text-wrap:balance;
}
.spx-v18-copy h1::after{
  content:"";
  display:block;
  width:min(380px,38%);
  height:2px;
  margin:30px auto 0;
  background:linear-gradient(90deg,transparent,#18c9f5,rgba(37,99,235,.85),transparent);
  box-shadow:0 0 26px rgba(24,201,245,.42);
}
.spx-v18-lead{
  margin:24px auto 0;
  max-width:720px;
  color:var(--text-soft);
  font-size:clamp(18px,1.35vw,23px);
  line-height:1.52;
}
.spx-v18-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-v18-actions{
  justify-content:center;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.spx-v18-actions .btn{border-radius:10px}

/* Launch path: open visual under headline, not a right-side block. */
.spx-launch-path{
  position:relative;
  width:min(1050px,100%);
  min-height:340px;
  margin-top:clamp(46px,6vw,76px);
  transform:translate3d(calc(var(--spx-v18-x,0px) * .24),calc(var(--spx-v18-y,0px) * .16),0);
}
.launch-rail{
  position:absolute;
  left:3%;
  right:3%;
  top:48%;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(107,232,255,.54),rgba(37,99,235,.34),transparent);
  box-shadow:0 0 38px rgba(24,201,245,.24);
}
.launch-rail::before{
  content:"";
  position:absolute;
  inset:-90px 4%;
  border:1px solid rgba(107,232,255,.12);
  border-left:0;
  border-right:0;
  border-radius:50%;
  transform:rotate(-5deg);
}
.launch-point{
  all:unset;
  position:absolute;
  z-index:4;
  width:190px;
  min-height:110px;
  padding:18px;
  text-align:left;
  cursor:pointer;
  color:var(--secondary);
  border-left:1px solid rgba(107,232,255,.24);
  background:linear-gradient(90deg,rgba(5,11,23,.72),rgba(5,11,23,.08));
  backdrop-filter:blur(14px);
  transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease), opacity .22s var(--ease);
}
html[data-theme="light"] .launch-point{
  background:linear-gradient(90deg,rgba(255,255,255,.78),rgba(255,255,255,.16));
}
.launch-point:hover,
.launch-point.is-active{
  color:var(--text);
  transform:translateY(-8px);
  border-left-color:rgba(107,232,255,.60);
  background:linear-gradient(90deg,rgba(10,28,52,.88),rgba(10,28,52,.18));
}
html[data-theme="light"] .launch-point:hover,
html[data-theme="light"] .launch-point.is-active{
  background:linear-gradient(90deg,rgba(238,246,255,.94),rgba(238,246,255,.30));
}
.launch-point i{
  display:block;
  color:var(--cyan-2);
  font-style:normal;
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
}
.launch-point b{
  display:block;
  margin-top:12px;
  color:inherit;
  font-size:25px;
  line-height:1;
  letter-spacing:-.05em;
}
.launch-point span{
  display:block;
  margin-top:7px;
  font-size:13px;
  color:var(--secondary);
}
.point-build{left:4%;top:9%}
.point-organize{left:50%;top:36%;transform:translateX(-50%)}
.point-organize:hover,
.point-organize.is-active{transform:translateX(-50%) translateY(-8px)}
.point-export{right:4%;top:9%}
.launch-focus{
  position:absolute;
  left:50%;
  bottom:0;
  width:min(540px,86%);
  transform:translateX(-50%);
  padding-top:24px;
  border-top:1px solid rgba(107,232,255,.20);
  text-align:center;
}
.launch-focus small{
  color:var(--cyan-2);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}
.launch-focus strong{
  display:block;
  margin-top:12px;
  color:var(--text);
  font-size:clamp(28px,2.8vw,46px);
  line-height:1;
  letter-spacing:-.07em;
}
.launch-focus p{
  max-width:520px;
  margin:14px auto 0;
  color:var(--secondary);
  font-size:15px;
  line-height:1.56;
}
.launch-particles span{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#18c9f5;
  box-shadow:0 0 20px rgba(24,201,245,.74);
  animation:spxV18Pulse 3.4s ease-in-out infinite;
}
.launch-particles span:nth-child(1){left:7%;top:47%}
.launch-particles span:nth-child(2){left:33%;top:46%;animation-delay:-.8s}
.launch-particles span:nth-child(3){right:33%;top:46%;animation-delay:-1.6s}
.launch-particles span:nth-child(4){right:7%;top:47%;animation-delay:-2.4s}

.spx-v18-bottom-fade{
  position:absolute;
  left:0;right:0;bottom:-1px;
  z-index:3;
  height:290px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.24) 36%,rgba(7,17,31,.84) 72%,var(--bg-2) 100%);
}
html[data-theme="light"] .spx-v18-bottom-fade{
  background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.88) 72%,#eef3fa 100%);
}
.spx-hero-v18 + .section.intro{
  margin-top:-58px;
  position:relative;
  z-index:5;
}

@keyframes spxV18Galaxy{
  from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.56}
  to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.70}
}
@keyframes spxV18Cloud{
  from{opacity:.22;filter:blur(48px)}
  to{opacity:.38;filter:blur(58px)}
}
@keyframes spxV18GridDrift{
  from{background-position:0 0,0 0;opacity:.26}
  50%{opacity:.42}
  to{background-position:72px 72px,72px 72px;opacity:.26}
}
@keyframes spxV18Pulse{
  0%,100%{opacity:.28;transform:scale(.75)}
  50%{opacity:1;transform:scale(1.15)}
}

@media(max-width:1120px){
  .spx-nav-v18{grid-template-columns:auto auto 1fr}
  .spx-nav-v18 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v18 .site-nav{display:none}
  .spx-nav-v18.is-open .site-nav{
    display:grid;
    position:absolute;
    left:18px;
    right:18px;
    top:calc(100% + 10px);
    justify-content:stretch;
    gap:6px;
    padding:16px;
    border:1px solid rgba(218,236,255,.10);
    background:#050b17;
  }
  html[data-theme="light"] .spx-nav-v18.is-open .site-nav{background:#fff}
  .spx-nav-v18 .nav-group-mega .mega-menu{
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    margin-top:8px;
  }
  .spx-nav-v18 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .spx-hero-v18{
    min-height:auto;
    padding:118px 18px 148px;
  }
  .spx-v18-copy h1{
    font-size:clamp(52px,16vw,80px);
  }
  .spx-v18-actions{display:grid}
  .asset-ghost{display:none}
  .spx-launch-path{
    min-height:620px;
    margin-top:44px;
  }
  .launch-rail{display:none}
  .launch-point{
    position:relative;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:auto;
    margin:12px 0;
  }
  .point-organize,
  .point-organize:hover,
  .point-organize.is-active{transform:none}
  .launch-focus{
    position:relative;
    left:auto;
    bottom:auto;
    width:auto;
    transform:none;
    margin-top:24px;
  }
  .launch-particles{display:none}
  .spx-nav-v18 .nav-actions .btn.primary,
  .spx-nav-v18 .nav-actions .btn.ghost{display:none}
  .spx-nav-v18 .nav-panel-columns{grid-template-columns:1fr}
  .spx-nav-v18 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}
}
@media(prefers-reduced-motion:reduce){
  .spx-v18-sky::before,
  .spx-v18-sky::after,
  .v18-cloud,
  .launch-particles span{animation:none!important}
}



/* ==========================================================================
   A8.19 — left-aligned hero, no workflow widget, no centered copy
   ========================================================================== */

.spx-nav-v18,
.spx-nav-v17,
.spx-nav-v16,
.spx-nav-v15,
.spx-hero-v18,
.spx-hero-v17,
.spx-hero-v16,
.spx-hero-v15,
.spx-hero-v13,
.spx-hero-v12,
.hero.spx-aurora-hero{display:none!important}

/* Navigator keeps A8.18 readability, but under v19 class. */
.spx-nav-v19{
  display:grid!important;
  position:fixed;
  top:0;left:0;right:0;
  z-index:140;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,3vw,42px);
  align-items:center;
  padding:24px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.spx-nav-v19.is-scrolled,
.spx-nav-v19.is-open,
.spx-nav-v19:focus-within{
  padding-top:14px;
  padding-bottom:14px;
  background:rgba(3,8,17,.84)!important;
  border-bottom-color:rgba(218,236,255,.11);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  box-shadow:0 18px 64px rgba(0,0,0,.26);
}
html[data-theme="light"] .spx-nav-v19.is-scrolled,
html[data-theme="light"] .spx-nav-v19.is-open,
html[data-theme="light"] .spx-nav-v19:focus-within{
  background:rgba(246,248,252,.90)!important;
  border-bottom-color:rgba(15,23,42,.09);
  box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v19 .brand{
  gap:10px;
  padding:0;
  background:transparent;
}
.spx-nav-v19 .brand img{
  width:38px;
  height:38px;
  border-radius:8px;
}
.spx-nav-v19 .brand span{
  font-weight:960;
  letter-spacing:-.045em;
}
.spx-nav-v19 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(18px,2.6vw,34px);
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.spx-nav-v19 .site-nav>a,
.spx-nav-v19 .nav-group>a{
  position:relative;
  padding:7px 0;
  color:var(--text-soft);
  background:transparent;
  border:0;
  border-radius:0;
  font-weight:900;
  font-size:14px;
  letter-spacing:-.01em;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v19 .site-nav>a::after,
.spx-nav-v19 .nav-group>a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s var(--ease);
  box-shadow:0 0 16px rgba(24,201,245,.36);
}
.spx-nav-v19 .site-nav>a:hover,
.spx-nav-v19 .nav-group:hover>a,
.spx-nav-v19 .nav-group>a:focus-visible{
  color:var(--text);
  transform:translateY(-1px);
}
.spx-nav-v19 .site-nav>a:hover::after,
.spx-nav-v19 .nav-group:hover>a::after,
.spx-nav-v19 .nav-group>a:focus-visible::after{
  transform:scaleX(1);
}
.spx-nav-v19 .nav-home-link::before{display:none!important}
.spx-nav-v19 .nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.spx-nav-v19 .nav-actions .btn{
  min-height:40px;
  padding:8px 14px;
  border-radius:9px;
  font-weight:930;
}
.spx-nav-v19 .nav-actions .btn.ghost{
  background:transparent;
  border:1px solid rgba(218,236,255,.12);
}
.spx-nav-v19 .nav-actions .btn.primary{
  background:linear-gradient(135deg,#078fc2,#2563eb 64%,#18c9f5);
  box-shadow:0 14px 42px rgba(14,165,233,.23),inset 0 1px 0 rgba(255,255,255,.20);
}
html[data-theme="light"] .spx-nav-v19 .nav-actions .btn.ghost{
  background:rgba(255,255,255,.56);
  border-color:rgba(15,23,42,.09);
}

/* Keep clearer A8.18 theme switch under v19 nav. */
.spx-nav-v19 .spx-theme-switch{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 10px 7px 7px;
  border-radius:999px;
  border:1px solid rgba(218,236,255,.14);
  background:rgba(255,255,255,.055);
  color:var(--text-soft);
  font-weight:900;
  line-height:1;
}
html[data-theme="light"] .spx-nav-v19 .spx-theme-switch{
  background:rgba(255,255,255,.68);
  border-color:rgba(15,23,42,.10);
}
.spx-nav-v19 .spx-theme-switch .switch-track{
  position:relative;
  width:48px;
  height:26px;
  border-radius:999px;
  background:linear-gradient(135deg,#111827,#0b1220);
  border:1px solid rgba(218,236,255,.12);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.28);
}
.spx-nav-v19 .spx-theme-switch .switch-track i{
  position:absolute;
  left:3px;
  top:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#93c5fd 55%,#2563eb);
  box-shadow:0 0 16px rgba(147,197,253,.38);
  transition:transform .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease);
}
html[data-theme="light"] .spx-nav-v19 .spx-theme-switch .switch-track{
  background:linear-gradient(135deg,#e0f2fe,#f8fafc);
  border-color:rgba(14,165,233,.18);
}
html[data-theme="light"] .spx-nav-v19 .spx-theme-switch .switch-track i{
  transform:translateX(22px);
  background:radial-gradient(circle at 35% 35%,#fff7cc,#facc15 58%,#f59e0b);
  box-shadow:0 0 18px rgba(245,158,11,.32);
}
.spx-nav-v19 .spx-theme-switch .switch-label{
  min-width:36px;
  text-align:left;
  font-size:12px;
}

/* Opaque dropdowns: readable, not transparent. */
.spx-nav-v19 .nav-group-mega .mega-menu{
  width:min(980px,calc(100vw - 42px));
  padding:0;
  border-radius:0;
  border:1px solid rgba(107,232,255,.18);
  background:#050b17;
  box-shadow:0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  overflow:hidden;
}
html[data-theme="light"] .spx-nav-v19 .nav-group-mega .mega-menu{
  background:#ffffff;
  border-color:rgba(15,23,42,.10);
  box-shadow:0 30px 80px rgba(22,34,64,.16);
}
.spx-nav-v19 .nav-group-mega .mega-menu::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(2,6,23,.24);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}
html[data-theme="light"] .spx-nav-v19 .nav-group-mega .mega-menu::before{
  background:rgba(246,248,252,.28);
}
.spx-nav-v19 .nav-panel-lead{
  display:grid;
  gap:8px;
  padding:22px 24px;
  border-bottom:1px solid rgba(218,236,255,.10);
  background:linear-gradient(90deg,rgba(24,201,245,.10),rgba(37,99,235,.05),transparent 70%);
}
.spx-nav-v19 .nav-panel-lead span{
  color:var(--cyan-2);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:950;
}
.spx-nav-v19 .nav-panel-lead strong{
  max-width:720px;
  color:var(--text);
  font-size:clamp(24px,2vw,34px);
  line-height:1.05;
  letter-spacing:-.06em;
}
.spx-nav-v19 .nav-panel-lead small{
  max-width:640px;
  color:var(--secondary);
  font-weight:760;
}
.spx-nav-v19 .nav-panel-columns{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.spx-nav-v19 .nav-panel-columns a{
  min-height:154px;
  padding:22px;
  border-right:1px solid rgba(218,236,255,.09);
  color:var(--secondary);
  background:transparent;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v19 .nav-panel-columns a:last-child{border-right:0}
.spx-nav-v19 .nav-panel-columns a:hover{
  background:rgba(24,201,245,.075);
  transform:translateY(-2px);
}
.spx-nav-v19 .nav-panel-columns b{
  display:block;
  color:var(--text);
  font-size:15px;
}
.spx-nav-v19 .nav-panel-columns span{
  display:block;
  margin-top:8px;
  font-size:13px;
  line-height:1.4;
}

/* A8.19 hero: left-aligned copy; no Build/Organize/Export element. */
.spx-hero-v19{
  display:block!important;
  position:relative;
  min-height:clamp(870px,104svh,1180px);
  overflow:hidden;
  isolation:isolate;
  padding:clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px);
  color:var(--text);
  background:#02050d;
}
html[data-theme="light"] .spx-hero-v19{background:#eef6ff}
.spx-hero-v19 .spx-hero-space{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:
    radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.15),transparent 62%),
    radial-gradient(920px 620px at 18% 78%,rgba(24,201,245,.10),transparent 68%),
    linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v19 .spx-hero-space{
  background:
    radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.10),transparent 62%),
    radial-gradient(920px 620px at 18% 78%,rgba(14,165,233,.08),transparent 68%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}
.spx-v19-sky{
  position:absolute;
  inset:-10% -8%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.spx-v19-sky::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:2%;
  height:92%;
  background:
    linear-gradient(112deg,
      transparent 0 30%,
      rgba(37,99,235,.040) 38%,
      rgba(24,201,245,.12) 45%,
      rgba(210,244,255,.17) 49%,
      rgba(82,181,230,.10) 54%,
      rgba(48,86,180,.05) 62%,
      transparent 73% 100%),
    radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),
    radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);
  filter:blur(24px) saturate(125%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v19-x,0px) * .10),calc(var(--spx-v19-y,0px) * .08),0);
  opacity:.64;
  animation:spxV19Galaxy 30s ease-in-out infinite alternate;
}
.spx-v19-sky::after{
  content:"";
  position:absolute;
  inset:6% 0 0;
  background:
    linear-gradient(rgba(107,232,255,.050) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.038) 1px,transparent 1px);
  background-size:72px 72px;
  transform:perspective(900px) rotateX(62deg) translate3d(calc(var(--spx-v19-x,0px) * .18),calc(var(--spx-v19-y,0px) * .10),0);
  transform-origin:center bottom;
  opacity:.38;
  animation:spxV19GridDrift 18s linear infinite;
  mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 76%,transparent 100%);
}
html[data-theme="light"] .spx-v19-sky::after{opacity:.26}
.v19-cloud{
  position:absolute;
  display:block;
  border-radius:999px;
  opacity:.30;
  filter:blur(54px);
  transform:translate3d(calc(var(--spx-v19-x,0px) * .13),calc(var(--spx-v19-y,0px) * .10),0);
  animation:spxV19Cloud 15s ease-in-out infinite alternate;
}
.v19-cloud.cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.v19-cloud.cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.v19-cloud.cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.v19-horizon{
  position:absolute;
  left:6%;
  right:6%;
  bottom:22%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(107,232,255,.32),transparent);
  box-shadow:0 0 48px rgba(24,201,245,.24);
}
.v19-grid-plane{
  position:absolute;
  left:3%;
  right:3%;
  bottom:0;
  height:42%;
  background:
    linear-gradient(rgba(107,232,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.040) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(900px) rotateX(66deg);
  transform-origin:center bottom;
  opacity:.22;
  animation:spxV19GridDrift 20s linear infinite reverse;
  mask-image:linear-gradient(180deg,transparent 0%,black 30%,transparent 100%);
}
.v19-product-fragments{
  position:absolute;
  inset:0;
  z-index:2;
  transform:translate3d(calc(var(--spx-v19-x,0px) * .22),calc(var(--spx-v19-y,0px) * .15),0);
}
.fragment{
  position:absolute;
  width:clamp(188px,15vw,255px);
  min-height:104px;
  padding:16px;
  border:1px solid rgba(107,232,255,.16);
  background:linear-gradient(135deg,rgba(5,11,23,.56),rgba(5,11,23,.12));
  color:var(--secondary);
  opacity:.46;
  backdrop-filter:blur(12px);
}
html[data-theme="light"] .fragment{
  background:linear-gradient(135deg,rgba(255,255,255,.68),rgba(255,255,255,.20));
  border-color:rgba(14,165,233,.16);
  opacity:.56;
}
.fragment b{
  display:block;
  color:var(--text);
  font-size:13px;
}
.fragment small{
  display:block;
  margin-top:7px;
  line-height:1.35;
}
.fragment-canvas{right:8%;top:24%;transform:rotate(-4deg)}
.fragment-settings{right:22%;bottom:28%;transform:rotate(3deg)}
.fragment-export{right:4%;bottom:14%;transform:rotate(2deg)}

.spx-v19-shell{
  position:relative;
  z-index:5;
  width:min(1340px,100%);
  margin:0 auto;
  display:grid;
  justify-items:start;
  text-align:left;
}
.spx-v19-copy{
  max-width:min(760px,64vw);
}
.spx-v19-kicker{
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border:1px solid rgba(107,232,255,.20);
  border-radius:7px;
  background:rgba(24,201,245,.08);
  color:#bff4ff;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html[data-theme="light"] .spx-v19-kicker{
  color:#075985;
  background:rgba(14,165,233,.09);
  border-color:rgba(14,165,233,.20);
}
.spx-v19-copy h1{
  margin:20px 0 0;
  max-width:920px;
  font-size:clamp(66px,9.5vw,154px);
  line-height:.82;
  letter-spacing:-.11em;
  text-wrap:balance;
}
.spx-v19-copy h1::after{
  content:"";
  display:block;
  width:min(380px,46%);
  height:2px;
  margin-top:30px;
  background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);
  box-shadow:0 0 26px rgba(24,201,245,.42);
}
.spx-v19-lead{
  margin:24px 0 0;
  max-width:610px;
  color:var(--text-soft);
  font-size:clamp(18px,1.35vw,23px);
  line-height:1.52;
}
.spx-v19-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-v19-actions{
  justify-content:flex-start;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.spx-v19-actions .btn{border-radius:10px}

.spx-v19-bottom-fade{
  position:absolute;
  left:0;right:0;bottom:-1px;
  z-index:3;
  height:290px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.24) 36%,rgba(7,17,31,.84) 72%,var(--bg-2) 100%);
}
html[data-theme="light"] .spx-v19-bottom-fade{
  background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.88) 72%,#eef3fa 100%);
}
.spx-hero-v19 + .section.intro{
  margin-top:-58px;
  position:relative;
  z-index:5;
}

@keyframes spxV19Galaxy{
  from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.56}
  to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.70}
}
@keyframes spxV19Cloud{
  from{opacity:.22;filter:blur(48px)}
  to{opacity:.38;filter:blur(58px)}
}
@keyframes spxV19GridDrift{
  from{background-position:0 0,0 0}
  to{background-position:72px 72px,72px 72px}
}

@media(max-width:1120px){
  .spx-nav-v19{grid-template-columns:auto auto 1fr}
  .spx-nav-v19 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v19 .site-nav{display:none}
  .spx-nav-v19.is-open .site-nav{
    display:grid;
    position:absolute;
    left:18px;
    right:18px;
    top:calc(100% + 10px);
    justify-content:stretch;
    gap:6px;
    padding:16px;
    border:1px solid rgba(218,236,255,.10);
    background:#050b17;
  }
  html[data-theme="light"] .spx-nav-v19.is-open .site-nav{background:#fff}
  .spx-nav-v19 .nav-group-mega .mega-menu{
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    margin-top:8px;
  }
  .spx-nav-v19 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}
  .spx-v19-copy{max-width:780px}
}
@media(max-width:760px){
  .spx-hero-v19{
    min-height:auto;
    padding:118px 18px 148px;
  }
  .spx-v19-copy{max-width:100%}
  .spx-v19-copy h1{
    font-size:clamp(52px,16vw,80px);
  }
  .spx-v19-actions{display:grid}
  .fragment{display:none}
  .spx-nav-v19 .nav-actions .btn.primary,
  .spx-nav-v19 .nav-actions .btn.ghost{display:none}
  .spx-nav-v19 .nav-panel-columns{grid-template-columns:1fr}
  .spx-nav-v19 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}
}
@media(prefers-reduced-motion:reduce){
  .spx-v19-sky::before,
  .spx-v19-sky::after,
  .v19-cloud,
  .v19-grid-plane{animation:none!important}
}


/* ==========================================================================
   A8.20 — hero product stage (option B), transparent nav, softer nav buttons
   ========================================================================== */
.spx-nav-v19,
.spx-nav-v18,
.spx-nav-v17,
.spx-nav-v16,
.spx-nav-v15,
.spx-hero-v19,
.spx-hero-v18,
.spx-hero-v17,
.spx-hero-v16,
.spx-hero-v15,
.spx-hero-v13,
.spx-hero-v12,
.hero.spx-aurora-hero{display:none!important}

/* Navigator keeps the transparent top state and becomes readable only on scroll/open. */
.spx-nav-v20{
  display:grid!important;
  position:fixed;
  top:0;left:0;right:0;
  z-index:140;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,3vw,42px);
  align-items:center;
  padding:24px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), backdrop-filter .28s var(--ease);
}
.spx-nav-v20.is-scrolled,
.spx-nav-v20.is-open,
.spx-nav-v20:focus-within{
  padding-top:14px;
  padding-bottom:14px;
  background:rgba(3,8,17,.76)!important;
  border-bottom-color:rgba(218,236,255,.11);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 18px 64px rgba(0,0,0,.22);
}
html[data-theme="light"] .spx-nav-v20.is-scrolled,
html[data-theme="light"] .spx-nav-v20.is-open,
html[data-theme="light"] .spx-nav-v20:focus-within{
  background:rgba(246,248,252,.84)!important;
  border-bottom-color:rgba(15,23,42,.09);
  box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v20 .brand{gap:10px;padding:0;background:transparent}
.spx-nav-v20 .brand img{width:38px;height:38px;border-radius:8px}
.spx-nav-v20 .brand span{font-weight:960;letter-spacing:-.045em}
.spx-nav-v20 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(18px,2.6vw,34px);
  padding:0;border:0;background:transparent;box-shadow:none;
}
.spx-nav-v20 .site-nav>a,
.spx-nav-v20 .nav-group>a{
  position:relative;
  padding:7px 0;
  color:var(--text-soft);
  background:transparent;border:0;border-radius:0;
  font-weight:900;font-size:14px;letter-spacing:-.01em;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v20 .site-nav>a::after,
.spx-nav-v20 .nav-group>a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
  box-shadow:0 0 16px rgba(24,201,245,.36);
}
.spx-nav-v20 .site-nav>a:hover,
.spx-nav-v20 .nav-group:hover>a,
.spx-nav-v20 .nav-group>a:focus-visible{color:var(--text);transform:translateY(-1px)}
.spx-nav-v20 .site-nav>a:hover::after,
.spx-nav-v20 .nav-group:hover>a::after,
.spx-nav-v20 .nav-group>a:focus-visible::after{transform:scaleX(1)}
.spx-nav-v20 .nav-home-link::before{display:none!important}
.spx-nav-v20 .nav-actions{display:flex;align-items:center;gap:10px}
.spx-nav-v20 .nav-actions .btn{
  min-height:38px;
  padding:8px 14px;
  font-weight:930;
  border-radius:999px;
}
.spx-nav-v20 .nav-actions .btn.ghost{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  color:var(--text-soft);
}
.spx-nav-v20 .nav-actions .btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}
.spx-nav-v20 .nav-actions .btn.primary{
  background:linear-gradient(135deg,rgba(7,143,194,.92),rgba(37,99,235,.92) 64%,rgba(24,201,245,.95));
  box-shadow:0 14px 42px rgba(14,165,233,.20), inset 0 1px 0 rgba(255,255,255,.16);
  border:1px solid rgba(125,220,255,.18);
}
html[data-theme="light"] .spx-nav-v20 .nav-actions .btn.ghost:hover{background:rgba(15,23,42,.04)}

.spx-nav-v20 .spx-theme-switch{
  min-height:38px;display:inline-flex;align-items:center;gap:9px;
  padding:7px 10px 7px 7px;border-radius:999px;
  border:1px solid rgba(218,236,255,.14);background:rgba(255,255,255,.055);
  color:var(--text-soft);font-weight:900;line-height:1;
}
html[data-theme="light"] .spx-nav-v20 .spx-theme-switch{background:rgba(255,255,255,.68);border-color:rgba(15,23,42,.10)}
.spx-nav-v20 .spx-theme-switch .switch-track{position:relative;width:48px;height:26px;border-radius:999px;background:linear-gradient(135deg,#111827,#0b1220);border:1px solid rgba(218,236,255,.12);box-shadow:inset 0 1px 5px rgba(0,0,0,.28)}
.spx-nav-v20 .spx-theme-switch .switch-track i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#93c5fd 55%,#2563eb);box-shadow:0 0 16px rgba(147,197,253,.38);transition:transform .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease)}
html[data-theme="light"] .spx-nav-v20 .spx-theme-switch .switch-track{background:linear-gradient(135deg,#e0f2fe,#f8fafc);border-color:rgba(14,165,233,.18)}
html[data-theme="light"] .spx-nav-v20 .spx-theme-switch .switch-track i{transform:translateX(22px);background:radial-gradient(circle at 35% 35%,#fff7cc,#facc15 58%,#f59e0b);box-shadow:0 0 18px rgba(245,158,11,.32)}
.spx-nav-v20 .spx-theme-switch .switch-label{min-width:36px;text-align:left;font-size:12px}

.spx-nav-v20 .nav-group-mega .mega-menu{
  width:min(980px,calc(100vw - 42px));padding:0;border-radius:0;
  border:1px solid rgba(107,232,255,.18);background:rgba(5,11,23,.95);
  box-shadow:0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);overflow:hidden;
}
html[data-theme="light"] .spx-nav-v20 .nav-group-mega .mega-menu{background:rgba(255,255,255,.95);border-color:rgba(15,23,42,.10);box-shadow:0 30px 80px rgba(22,34,64,.16)}
.spx-nav-v20 .nav-group-mega .mega-menu::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(2,6,23,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
html[data-theme="light"] .spx-nav-v20 .nav-group-mega .mega-menu::before{background:rgba(246,248,252,.28)}
.spx-nav-v20 .nav-panel-lead{display:grid;gap:8px;padding:22px 24px;border-bottom:1px solid rgba(218,236,255,.10);background:linear-gradient(90deg,rgba(24,201,245,.10),rgba(37,99,235,.05),transparent 70%)}
.spx-nav-v20 .nav-panel-lead span{color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:950}
.spx-nav-v20 .nav-panel-lead strong{max-width:720px;color:var(--text);font-size:clamp(24px,2vw,34px);line-height:1.05;letter-spacing:-.06em}
.spx-nav-v20 .nav-panel-lead small{max-width:640px;color:var(--secondary);font-weight:760}
.spx-nav-v20 .nav-panel-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.spx-nav-v20 .nav-panel-columns a{min-height:154px;padding:22px;border-right:1px solid rgba(218,236,255,.09);color:var(--secondary);background:transparent;transition:background .2s var(--ease), transform .2s var(--ease)}
.spx-nav-v20 .nav-panel-columns a:last-child{border-right:0}
.spx-nav-v20 .nav-panel-columns a:hover{background:rgba(24,201,245,.075);transform:translateY(-2px)}
.spx-nav-v20 .nav-panel-columns b{display:block;color:var(--text);font-size:15px}
.spx-nav-v20 .nav-panel-columns span{display:block;margin-top:8px;font-size:13px;line-height:1.4}

/* Hero: Option B — canvas workspace as base, details cycle inside one integrated stage. */
.spx-hero-v20{
  display:block!important;position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(900px,104svh,1180px);
  padding:clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px);
  color:var(--text);background:#02050d;
}
html[data-theme="light"] .spx-hero-v20{background:#eef6ff}
.spx-hero-v20 .spx-hero-space{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.15),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(24,201,245,.10),transparent 68%),linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%)}
html[data-theme="light"] .spx-hero-v20 .spx-hero-space{background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.10),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(14,165,233,.08),transparent 68%),linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%)}
.spx-v20-sky{position:absolute;inset:-10% -8%;z-index:1;pointer-events:none;overflow:hidden}
.spx-v20-sky::before{content:"";position:absolute;left:-8%;right:-8%;top:2%;height:92%;background:linear-gradient(112deg,transparent 0 30%,rgba(37,99,235,.04) 38%,rgba(24,201,245,.12) 45%,rgba(210,244,255,.17) 49%,rgba(82,181,230,.10) 54%,rgba(48,86,180,.05) 62%,transparent 73% 100%),radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);filter:blur(24px) saturate(125%);transform:rotate(-18deg) translate3d(calc(var(--spx-v20-x,0px) * .10),calc(var(--spx-v20-y,0px) * .08),0);opacity:.64;animation:spxV20Galaxy 30s ease-in-out infinite alternate}
.spx-v20-sky::after{content:"";position:absolute;inset:7% 0 0;background:linear-gradient(rgba(107,232,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.038) 1px,transparent 1px);background-size:72px 72px;transform:perspective(900px) rotateX(62deg) translate3d(calc(var(--spx-v20-x,0px) * .18),calc(var(--spx-v20-y,0px) * .10),0);transform-origin:center bottom;opacity:.32;animation:spxV20GridDrift 18s linear infinite;mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 76%,transparent 100%)}
html[data-theme="light"] .spx-v20-sky::after{opacity:.22}
.v20-cloud{position:absolute;display:block;border-radius:999px;opacity:.30;filter:blur(54px);transform:translate3d(calc(var(--spx-v20-x,0px) * .13),calc(var(--spx-v20-y,0px) * .10),0);animation:spxV20Cloud 15s ease-in-out infinite alternate}
.v20-cloud.cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.v20-cloud.cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.v20-cloud.cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.v20-horizon{position:absolute;left:6%;right:6%;bottom:19%;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.32),transparent);box-shadow:0 0 48px rgba(24,201,245,.24)}
.v20-grid-plane{position:absolute;left:3%;right:3%;bottom:0;height:38%;background:linear-gradient(rgba(107,232,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.040) 1px,transparent 1px);background-size:64px 64px;transform:perspective(900px) rotateX(66deg);transform-origin:center bottom;opacity:.20;animation:spxV20GridDrift 20s linear infinite reverse;mask-image:linear-gradient(180deg,transparent 0%,black 30%,transparent 100%)}
.v20-light-trace{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.52),transparent);opacity:.32;filter:blur(.2px);animation:spxV20Trace 10s linear infinite}
.v20-light-trace.trace-a{left:48%;width:22%;top:28%;animation-delay:-1s}
.v20-light-trace.trace-b{right:8%;width:18%;top:64%;animation-delay:-6s}

.spx-v20-shell{position:relative;z-index:5;width:min(1360px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(560px,640px);align-items:center;gap:clamp(28px,4vw,68px)}
.spx-v20-copy{max-width:620px;justify-self:start}
.spx-v20-kicker{display:inline-flex;align-items:center;padding:8px 11px;border:1px solid rgba(107,232,255,.20);border-radius:7px;background:rgba(24,201,245,.08);color:#bff4ff;font-size:11px;line-height:1;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
html[data-theme="light"] .spx-v20-kicker{color:#075985;background:rgba(14,165,233,.09);border-color:rgba(14,165,233,.20)}
.spx-v20-copy h1{margin:20px 0 0;max-width:860px;font-size:clamp(66px,9vw,150px);line-height:.82;letter-spacing:-.11em;text-wrap:balance}
.spx-v20-copy h1::after{content:"";display:block;width:min(380px,46%);height:2px;margin-top:30px;background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);box-shadow:0 0 26px rgba(24,201,245,.42)}
.spx-v20-lead{margin:24px 0 0;max-width:590px;color:var(--text-soft);font-size:clamp(18px,1.35vw,23px);line-height:1.52}
.spx-v20-lead strong{color:var(--text);font-weight:950}
.spx-v20-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.spx-v20-actions .btn{border-radius:999px}

.spx-v20-stage{width:min(640px,100%);justify-self:end;position:relative}
.stage-shell{position:relative;padding:18px;border:1px solid rgba(107,232,255,.12);background:linear-gradient(180deg,rgba(6,14,29,.72),rgba(3,8,17,.66));backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);box-shadow:0 34px 110px rgba(0,0,0,.44),0 0 0 1px rgba(255,255,255,.02) inset}
html[data-theme="light"] .stage-shell{background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(248,250,255,.62));border-color:rgba(14,165,233,.14);box-shadow:0 30px 80px rgba(22,34,64,.12),0 0 0 1px rgba(255,255,255,.55) inset}
.stage-shell::before{content:"";position:absolute;inset:-20% auto auto -18%;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(24,201,245,.20),rgba(24,201,245,0));filter:blur(20px);pointer-events:none}
.stage-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px}
.stage-meta span{display:block;color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:950}
.stage-meta strong{display:block;color:var(--text);font-size:22px;line-height:1;letter-spacing:-.06em}
.stage-frame{position:relative;min-height:430px;border:1px solid rgba(107,232,255,.14);background:rgba(2,6,14,.72);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="light"] .stage-frame{background:rgba(255,255,255,.62);border-color:rgba(14,165,233,.12)}
.stage-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.98;transform:scale(1.02)}
.stage-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.03) 46%,rgba(2,6,14,.15) 100%),radial-gradient(circle at 82% 16%,rgba(24,201,245,.08),transparent 28%);pointer-events:none}
.stage-pane{position:absolute;opacity:0;transform:translateY(18px) scale(.98);transition:opacity .45s var(--ease), transform .45s var(--ease);pointer-events:none;z-index:3;border:1px solid rgba(107,232,255,.16);background:rgba(4,10,20,.88);box-shadow:0 22px 54px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.04) inset;overflow:hidden}
.stage-pane img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.stage-pane.is-active{opacity:1;transform:translateY(0) scale(1)}
.stage-pane[data-stage-pane="settings"]{right:20px;top:28px;width:210px;height:360px}
.stage-pane[data-stage-pane="export"]{left:34px;right:34px;bottom:26px;height:230px}
.stage-pane[data-stage-pane="add"]{left:20px;top:34px;width:250px;height:300px}
.stage-pane-export img{object-position:center top}
.stage-pane-add img{object-position:left top}
.stage-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.stage-tabs button{appearance:none;border:0;background:transparent;color:var(--text-soft);font:inherit;font-weight:900;font-size:13px;letter-spacing:-.01em;padding:0 0 4px;position:relative;cursor:pointer}
.stage-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#18c9f5,#2563eb);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.stage-tabs button:hover,.stage-tabs button.is-active{color:var(--text)}
.stage-tabs button.is-active::after,.stage-tabs button:hover::after{transform:scaleX(1)}
.stage-caption{margin-top:14px;max-width:520px}
.stage-caption small{display:block;color:var(--cyan-2);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:950}
.stage-caption strong{display:block;margin-top:10px;color:var(--text);font-size:clamp(24px,2.2vw,34px);line-height:1.03;letter-spacing:-.06em}
.stage-caption p{margin-top:10px;color:var(--secondary);font-size:14px;line-height:1.56}

.spx-v20-bottom-fade{position:absolute;left:0;right:0;bottom:-1px;z-index:3;height:290px;pointer-events:none;background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.24) 36%,rgba(7,17,31,.84) 72%,var(--bg-2) 100%)}
html[data-theme="light"] .spx-v20-bottom-fade{background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.88) 72%,#eef3fa 100%)}
.spx-hero-v20 + .section.intro{margin-top:-58px;position:relative;z-index:5}

@keyframes spxV20Galaxy{from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.56}to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.70}}
@keyframes spxV20Cloud{from{opacity:.22;filter:blur(48px)}to{opacity:.38;filter:blur(58px)}}
@keyframes spxV20GridDrift{from{background-position:0 0,0 0}to{background-position:72px 72px,72px 72px}}
@keyframes spxV20Trace{from{transform:translateX(-28px);opacity:0}20%{opacity:.34}80%{opacity:.34}to{transform:translateX(28px);opacity:0}}

@media (max-width:1200px){
  .spx-v20-shell{grid-template-columns:minmax(0,1fr);justify-items:start}
  .spx-v20-stage{width:min(760px,100%);justify-self:start}
}
@media(max-width:1120px){
  .spx-nav-v20{grid-template-columns:auto auto 1fr}
  .spx-nav-v20 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v20 .site-nav{display:none}
  .spx-nav-v20.is-open .site-nav{display:grid;position:absolute;left:18px;right:18px;top:calc(100% + 10px);justify-content:stretch;gap:6px;padding:16px;border:1px solid rgba(218,236,255,.10);background:#050b17}
  html[data-theme="light"] .spx-nav-v20.is-open .site-nav{background:#fff}
  .spx-nav-v20 .nav-group-mega .mega-menu{position:static;width:100%;opacity:1;visibility:visible;transform:none;margin-top:8px}
  .spx-nav-v20 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .spx-hero-v20{min-height:auto;padding:118px 18px 148px}
  .spx-v20-copy{max-width:100%}
  .spx-v20-copy h1{font-size:clamp(52px,16vw,80px)}
  .spx-v20-actions{display:grid}
  .spx-nav-v20 .nav-actions .btn.primary,.spx-nav-v20 .nav-actions .btn.ghost{display:none}
  .spx-nav-v20 .nav-panel-columns{grid-template-columns:1fr}
  .spx-nav-v20 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}
  .stage-shell{padding:14px}
  .stage-frame{min-height:310px}
  .stage-pane[data-stage-pane="settings"]{right:10px;top:16px;width:132px;height:226px}
  .stage-pane[data-stage-pane="export"]{left:12px;right:12px;bottom:12px;height:150px}
  .stage-pane[data-stage-pane="add"]{left:10px;top:16px;width:154px;height:200px}
  .stage-caption strong{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .spx-v20-sky::before,.spx-v20-sky::after,.v20-cloud,.v20-grid-plane,.v20-light-trace{animation:none!important}
}


/* ==========================================================================
   A8.21 — corrected Option B: real Spixor UI integrated into hero background
   ========================================================================== */

.spx-nav-v20,
.spx-nav-v19,
.spx-nav-v18,
.spx-nav-v17,
.spx-nav-v16,
.spx-nav-v15,
.spx-hero-v20,
.spx-hero-v19,
.spx-hero-v18,
.spx-hero-v17,
.spx-hero-v16,
.spx-hero-v15,
.spx-hero-v13,
.spx-hero-v12,
.hero.spx-aurora-hero{display:none!important}

/* Navigator: transparent at top, not blocky, readable after scroll/open. */
.spx-nav-v21{
  display:grid!important;
  position:fixed;
  top:0;left:0;right:0;
  z-index:150;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,3vw,42px);
  align-items:center;
  padding:24px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), backdrop-filter .28s var(--ease);
}
.spx-nav-v21.is-scrolled,
.spx-nav-v21.is-open,
.spx-nav-v21:focus-within{
  padding-top:14px;
  padding-bottom:14px;
  background:rgba(3,8,17,.76)!important;
  border-bottom-color:rgba(218,236,255,.11);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 18px 64px rgba(0,0,0,.22);
}
html[data-theme="light"] .spx-nav-v21.is-scrolled,
html[data-theme="light"] .spx-nav-v21.is-open,
html[data-theme="light"] .spx-nav-v21:focus-within{
  background:rgba(246,248,252,.84)!important;
  border-bottom-color:rgba(15,23,42,.09);
  box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v21 .brand{gap:10px;padding:0;background:transparent}
.spx-nav-v21 .brand img{width:38px;height:38px;border-radius:8px}
.spx-nav-v21 .brand span{font-weight:960;letter-spacing:-.045em}
.spx-nav-v21 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(18px,2.6vw,34px);
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.spx-nav-v21 .site-nav>a,
.spx-nav-v21 .nav-group>a{
  position:relative;
  padding:7px 0;
  color:var(--text-soft);
  background:transparent;
  border:0;
  border-radius:0;
  font-weight:900;
  font-size:14px;
  letter-spacing:-.01em;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v21 .site-nav>a::after,
.spx-nav-v21 .nav-group>a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s var(--ease);
  box-shadow:0 0 16px rgba(24,201,245,.36);
}
.spx-nav-v21 .site-nav>a:hover,
.spx-nav-v21 .nav-group:hover>a,
.spx-nav-v21 .nav-group>a:focus-visible{color:var(--text);transform:translateY(-1px)}
.spx-nav-v21 .site-nav>a:hover::after,
.spx-nav-v21 .nav-group:hover>a::after,
.spx-nav-v21 .nav-group>a:focus-visible::after{transform:scaleX(1)}
.spx-nav-v21 .nav-home-link::before{display:none!important}
.spx-nav-v21 .nav-actions{display:flex;align-items:center;gap:10px}
.spx-nav-v21 .nav-actions .btn{
  min-height:38px;
  padding:8px 14px;
  font-weight:930;
  border-radius:999px;
}
.spx-nav-v21 .nav-actions .btn.ghost{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  color:var(--text-soft);
}
.spx-nav-v21 .nav-actions .btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}
.spx-nav-v21 .nav-actions .btn.primary{
  background:linear-gradient(135deg,rgba(7,143,194,.92),rgba(37,99,235,.92) 64%,rgba(24,201,245,.95));
  box-shadow:0 14px 42px rgba(14,165,233,.20), inset 0 1px 0 rgba(255,255,255,.16);
  border:1px solid rgba(125,220,255,.18);
}
html[data-theme="light"] .spx-nav-v21 .nav-actions .btn.ghost:hover{background:rgba(15,23,42,.04)}

.spx-nav-v21 .spx-theme-switch{
  min-height:38px;display:inline-flex;align-items:center;gap:9px;
  padding:7px 10px 7px 7px;border-radius:999px;
  border:1px solid rgba(218,236,255,.14);background:rgba(255,255,255,.055);
  color:var(--text-soft);font-weight:900;line-height:1;
}
html[data-theme="light"] .spx-nav-v21 .spx-theme-switch{background:rgba(255,255,255,.68);border-color:rgba(15,23,42,.10)}
.spx-nav-v21 .spx-theme-switch .switch-track{position:relative;width:48px;height:26px;border-radius:999px;background:linear-gradient(135deg,#111827,#0b1220);border:1px solid rgba(218,236,255,.12);box-shadow:inset 0 1px 5px rgba(0,0,0,.28)}
.spx-nav-v21 .spx-theme-switch .switch-track i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#93c5fd 55%,#2563eb);box-shadow:0 0 16px rgba(147,197,253,.38);transition:transform .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease)}
html[data-theme="light"] .spx-nav-v21 .spx-theme-switch .switch-track{background:linear-gradient(135deg,#e0f2fe,#f8fafc);border-color:rgba(14,165,233,.18)}
html[data-theme="light"] .spx-nav-v21 .spx-theme-switch .switch-track i{transform:translateX(22px);background:radial-gradient(circle at 35% 35%,#fff7cc,#facc15 58%,#f59e0b);box-shadow:0 0 18px rgba(245,158,11,.32)}
.spx-nav-v21 .spx-theme-switch .switch-label{min-width:36px;text-align:left;font-size:12px}

/* Dropdowns: opaque and readable with blur behind. */
.spx-nav-v21 .nav-group-mega .mega-menu{
  width:min(980px,calc(100vw - 42px));
  padding:0;
  border-radius:0;
  border:1px solid rgba(107,232,255,.18);
  background:rgba(5,11,23,.96);
  box-shadow:0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  overflow:hidden;
}
html[data-theme="light"] .spx-nav-v21 .nav-group-mega .mega-menu{
  background:rgba(255,255,255,.96);
  border-color:rgba(15,23,42,.10);
  box-shadow:0 30px 80px rgba(22,34,64,.16);
}
.spx-nav-v21 .nav-group-mega .mega-menu::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(2,6,23,.24);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}
html[data-theme="light"] .spx-nav-v21 .nav-group-mega .mega-menu::before{background:rgba(246,248,252,.28)}
.spx-nav-v21 .nav-panel-lead{display:grid;gap:8px;padding:22px 24px;border-bottom:1px solid rgba(218,236,255,.10);background:linear-gradient(90deg,rgba(24,201,245,.10),rgba(37,99,235,.05),transparent 70%)}
.spx-nav-v21 .nav-panel-lead span{color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:950}
.spx-nav-v21 .nav-panel-lead strong{max-width:720px;color:var(--text);font-size:clamp(24px,2vw,34px);line-height:1.05;letter-spacing:-.06em}
.spx-nav-v21 .nav-panel-lead small{max-width:640px;color:var(--secondary);font-weight:760}
.spx-nav-v21 .nav-panel-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.spx-nav-v21 .nav-panel-columns a{min-height:154px;padding:22px;border-right:1px solid rgba(218,236,255,.09);color:var(--secondary);background:transparent;transition:background .2s var(--ease), transform .2s var(--ease)}
.spx-nav-v21 .nav-panel-columns a:last-child{border-right:0}
.spx-nav-v21 .nav-panel-columns a:hover{background:rgba(24,201,245,.075);transform:translateY(-2px)}
.spx-nav-v21 .nav-panel-columns b{display:block;color:var(--text);font-size:15px}
.spx-nav-v21 .nav-panel-columns span{display:block;margin-top:8px;font-size:13px;line-height:1.4}

/* Hero: real Spixor UI is integrated into the atmosphere, not a right-side tab/card. */
.spx-hero-v21{
  display:block!important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:clamp(900px,104svh,1180px);
  padding:clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px);
  color:var(--text);
  background:#02050d;
}
html[data-theme="light"] .spx-hero-v21{background:#eef6ff}
.spx-hero-v21 .spx-hero-space{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.15),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(24,201,245,.10),transparent 68%),linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v21 .spx-hero-space{
  background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.10),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(14,165,233,.08),transparent 68%),linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}
.spx-v21-sky{
  position:absolute;
  inset:-10% -8%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.spx-v21-sky::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:2%;
  height:92%;
  background:linear-gradient(112deg,transparent 0 30%,rgba(37,99,235,.04) 38%,rgba(24,201,245,.12) 45%,rgba(210,244,255,.17) 49%,rgba(82,181,230,.10) 54%,rgba(48,86,180,.05) 62%,transparent 73% 100%),radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);
  filter:blur(24px) saturate(125%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v21-x,0px) * .10),calc(var(--spx-v21-y,0px) * .08),0);
  opacity:.64;
  animation:spxV21Galaxy 30s ease-in-out infinite alternate;
}
.spx-v21-sky::after{
  content:"";
  position:absolute;
  inset:7% 0 0;
  background:linear-gradient(rgba(107,232,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.038) 1px,transparent 1px);
  background-size:72px 72px;
  transform:perspective(900px) rotateX(62deg) translate3d(calc(var(--spx-v21-x,0px) * .18),calc(var(--spx-v21-y,0px) * .10),0);
  transform-origin:center bottom;
  opacity:.32;
  animation:spxV21GridDrift 18s linear infinite;
  mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 76%,transparent 100%);
}
html[data-theme="light"] .spx-v21-sky::after{opacity:.22}
.v21-cloud{position:absolute;display:block;border-radius:999px;opacity:.30;filter:blur(54px);transform:translate3d(calc(var(--spx-v21-x,0px) * .13),calc(var(--spx-v21-y,0px) * .10),0);animation:spxV21Cloud 15s ease-in-out infinite alternate}
.v21-cloud.cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.v21-cloud.cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.v21-cloud.cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.v21-horizon{position:absolute;left:6%;right:6%;bottom:19%;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.32),transparent);box-shadow:0 0 48px rgba(24,201,245,.24)}
.v21-grid-plane{position:absolute;left:3%;right:3%;bottom:0;height:38%;background:linear-gradient(rgba(107,232,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.040) 1px,transparent 1px);background-size:64px 64px;transform:perspective(900px) rotateX(66deg);transform-origin:center bottom;opacity:.20;animation:spxV21GridDrift 20s linear infinite reverse;mask-image:linear-gradient(180deg,transparent 0%,black 30%,transparent 100%)}
.v21-light-trace{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.52),transparent);opacity:.32;filter:blur(.2px);animation:spxV21Trace 10s linear infinite}
.v21-light-trace.trace-a{left:48%;width:22%;top:28%;animation-delay:-1s}
.v21-light-trace.trace-b{right:8%;width:18%;top:64%;animation-delay:-6s}

/* Product atmosphere: canvas is the background base; detail views switch inside the same visual space. */
.v21-product-atmosphere{
  position:absolute;
  right:-6vw;
  top:17%;
  width:min(880px,58vw);
  height:min(590px,52vw);
  z-index:2;
  transform:perspective(1400px) rotateY(-12deg) rotateX(4deg) translate3d(calc(var(--spx-v21-x,0px) * .22),calc(var(--spx-v21-y,0px) * .16),0);
  transform-origin:center;
  opacity:.78;
  filter:drop-shadow(0 44px 110px rgba(0,0,0,.38));
}
.v21-product-atmosphere::before{
  content:"";
  position:absolute;
  inset:-7%;
  background:radial-gradient(circle at 50% 50%,rgba(24,201,245,.18),transparent 62%);
  filter:blur(22px);
  opacity:.66;
}
.v21-product-atmosphere::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(2,5,13,.78),rgba(2,5,13,.16) 35%,rgba(2,5,13,.12) 74%,rgba(2,5,13,.56)),linear-gradient(180deg,rgba(2,5,13,.12),rgba(2,5,13,.46));
  z-index:7;
  pointer-events:none;
}
html[data-theme="light"] .v21-product-atmosphere::after{
  background:linear-gradient(90deg,rgba(238,246,255,.54),rgba(238,246,255,.12) 40%,rgba(238,246,255,.08) 75%,rgba(238,246,255,.38)),linear-gradient(180deg,rgba(238,246,255,.05),rgba(238,246,255,.34));
}
.v21-builder-base{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left top;
  border:1px solid rgba(107,232,255,.18);
  opacity:.92;
  filter:saturate(1.08) contrast(1.05);
  clip-path:polygon(4% 0,100% 0,100% 90%,91% 100%,0 100%,0 7%);
}
.v21-product-layer{
  position:absolute;
  z-index:4;
  border:1px solid rgba(107,232,255,.22);
  background:#050b17;
  box-shadow:0 28px 80px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.035) inset;
  opacity:0;
  overflow:hidden;
  transform:translateY(18px) scale(.985);
  animation:spxV21ProductSwitch 12s ease-in-out infinite;
}
.v21-product-layer img,
.v21-product-layer{display:block}
.v21-product-layer{
  object-fit:cover;
  object-position:center top;
}
.layer-settings{
  right:5.5%;
  top:8%;
  width:34%;
  height:76%;
  object-position:center top;
  animation-delay:0s;
}
.layer-export{
  left:10%;
  right:7%;
  bottom:6%;
  width:auto;
  height:46%;
  object-position:center top;
  animation-delay:4s;
}
.layer-add{
  left:1.5%;
  top:10.5%;
  width:39%;
  height:76%;
  object-position:left top;
  animation-delay:8s;
}
.v21-product-label{
  position:absolute;
  z-index:8;
  padding:7px 9px;
  color:#c9f7ff;
  border:1px solid rgba(107,232,255,.20);
  background:rgba(5,11,23,.62);
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(12px);
}
.label-canvas{left:7%;top:7%}
.label-context{right:8%;bottom:7%}
html[data-theme="light"] .v21-product-label{
  color:#075985;
  background:rgba(255,255,255,.62);
  border-color:rgba(14,165,233,.18);
}

/* Copy remains left-aligned. Product visuals live behind/right as cinematic atmosphere. */
.spx-v21-shell{
  position:relative;
  z-index:5;
  width:min(1340px,100%);
  margin:0 auto;
  display:grid;
  justify-items:start;
  text-align:left;
}
.spx-v21-copy{
  max-width:min(720px,62vw);
}
.spx-v21-kicker{
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border:1px solid rgba(107,232,255,.20);
  border-radius:7px;
  background:rgba(24,201,245,.08);
  color:#bff4ff;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html[data-theme="light"] .spx-v21-kicker{
  color:#075985;
  background:rgba(14,165,233,.09);
  border-color:rgba(14,165,233,.20);
}
.spx-v21-copy h1{
  margin:20px 0 0;
  max-width:920px;
  font-size:clamp(66px,9.5vw,154px);
  line-height:.82;
  letter-spacing:-.11em;
  text-wrap:balance;
}
.spx-v21-copy h1::after{
  content:"";
  display:block;
  width:min(380px,46%);
  height:2px;
  margin-top:30px;
  background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);
  box-shadow:0 0 26px rgba(24,201,245,.42);
}
.spx-v21-lead{
  margin:24px 0 0;
  max-width:610px;
  color:var(--text-soft);
  font-size:clamp(18px,1.35vw,23px);
  line-height:1.52;
}
.spx-v21-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-v21-actions{
  justify-content:flex-start;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.spx-v21-actions .btn{border-radius:999px}

.spx-v21-bottom-fade{
  position:absolute;
  left:0;right:0;bottom:-1px;
  z-index:3;
  height:300px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.24) 36%,rgba(7,17,31,.84) 72%,var(--bg-2) 100%);
}
html[data-theme="light"] .spx-v21-bottom-fade{
  background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.88) 72%,#eef3fa 100%);
}
.spx-hero-v21 + .section.intro{
  margin-top:-58px;
  position:relative;
  z-index:5;
}

@keyframes spxV21Galaxy{
  from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.56}
  to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.70}
}
@keyframes spxV21Cloud{
  from{opacity:.22;filter:blur(48px)}
  to{opacity:.38;filter:blur(58px)}
}
@keyframes spxV21GridDrift{
  from{background-position:0 0,0 0}
  to{background-position:72px 72px,72px 72px}
}
@keyframes spxV21Trace{
  from{transform:translateX(-28px);opacity:0}
  20%{opacity:.34}
  80%{opacity:.34}
  to{transform:translateX(28px);opacity:0}
}
@keyframes spxV21ProductSwitch{
  0%,5%{opacity:0;transform:translateY(18px) scale(.985)}
  10%,28%{opacity:.86;transform:translateY(0) scale(1)}
  33%,100%{opacity:0;transform:translateY(-12px) scale(.985)}
}

@media(max-width:1200px){
  .v21-product-atmosphere{
    right:-22vw;
    width:900px;
    height:600px;
    opacity:.50;
  }
  .spx-v21-copy{max-width:760px}
}
@media(max-width:1120px){
  .spx-nav-v21{grid-template-columns:auto auto 1fr}
  .spx-nav-v21 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v21 .site-nav{display:none}
  .spx-nav-v21.is-open .site-nav{
    display:grid;
    position:absolute;
    left:18px;
    right:18px;
    top:calc(100% + 10px);
    justify-content:stretch;
    gap:6px;
    padding:16px;
    border:1px solid rgba(218,236,255,.10);
    background:#050b17;
  }
  html[data-theme="light"] .spx-nav-v21.is-open .site-nav{background:#fff}
  .spx-nav-v21 .nav-group-mega .mega-menu{
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    margin-top:8px;
  }
  .spx-nav-v21 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .spx-hero-v21{
    min-height:auto;
    padding:118px 18px 148px;
  }
  .spx-v21-copy{max-width:100%}
  .spx-v21-copy h1{
    font-size:clamp(52px,16vw,80px);
  }
  .spx-v21-actions{display:grid}
  .v21-product-atmosphere{
    position:relative;
    right:auto;
    top:auto;
    width:100%;
    height:310px;
    margin-top:38px;
    opacity:.70;
    transform:none;
  }
  .spx-v21-shell{display:block}
  .layer-settings{right:5%;top:8%;width:35%;height:74%}
  .layer-export{left:7%;right:7%;height:44%;bottom:6%}
  .layer-add{left:2%;top:10%;width:40%;height:72%}
  .v21-product-label{display:none}
  .spx-nav-v21 .nav-actions .btn.primary,
  .spx-nav-v21 .nav-actions .btn.ghost{display:none}
  .spx-nav-v21 .nav-panel-columns{grid-template-columns:1fr}
  .spx-nav-v21 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}
}
@media(prefers-reduced-motion:reduce){
  .spx-v21-sky::before,
  .spx-v21-sky::after,
  .v21-cloud,
  .v21-grid-plane,
  .v21-light-trace,
  .v21-product-layer{animation:none!important}
  .layer-settings{opacity:.80!important;transform:none!important}
}


/* ==========================================================================
   A8.22 — centered cinematic product background, stronger but subtler balance
   ========================================================================== */

.spx-nav-v21,
.spx-nav-v20,
.spx-nav-v19,
.spx-nav-v18,
.spx-nav-v17,
.spx-nav-v16,
.spx-nav-v15,
.spx-hero-v21,
.spx-hero-v20,
.spx-hero-v19,
.spx-hero-v18,
.spx-hero-v17,
.spx-hero-v16,
.spx-hero-v15,
.spx-hero-v13,
.spx-hero-v12,
.hero.spx-aurora-hero{display:none!important}

/* Navigator: transparent at the top, blur only when needed, less blocky buttons. */
.spx-nav-v22{
  display:grid!important;
  position:fixed;
  top:0;left:0;right:0;
  z-index:150;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,3vw,42px);
  align-items:center;
  padding:24px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), backdrop-filter .28s var(--ease);
}
.spx-nav-v22.is-scrolled,
.spx-nav-v22.is-open,
.spx-nav-v22:focus-within{
  padding-top:14px;
  padding-bottom:14px;
  background:rgba(3,8,17,.76)!important;
  border-bottom-color:rgba(218,236,255,.11);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 18px 64px rgba(0,0,0,.22);
}
html[data-theme="light"] .spx-nav-v22.is-scrolled,
html[data-theme="light"] .spx-nav-v22.is-open,
html[data-theme="light"] .spx-nav-v22:focus-within{
  background:rgba(246,248,252,.84)!important;
  border-bottom-color:rgba(15,23,42,.09);
  box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v22 .brand{gap:10px;padding:0;background:transparent}
.spx-nav-v22 .brand img{width:38px;height:38px;border-radius:8px}
.spx-nav-v22 .brand span{font-weight:960;letter-spacing:-.045em}
.spx-nav-v22 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(18px,2.6vw,34px);
  padding:0;border:0;background:transparent;box-shadow:none;
}
.spx-nav-v22 .site-nav>a,
.spx-nav-v22 .nav-group>a{
  position:relative;
  padding:7px 0;
  color:var(--text-soft);
  background:transparent;border:0;border-radius:0;
  font-weight:900;font-size:14px;letter-spacing:-.01em;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v22 .site-nav>a::after,
.spx-nav-v22 .nav-group>a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
  box-shadow:0 0 16px rgba(24,201,245,.36);
}
.spx-nav-v22 .site-nav>a:hover,
.spx-nav-v22 .nav-group:hover>a,
.spx-nav-v22 .nav-group>a:focus-visible{color:var(--text);transform:translateY(-1px)}
.spx-nav-v22 .site-nav>a:hover::after,
.spx-nav-v22 .nav-group:hover>a::after,
.spx-nav-v22 .nav-group>a:focus-visible::after{transform:scaleX(1)}
.spx-nav-v22 .nav-home-link::before{display:none!important}
.spx-nav-v22 .nav-actions{display:flex;align-items:center;gap:10px}
.spx-nav-v22 .nav-actions .btn{
  min-height:38px;padding:8px 14px;font-weight:930;border-radius:999px;
}
.spx-nav-v22 .nav-actions .btn.ghost{
  background:transparent;border-color:transparent;box-shadow:none;color:var(--text-soft);
}
.spx-nav-v22 .nav-actions .btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}
.spx-nav-v22 .nav-actions .btn.primary{
  background:linear-gradient(135deg,rgba(7,143,194,.92),rgba(37,99,235,.92) 64%,rgba(24,201,245,.95));
  box-shadow:0 14px 42px rgba(14,165,233,.20), inset 0 1px 0 rgba(255,255,255,.16);
  border:1px solid rgba(125,220,255,.18);
}
html[data-theme="light"] .spx-nav-v22 .nav-actions .btn.ghost:hover{background:rgba(15,23,42,.04)}

.spx-nav-v22 .spx-theme-switch{
  min-height:38px;display:inline-flex;align-items:center;gap:9px;
  padding:7px 10px 7px 7px;border-radius:999px;
  border:1px solid rgba(218,236,255,.14);background:rgba(255,255,255,.055);
  color:var(--text-soft);font-weight:900;line-height:1;
}
html[data-theme="light"] .spx-nav-v22 .spx-theme-switch{background:rgba(255,255,255,.68);border-color:rgba(15,23,42,.10)}
.spx-nav-v22 .spx-theme-switch .switch-track{position:relative;width:48px;height:26px;border-radius:999px;background:linear-gradient(135deg,#111827,#0b1220);border:1px solid rgba(218,236,255,.12);box-shadow:inset 0 1px 5px rgba(0,0,0,.28)}
.spx-nav-v22 .spx-theme-switch .switch-track i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#93c5fd 55%,#2563eb);box-shadow:0 0 16px rgba(147,197,253,.38);transition:transform .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease)}
html[data-theme="light"] .spx-nav-v22 .spx-theme-switch .switch-track{background:linear-gradient(135deg,#e0f2fe,#f8fafc);border-color:rgba(14,165,233,.18)}
html[data-theme="light"] .spx-nav-v22 .spx-theme-switch .switch-track i{transform:translateX(22px);background:radial-gradient(circle at 35% 35%,#fff7cc,#facc15 58%,#f59e0b);box-shadow:0 0 18px rgba(245,158,11,.32)}
.spx-nav-v22 .spx-theme-switch .switch-label{min-width:36px;text-align:left;font-size:12px}

.spx-nav-v22 .nav-group-mega .mega-menu{
  width:min(980px,calc(100vw - 42px));padding:0;border-radius:0;
  border:1px solid rgba(107,232,255,.18);background:rgba(5,11,23,.96);
  box-shadow:0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);overflow:hidden;
}
html[data-theme="light"] .spx-nav-v22 .nav-group-mega .mega-menu{background:rgba(255,255,255,.96);border-color:rgba(15,23,42,.10);box-shadow:0 30px 80px rgba(22,34,64,.16)}
.spx-nav-v22 .nav-group-mega .mega-menu::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(2,6,23,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
html[data-theme="light"] .spx-nav-v22 .nav-group-mega .mega-menu::before{background:rgba(246,248,252,.28)}
.spx-nav-v22 .nav-panel-lead{display:grid;gap:8px;padding:22px 24px;border-bottom:1px solid rgba(218,236,255,.10);background:linear-gradient(90deg,rgba(24,201,245,.10),rgba(37,99,235,.05),transparent 70%)}
.spx-nav-v22 .nav-panel-lead span{color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:950}
.spx-nav-v22 .nav-panel-lead strong{max-width:720px;color:var(--text);font-size:clamp(24px,2vw,34px);line-height:1.05;letter-spacing:-.06em}
.spx-nav-v22 .nav-panel-lead small{max-width:640px;color:var(--secondary);font-weight:760}
.spx-nav-v22 .nav-panel-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.spx-nav-v22 .nav-panel-columns a{min-height:154px;padding:22px;border-right:1px solid rgba(218,236,255,.09);color:var(--secondary);background:transparent;transition:background .2s var(--ease), transform .2s var(--ease)}
.spx-nav-v22 .nav-panel-columns a:last-child{border-right:0}
.spx-nav-v22 .nav-panel-columns a:hover{background:rgba(24,201,245,.075);transform:translateY(-2px)}
.spx-nav-v22 .nav-panel-columns b{display:block;color:var(--text);font-size:15px}
.spx-nav-v22 .nav-panel-columns span{display:block;margin-top:8px;font-size:13px;line-height:1.4}

/* Hero: centered cinematic product background, subtle but still visible. */
.spx-hero-v22{
  display:block!important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:clamp(900px,104svh,1180px);
  padding:clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px);
  color:var(--text);
  background:#02050d;
}
html[data-theme="light"] .spx-hero-v22{background:#eef6ff}
.spx-hero-v22 .spx-hero-space{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;
  background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.15),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(24,201,245,.10),transparent 68%),linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v22 .spx-hero-space{
  background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.10),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(14,165,233,.08),transparent 68%),linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}
.spx-v22-sky{position:absolute;inset:-10% -8%;z-index:1;pointer-events:none;overflow:hidden}
.spx-v22-sky::before{
  content:"";position:absolute;left:-8%;right:-8%;top:2%;height:92%;
  background:linear-gradient(112deg,transparent 0 30%,rgba(37,99,235,.04) 38%,rgba(24,201,245,.12) 45%,rgba(210,244,255,.17) 49%,rgba(82,181,230,.10) 54%,rgba(48,86,180,.05) 62%,transparent 73% 100%),radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);
  filter:blur(24px) saturate(125%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v22-x,0px) * .10),calc(var(--spx-v22-y,0px) * .08),0);
  opacity:.64;animation:spxV22Galaxy 30s ease-in-out infinite alternate;
}
.spx-v22-sky::after{
  content:"";position:absolute;inset:7% 0 0;
  background:linear-gradient(rgba(107,232,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.038) 1px,transparent 1px);
  background-size:72px 72px;
  transform:perspective(900px) rotateX(62deg) translate3d(calc(var(--spx-v22-x,0px) * .18),calc(var(--spx-v22-y,0px) * .10),0);
  transform-origin:center bottom;opacity:.26;animation:spxV22GridDrift 18s linear infinite;
  mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 76%,transparent 100%);
}
html[data-theme="light"] .spx-v22-sky::after{opacity:.18}
.v22-cloud{position:absolute;display:block;border-radius:999px;opacity:.30;filter:blur(54px);transform:translate3d(calc(var(--spx-v22-x,0px) * .13),calc(var(--spx-v22-y,0px) * .10),0);animation:spxV22Cloud 15s ease-in-out infinite alternate}
.v22-cloud.cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.v22-cloud.cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.v22-cloud.cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.v22-horizon{position:absolute;left:6%;right:6%;bottom:19%;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.32),transparent);box-shadow:0 0 48px rgba(24,201,245,.24)}
.v22-grid-plane{position:absolute;left:3%;right:3%;bottom:0;height:38%;background:linear-gradient(rgba(107,232,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.040) 1px,transparent 1px);background-size:64px 64px;transform:perspective(900px) rotateX(66deg);transform-origin:center bottom;opacity:.16;animation:spxV22GridDrift 20s linear infinite reverse;mask-image:linear-gradient(180deg,transparent 0%,black 30%,transparent 100%)}
.v22-light-trace{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.52),transparent);opacity:.28;filter:blur(.2px);animation:spxV22Trace 10s linear infinite}
.v22-light-trace.trace-a{left:48%;width:22%;top:28%;animation-delay:-1s}
.v22-light-trace.trace-b{right:8%;width:18%;top:64%;animation-delay:-6s}

/* Product visuals are centered in the atmosphere, not pushed to the right. */
.v22-product-atmosphere{
  position:absolute;
  left:50%;
  top:56%;
  width:min(1080px,74vw);
  height:min(650px,46vw);
  z-index:2;
  transform:translate(-18%,-18%) perspective(1550px) rotateY(-9deg) rotateX(5deg) translate3d(calc(var(--spx-v22-x,0px) * .20),calc(var(--spx-v22-y,0px) * .14),0);
  transform-origin:center;
  opacity:.64;
  filter:drop-shadow(0 46px 120px rgba(0,0,0,.34));
}
.v22-product-atmosphere::before{
  content:"";
  position:absolute;
  inset:-10%;
  background:radial-gradient(circle at 50% 50%,rgba(24,201,245,.16),transparent 62%);
  filter:blur(26px);
  opacity:.62;
}
.v22-product-atmosphere::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,5,13,.86) 0%,rgba(2,5,13,.58) 12%,rgba(2,5,13,.20) 30%,rgba(2,5,13,.08) 52%,rgba(2,5,13,.18) 75%,rgba(2,5,13,.66) 100%),
    linear-gradient(180deg,rgba(2,5,13,.26),rgba(2,5,13,.06) 22%,rgba(2,5,13,.18) 78%,rgba(2,5,13,.46));
  box-shadow:inset 0 0 0 1px rgba(107,232,255,.06);
}
html[data-theme="light"] .v22-product-atmosphere::after{
  background:
    linear-gradient(90deg,rgba(238,246,255,.78) 0%,rgba(238,246,255,.44) 14%,rgba(238,246,255,.12) 32%,rgba(238,246,255,.06) 52%,rgba(238,246,255,.12) 76%,rgba(238,246,255,.48) 100%),
    linear-gradient(180deg,rgba(238,246,255,.22),rgba(238,246,255,.05) 22%,rgba(238,246,255,.12) 78%,rgba(238,246,255,.34));
}
.v22-builder-base{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  border:1px solid rgba(107,232,255,.16);
  opacity:.86;
  filter:saturate(1.04) contrast(1.03);
  clip-path:polygon(4% 0,100% 0,100% 92%,92% 100%,0 100%,0 7%);
}
.v22-product-layer{
  position:absolute;
  z-index:5;
  border:1px solid rgba(107,232,255,.22);
  background:#050b17;
  box-shadow:0 24px 72px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.03) inset;
  overflow:hidden;
}
.v22-product-layer.layer-settings{
  right:7.2%;
  top:8.8%;
  width:30%;
  height:72%;
  opacity:.72;
  transform:translateY(0) scale(1);
}
.v22-product-layer.layer-settings img,
.v22-product-layer.layer-export img,
.v22-product-layer.layer-add img{
  display:block;
  width:100%;
  height:100%;
}
.v22-product-layer.layer-settings img{object-fit:cover;object-position:center top}
.v22-product-layer.layer-add{
  left:3.8%;
  top:8.2%;
  width:33%;
  height:73%;
  opacity:0;
  transform:translateY(18px) scale(.985);
  animation:spxV22LayerAdd 12s ease-in-out infinite;
}
.v22-product-layer.layer-add img{object-fit:cover;object-position:left top}
.v22-product-layer.layer-export{
  left:11%;
  right:9%;
  bottom:7%;
  width:auto;
  height:44%;
  opacity:0;
  transform:translateY(18px) scale(.985);
  animation:spxV22LayerExport 12s ease-in-out infinite;
}
.v22-product-layer.layer-export img{object-fit:cover;object-position:center top}

.spx-v22-shell{
  position:relative;
  z-index:6;
  width:min(1340px,100%);
  margin:0 auto;
  display:grid;
  justify-items:start;
  text-align:left;
}
.spx-v22-copy{max-width:min(700px,60vw)}
.spx-v22-kicker{
  display:inline-flex;align-items:center;padding:8px 11px;border:1px solid rgba(107,232,255,.20);border-radius:7px;background:rgba(24,201,245,.08);color:#bff4ff;font-size:11px;line-height:1;font-weight:950;letter-spacing:.12em;text-transform:uppercase
}
html[data-theme="light"] .spx-v22-kicker{color:#075985;background:rgba(14,165,233,.09);border-color:rgba(14,165,233,.20)}
.spx-v22-copy h1{
  margin:20px 0 0;max-width:920px;font-size:clamp(66px,9.5vw,154px);line-height:.82;letter-spacing:-.11em;text-wrap:balance
}
.spx-v22-copy h1::after{
  content:"";display:block;width:min(380px,46%);height:2px;margin-top:30px;background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);box-shadow:0 0 26px rgba(24,201,245,.42)
}
.spx-v22-lead{
  margin:24px 0 0;max-width:590px;color:var(--text-soft);font-size:clamp(18px,1.35vw,23px);line-height:1.52
}
.spx-v22-lead strong{color:var(--text);font-weight:950}
.spx-v22-actions{justify-content:flex-start;display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.spx-v22-actions .btn{border-radius:999px}

.spx-v22-bottom-fade{
  position:absolute;left:0;right:0;bottom:-1px;z-index:3;height:300px;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.24) 36%,rgba(7,17,31,.84) 72%,var(--bg-2) 100%);
}
html[data-theme="light"] .spx-v22-bottom-fade{
  background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.88) 72%,#eef3fa 100%);
}
.spx-hero-v22 + .section.intro{margin-top:-58px;position:relative;z-index:5}

@keyframes spxV22Galaxy{
  from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.56}
  to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.70}
}
@keyframes spxV22Cloud{
  from{opacity:.22;filter:blur(48px)}
  to{opacity:.38;filter:blur(58px)}
}
@keyframes spxV22GridDrift{
  from{background-position:0 0,0 0}
  to{background-position:72px 72px,72px 72px}
}
@keyframes spxV22Trace{
  from{transform:translateX(-28px);opacity:0}
  20%{opacity:.32}
  80%{opacity:.32}
  to{transform:translateX(28px);opacity:0}
}
@keyframes spxV22LayerAdd{
  0%,8%{opacity:0;transform:translateY(18px) scale(.985)}
  14%,34%{opacity:.78;transform:translateY(0) scale(1)}
  40%,100%{opacity:0;transform:translateY(-10px) scale(.985)}
}
@keyframes spxV22LayerExport{
  0%,54%{opacity:0;transform:translateY(18px) scale(.985)}
  60%,80%{opacity:.82;transform:translateY(0) scale(1)}
  86%,100%{opacity:0;transform:translateY(-10px) scale(.985)}
}

@media(max-width:1200px){
  .v22-product-atmosphere{
    width:980px;
    height:590px;
    transform:translate(-22%,-16%) perspective(1450px) rotateY(-8deg) rotateX(4deg) translate3d(calc(var(--spx-v22-x,0px) * .16),calc(var(--spx-v22-y,0px) * .12),0);
    opacity:.56;
  }
  .spx-v22-copy{max-width:760px}
}
@media(max-width:1120px){
  .spx-nav-v22{grid-template-columns:auto auto 1fr}
  .spx-nav-v22 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v22 .site-nav{display:none}
  .spx-nav-v22.is-open .site-nav{
    display:grid;position:absolute;left:18px;right:18px;top:calc(100% + 10px);justify-content:stretch;gap:6px;padding:16px;border:1px solid rgba(218,236,255,.10);background:#050b17
  }
  html[data-theme="light"] .spx-nav-v22.is-open .site-nav{background:#fff}
  .spx-nav-v22 .nav-group-mega .mega-menu{position:static;width:100%;opacity:1;visibility:visible;transform:none;margin-top:8px}
  .spx-nav-v22 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .v22-product-atmosphere{
    left:50%;
    top:64%;
    width:min(720px,92vw);
    height:min(430px,54vw);
    transform:translate(-50%,-10%) perspective(1200px) rotateY(-5deg) rotateX(3deg);
    opacity:.60;
  }
  .spx-v22-copy{max-width:100%}
}
@media(max-width:760px){
  .spx-hero-v22{min-height:auto;padding:118px 18px 148px}
  .spx-v22-copy h1{font-size:clamp(52px,16vw,80px)}
  .spx-v22-actions{display:grid}
  .v22-product-atmosphere{
    top:auto;bottom:8%;
    width:100%;
    height:280px;
    transform:translate(-50%,0) perspective(1000px) rotateY(-4deg) rotateX(3deg);
    opacity:.56;
  }
  .spx-nav-v22 .nav-actions .btn.primary,.spx-nav-v22 .nav-actions .btn.ghost{display:none}
  .spx-nav-v22 .nav-panel-columns{grid-template-columns:1fr}
  .spx-nav-v22 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}
}
@media(prefers-reduced-motion:reduce){
  .spx-v22-sky::before,.spx-v22-sky::after,.v22-cloud,.v22-grid-plane,.v22-light-trace,.v22-product-layer.layer-add,.v22-product-layer.layer-export{animation:none!important}
  .v22-product-layer.layer-add,.v22-product-layer.layer-export{opacity:0!important}
}


/* A8.22 object-fit correction for image layers */
.v22-product-layer{display:block;width:100%;height:100%}
.v22-product-layer.layer-settings{object-fit:cover;object-position:center top}
.v22-product-layer.layer-add{object-fit:cover;object-position:left top}
.v22-product-layer.layer-export{object-fit:cover;object-position:center top}


/* ==========================================================================
   A8.24 — revert to the previous placement, raise the right side, avoid clipping
   ========================================================================== */
.spx-nav-v24{
  display:grid!important;position:fixed;top:0;left:0;right:0;z-index:150;
  grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,42px);align-items:center;
  padding:24px var(--side);background:transparent!important;border-bottom:1px solid transparent;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), backdrop-filter .28s var(--ease);
}
.spx-nav-v24.is-scrolled,.spx-nav-v24.is-open,.spx-nav-v24:focus-within{
  padding-top:14px;padding-bottom:14px;background:rgba(3,8,17,.76)!important;border-bottom-color:rgba(218,236,255,.11);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);box-shadow:0 18px 64px rgba(0,0,0,.22);
}
html[data-theme="light"] .spx-nav-v24.is-scrolled,html[data-theme="light"] .spx-nav-v24.is-open,html[data-theme="light"] .spx-nav-v24:focus-within{
  background:rgba(246,248,252,.84)!important;border-bottom-color:rgba(15,23,42,.09);box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v24 .brand{gap:10px;padding:0;background:transparent}.spx-nav-v24 .brand img{width:38px;height:38px;border-radius:8px}.spx-nav-v24 .brand span{font-weight:960;letter-spacing:-.045em}
.spx-nav-v24 .site-nav{justify-self:center;display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);padding:0;border:0;background:transparent;box-shadow:none}
.spx-nav-v24 .site-nav>a,.spx-nav-v24 .nav-group>a{position:relative;padding:7px 0;color:var(--text-soft);background:transparent;border:0;border-radius:0;font-weight:900;font-size:14px;letter-spacing:-.01em;transition:color .2s var(--ease), transform .2s var(--ease)}
.spx-nav-v24 .site-nav>a::after,.spx-nav-v24 .nav-group>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#18c9f5,#2563eb);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);box-shadow:0 0 16px rgba(24,201,245,.36)}
.spx-nav-v24 .site-nav>a:hover,.spx-nav-v24 .nav-group:hover>a,.spx-nav-v24 .nav-group>a:focus-visible{color:var(--text);transform:translateY(-1px)}
.spx-nav-v24 .site-nav>a:hover::after,.spx-nav-v24 .nav-group:hover>a::after,.spx-nav-v24 .nav-group>a:focus-visible::after{transform:scaleX(1)}
.spx-nav-v24 .nav-home-link::before{display:none!important}
.spx-nav-v24 .nav-actions{display:flex;align-items:center;gap:10px}.spx-nav-v24 .nav-actions .btn{min-height:38px;padding:8px 14px;font-weight:930;border-radius:999px}
.spx-nav-v24 .nav-actions .btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--text-soft)}
.spx-nav-v24 .nav-actions .btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}
.spx-nav-v24 .nav-actions .btn.primary{background:linear-gradient(135deg,rgba(7,143,194,.92),rgba(37,99,235,.92) 64%,rgba(24,201,245,.95));box-shadow:0 14px 42px rgba(14,165,233,.20), inset 0 1px 0 rgba(255,255,255,.16);border:1px solid rgba(125,220,255,.18)}
html[data-theme="light"] .spx-nav-v24 .nav-actions .btn.ghost:hover{background:rgba(15,23,42,.04)}
.spx-nav-v24 .spx-theme-switch{min-height:38px;display:inline-flex;align-items:center;gap:9px;padding:7px 10px 7px 7px;border-radius:999px;border:1px solid rgba(218,236,255,.14);background:rgba(255,255,255,.055);color:var(--text-soft);font-weight:900;line-height:1}
html[data-theme="light"] .spx-nav-v24 .spx-theme-switch{background:rgba(255,255,255,.68);border-color:rgba(15,23,42,.10)}
.spx-nav-v24 .spx-theme-switch .switch-track{position:relative;width:48px;height:26px;border-radius:999px;background:linear-gradient(135deg,#111827,#0b1220);border:1px solid rgba(218,236,255,.12);box-shadow:inset 0 1px 5px rgba(0,0,0,.28)}
.spx-nav-v24 .spx-theme-switch .switch-track i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#93c5fd 55%,#2563eb);box-shadow:0 0 16px rgba(147,197,253,.38);transition:transform .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease)}
html[data-theme="light"] .spx-nav-v24 .spx-theme-switch .switch-track{background:linear-gradient(135deg,#e0f2fe,#f8fafc);border-color:rgba(14,165,233,.18)}
html[data-theme="light"] .spx-nav-v24 .spx-theme-switch .switch-track i{transform:translateX(22px);background:radial-gradient(circle at 35% 35%,#fff7cc,#facc15 58%,#f59e0b);box-shadow:0 0 18px rgba(245,158,11,.32)}
.spx-nav-v24 .spx-theme-switch .switch-label{min-width:36px;text-align:left;font-size:12px}
.spx-nav-v24 .nav-group-mega .mega-menu{width:min(980px,calc(100vw - 42px));padding:0;border-radius:0;border:1px solid rgba(107,232,255,.18);background:rgba(5,11,23,.96);box-shadow:0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);overflow:hidden}
html[data-theme="light"] .spx-nav-v24 .nav-group-mega .mega-menu{background:rgba(255,255,255,.96);border-color:rgba(15,23,42,.10);box-shadow:0 30px 80px rgba(22,34,64,.16)}
.spx-nav-v24 .nav-group-mega .mega-menu::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(2,6,23,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
html[data-theme="light"] .spx-nav-v24 .nav-group-mega .mega-menu::before{background:rgba(246,248,252,.28)}
.spx-nav-v24 .nav-panel-lead{display:grid;gap:8px;padding:22px 24px;border-bottom:1px solid rgba(218,236,255,.10);background:linear-gradient(90deg,rgba(24,201,245,.10),rgba(37,99,235,.05),transparent 70%)}
.spx-nav-v24 .nav-panel-lead span{color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:950}.spx-nav-v24 .nav-panel-lead strong{max-width:720px;color:var(--text);font-size:clamp(24px,2vw,34px);line-height:1.05;letter-spacing:-.06em}.spx-nav-v24 .nav-panel-lead small{max-width:640px;color:var(--secondary);font-weight:760}
.spx-nav-v24 .nav-panel-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.spx-nav-v24 .nav-panel-columns a{min-height:154px;padding:22px;border-right:1px solid rgba(218,236,255,.09);color:var(--secondary);background:transparent;transition:background .2s var(--ease), transform .2s var(--ease)}.spx-nav-v24 .nav-panel-columns a:last-child{border-right:0}.spx-nav-v24 .nav-panel-columns a:hover{background:rgba(24,201,245,.075);transform:translateY(-2px)}.spx-nav-v24 .nav-panel-columns b{display:block;color:var(--text);font-size:15px}.spx-nav-v24 .nav-panel-columns span{display:block;margin-top:8px;font-size:13px;line-height:1.4}

.spx-hero-v24{display:block!important;position:relative;overflow:hidden;isolation:isolate;min-height:clamp(900px,104svh,1180px);padding:clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px);color:var(--text);background:#02050d}
html[data-theme="light"] .spx-hero-v24{background:#eef6ff}
.spx-hero-v24 .spx-hero-space{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.15),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(24,201,245,.10),transparent 68%),linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%)}
html[data-theme="light"] .spx-hero-v24 .spx-hero-space{background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.10),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(14,165,233,.08),transparent 68%),linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%)}
.spx-v24-sky{position:absolute;inset:-10% -8%;z-index:1;pointer-events:none;overflow:hidden}
.spx-v24-sky::before{content:"";position:absolute;left:-8%;right:-8%;top:2%;height:92%;background:linear-gradient(112deg,transparent 0 30%,rgba(37,99,235,.04) 38%,rgba(24,201,245,.12) 45%,rgba(210,244,255,.17) 49%,rgba(82,181,230,.10) 54%,rgba(48,86,180,.05) 62%,transparent 73% 100%),radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);filter:blur(24px) saturate(125%);transform:rotate(-18deg) translate3d(calc(var(--spx-v24-x,0px) * .10),calc(var(--spx-v24-y,0px) * .08),0);opacity:.64;animation:spxV24Galaxy 30s ease-in-out infinite alternate}
.spx-v24-sky::after{content:"";position:absolute;inset:7% 0 0;background:linear-gradient(rgba(107,232,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.038) 1px,transparent 1px);background-size:72px 72px;transform:perspective(900px) rotateX(62deg) translate3d(calc(var(--spx-v24-x,0px) * .18),calc(var(--spx-v24-y,0px) * .10),0);transform-origin:center bottom;opacity:.26;animation:spxV24GridDrift 18s linear infinite;mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 76%,transparent 100%)}
html[data-theme="light"] .spx-v24-sky::after{opacity:.18}
.v24-cloud{position:absolute;display:block;border-radius:999px;opacity:.30;filter:blur(54px);transform:translate3d(calc(var(--spx-v24-x,0px) * .13),calc(var(--spx-v24-y,0px) * .10),0);animation:spxV24Cloud 15s ease-in-out infinite alternate}
.v24-cloud.cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.v24-cloud.cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.v24-cloud.cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.v24-horizon{position:absolute;left:6%;right:6%;bottom:19%;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.32),transparent);box-shadow:0 0 48px rgba(24,201,245,.24)}
.v24-grid-plane{position:absolute;left:3%;right:3%;bottom:0;height:38%;background:linear-gradient(rgba(107,232,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.040) 1px,transparent 1px);background-size:64px 64px;transform:perspective(900px) rotateX(66deg);transform-origin:center bottom;opacity:.16;animation:spxV24GridDrift 20s linear infinite reverse;mask-image:linear-gradient(180deg,transparent 0%,black 30%,transparent 100%)}
.v24-light-trace{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.52),transparent);opacity:.28;filter:blur(.2px);animation:spxV24Trace 10s linear infinite}.v24-light-trace.trace-a{left:48%;width:22%;top:28%;animation-delay:-1s}.v24-light-trace.trace-b{right:8%;width:18%;top:64%;animation-delay:-6s}

/* previous placement, but raised slightly; no image clipping */
.v24-product-atmosphere{position:absolute;left:50%;top:52%;width:min(1080px,74vw);height:min(650px,46vw);z-index:2;transform:translate(-18%,-18%) perspective(1550px) rotateY(-9deg) rotateX(5deg) translate3d(calc(var(--spx-v24-x,0px) * .20),calc(var(--spx-v24-y,0px) * .14),0);transform-origin:center;opacity:.64;filter:drop-shadow(0 46px 120px rgba(0,0,0,.34))}
.v24-product-atmosphere::before{content:"";position:absolute;inset:-10%;background:radial-gradient(circle at 50% 50%,rgba(24,201,245,.16),transparent 62%);filter:blur(26px);opacity:.62}
.v24-product-atmosphere::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(90deg,rgba(2,5,13,.86) 0%,rgba(2,5,13,.58) 12%,rgba(2,5,13,.20) 30%,rgba(2,5,13,.08) 52%,rgba(2,5,13,.18) 75%,rgba(2,5,13,.66) 100%),linear-gradient(180deg,rgba(2,5,13,.26),rgba(2,5,13,.06) 22%,rgba(2,5,13,.18) 78%,rgba(2,5,13,.46));box-shadow:inset 0 0 0 1px rgba(107,232,255,.06)}
html[data-theme="light"] .v24-product-atmosphere::after{background:linear-gradient(90deg,rgba(238,246,255,.78) 0%,rgba(238,246,255,.44) 14%,rgba(238,246,255,.12) 32%,rgba(238,246,255,.06) 52%,rgba(238,246,255,.12) 76%,rgba(238,246,255,.48) 100%),linear-gradient(180deg,rgba(238,246,255,.22),rgba(238,246,255,.05) 22%,rgba(238,246,255,.12) 78%,rgba(238,246,255,.34))}
.v24-builder-base{position:absolute;inset:2% 3%;width:auto;height:auto;object-fit:contain;object-position:center top;border:1px solid rgba(107,232,255,.16);opacity:.88;filter:saturate(1.04) contrast(1.03);clip-path:none;background:rgba(5,11,23,.50);padding:6px;box-shadow:0 20px 64px rgba(0,0,0,.16)}
.v24-product-layer{position:absolute;z-index:5;border:1px solid rgba(107,232,255,.22);background:rgba(5,11,23,.88);box-shadow:0 24px 72px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.03) inset;overflow:hidden;padding:6px}
.v24-product-layer.layer-settings{right:6.6%;top:4.2%;width:30%;height:74%;opacity:.74;transform:translateY(0) scale(1)}
.v24-product-layer.layer-settings,
.v24-product-layer.layer-add,
.v24-product-layer.layer-export{display:block;object-fit:contain;background:rgba(5,11,23,.84)}
.v24-product-layer.layer-add{left:3.4%;top:7.2%;width:33%;height:75%;opacity:0;transform:translateY(18px) scale(.985);animation:spxV24LayerAdd 12s ease-in-out infinite}
/* export is detached from the builder, positioned more like a dashboard scene */
.v24-product-layer.layer-export{right:2%;left:auto;bottom:-1.5%;width:38%;height:36%;opacity:0;transform:translateY(18px) scale(.985);animation:spxV24LayerExport 12s ease-in-out infinite}

.spx-v24-shell{position:relative;z-index:6;width:min(1340px,100%);margin:0 auto;display:grid;justify-items:start;text-align:left}.spx-v24-copy{max-width:min(700px,60vw)}
.spx-v24-kicker{display:inline-flex;align-items:center;padding:8px 11px;border:1px solid rgba(107,232,255,.20);border-radius:7px;background:rgba(24,201,245,.08);color:#bff4ff;font-size:11px;line-height:1;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
html[data-theme="light"] .spx-v24-kicker{color:#075985;background:rgba(14,165,233,.09);border-color:rgba(14,165,233,.20)}
.spx-v24-copy h1{margin:20px 0 0;max-width:920px;font-size:clamp(66px,9.5vw,154px);line-height:.82;letter-spacing:-.11em;text-wrap:balance}.spx-v24-copy h1::after{content:"";display:block;width:min(380px,46%);height:2px;margin-top:30px;background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);box-shadow:0 0 26px rgba(24,201,245,.42)}
.spx-v24-lead{margin:24px 0 0;max-width:590px;color:var(--text-soft);font-size:clamp(18px,1.35vw,23px);line-height:1.52}.spx-v24-lead strong{color:var(--text);font-weight:950}.spx-v24-actions{justify-content:flex-start;display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.spx-v24-actions .btn{border-radius:999px}
.spx-v24-bottom-fade{position:absolute;left:0;right:0;bottom:-1px;z-index:3;height:300px;pointer-events:none;background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.24) 36%,rgba(7,17,31,.84) 72%,var(--bg-2) 100%)}
html[data-theme="light"] .spx-v24-bottom-fade{background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.88) 72%,#eef3fa 100%)}
.spx-hero-v24 + .section.intro{margin-top:-58px;position:relative;z-index:5}

@keyframes spxV24Galaxy{from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.56}to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.70}}
@keyframes spxV24Cloud{from{opacity:.22;filter:blur(48px)}to{opacity:.38;filter:blur(58px)}}
@keyframes spxV24GridDrift{from{background-position:0 0,0 0}to{background-position:72px 72px,72px 72px}}
@keyframes spxV24Trace{from{transform:translateX(-28px);opacity:0}20%{opacity:.32}80%{opacity:.32}to{transform:translateX(28px);opacity:0}}
@keyframes spxV24LayerAdd{0%,8%{opacity:0;transform:translateY(18px) scale(.985)}14%,34%{opacity:.78;transform:translateY(0) scale(1)}40%,100%{opacity:0;transform:translateY(-10px) scale(.985)}}
@keyframes spxV24LayerExport{0%,54%{opacity:0;transform:translateY(18px) scale(.985)}60%,80%{opacity:.82;transform:translateY(0) scale(1)}86%,100%{opacity:0;transform:translateY(-10px) scale(.985)}}

@media(max-width:1200px){.v24-product-atmosphere{width:980px;height:590px;top:55%;transform:translate(-22%,-16%) perspective(1450px) rotateY(-8deg) rotateX(4deg) translate3d(calc(var(--spx-v24-x,0px) * .16),calc(var(--spx-v24-y,0px) * .12),0);opacity:.56}.spx-v24-copy{max-width:760px}}
@media(max-width:1120px){.spx-nav-v24{grid-template-columns:auto auto 1fr}.spx-nav-v24 .nav-toggle{display:block;order:3;justify-self:end}.spx-nav-v24 .site-nav{display:none}.spx-nav-v24.is-open .site-nav{display:grid;position:absolute;left:18px;right:18px;top:calc(100% + 10px);justify-content:stretch;gap:6px;padding:16px;border:1px solid rgba(218,236,255,.10);background:#050b17}html[data-theme="light"] .spx-nav-v24.is-open .site-nav{background:#fff}.spx-nav-v24 .nav-group-mega .mega-menu{position:static;width:100%;opacity:1;visibility:visible;transform:none;margin-top:8px}.spx-nav-v24 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.v24-product-atmosphere{left:50%;top:64%;width:min(720px,92vw);height:min(430px,54vw);transform:translate(-50%,-10%) perspective(1200px) rotateY(-5deg) rotateX(3deg);opacity:.60}.spx-v24-copy{max-width:100%}.v24-product-layer.layer-export{right:4%;width:42%;height:30%;bottom:-2%}}
@media(max-width:760px){.spx-hero-v24{min-height:auto;padding:118px 18px 148px}.spx-v24-copy h1{font-size:clamp(52px,16vw,80px)}.spx-v24-actions{display:grid}.v24-product-atmosphere{top:auto;bottom:8%;width:100%;height:280px;transform:translate(-50%,0) perspective(1000px) rotateY(-4deg) rotateX(3deg);opacity:.56}.v24-product-layer.layer-export{width:56%;height:26%;right:2%;bottom:-1%}.spx-nav-v24 .nav-actions .btn.primary,.spx-nav-v24 .nav-actions .btn.ghost{display:none}.spx-nav-v24 .nav-panel-columns{grid-template-columns:1fr}.spx-nav-v24 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}}
@media(prefers-reduced-motion:reduce){.spx-v24-sky::before,.spx-v24-sky::after,.v24-cloud,.v24-grid-plane,.v24-light-trace,.v24-product-layer.layer-add,.v24-product-layer.layer-export{animation:none!important}.v24-product-layer.layer-add,.v24-product-layer.layer-export{opacity:0!important}}


/* ==========================================================================
   A8.25 — hero balance / clarity tune
   ========================================================================== */

/* Left block: give the copy area more room. */
.spx-v24-shell{width:min(1380px,100%)}
.spx-v24-copy{max-width:min(790px,66vw)}
.spx-v24-copy h1{max-width:1040px}
.spx-v24-lead{max-width:640px}

/* Match the hero primary CTA hover feel to the navigator CTA. */
.spx-nav-v24 .nav-actions .btn.primary,
.spx-v24-actions .btn.primary{
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.spx-nav-v24 .nav-actions .btn.primary:hover,
.spx-v24-actions .btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 52px rgba(14,165,233,.28), inset 0 1px 0 rgba(255,255,255,.22);
  filter:brightness(1.03);
}

/* Right side: move a little higher, make it clearer and calmer. */
.v24-product-atmosphere{
  top:48.8%;
  width:min(1100px,75vw);
  height:min(670px,47vw);
  opacity:.74;
  transform:translate(-18%,-18%) perspective(1550px) rotateY(-7deg) rotateX(4deg) translate3d(calc(var(--spx-v24-x,0px) * .18),calc(var(--spx-v24-y,0px) * .12),0);
}
.v24-product-atmosphere::before{
  opacity:.48;
}
.v24-product-atmosphere::after{
  background:
    linear-gradient(90deg,rgba(2,5,13,.88) 0%,rgba(2,5,13,.62) 12%,rgba(2,5,13,.28) 30%,rgba(2,5,13,.14) 50%,rgba(2,5,13,.18) 72%,rgba(2,5,13,.58) 100%),
    linear-gradient(180deg,rgba(2,5,13,.22),rgba(2,5,13,.06) 22%,rgba(2,5,13,.12) 78%,rgba(2,5,13,.40));
}
html[data-theme="light"] .v24-product-atmosphere::after{
  background:
    linear-gradient(90deg,rgba(238,246,255,.82) 0%,rgba(238,246,255,.56) 14%,rgba(238,246,255,.22) 32%,rgba(238,246,255,.10) 52%,rgba(238,246,255,.14) 76%,rgba(238,246,255,.46) 100%),
    linear-gradient(180deg,rgba(238,246,255,.20),rgba(238,246,255,.06) 22%,rgba(238,246,255,.12) 78%,rgba(238,246,255,.30));
}

/* Base panel clearer, still atmospheric. */
.v24-builder-base{
  inset:1.6% 2.4%;
  opacity:.94;
  padding:8px;
  background:rgba(6,12,25,.74);
  box-shadow:0 22px 72px rgba(0,0,0,.18);
}
html[data-theme="light"] .v24-builder-base{
  background:rgba(255,255,255,.84);
}

/* Panels: less overlap/noisy feel, stronger separation, more readable. */
.v24-product-layer{
  padding:8px;
  border-color:rgba(125,220,255,.24);
  background:rgba(6,12,25,.96);
  box-shadow:0 28px 76px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.04) inset;
}
html[data-theme="light"] .v24-product-layer{
  background:rgba(255,255,255,.95);
  box-shadow:0 22px 58px rgba(22,34,64,.16), 0 0 0 1px rgba(15,23,42,.04) inset;
}
.v24-product-layer.layer-settings{
  right:5.4%;
  top:2.2%;
  width:31%;
  height:75%;
  opacity:.84;
}
.v24-product-layer.layer-add{
  left:2.6%;
  top:6.4%;
  width:32.5%;
  height:74%;
}
.v24-product-layer.layer-export{
  right:0.8%;
  bottom:-3.2%;
  width:35%;
  height:34%;
}

/* Make the animated alternates calmer and clearer. */
@keyframes spxV24LayerAdd{
  0%,10%{opacity:0;transform:translateY(16px) scale(.985)}
  16%,36%{opacity:.68;transform:translateY(0) scale(1)}
  42%,100%{opacity:0;transform:translateY(-8px) scale(.985)}
}
@keyframes spxV24LayerExport{
  0%,56%{opacity:0;transform:translateY(16px) scale(.985)}
  62%,82%{opacity:.76;transform:translateY(0) scale(1)}
  88%,100%{opacity:0;transform:translateY(-8px) scale(.985)}
}

@media(max-width:1200px){
  .spx-v24-copy{max-width:min(760px,68vw)}
  .v24-product-atmosphere{
    top:52.2%;
    width:1000px;
    height:600px;
    opacity:.68;
  }
}
@media(max-width:900px){
  .spx-v24-copy{max-width:100%}
  .v24-product-atmosphere{
    top:61.5%;
    width:min(740px,94vw);
    height:min(450px,56vw);
    opacity:.68;
    transform:translate(-50%,-10%) perspective(1200px) rotateY(-4deg) rotateX(2.5deg);
  }
  .v24-product-layer.layer-settings{right:4%;top:2%;width:32%;height:72%}
  .v24-product-layer.layer-export{width:38%;height:31%;right:2%;bottom:-3%}
}
@media(max-width:760px){
  .spx-v24-copy h1{font-size:clamp(54px,16vw,84px)}
  .spx-v24-lead{max-width:520px}
  .v24-product-atmosphere{
    bottom:9%;
    height:292px;
    opacity:.64;
  }
  .v24-product-layer.layer-settings{right:4%;top:4%;width:31%;height:68%}
  .v24-product-layer.layer-export{right:2%;bottom:-2%;width:48%;height:25%}
}


/* ==========================================================================
   A8.26 — hero message clarity, calmer product side, livelier background
   ========================================================================== */

.spx-nav-v26,
.spx-hero-v26{display:block}

/* Navigator */
.spx-nav-v26{
  display:grid!important;position:fixed;top:0;left:0;right:0;z-index:150;
  grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,42px);align-items:center;
  padding:24px var(--side);background:transparent!important;border-bottom:1px solid transparent;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), backdrop-filter .28s var(--ease);
}
.spx-nav-v26.is-scrolled,.spx-nav-v26.is-open,.spx-nav-v26:focus-within{
  padding-top:14px;padding-bottom:14px;background:rgba(3,8,17,.74)!important;border-bottom-color:rgba(218,236,255,.11);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);box-shadow:0 18px 64px rgba(0,0,0,.22);
}
html[data-theme="light"] .spx-nav-v26.is-scrolled,html[data-theme="light"] .spx-nav-v26.is-open,html[data-theme="light"] .spx-nav-v26:focus-within{
  background:rgba(246,248,252,.86)!important;border-bottom-color:rgba(15,23,42,.09);box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v26 .brand{gap:10px;padding:0;background:transparent}.spx-nav-v26 .brand img{width:38px;height:38px;border-radius:8px}.spx-nav-v26 .brand span{font-weight:960;letter-spacing:-.045em}
.spx-nav-v26 .site-nav{justify-self:center;display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);padding:0;border:0;background:transparent;box-shadow:none}
.spx-nav-v26 .site-nav>a,.spx-nav-v26 .nav-group>a{
  position:relative;padding:8px 0;color:var(--text-soft);background:transparent!important;border:0;border-radius:0;box-shadow:none;
  font-weight:900;font-size:14px;letter-spacing:-.01em;transition:color .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.spx-nav-v26 .site-nav>a::after,.spx-nav-v26 .nav-group>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#18c9f5,#2563eb);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);box-shadow:0 0 16px rgba(24,201,245,.36)}
.spx-nav-v26 .site-nav>a:hover,.spx-nav-v26 .nav-group:hover>a,.spx-nav-v26 .nav-group>a:focus-visible{color:var(--text);transform:translateY(-1px)}
.spx-nav-v26 .site-nav>a:hover::after,.spx-nav-v26 .nav-group:hover>a::after,.spx-nav-v26 .nav-group>a:focus-visible::after{transform:scaleX(1)}
.spx-nav-v26 .nav-home-link::before{display:none!important}
.spx-nav-v26 .nav-actions{display:flex;align-items:center;gap:10px}.spx-nav-v26 .nav-actions .btn{min-height:38px;padding:8px 14px;font-weight:930;border-radius:999px}
.spx-nav-v26 .nav-actions .btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--text-soft)}
.spx-nav-v26 .nav-actions .btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}
.spx-nav-v26 .nav-actions .btn.primary,
.spx-v26-actions .btn.primary{
  background:linear-gradient(135deg,rgba(7,143,194,.92),rgba(37,99,235,.92) 64%,rgba(24,201,245,.95));
  box-shadow:0 14px 42px rgba(14,165,233,.20), inset 0 1px 0 rgba(255,255,255,.16);
  border:1px solid rgba(125,220,255,.18);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.spx-nav-v26 .nav-actions .btn.primary:hover,
.spx-v26-actions .btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 52px rgba(14,165,233,.28), inset 0 1px 0 rgba(255,255,255,.22);
  filter:brightness(1.03);
}
html[data-theme="light"] .spx-nav-v26 .nav-actions .btn.ghost:hover{background:rgba(15,23,42,.04)}
.spx-nav-v26 .spx-theme-switch{min-height:38px;display:inline-flex;align-items:center;gap:9px;padding:7px 10px 7px 7px;border-radius:999px;border:1px solid rgba(218,236,255,.14);background:rgba(255,255,255,.055);color:var(--text-soft);font-weight:900;line-height:1}
html[data-theme="light"] .spx-nav-v26 .spx-theme-switch{background:rgba(255,255,255,.68);border-color:rgba(15,23,42,.10)}
.spx-nav-v26 .spx-theme-switch .switch-track{position:relative;width:48px;height:26px;border-radius:999px;background:linear-gradient(135deg,#111827,#0b1220);border:1px solid rgba(218,236,255,.12);box-shadow:inset 0 1px 5px rgba(0,0,0,.28)}
.spx-nav-v26 .spx-theme-switch .switch-track i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#93c5fd 55%,#2563eb);box-shadow:0 0 16px rgba(147,197,253,.38);transition:transform .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease)}
html[data-theme="light"] .spx-nav-v26 .spx-theme-switch .switch-track{background:linear-gradient(135deg,#e0f2fe,#f8fafc);border-color:rgba(14,165,233,.18)}
html[data-theme="light"] .spx-nav-v26 .spx-theme-switch .switch-track i{transform:translateX(22px);background:radial-gradient(circle at 35% 35%,#fff7cc,#facc15 58%,#f59e0b);box-shadow:0 0 18px rgba(245,158,11,.32)}
.spx-nav-v26 .spx-theme-switch .switch-label{min-width:36px;text-align:left;font-size:12px}
.spx-nav-v26 .nav-group-mega .mega-menu{width:min(980px,calc(100vw - 42px));padding:0;border-radius:0;border:1px solid rgba(107,232,255,.18);background:rgba(5,11,23,.97);box-shadow:0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);overflow:hidden}
html[data-theme="light"] .spx-nav-v26 .nav-group-mega .mega-menu{background:rgba(255,255,255,.98);border-color:rgba(15,23,42,.10);box-shadow:0 30px 80px rgba(22,34,64,.16)}
.spx-nav-v26 .nav-group-mega .mega-menu::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(2,6,23,.26);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
html[data-theme="light"] .spx-nav-v26 .nav-group-mega .mega-menu::before{background:rgba(246,248,252,.30)}
.spx-nav-v26 .nav-panel-lead{display:grid;gap:8px;padding:22px 24px;border-bottom:1px solid rgba(218,236,255,.10);background:linear-gradient(90deg,rgba(24,201,245,.11),rgba(37,99,235,.05),transparent 70%)}
.spx-nav-v26 .nav-panel-lead span{color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:950}.spx-nav-v26 .nav-panel-lead strong{max-width:720px;color:var(--text);font-size:clamp(24px,2vw,34px);line-height:1.05;letter-spacing:-.06em}.spx-nav-v26 .nav-panel-lead small{max-width:660px;color:var(--secondary);font-weight:760}
.spx-nav-v26 .nav-panel-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.spx-nav-v26 .nav-panel-columns a{
  position:relative;display:grid;align-content:start;gap:8px;min-height:164px;padding:22px 22px 20px;border-right:1px solid rgba(218,236,255,.08);color:var(--secondary);background:transparent!important;transition:background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.spx-nav-v26 .nav-panel-columns a:last-child{border-right:0}
.spx-nav-v26 .nav-panel-columns a::after{content:"Explore \2192";margin-top:auto;color:var(--text);font-size:12px;font-weight:900;letter-spacing:.02em;opacity:.72;transition:transform .2s var(--ease), opacity .2s var(--ease), color .2s var(--ease)}
.spx-nav-v26 .nav-panel-columns a:hover{background:rgba(24,201,245,.075)!important;transform:translateY(-2px);border-color:rgba(107,232,255,.18)}
.spx-nav-v26 .nav-panel-columns a:hover::after{opacity:1;transform:translateX(4px);color:var(--cyan-2)}
.spx-nav-v26 .nav-panel-columns b{display:block;color:var(--text);font-size:15px;line-height:1.2}.spx-nav-v26 .nav-panel-columns span{display:block;font-size:13px;line-height:1.45}

/* Hero */
.spx-hero-v26{display:block!important;position:relative;overflow:hidden;isolation:isolate;min-height:clamp(920px,104svh,1180px);padding:clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px);color:var(--text);background:#02050d}
html[data-theme="light"] .spx-hero-v26{background:#eef6ff}
.spx-hero-v26 .spx-hero-space{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.17),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(24,201,245,.12),transparent 68%),linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%)}
html[data-theme="light"] .spx-hero-v26 .spx-hero-space{background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.11),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(14,165,233,.09),transparent 68%),linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%)}
.spx-v26-sky{position:absolute;inset:-10% -8%;z-index:1;pointer-events:none;overflow:hidden}
.spx-v26-sky::before{content:"";position:absolute;left:-8%;right:-8%;top:0;height:94%;background:linear-gradient(112deg,transparent 0 28%,rgba(37,99,235,.05) 38%,rgba(24,201,245,.14) 45%,rgba(210,244,255,.18) 49%,rgba(82,181,230,.12) 54%,rgba(48,86,180,.06) 62%,transparent 73% 100%),radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.11),transparent 39%),radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.055),transparent 42%);filter:blur(22px) saturate(130%);transform:rotate(-18deg) translate3d(calc(var(--spx-v26-x,0px) * .12),calc(var(--spx-v26-y,0px) * .08),0);opacity:.72;animation:spxV26Galaxy 26s ease-in-out infinite alternate}
.spx-v26-sky::after{content:"";position:absolute;inset:5% 0 0;background:linear-gradient(rgba(107,232,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.045) 1px,transparent 1px);background-size:64px 64px;transform:perspective(900px) rotateX(62deg) translate3d(calc(var(--spx-v26-x,0px) * .18),calc(var(--spx-v26-y,0px) * .10),0);transform-origin:center bottom;opacity:.24;animation:spxV26GridDrift 16s linear infinite;mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 76%,transparent 100%)}
html[data-theme="light"] .spx-v26-sky::after{opacity:.16}
.v26-cloud{position:absolute;display:block;border-radius:999px;opacity:.34;filter:blur(52px);transform:translate3d(calc(var(--spx-v26-x,0px) * .13),calc(var(--spx-v26-y,0px) * .10),0);animation:spxV26Cloud 12s ease-in-out infinite alternate}
.v26-cloud.cloud-a{left:2%;top:61%;width:42vw;height:12vw;background:rgba(107,232,255,.11)}
.v26-cloud.cloud-b{right:4%;top:16%;width:38vw;height:11vw;background:rgba(37,99,235,.13);animation-delay:-3s}
.v26-cloud.cloud-c{left:42%;top:41%;width:36vw;height:10vw;background:rgba(185,135,255,.06);animation-delay:-6s}
.v26-horizon{position:absolute;left:6%;right:6%;bottom:19%;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.34),transparent);box-shadow:0 0 56px rgba(24,201,245,.26)}
.v26-grid-plane{position:absolute;left:3%;right:3%;bottom:0;height:38%;background:linear-gradient(rgba(107,232,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.045) 1px,transparent 1px);background-size:58px 58px;transform:perspective(900px) rotateX(66deg);transform-origin:center bottom;opacity:.18;animation:spxV26GridDrift 18s linear infinite reverse;mask-image:linear-gradient(180deg,transparent 0%,black 30%,transparent 100%)}
.v26-light-trace{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.58),transparent);opacity:.34;filter:blur(.2px);animation:spxV26Trace 8.5s linear infinite}.v26-light-trace.trace-a{left:48%;width:22%;top:26%;animation-delay:-1s}.v26-light-trace.trace-b{right:8%;width:18%;top:62%;animation-delay:-5s}

.spx-v26-shell{position:relative;z-index:6;width:min(1400px,100%);margin:0 auto;display:grid;justify-items:start;text-align:left}
.spx-v26-copy{max-width:min(820px,67vw)}
.spx-v26-kicker{display:inline-flex;align-items:center;padding:8px 11px;border:1px solid rgba(107,232,255,.20);border-radius:7px;background:rgba(24,201,245,.08);color:#bff4ff;font-size:11px;line-height:1;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
html[data-theme="light"] .spx-v26-kicker{color:#075985;background:rgba(14,165,233,.09);border-color:rgba(14,165,233,.20)}
.spx-v26-copy h1{margin:20px 0 0;max-width:980px;font-size:clamp(68px,9.7vw,156px);line-height:.82;letter-spacing:-.11em;text-wrap:balance}.spx-v26-copy h1::after{content:"";display:block;width:min(380px,46%);height:2px;margin-top:30px;background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);box-shadow:0 0 26px rgba(24,201,245,.42)}
.spx-v26-lead{margin:24px 0 0;max-width:650px;color:var(--text-soft);font-size:clamp(18px,1.28vw,22px);line-height:1.55}.spx-v26-lead strong{color:var(--text);font-weight:950}
.spx-v26-support{margin:16px 0 0;max-width:620px;color:var(--secondary);font-size:15px;line-height:1.6}
.spx-v26-actions{justify-content:flex-start;display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.spx-v26-actions .btn{border-radius:999px}
.spx-v26-note{margin:14px 0 0;color:var(--secondary);font-size:13px;line-height:1.5}.spx-v26-note a{color:var(--text);font-weight:900;text-decoration:none;border-bottom:1px solid rgba(107,232,255,.24)}.spx-v26-note a:hover{color:var(--cyan-2);border-bottom-color:rgba(107,232,255,.44)}

/* Product side: clearer, calmer, slightly higher. */
.v26-product-atmosphere{position:absolute;left:50%;top:47.2%;width:min(1040px,72vw);height:min(620px,43vw);z-index:2;transform:translate(-18%,-18%) perspective(1480px) rotateY(-6deg) rotateX(3.2deg) translate3d(calc(var(--spx-v26-x,0px) * .16),calc(var(--spx-v26-y,0px) * .11),0);transform-origin:center;opacity:.76;filter:drop-shadow(0 44px 116px rgba(0,0,0,.34))}
.v26-product-atmosphere::before{content:"";position:absolute;inset:-12%;background:radial-gradient(circle at 50% 50%,rgba(24,201,245,.18),transparent 64%);filter:blur(28px);opacity:.48}
.v26-product-atmosphere::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(90deg,rgba(2,5,13,.86) 0%,rgba(2,5,13,.58) 12%,rgba(2,5,13,.26) 30%,rgba(2,5,13,.12) 50%,rgba(2,5,13,.16) 72%,rgba(2,5,13,.52) 100%),linear-gradient(180deg,rgba(2,5,13,.18),rgba(2,5,13,.05) 22%,rgba(2,5,13,.10) 78%,rgba(2,5,13,.34));box-shadow:inset 0 0 0 1px rgba(107,232,255,.06)}
html[data-theme="light"] .v26-product-atmosphere::after{background:linear-gradient(90deg,rgba(238,246,255,.80) 0%,rgba(238,246,255,.52) 14%,rgba(238,246,255,.20) 32%,rgba(238,246,255,.10) 52%,rgba(238,246,255,.14) 76%,rgba(238,246,255,.42) 100%),linear-gradient(180deg,rgba(238,246,255,.18),rgba(238,246,255,.06) 22%,rgba(238,246,255,.10) 78%,rgba(238,246,255,.28))}
.v26-builder-base{position:absolute;inset:1.4% 2.1%;width:auto;height:auto;object-fit:contain;object-position:center top;border:1px solid rgba(107,232,255,.16);opacity:.95;filter:saturate(1.03) contrast(1.03);background:rgba(6,12,25,.78);padding:8px;box-shadow:0 22px 72px rgba(0,0,0,.18)}
html[data-theme="light"] .v26-builder-base{background:rgba(255,255,255,.86)}
.v26-product-layer{position:absolute;z-index:5;border:1px solid rgba(125,220,255,.22);background:rgba(6,12,25,.95);box-shadow:0 26px 72px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.04) inset;overflow:hidden;padding:8px;display:block;object-fit:contain}
html[data-theme="light"] .v26-product-layer{background:rgba(255,255,255,.96);box-shadow:0 22px 58px rgba(22,34,64,.16),0 0 0 1px rgba(15,23,42,.04) inset}
.v26-product-layer.layer-settings{right:4.2%;top:1.4%;width:31.5%;height:76%;opacity:0;animation:spxV26LayerSettings 10s ease-in-out infinite}
.v26-product-layer.layer-add{left:2.4%;top:6.8%;width:33%;height:74%;opacity:0;animation:spxV26LayerAdd 10s ease-in-out infinite}

.spx-v26-bottom-fade{position:absolute;left:0;right:0;bottom:-1px;z-index:3;height:300px;pointer-events:none;background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.24) 36%,rgba(7,17,31,.84) 72%,var(--bg-2) 100%)}
html[data-theme="light"] .spx-v26-bottom-fade{background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.88) 72%,#eef3fa 100%)}
.spx-hero-v26 + .section.intro{margin-top:-58px;position:relative;z-index:5}

@keyframes spxV26Galaxy{from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.62}to{transform:rotate(-16deg) translate3d(1.6%,-1.1%,0) scale(1.14);opacity:.78}}
@keyframes spxV26Cloud{from{opacity:.24;filter:blur(46px)}to{opacity:.40;filter:blur(60px)}}
@keyframes spxV26GridDrift{from{background-position:0 0,0 0}to{background-position:64px 64px,64px 64px}}
@keyframes spxV26Trace{from{transform:translateX(-30px);opacity:0}22%{opacity:.36}78%{opacity:.36}to{transform:translateX(30px);opacity:0}}
@keyframes spxV26LayerSettings{0%,8%{opacity:0;transform:translateY(16px) scale(.985)}14%,42%{opacity:.86;transform:translateY(0) scale(1)}48%,100%{opacity:0;transform:translateY(-8px) scale(.985)}}
@keyframes spxV26LayerAdd{0%,54%{opacity:0;transform:translateY(16px) scale(.985)}60%,82%{opacity:.74;transform:translateY(0) scale(1)}88%,100%{opacity:0;transform:translateY(-8px) scale(.985)}}

@media(max-width:1200px){
  .spx-v26-copy{max-width:min(760px,68vw)}
  .v26-product-atmosphere{top:50.2%;width:980px;height:590px;opacity:.70}
}
@media(max-width:1120px){
  /* A8.140g: fix hamburger pushed far right — use auto spacer col + auto toggle col */
  .spx-nav-v26{grid-template-columns:auto 1fr auto}.spx-nav-v26 .nav-actions{justify-self:end}.spx-nav-v26 .nav-toggle{display:block;order:3;justify-self:end}.spx-nav-v26 .site-nav{display:none}
  .spx-nav-v26.is-open .site-nav{display:grid;position:absolute;left:18px;right:18px;top:calc(100% + 10px);justify-content:stretch;gap:6px;padding:16px;border:1px solid rgba(218,236,255,.10);background:#050b17}
  html[data-theme="light"] .spx-nav-v26.is-open .site-nav{background:rgba(255,255,255,.98);border-color:rgba(15,23,42,.09);box-shadow:0 24px 64px rgba(15,23,42,.14)}
  /* A8.140g: light-mode mobile menu link contrast */
  html[data-theme="light"] .spx-nav-v26.is-open .site-nav > a,
  html[data-theme="light"] .spx-nav-v26.is-open .site-nav .nav-group > a{color:#0f172a!important;background:rgba(15,23,42,.04)!important;border-color:rgba(15,23,42,.09)!important}
  html[data-theme="light"] .spx-nav-v26.is-open .site-nav > a:hover,
  html[data-theme="light"] .spx-nav-v26.is-open .site-nav .nav-group > a:hover{background:rgba(14,165,233,.08)!important;border-color:rgba(14,165,233,.18)!important;color:#0369a1!important}
  html[data-theme="light"] .spx-nav-v26.is-open .site-nav .nav-panel-lead strong,
  html[data-theme="light"] .spx-nav-v26.is-open .site-nav .nav-panel-lead small{color:#0f172a!important}
  html[data-theme="light"] .spx-nav-v26.is-open .site-nav .nav-panel-columns a{border-color:rgba(15,23,42,.08)!important}
  html[data-theme="light"] .spx-nav-v26.is-open .site-nav .nav-panel-columns b{color:#0f172a!important}
  html[data-theme="light"] .spx-nav-v26.is-open .site-nav .nav-panel-columns span{color:rgba(15,23,42,.62)!important}
  .spx-nav-v26 .nav-group-mega .mega-menu{position:static;width:100%;opacity:1;visibility:visible;transform:none;margin-top:8px}
  .spx-nav-v26 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .spx-v26-copy{max-width:100%}
  .v26-product-atmosphere{left:50%;top:60.2%;width:min(740px,94vw);height:min(450px,56vw);opacity:.70;transform:translate(-50%,-10%) perspective(1200px) rotateY(-4deg) rotateX(2.5deg)}
  .v26-product-layer.layer-settings{right:4%;top:2%;width:32%;height:72%}
}
@media(max-width:760px){
  .spx-hero-v26{min-height:auto;padding:118px 18px 148px}.spx-v26-copy h1{font-size:clamp(54px,16vw,84px)}.spx-v26-actions{display:grid}.spx-v26-support,.spx-v26-note,.spx-v26-lead{max-width:520px}
  .v26-product-atmosphere{top:auto;bottom:9%;width:100%;height:292px;opacity:.64}
  .v26-product-layer.layer-settings{right:4%;top:4%;width:31%;height:68%}
  .spx-nav-v26 .nav-actions .btn.primary,.spx-nav-v26 .nav-actions .btn.ghost{display:none}.spx-nav-v26 .nav-panel-columns{grid-template-columns:1fr}.spx-nav-v26 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}
  /* A8.140h Phase 5: simplify to 2-col nav on small screens — hides desktop theme toggle (mobile menu has its own) */
  .spx-nav-v26{grid-template-columns:auto 1fr!important}
  .spx-nav-v26 .nav-actions{display:none!important}
  .spx-nav-v26 .nav-toggle{grid-column:2!important;justify-self:end!important}
}
html[data-theme="light"] .spx-nav-v26 .nav-toggle{background:rgba(255,255,255,.90)!important;border-color:rgba(15,23,42,.16)!important;color:#0f172a!important;}
@media(prefers-reduced-motion:reduce){.spx-v26-sky::before,.spx-v26-sky::after,.v26-cloud,.v26-grid-plane,.v26-light-trace,.v26-product-layer.layer-settings,.v26-product-layer.layer-add{animation:none!important}.v26-product-layer.layer-settings{opacity:.82!important}.v26-product-layer.layer-add{opacity:0!important}}

/* ==========================================================================
   A8.29 — smooth A8.26 rebase: nav/CTA/message fixes without new heavy loops
   ========================================================================== */

/* Keep anchor target usable below fixed nav. */
.spx-scroll-anchor{
  display:block;
  position:relative;
  top:-110px;
  width:1px;
  height:1px;
  pointer-events:none;
}

/* Main nav links: stay integrated with the navbar, never become square/pill blocks. */
.site-header.spx-nav-v26 .site-nav,
.site-header.spx-nav-v26.is-scrolled .site-nav,
.site-header.spx-nav-v26.is-open .site-nav,
.site-header.spx-nav-v26:focus-within .site-nav{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.site-header.spx-nav-v26 .site-nav > a,
.site-header.spx-nav-v26 .nav-group > a,
.site-header.spx-nav-v26.is-scrolled .site-nav > a,
.site-header.spx-nav-v26.is-scrolled .nav-group > a,
.site-header.spx-nav-v26.is-open .site-nav > a,
.site-header.spx-nav-v26.is-open .nav-group > a,
.site-header.spx-nav-v26:focus-within .site-nav > a,
.site-header.spx-nav-v26:focus-within .nav-group > a,
.site-header.spx-nav-v26 .site-nav > a:hover,
.site-header.spx-nav-v26 .nav-group > a:hover,
.site-header.spx-nav-v26 .nav-group:hover > a,
.site-header.spx-nav-v26.is-scrolled .site-nav > a:hover,
.site-header.spx-nav-v26.is-scrolled .nav-group > a:hover,
.site-header.spx-nav-v26.is-scrolled .nav-group:hover > a,
.site-header.spx-nav-v26 .site-nav > a:focus-visible,
.site-header.spx-nav-v26 .nav-group > a:focus-visible{
  min-height:auto!important;
  padding:8px 0!important;
  margin:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html[data-theme="light"] .site-header.spx-nav-v26 .site-nav > a:hover,
html[data-theme="light"] .site-header.spx-nav-v26 .nav-group > a:hover,
html[data-theme="light"] .site-header.spx-nav-v26 .nav-group:hover > a{
  background:transparent!important;
  background-color:transparent!important;
}

/* Dropdown indicator: clear which top-level items open menus. */
.site-header.spx-nav-v26 .nav-group > a::after{
  content:none!important;
  display:none!important;
}
.site-header.spx-nav-v26 .nav-group-mega > a{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
}
.site-header.spx-nav-v26 .nav-caret{
  display:inline-block;
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  opacity:.68;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.site-header.spx-nav-v26 .nav-group-mega:hover .nav-caret,
.site-header.spx-nav-v26 .nav-group-mega:focus-within .nav-caret{
  transform:rotate(225deg) translate(-1px,-1px);
  opacity:1;
}

/* Theme switch: final item at the far right, vertical and textless. */
.site-header.spx-nav-v26 .nav-actions{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
.site-header.spx-nav-v26 .spx-theme-switch{
  order:99!important;
  width:30px!important;
  height:52px!important;
  min-width:30px!important;
  min-height:52px!important;
  padding:4px!important;
  border-radius:999px!important;
  justify-content:center!important;
  gap:0!important;
}
.site-header.spx-nav-v26 .spx-theme-switch .switch-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
}
.site-header.spx-nav-v26 .spx-theme-switch .switch-track{
  width:22px!important;
  height:44px!important;
}
.site-header.spx-nav-v26 .spx-theme-switch .switch-track i{
  left:2px!important;
  top:2px!important;
  width:18px!important;
  height:18px!important;
  transform:none!important;
}
html[data-theme="light"] .site-header.spx-nav-v26 .spx-theme-switch .switch-track i{
  transform:translateY(22px)!important;
}

/* Shared CTA animation: exact same class on nav Start free and hero Start building. */
.spx-primary-action{
  position:relative!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 52%,#18c9f5 100%)!important;
  background-size:150% 150%!important;
  border:1px solid rgba(125,220,255,.22)!important;
  color:#fff!important;
  box-shadow:0 14px 42px rgba(14,165,233,.25), inset 0 1px 0 rgba(255,255,255,.26)!important;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease), background-position .22s var(--ease), border-color .22s var(--ease)!important;
  will-change:transform;
}
.spx-primary-action::after{
  content:""!important;
  position:absolute!important;
  inset:-70% -40%!important;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.30) 48%,transparent 62%)!important;
  transform:translateX(-62%) rotate(8deg)!important;
  transition:transform .55s var(--ease)!important;
  pointer-events:none!important;
}
.spx-primary-action:hover,
.spx-primary-action:focus-visible{
  transform:translateY(-2px) scale(1.012)!important;
  background-position:100% 50%!important;
  border-color:rgba(170,236,255,.34)!important;
  box-shadow:0 20px 58px rgba(14,165,233,.32), inset 0 1px 0 rgba(255,255,255,.28)!important;
  filter:brightness(1.04)!important;
}
.spx-primary-action:hover::after,
.spx-primary-action:focus-visible::after{
  transform:translateX(62%) rotate(8deg)!important;
}

/* Dropdown links: clearer as links, without changing the smooth hero runtime. */
.site-header.spx-nav-v26 .nav-panel-lead{
  padding:24px 28px!important;
}
.site-header.spx-nav-v26 .nav-panel-lead small{
  max-width:720px!important;
  line-height:1.55!important;
}
.site-header.spx-nav-v26 .nav-panel-columns a{
  display:grid!important;
  grid-template-rows:auto auto 1fr auto!important;
  gap:10px!important;
  min-height:178px!important;
  padding:26px 24px 24px!important;
  text-decoration:none!important;
  border-right:1px solid rgba(218,236,255,.09)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0))!important;
}
html[data-theme="light"] .site-header.spx-nav-v26 .nav-panel-columns a{
  background:linear-gradient(180deg,rgba(14,165,233,.035),rgba(255,255,255,0))!important;
  border-right-color:rgba(15,23,42,.08)!important;
}
.site-header.spx-nav-v26 .nav-panel-columns a::before{
  content:"";
  width:22px;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  box-shadow:0 0 14px rgba(24,201,245,.28);
}
.site-header.spx-nav-v26 .nav-panel-columns a::after{
  content:"Open →";
  align-self:end;
  color:var(--text);
  font-size:12px;
  font-weight:950;
  letter-spacing:.02em;
  opacity:.78;
  transition:transform .2s var(--ease), opacity .2s var(--ease), color .2s var(--ease);
}
.site-header.spx-nav-v26 .nav-panel-columns a:hover{
  background:linear-gradient(180deg,rgba(24,201,245,.10),rgba(37,99,235,.04))!important;
  transform:translateY(-2px);
}
.site-header.spx-nav-v26 .nav-panel-columns a:hover::after{
  opacity:1;
  color:var(--cyan-2);
  transform:translateX(5px);
}

/* Hero message hierarchy. */
.spx-v26-copy{
  max-width:min(880px,70vw)!important;
}
.spx-v26-lead{
  max-width:720px!important;
}
.spx-v26-support{
  max-width:680px!important;
}

/* Product panel: keep A8.26 smoothness, only keep Settings below topbar. */
.v26-product-layer.layer-settings{
  top:11.5%!important;
  height:62%!important;
}
.v26-product-layer.layer-add{
  top:11.5%!important;
  height:62%!important;
}

@media(max-width:1120px){
  .site-header.spx-nav-v26.is-open .site-nav{
    background:#050b17!important;
    border:1px solid rgba(218,236,255,.10)!important;
    box-shadow:0 24px 80px rgba(0,0,0,.34)!important;
  }
  html[data-theme="light"] .site-header.spx-nav-v26.is-open .site-nav{
    background:#fff!important;
    border-color:rgba(15,23,42,.08)!important;
  }
}
@media(max-width:760px){
  .spx-v26-copy{
    max-width:100%!important;
  }
  .spx-v26-lead,
  .spx-v26-support{
    max-width:520px!important;
  }
}


/* ==========================================================================
   A8.30 — final hero copy + soft gradient emphasis on "Your"
   ========================================================================== */

.spx-v26-kicker{
  max-width:560px!important;
}

.spx-v26-copy h1{
  max-width:980px!important;
  text-wrap:balance;
}

.spx-hero-gradient-word{
  display:inline-block;
  background:linear-gradient(105deg,#ffffff 0%,#dff8ff 26%,#18c9f5 58%,#2563eb 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 34px rgba(24,201,245,.20);
}
html[data-theme="light"] .spx-hero-gradient-word{
  background:linear-gradient(105deg,#101828 0%,#075985 32%,#0ea5e9 65%,#2563eb 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}

.spx-v26-lead{
  max-width:650px!important;
}

.spx-v26-lead strong{
  font-weight:920;
}

.spx-v26-support{
  max-width:680px!important;
}

.spx-v26-note a{
  text-transform:none;
}

@media(max-width:760px){
  .spx-v26-copy h1{
    max-width:100%!important;
  }
}


/* ==========================================================================
   A8.31 — hero clipping fix + Why Spixor section + smooth background scroll
   ========================================================================== */

/* Fix clipped gradient word in the hero heading. */
.spx-v26-copy h1{
  line-height:.90!important;
  overflow:visible!important;
  padding-bottom:.055em!important;
}
.spx-hero-gradient-word{
  display:inline-block;
  padding:.02em .075em .075em 0!important;
  margin:-.02em -.035em -.075em 0!important;
  line-height:1!important;
  overflow:visible!important;
  background-position:center;
}

/* Smooth background scroll variable. Content scrolls normally; atmosphere lags subtly. */
[data-smooth-bg-scene]{
  --spx-smooth-bg-y: calc(var(--spx-bg-scroll, 0) * 1px);
}
.spx-v26-sky{
  transform:translate3d(0, calc(var(--spx-bg-scroll, 0) * .055px), 0);
  will-change:transform;
}
.spx-v26-sky::before,
.spx-v26-sky::after{
  transform:translate3d(0, calc(var(--spx-bg-scroll, 0) * .035px), 0);
}

/* The section starts inside the hero atmosphere instead of feeling cut off. */
.spx-why-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  margin-top:-118px;
  padding:clamp(150px,14vw,220px) var(--side) clamp(105px,11vw,170px);
  color:var(--text);
  background:
    radial-gradient(900px 520px at 12% 12%,rgba(24,201,245,.10),transparent 60%),
    radial-gradient(880px 560px at 84% 34%,rgba(37,99,235,.11),transparent 62%),
    linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.58) 16%,var(--bg-2) 42%,var(--bg) 100%);
}
html[data-theme="light"] .spx-why-section{
  background:
    radial-gradient(900px 520px at 12% 12%,rgba(14,165,233,.10),transparent 60%),
    radial-gradient(880px 560px at 84% 34%,rgba(37,99,235,.08),transparent 62%),
    linear-gradient(180deg,rgba(238,243,250,0) 0%,rgba(238,243,250,.68) 20%,#eef3fa 48%,#f6f8fc 100%);
}
.spx-why-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(107,232,255,.030) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.024) 1px,transparent 1px);
  background-size:84px 84px;
  opacity:.34;
  transform:translate3d(0, calc(var(--spx-bg-scroll, 0) * -.025px), 0);
  mask-image:linear-gradient(180deg,transparent 0%,black 18%,black 80%,transparent 100%);
}
html[data-theme="light"] .spx-why-section::before{
  opacity:.24;
}
.spx-why-bg{
  position:absolute;
  inset:-10% -8%;
  z-index:0;
  pointer-events:none;
  transform:translate3d(0, calc(var(--spx-bg-scroll, 0) * -.09px), 0);
  will-change:transform;
}
.why-nebula{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(54px);
  opacity:.34;
  animation:spxWhyNebula 18s ease-in-out infinite alternate;
}
.why-nebula-a{
  width:42vw;
  height:13vw;
  left:2%;
  top:18%;
  background:rgba(24,201,245,.13);
}
.why-nebula-b{
  width:34vw;
  height:12vw;
  right:8%;
  top:38%;
  background:rgba(37,99,235,.13);
  animation-delay:-7s;
}
.why-grid{
  position:absolute;
  left:4%;
  right:4%;
  bottom:4%;
  height:44%;
  background:
    linear-gradient(rgba(107,232,255,.040) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.032) 1px,transparent 1px);
  background-size:76px 76px;
  transform:perspective(900px) rotateX(64deg);
  transform-origin:center bottom;
  opacity:.18;
  mask-image:linear-gradient(180deg,transparent 0%,black 38%,transparent 100%);
}
.why-orbit-line{
  position:absolute;
  border:1px solid rgba(107,232,255,.12);
  border-radius:50%;
  opacity:.45;
  transform:rotate(-18deg);
}
.orbit-one{
  width:620px;
  height:190px;
  right:4%;
  top:22%;
}
.orbit-two{
  width:480px;
  height:160px;
  left:0;
  bottom:18%;
  border-color:rgba(37,99,235,.11);
}

.spx-why-shell{
  position:relative;
  z-index:2;
  width:min(1340px,100%);
  margin:0 auto;
  display:grid;
  gap:clamp(34px,5vw,70px);
}
.spx-why-intro{
  max-width:850px;
}
.spx-why-intro h2{
  margin:14px 0 0;
  max-width:920px;
  font-size:clamp(42px,5.6vw,92px);
  line-height:.94;
  letter-spacing:-.075em;
  text-wrap:balance;
}
.spx-why-intro p{
  margin:24px 0 0;
  max-width:760px;
  color:var(--text-soft);
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.58;
}

.spx-why-visual{
  position:relative;
  min-height:clamp(360px,38vw,540px);
  border:1px solid rgba(107,232,255,.12);
  background:
    radial-gradient(circle at 50% 42%,rgba(24,201,245,.12),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.050),rgba(255,255,255,.015));
  box-shadow:0 34px 110px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  backdrop-filter:blur(18px) saturate(132%);
  -webkit-backdrop-filter:blur(18px) saturate(132%);
}
html[data-theme="light"] .spx-why-visual{
  background:
    radial-gradient(circle at 50% 42%,rgba(14,165,233,.10),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.50));
  border-color:rgba(15,23,42,.09);
  box-shadow:0 30px 90px rgba(22,34,64,.12),inset 0 1px 0 rgba(255,255,255,.72);
}
.spx-why-visual::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(720px,70%);
  height:min(720px,86%);
  border:1px dashed rgba(107,232,255,.16);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-15deg);
}
.spx-why-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(2,5,13,.28),transparent 28%,transparent 72%,rgba(2,5,13,.24));
}
html[data-theme="light"] .spx-why-visual::after{
  background:linear-gradient(90deg,rgba(246,248,252,.50),transparent 28%,transparent 72%,rgba(246,248,252,.44));
}
.why-core{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  width:clamp(190px,18vw,260px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-content:center;
  text-align:center;
  padding:28px;
  border:1px solid rgba(107,232,255,.20);
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.16),rgba(24,201,245,.10) 38%,rgba(5,11,23,.72));
  box-shadow:0 0 70px rgba(24,201,245,.18),inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="light"] .why-core{
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.96),rgba(224,242,254,.70) 42%,rgba(255,255,255,.64));
}
.why-core b{
  display:block;
  color:var(--text);
  font-size:clamp(26px,3vw,48px);
  line-height:.96;
  letter-spacing:-.06em;
}
.why-core span{
  display:block;
  margin-top:10px;
  color:var(--secondary);
  font-weight:800;
  font-size:13px;
}
.why-flow-card{
  position:absolute;
  z-index:2;
  width:min(290px,26vw);
  min-height:145px;
  padding:20px;
  border:1px solid rgba(107,232,255,.13);
  background:rgba(5,11,23,.64);
  box-shadow:0 20px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:transform .65s var(--ease), opacity .65s var(--ease);
}
html[data-theme="light"] .why-flow-card{
  background:rgba(255,255,255,.74);
  border-color:rgba(15,23,42,.09);
  box-shadow:0 18px 48px rgba(22,34,64,.10),inset 0 1px 0 rgba(255,255,255,.72);
}
.why-flow-card span{
  color:var(--cyan-2);
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
}
.why-flow-card strong{
  display:block;
  margin-top:10px;
  color:var(--text);
  font-size:20px;
  line-height:1.12;
  letter-spacing:-.035em;
}
.why-flow-card small{
  display:block;
  margin-top:10px;
  color:var(--secondary);
  font-size:13px;
  line-height:1.45;
}
.card-build{
  left:7%;
  top:12%;
}
.card-organize{
  right:7%;
  top:15%;
}
.card-continue{
  left:50%;
  bottom:10%;
  transform:translateX(-50%);
}

.spx-why-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.spx-why-card{
  position:relative;
  min-height:260px;
  padding:28px;
  border:1px solid rgba(107,232,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018));
  box-shadow:0 22px 70px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="light"] .spx-why-card{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,255,.68));
  border-color:rgba(15,23,42,.09);
  box-shadow:0 18px 52px rgba(22,34,64,.08),inset 0 1px 0 rgba(255,255,255,.78);
}
.why-card-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(107,232,255,.16);
  color:var(--cyan-2);
  background:rgba(24,201,245,.075);
  margin-bottom:24px;
}
.spx-why-card h3{
  margin:0;
  color:var(--text);
  font-size:clamp(22px,2.1vw,32px);
  line-height:1.02;
  letter-spacing:-.055em;
}
.spx-why-card p{
  margin:16px 0 0;
  color:var(--secondary);
  line-height:1.62;
}

/* Smoother reveal variants used in the new why section. */
.spx-smooth-reveal{
  opacity:0;
  transform:translate3d(0,28px,0);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible .spx-smooth-reveal,
.spx-smooth-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}
.reveal.is-visible .spx-smooth-reveal:nth-child(2),
.spx-smooth-reveal:nth-child(2){
  transition-delay:.08s;
}
.reveal.is-visible .spx-smooth-reveal:nth-child(3),
.spx-smooth-reveal:nth-child(3){
  transition-delay:.16s;
}
.reveal.is-visible .spx-why-cards .spx-smooth-reveal:nth-child(1){transition-delay:.04s}
.reveal.is-visible .spx-why-cards .spx-smooth-reveal:nth-child(2){transition-delay:.12s}
.reveal.is-visible .spx-why-cards .spx-smooth-reveal:nth-child(3){transition-delay:.20s}

@keyframes spxWhyNebula{
  from{transform:translate3d(-1.5%,.5%,0) scale(1);opacity:.26}
  to{transform:translate3d(1.5%,-.7%,0) scale(1.08);opacity:.40}
}

@media(max-width:980px){
  .spx-why-cards{
    grid-template-columns:1fr;
  }
  .spx-why-visual{
    min-height:620px;
  }
  .why-flow-card{
    width:min(330px,72vw);
  }
  .card-build{left:50%;top:8%;transform:translateX(-50%)}
  .card-organize{right:auto;left:50%;top:34%;transform:translateX(-50%)}
  .card-continue{bottom:7%}
  .why-core{
    width:180px;
  }
}
@media(max-width:760px){
  .spx-v26-copy h1{
    line-height:.94!important;
  }
  .spx-why-section{
    margin-top:-82px;
    padding-top:140px;
  }
  .spx-why-intro h2{
    font-size:clamp(38px,12vw,58px);
  }
  .spx-why-visual{
    min-height:650px;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-v26-sky,
  .spx-v26-sky::before,
  .spx-v26-sky::after,
  .spx-why-bg,
  .spx-why-section::before{
    transform:none!important;
  }
  .why-nebula{
    animation:none!important;
  }
  .spx-smooth-reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}


/* ==========================================================================
   A8.32 — Framer-style Why Spixor section + seamless hero flow
   ========================================================================== */

/* Remove the visible cut line between hero and Why. */
.spx-hero-v26{
  position:relative;
}
.spx-v26-bottom-fade{
  height:390px!important;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.18) 28%,
      rgba(7,17,31,.58) 58%,
      rgba(7,17,31,.92) 82%,
      var(--bg-2) 100%)!important;
}
html[data-theme="light"] .spx-v26-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.28) 32%,
      rgba(246,248,252,.68) 62%,
      rgba(238,243,250,.94) 84%,
      #eef3fa 100%)!important;
}

/* New Why section direction: compact, less copy, more visual. */
.spx-why-section.spx-why-v32{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  margin-top:-190px!important;
  padding:clamp(210px,18vw,290px) var(--side) clamp(86px,9vw,140px)!important;
  border-top:0!important;
  color:var(--text);
  background:
    radial-gradient(980px 560px at 50% -8%,rgba(24,201,245,.12),transparent 64%),
    radial-gradient(860px 520px at 82% 28%,rgba(37,99,235,.10),transparent 62%),
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.28) 10%,
      var(--bg-2) 34%,
      var(--bg) 100%)!important;
}
html[data-theme="light"] .spx-why-section.spx-why-v32{
  background:
    radial-gradient(980px 560px at 50% -8%,rgba(14,165,233,.11),transparent 64%),
    radial-gradient(860px 520px at 82% 28%,rgba(37,99,235,.08),transparent 62%),
    linear-gradient(180deg,
      rgba(238,243,250,0) 0%,
      rgba(238,243,250,.36) 13%,
      #eef3fa 38%,
      #f6f8fc 100%)!important;
}
.spx-why-section.spx-why-v32::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:0;
  height:260px;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.22) 42%,
      rgba(7,17,31,0) 100%);
  transform:translate3d(0, calc(var(--spx-bg-scroll, 0) * -.018px), 0);
  mask-image:linear-gradient(180deg,black 0%,transparent 100%);
}
html[data-theme="light"] .spx-why-section.spx-why-v32::before{
  background:
    linear-gradient(180deg,
      rgba(238,243,250,0) 0%,
      rgba(238,243,250,.42) 42%,
      rgba(238,243,250,0) 100%);
}
.spx-why-section.spx-why-v32::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(107,232,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.018) 1px,transparent 1px);
  background-size:90px 90px;
  opacity:.26;
  transform:translate3d(0, calc(var(--spx-bg-scroll, 0) * -.032px), 0);
  mask-image:linear-gradient(180deg,transparent 0%,black 24%,black 74%,transparent 100%);
}
html[data-theme="light"] .spx-why-section.spx-why-v32::after{
  opacity:.16;
}

.spx-why-v32 .spx-why-bg{
  position:absolute;
  inset:-12% -8%;
  z-index:0;
  pointer-events:none;
  transform:translate3d(0, calc(var(--spx-bg-scroll, 0) * -.065px), 0);
  will-change:transform;
}
.why-v32-glow{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(56px);
  opacity:.34;
  animation:spxWhyV32Glow 22s ease-in-out infinite alternate;
}
.why-v32-glow.glow-a{
  width:42vw;
  height:12vw;
  left:6%;
  top:12%;
  background:rgba(24,201,245,.12);
}
.why-v32-glow.glow-b{
  width:34vw;
  height:11vw;
  right:8%;
  top:38%;
  background:rgba(37,99,235,.12);
  animation-delay:-8s;
}
.why-v32-grid{
  position:absolute;
  left:5%;
  right:5%;
  bottom:3%;
  height:42%;
  background:
    linear-gradient(rgba(107,232,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.026) 1px,transparent 1px);
  background-size:78px 78px;
  transform:perspective(900px) rotateX(64deg);
  transform-origin:center bottom;
  opacity:.16;
  mask-image:linear-gradient(180deg,transparent 0%,black 38%,transparent 100%);
}

.spx-why-v32 .spx-why-shell{
  position:relative;
  z-index:2;
  width:min(1280px,100%);
  margin:0 auto;
  display:grid;
  gap:clamp(26px,4vw,52px);
}
.spx-why-head{
  max-width:790px;
}
.spx-why-head h2{
  margin:12px 0 0;
  max-width:850px;
  font-size:clamp(48px,6.6vw,106px);
  line-height:.90;
  letter-spacing:-.085em;
  text-wrap:balance;
}
.spx-why-head p{
  margin:22px 0 0;
  max-width:680px;
  color:var(--text-soft);
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.55;
}

/* Framer-like visual stage: one strong visual, not a wall of text. */
.spx-why-showcase{
  position:relative;
  min-height:clamp(420px,42vw,620px);
  border:1px solid rgba(107,232,255,.11);
  background:
    radial-gradient(circle at 50% 42%,rgba(24,201,245,.12),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.050),rgba(255,255,255,.012));
  box-shadow:0 34px 110px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  backdrop-filter:blur(18px) saturate(128%);
  -webkit-backdrop-filter:blur(18px) saturate(128%);
}
html[data-theme="light"] .spx-why-showcase{
  background:
    radial-gradient(circle at 50% 42%,rgba(14,165,233,.10),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.50));
  border-color:rgba(15,23,42,.09);
  box-shadow:0 30px 90px rgba(22,34,64,.11),inset 0 1px 0 rgba(255,255,255,.72);
}
.spx-why-showcase::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,5,13,.30),transparent 30%,transparent 70%,rgba(2,5,13,.25)),
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 32%,rgba(0,0,0,.08));
  z-index:4;
}
html[data-theme="light"] .spx-why-showcase::before{
  background:
    linear-gradient(90deg,rgba(246,248,252,.48),transparent 30%,transparent 70%,rgba(246,248,252,.40)),
    linear-gradient(180deg,rgba(255,255,255,.25),transparent 32%,rgba(15,23,42,.03));
}
.why-v32-orbit{
  position:absolute;
  inset:8%;
  z-index:1;
  pointer-events:none;
}
.why-v32-orbit span{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(107,232,255,.12);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-15deg);
}
.why-v32-orbit span:nth-child(1){
  width:min(780px,74%);
  height:min(310px,56%);
}
.why-v32-orbit span:nth-child(2){
  width:min(580px,54%);
  height:min(470px,78%);
  border-color:rgba(37,99,235,.10);
}
.why-v32-orbit span:nth-child(3){
  width:min(920px,86%);
  height:min(470px,74%);
  border-color:rgba(107,232,255,.07);
}

.why-v32-core{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  width:clamp(200px,18vw,270px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-content:center;
  text-align:center;
  padding:30px;
  border:1px solid rgba(107,232,255,.18);
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.16),rgba(24,201,245,.10) 40%,rgba(5,11,23,.74));
  box-shadow:0 0 76px rgba(24,201,245,.18),inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="light"] .why-v32-core{
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.96),rgba(224,242,254,.72) 42%,rgba(255,255,255,.66));
}
.why-v32-core span{
  color:var(--cyan-2);
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.why-v32-core strong{
  display:block;
  margin-top:8px;
  color:var(--text);
  font-size:clamp(30px,3.1vw,52px);
  line-height:.92;
  letter-spacing:-.065em;
}
.why-v32-core small{
  margin-top:10px;
  color:var(--secondary);
  font-weight:820;
}

.why-v32-card{
  position:absolute;
  z-index:2;
  width:min(280px,25vw);
  min-height:142px;
  padding:20px;
  border:1px solid rgba(107,232,255,.12);
  background:rgba(5,11,23,.64);
  box-shadow:0 20px 60px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
html[data-theme="light"] .why-v32-card{
  background:rgba(255,255,255,.76);
  border-color:rgba(15,23,42,.09);
  box-shadow:0 18px 48px rgba(22,34,64,.10),inset 0 1px 0 rgba(255,255,255,.72);
}
.why-v32-card b{
  color:var(--cyan-2);
  font-size:12px;
  letter-spacing:.12em;
}
.why-v32-card h3{
  margin:10px 0 0;
  color:var(--text);
  font-size:20px;
  line-height:1.08;
  letter-spacing:-.04em;
}
.why-v32-card p{
  margin:10px 0 0;
  color:var(--secondary);
  font-size:13px;
  line-height:1.45;
}
.card-visual{
  left:7%;
  top:12%;
}
.card-organized{
  right:7%;
  top:14%;
}
.card-ready{
  left:50%;
  bottom:10%;
  transform:translateX(-50%);
}

.spx-why-bottom{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.spx-why-bottom p{
  margin:0;
  color:var(--text-soft);
  font-size:clamp(16px,1.2vw,20px);
  line-height:1.62;
}

/* Smooth scroll-in, but smaller and calmer than A8.31. */
.spx-scroll-rise{
  opacity:0;
  transform:translate3d(0,24px,0) scale(.992);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  will-change:transform,opacity;
}
.reveal.is-visible .spx-scroll-rise,
.spx-scroll-rise.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.reveal.is-visible .spx-scroll-rise:nth-child(2){transition-delay:.08s}
.reveal.is-visible .spx-scroll-rise:nth-child(3){transition-delay:.14s}

@keyframes spxWhyV32Glow{
  from{transform:translate3d(-1.3%,.6%,0) scale(1);opacity:.26}
  to{transform:translate3d(1.3%,-.6%,0) scale(1.07);opacity:.38}
}

@media(max-width:980px){
  .spx-why-showcase{
    min-height:650px;
  }
  .why-v32-card{
    width:min(330px,74vw);
  }
  .card-visual{left:50%;top:8%;transform:translateX(-50%)}
  .card-organized{right:auto;left:50%;top:34%;transform:translateX(-50%)}
  .card-ready{bottom:7%}
  .why-v32-core{
    width:178px;
  }
}
@media(max-width:760px){
  .spx-why-section.spx-why-v32{
    margin-top:-120px!important;
    padding-top:170px!important;
  }
  .spx-why-head h2{
    font-size:clamp(42px,13vw,62px);
  }
  .spx-why-showcase{
    min-height:670px;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-why-bg,
  .spx-why-section.spx-why-v32::before,
  .spx-why-section.spx-why-v32::after{
    transform:none!important;
  }
  .why-v32-glow{
    animation:none!important;
  }
  .spx-scroll-rise{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}


/* A8.32 smooth anchor movement and section scroll comfort */
html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}


/* ==========================================================================
   A8.33 — Sticky right-tool Why Spixor section
   Framer-like split story: compact left text + sticky product preview on right
   ========================================================================== */

/* Blend hero into the next section more heavily to remove the visible cut line. */
.spx-v26-bottom-fade{
  height:520px!important;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.12) 24%,
      rgba(7,17,31,.38) 52%,
      rgba(7,17,31,.78) 78%,
      var(--bg-2) 100%)!important;
  z-index:4;
}
html[data-theme="light"] .spx-v26-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.20) 30%,
      rgba(246,248,252,.54) 58%,
      rgba(238,243,250,.88) 82%,
      #eef3fa 100%)!important;
}

/* New Why section: no planet system; a product story with sticky tool preview. */
.spx-why-section.spx-why-v33{
  position:relative;
  overflow:clip;
  isolation:isolate;
  margin-top:-260px!important;
  padding:clamp(250px,20vw,340px) var(--side) clamp(92px,9vw,150px)!important;
  border:0!important;
  color:var(--text);
  background:
    radial-gradient(1000px 560px at 52% -10%,rgba(24,201,245,.12),transparent 64%),
    radial-gradient(900px 540px at 85% 26%,rgba(37,99,235,.10),transparent 64%),
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.08) 12%,
      rgba(7,17,31,.42) 32%,
      var(--bg-2) 54%,
      var(--bg) 100%)!important;
}
html[data-theme="light"] .spx-why-section.spx-why-v33{
  background:
    radial-gradient(1000px 560px at 52% -10%,rgba(14,165,233,.10),transparent 64%),
    radial-gradient(900px 540px at 85% 26%,rgba(37,99,235,.075),transparent 64%),
    linear-gradient(180deg,
      rgba(238,243,250,0) 0%,
      rgba(238,243,250,.16) 14%,
      rgba(238,243,250,.58) 34%,
      #eef3fa 56%,
      #f6f8fc 100%)!important;
}
.spx-why-section.spx-why-v33::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  z-index:0;
  height:360px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.22) 52%,rgba(7,17,31,0) 100%);
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.016px),0);
  mask-image:linear-gradient(180deg,black 0%,transparent 100%);
}
html[data-theme="light"] .spx-why-section.spx-why-v33::before{
  background:linear-gradient(180deg,rgba(238,243,250,0) 0%,rgba(238,243,250,.42) 52%,rgba(238,243,250,0) 100%);
}
.spx-why-section.spx-why-v33::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(107,232,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.014) 1px,transparent 1px);
  background-size:96px 96px;
  opacity:.22;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.028px),0);
  mask-image:linear-gradient(180deg,transparent 0%,black 30%,black 76%,transparent 100%);
}
html[data-theme="light"] .spx-why-section.spx-why-v33::after{opacity:.13}

.spx-why-v33-bg{
  position:absolute;
  inset:-12% -8%;
  z-index:0;
  pointer-events:none;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.07px),0);
  will-change:transform;
}
.why-v33-glow{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(56px);
  opacity:.30;
  animation:spxWhyV33Glow 24s ease-in-out infinite alternate;
}
.why-v33-glow.glow-a{
  width:42vw;
  height:12vw;
  left:6%;
  top:10%;
  background:rgba(24,201,245,.12);
}
.why-v33-glow.glow-b{
  width:34vw;
  height:11vw;
  right:8%;
  top:42%;
  background:rgba(37,99,235,.12);
  animation-delay:-8s;
}
.why-v33-lines{
  position:absolute;
  left:6%;
  right:6%;
  bottom:2%;
  height:42%;
  background:
    linear-gradient(rgba(107,232,255,.030) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.024) 1px,transparent 1px);
  background-size:82px 82px;
  transform:perspective(900px) rotateX(64deg);
  transform-origin:center bottom;
  opacity:.13;
  mask-image:linear-gradient(180deg,transparent 0%,black 40%,transparent 100%);
}

.spx-why-v33-shell{
  position:relative;
  z-index:2;
  width:min(1320px,100%);
  margin:0 auto;
  display:grid;
  gap:clamp(32px,5vw,74px);
}
.spx-why-v33-head{
  max-width:820px;
}
.spx-why-v33-head h2{
  margin:12px 0 0;
  max-width:900px;
  font-size:clamp(46px,6.2vw,102px);
  line-height:.91;
  letter-spacing:-.082em;
  text-wrap:balance;
}
.spx-why-v33-head p{
  margin:22px 0 0;
  max-width:700px;
  color:var(--text-soft);
  font-size:clamp(16px,1.25vw,21px);
  line-height:1.56;
}

/* Split story: left scroll text, right sticky tool preview. */
.spx-why-v33-story{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, .78fr) minmax(480px, 1.22fr);
  gap:clamp(34px,5vw,82px);
  align-items:start;
}
.spx-why-v33-copy{
  display:grid;
  gap:clamp(18px,3vw,34px);
  padding:clamp(22px,3vw,48px) 0;
}
.why-v33-step{
  position:relative;
  min-height:clamp(230px,25vh,310px);
  display:grid;
  align-content:center;
  padding:clamp(22px,2.6vw,34px);
  border-left:2px solid rgba(107,232,255,.10);
  background:linear-gradient(90deg,rgba(255,255,255,.034),rgba(255,255,255,0));
  transition:opacity .42s var(--ease), transform .42s var(--ease), border-color .42s var(--ease), background .42s var(--ease);
  opacity:.60;
}
html[data-theme="light"] .why-v33-step{
  background:linear-gradient(90deg,rgba(255,255,255,.58),rgba(255,255,255,0));
  border-left-color:rgba(15,23,42,.09);
}
.why-v33-step.is-active{
  opacity:1;
  transform:translateX(8px);
  border-left-color:rgba(107,232,255,.55);
  background:linear-gradient(90deg,rgba(24,201,245,.075),rgba(255,255,255,0));
}
html[data-theme="light"] .why-v33-step.is-active{
  background:linear-gradient(90deg,rgba(14,165,233,.09),rgba(255,255,255,0));
  border-left-color:rgba(14,165,233,.45);
}
.why-v33-step span{
  color:var(--cyan-2);
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
}
.why-v33-step h3{
  margin:12px 0 0;
  color:var(--text);
  font-size:clamp(28px,3.3vw,54px);
  line-height:.95;
  letter-spacing:-.065em;
  text-wrap:balance;
}
.why-v33-step p{
  margin:16px 0 0;
  max-width:520px;
  color:var(--secondary);
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.62;
}

.spx-why-v33-sticky{
  position:sticky;
  top:clamp(96px,12vh,132px);
  min-height:clamp(520px,62vh,690px);
  display:grid;
  align-items:center;
}
.why-v33-device{
  position:relative;
  width:100%;
  min-height:clamp(430px,52vw,620px);
  border:1px solid rgba(107,232,255,.13);
  background:
    radial-gradient(circle at 50% 42%,rgba(24,201,245,.11),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  box-shadow:0 34px 120px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  backdrop-filter:blur(18px) saturate(128%);
  -webkit-backdrop-filter:blur(18px) saturate(128%);
}
html[data-theme="light"] .why-v33-device{
  border-color:rgba(15,23,42,.09);
  background:
    radial-gradient(circle at 50% 42%,rgba(14,165,233,.10),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.54));
  box-shadow:0 30px 90px rgba(22,34,64,.12),inset 0 1px 0 rgba(255,255,255,.74);
}
.why-v33-device::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(107,232,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.018) 1px,transparent 1px);
  background-size:58px 58px;
  opacity:.22;
  pointer-events:none;
}
.why-v33-device::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(2,5,13,.28),transparent 24%,transparent 78%,rgba(2,5,13,.24));
}
html[data-theme="light"] .why-v33-device::after{
  background:linear-gradient(90deg,rgba(246,248,252,.46),transparent 24%,transparent 78%,rgba(246,248,252,.38));
}
.why-v33-device-top{
  position:absolute;
  left:18px;
  right:18px;
  top:18px;
  z-index:8;
  height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border:1px solid rgba(107,232,255,.12);
  background:rgba(5,11,23,.66);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
html[data-theme="light"] .why-v33-device-top{
  background:rgba(255,255,255,.72);
  border-color:rgba(15,23,42,.08);
}
.why-v33-device-top span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(107,232,255,.55);
}
.why-v33-device-top span:nth-child(2){opacity:.55}
.why-v33-device-top span:nth-child(3){opacity:.30}
.why-v33-device-top strong{
  margin-left:8px;
  color:var(--text);
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.why-v33-visual-stack{
  position:absolute;
  inset:78px 18px 18px;
  z-index:2;
}
.why-v33-visual{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translate3d(0,18px,0) scale(.985);
  transition:opacity .62s var(--ease), transform .62s var(--ease), filter .62s var(--ease);
  filter:blur(4px);
  pointer-events:none;
}
.why-v33-visual.is-active{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}
.why-v33-visual img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center top;
  display:block;
  border:1px solid rgba(107,232,255,.12);
  background:rgba(5,11,23,.72);
  padding:8px;
  box-shadow:0 24px 80px rgba(0,0,0,.20);
}
html[data-theme="light"] .why-v33-visual img{
  background:rgba(255,255,255,.82);
  border-color:rgba(15,23,42,.08);
  box-shadow:0 20px 60px rgba(22,34,64,.10);
}
.why-v33-visual figcaption{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:3;
  padding:8px 10px;
  border:1px solid rgba(107,232,255,.16);
  background:rgba(5,11,23,.70);
  color:var(--text);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}
html[data-theme="light"] .why-v33-visual figcaption{
  background:rgba(255,255,255,.82);
  border-color:rgba(15,23,42,.10);
}
.why-v33-next-step{
  display:grid;
  place-items:center;
  padding:clamp(18px,3vw,48px);
  border:1px solid rgba(107,232,255,.12);
  background:
    radial-gradient(circle at 50% 45%,rgba(24,201,245,.12),transparent 44%),
    rgba(5,11,23,.52);
}
html[data-theme="light"] .why-v33-next-step{
  background:
    radial-gradient(circle at 50% 45%,rgba(14,165,233,.10),transparent 44%),
    rgba(255,255,255,.62);
}
.why-v33-output-card{
  width:min(500px,82%);
  padding:clamp(24px,3vw,42px);
  border:1px solid rgba(107,232,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  box-shadow:0 24px 90px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
  text-align:left;
}
html[data-theme="light"] .why-v33-output-card{
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.58));
  border-color:rgba(15,23,42,.09);
  box-shadow:0 22px 70px rgba(22,34,64,.11),inset 0 1px 0 rgba(255,255,255,.74);
}
.why-v33-output-card span{
  color:var(--cyan-2);
  font-size:12px;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.why-v33-output-card strong{
  display:block;
  margin-top:12px;
  color:var(--text);
  font-size:clamp(28px,3vw,48px);
  line-height:.96;
  letter-spacing:-.065em;
}
.why-v33-output-card p{
  margin:16px 0 0;
  color:var(--secondary);
  font-size:15px;
  line-height:1.6;
}
.why-v33-output-row{
  position:absolute;
  left:50%;
  bottom:56px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
}
.why-v33-output-row b{
  padding:8px 10px;
  border:1px solid rgba(107,232,255,.14);
  background:rgba(24,201,245,.07);
  color:var(--text);
  font-size:12px;
  font-weight:900;
}

.spx-why-v33-note{
  max-width:780px;
  margin:0 auto;
  color:var(--text-soft);
  text-align:center;
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.66;
}

/* Smooth but controlled scroll-in animations. */
.spx-scroll-rise{
  opacity:0;
  transform:translate3d(0,24px,0) scale(.994);
  transition:opacity .82s var(--ease), transform .82s var(--ease);
  will-change:transform,opacity;
}
.reveal.is-visible .spx-scroll-rise,
.spx-scroll-rise.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.reveal.is-visible .spx-scroll-rise:nth-child(2){transition-delay:.08s}
.reveal.is-visible .spx-scroll-rise:nth-child(3){transition-delay:.14s}

@keyframes spxWhyV33Glow{
  from{transform:translate3d(-1.2%,.6%,0) scale(1);opacity:.24}
  to{transform:translate3d(1.2%,-.6%,0) scale(1.06);opacity:.36}
}

@media(max-width:1080px){
  .spx-why-v33-story{
    grid-template-columns:1fr;
  }
  .spx-why-v33-sticky{
    position:relative;
    top:auto;
    min-height:auto;
    order:-1;
  }
  .why-v33-device{
    min-height:clamp(420px,66vw,620px);
  }
  .why-v33-step{
    min-height:auto;
  }
}
@media(max-width:760px){
  .spx-why-section.spx-why-v33{
    margin-top:-160px!important;
    padding-top:190px!important;
  }
  .spx-why-v33-head h2{
    font-size:clamp(42px,13vw,62px);
  }
  .why-v33-device{
    min-height:520px;
  }
  .why-v33-visual-stack{
    inset:72px 12px 12px;
  }
  .why-v33-output-row{
    flex-wrap:wrap;
    justify-content:center;
    bottom:44px;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-why-v33-bg,
  .spx-why-section.spx-why-v33::before,
  .spx-why-section.spx-why-v33::after{
    transform:none!important;
  }
  .why-v33-glow{
    animation:none!important;
  }
  .spx-scroll-rise,
  .why-v33-visual{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    filter:none!important;
  }
  .why-v33-visual:not(.is-active){
    display:none!important;
  }
}


/* ==========================================================================
   A8.34 — continuous hero atmosphere + larger Framer-style tool section
   ========================================================================== */

/* Make the hero atmosphere continue deeper before it resolves into the next section. */
.spx-v26-bottom-fade{
  height:720px!important;
  bottom:-2px!important;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.08) 22%,
      rgba(7,17,31,.20) 44%,
      rgba(7,17,31,.54) 70%,
      rgba(7,17,31,.88) 88%,
      var(--bg-2) 100%)!important;
  z-index:4;
}
html[data-theme="light"] .spx-v26-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.12) 24%,
      rgba(246,248,252,.34) 48%,
      rgba(238,243,250,.66) 72%,
      rgba(238,243,250,.94) 90%,
      #eef3fa 100%)!important;
}

/* New section: more Framer-like, larger sticky tool, much less text. */
.spx-why-section.spx-why-v34{
  position:relative;
  overflow:clip;
  isolation:isolate;
  margin-top:-430px!important;
  padding:clamp(420px,31vw,540px) var(--side) clamp(82px,8vw,135px)!important;
  border:0!important;
  color:var(--text);
  background:
    radial-gradient(1150px 660px at 50% -26%,rgba(24,201,245,.16),transparent 67%),
    radial-gradient(980px 620px at 85% 18%,rgba(37,99,235,.12),transparent 66%),
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.025) 16%,
      rgba(7,17,31,.14) 33%,
      rgba(7,17,31,.48) 58%,
      var(--bg-2) 78%,
      var(--bg) 100%)!important;
}
html[data-theme="light"] .spx-why-section.spx-why-v34{
  background:
    radial-gradient(1150px 660px at 50% -26%,rgba(14,165,233,.12),transparent 67%),
    radial-gradient(980px 620px at 85% 18%,rgba(37,99,235,.08),transparent 66%),
    linear-gradient(180deg,
      rgba(238,243,250,0) 0%,
      rgba(238,243,250,.08) 18%,
      rgba(238,243,250,.26) 38%,
      rgba(238,243,250,.62) 62%,
      #eef3fa 80%,
      #f6f8fc 100%)!important;
}
.spx-why-section.spx-why-v34::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:520px;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(760px 360px at 50% 0%,rgba(24,201,245,.11),transparent 70%),
    linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.08) 54%,rgba(7,17,31,0) 100%);
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.018px),0);
  mask-image:linear-gradient(180deg,black 0%,transparent 100%);
}
html[data-theme="light"] .spx-why-section.spx-why-v34::before{
  background:
    radial-gradient(760px 360px at 50% 0%,rgba(14,165,233,.09),transparent 70%),
    linear-gradient(180deg,rgba(238,243,250,0) 0%,rgba(238,243,250,.34) 54%,rgba(238,243,250,0) 100%);
}
.spx-why-section.spx-why-v34::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(107,232,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.014) 1px,transparent 1px);
  background-size:100px 100px;
  opacity:.18;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.025px),0);
  mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 74%,transparent 100%);
}
html[data-theme="light"] .spx-why-section.spx-why-v34::after{
  opacity:.12;
}

.spx-why-v34-bg{
  position:absolute;
  inset:-26% -10%;
  z-index:0;
  pointer-events:none;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.070px),0);
  will-change:transform;
}
.why-v34-hero-tail{
  position:absolute;
  left:-8%;
  right:-8%;
  top:-3%;
  height:58%;
  display:block;
  background:
    linear-gradient(112deg,
      transparent 0 28%,
      rgba(37,99,235,.04) 38%,
      rgba(24,201,245,.13) 45%,
      rgba(210,244,255,.14) 49%,
      rgba(82,181,230,.10) 55%,
      transparent 73% 100%),
    radial-gradient(ellipse at 50% 24%,rgba(107,232,255,.10),transparent 46%);
  filter:blur(26px) saturate(128%);
  opacity:.60;
  transform:rotate(-18deg);
}
.why-v34-glow{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(56px);
  opacity:.32;
  animation:spxWhyV34Glow 24s ease-in-out infinite alternate;
}
.why-v34-glow.glow-a{
  width:46vw;
  height:13vw;
  left:4%;
  top:8%;
  background:rgba(24,201,245,.13);
}
.why-v34-glow.glow-b{
  width:36vw;
  height:12vw;
  right:6%;
  top:34%;
  background:rgba(37,99,235,.13);
  animation-delay:-8s;
}
.why-v34-mist{
  position:absolute;
  left:12%;
  right:12%;
  top:16%;
  height:34%;
  display:block;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.055),transparent 68%);
  filter:blur(22px);
  opacity:.6;
}
.why-v34-lines{
  position:absolute;
  left:4%;
  right:4%;
  bottom:7%;
  height:40%;
  background:
    linear-gradient(rgba(107,232,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.024) 1px,transparent 1px);
  background-size:86px 86px;
  transform:perspective(900px) rotateX(64deg);
  transform-origin:center bottom;
  opacity:.14;
  mask-image:linear-gradient(180deg,transparent 0%,black 38%,transparent 100%);
}

.spx-why-v34-shell{
  position:relative;
  z-index:2;
  width:min(1450px,100%);
  margin:0 auto;
  display:grid;
  gap:clamp(24px,4vw,54px);
}
.spx-why-v34-head{
  max-width:760px;
}
.spx-why-v34-head h2{
  margin:12px 0 0;
  max-width:850px;
  font-size:clamp(46px,6.1vw,96px);
  line-height:.91;
  letter-spacing:-.085em;
  text-wrap:balance;
}
.spx-why-v34-head p{
  margin:20px 0 0;
  max-width:590px;
  color:var(--text-soft);
  font-size:clamp(16px,1.15vw,20px);
  line-height:1.5;
}

/* More room for the tool, less room for copy. */
.spx-why-v34-story{
  position:relative;
  display:grid;
  grid-template-columns:minmax(260px,.48fr) minmax(660px,1.52fr);
  gap:clamp(28px,4.5vw,78px);
  align-items:start;
}
.spx-why-v34-copy{
  display:grid;
  gap:clamp(12px,2vw,24px);
  padding:clamp(18px,2.4vw,38px) 0;
}
.why-v34-step{
  position:relative;
  min-height:clamp(145px,17vh,220px);
  display:grid;
  align-content:center;
  padding:clamp(16px,2vw,26px) clamp(18px,2.2vw,30px);
  border-left:2px solid rgba(107,232,255,.10);
  background:linear-gradient(90deg,rgba(255,255,255,.024),rgba(255,255,255,0));
  transition:opacity .42s var(--ease), transform .42s var(--ease), border-color .42s var(--ease), background .42s var(--ease);
  opacity:.58;
}
html[data-theme="light"] .why-v34-step{
  background:linear-gradient(90deg,rgba(255,255,255,.52),rgba(255,255,255,0));
  border-left-color:rgba(15,23,42,.09);
}
.why-v34-step.is-active{
  opacity:1;
  transform:translateX(7px);
  border-left-color:rgba(107,232,255,.58);
  background:linear-gradient(90deg,rgba(24,201,245,.070),rgba(255,255,255,0));
}
html[data-theme="light"] .why-v34-step.is-active{
  background:linear-gradient(90deg,rgba(14,165,233,.08),rgba(255,255,255,0));
  border-left-color:rgba(14,165,233,.46);
}
.why-v34-step span{
  color:var(--cyan-2);
  font-size:11px;
  font-weight:950;
  letter-spacing:.14em;
}
.why-v34-step h3{
  margin:10px 0 0;
  color:var(--text);
  font-size:clamp(28px,2.9vw,48px);
  line-height:.96;
  letter-spacing:-.065em;
  text-wrap:balance;
}
.why-v34-step p{
  margin:12px 0 0;
  max-width:390px;
  color:var(--secondary);
  font-size:clamp(14px,.95vw,16px);
  line-height:1.45;
}

/* Larger sticky product/tool view. */
.spx-why-v34-sticky{
  position:sticky;
  top:clamp(82px,10vh,116px);
  min-height:clamp(620px,76vh,840px);
  display:grid;
  align-items:center;
}
.why-v34-device{
  position:relative;
  width:100%;
  min-height:clamp(600px,64vw,820px);
  border:1px solid rgba(107,232,255,.14);
  background:
    radial-gradient(circle at 50% 42%,rgba(24,201,245,.12),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.014));
  box-shadow:0 42px 136px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  backdrop-filter:blur(18px) saturate(128%);
  -webkit-backdrop-filter:blur(18px) saturate(128%);
}
html[data-theme="light"] .why-v34-device{
  border-color:rgba(15,23,42,.09);
  background:
    radial-gradient(circle at 50% 42%,rgba(14,165,233,.10),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.56));
  box-shadow:0 34px 100px rgba(22,34,64,.12),inset 0 1px 0 rgba(255,255,255,.72);
}
.why-v34-device::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,5,13,.25),transparent 24%,transparent 78%,rgba(2,5,13,.20)),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 30%,rgba(0,0,0,.08));
}
html[data-theme="light"] .why-v34-device::before{
  background:
    linear-gradient(90deg,rgba(246,248,252,.40),transparent 24%,transparent 78%,rgba(246,248,252,.32)),
    linear-gradient(180deg,rgba(255,255,255,.24),transparent 30%,rgba(15,23,42,.025));
}
.why-v34-device-top{
  position:relative;
  z-index:6;
  height:48px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 18px;
  border-bottom:1px solid rgba(107,232,255,.12);
  background:rgba(5,11,23,.72);
  backdrop-filter:blur(12px);
}
html[data-theme="light"] .why-v34-device-top{
  background:rgba(255,255,255,.74);
  border-bottom-color:rgba(15,23,42,.08);
}
.why-v34-device-top span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(107,232,255,.55);
}
.why-v34-device-top span:nth-child(2){opacity:.56}
.why-v34-device-top span:nth-child(3){opacity:.34}
.why-v34-device-top strong{
  margin-left:8px;
  color:var(--text);
  font-size:13px;
  font-weight:950;
  letter-spacing:.02em;
}

.why-v34-visual-stack{
  position:absolute;
  inset:48px 0 0;
}
.why-v34-visual{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  transform:translateY(18px) scale(.992);
  transition:opacity .48s var(--ease), transform .48s var(--ease);
  pointer-events:none;
}
.why-v34-visual.is-active{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.why-v34-visual img{
  position:absolute;
  inset:18px 18px 116px;
  width:calc(100% - 36px);
  height:calc(100% - 134px);
  object-fit:contain;
  object-position:center top;
  border:1px solid rgba(107,232,255,.12);
  background:rgba(4,10,20,.78);
  box-shadow:0 26px 74px rgba(0,0,0,.20);
}
html[data-theme="light"] .why-v34-visual img{
  background:rgba(255,255,255,.84);
  border-color:rgba(15,23,42,.08);
}
.why-v34-visual figcaption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:6;
  display:grid;
  gap:6px;
  padding:18px 20px;
  border:1px solid rgba(107,232,255,.13);
  background:rgba(5,11,23,.74);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
html[data-theme="light"] .why-v34-visual figcaption{
  background:rgba(255,255,255,.78);
  border-color:rgba(15,23,42,.08);
}
.why-v34-visual figcaption b{
  color:var(--text);
  font-size:clamp(25px,2.7vw,42px);
  line-height:.95;
  letter-spacing:-.055em;
}
.why-v34-visual figcaption span{
  color:var(--secondary);
  font-size:14px;
  line-height:1.42;
}

.why-v34-next-canvas{
  position:absolute;
  inset:18px 18px 116px;
  display:grid;
  place-items:center;
  padding:clamp(24px,4vw,58px);
  border:1px solid rgba(107,232,255,.12);
  background:
    radial-gradient(circle at 50% 38%,rgba(24,201,245,.14),transparent 44%),
    linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.016));
}
html[data-theme="light"] .why-v34-next-canvas{
  background:
    radial-gradient(circle at 50% 38%,rgba(14,165,233,.11),transparent 44%),
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.56));
}
.next-main{
  width:min(560px,78%);
  min-height:260px;
  display:grid;
  place-content:center;
  text-align:center;
  padding:36px;
  border:1px solid rgba(107,232,255,.16);
  background:rgba(5,11,23,.62);
  box-shadow:0 0 80px rgba(24,201,245,.14),inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="light"] .next-main{
  background:rgba(255,255,255,.72);
  border-color:rgba(15,23,42,.08);
}
.next-main span{
  color:var(--cyan-2);
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.next-main strong{
  display:block;
  margin-top:12px;
  color:var(--text);
  font-size:clamp(34px,4vw,64px);
  line-height:.94;
  letter-spacing:-.07em;
}
.next-paths{
  position:absolute;
  left:50%;
  bottom:clamp(22px,3vw,46px);
  transform:translateX(-50%);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  width:min(640px,88%);
}
.next-paths b{
  padding:10px 13px;
  border:1px solid rgba(107,232,255,.12);
  color:var(--text);
  background:rgba(5,11,23,.58);
  font-size:13px;
  border-radius:999px;
}
html[data-theme="light"] .next-paths b{
  background:rgba(255,255,255,.70);
  border-color:rgba(15,23,42,.08);
}

.spx-why-v34-note{
  max-width:680px;
  margin:0 auto;
  text-align:center;
  color:var(--text-soft);
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.6;
}

/* Keep A8.31 smooth reveal behavior, tuned for the new compact section. */
.spx-why-v34 .spx-scroll-rise{
  opacity:0;
  transform:translate3d(0,22px,0) scale(.994);
  transition:opacity .82s var(--ease), transform .82s var(--ease);
  will-change:transform,opacity;
}
.spx-why-v34.reveal.is-visible .spx-scroll-rise,
.spx-why-v34 .spx-scroll-rise.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.spx-why-v34.reveal.is-visible .spx-scroll-rise:nth-child(2){transition-delay:.08s}
.spx-why-v34.reveal.is-visible .spx-scroll-rise:nth-child(3){transition-delay:.14s}

@keyframes spxWhyV34Glow{
  from{transform:translate3d(-1.3%,.6%,0) scale(1);opacity:.25}
  to{transform:translate3d(1.3%,-.6%,0) scale(1.07);opacity:.38}
}

@media(max-width:1180px){
  .spx-why-v34-story{
    grid-template-columns:minmax(0,1fr);
  }
  .spx-why-v34-sticky{
    position:relative;
    top:auto;
    min-height:auto;
    order:-1;
  }
  .why-v34-device{
    min-height:clamp(520px,74vw,760px);
  }
  .spx-why-v34-copy{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .why-v34-step{
    min-height:200px;
  }
}
@media(max-width:820px){
  .spx-why-section.spx-why-v34{
    margin-top:-250px!important;
    padding-top:300px!important;
  }
  .spx-why-v34-copy{
    grid-template-columns:1fr;
  }
  .why-v34-device{
    min-height:620px;
  }
  .why-v34-visual img,
  .why-v34-next-canvas{
    inset:16px 16px 128px;
    height:calc(100% - 144px);
    width:calc(100% - 32px);
  }
  .why-v34-visual figcaption{
    left:16px;
    right:16px;
    bottom:16px;
  }
}
@media(max-width:620px){
  .spx-why-v34-head h2{
    font-size:clamp(42px,13vw,62px);
  }
  .why-v34-device{
    min-height:560px;
  }
  .why-v34-visual figcaption b{
    font-size:28px;
  }
  .next-main{
    width:90%;
    min-height:220px;
    padding:26px;
  }
  .next-main strong{
    font-size:36px;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-why-v34-bg,
  .spx-why-section.spx-why-v34::before,
  .spx-why-section.spx-why-v34::after{
    transform:none!important;
  }
  .why-v34-glow{
    animation:none!important;
  }
  .spx-why-v34 .spx-scroll-rise{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}


/* ==========================================================================
   A8.35 — seam fix + right-edge sticky tool alignment + leaner Why section
   ========================================================================== */

/* Blend hero and Why more aggressively to reduce the visible horizontal seam. */
.spx-v26-bottom-fade{
  height:860px!important;
  bottom:-4px!important;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.05) 16%,
      rgba(7,17,31,.14) 34%,
      rgba(7,17,31,.34) 54%,
      rgba(7,17,31,.70) 76%,
      rgba(7,17,31,.94) 92%,
      var(--bg-2) 100%)!important;
}
html[data-theme="light"] .spx-v26-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.07) 18%,
      rgba(246,248,252,.18) 36%,
      rgba(238,243,250,.42) 58%,
      rgba(238,243,250,.78) 80%,
      rgba(238,243,250,.97) 92%,
      #eef3fa 100%)!important;
}

.spx-why-section.spx-why-v34{
  margin-top:-560px!important;
  padding-top:560px!important;
  box-shadow:0 -150px 200px -60px rgba(7,17,31,.95)!important;
}
html[data-theme="light"] .spx-why-section.spx-why-v34{
  box-shadow:0 -150px 200px -60px rgba(238,243,250,.98)!important;
}
.spx-why-section.spx-why-v34::before{
  top:-180px!important;
  height:760px!important;
  opacity:.95;
  filter:blur(8px);
}
.spx-why-v34-bg{
  inset:-34% -12% -8%!important;
}
.why-v34-hero-tail{
  top:-8%!important;
  height:68%!important;
  opacity:.70;
  filter:blur(30px) saturate(132%);
}

/* Give the right sticky tool more dominance and pull it toward the screen edge. */
.spx-why-v34-shell{
  width:min(1580px,100%)!important;
}
.spx-why-v34-story{
  grid-template-columns:minmax(230px,.34fr) minmax(760px,1.66fr)!important;
  gap:clamp(20px,3.6vw,56px)!important;
}
.spx-why-v34-copy{
  max-width:420px;
  padding-top:clamp(18px,2.2vw,32px)!important;
}
.why-v34-step{
  min-height:clamp(126px,14vh,174px)!important;
  padding:18px 22px!important;
}
.why-v34-step h3{
  font-size:clamp(24px,2.4vw,40px)!important;
  max-width:360px;
}
.why-v34-step p{
  max-width:300px;
  font-size:14px!important;
}

.spx-why-v34-sticky{
  justify-self:end!important;
  width:min(1120px, calc(100vw - 20px))!important;
  margin-right:clamp(-120px, -7vw, -28px)!important;
  top:clamp(64px, calc(50vh - 360px), 126px)!important;
  min-height:clamp(660px,78vh,860px)!important;
}
.why-v34-device{
  min-height:clamp(680px,67vw,880px)!important;
}
.why-v34-visual img{
  inset:16px 16px 110px!important;
  width:calc(100% - 32px)!important;
  height:calc(100% - 126px)!important;
}
.why-v34-visual figcaption{
  left:16px!important;
  right:16px!important;
  bottom:16px!important;
  padding:18px 20px!important;
}
.why-v34-visual figcaption b{
  font-size:clamp(28px,2.8vw,46px)!important;
}
.why-v34-next-canvas{
  inset:16px 16px 110px!important;
  width:calc(100% - 32px)!important;
  height:calc(100% - 126px)!important;
}
.next-main{
  width:min(620px,80%)!important;
  min-height:300px!important;
}
.next-main strong{
  font-size:clamp(40px,4vw,70px)!important;
}

.spx-why-v34-note{
  max-width:540px!important;
  font-size:16px!important;
}

/* Keep edge-pulled layout only on large screens. */
@media(max-width:1180px){
  .spx-why-section.spx-why-v34{
    margin-top:-320px!important;
    padding-top:360px!important;
  }
  .spx-why-v34-story{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .spx-why-v34-copy{
    max-width:none;
  }
  .spx-why-v34-sticky{
    width:100%!important;
    margin-right:0!important;
    top:auto!important;
    min-height:auto!important;
  }
  .why-v34-device{
    min-height:clamp(520px,74vw,760px)!important;
  }
}
@media(max-width:820px){
  .spx-v26-bottom-fade{
    height:640px!important;
  }
  .spx-why-section.spx-why-v34{
    margin-top:-240px!important;
    padding-top:290px!important;
  }
}


/* ==========================================================================
   A8.36 — continuous hero + workflow journey + nav/logo/top-scroll polish
   ========================================================================== */

/* Navigator: larger logo, no border bottom, no hover pill, shrink on scroll. */
.site-header.spx-nav-v26{
  border-bottom:0!important;
  box-shadow:none!important;
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  transition:background .28s var(--ease), transform .28s var(--ease), padding .28s var(--ease), box-shadow .28s var(--ease);
}
.site-header.spx-nav-v26.is-scrolled{
  background:rgba(4,10,20,.72)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
html[data-theme="light"] .site-header.spx-nav-v26.is-scrolled{
  background:rgba(255,255,255,.76)!important;
  box-shadow:0 18px 46px rgba(20,34,62,.10)!important;
}
.spx-nav-v26 .brand{
  gap:14px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  transition:transform .25s var(--ease), gap .25s var(--ease);
}
.spx-nav-v26 .brand:hover,
.spx-nav-v26 .brand:focus-visible{
  background:transparent!important;
  box-shadow:none!important;
  transform:translateY(-1px);
}
.spx-nav-v26 .brand img{
  width:50px!important;
  height:50px!important;
  transition:width .25s var(--ease), height .25s var(--ease), transform .25s var(--ease);
}
.spx-nav-v26 .brand span{
  font-size:34px!important;
  line-height:1!important;
  letter-spacing:-.06em!important;
  transition:font-size .25s var(--ease), opacity .25s var(--ease);
}
.site-header.spx-nav-v26.is-scrolled .brand img{
  width:40px!important;
  height:40px!important;
}
.site-header.spx-nav-v26.is-scrolled .brand span{
  font-size:28px!important;
}
.spx-nav-v26 .site-nav>a,
.spx-nav-v26 .nav-group>a{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:8px 0!important;
}
.spx-nav-v26 .site-nav>a:hover,
.spx-nav-v26 .nav-group:hover>a,
.spx-nav-v26 .site-nav>a:focus-visible,
.spx-nav-v26 .nav-group>a:focus-visible{
  background:transparent!important;
  box-shadow:none!important;
}
.spx-nav-v26 .site-nav>a::before,
.spx-nav-v26 .nav-group>a::before{
  display:none!important;
}
.spx-nav-v26 .site-nav>a::after,
.spx-nav-v26 .nav-group>a::after{
  bottom:-6px!important;
}
.spx-nav-v26 .nav-actions{
  gap:12px!important;
}

/* Hero → Why as one continuous atmosphere. */
.spx-v26-bottom-fade{
  height:1020px!important;
  bottom:-6px!important;
  z-index:4;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.05) 14%,
      rgba(7,17,31,.11) 28%,
      rgba(7,17,31,.20) 42%,
      rgba(7,17,31,.38) 58%,
      rgba(7,17,31,.62) 74%,
      rgba(7,17,31,.86) 90%,
      var(--bg-2) 100%)!important;
}
html[data-theme="light"] .spx-v26-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.06) 14%,
      rgba(246,248,252,.11) 28%,
      rgba(246,248,252,.22) 44%,
      rgba(238,243,250,.44) 62%,
      rgba(238,243,250,.74) 82%,
      rgba(238,243,250,.96) 92%,
      #eef3fa 100%)!important;
}

.spx-why-section.spx-why-v36{
  position:relative;
  overflow:clip;
  isolation:isolate;
  margin-top:-760px!important;
  padding:740px var(--side) 120px!important;
  border:0!important;
  box-shadow:none!important;
  background:
    radial-gradient(1250px 720px at 52% -16%,rgba(24,201,245,.13),transparent 66%),
    radial-gradient(1100px 680px at 88% 26%,rgba(37,99,235,.12),transparent 68%),
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.03) 12%,
      rgba(7,17,31,.09) 24%,
      rgba(7,17,31,.18) 38%,
      rgba(7,17,31,.34) 54%,
      rgba(7,17,31,.62) 72%,
      var(--bg-2) 86%,
      var(--bg) 100%)!important;
}
html[data-theme="light"] .spx-why-section.spx-why-v36{
  background:
    radial-gradient(1250px 720px at 52% -16%,rgba(14,165,233,.11),transparent 66%),
    radial-gradient(1100px 680px at 88% 26%,rgba(37,99,235,.08),transparent 68%),
    linear-gradient(180deg,
      rgba(238,243,250,0) 0%,
      rgba(238,243,250,.04) 14%,
      rgba(238,243,250,.12) 28%,
      rgba(238,243,250,.22) 42%,
      rgba(238,243,250,.42) 58%,
      rgba(238,243,250,.72) 78%,
      #eef3fa 88%,
      #f6f8fc 100%)!important;
}
.spx-why-section.spx-why-v36::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(107,232,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.015) 1px,transparent 1px);
  background-size:96px 96px;
  opacity:.15;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.026px),0);
  mask-image:linear-gradient(180deg,transparent 0%,black 18%,black 82%,transparent 100%);
}
html[data-theme="light"] .spx-why-section.spx-why-v36::before{opacity:.10}
.spx-why-v36-bg{
  position:absolute;
  inset:-32% -10% -10%;
  z-index:0;
  pointer-events:none;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.072px),0);
  will-change:transform;
}
.why-v36-hero-tail{
  position:absolute;
  left:-10%;
  right:-10%;
  top:-8%;
  height:66%;
  display:block;
  background:
    linear-gradient(112deg,
      transparent 0 24%,
      rgba(37,99,235,.04) 36%,
      rgba(24,201,245,.12) 43%,
      rgba(215,244,255,.14) 49%,
      rgba(86,176,229,.10) 55%,
      transparent 74% 100%),
    radial-gradient(ellipse at 50% 22%,rgba(107,232,255,.10),transparent 46%);
  filter:blur(34px) saturate(130%);
  opacity:.72;
  transform:rotate(-18deg);
}
.why-v36-glow{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(62px);
  opacity:.30;
  animation:spxWhyV36Glow 24s ease-in-out infinite alternate;
}
.why-v36-glow.glow-a{width:44vw;height:14vw;left:4%;top:10%;background:rgba(24,201,245,.12)}
.why-v36-glow.glow-b{width:36vw;height:13vw;right:7%;top:36%;background:rgba(37,99,235,.12);animation-delay:-8s}
.why-v36-mist{
  position:absolute;left:10%;right:10%;top:20%;height:36%;display:block;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.06),transparent 70%);
  filter:blur(24px);opacity:.58;
}
.why-v36-grid{
  position:absolute;left:5%;right:5%;bottom:7%;height:38%;
  background:
    linear-gradient(rgba(107,232,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.024) 1px,transparent 1px);
  background-size:86px 86px;
  transform:perspective(1000px) rotateX(66deg);
  transform-origin:center bottom;
  opacity:.12;
  mask-image:linear-gradient(180deg,transparent 0%,black 36%,transparent 100%);
}

.spx-why-v36-shell{
  position:relative;
  z-index:2;
  width:min(1640px,100%);
  margin:0 auto;
  display:grid;
  gap:34px;
}
.spx-why-v36-head{
  max-width:900px;
}
.spx-why-v36-head h2{
  margin:14px 0 0;
  max-width:980px;
  font-size:clamp(52px,6.4vw,102px);
  line-height:.92;
  letter-spacing:-.085em;
  text-wrap:balance;
}
.spx-why-v36-head p{
  margin:20px 0 0;
  max-width:600px;
  color:var(--text-soft);
  font-size:clamp(17px,1.2vw,21px);
  line-height:1.5;
}

.spx-why-v36-journey{
  position:relative;
  display:grid;
  grid-template-columns:minmax(320px,.62fr) minmax(760px,1.38fr);
  gap:clamp(20px,4vw,56px);
  align-items:start;
}
.spx-why-v36-steps{
  display:grid;
  gap:0;
  padding:8px 0 0;
}
.why-v36-step{
  min-height:72vh;
  display:grid;
  align-content:center;
  padding:26px 28px;
  border-left:2px solid rgba(107,232,255,.10);
  opacity:.38;
  transition:opacity .38s var(--ease), transform .38s var(--ease), border-color .38s var(--ease), background .38s var(--ease);
  background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,0));
}
html[data-theme="light"] .why-v36-step{
  border-left-color:rgba(15,23,42,.08);
  background:linear-gradient(90deg,rgba(255,255,255,.46),rgba(255,255,255,0));
}
.why-v36-step.is-active{
  opacity:1;
  transform:translateX(8px);
  border-left-color:rgba(107,232,255,.58);
  background:linear-gradient(90deg,rgba(24,201,245,.08),rgba(255,255,255,0));
}
html[data-theme="light"] .why-v36-step.is-active{
  border-left-color:rgba(14,165,233,.42);
  background:linear-gradient(90deg,rgba(14,165,233,.08),rgba(255,255,255,0));
}
.why-v36-step span{
  color:var(--cyan-2);
  font-size:12px;
  font-weight:960;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.why-v36-step h3{
  margin:12px 0 0;
  color:var(--text);
  font-size:clamp(34px,3.35vw,58px);
  line-height:.96;
  letter-spacing:-.07em;
  text-wrap:balance;
  max-width:470px;
}
.why-v36-step p{
  margin:14px 0 0;
  max-width:410px;
  color:var(--secondary);
  font-size:clamp(15px,1vw,17px);
  line-height:1.52;
}
.why-v36-step ul{
  display:grid;
  gap:10px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}
.why-v36-step li{
  position:relative;
  padding-left:22px;
  color:var(--text-soft);
  font-size:14px;
  line-height:1.44;
}
.why-v36-step li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan-2);
  box-shadow:0 0 16px rgba(24,201,245,.35);
}
.why-v36-step small{
  display:block;
  margin-top:14px;
  color:var(--secondary);
  font-size:13px;
  line-height:1.45;
}

.spx-why-v36-sticky{
  position:sticky;
  top:calc(50vh - 300px);
  justify-self:end;
  width:min(1160px, calc(100vw - 24px));
  margin-right:clamp(-170px,-9vw,-54px);
  min-height:78vh;
  display:grid;
  align-items:center;
}
.why-v36-stage{
  position:relative;
  width:100%;
  min-height:650px;
  border:1px solid rgba(107,232,255,.14);
  background:
    radial-gradient(circle at 50% 42%,rgba(24,201,245,.11),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  box-shadow:0 46px 140px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}
html[data-theme="light"] .why-v36-stage{
  border-color:rgba(15,23,42,.09);
  background:
    radial-gradient(circle at 50% 42%,rgba(14,165,233,.10),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.56));
  box-shadow:0 30px 96px rgba(22,34,64,.12),inset 0 1px 0 rgba(255,255,255,.72);
}
.why-v36-stage::before{
  content:"";
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,5,13,.22),transparent 22%,transparent 82%,rgba(2,5,13,.18)),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 34%,rgba(0,0,0,.08));
}
html[data-theme="light"] .why-v36-stage::before{
  background:
    linear-gradient(90deg,rgba(246,248,252,.34),transparent 22%,transparent 82%,rgba(246,248,252,.26)),
    linear-gradient(180deg,rgba(255,255,255,.22),transparent 34%,rgba(15,23,42,.025));
}
.why-v36-stage-top{
  position:relative;z-index:6;height:50px;display:flex;align-items:center;gap:10px;
  padding:0 18px;border-bottom:1px solid rgba(107,232,255,.12);background:rgba(5,11,23,.72);
  backdrop-filter:blur(12px);
}
html[data-theme="light"] .why-v36-stage-top{background:rgba(255,255,255,.74);border-bottom-color:rgba(15,23,42,.08)}
.why-v36-stage-top span{width:9px;height:9px;border-radius:50%;background:rgba(107,232,255,.55)}
.why-v36-stage-top span:nth-child(2){opacity:.58}
.why-v36-stage-top span:nth-child(3){opacity:.34}
.why-v36-stage-top strong{margin-left:8px;color:var(--text);font-size:13px;font-weight:950;letter-spacing:.02em}

.why-v36-visuals{position:absolute;inset:50px 0 0}
.why-v36-visual{
  position:absolute;inset:0;margin:0;opacity:0;transform:translateY(20px) scale(.992);
  transition:opacity .44s var(--ease), transform .44s var(--ease);pointer-events:none;
}
.why-v36-visual.is-active{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.why-v36-visual img{
  position:absolute;
  inset:18px 18px 110px;
  width:calc(100% - 36px);
  height:calc(100% - 128px);
  object-fit:contain;
  object-position:center;
  border:1px solid rgba(107,232,255,.10);
  background:rgba(4,10,20,.78);
  box-shadow:0 24px 74px rgba(0,0,0,.22);
}
html[data-theme="light"] .why-v36-visual img{
  background:rgba(255,255,255,.82);
  border-color:rgba(15,23,42,.08);
}
.why-v36-visual figcaption{
  position:absolute;left:18px;right:18px;bottom:18px;z-index:6;display:grid;gap:6px;
  padding:18px 20px;border:1px solid rgba(107,232,255,.12);background:rgba(5,11,23,.74);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
html[data-theme="light"] .why-v36-visual figcaption{
  background:rgba(255,255,255,.78);border-color:rgba(15,23,42,.08);
}
.why-v36-visual figcaption b{
  color:var(--text);
  font-size:clamp(26px,2.8vw,44px);
  line-height:.94;
  letter-spacing:-.055em;
}
.why-v36-visual figcaption span{
  color:var(--secondary);
  font-size:14px;
  line-height:1.45;
}

/* Back-to-top button */
.spx-scroll-top{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:70;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(107,232,255,.18);
  background:rgba(4,10,20,.76);
  color:var(--text);
  box-shadow:0 20px 46px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:22px;
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity .26s var(--ease), transform .26s var(--ease), border-color .26s var(--ease), background .26s var(--ease);
}
.spx-scroll-top.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.spx-scroll-top:hover,
.spx-scroll-top:focus-visible{
  border-color:rgba(107,232,255,.38);
  background:rgba(7,16,31,.92);
}
html[data-theme="light"] .spx-scroll-top{
  background:rgba(255,255,255,.78);
  border-color:rgba(15,23,42,.10);
  box-shadow:0 18px 38px rgba(22,34,64,.10), inset 0 1px 0 rgba(255,255,255,.72);
}

/* reveal tuning */
.spx-why-v36 .spx-scroll-rise{
  opacity:0;
  transform:translate3d(0,22px,0) scale(.994);
  transition:opacity .82s var(--ease), transform .82s var(--ease);
}
.spx-why-v36.reveal.is-visible .spx-scroll-rise,
.spx-why-v36 .spx-scroll-rise.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

@keyframes spxWhyV36Glow{
  from{transform:translate3d(-1.2%,.5%,0) scale(1);opacity:.24}
  to{transform:translate3d(1.2%,-.5%,0) scale(1.08);opacity:.36}
}

@media(max-width:1240px){
  .spx-why-section.spx-why-v36{
    margin-top:-520px!important;
    padding-top:540px!important;
  }
  .spx-why-v36-journey{
    grid-template-columns:minmax(0,1fr);
  }
  .spx-why-v36-sticky{
    position:relative;
    top:auto;
    width:100%;
    margin-right:0;
    min-height:auto;
  }
  .why-v36-stage{
    min-height:620px;
  }
  .why-v36-step{
    min-height:50vh;
  }
}
@media(max-width:820px){
  .spx-v26-bottom-fade{height:720px!important}
  .spx-why-section.spx-why-v36{
    margin-top:-280px!important;
    padding-top:330px!important;
  }
  .spx-nav-v26 .brand img{width:42px!important;height:42px!important}
  .spx-nav-v26 .brand span{font-size:28px!important}
  .spx-why-v36-head h2{font-size:clamp(42px,12vw,64px)}
  .why-v36-step{min-height:46vh;padding:20px}
  .why-v36-step h3{font-size:clamp(30px,8vw,42px)}
  .why-v36-stage{min-height:540px}
  .why-v36-visual img{inset:14px 14px 102px}
  .why-v36-visual figcaption{left:14px;right:14px;bottom:14px}
}
@media(prefers-reduced-motion:reduce){
  .spx-why-v36-bg,.spx-why-section.spx-why-v36::before{transform:none!important}
  .why-v36-glow{animation:none!important}
  .spx-scroll-top{transition:none!important}
}


/* ==========================================================================
   A8.37 — logged-in user menu + single cosmic hero/why atmosphere
   ========================================================================== */

/* Single continuous cosmic background for homepage hero + Why. */
.spx-home-main{
  position:relative;
  overflow:clip;
  background:#07111f;
}
html[data-theme="light"] .spx-home-main{
  background:#eef3fa;
}
.spx-home-main::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  top:0;
  left:0;
  right:0;
  height:min(3600px,320vh);
  background:
    radial-gradient(1100px 720px at 54% 3%,rgba(24,201,245,.18),transparent 64%),
    radial-gradient(1050px 660px at 80% 18%,rgba(37,99,235,.15),transparent 66%),
    radial-gradient(900px 620px at 18% 48%,rgba(69,212,255,.10),transparent 66%),
    linear-gradient(112deg,
      transparent 0 23%,
      rgba(37,99,235,.035) 35%,
      rgba(24,201,245,.14) 43%,
      rgba(215,244,255,.16) 49%,
      rgba(77,164,220,.11) 56%,
      transparent 76% 100%),
    linear-gradient(180deg,#02050d 0%,#06101d 46%,#07111f 72%,#07111f 100%);
  filter:saturate(126%);
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.075px),0);
  will-change:transform;
}
.spx-home-main::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  top:0;
  left:0;
  right:0;
  height:min(3600px,320vh);
  opacity:.54;
  background:
    radial-gradient(circle at 8% 18%,rgba(255,255,255,.58) 0 1px,transparent 1.7px),
    radial-gradient(circle at 23% 12%,rgba(107,232,255,.50) 0 1px,transparent 1.6px),
    radial-gradient(circle at 72% 9%,rgba(255,255,255,.56) 0 1px,transparent 1.7px),
    radial-gradient(circle at 84% 34%,rgba(107,232,255,.48) 0 1px,transparent 1.6px),
    radial-gradient(circle at 35% 42%,rgba(255,255,255,.42) 0 1px,transparent 1.8px),
    linear-gradient(rgba(107,232,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.014) 1px,transparent 1px);
  background-size:
    470px 360px,
    390px 320px,
    520px 410px,
    460px 380px,
    540px 430px,
    96px 96px,
    96px 96px;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.11px),0);
  animation:spxHomeStarDrift 34s linear infinite;
  will-change:transform,background-position;
}
html[data-theme="light"] .spx-home-main::before{
  background:
    radial-gradient(1100px 720px at 54% 3%,rgba(14,165,233,.14),transparent 64%),
    radial-gradient(1050px 660px at 80% 18%,rgba(37,99,235,.09),transparent 66%),
    radial-gradient(900px 620px at 18% 48%,rgba(69,212,255,.08),transparent 66%),
    linear-gradient(112deg,
      transparent 0 23%,
      rgba(37,99,235,.026) 35%,
      rgba(14,165,233,.10) 43%,
      rgba(255,255,255,.30) 49%,
      rgba(77,164,220,.08) 56%,
      transparent 76% 100%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 50%,#eef3fa 100%);
}
html[data-theme="light"] .spx-home-main::after{
  opacity:.30;
}
.spx-home-main > *{
  position:relative;
  z-index:1;
}
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36{
  background:transparent!important;
}
.spx-home-main .spx-why-section.spx-why-v36{
  box-shadow:none!important;
}
.spx-v26-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.035) 25%,
      rgba(7,17,31,.070) 48%,
      rgba(7,17,31,.10) 68%,
      rgba(7,17,31,0) 100%)!important;
  height:1060px!important;
  bottom:-8px!important;
}
html[data-theme="light"] .spx-v26-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(238,243,250,0) 0%,
      rgba(238,243,250,.06) 30%,
      rgba(238,243,250,.10) 52%,
      rgba(238,243,250,.04) 100%)!important;
}
.spx-why-section.spx-why-v36{
  margin-top:-780px!important;
  padding-top:760px!important;
}
.spx-why-v36-bg{
  inset:-40% -12% -12%!important;
}
.why-v36-hero-tail{
  opacity:.86!important;
  height:76%!important;
  filter:blur(38px) saturate(140%)!important;
}

/* More alive hero/why nebula without adding another heavy canvas. */
.spx-v26-sky::before{
  opacity:.86!important;
  filter:blur(24px) saturate(148%)!important;
}
.v26-cloud{
  opacity:.48!important;
}
.why-v36-glow{
  opacity:.42!important;
}
.why-v36-mist{
  opacity:.72!important;
}

/* Logged-in public nav user menu. */
.nav-user-menu{
  position:relative;
}
.nav-user-trigger{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px 6px 6px;
  border:1px solid rgba(107,232,255,.13);
  background:rgba(255,255,255,.045);
  color:var(--text);
  cursor:pointer;
  font-weight:950;
  letter-spacing:-.02em;
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.nav-user-trigger:hover,
.nav-user-menu:focus-within .nav-user-trigger{
  background:rgba(24,201,245,.08);
  border-color:rgba(107,232,255,.28);
  transform:translateY(-1px);
}
.nav-user-trigger img{
  width:34px;
  height:34px;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(107,232,255,.18),0 0 20px rgba(24,201,245,.13);
}
.nav-user-trigger span{
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.spx-icon{
  width:18px;
  height:18px;
  display:inline-block;
  flex:0 0 auto;
  position:relative;
}
.spx-icon-chevron::before{
  content:"";
  position:absolute;
  left:5px;
  top:5px;
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  opacity:.74;
}
.spx-icon-dashboard::before{
  content:"";
  position:absolute;
  inset:3px;
  border:2px solid currentColor;
  border-radius:4px;
}
.spx-icon-dashboard::after{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  top:8px;
  height:2px;
  background:currentColor;
  box-shadow:0 4px 0 currentColor;
}
.spx-icon-logout::before{
  content:"";
  position:absolute;
  left:2px;
  top:4px;
  width:8px;
  height:10px;
  border:2px solid currentColor;
  border-right:0;
  border-radius:3px 0 0 3px;
}
.spx-icon-logout::after{
  content:"";
  position:absolute;
  right:1px;
  top:8px;
  width:11px;
  height:2px;
  background:currentColor;
  box-shadow:4px -4px 0 -1px transparent;
}
.nav-user-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 12px);
  width:220px;
  display:grid;
  gap:6px;
  padding:10px;
  border:1px solid rgba(107,232,255,.14);
  background:rgba(5,11,23,.96);
  box-shadow:0 28px 86px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease);
  z-index:220;
}
html[data-theme="light"] .nav-user-dropdown{
  background:rgba(255,255,255,.98);
  border-color:rgba(15,23,42,.09);
  box-shadow:0 24px 70px rgba(20,34,62,.14), inset 0 1px 0 rgba(255,255,255,.72);
}
.nav-user-menu:hover .nav-user-dropdown,
.nav-user-menu:focus-within .nav-user-dropdown,
.nav-user-menu.is-open .nav-user-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav-user-menu.is-open .spx-icon-chevron::before,
.nav-user-menu:hover .spx-icon-chevron::before,
.nav-user-menu:focus-within .spx-icon-chevron::before{
  transform:rotate(225deg);
  top:7px;
}
.nav-user-dropdown a{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  color:var(--text-soft);
  text-decoration:none;
  font-weight:900;
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.nav-user-dropdown a:hover,
.nav-user-dropdown a:focus-visible{
  color:var(--text);
  background:rgba(24,201,245,.09);
  transform:translateX(2px);
}

/* Why stage: less static block, more animated product surface. */
.spx-why-v36-sticky{
  perspective:1200px;
}
.why-v36-stage{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform:translateZ(0);
}
.why-v36-stage::before{
  display:none!important;
}
.why-v36-stage::after{
  content:"";
  position:absolute;
  inset:6% -3% 2% 4%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 60% 42%,rgba(24,201,245,.22),transparent 48%),
    radial-gradient(circle at 82% 18%,rgba(37,99,235,.16),transparent 44%);
  filter:blur(34px);
  opacity:.72;
  animation:spxWhyStagePulse 8s ease-in-out infinite alternate;
}
.why-v36-stage-top{
  position:absolute!important;
  left:28px;
  top:18px;
  z-index:8!important;
  width:auto;
  height:42px!important;
  border:1px solid rgba(107,232,255,.13)!important;
  background:rgba(5,11,23,.58)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.18);
}
html[data-theme="light"] .why-v36-stage-top{
  background:rgba(255,255,255,.70)!important;
}
.why-v36-visuals{
  inset:0!important;
  overflow:visible;
}
.why-v36-visual{
  transform:translate3d(44px,18px,0) scale(.985);
}
.why-v36-visual.is-active{
  transform:translate3d(0,0,0) scale(1);
}
.why-v36-visual::before{
  content:"";
  position:absolute;
  inset:5% 0 16% 8%;
  border:1px solid rgba(107,232,255,.10);
  background:
    linear-gradient(rgba(107,232,255,.030) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.024) 1px,transparent 1px),
    rgba(5,11,23,.20);
  background-size:52px 52px;
  transform:translateX(7%);
  z-index:0;
  opacity:.72;
}
html[data-theme="light"] .why-v36-visual::before{
  background:
    linear-gradient(rgba(14,165,233,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,165,233,.020) 1px,transparent 1px),
    rgba(255,255,255,.28);
}
.why-v36-visual img{
  z-index:2;
  inset:38px -36px 118px 26px!important;
  width:calc(100% + 10px)!important;
  height:calc(100% - 156px)!important;
  border:1px solid rgba(107,232,255,.16)!important;
  background:rgba(5,11,23,.76)!important;
  box-shadow:0 32px 94px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.035) inset;
  transform:translate3d(0,0,0);
  animation:spxWhyVisualFloat 7s ease-in-out infinite alternate;
}
html[data-theme="light"] .why-v36-visual img{
  background:rgba(255,255,255,.86)!important;
  border-color:rgba(15,23,42,.10)!important;
  box-shadow:0 28px 70px rgba(20,34,62,.14), 0 0 0 1px rgba(255,255,255,.72) inset;
}
.why-v36-visual figcaption{
  z-index:6;
  left:40px!important;
  right:60px!important;
  bottom:24px!important;
  border:1px solid rgba(107,232,255,.14)!important;
  background:rgba(5,11,23,.72)!important;
  box-shadow:0 22px 66px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="light"] .why-v36-visual figcaption{
  background:rgba(255,255,255,.80)!important;
  border-color:rgba(15,23,42,.09)!important;
}

/* Why headers: inactive turns into outline, active becomes filled during scroll. */
.why-v36-step h3{
  transition:color .38s var(--ease), -webkit-text-stroke-color .38s var(--ease), opacity .38s var(--ease), transform .38s var(--ease);
}
.why-v36-step:not(.is-active) h3{
  color:transparent!important;
  -webkit-text-stroke:1.25px rgba(245,250,255,.38);
  text-shadow:none;
  opacity:.86;
}
html[data-theme="light"] .why-v36-step:not(.is-active) h3{
  -webkit-text-stroke-color:rgba(16,24,40,.34);
}
.why-v36-step.is-active h3{
  color:var(--text)!important;
  -webkit-text-stroke:0 transparent;
  opacity:1;
}

@keyframes spxHomeStarDrift{
  from{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0}
  to{background-position:90px 120px,-80px 70px,70px -90px,-120px 100px,100px 80px,96px 96px,96px 96px}
}
@keyframes spxWhyStagePulse{
  from{opacity:.54;transform:translate3d(-1%,1%,0) scale(.98)}
  to{opacity:.82;transform:translate3d(1%,-1%,0) scale(1.04)}
}
@keyframes spxWhyVisualFloat{
  from{transform:translate3d(0,-4px,0)}
  to{transform:translate3d(0,6px,0)}
}

@media(max-width:1240px){
  .why-v36-visual img{
    inset:38px 18px 118px 18px!important;
    width:calc(100% - 36px)!important;
  }
  .why-v36-visual figcaption{
    left:24px!important;
    right:24px!important;
  }
}
@media(max-width:820px){
  .spx-home-main::before,
  .spx-home-main::after{
    height:2600px;
  }
  .nav-user-trigger span{
    max-width:94px;
  }
  .spx-nav-v26 .brand span{
    font-size:27px!important;
  }
  .site-header.spx-nav-v26.is-scrolled .brand span{
    font-size:22px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-home-main::before,
  .spx-home-main::after,
  .why-v36-stage::after{
    animation:none!important;
    transform:none!important;
  }
  .why-v36-visual img{
    animation:none!important;
  }
}


/* ==========================================================================
   A8.38 — fixed cosmic background flow / no repeated seam
   ========================================================================== */

/*
  The previous home atmosphere used repeated/star/grid background layers on a tall
  scrolling pseudo-element. That caused visible repetition and a horizontal seam
  around the hero → Why area. This pass replaces that behavior with one fixed,
  viewport-scale cosmic background that moves only slightly slower than content.
*/

.spx-home-main{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  background:#020711!important;
}
html[data-theme="light"] .spx-home-main{
  background:#eef3fa!important;
}

/* Main fixed nebula/milky-way field. No repeating backgrounds. */
.spx-home-main::before{
  content:""!important;
  position:fixed!important;
  inset:-18vh -10vw -22vh -10vw!important;
  z-index:-2!important;
  pointer-events:none!important;
  height:auto!important;
  opacity:1!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background:
    radial-gradient(1150px 820px at 72% 14%,rgba(37,99,235,.24),transparent 64%),
    radial-gradient(1050px 760px at 24% 52%,rgba(24,201,245,.16),transparent 67%),
    radial-gradient(840px 560px at 48% 38%,rgba(180,224,255,.10),transparent 66%),
    linear-gradient(116deg,
      transparent 0 22%,
      rgba(37,99,235,.04) 34%,
      rgba(24,201,245,.16) 43%,
      rgba(220,245,255,.20) 49%,
      rgba(84,168,226,.13) 56%,
      rgba(37,99,235,.05) 66%,
      transparent 78% 100%),
    radial-gradient(ellipse at 58% 38%,rgba(107,232,255,.13),transparent 58%),
    linear-gradient(180deg,#02050d 0%,#06111f 48%,#07111f 100%)!important;
  filter:saturate(132%) contrast(1.02)!important;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.035px),0) scale(1.02)!important;
  will-change:transform!important;
}

/* Star/noise layer: fixed, not repeated, very subtle. */
.spx-home-main::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  height:auto!important;
  opacity:.50!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background:
    radial-gradient(circle at 7% 18%,rgba(255,255,255,.66) 0 1px,transparent 1.7px),
    radial-gradient(circle at 14% 64%,rgba(107,232,255,.48) 0 1px,transparent 1.7px),
    radial-gradient(circle at 22% 34%,rgba(255,255,255,.40) 0 1px,transparent 1.5px),
    radial-gradient(circle at 34% 12%,rgba(107,232,255,.42) 0 1px,transparent 1.6px),
    radial-gradient(circle at 43% 78%,rgba(255,255,255,.38) 0 1px,transparent 1.7px),
    radial-gradient(circle at 58% 23%,rgba(255,255,255,.54) 0 1px,transparent 1.7px),
    radial-gradient(circle at 72% 46%,rgba(107,232,255,.40) 0 1px,transparent 1.6px),
    radial-gradient(circle at 84% 16%,rgba(255,255,255,.56) 0 1px,transparent 1.7px),
    radial-gradient(circle at 91% 72%,rgba(107,232,255,.44) 0 1px,transparent 1.6px),
    radial-gradient(circle at 63% 88%,rgba(255,255,255,.34) 0 1px,transparent 1.5px),
    linear-gradient(180deg,rgba(255,255,255,.030),transparent 42%,rgba(107,232,255,.018))!important;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.055px),0) scale(1.015)!important;
  animation:spxA838StarBreathe 18s ease-in-out infinite alternate!important;
  will-change:transform,opacity!important;
}
html[data-theme="light"] .spx-home-main::before{
  background:
    radial-gradient(1150px 820px at 72% 14%,rgba(37,99,235,.12),transparent 64%),
    radial-gradient(1050px 760px at 24% 52%,rgba(14,165,233,.10),transparent 67%),
    radial-gradient(840px 560px at 48% 38%,rgba(255,255,255,.34),transparent 66%),
    linear-gradient(116deg,
      transparent 0 22%,
      rgba(37,99,235,.025) 34%,
      rgba(14,165,233,.10) 43%,
      rgba(255,255,255,.50) 49%,
      rgba(84,168,226,.08) 56%,
      rgba(37,99,235,.035) 66%,
      transparent 78% 100%),
    radial-gradient(ellipse at 58% 38%,rgba(14,165,233,.08),transparent 58%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 54%,#eef3fa 100%)!important;
}
html[data-theme="light"] .spx-home-main::after{
  opacity:.22!important;
}

/* Remove the old sectional background/fade behavior that created the horizontal line. */
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36{
  background:transparent!important;
  box-shadow:none!important;
}
.spx-v26-bottom-fade{
  height:0!important;
  opacity:0!important;
  display:none!important;
  background:none!important;
}
.spx-why-section.spx-why-v36{
  margin-top:-520px!important;
  padding-top:520px!important;
}

/* Keep subtle section-local depth without creating a separate background seam. */
.spx-why-section.spx-why-v36::before{
  opacity:.06!important;
  background:
    linear-gradient(rgba(107,232,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.018) 1px,transparent 1px)!important;
  background-size:96px 96px!important;
  mask-image:linear-gradient(180deg,transparent 0%,black 26%,black 76%,transparent 100%)!important;
}
html[data-theme="light"] .spx-why-section.spx-why-v36::before{
  opacity:.045!important;
}
.spx-why-v36-bg{
  opacity:.82!important;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.030px),0)!important;
}
.why-v36-hero-tail{
  display:none!important;
}
.why-v36-glow,
.why-v36-mist{
  opacity:.28!important;
}

/* Hero canvas becomes an accent only; the fixed shared background now carries the scene. */
.spx-hero-v26 .spx-hero-space{
  opacity:.52!important;
}
.spx-v26-sky::before{
  opacity:.40!important;
}
.spx-v26-sky::after,
.v26-grid-plane{
  opacity:.10!important;
}

/* No repeated grid in the shared atmosphere. */
.spx-home-main .why-v36-grid,
.spx-home-main .v26-grid-plane,
.spx-home-main .spx-v26-sky::after{
  background-repeat:no-repeat!important;
}

/* Make the right-side Why visual a little more alive, but keep it lightweight. */
.why-v36-visual img{
  transform-origin:center!important;
  transition:opacity .44s var(--ease), transform .44s var(--ease), filter .44s var(--ease)!important;
}
.why-v36-visual.is-active img{
  filter:saturate(1.04) contrast(1.03)!important;
}
.why-v36-stage::after{
  opacity:.84!important;
}

/* Back-to-top should sit above the cosmic background and page visuals. */
.spx-scroll-top{
  z-index:260!important;
}

@keyframes spxA838StarBreathe{
  from{opacity:.38;filter:brightness(.95)}
  to{opacity:.58;filter:brightness(1.1)}
}

@media(max-width:820px){
  .spx-home-main::before{
    inset:-12vh -18vw -18vh -18vw!important;
    transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.025px),0) scale(1.03)!important;
  }
  .spx-home-main::after{
    opacity:.34!important;
  }
  .spx-why-section.spx-why-v36{
    margin-top:-260px!important;
    padding-top:300px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-home-main::before,
  .spx-home-main::after{
    animation:none!important;
    transform:none!important;
  }
}


/* ==========================================================================
   A8.39 — fixed non-repeating bg, no hero overlay, slower Why journey + progress
   ========================================================================== */

/* Use the shared home atmosphere as a real fixed layer ABOVE the main background,
   not behind the body. This prevents fallback/section backgrounds from creating
   visible repeated bands or seams. */
.spx-home-main{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  background:#020711!important;
}
html[data-theme="light"] .spx-home-main{
  background:#eef3fa!important;
}
.spx-home-main::before,
.spx-home-main::after{
  z-index:0!important;
  pointer-events:none!important;
}
.spx-home-main::before{
  position:fixed!important;
  inset:-22vh -12vw -24vh -12vw!important;
  height:auto!important;
  opacity:1!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center!important;
  background:
    radial-gradient(1250px 840px at 70% 10%,rgba(37,99,235,.25),transparent 64%),
    radial-gradient(1120px 760px at 20% 50%,rgba(24,201,245,.17),transparent 67%),
    radial-gradient(900px 620px at 52% 38%,rgba(210,242,255,.11),transparent 66%),
    linear-gradient(115deg,
      transparent 0 20%,
      rgba(37,99,235,.045) 33%,
      rgba(24,201,245,.18) 43%,
      rgba(228,248,255,.22) 49%,
      rgba(84,168,226,.14) 56%,
      rgba(37,99,235,.055) 67%,
      transparent 80% 100%),
    radial-gradient(ellipse at 58% 38%,rgba(107,232,255,.14),transparent 58%),
    linear-gradient(180deg,#02050d 0%,#06111f 52%,#07111f 100%)!important;
  filter:saturate(136%) contrast(1.03)!important;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.028px),0) scale(1.035)!important;
  will-change:transform!important;
}
.spx-home-main::after{
  position:fixed!important;
  inset:0!important;
  height:auto!important;
  opacity:.46!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background:
    radial-gradient(circle at 7% 18%,rgba(255,255,255,.64) 0 1px,transparent 1.7px),
    radial-gradient(circle at 14% 64%,rgba(107,232,255,.48) 0 1px,transparent 1.7px),
    radial-gradient(circle at 22% 34%,rgba(255,255,255,.38) 0 1px,transparent 1.5px),
    radial-gradient(circle at 34% 12%,rgba(107,232,255,.40) 0 1px,transparent 1.6px),
    radial-gradient(circle at 43% 78%,rgba(255,255,255,.34) 0 1px,transparent 1.7px),
    radial-gradient(circle at 58% 23%,rgba(255,255,255,.50) 0 1px,transparent 1.7px),
    radial-gradient(circle at 72% 46%,rgba(107,232,255,.36) 0 1px,transparent 1.6px),
    radial-gradient(circle at 84% 16%,rgba(255,255,255,.52) 0 1px,transparent 1.7px),
    radial-gradient(circle at 91% 72%,rgba(107,232,255,.38) 0 1px,transparent 1.6px),
    radial-gradient(circle at 63% 88%,rgba(255,255,255,.30) 0 1px,transparent 1.5px)!important;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.045px),0) scale(1.02)!important;
  animation:spxA839StarBreathe 20s ease-in-out infinite alternate!important;
}
.spx-home-main > *{
  position:relative!important;
  z-index:2!important;
}

/* Make hero and Why fully transparent over the same fixed layer and prevent
   the negative-overlap Why section from blocking hero copy/buttons. */
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36{
  background:transparent!important;
  box-shadow:none!important;
}
.spx-why-section.spx-why-v36{
  pointer-events:none!important;
  margin-top:-420px!important;
  padding-top:420px!important;
}
.spx-why-v36-shell,
.spx-why-v36-sticky,
.spx-why-v36-steps,
.why-v36-step,
.why-v36-stage,
.why-v36-visual,
.why-v36-visual img,
.why-v36-visual figcaption{
  pointer-events:auto!important;
}

/* Remove seam creators entirely. */
.spx-v26-bottom-fade,
.spx-why-section.spx-why-v36::before,
.spx-why-section.spx-why-v36::after,
.why-v36-hero-tail,
.why-v36-grid{
  display:none!important;
  opacity:0!important;
  background:none!important;
}
.spx-why-v36-bg{
  opacity:.46!important;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.020px),0)!important;
}
.why-v36-glow,
.why-v36-mist{
  opacity:.18!important;
}

/* Why title: no more huge wrapped sentence. */
.spx-why-v36-head{
  max-width:880px!important;
}
.spx-why-v36-head h2{
  max-width:780px!important;
  font-size:clamp(48px,5.8vw,92px)!important;
  line-height:.90!important;
}
.spx-why-v36-head p{
  max-width:760px!important;
  font-size:clamp(17px,1.25vw,22px)!important;
}

/* Slower, more controlled story scroll. */
.spx-why-v36-journey{
  grid-template-columns:minmax(360px,.58fr) minmax(760px,1.42fr)!important;
  gap:clamp(22px,4vw,64px)!important;
  align-items:start!important;
}
.spx-why-v36-steps{
  position:relative!important;
  padding-left:34px!important;
}
.why-v36-step{
  min-height:105vh!important;
  padding:32px 26px 32px 34px!important;
  border-left:0!important;
  background:transparent!important;
  scroll-margin-top:18vh!important;
}
.why-v36-step.is-active{
  transform:translateX(4px)!important;
  background:linear-gradient(90deg,rgba(24,201,245,.045),rgba(255,255,255,0))!important;
}
html[data-theme="light"] .why-v36-step.is-active{
  background:linear-gradient(90deg,rgba(14,165,233,.06),rgba(255,255,255,0))!important;
}
.why-v36-step h3{
  max-width:520px!important;
  font-size:clamp(32px,3.05vw,54px)!important;
}
.why-v36-step p{
  max-width:460px!important;
}
.why-v36-step ul{
  max-width:440px!important;
}

/* Progress rail in the left content. */
.why-v39-progress{
  position:absolute;
  left:8px;
  top:clamp(42px,8vh,90px);
  bottom:clamp(42px,8vh,90px);
  width:2px;
  border-radius:999px;
  background:rgba(107,232,255,.13);
  overflow:hidden;
  transform:translateZ(0);
}
.why-v39-progress span{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:calc(var(--why-progress,0) * 100%);
  border-radius:999px;
  background:linear-gradient(180deg,#18c9f5,#2563eb);
  box-shadow:0 0 20px rgba(24,201,245,.45);
  transition:height .12s linear;
}
html[data-theme="light"] .why-v39-progress{
  background:rgba(15,23,42,.12);
}

/* Right side: no more "image in a block". Screenshots float as product surfaces
   that come out of the right side. */
.why-v36-stage{
  min-height:clamp(680px,74vh,860px)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.why-v36-stage::before{
  display:none!important;
}
.why-v36-stage::after{
  inset:8% -12% 8% 16%!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 55% 48%,rgba(24,201,245,.24),transparent 46%),
    radial-gradient(circle at 80% 28%,rgba(37,99,235,.18),transparent 42%)!important;
  filter:blur(42px)!important;
  opacity:.70!important;
}
.why-v36-stage-top{
  left:auto!important;
  right:clamp(22px,4vw,74px)!important;
  top:20px!important;
  height:42px!important;
  border-radius:999px!important;
  opacity:.82;
}
.why-v36-visuals{
  inset:0!important;
  overflow:visible!important;
}
.why-v36-visual{
  transform:translate3d(92px,18px,0) scale(.98)!important;
  transition:opacity .50s var(--ease), transform .50s var(--ease)!important;
}
.why-v36-visual.is-active{
  transform:translate3d(0,0,0) scale(1)!important;
}
.why-v36-visual::before{
  inset:10% -10% 18% 18%!important;
  border:0!important;
  background:
    linear-gradient(rgba(107,232,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.020) 1px,transparent 1px)!important;
  background-size:62px 62px!important;
  opacity:.42!important;
}
.why-v36-visual img{
  inset:54px -150px 100px 34px!important;
  width:calc(100% + 116px)!important;
  height:calc(100% - 154px)!important;
  object-fit:contain!important;
  object-position:center!important;
  border:0!important;
  background:transparent!important;
  box-shadow:0 42px 110px rgba(0,0,0,.34)!important;
  animation:spxA839VisualFloat 8s ease-in-out infinite alternate!important;
}
html[data-theme="light"] .why-v36-visual img{
  box-shadow:0 32px 80px rgba(20,34,62,.16)!important;
}
.why-v36-visual figcaption{
  left:auto!important;
  right:clamp(30px,7vw,118px)!important;
  bottom:38px!important;
  width:min(360px,48vw)!important;
  border-radius:0!important;
  border:1px solid rgba(107,232,255,.16)!important;
  background:rgba(5,11,23,.66)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
html[data-theme="light"] .why-v36-visual figcaption{
  background:rgba(255,255,255,.78)!important;
  border-color:rgba(15,23,42,.10)!important;
}

/* Back to top: appears earlier and stays above the hero/why visuals. */
.spx-scroll-top{
  z-index:400!important;
}

@keyframes spxA839StarBreathe{
  from{opacity:.36;filter:brightness(.94)}
  to{opacity:.54;filter:brightness(1.12)}
}
@keyframes spxA839VisualFloat{
  from{transform:translate3d(0,-5px,0)}
  to{transform:translate3d(0,7px,0)}
}

@media(max-width:1240px){
  .spx-why-section.spx-why-v36{
    margin-top:-250px!important;
    padding-top:310px!important;
  }
  .spx-why-v36-journey{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .spx-why-v36-steps{
    padding-left:28px!important;
  }
  .why-v36-step{
    min-height:78vh!important;
  }
  .why-v36-stage{
    min-height:620px!important;
  }
  .why-v36-visual img{
    inset:48px 18px 108px 18px!important;
    width:calc(100% - 36px)!important;
  }
  .why-v36-visual figcaption{
    right:24px!important;
    left:24px!important;
    width:auto!important;
  }
}
@media(max-width:820px){
  .spx-why-v36-head h2{
    font-size:clamp(42px,12vw,64px)!important;
  }
  .why-v36-step{
    min-height:70vh!important;
  }
  .why-v39-progress{
    left:4px;
  }
  .spx-home-main::before{
    transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.020px),0) scale(1.04)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-home-main::before,
  .spx-home-main::after,
  .why-v36-visual img{
    animation:none!important;
    transform:none!important;
  }
}


/* ==========================================================================
   A8.41 — safe restore after A8.40 empty-base regression
   ========================================================================== */

/*
  A8.40 introduced a homepage canvas layer. On the tested build this caused the
  visual base to appear empty, so this build deliberately does NOT include the
  canvas approach. It keeps the stable A8.39 structure and applies only safe CSS/JS
  upgrades: per-step progress, rounded floating screenshots and subtle mouse vars.
*/

/* Hard guard: no accidental homepage canvas layer should display. */
.spx-home-cosmic-canvas,
[data-home-space]{
  display:none!important;
}

/* Keep hero/Why content interactive and above background. */
.spx-home-main > *{
  position:relative!important;
}
.spx-home-main > *:not(.spx-home-cosmic-canvas){
  z-index:3!important;
}
.spx-home-main::before,
.spx-home-main::after{
  pointer-events:none!important;
}

/* Softer mouse-reactive background without canvas. */
.spx-home-main::before{
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * -10px),
      calc((var(--spx-bg-scroll,0) * -.024px) + (var(--spx-home-mouse-y,0) * -7px)),
      0
    )
    scale(1.04)!important;
}
.spx-home-main::after{
  opacity:.24!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 8px),
      calc((var(--spx-bg-scroll,0) * -.034px) + (var(--spx-home-mouse-y,0) * 5px)),
      0
    )
    scale(1.02)!important;
}

/* Remove the old single progress rail and use small progress bars inside each step. */
.why-v39-progress{
  display:none!important;
}
.why-v41-step-progress{
  --step-progress:0;
  position:relative;
  display:block;
  width:min(238px,72%);
  height:3px;
  margin:14px 0 0;
  border-radius:999px;
  overflow:hidden;
  background:rgba(107,232,255,.13);
}
.why-v41-step-progress::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:calc(var(--step-progress,0) * 100%);
  border-radius:999px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  box-shadow:0 0 18px rgba(24,201,245,.42);
  transition:width .12s linear;
}
.why-v36-step.is-active .why-v41-step-progress{
  background:rgba(107,232,255,.20);
}
html[data-theme="light"] .why-v41-step-progress{
  background:rgba(15,23,42,.12);
}

/* Re-center the left content now that the long rail is gone. */
.spx-why-v36-steps{
  padding-left:0!important;
}
.why-v36-step{
  padding-left:26px!important;
  border-left:0!important;
}
.why-v36-step.is-active{
  background:
    radial-gradient(420px 220px at 0% 48%,rgba(24,201,245,.07),transparent 72%),
    linear-gradient(90deg,rgba(24,201,245,.035),rgba(255,255,255,0))!important;
}

/* Rounded, floating workflow screenshots without turning the whole thing into a block. */
.why-v36-visual img{
  border-radius:28px!important;
  overflow:hidden!important;
  border:1px solid rgba(107,232,255,.16)!important;
  background:rgba(5,11,23,.34)!important;
  box-shadow:
    0 42px 120px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 72px rgba(24,201,245,.12)!important;
  transform-origin:center!important;
  animation:spxA841VisualFloat 7.8s ease-in-out infinite alternate!important;
}
html[data-theme="light"] .why-v36-visual img{
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(15,23,42,.10)!important;
  box-shadow:
    0 34px 86px rgba(20,34,62,.16),
    0 0 0 1px rgba(255,255,255,.72) inset,
    0 0 48px rgba(14,165,233,.10)!important;
}

/* Add subtle grid/line movement behind the screenshot only, not over the whole page. */
.why-v36-visual::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:8% -8% 16% 12%!important;
  z-index:0!important;
  border:0!important;
  background:
    linear-gradient(rgba(107,232,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.024) 1px,transparent 1px),
    radial-gradient(circle at calc(50% + (var(--spx-home-mouse-x,0) * 18%)) calc(45% + (var(--spx-home-mouse-y,0) * 14%)),rgba(24,201,245,.11),transparent 44%)!important;
  background-size:60px 60px,60px 60px,100% 100%!important;
  transform:
    perspective(900px)
    rotateX(58deg)
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 14px),
      calc(var(--spx-home-mouse-y,0) * 9px),
      0
    )!important;
  transform-origin:center bottom!important;
  opacity:.42!important;
  animation:spxA841GridBreathe 9s ease-in-out infinite alternate!important;
  mask-image:linear-gradient(180deg,transparent 0%,black 22%,black 78%,transparent 100%)!important;
}
.why-v36-visual::after{
  content:"";
  position:absolute;
  inset:18% -5% 22% 22%;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(100deg,transparent 0 34%,rgba(24,201,245,.14) 48%,transparent 62%),
    radial-gradient(circle at 74% 22%,rgba(37,99,235,.14),transparent 28%);
  filter:blur(22px);
  opacity:.48;
  transform:translate3d(
    calc(var(--spx-home-mouse-x,0) * -11px),
    calc(var(--spx-home-mouse-y,0) * -7px),
    0
  );
  animation:spxA841GlowBreathe 8s ease-in-out infinite alternate;
}

/* Keep the caption polished but not massive. */
.why-v36-visual figcaption{
  border-radius:22px!important;
}

/* Increase existing star layer slightly without introducing new overlay/canvas. */
.spx-home-main::after{
  filter:brightness(1.10)!important;
}

/* Prevent the transparent Why overlap from blocking hero copy/buttons. */
.spx-why-section.spx-why-v36{
  pointer-events:none!important;
}
.spx-why-v36-shell,
.spx-why-v36-sticky,
.spx-why-v36-steps,
.why-v36-step,
.why-v36-stage,
.why-v36-visual,
.why-v36-visual img,
.why-v36-visual figcaption{
  pointer-events:auto!important;
}

@keyframes spxA841VisualFloat{
  from{transform:translate3d(0,-6px,0) rotate(.04deg)}
  to{transform:translate3d(0,7px,0) rotate(-.06deg)}
}
@keyframes spxA841GridBreathe{
  from{opacity:.34;background-position:0 0,0 0,0 0}
  to{opacity:.54;background-position:60px 60px,60px 60px,0 0}
}
@keyframes spxA841GlowBreathe{
  from{opacity:.34;filter:blur(23px)}
  to{opacity:.58;filter:blur(32px)}
}

@media(max-width:1240px){
  .why-v36-visual img{
    border-radius:22px!important;
  }
  .why-v36-visual::before{
    inset:8% 0 18% 0!important;
  }
}
@media(max-width:820px){
  .why-v41-step-progress{
    width:min(220px,78%);
  }
}
@media(prefers-reduced-motion:reduce){
  .why-v36-visual img,
  .why-v36-visual::before,
  .why-v36-visual::after{
    animation:none!important;
    transform:none!important;
  }
}


/* ==========================================================================
   A8.43 — restore hero product + unify hero/why background safely
   ========================================================================== */

/*
  A8.42 removed too many local hero layers, which made the right-side hero
  product/example disappear. This pass is based on the safer A8.41 and only
  removes the specific seam-producing background/fade layers.
*/

/* Stable shared background for hero + Why, without canvas and without repeated blocks. */
.spx-home-main{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  background:#020711!important;
}
html[data-theme="light"] .spx-home-main{
  background:#eef3fa!important;
}
.spx-home-main::before{
  content:""!important;
  position:fixed!important;
  inset:-18vh -12vw -22vh -12vw!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:1!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center!important;
  background:
    radial-gradient(1250px 820px at 70% 9%,rgba(37,99,235,.24),transparent 66%),
    radial-gradient(1120px 760px at 20% 52%,rgba(24,201,245,.17),transparent 68%),
    radial-gradient(940px 620px at 50% 37%,rgba(220,246,255,.105),transparent 68%),
    linear-gradient(115deg,
      transparent 0 19%,
      rgba(37,99,235,.040) 33%,
      rgba(24,201,245,.165) 42%,
      rgba(230,249,255,.19) 49%,
      rgba(82,181,230,.12) 56%,
      rgba(37,99,235,.050) 67%,
      transparent 82% 100%),
    radial-gradient(ellipse at 59% 38%,rgba(107,232,255,.13),transparent 60%),
    linear-gradient(180deg,#02050d 0%,#06111f 55%,#07111f 100%)!important;
  filter:saturate(138%) contrast(1.03)!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * -10px),
      calc((var(--spx-bg-scroll,0) * -.024px) + (var(--spx-home-mouse-y,0) * -7px)),
      0
    )
    scale(1.035)!important;
  will-change:transform!important;
}
.spx-home-main::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  opacity:.30!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background:
    radial-gradient(circle at 5% 13%,rgba(255,255,255,.64) 0 1px,transparent 1.7px),
    radial-gradient(circle at 11% 48%,rgba(107,232,255,.46) 0 1px,transparent 1.7px),
    radial-gradient(circle at 17% 78%,rgba(255,255,255,.40) 0 1px,transparent 1.6px),
    radial-gradient(circle at 24% 30%,rgba(255,255,255,.36) 0 1px,transparent 1.5px),
    radial-gradient(circle at 32% 9%,rgba(107,232,255,.42) 0 1px,transparent 1.6px),
    radial-gradient(circle at 40% 66%,rgba(255,255,255,.32) 0 1px,transparent 1.7px),
    radial-gradient(circle at 51% 18%,rgba(255,255,255,.50) 0 1px,transparent 1.7px),
    radial-gradient(circle at 60% 86%,rgba(107,232,255,.34) 0 1px,transparent 1.7px),
    radial-gradient(circle at 70% 42%,rgba(107,232,255,.38) 0 1px,transparent 1.6px),
    radial-gradient(circle at 79% 20%,rgba(255,255,255,.56) 0 1px,transparent 1.7px),
    radial-gradient(circle at 88% 63%,rgba(255,255,255,.36) 0 1px,transparent 1.6px),
    radial-gradient(circle at 94% 82%,rgba(107,232,255,.40) 0 1px,transparent 1.6px)!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 8px),
      calc((var(--spx-bg-scroll,0) * -.034px) + (var(--spx-home-mouse-y,0) * 5px)),
      0
    )
    scale(1.02)!important;
  animation:spxA843StarBreathe 19s ease-in-out infinite alternate!important;
}

/* Content always above the shared background. */
.spx-home-main > *{
  position:relative!important;
  z-index:3!important;
}

/* Only remove the seam/fade layers, not the hero product preview. */
.spx-v26-bottom-fade,
.spx-why-section.spx-why-v36::before,
.spx-why-section.spx-why-v36::after,
.why-v36-hero-tail,
.why-v36-grid{
  display:none!important;
  opacity:0!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Hero and Why now share the same base background color/atmosphere. */
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}

/* Keep the hero's right-side builder/product preview visible. */
.spx-hero-v26{
  z-index:4!important;
}
.v26-product-atmosphere,
.v26-builder-base,
.v26-product-layer,
.v26-product-float,
.v26-asteroid-belt{
  display:block!important;
  visibility:visible!important;
}
.v26-product-atmosphere{
  opacity:.82!important;
  z-index:3!important;
  pointer-events:auto!important;
}
.v26-builder-base{
  opacity:1!important;
  z-index:2!important;
}
.v26-product-layer{
  z-index:3!important;
}
.spx-v26-sky,
.v26-cloud,
.v26-light-trace{
  display:block!important;
  visibility:visible!important;
  pointer-events:none!important;
}

/* But make hero-local sky accents softer so they don't create a visible section band. */
.spx-v26-sky{
  opacity:.50!important;
  mix-blend-mode:screen;
}
.spx-v26-sky::before{
  opacity:.28!important;
  filter:blur(34px) saturate(150%)!important;
}
.spx-v26-sky::after,
.v26-grid-plane{
  opacity:.08!important;
}
.v26-cloud{
  opacity:.22!important;
}
.v26-light-trace{
  opacity:.16!important;
}

/* Why overlap should not block hero interactions. */
.spx-why-section.spx-why-v36{
  pointer-events:none!important;
  margin-top:-420px!important;
  padding-top:420px!important;
}
.spx-why-v36-shell,
.spx-why-v36-sticky,
.spx-why-v36-steps,
.why-v36-step,
.why-v36-stage,
.why-v36-visual,
.why-v36-visual img,
.why-v36-visual figcaption{
  pointer-events:auto!important;
}

/* Why local background reduced to accent only, not a separate colored block. */
.spx-why-v36-bg{
  opacity:.18!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 8px),
      calc((var(--spx-bg-scroll,0) * -.014px) + (var(--spx-home-mouse-y,0) * 5px)),
      0
    )!important;
}
.why-v36-glow,
.why-v36-mist{
  opacity:.12!important;
}

/* Per-step progress remains explicit. */
.why-v39-progress{
  display:none!important;
}
.why-v41-step-progress{
  --step-progress:0;
  position:relative!important;
  display:block!important;
  width:min(250px,74%)!important;
  height:4px!important;
  margin:14px 0 0!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:rgba(107,232,255,.13)!important;
}
.why-v41-step-progress::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:calc(var(--step-progress,0) * 100%)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#18c9f5,#2563eb)!important;
  box-shadow:0 0 18px rgba(24,201,245,.45)!important;
  transition:width .12s linear!important;
}

/* Stronger, more visible grid/line environment behind right workflow screenshots. */
.why-v36-stage{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  perspective:1200px!important;
}
.why-v36-stage::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:6% -14% 9% 15%!important;
  z-index:0!important;
  pointer-events:none!important;
  border:1px solid rgba(107,232,255,.09)!important;
  background:
    linear-gradient(rgba(107,232,255,.034) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.026) 1px,transparent 1px),
    linear-gradient(115deg,transparent 0 38%,rgba(24,201,245,.12) 48%,transparent 60%),
    radial-gradient(circle at calc(50% + (var(--spx-home-mouse-x,0) * 18%)) calc(44% + (var(--spx-home-mouse-y,0) * 14%)),rgba(24,201,245,.13),transparent 45%)!important;
  background-size:58px 58px,58px 58px,100% 100%,100% 100%!important;
  transform:
    perspective(1000px)
    rotateX(57deg)
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 18px),
      calc(var(--spx-home-mouse-y,0) * 12px),
      0
    )!important;
  transform-origin:center bottom!important;
  opacity:.58!important;
  animation:spxA843GridBreathe 9s ease-in-out infinite alternate!important;
  mask-image:linear-gradient(180deg,transparent 0%,black 18%,black 82%,transparent 100%)!important;
}
.why-v36-stage::after{
  content:""!important;
  position:absolute!important;
  inset:7% -10% 8% 18%!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:999px!important;
  background:
    radial-gradient(circle at calc(52% + (var(--spx-home-mouse-x,0) * 12%)) calc(46% + (var(--spx-home-mouse-y,0) * 10%)),rgba(24,201,245,.24),transparent 46%),
    radial-gradient(circle at 80% 26%,rgba(37,99,235,.18),transparent 42%)!important;
  filter:blur(44px)!important;
  opacity:.76!important;
  animation:spxA843GlowBreathe 8s ease-in-out infinite alternate!important;
}

.why-v36-visual::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:9% -8% 17% 12%!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(rgba(107,232,255,.030) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.024) 1px,transparent 1px)!important;
  background-size:52px 52px,52px 52px!important;
  opacity:.36!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 12px),
      calc(var(--spx-home-mouse-y,0) * 8px),
      0
    )!important;
  animation:spxA843LineDrift 11s linear infinite!important;
  mask-image:linear-gradient(180deg,transparent 0%,black 24%,black 78%,transparent 100%)!important;
}
.why-v36-visual::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:15% -4% 20% 20%!important;
  z-index:2!important;
  pointer-events:none!important;
  background:
    linear-gradient(100deg,transparent 0 34%,rgba(24,201,245,.15) 48%,transparent 62%),
    radial-gradient(circle at 74% 22%,rgba(37,99,235,.15),transparent 28%)!important;
  filter:blur(24px)!important;
  opacity:.58!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * -12px),
      calc(var(--spx-home-mouse-y,0) * -7px),
      0
    )!important;
  animation:spxA843GlowBreathe 8s ease-in-out infinite alternate!important;
}

.why-v36-visual img{
  z-index:3!important;
  border-radius:28px!important;
  overflow:hidden!important;
  border:1px solid rgba(107,232,255,.16)!important;
  background:rgba(5,11,23,.38)!important;
  box-shadow:
    0 42px 120px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 76px rgba(24,201,245,.13)!important;
  transform-origin:center!important;
  animation:spxA843VisualFloat 7.8s ease-in-out infinite alternate!important;
}
.why-v36-visual figcaption{
  z-index:4!important;
  border-radius:22px!important;
}

@keyframes spxA843StarBreathe{
  from{opacity:.24;filter:brightness(.96)}
  to{opacity:.38;filter:brightness(1.14)}
}
@keyframes spxA843VisualFloat{
  from{transform:translate3d(0,-6px,0) rotate(.04deg)}
  to{transform:translate3d(0,7px,0) rotate(-.06deg)}
}
@keyframes spxA843GridBreathe{
  from{opacity:.42;background-position:0 0,0 0,0 0,0 0}
  to{opacity:.66;background-position:58px 58px,58px 58px,0 0,0 0}
}
@keyframes spxA843LineDrift{
  from{background-position:0 0,0 0}
  to{background-position:52px 52px,52px 52px}
}
@keyframes spxA843GlowBreathe{
  from{opacity:.42;filter:blur(24px)}
  to{opacity:.68;filter:blur(36px)}
}

@media(max-width:1240px){
  .why-v36-stage::before{
    inset:8% 0 16% 0!important;
  }
  .why-v36-visual img{
    border-radius:22px!important;
  }
}
@media(max-width:820px){
  .spx-why-section.spx-why-v36{
    margin-top:-260px!important;
    padding-top:300px!important;
  }
  .why-v41-step-progress{
    width:min(220px,78%)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-home-main::before,
  .spx-home-main::after,
  .why-v36-stage::before,
  .why-v36-stage::after,
  .why-v36-visual::before,
  .why-v36-visual::after,
  .why-v36-visual img{
    animation:none!important;
    transform:none!important;
  }
}


/* ==========================================================================
   A8.44 — Why network background + overlapping left steps + unified bg cleanup
   ========================================================================== */

/*
  This build keeps the A8.43 hero product preview intact.
  It removes the remaining hero/Why color separation by forcing both sections
  to use the same transparent surface over the shared homepage atmosphere.
  It also replaces the flat right background with interconnected animated lines
  and changes the left Why story to overlapping sticky steps.
*/

/* Final seam guard: no separate surface may tint the Why section differently. */
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  border:0!important;
}
.spx-why-section.spx-why-v36,
.spx-why-section.spx-why-v36 *{
  --spx-why-surface:transparent;
}
.spx-why-section.spx-why-v36::before,
.spx-why-section.spx-why-v36::after,
.spx-v26-bottom-fade,
.why-v36-hero-tail,
.why-v36-grid{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
.spx-why-v36-bg{
  opacity:.08!important;
  mix-blend-mode:screen!important;
}
.why-v36-glow,
.why-v36-mist{
  opacity:.08!important;
}

/* Keep hero product visible, but reduce local hero tint overlays that can create a color jump. */
.v26-product-atmosphere,
.v26-builder-base,
.v26-product-layer,
.v26-product-float,
.v26-asteroid-belt{
  display:block!important;
  visibility:visible!important;
}
.spx-v26-sky{
  opacity:.38!important;
  mix-blend-mode:screen!important;
}
.spx-v26-sky::before{
  opacity:.22!important;
  filter:blur(34px) saturate(148%)!important;
}
.spx-v26-sky::after,
.v26-grid-plane{
  opacity:.055!important;
}
.v26-cloud{
  opacity:.16!important;
}
.v26-light-trace{
  opacity:.12!important;
}

/* Overlapping left story: one sticky left panel, steps crossfade/slide in place. */
.spx-why-v36-journey{
  min-height:330vh!important;
  align-items:start!important;
}
.spx-why-v36-steps{
  position:sticky!important;
  top:clamp(92px,18vh,150px)!important;
  height:min(560px,68vh)!important;
  padding-left:0!important;
  display:block!important;
  align-self:start!important;
}
.why-v36-step{
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:min(560px,100%)!important;
  min-height:0!important;
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding:28px 28px 28px 0!important;
  border-left:0!important;
  background:transparent!important;
  opacity:0!important;
  transform:translate3d(0,30px,0) scale(.985)!important;
  pointer-events:none!important;
  transition:
    opacity .50s var(--ease),
    transform .50s var(--ease),
    filter .50s var(--ease)!important;
}
.why-v36-step.is-active{
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
  pointer-events:auto!important;
  background:transparent!important;
  filter:none!important;
}
.why-v36-step:not(.is-active){
  filter:blur(.3px);
}
.why-v36-step span{
  margin-bottom:0!important;
}
.why-v36-step h3{
  margin-top:14px!important;
  max-width:540px!important;
}
.why-v36-step p{
  max-width:470px!important;
}
.why-v36-step ul{
  max-width:430px!important;
}

/* Horizontal progress per step, visible and tied to the active card. */
.why-v41-step-progress{
  --step-progress:0;
  position:relative!important;
  display:block!important;
  width:min(310px,80%)!important;
  height:4px!important;
  margin:16px 0 0!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:rgba(107,232,255,.14)!important;
  box-shadow:inset 0 0 0 1px rgba(107,232,255,.06)!important;
}
.why-v41-step-progress::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:calc(var(--step-progress,0) * 100%)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#18c9f5,#2563eb)!important;
  box-shadow:0 0 18px rgba(24,201,245,.45)!important;
  transition:width .10s linear!important;
}
.why-v36-step.is-active .why-v41-step-progress{
  background:rgba(107,232,255,.20)!important;
}

/* Sticky right side remains centered while left steps overlap. */
.spx-why-v36-sticky{
  top:clamp(72px,calc(50vh - 335px),122px)!important;
}
.why-v36-stage{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  perspective:1200px!important;
}
.why-v36-stage::before,
.why-v36-stage::after{
  display:none!important;
}

/* Interconnected network/grid behind the workflow images. */
.why-v44-network{
  position:absolute;
  inset:5% -13% 7% 12%;
  z-index:0;
  pointer-events:none;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 18px),
      calc(var(--spx-home-mouse-y,0) * 12px),
      0
    );
  animation:spxA844NetworkBreathe 8s ease-in-out infinite alternate;
}
.why-v44-network::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.42;
  background:
    linear-gradient(rgba(107,232,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.026) 1px,transparent 1px),
    radial-gradient(circle at calc(50% + (var(--spx-home-mouse-x,0) * 14%)) calc(44% + (var(--spx-home-mouse-y,0) * 10%)),rgba(24,201,245,.12),transparent 45%);
  background-size:58px 58px,58px 58px,100% 100%;
  transform:perspective(1000px) rotateX(56deg);
  transform-origin:center bottom;
  mask-image:linear-gradient(180deg,transparent 0%,black 18%,black 82%,transparent 100%);
}
.why-v44-network::after{
  content:"";
  position:absolute;
  inset:8% 4% 12% 12%;
  border-radius:999px;
  background:
    radial-gradient(circle at 55% 46%,rgba(24,201,245,.24),transparent 45%),
    radial-gradient(circle at 78% 28%,rgba(37,99,235,.18),transparent 42%);
  filter:blur(42px);
  opacity:.68;
}
.why-v44-network .node{
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  z-index:2;
  background:rgba(180,244,255,.90);
  box-shadow:0 0 20px rgba(24,201,245,.62);
  animation:spxA844NodePulse 3.8s ease-in-out infinite alternate;
}
.why-v44-network .n1{left:20%;top:26%;animation-delay:-.2s}
.why-v44-network .n2{left:44%;top:18%;animation-delay:-.9s}
.why-v44-network .n3{left:70%;top:30%;animation-delay:-1.4s}
.why-v44-network .n4{left:30%;top:56%;animation-delay:-2.0s}
.why-v44-network .n5{left:58%;top:64%;animation-delay:-.6s}
.why-v44-network .n6{left:84%;top:58%;animation-delay:-1.7s}

.why-v44-network .line{
  position:absolute;
  height:1px;
  z-index:1;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(107,232,255,0),rgba(107,232,255,.50),rgba(37,99,235,.12));
  box-shadow:0 0 14px rgba(24,201,245,.20);
  opacity:.62;
  animation:spxA844LinePulse 4.6s ease-in-out infinite alternate;
}
.why-v44-network .l1{left:21%;top:27%;width:25%;transform:rotate(-13deg);animation-delay:-.2s}
.why-v44-network .l2{left:45%;top:20%;width:27%;transform:rotate(16deg);animation-delay:-.8s}
.why-v44-network .l3{left:31%;top:56%;width:29%;transform:rotate(12deg);animation-delay:-1.3s}
.why-v44-network .l4{left:59%;top:64%;width:27%;transform:rotate(-7deg);animation-delay:-2.0s}
.why-v44-network .l5{left:22%;top:28%;width:42%;transform:rotate(40deg);animation-delay:-2.6s}
.why-v44-network .l6{left:44%;top:20%;width:21%;transform:rotate(72deg);animation-delay:-1.1s}
.why-v44-network .l7{left:70%;top:31%;width:18%;transform:rotate(76deg);animation-delay:-3.1s}

/* Keep screenshot surfaces above the network and softly floating. */
.why-v36-visual::before,
.why-v36-visual::after{
  opacity:.18!important;
}
.why-v36-visual img{
  z-index:3!important;
  border-radius:28px!important;
  overflow:hidden!important;
  border:1px solid rgba(107,232,255,.16)!important;
  background:rgba(5,11,23,.38)!important;
  box-shadow:
    0 42px 120px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 76px rgba(24,201,245,.13)!important;
  animation:spxA844VisualFloat 7.8s ease-in-out infinite alternate!important;
}
.why-v36-visual figcaption{
  z-index:4!important;
  border-radius:22px!important;
}

/* Optional stronger filled/outline transition, now that steps overlap. */
.why-v36-step:not(.is-active) h3{
  color:transparent!important;
  -webkit-text-stroke:1.2px rgba(245,250,255,.32)!important;
}
html[data-theme="light"] .why-v36-step:not(.is-active) h3{
  -webkit-text-stroke-color:rgba(16,24,40,.30)!important;
}
.why-v36-step.is-active h3{
  color:var(--text)!important;
  -webkit-text-stroke:0 transparent!important;
}

@keyframes spxA844NetworkBreathe{
  from{opacity:.72;transform:translate3d(calc(var(--spx-home-mouse-x,0) * 13px),calc(var(--spx-home-mouse-y,0) * 8px),0) scale(.985)}
  to{opacity:1;transform:translate3d(calc(var(--spx-home-mouse-x,0) * 22px),calc(var(--spx-home-mouse-y,0) * 15px),0) scale(1.015)}
}
@keyframes spxA844NodePulse{
  from{opacity:.48;transform:scale(.82)}
  to{opacity:1;transform:scale(1.18)}
}
@keyframes spxA844LinePulse{
  from{opacity:.35;filter:brightness(.92)}
  to{opacity:.74;filter:brightness(1.18)}
}
@keyframes spxA844VisualFloat{
  from{transform:translate3d(0,-6px,0) rotate(.04deg)}
  to{transform:translate3d(0,7px,0) rotate(-.06deg)}
}

@media(max-width:1240px){
  .spx-why-v36-journey{
    min-height:auto!important;
  }
  .spx-why-v36-steps{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    display:grid!important;
    gap:18px!important;
  }
  .why-v36-step{
    position:relative!important;
    opacity:1!important;
    transform:none!important;
    height:auto!important;
    min-height:0!important;
    pointer-events:auto!important;
    padding:22px 0!important;
  }
  .why-v44-network{
    inset:8% 0 12% 0;
  }
}
@media(max-width:820px){
  .why-v41-step-progress{
    width:min(220px,80%)!important;
  }
  .why-v44-network{
    opacity:.55;
  }
}
@media(prefers-reduced-motion:reduce){
  .why-v44-network,
  .why-v44-network .node,
  .why-v44-network .line,
  .why-v36-visual img{
    animation:none!important;
    transform:none!important;
  }
}


/* ==========================================================================
   A8.45 — network grid under screenshots + clearer hero + smoother left steps
   ========================================================================== */

/* 1) Background unify: remove local Why tinting entirely and soften hero tint. */
.spx-home-main,
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36{
  background-color:transparent!important;
}
.spx-home-main{
  background:#020711!important;
}
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36,
.spx-why-v36-shell,
.spx-why-v36-journey,
.spx-why-v36-steps,
.spx-why-v36-sticky{
  background:transparent!important;
  box-shadow:none!important;
  border-color:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.spx-why-v36-bg,
.why-v36-glow,
.why-v36-mist,
.why-v36-hero-tail,
.why-v36-grid,
.spx-v26-bottom-fade,
.spx-why-section.spx-why-v36::before,
.spx-why-section.spx-why-v36::after{
  display:none!important;
  opacity:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* One fixed atmosphere for hero + Why. Keep it less vertical so the scroll does not reveal a color band. */
.spx-home-main::before{
  background:
    radial-gradient(1300px 820px at 72% 12%,rgba(37,99,235,.24),transparent 66%),
    radial-gradient(1150px 760px at 18% 48%,rgba(24,201,245,.17),transparent 68%),
    radial-gradient(960px 620px at 50% 36%,rgba(220,246,255,.105),transparent 68%),
    linear-gradient(115deg,
      transparent 0 19%,
      rgba(37,99,235,.040) 33%,
      rgba(24,201,245,.165) 42%,
      rgba(230,249,255,.19) 49%,
      rgba(82,181,230,.12) 56%,
      rgba(37,99,235,.050) 67%,
      transparent 82% 100%),
    radial-gradient(ellipse at 58% 38%,rgba(107,232,255,.13),transparent 60%),
    linear-gradient(180deg,#02050d 0%,#06111f 48%,#07111f 100%)!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * -10px),
      calc((var(--spx-bg-scroll,0) * -.018px) + (var(--spx-home-mouse-y,0) * -7px)),
      0
    )
    scale(1.04)!important;
}
.spx-home-main::after{
  opacity:.32!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 8px),
      calc((var(--spx-bg-scroll,0) * -.026px) + (var(--spx-home-mouse-y,0) * 5px)),
      0
    )
    scale(1.02)!important;
}

/* Hero right preview: make it visually stronger while keeping local overlays subtle. */
.v26-product-atmosphere{
  opacity:1!important;
  visibility:visible!important;
  display:block!important;
  filter:saturate(1.12) contrast(1.06) brightness(1.05)!important;
  transform:translate3d(28px,-8px,0) scale(1.035)!important;
}
.v26-builder-base{
  opacity:1!important;
  filter:saturate(1.10) contrast(1.05) brightness(1.04)!important;
  box-shadow:
    0 38px 130px rgba(0,0,0,.38),
    0 0 84px rgba(24,201,245,.13)!important;
}
.v26-product-layer{
  opacity:.96!important;
  filter:saturate(1.08) contrast(1.05)!important;
}
.v26-product-float,
.v26-asteroid-belt{
  opacity:.82!important;
}
.spx-v26-sky{
  opacity:.24!important;
  mix-blend-mode:screen!important;
}
.spx-v26-sky::before{
  opacity:.14!important;
}
.spx-v26-sky::after,
.v26-grid-plane,
.v26-cloud,
.v26-light-trace{
  opacity:.07!important;
}

/* 2) Left Why scroll: overlapping cards with softer in/out states. */
.spx-why-v36-journey{
  min-height:360vh!important;
}
.spx-why-v36-steps{
  position:sticky!important;
  top:clamp(96px,18vh,150px)!important;
  height:min(560px,68vh)!important;
  display:block!important;
  padding-left:0!important;
}
.why-v36-step{
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:min(560px,100%)!important;
  height:100%!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding:28px 28px 28px 0!important;
  border-left:0!important;
  background:transparent!important;
  opacity:0!important;
  transform:translate3d(0,34px,0) scale(.985)!important;
  pointer-events:none!important;
  filter:blur(.4px)!important;
  transition:
    opacity .58s var(--ease),
    transform .58s var(--ease),
    filter .58s var(--ease)!important;
}
.why-v36-step.is-before{
  opacity:.13!important;
  transform:translate3d(0,-34px,0) scale(.985)!important;
}
.why-v36-step.is-after{
  opacity:.13!important;
  transform:translate3d(0,34px,0) scale(.985)!important;
}
.why-v36-step.is-active{
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
  pointer-events:auto!important;
  filter:none!important;
}
.why-v36-step.is-active h3{
  color:var(--text)!important;
  -webkit-text-stroke:0 transparent!important;
}
.why-v36-step:not(.is-active) h3{
  color:transparent!important;
  -webkit-text-stroke:1.2px rgba(245,250,255,.26)!important;
}

/* Horizontal progress per step, more obvious but still compact. */
.why-v41-step-progress{
  width:min(330px,82%)!important;
  height:4px!important;
  margin:16px 0 0!important;
  border-radius:999px!important;
  background:rgba(107,232,255,.15)!important;
  box-shadow:inset 0 0 0 1px rgba(107,232,255,.07)!important;
}
.why-v41-step-progress::before{
  width:calc(var(--step-progress,0) * 100%)!important;
  background:linear-gradient(90deg,#18c9f5,#2563eb)!important;
  box-shadow:0 0 20px rgba(24,201,245,.48)!important;
}

/* 3) Right Why visual: the network is now a structured grid/circuit field under the screenshot,
      not a cluster too far below it. */
.why-v36-stage{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  perspective:1200px!important;
}
.why-v36-stage::before,
.why-v36-stage::after{
  display:none!important;
}
.why-v44-network{
  position:absolute!important;
  inset:0% -10% 2% 8%!important;
  z-index:2!important;
  pointer-events:none!important;
  opacity:.92!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 18px),
      calc(var(--spx-home-mouse-y,0) * 12px),
      0
    )!important;
  animation:spxA845NetworkBreathe 8s ease-in-out infinite alternate!important;
}
.why-v44-network::before{
  content:""!important;
  position:absolute!important;
  inset:4% -2% 10% 4%!important;
  z-index:0!important;
  opacity:.62!important;
  border:1px solid rgba(107,232,255,.10)!important;
  background:
    linear-gradient(rgba(107,232,255,.040) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.032) 1px,transparent 1px),
    linear-gradient(115deg,transparent 0 35%,rgba(24,201,245,.14) 48%,transparent 62%),
    radial-gradient(circle at calc(50% + (var(--spx-home-mouse-x,0) * 18%)) calc(45% + (var(--spx-home-mouse-y,0) * 14%)),rgba(24,201,245,.14),transparent 44%)!important;
  background-size:56px 56px,56px 56px,100% 100%,100% 100%!important;
  transform:perspective(1050px) rotateX(54deg)!important;
  transform-origin:center bottom!important;
  animation:spxA845GridDrift 10s ease-in-out infinite alternate!important;
  mask-image:linear-gradient(180deg,transparent 0%,black 14%,black 88%,transparent 100%)!important;
}
.why-v44-network::after{
  content:""!important;
  position:absolute!important;
  inset:12% 0 12% 10%!important;
  z-index:1!important;
  border-radius:999px!important;
  background:
    radial-gradient(circle at calc(54% + (var(--spx-home-mouse-x,0) * 13%)) calc(46% + (var(--spx-home-mouse-y,0) * 10%)),rgba(24,201,245,.22),transparent 45%),
    radial-gradient(circle at 78% 26%,rgba(37,99,235,.16),transparent 42%)!important;
  filter:blur(42px)!important;
  opacity:.72!important;
  animation:spxA845GlowBreathe 8s ease-in-out infinite alternate!important;
}

/* circuit nodes/lines placed through the middle of the screenshot area */
.why-v44-network .node{
  width:8px!important;
  height:8px!important;
  z-index:3!important;
  opacity:.95!important;
}
.why-v44-network .n1{left:17%!important;top:24%!important}
.why-v44-network .n2{left:38%!important;top:18%!important}
.why-v44-network .n3{left:64%!important;top:27%!important}
.why-v44-network .n4{left:23%!important;top:54%!important}
.why-v44-network .n5{left:50%!important;top:57%!important}
.why-v44-network .n6{left:78%!important;top:52%!important}

.why-v44-network .line{
  z-index:2!important;
  height:1px!important;
  opacity:.72!important;
  background:linear-gradient(90deg,rgba(107,232,255,0),rgba(107,232,255,.56),rgba(37,99,235,.18))!important;
}
.why-v44-network .l1{left:18%!important;top:25%!important;width:22%!important;transform:rotate(-14deg)!important}
.why-v44-network .l2{left:39%!important;top:20%!important;width:26%!important;transform:rotate(15deg)!important}
.why-v44-network .l3{left:24%!important;top:55%!important;width:28%!important;transform:rotate(5deg)!important}
.why-v44-network .l4{left:51%!important;top:58%!important;width:28%!important;transform:rotate(-8deg)!important}
.why-v44-network .l5{left:18%!important;top:25%!important;width:40%!important;transform:rotate(39deg)!important}
.why-v44-network .l6{left:38%!important;top:20%!important;width:39%!important;transform:rotate(44deg)!important}
.why-v44-network .l7{left:64%!important;top:28%!important;width:18%!important;transform:rotate(73deg)!important}

.why-v36-visual{
  z-index:4!important;
}
.why-v36-visual img{
  z-index:5!important;
  border-radius:28px!important;
  box-shadow:
    0 42px 120px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 86px rgba(24,201,245,.16)!important;
}
.why-v36-visual figcaption{
  z-index:6!important;
}

/* Keep older pseudo grid very subtle; the new network owns the visual depth. */
.why-v36-visual::before{
  opacity:.16!important;
}
.why-v36-visual::after{
  opacity:.24!important;
}

@keyframes spxA845NetworkBreathe{
  from{opacity:.76;transform:translate3d(calc(var(--spx-home-mouse-x,0) * 14px),calc(var(--spx-home-mouse-y,0) * 9px),0) scale(.99)}
  to{opacity:1;transform:translate3d(calc(var(--spx-home-mouse-x,0) * 22px),calc(var(--spx-home-mouse-y,0) * 15px),0) scale(1.018)}
}
@keyframes spxA845GridDrift{
  from{opacity:.48;background-position:0 0,0 0,0 0,0 0}
  to{opacity:.72;background-position:56px 56px,56px 56px,0 0,0 0}
}
@keyframes spxA845GlowBreathe{
  from{opacity:.48;filter:blur(34px)}
  to{opacity:.78;filter:blur(48px)}
}

@media(max-width:1240px){
  .spx-why-v36-journey{
    min-height:auto!important;
  }
  .spx-why-v36-steps{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    display:grid!important;
    gap:18px!important;
  }
  .why-v36-step,
  .why-v36-step.is-before,
  .why-v36-step.is-after,
  .why-v36-step.is-active{
    position:relative!important;
    opacity:1!important;
    transform:none!important;
    height:auto!important;
    min-height:0!important;
    pointer-events:auto!important;
    filter:none!important;
    padding:22px 0!important;
  }
  .why-v44-network{
    inset:4% 0 10% 0!important;
  }
}
@media(max-width:820px){
  .v26-product-atmosphere{
    transform:none!important;
  }
  .why-v44-network{
    opacity:.58!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .why-v44-network,
  .why-v44-network::before,
  .why-v44-network::after{
    animation:none!important;
    transform:none!important;
  }
}


/* ==========================================================================
   A8.46 — hero angle restored + clear Why steps + visible circuit grid
   ========================================================================== */

/*
  Fixes after A8.45 feedback:
  - Hero right preview lost its angle and felt too transparent.
  - Hero still looked darker than Why because hero-only canvas/sky layers tinted it.
  - Other Why steps were visible under the active step.
  - Progress / outline heading state was not clear enough.
  - The right circuit/grid did not visibly come from behind the workflow screenshot.
  - Too many nested blocks made the Why visual feel unclear.
*/

/* HERO: restore product size, perspective angle and visual strength. */
.spx-hero-v26{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
.spx-hero-space{
  opacity:.22!important;
  mix-blend-mode:screen!important;
  filter:brightness(1.35) saturate(1.15)!important;
}
.spx-v26-sky{
  opacity:1!important; /* parent opacity was making the product transparent */
  mix-blend-mode:normal!important;
}
.spx-v26-sky::before{
  opacity:.13!important;
  mix-blend-mode:screen!important;
  filter:blur(34px) saturate(145%)!important;
}
.spx-v26-sky::after,
.v26-grid-plane,
.v26-cloud,
.v26-light-trace{
  opacity:.05!important;
}

/* Make the right hero screenshot large, angled and not washed out. */
.v26-product-atmosphere{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  left:50%!important;
  top:45.8%!important;
  width:min(1260px,84vw)!important;
  height:min(760px,53vw)!important;
  z-index:4!important;
  pointer-events:none!important;
  filter:
    drop-shadow(0 56px 140px rgba(0,0,0,.45))
    drop-shadow(0 0 72px rgba(24,201,245,.13))
    saturate(1.14)
    contrast(1.08)
    brightness(1.06)!important;
  transform:
    translate(-9%,-15%)
    perspective(1520px)
    rotateY(-11deg)
    rotateX(4deg)
    rotateZ(-1.2deg)
    translate3d(
      calc(var(--spx-v26-x,0px) * .16),
      calc(var(--spx-v26-y,0px) * .10),
      0
    )
    scale(1.08)!important;
  transform-origin:center!important;
}
.v26-product-atmosphere::before{
  opacity:.64!important;
  background:radial-gradient(circle at 55% 46%,rgba(24,201,245,.22),transparent 62%)!important;
}
.v26-product-atmosphere::after{
  opacity:.34!important;
  background:
    linear-gradient(90deg,rgba(2,5,13,.42) 0%,rgba(2,5,13,.18) 16%,rgba(2,5,13,.04) 42%,rgba(2,5,13,.06) 70%,rgba(2,5,13,.28) 100%),
    linear-gradient(180deg,rgba(2,5,13,.06),rgba(2,5,13,.02) 24%,rgba(2,5,13,.06) 100%)!important;
}
.v26-builder-base{
  opacity:1!important;
  padding:8px!important;
  border-radius:24px!important;
  border:1px solid rgba(107,232,255,.24)!important;
  background:rgba(5,11,23,.90)!important;
  filter:saturate(1.12) contrast(1.07) brightness(1.06)!important;
  box-shadow:
    0 36px 120px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.035) inset!important;
}
.v26-product-layer{
  opacity:1!important;
  border-radius:20px!important;
  filter:saturate(1.12) contrast(1.06) brightness(1.05)!important;
}
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add{
  opacity:0;
}

/* Keep the background identical through hero + Why.
   Any hero-only layer should add light, never darken. */
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.spx-v26-bottom-fade,
.spx-why-section.spx-why-v36::before,
.spx-why-section.spx-why-v36::after,
.why-v36-hero-tail,
.why-v36-grid,
.spx-why-v36-bg,
.why-v36-glow,
.why-v36-mist{
  display:none!important;
  opacity:0!important;
  background:none!important;
  filter:none!important;
  box-shadow:none!important;
}

/* Shared background moves even slower, so it feels like one large scene. */
.spx-home-main::before{
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * -9px),
      calc((var(--spx-bg-scroll,0) * -.012px) + (var(--spx-home-mouse-y,0) * -6px)),
      0
    )
    scale(1.045)!important;
}
.spx-home-main::after{
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 7px),
      calc((var(--spx-bg-scroll,0) * -.018px) + (var(--spx-home-mouse-y,0) * 5px)),
      0
    )
    scale(1.02)!important;
  opacity:.34!important;
}

/* WHY LEFT: only one step visible. No ghost text below the active step. */
.spx-why-v36-journey{
  min-height:360vh!important;
}
.spx-why-v36-steps{
  position:sticky!important;
  top:clamp(96px,18vh,150px)!important;
  height:min(560px,68vh)!important;
  display:block!important;
  padding-left:0!important;
  overflow:hidden!important;
}
.why-v36-step{
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:min(570px,100%)!important;
  height:100%!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding:28px 28px 28px 0!important;
  background:transparent!important;
  border:0!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,34px,0) scale(.985)!important;
  pointer-events:none!important;
  filter:blur(.6px)!important;
  transition:
    opacity .58s var(--ease),
    visibility .58s var(--ease),
    transform .58s var(--ease),
    filter .58s var(--ease)!important;
}
.why-v36-step.is-before,
.why-v36-step.is-after{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.why-v36-step.is-active{
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
  pointer-events:auto!important;
  filter:none!important;
}

/* Heading starts as outline by default and fills on active step. */
.why-v36-step h3{
  color:transparent!important;
  -webkit-text-stroke:1.25px rgba(245,250,255,.34)!important;
  text-shadow:none!important;
  transition:
    color .42s var(--ease),
    -webkit-text-stroke-color .42s var(--ease),
    opacity .42s var(--ease)!important;
}
.why-v36-step.is-active h3{
  color:var(--text)!important;
  -webkit-text-stroke:0 transparent!important;
}
html[data-theme="light"] .why-v36-step h3{
  -webkit-text-stroke-color:rgba(16,24,40,.30)!important;
}

/* Make per-step progress obvious. */
.why-v41-step-progress{
  display:block!important;
  width:min(360px,86%)!important;
  height:5px!important;
  margin:18px 0 0!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:rgba(107,232,255,.18)!important;
  box-shadow:
    inset 0 0 0 1px rgba(107,232,255,.08),
    0 0 24px rgba(24,201,245,.08)!important;
}
.why-v41-step-progress::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:calc(var(--step-progress,0) * 100%)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#18c9f5,#2563eb)!important;
  box-shadow:0 0 22px rgba(24,201,245,.58)!important;
}

/* WHY RIGHT: remove block-in-block feeling and make the screenshot the main object. */
.why-v36-stage,
.why-v36-stage-top,
.why-v36-visual figcaption{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.why-v36-stage-top{
  display:none!important;
}
.why-v36-stage{
  overflow:visible!important;
  perspective:1400px!important;
}
.why-v36-visuals{
  overflow:visible!important;
}

/* Circuit/grid field: now visible behind and around the screenshot, not far below. */
.why-v44-network{
  position:absolute!important;
  inset:-1% -16% 0% 0%!important;
  z-index:4!important;
  pointer-events:none!important;
  opacity:1!important;
  mix-blend-mode:screen!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 20px),
      calc(var(--spx-home-mouse-y,0) * 13px),
      0
    )!important;
  animation:spxA846NetworkBreathe 8s ease-in-out infinite alternate!important;
}
.why-v44-network::before{
  content:""!important;
  position:absolute!important;
  inset:4% -2% 10% 4%!important;
  z-index:0!important;
  opacity:.78!important;
  border:0!important;
  background:
    linear-gradient(rgba(107,232,255,.060) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.050) 1px,transparent 1px),
    linear-gradient(115deg,transparent 0 32%,rgba(24,201,245,.20) 48%,transparent 64%),
    radial-gradient(circle at calc(50% + (var(--spx-home-mouse-x,0) * 18%)) calc(45% + (var(--spx-home-mouse-y,0) * 14%)),rgba(24,201,245,.18),transparent 44%)!important;
  background-size:54px 54px,54px 54px,100% 100%,100% 100%!important;
  transform:perspective(1050px) rotateX(52deg)!important;
  transform-origin:center bottom!important;
  animation:spxA846GridDrift 9s ease-in-out infinite alternate!important;
  mask-image:linear-gradient(180deg,transparent 0%,black 10%,black 90%,transparent 100%)!important;
}
.why-v44-network::after{
  content:""!important;
  position:absolute!important;
  inset:10% -1% 8% 10%!important;
  z-index:1!important;
  border-radius:999px!important;
  background:
    radial-gradient(circle at calc(54% + (var(--spx-home-mouse-x,0) * 13%)) calc(46% + (var(--spx-home-mouse-y,0) * 10%)),rgba(24,201,245,.24),transparent 45%),
    radial-gradient(circle at 78% 26%,rgba(37,99,235,.18),transparent 42%)!important;
  filter:blur(40px)!important;
  opacity:.76!important;
  animation:spxA846GlowBreathe 8s ease-in-out infinite alternate!important;
}
.why-v44-network .node{
  width:9px!important;
  height:9px!important;
  background:rgba(203,249,255,.96)!important;
  box-shadow:0 0 26px rgba(24,201,245,.72)!important;
}
.why-v44-network .line{
  height:1.5px!important;
  opacity:.92!important;
  background:linear-gradient(90deg,rgba(107,232,255,0),rgba(107,232,255,.78),rgba(37,99,235,.24))!important;
  box-shadow:0 0 18px rgba(24,201,245,.32)!important;
}

/* Place the circuit through the same vertical zone as the image. */
.why-v44-network .n1{left:12%!important;top:22%!important}
.why-v44-network .n2{left:35%!important;top:14%!important}
.why-v44-network .n3{left:63%!important;top:24%!important}
.why-v44-network .n4{left:18%!important;top:55%!important}
.why-v44-network .n5{left:49%!important;top:56%!important}
.why-v44-network .n6{left:82%!important;top:50%!important}
.why-v44-network .l1{left:13%!important;top:23%!important;width:24%!important;transform:rotate(-17deg)!important}
.why-v44-network .l2{left:36%!important;top:16%!important;width:29%!important;transform:rotate(17deg)!important}
.why-v44-network .l3{left:19%!important;top:56%!important;width:31%!important;transform:rotate(2deg)!important}
.why-v44-network .l4{left:50%!important;top:57%!important;width:33%!important;transform:rotate(-10deg)!important}
.why-v44-network .l5{left:13%!important;top:24%!important;width:43%!important;transform:rotate(41deg)!important}
.why-v44-network .l6{left:35%!important;top:16%!important;width:42%!important;transform:rotate(43deg)!important}
.why-v44-network .l7{left:63%!important;top:25%!important;width:22%!important;transform:rotate(70deg)!important}

/* Image floats above grid but is no longer inside a heavy shell. */
.why-v36-visual{
  z-index:5!important;
}
.why-v36-visual img{
  z-index:6!important;
  border-radius:30px!important;
  border:1px solid rgba(107,232,255,.20)!important;
  background:rgba(5,11,23,.28)!important;
  box-shadow:
    0 48px 130px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 92px rgba(24,201,245,.18)!important;
  animation:spxA846VisualFloat 7.8s ease-in-out infinite alternate!important;
}
.why-v36-visual figcaption{
  left:auto!important;
  right:clamp(34px,6vw,98px)!important;
  bottom:28px!important;
  width:min(320px,42vw)!important;
  padding:0!important;
  color:var(--text)!important;
}
.why-v36-visual figcaption b{
  display:block!important;
  font-size:clamp(24px,2.3vw,38px)!important;
}
.why-v36-visual figcaption span{
  color:var(--text-soft)!important;
  font-size:14px!important;
}

/* Old pseudo grids stay almost invisible; the network owns the visual depth. */
.why-v36-visual::before,
.why-v36-visual::after{
  opacity:.08!important;
}

@keyframes spxA846NetworkBreathe{
  from{opacity:.72;transform:translate3d(calc(var(--spx-home-mouse-x,0) * 13px),calc(var(--spx-home-mouse-y,0) * 8px),0) scale(.99)}
  to{opacity:1;transform:translate3d(calc(var(--spx-home-mouse-x,0) * 24px),calc(var(--spx-home-mouse-y,0) * 16px),0) scale(1.02)}
}
@keyframes spxA846GridDrift{
  from{opacity:.58;background-position:0 0,0 0,0 0,0 0}
  to{opacity:.90;background-position:54px 54px,54px 54px,0 0,0 0}
}
@keyframes spxA846GlowBreathe{
  from{opacity:.46;filter:blur(34px)}
  to{opacity:.80;filter:blur(48px)}
}
@keyframes spxA846VisualFloat{
  from{transform:translate3d(0,-7px,0) rotate(.04deg)}
  to{transform:translate3d(0,8px,0) rotate(-.06deg)}
}

@media(max-width:1240px){
  .spx-why-v36-journey{
    min-height:auto!important;
  }
  .spx-why-v36-steps{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    display:grid!important;
    gap:18px!important;
    overflow:visible!important;
  }
  .why-v36-step,
  .why-v36-step.is-active{
    position:relative!important;
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
    height:auto!important;
    min-height:0!important;
    pointer-events:auto!important;
    filter:none!important;
    padding:22px 0!important;
  }
  .why-v36-step h3{
    color:var(--text)!important;
    -webkit-text-stroke:0 transparent!important;
  }
  .why-v44-network{
    inset:4% 0 10% 0!important;
  }
}
@media(max-width:900px){
  .v26-product-atmosphere{
    left:50%!important;
    top:60.2%!important;
    width:min(860px,100vw)!important;
    height:min(500px,62vw)!important;
    transform:translate(-50%,-10%) perspective(1200px) rotateY(-6deg) rotateX(2deg) scale(1.02)!important;
  }
}
@media(max-width:820px){
  .why-v44-network{
    opacity:.58!important;
  }
  .why-v41-step-progress{
    width:min(240px,82%)!important;
  }
}


/* ==========================================================================
   A8.47 — hero/why fluidity, smoother overlays, visible circuit frame
   ========================================================================== */

/* Use one shared atmospheric background for the whole hero + Why scene. */
.spx-home-main{
  overflow:visible!important;
  background:#050a14!important;
}
html[data-theme="light"] .spx-home-main{
  background:#eef3fa!important;
}
.spx-home-main::before,
.spx-home-main::after{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  left:0!important;
  right:0!important;
  height:100vh!important;
  background-repeat:no-repeat!important;
  will-change:transform!important;
}
.spx-home-main::before{
  background:
    radial-gradient(1260px 820px at 72% 10%,rgba(37,99,235,.20),transparent 66%),
    radial-gradient(1120px 720px at 16% 46%,rgba(24,201,245,.16),transparent 68%),
    linear-gradient(113deg,
      transparent 0 22%,
      rgba(37,99,235,.030) 34%,
      rgba(24,201,245,.12) 42%,
      rgba(215,244,255,.14) 49%,
      rgba(77,164,220,.08) 56%,
      transparent 76% 100%),
    linear-gradient(180deg,#02050d 0%,#06101d 48%,#07111f 100%)!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * -10px),calc((var(--spx-bg-scroll,0) * -.012px) + (var(--spx-home-mouse-y,0) * -6px)),0) scale(1.035)!important;
}
.spx-home-main::after{
  opacity:.34!important;
  background:
    radial-gradient(circle at 8% 18%,rgba(255,255,255,.58) 0 1px,transparent 1.8px),
    radial-gradient(circle at 23% 12%,rgba(107,232,255,.50) 0 1px,transparent 1.7px),
    radial-gradient(circle at 72% 9%,rgba(255,255,255,.56) 0 1px,transparent 1.8px),
    radial-gradient(circle at 84% 34%,rgba(107,232,255,.48) 0 1px,transparent 1.7px),
    radial-gradient(circle at 35% 42%,rgba(255,255,255,.42) 0 1px,transparent 1.8px),
    linear-gradient(rgba(107,232,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.014) 1px,transparent 1px)!important;
  background-size:470px 360px,390px 320px,520px 410px,460px 380px,540px 430px,96px 96px,96px 96px!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * 8px),calc((var(--spx-bg-scroll,0) * -.018px) + (var(--spx-home-mouse-y,0) * 5px)),0) scale(1.02)!important;
}
.spx-hero-v26,
.spx-hero-v26 .spx-hero-space,
.spx-why-section.spx-why-v36,
.spx-why-v36-shell,
.spx-why-v36-journey,
.spx-why-v36-sticky,
.spx-why-v36-steps{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.spx-hero-v26{
  overflow:visible!important;
}
.spx-hero-v26 .spx-hero-space{
  background:none!important;
  opacity:1!important;
}
.spx-v26-bottom-fade,
.spx-why-section.spx-why-v36::before,
.spx-why-section.spx-why-v36::after,
.spx-why-v36-bg,
.why-v36-glow,
.why-v36-mist,
.why-v36-grid,
.why-v36-hero-tail{
  display:none!important;
  opacity:0!important;
  background:none!important;
}
.spx-why-section.spx-why-v36{
  overflow:visible!important;
  margin-top:-600px!important;
  padding-top:600px!important;
}

/* Hero right preview: larger, more present, with calmer overlay cards. */
.v26-product-atmosphere{
  overflow:visible!important;
  top:45.2%!important;
  width:min(1320px,86vw)!important;
  height:min(800px,56vw)!important;
  transform:
    translate(-7%,-14%)
    perspective(1600px)
    rotateY(-11deg)
    rotateX(4deg)
    rotateZ(-1.15deg)
    translate3d(calc(var(--spx-v26-x,0px) * .15),calc(var(--spx-v26-y,0px) * .10),0)
    scale(1.1)!important;
}
.v26-builder-base{
  border-radius:22px!important;
}
.v26-product-layer{
  padding:4px!important;
  border-radius:18px!important;
  border-color:rgba(107,232,255,.16)!important;
  box-shadow:0 20px 54px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.03) inset!important;
}
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add{
  opacity:.92!important;
  filter:saturate(1.05) contrast(1.03)!important;
  animation-duration:8.8s!important;
  animation-timing-function:ease-in-out!important;
  animation-iteration-count:infinite!important;
  animation-fill-mode:both!important;
}
.v26-product-layer.layer-settings{
  right:3.0%!important;
  top:3.2%!important;
  width:27.5%!important;
  height:67%!important;
  animation-name:spxA847HeroPanelDriftA!important;
}
.v26-product-layer.layer-add{
  left:3.0%!important;
  top:10.6%!important;
  width:28.5%!important;
  height:63%!important;
  animation-name:spxA847HeroPanelDriftB!important;
}
@keyframes spxA847HeroPanelDriftA{
  from{opacity:.78;transform:translate3d(0,-6px,0) scale(.992)}
  to{opacity:.94;transform:translate3d(0,8px,0) scale(1.008)}
}
@keyframes spxA847HeroPanelDriftB{
  from{opacity:.82;transform:translate3d(0,8px,0) scale(.992)}
  to{opacity:.95;transform:translate3d(0,-7px,0) scale(1.008)}
}

/* WHY left: cleaner single-step stage with an always visible outlined step rail + clear progress. */
.spx-why-v36-steps{
  position:sticky!important;
  top:clamp(96px,18vh,150px)!important;
  overflow:visible!important;
}
.spx-why-v36-steps::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:46px!important;
  width:380px!important;
  height:2px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.22),rgba(107,232,255,.06))!important;
  box-shadow:0 0 22px rgba(24,201,245,.10)!important;
}
.why-v36-step{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translate3d(0,28px,0)!important;
  will-change:transform,opacity!important;
}
.why-v36-step.is-active,
.why-v36-step[data-spx-active="1"]{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0)!important;
}
.why-v36-step h3{
  color:transparent!important;
  -webkit-text-stroke:1.25px rgba(245,250,255,.34)!important;
}
html[data-theme="light"] .why-v36-step h3{
  -webkit-text-stroke-color:rgba(16,24,40,.30)!important;
}
.why-v36-step.is-active h3,
.why-v36-step[data-spx-active="1"] h3{
  color:var(--text)!important;
  -webkit-text-stroke:0 transparent!important;
}
.why-v41-step-progress{
  position:relative!important;
  display:block!important;
  width:min(380px,88%)!important;
  height:6px!important;
  margin:18px 0 0!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:rgba(107,232,255,.18)!important;
  box-shadow:inset 0 0 0 1px rgba(107,232,255,.08),0 0 24px rgba(24,201,245,.08)!important;
}
.why-v41-step-progress::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:calc(var(--step-progress,0) * 100%)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#18c9f5,#2563eb)!important;
  box-shadow:0 0 22px rgba(24,201,245,.58)!important;
}

/* WHY right: one larger screenshot, lighter framing, circuit lines extending around it. */
.why-v36-stage,
.why-v36-stage-top,
.why-v36-visual figcaption{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.why-v36-stage-top{display:none!important;}
.why-v36-stage{
  min-height:700px!important;
  overflow:visible!important;
  perspective:1400px!important;
}
.why-v36-visual{
  transition:opacity .72s var(--ease), transform .72s var(--ease), filter .72s var(--ease)!important;
  transform:translate3d(26px,12px,0) scale(.992)!important;
}
.why-v36-visual.is-active,
.why-v36-visual[data-spx-active="1"]{
  transform:translate3d(0,0,0) scale(1)!important;
}
.why-v36-visual img{
  inset:34px -18px 96px 4px!important;
  width:calc(100% + 14px)!important;
  height:calc(100% - 130px)!important;
  object-fit:contain!important;
  border-radius:28px!important;
  border:1px solid rgba(107,232,255,.14)!important;
  background:rgba(5,11,23,.16)!important;
  box-shadow:0 44px 120px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.03) inset!important;
  z-index:6!important;
}
.why-v36-visual figcaption{
  left:auto!important;
  right:44px!important;
  bottom:22px!important;
  width:min(320px,42vw)!important;
  padding:0!important;
  z-index:9!important;
}
.why-v44-network{
  inset:-4% -20% -4% -10%!important;
  z-index:8!important;
  opacity:1!important;
  mix-blend-mode:screen!important;
}
.why-v44-network::before{
  inset:8% -2% 8% -2%!important;
  opacity:.92!important;
  background:
    linear-gradient(rgba(107,232,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.058) 1px,transparent 1px),
    linear-gradient(115deg,transparent 0 34%,rgba(24,201,245,.18) 48%,transparent 62%),
    radial-gradient(circle at calc(50% + (var(--spx-home-mouse-x,0) * 18%)) calc(45% + (var(--spx-home-mouse-y,0) * 14%)),rgba(24,201,245,.18),transparent 44%)!important;
  background-size:56px 56px,56px 56px,100% 100%,100% 100%!important;
  transform:perspective(1050px) rotateX(52deg)!important;
}
.why-v44-network .node,
.why-v44-network .line{
  z-index:10!important;
}
.why-v44-network .node{
  width:9px!important;
  height:9px!important;
  box-shadow:0 0 26px rgba(24,201,245,.72)!important;
}
.why-v44-network .line{
  height:1.5px!important;
  opacity:.92!important;
  background:linear-gradient(90deg,rgba(107,232,255,0),rgba(107,232,255,.82),rgba(37,99,235,.28))!important;
  box-shadow:0 0 18px rgba(24,201,245,.32)!important;
}
/* extend around top / left / bottom of the image */
.why-v44-network .n1{left:5%!important;top:16%!important}
.why-v44-network .n2{left:29%!important;top:10%!important}
.why-v44-network .n3{left:68%!important;top:16%!important}
.why-v44-network .n4{left:2%!important;top:62%!important}
.why-v44-network .n5{left:40%!important;top:71%!important}
.why-v44-network .n6{left:86%!important;top:58%!important}
.why-v44-network .l1{left:6%!important;top:17%!important;width:24%!important;transform:rotate(-14deg)!important}
.why-v44-network .l2{left:30%!important;top:12%!important;width:40%!important;transform:rotate(8deg)!important}
.why-v44-network .l3{left:3%!important;top:63%!important;width:38%!important;transform:rotate(11deg)!important}
.why-v44-network .l4{left:41%!important;top:72%!important;width:46%!important;transform:rotate(-14deg)!important}
.why-v44-network .l5{left:6%!important;top:18%!important;width:50%!important;transform:rotate(45deg)!important}
.why-v44-network .l6{left:29%!important;top:12%!important;width:55%!important;transform:rotate(37deg)!important}
.why-v44-network .l7{left:68%!important;top:18%!important;width:18%!important;transform:rotate(77deg)!important}

@media(max-width:1240px){
  .spx-why-v36-steps::before{width:320px!important}
  .v26-product-atmosphere{width:min(1160px,86vw)!important;height:min(720px,58vw)!important}
}
@media(max-width:900px){
  .v26-product-atmosphere{
    left:50%!important;
    top:60.2%!important;
    width:min(860px,100vw)!important;
    height:min(500px,62vw)!important;
    transform:translate(-50%,-10%) perspective(1200px) rotateY(-6deg) rotateX(2deg) scale(1.02)!important;
  }
}


/* ==========================================================================
   A8.48 — larger Why visuals, square grid language, cleaner stage framing
   ========================================================================== */

/* A8.132 - root overflow-x clip keeps sticky Hero/What behavior intact in Chromium. */
html,body{overflow-x:clip!important;}
body{background:var(--bg)!important;}

/* Left explanation cards: styled again, but integrated into the grid language. */
.spx-why-v36-steps::before{
  left:0!important;
  top:38px!important;
  width:420px!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.32),rgba(107,232,255,.08))!important;
}
.why-v36-step{
  width:min(560px,100%)!important;
  padding:24px 28px 28px 0!important;
}
.why-v36-step.is-active,
.why-v36-step[data-spx-active="1"]{
  background:
    linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.01)),
    linear-gradient(90deg,rgba(24,201,245,.06),rgba(24,201,245,0))!important;
  border-left:1px solid rgba(107,232,255,.22)!important;
  box-shadow:inset 0 0 0 1px rgba(107,232,255,.05)!important;
}
.why-v36-step.is-active::before,
.why-v36-step[data-spx-active="1"]::before{
  content:""!important;
  position:absolute!important;
  inset:18px auto 18px -1px!important;
  width:2px!important;
  background:linear-gradient(180deg,rgba(24,201,245,.0),rgba(24,201,245,.95) 22%,rgba(37,99,235,.92) 78%,rgba(24,201,245,0))!important;
  box-shadow:0 0 18px rgba(24,201,245,.30)!important;
}
.why-v36-step.is-active::after,
.why-v36-step[data-spx-active="1"]::after{
  content:""!important;
  position:absolute!important;
  left:28px!important;
  top:0!important;
  width:164px!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.36),rgba(107,232,255,0))!important;
}
.why-v36-step span{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 0 10px!important;
  color:#bff4ff!important;
}
.why-v36-step span::after{
  content:""!important;
  width:44px!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.55),rgba(107,232,255,0))!important;
}
.why-v36-step p,
.why-v36-step ul,
.why-v36-step small{position:relative;z-index:2!important;}
.why-v36-step ul{margin-top:16px!important;gap:9px!important;}
.why-v36-step li{padding-left:18px!important;}
.why-v36-step li::before{width:6px!important;height:6px!important;top:.58em!important;}

/* Clearer per-step progress, integrated into the card. */
.why-v41-step-progress{
  width:min(410px,90%)!important;
  height:5px!important;
  margin:10px 0 16px!important;
  background:
    linear-gradient(90deg,rgba(107,232,255,.16),rgba(107,232,255,.04))!important;
}

/* Right stage: remove the amateuristic dark block feel. */
.spx-why-v36-sticky{
  width:min(1260px, calc(100vw - 10px))!important;
  margin-right:clamp(-220px,-14vw,-90px)!important;
  overflow:visible!important;
}
.why-v36-stage,
.why-v36-visuals,
.why-v36-visual,
.why-v36-visual figcaption{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.why-v36-stage{
  min-height:760px!important;
  overflow:visible!important;
  isolation:isolate!important;
}
.why-v36-visual{
  overflow:visible!important;
}

/* Bigger screenshot that may partially leave the right viewport, without horizontal scrolling. */
.why-v36-visual img{
  inset:26px -150px 82px -12px!important;
  width:calc(100% + 162px)!important;
  height:calc(100% - 108px)!important;
  object-fit:contain!important;
  object-position:center right!important;
  background:rgba(4,10,20,.05)!important;
  border:1px solid rgba(107,232,255,.10)!important;
  box-shadow:0 36px 110px rgba(0,0,0,.26),0 0 0 1px rgba(255,255,255,.02) inset!important;
}
html[data-theme="light"] .why-v36-visual img{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(15,23,42,.08)!important;
}

/* Floating support blocks: subtle, never covering the image. */
.why-v36-visual::before,
.why-v36-visual::after{
  content:""!important;
  position:absolute!important;
  z-index:4!important;
  pointer-events:none!important;
  border:1px solid rgba(107,232,255,.12)!important;
  background:
    linear-gradient(rgba(107,232,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.026) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))!important;
  background-size:24px 24px,24px 24px,100% 100%!important;
  box-shadow:0 18px 46px rgba(0,0,0,.18)!important;
  animation:spxA848SupportBlockFloat 9s ease-in-out infinite alternate!important;
}
.why-v36-visual::before{
  left:18px!important;
  top:34px!important;
  width:116px!important;
  height:90px!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * -8px),calc(var(--spx-home-mouse-y,0) * -5px),0)!important;
}
.why-v36-visual::after{
  right:32px!important;
  bottom:120px!important;
  width:144px!important;
  height:112px!important;
  animation-delay:-2.2s!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * 7px),calc(var(--spx-home-mouse-y,0) * 5px),0)!important;
}
@keyframes spxA848SupportBlockFloat{
  from{opacity:.45;transform:translate3d(0,-6px,0)}
  to{opacity:.78;transform:translate3d(0,7px,0)}
}

/* Caption becomes part of the circuit language, not a heavy block. */
.why-v36-visual figcaption{
  left:28px!important;
  right:auto!important;
  bottom:18px!important;
  width:min(360px,44vw)!important;
  padding:14px 16px 0!important;
}
.why-v36-visual figcaption::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:118px!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.42),rgba(107,232,255,0))!important;
}
.why-v36-visual figcaption::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:1px!important;
  height:78px!important;
  background:linear-gradient(180deg,rgba(107,232,255,.44),rgba(107,232,255,0))!important;
}
.why-v36-visual figcaption b{
  display:block!important;
  margin-left:14px!important;
  font-size:clamp(24px,2.4vw,38px)!important;
}
.why-v36-visual figcaption span{
  display:block!important;
  margin:6px 0 0 14px!important;
  max-width:320px!important;
}

/* Square circuit grid and connectors around the screenshot, extending above/left/below. */
.why-v44-network{
  inset:-8% -22% -8% -18%!important;
  z-index:5!important;
  opacity:1!important;
}
.why-v44-network::before{
  inset:6% 2% 8% 2%!important;
  opacity:.92!important;
  background:
    linear-gradient(rgba(107,232,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.070) 1px,transparent 1px),
    radial-gradient(circle at calc(48% + (var(--spx-home-mouse-x,0) * 15%)) calc(42% + (var(--spx-home-mouse-y,0) * 12%)),rgba(24,201,245,.14),transparent 42%)!important;
  background-size:48px 48px,48px 48px,100% 100%!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * 6px),calc(var(--spx-home-mouse-y,0) * 6px),0)!important;
  mask-image:none!important;
}
.why-v44-network::after{
  inset:8% 8% 10% 8%!important;
  opacity:.50!important;
}
.why-v44-network .node{width:8px!important;height:8px!important;}
.why-v44-network .line{
  height:2px!important;
  background:linear-gradient(90deg,rgba(107,232,255,0),rgba(107,232,255,.9),rgba(37,99,235,.32))!important;
}
/* more rectilinear layout */
.why-v44-network .n1{left:4%!important;top:14%!important}
.why-v44-network .n2{left:26%!important;top:14%!important}
.why-v44-network .n3{left:70%!important;top:16%!important}
.why-v44-network .n4{left:4%!important;top:62%!important}
.why-v44-network .n5{left:38%!important;top:72%!important}
.why-v44-network .n6{left:88%!important;top:58%!important}
.why-v44-network .l1{left:4%!important;top:15%!important;width:22%!important;transform:rotate(0deg)!important}
.why-v44-network .l2{left:26%!important;top:15%!important;width:44%!important;transform:rotate(0deg)!important}
.why-v44-network .l3{left:4%!important;top:63%!important;width:34%!important;transform:rotate(0deg)!important}
.why-v44-network .l4{left:38%!important;top:73%!important;width:50%!important;transform:rotate(0deg)!important}
.why-v44-network .l5{left:4%!important;top:15%!important;width:49%!important;transform:rotate(90deg)!important;transform-origin:left center!important}
.why-v44-network .l6{left:26%!important;top:15%!important;width:58%!important;transform:rotate(90deg)!important;transform-origin:left center!important}
.why-v44-network .l7{left:70%!important;top:16%!important;width:42%!important;transform:rotate(90deg)!important;transform-origin:left center!important}

@media(max-width:1240px){
  .spx-why-v36-sticky{margin-right:clamp(-140px,-8vw,-40px)!important}
  .why-v36-visual img{inset:28px -80px 88px 0!important;width:calc(100% + 88px)!important}
}
@media(max-width:900px){
  .spx-why-v36-sticky{margin-right:0!important;width:100%!important}
  .why-v36-stage{min-height:620px!important}
  .why-v36-visual img{inset:18px -16px 92px 0!important;width:calc(100% + 16px)!important;height:calc(100% - 110px)!important}
  .why-v36-visual::before,.why-v36-visual::after{display:none!important}
  .why-v36-visual figcaption{width:min(320px,72vw)!important}
}


/* ==========================================================================
   A8.49 — hero calm overlays + full Why restructure
   ========================================================================== */

/* Hero overlay panels: keep them alive, but remove visible loop resets. */
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add{
  animation-direction:alternate!important;
  animation-duration:14s!important;
  animation-timing-function:ease-in-out!important;
  animation-iteration-count:infinite!important;
  animation-fill-mode:both!important;
  will-change:transform,opacity!important;
}
.v26-product-atmosphere::after{
  opacity:.14!important;
  background:
    radial-gradient(110% 90% at 56% 48%,rgba(2,5,13,.03),rgba(2,5,13,.00) 52%,rgba(2,5,13,.10) 82%,rgba(2,5,13,.18) 100%),
    linear-gradient(180deg,rgba(2,5,13,.00) 0%,rgba(2,5,13,.02) 62%,rgba(2,5,13,.10) 100%)!important;
}
.v26-builder-base{
  background:rgba(5,11,23,.84)!important;
  box-shadow:0 28px 96px rgba(0,0,0,.24),0 0 0 1px rgba(255,255,255,.03) inset!important;
}

/* WHY: restructure to a cleaner split layout with all three steps always visible. */
.spx-why-v36-shell{position:relative!important;z-index:2!important;}
.spx-why-v36-head{max-width:920px!important;margin-bottom:34px!important;}
.spx-why-v36-journey{
  min-height:280vh!important;
  display:grid!important;
  grid-template-columns:minmax(320px, 500px) minmax(540px,1fr)!important;
  gap:clamp(24px,4vw,64px)!important;
  align-items:start!important;
}
.spx-why-v36-steps{
  position:sticky!important;
  top:clamp(96px,15vh,138px)!important;
  display:grid!important;
  gap:16px!important;
  height:auto!important;
  overflow:visible!important;
  padding-right:12px!important;
}
.spx-why-v36-steps::before{display:none!important;}
.why-v36-step{
  position:relative!important;
  visibility:visible!important;
  opacity:.44!important;
  pointer-events:none!important;
  transform:none!important;
  filter:none!important;
  height:auto!important;
  min-height:0!important;
  width:100%!important;
  padding:18px 20px 18px 18px!important;
  border:1px solid rgba(107,232,255,.10)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)),
    linear-gradient(90deg,rgba(24,201,245,.025),rgba(24,201,245,0) 52%)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.10)!important;
  transition:opacity .42s var(--ease), transform .42s var(--ease), border-color .42s var(--ease), box-shadow .42s var(--ease), background .42s var(--ease)!important;
}
.why-v36-step::before{
  content:""!important;
  position:absolute!important;
  left:-1px!important;
  top:16px!important;
  bottom:16px!important;
  width:2px!important;
  background:linear-gradient(180deg,rgba(24,201,245,0),rgba(24,201,245,.65),rgba(37,99,235,.65),rgba(24,201,245,0))!important;
  opacity:.22!important;
  transition:opacity .42s var(--ease), box-shadow .42s var(--ease)!important;
}
.why-v36-step span{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 12px!important;
  color:#bff4ff!important;
  letter-spacing:.02em!important;
}
.why-v36-step span::after{
  content:""!important;
  flex:0 0 44px!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.46),rgba(107,232,255,0))!important;
}
.why-v36-step h3{
  margin:0 0 10px!important;
  color:transparent!important;
  -webkit-text-stroke:1.1px rgba(245,250,255,.30)!important;
  transition:color .42s var(--ease), -webkit-text-stroke-color .42s var(--ease)!important;
}
html[data-theme="light"] .why-v36-step h3{-webkit-text-stroke-color:rgba(16,24,40,.28)!important;}
.why-v36-step p{margin:0 0 12px!important;}
.why-v36-step ul{margin:0!important;display:grid!important;gap:8px!important;}
.why-v36-step li{padding-left:16px!important;}
.why-v36-step li::before{width:6px!important;height:6px!important;top:.6em!important;}
.why-v36-step.is-active,
.why-v36-step[data-spx-active="1"]{
  opacity:1!important;
  border-color:rgba(107,232,255,.24)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012)),
    linear-gradient(90deg,rgba(24,201,245,.08),rgba(24,201,245,.01) 56%,rgba(24,201,245,0) 100%)!important;
  box-shadow:0 24px 64px rgba(0,0,0,.16), inset 0 0 0 1px rgba(107,232,255,.05)!important;
  transform:translate3d(0,-1px,0)!important;
}
.why-v36-step.is-active::before,
.why-v36-step[data-spx-active="1"]::before{opacity:1!important;box-shadow:0 0 18px rgba(24,201,245,.24)!important;}
.why-v36-step.is-active h3,
.why-v36-step[data-spx-active="1"] h3{color:var(--text)!important;-webkit-text-stroke:0 transparent!important;}
.why-v41-step-progress{
  position:relative!important;
  display:block!important;
  width:min(320px,86%)!important;
  height:5px!important;
  margin:0 0 12px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:linear-gradient(90deg,rgba(107,232,255,.14),rgba(107,232,255,.04))!important;
  box-shadow:inset 0 0 0 1px rgba(107,232,255,.06)!important;
}
.why-v41-step-progress::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:calc(var(--step-progress,0) * 100%)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#18c9f5,#2563eb)!important;
  box-shadow:0 0 20px rgba(24,201,245,.42)!important;
}

/* Right stage: one clean large preview area, less clutter. */
.spx-why-v36-sticky{
  position:sticky!important;
  top:clamp(88px,13vh,132px)!important;
  width:min(1340px, calc(100vw - 20px))!important;
  margin-right:clamp(-240px,-15vw,-100px)!important;
  overflow:visible!important;
}
.why-v36-stage,
.why-v36-visuals,
.why-v36-visual,
.why-v36-visual figcaption,
.why-v36-stage-top{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.why-v36-stage-top{display:none!important;}
.why-v36-stage{
  min-height:760px!important;
  overflow:visible!important;
  isolation:isolate!important;
}
.why-v36-visuals{position:relative!important;min-height:760px!important;overflow:visible!important;}
.why-v36-visual{
  position:absolute!important;
  inset:0!important;
  overflow:visible!important;
  transition:opacity .62s var(--ease), transform .62s var(--ease), filter .62s var(--ease)!important;
}
.why-v36-visual img{
  position:absolute!important;
  inset:12px -190px 88px 0!important;
  width:calc(100% + 190px)!important;
  height:calc(100% - 120px)!important;
  object-fit:contain!important;
  object-position:center right!important;
  border-radius:28px!important;
  background:rgba(4,10,20,.03)!important;
  border:1px solid rgba(107,232,255,.08)!important;
  box-shadow:0 34px 104px rgba(0,0,0,.22)!important;
  z-index:6!important;
}
.why-v36-visual::before,
.why-v36-visual::after{
  content:""!important;
  position:absolute!important;
  z-index:4!important;
  pointer-events:none!important;
  border:1px solid rgba(107,232,255,.10)!important;
  background:
    linear-gradient(rgba(107,232,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.018) 1px,transparent 1px) !important;
  background-size:22px 22px,22px 22px!important;
  box-shadow:0 16px 40px rgba(0,0,0,.10)!important;
  transition:transform .62s var(--ease), opacity .62s var(--ease)!important;
}
.why-v36-visual::before{
  left:24px!important;top:86px!important;width:104px!important;height:82px!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * -7px),calc(var(--spx-home-mouse-y,0) * -4px),0)!important;
}
.why-v36-visual::after{
  right:64px!important;bottom:132px!important;width:136px!important;height:104px!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * 6px),calc(var(--spx-home-mouse-y,0) * 4px),0)!important;
}
.why-v36-visual figcaption{
  position:absolute!important;
  left:26px!important;
  right:auto!important;
  bottom:20px!important;
  width:min(360px,44vw)!important;
  padding:14px 0 0 16px!important;
  z-index:9!important;
}
.why-v36-visual figcaption::before{
  content:""!important;
  position:absolute!important;
  left:0!important;top:0!important;width:110px!important;height:1px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.40),rgba(107,232,255,0))!important;
}
.why-v36-visual figcaption::after{
  content:""!important;
  position:absolute!important;
  left:0!important;top:0!important;width:1px!important;height:72px!important;
  background:linear-gradient(180deg,rgba(107,232,255,.40),rgba(107,232,255,0))!important;
}
.why-v36-visual figcaption b{display:block!important;margin-left:14px!important;font-size:clamp(24px,2.4vw,38px)!important;}
.why-v36-visual figcaption span{display:block!important;margin:6px 0 0 14px!important;max-width:320px!important;}

/* Cleaner square grid: fewer lines, deliberate endpoints, no random stop feeling. */
.why-v44-network{
  position:absolute!important;
  inset:0 -18% 0 -10%!important;
  z-index:5!important;
  opacity:1!important;
  mix-blend-mode:screen!important;
  pointer-events:none!important;
}
.why-v44-network::before,
.why-v44-network::after{display:none!important;}
.why-v44-network .node,
.why-v44-network .line{
  position:absolute!important;
  z-index:5!important;
  opacity:.88!important;
}
.why-v44-network .node{
  width:8px!important;height:8px!important;border-radius:0!important;
  background:rgba(203,249,255,.92)!important;
  box-shadow:0 0 18px rgba(24,201,245,.36)!important;
}
.why-v44-network .line{
  height:2px!important;
  background:linear-gradient(90deg,rgba(107,232,255,0),rgba(107,232,255,.92),rgba(37,99,235,.24))!important;
  box-shadow:0 0 14px rgba(24,201,245,.20)!important;
}
/* Top rail */
.why-v44-network .n1{left:6%!important;top:18%!important}
.why-v44-network .n2{left:29%!important;top:18%!important}
.why-v44-network .n3{left:75%!important;top:18%!important}
.why-v44-network .l1{left:6%!important;top:19%!important;width:23%!important;transform:none!important}
.why-v44-network .l2{left:29%!important;top:19%!important;width:46%!important;transform:none!important}
/* Left vertical frame */
.why-v44-network .n4{left:6%!important;top:68%!important}
.why-v44-network .l5{left:6%!important;top:19%!important;width:50%!important;transform:rotate(90deg)!important;transform-origin:left center!important}
/* Bottom rail */
.why-v44-network .n5{left:42%!important;top:74%!important}
.why-v44-network .n6{left:88%!important;top:62%!important}
.why-v44-network .l3{left:6%!important;top:69%!important;width:36%!important;transform:none!important}
.why-v44-network .l4{left:42%!important;top:75%!important;width:46%!important;transform:none!important}
/* Right vertical tail */
.why-v44-network .l6{left:75%!important;top:19%!important;width:42%!important;transform:rotate(90deg)!important;transform-origin:left center!important}
.why-v44-network .l7{left:88%!important;top:62%!important;width:18%!important;transform:rotate(90deg)!important;transform-origin:left center!important}

@media(max-width:1240px){
  .spx-why-v36-journey{grid-template-columns:minmax(300px,460px) minmax(480px,1fr)!important;gap:24px!important;}
  .spx-why-v36-sticky{margin-right:clamp(-150px,-9vw,-50px)!important;}
  .why-v36-visual img{inset:18px -110px 92px 0!important;width:calc(100% + 110px)!important;}
}
@media(max-width:980px){
  .spx-why-v36-journey{min-height:auto!important;grid-template-columns:1fr!important;}
  .spx-why-v36-steps,.spx-why-v36-sticky{position:relative!important;top:auto!important;}
  .spx-why-v36-sticky{width:100%!important;margin-right:0!important;}
  .why-v36-stage,.why-v36-visuals{min-height:620px!important;}
  .why-v36-visual img{inset:16px -20px 96px 0!important;width:calc(100% + 20px)!important;height:calc(100% - 118px)!important;}
}


/* ==========================================================================
   A8.50 — hero to why storyflow bridge + cleaner sticky step story
   ========================================================================== */

/* A8.132 - root overflow-x clip keeps sticky Hero/What behavior intact in Chromium. */
html,body{overflow-x:clip!important;}

/* HERO: make the right side ease into the Why story on scroll. */
.spx-hero-v26{position:relative!important;overflow:visible!important;}
.v26-product-atmosphere{
  transform:
    translate(calc(-7% - (var(--spx-hero-progress,0) * 9%)), calc(-14% + (var(--spx-hero-progress,0) * 11%)))
    perspective(1600px)
    rotateY(calc(-11deg + (var(--spx-hero-progress,0) * 5deg)))
    rotateX(calc(4deg - (var(--spx-hero-progress,0) * 2deg)))
    rotateZ(calc(-1.15deg + (var(--spx-hero-progress,0) * .7deg)))
    scale(calc(1.10 - (var(--spx-hero-progress,0) * .13)))!important;
  opacity:calc(1 - (var(--spx-hero-progress,0) * .26))!important;
  transition:transform .18s linear, opacity .18s linear!important;
}
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add{
  opacity:calc(.92 - (var(--spx-hero-progress,0) * .30))!important;
}
.v26-product-layer.layer-settings{
  transform:translate3d(0, calc((var(--spx-hero-progress,0) * 18px) - 4px), 0) scale(calc(1 - (var(--spx-hero-progress,0) * .035)))!important;
}
.v26-product-layer.layer-add{
  transform:translate3d(0, calc((var(--spx-hero-progress,0) * -16px) + 4px), 0) scale(calc(1 - (var(--spx-hero-progress,0) * .03)))!important;
}
.v26-product-atmosphere::after{
  opacity:calc(.10 - (var(--spx-hero-progress,0) * .05))!important;
}

/* WHY: content remains still while scroll advances the step story. */
.spx-why-v36-shell{position:relative!important;z-index:2!important;}
.spx-why-v36-journey{
  min-height:320vh!important;
  display:grid!important;
  grid-template-columns:minmax(320px, 500px) minmax(580px, 1fr)!important;
  gap:clamp(26px,4vw,64px)!important;
  align-items:start!important;
}
.spx-why-v36-steps,
.spx-why-v36-sticky{
  position:sticky!important;
  top:clamp(94px, 13vh, 136px)!important;
}

/* Left story stage: single active panel in a stable frame. */
.spx-why-v36-steps{
  display:block!important;
  height:min(460px, 58vh)!important;
  overflow:hidden!important;
  padding-right:18px!important;
}
.spx-why-v36-steps::before{display:none!important;}
.why-v36-step{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:22px 24px 22px 18px!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translate3d(0,24px,0)!important;
  border:1px solid rgba(107,232,255,.10)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008)),
    linear-gradient(90deg,rgba(24,201,245,.04),rgba(24,201,245,0) 58%)!important;
  box-shadow:0 22px 56px rgba(0,0,0,.12), inset 0 0 0 1px rgba(107,232,255,.03)!important;
  transition:opacity .48s var(--ease), transform .48s var(--ease), visibility .48s var(--ease)!important;
}
.why-v36-step::before{
  content:""!important;
  position:absolute!important;
  left:-1px!important;
  top:16px!important;
  bottom:16px!important;
  width:2px!important;
  opacity:.9!important;
  background:linear-gradient(180deg,rgba(24,201,245,0),rgba(24,201,245,.75),rgba(37,99,235,.72),rgba(24,201,245,0))!important;
  box-shadow:0 0 18px rgba(24,201,245,.20)!important;
}
.why-v36-step::after{
  content:""!important;
  position:absolute!important;
  left:18px!important;
  top:0!important;
  width:140px!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.34),rgba(107,232,255,0))!important;
}
.why-v36-step.is-active,
.why-v36-step[data-spx-active="1"]{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0)!important;
}
.why-v36-step span{display:flex!important;align-items:center!important;gap:12px!important;margin:0 0 12px!important;color:#bff4ff!important;}
.why-v36-step span::after{content:""!important;flex:0 0 44px!important;height:1px!important;background:linear-gradient(90deg,rgba(107,232,255,.50),rgba(107,232,255,0))!important;}
.why-v36-step h3{margin:0 0 10px!important;color:var(--text)!important;-webkit-text-stroke:0 transparent!important;}
.why-v36-step p{margin:0 0 14px!important;max-width:460px!important;}
.why-v36-step ul{display:grid!important;gap:9px!important;margin:0!important;}
.why-v36-step li{padding-left:16px!important;}
.why-v36-step li::before{width:6px!important;height:6px!important;top:.6em!important;}
.why-v41-step-progress{position:relative!important;display:block!important;width:min(330px,84%)!important;height:5px!important;margin:0 0 14px!important;border-radius:999px!important;overflow:hidden!important;background:linear-gradient(90deg,rgba(107,232,255,.16),rgba(107,232,255,.04))!important;box-shadow:inset 0 0 0 1px rgba(107,232,255,.05)!important;}
.why-v41-step-progress::before{content:""!important;position:absolute!important;inset:0 auto 0 0!important;width:calc(var(--step-progress,0) * 100%)!important;border-radius:999px!important;background:linear-gradient(90deg,#18c9f5,#2563eb)!important;box-shadow:0 0 18px rgba(24,201,245,.40)!important;}

/* Right story stage: only one preview visible, no confusing faded stack. */
.spx-why-v36-sticky{
  width:min(1360px, calc(100vw - 18px))!important;
  margin-right:clamp(-230px,-14vw,-92px)!important;
  overflow:visible!important;
}
.why-v36-stage,
.why-v36-visuals,
.why-v36-visual,
.why-v36-stage-top,
.why-v36-visual figcaption{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.why-v36-stage-top{display:none!important;}
.why-v36-stage,
.why-v36-visuals{min-height:760px!important;overflow:visible!important;isolation:isolate!important;}
.why-v36-visual{
  position:absolute!important;
  inset:0!important;
  overflow:visible!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translate3d(28px,14px,0) scale(.992)!important;
  transition:opacity .56s var(--ease), transform .56s var(--ease), filter .56s var(--ease)!important;
}
.why-v36-visual.is-active,
.why-v36-visual[data-spx-active="1"]{
  opacity:1!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
.why-v36-visual img{
  position:absolute!important;
  inset:18px -180px 88px 0!important;
  width:calc(100% + 180px)!important;
  height:calc(100% - 120px)!important;
  object-fit:contain!important;
  object-position:center right!important;
  border-radius:28px!important;
  background:rgba(4,10,20,.03)!important;
  border:1px solid rgba(107,232,255,.08)!important;
  box-shadow:0 34px 104px rgba(0,0,0,.20)!important;
  z-index:8!important;
}

/* Cleaner, less rigid modern network: fewer deliberate lines + asymmetrical support blocks. */
.why-v36-visual::before,
.why-v36-visual::after{
  content:""!important;
  position:absolute!important;
  z-index:6!important;
  pointer-events:none!important;
  border:1px solid rgba(107,232,255,.09)!important;
  background:
    linear-gradient(rgba(107,232,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.016) 1px,transparent 1px)!important;
  background-size:24px 24px,24px 24px!important;
  box-shadow:0 12px 30px rgba(0,0,0,.08)!important;
  transition:transform .56s var(--ease), opacity .56s var(--ease)!important;
}
.why-v36-visual::before{
  left:30px!important;top:78px!important;width:102px!important;height:74px!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * -6px),calc(var(--spx-home-mouse-y,0) * -4px),0)!important;
}
.why-v36-visual::after{
  right:70px!important;bottom:132px!important;width:132px!important;height:100px!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * 5px),calc(var(--spx-home-mouse-y,0) * 4px),0)!important;
}
.why-v36-visual figcaption{
  position:absolute!important;
  left:26px!important;
  bottom:18px!important;
  width:min(360px,44vw)!important;
  padding:14px 0 0 16px!important;
  z-index:10!important;
}
.why-v36-visual figcaption::before{content:""!important;position:absolute!important;left:0!important;top:0!important;width:110px!important;height:1px!important;background:linear-gradient(90deg,rgba(107,232,255,.38),rgba(107,232,255,0))!important;}
.why-v36-visual figcaption::after{content:""!important;position:absolute!important;left:0!important;top:0!important;width:1px!important;height:70px!important;background:linear-gradient(180deg,rgba(107,232,255,.38),rgba(107,232,255,0))!important;}
.why-v36-visual figcaption b{display:block!important;margin-left:14px!important;font-size:clamp(24px,2.4vw,38px)!important;}
.why-v36-visual figcaption span{display:block!important;margin:6px 0 0 14px!important;max-width:320px!important;}

.why-v44-network{
  position:absolute!important;
  inset:2% -14% 6% -8%!important;
  z-index:5!important;
  pointer-events:none!important;
  mix-blend-mode:screen!important;
}
.why-v44-network::before,
.why-v44-network::after{display:none!important;}
.why-v44-network .node,
.why-v44-network .line{position:absolute!important;opacity:.86!important;z-index:5!important;}
.why-v44-network .node{width:8px!important;height:8px!important;border-radius:2px!important;background:rgba(203,249,255,.90)!important;box-shadow:0 0 14px rgba(24,201,245,.24)!important;}
.why-v44-network .line{height:2px!important;background:linear-gradient(90deg,rgba(107,232,255,0),rgba(107,232,255,.82),rgba(37,99,235,.20))!important;box-shadow:0 0 10px rgba(24,201,245,.12)!important;}
/* asymmetrical but deliberate frame */
.why-v44-network .n1{left:7%!important;top:21%!important}
.why-v44-network .n2{left:34%!important;top:15%!important}
.why-v44-network .n3{left:76%!important;top:20%!important}
.why-v44-network .n4{left:12%!important;top:66%!important}
.why-v44-network .n5{left:46%!important;top:74%!important}
.why-v44-network .n6{left:89%!important;top:58%!important}
.why-v44-network .l1{left:7%!important;top:22%!important;width:27%!important;transform:rotate(-6deg)!important}
.why-v44-network .l2{left:34%!important;top:16%!important;width:42%!important;transform:rotate(4deg)!important}
.why-v44-network .l3{left:12%!important;top:67%!important;width:34%!important;transform:rotate(8deg)!important}
.why-v44-network .l4{left:46%!important;top:75%!important;width:43%!important;transform:rotate(-10deg)!important}
.why-v44-network .l5{left:7%!important;top:22%!important;width:45%!important;transform:rotate(76deg)!important;transform-origin:left center!important}
.why-v44-network .l6{left:76%!important;top:20%!important;width:38%!important;transform:rotate(88deg)!important;transform-origin:left center!important}
.why-v44-network .l7{left:34%!important;top:16%!important;width:26%!important;transform:rotate(88deg)!important;transform-origin:left center!important}

@media(max-width:1240px){
  .spx-why-v36-journey{grid-template-columns:minmax(300px,460px) minmax(500px,1fr)!important;gap:26px!important;}
  .spx-why-v36-sticky{margin-right:clamp(-150px,-9vw,-44px)!important;}
  .why-v36-visual img{inset:24px -110px 90px 0!important;width:calc(100% + 110px)!important;}
}
@media(max-width:980px){
  .spx-why-v36-journey{min-height:auto!important;grid-template-columns:1fr!important;}
  .spx-why-v36-steps,.spx-why-v36-sticky{position:relative!important;top:auto!important;height:auto!important;}
  .spx-why-v36-steps{display:grid!important;overflow:visible!important;}
  .why-v36-step{position:relative!important;inset:auto!important;height:auto!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important;}
  .spx-why-v36-sticky{width:100%!important;margin-right:0!important;}
  .why-v36-stage,.why-v36-visuals{min-height:620px!important;}
  .why-v36-visual{position:relative!important;inset:auto!important;opacity:1!important;pointer-events:auto!important;transform:none!important;display:none!important;}
  .why-v36-visual.is-active,.why-v36-visual[data-spx-active="1"]{display:block!important;}
  .why-v36-visual img{inset:16px -20px 96px 0!important;width:calc(100% + 20px)!important;height:calc(100% - 118px)!important;}
}


/* ==========================================================================
   A8.51 — hero entry, looser panels, pinned Why story, ZIP report cleanup
   ========================================================================== */

/* Global safety: right-side visuals may leave the viewport, but never create horizontal scroll. */
html, body {
  overflow-x: hidden !important;
}

/* HERO: prevent glow clipping at the bottom and keep the whole product atmosphere alive. */
.spx-hero-v26,
.spx-v26-shell,
.spx-hero-space,
.spx-v26-visual {
  overflow: visible !important;
}
.spx-hero-v26 {
  padding-bottom: clamp(260px, 22vw, 420px) !important;
  margin-bottom: clamp(-260px, -18vw, -180px) !important;
}
.v26-product-atmosphere,
.v26-builder-base,
.v26-product-layer {
  overflow: visible !important;
}

/* A slightly bigger, clearer right hero object, with glow allowed to breathe. */
.v26-product-atmosphere {
  top: 44.5% !important;
  width: min(1380px, 88vw) !important;
  height: min(830px, 58vw) !important;
  filter:
    drop-shadow(0 62px 150px rgba(0,0,0,.42))
    drop-shadow(0 0 92px rgba(24,201,245,.18))
    saturate(1.17)
    contrast(1.08)
    brightness(1.08) !important;
}
.v26-product-atmosphere::before {
  opacity: .72 !important;
  inset: -18% -14% -18% -12% !important;
  filter: blur(42px) !important;
}
.v26-product-atmosphere::after {
  opacity: .08 !important;
  background:
    radial-gradient(110% 92% at 56% 50%, rgba(2,5,13,0), rgba(2,5,13,.03) 62%, rgba(2,5,13,.10) 100%) !important;
}

/* Hero entry animation: one-time load motion without fighting scroll transforms. */
html.spx-hero-entry-ready .v26-builder-base {
  animation: spxA851HeroBaseEnter .92s cubic-bezier(.16,1,.3,1) both !important;
}
html.spx-hero-entry-ready .v26-product-layer.layer-add {
  animation: spxA851HeroPanelEnterLeft 1.05s cubic-bezier(.16,1,.3,1) .12s both !important;
}
html.spx-hero-entry-ready .v26-product-layer.layer-settings {
  animation: spxA851HeroPanelEnterRight 1.05s cubic-bezier(.16,1,.3,1) .18s both !important;
}

/* Make add/settings feel like separate floating elements, without looping reset animations. */
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add {
  animation: none !important;
  padding: 3px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(107,232,255,.13) !important;
  background: rgba(5,11,23,.58) !important;
  box-shadow:
    0 26px 68px rgba(0,0,0,.23),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 38px rgba(24,201,245,.055) !important;
  opacity: calc(.96 - (var(--spx-hero-progress,0) * .22)) !important;
  transition: opacity .18s linear, filter .18s linear !important;
  will-change: transform, opacity, filter !important;
}
.v26-product-layer.layer-settings {
  right: -1.6% !important;
  top: -1.2% !important;
  width: 30% !important;
  height: 72% !important;
  transform:
    translate3d(
      calc((var(--spx-home-mouse-x,0) * 10px) + (var(--spx-hero-progress,0) * -10px)),
      calc((var(--spx-home-mouse-y,0) * 6px) + (var(--spx-hero-progress,0) * 12px)),
      0
    )
    scale(calc(1 - (var(--spx-hero-progress,0) * .035))) !important;
}
.v26-product-layer.layer-add {
  left: -2.2% !important;
  top: 6.5% !important;
  width: 30.5% !important;
  height: 65% !important;
  transform:
    translate3d(
      calc((var(--spx-home-mouse-x,0) * -8px) + (var(--spx-hero-progress,0) * 10px)),
      calc((var(--spx-home-mouse-y,0) * -5px) + (var(--spx-hero-progress,0) * -10px)),
      0
    )
    scale(calc(1 - (var(--spx-hero-progress,0) * .03))) !important;
}

/* Keep section colors unified: no local block/fade may tint hero or Why differently. */
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36,
.spx-why-v36-shell,
.spx-why-v36-journey,
.spx-why-v36-sticky,
.spx-why-v36-steps {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.spx-v26-bottom-fade,
.spx-why-section.spx-why-v36::before,
.spx-why-section.spx-why-v36::after,
.spx-why-v36-bg,
.why-v36-glow,
.why-v36-mist,
.why-v36-grid,
.why-v36-hero-tail {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

/* WHY: true pinned story. The track scrolls, the content stays locked in place. */
.spx-why-section.spx-why-v36 {
  overflow: visible !important;
  margin-top: clamp(-360px, -22vw, -240px) !important;
  padding-top: clamp(420px, 28vw, 560px) !important;
  padding-bottom: clamp(110px, 8vw, 170px) !important;
}
.spx-why-v36-journey {
  position: relative !important;
  min-height: 300vh !important;
  display: grid !important;
  grid-template-columns: minmax(330px, 500px) minmax(620px, 1fr) !important;
  gap: clamp(30px, 4.5vw, 72px) !important;
  align-items: start !important;
}
.spx-why-v36-steps,
.spx-why-v36-sticky {
  position: sticky !important;
  top: clamp(92px, 13vh, 132px) !important;
  align-self: start !important;
}
.spx-why-v36-steps {
  height: min(500px, 62vh) !important;
  overflow: hidden !important;
  display: block !important;
  padding: 0 12px 0 0 !important;
}
.why-v36-step {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0, 22px, 0) !important;
  padding: 24px 24px 24px 20px !important;
  border: 1px solid rgba(107,232,255,.11) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.020), rgba(255,255,255,.008)),
    linear-gradient(90deg, rgba(24,201,245,.045), rgba(24,201,245,0) 62%) !important;
  box-shadow: 0 22px 56px rgba(0,0,0,.12), inset 0 0 0 1px rgba(107,232,255,.035) !important;
  transition:
    opacity .54s cubic-bezier(.16,1,.3,1),
    transform .54s cubic-bezier(.16,1,.3,1),
    visibility .54s cubic-bezier(.16,1,.3,1) !important;
}
.why-v36-step.is-active,
.why-v36-step[data-spx-active="1"] {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate3d(0,0,0) !important;
}
.why-v36-step::before {
  content: "" !important;
  position: absolute !important;
  left: -1px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 2px !important;
  background: linear-gradient(180deg, rgba(24,201,245,0), rgba(24,201,245,.75), rgba(37,99,235,.72), rgba(24,201,245,0)) !important;
}
.why-v36-step::after {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  top: 0 !important;
  width: 146px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(107,232,255,.36), rgba(107,232,255,0)) !important;
}
.why-v36-step h3 {
  color: var(--text) !important;
  -webkit-text-stroke: 0 transparent !important;
}
.why-v41-step-progress {
  width: min(340px, 86%) !important;
  height: 5px !important;
  margin: 0 0 14px !important;
}

/* WHY visual: one visible image only. Network supports the image, not overpowers it. */
.spx-why-v36-sticky {
  width: min(1380px, calc(100vw - 16px)) !important;
  margin-right: clamp(-230px, -14vw, -92px) !important;
  overflow: visible !important;
}
.why-v36-stage,
.why-v36-visuals {
  min-height: 760px !important;
  overflow: visible !important;
  isolation: isolate !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.why-v36-stage-top { display: none !important; }
.why-v36-visual {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(24px, 12px, 0) scale(.994) !important;
  transition:
    opacity .58s cubic-bezier(.16,1,.3,1),
    transform .58s cubic-bezier(.16,1,.3,1),
    visibility .58s cubic-bezier(.16,1,.3,1),
    filter .58s cubic-bezier(.16,1,.3,1) !important;
}
.why-v36-visual.is-active,
.why-v36-visual[data-spx-active="1"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0,0,0) scale(1) !important;
}
.why-v36-visual img {
  position: absolute !important;
  inset: 18px -190px 88px 0 !important;
  width: calc(100% + 190px) !important;
  height: calc(100% - 120px) !important;
  object-fit: contain !important;
  object-position: center right !important;
  border-radius: 28px !important;
  background: rgba(4,10,20,.03) !important;
  border: 1px solid rgba(107,232,255,.08) !important;
  box-shadow: 0 34px 104px rgba(0,0,0,.20) !important;
  z-index: 8 !important;
}

/* Modernized, lightly randomized network: controlled, not chaotic. */
.why-v44-network {
  position: absolute !important;
  inset: 2% -14% 6% -8% !important;
  z-index: 5 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}
.why-v44-network::before,
.why-v44-network::after {
  display: none !important;
}
.why-v44-network .node,
.why-v44-network .line {
  position: absolute !important;
  opacity: .78 !important;
  z-index: 5 !important;
}
.why-v44-network .node {
  width: 8px !important;
  height: 8px !important;
  border-radius: 2px !important;
  background: rgba(203,249,255,.88) !important;
  box-shadow: 0 0 14px rgba(24,201,245,.24) !important;
}
.why-v44-network .line {
  height: 2px !important;
  background: linear-gradient(90deg, rgba(107,232,255,0), rgba(107,232,255,.70), rgba(37,99,235,.16)) !important;
  box-shadow: 0 0 10px rgba(24,201,245,.12) !important;
}
/* asymmetric but readable layout */
.why-v44-network .n1{left:7%!important;top:21%!important}
.why-v44-network .n2{left:34%!important;top:15%!important}
.why-v44-network .n3{left:76%!important;top:20%!important}
.why-v44-network .n4{left:12%!important;top:66%!important}
.why-v44-network .n5{left:46%!important;top:74%!important}
.why-v44-network .n6{left:89%!important;top:58%!important}
.why-v44-network .l1{left:7%!important;top:22%!important;width:27%!important;transform:rotate(-6deg)!important}
.why-v44-network .l2{left:34%!important;top:16%!important;width:42%!important;transform:rotate(4deg)!important}
.why-v44-network .l3{left:12%!important;top:67%!important;width:34%!important;transform:rotate(8deg)!important}
.why-v44-network .l4{left:46%!important;top:75%!important;width:43%!important;transform:rotate(-10deg)!important}
.why-v44-network .l5{left:7%!important;top:22%!important;width:45%!important;transform:rotate(76deg)!important;transform-origin:left center!important}
.why-v44-network .l6{left:76%!important;top:20%!important;width:38%!important;transform:rotate(88deg)!important;transform-origin:left center!important}
.why-v44-network .l7{left:34%!important;top:16%!important;width:26%!important;transform:rotate(88deg)!important;transform-origin:left center!important}

@keyframes spxA851HeroBaseEnter {
  from { opacity: 0; filter: blur(10px) saturate(.9); }
  to { opacity: 1; filter: blur(0) saturate(1.12); }
}
@keyframes spxA851HeroPanelEnterLeft {
  from { opacity: 0; filter: blur(8px); }
  to { opacity: .96; filter: blur(0); }
}
@keyframes spxA851HeroPanelEnterRight {
  from { opacity: 0; filter: blur(8px); }
  to { opacity: .96; filter: blur(0); }
}

@media(max-width:980px){
  .spx-why-v36-journey {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
  }
  .spx-why-v36-steps,
  .spx-why-v36-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    width: 100% !important;
    margin-right: 0 !important;
  }
  .why-v36-step {
    position: relative !important;
    inset: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    height: auto !important;
    margin-bottom: 16px !important;
  }
  .why-v36-stage,
  .why-v36-visuals {
    min-height: 620px !important;
  }
  .why-v36-visual {
    position: relative !important;
    inset: auto !important;
    display: none !important;
  }
  .why-v36-visual.is-active,
  .why-v36-visual[data-spx-active="1"] {
    display: block !important;
  }
  .why-v36-visual img {
    inset: 16px -20px 96px 0 !important;
    width: calc(100% + 20px) !important;
    height: calc(100% - 118px) !important;
  }
}


/* ==========================================================================
   A8.52 — clean Why Spixor rebuild + hero right tune
   ========================================================================== */

/* Root safety */
html, body {
  overflow-x: hidden !important;
}

/* Hero tuning */
.spx-hero-v26,
.spx-v26-shell,
.spx-hero-space,
.spx-v26-visual {
  overflow: visible !important;
}
.spx-hero-v26 {
  padding-bottom: clamp(240px, 20vw, 380px) !important;
  margin-bottom: clamp(-250px, -17vw, -170px) !important;
}

/* Move hero image higher and keep it strong. */
.v26-product-atmosphere {
  top: 40.5% !important;
  left: 50% !important;
  width: min(1360px, 88vw) !important;
  height: min(820px, 58vw) !important;
  opacity: calc(1 - (var(--spx-hero-progress, 0) * .18)) !important;
  filter:
    drop-shadow(0 62px 150px rgba(0,0,0,.42))
    drop-shadow(0 0 92px rgba(24,201,245,.18))
    saturate(1.16)
    contrast(1.08)
    brightness(1.08) !important;
  transform:
    translate(calc(-8% - (var(--spx-hero-progress, 0) * 7%)), calc(-20% + (var(--spx-hero-progress, 0) * 8%)))
    perspective(1600px)
    rotateY(calc(-11deg + (var(--spx-hero-progress, 0) * 4deg)))
    rotateX(calc(4deg - (var(--spx-hero-progress, 0) * 1.8deg)))
    rotateZ(calc(-1.15deg + (var(--spx-hero-progress, 0) * .5deg)))
    scale(calc(1.09 - (var(--spx-hero-progress, 0) * .10))) !important;
  transition: opacity .18s linear, transform .18s linear, filter .18s linear !important;
}
.v26-product-atmosphere::before {
  opacity: .72 !important;
  inset: -18% -14% -18% -12% !important;
  filter: blur(42px) !important;
}
.v26-product-atmosphere::after {
  opacity: .08 !important;
  background:
    radial-gradient(110% 92% at 56% 50%, rgba(2,5,13,0), rgba(2,5,13,.03) 62%, rgba(2,5,13,.10) 100%) !important;
}
.v26-builder-base {
  background: rgba(5,11,23,.84) !important;
  box-shadow: 0 28px 96px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.03) inset !important;
}

/* Settings panel was too far right; bring panels inward, let them feel separate without loop reset. */
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add {
  animation: none !important;
  padding: 3px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(107,232,255,.13) !important;
  background: rgba(5,11,23,.58) !important;
  box-shadow:
    0 26px 68px rgba(0,0,0,.23),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 38px rgba(24,201,245,.055) !important;
  opacity: calc(.96 - (var(--spx-hero-progress,0) * .20)) !important;
  will-change: transform, opacity, filter !important;
}
.v26-product-layer.layer-settings {
  right: 4.7% !important;
  top: .6% !important;
  width: 27.5% !important;
  height: 70% !important;
  transform:
    translate3d(
      calc((var(--spx-home-mouse-x,0) * 9px) + (var(--spx-hero-progress,0) * -7px)),
      calc((var(--spx-home-mouse-y,0) * 6px) + (var(--spx-hero-progress,0) * 10px)),
      0
    )
    scale(calc(1 - (var(--spx-hero-progress,0) * .03))) !important;
}
.v26-product-layer.layer-add {
  left: .5% !important;
  top: 6.2% !important;
  width: 28% !important;
  height: 64% !important;
  transform:
    translate3d(
      calc((var(--spx-home-mouse-x,0) * -8px) + (var(--spx-hero-progress,0) * 7px)),
      calc((var(--spx-home-mouse-y,0) * -5px) + (var(--spx-hero-progress,0) * -8px)),
      0
    )
    scale(calc(1 - (var(--spx-hero-progress,0) * .028))) !important;
}

/* Hero entry, no transform fight */
html.spx-hero-entry-ready .v26-builder-base {
  animation: spxA852HeroBaseEnter .9s cubic-bezier(.16,1,.3,1) both !important;
}
html.spx-hero-entry-ready .v26-product-layer.layer-add {
  animation: spxA852PanelOpacityIn .85s cubic-bezier(.16,1,.3,1) .10s both !important;
}
html.spx-hero-entry-ready .v26-product-layer.layer-settings {
  animation: spxA852PanelOpacityIn .85s cubic-bezier(.16,1,.3,1) .16s both !important;
}
@keyframes spxA852HeroBaseEnter {
  from { opacity: 0; filter: blur(10px) saturate(.9); }
  to { opacity: 1; filter: blur(0) saturate(1.12); }
}
@keyframes spxA852PanelOpacityIn {
  from { opacity: 0; filter: blur(7px); }
  to { opacity: .96; filter: blur(0); }
}

/* Full Why rebuild: neutralize old Why styles */
.spx-why-section.spx-why-v52,
.spx-why-section.spx-why-v52 * {
  box-sizing: border-box;
}
.spx-why-section.spx-why-v52 {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  margin-top: clamp(-340px, -20vw, -220px) !important;
  padding: clamp(430px, 28vw, 560px) var(--side) clamp(110px, 9vw, 180px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.spx-why-section.spx-why-v52::before,
.spx-why-section.spx-why-v52::after {
  display: none !important;
  content: none !important;
}
.spx-why-v52 .spx-why52-shell {
  position: relative;
  z-index: 2;
  width: min(1640px, 100%);
  margin: 0 auto;
}
.spx-why52-head {
  max-width: 850px;
  margin: 0 0 clamp(28px, 4vw, 54px);
}
.spx-why52-head h2 {
  margin: 14px 0 0;
  font-size: clamp(48px, 6vw, 92px);
  line-height: .9;
  letter-spacing: -.08em;
}
.spx-why52-head p {
  margin: 20px 0 0;
  max-width: 660px;
  color: var(--text-soft);
  font-size: clamp(17px, 1.2vw, 21px);
  line-height: 1.5;
}

/* Scroll track. The track scrolls; the inside stays pinned. */
.spx-why52-track {
  position: relative;
  min-height: 275vh;
}
.spx-why52-sticky {
  position: sticky;
  top: clamp(86px, 11vh, 124px);
  min-height: min(760px, 82vh);
  display: grid;
  grid-template-columns: minmax(320px, 500px) minmax(620px, 1fr);
  gap: clamp(30px, 4.6vw, 76px);
  align-items: center;
}

/* Left story cards */
.spx-why52-copy {
  display: grid;
  gap: 14px;
  align-self: center;
}
.why52-step {
  --step-progress: 0;
  position: relative;
  min-height: 116px;
  padding: 18px 20px 18px 18px;
  border: 1px solid rgba(107,232,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.020), rgba(255,255,255,.008)),
    linear-gradient(90deg, rgba(24,201,245,.035), rgba(24,201,245,0) 62%);
  color: var(--text);
  opacity: .48;
  transform: translate3d(0,0,0);
  transition:
    opacity .38s var(--ease),
    transform .38s var(--ease),
    min-height .38s var(--ease),
    border-color .38s var(--ease),
    background .38s var(--ease);
}
.why52-step::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  opacity: .22;
  background: linear-gradient(180deg, rgba(24,201,245,0), rgba(24,201,245,.72), rgba(37,99,235,.72), rgba(24,201,245,0));
  transition: opacity .38s var(--ease);
}
.why52-step::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, rgba(107,232,255,.30), rgba(107,232,255,0));
}
.why52-step span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #bff4ff;
  font-size: 12px;
  font-weight: 980;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.why52-step span::after {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, rgba(107,232,255,.48), rgba(107,232,255,0));
}
.why52-progress {
  position: relative;
  display: block;
  width: min(320px, 86%);
  height: 5px;
  margin: 12px 0 0;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(107,232,255,.15), rgba(107,232,255,.04));
  box-shadow: inset 0 0 0 1px rgba(107,232,255,.05);
}
.why52-progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--step-progress,0) * 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, #18c9f5, #2563eb);
  box-shadow: 0 0 18px rgba(24,201,245,.40);
}
.why52-step h3 {
  margin: 13px 0 0;
  font-size: clamp(23px, 2.05vw, 36px);
  line-height: 1.02;
  letter-spacing: -.055em;
  color: transparent;
  -webkit-text-stroke: 1.1px rgba(245,250,255,.30);
}
html[data-theme="light"] .why52-step h3 {
  -webkit-text-stroke-color: rgba(16,24,40,.28);
}
.why52-step p,
.why52-step ul {
  max-height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .38s var(--ease), opacity .38s var(--ease), margin .38s var(--ease);
}
.why52-step p {
  color: var(--secondary);
  font-size: 15px;
  line-height: 1.45;
}
.why52-step ul {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.why52-step li {
  position: relative;
  padding-left: 16px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.42;
}
.why52-step li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  background: var(--cyan-2);
  box-shadow: 0 0 14px rgba(24,201,245,.30);
}
.why52-step.is-active {
  min-height: 260px;
  opacity: 1;
  transform: translate3d(0,-2px,0);
  border-color: rgba(107,232,255,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.012)),
    linear-gradient(90deg, rgba(24,201,245,.085), rgba(24,201,245,.01) 58%, rgba(24,201,245,0));
  box-shadow: 0 24px 64px rgba(0,0,0,.15), inset 0 0 0 1px rgba(107,232,255,.045);
}
.why52-step.is-active::before {
  opacity: 1;
}
.why52-step.is-active h3 {
  color: var(--text);
  -webkit-text-stroke: 0 transparent;
}
.why52-step.is-active p {
  max-height: 92px;
  opacity: 1;
  margin: 14px 0 0;
}
.why52-step.is-active ul {
  max-height: 130px;
  opacity: 1;
  margin: 16px 0 0;
}

/* Right stage */
.spx-why52-stage {
  position: relative;
  min-height: min(760px, 78vh);
  align-self: center;
  overflow: visible;
}
.why52-visuals {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.why52-visual {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(26px, 12px, 0) scale(.994);
  transition:
    opacity .54s cubic-bezier(.16,1,.3,1),
    transform .54s cubic-bezier(.16,1,.3,1),
    visibility .54s cubic-bezier(.16,1,.3,1),
    filter .54s cubic-bezier(.16,1,.3,1);
}
.why52-visual.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0,0,0) scale(1);
}
.why52-visual img {
  position: absolute;
  inset: 12px -170px 82px 0;
  width: calc(100% + 170px);
  height: calc(100% - 106px);
  object-fit: contain;
  object-position: center right;
  border-radius: 28px;
  border: 1px solid rgba(107,232,255,.08);
  background: rgba(4,10,20,.03);
  box-shadow: 0 34px 104px rgba(0,0,0,.20);
  z-index: 6;
}
.why52-visual figcaption {
  position: absolute;
  left: 24px;
  bottom: 18px;
  width: min(350px, 42vw);
  padding: 14px 0 0 16px;
  z-index: 10;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.why52-visual figcaption::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg, rgba(107,232,255,.38), rgba(107,232,255,0));
}
.why52-visual figcaption::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 70px;
  background: linear-gradient(180deg, rgba(107,232,255,.38), rgba(107,232,255,0));
}
.why52-visual figcaption b {
  display: block;
  margin-left: 14px;
  color: var(--text);
  font-size: clamp(24px, 2.4vw, 38px);
  letter-spacing: -.055em;
  line-height: 1;
}
.why52-visual figcaption span {
  display: block;
  margin: 6px 0 0 14px;
  max-width: 300px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.42;
}

/* Controlled network behind + around visual */
.why52-network {
  position: absolute;
  inset: 3% -12% 8% -8%;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--spx-home-mouse-x,0) * 9px), calc(var(--spx-home-mouse-y,0) * 6px), 0);
}
.why52-network .p {
  fill: none;
  stroke: rgba(107,232,255,.48);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(24,201,245,.14));
  stroke-dasharray: 280 720;
  animation: spxWhy52Network 8s ease-in-out infinite alternate;
}
.why52-network .p2,
.why52-network .p4 {
  stroke: rgba(37,99,235,.34);
  animation-delay: -2s;
}
.why52-network .p3,
.why52-network .p5 {
  animation-delay: -4s;
}
.why52-network .n {
  fill: rgba(203,249,255,.88);
  filter: drop-shadow(0 0 10px rgba(24,201,245,.36));
  animation: spxWhy52Node 4s ease-in-out infinite alternate;
}
.why52-float {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  border: 1px solid rgba(107,232,255,.09);
  background:
    linear-gradient(rgba(107,232,255,.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,232,255,.016) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  opacity: .72;
}
.why52-float.f1 {
  left: 22px;
  top: 76px;
  width: 102px;
  height: 74px;
  transform: translate3d(calc(var(--spx-home-mouse-x,0) * -7px), calc(var(--spx-home-mouse-y,0) * -4px), 0);
}
.why52-float.f2 {
  right: 68px;
  bottom: 130px;
  width: 132px;
  height: 100px;
  transform: translate3d(calc(var(--spx-home-mouse-x,0) * 5px), calc(var(--spx-home-mouse-y,0) * 4px), 0);
}
.why52-float.f3 {
  left: 42%;
  top: 18px;
  width: 84px;
  height: 56px;
  opacity: .48;
  transform: translate3d(calc(var(--spx-home-mouse-x,0) * 4px), calc(var(--spx-home-mouse-y,0) * -4px), 0);
}
@keyframes spxWhy52Network {
  from { opacity: .36; stroke-dashoffset: 0; }
  to { opacity: .78; stroke-dashoffset: -110; }
}
@keyframes spxWhy52Node {
  from { opacity: .52; transform: scale(.9); }
  to { opacity: .98; transform: scale(1.12); }
}

@media (max-width: 1180px) {
  .spx-why52-sticky {
    grid-template-columns: minmax(290px, 430px) minmax(480px, 1fr);
    gap: 28px;
  }
  .why52-visual img {
    inset: 18px -92px 88px 0;
    width: calc(100% + 92px);
  }
}
@media (max-width: 980px) {
  .spx-why-section.spx-why-v52 {
    margin-top: -220px !important;
    padding-top: 300px !important;
  }
  .spx-why52-track {
    min-height: auto;
  }
  .spx-why52-sticky {
    position: relative;
    top: auto;
    min-height: auto;
    grid-template-columns: 1fr;
  }
  .spx-why52-copy {
    gap: 16px;
  }
  .why52-step {
    min-height: 0;
    opacity: 1;
  }
  .why52-step p,
  .why52-step ul,
  .why52-step.is-active p,
  .why52-step.is-active ul {
    max-height: none;
    opacity: 1;
    margin-top: 12px;
  }
  .why52-step h3 {
    color: var(--text);
    -webkit-text-stroke: 0 transparent;
  }
  .spx-why52-stage {
    min-height: 620px;
  }
  .why52-visual {
    position: relative;
    display: none;
    min-height: 620px;
  }
  .why52-visual.is-active {
    display: block;
  }
  .why52-visual img {
    inset: 16px -18px 96px 0;
    width: calc(100% + 18px);
    height: calc(100% - 118px);
  }
}
@media (max-width: 760px) {
  .v26-product-atmosphere {
    top: 58% !important;
    width: min(880px, 108vw) !important;
    height: min(520px, 66vw) !important;
    transform:
      translate(-50%,-10%)
      perspective(1200px)
      rotateY(-6deg)
      rotateX(2deg)
      scale(1.02) !important;
  }
}


/* A8.52b — bring Why Spixor into view sooner */
.spx-why-section.spx-why-v52 {
  margin-top: clamp(-260px, -16vw, -160px) !important;
  padding-top: clamp(300px, 21vw, 420px) !important;
}
.spx-why52-head {
  margin-bottom: clamp(24px, 3.4vw, 44px) !important;
}
.spx-why52-track {
  min-height: 255vh !important;
}
@media (max-width: 980px) {
  .spx-why-section.spx-why-v52 {
    margin-top: -170px !important;
    padding-top: 240px !important;
  }
}


/* ==========================================================================
   A8.53 — Why fixed-stage steps + edge visuals
   ========================================================================== */

/*
  This pass fixes the Why Spixor section direction:
  - the text content stays pinned instead of scrolling down;
  - steps switch in one fixed card/stage;
  - right images are larger and may leave the viewport to the right;
  - visuals are not placed inside visible boxes;
  - network lines sit behind the image and extend from around the edges;
  - the Why use Spixor pill appears sooner/higher after the hero.
*/

html,
body {
  overflow-x: hidden !important;
}

/* Hero quick tune: settings panel slightly more inward, hero image still higher. */
.v26-product-atmosphere {
  top: 39.8% !important;
}
.v26-product-layer.layer-settings {
  right: 6.2% !important;
  top: 1.2% !important;
  width: 26.5% !important;
}
.v26-product-layer.layer-add {
  left: 1.2% !important;
  width: 27.5% !important;
}

/* Why section begins sooner and the pill/head sits higher in the story. */
.spx-why-section.spx-why-v52 {
  margin-top: clamp(-230px, -14vw, -145px) !important;
  padding-top: clamp(245px, 17vw, 370px) !important;
  padding-bottom: clamp(90px, 7vw, 140px) !important;
  background: transparent !important;
  overflow: visible !important;
}
.spx-why52-head {
  transform: translateY(clamp(-42px, -3.2vw, -24px)) !important;
  margin-bottom: clamp(4px, 1.6vw, 24px) !important;
}
.spx-why52-head .eyebrow {
  position: relative;
  z-index: 5;
}

/* Real pinned story track. */
.spx-why52-track {
  min-height: 305vh !important;
  margin-top: 0 !important;
}
.spx-why52-sticky {
  position: sticky !important;
  top: clamp(70px, 10vh, 108px) !important;
  min-height: min(780px, 82vh) !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 500px) minmax(620px, 1fr) !important;
  gap: clamp(30px, 4.5vw, 74px) !important;
  align-items: center !important;
}

/* Left: one fixed content card. No downward content scroll. */
.spx-why52-copy {
  position: relative !important;
  display: block !important;
  height: min(430px, 56vh) !important;
  overflow: hidden !important;
  align-self: center !important;
}
.why52-step {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 22px 24px 22px 20px !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0, 24px, 0) !important;
  border: 1px solid rgba(107,232,255,.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.010)),
    linear-gradient(90deg, rgba(24,201,245,.055), rgba(24,201,245,0) 64%) !important;
  box-shadow:
    0 22px 56px rgba(0,0,0,.13),
    inset 0 0 0 1px rgba(107,232,255,.035) !important;
  transition:
    opacity .54s cubic-bezier(.16,1,.3,1),
    transform .54s cubic-bezier(.16,1,.3,1),
    visibility .54s cubic-bezier(.16,1,.3,1) !important;
}
.why52-step.is-active,
.why52-step[data-spx-active="1"] {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate3d(0,0,0) !important;
}
.why52-step::before {
  content: "" !important;
  position: absolute !important;
  left: -1px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 2px !important;
  background: linear-gradient(180deg, rgba(24,201,245,0), rgba(24,201,245,.78), rgba(37,99,235,.72), rgba(24,201,245,0)) !important;
  box-shadow: 0 0 18px rgba(24,201,245,.22) !important;
}
.why52-step::after {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  top: 0 !important;
  width: 145px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(107,232,255,.38), rgba(107,232,255,0)) !important;
}
.why52-step span {
  margin: 0 0 12px !important;
}
.why52-step h3 {
  margin: 12px 0 0 !important;
  color: var(--text) !important;
  -webkit-text-stroke: 0 transparent !important;
}
.why52-step p,
.why52-step ul,
.why52-step.is-active p,
.why52-step.is-active ul {
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}
.why52-step p {
  margin: 14px 0 0 !important;
  max-width: 455px !important;
}
.why52-step ul {
  margin: 16px 0 0 !important;
  max-width: 430px !important;
}
.why52-progress {
  width: min(360px, 88%) !important;
  height: 5px !important;
  margin: 12px 0 0 !important;
}

/* Right: bigger edge visual. No visible container/box around image. */
.spx-why52-stage {
  position: relative !important;
  min-height: min(800px, 80vh) !important;
  overflow: visible !important;
  align-self: center !important;
  isolation: isolate !important;
}
.why52-visuals {
  position: absolute !important;
  inset: 0 !important;
  overflow: visible !important;
}
.why52-visual {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(36px, 12px, 0) scale(.994) !important;
  transition:
    opacity .58s cubic-bezier(.16,1,.3,1),
    transform .58s cubic-bezier(.16,1,.3,1),
    visibility .58s cubic-bezier(.16,1,.3,1),
    filter .58s cubic-bezier(.16,1,.3,1) !important;
}
.why52-visual.is-active,
.why52-visual[data-spx-active="1"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0,0,0) scale(1) !important;
}
.why52-visual img {
  position: absolute !important;
  inset: 0 -300px 70px -8px !important;
  width: calc(100% + 310px) !important;
  height: calc(100% - 70px) !important;
  object-fit: contain !important;
  object-position: center right !important;
  border-radius: 26px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow:
    0 42px 126px rgba(0,0,0,.24),
    0 0 90px rgba(24,201,245,.10) !important;
  z-index: 8 !important;
}

/* Caption is a light annotation, not a box. */
.why52-visual figcaption {
  position: absolute !important;
  left: 20px !important;
  bottom: 6px !important;
  width: min(340px, 42vw) !important;
  padding: 12px 0 0 16px !important;
  z-index: 10 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.why52-visual figcaption::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 110px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(107,232,255,.38), rgba(107,232,255,0)) !important;
}
.why52-visual figcaption::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 68px !important;
  background: linear-gradient(180deg, rgba(107,232,255,.38), rgba(107,232,255,0)) !important;
}

/* Lines stay underneath image: visible from edges only, never through the image surface. */
.why52-network {
  position: absolute !important;
  inset: -2% -22% 2% -14% !important;
  z-index: 5 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  transform: translate3d(calc(var(--spx-home-mouse-x,0) * 8px), calc(var(--spx-home-mouse-y,0) * 5px), 0) !important;
}
.why52-network .p {
  fill: none !important;
  stroke: rgba(107,232,255,.48) !important;
  stroke-width: 1.3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 10px rgba(24,201,245,.14)) !important;
  stroke-dasharray: 220 760 !important;
  animation: spxWhy53Network 8.5s ease-in-out infinite alternate !important;
}
.why52-network .p2,
.why52-network .p4 {
  stroke: rgba(37,99,235,.30) !important;
}
.why52-network .n {
  fill: rgba(203,249,255,.84) !important;
  filter: drop-shadow(0 0 9px rgba(24,201,245,.30)) !important;
}

/* Keep the floating blocks near edges; they do not cover the image center. */
.why52-float {
  z-index: 6 !important;
  opacity: .58 !important;
  background:
    linear-gradient(rgba(107,232,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,232,255,.014) 1px, transparent 1px) !important;
  background-size: 22px 22px, 22px 22px !important;
}
.why52-float.f1 {
  left: 4px !important;
  top: 78px !important;
}
.why52-float.f2 {
  right: 118px !important;
  bottom: 110px !important;
}
.why52-float.f3 {
  left: 47% !important;
  top: 0 !important;
  opacity: .34 !important;
}

@keyframes spxWhy53Network {
  from { opacity: .34; stroke-dashoffset: 0; }
  to { opacity: .74; stroke-dashoffset: -100; }
}

@media (max-width: 1180px) {
  .spx-why52-sticky {
    grid-template-columns: minmax(290px, 430px) minmax(500px, 1fr) !important;
  }
  .why52-visual img {
    inset: 12px -180px 78px -4px !important;
    width: calc(100% + 184px) !important;
  }
}
@media (max-width: 980px) {
  .spx-why-section.spx-why-v52 {
    margin-top: 0 !important;
    padding-top: 40px !important;
  }
  .spx-why52-track {
    min-height: auto !important;
  }
  .spx-why52-sticky {
    position: relative !important;
    top: auto !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
  }
  .spx-why52-copy {
    height: auto !important;
    display: grid !important;
    gap: 16px !important;
    overflow: visible !important;
  }
  .why52-step {
    position: relative !important;
    inset: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    height: auto !important;
  }
  .spx-why52-stage {
    min-height: 620px !important;
  }
  .why52-visual {
    position: relative !important;
    display: none !important;
    min-height: 620px !important;
  }
  .why52-visual.is-active,
  .why52-visual[data-spx-active="1"] {
    display: block !important;
  }
  .why52-visual img {
    inset: 16px -18px 96px 0 !important;
    width: calc(100% + 18px) !important;
    height: calc(100% - 118px) !important;
  }
}


/* A8.53b — lift hero copy/buttons slightly */
.spx-hero-v26 .spx-v26-copy,
.spx-hero-v26 .hero-copy,
.spx-hero-v26 .spx-hero-copy {
  transform: translateY(clamp(-34px, -2.8vw, -18px)) !important;
}
.spx-hero-v26 .spx-v26-actions,
.spx-hero-v26 .hero-actions,
.spx-hero-v26 .spx-hero-actions {
  margin-top: clamp(18px, 2vw, 30px) !important;
}
@media (max-width: 900px) {
  .spx-hero-v26 .spx-v26-copy,
  .spx-hero-v26 .hero-copy,
  .spx-hero-v26 .spx-hero-copy {
    transform: translateY(-10px) !important;
  }
}


/* ==========================================================================
   A8.54 — Why pinning and edge visual correction
   ========================================================================== */

/*
  Fixes:
  - Why content must stay pinned while scrolling through the steps.
  - Right-side images must clearly come from / beyond the right side of the viewport.
  - Images should not sit in visible boxes.
  - Network lines should support from underneath/edges and not run across the screenshot.
*/

/* Keep all right-overflow visual work hidden from horizontal page scroll. */
html,
body,
.spx-home-main {
  overflow-x: hidden !important;
}

/* Make the Why track longer so the sticky content has enough room to stay locked. */
.spx-why-section.spx-why-v52 {
  overflow: visible !important;
  padding-bottom: clamp(120px, 9vw, 180px) !important;
}

.spx-why52-track {
  position: relative !important;
  min-height: 390vh !important;
  overflow: visible !important;
}

.spx-why52-sticky {
  position: sticky !important;
  top: clamp(58px, 8vh, 96px) !important;
  min-height: calc(100vh - clamp(74px, 10vh, 116px)) !important;
  height: calc(100vh - clamp(74px, 10vh, 116px)) !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 500px) minmax(700px, 1fr) !important;
  gap: clamp(28px, 4.5vw, 72px) !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Left copy is a fixed stage. Steps swap in-place and never travel upward out of sight. */
.spx-why52-copy {
  position: relative !important;
  align-self: center !important;
  height: min(455px, calc(100vh - 190px)) !important;
  min-height: 390px !important;
  overflow: hidden !important;
  display: block !important;
}

.why52-step {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0, 18px, 0) !important;
  transition:
    opacity .54s cubic-bezier(.16,1,.3,1),
    transform .54s cubic-bezier(.16,1,.3,1),
    visibility .54s cubic-bezier(.16,1,.3,1) !important;
}

.why52-step.is-active,
.why52-step[data-spx-active="1"] {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
}

.why52-step p,
.why52-step ul,
.why52-step.is-active p,
.why52-step.is-active ul {
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.why52-step p {
  margin: 14px 0 0 !important;
}

.why52-step ul {
  margin: 16px 0 0 !important;
}

.why52-progress {
  width: min(380px, 90%) !important;
}

/* Right stage is anchored to the viewport edge. */
.spx-why52-stage {
  position: relative !important;
  justify-self: end !important;
  align-self: center !important;
  width: min(1320px, 76vw) !important;
  min-height: min(820px, calc(100vh - 96px)) !important;
  height: min(820px, calc(100vh - 96px)) !important;
  margin-right: calc(-1 * var(--side) - 240px) !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.why52-visuals {
  position: absolute !important;
  inset: 0 !important;
  overflow: visible !important;
}

/* Only the active visual is visible. */
.why52-visual {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(56px, 10px, 0) scale(.992) !important;
  transition:
    opacity .56s cubic-bezier(.16,1,.3,1),
    transform .56s cubic-bezier(.16,1,.3,1),
    visibility .56s cubic-bezier(.16,1,.3,1),
    filter .56s cubic-bezier(.16,1,.3,1) !important;
}

.why52-visual.is-active,
.why52-visual[data-spx-active="1"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0,0,0) scale(1) !important;
}

/* Bigger images, intentionally pushed off the right edge. No visible box. */
.why52-visual img {
  position: absolute !important;
  inset: 0 -430px 62px -10px !important;
  width: calc(100% + 440px) !important;
  height: calc(100% - 62px) !important;
  object-fit: contain !important;
  object-position: center right !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 28px !important;
  background: transparent !important;
  box-shadow:
    0 42px 126px rgba(0,0,0,.22),
    0 0 90px rgba(24,201,245,.08) !important;
  z-index: 8 !important;
}

/* Network below and around the visual, never across the image surface. */
.why52-network {
  position: absolute !important;
  inset: 2% -28% 4% -18% !important;
  z-index: 5 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  opacity: .88 !important;
  transform: translate3d(
    calc(var(--spx-home-mouse-x,0) * 7px),
    calc(var(--spx-home-mouse-y,0) * 5px),
    0
  ) !important;
}

.why52-network .p {
  fill: none !important;
  stroke: rgba(107,232,255,.42) !important;
  stroke-width: 1.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 9px rgba(24,201,245,.10)) !important;
  stroke-dasharray: 190 850 !important;
  animation: spxWhy54Network 9s ease-in-out infinite alternate !important;
}

/* Hide paths that cross the central image too much; keep edge lines. */
.why52-network .p1,
.why52-network .p2,
.why52-network .p4 {
  opacity: .78 !important;
}

.why52-network .p3,
.why52-network .p5 {
  opacity: .34 !important;
}

.why52-network .n {
  fill: rgba(203,249,255,.78) !important;
  filter: drop-shadow(0 0 8px rgba(24,201,245,.24)) !important;
}

/* Floating edge blocks only; no central obstruction. */
.why52-float {
  z-index: 6 !important;
  opacity: .46 !important;
  border-color: rgba(107,232,255,.075) !important;
  background:
    linear-gradient(rgba(107,232,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,232,255,.010) 1px, transparent 1px) !important;
  background-size: 22px 22px, 22px 22px !important;
}

.why52-float.f1 {
  left: -24px !important;
  top: 86px !important;
}

.why52-float.f2 {
  right: 260px !important;
  bottom: 96px !important;
}

.why52-float.f3 {
  left: 52% !important;
  top: -8px !important;
  opacity: .24 !important;
}

/* Caption stays outside the image feeling, as a light annotation. */
.why52-visual figcaption {
  left: -4px !important;
  bottom: 0 !important;
  width: min(340px, 40vw) !important;
  z-index: 10 !important;
}

@keyframes spxWhy54Network {
  from { opacity: .28; stroke-dashoffset: 0; }
  to { opacity: .68; stroke-dashoffset: -95; }
}

/* Make section progression slower and more stable on desktop. */
@media (min-width: 981px) {
  .spx-why52-track {
    min-height: 410vh !important;
  }
}

/* Responsive fallback: no huge right overflow on tablet/mobile. */
@media (max-width: 1180px) {
  .spx-why52-sticky {
    grid-template-columns: minmax(290px, 430px) minmax(520px, 1fr) !important;
  }

  .spx-why52-stage {
    width: min(980px, 70vw) !important;
    margin-right: -130px !important;
  }

  .why52-visual img {
    inset: 12px -230px 78px -4px !important;
    width: calc(100% + 234px) !important;
  }
}

@media (max-width: 980px) {
  .spx-why52-track {
    min-height: auto !important;
  }

  .spx-why52-sticky {
    position: relative !important;
    top: auto !important;
    min-height: auto !important;
    height: auto !important;
    grid-template-columns: 1fr !important;
  }

  .spx-why52-copy {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  .why52-step {
    position: relative !important;
    inset: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    height: auto !important;
  }

  .spx-why52-stage {
    width: 100% !important;
    height: auto !important;
    min-height: 620px !important;
    margin-right: 0 !important;
  }

  .why52-visual {
    position: relative !important;
    display: none !important;
    min-height: 620px !important;
  }

  .why52-visual.is-active,
  .why52-visual[data-spx-active="1"] {
    display: block !important;
  }

  .why52-visual img {
    inset: 16px -18px 96px 0 !important;
    width: calc(100% + 18px) !important;
    height: calc(100% - 118px) !important;
  }
}


/* ==========================================================================
   A8.55 — reusable section entry + exit scroll animations
   ========================================================================== */

/*
  Generic section animation system:
  - Hero, Why Spixor and future homepage sections receive the same CSS variable API.
  - JS updates:
      --spx-section-entry : 0 → 1 while entering
      --spx-section-exit  : 0 → 1 while leaving
      --spx-section-progress : 0 → 1 through the section
  - The animations are subtle by default and specific sections can override targets.
*/

.spx-section-anim {
  --spx-section-entry: 0;
  --spx-section-exit: 0;
  --spx-section-progress: 0;
  --spx-section-enter-y: calc((1 - var(--spx-section-entry)) * 42px);
  --spx-section-exit-y: calc(var(--spx-section-exit) * -42px);
  --spx-section-opacity: max(.18, calc(var(--spx-section-entry) - (var(--spx-section-exit) * .54)));
  position: relative;
}

/* Hero entry/exit */
.spx-hero-v26.spx-section-anim .spx-v26-copy {
  opacity: var(--spx-section-opacity) !important;
  transform:
    translateY(
      calc(
        clamp(-34px, -2.8vw, -18px)
        + var(--spx-section-enter-y)
        + var(--spx-section-exit-y)
      )
    ) !important;
  transition: opacity .18s linear, transform .18s linear !important;
  will-change: opacity, transform;
}

.spx-hero-v26.spx-section-anim .spx-v26-kicker,
.spx-hero-v26.spx-section-anim h1,
.spx-hero-v26.spx-section-anim .spx-v26-lead,
.spx-hero-v26.spx-section-anim .spx-v26-support,
.spx-hero-v26.spx-section-anim .spx-v26-actions,
.spx-hero-v26.spx-section-anim .spx-v26-note {
  transform: translateY(calc((1 - var(--spx-section-entry)) * 14px)) !important;
  transition: transform .18s linear, opacity .18s linear !important;
}

.spx-hero-v26.spx-section-anim .spx-v26-kicker { transition-delay: 0ms; }
.spx-hero-v26.spx-section-anim h1 { transition-delay: 25ms; }
.spx-hero-v26.spx-section-anim .spx-v26-lead { transition-delay: 50ms; }
.spx-hero-v26.spx-section-anim .spx-v26-support { transition-delay: 75ms; }
.spx-hero-v26.spx-section-anim .spx-v26-actions { transition-delay: 100ms; }
.spx-hero-v26.spx-section-anim .spx-v26-note { transition-delay: 125ms; }

/* Hero product exits into the Why story instead of abruptly stopping. */
.spx-hero-v26.spx-section-anim .v26-product-atmosphere {
  opacity: calc((1 - (var(--spx-section-exit) * .24)) * (1 - (var(--spx-hero-progress, 0) * .18))) !important;
  filter:
    drop-shadow(0 62px 150px rgba(0,0,0,.42))
    drop-shadow(0 0 92px rgba(24,201,245,.18))
    saturate(calc(1.16 - (var(--spx-section-exit) * .05)))
    contrast(1.08)
    brightness(calc(1.08 - (var(--spx-section-exit) * .05))) !important;
}

/* Why entry/exit */
.spx-why-v52.spx-section-anim .spx-why52-head {
  opacity: var(--spx-section-opacity) !important;
  transform:
    translateY(
      calc(
        clamp(-42px, -3.2vw, -24px)
        + (1 - var(--spx-section-entry)) * 34px
        + var(--spx-section-exit) * -36px
      )
    ) !important;
  transition: opacity .18s linear, transform .18s linear !important;
  will-change: opacity, transform;
}

.spx-why-v52.spx-section-anim .spx-why52-sticky {
  opacity: max(.08, calc(var(--spx-section-entry) - (var(--spx-section-exit) * .70))) !important;
  transform:
    translateY(
      calc(
        (1 - var(--spx-section-entry)) * 38px
        + var(--spx-section-exit) * -42px
      )
    ) !important;
  transition: opacity .18s linear, transform .18s linear !important;
  will-change: opacity, transform;
}

/* Why visuals get an additional depth shift on section exit. */
.spx-why-v52.spx-section-anim .spx-why52-stage {
  transform:
    translate3d(
      calc(var(--spx-section-exit) * 34px),
      calc((1 - var(--spx-section-entry)) * 18px + var(--spx-section-exit) * -20px),
      0
    ) !important;
  transition: transform .18s linear, opacity .18s linear !important;
  will-change: transform;
}

/* Future homepage sections: automatic default entry/exit for common section children. */
#main > section.spx-section-anim:not(.spx-hero-v26):not(.spx-why-v52) > *,
.spx-home-main > section.spx-section-anim:not(.spx-hero-v26):not(.spx-why-v52) > * {
  opacity: var(--spx-section-opacity) !important;
  transform:
    translateY(
      calc(
        (1 - var(--spx-section-entry)) * 34px
        + var(--spx-section-exit) * -34px
      )
    ) !important;
  transition: opacity .18s linear, transform .18s linear !important;
  will-change: opacity, transform;
}

/* Optional stagger hooks for future sections. */
.spx-section-anim [data-spx-animate="rise"] {
  opacity: var(--spx-section-opacity) !important;
  transform:
    translateY(
      calc(
        (1 - var(--spx-section-entry)) * 28px
        + var(--spx-section-exit) * -28px
      )
    ) !important;
}

.spx-section-anim [data-spx-animate="fade"] {
  opacity: var(--spx-section-opacity) !important;
}

.spx-section-anim [data-spx-animate="slide-right"] {
  opacity: var(--spx-section-opacity) !important;
  transform:
    translateX(
      calc(
        (1 - var(--spx-section-entry)) * -34px
        + var(--spx-section-exit) * 34px
      )
    ) !important;
}

.spx-section-anim [data-spx-animate="slide-left"] {
  opacity: var(--spx-section-opacity) !important;
  transform:
    translateX(
      calc(
        (1 - var(--spx-section-entry)) * 34px
        + var(--spx-section-exit) * -34px
      )
    ) !important;
}

/* Reduced motion: keep all sections visible and stable. */
@media (prefers-reduced-motion: reduce) {
  .spx-section-anim,
  .spx-section-anim *,
  .spx-hero-v26.spx-section-anim .spx-v26-copy,
  .spx-why-v52.spx-section-anim .spx-why52-head,
  .spx-why-v52.spx-section-anim .spx-why52-sticky,
  .spx-why-v52.spx-section-anim .spx-why52-stage {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ========================================================================== 
   A8.56 — single smooth choreography pass: hero bridge, pinned Why, footer note
   ========================================================================== */
html {
  scroll-behavior: smooth;
  overflow-x: hidden !important;
}
body {
  overflow-x: hidden !important;
}

/* Navigator brand collapse: Spixor text visually folds back into the logo when the navigator compacts. */
.spx-nav-v26 .brand {
  overflow: hidden;
  transition:
    gap .48s cubic-bezier(.16,1,.3,1),
    padding .48s cubic-bezier(.16,1,.3,1),
    transform .48s cubic-bezier(.16,1,.3,1),
    background .32s var(--ease) !important;
}
.spx-nav-v26 .brand img {
  position: relative;
  z-index: 2;
  transform-origin: center;
  transition:
    transform .52s cubic-bezier(.16,1,.3,1),
    box-shadow .52s cubic-bezier(.16,1,.3,1),
    border-radius .52s cubic-bezier(.16,1,.3,1) !important;
}
.spx-nav-v26 .brand span {
  display: inline-block;
  max-width: 92px;
  transform-origin: 0 50%;
  opacity: 1;
  filter: blur(0);
  clip-path: inset(-20% 0 -20% 0 round 8px);
  transition:
    max-width .52s cubic-bezier(.16,1,.3,1),
    opacity .34s ease,
    transform .52s cubic-bezier(.16,1,.3,1),
    filter .52s cubic-bezier(.16,1,.3,1),
    margin .52s cubic-bezier(.16,1,.3,1) !important;
}
.site-header.spx-nav-v26.is-scrolled .brand,
.site-header.spx-nav-v26.is-open .brand {
  gap: 0 !important;
  padding-right: 0 !important;
}
.site-header.spx-nav-v26.is-scrolled .brand img,
.site-header.spx-nav-v26.is-open .brand img {
  transform: scale(1.055) rotate(-2deg) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 1px rgba(107,232,255,.26), 0 0 32px rgba(24,201,245,.22), 0 12px 30px rgba(0,0,0,.18) !important;
}
.site-header.spx-nav-v26.is-scrolled .brand span,
.site-header.spx-nav-v26.is-open .brand span {
  max-width: 0 !important;
  margin-left: -8px !important;
  opacity: 0 !important;
  filter: blur(5px) saturate(1.35) !important;
  transform: translate3d(-28px,0,0) scaleX(.08) scale(.88) !important;
}

/* Hero becomes a scroll-driven scene instead of static copy + image. */
.spx-hero-v26 {
  min-height: clamp(980px, 118svh, 1320px) !important;
  overflow: visible !important;
  z-index: 2;
  --spx-hero-copy-y: calc((1 - var(--spx-hero-load, 0)) * 34px - (var(--spx-hero-progress-smooth, 0) * 86px));
  --spx-hero-copy-x: calc(var(--spx-hero-progress-smooth, 0) * -20px);
  --spx-hero-copy-scale: calc(1 - (var(--spx-hero-progress-smooth, 0) * .035));
  --spx-hero-copy-opacity: clamp(.04, calc(var(--spx-hero-load, 0) - (var(--spx-hero-progress-smooth, 0) * .92)), 1);
}
.spx-hero-v26 .spx-v26-shell {
  position: relative;
  z-index: 5;
}
.spx-hero-v26.spx-section-anim .spx-v26-copy {
  opacity: var(--spx-hero-copy-opacity) !important;
  transform:
    translate3d(var(--spx-hero-copy-x), var(--spx-hero-copy-y), 0)
    scale(var(--spx-hero-copy-scale)) !important;
  transform-origin: left center;
  transition: none !important;
  will-change: opacity, transform;
}
.spx-hero-v26 .spx-v26-kicker,
.spx-hero-v26 .spx-v26-copy h1,
.spx-hero-v26 .spx-v26-lead,
.spx-hero-v26 .spx-v26-support,
.spx-hero-v26 .spx-v26-actions,
.spx-hero-v26 .spx-v26-note {
  transition: none !important;
  will-change: opacity, transform, filter;
}
.spx-hero-v26 .spx-v26-kicker {
  opacity: clamp(.12, calc(var(--spx-hero-load,0) - var(--spx-hero-progress-smooth,0) * 1.10), 1) !important;
  transform: translate3d(0, calc((1 - var(--spx-hero-load,0)) * 18px - var(--spx-hero-progress-smooth,0) * 18px), 0) !important;
}
.spx-hero-v26 .spx-v26-copy h1 {
  opacity: clamp(.08, calc(var(--spx-hero-load,0) - var(--spx-hero-progress-smooth,0) * .74), 1) !important;
  transform: translate3d(0, calc((1 - var(--spx-hero-load,0)) * 22px - var(--spx-hero-progress-smooth,0) * 34px), 0) !important;
  filter: blur(calc((1 - var(--spx-hero-load,0)) * 7px + var(--spx-hero-progress-smooth,0) * 1.5px));
}
.spx-hero-v26 .spx-v26-lead {
  opacity: clamp(.06, calc(var(--spx-hero-load,0) - var(--spx-hero-progress-smooth,0) * .90), 1) !important;
  transform: translate3d(0, calc((1 - var(--spx-hero-load,0)) * 28px - var(--spx-hero-progress-smooth,0) * 46px), 0) !important;
}
.spx-hero-v26 .spx-v26-support {
  opacity: clamp(.04, calc(var(--spx-hero-load,0) - var(--spx-hero-progress-smooth,0) * 1.05), 1) !important;
  transform: translate3d(0, calc((1 - var(--spx-hero-load,0)) * 34px - var(--spx-hero-progress-smooth,0) * 58px), 0) !important;
}
.spx-hero-v26 .spx-v26-actions,
.spx-hero-v26 .spx-v26-note {
  opacity: clamp(0, calc(var(--spx-hero-load,0) - var(--spx-hero-progress-smooth,0) * 1.20), 1) !important;
  transform: translate3d(0, calc((1 - var(--spx-hero-load,0)) * 38px - var(--spx-hero-progress-smooth,0) * 72px), 0) !important;
}

/* Product screenshot expands into a large background before the Why story takes over. */
.v26-product-atmosphere {
  top: calc(39.8% + (var(--spx-hero-bridge-smooth,0) * 12%)) !important;
  left: calc(50% - (var(--spx-hero-bridge-smooth,0) * 13%)) !important;
  width: min(calc(1360px + (var(--spx-hero-bridge-smooth,0) * 620px)), 122vw) !important;
  height: min(calc(820px + (var(--spx-hero-bridge-smooth,0) * 360px)), 92vw) !important;
  z-index: 1 !important;
  opacity: calc((.98 - (var(--spx-hero-progress-smooth,0) * .14)) * (1 - (var(--spx-hero-bridge-smooth,0) * .38))) !important;
  filter:
    drop-shadow(0 68px 160px rgba(0,0,0,.42))
    drop-shadow(0 0 110px rgba(24,201,245,.18))
    saturate(calc(1.18 - (var(--spx-hero-bridge-smooth,0) * .10)))
    contrast(calc(1.08 - (var(--spx-hero-bridge-smooth,0) * .04)))
    brightness(calc(1.08 - (var(--spx-hero-bridge-smooth,0) * .06))) !important;
  transform:
    translate(calc(-8% - (var(--spx-hero-progress-smooth, 0) * 6%) - (var(--spx-hero-bridge-smooth,0) * 12%)), calc(-20% + (var(--spx-hero-progress-smooth, 0) * 7%) + (var(--spx-hero-bridge-smooth,0) * 3%)))
    perspective(1700px)
    rotateY(calc(-11deg + (var(--spx-hero-progress-smooth, 0) * 3deg) + (var(--spx-hero-bridge-smooth,0) * 8deg)))
    rotateX(calc(4deg - (var(--spx-hero-progress-smooth, 0) * 1.4deg) - (var(--spx-hero-bridge-smooth,0) * 1deg)))
    rotateZ(calc(-1.15deg + (var(--spx-hero-progress-smooth, 0) * .45deg)))
    scale(calc(1.09 + (var(--spx-hero-bridge-smooth,0) * .36) - (var(--spx-hero-progress-smooth, 0) * .08))) !important;
  transition: none !important;
  will-change: transform, opacity, filter, width, height;
}
.v26-product-atmosphere::after {
  opacity: calc(.08 + (var(--spx-hero-bridge-smooth,0) * .22)) !important;
}

/* Why hero echo: the hero UI appears as a full-page background beneath the Why story and dissolves while scrolling. */
.spx-why-section.spx-why-v52 {
  --why52-echo-opacity: clamp(0, calc(1 - (var(--why52-progress, 0) * 1.22)), .92);
  --why52-echo-scale: calc(1.05 + (var(--why52-progress, 0) * .08));
  --why52-stage-entry-y: calc((1 - var(--spx-section-entry-smooth, 0)) * 34px);
  --why52-stage-exit-y: calc(var(--spx-section-exit-smooth, 0) * -42px);
  z-index: 4 !important;
}
.spx-why52-hero-echo {
  position: sticky;
  top: 0;
  height: 100svh;
  margin: 0 0 -100svh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--why52-echo-opacity);
  transform: translate3d(0, calc(var(--why52-progress,0) * -28px), 0) scale(var(--why52-echo-scale));
  transform-origin: center;
  filter: saturate(calc(1.04 - var(--why52-progress,0) * .20)) brightness(calc(.92 - var(--why52-progress,0) * .12));
  transition: none;
  will-change: opacity, transform, filter;
}
.spx-why52-hero-echo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    radial-gradient(760px 420px at 62% 30%, rgba(24,201,245,.12), transparent 70%),
    linear-gradient(90deg, rgba(2,5,13,.90) 0%, rgba(2,5,13,.60) 34%, rgba(2,5,13,.30) 62%, rgba(2,5,13,.70) 100%),
    linear-gradient(180deg, rgba(2,5,13,.25), rgba(2,5,13,.60) 82%, rgba(2,5,13,.95));
}
html[data-theme="light"] .spx-why52-hero-echo::before {
  background:
    radial-gradient(760px 420px at 62% 30%, rgba(14,165,233,.10), transparent 70%),
    linear-gradient(90deg, rgba(246,248,252,.86) 0%, rgba(246,248,252,.58) 34%, rgba(246,248,252,.28) 62%, rgba(246,248,252,.70) 100%),
    linear-gradient(180deg, rgba(246,248,252,.22), rgba(246,248,252,.58) 82%, rgba(246,248,252,.94));
}
.spx-why52-hero-echo img {
  position: absolute;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}
.why52-echo-base {
  right: -22vw;
  top: 8vh;
  width: min(1320px, 104vw);
  height: 78vh;
  opacity: .84;
  filter: drop-shadow(0 62px 150px rgba(0,0,0,.30));
}
.why52-echo-layer {
  opacity: .72;
  filter: drop-shadow(0 30px 74px rgba(0,0,0,.28));
}
.why52-echo-add {
  right: 54vw;
  top: 18vh;
  width: min(410px, 31vw);
  height: 48vh;
  transform: rotateY(-8deg) rotateZ(-1.2deg);
}
.why52-echo-settings {
  right: -3vw;
  top: 15vh;
  width: min(430px, 32vw);
  height: 54vh;
  transform: rotateY(-8deg) rotateZ(1deg);
}
.spx-why-v52 .spx-why52-shell {
  position: relative;
  z-index: 4 !important;
}

/* Keep the actual sticky wrapper fixed; animate its inner content instead. */
.spx-why-v52.spx-section-anim .spx-why52-sticky,
.spx-why52-sticky {
  position: sticky !important;
  top: clamp(68px, 9vh, 104px) !important;
  transform: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}
.spx-why-v52.spx-section-anim .spx-why52-copy,
.spx-why-v52.spx-section-anim .spx-why52-stage {
  opacity: clamp(.04, calc(var(--spx-section-entry-smooth, 0) - (var(--spx-section-exit-smooth, 0) * .78)), 1) !important;
  transform: translate3d(0, calc(var(--why52-stage-entry-y) + var(--why52-stage-exit-y)), 0) !important;
  transition: none !important;
  will-change: opacity, transform;
}
.spx-why-v52.spx-section-anim .spx-why52-stage {
  transform: translate3d(calc(var(--spx-section-exit-smooth, 0) * 30px), calc(var(--why52-stage-entry-y) + var(--why52-stage-exit-y)), 0) !important;
}
.spx-why52-track {
  min-height: 430vh !important;
}
.spx-why52-copy {
  height: min(440px, 58vh) !important;
}
.why52-step,
.why52-visual {
  transition: none !important;
  will-change: opacity, transform, filter;
}
.why52-visual img {
  border: 0 !important;
  background: transparent !important;
  box-shadow:
    0 44px 130px rgba(0,0,0,.22),
    0 0 95px rgba(24,201,245,.075) !important;
}
.why52-network {
  opacity: calc(.30 + (var(--why52-progress, 0) * .40)) !important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 7px + var(--spx-section-exit-smooth,0) * 18px),
      calc(var(--spx-home-mouse-y,0) * 5px + var(--spx-section-exit-smooth,0) * -12px),
      0
    ) !important;
}

/* Nested section animation system for future content: direct children + marked nested elements. */
.spx-section-anim:not(.spx-hero-v26):not(.spx-why-v52) {
  --spx-nested-y: calc((1 - var(--spx-section-entry-smooth,0)) * 38px + var(--spx-section-exit-smooth,0) * -34px);
  --spx-nested-opacity: clamp(.06, calc(var(--spx-section-entry-smooth,0) - var(--spx-section-exit-smooth,0) * .74), 1);
}
.spx-section-anim:not(.spx-hero-v26):not(.spx-why-v52) > *,
.spx-section-anim [data-spx-animate] {
  opacity: var(--spx-nested-opacity, var(--spx-section-entry-smooth, 1)) !important;
  transform: translate3d(0, var(--spx-nested-y, 0), 0) !important;
  transition: none !important;
  will-change: opacity, transform;
}
.spx-section-anim:not(.spx-hero-v26):not(.spx-why-v52) > *:nth-child(2) { --spx-nested-y: calc((1 - var(--spx-section-entry-smooth,0)) * 48px + var(--spx-section-exit-smooth,0) * -38px); }
.spx-section-anim:not(.spx-hero-v26):not(.spx-why-v52) > *:nth-child(3) { --spx-nested-y: calc((1 - var(--spx-section-entry-smooth,0)) * 58px + var(--spx-section-exit-smooth,0) * -42px); }
.spx-section-anim [data-spx-animate="fade"] {
  transform: none !important;
}
.spx-section-anim [data-spx-animate="slide-right"] {
  transform: translate3d(calc((1 - var(--spx-section-entry-smooth,0)) * -42px + var(--spx-section-exit-smooth,0) * 32px), 0, 0) !important;
}
.spx-section-anim [data-spx-animate="slide-left"] {
  transform: translate3d(calc((1 - var(--spx-section-entry-smooth,0)) * 42px + var(--spx-section-exit-smooth,0) * -32px), 0, 0) !important;
}

/* Footer product credit. */
.site-footer {
  align-items: start !important;
}
.footer-main-copy {
  display: grid;
  gap: 8px;
  max-width: 560px;
}
.footer-main-copy p {
  margin: 0;
}
.footer-built-with {
  margin-top: 8px !important;
  color: var(--text) !important;
  font-weight: 900;
  letter-spacing: -.015em;
}
.footer-release-note {
  display: block;
  max-width: 480px;
  color: var(--secondary);
  opacity: .70;
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .spx-hero-v26 {
    min-height: auto !important;
  }
  .spx-why52-hero-echo {
    display: none !important;
  }
  .spx-why52-sticky {
    position: relative !important;
    top: auto !important;
  }
  .spx-why-v52.spx-section-anim .spx-why52-copy,
  .spx-why-v52.spx-section-anim .spx-why52-stage {
    opacity: 1 !important;
    transform: none !important;
  }
  .spx-why52-track {
    min-height: auto !important;
  }
  .spx-why52-copy {
    height: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spx-nav-v26 .brand,
  .spx-nav-v26 .brand img,
  .spx-nav-v26 .brand span,
  .spx-hero-v26 .spx-v26-copy,
  .spx-hero-v26 .spx-v26-copy *,
  .spx-why52-hero-echo,
  .spx-section-anim,
  .spx-section-anim * {
    transition: none !important;
    animation: none !important;
  }
  .spx-hero-v26.spx-section-anim .spx-v26-copy,
  .spx-hero-v26 .spx-v26-copy *,
  .spx-why-v52.spx-section-anim .spx-why52-copy,
  .spx-why-v52.spx-section-anim .spx-why52-stage,
  .spx-section-anim:not(.spx-hero-v26):not(.spx-why-v52) > *,
  .spx-section-anim [data-spx-animate] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ========================================================================== 
   A8.57 — hard-pinned Why story + calmer hero background bridge
   ========================================================================== */

/* Brand: keep the full word visible before it collapses into the logo. */
.spx-nav-v26 .brand {
  gap: 10px !important;
  min-width: 0 !important;
}
.spx-nav-v26 .brand span {
  max-width: 132px !important;
  min-width: max-content !important;
  overflow: visible !important;
  white-space: nowrap !important;
  letter-spacing: -.026em !important;
  line-height: 1 !important;
  padding-right: 1px !important;
}
.site-header.spx-nav-v26.is-scrolled .brand span,
.site-header.spx-nav-v26.is-open .brand span {
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  padding-right: 0 !important;
}

/* Hero typography: still bold, but less crushed. */
.spx-hero-v26 .spx-v26-copy h1 {
  letter-spacing: clamp(-.082em, -0.72vw, -.052em) !important;
  line-height: .88 !important;
  max-width: 1040px !important;
}
.spx-hero-v26 .spx-v26-lead,
.spx-hero-v26 .spx-v26-support {
  letter-spacing: -.012em !important;
}

/* The hero image now expands more calmly and becomes a real background layer. */
.v26-product-atmosphere {
  top: calc(44% + (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * 7%)) !important;
  left: calc(52% - (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * 5%)) !important;
  width: min(1320px, 92vw) !important;
  height: min(790px, 58vw) !important;
  opacity: calc(.90 - (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * .20)) !important;
  transform:
    translate(
      calc(-16% - (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * 26%)),
      calc(-20% + (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * 6%))
    )
    perspective(1800px)
    rotateY(calc(-8deg + (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * 7deg)))
    rotateX(calc(3deg - (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * 2.2deg)))
    rotateZ(calc(-.8deg + (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * .55deg)))
    scale(calc(1.04 + (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * .44))) !important;
}
.v26-builder-base {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  padding: 0 !important;
  border-radius: clamp(18px, 2.2vw, 30px) !important;
  opacity: calc(.98 - (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * .08)) !important;
}
.v26-product-atmosphere::after {
  opacity: calc(.10 + (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * .30)) !important;
}
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add {
  animation: none !important;
  opacity: calc((1 - var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0))) * .70) !important;
  filter: blur(calc(var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * 10px)) saturate(.98) !important;
  transform: translate3d(0, calc(var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * -22px), 0) scale(calc(1 - (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * .035))) !important;
  transition: none !important;
}

/* Why uses only the base hero image as the background echo; no add/settings panels during the background phase. */
.why52-echo-layer,
.why52-echo-add,
.why52-echo-settings {
  display: none !important;
  opacity: 0 !important;
}
.spx-why52-hero-echo {
  height: 100svh !important;
  opacity: var(--why52-echo-opacity) !important;
  transform: translate3d(0, calc(var(--why52-progress,0) * -18px), 0) scale(calc(1.015 + (var(--why52-progress,0) * .055))) !important;
}
.why52-echo-base {
  top: 0 !important;
  right: 50% !important;
  width: 100vw !important;
  height: 100svh !important;
  transform: translateX(50%) !important;
  object-fit: cover !important;
  object-position: center top !important;
  opacity: .58 !important;
}

/* Hard pin architecture: the track owns the scroll distance, the sticky frame owns the viewport. */
.spx-why-section.spx-why-v52 {
  overflow: clip !important;
  padding-bottom: clamp(72px, 7vw, 128px) !important;
  --why52-echo-opacity: clamp(0, calc(1 - (var(--why52-progress, 0) * 1.55)), .70) !important;
}
.spx-why52-shell {
  max-width: none !important;
}
.spx-why52-head {
  max-width: var(--container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--side) !important;
  padding-right: var(--side) !important;
}
.spx-why52-track {
  position: relative !important;
  min-height: 330svh !important;
  height: 330svh !important;
  overflow: visible !important;
  contain: layout paint !important;
}
.spx-why52-sticky {
  top: 0 !important;
  min-height: 100svh !important;
  height: 100svh !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: clamp(88px, 10vh, 122px) var(--side) clamp(54px, 7vh, 84px) !important;
  align-items: center !important;
  transform: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  z-index: 8 !important;
}
.spx-why52-sticky.is-spx-hard-pinned {
  position: fixed !important;
  top: 0 !important;
  left: var(--spx-why-pin-left, 0px) !important;
  width: var(--spx-why-pin-width, 100vw) !important;
  height: 100svh !important;
  min-height: 100svh !important;
}
.spx-why52-sticky.is-spx-pin-after {
  position: absolute !important;
  top: calc(100% - 100svh) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100svh !important;
  min-height: 100svh !important;
}
.spx-why-v52.spx-section-anim .spx-why52-sticky,
.spx-why-v52.spx-section-anim .spx-why52-copy,
.spx-why-v52.spx-section-anim .spx-why52-stage {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.spx-why52-copy {
  height: min(480px, 56svh) !important;
  min-height: min(430px, 50svh) !important;
  overflow: hidden !important;
}
.why52-step {
  justify-content: center !important;
  overflow: visible !important;
  padding-right: clamp(8px, 2vw, 24px) !important;
}
.why52-step p,
.why52-step ul {
  max-width: 465px !important;
}
.spx-why52-stage {
  height: min(800px, 82svh) !important;
  min-height: min(740px, 76svh) !important;
  width: min(1360px, 74vw) !important;
  margin-right: calc(-1 * var(--side) - 260px) !important;
}
.why52-visual img {
  inset: 0 -460px 64px -4px !important;
  width: calc(100% + 470px) !important;
  height: calc(100% - 64px) !important;
  object-fit: contain !important;
  object-position: center right !important;
}
.why52-network {
  z-index: 3 !important;
  opacity: calc(.20 + (var(--why52-progress, 0) * .38)) !important;
}
.why52-visuals,
.why52-visual {
  z-index: 8 !important;
}

@media (max-width: 980px) {
  .spx-why-section.spx-why-v52 {
    overflow: hidden !important;
  }
  .spx-why52-track {
    height: auto !important;
    min-height: auto !important;
    contain: none !important;
  }
  .spx-why52-sticky,
  .spx-why52-sticky.is-spx-hard-pinned,
  .spx-why52-sticky.is-spx-pin-after {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 24px var(--side) 0 !important;
  }
  .v26-product-layer.layer-settings,
  .v26-product-layer.layer-add {
    display: none !important;
  }
  .v26-builder-base {
    object-fit: contain !important;
  }
}

/* A8.57 safety override: do not create a paint/transform containing context around the hard-pinned story. */
.spx-why-section.spx-why-v52 {
  overflow: visible !important;
  overflow-x: clip !important;
}
.spx-why52-track {
  contain: none !important;
}


/* ========================================================================== 
   A8.58T — native hero-to-background handoff reset
   Built from A8.57. This pass intentionally does NOT rebuild Why yet.
   Goals:
   - keep the A8.54-style hero composition before scroll;
   - use the actual hero builder visual as the source of the background transition;
   - avoid top clipping / downward dragging / pop-in clones;
   - make the handoff full viewport width before Why content is placed above it;
   - keep Add and Settings aligned with the same product perspective and fade them away.
   ========================================================================== */

html,
body,
.spx-home-main {
  overflow-x: clip !important;
}

/* Navigator: never clip the S/wordmark; animate with transform/opacity rather than hard max-width clipping. */
.site-header.spx-nav-v26,
.spx-nav-v26 {
  overflow: visible !important;
}
.spx-nav-v26 .brand {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-width: 172px !important;
  overflow: visible !important;
  transform-origin: left center !important;
}
.spx-nav-v26 .brand img {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 999px !important;
  transform-origin: center !important;
  transition: transform .72s cubic-bezier(.16,1,.3,1), width .72s cubic-bezier(.16,1,.3,1), height .72s cubic-bezier(.16,1,.3,1), box-shadow .72s cubic-bezier(.16,1,.3,1) !important;
}
.spx-nav-v26 .brand span {
  display: inline-block !important;
  flex: 0 0 auto !important;
  min-width: 104px !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  padding: 0 8px 1px 2px !important;
  font-size: 20px !important;
  letter-spacing: -.036em !important;
  transform-origin: left center !important;
  transition: opacity .58s cubic-bezier(.16,1,.3,1), transform .72s cubic-bezier(.16,1,.3,1), filter .72s cubic-bezier(.16,1,.3,1) !important;
}
.site-header.spx-nav-v26.is-scrolled .brand img,
.site-header.spx-nav-v26.is-open .brand img {
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 0 1px rgba(107,232,255,.22), 0 18px 50px rgba(24,201,245,.20) !important;
}
.site-header.spx-nav-v26.is-scrolled .brand span,
.site-header.spx-nav-v26.is-open .brand span {
  opacity: 0 !important;
  transform: translate3d(-22px,0,0) scale(.72) !important;
  filter: blur(4px) !important;
  pointer-events: none !important;
}
@media (max-width: 760px) {
  .spx-nav-v26 .brand { min-width: 58px !important; }
  .spx-nav-v26 .brand span { display: none !important; }
}

/* Hero base composition: restore the calmer A8.54-like stage before any scroll handoff. */
.spx-hero-v26 {
  overflow: clip !important;
  --spx-hero-handoff: 0;
}
.spx-hero-v26 .spx-v26-shell,
.spx-hero-v26 .spx-v26-copy {
  position: relative !important;
  z-index: 8 !important;
}
.v26-product-atmosphere:not(.spx-hero-handoff-product) {
  position: absolute !important;
  left: 55.5% !important;
  top: 39.4% !important;
  width: min(1220px, 87vw) !important;
  height: min(720px, 54vw) !important;
  opacity: .88 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  transform:
    translate(-15.5%,-19%)
    perspective(1680px)
    rotateY(-7.2deg)
    rotateX(3deg)
    rotateZ(-.45deg)
    scale(1.035) !important;
  transform-origin: 52% 48% !important;
  filter: drop-shadow(0 44px 118px rgba(0,0,0,.34)) !important;
  transition: none !important;
  will-change: transform, opacity !important;
}
.v26-builder-base {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 7px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: clamp(22px, 2vw, 30px) !important;
  border: 1px solid rgba(107,232,255,.22) !important;
  background: rgba(5,11,23,.86) !important;
  box-shadow:
    0 34px 112px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.035) inset !important;
}
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add {
  animation: none !important;
  opacity: .76 !important;
  padding: 5px !important;
  border-radius: 19px !important;
  object-fit: contain !important;
  transform: translate3d(0,0,0) !important;
  transition: none !important;
  filter: saturate(1.03) contrast(1.02) !important;
}
.v26-product-layer.layer-add {
  left: 1.4% !important;
  top: 7.8% !important;
  width: 28.5% !important;
  height: 73.5% !important;
  z-index: 6 !important;
}
.v26-product-layer.layer-settings {
  right: 8.8% !important;
  top: 2.2% !important;
  width: 28.2% !important;
  height: 74.5% !important;
  z-index: 7 !important;
}

/* Handoff: the actual product DOM node is temporarily fixed and driven by JS vars.
   It starts at its measured hero rect, then fills beyond the viewport so it cannot crop short. */
.v26-product-atmosphere.spx-hero-handoff-product {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--spx-handoff-w, 100vw) !important;
  height: var(--spx-handoff-h, 100svh) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: var(--spx-handoff-opacity, .92) !important;
  transform:
    translate3d(var(--spx-handoff-x, 0px), var(--spx-handoff-y, 0px), 0)
    perspective(1800px)
    rotateY(var(--spx-handoff-ry, -7deg))
    rotateX(var(--spx-handoff-rx, 3deg))
    rotateZ(var(--spx-handoff-rz, -.45deg))
    scale(var(--spx-handoff-scale, 1)) !important;
  transform-origin: center center !important;
  filter:
    drop-shadow(0 54px 140px rgba(0,0,0,.34))
    saturate(var(--spx-handoff-saturate, 1.04))
    brightness(var(--spx-handoff-brightness, .92)) !important;
  transition: none !important;
  will-change: transform, width, height, opacity, filter !important;
}
.v26-product-atmosphere.spx-hero-handoff-product .v26-builder-base {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: var(--spx-handoff-padding, 7px) !important;
  border-radius: var(--spx-handoff-radius, 28px) !important;
  border-color: rgba(107,232,255, var(--spx-handoff-border, .20)) !important;
  object-fit: cover !important;
  object-position: center top !important;
  filter: saturate(1.06) contrast(1.05) !important;
}
.v26-product-atmosphere.spx-hero-handoff-product::before {
  opacity: calc(.46 - (var(--spx-hero-handoff, 0) * .20)) !important;
}
.v26-product-atmosphere.spx-hero-handoff-product::after {
  inset: 0 !important;
  border-radius: var(--spx-handoff-radius, 28px) !important;
  opacity: 1 !important;
  background:
    linear-gradient(90deg,
      rgba(2,5,13, calc(.06 + var(--spx-hero-handoff, 0) * .54)) 0%,
      rgba(2,5,13, calc(.02 + var(--spx-hero-handoff, 0) * .32)) 36%,
      rgba(2,5,13, calc(.04 + var(--spx-hero-handoff, 0) * .42)) 100%),
    linear-gradient(180deg,
      rgba(2,5,13, calc(.02 + var(--spx-hero-handoff, 0) * .28)) 0%,
      rgba(2,5,13, calc(.04 + var(--spx-hero-handoff, 0) * .36)) 70%,
      rgba(2,5,13, calc(.10 + var(--spx-hero-handoff, 0) * .54)) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(107,232,255, calc(.05 + var(--spx-hero-handoff, 0) * .05)) !important;
}
.v26-product-atmosphere.spx-hero-handoff-product .v26-product-layer.layer-add,
.v26-product-atmosphere.spx-hero-handoff-product .v26-product-layer.layer-settings {
  opacity: calc(.76 * (1 - var(--spx-hero-handoff, 0))) !important;
  filter:
    blur(calc(var(--spx-hero-handoff, 0) * 9px))
    saturate(.98)
    brightness(calc(1 - var(--spx-hero-handoff, 0) * .15)) !important;
  transform: translate3d(0, calc(var(--spx-hero-handoff, 0) * -14px), 0) scale(calc(1 - var(--spx-hero-handoff, 0) * .035)) !important;
}
html.spx-hero-handoff-on .spx-hero-v26 .spx-v26-copy {
  opacity: calc(1 - (var(--spx-hero-handoff, 0) * .46)) !important;
  transform: translate3d(0, calc(var(--spx-hero-handoff, 0) * -26px), 0) !important;
}

@media (max-width: 980px) {
  .v26-product-atmosphere:not(.spx-hero-handoff-product) {
    left: 50% !important;
    top: auto !important;
    bottom: 8% !important;
    width: min(760px, 102vw) !important;
    height: min(440px, 58vw) !important;
    transform: translate(-50%,0) perspective(1200px) rotateY(-4deg) rotateX(2.5deg) scale(1) !important;
  }
  .v26-product-atmosphere.spx-hero-handoff-product {
    display: none !important;
  }
}

/* ========================================================================== 
   A8.58V — true same-element hero zoom handoff
   No duplicate image / no clone. The visible .v26-product-atmosphere itself
   becomes the fixed zoom layer and expands from its measured hero position.
   ========================================================================== */

/* Never show a leftover clone from A8.58U if cached markup/script created one. */
.v26-product-atmosphere.spx-hero-handoff-clone {
  display: none !important;
}

/* Hero still starts as the rounded A8.54-like product composition. */
.v26-product-atmosphere:not(.spx-hero-direct-handoff):not(.spx-hero-handoff-clone):not(.spx-hero-handoff-product) {
  left: 56.8% !important;
  top: 39.2% !important;
  width: min(1240px, 88vw) !important;
  height: min(724px, 54vw) !important;
  transform:
    translate(-15.2%,-18.8%)
    perspective(1680px)
    rotateY(-7.2deg)
    rotateX(3deg)
    rotateZ(-.45deg)
    scale(1.035) !important;
  transform-origin: 52% 48% !important;
  opacity: .90 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 44px 118px rgba(0,0,0,.34)) !important;
}

.v26-builder-base {
  border-radius: clamp(24px, 2.1vw, 32px) !important;
  overflow: hidden !important;
}

/* Add now truly sits on top of the left/layers area of the main builder image.
   It is moved further left and slightly down, with only subtle mouse float. */
.v26-product-atmosphere:not(.spx-hero-direct-handoff) .v26-product-layer.layer-add {
  left: -3.8% !important;
  top: 6.6% !important;
  width: 38.6% !important;
  height: 83.6% !important;
  z-index: 12 !important;
  opacity: .86 !important;
  object-fit: cover !important;
  object-position: left top !important;
  border-radius: 21px !important;
  transform: translate3d(calc(var(--spx-v26-x, 0px) * .018), calc(var(--spx-v26-y, 0px) * .012), 0) !important;
  filter: saturate(1.04) contrast(1.03) !important;
  box-shadow:
    0 24px 76px rgba(0,0,0,.24),
    0 0 0 1px rgba(107,232,255,.13) inset !important;
}

.v26-product-atmosphere:not(.spx-hero-direct-handoff) .v26-product-layer.layer-settings {
  right: 9.4% !important;
  top: 3.6% !important;
  width: 28.8% !important;
  height: 74.8% !important;
  z-index: 11 !important;
  opacity: .79 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 21px !important;
  transform: translate3d(calc(var(--spx-v26-x, 0px) * -.012), calc(var(--spx-v26-y, 0px) * .010), 0) !important;
  filter: saturate(1.03) contrast(1.02) !important;
  box-shadow:
    0 24px 72px rgba(0,0,0,.18),
    0 0 0 1px rgba(107,232,255,.10) inset !important;
}

/* Same DOM element as hero product. It starts fixed at the measured hero rect
   and uses scale() to zoom from the original angle into the background. */
.v26-product-atmosphere.spx-hero-direct-handoff {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--spx-handoff-w, 1000px) !important;
  height: var(--spx-handoff-h, 620px) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: var(--spx-handoff-opacity, .9) !important;
  transform:
    translate3d(var(--spx-handoff-x, 0px), var(--spx-handoff-y, 0px), 0)
    perspective(1680px)
    rotateY(var(--spx-handoff-ry, -7.2deg))
    rotateX(var(--spx-handoff-rx, 3deg))
    rotateZ(var(--spx-handoff-rz, -.45deg))
    scale(var(--spx-handoff-scale, 1)) !important;
  transform-origin: 52% 48% !important;
  filter:
    drop-shadow(0 56px 150px rgba(0,0,0,.36))
    saturate(var(--spx-handoff-saturate, 1.04))
    brightness(var(--spx-handoff-brightness, .98)) !important;
  transition: none !important;
  will-change: transform, opacity, filter !important;
  contain: layout style paint !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff .v26-builder-base {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: var(--spx-handoff-padding, 7px) !important;
  border-radius: var(--spx-handoff-radius, 31px) !important;
  border-color: rgba(107,232,255, var(--spx-handoff-border, .22)) !important;
  object-fit: cover !important;
  object-position: center top !important;
  filter: saturate(1.06) contrast(1.05) !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff::before {
  opacity: calc(.46 - (var(--spx-hero-handoff, 0) * .22)) !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff::after {
  inset: 0 !important;
  border-radius: var(--spx-handoff-radius, 31px) !important;
  opacity: 1 !important;
  background:
    linear-gradient(90deg,
      rgba(2,5,13, calc(.05 + var(--spx-hero-handoff, 0) * .60)) 0%,
      rgba(2,5,13, calc(.02 + var(--spx-hero-handoff, 0) * .34)) 38%,
      rgba(2,5,13, calc(.04 + var(--spx-hero-handoff, 0) * .48)) 100%),
    linear-gradient(180deg,
      rgba(2,5,13, calc(.02 + var(--spx-hero-handoff, 0) * .30)) 0%,
      rgba(2,5,13, calc(.04 + var(--spx-hero-handoff, 0) * .40)) 70%,
      rgba(2,5,13, calc(.10 + var(--spx-hero-handoff, 0) * .60)) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(107,232,255, calc(.05 + var(--spx-hero-handoff, 0) * .05)) !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff .v26-product-layer.layer-add,
.v26-product-atmosphere.spx-hero-direct-handoff .v26-product-layer.layer-settings {
  opacity: var(--spx-handoff-panel-opacity, .84) !important;
  filter:
    blur(calc(var(--spx-hero-handoff, 0) * 10px))
    saturate(.98)
    brightness(calc(1 - var(--spx-hero-handoff, 0) * .16)) !important;
  transform: translate3d(0, calc(var(--spx-hero-handoff, 0) * -6px), 0) scale(calc(1 - var(--spx-hero-handoff, 0) * .026)) !important;
}

html.spx-hero-handoff-on .spx-hero-v26 .spx-v26-copy {
  opacity: calc(1 - (var(--spx-hero-handoff, 0) * .42)) !important;
  transform: translate3d(0, calc(var(--spx-hero-handoff, 0) * -18px), 0) !important;
}

@media (max-width: 980px) {
  .v26-product-atmosphere.spx-hero-direct-handoff {
    position: absolute !important;
    transform: translate(-50%,0) perspective(1200px) rotateY(-4deg) rotateX(2.5deg) scale(1) !important;
  }
  .v26-product-atmosphere:not(.spx-hero-direct-handoff) .v26-product-layer.layer-add {
    left: 1.5% !important;
    top: 7.5% !important;
    width: 34% !important;
    height: 74% !important;
    object-fit: contain !important;
  }
}


/* ========================================================================== 
   A8.58W — zero-pop same-element hero zoom correction
   Keeps the same DOM node, but starts fixed mode from the untransformed layout
   box so the first handoff frame cannot jump/reset upward.
   ========================================================================== */

/* Keep normal hero composition rounded and visually aligned. */
.v26-product-atmosphere:not(.spx-hero-direct-handoff):not(.spx-hero-handoff-clone):not(.spx-hero-handoff-product) {
  left: 56.8% !important;
  top: 39.2% !important;
  width: min(1240px, 88vw) !important;
  height: min(724px, 54vw) !important;
  transform:
    translate(-15.2%,-18.8%)
    perspective(1680px)
    rotateY(-7.2deg)
    rotateX(3deg)
    rotateZ(-.45deg)
    scale(1.035) !important;
  transform-origin: 52% 48% !important;
  opacity: .90 !important;
  overflow: visible !important;
  filter: drop-shadow(0 44px 118px rgba(0,0,0,.34)) !important;
}

/* The Add panel should read as the layer/sidebar takeover of the main builder. */
.v26-product-atmosphere:not(.spx-hero-direct-handoff) .v26-product-layer.layer-add {
  left: -7.4% !important;
  top: 8.8% !important;
  width: 41.8% !important;
  height: 81.8% !important;
  z-index: 14 !important;
  opacity: .88 !important;
  object-fit: cover !important;
  object-position: left top !important;
  border-radius: 21px !important;
  transform: translate3d(calc(var(--spx-v26-x, 0px) * .014), calc(var(--spx-v26-y, 0px) * .010), 0) !important;
  box-shadow:
    0 24px 76px rgba(0,0,0,.25),
    0 0 0 1px rgba(107,232,255,.13) inset !important;
}

.v26-product-atmosphere:not(.spx-hero-direct-handoff) .v26-product-layer.layer-settings {
  right: 9.8% !important;
  top: 3.6% !important;
  width: 28.8% !important;
  height: 74.8% !important;
  z-index: 12 !important;
  opacity: .78 !important;
  transform: translate3d(calc(var(--spx-v26-x, 0px) * -.010), calc(var(--spx-v26-y, 0px) * .009), 0) !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff {
  position: fixed !important;
  left: var(--spx-handoff-left, 0px) !important;
  top: var(--spx-handoff-top, 0px) !important;
  width: var(--spx-handoff-w, 1000px) !important;
  height: var(--spx-handoff-h, 620px) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: var(--spx-handoff-opacity, .9) !important;
  transform:
    translate3d(var(--spx-handoff-shift-x, 0px), var(--spx-handoff-shift-y, 0px), 0)
    translate3d(var(--spx-handoff-tx, -15.2%), var(--spx-handoff-ty, -18.8%), 0)
    perspective(1680px)
    rotateY(var(--spx-handoff-ry, -7.2deg))
    rotateX(var(--spx-handoff-rx, 3deg))
    rotateZ(var(--spx-handoff-rz, -.45deg))
    scale(var(--spx-handoff-scale, 1)) !important;
  transform-origin: 52% 48% !important;
  filter:
    drop-shadow(0 56px 150px rgba(0,0,0,.36))
    saturate(var(--spx-handoff-saturate, 1.04))
    brightness(var(--spx-handoff-brightness, .98)) !important;
  transition: none !important;
  will-change: transform, opacity, filter !important;
  contain: layout style paint !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff .v26-builder-base {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: var(--spx-handoff-padding, 7px) !important;
  border-radius: var(--spx-handoff-radius, 31px) !important;
  border-color: rgba(107,232,255, var(--spx-handoff-border, .22)) !important;
  object-fit: cover !important;
  object-position: center 54% !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff::after {
  border-radius: var(--spx-handoff-radius, 31px) !important;
  background:
    linear-gradient(90deg,
      rgba(2,5,13, calc(.05 + var(--spx-hero-handoff, 0) * .62)) 0%,
      rgba(2,5,13, calc(.02 + var(--spx-hero-handoff, 0) * .34)) 38%,
      rgba(2,5,13, calc(.04 + var(--spx-hero-handoff, 0) * .50)) 100%),
    linear-gradient(180deg,
      rgba(2,5,13, calc(.02 + var(--spx-hero-handoff, 0) * .28)) 0%,
      rgba(2,5,13, calc(.04 + var(--spx-hero-handoff, 0) * .36)) 68%,
      rgba(2,5,13, calc(.12 + var(--spx-hero-handoff, 0) * .58)) 100%) !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff .v26-product-layer.layer-add,
.v26-product-atmosphere.spx-hero-direct-handoff .v26-product-layer.layer-settings {
  opacity: var(--spx-handoff-panel-opacity, .84) !important;
  filter:
    blur(calc(var(--spx-hero-handoff, 0) * 10px))
    saturate(.98)
    brightness(calc(1 - var(--spx-hero-handoff, 0) * .16)) !important;
  transform: translate3d(0, calc(var(--spx-hero-handoff, 0) * -4px), 0) scale(calc(1 - var(--spx-hero-handoff, 0) * .024)) !important;
}


/* ========================================================================== 
   A8.58Z — sticky hero scrollstory retry from A8.58W
   No fixed handoff, no clone, no second image: the real hero product stays in
   one sticky stage and is animated only through CSS variables.
   ========================================================================== */
html {
  overflow-x: clip !important;
}
body {
  overflow-x: clip !important;
}

/* Navigator: keep all letters visible and collapse by visual opacity/scale only. */
html .site-header.spx-nav-v26 .brand {
  gap: 12px !important;
  overflow: visible !important;
  min-width: 184px !important;
  transform-origin: left center !important;
}
html .site-header.spx-nav-v26 .brand img {
  flex: 0 0 auto !important;
  width: 43px !important;
  height: 43px !important;
  transform-origin: center !important;
}
html .site-header.spx-nav-v26 .brand span {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 112px !important;
  max-width: none !important;
  width: auto !important;
  overflow: visible !important;
  white-space: nowrap !important;
  clip-path: none !important;
  letter-spacing: -.035em !important;
  line-height: 1 !important;
  padding: 0 8px 1px 0 !important;
  transform-origin: left center !important;
  transition:
    opacity .46s cubic-bezier(.16,1,.3,1),
    transform .58s cubic-bezier(.16,1,.3,1),
    filter .58s cubic-bezier(.16,1,.3,1) !important;
}
html .site-header.spx-nav-v26.is-scrolled .brand,
html .site-header.spx-nav-v26.is-open .brand {
  min-width: 56px !important;
  gap: 0 !important;
  overflow: visible !important;
}
html .site-header.spx-nav-v26.is-scrolled .brand img,
html .site-header.spx-nav-v26.is-open .brand img {
  transform: scale(1.16) rotate(-2deg) !important;
}
html .site-header.spx-nav-v26.is-scrolled .brand span,
html .site-header.spx-nav-v26.is-open .brand span {
  min-width: 112px !important;
  max-width: none !important;
  overflow: visible !important;
  opacity: 0 !important;
  filter: blur(6px) saturate(1.2) !important;
  transform: translate3d(-35px,0,0) scale(.64) !important;
  pointer-events: none !important;
}

/* Hero scrollstory: native page scroll, sticky viewport stage, no position switch. */
html .spx-home-main .spx-hero-v26[data-hero-scrollstory],
html .spx-hero-v26[data-hero-scrollstory] {
  min-height: clamp(1560px, 232svh, 2120px) !important;
  height: auto !important;
  padding: 0 !important;
  overflow: clip !important;
  isolation: isolate !important;
  --spx-hero-story: 0;
  --spx-hero-story-soft: 0;
  --spx-hero-copy-story-opacity: 1;
  --spx-hero-copy-story-y: 0px;
  --spx-hero-product-left: 56.4%;
  --spx-hero-product-top: 41.8%;
  --spx-hero-product-tx: -15.2%;
  --spx-hero-product-ty: -18.6%;
  --spx-hero-product-ry: -7.2deg;
  --spx-hero-product-rx: 3deg;
  --spx-hero-product-rz: -.45deg;
  --spx-hero-product-scale: 1.035;
  --spx-hero-product-opacity: .90;
  --spx-hero-product-radius: 30px;
  --spx-hero-panel-opacity: .88;
  --spx-hero-panel-blur: 0px;
  --spx-hero-explain-opacity: 0;
  --spx-hero-explain-y: 26px;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-hero-space {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage {
  position: sticky !important;
  top: 0 !important;
  height: 100svh !important;
  min-height: 720px !important;
  width: 100% !important;
  overflow: clip !important;
  isolation: isolate !important;
  padding: clamp(138px, 12vw, 184px) var(--side) clamp(118px, 10vw, 178px) !important;
  display: grid !important;
  align-items: center !important;
  z-index: 2 !important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky {
  position: absolute !important;
  inset: -8% -8% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: clip !important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-shell {
  position: relative !important;
  z-index: 8 !important;
  width: min(1400px, 100%) !important;
  margin: 0 auto !important;
  pointer-events: auto !important;
}

html .spx-hero-v26[data-hero-scrollstory].spx-section-anim .spx-v26-copy,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy {
  opacity: var(--spx-hero-copy-story-opacity, 1) !important;
  transform: translate3d(0, var(--spx-hero-copy-story-y, 0px), 0) scale(var(--spx-hero-copy-story-scale, 1)) !important;
  transform-origin: left center !important;
  filter: blur(var(--spx-hero-copy-story-blur, 0px)) !important;
  transition: none !important;
  will-change: opacity, transform, filter !important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-kicker,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-lead,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-support,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-note {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* The real product element remains absolute in the sticky stage for the whole animation. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere:not(.spx-hero-direct-handoff):not(.spx-hero-handoff-clone):not(.spx-hero-handoff-product) {
  position: absolute !important;
  left: var(--spx-hero-product-left, 56.4%) !important;
  top: var(--spx-hero-product-top, 41.8%) !important;
  width: min(1220px, 86vw) !important;
  height: min(716px, 53vw) !important;
  z-index: 3 !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: var(--spx-hero-product-opacity, .90) !important;
  transform:
    translate3d(var(--spx-hero-product-tx, -15.2%), var(--spx-hero-product-ty, -18.6%), 0)
    perspective(1680px)
    rotateY(var(--spx-hero-product-ry, -7.2deg))
    rotateX(var(--spx-hero-product-rx, 3deg))
    rotateZ(var(--spx-hero-product-rz, -.45deg))
    scale(var(--spx-hero-product-scale, 1.035)) !important;
  transform-origin: 52% 48% !important;
  filter:
    drop-shadow(0 56px 142px rgba(0,0,0,.35))
    saturate(var(--spx-hero-product-saturate, 1.04))
    brightness(var(--spx-hero-product-brightness, .98)) !important;
  transition: none !important;
  will-change: transform, opacity, filter !important;
  contain: layout style paint !important;
}

html .spx-hero-v26[data-hero-scrollstory] .v26-builder-base {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: var(--spx-hero-product-radius, 30px) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  border-color: rgba(107,232,255,.18) !important;
}

html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere::before {
  opacity: calc(.44 - (var(--spx-hero-story-soft, 0) * .20)) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere::after {
  border-radius: var(--spx-hero-product-radius, 30px) !important;
  opacity: 1 !important;
  background:
    linear-gradient(90deg,
      rgba(2,5,13, var(--spx-hero-product-filter-left, .10)) 0%,
      rgba(2,5,13, var(--spx-hero-product-filter-mid, .05)) 42%,
      rgba(2,5,13, var(--spx-hero-product-filter-right, .16)) 100%),
    linear-gradient(180deg,
      rgba(2,5,13, var(--spx-hero-product-filter-top, .04)) 0%,
      rgba(2,5,13, var(--spx-hero-product-filter-bottom, .22)) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(107,232,255,.06) !important;
}

/* Add takes over the layers/sidebar area and settings remains part of the same angle. */
html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-add {
  left: -8.2% !important;
  top: 10.4% !important;
  width: 42.2% !important;
  height: 80.4% !important;
  z-index: 14 !important;
  opacity: var(--spx-hero-panel-opacity, .88) !important;
  object-fit: cover !important;
  object-position: left top !important;
  border-radius: 21px !important;
  animation: none !important;
  transform: translate3d(calc(var(--spx-v26-x, 0px) * .012), calc(var(--spx-v26-y, 0px) * .010), 0) !important;
  filter: blur(var(--spx-hero-panel-blur, 0px)) saturate(.98) brightness(var(--spx-hero-panel-brightness, 1)) !important;
  transition: none !important;
  will-change: opacity, filter, transform !important;
}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-settings {
  right: 9.6% !important;
  top: 4.1% !important;
  width: 29.2% !important;
  height: 73.4% !important;
  z-index: 12 !important;
  opacity: calc(var(--spx-hero-panel-opacity, .88) * .88) !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 21px !important;
  animation: none !important;
  transform: translate3d(calc(var(--spx-v26-x, 0px) * -.010), calc(var(--spx-v26-y, 0px) * .009), 0) !important;
  filter: blur(var(--spx-hero-panel-blur, 0px)) saturate(.98) brightness(var(--spx-hero-panel-brightness, 1)) !important;
  transition: none !important;
  will-change: opacity, filter, transform !important;
}

/* Explanation copy over the product background. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-explain {
  position: absolute !important;
  left: max(var(--side), calc((100vw - 1400px) / 2 + var(--side))) !important;
  bottom: clamp(96px, 16vh, 170px) !important;
  z-index: 10 !important;
  width: min(660px, calc(100vw - (var(--side) * 2))) !important;
  color: var(--text) !important;
  opacity: var(--spx-hero-explain-opacity, 0) !important;
  transform: translate3d(0, var(--spx-hero-explain-y, 26px), 0) scale(var(--spx-hero-explain-scale, .985)) !important;
  filter: blur(var(--spx-hero-explain-blur, 8px)) !important;
  pointer-events: none !important;
  transition: none !important;
  will-change: opacity, transform, filter !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-explain span {
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border: 1px solid rgba(107,232,255,.22);
  border-radius: 7px;
  background: rgba(24,201,245,.09);
  color: #bff4ff;
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-explain h2 {
  margin: 0;
  max-width: 800px;
  font-size: clamp(44px, 5.8vw, 92px);
  line-height: .92;
  letter-spacing: -.07em;
  text-wrap: balance;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-explain p {
  margin: 20px 0 0;
  max-width: 590px;
  color: var(--text-soft);
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.55;
  font-weight: 750;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  z-index: 12 !important;
  height: 34vh !important;
  opacity: calc(.55 + (var(--spx-hero-story-soft, 0) * .45)) !important;
}

/* The image fades inside the hero; Why starts cleanly on the normal section background. */
html .spx-why-v52 .spx-why52-hero-echo {
  display: none !important;
  opacity: 0 !important;
}

@media (max-width: 980px) {
  html .spx-hero-v26[data-hero-scrollstory] {
    min-height: auto !important;
    padding: 118px 18px 148px !important;
    overflow: hidden !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky {
    position: absolute !important;
    inset: 0 !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-explain {
    display: none !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere:not(.spx-hero-direct-handoff):not(.spx-hero-handoff-clone):not(.spx-hero-handoff-product) {
    left: 50% !important;
    top: auto !important;
    bottom: 9% !important;
    width: 100% !important;
    height: 292px !important;
    transform: translate(-50%,0) perspective(1200px) rotateY(-4deg) rotateX(2.5deg) scale(1) !important;
    opacity: .64 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html .spx-hero-v26[data-hero-scrollstory] {
    min-height: clamp(920px,104svh,1180px) !important;
    padding: clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px) !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage {
    position: relative !important;
    height: auto !important;
    min-height: inherit !important;
    padding: 0 !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-explain {
    display: none !important;
  }
}


/* ========================================================================== 
   A8.58ZA — sharper full-image hero background refinement
   Built on A8.58Z. Keeps the liked sticky scrollstory, but fixes the two
   visible issues: the builder screenshot was cropped/clipped and looked soft
   when it became the background.
   ========================================================================== */

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky {
  inset: -4% -3% !important;
  overflow: visible !important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage {
  overflow: clip !important;
}

/* Keep the screenshot in its real aspect ratio. A8.58Z used a taller frame and
   object-fit: cover, which cropped the actual builder image. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere:not(.spx-hero-direct-handoff):not(.spx-hero-handoff-clone):not(.spx-hero-handoff-product) {
  width: min(1280px, 86vw) !important;
  height: min(606px, 40.75vw) !important;
  contain: layout style !important;
  filter:
    drop-shadow(0 58px 144px rgba(0,0,0,.34))
    saturate(var(--spx-hero-product-saturate, 1.08))
    contrast(1.055)
    brightness(var(--spx-hero-product-brightness, 1)) !important;
}

html .spx-hero-v26[data-hero-scrollstory] .v26-builder-base {
  object-fit: contain !important;
  object-position: center center !important;
  background: rgba(4,9,20,.92) !important;
  filter: saturate(1.08) contrast(1.075) brightness(1.02) !important;
  image-rendering: auto !important;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* The filter over the background remains cinematic, but not so heavy that the
   builder UI becomes blurry/unclear. */
html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere::after {
  background:
    linear-gradient(90deg,
      rgba(2,5,13, var(--spx-hero-product-filter-left, .08)) 0%,
      rgba(2,5,13, var(--spx-hero-product-filter-mid, .035)) 42%,
      rgba(2,5,13, var(--spx-hero-product-filter-right, .12)) 100%),
    linear-gradient(180deg,
      rgba(2,5,13, var(--spx-hero-product-filter-top, .025)) 0%,
      rgba(2,5,13, var(--spx-hero-product-filter-bottom, .14)) 100%) !important;
}

/* Restore the floating panels as sharp foreground details while they are still
   visible, then let the JS-driven opacity/blur fade them out as before. */
html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-add,
html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-settings {
  image-rendering: auto !important;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-add {
  left: -7.6% !important;
  top: 10.8% !important;
  width: 41.2% !important;
  height: 79.6% !important;
}

html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-settings {
  right: 9.2% !important;
  top: 4.4% !important;
  width: 29.0% !important;
  height: 72.8% !important;
}

@media (max-width: 980px) {
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky {
    overflow: hidden !important;
  }
}


/* ========================================================================== 
   A8.58ZB — full-screen sharp hero background refinement
   Built on A8.58ZA. Keeps the approved sticky scrollstory and sharpened image,
   but the background phase now covers the full viewport instead of staying in a
   contain-style frame.
   ========================================================================== */

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere:not(.spx-hero-direct-handoff):not(.spx-hero-handoff-clone):not(.spx-hero-handoff-product) {
  width: min(1320px, 88vw) !important;
  height: min(624px, 41.6vw) !important;
  max-width: none !important;
  max-height: none !important;
}

html .spx-hero-v26[data-hero-scrollstory] .v26-builder-base {
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
  min-width: 100% !important;
  min-height: 100% !important;
}

/* Once the product reaches background scale, keep the image crisp and cinematic
   without letting the overlay make the builder unreadable. */
html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere::after {
  background:
    linear-gradient(90deg,
      rgba(2,5,13, var(--spx-hero-product-filter-left, .10)) 0%,
      rgba(2,5,13, var(--spx-hero-product-filter-mid, .045)) 42%,
      rgba(2,5,13, var(--spx-hero-product-filter-right, .14)) 100%),
    linear-gradient(180deg,
      rgba(2,5,13, var(--spx-hero-product-filter-top, .035)) 0%,
      rgba(2,5,13, var(--spx-hero-product-filter-bottom, .18)) 100%) !important;
}

@media (min-width: 1420px) {
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere:not(.spx-hero-direct-handoff):not(.spx-hero-handoff-clone):not(.spx-hero-handoff-product) {
    width: min(1440px, 88vw) !important;
    height: min(681px, 41.6vw) !important;
  }
}


/* A8.58ZW — clean hero/What/How transition layer.
   What is Spixor content is real HTML/CSS. Only its small topbar is an image. */
html.spx-hero-story-active{--spx-how-underlay-opacity:0;--spx-how-underlay-blur:5px;--spx-how-underlay-scale:.984;}
html .spx-hero-v26[data-hero-scrollstory]{
  --spx-hero-copy-story-opacity:1;--spx-hero-copy-story-y:0px;--spx-hero-copy-story-scale:1;--spx-hero-copy-story-blur:0px;
  --spx-hero-panel-opacity:.98;--spx-hero-panel-blur:0px;--spx-hero-panel-brightness:1;
  --spx-hero-view-old-opacity:1;--spx-hero-view-old-y:0px;--spx-hero-view-old-scale:1;--spx-hero-view-old-blur:0px;
  --spx-hero-view-new-opacity:0;--spx-hero-view-new-y:36px;--spx-hero-view-new-scale:.996;--spx-hero-view-new-blur:0px;
  --spx-hero-view-stack-scale:1;--spx-hero-bottom-fade-opacity:0;--spx-hero-console-mask-opacity:0;
  min-height:278vh!important;
  background:
    radial-gradient(circle at 21% 34%, rgba(27,210,255,.18), transparent 22%),
    radial-gradient(circle at 78% 17%, rgba(42,103,255,.20), transparent 26%),
    radial-gradient(circle at 58% 78%, rgba(10,184,255,.12), transparent 30%),
    linear-gradient(135deg,#020913 0%,#031426 44%,#061b34 100%)!important;
  overflow:clip!important;
}
html .spx-hero-v26[data-hero-scrollstory]::before{content:"";position:absolute;inset:-10%;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 18% 72%,rgba(54,212,255,.14),transparent 42%),radial-gradient(ellipse at 78% 35%,rgba(75,105,255,.16),transparent 45%),linear-gradient(115deg,transparent 0%,rgba(76,209,255,.06) 42%,transparent 60%);opacity:.95;filter:saturate(1.15);}
html .spx-hero-v26[data-hero-scrollstory]::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(180deg,rgba(2,8,18,.06),rgba(2,8,18,.70));}
html .spx-hero-v26[data-hero-scrollstory] .spx-hero-space{opacity:.92!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-cloud{display:block!important;position:absolute;border-radius:999px;filter:blur(34px);opacity:.32;pointer-events:none;mix-blend-mode:screen;}
html .spx-hero-v26[data-hero-scrollstory] .cloud-a{left:9%;top:22%;width:28vw;height:18vw;background:rgba(38,215,255,.20);}
html .spx-hero-v26[data-hero-scrollstory] .cloud-b{right:12%;top:11%;width:26vw;height:18vw;background:rgba(75,100,255,.18);}
html .spx-hero-v26[data-hero-scrollstory] .cloud-c{left:45%;bottom:12%;width:33vw;height:20vw;background:rgba(25,146,255,.13);}
html .spx-hero-v26[data-hero-scrollstory] .v26-light-trace{display:block!important;position:absolute;height:1px;width:30vw;opacity:.28;background:linear-gradient(90deg,transparent,rgba(102,229,255,.8),transparent);filter:blur(.2px);transform:rotate(-12deg);}
html .spx-hero-v26[data-hero-scrollstory] .trace-a{left:54%;top:16%;}.spx-hero-v26[data-hero-scrollstory] .trace-b{left:18%;bottom:22%;width:22vw;opacity:.18;}
html .spx-hero-v26-stage{position:sticky!important;top:0!important;min-height:100svh!important;height:100svh!important;overflow:hidden!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{opacity:var(--spx-hero-copy-story-opacity)!important;transform:translate3d(0,var(--spx-hero-copy-story-y),0) scale(var(--spx-hero-copy-story-scale))!important;filter:blur(var(--spx-hero-copy-story-blur))!important;will-change:opacity,transform,filter;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky{overflow:visible!important;z-index:1!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere{left:var(--spx-hero-product-left,58.55%)!important;top:var(--spx-hero-product-top,45.9%)!important;width:min(1146px,82.5vw)!important;aspect-ratio:1919 / 913!important;height:auto!important;border:0!important;border-radius:var(--spx-hero-product-radius,18px)!important;box-shadow:none!important;outline:0!important;overflow:hidden!important;transform-origin:50% 44%!important;transform:translate(var(--spx-hero-product-tx,-15.4%),var(--spx-hero-product-ty,-18.6%)) perspective(1480px) rotateY(var(--spx-hero-product-ry,-6deg)) rotateX(var(--spx-hero-product-rx,2.8deg)) rotateZ(var(--spx-hero-product-rz,-.35deg)) scale(var(--spx-hero-product-scale,1)) scaleY(var(--spx-hero-product-fold-scale-y,1)) translate3d(calc(var(--spx-v26-x,0px) * .025),calc(var(--spx-v26-y,0px) * .018 + var(--spx-hero-product-fold-y,0px)),0)!important;opacity:var(--spx-hero-product-opacity,.82)!important;filter:saturate(var(--spx-hero-product-saturate,1)) brightness(var(--spx-hero-product-brightness,.84))!important;will-change:transform,opacity,filter;}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere::before{display:none!important;content:none!important;opacity:0!important;background:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere::after{content:""!important;position:absolute!important;inset:0!important;z-index:9!important;pointer-events:none!important;background:linear-gradient(90deg,rgba(2,5,13,var(--spx-hero-product-filter-left,.14)) 0%,rgba(2,5,13,var(--spx-hero-product-filter-mid,.06)) 18%,rgba(2,5,13,.015) 48%,rgba(2,5,13,var(--spx-hero-product-filter-right,.06)) 100%),linear-gradient(180deg,rgba(2,5,13,var(--spx-hero-product-filter-top,.05)),rgba(2,5,13,.01) 48%,rgba(2,5,13,var(--spx-hero-product-filter-bottom,.12)))!important;box-shadow:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-builder-base{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:left top!important;border:0!important;border-radius:inherit!important;box-shadow:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-console-mask{position:absolute!important;top:0!important;right:0!important;width:3.7%!important;height:100%!important;background:linear-gradient(90deg,rgba(4,8,16,0),rgba(4,8,16,.86) 24%,rgba(4,8,16,.98) 58%)!important;opacity:var(--spx-hero-console-mask-opacity,0)!important;pointer-events:none!important;z-index:6!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-stack{position:absolute!important;left:17.6%!important;top:9.6%!important;width:49.8%!important;aspect-ratio:890 / 694!important;height:auto!important;z-index:7!important;transform:scale(var(--spx-hero-view-stack-scale,1))!important;pointer-events:none!important;will-change:opacity,transform,filter;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-layer{position:absolute!important;inset:0!important;overflow:hidden!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-original{opacity:var(--spx-hero-view-old-opacity,1)!important;transform:translate3d(0,var(--spx-hero-view-old-y,0),0) scale(var(--spx-hero-view-old-scale,1))!important;filter:blur(var(--spx-hero-view-old-blur,0))!important;z-index:1!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-image{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;border:0!important;border-radius:0!important;box-shadow:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content{opacity:var(--spx-hero-view-new-opacity,0)!important;transform:translate3d(0,var(--spx-hero-view-new-y,36px),0) scale(var(--spx-hero-view-new-scale,.996))!important;filter:blur(var(--spx-hero-view-new-blur,0))!important;z-index:2!important;pointer-events:none!important;user-select:text!important;-webkit-user-select:text!important;}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-builder-view-content{pointer-events:auto!important;}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-builder-view-original{display:none!important;opacity:0!important;visibility:hidden!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content img:not(.spx-v26-builder-view-topbar),html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] img{display:none!important;visibility:hidden!important;opacity:0!important;width:0!important;height:0!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-shell{position:absolute!important;inset:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-topbar{position:absolute!important;left:128px!important;top:8px!important;width:126px!important;height:22px!important;object-fit:contain!important;object-position:left top!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))!important;z-index:4!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-page{position:absolute!important;inset:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{position:absolute!important;left:128px!important;right:30px!important;top:42px!important;bottom:20px!important;display:grid!important;grid-template-columns:minmax(0,1.18fr) minmax(220px,.82fr)!important;gap:24px!important;align-items:center!important;padding:32px 34px!important;background:linear-gradient(145deg,rgba(5,14,25,.94),rgba(4,9,18,.985) 62%,rgba(7,31,49,.86))!important;border:0!important;border-radius:18px!important;box-shadow:none!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:auto!important;user-select:text!important;-webkit-user-select:text!important;text-rendering:geometricPrecision!important;-webkit-font-smoothing:antialiased!important;}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]::before{content:"";position:absolute;inset:-25%;pointer-events:none;background:radial-gradient(circle at 13% 14%,rgba(26,215,255,.14),transparent 30%),radial-gradient(circle at 92% 76%,rgba(72,111,255,.12),transparent 34%);opacity:.82;}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] *{position:relative!important;user-select:text!important;-webkit-user-select:text!important;cursor:text!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-kicker{display:inline-flex!important;align-items:center!important;margin:0 0 14px!important;padding:8px 12px!important;border-radius:999px!important;background:rgba(27,214,255,.11)!important;border:1px solid rgba(91,228,255,.16)!important;color:#66e9ff!important;font-size:10px!important;font-weight:950!important;letter-spacing:.15em!important;text-transform:uppercase!important;}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] h3{margin:0!important;color:#fbfdff!important;font-size:clamp(25px,1.78vw,38px)!important;line-height:1.08!important;letter-spacing:-.045em!important;font-weight:950!important;max-width:620px!important;}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] p{margin:14px 0 0!important;color:rgba(229,243,255,.82)!important;font-size:clamp(13px,.86vw,16px)!important;line-height:1.56!important;font-weight:650!important;max-width:630px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin:0!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points article{display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;column-gap:12px!important;align-items:start!important;min-height:0!important;padding:13px 14px!important;border:0!important;border-radius:14px!important;background:rgba(255,255,255,.04)!important;box-shadow:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points i{grid-row:1 / span 2!important;color:#1ed7ff!important;font-style:normal!important;font-size:10px!important;font-weight:950!important;letter-spacing:.12em!important;margin-top:2px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points b{display:block!important;color:#fff!important;font-size:14px!important;line-height:1.15!important;margin:0 0 5px!important;font-weight:900!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points span{display:block!important;color:rgba(218,238,255,.67)!important;font-size:12px!important;line-height:1.38!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-explain{display:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-add{left:.20%!important;top:5.8%!important;width:42.2%!important;opacity:var(--spx-hero-panel-opacity,.98)!important;filter:blur(var(--spx-hero-panel-blur,0)) brightness(var(--spx-hero-panel-brightness,1))!important;border:0!important;border-radius:0!important;box-shadow:none!important;z-index:8!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-settings{right:3.8%!important;top:6.1%!important;width:25.5%!important;display:block!important;opacity:var(--spx-hero-panel-opacity,.98)!important;filter:blur(var(--spx-hero-panel-blur,0)) brightness(var(--spx-hero-panel-brightness,1))!important;border:0!important;border-radius:0!important;box-shadow:none!important;z-index:8!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{height:54vh!important;opacity:var(--spx-hero-bottom-fade-opacity,0)!important;background:linear-gradient(180deg,transparent 0%,rgba(2,5,13,.20) 28%,var(--bg) 92%)!important;}
html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory]{z-index:4;}
html.spx-hero-story-active .spx-why-section.spx-why-v52{position:relative!important;z-index:1!important;margin-top:-54vh!important;padding-top:54vh!important;opacity:var(--spx-how-underlay-opacity)!important;transform:scale(var(--spx-how-underlay-scale))!important;filter:blur(var(--spx-how-underlay-blur))!important;transition:none!important;will-change:opacity,transform,filter;}
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-head,html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-track{opacity:calc(.18 + (var(--spx-how-underlay-opacity,0) * .82));}
.spx-scroll-top-orbit{position:fixed;right:clamp(18px,2.2vw,34px);bottom:clamp(18px,2.2vw,34px);width:52px;height:52px;border-radius:999px;border:1px solid rgba(94,231,255,.28);background:linear-gradient(145deg,rgba(5,18,34,.86),rgba(8,31,56,.70));box-shadow:0 18px 42px rgba(0,0,0,.35),0 0 28px rgba(23,196,255,.14);color:#e9fbff;font-size:24px;font-weight:900;display:grid;place-items:center;z-index:1200;opacity:0;transform:translate3d(0,16px,0) scale(.92);pointer-events:none;transition:opacity .26s ease,transform .26s ease,border-color .26s ease;background .26s ease;}
.spx-scroll-top-orbit.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1);pointer-events:auto;}
.spx-scroll-top-orbit:hover{border-color:rgba(94,231,255,.60);background:linear-gradient(145deg,rgba(17,205,255,.88),rgba(47,102,255,.82));}
@media (min-width:981px) and (max-width:1500px){html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere{left:58.0%!important;width:min(1160px,85vw)!important;}html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-stack{left:17.0%!important;width:50.2%!important;}html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{left:120px!important;right:24px!important;}html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-topbar{left:120px!important;}}
@media (max-width:980px){html .spx-hero-v26[data-hero-scrollstory]{min-height:auto!important;overflow:hidden!important;}html .spx-hero-v26-stage{position:relative!important;height:auto!important;min-height:100svh!important;}html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-stack{display:none!important;}html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:0!important;padding-top:0!important;opacity:1!important;transform:none!important;filter:none!important;}.spx-scroll-top-orbit{width:46px;height:46px;font-size:21px;}}


/* A8.58ZX: redesigned What is Spixor card + fade-only transition into How Spixor works. */
html .spx-hero-v26[data-hero-scrollstory]{--spx-hero-scene-opacity:1;--spx-how-underlay-opacity:0;--spx-how-underlay-blur:0px;--spx-how-underlay-scale:1;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky{opacity:var(--spx-hero-scene-opacity)!important;transition:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere::before{display:none!important;content:none!important;background:none!important;opacity:0!important;}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{
  left:104px!important;
  right:28px!important;
  top:34px!important;
  bottom:20px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.04fr) minmax(300px,.96fr)!important;
  gap:26px!important;
  align-items:center!important;
  padding:30px 34px 30px 34px!important;
  background:linear-gradient(145deg,rgba(5,14,25,.96),rgba(4,9,18,.985) 58%,rgba(7,24,39,.92))!important;
  border:0!important;
  border-radius:16px!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]::before{display:none!important;content:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-main{align-self:center!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-kicker{
  display:inline-flex!important;
  align-items:center!important;
  margin:0 0 16px!important;
  padding:8px 13px!important;
  border-radius:999px!important;
  background:rgba(24,213,255,.13)!important;
  border:1px solid rgba(106,230,255,.18)!important;
  color:#69e8ff!important;
  font-size:10px!important;
  letter-spacing:.17em!important;
  text-transform:uppercase!important;
  font-weight:950!important;
}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] h3{
  margin:0!important;
  max-width:620px!important;
  color:#fbfdff!important;
  font-size:clamp(22px,1.42vw,32px)!important;
  line-height:1.12!important;
  letter-spacing:-.035em!important;
  font-weight:950!important;
}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] p{
  margin:14px 0 0!important;
  max-width:650px!important;
  color:rgba(228,243,255,.78)!important;
  font-size:clamp(13px,.78vw,15px)!important;
  line-height:1.58!important;
  font-weight:650!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-summary{
  margin-top:18px!important;
  padding:14px 16px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(111,229,255,.10)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-summary strong{display:block!important;color:#fff!important;font-size:13px!important;font-weight:950!important;margin-bottom:5px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-summary span{display:block!important;color:rgba(220,238,255,.68)!important;font-size:12px!important;line-height:1.48!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  align-self:stretch!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points article{
  min-height:118px!important;
  padding:16px 15px!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(111,229,255,.09)!important;
  box-shadow:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points i{display:block!important;margin-bottom:9px!important;color:#1ed7ff!important;font-style:normal!important;font-size:10px!important;font-weight:950!important;letter-spacing:.15em!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points b{display:block!important;margin-bottom:7px!important;color:#fff!important;font-size:14px!important;line-height:1.18!important;font-weight:900!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points span{display:block!important;color:rgba(218,238,255,.65)!important;font-size:12px!important;line-height:1.42!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52{
  margin-top:-72vh!important;
  padding-top:20vh!important;
  opacity:var(--spx-how-underlay-opacity)!important;
  transform:none!important;
  filter:none!important;
  transition:none!important;
}
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-head,
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-track{
  opacity:var(--spx-how-underlay-opacity)!important;
  transform:none!important;
  filter:none!important;
}
html.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{pointer-events:none!important;}
@media (min-width:981px) and (max-width:1500px){
  html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{left:96px!important;right:24px!important;grid-template-columns:minmax(0,1fr) minmax(270px,.92fr)!important;gap:20px!important;}
  html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] h3{font-size:clamp(20px,1.55vw,29px)!important;}
}


/* A8.58ZY: livelier space, redesigned What card, and fade-only How transition. */
html .spx-hero-v26[data-hero-scrollstory]{
  --spx-hero-how-bridge-opacity:0;
  --spx-hero-how-bridge-blur:8px;
  --spx-hero-how-bridge-scale:.982;
  background:
    radial-gradient(circle at 14% 24%, rgba(55,224,255,.24), transparent 19%),
    radial-gradient(circle at 82% 14%, rgba(79,103,255,.28), transparent 24%),
    radial-gradient(circle at 58% 74%, rgba(7,182,255,.18), transparent 31%),
    radial-gradient(circle at 34% 91%, rgba(35,232,255,.10), transparent 28%),
    linear-gradient(135deg,#010711 0%,#041628 48%,#061c36 100%)!important;
}
html .spx-hero-v26[data-hero-scrollstory]::before{
  background:
    radial-gradient(ellipse at 18% 78%,rgba(56,221,255,.18),transparent 42%),
    radial-gradient(ellipse at 82% 36%,rgba(84,112,255,.22),transparent 46%),
    radial-gradient(ellipse at 48% 18%,rgba(24,202,255,.10),transparent 34%),
    repeating-radial-gradient(circle at 50% 45%,rgba(255,255,255,.13) 0 1px,transparent 1px 30px),
    linear-gradient(115deg,transparent 0%,rgba(76,209,255,.10) 42%,transparent 62%)!important;
  opacity:1!important;
  filter:saturate(1.28)!important;
}
html .spx-hero-v26[data-hero-scrollstory]::after{
  background:
    linear-gradient(180deg,rgba(2,8,18,.00),rgba(2,8,18,.55)),
    radial-gradient(circle at 50% 112%,rgba(34,194,255,.16),transparent 38%)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-hero-space{opacity:.96!important;mix-blend-mode:screen;}
html .spx-hero-v26[data-hero-scrollstory] .cloud-a{opacity:.42!important;background:rgba(38,215,255,.25)!important;}
html .spx-hero-v26[data-hero-scrollstory] .cloud-b{opacity:.36!important;background:rgba(80,105,255,.23)!important;}
html .spx-hero-v26[data-hero-scrollstory] .cloud-c{opacity:.30!important;background:rgba(25,170,255,.20)!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-light-trace{opacity:.38!important;}

html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{
  left:92px!important;
  right:18px!important;
  top:34px!important;
  bottom:18px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:30px 34px 28px!important;
  background:linear-gradient(145deg,rgba(5,13,24,.965),rgba(4,9,18,.99) 56%,rgba(8,24,41,.94))!important;
  border:0!important;
  border-radius:18px!important;
  box-shadow:none!important;
  filter:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;gap:16px!important;border-bottom:1px solid rgba(111,229,255,.10)!important;padding-bottom:16px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-kicker{margin:0!important;padding:8px 13px!important;white-space:nowrap!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{display:block!important;color:#f8fcff!important;font-size:clamp(17px,1.08vw,22px)!important;line-height:1.25!important;letter-spacing:-.025em!important;font-weight:900!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-body{display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(250px,.92fr)!important;gap:22px!important;align-items:stretch!important;min-height:0!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy{display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy p{margin:0!important;max-width:680px!important;color:rgba(228,243,255,.82)!important;font-size:clamp(14px,.93vw,17px)!important;line-height:1.62!important;font-weight:650!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-flow{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:9px!important;margin-top:18px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-flow span{display:inline-flex!important;align-items:center!important;height:32px!important;padding:0 12px!important;border-radius:999px!important;background:rgba(255,255,255,.045)!important;color:rgba(234,248,255,.86)!important;font-size:11px!important;font-weight:850!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-flow i{display:block!important;width:18px!important;height:1px!important;background:linear-gradient(90deg,transparent,rgba(91,228,255,.65),transparent)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-panel{display:grid!important;gap:10px!important;align-content:center!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row{display:grid!important;grid-template-columns:76px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;padding:14px 15px!important;border-radius:15px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(111,229,255,.09)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row.is-active{background:linear-gradient(135deg,rgba(23,211,255,.16),rgba(53,92,255,.08))!important;border-color:rgba(94,231,255,.20)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row b{color:#fff!important;font-size:13px!important;font-weight:950!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row span{color:rgba(220,238,255,.68)!important;font-size:12px!important;line-height:1.42!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-footer{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;border-top:1px solid rgba(111,229,255,.10)!important;padding-top:14px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-footer span{display:inline-flex!important;align-items:center!important;height:30px!important;padding:0 11px!important;border-radius:999px!important;background:rgba(27,214,255,.08)!important;color:rgba(220,245,255,.84)!important;font-size:11px!important;font-weight:800!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-main,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-summary{display:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-bridge{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:min(980px,82vw)!important;
  transform:translate(-50%,-50%) scale(var(--spx-hero-how-bridge-scale,.982))!important;
  opacity:var(--spx-hero-how-bridge-opacity,0)!important;
  filter:blur(var(--spx-hero-how-bridge-blur,8px))!important;
  z-index:2!important;
  text-align:center!important;
  pointer-events:none!important;
  color:#fff!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-bridge .eyebrow{display:inline-flex!important;margin-bottom:14px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-bridge h2{margin:0!important;font-size:clamp(42px,5.2vw,84px)!important;line-height:.96!important;letter-spacing:-.06em!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-bridge p{margin:18px auto 0!important;max-width:650px!important;color:rgba(220,238,255,.74)!important;font-size:clamp(15px,1.05vw,20px)!important;line-height:1.55!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52{
  margin-top:-82vh!important;
  padding-top:34vh!important;
  opacity:var(--spx-how-underlay-opacity)!important;
  transform:none!important;
  filter:none!important;
}
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-head,
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-track{opacity:var(--spx-how-underlay-opacity)!important;transform:none!important;filter:none!important;}
@media (min-width:981px) and (max-width:1500px){
  html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{left:88px!important;right:18px!important;gap:14px!important;padding:24px 26px!important;}
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-body{grid-template-columns:minmax(0,1fr) minmax(220px,.86fr)!important;gap:16px!important;}
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{font-size:clamp(15px,1.15vw,20px)!important;}
}


/* A8.58ZZB: space background + How Spixor works left-aligned step scroller rework. */
html .spx-hero-v26[data-hero-scrollstory]::before{
  background:
    radial-gradient(ellipse at 18% 18%, rgba(52,205,255,.10), transparent 34%),
    radial-gradient(ellipse at 78% 24%, rgba(75,112,255,.08), transparent 38%),
    linear-gradient(118deg, transparent 0%, rgba(76,209,255,.035) 43%, transparent 62%)!important;
  opacity:.82!important;
  filter:none!important;
}
html .spx-hero-v26[data-hero-scrollstory]::after{
  background:
    radial-gradient(circle at 8% 16%, rgba(255,255,255,.46) 0 1px, transparent 1.45px),
    radial-gradient(circle at 26% 74%, rgba(134,226,255,.42) 0 1px, transparent 1.45px),
    radial-gradient(circle at 61% 38%, rgba(255,255,255,.36) 0 1px, transparent 1.4px),
    radial-gradient(circle at 88% 68%, rgba(119,208,255,.34) 0 1px, transparent 1.4px),
    linear-gradient(180deg,rgba(2,8,18,.04),rgba(2,8,18,.58))!important;
  background-size: 190px 190px, 270px 270px, 230px 230px, 320px 320px, 100% 100%!important;
  opacity:.82!important;
}
html .spx-hero-v26[data-hero-scrollstory] .v26-cloud{
  border-radius:44% 56% 62% 38% / 42% 48% 52% 58%!important;
  filter:blur(54px)!important;
  opacity:.16!important;
  transform:scaleX(1.85) rotate(-9deg)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .cloud-a{width:18vw!important;height:7vw!important;left:5%!important;top:25%!important;background:rgba(41,210,255,.16)!important;}
html .spx-hero-v26[data-hero-scrollstory] .cloud-b{width:20vw!important;height:8vw!important;right:9%!important;top:14%!important;background:rgba(73,105,255,.14)!important;}
html .spx-hero-v26[data-hero-scrollstory] .cloud-c{width:24vw!important;height:8vw!important;left:46%!important;bottom:12%!important;background:rgba(25,145,255,.11)!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-light-trace{opacity:.30!important;width:36vw!important;}

html .spx-why-section.spx-why-v52{position:relative!important;overflow:hidden!important;}
html .spx-why-section.spx-why-v52 .spx-why52-shell{width:min(1180px, calc(100% - 48px))!important;margin:0 auto!important;}
html .spx-why-section.spx-why-v52 .spx-why52-head{
  text-align:left!important;
  margin:0 0 clamp(30px,5vh,58px)!important;
  max-width:760px!important;
  align-items:flex-start!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-head .eyebrow{margin-left:0!important;}
html .spx-why-section.spx-why-v52 .spx-why52-head h2{max-width:720px!important;text-align:left!important;letter-spacing:-.06em!important;}
html .spx-why-section.spx-why-v52 .spx-why52-head p{max-width:680px!important;margin:14px 0 0!important;text-align:left!important;color:rgba(220,238,255,.72)!important;}
html .spx-why-section.spx-why-v52 .spx-why52-track{height:clamp(1700px,220vh,2300px)!important;}
html .spx-why-section.spx-why-v52 .spx-why52-sticky{
  display:grid!important;
  grid-template-columns:minmax(330px,.88fr) minmax(520px,1.12fr)!important;
  gap:clamp(30px,5vw,76px)!important;
  align-items:center!important;
  min-height:100svh!important;
  padding:clamp(40px,7vh,84px) 0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-copy{position:relative!important;display:block!important;min-width:0!important;z-index:4!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin:0 0 18px!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav button{
  appearance:none!important;
  border:1px solid rgba(111,229,255,.12)!important;
  background:rgba(255,255,255,.035)!important;
  color:rgba(220,238,255,.70)!important;
  border-radius:18px!important;
  min-height:62px!important;
  padding:12px 11px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:3px!important;
  cursor:pointer!important;
  transition:background .25s ease,border-color .25s ease,transform .25s ease,color .25s ease!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav button b{font-size:12px!important;letter-spacing:.15em!important;color:#27d7ff!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button span{font-size:13px!important;font-weight:900!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button.is-active{
  background:linear-gradient(135deg,rgba(27,214,255,.16),rgba(64,96,255,.08))!important;
  border-color:rgba(91,228,255,.34)!important;
  color:#fff!important;
  transform:translateY(-2px)!important;
}
html .spx-why-section.spx-why-v52 .why52-step{
  position:absolute!important;
  inset:auto 0 auto 0!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(0,18px,0) scale(.985)!important;
  transition:opacity .35s ease,transform .35s ease,filter .35s ease,visibility .35s ease!important;
  min-height:390px!important;
  padding:clamp(22px,2.4vw,34px)!important;
  border-radius:30px!important;
  background:linear-gradient(145deg,rgba(6,13,29,.84),rgba(4,8,19,.94))!important;
  border:1px solid rgba(111,229,255,.10)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(10px)!important;
}
html .spx-why-section.spx-why-v52 .why52-step.is-active{
  position:relative!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
html .spx-why-section.spx-why-v52 .why52-step > span{display:inline-flex!important;margin-bottom:14px!important;color:#59e5ff!important;font-size:12px!important;font-weight:950!important;letter-spacing:.14em!important;text-transform:uppercase!important;}
html .spx-why-section.spx-why-v52 .why52-step h3{font-size:clamp(30px,3.1vw,52px)!important;line-height:1.02!important;letter-spacing:-.055em!important;margin:0 0 14px!important;color:#fff!important;}
html .spx-why-section.spx-why-v52 .why52-step p{font-size:clamp(15px,1vw,18px)!important;line-height:1.58!important;color:rgba(220,238,255,.74)!important;max-width:520px!important;margin:0 0 22px!important;}
html .spx-why-section.spx-why-v52 .why52-step ul{display:grid!important;gap:9px!important;margin:0!important;padding:0!important;list-style:none!important;}
html .spx-why-section.spx-why-v52 .why52-step li{position:relative!important;padding-left:22px!important;color:rgba(234,248,255,.80)!important;font-weight:750!important;}
html .spx-why-section.spx-why-v52 .why52-step li::before{content:""!important;position:absolute!important;left:0!important;top:.72em!important;width:9px!important;height:9px!important;border-radius:50%!important;background:#24d9ff!important;box-shadow:0 0 18px rgba(36,217,255,.55)!important;}
html .spx-why-section.spx-why-v52 .why52-progress{display:block!important;height:3px!important;border-radius:999px!important;margin:0 0 18px!important;background:rgba(255,255,255,.08)!important;overflow:hidden!important;}
html .spx-why-section.spx-why-v52 .why52-progress::before{content:""!important;display:block!important;height:100%!important;width:calc(var(--step-progress,0) * 100%)!important;background:linear-gradient(90deg,#23d9ff,#6376ff)!important;border-radius:inherit!important;}
html .spx-why-section.spx-why-v52 .spx-why52-stage{min-height:clamp(520px,72vh,760px)!important;border-radius:34px!important;background:linear-gradient(145deg,rgba(5,12,27,.72),rgba(3,7,16,.88))!important;border:1px solid rgba(111,229,255,.10)!important;box-shadow:0 35px 110px rgba(0,0,0,.26)!important;overflow:visible!important;}
html .spx-why-section.spx-why-v52 .why52-visual{transition:opacity .38s ease,transform .38s ease,filter .38s ease!important;}
@media (max-width: 980px){
  html .spx-why-section.spx-why-v52 .spx-why52-sticky{display:block!important;padding:40px 0!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;margin-bottom:16px!important;}
  html .spx-why-section.spx-why-v52 .why52-step-nav{display:none!important;}
}


/* A8.58ZZC: keep How Spixor works pinned, left-aligned, and fix blurry What handoff. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content,
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"],
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] *{
  filter:none!important;
  text-shadow:none!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:geometricPrecision!important;
}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{
  opacity:1!important;
  backdrop-filter:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content{
  transform:translate3d(0,var(--spx-hero-view-new-y,0),0) scale(var(--spx-hero-view-new-scale,1))!important;
  filter:none!important;
}

html .spx-why-section.spx-why-v52{
  overflow:visible!important;
  isolation:isolate!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-shell{
  width:min(1240px, calc(100% - 56px))!important;
  margin:0 auto!important;
}
html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{
  display:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  position:relative!important;
  height:clamp(2050px, 270vh, 3100px)!important;
  margin-top:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  min-height:100svh!important;
  display:grid!important;
  grid-template-columns:minmax(390px,.92fr) minmax(520px,1.08fr)!important;
  gap:clamp(34px,5vw,82px)!important;
  align-items:center!important;
  padding:clamp(82px,11vh,118px) 0 clamp(54px,8vh,84px)!important;
  transform:none!important;
  z-index:3!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-copy{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-height:clamp(560px,74vh,760px)!important;
  min-width:0!important;
  z-index:5!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  display:block!important;
  text-align:left!important;
  margin:0 0 clamp(18px,2.2vh,28px)!important;
  max-width:700px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head .eyebrow{
  display:inline-flex!important;
  margin:0 0 14px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{
  margin:0!important;
  max-width:720px!important;
  text-align:left!important;
  font-size:clamp(44px,5.2vw,82px)!important;
  line-height:.96!important;
  letter-spacing:-.065em!important;
  color:#fff!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  margin:16px 0 0!important;
  max-width:620px!important;
  text-align:left!important;
  color:rgba(220,238,255,.74)!important;
  font-size:clamp(15px,1.04vw,19px)!important;
  line-height:1.56!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav{
  order:2!important;
  margin:0 0 14px!important;
}
html .spx-why-section.spx-why-v52 .why52-step{
  order:3!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  min-height:clamp(320px,39vh,420px)!important;
  padding:clamp(20px,2vw,30px)!important;
  border-radius:28px!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,18px,0) scale(.986)!important;
  transition:opacity .42s ease, transform .42s ease, visibility .42s ease!important;
  backdrop-filter:none!important;
}
html .spx-why-section.spx-why-v52 .why52-step.is-active,
html .spx-why-section.spx-why-v52 .why52-step[data-spx-active="1"]{
  position:relative!important;
  bottom:auto!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
html .spx-why-section.spx-why-v52 .why52-step h3{
  font-size:clamp(30px,2.8vw,48px)!important;
  max-width:620px!important;
}
html .spx-why-section.spx-why-v52 .why52-step p{
  max-width:640px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  min-height:clamp(560px,76vh,780px)!important;
  align-self:center!important;
}
@media (max-width: 980px){
  html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{display:block!important;text-align:left!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-story-head{display:none!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-sticky,
  html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
  html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
    position:relative!important;
    display:block!important;
    min-height:0!important;
    padding:36px 0!important;
  }
  html .spx-why-section.spx-why-v52 .spx-why52-copy{min-height:0!important;display:block!important;}
  html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;margin-bottom:16px!important;}
}


/* A8.58ZZD: How Spixor works left-aligned pinned story fix. */
html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{
  display:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  height:clamp(2100px, 285vh, 3300px)!important;
  margin-top:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  position:sticky!important;
  top:0!important;
  min-height:100svh!important;
  display:grid!important;
  grid-template-columns:minmax(430px,.92fr) minmax(540px,1.08fr)!important;
  gap:clamp(40px,5.2vw,92px)!important;
  align-items:start!important;
  justify-content:stretch!important;
  padding:clamp(92px,11vh,124px) 0 clamp(46px,6vh,72px)!important;
  transform:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-copy{
  align-self:start!important;
  justify-content:flex-start!important;
  min-height:0!important;
  height:auto!important;
  padding-top:0!important;
  text-align:left!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  display:block!important;
  text-align:left!important;
  align-self:stretch!important;
  max-width:720px!important;
  width:100%!important;
  margin:0 0 20px!important;
  padding:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head .eyebrow{
  margin-left:0!important;
  margin-right:0!important;
  justify-content:flex-start!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2,
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  text-align:left!important;
  margin-left:0!important;
  margin-right:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{
  font-size:clamp(44px,4.65vw,76px)!important;
  max-width:700px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  max-width:640px!important;
  margin-top:14px!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav{
  order:2!important;
  width:100%!important;
  max-width:700px!important;
  margin:0 0 14px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav button{
  min-height:58px!important;
  text-align:left!important;
  justify-content:flex-start!important;
}
html .spx-why-section.spx-why-v52 .why52-step{
  order:3!important;
  position:absolute!important;
  left:0!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  max-width:700px!important;
  min-height:0!important;
  padding:clamp(22px,2vw,30px)!important;
  margin:0!important;
  border-radius:28px!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,16px,0) scale(.988)!important;
}
html .spx-why-section.spx-why-v52 .why52-step.is-active,
html .spx-why-section.spx-why-v52 .why52-step[data-spx-active="1"]{
  position:relative!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
html .spx-why-section.spx-why-v52 .why52-step h3{
  font-size:clamp(28px,2.45vw,44px)!important;
  line-height:1.04!important;
  max-width:620px!important;
}
html .spx-why-section.spx-why-v52 .why52-step p,
html .spx-why-section.spx-why-v52 .why52-step ul{
  max-width:640px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  align-self:start!important;
  min-height:clamp(560px,76vh,780px)!important;
  margin-top:0!important;
}
@media (max-width: 980px){
  html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{display:block!important;text-align:left!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-sticky,
  html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
  html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{position:relative!important;display:block!important;min-height:0!important;padding:36px 0!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-story-head{display:none!important;}
  html .spx-why-section.spx-why-v52 .why52-step-nav{display:none!important;}
  html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;max-width:none!important;margin-bottom:16px!important;}
}


/* A8.58ZZE: actual How Spixor works copy/layout correction */
html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{
  display:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-shell{
  max-width:min(1500px, calc(100vw - 56px))!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  height:clamp(2200px, 300vh, 3450px)!important;
  margin-top:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  position:sticky!important;
  top:0!important;
  min-height:100svh!important;
  display:grid!important;
  grid-template-columns:minmax(440px, .88fr) minmax(560px, 1.12fr)!important;
  gap:clamp(42px, 5vw, 88px)!important;
  align-items:start!important;
  padding:clamp(84px, 10vh, 118px) 0 clamp(52px, 6vh, 74px)!important;
  transform:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-copy{
  align-self:start!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:0!important;
  min-height:0!important;
  height:auto!important;
  width:100%!important;
  max-width:720px!important;
  padding:0!important;
  margin:0!important;
  text-align:left!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  display:block!important;
  width:100%!important;
  max-width:720px!important;
  margin:0 0 18px!important;
  padding:0!important;
  text-align:left!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head .eyebrow{
  display:inline-flex!important;
  width:auto!important;
  margin:0 0 18px!important;
  align-self:flex-start!important;
  justify-content:flex-start!important;
  text-align:left!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{
  text-align:left!important;
  margin:0!important;
  max-width:700px!important;
  font-size:clamp(42px, 4.2vw, 70px)!important;
  line-height:.98!important;
  letter-spacing:-.065em!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  text-align:left!important;
  margin:18px 0 0!important;
  max-width:660px!important;
  font-size:clamp(16px, 1.05vw, 19px)!important;
  line-height:1.62!important;
  color:rgba(219,238,255,.76)!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav{
  width:100%!important;
  max-width:700px!important;
  margin:6px 0 14px!important;
  display:grid!important;
  grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  gap:10px!important;
  order:2!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav button{
  min-height:58px!important;
  padding:12px 13px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  text-align:left!important;
  border-radius:18px!important;
}
html .spx-why-section.spx-why-v52 .why52-step{
  order:3!important;
  position:absolute!important;
  left:0!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  max-width:700px!important;
  min-height:0!important;
  margin:0!important;
  padding:clamp(22px, 2vw, 30px)!important;
  border-radius:26px!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,14px,0) scale(.99)!important;
  transition:opacity .42s ease, transform .42s ease, visibility .42s ease!important;
}
html .spx-why-section.spx-why-v52 .why52-step.is-active,
html .spx-why-section.spx-why-v52 .why52-step[data-spx-active="1"]{
  position:relative!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
html .spx-why-section.spx-why-v52 .why52-step > span{
  margin-bottom:12px!important;
}
html .spx-why-section.spx-why-v52 .why52-step h3{
  margin:0 0 12px!important;
  max-width:620px!important;
  font-size:clamp(26px, 2.25vw, 42px)!important;
  line-height:1.05!important;
  letter-spacing:-.045em!important;
}
html .spx-why-section.spx-why-v52 .why52-step p{
  margin:0 0 18px!important;
  max-width:640px!important;
  font-size:clamp(15px, 1vw, 18px)!important;
  line-height:1.56!important;
  color:rgba(221,239,255,.74)!important;
}
html .spx-why-section.spx-why-v52 .why52-step ul{
  max-width:640px!important;
  margin:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  align-self:start!important;
  min-height:clamp(560px, 74vh, 770px)!important;
  margin-top:0!important;
}
@media (max-width: 980px){
  html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{display:block!important;text-align:left!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-sticky,
  html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
  html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{position:relative!important;display:block!important;min-height:0!important;padding:36px 0!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-story-head{display:none!important;}
  html .spx-why-section.spx-why-v52 .why52-step-nav{display:none!important;}
  html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;max-width:none!important;margin-bottom:16px!important;}
}


/* A8.58ZZF: remove duplicate centered How block and rebuild the real pinned How story. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-bridge{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;}
html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{display:none!important;visibility:hidden!important;opacity:0!important;height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;}
html .spx-why-section.spx-why-v52{position:relative!important;overflow:hidden!important;isolation:isolate!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:-72vh!important;padding-top:42vh!important;opacity:var(--spx-how-underlay-opacity,1)!important;transform:scale(var(--spx-how-underlay-scale,1))!important;filter:blur(var(--spx-how-underlay-blur,0))!important;transition:none!important;will-change:opacity,transform,filter!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-track{opacity:1!important;}
html .spx-why-section.spx-why-v52 .spx-why52-shell{width:min(1240px,calc(100% - 48px))!important;margin:0 auto!important;}
html .spx-why-section.spx-why-v52 .spx-why52-track{height:clamp(1780px,238vh,2460px)!important;position:relative!important;}
html .spx-why-section.spx-why-v52 .spx-why52-sticky{position:sticky!important;top:0!important;min-height:100svh!important;height:100svh!important;display:grid!important;grid-template-columns:minmax(390px,.86fr) minmax(540px,1.14fr)!important;gap:clamp(34px,5vw,78px)!important;align-items:center!important;padding:clamp(54px,8vh,92px) 0!important;}
html .spx-why-section.spx-why-v52 .spx-why52-copy{position:relative!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:center!important;min-width:0!important;z-index:4!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{display:block!important;text-align:left!important;margin:0 0 18px!important;max-width:680px!important;opacity:1!important;visibility:visible!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head .eyebrow{display:inline-flex!important;margin:0 0 14px!important;align-self:flex-start!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{margin:0!important;text-align:left!important;max-width:660px!important;color:#fff!important;font-size:clamp(42px,4.7vw,72px)!important;line-height:.94!important;letter-spacing:-.065em!important;font-weight:950!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{margin:16px 0 0!important;text-align:left!important;max-width:650px!important;color:rgba(222,238,255,.75)!important;font-size:clamp(15px,1vw,18px)!important;line-height:1.58!important;font-weight:650!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:18px 0 14px!important;max-width:650px!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button{appearance:none!important;border:1px solid rgba(117,229,255,.12)!important;background:rgba(255,255,255,.035)!important;color:rgba(220,238,255,.70)!important;border-radius:17px!important;min-height:62px!important;padding:12px 13px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:3px!important;cursor:pointer!important;transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button b{font-size:11px!important;letter-spacing:.14em!important;color:rgba(116,232,255,.92)!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button span{font-size:13px!important;font-weight:900!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button.is-active{background:linear-gradient(135deg,rgba(24,213,255,.18),rgba(65,102,255,.10))!important;border-color:rgba(116,232,255,.32)!important;color:#fff!important;transform:translateY(-1px)!important;}
html .spx-why-section.spx-why-v52 .why52-step-stack{position:relative!important;min-height:clamp(338px,34vh,430px)!important;max-width:650px!important;}
html .spx-why-section.spx-why-v52 .why52-step{position:absolute!important;inset:0!important;margin:0!important;padding:clamp(22px,2.2vw,32px)!important;border-radius:26px!important;background:linear-gradient(145deg,rgba(7,17,31,.88),rgba(5,9,18,.96) 58%,rgba(8,30,48,.78))!important;border:1px solid rgba(116,232,255,.13)!important;box-shadow:0 28px 90px rgba(0,0,0,.24)!important;overflow:hidden!important;opacity:0!important;visibility:hidden!important;transition:none!important;}
html .spx-why-section.spx-why-v52 .why52-step::before{content:""!important;position:absolute!important;inset:-20%!important;background:linear-gradient(120deg,rgba(24,213,255,.12),transparent 38%,rgba(67,98,255,.10))!important;opacity:.7!important;pointer-events:none!important;}
html .spx-why-section.spx-why-v52 .why52-step > *{position:relative!important;}
html .spx-why-section.spx-why-v52 .why52-step > span{display:inline-flex!important;align-items:center!important;margin:0 0 12px!important;color:#65e8ff!important;font-size:11px!important;font-weight:950!important;letter-spacing:.14em!important;text-transform:uppercase!important;}
html .spx-why-section.spx-why-v52 .why52-progress{display:block!important;width:100%!important;height:3px!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;margin:0 0 18px!important;overflow:hidden!important;}
html .spx-why-section.spx-why-v52 .why52-progress::after{content:""!important;display:block!important;width:calc(var(--step-progress,0) * 100%)!important;height:100%!important;background:linear-gradient(90deg,#18d5ff,#7b8cff)!important;border-radius:inherit!important;}
html .spx-why-section.spx-why-v52 .why52-step h3{margin:0 0 12px!important;color:#fff!important;font-size:clamp(24px,2vw,36px)!important;line-height:1.04!important;letter-spacing:-.045em!important;font-weight:950!important;}
html .spx-why-section.spx-why-v52 .why52-step p{margin:0 0 16px!important;color:rgba(222,238,255,.76)!important;font-size:clamp(14px,.95vw,17px)!important;line-height:1.55!important;max-width:580px!important;}
html .spx-why-section.spx-why-v52 .why52-step ul{display:grid!important;gap:8px!important;margin:0!important;padding:0!important;list-style:none!important;}
html .spx-why-section.spx-why-v52 .why52-step li{position:relative!important;padding-left:22px!important;color:rgba(234,246,255,.84)!important;font-size:13px!important;line-height:1.42!important;font-weight:700!important;}
html .spx-why-section.spx-why-v52 .why52-step li::before{content:""!important;position:absolute!important;left:0!important;top:.48em!important;width:8px!important;height:8px!important;border-radius:99px!important;background:#18d5ff!important;box-shadow:0 0 16px rgba(24,213,255,.55)!important;}
html .spx-why-section.spx-why-v52 .spx-why52-stage{position:relative!important;min-height:clamp(520px,68vh,760px)!important;border:0!important;background:transparent!important;overflow:visible!important;}
html .spx-why-section.spx-why-v52 .why52-network{position:absolute!important;inset:4% -6% 0 -6%!important;opacity:.32!important;z-index:0!important;}
html .spx-why-section.spx-why-v52 .why52-visuals{position:absolute!important;inset:0!important;z-index:2!important;}
html .spx-why-section.spx-why-v52 .why52-visual{position:absolute!important;inset:clamp(18px,3vh,36px) -22vw clamp(24px,4vh,42px) 0!important;display:block!important;margin:0!important;opacity:0!important;visibility:visible!important;transition:none!important;filter:none!important;}
html .spx-why-section.spx-why-v52 .why52-visual img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:right center!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;}
html .spx-why-section.spx-why-v52 .why52-visual figcaption{position:absolute!important;left:clamp(18px,3vw,42px)!important;bottom:clamp(18px,3vw,42px)!important;max-width:300px!important;padding:14px 16px!important;border-radius:18px!important;background:rgba(3,10,20,.76)!important;border:1px solid rgba(116,232,255,.14)!important;backdrop-filter:blur(12px)!important;}
html .spx-why-section.spx-why-v52 .why52-visual figcaption b{display:block!important;color:#fff!important;font-size:15px!important;}
html .spx-why-section.spx-why-v52 .why52-visual figcaption span{display:block!important;margin-top:4px!important;color:rgba(220,238,255,.72)!important;font-size:12px!important;line-height:1.4!important;}
@media (max-width:980px){
  html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:0!important;padding-top:0!important;opacity:1!important;filter:none!important;transform:none!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-sticky{position:relative!important;height:auto!important;min-height:0!important;display:block!important;padding:64px 0!important;}
  html .spx-why-section.spx-why-v52 .why52-step-stack{min-height:0!important;display:grid!important;gap:14px!important;}
  html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-stage{margin-top:28px!important;min-height:360px!important;}
}


/* A8.58ZZG: real hero handoff into the How story — no empty gap, no bottom slide. */
html .spx-hero-v26[data-hero-scrollstory]{
  --spx-hero-how-preview-opacity:0;
  --spx-hero-how-preview-blur:10px;
  --spx-hero-how-preview-scale:.982;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:min(1240px,calc(100% - 64px))!important;
  display:grid!important;
  grid-template-columns:minmax(420px,.92fr) minmax(480px,1.08fr)!important;
  gap:clamp(32px,5vw,72px)!important;
  align-items:center!important;
  z-index:3!important;
  color:#fff!important;
  opacity:var(--spx-hero-how-preview-opacity)!important;
  transform:translate3d(-50%,-50%,0) scale(var(--spx-hero-how-preview-scale))!important;
  filter:blur(var(--spx-hero-how-preview-blur))!important;
  pointer-events:none!important;
  will-change:opacity,transform,filter!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-copy{text-align:left!important;max-width:660px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-copy .eyebrow{display:inline-flex!important;margin:0 0 16px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview h2{margin:0!important;color:#fff!important;font-size:clamp(42px,4.9vw,76px)!important;line-height:.94!important;letter-spacing:-.065em!important;font-weight:950!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview p{margin:18px 0 0!important;max-width:630px!important;color:rgba(224,240,255,.76)!important;font-size:clamp(15px,1.05vw,19px)!important;line-height:1.6!important;font-weight:650!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:24px 0 14px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-steps span{min-height:62px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:4px!important;padding:12px 13px!important;border-radius:17px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(117,229,255,.13)!important;color:rgba(220,238,255,.78)!important;font-size:13px!important;font-weight:900!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-steps b{color:#6be8ff!important;font-size:11px!important;letter-spacing:.14em!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-card{margin:0!important;padding:20px 22px!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(7,17,31,.86),rgba(5,9,18,.94) 58%,rgba(8,30,48,.74))!important;border:1px solid rgba(116,232,255,.13)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-card strong{display:block!important;color:#fff!important;font-size:clamp(20px,1.45vw,30px)!important;line-height:1.12!important;letter-spacing:-.035em!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-card em{display:block!important;margin-top:10px!important;color:rgba(222,238,255,.73)!important;font-size:14px!important;line-height:1.5!important;font-style:normal!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-panel{display:grid!important;gap:14px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-panel span{display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;gap:14px!important;align-items:center!important;min-height:112px!important;padding:18px 20px!important;border-radius:24px!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(116,232,255,.11)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-panel span.is-active{background:linear-gradient(135deg,rgba(24,213,255,.17),rgba(65,102,255,.09))!important;border-color:rgba(116,232,255,.30)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-panel i{grid-row:1 / span 2!important;display:grid!important;place-items:center!important;width:44px!important;height:44px!important;border-radius:999px!important;color:#03131f!important;background:#18d5ff!important;font-style:normal!important;font-weight:950!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-panel b{color:#fff!important;font-size:18px!important;line-height:1.1!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-panel small{display:block!important;color:rgba(220,238,255,.67)!important;font-size:13px!important;line-height:1.42!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:-100svh!important;padding-top:0!important;opacity:1!important;transform:none!important;filter:none!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-track{opacity:1!important;}
@media (max-width:980px){html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{display:none!important;}html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:0!important;padding-top:0!important;}}


/* A8.58ZZH: restore real How section visuals, remove duplicate handoff, slow the pinned story. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:-100svh!important;padding-top:0!important;opacity:var(--spx-how-underlay-opacity,0)!important;transform:scale(var(--spx-how-underlay-scale,.988))!important;filter:blur(var(--spx-how-underlay-blur,8px))!important;transition:none!important;will-change:opacity,transform,filter!important;}
html .spx-why-section.spx-why-v52{position:relative!important;overflow:visible!important;isolation:auto!important;background:transparent!important;background-color:transparent!important;background-image:none!important;margin-bottom:0!important;}
html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{display:none!important;visibility:hidden!important;opacity:0!important;height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;}
html .spx-why-section.spx-why-v52 .spx-why52-hero-echo{display:none!important;}
html .spx-why-section.spx-why-v52 .spx-why52-shell{width:min(1260px,calc(100% - 48px))!important;margin:0 auto!important;}
html .spx-why-section.spx-why-v52 .spx-why52-track{height:clamp(2600px,355vh,3700px)!important;position:relative!important;}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{position:sticky!important;top:0!important;min-height:100svh!important;height:100svh!important;display:grid!important;grid-template-columns:minmax(390px,.88fr) minmax(520px,1.12fr)!important;gap:clamp(34px,5vw,76px)!important;align-items:center!important;padding:clamp(48px,7.5vh,86px) 0!important;}
html .spx-why-section.spx-why-v52 .spx-why52-copy{position:relative!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:center!important;min-width:0!important;z-index:4!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{display:block!important;text-align:left!important;margin:0 0 18px!important;max-width:680px!important;opacity:1!important;visibility:visible!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head .eyebrow{display:inline-flex!important;margin:0 0 14px!important;align-self:flex-start!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{margin:0!important;text-align:left!important;max-width:650px!important;color:#fff!important;font-size:clamp(42px,4.5vw,70px)!important;line-height:.96!important;letter-spacing:-.06em!important;font-weight:950!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{margin:16px 0 0!important;text-align:left!important;max-width:635px!important;color:rgba(222,238,255,.76)!important;font-size:clamp(15px,1vw,18px)!important;line-height:1.58!important;font-weight:650!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:18px 0 14px!important;max-width:640px!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button{appearance:none!important;border:1px solid rgba(117,229,255,.12)!important;background:rgba(255,255,255,.035)!important;color:rgba(220,238,255,.70)!important;border-radius:17px!important;min-height:62px!important;padding:12px 13px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:3px!important;cursor:pointer!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button b{font-size:11px!important;letter-spacing:.14em!important;color:rgba(116,232,255,.92)!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button span{font-size:13px!important;font-weight:900!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button.is-active{background:linear-gradient(135deg,rgba(24,213,255,.18),rgba(65,102,255,.10))!important;border-color:rgba(116,232,255,.32)!important;color:#fff!important;}
html .spx-why-section.spx-why-v52 .why52-step-stack{position:relative!important;min-height:clamp(338px,34vh,430px)!important;max-width:640px!important;}
html .spx-why-section.spx-why-v52 .why52-step{position:absolute!important;inset:0!important;margin:0!important;padding:clamp(22px,2.2vw,32px)!important;border-radius:26px!important;background:linear-gradient(145deg,rgba(7,17,31,.88),rgba(5,9,18,.96) 58%,rgba(8,30,48,.78))!important;border:1px solid rgba(116,232,255,.13)!important;box-shadow:0 28px 90px rgba(0,0,0,.22)!important;overflow:hidden!important;opacity:0!important;visibility:hidden!important;transition:none!important;}
html .spx-why-section.spx-why-v52 .why52-step > *{position:relative!important;}
html .spx-why-section.spx-why-v52 .why52-step > span{display:inline-flex!important;margin:0 0 12px!important;color:#65e8ff!important;font-size:11px!important;font-weight:950!important;letter-spacing:.14em!important;text-transform:uppercase!important;}
html .spx-why-section.spx-why-v52 .why52-progress{display:block!important;width:100%!important;height:3px!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;margin:0 0 18px!important;overflow:hidden!important;}
html .spx-why-section.spx-why-v52 .why52-progress::after{content:""!important;display:block!important;width:calc(var(--step-progress,0) * 100%)!important;height:100%!important;background:linear-gradient(90deg,#18d5ff,#7b8cff)!important;border-radius:inherit!important;}
html .spx-why-section.spx-why-v52 .why52-step h3{margin:0 0 12px!important;color:#fff!important;font-size:clamp(24px,2vw,36px)!important;line-height:1.04!important;letter-spacing:-.045em!important;font-weight:950!important;}
html .spx-why-section.spx-why-v52 .why52-step p{margin:0 0 16px!important;color:rgba(222,238,255,.76)!important;font-size:clamp(14px,.95vw,17px)!important;line-height:1.55!important;max-width:580px!important;}
html .spx-why-section.spx-why-v52 .why52-step ul{display:grid!important;gap:8px!important;margin:0!important;padding:0!important;list-style:none!important;}
html .spx-why-section.spx-why-v52 .why52-step li{position:relative!important;padding-left:22px!important;color:rgba(234,246,255,.84)!important;font-size:13px!important;line-height:1.42!important;font-weight:700!important;}
html .spx-why-section.spx-why-v52 .why52-step li::before{content:""!important;position:absolute!important;left:0!important;top:.48em!important;width:8px!important;height:8px!important;border-radius:99px!important;background:#18d5ff!important;box-shadow:0 0 16px rgba(24,213,255,.55)!important;}
html .spx-why-section.spx-why-v52 .spx-why52-stage{position:relative!important;min-height:clamp(540px,70vh,780px)!important;border:0!important;background:transparent!important;overflow:visible!important;display:block!important;opacity:1!important;visibility:visible!important;}
html .spx-why-section.spx-why-v52 .why52-network{position:absolute!important;inset:4% -6% 0 -6%!important;opacity:.28!important;z-index:0!important;}
html .spx-why-section.spx-why-v52 .why52-visuals{position:absolute!important;inset:0!important;z-index:2!important;display:block!important;}
html .spx-why-section.spx-why-v52 .why52-visual{position:absolute!important;inset:clamp(18px,3vh,36px) -22vw clamp(24px,4vh,42px) 0!important;display:block!important;margin:0!important;opacity:0!important;visibility:visible!important;transition:none!important;filter:none!important;}
html .spx-why-section.spx-why-v52 .why52-visual img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:right center!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;}
html .spx-why-section.spx-why-v52 .why52-visual figcaption{position:absolute!important;left:clamp(18px,3vw,42px)!important;bottom:clamp(18px,3vw,42px)!important;max-width:300px!important;padding:14px 16px!important;border-radius:18px!important;background:rgba(3,10,20,.76)!important;border:1px solid rgba(116,232,255,.14)!important;backdrop-filter:blur(12px)!important;}
@media (max-width:980px){html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:0!important;padding-top:0!important;opacity:1!important;filter:none!important;transform:none!important;}html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}html .spx-why-section.spx-why-v52 .spx-why52-sticky{position:relative!important;height:auto!important;min-height:0!important;display:block!important;padding:64px 0!important;}html .spx-why-section.spx-why-v52 .why52-step-stack{min-height:0!important;display:grid!important;gap:14px!important;}html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;}html .spx-why-section.spx-why-v52 .spx-why52-stage{margin-top:28px!important;min-height:360px!important;}}


/* A8.58ZZI: restore visible hero-to-How handoff with right visuals, remove empty gap. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{display:none!important;opacity:0!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:min(1240px,calc(100% - 64px))!important;
  min-height:min(720px,82svh)!important;
  transform:translate(-50%,-50%) scale(var(--spx-hero-how-preview-scale,.985))!important;
  display:grid!important;
  grid-template-columns:minmax(410px,.9fr) minmax(520px,1.1fr)!important;
  gap:clamp(34px,5vw,76px)!important;
  align-items:center!important;
  z-index:7!important;
  opacity:var(--spx-hero-how-preview-opacity,0)!important;
  filter:blur(var(--spx-hero-how-preview-blur,8px))!important;
  visibility:visible!important;
  pointer-events:none!important;
  transition:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-copy{text-align:left!important;max-width:660px!important;align-self:center!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-copy .eyebrow{display:inline-flex!important;margin:0 0 16px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview h2{margin:0!important;color:#fff!important;font-size:clamp(42px,4.9vw,74px)!important;line-height:.95!important;letter-spacing:-.065em!important;font-weight:950!important;text-align:left!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview p{margin:18px 0 0!important;max-width:640px!important;color:rgba(224,240,255,.76)!important;font-size:clamp(15px,1.05vw,19px)!important;line-height:1.6!important;font-weight:650!important;text-align:left!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:24px 0 14px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-steps span{min-height:62px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:4px!important;padding:12px 13px!important;border-radius:17px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(117,229,255,.13)!important;color:rgba(220,238,255,.78)!important;font-size:13px!important;font-weight:900!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-steps span.is-active{background:linear-gradient(135deg,rgba(24,213,255,.17),rgba(65,102,255,.09))!important;border-color:rgba(116,232,255,.30)!important;color:#fff!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-steps b{color:#6be8ff!important;font-size:11px!important;letter-spacing:.14em!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-card{margin:0!important;padding:20px 22px!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(7,17,31,.86),rgba(5,9,18,.94) 58%,rgba(8,30,48,.74))!important;border:1px solid rgba(116,232,255,.13)!important;box-shadow:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-card strong{display:block!important;color:#fff!important;font-size:clamp(20px,1.45vw,30px)!important;line-height:1.12!important;letter-spacing:-.035em!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-card em{display:block!important;margin-top:10px!important;color:rgba(222,238,255,.73)!important;font-size:14px!important;line-height:1.5!important;font-style:normal!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-stage{position:relative!important;min-height:clamp(520px,68vh,740px)!important;overflow:visible!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-visual{position:absolute!important;inset:clamp(18px,3vh,34px) -18vw clamp(22px,4vh,40px) 0!important;margin:0!important;opacity:0!important;transform:translate3d(24px,16px,0) scale(.985)!important;filter:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-visual.is-active{opacity:1!important;transform:translate3d(0,0,0) scale(1)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-visual img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:right center!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-visual figcaption{position:absolute!important;left:clamp(18px,3vw,42px)!important;bottom:clamp(18px,3vw,42px)!important;max-width:300px!important;padding:14px 16px!important;border-radius:18px!important;background:rgba(3,10,20,.76)!important;border:1px solid rgba(116,232,255,.14)!important;backdrop-filter:blur(12px)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-visual figcaption b{display:block!important;color:#fff!important;font-size:16px!important;margin-bottom:5px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-visual figcaption span{display:block!important;color:rgba(222,238,255,.70)!important;font-size:12px!important;line-height:1.38!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:-16vh!important;padding-top:16vh!important;opacity:1!important;transform:none!important;filter:none!important;background:transparent!important;background-color:transparent!important;background-image:none!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-track{opacity:1!important;}
html .spx-why-section.spx-why-v52{margin-bottom:0!important;}
html .spx-why-section.spx-why-v52 .spx-why52-track{height:clamp(2260px,305vh,3200px)!important;}
html .spx-why-section.spx-why-v52 .spx-why52-sticky{padding-top:clamp(40px,7vh,74px)!important;padding-bottom:clamp(40px,7vh,74px)!important;}
@media (max-width:980px){html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{display:none!important;}html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:0!important;padding-top:0!important;}}


/* A8.58ZZK: restore proper How Spixor works pinned scroller with right visuals and no blank handoff. */
html.spx-hero-story-active .spx-why-section.spx-why-v52{
  position:relative!important;
  margin-top:0!important;
  padding-top:0!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  overflow:visible!important;
}
html.spx-how-visible-phase .spx-why-section.spx-why-v52{
  opacity:var(--spx-how-underlay-opacity,1)!important;
  filter:blur(var(--spx-how-underlay-blur,0px))!important;
  transform:scale(var(--spx-how-underlay-scale,1))!important;
}
html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{
  display:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-shell{
  width:min(1280px,calc(100% - 48px))!important;
  margin:0 auto!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  position:relative!important;
  height:clamp(2400px,410vh,3600px)!important;
  margin:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  position:sticky!important;
  top:0!important;
  min-height:100svh!important;
  height:100svh!important;
  display:grid!important;
  grid-template-columns:minmax(380px,.82fr) minmax(520px,1.18fr)!important;
  align-items:center!important;
  gap:clamp(28px,4vw,70px)!important;
  padding:clamp(88px,10vh,122px) 0 clamp(52px,7vh,82px)!important;
  transform:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-copy{
  min-height:auto!important;
  display:block!important;
  text-align:left!important;
  max-width:560px!important;
  align-self:center!important;
  padding:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  display:block!important;
  text-align:left!important;
  margin:0 0 22px!important;
  max-width:560px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head .eyebrow{
  display:inline-flex!important;
  margin:0 0 14px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{
  margin:0!important;
  color:#fff!important;
  font-size:clamp(38px,4.2vw,68px)!important;
  line-height:.96!important;
  letter-spacing:-.065em!important;
  font-weight:950!important;
  text-align:left!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  margin:18px 0 0!important;
  color:rgba(222,239,255,.76)!important;
  font-size:clamp(15px,1.05vw,19px)!important;
  line-height:1.6!important;
  font-weight:650!important;
  text-align:left!important;
  max-width:540px!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin:0 0 14px!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav button{
  min-height:58px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:4px!important;
  border:1px solid rgba(116,232,255,.14)!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.04)!important;
  color:rgba(224,239,255,.74)!important;
  padding:10px 12px!important;
  cursor:pointer!important;
  transition:background .22s ease,border-color .22s ease,transform .22s ease!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav button.is-active{
  background:linear-gradient(135deg,rgba(24,213,255,.17),rgba(65,102,255,.09))!important;
  border-color:rgba(116,232,255,.32)!important;
  color:#fff!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav b{
  color:#6be8ff!important;
  font-size:11px!important;
  letter-spacing:.14em!important;
}
html .spx-why-section.spx-why-v52 .why52-step-stack{
  position:relative!important;
  min-height:clamp(330px,38vh,430px)!important;
}
html .spx-why-section.spx-why-v52 .why52-step{
  position:absolute!important;
  inset:0!important;
  margin:0!important;
  padding:clamp(20px,2.1vw,32px)!important;
  border-radius:26px!important;
  background:linear-gradient(145deg,rgba(7,17,31,.86),rgba(5,9,18,.95) 58%,rgba(8,30,48,.72))!important;
  border:1px solid rgba(116,232,255,.12)!important;
  box-shadow:none!important;
  opacity:0!important;
  visibility:hidden!important;
  overflow:hidden!important;
  transform:translate3d(0,12px,0) scale(.988)!important;
}
html .spx-why-section.spx-why-v52 .why52-step.is-active,
html .spx-why-section.spx-why-v52 .why52-step[data-spx-active="1"]{
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
html .spx-why-section.spx-why-v52 .why52-step > span{
  display:inline-flex!important;
  margin:0 0 12px!important;
  color:#65e8ff!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
html .spx-why-section.spx-why-v52 .why52-progress{
  display:block!important;
  height:3px!important;
  margin:0 0 17px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.08)!important;
  overflow:hidden!important;
}
html .spx-why-section.spx-why-v52 .why52-progress::after{
  content:""!important;
  display:block!important;
  width:calc(var(--step-progress,0) * 100%)!important;
  height:100%!important;
  background:linear-gradient(90deg,#18d5ff,#7b8cff)!important;
}
html .spx-why-section.spx-why-v52 .why52-step h3{
  margin:0 0 12px!important;
  color:#fff!important;
  font-size:clamp(23px,1.85vw,34px)!important;
  line-height:1.05!important;
  letter-spacing:-.045em!important;
}
html .spx-why-section.spx-why-v52 .why52-step p{
  margin:0 0 15px!important;
  color:rgba(222,238,255,.76)!important;
  font-size:clamp(14px,.95vw,17px)!important;
  line-height:1.55!important;
}
html .spx-why-section.spx-why-v52 .why52-step ul{
  display:grid!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
html .spx-why-section.spx-why-v52 .why52-step li{
  position:relative!important;
  padding-left:21px!important;
  color:rgba(234,246,255,.82)!important;
  font-size:13px!important;
  line-height:1.42!important;
  font-weight:720!important;
}
html .spx-why-section.spx-why-v52 .why52-step li::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:.48em!important;
  width:8px!important;
  height:8px!important;
  border-radius:999px!important;
  background:#18d5ff!important;
  box-shadow:0 0 16px rgba(24,213,255,.55)!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  position:relative!important;
  min-height:clamp(540px,72vh,800px)!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  opacity:1!important;
  visibility:visible!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage::before{
  content:""!important;
  position:absolute!important;
  inset:4% -10% 0 -10%!important;
  background-image:linear-gradient(rgba(112,231,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(112,231,255,.08) 1px,transparent 1px)!important;
  background-size:68px 68px!important;
  mask-image:radial-gradient(circle at calc(var(--why-mx,.56) * 100%) calc(var(--why-my,.46) * 100%),#000 0%,rgba(0,0,0,.72) 34%,transparent 78%)!important;
  opacity:.38!important;
  pointer-events:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage::after{
  content:""!important;
  position:absolute!important;
  width:32vw!important;
  height:32vw!important;
  left:calc(var(--why-mx,.56) * 100% - 16vw)!important;
  top:calc(var(--why-my,.46) * 100% - 16vw)!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(24,213,255,.16),rgba(85,112,255,.08) 36%,transparent 70%)!important;
  filter:blur(22px)!important;
  opacity:.58!important;
  pointer-events:none!important;
  animation:spxWhyBreathe 4.8s ease-in-out infinite!important;
}
@keyframes spxWhyBreathe{0%,100%{opacity:.38;transform:scale(.96)}50%{opacity:.72;transform:scale(1.04)}}
html .spx-why-section.spx-why-v52 .why52-network{
  position:absolute!important;
  inset:0 -8% 0 -8%!important;
  opacity:.34!important;
  z-index:1!important;
  pointer-events:none!important;
}
html .spx-why-section.spx-why-v52 .why52-network .p{
  stroke:rgba(111,232,255,.30)!important;
  stroke-width:1.35!important;
  stroke-dasharray:18 15!important;
  animation:spxWhyDash 11s linear infinite!important;
}
html .spx-why-section.spx-why-v52 .why52-network .n{
  fill:#18d5ff!important;
  opacity:.85!important;
  filter:drop-shadow(0 0 12px rgba(24,213,255,.65))!important;
  animation:spxWhyNodePulse 3.6s ease-in-out infinite!important;
}
@keyframes spxWhyDash{to{stroke-dashoffset:-180}}
@keyframes spxWhyNodePulse{0%,100%{opacity:.45;r:4px}50%{opacity:1;r:6px}}
html .spx-why-section.spx-why-v52 .why52-float{
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  width:9px!important;height:9px!important;border-radius:50%!important;background:#18d5ff!important;box-shadow:0 0 24px rgba(24,213,255,.78)!important;
  opacity:.8!important;
  animation:spxWhyFloatDot 7s ease-in-out infinite!important;
}
html .spx-why-section.spx-why-v52 .why52-float.f1{left:18%!important;top:26%!important;}
html .spx-why-section.spx-why-v52 .why52-float.f2{right:18%!important;top:18%!important;animation-delay:-2s!important;}
html .spx-why-section.spx-why-v52 .why52-float.f3{right:10%!important;bottom:24%!important;animation-delay:-4s!important;}
@keyframes spxWhyFloatDot{0%,100%{transform:translate3d(0,0,0);opacity:.45}50%{transform:translate3d(18px,-14px,0);opacity:1}}
html .spx-why-section.spx-why-v52 .why52-visuals{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
}
html .spx-why-section.spx-why-v52 .why52-visual{
  position:absolute!important;
  inset:clamp(18px,3vh,36px) -24vw clamp(22px,4vh,44px) 0!important;
  margin:0!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(18px,14px,0) scale(.986)!important;
  transition:none!important;
  filter:none!important;
}
html .spx-why-section.spx-why-v52 .why52-visual.is-active,
html .spx-why-section.spx-why-v52 .why52-visual[data-spx-active="1"]{
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:right center!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  position:absolute!important;
  left:clamp(18px,3vw,42px)!important;
  bottom:clamp(18px,3vw,42px)!important;
  max-width:300px!important;
  padding:14px 16px!important;
  border-radius:18px!important;
  background:rgba(3,10,20,.76)!important;
  border:1px solid rgba(116,232,255,.14)!important;
  backdrop-filter:blur(12px)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption b{display:block!important;color:#fff!important;font-size:16px!important;margin-bottom:5px!important;}
html .spx-why-section.spx-why-v52 .why52-visual figcaption span{display:block!important;color:rgba(222,238,255,.70)!important;font-size:12px!important;line-height:1.38!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{
  opacity:var(--spx-hero-how-preview-opacity,0)!important;
  filter:blur(var(--spx-hero-how-preview-blur,8px))!important;
  transform:translate(-50%,-50%) scale(var(--spx-hero-how-preview-scale,.986))!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-stage{display:block!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-visual img{object-fit:contain!important;object-position:right center!important;border:0!important;box-shadow:none!important;background:transparent!important;}
@media (max-width:980px){
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-sticky{position:relative!important;display:block!important;height:auto!important;min-height:0!important;padding:64px 0!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-copy{max-width:none!important;}
  html .spx-why-section.spx-why-v52 .why52-step-stack{min-height:0!important;display:grid!important;gap:14px!important;}
  html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-stage{margin-top:28px!important;min-height:360px!important;}
}


/* A8.58ZZL: remove duplicate hero How preview and hand off to the real How section. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{
  display:none!important;
  opacity:0!important;
}
html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory]{
  position:relative!important;
  z-index:5!important;
}
html.spx-hero-story-active .spx-why-section.spx-why-v52{
  position:relative!important;
  z-index:6!important;
  margin-top:-100svh!important;
  padding-top:0!important;
  opacity:var(--spx-how-underlay-opacity,0)!important;
  transform:scale(var(--spx-how-underlay-scale,.992))!important;
  filter:blur(var(--spx-how-underlay-blur,7px))!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  transition:none!important;
  overflow:hidden!important;
}
html.spx-how-visible-phase .spx-why-section.spx-why-v52{
  pointer-events:auto!important;
}
html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-hero-echo{
  display:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-shell{
  width:min(1260px,calc(100% - 48px))!important;
  margin:0 auto!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  height:clamp(2860px,375vh,3900px)!important;
  position:relative!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  height:100svh!important;
  min-height:720px!important;
  display:grid!important;
  grid-template-columns:minmax(360px,.88fr) minmax(520px,1.12fr)!important;
  align-items:center!important;
  gap:clamp(34px,5vw,76px)!important;
  padding:clamp(54px,8vh,92px) 0!important;
  transform:none!important;
  opacity:1!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-copy{
  max-width:610px!important;
  text-align:left!important;
  margin:0!important;
  align-self:center!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{text-align:left!important;margin:0 0 22px!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head .eyebrow{display:inline-flex!important;margin:0 0 16px!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{margin:0!important;max-width:620px!important;text-align:left!important;color:#fff!important;font-size:clamp(42px,4.7vw,76px)!important;line-height:.95!important;letter-spacing:-.065em!important;font-weight:950!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{margin:18px 0 0!important;max-width:600px!important;text-align:left!important;color:rgba(224,240,255,.76)!important;font-size:clamp(15px,1.02vw,18px)!important;line-height:1.58!important;font-weight:650!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:0 0 14px!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button{min-height:58px!important;padding:11px 12px!important;border:1px solid rgba(116,232,255,.12)!important;border-radius:16px!important;background:rgba(255,255,255,.035)!important;color:rgba(220,238,255,.70)!important;text-align:left!important;cursor:pointer!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button.is-active{background:linear-gradient(135deg,rgba(24,213,255,.16),rgba(64,108,255,.08))!important;border-color:rgba(116,232,255,.34)!important;color:#fff!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav b{display:block!important;color:#6be8ff!important;font-size:11px!important;letter-spacing:.14em!important;margin-bottom:4px!important;}
html .spx-why-section.spx-why-v52 .why52-step-stack{position:relative!important;min-height:300px!important;}
html .spx-why-section.spx-why-v52 .why52-step{position:absolute!important;inset:0!important;margin:0!important;padding:20px 22px!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(7,17,31,.86),rgba(5,9,18,.94) 58%,rgba(8,30,48,.74))!important;border:1px solid rgba(116,232,255,.13)!important;box-shadow:none!important;}
html .spx-why-section.spx-why-v52 .why52-step.is-active,
html .spx-why-section.spx-why-v52 .why52-step[data-spx-active="1"]{opacity:1!important;visibility:visible!important;transform:none!important;}
html .spx-why-section.spx-why-v52 .spx-why52-stage{position:relative!important;min-height:clamp(560px,72vh,800px)!important;border:0!important;background:transparent!important;overflow:visible!important;}
html .spx-why-section.spx-why-v52 .spx-why52-stage::before{content:""!important;position:absolute!important;inset:6% -10% 4% -4%!important;background:linear-gradient(rgba(122,232,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(122,232,255,.045) 1px,transparent 1px)!important;background-size:58px 58px!important;opacity:.55!important;mask-image:radial-gradient(circle at calc(var(--why-mx,.5)*100%) calc(var(--why-my,.5)*100%),#000 0%,rgba(0,0,0,.75) 34%,transparent 78%)!important;pointer-events:none!important;}
html .spx-why-section.spx-why-v52 .spx-why52-stage::after{content:""!important;position:absolute!important;inset:14% -8% 10% 10%!important;background:radial-gradient(circle at calc(var(--why-mx,.5)*100%) calc(var(--why-my,.5)*100%),rgba(24,213,255,.18),transparent 42%)!important;opacity:.78!important;pointer-events:none!important;}
html .spx-why-section.spx-why-v52 .why52-network{position:absolute!important;inset:2% -8% 2% -8%!important;opacity:.36!important;z-index:1!important;}
html .spx-why-section.spx-why-v52 .why52-network .p{stroke:rgba(80,220,255,.42)!important;stroke-width:1.8!important;filter:drop-shadow(0 0 10px rgba(24,213,255,.24))!important;}
html .spx-why-section.spx-why-v52 .why52-network .n{fill:#5ee7ff!important;filter:drop-shadow(0 0 14px rgba(24,213,255,.65))!important;animation:whyNodePulse 4.8s ease-in-out infinite!important;}
html .spx-why-section.spx-why-v52 .why52-visuals{position:absolute!important;inset:0!important;z-index:3!important;}
html .spx-why-section.spx-why-v52 .why52-visual{position:absolute!important;inset:clamp(18px,3vh,36px) -18vw clamp(24px,4vh,44px) 0!important;margin:0!important;opacity:0!important;visibility:hidden!important;transition:none!important;filter:none!important;background:transparent!important;}
html .spx-why-section.spx-why-v52 .why52-visual.is-active,
html .spx-why-section.spx-why-v52 .why52-visual[data-spx-active="1"]{opacity:1!important;visibility:visible!important;transform:none!important;}
html .spx-why-section.spx-why-v52 .why52-visual img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:right center!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;}
html .spx-why-section.spx-why-v52 .why52-visual figcaption{position:absolute!important;left:clamp(18px,3vw,42px)!important;bottom:clamp(18px,3vw,42px)!important;max-width:300px!important;padding:14px 16px!important;border-radius:18px!important;background:rgba(3,10,20,.76)!important;border:1px solid rgba(116,232,255,.14)!important;backdrop-filter:blur(12px)!important;}
@media (max-width:980px){
  html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:0!important;opacity:1!important;transform:none!important;filter:none!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-sticky{position:relative!important;display:block!important;height:auto!important;min-height:0!important;padding:64px 0!important;}
  html .spx-why-section.spx-why-v52 .why52-step-stack{min-height:0!important;display:grid!important;gap:14px!important;}
  html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-stage{margin-top:28px!important;min-height:360px!important;}
}


/* A8.58ZZM: longer sharp What hold + stable real How scroller. */
html .spx-hero-v26[data-hero-scrollstory]{
  min-height:350vh!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content,
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"],
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] *{
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  text-shadow:none!important;
  transform-style:flat!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:geometricPrecision!important;
}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{
  background:linear-gradient(145deg,rgba(5,14,25,.97),rgba(4,9,18,.99) 62%,rgba(7,31,49,.90))!important;
}
html.spx-hero-story-active .spx-why-section.spx-why-v52{
  margin-top:-135svh!important;
  opacity:var(--spx-how-underlay-opacity,0)!important;
  transform:scale(var(--spx-how-underlay-scale,1))!important;
  filter:blur(var(--spx-how-underlay-blur,0px))!important;
  transition:none!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  overflow:visible!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  height:clamp(3300px,430vh,4550px)!important;
  position:relative!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  position:sticky!important;
  top:0!important;
  height:100svh!important;
  min-height:720px!important;
  transform:none!important;
  opacity:1!important;
  overflow:visible!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  opacity:var(--how-head-opacity,1)!important;
  transform:translate3d(0,var(--how-head-y,0px),0)!important;
  max-height:calc(260px * var(--how-head-collapse,1))!important;
  margin-bottom:calc(22px * var(--how-head-collapse,1))!important;
  overflow:hidden!important;
  pointer-events:calc(var(--how-head-collapse,1))!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav button{
  pointer-events:none!important;
  cursor:default!important;
  user-select:none!important;
}
html .spx-why-section.spx-why-v52 .why52-step-stack{
  min-height:320px!important;
}
html .spx-why-section.spx-why-v52 .why52-step{
  transition:none!important;
}
html .spx-why-section.spx-why-v52 .why52-visual,
html .spx-why-section.spx-why-v52 .why52-visual img{
  transition:none!important;
}
@media (max-width:980px){
  html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:0!important;opacity:1!important;transform:none!important;filter:none!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-story-head{opacity:1!important;transform:none!important;max-height:none!important;margin-bottom:22px!important;}
  html .spx-why-section.spx-why-v52 .why52-step-nav button{pointer-events:auto!important;}
}


/* A8.58ZZN: How scroller polish — title, visual crossfade and no left step blocks. */
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{
  max-width:680px!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav{
  display:none!important;
}
html .spx-why-section.spx-why-v52 .why52-step-stack{
  display:none!important;
  min-height:0!important;
  height:0!important;
  margin:0!important;
  overflow:hidden!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-copy{
  justify-content:center!important;
  padding-bottom:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  margin-bottom:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  max-width:650px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  --why-mx:.52;
  --why-my:.54;
}
html .spx-why-section.spx-why-v52 .why52-visual{
  will-change:opacity,transform,filter!important;
  transition:opacity .72s cubic-bezier(.16,1,.3,1), transform .82s cubic-bezier(.16,1,.3,1), filter .72s cubic-bezier(.16,1,.3,1)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual img{
  transition:transform .95s cubic-bezier(.16,1,.3,1), filter .75s cubic-bezier(.16,1,.3,1)!important;
  transform:translate3d(calc(var(--visual-distance,0) * -10px), calc(var(--visual-distance,0) * 6px), 0) scale(calc(1 + (var(--visual-presence,1) * .012)))!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  left:clamp(20px,3.2vw,48px)!important;
  bottom:clamp(18px,3vw,44px)!important;
  max-width:min(420px,52%)!important;
  padding:18px 20px!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(4,12,24,.82),rgba(3,7,15,.92))!important;
  border:1px solid rgba(116,232,255,.13)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(10px)!important;
  transform:translate3d(calc((1 - var(--visual-presence,1)) * 16px), calc((1 - var(--visual-presence,1)) * 10px), 0)!important;
  opacity:calc(.2 + (var(--visual-presence,1) * .8))!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-kicker{
  display:inline-flex!important;
  align-items:center!important;
  margin:0 0 10px!important;
  color:#62e8ff!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption b{
  display:block!important;
  color:#fff!important;
  font-size:clamp(18px,1.25vw,24px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
  margin:0 0 8px!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption p,
html .spx-why-section.spx-why-v52 .why52-visual figcaption span:not(.why52-visual-kicker){
  display:block!important;
  color:rgba(222,238,255,.76)!important;
  font-size:clamp(13px,.9vw,15px)!important;
  line-height:1.48!important;
  margin:0!important;
}
html .spx-why-section.spx-why-v52 .why52-network .n{
  animation:spxWhyNodeBreathe 3.8s ease-in-out infinite!important;
  transform-origin:center!important;
}
html .spx-why-section.spx-why-v52 .why52-network .n:nth-of-type(2n){animation-delay:.55s!important;}
html .spx-why-section.spx-why-v52 .why52-network .n:nth-of-type(3n){animation-delay:1.1s!important;}
html .spx-why-section.spx-why-v52 .why52-float{
  animation:spxWhyFloatDrift 7.5s ease-in-out infinite!important;
  will-change:transform,opacity!important;
}
html .spx-why-section.spx-why-v52 .why52-float.f2{animation-delay:1.2s!important;}
html .spx-why-section.spx-why-v52 .why52-float.f3{animation-delay:2.1s!important;}
@keyframes spxWhyNodeBreathe{
  0%,100%{opacity:.52;filter:drop-shadow(0 0 8px rgba(24,213,255,.34));}
  50%{opacity:1;filter:drop-shadow(0 0 22px rgba(24,213,255,.78));}
}
@keyframes spxWhyFloatDrift{
  0%,100%{opacity:.28;transform:translate3d(-4px,3px,0) scale(.96);}
  48%{opacity:.62;transform:translate3d(9px,-8px,0) scale(1.04);}
}
@media (max-width:980px){
  html .spx-why-section.spx-why-v52 .why52-step-stack{display:grid!important;height:auto!important;min-height:0!important;}
  html .spx-why-section.spx-why-v52 .why52-step-nav{display:none!important;}
}


/* A8.58ZZO: hold step 01 longer and make the visual caption/card clearer. */
html .spx-why-section.spx-why-v52 .spx-why52-track{
  height:clamp(3550px,465vh,4920px)!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  padding-top:clamp(58px,8.5vh,96px)!important;
  padding-bottom:clamp(58px,8vh,92px)!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  min-height:clamp(600px,76vh,840px)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual{
  inset:clamp(12px,2vh,28px) -18vw clamp(18px,3vh,38px) 0!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  left:clamp(24px,3.8vw,58px)!important;
  bottom:clamp(22px,4vw,58px)!important;
  max-width:min(500px,58%)!important;
  padding:clamp(20px,2vw,28px) clamp(22px,2.25vw,32px)!important;
  border-radius:26px!important;
  background:
    linear-gradient(145deg,rgba(6,18,32,.94),rgba(3,7,16,.97) 62%,rgba(5,28,45,.88)),
    radial-gradient(circle at 10% 0%,rgba(24,213,255,.14),transparent 42%)!important;
  border:1px solid rgba(112,232,255,.24)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:hidden!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card::before,
html .spx-why-section.spx-why-v52 .why52-visual figcaption::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:4px!important;
  background:linear-gradient(180deg,#18d5ff,#7c8cff)!important;
  opacity:.9!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-kicker{
  margin-bottom:12px!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  background:rgba(24,213,255,.10)!important;
  border:1px solid rgba(116,232,255,.18)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption b{
  font-size:clamp(21px,1.55vw,30px)!important;
  line-height:1.04!important;
  letter-spacing:-.045em!important;
  margin-bottom:10px!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption p,
html .spx-why-section.spx-why-v52 .why52-visual figcaption span:not(.why52-visual-kicker){
  font-size:clamp(14px,1vw,17px)!important;
  line-height:1.55!important;
  color:rgba(226,241,255,.82)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual img{
  filter:saturate(1.03) brightness(1.02)!important;
}
@media (max-width:980px){
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .why52-visual-card,
  html .spx-why-section.spx-why-v52 .why52-visual figcaption{max-width:min(420px,84%)!important;}
}


/* A8.58ZZP: How-step copy/card polish and glow reset refinements. */
html .spx-why-section.spx-why-v52 .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  max-width:min(540px,62%)!important;
  padding:clamp(22px,2.25vw,32px) clamp(24px,2.5vw,36px)!important;
  background:
    linear-gradient(145deg,rgba(6,18,32,.96),rgba(3,7,16,.985) 58%,rgba(6,31,48,.92)),
    radial-gradient(circle at 12% 0%,rgba(24,213,255,.18),transparent 44%)!important;
  border-color:rgba(112,232,255,.30)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card::after,
html .spx-why-section.spx-why-v52 .why52-visual figcaption::after{
  content:""!important;
  position:absolute!important;
  left:clamp(24px,2.5vw,36px)!important;
  right:clamp(24px,2.5vw,36px)!important;
  top:0!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(24,213,255,.75),rgba(124,140,255,.35),transparent)!important;
  opacity:.8!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-kicker{
  margin-bottom:14px!important;
  background:rgba(24,213,255,.13)!important;
  border-color:rgba(116,232,255,.26)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption b{
  max-width:460px!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption p,
html .spx-why-section.spx-why-v52 .why52-visual figcaption span:not(.why52-visual-kicker){
  max-width:500px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage:not(:hover){
  --why-mx:.52!important;
  --why-my:.54!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage:not(:hover)::after{
  opacity:.36!important;
  transition:opacity .45s ease!important;
}


/* A8.58ZZQ: Start-step copy polish, rounded visuals, longer What/How hold and dashboard prep. */
html .spx-hero-v26[data-hero-scrollstory]{
  min-height:390vh!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content,
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"],
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] *{
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:1;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  max-height:calc(390px * var(--how-head-collapse,1))!important;
  padding-bottom:calc(8px * var(--how-head-collapse,1))!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  max-width:720px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky{
  opacity:calc(1 - var(--how-exit-opacity,0))!important;
  transform:translate3d(0,var(--how-exit-y,0px),0)!important;
  filter:blur(calc(var(--how-exit-opacity,0) * 5px))!important;
  transition:none!important;
}
html .spx-why-section.spx-why-v52 .why52-visual img{
  border-radius:clamp(20px,2vw,34px)!important;
  overflow:hidden!important;
  box-shadow:0 34px 100px rgba(0,0,0,.28)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual[data-why52-visual="0"] img{
  object-position:center center!important;
  transform:translate3d(-5.5%,0,0) scale(calc(1.01 + (var(--visual-presence,1) * .01)))!important;
}
html .spx-why-section.spx-why-v52 .why52-visual[data-why52-visual="0"] .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual[data-why52-visual="0"] figcaption{
  left:clamp(20px,2.8vw,44px)!important;
}
html .command-center{
  position:relative!important;
  overflow:hidden!important;
}
html .command-center::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(120deg,rgba(24,213,255,.08),transparent 36%,rgba(90,111,255,.07))!important;
  opacity:.85!important;
}
html .command-center > *,
html .command-grid{position:relative!important;z-index:1!important;}
@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory]{min-height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-sticky{opacity:1!important;filter:none!important;transform:none!important;}
}


/* A8.58ZZR: How intro/step handoff polish.
   - Start. Build. Export. stays alone first.
   - Step 01 visual appears only after the intro fades.
   - How background is full-bleed and fades out without a dark block/line.
   - Removes square-looking frames around step visuals. */
html .spx-why-section.spx-why-v52{
  position:relative!important;
  isolation:auto!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html .spx-why-section.spx-why-v52::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  opacity:0!important;
  z-index:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-shell,
html .spx-why-section.spx-why-v52 .spx-why52-track,
html .spx-why-section.spx-why-v52 .spx-why52-sticky{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-shell{
  position:relative!important;
  z-index:1!important;
  width:min(1280px,calc(100% - 48px))!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky{
  opacity:calc((1 - var(--how-exit-opacity,0)) * 1)!important;
  transform:translate3d(0,calc(var(--how-exit-y,0px) * .35),0)!important;
  filter:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  opacity:var(--zzr-how-intro-opacity,1)!important;
  transform:translate3d(0,calc(-14px * (1 - var(--zzr-how-intro-opacity,1))),0)!important;
  max-height:calc(390px * var(--zzr-how-intro-opacity,1))!important;
  margin-bottom:calc(20px * var(--zzr-how-intro-opacity,1))!important;
  overflow:hidden!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  opacity:var(--zzr-how-steps-opacity,0)!important;
  transform:translate3d(0,calc(18px * (1 - var(--zzr-how-steps-opacity,0))),0) scale(calc(.988 + (.012 * var(--zzr-how-steps-opacity,0))))!important;
  transition:opacity .28s linear!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage::before,
html .spx-why-section.spx-why-v52 .spx-why52-stage::after,
html .spx-why-section.spx-why-v52 .why52-visual::before,
html .spx-why-section.spx-why-v52 .why52-visual::after,
html .spx-why-section.spx-why-v52 .why52-visuals::before,
html .spx-why-section.spx-why-v52 .why52-visuals::after{
  box-shadow:none!important;
  border:0!important;
}
html .spx-why-section.spx-why-v52 .why52-visual{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
}
html .spx-why-section.spx-why-v52 .why52-visual img{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border-radius:clamp(22px,2vw,34px)!important;
  overflow:hidden!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  box-shadow:0 20px 56px rgba(0,0,0,.26)!important;
}
html .command-center{
  margin-top:0!important;
  border-top:0!important;
  box-shadow:none!important;
}
html .command-center::before{
  opacity:calc((1 - var(--how-exit-opacity,0)) * .25 + .25)!important;
}
@media (max-width:980px){
  html .spx-why-section.spx-why-v52 .spx-why52-story-head{
    opacity:1!important;
    max-height:none!important;
    transform:none!important;
    margin-bottom:22px!important;
  }
  html .spx-why-section.spx-why-v52 .spx-why52-stage{
    opacity:1!important;
    transform:none!important;
  }
}


/* A8.58ZZS: remove the dark empty tail after How by keeping the story visible until the section handoff. */
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  opacity:calc(1 - var(--how-exit-opacity,0))!important;
  transform:translate3d(0,var(--how-exit-y,0px),0)!important;
  filter:none!important;
}
html .spx-why-section.spx-why-v52::before{
  opacity:calc((1 - var(--how-exit-opacity,0)) * .68)!important;
}
html .spx-why-section.spx-why-v52{
  margin-bottom:0!important;
  padding-bottom:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
}
html .command-center{
  margin-top:-1px!important;
  border-top:0!important;
  box-shadow:none!important;
}
html .command-center::before{
  opacity:.42!important;
}


/* A8.58ZZT: hard fix for the dark empty tail after How.
   Keep the last How visual/content visible until the section actually hands off. */
html .spx-why-section.spx-why-v52{
  --how-exit-opacity:0;
  --how-exit-y:0px;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  opacity:calc(1 - var(--how-exit-opacity,0))!important;
  transform:translate3d(0,calc(var(--how-exit-y,0px) * .18),0)!important;
  filter:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  opacity:var(--zzr-how-steps-opacity,1)!important;
}
html .spx-why-section.spx-why-v52::before{
  opacity:calc((1 - var(--how-exit-opacity,0)) * .68)!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  /* keep enough scroll room for the steps, but remove the excessive invisible tail */
  height:clamp(3300px,435vh,4620px)!important;
}
html .command-center{
  margin-top:0!important;
  border-top:0!important;
  box-shadow:none!important;
}


/* A8.58ZZU: synchronized How exit, sharp What view, normal space background and visible back-to-top. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content *,
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"],
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] *{
  filter:none!important;
  text-shadow:none!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:geometricPrecision!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content{
  filter:none!important;
  will-change:opacity,transform!important;
}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

html .spx-why-section.spx-why-v52{
  --how-exit-opacity:0;
  --how-exit-y:0px;
  position:relative!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}
html .spx-why-section.spx-why-v52::before{
  opacity:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  height:clamp(3180px,404vh,4300px)!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  opacity:calc(1 - var(--how-exit-opacity,0))!important;
  transform:translate3d(0,calc(var(--how-exit-y,0px) * .16),0) scale(calc(1 - (var(--how-exit-opacity,0) * .006)))!important;
  filter:none!important;
  background:transparent!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  opacity:calc(var(--zzr-how-steps-opacity,1) * (1 - var(--how-exit-opacity,0)))!important;
  filter:none!important;
}
html .spx-why-section.spx-why-v52 .why52-visual,
html .spx-why-section.spx-why-v52 .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  transition:opacity .18s linear, transform .18s linear!important;
}
html .command-center{
  margin-top:-1px!important;
  border-top:0!important;
  box-shadow:none!important;
  background:
    radial-gradient(1px 1px at 18% 22%,rgba(180,235,255,.52),transparent 60%),
    radial-gradient(1px 1px at 77% 38%,rgba(126,205,255,.42),transparent 60%),
    var(--bg)!important;
}
html .command-center::before{
  opacity:.28!important;
}
.spx-scroll-top{
  right:clamp(18px,2.3vw,34px)!important;
  bottom:clamp(18px,2.3vw,34px)!important;
  z-index:1300!important;
  width:54px!important;
  height:54px!important;
  border-radius:999px!important;
  border:1px solid rgba(99,226,255,.30)!important;
  background:linear-gradient(145deg,rgba(5,18,34,.90),rgba(8,32,58,.76))!important;
  color:#edfaff!important;
  box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 26px rgba(24,199,255,.16),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.spx-scroll-top.is-visible{
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
  pointer-events:auto!important;
}
.spx-scroll-top:hover,
.spx-scroll-top:focus-visible{
  border-color:rgba(99,226,255,.62)!important;
  background:linear-gradient(145deg,rgba(18,203,255,.90),rgba(47,102,255,.82))!important;
}


/* A8.58ZZX: transparent How Spixor Works background after the builder.
   The 3-step story should continue on the normal space background instead of
   sitting on a separate one-color/dark panel. */
html .spx-why-section.spx-why-v52,
html .spx-why-section.spx-why-v52 .spx-why52-shell,
html .spx-why-section.spx-why-v52 .spx-why52-track,
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after,
html .spx-why-section.spx-why-v52 .spx-why52-copy,
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
html .spx-why-section.spx-why-v52::before,
html .spx-why-section.spx-why-v52::after,
html .spx-why-section.spx-why-v52 .spx-why52-hero-echo,
html .spx-why-section.spx-why-v52 .why52-echo-base,
html .spx-why-section.spx-why-v52 .why52-echo-layer{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html .spx-why-section.spx-why-v52{
  /* Keep only spacing/sticky behavior; visual background is inherited from the page/space scene. */
  isolation: auto !important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage::before,
html .spx-why-section.spx-why-v52 .spx-why52-stage::after,
html .spx-why-section.spx-why-v52 .why52-visuals::before,
html .spx-why-section.spx-why-v52 .why52-visuals::after{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
html .spx-why-section.spx-why-v52 .why52-network{
  opacity: .78 !important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card{
  background: linear-gradient(145deg, rgba(5, 12, 23, .58), rgba(5, 12, 23, .38)) !important;
  border-color: rgba(115, 226, 255, .12) !important;
  box-shadow: none !important;
}
html .command-center{
  margin-top: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
html .command-center::before{
  opacity: .18 !important;
}


/* A8.58ZZY: one shared hero-space background for Hero -> How Spixor Works.
   Removes leftover section/block backgrounds so How continues on the same
   atmospheric layer instead of sitting on its own color panel. */
html .spx-home-main{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  background:#02050d!important;
}
html[data-theme="light"] .spx-home-main{background:#eef3fa!important;}
html .spx-home-main::before,
html .spx-home-main::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  pointer-events:none!important;
  z-index:0!important;
  transform:none!important;
  will-change:auto!important;
}
html .spx-home-main::before{
  background:
    radial-gradient(700px 420px at 72% 16%,rgba(33,117,221,.18),transparent 68%),
    radial-gradient(620px 380px at 18% 46%,rgba(24,201,245,.13),transparent 70%),
    linear-gradient(116deg,transparent 0 25%,rgba(24,201,245,.08) 43%,rgba(194,239,255,.10) 49%,rgba(69,111,255,.06) 59%,transparent 78% 100%),
    linear-gradient(180deg,#02050d 0%,#050d19 48%,#07111f 100%)!important;
  opacity:1!important;
}
html .spx-home-main::after{
  opacity:.58!important;
  background:
    radial-gradient(circle at 8% 18%,rgba(255,255,255,.62) 0 1px,transparent 1.7px),
    radial-gradient(circle at 23% 12%,rgba(107,232,255,.50) 0 1px,transparent 1.6px),
    radial-gradient(circle at 72% 9%,rgba(255,255,255,.56) 0 1px,transparent 1.7px),
    radial-gradient(circle at 84% 34%,rgba(107,232,255,.48) 0 1px,transparent 1.6px),
    radial-gradient(circle at 35% 42%,rgba(255,255,255,.42) 0 1px,transparent 1.8px),
    radial-gradient(circle at 55% 71%,rgba(120,219,255,.42) 0 1px,transparent 1.7px),
    radial-gradient(circle at 12% 83%,rgba(255,255,255,.38) 0 1px,transparent 1.7px),
    linear-gradient(rgba(107,232,255,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.012) 1px,transparent 1px)!important;
  background-size:470px 360px,390px 320px,520px 410px,460px 380px,540px 430px,610px 480px,420px 390px,96px 96px,96px 96px!important;
}
html .spx-home-main > *{
  position:relative!important;
  z-index:1!important;
}
html .spx-hero-v26[data-hero-scrollstory],
html .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky,
html .spx-why-section.spx-why-v52,
html .spx-why-section.spx-why-v52 .spx-why52-shell,
html .spx-why-section.spx-why-v52 .spx-why52-track,
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after,
html .spx-why-section.spx-why-v52 .spx-why52-copy,
html .spx-why-section.spx-why-v52 .spx-why52-stage,
html .command-center{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html .spx-why-section.spx-why-v52::before,
html .spx-why-section.spx-why-v52::after,
html .spx-why-section.spx-why-v52 .spx-why52-shell::before,
html .spx-why-section.spx-why-v52 .spx-why52-shell::after,
html .spx-why-section.spx-why-v52 .spx-why52-track::before,
html .spx-why-section.spx-why-v52 .spx-why52-track::after,
html .spx-why-section.spx-why-v52 .spx-why52-sticky::before,
html .spx-why-section.spx-why-v52 .spx-why52-sticky::after,
html .spx-why-section.spx-why-v52 .spx-why52-stage::before,
html .spx-why-section.spx-why-v52 .spx-why52-stage::after,
html .spx-why-section.spx-why-v52 .spx-why52-hero-echo,
html .spx-why-section.spx-why-v52 .why52-echo-base,
html .spx-why-section.spx-why-v52 .why52-echo-layer,
html .command-center::before,
html .command-center::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:none!important;
  box-shadow:none!important;
  border:0!important;
}
html .spx-why-section.spx-why-v52{
  isolation:auto!important;
  overflow:visible!important;
}
html .spx-why-section.spx-why-v52 .why52-network,
html .spx-why-section.spx-why-v52 .why52-visuals{
  background:transparent!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  background:linear-gradient(145deg,rgba(5,12,23,.62),rgba(5,12,23,.42))!important;
  border-color:rgba(115,226,255,.12)!important;
}

/* A8.58ZZZ: final public-flow polish.
   One last, explicit layer to remove the remaining How panel backgrounds,
   keep the hero/space atmosphere continuous, sharpen the What view, slow the
   hero -> What -> How sequence, and polish the hero CTA hovers. */
html .spx-home-main{
  position:relative!important;
  isolation:isolate!important;
  background:#02050d!important;
  overflow:visible!important;
}
html[data-theme="light"] .spx-home-main{background:#eef3fa!important;}
html .spx-home-main .spx-hero-v26[data-hero-scrollstory]{
  min-height:clamp(3100px,460svh,4800px)!important;
}
html .spx-home-main::before,
html .spx-home-main::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100svh!important;
  pointer-events:none!important;
  transform:none!important;
  z-index:0!important;
}
html .spx-home-main::before{
  background:
    radial-gradient(760px 460px at 72% 16%,rgba(33,117,221,.18),transparent 68%),
    radial-gradient(680px 420px at 18% 46%,rgba(24,201,245,.13),transparent 70%),
    radial-gradient(820px 560px at 52% 88%,rgba(17,45,96,.28),transparent 72%),
    linear-gradient(116deg,transparent 0 25%,rgba(24,201,245,.075) 43%,rgba(194,239,255,.10) 49%,rgba(69,111,255,.055) 59%,transparent 78% 100%),
    linear-gradient(180deg,#02050d 0%,#050d19 48%,#07111f 100%)!important;
  opacity:1!important;
}
html .spx-home-main::after{
  opacity:.62!important;
  background:
    radial-gradient(circle at 8% 18%,rgba(255,255,255,.62) 0 1px,transparent 1.7px),
    radial-gradient(circle at 23% 12%,rgba(107,232,255,.50) 0 1px,transparent 1.6px),
    radial-gradient(circle at 72% 9%,rgba(255,255,255,.56) 0 1px,transparent 1.7px),
    radial-gradient(circle at 84% 34%,rgba(107,232,255,.48) 0 1px,transparent 1.6px),
    radial-gradient(circle at 35% 42%,rgba(255,255,255,.42) 0 1px,transparent 1.8px),
    radial-gradient(circle at 55% 71%,rgba(120,219,255,.42) 0 1px,transparent 1.7px),
    radial-gradient(circle at 12% 83%,rgba(255,255,255,.38) 0 1px,transparent 1.7px),
    linear-gradient(rgba(107,232,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.011) 1px,transparent 1px)!important;
  background-size:470px 360px,390px 320px,520px 410px,460px 380px,540px 430px,610px 480px,420px 390px,96px 96px,96px 96px!important;
}
html[data-theme="light"] .spx-home-main::before{
  background:
    radial-gradient(760px 460px at 72% 16%,rgba(37,99,235,.12),transparent 68%),
    radial-gradient(680px 420px at 18% 46%,rgba(14,165,233,.10),transparent 70%),
    linear-gradient(116deg,transparent 0 25%,rgba(14,165,233,.055) 43%,rgba(255,255,255,.50) 49%,rgba(37,99,235,.045) 59%,transparent 78% 100%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 58%,#eef3fa 100%)!important;
}
html[data-theme="light"] .spx-home-main::after{opacity:.36!important;}
html .spx-home-main > *{position:relative!important;z-index:1!important;}

/* Keep the actual hero canvas as a shared atmosphere layer too, so How does not
   need its own block background after the product/building sequence. */
html .spx-hero-v26[data-hero-scrollstory] .spx-hero-space{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100svh!important;
  z-index:0!important;
  opacity:.64!important;
  mix-blend-mode:screen!important;
  pointer-events:none!important;
}

/* The product mask was still drawn over the What view. Put the real DOM view
   above that mask and flatten the DOM view so text/topbar stay crisp. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-stack{
  z-index:28!important;
  backface-visibility:hidden!important;
  transform:none!important;
  will-change:opacity!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content{
  display:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  position:absolute!important;
  left:50%!important;
  top:clamp(86px,10vh,112px)!important;
  width:min(1040px,calc(100vw - 72px))!important;
  z-index:44!important;
  opacity:var(--spx-hero-view-new-opacity,0)!important;
  transform:translate3d(-50%,0,0)!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  pointer-events:none!important;
  will-change:opacity!important;
  contain:layout style!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
  position:relative!important;
  width:100%!important;
  min-height:clamp(520px,62vh,660px)!important;
  border:1px solid rgba(116,232,255,.16)!important;
  border-radius:20px!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,rgba(6,14,26,.96),rgba(4,9,18,.98) 62%,rgba(7,31,49,.88))!important;
  box-shadow:0 26px 86px rgba(0,0,0,.30),0 0 42px rgba(24,201,245,.08)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:48px;
  z-index:2;
  border-bottom:1px solid rgba(116,232,255,.14);
  background:
    radial-gradient(circle at 28px 24px,#ff5c7a 0 5px,transparent 6px),
    radial-gradient(circle at 46px 24px,#f5b85b 0 5px,transparent 6px),
    radial-gradient(circle at 64px 24px,#45e6a8 0 5px,transparent 6px),
    linear-gradient(90deg,rgba(24,201,245,.12),rgba(255,255,255,.035),transparent);
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell::after{
  content:"spixor.site / visual-builder";
  position:absolute;
  left:94px;
  right:22px;
  top:12px;
  z-index:3;
  height:24px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(116,232,255,.14);
  background:rgba(255,255,255,.045);
  color:var(--muted);
  font-size:11px;
  font-weight:850;
  letter-spacing:.04em;
}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(238,246,255,.95))!important;
  box-shadow:0 26px 72px rgba(22,34,64,.14),0 0 36px rgba(14,165,233,.10)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer *{
  text-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  backface-visibility:visible!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:optimizeLegibility!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
  position:relative!important;
  inset:auto!important;
  min-height:clamp(488px,58vh,626px)!important;
  display:grid!important;
  align-items:center!important;
  padding:clamp(76px,8vw,108px) clamp(28px,6vw,82px) clamp(28px,5vw,62px)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  max-width:820px!important;
  transform:none!important;
  opacity:1!important;
  pointer-events:auto!important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .v26-product-atmosphere::after{
  opacity:.16!important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-builder-view-content,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active [data-spx-dom-content="what-is-spixor"],
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active [data-spx-dom-content="what-is-spixor"] *{
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  text-shadow:none!important;
  transform:none!important;
  will-change:opacity!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:geometricPrecision!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-topbar{
  width:158px!important;
  height:auto!important;
  filter:none!important;
  opacity:1!important;
  image-rendering:auto!important;
  transform:none!important;
  backface-visibility:hidden!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
  position:absolute!important;
  right:clamp(22px,3vw,34px)!important;
  left:auto!important;
  top:62px!important;
  width:174px!important;
  z-index:3!important;
  opacity:.88!important;
  border-radius:12px!important;
  box-shadow:0 14px 34px rgba(0,0,0,.18)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px 12px;
  align-items:center;
  margin:18px 0 8px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(245,184,91,.26);
  background:linear-gradient(135deg,rgba(245,184,91,.12),rgba(24,201,245,.055));
  color:var(--secondary);
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice b{color:#f5b85b;font-size:12px;text-transform:uppercase;letter-spacing:.09em}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice span{font-size:13px;line-height:1.5}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice a{color:var(--cyan-2);font-weight:900;text-decoration:none;font-size:13px}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{
  background:linear-gradient(145deg,rgba(5,14,25,.955),rgba(4,9,18,.985) 62%,rgba(7,31,49,.88))!important;
  outline:1px solid rgba(116,232,255,.10)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.18)!important;
}

/* Real transparent How section: no self-contained section/stage/track panel.
   Only the content, network lines and small text cards remain visible. */
html .spx-why-section.spx-why-v52,
html .spx-why-section.spx-why-v52::before,
html .spx-why-section.spx-why-v52::after,
html .spx-why-section.spx-why-v52 .spx-why52-shell,
html .spx-why-section.spx-why-v52 .spx-why52-shell::before,
html .spx-why-section.spx-why-v52 .spx-why52-shell::after,
html .spx-why-section.spx-why-v52 .spx-why52-track,
html .spx-why-section.spx-why-v52 .spx-why52-track::before,
html .spx-why-section.spx-why-v52 .spx-why52-track::after,
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky::before,
html .spx-why-section.spx-why-v52 .spx-why52-sticky::after,
html .spx-why-section.spx-why-v52 .spx-why52-copy,
html .spx-why-section.spx-why-v52 .spx-why52-copy::before,
html .spx-why-section.spx-why-v52 .spx-why52-copy::after,
html .spx-why-section.spx-why-v52 .spx-why52-stage,
html .spx-why-section.spx-why-v52 .spx-why52-stage::before,
html .spx-why-section.spx-why-v52 .spx-why52-stage::after,
html .spx-why-section.spx-why-v52 .why52-visuals,
html .spx-why-section.spx-why-v52 .why52-visuals::before,
html .spx-why-section.spx-why-v52 .why52-visuals::after{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html .spx-why-section.spx-why-v52{
  margin-top:-118svh!important;
  padding-top:28svh!important;
  opacity:var(--spx-how-underlay-opacity,0)!important;
  overflow:visible!important;
  isolation:auto!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  height:clamp(7600px,900vh,9800px)!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky{
  min-height:100svh!important;
  padding:clamp(62px,9vh,112px) 0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  max-width:720px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2,
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  text-shadow:none!important;
}
html .spx-why-section.spx-why-v52 .why52-network{
  opacity:calc(.56 * var(--zzr-how-steps-opacity,1))!important;
  background:transparent!important;
}
html .spx-why-section.spx-why-v52 .why52-float{
  opacity:calc(.34 * var(--zzr-how-steps-opacity,1))!important;
}
html .spx-why-section.spx-why-v52 .why52-visual img{
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  object-fit:contain!important;
  object-position:right center!important;
  transform-origin:right center!important;
}
html .spx-why-section.spx-why-v52 .why52-visual[data-spx-active="1"],
html .spx-why-section.spx-why-v52 .why52-visual[data-spx-active="1"] img{
  filter:none!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  background:linear-gradient(145deg,rgba(5,13,25,.58),rgba(5,13,25,.34))!important;
  border:1px solid rgba(116,232,255,.12)!important;
  box-shadow:0 18px 56px rgba(0,0,0,.16)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html .command-center,
html .command-center::before,
html .command-center::after{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border-top:0!important;
  box-shadow:none!important;
}

/* Hero CTA polish. Learn More keeps centered rest state, then makes room for
   an animated custom arrow bubble on hover. */
.spx-v26-actions .spx-learn-more{
  position:relative!important;
  min-width:158px!important;
  width:158px!important;
  box-sizing:border-box!important;
  padding:12px 18px!important;
  overflow:hidden!important;
  justify-content:center!important;
  gap:0!important;
  border-color:rgba(142,221,255,.20)!important;
  background:rgba(255,255,255,.052)!important;
  transition:transform .24s var(--ease), background .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease)!important;
}
.spx-v26-actions .spx-learn-more .label{
  position:relative!important;
  z-index:2!important;
  transform:translateX(0)!important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), color .22s var(--ease)!important;
}
.spx-v26-actions .spx-learn-more .arrowBubble{
  position:absolute!important;
  right:10px!important;
  top:50%!important;
  width:31px!important;
  height:31px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,rgba(24,201,245,.96),rgba(37,99,235,.92))!important;
  color:#fff!important;
  font-style:normal!important;
  font-size:0!important;
  font-weight:950!important;
  line-height:1!important;
  opacity:0!important;
  transform:translate3d(14px,-50%,0) scale(.76)!important;
  box-shadow:0 14px 34px rgba(24,201,245,.28),inset 0 1px 0 rgba(255,255,255,.24)!important;
  transition:opacity .24s var(--ease), transform .34s cubic-bezier(.2,.85,.2,1.2)!important;
  pointer-events:none!important;
}
.spx-v26-actions .spx-learn-more .arrowIcon{
  position:relative!important;
  width:13px!important;
  height:13px!important;
  display:block!important;
}
.spx-v26-actions .spx-learn-more .arrowIcon path{fill:currentColor!important}
.spx-v26-actions .spx-learn-more:hover,
.spx-v26-actions .spx-learn-more:focus-visible{
  transform:translateY(-2px)!important;
  border-color:rgba(107,232,255,.44)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.095),rgba(24,201,245,.075))!important;
  box-shadow:0 20px 58px rgba(0,0,0,.22),0 0 34px rgba(24,201,245,.15)!important;
}
.spx-v26-actions .spx-learn-more:hover .label,
.spx-v26-actions .spx-learn-more:focus-visible .label{
  transform:translateX(-15px)!important;
  color:#fff!important;
}
.spx-v26-actions .spx-learn-more:hover .arrowBubble,
.spx-v26-actions .spx-learn-more:focus-visible .arrowBubble{
  opacity:1!important;
  transform:translate3d(0,-50%,0) scale(1)!important;
}
.spx-v26-actions .spx-primary-action:hover,
.spx-v26-actions .spx-primary-action:focus-visible,
.spx-nav-v26 .nav-actions .spx-primary-action:hover,
.spx-nav-v26 .nav-actions .spx-primary-action:focus-visible{
  color:#fff!important;
}
@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-hero-space{position:absolute!important;height:100%!important;}
  html .spx-why-section.spx-why-v52{margin-top:0!important;padding-top:0!important;opacity:1!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  .spx-v26-actions .spx-learn-more{min-width:0!important;width:100%!important;}
}

/* A8.59 homepage flow: active replacement for the old post-How marketing
   sections. These classes are the only homepage blocks after How Spixor Works. */
html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
.spx-dashboard-command,
.spx-export-section,
.spx-pricing-section,
.spx-summary-roadmap{
  position:relative;
  width:min(1180px,calc(100% - 32px));
  margin:clamp(64px,9vw,126px) auto;
  z-index:5;
}
.spx-dashboard-command{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);
  gap:clamp(24px,5vw,72px);
  align-items:center;
  min-height:clamp(2500px,335svh,3300px);
  --dash-focus:0;
  overflow:visible;
}
.spx-dash-visual{position:relative;align-self:stretch;display:grid;align-items:center}
.spx-dash-frame{
  position:sticky;
  top:78px;
  margin:0;
  width:calc(100% + ((100vw - 100%) * var(--dash-focus,0)));
  max-width:calc(100vw - 22px);
  border:1px solid rgba(116,232,255,.20);
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(11,21,38,.88),rgba(5,10,22,.74));
  box-shadow:0 28px 90px rgba(0,0,0,.34),0 0 50px rgba(24,201,245,.10);
  isolation:isolate;
  z-index:calc(20 + (var(--dash-focus,0) * 30));
  transform:translate3d(calc(var(--dash-focus,0) * -9vw),0,0) scale(calc(1 + (var(--dash-focus,0) * .055)));
  transform-origin:left center;
  transition:box-shadow .28s var(--ease), border-color .28s var(--ease), opacity .18s ease;
}
html[data-theme="light"] .spx-dash-frame{background:linear-gradient(145deg,#fff,#eef6ff);box-shadow:0 28px 70px rgba(22,34,64,.15)}
.spx-dash-frame::before{
  content:"";
  display:block;
  height:34px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:linear-gradient(90deg,rgba(24,201,245,.16),rgba(37,99,235,.08),transparent);
}
.spx-dash-frame img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  filter:none!important;
  transform:none!important;
  transition:opacity .2s ease;
}
.spx-dashboard-command.is-switching .spx-dash-frame img{opacity:.18}
.spx-dash-frame::after{
  content:"";
  position:absolute;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(107,232,255,.55);
  background:rgba(24,201,245,.18);
  box-shadow:0 0 0 0 rgba(24,201,245,.24),0 12px 32px rgba(0,0,0,.28);
  opacity:0;
  transform:translate(-50%,-50%) scale(.72);
  pointer-events:none;
}
.spx-dashboard-command[data-dashboard-active="projects"] .spx-dash-frame::after,
.spx-dashboard-command[data-dashboard-active="files"] .spx-dash-frame::after{
  opacity:1;
  animation:spxDashClick 1.15s ease both;
}
.spx-dashboard-command[data-dashboard-active="projects"] .spx-dash-frame::after{left:12%;top:47%}
.spx-dashboard-command[data-dashboard-active="files"] .spx-dash-frame::after{left:12%;top:52%}
.spx-dash-cursor{
  position:absolute;
  z-index:4;
  left:70%;
  top:24%;
  width:22px;
  height:22px;
  clip-path:polygon(0 0,0 100%,28% 74%,44% 100%,62% 91%,47% 66%,82% 66%);
  background:#f4fbff;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.34));
  opacity:calc(.25 + var(--dash-focus,0) * .75);
  transform:translate3d(0,0,0) scale(calc(.92 + var(--dash-focus,0) * .12));
  transition:left .48s cubic-bezier(.2,.8,.2,1),top .48s cubic-bezier(.2,.8,.2,1),opacity .24s ease;
}
.spx-dashboard-command[data-dashboard-active="projects"] .spx-dash-cursor{left:12%;top:47%}
.spx-dashboard-command[data-dashboard-active="files"] .spx-dash-cursor{left:12%;top:52%}
@keyframes spxDashClick{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.68);box-shadow:0 0 0 0 rgba(24,201,245,.24)}
  28%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  56%{box-shadow:0 0 0 18px rgba(24,201,245,0)}
  100%{opacity:.72;transform:translate(-50%,-50%) scale(.92)}
}
.spx-dash-callout{
  position:absolute;
  z-index:2;
  max-width:180px;
  padding:10px 12px;
  border:1px solid rgba(107,232,255,.28);
  border-radius:14px;
  background:rgba(6,14,28,.78);
  color:#edfaff;
  font-size:12px;
  font-weight:900;
  box-shadow:0 14px 38px rgba(0,0,0,.28);
  opacity:.28;
  transform:translateY(8px) scale(.98);
  transition:opacity .28s var(--ease),transform .28s var(--ease),border-color .28s var(--ease);
}
html[data-theme="light"] .spx-dash-callout{background:rgba(255,255,255,.88);color:#101828;box-shadow:0 14px 32px rgba(22,34,64,.14)}
.callout-projects{left:7%;top:16%}.callout-files{right:7%;bottom:24%}.callout-export{left:12%;bottom:10%}
.spx-dashboard-command[data-dashboard-active="overview"] .callout-export,
.spx-dashboard-command[data-dashboard-active="projects"] .callout-projects,
.spx-dashboard-command[data-dashboard-active="files"] .callout-files{
  opacity:1;
  transform:translateY(0) scale(1);
  border-color:rgba(107,232,255,.52);
}
.spx-dash-copy,
.spx-summary-panel{
  border:1px solid rgba(218,236,255,.12);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(11,21,38,.72),rgba(6,12,25,.50));
  padding:clamp(24px,4vw,44px);
  box-shadow:0 24px 80px rgba(0,0,0,.22);
}
.spx-dash-copy{
  position:relative;
  z-index:28;
  transform:translate3d(calc(var(--dash-focus,0) * -5vw),0,0);
  transition:transform .22s var(--ease), opacity .22s var(--ease);
}
html[data-theme="light"] .spx-dash-copy,
html[data-theme="light"] .spx-summary-panel{background:rgba(255,255,255,.78);border-color:rgba(15,23,42,.10);box-shadow:0 24px 70px rgba(22,34,64,.12)}
.spx-dash-copy h2,
.spx-section-kicker h2,
.spx-summary-panel h2{font-size:clamp(34px,4.8vw,64px);line-height:.98;letter-spacing:-.055em;margin:12px 0;color:var(--text)}
.spx-dash-copy p,
.spx-section-kicker p,
.spx-summary-panel p{color:var(--secondary);font-size:clamp(16px,1.45vw,20px);line-height:1.65}
.spx-dash-tabs,
.spx-price-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}
.spx-dash-tabs button,
.spx-price-tabs button{
  border:1px solid rgba(218,236,255,.13);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:var(--text);
  padding:12px 14px;
  cursor:pointer;
  font-weight:920;
  transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.spx-dash-tabs button b{color:var(--cyan-2);margin-right:7px}
.spx-dash-tabs button.is-active,
.spx-price-tabs button.is-active{border-color:rgba(107,232,255,.42);background:rgba(24,201,245,.12);box-shadow:0 14px 34px rgba(24,201,245,.12)}
.spx-dash-panel{display:none}.spx-dash-panel.is-active{display:block}
.spx-dash-panel h3{font-size:24px;margin:0 0 8px;color:var(--text)}
.spx-section-kicker{max-width:840px;margin:0 0 28px}
.spx-export-grid,
.spx-price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.spx-export-grid{grid-template-columns:repeat(3,minmax(0,1fr));transition:grid-template-columns .38s cubic-bezier(.2,.8,.2,1)}
.spx-export-grid:has(.spx-export-card:nth-child(1):hover),
.spx-export-grid:has(.spx-export-card:nth-child(1):focus-within){grid-template-columns:1.75fr .62fr .62fr}
.spx-export-grid:has(.spx-export-card:nth-child(2):hover),
.spx-export-grid:has(.spx-export-card:nth-child(2):focus-within){grid-template-columns:.62fr 1.75fr .62fr}
.spx-export-grid:has(.spx-export-card:nth-child(3):hover),
.spx-export-grid:has(.spx-export-card:nth-child(3):focus-within){grid-template-columns:.62fr .62fr 1.75fr}
.spx-export-card,
.spx-price-card,
.spx-roadmap-item{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(218,236,255,.12);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(12,23,41,.76),rgba(6,12,24,.58));
  padding:clamp(22px,3vw,34px);
  min-height:220px;
  box-shadow:0 22px 70px rgba(0,0,0,.20);
  transition:transform .26s var(--ease),border-color .26s var(--ease),box-shadow .26s var(--ease);
}
html[data-theme="light"] .spx-export-card,
html[data-theme="light"] .spx-price-card,
html[data-theme="light"] .spx-roadmap-item{background:rgba(255,255,255,.80);border-color:rgba(15,23,42,.10);box-shadow:0 18px 52px rgba(22,34,64,.10)}
.spx-export-card::before{
  content:"";
  position:absolute;
  inset:-30% auto auto -60%;
  width:60%;
  height:160%;
  transform:rotate(18deg) translateX(-30%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
  opacity:0;
  transition:transform .55s var(--ease),opacity .25s var(--ease);
}
.spx-export-card:hover{transform:translateY(-6px) rotateX(1deg);border-color:rgba(107,232,255,.42);box-shadow:0 28px 90px rgba(0,0,0,.28),0 0 32px rgba(24,201,245,.12)}
.spx-export-grid:has(.spx-export-card:hover) .spx-export-card:not(:hover),
.spx-export-grid:has(.spx-export-card:focus-within) .spx-export-card:not(:focus-within){padding-inline:18px}
.spx-export-grid:has(.spx-export-card:hover) .spx-export-card:not(:hover) p,
.spx-export-grid:has(.spx-export-card:hover) .spx-export-card:not(:hover) .spx-more-link,
.spx-export-grid:has(.spx-export-card:focus-within) .spx-export-card:not(:focus-within) p,
.spx-export-grid:has(.spx-export-card:focus-within) .spx-export-card:not(:focus-within) .spx-more-link{opacity:0;max-height:0;overflow:hidden;margin:0;pointer-events:none}
.spx-export-card p,.spx-export-card .spx-more-link{transition:opacity .28s ease,max-height .32s ease,margin .32s ease}
.spx-export-card:hover::before{opacity:1;transform:rotate(18deg) translateX(330%)}
.spx-export-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,rgba(24,201,245,.95),rgba(37,99,235,.90));color:#fff;font-weight:960;box-shadow:0 12px 34px rgba(24,201,245,.24);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.spx-export-icon img{width:27px;height:27px;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.18))}
.spx-export-card:hover .spx-export-icon{transform:translateY(-2px) scale(1.08) rotate(-2deg);box-shadow:0 16px 42px rgba(24,201,245,.32)}
.spx-export-card h3,
.spx-price-card h3{font-size:26px;line-height:1.05;margin:22px 0 10px;color:var(--text)}
.spx-export-card p,
.spx-price-card p,
.spx-roadmap-item b{color:var(--secondary);line-height:1.62}
.spx-more-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  color:var(--cyan-2);
  text-decoration:none;
  font-weight:950;
}
.spx-more-link::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease)}
.spx-export-card:hover .spx-more-link::after{transform:translateX(4px) rotate(45deg)}
.spx-price-tabs button span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.spx-price-card{min-height:420px;display:flex;flex-direction:column}
.spx-plan-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  margin-bottom:14px;
  color:#fff;
  font-weight:1000;
  background:linear-gradient(135deg,rgba(69,230,168,.92),rgba(24,201,245,.82));
  box-shadow:0 14px 34px rgba(24,201,245,.18);
}
.spx-plan-icon.orbit{background:linear-gradient(135deg,rgba(24,201,245,.95),rgba(37,99,235,.92))}
.spx-plan-icon.enterprise{background:linear-gradient(135deg,rgba(47,128,255,.92),rgba(139,92,246,.72))}
.spx-price-card.is-active{border-color:rgba(107,232,255,.44);box-shadow:0 28px 90px rgba(24,201,245,.13)}
.spx-plan-status{align-self:flex-start;border:1px solid rgba(107,232,255,.24);border-radius:999px;padding:7px 10px;color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:950}
.spx-plan-status.alpha{color:#f5b85b;border-color:rgba(245,184,91,.28)}.spx-plan-status.planned{color:#b8c2d6}
.spx-price-card strong{display:block;font-size:clamp(34px,4vw,54px);letter-spacing:-.05em;color:var(--text);margin:8px 0 10px}
.spx-price-card ul{display:grid;gap:10px;margin:12px 0 24px;padding:0;list-style:none;color:var(--secondary)}
.spx-price-card li::before{content:"+";color:var(--cyan-2);font-weight:950;margin-right:8px}
.spx-price-card .btn{margin-top:auto}.spx-pricing-note{color:var(--muted);font-size:13px;margin-top:16px}
.spx-summary-roadmap{display:grid;grid-template-columns:.82fr 1.18fr;gap:24px;align-items:start}
.spx-roadmap-flow{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.spx-roadmap-flow::before{content:"";position:absolute;inset:10% 6%;border:1px solid rgba(107,232,255,.16);border-radius:50%;transform:rotate(-8deg);pointer-events:none}
.spx-roadmap-stage{position:relative;display:grid;gap:12px;min-width:0}
.spx-roadmap-stage header{
  min-height:118px;
  border:1px solid rgba(107,232,255,.16);
  border-radius:20px;
  padding:16px;
  background:linear-gradient(145deg,rgba(24,201,245,.10),rgba(255,255,255,.035));
}
.spx-roadmap-stage header span{display:block;color:var(--cyan-2);font-weight:1000;letter-spacing:.02em}
.spx-roadmap-stage header p{margin:8px 0 0;color:var(--secondary);line-height:1.5}
.spx-roadmap-item{min-height:134px;padding:18px}
.spx-roadmap-item::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 0 34%,rgba(255,255,255,.13) 48%,transparent 62%);
  transform:translateX(-120%);
  opacity:0;
  transition:transform .55s var(--ease),opacity .25s var(--ease);
}
.spx-roadmap-item:hover{transform:translateY(-5px) rotateX(1deg);border-color:rgba(107,232,255,.36);box-shadow:0 28px 86px rgba(0,0,0,.24),0 0 28px rgba(24,201,245,.10)}
.spx-roadmap-item:hover::before{opacity:1;transform:translateX(120%)}
.spx-roadmap-item.is-active{border-color:rgba(107,232,255,.44);box-shadow:0 24px 78px rgba(24,201,245,.12)}
.spx-roadmap-item span{display:inline-flex;margin-bottom:14px;border-radius:999px;padding:6px 9px;background:rgba(24,201,245,.10);color:var(--cyan-2);font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.1em}
.spx-roadmap-item b{display:block;color:var(--text);font-size:18px}
.spx-footer-v2{grid-template-columns:minmax(260px,1.1fr) minmax(260px,.9fr);align-items:start;gap:26px}
.spx-footer-v2 .footer-main-copy p{max-width:580px}.footer-link-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important}
.footer-copyline{grid-column:1/-1;color:var(--muted);margin:0}
.footer-built-with{grid-column:1/-1;color:var(--muted);margin:0;padding:0;border:0;border-radius:0;background:transparent;width:max-content;max-width:100%;font-size:12px;opacity:.74}
.site-header.spx-nav-v26 .site-nav>a.is-active{color:var(--text)!important}
.site-header.spx-nav-v26 .site-nav>a.is-active::after{transform:scaleX(1)!important}
.spx-pricing-section.standalone{margin-top:42px}
@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{position:relative!important;left:auto!important;top:auto!important;width:100%!important;transform:none!important;opacity:1!important;margin:28px auto 0!important;padding:0 14px!important;}
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{min-height:auto!important;}
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{min-height:auto!important;padding:64px 18px 18px!important;}
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{grid-template-columns:1fr;}
  .spx-dashboard-command,.spx-summary-roadmap{grid-template-columns:1fr;min-height:auto}
  .spx-dash-frame{position:relative;top:auto;width:100%;max-width:100%;transform:none}
  .spx-dash-copy{transform:none}
  .spx-export-grid,.spx-export-grid:has(.spx-export-card:hover),.spx-export-grid:has(.spx-export-card:focus-within),.spx-price-grid,.spx-roadmap-flow{grid-template-columns:1fr}
  .spx-export-grid:has(.spx-export-card:hover) .spx-export-card:not(:hover) p,
  .spx-export-grid:has(.spx-export-card:hover) .spx-export-card:not(:hover) .spx-more-link{opacity:1;max-height:none;margin-top:16px;pointer-events:auto}
  .spx-footer-v2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .spx-dashboard-command,.spx-export-section,.spx-pricing-section,.spx-summary-roadmap{width:min(100% - 24px,1180px);margin:56px auto}
  .spx-dash-callout{position:relative;display:inline-flex;margin:8px 8px 0 0;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important}
  .spx-price-tabs{display:grid;grid-template-columns:1fr}
}

/* A8.59 auth and shared-file surfaces. Shared files keep their existing
   permission/backend logic; these styles replace the old visual shell. */
.spx-reset-page,
.spx-shared-file-modern{
  min-height:100svh;
  background:
    radial-gradient(720px 420px at 78% 12%,rgba(24,201,245,.16),transparent 70%),
    radial-gradient(620px 380px at 12% 34%,rgba(37,99,235,.14),transparent 72%),
    linear-gradient(180deg,#050711,#070a12 54%,#0b1020);
  color:var(--text);
}
html[data-theme="light"] .spx-reset-page,
html[data-theme="light"] .spx-shared-file-modern{
  background:
    radial-gradient(720px 420px at 78% 12%,rgba(14,165,233,.12),transparent 70%),
    radial-gradient(620px 380px at 12% 34%,rgba(37,99,235,.10),transparent 72%),
    linear-gradient(180deg,#eef6ff,#f6f8fc 54%,#fff);
}
.spx-reset-shell{min-height:100svh;padding-top:clamp(42px,7vw,92px)}
.spx-reset-page .auth-card,
.spx-reset-page .auth-story{
  border-radius:28px;
  border:1px solid rgba(218,236,255,.12);
  background:linear-gradient(145deg,rgba(11,21,38,.80),rgba(6,12,25,.60));
  box-shadow:0 28px 90px rgba(0,0,0,.24);
}
html[data-theme="light"] .spx-reset-page .auth-card,
html[data-theme="light"] .spx-reset-page .auth-story{background:rgba(255,255,255,.82);border-color:rgba(15,23,42,.10);box-shadow:0 24px 70px rgba(22,34,64,.12)}
.spx-reset-page .auth-form label{display:grid;gap:8px;color:var(--secondary);font-weight:850}
.spx-reset-page .auth-form input{
  width:100%;
  min-height:48px;
  border:1px solid rgba(218,236,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:0 14px;
}
html[data-theme="light"] .spx-reset-page .auth-form input{background:#fff;border-color:rgba(15,23,42,.12)}
.spx-shared-file-modern .spx-fv-indexTopbar,
.spx-shared-file-modern .spx-fv-header,
.spx-shared-file-modern .spx-fv-shell,
.spx-shared-file-modern .spx-fv-card,
.spx-shared-file-modern .spx-fv-panel{
  border-color:rgba(107,232,255,.18)!important;
  background:linear-gradient(145deg,rgba(11,21,38,.78),rgba(6,12,25,.58))!important;
  box-shadow:0 24px 80px rgba(0,0,0,.24)!important;
}
html[data-theme="light"] .spx-shared-file-modern .spx-fv-indexTopbar,
html[data-theme="light"] .spx-shared-file-modern .spx-fv-header,
html[data-theme="light"] .spx-shared-file-modern .spx-fv-shell,
html[data-theme="light"] .spx-shared-file-modern .spx-fv-card,
html[data-theme="light"] .spx-shared-file-modern .spx-fv-panel{
  background:rgba(255,255,255,.84)!important;
  border-color:rgba(15,23,42,.10)!important;
  box-shadow:0 24px 70px rgba(22,34,64,.12)!important;
}
.spx-shared-file-modern .spx-fv-title,
.spx-shared-file-modern h1,
.spx-shared-file-modern h2,
.spx-shared-file-modern h3{color:var(--text)!important;letter-spacing:-.035em}
.spx-shared-file-modern p,
.spx-shared-file-modern .spx-fv-meta,
.spx-shared-file-modern .spx-fv-subtitle{color:var(--secondary)!important}
.spx-shared-file-modern a,
.spx-shared-file-modern button{
  border-radius:14px!important;
}
.google-btn.is-disabled{cursor:not-allowed!important;opacity:.68!important;background:rgba(255,255,255,.035)!important;color:var(--muted)!important}
.spx-update-thumb,
.spx-update-detail-hero{
  min-height:170px;
  border-radius:20px;
  border:1px solid rgba(107,232,255,.16);
  margin:-4px -4px 18px;
  background:radial-gradient(circle at 18% 18%,rgba(24,201,245,.18),transparent 48%),radial-gradient(circle at 82% 22%,rgba(37,99,235,.16),transparent 46%),linear-gradient(145deg,rgba(12,23,41,.88),rgba(6,12,24,.74));
  background-size:cover;
  background-position:center;
}
.spx-update-detail{max-width:min(980px,calc(100% - 32px));margin:clamp(48px,7vw,92px) auto}
.spx-update-detail-hero{min-height:clamp(260px,42vw,460px);margin:18px 0 26px}
.spx-update-body{display:grid;gap:12px;color:var(--secondary);line-height:1.72}
.spx-update-body h2,.spx-update-body h3{color:var(--text);margin:20px 0 6px}
.spx-update-body a{color:var(--cyan-2);font-weight:850}
.spx-product-mega .mega-menu{width:min(980px,calc(100vw - 30px));padding:18px}
.spx-product-mega .nav-panel-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.spx-product-mega .nav-feature-link{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  min-height:76px;
  padding:12px!important;
  border-radius:16px!important;
}
.spx-fa{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg,rgba(24,201,245,.18),rgba(37,99,235,.10));
  color:var(--cyan-2);
}
.spx-fa::before{font-weight:1000;font-size:15px}
.fa-gauge-high::before{content:"D"}.fa-wand-magic-sparkles::before{content:"B"}.fa-share-nodes::before{content:"S"}.fa-file-zipper::before{content:"ZIP";font-size:11px!important}.fa-wordpress::before{content:"W"}.fa-folder-open::before{content:"F"}.fa-list-check::before{content:"✓"}.fa-chart-line::before{content:"↗"}.fa-newspaper::before{content:"N"}.fa-life-ring::before{content:"?"}
.nav-feature-text{display:grid;gap:3px;min-width:0}
.nav-feature-text small{color:var(--muted);font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.10em}
.nav-feature-text b{color:var(--text);font-size:14px}
.nav-feature-text em{color:var(--secondary);font-style:normal;font-size:12px;line-height:1.35}
.nav-feature-link>strong{
  padding:5px 7px;
  border-radius:999px;
  border:1px solid rgba(107,232,255,.18);
  color:var(--cyan-2);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.spx-theme-switch{
  min-height:42px!important;
  padding:5px 8px!important;
  border-radius:14px!important;
  border:1px solid rgba(107,232,255,.20)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(24,201,245,.055))!important;
  gap:8px!important;
}
.spx-theme-switch .switch-track{
  width:42px!important;
  height:24px!important;
  border-radius:999px!important;
  padding:3px!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
.spx-theme-switch .switch-track i{width:16px!important;height:16px!important;border-radius:999px!important;background:linear-gradient(135deg,#19d3ff,#2563eb)!important;box-shadow:0 0 18px rgba(24,201,245,.32)!important}
html[data-theme="light"] .spx-theme-switch .switch-track i{transform:translateX(18px)!important;background:linear-gradient(135deg,#078fc2,#0ea5e9)!important}
.spx-theme-switch .switch-label{font-size:12px!important;font-weight:950!important;color:var(--secondary)!important}
.auth-card{position:relative;overflow:hidden}
.auth-card.is-auth-loading .auth-form{opacity:.72;pointer-events:none;filter:saturate(.92)}
.auth-card.is-auth-success .auth-form,.auth-card.is-auth-success>.google-btn,.auth-card.is-auth-success>.auth-links{opacity:0;transform:translateY(10px) scale(.985);pointer-events:none;transition:opacity .28s ease,transform .28s ease}
.auth-success-orb{position:absolute;inset:22px;z-index:8;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;border-radius:24px;border:1px solid rgba(74,222,128,.24);background:radial-gradient(circle at 50% 28%,rgba(74,222,128,.24),transparent 34%),linear-gradient(180deg,rgba(5,22,16,.92),rgba(2,8,15,.88));box-shadow:0 30px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);animation:spxAuthSuccessIn .34s ease both}
.auth-success-orb span{display:grid;place-items:center;width:64px;height:64px;border-radius:999px;background:linear-gradient(135deg,#7ee787,#22c55e);color:#052e16;font-size:30px;font-weight:1000;box-shadow:0 18px 46px rgba(34,197,94,.28)}
.auth-success-orb strong{font-size:22px;color:#f0fff6}
.auth-success-orb small{font-size:13px;font-weight:850;color:rgba(220,252,231,.72)}
@keyframes spxAuthSuccessIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
html[data-theme="light"] .auth-success-orb{background:radial-gradient(circle at 50% 28%,rgba(34,197,94,.18),transparent 34%),linear-gradient(180deg,rgba(248,255,251,.96),rgba(238,246,255,.92));border-color:rgba(22,163,74,.22)}
html[data-theme="light"] .auth-success-orb strong{color:#10231a}
html[data-theme="light"] .auth-success-orb small{color:#475467}
.nav-user-trigger{
  border-radius:16px!important;
  border:1px solid rgba(107,232,255,.20)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(24,201,245,.06))!important;
  padding:6px 10px 6px 6px!important;
  box-shadow:0 14px 34px rgba(0,0,0,.16)!important;
}
.nav-user-trigger img{width:32px!important;height:32px!important;border-radius:12px!important}
.nav-user-dropdown{
  border-radius:18px!important;
  border:1px solid rgba(107,232,255,.18)!important;
  background:linear-gradient(145deg,rgba(8,16,30,.96),rgba(5,10,22,.94))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.26)!important;
}
html[data-theme="light"] .nav-user-dropdown{background:rgba(255,255,255,.96)!important;box-shadow:0 24px 70px rgba(22,34,64,.13)!important}
@media (max-width:900px){.spx-product-mega .nav-panel-columns{grid-template-columns:1fr}.spx-product-mega .mega-menu{width:100%;padding:12px}.spx-product-mega .nav-feature-link{grid-template-columns:34px minmax(0,1fr);}.nav-feature-link>strong{grid-column:2;width:max-content}}

/* A8.60 public completion pass: auth, support, export, pricing, roadmap and light-mode hardening */
:root{
  --spx-a860-cyan:#22d3ee;
  --spx-a860-cyan-soft:rgba(34,211,238,.14);
  --spx-a860-blue:#3b82f6;
  --spx-a860-green:#34d399;
  --spx-a860-ink:#07111f;
  --spx-a860-panel:rgba(8,13,24,.78);
  --spx-a860-line:rgba(255,255,255,.12);
  --spx-a860-text:#f8fbff;
  --spx-a860-muted:rgba(232,241,255,.74);
}
html[data-theme="light"]{
  --spx-a860-panel:rgba(255,255,255,.82);
  --spx-a860-line:rgba(11,31,51,.13);
  --spx-a860-text:#0a1424;
  --spx-a860-muted:rgba(28,44,68,.74);
  --spx-a860-cyan:#0369a1;
  --spx-a860-cyan-soft:rgba(3,105,161,.10);
}
.spx-page-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}.spx-page-cta-row .btn{min-height:46px}.btn.primary.spx-primary-action:hover,.btn.primary:hover{color:#fff!important;text-shadow:0 1px 16px rgba(255,255,255,.22)}.btn-spinner{width:1.05em;height:1.05em;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;display:inline-block;animation:spxBtnSpin .82s linear infinite}@keyframes spxBtnSpin{to{transform:rotate(360deg)}}
/* Auth */
.auth-shell-rich{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.95fr) minmax(360px,.78fr);gap:26px;align-items:stretch;max-width:1180px;margin:0 auto;padding:clamp(96px,10vw,138px) 22px 78px}.auth-shell-rich::before{content:"";position:absolute;inset:52px 0 30px;background:radial-gradient(circle at 18% 12%,rgba(34,211,238,.17),transparent 34%),radial-gradient(circle at 88% 18%,rgba(59,130,246,.17),transparent 32%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);border-radius:42px;box-shadow:0 36px 120px rgba(0,0,0,.34);pointer-events:none;z-index:-1}.auth-story,.auth-card{border:1px solid var(--spx-a860-line);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));box-shadow:0 30px 90px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.auth-story{border-radius:34px;padding:clamp(28px,4vw,46px);display:grid;align-content:end;min-height:520px;overflow:hidden;position:relative}.auth-story::before{content:"";position:absolute;inset:auto -12% -22% 12%;height:52%;background:radial-gradient(circle at 50% 50%,rgba(34,211,238,.24),transparent 60%);filter:blur(8px);opacity:.8}.auth-story h2{font-size:clamp(32px,4vw,62px);line-height:.98;margin:12px 0;color:var(--spx-a860-text)}.auth-story p{color:var(--spx-a860-muted);line-height:1.76;max-width:640px}.auth-story-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.auth-story-points span{padding:9px 12px;border-radius:999px;border:1px solid rgba(34,211,238,.18);background:rgba(34,211,238,.075);font-size:12px;font-weight:900;color:var(--spx-a860-text)}.auth-card{border-radius:34px;padding:clamp(24px,3vw,36px);position:relative;overflow:hidden}.auth-card h1{margin:8px 0 10px;color:var(--spx-a860-text);font-size:clamp(28px,3vw,42px)}.auth-card>p{color:var(--spx-a860-muted);line-height:1.65}.auth-form{display:grid;gap:14px;margin-top:22px}.auth-form label,.spx-public-support-form label{display:grid;gap:8px;font-size:13px;font-weight:900;color:var(--spx-a860-text)}.auth-form input,.auth-form select,.auth-form textarea,.spx-public-support-form input,.spx-public-support-form select,.spx-public-support-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--spx-a860-line);border-radius:18px;background:rgba(255,255,255,.055);color:var(--spx-a860-text);padding:14px 15px;outline:0;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .2s ease}.auth-form input:focus,.auth-form select:focus,.auth-form textarea:focus,.spx-public-support-form input:focus,.spx-public-support-form select:focus,.spx-public-support-form textarea:focus{border-color:rgba(34,211,238,.46);box-shadow:0 0 0 4px rgba(34,211,238,.10);transform:translateY(-1px)}.auth-form select option,.spx-public-support-form select option{background:#0b1221;color:#f8fbff}.auth-form small,.captcha-box p{font-size:12px;color:var(--spx-a860-muted);line-height:1.5}.auth-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:18px}.auth-links a{color:var(--spx-a860-text);font-weight:850;text-decoration:none;opacity:.84}.auth-links a:hover{opacity:1;color:var(--spx-a860-cyan)}.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:13px;padding:13px 16px;border-radius:18px;border:1px solid var(--spx-a860-line);background:rgba(255,255,255,.045);color:var(--spx-a860-text);font-weight:900;text-decoration:none}.google-btn.is-disabled{opacity:.68}.form-status{min-height:22px;margin:2px 0 0;padding:0;color:var(--spx-a860-muted);line-height:1.5}.form-status.is-error{padding:12px 14px;border-radius:16px;border:1px solid rgba(248,113,113,.24);background:rgba(248,113,113,.10);color:#ffdada}.form-status.is-ok{padding:12px 14px;border-radius:16px;border:1px solid rgba(52,211,153,.25);background:rgba(52,211,153,.10);color:#dfffee}.auth-card.is-auth-loading .auth-form{opacity:.55;filter:saturate(.72)}.auth-card.is-auth-success .auth-form,.auth-card.is-auth-success .google-btn,.auth-card.is-auth-success .auth-links,.auth-card.is-auth-success>p{opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .28s ease,transform .28s ease}.auth-success-orb{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:10px;padding:28px;background:radial-gradient(circle at 50% 42%,rgba(52,211,153,.18),rgba(8,13,24,.90) 62%);animation:spxSuccessIn .42s cubic-bezier(.2,.8,.2,1) both}.auth-success-orb span{width:76px;height:76px;margin:0 auto 4px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#6ee7b7,#22c55e);color:#052d1b;font-size:38px;font-weight:1000;box-shadow:0 22px 62px rgba(34,197,94,.34)}.auth-success-orb strong{font-size:26px;color:#fff}.auth-success-orb small{font-size:15px;color:rgba(233,255,246,.76)}@keyframes spxSuccessIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.steps span{height:9px;border-radius:999px;background:rgba(255,255,255,.10);font-size:0}.steps span.is-active{background:linear-gradient(90deg,var(--spx-a860-cyan),var(--spx-a860-blue));box-shadow:0 0 24px rgba(34,211,238,.22)}.register-step{display:none}.register-step.is-active{display:grid;gap:14px}.legal-consent{display:flex!important;grid-template-columns:auto 1fr!important;align-items:flex-start;gap:10px;padding:13px 14px;border:1px solid var(--spx-a860-line);border-radius:18px;background:rgba(255,255,255,.04);line-height:1.55}.legal-consent input{width:auto;margin-top:3px}.conditional-source[hidden],.captcha-box[hidden]{display:none!important}.captcha-box{display:grid;grid-template-columns:minmax(0,1fr);gap:11px;padding:13px;border:1px solid rgba(34,211,238,.18);border-radius:20px;background:rgba(34,211,238,.065)}.captcha-box img{display:block;width:100%;max-width:420px;border-radius:16px}.login-captcha-box{animation:spxCaptchaIn .24s ease both}@keyframes spxCaptchaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* Support */
.spx-support-hero{overflow:hidden}.spx-support-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(360px,.72fr);gap:24px;align-items:start;max-width:1180px;margin:0 auto;padding:46px 22px}.spx-support-copy,.spx-public-support-form,.spx-feature-content,.spx-feature-status,.spx-related-links{border:1px solid var(--spx-a860-line);background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));border-radius:30px;box-shadow:0 26px 80px rgba(0,0,0,.26);backdrop-filter:blur(18px)}.spx-support-copy{padding:30px}.spx-support-copy h2{font-size:clamp(28px,3vw,44px);line-height:1.05;margin:10px 0;color:var(--spx-a860-text)}.spx-support-copy p{color:var(--spx-a860-muted);line-height:1.75}.spx-support-topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}.spx-support-topic-grid article{padding:16px;border-radius:20px;border:1px solid var(--spx-a860-line);background:rgba(255,255,255,.04)}.spx-support-topic-grid b{display:block;color:var(--spx-a860-text);margin-bottom:6px}.spx-support-topic-grid span{display:block;color:var(--spx-a860-muted);font-size:13px;line-height:1.55}.spx-public-support-form{padding:24px;display:grid;gap:14px}.spx-form-grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.spx-public-support-form textarea{resize:vertical;min-height:154px}.support-captcha-box{background:rgba(34,211,238,.06)}
/* Export selector */
.spx-export-grid{display:flex;align-items:stretch;gap:16px;max-width:1180px;margin-left:auto;margin-right:auto}.spx-export-card{flex:1 1 0;min-width:0;cursor:pointer;position:relative;overflow:hidden;transition:flex .42s cubic-bezier(.2,.8,.2,1),transform .24s ease,border-color .24s ease,background .24s ease}.spx-export-card::after{content:"";position:absolute;inset:auto 18px 16px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--spx-a860-cyan),transparent);opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .24s ease,transform .34s ease}.spx-export-grid:has(.spx-export-card.is-active) .spx-export-card:not(.is-active){flex:.48 1 0}.spx-export-card:hover,.spx-export-card:focus-within,.spx-export-card.is-active{flex:1.82 1 0;transform:translateY(-4px);border-color:rgba(34,211,238,.30)!important;background:linear-gradient(180deg,rgba(34,211,238,.10),rgba(255,255,255,.035))!important}.spx-export-card:hover::after,.spx-export-card:focus-within::after,.spx-export-card.is-active::after{opacity:1;transform:scaleX(1)}.spx-export-card p{transition:max-height .34s ease,opacity .24s ease}.spx-export-grid:has(.spx-export-card.is-active) .spx-export-card:not(.is-active) p{max-height:0;overflow:hidden;opacity:0}.spx-export-icon img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(34,211,238,.20))}.spx-more-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-weight:900;color:var(--spx-a860-cyan);text-decoration:none}.spx-more-link::after{content:"→";transition:transform .18s ease}.spx-more-link:hover::after{transform:translateX(4px)}
/* Pricing */
.spx-price-tabs{padding:8px;border:1px solid var(--spx-a860-line);border-radius:999px;background:rgba(255,255,255,.05);width:max-content;max-width:calc(100% - 32px);margin:0 auto 20px}.spx-price-tabs button{border-radius:999px}.spx-price-card{position:relative;overflow:hidden}.spx-price-card::before{content:"";position:absolute;inset:-120px -80px auto auto;width:190px;height:190px;border-radius:999px;background:radial-gradient(circle,rgba(34,211,238,.16),transparent 65%);opacity:.8}.spx-plan-status{display:inline-flex!important;width:max-content;margin-bottom:10px}.spx-price-card h3{display:inline-flex;align-items:center;gap:10px}.spx-price-card[data-price-card="free"] h3::after{content:"Always free";font-size:11px;line-height:1;padding:7px 9px;border-radius:999px;border:1px solid rgba(52,211,153,.25);background:rgba(52,211,153,.10);color:#bdfbe0}.spx-price-card ul{display:grid;gap:9px}.spx-price-card li{line-height:1.45}
/* Roadmap */
.spx-summary-roadmap{position:relative;isolation:isolate}.spx-summary-roadmap::before{content:"";position:absolute;left:50%;top:18%;bottom:12%;width:2px;background:linear-gradient(180deg,transparent,var(--spx-a860-cyan),rgba(59,130,246,.45),transparent);opacity:.42;z-index:-1}.spx-roadmap-flow{position:relative}.spx-roadmap-stage{position:relative;transition:transform .3s ease,border-color .3s ease,background .3s ease}.spx-roadmap-stage::before{content:"";position:absolute;left:50%;top:-18px;width:14px;height:14px;border-radius:50%;background:var(--spx-a860-cyan);box-shadow:0 0 0 8px rgba(34,211,238,.10),0 0 34px rgba(34,211,238,.35);transform:translateX(-50%)}.spx-roadmap-stage.is-active,.spx-roadmap-stage:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.34)!important;background:linear-gradient(180deg,rgba(34,211,238,.095),rgba(255,255,255,.025))!important}.spx-roadmap-item{transition:transform .2s ease,border-color .2s ease}.spx-roadmap-item:hover,.spx-roadmap-item.is-active{transform:translateX(4px);border-color:rgba(34,211,238,.28)!important}
/* Feature pages */
.spx-feature-hero .product-frame img{image-rendering:auto}.spx-feature-content{max-width:1120px;margin:34px auto 0;padding:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.35fr);gap:18px}.spx-feature-main h2,.spx-related-links h2{font-size:clamp(25px,3vw,38px);margin:8px 0;color:var(--spx-a860-text)}.spx-feature-main p,.spx-feature-status p{color:var(--spx-a860-muted);line-height:1.72}.spx-feature-status{padding:20px;background:rgba(34,211,238,.06)}.spx-feature-status b,.spx-feature-status span{display:block}.spx-feature-status span{margin:7px 0 10px;color:var(--spx-a860-cyan);font-weight:950}.spx-related-links{max-width:1120px;margin:34px auto;padding:24px}.spx-related-links div{display:flex;flex-wrap:wrap;gap:10px}.spx-related-links a{padding:10px 13px;border-radius:999px;border:1px solid var(--spx-a860-line);background:rgba(255,255,255,.04);color:var(--spx-a860-text);text-decoration:none;font-weight:900}.spx-related-links a:hover{border-color:rgba(34,211,238,.32);color:var(--spx-a860-cyan)}
/* Settings clickability safety */
.spx-settings-subtab,.spx-accountSectionLine,.spx-themeChoiceCard{position:relative;z-index:2;pointer-events:auto!important}.spx-accountPane:not(.is-active){display:none!important}.spx-accountPane.is-active{display:block}.spx-settings-page--account[data-spx-theme-local="light"]{color:#101827}.spx-settings-page--account[data-spx-theme-local="light"] input,.spx-settings-page--account[data-spx-theme-local="light"] select{color:#101827;background:#fff}.spx-settings-page--account[data-spx-theme-local="light"] .spx-accountSubtabs,.spx-settings-page--account[data-spx-theme-local="light"] .spx-accountPane,.spx-settings-page--account[data-spx-theme-local="light"] .spx-accountIntro{background:rgba(255,255,255,.82);border-color:rgba(13,31,52,.12)}
/* Public file route light cleanup */
html[data-theme="light"] body .spx-fv-pageShell{color:#0a1424}html[data-theme="light"] body .spx-fv-indexTopbar{background:rgba(255,255,255,.72);border-color:rgba(10,31,51,.10)}
@media (max-width:980px){.auth-shell-rich,.spx-support-layout,.spx-feature-content{grid-template-columns:1fr}.auth-story{min-height:auto}.spx-export-grid{display:grid;grid-template-columns:1fr}.spx-export-card,.spx-export-card:hover,.spx-export-card:focus-within,.spx-export-card.is-active{flex:auto;transform:none}.spx-export-grid:has(.spx-export-card.is-active) .spx-export-card:not(.is-active) p{max-height:none;opacity:1}.spx-summary-roadmap::before,.spx-roadmap-stage::before{display:none}}@media (max-width:680px){.auth-shell-rich{padding:88px 14px 42px}.auth-card,.auth-story,.spx-public-support-form,.spx-support-copy{border-radius:24px;padding:20px}.spx-form-grid.two,.spx-support-topic-grid{grid-template-columns:1fr}.spx-price-tabs{width:100%;border-radius:24px;display:grid}.spx-page-cta-row .btn{width:100%}.spx-v26-actions{align-items:stretch}.spx-v26-actions .btn{width:100%}}
.spx-password-meter{display:block;position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden;margin:2px 0 4px}.spx-password-meter i{display:block;height:100%;width:var(--strength,8%);border-radius:inherit;background:linear-gradient(90deg,#fb7185,#fbbf24);transition:width .22s ease,background .22s ease}.spx-password-meter[data-level="medium"] i{background:linear-gradient(90deg,#fbbf24,#22d3ee)}.spx-password-meter[data-level="strong"] i{background:linear-gradient(90deg,#22d3ee,#34d399)}
.spx-faq-list{display:grid;gap:12px;margin-top:18px}.spx-faq-item{border:1px solid var(--spx-a860-line,rgba(255,255,255,.12));border-radius:18px;background:rgba(255,255,255,.045);overflow:hidden}.spx-faq-item summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:950;color:var(--spx-a860-text,#f8fbff);display:flex;justify-content:space-between;gap:16px}.spx-faq-item summary::-webkit-details-marker{display:none}.spx-faq-item summary::after{content:'+';color:var(--spx-a860-cyan,#22d3ee);font-size:20px;line-height:1}.spx-faq-item[open] summary::after{content:'–'}.spx-faq-item p{margin:0;padding:0 18px 18px;color:var(--spx-a860-muted,rgba(232,241,255,.74));line-height:1.7}
.spx-roadmap-page{position:relative;max-width:1120px;margin:36px auto;padding:18px 22px 62px;display:grid;gap:20px}.spx-roadmap-page-line{position:absolute;left:50%;top:20px;bottom:20px;width:2px;background:linear-gradient(180deg,transparent,var(--spx-a860-cyan,#22d3ee),rgba(59,130,246,.45),transparent);opacity:.46}.spx-roadmap-page-stage{position:relative;display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:18px;align-items:start;padding:22px;border:1px solid var(--spx-a860-line,rgba(255,255,255,.12));border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));box-shadow:0 22px 70px rgba(0,0,0,.24);backdrop-filter:blur(18px);transition:transform .28s ease,border-color .28s ease}.spx-roadmap-page-stage::before{content:"";position:absolute;left:50%;top:28px;width:16px;height:16px;border-radius:50%;background:var(--spx-a860-cyan,#22d3ee);box-shadow:0 0 0 8px rgba(34,211,238,.11),0 0 34px rgba(34,211,238,.36);transform:translateX(-50%)}.spx-roadmap-page-stage:hover,.spx-roadmap-page-stage.is-active{transform:translateY(-4px);border-color:rgba(34,211,238,.32)}.spx-roadmap-page-stage header span{display:inline-flex;padding:7px 10px;border-radius:999px;border:1px solid rgba(34,211,238,.24);background:rgba(34,211,238,.09);font-size:11px;font-weight:950;color:var(--spx-a860-cyan,#22d3ee);text-transform:uppercase;letter-spacing:.08em}.spx-roadmap-page-stage h2{margin:12px 0 8px;color:var(--spx-a860-text,#f8fbff);font-size:clamp(24px,3vw,38px);line-height:1.05}.spx-roadmap-page-stage p{margin:0;color:var(--spx-a860-muted,rgba(232,241,255,.74));line-height:1.65}.spx-roadmap-page-items{display:grid;gap:10px}.spx-roadmap-page-item{display:grid;gap:5px;padding:15px 16px;border-radius:20px;border:1px solid var(--spx-a860-line,rgba(255,255,255,.12));background:rgba(255,255,255,.04);transition:transform .2s ease,border-color .2s ease}.spx-roadmap-page-item:hover{transform:translateX(5px);border-color:rgba(34,211,238,.30)}.spx-roadmap-page-item b{color:var(--spx-a860-text,#f8fbff)}.spx-roadmap-page-item span{color:var(--spx-a860-muted,rgba(232,241,255,.74));font-size:13px;line-height:1.5}@media(max-width:860px){.spx-roadmap-page-line,.spx-roadmap-page-stage::before{display:none}.spx-roadmap-page-stage{grid-template-columns:1fr}}

/* A8.61 visual-flow rework: homepage motion, nav menus, auth, support, pricing and shared-file polish. */
.site-header.spx-nav-v26{z-index:1200!important}
.spx-product-menu-v61 .mega-menu{width:min(760px,calc(100vw - 28px))!important;padding:16px!important;gap:14px!important}
.spx-product-menu-v61 .nav-panel-lead{padding:14px 14px 12px!important;border-radius:18px!important;background:linear-gradient(135deg,rgba(24,201,245,.10),rgba(255,255,255,.035))!important}
.spx-mega-compact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.spx-product-menu-v61 .nav-feature-link{min-height:68px!important;padding:11px!important;border-radius:15px!important;grid-template-columns:36px minmax(0,1fr) auto!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(218,236,255,.10)!important}
.spx-product-menu-v61 .nav-feature-link.is-primary{grid-column:1/-1;min-height:76px!important;background:linear-gradient(135deg,rgba(24,201,245,.12),rgba(37,99,235,.08))!important;border-color:rgba(107,232,255,.22)!important}
.spx-mega-secondary-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:4px}
.spx-mega-secondary-row a,.spx-resource-list a{display:grid;gap:4px;border:1px solid rgba(218,236,255,.10);border-radius:14px;padding:10px 12px;text-decoration:none;background:rgba(255,255,255,.03);color:var(--text)}
.spx-mega-secondary-row span,.spx-resource-list i{justify-self:start;border-radius:999px;padding:4px 7px;background:rgba(24,201,245,.10);color:var(--cyan-2);font-size:10px;font-style:normal;font-weight:950;text-transform:uppercase;letter-spacing:.08em}
.spx-resource-menu-v61 .mega-menu{width:min(520px,calc(100vw - 28px))!important;padding:16px!important}
.spx-resource-list{display:grid;gap:8px}.spx-resource-list span{color:var(--secondary);font-size:12px}.nav-updates-link{position:relative}.nav-updates-link::before{content:"";width:7px;height:7px;border-radius:999px;background:#45e6a8;box-shadow:0 0 16px rgba(69,230,168,.7);margin-right:5px;display:inline-block;vertical-align:middle}

/* Hero/What: prevent the builder view from drifting down below the public nav. */
html .spx-hero-v26[data-hero-scrollstory]{--spx-hero-product-fold-y:0px!important;--spx-hero-product-fold-scale-y:1!important;--spx-v26-y:0px!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{top:clamp(128px,15.5vh,172px)!important;width:min(1060px,calc(100vw - 68px))!important;transform:translate3d(-50%,0,0)!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{min-height:clamp(560px,64vh,700px)!important;border-radius:24px!important;background:linear-gradient(145deg,rgba(8,16,31,.98),rgba(4,9,18,.98) 58%,rgba(7,31,49,.90))!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell::before,html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell::after{display:none!important;content:none!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{position:absolute!important;left:22px!important;right:22px!important;top:18px!important;width:min(680px,calc(100% - 44px))!important;height:auto!important;max-height:50px!important;object-fit:contain!important;object-position:left center!important;z-index:8!important;border-radius:14px!important;box-shadow:0 16px 46px rgba(0,0,0,.24)!important;background:rgba(3,8,18,.42)!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{padding:clamp(96px,10vw,126px) clamp(28px,6vw,82px) clamp(36px,5vw,62px)!important;align-items:end!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{max-width:850px!important;margin-top:60px!important}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(238,246,255,.96))!important}

/* How Spixor Works: remove flicker/blank tail and hold step 3 longer. */
html .spx-why-section.spx-why-v52{margin-top:-72svh!important;padding-top:18svh!important;margin-bottom:0!important;opacity:1!important;overflow:visible!important;--v61-how-intro:1;--v61-how-steps:0;--v61-how-exit:0}
html .spx-why-section.spx-why-v52 .spx-why52-track{height:clamp(4200px,560svh,5600px)!important}
html .spx-why-section.spx-why-v52 .spx-why52-sticky{padding:clamp(72px,10vh,116px) 0!important;opacity:calc(1 - var(--v61-how-exit,0))!important;transform:none!important;filter:none!important}
html .spx-why-section.spx-why-v52 .spx-why52-copy{opacity:1!important;transform:none!important;filter:none!important}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{opacity:var(--v61-how-intro,1)!important;transform:translate3d(0,calc((1 - var(--v61-how-intro,1)) * -14px),0)!important;transition:none!important}
html .spx-why-section.spx-why-v52 .why52-step-stack{position:relative;min-height:430px;opacity:var(--v61-how-steps,0)!important}
html .spx-why-section.spx-why-v52 .why52-step{position:absolute!important;inset:0 auto auto 0!important;width:min(620px,100%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translate3d(0,18px,0)!important;transition:opacity .36s ease,transform .36s ease!important}
html .spx-why-section.spx-why-v52 .why52-step.is-active,html .spx-why-section.spx-why-v52 .why52-step[data-spx-active="1"]{opacity:var(--v61-how-steps,1)!important;visibility:visible!important;transform:translate3d(0,0,0)!important}
html .spx-why-section.spx-why-v52 .why52-visual{transition:opacity .48s ease,transform .48s cubic-bezier(.2,.8,.2,1),filter .48s ease!important}
html .spx-why-section.spx-why-v52 .why52-visual img{max-width:min(760px,54vw)!important;transform-origin:right center!important}
html .spx-why-section.spx-why-v52 .why52-visual-card{max-width:390px!important}

/* Dashboard story: fullscreen, controlled and readable. */
.spx-dashboard-command-v61{width:100vw!important;max-width:none!important;margin:0 0 clamp(72px,8vw,120px) calc(50% - 50vw)!important;min-height:420svh!important;display:block!important;position:relative!important;overflow:clip!important;--dash-focus:0;--dash-copy-opacity:1}
.spx-dashboard-command-v61 .spx-dash-visual{position:sticky!important;top:72px!important;height:calc(100svh - 72px)!important;display:grid!important;place-items:center!important;align-items:center!important;overflow:hidden!important;z-index:20!important}
.spx-dashboard-command-v61 .spx-dash-frame{position:relative!important;top:auto!important;width:min(1520px,96vw)!important;max-width:none!important;margin:0!important;transform:none!important;transform-origin:center!important;border-radius:28px!important;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)!important}
.spx-dashboard-command-v61 .spx-dash-frame img{aspect-ratio:16/9!important;object-fit:cover!important;transition:opacity .46s ease!important}
.spx-dashboard-command-v61 .spx-dash-copy{position:sticky!important;top:calc(72px + 7vh)!important;z-index:80!important;width:min(430px,calc(100vw - 34px))!important;margin:-82svh clamp(18px,4vw,72px) 0 auto!important;transform:none!important;opacity:var(--dash-copy-opacity,1)!important;background:linear-gradient(145deg,rgba(7,16,32,.88),rgba(4,10,22,.74))!important;backdrop-filter:blur(18px) saturate(145%)!important}
html[data-theme="light"] .spx-dashboard-command-v61 .spx-dash-copy{background:rgba(255,255,255,.84)!important}
.spx-dashboard-command-v61 .spx-dash-callout{z-index:9!important}.spx-dashboard-command-v61.is-switching .spx-dash-frame img{opacity:.22!important}

/* Export selector: softer selected state instead of harsh hover collapse. */
.spx-export-section-v61 .spx-export-grid,.spx-export-section-v61 .spx-export-grid:has(.spx-export-card:hover),.spx-export-section-v61 .spx-export-grid:has(.spx-export-card:focus-within){grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;transition:none!important}
.spx-export-section-v61 .spx-export-card{min-height:250px!important;cursor:pointer!important;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s ease,box-shadow .45s ease,background .45s ease!important}
.spx-export-section-v61 .spx-export-card:not(.is-active){opacity:.82;transform:translateY(0) scale(.985)!important}
.spx-export-section-v61 .spx-export-card.is-active{opacity:1;transform:translateY(-4px) scale(1.018)!important;border-color:rgba(107,232,255,.44)!important;box-shadow:0 28px 92px rgba(0,0,0,.24),0 0 36px rgba(24,201,245,.13)!important;background:linear-gradient(145deg,rgba(12,26,49,.84),rgba(6,12,24,.66))!important}
.spx-export-section-v61 .spx-export-grid .spx-export-card p,.spx-export-section-v61 .spx-export-grid .spx-export-card .spx-more-link{opacity:1!important;max-height:none!important;margin-top:16px!important;pointer-events:auto!important;overflow:visible!important}
.spx-export-section-v61 .spx-export-icon{color:#eaffff!important;background:linear-gradient(135deg,rgba(24,201,245,.16),rgba(37,99,235,.10))!important;border:1px solid rgba(107,232,255,.22)!important;box-shadow:0 14px 34px rgba(0,0,0,.16)!important}
.spx-export-section-v61 .spx-export-icon img{filter:none!important;color:currentColor!important;object-fit:contain!important}

/* Pricing: no tabs, icon/status in one row, professional list marks. */
.spx-pricing-section-v61 .spx-price-tabs{display:none!important}.spx-pricing-section-v61 .spx-price-grid{align-items:stretch!important}.spx-pricing-section-v61 .spx-plan-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.spx-pricing-section-v61 .spx-plan-icon{margin:0!important}.spx-pricing-section-v61 .spx-plan-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.spx-pricing-section-v61 .spx-plan-status{margin:0!important;align-self:center!important}.spx-pricing-section-v61 .spx-price-card li{display:grid;grid-template-columns:20px 1fr;gap:9px;align-items:start}.spx-pricing-section-v61 .spx-price-card li::before{content:""!important;width:18px;height:18px;margin:2px 0 0!important;border-radius:999px;background:linear-gradient(135deg,rgba(69,230,168,.95),rgba(24,201,245,.9));box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 22px rgba(24,201,245,.18);content:"✓"!important;color:#021017;font-size:12px;font-weight:1000;display:grid;place-items:center;line-height:1}.spx-pricing-section-v61 .spx-price-card p b{color:var(--cyan-2)}

/* Roadmap rework. */
.spx-summary-roadmap-v61{grid-template-columns:.86fr 1.14fr!important;align-items:center!important}.spx-roadmap-orbit-v61{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:18px;border:1px solid rgba(107,232,255,.14);border-radius:30px;background:radial-gradient(ellipse at center,rgba(24,201,245,.08),transparent 68%)}.spx-roadmap-orbit-v61::before{content:"";position:absolute;inset:18px;border:1px solid rgba(107,232,255,.15);border-radius:50%;transform:rotate(-8deg);pointer-events:none}.spx-roadmap-orbit-card{position:relative;z-index:2;min-height:230px;border:1px solid rgba(218,236,255,.12);border-radius:24px;padding:22px;background:linear-gradient(145deg,rgba(12,23,41,.76),rgba(6,12,24,.58));box-shadow:0 22px 70px rgba(0,0,0,.20);transition:transform .34s var(--ease),border-color .34s var(--ease)}.spx-roadmap-orbit-card.is-active,.spx-roadmap-orbit-card:hover{transform:translateY(-5px);border-color:rgba(107,232,255,.38)}.spx-roadmap-orbit-card span,.spx-roadmap-phase-marker b{display:grid;place-items:center;width:44px;height:44px;border-radius:16px;background:linear-gradient(135deg,rgba(24,201,245,.18),rgba(37,99,235,.10));color:var(--cyan-2);font-weight:1000}.spx-roadmap-orbit-card h3{font-size:24px;line-height:1.08;color:var(--text);margin:22px 0 10px}.spx-roadmap-orbit-card p{color:var(--secondary);line-height:1.55}.spx-roadmap-hero-v61{width:min(1180px,calc(100% - 32px));margin:clamp(56px,8vw,110px) auto 28px;text-align:left}.spx-roadmap-hero-v61 h1{font-size:clamp(44px,7vw,86px);line-height:.95;letter-spacing:-.065em;color:var(--text);max-width:980px}.spx-roadmap-hero-v61 p{font-size:clamp(17px,1.7vw,22px);color:var(--secondary);line-height:1.6;max-width:790px}.spx-roadmap-board-v61{position:relative;width:min(1180px,calc(100% - 32px));margin:0 auto clamp(72px,9vw,130px);display:grid;gap:20px}.spx-roadmap-rail-v61{position:absolute;left:30px;top:20px;bottom:20px;width:3px;background:linear-gradient(180deg,var(--cyan-2),rgba(37,99,235,.3),rgba(69,230,168,.5));border-radius:999px;opacity:.65}.spx-roadmap-phase-v61{position:relative;display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px;padding:22px;border:1px solid rgba(218,236,255,.12);border-radius:28px;background:linear-gradient(145deg,rgba(12,23,41,.72),rgba(6,12,24,.50));box-shadow:0 24px 80px rgba(0,0,0,.18)}.spx-roadmap-phase-marker{display:grid;align-content:start;gap:12px}.spx-roadmap-phase-marker span{color:var(--cyan-2);font-weight:1000}.spx-roadmap-phase-content h2{margin:0 0 8px;color:var(--text);font-size:clamp(28px,4vw,48px);letter-spacing:-.045em}.spx-roadmap-phase-content>p{margin:0 0 16px;color:var(--secondary);font-size:18px}.spx-roadmap-task-grid-v61{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.spx-roadmap-task-v61{border:1px solid rgba(107,232,255,.12);border-radius:18px;padding:15px;background:rgba(255,255,255,.035)}.spx-roadmap-task-v61 span{display:inline-flex;margin-bottom:8px;border-radius:999px;padding:5px 8px;background:rgba(24,201,245,.10);color:var(--cyan-2);font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.spx-roadmap-task-v61 b{display:block;color:var(--text);font-size:16px}.spx-roadmap-task-v61 p{color:var(--secondary);line-height:1.5;margin:6px 0 0}

/* Auth rework. */
.auth-shell-v61{min-height:calc(100svh - 92px)!important;padding:clamp(32px,5vw,64px) var(--side)!important;gap:18px!important}.auth-shell-v61 .auth-story,.auth-shell-v61 .auth-card{border-radius:28px!important;background:linear-gradient(145deg,rgba(11,21,38,.82),rgba(6,12,25,.66))!important;border:1px solid rgba(107,232,255,.14)!important;box-shadow:0 24px 80px rgba(0,0,0,.22)!important}.auth-shell-v61 .auth-story{padding:clamp(22px,3vw,34px)!important}.auth-shell-v61 .auth-card{padding:clamp(24px,3.2vw,40px)!important}.auth-shell-v61 .auth-card h1,.auth-shell-v61 .auth-story h2{font-size:clamp(34px,4.6vw,58px)!important}.auth-shell-v61 .auth-form input,.auth-shell-v61 .auth-form select,.auth-shell-v61 .auth-form textarea,.auth-shell-v61 .register-step select{border-radius:14px!important;background:rgba(255,255,255,.055)!important;border-color:rgba(218,236,255,.13)!important}.auth-register-v61.is-form-focus{grid-template-columns:minmax(320px,760px)!important;place-content:center!important}.auth-register-v61.is-form-focus .auth-story{display:none!important}.auth-register-v61.is-form-focus .register-card{width:min(760px,100%)!important}.auth-register-v61 .spx-form-grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.spx-reset-page .spx-reset-shell{min-height:calc(100svh - 78px)!important;grid-template-columns:minmax(320px,620px)!important;place-content:center!important;padding:clamp(28px,5vw,62px) var(--side)!important}.spx-reset-page .auth-story{display:none!important}.spx-reset-page .auth-card{width:min(620px,100%)!important}.spx-auth-mini-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;width:min(1180px,calc(100% - 32px));margin:18px auto 0}.spx-auth-mini-nav a{color:var(--text);text-decoration:none;font-weight:900}.spx-auth-mini-nav .brand-link{display:flex;align-items:center;gap:10px}.spx-auth-mini-nav img{width:38px;height:38px;border-radius:999px}

/* Support rework. */
.spx-support-hero-v61,.spx-support-workspace-v61,.spx-support-faq-v61{width:min(1180px,calc(100% - 32px));margin:clamp(52px,7vw,100px) auto}.spx-support-hero-v61{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:24px;align-items:stretch}.spx-support-hero-v61>div,.spx-support-hero-v61 aside,.spx-support-copy-v61,.spx-public-support-form-v61{border:1px solid rgba(218,236,255,.12);border-radius:28px;background:linear-gradient(145deg,rgba(11,21,38,.78),rgba(6,12,25,.58));box-shadow:0 24px 80px rgba(0,0,0,.20);padding:clamp(24px,4vw,46px)}.spx-support-hero-v61 h1{font-size:clamp(44px,7vw,84px);line-height:.95;letter-spacing:-.065em;color:var(--text);margin:12px 0}.spx-support-hero-v61 p,.spx-support-copy-v61 p{color:var(--secondary);font-size:clamp(16px,1.5vw,20px);line-height:1.65}.spx-support-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.spx-support-hero-v61 aside{display:grid;align-content:center;gap:10px}.spx-support-hero-v61 aside b{font-size:22px;color:var(--text)}.spx-support-hero-v61 aside span{border:1px solid rgba(107,232,255,.13);border-radius:16px;padding:12px 14px;color:var(--secondary);background:rgba(255,255,255,.035)}.spx-support-workspace-v61{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:start}.spx-public-support-form-v61{display:grid;gap:14px}.spx-public-support-form-v61 label{display:grid;gap:8px;color:var(--secondary);font-weight:850}.spx-public-support-form-v61 input,.spx-public-support-form-v61 select,.spx-public-support-form-v61 textarea{width:100%;border-radius:15px;border:1px solid rgba(218,236,255,.13);background:rgba(255,255,255,.055);color:var(--text);padding:13px 14px;outline:0}.spx-support-topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}.spx-support-topic-grid article{border:1px solid rgba(107,232,255,.12);border-radius:18px;padding:15px;background:rgba(255,255,255,.035)}.spx-support-topic-grid b{display:block;color:var(--text);margin-bottom:6px}.spx-support-topic-grid span{color:var(--secondary);font-size:14px;line-height:1.5}.spx-support-faq-v61{padding:clamp(24px,4vw,44px);border:1px solid rgba(218,236,255,.12);border-radius:28px;background:linear-gradient(145deg,rgba(11,21,38,.72),rgba(6,12,25,.50))}

/* Updates and public file surfaces. */
.spx-updates-grid .spx-update-card,.spx-update-detail{border:1px solid rgba(218,236,255,.12);border-radius:28px;background:linear-gradient(145deg,rgba(11,21,38,.76),rgba(6,12,25,.56));padding:clamp(20px,3vw,34px);box-shadow:0 24px 80px rgba(0,0,0,.20)}.spx-update-detail{max-width:min(1040px,calc(100% - 32px))!important}.spx-update-detail h1{font-size:clamp(42px,6vw,76px);line-height:.95;letter-spacing:-.06em}.spx-shared-file-modern .spx-fv-pageShell::before{background:radial-gradient(720px 420px at 78% 12%,rgba(24,201,245,.16),transparent 70%),radial-gradient(620px 380px at 12% 34%,rgba(37,99,235,.14),transparent 72%),linear-gradient(180deg,#050711,#070a12 54%,#0b1020)!important;filter:none!important;opacity:1!important;transform:none!important}.spx-shared-file-modern #spxScene{display:none!important}.spx-shared-file-modern .spx-fv-pageShell::after{background:radial-gradient(circle at 50% 50%,rgba(24,201,245,.16),rgba(37,99,235,.06) 46%,transparent 70%)!important}.spx-shared-file-modern .spx-fv-indexTopbar{background:rgba(5,10,22,.74)!important;border-color:rgba(107,232,255,.14)!important}.spx-shared-file-modern .spx-fv-root{margin-top:34px!important}.spx-shared-file-modern .spx-fv-header{border:1px solid rgba(218,236,255,.12)!important;border-radius:28px!important;padding:clamp(22px,3vw,34px)!important;background:linear-gradient(145deg,rgba(11,21,38,.78),rgba(6,12,25,.58))!important;box-shadow:0 24px 80px rgba(0,0,0,.20)!important}.spx-shared-file-modern .spx-fv-main-grid{gap:22px!important}.spx-shared-file-modern .spx-preview-shell-block,.spx-shared-file-modern .spx-fv-sidebar,.spx-shared-file-modern .spx-fv-panel{border:1px solid rgba(218,236,255,.12)!important;border-radius:28px!important;background:linear-gradient(145deg,rgba(11,21,38,.72),rgba(6,12,25,.50))!important;box-shadow:0 24px 80px rgba(0,0,0,.18)!important}
html[data-theme="light"] .spx-support-hero-v61>div,html[data-theme="light"] .spx-support-hero-v61 aside,html[data-theme="light"] .spx-support-copy-v61,html[data-theme="light"] .spx-public-support-form-v61,html[data-theme="light"] .spx-support-faq-v61,html[data-theme="light"] .spx-roadmap-phase-v61,html[data-theme="light"] .spx-roadmap-orbit-card,html[data-theme="light"] .spx-updates-grid .spx-update-card,html[data-theme="light"] .spx-update-detail,html[data-theme="light"] .auth-shell-v61 .auth-card,html[data-theme="light"] .auth-shell-v61 .auth-story{background:rgba(255,255,255,.84)!important;border-color:rgba(15,23,42,.10)!important;box-shadow:0 24px 70px rgba(22,34,64,.12)!important}
@media (max-width:980px){.spx-mega-compact-grid,.spx-mega-secondary-row,.spx-support-hero-v61,.spx-support-workspace-v61,.spx-summary-roadmap-v61,.spx-roadmap-orbit-v61,.spx-roadmap-phase-v61{grid-template-columns:1fr!important}.spx-product-menu-v61 .mega-menu,.spx-resource-menu-v61 .mega-menu{width:auto!important}.spx-dashboard-command-v61{min-height:auto!important;width:min(100% - 24px,1180px)!important;margin:56px auto!important;overflow:visible!important}.spx-dashboard-command-v61 .spx-dash-visual{position:relative!important;top:auto!important;height:auto!important}.spx-dashboard-command-v61 .spx-dash-copy{position:relative!important;top:auto!important;margin:18px 0 0!important;width:100%!important}.spx-export-section-v61 .spx-export-grid,.spx-pricing-section-v61 .spx-price-grid{grid-template-columns:1fr!important}.spx-auth-mini-nav{margin-top:12px}.auth-shell-v61,.auth-register-v61.is-form-focus{grid-template-columns:1fr!important}.auth-register-v61 .spx-form-grid.two,.spx-support-topic-grid,.spx-roadmap-task-grid-v61{grid-template-columns:1fr!important}html .spx-why-section.spx-why-v52{margin-top:0!important;padding-top:0!important}.spx-roadmap-rail-v61{display:none}}
@media (max-width:640px){html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{width:calc(100% - 28px)!important;left:14px!important;right:14px!important}.spx-support-hero-actions{display:grid}.spx-roadmap-hero-v61,.spx-roadmap-board-v61,.spx-support-hero-v61,.spx-support-workspace-v61,.spx-support-faq-v61{width:min(100% - 24px,1180px)}}

/* A8.61.1 final smoothing overrides. */
html .spx-why-section.spx-why-v52 .spx-why52-track{height:clamp(3800px,500svh,5000px)!important;min-height:0!important}
.spx-dashboard-command-v61 .spx-dash-frame{isolation:isolate!important;overflow:hidden!important}
.spx-dashboard-command-v61 .spx-dash-fade-ghost{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;z-index:3!important;opacity:1!important;transition:opacity .48s ease,transform .54s cubic-bezier(.2,.8,.2,1)!important;pointer-events:none!important}
.spx-dashboard-command-v61 .spx-dash-fade-ghost.is-fading{opacity:0!important;transform:scale(1.012)!important}
.spx-dashboard-command-v61 .spx-dash-frame .spx-dash-image{position:relative!important;z-index:2!important}
.spx-dashboard-command-v61.is-switching .spx-dash-frame img.spx-dash-image{opacity:1!important}
.spx-export-section-v61 .spx-export-card .spx-export-icon img{width:32px!important;height:32px!important;object-fit:contain!important;display:block!important}
.spx-export-section-v61 .spx-export-card:not(.is-active) .spx-more-link{opacity:.78!important}
.spx-export-section-v61 .spx-export-card:focus-visible{outline:3px solid rgba(24,201,245,.45)!important;outline-offset:5px!important}
.spx-forgot-v61{grid-template-columns:minmax(320px,620px)!important;place-content:center!important;min-height:calc(100svh - 92px)!important}.spx-forgot-v61 .auth-card{width:min(620px,100%)!important}

/* A8.62 targeted visual repair: homepage scroll sections, export cards, roadmap, auth and public support. */
html .spx-scroll-top{position:fixed!important;right:clamp(18px,2.2vw,34px)!important;bottom:clamp(18px,2.2vw,34px)!important;z-index:1500!important;width:52px!important;height:52px!important;border-radius:999px!important;display:grid!important;place-items:center!important;border:1px solid rgba(107,232,255,.35)!important;background:linear-gradient(145deg,rgba(8,20,37,.92),rgba(4,12,25,.88))!important;color:#eafcff!important;box-shadow:0 18px 54px rgba(0,0,0,.34),0 0 28px rgba(34,211,238,.18)!important;opacity:0!important;pointer-events:none!important;transform:translate3d(0,14px,0) scale(.94)!important;transition:opacity .26s ease,transform .26s ease,border-color .26s ease,background .26s ease!important}
html .spx-scroll-top.is-visible{opacity:1!important;pointer-events:auto!important;transform:translate3d(0,0,0) scale(1)!important}
html .spx-scroll-top:hover{border-color:rgba(107,232,255,.72)!important;background:linear-gradient(145deg,rgba(23,181,255,.92),rgba(37,99,235,.88))!important}
html[data-theme="light"] .spx-scroll-top{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(224,244,255,.93))!important;color:#06334a!important;box-shadow:0 18px 44px rgba(15,23,42,.16)!important}

/* What is Spixor: topbar sits above the builder canvas, not inside the content card. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{top:clamp(130px,16vh,184px)!important;left:50%!important;width:min(1080px,calc(100vw - 64px))!important;transform:translate3d(-50%,0,0)!important;filter:none!important;will-change:opacity!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{position:relative!important;display:flex!important;flex-direction:column!important;gap:14px!important;min-height:clamp(560px,65vh,720px)!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{position:relative!important;top:auto!important;left:auto!important;right:auto!important;z-index:12!important;width:min(760px,calc(100% - 56px))!important;max-height:58px!important;margin:0 0 -2px 28px!important;display:block!important;object-fit:contain!important;object-position:left center!important;border-radius:18px!important;background:linear-gradient(180deg,rgba(7,15,30,.92),rgba(4,9,18,.86))!important;border:1px solid rgba(107,232,255,.18)!important;box-shadow:0 18px 52px rgba(0,0,0,.32),0 0 30px rgba(34,211,238,.08)!important;transform:none!important;filter:none!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{position:relative!important;flex:1!important;min-height:0!important;padding:clamp(34px,5vw,64px)!important;border-radius:30px!important;background:radial-gradient(720px 420px at 24% 0%,rgba(34,211,238,.15),transparent 65%),linear-gradient(145deg,rgba(8,16,31,.98),rgba(4,9,18,.98) 58%,rgba(7,31,49,.92))!important;border:1px solid rgba(107,232,255,.16)!important;box-shadow:0 34px 120px rgba(0,0,0,.48)!important;overflow:hidden!important;align-items:center!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page::before{content:""!important;position:absolute!important;inset:18px!important;border-radius:24px!important;border:1px solid rgba(255,255,255,.06)!important;pointer-events:none!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{position:relative!important;z-index:2!important;max-width:920px!important;margin:0!important;border-radius:26px!important;padding:clamp(22px,3vw,34px)!important;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045))!important;border:1px solid rgba(218,236,255,.13)!important;box-shadow:0 24px 80px rgba(0,0,0,.26)!important;backdrop-filter:blur(14px)!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head{gap:10px!important;margin-bottom:18px!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{font-size:clamp(24px,4vw,46px)!important;line-height:1.02!important;letter-spacing:-.045em!important;color:var(--text)!important;max-width:760px!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy p{font-size:clamp(15px,1.2vw,18px)!important;line-height:1.65!important;color:var(--secondary)!important;max-width:620px!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;margin:18px 0!important;padding:12px 14px!important;border-radius:18px!important;background:linear-gradient(135deg,rgba(245,184,91,.16),rgba(34,211,238,.08))!important;border:1px solid rgba(245,184,91,.22)!important;color:rgba(255,247,228,.88)!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice b{white-space:nowrap!important;color:#ffd796!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.1em!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice span{font-size:13px!important;line-height:1.45!important;color:rgba(247,252,255,.82)!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice a{white-space:nowrap!important;color:#9eeeff!important;font-weight:950!important;text-decoration:none!important}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{background:radial-gradient(720px 420px at 24% 0%,rgba(14,165,233,.13),transparent 65%),linear-gradient(145deg,rgba(255,255,255,.98),rgba(235,246,255,.94))!important;box-shadow:0 34px 100px rgba(15,23,42,.16)!important;border-color:rgba(15,23,42,.12)!important}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-content-card{background:rgba(255,255,255,.74)!important;border-color:rgba(15,23,42,.10)!important;box-shadow:0 24px 70px rgba(15,23,42,.12)!important}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice span{color:rgba(15,23,42,.72)!important}

/* How Spixor Works: stable v62 pinned story, no flickering intro loop and no long blank tail. */
html .spx-why-section.spx-why-v52{margin:0!important;padding:clamp(52px,7vw,88px) 0!important;background:transparent!important;min-height:auto!important;overflow:clip!important}
html .spx-why52-shell{width:min(1280px,calc(100% - 40px))!important;margin:0 auto!important}
html .spx-why52-track{height:clamp(1320px,250vh,2100px)!important;min-height:0!important;position:relative!important}
html .spx-why52-sticky{position:sticky!important;top:clamp(76px,10vh,110px)!important;min-height:calc(100svh - 130px)!important;display:grid!important;grid-template-columns:minmax(340px,.88fr) minmax(420px,1.12fr)!important;gap:clamp(24px,4vw,58px)!important;align-items:center!important;opacity:1!important;transform:none!important;filter:none!important}
html .spx-why52-copy{position:relative!important;display:grid!important;gap:18px!important;min-height:560px!important;align-content:center!important}
html .spx-why52-story-head{position:relative!important;opacity:calc(1 - var(--how-v62-steps,0))!important;transform:translate3d(0,calc(-12px * var(--how-v62-steps,0)),0)!important;transition:opacity .18s linear!important;pointer-events:none!important}
html .spx-why52-story-head h2{font-size:clamp(40px,6vw,78px)!important;line-height:.95!important;letter-spacing:-.06em!important;margin:12px 0!important;color:var(--text)!important}
html .spx-why52-story-head p{font-size:clamp(16px,1.5vw,21px)!important;line-height:1.62!important;color:var(--secondary)!important;max-width:620px!important}
html .why52-step-nav{position:absolute!important;top:0!important;left:0!important;display:flex!important;gap:10px!important;opacity:var(--how-v62-steps,0)!important;transform:translateY(calc(8px * (1 - var(--how-v62-steps,0))))!important;z-index:4!important}
html .why52-step-stack{position:absolute!important;inset:86px 0 0 0!important;min-height:430px!important;display:block!important;opacity:var(--how-v62-steps,0)!important;z-index:3!important}
html .why52-step{position:absolute!important;inset:0 auto auto 0!important;width:min(100%,620px)!important;min-height:430px!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translate3d(0,24px,0)!important;transition:opacity .28s ease,transform .28s ease,visibility .28s ease!important;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035))!important;border:1px solid rgba(218,236,255,.12)!important;border-radius:28px!important;padding:clamp(22px,3vw,34px)!important;box-shadow:0 22px 80px rgba(0,0,0,.22)!important;backdrop-filter:blur(16px)!important}
html .why52-step.is-active,html .why52-step[data-v62-active="1"]{opacity:var(--how-v62-steps,1)!important;visibility:visible!important;pointer-events:auto!important;transform:translate3d(0,0,0)!important}
html .why52-step h3{font-size:clamp(25px,3.2vw,44px)!important;line-height:1.05!important;letter-spacing:-.04em!important;color:var(--text)!important;margin:16px 0 12px!important}
html .why52-step p,html .why52-step ul{opacity:1!important;max-height:none!important;visibility:visible!important;color:var(--secondary)!important}
html .why52-progress{display:block!important;height:4px!important;border-radius:999px!important;background:linear-gradient(90deg,#22d3ee,#2563eb)!important;transform-origin:left center!important;transform:scaleX(var(--how-v62-local,.1))!important;margin:14px 0!important}
html .spx-why52-stage{position:relative!important;height:min(70vh,680px)!important;min-height:540px!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
html .why52-network{position:absolute!important;inset:0!important;opacity:.32!important;filter:drop-shadow(0 0 22px rgba(34,211,238,.16))!important}
html .why52-visuals{position:absolute!important;inset:0!important;overflow:visible!important;perspective:1200px!important}
html .why52-visual{position:absolute!important;inset:0!important;margin:0!important;display:grid!important;place-items:center!important;opacity:0!important;visibility:hidden!important;transform:translate3d(16vw,24px,0) scale(.96)!important;transition:opacity .34s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility .34s ease!important;filter:none!important;pointer-events:none!important}
html .why52-visual.is-active,html .why52-visual[data-v62-active="1"]{opacity:var(--how-v62-steps,1)!important;visibility:visible!important;transform:translate3d(0,0,0) scale(1)!important}
html .why52-visual img{max-width:min(760px,54vw)!important;max-height:58vh!important;object-fit:contain!important;border-radius:26px!important;box-shadow:0 36px 120px rgba(0,0,0,.42)!important;filter:none!important}
html .why52-visual-card{position:absolute!important;left:clamp(16px,4vw,58px)!important;bottom:clamp(14px,4vh,42px)!important;width:min(420px,calc(100% - 32px))!important;border-radius:22px!important;padding:18px 20px!important;background:rgba(5,12,24,.74)!important;border:1px solid rgba(107,232,255,.18)!important;backdrop-filter:blur(14px)!important;box-shadow:0 20px 70px rgba(0,0,0,.28)!important}
html .why52-visual-card p{color:rgba(232,241,255,.74)!important;line-height:1.55!important;margin:8px 0 0!important}

/* Full-screen dashboard command center. */
html .spx-dashboard-command-v61{position:relative!important;width:100vw!important;max-width:none!important;margin:0 calc(50% - 50vw)!important;padding:0!important;min-height:240svh!important;border:0!important;border-radius:0!important;background:linear-gradient(180deg,rgba(3,7,16,.1),rgba(3,7,16,.72) 45%,rgba(3,7,16,.08))!important;overflow:visible!important;display:block!important;box-shadow:none!important}
html .spx-dashboard-command-v61::before{content:""!important;position:absolute!important;inset:0!important;background:radial-gradient(900px 520px at 78% 20%,rgba(34,211,238,.14),transparent 65%),radial-gradient(720px 420px at 12% 58%,rgba(37,99,235,.10),transparent 62%)!important;pointer-events:none!important}
html .spx-dashboard-command-v61 .spx-dash-visual{position:sticky!important;top:0!important;height:100svh!important;width:100vw!important;margin:0!important;display:block!important;z-index:1!important;overflow:hidden!important}
html .spx-dashboard-command-v61 .spx-dash-frame{position:absolute!important;inset:clamp(72px,8vh,96px) clamp(18px,3vw,48px) clamp(28px,4vh,48px)!important;margin:0!important;border-radius:34px!important;overflow:hidden!important;border:1px solid rgba(107,232,255,.18)!important;background:#060b16!important;box-shadow:0 44px 150px rgba(0,0,0,.48)!important}
html .spx-dashboard-command-v61 .spx-dash-frame img,html .spx-dashboard-command-v61 [data-dashboard-image]{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;filter:none!important;transform:scale(calc(1 + var(--dash-focus,0) * .018))!important;transition:opacity .52s ease,transform .58s ease!important}
html .spx-dashboard-command-v61 .spx-dash-copy{position:sticky!important;top:clamp(105px,13vh,142px)!important;z-index:5!important;width:min(470px,calc(100vw - 42px))!important;margin:-100svh 0 0 clamp(20px,5vw,82px)!important;padding:clamp(20px,2.5vw,30px)!important;border-radius:28px!important;background:linear-gradient(180deg,rgba(5,12,24,.78),rgba(3,7,16,.68))!important;border:1px solid rgba(107,232,255,.18)!important;box-shadow:0 30px 110px rgba(0,0,0,.42)!important;backdrop-filter:blur(18px)!important;color:var(--text)!important;min-height:auto!important}
html .spx-dashboard-command-v61 .spx-dash-copy h2{font-size:clamp(34px,4.2vw,58px)!important;line-height:1!important;letter-spacing:-.05em!important;margin:10px 0 12px!important}
html .spx-dashboard-command-v61 .spx-dash-copy p{color:rgba(232,241,255,.78)!important;line-height:1.6!important}
html .spx-dashboard-command-v61 .spx-dash-tabs{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin:18px 0!important}
html .spx-dashboard-command-v61 .spx-dash-tabs button{display:flex!important;align-items:center!important;gap:12px!important;justify-content:flex-start!important;padding:10px 12px!important;border-radius:16px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.08)!important;color:rgba(232,241,255,.76)!important;transition:background .25s ease,border-color .25s ease,transform .25s ease!important}
html .spx-dashboard-command-v61 .spx-dash-tabs button.is-active,html .spx-dashboard-command-v61 .spx-dash-tabs button.active{background:rgba(34,211,238,.12)!important;border-color:rgba(34,211,238,.34)!important;color:#effdff!important;transform:translateX(4px)!important}
html .spx-dashboard-command-v61 .spx-dash-panel{display:none!important}.spx-dashboard-command-v61 .spx-dash-panel.is-active,.spx-dashboard-command-v61 .spx-dash-panel.active{display:block!important}.spx-dashboard-command-v61 .spx-dash-fade-ghost{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;z-index:3!important;opacity:1!important;transition:opacity .7s ease!important}.spx-dashboard-command-v61 .spx-dash-fade-ghost.is-fading{opacity:0!important}

/* Export-first workflow v62: calm cards, colorable icons, no black img icons. */
html .spx-export-section-v61{width:min(1220px,calc(100% - 40px))!important;margin:clamp(70px,9vw,120px) auto!important;border-radius:36px!important;padding:clamp(26px,4vw,54px)!important;background:radial-gradient(800px 360px at 18% 0%,rgba(34,211,238,.12),transparent 64%),linear-gradient(180deg,rgba(8,15,29,.78),rgba(4,8,18,.64))!important;border:1px solid rgba(218,236,255,.11)!important;box-shadow:0 30px 100px rgba(0,0,0,.22)!important}
html .spx-export-section-v61 .spx-section-kicker p{max-width:740px!important;color:var(--secondary)!important}
html .spx-export-section-v61 .spx-export-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;align-items:stretch!important;min-height:0!important}
html .spx-export-section-v61 .spx-export-card{position:relative!important;min-height:330px!important;padding:24px!important;border-radius:28px!important;border:1px solid rgba(218,236,255,.11)!important;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;color:var(--text)!important;box-shadow:0 18px 60px rgba(0,0,0,.16)!important;transform:none!important;transition:transform .32s ease,border-color .32s ease,background .32s ease,box-shadow .32s ease!important;overflow:hidden!important;cursor:pointer!important;display:flex!important;flex-direction:column!important;gap:14px!important}
html .spx-export-section-v61 .spx-export-card::before{content:""!important;position:absolute!important;inset:0!important;background:radial-gradient(320px 180px at 28px 28px,rgba(34,211,238,.14),transparent 68%)!important;opacity:0!important;transition:opacity .32s ease!important;pointer-events:none!important}
html .spx-export-section-v61 .spx-export-card:hover,html .spx-export-section-v61 .spx-export-card:focus-visible,html .spx-export-section-v61 .spx-export-card.is-active{transform:translateY(-5px)!important;border-color:rgba(107,232,255,.34)!important;background:linear-gradient(180deg,rgba(34,211,238,.08),rgba(255,255,255,.034))!important;box-shadow:0 26px 88px rgba(0,0,0,.24),0 0 30px rgba(34,211,238,.08)!important;outline:0!important}
html .spx-export-section-v61 .spx-export-card.is-active::before,html .spx-export-section-v61 .spx-export-card:hover::before{opacity:1!important}
html .spx-export-icon{width:70px!important;height:70px!important;border-radius:22px!important;display:grid!important;place-items:center!important;color:#8eeeff!important;background:linear-gradient(145deg,rgba(34,211,238,.15),rgba(37,99,235,.07))!important;border:1px solid rgba(107,232,255,.22)!important;box-shadow:0 16px 42px rgba(0,0,0,.18)!important;flex:0 0 auto!important}
html .spx-export-icon img{display:none!important}.spx-export-svg{width:34px!important;height:34px!important;display:block!important;fill:currentColor!important}.spx-export-svg-share{width:42px!important;height:42px!important}
html .spx-export-card h3{position:relative!important;z-index:2!important;margin:8px 0 0!important;font-size:clamp(23px,2.8vw,34px)!important;letter-spacing:-.035em!important;color:var(--text)!important}
html .spx-export-card p{position:relative!important;z-index:2!important;max-height:none!important;opacity:1!important;line-height:1.62!important;color:var(--secondary)!important;flex:1 1 auto!important}
html .spx-export-card .spx-more-link{position:relative!important;z-index:2!important;align-self:flex-start!important;margin-top:auto!important;color:#9eeeff!important;font-weight:950!important;text-decoration:none!important}

/* Homepage roadmap preview and full roadmap page. */
html .spx-summary-roadmap-v62{width:min(1220px,calc(100% - 40px))!important;margin:clamp(70px,10vw,130px) auto!important;display:grid!important;grid-template-columns:.82fr 1.18fr!important;gap:22px!important;align-items:stretch!important;border-radius:38px!important;padding:clamp(26px,4vw,54px)!important;border:1px solid rgba(218,236,255,.11)!important;background:radial-gradient(900px 360px at 100% 0%,rgba(37,99,235,.12),transparent 65%),linear-gradient(180deg,rgba(8,15,29,.72),rgba(4,8,18,.58))!important;box-shadow:0 30px 110px rgba(0,0,0,.20)!important}
html .spx-summary-roadmap-v62 .spx-summary-panel h2{font-size:clamp(36px,5vw,64px)!important;line-height:1!important;letter-spacing:-.055em!important;margin:12px 0!important;color:var(--text)!important}
html .spx-summary-roadmap-v62 .spx-summary-panel p{color:var(--secondary)!important;line-height:1.65!important;font-size:17px!important}
html .spx-roadmap-preview-v62{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important}
html .spx-roadmap-preview-v62 article{position:relative!important;min-height:280px!important;padding:22px!important;border-radius:26px!important;border:1px solid rgba(218,236,255,.11)!important;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.026))!important;overflow:hidden!important;box-shadow:0 18px 58px rgba(0,0,0,.15)!important;transition:transform .28s ease,border-color .28s ease!important}
html .spx-roadmap-preview-v62 article:hover,html .spx-roadmap-preview-v62 article.is-active{transform:translateY(-4px)!important;border-color:rgba(107,232,255,.30)!important}
html .spx-roadmap-preview-v62 span{display:inline-flex!important;padding:7px 10px!important;border-radius:999px!important;background:rgba(34,211,238,.10)!important;color:#9eeeff!important;font-size:11px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.09em!important}
html .spx-roadmap-preview-v62 h3{font-size:clamp(23px,2.6vw,34px)!important;line-height:1.08!important;letter-spacing:-.035em!important;color:var(--text)!important;margin:40px 0 10px!important}
html .spx-roadmap-preview-v62 p{color:var(--secondary)!important;line-height:1.58!important}
html .spx-roadmap-hero-v62{width:min(1180px,calc(100% - 40px))!important;margin:clamp(58px,8vw,110px) auto 22px!important;padding:clamp(24px,4vw,48px)!important;border-radius:36px!important;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))!important;border:1px solid rgba(218,236,255,.10)!important;box-shadow:0 24px 90px rgba(0,0,0,.18)!important}
html .spx-roadmap-hero-v62 h1{font-size:clamp(46px,7vw,92px)!important;line-height:.93!important;letter-spacing:-.07em!important;color:var(--text)!important;margin:14px 0!important}
html .spx-roadmap-hero-v62 p{font-size:clamp(17px,1.7vw,22px)!important;line-height:1.6!important;color:var(--secondary)!important;max-width:850px!important}
html .spx-roadmap-board-v62{width:min(1180px,calc(100% - 40px))!important;margin:0 auto clamp(70px,9vw,120px)!important;display:grid!important;gap:18px!important}
html .spx-roadmap-phase-v62{display:grid!important;grid-template-columns:.44fr .56fr!important;gap:22px!important;align-items:start!important;padding:clamp(22px,3.2vw,38px)!important;border-radius:32px!important;border:1px solid rgba(218,236,255,.11)!important;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important;box-shadow:0 24px 86px rgba(0,0,0,.18)!important;transition:transform .3s ease,border-color .3s ease!important}
html .spx-roadmap-phase-v62:hover,html .spx-roadmap-phase-v62.is-active{transform:translateY(-4px)!important;border-color:rgba(107,232,255,.28)!important}
html .spx-roadmap-phase-top span{display:inline-flex!important;padding:8px 11px!important;border-radius:999px!important;background:rgba(34,211,238,.10)!important;color:#9eeeff!important;font-size:11px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.09em!important}
html .spx-roadmap-phase-top h2{font-size:clamp(30px,4.5vw,56px)!important;line-height:1!important;letter-spacing:-.055em!important;margin:16px 0 10px!important;color:var(--text)!important}
html .spx-roadmap-phase-top p{color:var(--secondary)!important;line-height:1.6!important}
html .spx-roadmap-task-grid-v62{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
html .spx-roadmap-task-v62{padding:16px!important;border-radius:20px!important;border:1px solid rgba(218,236,255,.10)!important;background:rgba(255,255,255,.04)!important}
html .spx-roadmap-task-v62 b{display:block!important;color:var(--text)!important;font-size:16px!important}.spx-roadmap-task-v62 p{margin:8px 0 0!important;color:var(--secondary)!important;line-height:1.5!important;font-size:14px!important}

/* New public support and auth surfaces. */
html .spx-support-page-v62,html .spx-support-workspace-v62,html .spx-support-faq-v62{width:min(1220px,calc(100% - 40px))!important;margin:clamp(50px,7vw,98px) auto!important}
html .spx-support-hero-v62{display:grid!important;grid-template-columns:1.05fr .95fr!important;gap:22px!important;align-items:stretch!important}
html .spx-support-hero-copy,html .spx-support-status-card,html .spx-support-route-grid article,html .spx-support-form-intro,html .spx-public-support-form-v62{border-radius:32px!important;border:1px solid rgba(218,236,255,.11)!important;background:linear-gradient(180deg,rgba(8,15,29,.78),rgba(4,8,18,.64))!important;box-shadow:0 24px 90px rgba(0,0,0,.22)!important;backdrop-filter:blur(18px)!important}
html .spx-support-hero-copy{padding:clamp(28px,5vw,62px)!important}.spx-support-hero-copy h1{font-size:clamp(46px,7vw,88px)!important;line-height:.94!important;letter-spacing:-.07em!important;color:var(--text)!important;margin:14px 0!important}.spx-support-hero-copy p{font-size:clamp(17px,1.5vw,21px)!important;line-height:1.62!important;color:var(--secondary)!important;max-width:780px!important}.spx-support-hero-actions{display:flex!important;gap:12px!important;flex-wrap:wrap!important;margin-top:22px!important}.spx-support-status-card{padding:clamp(24px,4vw,42px)!important;display:grid!important;align-content:end!important;gap:12px!important;background:radial-gradient(600px 260px at 0% 0%,rgba(34,211,238,.16),transparent 62%),linear-gradient(180deg,rgba(9,18,35,.82),rgba(4,9,18,.66))!important}.spx-support-status-card span{color:#9eeeff!important;font-size:12px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.1em!important}.spx-support-status-card b{font-size:clamp(26px,4vw,48px)!important;line-height:1!important;letter-spacing:-.045em!important;color:var(--text)!important}.spx-support-status-card p,.spx-support-status-card li{color:var(--secondary)!important;line-height:1.6!important}.spx-support-status-card ul{margin:0!important;padding-left:18px!important}.spx-support-route-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;margin-top:16px!important}.spx-support-route-grid article{padding:20px!important;min-height:150px!important}.spx-support-route-grid span{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;border-radius:15px!important;background:rgba(34,211,238,.10)!important;color:#9eeeff!important;font-weight:950!important}.spx-support-route-grid b{display:block!important;color:var(--text)!important;margin:14px 0 8px!important}.spx-support-route-grid p{color:var(--secondary)!important;line-height:1.5!important;margin:0!important}.spx-support-workspace-v62{display:grid!important;grid-template-columns:.82fr 1.18fr!important;gap:22px!important;align-items:start!important}.spx-support-form-intro,.spx-public-support-form-v62{padding:clamp(22px,3.2vw,36px)!important}.spx-support-form-intro h2{font-size:clamp(34px,5vw,62px)!important;line-height:1!important;letter-spacing:-.055em!important;color:var(--text)!important;margin:12px 0!important}.spx-support-form-intro p{color:var(--secondary)!important;line-height:1.6!important}.spx-support-mini-list{display:grid!important;gap:10px!important;margin-top:18px!important}.spx-support-mini-list span{padding:10px 12px!important;border-radius:16px!important;border:1px solid rgba(107,232,255,.14)!important;background:rgba(34,211,238,.07)!important;color:#dffbff!important;font-weight:800!important}.spx-public-support-form-v62 label{display:grid!important;gap:8px!important;color:var(--text)!important;font-weight:850!important}.spx-public-support-form-v62 input,.spx-public-support-form-v62 select,.spx-public-support-form-v62 textarea,.auth-shell-v62 input,.auth-shell-v62 select,.auth-shell-v62 textarea{width:100%!important;border-radius:16px!important;border:1px solid rgba(218,236,255,.13)!important;background:rgba(255,255,255,.055)!important;color:var(--text)!important;padding:13px 14px!important;outline:0!important;box-shadow:none!important}.spx-public-support-form-v62 input:focus,.spx-public-support-form-v62 textarea:focus,.spx-public-support-form-v62 select:focus,.auth-shell-v62 input:focus,.auth-shell-v62 select:focus{border-color:rgba(107,232,255,.42)!important;box-shadow:0 0 0 4px rgba(34,211,238,.10)!important}.spx-public-support-form-v62 textarea{resize:vertical!important;min-height:170px!important}.spx-public-support-form-v62 .captcha-box,.auth-shell-v62 .captcha-box{border-radius:18px!important;border:1px solid rgba(245,184,91,.20)!important;background:rgba(245,184,91,.07)!important;padding:14px!important}
html .auth-shell-v62{position:relative!important;width:min(1180px,calc(100% - 40px))!important;margin:clamp(42px,7vw,88px) auto!important;min-height:calc(100svh - 170px)!important;padding:0!important;display:grid!important;grid-template-columns:minmax(380px,.88fr) minmax(360px,.78fr)!important;gap:22px!important;align-items:center!important;background:transparent!important}.auth-login-v62{grid-template-columns:minmax(360px,.78fr) minmax(380px,.88fr)!important}.auth-shell-v62 .auth-card,.auth-shell-v62 .auth-story{border-radius:32px!important;border:1px solid rgba(218,236,255,.11)!important;background:radial-gradient(680px 340px at 0% 0%,rgba(34,211,238,.10),transparent 66%),linear-gradient(180deg,rgba(8,15,29,.82),rgba(4,8,18,.66))!important;box-shadow:0 28px 100px rgba(0,0,0,.25)!important;backdrop-filter:blur(20px)!important;padding:clamp(24px,4vw,46px)!important;min-height:auto!important}.auth-shell-v62 .auth-card{order:1}.auth-shell-v62 .auth-story{order:2}.auth-register-v62 .auth-story{order:1}.auth-register-v62 .auth-card{order:2}.auth-shell-v62 .auth-card h1{font-size:clamp(40px,5.6vw,74px)!important;line-height:.95!important;letter-spacing:-.065em!important;color:var(--text)!important;margin:12px 0!important}.auth-shell-v62 .auth-card p,.auth-shell-v62 .auth-story p{color:var(--secondary)!important;line-height:1.6!important}.auth-shell-v62 .auth-form{display:grid!important;gap:14px!important;margin-top:20px!important}.auth-shell-v62 .auth-story h2{font-size:clamp(34px,5vw,66px)!important;line-height:.96!important;letter-spacing:-.06em!important;color:var(--text)!important}.auth-story-points{display:flex!important;gap:8px!important;flex-wrap:wrap!important;margin-top:22px!important}.auth-story-points span{border-radius:999px!important;padding:8px 10px!important;background:rgba(34,211,238,.09)!important;border:1px solid rgba(107,232,255,.14)!important;color:#dffbff!important;font-weight:850!important;font-size:12px!important}.auth-shell-v62 .google-btn{width:100%!important;margin-top:12px!important;border-radius:16px!important}.auth-shell-v62 .auth-links{display:flex!important;justify-content:space-between!important;gap:12px!important;margin-top:18px!important}.auth-shell-v62 .steps{margin:18px 0!important}.auth-shell-v62 .register-step{display:none!important}.auth-shell-v62 .register-step.is-active,.auth-shell-v62 .register-step.active{display:grid!important;gap:14px!important}.auth-register-v62.is-form-focus{grid-template-columns:1fr!important;max-width:860px!important}.auth-register-v62.is-form-focus .auth-story{display:none!important}.auth-register-v62.is-form-focus .auth-card{width:100%!important}.auth-shell-v62 .spx-auth-choice{display:grid!important;gap:12px!important}.auth-shell-v62 .legal-consent{align-items:start!important;grid-template-columns:auto minmax(0,1fr)!important;display:grid!important}

html[data-theme="light"] .spx-export-section-v61,html[data-theme="light"] .spx-summary-roadmap-v62,html[data-theme="light"] .spx-roadmap-hero-v62,html[data-theme="light"] .spx-roadmap-phase-v62,html[data-theme="light"] .spx-support-hero-copy,html[data-theme="light"] .spx-support-status-card,html[data-theme="light"] .spx-support-route-grid article,html[data-theme="light"] .spx-support-form-intro,html[data-theme="light"] .spx-public-support-form-v62,html[data-theme="light"] .auth-shell-v62 .auth-card,html[data-theme="light"] .auth-shell-v62 .auth-story{background:rgba(255,255,255,.84)!important;border-color:rgba(15,23,42,.10)!important;box-shadow:0 24px 80px rgba(15,23,42,.12)!important;color:#0f172a!important}html[data-theme="light"] .spx-support-mini-list span,html[data-theme="light"] .auth-story-points span{color:#075985!important;background:rgba(14,165,233,.08)!important}html[data-theme="light"] .spx-public-support-form-v62 input,html[data-theme="light"] .spx-public-support-form-v62 textarea,html[data-theme="light"] .spx-public-support-form-v62 select,html[data-theme="light"] .auth-shell-v62 input,html[data-theme="light"] .auth-shell-v62 select{background:rgba(255,255,255,.74)!important;border-color:rgba(15,23,42,.12)!important;color:#0f172a!important}
@media(max-width:980px){html .spx-why52-track{height:auto!important}html .spx-why52-sticky{position:relative!important;top:auto!important;min-height:auto!important;grid-template-columns:1fr!important}.spx-why52-copy{min-height:auto!important}.spx-why52-story-head{opacity:1!important}.why52-step-nav,.why52-step-stack{position:relative!important;inset:auto!important;opacity:1!important}.why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;margin:12px 0!important}.why52-visuals,.why52-visual{position:relative!important;inset:auto!important}.why52-visual{opacity:1!important;visibility:visible!important;transform:none!important;margin:14px 0!important}.why52-visual img{max-width:100%!important}.why52-visual-card{position:relative!important;left:auto!important;bottom:auto!important;width:auto!important;margin-top:10px!important}.spx-dashboard-command-v61{min-height:auto!important;margin:60px auto!important;width:min(100% - 24px,1180px)!important;border-radius:32px!important;padding:18px!important}.spx-dashboard-command-v61 .spx-dash-visual,.spx-dashboard-command-v61 .spx-dash-copy{position:relative!important;top:auto!important;height:auto!important;width:100%!important;margin:0!important}.spx-dashboard-command-v61 .spx-dash-frame{position:relative!important;inset:auto!important;aspect-ratio:16/10!important}.spx-export-section-v61 .spx-export-grid,.spx-summary-roadmap-v62,.spx-roadmap-preview-v62,.spx-roadmap-phase-v62,.spx-roadmap-task-grid-v62,.spx-support-hero-v62,.spx-support-route-grid,.spx-support-workspace-v62,.auth-shell-v62{grid-template-columns:1fr!important}.auth-shell-v62,.auth-register-v62.is-form-focus{width:min(100% - 28px,860px)!important}.spx-v26-alpha-notice{grid-template-columns:1fr!important}.spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:min(100% - 24px,1080px)!important;margin:26px auto 0!important}.spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{margin-left:0!important;width:100%!important}.spx-hero-v26[data-hero-scrollstory] .spx-v26-what-body{grid-template-columns:1fr!important}}

/* A8.63 focused visual repairs: hero CTA, What view, How story, dashboard story, export cards and pricing copy polish. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions *{
  pointer-events:auto!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-shell,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
  z-index:72!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more{
  z-index:76!important;
  cursor:pointer!important;
  isolation:isolate!important;
  color:var(--text)!important;
  min-width:166px!important;
  width:166px!important;
  border-color:rgba(142,221,255,.25)!important;
  background:rgba(255,255,255,.06)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(135deg,rgba(24,201,245,.12),rgba(37,99,235,.10));
  opacity:0;
  transition:opacity .28s cubic-bezier(.2,.8,.2,1);
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more:hover::before,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more:focus-visible::before{opacity:1}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more .label,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more .arrowBubble{z-index:2!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more:hover,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more:focus-visible{
  transform:translateY(-2px)!important;
  border-color:rgba(107,232,255,.58)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.22),0 0 38px rgba(24,201,245,.16)!important;
}

/* What copy/fade polish only; the product animation remains owned by the
   original progress controller until .spx-what-product-locked is active. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  z-index:58!important;
  pointer-events:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell::before,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell::after,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page::before{
  display:none!important;
  content:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  width:min(760px,calc(100% - 68px))!important;
  max-height:56px!important;
  margin:0 0 0 clamp(34px,5vw,64px)!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  object-fit:contain!important;
  object-position:left bottom!important;
  filter:none!important;
  opacity:.96!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
  margin-top:12px!important;
  padding:clamp(34px,4.8vw,62px)!important;
  border-radius:30px!important;
  background:radial-gradient(720px 420px at 26% 0%,rgba(34,211,238,.15),transparent 65%),linear-gradient(145deg,rgba(8,16,31,.98),rgba(4,9,18,.98) 58%,rgba(7,31,49,.92))!important;
  border:1px solid rgba(107,232,255,.14)!important;
  box-shadow:0 34px 120px rgba(0,0,0,.44)!important;
  overflow:hidden!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
  max-width:900px!important;
  margin:0!important;
  padding:clamp(22px,3vw,34px)!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.088),rgba(255,255,255,.045))!important;
  border:1px solid rgba(218,236,255,.12)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.24)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{
  grid-template-columns:auto 1fr!important;
  align-items:start!important;
  gap:8px 12px!important;
  margin:18px 0 12px!important;
  padding:13px 15px!important;
  border-radius:17px!important;
  background:linear-gradient(135deg,rgba(245,184,91,.13),rgba(24,201,245,.07))!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice a{
  grid-column:2!important;
  justify-self:start!important;
  margin-top:2px!important;
  color:#8ee8ff!important;
}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
  background:radial-gradient(720px 420px at 26% 0%,rgba(14,165,233,.13),transparent 65%),linear-gradient(145deg,rgba(255,255,255,.98),rgba(235,246,255,.94))!important;
  border-color:rgba(15,23,42,.12)!important;
  box-shadow:0 34px 96px rgba(15,23,42,.14)!important;
}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-content-card{background:rgba(255,255,255,.76)!important}

/* Stable How Spixor Works v63: remove old scroll-fighting and rebuild one controlled story. */
html .spx-how-v63{
  position:relative!important;
  width:100%!important;
  min-height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:clip!important;
  background:transparent!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
html .spx-how-v63 .spx-why52-hero-echo{display:none!important}
html .spx-how-v63 .spx-why52-shell{width:min(1240px,calc(100% - 48px))!important;margin:0 auto!important;padding:0!important;position:relative!important;z-index:3!important}
html .spx-how-v63 .spx-why52-track{height:330vh!important;min-height:2500px!important;position:relative!important}
html .spx-how-v63 .spx-why52-sticky{
  position:sticky!important;
  top:clamp(72px,9vh,98px)!important;
  min-height:calc(100svh - clamp(88px,11vh,120px))!important;
  display:grid!important;
  grid-template-columns:minmax(360px,.9fr) minmax(540px,1.1fr)!important;
  gap:clamp(28px,5vw,76px)!important;
  align-items:center!important;
  opacity:1!important;
  transform:none!important;
}
html .spx-how-v63 .spx-why52-copy,
html .spx-how-v63 .spx-why52-stage{height:auto!important;min-height:0!important;opacity:1!important;transform:none!important;filter:none!important}
html .spx-how-v63 .spx-why52-story-head{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;margin-bottom:20px!important}
html .spx-how-v63 .spx-why52-story-head h2{font-size:clamp(42px,5.7vw,84px)!important;line-height:.92!important;letter-spacing:-.07em!important;margin:10px 0 12px!important}
html .spx-how-v63 .spx-why52-story-head p{max-width:540px!important;color:var(--text-soft)!important;font-size:clamp(16px,1.35vw,20px)!important;line-height:1.6!important}
html .spx-how-v63 .why52-step-nav{position:relative!important;display:flex!important;gap:10px!important;margin:20px 0 18px!important;opacity:1!important;visibility:visible!important;transform:none!important}
html .spx-how-v63 .why52-step-nav button{flex:0 0 auto!important;border-radius:999px!important;padding:10px 14px!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(218,236,255,.10)!important;color:var(--text-soft)!important;transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),transform .22s var(--ease)!important}
html .spx-how-v63 .why52-step-nav button b{display:none!important}
html .spx-how-v63 .why52-step-nav button.is-active{background:rgba(24,201,245,.13)!important;border-color:rgba(24,201,245,.34)!important;color:var(--text)!important;box-shadow:0 12px 34px rgba(24,201,245,.10)!important}
html .spx-how-v63 .why52-step-stack{position:relative!important;min-height:360px!important;overflow:visible!important}
html .spx-how-v63 .why52-step{position:absolute!important;inset:0 auto auto 0!important;width:min(540px,100%)!important;margin:0!important;padding:24px!important;border-radius:28px!important;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;border:1px solid rgba(218,236,255,.12)!important;box-shadow:0 24px 78px rgba(0,0,0,.18)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translate3d(0,22px,0) scale(.985)!important;transition:opacity .38s cubic-bezier(.2,.8,.2,1),transform .38s cubic-bezier(.2,.8,.2,1),visibility .38s!important}
html .spx-how-v63 .why52-step.is-active{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translate3d(0,0,0) scale(1)!important}
html .spx-how-v63 .why52-step span{color:#8ee8ff!important;font-size:12px!important;letter-spacing:.12em!important;text-transform:uppercase!important;font-weight:950!important}
html .spx-how-v63 .why52-step h3{margin:12px 0 10px!important;font-size:clamp(25px,2.5vw,38px)!important;line-height:1.05!important;letter-spacing:-.045em!important}
html .spx-how-v63 .why52-step p{font-size:16px!important;line-height:1.58!important;color:var(--text-soft)!important;margin:0 0 14px!important}
html .spx-how-v63 .why52-step ul{margin:0!important;padding:0!important;display:grid!important;gap:9px!important;color:var(--secondary)!important}
html .spx-how-v63 .why52-stage{position:relative!important;min-height:620px!important;border-radius:34px!important;background:radial-gradient(520px 320px at 84% 14%,rgba(24,201,245,.16),transparent 62%),linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.022))!important;border:1px solid rgba(218,236,255,.10)!important;box-shadow:0 30px 100px rgba(0,0,0,.28)!important;overflow:hidden!important}
html .spx-how-v63 .why52-network{opacity:.42!important;inset:0!important;position:absolute!important;transform:none!important}
html .spx-how-v63 .why52-visuals{position:absolute!important;inset:0!important;overflow:visible!important}
html .spx-how-v63 .why52-visual{position:absolute!important;inset:clamp(26px,4vw,54px)!important;margin:0!important;opacity:0!important;visibility:hidden!important;transform:translate3d(12vw,0,0) scale(.96)!important;filter:none!important;pointer-events:none!important;transition:opacity .48s cubic-bezier(.2,.8,.2,1),transform .52s cubic-bezier(.2,.8,.2,1),visibility .48s!important}
html .spx-how-v63 .why52-visual.is-active{opacity:1!important;visibility:visible!important;transform:translate3d(0,0,0) scale(1)!important}
html .spx-how-v63 .why52-visual img{width:100%!important;height:100%!important;object-fit:contain!important;border:0!important;background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 40px 90px rgba(0,0,0,.26))!important}
html .spx-how-v63 .why52-visual figcaption{position:absolute!important;left:clamp(18px,3vw,36px)!important;right:clamp(18px,3vw,36px)!important;bottom:clamp(18px,3vw,32px)!important;max-width:min(520px,78%)!important;padding:16px 18px!important;border-radius:22px!important;background:rgba(3,8,18,.62)!important;border:1px solid rgba(218,236,255,.12)!important;backdrop-filter:blur(16px)!important;box-shadow:0 18px 60px rgba(0,0,0,.22)!important}
html .spx-how-v63 .why52-float{display:none!important}

/* Dashboard Command Center v63: full screen visual with compact moving context cards. */
html .spx-dashboard-command-v63{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  min-height:330vh!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:#050914!important;
  overflow:clip!important;
  box-shadow:none!important;
}
html .spx-dashboard-command-v63 .spx-dash-visual{position:sticky!important;top:0!important;height:100svh!important;inset-inline:0!important;width:100%!important;margin:0!important;z-index:1!important;overflow:hidden!important}
html .spx-dashboard-command-v63 .spx-dash-frame{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;background:#07101e!important;box-shadow:none!important;overflow:hidden!important}
html .spx-dashboard-command-v63 .spx-dash-frame img[data-dashboard-image]{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;opacity:calc(.72 + var(--dash-focus,1) * .28)!important;filter:saturate(1.08) contrast(1.04) brightness(.88)!important;transition:opacity .42s var(--ease),filter .42s var(--ease)!important}
html .spx-dashboard-command-v63 .spx-dash-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(600px 420px at var(--dash-card-x,82%) var(--dash-card-y,78%),rgba(24,201,245,.18),transparent 66%),linear-gradient(90deg,rgba(2,6,14,.54),transparent 24%,transparent 76%,rgba(2,6,14,.44)),linear-gradient(180deg,rgba(2,6,14,.34),rgba(2,6,14,.04) 48%,rgba(2,6,14,.52));}
html .spx-dashboard-command-v63 .spx-dash-copy{position:sticky!important;top:0!important;height:100svh!important;z-index:5!important;width:0!important;margin:0!important;padding:0!important;pointer-events:none!important;transform:none!important}
html .spx-dashboard-command-v63 .spx-dash-copy > .eyebrow,
html .spx-dashboard-command-v63 .spx-dash-copy > h2,
html .spx-dashboard-command-v63 .spx-dash-copy > p{position:absolute!important;left:clamp(22px,4vw,68px)!important;top:clamp(86px,12vh,126px)!important;width:min(430px,38vw)!important;margin:0!important;opacity:calc(.25 + var(--dash-focus,1) * .75)!important;pointer-events:none!important;text-shadow:0 2px 30px rgba(0,0,0,.38)!important}
html .spx-dashboard-command-v63 .spx-dash-copy > h2{top:clamp(116px,16vh,168px)!important;font-size:clamp(36px,5vw,76px)!important;line-height:.94!important;letter-spacing:-.07em!important;color:#fff!important}
html .spx-dashboard-command-v63 .spx-dash-copy > p{top:clamp(210px,30vh,286px)!important;color:rgba(218,236,255,.72)!important;line-height:1.55!important}
html .spx-dashboard-command-v63 .spx-dash-tabs{position:absolute!important;left:clamp(22px,4vw,68px)!important;bottom:clamp(22px,5vh,48px)!important;display:flex!important;gap:8px!important;z-index:8!important;pointer-events:auto!important;background:rgba(3,8,18,.48)!important;border:1px solid rgba(218,236,255,.12)!important;border-radius:999px!important;padding:8px!important;backdrop-filter:blur(16px)!important}
html .spx-dashboard-command-v63 .spx-dash-tabs b{display:none!important}
html .spx-dashboard-command-v63 .spx-dash-tabs button{min-height:40px!important;padding:0 14px!important;border-radius:999px!important;background:transparent!important;border:0!important;color:rgba(218,236,255,.66)!important;transition:background .24s var(--ease),color .24s var(--ease),transform .24s var(--ease)!important}
html .spx-dashboard-command-v63 .spx-dash-tabs button.is-active{background:rgba(24,201,245,.14)!important;color:#fff!important;box-shadow:0 10px 28px rgba(24,201,245,.12)!important}
html .spx-dashboard-command-v63 .spx-dash-panel{position:absolute!important;z-index:9!important;width:min(350px,calc(100vw - 44px))!important;padding:18px 20px!important;border-radius:24px!important;background:rgba(3,8,18,.62)!important;border:1px solid rgba(218,236,255,.14)!important;box-shadow:0 24px 80px rgba(0,0,0,.34),0 0 44px rgba(24,201,245,.10)!important;backdrop-filter:blur(18px)!important;opacity:0!important;visibility:hidden!important;transform:translate3d(0,16px,0) scale(.98)!important;transition:opacity .38s cubic-bezier(.2,.8,.2,1),transform .42s cubic-bezier(.2,.8,.2,1),visibility .38s!important;pointer-events:none!important}
html .spx-dashboard-command-v63 .spx-dash-panel.is-active{opacity:1!important;visibility:visible!important;transform:translate3d(0,0,0) scale(1)!important;pointer-events:auto!important}
html .spx-dashboard-command-v63[data-scene="overview"]{--dash-card-x:82%;--dash-card-y:78%}
html .spx-dashboard-command-v63[data-scene="projects"]{--dash-card-x:82%;--dash-card-y:18%}
html .spx-dashboard-command-v63[data-scene="files"]{--dash-card-x:16%;--dash-card-y:18%}
html .spx-dashboard-command-v63 .spx-dash-panel[data-dashboard-panel="overview"]{right:clamp(22px,5vw,80px)!important;bottom:clamp(24px,8vh,92px)!important}
html .spx-dashboard-command-v63 .spx-dash-panel[data-dashboard-panel="projects"]{right:clamp(22px,5vw,80px)!important;top:clamp(86px,13vh,130px)!important}
html .spx-dashboard-command-v63 .spx-dash-panel[data-dashboard-panel="files"]{left:clamp(22px,5vw,80px)!important;top:clamp(86px,13vh,130px)!important}
html .spx-dashboard-command-v63 .spx-dash-callout{display:none!important}
html .spx-dashboard-command-v63 .spx-dash-cursor{z-index:7!important;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .3s var(--ease)!important}
html .spx-dashboard-command-v63[data-scene="overview"] .spx-dash-cursor{transform:translate3d(76vw,72vh,0)!important}
html .spx-dashboard-command-v63[data-scene="projects"] .spx-dash-cursor{transform:translate3d(84vw,18vh,0)!important}
html .spx-dashboard-command-v63[data-scene="files"] .spx-dash-cursor{transform:translate3d(12vw,20vh,0)!important}
html .spx-dashboard-command-v63 .spx-dash-fade-ghost{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;z-index:1!important;opacity:1!important;transition:opacity .7s cubic-bezier(.2,.8,.2,1)!important}
html .spx-dashboard-command-v63 .spx-dash-fade-ghost.is-fading{opacity:0!important}

/* Export-first v63: stable cards, logo-based Share mark and hover-revealed More info. */
html .spx-export-section-v61{padding-block:clamp(70px,10vw,132px)!important}
html .spx-export-section-v61 .spx-export-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;align-items:stretch!important}
html .spx-export-section-v61 .spx-export-card{position:relative!important;min-height:320px!important;display:flex!important;flex-direction:column!important;gap:14px!important;overflow:hidden!important;transform:none!important;transition:transform .34s cubic-bezier(.2,.8,.2,1),border-color .34s var(--ease),background .34s var(--ease),box-shadow .34s var(--ease)!important}
html .spx-export-section-v61 .spx-export-card:hover,
html .spx-export-section-v61 .spx-export-card:focus-within,
html .spx-export-section-v61 .spx-export-card.is-active{transform:translateY(-6px)!important;border-color:rgba(24,201,245,.32)!important;box-shadow:0 28px 92px rgba(0,0,0,.28),0 0 58px rgba(24,201,245,.10)!important}
html .spx-export-section-v61 .spx-export-icon{width:62px!important;height:62px!important;display:grid!important;place-items:center!important;border-radius:20px!important;background:linear-gradient(145deg,rgba(24,201,245,.14),rgba(37,99,235,.10))!important;color:#66dcff!important;box-shadow:inset 0 0 0 1px rgba(107,232,255,.14)!important;overflow:hidden!important}
html .spx-export-section-v61 .spx-export-icon img{width:48px!important;height:48px!important;object-fit:cover!important;border-radius:50%!important;display:block!important;filter:none!important;opacity:1!important;transform:scale(1.14)!important}
html .spx-export-section-v61 .spx-export-svg{width:32px!important;height:32px!important;color:#76e4ff!important;fill:currentColor!important;display:block!important}
html .spx-export-section-v61 .spx-export-svg path{fill:currentColor!important}
html .spx-export-section-v61 .spx-more-link{margin-top:auto!important;display:inline-flex!important;align-items:center!important;gap:9px!important;align-self:flex-start!important;min-height:36px!important;padding:8px 11px!important;border-radius:999px!important;background:rgba(24,201,245,.10)!important;border:1px solid rgba(24,201,245,.20)!important;color:#c9f8ff!important;text-decoration:none!important;font-weight:900!important;opacity:0!important;visibility:hidden!important;transform:translate3d(0,10px,0)!important;transition:opacity .26s var(--ease),visibility .26s var(--ease),transform .32s cubic-bezier(.2,.8,.2,1),background .24s var(--ease)!important}
html .spx-export-section-v61 .spx-more-link svg{width:14px!important;height:14px!important;transition:transform .26s cubic-bezier(.2,.8,.2,1)!important}
html .spx-export-section-v61 .spx-export-card:hover .spx-more-link,
html .spx-export-section-v61 .spx-export-card:focus-within .spx-more-link{opacity:1!important;visibility:visible!important;transform:translate3d(0,0,0)!important}
html .spx-export-section-v61 .spx-more-link:hover svg{transform:translateX(3px)!important}
html .spx-export-section-v61 .spx-export-card.is-active:not(:hover):not(:focus-within) .spx-more-link{opacity:0!important;visibility:hidden!important;transform:translate3d(0,10px,0)!important}

.spx-public-editor-bar{
  position:fixed!important;
  left:50%!important;
  bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
  transform:translateX(-50%)!important;
  z-index:2200!important;
  width:min(760px,calc(100vw - 24px))!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px!important;
  border-radius:20px!important;
  border:1px solid rgba(107,232,255,.22)!important;
  background:rgba(3,8,18,.86)!important;
  box-shadow:0 24px 90px rgba(0,0,0,.36)!important;
  backdrop-filter:blur(18px)!important;
}
.spx-public-editor-bar strong{color:#fff!important}
.spx-public-editor-bar span{color:rgba(232,241,255,.72)!important}
.spx-public-editor-bar .form-status{margin:0!important;min-width:140px!important}
.spx-public-editable{
  outline:2px solid rgba(24,201,245,.36)!important;
  outline-offset:4px!important;
  border-radius:8px!important;
  cursor:text!important;
}
.spx-public-editable:focus{
  outline-color:rgba(245,184,91,.72)!important;
  background:rgba(245,184,91,.08)!important;
}
html[data-theme="light"] .spx-public-editor-bar{
  background:rgba(255,255,255,.92)!important;
  border-color:rgba(15,23,42,.12)!important;
  box-shadow:0 24px 70px rgba(15,23,42,.16)!important;
}
html[data-theme="light"] .spx-public-editor-bar strong{color:#0f172a!important}
html[data-theme="light"] .spx-public-editor-bar span{color:#475467!important}

@media(max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{width:100%!important;margin-left:0!important}
  html .spx-how-v63 .spx-why52-track{height:auto!important;min-height:auto!important}
  html .spx-how-v63 .spx-why52-sticky{position:relative!important;top:auto!important;display:grid!important;grid-template-columns:1fr!important;min-height:auto!important;padding:60px 0!important}
  html .spx-how-v63 .why52-step-stack{min-height:auto!important;display:grid!important;gap:12px!important}
  html .spx-how-v63 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;width:100%!important}
  html .spx-how-v63 .spx-why52-stage{min-height:auto!important;padding:14px!important}
  html .spx-how-v63 .why52-visuals{position:relative!important;display:grid!important;gap:14px!important}
  html .spx-how-v63 .why52-visual{position:relative!important;inset:auto!important;opacity:1!important;visibility:visible!important;transform:none!important}
  html .spx-how-v63 .why52-visual img{height:auto!important}
  html .spx-how-v63 .why52-visual figcaption{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;max-width:100%!important;margin-top:10px!important}
  html .spx-dashboard-command-v63{min-height:auto!important;padding:52px 14px!important;border-radius:0!important}
  html .spx-dashboard-command-v63 .spx-dash-visual{position:relative!important;height:auto!important;border-radius:28px!important;overflow:hidden!important}
  html .spx-dashboard-command-v63 .spx-dash-frame{position:relative!important;height:auto!important;aspect-ratio:16/10!important;border-radius:28px!important}
  html .spx-dashboard-command-v63 .spx-dash-copy{position:relative!important;height:auto!important;width:100%!important;margin-top:18px!important;display:grid!important;gap:12px!important}
  html .spx-dashboard-command-v63 .spx-dash-copy > .eyebrow,
  html .spx-dashboard-command-v63 .spx-dash-copy > h2,
  html .spx-dashboard-command-v63 .spx-dash-copy > p,
  html .spx-dashboard-command-v63 .spx-dash-tabs,
  html .spx-dashboard-command-v63 .spx-dash-panel{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important}
  html .spx-dashboard-command-v63 .spx-dash-panel{display:none!important}
  html .spx-dashboard-command-v63 .spx-dash-panel.is-active{display:block!important}
  html .spx-export-section-v61 .spx-export-grid{grid-template-columns:1fr!important}
  .spx-public-editor-bar{align-items:stretch!important;flex-direction:column!important}
}

@media(max-width:760px){
  html,body{max-width:100%;overflow-x:clip}
  html .spx-hero-v26[data-hero-scrollstory]{min-height:auto!important;padding-bottom:36px!important}
  html .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    min-height:auto!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky{
    display:none!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-shell{
    order:1!important;
    position:relative!important;
    width:min(100% - 28px,680px)!important;
    margin:0 auto!important;
    padding:calc(88px + env(safe-area-inset-top,0px)) 0 22px!important;
    min-height:auto!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
    font-size:clamp(38px,12vw,54px)!important;
    line-height:.98!important;
    letter-spacing:-.055em!important;
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-wrap:wrap!important;
    white-space:normal!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-lead,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-lead strong,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-support,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-note{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
    white-space:normal!important;
    font-size:16px!important;
    line-height:1.5!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
    order:2!important;
    display:block!important;
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    top:auto!important;
    width:min(100% - 28px,680px)!important;
    max-width:680px!important;
    margin:10px auto 0!important;
    padding:0!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    z-index:4!important;
    filter:none!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
    position:relative!important;
    min-height:auto!important;
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    max-height:44px!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:left bottom!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
    filter:none!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
    position:relative!important;
    width:100%!important;
    min-height:auto!important;
    padding:18px!important;
    margin-top:8px!important;
    border-radius:24px!important;
    align-items:stretch!important;
    overflow:hidden!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:18px!important;
    border-radius:20px!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-body{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{
    font-size:clamp(26px,8.4vw,38px)!important;
    line-height:1.03!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy p{
    font-size:15px!important;
    line-height:1.58!important;
    overflow-wrap:anywhere!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-flow,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-footer{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  html .spx-support-page-v62,
  html .spx-support-workspace-v62,
  html .spx-support-faq-v62{
    width:min(100% - 28px,680px)!important;
    margin:34px auto!important;
  }
  html .spx-support-page-v62 *,
  html .spx-support-workspace-v62 *,
  html .spx-support-faq-v62 *{
    min-width:0!important;
  }
  html .spx-support-page-v62 > *,
  html .spx-support-workspace-v62 > *,
  html .spx-support-faq-v62 > *{
    width:100%!important;
    max-width:100%!important;
  }
  html .spx-support-hero-v62,
  html .spx-support-workspace-v62,
  html .spx-support-route-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  html .spx-support-hero-copy,
  html .spx-support-status-card,
  html .spx-support-form-intro,
  html .spx-public-support-form-v62{
    padding:20px!important;
    border-radius:24px!important;
  }
  html .spx-support-hero-copy h1,
  html .spx-support-form-intro h2{
    font-size:clamp(34px,10vw,44px)!important;
    line-height:1!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    text-wrap:wrap!important;
    white-space:normal!important;
  }
  html .spx-support-status-card b{
    font-size:clamp(24px,7vw,32px)!important;
    line-height:1.08!important;
    overflow-wrap:anywhere!important;
  }
  html .spx-support-hero-copy p,
  html .spx-support-status-card p,
  html .spx-support-status-card li,
  html .spx-support-route-grid p,
  html .spx-support-form-intro p{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    white-space:normal!important;
  }
  html .spx-support-hero-actions,
  html .spx-page-cta-row{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  html .spx-support-hero-actions .btn,
  html .spx-page-cta-row .btn{
    width:100%!important;
  }
}

/* Visual blocker pass: calm hero, locked What preview, stable How split, dashboard interaction, export arrows and mobile crops. */
html .spx-hero-v26[data-hero-scrollstory] .v26-grid-plane,
html .spx-hero-v26[data-hero-scrollstory] .v26-light-trace,
html .spx-hero-v26[data-hero-scrollstory] .v26-horizon,
html .spx-hero-v26[data-hero-scrollstory] .v26-cloud{display:none!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-hero-space{opacity:.72!important;background:radial-gradient(900px 540px at 74% 20%,rgba(37,99,235,.16),transparent 62%),radial-gradient(780px 500px at 16% 76%,rgba(24,201,245,.12),transparent 68%),linear-gradient(180deg,#020711 0%,#061124 72%,#07111f 100%)!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-hero-space[data-spx-hero-canvas-retired="1"]{opacity:0!important;visibility:hidden!important;mix-blend-mode:normal!important;}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-hero-space{background:radial-gradient(900px 540px at 74% 20%,rgba(37,99,235,.11),transparent 62%),radial-gradient(780px 500px at 16% 76%,rgba(14,165,233,.10),transparent 68%),linear-gradient(180deg,#eef6ff 0%,#f7fbff 72%,#eef3fa 100%)!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-shell,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions{pointer-events:auto!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more{position:relative!important;z-index:160!important;pointer-events:auto!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more .arrowBubble{width:32px!important;height:32px!important;right:10px!important;display:grid!important;place-items:center!important;overflow:hidden!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more .arrowIcon{width:13px!important;height:13px!important;display:block!important}

html .spx-hero-v26[data-hero-scrollstory].spx-what-copy-hidden .spx-v26-copy,
html .spx-hero-v26[data-hero-scrollstory].spx-what-copy-hidden .spx-v26-actions,
html .spx-hero-v26[data-hero-scrollstory].spx-what-copy-hidden .spx-v26-trust{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(0,-18px,0)!important;
  transition:opacity .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s!important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{transition:opacity .46s cubic-bezier(.2,.8,.2,1),filter .46s cubic-bezier(.2,.8,.2,1)!important}
html .spx-hero-v26[data-hero-scrollstory]:not(.spx-dom-view-active) .spx-v26-what-crisp-layer{opacity:0!important;visibility:hidden!important}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer{opacity:1!important;visibility:visible!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important;margin-left:0!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important;padding:12px 14px!important;border-radius:16px!important;margin:14px 0!important}

html .spx-how-v63{background:transparent!important;overflow:visible!important;opacity:1!important;visibility:visible!important;transform:none!important}
html .spx-how-v63 .spx-why52-shell{width:min(1240px,calc(100% - 56px))!important}
html .spx-how-v63 .spx-why52-track{height:380vh!important;min-height:2850px!important}
html .spx-how-v63 .spx-why52-sticky{grid-template-columns:minmax(360px,.82fr) minmax(560px,1.18fr)!important;gap:clamp(34px,5.5vw,86px)!important;align-items:center!important}
html .spx-how-v63 .spx-why52-copy{position:relative!important;z-index:4!important}
html .spx-how-v63 .spx-why52-stage{position:relative!important;z-index:3!important;min-height:min(680px,calc(100svh - 150px))!important;width:100%!important;max-width:100%!important;margin:0!important;overflow:hidden!important;transform:none!important;background:radial-gradient(560px 340px at 82% 15%,rgba(24,201,245,.15),transparent 62%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important}
html .spx-how-v63 .why52-visuals{position:absolute!important;inset:0!important}
html .spx-how-v63 .why52-step-stack .why52-step.is-active{display:block!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;width:min(540px,100%)!important;height:auto!important;transform:translate3d(0,0,0) scale(1)!important}
html .spx-how-v63 .why52-visual{inset:34px!important;width:auto!important;max-width:none!important;transform:translate3d(34px,0,0) scale(.985)!important}
html .spx-how-v63 .why52-visual.is-active{transform:translate3d(0,0,0) scale(1)!important}
html .spx-how-v63 .why52-visual img{width:100%!important;height:100%!important;object-fit:contain!important}

/* Stabilized How fallback: one readable split layout, no scroll-fighting sticky gap. */
html .spx-how-v63{
  padding:clamp(72px,9vw,120px) 0!important;
  min-height:auto!important;
}
html .spx-how-v63 .spx-why52-track{
  height:auto!important;
  min-height:auto!important;
}
html .spx-how-v63 .spx-why52-sticky{
  position:relative!important;
  top:auto!important;
  min-height:auto!important;
  display:grid!important;
  grid-template-columns:minmax(320px,.82fr) minmax(520px,1.18fr)!important;
  align-items:start!important;
}
html .spx-how-v63 .why52-step-stack{
  position:relative!important;
  min-height:0!important;
  display:grid!important;
  gap:14px!important;
}
html .spx-how-v63 .why52-step-stack .why52-step,
html .spx-how-v63 .why52-step-stack .why52-step.is-active{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  min-height:0!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
}
html .spx-how-v63 .why52-visuals{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  gap:18px!important;
}
html .spx-how-v63 .why52-visual,
html .spx-how-v63 .why52-visual.is-active{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:100%!important;
  min-height:clamp(300px,30vw,420px)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
}
html .spx-how-v63 .why52-visual img{
  height:clamp(260px,28vw,390px)!important;
  object-fit:contain!important;
}

/* A8.67: How is no longer a sticky scrollstory. This resets the old v52/v61/v62/v63
   transform/opacity contract so following content renders on a normal crisp layer. */
html .spx-how-v63,
html .spx-how-v63.is-visible{
  display:block!important;
  position:relative!important;
  z-index:4!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  perspective:none!important;
  will-change:auto!important;
  background:transparent!important;
  overflow:visible!important;
  padding:clamp(76px,9vw,118px) 0!important;
  min-height:auto!important;
}
html .spx-how-v63 .spx-why52-shell,
html .spx-how-v63 .spx-why52-track,
html .spx-how-v63 .spx-why52-sticky,
html .spx-how-v63 .spx-why52-copy,
html .spx-how-v63 .spx-why52-stage,
html .spx-how-v63 .why52-step-stack,
html .spx-how-v63 .why52-visuals{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  perspective:none!important;
  will-change:auto!important;
}
html .spx-how-v63 .spx-why52-shell{
  width:min(1240px,calc(100% - 56px))!important;
  margin:0 auto!important;
}
html .spx-how-v63 .spx-why52-track{
  display:block!important;
  height:auto!important;
  min-height:auto!important;
}
html .spx-how-v63 .spx-why52-sticky{
  position:relative!important;
  top:auto!important;
  display:grid!important;
  grid-template-columns:minmax(320px,.78fr) minmax(520px,1.22fr)!important;
  gap:clamp(32px,5vw,76px)!important;
  align-items:start!important;
  min-height:auto!important;
  height:auto!important;
}
html .spx-how-v63 .spx-why52-story-head{
  position:relative!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  margin-bottom:18px!important;
}
html .spx-how-v63 .why52-step-nav{
  position:relative!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  margin:18px 0!important;
}
html .spx-how-v63 .why52-step-stack{
  position:relative!important;
  display:grid!important;
  gap:14px!important;
  min-height:auto!important;
}
html .spx-how-v63 .why52-step,
html .spx-how-v63 .why52-step.is-active,
html .spx-how-v63 .why52-step.active{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  pointer-events:auto!important;
}
html .spx-how-v63 .spx-why52-stage{
  position:relative!important;
  display:block!important;
  min-height:auto!important;
  height:auto!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:22px!important;
  border-radius:34px!important;
  overflow:hidden!important;
  background:radial-gradient(560px 340px at 82% 15%,rgba(24,201,245,.15),transparent 62%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
  border:1px solid rgba(218,236,255,.10)!important;
  box-shadow:0 30px 100px rgba(0,0,0,.18)!important;
}
html .spx-how-v63 .why52-network,
html .spx-how-v63 .why52-float{
  display:none!important;
}
html .spx-how-v63 .why52-visuals{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:18px!important;
  overflow:visible!important;
}
html .spx-how-v63 .why52-visual,
html .spx-how-v63 .why52-visual.is-active,
html .spx-how-v63 .why52-visual.active{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  grid-template-columns:minmax(240px,.56fr) minmax(220px,.44fr)!important;
  align-items:center!important;
  gap:18px!important;
  width:100%!important;
  max-width:100%!important;
  min-height:clamp(250px,24vw,330px)!important;
  margin:0!important;
  padding:18px!important;
  border-radius:28px!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  pointer-events:auto!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(218,236,255,.09)!important;
}
html .spx-how-v63 .why52-visual img{
  width:100%!important;
  height:auto!important;
  max-height:300px!important;
  object-fit:contain!important;
  filter:none!important;
}
html .spx-how-v63 .why52-visual figcaption,
html .spx-how-v63 .why52-visual-card{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html .spx-dashboard-command-v63,
html .spx-export-section-v61,
html .spx-pricing-preview-v62,
html .spx-roadmap-preview-v62{
  filter:none!important;
  transform:none;
  perspective:none!important;
}

/* A8.67B: beat the older high-specificity v52 sticky rules without adding a
   new controller. How is now one normal split section, so the long pinned
   track, sticky child and absolute visual stack are explicitly retired. */
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track{
  height:auto!important;
  min-height:0!important;
  position:relative!important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky,
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky.is-spx-pin-after{
  position:relative!important;
  top:auto!important;
  height:auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(320px,.78fr) minmax(520px,1.22fr)!important;
  gap:clamp(32px,5vw,76px)!important;
  align-items:start!important;
  padding:0!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
  position:relative!important;
  top:auto!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step-stack,
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visuals{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  gap:14px!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step,
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  pointer-events:auto!important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step{
  padding:clamp(18px,2vw,24px)!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.058),rgba(255,255,255,.026))!important;
  border:1px solid rgba(218,236,255,.10)!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual{
  display:grid!important;
  grid-template-columns:minmax(240px,.56fr) minmax(220px,.44fr)!important;
  align-items:center!important;
  gap:18px!important;
  padding:18px!important;
  min-height:clamp(250px,24vw,330px)!important;
}

html .spx-dashboard-command-v63{min-height:390vh!important;background:#040914!important;opacity:1!important;visibility:visible!important;transform:none!important}
html .spx-dashboard-command-v63 .spx-dash-frame img[data-dashboard-image],
html .spx-dashboard-command-v63 .spx-dash-fade-ghost{object-fit:cover!important;object-position:center top!important}
html .spx-dashboard-command-v63 .spx-dash-panel{width:min(310px,calc(100vw - 40px))!important;padding:15px 16px!important;border-radius:20px!important}
html .spx-dashboard-command-v63 .spx-dash-panel b,
html .spx-dashboard-command-v63 .spx-dash-tabs b{opacity:.42!important;font-size:10px!important}
html .spx-dashboard-command-v63 .spx-dash-cursor{width:24px!important;height:24px!important;border-radius:999px!important;box-shadow:0 0 0 8px rgba(24,201,245,.10),0 0 30px rgba(24,201,245,.34)!important}

html .spx-export-section-v61 .spx-export-grid{grid-template-columns:1fr 1fr 1fr!important;transition:grid-template-columns .36s cubic-bezier(.2,.8,.2,1)!important}
html .spx-export-section-v61 .spx-export-grid:has(.spx-export-card:hover),
html .spx-export-section-v61 .spx-export-grid:has(.spx-export-card:focus-within){grid-template-columns:1.55fr .72fr .72fr!important}
html .spx-export-section-v61 .spx-export-card{min-width:0!important}
html .spx-export-section-v61 .spx-more-link{min-height:38px!important;padding:8px 12px!important}
html .spx-export-section-v61 .spx-more-link svg{width:13px!important;height:13px!important;flex:0 0 13px!important}

html .spx-support-hero-v62{grid-template-columns:minmax(0,1fr) minmax(320px,.58fr)!important}
html .spx-support-route-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
html .spx-support-hero-copy h1{max-width:780px!important}

@media(max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] [data-spx-hero-product],
  html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active [data-spx-hero-product],
  html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active [data-spx-hero-product]{position:relative!important;top:auto!important;left:auto!important;transform:none!important}
  html .spx-hero-v26[data-hero-scrollstory]:not(.spx-dom-view-active) .spx-v26-what-crisp-layer,
  html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{opacity:1!important;visibility:visible!important}
  html .spx-how-v63 .spx-why52-shell{width:min(100% - 28px,760px)!important}
  html .spx-how-v63 .spx-why52-track{height:auto!important;min-height:auto!important}
  html .spx-how-v63 .spx-why52-sticky{position:relative!important;top:auto!important;min-height:auto!important;display:grid!important;grid-template-columns:1fr!important;padding:46px 0!important}
  html .spx-how-v63 .spx-why52-copy,
  html .spx-how-v63 .spx-why52-stage{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    transform:none!important;
  }
  html .spx-how-v63 .spx-why52-stage{
    overflow:hidden!important;
    margin:18px 0 0!important;
  }
  html .spx-how-v63 .why52-network,
  html .spx-how-v63 .why52-network svg,
  html .spx-how-v63 svg{
    max-width:100%!important;
    overflow:hidden!important;
  }
  html .spx-how-v63 .why52-step,
  html .spx-how-v63 .why52-visual{position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important;margin:0!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important}
  html .spx-how-v63 .why52-visuals{width:100%!important;max-width:100%!important;margin:0!important}
  html .spx-how-v63 .why52-visual img{max-width:100%!important}
  html .spx-dashboard-command-v63{min-height:auto!important;padding:46px 14px!important}
  html .spx-dashboard-command-v63 .spx-dash-cursor{display:none!important}
  html .spx-export-section-v61 .spx-export-grid,
  html .spx-export-section-v61 .spx-export-grid:has(.spx-export-card:hover),
  html .spx-export-section-v61 .spx-export-grid:has(.spx-export-card:focus-within),
  html .spx-support-hero-v62,
  html .spx-support-route-grid,
  html .spx-summary-roadmap-v62,
  html .spx-roadmap-preview-v62{grid-template-columns:1fr!important}
  html .spx-roadmap-preview-v62{
    display:grid!important;
    width:100%!important;
    max-width:100%!important;
    margin:18px 0 0!important;
    transform:none!important;
    overflow:hidden!important;
  }
  html .spx-roadmap-preview-v62 article{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    max-width:100%!important;
    transform:none!important;
    margin:0!important;
  }
  html .spx-export-section-v61 .spx-more-link{opacity:1!important;visibility:visible!important;transform:none!important}
}
@media(max-width:760px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{font-size:clamp(34px,10.5vw,43px)!important;line-height:1.04!important;max-width:100%!important}
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-lead,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-lead strong,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-support{font-size:15px!important;line-height:1.5!important;max-width:100%!important}
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-what-head strong{font-size:clamp(24px,7.4vw,32px)!important}
  html .spx-support-hero-copy h1{font-size:clamp(31px,9.2vw,39px)!important;line-height:1.04!important}
  html .spx-support-route-grid article{min-height:auto!important}
}

/* A8.64 focused What-scene fix: only the word "Your" is gradient, the What view is compact, and the hero product fades before sticky release instead of drifting. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1 .spx-hero-gradient-word{
  display:inline-block!important;
  background:linear-gradient(105deg,#ffffff 0%,#dff8ff 24%,#18c9f5 58%,#2563eb 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  text-shadow:0 0 34px rgba(24,201,245,.20)!important;
  padding:.02em .055em .075em 0!important;
  margin:-.02em -.025em -.075em 0!important;
}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1 .spx-hero-gradient-word{
  background:linear-gradient(105deg,#101828 0%,#075985 32%,#0ea5e9 65%,#2563eb 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  text-shadow:none!important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  top:clamp(108px,12vh,132px)!important;
  width:min(900px,calc(100vw - 72px))!important;
  transform:translate3d(-50%,0,0)!important;
  transition:opacity .34s cubic-bezier(.2,.8,.2,1),visibility .34s step-end!important;
}
html .spx-hero-v26[data-hero-scrollstory]:not(.spx-dom-view-active) .spx-v26-what-crisp-layer{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer{
  opacity:.98!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
  min-height:clamp(420px,52vh,570px)!important;
  gap:8px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
  width:min(520px,calc(100% - 34px))!important;
  max-height:40px!important;
  margin:0 0 -1px 17px!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border-radius:0!important;
  object-fit:contain!important;
  object-position:left center!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
  min-height:clamp(385px,48vh,520px)!important;
  padding:clamp(22px,3.2vw,38px)!important;
  border-radius:24px!important;
  align-items:center!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
  max-width:700px!important;
  padding:clamp(17px,2.2vw,24px)!important;
  border-radius:22px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head{
  margin-bottom:12px!important;
  gap:7px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{
  font-size:clamp(22px,3.1vw,34px)!important;
  line-height:1.02!important;
  max-width:590px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-body{
  gap:clamp(14px,2vw,22px)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy p{
  font-size:clamp(13.5px,1vw,15.5px)!important;
  line-height:1.55!important;
  max-width:500px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{
  margin:10px 0!important;
  padding:9px 11px!important;
  border-radius:14px!important;
  font-size:12px!important;
  line-height:1.42!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-flow,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-footer{
  margin-top:10px!important;
}

@media(max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] [data-spx-hero-product],
  html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active [data-spx-hero-product]{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    transform:none!important;
    opacity:.64!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer,
  html .spx-hero-v26[data-hero-scrollstory]:not(.spx-dom-view-active) .spx-v26-what-crisp-layer,
  html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    transform:none!important;
    width:min(100% - 24px,760px)!important;
    margin:22px auto 0!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
    min-height:auto!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
    width:100%!important;
    max-height:34px!important;
    margin-left:0!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
    min-height:auto!important;
    padding:20px!important;
  }
}

/* A8.65 — focused What-scene correction + public maintenance bar.
   The What builder background must lock in viewport while active and fade only; the panel enters earlier with a subtle motion. */
html{
  --spx-public-header-height:74px;
  --spx-maintenance-banner-height:0px;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  top:clamp(126px,14.2vh,164px)!important;
  width:min(860px,calc(100vw - 84px))!important;
  transform:translate3d(-50%,18px,0) scale(.985)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .42s cubic-bezier(.18,.82,.18,1),transform .42s cubic-bezier(.18,.82,.18,1),visibility 0s linear .42s!important;
  will-change:opacity,transform!important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer{
  opacity:.98!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate3d(-50%,0,0) scale(1)!important;
  transition:opacity .42s cubic-bezier(.18,.82,.18,1),transform .42s cubic-bezier(.18,.82,.18,1),visibility 0s!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
  min-height:clamp(400px,49vh,540px)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
  width:min(500px,calc(100% - 32px))!important;
  max-height:38px!important;
  margin:0 0 -1px 16px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
  min-height:clamp(365px,45vh,496px)!important;
  padding:clamp(20px,3vw,34px)!important;
  border-radius:22px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
  max-width:650px!important;
  padding:clamp(16px,2vw,22px)!important;
  border-radius:20px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{
  font-size:clamp(21px,2.75vw,30px)!important;
  max-width:540px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy p{
  font-size:clamp(13px,.92vw,14.5px)!important;
  max-width:470px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{
  margin:9px 0!important;
  padding:8px 10px!important;
  border-radius:13px!important;
  font-size:11.5px!important;
}
@media(max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer,
  html .spx-hero-v26[data-hero-scrollstory]:not(.spx-dom-view-active) .spx-v26-what-crisp-layer,
  html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer{
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    width:min(100% - 24px,760px)!important;
    margin:26px auto 0!important;
  }
}

/* Public maintenance/update notice: one fixed, premium bar directly below the navigator. */
.maintenance-banner{
  position:fixed!important;
  left:50%!important;
  top:calc(var(--spx-public-header-height,74px) + 10px)!important;
  transform:translateX(-50%)!important;
  z-index:89!important;
  width:min(1180px,calc(100vw - 32px))!important;
  min-height:48px!important;
  margin:0!important;
  padding:10px 12px 10px 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  border:1px solid rgba(245,184,91,.26)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(8,17,31,.92),rgba(11,28,44,.90))!important;
  box-shadow:0 16px 48px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.04) inset!important;
  color:var(--text)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
}
.maintenance-banner::before{
  content:"";
  width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:999px;
  background:#f5b85b;
  box-shadow:0 0 18px rgba(245,184,91,.72);
}
.maintenance-banner strong{color:#ffe9bd!important;font-weight:950!important;white-space:nowrap!important;}
.maintenance-banner span{color:rgba(236,248,255,.82)!important;font-weight:720!important;min-width:0!important;}
.maintenance-banner a{margin-left:auto!important;color:#06101e!important;background:linear-gradient(135deg,#f5b85b,#ffd897)!important;text-decoration:none!important;border-radius:999px!important;padding:8px 12px!important;font-weight:950!important;box-shadow:0 8px 22px rgba(245,184,91,.22)!important;}
html[data-theme="light"] .maintenance-banner{background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(238,247,255,.92))!important;border-color:rgba(217,119,6,.22)!important;box-shadow:0 16px 42px rgba(20,34,62,.14)!important;}
html[data-theme="light"] .maintenance-banner strong{color:#7a3d00!important;}
html[data-theme="light"] .maintenance-banner span{color:#334155!important;}
@media(max-width:720px){
  .maintenance-banner{
    top:calc(var(--spx-public-header-height,68px) + 8px)!important;
    width:calc(100vw - 24px)!important;
    border-radius:22px!important;
    justify-content:flex-start!important;
    padding:11px 12px!important;
  }
  .maintenance-banner a{width:100%!important;text-align:center!important;margin-left:0!important;}
}

/* ==========================================================================
   A8.66 — What lock/fade correction + full-width maintenance update bar
   ========================================================================== */
html .spx-hero-v26[data-hero-scrollstory]{
  --spx-what-scene-opacity:0;
}

/* The crisp What layer is the only visible What copy. Keep the duplicate DOM
   layer inside the product stack hidden so no dark block remains after fade. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:none!important;
  filter:none!important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  top:clamp(136px,15.8vh,178px)!important;
  opacity:var(--spx-what-scene-opacity,0)!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(-50%,10px,0) scale(.992)!important;
  transition:opacity .38s cubic-bezier(.18,.82,.18,1),transform .38s cubic-bezier(.18,.82,.18,1),visibility 0s linear .38s!important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer{
  opacity:var(--spx-what-scene-opacity,0)!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate3d(-50%,0,0) scale(1)!important;
  transition:opacity .38s cubic-bezier(.18,.82,.18,1),transform .38s cubic-bezier(.18,.82,.18,1),visibility 0s!important;
}

/* Topbar slightly left, as requested. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
  margin-left:8px!important;
}

/* During the What focus stage the product uses the restored fullscreen transform,
   then fixes only after that transform is reached so the hero animation stays owned
   by the progress controller. */
@media (min-width:981px){
  .v26-product-atmosphere.spx-what-product-locked{
    position:fixed!important;
    left:var(--spx-hero-product-left,58.55%)!important;
    top:var(--spx-hero-product-top,45.9%)!important;
    width:min(1146px,82.5vw)!important;
    height:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    aspect-ratio:1919 / 913!important;
    transform-origin:50% 44%!important;
    transform:translate(var(--spx-hero-product-tx,-15.4%),var(--spx-hero-product-ty,-18.6%)) perspective(1480px) rotateY(var(--spx-hero-product-ry,-6deg)) rotateX(var(--spx-hero-product-rx,2.8deg)) rotateZ(var(--spx-hero-product-rz,-.35deg)) scale(var(--spx-hero-product-scale,1)) scaleY(var(--spx-hero-product-fold-scale-y,1)) translate3d(calc(var(--spx-v26-x,0px) * .025),calc(var(--spx-v26-y,0px) * .018 + var(--spx-hero-product-fold-y,0px)),0)!important;
    opacity:var(--spx-hero-product-opacity,.82)!important;
    filter:saturate(var(--spx-hero-product-saturate,1)) brightness(var(--spx-hero-product-brightness,.84))!important;
    pointer-events:none!important;
    will-change:opacity,filter!important;
  }
}

/* Fade every visual piece together; do not leave a dark What card/background
   behind when the product image disappears. */
html .spx-hero-v26[data-hero-scrollstory]:not(.spx-dom-view-active) .spx-v26-what-crisp-layer,
html .spx-hero-v26[data-hero-scrollstory]:not(.spx-dom-view-active) .spx-v26-what-crisp-layer *{
  pointer-events:none!important;
}

/* Public maintenance/update notice: full-width yellow bar directly below nav,
   not a pill. It remains fixed during scroll. */
.maintenance-banner{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:var(--spx-public-header-height,74px)!important;
  transform:none!important;
  z-index:89!important;
  width:100%!important;
  min-height:42px!important;
  margin:0!important;
  padding:9px var(--side)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  flex-wrap:nowrap!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(90deg,#f6c453,#ffd777)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.20)!important;
  color:#241400!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.maintenance-banner::before{
  content:""!important;
  width:8px!important;
  height:8px!important;
  flex:0 0 8px!important;
  border-radius:999px!important;
  background:#3a2400!important;
  box-shadow:none!important;
}
.maintenance-banner strong,
html[data-theme="light"] .maintenance-banner strong{
  color:#241400!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
.maintenance-banner span,
html[data-theme="light"] .maintenance-banner span{
  color:#3b2600!important;
  font-weight:760!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.maintenance-banner a,
html[data-theme="light"] .maintenance-banner a{
  margin-left:8px!important;
  color:#241400!important;
  background:rgba(255,255,255,.38)!important;
  border:1px solid rgba(36,20,0,.16)!important;
  text-decoration:none!important;
  border-radius:999px!important;
  padding:6px 10px!important;
  font-weight:950!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}
.maintenance-banner a:hover{background:rgba(255,255,255,.58)!important;}
@media(max-width:720px){
  .maintenance-banner{
    top:var(--spx-public-header-height,68px)!important;
    width:100%!important;
    border-radius:0!important;
    justify-content:flex-start!important;
    padding:9px 14px!important;
    gap:9px!important;
  }
  .maintenance-banner span{white-space:normal!important;line-height:1.28!important;}
  .maintenance-banner a{margin-left:auto!important;width:auto!important;text-align:center!important;}
}

/* ========================================================================== 
   A8.67 — Screen consistency + What view polish + How stabilization
   Goal: keep 1080p/1440p/ultrawide visually comparable without touching
   builder-performance internals.
   ========================================================================== */
:root{
  --spx-public-max: 1240px;
  --spx-public-wide-max: 1440px;
  --spx-hero-title-fluid: clamp(62px, min(7.75vw, 11.25vh), 126px);
  --spx-hero-lead-fluid: clamp(16px, min(1.18vw, 2.05vh), 20px);
}

/* Screen consistency: cap hero copy and type so 2560x1440 does not feel like a
   different, oversized website compared with 1920x1080. */
html .spx-hero-v26[data-hero-scrollstory]{
  min-height: clamp(860px, 104svh, 1120px) !important;
  padding-top: clamp(132px, 11svh, 182px) !important;
  padding-bottom: clamp(150px, 14svh, 218px) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-shell{
  width:min(var(--spx-public-max), 100%) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
  max-width:min(700px, 64vw) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
  font-size:var(--spx-hero-title-fluid) !important;
  line-height:.86 !important;
  letter-spacing:clamp(-.085em, -.072em, -.06em) !important;
  max-width:780px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-lead{
  font-size:var(--spx-hero-lead-fluid) !important;
  max-width:600px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-support{
  max-width:590px !important;
}

@media (min-width: 2200px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-shell{
    width:min(1280px, 100%) !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
    font-size:120px !important;
  }
}
@media (max-width: 1180px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
    max-width:min(680px, 72vw) !important;
  }
}
@media (max-width: 720px){
  html .spx-hero-v26[data-hero-scrollstory]{
    min-height:auto !important;
    padding-top:112px !important;
    padding-bottom:128px !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
    max-width:100% !important;
  }
}

/* What view: keep the current hero animation owner intact, but make the DOM view
   smaller, sharper and higher so it reads like a builder canvas instead of a
   large low-floating card. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  top:clamp(96px, 10.8vh, 138px) !important;
  width:min(760px, calc(100vw - 96px)) !important;
  transform:translate3d(-50%, 6px, 0) scale(.994) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer{
  transform:translate3d(-50%, 0, 0) scale(1) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
  min-height:clamp(340px, 42vh, 472px) !important;
  gap:6px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
  width:min(420px, calc(100% - 28px)) !important;
  max-height:32px !important;
  margin:0 0 -1px 6px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
  min-height:clamp(318px, 39vh, 430px) !important;
  padding:clamp(16px, 2.25vw, 26px) !important;
  border-radius:20px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
  max-width:560px !important;
  padding:clamp(14px, 1.55vw, 18px) !important;
  border-radius:18px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{
  font-size:clamp(20px, 2.1vw, 26px) !important;
  line-height:1.06 !important;
  max-width:490px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy p{
  font-size:clamp(12.5px, .82vw, 13.8px) !important;
  line-height:1.5 !important;
  max-width:430px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{
  margin:7px 0 !important;
  padding:7px 9px !important;
  font-size:11px !important;
  line-height:1.34 !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-panel{
  gap:7px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row{
  padding:8px 9px !important;
}

/* How Spixor Works final stable layout. This intentionally avoids another heavy
   rebuild: the existing markup stays, but the active step/visual becomes a clear
   desktop split and mobile becomes stacked. */
html .spx-why-section.spx-why-v52.spx-how-v63{
  margin-top:clamp(-210px, -11vw, -120px) !important;
  padding:clamp(260px, 20vw, 390px) var(--side) clamp(96px, 9vw, 150px) !important;
  background:transparent !important;
  overflow:visible !important;
  filter:none !important;
  transform:none !important;
  perspective:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63::before,
html .spx-why-section.spx-why-v52.spx-how-v63::after{
  display:none !important;
  content:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell{
  width:min(var(--spx-public-wide-max), 100%) !important;
  margin-inline:auto !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track{
  min-height:clamp(1780px, 245vh, 2500px) !important;
  overflow:visible !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
  position:sticky !important;
  top:clamp(72px, 9vh, 104px) !important;
  height:calc(100svh - clamp(92px, 11vh, 124px)) !important;
  min-height:620px !important;
  display:grid !important;
  grid-template-columns:minmax(330px, 460px) minmax(560px, 1fr) !important;
  gap:clamp(30px, 4vw, 64px) !important;
  align-items:center !important;
  overflow:visible !important;
  filter:none !important;
  transform:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy{
  position:relative !important;
  height:min(500px, calc(100svh - 180px)) !important;
  min-height:410px !important;
  overflow:hidden !important;
  display:block !important;
  filter:none !important;
  transform:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-story-head{
  position:relative !important;
  z-index:3 !important;
  margin-bottom:18px !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step-nav{
  position:relative !important;
  z-index:3 !important;
  margin-bottom:14px !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step-stack{
  position:relative !important;
  height:calc(100% - 168px) !important;
  min-height:245px !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  min-height:0 !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate3d(0, 18px, 0) !important;
  filter:none !important;
  transition:opacity .42s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1), visibility .42s !important;
  overflow:visible !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step.is-active,
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step[data-spx-active="1"]{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translate3d(0,0,0) !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step p,
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step ul{
  opacity:1 !important;
  visibility:visible !important;
  max-height:none !important;
  overflow:visible !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
  position:relative !important;
  width:min(100%, 980px) !important;
  height:min(720px, calc(100svh - 116px)) !important;
  min-height:560px !important;
  justify-self:end !important;
  overflow:visible !important;
  filter:none !important;
  transform:none !important;
  perspective:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visuals{
  position:absolute !important;
  inset:0 !important;
  overflow:visible !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual{
  position:absolute !important;
  inset:0 !important;
  margin:0 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate3d(48px, 18px, 0) scale(.985) !important;
  filter:none !important;
  transition:opacity .48s cubic-bezier(.16,1,.3,1), transform .48s cubic-bezier(.16,1,.3,1), visibility .48s !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual.is-active,
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual[data-spx-active="1"]{
  opacity:1 !important;
  visibility:visible !important;
  transform:translate3d(0,0,0) scale(1) !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual img{
  position:absolute !important;
  inset:clamp(10px, 2vh, 24px) clamp(-160px, -9vw, -80px) clamp(72px, 8vh, 104px) 0 !important;
  width:calc(100% + clamp(88px, 9vw, 170px)) !important;
  height:calc(100% - clamp(92px, 10vh, 126px)) !important;
  object-fit:contain !important;
  object-position:center right !important;
  border:0 !important;
  box-shadow:0 34px 98px rgba(0,0,0,.20), 0 0 70px rgba(24,201,245,.08) !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual figcaption{
  left:18px !important;
  bottom:8px !important;
  width:min(340px, 44vw) !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 + *{
  filter:none !important;
  transform:none !important;
  perspective:none !important;
  opacity:1 !important;
}

@media (max-width: 1180px){
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(310px, 430px) minmax(480px, 1fr) !important;
    gap:34px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
    min-height:520px !important;
  }
}
@media (max-width: 980px){
  html .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:-110px !important;
    padding:170px var(--side) 76px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track{
    min-height:auto !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
    position:relative !important;
    top:auto !important;
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step-stack{
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    gap:14px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step{
    position:relative !important;
    inset:auto !important;
    height:auto !important;
    min-height:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    padding:16px !important;
    border-radius:18px !important;
    background:rgba(7,14,28,.52) !important;
    border:1px solid rgba(107,232,255,.13) !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visuals{
    position:relative !important;
    inset:auto !important;
    display:grid !important;
    gap:16px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual.is-active,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual[data-spx-active="1"]{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    min-height:360px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual img{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    max-height:300px !important;
    object-fit:contain !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual figcaption{
    position:relative !important;
    left:auto !important;
    bottom:auto !important;
    width:100% !important;
    margin-top:10px !important;
  }
}


/* ==========================================================================
   A8.69 — hero title sizing + capture-based What product lock
   --------------------------------------------------------------------------
   Keep the hero copy in the same visual position, but make the headline more
   present across 1080p/1440p. The product lock itself is now captured in JS, so
   this CSS only provides the normal animated state and avoids forcing a second
   fixed geometry when .spx-what-product-locked is added.
   ========================================================================== */
:root{
  --spx-hero-title-fluid: clamp(76px, min(8.9vw, 12.8vh), 148px);
}
html .spx-hero-v26[data-hero-scrollstory]{
  padding-top: clamp(118px, 9.6svh, 158px) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
  transform: translate3d(0,-12px,0) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
  font-size: var(--spx-hero-title-fluid) !important;
  line-height: .84 !important;
  max-width: 860px !important;
}
@media (min-width: 2200px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
    font-size: 142px !important;
  }
}
@media (max-width: 980px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
    transform:none !important;
  }
}
@media (max-width: 720px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
    font-size: clamp(40px, 12vw, 56px) !important;
    line-height: .98 !important;
  }
}

@media (min-width:981px){
  /* The fixed What-lock geometry is written inline by JS from the exact rendered
     rect. Do not let legacy class rules snap the product to a different top/left
     at the lock moment. */
  .v26-product-atmosphere.spx-what-product-locked{
    left: var(--spx-what-lock-left, auto);
    top: var(--spx-what-lock-top, auto);
  }
}


/* ==========================================================================
   A8.70 — What lock return + interactive What content polish
   ========================================================================== */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
  background:
    radial-gradient(circle at 18% 16%, rgba(31,211,255,.13), transparent 34%),
    linear-gradient(145deg, rgba(7,13,28,.76), rgba(8,12,24,.56)) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{
  letter-spacing:-.035em !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy p{
  max-width:58ch !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-panel{
  gap:8px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  border:1px solid rgba(111,229,255,.10) !important;
  cursor:pointer !important;
  text-align:left !important;
  color:inherit !important;
  transition:background .24s ease,border-color .24s ease,transform .24s ease,box-shadow .24s ease !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row:hover,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row:focus-visible{
  border-color:rgba(111,229,255,.26) !important;
  transform:translate3d(2px,0,0) !important;
  box-shadow:0 12px 26px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.025) !important;
  outline:none !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row.is-active{
  background:linear-gradient(135deg,rgba(25,211,255,.19),rgba(87,112,255,.09)) !important;
  border-color:rgba(94,231,255,.30) !important;
  box-shadow:0 16px 38px rgba(7,20,42,.20), inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-content-card[data-spx-what-state="structure"]{
  background:
    radial-gradient(circle at 86% 22%, rgba(121,117,255,.13), transparent 35%),
    linear-gradient(145deg, rgba(7,13,28,.76), rgba(8,12,24,.56)) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-content-card[data-spx-what-state="launch"]{
  background:
    radial-gradient(circle at 82% 20%, rgba(255,208,86,.13), transparent 34%),
    linear-gradient(145deg, rgba(7,13,28,.76), rgba(8,12,24,.56)) !important;
}
@media (max-width:720px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row:hover,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row:focus-visible{
    transform:none !important;
  }
}

/* ========================================================================
   A8.71 — What content rework + smoother hero → How handoff
   ------------------------------------------------------------------------
   Keep the repaired hero animation, but make the What layer feel like a
   compact interactive builder command view. Also let How fade in while the
   builder/What layer fades out instead of leaving a dark pause.
   ======================================================================== */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  top:clamp(92px, 10.2vh, 128px) !important;
  width:min(720px, calc(100vw - 96px)) !important;
  transition:
    opacity .52s cubic-bezier(.16,1,.3,1),
    transform .52s cubic-bezier(.16,1,.3,1),
    visibility .52s step-end !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-phase-what-fade-out .spx-v26-what-crisp-layer{
  transform:translate3d(-50%, -8px, 0) scale(.992) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
  min-height:clamp(316px, 38vh, 438px) !important;
  gap:6px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
  width:min(410px, calc(100% - 28px)) !important;
  max-height:31px !important;
  margin-left:4px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
  min-height:clamp(292px, 34vh, 394px) !important;
  padding:clamp(14px, 1.9vw, 22px) !important;
  display:grid !important;
  align-items:center !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
  width:min(100%, 540px) !important;
  max-width:540px !important;
  padding:clamp(14px, 1.55vw, 18px) !important;
  display:grid !important;
  gap:12px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.045)) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head-a871{
  margin:0 !important;
  gap:6px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head-a871 strong{
  font-size:clamp(21px, 1.95vw, 28px) !important;
  line-height:1.02 !important;
  max-width:430px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-console{
  display:grid !important;
  grid-template-columns:minmax(0, 1.05fr) minmax(170px, .8fr) !important;
  gap:12px !important;
  align-items:stretch !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-preview-card{
  position:relative !important;
  min-height:128px !important;
  border-radius:18px !important;
  padding:15px 15px 14px !important;
  background:
    radial-gradient(160px 120px at 18% 0%, rgba(34,211,238,.18), transparent 68%),
    linear-gradient(145deg, rgba(6,14,28,.82), rgba(10,22,41,.55)) !important;
  border:1px solid rgba(147,231,255,.16) !important;
  overflow:hidden !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.16) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-preview-card::after{
  content:"" !important;
  position:absolute !important;
  right:14px !important;
  bottom:14px !important;
  width:64px !important;
  height:36px !important;
  border-radius:13px !important;
  border:1px solid rgba(107,232,255,.18) !important;
  background:linear-gradient(135deg, rgba(34,211,238,.18), rgba(37,99,235,.10)) !important;
  opacity:.9 !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-preview-dot{
  display:inline-flex !important;
  width:9px !important;
  height:9px !important;
  border-radius:999px !important;
  background:#22d3ee !important;
  box-shadow:0 0 18px rgba(34,211,238,.55) !important;
  margin-bottom:16px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-preview-card b{
  display:block !important;
  color:var(--text) !important;
  font-size:14px !important;
  line-height:1.15 !important;
  letter-spacing:-.01em !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-preview-card p{
  margin:7px 0 0 !important;
  max-width:270px !important;
  color:var(--secondary) !important;
  font-size:12.2px !important;
  line-height:1.45 !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-panel{
  display:grid !important;
  gap:7px !important;
  align-content:stretch !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row{
  display:grid !important;
  gap:3px !important;
  text-align:left !important;
  min-height:0 !important;
  padding:10px 11px !important;
  border-radius:15px !important;
  cursor:pointer !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row b{
  font-size:12px !important;
  letter-spacing:.02em !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row span{
  font-size:11px !important;
  line-height:1.24 !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice-a871{
  grid-column:1 / -1 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  padding:7px 9px !important;
  border-radius:14px !important;
  font-size:11px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice-a871 span{
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-footer-a871{
  margin-top:0 !important;
  gap:7px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-footer-a871 span{
  font-size:10.5px !important;
  padding:5px 7px !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52{
  opacity:var(--spx-how-underlay-opacity, 1) !important;
  transform:scale(var(--spx-how-underlay-scale,1)) !important;
  filter:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52 .spx-why52-head,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52 .spx-why52-track{
  opacity:calc(.08 + (var(--spx-how-underlay-opacity,0) * .92)) !important;
}
@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-console{
    grid-template-columns:1fr !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-preview-card{
    min-height:112px !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice-a871{
    flex-wrap:wrap !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice-a871 span{
    white-space:normal !important;
  }
}

/* ========================================================================
   A8.72 — What placement, How CTA and smoother builder → How handoff
   ======================================================================== */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  top:clamp(118px, 12.8vh, 168px) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:max-content !important;
  max-width:100% !important;
  min-height:34px !important;
  margin-top:2px !important;
  padding:8px 12px 8px 14px !important;
  border-radius:999px !important;
  text-decoration:none !important;
  color:#03131f !important;
  font-size:11.5px !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  background:linear-gradient(135deg, #7eeaff, #42b7ff 52%, #8d8cff) !important;
  box-shadow:0 12px 30px rgba(19,190,255,.16), inset 0 1px 0 rgba(255,255,255,.44) !important;
  overflow:hidden !important;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link::before{
  content:"" !important;
  position:absolute !important;
  inset:-2px auto -2px -34% !important;
  width:34% !important;
  transform:skewX(-18deg) translateX(-120%) !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent) !important;
  opacity:.8 !important;
  transition:transform .52s cubic-bezier(.16,1,.3,1) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link span,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link svg{
  position:relative !important;
  z-index:1 !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link svg{
  width:12px !important;
  height:12px !important;
  transition:transform .22s ease !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link:hover,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link:focus-visible{
  transform:translate3d(0,-1px,0) !important;
  filter:saturate(1.05) brightness(1.04) !important;
  box-shadow:0 18px 42px rgba(19,190,255,.24), inset 0 1px 0 rgba(255,255,255,.55) !important;
  outline:none !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link:hover::before,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link:focus-visible::before{
  transform:skewX(-18deg) translateX(470%) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link:hover svg,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link:focus-visible svg{
  transform:translate3d(2px,0,0) !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52{
  opacity:var(--spx-how-underlay-opacity, 0) !important;
  transform:translate3d(0,var(--spx-how-underlay-y,0px),0) scale(var(--spx-how-underlay-scale,1)) !important;
  filter:none !important;
  transition:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52 .spx-why52-track,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52 .spx-why52-sticky{
  opacity:calc(.02 + (var(--spx-how-underlay-opacity,0) * .98)) !important;
  transform:none !important;
  filter:none !important;
}
@media (max-width:720px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
    top:clamp(84px, 10vh, 118px) !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
    width:100% !important;
    min-height:42px !important;
  }
}


/* ========================================================================
   A8.73 — What CTA interaction + real scroll handoff to How
   ------------------------------------------------------------------------
   Keep the How section as the next physical section. The What CTA must be
   clickable even inside the crisp overlay, and How should not fade in under
   the builder while the hero scene is still pinned.
   ======================================================================== */
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-builder-content-card,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link{
  pointer-events:auto !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
  z-index:30 !important;
  pointer-events:auto !important;
  user-select:none !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link::after{
  content:"" !important;
  position:absolute !important;
  inset:-8px !important;
  border-radius:inherit !important;
  pointer-events:auto !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52 .spx-why52-track,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52 .spx-why52-sticky{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63{
  scroll-margin-top:calc(var(--spx-public-header-height, 84px) + 18px) !important;
}

/* ========================================================================
   A8.75 — Reliable What → How CTA without touching the repaired builder lock
   ------------------------------------------------------------------------
   The CTA inside the preview can sit below pointer-event safety layers. This
   body-level floating button is visually aligned over it and is the real hit
   target, so the preview overlay can no longer swallow the click. A8.74's
   heavier physical-handoff overrides are intentionally not carried forward,
   keeping the A8.73 builder-image position intact.
   ======================================================================== */
.spx-floating-how-cta{
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  z-index:2147483000 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  border:0 !important;
  border-radius:999px !important;
  padding:0 14px !important;
  margin:0 !important;
  color:#03131f !important;
  font-size:11.5px !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  line-height:1 !important;
  background:linear-gradient(135deg, #7eeaff, #42b7ff 52%, #8d8cff) !important;
  box-shadow:0 12px 30px rgba(19,190,255,.18), inset 0 1px 0 rgba(255,255,255,.46) !important;
  cursor:pointer !important;
  pointer-events:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
  touch-action:manipulation !important;
  transform:translate3d(-9999px,-9999px,0) !important;
  transition:opacity .18s ease, filter .22s ease, box-shadow .22s ease !important;
}
.spx-floating-how-cta.is-visible{
  pointer-events:auto !important;
  opacity:1 !important;
  visibility:visible !important;
}
.spx-floating-how-cta::before{
  content:"" !important;
  position:absolute !important;
  inset:-2px auto -2px -34% !important;
  width:34% !important;
  transform:skewX(-18deg) translateX(-120%) !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.56), transparent) !important;
  opacity:.8 !important;
  transition:transform .52s cubic-bezier(.16,1,.3,1) !important;
  pointer-events:none !important;
}
.spx-floating-how-cta span,
.spx-floating-how-cta svg{
  position:relative !important;
  z-index:1 !important;
}
.spx-floating-how-cta svg{
  width:12px !important;
  height:12px !important;
  transition:transform .22s ease !important;
}
.spx-floating-how-cta:hover,
.spx-floating-how-cta:focus-visible{
  filter:saturate(1.05) brightness(1.04) !important;
  box-shadow:0 18px 42px rgba(19,190,255,.25), inset 0 1px 0 rgba(255,255,255,.55) !important;
  outline:none !important;
}
.spx-floating-how-cta:hover::before,
.spx-floating-how-cta:focus-visible::before{
  transform:skewX(-18deg) translateX(470%) !important;
}
.spx-floating-how-cta:hover svg,
.spx-floating-how-cta:focus-visible svg{
  transform:translate3d(2px,0,0) !important;
}
@media (max-width:720px){
  .spx-floating-how-cta{
    min-height:42px !important;
    font-size:12px !important;
  }
}

/* ========================================================================
   A8.76 — What CTA click shield fix
   ------------------------------------------------------------------------
   The hero copy/actions layer can remain in the same visual stacking context
   while fully transparent. During the What state it must not receive pointer
   events, otherwise it can swallow clicks meant for the How CTA.
   ======================================================================== */
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-copy,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-actions{
  pointer-events:none !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-copy *,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-actions *{
  pointer-events:none !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer *,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link{
  pointer-events:auto !important;
}
.spx-floating-how-cta{
  z-index:2147483647 !important;
  isolation:isolate !important;
}
.spx-floating-how-cta.is-visible{
  pointer-events:auto !important;
}

/* ========================================================================
   A8.77 — What CTA hover feedback + hidden hero selection shield
   ------------------------------------------------------------------------
   The body-level CTA is the real click target while the visual CTA remains in
   the pinned What preview. Bridge hover/focus states to both elements and make
   the now-transparent hero copy non-selectable while the What view is active.
   ======================================================================== */
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-copy,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-copy *,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-actions,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-actions *{
  -webkit-user-select:none !important;
  user-select:none !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-copy{
  cursor:default !important;
}
.spx-floating-how-cta.is-hovered,
.spx-floating-how-cta:hover,
.spx-floating-how-cta:focus-visible{
  filter:saturate(1.1) brightness(1.075) !important;
  box-shadow:0 20px 48px rgba(19,190,255,.30), 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.62) !important;
  transform:var(--spx-floating-how-transform, translate3d(-9999px,-9999px,0)) scale(1.025) !important;
}
.spx-floating-how-cta.is-hovered::before,
.spx-floating-how-cta:hover::before,
.spx-floating-how-cta:focus-visible::before{
  transform:skewX(-18deg) translateX(470%) !important;
}
.spx-floating-how-cta.is-hovered svg,
.spx-floating-how-cta:hover svg,
.spx-floating-how-cta:focus-visible svg{
  transform:translate3d(3px,0,0) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible{
  filter:saturate(1.08) brightness(1.06) !important;
  box-shadow:0 18px 44px rgba(19,190,255,.26), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible svg{
  transform:translate3d(3px,0,0) !important;
}


/* ========================================================================
   A8.78 — Keep What → How CTA label on one line
   ------------------------------------------------------------------------
   The floating CTA is wider than the visual source button on some breakpoints.
   Keep label/icon as a single-line pill and prevent hover scale from forcing
   the text into two rows.
   ======================================================================== */
.spx-floating-how-cta,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
  white-space:nowrap !important;
  flex-wrap:nowrap !important;
  min-width:clamp(148px, 10.5vw, 174px) !important;
}
.spx-floating-how-cta span,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link span{
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
  min-width:max-content !important;
  line-height:1 !important;
}
.spx-floating-how-cta svg,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link svg{
  flex:0 0 auto !important;
}
@media (max-width:720px){
  .spx-floating-how-cta,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
    min-width:154px !important;
  }
}

/* ========================================================================
   A8.79 — Make the working What → How CTA feel animated, not just brighter
   ------------------------------------------------------------------------
   Keep the A8.76/A8.77 click + selection shields intact. This only improves
   hover/focus feedback on the body-level CTA and mirrors it to the visible
   CTA inside the What card. The label remains one line.
   ======================================================================== */
@keyframes spxHowCtaArrowNudgeA879{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(5px,0,0)}
}
@keyframes spxHowCtaHaloA879{
  0%,100%{opacity:.24;transform:translate3d(0,-50%,0) scale(.86)}
  50%{opacity:.42;transform:translate3d(0,-50%,0) scale(1.04)}
}
.spx-floating-how-cta,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
  background-size:180% 100% !important;
  background-position:0% 50% !important;
  transition:
    opacity .18s ease,
    filter .24s ease,
    box-shadow .24s ease,
    background-position .38s cubic-bezier(.16,1,.3,1),
    transform .30s cubic-bezier(.16,1,.3,1) !important;
}
.spx-floating-how-cta::after,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link::after{
  content:"" !important;
  position:absolute !important;
  right:7px !important;
  top:50% !important;
  width:24px !important;
  height:24px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35) !important;
  opacity:.18 !important;
  transform:translate3d(0,-50%,0) scale(.82) !important;
  transition:opacity .28s ease, transform .34s cubic-bezier(.16,1,.3,1), background .28s ease !important;
  pointer-events:none !important;
  z-index:0 !important;
}
.spx-floating-how-cta span,
.spx-floating-how-cta svg,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link span,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link svg{
  transition:transform .30s cubic-bezier(.16,1,.3,1), opacity .24s ease !important;
}
.spx-floating-how-cta.is-hovered,
.spx-floating-how-cta:hover,
.spx-floating-how-cta:focus-visible{
  background-position:100% 50% !important;
  filter:saturate(1.18) brightness(1.11) !important;
  box-shadow:
    0 18px 48px rgba(19,190,255,.34),
    0 0 0 1px rgba(255,255,255,.28),
    0 0 34px rgba(95,136,255,.18),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
  transform:var(--spx-floating-how-transform, translate3d(-9999px,-9999px,0)) translate3d(0,-2px,0) scale(1.055) !important;
}
.spx-floating-how-cta.is-hovered::after,
.spx-floating-how-cta:hover::after,
.spx-floating-how-cta:focus-visible::after{
  opacity:.42 !important;
  background:rgba(255,255,255,.30) !important;
  transform:translate3d(0,-50%,0) scale(1) !important;
  animation:spxHowCtaHaloA879 1.15s ease-in-out infinite !important;
}
.spx-floating-how-cta.is-hovered::before,
.spx-floating-how-cta:hover::before,
.spx-floating-how-cta:focus-visible::before{
  transform:skewX(-18deg) translateX(520%) !important;
  opacity:.95 !important;
}
.spx-floating-how-cta.is-hovered span,
.spx-floating-how-cta:hover span,
.spx-floating-how-cta:focus-visible span{
  transform:translate3d(-2px,0,0) !important;
}
.spx-floating-how-cta.is-hovered svg,
.spx-floating-how-cta:hover svg,
.spx-floating-how-cta:focus-visible svg{
  transform:translate3d(5px,0,0) !important;
  animation:spxHowCtaArrowNudgeA879 .86s ease-in-out infinite !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible{
  background-position:100% 50% !important;
  filter:saturate(1.16) brightness(1.09) !important;
  box-shadow:
    0 18px 46px rgba(19,190,255,.30),
    0 0 0 1px rgba(255,255,255,.22),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
  transform:translate3d(0,-2px,0) scale(1.035) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible::after{
  opacity:.36 !important;
  transform:translate3d(0,-50%,0) scale(1) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered span,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover span,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible span{
  transform:translate3d(-2px,0,0) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible svg{
  transform:translate3d(5px,0,0) !important;
}
@media (prefers-reduced-motion: reduce){
  .spx-floating-how-cta,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link,
  .spx-floating-how-cta::before,
  .spx-floating-how-cta::after,
  .spx-floating-how-cta svg,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link::before,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link::after,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link svg{
    animation:none !important;
    transition:none !important;
  }
}

/* ========================================================================
   A8.80 — Stable What → How CTA hover polish
   ------------------------------------------------------------------------
   A8.79 made the CTA feel more animated, but animating the root transform of
   the body-level floating button can fight with the JS transform that aligns
   it over the visible CTA. Keep the button position completely stable and make
   the interaction feel alive through glow, sheen, arrow and halo motion only.
   ======================================================================== */
@keyframes spxHowCtaGlowA880{
  0%,100%{opacity:.28; transform:translate3d(0,-50%,0) scale(.86)}
  50%{opacity:.54; transform:translate3d(0,-50%,0) scale(1.08)}
}
.spx-floating-how-cta,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
  transform:var(--spx-floating-how-transform, translate3d(-9999px,-9999px,0)) !important;
  transition:
    opacity .18s ease,
    filter .28s ease,
    box-shadow .34s cubic-bezier(.16,1,.3,1),
    background-position .45s cubic-bezier(.16,1,.3,1) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
  transform:none !important;
}
.spx-floating-how-cta.is-hovered,
.spx-floating-how-cta:hover,
.spx-floating-how-cta:focus-visible{
  transform:var(--spx-floating-how-transform, translate3d(-9999px,-9999px,0)) !important;
  background-position:100% 50% !important;
  filter:saturate(1.16) brightness(1.1) !important;
  box-shadow:
    0 18px 44px rgba(19,190,255,.34),
    0 0 0 1px rgba(255,255,255,.28),
    0 0 36px rgba(95,136,255,.20),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible{
  transform:none !important;
  background-position:100% 50% !important;
  filter:saturate(1.14) brightness(1.08) !important;
  box-shadow:
    0 16px 40px rgba(19,190,255,.28),
    0 0 0 1px rgba(255,255,255,.24),
    0 0 30px rgba(95,136,255,.16),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
}
.spx-floating-how-cta.is-hovered::after,
.spx-floating-how-cta:hover::after,
.spx-floating-how-cta:focus-visible::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible::after{
  opacity:.46 !important;
  background:rgba(255,255,255,.32) !important;
  transform:translate3d(0,-50%,0) scale(1) !important;
  animation:spxHowCtaGlowA880 1.35s ease-in-out infinite !important;
}
.spx-floating-how-cta.is-hovered::before,
.spx-floating-how-cta:hover::before,
.spx-floating-how-cta:focus-visible::before,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered::before,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover::before,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible::before{
  transform:skewX(-18deg) translateX(520%) !important;
  opacity:.95 !important;
}
.spx-floating-how-cta.is-hovered span,
.spx-floating-how-cta:hover span,
.spx-floating-how-cta:focus-visible span,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered span,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover span,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible span{
  transform:none !important;
}
.spx-floating-how-cta.is-hovered svg,
.spx-floating-how-cta:hover svg,
.spx-floating-how-cta:focus-visible svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible svg{
  transform:translate3d(4px,0,0) !important;
  animation:none !important;
}
@media (prefers-reduced-motion: reduce){
  .spx-floating-how-cta::after,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link::after{
    animation:none !important;
  }
}

/* ========================================================================
   A8.81 — Softer What → How CTA hover glow
   ------------------------------------------------------------------------
   Keep the working body-level CTA position/click shield from A8.80, but make
   the hover less abrupt and remove the circular halo behind the arrow/button.
   ======================================================================== */
.spx-floating-how-cta,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
  transition:
    opacity .22s ease,
    filter .42s cubic-bezier(.16,1,.3,1),
    box-shadow .52s cubic-bezier(.16,1,.3,1),
    background-position .58s cubic-bezier(.16,1,.3,1) !important;
}
.spx-floating-how-cta.is-hovered,
.spx-floating-how-cta:hover,
.spx-floating-how-cta:focus-visible{
  filter:saturate(1.08) brightness(1.045) !important;
  box-shadow:
    0 14px 34px rgba(19,190,255,.22),
    0 0 0 1px rgba(255,255,255,.20),
    0 0 22px rgba(95,136,255,.11),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible{
  filter:saturate(1.06) brightness(1.04) !important;
  box-shadow:
    0 12px 30px rgba(19,190,255,.19),
    0 0 0 1px rgba(255,255,255,.18),
    0 0 18px rgba(95,136,255,.09),
    inset 0 1px 0 rgba(255,255,255,.54) !important;
}
.spx-floating-how-cta::after,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link::after,
.spx-floating-how-cta.is-hovered::after,
.spx-floating-how-cta:hover::after,
.spx-floating-how-cta:focus-visible::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible::after{
  opacity:0 !important;
  animation:none !important;
  background:transparent !important;
  box-shadow:none !important;
}
.spx-floating-how-cta.is-hovered::before,
.spx-floating-how-cta:hover::before,
.spx-floating-how-cta:focus-visible::before,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered::before,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover::before,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible::before{
  opacity:.62 !important;
  transform:skewX(-18deg) translateX(420%) !important;
  transition:transform .72s cubic-bezier(.16,1,.3,1), opacity .48s ease !important;
}
.spx-floating-how-cta svg,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link svg{
  transition:transform .38s cubic-bezier(.16,1,.3,1), opacity .38s ease !important;
}
.spx-floating-how-cta.is-hovered svg,
.spx-floating-how-cta:hover svg,
.spx-floating-how-cta:focus-visible svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible svg{
  transform:translate3d(3px,0,0) !important;
}

/* ========================================================================
   A8.82 — remove empty gap between What fade-out and How Spixor Works
   ------------------------------------------------------------------------
   A8.81 leaves the physical How section intact, but the final How layout still
   had a large transparent top padding/overlap buffer. When the builder fades
   out, users first see that empty transparent area. Keep How as the next real
   section, but pull its visible content closer to the handoff.
   ======================================================================== */
html .spx-why-section.spx-why-v52.spx-how-v63{
  margin-top:clamp(-92px, -4.6vw, -44px) !important;
  padding-top:clamp(86px, 9.5vh, 132px) !important;
  opacity:1 !important;
  visibility:visible !important;
  background:transparent !important;
  transform:none !important;
  filter:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky,
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track{
  min-height:clamp(1680px, 230vh, 2380px) !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
  top:clamp(78px, 8.8vh, 104px) !important;
}
html .spx-hero-story-active .spx-why-section.spx-why-v52.spx-how-v63{
  opacity:1 !important;
  visibility:visible !important;
}
@media (max-width:980px){
  html .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:-46px !important;
    padding-top:72px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track{
    min-height:auto !important;
  }
}

/* ========================================================================
   A8.83 — Immediate builder → How visual handoff
   ------------------------------------------------------------------------
   When the builder/What scene fades out, How Spixor Works must already be
   visible in the same viewport. This is only a temporary visual handoff while
   the hero scrollstory is pinned; the real #why-spixor section remains the
   physical next section after the hero releases.
   ======================================================================== */
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  top:calc(var(--spx-public-header-height, 84px) + 8px) !important;
  bottom:0 !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:clamp(34px, 5.4vh, 62px) var(--side) clamp(42px, 5.8vh, 72px) !important;
  opacity:var(--spx-how-underlay-opacity, 0) !important;
  visibility:visible !important;
  pointer-events:none !important;
  z-index:14 !important;
  overflow:hidden !important;
  transform:translate3d(0,var(--spx-how-underlay-y,0px),0) scale(var(--spx-how-underlay-scale,1)) !important;
  filter:none !important;
  background:transparent !important;
  transition:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
  position:relative !important;
  inset:auto !important;
  min-height:0 !important;
  height:100% !important;
  width:min(var(--spx-public-wide-max), 100%) !important;
  margin:0 auto !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
  overflow:visible !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
  display:grid !important;
  grid-template-columns:minmax(330px, 455px) minmax(520px, 1fr) !important;
  align-items:center !important;
  gap:clamp(26px, 3.8vw, 56px) !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
  width:min(100%, 900px) !important;
  height:min(600px, calc(100svh - var(--spx-public-header-height, 84px) - 130px)) !important;
  min-height:430px !important;
  justify-self:end !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .why52-step:not(.is-active):not([data-spx-active="1"]),
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual:not(.is-active):not([data-spx-active="1"]){
  opacity:0 !important;
  visibility:hidden !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .why52-step.is-active,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .why52-step[data-spx-active="1"],
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual.is-active,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual[data-spx-active="1"]{
  opacity:1 !important;
  visibility:visible !important;
  transform:translate3d(0,0,0) scale(1) !important;
  filter:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual img{
  inset:clamp(8px, 1.5vh, 18px) clamp(-120px, -7vw, -58px) clamp(58px, 6vh, 88px) 0 !important;
  width:calc(100% + clamp(64px, 7vw, 130px)) !important;
  height:calc(100% - clamp(72px, 8vh, 108px)) !important;
}
@media (max-width:980px){
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    top:auto !important;
    bottom:auto !important;
    opacity:1 !important;
    transform:none !important;
    padding:120px var(--side) 72px !important;
    overflow:visible !important;
  }
}


/* ========================================================================
   A8.84 — real immediate How handoff during builder fade-out
   ------------------------------------------------------------------------
   A8.83 defined the visual handoff CSS, but the active JS controller still
   removed the phase class. These rules make the handoff visually explicit
   once that phase is active: How is fixed in the viewport, above the fading
   hero scene but below the public nav, so there is no empty gap after the
   builder fades.
   ======================================================================== */
html.spx-hero-story-active.spx-how-visible-phase{
  --spx-how-underlay-opacity:var(--spx-how-underlay-opacity,1);
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
  position:fixed !important;
  inset:calc(var(--spx-public-header-height,84px) + 10px) 0 0 0 !important;
  width:100vw !important;
  height:calc(100svh - var(--spx-public-header-height,84px) - 10px) !important;
  min-height:0 !important;
  margin:0 !important;
  padding:clamp(34px,5vh,58px) var(--side) clamp(42px,5vh,68px) !important;
  opacity:var(--spx-how-underlay-opacity,1) !important;
  visibility:visible !important;
  pointer-events:none !important;
  z-index:95 !important;
  background:transparent !important;
  overflow:hidden !important;
  transform:translate3d(0,var(--spx-how-underlay-y,0px),0) scale(var(--spx-how-underlay-scale,1)) !important;
  filter:none !important;
  transition:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
  position:relative !important;
  inset:auto !important;
  width:min(var(--spx-public-wide-max,1240px),calc(100vw - (var(--side) * 2))) !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
  overflow:visible !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
  display:grid !important;
  grid-template-columns:minmax(340px,460px) minmax(520px,1fr) !important;
  align-items:center !important;
  gap:clamp(28px,4vw,60px) !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
  width:min(100%,900px) !important;
  min-height:clamp(430px,58svh,610px) !important;
  height:min(610px,calc(100svh - var(--spx-public-header-height,84px) - 128px)) !important;
  justify-self:end !important;
}
@media (max-width:980px){
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    height:auto !important;
    opacity:1 !important;
    transform:none !important;
    overflow:visible !important;
    padding:72px var(--side) !important;
    z-index:auto !important;
  }
}

/* ========================================================================
   A8.85 — smooth How handoff without physical section jump
   ------------------------------------------------------------------------
   Keep the real How section in normal document flow. A separate cloned overlay
   now handles the pinned visual handoff while the builder/What view fades out.
   This prevents the real #why-spixor section from snapping down when the phase
   ends, and keeps the floating What CTA fading with the rest of the view.
   ======================================================================== */
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin-top:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
  z-index:2 !important;
  pointer-events:auto !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  filter:none !important;
}
.spx-how-handoff-overlay{
  --spx-how-handoff-opacity:0;
  --spx-how-handoff-y:18px;
  --spx-how-handoff-scale:.992;
  position:fixed;
  inset:calc(var(--spx-public-header-height,84px) + 10px) 0 0 0;
  z-index:94;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(34px,5vh,58px) var(--side) clamp(42px,5vh,68px);
  opacity:var(--spx-how-handoff-opacity);
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,var(--spx-how-handoff-y),0) scale(var(--spx-how-handoff-scale));
  transform-origin:50% 48%;
  filter:none;
  transition:visibility 0s linear .22s;
  overflow:hidden;
  contain:layout paint style;
}
.spx-how-handoff-overlay.is-visible{
  visibility:visible;
  transition:none;
}
.spx-how-handoff-shell{
  width:min(var(--spx-public-wide-max,1240px), calc(100vw - (var(--side) * 2)));
  max-height:calc(100svh - var(--spx-public-header-height,84px) - 32px);
  margin:0 auto;
}
.spx-how-handoff-shell .spx-why52-track,
.spx-how-handoff-shell .spx-why52-sticky{
  position:relative !important;
  inset:auto !important;
  height:auto !important;
  min-height:0 !important;
  width:100% !important;
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
  visibility:visible !important;
}
.spx-how-handoff-shell .spx-why52-sticky{
  display:grid !important;
  grid-template-columns:minmax(340px,460px) minmax(520px,1fr) !important;
  align-items:center !important;
  gap:clamp(28px,4vw,60px) !important;
}
.spx-how-handoff-shell .spx-why52-stage{
  width:min(100%,900px) !important;
  min-height:clamp(430px,58svh,610px) !important;
  height:min(610px,calc(100svh - var(--spx-public-header-height,84px) - 128px)) !important;
  justify-self:end !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
}
.spx-how-handoff-shell .why52-step:not(.is-active):not([data-spx-active="1"]),
.spx-how-handoff-shell .why52-visual:not(.is-active):not([data-spx-active="1"]){
  opacity:0 !important;
  visibility:hidden !important;
}
.spx-how-handoff-shell .why52-step.is-active,
.spx-how-handoff-shell .why52-step[data-spx-active="1"],
.spx-how-handoff-shell .why52-visual.is-active,
.spx-how-handoff-shell .why52-visual[data-spx-active="1"]{
  opacity:1 !important;
  visibility:visible !important;
  transform:translate3d(0,0,0) scale(1) !important;
  filter:none !important;
}
.spx-how-handoff-shell .why52-visual img{
  inset:clamp(8px,1.5vh,18px) clamp(-120px,-7vw,-58px) clamp(58px,6vh,88px) 0 !important;
  width:calc(100% + clamp(64px,7vw,130px)) !important;
  height:calc(100% - clamp(72px,8vh,108px)) !important;
}
html.spx-how-visible-phase .spx-floating-how-cta,
html.spx-how-visible-phase .spx-v26-how-link{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .22s ease, visibility 0s linear .22s !important;
}
@media (max-width:980px){
  .spx-how-handoff-overlay{display:none !important;}
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    height:auto !important;
    opacity:1 !important;
    transform:none !important;
    overflow:visible !important;
    z-index:auto !important;
    pointer-events:auto !important;
  }
}

/* ========================================================================
   A8.86 — single visible How handoff guard
   ------------------------------------------------------------------------
   A8.85 introduced a cloned handoff overlay while the real #why-spixor section
   remained visible in the document flow. That can look like two separate
   "How Spixor Works" sections. Keep the overlay as the only visible handoff
   during the pinned builder fade, then reveal the real section only after the
   hero/What handoff phase is finished. Mobile keeps the normal physical flow.
   ======================================================================== */
@media (min-width:981px){
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:none !important;
    filter:none !important;
  }
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .spx-how-handoff-overlay.is-visible{
    opacity:var(--spx-how-handoff-opacity, 1) !important;
    visibility:visible !important;
  }
}

html:not(.spx-how-visible-phase) .spx-how-handoff-overlay{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ========================================================================
   A8.87 — single-source How handoff, no clone overlay
   ------------------------------------------------------------------------
   The A8.85/A8.86 cloned overlay made the transition look like two separate
   "How Spixor Works" sections: first the clone faded in, then the real section
   scrolled up from below. This guard disables the clone and makes the real
   #why-spixor section the only visual source during the builder fade-out.
   ======================================================================== */
.spx-how-handoff-overlay,
.spx-how-handoff-overlay.is-visible{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
@media (min-width:981px){
  .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    /* Pull the physical How section upward so that when the pinned hero scene
       releases, the real section is already aligned near the viewport top.
       This prevents the fixed handoff from being followed by a second How from
       below. */
    margin-top:calc(-100svh + var(--spx-public-header-height,84px) + 18px) !important;
    padding-top:clamp(42px,5.8vh,68px) !important;
    position:relative !important;
    z-index:1 !important;
  }
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
    position:fixed !important;
    inset:calc(var(--spx-public-header-height,84px) + 10px) 0 auto 0 !important;
    width:100vw !important;
    height:calc(100svh - var(--spx-public-header-height,84px) - 10px) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:clamp(42px,5.8vh,68px) var(--side) clamp(42px,5vh,68px) !important;
    opacity:var(--spx-how-underlay-opacity,1) !important;
    visibility:visible !important;
    pointer-events:none !important;
    z-index:94 !important;
    background:transparent !important;
    overflow:hidden !important;
    transform:translate3d(0,var(--spx-how-underlay-y,0px),0) scale(var(--spx-how-underlay-scale,1)) !important;
    filter:none !important;
    transition:none !important;
  }
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:none !important;
    transform:none !important;
    filter:none !important;
  }
  html.spx-hero-story-active:not(.spx-how-visible-phase):not(.spx-how-physical-ready) .spx-why-section.spx-why-v52.spx-how-v63{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  html.spx-how-physical-ready .spx-why-section.spx-why-v52.spx-how-v63{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    filter:none !important;
  }
  html.spx-how-visible-phase .spx-floating-how-cta,
  html.spx-how-visible-phase .spx-v26-how-link{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}
@media (max-width:980px){
  .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
  }
}

/* ========================================================================
   A8.88 — single physical How crossfade handoff
   ------------------------------------------------------------------------
   Remove the fixed/clone handoff behavior. The real #why-spixor section is
   the only visual source and is pulled into the end of the hero scrollstory.
   This lets builder/What fade out while the same physical How section fades
   in, so there is no overlay-to-real jump and no second How from below.
   ======================================================================== */
.spx-how-handoff-overlay,
.spx-how-handoff-overlay.is-visible{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
@media (min-width:981px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:calc(-118svh + var(--spx-public-header-height,84px) + 34px) !important;
    padding-top:clamp(48px,6vh,76px) !important;
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    z-index:3 !important;
    background:transparent !important;
    overflow:visible !important;
    filter:none !important;
    will-change:opacity, transform !important;
    transition:opacity .42s cubic-bezier(.22,.72,.22,1), transform .42s cubic-bezier(.22,.72,.22,1) !important;
  }

  html.spx-hero-story-active:not(.spx-how-visible-phase):not(.spx-how-physical-ready) .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate3d(0,28px,0) scale(.992) !important;
  }

  html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    margin-top:calc(-118svh + var(--spx-public-header-height,84px) + 34px) !important;
    padding:clamp(48px,6vh,76px) var(--side) clamp(78px,8vh,112px) !important;
    opacity:var(--spx-how-underlay-opacity,1) !important;
    visibility:visible !important;
    pointer-events:none !important;
    z-index:3 !important;
    transform:translate3d(0,calc(var(--spx-how-underlay-y,0px) * .32),0) scale(calc(.996 + (var(--spx-how-underlay-scale,1) - .985) * .35)) !important;
    filter:none !important;
    overflow:visible !important;
  }

  html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
    position:relative !important;
    inset:auto !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
  }

  html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    filter:none !important;
    will-change:auto !important;
  }

  html.spx-hero-story-active.spx-how-visible-phase .spx-floating-how-cta,
  html.spx-hero-story-active.spx-how-visible-phase .spx-v26-how-link{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .24s ease, visibility 0s linear .24s !important;
  }
}
@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    overflow:visible !important;
  }
}


/* ========================================================================
   A8.89 — Clean single-source How handoff reset
   ------------------------------------------------------------------------
   The A8.83–A8.88 handoff experiments mixed fixed positioning, clone overlays,
   negative margins, opacity and transforms on the physical #why-spixor section.
   That caused the visible "scrolls up, then clicks into place" artifact and a
   transparent layer over subsequent content. This reset makes How a normal
   physical section again and keeps the step-controller as the only animation
   owner inside the section.
   ======================================================================== */
.spx-how-handoff-overlay,
.spx-how-handoff-overlay.is-visible{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
@media (min-width:981px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    margin-top:0 !important;
    padding:clamp(68px,8vh,118px) var(--side) clamp(86px,9vh,130px) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:3 !important;
    transform:none !important;
    filter:none !important;
    backdrop-filter:none !important;
    perspective:none !important;
    will-change:auto !important;
    transition:none !important;
    background:transparent !important;
    overflow:visible !important;
  }
  html.spx-hero-story-active:not(.spx-how-physical-ready) .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active:not(.spx-how-visible-phase):not(.spx-how-physical-ready) .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    filter:none !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
    visibility:visible !important;
    filter:none !important;
    backdrop-filter:none !important;
    perspective:none !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
    opacity:1 !important;
    transform:none !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 ~ section,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 ~ section *{
    filter:none !important;
    backdrop-filter:initial;
    opacity:revert-layer;
  }
  html.spx-how-visible-phase .spx-floating-how-cta,
  html.spx-how-visible-phase .spx-v26-how-link{
    opacity:1 !important;
    visibility:visible !important;
  }
}
@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:0 !important;
    padding-top:54px !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    overflow:visible !important;
  }
}

/* ========================================================================
   A8.90 — Crisp physical How handoff reset
   ------------------------------------------------------------------------
   Remove the remaining visual-filter side effects from the old What→How
   experiments. Keep #why-spixor as a normal physical section, never as a
   fixed/overlay/underlay handoff layer. The builder/What scene fades out; the
   real How section follows crisply without inherited blur/opacity/transform.
   ======================================================================== */
html.spx-hero-story-active{
  --spx-how-underlay-opacity:1 !important;
  --spx-how-underlay-blur:0px !important;
  --spx-how-underlay-scale:1 !important;
  --spx-how-underlay-y:0px !important;
}
html .spx-how-handoff-overlay,
html .spx-how-handoff-overlay.is-visible{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
html.spx-hero-story-active .spx-home-main > section:not(.spx-hero-v26),
html.spx-hero-story-active main > section:not(.spx-hero-v26),
html.spx-hero-story-active .spx-page-main > section:not(.spx-hero-v26){
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:none !important;
  opacity:1 !important;
}
@media (min-width:981px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    margin:0 !important;
    padding:clamp(72px,8.5vh,124px) var(--side) clamp(90px,9.5vh,136px) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:3 !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    perspective:none !important;
    will-change:auto !important;
    transition:none !important;
    background:transparent !important;
    overflow:visible !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-head,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    perspective:none !important;
    transform:none !important;
    will-change:auto !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 ~ section,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 ~ section *{
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  html.spx-how-visible-phase .spx-floating-how-cta,
  html.spx-how-visible-phase .spx-v26-how-link{
    opacity:1 !important;
    visibility:visible !important;
  }
}
@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    margin:0 !important;
    padding:54px var(--side) 72px !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:visible !important;
  }
}

/* ========================================================================
   A8.91 — Crisp Why/How handoff without overlay/filter
   ------------------------------------------------------------------------
   The previous handoff experiments left the old hero-echo layer active inside
   How Spixor Works. That layer created the dark transparent wash visible over
   the How content and later sections. Keep one real How section only: no echo
   background, no clone, no fixed handoff, no filter/opacity inherited into
   subsequent content.
   ======================================================================== */
.spx-why52-hero-echo,
.spx-why52-hero-echo *,
html .spx-how-handoff-overlay,
html .spx-how-handoff-overlay.is-visible{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
  position:relative !important;
  isolation:isolate !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  perspective:none !important;
  mix-blend-mode:normal !important;
  background:transparent !important;
}

html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63::before,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63::after{
  opacity:0 !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  pointer-events:none !important;
}

html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-head,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .why52-step,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  perspective:none !important;
  mix-blend-mode:normal !important;
}

html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
  transform:none !important;
  will-change:auto !important;
}

html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .why52-step:not(.is-active):not([data-spx-active="1"]),
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual:not(.is-active):not([data-spx-active="1"]){
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 ~ section,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 ~ section *{
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

@media (min-width:981px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    /* Pull the real How content closer to the outgoing builder scene without
       changing positioning modes. This creates a natural crossfade zone while
       avoiding the previous fixed/clone snap. */
    margin-top:clamp(-72px, -5.2vh, -38px) !important;
    padding-top:clamp(58px, 7vh, 96px) !important;
  }
}

@media (max-width:980px){
  .spx-why52-hero-echo{display:none !important;}
}

/* ========================================================================
   A8.92 — hard cleanup for real How handoff (no hero wash over How)
   ------------------------------------------------------------------------
   The previous A8.83–A8.91 layers left hero/What visuals composited above the
   physical How section while it was entering the viewport. That made How look
   dimmed/filtered and caused the builder screenshot to sit behind the content.
   Keep How as the only visible foreground once it reaches the handoff zone and
   fade the outgoing hero visuals with a simple progress variable.
   ======================================================================== */
html{
  --spx-clean-handoff-progress:0;
}

/* No clone/underlay/fixed How attempts. */
html .spx-how-handoff-overlay,
html .spx-how-handoff-overlay.is-visible,
html .spx-why52-hero-echo,
html .spx-why52-hero-echo *{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

@media (min-width:981px){
  /* The real How section must stay a normal section. No negative pull-up, no
     fixed positioning, no transform/opacity handoff on the physical section. */
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    min-height:auto !important;
    height:auto !important;
    margin-top:0 !important;
    padding:clamp(72px,8vh,112px) var(--side) clamp(96px,10vh,148px) !important;
    z-index:80 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    perspective:none !important;
    mix-blend-mode:normal !important;
    transition:none !important;
    will-change:auto !important;
    isolation:isolate !important;
    background:transparent !important;
    overflow:visible !important;
  }

  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    z-index:120 !important;
  }

  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory]{
    z-index:10 !important;
  }

  /* Fade the outgoing hero/What visuals as a group only when How actually
     enters the handoff zone. This removes the dark hero wash over How while
     preserving the earlier hero/What animation. */
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{
    opacity:calc(1 - var(--spx-clean-handoff-progress,0)) !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:opacity .18s linear !important;
  }

  html.spx-a892-how-handoff-complete .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky,
  html.spx-a892-how-handoff-complete .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere,
  html.spx-a892-how-handoff-complete .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer,
  html.spx-a892-how-handoff-complete .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content,
  html.spx-a892-how-handoff-complete .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Restore full clarity to How and everything after it. */
  html .spx-why-section.spx-why-v52.spx-how-v63,
  html .spx-why-section.spx-why-v52.spx-how-v63 *,
  html .spx-why-section.spx-why-v52.spx-how-v63 ~ section,
  html .spx-why-section.spx-why-v52.spx-how-v63 ~ section *{
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    mix-blend-mode:normal !important;
  }

  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-head,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step.is-active,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual.is-active{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    text-shadow:none !important;
  }

  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step:not(.is-active):not([data-spx-active="1"]),
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual:not(.is-active):not([data-spx-active="1"]){
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Remove residual local stage veils that can read like a filter on top. */
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage::before,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage::after{
    opacity:.14 !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:0 !important;
    padding:54px var(--side) 72px !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
  }
}

/* ========================================================================
   A8.95 — restore A8.92 builder position + remove blank handoff beat
   ------------------------------------------------------------------------
   No cloned/fixed/underlay How. Keep the builder/What scene visible until the
   end of the pinned hero scene, then fade it in the final band so the physical
   How section follows immediately. This avoids the A8.93/A8.94 low builder
   lock and avoids a long empty transparent gap.
   ======================================================================== */
@media (min-width:981px){
  html .spx-how-handoff-overlay,
  html .spx-how-handoff-overlay.is-visible{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    margin-top:0 !important;
    padding-top:clamp(54px,6.5vh,92px) !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  html.spx-hero-story-active:not(.spx-how-physical-ready) .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
  }

  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{
    transition:opacity .14s linear !important;
  }
}


/* ========================================================================
   A8.96 — clean What -> How crossfade and crisp How refresh
   ------------------------------------------------------------------------
   Single-source transition: no cloned/fixed How. The real #why-spixor content
   fades in while the outgoing builder/What scene fades out. Also removes the
   hard horizontal bottom-fade band that was visible during the transition.
   ======================================================================== */
html{
  --spx-a896-crossfade:0;
  --spx-a896-hero-out:1;
  --spx-a896-how-in:1;
}

/* The old bottom fade made a hard horizontal bar during the handoff. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  background:none !important;
}

/* Keep old handoff/echo layers permanently out of the stack. */
html .spx-how-handoff-overlay,
html .spx-how-handoff-overlay.is-visible,
html .spx-why52-hero-echo,
html .spx-why52-hero-echo *{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

@media (min-width:981px){
  /* Keep How physical, transparent and crisp. */
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a896-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    margin-top:0 !important;
    padding-top:clamp(46px,5.6vh,78px) !important;
    padding-bottom:clamp(96px,9vh,138px) !important;
    z-index:90 !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    perspective:none !important;
    mix-blend-mode:normal !important;
    isolation:isolate !important;
    overflow:visible !important;
    will-change:auto !important;
    transition:none !important;
  }

  /* Fade outgoing builder/What visuals only during the overlap. This creates
     the actual crossfade without moving or duplicating How. */
  html.spx-a896-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky,
  html.spx-a896-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere,
  html.spx-a896-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer,
  html.spx-a896-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content{
    opacity:var(--spx-a896-hero-out,1) !important;
    transition:opacity .18s linear !important;
  }

  /* How fades in as one single physical section. The section itself remains
     normal-flow; only the inner shell gets the subtle entry. */
  html.spx-a896-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell{
    opacity:calc(.08 + (var(--spx-a896-how-in,0) * .92)) !important;
    transform:translate3d(0, calc((1 - var(--spx-a896-how-in,0)) * 18px), 0) scale(calc(.992 + (var(--spx-a896-how-in,0) * .008))) !important;
    filter:none !important;
    -webkit-filter:none !important;
    transition:none !important;
    will-change:opacity, transform !important;
  }
  html.spx-a896-what-how-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html:not(.spx-a896-what-how-crossfade) .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    will-change:auto !important;
  }

  /* Remove the old horizontal section-edge feeling. */
  html .spx-why-section.spx-why-v52.spx-how-v63::before,
  html .spx-why-section.spx-why-v52.spx-how-v63::after,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage::before,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage::after{
    opacity:0 !important;
    background:none !important;
    box-shadow:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* How content visual polish: less heavy text block, cleaner cards and crisper
     imagery. */
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-story-head .eyebrow{
    display:inline-flex !important;
    align-items:center !important;
    width:max-content !important;
    padding:9px 15px !important;
    border-radius:999px !important;
    border:1px solid rgba(94,231,255,.26) !important;
    background:linear-gradient(90deg, rgba(24,201,245,.14), rgba(45,99,255,.08)) !important;
    color:#8ff0ff !important;
    box-shadow:0 0 28px rgba(24,201,245,.08) !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-story-head h2{
    color:#f8fbff !important;
    text-shadow:0 18px 58px rgba(0,0,0,.24) !important;
    max-width:620px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-story-head p{
    color:rgba(221,238,255,.76) !important;
    max-width:560px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step{
    border-radius:22px !important;
    border-color:rgba(107,232,255,.16) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)),
      linear-gradient(120deg, rgba(24,201,245,.080), rgba(23,93,255,.022) 62%, rgba(24,201,245,0)) !important;
    box-shadow:0 18px 54px rgba(0,0,0,.16), inset 0 0 0 1px rgba(107,232,255,.04) !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step.is-active,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step[data-spx-active="1"]{
    border-color:rgba(107,232,255,.30) !important;
    box-shadow:0 28px 76px rgba(0,0,0,.20), 0 0 48px rgba(24,201,245,.07), inset 0 0 0 1px rgba(107,232,255,.08) !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual img{
    border:0 !important;
    background:transparent !important;
    box-shadow:0 38px 112px rgba(0,0,0,.22), 0 0 78px rgba(24,201,245,.08) !important;
  }
}

@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{display:none !important;}
  html .spx-why-section.spx-why-v52.spx-how-v63,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
  }
}

/* ========================================================================
   A8.97 — definitive single-source What -> How crossfade
   ------------------------------------------------------------------------
   Remove the accumulated A8.83-A8.96 handoff behaviors from the visual stack.
   The real #why-spixor section is the only How source. It is gently overlapped
   into the last hero-scrollstory band while the outgoing builder/What stage
   fades out. No clones, no fixed How, no underlay blur, no global wash.
   ======================================================================== */
html{
  --spx-a897-crossfade:0;
  --spx-a897-hero-out:1;
  --spx-a897-how-in:0;
}

/* Old handoff artifacts must never re-enter the compositor stack. */
html .spx-how-handoff-overlay,
html .spx-how-handoff-overlay.is-visible,
html .spx-why52-hero-echo,
html .spx-why52-hero-echo *,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  background:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}

@media (min-width:981px){
  /* Keep the physical How section close enough to the final hero range for a
     natural crossfade, but do not use the huge -100svh offsets that created
     snap/jump behavior. */
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a896-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a897-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a897-what-how-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    margin-top:calc(-1 * clamp(96px, 12svh, 176px)) !important;
    padding:clamp(74px, 8.4svh, 118px) var(--side) clamp(108px, 10svh, 154px) !important;
    z-index:7 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    perspective:none !important;
    mix-blend-mode:normal !important;
    isolation:isolate !important;
    overflow:visible !important;
    background:transparent !important;
    background-image:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  /* The hero stage fades out as one piece in the last band. This prevents the
     visible hard horizontal strip and makes the transition read as a single
     outgoing scene rather than several layers fading at different times. */
  html.spx-a897-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage{
    opacity:calc(.06 + (var(--spx-a897-hero-out,1) * .94)) !important;
    transition:none !important;
    will-change:opacity !important;
  }
  html.spx-a897-what-how-ready .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage{
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* Make How enter as the same real section while the hero leaves. The section
     itself does not move; only the inner shell gets a tiny, local entry motion. */
  html.spx-a897-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell{
    opacity:calc(.10 + (var(--spx-a897-how-in,0) * .90)) !important;
    transform:translate3d(0, calc((1 - var(--spx-a897-how-in,0)) * 16px), 0) !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    will-change:opacity, transform !important;
    transition:none !important;
  }
  html.spx-a897-what-how-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html:not(.spx-a897-what-how-crossfade) .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    will-change:auto !important;
  }

  /* Full crisp reset for How and everything after it. */
  html .spx-why-section.spx-why-v52.spx-how-v63,
  html .spx-why-section.spx-why-v52.spx-how-v63 *,
  html .spx-why-section.spx-why-v52.spx-how-v63 ~ section,
  html .spx-why-section.spx-why-v52.spx-how-v63 ~ section *{
    -webkit-font-smoothing:antialiased;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-head,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual img,
  html .spx-why-section.spx-why-v52.spx-how-v63 ~ section{
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    perspective:none !important;
    mix-blend-mode:normal !important;
  }

  /* Keep the old decorative section-edge pseudo elements from recreating a
     horizontal handoff line. */
  html .spx-why-section.spx-why-v52.spx-how-v63::before,
  html .spx-why-section.spx-why-v52.spx-how-v63::after,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage::before,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage::after{
    content:none !important;
    display:none !important;
    opacity:0 !important;
    background:none !important;
    box-shadow:none !important;
    filter:none !important;
    -webkit-filter:none !important;
  }
}

@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:0 !important;
    padding:54px var(--side) 74px !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage{
    opacity:1 !important;
  }
}

/* ========================================================================== 
   GPT A8.101 repair layer — restore Spixor font/visual consistency and polish
   sections without reintroducing duplicate How/fixed handoff layers.
   ========================================================================== */
html body.spx-public,
html body.spx-public button,
html body.spx-public input,
html body.spx-public select,
html body.spx-public textarea{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html body.spx-public h1,
html body.spx-public h2,
html body.spx-public h3,
html body.spx-public .brand,
html body.spx-public .btn{
  font-family: inherit !important;
}
html body.spx-public .spx-alpha-nav-link{gap:8px!important;}
html body.spx-public .spx-alpha-help{
  display:inline-grid!important;place-items:center!important;width:18px!important;height:18px!important;border-radius:50%!important;
  border:1px solid rgba(126,231,255,.28)!important;background:rgba(126,231,255,.10)!important;color:#b9f7ff!important;
  font-size:11px!important;font-weight:950!important;line-height:1!important;
}

/* Restore a cleaner hero feel on large screens. */
@media (min-width:981px){
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
    max-width:min(760px,58vw)!important;
    transform:translate3d(0,clamp(-24px,-2.2vh,-8px),0) scale(var(--spx-hero-copy-story-scale,1))!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
    font-size:clamp(78px,min(8.3vw,11.8vh),138px)!important;
    line-height:.84!important;
    letter-spacing:-.095em!important;
  }
}
@media (min-width:1920px){
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
    font-size:clamp(84px,min(7.55vw,11.2vh),142px)!important;
  }
}

/* How Spixor Works: keep one physical section, restore real visuals, remove solid block. */
html body.spx-public #why-spixor.spx-how-v63,
html.spx-a897-what-how-crossfade body.spx-public #why-spixor.spx-how-v63,
html.spx-a897-what-how-ready body.spx-public #why-spixor.spx-how-v63{
  position:relative!important;
  inset:auto!important;
  background:transparent!important;
  background-image:
    radial-gradient(780px 360px at 72% 18%,rgba(24,201,245,.075),transparent 72%),
    linear-gradient(180deg,rgba(3,7,18,0),rgba(5,12,24,.22) 38%,rgba(3,7,18,0))!important;
  filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  opacity:1!important;visibility:visible!important;mix-blend-mode:normal!important;
  margin-top:0!important;
  padding-top:clamp(74px,8vh,118px)!important;
  overflow:visible!important;
}
html body.spx-public #why-spixor.spx-how-v63::before,
html body.spx-public #why-spixor.spx-how-v63::after,
html body.spx-public #why-spixor .spx-v26-bottom-fade,
html body.spx-public #why-spixor .spx-why52-hero-echo{content:none!important;display:none!important;opacity:0!important;visibility:hidden!important;}
html body.spx-public #why-spixor .spx-why52-shell{width:min(1380px,calc(100vw - 72px))!important;margin-inline:auto!important;}
html body.spx-public #why-spixor .spx-why52-sticky{
  display:grid!important;grid-template-columns:minmax(340px,.86fr) minmax(520px,1.14fr)!important;gap:clamp(28px,4vw,72px)!important;align-items:center!important;
}
html body.spx-public #why-spixor .spx-why52-copy{
  min-height:auto!important;padding:clamp(22px,2.6vw,34px)!important;border:1px solid rgba(218,236,255,.13)!important;border-radius:28px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.070),rgba(255,255,255,.026)),radial-gradient(420px 220px at 0 0,rgba(24,201,245,.12),transparent 70%)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.07)!important;
}
html body.spx-public #why-spixor .spx-why52-story-head{transition:opacity .45s var(--ease),transform .45s var(--ease),max-height .45s var(--ease)!important;}
html body.spx-public #why-spixor.is-step-flow .spx-why52-story-head{opacity:0!important;transform:translateY(-8px)!important;max-height:0!important;overflow:hidden!important;pointer-events:none!important;margin:0!important;}
html body.spx-public #why-spixor .spx-why52-story-head h2{font-size:clamp(32px,3.9vw,56px)!important;line-height:1.04!important;letter-spacing:-.045em!important;}
html body.spx-public #why-spixor .spx-why52-story-head p{font-size:16px!important;line-height:1.68!important;color:rgba(226,241,255,.82)!important;}
html body.spx-public #why-spixor .why52-step-stack{min-height:330px!important;}
html body.spx-public #why-spixor .why52-step{border-radius:22px!important;background:rgba(3,8,18,.42)!important;border:1px solid rgba(218,236,255,.12)!important;padding:22px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;transition:opacity .55s var(--ease),transform .55s var(--ease),visibility .55s var(--ease)!important;}
html body.spx-public #why-spixor .why52-step:not(.is-active){opacity:0!important;transform:translateY(16px)!important;visibility:hidden!important;}
html body.spx-public #why-spixor .why52-step.is-active{opacity:1!important;transform:translateY(0)!important;visibility:visible!important;}
html body.spx-public #why-spixor .why52-step-nav{display:flex!important;gap:10px!important;margin:18px 0!important;}
html body.spx-public #why-spixor .why52-step-nav button{border-radius:16px!important;border:1px solid rgba(218,236,255,.12)!important;background:rgba(255,255,255,.045)!important;color:rgba(230,245,255,.82)!important;padding:10px 12px!important;transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)!important;}
html body.spx-public #why-spixor .why52-step-nav button.is-active{background:rgba(24,201,245,.14)!important;border-color:rgba(126,231,255,.36)!important;color:#fff!important;transform:translateY(-1px)!important;}
html body.spx-public #why-spixor .spx-why52-stage{
  min-height:clamp(520px,58vh,760px)!important;border-radius:32px!important;border:1px solid rgba(218,236,255,.14)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018))!important;box-shadow:0 30px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.065)!important;
  overflow:hidden!important;filter:none!important;backdrop-filter:none!important;
}
html body.spx-public #why-spixor .why52-visual img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;border-radius:28px!important;filter:none!important;}
html body.spx-public #why-spixor .why52-visual{inset:24px!important;transition:opacity .62s var(--ease),transform .62s var(--ease),visibility .62s var(--ease)!important;}
html body.spx-public #why-spixor .why52-visual:not(.is-active){opacity:0!important;transform:translateY(18px) scale(.985)!important;visibility:hidden!important;}
html body.spx-public #why-spixor .why52-visual.is-active{opacity:1!important;transform:translateY(0) scale(1)!important;visibility:visible!important;}
html body.spx-public #why-spixor .why52-visual-card{max-width:min(360px,calc(100% - 44px))!important;border-radius:22px!important;background:rgba(4,10,22,.76)!important;border:1px solid rgba(218,236,255,.16)!important;box-shadow:0 18px 52px rgba(0,0,0,.24)!important;backdrop-filter:none!important;}

/* Dashboard Command Center: hero-like product demo, not a left-aligned debug pane. */
html body.spx-public #dashboard.spx-dashboard-command-v63{
  min-height:330vh!important;padding:0 var(--side)!important;margin:0!important;position:relative!important;isolation:isolate!important;background:transparent!important;filter:none!important;backdrop-filter:none!important;mix-blend-mode:normal!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-visual{position:sticky!important;top:clamp(78px,10vh,108px)!important;height:calc(100vh - 120px)!important;display:grid!important;place-items:center!important;pointer-events:none!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{width:min(1240px,88vw)!important;height:min(72vh,760px)!important;border-radius:32px!important;box-shadow:0 32px 96px rgba(0,0,0,.34)!important;transform:scale(calc(.86 + var(--dash-focus,0) * .14)) translateY(calc((1 - var(--dash-focus,0)) * 28px))!important;transition:box-shadow .35s var(--ease)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{position:absolute!important;inset:0!important;pointer-events:none!important;z-index:5!important;background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important;backdrop-filter:none!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > .eyebrow,
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > h2,
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{position:absolute!important;left:var(--side)!important;top:clamp(96px,13vh,150px)!important;max-width:420px!important;opacity:calc(1 - var(--dash-intro-focus,0))!important;transform:translateY(calc(var(--dash-intro-focus,0) * -18px))!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > h2{top:clamp(128px,18vh,196px)!important;font-size:clamp(36px,4.4vw,66px)!important;line-height:1.02!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{top:clamp(216px,29vh,304px)!important;color:rgba(226,241,255,.80)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs{display:none!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{position:absolute!important;width:min(360px,calc(100vw - 48px))!important;border:1px solid rgba(218,236,255,.16)!important;background:rgba(4,10,22,.78)!important;border-radius:24px!important;padding:18px 20px!important;box-shadow:0 24px 70px rgba(0,0,0,.24)!important;backdrop-filter:none!important;opacity:0!important;visibility:hidden!important;transform:translateY(14px)!important;transition:opacity .42s var(--ease),transform .42s var(--ease),visibility .42s var(--ease)!important;pointer-events:none!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel.is-active{opacity:1!important;visibility:visible!important;transform:translateY(0)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-panel="overview"]{right:calc(var(--side) + 32px)!important;bottom:clamp(96px,15vh,160px)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-panel="projects"]{right:calc(var(--side) + 32px)!important;top:clamp(96px,15vh,150px)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-panel="files"]{left:calc(var(--side) + 32px)!important;top:clamp(96px,15vh,150px)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor{display:block!important;opacity:var(--dash-focus,0)!important;transform:translate3d(var(--dash-cursor-x,55%),var(--dash-cursor-y,45%),0)!important;}

/* Export workflow — stable cards with one arrow behavior. */
html body.spx-public #export.spx-export-section-v61{filter:none!important;backdrop-filter:none!important;box-shadow:0 22px 72px rgba(0,0,0,.16)!important;}
html body.spx-public #export.spx-export-section-v61 .spx-export-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;}
html body.spx-public #export.spx-export-section-v61 .spx-export-card{min-height:300px!important;transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease),background .28s var(--ease)!important;}
html body.spx-public #export.spx-export-section-v61 .spx-export-card:hover,
html body.spx-public #export.spx-export-section-v61 .spx-export-card:focus-within{transform:translateY(-6px)!important;box-shadow:0 26px 76px rgba(0,0,0,.24)!important;border-color:rgba(126,231,255,.30)!important;}
html body.spx-public #export.spx-export-section-v61 .spx-more-link::before,
html body.spx-public #export.spx-export-section-v61 .spx-more-link::after{content:none!important;display:none!important;}
html body.spx-public #export.spx-export-section-v61 .spx-more-link svg{width:14px!important;height:14px!important;flex:0 0 14px!important;transition:transform .22s var(--ease)!important;}
html body.spx-public #export.spx-export-section-v61 .spx-more-link:hover svg{transform:translateX(3px)!important;}

/* Pricing polish from the current direction, but with stable typography. */
html body.spx-public #pricing.spx-pricing-section-v61 .spx-section-kicker h2{font-size:clamp(34px,4.6vw,62px)!important;letter-spacing:-.045em!important;}
html body.spx-public #pricing.spx-pricing-section-v61 [data-price-card="free"]{position:relative!important;border-color:rgba(62,230,165,.34)!important;box-shadow:0 24px 76px rgba(62,230,165,.12),inset 0 1px 0 rgba(255,255,255,.06)!important;animation:spxFreeSoftFloat 7s ease-in-out infinite!important;}
html body.spx-public #pricing.spx-pricing-section-v61 [data-price-card="free"]::before{content:""!important;position:absolute!important;inset:-1px!important;border-radius:inherit!important;background:radial-gradient(520px 240px at 50% -12%,rgba(62,230,165,.18),transparent 72%)!important;pointer-events:none!important;z-index:-1!important;}
@keyframes spxFreeSoftFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
html body.spx-public .spx-orbit-notify{display:grid!important;gap:9px!important;margin-top:16px!important;}
html body.spx-public .spx-orbit-notify label{display:grid!important;gap:6px!important;color:rgba(226,241,255,.78)!important;font-size:12px!important;font-weight:850!important;}
html body.spx-public .spx-orbit-notify input{min-height:42px!important;border-radius:14px!important;border:1px solid rgba(218,236,255,.12)!important;background:rgba(255,255,255,.045)!important;color:var(--text)!important;padding:0 12px!important;}
html body.spx-public .spx-orbit-notify small{color:rgba(226,241,255,.58)!important;font-size:12px!important;}

/* Alpha feedback — remove roadmap feeling and make it a story panel. */
html body.spx-public #roadmap.spx-alpha-story-section{display:grid!important;grid-template-columns:minmax(0,.64fr) minmax(280px,.36fr)!important;gap:clamp(26px,4vw,62px)!important;align-items:center!important;background:linear-gradient(145deg,rgba(255,255,255,.044),rgba(255,255,255,.014)),radial-gradient(720px 360px at 5% 10%,rgba(245,158,11,.075),transparent 70%)!important;border:1px solid rgba(218,236,255,.11)!important;border-radius:34px!important;box-shadow:none!important;filter:none!important;backdrop-filter:none!important;}
html body.spx-public #roadmap.spx-alpha-story-section .spx-summary-panel{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-feedback-panel{background:rgba(255,255,255,.045)!important;border:1px solid rgba(218,236,255,.12)!important;border-radius:26px!important;padding:24px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list{display:flex!important;flex-wrap:wrap!important;gap:9px!important;}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list span{display:inline-flex!important;align-items:center!important;border-radius:999px!important;border:1px solid rgba(218,236,255,.12)!important;background:rgba(255,255,255,.050)!important;padding:8px 11px!important;font-size:13px!important;color:rgba(238,248,255,.84)!important;}

/* Global anti-wash guard for later content. */
html body.spx-public #dashboard,
html body.spx-public #export,
html body.spx-public #pricing,
html body.spx-public #roadmap,
html body.spx-public footer{filter:none!important;-webkit-filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;mix-blend-mode:normal!important;opacity:1;}

@media (max-width:980px){
  html body.spx-public #why-spixor .spx-why52-sticky,
  html body.spx-public #dashboard.spx-dashboard-command-v63{display:block!important;min-height:auto!important;padding:54px var(--side)!important;}
  html body.spx-public #why-spixor .spx-why52-shell{width:min(100%,calc(100vw - 36px))!important;}
  html body.spx-public #why-spixor .spx-why52-copy{padding:20px!important;margin-bottom:18px!important;}
  html body.spx-public #why-spixor .spx-why52-stage{min-height:0!important;aspect-ratio:1/1.06!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-visual{position:relative!important;height:auto!important;top:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{width:100%!important;height:auto!important;aspect-ratio:16/10.5!important;transform:none!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{position:relative!important;display:grid!important;gap:14px!important;margin-top:20px!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > .eyebrow,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > h2,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{position:relative!important;inset:auto!important;width:auto!important;max-width:none!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor{display:none!important;}
  html body.spx-public #export.spx-export-section-v61 .spx-export-grid{grid-template-columns:1fr!important;}
  html body.spx-public #roadmap.spx-alpha-story-section{grid-template-columns:1fr!important;}
}

/* ========================================================================== 
   GPT A8.102 targeted repair: What->How, How UX, Dashboard demo, footer restore
   This layer intentionally avoids clone/bridge/fixed How sections.
   ========================================================================== */
:root{
  --spx-a102-ease: cubic-bezier(.22,.78,.18,1);
}
html body.spx-public,
html body.spx-public *{
  text-rendering: geometricPrecision;
}
html body.spx-public .spx-v26-bottom-fade,
html body.spx-public .spx-why52-hero-echo,
html body.spx-public .spx-how-handoff-overlay,
html body.spx-public .spx-a898-how-bridge{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* What -> How: keep the physical How section close and remove the visible seam. */
@media (min-width:981px){
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] + #why-spixor.spx-how-v63{
    margin-top:clamp(-42px,-4.2svh,-26px)!important;
    padding-top:clamp(58px,6.2svh,86px)!important;
    background:linear-gradient(180deg,rgba(3,7,18,0) 0%,rgba(4,9,20,.22) 18%,rgba(3,7,18,0) 100%)!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] + #why-spixor.spx-how-v63::before,
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] + #why-spixor.spx-how-v63::after{
    content:none!important;
    display:none!important;
  }
}

/* How Spixor Works: single physical section, real images, premium but no image-border block. */
html body.spx-public #why-spixor.spx-how-v63{
  --how-step-progress:0;
  position:relative!important;
  overflow:visible!important;
  isolation:isolate!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
  visibility:visible!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{
  width:min(1400px,calc(100vw - 72px))!important;
  margin:0 auto!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
  min-height:clamp(1520px,225vh,2140px)!important;
  height:auto!important;
  filter:none!important;
  backdrop-filter:none!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
  position:sticky!important;
  top:clamp(86px,10vh,118px)!important;
  min-height:calc(100vh - clamp(112px,13vh,152px))!important;
  display:grid!important;
  grid-template-columns:minmax(360px,.82fr) minmax(560px,1.18fr)!important;
  gap:clamp(34px,4.8vw,82px)!important;
  align-items:center!important;
  filter:none!important;
  backdrop-filter:none!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
  position:relative!important;
  min-height:clamp(430px,54vh,600px)!important;
  padding:clamp(24px,2.6vw,38px)!important;
  border:1px solid rgba(218,236,255,.12)!important;
  border-radius:30px!important;
  background:linear-gradient(150deg,rgba(255,255,255,.074),rgba(255,255,255,.024)),radial-gradient(440px 220px at 10% 0%,rgba(126,231,255,.12),transparent 70%)!important;
  box-shadow:0 26px 80px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07)!important;
  overflow:hidden!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 0 38%,rgba(255,255,255,.065) 45%,transparent 54%);
  opacity:.22;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
  display:block!important;
  max-width:560px!important;
  transition:opacity .62s var(--spx-a102-ease),transform .62s var(--spx-a102-ease),max-height .62s var(--spx-a102-ease),margin .62s var(--spx-a102-ease)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{
  margin:.18em 0 .34em!important;
  font-size:clamp(34px,4.2vw,62px)!important;
  line-height:1.02!important;
  letter-spacing:-.058em!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head p{
  max-width:520px!important;
  color:rgba(226,241,255,.82)!important;
  line-height:1.7!important;
  font-size:clamp(15px,1.05vw,18px)!important;
}
html body.spx-public #why-spixor.spx-how-v63.is-step-flow .spx-why52-story-head{
  opacity:0!important;
  transform:translateY(-14px)!important;
  max-height:0!important;
  margin:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .why52-step-stack,
html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .why52-step-nav{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(18px)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin:18px 0 20px!important;
  transition:opacity .56s var(--spx-a102-ease),transform .56s var(--spx-a102-ease),visibility .56s var(--spx-a102-ease)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav button{
  min-width:92px!important;
  border-radius:999px!important;
  border:1px solid rgba(218,236,255,.14)!important;
  background:rgba(255,255,255,.045)!important;
  color:rgba(232,246,255,.78)!important;
  padding:10px 13px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  transition:transform .28s var(--spx-a102-ease),background .28s var(--spx-a102-ease),border-color .28s var(--spx-a102-ease),color .28s var(--spx-a102-ease)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav button b{
  width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:rgba(126,231,255,.10);font-size:11px;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav button.is-active{
  background:rgba(24,201,245,.15)!important;
  border-color:rgba(126,231,255,.34)!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
  position:relative!important;
  min-height:clamp(300px,37vh,430px)!important;
  transition:opacity .56s var(--spx-a102-ease),transform .56s var(--spx-a102-ease),visibility .56s var(--spx-a102-ease)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding:clamp(22px,2.1vw,34px)!important;
  border-radius:24px!important;
  border:1px solid rgba(218,236,255,.13)!important;
  background:linear-gradient(150deg,rgba(4,10,22,.64),rgba(8,20,38,.40))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(18px)!important;
  transition:opacity .62s var(--spx-a102-ease),transform .62s var(--spx-a102-ease),visibility .62s var(--spx-a102-ease)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step.is-active{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step > span{
  color:#7ee7ff!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  font-size:12px!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step h3{
  font-size:clamp(27px,2.7vw,42px)!important;
  letter-spacing:-.04em!important;
  line-height:1.05!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step p,
html body.spx-public #why-spixor.spx-how-v63 .why52-step li{
  color:rgba(226,241,255,.80)!important;
  line-height:1.6!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
  position:relative!important;
  min-height:clamp(560px,64vh,780px)!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  filter:none!important;
  backdrop-filter:none!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-network,
html body.spx-public #why-spixor.spx-how-v63 .why52-float{
  opacity:.18!important;
  pointer-events:none!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{position:absolute!important;inset:0!important;}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
  position:absolute!important;
  inset:0!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(22px) scale(.982)!important;
  transition:opacity .72s var(--spx-a102-ease),transform .72s var(--spx-a102-ease),visibility .72s var(--spx-a102-ease)!important;
  filter:none!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0) scale(1)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:34px!important;
  border:0!important;
  outline:0!important;
  box-shadow:0 34px 110px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.10)!important;
  filter:none!important;
  display:block!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  position:absolute!important;
  left:clamp(22px,2.2vw,34px)!important;
  bottom:clamp(22px,2.2vw,34px)!important;
  max-width:min(390px,calc(100% - 44px))!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,rgba(4,10,22,.78),rgba(9,21,39,.64))!important;
  border:1px solid rgba(218,236,255,.14)!important;
  box-shadow:0 22px 58px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.065)!important;
  backdrop-filter:none!important;
}

/* Dashboard Command Center: hero-like fullscreen scroll demo. */
html body.spx-public #dashboard.spx-dashboard-command-v63{
  --dash-focus:0;
  --dash-intro:1;
  --dash-cursor-x:66%;
  --dash-cursor-y:72%;
  min-height:clamp(2500px,350vh,3600px)!important;
  padding:0 var(--side)!important;
  margin:0!important;
  position:relative!important;
  background:transparent!important;
  filter:none!important;
  backdrop-filter:none!important;
  mix-blend-mode:normal!important;
  isolation:isolate!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63::before,
html body.spx-public #dashboard.spx-dashboard-command-v63::after{content:none!important;display:none!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-visual{
  position:sticky!important;
  top:clamp(70px,8vh,98px)!important;
  height:calc(100vh - clamp(86px,10vh,118px))!important;
  width:100%!important;
  display:grid!important;
  place-items:center!important;
  pointer-events:none!important;
  z-index:2!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{
  position:relative!important;
  width:min(calc(720px + var(--dash-focus) * 560px), 92vw)!important;
  height:min(calc(420px + var(--dash-focus) * 330px), 76vh)!important;
  margin-left:calc((1 - var(--dash-focus)) * -28vw)!important;
  border-radius:calc(34px - var(--dash-focus) * 8px)!important;
  overflow:hidden!important;
  background:#07101f!important;
  box-shadow:0 38px 120px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.10)!important;
  transform:translate3d(calc((1 - var(--dash-focus)) * -2vw), calc((1 - var(--dash-focus)) * 18px),0) scale(1)!important;
  transition:width .12s linear,height .12s linear,margin-left .12s linear,border-radius .12s linear!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame img{
  width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;filter:none!important;opacity:1!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  pointer-events:none!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  mix-blend-mode:normal!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > .eyebrow,
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > h2,
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{
  position:sticky!important;
  left:auto!important;
  margin-left:auto!important;
  margin-right:clamp(28px,7vw,120px)!important;
  max-width:430px!important;
  top:clamp(120px,18vh,190px)!important;
  opacity:calc(1 - var(--dash-focus))!important;
  transform:translateY(calc(var(--dash-focus) * -18px))!important;
  transition:none!important;
  display:block!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > h2{font-size:clamp(38px,4.8vw,72px)!important;line-height:.98!important;letter-spacing:-.06em!important;margin-top:34px!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{margin-top:18px!important;color:rgba(225,241,255,.82)!important;line-height:1.65!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs{display:none!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{
  position:fixed!important;
  z-index:12!important;
  width:min(360px,calc(100vw - 48px))!important;
  padding:18px 20px!important;
  border-radius:22px!important;
  border:1px solid rgba(218,236,255,.14)!important;
  background:linear-gradient(145deg,rgba(5,12,26,.82),rgba(10,22,40,.68))!important;
  box-shadow:0 24px 74px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07)!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(16px) scale(.985)!important;
  transition:opacity .46s var(--spx-a102-ease),transform .46s var(--spx-a102-ease),visibility .46s var(--spx-a102-ease)!important;
  pointer-events:none!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="overview"] [data-dashboard-panel="overview"],
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="projects"] [data-dashboard-panel="projects"],
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="files"] [data-dashboard-panel="files"]{
  opacity:calc(var(--dash-focus) * 1)!important;
  visibility:visible!important;
  transform:translateY(0) scale(1)!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-panel="overview"]{right:clamp(26px,7vw,128px)!important;bottom:clamp(34px,10vh,110px)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-panel="projects"]{right:clamp(26px,7vw,128px)!important;top:clamp(110px,16vh,170px)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-panel="files"]{left:clamp(26px,7vw,128px)!important;top:clamp(110px,16vh,170px)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor{
  position:absolute!important;
  left:var(--dash-cursor-x)!important;
  top:var(--dash-cursor-y)!important;
  z-index:6!important;
  width:26px!important;height:26px!important;
  opacity:calc(var(--dash-focus) * 1)!important;
  transform:translate(-8px,-6px) rotate(-12deg)!important;
  transition:left .52s var(--spx-a102-ease),top .52s var(--spx-a102-ease),opacity .28s var(--spx-a102-ease)!important;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.45))!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor::before{
  content:"";display:block;width:0;height:0;border-left:0 solid transparent;border-right:15px solid transparent;border-top:24px solid #e8fbff;filter:drop-shadow(0 0 10px rgba(126,231,255,.35));
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor::after{
  content:"";position:absolute;left:12px;top:12px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(126,231,255,.45);opacity:0;transform:scale(.55);
}
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-click="1"] .spx-dash-cursor::after{animation:spxDashClickPulse .72s var(--spx-a102-ease) both;}
@keyframes spxDashClickPulse{0%{opacity:.75;transform:scale(.45)}100%{opacity:0;transform:scale(1.8)}}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout{display:none!important;}

/* Export: smoother entry/hover without width jumps. */
html body.spx-public .spx-export-section-v61{position:relative!important;filter:none!important;backdrop-filter:none!important;overflow:visible!important;}
html body.spx-public .spx-export-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(18px,2vw,28px)!important;align-items:stretch!important;}
html body.spx-public .spx-export-card{min-height:320px!important;transition:transform .34s var(--spx-a102-ease),border-color .34s var(--spx-a102-ease),box-shadow .34s var(--spx-a102-ease),background .34s var(--spx-a102-ease)!important;will-change:auto!important;}
html body.spx-public .spx-export-card:hover,
html body.spx-public .spx-export-card:focus-within{transform:translateY(-8px)!important;box-shadow:0 24px 78px rgba(0,0,0,.28),0 0 40px rgba(24,201,245,.10)!important;border-color:rgba(126,231,255,.28)!important;}
html body.spx-public .spx-more-link svg{width:13px!important;height:13px!important;flex:0 0 13px!important;}

/* Pricing polish: maintain good layout with a softer Free highlight. */
html body.spx-public #pricing .spx-price-card[data-price-card="free"]{box-shadow:0 28px 82px rgba(0,0,0,.24),0 0 70px rgba(66,255,175,.12)!important;animation:spxFreeFloat 5.8s ease-in-out infinite!important;}
@keyframes spxFreeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){html body.spx-public #pricing .spx-price-card[data-price-card="free"]{animation:none!important;}}

/* Footer v3 restore. */
html body.spx-public .spx-footer-v3{position:relative!important;margin:clamp(80px,10vh,140px) var(--side) 24px!important;padding:0!important;border:1px solid rgba(218,236,255,.12)!important;border-radius:34px!important;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.022)),radial-gradient(760px 280px at 12% 0%,rgba(24,201,245,.12),transparent 72%)!important;box-shadow:0 28px 90px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.065)!important;overflow:hidden!important;}
html body.spx-public .spx-footer-shell{display:grid!important;grid-template-columns:minmax(260px,.9fr) minmax(520px,1.6fr)!important;gap:clamp(28px,5vw,76px)!important;padding:clamp(30px,4vw,56px)!important;}
html body.spx-public .spx-footer-brand-col p{max-width:420px!important;color:rgba(226,241,255,.78)!important;line-height:1.7!important;}
html body.spx-public .spx-footer-columns{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:22px!important;}
html body.spx-public .spx-footer-col{display:flex!important;flex-direction:column!important;gap:10px!important;}
html body.spx-public .spx-footer-col strong{color:#fff!important;font-size:13px!important;text-transform:uppercase!important;letter-spacing:.08em!important;margin-bottom:4px!important;}
html body.spx-public .spx-footer-col a{color:rgba(226,241,255,.72)!important;text-decoration:none!important;transition:color .2s ease,transform .2s ease!important;}
html body.spx-public .spx-footer-col a:hover{color:#fff!important;transform:translateX(3px)!important;}
html body.spx-public .spx-footer-bottom{display:flex!important;justify-content:space-between!important;gap:18px!important;padding:18px clamp(30px,4vw,56px)!important;border-top:1px solid rgba(218,236,255,.10)!important;color:rgba(226,241,255,.62)!important;}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63{padding-top:56px!important;margin-top:0!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{width:min(100%,calc(100vw - 34px))!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{min-height:auto!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{position:relative!important;top:auto!important;display:grid!important;grid-template-columns:1fr!important;gap:24px!important;min-height:auto!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{min-height:auto!important;padding:20px!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{opacity:1!important;max-height:none!important;transform:none!important;margin-bottom:18px!important;}
  html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .why52-step-stack,
  html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .why52-step-nav{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{min-height:auto!important;display:grid!important;gap:16px!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{min-height:auto!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{position:relative!important;display:grid!important;gap:16px!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{position:relative!important;inset:auto!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{height:auto!important;aspect-ratio:16/10!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63{min-height:auto!important;padding:54px var(--side)!important;display:grid!important;gap:22px!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-visual{position:relative!important;top:auto!important;height:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{width:100%!important;height:auto!important;aspect-ratio:16/10!important;margin:0!important;transform:none!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{position:relative!important;inset:auto!important;display:grid!important;gap:14px!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > .eyebrow,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > h2,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{position:relative!important;top:auto!important;margin:0!important;opacity:1!important;transform:none!important;max-width:none!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{position:relative!important;inset:auto!important;opacity:1!important;visibility:visible!important;transform:none!important;width:100%!important;}
  html body.spx-public .spx-export-grid{grid-template-columns:1fr!important;}
  html body.spx-public .spx-footer-shell{grid-template-columns:1fr!important;}
  html body.spx-public .spx-footer-columns{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  html body.spx-public .spx-footer-bottom{flex-direction:column!important;}
}
@media (max-width:560px){
  html body.spx-public .spx-footer-columns{grid-template-columns:1fr!important;}
}


/* A8.103 — How Spixor Works refinement: smoother handoff, larger visuals, cleaner step flow. */
html body.spx-public .spx-v26-bottom-fade{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
html body.spx-public #why-spixor.spx-how-v63{
  margin-top:clamp(-72px,-5vh,-24px)!important;
  padding-top:clamp(24px,3.5vh,56px)!important;
  background:transparent!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{
  width:min(100%,calc(100vw - 32px))!important;
  max-width:1440px!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
  min-height:clamp(3000px,380vh,4200px)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
  top:clamp(72px,9vh,112px)!important;
  min-height:calc(100vh - clamp(96px,11vh,136px))!important;
  grid-template-columns:minmax(340px,.84fr) minmax(640px,1.16fr)!important;
  align-items:center!important;
  gap:clamp(34px,4.6vw,74px)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
  position:relative!important;
  min-height:clamp(520px,58vh,700px)!important;
  padding:clamp(22px,2.6vw,34px) clamp(22px,2.9vw,36px)!important;
  border-radius:28px!important;
  background:linear-gradient(155deg,rgba(7,16,31,.78),rgba(8,18,36,.50))!important;
  border:1px solid rgba(219,236,255,.10)!important;
  box-shadow:0 28px 84px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05)!important;
  overflow:visible!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
  margin:0 0 clamp(18px,2vh,26px)!important;
  max-width:560px!important;
  transition:opacity .55s cubic-bezier(.22,.65,.2,1),transform .55s cubic-bezier(.22,.65,.2,1),max-height .55s cubic-bezier(.22,.65,.2,1)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{
  font-size:clamp(34px,4.35vw,60px)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head p{
  max-width:520px!important;
  color:rgba(224,240,255,.78)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .why52-step-stack{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(0,20px,0)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
  position:relative!important;
  min-height:clamp(320px,35vh,420px)!important;
  transition:opacity .55s cubic-bezier(.22,.65,.2,1),transform .55s cubic-bezier(.22,.65,.2,1)!important;
}
html body.spx-public #why-spixor.spx-how-v63.is-step-flow .why52-step-stack{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step{
  inset:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,24px,0)!important;
  transition:opacity .75s cubic-bezier(.22,.65,.2,1),transform .75s cubic-bezier(.22,.65,.2,1),visibility .75s cubic-bezier(.22,.65,.2,1)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step.is-active,
html body.spx-public #why-spixor.spx-how-v63 .why52-step[data-spx-active="1"]{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step::before,
html body.spx-public #why-spixor.spx-how-v63 .why52-step::after,
html body.spx-public #why-spixor.spx-how-v63 .why52-progress{display:none!important;content:none!important;}
html body.spx-public #why-spixor.spx-how-v63 .why52-step > span{display:none!important;}
html body.spx-public #why-spixor.spx-how-v63 .why52-step h3{
  font-size:clamp(28px,3.1vw,42px)!important;
  line-height:1.06!important;
  letter-spacing:-.045em!important;
  margin:0 0 14px!important;
  max-width:12ch!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step p,
html body.spx-public #why-spixor.spx-how-v63 .why52-step ul,
html body.spx-public #why-spixor.spx-how-v63 .why52-step li{
  font-size:clamp(15px,1.02vw,18px)!important;
  line-height:1.68!important;
  color:rgba(220,238,255,.83)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step ul{
  margin-top:14px!important;
  max-width:560px!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
  position:relative!important;
  min-height:clamp(540px,66vh,790px)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-network,
html body.spx-public #why-spixor.spx-how-v63 .why52-float{
  opacity:.12!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{
  position:absolute!important;
  inset:0!important;
  overflow:visible!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
  position:absolute!important;
  inset:0 0 0 auto!important;
  width:min(100%,920px)!important;
  margin-left:auto!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(10vw,24px,0) scale(.985)!important;
  transition:opacity .82s cubic-bezier(.22,.65,.2,1),transform .82s cubic-bezier(.22,.65,.2,1),visibility .82s cubic-bezier(.22,.65,.2,1)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
  width:100%!important;
  height:100%!important;
  min-height:clamp(520px,60vh,740px)!important;
  object-fit:cover!important;
  object-position:center!important;
  border:0!important;
  outline:0!important;
  border-radius:30px!important;
  box-shadow:0 46px 120px rgba(0,0,0,.34)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  position:absolute!important;
  right:clamp(18px,2vw,28px)!important;
  bottom:clamp(18px,2vw,30px)!important;
  left:auto!important;
  max-width:min(380px,calc(100% - 48px))!important;
  padding:18px 20px!important;
  border-radius:12px 24px 24px 12px!important;
  background:linear-gradient(145deg,rgba(6,14,28,.84),rgba(8,20,38,.72))!important;
  border:1px solid rgba(218,236,255,.12)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.28)!important;
  transform:translate3d(8px,0,0)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card b{
  display:block!important;
  font-size:20px!important;
  line-height:1.15!important;
  margin-bottom:8px!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card p{
  margin:0!important;
  font-size:14px!important;
  line-height:1.58!important;
  color:rgba(224,240,255,.76)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-kicker{
  display:inline-flex!important;
  margin-bottom:10px!important;
}
html body.spx-public #why-spixor.spx-how-v63.is-intro-flow .why52-visual-card{opacity:.96!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63,
html body.spx-public #dashboard.spx-dashboard-command-v63 *,
html body.spx-public #export,
html body.spx-public #export *,
html body.spx-public #pricing,
html body.spx-public #pricing *,
html body.spx-public #roadmap,
html body.spx-public #roadmap *{
  filter:none!important;
  backdrop-filter:none!important;
}
@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63{
    margin-top:0!important;
    padding-top:36px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{min-height:auto!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{grid-template-columns:1fr!important;gap:22px!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{padding:20px!important;background:linear-gradient(155deg,rgba(7,16,31,.74),rgba(8,18,36,.52))!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav{display:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;min-height:auto!important;display:grid!important;gap:18px!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{min-height:auto!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{position:relative!important;display:grid!important;gap:16px!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{position:relative!important;inset:auto!important;width:100%!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{min-height:auto!important;aspect-ratio:16/10!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{position:relative!important;right:auto!important;bottom:auto!important;max-width:none!important;transform:none!important;margin-top:12px!important;border-radius:16px!important;}
}


/* A8.104 — remove remaining frame/container feel around How Spixor Works right-side visuals.
   Keep the actual screenshot/image as the hero visual, but remove wrapper panels, borders,
   stage glass surfaces and artificial container outlines. */
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage,
html body.spx-public #why-spixor.spx-how-v63 .why52-visuals,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage::before,
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage::after,
html body.spx-public #why-spixor.spx-how-v63 .why52-visuals::before,
html body.spx-public #why-spixor.spx-how-v63 .why52-visuals::after,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual::before,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual::after{
  content:none!important;
  display:none!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-network,
html body.spx-public #why-spixor.spx-how-v63 .why52-float{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:0 34px 90px rgba(0,0,0,.22)!important;
  border-radius:24px!important;
}

/* Make the overlay explanation card feel like it belongs on top of the image,
   not like a second container under/in front of a framed visual. */
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  right:clamp(10px,1.4vw,22px)!important;
  bottom:clamp(14px,1.8vw,26px)!important;
  border-radius:10px 24px 24px 10px!important;
  border:1px solid rgba(218,236,255,.10)!important;
  background:linear-gradient(145deg,rgba(5,13,27,.78),rgba(8,19,37,.64))!important;
  box-shadow:0 18px 44px rgba(0,0,0,.24)!important;
}

/* Prevent any older global figure/product-frame rules from reintroducing a frame. */
html body.spx-public #why-spixor.spx-how-v63 figure.why52-visual{
  padding:0!important;
  overflow:visible!important;
  isolation:auto!important;
}

/* Mobile keeps the screenshot clean and unframed as well. */
@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    box-shadow:0 22px 56px rgba(0,0,0,.20)!important;
    border-radius:20px!important;
  }
}


/* A8.105 — push How Spixor Works visuals to the right viewport edge and animate them in from off-screen.
   This keeps the image unframed, but makes it feel like it slides in from the right side of the screen. */
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
  grid-template-columns:minmax(330px,.72fr) minmax(720px,1.28fr)!important;
  gap:clamp(28px,3.2vw,56px)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
  width:calc(100% + var(--side, 48px) + 4vw)!important;
  margin-right:calc(var(--side, 48px) * -1)!important;
  justify-self:end!important;
  overflow:visible!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{
  inset:0!important;
  overflow:visible!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
  right:calc(var(--side, 48px) * -1)!important;
  left:auto!important;
  width:min(980px, calc(62vw + var(--side, 48px)))!important;
  max-width:none!important;
  transform:translate3d(18vw,24px,0) scale(.985)!important;
  transform-origin:center right!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
  transform:translate3d(0,0,0) scale(1)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
  width:100%!important;
  min-height:clamp(540px,64vh,760px)!important;
  object-fit:cover!important;
  object-position:center left!important;
  border-top-right-radius:0!important;
  border-bottom-right-radius:0!important;
  box-shadow:-34px 38px 105px rgba(0,0,0,.28)!important;
}

/* Keep the overlay card inside the visible part of the image, not outside the viewport edge. */
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  right:clamp(26px,3.2vw,58px)!important;
}

/* 1440p+ gets a stronger edge-hugging image, without breaking 1080p. */
@media (min-width:1500px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    width:calc(100% + var(--side, 64px) + 6vw)!important;
    margin-right:calc((var(--side, 64px) + 2vw) * -1)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1080px, calc(64vw + var(--side, 64px)))!important;
    right:calc((var(--side, 64px) + 2vw) * -1)!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:1fr!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    width:100%!important;
    margin-right:0!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    right:auto!important;
    width:100%!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    border-top-right-radius:20px!important;
    border-bottom-right-radius:20px!important;
    object-position:center!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    right:auto!important;
  }
}


/* A8.106 — true full-bleed right visual lane for How Spixor Works + anti text clipping.
   The visual column now breaks out of the centered shell so the image can touch the viewport edge.
   The left copy area gets more room and visible overflow so long text cannot be clipped. */
html body.spx-public #why-spixor.spx-how-v63{
  overflow:clip!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  padding-left:max(clamp(22px,4.6vw,76px), calc((100vw - 1440px) / 2 + 32px))!important;
  padding-right:0!important;
  grid-template-columns:minmax(360px,520px) minmax(0,1fr)!important;
  gap:clamp(30px,4vw,64px)!important;
  overflow:visible!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
  max-width:520px!important;
  min-height:clamp(610px,68vh,760px)!important;
  height:auto!important;
  align-self:center!important;
  overflow:visible!important;
  z-index:5!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
  min-height:clamp(430px,46vh,560px)!important;
  overflow:visible!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-step{
  overflow:visible!important;
  max-height:none!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-step h3{
  max-width:13.5ch!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-step p{
  max-width:500px!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-step ul{
  max-width:500px!important;
  padding-bottom:10px!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
  width:100%!important;
  min-width:0!important;
  margin-right:0!important;
  justify-self:stretch!important;
  min-height:clamp(600px,72vh,820px)!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{
  position:absolute!important;
  inset:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
  position:absolute!important;
  top:50%!important;
  right:0!important;
  bottom:auto!important;
  left:auto!important;
  width:min(1040px,68vw)!important;
  height:min(760px,72vh)!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(28vw,-50%,0) scale(.985)!important;
  transform-origin:center right!important;
  transition:opacity .84s cubic-bezier(.22,.65,.2,1),transform .84s cubic-bezier(.22,.65,.2,1),visibility .84s cubic-bezier(.22,.65,.2,1)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,-50%,0) scale(1)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual::before,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual::after{
  content:none!important;
  display:none!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  object-fit:cover!important;
  object-position:center left!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  border-radius:28px 0 0 28px!important;
  box-shadow:-38px 42px 110px rgba(0,0,0,.30)!important;
}

/* Remove every remaining stage decoration that reads as a container. */
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage,
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage *,
html body.spx-public #why-spixor.spx-how-v63 .why52-visuals,
html body.spx-public #why-spixor.spx-how-v63 .why52-visuals *{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-network,
html body.spx-public #why-spixor.spx-how-v63 .why52-float{
  display:none!important;
}

/* Overlay explanation card sits on the image, away from the edge, with small left corner radii. */
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  position:absolute!important;
  right:clamp(28px,4vw,72px)!important;
  bottom:clamp(24px,4vh,52px)!important;
  left:auto!important;
  max-width:min(390px,calc(100% - 90px))!important;
  border-radius:10px 24px 24px 10px!important;
  background:linear-gradient(145deg,rgba(5,13,27,.82),rgba(8,20,38,.68))!important;
  border:1px solid rgba(218,236,255,.11)!important;
  box-shadow:0 20px 52px rgba(0,0,0,.26)!important;
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1160px,66vw)!important;
    height:min(820px,74vh)!important;
  }
}

@media (max-width:1180px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(330px,460px) minmax(0,1fr)!important;
    padding-left:clamp(22px,4vw,54px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:64vw!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63{
    overflow:visible!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{
    width:min(100%,calc(100vw - 34px))!important;
    margin:0 auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    width:100%!important;
    margin-left:0!important;
    padding:0!important;
    grid-template-columns:1fr!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:none!important;
    min-height:auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
    min-height:auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    width:100%!important;
    height:auto!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    height:auto!important;
    aspect-ratio:16/10!important;
    border-radius:20px!important;
    box-shadow:0 22px 56px rgba(0,0,0,.20)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    position:relative!important;
    right:auto!important;
    bottom:auto!important;
    max-width:none!important;
    margin-top:12px!important;
    border-radius:16px!important;
  }
}


/* A8.107 — larger, more right-pushed How Spixor Works visuals.
   The right visual should feel like it enters from outside the viewport and fills the right side,
   not like a normal image inside the page grid. */
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
  grid-template-columns:minmax(340px,500px) minmax(0,1fr)!important;
  gap:clamp(22px,2.6vw,46px)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
  max-width:500px!important;
  z-index:6!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
  min-height:clamp(680px,78vh,900px)!important;
  width:100%!important;
  overflow:visible!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
  width:min(1700px,86vw)!important;
  height:min(920px,82vh)!important;
  right:clamp(-260px,-10vw,-90px)!important;
  transform:translate3d(34vw,-50%,0) scale(.985)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
  transform:translate3d(0,-50%,0) scale(1)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
  height:100%!important;
  min-height:clamp(650px,76vh,880px)!important;
  object-fit:cover!important;
  object-position:center left!important;
  border-radius:30px 0 0 30px!important;
  box-shadow:-42px 48px 130px rgba(0,0,0,.34)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  right:clamp(120px,12vw,250px)!important;
  bottom:clamp(28px,5vh,64px)!important;
}

/* Wider screens may use a truly cinematic image size. */
@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1860px,84vw)!important;
    height:min(980px,82vh)!important;
    right:clamp(-360px,-11vw,-150px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    min-height:clamp(700px,78vh,940px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    right:clamp(150px,13vw,310px)!important;
  }
}

/* On shorter desktop screens, stay large but avoid clipping the top/bottom too much. */
@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:calc(100vh - 110px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    height:calc(100vh - 130px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    min-height:calc(100vh - 130px)!important;
  }
}

@media (max-width:1180px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(310px,440px) minmax(0,1fr)!important;
    gap:24px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:88vw!important;
    right:clamp(-180px,-9vw,-70px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    right:clamp(86px,10vw,180px)!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:100%!important;
    height:auto!important;
    right:auto!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    min-height:auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    right:auto!important;
    bottom:auto!important;
  }
}


/* A8.108 — correct How visual direction: bigger AND visually pushed to the right.
   A8.107 increased width, which made the left edge move left. This pass keeps the image large
   but translates the active visual to the right so it really feels attached to / coming from the right edge. */
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
  grid-template-columns:minmax(330px,480px) minmax(0,1fr)!important;
  gap:clamp(18px,2.2vw,38px)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
  min-height:clamp(720px,82vh,980px)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
  width:min(1880px,96vw)!important;
  height:min(1040px,88vh)!important;
  right:clamp(-520px,-22vw,-260px)!important;
  transform:translate3d(52vw,-50%,0) scale(1.02)!important;
  transform-origin:center right!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
  transform:translate3d(clamp(130px,12vw,260px),-50%,0) scale(1.075)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
  min-height:clamp(700px,84vh,980px)!important;
  object-position:center left!important;
  border-radius:32px 0 0 32px!important;
  box-shadow:-46px 54px 150px rgba(0,0,0,.34)!important;
}

/* Move the overlay card with the now right-shifted image so it remains visible. */
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  right:clamp(260px,24vw,520px)!important;
  bottom:clamp(34px,5.5vh,72px)!important;
}

/* Ultra-wide can go even bigger, but still stays clipped by the viewport edge. */
@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(2120px,98vw)!important;
    height:min(1120px,88vh)!important;
    right:clamp(-680px,-24vw,-360px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
    transform:translate3d(clamp(220px,15vw,390px),-50%,0) scale(1.09)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    right:clamp(360px,28vw,680px)!important;
  }
}

/* 1080p/medium desktop: still push right, but avoid hiding too much of the useful screenshot. */
@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1500px,94vw)!important;
    right:clamp(-380px,-20vw,-210px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
    transform:translate3d(clamp(90px,9vw,170px),-50%,0) scale(1.06)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    right:clamp(190px,20vw,360px)!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    height:calc(100vh - 86px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    min-height:calc(100vh - 86px)!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
    width:100%!important;
    height:auto!important;
    right:auto!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    min-height:auto!important;
    border-radius:20px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    right:auto!important;
    bottom:auto!important;
  }
}


/* ==========================================================================
   A8.109 — How Spixor Works final edge-flow pass
   - Intro is copy-only: no right image during the intro beat.
   - Step 1 brings the image in from the real right viewport edge.
   - Step cards crossfade in one controlled flow.
   - Visual explanation cards move inward over the image instead of sitting off-screen.
   ========================================================================== */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63{
    --spx-how-a109-stage-opacity:0;
    overflow:clip!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
    min-height:clamp(1420px,205vh,1980px)!important;
    height:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    padding-left:max(clamp(24px,5vw,82px),calc((100vw - 1440px) / 2 + 34px))!important;
    padding-right:0!important;
    grid-template-columns:minmax(330px,500px) minmax(0,1fr)!important;
    gap:clamp(28px,4vw,72px)!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:500px!important;
    min-height:clamp(500px,60vh,690px)!important;
    overflow:visible!important;
    z-index:10!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
    will-change:opacity,transform,max-height!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
    min-height:clamp(390px,44vh,540px)!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step{
    justify-content:center!important;
    transform:translate3d(0,26px,0) scale(.982)!important;
    transition:opacity .74s cubic-bezier(.22,.78,.18,1),transform .74s cubic-bezier(.22,.78,.18,1),visibility .74s cubic-bezier(.22,.78,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-step[data-spx-active="1"]{
    transform:translate3d(0,0,0) scale(1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-progress{
    transform-origin:left center!important;
    transform:scaleX(var(--spx-how-local,0))!important;
    transition:transform .18s linear!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    position:relative!important;
    justify-self:stretch!important;
    width:100%!important;
    min-height:clamp(680px,80vh,940px)!important;
    margin:0!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(8vw,0,0) scale(.985)!important;
    transition:opacity .72s cubic-bezier(.22,.78,.18,1),transform .72s cubic-bezier(.22,.78,.18,1),visibility .72s cubic-bezier(.22,.78,.18,1)!important;
    z-index:4!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-step-flow .spx-why52-stage{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .spx-why52-stage,
  html body.spx-public #why-spixor.spx-how-v63.is-intro-flow .spx-why52-stage{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{
    position:absolute!important;
    inset:0!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    position:absolute!important;
    top:50%!important;
    left:auto!important;
    bottom:auto!important;
    right:calc(-1 * clamp(260px,18vw,560px))!important;
    width:min(1780px,76vw)!important;
    height:min(1040px,88vh)!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    overflow:visible!important;
    transform-origin:center right!important;
    transform:translate3d(50vw,-50%,0) scale(1.015)!important;
    transition:opacity .86s cubic-bezier(.2,.82,.18,1),transform .92s cubic-bezier(.2,.82,.18,1),visibility .86s cubic-bezier(.2,.82,.18,1)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(clamp(70px,7vw,170px),-50%,0) scale(1.055)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:clamp(660px,82vh,940px)!important;
    object-fit:cover!important;
    object-position:center left!important;
    border:0!important;
    outline:0!important;
    border-radius:26px 0 0 26px!important;
    background:transparent!important;
    box-shadow:-38px 48px 138px rgba(0,0,0,.34)!important;
    filter:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:clamp(34px,4vw,86px)!important;
    right:auto!important;
    bottom:clamp(28px,5vh,68px)!important;
    max-width:min(420px,calc(100% - 140px))!important;
    border-radius:10px 24px 24px 10px!important;
    transform:translate3d(-10px,10px,0)!important;
    opacity:.96!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"] .why52-visual-card{
    transform:translate3d(0,0,0)!important;
    transition:transform .78s cubic-bezier(.2,.82,.18,1),opacity .78s cubic-bezier(.2,.82,.18,1)!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1960px,74vw)!important;
    right:calc(-1 * clamp(420px,20vw,720px))!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
    transform:translate3d(clamp(120px,8vw,230px),-50%,0) scale(1.06)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:clamp(42px,4.4vw,104px)!important;
  }
}

@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(300px,440px) minmax(0,1fr)!important;
    gap:clamp(20px,3vw,46px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:440px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1280px,75vw)!important;
    right:calc(-1 * clamp(210px,16vw,360px))!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
    transform:translate3d(clamp(48px,6vw,110px),-50%,0) scale(1.045)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:clamp(28px,3.5vw,64px)!important;
    max-width:min(390px,calc(100% - 110px))!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:calc(100vh - 96px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    height:calc(100vh - 100px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    min-height:calc(100vh - 100px)!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav{
    display:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:auto!important;
    right:auto!important;
    transform:none!important;
  }
}

/* ========================================================================== 
   A8.110 — How Spixor Works edge/tempo correction
   - Screenshots are slightly smaller/lower, but locked harder to the right edge.
   - The intro card is shorter and wider so it no longer feels mega tall.
   - Step visuals keep a stronger hold while fast scrolling.
   ========================================================================== */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63{
    overflow:clip!important;
    padding-top:clamp(18px,3vh,46px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
    min-height:clamp(1760px,248vh,2680px)!important;
    height:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    padding-left:max(clamp(22px,4.6vw,78px),calc((100vw - 1440px) / 2 + 30px))!important;
    padding-right:0!important;
    grid-template-columns:minmax(360px,570px) minmax(0,1fr)!important;
    gap:clamp(24px,3.6vw,62px)!important;
    align-items:center!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:570px!important;
    min-height:clamp(380px,44vh,540px)!important;
    padding:clamp(18px,2.15vw,30px) clamp(22px,2.7vw,38px)!important;
    align-self:center!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
    max-width:640px!important;
    margin:0!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{
    font-size:clamp(30px,3.35vw,52px)!important;
    line-height:1.02!important;
    letter-spacing:-.052em!important;
    max-width:13.5ch!important;
    margin:10px 0 12px!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head p{
    max-width:620px!important;
    font-size:clamp(15px,.95vw,17px)!important;
    line-height:1.55!important;
    margin:0!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
    min-height:clamp(290px,32vh,390px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step{
    transition:opacity .82s cubic-bezier(.2,.78,.18,1),transform .82s cubic-bezier(.2,.78,.18,1),visibility .82s cubic-bezier(.2,.78,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:clamp(560px,70vh,800px)!important;
    align-self:center!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{
    position:absolute!important;
    inset:0!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    position:absolute!important;
    top:50%!important;
    left:auto!important;
    bottom:auto!important;
    right:-18px!important;
    width:min(1540px,68vw)!important;
    height:min(800px,74vh)!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    overflow:visible!important;
    transform-origin:center right!important;
    transform:translate3d(34vw,-50%,0) scale(.985)!important;
    transition:opacity .94s cubic-bezier(.2,.82,.18,1),transform 1.02s cubic-bezier(.2,.82,.18,1),visibility .94s cubic-bezier(.2,.82,.18,1)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,-50%,0) scale(1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center left!important;
    border:0!important;
    outline:0!important;
    border-radius:24px 0 0 24px!important;
    background:transparent!important;
    box-shadow:-32px 40px 116px rgba(0,0,0,.31)!important;
    filter:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:clamp(8px,1.7vw,32px)!important;
    right:auto!important;
    bottom:clamp(24px,4.2vh,54px)!important;
    max-width:min(410px,calc(100% - 78px))!important;
    border-radius:10px 22px 22px 10px!important;
    transform:translate3d(-8px,8px,0)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"] .why52-visual-card{
    transform:translate3d(0,0,0)!important;
    transition:transform .84s cubic-bezier(.2,.82,.18,1),opacity .84s cubic-bezier(.2,.82,.18,1)!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1680px,66vw)!important;
    height:min(820px,72vh)!important;
    right:-22px!important;
  }
}

@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(320px,500px) minmax(0,1fr)!important;
    gap:clamp(18px,2.8vw,42px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:500px!important;
    min-height:clamp(360px,43vh,520px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1180px,70vw)!important;
    height:min(720px,70vh)!important;
    right:-18px!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:calc(100vh - 150px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    height:calc(100vh - 154px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    min-height:0!important;
  }
}

/* ========================================================================== 
   A8.111 — How Spixor Works true viewport-edge handoff
   - The visual layer is no longer limited by the grid column during desktop steps.
   - Screenshots are anchored beyond the real viewport right edge, not merely the stage edge.
   - Intro is compact and wide; step stack only takes space when the step-flow starts.
   - What -> How uses a soft opacity/translate handoff instead of a hard section reveal.
   ========================================================================== */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63{
    --spx-how-handoff:1;
    overflow:visible!important;
    background:transparent!important;
    padding-top:clamp(8px,1.6vh,24px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
    min-height:clamp(1940px,282vh,3040px)!important;
    height:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    padding-left:max(clamp(22px,4.4vw,78px),calc((100vw - 1440px) / 2 + 28px))!important;
    padding-right:0!important;
    grid-template-columns:minmax(380px,640px) minmax(0,1fr)!important;
    gap:clamp(20px,3vw,54px)!important;
    align-items:center!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:640px!important;
    min-height:0!important;
    align-self:center!important;
    padding:clamp(18px,2vw,28px) clamp(24px,3vw,42px)!important;
    overflow:visible!important;
    z-index:20!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
    max-width:640px!important;
    margin:0!important;
    opacity:1!important;
    visibility:visible!important;
    transform:translate3d(0,0,0)!important;
    max-height:260px!important;
    overflow:hidden!important;
    transition:opacity .62s cubic-bezier(.2,.78,.18,1),transform .62s cubic-bezier(.2,.78,.18,1),max-height .62s cubic-bezier(.2,.78,.18,1),margin .62s cubic-bezier(.2,.78,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-step-flow .spx-why52-story-head{
    opacity:0!important;
    visibility:hidden!important;
    transform:translate3d(0,-18px,0)!important;
    max-height:0!important;
    margin:0!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head .eyebrow{
    margin-bottom:10px!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{
    font-size:clamp(32px,3.05vw,50px)!important;
    line-height:1.03!important;
    letter-spacing:-.052em!important;
    max-width:18ch!important;
    margin:6px 0 10px!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head p{
    max-width:620px!important;
    font-size:clamp(15px,.92vw,17px)!important;
    line-height:1.48!important;
    margin:0!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
    min-height:0!important;
    max-height:0!important;
    opacity:0!important;
    visibility:hidden!important;
    overflow:visible!important;
    transform:translate3d(0,18px,0)!important;
    transition:opacity .62s cubic-bezier(.2,.78,.18,1),transform .62s cubic-bezier(.2,.78,.18,1),max-height .62s cubic-bezier(.2,.78,.18,1),visibility .62s cubic-bezier(.2,.78,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-step-flow .why52-step-stack{
    min-height:clamp(292px,32vh,396px)!important;
    max-height:520px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:translate3d(0,0,0)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step{
    width:min(560px,100%)!important;
    padding:clamp(20px,2.1vw,28px)!important;
    transition:opacity .9s cubic-bezier(.2,.78,.18,1),transform .9s cubic-bezier(.2,.78,.18,1),visibility .9s cubic-bezier(.2,.78,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:clamp(520px,62vh,740px)!important;
    height:clamp(520px,62vh,740px)!important;
    align-self:center!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:none!important;
    transition:opacity .68s cubic-bezier(.2,.78,.18,1),visibility .68s cubic-bezier(.2,.78,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .spx-why52-stage{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-network,
  html body.spx-public #why-spixor.spx-how-v63 .why52-float{
    display:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{
    position:absolute!important;
    inset:0!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    position:fixed!important;
    top:50vh!important;
    right:clamp(-420px,-20vw,-230px)!important;
    left:auto!important;
    bottom:auto!important;
    width:clamp(980px,76vw,1560px)!important;
    height:clamp(520px,62vh,720px)!important;
    transform:translate3d(0,-50%,0)!important;
    z-index:14!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:none!important;
    contain:layout style!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    overflow:visible!important;
    transform-origin:center right!important;
    transform:translate3d(38vw,0,0) scale(.982)!important;
    transition:opacity 1.02s cubic-bezier(.2,.82,.18,1),transform 1.08s cubic-bezier(.2,.82,.18,1),visibility 1.02s cubic-bezier(.2,.82,.18,1)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual[data-spx-active="1"]{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center left!important;
    border:0!important;
    outline:0!important;
    border-radius:24px 0 0 24px!important;
    background:transparent!important;
    box-shadow:-32px 40px 116px rgba(0,0,0,.31)!important;
    filter:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:clamp(-128px,-5vw,-62px)!important;
    right:auto!important;
    bottom:clamp(24px,4.5vh,58px)!important;
    max-width:min(420px,calc(100vw - 86px))!important;
    border-radius:10px 22px 22px 10px!important;
    transform:translate3d(-12px,10px,0)!important;
    opacity:.96!important;
    transition:transform .9s cubic-bezier(.2,.82,.18,1),opacity .9s cubic-bezier(.2,.82,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"] .why52-visual-card{
    transform:translate3d(0,0,0)!important;
  }

  html.spx-how-handoff-active body.spx-public .spx-v26-explain{
    opacity:calc(1 - min(.92,var(--spx-how-handoff,0)))!important;
    transform:translate3d(0,calc(var(--spx-how-handoff,0) * -26px),0) scale(calc(1 - (var(--spx-how-handoff,0) * .018)))!important;
    transition:none!important;
  }

  html.spx-how-handoff-active body.spx-public #why-spixor.spx-how-v63{
    opacity:clamp(.18,var(--spx-how-handoff,1),1)!important;
    transform:translate3d(0,calc((1 - var(--spx-how-handoff,1)) * 32px),0)!important;
    transition:none!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    right:clamp(-520px,-22vw,-330px)!important;
    width:clamp(1180px,74vw,1680px)!important;
    height:clamp(540px,60vh,760px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:clamp(-150px,-5.2vw,-82px)!important;
  }
}

@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(320px,520px) minmax(0,1fr)!important;
    gap:clamp(16px,2.6vw,38px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:520px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    right:clamp(-330px,-20vw,-220px)!important;
    width:clamp(900px,76vw,1180px)!important;
    height:clamp(500px,60vh,660px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:clamp(-96px,-5vw,-48px)!important;
    max-width:min(390px,calc(100vw - 74px))!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:calc(100vh - 178px)!important;
    height:calc(100vh - 178px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    height:calc(100vh - 178px)!important;
  }
}

/* A8.111b — keep the viewport-fixed visual truly viewport-fixed.
   A transformed ancestor would turn position:fixed into section-relative positioning,
   which is exactly what created the visible right-side gap. */
@media (min-width:981px){
  html.spx-how-handoff-active body.spx-public #why-spixor.spx-how-v63{
    opacity:clamp(.18,var(--spx-how-handoff,1),1)!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  html.spx-how-handoff-active body.spx-public .spx-v26-explain{
    opacity:clamp(.08,calc(1 - var(--spx-how-handoff,0)),1)!important;
  }
}

/* ========================================================================== 
   A8.112 — How Spixor Works: edge-lock, fade-only steps and no blank handoff
   - Step visuals no longer slide between 01/02/03; they crossfade in place.
   - The fixed visual lane is pushed much further to the real viewport right edge.
   - Visuals sit higher and slightly calmer in height.
   - What is Spixor -> How Spixor Works uses a direct crossfade, no empty dark screen.
   - Intro copy is compact, wider and shorter; step 01 starts sooner.
   ========================================================================== */
@media (min-width:981px){
  html body.spx-public .spx-v26-bottom-fade,
  html body.spx-public .spx-how-handoff-overlay,
  html body.spx-public .spx-how-handoff-overlay.is-visible{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html body.spx-public .spx-home-main .spx-hero-v26[data-hero-scrollstory]{
    min-height:clamp(2600px,398svh,4200px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63{
    margin-top:clamp(-96px,-8svh,-42px)!important;
    padding-top:0!important;
    background:transparent!important;
    opacity:var(--spx-a112-how-opacity,1)!important;
    transform:translate3d(0,calc((1 - var(--spx-a112-how-opacity,1)) * 18px),0)!important;
    filter:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
    min-height:clamp(2140px,310svh,3380px)!important;
    height:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    padding-top:clamp(34px,5vh,66px)!important;
    padding-bottom:clamp(34px,5vh,66px)!important;
    grid-template-columns:minmax(400px,680px) minmax(0,1fr)!important;
    gap:clamp(16px,2.8vw,50px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:700px!important;
    padding:clamp(14px,1.7vw,24px) clamp(22px,2.7vw,38px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
    max-width:700px!important;
    max-height:176px!important;
    margin:0!important;
    padding:0!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-step-flow .spx-why52-story-head{
    max-height:0!important;
    opacity:0!important;
    transform:translate3d(0,-12px,0)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head .eyebrow{
    margin-bottom:8px!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{
    max-width:26ch!important;
    margin:4px 0 8px!important;
    font-size:clamp(30px,2.68vw,46px)!important;
    line-height:1.02!important;
    letter-spacing:-.052em!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head p{
    max-width:680px!important;
    margin:0!important;
    font-size:clamp(14px,.86vw,16px)!important;
    line-height:1.42!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-step-flow .why52-step-stack{
    min-height:clamp(284px,31vh,380px)!important;
    max-height:480px!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:clamp(430px,54vh,620px)!important;
    height:clamp(430px,54vh,620px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    position:fixed!important;
    top:42.5vh!important;
    right:clamp(-650px,-30vw,-360px)!important;
    left:auto!important;
    bottom:auto!important;
    width:clamp(980px,68vw,1400px)!important;
    height:clamp(430px,54vh,620px)!important;
    transform:translate3d(0,-50%,0)!important;
    z-index:14!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:none!important;
    contain:layout style!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visual{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:0!important;
    visibility:visible!important;
    pointer-events:none!important;
    transform:none!important;
    filter:none!important;
    transition:opacity .86s cubic-bezier(.22,.76,.18,1)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual[data-spx-active="1"]{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:left center!important;
    transform:none!important;
    transition:none!important;
    border-radius:22px 0 0 22px!important;
    box-shadow:-28px 34px 92px rgba(0,0,0,.28)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual figcaption{
    left:clamp(-182px,-8vw,-92px)!important;
    right:auto!important;
    bottom:clamp(18px,3.4vh,42px)!important;
    max-width:min(408px,calc(100vw - 86px))!important;
    padding:clamp(16px,1.55vw,22px) clamp(18px,1.8vw,26px)!important;
    border-radius:10px 22px 22px 10px!important;
    opacity:1!important;
    transform:none!important;
    transition:opacity .86s cubic-bezier(.22,.76,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual:not(.is-active):not([data-spx-active="1"]) .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual:not(.is-active):not([data-spx-active="1"]) figcaption{
    opacity:0!important;
  }

  html.spx-a112-handoff body.spx-public .spx-v26-explain,
  html.spx-a112-handoff body.spx-public .spx-v26-what-crisp-layer{
    opacity:calc(1 - var(--spx-a112-how-in,0))!important;
    transform:translate3d(-50%,calc(var(--spx-a112-how-in,0) * -18px),0) scale(calc(1 - (var(--spx-a112-how-in,0) * .012)))!important;
    filter:none!important;
    transition:none!important;
  }

  html.spx-a112-handoff body.spx-public .spx-v26-explain{
    transform:translate3d(0,calc(var(--spx-a112-how-in,0) * -18px),0) scale(calc(1 - (var(--spx-a112-how-in,0) * .012)))!important;
  }

  html.spx-a112-handoff body.spx-public #why-spixor.spx-how-v63{
    --spx-a112-how-opacity:clamp(.08,var(--spx-a112-how-in,1),1);
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    top:42vh!important;
    right:clamp(-780px,-32vw,-520px)!important;
    width:clamp(1160px,67vw,1540px)!important;
    height:clamp(470px,53vh,660px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual figcaption{
    left:clamp(-220px,-8.2vw,-128px)!important;
  }
}

@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(340px,560px) minmax(0,1fr)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    top:42.5vh!important;
    right:clamp(-500px,-31vw,-330px)!important;
    width:clamp(880px,68vw,1120px)!important;
    height:clamp(420px,54vh,590px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual figcaption{
    left:clamp(-150px,-8vw,-82px)!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    top:43vh!important;
    height:calc(100vh - 230px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    height:calc(100vh - 230px)!important;
    min-height:calc(100vh - 230px)!important;
  }
}

/* ========================================================================== 
   GPT A8.113 — How Spixor Works intro + scroll-crossfade + Dashboard handoff
   - The How intro is the first visible element after What is Spixor.
   - Intro is bigger, wider and no longer reads like a small boxed card.
   - Step content gets a stronger Spixor/HUD glass card style.
   - Step visuals are slightly larger and fade by scroll progress, not by slide.
   - How fades out while Dashboard Command Center starts fading in.
   ========================================================================== */
@media (min-width:981px){
  html body.spx-public .spx-home-main .spx-hero-v26[data-hero-scrollstory]{
    min-height:clamp(2780px,420svh,4460px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63{
    --a113-how-in:1;
    --a113-how-exit:0;
    --a113-intro-opacity:1;
    --a113-steps-opacity:0;
    margin-top:clamp(-150px,-13svh,-86px)!important;
    padding-top:0!important;
    opacity:var(--a113-how-in)!important;
    transform:translate3d(0,calc((1 - var(--a113-how-in)) * 18px - var(--a113-how-exit) * 18px),0)!important;
    filter:blur(calc(var(--a113-how-exit) * 5px))!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
    min-height:clamp(2750px,395svh,4300px)!important;
    height:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    height:100svh!important;
    min-height:720px!important;
    padding-top:clamp(54px,8vh,96px)!important;
    padding-bottom:clamp(54px,8vh,96px)!important;
    padding-left:max(clamp(28px,6vw,96px),calc((100vw - 1440px) / 2 + 40px))!important;
    padding-right:0!important;
    display:grid!important;
    grid-template-columns:minmax(430px,700px) minmax(0,1fr)!important;
    align-items:center!important;
    gap:clamp(24px,3.2vw,56px)!important;
    opacity:calc(1 - var(--a113-how-exit))!important;
    transform:translate3d(0,calc(var(--a113-how-exit) * -18px),0)!important;
    filter:none!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    width:min(700px,calc(100vw - 72px))!important;
    max-width:700px!important;
    min-height:clamp(500px,62vh,700px)!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    overflow:visible!important;
    z-index:24!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-intro-flow .spx-why52-copy{
    width:min(880px,calc(100vw - 96px))!important;
    max-width:880px!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
    max-width:860px!important;
    max-height:clamp(340px,44vh,440px)!important;
    margin:0!important;
    padding:clamp(10px,1.2vw,18px) 0!important;
    opacity:var(--a113-intro-opacity)!important;
    transform:translate3d(0,calc((1 - var(--a113-intro-opacity)) * -18px),0) scale(calc(.986 + (.014 * var(--a113-intro-opacity))))!important;
    overflow:visible!important;
    pointer-events:auto!important;
    transition:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-step-flow .spx-why52-story-head{
    max-height:0!important;
    padding:0!important;
    margin:0!important;
    opacity:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head::before{
    content:""!important;
    position:absolute!important;
    left:-34px!important;
    top:-22px!important;
    width:min(540px,66vw)!important;
    height:clamp(190px,25vh,280px)!important;
    border-radius:999px!important;
    background:radial-gradient(circle at 28% 36%,rgba(24,213,255,.17),transparent 66%)!important;
    filter:blur(12px)!important;
    opacity:.8!important;
    pointer-events:none!important;
    z-index:-1!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head .eyebrow{
    margin:0 0 18px!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{
    max-width:12.5ch!important;
    margin:0 0 20px!important;
    font-size:clamp(52px,6vw,94px)!important;
    line-height:.92!important;
    letter-spacing:-.072em!important;
    text-wrap:balance!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head p{
    max-width:760px!important;
    margin:0!important;
    font-size:clamp(17px,1.32vw,23px)!important;
    line-height:1.62!important;
    color:rgba(226,241,255,.78)!important;
    text-wrap:pretty!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
    display:block!important;
    position:relative!important;
    min-height:clamp(440px,50vh,610px)!important;
    height:clamp(440px,50vh,610px)!important;
    margin:0!important;
    opacity:var(--a113-steps-opacity)!important;
    transform:translate3d(0,calc((1 - var(--a113-steps-opacity)) * 24px),0) scale(calc(.982 + (.018 * var(--a113-steps-opacity))))!important;
    overflow:visible!important;
    pointer-events:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .why52-step-stack{
    opacity:0!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:12px!important;
    padding:clamp(30px,3.2vw,48px)!important;
    border-radius:30px!important;
    border:1px solid rgba(117,229,255,.18)!important;
    background:
      linear-gradient(145deg,rgba(7,17,31,.82),rgba(5,10,22,.68) 56%,rgba(6,25,43,.54)),
      radial-gradient(420px 220px at 16% 10%,rgba(24,213,255,.13),transparent 70%)!important;
    box-shadow:0 28px 88px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.075),0 0 0 1px rgba(255,255,255,.025)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
    opacity:0!important;
    visibility:visible!important;
    transform:translate3d(0,18px,0) scale(.985)!important;
    transition:none!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    border-radius:inherit!important;
    pointer-events:none!important;
    background:linear-gradient(115deg,rgba(255,255,255,.10),transparent 26%,transparent 76%,rgba(24,213,255,.08))!important;
    opacity:.65!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step::after{
    content:""!important;
    position:absolute!important;
    left:22px!important;
    right:22px!important;
    top:0!important;
    height:1px!important;
    background:linear-gradient(90deg,transparent,rgba(107,232,255,.55),transparent)!important;
    opacity:.7!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-step[data-spx-active="1"]{
    visibility:visible!important;
    pointer-events:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step > *{
    position:relative!important;
    z-index:1!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step span{
    display:inline-flex!important;
    width:max-content!important;
    align-items:center!important;
    gap:8px!important;
    margin-bottom:2px!important;
    padding:8px 11px!important;
    border-radius:999px!important;
    border:1px solid rgba(107,232,255,.22)!important;
    background:rgba(24,213,255,.075)!important;
    color:#79ecff!important;
    font-size:12px!important;
    letter-spacing:.13em!important;
    text-transform:uppercase!important;
    font-weight:950!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step h3{
    margin:4px 0 2px!important;
    font-size:clamp(30px,2.8vw,46px)!important;
    line-height:1.02!important;
    letter-spacing:-.048em!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step p{
    max-width:620px!important;
    font-size:clamp(15px,1vw,18px)!important;
    line-height:1.58!important;
    color:rgba(226,241,255,.76)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step ul{
    display:grid!important;
    gap:10px!important;
    margin:8px 0 0!important;
    padding:0!important;
    list-style:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step li{
    position:relative!important;
    padding-left:25px!important;
    color:rgba(226,241,255,.72)!important;
    font-size:14px!important;
    line-height:1.45!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step li::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:.62em!important;
    width:8px!important;
    height:8px!important;
    border-radius:999px!important;
    background:#6be8ff!important;
    box-shadow:0 0 18px rgba(107,232,255,.58)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:clamp(520px,64vh,740px)!important;
    height:clamp(520px,64vh,740px)!important;
    opacity:var(--a113-steps-opacity)!important;
    transform:none!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .spx-why52-stage,
  html body.spx-public #why-spixor.spx-how-v63.is-intro-flow .spx-why52-stage{
    opacity:0!important;
    visibility:hidden!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    position:fixed!important;
    top:45.5vh!important;
    right:clamp(-720px,-32vw,-420px)!important;
    left:auto!important;
    bottom:auto!important;
    width:clamp(1060px,72vw,1540px)!important;
    height:clamp(500px,62vh,750px)!important;
    transform:translate3d(0,-50%,0)!important;
    z-index:14!important;
    opacity:calc(var(--a113-steps-opacity) * (1 - var(--a113-how-exit)))!important;
    visibility:visible!important;
    pointer-events:none!important;
    contain:layout style!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visual{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:0!important;
    visibility:visible!important;
    pointer-events:none!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual[data-spx-active="1"]{
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:left center!important;
    transform:none!important;
    transition:none!important;
    border-radius:24px 0 0 24px!important;
    box-shadow:-34px 42px 112px rgba(0,0,0,.31)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual figcaption{
    left:clamp(-210px,-9.2vw,-112px)!important;
    right:auto!important;
    bottom:clamp(22px,3.6vh,52px)!important;
    max-width:min(430px,calc(100vw - 92px))!important;
    padding:clamp(17px,1.6vw,24px) clamp(20px,1.9vw,28px)!important;
    border-radius:10px 24px 24px 10px!important;
    background:linear-gradient(145deg,rgba(4,12,24,.84),rgba(3,8,18,.72))!important;
    border:1px solid rgba(116,232,255,.18)!important;
    box-shadow:0 26px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.065)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-network,
  html body.spx-public #why-spixor.spx-how-v63 .why52-float{
    opacity:calc(var(--a113-steps-opacity) * .72)!important;
  }

  html.spx-a113-what-how body.spx-public .spx-v26-explain,
  html.spx-a113-what-how body.spx-public .spx-v26-what-crisp-layer{
    opacity:calc(1 - var(--a113-how-in,0))!important;
    filter:none!important;
    transition:none!important;
  }

  html.spx-a113-how-exit body.spx-public #dashboard.spx-dashboard-command-v63{
    opacity:var(--a113-dashboard-in,0)!important;
    transform:translate3d(0,calc((1 - var(--a113-dashboard-in,0)) * 24px),0)!important;
    filter:blur(calc((1 - var(--a113-dashboard-in,0)) * 4px))!important;
  }

  html body.spx-public #dashboard.spx-dashboard-command-v63{
    transition:none!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    top:45vh!important;
    right:clamp(-900px,-35vw,-620px)!important;
    width:clamp(1240px,72vw,1720px)!important;
    height:clamp(540px,62vh,800px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual figcaption{
    left:clamp(-260px,-10vw,-150px)!important;
  }
}

@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(380px,620px) minmax(0,1fr)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63.is-intro-flow .spx-why52-copy{
    max-width:760px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    top:45.5vh!important;
    right:clamp(-640px,-34vw,-420px)!important;
    width:clamp(980px,73vw,1300px)!important;
    height:clamp(480px,62vh,700px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual figcaption{
    left:clamp(-184px,-9.2vw,-104px)!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    min-height:660px!important;
    padding-top:42px!important;
    padding-bottom:42px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{
    font-size:clamp(46px,5.4vw,78px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    top:46vh!important;
    height:calc(100vh - 176px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    height:calc(100vh - 176px)!important;
    min-height:calc(100vh - 176px)!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
    max-height:none!important;
    opacity:1!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-step,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}

/* ========================================================================== 
   GPT A8.114 — How Spixor Works animation stabilization
   - Retires visual flicker by letting opacity, not visibility/class switches, do the fade.
   - Intro becomes a larger, unboxed zoom-fade scene before the steps appear.
   - Step cards/screenshots crossfade by scroll progress with longer overlap windows.
   ========================================================================== */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"]{
    --a114-how-in:1;
    --a114-intro-opacity:1;
    --a114-intro-out:0;
    --a114-steps-opacity:0;
    --a114-how-exit:0;
    --a114-dashboard-in:0;
    margin-top:clamp(-130px,-10svh,-72px)!important;
    padding-top:0!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    filter:none!important;
    background:transparent!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-track{
    min-height:clamp(2920px,420svh,4520px)!important;
    height:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-sticky{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    height:100svh!important;
    min-height:720px!important;
    padding-top:clamp(48px,7vh,88px)!important;
    padding-bottom:clamp(48px,7vh,88px)!important;
    padding-left:max(clamp(30px,6vw,104px),calc((100vw - 1480px) / 2 + 42px))!important;
    padding-right:0!important;
    display:grid!important;
    grid-template-columns:minmax(440px,720px) minmax(0,1fr)!important;
    align-items:center!important;
    gap:clamp(28px,3.6vw,62px)!important;
    opacity:calc(1 - var(--a114-how-exit))!important;
    transform:translate3d(0,calc(var(--a114-how-exit) * -18px),0)!important;
    filter:none!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-intro-flow .spx-why52-sticky{
    grid-template-columns:minmax(0,1fr)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-copy{
    width:min(720px,calc(100vw - 76px))!important;
    max-width:720px!important;
    min-height:clamp(500px,60vh,690px)!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    overflow:visible!important;
    z-index:26!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-intro-flow .spx-why52-copy{
    width:min(1080px,calc(100vw - 128px))!important;
    max-width:1080px!important;
    min-height:clamp(470px,58vh,660px)!important;
    justify-content:center!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-story-head{
    position:relative!important;
    width:min(1040px,calc(100vw - 128px))!important;
    max-width:1040px!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    opacity:var(--a114-intro-opacity)!important;
    visibility:visible!important;
    transform:translate3d(0,var(--a114-intro-y,0px),0) scale(calc(1 + (var(--a114-intro-out) * .075)))!important;
    filter:blur(calc(var(--a114-intro-out) * 5px))!important;
    overflow:visible!important;
    pointer-events:auto!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-step-flow .spx-why52-story-head{
    max-height:none!important;
    padding:0!important;
    margin:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-story-head::before{
    content:""!important;
    position:absolute!important;
    left:clamp(-90px,-6vw,-34px)!important;
    top:clamp(-86px,-7vh,-38px)!important;
    width:min(780px,72vw)!important;
    height:clamp(300px,38vh,430px)!important;
    border-radius:999px!important;
    background:radial-gradient(circle at 34% 38%,rgba(24,213,255,.20),rgba(37,99,235,.085) 42%,transparent 72%)!important;
    filter:blur(18px)!important;
    opacity:.88!important;
    pointer-events:none!important;
    z-index:-1!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-story-head::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    bottom:clamp(-30px,-3vh,-12px)!important;
    width:min(520px,52vw)!important;
    height:1px!important;
    background:linear-gradient(90deg,rgba(107,232,255,.58),rgba(107,232,255,.16),transparent)!important;
    opacity:calc(.24 + var(--a114-intro-opacity) * .52)!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-story-head .eyebrow{
    margin:0 0 20px!important;
    padding:9px 13px!important;
    border-radius:999px!important;
    background:rgba(24,213,255,.085)!important;
    border:1px solid rgba(107,232,255,.20)!important;
    color:#8eefff!important;
    box-shadow:0 18px 48px rgba(24,213,255,.08)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-story-head h2{
    max-width:13.8ch!important;
    margin:0 0 22px!important;
    font-size:clamp(66px,7.1vw,118px)!important;
    line-height:.89!important;
    letter-spacing:-.082em!important;
    text-wrap:balance!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-story-head p{
    max-width:820px!important;
    margin:0!important;
    font-size:clamp(18px,1.45vw,25px)!important;
    line-height:1.58!important;
    color:rgba(226,241,255,.80)!important;
    text-wrap:pretty!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step-nav{
    display:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step-stack{
    display:block!important;
    position:relative!important;
    min-height:clamp(450px,52vh,630px)!important;
    height:clamp(450px,52vh,630px)!important;
    margin:0!important;
    opacity:var(--a114-steps-opacity)!important;
    transform:translate3d(0,calc((1 - var(--a114-steps-opacity)) * 24px),0) scale(calc(.984 + (.016 * var(--a114-steps-opacity))))!important;
    overflow:visible!important;
    pointer-events:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"]:not(.is-step-flow) .why52-step-stack{
    opacity:0!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:12px!important;
    padding:clamp(32px,3.4vw,52px)!important;
    border-radius:32px!important;
    border:1px solid rgba(121,236,255,.22)!important;
    background:
      radial-gradient(520px 260px at 12% 6%,rgba(24,213,255,.16),transparent 66%),
      linear-gradient(145deg,rgba(8,19,34,.88),rgba(5,10,22,.72) 54%,rgba(7,31,51,.58))!important;
    box-shadow:0 30px 92px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.085),0 0 0 1px rgba(255,255,255,.028)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    opacity:0!important;
    visibility:visible!important;
    transform:translate3d(0,14px,0) scale(.988)!important;
    filter:blur(1.6px)!important;
    transition:none!important;
    pointer-events:none!important;
    overflow:hidden!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    border-radius:inherit!important;
    pointer-events:none!important;
    background:linear-gradient(116deg,rgba(255,255,255,.12),transparent 27%,transparent 74%,rgba(24,213,255,.10))!important;
    opacity:.70!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step::after{
    content:""!important;
    position:absolute!important;
    left:24px!important;
    right:24px!important;
    top:0!important;
    height:1px!important;
    background:linear-gradient(90deg,transparent,rgba(107,232,255,.64),transparent)!important;
    opacity:.78!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step > *{
    position:relative!important;
    z-index:1!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step h3{
    margin:4px 0 4px!important;
    font-size:clamp(31px,2.9vw,48px)!important;
    line-height:1.02!important;
    letter-spacing:-.05em!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step p{
    max-width:650px!important;
    font-size:clamp(15px,1.04vw,18px)!important;
    line-height:1.6!important;
    color:rgba(226,241,255,.78)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-stage{
    min-height:clamp(545px,66vh,780px)!important;
    height:clamp(545px,66vh,780px)!important;
    opacity:var(--a114-steps-opacity)!important;
    visibility:visible!important;
    transform:none!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"]:not(.is-step-flow) .spx-why52-stage,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-intro-flow .spx-why52-stage{
    opacity:0!important;
    visibility:hidden!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    position:fixed!important;
    top:44.5vh!important;
    right:clamp(-780px,-34vw,-470px)!important;
    left:auto!important;
    bottom:auto!important;
    width:clamp(1140px,76vw,1660px)!important;
    height:clamp(535px,66vh,805px)!important;
    transform:translate3d(0,-50%,0)!important;
    z-index:14!important;
    opacity:calc(var(--a114-steps-opacity) * (1 - var(--a114-how-exit)))!important;
    visibility:visible!important;
    pointer-events:none!important;
    contain:layout style!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-how-active-viewport .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-how-active-viewport.is-step-flow .why52-visual{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:0!important;
    visibility:visible!important;
    pointer-events:none!important;
    transform:scale(.992)!important;
    filter:blur(1.1px)!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    will-change:opacity,filter,transform!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual img,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-how-active-viewport .why52-visual img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:left center!important;
    transform:none!important;
    transition:none!important;
    border-radius:24px 0 0 24px!important;
    box-shadow:-36px 46px 118px rgba(0,0,0,.32)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual figcaption{
    left:clamp(-220px,-9.4vw,-124px)!important;
    right:auto!important;
    bottom:clamp(24px,3.8vh,58px)!important;
    max-width:min(446px,calc(100vw - 92px))!important;
    padding:clamp(17px,1.7vw,25px) clamp(20px,2vw,30px)!important;
    border-radius:10px 24px 24px 10px!important;
    background:linear-gradient(145deg,rgba(4,12,24,.86),rgba(3,8,18,.74))!important;
    border:1px solid rgba(116,232,255,.20)!important;
    box-shadow:0 28px 74px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.07)!important;
    backdrop-filter:blur(13px)!important;
    -webkit-backdrop-filter:blur(13px)!important;
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  html.spx-a114-what-how body.spx-public .spx-v26-explain,
  html.spx-a114-what-how body.spx-public .spx-v26-what-crisp-layer{
    opacity:calc(1 - var(--a114-how-in,0))!important;
    filter:blur(calc(var(--a114-how-in,0) * 2.5px))!important;
    transition:none!important;
  }

  html.spx-a114-how-exit body.spx-public #dashboard.spx-dashboard-command-v63{
    opacity:var(--a114-dashboard-in,0)!important;
    transform:translate3d(0,calc((1 - var(--a114-dashboard-in,0)) * 22px),0)!important;
    filter:blur(calc((1 - var(--a114-dashboard-in,0)) * 3.2px))!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:44vh!important;
    right:clamp(-940px,-36vw,-660px)!important;
    width:clamp(1320px,76vw,1840px)!important;
    height:clamp(590px,66vh,860px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual figcaption{
    left:clamp(-282px,-10.4vw,-164px)!important;
  }
}

@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-sticky{
    grid-template-columns:minmax(380px,620px) minmax(0,1fr)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:44.5vh!important;
    right:clamp(-660px,-35vw,-430px)!important;
    width:clamp(1040px,76vw,1380px)!important;
    height:clamp(505px,65vh,740px)!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-sticky{
    min-height:660px!important;
    padding-top:38px!important;
    padding-bottom:38px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-story-head h2{
    font-size:clamp(54px,6.2vw,92px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:44vh!important;
    height:calc(100vh - 190px)!important;
  }
}

/* ========================================================================== 
   GPT A8.115 — How Spixor Works anti-flicker + paced scroll refinement
   - A8.114 is retired in JS; this block becomes the single visual contract.
   - Intro/steps remain mounted; opacity and transform vars do the full fade.
   - Visuals move slightly left and upward; visual cards move upward too.
   ========================================================================== */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]{
    --a115-how-in:1;
    --a115-intro-opacity:1;
    --a115-intro-out:0;
    --a115-steps-opacity:0;
    --a115-how-exit:0;
    --a115-dashboard-in:0;
    margin-top:clamp(-130px,-10svh,-72px)!important;
    padding-top:0!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    filter:none!important;
    background:transparent!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-track{
    min-height:clamp(3600px,545svh,5900px)!important;
    height:auto!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-sticky{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    height:100svh!important;
    min-height:720px!important;
    padding-top:clamp(46px,6.8vh,86px)!important;
    padding-bottom:clamp(46px,6.8vh,86px)!important;
    padding-left:max(clamp(30px,6vw,104px),calc((100vw - 1480px) / 2 + 42px))!important;
    padding-right:0!important;
    display:grid!important;
    grid-template-columns:minmax(440px,720px) minmax(0,1fr)!important;
    align-items:center!important;
    gap:clamp(28px,3.6vw,62px)!important;
    opacity:calc(1 - var(--a115-how-exit))!important;
    transform:translate3d(0,calc(var(--a115-how-exit) * -18px),0)!important;
    filter:none!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow .spx-why52-sticky{
    grid-template-columns:minmax(0,1fr)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-copy{
    width:min(720px,calc(100vw - 76px))!important;
    max-width:720px!important;
    min-height:clamp(500px,60vh,690px)!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    overflow:visible!important;
    z-index:26!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow .spx-why52-copy{
    width:min(1100px,calc(100vw - 128px))!important;
    max-width:1100px!important;
    min-height:clamp(470px,58vh,660px)!important;
    justify-content:center!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head{
    position:relative!important;
    width:min(1060px,calc(100vw - 128px))!important;
    max-width:1060px!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    opacity:var(--a115-intro-opacity)!important;
    visibility:visible!important;
    transform:translate3d(0,var(--a115-intro-y,0px),0) scale(calc(1 + (var(--a115-intro-out) * .072)))!important;
    filter:blur(calc(var(--a115-intro-out) * 4.2px))!important;
    overflow:visible!important;
    pointer-events:auto!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    will-change:opacity,transform,filter!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .spx-why52-story-head{
    max-height:none!important;
    padding:0!important;
    margin:0!important;
    visibility:visible!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head::before{
    content:""!important;
    position:absolute!important;
    left:clamp(-90px,-6vw,-34px)!important;
    top:clamp(-86px,-7vh,-38px)!important;
    width:min(780px,72vw)!important;
    height:clamp(300px,38vh,430px)!important;
    border-radius:999px!important;
    background:radial-gradient(circle at 34% 38%,rgba(24,213,255,.20),rgba(37,99,235,.085) 42%,transparent 72%)!important;
    filter:blur(18px)!important;
    opacity:.88!important;
    pointer-events:none!important;
    z-index:-1!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    bottom:clamp(-30px,-3vh,-12px)!important;
    width:min(520px,52vw)!important;
    height:1px!important;
    background:linear-gradient(90deg,rgba(107,232,255,.58),rgba(107,232,255,.16),transparent)!important;
    opacity:calc(.24 + var(--a115-intro-opacity) * .52)!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head .eyebrow{
    margin:0 0 20px!important;
    padding:9px 13px!important;
    border-radius:999px!important;
    background:rgba(24,213,255,.085)!important;
    border:1px solid rgba(107,232,255,.20)!important;
    color:#8eefff!important;
    box-shadow:0 18px 48px rgba(24,213,255,.08)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head h2{
    max-width:13.9ch!important;
    margin:0 0 22px!important;
    font-size:clamp(66px,7.1vw,118px)!important;
    line-height:.89!important;
    letter-spacing:-.082em!important;
    text-wrap:balance!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head p{
    max-width:840px!important;
    margin:0!important;
    font-size:clamp(18px,1.45vw,25px)!important;
    line-height:1.58!important;
    color:rgba(226,241,255,.80)!important;
    text-wrap:pretty!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step-nav{
    display:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step-stack{
    display:block!important;
    position:relative!important;
    min-height:clamp(450px,52vh,630px)!important;
    height:clamp(450px,52vh,630px)!important;
    margin:0!important;
    opacity:var(--a115-steps-opacity)!important;
    transform:translate3d(0,calc((1 - var(--a115-steps-opacity)) * 22px),0) scale(calc(.986 + (.014 * var(--a115-steps-opacity))))!important;
    overflow:visible!important;
    pointer-events:auto!important;
    will-change:opacity,transform!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]:not(.is-step-flow) .why52-step-stack{
    opacity:0!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:12px!important;
    padding:clamp(32px,3.4vw,52px)!important;
    border-radius:32px!important;
    border:1px solid rgba(121,236,255,.22)!important;
    background:
      radial-gradient(520px 260px at 12% 6%,rgba(24,213,255,.16),transparent 66%),
      linear-gradient(145deg,rgba(8,19,34,.88),rgba(5,10,22,.72) 54%,rgba(7,31,51,.58))!important;
    box-shadow:0 30px 92px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.085),0 0 0 1px rgba(255,255,255,.028)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    opacity:0!important;
    visibility:visible!important;
    transform:translate3d(0,10px,0) scale(.992)!important;
    filter:blur(.9px)!important;
    transition:none!important;
    pointer-events:none!important;
    overflow:hidden!important;
    will-change:opacity,transform,filter!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    border-radius:inherit!important;
    pointer-events:none!important;
    background:linear-gradient(116deg,rgba(255,255,255,.12),transparent 27%,transparent 74%,rgba(24,213,255,.10))!important;
    opacity:.70!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step::after{
    content:""!important;
    position:absolute!important;
    left:24px!important;
    right:24px!important;
    top:0!important;
    height:1px!important;
    background:linear-gradient(90deg,transparent,rgba(107,232,255,.64),transparent)!important;
    opacity:.78!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step > *{
    position:relative!important;
    z-index:1!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step h3{
    margin:4px 0 4px!important;
    font-size:clamp(31px,2.9vw,48px)!important;
    line-height:1.02!important;
    letter-spacing:-.05em!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step p{
    max-width:650px!important;
    font-size:clamp(15px,1.04vw,18px)!important;
    line-height:1.6!important;
    color:rgba(226,241,255,.78)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-stage{
    min-height:clamp(545px,66vh,780px)!important;
    height:clamp(545px,66vh,780px)!important;
    opacity:var(--a115-steps-opacity)!important;
    visibility:visible!important;
    transform:none!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]:not(.is-step-flow) .spx-why52-stage,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow .spx-why52-stage{
    opacity:0!important;
    visibility:hidden!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    position:fixed!important;
    top:41.8vh!important;
    right:clamp(-660px,-30vw,-410px)!important;
    left:auto!important;
    bottom:auto!important;
    width:clamp(1120px,75vw,1640px)!important;
    height:clamp(540px,67vh,805px)!important;
    transform:translate3d(0,-50%,0)!important;
    z-index:14!important;
    opacity:calc(var(--a115-steps-opacity) * (1 - var(--a115-how-exit)))!important;
    visibility:visible!important;
    pointer-events:none!important;
    contain:layout style!important;
    overflow:visible!important;
    will-change:opacity!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visual{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:0!important;
    visibility:visible!important;
    pointer-events:none!important;
    transform:scale(.994)!important;
    filter:blur(.72px)!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    will-change:opacity,filter,transform!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport .why52-visual img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:left center!important;
    transform:none!important;
    transition:none!important;
    border-radius:24px 0 0 24px!important;
    box-shadow:-34px 44px 112px rgba(0,0,0,.30)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption{
    left:clamp(-190px,-8.2vw,-104px)!important;
    right:auto!important;
    bottom:clamp(92px,11vh,142px)!important;
    max-width:min(446px,calc(100vw - 92px))!important;
    padding:clamp(17px,1.7vw,25px) clamp(20px,2vw,30px)!important;
    border-radius:10px 24px 24px 10px!important;
    background:linear-gradient(145deg,rgba(4,12,24,.86),rgba(3,8,18,.74))!important;
    border:1px solid rgba(116,232,255,.20)!important;
    box-shadow:0 28px 74px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.07)!important;
    backdrop-filter:blur(13px)!important;
    -webkit-backdrop-filter:blur(13px)!important;
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  html.spx-a115-what-how body.spx-public .spx-v26-explain,
  html.spx-a115-what-how body.spx-public .spx-v26-what-crisp-layer{
    opacity:calc(1 - var(--a115-how-in,0))!important;
    filter:blur(calc(var(--a115-how-in,0) * 2px))!important;
    transition:none!important;
  }

  html.spx-a115-how-exit body.spx-public #dashboard.spx-dashboard-command-v63{
    opacity:var(--a115-dashboard-in,0)!important;
    transform:translate3d(0,calc((1 - var(--a115-dashboard-in,0)) * 22px),0)!important;
    filter:blur(calc((1 - var(--a115-dashboard-in,0)) * 2.8px))!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:41.4vh!important;
    right:clamp(-790px,-31.5vw,-560px)!important;
    width:clamp(1300px,75vw,1820px)!important;
    height:clamp(600px,67vh,865px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption{
    left:clamp(-238px,-8.8vw,-132px)!important;
    bottom:clamp(108px,12vh,160px)!important;
  }
}

@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-sticky{
    grid-template-columns:minmax(380px,620px) minmax(0,1fr)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:42vh!important;
    right:clamp(-540px,-30vw,-345px)!important;
    width:clamp(1010px,75vw,1360px)!important;
    height:clamp(510px,66vh,750px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption{
    bottom:clamp(84px,10vh,128px)!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-sticky{
    min-height:660px!important;
    padding-top:38px!important;
    padding-bottom:38px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head h2{
    font-size:clamp(54px,6.2vw,92px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:40.8vh!important;
    height:calc(100vh - 180px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption{
    bottom:clamp(66px,9vh,104px)!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-track{
    min-height:auto!important;
  }
}


/* =========================================================
   GPT A8.116 — How intro/step vertical rhythm correction
   Keeps A8.115 no-flicker/crossfade owner, but fixes the
   vertical staging: intro lower/stabler, step card higher.
   ========================================================= */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-sticky{
    top:0!important;
    align-items:center!important;
    padding-top:clamp(58px,7.8vh,104px)!important;
    padding-bottom:clamp(42px,6.2vh,82px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow .spx-why52-copy{
    min-height:clamp(430px,53vh,610px)!important;
    justify-content:center!important;
    transform:translate3d(0,clamp(34px,5.2vh,66px),0)!important;
    will-change:transform!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head{
    max-width:min(1120px,calc(100vw - 128px))!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .spx-why52-copy{
    min-height:clamp(410px,48vh,580px)!important;
    justify-content:flex-start!important;
    transform:translate3d(0,clamp(-96px,-8.6vh,-58px),0)!important;
    will-change:transform!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .why52-step-stack{
    min-height:clamp(405px,47vh,570px)!important;
    height:clamp(405px,47vh,570px)!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow .spx-why52-copy{
    transform:translate3d(0,clamp(44px,5.6vh,78px),0)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .spx-why52-copy{
    transform:translate3d(0,clamp(-108px,-9vh,-70px),0)!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow .spx-why52-copy{
    transform:translate3d(0,clamp(20px,3.8vh,42px),0)!important;
    min-height:clamp(380px,50vh,510px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .spx-why52-copy{
    transform:translate3d(0,clamp(-74px,-8vh,-46px),0)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .why52-step-stack{
    min-height:clamp(360px,45vh,500px)!important;
    height:clamp(360px,45vh,500px)!important;
  }
}

/* =========================================================
   GPT A8.117 — How intro sticky drift + visual vertical nudge
   Keeps the good A8.116 rhythm, but prevents the intro headline
   from creeping upward during the first sticky scroll phase.
   Also nudges the right screenshots slightly lower again.
   ========================================================= */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow.is-step-flow .spx-why52-copy{
    min-height:clamp(430px,53vh,610px)!important;
    justify-content:center!important;
    transform:translate3d(0,clamp(34px,5.2vh,66px),0)!important;
    will-change:transform!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:42.6vh!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow.is-step-flow .spx-why52-copy{
    transform:translate3d(0,clamp(44px,5.6vh,78px),0)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:42.2vh!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow.is-step-flow .spx-why52-copy{
    transform:translate3d(0,clamp(20px,3.8vh,42px),0)!important;
    min-height:clamp(380px,50vh,510px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:42.8vh!important;
  }
}

/* =========================================================
   GPT A8.121 — safe How intro center lock
   ---------------------------------------------------------
   Restores the visible A8.119 How section and fixes the remaining
   intro drift by fixing the real intro element to the viewport only
   while it is still visible. No cloned/duplicate overlay is used.
   ========================================================= */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head{
    will-change:opacity,transform,filter!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .spx-why52-copy{
    justify-content:flex-start!important;
  }
}

/* =========================================================
   Homepage cleanup foundation
   ---------------------------------------------------------
   One visual language and one controller contract per section.
   Keeps existing images/screenshots; removes legacy wash/blur
   leftovers without introducing clone/bridge sections.
   ========================================================= */
:root{
  --spx-public-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

html body.spx-public,
html body.spx-public :where(h1,h2,h3,h4,h5,h6,p,a,button,input,textarea,select,label,span,li,strong,b,small,em):not(.spx-fa):not(.fa):not([class*="fa-"]){
  font-family:var(--spx-public-font)!important;
}

html body.spx-public{
  text-rendering:optimizeLegibility!important;
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
}

html body.spx-public .nav-group>a::after{content:none!important;display:none!important;}
html body.spx-public .spx-v26-bottom-fade,
html body.spx-public .spx-why52-hero-echo,
html body.spx-public .spx-how-handoff-overlay,
html body.spx-public .spx-a898-how-bridge{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

html.spx-a115-what-how body.spx-public .spx-v26-explain,
html.spx-a115-what-how body.spx-public .spx-v26-what-crisp-layer,
html.spx-a115-how-exit body.spx-public #dashboard.spx-dashboard-command-v63{
  filter:none!important;
  -webkit-filter:none!important;
}

@media (min-width:981px){
  html body.spx-public #dashboard.spx-dashboard-command-v63{
    min-height:clamp(2700px,365vh,3900px)!important;
    background:transparent!important;
    filter:none!important;
    -webkit-filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{
    width:min(calc(700px + var(--dash-focus,0) * 650px), 92vw)!important;
    height:min(calc(410px + var(--dash-focus,0) * 355px), 78vh)!important;
    margin-left:calc((1 - var(--dash-focus,0)) * -29vw)!important;
    background:#07101f!important;
  }

  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame img,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-fade-ghost{
    filter:none!important;
    object-fit:cover!important;
    object-position:center top!important;
  }

  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > .eyebrow,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > h2,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{
    margin-right:clamp(34px,8vw,150px)!important;
    max-width:450px!important;
  }

  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{
    width:min(370px,calc(100vw - 56px))!important;
    padding:20px 22px!important;
    border-radius:24px!important;
    border-color:rgba(126,231,255,.20)!important;
    background:linear-gradient(145deg,rgba(5,13,27,.86),rgba(8,20,38,.72))!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}

html body.spx-public .spx-export-section-v61{
  box-shadow:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

html body.spx-public .spx-export-section-v61 .spx-section-kicker{
  max-width:900px!important;
}

html body.spx-public .spx-export-grid{
  gap:clamp(16px,1.8vw,24px)!important;
}

html body.spx-public .spx-export-card{
  min-height:0!important;
  padding:clamp(22px,2vw,30px)!important;
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
}

html body.spx-public .spx-export-status{
  display:inline-flex!important;
  width:max-content!important;
  align-items:center!important;
  border-radius:999px!important;
  border:1px solid rgba(126,231,255,.18)!important;
  background:rgba(126,231,255,.08)!important;
  color:rgba(210,247,255,.86)!important;
  font-size:12px!important;
  font-weight:850!important;
  padding:6px 10px!important;
}

html body.spx-public .spx-export-card h3{margin-top:2px!important;}
html body.spx-public .spx-export-card p{font-size:15px!important;line-height:1.58!important;}
html body.spx-public .spx-export-icon{width:54px!important;height:54px!important;}
html body.spx-public .spx-export-card:hover .spx-export-icon,
html body.spx-public .spx-export-card:focus-within .spx-export-icon{transform:translateY(-2px) scale(1.03)!important;}

html body.spx-public .spx-price-card{
  min-height:auto!important;
  padding:clamp(22px,2.2vw,32px)!important;
  gap:13px!important;
}

html body.spx-public .spx-price-card ul{gap:8px!important;margin:4px 0 10px!important;}
html body.spx-public .spx-price-card p{line-height:1.55!important;}
html body.spx-public .spx-hp-field{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}

html body.spx-public .spx-orbit-notify input:not(.spx-hp-field):focus{
  outline:0!important;
  border-color:rgba(126,231,255,.42)!important;
  box-shadow:0 0 0 4px rgba(24,201,245,.12)!important;
}

html body.spx-public .spx-orbit-notify[data-state="success"] small{color:#8ef5bd!important;}
html body.spx-public .spx-orbit-notify[data-state="error"] small{color:#ffb4b4!important;}
html body.spx-public .spx-orbit-notify button[disabled]{opacity:.62!important;cursor:wait!important;}

html body.spx-public #roadmap.spx-alpha-story-section{
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:
    radial-gradient(720px 360px at 8% 8%,rgba(245,158,11,.08),transparent 72%),
    linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018))!important;
}

html body.spx-public #roadmap.spx-alpha-story-section .spx-summary-panel h2{
  font-size:clamp(42px,5.8vw,86px)!important;
  line-height:.98!important;
  letter-spacing:-.065em!important;
}

html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-feedback-panel{
  background:linear-gradient(145deg,rgba(8,18,34,.74),rgba(5,12,25,.58))!important;
  border-color:rgba(218,236,255,.13)!important;
}

html body.spx-public .spx-footer-v3{
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

html body.spx-public .spx-footer-v3 .spx-footer-col a{
  position:relative!important;
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  color:rgba(226,241,255,.72)!important;
  transition:color .22s var(--ease),transform .22s var(--ease),text-shadow .22s var(--ease)!important;
}

html body.spx-public .spx-footer-v3 .spx-footer-col a::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:100%!important;
  bottom:-3px!important;
  height:1px!important;
  background:linear-gradient(90deg,#7ee7ff,transparent)!important;
  transition:right .22s var(--ease)!important;
}

html body.spx-public .spx-footer-v3 .spx-footer-col a:hover,
html body.spx-public .spx-footer-v3 .spx-footer-col a:focus-visible{
  color:#f4fbff!important;
  transform:translateX(3px)!important;
  text-shadow:0 0 18px rgba(126,231,255,.20)!important;
}

html body.spx-public .spx-footer-v3 .spx-footer-col a:hover::after,
html body.spx-public .spx-footer-v3 .spx-footer-col a:focus-visible::after{
  right:0!important;
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]{
    padding-top:48px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head h2{
    font-size:clamp(38px,11vw,60px)!important;
    line-height:.98!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step{
    position:relative!important;
    padding:22px!important;
    margin-bottom:14px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img{
    object-fit:contain!important;
    background:#06101f!important;
  }
  html body.spx-public .spx-export-grid,
  html body.spx-public #pricing .spx-price-grid,
  html body.spx-public .spx-footer-shell,
  html body.spx-public .spx-footer-columns{
    grid-template-columns:1fr!important;
  }
}

/* =========================================================
   How visual lane correction
   ---------------------------------------------------------
   Keep the existing open/full-bleed How visuals. This only
   restores the unboxed screenshot lane and nudges it lower.
   ========================================================= */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-stage{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:calc(42.6vh + 42px)!important;
    right:clamp(-660px,-30vw,-410px)!important;
    width:clamp(1120px,75vw,1640px)!important;
    height:clamp(540px,67vh,805px)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visual{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport .why52-visual img{
    object-fit:cover!important;
    object-position:left center!important;
    background:transparent!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption{
    left:clamp(-190px,-8.2vw,-104px)!important;
    bottom:clamp(92px,11vh,142px)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:calc(42.2vh + 42px)!important;
    right:clamp(-790px,-31.5vw,-560px)!important;
    width:clamp(1300px,75vw,1820px)!important;
    height:clamp(600px,67vh,865px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption{
    left:clamp(-238px,-8.8vw,-132px)!important;
    bottom:clamp(108px,12vh,160px)!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:calc(42.8vh + 30px)!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-stage,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
}


/* =========================================================
   A8.123 GPT repair pass — stable public homepage foundation
   ---------------------------------------------------------
   This block intentionally avoids wrapping How screenshots in
   cards/frames. It only corrects choreography, vertical rhythm,
   blur leaks and polished section affordances after the Codex
   partial run.
   ========================================================= */
html body.spx-public .spx-v26-bottom-fade,
html body.spx-public .spx-v26-bottom-fade::before,
html body.spx-public .spx-v26-bottom-fade::after{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}
html.spx-hero-story-active body.spx-public #why-spixor.spx-how-v63,
html body.spx-public #why-spixor.spx-how-v63{
  filter:none!important;
  -webkit-filter:none!important;
}
html.spx-a115-what-how body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
  opacity:var(--a115-intro-opacity,1)!important;
}
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]{
    --spx-how-card-pad:clamp(30px,3vw,46px);
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-sticky{
    align-items:center!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .spx-why52-copy{
    padding-top:clamp(14px,3vh,34px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step-stack{
    min-height:clamp(360px,44vh,520px)!important;
    overflow:visible!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step{
    min-height:0!important;
    padding:var(--spx-how-card-pad)!important;
    overflow:visible!important;
    border-radius:30px!important;
    border:1px solid rgba(126,231,255,.16)!important;
    background:
      radial-gradient(260px 160px at 100% 0%,rgba(126,231,255,.10),transparent 70%),
      linear-gradient(145deg,rgba(7,16,31,.74),rgba(7,14,27,.48))!important;
    box-shadow:0 24px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    border-radius:inherit!important;
    pointer-events:none!important;
    background:
      linear-gradient(135deg,rgba(126,231,255,.45),transparent 18%) top left/96px 96px no-repeat,
      linear-gradient(315deg,rgba(126,231,255,.20),transparent 16%) bottom right/120px 120px no-repeat!important;
    opacity:.38!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step-number{
    position:absolute!important;
    top:-16px!important;
    left:clamp(24px,2.3vw,34px)!important;
    width:56px!important;
    height:56px!important;
    border-radius:18px 18px 18px 6px!important;
    display:grid!important;
    place-items:center!important;
    color:#06101f!important;
    background:linear-gradient(135deg,#9ff2ff,#67e8f9 52%,#d6fbff)!important;
    border:1px solid rgba(255,255,255,.56)!important;
    box-shadow:0 18px 44px rgba(24,201,245,.20)!important;
    font-weight:1000!important;
    letter-spacing:.04em!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step h3{
    margin-top:10px!important;
    font-size:clamp(31px,2.75vw,48px)!important;
    letter-spacing:-.055em!important;
    line-height:1.02!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step p,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step li{
    line-height:1.65!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-stage,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visuals,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
    outline:0!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    /* Only vertical correction: keep the open/full-bleed lane, but drop it down. */
    top:calc(43.8vh + 58px)!important;
    right:clamp(-640px,-29vw,-390px)!important;
    width:clamp(1140px,76vw,1660px)!important;
    height:clamp(560px,67vh,805px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img{
    border-radius:22px 0 0 22px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:0 34px 90px rgba(0,0,0,.32)!important;
    object-fit:cover!important;
    object-position:left center!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption{
    left:clamp(-198px,-8vw,-116px)!important;
    bottom:clamp(86px,10vh,134px)!important;
    width:min(360px,32vw)!important;
    padding:0 0 0 18px!important;
    color:rgba(235,249,255,.94)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card::before,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:2px!important;
    bottom:2px!important;
    width:2px!important;
    border-radius:99px!important;
    background:linear-gradient(180deg,#9ff2ff,rgba(126,231,255,.12))!important;
    box-shadow:0 0 22px rgba(126,231,255,.35)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card b{
    display:block!important;
    font-size:clamp(22px,1.8vw,34px)!important;
    line-height:1.05!important;
    letter-spacing:-.045em!important;
    text-shadow:0 18px 36px rgba(0,0,0,.42)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card p{
    max-width:330px!important;
    color:rgba(226,241,255,.78)!important;
    text-shadow:0 12px 26px rgba(0,0,0,.45)!important;
  }
}
@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:calc(43.6vh + 64px)!important;
    right:clamp(-780px,-31vw,-540px)!important;
    width:clamp(1320px,76vw,1840px)!important;
    height:clamp(620px,67vh,880px)!important;
  }
}
@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{top:calc(43vh + 38px)!important;}
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step{padding:28px 32px!important;}
}

html body.spx-public #dashboard.spx-dashboard-command-v63,
html body.spx-public .spx-export-section-v61,
html body.spx-public #pricing.spx-pricing-section-v61,
html body.spx-public #roadmap.spx-alpha-story-section{
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63{
  --dash-progress:0;
  --dash-focus:0;
  --dash-cursor-x:58%;
  --dash-cursor-y:68%;
  --dash-cursor-on:0;
  min-height:clamp(2100px,245vh,2900px)!important;
  position:relative!important;
  isolation:isolate!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{
  will-change:width,height,transform,border-radius!important;
  transition:none!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor{
  opacity:clamp(0,var(--dash-cursor-on,0),1)!important;
  left:var(--dash-cursor-x)!important;
  top:var(--dash-cursor-y)!important;
  transform:translate(-10px,-8px) scale(calc(.92 + var(--dash-cursor-on,0) * .08))!important;
  transition:left .48s cubic-bezier(.2,.8,.2,1),top .48s cubic-bezier(.2,.8,.2,1),opacity .24s ease,transform .24s ease!important;
  z-index:7!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-click="1"] .spx-dash-cursor::after{
  content:""!important;
  position:absolute!important;
  left:7px!important;
  top:7px!important;
  width:42px!important;
  height:42px!important;
  border-radius:999px!important;
  border:1px solid rgba(126,231,255,.65)!important;
  animation:spxDashClickPulse .62s ease-out both!important;
}
@keyframes spxDashClickPulse{from{opacity:.95;transform:translate(-50%,-50%) scale(.45)}to{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-hotspot,
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout{
  opacity:0!important;
  transform:translate3d(0,8px,0)!important;
  transition:opacity .42s ease,transform .42s ease!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="overview"] [data-dashboard-hotspot="overview"],
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="projects"] [data-dashboard-hotspot="projects"],
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="files"] [data-dashboard-hotspot="files"],
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="projects"] [data-dashboard-callout="projects"],
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="files"] [data-dashboard-callout="files"]{
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{
  opacity:0!important;
  transform:translate3d(0,12px,0)!important;
  pointer-events:none!important;
  transition:opacity .55s ease,transform .55s ease!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel.is-active{
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
  pointer-events:auto!important;
}
html body.spx-public .spx-dash-fade-ghost{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center top!important;
  z-index:2!important;
  pointer-events:none!important;
  opacity:1!important;
  transition:opacity .86s ease!important;
}
html body.spx-public .spx-dash-fade-ghost.is-fading{opacity:0!important;}

html body.spx-public .spx-export-section-v61{position:relative!important;overflow:hidden!important;}
html body.spx-public .spx-export-section-v61::before{
  content:""!important;position:absolute!important;inset:8% auto auto 50%!important;width:min(900px,80vw)!important;height:340px!important;transform:translateX(-50%)!important;background:radial-gradient(closest-side,rgba(126,231,255,.10),transparent 72%)!important;pointer-events:none!important;opacity:var(--export-glow,.75)!important;
}
html body.spx-public .spx-export-card{position:relative!important;overflow:hidden!important;transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease),opacity .28s ease!important;}
html body.spx-public .spx-export-card::after{content:""!important;position:absolute!important;left:24px!important;right:24px!important;bottom:0!important;height:1px!important;background:linear-gradient(90deg,transparent,rgba(126,231,255,.42),transparent)!important;opacity:0!important;transition:opacity .25s ease!important;}
html body.spx-public .spx-export-card.is-active,html body.spx-public .spx-export-card:hover,html body.spx-public .spx-export-card:focus-within{transform:translateY(-5px)!important;border-color:rgba(126,231,255,.28)!important;box-shadow:0 26px 76px rgba(0,0,0,.22),0 0 0 1px rgba(126,231,255,.08)!important;}
html body.spx-public .spx-export-card.is-active::after,html body.spx-public .spx-export-card:hover::after{opacity:1!important;}
html body.spx-public .spx-export-flowline span{transition:background .24s ease,border-color .24s ease,color .24s ease,transform .24s ease!important;}
html body.spx-public .spx-export-flowline span.is-active{transform:translateY(-2px)!important;background:rgba(126,231,255,.12)!important;border-color:rgba(126,231,255,.34)!important;color:#f5fdff!important;}

html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card{min-height:0!important;}
html body.spx-public .spx-orbit-notify small[data-orbit-notify-status]{display:inline-flex!important;width:max-content!important;max-width:100%!important;align-items:center!important;gap:8px!important;margin-top:8px!important;padding:8px 12px!important;border-radius:999px!important;border:1px solid rgba(218,236,255,.12)!important;background:rgba(255,255,255,.045)!important;color:rgba(226,241,255,.72)!important;line-height:1.25!important;transition:background .24s ease,border-color .24s ease,color .24s ease!important;}
html body.spx-public .spx-orbit-notify[data-state="success"] small[data-orbit-notify-status]{background:rgba(69,230,168,.12)!important;border-color:rgba(69,230,168,.32)!important;color:#b8ffd7!important;}
html body.spx-public .spx-orbit-notify[data-state="error"] small[data-orbit-notify-status]{background:rgba(255,93,93,.10)!important;border-color:rgba(255,93,93,.32)!important;color:#ffd0d0!important;}

html body.spx-public #roadmap.spx-alpha-story-section{overflow:hidden!important;position:relative!important;}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list button,
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list span{cursor:pointer!important;transition:transform .22s ease,border-color .22s ease,background .22s ease,color .22s ease!important;}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list button:hover,
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list button.is-active{transform:translateY(-2px)!important;border-color:rgba(126,231,255,.30)!important;background:rgba(126,231,255,.10)!important;color:#f6fdff!important;}

html body.spx-public .spx-product-mega,
html body.spx-public .resources-mega{position:relative!important;}
html body.spx-public .spx-product-mega::after,
html body.spx-public .resources-mega::after{content:""!important;position:absolute!important;left:-18px!important;right:-18px!important;top:100%!important;height:18px!important;}
html body.spx-public .spx-product-mega .mega-menu,
html body.spx-public .resources-mega .mega-menu{margin-top:8px!important;transition:opacity .2s ease,transform .2s ease,visibility .2s step-end!important;}
html body.spx-public .nav-feature-link:hover{transform:translateY(-2px)!important;border-color:rgba(126,231,255,.26)!important;box-shadow:0 16px 44px rgba(0,0,0,.20)!important;}
html body.spx-public .nav-toggle span{transition:transform .22s ease,opacity .18s ease!important;}
html body.spx-public .site-header.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)!important;}
html body.spx-public .site-header.is-open .nav-toggle span:nth-child(2){opacity:0!important;}
html body.spx-public .site-header.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important;}
@media (max-width:980px){
  html body.spx-public .site-header.spx-nav-v26 .nav-menu{display:none!important;opacity:1!important;visibility:visible!important;transform:none!important;position:relative!important;left:auto!important;top:auto!important;width:100%!important;margin:8px 0!important;}
  html body.spx-public .site-header.spx-nav-v26 .nav-group.is-mobile-open .nav-menu{display:block!important;}
  html body.spx-public .site-header.spx-nav-v26 .nav-group>a{width:100%!important;justify-content:space-between!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63{min-height:auto!important;}
}
html[data-theme="light"] body.spx-public .spx-export-card,
html[data-theme="light"] body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step,
html[data-theme="light"] body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-feedback-panel,
html[data-theme="light"] body.spx-public .spx-price-card{
  color:#122033!important;
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(241,247,255,.70))!important;
  border-color:rgba(40,93,130,.16)!important;
}
html[data-theme="light"] body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step p,
html[data-theme="light"] body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step li,
html[data-theme="light"] body.spx-public .spx-export-card p,
html[data-theme="light"] body.spx-public .spx-price-card p,
html[data-theme="light"] body.spx-public .spx-price-card li{color:rgba(18,32,51,.78)!important;}

/* ========================================================================
   A8.124 — visible public flow rework from Dashboard Command Center onward
   ------------------------------------------------------------------------
   This pass deliberately starts at Dashboard Command Center. It gives the
   section a real left-image/right-copy intro, a controlled fullscreen grow,
   animated cursor/click states, a clearer Export workflow, stronger Alpha
   interaction and a more professional footer without reintroducing blur/waas.
   ======================================================================== */
html body.spx-public #dashboard.spx-dashboard-command-v63,
html body.spx-public .spx-export-section-v61,
html body.spx-public #pricing.spx-pricing-section-v61,
html body.spx-public #roadmap.spx-alpha-story-section,
html body.spx-public .site-footer{
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
@media (min-width:981px){
  html body.spx-public #dashboard.spx-dashboard-command-v63{
    --dash-focus:0;
    --dash-copy-opacity:1;
    --dash-left-start:clamp(30px,5.2vw,96px);
    --dash-right-start:clamp(520px,42vw,760px);
    --dash-top-start:clamp(98px,12vh,138px);
    --dash-bottom-start:clamp(78px,9vh,118px);
    width:100vw!important;
    max-width:none!important;
    margin:0 calc(50% - 50vw)!important;
    min-height:clamp(6000px,820svh,9600px)!important;
    padding:0!important;
    position:relative!important;
    display:block!important;
    overflow:clip!important;
    isolation:isolate!important;
    background:
      radial-gradient(1100px 680px at 10% 28%,rgba(20,190,230,.16),transparent 66%),
      radial-gradient(980px 620px at 84% 64%,rgba(38,102,255,.12),transparent 68%),
      linear-gradient(180deg,rgba(3,7,16,0),rgba(4,9,20,.70) 18%,rgba(4,8,18,.86) 72%,rgba(3,7,16,0))!important;
    border:0!important;
    box-shadow:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    background:
      linear-gradient(90deg,rgba(126,231,255,.07) 1px,transparent 1px),
      linear-gradient(180deg,rgba(126,231,255,.045) 1px,transparent 1px)!important;
    background-size:72px 72px!important;
    mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%)!important;
    opacity:.22!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-visual{
    position:sticky!important;
    top:0!important;
    height:100svh!important;
    width:100vw!important;
    margin:0!important;
    z-index:1!important;
    overflow:hidden!important;
    display:block!important;
    pointer-events:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{
    position:absolute!important;
    left:calc(var(--dash-left-start) * (1 - var(--dash-focus,0)))!important;
    right:calc(var(--dash-right-start) * (1 - var(--dash-focus,0)))!important;
    top:calc(var(--dash-top-start) * (1 - var(--dash-focus,0)) + 10px * var(--dash-focus,0))!important;
    bottom:calc(var(--dash-bottom-start) * (1 - var(--dash-focus,0)) + 12px * var(--dash-focus,0))!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    max-width:none!important;
    min-width:0!important;
    transform:translate3d(calc((1 - var(--dash-intro-in,1)) * -62px),0,0) scale(calc(.965 + var(--dash-intro-in,1) * .035))!important;
    transform-origin:left center!important;
    border-radius:calc(34px * (1 - var(--dash-focus,0)) + 15px * var(--dash-focus,0))!important;
    overflow:hidden!important;
    isolation:isolate!important;
    border:1px solid rgba(126,231,255,calc(.26 - var(--dash-focus,0) * .10))!important;
    background:#050b17!important;
    box-shadow:0 42px 130px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.035) inset!important;
    will-change:left,right,top,bottom,border-radius,transform!important;
    transition:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:4!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 18%,transparent 78%,rgba(0,0,0,.22))!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame::after{
    content:none!important;
    display:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame img,
  html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-image],
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-fade-ghost{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center top!important;
    filter:none!important;
    -webkit-filter:none!important;
    transform:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{
    position:sticky!important;
    top:clamp(112px,13vh,152px)!important;
    z-index:6!important;
    width:min(470px,32vw)!important;
    margin:-100svh clamp(32px,6vw,112px) 0 auto!important;
    min-height:auto!important;
    padding:clamp(24px,2.7vw,34px)!important;
    transform:translate3d(calc((1 - var(--dash-intro-in,1)) * 34px),0,0)!important;
    opacity:var(--dash-copy-opacity,1)!important;
    pointer-events:auto!important;
    border-radius:30px!important;
    background:
      radial-gradient(circle at 16% 0%,rgba(126,231,255,.14),transparent 38%),
      linear-gradient(145deg,rgba(8,18,36,.84),rgba(5,10,22,.68))!important;
    border:1px solid rgba(126,231,255,.18)!important;
    box-shadow:0 32px 110px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08)!important;
    backdrop-filter:blur(16px) saturate(145%)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy h2{
    font-size:clamp(36px,3.75vw,62px)!important;
    line-height:.95!important;
    letter-spacing:-.055em!important;
    margin:10px 0 14px!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{
    font-size:15.5px!important;
    line-height:1.65!important;
    color:rgba(232,241,255,.76)!important;
    max-width:46ch!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs{
    display:grid!important;
    gap:10px!important;
    margin:20px 0 18px!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    justify-content:flex-start!important;
    padding:12px 14px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.045)!important;
    border:1px solid rgba(255,255,255,.09)!important;
    color:rgba(232,241,255,.70)!important;
    overflow:hidden!important;
    transition:transform .25s ease,border-color .25s ease,background .25s ease,color .25s ease!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button::before{
    content:""!important;
    position:absolute!important;
    inset:0 auto 0 0!important;
    width:3px!important;
    background:linear-gradient(180deg,#7ee7ff,#9ad0ff)!important;
    opacity:0!important;
    transition:opacity .25s ease!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button.is-active{
    transform:translateX(6px)!important;
    border-color:rgba(126,231,255,.34)!important;
    background:rgba(126,231,255,.12)!important;
    color:#f5fdff!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button.is-active::before{opacity:1!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{
    display:block!important;
    min-height:136px!important;
    padding:18px!important;
    border-radius:22px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.035))!important;
    opacity:0!important;
    transform:translate3d(0,14px,0) scale(.985)!important;
    pointer-events:none!important;
    transition:opacity .54s ease,transform .54s cubic-bezier(.2,.8,.2,1)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel:not(.is-active){position:absolute!important;left:-9999px!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel.is-active{
    position:relative!important;
    left:auto!important;
    opacity:1!important;
    transform:translate3d(0,0,0) scale(1)!important;
    pointer-events:auto!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel span{
    color:#7ee7ff!important;
    font-size:12px!important;
    font-weight:800!important;
    text-transform:uppercase!important;
    letter-spacing:.12em!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel h3{margin:8px 0 8px!important;font-size:20px!important;line-height:1.1!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel p{margin:0!important;font-size:14px!important;line-height:1.55!important;color:rgba(232,241,255,.72)!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor{
    opacity:clamp(0,var(--dash-cursor-on,0),1)!important;
    left:var(--dash-cursor-x,58%)!important;
    top:var(--dash-cursor-y,68%)!important;
    width:34px!important;
    height:34px!important;
    z-index:12!important;
    clip-path:none!important;
    background:transparent!important;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))!important;
    transform:translate(-3px,-2px) rotate(-6deg) scale(calc(.92 + var(--dash-cursor-on,0) * .08))!important;
    transition:opacity .22s ease,transform .18s ease,filter .18s ease!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    clip-path:polygon(8% 0,92% 58%,54% 64%,39% 100%)!important;
    background:linear-gradient(135deg,#fff,#9eeaff)!important;
    border:1px solid rgba(5,20,32,.35)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-click="1"] .spx-dash-cursor{transform:translate(-3px,-2px) rotate(-6deg) scale(.86)!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-click="1"] .spx-dash-cursor{
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)) drop-shadow(0 0 18px rgba(126,231,255,.58))!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-click="1"] .spx-dash-cursor::after{
    content:""!important;
    position:absolute!important;
    left:5px!important;
    top:5px!important;
    width:64px!important;
    height:64px!important;
    border-radius:999px!important;
    border:1px solid rgba(126,231,255,.72)!important;
    background:rgba(126,231,255,.08)!important;
    animation:spxDashClickPulseA124 .82s ease-out infinite!important;
  }
  @keyframes spxDashClickPulseA124{
    0%{opacity:.92;transform:translate(-50%,-50%) scale(.36)}
    68%{opacity:.24;transform:translate(-50%,-50%) scale(1.48)}
    100%{opacity:.42;transform:translate(-50%,-50%) scale(.82)}
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-hotspot{
    z-index:10!important;
    opacity:0!important;
    transform:translate3d(0,0,0)!important;
    border:1px solid transparent!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    color:transparent!important;
    font-size:0!important;
    text-indent:-9999px!important;
    overflow:hidden!important;
    transition:opacity .36s ease,transform .36s ease!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout{
    z-index:11!important;
    width:min(510px,38vw)!important;
    max-width:none!important;
    padding:34px 36px!important;
    border-radius:30px!important;
    border:1px solid rgba(126,231,255,.66)!important;
    background:
      radial-gradient(circle at 16% 0%,rgba(126,231,255,.18),transparent 42%),
      linear-gradient(145deg,rgba(6,17,34,.96),rgba(5,10,22,.84))!important;
    box-shadow:0 42px 132px rgba(0,0,0,.56),0 0 96px rgba(126,231,255,.24),inset 0 1px 0 rgba(255,255,255,.17)!important;
    color:#effdff!important;
    opacity:0!important;
    transform:translate3d(0,12px,0) scale(.97)!important;
    pointer-events:none!important;
    overflow:hidden!important;
    transition:opacity .44s ease,transform .44s cubic-bezier(.2,.8,.2,1)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:20px!important;
    bottom:20px!important;
    width:4px!important;
    border-radius:0 999px 999px 0!important;
    background:linear-gradient(180deg,#7ee7ff,#5b8cff)!important;
    box-shadow:0 0 24px rgba(126,231,255,.46)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout::after{
    content:""!important;
    position:absolute!important;
    right:-1px!important;
    top:-1px!important;
    width:64px!important;
    height:64px!important;
    border-top:1px solid rgba(126,231,255,.58)!important;
    border-right:1px solid rgba(126,231,255,.58)!important;
    border-radius:0 28px 0 0!important;
    opacity:.88!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout b{display:block!important;font-size:24px!important;line-height:1.08!important;margin:0 0 14px!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout b::before{
    content:"Product tour"!important;
    display:block!important;
    width:max-content!important;
    margin:0 0 12px!important;
    padding:6px 10px!important;
    border-radius:999px!important;
    background:rgba(126,231,255,.12)!important;
    border:1px solid rgba(126,231,255,.24)!important;
    color:#7ee7ff!important;
    font-size:11px!important;
    line-height:1!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout small{display:block!important;font-size:17px!important;line-height:1.62!important;color:rgba(232,241,255,.92)!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .callout-home{left:clamp(34px,4vw,72px)!important;bottom:clamp(38px,7vh,80px)!important;top:auto!important;right:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .callout-projects{left:clamp(82px,9vw,156px)!important;top:clamp(104px,15vh,168px)!important;right:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .callout-files{left:clamp(340px,22vw,460px)!important;top:clamp(300px,36vh,430px)!important;right:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .callout-export{right:clamp(42px,5vw,96px)!important;bottom:clamp(44px,8vh,92px)!important;left:auto!important;top:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="overview"] [data-dashboard-callout="overview"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="projects"] [data-dashboard-callout="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="files"] [data-dashboard-callout="files"]{
    opacity:1!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-intent="projects"] [data-dashboard-hotspot="overview"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-intent="files"] [data-dashboard-hotspot="overview"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-intent="files"] [data-dashboard-hotspot="projects"]{
    opacity:0!important;
    transform:translate3d(0,10px,0) scale(.96)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="hover-projects"] [data-dashboard-hotspot="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="click-projects"] [data-dashboard-hotspot="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="hover-files"] [data-dashboard-hotspot="files"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="click-files"] [data-dashboard-hotspot="files"]{
    opacity:.38!important;
    border-color:rgba(126,231,255,.40)!important;
    background:linear-gradient(90deg,rgba(24,201,245,.28),rgba(24,201,245,.07))!important;
    box-shadow:inset 4px 0 0 rgba(24,201,245,.88),0 0 28px rgba(24,201,245,.15)!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63.is-dashboard-exiting .spx-dash-frame,
  html body.spx-public #dashboard.spx-dashboard-command-v63.is-dashboard-exiting .spx-dash-copy{opacity:calc(1 - var(--dash-exit,0))!important;}
}

html body.spx-public .spx-export-section-v61{
  width:min(1280px,calc(100% - 44px))!important;
  margin:clamp(80px,9vw,140px) auto!important;
  padding:clamp(28px,4vw,54px)!important;
  border-radius:36px!important;
  border:1px solid rgba(126,231,255,.13)!important;
  background:
    radial-gradient(circle at 12% 4%,rgba(126,231,255,.13),transparent 34%),
    radial-gradient(circle at 88% 22%,rgba(86,125,255,.11),transparent 42%),
    linear-gradient(145deg,rgba(7,15,30,.62),rgba(4,8,18,.38))!important;
  box-shadow:0 30px 120px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)!important;
  overflow:hidden!important;
  opacity:calc(.38 + var(--export-in,1) * .62)!important;
  transform:translate3d(0,calc((1 - var(--export-in,1)) * 34px),0)!important;
}
html body.spx-public .spx-export-explainer{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  margin:clamp(22px,3vw,34px) auto clamp(18px,2vw,26px)!important;
  max-width:920px!important;
}
html body.spx-public .spx-export-explainer span{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:14px 16px!important;
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.045)!important;
  color:rgba(232,241,255,.76)!important;
}
html body.spx-public .spx-export-explainer b{
  display:grid!important;
  place-items:center!important;
  width:32px!important;
  height:32px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,rgba(126,231,255,.22),rgba(92,123,255,.12))!important;
  color:#f7fdff!important;
}
html body.spx-public .spx-export-explainer small{font-size:13px!important;font-weight:700!important;letter-spacing:.01em!important;}
html body.spx-public .spx-export-flowline{
  width:min(760px,100%)!important;
  margin:0 auto clamp(24px,3vw,36px)!important;
}
html body.spx-public .spx-export-grid{gap:18px!important;align-items:stretch!important;}
html body.spx-public .spx-export-card{
  min-height:0!important;
  padding:clamp(22px,2.6vw,32px)!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.032))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  opacity:.76!important;
  transform:translate3d(0,0,0) scale(.985)!important;
}
html body.spx-public .spx-export-card.is-active,
html body.spx-public .spx-export-card:hover,
html body.spx-public .spx-export-card:focus-within{
  opacity:1!important;
  transform:translate3d(0,-8px,0) scale(1)!important;
  border-color:rgba(126,231,255,.32)!important;
  background:linear-gradient(180deg,rgba(126,231,255,.09),rgba(255,255,255,.04))!important;
  box-shadow:0 28px 90px rgba(0,0,0,.26),0 0 0 1px rgba(126,231,255,.08) inset!important;
}
html body.spx-public .spx-export-card h3{font-size:clamp(22px,2vw,30px)!important;letter-spacing:-.025em!important;}
html body.spx-public .spx-export-card p{font-size:15px!important;line-height:1.62!important;color:rgba(232,241,255,.74)!important;}
html body.spx-public .spx-export-card ul{margin-top:14px!important;padding-left:0!important;list-style:none!important;display:grid!important;gap:8px!important;}
html body.spx-public .spx-export-card li{position:relative!important;padding-left:20px!important;color:rgba(232,241,255,.70)!important;font-size:13.5px!important;}
html body.spx-public .spx-export-card li::before{content:""!important;position:absolute!important;left:0!important;top:.55em!important;width:7px!important;height:7px!important;border-radius:999px!important;background:#7ee7ff!important;box-shadow:0 0 14px rgba(126,231,255,.45)!important;}

html body.spx-public #pricing.spx-pricing-section-v61{
  opacity:calc(.32 + var(--pricing-in,1) * .68)!important;
  transform:translate3d(0,calc((1 - var(--pricing-in,1)) * 28px),0)!important;
}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card{
  padding:clamp(20px,2.2vw,28px)!important;
  min-height:0!important;
}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card strong{font-size:clamp(34px,3.6vw,52px)!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card ul{gap:7px!important;}
html body.spx-public .spx-orbit-notify small[data-orbit-notify-status]{white-space:normal!important;}

html body.spx-public #roadmap.spx-alpha-story-section{
  width:min(1240px,calc(100% - 44px))!important;
  margin:clamp(84px,9vw,140px) auto!important;
  padding:clamp(26px,4vw,48px)!important;
  border-radius:36px!important;
  border:1px solid rgba(126,231,255,.13)!important;
  background:
    radial-gradient(circle at 18% 8%,rgba(126,231,255,.12),transparent 36%),
    radial-gradient(circle at 82% 74%,rgba(94,112,255,.13),transparent 42%),
    linear-gradient(145deg,rgba(7,16,31,.62),rgba(4,8,18,.38))!important;
  box-shadow:0 30px 120px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)!important;
  opacity:calc(.35 + var(--alpha-in,1) * .65)!important;
  transform:translate3d(0,calc((1 - var(--alpha-in,1)) * 30px),0)!important;
}
html body.spx-public #roadmap.spx-alpha-story-section .spx-summary-panel,
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-feedback-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-feedback-panel{position:relative!important;overflow:hidden!important;}
html body.spx-public .spx-alpha-signal-orbit{
  position:absolute!important;
  right:18px!important;
  top:18px!important;
  width:86px!important;
  height:86px!important;
  border-radius:999px!important;
  border:1px solid rgba(126,231,255,.14)!important;
  opacity:.72!important;
  pointer-events:none!important;
}
html body.spx-public .spx-alpha-signal-orbit i{position:absolute!important;inset:12px!important;border-radius:999px!important;border:1px solid rgba(126,231,255,.16)!important;animation:spxAlphaOrbit 5s linear infinite!important;}
html body.spx-public .spx-alpha-signal-orbit i:nth-child(2){inset:24px!important;animation-duration:7s!important;animation-direction:reverse!important;}
html body.spx-public .spx-alpha-signal-orbit i:nth-child(3){inset:38px!important;background:#7ee7ff!important;box-shadow:0 0 22px rgba(126,231,255,.55)!important;}
@keyframes spxAlphaOrbit{to{transform:rotate(360deg)}}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list{display:flex!important;flex-wrap:wrap!important;gap:9px!important;}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list button,
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list span{
  border-radius:999px!important;
  padding:10px 13px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}

html body.spx-public .site-footer.spx-footer-v3{
  display:block!important;
  width:min(1280px,calc(100% - 44px))!important;
  margin:clamp(80px,9vw,140px) auto 28px!important;
  padding:0!important;
  border-radius:36px!important;
  background:
    radial-gradient(circle at 20% 0%,rgba(126,231,255,.11),transparent 36%),
    linear-gradient(145deg,rgba(7,16,31,.74),rgba(4,8,18,.55))!important;
  border:1px solid rgba(126,231,255,.13)!important;
  box-shadow:0 28px 110px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)!important;
  overflow:hidden!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-shell{
  padding:clamp(26px,4vw,48px)!important;
  display:grid!important;
  grid-template-columns:minmax(280px,.92fr) minmax(0,1.55fr)!important;
  gap:clamp(30px,5vw,72px)!important;
  align-items:start!important;
}
html body.spx-public .site-footer.spx-footer-v3 .footer-brand img{border-radius:999px!important;}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-columns{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(16px,2vw,28px)!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col strong{
  display:block!important;
  margin-bottom:12px!important;
  color:#f4fbff!important;
  letter-spacing:.02em!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:8px 0!important;
  color:rgba(232,241,255,.66)!important;
  text-decoration:none!important;
  transition:color .22s ease,transform .22s ease!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a::after{
  content:"→"!important;
  opacity:0!important;
  transform:translateX(-6px)!important;
  transition:opacity .22s ease,transform .22s ease!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:hover,
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:focus-visible{
  color:#f7fdff!important;
  transform:translateX(3px)!important;
  outline:none!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:hover::after,
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:focus-visible::after{opacity:1!important;transform:translateX(0)!important;}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-bottom{
  padding:18px clamp(26px,4vw,48px)!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.028)!important;
  display:flex!important;
  justify-content:space-between!important;
  gap:16px!important;
}
@media (max-width:980px){
  html body.spx-public #dashboard.spx-dashboard-command-v63{
    width:min(100% - 24px,1120px)!important;
    margin:60px auto!important;
    min-height:auto!important;
    border-radius:30px!important;
    overflow:hidden!important;
    z-index:80!important;
    isolation:isolate!important;
    padding:14px!important;
    background:
      radial-gradient(520px 300px at 20% 0%,rgba(126,231,255,.12),transparent 68%),
      linear-gradient(180deg,rgba(5,13,28,.96),rgba(5,12,24,.90))!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-visual,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{
    position:relative!important;
    top:auto!important;
    width:100%!important;
    height:auto!important;
    margin:0!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    aspect-ratio:16/10!important;
    border-radius:24px!important;
    z-index:2!important;
    background:#05101f!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{
    z-index:3!important;
    padding:22px!important;
    margin-top:16px!important;
    border-radius:24px!important;
    background:linear-gradient(145deg,rgba(8,18,36,.88),rgba(5,10,22,.72))!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-hotspot,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout{
    display:none!important;
  }
  html body.spx-public .spx-export-explainer,
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-shell,
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-columns{grid-template-columns:1fr!important;}
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-bottom{flex-direction:column!important;}
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63,
html[data-theme="light"] body.spx-public .spx-export-section-v61,
html[data-theme="light"] body.spx-public #roadmap.spx-alpha-story-section,
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3{
  background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(238,247,255,.72))!important;
  border-color:rgba(40,93,130,.16)!important;
  color:#122033!important;
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy,
html[data-theme="light"] body.spx-public #roadmap.spx-alpha-story-section .spx-summary-panel,
html[data-theme="light"] body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-feedback-panel,
html[data-theme="light"] body.spx-public .spx-export-card,
html[data-theme="light"] body.spx-public .spx-export-explainer span{
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(241,247,255,.72))!important;
  border-color:rgba(40,93,130,.16)!important;
  color:#122033!important;
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy p,
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel p,
html[data-theme="light"] body.spx-public .spx-export-card p,
html[data-theme="light"] body.spx-public .spx-export-card li,
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a{
  color:rgba(18,32,51,.76)!important;
}

/* =========================================================
   A8.124 repair QC
   Consolidates the public v124 flow without boxed How visuals,
   duplicate scroll owners, or global blur/wash layers.
   ========================================================= */
html body.spx-public .spx-v26-bottom-fade,
html body.spx-public .spx-v26-bottom-fade::before,
html body.spx-public .spx-v26-bottom-fade::after,
html body.spx-public .spx-why52-hero-echo,
html body.spx-public .spx-how-handoff-overlay,
html body.spx-public .spx-a898-how-bridge{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

html body.spx-public .spx-nav-v26 .nav-group-mega .mega-menu::before{
  display:none!important;
}
html body.spx-public .spx-product-mega .mega-menu,
html body.spx-public .resources-mega .mega-menu{
  top:calc(100% - 10px)!important;
  margin-top:0!important;
}
html body.spx-public .spx-product-mega::after,
html body.spx-public .resources-mega::after{
  top:calc(100% - 12px)!important;
  height:34px!important;
}
html body.spx-public .nav-feature-link,
html body.spx-public .spx-resource-list a{
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease,color .22s ease!important;
}

@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]{
    margin-top:-1px!important;
    border-top:0!important;
    background:transparent!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]::before,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]::after{
    display:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step{
    padding:clamp(34px,3vw,48px)!important;
    padding-top:clamp(42px,3.4vw,58px)!important;
    border-radius:30px!important;
    border:1px solid rgba(126,231,255,.20)!important;
    background:
      radial-gradient(300px 180px at 98% 0%,rgba(126,231,255,.12),transparent 68%),
      linear-gradient(145deg,rgba(8,18,34,.72),rgba(5,12,26,.44))!important;
    box-shadow:0 26px 82px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)!important;
    overflow:visible!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step::before{
    background:
      linear-gradient(135deg,rgba(126,231,255,.46),transparent 18%) top right/120px 120px no-repeat,
      linear-gradient(315deg,rgba(126,231,255,.15),transparent 16%) bottom left/110px 110px no-repeat!important;
    opacity:.46!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step-number{
    top:0!important;
    right:0!important;
    left:auto!important;
    width:74px!important;
    height:58px!important;
    border-radius:0 30px 0 22px!important;
    background:linear-gradient(135deg,#d6fbff,#67e8f9 55%,#7ee7ff)!important;
    color:#06101f!important;
    box-shadow:0 18px 48px rgba(24,201,245,.18)!important;
    letter-spacing:0!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step h3,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card b,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy h2,
  html body.spx-public .spx-section-kicker h2,
  html body.spx-public #roadmap.spx-alpha-story-section .spx-summary-panel h2{
    letter-spacing:0!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:calc(43.6vh + 56px)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-stage,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img{
    border-radius:24px 0 0 24px!important;
    box-shadow:0 34px 95px rgba(0,0,0,.30)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card{
    width:min(390px,32vw)!important;
    padding-left:20px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  html body.spx-public #dashboard.spx-dashboard-command-v63{
    background:
      radial-gradient(1100px 680px at 10% 28%,rgba(20,190,230,.12),transparent 66%),
      radial-gradient(980px 620px at 84% 64%,rgba(38,102,255,.09),transparent 68%),
      linear-gradient(180deg,rgba(3,7,16,0),rgba(4,9,20,.58) 20%,rgba(4,8,18,.70) 72%,rgba(3,7,16,0))!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-hotspot,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-hotspot{
    position:absolute!important;
    display:block!important;
    width:11.2%!important;
    min-width:0!important;
    height:3.6%!important;
    padding:0!important;
    border-radius:13px!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    text-indent:-9999px!important;
    border:1px solid transparent!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .hotspot-home{left:var(--dash-hotspot-overview-left,1.7%)!important;top:var(--dash-hotspot-overview-top,37.9%)!important;width:var(--dash-hotspot-overview-width,11.2%)!important;height:var(--dash-hotspot-overview-height,3.6%)!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .hotspot-projects{left:var(--dash-hotspot-projects-left,1.7%)!important;top:var(--dash-hotspot-projects-top,41.2%)!important;width:var(--dash-hotspot-projects-width,11.2%)!important;height:var(--dash-hotspot-projects-height,3.6%)!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .hotspot-files{left:var(--dash-hotspot-files-left,1.7%)!important;top:var(--dash-hotspot-files-top,46.2%)!important;width:var(--dash-hotspot-files-width,11.2%)!important;height:var(--dash-hotspot-files-height,3.6%)!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .callout-home{right:clamp(54px,5.8vw,112px)!important;bottom:clamp(66px,9vh,112px)!important;left:auto!important;top:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .callout-projects{left:clamp(900px,52vw,1160px)!important;top:clamp(128px,18vh,210px)!important;right:auto!important;bottom:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .callout-files{left:clamp(650px,36vw,790px)!important;top:clamp(460px,58vh,760px)!important;right:auto!important;bottom:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel:not(.is-active){
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:clamp(24px,2vw,34px)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel.is-active{
    position:relative!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{
    box-shadow:0 36px 120px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.035) inset!important;
  }
}

html body.spx-public .spx-export-section-v61,
html body.spx-public #roadmap.spx-alpha-story-section,
html body.spx-public .site-footer.spx-footer-v3{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
}
html body.spx-public .spx-export-card .spx-more-link svg{
  width:14px!important;
  height:14px!important;
  flex:0 0 14px!important;
  transition:transform .22s ease!important;
}
html body.spx-public .spx-export-card:hover .spx-more-link svg,
html body.spx-public .spx-export-card:focus-within .spx-more-link svg{
  transform:translateX(3px)!important;
}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card{
  opacity:calc(.55 + var(--pricing-in,1) * .45)!important;
  transform:translate3d(0,calc((1 - var(--pricing-in,1)) * 18px),0)!important;
  transition:opacity .32s ease,transform .32s ease,border-color .24s ease,box-shadow .24s ease!important;
}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card[data-price-card="free"]{
  box-shadow:0 26px 90px rgba(0,0,0,.18),0 0 80px rgba(69,230,168,.13)!important;
  animation:spxFreePlanFloat 6.8s ease-in-out infinite!important;
}
@keyframes spxFreePlanFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}

html body.spx-public .spx-faq-list{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;
  gap:12px!important;
}
html body.spx-public .spx-faq-card{
  text-align:left!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:18px 20px!important;
  border-radius:22px!important;
  border:1px solid rgba(126,231,255,.14)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.03))!important;
  color:var(--text)!important;
  cursor:pointer!important;
  transition:transform .22s ease,border-color .22s ease,background .22s ease!important;
}
html body.spx-public .spx-faq-card:hover,
html body.spx-public .spx-faq-card:focus-visible{
  transform:translateY(-3px)!important;
  border-color:rgba(126,231,255,.34)!important;
  outline:none!important;
}
html body.spx-public .spx-faq-card span{font-weight:900!important;}
html body.spx-public .spx-faq-card small{color:var(--secondary)!important;font-weight:800!important;}
html body.spx-public .spx-faq-modal{
  position:fixed!important;
  inset:0!important;
  z-index:220!important;
  display:grid!important;
  place-items:center!important;
  padding:24px!important;
  background:rgba(2,6,18,.58)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .2s ease,visibility .2s ease!important;
}
html body.spx-public .spx-faq-modal.is-open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
html body.spx-public .spx-faq-dialog{
  position:relative!important;
  width:min(620px,100%)!important;
  padding:clamp(24px,4vw,40px)!important;
  border-radius:30px!important;
  border:1px solid rgba(126,231,255,.20)!important;
  background:linear-gradient(145deg,rgba(8,18,34,.96),rgba(5,10,22,.92))!important;
  box-shadow:0 34px 120px rgba(0,0,0,.42)!important;
}
html body.spx-public .spx-faq-close{
  position:absolute!important;
  right:16px!important;
  top:16px!important;
  width:38px!important;
  height:38px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.06)!important;
  color:inherit!important;
  cursor:pointer!important;
}
html body.spx-public .spx-faq-dialog h3{font-size:clamp(26px,3vw,42px)!important;line-height:1.05!important;letter-spacing:0!important;margin:10px 0 14px!important;}
html body.spx-public .spx-faq-dialog p{font-size:16px!important;line-height:1.72!important;color:rgba(232,241,255,.78)!important;}

@media (max-width:980px){
  html body.spx-public .spx-product-mega .mega-menu,
  html body.spx-public .resources-mega .mega-menu{top:auto!important;margin-top:8px!important;}
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step-number{
    top:0!important;
    right:0!important;
    left:auto!important;
    border-radius:0 22px 0 18px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img{
    border-radius:22px!important;
    box-shadow:0 20px 60px rgba(0,0,0,.20)!important;
  }
}

html[data-theme="light"] body.spx-public .spx-faq-dialog{
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(240,247,255,.96))!important;
  color:#122033!important;
  box-shadow:0 34px 100px rgba(22,34,64,.18)!important;
}
html[data-theme="light"] body.spx-public .spx-faq-dialog p{color:rgba(18,32,51,.78)!important;}
html[data-theme="light"] body.spx-public .spx-faq-modal{background:rgba(230,240,250,.62)!important;}

html body.spx-public main:not(.spx-home-main) .page-hero{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html body.spx-public .spx-feature-content,
html body.spx-public .spx-related-links,
html body.spx-public .faq-block,
html body.spx-public .article,
html body.spx-public .maintenance-card{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:
    radial-gradient(720px 260px at 8% 0%,rgba(126,231,255,.10),transparent 64%),
    linear-gradient(145deg,rgba(7,16,31,.56),rgba(4,9,20,.30))!important;
  border-color:rgba(126,231,255,.13)!important;
}
html body.spx-public .product-frame{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body.spx-public .spx-support-hero-copy,
html body.spx-public .spx-support-status-card,
html body.spx-public .spx-support-route-grid article,
html body.spx-public .spx-support-form-intro,
html body.spx-public .spx-public-support-form-v62{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html[data-theme="light"] body.spx-public .spx-feature-content,
html[data-theme="light"] body.spx-public .spx-related-links,
html[data-theme="light"] body.spx-public .faq-block,
html[data-theme="light"] body.spx-public .article,
html[data-theme="light"] body.spx-public .maintenance-card{
  background:
    radial-gradient(720px 260px at 8% 0%,rgba(14,165,233,.10),transparent 64%),
    linear-gradient(145deg,rgba(255,255,255,.86),rgba(240,247,255,.58))!important;
  color:#122033!important;
}

/* A8.124 QA repair: remove old sticky/absolute dashboard copy remnants and
   keep the product-demo interaction readable in dark and light mode. */
@media (min-width:981px){
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:min(430px,30vw)!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100svh - 190px)!important;
    overflow:visible!important;
    padding:clamp(22px,2.3vw,30px)!important;
    background:linear-gradient(145deg,rgba(8,18,36,.88),rgba(5,10,22,.76))!important;
    border:1px solid rgba(126,231,255,.18)!important;
    box-shadow:0 28px 88px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy h2,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{
    position:static!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:auto!important;
    max-width:none!important;
    opacity:1!important;
    transform:none!important;
    text-shadow:none!important;
    pointer-events:auto!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy h2{
    font-size:clamp(34px,3.05vw,52px)!important;
    line-height:1!important;
    margin:10px 0 12px!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{
    margin:0 0 18px!important;
    font-size:15px!important;
    line-height:1.62!important;
    color:rgba(232,241,255,.76)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs{
    position:static!important;
    inset:auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    width:100%!important;
    margin:0 0 14px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button{
    min-height:42px!important;
    width:100%!important;
    border-radius:16px!important;
    padding:10px 12px!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:16px 17px!important;
    border-radius:20px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.032))!important;
    border:1px solid rgba(255,255,255,.10)!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel:not(.is-active){
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,10px,0) scale(.985)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel.is-active{
    opacity:1!important;
    visibility:visible!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout{
    display:block!important;
    opacity:0!important;
    visibility:visible!important;
    transform:translate3d(0,10px,0) scale(.97)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63:not(.is-dashboard-focused) .spx-dash-callout{
    opacity:0!important;
    transform:translate3d(0,10px,0) scale(.97)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63.is-dashboard-focused .spx-dash-copy{
    opacity:0!important;
    pointer-events:none!important;
    transform:translate3d(24px,0,0) scale(.985)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63.is-dashboard-focused[data-dashboard-active="overview"] [data-dashboard-callout="overview"],
  html body.spx-public #dashboard.spx-dashboard-command-v63.is-dashboard-focused[data-dashboard-active="projects"] [data-dashboard-callout="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63.is-dashboard-focused[data-dashboard-active="files"] [data-dashboard-callout="files"]{
    opacity:1!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-hotspot]{
    opacity:0!important;
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="overview"] [data-dashboard-hotspot="overview"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="projects"] [data-dashboard-hotspot="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="files"] [data-dashboard-hotspot="files"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-intent="projects"] [data-dashboard-hotspot="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-intent="files"] [data-dashboard-hotspot="files"]{
    opacity:0!important;
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="hover-projects"] [data-dashboard-hotspot="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="click-projects"] [data-dashboard-hotspot="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="hover-files"] [data-dashboard-hotspot="files"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="click-files"] [data-dashboard-hotspot="files"]{
    opacity:.30!important;
    border-color:rgba(126,231,255,.40)!important;
    background:linear-gradient(90deg,rgba(24,201,245,.24),rgba(24,201,245,.06))!important;
    box-shadow:inset 4px 0 0 rgba(24,201,245,.82),0 0 28px rgba(24,201,245,.14)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-fade-ghost{
    transition:opacity .52s ease!important;
  }
}

html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63{
  background:
    radial-gradient(1100px 680px at 10% 28%,rgba(14,165,233,.10),transparent 66%),
    radial-gradient(980px 620px at 84% 64%,rgba(37,99,235,.08),transparent 68%),
    linear-gradient(180deg,rgba(246,248,252,0),rgba(234,241,249,.72) 20%,rgba(226,235,245,.78) 72%,rgba(246,248,252,0))!important;
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy,
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel,
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout{
  color:#122033!important;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(240,247,255,.94))!important;
  border-color:rgba(40,93,130,.16)!important;
  box-shadow:0 30px 86px rgba(22,34,64,.16),0 0 72px rgba(24,201,245,.14),inset 0 1px 0 rgba(255,255,255,.82)!important;
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy h2,
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel h3{
  color:#102033!important;
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p,
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel p,
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout small{
  color:rgba(18,32,51,.76)!important;
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button{
  color:rgba(18,32,51,.70)!important;
  background:rgba(15,94,135,.045)!important;
  border-color:rgba(40,93,130,.14)!important;
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button.is-active{
  color:#0b3f58!important;
  background:rgba(14,165,233,.12)!important;
  border-color:rgba(14,165,233,.30)!important;
}

/* How intro handoff repair: the intro is fixed by the active A8.115 owner.
   Identity transforms on ancestors still create a containing block, which made
   the intro wait below the viewport and caused the visible dark gap. */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow:not(.is-step-flow) .spx-why52-sticky,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow:not(.is-step-flow) .spx-why52-copy{
    transform:none!important;
    will-change:auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow:not(.is-step-flow) .spx-why52-story-head{
    transform:translate3d(0,-50%,0) scale(calc(1 + (var(--a115-intro-out,0) * .072)))!important;
  }
}

/* Export workflow repair: keep the A8.124 active-state owner, but remove the
   old cramped tab row and hover width-jumps so the section reads as three calm
   steps instead of a selector widget. */
html body.spx-public .spx-export-section-v61{
  overflow:visible!important;
}
html body.spx-public .spx-export-section-v61 .spx-section-kicker{
  max-width:860px!important;
  margin-inline:auto!important;
}
html body.spx-public .spx-export-section-v61 .spx-section-kicker h2{
  max-width:820px!important;
}
html body.spx-public .spx-export-explainer{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(12px,1.4vw,18px)!important;
  width:min(920px,100%)!important;
  margin:clamp(28px,3.2vw,42px) auto 18px!important;
}
html body.spx-public .spx-export-explainer span{
  min-height:58px!important;
  padding:13px 16px!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.032))!important;
  border:1px solid rgba(126,231,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}

/* ==========================================================================
   A8.125 — Dashboard Command Center visible + mobile polish
   --------------------------------------------------------------------------
   This pass makes the Dashboard Command Center visible, adds a proper
   compact mobile layout for the section (≤980px), and strengthens several
   smaller UI polish points across footer, auth and feature pages.
   ========================================================================== */

/* ── Dashboard Command Center — mobile compact layout ───────────────────── */
@media(max-width:980px){
  html body.spx-public #dashboard.spx-dashboard-command-v63{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:calc(100vw - 28px)!important;
    margin:44px auto!important;
    padding:0!important;
    border-radius:28px!important;
    border:1px solid rgba(126,231,255,.16)!important;
    background:
      radial-gradient(circle at 50% 0%,rgba(24,201,245,.14),transparent 46%),
      linear-gradient(180deg,rgba(7,14,28,.97),rgba(4,8,18,.99))!important;
    box-shadow:0 32px 100px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07)!important;
    overflow:hidden!important;
    min-height:0!important;
    isolation:isolate!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63::before{display:none!important;}

  /* Visual: static image card on top */
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-visual{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    width:100%!important;
    margin:0!important;
    z-index:1!important;
    overflow:hidden!important;
    display:block!important;
    pointer-events:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    border:0!important;
    border-radius:0!important;
    transform:none!important;
    overflow:hidden!important;
    box-shadow:none!important;
    will-change:auto!important;
    transition:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame img,
  html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-image],
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-fade-ghost{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center top!important;
    opacity:1!important;
    filter:none!important;
    transform:none!important;
  }

  /* Copy: natural flow below image */
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    height:auto!important;
    width:100%!important;
    margin:0!important;
    padding:22px 20px 24px!important;
    pointer-events:auto!important;
    transform:none!important;
    opacity:1!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    z-index:2!important;
    display:block!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > .eyebrow{
    position:relative!important;
    left:auto!important;top:auto!important;
    width:100%!important;
    opacity:1!important;
    pointer-events:auto!important;
    text-shadow:none!important;
    margin:0 0 10px!important;
    display:block!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > h2{
    position:relative!important;
    left:auto!important;top:auto!important;
    width:100%!important;
    opacity:1!important;
    pointer-events:auto!important;
    text-shadow:none!important;
    margin:0 0 12px!important;
    font-size:clamp(26px,7.5vw,40px)!important;
    line-height:.97!important;
    letter-spacing:-.055em!important;
    color:#f0faff!important;
    display:block!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{
    position:relative!important;
    left:auto!important;top:auto!important;
    width:100%!important;
    opacity:1!important;
    pointer-events:auto!important;
    text-shadow:none!important;
    margin:0 0 18px!important;
    font-size:14.5px!important;
    line-height:1.62!important;
    color:rgba(218,236,255,.72)!important;
    display:block!important;
  }

  /* Tabs: full-width stacked buttons */
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs{
    position:relative!important;
    left:auto!important;bottom:auto!important;
    display:grid!important;
    gap:8px!important;
    margin:0 0 16px!important;
    padding:0!important;
    background:none!important;
    border:0!important;
    border-radius:0!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    z-index:3!important;
    pointer-events:auto!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs b{
    display:inline!important;
    color:var(--cyan-2)!important;
    margin-right:7px!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    min-height:46px!important;
    padding:11px 14px!important;
    border-radius:16px!important;
    border:1px solid rgba(255,255,255,.09)!important;
    background:rgba(255,255,255,.04)!important;
    color:rgba(218,236,255,.68)!important;
    text-align:left!important;
    font-size:14px!important;
    font-weight:850!important;
    transition:background .22s ease,border-color .22s ease,color .22s ease!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button.is-active{
    background:rgba(24,201,245,.11)!important;
    border-color:rgba(24,201,245,.26)!important;
    color:#f0faff!important;
    box-shadow:0 0 0 1px rgba(24,201,245,.10) inset!important;
  }

  /* Panels: natural flow */
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
    display:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel.is-active{
    display:block!important;
    padding:14px 16px!important;
    border-radius:20px!important;
    border:1px solid rgba(126,231,255,.12)!important;
    background:rgba(255,255,255,.04)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel span{
    display:block!important;
    font-size:11px!important;
    font-weight:950!important;
    letter-spacing:.09em!important;
    text-transform:uppercase!important;
    color:var(--cyan-2)!important;
    margin-bottom:4px!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel h3{
    font-size:17px!important;
    line-height:1.2!important;
    margin:0 0 8px!important;
    color:#f0faff!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel p{
    font-size:13.5px!important;
    line-height:1.55!important;
    color:rgba(218,236,255,.68)!important;
    margin:0!important;
  }

  /* Hide cursor/hotspot/callout chrome on mobile */
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-hotspot,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout{
    display:none!important;
    pointer-events:none!important;
  }
}

/* ── Footer — professional hierarchy polish ─────────────────────────────── */
html body.spx-public .site-footer.spx-footer-v3{
  border-top:1px solid rgba(126,231,255,.12)!important;
  background:
    radial-gradient(circle at 18% 0%,rgba(24,201,245,.07),transparent 42%),
    linear-gradient(180deg,rgba(4,9,20,.76),rgba(3,7,16,.88))!important;
  backdrop-filter:blur(16px)!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-shell{
  display:grid!important;
  grid-template-columns:minmax(0,1.3fr) minmax(0,2.4fr)!important;
  gap:clamp(32px,5vw,72px)!important;
  align-items:start!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:clamp(40px,5vw,64px) 0 clamp(28px,3.6vw,44px)!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-brand-col p{
  font-size:14px!important;
  line-height:1.62!important;
  color:rgba(218,236,255,.58)!important;
  max-width:28ch!important;
  margin:12px 0 8px!important;
}
html body.spx-public .site-footer.spx-footer-v3 .footer-release-note{
  display:block!important;
  font-size:12px!important;
  color:rgba(218,236,255,.38)!important;
  line-height:1.55!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-columns{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(12px,2vw,28px)!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col strong{
  display:block!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
  color:var(--cyan-2)!important;
  margin-bottom:14px!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a{
  display:block!important;
  margin-bottom:10px!important;
  font-size:13.5px!important;
  font-weight:800!important;
  color:rgba(218,236,255,.58)!important;
  text-decoration:none!important;
  transition:color .18s ease,transform .18s ease!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:hover{
  color:#a8eeff!important;
  transform:translateX(3px)!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-bottom{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:16px!important;
  padding-top:clamp(16px,2.4vw,24px)!important;
  border-top:1px solid rgba(126,231,255,.08)!important;
  max-width:1180px!important;
  margin:0 auto!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-bottom p{
  font-size:12.5px!important;
  color:rgba(218,236,255,.34)!important;
  margin:0!important;
}
html body.spx-public .site-footer.spx-footer-v3 .footer-built-with{
  font-style:italic!important;
}

@media(max-width:900px){
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-shell{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-columns{
    grid-template-columns:repeat(2,1fr)!important;
    gap:20px 12px!important;
  }
}
@media(max-width:560px){
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-columns{
    grid-template-columns:1fr 1fr!important;
  }
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-bottom{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:6px!important;
  }
}

/* ── Auth pages — better mobile vertical spacing ───────────────────────── */
@media(max-width:680px){
  html body.spx-public .auth-shell.auth-shell-v62{
    padding:100px 16px 48px!important;
  }
  html body.spx-public .auth-shell.auth-shell-v62 .auth-card{
    width:100%!important;
    max-width:none!important;
    padding:20px!important;
    border-radius:24px!important;
  }
  html body.spx-public .auth-shell.auth-shell-v62 .auth-story{
    display:none!important;
  }
}

/* ── Feature pages — stronger visual hero + card rhythm ────────────────── */
html body.spx-public .spx-feature-hero{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;
  gap:clamp(24px,4vw,56px)!important;
  align-items:center!important;
  padding:clamp(112px,12vw,168px) var(--side) clamp(56px,6vw,84px)!important;
  max-width:min(1280px,calc(100% - 44px))!important;
  margin:0 auto!important;
}
html body.spx-public .spx-feature-hero .eyebrow{
  margin-bottom:14px!important;
}
html body.spx-public .spx-feature-hero h1{
  font-size:clamp(32px,5.2vw,68px)!important;
  line-height:1.0!important;
  letter-spacing:-.055em!important;
  max-width:18ch!important;
  text-wrap:balance!important;
}
html body.spx-public .spx-feature-hero p{
  font-size:clamp(15px,1.5vw,18px)!important;
  line-height:1.65!important;
  color:rgba(218,236,255,.72)!important;
  max-width:52ch!important;
  margin:16px 0 24px!important;
}
html body.spx-public .spx-feature-hero .product-frame{
  border-radius:22px!important;
  overflow:hidden!important;
  border:1px solid rgba(126,231,255,.16)!important;
  box-shadow:0 32px 100px rgba(0,0,0,.32)!important;
  aspect-ratio:16/10!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(7,14,28,.7)!important;
}
html body.spx-public .spx-feature-hero .product-frame img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:top!important;
}
html body.spx-public .spx-page-cta-row{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}
@media(max-width:860px){
  html body.spx-public .spx-feature-hero{
    grid-template-columns:1fr!important;
    padding-top:100px!important;
  }
  html body.spx-public .spx-feature-hero .product-frame{
    order:-1!important;
    max-height:280px!important;
  }
}

/* Feature card grid improvements */
html body.spx-public .spx-feature-card-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(12px,1.4vw,18px)!important;
  max-width:min(1180px,calc(100% - 44px))!important;
  margin:0 auto clamp(48px,6vw,80px)!important;
}
html body.spx-public .spx-feature-card-grid .feature-card{
  padding:clamp(20px,2.4vw,30px)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 16% 0%,rgba(24,201,245,.09),transparent 42%),
    linear-gradient(145deg,rgba(8,16,32,.72),rgba(5,10,22,.54))!important;
  border:1px solid rgba(126,231,255,.14)!important;
  box-shadow:0 16px 56px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}
html body.spx-public .spx-feature-card-grid .feature-card:hover{
  transform:translateY(-4px)!important;
  border-color:rgba(126,231,255,.28)!important;
  box-shadow:0 24px 72px rgba(0,0,0,.28),0 0 0 1px rgba(24,201,245,.08) inset!important;
}
html body.spx-public .spx-feature-card-grid .feature-card h2{
  font-size:clamp(17px,1.6vw,22px)!important;
  line-height:1.2!important;
  letter-spacing:-.035em!important;
  margin:10px 0 10px!important;
}
html body.spx-public .spx-feature-card-grid .feature-card p{
  font-size:14px!important;
  line-height:1.62!important;
  color:rgba(218,236,255,.66)!important;
  margin:0!important;
}
@media(max-width:760px){
  html body.spx-public .spx-feature-card-grid{
    grid-template-columns:1fr!important;
  }
}

/* ── Section reveal — calmer, no flicker ─────────────────────────────────── */
html body.spx-public .reveal{
  opacity:0!important;
  transform:translateY(18px)!important;
  transition:opacity .62s cubic-bezier(.22,.82,.18,1),transform .62s cubic-bezier(.22,.82,.18,1)!important;
}
html body.spx-public .reveal.is-visible{
  opacity:1!important;
  transform:none!important;
}

/* ── How Spixor Works — step progress bar color ────────────────────────── */
html body.spx-public .why52-progress{
  background:linear-gradient(90deg,var(--cyan-2),rgba(37,99,235,.72))!important;
}

/* ── Hamburger — animated X on open ─────────────────────────────────────── */
html body.spx-public .site-header .nav-toggle span{
  display:block!important;
  width:22px!important;
  height:2px!important;
  border-radius:2px!important;
  background:currentColor!important;
  transition:transform .24s ease,opacity .24s ease!important;
  transform-origin:center!important;
}
html body.spx-public .site-header.is-open .nav-toggle span:nth-child(1){
  transform:translateY(8px) rotate(45deg)!important;
}
html body.spx-public .site-header.is-open .nav-toggle span:nth-child(2){
  opacity:0!important;
  transform:scaleX(0)!important;
}
html body.spx-public .site-header.is-open .nav-toggle span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg)!important;
}

/* ── Pricing orbit card — slight premium treatment ───────────────────────── */
html body.spx-public .spx-price-card--orbit{
  position:relative!important;
  border-color:rgba(24,201,245,.26)!important;
  background:
    radial-gradient(circle at 16% 0%,rgba(24,201,245,.12),transparent 44%),
    linear-gradient(145deg,rgba(8,17,34,.80),rgba(5,10,22,.64))!important;
  box-shadow:0 24px 80px rgba(0,0,0,.28),0 0 0 1px rgba(24,201,245,.12) inset!important;
}
html body.spx-public .spx-price-card--orbit::before{
  content:""!important;
  position:absolute!important;
  inset:-1px!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:linear-gradient(135deg,rgba(24,201,245,.22),transparent 38%,transparent 62%,rgba(37,99,235,.14))!important;
  opacity:.60!important;
  z-index:0!important;
}

/* ── Feature content section — cleaner layout ──────────────────────────── */
html body.spx-public .spx-feature-content{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,300px)!important;
  gap:clamp(20px,3vw,44px)!important;
  max-width:min(1180px,calc(100% - 44px))!important;
  margin:0 auto clamp(32px,4vw,56px)!important;
  padding:clamp(24px,3vw,40px)!important;
  border-radius:28px!important;
  border:1px solid rgba(126,231,255,.12)!important;
  background:
    radial-gradient(circle at 6% 0%,rgba(24,201,245,.08),transparent 44%),
    linear-gradient(145deg,rgba(7,14,28,.54),rgba(4,8,18,.38))!important;
}
html body.spx-public .spx-feature-status{
  padding:18px 20px!important;
  border-radius:20px!important;
  border:1px solid rgba(126,231,255,.16)!important;
  background:rgba(255,255,255,.04)!important;
}
html body.spx-public .spx-feature-status b{
  display:block!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
  color:var(--cyan-2)!important;
  margin-bottom:6px!important;
}
html body.spx-public .spx-feature-status span{
  display:block!important;
  font-size:15px!important;
  font-weight:900!important;
  color:#f0faff!important;
  margin-bottom:10px!important;
}
@media(max-width:760px){
  html body.spx-public .spx-feature-content{
    grid-template-columns:1fr!important;
  }
}

/* ── Related links section ──────────────────────────────────────────────── */
html body.spx-public .spx-related-links{
  max-width:min(1180px,calc(100% - 44px))!important;
  margin:0 auto clamp(48px,6vw,80px)!important;
  padding:clamp(24px,3vw,40px)!important;
  border-radius:28px!important;
  border:1px solid rgba(126,231,255,.10)!important;
  background:rgba(255,255,255,.024)!important;
}
html body.spx-public .spx-related-links div{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin-top:18px!important;
}
html body.spx-public .spx-related-links a{
  display:inline-flex!important;
  align-items:center!important;
  padding:8px 16px!important;
  border-radius:999px!important;
  border:1px solid rgba(126,231,255,.16)!important;
  background:rgba(255,255,255,.04)!important;
  color:rgba(218,236,255,.78)!important;
  font-size:13px!important;
  font-weight:860!important;
  text-decoration:none!important;
  transition:background .18s ease,border-color .18s ease,color .18s ease!important;
}
html body.spx-public .spx-related-links a:hover{
  background:rgba(24,201,245,.10)!important;
  border-color:rgba(24,201,245,.30)!important;
  color:#a8eeff!important;
}

/* ── Alpha feedback panel — signal orbit ───────────────────────────────── */
html body.spx-public .spx-alpha-signal-orbit{
  display:flex!important;
  gap:10px!important;
  margin:14px 0!important;
}
html body.spx-public .spx-alpha-signal-orbit i{
  width:10px!important;
  height:10px!important;
  border-radius:50%!important;
  background:rgba(24,201,245,.38)!important;
  border:1px solid rgba(24,201,245,.48)!important;
  animation:spxAlphaOrbitPulse 1.8s ease-in-out infinite alternate!important;
}
html body.spx-public .spx-alpha-signal-orbit i:nth-child(2){animation-delay:.4s!important}
html body.spx-public .spx-alpha-signal-orbit i:nth-child(3){animation-delay:.8s!important}
@keyframes spxAlphaOrbitPulse{
  from{transform:scale(.8);opacity:.38}
  to{transform:scale(1.1);opacity:1}
}

/* ── Support page — category cards on mobile ────────────────────────────── */
@media(max-width:680px){
  html body.spx-public .spx-support-route-grid{
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
  html body.spx-public .spx-support-hero-v62{
    grid-template-columns:1fr!important;
  }
  html body.spx-public .spx-support-status-card{
    display:none!important;
  }
}

/* ── Updates page — thumbnail stripe fill ──────────────────────────────── */
html body.spx-public .spx-update-thumb{
  height:96px!important;
  border-radius:16px 16px 0 0!important;
  margin:-20px -20px 16px!important;
  background:
    radial-gradient(circle at 24% 30%,rgba(24,201,245,.32),transparent 52%),
    radial-gradient(circle at 78% 60%,rgba(37,99,235,.26),transparent 58%),
    linear-gradient(135deg,rgba(7,14,28,.82),rgba(4,8,18,.64))!important;
}
html body.spx-public .spx-export-explainer b{
  display:inline-grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  border-radius:12px!important;
  background:rgba(126,231,255,.12)!important;
  color:#dff8ff!important;
  margin-right:10px!important;
}
html body.spx-public .spx-export-flowline{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:min(680px,100%)!important;
  margin:0 auto clamp(24px,3vw,34px)!important;
  color:rgba(226,241,255,.68)!important;
  white-space:normal!important;
}
html body.spx-public .spx-export-flowline span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:102px!important;
  min-height:34px!important;
  padding:8px 13px!important;
  border-radius:999px!important;
  border:1px solid rgba(126,231,255,.15)!important;
  background:rgba(255,255,255,.045)!important;
  color:rgba(226,241,255,.70)!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  line-height:1!important;
}
html body.spx-public .spx-export-flowline span.is-active{
  color:#f6fdff!important;
  background:rgba(126,231,255,.14)!important;
  border-color:rgba(126,231,255,.36)!important;
  box-shadow:0 0 0 1px rgba(126,231,255,.06) inset!important;
}
html body.spx-public .spx-export-flowline i{
  display:block!important;
  flex:0 1 54px!important;
  min-width:22px!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(126,231,255,.38),transparent)!important;
}
html body.spx-public .spx-export-grid,
html body.spx-public .spx-export-grid:has(.spx-export-card:hover),
html body.spx-public .spx-export-grid:has(.spx-export-card:focus-within),
html body.spx-public .spx-export-grid:has(.spx-export-card.is-active){
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(16px,1.8vw,22px)!important;
  align-items:start!important;
  max-width:1160px!important;
  margin-inline:auto!important;
}
html body.spx-public .spx-export-card,
html body.spx-public .spx-export-card:hover,
html body.spx-public .spx-export-card:focus-within,
html body.spx-public .spx-export-card.is-active,
html body.spx-public .spx-export-grid:has(.spx-export-card.is-active) .spx-export-card:not(.is-active){
  flex:initial!important;
  min-width:0!important;
  padding:clamp(20px,2vw,28px)!important;
  transform:translate3d(0,0,0)!important;
  transition:transform .26s var(--ease),opacity .26s ease,border-color .26s ease,box-shadow .26s ease,background .26s ease!important;
}
html body.spx-public .spx-export-card{
  min-height:340px!important;
  opacity:.88!important;
  box-shadow:0 22px 68px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
html body.spx-public .spx-export-card.is-active,
html body.spx-public .spx-export-card:hover,
html body.spx-public .spx-export-card:focus-within{
  opacity:1!important;
  transform:translate3d(0,-5px,0)!important;
  box-shadow:0 26px 78px rgba(0,0,0,.22),0 0 0 1px rgba(126,231,255,.10) inset!important;
}
html body.spx-public .spx-export-card p,
html body.spx-public .spx-export-card .spx-more-link,
html body.spx-public .spx-export-grid:has(.spx-export-card:hover) .spx-export-card:not(:hover) p,
html body.spx-public .spx-export-grid:has(.spx-export-card:hover) .spx-export-card:not(:hover) .spx-more-link,
html body.spx-public .spx-export-grid:has(.spx-export-card:focus-within) .spx-export-card:not(:focus-within) p,
html body.spx-public .spx-export-grid:has(.spx-export-card:focus-within) .spx-export-card:not(:focus-within) .spx-more-link,
html body.spx-public .spx-export-grid:has(.spx-export-card.is-active) .spx-export-card:not(.is-active) p{
  opacity:1!important;
  max-height:none!important;
  overflow:visible!important;
  margin-top:0!important;
  pointer-events:auto!important;
}
html body.spx-public .spx-export-card .spx-more-link{
  margin-top:auto!important;
  width:max-content!important;
}
html body.spx-public .spx-more-link::after{
  content:none!important;
  display:none!important;
}
html body.spx-public .spx-export-card .spx-more-link svg{
  display:block!important;
}
html body.spx-public .spx-export-card .spx-export-icon{
  flex:0 0 auto!important;
}
html body.spx-public .spx-export-card:hover .spx-export-icon,
html body.spx-public .spx-export-card:focus-within .spx-export-icon,
html body.spx-public .spx-export-card.is-active .spx-export-icon{
  transform:translateY(-2px) scale(1.035)!important;
}
@media (max-width:980px){
  html body.spx-public .spx-export-section-v61{
    width:min(100% - 28px,1180px)!important;
    padding:26px 18px!important;
    border-radius:28px!important;
  }
  html body.spx-public .spx-export-explainer,
  html body.spx-public .spx-export-grid,
  html body.spx-public .spx-export-grid:has(.spx-export-card:hover),
  html body.spx-public .spx-export-grid:has(.spx-export-card:focus-within),
  html body.spx-public .spx-export-grid:has(.spx-export-card.is-active){
    grid-template-columns:1fr!important;
  }
  html body.spx-public .spx-export-flowline{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    justify-content:stretch!important;
    overflow:visible!important;
    padding-bottom:0!important;
  }
  html body.spx-public .spx-export-flowline span{
    min-width:0!important;
    width:100%!important;
    padding-inline:8px!important;
    font-size:11px!important;
  }
  html body.spx-public .spx-export-flowline i{
    display:none!important;
  }
  html body.spx-public .spx-export-card{
    min-height:0!important;
  }
}
html[data-theme="light"] body.spx-public .spx-export-flowline span{
  color:rgba(18,32,51,.70)!important;
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(40,93,130,.16)!important;
}
html[data-theme="light"] body.spx-public .spx-export-flowline span.is-active{
  color:#0d4058!important;
  background:rgba(14,165,233,.12)!important;
  border-color:rgba(14,165,233,.32)!important;
}
html[data-theme="light"] body.spx-public .spx-export-flowline i{
  background:linear-gradient(90deg,transparent,rgba(14,93,135,.24),transparent)!important;
}
html[data-theme="light"] body.spx-public #export.spx-export-section-v61 .spx-export-card .spx-more-link{
  color:#07526f!important;
  background:rgba(14,165,233,.10)!important;
  border-color:rgba(14,165,233,.28)!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-grid{
  align-items:start!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card{
  min-height:0!important;
  align-self:start!important;
  gap:10px!important;
  padding:clamp(18px,1.8vw,24px)!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card p{
  flex:0 0 auto!important;
  margin:0!important;
  line-height:1.52!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card .spx-more-link{
  min-height:34px!important;
  margin-top:8px!important;
  padding:7px 11px!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-fade-ghost.is-fading{
  opacity:0!important;
}

/* Footer repair: older footer variants left the column nav in inline flow, which
   collapsed headings and links together. This restores a clean SaaS footer. */
html body.spx-public .site-footer.spx-footer-v3{
  width:min(1280px,calc(100% - 44px))!important;
  margin:clamp(80px,9vw,130px) auto 0!important;
  padding:clamp(30px,4vw,52px)!important;
  border-radius:36px 36px 0 0!important;
  border:1px solid rgba(126,231,255,.13)!important;
  background:
    radial-gradient(circle at 14% 0%,rgba(126,231,255,.10),transparent 34%),
    linear-gradient(180deg,rgba(8,17,33,.82),rgba(4,9,19,.74))!important;
  box-shadow:0 -22px 90px rgba(0,0,0,.20)!important;
  overflow:hidden!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-shell{
  display:grid!important;
  grid-template-columns:minmax(240px,.78fr) minmax(0,1.65fr)!important;
  gap:clamp(32px,5vw,70px)!important;
  align-items:start!important;
  width:100%!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-brand-col{
  display:grid!important;
  gap:16px!important;
  max-width:340px!important;
}
html body.spx-public .site-footer.spx-footer-v3 .footer-brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:12px!important;
  width:max-content!important;
  text-decoration:none!important;
  color:var(--text)!important;
  font-size:22px!important;
  font-weight:950!important;
}
html body.spx-public .site-footer.spx-footer-v3 .footer-brand img{
  width:38px!important;
  height:38px!important;
  object-fit:contain!important;
}
html body.spx-public .site-footer.spx-footer-v3 .footer-main-copy p{
  max-width:30ch!important;
  margin:0!important;
  color:rgba(232,241,255,.82)!important;
  line-height:1.65!important;
}
html body.spx-public .site-footer.spx-footer-v3 .footer-release-note{
  display:block!important;
  color:rgba(232,241,255,.56)!important;
  line-height:1.55!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-columns{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(126px,1fr))!important;
  gap:clamp(18px,2.4vw,34px)!important;
  align-items:start!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col{
  display:grid!important;
  gap:10px!important;
  min-width:0!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col strong{
  display:block!important;
  margin:0 0 4px!important;
  color:rgba(246,252,255,.92)!important;
  font-size:12px!important;
  line-height:1.2!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  width:max-content!important;
  max-width:100%!important;
  color:rgba(232,241,255,.66)!important;
  text-decoration:none!important;
  font-size:15px!important;
  line-height:1.35!important;
  transition:color .2s ease,transform .2s ease!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a::after{
  content:""!important;
  width:5px!important;
  height:5px!important;
  border-top:1.5px solid currentColor!important;
  border-right:1.5px solid currentColor!important;
  transform:translateX(-2px) rotate(45deg)!important;
  opacity:0!important;
  transition:opacity .2s ease,transform .2s ease!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:hover,
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:focus-visible{
  color:#9eeeff!important;
  transform:translateX(3px)!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:hover::after,
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:focus-visible::after{
  opacity:1!important;
  transform:translateX(1px) rotate(45deg)!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-bottom{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin-top:clamp(30px,4vw,48px)!important;
  padding-top:22px!important;
  border-top:1px solid rgba(126,231,255,.12)!important;
  color:rgba(232,241,255,.58)!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-bottom p{
  margin:0!important;
}
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3{
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(239,247,255,.76))!important;
  border-color:rgba(40,93,130,.16)!important;
  box-shadow:0 -20px 70px rgba(22,34,64,.10)!important;
}
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .footer-brand,
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .spx-footer-col strong{
  color:#102033!important;
}
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .footer-main-copy p,
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a{
  color:rgba(18,32,51,.72)!important;
}
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .footer-release-note,
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .spx-footer-bottom{
  color:rgba(18,32,51,.58)!important;
}
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:hover,
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:focus-visible{
  color:#07526f!important;
}
@media (max-width:900px){
  html body.spx-public .site-footer.spx-footer-v3{
    width:min(100% - 28px,1280px)!important;
    padding:28px 20px!important;
    border-radius:28px 28px 0 0!important;
  }
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-shell{
    grid-template-columns:1fr!important;
  }
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-columns{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-bottom{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
}
@media (max-width:520px){
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-columns{
    grid-template-columns:1fr!important;
  }
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card .spx-export-status{
  min-height:0!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  font-size:11px!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card .spx-export-icon{
  width:48px!important;
  height:48px!important;
  border-radius:16px!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card h3{
  margin:4px 0 0!important;
  font-size:clamp(22px,1.7vw,27px)!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card ul{
  margin:6px 0 0!important;
  gap:6px!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card li{
  font-size:13px!important;
  line-height:1.42!important;
}

/* A8.126 launch-focus repair: keep Dashboard Command Center out of the public flow while it is refined. */
html body.spx-public #dashboard[hidden],
html body.spx-public [data-launch-hidden="dashboard"]{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  min-height:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
html body.spx-public .spx-public-layout-managed{display:flex!important;flex-direction:column!important;}
html body.spx-public .spx-public-section-hidden{display:none!important;}
html body.spx-public [data-theme-toggle],
html body.spx-public .spx-theme-switch{display:none!important;}

/* Website edit mode */
html body.spx-public .spx-public-editor-bar{position:fixed!important;z-index:99999!important;left:50%!important;bottom:18px!important;transform:translateX(-50%)!important;width:min(980px,calc(100vw - 28px))!important;display:flex!important;align-items:center!important;gap:12px!important;padding:12px 14px!important;border:1px solid rgba(126,231,255,.22)!important;border-radius:22px!important;background:rgba(5,10,22,.94)!important;box-shadow:0 22px 60px rgba(0,0,0,.34),0 0 34px rgba(83,225,255,.12)!important;backdrop-filter:blur(18px)!important;color:#eaf7ff!important;}
html body.spx-public .spx-public-editor-bar strong{font-weight:950!important;white-space:nowrap!important;}
html body.spx-public .spx-public-editor-bar span{color:rgba(232,245,255,.72)!important;font-size:13px!important;}
html body.spx-public .spx-public-editor-bar .form-status{margin:0 0 0 auto!important;font-size:12px!important;}
html body.spx-public .spx-public-editable{outline:1.5px dashed rgba(126,231,255,.34)!important;outline-offset:5px!important;border-radius:8px!important;cursor:text!important;}
html body.spx-public .spx-public-editable:focus{outline-color:rgba(126,231,255,.86)!important;background:rgba(126,231,255,.07)!important;}
html body.spx-public .spx-section-edit-controls{position:absolute!important;z-index:35!important;top:16px!important;left:16px!important;display:flex!important;align-items:center!important;gap:6px!important;padding:7px!important;border:1px solid rgba(126,231,255,.22)!important;border-radius:999px!important;background:rgba(5,10,22,.82)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important;backdrop-filter:blur(14px)!important;color:#eaf7ff!important;}
html body.spx-public .spx-section-edit-controls strong{padding:0 8px!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.08em!important;color:#8eeaff!important;}
html body.spx-public .spx-section-edit-controls button{min-width:32px!important;min-height:28px!important;border:1px solid rgba(218,236,255,.14)!important;border-radius:999px!important;background:rgba(255,255,255,.07)!important;color:#eaf7ff!important;font-weight:900!important;cursor:pointer!important;}
html body.spx-public [data-public-section]{position:relative;}

/* Export-first launch rework: compact, calmer, and aligned with the current Spixor tone. */
html body.spx-public #export.spx-export-launch-rework{width:min(1180px,calc(100% - 48px))!important;margin:clamp(64px,8vw,112px) auto!important;padding:clamp(34px,4.5vw,58px)!important;border-radius:34px!important;border:1px solid rgba(126,231,255,.13)!important;background:linear-gradient(145deg,rgba(8,15,31,.84),rgba(5,10,22,.64))!important;box-shadow:0 30px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)!important;filter:none!important;backdrop-filter:none!important;}
html body.spx-public #export .spx-section-kicker{max-width:760px!important;margin:0 auto 22px!important;text-align:center!important;}
html body.spx-public #export .spx-section-kicker h2{font-size:clamp(34px,4vw,58px)!important;line-height:.96!important;margin:0 0 12px!important;}
html body.spx-public #export .spx-section-kicker p{font-size:clamp(15px,1.15vw,18px)!important;line-height:1.65!important;color:rgba(232,241,255,.74)!important;}
html body.spx-public #export .spx-export-explainer{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:0 auto 18px!important;max-width:850px!important;}
html body.spx-public #export .spx-export-explainer span{display:flex!important;align-items:center!important;gap:10px!important;min-height:54px!important;padding:10px 13px!important;border-radius:18px!important;border:1px solid rgba(126,231,255,.12)!important;background:rgba(255,255,255,.045)!important;color:rgba(232,241,255,.82)!important;}
html body.spx-public #export .spx-export-explainer b{display:grid!important;place-items:center!important;width:31px!important;height:31px!important;border-radius:11px!important;background:rgba(126,231,255,.12)!important;color:#92f0ff!important;font-size:12px!important;}
html body.spx-public #export .spx-export-flowline{max-width:720px!important;margin:0 auto 20px!important;display:grid!important;grid-template-columns:auto 1fr auto 1fr auto!important;align-items:center!important;gap:10px!important;color:rgba(232,241,255,.56)!important;}
html body.spx-public #export .spx-export-flowline span{padding:7px 11px!important;border-radius:999px!important;border:1px solid rgba(126,231,255,.12)!important;background:rgba(255,255,255,.035)!important;font-size:12px!important;font-weight:900!important;}
html body.spx-public #export .spx-export-flowline span.is-active{color:#102033!important;background:linear-gradient(135deg,#8ff0ff,#53d8ff)!important;border-color:transparent!important;}
html body.spx-public #export .spx-export-flowline i{height:1px!important;background:linear-gradient(90deg,rgba(126,231,255,.12),rgba(126,231,255,.44),rgba(126,231,255,.12))!important;}
html body.spx-public #export .spx-export-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important;}
html body.spx-public #export .spx-export-card{display:grid!important;grid-template-rows:auto auto auto 1fr auto!important;gap:10px!important;min-height:0!important;padding:20px!important;border-radius:25px!important;border:1px solid rgba(218,236,255,.10)!important;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.032))!important;box-shadow:none!important;transform:none!important;transition:transform .22s ease,border-color .22s ease,background .22s ease!important;overflow:hidden!important;}
html body.spx-public #export .spx-export-card:hover,
html body.spx-public #export .spx-export-card.is-active{transform:translateY(-4px)!important;border-color:rgba(126,231,255,.28)!important;background:linear-gradient(145deg,rgba(126,231,255,.10),rgba(255,255,255,.045))!important;}
html body.spx-public #export .spx-export-card p{margin:0!important;color:rgba(232,241,255,.75)!important;line-height:1.55!important;font-size:14px!important;}
html body.spx-public #export .spx-more-link{align-self:end!important;margin-top:8px!important;}

/* Compact pricing + modal notify. */
html body.spx-public #pricing.spx-pricing-launch-compact{width:min(1180px,calc(100% - 48px))!important;margin:clamp(58px,7vw,100px) auto!important;padding:0!important;}
html body.spx-public #pricing .spx-price-grid--compact{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;align-items:stretch!important;}
html body.spx-public #pricing .spx-price-card{min-height:0!important;padding:22px!important;border-radius:28px!important;gap:11px!important;display:flex!important;flex-direction:column!important;}
html body.spx-public #pricing .spx-plan-head{display:grid!important;grid-template-columns:auto 1fr!important;grid-template-areas:"icon title" "icon status"!important;align-items:center!important;column-gap:12px!important;row-gap:3px!important;margin:0!important;}
html body.spx-public #pricing .spx-plan-icon{grid-area:icon!important;width:44px!important;height:44px!important;border-radius:15px!important;}
html body.spx-public #pricing .spx-plan-head h3{grid-area:title!important;margin:0!important;font-size:22px!important;line-height:1.05!important;}
html body.spx-public #pricing .spx-plan-status{grid-area:status!important;width:max-content!important;margin:0!important;padding:4px 9px!important;font-size:10px!important;}
html body.spx-public #pricing .spx-price-card strong{font-size:clamp(32px,3.1vw,44px)!important;line-height:1!important;margin:8px 0 0!important;}
html body.spx-public #pricing .spx-price-card p{font-size:14px!important;line-height:1.5!important;margin:0!important;color:rgba(232,241,255,.72)!important;}
html body.spx-public #pricing .spx-price-card ul{margin:0!important;padding:0!important;display:grid!important;gap:7px!important;}
html body.spx-public #pricing .spx-price-card li{font-size:13px!important;line-height:1.35!important;}
html body.spx-public #pricing .spx-price-card .btn{margin-top:auto!important;}
html body.spx-public #pricing .spx-orbit-note{display:block!important;margin-top:6px!important;color:rgba(232,241,255,.55)!important;font-size:12px!important;line-height:1.35!important;}
html body.spx-public .spx-orbit-modal[hidden]{display:none!important;}
html body.spx-public .spx-orbit-modal{position:fixed!important;inset:0!important;z-index:99998!important;display:grid!important;place-items:center!important;padding:22px!important;}
html body.spx-public .spx-orbit-modal-backdrop{position:absolute!important;inset:0!important;background:rgba(1,5,13,.72)!important;backdrop-filter:blur(12px)!important;}
html body.spx-public .spx-orbit-modal-card{position:relative!important;z-index:1!important;width:min(540px,100%)!important;display:grid!important;gap:13px!important;padding:26px!important;border-radius:30px!important;border:1px solid rgba(126,231,255,.20)!important;background:linear-gradient(145deg,rgba(9,17,34,.98),rgba(5,10,22,.96))!important;box-shadow:0 30px 100px rgba(0,0,0,.55),0 0 34px rgba(80,220,255,.13)!important;color:#eaf7ff!important;}
html body.spx-public .spx-orbit-modal-card h3{margin:0!important;font-size:clamp(26px,3vw,38px)!important;line-height:1!important;}
html body.spx-public .spx-orbit-modal-card p{margin:0!important;color:rgba(232,241,255,.72)!important;line-height:1.55!important;}
html body.spx-public .spx-orbit-modal-card label{display:grid!important;gap:7px!important;font-size:12px!important;font-weight:900!important;color:rgba(232,241,255,.75)!important;}
html body.spx-public .spx-orbit-modal-card input:not(.spx-hp-field),
html body.spx-public .spx-orbit-modal-card textarea{width:100%!important;border:1px solid rgba(218,236,255,.13)!important;border-radius:16px!important;background:rgba(255,255,255,.055)!important;color:#fff!important;padding:12px 13px!important;resize:vertical!important;}
html body.spx-public .spx-modal-close{position:absolute!important;right:14px!important;top:14px!important;width:36px!important;height:36px!important;border:1px solid rgba(218,236,255,.14)!important;border-radius:999px!important;background:rgba(255,255,255,.06)!important;color:#eaf7ff!important;font-size:24px!important;line-height:1!important;cursor:pointer!important;}
html body.spx-public.spx-modal-open{overflow:hidden!important;}

/* Alpha story rework. */
html body.spx-public #roadmap.spx-alpha-launch-story{width:min(1180px,calc(100% - 48px))!important;margin:clamp(62px,8vw,110px) auto!important;padding:clamp(30px,4.4vw,56px)!important;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr)!important;gap:24px!important;border-radius:34px!important;border:1px solid rgba(126,231,255,.14)!important;background:radial-gradient(circle at 18% 18%,rgba(77,214,255,.12),transparent 35%),linear-gradient(145deg,rgba(8,15,31,.88),rgba(5,10,22,.66))!important;box-shadow:0 34px 100px rgba(0,0,0,.30)!important;}
html body.spx-public #roadmap .spx-alpha-story-copy{display:grid!important;align-content:center!important;gap:18px!important;}
html body.spx-public #roadmap .spx-alpha-story-copy h2{font-size:clamp(34px,4vw,60px)!important;line-height:.96!important;margin:0!important;}
html body.spx-public #roadmap .spx-alpha-story-copy p{max-width:64ch!important;margin:0!important;color:rgba(232,241,255,.74)!important;line-height:1.68!important;}
html body.spx-public #roadmap .spx-alpha-story-steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin-top:4px!important;}
html body.spx-public #roadmap .spx-alpha-story-steps span{display:grid!important;gap:7px!important;padding:13px!important;border-radius:18px!important;border:1px solid rgba(126,231,255,.13)!important;background:rgba(255,255,255,.045)!important;}
html body.spx-public #roadmap .spx-alpha-story-steps b{color:#8eeaff!important;font-size:12px!important;letter-spacing:.08em!important;}
html body.spx-public #roadmap .spx-alpha-story-steps small{color:rgba(232,241,255,.75)!important;font-weight:850!important;line-height:1.35!important;}
html body.spx-public #roadmap .spx-alpha-feedback-panel{border-radius:30px!important;border:1px solid rgba(126,231,255,.18)!important;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.032))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 70px rgba(0,0,0,.22)!important;padding:22px!important;}
html body.spx-public #roadmap .spx-alpha-theme-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;}
html body.spx-public #roadmap .spx-alpha-theme-list button{min-height:44px!important;border-radius:16px!important;border:1px solid rgba(218,236,255,.12)!important;background:rgba(255,255,255,.045)!important;color:rgba(232,241,255,.78)!important;font-weight:900!important;}
html body.spx-public #roadmap .spx-alpha-theme-list button.is-active,
html body.spx-public #roadmap .spx-alpha-theme-list button:hover{background:rgba(126,231,255,.12)!important;border-color:rgba(126,231,255,.30)!important;color:#eafaff!important;}

@media (max-width:900px){
  html body.spx-public #export.spx-export-launch-rework,
  html body.spx-public #pricing.spx-pricing-launch-compact,
  html body.spx-public #roadmap.spx-alpha-launch-story{width:calc(100% - 28px)!important;padding:24px 18px!important;border-radius:28px!important;}
  html body.spx-public #export .spx-export-explainer,
  html body.spx-public #export .spx-export-grid,
  html body.spx-public #pricing .spx-price-grid--compact,
  html body.spx-public #roadmap.spx-alpha-launch-story,
  html body.spx-public #roadmap .spx-alpha-story-steps{grid-template-columns:1fr!important;}
  html body.spx-public #export .spx-export-flowline{display:none!important;}
  html body.spx-public .spx-public-editor-bar{align-items:flex-start!important;flex-direction:column!important;bottom:10px!important;}
}

/* A8.128 — launch polish + stronger public website editor. */
html body.spx-public .spx-export-launch-rework-v128{position:relative!important;display:grid!important;gap:24px!important;max-width:min(1180px,calc(100vw - 36px))!important;margin:clamp(54px,8vw,110px) auto!important;padding:clamp(22px,4vw,42px)!important;border:1px solid rgba(126,231,255,.15)!important;border-radius:32px!important;background:radial-gradient(circle at 8% 0%,rgba(61,220,255,.14),transparent 34%),radial-gradient(circle at 96% 16%,rgba(82,119,255,.12),transparent 34%),linear-gradient(180deg,rgba(8,14,28,.76),rgba(7,11,22,.52))!important;box-shadow:0 24px 80px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)!important;overflow:hidden!important;}
html body.spx-public .spx-export-head-v128{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:22px!important;align-items:end!important;}
html body.spx-public .spx-export-head-v128 .spx-section-kicker{margin:0!important;max-width:760px!important;text-align:left!important;}
html body.spx-public .spx-export-head-v128 h2{font-size:clamp(32px,4.4vw,58px)!important;line-height:.96!important;margin:8px 0 10px!important;}
html body.spx-public .spx-export-head-v128 p{font-size:clamp(15px,1.4vw,18px)!important;line-height:1.62!important;max-width:68ch!important;}
html body.spx-public .spx-export-proof-v128{display:flex!important;gap:10px!important;align-items:stretch!important;}
html body.spx-public .spx-export-proof-v128 span{min-width:124px!important;display:grid!important;gap:2px!important;padding:13px 14px!important;border-radius:20px!important;border:1px solid rgba(126,231,255,.16)!important;background:rgba(255,255,255,.045)!important;}
html body.spx-public .spx-export-proof-v128 b{font-size:24px!important;color:#7ee7ff!important;line-height:1!important;}
html body.spx-public .spx-export-proof-v128 small{color:rgba(232,245,255,.72)!important;font-weight:800!important;line-height:1.25!important;}
html body.spx-public .spx-export-timeline-v128{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;}
html body.spx-public .spx-export-step-v128{position:relative!important;display:grid!important;grid-template-columns:auto 1fr auto!important;gap:12px!important;align-items:center!important;padding:14px!important;border-radius:22px!important;border:1px solid rgba(255,255,255,.095)!important;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;transition:transform .25s ease,border-color .25s ease,background .25s ease!important;}
html body.spx-public .spx-export-step-v128:hover{transform:translateY(-2px)!important;border-color:rgba(126,231,255,.28)!important;background:linear-gradient(180deg,rgba(126,231,255,.08),rgba(255,255,255,.03))!important;}
html body.spx-public .spx-export-step-no{display:grid!important;place-items:center!important;width:38px!important;height:38px!important;border-radius:14px!important;background:rgba(126,231,255,.10)!important;border:1px solid rgba(126,231,255,.20)!important;color:#9ff0ff!important;font-weight:950!important;font-size:12px!important;}
html body.spx-public .spx-export-step-v128 b{display:block!important;color:#fff!important;font-size:14px!important;font-weight:950!important;margin:0 0 3px!important;}
html body.spx-public .spx-export-step-v128 p{margin:0!important;color:rgba(232,245,255,.72)!important;font-size:12.5px!important;line-height:1.42!important;}
html body.spx-public .spx-export-step-v128 i{width:8px!important;height:8px!important;border-radius:999px!important;background:#7ee7ff!important;box-shadow:0 0 20px rgba(126,231,255,.55)!important;}
html body.spx-public .spx-export-grid-v128{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important;}
html body.spx-public .spx-export-card-v128{min-height:0!important;padding:18px!important;border-radius:24px!important;display:flex!important;flex-direction:column!important;gap:12px!important;border:1px solid rgba(255,255,255,.10)!important;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important;box-shadow:none!important;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important;}
html body.spx-public .spx-export-card-v128:hover{transform:translateY(-4px)!important;border-color:rgba(126,231,255,.26)!important;box-shadow:0 18px 46px rgba(0,0,0,.18),0 0 28px rgba(126,231,255,.10)!important;}
html body.spx-public .spx-export-card-top{display:flex!important;justify-content:space-between!important;gap:12px!important;align-items:center!important;}
html body.spx-public .spx-export-card-v128 h3{margin:0!important;font-size:21px!important;color:#fff!important;}
html body.spx-public .spx-export-card-v128 p{margin:0!important;line-height:1.55!important;color:rgba(232,245,255,.76)!important;}
html body.spx-public .spx-export-card-v128 .spx-more-link{margin-top:auto!important;opacity:1!important;transform:none!important;}
html body.spx-public .spx-pricing-launch-balanced{max-width:min(1180px,calc(100vw - 36px))!important;margin:clamp(54px,7vw,96px) auto!important;padding:clamp(20px,3.6vw,38px)!important;border-radius:32px!important;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))!important;border:1px solid rgba(255,255,255,.09)!important;}
html body.spx-public .spx-price-grid--balanced{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;align-items:stretch!important;}
html body.spx-public .spx-price-card-v128{min-height:430px!important;padding:22px!important;gap:13px!important;border-radius:26px!important;display:flex!important;flex-direction:column!important;}
html body.spx-public .spx-price-card-v128 .spx-plan-head{display:flex!important;align-items:center!important;gap:12px!important;margin:0!important;}
html body.spx-public .spx-price-card-v128 .spx-plan-head h3{margin:0!important;font-size:20px!important;}
html body.spx-public .spx-price-card-v128 .spx-plan-head .spx-plan-status{display:inline-flex!important;margin-top:4px!important;}
html body.spx-public .spx-price-card-v128 strong{font-size:clamp(30px,3.2vw,42px)!important;line-height:1!important;margin:4px 0 2px!important;}
html body.spx-public .spx-price-card-v128 p{line-height:1.52!important;margin:0!important;}
html body.spx-public .spx-price-card-v128 ul{display:grid!important;gap:8px!important;margin:2px 0 8px!important;padding:0!important;}
html body.spx-public .spx-price-card-v128 li{font-size:13.5px!important;line-height:1.35!important;}
html body.spx-public .spx-price-card-v128 .btn{margin-top:auto!important;}
html body.spx-public .spx-orbit-modal-v128[hidden]{display:none!important;}
html body.spx-public .spx-orbit-modal-v128{position:fixed!important;inset:0!important;z-index:100000!important;display:grid!important;place-items:center!important;padding:22px!important;}
html body.spx-public .spx-orbit-modal-backdrop{position:absolute!important;inset:0!important;background:rgba(3,6,14,.72)!important;backdrop-filter:blur(14px)!important;}
html body.spx-public .spx-orbit-modal-card{position:relative!important;width:min(620px,calc(100vw - 28px))!important;display:grid!important;gap:14px!important;padding:24px!important;border-radius:30px!important;border:1px solid rgba(126,231,255,.20)!important;background:radial-gradient(circle at 8% 0%,rgba(126,231,255,.16),transparent 34%),linear-gradient(180deg,rgba(10,17,32,.98),rgba(6,10,20,.96))!important;box-shadow:0 30px 100px rgba(0,0,0,.48)!important;color:#eaf7ff!important;}
html body.spx-public .spx-orbit-modal-head{display:flex!important;align-items:center!important;gap:14px!important;padding-right:34px!important;}
html body.spx-public .spx-orbit-modal-head h3{margin:3px 0 0!important;font-size:clamp(24px,4vw,34px)!important;line-height:1.04!important;color:#fff!important;}
html body.spx-public .spx-orbit-modal-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;}
html body.spx-public .spx-orbit-modal-card label{display:grid!important;gap:7px!important;}
html body.spx-public .spx-orbit-modal-card label span{font-size:11px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.1em!important;color:rgba(232,245,255,.70)!important;}
html body.spx-public .spx-orbit-modal-card input,html body.spx-public .spx-orbit-modal-card textarea{width:100%!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.06)!important;color:#fff!important;padding:12px 14px!important;outline:none!important;}
html body.spx-public .spx-orbit-modal-card input:focus,html body.spx-public .spx-orbit-modal-card textarea:focus{border-color:rgba(126,231,255,.50)!important;box-shadow:0 0 0 4px rgba(126,231,255,.10)!important;}
html body.spx-public .spx-orbit-modal-actions{display:flex!important;gap:12px!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important;}
html body.spx-public .spx-alpha-story-v128{max-width:min(1180px,calc(100vw - 36px))!important;margin:clamp(54px,7vw,100px) auto!important;padding:clamp(22px,4vw,42px)!important;border-radius:34px!important;border:1px solid rgba(255,255,255,.10)!important;background:radial-gradient(circle at 0% 20%,rgba(126,231,255,.13),transparent 32%),radial-gradient(circle at 95% 0%,rgba(116,104,255,.16),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))!important;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(330px,.8fr)!important;gap:22px!important;align-items:stretch!important;}
html body.spx-public .spx-alpha-narrative-v128{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:22px 0!important;}
html body.spx-public .spx-alpha-narrative-v128 span{padding:14px!important;border-radius:18px!important;border:1px solid rgba(126,231,255,.14)!important;background:rgba(255,255,255,.045)!important;}
html body.spx-public .spx-alpha-narrative-v128 b{display:block!important;color:#fff!important;font-size:13px!important;margin:0 0 6px!important;}
html body.spx-public .spx-alpha-narrative-v128 small{color:rgba(232,245,255,.70)!important;line-height:1.42!important;}
html body.spx-public .spx-alpha-panel-v128{border-radius:28px!important;padding:22px!important;border:1px solid rgba(126,231,255,.18)!important;background:linear-gradient(180deg,rgba(5,11,25,.88),rgba(10,18,34,.72))!important;box-shadow:0 24px 70px rgba(0,0,0,.24)!important;}
html body.spx-public .spx-alpha-panel-v128 h3{font-size:28px!important;line-height:1.08!important;margin:7px 0 14px!important;}
html body.spx-public .site-footer.spx-footer-v3{max-width:min(1180px,calc(100vw - 36px))!important;margin:70px auto 24px!important;border-radius:34px!important;border:1px solid rgba(255,255,255,.10)!important;background:radial-gradient(circle at 8% 0%,rgba(126,231,255,.12),transparent 28%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;box-shadow:0 22px 80px rgba(0,0,0,.22)!important;padding:28px!important;}
html body.spx-public .spx-footer-shell{display:grid!important;grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr)!important;gap:28px!important;align-items:start!important;}
html body.spx-public .spx-footer-columns{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;}
html body.spx-public .spx-footer-col{display:grid!important;gap:8px!important;}
html body.spx-public .spx-footer-col strong{color:#fff!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:.12em!important;margin-bottom:5px!important;}
html body.spx-public .spx-footer-col a{position:relative!important;color:rgba(232,245,255,.70)!important;text-decoration:none!important;font-weight:750!important;font-size:13px!important;padding:7px 0!important;transition:color .2s ease,transform .2s ease!important;}
html body.spx-public .spx-footer-col a::after{content:'›'!important;opacity:0!important;margin-left:6px!important;transition:opacity .2s ease,transform .2s ease!important;color:#7ee7ff!important;}
html body.spx-public .spx-footer-col a:hover{color:#fff!important;transform:translateX(2px)!important;}
html body.spx-public .spx-footer-col a:hover::after{opacity:1!important;transform:translateX(2px)!important;}
html body.spx-public .spx-footer-bottom{display:flex!important;justify-content:space-between!important;gap:16px!important;align-items:center!important;margin-top:24px!important;padding-top:18px!important;border-top:1px solid rgba(255,255,255,.08)!important;color:rgba(232,245,255,.58)!important;font-size:12px!important;}
html body.spx-public .spx-public-editor-bar--pro{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important;}
html body.spx-public .spx-public-editor-main{display:grid!important;gap:2px!important;}
html body.spx-public .spx-public-editor-actions{display:flex!important;gap:8px!important;align-items:center!important;flex-wrap:wrap!important;}
html body.spx-public .spx-section-edit-controls{position:absolute!important;z-index:9999!important;top:10px!important;left:10px!important;display:flex!important;gap:6px!important;align-items:center!important;padding:7px!important;border-radius:14px!important;border:1px solid rgba(126,231,255,.25)!important;background:rgba(5,10,22,.88)!important;box-shadow:0 12px 30px rgba(0,0,0,.24)!important;}
html body.spx-public .spx-section-edit-controls strong{color:#8ff0ff!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.08em!important;}
html body.spx-public .spx-section-edit-controls button,.spx-public-media-head button{border:1px solid rgba(255,255,255,.13)!important;border-radius:999px!important;background:rgba(255,255,255,.06)!important;color:#fff!important;font-weight:850!important;padding:6px 9px!important;cursor:pointer!important;}
html body.spx-public .spx-public-editable-image{outline:2px dashed rgba(155,233,255,.35)!important;outline-offset:4px!important;}
html body.spx-public .spx-image-edit-button{display:inline-flex!important;position:relative!important;z-index:9998!important;margin:6px!important;padding:6px 9px!important;border-radius:999px!important;border:1px solid rgba(126,231,255,.26)!important;background:rgba(5,12,24,.86)!important;color:#dffaff!important;font-size:11px!important;font-weight:900!important;cursor:pointer!important;}
html body.spx-public .spx-public-media-drawer{position:fixed!important;right:18px!important;bottom:100px!important;z-index:100001!important;width:min(420px,calc(100vw - 28px))!important;max-height:min(540px,calc(100vh - 140px))!important;overflow:auto!important;padding:14px!important;border-radius:22px!important;border:1px solid rgba(126,231,255,.24)!important;background:rgba(5,10,22,.96)!important;box-shadow:0 24px 90px rgba(0,0,0,.44)!important;color:#eaf7ff!important;}
html body.spx-public .spx-public-media-head{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:12px!important;margin-bottom:12px!important;}
html body.spx-public .spx-public-media-list{display:grid!important;gap:10px!important;}
html body.spx-public .spx-public-media-list label{display:grid!important;gap:6px!important;}
html body.spx-public .spx-public-media-list span{font-size:11px!important;font-weight:900!important;color:rgba(232,245,255,.68)!important;}
html body.spx-public .spx-public-media-list input{width:100%!important;border-radius:13px!important;border:1px solid rgba(255,255,255,.12)!important;background:rgba(255,255,255,.06)!important;color:#fff!important;padding:10px 12px!important;}
@media(max-width:900px){html body.spx-public .spx-export-head-v128,html body.spx-public .spx-alpha-story-v128,html body.spx-public .spx-footer-shell{grid-template-columns:1fr!important;}html body.spx-public .spx-export-proof-v128,html body.spx-public .spx-export-timeline-v128,html body.spx-public .spx-export-grid-v128,html body.spx-public .spx-price-grid--balanced,html body.spx-public .spx-alpha-narrative-v128,html body.spx-public .spx-footer-columns{grid-template-columns:1fr!important;}html body.spx-public .spx-orbit-modal-grid{grid-template-columns:1fr!important;}html body.spx-public .spx-price-card-v128{min-height:0!important;}html body.spx-public .spx-public-editor-bar--pro{grid-template-columns:1fr!important;bottom:8px!important;}html body.spx-public .spx-footer-bottom{display:grid!important;}}

/* A8.128 mobile repair: stable navigator and non-sticky public flow. */
html body.spx-public .nav-mobile-actions{display:none;}

@media(max-width:1100px){
  html,html body.spx-public{overflow-x:clip!important;}
  html body.spx-public .site-header.spx-nav-v26{
    min-height:74px!important;
    height:74px!important;
    padding:10px 14px!important;
    grid-template-columns:auto 1fr auto!important;
    gap:10px!important;
    align-items:center!important;
    background:rgba(3,7,18,.86)!important;
    border-bottom-color:rgba(218,236,255,.10)!important;
    box-shadow:0 14px 44px rgba(0,0,0,.30)!important;
    backdrop-filter:blur(18px) saturate(145%)!important;
    -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
  }
  html body.spx-public .site-header.spx-nav-v26 .brand img{width:34px!important;height:34px!important;border-radius:11px!important;}
  html body.spx-public .site-header.spx-nav-v26 .brand span{font-size:18px!important;}
  html body.spx-public .site-header.spx-nav-v26 .nav-toggle{
    display:grid!important;
    place-items:center!important;
    justify-self:end!important;
    width:44px!important;
    height:44px!important;
    padding:0!important;
    order:3!important;
  }
  html body.spx-public .site-header.spx-nav-v26 .nav-toggle span:not(.sr-only){
    grid-area:1/1!important;
    margin:0!important;
    width:20px!important;
    transform-origin:center!important;
  }
  html body.spx-public .site-header.spx-nav-v26 .nav-toggle span:nth-child(1){transform:translateY(-6px)!important;}
  html body.spx-public .site-header.spx-nav-v26 .nav-toggle span:nth-child(2){transform:translateY(0)!important;}
  html body.spx-public .site-header.spx-nav-v26 .nav-toggle span:nth-child(3){transform:translateY(6px)!important;}
  html body.spx-public .site-header.spx-nav-v26.is-open .nav-toggle span:nth-child(1){transform:rotate(45deg)!important;}
  html body.spx-public .site-header.spx-nav-v26.is-open .nav-toggle span:nth-child(2){opacity:0!important;}
  html body.spx-public .site-header.spx-nav-v26.is-open .nav-toggle span:nth-child(3){transform:rotate(-45deg)!important;}
  html body.spx-public .site-header.spx-nav-v26 .nav-actions{display:none!important;}
  html body.spx-public .site-header.spx-nav-v26 .site-nav{
    position:fixed!important;
    left:14px!important;
    right:14px!important;
    top:84px!important;
    bottom:auto!important;
    width:auto!important;
    max-height:calc(100svh - 98px)!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    align-content:start!important;
    justify-content:stretch!important;
    gap:8px!important;
    padding:14px!important;
    border-radius:24px!important;
    border:1px solid rgba(126,231,255,.18)!important;
    background:radial-gradient(circle at 12% 0%,rgba(126,231,255,.14),transparent 34%),linear-gradient(180deg,rgba(7,14,28,.98),rgba(4,8,18,.98))!important;
    box-shadow:0 28px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,-10px,0) scale(.985)!important;
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s step-end!important;
    z-index:91!important;
  }
  html body.spx-public .site-header.spx-nav-v26.is-open .site-nav{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0) scale(1)!important;
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s step-start!important;

/* ═══════════════════════════════════════════════════════════════════════════
   A8.127 — Homepage redesign · Pages rework · Auth · Support · Backgrounds
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Dashboard v127: kill the 390vh scroll-story, use clean 2-col card ── */
html body.spx-public .spx-dashboard-command-v127{
  min-height:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr)!important;
  gap:0!important;
  width:min(1260px,calc(100vw - 36px))!important;
  max-width:none!important;
  margin:clamp(62px,8vw,110px) auto!important;
  padding:0!important;
  border-radius:34px!important;
  border:1px solid rgba(126,231,255,.15)!important;
  background:radial-gradient(circle at 10% 25%,rgba(37,210,255,.10),transparent 38%),radial-gradient(circle at 90% 75%,rgba(82,119,255,.09),transparent 38%),linear-gradient(160deg,rgba(8,15,32,.90),rgba(5,10,22,.72))!important;
  box-shadow:0 36px 110px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05)!important;
  overflow:hidden!important;
}
html body.spx-public .spx-dashboard-command-v127 .spx-dash-visual{
  position:relative!important;height:auto!important;top:auto!important;
  inset:auto!important;width:100%!important;margin:0!important;
  z-index:1!important;overflow:hidden!important;aspect-ratio:4/3!important;
}
html body.spx-public .spx-dashboard-command-v127 .spx-dash-frame{
  position:relative!important;inset:auto!important;width:100%!important;
  height:100%!important;border:0!important;border-radius:0!important;
  background:#07101e!important;
}
html body.spx-public .spx-dashboard-command-v127 .spx-dash-frame img[data-dashboard-image]{
  position:absolute!important;inset:0!important;width:100%!important;
  height:100%!important;object-fit:cover!important;object-position:center top!important;
  opacity:.9!important;filter:saturate(1.06) contrast(1.03)!important;
}
html body.spx-public .spx-dashboard-command-v127 .spx-dash-copy{
  position:relative!important;height:auto!important;width:100%!important;
  margin:0!important;padding:clamp(26px,4vw,52px)!important;
  z-index:5!important;transform:none!important;opacity:1!important;
  pointer-events:auto!important;background:transparent!important;
  backdrop-filter:none!important;
}
html body.spx-public .spx-dashboard-command-v127 .spx-dash-copy > .eyebrow,
html body.spx-public .spx-dashboard-command-v127 .spx-dash-copy > h2,
html body.spx-public .spx-dashboard-command-v127 .spx-dash-copy > p{
  position:relative!important;left:auto!important;top:auto!important;
  width:100%!important;opacity:1!important;pointer-events:auto!important;
  text-shadow:none!important;
}
html body.spx-public .spx-dashboard-command-v127 .spx-dash-copy > h2{
  font-size:clamp(26px,3.2vw,46px)!important;line-height:1.04!important;
}
html body.spx-public .spx-dashboard-command-v127 .spx-dash-tabs{
  position:relative!important;left:auto!important;bottom:auto!important;
  margin:22px 0 14px!important;
}
html body.spx-public .spx-dashboard-command-v127 .spx-dash-panel{
  position:relative!important;right:auto!important;top:auto!important;
  left:auto!important;bottom:auto!important;width:100%!important;
  opacity:1!important;visibility:visible!important;transform:none!important;
  pointer-events:auto!important;
}
html body.spx-public .spx-dashboard-command-v127 .spx-dash-panel:not(.is-active){
  display:none!important;
}
html body.spx-public .spx-dashboard-command-v127 .spx-dash-callout{display:none!important;}
html body.spx-public .spx-dashboard-command-v127 .spx-dash-cursor{display:none!important;}
html body.spx-public .spx-dashboard-command-v127 .spx-dash-hotspot{display:none!important;}
html body.spx-public .spx-dashboard-command-v127 .spx-dash-frame::after{display:none!important;}

/* ── 2. Animated background orbs keyframes ── */
@keyframes spxOrbPulse{0%{transform:scale(1) translate(0,0);opacity:1}50%{transform:scale(1.08) translate(2%,3%);opacity:.8}100%{transform:scale(.96) translate(-1%,-2%);opacity:1}}
@keyframes spxOrbDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(4%,6%) scale(1.05)}}
@keyframes spxAuthBgShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes spxFeatureBgPulse{0%{opacity:.5;transform:scale(1)}100%{opacity:1;transform:scale(1.06)}}
@keyframes spxSupportAurora{0%{transform:translateX(-5%) translateY(0) rotate(-3deg);opacity:.6}50%{transform:translateX(5%) translateY(3%) rotate(3deg);opacity:.9}100%{transform:translateX(-5%) translateY(0) rotate(-3deg);opacity:.6}}

/* ── 3. Auth v127: animated glass card, premium form ── */
html body.spx-public .spx-auth-v127{
  min-height:100svh!important;
  position:relative!important;
  overflow:hidden!important;
  padding:clamp(20px,4vh,60px) clamp(16px,3vw,40px)!important;
  background:radial-gradient(ellipse at 20% 0%,rgba(37,210,255,.10),transparent 44%),radial-gradient(ellipse at 85% 95%,rgba(82,119,255,.10),transparent 44%),linear-gradient(180deg,#04081a,#06101e)!important;
}
html body.spx-public .spx-auth-bg-orbs{
  position:absolute!important;inset:0!important;pointer-events:none!important;
  z-index:0!important;overflow:hidden!important;
}
html body.spx-public .spx-auth-bg-orbs span{
  position:absolute!important;border-radius:50%!important;
  filter:blur(80px)!important;will-change:transform,opacity!important;
}
html body.spx-public .spx-auth-bg-orbs span:nth-child(1){
  width:560px!important;height:560px!important;
  background:radial-gradient(circle,rgba(37,210,255,.09),transparent 70%)!important;
  top:-14%!important;left:-8%!important;
  animation:spxOrbPulse 16s ease-in-out infinite!important;
}
html body.spx-public .spx-auth-bg-orbs span:nth-child(2){
  width:480px!important;height:480px!important;
  background:radial-gradient(circle,rgba(82,119,255,.09),transparent 70%)!important;
  bottom:-10%!important;right:-6%!important;
  animation:spxOrbPulse 22s ease-in-out infinite reverse!important;
}
html body.spx-public .spx-auth-bg-orbs span:nth-child(3){
  width:340px!important;height:340px!important;
  background:radial-gradient(circle,rgba(126,231,255,.06),transparent 70%)!important;
  top:40%!important;left:50%!important;
  animation:spxOrbDrift 28s ease-in-out infinite alternate!important;
}
html body.spx-public .spx-auth-v127 .auth-shell,
html body.spx-public .auth-shell.spx-auth-v127{
  display:grid!important;
  grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr)!important;
  gap:clamp(20px,3vw,48px)!important;
  align-items:center!important;
  max-width:min(1060px,100%)!important;
  margin:0 auto!important;
  position:relative!important;
  z-index:1!important;
}
html body.spx-public .auth-shell.spx-auth-v127 .auth-card{
  order:2!important;
  background:linear-gradient(165deg,rgba(10,18,36,.92),rgba(6,12,24,.86))!important;
  border:1px solid rgba(126,231,255,.16)!important;
  border-radius:30px!important;
  padding:clamp(22px,3.5vw,42px)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(22px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(140%)!important;
}
html body.spx-public .auth-shell.spx-auth-v127 .auth-card h1{
  font-size:clamp(26px,3.5vw,42px)!important;
  line-height:1.04!important;
  margin:8px 0 6px!important;
}
html body.spx-public .spx-auth-brand-v127{
  display:flex!important;align-items:center!important;gap:9px!important;
  margin-bottom:18px!important;
}
html body.spx-public .spx-auth-brand-v127 img{border-radius:10px!important;}
html body.spx-public .spx-auth-brand-v127 span{
  font-size:16px!important;font-weight:950!important;color:#fff!important;
  letter-spacing:-.02em!important;
}
html body.spx-public .spx-auth-subtitle{
  color:rgba(218,236,255,.68)!important;
  font-size:clamp(13px,1.2vw,15px)!important;
  line-height:1.55!important;
  margin:0 0 20px!important;
}
html body.spx-public .spx-auth-form-v127{
  display:grid!important;gap:12px!important;
}
html body.spx-public .spx-auth-field-v127{
  display:grid!important;gap:6px!important;
}
html body.spx-public .spx-auth-field-v127 label,
html body.spx-public .spx-auth-field-v127 > label{
  display:grid!important;gap:6px!important;
  font-size:11px!important;font-weight:950!important;
  text-transform:uppercase!important;letter-spacing:.10em!important;
  color:rgba(218,236,255,.70)!important;
}
html body.spx-public .spx-auth-field-v127 input:not([type="checkbox"]):not([type="radio"]),
html body.spx-public .spx-auth-field-v127 select,
html body.spx-public .spx-auth-field-v127 textarea{
  width:100%!important;min-height:48px!important;
  border:1px solid rgba(218,236,255,.14)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
  padding:12px 14px!important;
  font-size:14px!important;
  transition:border-color .2s ease,box-shadow .2s ease!important;
}
html body.spx-public .spx-auth-field-v127 input:focus,
html body.spx-public .spx-auth-field-v127 select:focus,
html body.spx-public .spx-auth-field-v127 textarea:focus{
  border-color:rgba(126,231,255,.52)!important;
  box-shadow:0 0 0 4px rgba(126,231,255,.10)!important;
  outline:none!important;
}
html body.spx-public .spx-auth-form-meta{
  display:flex!important;justify-content:flex-end!important;margin:-4px 0 2px!important;
}
html body.spx-public .spx-auth-meta-link{
  font-size:12px!important;color:rgba(126,231,255,.82)!important;
  text-decoration:none!important;
}
html body.spx-public .spx-auth-meta-link:hover{color:#7ee7ff!important;}
html body.spx-public .spx-auth-submit-v127{
  width:100%!important;min-height:50px!important;
  border-radius:16px!important;font-size:15px!important;
  font-weight:950!important;letter-spacing:-.01em!important;
  margin-top:4px!important;
}
html body.spx-public .spx-auth-divider{
  display:flex!important;align-items:center!important;gap:12px!important;
  margin:4px 0!important;color:rgba(218,236,255,.40)!important;
  font-size:11px!important;font-weight:900!important;
}
html body.spx-public .spx-auth-divider::before,
html body.spx-public .spx-auth-divider::after{
  content:""!important;flex:1!important;height:1px!important;
  background:rgba(218,236,255,.14)!important;
}
html body.spx-public .spx-google-btn-v127{
  display:flex!important;align-items:center!important;justify-content:center!important;
  gap:10px!important;width:100%!important;min-height:48px!important;
  border-radius:16px!important;border:1px solid rgba(218,236,255,.16)!important;
  background:rgba(255,255,255,.06)!important;color:#fff!important;
  font-size:14px!important;font-weight:900!important;
  cursor:pointer!important;text-decoration:none!important;
  transition:background .2s ease,border-color .2s ease!important;
}
html body.spx-public .spx-google-btn-v127:hover{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(218,236,255,.28)!important;
}
html body.spx-public .spx-google-btn-v127.is-disabled{
  opacity:.42!important;cursor:not-allowed!important;
}
html body.spx-public .spx-auth-links-v127{
  text-align:center!important;margin-top:14px!important;
  font-size:13px!important;color:rgba(218,236,255,.62)!important;
}
html body.spx-public .spx-auth-links-v127 a{
  color:rgba(218,236,255,.80)!important;text-decoration:none!important;
}
html body.spx-public .spx-auth-links-v127 a strong{color:#7ee7ff!important;}
html body.spx-public .spx-auth-links-v127 a:hover{color:#fff!important;}
html body.spx-public .spx-auth-hint{
  font-size:11px!important;color:rgba(218,236,255,.55)!important;
  line-height:1.4!important;margin:2px 0 0!important;
}
html body.spx-public .spx-auth-text-btn{
  background:none!important;border:0!important;
  color:rgba(126,231,255,.80)!important;font-size:13px!important;
  cursor:pointer!important;padding:4px 0!important;
}
html body.spx-public .spx-auth-2fa-v127{
  background:rgba(126,231,255,.06)!important;
  border:1px solid rgba(126,231,255,.16)!important;
  border-radius:20px!important;padding:18px!important;
  display:grid!important;gap:12px!important;
}
html body.spx-public .spx-2fa-header strong{
  display:block!important;font-size:16px!important;color:#fff!important;
  margin:5px 0 4px!important;
}
html body.spx-public .spx-2fa-header p{
  color:rgba(218,236,255,.68)!important;font-size:13px!important;
  margin:0!important;line-height:1.5!important;
}
html body.spx-public .auth-shell.spx-auth-v127 .auth-story{
  order:1!important;
  padding:clamp(20px,3vw,40px)!important;
}
html body.spx-public .auth-shell.spx-auth-v127 .auth-story h2{
  font-size:clamp(24px,3.2vw,44px)!important;
  line-height:1.06!important;margin:10px 0 12px!important;
}
html body.spx-public .auth-story-points{
  display:grid!important;grid-template-columns:1fr 1fr!important;
  gap:10px!important;margin-top:18px!important;
}
html body.spx-public .auth-story-points span{
  display:flex!important;align-items:center!important;gap:8px!important;
  padding:10px 12px!important;border-radius:14px!important;
  border:1px solid rgba(126,231,255,.14)!important;
  background:rgba(255,255,255,.045)!important;
  font-size:13px!important;font-weight:900!important;color:#fff!important;
}
html body.spx-public .spx-auth-story-features{
  display:grid!important;gap:10px!important;margin-top:18px!important;
}
html body.spx-public .spx-auth-story-features div{
  display:grid!important;gap:3px!important;
  padding:12px 14px!important;border-radius:16px!important;
  border:1px solid rgba(218,236,255,.10)!important;
  background:rgba(255,255,255,.04)!important;
}
html body.spx-public .spx-auth-story-features strong{
  color:#fff!important;font-size:14px!important;
}
html body.spx-public .spx-auth-story-features span{
  color:rgba(218,236,255,.60)!important;font-size:12px!important;
}
html body.spx-public .spx-auth-steps-v127{
  display:flex!important;gap:8px!important;align-items:center!important;
  margin-bottom:18px!important;
}
html body.spx-public .spx-auth-steps-v127 span{
  display:grid!important;place-items:center!important;
  width:28px!important;height:28px!important;border-radius:999px!important;
  border:1px solid rgba(218,236,255,.22)!important;
  background:rgba(255,255,255,.05)!important;
  font-size:11px!important;font-weight:950!important;
  color:rgba(218,236,255,.60)!important;
}
html body.spx-public .spx-auth-steps-v127 span.is-active{
  background:rgba(126,231,255,.16)!important;
  border-color:rgba(126,231,255,.42)!important;
  color:#7ee7ff!important;
}
html body.spx-public .spx-auth-choice-v127{
  display:grid!important;gap:11px!important;
}
html body.spx-public .spx-auth-field-row-v127{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;
}
html body.spx-public .spx-auth-legal-v127{
  display:flex!important;align-items:flex-start!important;gap:10px!important;
  font-size:13px!important;color:rgba(218,236,255,.72)!important;
  padding:12px 14px!important;border-radius:14px!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(218,236,255,.10)!important;
}
html body.spx-public .spx-auth-legal-v127 a{color:#7ee7ff!important;}
html body.spx-public .spx-auth-captcha-v127{
  padding:14px!important;border-radius:16px!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(218,236,255,.10)!important;
  display:grid!important;gap:8px!important;
}
html body.spx-public .spx-auth-captcha-v127 img{border-radius:10px!important;}

/* ── 4. Feature page v127 ── */
html body.spx-public .spx-feature-hero-v127{
  position:relative!important;overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:clamp(24px,4vw,60px)!important;
  align-items:center!important;
  padding:clamp(52px,7vw,100px) clamp(20px,4vw,64px)!important;
  max-width:min(1260px,calc(100vw - 36px))!important;
  margin:0 auto!important;
  min-height:clamp(480px,60vh,700px)!important;
}
html body.spx-public .spx-feature-hero-v127::before{
  content:""!important;position:absolute!important;inset:0!important;
  pointer-events:none!important;z-index:0!important;
  background:radial-gradient(ellipse 80% 60% at 15% 40%,rgba(37,210,255,.10),transparent 50%),radial-gradient(ellipse 60% 50% at 90% 10%,rgba(82,119,255,.08),transparent 50%)!important;
  animation:spxFeatureBgPulse 20s ease-in-out infinite alternate!important;
}
html body.spx-public .spx-feature-hero-copy{position:relative!important;z-index:1!important;}
html body.spx-public .spx-feature-lead{
  font-size:clamp(15px,1.4vw,18px)!important;
  line-height:1.64!important;
  color:rgba(218,236,255,.76)!important;
  max-width:52ch!important;
  margin:12px 0 22px!important;
}
html body.spx-public .spx-feature-hero-actions{
  display:flex!important;gap:12px!important;flex-wrap:wrap!important;
}
html body.spx-public .spx-feature-hero-visual{
  position:relative!important;z-index:1!important;
  border-radius:24px!important;overflow:hidden!important;
  border:1px solid rgba(126,231,255,.16)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.32)!important;
  aspect-ratio:16/10!important;
}
html body.spx-public .spx-feature-mock{
  width:100%!important;height:100%!important;
  position:relative!important;overflow:hidden!important;
}
html body.spx-public .spx-feature-mock img{
  width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center top!important;
  display:block!important;
}
/* Per-route visual accent border */
html body.spx-public[data-route="/features/zip-export"] .spx-feature-hero-v127::before{
  background:radial-gradient(ellipse 80% 60% at 10% 50%,rgba(96,250,171,.09),transparent 50%),radial-gradient(ellipse 60% 50% at 90% 10%,rgba(37,210,255,.08),transparent 50%)!important;
}
html body.spx-public[data-route="/features/seo-insights"] .spx-feature-hero-v127::before{
  background:radial-gradient(ellipse 80% 60% at 20% 40%,rgba(255,183,77,.08),transparent 50%),radial-gradient(ellipse 60% 50% at 85% 15%,rgba(82,119,255,.08),transparent 50%)!important;
}
html body.spx-public[data-route="/features/flex-forms"] .spx-feature-hero-v127::before{
  background:radial-gradient(ellipse 80% 60% at 15% 45%,rgba(167,139,250,.10),transparent 50%),radial-gradient(ellipse 60% 50% at 88% 12%,rgba(37,210,255,.07),transparent 50%)!important;
}
html body.spx-public[data-route="/features/wordpress-export"] .spx-feature-hero-v127::before{
  background:radial-gradient(ellipse 80% 60% at 12% 40%,rgba(33,117,196,.12),transparent 50%),radial-gradient(ellipse 60% 50% at 88% 15%,rgba(126,231,255,.07),transparent 50%)!important;
}
html body.spx-public .spx-feature-story-v127{
  display:grid!important;
  grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr)!important;
  gap:clamp(20px,3vw,40px)!important;
  max-width:min(1260px,calc(100vw - 36px))!important;
  margin:clamp(40px,5vw,64px) auto!important;
  padding:clamp(24px,3.5vw,44px)!important;
  border-radius:30px!important;
  border:1px solid rgba(218,236,255,.10)!important;
  background:linear-gradient(165deg,rgba(8,15,32,.72),rgba(5,10,22,.52))!important;
  align-items:start!important;
}
html body.spx-public .spx-feature-story-head .eyebrow{margin-bottom:10px!important;}
html body.spx-public .spx-feature-story-head h2{
  font-size:clamp(26px,3.5vw,48px)!important;
  line-height:1.04!important;margin:8px 0 12px!important;
}
html body.spx-public .spx-feature-story-head p{
  color:rgba(218,236,255,.72)!important;
  line-height:1.66!important;
  max-width:62ch!important;
}
html body.spx-public .spx-feature-status-v127{
  padding:22px!important;border-radius:22px!important;
  border:1px solid rgba(126,231,255,.18)!important;
  background:rgba(255,255,255,.045)!important;
  display:grid!important;gap:10px!important;
}
html body.spx-public .spx-feature-status-badge{
  display:inline-block!important;padding:5px 12px!important;
  border-radius:999px!important;font-size:12px!important;
  font-weight:950!important;
}
html body.spx-public .spx-feature-status-badge.is-live{
  background:rgba(96,250,171,.14)!important;color:#7effa3!important;
  border:1px solid rgba(96,250,171,.26)!important;
}
html body.spx-public .spx-feature-status-badge.is-planned{
  background:rgba(255,183,77,.12)!important;color:#ffd080!important;
  border:1px solid rgba(255,183,77,.24)!important;
}
html body.spx-public .spx-feature-status-v127 p{
  color:rgba(218,236,255,.65)!important;font-size:13px!important;
  line-height:1.5!important;margin:0!important;
}
html body.spx-public .spx-feature-status-actions{
  display:grid!important;gap:8px!important;margin-top:6px!important;
}
html body.spx-public .spx-feature-card-grid-v127{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
  max-width:min(1260px,calc(100vw - 36px))!important;
  margin:0 auto clamp(40px,5vw,64px)!important;
}
html body.spx-public .spx-feature-detail-card{
  padding:22px 24px!important;border-radius:24px!important;
  border:1px solid rgba(218,236,255,.10)!important;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
  display:grid!important;gap:9px!important;
  transition:border-color .22s ease,box-shadow .22s ease!important;
}
html body.spx-public .spx-feature-detail-card:hover{
  border-color:rgba(126,231,255,.24)!important;
  box-shadow:0 14px 42px rgba(0,0,0,.16)!important;
}
html body.spx-public .spx-feature-card-num{
  font-size:10px!important;font-weight:950!important;
  text-transform:uppercase!important;letter-spacing:.15em!important;
  color:rgba(126,231,255,.70)!important;
}
html body.spx-public .spx-feature-detail-card h3{
  font-size:18px!important;color:#fff!important;margin:0!important;
}
html body.spx-public .spx-feature-detail-card p{
  color:rgba(218,236,255,.70)!important;font-size:14px!important;
  line-height:1.55!important;margin:0!important;
}
html body.spx-public .spx-feature-cta-strip-v127{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:24px!important;align-items:center!important;
  max-width:min(1260px,calc(100vw - 36px))!important;
  margin:0 auto clamp(40px,5vw,64px)!important;
  padding:clamp(22px,3.5vw,40px)!important;
  border-radius:28px!important;
  border:1px solid rgba(126,231,255,.15)!important;
  background:radial-gradient(circle at 5% 50%,rgba(37,210,255,.10),transparent 36%),linear-gradient(165deg,rgba(8,15,32,.82),rgba(5,10,22,.62))!important;
}
html body.spx-public .spx-feature-cta-copy h2{
  font-size:clamp(22px,2.8vw,36px)!important;margin:0 0 8px!important;
}
html body.spx-public .spx-feature-cta-copy p{
  color:rgba(218,236,255,.70)!important;font-size:14px!important;
  line-height:1.55!important;margin:0!important;max-width:52ch!important;
}
html body.spx-public .spx-feature-cta-actions{
  display:flex!important;gap:10px!important;flex-shrink:0!important;
}
html body.spx-public .spx-related-links-v127{
  max-width:min(1260px,calc(100vw - 36px))!important;
  margin:0 auto clamp(40px,5vw,64px)!important;
}
html body.spx-public .spx-related-links-v127 div{
  display:flex!important;flex-wrap:wrap!important;gap:10px!important;
  margin-top:16px!important;
}
html body.spx-public .spx-related-links-v127 a{
  padding:9px 16px!important;border-radius:14px!important;
  border:1px solid rgba(218,236,255,.13)!important;
  background:rgba(255,255,255,.04)!important;
  font-size:13px!important;font-weight:900!important;
  color:rgba(218,236,255,.82)!important;text-decoration:none!important;
  transition:border-color .2s ease,color .2s ease!important;
}
html body.spx-public .spx-related-links-v127 a:hover{
  border-color:rgba(126,231,255,.30)!important;color:#fff!important;
}
html body.spx-public .spx-feature-faq-v127{
  max-width:min(1260px,calc(100vw - 36px))!important;
  margin:0 auto clamp(60px,8vw,100px)!important;
}

/* ── 5. Support v127: premium hub ── */
html body.spx-public .spx-support-hub-v127{
  position:relative!important;overflow:hidden!important;
  padding:clamp(48px,7vh,90px) clamp(16px,3vw,48px) clamp(32px,4vw,58px)!important;
}
html body.spx-public .spx-support-bg-orbs{
  position:absolute!important;inset:0!important;pointer-events:none!important;
  z-index:0!important;overflow:hidden!important;
}
html body.spx-public .spx-support-bg-orbs span{
  position:absolute!important;border-radius:50%!important;filter:blur(100px)!important;
}
html body.spx-public .spx-support-bg-orbs span:nth-child(1){
  width:700px!important;height:500px!important;
  background:radial-gradient(ellipse,rgba(37,210,255,.07),transparent 70%)!important;
  top:-20%!important;right:0!important;
  animation:spxSupportAurora 20s ease-in-out infinite!important;
}
html body.spx-public .spx-support-bg-orbs span:nth-child(2){
  width:600px!important;height:400px!important;
  background:radial-gradient(ellipse,rgba(82,119,255,.07),transparent 70%)!important;
  bottom:-10%!important;left:-5%!important;
  animation:spxSupportAurora 26s ease-in-out infinite reverse!important;
}
html body.spx-public .spx-support-hero-v127{
  display:grid!important;
  grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr)!important;
  gap:clamp(20px,3vw,40px)!important;
  max-width:min(1180px,100%)!important;
  margin:0 auto clamp(32px,4vw,52px)!important;
  position:relative!important;z-index:1!important;
  align-items:center!important;
}
html body.spx-public .spx-support-hero-copy h1{
  font-size:clamp(34px,5vw,72px)!important;
  line-height:.98!important;margin:10px 0 14px!important;
}
html body.spx-public .spx-support-hero-copy p{
  color:rgba(218,236,255,.72)!important;
  font-size:clamp(15px,1.4vw,18px)!important;
  line-height:1.62!important;max-width:52ch!important;margin:0 0 22px!important;
}
html body.spx-public .spx-support-hero-actions{display:flex!important;gap:12px!important;flex-wrap:wrap!important;}
html body.spx-public .spx-support-stats-v127{
  display:grid!important;gap:10px!important;
  padding:22px!important;border-radius:24px!important;
  border:1px solid rgba(126,231,255,.16)!important;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
  box-shadow:0 18px 54px rgba(0,0,0,.18)!important;
}
html body.spx-public .spx-support-stats-v127 div{
  display:grid!important;gap:4px!important;
  padding:12px 14px!important;border-radius:16px!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(218,236,255,.08)!important;
}
html body.spx-public .spx-support-stats-v127 b{
  color:#fff!important;font-size:15px!important;
}
html body.spx-public .spx-support-stats-v127 small{
  color:rgba(218,236,255,.60)!important;font-size:12px!important;
}
html body.spx-public .spx-support-categories-v127{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  max-width:min(1180px,100%)!important;
  margin:0 auto!important;
  position:relative!important;z-index:1!important;
}
html body.spx-public .spx-support-cat-v127{
  display:grid!important;
  grid-template-columns:auto 1fr!important;
  gap:14px!important;align-items:start!important;
  padding:20px 18px!important;border-radius:22px!important;
  border:1px solid rgba(218,236,255,.10)!important;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
  transition:border-color .22s ease,box-shadow .22s ease!important;
}
html body.spx-public .spx-support-cat-v127:hover{
  border-color:rgba(126,231,255,.24)!important;
  box-shadow:0 14px 42px rgba(0,0,0,.16)!important;
}
html body.spx-public .spx-support-cat-icon{
  display:grid!important;place-items:center!important;
  width:40px!important;height:40px!important;border-radius:14px!important;
  background:rgba(126,231,255,.10)!important;
  border:1px solid rgba(126,231,255,.18)!important;
  flex-shrink:0!important;
}
html body.spx-public .spx-support-cat-icon svg{color:#7ee7ff!important;}
html body.spx-public .spx-support-cat-v127 b{
  display:block!important;font-size:15px!important;color:#fff!important;
  margin-bottom:5px!important;
}
html body.spx-public .spx-support-cat-v127 p{
  color:rgba(218,236,255,.65)!important;font-size:13px!important;
  line-height:1.5!important;margin:0!important;
}
html body.spx-public .spx-support-form-section-v127{
  display:grid!important;
  grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr)!important;
  gap:clamp(24px,4vw,52px)!important;
  max-width:min(1180px,calc(100vw - 36px))!important;
  margin:clamp(40px,5vw,64px) auto!important;
  padding:clamp(22px,3.5vw,42px)!important;
  border-radius:30px!important;
  border:1px solid rgba(218,236,255,.12)!important;
  background:linear-gradient(165deg,rgba(8,15,32,.80),rgba(5,10,22,.58))!important;
  align-items:start!important;
}
html body.spx-public .spx-support-form-header{display:grid!important;gap:10px!important;}
html body.spx-public .spx-support-form-header h2{
  font-size:clamp(22px,3vw,38px)!important;margin:6px 0!important;
}
html body.spx-public .spx-support-form-header p{
  color:rgba(218,236,255,.68)!important;font-size:14px!important;
  line-height:1.58!important;margin:0!important;max-width:42ch!important;
}
html body.spx-public .spx-support-form-trust{
  display:flex!important;flex-wrap:wrap!important;gap:8px!important;
  margin-top:4px!important;
}
html body.spx-public .spx-support-form-trust span{
  padding:5px 11px!important;border-radius:999px!important;
  border:1px solid rgba(96,250,171,.22)!important;
  background:rgba(96,250,171,.07)!important;
  color:#7effa3!important;font-size:11px!important;font-weight:900!important;
}
html body.spx-public .spx-support-form-v127{
  display:grid!important;gap:12px!important;
}
html body.spx-public .spx-support-form-row{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;
}
html body.spx-public .spx-support-field-grow{grid-column:1/-1!important;}
html body.spx-public .spx-support-faq-v127{
  max-width:min(1180px,calc(100vw - 36px))!important;
  margin:0 auto clamp(60px,8vw,100px)!important;
}

/* ── 6. Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  html body.spx-public .spx-auth-bg-orbs span,
  html body.spx-public .spx-support-bg-orbs span,
  html body.spx-public .spx-feature-hero-v127::before{animation:none!important;}
}

/* ── 7. Mobile responsive ── */
@media(max-width:980px){
  html body.spx-public .spx-dashboard-command-v127{
    grid-template-columns:1fr!important;
    border-radius:26px!important;
    width:calc(100vw - 28px)!important;
  }
  html body.spx-public .spx-dashboard-command-v127 .spx-dash-visual{aspect-ratio:16/9!important;}
  html body.spx-public .spx-feature-hero-v127{
    grid-template-columns:1fr!important;min-height:auto!important;
    padding:clamp(40px,6vw,70px) clamp(16px,4vw,32px)!important;
  }
  html body.spx-public .spx-feature-hero-visual{order:-1!important;}
  html body.spx-public .spx-feature-story-v127,
  html body.spx-public .spx-support-hero-v127{grid-template-columns:1fr!important;}
  html body.spx-public .spx-feature-card-grid-v127{grid-template-columns:1fr!important;}
  html body.spx-public .spx-feature-cta-strip-v127{grid-template-columns:1fr!important;}
  html body.spx-public .spx-feature-cta-actions{flex-wrap:wrap!important;}
  html body.spx-public .spx-support-categories-v127{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  html body.spx-public .spx-support-form-section-v127{
    grid-template-columns:1fr!important;
    margin:clamp(30px,4vw,48px) auto!important;
  }
  html body.spx-public .auth-shell.spx-auth-v127,
  html body.spx-public .spx-auth-v127 .auth-shell{
    grid-template-columns:1fr!important;
  }
  html body.spx-public .auth-shell.spx-auth-v127 .auth-story{display:none!important;}
  html body.spx-public .auth-shell.spx-auth-v127 .auth-card{order:1!important;}
  html body.spx-public .spx-auth-field-row-v127{grid-template-columns:1fr!important;}
  html body.spx-public .spx-support-form-row{grid-template-columns:1fr!important;}
}
@media(max-width:560px){
  html body.spx-public .auth-shell.spx-auth-v127{padding:16px!important;}
  html body.spx-public .auth-shell.spx-auth-v127 .auth-card{padding:20px 16px!important;border-radius:22px!important;}
  html body.spx-public .spx-support-categories-v127{grid-template-columns:1fr!important;}
  html body.spx-public .spx-feature-cta-strip-v127,
  html body.spx-public .spx-feature-story-v127,
  html body.spx-public .spx-support-form-section-v127{padding:18px!important;border-radius:20px!important;}
  html body.spx-public .spx-feature-cta-actions{flex-direction:column!important;}
  html body.spx-public .auth-story-points{grid-template-columns:1fr!important;}
}
  }
  html body.spx-public.spx-mobile-nav-open{overflow:hidden!important;}
  html body.spx-public .site-header.spx-nav-v26 .site-nav>a,
  html body.spx-public .site-header.spx-nav-v26 .nav-group>a{
    width:100%!important;
    min-height:46px!important;
    justify-content:space-between!important;
    padding:11px 13px!important;
    border-radius:16px!important;
    color:rgba(235,246,255,.86)!important;
    background:rgba(255,255,255,.035)!important;
    border:1px solid rgba(255,255,255,.07)!important;
  }
  html body.spx-public .site-header.spx-nav-v26 .site-nav>a:hover,
  html body.spx-public .site-header.spx-nav-v26 .nav-group>a:hover,
  html body.spx-public .site-header.spx-nav-v26 .nav-group.is-mobile-open>a{
    background:rgba(126,231,255,.10)!important;
    border-color:rgba(126,231,255,.20)!important;
    transform:none!important;
  }
  html body.spx-public .site-header.spx-nav-v26 .nav-menu,
  html body.spx-public .site-header.spx-nav-v26 .nav-group-mega .mega-menu,
  html body.spx-public .site-header.spx-nav-v26 .resources-mega .mega-menu{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    display:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:8px 0 4px!important;
    padding:10px!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    border-radius:20px!important;
    background:rgba(1,6,15,.54)!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  html body.spx-public .site-header.spx-nav-v26 .nav-group.is-mobile-open>.nav-menu{display:grid!important;}
  html body.spx-public .spx-mega-compact-grid,
  html body.spx-public .spx-resource-list,
  html body.spx-public .spx-mega-secondary-row{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  html body.spx-public .nav-feature-link,
  html body.spx-public .spx-resource-list a,
  html body.spx-public .spx-mega-secondary-row a{
    min-width:0!important;
    width:100%!important;
  }
  html body.spx-public .nav-mobile-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin-top:4px!important;
  }
  html body.spx-public .nav-mobile-actions .btn{
    width:100%!important;
    min-height:44px!important;
    padding:10px 12px!important;
  }
  /* Mobile theme toggle in nav overlay: spans full width, looks like a row */
  html body.spx-public .nav-mobile-actions .spx-nav-mobile-theme-toggle{
    grid-column:1 / -1!important;
    width:100%!important;
    min-height:44px!important;
    justify-content:center!important;
    border-radius:16px!important;
    border:1px solid rgba(218,236,255,.14)!important;
    background:rgba(255,255,255,.055)!important;
    color:rgba(235,246,255,.88)!important;
    font-size:13px!important;
    font-weight:900!important;
    gap:10px!important;
    padding:10px 14px!important;
  }
  html[data-theme="light"] body.spx-public .nav-mobile-actions .spx-nav-mobile-theme-toggle{
    background:rgba(255,255,255,.80)!important;
    border-color:rgba(15,23,42,.12)!important;
    color:#0f172a!important;
  }

  html body.spx-public .spx-home-main .spx-hero-v26[data-hero-scrollstory]{
    min-height:auto!important;
    height:auto!important;
    padding:0!important;
    overflow:hidden!important;
    background:linear-gradient(180deg,#020611 0%,#07111f 100%)!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage{
    position:relative!important;
    min-height:auto!important;
    height:auto!important;
    display:grid!important;
    gap:22px!important;
    padding:104px 18px 38px!important;
    overflow:hidden!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky{
    position:relative!important;
    inset:auto!important;
    order:2!important;
    height:clamp(220px,48vw,320px)!important;
    min-height:0!important;
    overflow:hidden!important;
    border-radius:28px!important;
    border:1px solid rgba(126,231,255,.13)!important;
    background:radial-gradient(circle at 70% 12%,rgba(126,231,255,.18),transparent 40%),rgba(255,255,255,.035)!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-shell{
    position:relative!important;
    order:1!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    z-index:3!important;
    transform:none!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
    width:100%!important;
    max-width:680px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-kicker{
    font-size:11px!important;
    letter-spacing:.08em!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
    width:100%!important;
    max-width:12ch!important;
    font-size:clamp(42px,12vw,72px)!important;
    line-height:.93!important;
    letter-spacing:-.065em!important;
    margin:14px 0 14px!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1::after{margin-top:18px!important;width:58%!important;}
  html body.spx-public .spx-v26-lead,
  html body.spx-public .spx-v26-support{
    max-width:62ch!important;
    font-size:15.5px!important;
    line-height:1.55!important;
  }
  html body.spx-public .spx-v26-support{margin-top:12px!important;}
  html body.spx-public .spx-v26-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:18px!important;
  }
  html body.spx-public .spx-v26-actions .btn{width:100%!important;min-height:48px!important;white-space:normal!important;}
  html body.spx-public .spx-v26-note{font-size:12.5px!important;margin-top:12px!important;}
  html body.spx-public .v26-product-atmosphere{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:min(720px,150vw)!important;
    height:clamp(220px,48vw,320px)!important;
    transform:translate(-50%,-50%)!important;
    opacity:.64!important;
    filter:none!important;
  }
  html body.spx-public .v26-product-layer{display:none!important;}
  html body.spx-public .spx-v26-what-crisp-layer{
    position:relative!important;
    order:3!important;
    left:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:720px!important;
    height:auto!important;
    margin:0 auto!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
    z-index:4!important;
  }
  html body.spx-public .spx-v26-what-crisp-layer .spx-v26-builder-view-shell,
  html body.spx-public .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    transform:none!important;
  }
  html body.spx-public .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{display:none!important;}
  html body.spx-public .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    padding:18px!important;
    border-radius:24px!important;
    transform:none!important;
    overflow:visible!important;
  }
  html body.spx-public .spx-v26-what-console{grid-template-columns:1fr!important;gap:12px!important;}
  html body.spx-public .spx-v26-what-panel{grid-template-columns:1fr!important;}
  html body.spx-public .spx-v26-what-footer{display:flex!important;flex-wrap:wrap!important;gap:8px!important;}
  html body.spx-public .spx-v26-explain,
  html body.spx-public .spx-v26-bottom-fade{display:none!important;}

  html body.spx-public #why-spixor.spx-how-v63{
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:42px 18px!important;
    overflow:hidden!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track,
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{
    min-height:0!important;
    height:auto!important;
    width:100%!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    min-height:0!important;
    width:100%!important;
    max-width:760px!important;
    margin:0 auto!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:22px!important;
    transform:none!important;
    opacity:1!important;
    overflow:visible!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy,
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{max-height:none!important;opacity:1!important;transform:none!important;margin:0 0 16px!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{font-size:clamp(32px,9vw,52px)!important;line-height:1!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav{display:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{display:grid!important;gap:12px!important;min-height:0!important;max-height:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step,
  html body.spx-public #why-spixor.spx-how-v63 .why52-step:not(.is-active){
    position:relative!important;
    inset:auto!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    min-height:0!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    display:grid!important;
    gap:14px!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual:not(.is-active){
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    width:100%!important;
    height:auto!important;
    max-height:360px!important;
    object-fit:cover!important;
    border-radius:22px!important;
    box-shadow:0 18px 52px rgba(0,0,0,.24)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual figcaption{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    top:auto!important;
    width:100%!important;
    max-width:none!important;
    margin:-12px 0 0!important;
    padding:16px!important;
    border-radius:20px!important;
    opacity:1!important;
    transform:none!important;
  }

  html body.spx-public #export.spx-export-launch-rework-v128,
  html body.spx-public #pricing.spx-pricing-launch-balanced,
  html body.spx-public #roadmap.spx-alpha-story-v128,
  html body.spx-public .site-footer.spx-footer-v3{
    max-width:calc(100vw - 28px)!important;
    width:calc(100vw - 28px)!important;
    margin:44px auto!important;
    padding:20px!important;
    border-radius:26px!important;
  }
  html body.spx-public .spx-export-head-v128,
  html body.spx-public .spx-export-proof-v128,
  html body.spx-public .spx-export-timeline-v128,
  html body.spx-public .spx-export-grid-v128,
  html body.spx-public .spx-price-grid--balanced,
  html body.spx-public .spx-alpha-story-v128,
  html body.spx-public .spx-alpha-narrative-v128,
  html body.spx-public .spx-footer-shell,
  html body.spx-public .spx-footer-columns{
    grid-template-columns:1fr!important;
  }
  html body.spx-public .spx-export-proof-v128{display:grid!important;}
  html body.spx-public .spx-export-step-v128,
  html body.spx-public .spx-export-card-v128,
  html body.spx-public .spx-price-card-v128{padding:16px!important;border-radius:22px!important;}
  html body.spx-public .spx-price-card-v128{min-height:0!important;}
  html body.spx-public .spx-orbit-modal-v128{align-items:start!important;place-items:start center!important;padding:12px!important;overflow:auto!important;}
  html body.spx-public .spx-orbit-modal-card{
    width:100%!important;
    max-height:calc(100svh - 24px)!important;
    overflow:auto!important;
    padding:18px!important;
    border-radius:24px!important;
  }
  html body.spx-public .spx-orbit-modal-grid,
  html body.spx-public .spx-orbit-modal-actions{grid-template-columns:1fr!important;display:grid!important;}
  html body.spx-public .spx-orbit-modal-actions .btn{width:100%!important;}
  html body.spx-public .spx-public-editor-bar,
  html body.spx-public .spx-public-editor-bar--pro{
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    width:auto!important;
    transform:none!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:10px!important;
  }
  html body.spx-public .spx-public-editor-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;}
  html body.spx-public .spx-public-media-drawer{
    left:8px!important;
    right:8px!important;
    bottom:calc(92px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    max-height:calc(100svh - 132px)!important;
  }
}

@media(min-width:1101px){
  html body.spx-public .site-header.spx-nav-v26 .nav-group > .nav-menu{
    transition:opacity .2s ease,transform .2s ease!important;
  }
  html body.spx-public .site-header.spx-nav-v26 .nav-group:hover > .nav-menu,
  html body.spx-public .site-header.spx-nav-v26 .nav-group:focus-within > .nav-menu{
    display:grid!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate(-50%,0)!important;
  }
}

@media(max-width:1100px){
  html body.spx-public header.site-header.spx-nav-v26 nav.site-nav[data-site-nav]{
    left:14px!important;
    right:auto!important;
    width:calc(100vw - 28px)!important;
    min-width:0!important;
    max-width:calc(100vw - 28px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-track,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-track,
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
    min-height:0!important;
    height:auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-sticky,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-sticky,
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    position:relative!important;
    top:auto!important;
    min-height:0!important;
    height:auto!important;
    width:100%!important;
    max-width:760px!important;
    margin:0 auto!important;
    padding:0!important;
    grid-template-columns:1fr!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    position:relative!important;
    inset:auto!important;
    min-height:0!important;
    height:auto!important;
    opacity:1!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual img,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-height:320px!important;
  }
}

/* A8.125 — Login email 2FA step + deployment-safe panel styling */
html body.spx-public .spx-login-2fa-panel[hidden],
html body.spx-public [data-login-primary-fields][hidden]{display:none!important}
html body.spx-public .spx-login-2fa-panel{display:grid!important;gap:12px!important;padding:16px!important;border-radius:22px!important;border:1px solid rgba(107,232,255,.20)!important;background:radial-gradient(420px 180px at 0% 0%,rgba(34,211,238,.13),transparent 64%),rgba(255,255,255,.045)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important}
html body.spx-public .spx-login-2fa-panel .spx-login-2fa-kicker{display:inline-flex!important;align-items:center!important;width:max-content!important;padding:7px 10px!important;border-radius:999px!important;border:1px solid rgba(107,232,255,.20)!important;background:rgba(34,211,238,.08)!important;color:#9eeeff!important;font-size:11px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.11em!important}
html body.spx-public .spx-login-2fa-panel strong{color:var(--text)!important;font-size:18px!important;line-height:1.25!important}
html body.spx-public .spx-login-2fa-panel p{margin:0!important;color:var(--secondary)!important;line-height:1.55!important}
html body.spx-public .spx-login-2fa-panel input[data-login-2fa-code]{text-align:center!important;font-size:24px!important;font-weight:950!important;letter-spacing:.28em!important;font-variant-numeric:tabular-nums!important;padding-left:calc(14px + .28em)!important}
html body.spx-public .spx-login-2fa-back{appearance:none!important;border:0!important;background:transparent!important;color:var(--secondary)!important;width:max-content!important;padding:0!important;font-weight:900!important;text-decoration:none!important;cursor:pointer!important}
html body.spx-public .spx-login-2fa-back:hover{color:var(--spx-a860-cyan,var(--cyan))!important;text-decoration:underline!important}

/* A8.124.1 — route-safe How cards: keep right-side explanation blocks styled even after older override layers. */
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  position:absolute!important;
  left:clamp(18px,3.2vw,56px)!important;
  right:auto!important;
  bottom:clamp(18px,4vh,46px)!important;
  z-index:30!important;
  display:grid!important;
  gap:7px!important;
  width:min(390px,calc(100% - 46px))!important;
  max-width:min(390px,calc(100% - 46px))!important;
  margin:0!important;
  padding:18px 20px!important;
  border-radius:22px!important;
  color:#f4fbff!important;
  background:
    linear-gradient(135deg,rgba(9,17,34,.88),rgba(4,10,22,.74))!important;
  border:1px solid rgba(126,236,255,.24)!important;
  box-shadow:
    0 24px 76px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(12,24,48,.20)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.12)!important;
  backdrop-filter:blur(16px) saturate(1.12)!important;
  overflow:hidden!important;
  opacity:.98!important;
  transform:translate3d(0,0,0)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(220px 120px at 18% 0%,rgba(34,211,238,.18),transparent 68%),
    linear-gradient(90deg,rgba(34,211,238,.22),transparent 58%)!important;
  opacity:.72!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:16px!important;
  bottom:16px!important;
  width:3px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(34,211,238,.95),rgba(99,102,241,.42))!important;
  box-shadow:0 0 22px rgba(34,211,238,.38)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-kicker{
  position:relative!important;
  z-index:1!important;
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  border:1px solid rgba(126,236,255,.22)!important;
  background:rgba(34,211,238,.08)!important;
  color:#9eeeff!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.13em!important;
  line-height:1!important;
  text-transform:uppercase!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card b{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  color:#f7fcff!important;
  font-size:clamp(17px,1.35vw,22px)!important;
  line-height:1.15!important;
  letter-spacing:-.035em!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card p{
  position:relative!important;
  z-index:1!important;
  margin:0!important;
  color:rgba(228,241,255,.76)!important;
  font-size:clamp(13px,1vw,15px)!important;
  line-height:1.52!important;
}
@media(max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    position:relative!important;
    left:auto!important;
    bottom:auto!important;
    width:auto!important;
    max-width:none!important;
    margin:12px 0 0!important;
    padding:16px!important;
    border-radius:18px!important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   A8.126 — Dashboard placement + pages rework + mobile + scroll polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scroll animations — smoother, no popping ───────────────────────────── */
html body.spx-public .reveal{
  will-change:opacity,transform!important;
}
html body.spx-public .reveal:nth-child(2){transition-delay:.08s!important}
html body.spx-public .reveal:nth-child(3){transition-delay:.15s!important}
html body.spx-public .reveal:nth-child(4){transition-delay:.22s!important}

/* ── Dashboard Command Center — v126 premium positioning ─────────────────── */
html body.spx-public .spx-dashboard-command-v126{
  /* Desktop scroll story: give the section proper scroll height.            */
  /* The JS controller handles the sticky behaviour when this height is set. */
}
@media(min-width:981px){
  html body.spx-public #dashboard.spx-dashboard-command-v126{
    margin-top:0!important;
    margin-bottom:0!important;
  }
}
/* Ensure the section transition between Export and Dashboard feels cohesive */
html body.spx-public #export + #dashboard{
  border-top:1px solid rgba(126,231,255,.08)!important;
}
/* Dashboard→Pricing transition */
html body.spx-public #dashboard + .spx-pricing-section{
  border-top:1px solid rgba(126,231,255,.08)!important;
}

/* ── Homepage section transitions — no hard edges ───────────────────────── */
html body.spx-public .spx-export-section,
html body.spx-public .spx-summary-roadmap{
  position:relative!important;
}
html body.spx-public .spx-export-section::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(126,231,255,.12),transparent)!important;
  pointer-events:none!important;
}

/* ── Auth pages — premium card refinements ──────────────────────────────── */
html body.spx-public .auth-shell.auth-shell-rich{
  min-height:100svh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(24px,4vw,56px)!important;
  padding:clamp(88px,10vw,120px) var(--side) clamp(48px,6vw,72px)!important;
  flex-wrap:wrap!important;
}
html body.spx-public .auth-shell.auth-shell-rich .auth-card{
  flex:0 0 auto!important;
  width:min(440px,100%)!important;
  padding:clamp(24px,3vw,40px)!important;
  border-radius:28px!important;
  border:1px solid rgba(126,231,255,.14)!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(24,201,245,.09),transparent 44%),
    linear-gradient(145deg,rgba(7,14,28,.72),rgba(4,8,18,.54))!important;
  backdrop-filter:blur(20px)!important;
  box-shadow:0 40px 120px rgba(0,0,0,.32)!important;
}
html body.spx-public .auth-shell.auth-shell-rich .auth-card h1{
  font-size:clamp(26px,3.2vw,36px)!important;
  line-height:1.08!important;
  letter-spacing:-.048em!important;
  margin:8px 0 12px!important;
}
html body.spx-public .auth-shell.auth-shell-rich .auth-card>p{
  font-size:14.5px!important;
  line-height:1.62!important;
  color:rgba(218,236,255,.66)!important;
  margin:0 0 20px!important;
}
html body.spx-public .auth-shell.auth-shell-rich .auth-form label{
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  color:rgba(218,236,255,.54)!important;
  margin-bottom:14px!important;
}
html body.spx-public .auth-shell.auth-shell-rich .auth-form input[type="email"],
html body.spx-public .auth-shell.auth-shell-rich .auth-form input[type="password"],
html body.spx-public .auth-shell.auth-shell-rich .auth-form input[type="text"]:not(.sr-only){
  padding:11px 14px!important;
  border-radius:12px!important;
  border:1px solid rgba(126,231,255,.18)!important;
  background:rgba(255,255,255,.05)!important;
  color:#f0faff!important;
  font-size:15px!important;
  transition:border-color .18s ease,box-shadow .18s ease!important;
}
html body.spx-public .auth-shell.auth-shell-rich .auth-form input:focus{
  outline:none!important;
  border-color:rgba(24,201,245,.42)!important;
  box-shadow:0 0 0 3px rgba(24,201,245,.12)!important;
}
html body.spx-public .auth-shell.auth-shell-rich .auth-links{
  display:flex!important;
  gap:16px!important;
  margin-top:18px!important;
  font-size:13px!important;
}
html body.spx-public .auth-shell.auth-shell-rich .auth-links a{
  color:rgba(218,236,255,.52)!important;
  text-decoration:none!important;
  transition:color .16s ease!important;
}
html body.spx-public .auth-shell.auth-shell-rich .auth-links a:hover{
  color:#a8eeff!important;
}
html body.spx-public .auth-shell.auth-shell-rich .auth-story{
  flex:1 1 280px!important;
  max-width:360px!important;
}
html body.spx-public .auth-shell.auth-shell-rich .auth-story h2{
  font-size:clamp(22px,2.8vw,30px)!important;
  line-height:1.1!important;
  letter-spacing:-.042em!important;
  margin:10px 0 12px!important;
}
html body.spx-public .auth-shell.auth-shell-rich .auth-story p{
  font-size:14px!important;
  line-height:1.64!important;
  color:rgba(218,236,255,.62)!important;
}
html body.spx-public .auth-story-points{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-top:18px!important;
}
html body.spx-public .auth-story-points span{
  display:inline-flex!important;
  padding:5px 12px!important;
  border-radius:999px!important;
  border:1px solid rgba(126,231,255,.18)!important;
  background:rgba(255,255,255,.04)!important;
  font-size:12px!important;
  font-weight:860!important;
  color:rgba(218,236,255,.68)!important;
}
/* Steps indicator in register */
html body.spx-public .auth-shell .steps{
  display:flex!important;
  gap:6px!important;
  margin-bottom:20px!important;
}
html body.spx-public .auth-shell .steps span{
  width:24px!important;
  height:24px!important;
  border-radius:50%!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:11px!important;
  font-weight:900!important;
  border:1px solid rgba(126,231,255,.18)!important;
  background:rgba(255,255,255,.04)!important;
  color:rgba(218,236,255,.44)!important;
}
html body.spx-public .auth-shell .steps span.is-active{
  border-color:var(--cyan-2)!important;
  background:rgba(24,201,245,.14)!important;
  color:var(--cyan-2)!important;
}
/* Google button */
html body.spx-public .google-btn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:100%!important;
  padding:11px 18px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.06)!important;
  color:#e8f5ff!important;
  font-size:14px!important;
  font-weight:860!important;
  text-decoration:none!important;
  cursor:pointer!important;
  transition:background .18s ease,border-color .18s ease!important;
  margin-top:12px!important;
}
html body.spx-public .google-btn:hover:not(.is-disabled){
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(255,255,255,.22)!important;
}
html body.spx-public .google-btn.is-disabled{
  opacity:.44!important;
  cursor:not-allowed!important;
}
/* Auth mobile */
@media(max-width:680px){
  html body.spx-public .auth-shell.auth-shell-rich{
    flex-direction:column!important;
    align-items:stretch!important;
    padding:88px 16px 40px!important;
    gap:20px!important;
  }
  html body.spx-public .auth-shell.auth-shell-rich .auth-card{
    width:100%!important;
    max-width:none!important;
  }
  html body.spx-public .auth-shell.auth-shell-rich .auth-story{
    display:none!important;
  }
}

/* ── Support page — premium hub improvements ────────────────────────────── */
html body.spx-public .spx-support-page-v62{
  max-width:min(1200px,calc(100% - 32px))!important;
  margin:0 auto!important;
  padding:clamp(96px,10vw,128px) 0 clamp(48px,6vw,72px)!important;
}
html body.spx-public .spx-support-hero-v62{
  display:grid!important;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)!important;
  gap:clamp(24px,4vw,52px)!important;
  align-items:start!important;
  margin-bottom:clamp(32px,4vw,56px)!important;
}
html body.spx-public .spx-support-hero-copy h1{
  font-size:clamp(30px,4.2vw,54px)!important;
  line-height:1.05!important;
  letter-spacing:-.048em!important;
  margin:8px 0 14px!important;
}
html body.spx-public .spx-support-hero-copy p{
  font-size:clamp(14px,1.3vw,17px)!important;
  line-height:1.66!important;
  color:rgba(218,236,255,.68)!important;
  max-width:52ch!important;
  margin:0 0 22px!important;
}
html body.spx-public .spx-support-hero-actions{
  display:flex!important;
  gap:12px!important;
  flex-wrap:wrap!important;
}
html body.spx-public .spx-support-status-card{
  padding:clamp(18px,2.4vw,28px)!important;
  border-radius:24px!important;
  border:1px solid rgba(126,231,255,.14)!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(24,201,245,.09),transparent 48%),
    linear-gradient(145deg,rgba(7,14,28,.62),rgba(4,8,18,.44))!important;
}
html body.spx-public .spx-support-status-card>span{
  display:block!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
  color:var(--cyan-2)!important;
  margin-bottom:8px!important;
}
html body.spx-public .spx-support-status-card b{
  display:block!important;
  font-size:17px!important;
  font-weight:900!important;
  margin-bottom:10px!important;
}
html body.spx-public .spx-support-status-card p{
  font-size:13.5px!important;
  line-height:1.58!important;
  color:rgba(218,236,255,.62)!important;
  margin:0 0 12px!important;
}
html body.spx-public .spx-support-status-card ul{
  padding:0!important;
  list-style:none!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
}
html body.spx-public .spx-support-status-card ul li{
  font-size:13px!important;
  color:rgba(218,236,255,.64)!important;
  padding-left:14px!important;
  position:relative!important;
}
html body.spx-public .spx-support-status-card ul li::before{
  content:"›"!important;
  position:absolute!important;
  left:0!important;
  color:var(--cyan-2)!important;
}
html body.spx-public .spx-support-route-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(10px,1.4vw,18px)!important;
  margin-bottom:clamp(32px,4vw,52px)!important;
}
html body.spx-public .spx-support-route-grid article{
  padding:clamp(16px,2vw,24px)!important;
  border-radius:20px!important;
  border:1px solid rgba(126,231,255,.12)!important;
  background:rgba(255,255,255,.032)!important;
  transition:border-color .2s ease,background .2s ease!important;
}
html body.spx-public .spx-support-route-grid article:hover{
  border-color:rgba(126,231,255,.22)!important;
  background:rgba(255,255,255,.054)!important;
}
html body.spx-public .spx-support-route-grid article>span{
  display:block!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.12em!important;
  color:var(--cyan-2)!important;
  margin-bottom:8px!important;
}
html body.spx-public .spx-support-route-grid article b{
  display:block!important;
  font-size:15px!important;
  font-weight:900!important;
  margin-bottom:6px!important;
}
html body.spx-public .spx-support-route-grid article p{
  font-size:13px!important;
  line-height:1.58!important;
  color:rgba(218,236,255,.60)!important;
  margin:0!important;
}
@media(max-width:900px){
  html body.spx-public .spx-support-hero-v62{
    grid-template-columns:1fr!important;
  }
  html body.spx-public .spx-support-status-card{
    display:none!important;
  }
  html body.spx-public .spx-support-route-grid{
    grid-template-columns:repeat(2,1fr)!important;
  }
}
@media(max-width:480px){
  html body.spx-public .spx-support-route-grid{
    grid-template-columns:1fr!important;
  }
}
html body.spx-public .spx-support-workspace-v62{
  padding:clamp(32px,4vw,52px) clamp(20px,3vw,40px)!important;
  border-radius:28px!important;
  border:1px solid rgba(126,231,255,.12)!important;
  background:
    radial-gradient(circle at 4% 0%,rgba(24,201,245,.07),transparent 44%),
    rgba(255,255,255,.026)!important;
  margin-bottom:clamp(40px,5vw,64px)!important;
}
html body.spx-public .spx-support-form-intro h2{
  font-size:clamp(18px,2.2vw,26px)!important;
  line-height:1.1!important;
  letter-spacing:-.04em!important;
  margin:4px 0 10px!important;
}
html body.spx-public .spx-support-form-intro p{
  font-size:14px!important;
  color:rgba(218,236,255,.64)!important;
  margin:0 0 6px!important;
}
html body.spx-public .spx-support-mini-list{
  display:flex!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  margin:12px 0 0!important;
}
html body.spx-public .spx-support-mini-list span{
  padding:4px 10px!important;
  border-radius:999px!important;
  border:1px solid rgba(126,231,255,.14)!important;
  background:rgba(255,255,255,.04)!important;
  font-size:12px!important;
  color:rgba(218,236,255,.58)!important;
}
/* Support form */
html body.spx-public .spx-public-support-form-v62 label{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  color:rgba(218,236,255,.50)!important;
  margin-bottom:14px!important;
}
html body.spx-public .spx-public-support-form-v62 input,
html body.spx-public .spx-public-support-form-v62 select,
html body.spx-public .spx-public-support-form-v62 textarea{
  padding:10px 13px!important;
  border-radius:11px!important;
  border:1px solid rgba(126,231,255,.16)!important;
  background:rgba(255,255,255,.05)!important;
  color:#f0faff!important;
  font-size:14px!important;
  transition:border-color .16s ease!important;
}
html body.spx-public .spx-public-support-form-v62 input:focus,
html body.spx-public .spx-public-support-form-v62 select:focus,
html body.spx-public .spx-public-support-form-v62 textarea:focus{
  outline:none!important;
  border-color:rgba(24,201,245,.38)!important;
  box-shadow:0 0 0 3px rgba(24,201,245,.10)!important;
}

/* ── Feature pages — unique visual placeholder per type ─────────────────── */
html body.spx-public .spx-feature-hero .product-frame.spx-mock-builder::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(135deg,rgba(7,14,28,.9),rgba(4,8,18,.7))!important;
  border-radius:inherit!important;
  z-index:0!important;
}
html body.spx-public .spx-feature-hero .product-frame{
  position:relative!important;
  overflow:hidden!important;
}
html body.spx-public .spx-feature-hero .product-frame img{
  position:relative!important;
  z-index:1!important;
}
/* When image fails / is a placeholder, show a branded gradient mockup */
html body.spx-public .spx-feature-hero .product-frame img[src=""],
html body.spx-public .spx-feature-hero .product-frame img:not([src]){
  display:none!important;
}
html body.spx-public .spx-feature-hero .product-frame:has(img[src=""]),
html body.spx-public .spx-feature-hero .product-frame:not(:has(img)){
  background:
    radial-gradient(ellipse at 30% 20%,rgba(24,201,245,.22),transparent 52%),
    radial-gradient(ellipse at 75% 75%,rgba(37,99,235,.18),transparent 48%),
    linear-gradient(135deg,rgba(7,14,28,.9),rgba(4,8,18,.7))!important;
}

/* ── Feature card grid — no eyebrow on each card (cleaned up) ───────────── */
html body.spx-public .spx-feature-card-grid .feature-card .eyebrow{
  display:none!important;
}
html body.spx-public .spx-feature-card-grid .feature-card{
  position:relative!important;
  padding-top:clamp(20px,2.4vw,32px)!important;
}
html body.spx-public .spx-feature-card-grid .feature-card::before{
  content:""!important;
  display:block!important;
  width:28px!important;
  height:3px!important;
  border-radius:2px!important;
  background:var(--cyan-2)!important;
  margin-bottom:14px!important;
  opacity:.7!important;
}

/* ── Pricing — orbit card footer note ───────────────────────────────────── */
html body.spx-public .spx-orbit-note{
  display:block!important;
  font-size:12px!important;
  color:rgba(218,236,255,.44)!important;
  margin-top:6px!important;
  line-height:1.5!important;
}

/* ── Hero — builder image should never hard-pop out ─────────────────────── */
html body.spx-public .v26-product-atmosphere{
  transition:opacity .62s cubic-bezier(.22,.82,.18,1)!important;
}
html body.spx-public .spx-v26-builder-view-layer{
  transition:opacity .48s cubic-bezier(.22,.82,.18,1)!important;
}

/* ── FAQ modal — premium refinement ─────────────────────────────────────── */
html body.spx-public .spx-faq-modal.is-open{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
html body.spx-public .spx-faq-dialog{
  max-width:min(520px,calc(100vw - 32px))!important;
  padding:clamp(20px,2.8vw,36px)!important;
  border-radius:24px!important;
  border:1px solid rgba(126,231,255,.16)!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(24,201,245,.10),transparent 48%),
    linear-gradient(145deg,rgba(9,18,36,.92),rgba(5,10,22,.88))!important;
  box-shadow:0 40px 120px rgba(0,0,0,.44)!important;
  backdrop-filter:blur(24px)!important;
}

/* ── Mobile — comprehensive breakpoint fixes ─────────────────────────────── */
@media(max-width:1100px){
  /* Nav overlay full height on tablet */
  html body.spx-public .site-header.is-open [data-site-nav]{
    max-height:calc(100svh - 72px)!important;
    overflow-y:auto!important;
  }
}

@media(max-width:980px){
  /* Hero — mobile static layout, no scroll story issues */
  html body.spx-public .spx-hero-v26{
    min-height:auto!important;
    padding-top:88px!important;
  }
  html body.spx-public .spx-v26-shell{
    padding-bottom:40px!important;
  }
  html body.spx-public .spx-v26-copy h1{
    font-size:clamp(34px,8vw,52px)!important;
    letter-spacing:-.05em!important;
  }
  /* Export section mobile */
  html body.spx-public .spx-export-head-v128{
    flex-direction:column!important;
    gap:16px!important;
  }
  html body.spx-public .spx-export-timeline-v128{
    flex-direction:column!important;
    gap:10px!important;
  }
  html body.spx-public .spx-export-grid.spx-export-grid-v128{
    grid-template-columns:1fr!important;
  }
  /* Pricing cards stack */
  html body.spx-public .spx-price-grid.spx-price-grid--balanced{
    grid-template-columns:1fr!important;
    max-width:480px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  /* Pricing standalone */
  html body.spx-public .spx-pricing-section.standalone .spx-price-grid{
    grid-template-columns:1fr!important;
    max-width:480px!important;
    margin:0 auto!important;
  }
  /* Alpha section */
  html body.spx-public .spx-summary-roadmap.spx-summary-roadmap-v62{
    flex-direction:column!important;
    gap:24px!important;
  }
}

@media(max-width:768px){
  /* Feature hero stacks on tablet */
  html body.spx-public .spx-feature-hero{
    grid-template-columns:1fr!important;
  }
  html body.spx-public .spx-feature-hero .product-frame{
    aspect-ratio:16/9!important;
  }
  /* Feature content stacks */
  html body.spx-public .spx-feature-content{
    grid-template-columns:1fr!important;
  }
  /* Support hero stacks */
  html body.spx-public .spx-support-hero-v62{
    grid-template-columns:1fr!important;
  }
  /* Updates grid */
  html body.spx-public .spx-updates-grid{
    grid-template-columns:repeat(2,1fr)!important;
  }
}

@media(max-width:560px){
  /* Feature cards 1 col */
  html body.spx-public .spx-feature-card-grid{
    grid-template-columns:1fr!important;
  }
  /* Updates 1 col */
  html body.spx-public .spx-updates-grid{
    grid-template-columns:1fr!important;
  }
  /* Pricing orbit modal */
  html body.spx-public .spx-orbit-modal-card{
    padding:20px 16px!important;
    border-radius:20px!important;
    max-width:calc(100vw - 32px)!important;
    margin:0!important;
  }
  html body.spx-public .spx-orbit-modal-grid{
    flex-direction:column!important;
  }
  /* Roadmap page hero */
  html body.spx-public .spx-roadmap-hero-v62{
    padding:96px 16px 40px!important;
  }
  /* Page hero compact */
  html body.spx-public .page-hero.compact{
    padding:88px 16px 40px!important;
  }
  html body.spx-public .page-hero.compact h1{
    font-size:clamp(26px,7vw,38px)!important;
  }
}

/* ── No horizontal overflow guard ───────────────────────────────────────── */
html body.spx-public{
  overflow-x:clip!important;
}

/* ── Mobile nav — full overlay safety ───────────────────────────────────── */
html body.spx-mobile-nav-open{
  overflow:hidden!important;
}
@media(max-width:1100px){
  html body.spx-public .site-header [data-site-nav]{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
}

/* ── Modals — always within viewport ────────────────────────────────────── */
html body.spx-public .spx-orbit-modal{
  padding:16px!important;
  box-sizing:border-box!important;
}
html body.spx-public .spx-orbit-modal-card{
  max-height:calc(100svh - 32px)!important;
  overflow-y:auto!important;
}

/* ── Legal pages — better content spacing ───────────────────────────────── */
html body.spx-public .legal-article{
  max-width:min(800px,calc(100% - 32px))!important;
  margin:0 auto clamp(48px,6vw,72px)!important;
}
html body.spx-public .legal-article h2{
  font-size:clamp(16px,1.8vw,20px)!important;
  letter-spacing:-.03em!important;
  margin:28px 0 8px!important;
}
html body.spx-public .legal-article p,
html body.spx-public .legal-article li{
  font-size:14px!important;
  line-height:1.72!important;
  color:rgba(218,236,255,.70)!important;
}

/* ── Roadmap page — improved layout ─────────────────────────────────────── */
html body.spx-public .spx-roadmap-hero-v62{
  max-width:min(960px,calc(100% - 44px))!important;
  margin:0 auto!important;
  padding:clamp(96px,10vw,136px) 0 clamp(32px,4vw,52px)!important;
}
html body.spx-public .spx-roadmap-hero-v62 h1{
  font-size:clamp(30px,5vw,58px)!important;
  line-height:1.06!important;
  letter-spacing:-.05em!important;
  max-width:22ch!important;
  text-wrap:balance!important;
  margin:8px 0 14px!important;
}
html body.spx-public .spx-roadmap-hero-v62 p{
  font-size:clamp(14px,1.4vw,17px)!important;
  line-height:1.66!important;
  color:rgba(218,236,255,.68)!important;
  max-width:56ch!important;
  margin:0 0 24px!important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   A8.128 — Dashboard specificity fix
   Root cause: html body.spx-public #dashboard.spx-dashboard-command-v63 ...
   uses an ID selector (specificity 122–132). The v127 override only had
   class selectors (specificity 22–32). Higher specificity wins even with
   !important. Fix: repeat the override with #dashboard in all selectors.
   ═══════════════════════════════════════════════════════════════════════════ */

html body.spx-public #dashboard.spx-dashboard-command-v127{
  min-height:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr)!important;
  gap:0!important;
  width:min(1260px,calc(100vw - 36px))!important;
  max-width:none!important;
  margin:clamp(62px,8vw,110px) auto!important;
  padding:0!important;
  border-radius:34px!important;
  border:1px solid rgba(126,231,255,.15)!important;
  background:radial-gradient(circle at 10% 25%,rgba(37,210,255,.10),transparent 38%),radial-gradient(circle at 90% 75%,rgba(82,119,255,.09),transparent 38%),linear-gradient(160deg,rgba(8,15,32,.90),rgba(5,10,22,.72))!important;
  box-shadow:0 36px 110px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05)!important;
  overflow:hidden!important;
  position:relative!important;
  isolation:isolate!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-visual{
  position:relative!important;
  height:auto!important;
  top:auto!important;
  inset:auto!important;
  width:100%!important;
  margin:0!important;
  z-index:1!important;
  overflow:hidden!important;
  aspect-ratio:4/3!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-frame{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  background:#07101e!important;
  box-shadow:none!important;
  transform:none!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-frame img[data-dashboard-image]{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center top!important;
  opacity:.9!important;
  filter:saturate(1.06) contrast(1.03)!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-frame::after{
  display:none!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-copy{
  position:relative!important;
  height:auto!important;
  width:100%!important;
  inset:auto!important;
  margin:0!important;
  padding:clamp(26px,4vw,52px)!important;
  z-index:5!important;
  transform:none!important;
  opacity:1!important;
  pointer-events:auto!important;
  background:transparent!important;
  backdrop-filter:none!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-copy > .eyebrow,
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-copy > h2,
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-copy > p{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  width:100%!important;
  max-width:none!important;
  opacity:1!important;
  pointer-events:auto!important;
  text-shadow:none!important;
  transform:none!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-copy > h2{
  font-size:clamp(26px,3.2vw,46px)!important;
  line-height:1.04!important;
  top:auto!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-tabs{
  position:relative!important;
  left:auto!important;
  bottom:auto!important;
  display:flex!important;
  gap:8px!important;
  margin:22px 0 14px!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  backdrop-filter:none!important;
  border-radius:0!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-tabs b{
  display:inline!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-panel{
  position:relative!important;
  right:auto!important;
  top:auto!important;
  left:auto!important;
  bottom:auto!important;
  width:100%!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  pointer-events:auto!important;
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  padding:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-panel:not(.is-active){
  display:none!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-panel.is-active{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-callout{display:none!important;}
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-cursor{display:none!important;}
html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-hotspot{display:none!important;}
@media(max-width:980px){
  html body.spx-public #dashboard.spx-dashboard-command-v127{
    grid-template-columns:1fr!important;
    border-radius:26px!important;
    width:calc(100vw - 28px)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v127 .spx-dash-visual{
    aspect-ratio:16/9!important;
  }
}

/* ══════════════════════════════════════════════════════════
   A8.129 — Feature proof bar + how-it-works + accent eyebrows
   ══════════════════════════════════════════════════════════ */

/* 1. Proof stats bar */
html body.spx-public .spx-feature-proof-v129{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:stretch!important;
  gap:0!important;
  max-width:min(1180px,calc(100vw - 36px))!important;
  margin:0 auto clamp(32px,5vw,60px)!important;
  border-radius:22px!important;
  border:1px solid rgba(126,231,255,.12)!important;
  background:rgba(255,255,255,.028)!important;
  backdrop-filter:blur(12px)!important;
  overflow:hidden!important;
}
html body.spx-public .spx-feature-proof-item{
  flex:1 1 0!important;
  min-width:110px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:clamp(18px,3vw,32px) clamp(14px,2.5vw,28px)!important;
  border-right:1px solid rgba(126,231,255,.08)!important;
  text-align:center!important;
}
html body.spx-public .spx-feature-proof-item:last-child{border-right:0!important;}
html body.spx-public .spx-feature-proof-item b{
  display:block!important;
  font-size:clamp(26px,3.8vw,44px)!important;
  font-weight:700!important;
  letter-spacing:-.03em!important;
  line-height:1!important;
  color:#e8f4ff!important;
}
html body.spx-public .spx-feature-proof-item span{
  display:block!important;
  font-size:clamp(10px,1.1vw,12px)!important;
  font-weight:500!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
  color:rgba(180,210,240,.60)!important;
}

/* 2. How it works section */
html body.spx-public .spx-feature-how-v129{
  max-width:min(1180px,calc(100vw - 36px))!important;
  margin:0 auto clamp(60px,8vw,100px)!important;
  padding:0!important;
}
html body.spx-public .spx-feature-how-head{
  text-align:center!important;
  margin-bottom:clamp(30px,4vw,52px)!important;
}
html body.spx-public .spx-feature-how-head .eyebrow{
  display:block!important;
  margin-bottom:10px!important;
}
html body.spx-public .spx-feature-how-head h2{
  font-size:clamp(26px,3.6vw,48px)!important;
  line-height:1.05!important;
  font-weight:700!important;
  letter-spacing:-.04em!important;
  color:#e8f4ff!important;
  margin:0!important;
}
html body.spx-public .spx-feature-how-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(12px,1.8vw,20px)!important;
}
html body.spx-public .spx-feature-how-card{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  padding:clamp(22px,3vw,36px)!important;
  border-radius:24px!important;
  border:1px solid rgba(126,231,255,.10)!important;
  background:rgba(255,255,255,.025)!important;
  backdrop-filter:blur(10px)!important;
  transition:border-color .22s ease,background .22s ease!important;
}
html body.spx-public .spx-feature-how-card:hover{
  border-color:rgba(126,231,255,.22)!important;
  background:rgba(126,231,255,.04)!important;
}
html body.spx-public .spx-feature-how-num{
  display:block!important;
  font-size:clamp(30px,4.5vw,52px)!important;
  font-weight:800!important;
  letter-spacing:-.06em!important;
  line-height:1!important;
  color:rgba(126,231,255,.20)!important;
  margin-bottom:4px!important;
}
html body.spx-public .spx-feature-how-card h3{
  font-size:clamp(14px,1.5vw,18px)!important;
  font-weight:600!important;
  letter-spacing:-.02em!important;
  line-height:1.28!important;
  color:#e0efff!important;
  margin:0!important;
}
html body.spx-public .spx-feature-how-card p{
  font-size:clamp(13px,1.1vw,14.5px)!important;
  line-height:1.58!important;
  color:rgba(180,210,240,.70)!important;
  margin:0!important;
}

/* 3. Accent eyebrow colors (applied alongside .eyebrow on feature hero pages) */
html body.spx-public .spx-feature-eyebrow-green{color:#22c55e!important;border-color:rgba(34,197,94,.28)!important;}
html body.spx-public .spx-feature-eyebrow-blue{color:#60a5fa!important;border-color:rgba(96,165,250,.28)!important;}
html body.spx-public .spx-feature-eyebrow-cyan{color:#7ee7ff!important;border-color:rgba(126,231,255,.28)!important;}
html body.spx-public .spx-feature-eyebrow-indigo{color:#818cf8!important;border-color:rgba(129,140,248,.28)!important;}
html body.spx-public .spx-feature-eyebrow-purple{color:#c084fc!important;border-color:rgba(192,132,252,.28)!important;}
html body.spx-public .spx-feature-eyebrow-teal{color:#2dd4bf!important;border-color:rgba(45,212,191,.28)!important;}
html body.spx-public .spx-feature-eyebrow-violet{color:#a78bfa!important;border-color:rgba(167,139,250,.28)!important;}
html body.spx-public .spx-feature-eyebrow-amber{color:#fbbf24!important;border-color:rgba(251,191,36,.28)!important;}

/* 4. Mobile: proof bar stacks vertically, how-it-works collapses to 1 col */
@media(max-width:980px){
  html body.spx-public .spx-feature-proof-v129{
    flex-direction:column!important;
    border-radius:18px!important;
  }
  html body.spx-public .spx-feature-proof-item{
    flex-direction:row!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:14px!important;
    padding:13px 18px!important;
    border-right:0!important;
    border-bottom:1px solid rgba(126,231,255,.08)!important;
    text-align:left!important;
  }
  html body.spx-public .spx-feature-proof-item:last-child{border-bottom:0!important;}
  html body.spx-public .spx-feature-proof-item b{font-size:clamp(22px,5vw,30px)!important;}
  html body.spx-public .spx-feature-how-grid{grid-template-columns:1fr!important;}
}
@media(max-width:560px){
  html body.spx-public .spx-feature-proof-v129{border-radius:14px!important;}
  html body.spx-public .spx-feature-how-card{padding:16px!important;border-radius:18px!important;}
  html body.spx-public .spx-feature-how-num{font-size:clamp(26px,7vw,36px)!important;}
}

/* ═══════════════════════════════════════════════════════════════════
   A8.130 — Auth shell · Theme toggle · Maintenance banners · Light mode
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Auth page outer shell — viewport-locked, no desktop scroll --- */
html body.spx-auth-page-v130{
  overflow:hidden!important;
}
@media(min-width:901px){
  html body.spx-auth-page-v130{
    height:100vh!important;
  }
}
.spx-auth-header-v130{
  position:fixed!important;
  top:0!important;left:0!important;right:0!important;
  height:62px!important;
  z-index:900!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:0 28px!important;
  background:rgba(7,10,18,.84)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
}
.spx-auth-header-v130 .brand{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  text-decoration:none!important;
  color:#f6efe8!important;
  font-weight:800!important;
  font-size:16px!important;
  letter-spacing:-.01em!important;
}
.spx-auth-header-v130 .brand img{
  width:28px!important;height:28px!important;
  border-radius:7px!important;
}
.spx-auth-header-actions{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
.spx-auth-back-v130{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  font-size:13px!important;
  font-weight:700!important;
  color:rgba(246,239,232,.68)!important;
  text-decoration:none!important;
  padding:7px 14px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.04)!important;
  transition:color .15s,background .15s!important;
}
.spx-auth-back-v130:hover{
  color:#f6efe8!important;
  background:rgba(255,255,255,.09)!important;
}
html body.spx-auth-page-v130 main.spx-auth-main-v130{
  padding-top:62px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:stretch!important;
}
@media(min-width:901px){
  html body.spx-auth-page-v130 main.spx-auth-main-v130{
    height:100vh!important;
    overflow:hidden!important;
  }
}
@media(max-width:900px){
  html body.spx-auth-page-v130{overflow:auto!important;height:auto!important;}
  html body.spx-auth-page-v130 main.spx-auth-main-v130{height:auto!important;overflow:auto!important;}
}

/* 2. Theme toggle button ------------------------------------------ */
.spx-theme-toggle-v130{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:7px 14px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.06)!important;
  color:rgba(246,239,232,.82)!important;
  font-size:12px!important;
  font-weight:700!important;
  cursor:pointer!important;
  transition:background .15s,border-color .15s,color .15s!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
}
.spx-theme-toggle-v130:hover{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(255,255,255,.22)!important;
  color:#f6efe8!important;
}
.spx-theme-toggle-icon{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  line-height:1!important;
}

/* 3. Maintenance / public alert banners --------------------------- */
.spx-alert-banner-v130{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:11px 24px!important;
  font-size:13.5px!important;
  line-height:1.45!important;
  border-left:3px solid transparent!important;
}
.spx-alert-content{
  display:flex!important;
  align-items:baseline!important;
  gap:8px!important;
  flex:1!important;
  min-width:0!important;
}
.spx-alert-content strong{
  font-weight:800!important;
  white-space:nowrap!important;
  flex-shrink:0!important;
}
.spx-alert-content span{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.spx-alert-link{
  display:inline-flex!important;
  align-items:center!important;
  font-size:12px!important;
  font-weight:700!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  padding:5px 13px!important;
  border-radius:999px!important;
  border:1px solid currentColor!important;
  opacity:.78!important;
  flex-shrink:0!important;
  transition:opacity .15s!important;
}
.spx-alert-link:hover{opacity:1!important;}
/* A8.132 - keep public alerts below the fixed public navigator without adding inactive-page spacing. */
html body.spx-public:not(.spx-auth-page-v130) main#main > .spx-alert-banner-v130:first-child{
  margin-top:92px!important;
}
html body.spx-auth-page-v130 main#main.spx-auth-main-v130{
  flex-direction:column!important;
  align-items:stretch!important;
}
html body.spx-auth-page-v130 main#main.spx-auth-main-v130 > .spx-alert-banner-v130:first-child{
  width:100%!important;
  box-sizing:border-box!important;
  flex:0 0 auto!important;
}
html body.spx-auth-page-v130 main#main.spx-auth-main-v130 > .spx-alert-banner-v130:first-child + .auth-shell{
  align-self:center!important;
}
/* A8.132 - How step 01 fallback before scroll progress activates. */
html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .why52-step[data-why52-step="0"]{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0)!important;
}
.spx-alert-banner-warning{
  background:rgba(251,191,36,.08)!important;
  border-color:#fbbf24!important;
  color:#fef3c7!important;
}
.spx-alert-banner-info{
  background:rgba(96,165,250,.08)!important;
  border-color:#60a5fa!important;
  color:#dbeafe!important;
}
.spx-alert-banner-critical{
  background:rgba(248,113,113,.10)!important;
  border-color:#f87171!important;
  color:#fee2e2!important;
}
.spx-alert-banner-success{
  background:rgba(34,197,94,.08)!important;
  border-color:#22c55e!important;
  color:#dcfce7!important;
}
@media(max-width:700px){
  html body.spx-public:not(.spx-auth-page-v130) main#main > .spx-alert-banner-v130:first-child{
    margin-top:74px!important;
  }
  .spx-alert-banner-v130{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:8px!important;
    padding:12px 18px!important;
  }
  .spx-alert-link{align-self:flex-start!important;}
}

/* 4. Light mode — A8.130 additions -------------------------------- */
html[data-theme="light"] .spx-auth-header-v130{
  background:rgba(240,244,248,.92)!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] .spx-auth-header-v130 .brand{color:#0f172a!important;}
html[data-theme="light"] .spx-auth-back-v130{
  color:rgba(15,23,42,.62)!important;
  border-color:rgba(15,23,42,.14)!important;
  background:rgba(15,23,42,.04)!important;
}
html[data-theme="light"] .spx-auth-back-v130:hover{
  color:#0f172a!important;
  background:rgba(15,23,42,.09)!important;
}
html[data-theme="light"] .spx-theme-toggle-v130{
  border-color:rgba(15,23,42,.16)!important;
  background:rgba(15,23,42,.05)!important;
  color:rgba(15,23,42,.78)!important;
}
html[data-theme="light"] .spx-theme-toggle-v130:hover{
  background:rgba(15,23,42,.10)!important;
  border-color:rgba(15,23,42,.25)!important;
  color:#0f172a!important;
}

/* 5. How Spixor Works — safety: ensure .is-active step is visible (position stays absolute — do NOT add position:relative here) */
html body.spx-public .why52-step.is-active{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
html body.spx-public .why52-visual.is-active{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

/* ==========================================================================
   A8.131 — Reference visual, light mode complete, auth/feature/support rework
   ========================================================================== */

/* ── 1. Feature pages — genuine per-accent visual differentiation ─────────
   Using [data-feature-accent] on the section element and the body route attr.
   Each accent gets: unique hero bg gradient, border glow, accent text/numbers.
   ========================================================================== */

/* Base accent colors as CSS vars per accent attribute */
[data-feature-accent="green"]  { --feat-h:145deg; --feat-c1:34,197,94;   --feat-c2:16,185,129; }
[data-feature-accent="blue"]   { --feat-h:218deg; --feat-c1:59,130,246;  --feat-c2:99,102,241; }
[data-feature-accent="cyan"]   { --feat-h:192deg; --feat-c1:37,210,255;  --feat-c2:56,189,248; }
[data-feature-accent="indigo"] { --feat-h:239deg; --feat-c1:129,140,248; --feat-c2:99,102,241; }
[data-feature-accent="purple"] { --feat-h:270deg; --feat-c1:192,132,252; --feat-c2:168,85,247; }
[data-feature-accent="teal"]   { --feat-h:174deg; --feat-c1:45,212,191;  --feat-c2:20,184,166; }
[data-feature-accent="violet"] { --feat-h:258deg; --feat-c1:167,139,250; --feat-c2:139,92,246; }
[data-feature-accent="amber"]  { --feat-h:38deg;  --feat-c1:251,191,36;  --feat-c2:245,158,11; }

/* Hero section — per-accent strong radial-gradient background */
html body.spx-public .spx-feature-hero-v127[data-feature-accent="green"]::before{
  background:
    radial-gradient(ellipse 70% 70% at 5% 50%,rgba(34,197,94,.18),transparent 55%),
    radial-gradient(ellipse 55% 55% at 95% 5%,rgba(16,185,129,.12),transparent 55%),
    radial-gradient(ellipse 40% 40% at 60% 100%,rgba(34,197,94,.07),transparent 50%)!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-accent="blue"]::before{
  background:
    radial-gradient(ellipse 70% 70% at 8% 45%,rgba(59,130,246,.18),transparent 55%),
    radial-gradient(ellipse 55% 55% at 92% 8%,rgba(99,102,241,.12),transparent 55%),
    radial-gradient(ellipse 40% 40% at 55% 95%,rgba(59,130,246,.07),transparent 50%)!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-accent="cyan"]::before{
  background:
    radial-gradient(ellipse 70% 70% at 6% 55%,rgba(37,210,255,.16),transparent 55%),
    radial-gradient(ellipse 55% 55% at 94% 6%,rgba(56,189,248,.10),transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 95%,rgba(37,210,255,.08),transparent 50%)!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-accent="indigo"]::before{
  background:
    radial-gradient(ellipse 70% 70% at 10% 40%,rgba(129,140,248,.18),transparent 55%),
    radial-gradient(ellipse 55% 55% at 90% 10%,rgba(99,102,241,.12),transparent 55%),
    radial-gradient(ellipse 40% 40% at 65% 95%,rgba(129,140,248,.07),transparent 50%)!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-accent="purple"]::before{
  background:
    radial-gradient(ellipse 70% 70% at 5% 50%,rgba(192,132,252,.18),transparent 55%),
    radial-gradient(ellipse 55% 55% at 93% 7%,rgba(168,85,247,.12),transparent 55%),
    radial-gradient(ellipse 40% 40% at 55% 95%,rgba(192,132,252,.07),transparent 50%)!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-accent="teal"]::before{
  background:
    radial-gradient(ellipse 70% 70% at 8% 45%,rgba(45,212,191,.18),transparent 55%),
    radial-gradient(ellipse 55% 55% at 92% 8%,rgba(20,184,166,.12),transparent 55%),
    radial-gradient(ellipse 40% 40% at 60% 95%,rgba(45,212,191,.07),transparent 50%)!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-accent="violet"]::before{
  background:
    radial-gradient(ellipse 70% 70% at 7% 50%,rgba(167,139,250,.18),transparent 55%),
    radial-gradient(ellipse 55% 55% at 93% 8%,rgba(139,92,246,.12),transparent 55%),
    radial-gradient(ellipse 40% 40% at 58% 95%,rgba(167,139,250,.07),transparent 50%)!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-accent="amber"]::before{
  background:
    radial-gradient(ellipse 70% 70% at 6% 48%,rgba(251,191,36,.14),transparent 55%),
    radial-gradient(ellipse 55% 55% at 94% 8%,rgba(245,158,11,.10),transparent 55%),
    radial-gradient(ellipse 40% 40% at 55% 95%,rgba(251,191,36,.06),transparent 50%)!important;
}

/* Hero visual frame — accent border glow per route */
html body.spx-public .spx-feature-hero-v127[data-feature-accent="green"]  .spx-feature-hero-visual{ border-color:rgba(34,197,94,.30)!important;  box-shadow:0 24px 80px rgba(0,0,0,.32),0 0 0 1px rgba(34,197,94,.12),0 0 48px rgba(34,197,94,.14)!important; }
html body.spx-public .spx-feature-hero-v127[data-feature-accent="blue"]   .spx-feature-hero-visual{ border-color:rgba(59,130,246,.30)!important;  box-shadow:0 24px 80px rgba(0,0,0,.32),0 0 0 1px rgba(59,130,246,.12),0 0 48px rgba(59,130,246,.14)!important; }
html body.spx-public .spx-feature-hero-v127[data-feature-accent="cyan"]   .spx-feature-hero-visual{ border-color:rgba(37,210,255,.28)!important;  box-shadow:0 24px 80px rgba(0,0,0,.32),0 0 0 1px rgba(37,210,255,.11),0 0 48px rgba(37,210,255,.14)!important; }
html body.spx-public .spx-feature-hero-v127[data-feature-accent="indigo"] .spx-feature-hero-visual{ border-color:rgba(129,140,248,.30)!important; box-shadow:0 24px 80px rgba(0,0,0,.32),0 0 0 1px rgba(129,140,248,.12),0 0 48px rgba(129,140,248,.14)!important; }
html body.spx-public .spx-feature-hero-v127[data-feature-accent="purple"] .spx-feature-hero-visual{ border-color:rgba(192,132,252,.28)!important; box-shadow:0 24px 80px rgba(0,0,0,.32),0 0 0 1px rgba(192,132,252,.11),0 0 48px rgba(192,132,252,.14)!important; }
html body.spx-public .spx-feature-hero-v127[data-feature-accent="teal"]   .spx-feature-hero-visual{ border-color:rgba(45,212,191,.28)!important;  box-shadow:0 24px 80px rgba(0,0,0,.32),0 0 0 1px rgba(45,212,191,.11),0 0 48px rgba(45,212,191,.14)!important; }
html body.spx-public .spx-feature-hero-v127[data-feature-accent="violet"] .spx-feature-hero-visual{ border-color:rgba(167,139,250,.28)!important; box-shadow:0 24px 80px rgba(0,0,0,.32),0 0 0 1px rgba(167,139,250,.11),0 0 48px rgba(167,139,250,.14)!important; }
html body.spx-public .spx-feature-hero-v127[data-feature-accent="amber"]  .spx-feature-hero-visual{ border-color:rgba(251,191,36,.28)!important;  box-shadow:0 24px 80px rgba(0,0,0,.32),0 0 0 1px rgba(251,191,36,.11),0 0 48px rgba(251,191,36,.10)!important; }

/* Proof bar — accent numbers */
html body.spx-public .spx-feature-proof-v129{
  display:flex!important;flex-wrap:wrap!important;gap:clamp(12px,2vw,24px)!important;
  max-width:min(1260px,calc(100vw - 36px))!important;margin:0 auto!important;
  padding:clamp(20px,2.5vw,32px) clamp(20px,3vw,40px)!important;
  border-radius:20px!important;border:1px solid rgba(218,236,255,.10)!important;
  background:linear-gradient(135deg,rgba(8,15,32,.70),rgba(5,10,22,.55))!important;
}
html body.spx-public .spx-feature-proof-item{ display:grid!important;gap:2px!important; }
html body.spx-public .spx-feature-proof-item b{
  font-size:clamp(26px,3.5vw,42px)!important;font-weight:950!important;
  line-height:1!important;
}
html body.spx-public .spx-feature-proof-item span{
  font-size:12px!important;font-weight:900!important;
  text-transform:uppercase!important;letter-spacing:.08em!important;
  color:rgba(218,236,255,.60)!important;
}
/* accent colors for proof numbers per data-feature-page on parent section */
html body.spx-public .spx-feature-hero-v127[data-feature-accent="green"]  ~ .spx-feature-proof-v129 .spx-feature-proof-item b,
html body.spx-public .spx-feature-proof-v129[data-feature-accent="green"]  .spx-feature-proof-item b { color:#22c55e!important; }
html body.spx-public .spx-feature-hero-v127[data-feature-accent="blue"]   ~ .spx-feature-proof-v129 .spx-feature-proof-item b,
html body.spx-public .spx-feature-proof-v129[data-feature-accent="blue"]   .spx-feature-proof-item b { color:#60a5fa!important; }
html body.spx-public .spx-feature-hero-v127[data-feature-accent="cyan"]   ~ .spx-feature-proof-v129 .spx-feature-proof-item b,
html body.spx-public .spx-feature-proof-v129[data-feature-accent="cyan"]   .spx-feature-proof-item b { color:#7ee7ff!important; }
html body.spx-public .spx-feature-hero-v127[data-feature-accent="indigo"] ~ .spx-feature-proof-v129 .spx-feature-proof-item b,
html body.spx-public .spx-feature-proof-v129[data-feature-accent="indigo"] .spx-feature-proof-item b { color:#818cf8!important; }
html body.spx-public .spx-feature-hero-v127[data-feature-accent="purple"] ~ .spx-feature-proof-v129 .spx-feature-proof-item b,
html body.spx-public .spx-feature-proof-v129[data-feature-accent="purple"] .spx-feature-proof-item b { color:#c084fc!important; }
html body.spx-public .spx-feature-hero-v127[data-feature-accent="teal"]   ~ .spx-feature-proof-v129 .spx-feature-proof-item b,
html body.spx-public .spx-feature-proof-v129[data-feature-accent="teal"]   .spx-feature-proof-item b { color:#2dd4bf!important; }
html body.spx-public .spx-feature-hero-v127[data-feature-accent="violet"] ~ .spx-feature-proof-v129 .spx-feature-proof-item b,
html body.spx-public .spx-feature-proof-v129[data-feature-accent="violet"] .spx-feature-proof-item b { color:#a78bfa!important; }
html body.spx-public .spx-feature-hero-v127[data-feature-accent="amber"]  ~ .spx-feature-proof-v129 .spx-feature-proof-item b,
html body.spx-public .spx-feature-proof-v129[data-feature-accent="amber"]  .spx-feature-proof-item b { color:#fbbf24!important; }

/* How-it-works grid — accent step numbers per route */
html body.spx-public[data-route^="/features/zip-export"]       .spx-feature-how-num { color:#22c55e!important;border-color:rgba(34,197,94,.28)!important; }
html body.spx-public[data-route^="/features/website-builder"]  .spx-feature-how-num { color:#60a5fa!important;border-color:rgba(59,130,246,.28)!important; }
html body.spx-public[data-route^="/features/export-first"]     .spx-feature-how-num { color:#7ee7ff!important;border-color:rgba(37,210,255,.28)!important; }
html body.spx-public[data-route^="/features/flex-forms"]       .spx-feature-how-num { color:#818cf8!important;border-color:rgba(129,140,248,.28)!important; }
html body.spx-public[data-route^="/features/files"]            .spx-feature-how-num { color:#c084fc!important;border-color:rgba(192,132,252,.28)!important; }
html body.spx-public[data-route^="/features/spixor-share"]     .spx-feature-how-num { color:#2dd4bf!important;border-color:rgba(45,212,191,.28)!important; }
html body.spx-public[data-route^="/features/wordpress-export"] .spx-feature-how-num { color:#a78bfa!important;border-color:rgba(167,139,250,.28)!important; }
html body.spx-public[data-route^="/features/seo-insights"]     .spx-feature-how-num { color:#fbbf24!important;border-color:rgba(251,191,36,.28)!important; }
html body.spx-public[data-route^="/features/project-dashboard"] .spx-feature-how-num { color:#60a5fa!important;border-color:rgba(59,130,246,.28)!important; }
html body.spx-public[data-route^="/features/dashboard"]        .spx-feature-how-num { color:#7ee7ff!important;border-color:rgba(37,210,255,.28)!important; }

html body.spx-public .spx-feature-how-num{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  font-size:11px!important;font-weight:950!important;letter-spacing:.04em!important;
  width:32px!important;height:32px!important;border-radius:10px!important;
  border:1px solid rgba(218,236,255,.22)!important;
  background:rgba(255,255,255,.04)!important;
  margin-bottom:12px!important;color:rgba(218,236,255,.70)!important;
}
html body.spx-public .spx-feature-how-v129{
  max-width:min(1260px,calc(100vw - 36px))!important;margin:0 auto!important;
  padding:clamp(32px,4vw,52px) clamp(20px,3vw,40px)!important;
}
html body.spx-public .spx-feature-how-head{
  margin-bottom:clamp(24px,3vw,36px)!important;
}
html body.spx-public .spx-feature-how-head h2{
  font-size:clamp(24px,3vw,40px)!important;margin:8px 0!important;
}
html body.spx-public .spx-feature-how-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  gap:clamp(14px,2vw,22px)!important;
}
html body.spx-public .spx-feature-how-card{
  padding:clamp(18px,2.5vw,28px)!important;border-radius:22px!important;
  border:1px solid rgba(218,236,255,.10)!important;
  background:linear-gradient(165deg,rgba(8,15,32,.72),rgba(5,10,22,.52))!important;
  transition:border-color .22s ease,box-shadow .22s ease!important;
}
html body.spx-public .spx-feature-how-card:hover{
  border-color:rgba(218,236,255,.20)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.20)!important;
}
html body.spx-public .spx-feature-how-card h3{
  font-size:clamp(15px,1.5vw,18px)!important;margin:0 0 8px!important;
}
html body.spx-public .spx-feature-how-card p{
  font-size:clamp(13px,1.2vw,15px)!important;color:rgba(218,236,255,.66)!important;
  line-height:1.62!important;margin:0!important;
}

/* CTA strip — per-route accent glow */
html body.spx-public[data-route^="/features/zip-export"]       .spx-feature-cta-strip-v127{border-color:rgba(34,197,94,.20)!important;background:linear-gradient(165deg,rgba(34,197,94,.08),rgba(8,15,32,.80))!important;}
html body.spx-public[data-route^="/features/website-builder"]  .spx-feature-cta-strip-v127{border-color:rgba(59,130,246,.20)!important;background:linear-gradient(165deg,rgba(59,130,246,.08),rgba(8,15,32,.80))!important;}
html body.spx-public[data-route^="/features/export-first"]     .spx-feature-cta-strip-v127{border-color:rgba(37,210,255,.20)!important;background:linear-gradient(165deg,rgba(37,210,255,.08),rgba(8,15,32,.80))!important;}
html body.spx-public[data-route^="/features/flex-forms"]       .spx-feature-cta-strip-v127{border-color:rgba(129,140,248,.20)!important;background:linear-gradient(165deg,rgba(129,140,248,.08),rgba(8,15,32,.80))!important;}
html body.spx-public[data-route^="/features/files"]            .spx-feature-cta-strip-v127{border-color:rgba(192,132,252,.20)!important;background:linear-gradient(165deg,rgba(192,132,252,.08),rgba(8,15,32,.80))!important;}
html body.spx-public[data-route^="/features/spixor-share"]     .spx-feature-cta-strip-v127{border-color:rgba(45,212,191,.20)!important;background:linear-gradient(165deg,rgba(45,212,191,.08),rgba(8,15,32,.80))!important;}
html body.spx-public[data-route^="/features/wordpress-export"] .spx-feature-cta-strip-v127{border-color:rgba(167,139,250,.20)!important;background:linear-gradient(165deg,rgba(167,139,250,.08),rgba(8,15,32,.80))!important;}
html body.spx-public[data-route^="/features/seo-insights"]     .spx-feature-cta-strip-v127{border-color:rgba(251,191,36,.20)!important;background:linear-gradient(165deg,rgba(251,191,36,.08),rgba(8,15,32,.80))!important;}
html body.spx-public[data-route^="/features/project-dashboard"] .spx-feature-cta-strip-v127{border-color:rgba(59,130,246,.20)!important;background:linear-gradient(165deg,rgba(59,130,246,.08),rgba(8,15,32,.80))!important;}
html body.spx-public[data-route^="/features/dashboard"]        .spx-feature-cta-strip-v127{border-color:rgba(37,210,255,.20)!important;background:linear-gradient(165deg,rgba(37,210,255,.08),rgba(8,15,32,.80))!important;}

/* ── 2. Auth inner form — premium rework v131 ────────────────────────────
   Wider columns, taller inputs, stronger glass, gradient submit, richer story
   ========================================================================== */

/* Larger layout — wider column split */
html body.spx-public .auth-shell.spx-auth-v127{
  grid-template-columns:minmax(380px,.9fr) minmax(0,1.1fr)!important;
  max-width:min(1100px,100%)!important;
  gap:clamp(24px,4vw,56px)!important;
  min-height:calc(100svh - 62px)!important;
}
/* Form card — deeper glass */
html body.spx-public .auth-shell.spx-auth-v127 .auth-card{
  background:linear-gradient(165deg,rgba(8,16,34,.94),rgba(4,10,22,.90))!important;
  border:1px solid rgba(126,231,255,.20)!important;
  border-radius:32px!important;
  padding:clamp(28px,4.5vw,52px)!important;
  box-shadow:
    0 36px 100px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(126,231,255,.04)!important;
  backdrop-filter:blur(28px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(150%)!important;
}
html body.spx-public .auth-shell.spx-auth-v127 .auth-card h1{
  font-size:clamp(28px,3.8vw,46px)!important;
  margin:10px 0 8px!important;
}
/* Taller inputs */
html body.spx-public .auth-shell.spx-auth-v127 .spx-auth-field-v127 input:not([type="checkbox"]):not([type="radio"]),
html body.spx-public .auth-shell.spx-auth-v127 .spx-auth-field-v127 select,
html body.spx-public .auth-shell.spx-auth-v127 .spx-auth-field-v127 textarea{
  min-height:54px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.065)!important;
  border-color:rgba(218,236,255,.18)!important;
  font-size:15px!important;
  padding:14px 18px!important;
}
html body.spx-public .auth-shell.spx-auth-v127 .spx-auth-field-v127 input:focus,
html body.spx-public .auth-shell.spx-auth-v127 .spx-auth-field-v127 select:focus,
html body.spx-public .auth-shell.spx-auth-v127 .spx-auth-field-v127 textarea:focus{
  border-color:rgba(126,231,255,.60)!important;
  box-shadow:0 0 0 4px rgba(126,231,255,.12),0 2px 12px rgba(126,231,255,.08)!important;
}
/* Gradient submit button */
html body.spx-public .auth-shell.spx-auth-v127 .spx-auth-submit-v127{
  min-height:54px!important;
  border-radius:18px!important;
  font-size:16px!important;
  background:linear-gradient(135deg,#18c9f5,#3a72f8)!important;
  border:none!important;
  box-shadow:0 8px 28px rgba(37,210,255,.28)!important;
  transition:box-shadow .22s ease,transform .18s ease,filter .18s ease!important;
}
html body.spx-public .auth-shell.spx-auth-v127 .spx-auth-submit-v127:hover{
  box-shadow:0 12px 40px rgba(37,210,255,.40)!important;
  filter:brightness(1.06)!important;
  transform:translateY(-1px)!important;
}
/* Google button — more prominent */
html body.spx-public .auth-shell.spx-auth-v127 .spx-google-btn-v127{
  min-height:50px!important;border-radius:18px!important;
  font-size:15px!important;
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(218,236,255,.20)!important;
}
/* Story panel — richer with gradient overlay and larger type */
html body.spx-public .auth-shell.spx-auth-v127 .auth-story{
  position:relative!important;
  padding:clamp(28px,4vw,48px)!important;
  border-radius:32px!important;
  overflow:hidden!important;
  background:
    radial-gradient(ellipse 90% 70% at 10% 20%,rgba(37,210,255,.11),transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 80%,rgba(82,119,255,.10),transparent 55%),
    linear-gradient(165deg,rgba(7,14,30,.80),rgba(4,9,20,.70))!important;
  border:1px solid rgba(126,231,255,.12)!important;
}
html body.spx-public .auth-shell.spx-auth-v127 .auth-story::before{
  content:""!important;position:absolute!important;
  top:0!important;left:0!important;right:0!important;height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(126,231,255,.28),transparent)!important;
}
html body.spx-public .auth-shell.spx-auth-v127 .auth-story h2{
  font-size:clamp(26px,3.4vw,46px)!important;
  line-height:1.05!important;margin:12px 0 14px!important;
}
html body.spx-public .auth-shell.spx-auth-v127 .auth-story p{
  color:rgba(218,236,255,.72)!important;
  font-size:clamp(14px,1.3vw,16px)!important;
  line-height:1.66!important;
}
html body.spx-public .auth-shell.spx-auth-v127 .auth-story-points span{
  padding:12px 14px!important;
  border-radius:16px!important;
  border-color:rgba(126,231,255,.16)!important;
  background:rgba(255,255,255,.055)!important;
  font-size:13px!important;
}

/* ── 3. Support page — enhanced visual v131 ──────────────────────────────
   Premium aurora hero, stronger category cards, richer form section.
   ========================================================================== */

html body.spx-public .spx-support-hub-v127{
  position:relative!important;overflow:hidden!important;
  border-radius:0!important;
  padding:0!important;
}
html body.spx-public .spx-support-hero-v127{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)!important;
  gap:clamp(24px,3vw,48px)!important;
  max-width:min(1260px,calc(100vw - 36px))!important;
  margin:0 auto!important;
  padding:clamp(60px,8vw,110px) clamp(20px,3vw,40px) clamp(40px,5vw,70px)!important;
  align-items:center!important;
}
html body.spx-public .spx-support-hub-v127::before{
  content:""!important;position:absolute!important;inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse 80% 60% at 5% 30%,rgba(37,210,255,.11),transparent 50%),
    radial-gradient(ellipse 60% 50% at 95% 70%,rgba(82,119,255,.09),transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 0%,rgba(126,231,255,.07),transparent 50%)!important;
}
html body.spx-public .spx-support-hero-copy h1{
  font-size:clamp(34px,5vw,64px)!important;
  line-height:1.02!important;margin:8px 0 14px!important;
}
html body.spx-public .spx-support-hero-copy p{
  color:rgba(218,236,255,.72)!important;
  font-size:clamp(15px,1.4vw,18px)!important;
  line-height:1.64!important;max-width:54ch!important;margin-bottom:24px!important;
}
html body.spx-public .spx-support-stats-v127{
  display:grid!important;gap:clamp(10px,1.5vw,16px)!important;
  position:relative!important;z-index:1!important;
}
html body.spx-public .spx-support-stats-v127 > div{
  padding:clamp(16px,2vw,22px)!important;border-radius:20px!important;
  border:1px solid rgba(126,231,255,.14)!important;
  background:linear-gradient(165deg,rgba(8,15,32,.80),rgba(5,10,22,.60))!important;
  backdrop-filter:blur(12px)!important;
}
html body.spx-public .spx-support-stats-v127 b{
  display:block!important;font-size:clamp(14px,1.3vw,16px)!important;
  color:#fff!important;margin-bottom:3px!important;
}
html body.spx-public .spx-support-stats-v127 small{
  font-size:12px!important;color:rgba(218,236,255,.60)!important;
}
html body.spx-public .spx-support-categories-v127{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  gap:clamp(12px,1.8vw,18px)!important;
  max-width:min(1260px,calc(100vw - 36px))!important;
  margin:0 auto clamp(32px,4vw,52px)!important;
  padding:0 clamp(20px,3vw,40px)!important;
  position:relative!important;z-index:1!important;
}
html body.spx-public .spx-support-cat-v127{
  display:flex!important;gap:14px!important;align-items:flex-start!important;
  padding:clamp(18px,2.2vw,26px)!important;border-radius:24px!important;
  border:1px solid rgba(126,231,255,.12)!important;
  background:linear-gradient(165deg,rgba(8,15,32,.78),rgba(5,10,22,.55))!important;
  backdrop-filter:blur(10px)!important;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease!important;
}
html body.spx-public .spx-support-cat-v127:hover{
  border-color:rgba(126,231,255,.24)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.22)!important;
  transform:translateY(-2px)!important;
}
html body.spx-public .spx-support-cat-icon{
  display:grid!important;place-items:center!important;
  flex-shrink:0!important;
  width:42px!important;height:42px!important;border-radius:14px!important;
  background:rgba(37,210,255,.10)!important;
  border:1px solid rgba(37,210,255,.18)!important;
  color:#7ee7ff!important;
}
html body.spx-public .spx-support-cat-v127 b{
  display:block!important;font-size:clamp(14px,1.3vw,16px)!important;
  color:#fff!important;margin-bottom:5px!important;
}
html body.spx-public .spx-support-cat-v127 p{
  font-size:13px!important;color:rgba(218,236,255,.64)!important;
  line-height:1.58!important;margin:0!important;
}
html body.spx-public .spx-support-form-section-v127{
  max-width:min(960px,calc(100vw - 36px))!important;
  margin:0 auto!important;
  padding:clamp(32px,4vw,56px) clamp(20px,3vw,40px)!important;
}
html body.spx-public .spx-support-form-header{
  margin-bottom:clamp(24px,3vw,36px)!important;
}
html body.spx-public .spx-support-form-header h2{
  font-size:clamp(24px,3.2vw,42px)!important;margin:8px 0 10px!important;
}
html body.spx-public .spx-support-form-header p{
  color:rgba(218,236,255,.70)!important;max-width:60ch!important;line-height:1.62!important;
}
html body.spx-public .spx-support-form-trust{
  display:flex!important;gap:16px!important;flex-wrap:wrap!important;margin-top:12px!important;
}
html body.spx-public .spx-support-form-trust span{
  font-size:12px!important;font-weight:900!important;
  color:rgba(126,231,255,.80)!important;
  padding:5px 12px!important;border-radius:999px!important;
  border:1px solid rgba(126,231,255,.20)!important;
  background:rgba(126,231,255,.06)!important;
}
html body.spx-public .spx-support-form-v127{
  display:grid!important;gap:16px!important;
  padding:clamp(24px,3.5vw,40px)!important;
  border-radius:28px!important;
  border:1px solid rgba(218,236,255,.12)!important;
  background:linear-gradient(165deg,rgba(8,15,32,.82),rgba(5,10,22,.65))!important;
  backdrop-filter:blur(14px)!important;
}
html body.spx-public .spx-support-form-row{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
}
html body.spx-public .spx-support-field-grow{ grid-column:auto!important; }
@media(max-width:640px){
  html body.spx-public .spx-support-form-row{grid-template-columns:1fr!important;}
}

/* ── 4. Light mode — comprehensive CSS for all public sections ────────────
   Covers: body, nav, hero, how, export, pricing, roadmap, feature pages,
   support, auth, footer, cards, buttons, text, alert banners.
   ========================================================================== */

/* 4a. Base body & background */
html[data-theme="light"] body.spx-public{
  background:#f0f4fa!important;
  color:#0f172a!important;
}

/* 4b. Navigation */
html[data-theme="light"] body.spx-public .spx-public-nav,
html[data-theme="light"] body.spx-public .spx-nav-wrapper,
html[data-theme="light"] body.spx-public nav.spx-nav{
  background:rgba(248,250,254,.96)!important;
  border-bottom-color:rgba(15,23,42,.10)!important;
  backdrop-filter:blur(12px)!important;
}
html[data-theme="light"] body.spx-public .spx-nav-logo-text,
html[data-theme="light"] body.spx-public .brand,
html[data-theme="light"] body.spx-public .nav-logo-name{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .nav-link,
html[data-theme="light"] body.spx-public .nav-feature-link{
  color:rgba(15,23,42,.72)!important;
}
html[data-theme="light"] body.spx-public .nav-link:hover,
html[data-theme="light"] body.spx-public .nav-feature-link:hover{
  color:#0f172a!important;
  background:rgba(15,23,42,.06)!important;
}
html[data-theme="light"] body.spx-public .nav-feature-link strong{
  background:rgba(15,23,42,.09)!important;
  color:rgba(15,23,42,.60)!important;
}
html[data-theme="light"] body.spx-public .nav-dropdown,
html[data-theme="light"] body.spx-public .spx-nav-dropdown{
  background:rgba(248,250,254,.98)!important;
  border-color:rgba(15,23,42,.10)!important;
  box-shadow:0 12px 40px rgba(15,23,42,.12)!important;
}
html[data-theme="light"] body.spx-public .nav-feature-text small{color:rgba(15,23,42,.50)!important;}
html[data-theme="light"] body.spx-public .nav-feature-text b{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .nav-feature-text em{color:rgba(15,23,42,.60)!important;}

/* 4c. Hero section */
html[data-theme="light"] body.spx-public .spx-hero-v26{
  background:linear-gradient(180deg,#e8f0fc,#d4e4f8 50%,#c8daf5)!important;
}
html[data-theme="light"] body.spx-public .spx-hero-v26-copy h1,
html[data-theme="light"] body.spx-public .spx-v26-hero-head{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-v26-hero-sub,
html[data-theme="light"] body.spx-public .spx-hero-lead{
  color:rgba(15,23,42,.68)!important;
}
html[data-theme="light"] body.spx-public .v26-cloud{
  background:rgba(255,255,255,.70)!important;
}
html[data-theme="light"] body.spx-public .v26-horizon{
  background:linear-gradient(180deg,rgba(15,23,42,.04),transparent)!important;
}

/* 4d. How Spixor Works */
html[data-theme="light"] body.spx-public #why-spixor,
html[data-theme="light"] body.spx-public .spx-why-section{
  background:linear-gradient(180deg,#f0f4fa,#e8f0fc)!important;
}
html[data-theme="light"] body.spx-public .why52-step{
  background:rgba(255,255,255,.90)!important;
  border-color:rgba(15,23,42,.12)!important;
  box-shadow:0 8px 28px rgba(15,23,42,.08)!important;
}
html[data-theme="light"] body.spx-public .why52-step h3,
html[data-theme="light"] body.spx-public .why52-step strong{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .why52-step p,
html[data-theme="light"] body.spx-public .why52-step-text{
  color:rgba(15,23,42,.68)!important;
}
html[data-theme="light"] body.spx-public .why52-nav-btn,
html[data-theme="light"] body.spx-public [data-why52-jump]{
  color:rgba(15,23,42,.60)!important;
  border-color:rgba(15,23,42,.14)!important;
  background:rgba(255,255,255,.70)!important;
}
html[data-theme="light"] body.spx-public .why52-nav-btn.is-active,
html[data-theme="light"] body.spx-public [data-why52-jump].is-active{
  color:#0f172a!important;
  border-color:rgba(15,23,42,.30)!important;
  background:#fff!important;
}

/* 4e. Export section */
html[data-theme="light"] body.spx-public .spx-export-section{
  background:linear-gradient(180deg,#e8f0fc,#f0f4fa)!important;
}
html[data-theme="light"] body.spx-public .spx-export-section h2,
html[data-theme="light"] body.spx-public .spx-export-section h3{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-export-section p{
  color:rgba(15,23,42,.68)!important;
}
html[data-theme="light"] body.spx-public .spx-export-explainer{
  background:rgba(255,255,255,.75)!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .spx-export-explainer span{
  background:rgba(255,255,255,.85)!important;
  border-color:rgba(15,23,42,.10)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-export-explainer b{
  color:rgba(15,23,42,.50)!important;
}

/* 4f. Pricing section */
html[data-theme="light"] body.spx-public .spx-pricing-section{
  background:#f0f4fa!important;
}
html[data-theme="light"] body.spx-public .spx-pricing-card,
html[data-theme="light"] body.spx-public .spx-pricing-tier{
  background:#fff!important;
  border-color:rgba(15,23,42,.12)!important;
  box-shadow:0 8px 28px rgba(15,23,42,.08)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-pricing-card h2,
html[data-theme="light"] body.spx-public .spx-pricing-card h3,
html[data-theme="light"] body.spx-public .spx-pricing-tier h2,
html[data-theme="light"] body.spx-public .spx-pricing-tier h3{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-pricing-section p,
html[data-theme="light"] body.spx-public .spx-pricing-tier p{
  color:rgba(15,23,42,.68)!important;
}

/* 4g. Roadmap / Alpha feedback section */
html[data-theme="light"] body.spx-public .spx-summary-roadmap,
html[data-theme="light"] body.spx-public .spx-roadmap-hero-v62{
  background:linear-gradient(180deg,#f0f4fa,#e8f0fc)!important;
}
html[data-theme="light"] body.spx-public .spx-summary-panel h2,
html[data-theme="light"] body.spx-public .spx-alpha-feedback-panel h3{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-summary-panel p,
html[data-theme="light"] body.spx-public .spx-alpha-feedback-panel p{
  color:rgba(15,23,42,.68)!important;
}
html[data-theme="light"] body.spx-public [data-alpha-topic]{
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(15,23,42,.12)!important;
  color:rgba(15,23,42,.72)!important;
}
html[data-theme="light"] body.spx-public [data-alpha-topic].is-active{
  background:#fff!important;
  border-color:rgba(15,23,42,.28)!important;
  color:#0f172a!important;
}

/* 4h. Feature pages */
html[data-theme="light"] body.spx-public .spx-feature-hero-v127{
  background:linear-gradient(180deg,#e8f0fc,#f0f4fa)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-hero-copy h1{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-feature-lead{
  color:rgba(15,23,42,.68)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-hero-visual{
  border-color:rgba(15,23,42,.14)!important;
  box-shadow:0 24px 60px rgba(15,23,42,.12)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-proof-v129{
  background:rgba(255,255,255,.85)!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-proof-item span{
  color:rgba(15,23,42,.55)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-story-v127{
  background:rgba(255,255,255,.85)!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-story-head h2,
html[data-theme="light"] body.spx-public .spx-feature-story-head p{
  color:rgba(15,23,42,.72)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-how-card{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-how-card h3{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-feature-how-card p{
  color:rgba(15,23,42,.66)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-how-num{
  background:rgba(15,23,42,.06)!important;
  border-color:rgba(15,23,42,.18)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-detail-card{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(15,23,42,.10)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-feature-detail-card p{
  color:rgba(15,23,42,.66)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-cta-strip-v127{
  background:rgba(255,255,255,.82)!important;
  border-color:rgba(15,23,42,.12)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-cta-copy h2{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-feature-cta-copy p{
  color:rgba(15,23,42,.68)!important;
}
html[data-theme="light"] body.spx-public .spx-related-links-v127 a{
  background:rgba(255,255,255,.78)!important;
  border-color:rgba(15,23,42,.12)!important;
  color:rgba(15,23,42,.72)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-faq-v127,
html[data-theme="light"] body.spx-public .faq-block{
  background:transparent!important;
}

/* 4i. Support page */
html[data-theme="light"] body.spx-public .spx-support-hub-v127{
  background:#f0f4fa!important;
}
html[data-theme="light"] body.spx-public .spx-support-hero-copy h1{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-support-hero-copy p{
  color:rgba(15,23,42,.68)!important;
}
html[data-theme="light"] body.spx-public .spx-support-stats-v127 > div{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .spx-support-stats-v127 b{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-support-stats-v127 small{
  color:rgba(15,23,42,.55)!important;
}
html[data-theme="light"] body.spx-public .spx-support-cat-v127{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .spx-support-cat-v127:hover{
  border-color:rgba(15,23,42,.20)!important;
  box-shadow:0 12px 36px rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .spx-support-cat-icon{
  background:rgba(37,210,255,.08)!important;
  border-color:rgba(37,210,255,.20)!important;
}
html[data-theme="light"] body.spx-public .spx-support-cat-v127 b{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-support-cat-v127 p{
  color:rgba(15,23,42,.60)!important;
}
html[data-theme="light"] body.spx-public .spx-support-form-v127{
  background:rgba(255,255,255,.90)!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .spx-support-form-header h2{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-support-form-header p{
  color:rgba(15,23,42,.68)!important;
}

/* 4j. Auth inner form */
html[data-theme="light"] body.spx-public .spx-auth-v127{
  background:linear-gradient(180deg,#e8f0fc,#f3f6fb)!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v127 .auth-card{
  background:rgba(255,255,255,.97)!important;
  border-color:rgba(15,23,42,.12)!important;
  box-shadow:0 28px 80px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.90)!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v127 .auth-card h1{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-auth-subtitle{
  color:rgba(15,23,42,.64)!important;
}
html[data-theme="light"] body.spx-public .spx-auth-brand-v127 span{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-auth-field-v127 label,
html[data-theme="light"] body.spx-public .spx-auth-field-v127 > label{
  color:rgba(15,23,42,.64)!important;
}
html[data-theme="light"] body.spx-public .spx-auth-field-v127 input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] body.spx-public .spx-auth-field-v127 select,
html[data-theme="light"] body.spx-public .spx-auth-field-v127 textarea{
  background:#fff!important;
  border-color:rgba(15,23,42,.18)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-auth-field-v127 input::placeholder,
html[data-theme="light"] body.spx-public .spx-auth-field-v127 textarea::placeholder{
  color:rgba(15,23,42,.38)!important;
}
html[data-theme="light"] body.spx-public .spx-auth-field-v127 input:focus,
html[data-theme="light"] body.spx-public .spx-auth-field-v127 select:focus,
html[data-theme="light"] body.spx-public .spx-auth-field-v127 textarea:focus{
  border-color:rgba(37,210,255,.60)!important;
  box-shadow:0 0 0 4px rgba(37,210,255,.10)!important;
}
html[data-theme="light"] body.spx-public .spx-auth-divider{color:rgba(15,23,42,.35)!important;}
html[data-theme="light"] body.spx-public .spx-auth-divider::before,
html[data-theme="light"] body.spx-public .spx-auth-divider::after{
  background:rgba(15,23,42,.12)!important;
}
html[data-theme="light"] body.spx-public .spx-google-btn-v127{
  background:rgba(255,255,255,.90)!important;
  border-color:rgba(15,23,42,.18)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-google-btn-v127:hover{
  background:#fff!important;
  border-color:rgba(15,23,42,.28)!important;
}
html[data-theme="light"] body.spx-public .spx-auth-links-v127{color:rgba(15,23,42,.55)!important;}
html[data-theme="light"] body.spx-public .spx-auth-links-v127 a{color:rgba(15,23,42,.72)!important;}
html[data-theme="light"] body.spx-public .spx-auth-links-v127 a strong{color:#0e7aad!important;}
html[data-theme="light"] body.spx-public .spx-auth-meta-link{color:rgba(14,122,173,.90)!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v127 .auth-story{
  background:
    radial-gradient(ellipse 90% 70% at 10% 20%,rgba(37,210,255,.08),transparent 55%),
    linear-gradient(165deg,rgba(232,240,252,.85),rgba(216,234,252,.70))!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v127 .auth-story h2{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v127 .auth-story p{
  color:rgba(15,23,42,.68)!important;
}
html[data-theme="light"] body.spx-public .auth-story-points span{
  border-color:rgba(15,23,42,.14)!important;
  background:rgba(255,255,255,.75)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .auth-story-points span svg{
  color:rgba(15,23,42,.50)!important;
}

/* 4k. General cards / sections with dark glass backgrounds */
html[data-theme="light"] body.spx-public .feature-card,
html[data-theme="light"] body.spx-public .spx-update-card{
  background:#fff!important;
  border-color:rgba(15,23,42,.10)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .feature-card h2,
html[data-theme="light"] body.spx-public .spx-update-card h2{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .feature-card p,
html[data-theme="light"] body.spx-public .spx-update-card p{
  color:rgba(15,23,42,.66)!important;
}

/* 4l. FAQ blocks */
html[data-theme="light"] body.spx-public .spx-faq-item,
html[data-theme="light"] body.spx-public .faq-item{
  border-color:rgba(15,23,42,.12)!important;
  background:rgba(255,255,255,.78)!important;
}
html[data-theme="light"] body.spx-public .spx-faq-item summary,
html[data-theme="light"] body.spx-public .faq-item summary,
html[data-theme="light"] body.spx-public .faq-question{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-faq-item p,
html[data-theme="light"] body.spx-public .faq-item p,
html[data-theme="light"] body.spx-public .faq-answer{
  color:rgba(15,23,42,.68)!important;
}

/* 4m. Eyebrow labels */
html[data-theme="light"] body.spx-public .eyebrow:not(.alpha){
  color:rgba(15,23,42,.55)!important;
  border-color:rgba(15,23,42,.16)!important;
  background:rgba(15,23,42,.05)!important;
}

/* 4n. Ghost buttons */
html[data-theme="light"] body.spx-public .btn.ghost{
  border-color:rgba(15,23,42,.22)!important;
  color:rgba(15,23,42,.80)!important;
  background:rgba(255,255,255,.70)!important;
}
html[data-theme="light"] body.spx-public .btn.ghost:hover{
  border-color:rgba(15,23,42,.36)!important;
  color:#0f172a!important;
  background:#fff!important;
}

/* 4o. Footer */
html[data-theme="light"] body.spx-public .spx-footer,
html[data-theme="light"] body.spx-public footer{
  background:rgba(232,240,252,.94)!important;
  border-top-color:rgba(15,23,42,.10)!important;
  color:rgba(15,23,42,.70)!important;
}
html[data-theme="light"] body.spx-public .spx-footer a,
html[data-theme="light"] body.spx-public footer a{
  color:rgba(15,23,42,.65)!important;
}
html[data-theme="light"] body.spx-public .spx-footer a:hover,
html[data-theme="light"] body.spx-public footer a:hover{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-footer-brand,
html[data-theme="light"] body.spx-public .footer-brand{
  color:#0f172a!important;
}

/* 4p. Alert banners in light mode */
html[data-theme="light"] body.spx-public .spx-alert-banner-v130{
  background:rgba(248,250,254,.92)!important;
  box-shadow:0 2px 8px rgba(15,23,42,.08)!important;
}
html[data-theme="light"] body.spx-public .spx-alert-banner-info{
  background:rgba(219,234,254,.85)!important;
  color:#1e40af!important;
}
html[data-theme="light"] body.spx-public .spx-alert-banner-warning{
  background:rgba(254,243,199,.85)!important;
  color:#92400e!important;
}
html[data-theme="light"] body.spx-public .spx-alert-banner-critical{
  background:rgba(254,226,226,.85)!important;
  color:#991b1b!important;
}
html[data-theme="light"] body.spx-public .spx-alert-banner-success{
  background:rgba(220,252,231,.85)!important;
  color:#166534!important;
}

/* 4q. Page heroes (compact) */
html[data-theme="light"] body.spx-public .page-hero{
  background:linear-gradient(180deg,#e8f0fc,#f0f4fa)!important;
}
html[data-theme="light"] body.spx-public .page-hero h1{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .page-hero p{
  color:rgba(15,23,42,.68)!important;
}

/* 4r. Pricing standalone page */
html[data-theme="light"] body.spx-public .spx-pricing-section.standalone{
  background:#f0f4fa!important;
}

html body.spx-public .spx-pricing-section.standalone{
  min-height:auto!important;
  padding-block:clamp(96px,10vw,132px) clamp(58px,7vw,88px)!important;
}
html body.spx-public .spx-pricing-section.standalone .spx-price-grid{
  align-items:start!important;
  gap:16px!important;
}
html body.spx-public .spx-pricing-section.standalone .spx-price-card{
  min-height:0!important;
  height:auto!important;
  padding:22px!important;
  border-radius:26px!important;
  gap:10px!important;
}
html body.spx-public .spx-pricing-section.standalone .spx-price-card h3{
  margin:10px 0 4px!important;
  font-size:22px!important;
}
html body.spx-public .spx-pricing-section.standalone .spx-price-card strong{
  font-size:clamp(32px,3.2vw,44px)!important;
  margin:4px 0 2px!important;
}
html body.spx-public .spx-pricing-section.standalone .spx-price-card p{
  margin:0!important;
  font-size:14px!important;
  line-height:1.52!important;
}
html body.spx-public .spx-pricing-section.standalone .spx-price-card ul{
  margin:4px 0 8px!important;
  gap:7px!important;
}
html body.spx-public .spx-pricing-section.standalone .spx-price-card li{
  font-size:13px!important;
  line-height:1.35!important;
}
html body.spx-public .spx-pricing-section.standalone .spx-orbit-notify{
  gap:8px!important;
  margin-top:6px!important;
}
html body.spx-public .spx-pricing-section.standalone .spx-orbit-notify label{
  gap:5px!important;
}
html body.spx-public .spx-pricing-section.standalone .spx-orbit-notify input{
  min-height:42px!important;
}
@media(min-width:901px){
  html body.spx-public .spx-pricing-section.standalone .spx-orbit-notify{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:end!important;
  }
  html body.spx-public .spx-pricing-section.standalone .spx-orbit-notify label span{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
  }
  html body.spx-public .spx-pricing-section.standalone .spx-orbit-notify small{
    grid-column:1/-1!important;
  }
}
@media(max-width:900px){
  html body.spx-public .spx-pricing-section.standalone .spx-price-card{
    padding:18px!important;
  }
}

/* A8.131 completion: route-specific feature visuals and auth safety fixes. */
html body.spx-public .spx-feature-mock{position:relative!important;min-height:260px!important;}
html body.spx-public .spx-feature-mock img{opacity:.52!important;transform:scale(1.03)!important;}
html body.spx-public .spx-feature-visual-layer{
  position:absolute!important;inset:clamp(16px,2.2vw,28px)!important;z-index:2!important;
  display:grid!important;align-content:space-between!important;gap:18px!important;
  padding:clamp(18px,2.4vw,28px)!important;border-radius:24px!important;
  border:1px solid rgba(218,236,255,.16)!important;
  background:radial-gradient(420px 180px at 20% 0%,rgba(var(--feat-c1,37,210,255),.16),transparent 70%),linear-gradient(165deg,rgba(7,14,30,.82),rgba(3,7,16,.58))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.30)!important;
}
html body.spx-public .spx-feature-visual-head{display:grid!important;gap:8px!important;}
html body.spx-public .spx-feature-visual-head span{
  width:max-content!important;max-width:100%!important;padding:7px 10px!important;border-radius:999px!important;
  border:1px solid rgba(var(--feat-c1,37,210,255),.30)!important;color:rgb(var(--feat-c1,37,210,255))!important;
  background:rgba(var(--feat-c1,37,210,255),.10)!important;font-size:11px!important;font-weight:950!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;
}
html body.spx-public .spx-feature-visual-head strong{
  color:#fff!important;font-size:clamp(24px,3.6vw,42px)!important;line-height:1!important;letter-spacing:-.04em!important;max-width:11ch!important;
}
html body.spx-public .spx-feature-visual-body{display:grid!important;gap:14px!important;}
html body.spx-public .spx-feature-visual-body ul{display:grid!important;gap:8px!important;margin:0!important;padding:0!important;list-style:none!important;}
html body.spx-public .spx-feature-visual-body li{
  display:flex!important;align-items:center!important;gap:10px!important;min-height:34px!important;padding:8px 11px!important;
  border-radius:12px!important;border:1px solid rgba(218,236,255,.10)!important;background:rgba(255,255,255,.055)!important;
  color:rgba(235,247,255,.86)!important;font-size:13px!important;font-weight:850!important;
}
html body.spx-public .spx-feature-visual-body li::before{
  content:""!important;width:8px!important;height:8px!important;border-radius:50%!important;background:rgb(var(--feat-c1,37,210,255))!important;
  box-shadow:0 0 18px rgba(var(--feat-c1,37,210,255),.75)!important;flex:0 0 auto!important;
}
html body.spx-public .spx-feature-visual-chips{display:flex!important;flex-wrap:wrap!important;gap:8px!important;}
html body.spx-public .spx-feature-visual-chips span{
  padding:7px 10px!important;border-radius:999px!important;border:1px solid rgba(var(--feat-c1,37,210,255),.24)!important;
  color:rgb(var(--feat-c1,37,210,255))!important;background:rgba(var(--feat-c1,37,210,255),.08)!important;font-size:11px!important;font-weight:950!important;
}
html body.spx-public .spx-feature-visual-layer[data-feature-visual-kind="zip"] .spx-feature-visual-head strong::before{
  content:"";display:block;width:46px;height:58px;margin-bottom:12px;border-radius:10px;border:1px solid rgba(34,197,94,.42);
  background:linear-gradient(180deg,rgba(34,197,94,.18),rgba(34,197,94,.05));box-shadow:inset 14px 0 0 rgba(255,255,255,.06),0 0 34px rgba(34,197,94,.18);
}
html body.spx-public .spx-feature-visual-layer[data-feature-visual-kind="wordpress"] .spx-feature-visual-head strong::before{
  content:"W";display:grid;place-items:center;width:58px;height:58px;margin-bottom:12px;border-radius:50%;border:1px solid rgba(167,139,250,.42);
  background:rgba(167,139,250,.10);color:#c4b5fd;font-size:30px;font-weight:950;
}
html[data-theme="light"] body.spx-public .spx-feature-mock img{opacity:.36!important;}
html[data-theme="light"] body.spx-public .spx-feature-visual-layer{
  background:radial-gradient(420px 180px at 20% 0%,rgba(var(--feat-c1,37,210,255),.14),transparent 70%),linear-gradient(165deg,rgba(255,255,255,.92),rgba(240,246,255,.78))!important;
  border-color:rgba(15,23,42,.10)!important;box-shadow:0 18px 46px rgba(15,23,42,.12)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-visual-head strong{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-feature-visual-body li{color:rgba(15,23,42,.74)!important;background:rgba(255,255,255,.82)!important;border-color:rgba(15,23,42,.10)!important;}

@media(max-width:1100px){
  html body.spx-public.spx-mobile-nav-open .site-nav,
  html body.spx-public.spx-mobile-nav-open .site-header.spx-nav-v26.is-open .site-nav{
    box-sizing:border-box!important;
    left:18px!important;
    right:auto!important;
    width:calc(100vw - 36px)!important;
    max-width:calc(100vw - 36px)!important;
  }
  html body.spx-public.spx-mobile-nav-open .nav-group.is-mobile-open .nav-menu{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    display:grid!important;
    max-height:min(62svh,560px)!important;
    overflow-y:auto!important;
    padding:10px!important;
    margin-top:8px!important;
    border:1px solid rgba(218,236,255,.10)!important;
    border-radius:20px!important;
    background:linear-gradient(180deg,rgba(11,22,42,.94),rgba(8,15,32,.90))!important;
  }
  html[data-theme="light"] body.spx-public.spx-mobile-nav-open .nav-group.is-mobile-open .nav-menu{
    background:rgba(248,250,254,.96)!important;
    border-color:rgba(15,23,42,.10)!important;
  }
}

html body.spx-auth-page-v130{overflow-x:clip!important;overflow-y:auto!important;}
html body.spx-auth-page-v130 main.spx-auth-main-v130{height:auto!important;min-height:100svh!important;overflow:visible!important;align-items:center!important;}
html body.spx-public .auth-shell.spx-auth-v127{align-items:center!important;padding:clamp(18px,3vw,34px)!important;}
html body.spx-public .spx-auth-story-features{display:grid!important;gap:10px!important;margin-top:18px!important;}
html body.spx-public .spx-auth-story-features div{display:grid!important;gap:3px!important;padding:12px 14px!important;border-radius:16px!important;border:1px solid rgba(126,231,255,.14)!important;background:rgba(255,255,255,.045)!important;}
html body.spx-public .spx-auth-story-features strong{display:block!important;color:#fff!important;font-size:13px!important;}
html body.spx-public .spx-auth-story-features span{display:block!important;color:rgba(218,236,255,.66)!important;font-size:12px!important;line-height:1.45!important;}
html body.spx-public [data-theme-toggle].spx-theme-toggle-v130{display:inline-flex!important;}
@media(min-width:901px){
  html body.spx-public .auth-shell.spx-auth-v127{
    width:min(1180px,calc(100vw - 56px))!important;
    max-width:min(1180px,calc(100vw - 56px))!important;
    margin:0 auto!important;
    grid-template-columns:minmax(380px,.95fr) minmax(440px,1.05fr)!important;
    grid-template-rows:auto!important;
    gap:clamp(24px,3vw,46px)!important;
    justify-content:center!important;
  }
  html body.spx-public .auth-login-v127 .auth-card,
  html body.spx-public .spx-reset-shell .auth-card{grid-column:1!important;grid-row:1!important;}
  html body.spx-public .auth-login-v127 .auth-story,
  html body.spx-public .spx-reset-shell .auth-story{grid-column:2!important;grid-row:1!important;}
  html body.spx-public .auth-register-v127 .auth-story{grid-column:1!important;grid-row:1!important;}
  html body.spx-public .auth-register-v127 .auth-card{grid-column:2!important;grid-row:1!important;}
  html body.spx-public .auth-shell.spx-auth-v127 .auth-card,
  html body.spx-public .auth-shell.spx-auth-v127 .auth-story{
    width:100%!important;
    align-self:center!important;
  }
}
@media(max-width:900px){
  html body.spx-public .auth-shell.spx-auth-v127{
    width:100%!important;
    grid-template-columns:1fr!important;
  }
  html body.spx-public .auth-shell.spx-auth-v127 .auth-card,
  html body.spx-public .auth-shell.spx-auth-v127 .auth-story{
    grid-column:1!important;
    grid-row:auto!important;
  }
}
@media(max-width:760px){
  html body.spx-public .spx-support-hero-v127{
    grid-template-columns:1fr!important;
    padding:clamp(58px,14vw,76px) 18px 26px!important;
    gap:18px!important;
  }
  html body.spx-public .spx-support-hero-copy,
  html body.spx-public .spx-support-stats-v127{
    width:100%!important;
    min-width:0!important;
  }
  html body.spx-public .spx-support-hero-copy{
    padding:20px!important;
    border-radius:24px!important;
  }
  html body.spx-public .spx-support-hero-copy h1{
    font-size:clamp(38px,12vw,52px)!important;
  }
  html body.spx-public .spx-support-hero-actions,
  html body.spx-public .spx-support-form-trust{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  html body.spx-public .spx-support-hero-actions .btn{
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    text-align:center!important;
  }
  html body.spx-public .spx-support-stats-v127 > div{
    padding:16px!important;
  }
}

/* A8.133 - public visual flow, static dashboard, auth width and light-mode polish. */
html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
  opacity:var(--spx-hero-copy-story-opacity,1)!important;
}
@media (min-width:901px){
  html.spx-dom-view-active body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy,
  html.spx-a115-what-how body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy,
  html.spx-how-physical-ready body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,-12px,0) scale(.985)!important;
  }
}

html body.spx-public #dashboard.spx-dashboard-static-v133{
  position:relative!important;
  display:grid!important;
  order:4!important;
  grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr)!important;
  gap:clamp(28px,4vw,72px)!important;
  align-items:center!important;
  width:min(1440px,calc(100vw - 48px))!important;
  margin:clamp(70px,10vw,150px) auto!important;
  padding:clamp(26px,4vw,58px)!important;
  min-height:0!important;
  border-radius:34px!important;
  border:1px solid rgba(218,236,255,.11)!important;
  background:radial-gradient(820px 480px at 76% 18%,rgba(37,210,255,.14),transparent 66%),linear-gradient(135deg,rgba(8,17,34,.82),rgba(4,8,18,.62))!important;
  box-shadow:0 34px 120px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.055)!important;
  overflow:hidden!important;
}
html body.spx-public #dashboard.spx-dashboard-static-v133 + .spx-pricing-section{order:5!important;}
html body.spx-public #pricing.spx-pricing-section{order:5!important;}
html body.spx-public #roadmap.spx-summary-roadmap{order:6!important;}
html body.spx-public #dashboard.spx-dashboard-static-v133::before{
  content:""!important;
  position:absolute!important;
  inset:18px!important;
  border-radius:26px!important;
  border:1px solid rgba(255,255,255,.055)!important;
  pointer-events:none!important;
}
html body.spx-public .spx-dashboard-static-copy{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  gap:18px!important;
}
html body.spx-public .spx-dashboard-static-copy h2{
  margin:0!important;
  max-width:11ch!important;
  font-size:clamp(42px,5vw,82px)!important;
  line-height:.94!important;
  letter-spacing:-.055em!important;
  color:#f8fbff!important;
}
html body.spx-public .spx-dashboard-static-copy p{
  margin:0!important;
  max-width:58ch!important;
  color:rgba(224,239,255,.78)!important;
  line-height:1.68!important;
}
html body.spx-public .spx-dashboard-static-points{
  display:grid!important;
  gap:10px!important;
  margin-top:8px!important;
}
html body.spx-public .spx-dashboard-static-points span{
  display:grid!important;
  gap:4px!important;
  padding:14px 16px!important;
  border-radius:18px!important;
  border:1px solid rgba(126,231,255,.14)!important;
  background:linear-gradient(135deg,rgba(126,231,255,.09),rgba(255,255,255,.035))!important;
}
html body.spx-public .spx-dashboard-static-points b{color:#f8fbff!important;font-size:14px!important;}
html body.spx-public .spx-dashboard-static-points small{color:rgba(224,239,255,.68)!important;font-size:12px!important;line-height:1.45!important;}
html body.spx-public .spx-dashboard-static-visual{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  gap:14px!important;
  margin:0!important;
}
html body.spx-public .spx-dashboard-static-shot{
  width:100%!important;
  border-radius:24px!important;
  border:1px solid rgba(218,236,255,.12)!important;
  box-shadow:0 28px 84px rgba(0,0,0,.34)!important;
  background:#07101e!important;
}
html body.spx-public .spx-dashboard-static-shot--light{display:none!important;}
html[data-theme="light"] body.spx-public .spx-dashboard-static-shot--dark,
html[data-spx-theme="light"] body.spx-public .spx-dashboard-static-shot--dark{display:none!important;}
html[data-theme="light"] body.spx-public .spx-dashboard-static-shot--light,
html[data-spx-theme="light"] body.spx-public .spx-dashboard-static-shot--light{display:block!important;}
html body.spx-public .spx-dashboard-static-visual figcaption{
  display:flex!important;
  justify-content:space-between!important;
  gap:14px!important;
  align-items:center!important;
  padding:13px 16px!important;
  border-radius:18px!important;
  border:1px solid rgba(218,236,255,.10)!important;
  background:rgba(3,8,18,.48)!important;
  color:#f8fbff!important;
}
html body.spx-public .spx-dashboard-static-visual figcaption span{
  color:#7ee7ff!important;
  font-size:11px!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  font-weight:950!important;
}
html body.spx-public .spx-dashboard-static-visual figcaption strong{
  max-width:46ch!important;
  font-size:13px!important;
  line-height:1.35!important;
}

html body.spx-public .auth-shell.spx-auth-v127{
  width:min(1160px,calc(100vw - 42px))!important;
  max-width:min(1160px,calc(100vw - 42px))!important;
  margin:clamp(34px,6vh,72px) auto!important;
  padding:clamp(24px,4vw,46px)!important;
  border-radius:34px!important;
  border:1px solid rgba(218,236,255,.12)!important;
  background:radial-gradient(620px 360px at 12% 0%,rgba(37,210,255,.13),transparent 62%),linear-gradient(145deg,rgba(8,17,34,.84),rgba(4,8,18,.68))!important;
  box-shadow:0 32px 120px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
@media(min-width:901px){
  html body.spx-public .auth-shell.spx-auth-v127{
    grid-template-columns:minmax(0,1.04fr) minmax(330px,.72fr)!important;
  }
}
html body.spx-public .auth-shell.spx-auth-v127 .auth-card,
html body.spx-public .auth-shell.spx-auth-v127 .auth-story{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  padding:0!important;
  border-radius:0!important;
}
html body.spx-public .auth-shell.spx-auth-v127 .auth-card{
  max-width:none!important;
  width:100%!important;
}
html body.spx-public .auth-shell.spx-auth-v127 .auth-story{
  align-self:stretch!important;
  padding-left:clamp(18px,3vw,34px)!important;
  border-left:1px solid rgba(218,236,255,.10)!important;
}
html body.spx-public .spx-auth-field-v127 input,
html body.spx-public .spx-auth-field-v127 textarea,
html body.spx-public .spx-auth-field-v127 select{
  min-height:54px!important;
  border-radius:16px!important;
  border:1px solid rgba(218,236,255,.15)!important;
  background:rgba(4,10,22,.62)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
html body.spx-public .spx-auth-submit-v127{min-height:54px!important;border-radius:16px!important;}

html body.spx-public .spx-feature-hero-visual::before,
html body.spx-public .spx-feature-hero-visual::after,
html body.spx-public .spx-feature-mock::before,
html body.spx-public .spx-feature-mock::after{content:none!important;display:none!important;}
html body.spx-public .spx-feature-mock{
  display:grid!important;
  gap:14px!important;
  min-height:0!important;
  padding:0!important;
}
html body.spx-public .spx-feature-mock img{
  position:relative!important;
  z-index:1!important;
  opacity:1!important;
  transform:none!important;
  border-radius:22px!important;
}
html body.spx-public .spx-feature-visual-layer{
  position:relative!important;
  inset:auto!important;
  z-index:2!important;
  min-height:0!important;
  align-content:start!important;
  background:linear-gradient(145deg,rgba(7,14,30,.88),rgba(3,7,16,.68))!important;
}
html body.spx-public .spx-feature-proof-v129[data-feature-page],
html body.spx-public .spx-feature-how-v129[data-feature-page],
html body.spx-public .spx-feature-card-grid-v127[data-feature-page],
html body.spx-public .spx-feature-cta-strip-v127[data-feature-page]{
  --feat-page-radius:26px;
}
html body.spx-public .spx-feature-hero-v127[data-feature-page="zip-export"] .spx-feature-visual-layer{border-style:dashed!important;}
html body.spx-public .spx-feature-hero-v127[data-feature-page="files"] .spx-feature-visual-body ul{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
html body.spx-public .spx-feature-hero-v127[data-feature-page="seo-insights"] .spx-feature-visual-body li::before{border-radius:3px!important;}
html body.spx-public .spx-feature-hero-v127[data-feature-page="website-builder"] .spx-feature-visual-layer{background:linear-gradient(145deg,rgba(11,32,58,.88),rgba(4,8,18,.70))!important;}
html body.spx-public .spx-feature-hero-v127[data-feature-page="wordpress-export"] .spx-feature-visual-layer{background:linear-gradient(145deg,rgba(31,22,66,.88),rgba(5,8,18,.70))!important;}

html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-static-v133,
html[data-spx-theme="light"] body.spx-public #dashboard.spx-dashboard-static-v133{
  background:radial-gradient(820px 480px at 76% 18%,rgba(14,165,233,.15),transparent 66%),linear-gradient(135deg,rgba(255,255,255,.96),rgba(235,243,255,.88))!important;
  border-color:rgba(15,23,42,.10)!important;
  box-shadow:0 30px 100px rgba(15,23,42,.12)!important;
}
html[data-theme="light"] body.spx-public .spx-dashboard-static-copy h2,
html[data-theme="light"] body.spx-public .spx-dashboard-static-points b,
html[data-theme="light"] body.spx-public .spx-dashboard-static-visual figcaption,
html[data-spx-theme="light"] body.spx-public .spx-dashboard-static-copy h2,
html[data-spx-theme="light"] body.spx-public .spx-dashboard-static-points b,
html[data-spx-theme="light"] body.spx-public .spx-dashboard-static-visual figcaption{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-dashboard-static-copy p,
html[data-theme="light"] body.spx-public .spx-dashboard-static-points small,
html[data-spx-theme="light"] body.spx-public .spx-dashboard-static-copy p,
html[data-spx-theme="light"] body.spx-public .spx-dashboard-static-points small{color:rgba(15,23,42,.70)!important;}
html[data-theme="light"] body.spx-public .spx-dashboard-static-points span,
html[data-theme="light"] body.spx-public .spx-dashboard-static-visual figcaption,
html[data-spx-theme="light"] body.spx-public .spx-dashboard-static-points span,
html[data-spx-theme="light"] body.spx-public .spx-dashboard-static-visual figcaption{
  background:rgba(255,255,255,.80)!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .spx-export-section p,
html[data-theme="light"] body.spx-public .spx-export-step-v128 p,
html[data-theme="light"] body.spx-public .spx-export-card-v128 p,
html[data-theme="light"] body.spx-public .spx-pricing-section p,
html[data-theme="light"] body.spx-public .spx-pricing-note,
html[data-spx-theme="light"] body.spx-public .spx-export-section p,
html[data-spx-theme="light"] body.spx-public .spx-export-step-v128 p,
html[data-spx-theme="light"] body.spx-public .spx-export-card-v128 p,
html[data-spx-theme="light"] body.spx-public .spx-pricing-section p,
html[data-spx-theme="light"] body.spx-public .spx-pricing-note{
  color:rgba(15,23,42,.72)!important;
}
html[data-theme="light"] body.spx-public .spx-export-section,
html[data-spx-theme="light"] body.spx-public .spx-export-section{
  background:radial-gradient(760px 360px at 20% 0%,rgba(14,165,233,.14),transparent 66%),linear-gradient(180deg,rgba(255,255,255,.94),rgba(239,246,255,.84))!important;
  border-color:rgba(15,23,42,.10)!important;
  color:#0f172a!important;
  box-shadow:0 28px 90px rgba(15,23,42,.11)!important;
}
html[data-theme="light"] body.spx-public .spx-export-section h2,
html[data-theme="light"] body.spx-public .spx-export-section h3,
html[data-theme="light"] body.spx-public .spx-export-section b,
html[data-theme="light"] body.spx-public .spx-export-proof-v128 b,
html[data-spx-theme="light"] body.spx-public .spx-export-section h2,
html[data-spx-theme="light"] body.spx-public .spx-export-section h3,
html[data-spx-theme="light"] body.spx-public .spx-export-section b,
html[data-spx-theme="light"] body.spx-public .spx-export-proof-v128 b{
  color:#0f172a!important;
  text-shadow:none!important;
}
html[data-theme="light"] body.spx-public .spx-export-proof-v128 span,
html[data-spx-theme="light"] body.spx-public .spx-export-proof-v128 span{
  background:rgba(255,255,255,.78)!important;
  border-color:rgba(14,165,233,.18)!important;
}
html[data-theme="light"] body.spx-public .spx-export-step-v128,
html[data-theme="light"] body.spx-public .spx-export-card-v128,
html[data-theme="light"] body.spx-public .spx-price-card-v128,
html[data-spx-theme="light"] body.spx-public .spx-export-step-v128,
html[data-spx-theme="light"] body.spx-public .spx-export-card-v128,
html[data-spx-theme="light"] body.spx-public .spx-price-card-v128{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(241,246,255,.82))!important;
  border-color:rgba(15,23,42,.10)!important;
  box-shadow:0 20px 60px rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v127,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v127{
  background:radial-gradient(620px 360px at 12% 0%,rgba(14,165,233,.13),transparent 62%),linear-gradient(145deg,rgba(255,255,255,.96),rgba(238,246,255,.88))!important;
  border-color:rgba(15,23,42,.11)!important;
  color:#0f172a!important;
  box-shadow:0 28px 90px rgba(15,23,42,.13)!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v127 h1,
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v127 h2,
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v127 strong,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v127 h1,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v127 h2,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v127 strong{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v127 p,
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v127 span,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v127 p,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v127 span{color:rgba(15,23,42,.70)!important;}
html[data-theme="light"] body.spx-public .spx-auth-field-v127 input,
html[data-spx-theme="light"] body.spx-public .spx-auth-field-v127 input{
  background:rgba(255,255,255,.92)!important;
  border-color:rgba(15,23,42,.18)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .maintenance-lock,
html[data-spx-theme="light"] body.spx-public .maintenance-lock{
  background:linear-gradient(180deg,rgba(255,250,238,.92),rgba(255,246,226,.78))!important;
  border-color:rgba(217,119,6,.18)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-feature-mock img,
html[data-spx-theme="light"] body.spx-public .spx-feature-mock img{
  opacity:1!important;
}
html body.spx-public .spx-alert-banner-v130{
  position:relative!important;
  z-index:4!important;
  margin:calc(var(--nav-clearance,72px) + 8px) auto 0!important;
  width:min(1180px,calc(100vw - 32px))!important;
}
@media(max-width:980px){
  html body.spx-public #dashboard.spx-dashboard-static-v133{
    grid-template-columns:1fr!important;
    width:min(760px,calc(100vw - 28px))!important;
    margin:64px auto!important;
    padding:22px!important;
    border-radius:28px!important;
  }
  html body.spx-public .spx-dashboard-static-copy h2{max-width:13ch!important;}
  html body.spx-public .spx-dashboard-static-visual figcaption{display:grid!important;}
  html body.spx-public .auth-shell.spx-auth-v127{
    width:min(720px,calc(100vw - 28px))!important;
    max-width:min(720px,calc(100vw - 28px))!important;
  }
  html body.spx-public .auth-shell.spx-auth-v127 .auth-story{
    padding-left:0!important;
    padding-top:20px!important;
    border-left:0!important;
    border-top:1px solid rgba(218,236,255,.10)!important;
  }
}

/* ==========================================================================
   A8.134 — Auth single-block · Feature page accents · Light mode gaps
   ========================================================================== */

/* ── Phase 2: Auth single-block rework ──────────────────────────────────────
   Collapse the two-column auth shell to one wide centered card.
   Hide the marketing story panel. Preserve 2FA, Google, captcha inside card.
   Login/forgot → 840px max. Register → 960px max (multi-step has more fields).
   ========================================================================== */

/* Hide story panel on all screen sizes */
html body.spx-public .auth-shell.spx-auth-v127 .auth-story{
  display:none!important;
}

/* Single-column grid for all auth shells */
html body.spx-public .auth-shell.spx-auth-v127{
  grid-template-columns:1fr!important;
  align-items:start!important;
}

/* Login + forgot-password: narrower centered card */
html body.spx-public .auth-login-v127,
html body.spx-public .spx-reset-shell{
  width:min(840px,calc(100vw - 32px))!important;
  max-width:min(840px,calc(100vw - 32px))!important;
}

/* Register: wider to accommodate multi-step fields */
html body.spx-public .auth-register-v127{
  width:min(960px,calc(100vw - 32px))!important;
  max-width:min(960px,calc(100vw - 32px))!important;
}

/* Auth card — clear the transparent ghost set in A8.133 and give it its own glass surface */
html body.spx-public .auth-shell.spx-auth-v127 .auth-card{
  background:rgba(8,18,38,.72)!important;
  border:1px solid rgba(126,231,255,.14)!important;
  border-radius:28px!important;
  box-shadow:0 28px 90px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.055)!important;
  backdrop-filter:blur(22px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(140%)!important;
  padding:clamp(28px,4vw,52px)!important;
  width:100%!important;
  box-sizing:border-box!important;
}

/* Light mode: auth card single block */
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v127 .auth-card,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v127 .auth-card{
  background:rgba(255,255,255,.97)!important;
  border-color:rgba(15,23,42,.12)!important;
  box-shadow:0 28px 80px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.90)!important;
}

/* Register: two-column field layout on desktop for register step 2 only */
@media(min-width:640px){
  html body.spx-public .auth-register-v127 .auth-form.spx-auth-form-v127{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:0 18px!important;
    align-items:start!important;
  }
  html body.spx-public .auth-register-v127 .auth-form.spx-auth-form-v127 .spx-auth-submit-v127,
  html body.spx-public .auth-register-v127 .auth-form.spx-auth-form-v127 .form-status,
  html body.spx-public .auth-register-v127 .auth-form.spx-auth-form-v127 .legal-consent,
  html body.spx-public .auth-register-v127 .auth-form.spx-auth-form-v127 .captcha-box{
    grid-column:1 / -1!important;
  }
}

/* ── Phase 3: Feature pages — per-accent story section border & polish ───────
   The story section border left takes the accent color, differentiating routes.
   The visual layer is now stacked (A8.133 grid), not overlaid — clean and final.
   ========================================================================== */

/* Story section — accent left border per route */
html body.spx-public[data-route^="/features/zip-export"]       .spx-feature-story-v127{border-left:3px solid rgba(34,197,94,.40)!important;}
html body.spx-public[data-route^="/features/website-builder"]  .spx-feature-story-v127{border-left:3px solid rgba(59,130,246,.40)!important;}
html body.spx-public[data-route^="/features/export-first"]     .spx-feature-story-v127{border-left:3px solid rgba(37,210,255,.40)!important;}
html body.spx-public[data-route^="/features/flex-forms"]       .spx-feature-story-v127{border-left:3px solid rgba(129,140,248,.40)!important;}
html body.spx-public[data-route^="/features/files"]            .spx-feature-story-v127{border-left:3px solid rgba(192,132,252,.40)!important;}
html body.spx-public[data-route^="/features/spixor-share"]     .spx-feature-story-v127{border-left:3px solid rgba(45,212,191,.40)!important;}
html body.spx-public[data-route^="/features/wordpress-export"] .spx-feature-story-v127{border-left:3px solid rgba(167,139,250,.40)!important;}
html body.spx-public[data-route^="/features/seo-insights"]     .spx-feature-story-v127{border-left:3px solid rgba(251,191,36,.40)!important;}
html body.spx-public[data-route^="/features/project-dashboard"] .spx-feature-story-v127{border-left:3px solid rgba(59,130,246,.40)!important;}
html body.spx-public[data-route^="/features/dashboard"]        .spx-feature-story-v127{border-left:3px solid rgba(37,210,255,.40)!important;}

/* Feature status badge — live vs planned accent colors */
html body.spx-public .spx-feature-status-badge.is-live{
  color:#22c55e!important;
  border-color:rgba(34,197,94,.28)!important;
  background:rgba(34,197,94,.08)!important;
}
html body.spx-public .spx-feature-status-badge.is-planned{
  color:#f59e0b!important;
  border-color:rgba(245,158,11,.28)!important;
  background:rgba(245,158,11,.07)!important;
}

/* Visual layer radial accent using --feat-c1 (inherit from parent hero) */
html body.spx-public .spx-feature-visual-layer{
  background:radial-gradient(420px 180px at 20% 0%,rgba(var(--feat-c1,37,210,255),.18),transparent 70%),linear-gradient(165deg,rgba(7,14,30,.86),rgba(3,7,16,.64))!important;
}

/* Feature mock — ensure screenshot renders below the visual layer cleanly */
html body.spx-public .spx-feature-mock img{
  border-radius:18px!important;
  opacity:.88!important;
}

/* ── Phase 4: Light mode remaining gaps ──────────────────────────────────────
   Feature story section, export section step cards, alert banners,
   updates page, roadmap page — all clean in light mode.
   ========================================================================== */

/* Feature story section light mode */
html[data-theme="light"] body.spx-public .spx-feature-story-v127,
html[data-spx-theme="light"] body.spx-public .spx-feature-story-v127{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(15,23,42,.10)!important;
  box-shadow:0 14px 48px rgba(15,23,42,.08)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-story-head h2,
html[data-theme="light"] body.spx-public .spx-feature-story-head p,
html[data-spx-theme="light"] body.spx-public .spx-feature-story-head h2,
html[data-spx-theme="light"] body.spx-public .spx-feature-story-head p{
  color:rgba(15,23,42,.72)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-status-v127,
html[data-spx-theme="light"] body.spx-public .spx-feature-status-v127{
  border-color:rgba(15,23,42,.10)!important;
  background:rgba(255,255,255,.80)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-status-v127 p,
html[data-spx-theme="light"] body.spx-public .spx-feature-status-v127 p{
  color:rgba(15,23,42,.64)!important;
}

/* Feature story section accent left borders in light mode stay readable */
html[data-theme="light"] body.spx-public[data-route^="/features/zip-export"]       .spx-feature-story-v127{border-left-color:rgba(34,197,94,.50)!important;}
html[data-theme="light"] body.spx-public[data-route^="/features/website-builder"]  .spx-feature-story-v127{border-left-color:rgba(59,130,246,.50)!important;}
html[data-theme="light"] body.spx-public[data-route^="/features/export-first"]     .spx-feature-story-v127{border-left-color:rgba(37,210,255,.50)!important;}
html[data-theme="light"] body.spx-public[data-route^="/features/flex-forms"]       .spx-feature-story-v127{border-left-color:rgba(129,140,248,.50)!important;}
html[data-theme="light"] body.spx-public[data-route^="/features/files"]            .spx-feature-story-v127{border-left-color:rgba(192,132,252,.50)!important;}
html[data-theme="light"] body.spx-public[data-route^="/features/spixor-share"]     .spx-feature-story-v127{border-left-color:rgba(45,212,191,.50)!important;}
html[data-theme="light"] body.spx-public[data-route^="/features/wordpress-export"] .spx-feature-story-v127{border-left-color:rgba(167,139,250,.50)!important;}
html[data-theme="light"] body.spx-public[data-route^="/features/seo-insights"]     .spx-feature-story-v127{border-left-color:rgba(251,191,36,.50)!important;}

/* Feature card grid light mode */
html[data-theme="light"] body.spx-public .spx-feature-card-grid-v127,
html[data-spx-theme="light"] body.spx-public .spx-feature-card-grid-v127{
  background:transparent!important;
}
html[data-theme="light"] body.spx-public .spx-feature-detail-card,
html[data-spx-theme="light"] body.spx-public .spx-feature-detail-card{
  background:rgba(255,255,255,.90)!important;
  border-color:rgba(15,23,42,.10)!important;
  box-shadow:0 8px 28px rgba(15,23,42,.07)!important;
}

/* Feature visual layer — lighter surface in light mode */
html[data-theme="light"] body.spx-public .spx-feature-visual-layer,
html[data-spx-theme="light"] body.spx-public .spx-feature-visual-layer{
  background:radial-gradient(420px 180px at 20% 0%,rgba(var(--feat-c1,37,210,255),.12),transparent 70%),linear-gradient(165deg,rgba(255,255,255,.94),rgba(240,246,255,.80))!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-visual-head strong,
html[data-spx-theme="light"] body.spx-public .spx-feature-visual-head strong{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-feature-visual-body li,
html[data-spx-theme="light"] body.spx-public .spx-feature-visual-body li{color:rgba(15,23,42,.76)!important;background:rgba(255,255,255,.84)!important;border-color:rgba(15,23,42,.10)!important;}

/* Updates page light mode */
html[data-theme="light"] body.spx-public .spx-updates-grid .spx-update-card,
html[data-spx-theme="light"] body.spx-public .spx-updates-grid .spx-update-card{
  background:#fff!important;
  border-color:rgba(15,23,42,.10)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-update-thumb,
html[data-spx-theme="light"] body.spx-public .spx-update-thumb{
  background:rgba(15,23,42,.06)!important;
}
html[data-theme="light"] body.spx-public .maintenance-card,
html[data-spx-theme="light"] body.spx-public .maintenance-card{
  background:rgba(254,243,199,.82)!important;
  border-color:rgba(217,119,6,.18)!important;
  color:#0f172a!important;
}

/* Roadmap page light mode */
html[data-theme="light"] body.spx-public .spx-roadmap-hero-v62,
html[data-spx-theme="light"] body.spx-public .spx-roadmap-hero-v62{
  background:linear-gradient(180deg,#e8f0fc,#f0f4fa)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-roadmap-hero-v62 h1,
html[data-theme="light"] body.spx-public .spx-roadmap-hero-v62 p,
html[data-spx-theme="light"] body.spx-public .spx-roadmap-hero-v62 h1,
html[data-spx-theme="light"] body.spx-public .spx-roadmap-hero-v62 p{color:rgba(15,23,42,.74)!important;}
html[data-theme="light"] body.spx-public .spx-alpha-theme-list button,
html[data-spx-theme="light"] body.spx-public .spx-alpha-theme-list button{
  background:rgba(255,255,255,.74)!important;
  border-color:rgba(15,23,42,.12)!important;
  color:rgba(15,23,42,.70)!important;
}
html[data-theme="light"] body.spx-public .spx-alpha-theme-list button.is-active,
html[data-spx-theme="light"] body.spx-public .spx-alpha-theme-list button.is-active{
  background:#fff!important;
  border-color:rgba(15,23,42,.28)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public [data-alpha-topic-copy],
html[data-spx-theme="light"] body.spx-public [data-alpha-topic-copy]{color:rgba(15,23,42,.66)!important;}

/* Legal/terms pages light mode */
html[data-theme="light"] body.spx-public .article,
html[data-theme="light"] body.spx-public .spx-legal-content,
html[data-spx-theme="light"] body.spx-public .article,
html[data-spx-theme="light"] body.spx-public .spx-legal-content{
  color:#0f172a!important;
}

/* Alert banners light mode — reinforce for all page types */
html[data-theme="light"] body.spx-public .spx-alert-banner-info strong,
html[data-spx-theme="light"] body.spx-public .spx-alert-banner-info strong{color:#1e3a8a!important;}
html[data-theme="light"] body.spx-public .spx-alert-banner-warning strong,
html[data-spx-theme="light"] body.spx-public .spx-alert-banner-warning strong{color:#78350f!important;}
html[data-theme="light"] body.spx-public .spx-alert-banner-critical strong,
html[data-spx-theme="light"] body.spx-public .spx-alert-banner-critical strong{color:#7f1d1d!important;}
html[data-theme="light"] body.spx-public .spx-alert-banner-success strong,
html[data-spx-theme="light"] body.spx-public .spx-alert-banner-success strong{color:#14532d!important;}

/* ==========================================================================
   A8.135 — Maintenance fix · Auth story removal · Feature polish · Light mode
   ========================================================================== */

/* ── Phase 2: Auth layout — story removed from HTML, shell is now single card ──
   Use flexbox centering so the single auth card sits centered vertically.
   Increase max-widths to use the full viewport space the user wanted.
   ========================================================================== */

html body.spx-public .auth-shell.spx-auth-v127{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  grid-template-columns:unset!important;
  min-height:calc(100dvh - 62px)!important;
  padding:clamp(28px,4vw,64px) clamp(16px,3vw,40px)!important;
  box-sizing:border-box!important;
  gap:0!important;
}
html body.spx-public .auth-login-v127{
  width:min(920px,calc(100vw - 32px))!important;
  max-width:min(920px,calc(100vw - 32px))!important;
}
html body.spx-public .auth-register-v127{
  width:min(1080px,calc(100vw - 32px))!important;
  max-width:min(1080px,calc(100vw - 32px))!important;
}
html body.spx-public .spx-reset-shell{
  width:min(860px,calc(100vw - 32px))!important;
  max-width:min(860px,calc(100vw - 32px))!important;
}
html body.spx-public .auth-shell.spx-auth-v127 .auth-card{
  width:100%!important;
  max-width:100%!important;
  background:rgba(8,18,38,.72)!important;
  border:1px solid rgba(126,231,255,.14)!important;
  border-radius:28px!important;
  box-shadow:0 28px 90px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.055)!important;
  backdrop-filter:blur(22px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(140%)!important;
  padding:clamp(28px,4vw,52px)!important;
  box-sizing:border-box!important;
}

/* Auth inputs — light mode: strong contrast on white surface */
html[data-theme="light"] body.spx-public .spx-auth-field-v127 input,
html[data-theme="light"] body.spx-public .spx-auth-field-v127 select,
html[data-spx-theme="light"] body.spx-public .spx-auth-field-v127 input,
html[data-spx-theme="light"] body.spx-public .spx-auth-field-v127 select{
  background:#fff!important;
  border:1.5px solid rgba(15,23,42,.26)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-auth-field-v127 input:focus,
html[data-theme="light"] body.spx-public .spx-auth-field-v127 select:focus,
html[data-spx-theme="light"] body.spx-public .spx-auth-field-v127 input:focus,
html[data-spx-theme="light"] body.spx-public .spx-auth-field-v127 select:focus{
  border-color:rgba(15,23,42,.52)!important;
  box-shadow:0 0 0 3px rgba(14,165,233,.13)!important;
  outline:none!important;
}
html[data-theme="light"] body.spx-public .spx-auth-field-v127 label,
html[data-spx-theme="light"] body.spx-public .spx-auth-field-v127 label{
  color:rgba(15,23,42,.76)!important;
}
html[data-theme="light"] body.spx-public .spx-auth-field-v127 input::placeholder,
html[data-spx-theme="light"] body.spx-public .spx-auth-field-v127 input::placeholder{
  color:rgba(15,23,42,.36)!important;
}
html[data-theme="light"] body.spx-public .auth-card h1,
html[data-spx-theme="light"] body.spx-public .auth-card h1{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .auth-card .spx-auth-subtitle,
html[data-spx-theme="light"] body.spx-public .auth-card .spx-auth-subtitle{color:rgba(15,23,42,.68)!important;}
html[data-theme="light"] body.spx-public .auth-card .auth-links a,
html[data-spx-theme="light"] body.spx-public .auth-card .auth-links a{color:rgba(15,23,42,.70)!important;}
html[data-theme="light"] body.spx-public .auth-card .spx-auth-meta-link,
html[data-spx-theme="light"] body.spx-public .auth-card .spx-auth-meta-link{color:rgba(15,23,42,.62)!important;}
html[data-theme="light"] body.spx-public .auth-card .spx-auth-hint,
html[data-spx-theme="light"] body.spx-public .auth-card .spx-auth-hint{color:rgba(15,23,42,.54)!important;}

/* ── Phase 3: Feature pages — lively backgrounds, second glow orb ─────────── */

/* Hero: second glow orb on the right side via ::after (separate from the existing ::before) */
html body.spx-public .spx-feature-hero-v127::after{
  content:""!important;position:absolute!important;inset:0!important;
  pointer-events:none!important;z-index:0!important;
  background-image:
    linear-gradient(rgba(126,231,255,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,231,255,.030) 1px, transparent 1px)!important;
  background-size:52px 52px!important;
  mask-image:radial-gradient(ellipse 78% 80% at 50% 50%, black 30%, transparent 100%)!important;
  -webkit-mask-image:radial-gradient(ellipse 78% 80% at 50% 50%, black 30%, transparent 100%)!important;
}

/* Per-accent: replace subtle route gradients with stronger accent-matched orbs */
html body.spx-public .spx-feature-hero-v127[data-feature-accent="green"]::before{
  background:radial-gradient(ellipse 72% 58% at 8% 52%, rgba(34,197,94,.24),transparent 58%),radial-gradient(ellipse 48% 38% at 92% 14%, rgba(16,185,129,.12),transparent 52%)!important;
  animation:spxFeatureBgPulse 20s ease-in-out infinite alternate!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-accent="blue"]::before{
  background:radial-gradient(ellipse 72% 58% at 8% 52%, rgba(59,130,246,.24),transparent 58%),radial-gradient(ellipse 48% 38% at 92% 14%, rgba(99,102,241,.12),transparent 52%)!important;
  animation:spxFeatureBgPulse 20s ease-in-out infinite alternate!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-accent="cyan"]::before{
  background:radial-gradient(ellipse 72% 58% at 8% 52%, rgba(37,210,255,.22),transparent 58%),radial-gradient(ellipse 48% 38% at 92% 14%, rgba(56,189,248,.12),transparent 52%)!important;
  animation:spxFeatureBgPulse 20s ease-in-out infinite alternate!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-accent="indigo"]::before{
  background:radial-gradient(ellipse 72% 58% at 8% 52%, rgba(129,140,248,.24),transparent 58%),radial-gradient(ellipse 48% 38% at 92% 14%, rgba(99,102,241,.12),transparent 52%)!important;
  animation:spxFeatureBgPulse 20s ease-in-out infinite alternate!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-accent="purple"]::before{
  background:radial-gradient(ellipse 72% 58% at 8% 52%, rgba(192,132,252,.24),transparent 58%),radial-gradient(ellipse 48% 38% at 92% 14%, rgba(168,85,247,.12),transparent 52%)!important;
  animation:spxFeatureBgPulse 20s ease-in-out infinite alternate!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-accent="teal"]::before{
  background:radial-gradient(ellipse 72% 58% at 8% 52%, rgba(45,212,191,.22),transparent 58%),radial-gradient(ellipse 48% 38% at 92% 14%, rgba(20,184,166,.12),transparent 52%)!important;
  animation:spxFeatureBgPulse 20s ease-in-out infinite alternate!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-accent="violet"]::before{
  background:radial-gradient(ellipse 72% 58% at 8% 52%, rgba(167,139,250,.24),transparent 58%),radial-gradient(ellipse 48% 38% at 92% 14%, rgba(139,92,246,.12),transparent 52%)!important;
  animation:spxFeatureBgPulse 20s ease-in-out infinite alternate!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-accent="amber"]::before{
  background:radial-gradient(ellipse 72% 58% at 8% 52%, rgba(251,191,36,.20),transparent 58%),radial-gradient(ellipse 48% 38% at 92% 14%, rgba(245,158,11,.10),transparent 52%)!important;
  animation:spxFeatureBgPulse 20s ease-in-out infinite alternate!important;
}

/* How-it-works section: add a section background treatment */
html body.spx-public .spx-feature-how-v129{
  padding:clamp(36px,5vw,64px) clamp(20px,3vw,48px)!important;
  border-radius:28px!important;
  border:1px solid rgba(126,231,255,.08)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))!important;
}
html body.spx-public .spx-feature-how-num{
  color:rgba(var(--feat-c1,37,210,255),.50)!important;
}
html body.spx-public .spx-feature-how-card:hover .spx-feature-how-num{
  color:rgba(var(--feat-c1,37,210,255),.80)!important;
}

/* Visual layer: stronger accent radial using --feat-c1 */
html body.spx-public .spx-feature-visual-layer{
  background:radial-gradient(380px 160px at 15% 5%, rgba(var(--feat-c1,37,210,255),.24), transparent 62%),
             linear-gradient(155deg,rgba(8,18,38,.90),rgba(3,7,16,.72))!important;
}

/* CTA strip: ambient glow at top using accent color */
html body.spx-public .spx-feature-cta-strip-v127{
  background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(var(--feat-c1,37,210,255),.12), transparent 62%),
             linear-gradient(180deg,rgba(8,15,34,.90),rgba(4,8,18,.72))!important;
}

/* How section light mode */
html[data-theme="light"] body.spx-public .spx-feature-how-v129,
html[data-spx-theme="light"] body.spx-public .spx-feature-how-v129{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(240,246,255,.60))!important;
  border-color:rgba(15,23,42,.09)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-how-head h2,
html[data-spx-theme="light"] body.spx-public .spx-feature-how-head h2{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-feature-how-card,
html[data-spx-theme="light"] body.spx-public .spx-feature-how-card{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-how-card h3,
html[data-spx-theme="light"] body.spx-public .spx-feature-how-card h3{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-feature-how-card p,
html[data-spx-theme="light"] body.spx-public .spx-feature-how-card p{color:rgba(15,23,42,.68)!important;}
html[data-theme="light"] body.spx-public .spx-feature-cta-strip-v127,
html[data-spx-theme="light"] body.spx-public .spx-feature-cta-strip-v127{
  background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(var(--feat-c1,37,210,255),.10), transparent 62%),
             linear-gradient(180deg,rgba(235,245,255,.94),rgba(220,238,255,.82))!important;
}
html[data-theme="light"] body.spx-public .spx-feature-cta-strip-v127 h2,
html[data-spx-theme="light"] body.spx-public .spx-feature-cta-strip-v127 h2{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-feature-cta-strip-v127 p,
html[data-spx-theme="light"] body.spx-public .spx-feature-cta-strip-v127 p{color:rgba(15,23,42,.70)!important;}

/* ── Phase 4: Light mode — pricing text contrast ──────────────────────────── */

html[data-theme="light"] body.spx-public .spx-pricing-section h2,
html[data-theme="light"] body.spx-public .spx-pricing-section h3,
html[data-theme="light"] body.spx-public .spx-price-card-v128 strong,
html[data-spx-theme="light"] body.spx-public .spx-pricing-section h2,
html[data-spx-theme="light"] body.spx-public .spx-pricing-section h3,
html[data-spx-theme="light"] body.spx-public .spx-price-card-v128 strong{
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-price-card-v128 li,
html[data-spx-theme="light"] body.spx-public .spx-price-card-v128 li{
  color:rgba(15,23,42,.70)!important;
}
html[data-theme="light"] body.spx-public .spx-plan-status,
html[data-spx-theme="light"] body.spx-public .spx-plan-status{
  color:rgba(15,23,42,.60)!important;
}

/* ── Phase 4: Light mode — alpha feedback section ─────────────────────────── */

html[data-theme="light"] body.spx-public .spx-summary-roadmap,
html[data-spx-theme="light"] body.spx-public .spx-summary-roadmap{
  background:radial-gradient(620px 320px at 22% 0%, rgba(14,165,233,.11), transparent 64%),
             linear-gradient(180deg,rgba(240,248,255,.94),rgba(225,240,255,.82))!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public #roadmap .spx-alpha-story-copy h2,
html[data-spx-theme="light"] body.spx-public #roadmap .spx-alpha-story-copy h2{color:#0f172a!important;}
html[data-theme="light"] body.spx-public #roadmap .spx-alpha-story-copy p,
html[data-spx-theme="light"] body.spx-public #roadmap .spx-alpha-story-copy p{color:rgba(15,23,42,.68)!important;}
html[data-theme="light"] body.spx-public .spx-alpha-narrative-v128 span,
html[data-spx-theme="light"] body.spx-public .spx-alpha-narrative-v128 span{
  background:rgba(255,255,255,.80)!important;
  border-color:rgba(15,23,42,.11)!important;
}
html[data-theme="light"] body.spx-public .spx-alpha-narrative-v128 b,
html[data-spx-theme="light"] body.spx-public .spx-alpha-narrative-v128 b{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-alpha-narrative-v128 small,
html[data-spx-theme="light"] body.spx-public .spx-alpha-narrative-v128 small{color:rgba(15,23,42,.64)!important;}
html[data-theme="light"] body.spx-public #roadmap .spx-alpha-feedback-panel,
html[data-spx-theme="light"] body.spx-public #roadmap .spx-alpha-feedback-panel{
  background:rgba(255,255,255,.82)!important;
  border-color:rgba(15,23,42,.11)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-alpha-panel-kicker,
html[data-spx-theme="light"] body.spx-public .spx-alpha-panel-kicker{color:rgba(15,23,42,.58)!important;}
html[data-theme="light"] body.spx-public .spx-alpha-feedback-panel h3,
html[data-spx-theme="light"] body.spx-public .spx-alpha-feedback-panel h3{color:#0f172a!important;}

/* A8.136 - maintenance/auth/features/lightmode root fixes */
html body.spx-public .spx-alert-banner-v130{
  position:relative!important;
  z-index:8!important;
  width:min(1180px,calc(100% - 32px))!important;
  margin:88px auto 14px!important;
  border-radius:18px!important;
  box-shadow:0 18px 48px rgba(0,0,0,.22)!important;
}
html body.spx-auth-page-v130 .spx-alert-banner-v130{margin-top:18px!important;}
html body.spx-public .spx-alert-banner-v130 + .spx-alert-banner-v130{margin-top:10px!important;}

html body.spx-public .auth-shell.spx-auth-v136{
  width:min(100% - 36px,980px)!important;
  min-height:calc(100svh - 92px)!important;
  margin:0 auto!important;
  padding:clamp(28px,5vw,58px) 0!important;
  display:grid!important;
  place-items:center!important;
  grid-template-columns:1fr!important;
}
html body.spx-public .auth-register-v127.spx-auth-v136{width:min(100% - 36px,1120px)!important;}
html body.spx-public .auth-shell.spx-auth-v136.auth-register-v127.is-form-focus{
  grid-template-columns:1fr!important;
  width:min(100% - 36px,1120px)!important;
  max-width:min(100% - 36px,1120px)!important;
  place-items:center!important;
}
html body.spx-public .auth-shell.spx-auth-v136.auth-register-v127.is-form-focus .auth-card{
  grid-column:1!important;
  grid-row:1!important;
  width:100%!important;
}
html body.spx-public .auth-shell.spx-auth-v136 .auth-card{
  width:100%!important;
  max-width:none!important;
  border-radius:34px!important;
  padding:clamp(28px,4vw,52px)!important;
  background:
    radial-gradient(circle at 14% 0%,rgba(126,231,255,.16),transparent 34%),
    radial-gradient(circle at 86% 10%,rgba(255,154,91,.13),transparent 30%),
    linear-gradient(180deg,rgba(10,18,34,.90),rgba(7,12,24,.78))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 34px 110px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08)!important;
  overflow:visible!important;
}
html body.spx-public .auth-shell.spx-auth-v136 .auth-story{display:none!important;}
html body.spx-public .spx-auth-kicker-v136{
  display:inline-flex!important;
  width:max-content!important;
  margin:14px 0 4px!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  border:1px solid rgba(126,231,255,.20)!important;
  background:rgba(126,231,255,.08)!important;
  color:#9eeeff!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
html body.spx-public .auth-shell.spx-auth-v136 .auth-card h1{
  max-width:900px!important;
  font-size:clamp(38px,6vw,72px)!important;
  line-height:.94!important;
  letter-spacing:-.065em!important;
}
html body.spx-public .auth-shell.spx-auth-v136 .spx-auth-subtitle{
  max-width:760px!important;
  font-size:clamp(16px,1.5vw,19px)!important;
  line-height:1.65!important;
}
html body.spx-public .auth-shell.spx-auth-v136 .auth-form{
  margin-top:24px!important;
  gap:16px!important;
}
html body.spx-public .auth-login-v127.spx-auth-v136 .auth-form{
  max-width:760px!important;
}
html body.spx-public .auth-register-v127.spx-auth-v136 .auth-form{
  max-width:100%!important;
}
html body.spx-public .auth-register-v127.spx-auth-v136 .spx-auth-field-row-v127{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
}
html body.spx-public .auth-shell.spx-auth-v136 .spx-auth-field-v127 label,
html body.spx-public .auth-shell.spx-auth-v136 .auth-form label{
  gap:8px!important;
  color:#eef7ff!important;
  font-size:13px!important;
  font-weight:900!important;
}
html body.spx-public .auth-shell.spx-auth-v136 .spx-auth-field-v127 input:not([type="checkbox"]):not([type="radio"]),
html body.spx-public .auth-shell.spx-auth-v136 .spx-auth-field-v127 select,
html body.spx-public .auth-shell.spx-auth-v136 .spx-auth-field-v127 textarea,
html body.spx-public .auth-shell.spx-auth-v136 .auth-form input:not([type="checkbox"]):not([type="radio"]),
html body.spx-public .auth-shell.spx-auth-v136 .auth-form select,
html body.spx-public .auth-shell.spx-auth-v136 .auth-form textarea{
  min-height:54px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(218,236,255,.16)!important;
  color:#fff!important;
  font-size:15px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
html body.spx-public .auth-shell.spx-auth-v136 .spx-auth-submit-v127{
  min-height:56px!important;
  border-radius:18px!important;
  font-size:15px!important;
}
html body.spx-public .spx-auth-alt-v136{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  flex-wrap:wrap!important;
  margin:18px 0 4px!important;
  padding:14px!important;
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.045)!important;
}
html body.spx-public .spx-auth-alt-v136 .google-btn{margin:0!important;min-width:230px!important;}
html body.spx-public .spx-auth-alt-v136 a{color:#dff8ff!important;text-decoration:none!important;font-weight:850!important;}
html body.spx-public .auth-shell.spx-auth-v136 .legal-consent{
  background:rgba(126,231,255,.07)!important;
  border-color:rgba(126,231,255,.18)!important;
}
html body.spx-public .auth-shell.spx-auth-v136 .maintenance-lock{
  border-radius:22px!important;
  border-color:rgba(255,188,104,.28)!important;
  background:rgba(255,165,91,.10)!important;
}

html body.spx-public .spx-feature-hero-v127{
  grid-template-columns:minmax(0,.82fr) minmax(560px,1.18fr)!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(126,231,255,.12),transparent 34%),
    radial-gradient(circle at 92% 8%,rgba(255,154,91,.12),transparent 32%),
    linear-gradient(180deg,rgba(8,13,25,.72),rgba(6,10,20,.38))!important;
}
html body.spx-public .spx-feature-hero-v127::after{opacity:.28!important;mix-blend-mode:normal!important;pointer-events:none!important;}
html body.spx-public .spx-feature-hero-visual{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  width:100%!important;
  min-width:0!important;
  min-height:360px!important;
  aspect-ratio:auto!important;
}
html body.spx-public .spx-feature-hero-visual::before,
html body.spx-public .spx-feature-hero-visual::after{display:none!important;}
html body.spx-public .spx-feature-visual-board-v136{
  width:100%!important;
  min-height:360px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.1fr) minmax(230px,.72fr)!important;
  gap:16px!important;
  align-items:stretch!important;
}
html body.spx-public .spx-feature-image-shell-v136{
  min-height:320px!important;
  border-radius:28px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:0 26px 80px rgba(0,0,0,.30)!important;
}
html body.spx-public .spx-feature-image-shell-v136 img{
  width:100%!important;
  height:100%!important;
  min-height:320px!important;
  display:block!important;
  object-fit:cover!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}
html body.spx-public .spx-feature-visual-layer{
  position:relative!important;
  inset:auto!important;
  min-height:320px!important;
  border-radius:28px!important;
  padding:20px!important;
  display:grid!important;
  align-content:space-between!important;
  border:1px solid rgba(126,231,255,.16)!important;
  background:linear-gradient(145deg,rgba(9,19,36,.90),rgba(8,13,26,.70))!important;
  box-shadow:0 22px 62px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07)!important;
  pointer-events:none!important;
}
html body.spx-public .spx-feature-visual-body ul{display:grid!important;gap:8px!important;margin:0!important;padding:0!important;list-style:none!important;}
html body.spx-public .spx-feature-visual-body li{
  padding:10px 12px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.045)!important;
  color:#eaf7ff!important;
  font-size:13px!important;
  font-weight:850!important;
}
html body.spx-public .spx-feature-visual-chips{display:flex!important;gap:8px!important;flex-wrap:wrap!important;margin-top:14px!important;}
html body.spx-public .spx-feature-visual-chips span{
  padding:7px 9px!important;
  border-radius:999px!important;
  border:1px solid rgba(126,231,255,.18)!important;
  color:#aef2ff!important;
  background:rgba(126,231,255,.08)!important;
  font-size:11px!important;
  font-weight:950!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-kind="zip"] .spx-feature-visual-layer{border-style:dashed!important;background:linear-gradient(145deg,rgba(8,36,24,.92),rgba(8,14,22,.72))!important;}
html body.spx-public .spx-feature-hero-v127[data-feature-kind="files"] .spx-feature-visual-layer{background:linear-gradient(145deg,rgba(15,42,46,.92),rgba(8,14,24,.72))!important;}
html body.spx-public .spx-feature-hero-v127[data-feature-kind="seo"] .spx-feature-visual-layer{background:linear-gradient(145deg,rgba(54,40,12,.92),rgba(9,13,22,.72))!important;}
html body.spx-public .spx-feature-hero-v127[data-feature-kind="builder"] .spx-feature-visual-layer{background:linear-gradient(145deg,rgba(10,31,62,.92),rgba(8,13,24,.72))!important;}
html body.spx-public .spx-feature-hero-v127[data-feature-kind="wordpress"] .spx-feature-visual-layer{background:linear-gradient(145deg,rgba(35,26,76,.92),rgba(8,12,24,.72))!important;}
html body.spx-public .spx-feature-proof-v129[data-feature-page],
html body.spx-public .spx-feature-story-v127[data-feature-page],
html body.spx-public .spx-feature-how-v129[data-feature-page],
html body.spx-public .spx-feature-card-grid-v127[data-feature-page],
html body.spx-public .spx-feature-cta-strip-v127[data-feature-page],
html body.spx-public .spx-feature-faq-v127{
  width:min(1180px,calc(100% - 32px))!important;
  margin-inline:auto!important;
}
html body.spx-public .spx-feature-card-grid-v127 .spx-feature-detail-card,
html body.spx-public .spx-feature-status-v127,
html body.spx-public .spx-feature-faq-v127 .faq-item{
  border:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
  border-radius:24px!important;
  box-shadow:0 18px 54px rgba(0,0,0,.18)!important;
}
html body.spx-public .spx-feature-card-grid-v127 .spx-feature-detail-card{
  padding:22px!important;
}
html body.spx-public .spx-feature-card-grid-v127 .spx-feature-detail-card h3{color:#f5fbff!important;}
html body.spx-public .spx-feature-card-grid-v127 .spx-feature-detail-card p{color:rgba(218,236,255,.72)!important;}

html[data-theme="light"] body.spx-public,
html[data-spx-theme="light"] body.spx-public{--spx-light-ink:#0f172a;--spx-light-muted:rgba(15,23,42,.68);}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v136 .auth-card,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v136 .auth-card{
  background:radial-gradient(circle at 12% 0%,rgba(14,165,233,.12),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,249,255,.90))!important;
  border-color:rgba(15,23,42,.12)!important;
  box-shadow:0 28px 80px rgba(15,23,42,.14)!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v136 .spx-auth-field-v127 label,
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v136 .auth-form label,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v136 .spx-auth-field-v127 label,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v136 .auth-form label{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v136 .spx-auth-field-v127 input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v136 .spx-auth-field-v127 select,
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v136 .auth-form input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v136 .auth-form select,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v136 .spx-auth-field-v127 input:not([type="checkbox"]):not([type="radio"]),
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v136 .spx-auth-field-v127 select,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v136 .auth-form input:not([type="checkbox"]):not([type="radio"]),
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v136 .auth-form select{
  background:#fff!important;
  border-color:rgba(15,23,42,.15)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-auth-alt-v136,
html[data-spx-theme="light"] body.spx-public .spx-auth-alt-v136{
  background:rgba(15,23,42,.035)!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .spx-auth-alt-v136 a,
html[data-spx-theme="light"] body.spx-public .spx-auth-alt-v136 a{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-feature-hero-v127,
html[data-spx-theme="light"] body.spx-public .spx-feature-hero-v127{
  background:radial-gradient(circle at 8% 0%,rgba(14,165,233,.12),transparent 34%),radial-gradient(circle at 92% 8%,rgba(249,115,22,.09),transparent 32%),linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,248,255,.72))!important;
}
html[data-theme="light"] body.spx-public .spx-feature-image-shell-v136,
html[data-spx-theme="light"] body.spx-public .spx-feature-image-shell-v136,
html[data-theme="light"] body.spx-public .spx-feature-visual-layer,
html[data-spx-theme="light"] body.spx-public .spx-feature-visual-layer{
  background:rgba(255,255,255,.86)!important;
  border-color:rgba(15,23,42,.12)!important;
  box-shadow:0 22px 64px rgba(15,23,42,.12)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-visual-head strong,
html[data-theme="light"] body.spx-public .spx-feature-visual-body li,
html[data-spx-theme="light"] body.spx-public .spx-feature-visual-head strong,
html[data-spx-theme="light"] body.spx-public .spx-feature-visual-body li{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-feature-visual-body li,
html[data-spx-theme="light"] body.spx-public .spx-feature-visual-body li{background:rgba(15,23,42,.04)!important;border-color:rgba(15,23,42,.10)!important;}
html[data-theme="light"] body.spx-public .spx-feature-card-grid-v127 .spx-feature-detail-card,
html[data-theme="light"] body.spx-public .spx-feature-status-v127,
html[data-theme="light"] body.spx-public .spx-feature-faq-v127 .faq-item,
html[data-spx-theme="light"] body.spx-public .spx-feature-card-grid-v127 .spx-feature-detail-card,
html[data-spx-theme="light"] body.spx-public .spx-feature-status-v127,
html[data-spx-theme="light"] body.spx-public .spx-feature-faq-v127 .faq-item{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(15,23,42,.10)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-feature-card-grid-v127 .spx-feature-detail-card h3,
html[data-spx-theme="light"] body.spx-public .spx-feature-card-grid-v127 .spx-feature-detail-card h3{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-feature-card-grid-v127 .spx-feature-detail-card p,
html[data-spx-theme="light"] body.spx-public .spx-feature-card-grid-v127 .spx-feature-detail-card p{color:rgba(15,23,42,.68)!important;}
html[data-theme="light"] body.spx-public #export .spx-export-sub,
html[data-theme="light"] body.spx-public #export p,
html[data-spx-theme="light"] body.spx-public #export .spx-export-sub,
html[data-spx-theme="light"] body.spx-public #export p,
html[data-theme="light"] body.spx-public #pricing .spx-pricing-sub,
html[data-theme="light"] body.spx-public #pricing p,
html[data-spx-theme="light"] body.spx-public #pricing .spx-pricing-sub,
html[data-spx-theme="light"] body.spx-public #pricing p{color:rgba(15,23,42,.70)!important;}
html[data-theme="light"] body.spx-public #export .spx-export-card,
html[data-spx-theme="light"] body.spx-public #export .spx-export-card,
html[data-theme="light"] body.spx-public #pricing .spx-price-card,
html[data-spx-theme="light"] body.spx-public #pricing .spx-price-card{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(15,23,42,.11)!important;
}
html[data-theme="light"] body.spx-public .spx-alert-banner-v130,
html[data-spx-theme="light"] body.spx-public .spx-alert-banner-v130{
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(15,23,42,.13)!important;
  color:#0f172a!important;
  box-shadow:0 18px 48px rgba(15,23,42,.14)!important;
}
html[data-theme="light"] body.spx-public .spx-alert-banner-v130 span,
html[data-spx-theme="light"] body.spx-public .spx-alert-banner-v130 span{color:rgba(15,23,42,.70)!important;}

@media (max-width:900px){
  html body.spx-public .auth-register-v127.spx-auth-v136 .spx-auth-field-row-v127,
  html body.spx-public .spx-feature-visual-board-v136{grid-template-columns:1fr!important;}
  html body.spx-public .spx-feature-image-shell-v136,
  html body.spx-public .spx-feature-image-shell-v136 img,
  html body.spx-public .spx-feature-visual-layer{min-height:230px!important;}
}
@media (max-width:560px){
  html body.spx-public .auth-shell.spx-auth-v136{width:min(100% - 24px,1120px)!important;padding:18px 0 34px!important;}
  html body.spx-public .auth-shell.spx-auth-v136 .auth-card{padding:22px 16px!important;border-radius:24px!important;}
  html body.spx-public .spx-auth-alt-v136{align-items:stretch!important;}
  html body.spx-public .spx-auth-alt-v136 .google-btn,
  html body.spx-public .spx-auth-alt-v136 a{width:100%!important;justify-content:center!important;text-align:center!important;}
  html body.spx-public .spx-alert-banner-v130{width:min(100% - 20px,1180px)!important;margin-top:76px!important;border-radius:15px!important;}
}

/* ==========================================================================
   A8.137 — Phase 1 · Auth rework
   Single-card centred layout · dark + light mode inputs · login 920px · register 1060px
   ========================================================================== */

/* ── 1. Kill the v127 2-col grid, centre the card ─────────────────────── */
html body.spx-public .auth-shell.spx-auth-v127.spx-auth-v137{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  grid-template-columns:none!important;
  padding:clamp(24px,5vh,64px) clamp(16px,3vw,40px)!important;
}
html body.spx-public .auth-shell.spx-auth-v137 .auth-card{
  order:unset!important;
  width:100%!important;
  max-width:920px!important;
  box-sizing:border-box!important;
  background:linear-gradient(165deg,rgba(8,14,28,.92),rgba(5,10,22,.90))!important;
  border:1px solid rgba(126,231,255,.19)!important;
  border-radius:28px!important;
  padding:clamp(28px,4vw,52px)!important;
  box-shadow:0 32px 100px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(24px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(150%)!important;
}
html body.spx-public .auth-shell.spx-auth-v137.auth-register-v127 .auth-card{
  max-width:1060px!important;
}
html body.spx-public .auth-shell.spx-auth-v137.spx-reset-shell .auth-card{
  max-width:560px!important;
}
html body.spx-public .auth-shell.spx-auth-v137 .auth-card h1{
  font-size:clamp(28px,3.5vw,44px)!important;
  margin:8px 0 8px!important;
}

/* ── 2. Input improvements ───────────────────────────────────────────── */
html body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 input:not([type="checkbox"]):not([type="radio"]),
html body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 select,
html body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 textarea{
  min-height:50px!important;
  border-radius:14px!important;
  border:1px solid rgba(218,236,255,.18)!important;
  background:rgba(255,255,255,.07)!important;
  color:#f0f4ff!important;
  font-size:15px!important;
  padding:13px 16px!important;
}
html body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 input:hover:not([type="checkbox"]):not([type="radio"]){
  border-color:rgba(218,236,255,.30)!important;
  background:rgba(255,255,255,.09)!important;
}
html body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 input:focus:not([type="checkbox"]):not([type="radio"]),
html body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 select:focus{
  border-color:rgba(126,231,255,.55)!important;
  box-shadow:0 0 0 4px rgba(126,231,255,.12)!important;
  background:rgba(255,255,255,.09)!important;
}

/* ── 3. Register 2-col field grid ─────────────────────────────────────── */
@media(min-width:640px){
  html body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-row-v127{
    grid-template-columns:1fr 1fr!important;
    gap:14px!important;
  }
}
@media(max-width:639px){
  html body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-row-v127{
    grid-template-columns:1fr!important;
  }
}

/* ── 4. Submit button ─────────────────────────────────────────────────── */
html body.spx-public .auth-shell.spx-auth-v137 .spx-auth-submit-v127{
  min-height:52px!important;
  border-radius:14px!important;
  font-size:15px!important;
}

/* ── 5. Full-width Google button after divider (login) ──────────────── */
html body.spx-public .auth-shell.spx-auth-v137 .spx-auth-divider ~ .spx-google-btn-v127{
  width:100%!important;
}

/* ── 6. Light mode ───────────────────────────────────────────────────── */
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v127.spx-auth-v137,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v127.spx-auth-v137{
  background:radial-gradient(ellipse at 20% 0%,rgba(37,210,255,.08),transparent 44%),radial-gradient(ellipse at 85% 95%,rgba(82,119,255,.07),transparent 44%),linear-gradient(180deg,#eef4ff,#e4ecfb)!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .auth-card,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .auth-card{
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(15,23,42,.12)!important;
  box-shadow:0 28px 90px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.90)!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .auth-card h1,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .auth-card h1{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-brand-v127 span,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-brand-v127 span{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-subtitle,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-subtitle{color:rgba(15,23,42,.60)!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-kicker-v136,
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .eyebrow,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-kicker-v136,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .eyebrow{color:rgba(15,23,42,.52)!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 label,
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 > label,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 label,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 > label{color:rgba(15,23,42,.62)!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 select,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 input:not([type="checkbox"]):not([type="radio"]),
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 select{
  border-color:rgba(15,23,42,.17)!important;
  background:rgba(255,255,255,.80)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 input:hover:not([type="checkbox"]):not([type="radio"]),
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 input:hover:not([type="checkbox"]):not([type="radio"]){
  border-color:rgba(15,23,42,.30)!important;
  background:rgba(255,255,255,.94)!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 input:focus:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 select:focus,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 input:focus:not([type="checkbox"]):not([type="radio"]),
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 select:focus{
  border-color:rgba(37,99,235,.55)!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10)!important;
  background:#fff!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-divider,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-divider{color:rgba(15,23,42,.40)!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-divider::before,
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-divider::after,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-divider::before,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-divider::after{background:rgba(15,23,42,.14)!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-google-btn-v127,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-google-btn-v127{
  border-color:rgba(15,23,42,.18)!important;
  background:rgba(255,255,255,.80)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-google-btn-v127:hover,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-google-btn-v127:hover{
  background:#fff!important;
  border-color:rgba(15,23,42,.34)!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-links-v127,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-links-v127{color:rgba(15,23,42,.60)!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-links-v127 a,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-links-v127 a{color:rgba(15,23,42,.76)!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-links-v127 a strong,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-links-v127 a strong{color:#1d4ed8!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-meta-link,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-meta-link{color:rgba(37,99,235,.90)!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-2fa-v127,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-2fa-v127{
  background:rgba(37,99,235,.05)!important;
  border-color:rgba(37,99,235,.20)!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-2fa-header strong,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-2fa-header strong{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-2fa-header p,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-2fa-header p{color:rgba(15,23,42,.64)!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-legal-v127,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-legal-v127{
  background:rgba(15,23,42,.03)!important;
  border-color:rgba(15,23,42,.12)!important;
  color:rgba(15,23,42,.72)!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-legal-v127 a,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-legal-v127 a{color:#1d4ed8!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-captcha-v127,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-captcha-v127{
  background:rgba(15,23,42,.03)!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-text-btn,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-text-btn{color:rgba(37,99,235,.84)!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-hint,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-hint{color:rgba(15,23,42,.54)!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-steps-v127 span,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-steps-v127 span{
  border-color:rgba(15,23,42,.18)!important;
  background:rgba(15,23,42,.04)!important;
  color:rgba(15,23,42,.52)!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-steps-v127 span.is-active,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-steps-v127 span.is-active{
  background:rgba(37,99,235,.10)!important;
  border-color:rgba(37,99,235,.36)!important;
  color:#1d4ed8!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-alt-v136,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-alt-v136{
  background:rgba(15,23,42,.04)!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-alt-v136 a,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-alt-v136 a{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-alt-v136 a strong,
html[data-spx-theme="light"] body.spx-public .auth-shell.spx-auth-v137 .spx-auth-alt-v136 a strong{color:#1d4ed8!important;}

/* ── 7. Mobile ────────────────────────────────────────────────────────── */
@media(max-width:600px){
  html body.spx-public .auth-shell.spx-auth-v127.spx-auth-v137{
    padding:16px 12px!important;
    justify-content:flex-start!important;
  }
  html body.spx-public .auth-shell.spx-auth-v137 .auth-card{
    border-radius:22px!important;
    padding:22px 18px!important;
  }
  html body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-row-v127{
    grid-template-columns:1fr!important;
  }
}

/* ==========================================================================
   A8.137 — Phase 2 · Feature page rework
   Accent-coloured step numbers · lively hero bgs per kind · stronger section hierarchy
   ========================================================================== */

/* ── 1. How-it-works step numbers — accent colour via CSS var ────────── */
html body.spx-public .spx-feature-v137 .spx-feature-how-num{
  color:rgb(var(--feat-c1,37,210,255))!important;
  text-shadow:0 0 22px rgba(var(--feat-c1,37,210,255),.24)!important;
  border-color:rgba(var(--feat-c1,37,210,255),.22)!important;
}

/* ── 2. How-it-works cards — accent hover/active border ──────────────── */
html body.spx-public .spx-feature-v137 .spx-feature-how-card{
  transition:border-color .2s ease,box-shadow .2s ease!important;
}
html body.spx-public .spx-feature-v137 .spx-feature-how-card:hover{
  border-color:rgba(var(--feat-c1,37,210,255),.28)!important;
  box-shadow:0 18px 54px rgba(0,0,0,.24),0 0 0 1px rgba(var(--feat-c1,37,210,255),.12)!important;
}

/* ── 3. Story section — accent left border + subtle tint ──────────────── */
html body.spx-public .spx-feature-story-v127.spx-feature-v137{
  position:relative!important;
}
html body.spx-public .spx-feature-story-v127.spx-feature-v137::before{
  content:""!important;
  position:absolute!important;
  left:0!important;top:0!important;bottom:0!important;
  width:3px!important;
  background:linear-gradient(180deg,rgb(var(--feat-c1,37,210,255)),transparent 80%)!important;
  border-radius:0 0 0 0!important;
  opacity:.60!important;
  pointer-events:none!important;
}

/* ── 4. Proof stats bar — accent-tinted stat numbers ────────────────── */
html body.spx-public .spx-feature-proof-v129.spx-feature-v137 .spx-feature-proof-item b{
  color:rgb(var(--feat-c1,37,210,255))!important;
}
html body.spx-public .spx-feature-proof-v129.spx-feature-v137{
  background:linear-gradient(180deg,rgba(var(--feat-c1,37,210,255),.055),transparent)!important;
  border-top:1px solid rgba(var(--feat-c1,37,210,255),.14)!important;
  border-bottom:1px solid rgba(var(--feat-c1,37,210,255),.10)!important;
}

/* ── 5. CTA strip — strong per-accent gradient background ─────────────── */
html body.spx-public .spx-feature-cta-strip-v127.spx-feature-v137{
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,rgba(var(--feat-c1,37,210,255),.12),transparent 70%),
    radial-gradient(ellipse 40% 40% at 10% 20%,rgba(var(--feat-c2,82,119,255),.09),transparent 55%),
    linear-gradient(180deg,rgba(8,13,24,.98),rgba(6,10,18,.96))!important;
  border-top:1px solid rgba(var(--feat-c1,37,210,255),.16)!important;
  border-bottom:1px solid rgba(var(--feat-c1,37,210,255),.08)!important;
}

/* ── 6. Eyebrow accent colour on feature sections ────────────────────── */
html body.spx-public .spx-feature-v137 .eyebrow.spx-feature-eyebrow-green{color:rgb(34,197,94)!important;}
html body.spx-public .spx-feature-v137 .eyebrow.spx-feature-eyebrow-blue{color:rgb(99,102,241)!important;}
html body.spx-public .spx-feature-v137 .eyebrow.spx-feature-eyebrow-cyan{color:rgb(37,210,255)!important;}
html body.spx-public .spx-feature-v137 .eyebrow.spx-feature-eyebrow-indigo{color:rgb(129,140,248)!important;}
html body.spx-public .spx-feature-v137 .eyebrow.spx-feature-eyebrow-purple{color:rgb(192,132,252)!important;}
html body.spx-public .spx-feature-v137 .eyebrow.spx-feature-eyebrow-teal{color:rgb(45,212,191)!important;}
html body.spx-public .spx-feature-v137 .eyebrow.spx-feature-eyebrow-violet{color:rgb(167,139,250)!important;}
html body.spx-public .spx-feature-v137 .eyebrow.spx-feature-eyebrow-amber{color:rgb(251,191,36)!important;}

/* ── 7. Per-feature-kind hero backgrounds (more distinctive) ─────────── */
html body.spx-public .spx-feature-hero-v127[data-feature-kind="builder"]{
  background:
    radial-gradient(ellipse 80% 60% at -5% 50%,rgba(37,99,235,.24),transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 5%,rgba(37,210,255,.16),transparent 55%),
    radial-gradient(ellipse 40% 40% at 60% 90%,rgba(82,119,255,.10),transparent 55%),
    linear-gradient(168deg,rgba(5,10,22,.96),rgba(8,14,30,.82))!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-kind="export"]{
  background:
    radial-gradient(ellipse 80% 60% at -5% 50%,rgba(34,197,94,.20),transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 5%,rgba(16,185,129,.14),transparent 55%),
    radial-gradient(ellipse 40% 40% at 60% 90%,rgba(37,210,255,.08),transparent 55%),
    linear-gradient(168deg,rgba(5,14,12,.96),rgba(6,12,20,.82))!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-kind="wordpress"]{
  background:
    radial-gradient(ellipse 80% 60% at -5% 50%,rgba(129,140,248,.22),transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 5%,rgba(192,132,252,.16),transparent 55%),
    radial-gradient(ellipse 40% 40% at 60% 90%,rgba(99,102,241,.10),transparent 55%),
    linear-gradient(168deg,rgba(8,8,22,.96),rgba(10,8,26,.82))!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-kind="forms"]{
  background:
    radial-gradient(ellipse 80% 60% at -5% 50%,rgba(45,212,191,.20),transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 5%,rgba(20,184,166,.14),transparent 55%),
    radial-gradient(ellipse 40% 40% at 60% 90%,rgba(37,210,255,.08),transparent 55%),
    linear-gradient(168deg,rgba(4,14,14,.96),rgba(6,12,20,.82))!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-kind="files"]{
  background:
    radial-gradient(ellipse 80% 60% at -5% 50%,rgba(251,191,36,.18),transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 5%,rgba(245,158,11,.12),transparent 55%),
    radial-gradient(ellipse 40% 40% at 60% 90%,rgba(251,146,60,.08),transparent 55%),
    linear-gradient(168deg,rgba(14,10,4,.96),rgba(12,10,6,.82))!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-kind="share"]{
  background:
    radial-gradient(ellipse 80% 60% at -5% 50%,rgba(37,210,255,.20),transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 5%,rgba(56,189,248,.14),transparent 55%),
    radial-gradient(ellipse 40% 40% at 60% 90%,rgba(59,130,246,.10),transparent 55%),
    linear-gradient(168deg,rgba(4,10,22,.96),rgba(6,10,20,.82))!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-kind="zip"]{
  background:
    radial-gradient(ellipse 80% 60% at -5% 50%,rgba(34,197,94,.20),transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 5%,rgba(37,210,255,.12),transparent 55%),
    radial-gradient(ellipse 40% 40% at 60% 90%,rgba(16,185,129,.08),transparent 55%),
    linear-gradient(168deg,rgba(4,14,10,.96),rgba(6,12,18,.82))!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-kind="dashboard"]{
  background:
    radial-gradient(ellipse 80% 60% at -5% 50%,rgba(167,139,250,.22),transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 5%,rgba(192,132,252,.14),transparent 55%),
    radial-gradient(ellipse 40% 40% at 60% 90%,rgba(129,140,248,.10),transparent 55%),
    linear-gradient(168deg,rgba(8,6,22,.96),rgba(10,8,24,.82))!important;
}
html body.spx-public .spx-feature-hero-v127[data-feature-kind="seo"]{
  background:
    radial-gradient(ellipse 80% 60% at -5% 50%,rgba(251,191,36,.20),transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 5%,rgba(245,158,11,.14),transparent 55%),
    radial-gradient(ellipse 40% 40% at 60% 90%,rgba(234,179,8,.08),transparent 55%),
    linear-gradient(168deg,rgba(14,11,4,.96),rgba(12,10,5,.82))!important;
}

/* ── 8. Light mode — feature v137 ────────────────────────────────────── */
html[data-theme="light"] body.spx-public .spx-feature-story-v127.spx-feature-v137::before,
html[data-spx-theme="light"] body.spx-public .spx-feature-story-v127.spx-feature-v137::before{
  opacity:.40!important;
}
html[data-theme="light"] body.spx-public .spx-feature-proof-v129.spx-feature-v137,
html[data-spx-theme="light"] body.spx-public .spx-feature-proof-v129.spx-feature-v137{
  background:linear-gradient(180deg,rgba(var(--feat-c1,37,210,255),.06),transparent)!important;
}
html[data-theme="light"] body.spx-public .spx-feature-cta-strip-v127.spx-feature-v137,
html[data-spx-theme="light"] body.spx-public .spx-feature-cta-strip-v127.spx-feature-v137{
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,rgba(var(--feat-c1,37,99,235),.08),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,248,255,.90))!important;
  border-color:rgba(var(--feat-c1,37,99,235),.14)!important;
}

/* ── 9. Mobile ────────────────────────────────────────────────────────── */
@media(max-width:768px){
  html body.spx-public .spx-feature-story-v127.spx-feature-v137::before{
    display:none!important;
  }
}

/* ==========================================================================
   A8.137c — Auth compact · No-scroll login on desktop
   Reduces shell padding, card padding, h1 size, input height, spacing.
   ========================================================================== */

html body.spx-public .auth-shell.spx-auth-v127.spx-auth-v137{
  padding:clamp(8px,2vh,24px) clamp(16px,3vw,40px)!important;
}
html body.spx-public .auth-shell.spx-auth-v137 .auth-card{
  padding:clamp(18px,2.5vw,32px)!important;
}
html body.spx-public .auth-shell.spx-auth-v137 .auth-card h1{
  font-size:clamp(20px,2.2vw,28px)!important;
  margin:4px 0 4px!important;
}
html body.spx-public .spx-auth-brand-v127{
  margin-bottom:10px!important;
}
html body.spx-public .spx-auth-kicker-v136{
  margin:6px 0 2px!important;
}
html body.spx-public .spx-auth-subtitle{
  margin:0 0 12px!important;
}
html body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 input:not([type="checkbox"]):not([type="radio"]),
html body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 select,
html body.spx-public .auth-shell.spx-auth-v137 .spx-auth-field-v127 textarea{
  min-height:44px!important;
  padding:10px 14px!important;
}
html body.spx-public .auth-shell.spx-auth-v137 .spx-auth-submit-v127{
  min-height:46px!important;
}
html body.spx-public .spx-auth-form-v127{
  gap:10px!important;
}

/* ==========================================================================
   A8.137c — Feature page visual enhancements
   Accent glow on how-it-works section · stronger detail cards · story h2 accent
   ========================================================================== */

/* ── How-it-works section: accent radial glow background ── */
html body.spx-public .spx-feature-how-v129.spx-feature-v137{
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,rgba(var(--feat-c1,37,210,255),.07),transparent 65%),
    linear-gradient(180deg,rgba(8,13,28,.96),rgba(5,9,20,.92))!important;
  border-top:1px solid rgba(var(--feat-c1,37,210,255),.10)!important;
}
html body.spx-public .spx-feature-how-v129.spx-feature-v137 .spx-feature-how-head h2{
  background:linear-gradient(135deg,#fff 30%,rgba(var(--feat-c1,37,210,255),1) 100%)!important;
  -webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  background-clip:text!important;
}

/* ── How-it-works cards: stronger glass card ── */
html body.spx-public .spx-feature-v137 .spx-feature-how-card{
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important;
  border:1px solid rgba(var(--feat-c1,37,210,255),.12)!important;
}
html body.spx-public .spx-feature-v137 .spx-feature-how-card:hover{
  background:linear-gradient(165deg,rgba(var(--feat-c1,37,210,255),.08),rgba(var(--feat-c2,82,119,255),.04))!important;
}

/* ── Detail cards: accent num colour ── */
html body.spx-public .spx-feature-card-grid-v127[data-feature-accent] .spx-feature-card-num{
  color:rgb(var(--feat-c1,37,210,255))!important;
}
html body.spx-public .spx-feature-card-grid-v127[data-feature-accent] .spx-feature-detail-card{
  border-color:rgba(var(--feat-c1,37,210,255),.10)!important;
}
html body.spx-public .spx-feature-card-grid-v127[data-feature-accent] .spx-feature-detail-card:hover{
  border-color:rgba(var(--feat-c1,37,210,255),.28)!important;
  box-shadow:0 14px 42px rgba(0,0,0,.18),0 0 0 1px rgba(var(--feat-c1,37,210,255),.10)!important;
}

/* ── Story section: accent heading gradient ── */
html body.spx-public .spx-feature-story-v127.spx-feature-v137 .spx-feature-story-head h2{
  background:linear-gradient(135deg,#fff 40%,rgba(var(--feat-c1,37,210,255),.90) 100%)!important;
  -webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  background-clip:text!important;
}

/* ── Light mode safety ── */
html[data-theme="light"] body.spx-public .spx-feature-how-v129.spx-feature-v137,
html[data-spx-theme="light"] body.spx-public .spx-feature-how-v129.spx-feature-v137{
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,rgba(var(--feat-c1,37,210,255),.06),transparent 65%),
    linear-gradient(180deg,rgba(240,246,255,.98),rgba(230,240,255,.95))!important;
}
html[data-theme="light"] body.spx-public .spx-feature-how-v129.spx-feature-v137 .spx-feature-how-head h2,
html[data-spx-theme="light"] body.spx-public .spx-feature-how-v129.spx-feature-v137 .spx-feature-how-head h2,
html[data-theme="light"] body.spx-public .spx-feature-story-v127.spx-feature-v137 .spx-feature-story-head h2,
html[data-spx-theme="light"] body.spx-public .spx-feature-story-v127.spx-feature-v137 .spx-feature-story-head h2{
  background:linear-gradient(135deg,#0f172a 30%,rgb(var(--feat-c1,37,99,235)) 100%)!important;
  -webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  background-clip:text!important;
}
html[data-theme="light"] body.spx-public .spx-feature-v137 .spx-feature-how-card,
html[data-spx-theme="light"] body.spx-public .spx-feature-v137 .spx-feature-how-card{
  background:rgba(255,255,255,.96)!important;
  border-color:rgba(var(--feat-c1,37,99,235),.14)!important;
}

/* ==========================================================================
   A8.138 — Auth v138 complete rework
   New .spx-auth-page shell + .spx-auth-v138-* component system.
   Replaces auth-shell/auth-card/spx-auth-v127/v136/v137 on all three auth routes.
   ========================================================================== */

/* ── Shell ──────────────────────────────────────────────────────────────── */
html body.spx-auth-page-v130 main.spx-auth-main-v130 .spx-auth-page{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:calc(100svh - 62px)!important;
  padding:clamp(12px,2.5vh,28px) 16px!important;
  box-sizing:border-box!important;
}
html body.spx-auth-page-v130 main#main.spx-auth-main-v130>.spx-alert-banner-v130:first-child+.spx-auth-page{
  align-self:center!important;
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.spx-auth-v138-card{
  width:100%;
  max-width:480px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:clamp(22px,3.5vw,36px);
  box-sizing:border-box;
  position:relative;
}
.spx-auth-page--register .spx-auth-v138-card{max-width:700px;}

/* ── Brand row ──────────────────────────────────────────────────────────── */
.spx-auth-v138-brand{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
}
.spx-auth-v138-brand img{width:26px;height:26px;flex-shrink:0;}
.spx-auth-v138-brand span{font-size:15px;font-weight:600;color:rgba(255,255,255,.9);letter-spacing:-.01em;}

/* Register header row (brand + step dots) */
.spx-auth-v138-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.spx-auth-v138-header .spx-auth-v138-brand{margin-bottom:0;}

/* ── Step indicator ─────────────────────────────────────────────────────── */
.spx-auth-v138-steps{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0;
  list-style:none;
  margin:0;
  padding:0;
}
.spx-auth-v138-steps span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  transition:background .25s,transform .25s;
  display:block;
}
.spx-auth-v138-steps span.is-active{
  background:#6366f1;
  transform:scale(1.35);
}

/* ── Headings ───────────────────────────────────────────────────────────── */
.spx-auth-v138-card h1{
  font-size:clamp(20px,2.6vw,26px)!important;
  font-weight:700!important;
  color:#fff!important;
  margin:0 0 7px!important;
  letter-spacing:-.03em!important;
  line-height:1.14!important;
}
.spx-auth-v138-sub{
  font-size:13.5px!important;
  color:rgba(255,255,255,.5)!important;
  margin:0 0 18px!important;
  line-height:1.5!important;
}
.spx-auth-v138-eyebrow{
  display:block;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6366f1;
  margin:0 0 4px;
}
.spx-auth-v138-postreg h2{
  font-size:clamp(18px,2.4vw,22px)!important;
  font-weight:700!important;
  color:#fff!important;
  margin:0!important;
  letter-spacing:-.025em!important;
}
.spx-auth-v138-postreg p{
  font-size:13px!important;
  color:rgba(255,255,255,.52)!important;
  margin:0!important;
  line-height:1.5!important;
}

/* ── Field system ───────────────────────────────────────────────────────── */
.spx-auth-v138-field{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.spx-auth-v138-field>label{
  font-size:12px!important;
  font-weight:500!important;
  color:rgba(255,255,255,.55)!important;
  letter-spacing:.01em!important;
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
}
.spx-auth-v138-field>label[for]{
  display:block!important;
}
.spx-auth-v138-field input[type="email"],
.spx-auth-v138-field input[type="password"],
.spx-auth-v138-field input[type="text"],
.spx-auth-v138-field select{
  min-height:44px!important;
  padding:10px 13px!important;
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:9px!important;
  color:#fff!important;
  font-size:13.5px!important;
  width:100%!important;
  box-sizing:border-box!important;
  transition:border-color .18s,background .18s!important;
}
.spx-auth-v138-field input:focus,
.spx-auth-v138-field select:focus{
  outline:none!important;
  border-color:rgba(99,102,241,.55)!important;
  background:rgba(255,255,255,.09)!important;
}
.spx-auth-v138-field input::placeholder{color:rgba(255,255,255,.22)!important;}
.spx-auth-v138-field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* ── Form stack ─────────────────────────────────────────────────────────── */
.spx-auth-v138-form{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}

/* ── Meta link ──────────────────────────────────────────────────────────── */
.spx-auth-v138-meta{
  display:flex;
  justify-content:flex-end;
}
.spx-auth-v138-meta a{
  font-size:12px;
  color:rgba(255,255,255,.38);
  text-decoration:none;
  transition:color .18s;
}
.spx-auth-v138-meta a:hover{color:rgba(255,255,255,.72);}

/* ── Submit button ──────────────────────────────────────────────────────── */
.spx-auth-v138-submit{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:46px!important;
  width:100%!important;
  background:linear-gradient(135deg,#4f46e5,#6366f1)!important;
  border:none!important;
  border-radius:9px!important;
  color:#fff!important;
  font-size:13.5px!important;
  font-weight:600!important;
  cursor:pointer!important;
  text-decoration:none!important;
  transition:opacity .18s,transform .12s!important;
  box-sizing:border-box!important;
}
.spx-auth-v138-submit:hover{opacity:.9!important;transform:translateY(-1px)!important;}
.spx-auth-v138-submit:active{transform:translateY(0)!important;}
.spx-auth-v138-submit.is-loading{opacity:.58!important;pointer-events:none!important;}

/* ── Divider ────────────────────────────────────────────────────────────── */
.spx-auth-v138-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:2px 0;
}
.spx-auth-v138-divider::before,
.spx-auth-v138-divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.09);}
.spx-auth-v138-divider span{font-size:11px;color:rgba(255,255,255,.28);letter-spacing:.05em;}

/* ── Google button ──────────────────────────────────────────────────────── */
.spx-auth-v138-google{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-height:44px!important;
  padding:0 18px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:9px!important;
  color:rgba(255,255,255,.82)!important;
  font-size:13px!important;
  font-weight:500!important;
  text-decoration:none!important;
  cursor:pointer!important;
  transition:background .18s,border-color .18s!important;
  width:100%!important;
  box-sizing:border-box!important;
}
.spx-auth-v138-google:hover{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.2)!important;}
.spx-auth-v138-google.is-disabled{opacity:.38!important;pointer-events:none!important;}

/* ── Switch link ────────────────────────────────────────────────────────── */
.spx-auth-v138-switch{
  text-align:center!important;
  font-size:13px!important;
  color:rgba(255,255,255,.38)!important;
  margin:2px 0 0!important;
}
.spx-auth-v138-switch a{color:rgba(255,255,255,.72)!important;text-decoration:none!important;font-weight:500!important;}
.spx-auth-v138-switch a:hover{color:#fff!important;}

/* ── Status line ────────────────────────────────────────────────────────── */
.spx-auth-v138-status{
  font-size:13px!important;
  color:rgba(255,100,100,.88)!important;
  min-height:0!important;
  margin:0!important;
}
.spx-auth-v138-status:empty{display:none!important;}

/* ── 2FA panel ──────────────────────────────────────────────────────────── */
.spx-auth-v138-2fa{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  background:rgba(99,102,241,.07);
  border:1px solid rgba(99,102,241,.18);
  border-radius:10px;
}
.spx-auth-v138-2fa[hidden]{display:none!important;}
.spx-auth-v138-2fa-hd strong{display:block;font-size:13.5px;color:#fff;margin-bottom:3px;}
.spx-auth-v138-2fa-hd p{font-size:12.5px;color:rgba(255,255,255,.5);margin:0;}
.spx-auth-v138-text-btn{
  background:none!important;
  border:none!important;
  padding:0!important;
  color:rgba(255,255,255,.38)!important;
  font-size:12px!important;
  cursor:pointer!important;
  text-align:left!important;
  transition:color .18s!important;
}
.spx-auth-v138-text-btn:hover{color:rgba(255,255,255,.72)!important;}

/* ── Captcha ────────────────────────────────────────────────────────────── */
.spx-auth-v138-captcha{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  background:rgba(99,102,241,.06);
  border:1px solid rgba(99,102,241,.14);
  border-radius:9px;
}
.spx-auth-v138-captcha[hidden]{display:none!important;}
.spx-auth-v138-hint{
  font-size:11.5px!important;
  color:rgba(255,255,255,.32)!important;
  margin:0!important;
}

/* ── Legal consent ──────────────────────────────────────────────────────── */
.spx-auth-v138-legal{
  display:flex!important;
  align-items:flex-start!important;
  gap:8px!important;
  font-size:12px!important;
  color:rgba(255,255,255,.45)!important;
  line-height:1.5!important;
  cursor:pointer!important;
}
.spx-auth-v138-legal input[type="checkbox"]{
  flex-shrink:0!important;
  margin-top:2px!important;
  width:auto!important;
  min-height:auto!important;
  accent-color:#6366f1!important;
}
.spx-auth-v138-legal a{color:rgba(255,255,255,.68)!important;}

/* ── Google consent step ────────────────────────────────────────────────── */
.spx-auth-v138-consent p{
  font-size:13px!important;
  color:rgba(255,255,255,.55)!important;
  margin:0!important;
  line-height:1.55!important;
}
.spx-auth-v138-consent-actions{
  display:flex;
  gap:9px;
}
.spx-auth-v138-consent-actions .btn{flex:1;}

/* ── Maintenance lock ───────────────────────────────────────────────────── */
.spx-auth-v138-lock{
  padding:18px;
  background:rgba(245,158,11,.06);
  border:1px solid rgba(245,158,11,.18);
  border-radius:10px;
  text-align:center;
}
.spx-auth-v138-lock p{color:rgba(255,255,255,.55)!important;margin:0 0 14px!important;font-size:13.5px!important;}

/* ── Register step display overrides ────────────────────────────────────── */
.spx-auth-page--register .register-step{display:none!important;}
.spx-auth-page--register .register-step.is-active{display:flex!important;flex-direction:column!important;gap:10px!important;}

/* ── Light mode ─────────────────────────────────────────────────────────── */
html[data-theme="light"] body.spx-public .spx-auth-v138-card,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-card{
  background:#fff!important;
  border-color:rgba(15,23,42,.1)!important;
  box-shadow:0 4px 28px rgba(15,23,42,.07)!important;
}
html[data-theme="light"] body.spx-public .spx-auth-v138-brand span,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-brand span{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-card h1,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-card h1{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-sub,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-sub{color:#64748b!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-field>label,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-field>label{color:#475569!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-field input,
html[data-theme="light"] body.spx-public .spx-auth-v138-field select,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-field input,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-field select{
  background:#f8fafc!important;
  border-color:#e2e8f0!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-auth-v138-field input:focus,
html[data-theme="light"] body.spx-public .spx-auth-v138-field select:focus,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-field input:focus,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-field select:focus{
  border-color:#6366f1!important;
  background:#fff!important;
}
html[data-theme="light"] body.spx-public .spx-auth-v138-field input::placeholder,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-field input::placeholder{color:#94a3b8!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-divider::before,
html[data-theme="light"] body.spx-public .spx-auth-v138-divider::after,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-divider::before,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-divider::after{background:#e2e8f0!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-divider span,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-divider span{color:#94a3b8!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-google,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-google{
  background:#fff!important;
  border-color:#e2e8f0!important;
  color:#334155!important;
}
html[data-theme="light"] body.spx-public .spx-auth-v138-google:hover,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-google:hover{background:#f8fafc!important;border-color:#cbd5e1!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-switch,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-switch{color:#64748b!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-switch a,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-switch a{color:#334155!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-meta a,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-meta a{color:#94a3b8!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-hint,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-hint{color:#94a3b8!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-legal,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-legal{color:#64748b!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-legal a,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-legal a{color:#334155!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-2fa,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-2fa{background:rgba(99,102,241,.05)!important;border-color:rgba(99,102,241,.18)!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-2fa-hd strong,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-2fa-hd strong{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-2fa-hd p,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-2fa-hd p{color:#64748b!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-text-btn,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-text-btn{color:#94a3b8!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-steps span,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-steps span{background:#cbd5e1!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-steps span.is-active,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-steps span.is-active{background:#6366f1!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-consent p,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-consent p{color:#475569!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-postreg h2,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-postreg h2{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-postreg p,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-postreg p{color:#64748b!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-lock,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-lock{background:#fff8ed!important;border-color:rgba(245,158,11,.24)!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-lock p,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-lock p{color:#92400e!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-status,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-status{color:#dc2626!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-eyebrow,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-eyebrow{color:#6366f1!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-captcha,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-captcha{background:rgba(99,102,241,.04)!important;border-color:rgba(99,102,241,.12)!important;}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media(max-width:580px){
  html body.spx-auth-page-v130 main.spx-auth-main-v130 .spx-auth-page{
    justify-content:flex-start!important;
    padding-top:28px!important;
    min-height:auto!important;
  }
  .spx-auth-v138-field-row{grid-template-columns:1fr!important;}
}

/* ==========================================================================
   A8.138b — Auth polish + feature pages bespoke rework
   ========================================================================== */

/* ── Auth: Spixor cyan/sky button direction ─────────────────────────────── */
.spx-auth-v138-submit{
  background:linear-gradient(135deg,#0284c7,#0ea5e9,#22d3ee)!important;
  color:#03111e!important;
  box-shadow:0 6px 22px rgba(14,165,233,.30)!important;
}
.spx-auth-v138-submit:hover{
  box-shadow:0 8px 30px rgba(14,165,233,.44)!important;
  opacity:1!important;
}
.spx-auth-v138-steps span.is-active{background:#0ea5e9!important;}
.spx-auth-v138-eyebrow{color:#22d3ee!important;}
.spx-auth-v138-2fa{background:rgba(14,165,233,.07)!important;border-color:rgba(14,165,233,.18)!important;}
.spx-auth-v138-captcha{background:rgba(14,165,233,.05)!important;border-color:rgba(14,165,233,.12)!important;}
.spx-auth-v138-field input:focus,
.spx-auth-v138-field select:focus{border-color:rgba(14,165,233,.55)!important;}
.spx-auth-v138-legal input[type="checkbox"]{accent-color:#0ea5e9!important;}

/* Light mode button keeps brand direction */
html[data-theme="light"] body.spx-public .spx-auth-v138-submit,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-submit{
  background:linear-gradient(135deg,#0284c7,#0ea5e9)!important;
  color:#fff!important;
  box-shadow:0 4px 16px rgba(2,132,199,.28)!important;
}
html[data-theme="light"] body.spx-public .spx-auth-v138-steps span.is-active,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-steps span.is-active{background:#0ea5e9!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-eyebrow,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-eyebrow{color:#0284c7!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-2fa,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-2fa{background:rgba(14,165,233,.05)!important;border-color:rgba(14,165,233,.2)!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-captcha,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-captcha{background:rgba(14,165,233,.04)!important;border-color:rgba(14,165,233,.14)!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-field input:focus,
html[data-theme="light"] body.spx-public .spx-auth-v138-field select:focus,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-field input:focus,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-field select:focus{border-color:#0ea5e9!important;}

/* ── Auth: login success overlay for v138 card ──────────────────────────── */
.spx-auth-v138-card{overflow:hidden;position:relative;}
.spx-auth-v138-card.is-auth-loading .spx-auth-v138-form{opacity:.55;filter:saturate(.72);}
.spx-auth-v138-card.is-auth-success .spx-auth-v138-form,
.spx-auth-v138-card.is-auth-success .spx-auth-v138-google,
.spx-auth-v138-card.is-auth-success .spx-auth-v138-switch,
.spx-auth-v138-card.is-auth-success .spx-auth-v138-divider{
  opacity:0!important;
  transform:translateY(-8px)!important;
  pointer-events:none!important;
  transition:opacity .26s ease,transform .26s ease!important;
}
/* Restyle auth-success-orb inside v138 card */
.spx-auth-v138-card .auth-success-orb{
  background:radial-gradient(circle at 50% 44%,rgba(14,165,233,.15),rgba(5,10,22,.88) 64%)!important;
}
.spx-auth-v138-card .auth-success-orb span{
  background:linear-gradient(135deg,#22d3ee,#0ea5e9)!important;
  color:#03111e!important;
  box-shadow:0 18px 54px rgba(14,165,233,.38)!important;
}
html[data-theme="light"] body.spx-public .spx-auth-v138-card .auth-success-orb,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-card .auth-success-orb{
  background:radial-gradient(circle at 50% 44%,rgba(14,165,233,.10),rgba(248,250,255,.94) 64%)!important;
}

/* ── Auth: register compact spacing ─────────────────────────────────────── */
.spx-auth-page--register .spx-auth-v138-card{
  padding:clamp(18px,3vw,28px)!important;
}
.spx-auth-page--register .spx-auth-v138-form{gap:8px!important;}
.spx-auth-page--register .spx-auth-v138-field>label{font-size:11.5px!important;gap:4px!important;}
.spx-auth-page--register .spx-auth-v138-field input{min-height:40px!important;padding:8px 12px!important;font-size:13px!important;}
.spx-auth-page--register .spx-auth-v138-field-row{gap:8px!important;}
.spx-auth-page--register .spx-auth-v138-captcha{padding:10px!important;gap:6px!important;}
.spx-auth-page--register .spx-auth-v138-legal{font-size:11.5px!important;gap:6px!important;}
.spx-auth-page--register .spx-auth-v138-submit{min-height:42px!important;}
.spx-auth-page--register .spx-auth-v138-sub{margin:0 0 14px!important;}
.spx-auth-page--register .spx-auth-v138-header{margin-bottom:14px!important;}
.spx-auth-page--register .spx-auth-v138-card h1{margin:0 0 5px!important;font-size:clamp(18px,2.4vw,22px)!important;}

/* ── Feature pages v138b: story section rework ──────────────────────────── */
html body.spx-public .spx-feature-story-v127.spx-feature-v138b{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:clamp(28px,4vw,56px)!important;
  align-items:start!important;
}
html body.spx-public .spx-feature-story-v127.spx-feature-v138b .spx-feature-story-head{
  display:flex!important;
  flex-direction:column!important;
  gap:16px!important;
}
html body.spx-public .spx-feature-story-v127.spx-feature-v138b .spx-feature-story-head h2{
  font-size:clamp(26px,3.4vw,42px)!important;
  letter-spacing:-.03em!important;
  line-height:1.1!important;
  margin:0!important;
}
html body.spx-public .spx-feature-story-v127.spx-feature-v138b .spx-feature-story-head p{
  font-size:clamp(14px,1.4vw,16px)!important;
  line-height:1.72!important;
  color:rgba(218,236,255,.68)!important;
  max-width:640px!important;
  margin:0!important;
}
html body.spx-public .spx-feature-story-v127.spx-feature-v138b .spx-feature-status-actions{
  display:flex!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  margin-top:4px!important;
}
/* concept visual column */
html body.spx-public .spx-feature-story-concept{
  width:min(260px,32vw)!important;
  flex-shrink:0!important;
}
html body.spx-public .spx-feature-story-status{
  margin-top:14px!important;
  padding:14px!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:12px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
}
html body.spx-public .spx-feature-story-status p{
  font-size:12px!important;
  color:rgba(218,236,255,.55)!important;
  margin:0!important;
  line-height:1.55!important;
}

/* how-it-works v138b: sharper step numbers + header */
html body.spx-public .spx-feature-how-v129.spx-feature-v138b .spx-feature-how-head h2{
  font-size:clamp(22px,2.8vw,34px)!important;
  letter-spacing:-.025em!important;
}
html body.spx-public .spx-feature-how-v129.spx-feature-v138b .spx-feature-how-num{
  font-size:clamp(32px,4vw,52px)!important;
  opacity:.55!important;
  font-weight:900!important;
  letter-spacing:-.04em!important;
}

/* CTA strip v138b: stronger gradient + heading */
html body.spx-public .spx-feature-cta-strip-v127.spx-feature-v138b{
  background:
    radial-gradient(ellipse 80% 70% at 30% 50%,rgba(var(--feat-c1,14,165,233),.15),transparent 65%),
    radial-gradient(ellipse 60% 80% at 80% 30%,rgba(var(--feat-c2,6,182,212),.10),transparent 60%),
    linear-gradient(135deg,rgba(5,10,24,.96),rgba(8,16,36,.90))!important;
}
html body.spx-public .spx-feature-cta-strip-v127.spx-feature-v138b .spx-feature-cta-copy h2{
  font-size:clamp(24px,3vw,40px)!important;
  letter-spacing:-.03em!important;
  background:linear-gradient(135deg,#fff 30%,rgba(var(--feat-c1,14,165,233),1) 100%)!important;
  -webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  background-clip:text!important;
}

/* Light mode story text */
html[data-theme="light"] body.spx-public .spx-feature-story-v127.spx-feature-v138b .spx-feature-story-head p,
html[data-spx-theme="light"] body.spx-public .spx-feature-story-v127.spx-feature-v138b .spx-feature-story-head p{
  color:#475569!important;
}
html[data-theme="light"] body.spx-public .spx-feature-story-status,
html[data-spx-theme="light"] body.spx-public .spx-feature-story-status{
  background:#f8fafc!important;
  border-color:#e2e8f0!important;
}
html[data-theme="light"] body.spx-public .spx-feature-story-status p,
html[data-spx-theme="light"] body.spx-public .spx-feature-story-status p{color:#64748b!important;}
html[data-theme="light"] body.spx-public .spx-feature-cta-strip-v127.spx-feature-v138b .spx-feature-cta-copy h2,
html[data-spx-theme="light"] body.spx-public .spx-feature-cta-strip-v127.spx-feature-v138b .spx-feature-cta-copy h2{
  background:linear-gradient(135deg,#0f172a 30%,rgb(var(--feat-c1,2,132,199)) 100%)!important;
  -webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  background-clip:text!important;
}

/* ── Feature concept visual base styles ─────────────────────────────────── */
.spfc-visual{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:16px;
  font-size:12px;
  color:rgba(255,255,255,.7);
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  box-sizing:border-box;
}
html[data-theme="light"] .spfc-visual,
html[data-spx-theme="light"] .spfc-visual{background:#fff;border-color:#e2e8f0;color:#334155;}

/* Builder visual */
.spfc-toolbar{display:flex;gap:5px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.07);}
.spfc-toolbar span{width:20px;height:20px;border-radius:5px;background:rgba(255,255,255,.08);}
.spfc-canvas-wrap{display:flex;flex-direction:column;gap:5px;}
.spfc-canvas-hero{height:28px;border-radius:6px;background:linear-gradient(90deg,rgba(var(--feat-c1,14,165,233),.2),rgba(255,255,255,.05));}
.spfc-canvas-cols{display:flex;gap:5px;}
.spfc-canvas-col{flex:1;height:36px;border-radius:5px;background:rgba(255,255,255,.06);border:1px solid transparent;}
.spfc-canvas-col.is-selected{border-color:rgba(var(--feat-c1,14,165,233),.5);background:rgba(var(--feat-c1,14,165,233),.1);position:relative;}
.spfc-canvas-footer{height:14px;border-radius:4px;background:rgba(255,255,255,.04);}
.spfc-inspector{display:flex;flex-direction:column;gap:5px;}
.spfc-insp-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;}
.spfc-insp-row small{color:rgba(255,255,255,.4);}
.spfc-insp-row b{color:rgba(255,255,255,.8);font-size:11px;font-weight:600;}
.spfc-swatch{width:14px;height:14px;border-radius:3px;background:rgb(var(--feat-c1,14,165,233));display:inline-block;}

/* Export pipeline */
.spfc-pipeline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.spfc-pipe-node{padding:5px 10px;border-radius:999px;border:1px solid rgba(var(--feat-c1,14,165,233),.3);background:rgba(var(--feat-c1,14,165,233),.1);font-size:11px;font-weight:600;color:rgba(255,255,255,.85);white-space:nowrap;}
.spfc-pipe-arr{flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--feat-c1,14,165,233),.4),rgba(255,255,255,.1));min-width:12px;}
.spfc-pipe-fork{display:flex;flex-direction:column;gap:4px;}
.spfc-pipe-node--build{background:rgba(14,165,233,.15);border-color:rgba(14,165,233,.35);}
.spfc-pipe-node--share{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.3);}
.spfc-pipe-node--zip{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3);}
.spfc-pipe-node--wp{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3);}
.spfc-badge-row{display:flex;gap:5px;}
.spfc-badge{font-size:10px;padding:3px 7px;border-radius:999px;background:rgba(var(--feat-c1,14,165,233),.1);border:1px solid rgba(var(--feat-c1,14,165,233),.2);color:rgba(255,255,255,.7);}

/* ZIP file tree */
.spfc-pkg-hd{display:flex;align-items:center;gap:6px;font-weight:600;font-size:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.07);}
.spfc-pkg-icon{width:18px;height:18px;border-radius:4px;background:linear-gradient(135deg,rgba(var(--feat-c1,34,197,94),.6),rgba(var(--feat-c1,34,197,94),.3));display:inline-block;}
.spfc-filetree{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;}
.spfc-filetree li{font-size:11px;color:rgba(255,255,255,.65);padding:2px 4px;border-radius:3px;}
.spfc-filetree li.indent{padding-left:16px;}
.spfc-ft-folder{color:rgba(var(--feat-c1,34,197,94),1)!important;font-weight:600;}
.spfc-ft-html{color:#e87d6b!important;}
.spfc-ft-css{color:#60a5fa!important;}
.spfc-ft-js{color:#fbbf24!important;}
.spfc-ft-img{color:rgba(255,255,255,.5)!important;}
.spfc-chip-row{display:flex;gap:4px;}
.spfc-chip-row span{font-size:10px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);}

/* WordPress transfer */
.spfc-transfer{display:flex;align-items:center;gap:8px;}
.spfc-transfer-node{display:flex;flex-direction:column;align-items:center;gap:4px;}
.spfc-transfer-node span{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;}
.spfc-transfer-node small{font-size:10px;color:rgba(255,255,255,.5);white-space:nowrap;}
.spfc-transfer-node--spixor span{background:linear-gradient(135deg,rgba(99,102,241,.5),rgba(59,130,246,.4));color:#fff;}
.spfc-transfer-node--wp span{background:linear-gradient(135deg,rgba(59,130,246,.5),rgba(99,102,241,.4));color:#fff;}
.spfc-transfer-rail{flex:1;display:flex;gap:5px;align-items:center;justify-content:center;}
.spfc-transfer-rail span{width:5px;height:5px;border-radius:50%;background:rgba(var(--feat-c1,99,102,241),.5);animation:spfcPulse 1.6s ease infinite;}
.spfc-transfer-rail span:nth-child(2){animation-delay:.3s;}
.spfc-transfer-rail span:nth-child(3){animation-delay:.6s;}
@keyframes spfcPulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
.spfc-alpha-badge{align-self:flex-start;font-size:10px;padding:3px 8px;border-radius:999px;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);color:#fbbf24;}

/* Forms mockup */
.spfc-form-mock{display:flex;flex-direction:column;gap:6px;}
.spfc-field{display:flex;flex-direction:column;gap:3px;}
.spfc-field small{font-size:10px;color:rgba(255,255,255,.4);}
.spfc-field span{height:22px;border-radius:5px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);}
.spfc-field--area span{height:36px;}
.spfc-field-submit{height:26px;border-radius:5px;background:linear-gradient(90deg,rgba(var(--feat-c1,168,85,247),.5),rgba(var(--feat-c1,168,85,247),.3));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:rgba(255,255,255,.85);}
.spfc-notif{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,.04);border-radius:8px;border:1px solid rgba(255,255,255,.07);}
.spfc-notif-dot{width:7px;height:7px;border-radius:50%;background:rgb(var(--feat-c1,168,85,247));box-shadow:0 0 8px rgba(var(--feat-c1,168,85,247),.5);flex-shrink:0;}
.spfc-notif b{font-size:11px;flex:1;}
.spfc-notif small{font-size:10px;color:rgba(255,255,255,.38);}

/* Files grid */
.spfc-files-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.spfc-thumb{height:40px;border-radius:6px;background:rgba(var(--feat-c1,20,184,166),.12);border:1px solid rgba(var(--feat-c1,20,184,166),.18);}
.spfc-thumb--folder{display:flex;align-items:flex-end;padding:5px;background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.1)!important;}
.spfc-thumb--folder small{font-size:9px;color:rgba(255,255,255,.5);}
.spfc-thumb--add{display:flex;align-items:center;justify-content:center;font-size:18px;color:rgba(255,255,255,.2);background:rgba(255,255,255,.03)!important;border-color:rgba(255,255,255,.07)!important;border-style:dashed!important;}
.spfc-storage-bar{display:flex;flex-direction:column;gap:5px;}
.spfc-storage-bar small{font-size:10px;color:rgba(255,255,255,.4);}
.spfc-storage-track{height:5px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;}
.spfc-storage-fill{height:100%;width:24%;border-radius:inherit;background:linear-gradient(90deg,rgb(var(--feat-c1,20,184,166)),rgba(var(--feat-c1,20,184,166),.6));}

/* Share visual */
.spfc-share-card{border:1px solid rgba(255,255,255,.09);border-radius:10px;overflow:hidden;}
.spfc-share-thumb{height:60px;background:linear-gradient(135deg,rgba(var(--feat-c1,139,92,246),.2),rgba(255,255,255,.03));}
.spfc-share-link{display:flex;align-items:center;gap:6px;padding:7px 9px;background:rgba(255,255,255,.04);}
.spfc-share-link span{width:12px;height:12px;border-radius:50%;background:rgba(var(--feat-c1,139,92,246),.5);flex-shrink:0;}
.spfc-share-link small{font-size:10px;color:rgba(255,255,255,.5);font-family:monospace;}
.spfc-bubble{padding:5px 10px;border-radius:999px;font-size:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);align-self:flex-start;}
.spfc-bubble--b{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.25);color:#86efac;align-self:flex-end;}

/* SEO visual */
.spfc-seo-ring{display:flex;flex-direction:column;align-items:center;gap:4px;color:rgb(var(--feat-c1,245,158,11));}
.spfc-seo-ring small{font-size:10px;color:rgba(255,255,255,.4);}
.spfc-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.spfc-checks li{font-size:11px;padding:4px 8px;border-radius:6px;display:flex;align-items:center;gap:5px;}
.spfc-checks li::before{width:7px;height:7px;border-radius:50%;flex-shrink:0;content:"";}
.spfc-check--ok{background:rgba(34,197,94,.08);color:rgba(255,255,255,.75);}
.spfc-check--ok::before{background:#22c55e;}
.spfc-check--warn{background:rgba(245,158,11,.08);color:rgba(255,255,255,.65);}
.spfc-check--warn::before{background:#f59e0b;}
.spfc-check--err{background:rgba(248,113,113,.08);color:rgba(255,255,255,.65);}
.spfc-check--err::before{background:#f87171;}

/* Project dashboard visual */
.spfc-proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.spfc-proj-card{border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.03);}
.spfc-proj-card.is-active{border-color:rgba(var(--feat-c1,59,130,246),.4);background:rgba(var(--feat-c1,59,130,246),.07);}
.spfc-proj-thumb{height:28px;border-radius:4px;background:rgba(255,255,255,.07);}
.spfc-proj-card small{font-size:9px;color:rgba(255,255,255,.5);}
.spfc-proj-dot{width:6px;height:6px;border-radius:50%;background:rgb(var(--feat-c1,59,130,246));align-self:flex-start;}
.spfc-action-rail{display:flex;gap:4px;flex-wrap:wrap;}
.spfc-action-rail span{font-size:10px;padding:3px 7px;border-radius:5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.6);}

/* Dashboard hub/spoke */
.spfc-hub-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;}
.spfc-hub-center{padding:8px 14px;border-radius:10px;background:linear-gradient(135deg,rgba(var(--feat-c1,34,211,238),.25),rgba(var(--feat-c1,34,211,238),.1));border:1px solid rgba(var(--feat-c1,34,211,238),.35);font-size:12px;font-weight:700;color:rgba(255,255,255,.9);}
.spfc-hub-nodes{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;}
.spfc-hub-n{font-size:10px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.65);}

/* Light mode concept visuals */
html[data-theme="light"] .spfc-visual,
html[data-spx-theme="light"] .spfc-visual{background:#fff;border-color:#e2e8f0;color:#334155;}
html[data-theme="light"] .spfc-toolbar span,
html[data-spx-theme="light"] .spfc-toolbar span{background:#f1f5f9;}
html[data-theme="light"] .spfc-toolbar,
html[data-spx-theme="light"] .spfc-toolbar{border-color:#e2e8f0;}
html[data-theme="light"] .spfc-canvas-col,
html[data-spx-theme="light"] .spfc-canvas-col{background:#f1f5f9;}
html[data-theme="light"] .spfc-insp-row small,
html[data-spx-theme="light"] .spfc-insp-row small{color:#64748b;}
html[data-theme="light"] .spfc-insp-row b,
html[data-spx-theme="light"] .spfc-insp-row b{color:#0f172a;}
html[data-theme="light"] .spfc-filetree li,
html[data-spx-theme="light"] .spfc-filetree li{color:#475569;}
html[data-theme="light"] .spfc-chip-row span,
html[data-spx-theme="light"] .spfc-chip-row span{background:#f1f5f9;border-color:#e2e8f0;color:#475569;}
html[data-theme="light"] .spfc-notif,
html[data-spx-theme="light"] .spfc-notif{background:#f8fafc;border-color:#e2e8f0;}
html[data-theme="light"] .spfc-share-card,
html[data-spx-theme="light"] .spfc-share-card{border-color:#e2e8f0;}
html[data-theme="light"] .spfc-share-link,
html[data-spx-theme="light"] .spfc-share-link{background:#f8fafc;}
html[data-theme="light"] .spfc-share-link small,
html[data-spx-theme="light"] .spfc-share-link small{color:#64748b;}
html[data-theme="light"] .spfc-hub-n,
html[data-spx-theme="light"] .spfc-hub-n{background:#f1f5f9;border-color:#e2e8f0;color:#475569;}
html[data-theme="light"] .spfc-proj-card,
html[data-spx-theme="light"] .spfc-proj-card{border-color:#e2e8f0;background:#f8fafc;}
html[data-theme="light"] .spfc-action-rail span,
html[data-spx-theme="light"] .spfc-action-rail span{background:#f1f5f9;border-color:#e2e8f0;color:#475569;}
html[data-theme="light"] .spfc-thumb,
html[data-spx-theme="light"] .spfc-thumb{border-color:#e2e8f0!important;}
html[data-theme="light"] .spfc-storage-bar small,
html[data-spx-theme="light"] .spfc-storage-bar small{color:#64748b;}
html[data-theme="light"] .spfc-storage-track,
html[data-spx-theme="light"] .spfc-storage-track{background:#e2e8f0;}
html[data-theme="light"] .spfc-checks li,
html[data-spx-theme="light"] .spfc-checks li{color:#475569;}
html[data-theme="light"] .spfc-seo-ring small,
html[data-spx-theme="light"] .spfc-seo-ring small{color:#64748b;}
html[data-theme="light"] .spfc-transfer-node small,
html[data-spx-theme="light"] .spfc-transfer-node small{color:#64748b;}
html[data-theme="light"] .spfc-pipe-node,
html[data-spx-theme="light"] .spfc-pipe-node{color:#334155;}
html[data-theme="light"] .spfc-badge,
html[data-spx-theme="light"] .spfc-badge{color:#475569;}
html[data-theme="light"] .spfc-field small,
html[data-spx-theme="light"] .spfc-field small{color:#64748b;}
html[data-theme="light"] .spfc-field span,
html[data-spx-theme="light"] .spfc-field span{background:#f1f5f9;border-color:#e2e8f0;}

/* Mobile: hide concept visual on small screens */
@media(max-width:860px){
  html body.spx-public .spx-feature-story-v127.spx-feature-v138b{
    grid-template-columns:1fr!important;
  }
  html body.spx-public .spx-feature-story-concept{
    display:none!important;
  }
}

/* ==========================================================================
   A8.138c — Register step rework + feature pages complete rework
   ========================================================================== */

/* ── Register: inner-page system ─────────────────────────────────────────── */
.spx-auth-page--register .spx-auth-v138-card{max-width:560px!important;}
.spx-reg-page{display:none!important;flex-direction:column;gap:10px;}
.spx-reg-page.is-active{display:flex!important;flex-direction:column!important;gap:10px!important;}
/* alt row hidden when on inner page 2 */
.spx-auth-v138-card.is-reg-page-2 [data-reg-alt]{display:none!important;}
/* form itself is still a register-step — the existing step CSS handles show/hide;
   we override only the inner-page gap to be slightly tighter */
.spx-auth-page--register .register-step.is-active.spx-auth-v138-form,
.spx-auth-page--register form.register-step.is-active{
  gap:0!important;
}
/* Light mode: same max-width */
html[data-theme="light"] body.spx-public .spx-auth-page--register .spx-auth-v138-card,
html[data-spx-theme="light"] body.spx-public .spx-auth-page--register .spx-auth-v138-card{max-width:560px!important;}

/* ── Feature: outputs section ────────────────────────────────────────────── */
.spx-feature-outputs-v138c{
  padding:clamp(36px,5vw,72px) clamp(20px,5vw,60px);
  max-width:960px;
  margin:0 auto;
}
.spx-feature-outputs-v138c .spx-feat-out-head{margin-bottom:28px;}
.spx-feature-outputs-v138c .spx-feat-out-head .eyebrow{
  display:block;margin-bottom:6px;
  color:rgb(var(--feat-c1));letter-spacing:.08em;font-size:11px;text-transform:uppercase;font-weight:600;
}
.spx-feature-outputs-v138c .spx-feat-out-head h2{
  font-size:clamp(20px,2.6vw,32px);
  letter-spacing:-.025em;
  color:#e8eaf2;
  font-weight:700;
  margin:0;
}
.spx-feat-out-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 16px;
}
.spx-feat-out-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  background:rgba(var(--feat-c1),.06);
  border:1px solid rgba(var(--feat-c1),.14);
  border-radius:10px;
  transition:background .18s ease,border-color .18s ease;
}
.spx-feat-out-item:hover{background:rgba(var(--feat-c1),.1);border-color:rgba(var(--feat-c1),.24);}
.spx-feat-out-chk{flex-shrink:0;color:rgb(var(--feat-c1));margin-top:2px;}
.spx-feat-out-text strong{
  display:block;font-size:13px;font-weight:600;
  color:#e4e6f0;margin-bottom:2px;
}
.spx-feat-out-text span{font-size:12px;color:rgba(180,186,210,.7);line-height:1.5;}

/* ── Dashboard command-center concept visual ─────────────────────────────── */
.spfc-visual--dashboard .spfc-cmd-layout{
  display:flex;gap:8px;height:145px;width:100%;
}
.spfc-cmd-nav{
  width:56px;min-width:56px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  padding:8px 6px;
  display:flex;flex-direction:column;gap:5px;
}
.spfc-cmd-logo{
  width:24px;height:24px;
  background:rgb(var(--feat-c1));
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:11px;color:#03111e;
  margin-bottom:6px;flex-shrink:0;
}
.spfc-cmd-nav-item{
  display:flex;gap:4px;align-items:center;opacity:.35;
}
.spfc-cmd-nav-item.is-active{opacity:1;}
.spfc-cmd-nav-item span{
  width:14px;height:3px;
  background:rgb(var(--feat-c1));
  border-radius:2px;flex-shrink:0;
}
.spfc-cmd-nav-item small{font-size:7px;color:rgba(255,255,255,.75);}
.spfc-cmd-main{flex:1;display:flex;flex-direction:column;gap:7px;}
.spfc-cmd-stat-row{display:flex;gap:5px;}
.spfc-cmd-stat{
  flex:1;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  border-radius:6px;padding:5px 7px;
  display:flex;flex-direction:column;gap:1px;
}
.spfc-cmd-stat b{font-size:12px;font-weight:700;color:rgb(var(--feat-c1));}
.spfc-cmd-stat small{font-size:7px;color:rgba(255,255,255,.4);}
.spfc-cmd-proj-row{display:flex;gap:5px;flex:1;}
.spfc-cmd-proj{
  flex:1;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:6px;padding:5px 7px;
  display:flex;flex-direction:column;gap:4px;
}
.spfc-cmd-proj.is-active{border-color:rgba(var(--feat-c1),.38);}
.spfc-cmd-proj-thumb{
  height:28px;
  background:linear-gradient(135deg,rgba(var(--feat-c1),.14),rgba(var(--feat-c1),.06));
  border-radius:4px;
}
.spfc-cmd-proj small{font-size:7px;color:rgba(255,255,255,.5);}
.spfc-cmd-action-rail{
  display:flex;gap:4px;
}
.spfc-cmd-action-rail span{
  flex:1;
  padding:4px 5px;
  background:rgba(var(--feat-c1),.09);
  border:1px solid rgba(var(--feat-c1),.2);
  border-radius:5px;
  font-size:7px;color:rgb(var(--feat-c1));
  text-align:center;
}

/* ── Feature: how section visual rails (v138c enhancement) ──────────────── */
.spx-feature-how-v129.spx-feature-v138b .spx-feature-how-grid{
  position:relative;
}
.spx-feature-how-v129.spx-feature-v138b .spx-feature-how-card{
  border:1px solid rgba(var(--feat-c1),.12)!important;
  position:relative;
  overflow:hidden;
}
.spx-feature-how-v129.spx-feature-v138b .spx-feature-how-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,rgb(var(--feat-c1)),transparent);
  opacity:.4;
}
.spx-feature-how-v129.spx-feature-v138b .spx-feature-how-num{
  font-size:32px!important;font-weight:800!important;
  background:linear-gradient(135deg,rgb(var(--feat-c1)),rgba(var(--feat-c1),.4));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  opacity:.8!important;
}

/* ── Feature: CTA section v138b/c stronger treatment ────────────────────── */
.spx-feature-cta-strip-v127.spx-feature-v138b{
  background:radial-gradient(ellipse 80% 120% at 50% 0%,rgba(var(--feat-c1),.22) 0%,rgba(var(--feat-c1),.05) 55%,transparent 100%)!important;
  border-top:1px solid rgba(var(--feat-c1),.18)!important;
  border-bottom:1px solid rgba(var(--feat-c1),.08)!important;
}
.spx-feature-cta-strip-v127.spx-feature-v138b .spx-feature-cta-copy h2{
  background:linear-gradient(135deg,rgb(var(--feat-c1)) 0%,#e0eaff 65%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-size:clamp(24px,3.2vw,44px)!important;
}

/* ── Dashboard feature page: story section special treatment ─────────────── */
[data-feature-kind="dashboard"].spx-feature-story-v127{
  background:radial-gradient(ellipse 70% 100% at 30% 50%,rgba(var(--feat-c1),.1) 0%,transparent 70%)!important;
}
[data-feature-kind="dashboard"] .spx-feature-story-head h2{
  font-size:clamp(26px,3.6vw,46px)!important;
}

/* ── Light mode: feature outputs ─────────────────────────────────────────── */
html[data-theme="light"] body.spx-public .spx-feature-outputs-v138c .spx-feat-out-head h2,
html[data-spx-theme="light"] body.spx-public .spx-feature-outputs-v138c .spx-feat-out-head h2{color:#1e293b!important;}
html[data-theme="light"] body.spx-public .spx-feat-out-item,
html[data-spx-theme="light"] body.spx-public .spx-feat-out-item{
  background:rgba(var(--feat-c1),.05)!important;
  border-color:rgba(var(--feat-c1),.18)!important;
}
html[data-theme="light"] body.spx-public .spx-feat-out-item:hover,
html[data-spx-theme="light"] body.spx-public .spx-feat-out-item:hover{
  background:rgba(var(--feat-c1),.09)!important;
}
html[data-theme="light"] body.spx-public .spx-feat-out-text strong,
html[data-spx-theme="light"] body.spx-public .spx-feat-out-text strong{color:#1e293b!important;}
html[data-theme="light"] body.spx-public .spx-feat-out-text span,
html[data-spx-theme="light"] body.spx-public .spx-feat-out-text span{color:#475569!important;}
html[data-theme="light"] body.spx-public .spx-feature-outputs-v138c .spx-feat-out-head .eyebrow,
html[data-spx-theme="light"] body.spx-public .spx-feature-outputs-v138c .spx-feat-out-head .eyebrow{color:rgb(var(--feat-c1))!important;}

/* ── Light mode: CTA v138b ───────────────────────────────────────────────── */
html[data-theme="light"] body.spx-public .spx-feature-cta-strip-v127.spx-feature-v138b .spx-feature-cta-copy h2,
html[data-spx-theme="light"] body.spx-public .spx-feature-cta-strip-v127.spx-feature-v138b .spx-feature-cta-copy h2{
  background:linear-gradient(135deg,rgb(var(--feat-c1)) 0%,#0f172a 70%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
}

/* ── Mobile: feature outputs single column ───────────────────────────────── */
@media(max-width:680px){
  .spx-feat-out-grid{grid-template-columns:1fr!important;}
  .spx-feature-outputs-v138c{padding:32px 20px!important;}
}

/* ==========================================================================
   A8.138d — Register source-field, utility pages, feature pages
   ========================================================================== */

/* ── Phase 1: Register heard-source select + conditional inputs dark mode ── */
/* Fix: add appearance:none + custom arrow to all auth selects, fix focus to cyan */
.spx-auth-v138-field select{
  appearance:none!important;
  -webkit-appearance:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(180%2C188%2C220%2C.55)' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 13px center!important;
  background-size:12px 8px!important;
  padding-right:36px!important;
  cursor:pointer!important;
}
.spx-auth-v138-field select option{
  background:#0d1829;
  color:#e0e4f0;
}
/* Fix focus ring: indigo → cyan (matches v138b button direction) */
.spx-auth-v138-field input:focus,
.spx-auth-v138-field select:focus{
  border-color:rgba(14,165,233,.55)!important;
  box-shadow:0 0 0 3px rgba(14,165,233,.11)!important;
}
/* Conditional source labels (social/ai/other inputs — not inside .spx-auth-v138-field) */
.spx-auth-v138-postreg .conditional-source{
  display:flex!important;flex-direction:column!important;gap:4px!important;
}
/* Beat the flex rule above when the element is hidden — display:flex!important would otherwise override [hidden] */
.spx-auth-v138-postreg .conditional-source[hidden]{display:none!important;}
.spx-auth-v138-postreg .conditional-source span{
  font-size:12px!important;font-weight:500!important;
  color:rgba(255,255,255,.5)!important;letter-spacing:.01em!important;
}
.spx-auth-v138-postreg .conditional-source select,
.spx-auth-v138-postreg .conditional-source input[type="text"]{
  min-height:42px!important;padding:9px 36px 9px 12px!important;
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:9px!important;color:#e8eaf0!important;
  font-size:13.5px!important;width:100%!important;box-sizing:border-box!important;
  appearance:none!important;-webkit-appearance:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(180%2C188%2C220%2C.55)' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:12px 8px!important;
  transition:border-color .18s,background .18s!important;
}
.spx-auth-v138-postreg .conditional-source input[type="text"]{
  background-image:none!important;padding-right:12px!important;
}
.spx-auth-v138-postreg .conditional-source select option{background:#0d1829;color:#e0e4f0;}
.spx-auth-v138-postreg .conditional-source select:focus,
.spx-auth-v138-postreg .conditional-source input[type="text"]:focus{
  outline:none!important;border-color:rgba(14,165,233,.55)!important;
  background-color:rgba(255,255,255,.09)!important;
  box-shadow:0 0 0 3px rgba(14,165,233,.11)!important;
}
.spx-auth-v138-postreg .conditional-source input::placeholder{color:rgba(255,255,255,.22)!important;}
/* Light mode */
html[data-theme="light"] body.spx-public .spx-auth-v138-field select,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-field select{
  background-color:#fff!important;border-color:rgba(15,23,42,.14)!important;color:#1e293b!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(30%2C41%2C59%2C.45)' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
html[data-theme="light"] body.spx-public .spx-auth-v138-field select option,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-field select option{background:#fff;color:#1e293b;}
html[data-theme="light"] body.spx-public .spx-auth-v138-postreg .conditional-source select,
html[data-theme="light"] body.spx-public .spx-auth-v138-postreg .conditional-source input[type="text"],
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-postreg .conditional-source select,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-postreg .conditional-source input[type="text"]{
  background-color:#fff!important;border-color:rgba(15,23,42,.14)!important;color:#1e293b!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(30%2C41%2C59%2C.45)' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
html[data-theme="light"] body.spx-public .spx-auth-v138-postreg .conditional-source select option,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-postreg .conditional-source select option{background:#fff;color:#1e293b;}
html[data-theme="light"] body.spx-public .spx-auth-v138-postreg .conditional-source span,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-postreg .conditional-source span{color:#475569!important;}
html[data-theme="light"] body.spx-public .spx-auth-v138-postreg .conditional-source input::placeholder,
html[data-spx-theme="light"] body.spx-public .spx-auth-v138-postreg .conditional-source input::placeholder{color:rgba(30,41,59,.35)!important;}

/* ── Phase 2 + 3: Auth utility pages (reset + unsubscribe) v138d ─────────── */
.spx-auth-page--reset .spx-auth-v138-card,
.spx-auth-page--unsub .spx-auth-v138-card{max-width:460px!important;}
/* Success/error status in utility pages */
.spx-util-alert{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:10px;margin-top:4px;
}
.spx-util-alert.is-ok{
  background:rgba(14,165,233,.08);border:1px solid rgba(14,165,233,.22);
}
.spx-util-alert.is-err{
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.22);
}
.spx-util-alert-icon{
  font-size:16px;flex-shrink:0;margin-top:1px;
}
.spx-util-alert.is-ok .spx-util-alert-icon{color:#22d3ee;}
.spx-util-alert.is-err .spx-util-alert-icon{color:#f87171;}
.spx-util-alert-body strong{display:block;font-size:13px;font-weight:600;color:#e4e6f0;margin-bottom:3px;}
.spx-util-alert-body p{font-size:12px;color:rgba(180,186,210,.75);margin:0;}
/* Light mode utility alerts */
html[data-theme="light"] body.spx-public .spx-util-alert.is-ok,
html[data-spx-theme="light"] body.spx-public .spx-util-alert.is-ok{
  background:rgba(14,165,233,.06)!important;border-color:rgba(14,165,233,.25)!important;
}
html[data-theme="light"] body.spx-public .spx-util-alert.is-err,
html[data-spx-theme="light"] body.spx-public .spx-util-alert.is-err{
  background:rgba(239,68,68,.05)!important;border-color:rgba(239,68,68,.2)!important;
}
html[data-theme="light"] body.spx-public .spx-util-alert-body strong,
html[data-spx-theme="light"] body.spx-public .spx-util-alert-body strong{color:#1e293b!important;}
html[data-theme="light"] body.spx-public .spx-util-alert-body p,
html[data-spx-theme="light"] body.spx-public .spx-util-alert-body p{color:#475569!important;}

/* ── Phase 4: Feature pages badges strip ─────────────────────────────────── */
.spx-feature-badges-v138d{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:0 clamp(20px,5vw,60px) clamp(18px,2.5vw,32px);
  max-width:960px;margin:0 auto;
}
.spx-feat-badge{
  display:inline-flex;align-items:center;
  padding:5px 12px;
  background:rgba(var(--feat-c1),.09);
  border:1px solid rgba(var(--feat-c1),.2);
  border-radius:99px;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  color:rgb(var(--feat-c1));
  transition:background .18s,border-color .18s;
}
.spx-feat-badge:hover{background:rgba(var(--feat-c1),.16);border-color:rgba(var(--feat-c1),.35);}
/* Dashboard cockpit panel section */
.spx-feature-dashboard-cockpit-v138d{
  padding:clamp(24px,4vw,48px) clamp(20px,5vw,60px);
  max-width:960px;margin:0 auto;
}
.spx-dash-cockpit-full{
  background:linear-gradient(145deg,rgba(11,21,40,.82),rgba(6,12,26,.9));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:20px;
  display:flex;gap:16px;
  position:relative;overflow:hidden;
}
.spx-dash-cockpit-full::before{
  content:'';position:absolute;top:-40px;right:-40px;
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(var(--feat-c1),.12) 0%,transparent 70%);
  pointer-events:none;
}
.spx-dcp-sidebar{
  width:60px;min-width:60px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:10px;padding:10px 7px;
  display:flex;flex-direction:column;gap:6px;align-items:center;
}
.spx-dcp-logo{
  width:28px;height:28px;background:rgb(var(--feat-c1));
  border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:13px;color:#03111e;margin-bottom:8px;
}
.spx-dcp-navitem{
  width:36px;height:28px;border-radius:6px;
  background:rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;
}
.spx-dcp-navitem.is-active{background:rgba(var(--feat-c1),.14);}
.spx-dcp-navitem span{
  width:16px;height:3px;background:rgba(255,255,255,.25);border-radius:2px;
}
.spx-dcp-navitem.is-active span{background:rgb(var(--feat-c1));}
.spx-dcp-main{flex:1;display:flex;flex-direction:column;gap:12px;}
.spx-dcp-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06);
}
.spx-dcp-topbar-title{font-size:13px;font-weight:700;color:#e0e4f0;}
.spx-dcp-topbar-tag{
  padding:3px 10px;border-radius:99px;
  background:rgba(var(--feat-c1),.12);
  border:1px solid rgba(var(--feat-c1),.25);
  font-size:10px;font-weight:600;color:rgb(var(--feat-c1));
}
.spx-dcp-stats{display:flex;gap:8px;}
.spx-dcp-stat{
  flex:1;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:10px 12px;
}
.spx-dcp-stat b{display:block;font-size:16px;font-weight:800;color:rgb(var(--feat-c1));}
.spx-dcp-stat small{font-size:10px;color:rgba(255,255,255,.4);font-weight:500;}
.spx-dcp-proj-row{display:flex;gap:8px;}
.spx-dcp-proj{
  flex:1;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:10px 12px;
}
.spx-dcp-proj.is-active{border-color:rgba(var(--feat-c1),.3);}
.spx-dcp-proj-thumb{
  height:40px;border-radius:6px;margin-bottom:8px;
  background:linear-gradient(135deg,rgba(var(--feat-c1),.15),rgba(var(--feat-c1),.05));
}
.spx-dcp-proj-name{font-size:11px;font-weight:600;color:#c8cee0;}
.spx-dcp-proj-meta{font-size:10px;color:rgba(255,255,255,.35);margin-top:2px;}
.spx-dcp-proj-actions{
  display:flex;gap:5px;margin-top:8px;
}
.spx-dcp-proj-actions span{
  flex:1;padding:4px 6px;
  background:rgba(var(--feat-c1),.08);
  border:1px solid rgba(var(--feat-c1),.18);
  border-radius:5px;font-size:9px;
  color:rgb(var(--feat-c1));text-align:center;
}
/* Light mode: cockpit */
html[data-theme="light"] body.spx-public .spx-dash-cockpit-full,
html[data-spx-theme="light"] body.spx-public .spx-dash-cockpit-full{
  background:rgba(255,255,255,.9)!important;
  border-color:rgba(15,23,42,.1)!important;
  box-shadow:0 12px 40px rgba(15,23,42,.08)!important;
}
html[data-theme="light"] body.spx-public .spx-dcp-sidebar,
html[data-spx-theme="light"] body.spx-public .spx-dcp-sidebar{background:rgba(15,23,42,.04)!important;border-color:rgba(15,23,42,.08)!important;}
html[data-theme="light"] body.spx-public .spx-dcp-stat,
html[data-theme="light"] body.spx-public .spx-dcp-proj,
html[data-spx-theme="light"] body.spx-public .spx-dcp-stat,
html[data-spx-theme="light"] body.spx-public .spx-dcp-proj{background:rgba(15,23,42,.03)!important;border-color:rgba(15,23,42,.08)!important;}
html[data-theme="light"] body.spx-public .spx-dcp-topbar-title,
html[data-spx-theme="light"] body.spx-public .spx-dcp-topbar-title{color:#1e293b!important;}
html[data-theme="light"] body.spx-public .spx-dcp-proj-name,
html[data-spx-theme="light"] body.spx-public .spx-dcp-proj-name{color:#334155!important;}
/* Light mode: feature badges */
html[data-theme="light"] body.spx-public .spx-feat-badge,
html[data-spx-theme="light"] body.spx-public .spx-feat-badge{
  background:rgba(var(--feat-c1),.07)!important;
  border-color:rgba(var(--feat-c1),.22)!important;
}
@media(max-width:680px){
  .spx-dash-cockpit-full{flex-direction:column!important;}
  .spx-dcp-sidebar{flex-direction:row!important;width:100%!important;height:44px!important;padding:8px 12px!important;}
  .spx-dcp-proj-row{flex-direction:column!important;}
}
/* A8.138d Phase 4b: Builder concept visual ───────────────────── */
.spfc-builder-shell{display:flex;flex-direction:column;width:100%;}
.spfc-builder-toolbar{
  display:flex;align-items:center;gap:5px;
  padding:6px 8px;
  background:rgba(255,255,255,.04);
  border-radius:8px 8px 0 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.spfc-tb-logo{
  width:18px;height:18px;border-radius:4px;
  background:linear-gradient(135deg,rgba(var(--feat-c1,14,165,233),.85),rgba(var(--feat-c1,14,165,233),.5));
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:900;color:#03111e;flex-shrink:0;
}
.spfc-tb-sep{width:1px;height:12px;background:rgba(255,255,255,.1);flex-shrink:0;margin:0 2px;}
.spfc-tb-btn{padding:2px 6px;border-radius:3px;font-size:9px;color:rgba(255,255,255,.4);cursor:default;white-space:nowrap;}
.spfc-tb-btn.is-active{background:rgba(var(--feat-c1,14,165,233),.15);color:rgb(var(--feat-c1,14,165,233));}
.spfc-tb-device{
  width:14px;height:11px;
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:7px;color:rgba(255,255,255,.25);
}
.spfc-tb-device.spfc-tb-device--active{border-color:rgb(var(--feat-c1,14,165,233));color:rgb(var(--feat-c1,14,165,233));}
.spfc-builder-body{display:flex;gap:6px;padding:7px;background:rgba(255,255,255,.02);border-radius:0 0 8px 8px;}
.spfc-canvas-area{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0;}
.spfc-canvas-section{
  border-radius:6px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  padding:7px;
  display:flex;flex-direction:column;gap:4px;
  position:relative;
}
.spfc-canvas-section.is-selected{
  border-color:rgba(var(--feat-c1,14,165,233),.55);
  background:rgba(var(--feat-c1,14,165,233),.06);
}
.spfc-cs-sel-ring{
  position:absolute;inset:-2px;
  border-radius:7px;
  border:2px solid rgba(var(--feat-c1,14,165,233),.55);
  pointer-events:none;
}
.spfc-cs-hero-line{
  height:7px;border-radius:3px;width:68%;
  background:linear-gradient(90deg,rgba(var(--feat-c1,14,165,233),.45),rgba(255,255,255,.07));
}
.spfc-cs-hero-sub{height:5px;border-radius:2px;width:48%;background:rgba(255,255,255,.09);}
.spfc-cs-btn{
  height:12px;width:46px;border-radius:3px;margin-top:2px;
  background:linear-gradient(90deg,rgba(var(--feat-c1,14,165,233),.55),rgba(var(--feat-c1,14,165,233),.3));
}
.spfc-cs--cards{flex-direction:row!important;gap:4px;}
.spfc-cs-card{flex:1;height:26px;border-radius:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);}
.spfc-insp-head{padding-bottom:4px;margin-bottom:2px;border-bottom:1px solid rgba(255,255,255,.06);}
.spfc-insp-head small{font-size:9px;color:rgba(255,255,255,.35);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
/* A8.138d Phase 4b: SEO concept visual enhancements ─────────── */
.spfc-seo-shell{display:flex;flex-direction:column;gap:8px;width:100%;}
.spfc-seo-score-area{display:flex;align-items:flex-start;gap:10px;}
.spfc-seo-meta-preview{
  flex:1;border-radius:6px;padding:7px 9px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;gap:3px;
  min-width:0;
}
.spfc-seo-mp-title{font-size:11px;font-weight:600;color:rgb(var(--feat-c1,245,158,11));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.spfc-seo-mp-url{font-size:10px;color:rgba(80,200,120,.8);}
.spfc-seo-mp-desc{font-size:10px;color:rgba(255,255,255,.42);line-height:1.4;}
.spfc-checks--v2 li{background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.07)!important;}
.spfc-checks--v2 li span{width:14px;height:14px;border-radius:3px;display:flex!important;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;}
.spfc-checks--v2 li.ok::before{background:rgba(34,197,94,.65)!important;}
.spfc-checks--v2 li.ok span{background:rgba(34,197,94,.18);color:rgb(34,197,94);}
.spfc-checks--v2 li.warn::before{background:rgba(245,158,11,.65)!important;}
.spfc-checks--v2 li.warn span{background:rgba(245,158,11,.18);color:rgb(245,158,11);}
.spfc-checks--v2 li.err::before{background:rgba(239,68,68,.65)!important;}
.spfc-checks--v2 li.err span{background:rgba(239,68,68,.18);color:rgb(239,68,68);}
/* Light mode: builder + SEO concept visuals */
html[data-theme="light"] body.spx-public .spfc-builder-toolbar,
html[data-spx-theme="light"] body.spx-public .spfc-builder-toolbar{background:rgba(15,23,42,.04)!important;border-color:rgba(15,23,42,.09)!important;}
html[data-theme="light"] body.spx-public .spfc-builder-body,
html[data-spx-theme="light"] body.spx-public .spfc-builder-body{background:rgba(15,23,42,.02)!important;}
html[data-theme="light"] body.spx-public .spfc-canvas-section,
html[data-spx-theme="light"] body.spx-public .spfc-canvas-section{background:rgba(15,23,42,.03)!important;border-color:rgba(15,23,42,.08)!important;}
html[data-theme="light"] body.spx-public .spfc-tb-btn,
html[data-spx-theme="light"] body.spx-public .spfc-tb-btn{color:rgba(15,23,42,.4)!important;}
html[data-theme="light"] body.spx-public .spfc-seo-meta-preview,
html[data-spx-theme="light"] body.spx-public .spfc-seo-meta-preview{background:rgba(15,23,42,.04)!important;border-color:rgba(15,23,42,.09)!important;}
html[data-theme="light"] body.spx-public .spfc-seo-mp-desc,
html[data-spx-theme="light"] body.spx-public .spfc-seo-mp-desc{color:rgba(15,23,42,.5)!important;}
html[data-theme="light"] body.spx-public .spfc-checks--v2 li,
html[data-spx-theme="light"] body.spx-public .spfc-checks--v2 li{background:rgba(15,23,42,.02)!important;border-color:rgba(15,23,42,.07)!important;}
html[data-theme="light"] body.spx-public .spfc-insp-head small,
html[data-spx-theme="light"] body.spx-public .spfc-insp-head small{color:rgba(15,23,42,.35)!important;}


/* Spixor Carts product menu entry */
.spx-carts-product-link{position:relative;overflow:hidden}.spx-carts-product-link::after{content:"";position:absolute;right:-28px;top:-28px;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,rgba(50,213,255,.22),rgba(255,139,210,.12) 48%,transparent 68%);pointer-events:none}.spx-carts-product-link i{background:linear-gradient(135deg,#7cffb2,#32d5ff 48%,#ff8bd2);-webkit-background-clip:text;background-clip:text;color:transparent!important}


/* v0.7 Spixor Carts public-site integration */
.spx-carts-mini-logo{width:36px;height:36px;border-radius:14px;background:linear-gradient(135deg,#eafcff,#fff7ee);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(40,70,110,.14);margin-right:2px}.spx-carts-mini-logo img{width:25px;height:25px;border-radius:10px}.spx-carts-product-link{background:linear-gradient(135deg,rgba(94,225,196,.12),rgba(85,199,255,.12),rgba(255,175,102,.1))!important}.spx-auth-carts .spx-auth-v138-card{background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,250,255,.94))!important;border-color:rgba(85,199,255,.22)!important}.spx-auth-carts .spx-auth-v138-brand span{color:#143056}.spx-auth-carts .spx-auth-v138-submit{background:linear-gradient(135deg,#14213a,#2e4f82)!important}.spx-auth-carts .spx-auth-v138-sub{color:#50627a!important}.spx-auth-carts .merchant-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px}.spx-auth-carts .merchant-choice label{padding:14px;border-radius:18px;background:#fff;border:1px solid rgba(20,34,58,.12);color:#17243e}.spx-auth-carts .merchant-choice strong{display:block}.spx-auth-carts .merchant-choice span{display:block;color:#607086;font-size:13px;line-height:1.45;margin-top:4px}@media(max-width:720px){.spx-auth-carts .merchant-choice{grid-template-columns:1fr}}


/* ======================================================================
   A8.138f — Public Visual Rework: Auth+Feature Backgrounds, Pricing,
   Export, How Section, Command Center Tabs
   ====================================================================== */

/* ── Phase 1: Center utility pages (unsub, reset) ─────────────────────── */
html body.spx-public>main.spx-auth-page{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-height:calc(100svh - 62px)!important;padding:clamp(16px,3vh,36px) clamp(12px,3vw,24px)!important;box-sizing:border-box!important;width:100%!important;}
@media(max-width:680px){html body.spx-public>main.spx-auth-page{justify-content:flex-start!important;padding-top:28px!important;}}

/* ── Phase 2: Auth + utility page backgrounds ─────────────────────────── */
body.spx-auth-page-v130,body.spx-reset-page,body.spx-unsub-page{background-color:#03111e!important;background-image:radial-gradient(ellipse 880px 520px at 15% 20%,rgba(14,165,233,.13),transparent 70%),radial-gradient(ellipse 640px 400px at 85% 80%,rgba(34,211,238,.09),transparent 68%),radial-gradient(ellipse 400px 280px at 50% 50%,rgba(56,189,248,.06),transparent 65%),repeating-linear-gradient(0deg,transparent,transparent 48px,rgba(14,165,233,.03) 48px,rgba(14,165,233,.03) 49px),repeating-linear-gradient(90deg,transparent,transparent 48px,rgba(14,165,233,.03) 48px,rgba(14,165,233,.03) 49px)!important;background-attachment:fixed!important;background-size:cover!important;}
html[data-theme="light"] body.spx-auth-page-v130,html[data-spx-theme="light"] body.spx-auth-page-v130,html[data-theme="light"] body.spx-reset-page,html[data-spx-theme="light"] body.spx-reset-page,html[data-theme="light"] body.spx-unsub-page,html[data-spx-theme="light"] body.spx-unsub-page{background-color:#f0f6fc!important;background-image:radial-gradient(ellipse 880px 520px at 15% 20%,rgba(14,165,233,.07),transparent 70%),radial-gradient(ellipse 640px 400px at 85% 80%,rgba(34,211,238,.05),transparent 68%),repeating-linear-gradient(0deg,transparent,transparent 48px,rgba(14,165,233,.04) 48px,rgba(14,165,233,.04) 49px),repeating-linear-gradient(90deg,transparent,transparent 48px,rgba(14,165,233,.04) 48px,rgba(14,165,233,.04) 49px)!important;}
@media(prefers-reduced-motion:reduce){body.spx-auth-page-v130,body.spx-reset-page,body.spx-unsub-page{background-image:radial-gradient(ellipse 880px 520px at 15% 20%,rgba(14,165,233,.10),transparent 70%)!important;background-attachment:scroll!important;}}

/* ── Phase 3: Feature page backgrounds ────────────────────────────────── */
body[data-route*="features/"]{background-color:#03111e!important;background-image:radial-gradient(ellipse 900px 560px at 10% 12%,rgba(14,165,233,.12),transparent 70%),radial-gradient(ellipse 600px 400px at 90% 75%,rgba(34,211,238,.08),transparent 65%),radial-gradient(ellipse 360px 240px at 55% 40%,rgba(56,189,248,.05),transparent 60%),repeating-linear-gradient(0deg,transparent,transparent 60px,rgba(14,165,233,.025) 60px,rgba(14,165,233,.025) 61px),repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(14,165,233,.025) 60px,rgba(14,165,233,.025) 61px)!important;background-attachment:fixed!important;}
html[data-theme="light"] body[data-route*="features/"],html[data-spx-theme="light"] body[data-route*="features/"]{background-color:#f4f9fd!important;background-image:radial-gradient(ellipse 900px 560px at 10% 12%,rgba(14,165,233,.06),transparent 70%),radial-gradient(ellipse 600px 400px at 90% 75%,rgba(34,211,238,.04),transparent 65%),repeating-linear-gradient(0deg,transparent,transparent 60px,rgba(14,165,233,.035) 60px,rgba(14,165,233,.035) 61px),repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(14,165,233,.035) 60px,rgba(14,165,233,.035) 61px)!important;}
@media(prefers-reduced-motion:reduce){body[data-route*="features/"]{background-attachment:scroll!important;}}

/* ── Phase 4: Pricing section rework ──────────────────────────────────── */
html body.spx-public #pricing.spx-pricing-section-v61{padding:clamp(72px,10vw,130px) clamp(20px,5vw,60px)!important;width:min(1280px,calc(100% - 40px))!important;margin:0 auto!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-section-kicker{margin-bottom:clamp(40px,6vw,72px)!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-section-kicker p{max-width:680px!important;font-size:clamp(15px,1.8vw,17px)!important;color:var(--secondary)!important;line-height:1.65!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-grid{gap:clamp(16px,2vw,28px)!important;align-items:stretch!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card{padding:clamp(24px,3vw,38px)!important;border-radius:28px!important;min-height:480px!important;background:linear-gradient(160deg,rgba(12,24,44,.82),rgba(5,12,24,.66))!important;border:1px solid rgba(218,236,255,.09)!important;box-shadow:0 24px 80px rgba(0,0,0,.20)!important;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card:hover{transform:translateY(-4px)!important;border-color:rgba(107,232,255,.22)!important;box-shadow:0 32px 100px rgba(0,0,0,.26),0 0 40px rgba(34,211,238,.07)!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-plan-head{gap:14px!important;margin-bottom:20px!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-plan-icon{width:44px!important;height:44px!important;border-radius:14px!important;background:rgba(34,211,238,.1)!important;border:1px solid rgba(34,211,238,.2)!important;display:grid!important;place-items:center!important;flex-shrink:0!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-plan-icon.orbit{background:rgba(245,158,11,.1)!important;border-color:rgba(245,158,11,.22)!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-plan-icon.enterprise{background:rgba(148,163,184,.08)!important;border-color:rgba(148,163,184,.15)!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card h3{font-size:22px!important;margin:0!important;color:var(--text)!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-plan-status{font-size:10px!important;padding:5px 9px!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card>strong{font-size:clamp(38px,4.5vw,58px)!important;letter-spacing:-.05em!important;margin:16px 0 14px!important;background:linear-gradient(135deg,#e2f9ff,#7ff4ff 50%,#22d3ee)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;}
html body.spx-public #pricing.spx-pricing-section-v61 [data-price-card="orbit"]>strong{background:linear-gradient(135deg,#fde68a,#fbbf24 50%,#f59e0b)!important;-webkit-background-clip:text!important;background-clip:text!important;}
html body.spx-public #pricing.spx-pricing-section-v61 [data-price-card="enterprise"]>strong{background:linear-gradient(135deg,#e2e8f0,#94a3b8)!important;-webkit-background-clip:text!important;background-clip:text!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card>p{font-size:14.5px!important;line-height:1.6!important;color:var(--secondary)!important;margin-bottom:20px!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card ul{gap:12px!important;margin:0 0 28px!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card li{font-size:14px!important;color:var(--secondary)!important;line-height:1.5!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-orbit-note{display:block!important;font-size:12px!important;color:var(--muted)!important;margin-top:10px!important;text-align:center!important;}
html[data-theme="light"] body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card,html[data-spx-theme="light"] body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card{background:rgba(255,255,255,.88)!important;border-color:rgba(15,23,42,.08)!important;box-shadow:0 16px 60px rgba(15,23,42,.08)!important;}
html[data-theme="light"] body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card>strong,html[data-spx-theme="light"] body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card>strong{background:linear-gradient(135deg,#0369a1,#0284c7 50%,#0ea5e9)!important;-webkit-background-clip:text!important;background-clip:text!important;}

/* ── Phase 5: Export section visual polish ────────────────────────────── */
html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-head-v128{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:clamp(20px,4vw,48px)!important;margin-bottom:clamp(28px,4vw,48px)!important;flex-wrap:wrap!important;}
html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-head-v128 .spx-section-kicker{flex:1 1 360px!important;min-width:0!important;}
html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-proof-v128{display:flex!important;gap:20px!important;flex-shrink:0!important;}
html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-proof-v128 span{display:flex!important;flex-direction:column!important;align-items:center!important;padding:14px 22px!important;border-radius:18px!important;background:rgba(34,211,238,.06)!important;border:1px solid rgba(34,211,238,.15)!important;min-width:90px!important;}
html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-proof-v128 b{font-size:clamp(26px,3vw,38px)!important;font-weight:900!important;letter-spacing:-.04em!important;line-height:1!important;background:linear-gradient(135deg,#7ff4ff,#22d3ee)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;}
html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-proof-v128 small{font-size:11px!important;color:var(--muted)!important;text-align:center!important;margin-top:4px!important;line-height:1.3!important;}
html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-timeline-v128{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;position:relative!important;margin-bottom:clamp(24px,3vw,40px)!important;}
html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-step-v128{display:flex!important;align-items:flex-start!important;gap:14px!important;padding:20px!important;border-radius:18px!important;background:rgba(255,255,255,.03)!important;border:1px solid rgba(218,236,255,.07)!important;transition:background .25s ease,border-color .25s ease!important;position:relative!important;}
html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-step-v128.is-active{background:rgba(34,211,238,.05)!important;border-color:rgba(34,211,238,.2)!important;}
html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-step-no{display:flex!important;align-items:center!important;justify-content:center!important;width:36px!important;height:36px!important;border-radius:50%!important;background:linear-gradient(135deg,rgba(34,211,238,.15),rgba(14,165,233,.1))!important;border:1px solid rgba(34,211,238,.25)!important;font-size:11px!important;font-weight:900!important;color:rgb(34,211,238)!important;flex-shrink:0!important;letter-spacing:.08em!important;}
html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-step-v128.is-active .spx-export-step-no{background:linear-gradient(135deg,rgba(34,211,238,.3),rgba(14,165,233,.2))!important;border-color:rgba(34,211,238,.5)!important;box-shadow:0 0 18px rgba(34,211,238,.2)!important;}
html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-step-v128 b{display:block!important;font-size:14px!important;font-weight:800!important;color:var(--text)!important;margin-bottom:4px!important;}
html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-step-v128 p{font-size:13px!important;color:var(--secondary)!important;margin:0!important;line-height:1.55!important;}
html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-step-v128>i{display:none!important;}
html[data-theme="light"] body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-step-v128,html[data-spx-theme="light"] body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-step-v128{background:rgba(255,255,255,.7)!important;border-color:rgba(15,23,42,.08)!important;}
html[data-theme="light"] body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-step-v128.is-active,html[data-spx-theme="light"] body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-step-v128.is-active{background:rgba(14,165,233,.06)!important;border-color:rgba(14,165,233,.2)!important;}
html[data-theme="light"] body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-proof-v128 span,html[data-spx-theme="light"] body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-proof-v128 span{background:rgba(14,165,233,.06)!important;border-color:rgba(14,165,233,.15)!important;}
@media(max-width:860px){html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-timeline-v128{grid-template-columns:1fr!important;}html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-head-v128{flex-direction:column!important;align-items:flex-start!important;}html body.spx-public .spx-export-section.spx-export-launch-rework-v128 .spx-export-proof-v128{width:100%!important;justify-content:flex-start!important;}}

/* ── Phase 6: How Spixor Works right-side card polish ────────────────── */
html body.spx-public .spx-why-section.spx-why-v52 .why52-visual-card{backdrop-filter:blur(18px) saturate(1.4)!important;-webkit-backdrop-filter:blur(18px) saturate(1.4)!important;background:rgba(3,17,30,.82)!important;border:1px solid rgba(34,211,238,.2)!important;box-shadow:0 24px 72px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.03),0 0 40px rgba(34,211,238,.06)!important;border-radius:20px!important;}
html body.spx-public .spx-why-section.spx-why-v52 .why52-visual-kicker{font-size:10.5px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.12em!important;color:rgb(34,211,238)!important;opacity:1!important;margin-bottom:6px!important;}
html body.spx-public .spx-why-section.spx-why-v52 .why52-visual-card b{display:block!important;font-size:16px!important;font-weight:800!important;color:var(--text)!important;margin-bottom:6px!important;line-height:1.25!important;}
html body.spx-public .spx-why-section.spx-why-v52 .why52-visual-card p{font-size:13.5px!important;line-height:1.55!important;color:var(--secondary)!important;margin:0!important;}
html[data-theme="light"] body.spx-public .spx-why-section.spx-why-v52 .why52-visual-card,html[data-spx-theme="light"] body.spx-public .spx-why-section.spx-why-v52 .why52-visual-card{background:rgba(255,255,255,.88)!important;border-color:rgba(14,165,233,.2)!important;box-shadow:0 16px 50px rgba(15,23,42,.10),0 0 24px rgba(14,165,233,.05)!important;}
html[data-theme="light"] body.spx-public .spx-why-section.spx-why-v52 .why52-visual-card b,html[data-spx-theme="light"] body.spx-public .spx-why-section.spx-why-v52 .why52-visual-card b{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-why-section.spx-why-v52 .why52-visual-card p,html[data-spx-theme="light"] body.spx-public .spx-why-section.spx-why-v52 .why52-visual-card p{color:#475569!important;}

/* ── Phase 7: Command Center interactive tabs ─────────────────────────── */
html body.spx-public .spx-cmd-module-tabs{display:grid!important;gap:8px!important;margin-top:24px!important;}
html body.spx-public .spx-cmd-tab{display:flex!important;align-items:flex-start!important;gap:12px!important;width:100%!important;padding:14px 16px!important;border-radius:16px!important;border:1px solid rgba(218,236,255,.09)!important;background:rgba(255,255,255,.03)!important;color:inherit!important;text-align:left!important;cursor:pointer!important;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease!important;font-family:inherit!important;line-height:1!important;}
html body.spx-public .spx-cmd-tab:hover{background:rgba(34,211,238,.05)!important;border-color:rgba(34,211,238,.15)!important;}
html body.spx-public .spx-cmd-tab.is-active{background:rgba(34,211,238,.08)!important;border-color:rgba(34,211,238,.28)!important;box-shadow:0 0 20px rgba(34,211,238,.07),inset 0 0 0 1px rgba(255,255,255,.03)!important;}
html body.spx-public .spx-cmd-tab-dot{width:10px!important;height:10px!important;border-radius:50%!important;background:rgba(34,211,238,.35)!important;flex-shrink:0!important;margin-top:5px!important;transition:background .22s ease!important;}
html body.spx-public .spx-cmd-tab.is-active .spx-cmd-tab-dot{background:rgb(34,211,238)!important;animation:dashStatusPulse 2s ease-in-out infinite!important;}
@keyframes dashStatusPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.5);}50%{box-shadow:0 0 0 5px rgba(34,211,238,0);}}
html body.spx-public .spx-cmd-tab-text{flex:1!important;min-width:0!important;}
html body.spx-public .spx-cmd-tab-text b{display:block!important;font-size:14px!important;font-weight:800!important;color:var(--text)!important;margin-bottom:2px!important;}
html body.spx-public .spx-cmd-tab-text small{display:block!important;font-size:12px!important;color:var(--muted)!important;line-height:1.4!important;}
html body.spx-public .spx-cmd-tab.is-active .spx-cmd-tab-text b{color:rgb(14,165,233)!important;}
@media(prefers-reduced-motion:reduce){html body.spx-public .spx-cmd-tab.is-active .spx-cmd-tab-dot{animation:none!important;background:rgb(34,211,238)!important;}}
html[data-theme="light"] body.spx-public .spx-cmd-tab,html[data-spx-theme="light"] body.spx-public .spx-cmd-tab{border-color:rgba(15,23,42,.08)!important;background:rgba(255,255,255,.7)!important;}
html[data-theme="light"] body.spx-public .spx-cmd-tab.is-active,html[data-spx-theme="light"] body.spx-public .spx-cmd-tab.is-active{background:rgba(14,165,233,.07)!important;border-color:rgba(14,165,233,.25)!important;}
html[data-theme="light"] body.spx-public .spx-cmd-tab-dot,html[data-spx-theme="light"] body.spx-public .spx-cmd-tab-dot{background:rgba(14,165,233,.35)!important;}
html[data-theme="light"] body.spx-public .spx-cmd-tab.is-active .spx-cmd-tab-dot,html[data-spx-theme="light"] body.spx-public .spx-cmd-tab.is-active .spx-cmd-tab-dot{background:rgb(14,165,233)!important;}


/* ======================================================================
   A8.138g — Public Real Rework: Pricing, Export, How, Command Center,
   Feature Pages, Support Hub + KB Search
   ====================================================================== */

/* ── Pricing v139 ──────────────────────────────────────────────────────── */
html body.spx-public .spx-pricing-v139-head{text-align:center;max-width:680px;margin:0 auto clamp(48px,6vw,80px);padding:0 16px;}
html body.spx-public .spx-pricing-v139-head h2{font-size:clamp(34px,4.8vw,64px);letter-spacing:-.045em;margin:8px 0 16px;}
html body.spx-public .spx-pricing-v139-head p{font-size:clamp(15px,1.7vw,17px);line-height:1.65;color:var(--secondary);}

html body.spx-public .spx-pricing-v139-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px);align-items:start;width:min(1200px,calc(100% - 40px));margin:0 auto;}

html body.spx-public .spx-pcard{border-radius:28px;position:relative;overflow:hidden;}
html body.spx-public .spx-pcard-inner{display:flex;flex-direction:column;height:100%;padding:clamp(24px,3vw,36px);gap:0;}
html body.spx-public .spx-pcard{background:linear-gradient(170deg,rgba(14,24,44,.88),rgba(5,10,22,.72));border:1px solid rgba(218,236,255,.09);box-shadow:0 20px 70px rgba(0,0,0,.22);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;}
html body.spx-public .spx-pcard:hover{transform:translateY(-5px);border-color:rgba(107,232,255,.18);box-shadow:0 32px 100px rgba(0,0,0,.28),0 0 40px rgba(34,211,238,.05);}

html body.spx-public .spx-pcard--featured{border-color:rgba(34,211,238,.22)!important;box-shadow:0 24px 90px rgba(0,0,0,.28),0 0 60px rgba(34,211,238,.09)!important;}
html body.spx-public .spx-pcard--featured:hover{border-color:rgba(34,211,238,.38)!important;box-shadow:0 36px 110px rgba(0,0,0,.32),0 0 80px rgba(34,211,238,.14)!important;}
html body.spx-public .spx-pcard-featured-glow{position:absolute;inset:-1px;background:radial-gradient(600px 260px at 50% -10%,rgba(34,211,238,.14),transparent 60%);pointer-events:none;}

html body.spx-public .spx-pcard-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
html body.spx-public .spx-pcard-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.2);color:rgb(34,211,238);flex-shrink:0;}
html body.spx-public .spx-pcard-icon svg{width:22px;height:22px;}
html body.spx-public .spx-pcard-icon--orbit{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.22);color:rgb(251,191,36);}
html body.spx-public .spx-pcard-icon--enterprise{background:rgba(148,163,184,.08);border-color:rgba(148,163,184,.18);color:rgb(148,163,184);}
html body.spx-public .spx-pcard-header h3{font-size:20px;font-weight:800;margin:0;color:var(--text);}

html body.spx-public .spx-pcard-status{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;margin-top:4px;}
html body.spx-public .spx-pcard-status--live{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.25);color:rgb(52,211,153);}
html body.spx-public .spx-pcard-status--soon{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.25);color:rgb(251,191,36);}
html body.spx-public .spx-pcard-status--planned{background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.2);color:rgb(148,163,184);}

html body.spx-public .spx-pcard-price{display:flex;align-items:baseline;gap:6px;margin-bottom:14px;}
html body.spx-public .spx-pcard-price strong{font-size:clamp(36px,4vw,52px);font-weight:900;letter-spacing:-.05em;line-height:1;background:linear-gradient(135deg,#c8f7ff,#7fefff 40%,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent;}
html body.spx-public .spx-pcard--orbit .spx-pcard-price strong{background:linear-gradient(135deg,#fef3c7,#fde68a 40%,#fbbf24);-webkit-background-clip:text;background-clip:text;}
html body.spx-public .spx-pcard--enterprise .spx-pcard-price strong{background:linear-gradient(135deg,#e2e8f0,#94a3b8);-webkit-background-clip:text;background-clip:text;}
html body.spx-public .spx-pcard-price span{font-size:13px;color:var(--muted);}

html body.spx-public .spx-pcard-desc{font-size:14px;line-height:1.6;color:var(--secondary);margin:0 0 18px;}

html body.spx-public .spx-pcard-features{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px;}
html body.spx-public .spx-pcard-features li{font-size:13.5px;color:var(--secondary);padding-left:22px;position:relative;line-height:1.45;}
html body.spx-public .spx-pcard-features li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,rgba(52,211,153,.9),rgba(34,211,238,.8));display:grid;place-items:center;}
html body.spx-public .spx-pcard--orbit .spx-pcard-features li::before{background:linear-gradient(135deg,rgba(251,191,36,.9),rgba(245,158,11,.8));}
html body.spx-public .spx-pcard--enterprise .spx-pcard-features li::before{background:rgba(148,163,184,.3);}

html body.spx-public .spx-pcard-cta{margin-top:auto;display:flex;flex-direction:column;gap:8px;}
html body.spx-public .spx-pcard-cta .btn{width:100%;justify-content:center;text-align:center;}

html body.spx-public .spx-pcard-notify-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 18px;border-radius:18px;background:linear-gradient(135deg,rgba(251,191,36,.14),rgba(245,158,11,.08));border:1px solid rgba(251,191,36,.3);color:rgb(251,191,36);font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease;}
html body.spx-public .spx-pcard-notify-btn:hover{background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(245,158,11,.14));border-color:rgba(251,191,36,.5);box-shadow:0 0 24px rgba(251,191,36,.14);}
html body.spx-public .spx-pcard-notify-hint{font-size:11.5px;color:var(--muted);text-align:center;}

/* Orbit dialog modal */
html body.spx-public .spx-orbit-modal-v139{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:16px;}
html body.spx-public .spx-orbit-modal-v139[hidden]{display:none!important;}
html body.spx-public .spx-orbit-modal-backdrop{position:absolute;inset:0;background:rgba(2,8,18,.78);backdrop-filter:blur(6px);}
html body.spx-public .spx-orbit-dialog-card{position:relative;z-index:1;background:linear-gradient(155deg,rgba(10,22,44,.96),rgba(4,10,22,.94));border:1px solid rgba(251,191,36,.22);border-radius:28px;padding:clamp(24px,4vw,40px);width:min(540px,100%);box-shadow:0 40px 120px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04);}
html body.spx-public .spx-orbit-dialog-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background .2s ease;}
html body.spx-public .spx-orbit-dialog-close:hover{background:rgba(255,255,255,.12);}
html body.spx-public .spx-orbit-dialog-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px;}
html body.spx-public .spx-orbit-dialog-icon{width:48px;height:48px;border-radius:16px;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.25);display:grid;place-items:center;flex-shrink:0;color:rgb(251,191,36);}
html body.spx-public .spx-orbit-dialog-icon svg{width:26px;height:26px;}
html body.spx-public .spx-orbit-dialog-eyebrow{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:rgb(251,191,36);display:block;margin-bottom:4px;}
html body.spx-public .spx-orbit-dialog-head h3{font-size:clamp(18px,2.5vw,24px);margin:0 0 6px;color:var(--text);}
html body.spx-public .spx-orbit-dialog-sub{font-size:13px;color:var(--secondary);line-height:1.5;margin:0;}
html body.spx-public .spx-orbit-dialog-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
html body.spx-public .spx-orbit-dialog-fields label,html body.spx-public .spx-orbit-dialog-interest{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;color:var(--text);}
html body.spx-public .spx-orbit-dialog-interest{margin-bottom:20px;}
html body.spx-public .spx-orbit-dialog-card input,html body.spx-public .spx-orbit-dialog-card textarea{padding:11px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:var(--text);font-size:14px;font-family:inherit;outline:0;transition:border-color .2s ease,box-shadow .2s ease;width:100%;box-sizing:border-box;}
html body.spx-public .spx-orbit-dialog-card input:focus,html body.spx-public .spx-orbit-dialog-card textarea:focus{border-color:rgba(251,191,36,.4);box-shadow:0 0 0 3px rgba(251,191,36,.1);}
html body.spx-public .spx-orbit-dialog-card textarea{resize:vertical;min-height:80px;}
html body.spx-public .spx-orbit-dialog-footer{display:flex;flex-direction:column;gap:10px;}
html body.spx-public .spx-orbit-dialog-footer .btn{width:100%;justify-content:center;}
html body.spx-public .spx-orbit-dialog-status{font-size:12px;color:var(--muted);text-align:center;min-height:18px;}
html body.spx-public .spx-orbit-dialog-interest em{font-weight:400;opacity:.6;}

/* Pricing light mode */
html[data-theme="light"] body.spx-public .spx-pcard,html[data-spx-theme="light"] body.spx-public .spx-pcard{background:rgba(255,255,255,.9)!important;border-color:rgba(15,23,42,.08)!important;box-shadow:0 16px 60px rgba(15,23,42,.08)!important;}
html[data-theme="light"] body.spx-public .spx-pcard--featured,html[data-spx-theme="light"] body.spx-public .spx-pcard--featured{border-color:rgba(14,165,233,.18)!important;}
html[data-theme="light"] body.spx-public .spx-orbit-dialog-card,html[data-spx-theme="light"] body.spx-public .spx-orbit-dialog-card{background:rgba(255,255,255,.97)!important;border-color:rgba(15,23,42,.1)!important;}
html[data-theme="light"] body.spx-public .spx-orbit-dialog-card input,html[data-theme="light"] body.spx-public .spx-orbit-dialog-card textarea,html[data-spx-theme="light"] body.spx-public .spx-orbit-dialog-card input,html[data-spx-theme="light"] body.spx-public .spx-orbit-dialog-card textarea{background:rgba(15,23,42,.03)!important;border-color:rgba(15,23,42,.12)!important;color:#0f172a!important;}

/* Pricing mobile */
@media(max-width:900px){html body.spx-public .spx-pricing-v139-grid{grid-template-columns:1fr!important;max-width:480px!important;}}
@media(min-width:600px) and (max-width:900px){html body.spx-public .spx-pricing-v139-grid{grid-template-columns:1fr 1fr!important;max-width:none!important;}.spx-pcard--enterprise{grid-column:1/-1;}}
@media(max-width:560px){html body.spx-public .spx-orbit-dialog-fields{grid-template-columns:1fr!important;}}

/* ── Export v139 ───────────────────────────────────────────────────────── */
html body.spx-public .spx-export-v139{width:min(1220px,calc(100% - 40px))!important;margin:clamp(70px,9vw,120px) auto!important;border-radius:36px!important;padding:clamp(32px,5vw,60px)!important;background:radial-gradient(900px 380px at 16% 0%,rgba(34,211,238,.11),transparent 65%),linear-gradient(180deg,rgba(8,15,30,.8),rgba(4,9,20,.68))!important;border:1px solid rgba(218,236,255,.1)!important;box-shadow:0 30px 100px rgba(0,0,0,.22)!important;}
html body.spx-public .spx-export-v139-head{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,56px);margin-bottom:clamp(36px,5vw,56px);flex-wrap:wrap;}
html body.spx-public .spx-export-v139-copy{flex:1 1 340px;}
html body.spx-public .spx-export-v139-copy h2{font-size:clamp(26px,3.6vw,48px);letter-spacing:-.04em;margin:8px 0 14px;}
html body.spx-public .spx-export-v139-copy p{font-size:15px;color:var(--secondary);line-height:1.6;max-width:520px;margin:0;}
html body.spx-public .spx-export-v139-proof{display:flex;gap:16px;flex-shrink:0;flex-wrap:wrap;}
html body.spx-public .spx-exp-stat{display:flex;flex-direction:column;align-items:center;padding:16px 24px;border-radius:20px;background:rgba(34,211,238,.06);border:1px solid rgba(34,211,238,.14);min-width:88px;}
html body.spx-public .spx-exp-stat strong{font-size:clamp(24px,3vw,36px);font-weight:900;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,#7ff4ff,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent;}
html body.spx-public .spx-exp-stat span{font-size:11px;color:var(--muted);text-align:center;margin-top:4px;line-height:1.3;}

/* Export pipeline */
html body.spx-public .spx-export-v139-pipeline{display:flex;align-items:center;gap:0;margin-bottom:clamp(28px,4vw,44px);padding:20px 24px;border-radius:22px;background:rgba(255,255,255,.03);border:1px solid rgba(218,236,255,.07);overflow-x:auto;}
html body.spx-public .spx-expipe-node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;flex:1;min-width:100px;}
html body.spx-public .spx-expipe-icon{width:44px;height:44px;border-radius:14px;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.18);display:grid;place-items:center;color:rgb(34,211,238);}
html body.spx-public .spx-expipe-icon svg{width:22px;height:22px;}
html body.spx-public .spx-expipe-node--review .spx-expipe-icon{background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.18);color:rgb(56,189,248);}
html body.spx-public .spx-expipe-fork .spx-expipe-icon{background:rgba(99,102,241,.08);border-color:rgba(99,102,241,.18);color:rgb(99,102,241);}
html body.spx-public .spx-expipe-node b{font-size:14px;font-weight:800;color:var(--text);}
html body.spx-public .spx-expipe-node span{font-size:11.5px;color:var(--muted);line-height:1.4;max-width:120px;}
html body.spx-public .spx-expipe-fork-chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-top:4px;}
html body.spx-public .spx-expipe-fork-chips span{font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.22);color:rgb(99,102,241);}
html body.spx-public .spx-expipe-connector{flex:0 0 40px;display:flex;align-items:center;justify-content:center;color:rgba(107,232,255,.4);}
html body.spx-public .spx-expipe-connector svg{width:32px;flex-shrink:0;}

/* Export light mode */
html[data-theme="light"] body.spx-public .spx-export-v139,html[data-spx-theme="light"] body.spx-public .spx-export-v139{background:rgba(255,255,255,.84)!important;border-color:rgba(15,23,42,.08)!important;}
html[data-theme="light"] body.spx-public .spx-export-v139-pipeline,html[data-spx-theme="light"] body.spx-public .spx-export-v139-pipeline{background:rgba(15,23,42,.02)!important;border-color:rgba(15,23,42,.06)!important;}

@media(max-width:760px){html body.spx-public .spx-export-v139-head{flex-direction:column!important;align-items:flex-start!important;}html body.spx-public .spx-export-v139-proof{width:100%!important;}html body.spx-public .spx-export-v139-pipeline{flex-direction:column!important;align-items:flex-start!important;gap:12px!important;}html body.spx-public .spx-expipe-connector{transform:rotate(90deg);align-self:center;}}

/* ── How Spixor Works visual signals ──────────────────────────────────── */
html body.spx-public .spx-why-section.spx-why-v52 .why52-visual-signals{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
html body.spx-public .spx-why-section.spx-why-v52 .why52-visual-signals span{font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.2);color:rgb(34,211,238);letter-spacing:.05em;}
html[data-theme="light"] body.spx-public .spx-why-section.spx-why-v52 .why52-visual-signals span,html[data-spx-theme="light"] body.spx-public .spx-why-section.spx-why-v52 .why52-visual-signals span{background:rgba(14,165,233,.08)!important;border-color:rgba(14,165,233,.2)!important;color:rgb(2,132,199)!important;}

/* ── Command Center panels ─────────────────────────────────────────────── */
html body.spx-public .spx-cmd-panels{margin-top:16px;}
html body.spx-public .spx-cmd-panel{animation:spxCmdPanelIn .28s ease both;}
html body.spx-public .spx-cmd-panel[hidden]{display:none!important;}
@keyframes spxCmdPanelIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
html body.spx-public .spx-cmd-panel-stats{display:flex;gap:10px;flex-wrap:wrap;}
html body.spx-public .spx-cmd-panel-stats span{display:flex;flex-direction:column;align-items:center;padding:10px 16px;border-radius:14px;background:rgba(34,211,238,.05);border:1px solid rgba(34,211,238,.12);min-width:70px;text-align:center;}
html body.spx-public .spx-cmd-panel-stats b{font-size:15px;font-weight:900;color:rgb(34,211,238);letter-spacing:-.02em;line-height:1;}
html body.spx-public .spx-cmd-panel-stats small{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.3;}
html[data-theme="light"] body.spx-public .spx-cmd-panel-stats span,html[data-spx-theme="light"] body.spx-public .spx-cmd-panel-stats span{background:rgba(14,165,233,.05)!important;border-color:rgba(14,165,233,.12)!important;}
html[data-theme="light"] body.spx-public .spx-cmd-panel-stats b,html[data-spx-theme="light"] body.spx-public .spx-cmd-panel-stats b{color:rgb(2,132,199)!important;}

/* ── Feature page scroll-reveal animations ─────────────────────────────── */
.spf-card-reveal{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--spf-i,0) * 80ms);}
.spf-card-reveal.is-revealed{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.spf-card-reveal{opacity:1!important;transform:none!important;transition:none!important;}}

/* ── Support hub v139 ──────────────────────────────────────────────────── */
html body.spx-public .spx-support-v139-hero{padding:clamp(72px,10vw,120px) clamp(20px,5vw,60px) clamp(48px,6vw,72px);text-align:center;background:radial-gradient(ellipse 800px 400px at 50% 0%,rgba(14,165,233,.14),transparent 65%);border-bottom:1px solid rgba(218,236,255,.07);}
html body.spx-public .spx-support-v139-hero-inner{max-width:640px;margin:0 auto;}
html body.spx-public .spx-support-v139-hero h1{font-size:clamp(36px,5.5vw,72px);letter-spacing:-.05em;margin:8px 0 16px;background:linear-gradient(135deg,#e2f9ff,#93e4ff 40%,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent;}
html body.spx-public .spx-support-v139-hero p{font-size:clamp(14px,1.7vw,17px);line-height:1.65;color:var(--secondary);margin:0 0 28px;}

html body.spx-public .spx-support-v139-search{position:relative;max-width:520px;margin:0 auto 24px;}
html body.spx-public .spx-support-v139-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);width:18px;pointer-events:none;}
html body.spx-public .spx-support-v139-search-input{width:100%;box-sizing:border-box;padding:14px 16px 14px 46px;border-radius:20px;border:1px solid rgba(34,211,238,.22);background:rgba(255,255,255,.05);color:var(--text);font-size:15px;font-family:inherit;outline:0;transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;}
html body.spx-public .spx-support-v139-search-input::placeholder{color:var(--muted);}
html body.spx-public .spx-support-v139-search-input:focus{border-color:rgba(34,211,238,.5);box-shadow:0 0 0 4px rgba(34,211,238,.09);background:rgba(255,255,255,.07);}

html body.spx-public .spx-support-v139-quicklinks{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
html body.spx-public .spx-support-v139-quicklinks a{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;border:1px solid rgba(218,236,255,.14);background:rgba(255,255,255,.05);color:var(--text);text-decoration:none;font-size:13px;font-weight:700;transition:background .2s ease,border-color .2s ease;}
html body.spx-public .spx-support-v139-quicklinks a:hover{background:rgba(255,255,255,.09);border-color:rgba(218,236,255,.22);}

/* KB section */
html body.spx-public .spx-kb-v139{padding:clamp(48px,7vw,80px) clamp(20px,5vw,60px);max-width:1200px;margin:0 auto;}
html body.spx-public .spx-kb-v139-head{text-align:center;margin-bottom:32px;}
html body.spx-public .spx-kb-v139-head h2{font-size:clamp(24px,3.2vw,40px);letter-spacing:-.035em;margin:8px 0 0;}

html body.spx-public .spx-kb-v139-filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:28px;}
html body.spx-public .spx-kb-filter{padding:7px 16px;border-radius:999px;border:1px solid rgba(218,236,255,.12);background:rgba(255,255,255,.04);color:var(--secondary);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .2s ease,border-color .2s ease,color .2s ease;}
html body.spx-public .spx-kb-filter:hover{background:rgba(34,211,238,.07);border-color:rgba(34,211,238,.2);color:var(--text);}
html body.spx-public .spx-kb-filter.is-active{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.3);color:rgb(34,211,238);}

html body.spx-public .spx-kb-v139-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
html body.spx-public .spx-kb-card{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:20px;background:linear-gradient(150deg,rgba(12,22,42,.82),rgba(5,10,22,.66));border:1px solid rgba(218,236,255,.08);transition:border-color .25s ease,background .25s ease,transform .25s ease,box-shadow .25s ease;cursor:default;position:relative;}
html body.spx-public .spx-kb-card:hover{border-color:rgba(34,211,238,.22);background:linear-gradient(150deg,rgba(14,26,50,.88),rgba(7,14,30,.72));transform:translateY(-3px);box-shadow:0 16px 50px rgba(0,0,0,.2),0 0 24px rgba(34,211,238,.05);}
html body.spx-public .spx-kb-card[hidden]{display:none!important;}
html body.spx-public .spx-kb-card-cat{font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:rgb(34,211,238);margin-bottom:2px;}
html body.spx-public .spx-kb-card h3{font-size:15px;font-weight:800;color:var(--text);margin:0;line-height:1.3;}
html body.spx-public .spx-kb-card p{font-size:13px;color:var(--secondary);margin:0;line-height:1.5;}
html body.spx-public .spx-kb-card-arrow{display:flex;align-items:center;margin-top:8px;color:rgb(34,211,238);opacity:.6;}
html body.spx-public .spx-kb-v139-empty{text-align:center;padding:32px;color:var(--muted);font-size:14px;}

/* KB placeholder */
html body.spx-public .spx-kb-v139-placeholder{padding:clamp(40px,6vw,70px) 24px;text-align:center;}
html body.spx-public .spx-kb-v139-placeholder-inner{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:400px;margin:0 auto;color:var(--muted);}
html body.spx-public .spx-kb-v139-placeholder-inner p{font-size:14px;line-height:1.6;margin:0;}

/* Support form v139 */
html body.spx-public .spx-support-v139-form{padding:clamp(48px,7vw,80px) clamp(20px,5vw,60px);max-width:900px;margin:0 auto;}
html body.spx-public .spx-support-v139-form-head{margin-bottom:36px;}
html body.spx-public .spx-support-v139-form-head h2{font-size:clamp(22px,3vw,36px);letter-spacing:-.035em;margin:8px 0 12px;}
html body.spx-public .spx-support-v139-form-head p{font-size:14px;line-height:1.6;color:var(--secondary);}
html body.spx-public .spx-support-v139-trust{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;}
html body.spx-public .spx-support-v139-trust span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);}
html body.spx-public .spx-support-v139-form-el{display:grid;gap:14px;}
html body.spx-public .spx-support-v139-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
html body.spx-public .spx-support-v139-grow{grid-column:1 / -1;}
html body.spx-public .spx-support-v139-form-el label{display:flex;flex-direction:column;gap:7px;font-size:12.5px;font-weight:800;color:var(--text);}
html body.spx-public .spx-support-v139-form-el input,html body.spx-public .spx-support-v139-form-el select,html body.spx-public .spx-support-v139-form-el textarea{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:16px;border:1px solid rgba(218,236,255,.1);background:rgba(255,255,255,.05);color:var(--text);font-size:14px;font-family:inherit;outline:0;transition:border-color .2s ease,box-shadow .2s ease;}
html body.spx-public .spx-support-v139-form-el input:focus,html body.spx-public .spx-support-v139-form-el select:focus,html body.spx-public .spx-support-v139-form-el textarea:focus{border-color:rgba(34,211,238,.42);box-shadow:0 0 0 3px rgba(34,211,238,.09);}

/* Support light mode */
html[data-theme="light"] body.spx-public .spx-support-v139-hero,html[data-spx-theme="light"] body.spx-public .spx-support-v139-hero{background:radial-gradient(ellipse 800px 400px at 50% 0%,rgba(14,165,233,.07),transparent 65%)!important;border-color:rgba(15,23,42,.06)!important;}
html[data-theme="light"] body.spx-public .spx-support-v139-hero h1,html[data-spx-theme="light"] body.spx-public .spx-support-v139-hero h1{background:linear-gradient(135deg,#0369a1,#0284c7 40%,#0ea5e9)!important;-webkit-background-clip:text!important;background-clip:text!important;}
html[data-theme="light"] body.spx-public .spx-support-v139-search-input,html[data-spx-theme="light"] body.spx-public .spx-support-v139-search-input{background:rgba(255,255,255,.9)!important;border-color:rgba(14,165,233,.2)!important;color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-kb-card,html[data-spx-theme="light"] body.spx-public .spx-kb-card{background:rgba(255,255,255,.88)!important;border-color:rgba(15,23,42,.07)!important;}
html[data-theme="light"] body.spx-public .spx-kb-card:hover,html[data-spx-theme="light"] body.spx-public .spx-kb-card:hover{background:rgba(255,255,255,.96)!important;border-color:rgba(14,165,233,.2)!important;}
html[data-theme="light"] body.spx-public .spx-support-v139-form-el input,html[data-theme="light"] body.spx-public .spx-support-v139-form-el select,html[data-theme="light"] body.spx-public .spx-support-v139-form-el textarea,html[data-spx-theme="light"] body.spx-public .spx-support-v139-form-el input,html[data-spx-theme="light"] body.spx-public .spx-support-v139-form-el select,html[data-spx-theme="light"] body.spx-public .spx-support-v139-form-el textarea{background:rgba(255,255,255,.9)!important;border-color:rgba(15,23,42,.1)!important;color:#0f172a!important;}

@media(max-width:680px){html body.spx-public .spx-support-v139-row{grid-template-columns:1fr!important;}html body.spx-public .spx-kb-v139-grid{grid-template-columns:1fr!important;}}

/* ============================================================
   A8.138h — Full public site polish
   ============================================================ */

/* --- Pricing title left-align fix --- */
body.spx-public .spx-pricing-v139-head{text-align:left!important;}
body.spx-public .spx-pricing-v139-head h2{text-align:left!important;}
body.spx-public .spx-pricing-v139-head p{text-align:left!important;max-width:560px;}

/* --- Pricing cards equal height --- */
html body.spx-public .spx-pricing-v139-grid{align-items:stretch!important;}
html body.spx-public .spx-pcard{height:100%;}

/* --- Feature interactive sections (spx-fint-v138h) --- */
body.spx-public .spx-fint-v138h{display:flex;align-items:center;gap:48px;padding:64px 5vw;max-width:1280px;margin:0 auto;}
body.spx-public .spx-fint-copy{flex:0 0 42%;max-width:420px;}
body.spx-public .spx-fint-stage{flex:1;min-width:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;min-height:300px;display:flex;align-items:stretch;justify-content:stretch;}
body.spx-public .spx-fint-stage > *{width:100%;}
body.spx-public .spx-fint-kicker{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--feat-c1),1);margin-bottom:10px;font-weight:600;}
body.spx-public .spx-fint-v138h h2{font-size:clamp(1.45rem,2.8vw,2.1rem);line-height:1.22;margin:0 0 14px;font-weight:700;}
body.spx-public .spx-fint-v138h > .spx-fint-copy > p,body.spx-public .spx-fint-copy > p{color:rgba(255,255,255,.68);line-height:1.7;margin:0 0 22px;font-size:.95rem;}
body.spx-public .spx-fint-tabs,.spx-public .spx-fint-steps{display:flex;gap:8px;flex-wrap:wrap;}
body.spx-public .spx-fint-tab{padding:7px 15px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:rgba(255,255,255,.65);font-size:.82rem;cursor:pointer;transition:all .18s;font-family:inherit;}
body.spx-public .spx-fint-tab:hover{background:rgba(255,255,255,.1);color:#fff;}
body.spx-public .spx-fint-tab.is-active{background:rgba(var(--feat-c1),.15);border-color:rgba(var(--feat-c1),.4);color:rgba(var(--feat-c1),1);}
body.spx-public .spx-fint-tab-descs{margin-top:14px;}
body.spx-public .spx-fint-tab-desc{color:rgba(255,255,255,.6);font-size:.87rem;line-height:1.7;margin:0;}
body.spx-public .spx-fint-step{display:flex;align-items:center;gap:8px;padding:7px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:rgba(255,255,255,.65);font-size:.82rem;cursor:pointer;transition:all .18s;font-family:inherit;}
body.spx-public .spx-fint-step.is-active{background:rgba(var(--feat-c1),.15);border-color:rgba(var(--feat-c1),.4);color:rgba(var(--feat-c1),1);}
body.spx-public .spx-fint-step-num{width:20px;height:20px;background:rgba(255,255,255,.1);border-radius:50%;font-size:.72rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
body.spx-public .spx-fint-step.is-active .spx-fint-step-num{background:rgba(var(--feat-c1),.35);}
body.spx-public .spx-fint-step-sep{display:block;width:18px;height:1px;background:rgba(255,255,255,.2);align-self:center;}

/* Builder chrome */
body.spx-public .spx-fint-builder-chrome{display:flex;flex-direction:column;height:100%;}
body.spx-public .spx-fint-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08);}
body.spx-public .spx-fint-bar-logo{width:22px;height:22px;background:rgba(var(--feat-c1),.2);border:1px solid rgba(var(--feat-c1),.3);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:rgba(var(--feat-c1),1);}
body.spx-public .spx-fint-bar-devchips{display:flex;gap:4px;}
body.spx-public .spx-fint-devchip{padding:3px 8px;background:rgba(255,255,255,.05);border-radius:4px;font-size:.72rem;color:rgba(255,255,255,.45);cursor:pointer;transition:all .15s;}
body.spx-public .spx-fint-devchip.is-a{background:rgba(var(--feat-c1),.15);color:rgba(var(--feat-c1),1);}
body.spx-public .spx-fint-bar-status{margin-left:auto;font-size:.68rem;color:rgba(255,255,255,.35);}
body.spx-public .spx-fint-builder-body{display:flex;flex:1;min-height:240px;}
body.spx-public .spx-fint-canvas-wrap{flex:1;padding:14px;overflow:hidden;}
body.spx-public .spx-fint-mock-hero{margin-bottom:12px;}
body.spx-public .spx-fint-mock-h1{height:13px;background:rgba(255,255,255,.22);border-radius:3px;width:72%;margin-bottom:7px;}
body.spx-public .spx-fint-mock-p{height:7px;background:rgba(255,255,255,.1);border-radius:3px;width:88%;margin-bottom:6px;}
body.spx-public .spx-fint-mock-btn{height:24px;background:rgba(var(--feat-c1),.3);border-radius:4px;width:90px;}
body.spx-public .spx-fint-mock-cards,.spx-public .spx-fint-mock-cards--3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
body.spx-public .spx-fint-mock-cards--2{grid-template-columns:repeat(2,1fr)!important;}
body.spx-public .spx-fint-mock-cards--1{grid-template-columns:1fr!important;}
body.spx-public .spx-fint-mock-cards > div,.spx-public .spx-fint-mock-cards--2 > div,.spx-public .spx-fint-mock-cards--1 > div,.spx-public .spx-fint-mock-cards--3 > div{height:48px;background:rgba(255,255,255,.07);border-radius:5px;}
body.spx-public .spx-fint-insp{width:110px;border-left:1px solid rgba(255,255,255,.07);padding:12px 8px;display:flex;flex-direction:column;gap:9px;flex-shrink:0;}
body.spx-public .spx-fint-insp-row{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;}
body.spx-public .spx-fint-insp-row small{color:rgba(255,255,255,.38);}
body.spx-public .spx-fint-insp-row b{color:rgba(255,255,255,.8);font-weight:500;font-size:.68rem;}
body.spx-public .spx-fint-swatch{display:inline-block;width:13px;height:13px;border-radius:3px;}

/* Export pipeline */
body.spx-public .spx-fint-pipeline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;padding:28px 20px;}
body.spx-public .spx-fint-pipe-node{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;}
body.spx-public .spx-fint-pipe-node--build{border-color:rgba(var(--feat-c1),.35);background:rgba(var(--feat-c1),.08);}
body.spx-public .spx-fint-pipe-node--review{border-color:rgba(255,255,255,.14);}
body.spx-public .spx-fint-pipe-icon{font-size:1rem;margin-bottom:2px;}
body.spx-public .spx-fint-pipe-node b{font-size:.78rem;}
body.spx-public .spx-fint-pipe-arr{width:18px;height:1px;background:rgba(255,255,255,.25);position:relative;flex-shrink:0;}
body.spx-public .spx-fint-pipe-arr::after{content:"›";position:absolute;right:-5px;top:-9px;font-size:14px;color:rgba(255,255,255,.35);}
body.spx-public .spx-fint-pipe-fork{display:flex;flex-direction:column;gap:6px;}
body.spx-public .spx-fint-pipe-output{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:8px;font-size:.76rem;opacity:.45;transition:all .22s;}
body.spx-public .spx-fint-pipe-output.is-active{opacity:1;background:rgba(var(--feat-c1),.12);border-color:rgba(var(--feat-c1),.35);}
body.spx-public .spx-fint-pipe-output b{font-weight:600;}
body.spx-public .spx-fint-pipe-output small{color:rgba(255,255,255,.45);display:block;}

/* WP step panels */
body.spx-public .spx-fint-wp-panels{padding:22px;display:flex;flex-direction:column;gap:0;}
body.spx-public .spx-fint-wp-panel{display:flex;flex-direction:column;gap:14px;}
body.spx-public .spx-fint-wp-canvas{padding:14px;background:rgba(255,255,255,.04);border-radius:8px;}
body.spx-public .spx-fint-wp-label{display:flex;align-items:center;gap:10px;}
body.spx-public .spx-fint-wp-src-logo{width:28px;height:28px;background:rgba(var(--feat-c1),.2);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem;color:rgba(var(--feat-c1),1);flex-shrink:0;}
body.spx-public .spx-fint-wp-label b{font-size:.88rem;display:block;}
body.spx-public .spx-fint-wp-label small{font-size:.72rem;color:rgba(255,255,255,.45);display:block;}
body.spx-public .spx-fint-transfer{display:flex;align-items:center;gap:12px;padding:16px;background:rgba(255,255,255,.03);border-radius:10px;}
body.spx-public .spx-fint-transfer-from,.spx-public .spx-fint-transfer-to{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;background:rgba(255,255,255,.06);border-radius:10px;}
body.spx-public .spx-fint-transfer-from span,.spx-public .spx-fint-transfer-to span{width:26px;height:26px;background:rgba(var(--feat-c1),.15);border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;}
body.spx-public .spx-fint-transfer-from small,.spx-public .spx-fint-transfer-to small{font-size:.68rem;color:rgba(255,255,255,.45);}
body.spx-public .spx-fint-transfer-rail{flex:1;height:2px;background:linear-gradient(90deg,rgba(var(--feat-c1),.7),rgba(var(--feat-c1),.15));position:relative;border-radius:1px;}
body.spx-public .spx-fint-transfer-rail::after{content:"›";position:absolute;right:-4px;top:-10px;font-size:16px;color:rgba(var(--feat-c1),.7);}
body.spx-public .spx-fint-wp-tree{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;}
body.spx-public .spx-fint-ft-folder,.spx-public .spx-fint-ft-file{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:4px;font-size:.78rem;}
body.spx-public .spx-fint-ft-file{background:rgba(255,255,255,.04);}
body.spx-public .spx-fint-ft-folder{color:rgba(255,255,255,.5);}
body.spx-public .spx-fint-ft-indent{padding-left:20px;}
body.spx-public .spx-fint-ft-css{background:rgba(41,98,255,.22);color:#4979ff;width:15px;height:15px;display:flex;align-items:center;justify-content:center;border-radius:3px;font-size:.6rem;font-weight:700;flex-shrink:0;}
body.spx-public .spx-fint-ft-php{background:rgba(103,58,183,.22);color:#9c6cf5;width:15px;height:15px;display:flex;align-items:center;justify-content:center;border-radius:3px;font-size:.6rem;font-weight:700;flex-shrink:0;}

/* File type icons (shared) */
body.spx-public .spx-fint-ft-ico{width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:3px;font-size:.62rem;font-weight:700;flex-shrink:0;}
body.spx-public .spx-fint-ft-ico--html{background:rgba(239,108,0,.22);color:#ef6c00;}
body.spx-public .spx-fint-ft-ico--css{background:rgba(41,98,255,.22);color:#4979ff;}
body.spx-public .spx-fint-ft-ico--js{background:rgba(251,192,45,.22);color:#fbc02d;}
body.spx-public .spx-fint-ft-ico--img{background:rgba(76,175,80,.22);color:#4caf50;}
body.spx-public .spx-fint-ft-item{display:flex;align-items:center;gap:6px;padding:5px 6px;background:rgba(255,255,255,.04);border-radius:4px;font-size:.77rem;}
body.spx-public .spx-fint-ft-item[hidden]{display:none!important;}

/* Forms panels */
body.spx-public .spx-fint-forms-panels{padding:20px;}
body.spx-public .spx-fint-form-mock{display:flex;flex-direction:column;gap:10px;}
body.spx-public .spx-fint-field{display:flex;flex-direction:column;gap:4px;}
body.spx-public .spx-fint-field small{font-size:.7rem;color:rgba(255,255,255,.45);}
body.spx-public .spx-fint-finput{display:block;height:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:5px;}
body.spx-public .spx-fint-field--area .spx-fint-finput{height:56px;}
body.spx-public .spx-fint-fsend{height:30px;background:rgba(var(--feat-c1),.22);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:rgba(var(--feat-c1),1);font-weight:600;}
body.spx-public .spx-fint-sub-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
body.spx-public .spx-fint-sub-row{display:flex;align-items:center;gap:10px;padding:7px 10px;background:rgba(255,255,255,.04);border-radius:6px;font-size:.78rem;}
body.spx-public .spx-fint-sub-row.is-new{background:rgba(var(--feat-c1),.07);border:1px solid rgba(var(--feat-c1),.15);}
body.spx-public .spx-fint-sub-dot{width:6px;height:6px;background:rgba(var(--feat-c1),1);border-radius:50%;flex-shrink:0;}
body.spx-public .spx-fint-sub-row > div{flex:1;}
body.spx-public .spx-fint-sub-row b{font-size:.78rem;display:block;}
body.spx-public .spx-fint-sub-row small{font-size:.68rem;color:rgba(255,255,255,.45);}
body.spx-public .spx-fint-sub-time{font-size:.68rem;color:rgba(255,255,255,.3);}
body.spx-public .spx-fint-sub-footer{display:flex;justify-content:space-between;font-size:.72rem;color:rgba(255,255,255,.4);}
body.spx-public .spx-fint-sub-export{color:rgba(var(--feat-c1),.7);}
body.spx-public .spx-fint-wf-steps{display:flex;align-items:flex-start;gap:6px;}
body.spx-public .spx-fint-wf-step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;text-align:center;}
body.spx-public .spx-fint-wf-icon{width:22px;height:22px;background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;color:rgba(255,255,255,.5);}
body.spx-public .spx-fint-wf-step.is-done .spx-fint-wf-icon{background:rgba(var(--feat-c1),.25);color:rgba(var(--feat-c1),1);}
body.spx-public .spx-fint-wf-icon--pend{opacity:.4;}
body.spx-public .spx-fint-wf-step b{font-size:.75rem;}
body.spx-public .spx-fint-wf-step small{font-size:.65rem;color:rgba(255,255,255,.4);}
body.spx-public .spx-fint-wf-arr{width:14px;height:1px;background:rgba(255,255,255,.18);flex-shrink:0;margin-top:11px;}

/* Files shell */
body.spx-public .spx-fint-files-shell{padding:20px;}
body.spx-public .spx-fint-files-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
body.spx-public .spx-fint-fthumb{aspect-ratio:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:8px;display:flex;align-items:flex-end;overflow:hidden;position:relative;}
body.spx-public .spx-fint-fthumb--img{background:linear-gradient(135deg,rgba(var(--feat-c1),.1),rgba(255,255,255,.03));}
body.spx-public .spx-fint-fthumb--doc{background:linear-gradient(135deg,rgba(103,58,183,.1),rgba(255,255,255,.03));}
body.spx-public .spx-fint-fthumb--folder{align-items:center;justify-content:center;}
body.spx-public .spx-fint-fthumb[hidden]{display:none!important;}
body.spx-public .spx-fint-fthumb-label{width:100%;background:rgba(0,0,0,.45);font-size:.6rem;color:rgba(255,255,255,.7);padding:3px 5px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
body.spx-public .spx-fint-fthumb--folder .spx-fint-fthumb-label{position:relative;background:transparent;color:rgba(255,255,255,.5);text-align:center;}
body.spx-public .spx-fint-storage small{font-size:.7rem;color:rgba(255,255,255,.45);display:block;margin-bottom:5px;}
body.spx-public .spx-fint-storage-bar{height:4px;background:rgba(255,255,255,.08);border-radius:2px;}
body.spx-public .spx-fint-storage-fill{height:100%;background:rgba(var(--feat-c1),1);border-radius:2px;}

/* Share panels */
body.spx-public .spx-fint-share-panels{padding:18px;}
body.spx-public .spx-fint-share-frame{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:10px;overflow:hidden;}
body.spx-public .spx-fint-share-topbar{display:flex;align-items:center;gap:10px;padding:7px 12px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07);}
body.spx-public .spx-fint-share-link-pill{font-size:.68rem;color:rgba(255,255,255,.45);background:rgba(255,255,255,.05);padding:2px 8px;border-radius:4px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.spx-public .spx-fint-share-badge{font-size:.68rem;padding:2px 8px;border-radius:4px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.55);}
body.spx-public .spx-fint-share-badge--approved{background:rgba(76,175,80,.2);color:#4caf50;}
body.spx-public .spx-fint-share-page{padding:12px;}
body.spx-public .spx-fint-share-page .spx-fint-mock-h1{width:65%;}
body.spx-public .spx-fint-share-comments{padding:8px 12px;border-top:1px solid rgba(255,255,255,.07);}
body.spx-public .spx-fint-share-comment{display:flex;gap:8px;align-items:flex-start;}
body.spx-public .spx-fint-share-avatar{width:22px;height:22px;background:rgba(var(--feat-c1),.2);border-radius:50%;flex-shrink:0;}
body.spx-public .spx-fint-share-comment-body b{font-size:.72rem;color:rgba(255,255,255,.75);display:block;margin-bottom:2px;}
body.spx-public .spx-fint-share-comment-body p{font-size:.72rem;color:rgba(255,255,255,.5);margin:0;line-height:1.5;}
body.spx-public .spx-fint-share-approved{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid rgba(76,175,80,.2);background:rgba(76,175,80,.05);}
body.spx-public .spx-fint-share-approved-icon{width:22px;height:22px;background:rgba(76,175,80,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#4caf50;font-size:.75rem;flex-shrink:0;}
body.spx-public .spx-fint-share-approved b{font-size:.8rem;display:block;}
body.spx-public .spx-fint-share-approved small{font-size:.7rem;color:rgba(255,255,255,.45);}

/* ZIP shell */
body.spx-public .spx-fint-zip-shell{padding:20px;}
body.spx-public .spx-fint-zip-hd{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:.85rem;font-weight:600;}
body.spx-public .spx-fint-zip-icon{font-size:1.1rem;}
body.spx-public .spx-fint-filetree{display:flex;flex-direction:column;gap:2px;margin-bottom:12px;}
body.spx-public .spx-fint-zip-footer{display:flex;justify-content:space-between;font-size:.72rem;color:rgba(255,255,255,.4);padding-top:8px;border-top:1px solid rgba(255,255,255,.06);}
body.spx-public .spx-fint-zip-size{color:rgba(255,255,255,.28);}

/* Project dashboard */
body.spx-public .spx-fint-pd-shell{display:flex;min-height:260px;}
body.spx-public .spx-fint-pd-sidebar{width:68px;border-right:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px;flex-shrink:0;}
body.spx-public .spx-fint-pd-logo{width:24px;height:24px;background:rgba(var(--feat-c1),.2);border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.72rem;color:rgba(var(--feat-c1),1);margin-bottom:8px;}
body.spx-public .spx-fint-pd-nav{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px;border-radius:6px;}
body.spx-public .spx-fint-pd-nav span{width:20px;height:3px;background:rgba(255,255,255,.13);border-radius:2px;}
body.spx-public .spx-fint-pd-nav small{font-size:.57rem;color:rgba(255,255,255,.35);}
body.spx-public .spx-fint-pd-nav.is-a span{background:rgba(var(--feat-c1),.6);}
body.spx-public .spx-fint-pd-nav.is-a small{color:rgba(var(--feat-c1),.75);}
body.spx-public .spx-fint-pd-main{flex:1;padding:16px;}
body.spx-public .spx-fint-pd-card{display:flex;gap:12px;padding:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;}
body.spx-public .spx-fint-pd-card.is-a{border-color:rgba(var(--feat-c1),.3);background:rgba(var(--feat-c1),.06);}
body.spx-public .spx-fint-pd-thumb{width:50px;height:50px;background:rgba(var(--feat-c1),.15);border-radius:6px;flex-shrink:0;}
body.spx-public .spx-fint-pd-info b{font-size:.84rem;display:block;margin-bottom:2px;}
body.spx-public .spx-fint-pd-info small{font-size:.7rem;color:rgba(255,255,255,.45);display:block;margin-bottom:8px;}
body.spx-public .spx-fint-pd-acts{display:flex;gap:5px;flex-wrap:wrap;}
body.spx-public .spx-fint-pd-acts span{font-size:.7rem;padding:4px 8px;background:rgba(255,255,255,.08);border-radius:4px;color:rgba(255,255,255,.65);}

/* Command center (dashboard feature page) */
body.spx-public .spx-fint-cmd-shell{display:flex;min-height:260px;}
body.spx-public .spx-fint-cmd-sidebar{width:72px;border-right:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:6px;flex-shrink:0;}
body.spx-public .spx-fint-cmd-logo{width:24px;height:24px;background:rgba(var(--feat-c1),.2);border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.72rem;color:rgba(var(--feat-c1),1);margin-bottom:8px;}
body.spx-public .spx-fint-cmd-nav{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px;border-radius:6px;cursor:pointer;}
body.spx-public .spx-fint-cmd-nav span{width:20px;height:3px;background:rgba(255,255,255,.12);border-radius:2px;}
body.spx-public .spx-fint-cmd-nav small{font-size:.55rem;color:rgba(255,255,255,.32);}
body.spx-public .spx-fint-cmd-nav.is-a span{background:rgba(var(--feat-c1),.6);}
body.spx-public .spx-fint-cmd-nav.is-a small{color:rgba(var(--feat-c1),.7);}
body.spx-public .spx-fint-cmd-content{flex:1;padding:14px;}
body.spx-public .spx-fint-cmd-stats{display:flex;gap:7px;}
body.spx-public .spx-fint-cmd-stat{flex:1;padding:10px;background:rgba(255,255,255,.05);border-radius:8px;text-align:center;}
body.spx-public .spx-fint-cmd-stat b{font-size:.95rem;display:block;}
body.spx-public .spx-fint-cmd-stat small{font-size:.65rem;color:rgba(255,255,255,.45);}
body.spx-public .spx-fint-cmd-proj-list{display:flex;flex-direction:column;gap:5px;}
body.spx-public .spx-fint-cmd-proj-row{display:flex;align-items:center;gap:8px;padding:7px;background:rgba(255,255,255,.04);border-radius:6px;font-size:.77rem;}
body.spx-public .spx-fint-cmd-proj-dot{width:6px;height:6px;background:rgba(255,255,255,.18);border-radius:50%;}
body.spx-public .spx-fint-cmd-proj-dot.is-live{background:#4caf50;}
body.spx-public .spx-fint-cmd-proj-row b{flex:1;}
body.spx-public .spx-fint-cmd-proj-open{font-size:.68rem;color:rgba(var(--feat-c1),.65);}
body.spx-public .spx-fint-cmd-files-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
body.spx-public .spx-fint-cmd-fthumb{aspect-ratio:4/3;background:rgba(var(--feat-c1),.1);border-radius:6px;}
body.spx-public .spx-fint-cmd-fthumb--folder{background:rgba(255,255,255,.05);display:flex;align-items:flex-end;padding:4px;}
body.spx-public .spx-fint-cmd-fthumb--folder small{font-size:.62rem;color:rgba(255,255,255,.35);}
body.spx-public .spx-fint-cmd-sup{display:flex;flex-direction:column;gap:6px;}
body.spx-public .spx-fint-cmd-sup-row{display:flex;align-items:center;gap:10px;padding:9px;background:rgba(255,255,255,.04);border-radius:8px;}
body.spx-public .spx-fint-cmd-sup-icon{width:26px;height:26px;background:rgba(var(--feat-c1),.12);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;color:rgba(var(--feat-c1),.8);}
body.spx-public .spx-fint-cmd-sup-row b{font-size:.78rem;display:block;}
body.spx-public .spx-fint-cmd-sup-row small{font-size:.68rem;color:rgba(255,255,255,.4);}

/* SEO panels */
body.spx-public .spx-fint-seo-panels{padding:22px;}
body.spx-public .spx-fint-seo-score-wrap{display:flex;align-items:center;gap:18px;}
body.spx-public .spx-fint-seo-score-label b{font-size:.88rem;display:block;margin-bottom:4px;}
body.spx-public .spx-fint-seo-score-label small{font-size:.72rem;color:rgba(255,255,255,.45);}
body.spx-public .spx-fint-seo-checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;}
body.spx-public .spx-fint-seo-check{display:flex;align-items:center;gap:8px;font-size:.78rem;}
body.spx-public .spx-fint-seo-chk-ico{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.62rem;flex-shrink:0;}
body.spx-public .spx-fint-seo-check--ok .spx-fint-seo-chk-ico{background:rgba(76,175,80,.2);color:#4caf50;}
body.spx-public .spx-fint-seo-check--warn .spx-fint-seo-chk-ico{background:rgba(251,192,45,.2);color:#fbc02d;}
body.spx-public .spx-fint-seo-check--err .spx-fint-seo-chk-ico{background:rgba(239,83,80,.2);color:#ef5350;}
body.spx-public .spx-fint-seo-serp{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px 14px;}
body.spx-public .spx-fint-serp-url{font-size:.7rem;color:#4caf50;margin-bottom:3px;}
body.spx-public .spx-fint-serp-title{font-size:.88rem;color:#8ab4f8;margin-bottom:4px;font-weight:500;}
body.spx-public .spx-fint-serp-desc{font-size:.73rem;color:rgba(255,255,255,.5);line-height:1.55;}

/* Generic fallback */
body.spx-public .spx-fint-generic-visual{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px;}
body.spx-public .spx-fint-gv-logo{width:40px;height:40px;background:rgba(var(--feat-c1),.15);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;color:rgba(var(--feat-c1),1);}
body.spx-public .spx-fint-generic-visual small{font-size:.72rem;color:rgba(255,255,255,.35);}

/* --- spx-fhow-v138h: Horizontal how-it-works steps --- */
body.spx-public .spx-fhow-v138h{padding:48px 5vw 64px;max-width:1280px;margin:0 auto;}
body.spx-public .spx-fhow-head{margin-bottom:36px;}
body.spx-public .spx-fhow-head .eyebrow{display:block;margin-bottom:8px;}
body.spx-public .spx-fhow-head h2{font-size:clamp(1.35rem,2.5vw,1.9rem);margin:0;font-weight:700;}
body.spx-public .spx-fhow-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;}
body.spx-public .spx-fhow-step{position:relative;padding:26px 22px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:10px;transition:border-color .2s;}
body.spx-public .spx-fhow-step:first-child{border-left:3px solid rgba(var(--feat-c1),.55);}
body.spx-public .spx-fhow-num{font-size:2.2rem;font-weight:800;line-height:1;color:rgba(var(--feat-c1),.28);letter-spacing:-.02em;margin-bottom:14px;display:block;}
body.spx-public .spx-fhow-step h3{font-size:.9rem;margin:0 0 7px;font-weight:600;}
body.spx-public .spx-fhow-step p{font-size:.8rem;color:rgba(255,255,255,.55);margin:0;line-height:1.6;}

/* --- Footer (spx-footer-v138h) --- */
body.spx-public .spx-footer-v138h{padding:64px 5vw 0;border-top:1px solid rgba(255,255,255,.07);margin-top:80px;}
body.spx-public .spx-footer-v138h-inner{display:flex;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.06);}
body.spx-public .spx-footer-v138h-brand{flex:0 0 220px;max-width:240px;}
body.spx-public .spx-footer-v138h-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;font-weight:700;font-size:1rem;margin-bottom:12px;}
body.spx-public .spx-footer-v138h-logo-mark{width:28px;height:28px;background:rgba(255,255,255,.12);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;color:#fff;border:1px solid rgba(255,255,255,.15);}
body.spx-public .spx-footer-v138h-tagline{font-size:.82rem;color:rgba(255,255,255,.5);line-height:1.6;margin:0 0 16px;}
body.spx-public .spx-footer-v138h-alpha-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:4px 10px;font-size:.72rem;color:rgba(255,255,255,.6);margin-bottom:10px;}
body.spx-public .spx-footer-v138h-alpha-dot{width:6px;height:6px;background:#4caf50;border-radius:50%;animation:fspulse 2s ease infinite;}
@keyframes fspulse{0%,100%{opacity:1}50%{opacity:.35}}
body.spx-public .spx-footer-v138h-alpha-note{font-size:.72rem;color:rgba(255,255,255,.38);line-height:1.5;margin:0;}
body.spx-public .spx-footer-v138h-nav{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:32px;}
body.spx-public .spx-footer-v138h-col strong{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:14px;font-weight:600;}
body.spx-public .spx-footer-v138h-col a{display:block;font-size:.82rem;color:rgba(255,255,255,.55);text-decoration:none;margin-bottom:8px;transition:color .18s;}
body.spx-public .spx-footer-v138h-col a:hover{color:rgba(255,255,255,.88);}
body.spx-public .spx-footer-v138h-bottom{display:flex;align-items:center;justify-content:space-between;padding:16px 0;font-size:.75rem;}
body.spx-public .spx-footer-v138h-copy{color:rgba(255,255,255,.35);}
body.spx-public .spx-footer-v138h-built{color:rgba(255,255,255,.22);}

/* --- Alpha section (spx-alpha-v138h) --- */
body.spx-public .spx-alpha-v138h{padding:64px 5vw;max-width:1280px;margin:0 auto;border-top:1px solid rgba(255,255,255,.06);}
body.spx-public .spx-alpha-v138h-inner{display:flex;gap:48px;align-items:flex-start;}
body.spx-public .spx-alpha-v138h-copy{flex:0 0 42%;}
body.spx-public .spx-alpha-v138h-status{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
body.spx-public .spx-alpha-v138h-dot{width:7px;height:7px;background:#4caf50;border-radius:50%;animation:fspulse 2s ease infinite;}
body.spx-public .spx-alpha-v138h-status span:last-child{font-size:.8rem;color:rgba(255,255,255,.55);}
body.spx-public .spx-alpha-v138h-copy h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:0 0 10px;font-weight:700;}
body.spx-public .spx-alpha-v138h-copy > p{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.7;margin:0 0 24px;}
body.spx-public .spx-alpha-v138h-signals{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;}
body.spx-public .spx-alpha-v138h-signal{display:flex;align-items:flex-start;gap:12px;}
body.spx-public .spx-alpha-v138h-signal-icon{width:32px;height:32px;background:rgba(255,255,255,.06);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(255,255,255,.1);}
body.spx-public .spx-alpha-v138h-signal-icon svg{width:16px;height:16px;color:rgba(255,255,255,.6);}
body.spx-public .spx-alpha-v138h-signal-body b{font-size:.84rem;display:block;margin-bottom:2px;}
body.spx-public .spx-alpha-v138h-signal-body p{font-size:.78rem;color:rgba(255,255,255,.5);margin:0;line-height:1.5;}
body.spx-public .spx-alpha-v138h-actions{display:flex;gap:10px;flex-wrap:wrap;}
body.spx-public .spx-alpha-v138h-panel{flex:1;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:28px;}
body.spx-public .spx-alpha-v138h-panel-head{margin-bottom:16px;}
body.spx-public .spx-alpha-v138h-panel-kicker{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);display:block;margin-bottom:6px;}
body.spx-public .spx-alpha-v138h-panel-head h3{font-size:1rem;margin:0;font-weight:600;}
body.spx-public .spx-alpha-v138h-topics{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:16px;}
body.spx-public .spx-alpha-v138h-topic{padding:10px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:rgba(255,255,255,.65);font-size:.8rem;cursor:pointer;text-align:left;transition:all .18s;font-family:inherit;}
body.spx-public .spx-alpha-v138h-topic:hover{background:rgba(255,255,255,.09);color:#fff;}
body.spx-public .spx-alpha-v138h-topic.is-active{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff;}
body.spx-public .spx-alpha-v138h-copy-out{font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.65;margin:0 0 16px;}
body.spx-public .spx-alpha-v138h-panel-cta{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:rgba(255,255,255,.55);text-decoration:none;transition:color .18s;}
body.spx-public .spx-alpha-v138h-panel-cta:hover{color:rgba(255,255,255,.9);}
body.spx-public .spx-alpha-v138h-panel-cta-arrow{opacity:.5;}

/* --- Updates page --- */
body.spx-public .spx-updates-hero-v138h{padding:64px 5vw 40px;max-width:1280px;margin:0 auto;}
body.spx-public .spx-updates-hero-v138h-status{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
body.spx-public .spx-updates-hero-v138h-dot{width:7px;height:7px;background:#4caf50;border-radius:50%;animation:fspulse 2s ease infinite;}
body.spx-public .spx-updates-hero-v138h-status span:last-child{font-size:.82rem;color:rgba(255,255,255,.5);}
body.spx-public .spx-updates-hero-v138h h1{font-size:clamp(1.8rem,4vw,2.8rem);margin:.4rem 0 .6rem;font-weight:800;}
body.spx-public .spx-updates-hero-v138h p{font-size:1rem;color:rgba(255,255,255,.6);max-width:560px;margin:0;line-height:1.7;}
body.spx-public .spx-updates-system-card-v138h{display:flex;align-items:flex-start;gap:16px;padding:18px 24px;background:rgba(251,192,45,.07);border:1px solid rgba(251,192,45,.2);border-radius:10px;margin:0 5vw 24px;max-width:1240px;}
body.spx-public .spx-updates-system-icon{width:28px;height:28px;color:rgba(251,192,45,.8);flex-shrink:0;}
body.spx-public .spx-updates-system-card-v138h strong{display:block;font-size:.9rem;margin-bottom:4px;}
body.spx-public .spx-updates-system-card-v138h p{font-size:.82rem;color:rgba(255,255,255,.6);margin:0;line-height:1.5;}
body.spx-public .spx-updates-pinned-v138h{display:flex;gap:0;align-items:stretch;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;margin:0 5vw 32px;max-width:1240px;}
body.spx-public .spx-updates-pinned-v138h-inner{flex:1;padding:32px 36px;}
body.spx-public .spx-updates-pinned-meta{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
body.spx-public .spx-updates-pinned-label{display:flex;align-items:center;gap:5px;font-size:.72rem;color:rgba(255,255,255,.45);}
body.spx-public .spx-updates-pinned-cat{font-size:.72rem;background:rgba(255,255,255,.08);border-radius:4px;padding:2px 8px;color:rgba(255,255,255,.55);}
body.spx-public .spx-updates-pinned-date{font-size:.72rem;color:rgba(255,255,255,.35);}
body.spx-public .spx-updates-pinned-v138h h2{font-size:clamp(1.2rem,2vw,1.6rem);margin:0 0 10px;font-weight:700;}
body.spx-public .spx-updates-pinned-v138h p{font-size:.88rem;color:rgba(255,255,255,.6);line-height:1.7;margin:0 0 18px;max-width:540px;}
body.spx-public .spx-updates-pinned-cta{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:rgba(255,255,255,.65);text-decoration:none;transition:color .18s;}
body.spx-public .spx-updates-pinned-cta:hover{color:#fff;}
body.spx-public .spx-updates-pinned-v138h-thumb{width:220px;background:rgba(255,255,255,.04);flex-shrink:0;}
body.spx-public .spx-updates-body-v138h{padding:0 5vw;max-width:1280px;margin:0 auto;}
body.spx-public .spx-updates-filter-row-v138h{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;}
body.spx-public .spx-ufilter{padding:7px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:20px;color:rgba(255,255,255,.6);font-size:.8rem;cursor:pointer;transition:all .18s;font-family:inherit;}
body.spx-public .spx-ufilter:hover{background:rgba(255,255,255,.1);color:#fff;}
body.spx-public .spx-ufilter.is-active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff;}
body.spx-public .spx-updates-grid-v138h{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:32px;}
body.spx-public .spx-ucard-v138h{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;overflow:hidden;transition:border-color .2s,transform .2s;}
body.spx-public .spx-ucard-v138h:hover{border-color:rgba(255,255,255,.14);transform:translateY(-2px);}
body.spx-public .spx-ucard-v138h[hidden]{display:none!important;}
body.spx-public .spx-ucard-v138h-thumb{height:120px;background:rgba(255,255,255,.04);}
body.spx-public .spx-ucard-v138h-body{padding:18px 20px;}
body.spx-public .spx-ucard-v138h-meta{display:flex;gap:10px;margin-bottom:10px;}
body.spx-public .spx-ucard-v138h-cat{font-size:.7rem;background:rgba(255,255,255,.08);border-radius:4px;padding:2px 8px;color:rgba(255,255,255,.5);}
body.spx-public .spx-ucard-v138h-date{font-size:.7rem;color:rgba(255,255,255,.3);}
body.spx-public .spx-ucard-v138h h3{font-size:.9rem;margin:0 0 7px;font-weight:600;}
body.spx-public .spx-ucard-v138h p{font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.6;margin:0 0 14px;}
body.spx-public .spx-ucard-v138h-link{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:rgba(255,255,255,.5);text-decoration:none;transition:color .18s;}
body.spx-public .spx-ucard-v138h-link:hover{color:rgba(255,255,255,.88);}
body.spx-public .spx-updates-empty-v138h{padding:32px 0 24px;text-align:center;}
body.spx-public .spx-updates-empty-v138h-inner{display:inline-flex;flex-direction:column;align-items:center;gap:10px;max-width:380px;}
body.spx-public .spx-updates-empty-v138h svg{color:rgba(255,255,255,.25);}
body.spx-public .spx-updates-empty-v138h h3{font-size:1rem;margin:0;font-weight:600;}
body.spx-public .spx-updates-empty-v138h p{font-size:.83rem;color:rgba(255,255,255,.5);line-height:1.6;margin:0;}
body.spx-public .spx-updates-cta-v138h{padding:32px 0 48px;text-align:center;border-top:1px solid rgba(255,255,255,.06);margin-top:16px;}
body.spx-public .spx-updates-cta-v138h p{font-size:.85rem;color:rgba(255,255,255,.45);margin:0 0 12px;}

/* --- Support CTA section --- */
body.spx-public .spx-support-cta-v138h{padding:48px 5vw;max-width:1280px;margin:0 auto;}
body.spx-public .spx-support-cta-v138h-inner{display:flex;gap:40px;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:36px;}
body.spx-public .spx-support-cta-v138h-copy{flex:1;}
body.spx-public .spx-support-cta-v138h-copy h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:0 0 10px;font-weight:700;}
body.spx-public .spx-support-cta-v138h-copy p{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.7;margin:0 0 18px;}
body.spx-public .spx-support-cta-v138h-trust{display:flex;gap:16px;flex-wrap:wrap;}
body.spx-public .spx-support-cta-v138h-trust span{font-size:.78rem;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:5px;}
body.spx-public .spx-support-cta-v138h-trust svg{width:14px;height:14px;color:rgba(255,255,255,.35);}
body.spx-public .spx-support-cta-v138h-info{flex:0 0 280px;}
body.spx-public .spx-support-cta-v138h-info h3{font-size:.9rem;font-weight:600;margin:0 0 14px;}
body.spx-public .spx-support-cta-v138h-contacts{display:flex;flex-direction:column;gap:10px;}
body.spx-public .spx-support-cta-v138h-contact{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.05);border-radius:8px;}
body.spx-public .spx-support-cta-v138h-contact svg{width:16px;height:16px;color:rgba(255,255,255,.45);flex-shrink:0;}
body.spx-public .spx-support-cta-v138h-contact b{font-size:.82rem;display:block;}
body.spx-public .spx-support-cta-v138h-contact small{font-size:.72rem;color:rgba(255,255,255,.45);}

/* --- Ticket modal (spx-ticket-modal-v138h) --- */
body.spx-public .spx-ticket-modal-v138h{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;}
body.spx-public .spx-ticket-modal-v138h[hidden]{display:none!important;}
body.spx-public .spx-ticket-modal-v138h-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);}
body.spx-public .spx-ticket-modal-v138h-dialog{position:relative;z-index:1;background:#0f172a;border:1px solid rgba(255,255,255,.1);border-radius:16px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,.6);}
body.spx-public .spx-ticket-modal-v138h-header{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px 16px;border-bottom:1px solid rgba(255,255,255,.07);}
body.spx-public .spx-ticket-modal-v138h-title-row{display:flex;align-items:center;gap:12px;}
body.spx-public .spx-ticket-modal-v138h-icon{width:36px;height:36px;background:rgba(255,255,255,.07);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
body.spx-public .spx-ticket-modal-v138h-icon svg{width:18px;height:18px;color:rgba(255,255,255,.7);}
body.spx-public .spx-ticket-modal-v138h-eyebrow{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);display:block;margin-bottom:3px;}
body.spx-public .spx-ticket-modal-v138h-header h3{font-size:1rem;margin:0;font-weight:600;}
body.spx-public .spx-ticket-modal-v138h-close{background:transparent;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);border-radius:6px;cursor:pointer;transition:all .18s;flex-shrink:0;}
body.spx-public .spx-ticket-modal-v138h-close:hover{background:rgba(255,255,255,.08);color:#fff;}
body.spx-public .spx-ticket-modal-v138h-steps{display:flex;align-items:center;padding:14px 24px;gap:6px;border-bottom:1px solid rgba(255,255,255,.06);}
body.spx-public .spx-ticket-step{display:flex;align-items:center;gap:6px;font-size:.78rem;color:rgba(255,255,255,.4);padding:4px 6px;}
body.spx-public .spx-ticket-step span{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:.7rem;}
body.spx-public .spx-ticket-step.is-active{color:rgba(255,255,255,.85);}
body.spx-public .spx-ticket-step.is-active span{background:rgba(59,130,246,.3);color:#93c5fd;}
body.spx-public .spx-ticket-step.is-done span{background:rgba(76,175,80,.25);color:#4caf50;}
body.spx-public .spx-ticket-step-sep{flex:1;height:1px;background:rgba(255,255,255,.08);min-width:12px;}
body.spx-public .spx-ticket-modal-v138h-form{padding:0;}
body.spx-public .spx-ticket-step-body{padding:20px 24px;}
body.spx-public .spx-ticket-step-hint{font-size:.83rem;color:rgba(255,255,255,.55);margin:0 0 16px;line-height:1.5;}
body.spx-public .spx-ticket-topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:0;}
body.spx-public .spx-ticket-topic{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:rgba(255,255,255,.65);font-size:.78rem;cursor:pointer;transition:all .18s;font-family:inherit;text-align:center;}
body.spx-public .spx-ticket-topic:hover{background:rgba(255,255,255,.09);color:#fff;}
body.spx-public .spx-ticket-topic.is-active{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.3);color:rgba(147,197,253,1);}
body.spx-public .spx-ticket-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
body.spx-public .spx-ticket-label{display:flex;flex-direction:column;gap:5px;font-size:.8rem;color:rgba(255,255,255,.65);margin-bottom:12px;}
body.spx-public .spx-ticket-label:last-child{margin-bottom:0;}
body.spx-public .spx-ticket-label input,.spx-public .spx-ticket-label textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#fff;padding:9px 12px;font-size:.85rem;font-family:inherit;width:100%;box-sizing:border-box;transition:border-color .18s;}
body.spx-public .spx-ticket-label input:focus,.spx-public .spx-ticket-label textarea:focus{outline:none;border-color:rgba(59,130,246,.45);}
body.spx-public .spx-ticket-label textarea{resize:vertical;min-height:100px;}
body.spx-public .spx-ticket-review-summary{background:rgba(255,255,255,.04);border-radius:8px;padding:14px;margin-top:14px;}
body.spx-public .spx-ticket-review-row{display:flex;gap:12px;font-size:.8rem;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:8px;}
body.spx-public .spx-ticket-review-row:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
body.spx-public .spx-ticket-review-row span{color:rgba(255,255,255,.4);min-width:70px;}
body.spx-public .spx-ticket-review-row strong{color:rgba(255,255,255,.75);font-weight:500;}
body.spx-public .spx-ticket-logged-in-note{font-size:.8rem;color:rgba(255,255,255,.45);background:rgba(76,175,80,.07);border:1px solid rgba(76,175,80,.15);border-radius:6px;padding:10px 14px;margin-bottom:14px;}
body.spx-public .spx-ticket-modal-v138h-footer{display:flex;align-items:center;justify-content:space-between;padding:14px 24px 20px;border-top:1px solid rgba(255,255,255,.07);}
body.spx-public .spx-ticket-footer-right{display:flex;align-items:center;gap:12px;margin-left:auto;}
body.spx-public .spx-ticket-status{font-size:.78rem;color:rgba(255,255,255,.45);margin:0;}
body.spx-public .spx-ticket-status.is-success{color:#4caf50;}
body.spx-public .spx-ticket-captcha{margin-bottom:14px;}
body.spx-public .spx-ticket-success-state{padding:32px 24px 28px;text-align:center;}
body.spx-public .spx-ticket-success-icon{margin:0 auto 18px;width:64px;height:64px;background:rgba(76,175,80,.12);border-radius:50%;display:flex;align-items:center;justify-content:center;}
body.spx-public .spx-ticket-success-icon svg{color:#4caf50;}
body.spx-public .spx-ticket-success-title{font-size:1.15rem;font-weight:600;margin:0 0 10px;}
body.spx-public .spx-ticket-success-msg{font-size:.84rem;color:rgba(255,255,255,.55);margin:0 0 22px;line-height:1.6;}
body.spx-public .spx-ticket-success-actions{display:flex;flex-direction:column;align-items:center;gap:10px;}
body.spx-public .spx-ticket-success-ok{min-width:100px;}
body.spx-public .spx-ticket-success-countdown{font-size:.74rem;color:rgba(255,255,255,.32);margin:0;}

/* --- Mobile breakpoints (A8.138h) --- */
@media(max-width:1000px){body.spx-public .spx-footer-v138h-nav{grid-template-columns:repeat(3,1fr);}body.spx-public .spx-footer-v138h-inner{flex-direction:column;}body.spx-public .spx-footer-v138h-brand{max-width:100%;}}
@media(max-width:900px){body.spx-public .spx-fint-v138h{flex-direction:column;padding:44px 4vw;}body.spx-public .spx-fint-copy{max-width:100%;flex:none;}body.spx-public .spx-fint-stage{min-height:260px;width:100%;}body.spx-public .spx-fint-builder-body{min-height:160px;}body.spx-public .spx-fint-insp{display:none;}body.spx-public .spx-fhow-steps{grid-template-columns:1fr 1fr;}body.spx-public .spx-alpha-v138h-inner{flex-direction:column;}body.spx-public .spx-support-cta-v138h-inner{flex-direction:column;}body.spx-public .spx-support-cta-v138h-info{flex:none;width:100%;}body.spx-public .spx-updates-pinned-v138h-thumb{display:none;}body.spx-public .spx-updates-pinned-v138h{flex-direction:column;}body.spx-public .spx-fint-pipeline{flex-wrap:wrap;gap:8px;}body.spx-public .spx-fint-pipe-arr{display:none;}body.spx-public .spx-fint-pipe-fork{flex-direction:row;flex-wrap:wrap;}}
@media(max-width:680px){body.spx-public .spx-fhow-steps{grid-template-columns:1fr;}body.spx-public .spx-fint-cmd-shell,.spx-public .spx-fint-pd-shell{flex-direction:column;}body.spx-public .spx-fint-cmd-sidebar,.spx-public .spx-fint-pd-sidebar{width:100%;flex-direction:row;border-right:none;border-bottom:1px solid rgba(255,255,255,.07);padding:8px;overflow-x:auto;}body.spx-public .spx-ticket-topic-grid{grid-template-columns:repeat(2,1fr);}body.spx-public .spx-ticket-form-row{grid-template-columns:1fr;}body.spx-public .spx-footer-v138h-nav{grid-template-columns:repeat(2,1fr);}body.spx-public .spx-updates-grid-v138h{grid-template-columns:1fr;}body.spx-public .spx-alpha-v138h-topics{grid-template-columns:1fr;}}
@media(max-width:480px){body.spx-public .spx-footer-v138h-nav{grid-template-columns:1fr;}body.spx-public .spx-updates-pinned-v138h-inner{padding:20px 22px;}}

/* ============================================================
   A8.138i — stabilize: tone, contrast, interaction polish
   ============================================================ */

/* --- Footer: clearer contrast on all routes (especially dark homepage) --- */
body.spx-public .spx-footer-v138h{background:#040d19;border-top:1px solid rgba(255,255,255,.10)!important;}
body.spx-public .spx-footer-v138h-inner{border-bottom-color:rgba(255,255,255,.08);}
body.spx-public .spx-footer-v138h-col a{transition:color .15s,transform .12s;}
body.spx-public .spx-footer-v138h-col a:hover{color:rgba(255,255,255,.90);transform:translateX(2px);}
html[data-theme="light"] body.spx-public .spx-footer-v138h{background:#f3f7ff;border-top-color:rgba(0,0,0,.10)!important;}
html[data-theme="light"] body.spx-public .spx-footer-v138h-tagline,
html[data-theme="light"] body.spx-public .spx-footer-v138h-alpha-note{color:rgba(0,0,0,.5);}
html[data-theme="light"] body.spx-public .spx-footer-v138h-copy,
html[data-theme="light"] body.spx-public .spx-footer-v138h-built{color:rgba(0,0,0,.4);}
html[data-theme="light"] body.spx-public .spx-footer-v138h-col a{color:rgba(0,0,0,.55);}
html[data-theme="light"] body.spx-public .spx-footer-v138h-col strong{color:rgba(0,0,0,.4);}
html[data-theme="light"] body.spx-public .spx-footer-v138h-logo{color:rgba(0,0,0,.85);}
html[data-theme="light"] body.spx-public .spx-footer-v138h-alpha-badge{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.10);color:rgba(0,0,0,.5);}

/* --- Feature interactive sections: less chrome, more focused --- */
body.spx-public .spx-fint-v138h{background:linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.016));border:1px solid rgba(255,255,255,.07);border-radius:18px;box-shadow:0 8px 40px rgba(0,0,0,.18);}
body.spx-public .spx-fint-tab{font-size:.76rem;padding:5px 12px;border-radius:20px;transition:background .15s,color .15s,border-color .15s;}
body.spx-public .spx-fint-tab.is-active{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.30);color:rgba(255,255,255,.90);}
body.spx-public .spx-fint-tab:hover:not(.is-active){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);}
body.spx-public .spx-fint-kicker{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(59,130,246,.75);font-weight:600;margin-bottom:6px;}
body.spx-public .spx-fint-step.is-active{color:rgba(255,255,255,.85);font-weight:600;}
body.spx-public .spx-fint-step{transition:color .18s;}

/* Builder chrome: slightly elevated but not overdone */
body.spx-public .spx-fint-builder-chrome{border-radius:8px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.32);border-color:rgba(255,255,255,.10);}
body.spx-public .spx-fint-bar{background:#0e1620;border-bottom-color:rgba(255,255,255,.08);}
body.spx-public .spx-fint-bar-logo{background:rgba(255,255,255,.08);border-radius:4px;width:18px;height:18px;}
body.spx-public .spx-fint-devchip{border-radius:14px;font-size:.68rem;transition:background .14s,border-color .14s;}
body.spx-public .spx-fint-devchip.is-active{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.30);}
body.spx-public .spx-fint-canvas-wrap{background:#07111f;border-radius:0 0 6px 6px;}
body.spx-public .spx-fint-insp{border-left-color:rgba(255,255,255,.07);background:#0a1520;}

/* Pipeline: cleaner nodes */
body.spx-public .spx-fint-pipe-node{border-radius:10px;font-size:.72rem;border-color:rgba(255,255,255,.10);transition:border-color .15s,background .15s;}
body.spx-public .spx-fint-pipe-node.is-active{border-color:rgba(59,130,246,.40);background:rgba(59,130,246,.10);}
body.spx-public .spx-fint-pipe-output.is-active{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.22);}

/* Files/ZIP file type items: tighter */
body.spx-public .spx-fint-ft-item{font-size:.73rem;padding:4px 6px;border-radius:4px;}
body.spx-public .spx-fint-fthumb{border-radius:6px;overflow:hidden;}

/* Project dashboard and command center sidebar: cleaner */
body.spx-public .spx-fint-pd-sidebar,body.spx-public .spx-fint-cmd-sidebar{background:#050e1a;border-right-color:rgba(255,255,255,.07);}
body.spx-public .spx-fint-pd-nav a.is-active,body.spx-public .spx-fint-cmd-nav a.is-active{background:rgba(59,130,246,.12);color:rgba(255,255,255,.85);border-radius:6px;}
body.spx-public .spx-fint-pd-card{border-radius:10px;border-color:rgba(255,255,255,.09);}
body.spx-public .spx-fint-cmd-stat{border-radius:8px;border-color:rgba(255,255,255,.08);}

/* SEO ring: sharper */
body.spx-public .spx-fint-seo-ring{filter:drop-shadow(0 0 8px rgba(59,130,246,.35));}
body.spx-public .spx-fint-seo-check{font-size:.73rem;padding:5px 8px;}
body.spx-public .spx-fint-seo-check.is-pass{color:#4caf50;}
body.spx-public .spx-fint-seo-check.is-fail{color:rgba(255,255,255,.35);}
body.spx-public .spx-fint-serp-entry{border-radius:6px;padding:10px 12px;}

/* Share widget: tighter */
body.spx-public .spx-fint-share-frame{border-radius:10px;border-color:rgba(255,255,255,.09);}
body.spx-public .spx-fint-share-topbar{background:#0a1520;border-bottom-color:rgba(255,255,255,.07);}
body.spx-public .spx-fint-share-comment{border-radius:6px;background:rgba(255,255,255,.04);padding:7px 10px;font-size:.73rem;}
body.spx-public .spx-fint-share-approved{background:rgba(76,175,80,.10);border:1px solid rgba(76,175,80,.22);border-radius:8px;padding:10px 14px;}

/* Forms mock: simpler */
body.spx-public .spx-fint-form-mock{border-radius:10px;border-color:rgba(255,255,255,.09);}
body.spx-public .spx-fint-finput{border-radius:5px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);}
body.spx-public .spx-fint-fsend{border-radius:5px;font-size:.75rem;}
body.spx-public .spx-fint-sub-row{font-size:.73rem;padding:6px 0;border-bottom-color:rgba(255,255,255,.06);}

/* How-it-works horizontal steps: cleaner */
body.spx-public .spx-fhow-v138h{padding:clamp(28px,5vw,56px) clamp(20px,5vw,60px);background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.010));border-radius:14px;border:1px solid rgba(255,255,255,.06);}
body.spx-public .spx-fhow-num{font-size:2.4rem;font-weight:900;background:linear-gradient(135deg,rgba(59,130,246,.5),rgba(24,201,245,.35));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:8px;}
body.spx-public .spx-fhow-step{padding:16px 14px;border-radius:10px;transition:background .18s;}
body.spx-public .spx-fhow-step:hover{background:rgba(255,255,255,.03);}

/* --- Support + Updates tone: calmer, product-quality --- */

/* Support CTA section: clean and calm */
body.spx-public .spx-support-cta-v138h{background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.08);border-radius:16px;margin:clamp(32px,6vw,72px) 0;}
body.spx-public .spx-support-cta-v138h-inner{gap:32px;}
body.spx-public .spx-support-cta-v138h-info h2{font-size:clamp(1.4rem,2.4vw,1.8rem);font-weight:700;margin:0 0 10px;}
body.spx-public .spx-support-cta-v138h-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;}
body.spx-public .spx-support-cta-v138h-trust span{font-size:.78rem;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:5px;}

/* Ticket modal: slightly more refined */
body.spx-public .spx-ticket-modal-v138h-dialog{border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.06);}
body.spx-public .spx-ticket-modal-v138h-header{padding:18px 22px 14px;}
body.spx-public .spx-ticket-modal-v138h-title-row{gap:12px;}
body.spx-public .spx-ticket-modal-v138h-icon svg{stroke:rgba(59,130,246,.70);}
body.spx-public .spx-ticket-modal-v138h-eyebrow{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(59,130,246,.65);font-weight:600;}
body.spx-public .spx-ticket-modal-v138h-steps{padding:0 22px 10px;gap:8px;}
body.spx-public .spx-ticket-step{font-size:.73rem;font-weight:500;gap:5px;padding:5px 10px;border-radius:20px;border:1px solid rgba(255,255,255,.07);transition:border-color .18s,color .18s;}
body.spx-public .spx-ticket-step.is-active{border-color:rgba(59,130,246,.35);color:rgba(255,255,255,.90);background:rgba(59,130,246,.09);}
body.spx-public .spx-ticket-step.is-done{border-color:rgba(76,175,80,.25);color:rgba(76,175,80,.75);}
body.spx-public .spx-ticket-topic{border-radius:8px;font-size:.78rem;padding:10px 12px;transition:background .14s,border-color .14s;}
body.spx-public .spx-ticket-topic.is-active{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.32);color:rgba(255,255,255,.92);}
body.spx-public .spx-ticket-topic:hover:not(.is-active){background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);}

/* Updates: tighter hero, calmer card set */
body.spx-public .spx-updates-hero-v138h{background:none;border:none;padding:clamp(48px,7vw,80px) 0 clamp(28px,4vw,44px);}
body.spx-public .spx-updates-hero-v138h h1{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:750;letter-spacing:-.02em;margin:0 0 10px;}
body.spx-public .spx-updates-hero-status{font-size:.78rem;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:7px;}
body.spx-public .spx-ucard-v138h{border-radius:12px;border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.03);transition:border-color .16s,background .16s,transform .16s;will-change:transform;}
body.spx-public .spx-ucard-v138h:hover{border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.05);transform:translateY(-2px);}
body.spx-public .spx-ucard-v138h-tag{font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;border-radius:12px;padding:3px 9px;}
body.spx-public .spx-updates-filter-row-v138h{padding:0;gap:8px;}
body.spx-public .spx-ufilter{border-radius:20px;font-size:.73rem;padding:5px 14px;border:1px solid rgba(255,255,255,.09);background:transparent;color:rgba(255,255,255,.5);cursor:pointer;transition:background .14s,border-color .14s,color .14s;}
body.spx-public .spx-ufilter.is-active{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.88);}
body.spx-public .spx-ufilter:hover:not(.is-active){background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);}
body.spx-public .spx-updates-pinned-v138h{border-radius:14px;border-color:rgba(255,255,255,.09);background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.018));}
body.spx-public .spx-updates-pinned-v138h-eyebrow{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(59,130,246,.65);font-weight:600;}
body.spx-public .spx-updates-pinned-v138h h2{font-size:clamp(1.2rem,2.2vw,1.6rem);}

/* Alpha section: calm and signal-focused */
body.spx-public .spx-alpha-v138h{padding:clamp(48px,7vw,80px) clamp(20px,5vw,60px);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.016));border:1px solid rgba(255,255,255,.08);margin:clamp(32px,5vw,64px) 0;}
body.spx-public .spx-alpha-v138h-signal{border-radius:10px;padding:18px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);transition:border-color .16s;}
body.spx-public .spx-alpha-v138h-signal:hover{border-color:rgba(255,255,255,.12);}
body.spx-public .spx-alpha-v138h-signal-icon{margin-bottom:10px;}
body.spx-public .spx-alpha-v138h-signal-icon svg{stroke:rgba(59,130,246,.60);}
body.spx-public [data-alpha-topic].is-active{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.28);color:rgba(255,255,255,.90);}
body.spx-public [data-alpha-topic]{border-radius:20px;padding:6px 14px;font-size:.78rem;border:1px solid rgba(255,255,255,.09);background:transparent;color:rgba(255,255,255,.55);cursor:pointer;transition:background .14s,border-color .14s,color .14s;}
body.spx-public [data-alpha-topic]:hover:not(.is-active){background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);}
body.spx-public .spx-alpha-v138h-panel{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:14px 16px;margin-top:14px;font-size:.84rem;color:rgba(255,255,255,.60);line-height:1.65;}

/* --- Global card/link hover motion --- */
body.spx-public .spf-card-reveal{transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);}
body.spx-public .spf-card-reveal:not(.is-revealed){opacity:0;transform:translateY(16px);}
body.spx-public .spf-card-reveal.is-revealed{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){body.spx-public .spf-card-reveal{transition:opacity .2s;transform:none!important;}}

/* Card link hover: gentle lift across card types */
body.spx-public .spx-kb-v139-card:hover,
body.spx-public .spx-ucard-v138h:hover,
body.spx-public [data-faq-id]:hover{border-color:rgba(255,255,255,.15)!important;}
body.spx-public .spx-kb-v139-card{transition:border-color .15s,transform .15s;will-change:transform;}
body.spx-public .spx-kb-v139-card:hover{transform:translateY(-2px);}

/* Smooth section reveals: only for elements not controlled by IntersectionObserver */
body.spx-public .reveal{animation:spxReveal .5s cubic-bezier(.4,0,.2,1) both;}
@keyframes spxReveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){body.spx-public .reveal{animation:none;}}

/* Carts feature: coming-soon style override */
body.spx-public .spx-feature-carts-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:clamp(32px,6vw,72px) 0;text-align:center;}
body.spx-public .spx-feature-carts-soon-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:5px 14px;font-size:.73rem;color:rgba(255,255,255,.55);}
body.spx-public .spx-feature-carts-soon-logo{width:56px;height:56px;object-fit:contain;border-radius:14px;}
body.spx-public .spx-feature-carts-soon-screen{max-width:min(560px,90vw);border-radius:10px;border:1px solid rgba(255,255,255,.09);box-shadow:0 8px 32px rgba(0,0,0,.28);margin-top:10px;}

/* --- A8.138i mobile extras --- */
@media(max-width:900px){
  body.spx-public .spx-fhow-v138h{padding:24px 20px;}
  body.spx-public .spx-alpha-v138h{border-radius:12px;padding:28px 20px;}
  body.spx-public .spx-support-cta-v138h{border-radius:12px;}
  body.spx-public .spx-updates-pinned-v138h{border-radius:12px;}
}
@media(max-width:680px){
  body.spx-public .spx-ticket-modal-v138h-dialog{border-radius:0;min-height:100dvh;max-height:100dvh;overflow-y:auto;}
  body.spx-public .spx-alpha-v138h-signals{grid-template-columns:1fr;}
  body.spx-public .spx-support-cta-v138h-inner{padding:24px 20px;}
}

/* ==========================================================
   A8.138j — Updates page light mode clarity
   ========================================================== */
html[data-theme="light"] body.spx-public .spx-updates-hero-v138h-status span:last-child,
html[data-spx-theme="light"] body.spx-public .spx-updates-hero-v138h-status span:last-child{color:rgba(15,23,42,.5);}
html[data-theme="light"] body.spx-public .spx-updates-hero-v138h p,
html[data-spx-theme="light"] body.spx-public .spx-updates-hero-v138h p{color:rgba(15,23,42,.6);}

html[data-theme="light"] body.spx-public .spx-updates-system-card-v138h,
html[data-spx-theme="light"] body.spx-public .spx-updates-system-card-v138h{background:rgba(251,192,45,.06);border-color:rgba(251,192,45,.25);}
html[data-theme="light"] body.spx-public .spx-updates-system-card-v138h p,
html[data-spx-theme="light"] body.spx-public .spx-updates-system-card-v138h p{color:rgba(15,23,42,.6);}

html[data-theme="light"] body.spx-public .spx-updates-pinned-v138h,
html[data-spx-theme="light"] body.spx-public .spx-updates-pinned-v138h{background:#fff;border-color:rgba(15,23,42,.1);}
html[data-theme="light"] body.spx-public .spx-updates-pinned-label,
html[data-spx-theme="light"] body.spx-public .spx-updates-pinned-label{color:rgba(15,23,42,.45);}
html[data-theme="light"] body.spx-public .spx-updates-pinned-cat,
html[data-spx-theme="light"] body.spx-public .spx-updates-pinned-cat{background:rgba(15,23,42,.06);color:rgba(15,23,42,.55);}
html[data-theme="light"] body.spx-public .spx-updates-pinned-date,
html[data-spx-theme="light"] body.spx-public .spx-updates-pinned-date{color:rgba(15,23,42,.38);}
html[data-theme="light"] body.spx-public .spx-updates-pinned-v138h p,
html[data-spx-theme="light"] body.spx-public .spx-updates-pinned-v138h p{color:rgba(15,23,42,.6);}
html[data-theme="light"] body.spx-public .spx-updates-pinned-cta,
html[data-spx-theme="light"] body.spx-public .spx-updates-pinned-cta{color:rgba(15,23,42,.6);}
html[data-theme="light"] body.spx-public .spx-updates-pinned-cta:hover,
html[data-spx-theme="light"] body.spx-public .spx-updates-pinned-cta:hover{color:#0f172a;}
html[data-theme="light"] body.spx-public .spx-updates-pinned-v138h-thumb,
html[data-spx-theme="light"] body.spx-public .spx-updates-pinned-v138h-thumb{background:rgba(15,23,42,.05);}

html[data-theme="light"] body.spx-public .spx-ufilter,
html[data-spx-theme="light"] body.spx-public .spx-ufilter{background:rgba(15,23,42,.05);border-color:rgba(15,23,42,.12);color:rgba(15,23,42,.6);}
html[data-theme="light"] body.spx-public .spx-ufilter:hover,
html[data-spx-theme="light"] body.spx-public .spx-ufilter:hover{background:rgba(15,23,42,.09);color:#0f172a;}
html[data-theme="light"] body.spx-public .spx-ufilter.is-active,
html[data-spx-theme="light"] body.spx-public .spx-ufilter.is-active{background:rgba(15,23,42,.12);border-color:rgba(15,23,42,.22);color:#0f172a;}

html[data-theme="light"] body.spx-public .spx-ucard-v138h,
html[data-spx-theme="light"] body.spx-public .spx-ucard-v138h{background:#fff;border-color:rgba(15,23,42,.1);}
html[data-theme="light"] body.spx-public .spx-ucard-v138h:hover,
html[data-spx-theme="light"] body.spx-public .spx-ucard-v138h:hover{background:#fff;border-color:rgba(15,23,42,.18);}
html[data-theme="light"] body.spx-public .spx-ucard-v138h-thumb,
html[data-spx-theme="light"] body.spx-public .spx-ucard-v138h-thumb{background:rgba(15,23,42,.05);}
html[data-theme="light"] body.spx-public .spx-ucard-v138h-cat,
html[data-spx-theme="light"] body.spx-public .spx-ucard-v138h-cat{background:rgba(15,23,42,.06);color:rgba(15,23,42,.55);}
html[data-theme="light"] body.spx-public .spx-ucard-v138h-date,
html[data-spx-theme="light"] body.spx-public .spx-ucard-v138h-date{color:rgba(15,23,42,.38);}
html[data-theme="light"] body.spx-public .spx-ucard-v138h p,
html[data-spx-theme="light"] body.spx-public .spx-ucard-v138h p{color:rgba(15,23,42,.58);}
html[data-theme="light"] body.spx-public .spx-ucard-v138h-link,
html[data-spx-theme="light"] body.spx-public .spx-ucard-v138h-link{color:rgba(15,23,42,.5);}
html[data-theme="light"] body.spx-public .spx-ucard-v138h-link:hover,
html[data-spx-theme="light"] body.spx-public .spx-ucard-v138h-link:hover{color:#0f172a;}

html[data-theme="light"] body.spx-public .spx-updates-empty-v138h svg,
html[data-spx-theme="light"] body.spx-public .spx-updates-empty-v138h svg{color:rgba(15,23,42,.25);}
html[data-theme="light"] body.spx-public .spx-updates-empty-v138h p,
html[data-spx-theme="light"] body.spx-public .spx-updates-empty-v138h p{color:rgba(15,23,42,.5);}

html[data-theme="light"] body.spx-public .spx-updates-cta-v138h,
html[data-spx-theme="light"] body.spx-public .spx-updates-cta-v138h{border-top-color:rgba(15,23,42,.1);}
html[data-theme="light"] body.spx-public .spx-updates-cta-v138h p,
html[data-spx-theme="light"] body.spx-public .spx-updates-cta-v138h p{color:rgba(15,23,42,.5);}

html[data-theme="light"] body.spx-public .spx-support-cta-v138h-inner,
html[data-spx-theme="light"] body.spx-public .spx-support-cta-v138h-inner{background:#fff;border-color:rgba(15,23,42,.1);}
html[data-theme="light"] body.spx-public .spx-support-cta-v138h-copy p,
html[data-spx-theme="light"] body.spx-public .spx-support-cta-v138h-copy p{color:rgba(15,23,42,.6);}
html[data-theme="light"] body.spx-public .spx-support-cta-v138h-trust span,
html[data-spx-theme="light"] body.spx-public .spx-support-cta-v138h-trust span{color:rgba(15,23,42,.45);}
html[data-theme="light"] body.spx-public .spx-support-cta-v138h-trust svg,
html[data-spx-theme="light"] body.spx-public .spx-support-cta-v138h-trust svg{color:rgba(15,23,42,.35);}
html[data-theme="light"] body.spx-public .spx-support-cta-v138h-contact,
html[data-spx-theme="light"] body.spx-public .spx-support-cta-v138h-contact{background:rgba(15,23,42,.04);}
html[data-theme="light"] body.spx-public .spx-support-cta-v138h-contact svg,
html[data-spx-theme="light"] body.spx-public .spx-support-cta-v138h-contact svg{color:rgba(15,23,42,.4);}
html[data-theme="light"] body.spx-public .spx-support-cta-v138h-contact small,
html[data-spx-theme="light"] body.spx-public .spx-support-cta-v138h-contact small{color:rgba(15,23,42,.45);}

/* ==========================================================
   A8.138j — Roadmap page (spx-rdm-v138j)
   ========================================================== */
body.spx-public .spx-rdm-hero-v138j{padding:clamp(56px,8vw,96px) 5vw clamp(32px,4vw,56px);max-width:1280px;margin:0 auto;}
body.spx-public .spx-rdm-hero-status{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
body.spx-public .spx-rdm-hero-dot{width:7px;height:7px;background:#4caf50;border-radius:50%;animation:fspulse 2s ease infinite;flex-shrink:0;}
body.spx-public .spx-rdm-hero-status span:last-child{font-size:.8rem;color:rgba(255,255,255,.48);}
body.spx-public .spx-rdm-hero-inner h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;letter-spacing:-.03em;margin:.3rem 0 .7rem;line-height:1.1;}
body.spx-public .spx-rdm-hero-inner>p{font-size:1rem;color:rgba(255,255,255,.6);max-width:560px;margin:0 0 24px;line-height:1.7;}
body.spx-public .spx-rdm-hero-actions{display:flex;gap:12px;flex-wrap:wrap;}

body.spx-public .spx-rdm-phases-v138j{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0 5vw 48px;max-width:1280px;margin:0 auto;}
body.spx-public .spx-rdm-phase{display:flex;flex-direction:column;gap:16px;}
body.spx-public .spx-rdm-phase-header{margin-bottom:4px;}
body.spx-public .spx-rdm-phase-header p{font-size:.75rem;color:rgba(255,255,255,.38);margin:6px 0 0;line-height:1.4;}
body.spx-public .spx-rdm-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:650;letter-spacing:.04em;border:1px solid;}
body.spx-public .spx-rdm-badge--active{background:rgba(76,175,80,.12);border-color:rgba(76,175,80,.28);color:#4caf50;}
body.spx-public .spx-rdm-badge--next{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.28);color:#93c5fd;}
body.spx-public .spx-rdm-badge--planned{background:rgba(168,85,247,.10);border-color:rgba(168,85,247,.22);color:#c4b5fd;}
body.spx-public .spx-rdm-badge--later{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.5);}
body.spx-public .spx-rdm-phase-cards{display:flex;flex-direction:column;gap:12px;}
body.spx-public .spx-rdm-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:18px;transition:border-color .18s,background .18s;}
body.spx-public .spx-rdm-card:hover{border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.05);}
body.spx-public .spx-rdm-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
body.spx-public .spx-rdm-card-icon{width:18px;height:18px;color:rgba(255,255,255,.4);flex-shrink:0;}
body.spx-public .spx-rdm-cat{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.38);background:rgba(255,255,255,.06);border-radius:4px;padding:2px 8px;}
body.spx-public .spx-rdm-card h3{font-size:.88rem;font-weight:650;margin:0 0 7px;line-height:1.35;}
body.spx-public .spx-rdm-card p{font-size:.78rem;color:rgba(255,255,255,.5);line-height:1.65;margin:0;}

body.spx-public .spx-rdm-alpha-v138j{padding:0 5vw 64px;max-width:1280px;margin:0 auto;}
body.spx-public .spx-rdm-alpha-inner{display:flex;gap:40px;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:40px;}
body.spx-public .spx-rdm-alpha-copy{flex:1;}
body.spx-public .spx-rdm-alpha-copy h2{font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:750;margin:.4rem 0 12px;letter-spacing:-.02em;}
body.spx-public .spx-rdm-alpha-copy>p{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.7;margin:0 0 20px;}
body.spx-public .spx-rdm-alpha-panel{flex:0 0 320px;}
body.spx-public .spx-rdm-alpha-kicker{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(59,130,246,.65);font-weight:600;display:block;margin-bottom:8px;}
body.spx-public .spx-rdm-alpha-panel h3{font-size:.9rem;font-weight:600;margin:0 0 14px;color:rgba(255,255,255,.8);line-height:1.5;}
body.spx-public .spx-rdm-alpha-topics{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;}
body.spx-public .spx-rdm-alpha-topics [data-alpha-topic]{border-radius:20px;padding:5px 13px;font-size:.76rem;border:1px solid rgba(255,255,255,.09);background:transparent;color:rgba(255,255,255,.52);cursor:pointer;transition:background .14s,border-color .14s,color .14s;font-family:inherit;}
body.spx-public .spx-rdm-alpha-topics [data-alpha-topic].is-active{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.28);color:rgba(255,255,255,.9);}
body.spx-public .spx-rdm-alpha-topics [data-alpha-topic]:hover:not(.is-active){background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);}
body.spx-public .spx-rdm-alpha-copy-out{font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.65;margin:0;background:rgba(255,255,255,.04);border-radius:8px;padding:12px 14px;}

/* Light mode */
html[data-theme="light"] body.spx-public .spx-rdm-hero-status span:last-child,
html[data-spx-theme="light"] body.spx-public .spx-rdm-hero-status span:last-child{color:rgba(15,23,42,.45);}
html[data-theme="light"] body.spx-public .spx-rdm-hero-inner>p,
html[data-spx-theme="light"] body.spx-public .spx-rdm-hero-inner>p{color:rgba(15,23,42,.6);}
html[data-theme="light"] body.spx-public .spx-rdm-phase-header p,
html[data-spx-theme="light"] body.spx-public .spx-rdm-phase-header p{color:rgba(15,23,42,.42);}
html[data-theme="light"] body.spx-public .spx-rdm-badge--later,
html[data-spx-theme="light"] body.spx-public .spx-rdm-badge--later{background:rgba(15,23,42,.06);border-color:rgba(15,23,42,.12);color:rgba(15,23,42,.5);}
html[data-theme="light"] body.spx-public .spx-rdm-card,
html[data-spx-theme="light"] body.spx-public .spx-rdm-card{background:#fff;border-color:rgba(15,23,42,.1);}
html[data-theme="light"] body.spx-public .spx-rdm-card:hover,
html[data-spx-theme="light"] body.spx-public .spx-rdm-card:hover{background:#fff;border-color:rgba(15,23,42,.18);}
html[data-theme="light"] body.spx-public .spx-rdm-card-icon,
html[data-spx-theme="light"] body.spx-public .spx-rdm-card-icon{color:rgba(15,23,42,.35);}
html[data-theme="light"] body.spx-public .spx-rdm-cat,
html[data-spx-theme="light"] body.spx-public .spx-rdm-cat{background:rgba(15,23,42,.06);color:rgba(15,23,42,.45);}
html[data-theme="light"] body.spx-public .spx-rdm-card p,
html[data-spx-theme="light"] body.spx-public .spx-rdm-card p{color:rgba(15,23,42,.58);}
html[data-theme="light"] body.spx-public .spx-rdm-alpha-inner,
html[data-spx-theme="light"] body.spx-public .spx-rdm-alpha-inner{background:#fff;border-color:rgba(15,23,42,.1);}
html[data-theme="light"] body.spx-public .spx-rdm-alpha-copy>p,
html[data-spx-theme="light"] body.spx-public .spx-rdm-alpha-copy>p{color:rgba(15,23,42,.6);}
html[data-theme="light"] body.spx-public .spx-rdm-alpha-panel h3,
html[data-spx-theme="light"] body.spx-public .spx-rdm-alpha-panel h3{color:rgba(15,23,42,.75);}
html[data-theme="light"] body.spx-public .spx-rdm-alpha-topics [data-alpha-topic],
html[data-spx-theme="light"] body.spx-public .spx-rdm-alpha-topics [data-alpha-topic]{border-color:rgba(15,23,42,.12);color:rgba(15,23,42,.55);}
html[data-theme="light"] body.spx-public .spx-rdm-alpha-topics [data-alpha-topic]:hover:not(.is-active),
html[data-spx-theme="light"] body.spx-public .spx-rdm-alpha-topics [data-alpha-topic]:hover:not(.is-active){background:rgba(15,23,42,.04);}
html[data-theme="light"] body.spx-public .spx-rdm-alpha-copy-out,
html[data-spx-theme="light"] body.spx-public .spx-rdm-alpha-copy-out{background:rgba(15,23,42,.04);color:rgba(15,23,42,.58);}

/* Mobile */
@media(max-width:1100px){body.spx-public .spx-rdm-phases-v138j{grid-template-columns:repeat(2,1fr);}}
@media(max-width:700px){
  body.spx-public .spx-rdm-phases-v138j{grid-template-columns:1fr;}
  body.spx-public .spx-rdm-alpha-inner{flex-direction:column;}
  body.spx-public .spx-rdm-alpha-panel{flex:none;width:100%;}
}

/* ==========================================================
   A8.138j — Features overview page (spx-fov-v138j)
   ========================================================== */
body.spx-public .spx-fov-hero-v138j{padding:clamp(56px,8vw,96px) 5vw clamp(28px,4vw,48px);max-width:1280px;margin:0 auto;}
body.spx-public .spx-fov-hero-inner h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.03em;margin:.3rem 0 .7rem;line-height:1.1;}
body.spx-public .spx-fov-hero-inner>p{font-size:1rem;color:rgba(255,255,255,.6);max-width:520px;margin:0 0 24px;line-height:1.7;}
body.spx-public .spx-fov-groups-v138j{padding:0 5vw 16px;max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:40px;}
body.spx-public .spx-fov-group-label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.35);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06);}
body.spx-public .spx-fov-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
body.spx-public .spx-fov-card{display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:20px;text-decoration:none;color:inherit;transition:border-color .18s,background .18s,transform .2s;}
body.spx-public .spx-fov-card:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.055);transform:translateY(-2px);}
body.spx-public .spx-fov-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
body.spx-public .spx-fov-card-icon{width:32px;height:32px;background:rgba(255,255,255,.07);border-radius:7px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);flex-shrink:0;}
body.spx-public .spx-fov-badge{font-size:.65rem;letter-spacing:.05em;font-weight:650;padding:2px 9px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.45);}
body.spx-public .spx-fov-card h3{font-size:.9rem;font-weight:650;margin:0;line-height:1.3;}
body.spx-public .spx-fov-card p{font-size:.78rem;color:rgba(255,255,255,.5);line-height:1.65;margin:0;flex:1;}
body.spx-public .spx-fov-link{display:inline-flex;align-items:center;gap:4px;font-size:.76rem;color:rgba(255,255,255,.4);margin-top:4px;transition:color .15s;}
body.spx-public .spx-fov-card:hover .spx-fov-link{color:rgba(255,255,255,.72);}
body.spx-public .spx-fov-cta-v138j{padding:32px 5vw 56px;text-align:center;border-top:1px solid rgba(255,255,255,.06);margin:8px 5vw 0;max-width:1240px;}
body.spx-public .spx-fov-cta-v138j p{font-size:.88rem;color:rgba(255,255,255,.45);margin:0 0 14px;}
body.spx-public .spx-fov-cta-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
/* Light mode */
html[data-theme="light"] body.spx-public .spx-fov-hero-inner>p,
html[data-spx-theme="light"] body.spx-public .spx-fov-hero-inner>p{color:rgba(15,23,42,.6);}
html[data-theme="light"] body.spx-public .spx-fov-group-label,
html[data-spx-theme="light"] body.spx-public .spx-fov-group-label{color:rgba(15,23,42,.38);border-bottom-color:rgba(15,23,42,.09);}
html[data-theme="light"] body.spx-public .spx-fov-card,
html[data-spx-theme="light"] body.spx-public .spx-fov-card{background:#fff;border-color:rgba(15,23,42,.1);}
html[data-theme="light"] body.spx-public .spx-fov-card:hover,
html[data-spx-theme="light"] body.spx-public .spx-fov-card:hover{background:#fff;border-color:rgba(15,23,42,.18);}
html[data-theme="light"] body.spx-public .spx-fov-card-icon,
html[data-spx-theme="light"] body.spx-public .spx-fov-card-icon{background:rgba(15,23,42,.06);color:rgba(15,23,42,.5);}
html[data-theme="light"] body.spx-public .spx-fov-badge,
html[data-spx-theme="light"] body.spx-public .spx-fov-badge{background:rgba(15,23,42,.05);border-color:rgba(15,23,42,.1);color:rgba(15,23,42,.45);}
html[data-theme="light"] body.spx-public .spx-fov-card p,
html[data-spx-theme="light"] body.spx-public .spx-fov-card p{color:rgba(15,23,42,.58);}
html[data-theme="light"] body.spx-public .spx-fov-link,
html[data-spx-theme="light"] body.spx-public .spx-fov-link{color:rgba(15,23,42,.4);}
html[data-theme="light"] body.spx-public .spx-fov-card:hover .spx-fov-link,
html[data-spx-theme="light"] body.spx-public .spx-fov-card:hover .spx-fov-link{color:rgba(15,23,42,.75);}
html[data-theme="light"] body.spx-public .spx-fov-cta-v138j,
html[data-spx-theme="light"] body.spx-public .spx-fov-cta-v138j{border-top-color:rgba(15,23,42,.1);}
html[data-theme="light"] body.spx-public .spx-fov-cta-v138j p,
html[data-spx-theme="light"] body.spx-public .spx-fov-cta-v138j p{color:rgba(15,23,42,.5);}

/* Feature page breadcrumb */
body.spx-public .spx-feat-breadcrumb-v138j{padding:20px 5vw 0;max-width:1280px;margin:0 auto;}
body.spx-public .spx-feat-breadcrumb-v138j a{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:rgba(255,255,255,.45);text-decoration:none;transition:color .15s;}
body.spx-public .spx-feat-breadcrumb-v138j a:hover{color:rgba(255,255,255,.78);}
html[data-theme="light"] body.spx-public .spx-feat-breadcrumb-v138j a,
html[data-spx-theme="light"] body.spx-public .spx-feat-breadcrumb-v138j a{color:rgba(15,23,42,.45);}
html[data-theme="light"] body.spx-public .spx-feat-breadcrumb-v138j a:hover,
html[data-spx-theme="light"] body.spx-public .spx-feat-breadcrumb-v138j a:hover{color:#0f172a;}

/* ==========================================================
   A8.138j — Homepage polish (Phase 9)
   ========================================================== */

/* Footer: data-spx-theme dual selectors (only data-theme existed) */
html[data-spx-theme="light"] body.spx-public .spx-footer-v138h{background:#f3f7ff;border-top-color:rgba(0,0,0,.10)!important;}
html[data-spx-theme="light"] body.spx-public .spx-footer-v138h-inner{border-bottom-color:rgba(0,0,0,.08);}
html[data-spx-theme="light"] body.spx-public .spx-footer-v138h-tagline,
html[data-spx-theme="light"] body.spx-public .spx-footer-v138h-alpha-note{color:rgba(0,0,0,.5);}
html[data-spx-theme="light"] body.spx-public .spx-footer-v138h-copy,
html[data-spx-theme="light"] body.spx-public .spx-footer-v138h-built{color:rgba(0,0,0,.4);}
html[data-spx-theme="light"] body.spx-public .spx-footer-v138h-col a{color:rgba(0,0,0,.55);}
html[data-spx-theme="light"] body.spx-public .spx-footer-v138h-col a:hover{color:rgba(0,0,0,.9);transform:translateX(2px);}
html[data-spx-theme="light"] body.spx-public .spx-footer-v138h-col strong{color:rgba(0,0,0,.45);}
html[data-spx-theme="light"] body.spx-public .spx-footer-v138h-logo{color:rgba(0,0,0,.85);}
html[data-spx-theme="light"] body.spx-public .spx-footer-v138h-alpha-badge{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.10);color:rgba(0,0,0,.5);}

/* Alpha section: light mode overrides */
html[data-theme="light"] body.spx-public .spx-alpha-v138h,
html[data-spx-theme="light"] body.spx-public .spx-alpha-v138h{background:rgba(15,23,42,.025);border-color:rgba(15,23,42,.08);}
html[data-theme="light"] body.spx-public .spx-alpha-v138h-status span:last-child,
html[data-spx-theme="light"] body.spx-public .spx-alpha-v138h-status span:last-child{color:rgba(15,23,42,.45);}
html[data-theme="light"] body.spx-public .spx-alpha-v138h-copy>p,
html[data-spx-theme="light"] body.spx-public .spx-alpha-v138h-copy>p{color:rgba(15,23,42,.6);}
html[data-theme="light"] body.spx-public .spx-alpha-v138h-signal,
html[data-spx-theme="light"] body.spx-public .spx-alpha-v138h-signal{background:#fff;border-color:rgba(15,23,42,.1);}
html[data-theme="light"] body.spx-public .spx-alpha-v138h-signal:hover,
html[data-spx-theme="light"] body.spx-public .spx-alpha-v138h-signal:hover{border-color:rgba(15,23,42,.18);}
html[data-theme="light"] body.spx-public .spx-alpha-v138h-signal b,
html[data-spx-theme="light"] body.spx-public .spx-alpha-v138h-signal b{color:#0f172a;}
html[data-theme="light"] body.spx-public .spx-alpha-v138h-signal small,
html[data-spx-theme="light"] body.spx-public .spx-alpha-v138h-signal small{color:rgba(15,23,42,.55);}
html[data-theme="light"] body.spx-public .spx-alpha-v138h-signal-icon,
html[data-spx-theme="light"] body.spx-public .spx-alpha-v138h-signal-icon{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.1);}
html[data-theme="light"] body.spx-public .spx-alpha-v138h-panel,
html[data-spx-theme="light"] body.spx-public .spx-alpha-v138h-panel{background:#fff;border-color:rgba(15,23,42,.1);}
html[data-theme="light"] body.spx-public .spx-alpha-v138h-panel-kicker,
html[data-spx-theme="light"] body.spx-public .spx-alpha-v138h-panel-kicker{color:rgba(15,23,42,.4);}
html[data-theme="light"] body.spx-public .spx-alpha-v138h-copy-out,
html[data-spx-theme="light"] body.spx-public .spx-alpha-v138h-copy-out{color:rgba(15,23,42,.58);}
html[data-theme="light"] body.spx-public .spx-alpha-v138h-panel-cta,
html[data-spx-theme="light"] body.spx-public .spx-alpha-v138h-panel-cta{color:rgba(15,23,42,.5);}
html[data-theme="light"] body.spx-public .spx-alpha-v138h-panel-cta:hover,
html[data-spx-theme="light"] body.spx-public .spx-alpha-v138h-panel-cta:hover{color:#0f172a;}

/* ═══════════════════════════════════════════════════════════════
   A8.138k — Phases 3-8: ticket modal, roadmap legend, features,
   updates, feature heroes, homepage polish
   ═══════════════════════════════════════════════════════════════ */

/* ── Phase 3: Ticket modal step 2 ── */
.spx-ticket-topic-panel{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:rgba(24,201,245,.07);border:1px solid rgba(24,201,245,.18);color:rgba(255,255,255,.75);font-size:.82rem;margin-bottom:16px;}
.spx-ticket-topic-panel svg{flex-shrink:0;color:#18c9f5;}
.spx-ticket-topic-panel strong{color:#fff;font-weight:700;}
.spx-ticket-step-group{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.spx-ticket-step-group:last-child{margin-bottom:0;}
.spx-ticket-step-group-label{font-size:.73rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.38);padding-bottom:2px;}
html[data-theme="light"] .spx-ticket-topic-panel,
html[data-spx-theme="light"] .spx-ticket-topic-panel{background:rgba(14,165,233,.07);border-color:rgba(14,165,233,.2);color:rgba(15,23,42,.7);}
html[data-theme="light"] .spx-ticket-topic-panel strong,
html[data-spx-theme="light"] .spx-ticket-topic-panel strong{color:#0f172a;}
html[data-theme="light"] .spx-ticket-step-group-label,
html[data-spx-theme="light"] .spx-ticket-step-group-label{color:rgba(15,23,42,.42);}

/* ── Phase 4: Updates page hero animated background ── */
.spx-updates-hero-v138h{position:relative;overflow:hidden;}
.spx-updates-hero-v138h::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 40%,rgba(24,201,245,.08),transparent 65%),radial-gradient(ellipse 60% 80% at 80% 20%,rgba(99,102,241,.07),transparent 65%);pointer-events:none;animation:spxUpdHeroShimmer 8s ease-in-out infinite alternate;}
@keyframes spxUpdHeroShimmer{0%{opacity:.6;transform:scale(1);}100%{opacity:1;transform:scale(1.04);}}
@media(prefers-reduced-motion:reduce){.spx-updates-hero-v138h::before{animation:none;}}
.spx-updates-hero-v138h-inner{position:relative;z-index:1;}
.spx-ucard-v138h{transition:transform .22s var(--ease,ease),box-shadow .22s var(--ease,ease),border-color .22s var(--ease,ease);}
.spx-ucard-v138h:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.22);border-color:rgba(24,201,245,.22);}
html[data-theme="light"] .spx-updates-hero-v138h::before,
html[data-spx-theme="light"] .spx-updates-hero-v138h::before{background:radial-gradient(ellipse 80% 60% at 20% 40%,rgba(14,165,233,.07),transparent 65%),radial-gradient(ellipse 60% 80% at 80% 20%,rgba(99,102,241,.05),transparent 65%);}
html[data-theme="light"] .spx-ucard-v138h:hover,
html[data-spx-theme="light"] .spx-ucard-v138h:hover{box-shadow:0 8px 24px rgba(15,23,42,.12);}

/* ── Phase 5: Roadmap legend ── */
.spx-rdm-legend-v138k{display:flex;flex-wrap:wrap;gap:12px 20px;padding:16px var(--side,clamp(18px,5vw,72px));justify-content:center;}
.spx-rdm-legend-item{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:650;color:rgba(255,255,255,.55);}
.spx-rdm-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.spx-rdm-legend--available .spx-rdm-legend-dot{background:#14b8a6;}
.spx-rdm-legend--active .spx-rdm-legend-dot{background:#22c55e;}
.spx-rdm-legend--next .spx-rdm-legend-dot{background:#3b82f6;}
.spx-rdm-legend--planned .spx-rdm-legend-dot{background:#a855f7;}
.spx-rdm-legend--later .spx-rdm-legend-dot{background:rgba(255,255,255,.25);}
html[data-theme="light"] .spx-rdm-legend-item,
html[data-spx-theme="light"] .spx-rdm-legend-item{color:rgba(15,23,42,.5);}
html[data-theme="light"] .spx-rdm-legend--later .spx-rdm-legend-dot,
html[data-spx-theme="light"] .spx-rdm-legend--later .spx-rdm-legend-dot{background:rgba(15,23,42,.2);}

/* Available in Alpha strip */
.spx-rdm-available-v138k{padding:0 var(--side,clamp(18px,5vw,72px)) 24px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.spx-rdm-available-label{font-size:.72rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:#14b8a6;flex-shrink:0;}
.spx-rdm-available-chips{display:flex;flex-wrap:wrap;gap:8px;}
.spx-rdm-avail-chip{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;padding:5px 11px;border-radius:999px;background:rgba(20,184,166,.1);border:1px solid rgba(20,184,166,.25);color:rgba(255,255,255,.75);}
.spx-rdm-avail-chip svg{flex-shrink:0;color:#14b8a6;}
html[data-theme="light"] .spx-rdm-available-v138k,
html[data-spx-theme="light"] .spx-rdm-available-v138k{/* already inherits light bg */}
html[data-theme="light"] .spx-rdm-avail-chip,
html[data-spx-theme="light"] .spx-rdm-avail-chip{background:rgba(20,184,166,.08);border-color:rgba(20,184,166,.22);color:rgba(15,23,42,.72);}
@media(max-width:640px){.spx-rdm-available-v138k{flex-direction:column;align-items:flex-start;}.spx-rdm-legend-v138k{gap:10px 14px;}}

/* ── Phase 6: Features overview legend + Carts disabled + CTA ── */
.spx-fov-legend-v138k{display:flex;flex-wrap:wrap;gap:10px 18px;padding:12px var(--side,clamp(18px,5vw,72px)) 4px;justify-content:center;}
.spx-fov-legend-item{display:inline-flex;align-items:center;gap:7px;font-size:.79rem;font-weight:650;color:rgba(255,255,255,.5);}
.spx-fov-legend-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.spx-fov-legend--available .spx-fov-legend-dot{background:#22c55e;}
.spx-fov-legend--alpha .spx-fov-legend-dot{background:#18c9f5;}
.spx-fov-legend--planned .spx-fov-legend-dot{background:#a855f7;}
.spx-fov-legend--parked .spx-fov-legend-dot{background:rgba(255,255,255,.2);}
html[data-theme="light"] .spx-fov-legend-item,
html[data-spx-theme="light"] .spx-fov-legend-item{color:rgba(15,23,42,.5);}
html[data-theme="light"] .spx-fov-legend--parked .spx-fov-legend-dot,
html[data-spx-theme="light"] .spx-fov-legend--parked .spx-fov-legend-dot{background:rgba(15,23,42,.2);}

/* Feature badge status colors */
.spx-fov-badge--available-in-alpha,.spx-fov-badge--available{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.28);color:#86efac;}
.spx-fov-badge--alpha{background:rgba(24,201,245,.1);border-color:rgba(24,201,245,.28);color:#67e8f9;}
.spx-fov-badge--planned{background:rgba(168,85,247,.1);border-color:rgba(168,85,247,.28);color:#d8b4fe;}
.spx-fov-badge--core-direction{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.28);color:#fde68a;}
.spx-fov-badge--parked,.spx-fov-badge--later,.spx-fov-badge--inactive{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.38);}
html[data-theme="light"] .spx-fov-badge--parked,html[data-spx-theme="light"] .spx-fov-badge--parked,
html[data-theme="light"] .spx-fov-badge--later,html[data-spx-theme="light"] .spx-fov-badge--later{background:rgba(15,23,42,.05);border-color:rgba(15,23,42,.12);color:rgba(15,23,42,.38);}

/* Parked/disabled feature card */
.spx-fov-card--parked{opacity:.55;cursor:default;pointer-events:none;filter:grayscale(.4);}
.spx-fov-card--parked:hover{transform:none;box-shadow:none;}
.spx-fov-link--parked{color:rgba(255,255,255,.3);font-size:.78rem;}
html[data-theme="light"] .spx-fov-link--parked,html[data-spx-theme="light"] .spx-fov-link--parked{color:rgba(15,23,42,.3);}

/* Centered CTA */
.spx-fov-cta-actions--centered{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}

/* ── Phase 7: Feature detail page hero backgrounds + hover ── */
.spx-feature-hero{position:relative;overflow:hidden;}
.spx-feature-hero::before{content:'';position:absolute;inset:0;opacity:.55;transition:opacity .5s ease;pointer-events:none;z-index:0;}
.spx-feature-hero[data-feature-accent="blue"]::before{background:radial-gradient(ellipse 70% 70% at 80% 20%,rgba(59,130,246,.18),transparent 60%),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(99,102,241,.12),transparent 60%);}
.spx-feature-hero[data-feature-accent="cyan"]::before{background:radial-gradient(ellipse 70% 70% at 80% 20%,rgba(24,201,245,.15),transparent 60%),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(6,182,212,.1),transparent 60%);}
.spx-feature-hero[data-feature-accent="purple"]::before{background:radial-gradient(ellipse 70% 70% at 80% 20%,rgba(168,85,247,.15),transparent 60%),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(139,92,246,.1),transparent 60%);}
.spx-feature-hero[data-feature-accent="green"]::before{background:radial-gradient(ellipse 70% 70% at 80% 20%,rgba(34,197,94,.14),transparent 60%),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(20,184,166,.1),transparent 60%);}
.spx-feature-hero[data-feature-accent="orange"]::before{background:radial-gradient(ellipse 70% 70% at 80% 20%,rgba(245,158,11,.14),transparent 60%),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(251,146,60,.1),transparent 60%);}
.spx-feature-hero[data-feature-accent="teal"]::before{background:radial-gradient(ellipse 70% 70% at 80% 20%,rgba(20,184,166,.14),transparent 60%),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(6,182,212,.1),transparent 60%);}
.spx-feature-hero>*:not(.spx-feature-hero::before){position:relative;z-index:1;}
.spx-feature-hero .spx-feature-hero-copy,.spx-feature-hero .spx-feature-hero-visual{position:relative;z-index:1;}
.spx-feature-visual-board-v136{transition:transform .32s var(--ease,ease);}
.spx-feature-visual-board-v136:hover{transform:scale(1.015) translateY(-3px);}
@media(prefers-reduced-motion:reduce){.spx-feature-hero::before{display:none;}.spx-feature-visual-board-v136:hover{transform:none;}}
html[data-theme="light"] .spx-feature-hero[data-feature-accent="blue"]::before,
html[data-spx-theme="light"] .spx-feature-hero[data-feature-accent="blue"]::before{background:radial-gradient(ellipse 70% 70% at 80% 20%,rgba(59,130,246,.1),transparent 60%),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(99,102,241,.07),transparent 60%);}
html[data-theme="light"] .spx-feature-hero[data-feature-accent="cyan"]::before,
html[data-spx-theme="light"] .spx-feature-hero[data-feature-accent="cyan"]::before{background:radial-gradient(ellipse 70% 70% at 80% 20%,rgba(14,165,233,.1),transparent 60%),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(6,182,212,.07),transparent 60%);}
html[data-theme="light"] .spx-feature-hero::before,
html[data-spx-theme="light"] .spx-feature-hero::before{opacity:.4;}

/* ── Phase 8: Updates hero improvements (light mode) ── */
html[data-theme="light"] .spx-updates-hero-v138h,
html[data-spx-theme="light"] .spx-updates-hero-v138h{background:linear-gradient(135deg,rgba(14,165,233,.06),rgba(99,102,241,.04));}
html[data-theme="light"] .spx-updates-hero-v138h-status span:last-child,
html[data-spx-theme="light"] .spx-updates-hero-v138h-status span:last-child{color:rgba(15,23,42,.5);}
html[data-theme="light"] .spx-ucard-v138h,
html[data-spx-theme="light"] .spx-ucard-v138h{background:#fff;border-color:rgba(15,23,42,.08);}
html[data-theme="light"] .spx-updates-pinned-v138h,
html[data-spx-theme="light"] .spx-updates-pinned-v138h{background:#fff;border-color:rgba(15,23,42,.08);}
html[data-theme="light"] .spx-ufilter,
html[data-spx-theme="light"] .spx-ufilter{background:#fff;border-color:rgba(15,23,42,.12);color:rgba(15,23,42,.6);}
html[data-theme="light"] .spx-ufilter.is-active,
html[data-spx-theme="light"] .spx-ufilter.is-active{background:#0f172a;border-color:#0f172a;color:#fff;}

/* ── Phase 8: Homepage sections — export + command center ── */
.spx-export-section{position:relative;overflow:hidden;}
.spx-export-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 90% 10%,rgba(24,201,245,.05),transparent 60%);pointer-events:none;}
.spx-expipe-node,.spx-expipe-fork{transition:transform .2s var(--ease,ease);}
.spx-expipe-node:hover,.spx-expipe-fork:hover{transform:translateY(-2px);}
.spx-export-card{transition:transform .22s var(--ease,ease),border-color .22s var(--ease,ease);}
.spx-export-card:hover{transform:translateY(-3px);}

/* Command center hover improvements */
.spx-cmd-tab{transition:background .18s ease,color .18s ease,border-color .18s ease;}
.spx-cmd-tab:not(.is-active):hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);}
html[data-theme="light"] .spx-export-section::before,
html[data-spx-theme="light"] .spx-export-section::before{background:radial-gradient(ellipse 60% 80% at 90% 10%,rgba(14,165,233,.04),transparent 60%);}
html[data-theme="light"] .spx-cmd-tab:not(.is-active):hover,
html[data-spx-theme="light"] .spx-cmd-tab:not(.is-active):hover{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.12);}

/* ── Phase 8: Pricing card interactions ── */
.spx-pcard{transition:transform .22s var(--ease,ease),box-shadow .22s var(--ease,ease);}
.spx-pcard:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.24);}
.spx-pcard--featured:hover{box-shadow:0 20px 48px rgba(0,0,0,.3),0 0 0 1px rgba(24,201,245,.2);}
html[data-theme="light"] .spx-pcard:hover,html[data-spx-theme="light"] .spx-pcard:hover{box-shadow:0 12px 32px rgba(15,23,42,.14);}
@media(prefers-reduced-motion:reduce){.spx-pcard:hover,.spx-pcard--featured:hover{transform:none;}}

/* ── Phase 7: Feature "Why this matters" section ── */
body.spx-public .spx-feature-why-v138k{padding:40px 5vw 8px;max-width:1280px;margin:0 auto;}
body.spx-public .spx-feature-why-inner{max-width:720px;margin:0 auto;text-align:center;padding:28px 32px;border-radius:16px;background:rgba(var(--feat-c1,37,210,255),.06);border:1px solid rgba(var(--feat-c1,37,210,255),.14);position:relative;}
body.spx-public .spx-feature-why-inner::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(var(--feat-c1,37,210,255),.06),transparent 70%);pointer-events:none;}
body.spx-public .spx-feature-why-kicker{display:block;font-size:.73rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--feat-c1,37,210,255));margin-bottom:14px;position:relative;}
body.spx-public .spx-feature-why-body{font-size:1rem;line-height:1.78;color:rgba(255,255,255,.62);margin:0;position:relative;}
html[data-theme="light"] body.spx-public .spx-feature-why-inner,
html[data-spx-theme="light"] body.spx-public .spx-feature-why-inner{background:rgba(var(--feat-c1,14,165,233),.05);border-color:rgba(var(--feat-c1,14,165,233),.15);}
html[data-theme="light"] body.spx-public .spx-feature-why-body,
html[data-spx-theme="light"] body.spx-public .spx-feature-why-body{color:rgba(15,23,42,.62);}
@media(max-width:640px){body.spx-public .spx-feature-why-inner{padding:20px 18px;}body.spx-public .spx-feature-why-body{font-size:.92rem;}}

/* ============================================================
   A8.138m — KB render rootfix + public pages rework
   ============================================================ */

/* --- Phase 2: Support hub + Step 2 modal --- */
body.spx-public .spx-support-cta-v138h-inner{padding:40px;border-radius:16px;}
body.spx-public .spx-support-info-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;margin-bottom:10px;}
body.spx-public .spx-support-info-card:last-child{margin-bottom:0;}
body.spx-public .spx-support-info-icon{width:32px;height:32px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.15);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
body.spx-public .spx-support-info-icon svg{width:16px;height:16px;stroke:rgba(59,130,246,.75);}
body.spx-public .spx-support-info-card b{display:block;font-size:.84rem;margin-bottom:3px;}
body.spx-public .spx-support-info-card p{font-size:.78rem;color:rgba(255,255,255,.5);margin:0;line-height:1.55;}
body.spx-public .spx-ticket-step-group{border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:12px 14px 10px;margin-bottom:10px;background:rgba(255,255,255,.02);}
body.spx-public .spx-ticket-step-group:last-of-type{margin-bottom:0;}
body.spx-public .spx-ticket-step-group-label{display:block;font-size:.67rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:10px;}
body.spx-public .spx-ticket-topic-panel{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.14);border-radius:6px;font-size:.81rem;color:rgba(255,255,255,.65);margin-bottom:14px;}
body.spx-public .spx-ticket-topic-panel svg{color:rgba(59,130,246,.7);flex-shrink:0;}
body.spx-public .spx-ticket-s2-next{margin-top:14px;padding:12px 14px;background:rgba(76,175,80,.05);border:1px solid rgba(76,175,80,.12);border-radius:8px;}
body.spx-public .spx-ticket-s2-next-title{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:rgba(76,175,80,.75);margin-bottom:8px;}
body.spx-public .spx-ticket-s2-next-title svg{color:rgba(76,175,80,.65);}
body.spx-public .spx-ticket-s2-next-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;}
body.spx-public .spx-ticket-s2-next-steps li{font-size:.75rem;color:rgba(255,255,255,.5);padding-left:14px;position:relative;line-height:1.5;}
body.spx-public .spx-ticket-s2-next-steps li::before{content:'';position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:50%;background:rgba(76,175,80,.5);}

/* --- Phase 3: Footer + Alpha centering --- */
body.spx-public .spx-footer-v138h{position:relative;z-index:10;border-top:1px solid rgba(255,255,255,.16)!important;}
body.spx-public .spx-alpha-v138h{max-width:1100px;margin-left:auto!important;margin-right:auto!important;}
body.spx-public .spx-alpha-v138h-inner{gap:36px;}
body.spx-public .spx-alpha-v138h-copy{flex:0 0 46%;max-width:480px;}

/* --- Phase 4: Export-first section --- */
body.spx-public .spx-export-v139-head{padding:clamp(40px,6vw,80px) clamp(20px,5vw,60px) 32px;max-width:1280px;margin:0 auto;display:flex;align-items:flex-start;gap:40px;}
body.spx-public .spx-export-v139-copy{flex:1;}
body.spx-public .spx-export-v139-copy h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin:.3rem 0 .8rem;line-height:1.2;}
body.spx-public .spx-export-v139-copy p{font-size:.92rem;color:rgba(255,255,255,.6);line-height:1.75;margin:0;max-width:520px;}
body.spx-public .spx-export-v139-proof{display:flex;flex-direction:column;gap:12px;flex:0 0 auto;}
body.spx-public .spx-exp-stat{text-align:center;padding:16px 22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:10px;min-width:110px;}
body.spx-public .spx-exp-stat strong{display:block;font-size:1.6rem;font-weight:800;background:linear-gradient(135deg,rgba(59,130,246,.95),rgba(24,201,245,.85));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:2px;line-height:1;}
body.spx-public .spx-exp-stat span{font-size:.72rem;color:rgba(255,255,255,.4);}
body.spx-public .spx-export-v139-pipeline{display:flex;align-items:center;gap:0;padding:0 clamp(20px,5vw,60px) 32px;max-width:1280px;margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch;}
body.spx-public .spx-expipe-node,body.spx-public .spx-expipe-fork{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:12px;min-width:148px;gap:5px;}
body.spx-public .spx-expipe-node b,body.spx-public .spx-expipe-fork b{font-size:.88rem;font-weight:700;color:rgba(255,255,255,.85);margin:0;}
body.spx-public .spx-expipe-node>span,body.spx-public .spx-expipe-fork>span{font-size:.73rem;color:rgba(255,255,255,.45);line-height:1.5;}
body.spx-public .spx-expipe-icon{width:36px;height:36px;background:rgba(255,255,255,.07);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
body.spx-public .spx-expipe-icon svg{width:18px;height:18px;color:rgba(255,255,255,.65);}
body.spx-public .spx-expipe-connector{flex:1;display:flex;align-items:center;justify-content:center;padding:0 8px;color:rgba(255,255,255,.22);min-width:36px;}
body.spx-public .spx-expipe-fork-chips{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin-top:6px;}
body.spx-public .spx-expipe-fork-chips span{font-size:.67rem;padding:2px 8px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.22);border-radius:10px;color:rgba(147,197,253,.8);}
body.spx-public .spx-export-v139-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 clamp(20px,5vw,60px) clamp(40px,6vw,80px);max-width:1280px;margin:0 auto;}
body.spx-public .spx-export-card-v128{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s,background .2s,transform .2s;}
body.spx-public .spx-export-card-v128:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04);transform:translateY(-2px);}
body.spx-public .spx-export-card-v128.is-active{border-color:rgba(59,130,246,.28);background:rgba(59,130,246,.05);}
body.spx-public .spx-export-card-v128.is-active:hover{border-color:rgba(59,130,246,.42);}
body.spx-public .spx-export-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
body.spx-public .spx-export-status{font-size:.67rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.32);font-weight:600;}
body.spx-public .spx-export-card-v128 h3{font-size:.94rem;font-weight:700;margin:0;color:rgba(255,255,255,.9);}
body.spx-public .spx-export-card-v128 p{font-size:.81rem;color:rgba(255,255,255,.54);line-height:1.65;margin:0;}
body.spx-public .spx-export-card-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;}
body.spx-public .spx-export-card-list li{font-size:.74rem;color:rgba(255,255,255,.45);padding-left:14px;position:relative;line-height:1.5;}
body.spx-public .spx-export-card-list li::before{content:'';position:absolute;left:0;top:6px;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.25);}
body.spx-public .spx-export-card-v128.is-active .spx-export-card-list li::before{background:rgba(59,130,246,.6);}
body.spx-public .spx-more-link{display:inline-flex;align-items:center;gap:5px;font-size:.77rem;color:rgba(255,255,255,.42);text-decoration:none;transition:color .18s;margin-top:auto;padding-top:6px;}
body.spx-public .spx-more-link:hover{color:rgba(255,255,255,.82);}
body.spx-public .spx-more-link svg{width:12px;height:12px;}

/* --- Phase 5: Command Center cockpit-style --- */
body.spx-public .spx-cmd-v139{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding:clamp(40px,6vw,72px) clamp(20px,5vw,60px);max-width:1280px;margin:0 auto;}
body.spx-public .spx-cmd-v139 .spx-dashboard-static-copy h2{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:800;margin:0 0 10px;line-height:1.2;}
body.spx-public .spx-cmd-v139 .spx-dashboard-static-copy>p{font-size:.88rem;color:rgba(255,255,255,.54);line-height:1.75;margin:0 0 24px;}
body.spx-public .spx-cmd-module-tabs{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
body.spx-public .spx-cmd-tab{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;font-family:inherit;cursor:pointer;text-align:left;color:inherit;}
body.spx-public .spx-cmd-tab.is-active{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.22);}
body.spx-public .spx-cmd-tab-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);flex-shrink:0;}
body.spx-public .spx-cmd-tab.is-active .spx-cmd-tab-dot{background:#3b82f6;}
body.spx-public .spx-cmd-tab-text{display:flex;flex-direction:column;gap:1px;}
body.spx-public .spx-cmd-tab-text b{font-size:.82rem;color:rgba(255,255,255,.7);font-weight:600;}
body.spx-public .spx-cmd-tab.is-active .spx-cmd-tab-text b{color:rgba(255,255,255,.92);}
body.spx-public .spx-cmd-tab-text small{font-size:.71rem;color:rgba(255,255,255,.4);}
body.spx-public .spx-cmd-panels{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:14px;min-height:54px;}
body.spx-public .spx-cmd-panel-stats{display:flex;gap:10px;flex-wrap:wrap;}
body.spx-public .spx-cmd-panel-stats span{display:flex;flex-direction:column;gap:2px;padding:10px 14px;background:rgba(255,255,255,.04);border-radius:7px;min-width:80px;}
body.spx-public .spx-cmd-panel-stats b{font-size:.92rem;font-weight:700;color:rgba(255,255,255,.88);}
body.spx-public .spx-cmd-panel-stats small{font-size:.67rem;color:rgba(255,255,255,.38);}
body.spx-public .spx-dashboard-static-visual{margin:0;}
body.spx-public .spx-dashboard-static-shot{width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.09);display:block;box-shadow:0 8px 32px rgba(0,0,0,.35);}
body.spx-public .spx-dashboard-static-shot--light{display:none;}
html[data-theme="light"] body.spx-public .spx-dashboard-static-shot--dark,
html[data-spx-theme="light"] body.spx-public .spx-dashboard-static-shot--dark{display:none;}
html[data-theme="light"] body.spx-public .spx-dashboard-static-shot--light,
html[data-spx-theme="light"] body.spx-public .spx-dashboard-static-shot--light{display:block;}
body.spx-public .spx-dashboard-static-visual figcaption{display:flex;flex-direction:column;gap:3px;padding:12px 0 0;font-size:.78rem;color:rgba(255,255,255,.38);}
body.spx-public .spx-dashboard-static-visual figcaption strong{font-size:.83rem;color:rgba(255,255,255,.6);font-weight:500;}

/* --- Phase 7: Product updates polish --- */
body.spx-public .spx-updates-hero-v138h-inner{max-width:680px;}
body.spx-public .spx-updates-hero-v138h h1{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;letter-spacing:-.025em;}
body.spx-public .spx-updates-pinned-v138h-inner{padding:28px 32px;}

/* --- Phase 8: Roadmap alignment --- */
body.spx-public .spx-rdm-hero-v138j{padding:clamp(48px,7vw,88px) clamp(20px,5vw,60px) 40px;max-width:1280px;margin:0 auto;}
body.spx-public .spx-rdm-hero-inner{max-width:640px;}
body.spx-public .spx-rdm-hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
body.spx-public .spx-rdm-phases-v138j{padding-left:clamp(20px,5vw,60px);padding-right:clamp(20px,5vw,60px);}
body.spx-public .spx-rdm-legend-v138k{padding-left:clamp(20px,5vw,60px);padding-right:clamp(20px,5vw,60px);}
body.spx-public .spx-rdm-available-v138k{padding-left:clamp(20px,5vw,60px);padding-right:clamp(20px,5vw,60px);}
body.spx-public .spx-rdm-alpha-v138j{max-width:1280px;margin:0 auto;padding-left:clamp(20px,5vw,60px);padding-right:clamp(20px,5vw,60px);}

/* --- A8.138m responsive --- */
@media(max-width:1000px){
  body.spx-public .spx-export-v139-head{flex-direction:column;gap:28px;}
  body.spx-public .spx-export-v139-proof{flex-direction:row;gap:10px;}
  body.spx-public .spx-cmd-v139{grid-template-columns:1fr;}
}
@media(max-width:768px){
  body.spx-public .spx-export-v139-grid{grid-template-columns:1fr;}
  body.spx-public .spx-alpha-v138h-copy{max-width:100%;flex:none;}
}
@media(max-width:600px){
  body.spx-public .spx-export-v139-proof{flex-wrap:wrap;}
  body.spx-public .spx-support-cta-v138h-inner{padding:24px;}
}

/* A8.138n - public CMS, navigation, feature/detail and page finalization */
body.spx-public .site-header.spx-nav-v26{z-index:10000;}
body.spx-public .site-header.spx-nav-v26 .site-nav.spx-nav-simple-v138n{gap:18px;}
body.spx-public .site-header.spx-nav-v26 .spx-nav-support-link{display:inline-flex;align-items:center;gap:7px;}
@media(min-width:1101px){
  body.spx-public .site-header.spx-nav-v26 .nav-group{position:relative;z-index:2;}
  body.spx-public .site-header.spx-nav-v26 .nav-group::after{content:"";position:absolute;left:-18px;right:-18px;top:100%;height:18px;display:block;}
  body.spx-public .site-header.spx-nav-v26 .nav-group>.nav-menu{top:calc(100% + 8px)!important;z-index:10020!important;pointer-events:none!important;}
  body.spx-public .site-header.spx-nav-v26 .nav-group:hover>.nav-menu,
  body.spx-public .site-header.spx-nav-v26 .nav-group:focus-within>.nav-menu{pointer-events:auto!important;}
}
@media(max-width:1100px){
  body.spx-public .site-header.spx-nav-v26 .site-nav.spx-nav-simple-v138n{gap:8px;}
  body.spx-public .site-header.spx-nav-v26 .site-nav.spx-nav-simple-v138n>a{justify-content:flex-start!important;}
  body.spx-public .nav-mobile-actions{grid-template-columns:1fr 1fr!important;}
}

body.spx-public .spx-cms-toolbar{position:fixed;top:0;left:0;right:0;z-index:10030;padding:10px clamp(14px,3vw,28px);background:linear-gradient(135deg,rgba(3,8,18,.96),rgba(7,18,34,.94));border-bottom:1px solid rgba(126,231,255,.18);box-shadow:0 18px 50px rgba(0,0,0,.28);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);}
body.spx-public .spx-cms-toolbar-inner{display:flex;align-items:center;gap:12px;max-width:1280px;margin:0 auto;flex-wrap:wrap;color:#eefaff;}
body.spx-public .spx-cms-toolbar-brand,body.spx-public .spx-cms-toolbar-page,body.spx-public .spx-cms-toolbar-status{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(255,255,255,.05);font-size:12px;font-weight:850;}
body.spx-public .spx-cms-toolbar-brand{color:#8ff0ff;}
body.spx-public .spx-cms-toolbar-page{color:rgba(235,246,255,.76);}
body.spx-public .spx-cms-toolbar-status{margin-left:auto;color:rgba(235,246,255,.70);}
body.spx-public .spx-cms-status-dot{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 18px rgba(34,197,94,.7);}
body.spx-public .spx-cms-toolbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
body.spx-public .spx-cms-btn{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:8px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.12);text-decoration:none;color:rgba(235,246,255,.84);font-size:12px;font-weight:900;background:rgba(255,255,255,.045);transition:transform .18s ease,border-color .18s ease,background .18s ease;}
body.spx-public .spx-cms-btn:hover{transform:translateY(-1px);border-color:rgba(126,231,255,.28);background:rgba(126,231,255,.08);}
body.spx-public .spx-cms-btn-exit{border-color:rgba(248,113,113,.25);color:#fecaca;}
body.spx-public .spx-public-edit-mode [data-content-key]{outline:1px dashed rgba(34,211,238,.42);outline-offset:5px;border-radius:8px;}
body.spx-public .spx-public-edit-mode [data-content-key]:hover{outline-color:rgba(34,211,238,.85);background:rgba(34,211,238,.045);}
html[data-theme="light"] body.spx-public .spx-cms-toolbar,html[data-spx-theme="light"] body.spx-public .spx-cms-toolbar{background:rgba(255,255,255,.96);border-bottom-color:rgba(14,165,233,.18);box-shadow:0 16px 40px rgba(15,23,42,.12);}
html[data-theme="light"] body.spx-public .spx-cms-toolbar-inner,html[data-spx-theme="light"] body.spx-public .spx-cms-toolbar-inner{color:#0f172a;}
html[data-theme="light"] body.spx-public .spx-cms-toolbar-brand,html[data-theme="light"] body.spx-public .spx-cms-toolbar-page,html[data-theme="light"] body.spx-public .spx-cms-toolbar-status,html[data-spx-theme="light"] body.spx-public .spx-cms-toolbar-brand,html[data-spx-theme="light"] body.spx-public .spx-cms-toolbar-page,html[data-spx-theme="light"] body.spx-public .spx-cms-toolbar-status{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.10);color:#0f172a;}
html[data-theme="light"] body.spx-public .spx-cms-btn,html[data-spx-theme="light"] body.spx-public .spx-cms-btn{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.10);color:#0f172a;}

body.spx-public .spx-kb-card{cursor:pointer!important;text-align:left;font-family:inherit;color:inherit;}
body.spx-public .spx-kb-card-read{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;color:#67e8f9;font-size:12px;font-weight:850;}
body.spx-public .spx-kb-modal[hidden]{display:none!important;}
body.spx-public .spx-kb-modal{position:fixed;inset:0;z-index:10040;display:grid;place-items:center;padding:22px;}
body.spx-public .spx-kb-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
body.spx-public .spx-kb-modal-dialog{position:relative;z-index:1;width:min(760px,calc(100vw - 32px));max-height:min(82svh,760px);overflow:auto;border:1px solid rgba(218,236,255,.14);border-radius:24px;background:linear-gradient(180deg,rgba(9,18,34,.98),rgba(5,10,22,.98));box-shadow:0 34px 110px rgba(0,0,0,.54);color:#eef6ff;}
body.spx-public .spx-kb-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.08);}
body.spx-public .spx-kb-modal-cat{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(34,211,238,.10);color:#67e8f9;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;}
body.spx-public .spx-kb-modal-close{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:inherit;cursor:pointer;}
body.spx-public .spx-kb-modal-body{padding:24px 28px 8px;}
body.spx-public .spx-kb-modal-title{font-size:clamp(24px,3vw,36px);line-height:1.1;margin:0 0 16px;}
body.spx-public .spx-kb-modal-content{color:rgba(235,246,255,.78);line-height:1.75;font-size:15px;}
body.spx-public .spx-kb-modal-content :is(p,ul,ol){margin:0 0 14px;}
body.spx-public .spx-kb-modal-content a{color:#67e8f9;}
body.spx-public .spx-kb-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 28px 24px;border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap;}
body.spx-public .spx-kb-modal-footer-note{color:rgba(235,246,255,.55);font-size:13px;font-weight:800;}
html[data-theme="light"] body.spx-public .spx-kb-modal-dialog,html[data-spx-theme="light"] body.spx-public .spx-kb-modal-dialog{background:#fff;color:#0f172a;border-color:rgba(15,23,42,.10);box-shadow:0 30px 90px rgba(15,23,42,.24);}
html[data-theme="light"] body.spx-public .spx-kb-modal-content,html[data-spx-theme="light"] body.spx-public .spx-kb-modal-content{color:rgba(15,23,42,.72);}

body.spx-public .spx-feat-breadcrumb-v138n,body.spx-public .spx-feat-breadcrumb-v138j{display:flex;align-items:center;gap:8px;padding:26px clamp(20px,5vw,60px) 0;max-width:1280px;margin:0 auto;color:rgba(235,246,255,.55);font-size:13px;font-weight:850;}
body.spx-public .spx-feat-breadcrumb-v138n a,body.spx-public .spx-feat-breadcrumb-v138j a{text-decoration:none;color:inherit;}
body.spx-public .spx-feat-hero-v138n{--feat-c1:37,210,255;display:grid;grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);gap:clamp(28px,5vw,64px);align-items:center;max-width:1280px;margin:0 auto;padding:clamp(42px,7vw,88px) clamp(20px,5vw,60px) clamp(32px,5vw,64px);}
body.spx-public [data-feature-accent="blue"]{--feat-c1:59,130,246;}
body.spx-public [data-feature-accent="cyan"]{--feat-c1:34,211,238;}
body.spx-public [data-feature-accent="green"]{--feat-c1:34,197,94;}
body.spx-public [data-feature-accent="teal"]{--feat-c1:20,184,166;}
body.spx-public [data-feature-accent="purple"]{--feat-c1:168,85,247;}
body.spx-public [data-feature-accent="violet"]{--feat-c1:139,92,246;}
body.spx-public [data-feature-accent="indigo"]{--feat-c1:99,102,241;}
body.spx-public [data-feature-accent="amber"]{--feat-c1:245,158,11;}
body.spx-public .spx-feat-hero-kicker{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
body.spx-public .spx-feat-status-chip,body.spx-public .spx-feat-badge-inline{display:inline-flex;align-items:center;padding:6px 11px;border-radius:999px;border:1px solid rgba(var(--feat-c1),.24);background:rgba(var(--feat-c1),.09);color:rgb(var(--feat-c1));font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;}
body.spx-public .spx-feat-badge-inline{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.045);color:rgba(235,246,255,.62);}
body.spx-public .spx-feat-hero-v138n h1{font-size:clamp(42px,6.2vw,78px);line-height:.98;letter-spacing:-.05em;margin:0 0 20px;}
body.spx-public .spx-feat-hero-lead{font-size:clamp(17px,2vw,22px);line-height:1.6;color:rgba(235,246,255,.72);max-width:650px;}
body.spx-public .spx-feat-hero-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:24px 0;}
body.spx-public .spx-feat-hero-proof-item{padding:13px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);}
body.spx-public .spx-feat-hero-proof-item b{display:block;color:rgb(var(--feat-c1));font-size:20px;line-height:1;}
body.spx-public .spx-feat-hero-proof-item small{color:rgba(235,246,255,.52);font-size:12px;font-weight:800;}
body.spx-public .spx-feat-hero-actions,.spx-feat-cta-actions{display:flex;gap:12px;flex-wrap:wrap;}
body.spx-public .spx-feat-hero-screen-wrap{position:relative;}
body.spx-public .spx-feat-hero-screen-frame{overflow:hidden;border-radius:24px;border:1px solid rgba(255,255,255,.12);background:#040814;box-shadow:0 30px 90px rgba(0,0,0,.35);}
body.spx-public .spx-feat-hero-screen-dots{display:flex;gap:7px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);}
body.spx-public .spx-feat-hero-screen-dots span{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.20);}
body.spx-public .spx-feat-hero-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;}
body.spx-public .spx-feature-visual-layer{position:absolute;left:18px;right:18px;bottom:-22px;padding:16px;border-radius:18px;border:1px solid rgba(var(--feat-c1),.26);background:rgba(4,10,22,.88);box-shadow:0 18px 55px rgba(0,0,0,.32);backdrop-filter:blur(14px);}
body.spx-public .spx-feature-visual-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
body.spx-public .spx-feature-visual-head span{color:rgb(var(--feat-c1));font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;}
body.spx-public .spx-feature-visual-head strong{font-size:13px;color:#fff;}
body.spx-public .spx-feature-visual-body{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;}
body.spx-public .spx-feature-visual-body ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
body.spx-public .spx-feature-visual-body li{padding:7px 9px;border-radius:10px;background:rgba(255,255,255,.055);font-size:12px;color:rgba(235,246,255,.70);}
body.spx-public .spx-feature-visual-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
body.spx-public .spx-feature-visual-chips span{padding:6px 8px;border-radius:999px;background:rgba(var(--feat-c1),.10);color:rgb(var(--feat-c1));font-size:11px;font-weight:850;}
body.spx-public .spx-feat-why-v138n,.spx-feat-how-v138n,.spx-feat-cta-v138n,.spx-feat-related-v138n,.spx-feat-faq-v138n{max-width:1280px;margin:0 auto;padding:clamp(34px,5vw,66px) clamp(20px,5vw,60px);}
body.spx-public .spx-feat-why-inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr);gap:24px;align-items:start;padding:28px;border:1px solid rgba(var(--feat-c1),.16);border-radius:24px;background:linear-gradient(135deg,rgba(var(--feat-c1),.075),rgba(255,255,255,.025));}
body.spx-public .spx-feat-why-copy p{font-size:17px;line-height:1.75;color:rgba(235,246,255,.76);margin:0;}
body.spx-public .spx-feat-why-list{display:grid;gap:10px;}
body.spx-public .spx-feat-why-item{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);}
body.spx-public .spx-feat-why-item strong{display:block;color:#fff;font-size:13px;}
body.spx-public .spx-feat-why-item span{display:block;color:rgba(235,246,255,.60);font-size:12px;line-height:1.5;}
body.spx-public .spx-feat-how-head,.spx-feat-faq-head,.spx-feat-related-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:18px;}
body.spx-public .spx-feat-how-head h2,.spx-feat-cta-copy h2,.spx-feat-faq-head h2{font-size:clamp(26px,4vw,46px);letter-spacing:-.035em;line-height:1.08;margin:0;}
body.spx-public .spx-feat-how-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
body.spx-public .spx-feat-how-step{display:grid;gap:16px;align-content:start;min-height:230px;padding:20px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);}
body.spx-public .spx-feat-how-num{font-size:12px;font-weight:950;color:rgb(var(--feat-c1));}
body.spx-public .spx-feat-how-step h3{margin:0 0 8px;font-size:18px;}
body.spx-public .spx-feat-how-step p{margin:0;color:rgba(235,246,255,.62);line-height:1.6;font-size:13px;}
body.spx-public .spx-feat-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;border-radius:24px;border:1px solid rgba(var(--feat-c1),.18);background:linear-gradient(135deg,rgba(var(--feat-c1),.10),rgba(255,255,255,.035));}
body.spx-public .spx-feat-cta-copy p{color:rgba(235,246,255,.66);max-width:650px;}
body.spx-public .spx-feat-related-all,.spx-feat-related-item{color:inherit;text-decoration:none;}
body.spx-public .spx-feat-related-grid{display:flex;gap:10px;flex-wrap:wrap;}
body.spx-public .spx-feat-related-item{padding:10px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);font-size:13px;font-weight:850;color:rgba(235,246,255,.74);}
body.spx-public .spx-feat-related-item:hover{border-color:rgba(var(--feat-c1),.28);color:#fff;background:rgba(var(--feat-c1),.08);}

body.spx-public .spx-carts-planned-hero{padding:clamp(54px,8vw,96px) clamp(20px,5vw,60px);text-align:center;}
body.spx-public .spx-carts-planned-inner{max-width:820px;margin:0 auto;}
body.spx-public .spx-carts-planned-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:rgba(148,163,184,.10);border:1px solid rgba(148,163,184,.22);color:rgba(235,246,255,.72);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;}
body.spx-public .spx-carts-planned-hero h1{font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.05em;margin:18px 0;}
body.spx-public .spx-carts-planned-lead{font-size:clamp(17px,2vw,22px);line-height:1.6;color:rgba(235,246,255,.72);}
body.spx-public .spx-carts-planned-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px;}
body.spx-public .spx-carts-planned-actions .btn[disabled]{opacity:.62;cursor:not-allowed;}
body.spx-public .spx-carts-planned-detail{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,60px) 64px;}
body.spx-public .spx-carts-planned-why{padding:28px;border-radius:24px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.035);}
body.spx-public .spx-carts-planned-why h2{font-size:clamp(26px,3.5vw,44px);line-height:1.08;margin:8px 0 14px;}
body.spx-public .spx-carts-planned-why p{color:rgba(235,246,255,.68);line-height:1.75;}
body.spx-public .spx-carts-planned-signals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px;}
body.spx-public .spx-carts-signal{padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);}
body.spx-public .spx-carts-signal b{display:block;margin-bottom:7px;}
body.spx-public .spx-carts-signal span{display:block;color:rgba(235,246,255,.58);font-size:13px;line-height:1.55;}

body.spx-public .spx-fov-legend-v138k,.spx-rdm-legend-v138k{max-width:1180px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}
body.spx-public .spx-fov-legend-item,.spx-rdm-legend-item{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);font-size:12px;font-weight:850;color:rgba(235,246,255,.68);}
body.spx-public .spx-fov-legend-dot,.spx-rdm-legend-dot{width:8px;height:8px;border-radius:999px;background:currentColor;}
body.spx-public .spx-fov-legend--available,.spx-rdm-legend--available{color:#5eead4;}
body.spx-public .spx-fov-legend--alpha,.spx-rdm-legend--active{color:#67e8f9;}
body.spx-public .spx-fov-legend--planned,.spx-rdm-legend--planned{color:#c4b5fd;}
body.spx-public .spx-fov-legend--parked,.spx-rdm-legend--later{color:#94a3b8;}
body.spx-public .spx-rdm-legend--next{color:#93c5fd;}
body.spx-public .spx-fov-card[data-feature-status="available-in-alpha"],body.spx-public .spx-fov-card[data-feature-status="available"]{border-color:rgba(45,212,191,.20);background:linear-gradient(145deg,rgba(20,184,166,.10),rgba(255,255,255,.025));}
body.spx-public .spx-fov-card[data-feature-status="alpha"]{border-color:rgba(34,211,238,.20);background:linear-gradient(145deg,rgba(14,165,233,.10),rgba(255,255,255,.025));}
body.spx-public .spx-fov-card[data-feature-status="planned"]{border-color:rgba(139,92,246,.22);background:linear-gradient(145deg,rgba(139,92,246,.10),rgba(255,255,255,.025));}
body.spx-public .spx-fov-card[data-feature-status="parked"]{border-color:rgba(148,163,184,.16);background:linear-gradient(145deg,rgba(148,163,184,.075),rgba(255,255,255,.018));}
body.spx-public .spx-rdm-phase--active .spx-rdm-card{border-color:rgba(34,211,238,.18);background:linear-gradient(145deg,rgba(34,211,238,.075),rgba(255,255,255,.02));}
body.spx-public .spx-rdm-phase--next .spx-rdm-card{border-color:rgba(59,130,246,.20);background:linear-gradient(145deg,rgba(59,130,246,.08),rgba(255,255,255,.02));}
body.spx-public .spx-rdm-phase--planned .spx-rdm-card{border-color:rgba(139,92,246,.20);background:linear-gradient(145deg,rgba(139,92,246,.075),rgba(255,255,255,.02));}
body.spx-public .spx-rdm-phase--later .spx-rdm-card{border-color:rgba(148,163,184,.14);background:linear-gradient(145deg,rgba(148,163,184,.06),rgba(255,255,255,.018));}
body.spx-public .spx-rdm-available-v138k{max-width:1180px;margin:0 auto 26px;border-radius:22px;border:1px solid rgba(45,212,191,.16);background:rgba(20,184,166,.055);}
body.spx-public .spx-rdm-alpha-v138j{margin-top:10px!important;}

body.spx-public .spx-export-v139{border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);}
body.spx-public .spx-export-v138n-workbench{display:grid;grid-template-columns:minmax(250px,.38fr) minmax(0,.62fr);gap:18px;max-width:1180px;margin:0 auto 28px;padding:0 clamp(20px,5vw,60px);}
body.spx-public .spx-export-v138n-steps{display:grid;gap:10px;}
body.spx-public .spx-export-v138n-step{display:flex;align-items:flex-start;gap:12px;text-align:left;padding:15px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:inherit;font:inherit;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease;}
body.spx-public .spx-export-v138n-step:hover,body.spx-public .spx-export-v138n-step.is-active{transform:translateY(-1px);border-color:rgba(34,211,238,.25);background:rgba(34,211,238,.08);}
body.spx-public .spx-export-v138n-step b{display:block;font-size:14px;}
body.spx-public .spx-export-v138n-step small{display:block;color:rgba(235,246,255,.55);line-height:1.45;}
body.spx-public .spx-export-v138n-num{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(34,211,238,.12);color:#67e8f9;font-weight:950;}
body.spx-public .spx-export-v138n-output{position:relative;min-height:320px;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:linear-gradient(145deg,rgba(7,16,32,.92),rgba(4,8,18,.88));overflow:hidden;}
body.spx-public .spx-export-v138n-panel{position:absolute;inset:0;display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;padding:24px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .22s ease,transform .22s ease;}
body.spx-public .spx-export-v138n-panel.is-active{opacity:1;transform:none;pointer-events:auto;}
body.spx-public .spx-export-v138n-panel h3{font-size:clamp(24px,3vw,38px);line-height:1.08;margin:0 0 10px;}
body.spx-public .spx-export-v138n-panel p{color:rgba(235,246,255,.64);line-height:1.7;margin:0;}
body.spx-public .spx-export-v138n-preview{display:grid;align-content:center;gap:10px;}
body.spx-public .spx-export-v138n-preview-row{height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);}
body.spx-public .spx-export-v138n-preview-row.is-accent{background:linear-gradient(90deg,rgba(34,211,238,.25),rgba(59,130,246,.08));border-color:rgba(34,211,238,.22);}

body.spx-public .spx-cmd-v139{position:relative;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(4,10,22,.20),rgba(4,10,22,.04));}
body.spx-public .spx-cmd-next-action{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border-radius:999px;border:1px solid rgba(34,211,238,.18);background:rgba(34,211,238,.08);color:#67e8f9;font-size:13px;font-weight:900;}
body.spx-public .spx-dashboard-static-visual{position:relative;}
body.spx-public .spx-cmd-preview-card{position:absolute;left:18px;bottom:18px;right:18px;padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(3,8,18,.82);backdrop-filter:blur(12px);box-shadow:0 20px 60px rgba(0,0,0,.26);}
body.spx-public .spx-cmd-preview-card b{display:block;color:#fff;}
body.spx-public .spx-cmd-preview-card span{display:block;color:rgba(235,246,255,.62);font-size:12px;margin-top:3px;}

body.spx-public .spx-alpha-v138h{max-width:1280px;margin:0 auto!important;padding-left:clamp(20px,5vw,60px)!important;padding-right:clamp(20px,5vw,60px)!important;}
body.spx-public .spx-alpha-v138h-inner{max-width:1120px;margin:0 auto;align-items:center;}
body.spx-public .spx-pricing-v139-head{max-width:1120px;margin:0 auto 22px;text-align:left;}
body.spx-public .spx-pricing-v139-head h2{max-width:720px;}
body.spx-public .spx-pricing-v139-head p{max-width:620px;margin-left:0;}
body.spx-public[data-route="/pricing"] .page-hero.compact{max-width:1120px;margin-left:auto;margin-right:auto;text-align:left;align-items:flex-start;}
body.spx-public[data-route="/pricing"] .page-hero.compact p{max-width:660px;margin-left:0;}

body.spx-public .spx-updates-hero-v138h{position:relative;padding:clamp(58px,8vw,104px) clamp(20px,5vw,60px) 36px;}
body.spx-public .spx-updates-hero-v138h-inner{display:grid;grid-template-columns:minmax(0,.74fr) minmax(270px,.26fr);gap:28px;align-items:end;max-width:1180px!important;margin:0 auto;}
body.spx-public .spx-updates-hero-v138h-status,body.spx-public .spx-updates-hero-v138h-inner>.eyebrow,body.spx-public .spx-updates-hero-v138h h1,body.spx-public .spx-updates-hero-v138h p{grid-column:1;}
body.spx-public .spx-updates-hero-v138n-panel{padding:18px;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:rgba(255,255,255,.04);}
body.spx-public .spx-updates-hero-v138n-panel{grid-column:2;grid-row:1 / span 4;}
body.spx-public .spx-updates-hero-v138n-panel b{display:block;font-size:28px;color:#67e8f9;}
body.spx-public .spx-updates-hero-v138n-panel span{display:block;color:rgba(235,246,255,.58);font-size:13px;line-height:1.55;margin-top:4px;}
body.spx-public .spx-updates-body-v138h{max-width:1180px;margin:0 auto;padding-left:clamp(20px,5vw,60px);padding-right:clamp(20px,5vw,60px);}
body.spx-public .spx-updates-filter-row-v138h{justify-content:flex-start;margin:0 0 22px;}
body.spx-public .spx-ufilter{transition:transform .16s ease,border-color .16s ease,background .16s ease;}
body.spx-public .spx-ufilter:hover{transform:translateY(-1px);}

html[data-theme="light"] body.spx-public .spx-feat-hero-lead,
html[data-theme="light"] body.spx-public .spx-feat-why-copy p,
html[data-theme="light"] body.spx-public .spx-feat-how-step p,
html[data-theme="light"] body.spx-public .spx-carts-planned-lead,
html[data-theme="light"] body.spx-public .spx-carts-planned-why p,
html[data-spx-theme="light"] body.spx-public .spx-feat-hero-lead,
html[data-spx-theme="light"] body.spx-public .spx-feat-why-copy p,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-step p,
html[data-spx-theme="light"] body.spx-public .spx-carts-planned-lead,
html[data-spx-theme="light"] body.spx-public .spx-carts-planned-why p{color:rgba(15,23,42,.68);}
html[data-theme="light"] body.spx-public .spx-feat-why-inner,
html[data-theme="light"] body.spx-public .spx-feat-how-step,
html[data-theme="light"] body.spx-public .spx-feat-cta-inner,
html[data-theme="light"] body.spx-public .spx-carts-planned-why,
html[data-theme="light"] body.spx-public .spx-carts-signal,
html[data-spx-theme="light"] body.spx-public .spx-feat-why-inner,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-step,
html[data-spx-theme="light"] body.spx-public .spx-feat-cta-inner,
html[data-spx-theme="light"] body.spx-public .spx-carts-planned-why,
html[data-spx-theme="light"] body.spx-public .spx-carts-signal{background:rgba(255,255,255,.84);border-color:rgba(15,23,42,.10);}
html[data-theme="light"] body.spx-public .spx-feature-visual-layer,html[data-spx-theme="light"] body.spx-public .spx-feature-visual-layer{background:rgba(255,255,255,.90);border-color:rgba(var(--feat-c1),.22);}
html[data-theme="light"] body.spx-public .spx-feature-visual-head strong,html[data-theme="light"] body.spx-public .spx-feat-why-item strong,html[data-spx-theme="light"] body.spx-public .spx-feature-visual-head strong,html[data-spx-theme="light"] body.spx-public .spx-feat-why-item strong{color:#0f172a;}
html[data-theme="light"] body.spx-public .spx-export-v138n-output,html[data-spx-theme="light"] body.spx-public .spx-export-v138n-output{background:#fff;border-color:rgba(15,23,42,.10);}
html[data-theme="light"] body.spx-public .spx-export-v138n-panel p,html[data-spx-theme="light"] body.spx-public .spx-export-v138n-panel p{color:rgba(15,23,42,.68);}
html[data-theme="light"] body.spx-public .spx-cmd-preview-card,html[data-spx-theme="light"] body.spx-public .spx-cmd-preview-card{background:rgba(255,255,255,.86);border-color:rgba(15,23,42,.10);}
html[data-theme="light"] body.spx-public .spx-cmd-preview-card b,html[data-spx-theme="light"] body.spx-public .spx-cmd-preview-card b{color:#0f172a;}

@media(max-width:980px){
  body.spx-public .spx-feat-hero-v138n,body.spx-public .spx-feat-why-inner,body.spx-public .spx-export-v138n-workbench,body.spx-public .spx-updates-hero-v138h-inner{grid-template-columns:1fr;}
  body.spx-public .spx-feat-hero-screen-wrap{margin-bottom:20px;}
  body.spx-public .spx-feat-how-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.spx-public .spx-carts-planned-signals{grid-template-columns:1fr;}
  body.spx-public .spx-cms-toolbar-status{margin-left:0;}
  body.spx-public .spx-updates-hero-v138n-panel{grid-column:1;grid-row:auto;}
}
@media(max-width:640px){
  body.spx-public .spx-feat-hero-proof,body.spx-public .spx-feat-how-steps{grid-template-columns:1fr;}
  body.spx-public .spx-feature-visual-layer{position:relative;left:auto;right:auto;bottom:auto;margin-top:12px;}
  body.spx-public .spx-feature-visual-body{grid-template-columns:1fr;}
  body.spx-public .spx-feature-visual-body ul{grid-template-columns:1fr;}
  body.spx-public .spx-feat-cta-inner{display:grid;}
  body.spx-public .spx-export-v138n-panel{position:relative;grid-template-columns:1fr;display:none;min-height:0;}
  body.spx-public .spx-export-v138n-panel.is-active{display:grid;}
  body.spx-public .spx-export-v138n-output{min-height:0;}
  body.spx-public .spx-dashboard-static-visual .spx-cmd-preview-card{position:relative;left:auto;right:auto;bottom:auto;margin-top:12px;}
}

/* A8.138o - public interaction and visual refinement */
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body.spx-public #pricing{scroll-margin-top:118px;}
body.spx-public .site-header.spx-nav-v26{isolation:isolate;}
body.spx-public .site-header.spx-nav-v26 .site-nav.spx-nav-simple-v138n{align-items:center;}
body.spx-public .site-header.spx-nav-v26 .spx-features-menu-v138n>.spx-nav-features-trigger{position:relative;z-index:2;}
body.spx-public .site-header.spx-nav-v26 .spx-features-dropdown{width:min(820px,calc(100vw - 38px))!important;padding:14px!important;border-radius:22px!important;border:1px solid rgba(126,231,255,.18)!important;background:linear-gradient(145deg,rgba(7,15,31,.98),rgba(3,8,18,.96))!important;box-shadow:0 34px 110px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.07)!important;backdrop-filter:blur(22px) saturate(145%)!important;-webkit-backdrop-filter:blur(22px) saturate(145%)!important;transform:translate(-50%,12px) scale(.985)!important;transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1),visibility .18s step-end!important;}
body.spx-public .site-header.spx-nav-v26 .spx-features-menu-v138n:hover>.spx-features-dropdown,body.spx-public .site-header.spx-nav-v26 .spx-features-menu-v138n:focus-within>.spx-features-dropdown{transform:translate(-50%,0) scale(1)!important;transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s!important;}
body.spx-public .spx-features-dropdown::after{content:"";position:absolute;left:26px;right:26px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(103,232,249,.55),transparent);}
body.spx-public .spx-features-dropdown .nav-panel-lead{display:grid;gap:4px;margin:0 0 12px;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 18% 0%,rgba(34,211,238,.13),transparent 42%),rgba(255,255,255,.035);}
body.spx-public .spx-features-dropdown .nav-panel-lead strong{font-size:17px;letter-spacing:-.02em;color:#f4fbff;}
body.spx-public .spx-features-dropdown .nav-panel-lead small{color:rgba(232,245,255,.62);line-height:1.45;}
body.spx-public .spx-features-dropdown .spx-mega-compact-grid{gap:9px!important;}
body.spx-public .spx-features-dropdown .nav-feature-link{min-height:92px!important;border-radius:17px!important;padding:13px!important;border:1px solid rgba(255,255,255,.08)!important;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.026))!important;box-shadow:none!important;transform:none!important;}
body.spx-public .spx-features-dropdown .nav-feature-link:hover,body.spx-public .spx-features-dropdown .nav-feature-link:focus-visible{border-color:rgba(103,232,249,.32)!important;background:linear-gradient(180deg,rgba(34,211,238,.12),rgba(255,255,255,.035))!important;box-shadow:0 16px 42px rgba(2,8,23,.26)!important;transform:translateY(-2px)!important;}
body.spx-public .spx-features-dropdown .nav-feature-link i{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:rgba(34,211,238,.10);color:#8ff0ff;}
body.spx-public .spx-features-dropdown .nav-feature-text em{color:rgba(232,245,255,.58)!important;}
body.spx-public .spx-features-dropdown .nav-feature-link>strong{align-self:start;border-radius:999px;padding:4px 7px;background:rgba(34,197,94,.10);color:#86efac;font-size:10px;letter-spacing:.06em;text-transform:uppercase;}
body.spx-public .spx-mega-secondary-row{margin-top:10px!important;}
body.spx-public .spx-mega-secondary-row a{border-radius:14px!important;border-color:rgba(255,255,255,.08)!important;background:rgba(255,255,255,.035)!important;transition:transform .18s ease,border-color .18s ease,background .18s ease;}
body.spx-public .spx-mega-secondary-row a:hover,body.spx-public .spx-mega-secondary-row a:focus-visible{transform:translateY(-1px);border-color:rgba(167,139,250,.28)!important;background:rgba(167,139,250,.08)!important;}
body.spx-public .spx-mega-footer-row{display:flex;justify-content:flex-end;margin-top:12px;padding:0 2px;}
body.spx-public .spx-mega-all-link{display:inline-flex!important;align-items:center;gap:8px!important;min-height:38px!important;padding:9px 12px!important;border-radius:999px!important;border:1px solid rgba(103,232,249,.18)!important;background:rgba(34,211,238,.07)!important;color:#bdf7ff!important;text-decoration:none!important;font-weight:900!important;}
body.spx-public .spx-mega-all-link:hover{background:rgba(34,211,238,.13)!important;border-color:rgba(103,232,249,.34)!important;}
html[data-theme="light"] body.spx-public .site-header.spx-nav-v26 .spx-features-dropdown,html[data-spx-theme="light"] body.spx-public .site-header.spx-nav-v26 .spx-features-dropdown{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(240,247,255,.96))!important;border-color:rgba(15,23,42,.10)!important;box-shadow:0 30px 84px rgba(15,23,42,.16)!important;}
html[data-theme="light"] body.spx-public .spx-features-dropdown .nav-panel-lead,html[data-spx-theme="light"] body.spx-public .spx-features-dropdown .nav-panel-lead,html[data-theme="light"] body.spx-public .spx-features-dropdown .nav-feature-link,html[data-spx-theme="light"] body.spx-public .spx-features-dropdown .nav-feature-link,html[data-theme="light"] body.spx-public .spx-mega-secondary-row a,html[data-spx-theme="light"] body.spx-public .spx-mega-secondary-row a{background:rgba(255,255,255,.72)!important;border-color:rgba(15,23,42,.09)!important;color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-features-dropdown .nav-panel-lead strong,html[data-spx-theme="light"] body.spx-public .spx-features-dropdown .nav-panel-lead strong{color:#0f172a;}
html[data-theme="light"] body.spx-public .spx-features-dropdown .nav-panel-lead small,html[data-spx-theme="light"] body.spx-public .spx-features-dropdown .nav-panel-lead small,html[data-theme="light"] body.spx-public .spx-features-dropdown .nav-feature-text em,html[data-spx-theme="light"] body.spx-public .spx-features-dropdown .nav-feature-text em{color:rgba(15,23,42,.62)!important;}

body.spx-public[data-route^="/features/"] .spx-feat-breadcrumb-v138n,body.spx-public[data-route^="/features/"] .spx-feat-breadcrumb-v138j{position:relative;z-index:4;pointer-events:auto;padding-top:clamp(104px,9vw,132px)!important;padding-bottom:clamp(10px,2vw,18px)!important;color:rgba(235,246,255,.62)!important;}
body.spx-public .spx-feat-breadcrumb-v138n a,body.spx-public .spx-feat-breadcrumb-v138j a{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:inherit;text-decoration:none;transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease;}
body.spx-public .spx-feat-breadcrumb-v138n a:hover,body.spx-public .spx-feat-breadcrumb-v138j a:hover,body.spx-public .spx-feat-breadcrumb-v138n a:focus-visible,body.spx-public .spx-feat-breadcrumb-v138j a:focus-visible{transform:translateY(-1px);border-color:rgba(103,232,249,.24);background:rgba(34,211,238,.07);color:#eaffff;}
body.spx-public .spx-feat-bc-sep{opacity:.45;}
body.spx-public .spx-feat-breadcrumb-v138n>span,body.spx-public .spx-feat-breadcrumb-v138j>span{max-width:min(580px,58vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-theme="light"] body.spx-public .spx-feat-breadcrumb-v138n,html[data-spx-theme="light"] body.spx-public .spx-feat-breadcrumb-v138n,html[data-theme="light"] body.spx-public .spx-feat-breadcrumb-v138j,html[data-spx-theme="light"] body.spx-public .spx-feat-breadcrumb-v138j{color:rgba(15,23,42,.62)!important;}
html[data-theme="light"] body.spx-public .spx-feat-breadcrumb-v138n a,html[data-spx-theme="light"] body.spx-public .spx-feat-breadcrumb-v138n a,html[data-theme="light"] body.spx-public .spx-feat-breadcrumb-v138j a,html[data-spx-theme="light"] body.spx-public .spx-feat-breadcrumb-v138j a{background:rgba(255,255,255,.78);border-color:rgba(15,23,42,.10);}

body.spx-public .spx-feat-hero-v138n{position:relative;overflow:visible;}
body.spx-public .spx-feat-hero-v138n::before{content:"";position:absolute;inset:8% 3% auto auto;width:42%;height:46%;background:radial-gradient(circle at 50% 50%,rgba(var(--feat-c1),.12),transparent 64%);pointer-events:none;filter:blur(8px);opacity:.8;}
body.spx-public .spx-feat-hero-screen-wrap{perspective:1000px;transform-style:preserve-3d;transition:transform .28s ease,filter .28s ease;}
body.spx-public .spx-feat-hero-screen-wrap.is-pointer-active,body.spx-public .spx-cmd-visual-v138o.is-pointer-active,body.spx-public .spx-export-v138o-output.is-pointer-active{transform:rotateX(var(--spx-a138o-rx,0deg)) rotateY(var(--spx-a138o-ry,0deg)) translateY(-2px);}
body.spx-public .spx-feat-hero-screen-frame{transition:box-shadow .24s ease,border-color .24s ease,transform .24s ease;}
body.spx-public .spx-feat-hero-screen-wrap:hover .spx-feat-hero-screen-frame{border-color:rgba(var(--feat-c1),.34);box-shadow:0 34px 110px rgba(0,0,0,.42),0 0 0 1px rgba(var(--feat-c1),.12);}
body.spx-public .spx-feat-hero-proof-item,body.spx-public .spx-feat-why-item,body.spx-public .spx-feat-how-step,body.spx-public .spx-feat-related-item,body.spx-public .spx-export-v138o-step,body.spx-public .spx-cmd-tab,body.spx-public .spx-ucard-v138o{transition:opacity .36s ease,transform .36s cubic-bezier(.2,.8,.2,1),border-color .2s ease,background .2s ease,box-shadow .2s ease;}
body.spx-public .spx-feat-hero-proof-item:not(.is-a138o-visible),body.spx-public .spx-feat-why-item:not(.is-a138o-visible),body.spx-public .spx-feat-how-step:not(.is-a138o-visible),body.spx-public .spx-feat-related-item:not(.is-a138o-visible),body.spx-public .spx-export-v138o-step:not(.is-a138o-visible),body.spx-public .spx-cmd-tab:not(.is-a138o-visible),body.spx-public .spx-ucard-v138o:not(.is-a138o-visible){opacity:0;transform:translateY(calc(14px + var(--spx-a138o-i,0) * 1px));}
body.spx-public .spx-feat-hero-proof-item:hover,body.spx-public .spx-feat-why-item:hover,body.spx-public .spx-feat-how-step:hover,body.spx-public .spx-feat-related-item:hover{border-color:rgba(var(--feat-c1),.28);background:rgba(var(--feat-c1),.065);transform:translateY(-3px);}

body.spx-public .spx-export-v138o-workflow{position:relative;display:block!important;max-width:1180px!important;margin:0 auto 32px!important;padding:clamp(16px,3vw,22px)!important;border:1px solid rgba(126,231,255,.13);border-radius:28px;background:linear-gradient(145deg,rgba(7,16,32,.86),rgba(4,8,18,.76));box-shadow:0 26px 90px rgba(0,0,0,.26);overflow:hidden;}
body.spx-public .spx-export-v138o-workflow::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at calc(var(--spx-a138o-x,.18) * 100%) calc(var(--spx-a138o-y,.28) * 100%),rgba(34,211,238,.12),transparent 36%);pointer-events:none;opacity:.9;}
body.spx-public .spx-export-v138o-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;}
body.spx-public .spx-export-v138o-kicker{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(34,211,238,.10);color:#67e8f9;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;}
body.spx-public .spx-export-v138o-head strong{color:#effbff;font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;}
body.spx-public .spx-export-v138o-body{position:relative;z-index:1;display:grid;grid-template-columns:minmax(240px,.34fr) minmax(0,.66fr);gap:16px;}
body.spx-public .spx-export-v138o-step{min-height:112px;border-radius:20px!important;padding:16px!important;background:rgba(255,255,255,.035)!important;}
body.spx-public .spx-export-v138o-step.is-active{border-color:rgba(103,232,249,.38)!important;background:rgba(34,211,238,.10)!important;box-shadow:0 16px 48px rgba(8,145,178,.13);}
body.spx-public .spx-export-v138o-output{min-height:390px!important;border-radius:24px!important;background:linear-gradient(145deg,rgba(5,12,26,.96),rgba(8,17,34,.90))!important;transition:transform .24s ease,border-color .24s ease;}
body.spx-public .spx-export-v138o-rail{position:absolute;left:24px;right:24px;top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;z-index:2;}
body.spx-public .spx-export-v138o-rail span{height:4px;border-radius:999px;background:rgba(255,255,255,.10);}
body.spx-public .spx-export-v138o-workflow[data-export-active="build"] [data-export-rail-step="build"],body.spx-public .spx-export-v138o-workflow[data-export-active="review"] [data-export-rail-step="review"],body.spx-public .spx-export-v138o-workflow[data-export-active="handoff"] [data-export-rail-step="handoff"]{background:linear-gradient(90deg,#22d3ee,#3b82f6);}
body.spx-public .spx-export-v138o-panel{padding:52px 28px 28px!important;grid-template-columns:.95fr 1.05fr!important;align-items:center;}
body.spx-public .spx-export-v138o-panel-copy h3{font-size:clamp(30px,4.2vw,52px)!important;}
body.spx-public .spx-export-v138o-paths{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
body.spx-public .spx-export-v138o-paths span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:rgba(235,246,255,.72);font-size:12px;font-weight:850;}
body.spx-public .spx-export-v138o-preview{position:relative;padding:18px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
body.spx-public .spx-export-v138o-preview::before{content:"";height:84px;border-radius:16px;background:linear-gradient(135deg,rgba(34,211,238,.20),rgba(59,130,246,.06));display:block;margin-bottom:12px;}

body.spx-public .spx-cmd-v138o{max-width:1240px!important;margin:clamp(52px,8vw,100px) auto!important;padding:clamp(22px,4vw,34px)!important;border:1px solid rgba(126,231,255,.14)!important;border-radius:30px;background:radial-gradient(circle at 80% 12%,rgba(34,211,238,.12),transparent 32%),linear-gradient(145deg,rgba(6,14,30,.88),rgba(3,7,16,.80))!important;box-shadow:0 30px 100px rgba(0,0,0,.28);overflow:hidden;}
body.spx-public .spx-cmd-v138o .spx-dashboard-static-copy{display:grid;gap:16px;}
body.spx-public .spx-cmd-status-strip-v138o{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:2px 0 6px;}
body.spx-public .spx-cmd-status-strip-v138o span{padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);}
body.spx-public .spx-cmd-status-strip-v138o b{display:block;color:#eafcff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.spx-public .spx-cmd-status-strip-v138o small{display:block;margin-top:4px;color:rgba(235,246,255,.50);font-size:11px;font-weight:800;}
body.spx-public .spx-cmd-v138o .spx-cmd-module-tabs{display:grid;gap:9px;}
body.spx-public .spx-cmd-v138o .spx-cmd-tab{position:relative;overflow:hidden;border-radius:18px!important;background:rgba(255,255,255,.035)!important;}
body.spx-public .spx-cmd-v138o .spx-cmd-tab::after{content:"";position:absolute;inset:auto 12px 0;height:2px;background:linear-gradient(90deg,#22d3ee,#3b82f6);opacity:0;transform:scaleX(.35);transition:opacity .2s ease,transform .2s ease;}
body.spx-public .spx-cmd-v138o .spx-cmd-tab:hover,body.spx-public .spx-cmd-v138o .spx-cmd-tab.is-active{border-color:rgba(103,232,249,.30)!important;background:rgba(34,211,238,.08)!important;transform:translateX(3px);}
body.spx-public .spx-cmd-v138o .spx-cmd-tab.is-active::after{opacity:1;transform:scaleX(1);}
body.spx-public .spx-cmd-visual-v138o{position:relative;padding:42px 16px 16px;border-radius:26px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);transition:transform .24s ease,border-color .24s ease;}
body.spx-public .spx-cmd-visual-chrome-v138o{position:absolute;left:14px;right:14px;top:12px;display:flex;align-items:center;gap:7px;color:rgba(235,246,255,.50);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;}
body.spx-public .spx-cmd-visual-chrome-v138o span{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.20);}
body.spx-public .spx-cmd-visual-chrome-v138o b{margin-left:auto;}
body.spx-public .spx-cmd-focus-ring-v138o{position:absolute;inset:36px 12px 12px;border-radius:22px;border:1px solid rgba(103,232,249,.16);pointer-events:none;}
body.spx-public .spx-cmd-next-action{justify-self:start;}

body.spx-public .spx-pricing-v139-head{display:grid!important;grid-template-columns:minmax(180px,.28fr) minmax(0,.72fr);gap:clamp(16px,3vw,34px);align-items:start;max-width:1120px!important;margin:0 auto clamp(30px,5vw,48px)!important;padding:0!important;text-align:left!important;}
body.spx-public .spx-pricing-v138o-kicker{display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap;padding-top:7px;}
body.spx-public .spx-pricing-v138o-pill{display:inline-flex;padding:7px 11px;border-radius:999px;border:1px solid rgba(34,197,94,.22);background:rgba(34,197,94,.08);color:#86efac;font-size:12px;font-weight:900;}
body.spx-public .spx-pricing-v138o-copy h2{margin:0 0 12px!important;font-size:clamp(38px,5vw,68px)!important;line-height:1!important;letter-spacing:-.045em;}
body.spx-public .spx-pricing-v138o-copy p{margin:0!important;max-width:650px!important;font-size:clamp(16px,1.5vw,18px)!important;line-height:1.65;}

body.spx-public .spx-updates-hero-v138o{padding-top:clamp(92px,10vw,132px)!important;}
body.spx-public .spx-updates-hero-v138o::after{content:"";position:absolute;inset:auto 8% 0 8%;height:1px;background:linear-gradient(90deg,transparent,rgba(103,232,249,.22),transparent);}
body.spx-public .spx-updates-hero-copy-v138o{display:grid;gap:12px;}
body.spx-public .spx-updates-hero-v138o h1{font-size:clamp(44px,7vw,84px)!important;line-height:.96!important;letter-spacing:-.055em!important;margin:0!important;}
body.spx-public .spx-updates-hero-v138o p{font-size:clamp(17px,1.7vw,21px)!important;line-height:1.65!important;max-width:710px!important;}
body.spx-public .spx-updates-hero-v138n-panel{display:grid;gap:10px!important;padding:22px!important;border-radius:24px!important;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035))!important;}
body.spx-public .spx-updates-hero-latest-v138o{padding-top:12px;border-top:1px solid rgba(255,255,255,.08);}
body.spx-public .spx-updates-hero-latest-v138o strong{display:block;color:#eefbff;font-size:14px;}
body.spx-public .spx-updates-hero-latest-v138o small{display:block;margin-top:4px;color:rgba(235,246,255,.54);font-weight:800;}
body.spx-public .spx-updates-pinned-v138o{max-width:1180px!important;margin:0 auto 30px!important;border-radius:28px!important;border:1px solid rgba(126,231,255,.13)!important;background:linear-gradient(145deg,rgba(7,16,32,.86),rgba(4,8,18,.76))!important;box-shadow:0 26px 90px rgba(0,0,0,.24);}
body.spx-public .spx-updates-pinned-v138o .spx-updates-pinned-v138h-inner{padding:clamp(26px,5vw,48px)!important;}
body.spx-public .spx-updates-pinned-v138o h2{font-size:clamp(28px,4vw,48px)!important;line-height:1.05!important;letter-spacing:-.035em!important;}
body.spx-public .spx-updates-pinned-v138h-thumb{min-height:260px!important;width:min(36%,330px)!important;}
body.spx-public .spx-updates-body-v138o{max-width:1180px!important;}
body.spx-public .spx-updates-filter-head-v138o{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 0 14px;}
body.spx-public .spx-updates-filter-head-v138o span{font-size:20px;font-weight:950;color:#f4fbff;}
body.spx-public .spx-updates-filter-head-v138o small{color:rgba(235,246,255,.50);font-weight:800;}
body.spx-public .spx-updates-filter-row-v138o{padding:8px!important;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.035);}
body.spx-public .spx-updates-filter-row-v138o .spx-ufilter{border-radius:13px!important;}
body.spx-public .spx-updates-grid-v138o{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;}
body.spx-public .spx-ucard-v138o{border-radius:22px!important;border:1px solid rgba(255,255,255,.09)!important;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;overflow:hidden;}
body.spx-public .spx-ucard-v138o:hover{transform:translateY(-4px);border-color:rgba(103,232,249,.24)!important;box-shadow:0 20px 60px rgba(0,0,0,.22);}
body.spx-public .spx-updates-filter-empty-v138o{margin:14px 0 24px;padding:16px 18px;border-radius:18px;border:1px dashed rgba(126,231,255,.22);color:rgba(235,246,255,.62);background:rgba(34,211,238,.045);font-weight:850;}
html[data-theme="light"] body.spx-public .spx-export-v138o-workflow,html[data-spx-theme="light"] body.spx-public .spx-export-v138o-workflow,html[data-theme="light"] body.spx-public .spx-cmd-v138o,html[data-spx-theme="light"] body.spx-public .spx-cmd-v138o,html[data-theme="light"] body.spx-public .spx-updates-pinned-v138o,html[data-spx-theme="light"] body.spx-public .spx-updates-pinned-v138o{background:linear-gradient(145deg,#fff,rgba(242,248,255,.94))!important;border-color:rgba(15,23,42,.10)!important;box-shadow:0 24px 80px rgba(15,23,42,.12);}
html[data-theme="light"] body.spx-public .spx-export-v138o-head strong,html[data-spx-theme="light"] body.spx-public .spx-export-v138o-head strong,html[data-theme="light"] body.spx-public .spx-cmd-status-strip-v138o b,html[data-spx-theme="light"] body.spx-public .spx-cmd-status-strip-v138o b,html[data-theme="light"] body.spx-public .spx-updates-filter-head-v138o span,html[data-spx-theme="light"] body.spx-public .spx-updates-filter-head-v138o span,html[data-theme="light"] body.spx-public .spx-updates-hero-latest-v138o strong,html[data-spx-theme="light"] body.spx-public .spx-updates-hero-latest-v138o strong{color:#0f172a;}
html[data-theme="light"] body.spx-public .spx-cmd-status-strip-v138o span,html[data-spx-theme="light"] body.spx-public .spx-cmd-status-strip-v138o span,html[data-theme="light"] body.spx-public .spx-cmd-visual-v138o,html[data-spx-theme="light"] body.spx-public .spx-cmd-visual-v138o,html[data-theme="light"] body.spx-public .spx-updates-filter-row-v138o,html[data-spx-theme="light"] body.spx-public .spx-updates-filter-row-v138o,html[data-theme="light"] body.spx-public .spx-ucard-v138o,html[data-spx-theme="light"] body.spx-public .spx-ucard-v138o{background:rgba(255,255,255,.78)!important;border-color:rgba(15,23,42,.10)!important;color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-cmd-status-strip-v138o small,html[data-spx-theme="light"] body.spx-public .spx-cmd-status-strip-v138o small,html[data-theme="light"] body.spx-public .spx-updates-filter-head-v138o small,html[data-spx-theme="light"] body.spx-public .spx-updates-filter-head-v138o small,html[data-theme="light"] body.spx-public .spx-updates-hero-latest-v138o small,html[data-spx-theme="light"] body.spx-public .spx-updates-hero-latest-v138o small{color:rgba(15,23,42,.55);}
@media(max-width:980px){body.spx-public .spx-features-dropdown{width:100%!important;padding:12px!important;}body.spx-public .spx-export-v138o-body,body.spx-public .spx-export-v138o-panel,body.spx-public .spx-pricing-v139-head,body.spx-public .spx-updates-grid-v138o{grid-template-columns:1fr!important;}body.spx-public .spx-cmd-status-strip-v138o{grid-template-columns:1fr;}body.spx-public .spx-updates-pinned-v138h-thumb{display:none!important;}}
@media(max-width:720px){body.spx-public[data-route^="/features/"] .spx-feat-breadcrumb-v138n,body.spx-public[data-route^="/features/"] .spx-feat-breadcrumb-v138j{padding-top:92px!important;}body.spx-public .spx-feat-breadcrumb-v138n>span,body.spx-public .spx-feat-breadcrumb-v138j>span{max-width:54vw;}body.spx-public .spx-export-v138o-head,body.spx-public .spx-updates-filter-head-v138o{display:grid;align-items:start;}body.spx-public .spx-export-v138o-panel{padding:48px 18px 20px!important;}body.spx-public .spx-pricing-v138o-kicker{padding-top:0;}}
@media(prefers-reduced-motion:reduce){body.spx-public .spx-feat-hero-screen-wrap,body.spx-public .spx-cmd-visual-v138o,body.spx-public .spx-export-v138o-output,body.spx-public .spx-feat-hero-proof-item,body.spx-public .spx-feat-why-item,body.spx-public .spx-feat-how-step,body.spx-public .spx-feat-related-item,body.spx-public .spx-export-v138o-step,body.spx-public .spx-cmd-tab,body.spx-public .spx-ucard-v138o{transition:none!important;transform:none!important;}}

/* === A8.138p Phase 9: Background system === */
body.spx-public[data-route="/updates"],body.spx-public[data-route^="/updates/"],body.spx-public[data-route="/support"],body.spx-public[data-route^="/features/"]{background:radial-gradient(ellipse 140% 80% at 50% -10%,rgba(14,22,44,.94) 0%,#05090f 52%);background-attachment:fixed;}
html[data-theme="light"] body.spx-public[data-route="/updates"],html[data-spx-theme="light"] body.spx-public[data-route="/updates"],html[data-theme="light"] body.spx-public[data-route^="/updates/"],html[data-spx-theme="light"] body.spx-public[data-route^="/updates/"],html[data-theme="light"] body.spx-public[data-route="/support"],html[data-spx-theme="light"] body.spx-public[data-route="/support"],html[data-theme="light"] body.spx-public[data-route^="/features/"],html[data-spx-theme="light"] body.spx-public[data-route^="/features/"]{background:radial-gradient(ellipse 140% 80% at 50% -10%,rgba(220,235,255,.94) 0%,#f4f8ff 52%);}

/* === A8.138p Phase 1: Navigator === */
body.spx-public .spx-features-dropdown{border-radius:22px!important;border:1px solid rgba(255,255,255,.10)!important;background:rgba(8,14,28,.88)!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;box-shadow:0 32px 80px rgba(0,0,0,.40),0 0 0 1px rgba(255,255,255,.06) inset!important;padding:14px!important;min-width:480px!important;}
body.spx-public .nav-panel-lead{padding:8px 10px 14px!important;border-bottom:1px solid rgba(255,255,255,.07)!important;margin-bottom:8px!important;}
body.spx-public .nav-panel-lead strong{display:block;font-size:13px;font-weight:950;color:#e0efff;letter-spacing:.02em;}
body.spx-public .nav-panel-lead small{display:block;margin-top:3px;font-size:11px;color:rgba(220,240,255,.45);font-weight:700;}
body.spx-public .spx-mega-compact-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important;}
body.spx-public .nav-feature-link{border-radius:14px!important;padding:11px 13px!important;transition:background .15s!important;}
body.spx-public .nav-feature-link:hover{background:rgba(103,232,249,.09)!important;}
body.spx-public .nav-feature-link.is-primary{background:rgba(103,232,249,.06)!important;border:1px solid rgba(103,232,249,.12)!important;}
body.spx-public .nav-feature-link.is-primary:hover{background:rgba(103,232,249,.12)!important;}
body.spx-public .nav-feature-link .nav-feature-text b{font-size:13.5px!important;font-weight:900!important;color:#d6f0ff!important;}
body.spx-public .nav-feature-link .nav-feature-text small{font-size:10.5px!important;color:rgba(180,220,255,.5)!important;font-weight:750!important;letter-spacing:.04em!important;text-transform:uppercase!important;}
body.spx-public .nav-feature-link .nav-feature-text em{color:rgba(200,230,255,.55)!important;font-size:11.5px!important;font-style:normal!important;}
body.spx-public .nav-feature-link>strong{background:rgba(34,197,94,.13)!important;color:#86efac!important;font-size:10px!important;padding:3px 7px!important;border-radius:7px!important;font-weight:900!important;border:1px solid rgba(34,197,94,.18)!important;align-self:flex-start!important;margin-top:2px!important;}
body.spx-public .spx-mega-secondary-row{display:flex!important;gap:6px!important;padding:8px 6px 4px!important;border-top:1px solid rgba(255,255,255,.06)!important;margin-top:4px!important;}
body.spx-public .spx-mega-secondary-row a{font-size:12.5px!important;color:rgba(200,225,255,.55)!important;padding:4px 9px!important;border-radius:8px!important;font-weight:800!important;transition:background .15s!important;}
body.spx-public .spx-mega-secondary-row a:hover{background:rgba(255,255,255,.06)!important;}
body.spx-public .spx-mega-secondary-row a span{font-size:10px!important;font-weight:800!important;color:rgba(180,210,255,.38)!important;margin-left:4px!important;}
body.spx-public .spx-mega-footer-row{padding:8px 6px 2px!important;border-top:1px solid rgba(255,255,255,.06)!important;margin-top:2px!important;}
body.spx-public .spx-mega-all-link{display:inline-flex!important;align-items:center!important;gap:6px!important;font-size:12px!important;font-weight:900!important;color:rgba(103,232,249,.8)!important;transition:color .15s!important;}
body.spx-public .spx-mega-all-link:hover{color:#a5f3fc!important;}
body.spx-public .spx-nav-support-link{display:inline-flex!important;align-items:center!important;gap:5px!important;padding:6px 12px!important;border-radius:999px!important;background:rgba(103,232,249,.08)!important;border:1px solid rgba(103,232,249,.18)!important;color:#a5f3fc!important;font-weight:900!important;font-size:13.5px!important;transition:background .15s,border-color .15s!important;}
body.spx-public .spx-nav-support-link:hover{background:rgba(103,232,249,.15)!important;border-color:rgba(103,232,249,.32)!important;color:#cdfaff!important;}
body.spx-public .spx-nav-support-link svg{opacity:.7;}
html[data-theme="light"] body.spx-public .spx-features-dropdown,html[data-spx-theme="light"] body.spx-public .spx-features-dropdown{background:rgba(255,255,255,.97)!important;border-color:rgba(15,23,42,.10)!important;box-shadow:0 20px 60px rgba(15,23,42,.14)!important;}
html[data-theme="light"] body.spx-public .nav-panel-lead strong,html[data-spx-theme="light"] body.spx-public .nav-panel-lead strong,html[data-theme="light"] body.spx-public .nav-feature-link .nav-feature-text b,html[data-spx-theme="light"] body.spx-public .nav-feature-link .nav-feature-text b{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .nav-panel-lead small,html[data-spx-theme="light"] body.spx-public .nav-panel-lead small,html[data-theme="light"] body.spx-public .nav-feature-link .nav-feature-text small,html[data-spx-theme="light"] body.spx-public .nav-feature-link .nav-feature-text small{color:rgba(15,23,42,.45)!important;}
html[data-theme="light"] body.spx-public .nav-feature-link .nav-feature-text em,html[data-spx-theme="light"] body.spx-public .nav-feature-link .nav-feature-text em{color:rgba(15,23,42,.50)!important;}
html[data-theme="light"] body.spx-public .spx-nav-support-link,html[data-spx-theme="light"] body.spx-public .spx-nav-support-link{background:rgba(6,182,212,.07)!important;border-color:rgba(6,182,212,.22)!important;color:#0e7490!important;}

/* === A8.138p Phase 2: Export Workflow (spx-wf-v138p) === */
body.spx-public .spx-wf-v138p{padding:clamp(72px,10vw,120px) clamp(18px,4vw,48px)!important;max-width:1200px!important;margin:0 auto!important;}
body.spx-public .spx-wf-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:clamp(24px,4vw,48px);margin-bottom:clamp(36px,5vw,56px);}
body.spx-public .spx-wf-head-copy{display:grid;gap:10px;}
body.spx-public .spx-wf-head-copy h2{font-size:clamp(36px,5.5vw,64px)!important;line-height:.97!important;letter-spacing:-.04em!important;margin:0!important;}
body.spx-public .spx-wf-head-copy p{font-size:clamp(15px,1.5vw,17px)!important;color:rgba(220,240,255,.65)!important;max-width:480px!important;margin:0!important;line-height:1.6!important;}
body.spx-public .spx-wf-head-stats{display:flex;flex-direction:column;gap:10px;text-align:right;flex-shrink:0;}
body.spx-public .spx-wf-stat{display:flex;flex-direction:column;gap:2px;}
body.spx-public .spx-wf-stat-num{font-size:clamp(24px,3vw,34px);font-weight:950;letter-spacing:-.04em;background:linear-gradient(135deg,#a5f3fc,#38bdf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;}
body.spx-public .spx-wf-stat-label{font-size:11px;font-weight:800;color:rgba(180,220,255,.50);letter-spacing:.04em;text-transform:uppercase;}
body.spx-public .spx-wf-stage{border:1px solid rgba(255,255,255,.09);border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));overflow:hidden;}
body.spx-public .spx-wf-tabs{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);}
body.spx-public .spx-wf-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:12px;background:none;border:none;color:rgba(200,230,255,.50);font-size:13.5px;font-weight:900;cursor:pointer;transition:color .18s,background .18s;}
body.spx-public .spx-wf-tab.is-active{background:rgba(103,232,249,.10);color:#a5f3fc;}
body.spx-public .spx-wf-tab-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;font-size:10.5px;font-weight:950;background:rgba(255,255,255,.08);color:rgba(180,220,255,.6);transition:background .18s,color .18s;}
body.spx-public .spx-wf-tab.is-active .spx-wf-tab-num{background:rgba(103,232,249,.18);color:#a5f3fc;}
body.spx-public .spx-wf-tab-sep{width:1px;height:20px;background:rgba(255,255,255,.08);margin:0 4px;flex-shrink:0;}
body.spx-public .spx-wf-panel{display:grid;grid-template-columns:minmax(0,.48fr) minmax(0,.52fr);gap:clamp(28px,4vw,52px);align-items:center;padding:clamp(32px,5vw,60px);}
body.spx-public .spx-wf-panel-copy{display:grid;gap:14px;align-content:start;}
body.spx-public .spx-wf-panel-copy h3{font-size:clamp(20px,2.2vw,26px);font-weight:950;letter-spacing:-.03em;margin:0;color:#e0efff;}
body.spx-public .spx-wf-panel-copy p{font-size:15px;line-height:1.65;color:rgba(200,230,255,.65);margin:0;}
body.spx-public .spx-wf-panel-points{display:grid;gap:8px;list-style:none;margin:0;padding:0;}
body.spx-public .spx-wf-panel-points li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;font-weight:800;color:rgba(200,230,255,.70);}
body.spx-public .spx-wf-panel-points li::before{content:'';width:5px;height:5px;border-radius:50%;background:rgba(103,232,249,.6);margin-top:6px;flex-shrink:0;}
body.spx-public .spx-wf-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:900;color:#7dd3fc;text-decoration:none;transition:color .15s;}
body.spx-public .spx-wf-link:hover{color:#bae6fd;}
body.spx-public .spx-wf-paths{display:grid;gap:8px;margin-top:4px;}
body.spx-public .spx-wf-path{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);font-size:13px;font-weight:900;color:rgba(200,230,255,.75);text-decoration:none;transition:border-color .15s,background .15s,color .15s;}
body.spx-public .spx-wf-path:hover{border-color:rgba(103,232,249,.22);background:rgba(103,232,249,.06);color:#a5f3fc;}
body.spx-public .spx-wf-path-icon{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(103,232,249,.10);color:#a5f3fc;flex-shrink:0;}
body.spx-public .spx-wf-path-arrow{margin-left:auto;opacity:.4;}
body.spx-public .spx-wfm{width:100%;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:rgba(6,12,26,.7);border:1px solid rgba(255,255,255,.07);min-height:240px;}
body.spx-public .spx-wfm-toolbar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.04);}
body.spx-public .spx-wfm-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);}
body.spx-public .spx-wfm-dot:first-child{background:rgba(255,100,80,.5);}
body.spx-public .spx-wfm-dot:nth-child(2){background:rgba(255,190,50,.4);}
body.spx-public .spx-wfm-dot:nth-child(3){background:rgba(40,200,100,.4);}
body.spx-public .spx-wfm-spacer{flex:1;}
body.spx-public .spx-wfm-chip{padding:3px 9px;border-radius:6px;font-size:10px;font-weight:900;background:rgba(255,255,255,.07);color:rgba(200,230,255,.5);}
body.spx-public .spx-wfm-canvas{flex:1;display:grid;grid-template-columns:44px 1fr;}
body.spx-public .spx-wfm-rail{border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:8px;padding:12px 8px;}
body.spx-public .spx-wfm-rail-item{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.05);}
body.spx-public .spx-wfm-rail-item.is-active{background:rgba(103,232,249,.12);}
body.spx-public .spx-wfm-page{padding:14px;display:flex;flex-direction:column;gap:8px;}
body.spx-public .spx-wfm-block{height:10px;border-radius:4px;background:rgba(255,255,255,.06);}
body.spx-public .spx-wfm-block--header{height:20px;width:60%;background:rgba(255,255,255,.10);}
body.spx-public .spx-wfm-block--image{height:64px;width:100%;border-radius:10px;background:linear-gradient(135deg,rgba(103,232,249,.10),rgba(56,189,248,.06));}
body.spx-public .spx-wfm--share .spx-wfm-sharebar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06);}
body.spx-public .spx-wfm--share .spx-wfm-url{flex:1;height:26px;border-radius:7px;background:rgba(255,255,255,.05);border:1px solid rgba(103,232,249,.12);display:flex;align-items:center;padding:0 10px;font-size:10px;font-weight:800;color:rgba(103,232,249,.55);font-family:monospace;}
body.spx-public .spx-wfm--share .spx-wfm-frame{flex:1;background:rgba(255,255,255,.03);}
body.spx-public .spx-wfm--share .spx-wfm-preview-block{margin:14px;height:36px;border-radius:8px;background:linear-gradient(135deg,rgba(103,232,249,.08),rgba(56,189,248,.04));}
body.spx-public .spx-wfm--share .spx-wfm-share-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid rgba(255,255,255,.06);font-size:10px;font-weight:900;color:rgba(180,220,255,.4);}
body.spx-public .spx-wfm--share .spx-wfm-share-btn{padding:4px 10px;border-radius:7px;background:rgba(103,232,249,.12);color:#a5f3fc;font-size:10px;font-weight:900;}
body.spx-public .spx-wfm--fork .spx-wfm-fork-inner{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px;gap:12px;}
body.spx-public .spx-wfm-fork-origin{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;background:rgba(103,232,249,.10);border:1px solid rgba(103,232,249,.22);font-size:11px;font-weight:900;color:#a5f3fc;}
body.spx-public .spx-wfm-fork-connector{width:1px;height:12px;background:rgba(103,232,249,.25);}
body.spx-public .spx-wfm-fork-branches{display:flex;gap:10px;}
body.spx-public .spx-wfm-fork-branch{display:flex;flex-direction:column;align-items:center;gap:4px;}
body.spx-public .spx-wfm-fork-branch-node{padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:10px;font-weight:900;color:rgba(200,230,255,.60);white-space:nowrap;}
body.spx-public .spx-wfm-fork-line{width:1px;height:10px;background:rgba(255,255,255,.12);}

/* === A8.138p Phase 3: Cockpit (spx-cockpit-v138p) === */
body.spx-public .spx-cockpit-v138p{padding:clamp(72px,10vw,120px) clamp(18px,4vw,48px)!important;max-width:1200px!important;margin:0 auto!important;}
body.spx-public .spx-cockpit-head{text-align:center;margin-bottom:clamp(32px,4vw,52px);display:grid;gap:10px;}
body.spx-public .spx-cockpit-head h2{font-size:clamp(34px,5vw,60px)!important;line-height:.97!important;letter-spacing:-.04em!important;margin:0!important;}
body.spx-public .spx-cockpit-shell{border-radius:26px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));overflow:hidden;}
body.spx-public .spx-cockpit-statusbar{display:flex;align-items:center;gap:10px;padding:11px 20px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);font-size:12px;font-weight:900;color:rgba(200,230,255,.55);}
body.spx-public .spx-cockpit-sb-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.6);flex-shrink:0;}
body.spx-public .spx-cockpit-sb-div{width:1px;height:14px;background:rgba(255,255,255,.10);margin:0 4px;}
body.spx-public .spx-cockpit-sb-name{color:#d6f0ff;font-weight:950;}
body.spx-public .spx-cockpit-sb-tag{margin-left:auto;padding:3px 9px;border-radius:7px;background:rgba(34,197,94,.10);color:#86efac;font-size:10.5px;font-weight:900;border:1px solid rgba(34,197,94,.16);}
body.spx-public .spx-cockpit-body{display:grid;grid-template-columns:200px 1fr auto;min-height:380px;}
body.spx-public .spx-cockpit-rail{display:flex;flex-direction:column;gap:2px;padding:16px 12px;border-right:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);}
body.spx-public .spx-cockpit-module-btn{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;background:none;border:none;color:rgba(200,230,255,.50);font-size:13px;font-weight:900;cursor:pointer;transition:background .15s,color .15s;text-align:left;width:100%;}
body.spx-public .spx-cockpit-module-btn:hover{background:rgba(255,255,255,.05);color:rgba(200,230,255,.8);}
body.spx-public .spx-cockpit-module-btn.is-active{background:rgba(103,232,249,.10);color:#a5f3fc;}
body.spx-public .spx-cockpit-module-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);flex-shrink:0;transition:background .15s;}
body.spx-public .spx-cockpit-module-btn.is-active .spx-cockpit-module-icon{background:rgba(103,232,249,.14);}
body.spx-public .spx-cockpit-content{padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;justify-content:center;}
body.spx-public .spx-cockpit-panel{display:none;}
body.spx-public .spx-cockpit-panel.is-active{display:flex;flex-direction:column;gap:16px;animation:cockpitFade .22s ease;}
@keyframes cockpitFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
body.spx-public .spx-cockpit-panel-head h3{font-size:clamp(18px,2vw,22px);font-weight:950;letter-spacing:-.03em;margin:0 0 8px;color:#e0efff;}
body.spx-public .spx-cockpit-panel-head p{font-size:14px;line-height:1.65;color:rgba(200,230,255,.60);margin:0;max-width:360px;}
body.spx-public .spx-cockpit-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
body.spx-public .spx-cockpit-stat{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);}
body.spx-public .spx-cockpit-stat b{font-size:22px;font-weight:950;letter-spacing:-.04em;color:#a5f3fc;line-height:1;}
body.spx-public .spx-cockpit-stat span{font-size:11px;font-weight:800;color:rgba(180,220,255,.50);}
body.spx-public .spx-cockpit-visual{width:320px;border-left:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;padding:20px;margin:0;}
body.spx-public .spx-cockpit-screen-frame{width:100%;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.09);box-shadow:0 16px 48px rgba(0,0,0,.4);}
body.spx-public .spx-cockpit-screen-chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.06);font-size:10px;font-weight:900;color:rgba(180,220,255,.5);}
body.spx-public .spx-cockpit-screen-chrome-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12);}
body.spx-public .spx-cockpit-screen-body{aspect-ratio:16/10;background:linear-gradient(180deg,rgba(5,9,18,.9),rgba(8,14,28,.8));position:relative;overflow:hidden;}
body.spx-public .spx-cockpit-screen-body img{width:100%;height:100%;object-fit:cover;display:block;}
body.spx-public .spx-cockpit-screen-dark{display:block;}
body.spx-public .spx-cockpit-screen-light{display:none;}
html[data-theme="light"] body.spx-public .spx-cockpit-screen-dark,html[data-spx-theme="light"] body.spx-public .spx-cockpit-screen-dark{display:none;}
html[data-theme="light"] body.spx-public .spx-cockpit-screen-light,html[data-spx-theme="light"] body.spx-public .spx-cockpit-screen-light{display:block;}
html[data-theme="light"] body.spx-public .spx-cockpit-shell,html[data-spx-theme="light"] body.spx-public .spx-cockpit-shell{background:linear-gradient(180deg,#fff,rgba(242,248,255,.94))!important;border-color:rgba(15,23,42,.10)!important;}
html[data-theme="light"] body.spx-public .spx-cockpit-panel-head h3,html[data-spx-theme="light"] body.spx-public .spx-cockpit-panel-head h3{color:#0f172a;}
html[data-theme="light"] body.spx-public .spx-cockpit-stat,html[data-spx-theme="light"] body.spx-public .spx-cockpit-stat{background:rgba(15,23,42,.04)!important;border-color:rgba(15,23,42,.10)!important;}

/* === A8.138p Phase 4: Pricing head === */
body.spx-public .spx-pricing-v138p-head{text-align:center!important;max-width:800px!important;margin:0 auto clamp(40px,5vw,60px)!important;display:grid!important;gap:14px!important;padding:0 clamp(18px,4vw,40px)!important;}
body.spx-public .spx-pricing-v138p-head h2{font-size:clamp(38px,5.5vw,68px)!important;line-height:.97!important;letter-spacing:-.045em!important;margin:0!important;}
body.spx-public .spx-pricing-v138p-head p{font-size:clamp(16px,1.6vw,18px)!important;line-height:1.65!important;color:rgba(220,240,255,.65)!important;margin:0 auto!important;max-width:580px!important;}
html[data-theme="light"] body.spx-public .spx-pricing-v138p-head p,html[data-spx-theme="light"] body.spx-public .spx-pricing-v138p-head p{color:rgba(15,23,42,.62)!important;}

/* === A8.138p Phase 5: Alpha section refinement === */
body.spx-public .spx-alpha-v138h{max-width:1180px!important;margin:0 auto!important;}
body.spx-public .spx-alpha-v138h-inner{display:grid!important;grid-template-columns:minmax(0,.52fr) minmax(0,.48fr)!important;gap:clamp(36px,5vw,64px)!important;align-items:start!important;}
body.spx-public .spx-alpha-v138h-copy h2{font-size:clamp(32px,4.5vw,54px)!important;line-height:1!important;letter-spacing:-.04em!important;margin:0 0 14px!important;}
body.spx-public .spx-alpha-v138h-copy p{font-size:clamp(15px,1.5vw,17px)!important;line-height:1.65!important;color:rgba(220,240,255,.65)!important;margin:0!important;}
body.spx-public .spx-alpha-v138h-signals{display:grid!important;gap:14px!important;margin-top:20px!important;}
body.spx-public .spx-alpha-v138h-signal{display:flex!important;gap:12px!important;align-items:flex-start!important;padding:14px 16px!important;border-radius:16px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.07)!important;transition:border-color .18s,background .18s!important;}
body.spx-public .spx-alpha-v138h-signal:hover{border-color:rgba(103,232,249,.18)!important;background:rgba(103,232,249,.04)!important;}
body.spx-public .spx-alpha-v138h-signal-icon{width:36px!important;height:36px!important;border-radius:10px!important;background:rgba(103,232,249,.10)!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;color:#7dd3fc!important;}
body.spx-public .spx-alpha-v138h-signal b{display:block!important;font-size:13.5px!important;font-weight:950!important;color:#e0efff!important;margin-bottom:3px!important;}
body.spx-public .spx-alpha-v138h-signal small{display:block!important;font-size:12.5px!important;color:rgba(200,230,255,.55)!important;font-weight:700!important;line-height:1.5!important;}

/* === A8.138p Phase 6: Feature detail pages === */
body.spx-public .spx-feat-hero-v138n{padding:clamp(96px,12vw,148px) clamp(18px,4vw,52px) clamp(64px,8vw,96px)!important;}
body.spx-public .spx-feat-hero-v138n .spx-feat-hero-copy{display:grid;gap:14px;max-width:600px;}
body.spx-public .spx-feat-hero-v138n h1{font-size:clamp(38px,6vw,72px)!important;line-height:.97!important;letter-spacing:-.048em!important;margin:0!important;}
body.spx-public .spx-feat-hero-lead{font-size:clamp(16px,1.6vw,19px)!important;line-height:1.65!important;color:rgba(220,240,255,.68)!important;margin:0!important;}
body.spx-public .spx-feat-hero-proof{display:flex!important;gap:20px!important;flex-wrap:wrap!important;padding-top:4px!important;}
body.spx-public .spx-feat-hero-proof-item{display:flex!important;flex-direction:column!important;gap:2px!important;padding:10px 16px!important;border-radius:14px!important;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.08)!important;transition:border-color .2s!important;}
body.spx-public .spx-feat-hero-proof-item:hover{border-color:rgba(103,232,249,.22)!important;}
body.spx-public .spx-feat-hero-proof-item b{font-size:clamp(18px,2.2vw,24px)!important;font-weight:950!important;letter-spacing:-.04em!important;background:linear-gradient(135deg,#a5f3fc,#38bdf8)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;line-height:1!important;}
body.spx-public .spx-feat-hero-proof-item small{font-size:11.5px!important;font-weight:800!important;color:rgba(180,220,255,.55)!important;}
body.spx-public .spx-feat-how-v138n{padding:clamp(48px,7vw,80px) clamp(18px,4vw,52px)!important;}
body.spx-public .spx-feat-how-head{margin-bottom:clamp(28px,4vw,44px)!important;}
body.spx-public .spx-feat-how-head h2{font-size:clamp(28px,4vw,48px)!important;letter-spacing:-.04em!important;line-height:1.05!important;margin:8px 0 0!important;}
body.spx-public .spx-feat-how-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
body.spx-public .spx-feat-how-step{display:grid;grid-template-rows:auto 1fr;gap:10px;padding:22px 20px!important;border-radius:20px!important;border:1px solid rgba(255,255,255,.08)!important;background:rgba(255,255,255,.035)!important;transition:border-color .2s,transform .2s!important;}
body.spx-public .spx-feat-how-step:hover{border-color:rgba(103,232,249,.20)!important;transform:translateY(-3px)!important;}
body.spx-public .spx-feat-how-num{font-size:11px!important;font-weight:950!important;letter-spacing:.07em!important;color:rgba(103,232,249,.55)!important;font-family:monospace!important;}
body.spx-public .spx-feat-how-step-body h3{font-size:15px!important;font-weight:950!important;letter-spacing:-.02em!important;color:#d6f0ff!important;margin:0 0 6px!important;}
body.spx-public .spx-feat-how-step-body p{font-size:13.5px!important;line-height:1.6!important;color:rgba(200,230,255,.60)!important;margin:0!important;}
body.spx-public .spx-feat-why-v138n{padding:clamp(48px,7vw,80px) clamp(18px,4vw,52px)!important;}
body.spx-public .spx-feat-why-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,64px);align-items:center;}
body.spx-public .spx-feat-why-copy p{font-size:clamp(15px,1.5vw,17px)!important;line-height:1.7!important;color:rgba(220,240,255,.7)!important;margin:8px 0 0!important;}
body.spx-public .spx-feat-why-list{display:grid;gap:10px;}
body.spx-public .spx-feat-why-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.07)!important;background:rgba(255,255,255,.03)!important;transition:border-color .18s,background .18s!important;}
body.spx-public .spx-feat-why-item:hover{border-color:rgba(103,232,249,.18)!important;background:rgba(103,232,249,.04)!important;}
body.spx-public .spx-feat-why-item strong{display:block;font-size:13.5px!important;font-weight:950!important;color:#d6f0ff!important;margin-bottom:3px!important;}
body.spx-public .spx-feat-why-item span{font-size:12.5px!important;color:rgba(200,230,255,.55)!important;line-height:1.55!important;}

/* === A8.138p Phase 7: Updates page === */
body.spx-public .spx-upd-hero-v138p{padding:clamp(96px,12vw,148px) clamp(18px,4vw,52px) clamp(64px,8vw,96px)!important;max-width:900px!important;margin:0 auto!important;}
body.spx-public .spx-upd-hero-inner{display:grid;gap:16px;}
body.spx-public .spx-upd-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.18);color:#86efac;font-size:12px;font-weight:900;width:max-content;}
body.spx-public .spx-upd-hero-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.7);animation:updPulse 2.4s ease-in-out infinite;}
@keyframes updPulse{0%,100%{box-shadow:0 0 4px rgba(74,222,128,.5);}50%{box-shadow:0 0 12px rgba(74,222,128,.8);}}
body.spx-public .spx-upd-hero-v138p h1{font-size:clamp(44px,7.5vw,88px)!important;line-height:.95!important;letter-spacing:-.055em!important;margin:0!important;}
body.spx-public .spx-upd-hero-v138p p{font-size:clamp(16px,1.7vw,20px)!important;line-height:1.65!important;color:rgba(220,240,255,.68)!important;margin:0!important;max-width:680px!important;}
body.spx-public .spx-upd-hero-meta{display:flex;align-items:center;gap:10px;padding-top:6px;}
body.spx-public .spx-upd-hero-count{font-size:13px;font-weight:900;color:rgba(200,230,255,.60);}
body.spx-public .spx-upd-hero-sep{color:rgba(200,230,255,.30);}
body.spx-public .spx-upd-hero-scroll{font-size:13px;font-weight:900;color:#7dd3fc;text-decoration:none;transition:color .15s;}
body.spx-public .spx-upd-hero-scroll:hover{color:#bae6fd;}
body.spx-public .spx-upd-sys-banner{display:flex;align-items:center;gap:10px;max-width:1180px;margin:0 auto 24px;padding:13px 20px;border-radius:14px;background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.18);color:#fde68a;font-size:14px;font-weight:800;}
body.spx-public .spx-upd-featured-v138p{max-width:1180px!important;margin:0 auto clamp(32px,4vw,52px)!important;border-radius:26px!important;overflow:hidden!important;position:relative!important;min-height:320px!important;display:grid!important;grid-template-columns:1fr 1fr!important;}
body.spx-public .spx-upd-featured-media{background-color:#050910;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;min-height:280px;}
body.spx-public .spx-upd-featured-media-overlay{position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,rgba(5,9,18,.7) 100%),linear-gradient(0deg,rgba(5,9,18,.5) 0%,transparent 60%);}
body.spx-public .spx-upd-featured-body{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(28px,4vw,48px);background:linear-gradient(180deg,rgba(7,14,30,.94),rgba(5,9,18,.90));border:1px solid rgba(255,255,255,.07);border-left:none;}
body.spx-public .spx-upd-featured-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
body.spx-public .spx-upd-featured-badge{padding:3px 8px;border-radius:8px;font-size:10.5px;font-weight:950;background:rgba(103,232,249,.14);color:#a5f3fc;border:1px solid rgba(103,232,249,.20);letter-spacing:.04em;text-transform:uppercase;}
body.spx-public .spx-upd-featured-cat{font-size:12px;font-weight:900;color:rgba(200,230,255,.55);padding:3px 8px;border-radius:7px;background:rgba(255,255,255,.06);}
body.spx-public .spx-upd-featured-date{font-size:12px;font-weight:800;color:rgba(180,210,255,.40);}
body.spx-public .spx-upd-featured-title{font-size:clamp(22px,3vw,34px)!important;font-weight:950!important;letter-spacing:-.035em!important;line-height:1.1!important;color:#e8f4ff!important;margin:0!important;}
body.spx-public .spx-upd-featured-excerpt{font-size:14.5px!important;line-height:1.65!important;color:rgba(200,230,255,.62)!important;margin:0!important;}
body.spx-public .spx-upd-featured-cta{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:950;color:#a5f3fc;text-decoration:none;transition:color .15s;margin-top:4px;}
body.spx-public .spx-upd-featured-cta:hover{color:#cdfaff;}
body.spx-public .spx-upd-grid-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,48px);}
body.spx-public .spx-upd-grid-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px;flex-wrap:wrap;}
body.spx-public .spx-upd-grid-label{font-size:19px;font-weight:950;color:#f0faff;letter-spacing:-.02em;}
body.spx-public .spx-upd-grid-filters{display:flex;align-items:center;gap:4px;padding:6px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);}
body.spx-public .spx-upd-grid-v138p{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:32px;}
body.spx-public .spx-upd-card-v138p{border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));overflow:hidden;transition:transform .22s,border-color .22s,box-shadow .22s;display:flex;flex-direction:column;}
body.spx-public .spx-upd-card-v138p:hover{transform:translateY(-4px);border-color:rgba(103,232,249,.22);box-shadow:0 18px 52px rgba(0,0,0,.24);}
body.spx-public .spx-upd-card-thumb{height:140px;background-size:cover;background-position:center;background-color:#050910;flex-shrink:0;}
body.spx-public .spx-upd-card-body{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px;flex:1;}
body.spx-public .spx-upd-card-body--no-thumb{padding-top:22px;}
body.spx-public .spx-upd-card-meta{display:flex;align-items:center;gap:8px;}
body.spx-public .spx-upd-card-cat{font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:rgba(103,232,249,.75);background:rgba(103,232,249,.08);padding:3px 8px;border-radius:7px;}
body.spx-public .spx-upd-card-date{font-size:11.5px;font-weight:800;color:rgba(180,210,255,.40);margin-left:auto;}
body.spx-public .spx-upd-card-title{font-size:16px!important;font-weight:950!important;letter-spacing:-.025em!important;color:#d6f0ff!important;margin:0!important;line-height:1.3!important;}
body.spx-public .spx-upd-card-excerpt{font-size:13px!important;line-height:1.6!important;color:rgba(200,230,255,.58)!important;margin:0!important;flex:1!important;}
body.spx-public .spx-upd-card-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:950;color:#7dd3fc;text-decoration:none;transition:color .15s;margin-top:auto;padding-top:4px;}
body.spx-public .spx-upd-card-link:hover{color:#a5f3fc;}
body.spx-public .spx-upd-empty-v138p{text-align:center;padding:clamp(52px,8vw,80px) 20px;display:flex;flex-direction:column;align-items:center;gap:14px;color:rgba(200,230,255,.55);}
body.spx-public .spx-upd-empty-v138p h3{font-size:20px;font-weight:950;color:#d6f0ff;margin:0;}
body.spx-public .spx-upd-empty-v138p p{font-size:14px;margin:0;max-width:400px;line-height:1.6;}
body.spx-public .spx-upd-foot-cta{text-align:center;padding:clamp(32px,5vw,52px) 20px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:8px;}
body.spx-public .spx-upd-foot-cta p{margin:0;font-size:14px;color:rgba(200,230,255,.55);font-weight:800;}
body.spx-public .spx-update-detail-v138p{max-width:780px;margin:0 auto;padding:clamp(96px,10vw,132px) clamp(18px,4vw,52px) clamp(64px,8vw,96px);}
body.spx-public .spx-update-detail-back{margin-bottom:28px;}
body.spx-public .spx-update-detail-hero{width:100%;aspect-ratio:16/7;border-radius:20px;background-size:cover;background-position:center;background-color:#050910;margin-bottom:28px;}
body.spx-public .spx-update-detail-meta{margin-bottom:8px;}
body.spx-public .spx-update-detail-title{font-size:clamp(30px,5vw,54px)!important;font-weight:950!important;letter-spacing:-.04em!important;line-height:1.05!important;margin:0 0 14px!important;color:#e8f4ff!important;}
body.spx-public .spx-update-detail-lede{font-size:clamp(16px,1.7vw,19px)!important;line-height:1.7!important;color:rgba(220,240,255,.68)!important;margin:0 0 24px!important;padding-bottom:24px!important;border-bottom:1px solid rgba(255,255,255,.08)!important;}
body.spx-public .spx-update-body{font-size:16px!important;line-height:1.75!important;color:rgba(220,240,255,.80)!important;}
body.spx-public .spx-update-body h2,body.spx-public .spx-update-body h3{color:#e0efff!important;margin:28px 0 10px!important;letter-spacing:-.03em!important;}
body.spx-public .spx-update-body p{margin:0 0 16px!important;}
body.spx-public .spx-update-body img{max-width:100%;border-radius:14px;margin:16px 0;display:block;border:1px solid rgba(255,255,255,.08);}
body.spx-public .spx-update-body video{max-width:100%;border-radius:14px;margin:16px 0;display:block;}
body.spx-public .spx-update-body figure{margin:20px 0;}
body.spx-public .spx-update-body figcaption{font-size:12.5px;color:rgba(200,230,255,.45);margin-top:8px;font-weight:700;}
body.spx-public .spx-update-body a{color:#7dd3fc;}
body.spx-public .spx-update-body blockquote{border-left:3px solid rgba(103,232,249,.35);padding-left:18px;color:rgba(220,240,255,.65);margin:16px 0;font-style:italic;}

/* === A8.138p Phase 8: Support action block === */
body.spx-public .spx-support-action-v138p{max-width:700px!important;margin:0 auto clamp(48px,7vw,80px)!important;padding:clamp(40px,6vw,64px) clamp(28px,4vw,48px)!important;text-align:center!important;border-radius:28px!important;border:1px solid rgba(255,255,255,.09)!important;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))!important;}
body.spx-public .spx-support-action-inner{display:grid;gap:22px;}
body.spx-public .spx-support-action-head{display:grid;gap:10px;}
body.spx-public .spx-support-action-head h2{font-size:clamp(26px,4vw,40px)!important;font-weight:950!important;letter-spacing:-.04em!important;margin:0!important;}
body.spx-public .spx-support-action-head p{font-size:15px!important;line-height:1.65!important;color:rgba(220,240,255,.62)!important;margin:0!important;}
body.spx-public .spx-support-action-trust{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;}
body.spx-public .spx-support-action-trust span{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:900;color:rgba(200,230,255,.55);}
body.spx-public .spx-support-action-trust svg{opacity:.7;}
body.spx-public .spx-support-action-btn{align-self:center!important;margin:0 auto!important;display:inline-flex!important;align-items:center!important;gap:8px!important;}
body.spx-public .spx-support-action-info{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);}

/* Light mode updates/support */
html[data-theme="light"] body.spx-public .spx-upd-hero-v138p h1,html[data-spx-theme="light"] body.spx-public .spx-upd-hero-v138p h1{color:#0f172a;}
html[data-theme="light"] body.spx-public .spx-upd-hero-v138p p,html[data-spx-theme="light"] body.spx-public .spx-upd-hero-v138p p{color:rgba(15,23,42,.65);}
html[data-theme="light"] body.spx-public .spx-upd-card-v138p,html[data-spx-theme="light"] body.spx-public .spx-upd-card-v138p{background:rgba(255,255,255,.90)!important;border-color:rgba(15,23,42,.10)!important;}
html[data-theme="light"] body.spx-public .spx-upd-card-title,html[data-spx-theme="light"] body.spx-public .spx-upd-card-title{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-upd-card-excerpt,html[data-spx-theme="light"] body.spx-public .spx-upd-card-excerpt{color:rgba(15,23,42,.58)!important;}
html[data-theme="light"] body.spx-public .spx-upd-grid-label,html[data-spx-theme="light"] body.spx-public .spx-upd-grid-label{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-upd-featured-body,html[data-spx-theme="light"] body.spx-public .spx-upd-featured-body{background:linear-gradient(180deg,rgba(240,248,255,.97),rgba(230,243,255,.94))!important;border-color:rgba(15,23,42,.10)!important;}
html[data-theme="light"] body.spx-public .spx-upd-featured-title,html[data-spx-theme="light"] body.spx-public .spx-upd-featured-title{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-upd-featured-excerpt,html[data-spx-theme="light"] body.spx-public .spx-upd-featured-excerpt{color:rgba(15,23,42,.62)!important;}
html[data-theme="light"] body.spx-public .spx-support-action-v138p,html[data-spx-theme="light"] body.spx-public .spx-support-action-v138p{background:rgba(255,255,255,.92)!important;border-color:rgba(15,23,42,.10)!important;}
html[data-theme="light"] body.spx-public .spx-support-action-head p,html[data-spx-theme="light"] body.spx-public .spx-support-action-head p{color:rgba(15,23,42,.62)!important;}
html[data-theme="light"] body.spx-public .spx-support-action-trust span,html[data-spx-theme="light"] body.spx-public .spx-support-action-trust span{color:rgba(15,23,42,.55)!important;}

/* === A8.138p Responsive === */
@media(max-width:980px){body.spx-public .spx-wf-head{grid-template-columns:1fr;}body.spx-public .spx-wf-panel{grid-template-columns:1fr;}body.spx-public .spx-cockpit-body{grid-template-columns:160px 1fr;}body.spx-public .spx-cockpit-visual{display:none;}body.spx-public .spx-upd-featured-v138p{grid-template-columns:1fr;}body.spx-public .spx-upd-featured-media{display:none;}body.spx-public .spx-upd-featured-body{border-left:1px solid rgba(255,255,255,.07);}body.spx-public .spx-upd-grid-v138p{grid-template-columns:repeat(2,1fr)!important;}body.spx-public .spx-alpha-v138h-inner{grid-template-columns:1fr!important;}body.spx-public .spx-feat-why-inner{grid-template-columns:1fr!important;}body.spx-public .spx-support-action-info{grid-template-columns:1fr!important;}}
@media(max-width:640px){body.spx-public .spx-wf-tabs{flex-wrap:wrap;gap:4px;}body.spx-public .spx-wf-tab-sep{display:none;}body.spx-public .spx-cockpit-body{grid-template-columns:1fr;}body.spx-public .spx-cockpit-rail{flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid rgba(255,255,255,.06);padding:10px;}body.spx-public .spx-cockpit-module-btn{flex:0;padding:7px 12px;}body.spx-public .spx-cockpit-module-icon{display:none;}body.spx-public .spx-upd-grid-v138p{grid-template-columns:1fr!important;}body.spx-public .spx-upd-grid-head{flex-direction:column;align-items:flex-start;}body.spx-public .spx-cockpit-stats{grid-template-columns:repeat(2,1fr)!important;}}
@media(prefers-reduced-motion:reduce){body.spx-public .spx-upd-hero-dot{animation:none;}body.spx-public .spx-upd-card-v138p,body.spx-public .spx-feat-how-step,body.spx-public .spx-feat-why-item,body.spx-public .spx-alpha-v138h-signal{transition:none!important;transform:none!important;}body.spx-public .spx-cockpit-panel.is-active{animation:none;}}

/* ============================================================
   A8.138q — Regression Repair + Controlled Public Rework
   Appended to spixor-public.css
   ============================================================ */

/* === Phase 0/1: Homepage order confirmed via layout_json fix ===
   Root cause: layout_json.order omitted "dashboard".
   When spx-public-layout-managed is applied (flex container),
   sections not in the order array get default CSS order:0,
   appearing before hero (order:1). Fixed in var/public_website_content.json.
*/

/* === Phase 1 supplement: Background system — add /roadmap === */
body.spx-public[data-route="/roadmap"]{background:radial-gradient(ellipse 140% 80% at 50% -10%,rgba(14,22,44,.94) 0%,#05090f 52%);background-attachment:fixed;}
html[data-theme="light"] body.spx-public[data-route="/roadmap"],html[data-spx-theme="light"] body.spx-public[data-route="/roadmap"]{background:radial-gradient(ellipse 140% 80% at 50% -10%,rgba(220,235,255,.94) 0%,#f4f8ff 52%);}

/* Enhanced grid mesh overlay for /roadmap /support /updates /features/* */
body.spx-public[data-route="/roadmap"]::before,
body.spx-public[data-route="/support"]::before,
body.spx-public[data-route="/updates"]::before,
body.spx-public[data-route^="/updates/"]::before,
body.spx-public[data-route^="/features/"]::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(56,189,248,.10) 0%,transparent 60%),
    linear-gradient(rgba(103,232,249,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,232,249,.04) 1px,transparent 1px);
  background-size:auto,60px 60px,60px 60px;
  background-position:center top,0 0,0 0;
}
html[data-theme="light"] body.spx-public[data-route="/roadmap"]::before,
html[data-spx-theme="light"] body.spx-public[data-route="/roadmap"]::before,
html[data-theme="light"] body.spx-public[data-route="/support"]::before,
html[data-spx-theme="light"] body.spx-public[data-route="/support"]::before,
html[data-theme="light"] body.spx-public[data-route="/updates"]::before,
html[data-spx-theme="light"] body.spx-public[data-route="/updates"]::before,
html[data-theme="light"] body.spx-public[data-route^="/features/"]::before,
html[data-spx-theme="light"] body.spx-public[data-route^="/features/"]::before{
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(6,182,212,.07) 0%,transparent 60%),
    linear-gradient(rgba(6,182,212,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(6,182,212,.06) 1px,transparent 1px);
  background-size:auto,60px 60px,60px 60px;
  background-position:center top,0 0,0 0;
}
body.spx-public[data-route="/roadmap"] > *,
body.spx-public[data-route="/support"] > *,
body.spx-public[data-route="/updates"] > *,
body.spx-public[data-route^="/updates/"] > *,
body.spx-public[data-route^="/features/"] > *{position:relative;z-index:1;}
@media(prefers-reduced-motion:reduce){
  body.spx-public[data-route="/roadmap"]::before,
  body.spx-public[data-route="/support"]::before,
  body.spx-public[data-route="/updates"]::before,
  body.spx-public[data-route^="/features/"]::before{background-image:none;}
}

/* === Phase 2: Alpha Feedback mobile/grid fix === */
body.spx-public .spx-alpha-v138h-panel{margin-top:0!important;}
@media(max-width:900px){
  body.spx-public .spx-alpha-v138h-inner{grid-template-columns:1fr!important;gap:28px!important;}
  body.spx-public .spx-alpha-v138h-copy{flex:none!important;}
}
@media(max-width:600px){
  body.spx-public .spx-alpha-v138h-inner{gap:20px!important;}
  body.spx-public .spx-alpha-v138h-topics{grid-template-columns:1fr 1fr!important;}
}

/* === Phase 3: Navigator support button — remove icon, clean style === */
body.spx-public .spx-nav-support-link svg{display:none!important;}
body.spx-public .spx-nav-support-link{gap:0!important;letter-spacing:.01em!important;}

/* === Phase 4: Modal Step 2 label/input layout fix === */
body.spx-public .spx-ticket-label{display:block!important;font-size:.8rem!important;color:rgba(255,255,255,.65)!important;margin-bottom:12px!important;}
body.spx-public .spx-ticket-label:last-child{margin-bottom:0!important;}
body.spx-public .spx-ticket-label span[aria-hidden="true"]{display:inline!important;color:rgba(255,100,100,.7);font-size:.85em;margin-left:2px;}
body.spx-public .spx-ticket-label input,body.spx-public .spx-ticket-label textarea{display:block!important;width:100%!important;margin-top:6px!important;}
html[data-theme="light"] body.spx-public .spx-ticket-label,html[data-spx-theme="light"] body.spx-public .spx-ticket-label{color:rgba(15,23,42,.65)!important;}

/* === Phase 6: Export-first workflow CSS fixes === */
/* Fix stat number/label styling (HTML uses strong/span not .spx-wf-stat-num/.spx-wf-stat-label) */
body.spx-public .spx-wf-stat strong{display:block;font-size:clamp(22px,2.8vw,32px);font-weight:950;letter-spacing:-.04em;background:linear-gradient(135deg,#a5f3fc,#38bdf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;}
body.spx-public .spx-wf-stat span{display:block;font-size:11px;font-weight:800;color:rgba(180,220,255,.50);letter-spacing:.04em;text-transform:uppercase;margin-top:2px;}
/* Panel visual column */
body.spx-public .spx-wf-panel-visual{display:flex;align-items:center;justify-content:center;min-height:260px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);overflow:hidden;}
body.spx-public .spx-wf-tab-label{font-size:13.5px;font-weight:900;}
/* Fix hidden panels — CSS `display:none` via hidden attr + `.is-active` override */
body.spx-public .spx-wf-panel[hidden]{display:none!important;}
body.spx-public .spx-wf-panel.is-active{display:grid!important;}
/* Light mode */
html[data-theme="light"] body.spx-public .spx-wf-stage,html[data-spx-theme="light"] body.spx-public .spx-wf-stage{background:linear-gradient(180deg,#fff,rgba(242,248,255,.94))!important;border-color:rgba(15,23,42,.10)!important;}
html[data-theme="light"] body.spx-public .spx-wf-tab.is-active,html[data-spx-theme="light"] body.spx-public .spx-wf-tab.is-active{background:rgba(6,182,212,.10)!important;color:#0e7490!important;}
html[data-theme="light"] body.spx-public .spx-wf-panel-copy h3,html[data-spx-theme="light"] body.spx-public .spx-wf-panel-copy h3{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-wf-panel-copy p,html[data-spx-theme="light"] body.spx-public .spx-wf-panel-copy p{color:rgba(15,23,42,.65)!important;}
html[data-theme="light"] body.spx-public .spx-wf-panel-visual,html[data-spx-theme="light"] body.spx-public .spx-wf-panel-visual{background:rgba(15,23,42,.03)!important;border-color:rgba(15,23,42,.10)!important;}
html[data-theme="light"] body.spx-public .spx-wf-stat strong,html[data-spx-theme="light"] body.spx-public .spx-wf-stat strong{background:linear-gradient(135deg,#0e7490,#0369a1)!important;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
html[data-theme="light"] body.spx-public .spx-wf-stat span,html[data-spx-theme="light"] body.spx-public .spx-wf-stat span{color:rgba(15,23,42,.45)!important;}
/* Export responsive */
@media(max-width:900px){
  body.spx-public .spx-wf-head{grid-template-columns:1fr!important;}
  body.spx-public .spx-wf-head-stats{flex-direction:row!important;text-align:left!important;gap:20px!important;flex-wrap:wrap!important;}
  body.spx-public .spx-wf-panel{grid-template-columns:1fr!important;gap:20px!important;}
  body.spx-public .spx-wf-panel-visual{min-height:200px!important;}
}
@media(max-width:640px){
  body.spx-public .spx-wf-tabs{flex-wrap:wrap!important;gap:4px!important;}
  body.spx-public .spx-wf-tab-sep{display:none!important;}
}

/* === Phase 7: Command Center CSS class fixes === */
/* Fix: HTML uses .spx-cockpit-module, CSS was written for .spx-cockpit-module-btn */
body.spx-public .spx-cockpit-module{display:flex!important;align-items:center!important;gap:9px!important;padding:10px 12px!important;border-radius:12px!important;background:none!important;border:none!important;color:rgba(200,230,255,.50)!important;font-size:13px!important;font-weight:900!important;cursor:pointer!important;transition:background .15s,color .15s!important;text-align:left!important;width:100%!important;}
body.spx-public .spx-cockpit-module:hover{background:rgba(255,255,255,.05)!important;color:rgba(200,230,255,.8)!important;}
body.spx-public .spx-cockpit-module.is-active{background:rgba(103,232,249,.10)!important;color:#a5f3fc!important;}
/* Fix: HTML uses .spx-cockpit-module-dot, no CSS existed */
body.spx-public .spx-cockpit-module-dot{width:6px!important;height:6px!important;border-radius:50%!important;background:rgba(255,255,255,.18)!important;flex-shrink:0!important;transition:background .15s!important;}
body.spx-public .spx-cockpit-module.is-active .spx-cockpit-module-dot{background:#4ade80!important;}
/* Fix: HTML uses .spx-cockpit-status-item, CSS was for .spx-cockpit-sb-* */
body.spx-public .spx-cockpit-status-item{display:flex!important;align-items:center!important;gap:6px!important;}
body.spx-public .spx-cockpit-status-item b{font-size:12px!important;font-weight:950!important;color:#d6f0ff!important;}
body.spx-public .spx-cockpit-status-item small{font-size:10.5px!important;color:rgba(180,220,255,.45)!important;font-weight:700!important;}
/* Fix: HTML uses .spx-cockpit-status-dot, CSS was for .spx-cockpit-sb-dot */
body.spx-public .spx-cockpit-status-dot{width:7px!important;height:7px!important;border-radius:50%!important;background:#4ade80!important;box-shadow:0 0 6px rgba(74,222,128,.6)!important;flex-shrink:0!important;}
/* Fix: statusbar separator — add via CSS between items */
body.spx-public .spx-cockpit-statusbar{gap:16px!important;}
body.spx-public .spx-cockpit-status-item+.spx-cockpit-status-item{border-left:1px solid rgba(255,255,255,.08);padding-left:16px;}
/* Fix: HTML uses .spx-cockpit-shot--dark/.spx-cockpit-shot--light, CSS was for .spx-cockpit-screen-dark/.spx-cockpit-screen-light */
body.spx-public .spx-cockpit-shot{width:100%;height:100%;object-fit:cover;display:block;}
body.spx-public .spx-cockpit-shot--dark{display:block;}
body.spx-public .spx-cockpit-shot--light{display:none;}
html[data-theme="light"] body.spx-public .spx-cockpit-shot--dark,html[data-spx-theme="light"] body.spx-public .spx-cockpit-shot--dark{display:none!important;}
html[data-theme="light"] body.spx-public .spx-cockpit-shot--light,html[data-spx-theme="light"] body.spx-public .spx-cockpit-shot--light{display:block!important;}
/* Light mode cockpit */
html[data-theme="light"] body.spx-public .spx-cockpit-module,html[data-spx-theme="light"] body.spx-public .spx-cockpit-module{color:rgba(15,23,42,.5)!important;}
html[data-theme="light"] body.spx-public .spx-cockpit-module:hover,html[data-spx-theme="light"] body.spx-public .spx-cockpit-module:hover{background:rgba(15,23,42,.05)!important;color:rgba(15,23,42,.8)!important;}
html[data-theme="light"] body.spx-public .spx-cockpit-module.is-active,html[data-spx-theme="light"] body.spx-public .spx-cockpit-module.is-active{background:rgba(6,182,212,.10)!important;color:#0e7490!important;}
html[data-theme="light"] body.spx-public .spx-cockpit-status-item b,html[data-spx-theme="light"] body.spx-public .spx-cockpit-status-item b{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-cockpit-status-item small,html[data-spx-theme="light"] body.spx-public .spx-cockpit-status-item small{color:rgba(15,23,42,.45)!important;}
/* Cockpit responsive */
@media(max-width:980px){
  body.spx-public .spx-cockpit-visual{display:none!important;}
  body.spx-public .spx-cockpit-body{grid-template-columns:180px 1fr!important;}
}
@media(max-width:720px){
  body.spx-public .spx-cockpit-body{grid-template-columns:1fr!important;min-height:auto!important;}
  body.spx-public .spx-cockpit-rail{flex-direction:row!important;overflow-x:auto!important;padding:10px!important;border-right:none!important;border-bottom:1px solid rgba(255,255,255,.06)!important;}
  body.spx-public .spx-cockpit-module{flex-shrink:0!important;white-space:nowrap!important;}
  body.spx-public .spx-cockpit-stats{grid-template-columns:1fr 1fr!important;}
}

/* === Phase 7: Cockpit statusbar spacing fix === */
body.spx-public .spx-cockpit-statusbar{flex-wrap:wrap!important;}

/* === Phase 8: Updates page filter JS compat — old card selector ===
   The JS uses .spx-ucard-v138h selector. New cards are .spx-upd-card-v138p.
   Adding compat styles; cards also get spx-ucard-v138h class via PHP fix.
*/
body.spx-public .spx-upd-card-v138p{transition:transform .18s,box-shadow .18s;}
body.spx-public .spx-upd-card-v138p[hidden]{display:none!important;}

/* === Updates page — hero dot animation (may be missing) === */
@keyframes spxUpdDot{0%,100%{transform:scale(1);opacity:.9;}50%{transform:scale(1.4);opacity:.5;}}
body.spx-public .spx-upd-hero-dot{animation:spxUpdDot 1.8s ease-in-out infinite!important;}

/* === Updates page — featured split layout fix === */
body.spx-public .spx-upd-featured-v138p{display:grid;grid-template-columns:1fr 1fr;min-height:320px;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));margin:0 clamp(18px,4vw,48px);}
body.spx-public .spx-upd-featured-media{position:relative;background:rgba(255,255,255,.04);background-size:cover;background-position:center;}
body.spx-public .spx-upd-featured-media-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,9,18,0),rgba(5,9,18,.5));}
body.spx-public .spx-upd-featured-body{padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;justify-content:center;gap:12px;}
body.spx-public .spx-upd-featured-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
body.spx-public .spx-upd-featured-badge{padding:3px 9px;border-radius:7px;font-size:10.5px;font-weight:900;background:rgba(34,197,94,.12);color:#86efac;border:1px solid rgba(34,197,94,.18);}
body.spx-public .spx-upd-featured-cat{padding:3px 9px;border-radius:7px;font-size:10.5px;font-weight:800;background:rgba(255,255,255,.07);color:rgba(200,230,255,.65);border:1px solid rgba(255,255,255,.08);}
body.spx-public .spx-upd-featured-date{font-size:11px;font-weight:800;color:rgba(180,220,255,.45);}
body.spx-public .spx-upd-featured-title{font-size:clamp(20px,2.5vw,28px);font-weight:950;letter-spacing:-.03em;margin:0;color:#e0efff;line-height:1.15;}
body.spx-public .spx-upd-featured-excerpt{font-size:14px;line-height:1.65;color:rgba(200,230,255,.65);margin:0;}
body.spx-public .spx-upd-featured-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:900;color:#a5f3fc;margin-top:4px;text-decoration:none;transition:gap .15s;}
body.spx-public .spx-upd-featured-cta:hover{gap:10px;}
/* Grid and cards */
body.spx-public .spx-upd-grid-wrap{padding:0 clamp(18px,4vw,48px);margin-top:clamp(32px,5vw,60px);}
body.spx-public .spx-upd-grid-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
body.spx-public .spx-upd-grid-label{font-size:13px;font-weight:900;color:rgba(200,230,255,.55);letter-spacing:.04em;text-transform:uppercase;}
body.spx-public .spx-upd-grid-filters{display:flex;gap:6px;flex-wrap:wrap;}
body.spx-public .spx-upd-grid-v138p{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:clamp(32px,5vw,60px);}
body.spx-public .spx-upd-card-v138p{border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;}
body.spx-public .spx-upd-card-v138p:hover{transform:translateY(-4px);border-color:rgba(103,232,249,.22);box-shadow:0 16px 48px rgba(0,0,0,.22);}
body.spx-public .spx-upd-card-thumb{height:160px;background-size:cover;background-position:center;flex-shrink:0;}
body.spx-public .spx-upd-card-body{display:flex;flex-direction:column;gap:8px;padding:18px;flex:1;}
body.spx-public .spx-upd-card-body--no-thumb{padding-top:22px!important;}
body.spx-public .spx-upd-card-meta{display:flex;gap:8px;align-items:center;}
body.spx-public .spx-upd-card-cat{font-size:10.5px;font-weight:900;padding:2px 8px;border-radius:6px;background:rgba(103,232,249,.10);color:#a5f3fc;letter-spacing:.04em;text-transform:uppercase;}
body.spx-public .spx-upd-card-date{font-size:11px;font-weight:800;color:rgba(180,220,255,.40);}
body.spx-public .spx-upd-card-title{font-size:clamp(15px,1.8vw,17px);font-weight:950;letter-spacing:-.025em;margin:0;color:#e0efff;line-height:1.25;}
body.spx-public .spx-upd-card-excerpt{font-size:13px;line-height:1.65;color:rgba(200,230,255,.60);margin:0;flex:1;}
body.spx-public .spx-upd-card-link{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:900;color:#a5f3fc;margin-top:auto;text-decoration:none;padding-top:8px;}
body.spx-public .spx-upd-card-link:hover{gap:9px;}
body.spx-public .spx-upd-empty-v138p{text-align:center;padding:clamp(48px,8vw,96px) 20px;display:flex;flex-direction:column;align-items:center;gap:14px;color:rgba(200,230,255,.55);}
body.spx-public .spx-upd-empty-v138p h3{font-size:20px;font-weight:950;color:#e0efff;margin:0;}
body.spx-public .spx-upd-empty-v138p p{font-size:14px;line-height:1.65;max-width:420px;margin:0;}
body.spx-public .spx-upd-foot-cta{text-align:center;padding:clamp(32px,5vw,56px) 20px;display:flex;flex-direction:column;align-items:center;gap:14px;border-top:1px solid rgba(255,255,255,.06);margin-top:clamp(16px,3vw,32px);}
body.spx-public .spx-upd-foot-cta p{font-size:14px;color:rgba(200,230,255,.60);margin:0;}
/* Hero */
body.spx-public .spx-upd-hero-v138p{text-align:center;padding:clamp(80px,12vw,140px) clamp(20px,5vw,60px) clamp(48px,7vw,72px);display:flex;align-items:center;justify-content:center;}
body.spx-public .spx-upd-hero-inner{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:640px;}
body.spx-public .spx-upd-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.20);font-size:12px;font-weight:900;color:#86efac;margin-bottom:4px;}
body.spx-public .spx-upd-hero-v138p h1{font-size:clamp(36px,6vw,72px);font-weight:950;letter-spacing:-.04em;margin:0;line-height:.97;}
body.spx-public .spx-upd-hero-v138p p{font-size:clamp(15px,1.6vw,18px);color:rgba(220,240,255,.65);margin:0;line-height:1.65;max-width:500px;}
body.spx-public .spx-upd-hero-meta{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;color:rgba(200,230,255,.55);}
body.spx-public .spx-upd-hero-scroll{color:#a5f3fc;text-decoration:none;font-weight:900;}
body.spx-public .spx-upd-hero-scroll:hover{text-decoration:underline;}
body.spx-public .spx-upd-sys-banner{display:flex;align-items:center;gap:10px;padding:12px 20px;margin:0 clamp(18px,4vw,48px) 24px;border-radius:14px;background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.20);font-size:13.5px;font-weight:800;color:rgba(253,230,138,.9);}
/* Update detail */
body.spx-public .spx-update-detail-v138p{max-width:720px;margin:clamp(60px,10vw,100px) auto clamp(60px,8vw,100px);padding:0 clamp(18px,4vw,40px);}
body.spx-public .spx-update-detail-back{margin-bottom:28px;}
body.spx-public .spx-update-detail-hero{min-height:280px;border-radius:18px;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.09);margin-bottom:28px;}
body.spx-public .spx-update-detail-meta{margin-bottom:8px;}
body.spx-public .spx-update-detail-title{font-size:clamp(28px,5vw,52px);font-weight:950;letter-spacing:-.04em;margin:0 0 14px;line-height:1.05;}
body.spx-public .spx-update-detail-lede{font-size:clamp(16px,1.8vw,20px);color:rgba(220,240,255,.75);line-height:1.65;margin:0 0 28px;}
body.spx-public .spx-update-body{font-size:15px;line-height:1.75;color:rgba(220,240,255,.82);}
body.spx-public .spx-update-body h2,body.spx-public .spx-update-body h3,body.spx-public .spx-update-body h4{margin:28px 0 10px;font-weight:950;letter-spacing:-.03em;color:#e0efff;}
body.spx-public .spx-update-body p{margin:0 0 16px;}
body.spx-public .spx-update-body img{max-width:100%;height:auto;border-radius:12px;margin:16px 0;display:block;}
body.spx-public .spx-update-body video{max-width:100%;border-radius:12px;margin:16px 0;display:block;}
body.spx-public .spx-update-body figure{margin:20px 0;}
body.spx-public .spx-update-body figcaption{font-size:12.5px;color:rgba(180,220,255,.50);font-weight:700;margin-top:6px;text-align:center;}
body.spx-public .spx-update-body blockquote{border-left:3px solid rgba(103,232,249,.4);padding:12px 18px;margin:20px 0;color:rgba(200,230,255,.75);font-style:italic;background:rgba(103,232,249,.05);border-radius:0 10px 10px 0;}
/* Updates light mode */
html[data-theme="light"] body.spx-public .spx-upd-card-v138p,html[data-spx-theme="light"] body.spx-public .spx-upd-card-v138p{background:linear-gradient(180deg,#fff,rgba(242,248,255,.94))!important;border-color:rgba(15,23,42,.10)!important;}
html[data-theme="light"] body.spx-public .spx-upd-card-title,html[data-spx-theme="light"] body.spx-public .spx-upd-card-title{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-upd-card-excerpt,html[data-spx-theme="light"] body.spx-public .spx-upd-card-excerpt{color:rgba(15,23,42,.65)!important;}
html[data-theme="light"] body.spx-public .spx-upd-featured-v138p,html[data-spx-theme="light"] body.spx-public .spx-upd-featured-v138p{background:linear-gradient(145deg,#fff,rgba(242,248,255,.94))!important;border-color:rgba(15,23,42,.10)!important;}
html[data-theme="light"] body.spx-public .spx-upd-featured-title,html[data-spx-theme="light"] body.spx-public .spx-upd-featured-title{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-upd-featured-excerpt,html[data-spx-theme="light"] body.spx-public .spx-upd-featured-excerpt{color:rgba(15,23,42,.65)!important;}
html[data-theme="light"] body.spx-public .spx-update-detail-title,html[data-spx-theme="light"] body.spx-public .spx-update-detail-title{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-update-detail-lede,html[data-spx-theme="light"] body.spx-public .spx-update-detail-lede{color:rgba(15,23,42,.75)!important;}
html[data-theme="light"] body.spx-public .spx-update-body,html[data-spx-theme="light"] body.spx-public .spx-update-body{color:rgba(15,23,42,.82)!important;}
html[data-theme="light"] body.spx-public .spx-update-body h2,html[data-theme="light"] body.spx-public .spx-update-body h3,html[data-theme="light"] body.spx-public .spx-update-body h4,html[data-spx-theme="light"] body.spx-public .spx-update-body h2,html[data-spx-theme="light"] body.spx-public .spx-update-body h3,html[data-spx-theme="light"] body.spx-public .spx-update-body h4{color:#0f172a!important;}
/* Updates responsive */
@media(max-width:768px){
  body.spx-public .spx-upd-featured-v138p{grid-template-columns:1fr!important;margin:0 clamp(12px,3vw,20px)!important;}
  body.spx-public .spx-upd-featured-media{min-height:180px!important;}
  body.spx-public .spx-upd-grid-wrap{padding:0 clamp(12px,3vw,20px)!important;}
}
@media(max-width:540px){
  body.spx-public .spx-upd-grid-v138p{grid-template-columns:1fr!important;}
}

/* === Phase 9: Support action block — light mode fix === */
html[data-theme="light"] body.spx-public .spx-support-action-v138p,html[data-spx-theme="light"] body.spx-public .spx-support-action-v138p{background:linear-gradient(145deg,#fff,rgba(242,248,255,.94))!important;border:1px solid rgba(15,23,42,.10)!important;}

/* === Phase 10: Feature pages placeholder improvements === */
body.spx-public .spx-feat-hero-proof-item span{display:block!important;font-size:12px!important;color:rgba(200,230,255,.60)!important;font-weight:700!important;}
html[data-theme="light"] body.spx-public .spx-feat-hero-proof-item,html[data-spx-theme="light"] body.spx-public .spx-feat-hero-proof-item{background:rgba(15,23,42,.04)!important;border-color:rgba(15,23,42,.10)!important;}

/* === Prevent prefers-reduced-motion animation overload === */
@media(prefers-reduced-motion:reduce){
  body.spx-public .spx-upd-hero-dot,body.spx-public .spx-upd-card-v138p{animation:none!important;transition:none!important;}
  body.spx-public .spx-cockpit-panel{animation:none!important;}
  body.spx-public .spx-wf-tab,body.spx-public .spx-wf-panel,body.spx-public .spx-wf-panel-visual{transition:none!important;}
}

/* === A8.138q ticket label em asterisk fix === */
body.spx-public .spx-ticket-label span em[aria-hidden="true"]{display:inline!important;font-style:normal!important;color:rgba(255,100,100,.7);font-size:.85em;margin-left:2px;}
html[data-theme="light"] body.spx-public .spx-ticket-label span em[aria-hidden="true"],html[data-spx-theme="light"] body.spx-public .spx-ticket-label span em[aria-hidden="true"]{color:rgba(200,60,60,.7);}

/* ============================================================
   A8.138r — Public Experience Redesign Pass
   Appended to spixor-public.css
   ============================================================ */

/* ─── Phase 1: Nav sticky fix ───────────────────────────────
   A8.138q Phase 1/5 applied position:relative;z-index:1 to ALL
   body.spx-public > * on inner routes — including <header>.
   This overrides position:fixed. Fix: restore fixed on header.
*/
body.spx-public[data-route="/roadmap"] header.spx-nav-v26,
body.spx-public[data-route="/support"] header.spx-nav-v26,
body.spx-public[data-route="/updates"] header.spx-nav-v26,
body.spx-public[data-route^="/updates/"] header.spx-nav-v26,
body.spx-public[data-route^="/features"] header.spx-nav-v26{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:150!important;
}

/* ─── Phase 2: Support button ───────────────────────────────*/
body.spx-public .spx-nav-v26 .spx-nav-support-link,
.spx-nav-v26 .spx-nav-support-link{
  display:inline-flex!important;
  align-items:center!important;
  padding:6px 13px!important;
  border-radius:8px!important;
  border:1px solid rgba(103,232,249,.26)!important;
  background:rgba(103,232,249,.07)!important;
  color:rgba(200,230,255,.82)!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
  text-decoration:none!important;
  gap:0!important;
  transition:background .18s,border-color .18s,color .18s,transform .18s!important;
}
body.spx-public .spx-nav-v26 .spx-nav-support-link:hover,
.spx-nav-v26 .spx-nav-support-link:hover{
  background:rgba(103,232,249,.14)!important;
  border-color:rgba(103,232,249,.42)!important;
  color:#a5f3fc!important;
  transform:translateY(-1px)!important;
}
html[data-theme="light"] .spx-nav-v26 .spx-nav-support-link,
html[data-spx-theme="light"] .spx-nav-v26 .spx-nav-support-link{
  background:rgba(6,182,212,.08)!important;
  border-color:rgba(6,182,212,.25)!important;
  color:#0e7490!important;
}
html[data-theme="light"] .spx-nav-v26 .spx-nav-support-link:hover,
html[data-spx-theme="light"] .spx-nav-v26 .spx-nav-support-link:hover{
  background:rgba(6,182,212,.14)!important;
  border-color:rgba(6,182,212,.40)!important;
  color:#0c6075!important;
}

/* ─── Phase 2: Features dropdown ────────────────────────────*/
.spx-nav-v26 .spx-features-dropdown{
  border-radius:14px!important;
  min-width:540px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(103,232,249,.15)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.spx-nav-v26 .nav-panel-lead{
  padding:18px 20px!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  background:linear-gradient(90deg,rgba(24,201,245,.09),rgba(37,99,235,.05),transparent 60%)!important;
}
.spx-nav-v26 .nav-panel-lead strong{
  font-size:15px!important;
  letter-spacing:-.03em!important;
  line-height:1.2!important;
}
.spx-nav-v26 .nav-panel-lead small{
  font-size:12.5px!important;
  color:rgba(180,220,255,.5)!important;
}
.spx-nav-v26 .spx-mega-compact-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  padding:8px!important;
}
.spx-nav-v26 .nav-feature-link{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  padding:10px 12px!important;
  border-radius:9px!important;
  text-decoration:none!important;
  color:rgba(200,230,255,.75)!important;
  transition:background .15s,color .15s!important;
}
.spx-nav-v26 .nav-feature-link:hover{
  background:rgba(103,232,249,.08)!important;
  color:rgba(200,230,255,.95)!important;
}
.spx-nav-v26 .nav-feature-link.is-primary{
  background:rgba(103,232,249,.07)!important;
  border:1px solid rgba(103,232,249,.14)!important;
}
.spx-nav-v26 .nav-feature-link i{
  font-size:16px!important;
  width:32px!important;
  height:32px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.06)!important;
  flex-shrink:0!important;
  color:rgba(165,243,252,.9)!important;
}
.spx-nav-v26 .nav-feature-text{display:flex!important;flex-direction:column!important;gap:1px!important;min-width:0!important;}
.spx-nav-v26 .nav-feature-text small{font-size:10px!important;text-transform:uppercase!important;letter-spacing:.07em!important;color:rgba(150,200,255,.40)!important;font-weight:900!important;}
.spx-nav-v26 .nav-feature-text b{font-size:13px!important;font-weight:950!important;color:rgba(220,240,255,.9)!important;letter-spacing:-.02em!important;}
.spx-nav-v26 .nav-feature-text em{font-size:11.5px!important;font-style:normal!important;color:rgba(180,220,255,.50)!important;line-height:1.4!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.spx-nav-v26 .nav-feature-link>strong{margin-left:auto!important;font-size:9.5px!important;font-weight:900!important;padding:2px 7px!important;border-radius:5px!important;background:rgba(34,197,94,.12)!important;color:#86efac!important;border:1px solid rgba(34,197,94,.18)!important;flex-shrink:0!important;}
.spx-nav-v26 .spx-mega-secondary-row{display:flex!important;gap:6px!important;padding:8px!important;border-top:1px solid rgba(255,255,255,.06)!important;flex-wrap:wrap!important;}
.spx-nav-v26 .spx-mega-secondary-row a{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:5px 10px!important;border-radius:7px!important;font-size:12.5px!important;font-weight:800!important;color:rgba(180,220,255,.60)!important;text-decoration:none!important;transition:background .15s,color .15s!important;}
.spx-nav-v26 .spx-mega-secondary-row a:hover{background:rgba(255,255,255,.05)!important;color:rgba(200,230,255,.9)!important;}
.spx-nav-v26 .spx-mega-secondary-row a span{font-size:10px!important;padding:1px 6px!important;border-radius:4px!important;background:rgba(255,255,255,.07)!important;color:rgba(150,200,255,.50)!important;}
.spx-nav-v26 .spx-mega-footer-row{padding:10px 12px!important;border-top:1px solid rgba(255,255,255,.06)!important;background:rgba(255,255,255,.025)!important;}
.spx-nav-v26 .spx-mega-all-link{display:inline-flex!important;align-items:center!important;gap:7px!important;font-size:12.5px!important;font-weight:900!important;color:#a5f3fc!important;text-decoration:none!important;transition:gap .15s!important;}
.spx-nav-v26 .spx-mega-all-link:hover{gap:11px!important;}
html[data-theme="light"] .spx-nav-v26 .spx-features-dropdown,
html[data-spx-theme="light"] .spx-nav-v26 .spx-features-dropdown{
  border-color:rgba(15,23,42,.10)!important;
  box-shadow:0 20px 60px rgba(22,34,64,.14)!important;
}
html[data-theme="light"] .spx-nav-v26 .nav-feature-link,
html[data-spx-theme="light"] .spx-nav-v26 .nav-feature-link{color:rgba(15,23,42,.70)!important;}
html[data-theme="light"] .spx-nav-v26 .nav-feature-link:hover,
html[data-spx-theme="light"] .spx-nav-v26 .nav-feature-link:hover{background:rgba(6,182,212,.08)!important;color:#0e7490!important;}
html[data-theme="light"] .spx-nav-v26 .nav-feature-text b,
html[data-spx-theme="light"] .spx-nav-v26 .nav-feature-text b{color:#0f172a!important;}
html[data-theme="light"] .spx-nav-v26 .nav-feature-text em,
html[data-spx-theme="light"] .spx-nav-v26 .nav-feature-text em{color:rgba(15,23,42,.45)!important;}

/* ─── Phase 3: Background system — animated ─────────────────*/
@keyframes spxBgPulse{
  0%,100%{opacity:1;transform:scale(1) translate(0,0);}
  50%{opacity:.75;transform:scale(1.08) translate(2%,-2%);}
}
@keyframes spxBgGrid{
  0%{background-position:center top,0 0,0 0;}
  100%{background-position:center top,60px 60px,60px 60px;}
}
@keyframes spxBgOrbit{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

body.spx-public[data-route="/roadmap"]::before,
body.spx-public[data-route="/support"]::before,
body.spx-public[data-route="/updates"]::before,
body.spx-public[data-route^="/updates/"]::before,
body.spx-public[data-route^="/features"]::before{
  content:''!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -5%,rgba(56,189,248,.14) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 70%,rgba(99,102,241,.08) 0%,transparent 55%),
    linear-gradient(rgba(103,232,249,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,232,249,.035) 1px,transparent 1px)!important;
  background-size:auto,auto,56px 56px,56px 56px!important;
  background-position:center top,center center,0 0,0 0!important;
  animation:spxBgGrid 28s linear infinite!important;
}

/* Route-specific accent tints */
body.spx-public[data-route="/support"]::before{
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -5%,rgba(34,197,94,.12) 0%,rgba(56,189,248,.10) 40%,transparent 65%),
    radial-gradient(ellipse 60% 40% at 85% 75%,rgba(16,185,129,.07) 0%,transparent 55%),
    linear-gradient(rgba(52,211,153,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(52,211,153,.035) 1px,transparent 1px)!important;
}
body.spx-public[data-route="/updates"]::before,
body.spx-public[data-route^="/updates/"]::before{
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -5%,rgba(251,146,60,.10) 0%,rgba(251,191,36,.08) 35%,transparent 65%),
    radial-gradient(ellipse 60% 40% at 80% 70%,rgba(249,115,22,.06) 0%,transparent 55%),
    linear-gradient(rgba(251,146,60,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(251,146,60,.03) 1px,transparent 1px)!important;
}
body.spx-public[data-route^="/features"]::before{
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -5%,rgba(129,140,248,.14) 0%,rgba(56,189,248,.10) 40%,transparent 65%),
    radial-gradient(ellipse 60% 40% at 80% 70%,rgba(168,85,247,.08) 0%,transparent 55%),
    linear-gradient(rgba(129,140,248,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(129,140,248,.03) 1px,transparent 1px)!important;
}
html[data-theme="light"] body.spx-public[data-route="/roadmap"]::before,
html[data-spx-theme="light"] body.spx-public[data-route="/roadmap"]::before,
html[data-theme="light"] body.spx-public[data-route="/support"]::before,
html[data-spx-theme="light"] body.spx-public[data-route="/support"]::before,
html[data-theme="light"] body.spx-public[data-route="/updates"]::before,
html[data-spx-theme="light"] body.spx-public[data-route="/updates"]::before,
html[data-theme="light"] body.spx-public[data-route^="/features"]::before,
html[data-spx-theme="light"] body.spx-public[data-route^="/features"]::before{
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -5%,rgba(6,182,212,.10) 0%,transparent 60%),
    linear-gradient(rgba(6,182,212,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(6,182,212,.05) 1px,transparent 1px)!important;
  background-size:auto,56px 56px,56px 56px!important;
}
@media(prefers-reduced-motion:reduce){
  body.spx-public[data-route="/roadmap"]::before,
  body.spx-public[data-route="/support"]::before,
  body.spx-public[data-route="/updates"]::before,
  body.spx-public[data-route^="/updates/"]::before,
  body.spx-public[data-route^="/features"]::before{animation:none!important;}
}

/* ─── Phase 4: Export-first v138r ───────────────────────────*/
body.spx-public .spx-wf-v138r{
  padding:clamp(80px,10vw,120px) clamp(18px,4vw,52px) clamp(72px,9vw,108px);
  position:relative;
}
body.spx-public .spx-wfr-inner{max-width:1160px;margin:0 auto;display:grid;gap:clamp(48px,6vw,72px);}

/* Header */
body.spx-public .spx-wfr-header{display:grid;gap:18px;max-width:800px;}
body.spx-public .spx-wfr-eyebrow-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
body.spx-public .spx-wfr-stat-row{display:flex;align-items:center;gap:10px;}
body.spx-public .spx-wfr-stat{display:flex;flex-direction:column;gap:1px;}
body.spx-public .spx-wfr-stat strong{font-size:clamp(18px,2.2vw,26px);font-weight:950;letter-spacing:-.04em;background:linear-gradient(135deg,#a5f3fc,#38bdf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;}
body.spx-public .spx-wfr-stat span{font-size:10.5px;font-weight:800;color:rgba(180,220,255,.45);letter-spacing:.03em;text-transform:uppercase;}
body.spx-public .spx-wfr-stat-sep{width:1px;height:28px;background:rgba(255,255,255,.10);flex-shrink:0;}
body.spx-public .spx-wfr-header h2{font-size:clamp(32px,4.5vw,56px);font-weight:950;letter-spacing:-.045em;line-height:1.04;margin:0;color:#e8f4ff;}
body.spx-public .spx-wfr-header p{font-size:clamp(15px,1.6vw,18px);color:rgba(200,230,255,.60);line-height:1.65;margin:0;max-width:640px;}

/* Stage */
body.spx-public .spx-wfr-stage{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08);border-radius:22px;overflow:hidden;}

/* Step nav */
body.spx-public .spx-wfr-steps{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(255,255,255,.07);}
body.spx-public .spx-wfr-step{display:flex;align-items:center;gap:14px;padding:18px 20px;background:none;border:none;border-right:1px solid rgba(255,255,255,.07);cursor:pointer;text-align:left;transition:background .18s,color .18s;position:relative;}
body.spx-public .spx-wfr-step:last-child{border-right:none;}
body.spx-public .spx-wfr-step:hover{background:rgba(103,232,249,.05);}
body.spx-public .spx-wfr-step.is-active{background:rgba(103,232,249,.07);}
body.spx-public .spx-wfr-step.is-active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#a5f3fc,#38bdf8);}
body.spx-public .spx-wfr-step-num{font-size:11px;font-weight:950;color:rgba(165,243,252,.35);font-variant-numeric:tabular-nums;letter-spacing:.05em;min-width:22px;}
body.spx-public .spx-wfr-step.is-active .spx-wfr-step-num{color:#a5f3fc;}
body.spx-public .spx-wfr-step-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
body.spx-public .spx-wfr-step-body strong{font-size:13.5px;font-weight:950;color:rgba(200,230,255,.65);letter-spacing:-.02em;}
body.spx-public .spx-wfr-step.is-active .spx-wfr-step-body strong{color:#e0f0ff;}
body.spx-public .spx-wfr-step-body span{font-size:11px;color:rgba(160,210,255,.40);font-weight:700;}
body.spx-public .spx-wfr-step-arrow{margin-left:auto;width:5px;height:5px;border-right:1.5px solid rgba(165,243,252,.25);border-top:1.5px solid rgba(165,243,252,.25);transform:rotate(45deg);flex-shrink:0;}
body.spx-public .spx-wfr-step.is-active .spx-wfr-step-arrow{border-color:rgba(165,243,252,.7);}

/* Panels */
body.spx-public .spx-wfr-panels{padding:clamp(24px,3vw,40px);}
body.spx-public .spx-wfr-panel{display:none;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);align-items:center;}
body.spx-public .spx-wfr-panel.is-active{display:grid;}
body.spx-public .spx-wfr-panel-copy{display:flex;flex-direction:column;gap:14px;}
body.spx-public .spx-wfr-panel-copy h3{font-size:clamp(20px,2.2vw,28px);font-weight:950;letter-spacing:-.04em;margin:0;color:#e0efff;line-height:1.1;}
body.spx-public .spx-wfr-panel-copy p{font-size:14.5px;line-height:1.65;color:rgba(200,230,255,.60);margin:0;}
body.spx-public .spx-wfr-points{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
body.spx-public .spx-wfr-points li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:rgba(190,225,255,.65);font-weight:700;}
body.spx-public .spx-wfr-points li::before{content:'';width:5px;height:5px;border-radius:50%;background:#38bdf8;flex-shrink:0;margin-top:5px;}
body.spx-public .spx-wfr-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:900;color:#a5f3fc;text-decoration:none;transition:gap .15s;}
body.spx-public .spx-wfr-link:hover{gap:10px;}

/* Panel mocks */
body.spx-public .spx-wfr-panel-mock{border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);overflow:hidden;min-height:220px;display:flex;align-items:center;justify-content:center;}
body.spx-public .spx-wfrm{width:100%;font-size:11px;}
body.spx-public .spx-wfrm-chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07);}
body.spx-public .spx-wfrm-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);flex-shrink:0;}
body.spx-public .spx-wfrm-dot:first-child{background:rgba(248,113,113,.5);}
body.spx-public .spx-wfrm-dot:nth-child(2){background:rgba(251,191,36,.5);}
body.spx-public .spx-wfrm-dot:nth-child(3){background:rgba(74,222,128,.5);}
body.spx-public .spx-wfrm-title{margin-left:4px;font-size:11px;font-weight:800;color:rgba(180,220,255,.50);flex:1;}
body.spx-public .spx-wfrm-badge{padding:2px 7px;border-radius:5px;background:rgba(74,222,128,.12);color:#86efac;font-size:9.5px;font-weight:900;border:1px solid rgba(74,222,128,.2);}

/* Build mock */
body.spx-public .spx-wfrm--build .spx-wfrm-layout{display:flex;gap:0;min-height:180px;}
body.spx-public .spx-wfrm-sidebar{width:44px;border-right:1px solid rgba(255,255,255,.07);padding:10px 8px;display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
body.spx-public .spx-wfrm-sidebar-item{height:28px;border-radius:6px;background:rgba(255,255,255,.05);}
body.spx-public .spx-wfrm-sidebar-item.is-active{background:rgba(103,232,249,.12);border:1px solid rgba(103,232,249,.18);}
body.spx-public .spx-wfrm-canvas{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px;position:relative;}
body.spx-public .spx-wfrm-block{border-radius:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);}
body.spx-public .spx-wfrm-block--hero{height:52px;background:linear-gradient(90deg,rgba(56,189,248,.12),rgba(99,102,241,.08));border-color:rgba(103,232,249,.14);}
body.spx-public .spx-wfrm-block-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
body.spx-public .spx-wfrm-block--col{height:36px;}
body.spx-public .spx-wfrm-block--text{height:18px;width:70%;}
body.spx-public .spx-wfrm-cursor{position:absolute;bottom:28px;right:28px;width:10px;height:10px;border-radius:50%;background:rgba(165,243,252,.7);box-shadow:0 0 8px rgba(165,243,252,.5);animation:spxWfrCursor 1.8s ease-in-out infinite;}
@keyframes spxWfrCursor{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.6);}}

/* Share mock */
body.spx-public .spx-wfrm--share{display:flex;flex-direction:column;}
body.spx-public .spx-wfrm-share-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07);}
body.spx-public .spx-wfrm-share-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.5);flex-shrink:0;}
body.spx-public .spx-wfrm-share-url{flex:1;font-size:10.5px;color:rgba(180,220,255,.55);font-weight:700;}
body.spx-public .spx-wfrm-share-copy{font-size:9.5px;font-weight:900;padding:3px 8px;border-radius:5px;background:rgba(103,232,249,.12);color:#a5f3fc;border:1px solid rgba(103,232,249,.18);}
body.spx-public .spx-wfrm-share-preview{padding:10px;display:flex;flex-direction:column;gap:6px;}
body.spx-public .spx-wfrm-share-nav{height:12px;border-radius:3px;background:rgba(255,255,255,.07);width:80%;}
body.spx-public .spx-wfrm-share-hero{height:52px;border-radius:6px;background:linear-gradient(90deg,rgba(56,189,248,.10),rgba(99,102,241,.07));border:1px solid rgba(255,255,255,.07);}
body.spx-public .spx-wfrm-share-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
body.spx-public .spx-wfrm-share-col{height:28px;border-radius:5px;background:rgba(255,255,255,.05);}
body.spx-public .spx-wfrm-share-foot{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-top:1px solid rgba(255,255,255,.07);margin-top:auto;}
body.spx-public .spx-wfrm-share-meta{font-size:10px;color:rgba(160,200,255,.40);font-weight:700;}
body.spx-public .spx-wfrm-share-revoke{font-size:10px;font-weight:900;color:rgba(248,113,113,.7);}

/* Export/fork mock */
body.spx-public .spx-wfrm--export{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;}
body.spx-public .spx-wfrm-export-origin{display:flex;justify-content:center;}
body.spx-public .spx-wfrm-export-node{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;background:rgba(103,232,249,.10);border:1px solid rgba(103,232,249,.22);font-size:12px;font-weight:900;color:#a5f3fc;}
body.spx-public .spx-wfrm-export-line{width:1px;height:20px;background:linear-gradient(rgba(103,232,249,.3),transparent);}
body.spx-public .spx-wfrm-export-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;}
body.spx-public .spx-wfrm-export-path{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:11px;font-weight:900;color:rgba(180,220,255,.60);transition:background .15s,border-color .15s;}
body.spx-public .spx-wfrm-export-path--zip{border-color:rgba(99,102,241,.25);color:#a5b4fc;}
body.spx-public .spx-wfrm-export-path--wp{border-color:rgba(129,140,248,.25);color:#a5b4fc;}
body.spx-public .spx-wfrm-export-path--share{border-color:rgba(103,232,249,.25);color:#a5f3fc;}

/* Export section light mode */
html[data-theme="light"] body.spx-public .spx-wfr-stage,
html[data-spx-theme="light"] body.spx-public .spx-wfr-stage{background:linear-gradient(180deg,#fff,rgba(242,248,255,.94))!important;border-color:rgba(15,23,42,.09)!important;}
html[data-theme="light"] body.spx-public .spx-wfr-steps,
html[data-spx-theme="light"] body.spx-public .spx-wfr-steps{border-color:rgba(15,23,42,.08)!important;}
html[data-theme="light"] body.spx-public .spx-wfr-step,
html[data-spx-theme="light"] body.spx-public .spx-wfr-step{border-color:rgba(15,23,42,.07)!important;}
html[data-theme="light"] body.spx-public .spx-wfr-step.is-active,
html[data-spx-theme="light"] body.spx-public .spx-wfr-step.is-active{background:rgba(6,182,212,.07)!important;}
html[data-theme="light"] body.spx-public .spx-wfr-step-body strong,
html[data-spx-theme="light"] body.spx-public .spx-wfr-step-body strong{color:rgba(15,23,42,.55)!important;}
html[data-theme="light"] body.spx-public .spx-wfr-step.is-active .spx-wfr-step-body strong,
html[data-spx-theme="light"] body.spx-public .spx-wfr-step.is-active .spx-wfr-step-body strong{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-wfr-panel-copy h3,
html[data-spx-theme="light"] body.spx-public .spx-wfr-panel-copy h3{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-wfr-panel-copy p,
html[data-spx-theme="light"] body.spx-public .spx-wfr-panel-copy p{color:rgba(15,23,42,.60)!important;}
html[data-theme="light"] body.spx-public .spx-wfr-points li,
html[data-spx-theme="light"] body.spx-public .spx-wfr-points li{color:rgba(15,23,42,.60)!important;}
html[data-theme="light"] body.spx-public .spx-wfr-stat strong,
html[data-spx-theme="light"] body.spx-public .spx-wfr-stat strong{background:linear-gradient(135deg,#0e7490,#0369a1)!important;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
html[data-theme="light"] body.spx-public .spx-wfr-panel-mock,
html[data-spx-theme="light"] body.spx-public .spx-wfr-panel-mock{background:rgba(15,23,42,.03)!important;border-color:rgba(15,23,42,.09)!important;}
html[data-theme="light"] body.spx-public .spx-wfr-header h2,
html[data-spx-theme="light"] body.spx-public .spx-wfr-header h2{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-wfr-header p,
html[data-spx-theme="light"] body.spx-public .spx-wfr-header p{color:rgba(15,23,42,.58)!important;}

/* ─── Phase 5: Command Center v138r ─────────────────────────*/
body.spx-public .spx-cockpit-v138r{
  padding:clamp(72px,9vw,108px) clamp(18px,4vw,52px) clamp(80px,10vw,120px);
}
body.spx-public .spx-ckr-inner{max-width:1160px;margin:0 auto;display:grid;gap:clamp(40px,5vw,60px);}

body.spx-public .spx-ckr-header{max-width:680px;}
body.spx-public .spx-ckr-header h2{font-size:clamp(30px,4vw,52px);font-weight:950;letter-spacing:-.045em;line-height:1.06;margin:0 0 12px;color:#e8f4ff;}
body.spx-public .spx-ckr-header p{font-size:clamp(14px,1.5vw,16.5px);line-height:1.65;color:rgba(200,230,255,.55);margin:0;}

body.spx-public .spx-ckr-shell{border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));}

body.spx-public .spx-ckr-statusbar{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);flex-wrap:wrap;}
body.spx-public .spx-ckr-status-signal{display:flex;align-items:center;gap:7px;}
body.spx-public .spx-ckr-status-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.6);flex-shrink:0;animation:spxCkrDot 2.4s ease-in-out infinite;}
@keyframes spxCkrDot{0%,100%{box-shadow:0 0 8px rgba(74,222,128,.6);}50%{box-shadow:0 0 14px rgba(74,222,128,.9);}}
body.spx-public .spx-ckr-status-label{font-size:12.5px;font-weight:950;color:#d6f0ff;letter-spacing:-.01em;}
body.spx-public .spx-ckr-status-divider{width:1px;height:14px;background:rgba(255,255,255,.10);flex-shrink:0;}
body.spx-public .spx-ckr-status-meta{font-size:11.5px;font-weight:700;color:rgba(180,220,255,.40);}

body.spx-public .spx-ckr-body{display:grid;grid-template-columns:200px 1fr 1fr;min-height:320px;}

body.spx-public .spx-ckr-rail{display:flex;flex-direction:column;gap:4px;padding:14px 10px;border-right:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);}
body.spx-public .spx-ckr-mod{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:none;border:none;color:rgba(180,220,255,.50);font-size:13px;font-weight:900;cursor:pointer;text-align:left;width:100%;transition:background .15s,color .15s;}
body.spx-public .spx-ckr-mod:hover{background:rgba(255,255,255,.05);color:rgba(200,230,255,.80);}
body.spx-public .spx-ckr-mod.is-active{background:rgba(103,232,249,.10);color:#a5f3fc;}
body.spx-public .spx-ckr-mod-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:7px;background:rgba(255,255,255,.06);flex-shrink:0;color:rgba(165,243,252,.7);}
body.spx-public .spx-ckr-mod.is-active .spx-ckr-mod-icon{background:rgba(103,232,249,.12);color:#a5f3fc;}
body.spx-public .spx-ckr-mod-label{font-size:13px;font-weight:900;}

body.spx-public .spx-ckr-content{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:0;border-right:1px solid rgba(255,255,255,.07);}
body.spx-public .spx-ckr-panel{display:none;flex-direction:column;gap:16px;height:100%;}
body.spx-public .spx-ckr-panel.is-active{display:flex;animation:spxCkrFade .2s ease;}
@keyframes spxCkrFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
body.spx-public .spx-ckr-panel-copy h3{font-size:clamp(18px,2vw,24px);font-weight:950;letter-spacing:-.035em;margin:0 0 8px;color:#e0efff;}
body.spx-public .spx-ckr-panel-copy p{font-size:13.5px;line-height:1.65;color:rgba(190,225,255,.58);margin:0;}
body.spx-public .spx-ckr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto;}
body.spx-public .spx-ckr-stat{padding:12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:3px;}
body.spx-public .spx-ckr-stat b{font-size:clamp(14px,1.6vw,18px);font-weight:950;color:#d6f0ff;letter-spacing:-.03em;}
body.spx-public .spx-ckr-stat small{font-size:10.5px;font-weight:700;color:rgba(160,210,255,.40);}
body.spx-public .spx-ckr-panel-cta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:900;color:#a5f3fc;text-decoration:none;margin-top:16px;transition:gap .15s;}
body.spx-public .spx-ckr-panel-cta:hover{gap:10px;}

body.spx-public .spx-ckr-visual{padding:0;margin:0;display:flex;align-items:stretch;}
body.spx-public .spx-ckr-screen{flex:1;display:flex;flex-direction:column;overflow:hidden;}
body.spx-public .spx-ckr-screen-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;}
body.spx-public .spx-ckr-screen-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);}
body.spx-public .spx-ckr-screen-dot:first-child{background:rgba(248,113,113,.50);}
body.spx-public .spx-ckr-screen-dot:nth-child(2){background:rgba(251,191,36,.50);}
body.spx-public .spx-ckr-screen-dot:nth-child(3){background:rgba(74,222,128,.50);}
body.spx-public .spx-ckr-screen-title{margin-left:4px;font-size:11px;font-weight:800;color:rgba(180,220,255,.45);}
body.spx-public .spx-ckr-screen-body{flex:1;position:relative;overflow:hidden;min-height:200px;}
body.spx-public .spx-ckr-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
body.spx-public .spx-ckr-shot--dark{display:block;}
body.spx-public .spx-ckr-shot--light{display:none;}
html[data-theme="light"] body.spx-public .spx-ckr-shot--dark,
html[data-spx-theme="light"] body.spx-public .spx-ckr-shot--dark{display:none!important;}
html[data-theme="light"] body.spx-public .spx-ckr-shot--light,
html[data-spx-theme="light"] body.spx-public .spx-ckr-shot--light{display:block!important;}

/* Cockpit light mode */
html[data-theme="light"] body.spx-public .spx-ckr-shell,
html[data-spx-theme="light"] body.spx-public .spx-ckr-shell{background:linear-gradient(180deg,#fff,rgba(242,248,255,.94))!important;border-color:rgba(15,23,42,.09)!important;}
html[data-theme="light"] body.spx-public .spx-ckr-statusbar,
html[data-spx-theme="light"] body.spx-public .spx-ckr-statusbar{background:rgba(15,23,42,.025)!important;border-color:rgba(15,23,42,.08)!important;}
html[data-theme="light"] body.spx-public .spx-ckr-status-label,
html[data-spx-theme="light"] body.spx-public .spx-ckr-status-label{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-ckr-status-meta,
html[data-spx-theme="light"] body.spx-public .spx-ckr-status-meta{color:rgba(15,23,42,.40)!important;}
html[data-theme="light"] body.spx-public .spx-ckr-status-divider,
html[data-spx-theme="light"] body.spx-public .spx-ckr-status-divider{background:rgba(15,23,42,.10)!important;}
html[data-theme="light"] body.spx-public .spx-ckr-rail,
html[data-spx-theme="light"] body.spx-public .spx-ckr-rail{background:rgba(15,23,42,.025)!important;border-color:rgba(15,23,42,.08)!important;}
html[data-theme="light"] body.spx-public .spx-ckr-mod,
html[data-spx-theme="light"] body.spx-public .spx-ckr-mod{color:rgba(15,23,42,.45)!important;}
html[data-theme="light"] body.spx-public .spx-ckr-mod:hover,
html[data-spx-theme="light"] body.spx-public .spx-ckr-mod:hover{background:rgba(15,23,42,.05)!important;color:rgba(15,23,42,.8)!important;}
html[data-theme="light"] body.spx-public .spx-ckr-mod.is-active,
html[data-spx-theme="light"] body.spx-public .spx-ckr-mod.is-active{background:rgba(6,182,212,.08)!important;color:#0e7490!important;}
html[data-theme="light"] body.spx-public .spx-ckr-mod-icon,
html[data-spx-theme="light"] body.spx-public .spx-ckr-mod-icon{background:rgba(15,23,42,.05)!important;color:rgba(15,23,42,.40)!important;}
html[data-theme="light"] body.spx-public .spx-ckr-panel-copy h3,
html[data-spx-theme="light"] body.spx-public .spx-ckr-panel-copy h3{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-ckr-panel-copy p,
html[data-spx-theme="light"] body.spx-public .spx-ckr-panel-copy p{color:rgba(15,23,42,.55)!important;}
html[data-theme="light"] body.spx-public .spx-ckr-stat,
html[data-spx-theme="light"] body.spx-public .spx-ckr-stat{background:rgba(15,23,42,.03)!important;border-color:rgba(15,23,42,.09)!important;}
html[data-theme="light"] body.spx-public .spx-ckr-stat b,
html[data-spx-theme="light"] body.spx-public .spx-ckr-stat b{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-ckr-header h2,
html[data-spx-theme="light"] body.spx-public .spx-ckr-header h2{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-ckr-header p,
html[data-spx-theme="light"] body.spx-public .spx-ckr-header p{color:rgba(15,23,42,.55)!important;}

/* ─── Phase 6: Pricing header ───────────────────────────────*/
body.spx-public .spx-pricing-v138p-head{
  max-width:760px!important;
  margin:0 auto clamp(40px,5vw,60px)!important;
  text-align:left!important;
  display:grid!important;
  gap:12px!important;
  padding:0 clamp(18px,4vw,52px)!important;
}
body.spx-public .spx-pricing-v138p-head .eyebrow{margin:0!important;}
body.spx-public .spx-pricing-v138p-head h2{font-size:clamp(32px,4.5vw,56px)!important;font-weight:950!important;letter-spacing:-.045em!important;line-height:1.04!important;margin:0!important;color:#e8f4ff!important;}
body.spx-public .spx-pricing-v138p-head p{font-size:clamp(14px,1.5vw,17px)!important;line-height:1.65!important;color:rgba(200,230,255,.55)!important;margin:0!important;max-width:580px!important;}
html[data-theme="light"] body.spx-public .spx-pricing-v138p-head h2,
html[data-spx-theme="light"] body.spx-public .spx-pricing-v138p-head h2{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-pricing-v138p-head p,
html[data-spx-theme="light"] body.spx-public .spx-pricing-v138p-head p{color:rgba(15,23,42,.55)!important;}

/* ─── Phase 7: Alpha Feedback v138r ─────────────────────────*/
body.spx-public .spx-alpha-v138r{
  padding:clamp(72px,9vw,108px) clamp(18px,4vw,52px) clamp(80px,10vw,120px);
}
body.spx-public .spx-alr-inner{max-width:1160px;margin:0 auto;display:grid;gap:clamp(40px,5vw,60px);}

body.spx-public .spx-alr-header{max-width:680px;display:grid;gap:14px;}
body.spx-public .spx-alr-live{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:900;color:rgba(74,222,128,.9);letter-spacing:.04em;text-transform:uppercase;}
body.spx-public .spx-alr-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.7);flex-shrink:0;animation:spxAlrDot 1.8s ease-in-out infinite;}
@keyframes spxAlrDot{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.5);opacity:.5;}}
body.spx-public .spx-alr-header h2{font-size:clamp(30px,4vw,50px);font-weight:950;letter-spacing:-.045em;line-height:1.06;margin:0;color:#e8f4ff;}
body.spx-public .spx-alr-header p{font-size:clamp(14px,1.5vw,17px);line-height:1.65;color:rgba(200,230,255,.55);margin:0;max-width:580px;}

body.spx-public .spx-alr-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:start;}

/* Signal cards */
body.spx-public .spx-alr-signals{display:flex;flex-direction:column;gap:12px;}
body.spx-public .spx-alr-signal{display:flex;align-items:flex-start;gap:14px;padding:18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);transition:border-color .18s,background .18s;}
body.spx-public .spx-alr-signal:hover{background:rgba(103,232,249,.05);border-color:rgba(103,232,249,.18);}
body.spx-public .spx-alr-signal-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(103,232,249,.10);color:#a5f3fc;flex-shrink:0;}
body.spx-public .spx-alr-signal-copy{display:flex;flex-direction:column;gap:4px;}
body.spx-public .spx-alr-signal-copy b{font-size:14px;font-weight:950;color:#d6f0ff;letter-spacing:-.02em;}
body.spx-public .spx-alr-signal-copy small{font-size:12.5px;color:rgba(180,220,255,.50);line-height:1.55;}

/* Focus panel */
body.spx-public .spx-alr-focus{padding:clamp(22px,3vw,36px);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08);border-radius:20px;display:grid;gap:18px;}
body.spx-public .spx-alr-focus-head{}
body.spx-public .spx-alr-focus-kicker{display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(165,243,252,.50);margin-bottom:6px;}
body.spx-public .spx-alr-focus-head h3{font-size:clamp(17px,1.8vw,22px);font-weight:950;letter-spacing:-.035em;margin:0;color:#e0efff;}
body.spx-public .spx-alr-topics{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
body.spx-public .spx-alr-topic{display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:rgba(180,220,255,.60);font-size:12.5px;font-weight:900;cursor:pointer;text-align:left;transition:background .15s,border-color .15s,color .15s;}
body.spx-public .spx-alr-topic:hover{background:rgba(103,232,249,.06);border-color:rgba(103,232,249,.18);color:rgba(200,230,255,.85);}
body.spx-public .spx-alr-topic.is-active{background:rgba(103,232,249,.10);border-color:rgba(103,232,249,.25);color:#a5f3fc;}
body.spx-public .spx-alr-copy-out{font-size:13.5px;line-height:1.65;color:rgba(190,225,255,.60);margin:0;padding:14px;background:rgba(103,232,249,.04);border-radius:10px;border:1px solid rgba(103,232,249,.08);}
body.spx-public .spx-alr-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* Alpha light mode */
html[data-theme="light"] body.spx-public .spx-alr-header h2,
html[data-spx-theme="light"] body.spx-public .spx-alr-header h2{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-alr-header p,
html[data-spx-theme="light"] body.spx-public .spx-alr-header p{color:rgba(15,23,42,.55)!important;}
html[data-theme="light"] body.spx-public .spx-alr-signal,
html[data-spx-theme="light"] body.spx-public .spx-alr-signal{background:rgba(255,255,255,.85)!important;border-color:rgba(15,23,42,.09)!important;}
html[data-theme="light"] body.spx-public .spx-alr-signal-copy b,
html[data-spx-theme="light"] body.spx-public .spx-alr-signal-copy b{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-alr-signal-copy small,
html[data-spx-theme="light"] body.spx-public .spx-alr-signal-copy small{color:rgba(15,23,42,.50)!important;}
html[data-theme="light"] body.spx-public .spx-alr-focus,
html[data-spx-theme="light"] body.spx-public .spx-alr-focus{background:linear-gradient(180deg,#fff,rgba(242,248,255,.94))!important;border-color:rgba(15,23,42,.09)!important;}
html[data-theme="light"] body.spx-public .spx-alr-focus-head h3,
html[data-spx-theme="light"] body.spx-public .spx-alr-focus-head h3{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-alr-topic,
html[data-spx-theme="light"] body.spx-public .spx-alr-topic{background:rgba(15,23,42,.03)!important;border-color:rgba(15,23,42,.08)!important;color:rgba(15,23,42,.55)!important;}
html[data-theme="light"] body.spx-public .spx-alr-topic.is-active,
html[data-spx-theme="light"] body.spx-public .spx-alr-topic.is-active{background:rgba(6,182,212,.08)!important;border-color:rgba(6,182,212,.22)!important;color:#0e7490!important;}
html[data-theme="light"] body.spx-public .spx-alr-copy-out,
html[data-spx-theme="light"] body.spx-public .spx-alr-copy-out{color:rgba(15,23,42,.60)!important;background:rgba(6,182,212,.04)!important;border-color:rgba(6,182,212,.12)!important;}

/* ─── Phase 8: Support search suggestions ───────────────────*/
body.spx-public .spx-kbs-wrap{position:relative!important;}
body.spx-public .spx-kbs-dropdown{
  position:absolute!important;
  top:calc(100% + 8px)!important;
  left:0!important;
  right:0!important;
  z-index:200!important;
  background:rgba(6,12,26,.97)!important;
  border:1px solid rgba(103,232,249,.18)!important;
  border-radius:14px!important;
  box-shadow:0 20px 60px rgba(0,0,0,.40)!important;
  overflow:hidden!important;
  backdrop-filter:blur(20px)!important;
  animation:spxKbsDrop .18s ease!important;
}
@keyframes spxKbsDrop{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
body.spx-public .spx-kbs-item{
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
  padding:12px 16px!important;
  cursor:pointer!important;
  transition:background .12s!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
}
body.spx-public .spx-kbs-item:last-child{border-bottom:none!important;}
body.spx-public .spx-kbs-item:hover,
body.spx-public .spx-kbs-item.is-focused{background:rgba(103,232,249,.08)!important;}
body.spx-public .spx-kbs-cat{font-size:9.5px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.07em!important;color:rgba(165,243,252,.45)!important;}
body.spx-public .spx-kbs-title{font-size:13.5px!important;font-weight:900!important;color:#d6f0ff!important;letter-spacing:-.02em!important;}
body.spx-public .spx-kbs-summary{font-size:12px!important;color:rgba(180,220,255,.50)!important;line-height:1.5!important;}
body.spx-public .spx-kbs-empty{padding:14px 16px!important;font-size:13px!important;color:rgba(180,220,255,.40)!important;font-weight:700!important;}
html[data-theme="light"] body.spx-public .spx-kbs-dropdown,
html[data-spx-theme="light"] body.spx-public .spx-kbs-dropdown{
  background:rgba(255,255,255,.98)!important;
  border-color:rgba(15,23,42,.12)!important;
  box-shadow:0 16px 48px rgba(22,34,64,.14)!important;
}
html[data-theme="light"] body.spx-public .spx-kbs-title,
html[data-spx-theme="light"] body.spx-public .spx-kbs-title{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-kbs-summary,
html[data-spx-theme="light"] body.spx-public .spx-kbs-summary{color:rgba(15,23,42,.50)!important;}
html[data-theme="light"] body.spx-public .spx-kbs-item:hover,
html[data-theme="light"] body.spx-public .spx-kbs-item.is-focused,
html[data-spx-theme="light"] body.spx-public .spx-kbs-item:hover,
html[data-spx-theme="light"] body.spx-public .spx-kbs-item.is-focused{background:rgba(6,182,212,.07)!important;}

/* ─── Phase 9: Updates v138r ────────────────────────────────*/
body.spx-public .spx-upd-hero-v138r{
  text-align:center;
  padding:clamp(96px,13vw,160px) clamp(20px,5vw,60px) clamp(48px,6vw,72px);
  display:flex;
  align-items:center;
  justify-content:center;
}
body.spx-public .spx-updr-hero-inner{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:680px;}
body.spx-public .spx-updr-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.22);font-size:12px;font-weight:900;color:#86efac;}
body.spx-public .spx-updr-hero-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.7);flex-shrink:0;animation:spxUpdDot 1.8s ease-in-out infinite;}
body.spx-public .spx-upd-hero-v138r h1{font-size:clamp(36px,6vw,72px);font-weight:950;letter-spacing:-.055em;margin:0;line-height:.95;}
body.spx-public .spx-upd-hero-v138r p{font-size:clamp(14px,1.5vw,17px);color:rgba(200,230,255,.58);line-height:1.65;margin:0;max-width:500px;}
body.spx-public .spx-updr-hero-row{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;color:rgba(180,220,255,.45);}
body.spx-public .spx-updr-hero-sep{opacity:.5;}
body.spx-public .spx-updr-hero-scroll{color:#a5f3fc;text-decoration:none;font-weight:900;transition:color .15s;}
body.spx-public .spx-updr-hero-scroll:hover{color:#67e8f9;}

body.spx-public .spx-updr-sys-banner{display:flex;align-items:center;gap:10px;padding:12px 20px;margin:0 clamp(18px,4vw,52px) 24px;border-radius:12px;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.18);font-size:13px;font-weight:800;color:rgba(253,230,138,.88);}

body.spx-public .spx-updr-featured{padding:0 clamp(18px,4vw,52px);margin-bottom:clamp(32px,5vw,56px);}
body.spx-public .spx-updr-featured-inner{border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.09);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.025));display:grid;grid-template-columns:1fr 1.4fr;min-height:300px;}
body.spx-public .spx-updr-featured-media{position:relative;background-size:cover;background-position:center;min-height:200px;}
body.spx-public .spx-updr-featured-media-grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,9,18,0),rgba(5,9,18,.4));}
body.spx-public .spx-updr-featured-body{padding:clamp(24px,3vw,42px);display:flex;flex-direction:column;justify-content:center;gap:14px;}
body.spx-public .spx-updr-featured-tags{display:flex;gap:7px;align-items:center;flex-wrap:wrap;}
body.spx-public .spx-updr-featured-badge{padding:3px 9px;border-radius:6px;font-size:10px;font-weight:900;background:rgba(34,197,94,.12);color:#86efac;border:1px solid rgba(34,197,94,.18);}
body.spx-public .spx-updr-featured-cat{padding:3px 9px;border-radius:6px;font-size:10px;font-weight:800;background:rgba(255,255,255,.07);color:rgba(180,220,255,.60);border:1px solid rgba(255,255,255,.08);}
body.spx-public .spx-updr-featured-date{font-size:11px;font-weight:800;color:rgba(160,210,255,.40);}
body.spx-public .spx-updr-featured-title{font-size:clamp(20px,2.5vw,30px);font-weight:950;letter-spacing:-.04em;margin:0;color:#e0efff;line-height:1.12;}
body.spx-public .spx-updr-featured-excerpt{font-size:13.5px;line-height:1.65;color:rgba(190,225,255,.58);margin:0;}
body.spx-public .spx-updr-featured-cta{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:900;color:#a5f3fc;text-decoration:none;transition:gap .15s;align-self:flex-start;}
body.spx-public .spx-updr-featured-cta:hover{gap:11px;}

body.spx-public .spx-updr-grid-wrap{padding:0 clamp(18px,4vw,52px);}
body.spx-public .spx-updr-grid-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
body.spx-public .spx-updr-grid-meta{display:flex;align-items:baseline;gap:10px;}
body.spx-public .spx-updr-grid-label{font-size:13px;font-weight:900;color:rgba(200,230,255,.55);letter-spacing:.04em;text-transform:uppercase;}
body.spx-public .spx-updr-grid-count{font-size:11px;font-weight:700;color:rgba(160,210,255,.35);}
body.spx-public .spx-updr-filters{display:flex;gap:6px;flex-wrap:wrap;}
body.spx-public .spx-updr-filter{padding:5px 12px;border-radius:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:rgba(180,220,255,.55);font-size:12px;font-weight:900;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
body.spx-public .spx-updr-filter:hover{background:rgba(103,232,249,.08);border-color:rgba(103,232,249,.18);color:rgba(200,230,255,.85);}
body.spx-public .spx-updr-filter.is-active{background:rgba(103,232,249,.12);border-color:rgba(103,232,249,.25);color:#a5f3fc;}
body.spx-public .spx-updr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-bottom:clamp(32px,5vw,56px);}
body.spx-public .spx-updr-card{border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;transition:transform .2s,border-color .2s,box-shadow .2s;}
body.spx-public .spx-updr-card:hover{transform:translateY(-4px);border-color:rgba(103,232,249,.22);box-shadow:0 16px 52px rgba(0,0,0,.22);}
body.spx-public .spx-updr-card[hidden]{display:none!important;}
body.spx-public .spx-updr-card-thumb{height:160px;background-size:cover;background-position:center;flex-shrink:0;}
body.spx-public .spx-updr-card-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1;}
body.spx-public .spx-updr-card-body--bare{padding-top:22px;}
body.spx-public .spx-updr-card-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
body.spx-public .spx-updr-card-cat{font-size:10px;font-weight:900;padding:2px 8px;border-radius:5px;background:rgba(103,232,249,.10);color:#a5f3fc;letter-spacing:.05em;text-transform:uppercase;}
body.spx-public .spx-updr-card-date{font-size:11px;font-weight:700;color:rgba(160,210,255,.40);}
body.spx-public .spx-updr-card-title{font-size:clamp(15px,1.7vw,17px);font-weight:950;letter-spacing:-.03em;margin:0;color:#e0efff;line-height:1.22;}
body.spx-public .spx-updr-card-excerpt{font-size:13px;line-height:1.65;color:rgba(190,225,255,.55);margin:0;flex:1;}
body.spx-public .spx-updr-card-link{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:900;color:#a5f3fc;text-decoration:none;margin-top:auto;padding-top:10px;transition:gap .15s;}
body.spx-public .spx-updr-card-link:hover{gap:9px;}
body.spx-public .spx-updr-empty{text-align:center;padding:clamp(52px,9vw,100px) 20px;display:flex;flex-direction:column;align-items:center;gap:16px;color:rgba(180,220,255,.45);}
body.spx-public .spx-updr-empty-icon{width:56px;height:56px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(165,243,252,.40);}
body.spx-public .spx-updr-empty h3{font-size:18px;font-weight:950;color:#d6f0ff;margin:0;}
body.spx-public .spx-updr-empty p{font-size:13.5px;line-height:1.65;max-width:420px;margin:0;}
body.spx-public .spx-updr-foot{text-align:center;padding:clamp(28px,4vw,52px) 20px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:8px;}
body.spx-public .spx-updr-foot p{font-size:13.5px;color:rgba(180,220,255,.45);margin:0;font-weight:700;}

/* Updates light mode */
html[data-theme="light"] body.spx-public .spx-upd-hero-v138r h1,
html[data-spx-theme="light"] body.spx-public .spx-upd-hero-v138r h1{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-upd-hero-v138r p,
html[data-spx-theme="light"] body.spx-public .spx-upd-hero-v138r p{color:rgba(15,23,42,.55)!important;}
html[data-theme="light"] body.spx-public .spx-updr-featured-inner,
html[data-spx-theme="light"] body.spx-public .spx-updr-featured-inner{background:linear-gradient(160deg,#fff,rgba(242,248,255,.94))!important;border-color:rgba(15,23,42,.09)!important;}
html[data-theme="light"] body.spx-public .spx-updr-featured-title,
html[data-spx-theme="light"] body.spx-public .spx-updr-featured-title{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-updr-featured-excerpt,
html[data-spx-theme="light"] body.spx-public .spx-updr-featured-excerpt{color:rgba(15,23,42,.55)!important;}
html[data-theme="light"] body.spx-public .spx-updr-card,
html[data-spx-theme="light"] body.spx-public .spx-updr-card{background:linear-gradient(180deg,#fff,rgba(242,248,255,.94))!important;border-color:rgba(15,23,42,.09)!important;}
html[data-theme="light"] body.spx-public .spx-updr-card-title,
html[data-spx-theme="light"] body.spx-public .spx-updr-card-title{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-updr-card-excerpt,
html[data-spx-theme="light"] body.spx-public .spx-updr-card-excerpt{color:rgba(15,23,42,.55)!important;}
html[data-theme="light"] body.spx-public .spx-updr-filter,
html[data-spx-theme="light"] body.spx-public .spx-updr-filter{background:rgba(15,23,42,.04)!important;border-color:rgba(15,23,42,.09)!important;color:rgba(15,23,42,.55)!important;}
html[data-theme="light"] body.spx-public .spx-updr-filter.is-active,
html[data-spx-theme="light"] body.spx-public .spx-updr-filter.is-active{background:rgba(6,182,212,.10)!important;border-color:rgba(6,182,212,.22)!important;color:#0e7490!important;}

/* ─── Phase 10: Feature pages ───────────────────────────────*/
/* Ensure nav clears on feature inner pages */
body.spx-public[data-route^="/features"] .spx-feat-breadcrumb-v138j,
body.spx-public[data-route^="/features"] .spx-feat-breadcrumb-v138n{padding-top:clamp(80px,10vw,120px)!important;}

/* Feature hero: stronger, more alive */
body.spx-public .spx-feat-hero-v138n{padding:clamp(96px,12vw,148px) clamp(18px,4vw,52px) clamp(64px,7vw,96px)!important;}
body.spx-public .spx-feat-hero-v138n h1{font-size:clamp(36px,5.5vw,72px)!important;letter-spacing:-.055em!important;line-height:.95!important;}
body.spx-public .spx-feat-hero-lead{font-size:clamp(15px,1.6vw,19px)!important;color:rgba(200,230,255,.62)!important;line-height:1.65!important;}
body.spx-public .spx-feat-hero-proof-item{padding:14px 18px!important;border-radius:12px!important;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.03))!important;border:1px solid rgba(255,255,255,.09)!important;transition:border-color .18s,transform .18s!important;}
body.spx-public .spx-feat-hero-proof-item:hover{border-color:rgba(103,232,249,.30)!important;transform:translateY(-2px)!important;}
body.spx-public .spx-feat-hero-proof-item strong{display:block!important;font-size:clamp(20px,2.5vw,30px)!important;font-weight:950!important;background:linear-gradient(135deg,#a5f3fc,#38bdf8)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;letter-spacing:-.04em!important;margin-bottom:3px!important;}
body.spx-public .spx-feat-hero-proof-item span{font-size:11.5px!important;color:rgba(180,220,255,.50)!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.04em!important;}

/* Feature how steps: more tactile */
body.spx-public .spx-feat-how-step{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:16px!important;padding:22px 20px!important;transition:transform .2s,border-color .2s!important;}
body.spx-public .spx-feat-how-step:hover{transform:translateY(-4px)!important;border-color:rgba(103,232,249,.22)!important;}
body.spx-public .spx-feat-how-num{font-size:11px!important;font-weight:950!important;letter-spacing:.06em!important;color:rgba(165,243,252,.40)!important;font-variant-numeric:tabular-nums!important;margin-bottom:12px!important;}
body.spx-public .spx-feat-how-step-body h3{font-size:clamp(16px,1.6vw,20px)!important;font-weight:950!important;letter-spacing:-.03em!important;margin:0 0 8px!important;color:#e0efff!important;}
body.spx-public .spx-feat-how-step-body p{font-size:13.5px!important;line-height:1.65!important;color:rgba(180,220,255,.55)!important;margin:0!important;}

/* Feature why list: clean card borders */
body.spx-public .spx-feat-why-item{padding:16px 18px!important;border-radius:12px!important;border:1px solid rgba(255,255,255,.07)!important;background:rgba(255,255,255,.03)!important;transition:border-color .18s,background .18s!important;}
body.spx-public .spx-feat-why-item:hover{border-color:rgba(103,232,249,.20)!important;background:rgba(103,232,249,.04)!important;}

/* Feature screen frame: intentional placeholder */
body.spx-public .spx-feat-hero-screen-frame{border-radius:14px!important;border:1px solid rgba(103,232,249,.18)!important;overflow:hidden!important;box-shadow:0 24px 72px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07)!important;}
body.spx-public .spx-feat-hero-img{display:block!important;width:100%!important;height:auto!important;}

/* Feature light mode */
html[data-theme="light"] body.spx-public .spx-feat-hero-proof-item,
html[data-spx-theme="light"] body.spx-public .spx-feat-hero-proof-item{background:rgba(255,255,255,.85)!important;border-color:rgba(15,23,42,.10)!important;}
html[data-theme="light"] body.spx-public .spx-feat-how-step,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-step{background:rgba(255,255,255,.90)!important;border-color:rgba(15,23,42,.09)!important;}
html[data-theme="light"] body.spx-public .spx-feat-how-step-body h3,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-step-body h3{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-feat-how-step-body p,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-step-body p{color:rgba(15,23,42,.55)!important;}
html[data-theme="light"] body.spx-public .spx-feat-why-item,
html[data-spx-theme="light"] body.spx-public .spx-feat-why-item{background:rgba(255,255,255,.85)!important;border-color:rgba(15,23,42,.09)!important;}

/* ─── Responsive ─────────────────────────────────────────────*/
@media(max-width:1080px){
  body.spx-public .spx-ckr-body{grid-template-columns:180px 1fr;}
  body.spx-public .spx-ckr-visual{display:none!important;}
}
@media(max-width:900px){
  body.spx-public .spx-wfr-panel.is-active{grid-template-columns:1fr!important;}
  body.spx-public .spx-wfr-panel-mock{min-height:180px!important;}
  body.spx-public .spx-wfr-steps{grid-template-columns:1fr!important;}
  body.spx-public .spx-wfr-step{border-right:none!important;border-bottom:1px solid rgba(255,255,255,.06)!important;}
  body.spx-public .spx-wfr-step:last-child{border-bottom:none!important;}
  body.spx-public .spx-alr-body{grid-template-columns:1fr!important;}
  body.spx-public .spx-updr-featured-inner{grid-template-columns:1fr!important;}
  body.spx-public .spx-updr-featured-media{min-height:160px!important;}
  body.spx-public .spx-feat-why-inner{grid-template-columns:1fr!important;}
  body.spx-public .spx-feat-hero-v138n{flex-direction:column!important;}
}
@media(max-width:720px){
  body.spx-public .spx-ckr-body{grid-template-columns:1fr!important;}
  body.spx-public .spx-ckr-rail{flex-direction:row!important;flex-wrap:wrap!important;gap:4px!important;border-right:none!important;border-bottom:1px solid rgba(255,255,255,.07)!important;padding:8px!important;overflow-x:auto!important;}
  body.spx-public .spx-ckr-mod{flex-shrink:0!important;white-space:nowrap!important;padding:7px 10px!important;}
  body.spx-public .spx-ckr-mod-icon{display:none!important;}
  body.spx-public .spx-ckr-stats{grid-template-columns:1fr 1fr!important;}
  body.spx-public .spx-alr-topics{grid-template-columns:1fr!important;}
  body.spx-public .spx-updr-grid-head{flex-direction:column!important;align-items:flex-start!important;}
}
@media(max-width:600px){
  body.spx-public .spx-wfr-eyebrow-row{flex-direction:column!important;align-items:flex-start!important;gap:12px!important;}
  body.spx-public .spx-updr-grid{grid-template-columns:1fr!important;}
  body.spx-public .spx-feat-how-steps{grid-template-columns:1fr!important;}
}

/* ─── Reduced motion ─────────────────────────────────────────*/
@media(prefers-reduced-motion:reduce){
  body.spx-public .spx-wfrm-cursor{animation:none!important;}
  body.spx-public .spx-ckr-status-dot{animation:none!important;}
  body.spx-public .spx-alr-dot{animation:none!important;}
  body.spx-public .spx-updr-hero-dot{animation:none!important;}
  body.spx-public .spx-updr-card{transition:none!important;}
  body.spx-public .spx-alr-signal{transition:none!important;}
  body.spx-public .spx-wfr-step{transition:none!important;}
  body.spx-public .spx-ckr-panel.is-active{animation:none!important;}
  body.spx-public .spx-kbs-dropdown{animation:none!important;}
}

/* ============================================================
   A8.138s — Public Experience Fix + Focused Rework
   Appended to spixor-public.css
   ============================================================ */

/* ─── Root-cause fix: Remove main stacking context ───────────
   A8.138q applied position:relative;z-index:1 to all body > *
   including <main>. This created a stacking context at z-index:1
   that trapped modals (ticket, KB) and covered body::before.
   Fix: override z-index back to auto for inner page routes.
*/
body.spx-public[data-route="/support"] main#main,
body.spx-public[data-route="/updates"] main#main,
body.spx-public[data-route="/roadmap"] main#main,
body.spx-public[data-route^="/updates/"] main#main,
body.spx-public[data-route^="/features"] main#main{
  z-index:auto!important;
}

/* ─── Root-cause fix: Modal overlay guarantee ────────────────
   With main stacking context removed, modals inside main now
   participate in body's stacking context at their own z-index.
   Belt-and-suspenders: force position:fixed!important to override
   any residual body > * position:relative rule.
*/
body.spx-public .spx-ticket-modal-v138h:not([hidden]){
  position:fixed!important;
  inset:0!important;
  z-index:9000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:16px!important;
}
body.spx-public .spx-kb-modal:not([hidden]){
  position:fixed!important;
  inset:0!important;
  z-index:9010!important;
  display:grid!important;
  place-items:center!important;
}

/* ─── Phase 1: Support button hover fix ──────────────────────
   A8.138r used transform:translateY(-1px) causing a jump.
   Replace with calm background/border-only transition.
*/
body.spx-public .spx-nav-v26 .spx-nav-support-link,
.spx-nav-v26 .spx-nav-support-link{
  transition:background .15s,border-color .15s,color .15s!important;
  transform:none!important;
}
body.spx-public .spx-nav-v26 .spx-nav-support-link:hover,
.spx-nav-v26 .spx-nav-support-link:hover{
  background:rgba(103,232,249,.13)!important;
  border-color:rgba(103,232,249,.36)!important;
  color:#cffafe!important;
  transform:none!important;
}
html[data-theme="light"] .spx-nav-v26 .spx-nav-support-link:hover,
html[data-spx-theme="light"] .spx-nav-v26 .spx-nav-support-link:hover{
  background:rgba(6,182,212,.13)!important;
  border-color:rgba(6,182,212,.36)!important;
  color:#0c6075!important;
  transform:none!important;
}

/* ─── Phase 4: Background system — body gradient ─────────────
   Setting gradient directly on body is the most reliable method:
   it is always visible as the page base, regardless of stacking
   contexts or section backgrounds. Also strengthens body::before
   grid layer now that main no longer blocks it.
*/
body.spx-public[data-route="/support"]{
  background-image:
    radial-gradient(ellipse 140% 55% at 50% -8%, rgba(34,197,94,.26) 0%, rgba(16,185,129,.10) 35%, transparent 55%),
    radial-gradient(ellipse 65% 45% at 90% 72%, rgba(16,185,129,.14) 0%, transparent 50%)!important;
  background-color:#050e0a!important;
}
body.spx-public[data-route="/updates"],
body.spx-public[data-route^="/updates/"]{
  background-image:
    radial-gradient(ellipse 140% 55% at 50% -8%, rgba(251,146,60,.26) 0%, rgba(234,88,12,.09) 35%, transparent 55%),
    radial-gradient(ellipse 65% 45% at 87% 70%, rgba(249,115,22,.12) 0%, transparent 50%)!important;
  background-color:#080601!important;
}
body.spx-public[data-route="/roadmap"]{
  background-image:
    radial-gradient(ellipse 140% 55% at 50% -8%, rgba(56,189,248,.24) 0%, rgba(99,102,241,.10) 38%, transparent 57%),
    radial-gradient(ellipse 65% 45% at 85% 72%, rgba(99,102,241,.12) 0%, transparent 50%)!important;
  background-color:#040811!important;
}
body.spx-public[data-route^="/features"]{
  background-image:
    radial-gradient(ellipse 140% 55% at 50% -8%, rgba(129,140,248,.26) 0%, rgba(168,85,247,.10) 38%, transparent 57%),
    radial-gradient(ellipse 65% 45% at 86% 72%, rgba(168,85,247,.12) 0%, transparent 50%)!important;
  background-color:#060410!important;
}
html[data-theme="light"] body.spx-public[data-route="/support"],
html[data-spx-theme="light"] body.spx-public[data-route="/support"]{
  background-image:radial-gradient(ellipse 140% 50% at 50% -5%, rgba(34,197,94,.14) 0%, transparent 55%)!important;
  background-color:#f0fdf4!important;
}
html[data-theme="light"] body.spx-public[data-route="/updates"],
html[data-spx-theme="light"] body.spx-public[data-route="/updates"],
html[data-theme="light"] body.spx-public[data-route^="/updates/"],
html[data-spx-theme="light"] body.spx-public[data-route^="/updates/"]{
  background-image:radial-gradient(ellipse 140% 50% at 50% -5%, rgba(251,146,60,.16) 0%, transparent 55%)!important;
  background-color:#fffbf5!important;
}
html[data-theme="light"] body.spx-public[data-route="/roadmap"],
html[data-spx-theme="light"] body.spx-public[data-route="/roadmap"]{
  background-image:radial-gradient(ellipse 140% 50% at 50% -5%, rgba(56,189,248,.14) 0%, transparent 55%)!important;
  background-color:#f0f9ff!important;
}
html[data-theme="light"] body.spx-public[data-route^="/features"],
html[data-spx-theme="light"] body.spx-public[data-route^="/features"]{
  background-image:radial-gradient(ellipse 140% 50% at 50% -5%, rgba(14,165,233,.10) 0%, transparent 55%)!important;
  background-color:#f4f8ff!important;
  --atm-c1:rgba(14,165,233,.08)!important;
  --atm-c2:rgba(37,99,235,.05)!important;
  --atm-c3:rgba(148,163,184,.04)!important;
  --atm-ring:rgba(15,23,42,.035)!important;
}

/* Strengthen animated grid overlay (now visible with main z-index:auto) */
body.spx-public[data-route="/roadmap"]::before,
body.spx-public[data-route="/support"]::before,
body.spx-public[data-route="/updates"]::before,
body.spx-public[data-route^="/updates/"]::before,
body.spx-public[data-route^="/features"]::before{
  background-image:
    linear-gradient(rgba(103,232,249,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,232,249,.07) 1px,transparent 1px)!important;
  background-size:58px 58px,58px 58px!important;
  opacity:1!important;
}
body.spx-public[data-route="/support"]::before{
  background-image:
    linear-gradient(rgba(52,211,153,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(52,211,153,.08) 1px,transparent 1px)!important;
}
body.spx-public[data-route="/updates"]::before,
body.spx-public[data-route^="/updates/"]::before{
  background-image:
    linear-gradient(rgba(251,146,60,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(251,146,60,.07) 1px,transparent 1px)!important;
}
body.spx-public[data-route^="/features"]::before{
  background-image:
    linear-gradient(rgba(129,140,248,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(129,140,248,.08) 1px,transparent 1px)!important;
}

/* ─── Phase 5: Pricing header left-align ─────────────────────*/
body.spx-public .spx-pricing-v138p-head{
  text-align:left!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  max-width:720px!important;
  margin-left:0!important;
  margin-right:auto!important;
  padding-left:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
}
body.spx-public .spx-pricing-v138p-head .eyebrow{
  align-self:flex-start!important;
  display:inline-flex!important;
}
body.spx-public .spx-pricing-v138p-head h2{
  text-align:left!important;
  margin:0!important;
}
body.spx-public .spx-pricing-v138p-head p{
  text-align:left!important;
  max-width:560px!important;
  margin:0!important;
}

/* ─── Phase 6: Alpha v138r improvements ─────────────────────*/
body.spx-public .spx-alpha-v138r{
  padding:clamp(72px,9vw,100px) clamp(18px,4vw,52px) clamp(80px,10vw,110px)!important;
}
body.spx-public .spx-alr-header{
  margin-bottom:clamp(32px,4vw,52px)!important;
}
body.spx-public .spx-alr-live{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  background:rgba(74,222,128,.07)!important;
  border:1px solid rgba(74,222,128,.18)!important;
  border-radius:20px!important;
  padding:5px 14px 5px 8px!important;
  font-size:12px!important;
  font-weight:800!important;
  color:rgba(134,239,172,.9)!important;
  letter-spacing:.02em!important;
  margin-bottom:14px!important;
}
body.spx-public .spx-alr-header > h2{
  font-size:clamp(30px,4vw,50px)!important;
  font-weight:950!important;
  letter-spacing:-.045em!important;
  margin:0 0 12px!important;
  max-width:640px!important;
}
body.spx-public .spx-alr-header > p{
  font-size:clamp(14px,1.5vw,16.5px)!important;
  color:rgba(200,230,255,.55)!important;
  max-width:540px!important;
  line-height:1.65!important;
  margin:0!important;
}
body.spx-public .spx-alr-signals{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
}
body.spx-public .spx-alr-signal{
  border-radius:14px!important;
  padding:16px 18px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.02))!important;
  border:1px solid rgba(255,255,255,.09)!important;
  transition:border-color .18s,background .18s!important;
  display:flex!important;
  gap:14px!important;
  align-items:flex-start!important;
}
body.spx-public .spx-alr-signal:hover{
  border-color:rgba(103,232,249,.18)!important;
  background:linear-gradient(135deg,rgba(103,232,249,.05),rgba(255,255,255,.02))!important;
}
body.spx-public .spx-alr-signal-icon{
  width:34px!important;
  height:34px!important;
  border-radius:9px!important;
  background:rgba(103,232,249,.09)!important;
  border:1px solid rgba(103,232,249,.14)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-shrink:0!important;
  color:rgba(165,243,252,.8)!important;
}
body.spx-public .spx-alr-signal-icon svg{
  width:15px!important;
  height:15px!important;
}
body.spx-public .spx-alr-signal-copy{
  flex:1!important;
  min-width:0!important;
}
body.spx-public .spx-alr-signal-copy b{
  display:block!important;
  font-size:13.5px!important;
  font-weight:950!important;
  color:#d6f0ff!important;
  letter-spacing:-.02em!important;
  margin-bottom:3px!important;
}
body.spx-public .spx-alr-signal-copy p,
body.spx-public .spx-alr-signal-copy small{
  font-size:12.5px!important;
  color:rgba(180,220,255,.50)!important;
  line-height:1.55!important;
  margin:0!important;
  display:block!important;
}
body.spx-public .spx-alr-focus{
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.02))!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:18px!important;
  padding:clamp(20px,2.5vw,32px)!important;
  display:flex!important;
  flex-direction:column!important;
  gap:18px!important;
}
body.spx-public .spx-alr-focus-head{
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  padding-bottom:14px!important;
}
body.spx-public .spx-alr-focus-kicker{
  font-size:11px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  color:rgba(165,243,252,.5)!important;
  display:block!important;
  margin-bottom:6px!important;
}
body.spx-public .spx-alr-focus-head h3{
  font-size:clamp(15px,1.7vw,19px)!important;
  font-weight:950!important;
  letter-spacing:-.03em!important;
  margin:0!important;
  color:#d6f0ff!important;
}
body.spx-public .spx-alr-topics{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;
  gap:8px!important;
}
body.spx-public .spx-alr-topic{
  padding:8px 12px!important;
  border-radius:9px!important;
  font-size:12.5px!important;
  font-weight:800!important;
  transition:background .15s,border-color .15s,color .15s!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  color:rgba(180,220,255,.60)!important;
  cursor:pointer!important;
  font-family:inherit!important;
  text-align:left!important;
}
body.spx-public .spx-alr-topic.is-active,
body.spx-public .spx-alr-topic:hover{
  background:rgba(103,232,249,.10)!important;
  border-color:rgba(103,232,249,.24)!important;
  color:#a5f3fc!important;
}
body.spx-public .spx-alr-copy-area{
  background:rgba(255,255,255,.03)!important;
  border-radius:10px!important;
  padding:14px 16px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  min-height:68px!important;
  font-size:13.5px!important;
  line-height:1.6!important;
  color:rgba(200,230,255,.65)!important;
}
body.spx-public .spx-alr-actions{
  display:flex!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
  padding-top:16px!important;
  margin-top:2px!important;
}
body.spx-public .spx-alr-action-link{
  font-size:13px!important;
  font-weight:900!important;
  color:rgba(190,225,255,.60)!important;
  text-decoration:none!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  transition:color .15s,gap .15s!important;
  padding:4px 0!important;
}
body.spx-public .spx-alr-action-link:hover{
  color:#a5f3fc!important;
  gap:9px!important;
}

/* ─── Phase 7: Export-first v138r focused improvement ────────*/
body.spx-public .spx-wfr-step{
  padding:20px 22px!important;
  gap:16px!important;
}
body.spx-public .spx-wfr-step-num{
  font-size:10px!important;
  font-weight:950!important;
  min-width:22px!important;
  width:22px!important;
  height:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.07)!important;
  flex-shrink:0!important;
  letter-spacing:0!important;
}
body.spx-public .spx-wfr-step.is-active .spx-wfr-step-num{
  background:rgba(103,232,249,.18)!important;
  color:#a5f3fc!important;
  box-shadow:0 0 12px rgba(103,232,249,.25)!important;
}
body.spx-public .spx-wfr-step-body strong{
  font-size:14px!important;
  font-weight:950!important;
  letter-spacing:-.025em!important;
}
body.spx-public .spx-wfr-step-body span{
  font-size:11.5px!important;
  color:rgba(160,210,255,.45)!important;
  font-weight:700!important;
}
body.spx-public .spx-wfr-step.is-active{
  background:linear-gradient(90deg,rgba(103,232,249,.08),rgba(103,232,249,.03))!important;
}
body.spx-public .spx-wfr-panels{
  padding:clamp(28px,3.5vw,48px)!important;
}
body.spx-public .spx-wfr-panel-copy h3{
  font-size:clamp(22px,2.4vw,30px)!important;
  font-weight:950!important;
  letter-spacing:-.04em!important;
}
body.spx-public .spx-wfr-panel-mock{
  min-height:240px!important;
  border-radius:16px!important;
}
body.spx-public .spx-wfr-stat strong{
  font-size:clamp(20px,2.5vw,30px)!important;
}

/* ─── Phase 8: Command Center v138r focused improvement ──────*/
body.spx-public .spx-ckr-statusbar{
  background:rgba(255,255,255,.03)!important;
  padding:11px 18px!important;
  gap:12px!important;
}
body.spx-public .spx-ckr-status-dot{
  width:8px!important;
  height:8px!important;
}
body.spx-public .spx-ckr-mod{
  border-radius:9px!important;
  padding:9px 11px!important;
  gap:9px!important;
  font-size:12.5px!important;
}
body.spx-public .spx-ckr-mod.is-active{
  background:linear-gradient(90deg,rgba(103,232,249,.14),rgba(103,232,249,.06))!important;
  color:#a5f3fc!important;
  box-shadow:inset 0 0 0 1px rgba(103,232,249,.18)!important;
}
body.spx-public .spx-ckr-mod:not(.is-active):hover{
  background:rgba(255,255,255,.06)!important;
  color:rgba(200,230,255,.85)!important;
}
body.spx-public .spx-ckr-panel-copy h3{
  font-size:clamp(19px,2.1vw,25px)!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
}
body.spx-public .spx-ckr-stat{
  border-radius:11px!important;
  padding:13px 12px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
body.spx-public .spx-ckr-stat b{
  font-size:clamp(15px,1.8vw,20px)!important;
  font-weight:950!important;
  letter-spacing:-.04em!important;
}
body.spx-public .spx-ckr-panel-cta{
  font-size:13px!important;
  font-weight:950!important;
  color:#a5f3fc!important;
  letter-spacing:-.01em!important;
  margin-top:20px!important;
}

/* ─── Phase 9: Updates v138r improvements ─────────────────────*/
body.spx-public .spx-upd-hero-v138r{
  padding:clamp(100px,12vw,150px) clamp(18px,4vw,52px) clamp(48px,6vw,72px)!important;
}
body.spx-public .spx-updr-hero-inner{
  max-width:740px!important;
}
body.spx-public .spx-updr-hero-badge{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  background:rgba(251,146,60,.09)!important;
  border:1px solid rgba(251,146,60,.22)!important;
  border-radius:20px!important;
  padding:5px 14px 5px 8px!important;
  font-size:12px!important;
  font-weight:800!important;
  color:rgba(251,200,130,.85)!important;
  margin-bottom:20px!important;
}
body.spx-public .spx-updr-hero-dot{
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:#fb923c!important;
  box-shadow:0 0 8px rgba(251,146,60,.7)!important;
  animation:spxAlrDot 2s ease-in-out infinite!important;
  flex-shrink:0!important;
}
body.spx-public .spx-updr-hero-inner h1{
  font-size:clamp(40px,6vw,72px)!important;
  font-weight:950!important;
  letter-spacing:-.055em!important;
  line-height:1.02!important;
  color:#e8f4ff!important;
  margin:0 0 16px!important;
}
body.spx-public .spx-updr-hero-inner > p{
  font-size:clamp(15px,1.6vw,18px)!important;
  color:rgba(200,230,255,.55)!important;
  line-height:1.65!important;
  max-width:560px!important;
  margin:0 0 22px!important;
}
body.spx-public .spx-updr-hero-row{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
body.spx-public .spx-updr-hero-count{
  font-size:12.5px!important;
  font-weight:900!important;
  color:rgba(200,230,255,.40)!important;
}
body.spx-public .spx-updr-hero-sep{
  color:rgba(255,255,255,.18)!important;
}
body.spx-public .spx-updr-hero-scroll{
  font-size:12.5px!important;
  font-weight:900!important;
  color:#a5f3fc!important;
  text-decoration:none!important;
  transition:opacity .15s!important;
}
body.spx-public .spx-updr-hero-scroll:hover{opacity:.72!important;}

/* Featured update */
body.spx-public .spx-updr-featured{
  padding:0 clamp(18px,4vw,52px) clamp(40px,5vw,60px)!important;
}
body.spx-public .spx-updr-featured-inner{
  max-width:1160px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  align-items:stretch!important;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:22px!important;
  overflow:hidden!important;
}
body.spx-public .spx-updr-featured-media{
  min-height:280px!important;
  background:linear-gradient(135deg,rgba(251,146,60,.20),rgba(99,102,241,.12))!important;
  position:relative!important;
}
body.spx-public .spx-updr-featured-media-grad{
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(90deg,transparent 55%,rgba(8,6,1,.85))!important;
}
body.spx-public .spx-updr-featured-body{
  padding:clamp(28px,3.5vw,48px) clamp(24px,3vw,40px)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:12px!important;
}
body.spx-public .spx-updr-featured-tags{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
body.spx-public .spx-updr-featured-badge{
  font-size:10px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  padding:3px 8px!important;
  border-radius:6px!important;
  background:rgba(251,146,60,.12)!important;
  border:1px solid rgba(251,146,60,.24)!important;
  color:#fb923c!important;
}
body.spx-public .spx-updr-featured-cat{
  font-size:11px!important;
  font-weight:800!important;
  color:rgba(200,230,255,.42)!important;
}
body.spx-public .spx-updr-featured-date{
  font-size:11px!important;
  color:rgba(200,230,255,.32)!important;
}
body.spx-public .spx-updr-featured-title{
  font-size:clamp(22px,2.8vw,36px)!important;
  font-weight:950!important;
  letter-spacing:-.045em!important;
  line-height:1.07!important;
  color:#e0f0ff!important;
  margin:0!important;
}
body.spx-public .spx-updr-featured-excerpt{
  font-size:14.5px!important;
  color:rgba(200,230,255,.52)!important;
  line-height:1.65!important;
  margin:0!important;
}
body.spx-public .spx-updr-featured-cta{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  font-size:13.5px!important;
  font-weight:900!important;
  color:#a5f3fc!important;
  text-decoration:none!important;
  transition:gap .15s!important;
  margin-top:4px!important;
}
body.spx-public .spx-updr-featured-cta:hover{gap:10px!important;}

/* Grid, filters, cards */
body.spx-public .spx-updr-grid-wrap{
  padding:clamp(24px,3vw,44px) clamp(18px,4vw,52px)!important;
  max-width:1280px!important;
  margin:0 auto!important;
}
body.spx-public .spx-updr-grid-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  flex-wrap:wrap!important;
  margin-bottom:24px!important;
  padding-bottom:20px!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
}
body.spx-public .spx-updr-grid-meta{
  display:flex!important;
  align-items:baseline!important;
  gap:8px!important;
}
body.spx-public .spx-updr-grid-label{
  font-size:13.5px!important;
  font-weight:950!important;
  color:#d0e8ff!important;
  letter-spacing:-.01em!important;
}
body.spx-public .spx-updr-grid-count{
  font-size:12px!important;
  color:rgba(200,230,255,.32)!important;
  font-weight:700!important;
}
body.spx-public .spx-updr-filters{
  display:flex!important;
  gap:6px!important;
  flex-wrap:wrap!important;
}
body.spx-public .spx-updr-filter{
  padding:5px 13px!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  color:rgba(200,230,255,.52)!important;
  font-size:12px!important;
  font-weight:900!important;
  cursor:pointer!important;
  transition:background .15s,border-color .15s,color .15s!important;
  font-family:inherit!important;
}
body.spx-public .spx-updr-filter.is-active{
  background:rgba(103,232,249,.10)!important;
  border-color:rgba(103,232,249,.22)!important;
  color:#a5f3fc!important;
}
body.spx-public .spx-updr-filter:not(.is-active):hover{
  background:rgba(255,255,255,.08)!important;
  color:rgba(220,240,255,.80)!important;
}
body.spx-public .spx-updr-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important;
  gap:clamp(14px,2vw,20px)!important;
}
body.spx-public .spx-updr-card{
  background:linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,.020))!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:16px!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  transition:border-color .18s,transform .18s,box-shadow .18s!important;
}
body.spx-public .spx-updr-card:hover{
  border-color:rgba(103,232,249,.18)!important;
  transform:translateY(-2px)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.2)!important;
}
body.spx-public .spx-updr-card-thumb{
  height:120px!important;
  background-size:cover!important;
  background-position:center!important;
  flex-shrink:0!important;
  background-color:rgba(251,146,60,.12)!important;
}
body.spx-public .spx-updr-card-body{
  padding:16px 18px 20px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  flex:1!important;
}
body.spx-public .spx-updr-card-body--bare{
  padding-top:20px!important;
}
body.spx-public .spx-updr-card-meta{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
body.spx-public .spx-updr-card-cat{
  font-size:10px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.07em!important;
  color:rgba(165,243,252,.70)!important;
  background:rgba(103,232,249,.08)!important;
  padding:2px 7px!important;
  border-radius:5px!important;
}
body.spx-public .spx-updr-card-date{
  font-size:11px!important;
  color:rgba(200,230,255,.32)!important;
  font-weight:700!important;
}
body.spx-public .spx-updr-card-title{
  font-size:clamp(14px,1.5vw,16.5px)!important;
  font-weight:950!important;
  letter-spacing:-.025em!important;
  color:#daeeff!important;
  line-height:1.25!important;
  margin:0!important;
}
body.spx-public .spx-updr-card-excerpt{
  font-size:13px!important;
  color:rgba(190,225,255,.48)!important;
  line-height:1.6!important;
  margin:0!important;
  flex:1!important;
}
body.spx-public .spx-updr-card-link{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  font-size:12.5px!important;
  font-weight:900!important;
  color:#a5f3fc!important;
  text-decoration:none!important;
  margin-top:4px!important;
  transition:gap .15s!important;
}
body.spx-public .spx-updr-card-link:hover{gap:9px!important;}
body.spx-public .spx-updr-empty{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:16px!important;
  padding:clamp(56px,8vw,100px) 24px!important;
  text-align:center!important;
}
body.spx-public .spx-updr-empty-icon{
  width:56px!important;
  height:56px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:rgba(165,243,252,.45)!important;
}
body.spx-public .spx-updr-empty h3{
  font-size:18px!important;
  font-weight:950!important;
  color:#d0e8ff!important;
  margin:0!important;
  letter-spacing:-.025em!important;
}
body.spx-public .spx-updr-empty p{
  font-size:14px!important;
  color:rgba(200,230,255,.42)!important;
  margin:0!important;
  max-width:380px!important;
  line-height:1.6!important;
}

/* ─── Phase 10: Feature pages improvement ────────────────────*/
body.spx-public .spx-feat-hero-v138n{
  padding-top:clamp(100px,12vw,150px)!important;
}
body.spx-public .spx-feat-proof-v138n{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;
  gap:14px!important;
}
body.spx-public .spx-feat-proof-item{
  background:linear-gradient(135deg,rgba(255,255,255,.048),rgba(255,255,255,.018))!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:14px!important;
  padding:20px 18px!important;
  transition:border-color .18s,transform .18s!important;
}
body.spx-public .spx-feat-proof-item:hover{
  border-color:rgba(129,140,248,.26)!important;
  transform:translateY(-2px)!important;
}
body.spx-public .spx-feat-how-steps{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;
  gap:clamp(12px,2vw,20px)!important;
}
body.spx-public .spx-feat-how-step{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:14px!important;
  padding:22px 20px!important;
  transition:border-color .18s!important;
}
body.spx-public .spx-feat-how-step:hover{
  border-color:rgba(129,140,248,.22)!important;
}
body.spx-public .spx-feat-why-inner{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:clamp(20px,3vw,40px)!important;
  align-items:start!important;
}

/* ─── Light mode overrides for A8.138s sections ─────────────*/
html[data-theme="light"] body.spx-public .spx-updr-card,
html[data-spx-theme="light"] body.spx-public .spx-updr-card{
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
  border-color:rgba(15,23,42,.09)!important;
}
html[data-theme="light"] body.spx-public .spx-updr-card:hover,
html[data-spx-theme="light"] body.spx-public .spx-updr-card:hover{
  border-color:rgba(6,182,212,.22)!important;box-shadow:0 8px 30px rgba(6,182,212,.08)!important;
}
html[data-theme="light"] body.spx-public .spx-updr-card-title,
html[data-spx-theme="light"] body.spx-public .spx-updr-card-title{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-updr-card-excerpt,
html[data-spx-theme="light"] body.spx-public .spx-updr-card-excerpt{color:rgba(15,23,42,.55)!important;}
html[data-theme="light"] body.spx-public .spx-updr-card-cat,
html[data-spx-theme="light"] body.spx-public .spx-updr-card-cat{
  color:#0e7490!important;background:rgba(6,182,212,.09)!important;
}
html[data-theme="light"] body.spx-public .spx-updr-filter,
html[data-spx-theme="light"] body.spx-public .spx-updr-filter{
  background:#fff!important;border-color:rgba(15,23,42,.12)!important;color:rgba(15,23,42,.60)!important;
}
html[data-theme="light"] body.spx-public .spx-updr-filter.is-active,
html[data-spx-theme="light"] body.spx-public .spx-updr-filter.is-active{
  background:rgba(6,182,212,.08)!important;border-color:rgba(6,182,212,.22)!important;color:#0e7490!important;
}
html[data-theme="light"] body.spx-public .spx-updr-featured-inner,
html[data-spx-theme="light"] body.spx-public .spx-updr-featured-inner{
  background:#fff!important;border-color:rgba(15,23,42,.09)!important;
}
html[data-theme="light"] body.spx-public .spx-updr-featured-title,
html[data-spx-theme="light"] body.spx-public .spx-updr-featured-title{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-updr-featured-excerpt,
html[data-spx-theme="light"] body.spx-public .spx-updr-featured-excerpt{color:rgba(15,23,42,.55)!important;}
html[data-theme="light"] body.spx-public .spx-updr-hero-inner h1,
html[data-spx-theme="light"] body.spx-public .spx-updr-hero-inner h1{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-updr-hero-inner > p,
html[data-spx-theme="light"] body.spx-public .spx-updr-hero-inner > p{color:rgba(15,23,42,.60)!important;}
html[data-theme="light"] body.spx-public .spx-alr-signal,
html[data-spx-theme="light"] body.spx-public .spx-alr-signal{
  background:#fff!important;border-color:rgba(15,23,42,.09)!important;
}
html[data-theme="light"] body.spx-public .spx-alr-signal:hover,
html[data-spx-theme="light"] body.spx-public .spx-alr-signal:hover{
  border-color:rgba(6,182,212,.22)!important;background:rgba(6,182,212,.04)!important;
}
html[data-theme="light"] body.spx-public .spx-alr-signal-copy b,
html[data-spx-theme="light"] body.spx-public .spx-alr-signal-copy b{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-alr-signal-copy p,
html[data-theme="light"] body.spx-public .spx-alr-signal-copy small,
html[data-spx-theme="light"] body.spx-public .spx-alr-signal-copy p,
html[data-spx-theme="light"] body.spx-public .spx-alr-signal-copy small{color:rgba(15,23,42,.55)!important;}
html[data-theme="light"] body.spx-public .spx-alr-focus,
html[data-spx-theme="light"] body.spx-public .spx-alr-focus{
  background:#fff!important;border-color:rgba(15,23,42,.09)!important;
}
html[data-theme="light"] body.spx-public .spx-alr-topic,
html[data-spx-theme="light"] body.spx-public .spx-alr-topic{
  background:#f8fbff!important;border-color:rgba(15,23,42,.10)!important;color:rgba(15,23,42,.60)!important;
}
html[data-theme="light"] body.spx-public .spx-alr-topic.is-active,
html[data-spx-theme="light"] body.spx-public .spx-alr-topic.is-active{
  background:rgba(6,182,212,.08)!important;border-color:rgba(6,182,212,.22)!important;color:#0e7490!important;
}
html[data-theme="light"] body.spx-public .spx-alr-copy-area,
html[data-spx-theme="light"] body.spx-public .spx-alr-copy-area{
  background:#f5f8ff!important;border-color:rgba(15,23,42,.08)!important;color:rgba(15,23,42,.70)!important;
}
html[data-theme="light"] body.spx-public .spx-feat-proof-item,
html[data-spx-theme="light"] body.spx-public .spx-feat-proof-item{
  background:#fff!important;border-color:rgba(15,23,42,.09)!important;
}
html[data-theme="light"] body.spx-public .spx-feat-how-step,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-step{
  background:#fff!important;border-color:rgba(15,23,42,.09)!important;
}

/* ─── KB suggestions CSS fix ─────────────────────────────────
   Class in PHP is .spx-kbs-cat but A8.138r wrote .spx-kbs-item-cat.
   Both covered here.
*/
body.spx-public .spx-kbs-cat,
body.spx-public .spx-kbs-item-cat{
  font-size:10px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.07em!important;
  color:#67e8f9!important;
  background:rgba(103,232,249,.09)!important;
  padding:2px 7px!important;
  border-radius:5px!important;
  display:inline-block!important;
  margin-bottom:3px!important;
}
body.spx-public .spx-kbs-title{
  display:block!important;
  font-size:13.5px!important;
  font-weight:800!important;
  color:#e0f0ff!important;
  line-height:1.3!important;
}
body.spx-public .spx-kbs-summary{
  display:block!important;
  font-size:12px!important;
  color:rgba(200,230,255,.48)!important;
  line-height:1.45!important;
  margin-top:2px!important;
}

/* ─── A8.138s Responsive ─────────────────────────────────────*/
@media(max-width:900px){
  body.spx-public .spx-updr-featured-inner{grid-template-columns:1fr!important;}
  body.spx-public .spx-updr-featured-body{padding:22px 20px!important;}
  body.spx-public .spx-updr-featured-media-grad{background:linear-gradient(180deg,transparent 55%,rgba(8,6,1,.9))!important;}
  body.spx-public .spx-alr-signal{flex-direction:column!important;gap:10px!important;}
  body.spx-public .spx-feat-why-inner{grid-template-columns:1fr!important;}
}
@media(max-width:600px){
  body.spx-public .spx-updr-grid{grid-template-columns:1fr!important;}
  body.spx-public .spx-feat-how-steps{grid-template-columns:1fr!important;}
  body.spx-public .spx-feat-proof-v138n{grid-template-columns:1fr!important;}
  body.spx-public .spx-alr-topics{grid-template-columns:1fr 1fr!important;}
}

/* ─── Reduced motion ─────────────────────────────────────────*/
@media(prefers-reduced-motion:reduce){
  body.spx-public .spx-updr-card,
  body.spx-public .spx-feat-proof-item,
  body.spx-public .spx-feat-how-step{transition:border-color .15s!important;transform:none!important;}
  body.spx-public .spx-updr-hero-dot{animation:none!important;}
  body.spx-public .spx-alr-signal{transition:border-color .15s!important;}
}

/* ============================================================
   A8.138t — Public Visual Refinement + Feature Detail Rework
   Appended to spixor-public.css
   ============================================================ */

/* ─── Phase 1: Support background — Spixor cyan/indigo space ──
   A8.138s used green (rgba(34,197,94,...)). Replacing with the
   Spixor cyan/indigo/neutral depth direction. Added slow aura
   animation on the gradient and grid drift on body::before.
*/
@keyframes spxSupportAura{
  0%,100%{background-position:50% -10%,88% 68%}
  50%{background-position:52% -7%,84% 74%}
}
@keyframes spxGridDrift{
  0%{background-position:0 0,0 0}
  100%{background-position:58px 58px,58px 58px}
}
body.spx-public[data-route="/support"]{
  background-image:
    radial-gradient(ellipse 160% 65% at 50% -10%, rgba(56,189,248,.24) 0%, rgba(99,102,241,.16) 42%, transparent 64%),
    radial-gradient(ellipse 70% 50% at 88% 68%, rgba(103,232,249,.10) 0%, transparent 52%)!important;
  background-color:#030810!important;
  animation:spxSupportAura 22s ease-in-out infinite!important;
}
body.spx-public[data-route="/support"]::before{
  background-image:
    linear-gradient(rgba(103,232,249,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,232,249,.07) 1px,transparent 1px)!important;
  animation:spxGridDrift 50s linear infinite!important;
}
html[data-theme="light"] body.spx-public[data-route="/support"],
html[data-spx-theme="light"] body.spx-public[data-route="/support"]{
  background-image:radial-gradient(ellipse 140% 50% at 50% -5%, rgba(56,189,248,.14) 0%, transparent 55%)!important;
  background-color:#f0f9ff!important;
  animation:none!important;
}

/* ─── Phase 2: Nav fixed-state hover fix ──────────────────────
   A8.138r nav links have transform:translateY(-1px) on hover.
   When nav is transparent (fixed/default state), this looks wrong
   because there is no dark bg to provide visual context.
   Fix: remove transform only when nav is not scrolled/open.
   The scrolled state (.is-scrolled) retains the transform.
*/
.spx-nav-v26:not(.is-scrolled):not(.is-open) .site-nav>a:hover,
.spx-nav-v26:not(.is-scrolled):not(.is-open) .nav-group:hover>a,
.spx-nav-v26:not(.is-scrolled):not(.is-open) .nav-group>a:focus-visible{
  transform:none!important;
}

/* ─── Phase 4: Export-first header improvements ───────────────
   Stack eyebrow and stats vertically (eyebrow pill on top,
   stat evidence chips below). Make heading and copy stronger.
*/
body.spx-public .spx-wfr-eyebrow-row{
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:18px!important;
}
body.spx-public .spx-wfr-stat-row{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:14px!important;
  padding:10px 20px!important;
  gap:18px!important;
}
body.spx-public .spx-wfr-stat strong{
  font-size:clamp(22px,2.8vw,34px)!important;
  font-weight:950!important;
  letter-spacing:-.05em!important;
  background:linear-gradient(135deg,#e0f4ff,#a5f3fc)!important;
  -webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  background-clip:text!important;
  line-height:1!important;
}
body.spx-public .spx-wfr-stat span{
  font-size:11px!important;
  font-weight:800!important;
  color:rgba(180,220,255,.48)!important;
  letter-spacing:.03em!important;
  text-transform:uppercase!important;
}
body.spx-public .spx-wfr-stat-sep{
  width:1px!important;
  height:32px!important;
  background:rgba(103,232,249,.15)!important;
}
body.spx-public .spx-wfr-header h2{
  font-size:clamp(36px,5.2vw,66px)!important;
  font-weight:950!important;
  letter-spacing:-.055em!important;
  line-height:1.01!important;
  margin:8px 0 0!important;
}
body.spx-public .spx-wfr-header p{
  font-size:clamp(15px,1.6vw,18px)!important;
  color:rgba(200,230,255,.58)!important;
  line-height:1.68!important;
  max-width:660px!important;
}
/* Active step: stronger visual contrast */
body.spx-public .spx-wfr-step.is-active{
  background:linear-gradient(90deg,rgba(103,232,249,.10),rgba(103,232,249,.03))!important;
  border-right-color:rgba(103,232,249,.18)!important;
}
body.spx-public .spx-wfr-step.is-active .spx-wfr-step-num{
  background:rgba(103,232,249,.15)!important;
  border-color:rgba(103,232,249,.40)!important;
  color:#a5f3fc!important;
  box-shadow:0 0 16px rgba(103,232,249,.18)!important;
}
body.spx-public .spx-wfr-step.is-active strong{
  color:#d6f0ff!important;
}
body.spx-public .spx-wfr-step.is-active .spx-wfr-step-body span{
  color:rgba(180,220,255,.70)!important;
}
/* Panel copy */
body.spx-public .spx-wfr-panel-copy h3{
  font-size:clamp(22px,2.6vw,32px)!important;
  font-weight:950!important;
  letter-spacing:-.04em!important;
  color:#e8f4ff!important;
  margin:0 0 14px!important;
  line-height:1.06!important;
}
body.spx-public .spx-wfr-panel-copy p{
  font-size:clamp(14px,1.5vw,16.5px)!important;
  color:rgba(190,225,255,.60)!important;
  line-height:1.70!important;
  margin:0!important;
}
body.spx-public .spx-wfr-points{
  margin:16px 0 0!important;
  padding-left:0!important;
  list-style:none!important;
  display:grid!important;
  gap:8px!important;
}
body.spx-public .spx-wfr-points li{
  font-size:13.5px!important;
  font-weight:800!important;
  color:rgba(200,230,255,.72)!important;
  padding-left:18px!important;
  position:relative!important;
}
body.spx-public .spx-wfr-points li::before{
  content:"—"!important;
  position:absolute!important;
  left:0!important;
  color:rgba(103,232,249,.55)!important;
  font-weight:900!important;
}
body.spx-public .spx-wfr-link{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-top:20px!important;
  font-size:13.5px!important;
  font-weight:900!important;
  color:#a5f3fc!important;
  text-decoration:none!important;
  transition:gap .15s,opacity .15s!important;
}
body.spx-public .spx-wfr-link:hover{gap:10px!important;opacity:.82!important;}

/* ─── Phase 5: Command Center header improvements ─────────────
   Make header hierarchy stronger: bigger heading, more distinct
   eyebrow pill, clearer copy contrast.
*/
body.spx-public .spx-ckr-header{
  max-width:760px!important;
  padding-bottom:8px!important;
}
body.spx-public .spx-ckr-header .eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  margin-bottom:14px!important;
}
body.spx-public .spx-ckr-header h2{
  font-size:clamp(34px,4.8vw,62px)!important;
  font-weight:950!important;
  letter-spacing:-.055em!important;
  line-height:1.02!important;
  margin:0 0 16px!important;
  color:#e8f4ff!important;
}
body.spx-public .spx-ckr-header p{
  font-size:clamp(15px,1.6vw,18px)!important;
  color:rgba(200,230,255,.58)!important;
  line-height:1.68!important;
  max-width:640px!important;
  margin:0!important;
}
/* Stronger panel content hierarchy */
body.spx-public .spx-ckr-panel-copy h3{
  font-size:clamp(18px,2vw,24px)!important;
  font-weight:950!important;
  letter-spacing:-.04em!important;
  color:#d8eeff!important;
  margin:0 0 10px!important;
  line-height:1.08!important;
}
body.spx-public .spx-ckr-panel-copy p{
  font-size:13.5px!important;
  color:rgba(190,225,255,.60)!important;
  line-height:1.68!important;
  margin:0!important;
}
/* Screen title bar in visual */
body.spx-public .spx-ckr-screen-title{
  font-size:12px!important;
  font-weight:900!important;
  color:rgba(180,220,255,.55)!important;
  letter-spacing:.03em!important;
}
/* Status bar readability */
body.spx-public .spx-ckr-status-label{
  font-size:13px!important;
  font-weight:900!important;
  color:rgba(200,230,255,.72)!important;
}
body.spx-public .spx-ckr-status-meta{
  font-size:12px!important;
  font-weight:800!important;
  color:rgba(180,220,255,.42)!important;
}

/* ─── Phase 6: Updates palette — replace amber with cyan/blue ──
   A8.138s used orange/amber (rgba(251,146,60,...)) for updates.
   Replacing with Spixor cyan/blue/indigo direction.
*/
/* Body background override */
body.spx-public[data-route="/updates"],
body.spx-public[data-route^="/updates/"]{
  background-image:
    radial-gradient(ellipse 140% 55% at 50% -8%, rgba(56,189,248,.22) 0%, rgba(99,102,241,.12) 40%, transparent 60%),
    radial-gradient(ellipse 65% 45% at 87% 70%, rgba(103,232,249,.10) 0%, transparent 50%)!important;
  background-color:#030810!important;
}
/* Grid overlay: replace amber lines with cyan */
body.spx-public[data-route="/updates"]::before,
body.spx-public[data-route^="/updates/"]::before{
  background-image:
    linear-gradient(rgba(103,232,249,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,232,249,.07) 1px,transparent 1px)!important;
}
/* Light mode */
html[data-theme="light"] body.spx-public[data-route="/updates"],
html[data-spx-theme="light"] body.spx-public[data-route="/updates"],
html[data-theme="light"] body.spx-public[data-route^="/updates/"],
html[data-spx-theme="light"] body.spx-public[data-route^="/updates/"]{
  background-image:radial-gradient(ellipse 140% 50% at 50% -5%, rgba(56,189,248,.13) 0%, transparent 55%)!important;
  background-color:#f0f9ff!important;
}
/* Hero badge: amber → cyan */
body.spx-public .spx-updr-hero-badge{
  background:rgba(56,189,248,.09)!important;
  border:1px solid rgba(56,189,248,.22)!important;
  color:rgba(147,219,255,.88)!important;
}
/* Hero dot: amber → cyan */
body.spx-public .spx-updr-hero-dot{
  background:#38bdf8!important;
  box-shadow:0 0 10px rgba(56,189,248,.65)!important;
}
/* Featured media background: amber gradient → cyan/indigo */
body.spx-public .spx-updr-featured-media{
  background:linear-gradient(135deg,rgba(56,189,248,.20),rgba(99,102,241,.14))!important;
}
/* Featured media overlay: adjust dark bg to match new palette */
body.spx-public .spx-updr-featured-media-grad{
  background:linear-gradient(90deg,transparent 55%,rgba(3,8,16,.85))!important;
}
/* Featured badge chip: amber → cyan */
body.spx-public .spx-updr-featured-badge{
  background:rgba(56,189,248,.11)!important;
  border:1px solid rgba(56,189,248,.24)!important;
  color:#38bdf8!important;
}
/* Filter active: stays cyan (already correct), just reinforce */
body.spx-public .spx-updr-filter.is-active{
  background:rgba(56,189,248,.12)!important;
  border-color:rgba(56,189,248,.26)!important;
  color:#a5f3fc!important;
}
/* Category chips on cards: any amber accent → neutral/cyan */
body.spx-public .spx-updr-cat-chip{
  background:rgba(56,189,248,.08)!important;
  border:1px solid rgba(56,189,248,.18)!important;
  color:rgba(147,219,255,.80)!important;
}

/* ─── Phase 7: Feature detail pages — stronger product-page feel ──
   The feature pages already have decent structural CSS from
   A8.138n, A8.138p, and A8.138s. These overrides add stronger
   visual hierarchy: bigger hero heading, richer screen visual,
   better step cards, more impactful CTA, refined FAQ.
*/

/* Hero: stronger heading and visual */
body.spx-public .spx-feat-hero-v138n h1{
  font-size:clamp(40px,6.5vw,80px)!important;
  font-weight:950!important;
  letter-spacing:-.055em!important;
  line-height:.97!important;
  margin:0 0 20px!important;
}
body.spx-public .spx-feat-hero-lead{
  font-size:clamp(16px,1.7vw,20px)!important;
  line-height:1.62!important;
  color:rgba(210,238,255,.70)!important;
  margin:0!important;
  max-width:560px!important;
}
/* Proof items: cleaner glass pill */
body.spx-public .spx-feat-hero-proof-item{
  padding:12px 18px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  transition:border-color .2s,transform .2s!important;
}
body.spx-public .spx-feat-hero-proof-item:hover{
  border-color:rgba(var(--feat-c1),.32)!important;
  transform:translateY(-2px)!important;
}
body.spx-public .spx-feat-hero-proof-item b{
  font-size:clamp(20px,2.4vw,28px)!important;
  font-weight:950!important;
  letter-spacing:-.05em!important;
  background:linear-gradient(135deg,#a5f3fc,#38bdf8)!important;
  -webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  background-clip:text!important;
  line-height:1!important;
}
body.spx-public .spx-feat-hero-proof-item small{
  font-size:11px!important;
  font-weight:800!important;
  color:rgba(180,220,255,.52)!important;
  letter-spacing:.02em!important;
}
/* CTA actions gap */
body.spx-public .spx-feat-hero-actions{
  margin-top:24px!important;
  display:flex!important;
  gap:12px!important;
  flex-wrap:wrap!important;
}
/* Screen visual: stronger shadow + glow ring */
body.spx-public .spx-feat-hero-screen-frame{
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:
    0 40px 120px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.spx-public .spx-feat-hero-screen-wrap:hover .spx-feat-hero-screen-frame{
  border-color:rgba(var(--feat-c1),.36)!important;
  box-shadow:
    0 44px 130px rgba(0,0,0,.46),
    0 0 0 1px rgba(var(--feat-c1),.10),
    0 0 40px rgba(var(--feat-c1),.08)!important;
}

/* Why section: richer inner panel */
body.spx-public .spx-feat-why-inner{
  padding:clamp(24px,3vw,40px)!important;
  border-radius:22px!important;
  border:1px solid rgba(var(--feat-c1),.18)!important;
  background:linear-gradient(135deg,rgba(var(--feat-c1),.07),rgba(255,255,255,.02))!important;
  gap:clamp(28px,4vw,52px)!important;
}
body.spx-public .spx-feat-why-copy p{
  font-size:clamp(15px,1.6vw,18px)!important;
  line-height:1.72!important;
  color:rgba(225,242,255,.72)!important;
  margin:10px 0 0!important;
}
body.spx-public .spx-feat-why-item{
  padding:14px 16px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  gap:12px!important;
  align-items:flex-start!important;
  transition:border-color .18s!important;
}
body.spx-public .spx-feat-why-item:hover{
  border-color:rgba(var(--feat-c1),.28)!important;
}
body.spx-public .spx-feat-why-item strong{
  font-size:13.5px!important;
  font-weight:950!important;
  color:#d8eeff!important;
  display:block!important;
  margin-bottom:3px!important;
}
body.spx-public .spx-feat-why-item span{
  font-size:12.5px!important;
  color:rgba(190,225,255,.60)!important;
  line-height:1.58!important;
}

/* How steps: stronger cards */
body.spx-public .spx-feat-how-steps{
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important;
  gap:16px!important;
}
body.spx-public .spx-feat-how-step{
  padding:22px 20px!important;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  background:rgba(255,255,255,.04)!important;
  display:grid!important;
  gap:12px!important;
  align-content:start!important;
  transition:border-color .2s,transform .2s!important;
}
body.spx-public .spx-feat-how-step:hover{
  border-color:rgba(var(--feat-c1),.28)!important;
  transform:translateY(-3px)!important;
}
body.spx-public .spx-feat-how-num{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:32px!important;
  height:32px!important;
  border-radius:50%!important;
  background:rgba(var(--feat-c1),.10)!important;
  border:1px solid rgba(var(--feat-c1),.22)!important;
  font-size:12px!important;
  font-weight:950!important;
  color:rgb(var(--feat-c1))!important;
  font-family:monospace!important;
  letter-spacing:.02em!important;
}
body.spx-public .spx-feat-how-step-body h3{
  font-size:15.5px!important;
  font-weight:950!important;
  letter-spacing:-.025em!important;
  color:#d0ecff!important;
  margin:0 0 6px!important;
  line-height:1.18!important;
}
body.spx-public .spx-feat-how-step-body p{
  font-size:13.5px!important;
  color:rgba(190,225,255,.60)!important;
  line-height:1.62!important;
  margin:0!important;
}

/* CTA section: more impactful gradient container */
body.spx-public .spx-feat-cta-v138n{
  padding:clamp(32px,5vw,56px) clamp(20px,5vw,60px)!important;
}
body.spx-public .spx-feat-cta-inner{
  padding:clamp(32px,4vw,52px)!important;
  border-radius:22px!important;
  border:1px solid rgba(var(--feat-c1),.20)!important;
  background:linear-gradient(135deg,rgba(var(--feat-c1),.12),rgba(99,102,241,.06))!important;
  box-shadow:0 0 80px rgba(var(--feat-c1),.06)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:32px!important;
  flex-wrap:wrap!important;
}
body.spx-public .spx-feat-cta-copy h2{
  font-size:clamp(24px,3.2vw,40px)!important;
  font-weight:950!important;
  letter-spacing:-.04em!important;
  line-height:1.06!important;
  margin:0 0 12px!important;
  color:#e8f4ff!important;
}
body.spx-public .spx-feat-cta-copy p{
  font-size:clamp(14px,1.4vw,16px)!important;
  color:rgba(200,230,255,.65)!important;
  line-height:1.65!important;
  margin:0!important;
  max-width:560px!important;
}
body.spx-public .spx-feat-cta-actions{
  display:flex!important;
  gap:12px!important;
  flex-shrink:0!important;
  flex-wrap:wrap!important;
}

/* Related section: cleaner pills */
body.spx-public .spx-feat-related-v138n{
  padding-top:clamp(24px,3vw,40px)!important;
  padding-bottom:clamp(24px,3vw,40px)!important;
}
body.spx-public .spx-feat-related-head{
  margin-bottom:16px!important;
}
body.spx-public .spx-feat-related-item{
  padding:10px 16px!important;
  border-radius:10px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.04)!important;
  font-size:13px!important;
  font-weight:850!important;
  color:rgba(220,240,255,.72)!important;
  transition:border-color .18s,background .18s,color .18s!important;
}
body.spx-public .spx-feat-related-item:hover{
  border-color:rgba(var(--feat-c1),.30)!important;
  background:rgba(var(--feat-c1),.07)!important;
  color:#d8eeff!important;
}

/* FAQ section within feature detail */
body.spx-public .spx-feat-faq-v138n{
  padding:clamp(32px,5vw,56px) clamp(20px,5vw,60px) clamp(56px,8vw,96px)!important;
}
body.spx-public .spx-feat-faq-head{
  margin-bottom:clamp(20px,3vw,32px)!important;
}
body.spx-public .spx-feat-faq-head h2{
  font-size:clamp(24px,3.2vw,38px)!important;
  font-weight:950!important;
  letter-spacing:-.04em!important;
  margin:8px 0 0!important;
  color:#d8eeff!important;
}

/* ─── A8.138t Light mode additions ───────────────────────────*/
html[data-theme="light"] body.spx-public .spx-feat-why-inner,
html[data-spx-theme="light"] body.spx-public .spx-feat-why-inner{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(var(--feat-c1),.18)!important;
}
html[data-theme="light"] body.spx-public .spx-feat-cta-inner,
html[data-spx-theme="light"] body.spx-public .spx-feat-cta-inner{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(var(--feat-c1),.20)!important;
}
html[data-theme="light"] body.spx-public .spx-feat-how-step,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-step{
  background:#fff!important;
  border-color:rgba(15,23,42,.09)!important;
}
html[data-theme="light"] body.spx-public .spx-feat-hero-proof-item,
html[data-spx-theme="light"] body.spx-public .spx-feat-hero-proof-item{
  background:rgba(15,23,42,.03)!important;
  border-color:rgba(15,23,42,.09)!important;
}
html[data-theme="light"] body.spx-public .spx-feat-why-item,
html[data-spx-theme="light"] body.spx-public .spx-feat-why-item{
  background:rgba(15,23,42,.04)!important;
  border-color:rgba(15,23,42,.09)!important;
}
html[data-theme="light"] body.spx-public .spx-feat-hero-v138n h1,
html[data-spx-theme="light"] body.spx-public .spx-feat-hero-v138n h1{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-feat-cta-copy h2,
html[data-spx-theme="light"] body.spx-public .spx-feat-cta-copy h2{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-feat-how-step-body h3,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-step-body h3{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-ckr-header h2,
html[data-spx-theme="light"] body.spx-public .spx-ckr-header h2{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-wfr-header h2,
html[data-spx-theme="light"] body.spx-public .spx-wfr-header h2{color:#0f172a!important;}

/* ─── A8.138t Responsive ─────────────────────────────────────*/
@media(max-width:900px){
  body.spx-public .spx-wfr-header h2{font-size:clamp(30px,5.5vw,52px)!important;}
  body.spx-public .spx-ckr-header h2{font-size:clamp(28px,5vw,48px)!important;}
  body.spx-public .spx-feat-cta-inner{flex-direction:column!important;align-items:flex-start!important;}
}
@media(max-width:600px){
  body.spx-public .spx-feat-how-steps{grid-template-columns:1fr!important;}
  body.spx-public .spx-feat-hero-proof{flex-direction:column!important;}
  body.spx-public .spx-wfr-stat-row{padding:8px 14px!important;}
}

/* ─── A8.138t Reduced motion ─────────────────────────────────*/
@media(prefers-reduced-motion:reduce){
  body.spx-public[data-route="/support"]{animation:none!important;}
  body.spx-public[data-route="/support"]::before{animation:none!important;}
  body.spx-public .spx-feat-how-step,
  body.spx-public .spx-feat-why-item,
  body.spx-public .spx-feat-hero-proof-item{transition:border-color .15s!important;transform:none!important;}
}

/* ============================================================
   A8.138u — Atmosphere + Nav State Pass
   Appended to spixor-public.css

   Root cause (weak/lifeless background):
     Inner route body::before used repeating 58-60px square grids
     (two crossing linear-gradients). This was the dominant visual
     — the classic "AI generated dashboard grid" look. No depth
     layers beyond one static radial gradient, no stars, no orbital
     accents, no intentional animation beyond grid slide.

   Root cause (nav top-state support button mismatch):
     Default/transparent nav state has background:transparent. The
     support button's faint glass (bg:rgba(103,232,249,.07)) was
     designed against the dark scrolled-state nav surface. Without
     that backdrop it lacks visual anchor and looks washed out.
     Fix: give the button its own dark glass surface in the default
     state that reads clearly without relying on the nav backdrop.

   Grid rules removed/zeroed (all routes):
     A8.138q: 60px repeating grid on body::before for all inner routes
     A8.138s: 58px colored grids per route (green/orange/indigo)
     A8.138t: spxGridDrift animation on /support, cyan grid on /updates
     All zeroed via background-image:none!important below.

   New atmosphere system:
     .spx-page-atm — a direct body child inserted by PHP for inner
     routes. position:fixed; z-index:0 puts it behind z-index:1 body
     children (main, header at 150) while covering the full viewport.
     - base element: layered nebula gradient field, pointer-reactive
       via CSS vars --spx-mx/--spx-my set by JS initAtmPointerA138u
     - ::before: slow rotating orbital ellipse ring (90s/revolution)
     - ::after: subtle repeating star-dot field, very slow drift
     Route palette CSS vars set on body[data-route] cascade down to
     .spx-page-atm via CSS custom property inheritance.
   ============================================================ */

/* ─── PHASE 0: Zero all previous grid/mesh overlays ──────────
   These are the source of the "vibe-coded" look. Every rule that
   painted a repeating grid on body::before for inner routes is
   neutralised here. body::before remains in DOM but invisible.
*/
body.spx-public[data-route="/roadmap"]::before,
body.spx-public[data-route="/support"]::before,
body.spx-public[data-route="/updates"]::before,
body.spx-public[data-route^="/updates/"]::before,
body.spx-public[data-route^="/features"]::before,
body.spx-public[data-route^="/features/"]::before{
  background-image:none!important;
  background-size:auto!important;
  animation:none!important;
  opacity:0!important;
  z-index:-2!important;
}

/* ─── Atmosphere keyframes ───────────────────────────────────*/

/* Slow gradient-field drift — imperceptible speed, premium feel */
@keyframes spxAtmNebulaShift{
  0%   {background-position:50% -8%,87% 65%,15% 78%}
  33%  {background-position:52% -5%,90% 62%,17% 82%}
  66%  {background-position:48% -11%,84% 68%,13% 76%}
  100% {background-position:50% -8%,87% 65%,15% 78%}
}

/* Orbital ring: one full clockwise revolution */
@keyframes spxAtmOrbit1{
  from{transform:translate(-50%,-50%) rotate(-20deg) scaleX(2.4) scaleY(.42);}
  to  {transform:translate(-50%,-50%) rotate(340deg) scaleX(2.4) scaleY(.42);}
}

/* Star field: very slow linear position drift */
@keyframes spxAtmStarFloat{
  0%  {background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
  100%{background-position:38px 52px,-54px 32px,64px -42px,-30px -58px,45px 28px,-68px 44px,52px -36px,-40px 60px}
}

/* ─── Page atmosphere element ────────────────────────────────
   Inserted by PHP as a direct body child for inner routes.
   position:fixed at z-index:0 sits behind all z-index:1 body
   children (the A8.138q rule sets body > * to z-index:1, so we
   override with !important to keep the atm layer behind content).
   pointer-events:none ensures no click interception.
*/
body.spx-public > .spx-page-atm{
  position:fixed!important;
  inset:0;
  z-index:0!important;
  pointer-events:none!important;
  overflow:hidden;
  /* Fallback palette — support tone (overridden per-route below) */
  --atm-c1:rgba(56,189,248,.19);
  --atm-c2:rgba(99,102,241,.12);
  --atm-c3:rgba(103,232,249,.07);
  --atm-ring:rgba(103,232,249,.048);
  /* Layered nebula — gradient centers shift with mouse via JS */
  background:
    radial-gradient(ellipse 120% 65% at calc(50% + var(--spx-mx,0%)) calc(-8% + var(--spx-my,0%)),var(--atm-c1) 0%,var(--atm-c2) 40%,transparent 62%),
    radial-gradient(ellipse 55% 42% at calc(88% + var(--spx-mx,0%) * .35) calc(68% + var(--spx-my,0%) * .22),var(--atm-c3) 0%,transparent 55%),
    radial-gradient(ellipse 42% 36% at calc(11% + var(--spx-mx,0%) * .2) calc(52% + var(--spx-my,0%) * .15),var(--atm-c2) 0%,transparent 52%);
  animation:spxAtmNebulaShift 34s ease-in-out infinite;
}

/* Orbital ring — wide flat ellipse, 90s per full revolution */
body.spx-public > .spx-page-atm::before{
  content:'';
  position:absolute;
  left:50%;top:50%;
  width:180vmax;height:180vmax;
  border-radius:50%;
  border:1px solid var(--atm-ring);
  transform:translate(-50%,-50%) rotate(-20deg) scaleX(2.4) scaleY(.42);
  animation:spxAtmOrbit1 90s linear infinite;
  will-change:transform;
}

/* Star field — subtle tiling dots, very slow drift */
body.spx-public > .spx-page-atm::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.28) 0 1px,transparent 1.5px),
    radial-gradient(circle at 67% 11%,rgba(107,232,255,.22) 0 1px,transparent 1.6px),
    radial-gradient(circle at 85% 73%,rgba(255,255,255,.18) 0 1px,transparent 1.4px),
    radial-gradient(circle at 38% 55%,rgba(255,255,255,.14) 0 1px,transparent 1.5px),
    radial-gradient(circle at 21% 83%,rgba(107,232,255,.13) 0 1px,transparent 1.5px),
    radial-gradient(circle at 57% 34%,rgba(255,255,255,.10) 0 1px,transparent 1.4px),
    radial-gradient(circle at 73% 47%,rgba(185,215,255,.12) 0 1px,transparent 1.5px),
    radial-gradient(circle at 93% 26%,rgba(255,255,255,.13) 0 1px,transparent 1.4px);
  background-size:148px 148px,228px 214px,196px 196px,172px 268px,212px 172px,258px 188px,182px 232px,242px 162px;
  opacity:.65;
  animation:spxAtmStarFloat 62s linear infinite;
}

/* ─── Route-specific palette variables ───────────────────────
   Set on body[data-route] — cascade to .spx-page-atm via CSS
   custom property inheritance (works through fixed positioning).
*/

/* /support — calm, helpful: primary cyan, indigo depth */
body.spx-public[data-route="/support"]{
  --atm-c1:rgba(56,189,248,.22);
  --atm-c2:rgba(99,102,241,.14);
  --atm-c3:rgba(103,232,249,.09);
  --atm-ring:rgba(103,232,249,.055);
}

/* /updates — active, shipping: bright cyan/blue */
body.spx-public[data-route="/updates"],
body.spx-public[data-route^="/updates/"]{
  --atm-c1:rgba(34,211,238,.22);
  --atm-c2:rgba(37,99,235,.15);
  --atm-c3:rgba(103,232,249,.09);
  --atm-ring:rgba(34,211,238,.055);
}

/* /roadmap — orbital, trajectory: indigo dominant, cyan accent */
body.spx-public[data-route="/roadmap"]{
  --atm-c1:rgba(99,102,241,.25);
  --atm-c2:rgba(56,189,248,.16);
  --atm-c3:rgba(167,139,250,.10);
  --atm-ring:rgba(99,102,241,.060);
}

/* /features/* — product showcase: indigo/cyan product tone */
body.spx-public[data-route^="/features"]{
  --atm-c1:rgba(129,140,248,.24);
  --atm-c2:rgba(99,102,241,.15);
  --atm-c3:rgba(56,189,248,.09);
  --atm-ring:rgba(129,140,248,.058);
}

/* ─── Roadmap body background ────────────────────────────────
   Strengthen A8.138q's single-gradient roadmap background with
   a three-layer indigo/cyan field that matches the new palette.
*/
body.spx-public[data-route="/roadmap"]{
  background-image:
    radial-gradient(ellipse 150% 65% at 50% -10%,rgba(99,102,241,.28) 0%,rgba(56,189,248,.16) 38%,transparent 63%),
    radial-gradient(ellipse 70% 48% at 14% 76%,rgba(167,139,250,.12) 0%,transparent 52%),
    radial-gradient(ellipse 60% 44% at 86% 70%,rgba(56,189,248,.10) 0%,transparent 50%)!important;
  background-color:#040811!important;
}
html[data-theme="light"] body.spx-public[data-route="/roadmap"],
html[data-spx-theme="light"] body.spx-public[data-route="/roadmap"]{
  background-image:radial-gradient(ellipse 140% 50% at 50% -5%,rgba(99,102,241,.14) 0%,transparent 55%)!important;
  background-color:#f5f3ff!important;
}

/* ─── PHASE 4: Navigator support button — top-state fix ───────
   In the default transparent nav (not .is-scrolled), the support
   button must be self-contained: its own dark glass surface gives
   it visual anchor without relying on the nav backdrop.
   In .is-scrolled/.is-open the nav provides the dark backdrop so
   a lighter cyan tint reads naturally.
*/

/* Default/top state: dark glass pill, readable without nav bg */
body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link{
  background:rgba(7,18,40,.52)!important;
  border-color:rgba(103,232,249,.30)!important;
  color:rgba(195,232,255,.90)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  box-shadow:0 1px 10px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.06)!important;
  transform:none!important;
}
body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link:hover{
  background:rgba(9,28,60,.62)!important;
  border-color:rgba(103,232,249,.46)!important;
  color:#a5f3fc!important;
  box-shadow:0 2px 14px rgba(56,189,248,.14),inset 0 1px 0 rgba(255,255,255,.08)!important;
  transform:none!important;
}

/* Scrolled/open state: lighter cyan glass (nav provides the dark bg) */
body.spx-public .spx-nav-v26.is-scrolled .spx-nav-support-link,
body.spx-public .spx-nav-v26.is-open .spx-nav-support-link{
  background:rgba(103,232,249,.10)!important;
  border-color:rgba(103,232,249,.28)!important;
  color:rgba(200,230,255,.90)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  transform:none!important;
}
body.spx-public .spx-nav-v26.is-scrolled .spx-nav-support-link:hover,
body.spx-public .spx-nav-v26.is-open .spx-nav-support-link:hover{
  background:rgba(103,232,249,.16)!important;
  border-color:rgba(103,232,249,.44)!important;
  color:#a5f3fc!important;
  transform:none!important;
}

/* Accessibility: focus-visible ring */
body.spx-public .spx-nav-v26 .spx-nav-support-link:focus-visible{
  outline:2px solid rgba(103,232,249,.58)!important;
  outline-offset:2px!important;
}

/* ─── A8.138u Light mode ─────────────────────────────────────*/
html[data-theme="light"] body.spx-public > .spx-page-atm,
html[data-spx-theme="light"] body.spx-public > .spx-page-atm{
  --atm-c1:rgba(14,165,233,.12);
  --atm-c2:rgba(37,99,235,.07);
  --atm-c3:rgba(6,182,212,.05);
  --atm-ring:rgba(14,165,233,.06);
  opacity:.52;
}
html[data-theme="light"] body.spx-public > .spx-page-atm::after,
html[data-spx-theme="light"] body.spx-public > .spx-page-atm::after{
  opacity:.22;
}
html[data-theme="light"] body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link,
html[data-spx-theme="light"] body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(15,23,42,.16)!important;
  color:#0f172a!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  box-shadow:0 1px 6px rgba(15,23,42,.08)!important;
}
html[data-theme="light"] body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link:hover,
html[data-spx-theme="light"] body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link:hover{
  background:rgba(255,255,255,.96)!important;
  border-color:rgba(14,165,233,.28)!important;
  color:#0369a1!important;
}
html[data-theme="light"] body.spx-public .spx-nav-v26.is-scrolled .spx-nav-support-link,
html[data-spx-theme="light"] body.spx-public .spx-nav-v26.is-scrolled .spx-nav-support-link{
  background:rgba(255,255,255,.90)!important;
  border-color:rgba(15,23,42,.14)!important;
  color:#0f172a!important;
}
html[data-theme="light"] body.spx-public .spx-nav-v26.is-scrolled .spx-nav-support-link:hover,
html[data-spx-theme="light"] body.spx-public .spx-nav-v26.is-scrolled .spx-nav-support-link:hover{
  background:rgba(255,255,255,.96)!important;
  border-color:rgba(14,165,233,.28)!important;
  color:#0369a1!important;
}

/* ─── A8.138u Reduced motion ─────────────────────────────────*/
@media(prefers-reduced-motion:reduce){
  body.spx-public > .spx-page-atm{animation:none!important;}
  body.spx-public > .spx-page-atm::before{
    animation:none!important;
    transform:translate(-50%,-50%) rotate(-20deg) scaleX(2.4) scaleY(.42)!important;
  }
  body.spx-public > .spx-page-atm::after{animation:none!important;}
}

/* ============================================================
   A8.138v — Public Route Fixes + Motion Polish
   Appended to spixor-public.css

   Fixes from A8.138u browser testing:
     1. Support nav button default state — dark glass pill not
        integrated with transparent nav.
     2. Support page top stripe/seam — A8.138t body gradient
        animation (spxSupportAura) still active, conflicts with
        new atmosphere layer; hero top padding too large at
        desktop (up to 120px, 54px gap below ~66px nav).
     3. KB modal z-index — A8.138s set 9010, nav is at 10000;
        nav appeared above the modal backdrop.
     4. Updates — no pagination.
     5. Atmosphere motion not visible enough — pointer multipliers
        too small (fixed in JS: 7%→14%, 4%→9%).
   ============================================================ */

/* ─── PHASE 1: Support nav button — integrated outline pill ───
   Problem: rgba(7,18,40,.52) dark glass at default/transparent
   nav state looked like a heavy element bolted onto the nav.
   Fix: near-transparent tint + cyan border + shared nav blur.
   This integrates naturally with the transparent nav aesthetic.
*/
body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link{
  background:rgba(103,232,249,.06)!important;
  border-color:rgba(103,232,249,.38)!important;
  color:rgba(200,232,255,.88)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  box-shadow:none!important;
  transform:none!important;
}
body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link:hover{
  background:rgba(103,232,249,.14)!important;
  border-color:rgba(103,232,249,.58)!important;
  color:#a5f3fc!important;
  box-shadow:none!important;
  transform:none!important;
}
html[data-theme="light"] body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link,
html[data-spx-theme="light"] body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link{
  background:rgba(6,182,212,.05)!important;
  border-color:rgba(6,182,212,.38)!important;
  color:#0e7490!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  box-shadow:none!important;
}
html[data-theme="light"] body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link:hover,
html[data-spx-theme="light"] body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link:hover{
  background:rgba(6,182,212,.12)!important;
  border-color:rgba(6,182,212,.56)!important;
  color:#0c6075!important;
}

/* ─── PHASE 2: Support page top stripe/seam fix ──────────────
   Clear A8.138t body background animation for /support.
   Let .spx-page-atm handle all atmospheric effects.
   Tighten hero top padding — was up to 120px at desktop,
   creating a 54px visible gap below the fixed nav (~66px).
   Remove hero's own radial-gradient that conflicts with atm.
*/
body.spx-public[data-route="/support"]{
  background-image:none!important;
  background-color:#030810!important;
  animation:none!important;
}
body.spx-public .spx-support-v139-hero{
  padding-top:clamp(84px,9vw,106px)!important;
  background:transparent!important;
  border-bottom:1px solid rgba(103,232,249,.05)!important;
}
html[data-theme="light"] body.spx-public .spx-support-v139-hero,
html[data-spx-theme="light"] body.spx-public .spx-support-v139-hero{
  background:transparent!important;
  border-bottom:1px solid rgba(6,182,212,.07)!important;
}

/* ─── PHASE 3: KB modal z-index — above nav (10000) ─────────
   A8.138s set z-index:9010!important — lower than nav 10000.
   Nav appeared above modal backdrop. Fix: 10200 clears nav.
*/
body.spx-public .spx-kb-modal:not([hidden]){
  z-index:10200!important;
}

/* ─── PHASE 4: Updates pagination controls ──────────────────*/
.spx-upd-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:clamp(20px,3vw,32px) 0 4px;
}
.spx-upd-pagination[hidden]{display:none!important;}
.spx-upd-page-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(200,230,255,.65);
  cursor:pointer;
  font-size:13px;
  line-height:1;
  transition:background .15s,border-color .15s,color .15s;
}
.spx-upd-page-btn:hover:not(:disabled){
  background:rgba(34,211,238,.10);
  border-color:rgba(34,211,238,.28);
  color:#a5f3fc;
}
.spx-upd-page-btn:disabled{
  opacity:.30;
  cursor:default;
  pointer-events:none;
}
.spx-upd-page-nums{
  display:flex;
  align-items:center;
  gap:3px;
}
.spx-upd-page-num{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:32px;height:32px;
  padding:0 6px;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  color:rgba(200,230,255,.60);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.spx-upd-page-num:hover{
  background:rgba(255,255,255,.06);
  color:rgba(200,230,255,.88);
}
.spx-upd-page-num.is-active{
  background:rgba(34,211,238,.12);
  border-color:rgba(34,211,238,.28);
  color:#a5f3fc;
  cursor:default;
  pointer-events:none;
}
.spx-upd-page-ellipsis{
  color:rgba(200,230,255,.36);
  font-size:13px;
  padding:0 2px;
  user-select:none;
  pointer-events:none;
}
html[data-theme="light"] .spx-upd-page-btn,
html[data-spx-theme="light"] .spx-upd-page-btn{
  border-color:rgba(15,23,42,.12);
  background:rgba(15,23,42,.04);
  color:rgba(15,23,42,.60);
}
html[data-theme="light"] .spx-upd-page-btn:hover:not(:disabled),
html[data-spx-theme="light"] .spx-upd-page-btn:hover:not(:disabled){
  background:rgba(6,182,212,.08);
  border-color:rgba(6,182,212,.24);
  color:#0e7490;
}
html[data-theme="light"] .spx-upd-page-num,
html[data-spx-theme="light"] .spx-upd-page-num{color:rgba(15,23,42,.55);}
html[data-theme="light"] .spx-upd-page-num:hover,
html[data-spx-theme="light"] .spx-upd-page-num:hover{background:rgba(15,23,42,.05);color:rgba(15,23,42,.80);}
html[data-theme="light"] .spx-upd-page-num.is-active,
html[data-spx-theme="light"] .spx-upd-page-num.is-active{
  background:rgba(6,182,212,.10);
  border-color:rgba(6,182,212,.24);
  color:#0e7490;
}
html[data-theme="light"] .spx-upd-page-ellipsis,
html[data-spx-theme="light"] .spx-upd-page-ellipsis{color:rgba(15,23,42,.30);}

/* ─── PHASE 5: Atmosphere — stronger orbital ring + palette ──
   Increase ring opacity and width across all routes.
   Strengthen features palette (still felt too static).
*/
body.spx-public > .spx-page-atm::before{
  border-width:1.5px!important;
}
body.spx-public[data-route="/support"]{
  --atm-ring:rgba(103,232,249,.08)!important;
}
body.spx-public[data-route="/updates"],
body.spx-public[data-route^="/updates/"]{
  --atm-ring:rgba(34,211,238,.08)!important;
}
body.spx-public[data-route="/roadmap"]{
  --atm-ring:rgba(99,102,241,.09)!important;
}
body.spx-public[data-route^="/features"]{
  --atm-c1:rgba(129,140,248,.30)!important;
  --atm-c2:rgba(99,102,241,.20)!important;
  --atm-c3:rgba(56,189,248,.12)!important;
  --atm-ring:rgba(129,140,248,.08)!important;
}

/* ─── A8.138v Responsive ─────────────────────────────────────*/
@media(max-width:600px){
  .spx-upd-pagination{gap:4px;}
  .spx-upd-page-btn{width:32px;height:32px;border-radius:8px;}
  .spx-upd-page-num{min-width:28px;height:28px;font-size:12px;}
}

/* ============================================================
   A8.138w — Visible Motion + Support Nav + KB Modal Final Fix
   Appended to spixor-public.css

   Root causes from A8.138v browser testing:
     1. Support nav button: A8.138v outline-pill still looks
        like a separate element — no pill works: flat text link
        with subtle cyan color accent like all other nav links.
     2. KB modal trapped: .spx-kb-v139 section has class reveal.
        CSS .reveal { transform:translateY(22px) } creates a
        containing block for position:fixed descendants. Modal
        moves with the section, not the viewport. z-index alone
        can never fix this. Fix: document.body.appendChild(modal)
        in the inline script escapes the stacking context entirely.
     3. Stars static: background-position animation on 1px dots
        over 62s — imperceptible. Orbital ring 1px at opacity
        0.048 over 90s — invisible. Fix: child elements
        .spx-atm-orbit and .spx-atm-stars with transform-based
        animation at higher opacity and speed.
     4. No scroll reveals: .reveal at 22px translateY is modest;
        roadmap/support/update elements lack targeted reveals.
   ============================================================ */

/* ─── PHASE 1: Support nav link — flat text, cyan accent ──────
   Final decision: remove all pill/border/background from every
   nav state. Make Support a plain nav link distinguished only
   by a subtle cyan text color. Integrates with all nav states
   without looking like a separate element.
   Override ALL previous support link rules (A8.138r through v).
*/
body.spx-public .spx-nav-v26 .spx-nav-support-link,
body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link,
body.spx-public .spx-nav-v26.is-scrolled .spx-nav-support-link,
body.spx-public .spx-nav-v26.is-open .spx-nav-support-link{
  background:none!important;
  border:none!important;
  border-radius:0!important;
  padding:4px 0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
  color:rgba(103,232,249,.88)!important;
  transform:none!important;
  transition:color .15s!important;
  display:inline-flex!important;
  align-items:center!important;
}
body.spx-public .spx-nav-v26 .spx-nav-support-link:hover,
body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link:hover,
body.spx-public .spx-nav-v26.is-scrolled .spx-nav-support-link:hover,
body.spx-public .spx-nav-v26.is-open .spx-nav-support-link:hover{
  background:none!important;
  border:none!important;
  color:#a5f3fc!important;
  transform:none!important;
  box-shadow:none!important;
}
body.spx-public .spx-nav-v26 .spx-nav-support-link:focus-visible{
  outline:2px solid rgba(103,232,249,.52)!important;
  outline-offset:3px!important;
  border-radius:3px!important;
}
html[data-theme="light"] body.spx-public .spx-nav-v26 .spx-nav-support-link,
html[data-spx-theme="light"] body.spx-public .spx-nav-v26 .spx-nav-support-link,
html[data-theme="light"] body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link,
html[data-spx-theme="light"] body.spx-public .spx-nav-v26:not(.is-scrolled):not(.is-open) .spx-nav-support-link{
  background:none!important;
  border:none!important;
  color:#0e7490!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}
html[data-theme="light"] body.spx-public .spx-nav-v26 .spx-nav-support-link:hover,
html[data-spx-theme="light"] body.spx-public .spx-nav-v26 .spx-nav-support-link:hover{
  color:#0c6075!important;
  background:none!important;
}

/* ─── PHASE 3: Atmosphere child elements — visible motion ──────
   New keyframes for child elements (.spx-atm-orbit, .spx-atm-stars)
   inserted via PHP. These replace the barely-visible
   ::before/::after background-position animations with
   transform-based motion that the eye can track.
*/

@keyframes spxAtmOrbitA{
  from{transform:translate(-50%,-50%) rotate(-20deg) scaleX(2.4) scaleY(.42);}
  to  {transform:translate(-50%,-50%) rotate(340deg) scaleX(2.4) scaleY(.42);}
}
@keyframes spxAtmOrbitB{
  from{transform:rotate(30deg) scaleX(1.7) scaleY(.30);}
  to  {transform:rotate(-330deg) scaleX(1.7) scaleY(.30);}
}
@keyframes spxAtmStarDrift{
  0%  {transform:translate(0,0);}
  28% {transform:translate(-26px,17px);}
  64% {transform:translate(15px,34px);}
  100%{transform:translate(0,0);}
}

/* Primary orbital ring — wide flat ellipse, 48s revolution */
body.spx-public > .spx-page-atm > .spx-atm-orbit{
  position:absolute;
  left:50%;top:50%;
  width:180vmax;height:180vmax;
  border-radius:50%;
  border:2px solid rgba(103,232,249,.12);
  transform:translate(-50%,-50%) rotate(-20deg) scaleX(2.4) scaleY(.42);
  animation:spxAtmOrbitA 48s linear infinite;
  pointer-events:none;
}

/* Second inner ring — counter-rotates at 72s */
body.spx-public > .spx-page-atm > .spx-atm-orbit::before{
  content:'';
  position:absolute;
  left:50%;top:50%;
  width:100%;height:100%;
  border-radius:50%;
  border:1px solid rgba(103,232,249,.07);
  transform:translate(-50%,-50%) rotate(30deg) scaleX(1.7) scaleY(.30);
  animation:spxAtmOrbitB 72s linear infinite;
}

/* Star field — 1.5px dots, transform-based drift at 22s */
body.spx-public > .spx-page-atm > .spx-atm-stars{
  position:absolute;
  inset:-16px;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.55) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 67% 11%,rgba(107,232,255,.50) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 85% 73%,rgba(255,255,255,.45) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 38% 55%,rgba(255,255,255,.38) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 21% 83%,rgba(107,232,255,.35) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 57% 34%,rgba(255,255,255,.30) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 73% 47%,rgba(185,215,255,.32) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 93% 26%,rgba(255,255,255,.35) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 42% 88%,rgba(103,232,249,.30) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 78% 62%,rgba(255,255,255,.28) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 7%  44%,rgba(185,215,255,.22) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 54% 76%,rgba(107,232,255,.20) 0 1.5px,transparent 2.5px);
  background-size:
    148px 148px,228px 214px,196px 196px,172px 268px,
    212px 172px,258px 188px,182px 232px,242px 162px,
    188px 198px,232px 178px,264px 216px,208px 244px;
  animation:spxAtmStarDrift 22s ease-in-out infinite;
  pointer-events:none;
}

/* Route-specific orbit ring color */
body.spx-public[data-route="/support"] > .spx-page-atm > .spx-atm-orbit{
  border-color:rgba(103,232,249,.14)!important;
}
body.spx-public[data-route="/updates"] > .spx-page-atm > .spx-atm-orbit,
body.spx-public[data-route^="/updates/"] > .spx-page-atm > .spx-atm-orbit{
  border-color:rgba(34,211,238,.14)!important;
}
body.spx-public[data-route="/roadmap"] > .spx-page-atm > .spx-atm-orbit{
  border-color:rgba(99,102,241,.16)!important;
}
body.spx-public[data-route^="/features"] > .spx-page-atm > .spx-atm-orbit{
  border-color:rgba(129,140,248,.14)!important;
}

/* ─── PHASE 4: Pointer effect — direct to atmosphere children ──
   --spx-mx/--spx-my are set on body by JS. Route them to the
   nebula position on the parent .spx-page-atm. The pointer JS
   already uses ±14%/±9% from A8.138v — no JS change needed.
*/

/* ─── PHASE 5: Scroll reveal — inner pages more visible ───────
   Override .reveal for non-home pages: more dramatic start
   position (translateY 32px vs 22px). The reveal JS observer
   (lines 193-205) already adds is-visible — only CSS changes.
*/
body.spx-public main:not(.spx-home-main) .reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .72s ease,transform .72s cubic-bezier(.2,.8,.2,1);
}
body.spx-public main:not(.spx-home-main) .reveal.is-visible{
  opacity:1;
  transform:none;
}

/* Inner-page targeted reveal class (applied by initInnRevealA138w) */
.spx-inn-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.25,.8,.25,1);
  transition-delay:calc(var(--inn-i,0) * 55ms);
}
.spx-inn-reveal.is-inn-visible{
  opacity:1;
  transform:none;
}

/* ─── A8.138w Reduced motion ─────────────────────────────────*/
@media(prefers-reduced-motion:reduce){
  body.spx-public > .spx-page-atm > .spx-atm-orbit{animation:none!important;}
  body.spx-public > .spx-page-atm > .spx-atm-orbit::before{animation:none!important;}
  body.spx-public > .spx-page-atm > .spx-atm-stars{animation:none!important;}
  body.spx-public main:not(.spx-home-main) .reveal,
  body.spx-public main:not(.spx-home-main) .reveal.is-visible{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .spx-inn-reveal,.spx-inn-reveal.is-inn-visible{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}

/* ============================================================
   A8.138x — Atmosphere Calm + Auth Grid Remove + Scroll Polish
   Build: A8.138x-atmosphere-auth-scroll-polish
   Date:  2026-06-01

   Root causes from A8.138w browser testing:
     1. Stars too busy / streaks: two star layers active
        simultaneously (.spx-page-atm::after OLD + .spx-atm-stars
        NEW child). Three orbit ring layers active simultaneously
        (::before OLD at 1.5px + .spx-atm-orbit 2px + inner ring).
        Old layers not zeroed when new child elements were added.
        New .spx-atm-stars had opacity 0.20-0.55 (too high) and
        background-size tiling (148-264px tiles) creating a
        repeating dot-grid pattern across the viewport.
     2. Auth grid: body.spx-auth-page-v130 background (A8.138f,
        line 36903) included repeating-linear-gradient(0deg)
        and repeating-linear-gradient(90deg) at 48px intervals.
     3. Feature page grid: body[data-route*="features/"] had the
        same 60px repeating grid from A8.138f (line 36908).
     4. Scroll-in/out: no bidirectional reveal system existed;
        feature/detail inner elements lacked targeted animation.
   ============================================================ */

/* ─── Phase 1a: Kill redundant pseudo-element layers ─────────
   .spx-page-atm::before (old orbit ring, 1.5px, 90s) and ::after
   (old star field, 8 dots, 62s) are now fully replaced by child
   elements .spx-atm-orbit and .spx-atm-stars. Zero them so three
   simultaneous ring layers and two simultaneous star layers don't
   stack. These must fire before the reduced-motion block below.
*/
body.spx-public > .spx-page-atm::before{
  opacity:0!important;
  border-width:0!important;
  animation:none!important;
}
body.spx-public > .spx-page-atm::after{
  opacity:0!important;
  animation:none!important;
}

/* ─── Phase 1b: Calm orbit ring ──────────────────────────────
   2px hard border → 1px + blur(1px) softens visible stripe.
   Opacity 0.12-0.16 → 0.05-0.06 (barely-there depth hint).
   48s revolution → 90s (slower, more ambient).
   Kill inner counter-rotating ring entirely.
*/
body.spx-public > .spx-page-atm > .spx-atm-orbit{
  border-width:1px!important;
  border-color:rgba(103,232,249,.05)!important;
  filter:blur(1px)!important;
  animation-duration:90s!important;
}
body.spx-public > .spx-page-atm > .spx-atm-orbit::before{
  opacity:0!important;
  animation:none!important;
}
/* Route-specific orbit colors — calmed */
body.spx-public[data-route="/support"] > .spx-page-atm > .spx-atm-orbit{
  border-color:rgba(103,232,249,.055)!important;
}
body.spx-public[data-route="/updates"] > .spx-page-atm > .spx-atm-orbit,
body.spx-public[data-route^="/updates/"] > .spx-page-atm > .spx-atm-orbit{
  border-color:rgba(34,211,238,.055)!important;
}
body.spx-public[data-route="/roadmap"] > .spx-page-atm > .spx-atm-orbit{
  border-color:rgba(99,102,241,.062)!important;
}
body.spx-public[data-route^="/features"] > .spx-page-atm > .spx-atm-orbit{
  border-color:rgba(129,140,248,.052)!important;
}

/* ─── Phase 1c: Calm star layer ──────────────────────────────
   Replace 12 repeating-tiled dots (opacity 0.20-0.55) with
   7 non-repeating dots at 0.09-0.16 opacity.
   background-size:100% 100% + background-repeat:no-repeat
   fills the element exactly once — dots appear once each at
   their percentage positions with no tile-grid repetition.
   Keep 22s drift (transform-based motion is still trackable).
*/
body.spx-public > .spx-page-atm > .spx-atm-stars{
  background:
    radial-gradient(circle at 11% 19%,rgba(255,255,255,.16) 0 1.2px,transparent 2px),
    radial-gradient(circle at 73% 12%,rgba(107,232,255,.13) 0 1.2px,transparent 2px),
    radial-gradient(circle at 87% 76%,rgba(255,255,255,.12) 0 1.2px,transparent 2px),
    radial-gradient(circle at 32% 58%,rgba(255,255,255,.10) 0 1.2px,transparent 2px),
    radial-gradient(circle at 56% 34%,rgba(185,215,255,.11) 0 1.2px,transparent 2px),
    radial-gradient(circle at 17% 82%,rgba(107,232,255,.09) 0 1.2px,transparent 2px),
    radial-gradient(circle at 93% 44%,rgba(255,255,255,.08) 0 1.2px,transparent 2px)!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
}

/* ─── Phase 2: Remove auth + feature page grids ──────────────
   A8.138f (line 36903/36908) added repeating-linear-gradient
   grid lines to auth and feature page bodies. Remove grid lines;
   keep the radial-gradient depth field.
*/
body.spx-auth-page-v130,
body.spx-reset-page,
body.spx-unsub-page{
  background-image:
    radial-gradient(ellipse 880px 520px at 15% 20%,rgba(14,165,233,.13),transparent 70%),
    radial-gradient(ellipse 640px 400px at 85% 80%,rgba(34,211,238,.09),transparent 68%),
    radial-gradient(ellipse 400px 280px at 50% 50%,rgba(56,189,248,.06),transparent 65%)!important;
}
html[data-theme="light"] body.spx-auth-page-v130,
html[data-spx-theme="light"] body.spx-auth-page-v130,
html[data-theme="light"] body.spx-reset-page,
html[data-spx-theme="light"] body.spx-reset-page,
html[data-theme="light"] body.spx-unsub-page,
html[data-spx-theme="light"] body.spx-unsub-page{
  background-image:
    radial-gradient(ellipse 880px 520px at 15% 20%,rgba(14,165,233,.07),transparent 70%),
    radial-gradient(ellipse 640px 400px at 85% 80%,rgba(34,211,238,.05),transparent 68%)!important;
}
body[data-route*="features/"]{
  background-image:
    radial-gradient(ellipse 900px 560px at 10% 12%,rgba(14,165,233,.12),transparent 70%),
    radial-gradient(ellipse 600px 400px at 90% 75%,rgba(34,211,238,.08),transparent 65%),
    radial-gradient(ellipse 360px 240px at 55% 40%,rgba(56,189,248,.05),transparent 60%)!important;
}

/* ─── Phase 3: Bidirectional scroll-in/out animation ─────────
   .spx-scrollfx — added by initScrollFxA138x() to inner-page
   elements. .is-inview added/removed by IntersectionObserver.
   CSS transition reverses naturally on class removal for scroll-out.
   Stagger via --sfx-i CSS var (set by JS, 0-5).
   Enter delay = stagger; exit delay = 0 (no delay on exit).
*/
.spx-scrollfx{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .60s ease,transform .60s cubic-bezier(.2,.8,.2,1);
}
.spx-scrollfx.is-inview{
  opacity:1;
  transform:none;
  transition-delay:calc(var(--sfx-i,0) * 65ms);
}

/* ─── Phase 4: Export-first micro-polish ─────────────────────*/
body.spx-public .spx-wfr-header{
  gap:14px!important;
}
body.spx-public .spx-wfr-header h2{
  color:#f0f7ff!important;
}
body.spx-public .spx-wfr-header p{
  font-size:clamp(15px,1.55vw,17.5px)!important;
  color:rgba(200,230,255,.65)!important;
  line-height:1.70!important;
}
body.spx-public .spx-wfr-eyebrow-row{
  gap:22px!important;
}

/* ─── Phase 5: Command Center micro-polish ───────────────────*/
body.spx-public .spx-ckr-shell{
  border-radius:24px!important;
  border-color:rgba(255,255,255,.10)!important;
}
body.spx-public .spx-ckr-header h2{
  letter-spacing:-.048em!important;
  color:#f0f7ff!important;
}
body.spx-public .spx-ckr-header p{
  font-size:clamp(14px,1.45vw,16.5px)!important;
  color:rgba(200,230,255,.60)!important;
  line-height:1.68!important;
}
body.spx-public .spx-ckr-body{
  min-height:340px!important;
}
body.spx-public .spx-ckr-panel-copy p{
  font-size:14px!important;
  line-height:1.68!important;
  color:rgba(200,230,255,.62)!important;
}

/* ─── A8.138x Reduced motion ─────────────────────────────────*/
@media(prefers-reduced-motion:reduce){
  body.spx-public > .spx-page-atm > .spx-atm-orbit{animation:none!important;}
  body.spx-public > .spx-page-atm > .spx-atm-stars{animation:none!important;}
  .spx-scrollfx,.spx-scrollfx.is-inview{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}

/* ============================================================
   A8.138y — Balanced Atmosphere Density + Pricing Page Rework
   Build: A8.138y-balanced-atmosphere-density-pricing-page-rework
   Date:  2026-06-01

   Root causes from A8.138x browser testing:
     1. Stars too empty: A8.138x overcorrected. 7 dots at
        opacity 0.08-0.16 with background-size:100% 100% are
        barely visible against section card surfaces. The
        non-repeating approach was correct; the opacity was
        too low and the dot count was too few.
     2. /pricing standalone page: no atmosphere element (not in
        $isAtmRoute), no proper layout, shared homepage classes,
        no comparison, no billing options, no premium styling.
   ============================================================ */

/* ─── Phase 1: Balanced star density — base raise ────────────
   A8.138x set opacity 0.08-0.16 — too faint. Raise base opacity
   to 0.14-0.26 across all atmosphere routes.
   background-size:100% 100% + background-repeat:no-repeat
   retained from A8.138x — prevents tiling grid pattern.
*/
body.spx-public > .spx-page-atm > .spx-atm-stars{
  background:
    radial-gradient(circle at 11% 19%,rgba(255,255,255,.26) 0 1.2px,transparent 2px),
    radial-gradient(circle at 73% 12%,rgba(107,232,255,.22) 0 1.2px,transparent 2px),
    radial-gradient(circle at 87% 76%,rgba(255,255,255,.20) 0 1.2px,transparent 2px),
    radial-gradient(circle at 32% 58%,rgba(255,255,255,.18) 0 1.2px,transparent 2px),
    radial-gradient(circle at 56% 34%,rgba(185,215,255,.19) 0 1.2px,transparent 2px),
    radial-gradient(circle at 17% 82%,rgba(107,232,255,.17) 0 1.2px,transparent 2px),
    radial-gradient(circle at 93% 44%,rgba(255,255,255,.15) 0 1.2px,transparent 2px)!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
}

/* /support — medium-low density, 10 dots, calm + readable */
body.spx-public[data-route="/support"] > .spx-page-atm > .spx-atm-stars{
  background:
    radial-gradient(circle at 8% 14%,rgba(107,232,255,.32) 0 1.2px,transparent 2px),
    radial-gradient(circle at 72% 9%,rgba(255,255,255,.28) 0 1.2px,transparent 2px),
    radial-gradient(circle at 89% 72%,rgba(255,255,255,.26) 0 1.2px,transparent 2px),
    radial-gradient(circle at 34% 56%,rgba(107,232,255,.24) 0 1.2px,transparent 2px),
    radial-gradient(circle at 54% 32%,rgba(255,255,255,.22) 0 1.2px,transparent 2px),
    radial-gradient(circle at 19% 84%,rgba(185,215,255,.26) 0 1.2px,transparent 2px),
    radial-gradient(circle at 91% 42%,rgba(255,255,255,.20) 0 1.2px,transparent 2px),
    radial-gradient(circle at 47% 76%,rgba(107,232,255,.22) 0 1.2px,transparent 2px),
    radial-gradient(circle at 62% 18%,rgba(255,255,255,.24) 0 1px,transparent 1.7px),
    radial-gradient(circle at 26% 36%,rgba(185,215,255,.18) 0 1px,transparent 1.7px)!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
}

/* /features + /features/* — medium density, 12 dots, mixed sizes */
body.spx-public[data-route^="/features"] > .spx-page-atm > .spx-atm-stars{
  background:
    radial-gradient(circle at 9% 16%,rgba(129,140,248,.38) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 70% 8%,rgba(255,255,255,.32) 0 1.2px,transparent 2px),
    radial-gradient(circle at 91% 68%,rgba(255,255,255,.28) 0 1.2px,transparent 2px),
    radial-gradient(circle at 37% 55%,rgba(185,215,255,.28) 0 1.2px,transparent 2px),
    radial-gradient(circle at 52% 30%,rgba(129,140,248,.30) 0 1.2px,transparent 2px),
    radial-gradient(circle at 16% 80%,rgba(255,255,255,.24) 0 1.2px,transparent 2px),
    radial-gradient(circle at 94% 46%,rgba(185,215,255,.24) 0 1.2px,transparent 2px),
    radial-gradient(circle at 44% 78%,rgba(255,255,255,.28) 0 1.2px,transparent 2px),
    radial-gradient(circle at 64% 20%,rgba(129,140,248,.22) 0 1px,transparent 1.7px),
    radial-gradient(circle at 28% 38%,rgba(255,255,255,.20) 0 1px,transparent 1.7px),
    radial-gradient(circle at 78% 58%,rgba(185,215,255,.24) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 5% 50%,rgba(255,255,255,.18) 0 1px,transparent 1.7px)!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
}

/* /pricing — medium-low density, 9 dots, calm + trustworthy */
body.spx-public[data-route="/pricing"] > .spx-page-atm > .spx-atm-stars{
  background:
    radial-gradient(circle at 10% 16%,rgba(56,189,248,.28) 0 1.2px,transparent 2px),
    radial-gradient(circle at 71% 10%,rgba(255,255,255,.24) 0 1.2px,transparent 2px),
    radial-gradient(circle at 88% 74%,rgba(255,255,255,.22) 0 1.2px,transparent 2px),
    radial-gradient(circle at 35% 57%,rgba(107,232,255,.22) 0 1.2px,transparent 2px),
    radial-gradient(circle at 55% 33%,rgba(185,215,255,.24) 0 1.2px,transparent 2px),
    radial-gradient(circle at 18% 83%,rgba(255,255,255,.20) 0 1.2px,transparent 2px),
    radial-gradient(circle at 92% 45%,rgba(56,189,248,.22) 0 1.2px,transparent 2px),
    radial-gradient(circle at 46% 74%,rgba(255,255,255,.18) 0 1px,transparent 1.7px),
    radial-gradient(circle at 63% 19%,rgba(185,215,255,.20) 0 1px,transparent 1.7px)!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
}

/* ─── Phase 2: /pricing route atmosphere body ────────────────
   Added to $isAtmRoute in A8.138y PHP. Body background and
   palette vars for the standalone pricing page.
*/
body.spx-public[data-route="/pricing"]{
  background-color:#040811!important;
  background-image:
    radial-gradient(ellipse 130% 55% at 50% -10%,rgba(56,189,248,.18) 0%,rgba(99,102,241,.12) 40%,transparent 62%),
    radial-gradient(ellipse 60% 44% at 14% 76%,rgba(99,102,241,.09) 0%,transparent 52%),
    radial-gradient(ellipse 52% 40% at 86% 70%,rgba(56,189,248,.08) 0%,transparent 50%)!important;
}
body.spx-public[data-route="/pricing"]{
  --atm-c1:rgba(56,189,248,.20);
  --atm-c2:rgba(99,102,241,.13);
  --atm-c3:rgba(103,232,249,.08);
}
body.spx-public[data-route="/pricing"] > .spx-page-atm > .spx-atm-orbit{
  border-color:rgba(56,189,248,.052)!important;
}
html[data-theme="light"] body.spx-public[data-route="/pricing"],
html[data-spx-theme="light"] body.spx-public[data-route="/pricing"]{
  background-color:#f0f5fb!important;
  background-image:
    radial-gradient(ellipse 130% 55% at 50% -10%,rgba(14,165,233,.08) 0%,transparent 62%),
    radial-gradient(ellipse 60% 44% at 14% 76%,rgba(37,99,235,.05) 0%,transparent 52%)!important;
}

/* ─── Phase 3: Confirm no-streak rule — orbit still blurred ──
   A8.138x set filter:blur(1px) and opacity 0.05 on orbit ring.
   No changes needed — already correct. Comment confirms state.
   body.spx-public > .spx-page-atm > .spx-atm-orbit {
     border-width:1px; filter:blur(1px); opacity via border-color
   }
*/

/* ─── Phase 4: Standalone /pricing page layout + components ──
   spx-ppage-* classes are ONLY on the /pricing route.
   Scoping via body[data-route="/pricing"] where needed for
   safety, but class names are sufficiently unique.
*/

/* Outer page padding */
body.spx-public[data-route="/pricing"] main{
  padding-bottom:clamp(64px,9vw,120px)!important;
}

/* Hero */
.spx-ppage-hero{
  padding:clamp(72px,10vw,118px) var(--side) clamp(44px,5.5vw,64px);
  text-align:center;
}
.spx-ppage-hero-inner{
  max-width:720px;
  margin:0 auto;
}
.spx-ppage-hero h1{
  font-size:clamp(40px,6.2vw,76px);
  line-height:.96;
  letter-spacing:-.065em;
  font-weight:1000;
  margin:20px 0 22px;
  color:#f0f8ff;
}
.spx-ppage-hero p{
  font-size:clamp(15px,1.65vw,19px);
  color:rgba(200,230,255,.62);
  line-height:1.65;
  margin:0;
  max-width:580px;
  margin-left:auto;
  margin-right:auto;
}

/* Plans section */
.spx-ppage-plans{
  max-width:min(1060px,calc(100vw - 32px));
  margin:0 auto clamp(52px,7vw,88px);
  padding:0 clamp(14px,3vw,24px);
}
.spx-ppage-plans-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,2.5vw,26px);
  align-items:start;
}

/* Plan card */
.spx-ppage-card{
  border:1px solid rgba(255,255,255,.09);
  border-radius:28px;
  background:linear-gradient(160deg,rgba(10,20,38,.84),rgba(5,10,22,.68));
  padding:clamp(24px,3.5vw,40px);
  display:flex;
  flex-direction:column;
  gap:20px;
  box-shadow:0 24px 80px rgba(0,0,0,.22);
}
.spx-ppage-card--orbit{
  border-color:rgba(103,232,249,.18)!important;
  background:linear-gradient(160deg,rgba(10,22,44,.90),rgba(5,12,28,.74))!important;
  box-shadow:0 30px 100px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)!important;
}

/* Card head */
.spx-ppage-card-head{
  display:flex;
  align-items:center;
  gap:14px;
}
.spx-ppage-plan-icon{
  width:46px;height:46px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:1000;
  background:rgba(255,255,255,.07);
  color:rgba(200,230,255,.62);
  flex-shrink:0;
}
.spx-ppage-plan-icon--orbit{
  background:linear-gradient(135deg,rgba(103,232,249,.18),rgba(56,189,248,.10));
  color:#a5f3fc;
}
.spx-ppage-plan-meta h2{
  font-size:clamp(20px,2.4vw,28px);
  font-weight:950;
  letter-spacing:-.03em;
  line-height:1.04;
  margin:0 0 6px;
  color:#eef6ff;
}
.spx-ppage-plan-badge{
  display:inline-flex;
  font-size:10.5px;font-weight:950;
  text-transform:uppercase;letter-spacing:.08em;
  padding:4px 9px;border-radius:999px;
  border:1px solid rgba(52,211,153,.26);
  background:rgba(52,211,153,.09);
  color:#6ee7b7;
}
.spx-ppage-plan-badge--soon{
  border-color:rgba(251,191,36,.28)!important;
  background:rgba(251,191,36,.09)!important;
  color:#fbbf24!important;
}

/* Billing tabs */
.spx-ppage-bill-nav{
  display:flex;gap:3px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:3px;
  width:max-content;
}
.spx-ppage-bill-tab{
  padding:7px 12px;
  border-radius:9px;border:none;background:none;
  color:rgba(180,220,255,.48);
  font-size:12.5px;font-weight:900;cursor:pointer;
  transition:background .15s,color .15s;
  white-space:nowrap;
}
.spx-ppage-bill-tab.is-active{background:rgba(103,232,249,.12);color:#a5f3fc;}
.spx-ppage-bill-tab:hover:not(.is-active){background:rgba(255,255,255,.05);color:rgba(200,230,255,.75);}

/* Price */
.spx-ppage-price-wrap{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.spx-ppage-price{
  font-size:clamp(38px,5vw,58px);
  font-weight:950;letter-spacing:-.045em;
  color:#ddf0ff;line-height:1;
}
.spx-ppage-orbit-price{display:none;}
.spx-ppage-orbit-price.is-active{display:inline;}
.spx-ppage-price small,.spx-ppage-price-period{
  font-size:clamp(13px,1.3vw,16px);font-weight:700;
  color:rgba(200,230,255,.48);letter-spacing:0;
  font-style:normal;
}
.spx-ppage-bill-save{
  font-size:11px;font-weight:950;
  color:#6ee7b7;
  border:1px solid rgba(52,211,153,.20);
  background:rgba(52,211,153,.08);
  border-radius:999px;padding:3px 8px;
  display:inline-flex;align-items:center;
}
.spx-ppage-bill-save:empty{display:none;}

/* Card description */
.spx-ppage-card-desc{
  font-size:14px;color:rgba(200,230,255,.58);
  line-height:1.65;margin:0;
}

/* Feature list */
.spx-ppage-feat-list{
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:10px;
  flex:1;
}
.spx-ppage-feat-list li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13.5px;color:rgba(200,230,255,.72);
  font-weight:750;line-height:1.45;
}
.spx-ppage-feat-list li::before{
  content:'✓';
  font-size:11px;font-weight:1000;
  color:#6ee7b7;flex-shrink:0;margin-top:2px;
}
.spx-ppage-feat-planned{color:rgba(200,230,255,.44)!important;}
.spx-ppage-feat-note{font-size:11.5px;color:rgba(160,210,255,.44);font-weight:700;}

/* Plan CTA */
.spx-ppage-plan-cta{margin-top:auto;}

/* Orbit notify form */
.spx-ppage-notify{display:grid;gap:9px;margin-top:auto;}
.spx-ppage-notify-label input{
  width:100%;box-sizing:border-box;
  border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:var(--text);
  padding:12px 14px;outline:none;font-size:14px;
  transition:border-color .15s,box-shadow .15s;
}
.spx-ppage-notify-label input:focus{
  border-color:rgba(103,232,249,.40);
  box-shadow:0 0 0 3px rgba(103,232,249,.08);
}
.spx-ppage-notify-btn{width:100%!important;}
.spx-ppage-notify-status{
  font-size:12px;color:rgba(180,220,255,.45);
  display:block;text-align:center;line-height:1.45;
}

/* Comparison */
.spx-ppage-compare{
  max-width:min(760px,calc(100vw - 32px));
  margin:0 auto clamp(52px,7vw,88px);
  padding:0 clamp(14px,3vw,24px);
}
.spx-ppage-compare h2{
  font-size:clamp(26px,3.5vw,40px);font-weight:950;
  letter-spacing:-.04em;margin:0 0 24px;color:#eef6ff;
}
.spx-ppage-compare-table{
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;overflow:hidden;
}
.spx-ppage-compare-head{
  display:grid;grid-template-columns:1fr 100px 100px;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.spx-ppage-compare-head span{
  padding:12px 16px;font-size:10.5px;font-weight:1000;
  text-transform:uppercase;letter-spacing:.09em;
  color:rgba(180,220,255,.52);
}
.spx-ppage-compare-row{
  display:grid;grid-template-columns:1fr 100px 100px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.spx-ppage-compare-row:last-child{border-bottom:none;}
.spx-ppage-compare-row span{
  padding:13px 16px;font-size:13.5px;
  color:rgba(200,230,255,.62);font-weight:750;
}
.spx-ppage-compare-row span:first-child{color:rgba(200,230,255,.82);font-weight:850;}
.spx-ppage-compare-check{color:#6ee7b7!important;font-weight:900!important;}
.spx-ppage-compare-planned{color:rgba(251,191,36,.75)!important;font-size:12px!important;}
.spx-ppage-compare-note{
  margin:14px 0 0;font-size:12px;
  color:rgba(180,220,255,.36);line-height:1.5;
}

/* FAQ */
.spx-ppage-faq{
  max-width:min(640px,calc(100vw - 32px));
  margin:0 auto clamp(52px,7vw,88px);
  padding:0 clamp(14px,3vw,24px);
}
.spx-ppage-faq h2{
  font-size:clamp(26px,3.5vw,40px);font-weight:950;
  letter-spacing:-.04em;margin:0 0 22px;color:#eef6ff;
}
.spx-ppage-faq-list{display:grid;gap:9px;}
.spx-ppage-faq-item{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  overflow:hidden;
}
.spx-ppage-faq-item summary{
  cursor:pointer;list-style:none;
  padding:15px 18px;
  font-size:14px;font-weight:950;color:#eef6ff;
  display:flex;justify-content:space-between;gap:14px;
}
.spx-ppage-faq-item summary::-webkit-details-marker{display:none;}
.spx-ppage-faq-item summary::after{
  content:'+';color:rgba(103,232,249,.65);
  font-size:17px;line-height:1;flex-shrink:0;
}
.spx-ppage-faq-item[open] summary::after{content:'–';}
.spx-ppage-faq-item p{
  margin:0;padding:0 18px 15px;
  font-size:13.5px;color:rgba(200,230,255,.58);line-height:1.65;
}

/* Bottom CTA */
.spx-ppage-bottom-cta{
  max-width:min(680px,calc(100vw - 32px));
  margin:0 auto clamp(64px,9vw,112px);
  padding:clamp(30px,4.5vw,54px) clamp(20px,4vw,44px);
  text-align:center;
  border:1px solid rgba(103,232,249,.14);
  border-radius:28px;
  background:
    radial-gradient(ellipse 90% 65% at 50% -14%,rgba(56,189,248,.14),transparent 60%),
    linear-gradient(160deg,rgba(8,18,36,.82),rgba(4,9,18,.68));
}
.spx-ppage-bottom-cta h2{
  font-size:clamp(28px,4vw,46px);font-weight:950;
  letter-spacing:-.045em;margin:0 0 12px;color:#f0f8ff;
}
.spx-ppage-bottom-cta p{
  font-size:clamp(14.5px,1.5vw,17.5px);
  color:rgba(200,230,255,.58);margin:0 0 26px;line-height:1.65;
}
.spx-ppage-bottom-cta-actions{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}

/* Light mode */
html[data-theme="light"] .spx-ppage-card,
html[data-spx-theme="light"] .spx-ppage-card{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(15,23,42,.10)!important;
  box-shadow:0 20px 70px rgba(15,23,42,.09)!important;
}
html[data-theme="light"] .spx-ppage-card--orbit,
html[data-spx-theme="light"] .spx-ppage-card--orbit{
  border-color:rgba(6,182,212,.22)!important;
}
html[data-theme="light"] .spx-ppage-hero h1,
html[data-spx-theme="light"] .spx-ppage-hero h1,
html[data-theme="light"] .spx-ppage-compare h2,
html[data-spx-theme="light"] .spx-ppage-compare h2,
html[data-theme="light"] .spx-ppage-faq h2,
html[data-spx-theme="light"] .spx-ppage-faq h2,
html[data-theme="light"] .spx-ppage-plan-meta h2,
html[data-spx-theme="light"] .spx-ppage-plan-meta h2,
html[data-theme="light"] .spx-ppage-bottom-cta h2,
html[data-spx-theme="light"] .spx-ppage-bottom-cta h2{color:#0f172a!important;}
html[data-theme="light"] .spx-ppage-hero p,
html[data-spx-theme="light"] .spx-ppage-hero p,
html[data-theme="light"] .spx-ppage-card-desc,
html[data-spx-theme="light"] .spx-ppage-card-desc,
html[data-theme="light"] .spx-ppage-bottom-cta p,
html[data-spx-theme="light"] .spx-ppage-bottom-cta p{color:rgba(15,23,42,.55)!important;}
html[data-theme="light"] .spx-ppage-feat-list li,
html[data-spx-theme="light"] .spx-ppage-feat-list li{color:rgba(15,23,42,.70)!important;}
html[data-theme="light"] .spx-ppage-price,
html[data-spx-theme="light"] .spx-ppage-price{color:#0f172a!important;}
html[data-theme="light"] .spx-ppage-compare-table,
html[data-spx-theme="light"] .spx-ppage-compare-table{
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] .spx-ppage-compare-head,
html[data-spx-theme="light"] .spx-ppage-compare-head{
  background:rgba(15,23,42,.03)!important;
  border-color:rgba(15,23,42,.08)!important;
}
html[data-theme="light"] .spx-ppage-compare-row,
html[data-spx-theme="light"] .spx-ppage-compare-row{border-color:rgba(15,23,42,.06)!important;}
html[data-theme="light"] .spx-ppage-compare-row span,
html[data-spx-theme="light"] .spx-ppage-compare-row span{color:rgba(15,23,42,.60)!important;}
html[data-theme="light"] .spx-ppage-compare-row span:first-child,
html[data-spx-theme="light"] .spx-ppage-compare-row span:first-child{color:rgba(15,23,42,.80)!important;}
html[data-theme="light"] .spx-ppage-faq-item,
html[data-spx-theme="light"] .spx-ppage-faq-item{
  border-color:rgba(15,23,42,.10)!important;background:rgba(255,255,255,.72)!important;
}
html[data-theme="light"] .spx-ppage-faq-item summary,
html[data-spx-theme="light"] .spx-ppage-faq-item summary{color:#0f172a!important;}
html[data-theme="light"] .spx-ppage-faq-item p,
html[data-spx-theme="light"] .spx-ppage-faq-item p{color:rgba(15,23,42,.58)!important;}
html[data-theme="light"] .spx-ppage-bottom-cta,
html[data-spx-theme="light"] .spx-ppage-bottom-cta{
  background:linear-gradient(160deg,rgba(255,255,255,.90),rgba(242,248,255,.82))!important;
  border-color:rgba(6,182,212,.18)!important;
}
html[data-theme="light"] .spx-ppage-notify-label input,
html[data-spx-theme="light"] .spx-ppage-notify-label input{
  background:#fff!important;border-color:rgba(15,23,42,.12)!important;color:#0f172a!important;
}
html[data-theme="light"] .spx-ppage-bill-nav,
html[data-spx-theme="light"] .spx-ppage-bill-nav{
  background:rgba(15,23,42,.04)!important;border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] .spx-ppage-bill-tab,
html[data-spx-theme="light"] .spx-ppage-bill-tab{color:rgba(15,23,42,.45)!important;}
html[data-theme="light"] .spx-ppage-bill-tab.is-active,
html[data-spx-theme="light"] .spx-ppage-bill-tab.is-active{
  background:rgba(6,182,212,.10)!important;color:#0e7490!important;
}

/* ─── Phase 5: Scroll animations — /pricing gets .reveal ─────
   .spx-ppage-* sections have reveal class in PHP. The existing
   A8.138w inner-page reveal override (32px/0.72s) applies since
   /pricing is not .spx-home-main. No new JS needed.
*/

/* Responsive */
@media(max-width:780px){
  .spx-ppage-plans-grid{grid-template-columns:1fr;}
}
@media(max-width:520px){
  .spx-ppage-compare-head,
  .spx-ppage-compare-row{grid-template-columns:1fr 76px 76px;}
  .spx-ppage-bottom-cta-actions .btn{width:100%;}
  .spx-ppage-compare-row span{padding:11px 10px;font-size:12.5px;}
  .spx-ppage-compare-head span{padding:10px 10px;}
}

/* ─── A8.138y Reduced motion ─────────────────────────────────*/
@media(prefers-reduced-motion:reduce){
  body.spx-public > .spx-page-atm > .spx-atm-stars{animation:none!important;}
}

/* ============================================================
   A8.138z — Homepage Pricing Billing Toggle + Light Mode Polish
   Build: A8.138z-home-pricing-billing-toggle-lightmode-polish
   Date:  2026-06-01

   Changes:
     1. Homepage pricing: added billing nav (Monthly/6mo/Annual)
        inside Orbit card. Three price elements with data-hp-bill-show
        attribute; inline script toggles active price. Monthly retains
        data-orbit-price for existing locale detection JS.
     2. Light mode: raised body to gradient background, reduced
        atmosphere opacity to prevent dark speckles on light bg,
        improved eyebrow/badge colors, better card depth, route
        section surfaces, feature/pricing/support page polish.
   ============================================================ */

/* ─── Phase 1: Homepage billing toggle ───────────────────────
   Nav placed inside .spx-pcard--orbit, above .spx-pcard-price.
   Scoped via .spx-hp-bill-nav / .spx-hp-price — no conflict
   with standalone /pricing spx-ppage-bill-* classes.
*/
.spx-hp-bill-nav{
  display:flex;gap:3px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:3px;
  width:max-content;margin-bottom:6px;
}
.spx-hp-bill-tab{
  padding:6px 12px;border-radius:7px;
  border:none;background:none;
  color:rgba(200,230,255,.48);
  font-size:12px;font-weight:900;cursor:pointer;
  transition:background .15s,color .15s;white-space:nowrap;
}
.spx-hp-bill-tab.is-active{
  background:rgba(251,191,36,.14);color:#fbbf24;
}
.spx-hp-bill-tab:hover:not(.is-active){
  background:rgba(255,255,255,.05);color:rgba(200,230,255,.72);
}
.spx-hp-prices{flex-wrap:wrap;gap:8px!important;align-items:center!important;}
.spx-hp-price{display:none;}
.spx-hp-price.is-active{display:inline;}
.spx-hp-price small{
  font-size:14px;font-weight:700;
  font-style:normal;letter-spacing:0;
  background:none!important;
  -webkit-background-clip:unset!important;background-clip:unset!important;
  color:rgba(200,230,255,.45)!important;
  -webkit-text-fill-color:rgba(200,230,255,.45)!important;
}
.spx-hp-bill-save{
  font-size:11px;font-weight:950;
  color:#6ee7b7;
  background:rgba(52,211,153,.09);
  border:1px solid rgba(52,211,153,.18);
  border-radius:999px;padding:3px 8px;
  align-self:center;
}
.spx-hp-bill-save:empty{display:none;}

/* Light mode billing toggle */
html[data-theme="light"] .spx-hp-bill-nav,
html[data-spx-theme="light"] .spx-hp-bill-nav{
  background:rgba(15,23,42,.04)!important;
  border-color:rgba(15,23,42,.09)!important;
}
html[data-theme="light"] .spx-hp-bill-tab,
html[data-spx-theme="light"] .spx-hp-bill-tab{color:rgba(15,23,42,.40)!important;}
html[data-theme="light"] .spx-hp-bill-tab.is-active,
html[data-spx-theme="light"] .spx-hp-bill-tab.is-active{
  background:rgba(180,120,0,.10)!important;color:#92400e!important;
}
html[data-theme="light"] .spx-hp-price small,
html[data-spx-theme="light"] .spx-hp-price small{
  color:rgba(15,23,42,.40)!important;
  -webkit-text-fill-color:rgba(15,23,42,.40)!important;
}
html[data-theme="light"] .spx-hp-bill-save,
html[data-spx-theme="light"] .spx-hp-bill-save{
  color:#065f46;background:rgba(5,150,105,.09);border-color:rgba(5,150,105,.18);
}

/* ─── Phase 2: Light mode global improvements ────────────────

   Root cause: body background was flat #f0f4fa with no depth.
   Atmosphere child elements (.spx-atm-stars/.spx-atm-orbit) had
   no light mode opacity override — stars looked like dark speckles.
   Eyebrows showed dark-mode amber on a light background.
   Section card surfaces (Export-first, Command Center, Alpha)
   had no dedicated light mode treatment.
*/

/* 2a. Body background — soft gradient instead of flat */
html[data-theme="light"] body.spx-public,
html[data-spx-theme="light"] body.spx-public{
  background:linear-gradient(160deg,#eef5fb 0%,#f3f8fd 55%,#ecf3f9 100%)!important;
}

/* 2b. Atmosphere children — very reduced in light mode */
html[data-theme="light"] body.spx-public > .spx-page-atm,
html[data-spx-theme="light"] body.spx-public > .spx-page-atm{
  opacity:.28!important;
}
html[data-theme="light"] body.spx-public > .spx-page-atm > .spx-atm-stars,
html[data-spx-theme="light"] body.spx-public > .spx-page-atm > .spx-atm-stars{
  opacity:.10!important;
}
html[data-theme="light"] body.spx-public > .spx-page-atm > .spx-atm-orbit,
html[data-spx-theme="light"] body.spx-public > .spx-page-atm > .spx-atm-orbit{
  opacity:0!important;
}

/* 2c. Eyebrows and status badges in light mode */
html[data-theme="light"] .eyebrow:not(.alpha),
html[data-spx-theme="light"] .eyebrow:not(.alpha){
  border-color:rgba(6,182,212,.22)!important;
  background:rgba(6,182,212,.07)!important;
  color:#0e7490!important;
}
html[data-theme="light"] .eyebrow.alpha,
html[data-spx-theme="light"] .eyebrow.alpha{
  border-color:rgba(180,120,0,.22)!important;
  background:rgba(245,158,11,.07)!important;
  color:#92400e!important;
}

/* 2d. Export-first section in light mode */
html[data-theme="light"] body.spx-public .spx-wf-v138r,
html[data-spx-theme="light"] body.spx-public .spx-wf-v138r{
  background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(240,249,255,.86))!important;
  border-color:rgba(15,23,42,.09)!important;
  box-shadow:0 18px 60px rgba(15,23,42,.08)!important;
}
html[data-theme="light"] body.spx-public .spx-wfr-header h2,
html[data-spx-theme="light"] body.spx-public .spx-wfr-header h2{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-wfr-header p,
html[data-spx-theme="light"] body.spx-public .spx-wfr-header p{color:rgba(15,23,42,.58)!important;}
html[data-theme="light"] body.spx-public .spx-wfr-stat strong,
html[data-spx-theme="light"] body.spx-public .spx-wfr-stat strong{
  background:linear-gradient(135deg,#0369a1,#0284c7)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
}

/* 2e. Command Center shell in light mode */
html[data-theme="light"] body.spx-public .spx-cockpit-v138r,
html[data-spx-theme="light"] body.spx-public .spx-cockpit-v138r{
  background:transparent!important;
}
html[data-theme="light"] body.spx-public .spx-ckr-shell,
html[data-spx-theme="light"] body.spx-public .spx-ckr-shell{
  background:linear-gradient(180deg,#fff,rgba(242,249,255,.95))!important;
  border-color:rgba(15,23,42,.09)!important;
  box-shadow:0 18px 60px rgba(15,23,42,.08)!important;
}
html[data-theme="light"] body.spx-public .spx-ckr-header h2,
html[data-spx-theme="light"] body.spx-public .spx-ckr-header h2{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-ckr-header p,
html[data-spx-theme="light"] body.spx-public .spx-ckr-header p{color:rgba(15,23,42,.55)!important;}

/* 2f. Alpha/roadmap homepage section in light mode */
html[data-theme="light"] body.spx-public .spx-alpha-v138r,
html[data-spx-theme="light"] body.spx-public .spx-alpha-v138r{
  background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(240,248,255,.76))!important;
  border-color:rgba(15,23,42,.09)!important;
}
html[data-theme="light"] body.spx-public .spx-alr-header h2,
html[data-spx-theme="light"] body.spx-public .spx-alr-header h2{color:#0f172a!important;}
html[data-theme="light"] body.spx-public .spx-alr-header p,
html[data-spx-theme="light"] body.spx-public .spx-alr-header p{color:rgba(15,23,42,.58)!important;}
html[data-theme="light"] body.spx-public .spx-alr-signal,
html[data-spx-theme="light"] body.spx-public .spx-alr-signal{
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(15,23,42,.08)!important;
}

/* 2g. Homepage pricing cards in light mode — orbit price gradient */
html[data-theme="light"] body.spx-public .spx-pcard-price strong,
html[data-spx-theme="light"] body.spx-public .spx-pcard-price strong{
  background:linear-gradient(135deg,#0369a1,#0284c7 40%,#0ea5e9)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;
}
html[data-theme="light"] body.spx-public .spx-pcard--orbit .spx-pcard-price strong,
html[data-spx-theme="light"] body.spx-public .spx-pcard--orbit .spx-pcard-price strong{
  background:linear-gradient(135deg,#b45309,#d97706 40%,#f59e0b)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
}
html[data-theme="light"] body.spx-public .spx-pcard-features li,
html[data-spx-theme="light"] body.spx-public .spx-pcard-features li{
  color:rgba(15,23,42,.68)!important;
}
html[data-theme="light"] body.spx-public .spx-pcard-desc,
html[data-spx-theme="light"] body.spx-public .spx-pcard-desc{
  color:rgba(15,23,42,.60)!important;
}
html[data-theme="light"] body.spx-public .spx-pricing-note,
html[data-spx-theme="light"] body.spx-public .spx-pricing-note{
  color:rgba(15,23,42,.40)!important;
}
html[data-theme="light"] body.spx-public .spx-pcard-notify-hint,
html[data-spx-theme="light"] body.spx-public .spx-pcard-notify-hint{
  color:rgba(15,23,42,.45)!important;
}

/* 2h. Support page light mode — route body and section surfaces */
html[data-theme="light"] body.spx-public[data-route="/support"],
html[data-spx-theme="light"] body.spx-public[data-route="/support"]{
  background-color:#f6f8fb!important;
  background-image:none!important;
  --atm-c1:rgba(148,163,184,.08)!important;
  --atm-c2:rgba(203,213,225,.06)!important;
  --atm-c3:rgba(14,165,233,.035)!important;
  --atm-ring:rgba(15,23,42,.032)!important;
}
html[data-theme="light"] body.spx-public .spx-kb-v139,
html[data-spx-theme="light"] body.spx-public .spx-kb-v139{
  background:transparent!important;
}

/* 2i. Feature detail pages light mode */
html[data-theme="light"] body.spx-public .spx-feat-why-item,
html[data-spx-theme="light"] body.spx-public .spx-feat-why-item{
  color:rgba(15,23,42,.68)!important;
}
html[data-theme="light"] body.spx-public .spx-feat-how-v138n,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-v138n{
  background:transparent!important;
}

/* 2j. Updates page light mode */
html[data-theme="light"] body.spx-public[data-route="/updates"],
html[data-theme="light"] body.spx-public[data-route^="/updates/"],
html[data-spx-theme="light"] body.spx-public[data-route="/updates"],
html[data-spx-theme="light"] body.spx-public[data-route^="/updates/"]{
  background-color:#f0f5fb!important;
  background-image:none!important;
}
html[data-theme="light"] body.spx-public .spx-updr-hero,
html[data-spx-theme="light"] body.spx-public .spx-updr-hero{
  background:transparent!important;
}
html[data-theme="light"] body.spx-public .spx-updr-card,
html[data-spx-theme="light"] body.spx-public .spx-updr-card{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(15,23,42,.08)!important;
  box-shadow:0 12px 40px rgba(15,23,42,.07)!important;
}

/* 2k. Footer in light mode */
html[data-theme="light"] body.spx-public .site-footer,
html[data-spx-theme="light"] body.spx-public .site-footer{
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(15,23,42,.10)!important;
}

/* ─── A8.138z Reduced motion ─────────────────────────────────*/
@media(prefers-reduced-motion:reduce){
  .spx-hp-bill-tab{transition:none!important;}
}

/* ============================================================
   A8.138aa — Light Mode + Legal + Cookie + Email System
   Build: A8.138aa-lightmode-legal-cookie-email-system-rework
   Date:  2026-06-01
   ============================================================ */

/* ─── Cookie consent banner ──────────────────────────────────*/
.spx-consent-banner{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  width:min(920px,calc(100vw - 24px));
  z-index:19900;
  border-radius:20px;
  border:1px solid rgba(103,232,249,.16);
  background:linear-gradient(160deg,rgba(6,14,30,.96),rgba(4,9,18,.98));
  backdrop-filter:blur(22px);
  box-shadow:0 24px 80px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.07);
  padding:18px 20px;
}
.spx-consent-banner[hidden]{display:none;}
.spx-consent-inner{
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
}
.spx-consent-text{flex:1 1 300px;min-width:0;}
.spx-consent-text strong{display:block;font-size:14px;font-weight:950;color:#eef8ff;margin-bottom:5px;}
.spx-consent-text p{margin:0;font-size:13px;color:rgba(200,230,255,.62);line-height:1.55;}
.spx-consent-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0;}
.spx-consent-btn{
  padding:8px 16px;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  font-size:12.5px;font-weight:900;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;
}
.spx-consent-btn--accept{
  background:linear-gradient(135deg,rgba(103,232,249,.18),rgba(56,189,248,.12));
  border-color:rgba(103,232,249,.28);color:#a5f3fc;
}
.spx-consent-btn--accept:hover{background:rgba(103,232,249,.22);border-color:rgba(103,232,249,.44);}
.spx-consent-btn--reject{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);color:rgba(200,230,255,.70);
}
.spx-consent-btn--reject:hover{background:rgba(255,255,255,.10);color:#e0f0ff;}
.spx-consent-btn--customize{
  background:transparent;border-color:rgba(255,255,255,.08);color:rgba(200,230,255,.50);
}
.spx-consent-btn--customize:hover{color:rgba(200,230,255,.80);}

/* Customize panel (inside banner) */
.spx-consent-panel{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.spx-consent-panel[hidden]{display:none;}
.spx-consent-panel h3{
  font-size:13px;font-weight:950;color:#e0f0ff;margin:0 0 12px;
}
.spx-consent-categories{display:grid;gap:8px;margin-bottom:14px;}
.spx-consent-cat{
  display:flex;align-items:center;gap:14px;
  padding:11px 14px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  cursor:pointer;
}
.spx-consent-cat--locked{cursor:default;}
.spx-consent-cat-info{flex:1;}
.spx-consent-cat-info strong{display:block;font-size:12.5px;font-weight:950;color:#dff0ff;}
.spx-consent-cat-info p{margin:3px 0 0;font-size:11.5px;color:rgba(200,230,255,.52);line-height:1.45;}
.spx-consent-always-on{
  font-size:10.5px;font-weight:900;color:#6ee7b7;
  background:rgba(52,211,153,.09);border:1px solid rgba(52,211,153,.18);
  padding:4px 8px;border-radius:999px;white-space:nowrap;
}
.spx-consent-toggle{
  width:36px;height:20px;border-radius:999px;
  appearance:none;-webkit-appearance:none;
  background:rgba(255,255,255,.12);
  cursor:pointer;position:relative;flex-shrink:0;
  transition:background .15s;
}
.spx-consent-toggle:checked{background:rgba(103,232,249,.40);}
.spx-consent-toggle::after{
  content:'';position:absolute;top:3px;left:3px;
  width:14px;height:14px;border-radius:50%;
  background:rgba(255,255,255,.70);
  transition:transform .15s;
}
.spx-consent-toggle:checked::after{transform:translateX(16px);background:#a5f3fc;}

/* Light mode consent banner */
html[data-theme="light"] .spx-consent-banner,
html[data-spx-theme="light"] .spx-consent-banner{
  background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(242,249,255,.95))!important;
  border-color:rgba(6,182,212,.20)!important;
  box-shadow:0 24px 70px rgba(15,23,42,.14)!important;
}
html[data-theme="light"] .spx-consent-text strong,
html[data-spx-theme="light"] .spx-consent-text strong{color:#0f172a!important;}
html[data-theme="light"] .spx-consent-text p,
html[data-spx-theme="light"] .spx-consent-text p{color:rgba(15,23,42,.58)!important;}
html[data-theme="light"] .spx-consent-btn--accept,
html[data-spx-theme="light"] .spx-consent-btn--accept{
  background:rgba(6,182,212,.10)!important;border-color:rgba(6,182,212,.28)!important;color:#0e7490!important;
}
html[data-theme="light"] .spx-consent-btn--reject,
html[data-spx-theme="light"] .spx-consent-btn--reject{
  background:rgba(15,23,42,.05)!important;border-color:rgba(15,23,42,.12)!important;color:rgba(15,23,42,.60)!important;
}
html[data-theme="light"] .spx-consent-cat-info strong,
html[data-spx-theme="light"] .spx-consent-cat-info strong{color:#0f172a!important;}
html[data-theme="light"] .spx-consent-cat,
html[data-spx-theme="light"] .spx-consent-cat{
  background:rgba(15,23,42,.03)!important;border-color:rgba(15,23,42,.09)!important;
}
html[data-theme="light"] .spx-consent-toggle,
html[data-spx-theme="light"] .spx-consent-toggle{background:rgba(15,23,42,.15)!important;}
html[data-theme="light"] .spx-consent-toggle:checked,
html[data-spx-theme="light"] .spx-consent-toggle:checked{background:rgba(6,182,212,.45)!important;}
html[data-theme="light"] .spx-consent-toggle::after,
html[data-spx-theme="light"] .spx-consent-toggle::after{background:rgba(255,255,255,.90)!important;}
html[data-theme="light"] .spx-consent-toggle:checked::after,
html[data-spx-theme="light"] .spx-consent-toggle:checked::after{background:#fff!important;}
@media(max-width:640px){
  .spx-consent-banner{bottom:0;border-radius:20px 20px 0 0;width:100%;}
  .spx-consent-inner{flex-direction:column;align-items:flex-start;}
  .spx-consent-actions{width:100%;}
  .spx-consent-btn{flex:1;text-align:center;}
}

/* ─── Support activation result ──────────────────────────────*/
.spx-activation-result{
  max-width:min(640px,calc(100vw - 32px));
  margin:clamp(64px,10vw,120px) auto;
  padding:0 16px;
}
.spx-activation-card{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(160deg,rgba(10,20,38,.88),rgba(5,10,22,.70));
  padding:clamp(28px,4.5vw,52px);
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;
}
.spx-activation-card--ok{
  border-color:rgba(52,211,153,.22)!important;
  background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(52,211,153,.12),transparent 60%),
    linear-gradient(160deg,rgba(10,22,38,.88),rgba(5,10,22,.72))!important;
}
.spx-activation-card--err{
  border-color:rgba(248,113,113,.20)!important;
  background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(248,113,113,.09),transparent 60%),
    linear-gradient(160deg,rgba(22,10,10,.88),rgba(18,5,5,.72))!important;
}
.spx-activation-icon{
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.spx-activation-card--ok .spx-activation-icon{background:rgba(52,211,153,.14);color:#6ee7b7;}
.spx-activation-card--err .spx-activation-icon{background:rgba(248,113,113,.12);color:#fca5a5;}
.spx-activation-body{display:flex;flex-direction:column;gap:10px;align-items:center;}
.spx-activation-body h1{
  font-size:clamp(24px,3.5vw,38px);font-weight:950;letter-spacing:-.04em;
  margin:0;color:#f0f8ff;
}
.spx-activation-body p{font-size:15px;color:rgba(200,230,255,.65);margin:0;line-height:1.65;max-width:460px;}
.spx-activation-ref-label{font-size:12px;color:rgba(200,230,255,.45);font-weight:800;text-transform:uppercase;letter-spacing:.08em;}
.spx-activation-ref{
  font-size:22px;font-weight:950;letter-spacing:.05em;
  color:#a5f3fc;
  background:rgba(103,232,249,.10);
  border:1px solid rgba(103,232,249,.20);
  padding:8px 18px;border-radius:12px;
}
.spx-activation-back{margin-top:8px;}
html[data-theme="light"] .spx-activation-card{
  background:rgba(255,255,255,.92)!important;border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] .spx-activation-body h1{color:#0f172a!important;}
html[data-theme="light"] .spx-activation-body p{color:rgba(15,23,42,.60)!important;}

/* ─── Legal page improvements ────────────────────────────────*/
.legal-article .legal-article-intro{
  font-size:clamp(15px,1.6vw,18px);
  color:rgba(200,230,255,.70);
  line-height:1.72;
  margin-bottom:clamp(24px,3vw,36px);
  padding-bottom:clamp(18px,2.5vw,28px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.legal-article ul{padding-left:20px;margin:10px 0 18px;display:grid;gap:7px;}
.legal-article li{color:rgba(200,230,255,.68);line-height:1.65;font-size:15px;}
html[data-theme="light"] .legal-article .legal-article-intro{
  color:rgba(15,23,42,.60)!important;border-color:rgba(15,23,42,.08)!important;
}
html[data-theme="light"] .legal-article li{color:rgba(15,23,42,.65)!important;}

/* ─── Legal page structure ───────────────────────────────────*/
.spx-legal-page{
  max-width:min(820px,calc(100vw - 32px));
  margin:0 auto;
  padding:0 clamp(14px,3vw,24px) clamp(64px,9vw,110px);
}
.spx-legal-hero{
  padding:clamp(64px,9vw,110px) 0 clamp(32px,4vw,48px);
  border-bottom:1px solid rgba(255,255,255,.07);
  margin-bottom:clamp(32px,4vw,48px);
}
.spx-legal-hero h1{
  font-size:clamp(36px,5.5vw,64px);
  font-weight:1000;letter-spacing:-.055em;
  line-height:.97;margin:14px 0 16px;color:#f0f8ff;
}
.spx-legal-hero p{
  font-size:clamp(15px,1.6vw,18px);
  color:rgba(200,230,255,.62);line-height:1.65;margin:0 0 10px;
}
.spx-legal-date{font-size:13px!important;}
.spx-legal-date a{color:rgba(103,232,249,.80);text-decoration:none;}
.spx-legal-date a:hover{color:#a5f3fc;}
.spx-legal-body h2{
  font-size:clamp(18px,2.1vw,24px);
  font-weight:950;letter-spacing:-.02em;
  margin:clamp(28px,3.5vw,40px) 0 10px;
  color:#e0f0ff;
}
.spx-legal-body p{
  font-size:15px;line-height:1.75;
  color:rgba(200,230,255,.68);margin:0 0 14px;
}
.spx-legal-body a{color:rgba(103,232,249,.85);text-decoration:none;}
.spx-legal-body a:hover{color:#a5f3fc;text-decoration:underline;}
.spx-legal-body ul{
  padding-left:20px;margin:8px 0 16px;
  display:grid;gap:8px;
}
.spx-legal-body li{
  font-size:14.5px;line-height:1.68;
  color:rgba(200,230,255,.64);
}
.spx-legal-body li strong{color:rgba(200,230,255,.85);}
.legal-article-intro{
  font-size:clamp(15px,1.6vw,18px)!important;
  color:rgba(200,230,255,.72)!important;
  line-height:1.72!important;
  margin-bottom:clamp(22px,3vw,32px)!important;
  padding-bottom:clamp(18px,2.5vw,28px)!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
}

/* Legal light mode */
html[data-theme="light"] .spx-legal-hero,
html[data-spx-theme="light"] .spx-legal-hero{border-color:rgba(15,23,42,.08)!important;}
html[data-theme="light"] .spx-legal-hero h1,
html[data-spx-theme="light"] .spx-legal-hero h1{color:#0f172a!important;}
html[data-theme="light"] .spx-legal-hero p,
html[data-spx-theme="light"] .spx-legal-hero p{color:rgba(15,23,42,.58)!important;}
html[data-theme="light"] .spx-legal-body h2,
html[data-spx-theme="light"] .spx-legal-body h2{color:#0f172a!important;}
html[data-theme="light"] .spx-legal-body p,
html[data-spx-theme="light"] .spx-legal-body p{color:rgba(15,23,42,.65)!important;}
html[data-theme="light"] .spx-legal-body li,
html[data-spx-theme="light"] .spx-legal-body li{color:rgba(15,23,42,.62)!important;}
html[data-theme="light"] .spx-legal-body a,
html[data-spx-theme="light"] .spx-legal-body a{color:#0e7490!important;}
html[data-theme="light"] .legal-article-intro,
html[data-spx-theme="light"] .legal-article-intro{
  color:rgba(15,23,42,.65)!important;
  border-color:rgba(15,23,42,.08)!important;
}
html[data-theme="light"] .spx-legal-date a,
html[data-spx-theme="light"] .spx-legal-date a{color:#0e7490!important;}

/* ─── A8.138aa Reduced motion ────────────────────────────────*/
@media(prefers-reduced-motion:reduce){
  .spx-consent-btn,.spx-consent-toggle,.spx-consent-toggle::after{transition:none!important;}
}

/* ============================================================
   A8.138ab — Dashboard light mode + sidebar toggle + mobile billing fix
   Build: A8.138ab-dashboard-lightmode-mobile-public-hotfix
   Date:  2026-06-02
   ============================================================ */

/* Billing tab padding reduction on very narrow screens.
   At ≤480px the pricing card is ~232px inner width — tighten tab
   padding so all three tabs ("Monthly / 6 months / Annual") fit
   without being clipped by .spx-pcard{overflow:hidden}. */
@media(max-width:480px){
  .spx-hp-bill-tab{padding:5px 8px!important;font-size:11px!important;}
  .spx-hp-bill-nav{gap:2px!important;}
}

/* ============================================================
   A8.138ac — Shape the page overlap fix
   Root cause: html.spx-hero-story-active is added immediately
   by JS (spixor-public.js:5004). Without initial CSS variable
   values, opacity:var(--spx-how-underlay-opacity) resolves to
   the CSS initial value of 1, making the why-section ghost
   visible (18% at head/track level) overlapping the hero.
   Fix: declare initial values so the section starts invisible
   and the JS scroll handler reveals it progressively.
   Mobile (≤980px) resets these via the existing inline block.
   ============================================================ */
html.spx-hero-story-active{
  --spx-how-underlay-opacity:0;
  --spx-how-underlay-scale:0.97;
  --spx-how-underlay-blur:6px;
}

/* ============================================================
   A8.138ad — Mobile How section: final override.
   Root cause: A8.58ZZD (line ~16896) appends a non-media-query
   rule `position:sticky; grid-template-columns:minmax(430px,…)`
   which comes AFTER the mobile breakpoint fix at line ~16875,
   overriding it on all viewports.
   This block reinstates the correct single-column relative
   layout for ≤980px. Specificity matches A8.58ZZD; later
   document order wins.
   Desktop (>980px) is not affected.
   ============================================================ */
@media(max-width:980px){
  /* Unsticky the scroll container and collapse to single column */
  html .spx-why-section.spx-why-v52 .spx-why52-sticky,
  html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
  html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
    position:relative !important;
    display:block !important;
    min-height:0 !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    padding:36px 0 !important;
    top:auto !important;
  }
  /* Let track height collapse naturally */
  html .spx-why-section.spx-why-v52 .spx-why52-track{
    height:auto !important;
    min-height:auto !important;
  }
  /* Add top breathing room below hero.
     margin-top MUST be 0 here — multiple non-media-query passes
     (17252, 17259, 17684, 17797) set margin-top:-100/135svh
     which pulls the How section over the hero on mobile.
     Later document order wins for equal specificity+!important. */
  html .spx-why-section.spx-why-v52,
  html.spx-hero-story-active .spx-why-section.spx-why-v52{
    margin-top:0 !important;
    padding-top:clamp(48px,6vw,72px) !important;
    overflow:hidden !important;
  }
  /* Show all steps as a vertical list */
  html .spx-why-section.spx-why-v52 .spx-why52-copy{
    min-height:0 !important;
    display:block !important;
    height:auto !important;
    overflow:visible !important;
  }
  html .spx-why-section.spx-why-v52 .why52-step{
    position:relative !important;
    inset:auto !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    margin-bottom:16px !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
  }
  /* Hide right-side visual stage on mobile — too large for narrow screens */
  html .spx-why-section.spx-why-v52 .spx-why52-stage,
  html .spx-why-section.spx-why-v52 .why52-visuals,
  html .spx-why-section.spx-why-v52 .why52-visual,
  html .spx-why-section.spx-why-v52 .why52-network,
  html .spx-why-section.spx-why-v52 .why52-float{
    display:none !important;
  }
  /* Step nav not needed when all steps are visible */
  html .spx-why-section.spx-why-v52 .why52-step-nav{
    display:none !important;
  }
  /* Restore the shell head on mobile */
  html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{
    display:block !important;
  }
  html .spx-why-section.spx-why-v52 .spx-why52-story-head{
    display:block !important;
  }
}

/* ============================================================
   A8.138ae — Mobile How: higher-specificity override.
   Uses [data-how-v63] attribute selector → specificity (0,4,1)
   vs A8.58ZZD at (0,3,1). Wins regardless of document order.
   JS (initHowA113) sets setImportant on individual steps/visuals
   but NOT on the track or sticky container — CSS wins there.
   The stage container (spx-why52-stage) is hidden via display:none;
   JS only sets opacity/visibility inline, not display.
   ============================================================ */
@media(max-width:980px){
  /* Sticky → relative single column (beats A8.58ZZD at (0,3,1)) */
  html .spx-why-section.spx-why-v52[data-how-v63] .spx-why52-sticky,
  html .spx-why-section.spx-why-v52[data-how-v63] .spx-why52-sticky.is-spx-hard-pinned,
  html .spx-why-section.spx-why-v52[data-how-v63] .spx-why52-sticky.is-spx-pin-after{
    position:relative !important;
    display:block !important;
    min-height:0 !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    padding:28px 0 !important;
    top:auto !important;
    overflow:hidden !important;
  }
  /* Collapse the scroll track */
  html .spx-why-section.spx-why-v52[data-how-v63] .spx-why52-track{
    height:auto !important;
    min-height:auto !important;
    overflow:hidden !important;
  }
  /* Section top padding and margin reset — prevents cramming against hero */
  html .spx-why-section.spx-why-v52[data-how-v63],
  html.spx-hero-story-active .spx-why-section.spx-why-v52[data-how-v63]{
    margin-top:0 !important;
    padding-top:clamp(40px,5vw,60px) !important;
    overflow:hidden !important;
  }
  /* Steps — show all vertically (JS also ensures opacity:1) */
  html .spx-why-section.spx-why-v52[data-how-v63] .spx-why52-copy{
    min-height:0 !important;
    display:block !important;
    height:auto !important;
    overflow:visible !important;
    width:100% !important;
  }
  html .spx-why-section.spx-why-v52[data-how-v63] .why52-step{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin-bottom:12px !important;
    pointer-events:auto !important;
  }
  /* Hide visual stage (display — JS doesn't set this inline) */
  html .spx-why-section.spx-why-v52[data-how-v63] .spx-why52-stage,
  html .spx-why-section.spx-why-v52[data-how-v63] .why52-visuals,
  html .spx-why-section.spx-why-v52[data-how-v63] .why52-network,
  html .spx-why-section.spx-why-v52[data-how-v63] .why52-float{
    display:none !important;
  }
  /* Hide step nav (all steps visible, nav redundant) */
  html .spx-why-section.spx-why-v52[data-how-v63] .why52-step-nav{
    display:none !important;
  }
  /* Restore headings */
  html .spx-why-section.spx-why-v52[data-how-v63] > .spx-why52-shell > .spx-why52-head,
  html .spx-why-section.spx-why-v52[data-how-v63] .spx-why52-story-head{
    display:block !important;
  }
}

/* A8.140b: feature-interactive section light-mode contrast fix */
html[data-theme="light"] body.spx-public .spx-fint-v138h > .spx-fint-copy > p,
html[data-spx-theme="light"] body.spx-public .spx-fint-v138h > .spx-fint-copy > p,
html[data-theme="light"] body.spx-public .spx-fint-copy > p,
html[data-spx-theme="light"] body.spx-public .spx-fint-copy > p{ color:rgba(15,23,42,.70) !important; }
html[data-theme="light"] body.spx-public .spx-fint-tab,
html[data-spx-theme="light"] body.spx-public .spx-fint-tab{ background:rgba(255,255,255,.82) !important; border-color:rgba(15,23,42,.12) !important; color:#1e293b !important; }
html[data-theme="light"] body.spx-public .spx-fint-tab:hover,
html[data-spx-theme="light"] body.spx-public .spx-fint-tab:hover{ background:rgba(14,165,233,.08) !important; color:#0284c7 !important; }
html[data-theme="light"] body.spx-public .spx-fint-tab-desc,
html[data-spx-theme="light"] body.spx-public .spx-fint-tab-desc{ color:rgba(15,23,42,.65) !important; }
html[data-theme="light"] body.spx-public .spx-fint-step,
html[data-spx-theme="light"] body.spx-public .spx-fint-step{ background:rgba(255,255,255,.82) !important; border-color:rgba(15,23,42,.12) !important; color:#1e293b !important; }
html[data-theme="light"] body.spx-public .spx-fint-step-num,
html[data-spx-theme="light"] body.spx-public .spx-fint-step-num{ background:rgba(15,23,42,.08) !important; color:#1e293b !important; }
html[data-theme="light"] body.spx-public .spx-fint-step-sep,
html[data-spx-theme="light"] body.spx-public .spx-fint-step-sep{ background:rgba(15,23,42,.16) !important; }
html[data-theme="light"] body.spx-public .spx-fint-stage,
html[data-spx-theme="light"] body.spx-public .spx-fint-stage{ background:rgba(15,23,42,.04) !important; border-color:rgba(15,23,42,.10) !important; }
html[data-theme="light"] body.spx-public .spx-fint-bar,
html[data-spx-theme="light"] body.spx-public .spx-fint-bar{ background:rgba(255,255,255,.80) !important; border-bottom-color:rgba(15,23,42,.09) !important; }
html[data-theme="light"] body.spx-public .spx-fint-bar-status,
html[data-spx-theme="light"] body.spx-public .spx-fint-bar-status{ color:rgba(15,23,42,.45) !important; }
html[data-theme="light"] body.spx-public .spx-fint-devchip,
html[data-spx-theme="light"] body.spx-public .spx-fint-devchip{ background:rgba(15,23,42,.06) !important; color:rgba(15,23,42,.55) !important; }
html[data-theme="light"] body.spx-public .spx-fint-mock-h1,
html[data-spx-theme="light"] body.spx-public .spx-fint-mock-h1{ background:rgba(15,23,42,.14) !important; }
html[data-theme="light"] body.spx-public .spx-fint-mock-p,
html[data-spx-theme="light"] body.spx-public .spx-fint-mock-p{ background:rgba(15,23,42,.07) !important; }
html[data-theme="light"] body.spx-public .spx-fint-builder-body,
html[data-spx-theme="light"] body.spx-public .spx-fint-builder-body{ background:rgba(255,255,255,.60) !important; }

/* ============================================================
   A8.140e — Feature detail pages: v138n missing light-mode
   overrides. The v127 block at line ~33358 covers v127 classes;
   this block covers the v138n rewrite classes from A8.138g.
   Uses both data-theme and data-spx-theme for parity.
   ============================================================ */

/* Breadcrumb text legible in light mode */
html[data-theme="light"] body.spx-public[data-route^="/features/"] .spx-feat-breadcrumb-v138n,
html[data-theme="light"] body.spx-public[data-route^="/features/"] .spx-feat-breadcrumb-v138j,
html[data-spx-theme="light"] body.spx-public[data-route^="/features/"] .spx-feat-breadcrumb-v138n,
html[data-spx-theme="light"] body.spx-public[data-route^="/features/"] .spx-feat-breadcrumb-v138j{
  color:rgba(15,23,42,.52) !important;
}
html[data-theme="light"] body.spx-public .spx-feat-breadcrumb-v138n a,
html[data-theme="light"] body.spx-public .spx-feat-breadcrumb-v138j a,
html[data-spx-theme="light"] body.spx-public .spx-feat-breadcrumb-v138n a,
html[data-spx-theme="light"] body.spx-public .spx-feat-breadcrumb-v138j a{
  border-color:rgba(15,23,42,.10) !important;
  background:rgba(255,255,255,.55) !important;
  color:rgba(15,23,42,.60) !important;
}
html[data-theme="light"] body.spx-public .spx-feat-breadcrumb-v138n a:hover,
html[data-theme="light"] body.spx-public .spx-feat-breadcrumb-v138j a:hover,
html[data-spx-theme="light"] body.spx-public .spx-feat-breadcrumb-v138n a:hover,
html[data-spx-theme="light"] body.spx-public .spx-feat-breadcrumb-v138j a:hover{
  border-color:rgba(14,165,233,.22) !important;
  background:rgba(14,165,233,.07) !important;
  color:#0369a1 !important;
}

/* Proof stat items */
html[data-theme="light"] body.spx-public .spx-feat-hero-proof-item,
html[data-spx-theme="light"] body.spx-public .spx-feat-hero-proof-item{
  background:rgba(255,255,255,.70) !important;
  border-color:rgba(15,23,42,.10) !important;
}
html[data-theme="light"] body.spx-public .spx-feat-hero-proof-item small,
html[data-spx-theme="light"] body.spx-public .spx-feat-hero-proof-item small{
  color:rgba(15,23,42,.52) !important;
}

/* Why items (checklist rows) */
html[data-theme="light"] body.spx-public .spx-feat-why-item,
html[data-spx-theme="light"] body.spx-public .spx-feat-why-item{
  background:rgba(255,255,255,.68) !important;
  border-color:rgba(15,23,42,.09) !important;
}
html[data-theme="light"] body.spx-public .spx-feat-why-item span,
html[data-spx-theme="light"] body.spx-public .spx-feat-why-item span{
  color:rgba(15,23,42,.58) !important;
}

/* How section head + CTA copy headings */
html[data-theme="light"] body.spx-public .spx-feat-how-head h2,
html[data-theme="light"] body.spx-public .spx-feat-faq-head h2,
html[data-theme="light"] body.spx-public .spx-feat-cta-copy h2,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-head h2,
html[data-spx-theme="light"] body.spx-public .spx-feat-faq-head h2,
html[data-spx-theme="light"] body.spx-public .spx-feat-cta-copy h2{ color:#0f172a !important; }

/* Related feature chips */
html[data-theme="light"] body.spx-public .spx-feat-related-item,
html[data-spx-theme="light"] body.spx-public .spx-feat-related-item{
  background:rgba(255,255,255,.70) !important;
  border-color:rgba(15,23,42,.12) !important;
  color:rgba(15,23,42,.68) !important;
}
html[data-theme="light"] body.spx-public .spx-feat-related-item:hover,
html[data-spx-theme="light"] body.spx-public .spx-feat-related-item:hover{
  border-color:rgba(14,165,233,.24) !important;
  color:#0284c7 !important;
  background:rgba(14,165,233,.07) !important;
}

/* Related head text */
html[data-theme="light"] body.spx-public .spx-feat-related-all,
html[data-spx-theme="light"] body.spx-public .spx-feat-related-all{
  color:rgba(15,23,42,.55) !important;
}

/* How step number accent stays visible */
html[data-theme="light"] body.spx-public .spx-feat-how-num,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-num{ color:#0284c7 !important; }

/* Hero screen frame — keep dark so screenshot looks like a browser chrome */
html[data-theme="light"] body.spx-public .spx-feat-hero-screen-frame,
html[data-spx-theme="light"] body.spx-public .spx-feat-hero-screen-frame{
  background:#0c1122 !important;
  border-color:rgba(15,23,42,.18) !important;
  box-shadow:0 24px 72px rgba(15,23,42,.16) !important;
}

/* Status chips on feature hero */
html[data-theme="light"] body.spx-public .spx-feat-status-chip,
html[data-spx-theme="light"] body.spx-public .spx-feat-status-chip{
  background:rgba(255,255,255,.70) !important;
  border-color:rgba(15,23,42,.12) !important;
  color:rgba(15,23,42,.65) !important;
}

/* Badge chips on hero kicker */
html[data-theme="light"] body.spx-public .spx-feat-badge-inline,
html[data-spx-theme="light"] body.spx-public .spx-feat-badge-inline{
  color:rgba(15,23,42,.55) !important;
}

/* ============================================================
   A8.140e — Public support page: KB card grid light-mode.
   The .spx-kb-card has dark !important backgrounds that must be
   overridden for light mode. Both attribute variants covered.
   ============================================================ */

html[data-theme="light"] body.spx-public .spx-kb-card,
html[data-spx-theme="light"] body.spx-public .spx-kb-card{
  background:linear-gradient(150deg,rgba(255,255,255,.90),rgba(237,249,255,.76)) !important;
  border-color:rgba(15,23,42,.09) !important;
  box-shadow:0 8px 28px rgba(15,23,42,.06) !important;
}
html[data-theme="light"] body.spx-public .spx-kb-card:hover,
html[data-spx-theme="light"] body.spx-public .spx-kb-card:hover{
  border-color:rgba(14,165,233,.22) !important;
  background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(224,244,255,.84)) !important;
  box-shadow:0 16px 44px rgba(14,165,233,.10),0 4px 14px rgba(15,23,42,.06) !important;
}
html[data-theme="light"] body.spx-public .spx-kb-card h3,
html[data-spx-theme="light"] body.spx-public .spx-kb-card h3{ color:#0f172a !important; }
html[data-theme="light"] body.spx-public .spx-kb-card p,
html[data-spx-theme="light"] body.spx-public .spx-kb-card p{ color:rgba(15,23,42,.62) !important; }

/* KB filter chips */
html[data-theme="light"] body.spx-public .spx-kb-filter,
html[data-spx-theme="light"] body.spx-public .spx-kb-filter{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(15,23,42,.12) !important;
  color:rgba(15,23,42,.62) !important;
}
html[data-theme="light"] body.spx-public .spx-kb-filter:hover,
html[data-spx-theme="light"] body.spx-public .spx-kb-filter:hover{
  background:rgba(14,165,233,.07) !important;
  border-color:rgba(14,165,233,.20) !important;
  color:#0284c7 !important;
}
html[data-theme="light"] body.spx-public .spx-kb-filter.is-active,
html[data-spx-theme="light"] body.spx-public .spx-kb-filter.is-active{
  background:rgba(14,165,233,.10) !important;
  border-color:rgba(14,165,233,.28) !important;
  color:#0284c7 !important;
}

/* KB section heading */
html[data-theme="light"] body.spx-public .spx-kb-v139-head h2,
html[data-spx-theme="light"] body.spx-public .spx-kb-v139-head h2{ color:#0f172a !important; }

/* Support v139 quicklink chips */
html[data-theme="light"] body.spx-public .spx-support-v139-quicklinks a,
html[data-spx-theme="light"] body.spx-public .spx-support-v139-quicklinks a{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(15,23,42,.12) !important;
  color:rgba(15,23,42,.65) !important;
}
html[data-theme="light"] body.spx-public .spx-support-v139-quicklinks a:hover,
html[data-spx-theme="light"] body.spx-public .spx-support-v139-quicklinks a:hover{
  background:rgba(14,165,233,.07) !important;
  border-color:rgba(14,165,233,.20) !important;
}

/* ============================================================
   A8.140f — Feature detail pages: missing light-mode overrides
   for copy/muted text elements not covered in A8.140e.
   Root cause: hardcoded rgba(235,246,255,...) colors on elements
   that use var(--secondary) analogues but in dark-mode only.
   ============================================================ */

/* CTA section body copy */
html[data-theme="light"] body.spx-public .spx-feat-cta-copy p,
html[data-spx-theme="light"] body.spx-public .spx-feat-cta-copy p{
  color:rgba(15,23,42,.68) !important;
}

/* How step body copy already covered but also add h3 for safety */
html[data-theme="light"] body.spx-public .spx-feat-how-step h3,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-step h3{
  color:#0f172a !important;
}

/* Related head "Browse all" link */
html[data-theme="light"] body.spx-public .spx-feat-related-head h2,
html[data-spx-theme="light"] body.spx-public .spx-feat-related-head h2{
  color:#0f172a !important;
}

/* Feature hero h1 explicit dark in light mode */
html[data-theme="light"] body.spx-public .spx-feat-hero-v138n h1,
html[data-spx-theme="light"] body.spx-public .spx-feat-hero-v138n h1{
  color:#0f172a !important;
}

/* Kicker status chip text already covered but ensure fa-icon color */
html[data-theme="light"] body.spx-public .spx-feat-hero-kicker,
html[data-spx-theme="light"] body.spx-public .spx-feat-hero-kicker{
  color:rgba(15,23,42,.60) !important;
}

/* ============================================================
   A8.140f — Public support page: missing copy text overrides.
   The KB head subtitle, search area label, and placeholder
   use var(--secondary) / var(--muted) which correctly change
   in light mode. But explicit hardcoded colors on older classes
   (spx-support-v139-hero, quicklinks text) need targeted fixes.
   ============================================================ */

/* Support page hero section copy text */
html[data-theme="light"] body.spx-public .spx-support-v139-hero p,
html[data-spx-theme="light"] body.spx-public .spx-support-v139-hero p{
  color:rgba(15,23,42,.66) !important;
}
html[data-theme="light"] body.spx-public .spx-support-v139-hero h1,
html[data-spx-theme="light"] body.spx-public .spx-support-v139-hero h1{
  color:#0f172a !important;
}

/* KB section category labels and subtext */
html[data-theme="light"] body.spx-public .spx-kb-card-cat,
html[data-spx-theme="light"] body.spx-public .spx-kb-card-cat{
  color:#0284c7 !important;
}
html[data-theme="light"] body.spx-public .spx-kb-card-arrow,
html[data-spx-theme="light"] body.spx-public .spx-kb-card-arrow{
  color:#0369a1 !important;
  opacity:0.72 !important;
}

/* Support form v139 heading/copy */
html[data-theme="light"] body.spx-public .spx-support-v139-form-head h2,
html[data-spx-theme="light"] body.spx-public .spx-support-v139-form-head h2{
  color:#0f172a !important;
}
html[data-theme="light"] body.spx-public .spx-support-v139-form-head p,
html[data-spx-theme="light"] body.spx-public .spx-support-v139-form-head p{
  color:rgba(15,23,42,.66) !important;
}

/* KB empty state */
html[data-theme="light"] body.spx-public .spx-kb-v139-empty,
html[data-spx-theme="light"] body.spx-public .spx-kb-v139-empty{
  color:rgba(15,23,42,.52) !important;
}

/* Support v139 placeholder/lead text */
html[data-theme="light"] body.spx-public .spx-support-v139-placeholder-inner p,
html[data-spx-theme="light"] body.spx-public .spx-support-v139-placeholder-inner p{
  color:rgba(15,23,42,.55) !important;
}

/* ================================================================
   A8.140g — PHASE 3: Feature detail page copy/body contrast.
   Fixes weak muted text and paragraph contrast on /features/* pages.
   ================================================================ */
html[data-theme="light"] body.spx-public .spx-feature-content p,
html[data-spx-theme="light"] body.spx-public .spx-feature-content p{
  color:rgba(15,23,42,.78) !important;
}
html[data-theme="light"] body.spx-public .spx-feature-content li,
html[data-spx-theme="light"] body.spx-public .spx-feature-content li{
  color:rgba(15,23,42,.76) !important;
}
html[data-theme="light"] body.spx-public .spx-feature-content h2,
html[data-theme="light"] body.spx-public .spx-feature-content h3,
html[data-theme="light"] body.spx-public .spx-feature-content h4,
html[data-spx-theme="light"] body.spx-public .spx-feature-content h2,
html[data-spx-theme="light"] body.spx-public .spx-feature-content h3,
html[data-spx-theme="light"] body.spx-public .spx-feature-content h4{
  color:#0f172a !important;
}
/* Feature card/story body paragraphs */
html[data-theme="light"] body.spx-public .spx-feature-story-body p,
html[data-spx-theme="light"] body.spx-public .spx-feature-story-body p,
html[data-theme="light"] body.spx-public .spx-feature-story-body li,
html[data-spx-theme="light"] body.spx-public .spx-feature-story-body li{
  color:rgba(15,23,42,.74) !important;
}
/* Feature proof / stat copy */
html[data-theme="light"] body.spx-public .spx-feature-proof-item,
html[data-spx-theme="light"] body.spx-public .spx-feature-proof-item{
  color:rgba(15,23,42,.72) !important;
}
/* Feature detail card description */
html[data-theme="light"] body.spx-public .spx-feature-detail-card,
html[data-spx-theme="light"] body.spx-public .spx-feature-detail-card{
  color:#0f172a !important;
}
/* Feature mock/stage descriptive text */
html[data-theme="light"] body.spx-public .spx-feature-mock-label,
html[data-theme="light"] body.spx-public .spx-feature-stage-label,
html[data-spx-theme="light"] body.spx-public .spx-feature-mock-label,
html[data-spx-theme="light"] body.spx-public .spx-feature-stage-label{
  color:rgba(15,23,42,.65) !important;
}
/* Feature page muted/secondary text */
html[data-theme="light"] body.spx-public .spx-feature-content .spx-muted,
html[data-theme="light"] body.spx-public .spx-feature-content .spx-secondary,
html[data-theme="light"] body.spx-public .spx-feature-content small,
html[data-spx-theme="light"] body.spx-public .spx-feature-content .spx-muted,
html[data-spx-theme="light"] body.spx-public .spx-feature-content .spx-secondary,
html[data-spx-theme="light"] body.spx-public .spx-feature-content small{
  color:rgba(15,23,42,.58) !important;
}
/* Related links copy */
html[data-theme="light"] body.spx-public .spx-related-links p,
html[data-spx-theme="light"] body.spx-public .spx-related-links p{
  color:rgba(15,23,42,.66) !important;
}
/* Feature CTA subcopy */
html[data-theme="light"] body.spx-public .spx-feature-cta-strip-v127 p,
html[data-spx-theme="light"] body.spx-public .spx-feature-cta-strip-v127 p{
  color:rgba(15,23,42,.68) !important;
}
/* Feature section head text */
html[data-theme="light"] body.spx-public .spx-feature-hero p,
html[data-spx-theme="light"] body.spx-public .spx-feature-hero p{
  color:rgba(15,23,42,.72) !important;
}

/* ================================================================
   A8.140g — PHASE 4: Public Support copy/body contrast.
   Fixes weak muted/helper text on /support page in light mode.
   ================================================================ */
/* Hero and intro copy */
html[data-theme="light"] body.spx-public .spx-support-hero-copy p,
html[data-spx-theme="light"] body.spx-public .spx-support-hero-copy p,
html[data-theme="light"] body.spx-public .spx-support-hero-copy small,
html[data-spx-theme="light"] body.spx-public .spx-support-hero-copy small{
  color:rgba(15,23,42,.72) !important;
}
/* Stats / metrics labels */
html[data-theme="light"] body.spx-public .spx-support-stats-v127 small,
html[data-spx-theme="light"] body.spx-public .spx-support-stats-v127 small{
  color:rgba(15,23,42,.58) !important;
}
/* Category card descriptions */
html[data-theme="light"] body.spx-public .spx-support-cat-v127 p,
html[data-spx-theme="light"] body.spx-public .spx-support-cat-v127 p{
  color:rgba(15,23,42,.62) !important;
}
/* Search placeholder */
html[data-theme="light"] body.spx-public .spx-support-v139-search-input::placeholder,
html[data-spx-theme="light"] body.spx-public .spx-support-v139-search-input::placeholder{
  color:rgba(15,23,42,.38) !important;
}
/* KB card copy */
html[data-theme="light"] body.spx-public .spx-kb-v139-card p,
html[data-spx-theme="light"] body.spx-public .spx-kb-v139-card p,
html[data-theme="light"] body.spx-public .spx-kbCard .spx-kbCopy,
html[data-spx-theme="light"] body.spx-public .spx-kbCard .spx-kbCopy{
  color:rgba(15,23,42,.66) !important;
}
/* Support form labels / helper text */
html[data-theme="light"] body.spx-public .spx-support-form-header p,
html[data-spx-theme="light"] body.spx-public .spx-support-form-header p{
  color:rgba(15,23,42,.68) !important;
}
html[data-theme="light"] body.spx-public .spx-public-support-form-v62 label,
html[data-spx-theme="light"] body.spx-public .spx-public-support-form-v62 label{
  color:rgba(15,23,42,.74) !important;
}
html[data-theme="light"] body.spx-public .spx-public-support-form-v62 small,
html[data-spx-theme="light"] body.spx-public .spx-public-support-form-v62 small{
  color:rgba(15,23,42,.55) !important;
}
/* Support route-grid card copy */
html[data-theme="light"] body.spx-public .spx-support-route-grid p,
html[data-spx-theme="light"] body.spx-public .spx-support-route-grid p{
  color:rgba(15,23,42,.66) !important;
}
html[data-theme="light"] body.spx-public .spx-support-route-grid h3,
html[data-spx-theme="light"] body.spx-public .spx-support-route-grid h3{
  color:#0f172a !important;
}
/* Support status card copy */
html[data-theme="light"] body.spx-public .spx-support-status-card p,
html[data-spx-theme="light"] body.spx-public .spx-support-status-card p,
html[data-theme="light"] body.spx-public .spx-support-status-card li,
html[data-spx-theme="light"] body.spx-public .spx-support-status-card li{
  color:rgba(15,23,42,.70) !important;
}
/* Result / search result copy */
html[data-theme="light"] body.spx-public .spx-kb-v139-result-item p,
html[data-spx-theme="light"] body.spx-public .spx-kb-v139-result-item p{
  color:rgba(15,23,42,.64) !important;
}
/* Support chips/badges muted text */
html[data-theme="light"] body.spx-public .spx-support-v139-chip,
html[data-spx-theme="light"] body.spx-public .spx-support-v139-chip{
  color:rgba(15,23,42,.65) !important;
}

/* ============================================================
   A8.140i — Targeted contrast + mobile fix pass
   ============================================================ */

/* === Phase 3: Feature detail page text
   Root cause: A8.138p Phase 6 block (lines 38870-38897) has !important dark text
   with NO light-mode guard. Earlier light-mode rules at lines 38547-38556 have
   no !important so they LOSE. Fix: add light-mode rules with higher specificity
   (0,3,1) + !important beats the dark rules at (0,2,1) + !important. */
html[data-theme="light"] body.spx-public .spx-feat-hero-lead,
html[data-spx-theme="light"] body.spx-public .spx-feat-hero-lead{
  color:rgba(15,23,42,.72) !important;
}
html[data-theme="light"] body.spx-public .spx-feat-why-copy p,
html[data-spx-theme="light"] body.spx-public .spx-feat-why-copy p{
  color:rgba(15,23,42,.68) !important;
}
html[data-theme="light"] body.spx-public .spx-feat-how-step-body h3,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-step-body h3{
  color:#0f172a !important;
}
html[data-theme="light"] body.spx-public .spx-feat-how-step-body p,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-step-body p{
  color:rgba(15,23,42,.65) !important;
}
html[data-theme="light"] body.spx-public .spx-feat-why-item strong,
html[data-spx-theme="light"] body.spx-public .spx-feat-why-item strong{
  color:#0f172a !important;
}
html[data-theme="light"] body.spx-public .spx-feat-why-item span,
html[data-spx-theme="light"] body.spx-public .spx-feat-why-item span{
  color:rgba(15,23,42,.60) !important;
}
html[data-theme="light"] body.spx-public .spx-feat-hero-proof-item small,
html[data-spx-theme="light"] body.spx-public .spx-feat-hero-proof-item small{
  color:rgba(15,23,42,.55) !important;
}
html[data-theme="light"] body.spx-public .spx-feat-how-step,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-step{
  background:rgba(15,23,42,.03) !important;
  border-color:rgba(15,23,42,.09) !important;
}
html[data-theme="light"] body.spx-public .spx-feat-how-step:hover,
html[data-spx-theme="light"] body.spx-public .spx-feat-how-step:hover{
  border-color:rgba(14,165,233,.22) !important;
}
html[data-theme="light"] body.spx-public .spx-feat-why-item,
html[data-spx-theme="light"] body.spx-public .spx-feat-why-item{
  background:rgba(15,23,42,.03) !important;
  border-color:rgba(15,23,42,.08) !important;
}
html[data-theme="light"] body.spx-public .spx-feat-why-item:hover,
html[data-spx-theme="light"] body.spx-public .spx-feat-why-item:hover{
  background:rgba(14,165,233,.04) !important;
  border-color:rgba(14,165,233,.18) !important;
}

/* === Phase 4a: Ticket modal light mode (public support /support)
   Root cause: all .spx-ticket-modal-v138h-* classes have hardcoded dark colors,
   zero light-mode overrides anywhere. */
html[data-theme="light"] body.spx-public .spx-ticket-modal-v138h-dialog,
html[data-spx-theme="light"] body.spx-public .spx-ticket-modal-v138h-dialog{
  background:#ffffff !important;
  border-color:rgba(15,23,42,.10) !important;
  box-shadow:0 24px 60px rgba(15,23,42,.16) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-modal-v138h-header,
html[data-spx-theme="light"] body.spx-public .spx-ticket-modal-v138h-header{
  border-bottom-color:rgba(15,23,42,.08) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-modal-v138h-icon,
html[data-spx-theme="light"] body.spx-public .spx-ticket-modal-v138h-icon{
  background:rgba(15,23,42,.06) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-modal-v138h-icon svg,
html[data-spx-theme="light"] body.spx-public .spx-ticket-modal-v138h-icon svg{
  color:rgba(15,23,42,.60) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-modal-v138h-eyebrow,
html[data-spx-theme="light"] body.spx-public .spx-ticket-modal-v138h-eyebrow{
  color:rgba(15,23,42,.50) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-modal-v138h-header h3,
html[data-spx-theme="light"] body.spx-public .spx-ticket-modal-v138h-header h3{
  color:#0f172a !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-modal-v138h-close,
html[data-spx-theme="light"] body.spx-public .spx-ticket-modal-v138h-close{
  color:rgba(15,23,42,.45) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-modal-v138h-close:hover,
html[data-spx-theme="light"] body.spx-public .spx-ticket-modal-v138h-close:hover{
  background:rgba(15,23,42,.06) !important;
  color:#0f172a !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-modal-v138h-steps,
html[data-spx-theme="light"] body.spx-public .spx-ticket-modal-v138h-steps{
  border-bottom-color:rgba(15,23,42,.07) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-step,
html[data-spx-theme="light"] body.spx-public .spx-ticket-step{
  color:rgba(15,23,42,.42) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-step span,
html[data-spx-theme="light"] body.spx-public .spx-ticket-step span{
  background:rgba(15,23,42,.07) !important;
  color:rgba(15,23,42,.55) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-step.is-active,
html[data-spx-theme="light"] body.spx-public .spx-ticket-step.is-active{
  color:#0f172a !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-step.is-active span,
html[data-spx-theme="light"] body.spx-public .spx-ticket-step.is-active span{
  background:rgba(37,99,235,.12) !important;
  color:#1d4ed8 !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-step.is-done span,
html[data-spx-theme="light"] body.spx-public .spx-ticket-step.is-done span{
  background:rgba(22,163,74,.12) !important;
  color:#15803d !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-step-sep,
html[data-spx-theme="light"] body.spx-public .spx-ticket-step-sep{
  background:rgba(15,23,42,.08) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-step-hint,
html[data-spx-theme="light"] body.spx-public .spx-ticket-step-hint{
  color:rgba(15,23,42,.55) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-topic,
html[data-spx-theme="light"] body.spx-public .spx-ticket-topic{
  background:rgba(15,23,42,.04) !important;
  border-color:rgba(15,23,42,.10) !important;
  color:rgba(15,23,42,.65) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-topic:hover,
html[data-spx-theme="light"] body.spx-public .spx-ticket-topic:hover{
  background:rgba(14,165,233,.06) !important;
  border-color:rgba(14,165,233,.18) !important;
  color:#0369a1 !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-topic.is-active,
html[data-spx-theme="light"] body.spx-public .spx-ticket-topic.is-active{
  background:rgba(37,99,235,.08) !important;
  border-color:rgba(37,99,235,.22) !important;
  color:#1d4ed8 !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-label,
html[data-spx-theme="light"] body.spx-public .spx-ticket-label{
  color:rgba(15,23,42,.70) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-label input,
html[data-theme="light"] body.spx-public .spx-ticket-label textarea,
html[data-spx-theme="light"] body.spx-public .spx-ticket-label input,
html[data-spx-theme="light"] body.spx-public .spx-ticket-label textarea{
  background:#ffffff !important;
  border-color:rgba(15,23,42,.14) !important;
  color:#0f172a !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-label input:focus,
html[data-theme="light"] body.spx-public .spx-ticket-label textarea:focus,
html[data-spx-theme="light"] body.spx-public .spx-ticket-label input:focus,
html[data-spx-theme="light"] body.spx-public .spx-ticket-label textarea:focus{
  border-color:rgba(37,99,235,.38) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-review-summary,
html[data-spx-theme="light"] body.spx-public .spx-ticket-review-summary{
  background:rgba(15,23,42,.04) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-review-row,
html[data-spx-theme="light"] body.spx-public .spx-ticket-review-row{
  border-bottom-color:rgba(15,23,42,.07) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-review-row span,
html[data-spx-theme="light"] body.spx-public .spx-ticket-review-row span{
  color:rgba(15,23,42,.45) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-review-row strong,
html[data-spx-theme="light"] body.spx-public .spx-ticket-review-row strong{
  color:#0f172a !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-logged-in-note,
html[data-spx-theme="light"] body.spx-public .spx-ticket-logged-in-note{
  background:rgba(22,163,74,.05) !important;
  border-color:rgba(22,163,74,.18) !important;
  color:rgba(15,23,42,.65) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-modal-v138h-footer,
html[data-spx-theme="light"] body.spx-public .spx-ticket-modal-v138h-footer{
  border-top-color:rgba(15,23,42,.07) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-status,
html[data-spx-theme="light"] body.spx-public .spx-ticket-status{
  color:rgba(15,23,42,.48) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-success-title,
html[data-spx-theme="light"] body.spx-public .spx-ticket-success-title{
  color:#0f172a !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-success-msg,
html[data-spx-theme="light"] body.spx-public .spx-ticket-success-msg{
  color:rgba(15,23,42,.58) !important;
}
html[data-theme="light"] body.spx-public .spx-ticket-success-countdown,
html[data-spx-theme="light"] body.spx-public .spx-ticket-success-countdown{
  color:rgba(15,23,42,.35) !important;
}

/* === Phase 4b: Support info cards (blocks under "Support request" section) */
html[data-theme="light"] body.spx-public .spx-support-info-card,
html[data-spx-theme="light"] body.spx-public .spx-support-info-card{
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(15,23,42,.09) !important;
}
html[data-theme="light"] body.spx-public .spx-support-info-card b,
html[data-spx-theme="light"] body.spx-public .spx-support-info-card b{
  color:#0f172a !important;
}
html[data-theme="light"] body.spx-public .spx-support-info-card p,
html[data-spx-theme="light"] body.spx-public .spx-support-info-card p{
  color:rgba(15,23,42,.55) !important;
}
html[data-theme="light"] body.spx-public .spx-support-action-info,
html[data-spx-theme="light"] body.spx-public .spx-support-action-info{
  border-top-color:rgba(15,23,42,.09) !important;
}

/* === Phase 5: Mobile nav refinements
   760-1120px: hide redundant desktop theme toggle from nav-actions
   (mobile hamburger menu already has its own theme toggle in nav-mobile-actions) */
@media(min-width:761px) and (max-width:1120px){
  .spx-nav-v26 .nav-actions .spx-theme-toggle-v130{
    display:none !important;
  }
}

/* ================================================================
   A8.140j Phase 4 — Public Support Create Ticket modal: catch-all
   A8.140i Phase 4a covered all explicit white-color elements.
   This catch-all ensures any remaining inherited text inside the
   white dialog is dark, without touching any other element.
   ================================================================ */
html[data-theme="light"] body.spx-public .spx-ticket-modal-v138h-dialog,
html[data-spx-theme="light"] body.spx-public .spx-ticket-modal-v138h-dialog {
  color: #0f172a !important;
}
/* Ticket form placeholder text — no !important needed, browser default covers most cases */
html[data-theme="light"] body.spx-public .spx-ticket-label input::placeholder,
html[data-theme="light"] body.spx-public .spx-ticket-label textarea::placeholder,
html[data-spx-theme="light"] body.spx-public .spx-ticket-label input::placeholder,
html[data-spx-theme="light"] body.spx-public .spx-ticket-label textarea::placeholder {
  color: rgba(15,23,42,.38) !important;
}
/* Ticket modal footer buttons — cover any btn style that may carry white text */
html[data-theme="light"] body.spx-public .spx-ticket-modal-v138h-footer .btn:not(.btn.primary),
html[data-spx-theme="light"] body.spx-public .spx-ticket-modal-v138h-footer .btn:not(.btn.primary) {
  color: rgba(15,23,42,.75) !important;
}
/* Ticket success icon background — confirm it's readable in light */
html[data-theme="light"] body.spx-public .spx-ticket-success-icon,
html[data-spx-theme="light"] body.spx-public .spx-ticket-success-icon {
  background: rgba(22,163,74,.10) !important;
}
/* Ticket form row full-width on mobile is already handled; ensure label text is dark */
html[data-theme="light"] body.spx-public .spx-ticket-form-row .spx-ticket-label,
html[data-spx-theme="light"] body.spx-public .spx-ticket-form-row .spx-ticket-label {
  color: rgba(15,23,42,.72) !important;
}

/* ================================================================
   A8.140j Phase 5 — Public website light mode: nav mega-menu borders,
   builder-showcase step-list, mini-builder surface, command-center.
   Root cause: elements use rgba(218,236,255,.08-.10) borders (light
   blue nearly invisible on white) and rgba(255,255,255,.04-.06) bgs
   (transparent on white). Override to neutral slate tones.
   ================================================================ */

/* Nav mega-menu panel borders in light mode */
html[data-theme="light"] .spx-nav-v26 .nav-panel-lead {
  border-bottom-color: rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .spx-nav-v26 .nav-panel-columns a {
  border-right-color: rgba(15,23,42,.07) !important;
}
html[data-theme="light"] .spx-nav-v26 .nav-panel-columns a:last-child {
  border-right-color: transparent !important;
}
/* Nav panel bottom border in light mode */
html[data-theme="light"] .spx-nav-v26 .nav-panel-columns {
  border-top: 1px solid rgba(15,23,42,.06);
}

/* builder-showcase step tabs: make buttons visible on light section bg */
html[data-theme="light"] .step-list button {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.06) !important;
}
html[data-theme="light"] .step-list button:hover {
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(14,165,233,.22) !important;
  box-shadow: 0 6px 18px rgba(14,165,233,.08) !important;
}
html[data-theme="light"] .step-list button.is-active {
  background: rgba(14,165,233,.09) !important;
  border-color: rgba(14,165,233,.26) !important;
  box-shadow: 0 10px 28px rgba(14,165,233,.10) !important;
}

/* mini-builder-demo sidebar buttons + inspector labels in light mode */
html[data-theme="light"] .mini-body aside button,
html[data-theme="light"] .mini-inspector label {
  background: rgba(255,255,255,.80) !important;
  border-color: rgba(15,23,42,.10) !important;
}
html[data-theme="light"] .mini-body aside button.is-active {
  background: rgba(14,165,233,.10) !important;
  border-color: rgba(14,165,233,.22) !important;
}
/* mini-canvas elements in light mode */
html[data-theme="light"] .mini-canvas-row i {
  background: rgba(15,23,42,.05) !important;
  border-color: rgba(15,23,42,.09) !important;
}
html[data-theme="light"] .mini-topbar {
  border-bottom-color: rgba(15,23,42,.09) !important;
}

/* Ensure section text colors use readable values in light mode */
html[data-theme="light"] .command-center p,
html[data-theme="light"] .builder-showcase p,
html[data-theme="light"] .mini-demo-copy p {
  color: rgba(15,23,42,.65) !important;
}

/* ================================================================
   A8.140j Phase 6 — Mobile stacking light mode
   The .step-tabs/.command-center/.step-panel mobile stacking to
   grid-template-columns:1fr is already in the existing CSS (line ~155).
   This block fixes light-mode appearance of those stacked sections,
   and ensures the v26 hero + section transitions look correct on mobile.
   ================================================================ */
@media(max-width:900px){
  /* Builder showcase step list: horizontal scroll + visible buttons */
  html[data-theme="light"] .step-list button {
    background: rgba(255,255,255,.88) !important;
    border-color: rgba(15,23,42,.11) !important;
  }
  /* Section panel column dividers: use bottom border when stacked */
  html[data-theme="light"] .step-panel.is-active {
    gap: 16px;
  }
}
@media(max-width:760px){
  /* v26 hero section bottom fade: ensure it blends in light mode */
  html[data-theme="light"] .spx-v26-bottom-fade {
    background: linear-gradient(180deg, rgba(238,246,255,0) 0%, rgba(238,246,255,.44) 44%, rgba(238,246,255,.92) 74%, #eef6ff 100%) !important;
  }
  /* Ghost nav btn at mobile: keep dark readable text */
  html[data-theme="light"] .spx-nav-v26 .nav-actions .btn.ghost {
    color: #0f172a !important;
  }
  /* Mobile section cards: ensure visible borders in light mode */
  html[data-theme="light"] .command-center,
  html[data-theme="light"] .builder-showcase,
  html[data-theme="light"] .mini-builder-demo {
    border-color: rgba(15,23,42,.09) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   A8.141i-1d · Google OAuth account chooser cards + 2FA input polish
   ───────────────────────────────────────────────────────────────────────────── */

/* Account chooser list container */
html body.spx-public .spx-google-chooser {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:20px 0 4px;
}

/* Individual account card — styled button */
html body.spx-public .spx-google-account-card {
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--surface-2);
  cursor:pointer;
  text-align:left;
  color:var(--text);
  font-family:inherit;
  font-size:inherit;
  font-weight:400;
  white-space:normal;
  min-height:unset;
  transition:border-color .18s ease,box-shadow .18s ease,transform .14s ease,background .18s ease;
}

html body.spx-public .spx-google-account-card:hover {
  border-color:var(--border-accent);
  box-shadow:0 0 0 3px rgba(24,201,245,.09),0 10px 34px rgba(24,201,245,.09);
  transform:translateY(-2px);
  background:var(--surface-3);
}

html body.spx-public .spx-google-account-card:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:2px;
  border-color:var(--border-accent);
}

/* Avatar circle with gradient initial */
html body.spx-public .spx-google-account-avatar {
  flex-shrink:0;
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--blue-2));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:800;
  color:#fff;
  letter-spacing:0;
  box-shadow:0 4px 14px rgba(24,201,245,.22);
  user-select:none;
}

/* Meta text column */
html body.spx-public .spx-google-account-meta {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

html body.spx-public .spx-google-account-name {
  font-weight:700;
  font-size:.9375rem;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html body.spx-public .spx-google-account-email {
  font-size:.8125rem;
  color:var(--secondary);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

html body.spx-public .spx-google-account-via {
  font-size:.75rem;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Source pills row */
html body.spx-public .spx-google-pills {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:5px;
}

html body.spx-public .spx-google-match-pill {
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  border:1px solid var(--border);
  background:rgba(24,201,245,.06);
  color:var(--cyan-2);
}

html body.spx-public .spx-google-match-pill.pill-mailbox {
  background:rgba(24,201,245,.11);
  border-color:rgba(24,201,245,.24);
}

/* Chevron arrow */
html body.spx-public .spx-google-account-arrow {
  flex-shrink:0;
  color:var(--muted);
  transition:color .18s ease,transform .18s ease;
}

html body.spx-public .spx-google-account-card:hover .spx-google-account-arrow {
  color:var(--cyan-2);
  transform:translateX(3px);
}

/* Light theme: chooser cards */
html[data-theme="light"] body.spx-public .spx-google-account-card {
  background:rgba(248,250,255,.92);
  border-color:rgba(15,23,42,.10);
}

html[data-theme="light"] body.spx-public .spx-google-account-card:hover {
  background:#eef6ff;
  border-color:rgba(14,165,233,.30);
  box-shadow:0 0 0 3px rgba(14,165,233,.08),0 10px 28px rgba(14,165,233,.08);
}

html[data-theme="light"] body.spx-public .spx-google-match-pill {
  color:var(--cyan);
}

html[data-theme="light"] body.spx-public .spx-google-match-pill.pill-mailbox {
  border-color:rgba(14,165,233,.26);
}

/* ── 2FA code entry ──────────────────────────────────────────────────────────── */

html body.spx-public .spx-google-2fa-wrap {
  margin:18px 0;
}

html body.spx-public .spx-google-2fa-label {
  display:block;
  font-size:.8125rem;
  font-weight:700;
  color:var(--secondary);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:8px;
}

html body.spx-public .spx-google-2fa-code {
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:16px 20px;
  border-radius:14px;
  border:1.5px solid var(--border-strong);
  background:var(--surface-2);
  color:var(--text);
  font-family:'Courier New',Courier,monospace;
  font-size:1.875rem;
  font-weight:800;
  letter-spacing:.5em;
  text-align:center;
  transition:border-color .16s ease,box-shadow .16s ease;
  outline:none;
  caret-color:var(--cyan);
}

html body.spx-public .spx-google-2fa-code:focus {
  border-color:var(--border-accent);
  box-shadow:0 0 0 3px rgba(24,201,245,.13);
}

html body.spx-public .spx-google-2fa-code::placeholder {
  color:var(--muted);
  letter-spacing:.35em;
  opacity:.5;
}

html body.spx-public .spx-google-2fa-error {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(255,85,112,.07);
  border:1px solid rgba(255,85,112,.22);
  color:var(--red);
  font-size:.875rem;
  margin:0 0 14px;
}

/* Light theme: 2FA */
html[data-theme="light"] body.spx-public .spx-google-2fa-code {
  background:rgba(248,250,255,.96);
  border-color:rgba(15,23,42,.16);
}

html[data-theme="light"] body.spx-public .spx-google-2fa-code:focus {
  border-color:rgba(14,165,233,.40);
  box-shadow:0 0 0 3px rgba(14,165,233,.10);
}

html[data-theme="light"] body.spx-public .spx-google-2fa-error {
  background:rgba(217,45,32,.05);
  border-color:rgba(217,45,32,.18);
  color:var(--red);
}