/* =========================================================
   Meridian Health Review — editorial article stylesheet
   Minimal, white, wire-service typography.
   ========================================================= */

:root{
  --ink:        #16181d;
  --ink-2:      #3c414a;
  --muted:      #6b7280;
  --faint:      #9aa1ab;
  --rule:       #e3e6ea;
  --rule-2:     #f0f2f4;
  --paper:      #ffffff;
  --wash:       #f7f8f9;
  --accent:     #c1121f;   /* section red, used sparingly */
  --accent-ink: #96101a;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --col:   700px;   /* text measure */
  --wide:  980px;   /* figures, tables, offer */
  --gut:   20px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.7rem 1rem;
  font-family:var(--sans); font-size:14px;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- layout ---------- */
.wrap{
  width:100%;
  margin-inline:auto;
  padding-inline:var(--gut);
}
.col{  max-width:calc(var(--col)  + var(--gut)*2); }
.wide{ max-width:calc(var(--wide) + var(--gut)*2); }

/* =========================================================
   READING PROGRESS
   ========================================================= */
.progress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:60;
  background:transparent; pointer-events:none;
}
.progress span{
  display:block; height:100%; width:0;
  background:var(--accent);
  transition:width .08s linear;
}

/* =========================================================
   MASTHEAD
   ========================================================= */
.masthead{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.masthead__row{
  max-width:calc(1180px + var(--gut)*2);
  display:flex; align-items:center; gap:1.25rem;
  height:58px;
}

.logo{
  font-family:var(--sans);
  font-weight:800; font-size:17px; letter-spacing:-.025em;
  text-decoration:none; color:var(--ink);
  display:flex; align-items:baseline; gap:.45em;
  white-space:nowrap;
}
.logo span{
  font-weight:500; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}

.sections{ margin-left:auto; }
.sections ul{
  display:flex; gap:1.6rem; list-style:none; margin:0; padding:0;
}
.sections a{
  font-family:var(--sans); font-size:13.5px; font-weight:500;
  letter-spacing:.01em; text-decoration:none; color:var(--ink-2);
  padding:.4rem 0; border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.sections a:hover{ color:var(--accent); border-bottom-color:var(--accent); }

.disclosure-pill{
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--rule);
  padding:.35rem .6rem; border-radius:2px; white-space:nowrap;
}

.hamburger{
  display:none;
  width:34px; height:34px; padding:0; margin-left:-6px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:4px;
}
.hamburger span{
  display:block; height:1.7px; width:19px; background:var(--ink);
  margin-inline:auto; transition:transform .22s, opacity .18s;
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.7px) rotate(-45deg); }

/* =========================================================
   ARTICLE HEAD
   ========================================================= */
.crumbs{
  font-family:var(--sans); font-size:11.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent);
  margin:2.6rem 0 1rem;
}
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
.crumbs i{ color:var(--faint); font-style:normal; margin:0 .35em; }

h1{
  font-family:var(--serif);
  font-size:clamp(2.15rem, 6.2vw, 3.35rem);
  line-height:1.06;
  letter-spacing:-.028em;
  font-weight:600;
  margin:0 0 1rem;
  text-wrap:balance;
}

.deck{
  font-size:clamp(1.12rem, 2.4vw, 1.32rem);
  line-height:1.5;
  color:var(--ink-2);
  margin:0 0 1.9rem;
  max-width:36em;
  text-wrap:pretty;
}

/* byline */
.byline{
  display:flex; align-items:center; gap:.85rem;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:.95rem 0;
  font-family:var(--sans);
}
.byline__ava{
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  flex:none; filter:grayscale(1);
}
.byline__meta{ min-width:0; }
.byline__name{
  margin:0; font-size:14px; font-weight:700; letter-spacing:-.005em; line-height:1.35;
}
.byline__role{
  margin:0; font-size:12.5px; color:var(--muted); line-height:1.35;
}
.byline__time{
  margin-left:auto; text-align:right; flex:none;
}
.byline__time p{ margin:0; font-size:12px; color:var(--muted); line-height:1.5; }
.byline__read{ color:var(--faint) !important; }

/* share */
.share{
  display:flex; align-items:center; gap:.5rem;
  padding:.85rem 0 1.6rem;
  font-family:var(--sans);
}
.share span{
  font-size:10.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint); margin-right:.3rem;
}
.share a{
  width:32px; height:32px; border:1px solid var(--rule); border-radius:50%;
  display:grid; place-items:center;
  font-size:13px; font-weight:600; text-decoration:none; color:var(--ink-2);
  transition:background .15s, color .15s, border-color .15s;
}
.share a:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* =========================================================
   FIGURES
   ========================================================= */
.lead{
  margin:0 auto 2.4rem;
  max-width:calc(1180px + var(--gut)*2);
  padding-inline:var(--gut);
}
.lead img{ width:100%; }

figure{ margin:0; }

.wide-fig{
  max-width:calc(var(--wide) + var(--gut)*2);
  margin:2.4rem auto 2.6rem;
  padding-inline:var(--gut);
}
.wide-fig img{ width:100%; }
.wide-fig.diagram img{
  border:1px solid var(--rule);
  background:#fff;
}

figcaption{
  font-family:var(--sans);
  font-size:13px; line-height:1.55; color:var(--muted);
  padding-top:.7rem;
  border-bottom:1px solid var(--rule-2);
  padding-bottom:.8rem;
  max-width:70ch;
}
.credit{
  color:var(--faint); font-size:10.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap; margin-left:.35em;
}

/* =========================================================
   BODY TEXT
   ========================================================= */
.body p{
  margin:0 0 1.35em;
  text-wrap:pretty;
}
.body .lede-p{
  font-size:1.16em;
  line-height:1.6;
}
.body em{ font-style:italic; }
.body strong{ font-weight:700; }

.body h2{
  font-family:var(--serif);
  font-size:clamp(1.45rem, 3.4vw, 1.85rem);
  line-height:1.2;
  letter-spacing:-.02em;
  font-weight:600;
  margin:2.6rem 0 1.05rem;
  text-wrap:balance;
}

/* pull quote */
.pull{
  margin:2.2rem 0;
  padding:0 0 0 1.4rem;
  border-left:3px solid var(--accent);
}
.pull p{
  margin:0;
  font-size:clamp(1.24rem, 3vw, 1.5rem);
  line-height:1.36;
  letter-spacing:-.017em;
  font-weight:500;
  color:var(--ink);
  text-wrap:pretty;
}

/* fact box */
.factbox{
  border:1px solid var(--rule);
  border-top:3px solid var(--ink);
  background:var(--wash);
  padding:1.5rem 1.5rem 1.35rem;
  margin:2.3rem 0;
  font-family:var(--sans);
}
.factbox--quiet{ border-top-color:var(--accent); }
.factbox h3{
  margin:0 0 .85rem;
  font-size:11.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink);
}
.factbox ul{ margin:0; padding:0; list-style:none; }
.factbox li{
  font-size:15px; line-height:1.6; color:var(--ink-2);
  padding:.55rem 0; border-top:1px solid var(--rule);
}
.factbox li:first-child{ border-top:0; padding-top:0; }
.factbox li b{ color:var(--ink); }
.factbox p{ margin:0; font-size:15px; line-height:1.62; color:var(--ink-2); }

/* =========================================================
   HOW IT WORKS — 3 STEPS
   ========================================================= */
.steps{
  list-style:none; margin:2.2rem 0; padding:0;
  display:grid; gap:1px; background:var(--rule);
  border:1px solid var(--rule);
  grid-template-columns:repeat(3, 1fr);
}
.steps li{
  background:#fff; padding:1.4rem 1.25rem 1.5rem;
  font-family:var(--sans);
}
.steps__n{
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--ink); color:#fff;
  font-size:13px; font-weight:700;
  margin-bottom:.85rem;
}
.steps h3{
  margin:0 0 .4rem;
  font-size:15px; font-weight:700; letter-spacing:-.01em;
}
.steps p{
  margin:0 !important;
  font-size:14px; line-height:1.6; color:var(--muted);
}

/* =========================================================
   INGREDIENT LEDGER
   ========================================================= */
.ledger{
  list-style:none; counter-reset:led;
  margin:2.1rem 0; padding:0;
  border-top:1px solid var(--rule);
}
.ledger li{
  counter-increment:led;
  border-bottom:1px solid var(--rule);
  padding:1.15rem 0 1.15rem 3rem;
  position:relative;
}
.ledger li::before{
  content:counter(led,decimal-leading-zero);
  position:absolute; left:0; top:1.35rem;
  font-family:var(--sans); font-size:12px; font-weight:700;
  color:var(--accent); letter-spacing:.06em;
}
.ledger h3{
  margin:0 0 .3rem;
  font-family:var(--sans);
  font-size:15.5px; font-weight:700; letter-spacing:-.01em;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem;
}
.ledger h3 span{
  font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
}
.ledger p{
  margin:0 !important;
  font-size:16.5px; line-height:1.6; color:var(--ink-2);
}

/* =========================================================
   COMPARISON TABLE
   ========================================================= */
.compare{
  width:100%; border-collapse:collapse;
  font-family:var(--sans); font-size:14.5px;
  margin:1rem 0 2.6rem;
}
.compare caption{
  caption-side:top; text-align:left;
  font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint);
  padding-bottom:.75rem;
}
.compare th, .compare td{
  border-bottom:1px solid var(--rule);
  padding:.9rem 1rem;
  text-align:left; vertical-align:top;
  line-height:1.5;
}
.compare thead th{
  border-bottom:2px solid var(--ink);
  font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink);
  padding-bottom:.6rem;
}
.compare tbody th{
  font-weight:600; color:var(--ink); width:23%;
}
.compare td{ color:var(--muted); }
.compare .us{ background:var(--wash); color:var(--ink-2); }
.compare thead .us{ color:var(--accent); }

/* =========================================================
   READER VOICES
   ========================================================= */
.voices{
  list-style:none; margin:2rem 0 2.4rem; padding:0;
  display:grid; gap:0;
  border-top:1px solid var(--rule);
}
.voices li{
  display:flex; gap:1rem;
  padding:1.3rem 0;
  border-bottom:1px solid var(--rule);
}
.voices img{
  width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none;
}
.voices p{ margin:0 0 .35em !important; }
.voices div p:nth-child(2){
  font-size:16.5px; line-height:1.62; color:var(--ink-2);
}
.voices__stars{
  color:var(--accent); font-size:12px; letter-spacing:.16em; line-height:1;
}
.voices__who{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.02em; color:var(--faint);
  margin-bottom:0 !important;
}

/* =========================================================
   OFFER
   ========================================================= */
.offer{
  border:1px solid var(--rule);
  border-top:3px solid var(--accent);
  padding:clamp(1.6rem, 4vw, 2.6rem);
  margin:3rem 0 2rem;
  background:#fff;
}
.offer__eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin:0 0 .7rem;
}
.offer__h{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.6rem, 4vw, 2.1rem); line-height:1.14;
  letter-spacing:-.024em; margin:0 0 .7rem;
}
.offer__sub{
  font-family:var(--sans); font-size:14.5px; line-height:1.65;
  color:var(--muted); margin:0 0 1.8rem; max-width:60ch;
}

.offer__grid{
  display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(1.4rem, 3vw, 2.4rem); align-items:center;
}
.offer__shot{ background:var(--wash); padding:1rem; }
.offer__shot img{ width:100%; }

.tiers{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.tier{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:1px solid var(--rule); padding:.95rem 1.1rem;
  text-decoration:none; font-family:var(--sans);
  transition:border-color .15s, background .15s, transform .15s;
}
.tier:hover{ border-color:var(--ink); background:var(--wash); transform:translateY(-1px); }
.tier--best{ border-color:var(--ink); border-width:2px; }
.tier__l{ display:block; min-width:0; }
.tier__name{
  display:block; font-size:15px; font-weight:700; letter-spacing:-.01em;
}
.tier__name em{
  font-style:normal; font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; background:var(--accent);
  padding:.18em .5em; margin-left:.5em; vertical-align:middle;
}
.tier__sub{
  display:block; font-size:12.5px; color:var(--muted); margin-top:.15rem;
}
.tier__r{
  font-size:12px; font-weight:700; letter-spacing:.03em;
  color:var(--accent); text-align:right; flex:none;
}

.offer__cta{ margin-top:1.9rem; }
.btn{
  display:inline-block;
  background:var(--ink); color:#fff; text-decoration:none;
  font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:-.005em;
  padding:.95rem 1.7rem; border-radius:2px;
  transition:background .15s, transform .15s;
}
.btn:hover{ background:var(--accent-ink); transform:translateY(-1px); }
.btn--sm{ padding:.62rem 1.1rem; font-size:13.5px; }

.offer__fine{
  font-family:var(--sans); font-size:13px; line-height:1.65;
  color:var(--muted); margin:1.1rem 0 0; max-width:62ch;
}

.medical-note{
  font-family:var(--sans); font-size:12.5px; line-height:1.65;
  color:var(--faint);
  border-top:1px solid var(--rule);
  padding:1.3rem 0 0; margin:1.5rem 0 3rem;
}
.medical-note b{ color:var(--muted); }

/* =========================================================
   RELATED
   ========================================================= */
.related{ padding-top:2.5rem; padding-bottom:3.5rem; border-top:1px solid var(--rule); }
.related__h{
  font-family:var(--sans); font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  margin:0 0 1.4rem;
}
.related ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;
}
.related a{ text-decoration:none; display:block; }
.related img{
  width:100%; aspect-ratio:16/9; object-fit:cover; margin-bottom:.7rem;
}
.related__kick{
  display:block; font-family:var(--sans); font-size:10.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
  margin-bottom:.3rem;
}
.related__t{
  display:block; font-size:17.5px; line-height:1.3; letter-spacing:-.015em;
  font-weight:600; color:var(--ink);
}
.related a:hover .related__t{ text-decoration:underline; text-underline-offset:3px; }

/* =========================================================
   STICKY CTA
   ========================================================= */
.sticky{
  position:fixed; inset:auto 0 0 0; z-index:55;
  background:#fff; border-top:1px solid var(--rule);
  box-shadow:0 -6px 24px rgba(16,18,22,.07);
  transform:translateY(105%);
  transition:transform .28s ease;
}
.sticky[data-show="true"]{ transform:none; }
.sticky__row{
  max-width:calc(var(--wide) + var(--gut)*2);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:.7rem;
}
.sticky p{
  margin:0; font-family:var(--sans); font-size:13px; color:var(--muted);
  line-height:1.4;
}
.sticky p b{ color:var(--ink); font-weight:700; }
.sticky i{ color:var(--rule); font-style:normal; margin:0 .3em; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  border-top:1px solid var(--rule);
  background:var(--wash);
  padding:2.6rem 0 6rem;
  font-family:var(--sans);
}
.foot .wrap{ max-width:calc(var(--wide) + var(--gut)*2); }
.foot__logo{
  font-size:16px; font-weight:800; letter-spacing:-.025em; margin:0 0 1rem;
}
.foot__logo span{
  font-weight:500; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-left:.4em;
}
.foot__disc{
  font-size:12.5px; line-height:1.7; color:var(--muted);
  max-width:78ch; margin:0 0 1.4rem;
}
.foot__disc b{ color:var(--ink-2); }
.foot__links{
  list-style:none; display:flex; flex-wrap:wrap; gap:1.4rem;
  margin:0 0 1.2rem; padding:0;
}
.foot__links a{
  font-size:12.5px; color:var(--ink-2); text-decoration:none;
}
.foot__links a:hover{ color:var(--accent); text-decoration:underline; }
.foot__c{ font-size:12px; color:var(--faint); margin:0; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .steps{ grid-template-columns:1fr; }
  .related ul{ grid-template-columns:1fr 1fr; }
  .related ul li:last-child{ display:none; }
  .offer__grid{ grid-template-columns:1fr; }
  .offer__shot{ max-width:260px; }
}

@media (max-width: 760px){
  body{ font-size:18px; }
  :root{ --gut:18px; }

  .hamburger{ display:flex; }
  .logo{ margin-inline:auto 0; }
  .logo span{ display:none; }
  .sections{
    position:absolute; top:58px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--rule);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .sections[data-open="true"]{ max-height:340px; }
  .sections ul{ flex-direction:column; gap:0; padding:0 var(--gut) .6rem; }
  .sections li{ border-top:1px solid var(--rule-2); }
  .sections a{ display:block; padding:.85rem 0; font-size:15px; border:0; }
  .disclosure-pill{ font-size:9.5px; padding:.3rem .45rem; letter-spacing:.08em; }

  .byline{ flex-wrap:wrap; }
  .byline__time{ margin-left:0; width:100%; text-align:left; padding-top:.5rem; }

  .lead{ padding-inline:0; }
  .lead figcaption{ padding-inline:var(--gut); }

  .wide-fig{ padding-inline:0; }
  .wide-fig figcaption{ padding-inline:var(--gut); }
  .wide-fig.diagram{ padding-inline:var(--gut); }

  /* stacked table */
  .compare thead{ display:none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td{ display:block; }
  .compare caption{ display:block; width:100%; }
  .compare tr{
    border:1px solid var(--rule); margin-bottom:.85rem; padding:.3rem .9rem .7rem;
  }
  .compare tbody th{
    width:auto; border:0; padding:.7rem 0 .4rem;
    font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  }
  .compare td{
    border:0; padding:.3rem 0; font-size:14.5px;
  }
  .compare td::before{
    content:attr(data-label);
    display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink); margin-bottom:.1rem;
  }
  .compare .us{ background:transparent; }
  .compare .us::before{ color:var(--accent); }

  .tier{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .tier__r{ text-align:left; }

  .related ul{ grid-template-columns:1fr; gap:1.4rem; }
  .related ul li:last-child{ display:block; }

  .sticky__row{ gap:.7rem; }
  .sticky p{ font-size:11.5px; }
}

@media (max-width: 430px){
  .sticky p i{ display:none; }
  .sticky p{ font-size:0; }
  .sticky p b{ font-size:12.5px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

@media print{
  .masthead,.sticky,.share,.progress,.related,.disclosure-pill{ display:none !important; }
  body{ font-size:11pt; }
}