/* Global body styling */
body {
  margin: 0;
  background: #0b1220;
  color: #e6edf3;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

/* Inline header safety (looks like the normal header) */
.mscp-header--inline { position: relative; z-index: 5; }
.site-header .header-inner { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.site-nav { display:flex; gap:14px; flex-wrap:wrap; }
html, body { overflow-x:hidden; }

/* Bulletproof header/footer styles */
.site-header, .site-footer { background:#0e1621; border-bottom:1px solid #1f2a37 }
.site-header .container, .site-footer .container { max-width:1280px; margin:0 auto; padding:16px 32px; box-sizing:border-box; }
.main-nav a { margin-right:16px }
.cta-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:24px 0 }
.btn { display:inline-block; padding:10px 14px; border-radius:8px; background:var(--brand-green,#27c07d); color:#0b1220; text-align:center }

#global-header.site-header,
#global-footer.site-footer { display:block !important; visibility:visible !important; opacity:1 !important; }
.page-main, .site-header .container, .site-footer .container { max-width: 1280px; margin: 0 auto; }

/* Layout safety (main width is set by .page-main / .wrapper / .product-page — not here) */
.container, .content, .learn-body, .page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
  background: #0b1220;
  color: #e6edf3;
}

/* Container fix for learn and research articles */
.content-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 2rem;
  box-sizing: border-box;
}

.learn-article-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.learn-article-container h1,
.learn-article-container h2,
.learn-article-container h3 {
  text-align: left;
}

/* Learn Article Template Guards */
.learn-article-container .card { 
  margin: 1rem 0; 
  background: var(--surface, #111823);
  border: 1px solid var(--border, #223046);
  border-radius: 12px;
  padding: 24px;
}

.topic-hero h1 { 
  margin-bottom: .75rem; 
  border-bottom: 1px solid var(--border, #223046); 
  padding-bottom: .5rem; 
}

.faqs dt { 
  font-weight: 600; 
  margin-top: .75rem; 
  color: var(--text, #ffffff);
}

.faqs dd { 
  margin: .25rem 0 0 0; 
  color: var(--text-muted, #9ca3af); 
}

.pill-row { 
  display: flex; 
  flex-wrap: wrap; 
  gap: .5rem; 
  margin: 1rem 0;
}

.video-grid { 
  display: grid; 
  grid-template-columns: repeat(3, minmax(0,1fr)); 
  gap: .75rem; 
}

.card-grid { 
  display: grid; 
  grid-template-columns: repeat(3, minmax(0,1fr)); 
  gap: .75rem; 
}

.notice { 
  border-left: 3px solid #f7c2682e; 
  background: rgba(247, 194, 104, 0.05);
}

.subtle {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--text-muted, #9ca3af);
}

.subtle a {
  color: var(--primary, #22c55e);
  text-decoration: none;
}

.subtle a:hover {
  text-decoration: underline;
}

/* CTA Button Spacing */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.cta-row .btn {
  margin-right: 0.5rem;
}

.cta-row .btn:last-child {
  margin-right: 0;
}

/* Global brand colors */
:root { 
  --brand-green: #27c07d; 
  --brand-green-dark: #1ea269; 
}

/* Force consistent typography across all elements */
html, body, button, input, select, textarea, a, p, h1, h2, h3, h4, h5, h6 {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 400;
}

/* Global button — force green everywhere */
a.btn, button.btn, .btn {
  display: inline-block;
  background: var(--brand-green) !important;
  color: #0b1b14 !important;
  border: 0 !important;
  padding: 0.65rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none !important;
}

a.btn:hover, button.btn:hover, .btn:hover { 
  background: var(--brand-green-dark) !important; 
}

/* If anything used outline/secondary, make it green too */
.btn-outline, .btn-secondary, .btn-alt, .btn-dark, .btn-ghost {
  background: var(--brand-green) !important;
  color: #0b1b14 !important;
  border: 0 !important;
}

/* NEW badge for recent articles (last 7 days) */
.card .badge-new {
  margin-left: 0.5rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.35rem;
  background: #27c07d;
  color: #0b1b14;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
}

:root{
  --brand-green:#27c07d;
  --brand-green-dark:#1ea269;
}

/* Force all "button-like" links & buttons to your green */
.btn, a.btn, button.btn,
.btn-outline, a.btn-outline, button.btn-outline,
.btn-dark, a.btn-dark, button.btn-dark,
.btn-ghost, a.btn-ghost, button.btn-ghost {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.75rem 1rem;
  border-radius:.75rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid var(--brand-green) !important;
  color:#0b1a14 !important;
  background:var(--brand-green) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.08);
}

.btn:hover, a.btn:hover, button.btn:hover,
.btn-outline:hover, a.btn-outline:hover, button.btn-outline:hover,
.btn-dark:hover, a.btn-dark:hover, button.btn-dark:hover,
.btn-ghost:hover, a.btn-ghost:hover, button.btn-ghost:hover {
  background:var(--brand-green-dark) !important;
  border-color:var(--brand-green-dark) !important;
  transform:translateY(-1px);
}

/* Safety: any CTA-ish thing that slipped through — exclude topics page so contextual links stay text */
body:not(.page-topics) a[href*="cerule.com/affiliate"],
body:not(.page-topics) a[href*="mailto:"],
body:not(.page-topics) a[href*="/how-it-works"],
body:not(.page-topics) a[href*="/affiliate/"],
body:not(.page-topics) a[href*="/ibo"],
body:not(.page-topics) a[href*="enrollment"] {
  border:1px solid var(--brand-green) !important;
  background:var(--brand-green) !important;
  color:#0b1a14 !important;
  padding:.75rem 1rem;
  border-radius:.75rem;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
}

/* --- Video section: consistent 3-up cards --- */
.video-section { margin-top: 1.25rem; }
.video-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1024px) { .video-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .video-row { grid-template-columns: 1fr; } }

.video-card {
  border: 1px solid rgba(255,255,255,.06);
  border-radius: .75rem;
  background: rgba(255,255,255,.02);
  overflow: hidden;
}

/* 16:9 responsive embed */
.video-embed { position: relative; width: 100%; padding-top: 56.25%; }
.video-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0;
  display: block;
}

/* Optionally hide section if no videos injected */
.hidden { display: none !important; }

:root{ --brand-green:#27c07d; --brand-green-dark:#1ea269; }

/* Aggressive "make it a green button" pass — exclude topics page so contextual links stay text */
:is(a,button)[class*="btn"],
a[role="button"], .button, .btn, .cta a, .article-cta a, .footer-cta a,
body:not(.page-topics) a[href*="/how-it-works"],
a[href*="global.cerule.com/affiliate/enrollment"],
a[href*="global.cerule.com/affiliate/Affiliate"] {
  display:inline-flex !important;
  align-items:center; justify-content:center;
  gap:.5rem; padding:.7rem 1rem;
  border-radius:.75rem;
  font-weight:600;
  text-decoration:none !important;
  border:1px solid var(--brand-green) !important;
  background:var(--brand-green) !important;
  color:#0b1a14 !important;
  box-shadow:0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.08);
}
:is(a,button)[class*="btn"]:hover,
.button:hover, .btn:hover, .cta a:hover, .article-cta a:hover, .footer-cta a:hover {
  background: var(--brand-green-dark) !important;
  border-color: var(--brand-green-dark) !important;
  transform: translateY(-1px);
}

/* Removed specific How It Works styling - use general nav styling */

/* --- Unified page container (matches Contact look) --- */
.page-wrap { max-width: 980px; margin: 0 auto; padding: 24px; }
.card { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.02); }
.card--padded { padding: 24px; }

/* --- Global header layout --- */
.site-header { position: sticky; top: 0; z-index: 50; background: #0b1116; }
.header-inner {
  max-width: 1100px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
}

/* brand */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-dot { width: 10px; height: 10px; border-radius: 9999px; background: #27c07d; display: inline-block; }
.brand-name { color: #fff; font-weight: 700; }

/* nav = clean flex with GAP (no margins to avoid "indent") */
.site-header .nav {
  display: flex; align-items: center; gap: 22px;
  padding: 0; margin: 0;
}
.site-header .nav a {
  display: inline-block;
  margin: 0 !important; padding: 0 !important;   /* <- removes the odd indent */
  color: #ffffff !important; background: transparent !important; border: 0 !important;
  font-weight: 600; text-decoration: none !important;
  line-height: 1; /* keeps vertical alignment tight */
  transition: color .15s ease, opacity .15s ease;
}
/* hover/active match all links; no green pills */
.site-header .nav a:hover { color: #d1d1d1 !important; opacity: .95; }
.site-header .nav a.active { color: #b7ffdd !important; text-decoration: underline !important; }

/* nuke any stray list bullets if <ul><li> used */
.site-header .nav, .site-header .nav li { list-style: none; }

/* ensure global .btn rules never touch header links */
.site-header .nav a.btn { all: unset; cursor: pointer; color: #fff; font-weight: 600; }

/* === Global Header v46 === */
.site-header { position: sticky; top: 0; z-index: 50; background:#0d1117; border-bottom:1px solid rgba(255,255,255,.06); }
.site-header .container { max-width: 1100px; margin: 0 auto; padding: 14px 16px; }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-dot { width:10px; height:10px; border-radius:999px; background:#27c07d; display:inline-block; }
.brand-text { color:#e6edf3; font-weight:600; }
.nav { display:flex; align-items:center; gap:18px; }
.nav-link { 
  color:#c9d1d9; 
  text-decoration:none; 
  padding:8px 10px; 
  border-radius:10px;
  margin:0 !important;  /* kill any inherited margins */
  border:0 !important;  /* kill any inherited borders */
  background:transparent !important;  /* kill any inherited backgrounds */
}
.nav-link:hover { background:rgba(255,255,255,.06) !important; color:#fff; }
.nav-link.active { background:#1ea26922 !important; color:#fff; }

/* Mobile */
.nav-toggle { display:none; background:transparent; color:#c9d1d9; font-size:22px; border:0; }
@media (max-width: 900px){
  .nav { display:none; position:absolute; right:16px; top:58px; background:#0d1117; border:1px solid rgba(255,255,255,.06); padding:12px; border-radius:12px; flex-direction:column; min-width:220px; }
  .nav.open { display:flex; }
  .nav-toggle { display:block; }
}
/* Ensure page content never hides under sticky header */
main, .page { scroll-margin-top: 72px; }

/* Partners: vertical stack */
.stacked-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;               /* space between boxes */
  max-width: 900px;        /* optional: keep a nice reading width */
  margin: 0 auto;          /* center inside container */
}
.stacked-cards .card {
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}
.stacked-cards .btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ================================
   MyStemCellPower Header (v50)
   Scope: .mscp-header ONLY
   ================================ */
.mscp-header { position: sticky; top: 0; z-index: 50; background:#0d1117; border-bottom:1px solid rgba(255,255,255,.06); }
.mscp-header .hdr-container { max-width: 1100px; margin: 0 auto; padding: 14px 16px; }
.mscp-header .hdr-wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* Brand */
.mscp-header .hdr-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.mscp-header .hdr-dot { width:10px; height:10px; border-radius:999px; background:#27c07d; display:inline-block; }
.mscp-header .hdr-text { color:#e6edf3; font-weight:600; }

/* NAV — header links ONLY (uniform style for ALL: white + bold + no underline) */
.mscp-header .hdr-nav { display:flex; align-items:center; gap:18px; }
.mscp-header .nav-item {
  color:#ffffff !important;              /* WHITE */
  font-weight:700 !important;            /* BOLD */
  text-decoration:none !important;       /* NO underline ever */
  text-decoration-color:transparent !important;
  border:0 !important;                   /* kill any border-underline hacks */
  padding:8px 10px;
  border-radius:10px;
  line-height:1.2;
}
.mscp-header .nav-item:hover { background:rgba(255,255,255,.06); }

/* Active state: keep white+bold; subtle dark pill only (no color/underline) */
.mscp-header .nav-item.is-active { background:#1a1f24; }

/* Mobile */
.mscp-header .hdr-toggle { display:none; background:transparent; color:#c9d1d9; font-size:22px; border:0; }
@media (max-width: 900px){
  .mscp-header .hdr-nav { display:none; position:absolute; right:16px; top:58px; background:#0d1117;
    border:1px solid rgba(255,255,255,.06); padding:12px; border-radius:12px; flex-direction:column; min-width:220px; }
  .mscp-header .hdr-nav.open { display:flex; }
  .mscp-header .hdr-toggle { display:block; }
}

/* Keep content clear of sticky header */
main, .page { scroll-margin-top: 72px; }

/* ===== Global Mobile Hygiene ===== */

/* Prevent sideways scrolling from rogue elements */
html, body { overflow-x: hidden; }

/* ---- Container scale & mobile padding ---- */
:root {
  --container-max: 1080px;   /* desktop cap */
  --container-pad: 16px;     /* default side padding */
  --container-pad-sm: 14px;  /* mobile side padding */
}

.container,
.header-inner,
.footer-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* tighten on small screens */
@media (max-width: 480px) {
  .container,
  .header-inner,
  .footer-inner {
    padding-left: var(--container-pad-sm);
    padding-right: var(--container-pad-sm);
  }
}

/* wrap header links on small screens so they don't push width */
.site-header .header-inner { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.site-header nav { display:flex; gap:14px; flex-wrap:wrap; }

/* Buttons row shouldn't overflow */
.btn-row { display: flex; gap: .65rem; flex-wrap: wrap; }

/* Media should never overflow width */
img, video, svg, canvas { max-width: 100%; height: auto; }

/* Responsive iframes (YT, maps, etc.) */
.video-embed { position: relative; width: 100%; aspect-ratio: 16/9; }
.video-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* Cards: allow long words/URLs to wrap instead of blowing layout */
.card h1, .card h2, .card h3, .card h4, .card p, .card a { overflow-wrap: anywhere; word-break: break-word; }

/* Slightly tighter type on phones */
@media (max-width: 480px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.05rem; }
}

/* ===== Research index layout ===== */

/* Card grid: 1 col on phones, 2 on tablets, 3 on desktop */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Card padding + visual consistency */
.card { padding: 1.0rem 1.0rem; border-radius: 14px; }

/* Research hero spacing on mobile */
.page-hero { margin-bottom: 14px; }

/* Video grid under "Featured Videos" */
.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ensure nested .video-grid doesn't double-wrap (it exists once) */
.video-grid .video-grid { display: contents; }

/* CTA Buttons - Unified System */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-family: inherit;
  border-radius: 12px;
  padding: 0.8rem 1.1rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.1;
  border: 1px solid transparent;
}

.btn-green {
  background: #27ae60;
  color: #fff;
  border: 1px solid transparent;
}

.btn-green:hover {
  background: #239a55;
}

.btn-outline {
  border: 1px solid #444;
  color: #ddd;
  background: transparent;
}

.btn-outline:hover {
  border-color: #666;
  color: #fff;
}

/* CTA Row Container */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: 16px;
  background: #0f1520;
}

/* Video Section */
.video-section {
  margin-top: 2rem;
  padding: 1rem;
  border-radius: 16px;
  background: #0f1520;
}

.video-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: 1rem;
}

.video-grid iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  border: 0;
}

.video-grid .video {
  position: relative;
}

/* Legacy button classes (for backward compatibility) */
.btn-dark {
  background: #2b2f39;
  color: #e8f3ee;
}

.btn-dark:hover {
  background: #363a47;
}

.btn-ghost {
  background: transparent;
  color: #e8f3ee;
  border: 1px solid #3a414f;
}

.btn-ghost:hover {
  border-color: #4a5469;
}

/* Breadcrumb navigation */
.breadcrumbs {
  font-size: 0.9rem;
  margin: 1rem 0;
  color: #94a3b8;
}

.breadcrumbs a {
  color: #9ae6b4;
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumbs a:hover {
  color: #6ee7b7;
  text-decoration: underline;
}

.breadcrumbs span {
  color: #cbd5e1;
}

/* CTA section and buttons */
.cta {
  margin-top: 2rem;
  padding: 1rem;
  border: 1px solid #2a2f36;
  border-radius: 12px;
  background: #12161b;
}

.btn-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  border: 1px solid #2a2f36;
  text-decoration: none;
  transition: all 0.2s;
}

.btn.ghost {
  background: transparent;
}

.btn:hover {
  border-color: #4a5f56;
}

.disclaimer {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 0.75rem;
}

/* Learn page specific styling */
.page {
  background: #0b1220;
  color: #e6edf3;
  min-height: 100vh;
  padding-top: 2rem;
}

.page h1 {
  color: #e6edf3;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.page h2 {
  color: #e6edf3;
  font-size: 1.8rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.page h3 {
  color: #e6edf3;
  font-size: 1.4rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.page p {
  color: #cbd5e1;
  margin-bottom: 1rem;
}

.page a {
  color: #60a5fa;
  text-decoration: none;
}

.page a:hover {
  color: #93c5fd;
  text-decoration: underline;
}

.page ul, .page ol {
  color: #cbd5e1;
  margin-bottom: 1rem;
}

.page li {
  margin-bottom: 0.5rem;
}

/* MSCP Brand Colors */
:root{
  --mscp-green: #16c47f; /* adjust to your exact MSCP green if needed */
}

/* Kill stray rails/overlays (old crap) */
.vertical-banner, .side-banner, .sticky-rail, [data-vertical-rail],
#left-rail, #right-rail, a[style*="writing-mode:vertical-rl"] { 
  display:none !important; 
}

/* Responsive video wrapper */
.yt-wrap { 
  position: relative; 
  width: 100%; 
  padding-bottom: 56.25%; 
}

.yt-wrap iframe { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
}

/* header */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:#0c1118cc;
  backdrop-filter:saturate(160%) blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  max-width:1100px;
  margin:0 auto;
  padding:.9rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;
  gap:.5rem;
  align-items:center;
  text-decoration:none;
  color:#e6edf3;
}
.brand-dot{
  width:.65rem;
  height:.65rem;
  background:#3be27e;
  border-radius:50%;
}
.brand-name{
  font-weight:700;
  letter-spacing:.2px;
}
.nav{
  display:flex;
  gap:1.25rem;
}
.nav a{
  text-decoration:none;
  border-bottom:1px solid transparent;
  color:#cbd5e1;
}
.nav a:hover{
  border-color:rgba(255,255,255,.2);
  color:#fff;
}

/* ----- Layout: auto-center every top-level section ----- */
:root { --page-max: 1100px; }
main, .page { display:block; }

/* Any direct section under main becomes a centered row */
main > section {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Hero sections centered text + width limits for readability */
.hero { text-align: center; }
.hero h1, .hero p { margin-inline: auto; max-width: 900px; }

/* If you have a grid somewhere that defaulted left, keep it centered */
.container, .wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: 1rem; }

/* ----- Buttons (works for .btn and [data-cta]) ----- */
a.btn, a[data-cta]{
  display:inline-block;
  padding:.75rem 1rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:.6rem;
  text-decoration:none;
  font-weight:600;
  line-height:1;
  transition:transform .12s ease, border-color .12s ease, background-color .12s ease;
}

/* kill purple visited state for CTAs */
a.btn:link, a.btn:visited,
a[data-cta]:link, a[data-cta]:visited{
  color:inherit;
}

/* hover affordance */
a.btn:hover, a[data-cta]:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.28); }

/* Optional "primary" look */
a.btn.primary, a[data-cta].primary{ background: rgba(59,226,126,.10); border-color: rgba(59,226,126,.45); }
a.btn.primary:hover, a[data-cta].primary:hover{ background: rgba(59,226,126,.16); }

/* Footer */
/* --- UNIFIED FOOTER STYLES (v38) --- */
.site-footer {
  background: #0e1621;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4rem;
  padding: 2rem 1rem;
}

.footer-inner {
  max-width: var(--layout-max, 1280px);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
  color: #94a3b8;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 12px;
  font-size: 0.95rem;
}
/* Footer links use the unified styling below */

/* Button styles */
.btn,.button{
  display:inline-block;
  padding:.7rem 1rem;
  border-radius:.6rem;
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  background:rgba(22,196,127,.1);
  color:#fff;
  font-weight:500;
  transition:all 0.2s;
}
.btn:hover,.button:hover{
  transform:translateY(-1px);
  background:rgba(22,196,127,.2);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}

/* === Global overrides (v16) ===================================== */

/* 1) Force the same header style even if markup differs */
.site-header{position:sticky;top:0;z-index:40;background:#0c1118cc;backdrop-filter:saturate(160%) blur(6px);border-bottom:1px solid rgba(255,255,255,.06)}
.site-header .header-inner:not(.wrapper){max-width:1280px;margin:0 auto;padding-left:32px;padding-right:32px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between}
.site-header .brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:700;letter-spacing:.2px}
.site-header .nav{display:flex;gap:1.25rem}
.site-header .nav a{text-decoration:none;border-bottom:1px solid transparent}
.site-header .nav a:hover{border-color:rgba(255,255,255,.2)}

/* Brand dot: show the real .brand-dot if present, otherwise synthesize one */
.site-header .brand-dot{
  width:.65rem;height:.65rem;background:#3be27e;border-radius:50%;display:inline-block;
}

.site-header .brand::before{display:none;}
/* Only synthesize a dot if there is NO .brand-dot child */
.site-header .brand:not(:has(.brand-dot))::before{
  content:""; display:inline-block; width:.65rem; height:.65rem; 
  background:#3be27e; border-radius:50%;
}

/* Hide any legacy logo glyph that shows a blue "M" */
.site-header .brand .logo, 
.site-header .brand .site-logo, 
.site-header .brand img[alt*="logo"]{
  display:none !important;
}

/* 2) Center sections by default (covers pages that forgot a container) */
:root{--page-max:1100px}
main>.section, main>section, .container, .wrap{max-width:var(--page-max);margin-inline:auto;padding-inline:1rem}

/* 3) Buttons + kill purple visited on CTAs */
a.btn, a[data-cta]{
  display:inline-block;padding:.75rem 1rem;border:1px solid rgba(255,255,255,.14);
  border-radius:.6rem;text-decoration:none;font-weight:600;line-height:1;
  transition:transform .12s ease, border-color .12s ease, background-color .12s ease;
}
a.btn.primary, a[data-cta].primary{background:rgba(59,226,126,.10);border-color:rgba(59,226,126,.45)}
a.btn:hover, a[data-cta]:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.28)}
/* kill visited purple for CTAs */
a.btn:link, a.btn:visited, a[data-cta]:link, a[data-cta]:visited{color:inherit}

/* Optional: link-cta style (keeps text link look but no purple) */
a.link-cta, a.link-cta:visited{color:inherit;text-decoration:underline;border-bottom:0}

/* ----- Responsive video grid ----- */
.video-grid{
  max-width: var(--page-max, 1100px);
  margin: 1.5rem auto;
  padding-inline: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.video-card{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: .6rem;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
}
.video-card iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* v19 – no more purple visited links anywhere */
a, a:visited { color: rgba(255,255,255,.88); }
a:hover { color: #fff; }

/* keep buttons looking like buttons */
a.btn, a.btn:visited { color: inherit; }

/* optional text-style CTA that never turns purple */
a.link-cta, a.link-cta:visited { color: inherit; text-decoration: underline; }

/* How It Works page styles */
.lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: rgba(255,255,255,.9);
  max-width: 800px;
  margin: 0 auto;
}

.section {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.hero.section {
  text-align: center;
  padding: 3rem 1rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.grid-3 > div {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .6rem;
  padding: 1.5rem;
}

.grid-3 h3 {
  margin-top: 0;
  color: #3be27e;
  font-size: 1.3rem;
}

.note {
  font-size: .9rem;
  opacity: .7;
  font-style: italic;
  margin-top: 1.5rem;
}

ol {
  line-height: 1.8;
  padding-left: 1.5rem;
}

ol li {
  margin-bottom: 1rem;
}
/* Path cards for partners page */
.path-card {
  margin: 2rem auto;
  max-width: 600px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 1.5rem;
}
.path-card h3 {
  margin-top: 0;
}

/* buttons */
.btn {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #22c55e;
  color: #0b1a13;
}

.btn-primary:hover {
  background: #16a34a;
  transform: translateY(-1px);
}

.btn-secondary {
  background: #0f172a;
  color: #e5f9ef;
  border: 1px solid #1f2937;
}

.btn-secondary:hover {
  background: #111827;
  transform: translateY(-1px);
}

.btn-ghost {
  color: #a7f3d0;
  background: transparent;
}

.btn-ghost:hover {
  color: #d1fae5;
  background: rgba(167, 243, 208, 0.1);
}

/* cards */
.card {
  background: #0f172a;
  border: 1px solid #1f2937;
  border-radius: 1rem;
  padding: 1rem;
  transition: all 0.2s ease;
}

.card:hover {
  border-color: #374151;
  transform: translateY(-2px);
}

.card h3 {
  margin: 0 0 0.35rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

/* Card utilities for index page */
.page-wrap { 
  display: flex; 
  justify-content: center; 
  padding: 24px 16px; 
}

.card { 
  background: #0b1220; 
  border: 1px solid rgba(255,255,255,.08); 
  border-radius: 14px; 
  box-shadow: 0 6px 20px rgba(0,0,0,.35); 
  max-width: 980px; 
  width: 100%; 
  margin: 0 auto; 
}

.card--padded { 
  padding: 28px 28px 32px; 
}

.card-header { 
  margin-bottom: 12px; 
}

.card-divider { 
  border: 0; 
  height: 1px; 
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); 
  margin: 12px 0 20px; 
}

.page-title { 
  font-size: 2.25rem; 
  line-height: 1.1; 
  margin: 0; 
}

.page-subtitle { 
  color: #a3adc2; 
  margin: .5rem 0 0; 
}

.topic-index a { 
  text-decoration: none; 
}

/* ========================================
   Learn Page Overrides (v29)
   ======================================== */

/* Keep the card containers but remove decorative elements */
body.learn-page .card {
  background: #0f172a !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 1rem !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
  padding: 28px 28px 32px !important;
  max-width: 980px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Override contact page card styles for Learn pages */
body.learn-page .card {
  background: #0f172a !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 1rem !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
  padding: 28px 28px 32px !important;
  max-width: 980px !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: left !important;
}

body.learn-page .card::before,
body.learn-page .card::after,
body.learn-page li::before,
body.learn-page li::after {
  display: none !important;
  content: none !important;
}

/* Learn index page specific styling */
body.learn-page .topic-index .card {
  background: #0f172a !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 1rem !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.25) !important;
  padding: 1.5rem !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
}

body.learn-page .topic-index .card:hover {
  border-color: #374151 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.4) !important;
}

/* Fix visited links - keep them the same color as unvisited */
body.learn-page a:visited,
.learn-page a:visited {
  color: rgba(255,255,255,.88) !important;
}

body.learn-page a.card:visited {
  color: inherit !important;
}

/* Ensure buttons don't change color when visited */
body.learn-page .btn:visited,
body.learn-page .btn-primary:visited,
body.learn-page .btn-secondary:visited,
body.learn-page .btn-ghost:visited {
  color: inherit !important;
  background: inherit !important;
}

/* ========================================
   Article Body Visibility (v27)
   ======================================== */

/* Force article body to always be visible */
.article-body {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure article and prose content inherits color */
.prose,
.article {
  color: inherit;
}

/* Article body typography */
.article-body h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #e5f9ef;
}

.article-body h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: #d1fae5;
}

.article-body p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.article-body ul {
  list-style-type: disc;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.article-body li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* ========================================
   Contact Page - Other Ways to Connect (v31)
   ======================================== */

/* ==== Other Ways to Connect (force 3-across) ==== */
.other-ways.container { 
  margin-top: 40px; 
  margin-bottom: 60px; 
}

.other-ways .section-title {
  text-align: center;
  margin-bottom: 20px;
  color: var(--text, #e5f9ef);
  font-size: 1.75rem;
  font-weight: 600;
}

/* The grid */
.other-ways .cards-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Kill inherited vertical/card spacing from elsewhere */
.other-ways .cards-grid .card { 
  margin: 0 !important;               /* stop vertical stacking margins */
  grid-column: auto !important;       /* ignore any span-4 etc. */
  height: 100%;
  background: var(--surface, #111823);
  border: 1px solid var(--border, #223046);
  border-radius: 16px;
  padding: 20px;
  color: #e5f9ef;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.other-ways .cards-grid .card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #a7f3d0;
}

.other-ways .cards-grid .card p {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: inherit;
}

.other-ways .cards-grid .card a {
  color: #22c55e;
  text-decoration: none;
  font-weight: 500;
}

.other-ways .cards-grid .card a:hover {
  text-decoration: underline;
}

/* Responsive: 2-up tablet, 1-up mobile */
@media (max-width: 1024px){
  .other-ways .cards-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .other-ways .cards-grid{ grid-template-columns: 1fr; }
}

/* Nice phone number styling */
.other-ways .highlight{
  font-size: 1.25rem; 
  font-weight: 600; 
  color: var(--accent, #22c55e);
}

/* Optional: if some theme adds a border box around the whole section, kill it */
.other-ways .panel, 
.other-ways .stack { 
  border: 0 !important; 
  background: transparent !important; 
  padding: 0 !important; 
}

/* ===== Fix learn index bleed (v31) ===== */
.container{
  max-width:1120px;
  margin-inline:auto;
  padding-inline:24px;
  width:100%;
}

/* Hard stop any full-bleed tricks on the learn page */
.learn-index .topic-list,
.learn-index .cards,
.learn-index .row,
.learn-index .panel,
.learn-index .topic-card{
  width:auto !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Make the list a normal block inside the container */
.learn-index .topic-list{ display:block; }

/* Ensure each item fills the container width nicely */
.learn-index .topic-card{
  display:block;
  width:100%;
  margin-block:16px;
  border-radius:16px;
  border:1px solid var(--border, #223046);
  background: var(--surface, #111823);
  padding:20px;
}

/* Kill common culprits */
.learn-index .full-bleed,
.learn-index .edge-to-edge,
.learn-index .w-100vw{
  width:auto !important;
  max-width:100% !important;
}
.learn-index [style*="100vw"],
.learn-index [style*="calc(100% +"]{
  width:auto !important;
  max-width:100% !important;
}

/* If some layout grid is pushing .container to a narrow column, neutralize it */
.learn-index,
.learn-index .container{
  display:block !important;
}

/* No horizontal scroll */
html, body{ overflow-x:hidden; }

/* === Fix container bleed for product/next-step sections (v32) === */
.related-products.container,
.next-step.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
  width: 100%;
}

/* Reset rogue widths */
.related-products,
.next-step,
.related-products * ,
.next-step * {
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Product pill styling */
.product-pill {
  display: inline-block;
  background: var(--surface, #111823);
  border: 1px solid var(--border, #223046);
  border-radius: 10px;
  padding: 10px 16px;
  color: var(--accent, #5AA7FF);
  text-decoration: none;
  margin-top: 12px;
}
.product-pill:hover { filter: brightness(1.15); }

/* CTA panel alignment fix */
.next-step .panel {
  background: var(--surface, #111823);
  border: 1px solid var(--border, #223046);
  border-radius: 16px;
  padding: 24px;
}
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* Responsive fix */
@media (max-width: 640px) {
  .cta-buttons { flex-direction: column; }
}

/* ---- Layout guard (v34) ---- */
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.section    { margin: 32px 0; }
.section > *:first-child { margin-top: 0; }

/* ---- Buttons (v34) ---- */
.btn {
  display:inline-block; padding:10px 16px; border-radius:8px;
  font-weight:600; text-decoration:none; line-height:1.2;
  border:1px solid transparent; transition:transform .02s ease, background-color .2s;
}
.btn:active { transform:translateY(1px); }

.btn-green { background:#23c55e; color:#fff; }
.btn-green:hover { background:#1ea84e; }

.btn-dark { background:#111827; color:#fff; border-color:#1f2937; }
.btn-dark:hover { background:#0b1220; }

.btn-outline { background:transparent; color:#cbd5e1; border-color:#334155; }
.btn-outline:hover { background:#111827; }

/* make inline buttons sit nicely in text lines */
p .btn { margin-right:10px; margin-bottom:6px; }

/* guard rails for any full-width blocks that slipped out */
.fullwidth-fix { box-sizing:border-box; width:100%; }

/* --- FOOTER CLEANUP (v37) --- */
footer .footer-nav a,
footer .site-footer a {
  all: unset !important; /* force remove ALL button styling */
  display: inline !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: #fff !important; /* white - CONSISTENT */
  cursor: pointer !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transform: none !important;
  transition: color 0.2s ease !important;
}

footer .footer-nav a:hover,
footer .site-footer a:hover {
  color: #fff !important; /* bright on hover - CONSISTENT */
  text-decoration: underline !important;
  background: none !important;
  border: none !important;
  transform: none !important;
}

/* layout tidy */
footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 12px;
  font-size: 0.95rem;
  color: #cbd5e1;
}

/* --- RECOMMENDED ARTICLES FIX (v37) --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.card-grid .card {
  background: var(--surface, #111823) !important;
  border: 1px solid var(--border, #223046) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.card-grid .card:hover {
  border-color: #374151 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.4) !important;
}

.card-grid .card h3 {
  margin: 0 0 12px 0 !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #fff !important;
}

.card-grid .card p {
  margin: 0 0 16px 0 !important;
  color: #cbd5e1 !important;
  line-height: 1.5 !important;
}

.card-grid .card .btn {
  display: inline-block !important;
  padding: 8px 16px !important;
  background: #22c55e !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

.card-grid .card .btn:hover {
  background: #16a34a !important;
}

/* --- LEARN INDEX STYLES (v38) --- */
.topic-list {
  display: grid;
  gap: 18px;
}
@media (min-width: 900px) {
  .topic-list { gap: 22px; }
}

.topic-card {
  background: #0f172a;
  border: 1px solid #1f2937;
  border-radius: 16px;
  padding: 22px;
}

.topic-card h2 { margin: 0 0 6px 0; }
.topic-card p { margin: 0; color: #9fb3c8; }

.topic-link { text-decoration: none; color: inherit; display: block; }
.topic-link:hover h2 { text-decoration: underline; }

/* containment clamp for learn index if container is missing */
body.learn-index > main:not(.container),
body.learn-index > .section:first-of-type {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Seatbelt: clamp How It Works inside container even if template forgets --- */
body.page-how-it-works > main:not(.container) {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
body.page-how-it-works .section.howitworks {
  margin: 32px 0;
}

/* --- Seatbelt: Research page container --- */
body.page-research > main:not(.container) {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Research feed styles */
.post-list { display:grid; gap:18px; }
.post-card { background:#0f172a; border:1px solid #1f2937; border-radius:16px; padding:18px; }
.post-card h2 { margin:0 0 6px; }
.post-card .meta { color:#9fb3c8; margin:0 0 8px; }
.pager { margin-top:20px; display:flex; gap:10px; }

/* Research article polish */
.post-title { margin-bottom: 6px; }
.post .meta { color:#9fb3c8; margin:0 0 12px; }
.post .note { background:#0b1220; border:1px solid #1f2937; border-radius:8px; padding:10px 12px; margin:12px 0 16px; }
.post .card { background:#0f172a; border:1px solid #1f2937; border-radius:12px; padding:14px; margin:10px 0; }
.small { font-size:.9rem; color:#9fb3c8; }

/* Source link protection */
.page-research .source-link { pointer-events:auto; }

/* Layout fallback for research pages */
body.page-research > main:not(.container){
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
}

/* Video grid styles */
#videos .video-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
}
#videos .video-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 8px;
}
#videos .video-embed {
  position: relative; 
  width: 100%; 
  padding-bottom: 56.25%;
}
#videos .video-embed iframe {
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%;
  border-radius: 8px;
}

/* CTA Next Step Component */
.cta-next-step {
  background: var(--surface, #111823);
  border: 1px solid var(--border, #223046);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.cta-next-step .cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.cta-next-step h2 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
}

.cta-next-step p {
  margin: 0 0 16px 0;
  color: #cbd5e1;
}

/* CTA Button Data Link Handler */
.cta-next-step button[data-link] {
  cursor: pointer;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cta-next-step button[data-link="ibo"] {
  background: #22c55e;
  color: #07140f;
}

.cta-next-step button[data-link="ibo"]:hover {
  background: #16a34a;
  transform: translateY(-1px);
}

.cta-next-step button[data-link="affiliate"] {
  background: #374151;
  color: #fff;
}

.cta-next-step button[data-link="affiliate"]:hover {
  background: #4b5563;
  transform: translateY(-1px);
}

/* Safety: Hide duplicate CTAs */
#cta-next-step + #cta-next-step {
  display: none;
}

/* Microguide Styles */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: var(--surface, #111823);
  border: 1px solid var(--border, #223046);
  border-radius: 8px;
  padding: 20px;
}

.faq-question {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--text, #ffffff);
}

.faq-answer {
  color: var(--text-muted, #9ca3af);
  line-height: 1.6;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.topic-card {
  background: var(--surface, #111823);
  border: 1px solid var(--border, #223046);
  border-radius: 8px;
  padding: 20px;
  text-decoration: none;
  color: var(--text, #ffffff);
  transition: all 0.2s ease;
}

.topic-card:hover {
  border-color: var(--primary, #22c55e);
  transform: translateY(-2px);
}

.topic-card h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.topic-card p {
  margin: 0;
  color: var(--text-muted, #9ca3af);
  font-size: 0.9rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.product-card {
  background: var(--surface, #111823);
  border: 1px solid var(--border, #223046);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

.product-card h3 {
  margin: 0 0 12px 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text, #ffffff);
}

.product-card p {
  margin: 0 0 16px 0;
  color: var(--text-muted, #9ca3af);
  line-height: 1.5;
}

.compliance-notice {
  background: var(--surface, #111823);
  border: 1px solid var(--warning, #f59e0b);
  border-radius: 8px;
  padding: 24px;
  margin: 24px 0;
}

.compliance-notice h3 {
  margin: 0 0 16px 0;
  color: var(--warning, #f59e0b);
  font-size: 1.1rem;
  font-weight: 600;
}

.compliance-notice p {
  margin: 0 0 12px 0;
  color: var(--text, #ffffff);
  line-height: 1.6;
}

.compliance-notice p:last-child {
  margin-bottom: 0;
}

/* Headings: enforce weight and visual parity across all templates */
:root {
  --heading-weight: 700;
}
h1, .page-title {
  font-weight: var(--heading-weight) !important;
  line-height: 1.2;
  margin: 0 0 0.75rem 0;
}
.section > h1,
.hero h1,
.container h1 {
  font-weight: var(--heading-weight) !important;
}

/* All nav links should be bold white, no green, no underline - FINAL RULE */
.site-header .nav a,
.site-header .nav a[href*="/how-it-works"],
.site-header .nav a[href*="/learn"],
.site-header .nav a[href*="/research"],
.site-header .nav a[href*="/partners"],
.site-header .nav a[href*="/contact"] {
  font-weight: 700 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  all: unset !important;
  display: inline-block !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border: none !important;
}

.site-header .nav a:hover,
.site-header .nav a[href*="/how-it-works"]:hover,
.site-header .nav a[href*="/learn"]:hover,
.site-header .nav a[href*="/research"]:hover,
.site-header .nav a[href*="/partners"]:hover,
.site-header .nav a[href*="/contact"]:hover {
  color: #ffffff !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
}

/* Ensure the same centered container everywhere */
.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Topic hub CTA block — visible card with button */
.cta-block {
  margin-top: 28px;
  margin-bottom: 28px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.cta-block.card {
  background: var(--surface, #111823);
  border: 1px solid var(--border, #223046);
}

.cta-block h2 {
  margin-top: 0;
  margin-bottom: 12px;
}

.cta-block p {
  margin-bottom: 14px;
}

.cta-button-wrap {
  margin-top: 18px;
  margin-bottom: 0;
}

/* CTA button — visibility and clickability (e.g. partners/cerule product cards) */
.cta-button {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 600;
  background: #22c55e;
  color: #ffffff;
  border: none;
  text-decoration: none;
  transition: transform 0.08s ease, opacity 0.08s ease;
}

.cta-button:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

.disclosure {
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  color: var(--text-muted, #9ca3af);
}

/* Explore Related Research Topics — consistent link color and hover */
.research-links {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}

.research-links li {
  margin: 8px 0;
}

.research-links li::before {
  content: "•";
  color: #22c55e !important;
  margin-right: 8px;
}

/* Override .page a (blue) so research topic links stay theme-colored */
.page .research-links a,
.page .research-links a:link,
.page .research-links a:visited,
.page .research-links a:focus {
  color: #c9d4e3 !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: color 0.15s ease;
}

.page .research-links a:hover,
.page .research-links a:active {
  color: #22c55e !important;
  text-decoration: underline !important;
}

/* Contextual keyword links in article text — green pill, semantic <a> */
.context-pill {
  display: inline-block;
  background: #22c55e;
  color: #062c1c;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
  text-decoration: none;
}

.context-pill:hover {
  background: #16a34a;
}

/* Topic hub cards on /topics/ index */
.topic-card.card {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: var(--radius, 12px);
  background: var(--card, rgba(255,255,255,0.03));
}
.topic-card h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}
.topic-card h2 a {
  color: var(--brand-accent, #22c55e);
  text-decoration: none;
}
.topic-card h2 a:hover {
  text-decoration: underline;
}
.topic-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.95rem;
}

/* Footer Research Topics section — structured list */
.footer-topics {
  margin-top: 20px;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-topics h4 {
  font-size: 14px;
  margin-bottom: 8px;
  opacity: 0.85;
  font-weight: 600;
  color: var(--muted, #94a3b8);
}
.footer-topics ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-topics li {
  margin-bottom: 4px;
}
.footer-topics a {
  text-decoration: none;
  opacity: 0.8;
  color: var(--text, #e6edf3);
  font-size: 0.875rem;
}
.footer-topics a:hover {
  opacity: 1;
  color: var(--brand-accent, #22c55e);
}

/* How it works: Explore Related Topics section — content links, not CTAs */
.related-topics {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
.related-topics h2 {
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.related-topics p {
  margin-bottom: 1rem;
  color: var(--muted, #94a3b8);
  font-size: 0.95rem;
  line-height: 1.5;
}
.related-topics ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.related-topics li {
  margin-bottom: 0.35rem;
}
.related-topics a {
  color: var(--brand-accent, #22c55e);
  text-decoration: none;
  font-size: 1rem;
}
.related-topics a:hover {
  text-decoration: underline;
}

/* Muted inline links below pathway cards */
.pathway-topic-links {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 0.9rem;
  opacity: 0.85;
  color: var(--muted, #94a3b8);
}
.pathway-topic-links a {
  color: var(--brand-accent, #22c55e);
  text-decoration: none;
}
.pathway-topic-links a:hover {
  text-decoration: underline;
}

/* Topics index: contextual intro and topic card links */
.topic-context {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.topic-context p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted, #94a3b8);
}
.topic-context a {
  color: var(--brand-accent, #22c55e);
  text-decoration: none;
}
.topic-context a:hover {
  text-decoration: underline;
}

.topic-links {
  margin-top: 10px;
  font-size: 0.95rem;
  opacity: 0.9;
  color: var(--muted, #94a3b8);
}
/* Override global CTA button styling so topic-links stay text links (e.g. How It Works) — higher specificity */
.page-main .topic-links a,
.page-main .topic-context a,
.topic-card .topic-links a,
.content-container .topic-card .topic-links a[href*="/how-it-works"],
.page-main .topic-links a.text-link,
a.text-link {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: inherit !important;
  display: inline !important;
  box-shadow: none !important;
  color: var(--brand-accent, #22c55e) !important;
  text-decoration: none !important;
}
a.text-link:hover {
  text-decoration: underline !important;
  background: transparent !important;
  border: none !important;
}
.topic-links a {
  color: var(--brand-accent, #22c55e);
  text-decoration: none;
}
.topic-links a:hover,
.topic-context a:hover {
  text-decoration: underline !important;
}
.topic-context a {
  color: var(--brand-accent, #22c55e);
  text-decoration: none;
}

/* Glossary and Concepts section on /topics/ */
.glossary-links {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
}
.glossary-links h2 {
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.glossary-links p {
  margin-bottom: 0.75rem;
  color: var(--muted, #94a3b8);
  font-size: 0.95rem;
}
.glossary-links ul {
  margin-top: 10px;
  padding-left: 20px;
  list-style: disc;
}
.glossary-links li {
  margin-bottom: 0.35rem;
}
.glossary-links a {
  color: var(--brand-accent, #22c55e);
  text-decoration: none;
}
.glossary-links a:hover {
  text-decoration: underline;
}

/* Glossary page term lists */
.glossary-list dt {
  font-weight: 600;
  margin-top: 1rem;
  color: var(--text, #e6edf3);
}
.glossary-list dt:first-child { margin-top: 0; }
.glossary-list dd {
  margin-left: 0;
  margin-bottom: 0.5rem;
  color: var(--muted, #94a3b8);
  line-height: 1.5;
}

/* Standalone product pages: legacy .product-image (non-hero) */
.product-hero .product-image img {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}
.product-hero .product-copy .btn {
  margin-top: 0.75rem;
}

/* ===== Premium Design System (v48) ===== */
:root {
  --bg: #070d18;
  --surface: rgba(255,255,255,0.035);
  --surface-strong: rgba(255,255,255,0.065);
  --border: rgba(255,255,255,0.11);
  --border-strong: rgba(255,255,255,0.18);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.68);
  --soft: rgba(255,255,255,0.52);
  --green: #35c76f;
  --green-soft: rgba(53,199,111,0.16);
  --green-border: rgba(53,199,111,0.36);
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-card: 0 24px 80px rgba(0,0,0,0.28);
  --shadow-soft: 0 16px 42px rgba(0,0,0,0.22);
  --max: 1280px;
  --layout-max: 1280px;
  --reading-measure: 78ch;
}

html { scroll-behavior: smooth; }
html,
body {
  overflow-x: hidden;
}
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(53,199,111,0.13), transparent 30%),
    linear-gradient(180deg, #070d18 0%, #090f1c 48%, #070d18 100%);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { letter-spacing: -0.035em; }
h1 { font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: 0.98; }
h2 { font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.1; }
p, li { line-height: 1.7; }
a { color: #8fe6a8; }

/* Global width rail — symmetric gutters via padding + max-width (no width:min rounding quirks) */
.wrapper {
  max-width: var(--layout-max, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

.content-container,
.page-main {
  max-width: var(--layout-max, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

/* Vertical rhythm: margin works even when flex gap is ignored or collapsed */
.content-container {
  display: flow-root;
}
.content-container > * + * {
  margin-top: clamp(2rem, 3vw, 2.75rem);
}

/* Sections inside a width-constrained main fill the rail (avoid legacy main>section shrink) */
main.wrapper > section,
main.product-page > section {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-inline: 0;
  box-sizing: border-box;
}
.page-section { margin: 28px 0; }
.content-grid,
.related-guides-grid,
.hub-phase2-guides .content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}
.content-card,
.card {
  position: relative;
  padding: clamp(28px, 3vw, 42px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.026));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.content-card::before,
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 20% 0%, rgba(53,199,111,0.08), transparent 28%);
}
.content-card > *,
.card > * { position: relative; }
.full-width,
.full-width-card { grid-column: 1 / -1; }

/* Guides (e.g. stem-cell-therapy): extra horizontal breathing room inside stacked cards */
.page-main .content-container > .card,
.page-main .content-container > article.card,
.page-main .content-container > section.card {
  padding: clamp(32px, 3.5vw, 44px);
  margin-bottom: clamp(28px, 4vw, 42px);
}

.home-hero {
  margin-top: 36px;
}

.home-page .content-grid {
  margin-bottom: 48px;
}

.product-hero,
.page-hero {
  position: relative;
  margin: 32px auto clamp(36px, 4vw, 48px);
  padding: clamp(40px, 5vw, 56px) clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 36px;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 18%, rgba(53,199,111,0.20), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
  overflow: hidden;
}

.page-hero::after,
.product-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.10), transparent 26%),
    radial-gradient(circle at 0% 100%, rgba(53,199,111,0.10), transparent 28%);
}

.page-hero > *,
.product-hero > * {
  position: relative;
  z-index: 1;
}

.page-hero h1,
.product-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(3rem, 5vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.page-hero-copy,
.product-hero-copy {
  max-width: none;
  padding-left: clamp(8px, 1vw, 16px);
  padding-right: clamp(8px, 1vw, 16px);
  box-sizing: border-box;
}

.home-hero .page-hero-copy {
  padding-left: clamp(12px, 1.5vw, 24px);
}

.hero-lede {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 1.2rem;
  line-height: 1.8;
}

.page-hero-media,
.product-hero-media {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
}

.page-hero-media img,
.product-hero-media img {
  width: min(100%, 320px);
  height: auto;
  max-height: 460px;
  object-fit: contain;
  filter: drop-shadow(0 32px 54px rgba(0,0,0,0.42));
}

@media (max-width: 820px) {
  .page-hero,
  .product-hero {
    grid-template-columns: 1fr;
    padding: 28px;
  }

  .page-hero-copy,
  .product-hero-copy {
    padding-left: 0;
    padding-right: 0;
  }

  .home-hero .page-hero-copy {
    padding-left: 0;
    padding-right: 0;
  }

  .page-hero-media,
  .product-hero-media {
    order: -1;
  }

  .page-hero-media img,
  .product-hero-media img {
    width: min(76vw, 260px);
  }
}

.eyebrow {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 14px;
  padding: 6px 10px;
  border: 1px solid var(--green-border);
  border-radius: 999px;
  background: var(--green-soft);
  color: #a8f7bd;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
}
.hero-actions, .cta-row {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: transparent;
  padding: 0;
}
.primary-cta, .secondary-cta, .button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.primary-cta, .button.primary, .btn-primary {
  background: linear-gradient(180deg, #4ee583, #2fb761);
  color: #06110a;
  box-shadow: 0 12px 30px rgba(53,199,111,0.22);
}
a.primary-cta,
a.primary-cta:visited,
a.primary-cta:hover,
a.primary-cta:focus {
  color: #06110a;
}
.secondary-cta, .button.secondary, .btn-secondary, .btn-ghost {
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: rgba(255,255,255,0.045);
}
.primary-cta:hover, .secondary-cta:hover, .button:hover, .btn:hover { transform: translateY(-1px); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(7,13,24,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header .wrapper, .nav-inner, .header-inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.site-logo, .logo, .brand, .brand-name {
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--text) !important;
  text-decoration: none;
}
.site-nav, .nav-links, .nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.site-nav a, .nav-links a, .nav a {
  color: rgba(255,255,255,0.76) !important;
  text-decoration: none !important;
}
.site-nav a:hover, .nav-links a:hover, .nav a:hover { color: #ffffff !important; }

.site-footer {
  margin-top: 72px;
  padding: 34px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.015);
  color: rgba(255,255,255,0.58);
}

.footer-copy::before,
.footer-copy::after,
.site-footer::before,
.site-footer::after,
.footer-inner::before,
.site-footer p::before {
  content: none !important;
  display: none !important;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-copy {
  margin: 0;
  color: rgba(255,255,255,0.58);
  font-size: 0.92rem;
}

.footer-links, .footer-nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Footer: plain text links (beats legacy “/contact = green CTA” rules + any .btn leak) */
.site-footer a {
  color: #9fb0c3 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline !important;
}
.site-footer a:hover {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  transform: none;
}
/* Strip button chrome only inside footer nav (not .cta-grid or other footer CTAs) */
.site-footer nav a.btn,
.site-footer nav a.button,
.site-footer .footer-nav a.btn,
.site-footer .footer-nav a.button,
.site-footer .footer-links a.btn,
.site-footer .footer-links a.button {
  all: unset;
  color: #9fb0c3 !important;
  cursor: pointer;
  text-decoration: none !important;
  font-weight: 500 !important;
  display: inline !important;
}
.site-footer nav a.btn:hover,
.site-footer nav a.button:hover,
.site-footer .footer-nav a.btn:hover,
.site-footer .footer-nav a.button:hover,
.site-footer .footer-links a.btn:hover,
.site-footer .footer-links a.button:hover {
  color: #ffffff !important;
}

.content-card ul, .card ul { padding-left: 1.1rem; }
.content-card li + li, .card li + li { margin-top: 8px; }
.faq-section h3, .content-card h3, .card h3 { margin-top: 18px; color: rgba(255,255,255,0.92); }
.disclaimer, .micro-disclaimer, .last-reviewed { color: var(--soft); font-size: 0.84rem; }
.last-reviewed { margin: 12px 0 0; }

@media (max-width: 900px) {
  .wrapper,
  .content-container,
  .page-main,
  .footer-inner,
  .site-header .header-inner:not(.wrapper) {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 640px) {
  .wrapper,
  .content-container,
  .page-main,
  .footer-inner,
  .site-header .header-inner:not(.wrapper) {
    padding-left: 18px;
    padding-right: 18px;
  }
  .content-card, .card { padding: 22px; }
}
@media (max-width: 760px) {
  .site-header { position: relative; }
  .site-nav, .nav-links, .nav { gap: 10px; }
}
@media (max-width: 640px) {
  .hero-actions, .cta-row { align-items: stretch; }
  .primary-cta, .secondary-cta, .button, .btn { width: 100%; }
}

/* Wellness topics strip — editorial cards */
.topics-strip {
  margin: clamp(28px, 4vw, 42px) 0;
  padding: clamp(28px, 3.5vw, 40px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.topics-strip.content-card {
  box-shadow: none;
  background: rgba(255, 255, 255, 0.035);
}

.topics-strip.content-card::before {
  display: none;
}

.topics-strip__title {
  margin: 0 0 22px;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  letter-spacing: -0.02em;
}

.topics-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

a.topic-card.topic-card--green {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid rgba(35, 197, 94, 0.35);
  background: linear-gradient(165deg, rgba(35, 197, 94, 0.14), rgba(35, 197, 94, 0.06));
  color: #b8f0c8;
  text-decoration: none;
  text-align: left;
  line-height: 1.35;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.topic-card__title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #d8fce3;
  letter-spacing: -0.02em;
}

.topic-card__desc {
  font-weight: 500;
  font-size: 0.92rem;
  color: rgba(184, 240, 200, 0.82);
  line-height: 1.5;
  max-width: none;
}

a.topic-card.topic-card--green:hover {
  background: linear-gradient(165deg, rgba(35, 197, 94, 0.22), rgba(35, 197, 94, 0.1));
  border-color: rgba(35, 197, 94, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}

/* ============================================================
   Editorial layout — reading measure vs layout width
   ============================================================ */
.reading-width {
  max-width: var(--reading-measure, 78ch);
}

.hero-lede,
.topic-hero > p,
article.card.topic-hero > p,
.page-hero-copy > .hero-lede,
section.card > p:not(.hub-link):not(.cta-button-wrap),
.card.topic-hero > p,
.faqs dd,
dl.faqs dd,
.faq-section dd,
.card .faqs dd {
  max-width: var(--reading-measure, 78ch);
}

.content-grid .content-card > p,
.topics-strip,
.cta-block,
.cta-row,
.seo-conversion-cta,
.hub-crosslinks ul,
.card-grid .card > p {
  max-width: none;
}

.site-footer {
  padding: clamp(40px, 5vw, 56px) 0;
}

.site-footer .wrapper.footer-inner,
#global-footer .footer-inner {
  max-width: var(--layout-max, 1280px);
  width: 100%;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

.page-section,
.hub-crosslinks,
.hub-phase2-guides,
.home-wellness-paths {
  margin-bottom: clamp(36px, 4vw, 48px);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.nav-inner {
  max-width: var(--layout-max, 1280px);
}

/* ============================================================
   Video watch pages (Google Video indexing)
   ============================================================ */
.video-watch-page .video-watch-hero {
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.video-watch-page .video-watch-hero .eyebrow {
  margin: 0 0 10px;
}

.video-watch-page .video-watch-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.08;
}

.video-watch-intro {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  line-height: 1.65;
}

.video-watch-page .video-watch-embed {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.45);
  background: #000;
}

.video-watch-page .video-watch-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-watch-main .content-card {
  margin-bottom: clamp(24px, 3vw, 36px);
}

.video-watch-page .video-related-videos ul {
  margin: 0;
  padding-left: 1.1rem;
}

.video-watch-page .video-back-link {
  margin-top: 1rem;
}

.video-watch-page .micro-disclaimer {
  margin: 2rem 0 0;
  font-size: 0.84rem;
  color: var(--soft, rgba(255, 255, 255, 0.55));
}

/* Video hub library */
.video-hub-page .video-hub-header {
  display: block;
  margin-bottom: 40px;
}

.video-hub-grid {
  margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.video-hub-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.video-hub-thumb-link {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}

.video-hub-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.video-hub-card h2 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.video-hub-card p {
  margin: 0;
  max-width: none;
}

.video-hub-card a.primary-cta,
.video-hub-card a.primary-cta:visited,
.video-hub-card a.primary-cta:hover,
.video-hub-card a.primary-cta:focus {
  color: #06110a;
}

@media (max-width: 640px) {
  .video-watch-page .video-watch-embed {
    border-radius: 12px;
  }
}