/* ===========================================================
   pnhealthpass.com form pages (family, employer-signup, employer) v1 (2026-10-19)
   Visual layer only, loaded AFTER site.v2.css. Brings the .hero.pnhp aurora
   pages in line with the 10/18 homepage: deep-navy photo hero, elevated form
   cards, mint primary buttons, a photo side panel beside the form on wide screens.
   No markup a script reads was moved; ids/classes the scripts use are untouched.
   Motion rule: NO state in which content is invisible (no delay, no fill-mode;
   stagger by duration only). Honors prefers-reduced-motion.
   =========================================================== */

/* ---------- Hero: deep navy band with a photo, like the homepage ---------- */
.hero.pnhp {
  background: radial-gradient(120% 140% at 85% 0%, #1B3FA0 0%, rgba(27,63,160,0) 55%), linear-gradient(160deg, #0A1E5C 0%, #071645 70%);
  isolation: isolate;
}
.hero.pnhp::before, .hero.pnhp::after { z-index: 1; }
.hero.pnhp .hp-hero-media { position: absolute; inset: 0; z-index: 0; display: block; margin: 0; }
.hero.pnhp .hp-hero-media picture { display: block; width: 100%; height: 100%; }
.hero.pnhp .hp-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--hp-pos, 50% 35%); }
.hero.pnhp .hp-hero-media::after { /* navy wash so the copy always reads */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,22,69,.74) 0%, rgba(7,22,69,.86) 100%);
}
.hero.pnhp .inner { z-index: 3; }
.hero.pnhp .float-ico { z-index: 2; }
.hero.pnhp .eyebrow { color: #2FD6B0; }
.hero.pnhp .sub { color: rgba(255,255,255,.88); }
.hero .dot { background: #2FD6B0; box-shadow: 0 0 0 4px rgba(47,214,176,.25); }

@media (min-width: 900px) {
  .hero.pnhp.hp-split { text-align: left; padding: 76px 0 92px; }
  .hero.pnhp.hp-split .inner { max-width: 1120px; padding: 0 24px; }
  .hero.pnhp.hp-split .inner > * { max-width: 560px; }
  .hero.pnhp.hp-split .mark { margin: 0 0 18px; }
  .hero.pnhp.hp-split h1 { font-size: clamp(38px, 4.2vw, 52px); line-height: 1.06; }
  .hero.pnhp.hp-split .sub { margin-left: 0; margin-right: 0; font-size: 16.5px; line-height: 1.6; }
  .hero.pnhp.hp-split .float-ico { display: none; }
  .hero.pnhp.hp-split .hp-hero-media { left: 40%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
  .hero.pnhp.hp-split .hp-hero-media::after {
    background: linear-gradient(90deg, rgba(7,22,69,.7) 0%, rgba(7,22,69,.2) 50%, rgba(7,22,69,.05) 100%),
                linear-gradient(0deg, rgba(7,22,69,.55) 0%, rgba(7,22,69,0) 40%);
  }
}
/* employer.html: the company-name span keeps an inline skeleton padding on the invalid-link path */
#heroCompany:not(.skeleton) { padding: 0 !important; }

/* ---------- Cards: elevated, layered, rounded ---------- */
main .card {
  border-radius: 24px; border-color: #E3E9F3;
  box-shadow: 0 30px 60px -36px rgba(7,22,69,.42), 0 10px 22px -14px rgba(7,22,69,.20), 0 1px 0 rgba(255,255,255,.9) inset;
}
main .card h2 { color: #0A1E5C; }
/* The card holding a form stays put on hover (no lift while someone is typing). */
#signupCard, #applyCard, #enrollCard { border-top: 4px solid #2FD6B0; }
#signupCard:hover, #applyCard:hover, #enrollCard:hover, #successCard:hover, #invalidCard:hover {
  transform: none; box-shadow: 0 30px 60px -36px rgba(7,22,69,.42), 0 10px 22px -14px rgba(7,22,69,.20);
}
.benefits li::before { background: #2FD6B0; box-shadow: 0 0 0 3px rgba(47,214,176,.18); }

/* Pull the first card up over the hero for depth (wide screens only). */
@media (min-width: 900px) {
  main { position: relative; z-index: 4; padding-top: 0; }
  main > .card:first-of-type, #mainContent > .card:first-child { margin-top: -44px; }
}

/* ---------- Mint primary buttons ---------- */
main .btn {
  background: #2FD6B0; color: #04382E; border-radius: 999px; min-height: 50px;
  box-shadow: 0 12px 24px -12px rgba(47,214,176,.8), inset 0 2px 0 rgba(255,255,255,.3);
}
main .btn:hover, main .btn:focus-visible { background: #3BE3BD; color: #04382E; box-shadow: 0 16px 28px -14px rgba(47,214,176,.9); }
main .btn .spinner { border-color: rgba(4,56,46,.25); border-top-color: #04382E; }

/* Plan + payment toggles pick up the mint accent (aria-pressed is still the source of truth). */
.plan-pick button { border-radius: 14px; min-height: 64px; }
.plan-pick button[aria-pressed="true"], .pay-tabs button[aria-pressed="true"] {
  border-color: #2FD6B0; background: #E6FBF5; box-shadow: 0 0 0 3px rgba(47,214,176,.22);
}
.total-row { background: linear-gradient(135deg, #EEF5FE 0%, #E7F8F3 100%); border-color: #CFE6EE; border-radius: 14px; }
.total-row strong { color: #0A1E5C; }

/* ---------- Photo side panel beside the form (wide screens only) ---------- */
.hp-side { display: none; }
@media (min-width: 1100px) {
  main.hp-has-side {
    max-width: 1120px; display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
    column-gap: 40px; align-items: start;
  }
  main.hp-has-side > * { grid-column: 1; }
  main.hp-has-side > .hp-side {
    display: block; grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 96px; margin-top: 40px;
  }
}
.hp-side-photo { position: relative; border-radius: 24px; overflow: hidden; margin: 0;
  box-shadow: 0 34px 64px -34px rgba(7,22,69,.5), 0 10px 20px -12px rgba(7,22,69,.24);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; }
.hp-side-photo:hover { transform: translateY(-5px); box-shadow: 0 40px 70px -34px rgba(7,22,69,.55), 0 12px 24px -12px rgba(7,22,69,.26); }
.hp-side-photo picture { display: block; }
.hp-side-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--hp-pos, 50% 40%); }
.hp-side-note { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; padding: 14px 18px; border-radius: 16px;
  background: rgba(255,255,255,.94); color: #0A1E5C; box-shadow: 0 16px 34px -18px rgba(7,22,69,.5);
  font-family: "Caveat", "Segoe Script", cursive; font-weight: 600; font-size: 26px; line-height: 1.1; }

/* ---------- Entrance: content always painted; stagger by duration only ---------- */
.reveal { opacity: 1; transform: none; animation: s2In .5s cubic-bezier(.2,.7,.3,1); animation-delay: 0s; animation-fill-mode: none; }
.reveal.d1 { animation-duration: .55s; } .reveal.d2 { animation-duration: .65s; } .reveal.d3 { animation-duration: .75s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  .hp-side-photo { transition: none; } .hp-side-photo:hover { transform: none; }
  main .btn:hover { transform: none; }
}