:root {
  --brand: #2563eb;
  --brand-light: #eff6ff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --bg: #f9fafb;
  --radius: 12px;
}
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; color: var(--text); margin: 0; background: #fff; line-height: 1.5; }
header { background: var(--brand); color: #fff; padding: 32px 20px; text-align: center; }
header a { color: rgba(255,255,255,.9); text-decoration: none; font-weight: 600; }
header h1 { margin: 12px 0 4px; font-size: 1.8rem; }
header p.subtitle { color: rgba(255,255,255,.9); margin: 0; }
.header-nav { margin-top: 16px; display: flex; gap: 16px; justify-content: center; }
.header-nav a { font-weight: 600; padding: 6px 12px; background: rgba(255,255,255,0.1); border-radius: 6px; }
.header-nav a:hover { background: rgba(255,255,255,0.2); }
h2 { font-size: 1.4rem; margin-top: 32px; }
h3 { font-size: 1.1rem; }
.disclosure-banner { background: #fef3c7; border-bottom: 1px solid #fde68a; padding: 12px 20px; font-size: .9rem; color: #78350f; text-align: center; }
main { max-width: 780px; margin: 0 auto; padding: 24px 20px 60px; }
nav.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 16px; }
nav.crumbs a { color: var(--brand); text-decoration: none; }
.review-in-progress { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 16px; font-weight: 600; color: #92400e; margin-bottom: 24px; }
.references { padding-left: 20px; }
.references li { margin-bottom: 8px; font-size: .9rem; }
section { margin-top: 40px; }
main > section { overflow-x: auto; }
footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 24px; border-top: 1px solid var(--border); }
footer p:first-child { max-width: 640px; margin: 0 auto 8px; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 12px 0; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.review-verdict { font-size: 1.1rem; font-weight: 600; padding: 16px; background: var(--brand-light); border-radius: var(--radius); border-left: 4px solid var(--brand); }
.spec-table { width: 100%; border: 1px solid var(--border); }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pros-cons .pros { background: #ecfdf5; padding: 16px; border-radius: 8px; }
.pros-cons .cons { background: #fef2f2; padding: 16px; border-radius: 8px; }
.product-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,.05); }
.rating-stars { color: #eab308; font-size: 1.2rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 24px; }
.card { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color .2s; }
.card:hover { border-color: var(--brand); }
.card h3 { margin: 0 0 8px; color: var(--brand); }
.card p { margin: 0; font-size: .9rem; color: var(--muted); }
@media (max-width: 640px) {
  header h1 { font-size: 1.4rem; }
  h2 { font-size: 1.15rem; }
  h3 { font-size: 1rem; }
  .disclosure-banner { font-size: .8rem; }
  footer { font-size: .78rem; }
  .pros-cons { grid-template-columns: 1fr; }
}

/* ── E-E-A-T / Methodology badges ── */
.verified-badge {
  font-size: .82rem;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 6px 12px;
  margin: 0 0 12px;
  display: inline-block;
}
.verified-badge a { color: #15803d; }

.methodology-block {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: .9rem;
  color: #1e3a5f;
  margin-bottom: 20px;
}
.methodology-block a { color: var(--brand); }

.review-intro { font-size: 1.05rem; line-height: 1.7; }
.review-meta  { font-size: .85rem; color: var(--muted); margin-top: -8px; }

/* ── Related guides + from-our-tests ── */
.related-guides {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.related-guides h2 { margin-top: 0; font-size: 1.1rem; }
.related-guides ul { margin: 8px 0 0; padding-left: 20px; }
.related-guides li { margin-bottom: 6px; }
.related-guides a { color: var(--brand); }

.from-our-tests {
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 16px 20px;
}
.from-our-tests h2 { margin-top: 0; font-size: 1.05rem; color: #78350f; }
.from-our-tests a { color: #92400e; }

/* ── FAQ details/summary ── */
.faq-section details { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
.faq-section summary { padding: 12px 16px; font-weight: 600; cursor: pointer; list-style: none; }
.faq-section summary::-webkit-details-marker { display: none; }
.faq-section summary::before { content: '+ '; color: var(--brand); }
details[open] summary::before { content: '− '; }
.faq-section details p { padding: 0 16px 14px; margin: 0; color: var(--muted); }

/* ── Medical disclaimer ── */
.medical-disclaimer {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: .88rem;
  color: #7c2d12;
}

/* ── Changelog ── */
.changelog-list { list-style: none; padding: 0; }
.changelog-list li { border-bottom: 1px solid var(--border); padding: 12px 0; font-size: .9rem; }

/* ── Footer disclaimer ── */
.footer-disclaimer { font-size: .75rem; color: #9ca3af; margin-top: 8px; }

/* ── Buy button ── */
.buy-btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  margin-top: 8px;
  transition: background .2s;
}
.buy-btn:hover { background: #1d4ed8; }