/* HealthWealth100 -- design system. Distinct from HealthyWealthy100 and the Epsilon Organic brand system.
   Industry design system: Steel & Gold palette, hard square corners throughout, no rounded elements anywhere,
   blueprint framing with corner registration marks on cards and major sections.
   Base accent hexes are from the Sep 3, 2026 brand pack (Health Wealth 100/Brand Guidelines.md). The pack only
   specified the two base accents, light ground, and text color -- the hover/pressed darker steps and the
   supporting neutrals (line, tag-bg, muted) below are derived, not given verbatim. Flag for review if the
   brand pack is ever updated with an official ramp. */
:root{
  --hw-primary-accent:#3F5F80;
  --hw-primary-accent-dark:#2C4459;
  --hw-gold-accent:#D4A84A;
  --hw-gold-accent-dark:#AD8339;
  --hw-text:#1D1F20;
  --muted:#5F6B75;
  --hw-light-bg:#F2F2F3;
  --white:#FFFFFF;
  --line:#C7D2DB;
  --tag-bg:#EAF0F5;
  --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--hw-light-bg);
  color:var(--hw-text);
  font-family:"Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size:18px;
  line-height:1.65;
}
h1,h2,h3,h4,.eyebrow,.nav-link,.btn,.tag,.masthead-title{
  font-family:"Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
}
h1,h2,h3,.masthead-title,.hero-wordmark-line{letter-spacing:-.02em;}
img{max-width:100%;display:block;}

/* Blueprint corner registration marks -- the Industry design system's signature detail.
   Small "+" crosshairs at the top-left and bottom-right of major framed blocks. Subtle, low-opacity,
   accent-colored. Applied via a shared class so future blocks can opt in without new rules. */
.blueprint-frame{position:relative;}
.blueprint-frame::before,.blueprint-frame::after{
  content:"+";
  position:absolute;
  font-family:"Barlow Condensed",sans-serif;
  font-size:14px;
  line-height:1;
  color:var(--hw-primary-accent);
  opacity:.55;
  pointer-events:none;
}
.blueprint-frame::before{top:-7px;left:-7px;}
.blueprint-frame::after{bottom:-7px;right:-7px;color:var(--hw-gold-accent-dark);}
a{color:var(--hw-primary-accent-dark);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* Top utility bar: tagline left, date + About Us right */
.topbar{background:var(--hw-text);color:#fff;font-family:"Barlow Condensed",sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;gap:16px;}
.topbar-tag{color:var(--hw-gold-accent);opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-right{display:flex;align-items:center;gap:18px;white-space:nowrap;}
.topbar a{color:#fff;text-decoration:none;opacity:.85;}
.topbar a:hover{opacity:1;text-decoration:underline;}
.nav-date{color:#fff;opacity:.65;}
@media(max-width:700px){.nav-date{display:none;} .topbar-tag{font-size:11px;}}

/* Masthead: centered wordmark only, no separate tagline line (lives in topbar) */
.masthead{background:var(--white);}
.masthead .wrap{display:flex;align-items:center;justify-content:center;padding:26px 24px 22px;}
.masthead-title{font-weight:600;font-size:38px;letter-spacing:-.02em;text-decoration:none;}
.wm-health,.wm-hundred{color:var(--hw-primary-accent);}
.wm-wealth{color:var(--hw-gold-accent);}

/* Nav: centered row, cream band, small square dividers between links, slate rule beneath */
nav.main-nav{background:var(--tag-bg);border-top:1px solid var(--line);position:sticky;top:0;z-index:100;box-shadow:0 2px 6px rgba(30,35,40,.08);}
nav.main-nav .wrap{display:flex;justify-content:center;flex-wrap:wrap;padding:12px 24px;overflow-x:auto;}
nav.main-nav a{
  font-family:"Barlow Condensed",sans-serif;
  color:var(--hw-primary-accent-dark);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:15px;
  font-weight:700;
  padding:8px 4px;
  display:inline-block;
}
nav.main-nav a:not(:first-child)::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--hw-gold-accent);
  margin:0 22px;
  vertical-align:middle;
}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--hw-gold-accent-dark);}
nav.main-nav::after{content:"";display:block;height:4px;background:var(--hw-primary-accent);}
@media(max-width:700px){nav.main-nav a:not(:first-child)::before{margin:0 12px;} nav.main-nav a{font-size:13px;}}

/* Home hero: logo mark on a white block, on a tag-bg band */
.home-hero-band{background:var(--tag-bg);padding:40px 24px;}
.home-hero-tile{background:var(--white);max-width:1400px;margin:0 auto;padding:72px 64px;display:flex;justify-content:center;box-shadow:0 4px 16px rgba(30,35,40,.06);border:1px solid var(--line);}
.hero-wordmark{display:inline-flex;flex-direction:column;align-items:center;gap:22px;text-align:center;}
.hero-wordmark-line{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(56px,11vw,192px);letter-spacing:-.02em;line-height:1;}
.hero-wordmark-rule{width:100%;height:4px;background:var(--hw-primary-accent);}
.hero-wordmark-tag{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:16px;color:var(--muted);margin:0;}
.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-wordmark-line{font-size:48px;} .hero-wordmark-tag{font-size:12px;}}

/* 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(--hw-primary-accent);font-weight:700;}
.hero h1{font-size:44px;line-height:1.08;margin:10px 0 14px;font-weight:600;}
.hero p.dek{font-size:20px;color:var(--muted);max-width:640px;font-family:"Barlow",sans-serif;}

/* Category color squares (deliberately square, not round) */
.dot{display:inline-block;width:9px;height:9px;border-radius:0;background:var(--hw-primary-accent);margin-right:6px;}
.dot.amber{background:var(--hw-gold-accent-dark);}
.dot.ink{background:var(--hw-text);}

/* 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:"Barlow Condensed",sans-serif;font-weight:700;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(--hw-gold-accent-dark);margin-bottom:8px;}
.card h3{font-size:20px;line-height:1.25;margin:0 0 10px;font-weight:600;}
.card h3 a{color:var(--hw-text);text-decoration:none;}
.card h3 a:hover{color:var(--hw-primary-accent-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-slate{background:linear-gradient(135deg,#2F4858,#1A2933);}
.art-amber{background:linear-gradient(135deg,#B4771F,#7A4F12);}
.art-ink{background:linear-gradient(135deg,#1E2328,#0C0E10);}

/* Section headers */
.section-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:3px solid var(--hw-text);padding-bottom:8px;margin-top:48px;}
.section-head h2{font-size:22px;text-transform:uppercase;letter-spacing:.04em;margin:0;font-weight:600;}
.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(--hw-primary-accent);font-weight:700;}
.article-head h1{font-size:38px;line-height:1.12;margin:12px 0 16px;font-weight:600;}
.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:56px;height:auto;display:block;border:none;filter:drop-shadow(0 1px 3px rgba(30,35,40,.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:600;}
.article-body h3{font-size:21px;margin-top:28px;font-weight:600;}
.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(--hw-gold-accent-dark);padding:18px 22px;margin:28px 0;max-width:700px;}
.callout .eyebrow{color:var(--hw-gold-accent-dark);}
.callout h4{margin:6px 0 8px;font-size:17px;}
.callout p{margin:0;font-size:16px;color:var(--hw-text);}
.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(--hw-gold-accent-dark);}
.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(--hw-primary-accent);color:#fff;text-decoration:none;padding:10px 20px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-top:4px;border-radius:0;}
.btn:hover{background:var(--hw-primary-accent-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:700;font-size:14px;padding:8px 18px;border:none;text-decoration:none;color:var(--hw-gold-accent);background:var(--hw-primary-accent);border-radius:0;}
.cat-pill:hover{background:var(--hw-primary-accent-dark);color:var(--hw-gold-accent);}

/* Footer */
footer{background:var(--hw-text);color:#c7c5bc;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:#c7c5bc;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 #38404A;font-size:14px;color:#c7c5bc;}
footer .product-inquiry a{color:var(--hw-gold-accent);text-decoration:underline;}
footer .legal{width:100%;margin-top:14px;padding-top:0;font-size:12px;color:#8b8c85;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(--hw-gold-accent-dark);padding:26px 24px;display:flex;flex-direction:column;}
.compare-card .eyebrow{color:var(--hw-gold-accent-dark);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;font-weight:600;}
.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(--hw-gold-accent-dark);}
.compare-card .btn:hover{background:#8C5C17;}

/* 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(--hw-primary-accent);color:#fff;font-family:"Barlow Condensed",sans-serif;}
table.compare-table thead th.row-label-head{background:var(--hw-text);}
table.compare-table thead .product-name{display:block;font-size:18px;font-weight:600;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(--hw-gold-accent-dark);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(--hw-text);}
table.compare-table tbody tr:nth-child(even) td{background:#FBFAF6;}
table.compare-table td.best{background:#EFE6D3;font-weight:700;color:var(--hw-gold-accent-dark);}
.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;}

/* Top Rated 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:"Barlow Condensed",sans-serif;font-weight:600;font-size:36px;color:var(--line);min-width:56px;line-height:1;}
.roundup-item:nth-child(1) .roundup-rank{color:var(--hw-gold-accent-dark);}
.roundup-body{flex:1;}
.roundup-body h3{font-size:21px;margin:0 0 8px;font-weight:600;}
.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(--hw-primary-accent);}
.compare-crosslink p{margin:0;font-size:15px;}

/* Spotlight (renamed from "Wellness Pick of the Month" to avoid mirroring HealthyWealthy100) */
.spotlight{max-width:1120px;margin:36px auto 0;background:var(--white);border:1px solid var(--line);box-shadow:0 4px 16px rgba(30,35,40,.06);}
.spotlight-inner{display:flex;gap:28px;padding:32px;align-items:center;}
.spotlight-photo{width:220px;height:220px;object-fit:cover;flex-shrink:0;border:1px solid var(--line);}
.spotlight-body .eyebrow{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:700;color:var(--hw-gold-accent-dark);margin-bottom:8px;}
.spotlight-body h3{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:24px;margin:0 0 10px;line-height:1.2;}
.spotlight-body p{color:var(--muted);font-size:15px;margin:0 0 16px;max-width:58ch;}
.spotlight-links{display:flex;gap:12px;flex-wrap:wrap;}
.spotlight-links .btn{margin-top:0;}
@media(max-width:700px){.spotlight-inner{flex-direction:column;align-items:flex-start;padding:24px;}.spotlight-photo{width:100%;height:200px;}}

@media(max-width:700px){
  .masthead-title{font-size:28px;}
  nav.main-nav .wrap{overflow-x:auto;}
  .hero h1{font-size:30px;}
  .article-head h1{font-size:28px;}
}

.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:999;background:var(--hw-text);border-top:3px solid var(--hw-gold-accent);}
.cookie-banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;flex-wrap:wrap;}
.cookie-banner p{color:var(--white);font-size:14px;line-height:1.5;margin:0;flex:1;min-width:240px;}
.cookie-banner p a{color:var(--hw-gold-accent);text-decoration:underline;}
.cookie-banner button{background:var(--hw-gold-accent);color:var(--hw-text);border:none;font-weight:600;font-size:14px;padding:10px 22px;cursor:pointer;flex-shrink:0;}
.cookie-banner button:hover{background:var(--hw-gold-accent-dark);}
@media (max-width:640px){
  .cookie-banner .wrap{padding:12px 16px;}
  .cookie-banner button{width:100%;}
}