/* ============================================================
   ClearSky hero conversion — turns the old DARK page heroes
   (.page-hero / .ph-* and .hero) into the light homepage style,
   site-wide. Uses !important to override each page's inline <style>.
   ============================================================ */

.page-hero, .hero{
  background:
    radial-gradient(ellipse 70% 60% at 88% 8%, rgba(125,211,252,.28) 0%, transparent 62%),
    radial-gradient(ellipse 60% 55% at 5% 95%, rgba(224,242,254,.90) 0%, transparent 60%),
    linear-gradient(170deg, #FFFFFF 0%, var(--sky-wash) 45%, #EEF8FE 100%) !important;
  border-bottom: 1px solid var(--border-soft);
}
.page-hero::before, .hero::before{
  background: repeating-linear-gradient(-45deg, transparent, transparent 50px, rgba(12,42,69,.02) 50px, rgba(12,42,69,.02) 51px) !important;
}
.page-hero::after, .hero::after{
  background: radial-gradient(ellipse 70% 60% at 30% 50%, rgba(14,165,233,.09) 0%, transparent 70%) !important;
}
.ph-dots{ background-image: radial-gradient(rgba(14,165,233,.10) 1px, transparent 1px) !important; }
.ph-bar{ background: linear-gradient(180deg, var(--sky), transparent) !important; }

/* headings + text -> dark navy */
.page-hero .ph-h1, .page-hero h1, .page-hero h2,
.hero h1, .hero h2{ color: var(--navy) !important; }
.page-hero .ph-h1 em, .hero em{ color: var(--sky-deep) !important; }
.page-hero .ph-sub, .page-hero p, .hero p,
.hero .hero-sub, .page-hero .ph-lead{ color: var(--text-mid) !important; }

/* badges / labels */
.ph-badge, .hero-badge, .page-hero .badge{
  background: var(--sky-pale) !important; border-color: var(--sky-pale2) !important; color: var(--sky-deep) !important;
}
.ph-badge-dot{ background: var(--sky) !important; }

/* dark translucent cards / flow steps -> light cards */
.ph-flow-step, .page-hero [class*="card"], .hero [class*="card"]{
  background: var(--white) !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: var(--shadow-xs);
}
.ph-flow-step:hover{ background: var(--sky-wash) !important; border-color: var(--sky-soft) !important; }
.ph-flow-num{ color: var(--sky-deep) !important; }
.ph-flow-ar{ color: var(--navy) !important; }
.ph-flow-en{ color: var(--text-light) !important; }
.ph-flow-arrow{ color: var(--sky-soft) !important; }
.ph-flow-connector{ background: var(--border) !important; }

/* generic safety: white-ish text inside a hero becomes readable navy */
.page-hero span:not([class*="badge"]):not(.ph-flow-num),
.hero span:not([class*="badge"]){ }
.page-hero [style*="color:white"], .page-hero [style*="color:#fff"], .page-hero [style*="color: #fff"],
.page-hero [style*="rgba(255,255,255"]{ color: var(--navy) !important; }

/* hero stat tiles / numbers that were light-on-dark */
.page-hero [class*="stat"] [class*="num"], .page-hero [class*="ss-"]{ color: var(--navy); }