/* ===========================================================
   pnhealthpass.com shared design layer v2 (2026-10-19)
   Brings every page in line with the 10/18 homepage: mint primary actions, deeper navy heroes, layered
   shadows, hover-lift. Overrides styles.v12.css components only (no layout changes), so it is safe on
   form and dashboard pages. Load AFTER the page's own stylesheet(s).
   Rules: no state in which content is invisible (no hide-then-reveal); honor prefers-reduced-motion.
   =========================================================== */

:root {
  --mint: #2FD6B0;
  --mint-hover: #3BE3BD;
  --mint-ink: #04382E;
  --mint-soft: #E6FBF5;
  --navy-900: #071645;
  --hand: "Caveat", "Segoe Script", cursive;
  --shadow-lift: 0 22px 44px -24px rgba(7,22,69,.42), 0 6px 14px -8px rgba(7,22,69,.18);
}

/* ---------- Primary actions: mint, like the homepage CTAs ---------- */
.btn-primary,
.bg-navy .btn-white, .hero .btn-white, .page-hero .btn-white, .final-cta .btn-white {
  background: var(--mint); color: var(--mint-ink); border-color: transparent; font-weight: 700;
  box-shadow: 0 10px 22px -12px rgba(47,214,176,.75), inset 0 2px 0 rgba(255,255,255,.3);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s, color .2s;
}
.btn-primary:hover, .btn-primary:focus-visible,
.bg-navy .btn-white:hover, .hero .btn-white:hover, .page-hero .btn-white:hover, .final-cta .btn-white:hover {
  background: var(--mint-hover); color: var(--mint-ink); transform: translateY(-2px);
  box-shadow: 0 16px 28px -14px rgba(47,214,176,.85);
}
.btn { border-radius: 999px; }
.btn-secondary { transition: transform .2s cubic-bezier(.2,.7,.3,1), background .2s, color .2s; }

/* ---------- Dark bands: deeper navy so they match the homepage hero ---------- */
.hero, .page-hero, .bg-navy {
  background: radial-gradient(120% 140% at 85% 0%, #1B3FA0 0%, rgba(27,63,160,0) 55%), linear-gradient(160deg, #0A1E5C 0%, var(--navy-900) 70%);
}
.hero .eyebrow, .page-hero .eyebrow, .bg-navy .eyebrow { color: var(--mint); }

/* ---------- Cards: layered depth + hover-lift ---------- */
.card, .feat, .price-card, .step, .faq-item, .math-card, .chan > a, .h2-lift {
  border-radius: 20px;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.card:hover, .feat:hover, .price-card:hover, .step:hover, .chan > a:hover, .h2-lift:hover {
  transform: translateY(-5px); box-shadow: var(--shadow-lift);
}
.price-card.feature { box-shadow: 0 30px 60px -34px rgba(7,22,69,.5); }
.price-card .ribbon { background: var(--mint); color: var(--mint-ink); }

/* ---------- Eyebrows + checks in the homepage voice ---------- */
.eyebrow { letter-spacing: .14em; }
.h2-check-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.h2-check-list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.h2-check-list li::before {
  content: ""; flex: 0 0 20px; height: 20px; border-radius: 50%; margin-top: 2px;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2304382E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---------- Photo frames (used by the refreshed marketing pages) ---------- */
.h2-photo { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -32px rgba(7,22,69,.45), 0 8px 18px -10px rgba(7,22,69,.22); }
.h2-photo img { display: block; width: 100%; height: auto; object-fit: cover; }
.h2-hand-note { font-family: var(--hand); font-weight: 600; line-height: 1.05; }

/* ---------- Forms: softer, clearer focus ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea {
  transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="password"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  outline: none; border-color: #2A7DE2; box-shadow: 0 0 0 4px rgba(42,125,226,.14);
}

/* ---------- Safe entrance (content always painted; stagger by duration) ---------- */
@keyframes s2In { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.s2-rv { animation: s2In calc(500ms + var(--i, 0) * 100ms) cubic-bezier(.2,.7,.3,1); }

@media (prefers-reduced-motion: reduce) {
  .s2-rv { animation: none; }
  .btn-primary, .btn-secondary, .card, .feat, .price-card, .step, .faq-item, .math-card, .chan > a, .h2-lift { transition: none; }
  .btn-primary:hover, .card:hover, .feat:hover, .price-card:hover, .step:hover, .chan > a:hover, .h2-lift:hover { transform: none; }
}