/* Holty glass layer: shared core (all pages). Page files add their own surface map.
   G1 frost · G2 sheen · G3 glow · G4 glass pill. Scoped under body.glass for the review toggle. */
body.glass {
  --g-frost: rgba(255,255,255,0.56);
  --g-frost-strong: rgba(255,255,255,0.74);
  --g-edge: rgba(255,255,255,0.82);
  --g-blur: blur(22px) saturate(170%);
  --g-blur-sm: blur(12px) saturate(160%);
  --g-hi: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 0 1px rgba(255,255,255,0.35);
  --g-depth: 0 1px 1px rgba(18,22,36,0.03), 0 8px 20px rgba(18,40,60,0.05), 0 28px 56px -16px rgba(20,70,60,0.16);
  --g-gloss: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.06) 46%, rgba(255,255,255,0) 52%);
  --g-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* G1 frost: shared surfaces */
body.glass .pricing-card {
  background-color: var(--g-frost) !important;
  background-image: none !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-hi), var(--g-depth) !important;
}

/* G3 glow: final CTA */
body.glass .pricing { background:
    radial-gradient(34% 56% at 30% 34%, rgba(63,186,115,0.24) 0%, transparent 70%),
    radial-gradient(36% 60% at 72% 46%, rgba(70,180,205,0.24) 0%, transparent 70%), #F7F9FB !important; }

/* G4 glass pills: primary green */
body.glass :is(.hero-cta, .pricing-cta, .roi-cta, .nav-cta, .blog-latest-cta a:not(.alt), .contact-submit, .re-summary-cta) {
  background: var(--g-gloss), linear-gradient(150deg, #54CB88 0%, #2F9E5B 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.10), inset 0 0 0 1px rgba(255,255,255,0.14), 0 2px 6px rgba(47,158,91,0.22), 0 12px 30px -6px rgba(47,158,91,0.45) !important;
}
body.glass :is(.hero-cta, .pricing-cta, .roi-cta, .nav-cta, .blog-latest-cta a:not(.alt), .contact-submit, .re-summary-cta):hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.10), 0 4px 10px rgba(47,158,91,0.25), 0 20px 44px -8px rgba(47,158,91,0.55) !important;
}
/* G4: dark pill */
body.glass .pf-card-cta { background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0) 52%), #121624 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 24px -8px rgba(18,22,36,0.45); }
body.glass .pf-card-cta:hover { background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 52%), #2F8F58 !important; }
/* G4: frosted secondary */
body.glass :is(.hero-cta-ghost, .aio-cta-ghost, .ai-ask-btn, .blog-latest-cta a.alt, .contact-cancel) {
  background: rgba(255,255,255,0.5) !important;
  -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm);
  border: 1px solid rgba(255,255,255,0.9) !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(18,22,36,0.05), 0 10px 24px -8px rgba(20,70,60,0.18) !important;
}
body.glass :is(.hero-cta-ghost, .aio-cta-ghost) { background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(229,244,249,0.55) 100%) !important; border-color: rgba(18,22,36,0.16) !important; }
body.glass :is(.hero-cta-ghost, .aio-cta-ghost, .ai-ask-btn, .blog-latest-cta a.alt, .contact-cancel):hover { background: rgba(255,255,255,0.92) !important; border-color: var(--dark) !important; }

/* Footer: glow on navy + glass badge */
body.glass footer { background:
    radial-gradient(40% 90% at 8% 0%, rgba(63,186,115,0.20) 0%, transparent 70%),
    radial-gradient(36% 80% at 94% 100%, rgba(70,180,205,0.16) 0%, transparent 70%), #0F172A !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
body.glass .footer-eu-badge { background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm); }

/* Phones: lighter blur, px-sized glows */
@media (max-width: 640px) {
  body.glass { --g-blur: blur(10px) saturate(150%); --g-blur-sm: blur(6px) saturate(140%); --g-depth: 0 1px 1px rgba(18,22,36,0.03), 0 12px 28px -12px rgba(20,70,60,0.14); }
  body.glass .pricing { background:
      radial-gradient(380px 420px at 10% 30%, rgba(63,186,115,0.22) 0%, transparent 70%),
      radial-gradient(400px 460px at 95% 62%, rgba(70,180,205,0.22) 0%, transparent 70%), #F7F9FB !important; }
  body.glass footer { background:
      radial-gradient(360px 300px at 0% 0%, rgba(63,186,115,0.20) 0%, transparent 70%),
      radial-gradient(340px 300px at 100% 100%, rgba(70,180,205,0.16) 0%, transparent 70%), #0F172A !important; }
}
@media (prefers-reduced-transparency: reduce) {
  body.glass :is(.pricing-card, .hero-cta-ghost, .aio-cta-ghost, .ai-ask-btn) { background-color: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}


/* ===== Product pages (body.glass.gp): Retention Engine, Patient App, Messenger Bots, Telemedicine, AI Intake, Call Intelligence ===== */
/* Hero: green behind the headline + CTAs, light blue behind the mockup, mint blend, bottom fade, grain */
body.glass.gp .v-hero { position: relative; isolation: isolate; background:
    linear-gradient(180deg, rgba(255,255,255,0) calc(100% - 160px), #fff 100%),
    radial-gradient(36% 30% at 50% 10%, var(--vh-top, rgba(63,186,115,0.20)) 0%, transparent 72%),
    radial-gradient(26% 28% at 14% 24%, var(--vh-side, rgba(84,203,136,0.13)) 0%, transparent 70%),
    radial-gradient(26% 28% at 86% 24%, var(--vh-side, rgba(84,203,136,0.11)) 0%, transparent 70%),
    radial-gradient(30% 20% at 50% 40%, rgba(110,200,180,0.13) 0%, transparent 74%),
    radial-gradient(54% 42% at 50% 74%, rgba(70,180,205,0.26) 0%, rgba(70,180,205,0.08) 52%, transparent 78%),
    #fff !important; }
body.glass.gp .v-hero.tint-teal { --vh-top: rgba(70,180,205,0.20); --vh-side: rgba(84,203,170,0.12); }
body.glass.gp .v-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.07; mix-blend-mode: multiply; background-image: var(--g-grain); background-size: 160px 160px; }

/* Content sections: soft teal + light-blue glows, mirrored every other section */
body.glass.gp main > section:not(.v-hero):not(.pricing):not(.blog-latest):not(.faq):not(.ab-sec):not(.ab-proof) {
  --gs-glows: radial-gradient(30% 44% at 16% 40%, rgba(70,180,205,0.12) 0%, transparent 70%), radial-gradient(38% 52% at 80% 62%, rgba(70,180,205,0.17) 0%, transparent 72%);
  background: var(--gs-glows), var(--gs-base, #fff) !important; }
body.glass.gp main > section:nth-of-type(even):not(.v-hero):not(.pricing):not(.blog-latest):not(.faq):not(.ab-sec):not(.ab-proof) {
  --gs-glows: radial-gradient(30% 44% at 84% 40%, rgba(70,180,205,0.12) 0%, transparent 70%), radial-gradient(38% 52% at 20% 62%, rgba(70,180,205,0.17) 0%, transparent 72%); }
body.glass.gp main > section:is(.ix-sec.alt, .proof, .own, .fm, .re, .report, .bk3, .features, .aio-chapter.alt) { --gs-base: #F7F9FB; }
body.glass.gp main > section.own { --gs-glows: radial-gradient(40% 50% at 30% 62%, rgba(63,186,115,0.13) 0%, transparent 70%), radial-gradient(40% 50% at 72% 62%, rgba(70,180,205,0.16) 0%, transparent 70%) !important; }

/* G1 frost on content cards (mockups untouched) */
body.glass.gp :is(.mini, .bento-tile, .step, .feat-card, .rt-card, .rt-intake, .supp-card, .contrast, .compare, .re-summary-bar, .ci-how-c, .oc) {
  background: var(--g-frost) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-hi), var(--g-depth) !important; }
/* "You own it" panel: mint glass */
body.glass.gp .own-panel {
  background: linear-gradient(135deg, rgba(234,247,240,0.74) 0%, rgba(229,244,249,0.64) 100%) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid rgba(63,186,115,0.22) !important; box-shadow: var(--g-depth) !important; }

@media (max-width: 640px) {
  body.glass.gp .v-hero { background:
      linear-gradient(180deg, rgba(255,255,255,0) calc(100% - 120px), #fff 100%),
      radial-gradient(420px 360px at 50% 4%, var(--vh-top, rgba(63,186,115,0.20)) 0%, transparent 70%),
      radial-gradient(480px 560px at 50% 72%, rgba(70,180,205,0.24) 0%, rgba(70,180,205,0.08) 50%, transparent 72%), #fff !important; }
  body.glass.gp main > section:not(.v-hero):not(.pricing):not(.blog-latest):not(.faq):not(.ab-sec):not(.ab-proof) {
    --gs-glows: radial-gradient(380px 360px at 0% 14%, rgba(70,180,205,0.12) 0%, transparent 70%), radial-gradient(440px 520px at 100% 66%, rgba(70,180,205,0.17) 0%, transparent 72%); }
  body.glass.gp main > section:nth-of-type(even):not(.v-hero):not(.pricing):not(.blog-latest):not(.faq):not(.ab-sec):not(.ab-proof) {
    --gs-glows: radial-gradient(380px 360px at 100% 14%, rgba(70,180,205,0.12) 0%, transparent 70%), radial-gradient(440px 520px at 0% 66%, rgba(70,180,205,0.17) 0%, transparent 72%); }
  body.glass.gp main > section.own { --gs-glows: radial-gradient(380px 420px at 0% 40%, rgba(63,186,115,0.13) 0%, transparent 70%), radial-gradient(400px 460px at 100% 76%, rgba(70,180,205,0.16) 0%, transparent 70%) !important; }
  body.glass.gp :is(.bento-tile, .feat-card, .mini) { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,0.84) !important; }
}