/* ============================================================
   SaltyPay — v3 site skin (override layer)
   Loaded AFTER base.css + page.css on inner pages to bring them
   in line with the v3 teal-lead homepage: white-forward heroes,
   always-white nav, teal primary buttons. Page content and the
   feature / panel / step / faq / impact components are unchanged.
   ============================================================ */

/* ---------- Nav: always-white v3 bar (was transparent over a dark hero) ---------- */
.nav {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15, 58, 65, 0.08);
}
.nav:not(.scrolled) .nav-link { color: var(--ink-soft); }
.nav .nav-link:hover, .nav:not(.scrolled) .nav-link:hover { color: var(--teal-600); }
.nav .nav-link[aria-current="page"] { color: var(--teal-600); }
.nav-toggle span, .nav:not(.scrolled) .nav-toggle span { color: var(--ink); }
/* mobile: the fullscreen menu is position:fixed; a backdrop-filter on the nav
   would make it the menu's containing block and shrink the overlay to the bar. */
@media (max-width: 860px) {
  .nav, .nav.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .nav:not(.scrolled) .nav-links .nav-link { color: var(--ink-soft); }
}

/* ---------- Primary button → teal (matches the teal-lead homepage) ---------- */
.btn-primary { background: var(--teal-600); color: var(--on-dark); }
.btn-primary:hover { background: var(--tide-800); color: var(--on-dark); box-shadow: var(--shadow-teal); }

/* ---------- Page hero: white-forward (no more dark-teal drench) ---------- */
.page-hero {
  background:
    radial-gradient(120% 95% at 86% 14%, rgba(42, 128, 139, 0.16), rgba(132, 184, 190, 0.08) 44%, transparent 72%),
    #fff;
  color: var(--ink);
}
.page-hero::before { display: none; }   /* drop the dark radial wash */
.page-hero::after  { display: none; }   /* drop the tonal bird (it was teal-on-dark) */
.page-hero .eyebrow { color: var(--teal-600); }  /* default eyebrow reads on white */
.page-hero h1 {
  color: var(--tide-900);
  font-size: clamp(2.8rem, 2rem + 4.4vw, 5rem);
  line-height: 0.98; letter-spacing: -0.035em;
}
.page-hero h1 .accent, .page-hero h1 .dot { color: var(--coral-500); }
.page-hero .lead { color: var(--ink-soft); }

/* coral period helper (parity with the homepage's .dot) */
.dot { color: var(--coral-600); }