/* RXHost public UI hotfix — 2026-09-25
   Lightweight only: no backdrop filters, no scroll-bound animations. */

/* Hosting page header: keep the brand/navigation inside the same centered shell
   instead of stretching the .container.nav element edge-to-edge. */
body.rx-hosting-page .header .container.nav{
  width:min(1160px,calc(100% - 40px))!important;
  max-width:1160px!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}
body.rx-hosting-page .header{
  min-height:72px!important;
  height:72px!important;
  box-shadow:0 1px 0 rgba(29,33,59,.04)!important;
}
body.rx-hosting-page .brand{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 auto!important;
  padding:5px 0!important;
  text-decoration:none!important;
}
body.rx-hosting-page .brand img{
  width:146px!important;
  height:auto!important;
  max-height:42px!important;
  object-fit:contain!important;
  display:block!important;
}
body.rx-hosting-page .links{
  margin-inline:auto!important;
}
body.rx-hosting-page .actions{
  flex:0 0 auto!important;
}
body.rx-hosting-page .hero{
  padding-top:44px!important;
}

/* Home: the three quick facts should hug their text on phones instead of
   becoming three thick equal-width blocks. */
@media (max-width:760px){
  body.rx-home-page .hero-mini-grid{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:auto!important;
    max-width:100%!important;
    gap:7px!important;
    margin-top:12px!important;
  }
  body.rx-home-page .hero-mini-card{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    padding:6px 10px 6px 36px!important;
    border-radius:11px!important;
    background:#fff!important;
    border:1px solid #e7e8f0!important;
    box-shadow:0 4px 10px rgba(31,36,74,.045)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  body.rx-home-page .hero-mini-card strong{
    font-size:10.5px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    margin:0!important;
    padding:0!important;
  }
  body.rx-home-page .hero-mini-icon{
    left:7px!important;
    width:23px!important;
    height:23px!important;
    border-radius:7px!important;
    box-shadow:none!important;
  }
  body.rx-home-page .hero-mini-icon i{font-size:9px!important}
}
@media (max-width:390px){
  body.rx-home-page .hero-mini-grid{gap:6px!important}
  body.rx-home-page .hero-mini-card{padding-right:8px!important}
  body.rx-home-page .hero-mini-card strong{font-size:10px!important}
}

/* Legacy PWA block safety: any old static install widget is never allowed to
   enter document flow. The new widget is JS-created and marked data-rx-install-v2. */
body.rx-home-page .rx-install-card:not([data-rx-install-v2="1"]),
body.rx-home-page #installPrompt,
body.rx-home-page .pwa-install-prompt,
body.rx-home-page .install-app-prompt{
  display:none!important;
  position:fixed!important;
  width:0!important;
  height:0!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
}

/* Footer keeps a compact rhythm and cannot inherit giant logo dimensions. */
body.rx-home-page .site-footer{
  margin-top:0!important;
}
body.rx-home-page .footer-brand img{
  max-width:132px!important;
  height:auto!important;
  object-fit:contain!important;
}

@media (max-width:760px){
  body.rx-hosting-page .header .container.nav{
    width:calc(100% - 24px)!important;
  }
  body.rx-hosting-page .header{height:62px!important;min-height:62px!important}
  body.rx-hosting-page .brand img{width:122px!important;max-height:36px!important}
  body.rx-hosting-page .actions .btn{min-height:35px!important;padding-inline:11px!important}
  body.rx-hosting-page .hero{padding-top:28px!important}
}

/* =========================================================
   FINAL QUICK-FACT ALIGNMENT · 2026-09-25 v5
   Keep all three facts optically centered and compact on phones,
   including when a phone browser is switched to desktop-site mode.
========================================================= */
body.rx-home-page .hero-mini-grid{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  width:auto!important;
  max-width:100%!important;
  gap:8px!important;
}
body.rx-home-page .hero-mini-card{
  position:relative!important;
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
  min-height:42px!important;
  padding:6px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  text-align:center!important;
}
body.rx-home-page .hero-mini-card .hero-mini-icon{
  position:static!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  flex:0 0 24px!important;
  width:24px!important;
  height:24px!important;
  margin:0!important;
}
body.rx-home-page .hero-mini-card strong{
  display:block!important;
  margin:0!important;
  padding:0!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  text-align:left!important;
}

@media (max-width:760px){
  body.rx-home-page .hero-mini-grid{
    width:100%!important;
    margin:12px auto 0!important;
    justify-content:center!important;
    gap:6px!important;
  }
  body.rx-home-page .hero-mini-card{
    flex:0 1 auto!important;
    min-height:40px!important;
    padding:5px 8px!important;
    border-radius:11px!important;
  }
  body.rx-home-page .hero-mini-card .hero-mini-icon{
    flex-basis:22px!important;
    width:22px!important;
    height:22px!important;
    border-radius:7px!important;
  }
  body.rx-home-page .hero-mini-card .hero-mini-icon i{font-size:8.5px!important}
  body.rx-home-page .hero-mini-card strong{font-size:9.8px!important}
}

@media (max-width:390px){
  body.rx-home-page .hero-mini-grid{gap:5px!important}
  body.rx-home-page .hero-mini-card{padding:5px 6px!important;gap:5px!important}
  body.rx-home-page .hero-mini-card .hero-mini-icon{
    flex-basis:20px!important;width:20px!important;height:20px!important
  }
  body.rx-home-page .hero-mini-card strong{font-size:9px!important}
}

/* Phone browsers in "Desktop site" mode expose a wide CSS viewport while
   still using coarse touch input. Keep the three facts compact there too. */
@media (pointer:coarse) and (min-width:761px){
  body.rx-home-page .hero-mini-grid{
    max-width:490px!important;
    justify-content:flex-start!important;
    gap:7px!important;
  }
  body.rx-home-page .hero-mini-card{
    min-height:40px!important;
    padding:5px 9px!important;
  }
  body.rx-home-page .hero-mini-card strong{font-size:9.5px!important}
}

/* Hero CTA alignment: equal, centered controls on real mobile; compact in
   desktop-site mode on touch devices. */
@media (max-width:760px){
  body.rx-home-page .hero-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    gap:8px!important;
    margin:16px auto 0!important;
  }
  body.rx-home-page .hero-actions .hero-primary,
  body.rx-home-page .hero-actions .hero-secondary{
    width:100%!important;
    min-width:0!important;
    justify-content:center!important;
    padding-inline:10px!important;
  }
}
@media (max-width:360px){
  body.rx-home-page .hero-actions{gap:6px!important}
  body.rx-home-page .hero-actions .hero-primary,
  body.rx-home-page .hero-actions .hero-secondary{font-size:10px!important;padding-inline:7px!important}
}
@media (pointer:coarse) and (min-width:761px){
  body.rx-home-page .hero-actions{
    display:flex!important;
    width:auto!important;
    max-width:440px!important;
    gap:8px!important;
  }
}