/* ── HealthReview human-touch components ── */
.key-points{background:#f0fdfa;border:1px solid #ccfbf1;border-left:4px solid #0f766e;border-radius:12px;padding:18px 22px;margin:28px 0}
.key-points strong.kp-head{display:block;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#0f766e;margin-bottom:10px}
.key-points ul{margin:0;padding-left:20px}
.key-points li{margin:6px 0;font-size:.95rem;line-height:1.6}
.reviewer-note{background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #d97706;border-radius:12px;padding:16px 20px;margin:28px 0;font-size:.93rem;line-height:1.65}
.reviewer-note strong.rn-head{display:block;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#b45309;margin-bottom:8px}
.toc-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:16px 22px;margin:0 0 28px;font-size:.92rem}
.toc-box strong.toc-head{display:block;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#475569;margin-bottom:8px}
.toc-box ul{margin:0;padding-left:20px;columns:2;column-gap:28px}
.toc-box li{margin:4px 0;break-inside:avoid}
.toc-box a{color:#0f766e;text-decoration:none}
.toc-box a:hover{text-decoration:underline}
@media(max-width:600px){.toc-box ul{columns:1}}
.pull-quote{font-size:1.22rem;line-height:1.6;color:#0c1a18;border-left:4px solid #0f766e;padding:6px 0 6px 20px;margin:30px 0;font-style:italic}
.hero-conditions.hero{background:linear-gradient(145deg,rgba(30,58,138,0.94) 0%,rgba(29,78,216,0.94) 55%,rgba(37,99,235,0.94) 100%),url('/images/hero-conditions.webp') right center/cover no-repeat}
.hero-symptoms.hero{background:linear-gradient(145deg,rgba(124,45,18,0.94) 0%,rgba(194,65,12,0.94) 55%,rgba(234,88,12,0.94) 100%),url('/images/hero-symptoms.webp') right center/cover no-repeat}
.hero-guides.hero{background:linear-gradient(145deg,rgba(76,29,149,0.94) 0%,rgba(109,40,217,0.94) 55%,rgba(124,58,237,0.94) 100%),url('/images/hero-guides.webp') right center/cover no-repeat}
.hero-medications.hero{background:linear-gradient(145deg,rgba(136,19,55,0.94) 0%,rgba(190,18,60,0.94) 55%,rgba(225,29,72,0.94) 100%),url('/images/hero-medications.webp') right center/cover no-repeat}
.hero-home.hero{background:linear-gradient(145deg,rgba(10,79,70,0.94) 0%,rgba(15,118,110,0.94) 45%,rgba(15,118,110,0.94) 100%),url('/images/hero-home.webp') right center/cover no-repeat}
.hero-tests.hero{background:linear-gradient(145deg,rgba(10,79,70,0.94) 0%,rgba(15,118,110,0.94) 45%,rgba(15,118,110,0.94) 100%),url('/images/hero-tests.webp') right center/cover no-repeat}
.adlabel{font-size:.68rem;letter-spacing:1.5px;text-transform:uppercase;color:#94a3b8;margin-bottom:6px;font-weight:600;text-align:center}

/* ═══════════════════════════════════════════════════════════════
   FLUENT GLASS SYSTEM — acrylic / liquid-morphism layer
   Loaded after per-page inline styles, so these rules win.
   Readability first: text surfaces stay near-opaque.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Ambient gradient-mesh canvas (fixed, GPU-cheap, no images) */
body{
  background:
    radial-gradient(1100px 520px at 12% -4%, rgba(45,212,191,.14), transparent 60%),
    radial-gradient(900px 480px at 88% 6%, rgba(96,165,250,.12), transparent 60%),
    radial-gradient(1000px 700px at 50% 110%, rgba(45,212,191,.10), transparent 60%),
    linear-gradient(180deg,#f6faf9 0%,#f2f7f6 100%) !important;
  background-attachment:fixed;
}

/* 2. Frosted sticky header */
header{
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.7) !important;
  box-shadow:0 8px 28px rgba(12,26,24,.06), inset 0 -1px 0 rgba(15,118,110,.06);
}

/* 3. Main content sheet: frosted but near-opaque so long text stays crisp */
.content .wrap, main .wrap{
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.88));
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.75);
  border-radius:20px;
  box-shadow:0 18px 50px rgba(13,148,136,.08), 0 2px 8px rgba(12,26,24,.05), inset 0 1px 0 rgba(255,255,255,.8);
  padding-top:30px;padding-bottom:30px;margin-top:22px;margin-bottom:22px;
}

/* 4. Glass cards */
.card,.meaning-card,.key-points,.reviewer-note,.toc-box,.rel,details{
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.52)) !important;
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.7) !important;
  border-radius:16px !important;
  box-shadow:0 10px 34px rgba(13,148,136,.09), 0 2px 6px rgba(12,26,24,.05), inset 0 1px 0 rgba(255,255,255,.65) !important;
  transition:transform .25s ease, box-shadow .25s ease;
}
a.card:hover,.rel a:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(13,148,136,.14), 0 3px 10px rgba(12,26,24,.06), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
/* keep semantic accent edges on glass */
.meaning-card{border-left:3px solid #0f766e !important}
.key-points{border-left:4px solid #0f766e !important}
.reviewer-note{border-left:4px solid #d97706 !important}
.key-points{background:linear-gradient(135deg,rgba(240,253,250,.85),rgba(240,253,250,.55)) !important}
.reviewer-note{background:linear-gradient(135deg,rgba(255,251,235,.88),rgba(255,251,235,.6)) !important}

/* 5. Hero: liquid sheen over the existing category gradients */
.hero{position:relative}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:0;
  background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,transparent 35%,transparent 65%,rgba(255,255,255,.06) 100%);
}
.hero .tag,.hero .hero-tag,.hero .hero-badge{
  display:inline-block;padding:6px 14px;border-radius:999px;font-size:.72rem;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}

/* 6. Frosted tables */
.tbl-scroll{border-radius:16px}
table{
  background:rgba(255,255,255,.66) !important;
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 10px 30px rgba(13,148,136,.07), inset 0 1px 0 rgba(255,255,255,.6);
}
td{background:rgba(255,255,255,.55) !important}
tr:nth-child(even) td{background:rgba(240,253,250,.6) !important}
th{
  background:linear-gradient(135deg,rgba(15,118,110,.96),rgba(17,94,84,.96)) !important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}

/* 7. FAQ accordions: glass + plus/minus affordance (no arrow chevron) */
details{padding:0 18px !important;overflow:hidden}
details>summary{padding:15px 2px !important}
details>summary::after{
  content:'+' !important;border:0 !important;width:auto !important;height:auto !important;
  font-size:1.25rem;font-weight:300;line-height:1;color:#0f766e;
  transform:none !important;margin-right:4px;flex:0 0 auto;
  transition:transform .2s ease;
}
details[open]>summary::after{transform:rotate(45deg) !important}

/* 8. Disclaimer + related reading as glass */
.disclaimer{
  background:linear-gradient(135deg,rgba(255,247,237,.9),rgba(255,247,237,.62)) !important;
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(252,211,77,.55) !important;
  box-shadow:0 10px 30px rgba(180,83,9,.08), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.rel a{
  background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.5)) !important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7) !important;
  box-shadow:0 6px 18px rgba(13,148,136,.07), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .22s ease, box-shadow .22s ease;
}

/* 9. Pills, badges, buttons: soft glass */
.back,.badge{
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.back{
  background:rgba(240,253,250,.7) !important;
  border:1px solid rgba(15,118,110,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 4px 14px rgba(13,148,136,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.back:hover{background:rgba(204,251,241,.85) !important;transform:translateY(-1px)}
.badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

/* 10. Breadcrumb on glass chip */
.bcrumb ol{
  display:inline-flex;background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);border-radius:999px;
  padding:8px 18px !important;box-shadow:0 6px 18px rgba(12,26,24,.05), inset 0 1px 0 rgba(255,255,255,.6);
}

/* 11. Footer: keep compact dark, add liquid top sheen */
footer{
  background:linear-gradient(180deg,#14332f,#0c1a18) !important;
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

/* 12. Homepage/category grids inherit the glass card treatment */
.card-arr,.trust-item,.stat,.grid > div{
  transition:transform .25s ease, box-shadow .25s ease;
}

/* 13. Motion + contrast safety */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}
/* small screens: soften blur cost, keep radius tighter */
@media(max-width:600px){
  .content .wrap,main .wrap{border-radius:16px;margin-top:14px;margin-bottom:14px;padding-top:22px;padding-bottom:22px}
  .card,.meaning-card,.key-points,.reviewer-note,.toc-box,.rel,details{border-radius:14px !important}
}

/* Hero fix: the frosted content-sheet card must not apply inside the hero — keep white text on the category gradient */
.hero .wrap{background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;margin-bottom:0 !important}