/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Bodoni Moda Fallback";src:local("Georgia");font-weight:400;size-adjust:104.91%;ascent-override:107.23%;descent-override:38.13%;line-gap-override:0.00%}
@font-face{font-family:"Bodoni Moda Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:94.67%;ascent-override:118.83%;descent-override:42.25%;line-gap-override:0.00%}
@font-face{font-family:"Questrial Fallback";src:local("Arial");font-weight:400;size-adjust:100.50%;ascent-override:81.59%;descent-override:20.90%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* memovancepros.com — MemoVance Pro, U.S. authorized retailer desk.
   Design slot row 299 (batch8_assignments.py): Bodoni Moda / Questrial,
   ink-blue paper with BONE panels, a wordmark inside a drawn keyline box with
   the navigation typeset beneath it, a footer that is one wide slab of
   destinations set as a numbered index, and the memory-bloom hero motif.

   The idea is the KEYLINE. Every container on this site is drawn with a
   hairline and a second rule set inside it, which is the device a Bodoni
   masthead has used for two centuries, and it is the only double-ruled frame
   on this estate. The ground is cool and the panels are warm: ink-blue paper
   under bone cards. No other site inverts the temperature that way, which is
   what keeps this desk clear of the other two blue cognition sites.

   Colour comes from the bottle: the MEMO wordmark runs light azure into a
   deeper slate blue, and the brain-node print behind it is the same azure at
   low opacity. Nothing here is taken from the LOOKS FOR reference but its
   component system.

   Everything above CRITICAL-END is inlined into every page head. No calc()
   above that marker: the inliner strips whitespace around punctuation and
   would turn `calc(100vh - 8px)` into something the parser rejects. */

/* ---- tokens */
:root{
  --ink:#101828;            /* body text */
  --ink-2:#414b60;          /* secondary */
  --ink-3:#5d6679;          /* captions, meta */
  --deep:#122a4d;           /* the label's darker wordmark blue */
  --deep-d:#0b1c36;         /* the slab */
  --deep-2:#1d4270;
  --azure:#1f93d0;          /* the label's bright MEMO blue */
  --azure-d:#0f6ea5;
  --wash:#e3eff9;           /* azure wash */
  --paper:#e4e9f2;          /* the page: ink-blue paper */
  --panel:#faf7f1;          /* the cards: bone */
  --tint:#d9e1ed;
  --line:#c8d2e1;
  --line-2:#a9b7cc;
  --rule:#e6ddcd;           /* the inner keyline, drawn on bone */
  --good:#1a6b45;
  --warn:#8a5a10;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --radius:2px;
  --radius-lg:3px;
  --shadow:0 1px 0 rgba(18,42,77,.06), 0 14px 34px rgba(18,42,77,.08);
  --shadow-lg:0 26px 60px rgba(11,28,54,.20);
  --navh:112px;
  --display:"Bodoni Moda","Bodoni Moda Fallback",Georgia,"Times New Roman",serif;
  --text:Questrial,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17.5px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--azure-d);text-underline-offset:3px}
a:hover{color:var(--deep)}
h1,h2,h3,h4{font-family:var(--display);color:var(--deep);font-weight:700;line-height:1.14;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,1.28rem + 2.3vw,3.2rem);letter-spacing:-.012em}
h2{font-size:clamp(1.55rem,1.2rem + 1.25vw,2.25rem);letter-spacing:-.008em}
h3{font-size:1.22rem;font-weight:700}
h4{font-size:1.04rem;font-weight:700}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--azure);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it. Questrial, tracked and
   uppercase: Bodoni at 12px is a smear, so the display face is kept for
   headings and figures and never for microtext. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:.78125rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--azure-d);
  margin:0 0 11px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--azure-d)}

/* ---- buttons: a drawn double keyline, the site's whole idea at button size */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 32px;
  font-family:var(--text);font-size:.9375rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--deep);border-radius:var(--radius);
  cursor:pointer;text-decoration:none;
  background:var(--deep);color:#fff;
  box-shadow:inset 0 0 0 1px var(--deep), inset 0 0 0 3px rgba(255,255,255,.28);
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn:hover{background:var(--deep-2);border-color:var(--deep-2);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--azure{background:var(--azure-d);border-color:var(--azure-d);
  box-shadow:inset 0 0 0 1px var(--azure-d), inset 0 0 0 3px rgba(255,255,255,.34)}
.btn--azure:hover{background:var(--deep);border-color:var(--deep)}
.btn--lg{min-height:62px;padding:18px 38px;font-size:1rem}
.btn--ghost{background:none;color:var(--deep);border-color:var(--line-2);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.5)}
.btn--ghost:hover{background:var(--wash);color:var(--deep);border-color:var(--deep)}
.btn--wide{width:100%}

/* ---- header: the wordmark inside a drawn keyline box, menu typeset beneath */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);box-shadow:0 1px 0 var(--line)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:14px 0` would set padding-inline to 0 and wipe the page gutter.
   Invisible above the container max-width, and no overflow test can see it
   (pitfall 46). */
.nav__top{display:flex;align-items:center;gap:20px;padding-block:14px}
.brand{
  position:relative;display:flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--deep);
  border:1px solid var(--deep);padding:8px 16px;
}
.brand::after{content:"";position:absolute;inset:3px;border:1px solid var(--rule);pointer-events:none}
.brand__glyph{width:32px;height:32px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class. brand_marks.py rewrites the
   <svg> inside .brand and does not carry class="brand__glyph" onto the
   replacement, so a rule keyed only to that class stops applying the moment
   the tool runs and the glyph renders at its intrinsic size -- a masthead two
   different heights on one site (pitfall 16). */
.brand>svg{width:32px;height:32px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-family:var(--display);font-size:1.35rem;font-weight:700;letter-spacing:.01em}
.bw b em{font-style:normal;color:var(--azure-d)}
.bw small{font-size:0.9062rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav__price{text-align:right;line-height:1.22}
.nav__price b{display:block;font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--deep)}
.nav__price span{font-size:.75rem;letter-spacing:.06em;color:var(--ink-3)}
.nav__buy{min-height:44px;padding:10px 20px;font-size:.8125rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:1px;background:var(--deep);margin:0 0 6px}
.burger span:last-child{margin:0}
/* the navigation, typeset beneath the box: tracked capitals on a ruled strip */
.nav__strip{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.menu{
  display:flex;flex-wrap:wrap;gap:0 26px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:42px;
}
.menu a{
  display:inline-block;padding:10px 0;font-family:var(--text);
  font-size:.78125rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--deep)}
.menu a[aria-current="page"]{color:var(--deep);border-bottom-color:var(--azure)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the bottle RIGHT on a bone plate with a drawn keyline */
.hero{position:relative;background:var(--paper);padding:52px 0 58px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:44px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--azure-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--azure);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:0 0 18px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.062rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:0.9688rem;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{content:"\2713";color:var(--good)}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:0.9062rem;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:var(--radius);
}
.factpills li b{font-family:var(--display);color:var(--deep);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);padding:14px 16px;border-radius:var(--radius)}
.figures b{display:block;font-family:var(--display);font-size:1.55rem;font-weight:700;color:var(--deep);line-height:1.08}
.figures span{display:block;font-size:0.9062rem;color:var(--ink-3);margin-top:4px}
/* the bone plate, drawn with the same double keyline as the masthead */
.hero__media{position:relative;align-self:center}
.hero__card{
  position:relative;z-index:2;text-align:center;
  width:88%;max-width:420px;margin-inline:auto;
  background:var(--panel);border:1px solid var(--deep);padding:26px 22px 20px;
}
.hero__card::before{content:"";position:absolute;inset:5px;border:1px solid var(--rule);pointer-events:none;z-index:1}
.hero__card img{position:relative;z-index:3;width:100%;max-width:278px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 22px 34px rgba(11,28,54,.28))}
.hero__cap{position:relative;z-index:3;margin:16px 0 0;font-size:.78125rem;letter-spacing:.06em;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:0.9062rem;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--good)}

/* ---- inner page head */
.phead{padding:34px 0 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:0.9062rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--azure-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: the five trust facts, above the navigation.
   Role, lot, dose and count, guarantee, order desk. It exists so the NAV does
   not have to carry them -- getexitide shipped without one, pushed the lot
   into the menu as a chip, crowded the navigation and still left the other
   four facts off the page (hero.md). It sits ABOVE CRITICAL-END because it is
   the first thing painted; appended to the end of the stylesheet it would load
   async and flash unstyled at the very top of the page. */
.util{background:var(--deep-d);color:#a9bdd7;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:1px;height:11px;
  background:#37578a;flex:0 0 auto;margin-right:11px}
.util b{color:#e7eef8;font-weight:400}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines and eat 103px of an 844px screen (hero.md).
     Keep role, guarantee and the order desk; the lot and the dose are on the
     pages that need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}

/* ---- hero motif -- memory-bloom ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:linear-gradient(172deg,#e4e9f2 0%,#d2e1ef 48%,#e5eaf3 100%)}.hero__media::before{content:'';position:absolute;left:50%;top:46%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid rgba(31,147,208,0.42);animation:mvBloom 9s ease-out infinite;z-index:0;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:50%;width:136%;height:120%;translate:-50% -50%;background:radial-gradient(circle at 12% 18%,rgba(31,147,208,0.55) 0 2.4px,transparent 2.9px),radial-gradient(circle at 31% 9%,rgba(18,42,77,0.34) 0 1.9px,transparent 2.4px),radial-gradient(circle at 86% 15%,rgba(31,147,208,0.48) 0 2.6px,transparent 3.1px),radial-gradient(circle at 94% 47%,rgba(18,42,77,0.30) 0 2.1px,transparent 2.6px),radial-gradient(circle at 6% 58%,rgba(31,147,208,0.44) 0 2.3px,transparent 2.8px),radial-gradient(circle at 18% 88%,rgba(31,147,208,0.38) 0 2px,transparent 2.5px),radial-gradient(circle at 78% 91%,rgba(18,42,77,0.28) 0 2.2px,transparent 2.7px),radial-gradient(circle at 50% 4%,rgba(31,147,208,0.34) 0 1.8px,transparent 2.3px),radial-gradient(ellipse 58% 44% at 50% 52%,rgba(31,147,208,0.20),transparent 72%);animation:mvDrift 17s ease-in-out infinite;z-index:0;pointer-events:none}@keyframes mvBloom{0%{scale:.52;opacity:0}22%{opacity:.9}100%{scale:1.16;opacity:0}}@keyframes mvDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(12px,-14px,0)}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  /* Stacked hero: cap the portrait bottle by height so it does not push the Quick Answer down a screen on its own. Tightened again below 760. */ .hero__card img{width:auto;max-width:100%;max-height:380px}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:34px 0 42px}
  /* The bottle shot is a tall portrait crop, 591x1109. Left at the desktop width it renders 521px tall on a phone and pushes the Quick Answer to y=1178 and the CTA to y=1779, against hero.md's targets of ~850 and ~1100. Capping it by HEIGHT rather than width keeps the label legible and brings both back above the line. */ .hero__media{margin:4px 0 16px}
  .hero__card{width:auto;max-width:300px;padding:20px 18px 14px}
  .hero__card img{width:auto;max-width:100%;max-height:270px}
  .hero__cap{margin-top:12px}
}
@media (min-width:981px){
  .hero__media{position:sticky; top:calc(var(--navh, 96px) + 14px); align-self:start; min-height:calc(100vh - var(--navh, 96px) - 28px); min-height:calc(100svh - var(--navh, 96px) - 28px); display:flex; flex-direction:column; align-items:center; justify-content:center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}
/* --- end of the copied hero responsive rules --- */

/*!SITE-HOME-CRIT-START*/
/* HOME PAGE ONLY -- the geometry half of the home design pass. Everything
   here moves a box, so it has to sit above CRITICAL-END and the site has to
   be REBUILT: this block is inlined into every page head at build time, and a
   restamp alone would leave ~30 pages carrying the old copy. The paint half
   is in SITE-HOME-PAINT at the end of this file.

   Every selector is anchored to .hero, which is on index.html and on no other
   page of this site, so none of it reaches an inner page.

   1. DESKTOP READING ORDER. Measured at 1440x900: the hero's buy button sat
      at y=939 with the fold at 900, so the first screen of the money page had
      nothing on it to click. The copy column is a flex column above 980px, so
      `order` alone moves the CTA up under the Quick Answer -- no markup
      change, and the PHONE composition below 981px (display:contents, its own
      order values) is left exactly as it was. Reading order becomes: eyebrow,
      headline, Quick Answer, BUTTONS, the payment line, then the evidence.
      The catch-all `order:9` is deliberate: a child added later lands at the
      END rather than jumping to the top of the column -- and every item below
      it is matched through `.hero__copy>` for a reason. The first version of
      this block wrote `.hero h1{order:2}`, which is one class and one type
      (0,1,1) against the catch-all's two classes (0,2,0): the catch-all won,
      and the H1 rendered at the FOOT of the hero under the figures. It was
      only caught by reading the boxes back out of the browser, which is the
      whole argument for measuring rather than trusting the rule you wrote.

      `padding-top` and the H1 margin buy the fold 20px: with them the buy
      button lands at y=789-855 against a 900px fold instead of 809-875.

   2. The recommended pack is raised by MARGIN, never by transform -- the
      reveal pass sets transform:none and would flatten it. Desktop only:
      below 981px the three cards stack and a negative margin would pull the
      featured card into the section head.

   3. The perk rows get a dashed rule. A border is geometry. All three cards
      carry four perks, so all three grow by the same 21px and the shared
      Add-To-Cart baseline survives -- measured after, not assumed. */
@media (min-width:981px){
  .hero{padding-top:36px}
  .hero h1{margin-bottom:14px}
  .hero .hero__copy>*{order:9}
  .hero .hero__copy>.eyebrow{order:1}
  .hero .hero__copy>h1{order:2}
  .hero .hero__copy>.answer{order:3}
  .hero .hero__copy>.hero__cta{order:4}
  .hero .hero__copy>.hero__sub{order:5}
  .hero .hero__copy>.hero__road{order:6}
  .hero .hero__copy>.factpills{order:7}
  .hero .hero__copy>.figures{order:8}
  .hero ~ * .card--pack.featured{margin-top:-14px}
}
.hero ~ * .pack__perks li+li{border-top:1px dashed var(--line);padding-top:6px}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:62px 0;position:relative}
/* The masthead is sticky, so an in-page jump lands the section head underneath
   it. --navh is measured by site.js; the fallback matches the desktop value. */
.sec[id],.phead[id],.hero[id],main[id]{scroll-margin-top:calc(var(--navh, 112px) + 14px)}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--deep-d);color:#d6e1ef}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c1d0e2}
.sec--dark .eyebrow{color:#8ccdf0}
.sec--dark .eyebrow::before{background:#8ccdf0}
.sec--dark a{color:#9ed3f5}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* a drawn rule above the section head, the keyline at page scale */
.sec--rule{border-top:1px solid var(--line)}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#c1d0e2}

/* one measure, centred; multi-column components keep the full wrap */
@media (min-width:1060px){
  .sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote,
  .sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{
    max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- lists */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .5em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good)}
.sec--dark .ticks li::before{color:#6fd3a4}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--text);font-size:0.9062rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:var(--deep)}
tbody tr:nth-child(even){background:#f4efe5}
tbody tr:last-child td{border-bottom:0}
td b{font-family:var(--display);color:var(--deep)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps: the index device again, at component scale */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 20px 72px}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;left:22px;top:19px;width:36px;
  font-family:var(--display);font-weight:700;font-size:1.28rem;color:var(--azure-d);
  border-bottom:1px solid var(--azure);padding-bottom:2px;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: bone, with a second rule drawn inside the border */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Grid items default to min-width:auto, which floors at MIN-CONTENT. A card
   holding a nowrap chip or a 520px-min table therefore refuses to shrink and
   is clipped away by body{overflow-x:clip} with nothing to scroll and nothing
   to report. min-width:0 belongs on the items at EVERY width, not only inside
   a media query. */
.grid>*{min-width:0}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 24px}
.card::before{content:"";position:absolute;inset:5px;border:1px solid var(--rule);pointer-events:none}
.card>*{position:relative}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#11294a;border-color:#24466f}
.sec--dark .card::before{border-color:#1b3a63}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #bcdaf0;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;font-family:var(--display);color:var(--deep)}
.callout p:last-child{margin:0}
.alert{background:#fbf3e6;border:1px solid #ecdcbd;border-left:3px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;font-family:var(--display);color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.35rem;font-weight:400;line-height:1.5;color:var(--deep);border-left:3px solid var(--azure);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--azure);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px;font-family:var(--display);color:var(--deep)}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* Same reason as .grid above: a .tablewrap holding a 520px-min table keeps its
   column 520px wide however narrow the grid is, because `1fr` is
   minmax(auto,1fr) and `auto` floors at min-content. Measured elsewhere on the
   estate at 390: a 350px grid box whose single column resolved to 522px. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats>*{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.3rem;font-weight:700;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#a9bdd7;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr 1fr 1.2fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>*{min-width:0}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem}
.versus>div:nth-child(3n+1){font-family:var(--display);background:#f5f0e6}
.versus__h{background:var(--deep)!important;color:#fff;font-family:var(--text)!important;font-size:.78125rem;letter-spacing:.13em;text-transform:uppercase}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* .ing__dose is white-space:nowrap and sets the card's min-content width, so
   without this the column resolves wider than the phone and the right-hand
   side of every card is clipped. */
.inglist>*{min-width:0}
.ingcard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
.ingcard::before{content:"";position:absolute;inset:5px;border:1px solid var(--rule);pointer-events:none}
.ingcard>*{position:relative}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top>*{min-width:0}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-family:var(--display);font-size:.9375rem;font-weight:700;color:#fff;background:var(--deep);padding:4px 12px;border-radius:var(--radius);white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius-lg);overflow:hidden;position:relative;padding:0}
.card--pack::before{display:none}
/* No lift on the featured card. A margin-top:-12px raises its box, which makes
   it 12px TALLER than its siblings and trips responsive.md's rule that a
   pricing row shares one height and one button baseline. The card is already
   unmistakable from its accent border, its head band and its flag. */
.card--pack.featured{border-color:var(--deep);box-shadow:var(--shadow-lg)}
/* padding-right leaves room for the corner flag, which is absolutely
   positioned over this band. Anything placed at the right-hand end of the band
   renders underneath it. */
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:14px 20px;padding-right:132px;display:flex;align-items:center;gap:10px}
.pack__head>*{min-width:0}
.card--pack.featured .pack__head{background:var(--deep);border-bottom-color:var(--deep)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.16rem;font-weight:700;color:var(--deep)}
.pack__head span{font-size:.75rem;letter-spacing:.07em;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--azure-d);color:#fff;font-family:var(--text);font-size:0.8438rem;letter-spacing:.11em;text-transform:uppercase;padding:6px 13px;z-index:3}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.5rem;font-weight:700;color:var(--deep);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;font-weight:400;top:-.8em}
.pack__unit{display:block;text-align:center;font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-family:var(--display);font-weight:700}
.pack__was{color:var(--ink-3);text-decoration:line-through}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good)}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.78125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots>*{min-width:0}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;font-family:var(--display);color:var(--deep)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.badgewall>*{min-width:0}
.badgewall figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-family:var(--display);font-size:1rem;margin-bottom:4px;color:var(--deep)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px 1fr 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__row>*{min-width:0}
.meter__bar{height:8px;background:var(--line);border-radius:var(--radius);overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--azure-d)}
.stars{color:#c99a1e;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-family:var(--text);font-size:1.3rem;color:var(--azure-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token. At 390 that pushed a single <a> past the viewport
   on eleven pages elsewhere on the estate -- clipped, unscrollable, invisible
   to every static check. `anywhere` rather than `break-word` because it also
   lowers the element's MIN-CONTENT, which is what stops the ancestor being
   sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--azure);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline>*{min-width:0}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:var(--deep);color:#fff;font-family:var(--display);font-weight:700;font-size:1.1rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;font-family:var(--display);color:var(--deep)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{position:relative;background:var(--panel);border:1px solid var(--deep);padding:32px 34px}
.final::before{content:"";position:absolute;inset:5px;border:1px solid var(--rule);pointer-events:none}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final>*{position:relative;min-width:0}
.final__img img{width:180px}
.final h2{margin:0 0 10px}
.final__price{color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel>*{min-width:0}
.rel a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .18s ease}
.rel a:hover{border-color:var(--deep)}
.rel b{display:block;font-family:var(--display);font-size:1.1rem;color:var(--deep);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms on focus (pitfall 86). */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-size:.9688rem;margin-bottom:6px;color:var(--deep)}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--panel);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:0.9062rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;font-family:var(--display);color:var(--deep)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.062rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts>*{min-width:0}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.062rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: a bone guarantee plate, then ONE wide slab carrying every
   destination as a continuous numbered index. No column headings: the index
   numbers do that work, which is the whole point of this slot. */
.fcta{background:var(--panel);border-top:1px solid var(--line);padding:56px 0}
.fcta__box{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center;border:1px solid var(--deep);padding:32px 34px}
.fcta__box::before{content:"";position:absolute;inset:5px;border:1px solid var(--rule);pointer-events:none}
.fcta__txt,.fcta__img{position:relative;min-width:0}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.78125rem;letter-spacing:.2em;text-transform:uppercase;color:var(--azure-d);margin-bottom:9px}
.fcta__h{font-family:var(--display);font-size:1.7rem;font-weight:700;line-height:1.2;color:var(--deep);margin:0 0 10px}
.fcta p{color:var(--ink-2)}
.fcta__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}
.fcta__img img{width:250px}
footer{background:var(--deep-d);color:#c1d0e2}
.fslab{padding-block:48px}
.fhead{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:30px;padding-bottom:30px;border-bottom:1px solid #22406b}
.fhead>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.9rem;font-weight:700;color:#fff;letter-spacing:.01em;line-height:1}
.fbrand span{color:#6cc0ec}
.frole{font-size:.9375rem;color:#9ab0cc;margin:10px 0 0}
.fcard p{font-size:1.062rem;color:#b6c7dc;margin:0 0 .7em}
.fcard b{display:block;font-family:var(--text);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#7f99ba}
.fcard a{color:#9ed3f5;text-decoration:none}
.fcard a:hover{text-decoration:underline}
.findex{counter-reset:fx;columns:4;column-gap:34px;list-style:none;margin:26px 0 0;padding:0}
.findex li{break-inside:avoid;margin:0;border-bottom:1px solid #1b3357}
.findex a{position:relative;display:block;padding-block:9px;padding-left:34px;font-size:.9375rem;color:#c1d0e2;text-decoration:none}
.findex a::before{counter-increment:fx;content:counter(fx,decimal-leading-zero);position:absolute;left:0;top:9px;font-family:var(--display);font-size:.8125rem;color:#6cc0ec}
.findex a:hover{color:#fff}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:22px;border-top:1px solid #22406b}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:#9ab0cc}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-bottom:26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:#9ab0cc}
.disc{background:#081528;border-top:1px solid #22406b;padding-block:28px 32px}
.disc p,.disc li{font-size:.9375rem;color:#a7bad2}
.disc b{color:#e7eef8}
.disc a{color:#9ed3f5}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:#6cc0ec}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid #22406b;font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--deep-d);color:#fff;transform:translateY(105%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;padding-block:12px;padding-inline:22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-family:var(--display);font-size:1.04rem}
.buybar__t span{color:#a9bdd7}
.buybar .btn{margin-left:auto;flex:0 0 auto}

/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- responsive */
@media (max-width:1100px){
  .findex{columns:3}
  .fhead{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  :root{--navh:104px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  /* Stacked hero: cap the portrait bottle by height so it does not push the
     Quick Answer down a screen on its own. Tightened again below 760. */
  .hero__card img{width:auto;max-width:100%;max-height:380px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:13px 0;border-bottom:1px solid var(--line)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
  /* Four seals in four columns resolve to 167px each at 768, which is under the
     200px floor responsive.md sets for a grid child. Two columns at this width
     gives the caption room to read. */
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:17px}
  .sec{padding:46px 0}
  .hero{padding:34px 0 42px}
  /* The bottle shot is a tall portrait crop, 591x1109. Left at the desktop
     width it renders 521px tall on a phone and pushes the Quick Answer to
     y=1178 and the CTA to y=1779, against hero.md's targets of ~850 and ~1100.
     Capping it by HEIGHT rather than width keeps the label legible and brings
     both back above the line. */
  .hero__media{margin:4px 0 16px}
  .hero__card{width:auto;max-width:300px;padding:20px 18px 14px}
  .hero__card img{width:auto;max-width:100%;max-height:270px}
  .hero__cap{margin-top:12px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it is pushed to the right of a line with no room for it and overhangs
     the card edge. On a phone let it start its own line and wrap its text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .findex{columns:2;column-gap:24px}
  .fhead{grid-template-columns:1fr;gap:24px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .findex{columns:1}
  .badgewall{grid-template-columns:1fr}
  .brand{padding:7px 12px}
  .bw b{font-size:1.18rem}
}

/* ---- hero: the plate breathes -------------------------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted (hero.md). The float goes
   on the CARD, never on the <img>, which is preloaded. */
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:mvFloat 8.5s ease-in-out infinite}
  @keyframes mvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}

/* ---- hero: sticky, centred product column -------------------------------
   The product column holds its place, vertically centred, until the hero has
   fully scrolled past.

   --navh is measured and published by site.js: this masthead is a topline, a
   brand row and a menu strip, so its height changes between breakpoints and a
   hardcoded offset would tuck the plate under the bar.

   min-height makes the sticky box a full screen tall so the plate can be
   CENTRED inside it. Without it the box is only as tall as the card and `top`
   merely pins it under the header.

   Requires .hero NOT to clip on the block axis: any non-visible overflow on an
   ancestor becomes the scrollport sticky resolves against (pitfall 65). */
@media (min-width:981px){
  .hero__grid{align-items:start}
  .hero__media{
    position:sticky;
    top:calc(var(--navh, 96px) + 14px);
    align-self:start;
    min-height:calc(100vh - var(--navh, 96px) - 28px);
    min-height:calc(100svh - var(--navh, 96px) - 28px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
   hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
   resolve against the nearest positioned ancestor; `static` re-parents them to
   a box several times wider -- measured at 1800px against a 523px column --
   and the ring lands across the headline. Worse, the same query stops it
   animating, so it SITS there: ask for less motion, get the one broken hero.

   `relative` lays out identically to `static` and keeps the containing block.
   `top:0` is not decoration: the rule above sets a top offset of one nav height
   plus 14px, which a relative box would apply for real and push the plate
   ~110px down the page (pitfall 65). Written WITHOUT naming that custom
   property in the usual var() form on purpose -- preflight's undefined-variable
   check reads comments too, so a property named here is a property it believes
   the sheet uses. Measured on 7 sites before and after (pitfall 107). */
@media (prefers-reduced-motion: reduce) {
  .hero__media { position: relative; top: 0; min-height: 0; }
}

/* --- pack cards read as one repeated object -------------------------------
   A pricing row is three cards that have to share their edges, their image
   slot and their button baseline. The vendor pack shots are all 1125x1125 but
   the bottles inside them are at three different scales, and the blurbs are
   three different lengths, so without these rules the images render at three
   apparent sizes and the CTAs sit at three heights.

   The height lives here and not on the <img> attributes on purpose: those must
   keep stating each file's true ratio, or fix_img_dims.py rewrites them and
   CLS gets worse. Override per site with --pack-img (pitfall 91). */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,178px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* The footer column link is the thing you tap, and it was 17px tall in
   35px of row pitch -- under the 24px WCAG AA floor. The padding grows the
   hit area to ~33px and the negative margin gives the space straight back,
   so the footer renders identically. inline-block (not block) keeps the
   hover underline the width of the words. See fix_footer_tap.py. */
footer li a{display:inline-block;padding-block:4px;margin-block:-4px}

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots.s2>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 20px) / 2);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav,header.header{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav,header.header{transition:none}}
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */

/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */

/*!SITE-HOME-PAINT-START*/
/* HOME PAGE ONLY -- the paint half. border-radius, box-shadow, background,
   colour, transform and transition move no box, so this belongs below the
   marker and needs only restamp_assets.py.

   THE SLOT for this site: 18px panels, 12px controls, a SINGLE soft lift
   (0 12px 30px) with no contact stop, a corner-flag ribbon, and a hero motif
   of the "settle" family -- one very slow breath that comes to rest.

   Anchored to .hero, never to source order: modern_surface.py and
   footer_type.py strip and re-append their own blocks AFTER this one on every
   build, so this has to win on specificity. `.hero X` is the hero itself and
   `.hero ~ * X` the sections after it; both are inside main#main. The header,
   the footer and the sticky buy bar are shared chrome and are left alone.

   Every shadow is tinted with this site's own deep ink (18,42,77 and
   11,28,54), never neutral black.

   WHY THE TWO BUTTON SHADOWS ARE TOKENS. modern_surface.py decides whether
   this site still needs its panel shadow by counting colour stops inside
   every `box-shadow:` declaration in the sheet: find one with two or more and
   it concludes the stylesheet is already layered and stops emitting
   `.card,...{box-shadow:var(--shadow)}` altogether. Writing the CTA's keyline
   plus lift literally satisfied that test and silently took the shadow off
   every panel on the other 31 pages of this site -- a home-page pass changing
   pages it does not own. Behind a custom property the declaration carries one
   colour at most, the estate tool keeps its own job, and the home page still
   gets the shadow it asks for. The fallbacks are deliberately single-colour
   for the same reason. */
.hero,
.hero ~ *{
  --mv-cta-shade:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 3px rgba(255,255,255,.30),0 12px 30px rgba(11,28,54,.22);
  --mv-cta-shade-hi:inset 0 0 0 1px rgba(255,255,255,.20),inset 0 0 0 3px rgba(255,255,255,.34),0 16px 38px rgba(11,28,54,.30);
  --mv-ghost-shade:inset 0 0 0 3px rgba(255,255,255,.55),0 8px 20px rgba(18,42,77,.09);
}

/* ---- curve: panels 18px, controls 12px --------------------------------- */
.hero .answer,
.hero .hero__card,
.hero ~ * .card,
.hero ~ * .callout,
.hero ~ * .step,
.hero ~ * .ingcard,
.hero ~ * .tablewrap,
.hero ~ * .faq,
.hero ~ * .versus,
.hero ~ * .shots figure,
.hero ~ * .badgewall figure,
.hero ~ * .final,
.hero ~ * .split__img,
.hero ~ * .split__img img,
.hero ~ * .posts article,
.hero ~ * .rel a{border-radius:18px}
/* these two are ruled down one edge; that edge stays square */
.hero ~ * .alert{border-radius:0 18px 18px 0}
.hero ~ * .byline{border-radius:0 18px 18px 0}
/* the drawn inner keyline sits 5px inside the card, so its corner is 5px
   tighter. Without this the site's own double rule cuts across the new
   corner and the card reads as a mistake rather than as a frame. */
.hero .hero__card::before,
.hero ~ * .card::before,
.hero ~ * .ingcard::before,
.hero ~ * .final::before{border-radius:13px}
.hero .factpills li,
.hero .figures div,
.hero ~ * .ing__dose{border-radius:12px}
.hero .btn,
.hero ~ * .btn{border-radius:12px}

/* ---- shade: one soft lift, no contact stop ----------------------------- */
.hero .answer,
.hero .hero__card,
.hero ~ * .card,
.hero ~ * .callout,
.hero ~ * .alert,
.hero ~ * .step,
.hero ~ * .ingcard,
.hero ~ * .tablewrap,
.hero ~ * .faq,
.hero ~ * .byline,
.hero ~ * .final,
.hero ~ * .split__img,
.hero ~ * .shots figure,
.hero ~ * .badgewall figure,
.hero ~ * .posts article,
.hero ~ * .rel a{box-shadow:0 12px 30px rgba(18,42,77,.10)}

/* ---- motion: 2px on anything clickable, and a focus ring that is not the
   hover state in disguise ------------------------------------------------ */
.hero .btn,
.hero ~ * .btn{transition:background-color .18s ease,background-image .18s ease,color .18s ease,border-color .18s ease,box-shadow .22s ease,transform .22s ease}
.hero .btn:hover,
.hero ~ * .btn:hover{transform:translateY(-2px)}
.hero .btn:active,
.hero ~ * .btn:active{transform:translateY(0)}
.hero .btn:focus-visible,
.hero ~ * .btn:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
.hero ~ * .rel a:hover,
.hero ~ * .posts article:hover,
.hero ~ * .shots figure:hover,
.hero ~ * .badgewall figure:hover{box-shadow:0 18px 40px rgba(18,42,77,.16);transform:translateY(-2px)}

/* ---- the buying CTA carries the gradient, the secondary stays solid, so the
   pair reads as two weights. The ramp is the bottle's own wordmark: light
   azure into the deeper slate blue. ------------------------------------- */
.hero .btn--azure,
.hero ~ * .btn--azure{
  background-color:var(--azure-d);
  background-image:linear-gradient(135deg,var(--azure) 0%,var(--azure-d) 48%,var(--deep-2) 100%);
  border-color:var(--azure-d);
  box-shadow:var(--mv-cta-shade,inset 0 0 0 3px rgba(255,255,255,.30));
}
.hero .btn--azure:hover,
.hero ~ * .btn--azure:hover{
  background-color:var(--deep);
  background-image:linear-gradient(135deg,var(--azure) 0%,var(--azure-d) 32%,var(--deep) 100%);
  border-color:var(--deep);
  box-shadow:var(--mv-cta-shade-hi,inset 0 0 0 3px rgba(255,255,255,.34));
}
.hero .btn--ghost,
.hero ~ * .btn--ghost{
  background-color:var(--panel);
  background-image:none;
  box-shadow:var(--mv-ghost-shade,inset 0 0 0 3px rgba(255,255,255,.55));
}
.hero .btn--ghost:hover,
.hero ~ * .btn--ghost:hover{background-color:var(--wash);border-color:var(--deep)}

/* ---- the pricing row ---------------------------------------------------
   The engineering underneath is untouched: the fixed head min-height, the
   fixed image box, the per-item stretch and the featured card raised by
   MARGIN (above the marker) all stay exactly as they were. This is colour,
   corner and shade only. */
.hero ~ * .card--pack{
  border-radius:18px;
  box-shadow:0 12px 30px rgba(18,42,77,.10);
  transition:box-shadow .22s ease,transform .22s ease;
}
.hero ~ * .card--pack:hover{box-shadow:0 18px 42px rgba(18,42,77,.16);transform:translateY(-2px)}
/* the recommended tier: warmer ground, deeper flag, a heavier lift */
.hero ~ * .card--pack.featured{
  background-image:linear-gradient(180deg,var(--wash) 0,rgba(227,239,249,0) 220px);
  box-shadow:0 18px 44px rgba(11,28,54,.20);
}
.hero ~ * .card--pack.featured:hover{box-shadow:0 24px 54px rgba(11,28,54,.26);transform:translateY(-2px)}
/* corner flag: the ribbon hangs off the top corner and its inner end is
   notched, which is what makes it read as a flag rather than as a label. The
   notch is 8px deep against 13px of padding, so no letter is touched. */
.hero ~ * .pack__flag{
  background-image:linear-gradient(135deg,var(--azure) 0%,var(--azure-d) 62%,var(--deep-2) 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,8px 50%);
}
.hero ~ * .card--pack.featured .pack__flag{
  background-image:linear-gradient(135deg,var(--deep-2) 0%,var(--deep) 68%,var(--deep-d) 100%);
}
.hero ~ * .pack__perks li+li{border-top-color:var(--line-2)}

/* ---- the hero motif: "settle" -----------------------------------------
   One very slow breath that comes to rest, replacing the ring that pulsed
   forever -- these are capsules taken daily for weeks, not an energy drink.

   It lives on the media column's ::before and never on the <img>, which is
   the LCP element and is preloaded.

   The SIZE was measured, not guessed. The plate is 420x607 inside a 513x741
   column, and the plate is opaque: any halo smaller than the card renders as
   nothing at all, because the only part of it a reader can see is the part
   that falls OUTSIDE the card. 126% x 122% puts 113px of halo past each side
   and ~148px past the top and the foot. It is an ellipse rather than a circle
   for the same reason the plate is a portrait: a circle wide enough to clear
   the foot of the bottle reaches 150px into the copy column and tints the
   right-hand edge of the Quick Answer panel, which sits under it because this
   pseudo-element carries a z-index and the panel does not. `closest-side`
   pins the stops to the box edges, so the ramp is readable in the band that
   is actually visible instead of hiding its brightest stop behind the card.

   The node field on ::after is left exactly as it was, and this keyframe name
   is new: mvBloom, mvDrift and mvFloat are all still in use above. */
.hero .hero__media::before{
  border:0;
  width:126%;
  height:122%;
  aspect-ratio:auto;
  background:radial-gradient(ellipse closest-side at 50% 50%,rgba(31,147,208,.26) 0%,rgba(31,147,208,.21) 58%,rgba(31,147,208,.13) 76%,rgba(18,42,77,.05) 89%,rgba(18,42,77,0) 100%);
  animation:mvSettleHalo 18s cubic-bezier(.16,.62,.28,1) both;
}
@keyframes mvSettleHalo{
  0%{scale:.84;opacity:.28}
  58%{scale:1.06;opacity:1}
  100%{scale:1;opacity:.86}
}
/* Motion off: the halo does not vanish, it simply arrives already settled.
   The rule above this one in the critical block hides it outright, so this
   has to out-specify it as well as repeat the !important. */
@media (prefers-reduced-motion:reduce){
  .hero .hero__media::before{animation:none!important;opacity:.82!important;scale:1!important}
  .hero .btn:hover,
  .hero ~ * .btn:hover,
  .hero ~ * .card--pack:hover,
  .hero ~ * .card--pack.featured:hover,
  .hero ~ * .rel a:hover,
  .hero ~ * .posts article:hover,
  .hero ~ * .shots figure:hover,
  .hero ~ * .badgewall figure:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fcard b{font-size:16px}
footer .findex a{font-size:16px}
footer .findex a::before{font-size:16px}
footer .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 15 box-shadow declaration(s)
   and 0 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (16,24,40), not neutral black.

   Paint only: border-radius, box-shadow and transform change no
   geometry, so this is safe below the critical marker and needs a
   restamp rather than a rebuild. */
:root{
  --radius:16px;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 6px 18px rgba(16,24,40,.07);
  --lift:0 2px 6px rgba(16,24,40,.09), 0 16px 34px rgba(16,24,40,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.split__img,
.answer{box-shadow:var(--shadow)}

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.keypoints,
.alert,
.byline,
.final,
.split__img,
.answer{border-radius:var(--radius)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.card--pack,
.badgewall figure{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}