/* Phase 7g — Focus-visible parity for keyboard users (WCAG 2.4.7) */
    a:focus-visible,
    button:focus-visible,
    [role="button"]:focus-visible,
    .faq-q:focus-visible,
    .related-card:focus-visible,
    .formula-card:focus-visible,
    .mechanism-card:focus-visible,
    .compare-table tbody tr:focus-visible,
    .share-btn:focus-visible,
    .fc-btn:focus-visible,
    .feedback-btn:focus-visible,
    .nav-icon-btn:focus-visible,
    .nb-hamburger:focus-visible,
    .nb-nav-cart:focus-visible,
    .product-cta-btn:focus-visible,
    .product-cta-link:focus-visible,
    .btn-primary:focus-visible,
    .btn-accent:focus-visible,
    .article-cta .btn:focus-visible,
    .pillar-link-banner a:focus-visible,
    .breadcrumb-item:focus-visible,
    .topbar-track:focus-visible,
    .reading-path-link:focus-visible,
    .mobile-nav-links a:focus-visible,
    .nb-mobile-links li a:focus-visible,
    .toc a:focus-visible {
      outline: 2px solid #0d5756;
      outline-offset: 2px;
      border-radius: 3px;
    }

    /* Phase 7 — Mobile responsiveness block */
    /* 7b — Touch targets ≥44px */
    @media (max-width: 768px) {
      .nb-mobile-nav a,
      .nb-mobile-nav button,
      .mobile-nav-toggle,
      .faq-q,
      .cta-button,
      .product-cta-btn,
      .nb-fs-cta,
      .related-card,
      .toc a {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      }
    }
    /* 7c — Horizontal-scroll guards */
    img, video, iframe { max-width: 100%; height: auto; }
    table { display: block; overflow-x: auto; max-width: 100%; }
    pre, code { word-break: break-word; overflow-wrap: break-word; }
    p a[href] { word-break: break-word; }
    /* 7d — Hero stats stack vertically <600px */
    @media (max-width: 600px) {
      .nb-hero-stats,
      .stat-strip {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
      }
      .nb-hero-stat,
      .stat-card {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
      }
    }
    /* 7e — TOC collapsible <768px handled via JS enhancement below */
    @media (max-width: 768px) {
      nav.toc[data-collapsible="true"] > ol { display: none; }
      nav.toc[data-collapsible="true"][open] > ol { display: block; }
      nav.toc .toc-toggle {
        display: inline-flex; align-items: center; gap: 0.5rem;
        background: none; border: 0; padding: 0.5rem 0;
        font-size: 0.9rem; font-weight: 600; color: #0d5756; cursor: pointer;
        min-height: 44px;
      }
      nav.toc .toc-toggle::after { content: "▼"; font-size: 0.75rem; transition: transform 0.2s; }
      nav.toc[open] .toc-toggle::after { transform: rotate(180deg); }
    }
    @media (min-width: 769px) {
      nav.toc .toc-toggle { display: none; }
    }
    /* 7f — Body 16px min mobile + H1 clamp */
    @media (max-width: 768px) {
      body, p, li { font-size: 16px; }
      h1 { font-size: clamp(1.5rem, 4.5vw + 0.5rem, 2.8rem); }
    }
    /* 7i — font-display swap */
    @font-face { font-display: swap; }

    /* Phase 5i — sticky TOC desktop */
    @media (min-width: 1024px) {
      .article-body { display: block; position: relative; }
      nav.toc {
        position: sticky;
        top: 80px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        z-index: 10;
      }
    }

    .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #1a7375, #1a9c9e); z-index: 9999; transition: width 0.1s; }
    .article-header { position: relative; background: radial-gradient(ellipse at 30% 50%, #1a7375 0%, #0d5756 40%, #072e2e 100%); color: #fff; padding: 3.5rem 1.5rem 2.5rem; text-align: center; overflow: hidden; }
.article-header::before { content: ''; position: absolute; inset: 0; background: url('../images/brand/hf_20260323_041640_951fd892-efce-415b-87d7-bd1ff5443e99.webp') center/340px repeat; opacity: .07; pointer-events: none; z-index: 0; }
.article-header > * { position: relative; z-index: 1; }
    .article-header .breadcrumb-nav { font-size: 0.8rem; opacity: 0.7; margin-bottom: 1rem; }
    .article-header .breadcrumb-nav a { color: rgba(201,168,76,0.85); text-decoration: none; font-weight: 500; }
    .article-header h1 { font-size: clamp(1.75rem, 4.5vw, 2.6rem); font-weight: 800; max-width: 800px; margin: 0 auto 1rem; line-height: 1.2; }
    .article-header .meta { font-size: 0.85rem; color: rgba(255,255,255,.78); }
    .article-body { max-width: 820px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
    .toc { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
    .toc h3 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin: 0 0 0.75rem; }
    .toc ol { margin: 0; padding-left: 1.25rem; }
    .toc li { margin-bottom: 0.4rem; }
    .toc a { color: #1a7375; text-decoration: none; font-size: 0.9rem; }
    .toc a:hover { text-decoration: underline; }
    .key-takeaway { border-left: 4px solid #1a7375; background: #f0f8f8; border-radius: 0 10px 10px 0; padding: 1.25rem 1.5rem; margin: 1.75rem 0; }
    .key-takeaway h3 { color: #0d5756; font-size: 1rem; margin: 0 0 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
    .key-takeaway ul { margin: 0; padding-left: 1.25rem; }
    .key-takeaway li { margin-bottom: 0.5rem; font-size: 0.95rem; color: #1a7375; }
    .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; margin: 1.75rem 0; }
    .stat-card { background: linear-gradient(135deg, #1a7375, #0d5756); color: #fff; border-radius: 10px; padding: 1.25rem 1rem; text-align: center; }
    .stat-number { font-size: 2rem; font-weight: 800; color: #4ac9ca; display: block; }
    .stat-label { font-size: 0.78rem; opacity: 0.85; margin-top: 0.25rem; display: block; }
    .myth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1.75rem 0; }
    .myth-item { border-radius: 10px; border: 1px solid #e2e8f0; padding: 1rem 1.25rem; }
    .myth-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.6rem; border-radius: 20px; display: inline-block; margin-bottom: 0.5rem; }
    .myth-label.myth { background: #fee2e2; color: #dc2626; }
    .myth-label.fact { background: #dff2f2; color: #1a7375; }
    .myth-content { font-size: 0.9rem; color: #374151; line-height: 1.5; }
    .protocol-box { background: linear-gradient(135deg, #0d5756, #072e2e); border: 2px solid #d97706; border-radius: 12px; padding: 1.5rem; margin: 1.75rem 0; color: #fff; }
    .protocol-box-title { color: #fbbf24; font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
    .protocol-box p { font-size: 0.92rem; opacity: 0.9; margin: 0.5rem 0; }
    .protocol-box strong { color: #fde68a; }
    .who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.75rem 0; }
    .who-card { background: #f0f8f8; border: 1px solid #b2e0e0; border-radius: 10px; padding: 1rem; text-align: center; }
    .who-card .who-icon { font-size: 1.75rem; margin-bottom: 0.5rem; }
    .who-card h4 { font-size: 0.9rem; font-weight: 700; color: #0d5756; margin: 0 0 0.35rem; }
    .who-card p { font-size: 0.8rem; color: #374151; margin: 0; }
    h2 { font-size: 1.45rem; font-weight: 800; color: #0d5756; margin: 2rem 0 0.75rem; }
    h3 { font-size: 1.1rem; font-weight: 700; color: #1a7375; margin: 1.5rem 0 0.5rem; }
    p { line-height: 1.75; color: #374151; margin: 0 0 1rem; }
    .faq-section { margin-top: 2.5rem; }
    .faq-section h2 { margin-bottom: 1.25rem; }
    .faq-q { font-weight: 700; color: #0d5756; font-size: 1rem; margin: 1.25rem 0 0.35rem; }
    .faq-a { color: #374151; font-size: 0.95rem; margin: 0 0 1rem; line-height: 1.7; }
    .author-bio { display: flex; gap: 1rem; align-items: flex-start; background: #f8fafc; border-radius: 12px; padding: 1.25rem; margin-top: 2.5rem; }
    .author-bio img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
    .author-bio-text h4 { margin: 0 0 0.25rem; font-size: 0.95rem; color: #0d5756; }
    .author-bio-text p { margin: 0; font-size: 0.82rem; color: #64748b; line-height: 1.5; }
    .fda-disclaimer { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem 1.25rem; margin-top: 2rem; font-size: 0.78rem; color: #64748b; line-height: 1.6; }
    .article-cta { background: linear-gradient(135deg, #1a7375, #0d5756); color: #fff; border-radius: 14px; padding: 2rem 1.5rem; text-align: center; margin-top: 2.5rem; }
    .article-cta h3 { color: #4ac9ca; font-size: 1.3rem; margin: 0 0 0.75rem; }
    .article-cta p { opacity: 0.85; margin: 0 0 1.25rem; font-size: 0.95rem; }
    .btn-cta { display: inline-block; background: linear-gradient(135deg, #1a7375, #0d5756); color: #fff; padding: 0.8rem 2rem; border-radius: 30px; font-weight: 700; text-decoration: none; font-size: 0.95rem; }
    .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
    .related-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 1rem 1.25rem; text-decoration: none; color: inherit; transition: border-color 0.2s; }
    .related-card:hover { border-color: #1a7375; }
    .related-card h4 { font-size: 0.9rem; font-weight: 700; color: #0d5756; margin: 0 0 0.35rem; }
    .related-card p { font-size: 0.8rem; color: #64748b; margin: 0; }
    @media (max-width: 600px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
  
    .hero-image-wrap {
      width: 100%;
      max-width: 820px;
      margin: 0 auto 2rem;
      border-radius: 16px;
      overflow: hidden;
    }
    .hero-image-wrap img {
      width: 100%;
      height: 360px;
      object-fit: cover;
      display: block;
    }
    @media (max-width: 600px) {
      .hero-image-wrap img { height: 360px; }
    }

/* ─── Site Nav & Footer CSS ─── */
.topbar{background:#0d5756;height:40px;display:flex;align-items:center;overflow:hidden;width:100%}
.topbar-track{display:flex;align-items:center;gap:24px;white-space:nowrap;padding:0 16px;animation:topbarScroll 22s linear infinite}
.topbar-track:hover{animation-play-state:paused}
@keyframes topbarScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.topbar-item{font-family:Montserrat,'Segoe UI',sans-serif;font-size:11px;font-weight:500;letter-spacing:.08em;color:rgba(255,255,255,.9)}
.topbar-item strong{color:#E8C97A}
.topbar-sep{color:rgba(255,255,255,.35);margin:0 4px}
.nb-nav-wrapper{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #c8e6e5;transition:box-shadow .2s}
.nb-nav-wrapper.scrolled{box-shadow:0 2px 16px rgba(0,0,0,.06)}
.nb-nav{display:flex;align-items:center;justify-content:space-between;height:110px;max-width:1200px;margin:0 auto;padding:0 32px;gap:32px}
.nb-nav-logo{flex-shrink:0;text-decoration:none;line-height:0}
.nb-nav-logo img{height:160px;width:auto;transition:opacity .2s}
.nb-nav-logo img:hover{opacity:.85}
.nb-nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nb-nav-links a{font-family:Montserrat,'Segoe UI',sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#1a1a1a;text-decoration:none;transition:color .2s}
.nb-nav-links a:hover{color:#1a7375}
.nb-nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nb-nav-cart{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:#1a1a1a;transition:all .15s;text-decoration:none}
.nb-nav-cart:hover{background:#f0f8f8;color:#1a7375}
.nb-nav-cart svg{width:20px;height:20px;stroke-width:1.75}
.nb-hamburger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;border:none;background:none;transition:background .15s}
.nb-hamburger:hover{background:#f0f8f8}
.nb-hamburger span{width:22px;height:2px;background:#1a1a1a;border-radius:50px;transition:all .2s;transform-origin:center;display:block}
.nb-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nb-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nb-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nb-mobile-nav{display:none;position:fixed;inset:0;z-index:2000;pointer-events:none}
.nb-mobile-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .2s}
.nb-mobile-drawer{position:absolute;top:72px;right:0;width:240px;background:#072e2e;transform:translateX(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);padding:20px;border-radius:0 0 0 12px;box-shadow:-8px 4px 32px rgba(0,0,0,.25)}
.nb-mobile-nav.open{pointer-events:all}
.nb-mobile-nav.open .nb-mobile-overlay{opacity:1}
.nb-mobile-nav.open .nb-mobile-drawer{transform:translateX(0)}
.nb-mobile-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.nb-mobile-links li a{display:block;padding:10px 0;font-family:Montserrat,'Segoe UI',sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.08);text-decoration:none;transition:color .2s}
.nb-mobile-links li a:hover{color:#C9A84C}
.nb-mobile-cta{margin-top:16px;display:block;text-align:center;background:#C9A84C;color:#072e2e;font-family:Montserrat,sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:12px;border-radius:50px;text-decoration:none}
.nb-site-footer{background:#072e2e;padding:60px 24px 40px}
.nb-footer-inner{max-width:1000px;margin:0 auto}
.nb-footer-brand{text-align:center;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:20px}
.nb-footer-brand img{height:120px;width:auto;margin:0 auto;display:block}
.nb-footer-tagline{font-family:Montserrat,sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#C9A84C;margin:8px 0 4px}
.nb-footer-brand p{font-size:13px;color:#7aadad;line-height:1.5;max-width:480px;margin:0 auto}
.nb-footer-grid{max-width:800px;margin:24px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.nb-footer-col h4{font-family:Montserrat,sans-serif;font-size:11px;text-transform:uppercase;color:#C9A84C;letter-spacing:.08em;margin-bottom:14px}
.nb-footer-col a{display:block;font-size:13px;color:#7aadad;padding:3px 0;text-decoration:none;transition:color .2s}
.nb-footer-col a:hover{color:#fff}
.nb-footer-pay{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.nb-footer-pay span{font-family:Montserrat,sans-serif;font-size:9px;font-weight:700;color:#7aadad;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:3px 8px;border-radius:4px}
.nb-copy{background:linear-gradient(135deg,#9C7A2A 0%,#C9A84C 30%,#E8C97A 50%,#C9A84C 70%,#9C7A2A 100%);padding:12px 0;text-align:center}
.nb-copy span{font-family:Montserrat,sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#072e2e}
@media(max-width:900px){.nb-nav-links{display:none}.nb-hamburger{display:flex}.nb-mobile-nav{display:block}}
@media(max-width:600px){.nb-footer-grid{grid-template-columns:repeat(2,1fr)}}
/* ─── Responsive logo sizes ─── */
@media(max-width:900px){.nb-nav-logo img{height:128px}}
@media(max-width:480px){.nb-nav-logo img{height:108px}}

/* ── Teal Swirl Article Header (override green) ─────── */
header.article-header,
.article-header {
  background: radial-gradient(ellipse at 25% 50%, #1a7375 0%, #0d5756 45%, #072e2e 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
  padding: 56px 24px 48px !important;
  color: #fff !important;
}
header.article-header::before,
.article-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/brand/hf_20260323_041640_951fd892-efce-415b-87d7-bd1ff5443e99.webp') center/340px repeat;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
header.article-header::after,
.article-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(201,168,76,.14) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
header.article-header > *,
.article-header > * { position: relative; z-index: 1; }

/* Eyebrow text (breadcrumb-nav in creatine posts) */
header.article-header .breadcrumb-nav,
.article-header .breadcrumb-nav {
  font-family: Montserrat, 'Segoe UI', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(201,168,76,.9) !important;
  margin-bottom: 20px !important;
  opacity: 1 !important;
}
header.article-header .breadcrumb-nav a,
.article-header .breadcrumb-nav a { color: rgba(201,168,76,.9) !important; }

header.article-header h1,
.article-header h1 {
  color: #fff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.25) !important;
  max-width: 820px !important;
  margin: 0 auto 16px !important;
}
header.article-header .meta,
.article-header .meta {
  color: rgba(255,255,255,.72) !important;
  font-size: 13px !important;
  opacity: 1 !important;
}

/* Deco rings */
.nb-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(201,168,76,.12); pointer-events: none; z-index: 0; }
.nb-ring-1 { width: 480px; height: 480px; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: nbRing 45s linear infinite; }
.nb-ring-2 { width: 300px; height: 300px; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: nbRing 28s linear infinite reverse; }
@keyframes nbRing { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Fix remaining green content colors → teal */
h2 { color: #0d5756 !important; }
h3 { color: #1a7375 !important; }
.faq-q { color: #0d5756 !important; }
.key-takeaway li { color: #0d5756 !important; }
.stat-card { background: linear-gradient(135deg, #1a7375, #0d5756) !important; }
.compare-table th { background: #1a7375 !important; }
.author-bio-text h4 { color: #0d5756 !important; }
.toc a { color: #1a7375 !important; }
.toc a:hover { color: #0d5756 !important; }

/* hero-image-wrap cinematic */
.hero-image-wrap { position: relative; overflow: hidden; background: #072e2e; }
.hero-image-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 90px; background: linear-gradient(to bottom, transparent, #fff); pointer-events: none; z-index: 2; }
.hero-image-wrap img { width: 100% !important; height: 360px !important; object-fit: cover !important; display: block !important; opacity: .92; transition: transform .6s ease; }
.hero-image-wrap:hover img { transform: scale(1.015); }

@media (max-width: 640px) {
  header.article-header, .article-header { padding: 40px 16px 36px !important; }
  .nb-ring-1, .nb-ring-2 { display: none; }
  .hero-image-wrap img { height: 360px !important; }
}

/* Hero Stats Bar */
.hero-stats{display:flex;align-items:center;justify-content:center;background:#f8fafb;border-bottom:1px solid #e5edf0;flex-wrap:wrap}
.hero-stat{padding:14px 28px;text-align:center;border-right:1px solid #e5edf0;flex:1;min-width:100px}
.hero-stat:last-child{border-right:none}
.hero-stat-num{font-family:Montserrat,sans-serif;font-size:1.3rem;font-weight:800;color:#1a7375;line-height:1}
.hero-stat-label{font-size:11px;color:#6b7280;letter-spacing:.04em;margin-top:4px}
@media(max-width:540px){.hero-stat{padding:10px 12px;min-width:80px}.hero-stat-num{font-size:1rem}}

/* Alternating Section Tints */
.section-tint{background:linear-gradient(180deg,rgba(26,115,117,.018) 0%,rgba(26,115,117,.035) 50%,rgba(26,115,117,.018) 100%);margin:0 -1.5rem;padding:1.5rem 1.5rem 0.5rem;border-radius:0}
@media(max-width:768px){.section-tint{margin:0 -1rem;padding:1.5rem 1rem 0.5rem}}

/* Article-body and wrap container targeting */
.article-body>p:first-of-type::first-letter{float:left;font-size:3.2em;line-height:.85;padding:.05em .12em 0 0;font-family:Georgia,serif;font-weight:700;color:#1a7375}
.wrap>p:first-of-type::first-letter{float:left;font-size:3.2em;line-height:.85;padding:.05em .12em 0 0;font-family:Georgia,serif;font-weight:700;color:#1a7375}
.article-body img,.wrap img{cursor:zoom-in;transition:transform .3s}
.article-body img.zoomed,.wrap img.zoomed{transform:scale(1.5);z-index:100;position:relative;cursor:zoom-out;box-shadow:0 12px 40px rgba(0,0,0,.25);border-radius:8px}