/* ============================================================================
 * home.v1.css — PN HealthPass homepage (2026-08-28 facelift).
 *
 * The old homepage was 14 sections and 10,136px of alternating white/grey
 * bands, nine of which were teasers pointing somewhere else. Every band had
 * the same weight, so nothing landed, and it spoke to six audiences at once
 * (families, employers, banks, membership groups, referral partners,
 * territory managers) which means it spoke to none of them.
 *
 * This is family-first, because that is what the business is selling right
 * now, with everyone else folded into one compact strip. Layered shadow and
 * staggered reveals instead of flat matte slabs; every icon comes from the
 * official pn-icon set, never emoji.
 *
 * Loaded AFTER styles.v12.css so it can lean on the shared tokens.
 * ========================================================================== */

/* ---------- Entrance animation ------------------------------------------ */
/* Third attempt, and the constraint is now explicit: THERE MUST BE NO STATE
   IN WHICH CONTENT IS INVISIBLE.

   Attempt 1 hid .rv in CSS and revealed with an IntersectionObserver -- the
   live homepage went blank below the hero. Attempt 2 made the hiding opt-in
   via a JS class, which failed the same way on a page that had the CSS but
   not the script. Attempt 3 used animation-fill-mode: backwards, which holds
   the from-state through the delay -- and a BACKGROUND TAB throttles
   animations, so a page opened in a new tab sat at opacity 0 until focused.

   So: no fill-mode and no delay. Before the animation runs the element is
   simply itself, fully visible. The stagger comes from varying the DURATION
   instead of the delay -- later cards take longer to arrive, which reads as a
   wave, and every element is painted from the first frame either way. */
@keyframes rvIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.rv { animation: rvIn calc(480ms + var(--i, 0) * 90ms) cubic-bezier(.2,.7,.3,1); }

/* ---------- Hero polish -------------------------------------------------- */
/* styles.v12.css sets .hero padding to "76px 0 0" -- no bottom at all. The
   trust chips made that visible as content sitting flush on the fold. */
.hero { padding-bottom: 68px; }
@media (max-width: 900px) { .hero { padding-bottom: 52px; } }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-chips span {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(139,198,232,.4);
  color: #fff; padding: 7px 14px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 500; letter-spacing: .01em;
}
.hero-chips .dot { width: 7px; height: 7px; border-radius: 50%; background: #7CF2C2; flex: 0 0 7px; }
.hero-visual { position: relative; }
.hero-float {
  position: absolute; left: -26px; bottom: 34px;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: var(--radius-md); padding: 13px 18px;
  box-shadow: var(--shadow-lg); max-width: 260px;
}
.hero-float img { width: 30px; height: 30px; flex: 0 0 30px; }
.hero-float strong { display: block; font-size: 14px; color: var(--ink); line-height: 1.25; }
.hero-float span { font-size: 12px; color: var(--ink-soft); }
@media (max-width: 900px) { .hero-float { left: 12px; bottom: 12px; } }

/* ---------- Icon tile ---------------------------------------------------- */
/* The official icons are Deep Purple outlines, so they sit on a cool tint
   rather than being recoloured — they are flat SVGs served cross-origin. */
.tile {
  width: 52px; height: 52px; border-radius: 15px;
  background: linear-gradient(150deg, #EAF3FB 0%, #DCE3EC 100%);
  border: 1px solid #D3E0EE;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  box-shadow: inset 0 1px 0 #fff, var(--shadow-sm);
}
.tile img { width: 27px; height: 27px; display: block; }

/* ---------- Feature cards ------------------------------------------------ */
.feat {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 28px 26px; box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.feat:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: #CFE0F3; }
.feat h3 { font-size: 17.5px; margin-bottom: 9px; }
.feat p { color: var(--ink-soft); font-size: 14.5px; margin: 0; line-height: 1.6; }
.feat .flag {
  display: inline-block; margin-left: 8px; vertical-align: 2px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--med-blue); background: #EAF3FB; border: 1px solid #C7DCFA;
  border-radius: var(--radius-pill); padding: 2px 9px;
}

/* ---------- The math band ------------------------------------------------ */
.math {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center;
  max-width: 940px; margin: 0 auto;
}
.math-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px 28px; text-align: center; box-shadow: var(--shadow-sm);
}
.math-card.win { border-color: var(--med-blue); box-shadow: var(--shadow-md); position: relative; }
.math-card .lbl { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.math-card .amt { font-size: clamp(34px, 5vw, 46px); font-weight: 700; color: var(--deep-trust-blue); line-height: 1.1; margin: 10px 0 6px; }
.math-card .sub { font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.55; }
.math-vs {
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}
.math-note { text-align: center; font-size: 13px; color: var(--ink-soft); margin: 26px auto 0; max-width: 620px; line-height: 1.6; }
@media (max-width: 780px) { .math { grid-template-columns: 1fr; gap: 16px; } .math-vs { text-align: center; } }

/* ---------- Numbered steps ---------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; }
.steps::before {
  content: ""; position: absolute; top: 27px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, #DCE3EC, var(--med-blue), #DCE3EC); z-index: 0;
}
.step { position: relative; z-index: 1; text-align: center; }
.step .num {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--grad-hero); color: #fff; font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,27,114,.28); border: 4px solid #fff;
}
.step h3 { font-size: 17px; margin-bottom: 8px; }
.step p { color: var(--ink-soft); font-size: 14.5px; margin: 0; line-height: 1.6; }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } .steps::before { display: none; } }

/* ---------- Pricing ------------------------------------------------------ */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; max-width: 880px; margin: 0 auto; }
.price-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 34px 30px; box-shadow: var(--shadow-sm); position: relative;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.price-card.feature { border: 2px solid var(--med-blue); box-shadow: var(--shadow-md); }
.price-card .ribbon {
  position: absolute; top: -13px; left: 30px;
  background: var(--med-blue); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px;
  border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.price-card h3 { font-size: 20px; margin-bottom: 4px; }
.price-card .who { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 20px; }
.price-card .fig { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; }
.price-card .fig strong { font-size: 44px; font-weight: 700; color: var(--deep-trust-blue); line-height: 1; }
.price-card .fig span { font-size: 14px; color: var(--ink-soft); }
.price-list { list-style: none; margin: 0 0 26px; padding: 0; }
.price-list li { position: relative; padding: 8px 0 8px 26px; font-size: 14.5px; color: var(--ink-soft); border-bottom: 1px solid #F1F4F9; }
.price-list li:last-child { border-bottom: 0; }
.price-list li::before {
  content: ""; position: absolute; left: 4px; top: 15px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--med-blue);
}
@media (max-width: 780px) { .price-grid { grid-template-columns: 1fr; } }

/* ---------- Channel strip (employers, banks, groups, pharmacies) --------- */
.chan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.chan a {
  display: block; text-decoration: none; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 24px 22px; box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.chan a:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #CFE0F3; }
.chan h3 { font-size: 16px; margin-bottom: 7px; }
.chan p { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.55; }
.chan .go { font-size: 13px; font-weight: 700; color: var(--med-blue); }
.chan .tile { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 14px; }
.chan .tile img { width: 23px; height: 23px; }
@media (max-width: 1000px) { .chan { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .chan { grid-template-columns: 1fr; } }

/* ---------- Partner recruiting band -------------------------------------- */
.partner-band { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
.partner-points { list-style: none; margin: 22px 0 0; padding: 0; }
.partner-points li { position: relative; padding: 7px 0 7px 26px; font-size: 15px; color: rgba(255,255,255,.86); }
.partner-points li::before {
  content: ""; position: absolute; left: 2px; top: 16px; width: 9px; height: 9px;
  border-radius: 50%; background: #7CF2C2;
}
.partner-cta {
  background: rgba(255,255,255,.08); border: 1px solid rgba(139,198,232,.35);
  border-radius: var(--radius-lg); padding: 30px 28px; backdrop-filter: blur(6px);
}
.partner-cta p { color: rgba(255,255,255,.82); font-size: 14px; margin: 0 0 18px; line-height: 1.6; }
@media (max-width: 900px) { .partner-band { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- FAQ ---------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 940px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.faq-item h3 { font-size: 15.5px; margin-bottom: 8px; }
.faq-item p { font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.6; }
@media (max-width: 780px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------- Motion off --------------------------------------------------- */
/* Logan's standing rule: respect prefers-reduced-motion everywhere. Content
   still arrives, it just arrives without travelling. */
@media (prefers-reduced-motion: reduce) {
  .rv { animation: none; }
  .feat, .price-card, .chan a { transition: none; }
  .feat:hover, .price-card:hover, .chan a:hover { transform: none; }
}