/* ==========================================================================
   VapoCept — vapoocepthealth.com

   Direction: the ingredient photographs are the only colour on the page.
   All chrome is the indigo family plus paper white, so the orange marigold,
   the turmeric and the greens carry the design.

   Type: Newsreader (display, lede) + Figtree (body, UI).
   Layout: left-aligned, asymmetric hero, zig-zag ingredient rows, hairlines
   in place of boxes.
   ========================================================================== */

:root{
  --ink:#210d56;          /* the brief's indigo — headings, dark fields */
  --ink-deep:#160735;     /* deeper, for the footer and closing band */
  --violet:#4b2fa8;       /* mid-tone of the same family — links, buttons */
  --violet-dk:#3a2286;
  --body:#403a56;
  --mute:#6b6484;
  --rule:#ded7f0;
  --rule-soft:#ebe6f8;
  --wash:#f2eefb;         /* pale lilac */
  --wash-2:#e8e2f6;
  --paper:#fbfaff;        /* barely-tinted white, calmer than pure #fff */
  --white:#ffffff;
  --green:#1d6b47;

  --page:1140px;
  --text:680px;
  --r:6px;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:92px;
}

body{
  margin:0;
  font-family:Figtree,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:18px;
  line-height:1.7;
  color:var(--body);
  background:var(--paper);
  overflow-x:hidden;
  font-feature-settings:"kern" 1;
}

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

/* ------------------------------------------------------------------ type */
h1,h2,h3{
  font-family:Newsreader,Georgia,'Times New Roman',serif;
  color:var(--ink);
  font-weight:400;
  margin:0 0 .46em;
  letter-spacing:-.012em;
}
h1{font-size:clamp(36px,5.4vw,58px);line-height:1.06}
h2{font-size:clamp(27px,3.5vw,36px);line-height:1.16;margin-top:0}
h3{font-size:clamp(20px,2.2vw,24px);line-height:1.25}
h4{
  font-family:Figtree,sans-serif;font-size:16px;font-weight:600;
  color:var(--ink);margin:0 0 .6em;letter-spacing:0;
}

p{margin:0 0 1.15em;max-width:68ch}
p:last-child{margin-bottom:0}

a{color:var(--violet);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--violet);outline-offset:3px;border-radius:3px;
}

strong{color:var(--ink);font-weight:600}
em{font-style:italic}
hr{border:0;border-top:1px solid var(--rule);margin:46px 0}

.lede{
  font-family:Newsreader,Georgia,serif;
  font-size:clamp(20px,2.3vw,23px);line-height:1.52;color:var(--ink);
  font-weight:400;max-width:60ch;
}
.small{font-size:15.5px;color:var(--mute);max-width:72ch}
.center{text-align:center}

/* The old eyebrow label is gone. Where a section genuinely needs a kicker it
   is a sentence-case serif line, not a tracked-out all-caps tag. */
.eyebrow{
  font-family:Newsreader,Georgia,serif;font-style:italic;
  font-size:17px;color:var(--mute);margin:0 0 10px;letter-spacing:0;
  text-transform:none;
}

/* ---------------------------------------------------------------- layout */
/* The reading column is left-aligned inside the page width, so body copy starts
   on the same vertical as the hero headline rather than floating centre-page. */
.wrap{width:100%;max-width:var(--page);margin:0 auto;padding:0 24px}
.wrap>*{max-width:var(--text)}
.wrap>.badges{max-width:none}
.wrap-wide{width:100%;max-width:var(--page);margin:0 auto;padding:0 24px}

section{padding:68px 0}
section.tight{padding:44px 0}
.band{background:var(--wash)}
.band-2{background:var(--wash-2)}
.rule-top{border-top:1px solid var(--rule)}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:900;background:var(--paper)}

/* The promo line is a welcome, not a fixture: it shows at the top of the page
   and rolls away as soon as you start reading, giving the sticky nav the whole
   of a phone's limited height. */
.promo-bar{
  background:var(--ink);color:#cbbff0;
  font-size:13.5px;line-height:1.45;padding:9px 0;
  max-height:80px;overflow:hidden;
  transition:max-height .28s ease,padding .28s ease,opacity .2s ease;
}
.site-header.scrolled .promo-bar{max-height:0;padding-top:0;padding-bottom:0;opacity:0}
.promo-items{text-align:center;padding:0 20px}
.promo-sep{display:none}

.navbar{background:var(--paper);border-bottom:1px solid var(--rule)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px}
.nav-logo{display:flex;align-items:baseline;gap:7px;text-decoration:none}
.nav-logo:hover{text-decoration:none}
.logo-img{display:none}
.logo-text{
  font-family:Newsreader,Georgia,serif;font-size:25px;font-weight:500;
  color:var(--ink);letter-spacing:-.015em;
}

.nav-links{display:flex;align-items:center;gap:2px}
.nav-link{
  font-size:15.5px;font-weight:450;color:var(--body);
  padding:9px 12px;white-space:nowrap;
}
.nav-link:hover{color:var(--ink);text-decoration:none}

.hamburger{
  display:none;background:none;border:0;cursor:pointer;
  width:46px;height:46px;padding:11px;flex-direction:column;justify-content:center;gap:5px;
}
.hamburger span{display:block;height:1.5px;background:var(--ink);transition:.24s}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-block;font-family:Figtree,sans-serif;font-weight:600;
  font-size:16.5px;line-height:1.2;text-align:center;
  padding:16px 30px;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;transition:background .16s,border-color .16s,color .16s;
  text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn-solid{background:var(--violet);color:#fff}
.btn-solid:hover{background:var(--violet-dk);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--wash)}
.btn-nav{padding:11px 20px;font-size:15px;background:var(--violet);color:#fff}
.btn-nav:hover{background:var(--violet-dk);color:#fff}
.btn-lg{font-size:17.5px;padding:18px 38px}

/* ------------------------------------------------------------------ hero */
.hero{padding:62px 0 74px;border-bottom:1px solid var(--rule)}
.hero-grid{
  display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(36px,5vw,72px);align-items:center;
}
.hero h1{margin-bottom:22px}
.hero-intro{font-size:19px;color:var(--body);max-width:46ch;margin-bottom:26px}

.checks{list-style:none;margin:0 0 30px;padding:0;max-width:46ch}
.checks li{position:relative;padding:0 0 0 26px;margin-bottom:9px;font-size:16.5px}
.checks li::before{
  content:"";position:absolute;left:1px;top:.68em;
  width:8px;height:4px;border-left:1.5px solid var(--violet);
  border-bottom:1.5px solid var(--violet);transform:rotate(-45deg);
}

.hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-note{font-size:15px;color:var(--mute);max-width:24ch;margin:0}

.hero-shot{margin:0}
.hero-bottle{width:100%;max-width:470px;margin:0 auto}

/* ------------------------------------------- what it is, with the bottle */
.about-grid{
  display:grid;grid-template-columns:1.2fr .8fr;
  gap:clamp(32px,5vw,64px);align-items:center;
}
.about-shot{margin:0;text-align:center}
.about-shot img{width:100%;max-width:340px;margin:0 auto}
.about-cap{
  font-family:Newsreader,Georgia,serif;font-style:italic;
  font-size:16px;color:var(--mute);margin:14px 0 0;max-width:none;
}

/* ------------------------------------------------- ingredients (zig-zag) */
.spine{list-style:none;margin:0;padding:0}
.spine>li{
  display:grid;grid-template-columns:148px 1fr;grid-template-rows:auto auto;
  column-gap:clamp(28px,4vw,52px);align-items:start;
  padding:40px 0;border-top:1px solid var(--rule);
}
.spine>li:last-child{border-bottom:1px solid var(--rule)}

/* Images alternate sides; copy stays left-aligned — ragged-left body text is
   hard work for the reader this site is written for. */
.spine>li>.ing-shot{grid-column:1;grid-row:1/3;align-self:center}
.spine>li>.ing-head{grid-column:2;grid-row:1}
.spine>li>.ing-body{grid-column:2;grid-row:2}
.spine>li:nth-child(even){grid-template-columns:1fr 148px}
.spine>li:nth-child(even)>.ing-shot{grid-column:2}
.spine>li:nth-child(even)>.ing-head,
.spine>li:nth-child(even)>.ing-body{grid-column:1}

.ing-shot{
  width:148px;height:148px;border-radius:50%;
  background:radial-gradient(circle at 50% 46%, var(--wash) 0%, var(--wash-2) 100%);
  display:flex;align-items:center;justify-content:center;
}
.ing-shot img{width:88%}

.ing-head h3{margin-bottom:2px}
.ing-head h3 a{color:var(--ink)}
.ing-head h3 a:hover{color:var(--violet);text-decoration:none}
.ing-part{
  font-family:Newsreader,Georgia,serif;font-style:italic;
  font-size:17px;color:var(--mute);margin:0 0 12px;
}
.ing-body p{font-size:16.5px;max-width:58ch;margin-bottom:12px}
.ing-more{font-size:15.5px;font-weight:600}

/* ----------------------------------------------------------- plain lists */
.arrows{list-style:none;margin:0 0 1.15em;padding:0;max-width:68ch}
.arrows li{position:relative;padding:0 0 0 22px;margin-bottom:14px;font-size:17px}
.arrows li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:7px;height:1.5px;background:var(--violet);
}

/* -------------------------------------------------------------- benefits */
.benefit{padding:22px 0;border-top:1px solid var(--rule-soft)}
.benefit:first-child{border-top:0}
.benefit-ico{display:none}
.benefit h3{font-size:21px;margin-bottom:4px}
.benefit p{font-size:16.5px;margin-bottom:0}

/* ------------------------------------------------------ supplement panel */
.panel{
  border:1px solid var(--ink);background:#fff;margin:30px 0;
  font-size:16px;overflow:hidden;
}
.panel-head{background:var(--ink);color:#fff;padding:16px 22px}
.panel-head h3{color:#fff;margin:0;font-size:21px}
.panel-head p{margin:3px 0 0;font-size:14px;color:#c3b5ec;max-width:none}
.panel table{width:100%;border-collapse:collapse}
.panel th,.panel td{padding:13px 22px;text-align:left;border-bottom:1px solid var(--rule-soft)}
.panel th{
  font-size:13.5px;font-weight:600;color:var(--mute);
  background:var(--wash);letter-spacing:0;
}
.panel td:last-child,.panel th:last-child{text-align:right;white-space:nowrap;color:var(--mute)}
.panel tr:last-child td{border-bottom:0}
.panel-foot{
  padding:15px 22px;background:var(--wash);font-size:14.5px;
  color:var(--mute);border-top:1px solid var(--rule);
}

/* ------------------------------- cart: mirrors the official checkout page */
.step-head{
  display:inline-flex;align-items:baseline;gap:10px;
  font-family:Newsreader,Georgia,serif;font-size:18px;font-style:italic;
  color:var(--mute);margin:0 0 10px;
}
.step-head b{font-style:normal;font-weight:500;color:var(--violet)}
.step-head span{font-size:18px}

.cart{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;align-items:stretch;margin-top:44px;
  border:1px solid var(--rule);background:#fff;
}
.pack{
  position:relative;display:flex;flex-direction:column;
  border-left:1px solid var(--rule);background:#fff;
}
.pack:first-child{border-left:0}

.pack-flag{
  font-size:14px;font-weight:600;text-align:center;letter-spacing:0;
  padding:13px 10px;color:var(--mute);border-bottom:1px solid var(--rule-soft);
}
.pack-body{padding:26px 24px 30px;text-align:center;display:flex;flex-direction:column;flex:1}
.pack h3{
  font-family:Newsreader,Georgia,serif;font-size:27px;font-weight:400;
  color:var(--ink);margin:0 0 2px;letter-spacing:-.01em;
}
.pack-supply{font-size:15px;color:var(--mute);margin:0 0 20px}
.pack-shot{margin:0 auto 20px;min-height:190px;display:flex;align-items:flex-end;justify-content:center}
.pack-shot img{width:100%;max-width:215px}

.pack-fig{display:flex;align-items:flex-start;justify-content:center;gap:3px;margin-bottom:2px}
.pack-fig .cur{font-family:Newsreader,Georgia,serif;font-size:25px;color:var(--ink);margin-top:9px}
.pack-fig .num{font-family:Newsreader,Georgia,serif;font-size:60px;color:var(--ink);line-height:.95;letter-spacing:-.02em}
.pack-fig .per{text-align:left;font-size:13.5px;line-height:1.2;color:var(--mute);margin-top:13px}

.pack-save{
  align-self:center;font-size:15.5px;font-weight:600;color:var(--green);
  margin:8px 0 18px;
}
.pack-lines{list-style:none;margin:0 0 22px;padding:0;font-size:15.5px;color:var(--body)}
.pack-lines li{padding:7px 0;border-top:1px solid var(--rule-soft)}
.pack-lines li:first-child{border-top:0}
.pack-tot{color:var(--ink);font-weight:600}
.pack-tot s{color:var(--mute);font-weight:400;margin-right:8px}
.pack-ship.free{color:var(--green)}
.pack-ship.paid{color:var(--mute)}
.pack .btn{margin-top:auto}

.pack.best{background:var(--wash);box-shadow:inset 0 3px 0 var(--ink)}
.pack.best .pack-flag{color:var(--ink);font-weight:600}
.pack.best .pack-lines li{border-color:var(--rule)}

.pay-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:16px}
.pay-row span{font-size:12.5px;color:var(--mute);letter-spacing:.02em}
.price-note{font-size:14.5px;color:var(--mute);margin-top:26px;max-width:62ch}

/* --------------------------------------------------------------- reviews */
.review{padding:30px 0;border-top:1px solid var(--rule)}
.review:first-child{border-top:0}
.review-top{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.review-top img{width:66px;height:66px;border-radius:50%;object-fit:cover;flex:0 0 66px}
.review-name{font-weight:600;color:var(--ink);font-size:17px;line-height:1.3}
.review-meta{font-size:14.5px;color:var(--mute)}
.review-stars{color:var(--ink);font-size:13px;letter-spacing:2px;margin-bottom:8px}
.review h3{font-family:Newsreader,Georgia,serif;font-size:22px;margin-bottom:8px}
.review p{font-size:16.5px;margin-bottom:0}
.verified{display:inline-block;margin-top:14px;font-size:14px;color:var(--green)}

/* ---------------------------------------------------------------- badges */
.badges{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;margin:0}
.badges figure{margin:0;text-align:center}
.badges img{max-width:92px;margin:0 auto 10px}
.badges figcaption{font-size:13.5px;color:var(--mute);line-height:1.4}

/* ------------------------------------------------------------- guarantee */
.guarantee{
  display:grid;grid-template-columns:200px 1fr;
  gap:clamp(28px,4vw,56px);align-items:center;max-width:880px;
}
.guarantee img{width:200px}
.guarantee h2{margin-top:0}

/* ------------------------------------------------------------------- faq */
.faq{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{
  width:100%;background:none;border:0;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:20px 0;text-align:left;min-height:50px;
  font-family:Newsreader,Georgia,serif;font-size:21px;font-weight:400;
  color:var(--ink);line-height:1.32;
}
.faq-q::after{
  content:"";flex:0 0 13px;width:13px;height:13px;margin-top:11px;
  border-right:1.5px solid var(--violet);border-bottom:1.5px solid var(--violet);
  transform:rotate(45deg);transition:transform .2s;
}
.faq-item.open .faq-q::after{transform:rotate(225deg);margin-top:15px}
.faq-a{display:none;padding:0 0 24px}
.faq-a p{font-size:17px;max-width:68ch}
.faq-item.open .faq-a{display:block}

/* ---------------------------------------------------------------- reveal */
.reveal{margin:30px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.reveal-btn{
  width:100%;background:none;border:0;cursor:pointer;
  padding:18px 0;min-height:50px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:Figtree,sans-serif;font-size:16px;font-weight:600;color:var(--ink);
  text-align:left;
}
.reveal-btn::after{
  content:"";flex:0 0 11px;width:11px;height:11px;
  border-right:1.5px solid var(--violet);border-bottom:1.5px solid var(--violet);
  transform:rotate(45deg);
}
.reveal.open .reveal-btn::after{transform:rotate(225deg)}
.reveal-panel{display:none;padding:4px 0 24px}
.reveal.open .reveal-panel{display:block}

/* ------------------------------------------------------------ references */
.refs{list-style:none;margin:0;padding:0;counter-reset:ref}
.refs li{
  counter-increment:ref;position:relative;padding:0 0 0 30px;margin-bottom:16px;
  font-size:15.5px;line-height:1.62;max-width:72ch;
}
.refs li::before{content:counter(ref) ".";position:absolute;left:0;top:0;color:var(--mute)}

/* -------------------------------------------------------- closing banner */
.cta{background:var(--ink);color:#c9bcee;padding:76px 0}
.cta-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,68px);align-items:center}
.cta h2{color:#fff;margin-bottom:14px}
.cta p{font-size:18px;margin-bottom:26px;max-width:46ch}
.cta a:not(.btn){color:#cdbdf7}
.cta-shot{margin:0}
.cta-bottle{width:100%;max-width:400px}
.cta-small{font-size:14.5px;color:#9b8cc9;margin:18px 0 0;max-width:46ch}

/* ------------------------------------------------------------------ blog */
.post-list{display:grid;gap:0}
.post-card{padding:30px 0;border-top:1px solid var(--rule)}
.post-card:last-child{border-bottom:1px solid var(--rule)}
.post-card h3{font-size:24px;margin-bottom:8px}
.post-card h3 a{color:var(--ink)}
.post-card h3 a:hover{color:var(--violet);text-decoration:none}
.post-meta{
  font-family:Newsreader,Georgia,serif;font-style:italic;
  font-size:16px;color:var(--mute);margin-bottom:8px;
}
.post-card p{font-size:16.5px;margin-bottom:12px}
.post-tag{font-size:14px;color:var(--mute)}

.crumbs{font-size:14.5px;color:var(--mute);padding:20px 0 0}
.crumbs a{color:var(--mute)}
.crumbs span{opacity:.45;margin:0 7px}

/* --------------------------------------------------------------- article */
.article h2{margin-top:46px}
.article h3{margin-top:32px}
.article ul,.article ol{padding-left:22px;margin:0 0 1.15em;max-width:68ch}
.article li{margin-bottom:10px}
blockquote{
  margin:32px 0;padding:0 0 0 26px;border-left:2px solid var(--ink);
  font-family:Newsreader,Georgia,serif;font-size:21px;line-height:1.5;color:var(--ink);
}
blockquote p{margin-bottom:0;max-width:56ch}
.article-foot{margin-top:52px;padding-top:30px;border-top:1px solid var(--rule)}

.page-shot{
  width:210px;height:210px;margin:0 0 30px;border-radius:50%;
  background:radial-gradient(circle at 50% 46%, var(--wash) 0%, var(--wash-2) 100%);
  display:flex;align-items:center;justify-content:center;
}
.page-shot img{width:86%}

.inline-cta{
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);
  padding:28px 0;margin:44px 0;
}
.inline-cta h3{font-size:23px;margin-bottom:8px}
.inline-cta p{font-size:16.5px;margin-bottom:20px;max-width:58ch}

.next-up{margin-top:0}
.next-up h4{margin-bottom:14px}
.next-up ul{list-style:none;margin:0;padding:0}
.next-up li{margin-bottom:0}
.next-up li a{
  display:block;padding:13px 0;font-size:16.5px;
  border-top:1px solid var(--rule-soft);
}
.next-up li:first-child a{border-top:0}

/* ---------------------------------------------------------------- tables */
.tbl-wrap{overflow-x:auto;margin:0 0 1.3em;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:16px;min-width:460px}
table.data th,table.data td{
  padding:13px 16px 13px 0;text-align:left;
  border-bottom:1px solid var(--rule-soft);vertical-align:top;
}
table.data th{
  font-family:Figtree,sans-serif;font-size:14px;font-weight:600;
  color:var(--mute);border-bottom:1px solid var(--rule);
}
table.data tr:last-child td{border-bottom:0}

/* ----------------------------------------------------------------- notes */
.note{
  background:var(--wash);padding:24px 26px;margin:32px 0;font-size:16.5px;
  border-left:2px solid var(--ink);
}
.note p{max-width:62ch}
.note p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--ink-deep);color:#a99bd3;padding:62px 0 0;font-size:15.5px}
.foot .logo-text{color:#fff}
.foot-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;
  max-width:var(--page);margin:0 auto;padding:0 24px;
}
.foot-brand p{font-size:15px;margin-top:14px;color:#8e7fbd;max-width:36ch}
.foot h4{color:#fff;margin-bottom:14px;font-size:15px;font-weight:600;letter-spacing:0}
.foot a{display:block;color:#a99bd3;padding:5px 0;font-size:15px}
.foot a:hover{color:#fff;text-decoration:none}
.foot-legal{
  max-width:var(--page);margin:44px auto 0;padding:26px 24px 0;
  border-top:1px solid rgba(255,255,255,.1);
}
.foot-legal p{font-size:13px;line-height:1.7;color:#80729f;margin:0;max-width:none}
.foot-legal strong{color:#a99bd3;font-weight:600}
.foot strong{color:#fff}
.foot-copy{margin-top:26px;padding:18px 0;background:rgba(0,0,0,.22);font-size:13.5px;color:#80729f}
.foot-copy .wrap{max-width:var(--page)}

/* ------------------------------------------------------------------ misc */
.scroll-top{
  position:fixed;right:20px;bottom:20px;z-index:800;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);cursor:pointer;
  background:#fff;color:var(--ink);font-size:18px;line-height:1;
  box-shadow:0 3px 14px rgba(33,13,86,.12);
  opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;
}
.scroll-top.show{opacity:1;visibility:visible}

.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;
}

.cards{display:grid;gap:0}
.cards-2{grid-template-columns:repeat(2,1fr);gap:30px}
.cards-3{grid-template-columns:repeat(3,1fr);gap:30px}
.card{padding:26px 0;border-top:1px solid var(--rule)}
.card h3{font-size:21px;margin-bottom:8px}
.card p{font-size:16.5px;margin-bottom:0}
.card-num{display:none}

.stars-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:0}
.stars-line .hero-stars{color:var(--ink);font-size:14px;letter-spacing:2px}
.stars-line span{font-size:15px;color:var(--mute)}

/* ================================================================= 1000px */
@media(max-width:1000px){
  .cart{grid-template-columns:1fr 1fr;border-bottom:0}
  .pack:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--rule)}
  .pack-shot{min-height:160px}
  .pack-shot img{max-width:190px}
  .badges{grid-template-columns:repeat(3,1fr);gap:26px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-brand{grid-column:1/-1}
}

/* ================================================================== 860px */
@media(max-width:860px){
  .hamburger{display:flex}
  .nav-links{
    position:fixed;top:0;right:0;bottom:0;width:min(310px,86vw);
    transform:translateX(105%);background:var(--paper);
    box-shadow:-10px 0 34px rgba(33,13,86,.16);
    flex-direction:column;align-items:stretch;gap:0;
    padding:78px 20px 28px;overflow-y:auto;transition:transform .26s ease;z-index:950;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-link{
    padding:14px 8px;font-size:17px;border-bottom:1px solid var(--rule-soft);
    min-height:50px;display:flex;align-items:center;
  }
  .nav-links .btn-nav{margin-top:18px;padding:15px 20px;font-size:16.5px;border-bottom:0}
  .nav-backdrop{
    position:fixed;inset:0;background:rgba(22,7,53,.4);
    z-index:940;opacity:0;visibility:hidden;transition:.26s;
  }
  .nav-backdrop.show{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}

  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-shot{order:-1;max-width:330px;margin:0 auto}
  .hero{padding:34px 0 52px}
  .hero h1{max-width:16ch}

  .cta-grid{grid-template-columns:1fr;gap:32px}
  .cta-shot{order:-1;max-width:300px;margin:0 auto}
  .cta{padding:54px 0}

  .about-grid{grid-template-columns:1fr;gap:28px}
  .about-shot{order:-1;max-width:260px;margin:0 auto}

  /* badge centred over the copy, which stays left-aligned to stay readable */
  .guarantee{grid-template-columns:1fr;gap:26px;justify-items:stretch;text-align:left}
  .guarantee img{margin-left:auto;margin-right:auto}
}

/* ----------------------------------------- touch-size tap targets */
@media(max-width:860px){
  .panel td a,table.data td a,.ing-more,.post-card .ing-more{
    display:inline-block;padding:12px 0;min-height:44px;
  }
  .review p a,.article p a,.small a{padding:0}
  .ing-text h3 a,.post-card h3 a{display:inline-block;padding:9px 0}
  .ing-text h3,.post-card h3{margin-bottom:0}
}

/* ================================================================== 640px */
@media(max-width:640px){
  body{font-size:17.5px}
  section{padding:48px 0}
  section.tight{padding:34px 0}
  .wrap,.wrap-wide{padding:0 20px}

  .cards-2,.cards-3{grid-template-columns:1fr;gap:0}

  .cart{grid-template-columns:1fr;border-left:0;border-right:0}
  .pack{border-left:0;border-top:1px solid var(--rule)}
  .pack:first-child{border-top:0}
  .pack:nth-child(3){grid-column:auto}
  .pack-shot{min-height:0}
  .pack-shot img{max-width:235px}
  .pack.best{box-shadow:inset 3px 0 0 var(--ink)}

  .badges{grid-template-columns:repeat(3,1fr);gap:18px}
  .badges img{max-width:76px}

  /* Phone: a larger photo sits beside the ingredient name, and the body copy
     runs full width underneath, so each ingredient reads as one screenful. */
  .spine>li,
  .spine>li:nth-child(even){
    grid-template-columns:138px 1fr;column-gap:20px;padding:28px 0;
  }
  .spine>li>.ing-shot,
  .spine>li:nth-child(even)>.ing-shot{grid-column:1;grid-row:1;align-self:center}
  .spine>li>.ing-head,
  .spine>li:nth-child(even)>.ing-head{grid-column:2;grid-row:1;align-self:center}
  .spine>li>.ing-body,
  .spine>li:nth-child(even)>.ing-body{grid-column:1/-1;grid-row:2;margin-top:16px}
  .ing-shot{width:138px;height:138px}
  .ing-head h3{font-size:22px}
  .ing-part{font-size:16px;margin-bottom:0}
  .ing-body p{margin-bottom:10px}
  .ing-text h3{font-size:21px}
  .ing-part{font-size:16px;margin-bottom:9px}

  .guarantee img{width:150px}
  .page-shot{width:170px;height:170px;margin-bottom:24px}

  .btn{width:100%;max-width:none;display:block}
  .btn-nav{width:auto}
  .hero-cta{flex-direction:column;align-items:stretch;gap:14px}
  .hero-cta .btn{width:100%}
  .hero-note{max-width:none}

  .panel th,.panel td{padding:11px 16px;font-size:15px}
  .article blockquote{padding-left:20px;font-size:19px}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .foot-brand{grid-column:auto}
}

/* ================================================================== 400px */
@media(max-width:400px){
  .ing-shot{width:92px;height:92px}
  .badges img{max-width:66px}
  .pack-fig .num{font-size:52px}
}

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