/* =======================================================================
   MODERN LAYER — depth, motion and polish for every page (Oct 2026).
   Loads AFTER each page's own styles. Screen only: printouts are untouched.
   Colors follow the page's brand:
     - Lightning VIP pages (default): black + gold.
     - HealthGPS PRO pages: <html data-theme="hgps"> → logo terracotta + gold.
     - Licensed practices: practice-brand.js still sets their own colors
       (its !important rules win over the defaults here).
   Motion is switched off for people who ask their device for less motion.
   ======================================================================= */
@media screen {
  :root {
    --m-radius: 16px;
    --m-shadow: 0 1px 2px rgba(20, 14, 6, .05), 0 8px 24px rgba(20, 14, 6, .07);
    --m-shadow-lift: 0 2px 4px rgba(20, 14, 6, .06), 0 22px 48px rgba(20, 14, 6, .14);
    --m-ease: cubic-bezier(.2, .8, .2, 1);
    /* Lightning VIP */
    --m-btn: linear-gradient(135deg, #2A2A2A, #000 60%);
    --m-btn-fg: #F2E6B8;
    --m-glow: rgba(200, 167, 34, .38);
    --m-ring: rgba(200, 167, 34, .35);
    --m-edge: rgba(200, 167, 34, .55);
    --m-tint: rgba(200, 167, 34, .08);
  }
  html[data-theme="hgps"] {
    --m-btn: linear-gradient(135deg, #D98457, #B5582E 55%, #8C3A1B);
    --m-btn-fg: #fff;
    --m-glow: rgba(181, 88, 46, .38);
    --m-ring: rgba(181, 88, 46, .30);
    --m-edge: rgba(181, 88, 46, .55);
    --m-tint: rgba(181, 88, 46, .07);
    --color-accent: #8C3A1B;
    --color-bg: #FFFCF7;
    --color-rule: rgba(42, 32, 20, .12);
    --color-rule-strong: rgba(42, 32, 20, .22);
    --font-display: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  }
  html { scroll-behavior: smooth; }
  body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  html[data-theme="hgps"] body {
    font-family: var(--font-body);
    background: radial-gradient(900px 420px at 85% -120px, rgba(217, 132, 87, .14), transparent 70%), var(--color-bg);
  }

  /* ---- Banners & headers ---- */
  html[data-theme="hgps"] .wz-demo-banner {
    background: linear-gradient(90deg, #120D09, #2B1D12 50%, #120D09); color: #E7CB8E;
  }
  .wz-header, .jn-header, .topbar {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255, 252, 247, .82) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    transition: box-shadow .3s, background .3s;
  }
  html.m-scrolled .wz-header, html.m-scrolled .jn-header, html.m-scrolled .topbar { box-shadow: 0 6px 24px rgba(20, 14, 6, .08); }
  .topbar-nav { align-items: center; }
  .jn-logo { height: 40px !important; width: auto; }
  .jn-header-title { font-weight: 600; letter-spacing: -.01em; }

  /* ---- Cards ---- */
  .jn-card, .pp-card, .fc-block, .dm-card, .pv-practice, .kb-gate-card, .rs-intro,
  .next-step-card, .value-panel, .plan, .faq-item {
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow);
    transition: transform .35s var(--m-ease), box-shadow .35s var(--m-ease), border-color .35s;
  }
  /* Cards you can act on lift on hover; plain form cards stay still. */
  .dm-card:hover, .fc-tile:hover, .jn-plan-opt:hover, .pv-practice:hover, .step:hover,
  .value-item:hover, .plan:hover, .faq-item:hover, .next-step-card:hover, .wz-recency:hover {
    transform: translateY(-5px); box-shadow: var(--m-shadow-lift); border-color: var(--m-edge);
  }
  .fc-tile, .jn-plan-opt, .step, .value-item, .wz-recency {
    border-radius: 14px; transition: transform .35s var(--m-ease), box-shadow .35s var(--m-ease), border-color .35s, background .35s;
  }
  .plan.is-featured { box-shadow: 0 0 0 2px var(--m-edge), var(--m-shadow-lift); }

  /* ---- Buttons ---- */
  .wz-btn-primary, .jn-plan-opt .wz-btn-primary, .btn-primary, .topbar-cta, .fc-cta-button,
  .kb-gate-card button[type="submit"], .engine-scope button.primary, .pv-inbox-btn, .dv-btn:not(.secondary) {
    background: var(--m-btn); color: var(--m-btn-fg);
    border-radius: 12px !important;
    box-shadow: 0 8px 22px var(--m-glow), inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: transform .2s var(--m-ease), box-shadow .2s var(--m-ease), filter .2s;
  }
  .wz-btn-primary:hover, .btn-primary:hover, .topbar-cta:hover, .fc-cta-button:hover,
  .kb-gate-card button[type="submit"]:hover, .engine-scope button.primary:hover, .pv-inbox-btn:hover, .dv-btn:not(.secondary):hover {
    transform: translateY(-2px); box-shadow: 0 14px 32px var(--m-glow), inset 0 1px 0 rgba(255, 255, 255, .18); filter: brightness(1.06);
  }
  .dv-btn:not(.secondary) { border-color: transparent; }
  .wz-btn-primary:active, .btn-primary:active { transform: translateY(0); }
  .wz-btn-primary:disabled, .wz-btn-primary[disabled] { transform: none; box-shadow: none; filter: grayscale(.4); }
  .wz-btn-secondary, .jn-btn-alt, .jn-tab, .pv-new-btn, .engine-scope button.secondary, .demo-fill, .dv-btn.secondary {
    border-radius: 12px !important; transition: transform .2s var(--m-ease), box-shadow .2s, border-color .2s, background .2s;
  }
  .wz-btn-secondary:hover, .jn-btn-alt:hover, .jn-tab:hover, .pv-new-btn:hover, .engine-scope button.secondary:hover, .demo-fill:hover {
    transform: translateY(-2px); box-shadow: var(--m-shadow); border-color: var(--m-edge);
  }
  html[data-theme="hgps"] .jn-tab.is-on { background: var(--m-btn); color: #fff; border-color: transparent; }

  /* ---- Forms ---- */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"],
  input[type="date"], input[type="tel"], select, textarea {
    transition: border-color .2s, box-shadow .2s, background .2s;
  }
  input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus,
  input[type="url"]:focus, input[type="date"]:focus, input[type="tel"]:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--m-edge) !important; box-shadow: 0 0 0 4px var(--m-ring) !important;
  }

  /* ---- Step tracker (Free Lab Check, Health Scan, provider tool) ---- */
  .wz-step-btn { transition: transform .25s var(--m-ease), box-shadow .25s, background .25s, color .25s; }
  .wz-step-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--m-shadow); }
  .wz-step-btn[aria-current="step"], .wz-step-btn.is-active, .wz-step-btn.active { box-shadow: 0 8px 22px var(--m-glow); }

  /* ---- Lightning VIP home + plans pages ---- */
  .hero, .plans-hero { position: relative; }
  .hero-h, .plans-hero h1 { letter-spacing: -.015em; }
  .step-num-badge { box-shadow: 0 8px 20px var(--m-glow); transition: transform .35s var(--m-ease); }
  .step:hover .step-num-badge { transform: scale(1.1) rotate(-4deg); }
  .value-icon { transition: transform .35s var(--m-ease); }
  .value-item:hover .value-icon { transform: scale(1.12) rotate(-6deg); }
  .hero-bg-mark { animation: m-float 9s ease-in-out infinite; }
  @keyframes m-float { 50% { transform: translateY(-14px); } }

  /* ---- Provider sign-in (HealthGPS PRO) ---- */
  .kb-gate {
    background: radial-gradient(900px 500px at 85% -10%, rgba(217, 132, 87, .32), transparent 60%),
      radial-gradient(700px 420px at -10% 110%, rgba(181, 88, 46, .26), transparent 60%),
      linear-gradient(160deg, #120D09, #1E1610 60%, #261A11) !important;
  }
  .kb-gate-card { border-top: 0 !important; border-radius: 22px !important; box-shadow: 0 40px 80px rgba(0, 0, 0, .45) !important; animation: m-rise .6s var(--m-ease) both; }
  .kb-gate-card h1 { font-family: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -.02em; }
  .kb-gate-card, .kb-gate-card input, .kb-gate-card button { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
  .kb-gate-card button[type="submit"] { background: linear-gradient(135deg, #D98457, #B5582E 55%, #8C3A1B) !important; color: #fff !important; box-shadow: 0 10px 26px rgba(181, 88, 46, .4); }
  .kb-gate-card input:focus { border-color: rgba(181, 88, 46, .55) !important; box-shadow: 0 0 0 4px rgba(181, 88, 46, .25) !important; }
  .kb-gate-join a { color: #8C3A1B; font-weight: 600; }
  @keyframes m-rise { from { opacity: 0; transform: translateY(18px) scale(.98); } }

  /* ---- Scroll reveal (js/modern.js adds .m-reveal / .m-in) ---- */
  .m-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--m-ease), transform .7s var(--m-ease); transition-delay: var(--m-d, 0s); }
  .m-reveal.m-in { opacity: 1; transform: none; }
}

@media screen and (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .m-reveal { opacity: 1; transform: none; }
}