/* HealthyWealthy100 -- design system. Distinct from Epsilon Organic brand system. */
:root{
  --red:#C8102E;
  --red-dark:#9B0C22;
  --teal:#0F6B66;
  --navy:#1C3144;
  --ink:#1B1B1B;
  --muted:#6B6B63;
  --paper:#FBF8F3;
  --white:#FFFFFF;
  --line:#E4DFD4;
  --tag-bg:#F1ECE1;
  --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"PT Serif", Georgia, serif;
  font-size:18px;
  line-height:1.65;
}
h1,h2,h3,h4,.eyebrow,.nav-link,.btn,.tag,.masthead-title{
  font-family:"Archivo", "Helvetica Neue", Arial, sans-serif;
}
img{max-width:100%;display:block;}
a{color:var(--red-dark);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* Top utility bar */
.topbar{background:var(--navy);color:#fff;font-family:"Barlow Condensed",sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;}
.topbar .wrap{display:flex;justify-content:flex-end;align-items:center;padding:8px 24px;}
.topbar a{color:#fff;text-decoration:none;opacity:.85;}
.topbar a:hover{opacity:1;text-decoration:underline;}

/* Masthead */
.masthead{background:var(--white);border-bottom:4px solid var(--ink);}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 16px;}
.masthead-title{font-weight:900;font-size:34px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;}
.masthead-title span{color:var(--red);}
.masthead-tagline{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--muted);margin-top:2px;}

nav.main-nav{background:var(--ink);position:sticky;top:0;z-index:100;box-shadow:0 2px 6px rgba(0,0,0,.15);}
nav.main-nav .wrap{display:flex;gap:2px;padding:0 24px;overflow-x:auto;}
nav.main-nav a{
  font-family:"Barlow Condensed",sans-serif;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:15px;
  font-weight:600;
  padding:14px 16px;
  display:inline-block;
  border-bottom:3px solid transparent;
}
nav.main-nav a:hover, nav.main-nav a.active{border-bottom:3px solid var(--red);background:rgba(255,255,255,.06);}
.nav-date{margin-left:auto;align-self:center;color:#fff;opacity:.65;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:13px;white-space:nowrap;padding-left:16px;}
@media(max-width:700px){.nav-date{display:none;}}

/* Home hero: live logo mark (text + inline SVG check) on a white block, on a tan band */
.home-hero-band{background:var(--tag-bg);padding:40px 24px;}
.home-hero-tile{background:var(--white);max-width:1120px;margin:0 auto;padding:72px 48px;display:flex;justify-content:center;box-shadow:0 4px 16px rgba(27,27,27,.06);}
.hero-logo{display:inline-flex;flex-direction:column;align-items:center;gap:4px;}
.hero-logo-mark{position:relative;display:inline-block;line-height:.8;}
.hero-logo-100{font-family:"Archivo",sans-serif;font-weight:900;font-size:190px;letter-spacing:-.04em;color:var(--ink);}
.hero-logo-check{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.hero-logo-word{font-family:"Archivo",sans-serif;font-weight:800;font-size:46px;letter-spacing:-.02em;color:var(--ink);}
.hero-logo-word .red{color:var(--red);}
.hero-logo-word .muted{color:#6B6B63;font-weight:700;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media(max-width:700px){.home-hero-band{padding:24px 16px;} .home-hero-tile{padding:36px 20px;} .hero-logo-100{font-size:92px;} .hero-logo-word{font-size:23px;}}

/* Hero */
.hero{padding:48px 0 8px;}
.hero-eyebrow{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--red);font-weight:700;}
.hero h1{font-size:44px;line-height:1.08;margin:10px 0 14px;font-weight:900;}
.hero p.dek{font-size:20px;color:var(--muted);max-width:640px;font-family:"PT Serif",serif;}

/* Category color dots */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red);margin-right:6px;}
.dot.teal{background:var(--teal);}
.dot.navy{background:var(--navy);}

/* Card grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:32px 0 56px;}
@media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid{grid-template-columns:1fr;}}
.card{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;}
.card-art{position:relative;overflow:hidden;height:150px;display:flex;align-items:center;justify-content:center;font-family:"Archivo",sans-serif;font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:#fff;text-align:center;padding:12px;}
.card-art-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;}
.card-art-label{position:relative;z-index:2;display:inline-flex;align-items:center;}
.card-body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column;}
.card .eyebrow{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:700;color:var(--teal);margin-bottom:8px;}
.card h3{font-size:20px;line-height:1.25;margin:0 0 10px;}
.card h3 a{color:var(--ink);text-decoration:none;}
.card h3 a:hover{color:var(--red-dark);}
.card p{color:var(--muted);font-size:15px;margin:0;flex:1;}
.card .meta{font-family:"Barlow Condensed",sans-serif;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:14px;}

/* art color variants */
.art-red{background:linear-gradient(135deg,#C8102E,#7A0A1D);}
.art-teal{background:linear-gradient(135deg,#0F6B66,#0A4B47);}
.art-navy{background:linear-gradient(135deg,#1C3144,#0E1B26);}

/* Section headers */
.section-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:3px solid var(--ink);padding-bottom:8px;margin-top:48px;}
.section-head h2{font-size:22px;text-transform:uppercase;letter-spacing:.04em;margin:0;font-weight:900;}
.section-head a{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-size:13px;letter-spacing:.08em;font-weight:600;text-decoration:none;}

/* Article page */
.article-head{padding:36px 0 0;}
.article-head .eyebrow{color:var(--red);font-weight:700;}
.article-head h1{font-size:38px;line-height:1.12;margin:12px 0 16px;font-weight:900;}
.article-head .dek{font-size:19px;color:var(--muted);}
.byline{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:20px 0 8px;}
.article-hero-photo{max-width:700px;margin:8px 0 28px;}
.photo-frame{position:relative;}
.photo-frame > img{width:100%;height:auto;display:block;border:1px solid var(--line);}
.photo-logo-chip{position:absolute;bottom:11px;right:11px;display:flex;align-items:center;}
.photo-logo-chip img{width:64px;height:auto;display:block;border:none;filter:drop-shadow(0 1px 3px rgba(27,27,27,.45));}
.photo-credit{font-family:"Barlow Condensed",sans-serif;font-size:12px;color:var(--muted);letter-spacing:.02em;margin:6px 0 0;}
.photo-credit a{color:var(--muted);}
.article-body{max-width:700px;font-size:19px;line-height:1.75;}
.article-body h2{font-size:26px;margin-top:36px;font-weight:900;}
.article-body h3{font-size:21px;margin-top:28px;font-weight:900;}
.article-body p{margin:0 0 20px;}
.article-body ul{margin:0 0 20px;padding-left:22px;}
.article-body li{margin-bottom:8px;}

.callout{background:var(--tag-bg);border-left:4px solid var(--teal);padding:18px 22px;margin:28px 0;max-width:700px;}
.callout .eyebrow{color:var(--teal);}
.callout h4{margin:6px 0 8px;font-size:17px;}
.callout p{margin:0;font-size:16px;color:var(--ink);}
.callout a.btn{margin-top:12px;}

/* Rating badge: 100 point score shown as up to 5 stars, plus the raw score */
.rating{display:flex;align-items:center;gap:10px;margin:2px 0 12px;}
.stars{position:relative;display:inline-block;font-size:20px;line-height:1;letter-spacing:3px;color:#DCD6C7;font-family:Arial,sans-serif;}
.stars .fill{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;color:var(--red);}
.rating-score{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;}

.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;padding:10px 20px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-top:4px;}
.btn:hover{background:var(--red-dark);}

.disclosure-note{font-size:13px;color:var(--muted);background:var(--tag-bg);border:1px solid var(--line);padding:10px 14px;max-width:700px;margin:20px 0;font-family:"Barlow Condensed",sans-serif;letter-spacing:.02em;}
.fda-note{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:32px;max-width:700px;font-style:italic;}

.ad-slot{max-width:700px;margin:30px 0;padding:26px;text-align:center;border:1px dashed var(--line);color:var(--muted);font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:12px;background:#fff;}

/* Category strip on home */
.cat-strip{display:flex;gap:16px;margin:36px 0;flex-wrap:wrap;}
.cat-pill{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:14px;padding:8px 18px;border:2px solid var(--ink);text-decoration:none;color:var(--ink);}
.cat-pill:hover{background:var(--ink);color:#fff;}

/* Footer */
footer{background:var(--ink);color:#cfcac0;margin-top:64px;padding:40px 0 24px;}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;}
footer h5{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:#fff;margin:0 0 12px;}
footer a{color:#cfcac0;text-decoration:none;font-size:14px;line-height:2;}
footer a:hover{color:#fff;}
footer .col{min-width:160px;}
footer .product-inquiry{width:100%;margin-top:24px;padding-top:20px;border-top:1px solid #3a3a36;font-size:14px;color:#c7c5bc;}
footer .product-inquiry a{color:var(--red);text-decoration:underline;}
footer .legal{width:100%;margin-top:14px;padding-top:0;font-size:12px;color:#8a857c;font-family:"Barlow Condensed",sans-serif;letter-spacing:.03em;}

.breadcrumb{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--muted);margin-top:24px;}
.breadcrumb a{color:var(--muted);}

/* Compare hub cards */
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0 56px;}
@media(max-width:860px){.compare-grid{grid-template-columns:1fr;}}
.compare-card{background:var(--white);border:1px solid var(--line);border-top:5px solid var(--teal);padding:26px 24px;display:flex;flex-direction:column;}
.compare-card .eyebrow{color:var(--teal);font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:700;margin-bottom:8px;}
.compare-card h3{font-size:21px;margin:0 0 10px;}
.compare-card .vs-line{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:14px;color:var(--muted);margin:0 0 14px;font-weight:600;}
.compare-card p{color:var(--muted);font-size:15px;margin:0 0 18px;flex:1;}
.compare-card .btn{align-self:flex-start;background:var(--teal);}
.compare-card .btn:hover{background:#0A4B47;}

/* Side by side comparison table */
.compare-table-wrap{overflow-x:auto;margin:32px 0;border:1px solid var(--line);background:var(--white);}
table.compare-table{border-collapse:collapse;width:100%;min-width:560px;}
table.compare-table th, table.compare-table td{padding:16px 20px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
table.compare-table thead th{background:var(--navy);color:#fff;font-family:"Archivo",sans-serif;}
table.compare-table thead th.row-label-head{background:var(--ink);}
table.compare-table thead .product-name{display:block;font-size:18px;font-weight:800;margin-bottom:8px;}
table.compare-table thead .rating{margin:8px 0;justify-content:flex-start;}
table.compare-table thead .rating .stars{color:rgba(255,255,255,.35);}
table.compare-table thead .rating .rating-score{color:#fff;opacity:.85;}
table.compare-table thead .btn{margin-top:6px;background:var(--red);font-size:12px;padding:8px 14px;}
table.compare-table tbody th{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:13px;font-weight:700;color:var(--muted);background:var(--tag-bg);white-space:nowrap;position:sticky;left:0;}
table.compare-table tbody td{font-size:15px;color:var(--ink);}
table.compare-table tbody tr:nth-child(even) td{background:#FCFAF6;}
table.compare-table td.best{background:#EAF3F1;font-weight:700;color:var(--teal);}
.compare-table-hint{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--muted);text-align:right;margin:6px 0 0;display:none;}

/* Best Of roundup list */
.roundup-list{max-width:760px;margin:24px 0 56px;}
.roundup-item{display:flex;gap:24px;padding:28px 0;border-bottom:1px solid var(--line);}
.roundup-item:first-child{padding-top:8px;}
.roundup-rank{font-family:"Archivo",sans-serif;font-weight:900;font-size:36px;color:var(--line);min-width:56px;line-height:1;}
.roundup-item:nth-child(1) .roundup-rank{color:var(--red);}
.roundup-body{flex:1;}
.roundup-body h3{font-size:21px;margin:0 0 8px;}
.roundup-body p{color:var(--muted);font-size:15px;margin:8px 0 12px;}
.roundup-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.roundup-links a:not(.btn){font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:13px;font-weight:600;}
.roundup-links .btn{margin-top:0;}
@media(max-width:600px){.roundup-item{gap:14px;} .roundup-rank{font-size:26px;min-width:34px;}}
@media(max-width:700px){.compare-table-hint{display:block;}}
.compare-crosslink{max-width:700px;margin:20px 0 40px;padding:18px 22px;background:var(--tag-bg);border-left:4px solid var(--red);}
.compare-crosslink p{margin:0;font-size:15px;}

/* Wellness Pick of the Month */
.wellness-pick{max-width:1120px;margin:36px auto 0;background:var(--white);border:1px solid var(--line);box-shadow:0 4px 16px rgba(27,27,27,.06);}
.wellness-pick-inner{display:flex;gap:28px;padding:32px;align-items:center;}
.wellness-pick-photo{width:220px;height:220px;object-fit:cover;flex-shrink:0;border:1px solid var(--line);}
.wellness-pick-body .eyebrow{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:700;color:var(--teal);margin-bottom:8px;}
.wellness-pick-body h3{font-family:"Archivo",sans-serif;font-weight:900;font-size:24px;margin:0 0 10px;line-height:1.2;}
.wellness-pick-body p{color:var(--ink);opacity:.8;font-size:15px;margin:0 0 16px;max-width:58ch;}
.wellness-pick-links{display:flex;gap:12px;flex-wrap:wrap;}
.wellness-pick-links .btn{margin-top:0;}
@media(max-width:700px){.wellness-pick-inner{flex-direction:column;align-items:flex-start;padding:24px;}.wellness-pick-photo{width:100%;height:200px;}}

@media(max-width:700px){
  .masthead .wrap{flex-direction:column;align-items:flex-start;gap:6px;}
  .masthead-title{font-size:28px;}
  nav.main-nav .wrap{overflow-x:auto;}
  .hero h1{font-size:30px;}
  .article-head h1{font-size:28px;}
}