/* NovaPush visual refresh — crisp, mobile-first, accessible product UI.
   Loaded after the legacy theme to normalize older dark/glass components. */
:root {
  --np-ink: #17233b;
  --np-muted: #65748d;
  --np-line: #e3e9f2;
  --np-paper: #ffffff;
  --np-canvas: #f5f7fb;
  --np-indigo: #5146e5;
  --np-indigo-deep: #4338ca;
  --np-mint: #0f8b70;
  --np-radius: 20px;
}
html { scroll-behavior: smooth; }
body { color: var(--np-ink); }

/* Public product site */
.landing-body {
  background: radial-gradient(ellipse at 83% 5%, rgba(103, 93, 235, .075), transparent 32%),
              radial-gradient(ellipse at 5% 45%, rgba(24, 164, 143, .04), transparent 35%),
              var(--np-canvas) !important;
}
.landing-header {
  position: sticky !important; top: 0; z-index: 20;
  padding: 14px max(24px, calc((100vw - 1200px)/2)) !important;
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid rgba(224,230,239,.9) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.landing-header .brand { gap: 11px; }
.landing-header .brand-mark { border-radius: 12px; }
.landing-header .brand strong { font-size: 17px; letter-spacing: -.03em; }
.landing-nav { gap: clamp(10px,1.6vw,22px) !important; }
.landing-nav a:not(.btn) { color: #596982 !important; font-size: 13px !important; }
.landing-nav a:not(.btn):hover { color: var(--np-indigo) !important; }
.landing-nav .btn { border-radius: 11px !important; padding: 10px 15px !important; }
.landing-nav .btn-primary { color: #fff !important; }
.landing-hero {
  width: min(1200px, 100%); margin: 0 auto;
  min-height: 570px; padding: 65px 28px 54px !important;
  gap: clamp(28px,5vw,70px) !important; flex-wrap: nowrap !important;
}
.landing-hero-copy { flex: 1 1 52%; min-width: 0 !important; }
.landing-hero-copy .eyebrow {
  color: #3e45b8 !important; background: #eeefff !important;
  border: 1px solid #dedfff !important; border-radius: 999px;
  padding: 8px 13px !important; font-size: 12px !important; font-weight: 700;
}
.landing-hero-copy .eyebrow::before { background: #5c56e8 !important; box-shadow: none !important; }
.landing-hero-copy h1 {
  max-width: 650px; margin: 20px 0 18px !important;
  color: #18243b !important; font-size: clamp(40px,5vw,66px) !important;
  line-height: 1.04 !important; letter-spacing: -.055em !important; font-weight: 790 !important;
}
.text-gradient {
  color: #5146e5 !important; background: linear-gradient(100deg,#5146e5,#7960da 70%,#0f9277);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.landing-hero-copy .lead-copy {
  max-width: 575px; color: #64728a !important;
  font-size: clamp(15px,1.4vw,17px) !important; line-height: 1.75 !important;
}
.landing-cta { margin: 26px 0 22px !important; gap: 11px !important; }
.landing-cta .btn { min-height: 48px; display: inline-flex; align-items: center; gap: 8px; border-radius: 13px !important; padding: 12px 17px !important; font-weight: 650; }
.landing-cta .btn-primary { box-shadow: 0 10px 24px rgba(81,70,229,.18) !important; }
.landing-cta .btn-outline-light { background: #fff !important; color: #394761 !important; border-color: #dce3ee !important; }
.landing-trust { gap: 9px !important; color: #66748b !important; }
.landing-trust span { width: 32px; height: 32px; display: grid !important; place-items: center; background: #fff; border: 1px solid #e4e9f1; border-radius: 10px; }
.landing-trust small { color: #66748b !important; }
.landing-hero-art {
  flex: 1 1 48%; min-width: 0 !important; max-width: 550px;
  padding: 18px; border: 1px solid rgba(222,228,239,.95); border-radius: 30px;
  background: linear-gradient(145deg,#fff,rgba(250,251,255,.91));
  box-shadow: 0 28px 70px rgba(46,58,94,.10), 0 4px 12px rgba(40,51,82,.04);
}
.hub-svg { width: 100%; height: auto; overflow: visible; }
.hub-svg g circle { fill: #fff !important; stroke: #e2e7f0 !important; }
.hub-svg defs filter#hubBlur { opacity: .5; }
.landing-stats { padding: 10px 24px 58px !important; }
.stats-bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width: 1120px !important; gap: 0 !important; padding: 17px 8px; text-align:center; border: 1px solid #e5eaf2; border-radius: 20px; background: #fff; box-shadow: 0 12px 36px rgba(34,48,78,.045); }
.stat-item { border: 0 !important; border-right: 1px solid #edf0f5 !important; border-radius: 0 !important; background: transparent !important; backdrop-filter: none !important; padding: 12px !important; }
.stat-item:last-child { border-right: 0 !important; }
.stat-item span { display:block; }
.stat-item strong { display:block; color: #28365a !important; background: none !important; -webkit-text-fill-color: #5146e5 !important; font-size: 27px !important; line-height:1.15; }
.stat-item span { color: #69778d !important; }
.landing-features, .landing-how, .faq-section { padding-left: max(24px,calc((100vw - 1120px)/2)) !important; padding-right: max(24px,calc((100vw - 1120px)/2)) !important; }
.section-heading { max-width: 720px; margin: 0 auto 30px !important; text-align: center; }
.section-heading .eyebrow { color: var(--np-indigo) !important; }
.section-heading h2, .landing-how h2 { color: #1c2941 !important; font-size: clamp(29px,3.7vw,44px) !important; letter-spacing: -.045em; }
.feature-grid { max-width: 1120px !important; gap: 16px !important; }
.feature-card {
  min-height: 220px; padding: 26px 24px !important; border: 1px solid #e5eaf2 !important;
  border-radius: 19px !important; background: #fff !important;
  box-shadow: 0 8px 24px rgba(39,53,82,.045) !important;
}
.feature-card::before,.feature-card::after { display:none !important; }
.feature-card:hover { transform: translateY(-4px) !important; border-color: #d5d9fb !important; box-shadow: 0 18px 36px rgba(39,53,82,.09) !important; }
.feature-icon { color: #5146e5; background: #f0efff !important; border: 1px solid #e2e1ff !important; border-radius: 15px !important; }
.feature-card h3 { color: #25324a !important; font-size: 17px !important; }
.feature-card p { color: #66748a !important; }
.related-platforms { padding: 12px max(24px,calc((100vw - 1120px)/2)) 72px !important; }
.platform-link-grid { max-width:1120px !important; gap:14px !important; }
.platform-link { border:1px solid #e4e9f1 !important; border-radius:16px !important; background:#fff !important; color:#25334b !important; box-shadow:0 7px 22px rgba(39,53,82,.04); }
.platform-link:hover { transform:translateY(-3px); border-color:#d6d8fa !important; box-shadow:0 14px 30px rgba(39,53,82,.08); }
.platform-link strong { color:#26344c !important; }
.platform-link small { color:#68768b !important; }
.platform-hero { width:min(1120px,100%); margin:0 auto; padding:65px 24px !important; gap:48px; }
.platform-hero-copy h1 { color:#1c2941 !important; font-size:clamp(38px,5vw,60px) !important; letter-spacing:-.05em; line-height:1.08; }
.platform-hero-copy .lead-copy,.prose { color:#64728a !important; line-height:1.8; }
.platform-badge { color:#5146e5 !important; background:#f0efff !important; border-color:#e1e0ff !important; }
.platform-hero-art { border:1px solid #e4e9f1; border-radius:26px; background:#fff; box-shadow:0 20px 55px rgba(39,53,82,.08); }
.prose-section { color:#64728a !important; }
.landing-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.landing-steps > div { padding: 23px !important; border: 1px solid #e4e9f1 !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 8px 25px rgba(39,53,82,.04); }
.landing-steps > div h3,.landing-steps > div strong { color: #26344c !important; }
.landing-steps > div p { color: #68768b !important; }
.landing-steps span { color: #fff !important; }
.faq-item { border: 1px solid #e3e8f1 !important; border-radius: 15px !important; background: #fff !important; box-shadow: 0 4px 15px rgba(37,49,77,.035); }
.faq-item summary { color: #26344c !important; }
.faq-item p { color: #63728a !important; }
.landing-footer { gap: 14px 22px !important; border-color: #e1e7f0 !important; background: rgba(255,255,255,.62); color: #66748b !important; }
.landing-footer a { color: #53627b; }

/* Product workspace: clear hierarchy and calm surfaces, no glass blur. */
.app-body { background: var(--np-canvas) !important; color: var(--np-ink) !important; }
.app-shell { background: var(--np-canvas) !important; }
.sidebar { background: #fff !important; border-right: 1px solid #e4e9f1 !important; box-shadow: 5px 0 24px rgba(31,48,78,.035) !important; backdrop-filter: none !important; }
.main-content { padding: 30px clamp(20px,3.1vw,48px) 92px !important; }
.topbar { margin-bottom: 24px !important; }
.topbar h1 { color: #1b2840 !important; background: none !important; -webkit-text-fill-color: #1b2840 !important; font-size: clamp(25px,2.5vw,34px) !important; letter-spacing: -.04em; }
.panel,.card,.surface,.stat-card,.media-card,.feature-card,.benefit-card,.glass-card {
  border-radius: 18px !important; backdrop-filter: none !important; -webkit-backdrop-filter:none !important;
}
.panel,.card,.surface,.stat-card,.media-card { box-shadow: 0 7px 24px rgba(30,45,75,.045) !important; }
.stat-card { min-height: 140px !important; }
.btn { border-radius: 11px !important; font-weight: 650; }
input,select,textarea,.form-control,.form-select { min-height: 42px; border-radius: 10px !important; }
.mobile-nav { background: rgba(255,255,255,.98) !important; border-top: 1px solid #e4e9f0 !important; box-shadow: 0 -8px 24px rgba(30,45,75,.06) !important; backdrop-filter: none !important; }
.mobile-nav a.is-active,.mobile-nav a.active { color: var(--np-indigo) !important; }

/* Auth and install screens */
.auth-body { background: radial-gradient(ellipse at 80% 8%,rgba(89,79,223,.07),transparent 32%),var(--np-canvas) !important; }
.auth-card { border-radius: 23px !important; backdrop-filter: none !important; }
@media (max-width: 900px) {
  .landing-hero { min-height: unset; padding-top: 48px !important; gap: 26px !important; }
  .landing-hero-copy h1 { font-size: clamp(38px,7vw,54px) !important; }
  .landing-hero-art { padding: 12px; }
  .landing-steps { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .landing-header { padding: 12px 17px !important; }
  .landing-nav { gap: 8px !important; }
  .landing-nav a:not(.btn) { display: none; }
  .landing-nav .btn { padding: 9px 11px !important; font-size: 12px !important; }
  .landing-hero { display: flex; flex-direction: column; align-items: stretch; padding: 42px 19px 28px !important; }
  .landing-hero-copy { width: 100%; }
  .landing-hero-copy h1 { font-size: clamp(38px,11vw,49px) !important; }
  .landing-hero-copy .lead-copy { font-size: 15px !important; }
  .landing-cta { display: grid; grid-template-columns: 1fr; }
  .landing-cta .btn { justify-content: center; }
  .landing-hero-art { width: 100%; min-width: 0; border-radius: 22px; padding: 6px; }
  .platform-hero { padding:42px 19px 30px !important; flex-direction:column; gap:28px; }
  .platform-hero-copy h1 { font-size:clamp(36px,10vw,48px) !important; }
  .platform-hero-art { min-height:220px; }
  .related-platforms { padding-left:18px !important; padding-right:18px !important; }
  .landing-stats { padding: 4px 17px 42px !important; }
  .stats-bar { grid-template-columns: repeat(2,minmax(0,1fr)) !important; padding: 8px !important; }
  .stat-item { border-right: 0 !important; padding: 13px 6px !important; }
  .stat-item:nth-child(odd) { border-right: 1px solid #edf0f5 !important; }
  .stat-item:nth-child(-n+2) { border-bottom: 1px solid #edf0f5 !important; }
  .landing-features,.landing-how,.faq-section { padding-left: 18px !important; padding-right: 18px !important; }
  .feature-grid { grid-template-columns: 1fr !important; }
  .feature-card { min-height: unset; padding: 21px !important; }
  .landing-footer { justify-content: flex-start !important; padding: 23px 18px !important; }
  .main-content { padding: 22px 16px 94px !important; }
  .topbar { align-items: flex-start !important; gap: 12px; }
}
/* Public landing-page premium pricing: explicit light text on dark cards.
   The light-theme body text color must not leak into these dark inline cards. */
.pricing-section { color: #f8fafc !important; }
.pricing-section > h2 { color: #f8fafc !important; }
.pricing-section > p { color: #cbd5e1 !important; opacity: 1 !important; }
.pricing-section > div > div { color: #f8fafc !important; }
.pricing-section > div > div h3 { color: #ffffff !important; }
.pricing-section > div > div ul,
.pricing-section > div > div ul li { color: #e2e8f0 !important; }
.pricing-section > div > div > div[style*="opacity"] { color: #cbd5e1 !important; opacity: 1 !important; }
.pricing-section > div > div > span { color: #ffffff !important; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}