/* Build Path — page family visual systems (local polish)
   Guided-tool: dark forest-green/navy icon heroes (StepCheck / Summary / Project Hub).
   Utility: warm off-white + compact light icon-led tops (account / privacy / intake confirm).
   Does not alter photo-led public split pages (those use site-public-feature.css). */

/* ── Guided-tool family ───────────────────────────────────────────── */
body.page-family-guided-tool .hero.feature-hero:not(.public-split-hero) {
  background: linear-gradient(135deg, #0F172A 0%, #064E3B 50%, #0F766E 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 32px 36px !important;
  margin-bottom: 18px;
  color: #ffffff !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  position: relative;
  overflow: hidden;
}

body.page-family-guided-tool .hero.feature-hero:not(.public-split-hero)::after {
  content: "";
  position: absolute;
  right: -72px;
  bottom: -84px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

body.page-family-guided-tool .hero.feature-hero:not(.public-split-hero) > * {
  position: relative;
  z-index: 1;
}

body.page-family-guided-tool .feature-hero .hero-copy {
  min-width: 0;
}

body.page-family-guided-tool .feature-hero .hero-top {
  align-items: center;
}

/* Keep StepCheck progress pill readable on the dark hero */
body.page-family-guided-tool .hero .status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #065f46;
  border: 1px solid rgba(255, 255, 255, 0.52);
  padding: 8px 12px;
  font-size: 0.84rem;
  font-weight: 900;
}

@media (max-width: 700px) {
  body.page-family-guided-tool .hero.feature-hero:not(.public-split-hero) {
    padding: 24px 20px !important;
    border-radius: 22px;
  }
}

/* ── Utility family ───────────────────────────────────────────────── */
body.page-family-utility {
  background: #f7f5f0 !important;
  color: #374151;
}

body.page-family-utility .hero.feature-hero,
body.page-family-utility .hero.feature-hero--compact {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 22px;
  padding: 22px 24px !important;
  margin-bottom: 18px;
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.05);
  position: relative;
  overflow: hidden;
}

body.page-family-utility .hero.feature-hero::before,
body.page-family-utility .hero.feature-hero::after,
body.page-family-utility .hero.feature-hero--compact::before,
body.page-family-utility .hero.feature-hero--compact::after {
  display: none !important;
  content: none !important;
}

body.page-family-utility .feature-hero .hero-title,
body.page-family-utility .feature-hero h1,
body.page-family-utility .feature-hero--compact .hero-title,
body.page-family-utility .feature-hero--compact h1 {
  color: #0f172a !important;
}

body.page-family-utility .feature-hero .hero-support,
body.page-family-utility .feature-hero p.hero-support,
body.page-family-utility .feature-hero--compact .hero-support {
  color: #374151 !important;
}

body.page-family-utility .feature-hero .eyebrow,
body.page-family-utility .feature-hero--compact .eyebrow {
  background: rgba(27, 154, 90, 0.1) !important;
  border: 1px solid rgba(4, 120, 87, 0.28) !important;
  color: #047857 !important;
}

body.page-family-utility .feature-hero .hero-icon-wrap,
body.page-family-utility .feature-hero--compact .hero-icon-wrap {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.08);
}

body.page-family-utility .panel,
body.page-family-utility .bp-ops-card,
body.page-family-utility .card {
  background: #ffffff;
  border-color: #e5e7eb;
}

@media (max-width: 700px) {
  body.page-family-utility .hero.feature-hero,
  body.page-family-utility .hero.feature-hero--compact {
    padding: 18px 16px !important;
    border-radius: 18px;
  }
}