/* vapoceptshealth.com — site 13
   Dark blue (#0b2a4a) with an amber call-to-action.
   Every colour pair in here passed v13_palette.py at WCAG AA before use. */

:root{
  --navy:#0b2a4a; --navy-dp:#061a30; --navy-mid:#12406d; --navy-soft:#5c7fa6;
  --amber:#ffa41b; --amber-dp:#e08900;
  --rust:#9c4a06;              /* the accent that works on light backgrounds */
  --sky:#1a63ab;               /* links */
  --ink:#0f1e2e; --body:#3b4a5c; --mute:#5f6e82;
  --white:#ffffff; --sky-lt:#eff4fa; --sky-lt2:#dde9f6;
  --rule:#c9dcef; --rule-soft:#e2ecf7;
  --green:#0f7347;
  --navy-text:#d5e2f0; --navy-mute:#9fb4cc;
  --page:1200px; --text:740px; --r:14px;
  --shadow:0 18px 44px rgba(11,42,74,.16);
  --shadow-sm:0 2px 10px rgba(11,42,74,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--body);
  font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:18px;line-height:1.68;
}
@supports (overflow-x:clip){body{overflow-x:clip}}
/* height:auto matters: without it the HTML height attribute is used as a
   literal CSS height and every image stretches vertically. */
img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  font-family:Sora,system-ui,sans-serif;color:var(--ink);
  line-height:1.15;letter-spacing:-.02em;margin:0 0 16px;font-weight:700;
}
h1{font-size:clamp(35px,5.3vw,58px)}
h2{font-size:clamp(28px,3.7vw,42px)}
h3{font-size:22px;letter-spacing:-.01em}
h4{font-size:18px}
p{margin:0 0 18px}
a{color:var(--sky);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--navy)}
strong,b{font-weight:600;color:var(--ink)}
ul,ol{margin:0 0 18px;padding-left:22px}
li{margin-bottom:9px}
s{color:var(--mute)}

:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ------------------------------------------------------------- structure */
.wrap{width:100%;max-width:var(--page);margin:0 auto;padding:0 24px}
.measure{width:100%;max-width:var(--text);margin-left:auto;margin-right:auto}
.measure-l{width:100%;max-width:var(--text);margin:0 auto 0 0}
.center{text-align:center}

section{padding:76px 0}
section.tight{padding:44px 0}
section.lt{background:var(--sky-lt)}
section.lt2{background:var(--sky-lt2)}

/* Dark bands. Both variants share one rule set on purpose: splitting them is
   how a lede or a <strong> ends up dark-on-dark in only one of the two. */
section.navy{background:var(--navy)}
section.deep{background:var(--navy-dp)}
section.navy,section.deep{color:var(--navy-text)}
section.navy h1,section.navy h2,section.navy h3,section.navy h4,
section.deep h1,section.deep h2,section.deep h3,section.deep h4{color:var(--white)}
section.navy .kicker,section.deep .kicker{color:var(--amber)}
section.navy strong,section.navy b,
section.deep strong,section.deep b{color:var(--white)}
section.navy p a,section.deep p a{color:var(--amber)}
section.navy .lede,section.deep .lede{color:#e3ecf6}
section.navy .small,section.deep .small{color:var(--navy-mute)}
section.navy li,section.deep li{color:var(--navy-text)}

.lede{font-size:21px;line-height:1.6;color:var(--ink);font-weight:400}
.small{font-size:15.5px;line-height:1.6;color:var(--mute)}

.kicker{
  font-family:Sora,sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rust);
  margin:0 0 12px;
}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:900;background:var(--white)}
.promo-bar{
  background:var(--navy-dp);color:var(--amber);
  font-size:13.5px;line-height:1.45;padding:10px 0;text-align:center;
  max-height:76px;overflow:hidden;
  transition:max-height .28s ease,padding .28s ease,opacity .2s ease;
}
.promo-bar strong{color:var(--white);font-weight:700}
.site-header.scrolled .promo-bar{max-height:0;padding-top:0;padding-bottom:0;opacity:0}
.navbar{background:var(--white);border-bottom:1px solid var(--rule)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.nav-logo{display:flex;align-items:baseline;gap:6px;text-decoration:none}
.logo-text{
  font-family:Sora,sans-serif;font-size:23px;font-weight:700;
  color:var(--navy);letter-spacing:-.025em;
}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-link{
  font-size:15.5px;color:var(--body);text-decoration:none;
  padding:10px 11px;border-radius:7px;font-weight:500;
}
.nav-link:hover{color:var(--navy);background:var(--sky-lt);text-decoration:none}
.nav-toggle{display:none;background:none;border:0;padding:9px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}

/* ------------------------------------------------------------------ hero */
.hero{background:var(--navy);color:var(--navy-text);position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 420px at 78% 18%,rgba(45,127,208,.22),transparent 70%);
}
.hero-inner{
  position:relative;z-index:1;
  max-width:var(--page);margin:0 auto;padding:62px 24px 70px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center;
}
.hero h1{color:var(--white);margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero-sub{font-size:20.5px;line-height:1.6;color:#e3ecf6;margin-bottom:26px}
.hero-points{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px}
.hero-points li{position:relative;padding-left:34px;font-size:17px;line-height:1.5}
.hero-points li::before{
  content:"";position:absolute;left:0;top:1px;width:22px;height:22px;
  border-radius:50%;background:var(--amber);
}
.hero-points li::after{
  content:"";position:absolute;left:7px;top:8px;width:7px;height:3.5px;
  border-left:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);
  transform:rotate(-45deg);
}
.hero-shot{text-align:center;position:relative}
.hero-shot img{width:100%;max-width:360px;margin:0 auto;filter:drop-shadow(0 26px 44px rgba(0,0,0,.4))}
.hero-tag{
  display:inline-block;margin-top:16px;background:var(--amber);color:var(--navy);
  font-family:Sora,sans-serif;font-size:14px;font-weight:700;
  padding:8px 20px;border-radius:999px;
}
.hero-cta-note{font-size:14.5px;color:var(--navy-mute);margin-top:14px}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-block;font-family:Sora,sans-serif;font-weight:700;
  font-size:17px;padding:16px 34px;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;transition:background .18s ease;
}
.btn:hover{text-decoration:none}
.btn-amber{background:var(--amber);color:var(--navy)}
.btn-amber:hover{background:var(--amber-dp);color:var(--navy)}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:var(--navy-dp);color:var(--white)}
.btn-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.btn-outline:hover{background:rgba(255,255,255,.12);color:var(--white)}
.btn-lg{font-size:19px;padding:19px 44px}
.btn-block{display:block;width:100%}
section.navy a.btn-amber,section.navy a.btn-amber:hover,
section.deep a.btn-amber,section.deep a.btn-amber:hover{color:var(--navy)}
section.navy a.btn-outline,section.navy a.btn-outline:hover{color:var(--white)}

/* --------------------------------------------- buyer marquee (moving bar) */
.buyers{background:var(--sky-lt2);padding:30px 0;overflow:hidden;position:relative}
.buyers-head{
  text-align:center;font-family:Sora,sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--rust);margin-bottom:22px;
}
.marquee{display:flex;overflow:hidden;--gap:18px;gap:var(--gap);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{
  display:flex;gap:var(--gap);flex:none;min-width:100%;
  animation:marquee 46s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.buyers-note{
  max-width:720px;margin:20px auto 0;padding:0 18px;text-align:center;
  font-size:13px;line-height:1.6;color:var(--body);
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--gap)))}}
@media(prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .marquee-track{animation:none}
}
.bcard{
  flex:none;width:270px;background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);
}
.bcard img{width:100%;aspect-ratio:1/1;object-fit:cover}
.bcard-body{padding:14px 16px 16px}
.bcard-name{font-family:Sora,sans-serif;font-weight:600;font-size:16px;color:var(--ink)}
.bcard-meta{font-size:13.5px;color:var(--mute);margin-bottom:7px}
.bcard-stars{color:var(--rust);font-size:14px;letter-spacing:1.5px;margin-bottom:6px}
.bcard p{font-size:14.5px;line-height:1.5;margin:0;color:var(--body)}

/* ------------------------------------------------------------ three-up moments */
.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px;counter-reset:m}
.moment{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r);
  padding:30px 28px;position:relative;box-shadow:var(--shadow-sm);
}
.moment::before{
  counter-increment:m;content:counter(m);
  position:absolute;top:-16px;left:28px;
  width:36px;height:36px;border-radius:10px;background:var(--navy);color:var(--amber);
  font-family:Sora,sans-serif;font-weight:700;font-size:16px;
  display:flex;align-items:center;justify-content:center;
}
.moment h3{font-size:19.5px;margin:10px 0 9px}
.moment p{font-size:16.5px;margin:0}

/* --------------------------------------------------------- two-column split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split.narrow-img{grid-template-columns:.8fr 1.2fr}
.split.flip-img{grid-template-columns:1.2fr .8fr}
.split-shot img{width:100%;border-radius:var(--r)}
.split-shot.product img{max-width:380px;margin:0 auto;border-radius:0}

/* ------------------------------------------------- big objection sections */
.obj-head{font-size:clamp(33px,5vw,54px);line-height:1.08;margin-bottom:18px}
.obj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.obj-card{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r);padding:26px 26px;
}
.obj-card h3{font-size:19px;margin-bottom:8px}
.obj-card p{font-size:16px;margin:0;color:var(--navy-text)}
.obj-card .num{
  display:inline-block;font-family:Sora,sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:10px;
}

/* refund stepper */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px}
.step{position:relative;padding:0 18px;text-align:center}
.step::before{
  content:"";position:absolute;top:21px;left:0;right:0;height:2px;
  background:rgba(255,255,255,.2);
}
.step:first-child::before{left:50%}
.step:last-child::before{right:50%}
.step-dot{
  position:relative;z-index:1;width:44px;height:44px;border-radius:50%;
  background:var(--amber);color:var(--navy);margin:0 auto 14px;
  font-family:Sora,sans-serif;font-weight:700;font-size:17px;
  display:flex;align-items:center;justify-content:center;
}
.step h4{color:var(--white);margin-bottom:6px;font-size:17px}
.step p{font-size:15.5px;margin:0;color:var(--navy-text)}

/* ------------------------------------------------------------- value list */
.vals{display:grid;grid-template-columns:repeat(2,1fr);gap:0 46px;margin-top:36px}
.val{padding:26px 0;border-top:1px solid var(--rule)}
.val:nth-child(1),.val:nth-child(2){border-top:0;padding-top:0}
.val h3{font-size:20px;margin-bottom:8px;display:flex;align-items:baseline;gap:11px}
.val h3 span{
  font-family:Sora,sans-serif;font-size:14px;font-weight:700;color:var(--rust);
  letter-spacing:.04em;flex:none;
}
.val p{font-size:16.5px;margin:0}

/* ------------------------------------------------------------- ingredients */
.ings{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
.ing{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.ing img{width:100%;aspect-ratio:16/10;object-fit:contain;
  background:var(--sky-lt);padding:14px}
.ing-body{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column}
.ing h3{font-size:19px;margin-bottom:4px}
.ing .part{font-size:14.5px;color:var(--rust);font-weight:600;margin:0 0 10px}
.ing p{font-size:16px;margin:0}
.ing .ev{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-soft);
  font-size:14.5px;color:var(--mute);
}

/* ----------------------------------------------------------- science band */
.sci-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:34px}
.sci-item{
  background:rgba(255,255,255,.06);border-left:3px solid var(--amber);
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px;
}
.sci-item h4{color:var(--amber);font-size:16px;margin-bottom:7px;
  font-family:Sora,sans-serif;letter-spacing:.02em}
.sci-item p{font-size:16px;margin:0;color:var(--navy-text)}

/* --------------------------------------------------------------- packages */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px;align-items:stretch}
.pack{
  background:var(--white);border:2px solid var(--rule);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;position:relative;
}
.pack.best{border-color:var(--amber);box-shadow:var(--shadow);transform:translateY(-6px)}
.pack-flag{
  background:var(--sky-lt2);color:var(--ink);
  font-family:Sora,sans-serif;font-size:13.5px;font-weight:700;
  padding:11px;text-align:center;letter-spacing:.03em;
}
.pack.best .pack-flag{background:var(--amber);color:var(--navy)}
.pack-body{padding:26px 22px 28px;text-align:center;display:flex;flex-direction:column;flex:1}
.pack-shot{margin:0 auto 14px;max-width:178px}
.pack h3{font-size:22px;margin-bottom:2px}
.pack-supply{font-size:15px;color:var(--mute);margin:0 0 14px}
.pack-fig{
  font-family:Sora,sans-serif;color:var(--navy);font-weight:700;
  display:flex;align-items:baseline;justify-content:center;gap:2px;margin-bottom:10px;
}
.pack-fig .cur{font-size:24px}
.pack-fig .num{font-size:54px;line-height:1;letter-spacing:-.035em}
.pack-fig .per{font-size:12.5px;color:var(--mute);text-align:left;line-height:1.15;margin-left:5px;font-weight:400}
.pack-save{
  display:inline-block;background:var(--navy);color:var(--amber);
  font-family:Sora,sans-serif;font-size:13.5px;font-weight:700;
  padding:6px 15px;border-radius:999px;margin-bottom:15px;
}
.pack-lines{list-style:none;margin:0 0 18px;padding:0;font-size:15.5px}
.pack-lines li{padding:9px 0;border-top:1px solid var(--rule-soft);margin:0}
.pack-lines li:first-child{border-top:0}
.pack-tot s{margin-right:7px}
.pack-ship.free{color:var(--green);font-weight:600}
.pack .btn{margin-top:auto}
.pay{margin-top:12px;font-size:11.5px;color:var(--mute);letter-spacing:.05em}
.price-note{font-size:14.5px;color:var(--mute);max-width:660px;margin:26px auto 0;text-align:center}
section.navy .price-note,section.deep .price-note{color:var(--navy-mute)}

/* the pack stays a light card inside a dark band */
.pack,section.navy .pack,section.deep .pack{color:var(--body)}
section.navy .pack h3,section.deep .pack h3{color:var(--ink)}
section.navy .pack strong,section.navy .pack b,
section.deep .pack strong,section.deep .pack b{color:var(--ink)}
section.navy .pack .pack-supply,section.navy .pack .pack-tot s,
section.navy .pack .pay,section.navy .pack .pack-fig .per,
section.deep .pack .pack-supply,section.deep .pack .pack-tot s,
section.deep .pack .pay,section.deep .pack .pack-fig .per{color:var(--mute)}
section.navy .pack .pack-ship.free,section.deep .pack .pack-ship.free{color:var(--green)}
section.navy .pack-flag,section.deep .pack-flag{background:var(--sky-lt2);color:var(--ink)}
section.navy .pack.best .pack-flag,section.deep .pack.best .pack-flag{background:var(--amber);color:var(--navy)}
/* `section.navy li` is (0,0,1,2) and beats `.pack-lines li` (0,0,1,1), so the
   reset has to be scoped at least as tightly or the rows go pale on white. */
section.navy .pack-lines li,section.deep .pack-lines li{color:var(--body)}
section.navy .pack-lines li strong,section.deep .pack-lines li strong{color:var(--ink)}

/* guarantee card under a cart */
.cart-guar{
  display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:center;
  background:var(--white);border:2px solid var(--amber);border-radius:var(--r);
  padding:26px 32px;margin:28px auto 0;max-width:880px;text-align:left;
}
.cart-guar img{width:120px;height:auto}
/* same trap: section.navy h3 is (0,0,1,2) and would turn this white on white */
section.navy .cart-guar h3,section.deep .cart-guar h3{color:var(--ink)}
section.navy .cart-guar p,section.deep .cart-guar p{color:var(--body)}
section.navy .cart-guar strong,section.deep .cart-guar strong{color:var(--ink)}
section.navy .cart-guar .cart-guar-foot,
section.deep .cart-guar .cart-guar-foot{color:var(--mute)}
.cart-guar h3{font-size:21px;margin-bottom:8px;color:var(--ink)}
.cart-guar p{font-size:16.5px;margin:0;color:var(--body)}
.cart-guar-foot{margin-top:10px;font-size:15px;color:var(--mute)}

/* ---------------------------------------------------------------- reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px}
.rev{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r);
  padding:26px 26px 28px;box-shadow:var(--shadow-sm);
}
.rev-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.rev-top img{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:none}
.rev-name{font-family:Sora,sans-serif;font-weight:600;color:var(--ink);font-size:16.5px}
.rev-meta{font-size:14px;color:var(--mute)}
.stars{color:var(--rust);font-size:15px;letter-spacing:1.5px;margin-bottom:9px}
.rev h3{font-size:18.5px;margin-bottom:8px}
.rev p{font-size:16px;margin-bottom:10px}
.verified{font-size:13.5px;color:var(--green);font-weight:600}

/* ----------------------------------------------------------------- badges */
.badges{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;margin-top:38px;text-align:center}
.badges img{width:78px;margin:0 auto 10px}
.badges span{font-size:13.5px;color:var(--mute);line-height:1.4;display:block}
section.navy .badges span,section.deep .badges span{color:var(--navy-mute)}

/* -------------------------------------------------------------------- FAQ */
.faq{margin-top:32px}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-of-type{border-top:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:21px 48px 21px 0;position:relative;
  font-family:Sora,sans-serif;font-size:19px;font-weight:600;
  color:var(--ink);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:12px;top:50%;width:12px;height:12px;
  border-right:2.5px solid var(--navy-soft);border-bottom:2.5px solid var(--navy-soft);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .faq-a{padding:0 0 24px;font-size:16.5px}
.faq .faq-a p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- notices */
.note{
  background:var(--sky-lt2);border-left:4px solid var(--navy);
  border-radius:0 var(--r) var(--r) 0;padding:22px 26px;font-size:16.5px;
}
section.navy .note,section.deep .note{
  background:rgba(255,255,255,.08);border-left-color:var(--amber);color:#e3ecf6;
}
.note p:last-child{margin-bottom:0}
.edu-note{
  background:var(--sky-lt);border:1px dashed var(--navy-soft);border-radius:var(--r);
  padding:22px 26px;font-size:16px;color:var(--body);margin:30px 0;
}

/* ------------------------------------------------------------------ table */
.tbl-wrap{overflow-x:auto;margin:28px 0}
table.data{width:100%;border-collapse:collapse;font-size:16px;min-width:480px}
table.data th,table.data td{padding:14px 15px;text-align:left;border-bottom:1px solid var(--rule)}
table.data th{background:var(--sky-lt2);color:var(--ink);font-weight:600;font-family:Sora,sans-serif}

/* ------------------------------------------------------- supplement panel */
.panel{border:2px solid var(--ink);border-radius:var(--r);background:#fff;margin:30px 0;font-size:16px;overflow:hidden}
.panel-head{background:var(--ink);color:#fff;padding:14px 18px;font-family:Sora,sans-serif;font-size:20px;font-weight:700}
.panel table{width:100%;border-collapse:collapse}
.panel th,.panel td{padding:11px 18px;text-align:left;border-top:1px solid var(--rule)}
.panel th{font-weight:600;color:var(--ink)}
.panel tr:first-child th,.panel tr:first-child td{border-top:0}
.panel-foot{padding:13px 18px;border-top:2px solid var(--ink);font-size:14.5px;color:var(--mute)}

/* ------------------------------------------------------- crumbs and cards */
.crumbs{font-size:14.5px;color:var(--mute);padding:20px 0 0}
.crumbs a{color:var(--mute);display:inline-block;padding:4px 2px}
.crumbs span{opacity:.45;margin:0 7px}

.next-up{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.next-up a{
  display:block;padding:22px 24px;background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r);text-decoration:none;color:var(--ink);
  font-family:Sora,sans-serif;font-weight:600;font-size:17px;line-height:1.35;
}
.next-up a:hover{border-color:var(--navy-soft);background:var(--sky-lt)}

.post-meta{font-size:15px;color:var(--mute);margin-bottom:26px}
.post-body h2{margin-top:42px}
.post-body ul.arrows{list-style:none;margin:0 0 20px;padding:0}
.post-body ul.arrows li{position:relative;padding-left:27px;margin-bottom:12px}
.post-body ul.arrows li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  background:var(--navy-soft);border-radius:2px;transform:rotate(45deg);
}
blockquote{
  margin:30px 0;padding:24px 28px;background:var(--sky-lt);
  border-left:4px solid var(--navy);border-radius:0 var(--r) var(--r) 0;
  font-size:19px;line-height:1.55;color:var(--ink);
}
blockquote p:last-child{margin-bottom:0}

.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:30px}
.pcard{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);padding:24px 26px}
.pcard h3{font-size:19px;margin-bottom:7px}
.pcard h3 a{display:block;padding:3px 0;text-decoration:none;color:var(--ink)}
.pcard h3 a:hover{color:var(--navy);text-decoration:underline}
.pcard p{font-size:16px;margin-bottom:12px}

/* ----------------------------------------------------------------- footer */
.foot{background:var(--navy-dp);color:var(--navy-mute);padding:56px 0 28px;font-size:15.5px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.05fr 1fr;gap:28px;
  max-width:var(--page);margin:0 auto;padding:0 24px}
.foot .logo-text{color:var(--white)}
.foot-brand p{margin-top:14px;line-height:1.6;color:var(--navy-mute);font-size:15px}
.foot-blog-btn{
  display:inline-block;margin-top:18px;background:var(--amber);color:var(--navy);
  font-family:Sora,sans-serif;font-weight:700;font-size:15.5px;
  padding:12px 24px;border-radius:999px;text-decoration:none;
}
/* `.foot a` is (0,0,1,1) and would flatten this back to a plain block link,
   so the button properties have to be restated at matching specificity. */
.foot a.foot-blog-btn,.foot a.foot-blog-btn:hover{
  display:inline-block;width:auto;padding:12px 26px;
  color:var(--navy);text-decoration:none;
}
.foot a.foot-blog-btn:hover{background:var(--amber-dp)}
.foot h4{color:var(--amber);font-size:16px;margin-bottom:12px;font-family:Sora,sans-serif}
.foot a{display:block;color:var(--navy-mute);text-decoration:none;padding:5px 0;font-size:15px}
.foot a:hover{color:var(--white);text-decoration:underline}
.foot-legal{max-width:var(--page);margin:34px auto 0;padding:22px 24px 0;
  border-top:1px solid rgba(255,255,255,.15);font-size:13.5px;line-height:1.65;color:var(--navy-mute)}
.foot-legal strong{color:#c3d3e6}

.scroll-top{
  position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;
  background:var(--navy);color:var(--amber);border:0;cursor:pointer;font-size:21px;
  opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:800;
}
.scroll-top.on{opacity:1;pointer-events:auto}

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

/* ================================================================ responsive */
@media(max-width:1000px){
  .hero-inner{grid-template-columns:1fr;gap:32px;padding:46px 24px 54px;text-align:left}
  .hero-shot{order:-1}
  .hero-shot img{max-width:250px}
  .split,.split.narrow-img,.split.flip-img{grid-template-columns:1fr;gap:30px}
  .split-shot{order:-1}
  .split-shot.product img{max-width:250px}
  .moments{grid-template-columns:1fr;gap:30px}
  .obj-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;gap:30px 0}
  .step::before{display:none}
  .vals{grid-template-columns:1fr;gap:0}
  .val:nth-child(2){border-top:1px solid var(--rule);padding-top:26px}
  .ings{grid-template-columns:1fr 1fr}
  .sci-grid{grid-template-columns:1fr}
  .revs{grid-template-columns:1fr}
  .packs{grid-template-columns:1fr}
  .pack.best{order:-1;transform:none}
  .cart-guar{grid-template-columns:1fr;gap:16px;text-align:center;padding:26px 24px}
  .cart-guar img{margin:0 auto}
  .next-up{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr}
  .badges{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px}
  .foot-brand{grid-column:1 / -1}
}

@media(max-width:780px){
  section{padding:56px 0}
  body{font-size:17.5px}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
    padding:10px 16px 18px;gap:2px;box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex}
  .nav-link{padding:13px 10px;border-radius:8px}
  .nav-links .btn{margin-top:10px}
  .nav-toggle{display:block}
  .navbar{position:relative}
  .ings{grid-template-columns:1fr}
  .bcard{width:230px}
}

@media(max-width:430px){
  .badges{grid-template-columns:repeat(2,1fr)}
  .pack-fig .num{font-size:46px}
  .btn{padding:15px 26px;font-size:16px}
  .btn-lg{font-size:17.5px;padding:17px 30px}
}