/* Article page styles — long-form CRO */
:root{--max-w:720px}

.article-header{
  background:#111;
  padding:10px 0;
  text-align:center;
}
.article-header p{color:#fff;font-size:.85rem;font-weight:600;margin:0}
.article-header span{color:#f5a623}

/* Byline */
.byline{
  display:flex;align-items:center;gap:12px;
  padding:20px 0;
  border-bottom:1px solid var(--border);
  margin-bottom:32px;
}
.byline-avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.1rem;flex-shrink:0;
}
.byline-info{font-size:.85rem;color:var(--muted)}
.byline-name{font-weight:700;color:#111;font-size:.95rem}

/* Article typography */
.article-body{max-width:var(--max-w);margin:0 auto}
.article-body h2{
  font-size:clamp(1.2rem,3.5vw,1.6rem);
  margin:40px 0 16px;
  color:#111;
  border-left:4px solid var(--brand);
  padding-left:14px;
}
.article-body p{
  font-size:1rem;
  line-height:1.8;
  color:#333;
  margin-bottom:1.2em;
}
.article-body ul,
.article-body ol{
  padding-left:20px;
  margin-bottom:1.2em;
}
.article-body li{
  line-height:1.8;
  margin-bottom:.4em;
  color:#333;
}
.article-body strong{color:#111}
.article-body em{font-style:italic}

/* Pull quote */
.pull-quote{
  border-left:4px solid var(--gold);
  background:#fffdf0;
  padding:16px 20px;
  margin:28px 0;
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:1.05rem;
  font-style:italic;
  color:#444;
  line-height:1.7;
}
.pull-quote cite{display:block;font-style:normal;font-size:.85rem;color:var(--muted);margin-top:8px}

/* Section divider with icon */
.section-marker{
  text-align:center;
  color:var(--brand);
  font-size:1.5rem;
  margin:36px 0;
  opacity:.4;
}

/* Inline CTA box (appears mid-article) */
.inline-cta{
  background:linear-gradient(135deg,#fff5f5,#fff);
  border:2px solid var(--brand);
  border-radius:12px;
  padding:24px;
  text-align:center;
  margin:36px 0;
}
.inline-cta h3{font-size:1.15rem;margin-bottom:8px;color:#111}
.inline-cta p{font-size:.9rem;color:var(--muted);margin-bottom:20px}

/* Research callout */
.research-box{
  background:#f0f7ff;
  border-left:4px solid #1a6fb0;
  border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 20px;
  margin:28px 0;
  font-size:.9rem;
  color:#1a3a5c;
  line-height:1.7;
}
.research-box strong{color:#0d2a4a}

/* Progress indicator (reading progress) */
.reading-progress{
  position:fixed;top:0;left:0;right:0;height:3px;
  background:transparent;z-index:9998;
}
.reading-progress-fill{
  height:100%;background:var(--brand);width:0%;
  transition:width .1s linear;
}

/* Table of contents */
.toc{
  background:var(--bg-light);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:32px;
}
.toc h4{font-size:.95rem;margin-bottom:12px;color:#111}
.toc ol{padding-left:18px}
.toc li{margin-bottom:6px}
.toc a{color:var(--brand);font-size:.9rem;text-decoration:underline}

/* Numbered step list ("How it works") */
.step-list{list-style:none;padding:0;margin:24px 0}
.step-list li{
  display:flex;gap:14px;align-items:flex-start;
  margin-bottom:18px;
}
.step-num{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  background:var(--brand);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;
}
.step-list strong{display:block;margin-bottom:2px;color:#111}

/* Product / ingredient media block */
.article-media{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;
  margin:28px 0;
  background:var(--bg-light);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
}
.article-media img{max-width:150px}
.article-media .label-img{
  max-width:160px;border:1px solid var(--border);border-radius:8px;
  background:#fff;padding:6px;
}

/* Certification seal strip + bonus teaser inside CTAs */
.article-seals{margin-top:18px;text-align:center}
.article-seals img{max-width:100%;height:auto;max-height:52px}
.bonus-teaser{
  display:flex;gap:12px;justify-content:center;align-items:center;
  margin-top:16px;flex-wrap:wrap;
}
.bonus-teaser img{
  width:48px;height:48px;border-radius:6px;border:1px solid var(--border);
  object-fit:cover;
}
.bonus-teaser span{font-size:.8rem;color:var(--muted);font-weight:600}

/* Author box at end */
.author-box{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--bg-light);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
  margin:40px 0;
}
.author-avatar{
  width:56px;height:56px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.3rem;flex-shrink:0;
}
.author-bio{font-size:.88rem;color:var(--muted);line-height:1.6}
.author-bio strong{display:block;color:#111;margin-bottom:4px;font-size:.95rem}