/* ============================================================
   SKEAL — V2 "Modern Health SaaS" re-skin layer
   Loaded LAST. Keeps hero + brand colours; elevates everything else:
   refined type, hairline cards, section rhythm, trust cues.
   ============================================================ */

:root {
  --v2-line: #e7edf2;
  --v2-line-2: #eef2f6;
  --v2-tint: #eef3f7;        /* cool section wash */
  --v2-mint: #edf7ef;        /* green wash */
  --v2-card-shadow: 0 1px 2px rgba(17,38,58,.04), 0 8px 24px rgba(17,38,58,.06);
  --v2-card-hover: 0 2px 4px rgba(17,38,58,.05), 0 18px 44px rgba(17,38,58,.12);
  --v2-r: 22px;
  --v2-r-lg: 28px;
}

/* ---- typography polish ---- */
.sec-h2 { letter-spacing: -0.035em; font-weight: 800; }
.sec-sub { color: #5a6b7a; }
body { color: #45586a; }

/* ---- refined eyebrow → pill badge ---- */
.kick { background: #fff; border: 1px solid var(--v2-line); border-radius: 999px; padding: 8px 16px 8px 14px; box-shadow: 0 1px 2px rgba(17,38,58,.04); font-size: 12.5px; letter-spacing: .1em; }
.kick::before, .kick::after { content: ""; }
.kick::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.kick.green { color: var(--green-ink); }
.kick.blue { color: var(--blue-ink); }
.kick.coral { color: #e2604f; }
.sec-head { margin-bottom: 18px; }

/* ---- section rhythm: alternating surfaces ---- */
.sec.stats { background: #fff; }
.sec.prod { background: var(--v2-tint); }
.sec.onb { background: #fff; }
.sec.portal { background: var(--v2-tint); }
.sec.roi { background: #fff; }
.sec.pricing { background: var(--v2-tint); }
.sec.proof { background: #fff; }
.sec.testi { background: var(--v2-tint); }
.sec.faq { background: #fff; }
/* soft divider between same-coloured neighbours */
.sec { position: relative; }

/* ============================================================
   HERO trust strip — upgrade partner row
   ============================================================ */
.hero-partners { border-top: 1px solid var(--v2-line); padding-top: 22px; margin-top: 30px; }
.hero-partners-label { font-size: 13.5px; font-weight: 600; color: #8595a4; letter-spacing: .01em; }
.hero-partner { height: 40px; opacity: .55; }

/* ============================================================
   CARD SYSTEM
   ============================================================ */
.card-w, .stat-c, .roi-card, .price-card, .module-card,
.blog-card, .testi-card, .onb-active, .onb-ghost, .zz-text, .calc2 {
  border-color: var(--v2-line) !important;
  box-shadow: var(--v2-card-shadow);
  border-radius: var(--v2-r);
}
.card-w, .stat-c, .roi-card, .blog-card, .testi-card, .onb-active, .calc2 { background: #fff; }

/* refined navy cards: subtle inner ring + deeper gradient */
.card-navy { border-radius: var(--v2-r); }
.card-navy::after { background: linear-gradient(155deg, rgba(20,48,73,.62), rgba(9,26,42,.9)) !important; }

/* ============================================================
   2 · STATS  → bento
   ============================================================ */
.stats-cards { gap: 16px; margin-top: 48px; }
.stat-c { padding: 30px 28px; transition: transform .22s ease, box-shadow .22s ease; }
.stat-c:hover { transform: translateY(-4px); box-shadow: var(--v2-card-hover); }
.stat-ic { width: 50px; height: 50px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.stat-c h3 { font-size: 20px; letter-spacing: -0.01em; }
.stat-c p { color: #67788a; }
.stats-wide { gap: 16px; }
.wide-c { padding: 34px 36px; }
.denut-nums .n, .waste-big { font-feature-settings: "tnum"; }

/* ============================================================
   3 · PRODUCTS  → premium split panels
   ============================================================ */
.prod-grid { gap: 20px; margin-top: 46px; }
.prod-card { border-radius: var(--v2-r-lg); }
.prod-card.white { box-shadow: var(--v2-card-hover); border: 1px solid var(--v2-line); }
.prod-label { color: var(--green-ink); letter-spacing: .14em; }
.prod-card.navy .prod-label { color: #7fd49a; }
.prod-card h3 { letter-spacing: -0.03em; }
.prod-chip { background: #fff; border: 1px solid var(--v2-line); box-shadow: 0 1px 2px rgba(17,38,58,.04); }
.prod-card.navy .prod-chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #fff; }
.prod-bullets li::before { color: #7fd49a; }
.prod-shot { border-radius: 16px; box-shadow: 0 12px 30px rgba(9,26,42,.3); }

/* ============================================================
   4 · ONBOARDING
   ============================================================ */
.onb-row { gap: 16px; }
.onb-ghost { background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.onb-ghost:hover { border-color: var(--green) !important; box-shadow: var(--v2-card-hover); }
.onb-active { box-shadow: var(--v2-card-hover); border: 1px solid var(--green) !important; }
.onb-active-num { background: linear-gradient(150deg, var(--blue), var(--green)); }

/* ============================================================
   5 · PORTAL zigzag
   ============================================================ */
.zz { gap: 22px; }
.zz-text { padding: 34px 38px; }
.zz-label { color: var(--blue-ink); letter-spacing: .14em; }
.zz-shot { border-radius: var(--v2-r); box-shadow: var(--v2-card-hover); }
.compliance-ic { border-radius: 13px; box-shadow: inset 0 0 0 1px rgba(28,142,244,.12); }

/* ============================================================
   6 · ROI + calculator
   ============================================================ */
.roi-card { padding: 32px 30px; transition: transform .2s ease, box-shadow .2s ease; }
.roi-card:hover { transform: translateY(-4px); box-shadow: var(--v2-card-hover); }
.calc2 { border-radius: var(--v2-r-lg); box-shadow: var(--v2-card-hover); }
.calc2-seg.on { box-shadow: 0 2px 8px rgba(34,197,94,.18); }

/* ============================================================
   7 · PRICING
   ============================================================ */
.price-cards { gap: 16px; }
.price-card { padding: 32px 26px; transition: transform .2s ease, box-shadow .2s ease; }
.price-card:hover { transform: translateY(-5px); box-shadow: var(--v2-card-hover); }
.price-card.hot { border: 1.5px solid var(--blue) !important; box-shadow: 0 2px 6px rgba(28,142,244,.12), 0 22px 50px rgba(28,142,244,.18); transform: translateY(-8px); }
.price-card.free { background: linear-gradient(165deg, var(--v2-mint), #fff) !important; border-color: var(--v2-line) !important; }
.price-ribbon { box-shadow: 0 6px 16px rgba(28,142,244,.36); }
.price-cta { margin-top: auto; }

/* ============================================================
   8 · PROOF
   ============================================================ */
.proof-card { border-radius: var(--v2-r-lg); }
.proof-pilot { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); border-radius: 18px; }
.proof-band { border-radius: var(--v2-r); }
.proof-partner-logos { filter: grayscale(1); opacity: .8; }

/* ============================================================
   9 · TESTIMONIAL
   ============================================================ */
.testi-card { border-radius: var(--v2-r-lg); box-shadow: var(--v2-card-hover); position: relative; overflow: hidden; }
.testi-card::before { content: "\201C"; position: absolute; top: -18px; right: 28px; font-family: var(--display); font-size: 160px; line-height: 1; color: var(--green); opacity: .12; }
.testi-q { color: #41525f; }

/* ============================================================
   10 · BLOG
   ============================================================ */
.blog-photo { border-radius: var(--v2-r); }
.blog-card { transition: transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { box-shadow: var(--v2-card-hover); }
.blog-tag { border-color: var(--blue) !important; }

/* ============================================================
   11 · FAQ
   ============================================================ */
.faq-list { max-width: 820px; margin-left: auto; margin-right: auto; }
.faq-item { border: 1px solid var(--v2-line); border-radius: 16px; margin-bottom: 12px; background: #fff; box-shadow: 0 1px 2px rgba(17,38,58,.03); transition: box-shadow .2s; }
.faq-item.open { box-shadow: var(--v2-card-shadow); }
.faq-q { padding: 22px 24px; }
.faq-a p { padding: 0 24px 24px; }

/* ============================================================
   12 · FINAL CTA — bold navy w/ gradient ring
   ============================================================ */
.finalcta-card { border-radius: var(--v2-r-lg); box-shadow: 0 30px 70px rgba(9,26,42,.3); }
.finalcta-card::after { background: linear-gradient(150deg, rgba(20,48,73,.55), rgba(9,26,42,.9)) !important; }

/* ============================================================
   13 · FOOTER
   ============================================================ */
.footer-brand { border-radius: var(--v2-r-lg); }
.footer-links { border-radius: var(--v2-r-lg); }

/* ---- header subtle polish ---- */
.hdr.scrolled { background: rgba(255,255,255,.86); box-shadow: 0 1px 0 rgba(17,38,58,.05), 0 8px 28px rgba(17,38,58,.06); }