:root {
  --article-ink: #182321;
  --article-muted: #52605d;
  --article-teal: #5b9e96;
  --article-teal-dark: #2f6f68;
  --article-teal-pale: #eff8f6;
  --article-blue: #0d47a1;
  --article-border: #dce7e4;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--article-ink); font-family: Lato, sans-serif; line-height: 1.72; }
a { color: #0c4a6e; }
.article-hero { background: linear-gradient(135deg, #eaf5f2, #f8fbfa); border-bottom: 1px solid var(--article-border); padding: 64px 20px 54px; }
.article-hero__inner, .article-layout { margin: 0 auto; max-width: 1120px; }
.eyebrow { color: var(--article-teal-dark); font: 800 12px/1.2 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.article-hero h1 { font: 900 clamp(2.25rem, 6vw, 4rem)/1.03 "Helvetica Neue", Arial, sans-serif; letter-spacing: -.035em; margin: 14px 0 18px; max-width: 900px; }
.article-hero__dek { color: #34433f; font-size: 1.25rem; max-width: 790px; }
.byline { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; }
.byline strong { font-family: Inter, sans-serif; }
.byline span { color: var(--article-muted); }
.article-layout { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr) 280px; padding: 48px 20px 72px; }
.article-body { font-size: 1.06rem; min-width: 0; }
.article-body h2 { font: 900 2rem/1.15 "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; margin: 52px 0 16px; }
.article-body h3 { font: 800 1.28rem/1.3 Inter, sans-serif; margin: 30px 0 10px; }
.article-body li { margin-bottom: 9px; }
.article-body blockquote { border-left: 4px solid var(--article-teal); color: #30423e; font-size: 1.16rem; margin: 30px 0; padding: 4px 0 4px 22px; }
.quick-answer, .safety-box, .checklist, .medical-note { border-radius: 10px; margin: 28px 0; padding: 24px; }
.quick-answer { background: var(--article-teal-pale); border: 1px solid var(--article-border); }
.quick-answer h2, .safety-box h2, .checklist h2 { margin-top: 0; }
.safety-box { background: #fff8e8; border: 1px solid #ead9a8; }
.emergency { background: #fff1f0; border-color: #e3aaa5; }
.checklist { background: #f7faf9; border: 1px solid var(--article-border); }
.checklist li { list-style: "✓  "; padding-left: 4px; }
.comparison { border-collapse: collapse; margin: 24px 0; width: 100%; }
.comparison th, .comparison td { border: 1px solid var(--article-border); padding: 14px; text-align: left; vertical-align: top; }
.comparison th { background: var(--article-teal-pale); font-family: Inter, sans-serif; }
.source-list a { font-weight: 700; }
.article-aside { align-self: start; position: sticky; top: 24px; }
.aside-card { background: #f7faf9; border: 1px solid var(--article-border); border-radius: 10px; margin-bottom: 18px; padding: 20px; }
.aside-card h2 { font: 800 1.05rem/1.3 Inter, sans-serif; margin-top: 0; text-transform: uppercase; }
.aside-card a { display: block; font-weight: 700; margin: 10px 0; text-decoration: none; }
.btn { background: var(--article-blue); border-radius: 7px; color: #fff !important; display: inline-block !important; font: 800 12px/1 Inter, sans-serif; letter-spacing: .05em; padding: 14px 16px; text-align: center; text-transform: uppercase; }
.medical-note { border: 1px solid var(--article-border); color: var(--article-muted); font-size: .92rem; }
footer { background: #f9fafb; border-top: 1px solid #e5e7eb; color: #52605d; padding: 36px 20px; text-align: center; }

@media (max-width: 860px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; }
}
@media (max-width: 620px) {
  .article-hero { padding-top: 42px; }
  .article-layout { padding-top: 30px; }
  .comparison { display: block; overflow-x: auto; }
}