/* Dashboard heroes (EN/AR/PL): centered copy, one elevated mockup window on a soft ambient glow.
   Loaded last on every /dashboard/ page so it wins over the per-module hero styles. */

/* ---------- Centered copy ---------- */
html:not(#dh) body:not(#dh) :is(.product-story-copy,.hub-copy,.sx-hero-copy),
html:not(#dh) body:not(#dh) :is(.product-story-copy,.hub-copy,.sx-hero-copy) > :is(h1,p) { text-align:center!important; }
html:not(#dh) body:not(#dh) :is(.product-story-copy,.hub-copy,.sx-hero-copy) > :is(.eyebrow,.sx-eyebrow) { margin-inline:auto!important; }
html:not(#dh) body:not(#dh) :is(.product-story-copy,.hub-copy,.sx-hero-copy) > p { max-width:40rem!important; margin-inline:auto!important; }
html:not(#dh) body:not(#dh) :is(.product-story-copy,.hub-copy,.sx-hero-copy) > :is(.hero-actions,.sx-actions) { display:flex!important; flex-wrap:wrap!important; justify-content:center!important; margin-inline:auto!important; }

/* Proof row: size items to their content and center the group, instead of equal columns with start-aligned text. */
html:not(#dh) body:not(#dh) :is(.story-hero-proof,.sx-hero-proof) {
  display:flex!important; flex-wrap:wrap!important; justify-content:center!important;
  gap:10px 28px!important; width:auto!important; max-width:100%!important; margin-inline:auto!important;
}
html:not(#dh) body:not(#dh) :is(.story-hero-proof,.sx-hero-proof) > span { display:inline-flex!important; align-items:center!important; width:auto!important; flex:0 0 auto!important; }

/* ---------- Highlighted title words ---------- */
/* The highlight is padded and slightly rotated; on a wrapped line that painted over the line above.
   Keep it flat, give every line fragment its own padding, and open the line spacing. */
html:not(#dh) body:not(#dh) :is(.product-story-copy,.hub-copy,.sx-hero-copy) h1 { line-height:1.34!important; }
html[lang="ar"]:not(#dh) body:not(#dh) :is(.product-story-copy,.hub-copy,.sx-hero-copy) h1 { line-height:1.65!important; }
html:not(#dh) body:not(#dh) :is(.product-story-copy,.hub-copy,.sx-hero-copy) h1 :is(em,strong) {
  display:inline!important; transform:none!important; rotate:none!important;
  padding:0 .12em!important; margin:0!important;
  background:linear-gradient(transparent 58%, #b9f065 58%, #b9f065 91%, transparent 91%)!important;
  color:#087443!important; font-style:normal!important;
  box-shadow:none!important; text-decoration:none!important;
  border-radius:.24em!important;
  -webkit-box-decoration-break:clone!important; box-decoration-break:clone!important;
}
html:not(#dh) body:not(#dh) :is(.product-story-copy,.hub-copy,.sx-hero-copy) h1 :is(em,strong)::before,
html:not(#dh) body:not(#dh) :is(.product-story-copy,.hub-copy,.sx-hero-copy) h1 :is(em,strong)::after {
  content:none!important;
}

/* ---------- Mockup stage: no box, ambient glow only ---------- */
html:not(#dh) body:not(#dh) :is(.product-story-hero-visual,.sx-product-stage) {
  position:relative!important; display:block!important;
  width:100%!important; max-width:64rem!important; margin-inline:auto!important;
  height:auto!important; min-height:0!important; padding:0!important; background:none!important; border:0!important; border-radius:0!important;
  box-shadow:none!important; transform:none!important; overflow:visible!important; isolation:isolate;
}
html:not(#dh) body:not(#dh) .hub-stage { background:none!important; border:0!important; box-shadow:none!important; position:relative!important; isolation:isolate; }
html:not(#dh) body:not(#dh) :is(.product-story-hero-visual,.sx-product-stage,.hub-stage)::before {
  content:""!important; display:block!important; position:absolute!important;
  inset:-10% -8%!important; width:auto!important; height:auto!important;
  background:radial-gradient(circle at center, rgba(61,220,132,.15) 0%, transparent 70%)!important;
  filter:blur(64px)!important; border:0!important; border-radius:50%!important; box-shadow:none!important;
  transform:none!important; opacity:1!important; z-index:-1!important; pointer-events:none!important;
}
html:not(#dh) body:not(#dh) :is(.product-story-hero-visual,.sx-product-stage,.hub-stage)::after { content:none!important; display:none!important; }
html:not(#dh) body:not(#dh) .sx-product-stage .sx-orbit { display:none!important; }

/* ---------- The elevated window ---------- */
html:not(#dh) body:not(#dh) :is(.product-story-screen,.sx-browser,.hub-dashboard-screen) {
  position:relative!important; box-sizing:border-box!important; inset:auto!important;
  width:100%!important; max-width:100%!important; margin:0 auto!important;
  padding:10px!important;
  background:#fff!important;
  border:1px solid rgba(226,232,240,.8)!important; border-radius:16px!important;
  box-shadow:0 25px 60px -15px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05)!important;
  transform:none!important; overflow:visible!important;
}
html:not(#dh) body:not(#dh) .hub-dashboard-screen { max-width:64rem!important; }
html:not(#dh) body:not(#dh) :is(.product-story-screen,.sx-browser,.hub-dashboard-screen)::before,
html:not(#dh) body:not(#dh) :is(.product-story-screen,.sx-browser,.hub-dashboard-screen)::after { content:none!important; display:none!important; }
/* Title bar sits inside the equal padding; the screenshot keeps its own rounded corners. */
html:not(#dh) body:not(#dh) :is(.product-story-screen,.hub-dashboard-screen) > div:first-child,
html:not(#dh) body:not(#dh) .sx-browser > .sx-browser-bar { margin:0 0 8px!important; padding-inline:6px!important; background:transparent!important; border-radius:0!important; }
html:not(#dh) body:not(#dh) :is(.product-story-screen,.sx-browser,.hub-dashboard-screen) > img {
  display:block!important; width:100%!important; max-width:100%!important; height:auto!important;
  margin:0!important; border-radius:8px!important; border:1px solid rgba(226,232,240,.8)!important; box-shadow:none!important; transform:none!important;
}

/* ---------- Floating badges ---------- */
html:not(#dh) body:not(#dh) :is(.product-story-screen .screen-signal,.sx-product-stage .sx-float) {
  position:absolute!important; z-index:5!important; margin:0!important;
  transform:none!important; rotate:none!important; animation:none!important;
  width:auto!important; height:auto!important; max-width:none!important; white-space:nowrap!important;
}
/* First badge: hangs off the top-left outer edge, so it never covers the sidebar inside the screenshot. */
html:not(#dh) body:not(#dh) :is(.product-story-screen .screen-signal.s1,.sx-product-stage .sx-float-a) {
  top:6rem!important; bottom:auto!important; left:auto!important; right:calc(100% - 1rem)!important;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1)!important;
}
/* Second badge: floats over the bottom-right corner. */
html:not(#dh) body:not(#dh) :is(.product-story-screen .screen-signal.s2,.sx-product-stage .sx-float-b) {
  top:auto!important; left:auto!important; bottom:-1rem!important; right:-1rem!important;
  box-shadow:0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1)!important;
}
/* Not enough gutter to hang outside: pin the first badge to the bottom-left corner instead. */
@media (max-width:1240px) {
  html:not(#dh) body:not(#dh) :is(.product-story-screen .screen-signal.s1,.sx-product-stage .sx-float-a) {
    top:auto!important; right:auto!important; bottom:-1rem!important; left:-.5rem!important;
  }
  html:not(#dh) body:not(#dh) :is(.product-story-screen .screen-signal.s2,.sx-product-stage .sx-float-b) { right:-.5rem!important; }
}
@media (max-width:600px) {
  html:not(#dh) body:not(#dh) :is(.product-story-screen .screen-signal,.sx-product-stage .sx-float) { font-size:11px!important; padding:7px 10px!important; }
  html:not(#dh) body:not(#dh) :is(.product-story-screen .screen-signal.s1,.sx-product-stage .sx-float-a) { left:0!important; bottom:-1.1rem!important; }
  html:not(#dh) body:not(#dh) :is(.product-story-screen .screen-signal.s2,.sx-product-stage .sx-float-b) { right:0!important; bottom:-1.1rem!important; }
  html:not(#dh) body:not(#dh) :is(.product-story-screen,.sx-browser,.hub-dashboard-screen) { padding:6px!important; border-radius:12px!important; }
}