/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Big Shoulders Display Fallback";src:local("Arial");font-weight:400;size-adjust:67.98%;ascent-override:144.75%;descent-override:31.33%;line-gap-override:0.00%}
@font-face{font-family:"Big Shoulders Display Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:73.45%;ascent-override:133.97%;descent-override:29.00%;line-gap-override:0.00%}
@font-face{font-family:"Libre Franklin Fallback";src:local("Arial");font-weight:400;size-adjust:105.06%;ascent-override:91.95%;descent-override:23.42%;line-gap-override:0.00%}
@font-face{font-family:"Libre Franklin Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:100.08%;ascent-override:96.52%;descent-override:24.58%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* thememovancepro.com — MemoVance Pro, U.S. stocking partner desk.
   Design slot row 309 (batch8_assignments.py): Big Shoulders Display / Libre
   Franklin, a dusty rose linen ground, navigation presented as a scrolling
   ribbon of rounded chips beneath the name, a dark footer block whose upper
   edge is crossed by a band of seals, and the recall-orbit hero motif.

   THE GROUND AND THE ACCENT COME FROM TWO DIFFERENT PLACES ON PURPOSE.
   The palette rule for this estate is that colour comes off the bottle, and
   the bottle here is white with a two-tone blue wordmark: a bright #1b8ec0 on
   "MEMO" and a deep #22485c on "VANCE PRO". Those are the accents. The GROUND
   is the slot's own dusty rose linen, woven with two low-alpha repeating
   gradients rather than an image, so a warm rose page carries cool blue type.
   No other desk on this estate pairs those two, which is what keeps this site
   off the sister domain selling the same capsule.

   The chip ribbon replaces the burger entirely. Every destination is a chip and
   the row scrolls horizontally under a thumb at 390 exactly as it does under a
   trackpad at 1440, so there is no hidden menu state to get wrong and no link
   that exists only behind a tap. The right edge carries a mask fade so the row
   reads as continuing rather than as ending.

   Everything above CRITICAL-END is inlined into every page head. */

/* ---- tokens */
:root{
  --ink:#2a1d1f;            /* body text, warm near-black */
  --ink-2:#5d474a;          /* secondary */
  --ink-3:#87696c;          /* captions, meta */
  --blue:#1b8ec0;           /* the label's bright wordmark blue */
  --blue-d:#13698f;         /* links and small type, for contrast on paper */
  --deep:#22485c;           /* the label's "VANCE PRO" ink */
  --deep-2:#16303d;
  --wash:#e3f1f8;           /* blue wash */
  --paper:#efdfdb;          /* the page: dusty rose linen */
  --panel:#fffbfa;
  --tint:#e7d3cf;
  --line:#dcc3be;
  --line-2:#c6a49e;
  --rose:#9d5a5f;           /* the ground's own darker thread */
  --dark:#2a2024;           /* the footer block */
  --dark-2:#1e1619;
  --good:#1a6b4a;
  --warn:#8a5210;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:10px;
  --radius-lg:18px;
  --chip:999px;
  --shadow:0 1px 2px rgba(42,29,31,.06), 0 12px 32px rgba(42,29,31,.08);
  --shadow-lg:0 24px 64px rgba(34,72,92,.22);
  --navh:112px;
  --display:"Big Shoulders Display","Big Shoulders Display Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Libre Franklin","Libre Franklin Fallback",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;color:var(--ink);
  /* the linen: two low-alpha weaves over the rose, no image request */
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(0deg,rgba(157,90,95,.07) 0 1px,transparent 1px 4px);
  font-family:var(--text);font-size:17px;line-height:1.74;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-d);text-underline-offset:3px}
a:hover{color:var(--deep)}
/* Big Shoulders Display is a CONDENSED face: at the same font-size it reads
   about 30% narrower than a normal-width grotesque, so the display sizes here
   are deliberately larger than this estate's usual scale and the tracking is
   opened up. Setting it at a body-face size makes headings look smaller than
   the paragraphs beneath them. */
h1,h2,h3,h4{font-family:var(--display);color:var(--deep);font-weight:800;line-height:1.06;margin:0 0 .5em}
h1{font-size:clamp(2.5rem,1.5rem + 3.1vw,4rem);letter-spacing:.002em;text-transform:uppercase}
h2{font-size:clamp(1.85rem,1.35rem + 1.7vw,2.8rem);letter-spacing:.004em}
h3{font-size:1.4rem;font-weight:700;letter-spacing:.01em}
h4{font-size:1.16rem;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(--blue);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--text);font-size:0.8438rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--blue-d);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:9px;height:9px;border-radius:50%;
  border:2px solid var(--blue);   /* the orbit, echoed at the smallest scale */
}

/* ---- buttons: the chip shape, carried through from the navigation ribbon */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 32px;
  font-family:var(--display);font-size:1.22rem;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;
  border:0;border-radius:var(--chip);cursor:pointer;text-decoration:none;
  background:linear-gradient(100deg,var(--deep) 0%,var(--deep-2) 100%);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.16);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--cyan{background:linear-gradient(100deg,var(--blue-d) 0%,var(--blue) 100%)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.34rem}
.btn--ghost{background:none;color:var(--deep);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--deep-2)}
.btn--wide{width:100%}

/* ---- header: the name, then a scrolling ribbon of rounded chips beneath it */
.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:13px 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:18px;padding-block:13px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--deep)}
.brand__glyph{width:36px;height:36px;flex:0 0 auto}
/* Size the mark by ELEMENT, not only by class. brand_marks.py rewrites the
   <svg> inside .brand and does NOT carry class="brand__glyph" onto the
   replacement, so a rule keyed to that class stops applying the moment the
   tool runs and the glyph renders at its intrinsic size — a masthead at two
   different heights on one site (pitfall 16). Keying the element as well makes
   this immune to whatever the tool emits. */
.brand>svg{width:36px;height:36px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1}
.bw b{font-family:var(--display);font-size:1.9rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.bw b em{font-style:normal;color:var(--blue)}
.bw small{font-family:var(--text);font-size:0.9062rem;font-weight:600;color:var(--ink-3);letter-spacing:.04em;margin-top:3px}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav__price{text-align:right;line-height:1.16}
.nav__price b{display:block;font-family:var(--display);font-size:1.45rem;font-weight:800;color:var(--deep)}
.nav__price span{font-size:.75rem;font-weight:600;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:10px 22px;font-size:1.02rem}

/* the ribbon. One horizontally scrolling row at every width: nothing is hidden
   behind a toggle, so there is no menu state and no destination that exists
   only after a tap. */
.nav__strip{background:var(--tint);border-top:1px solid var(--line);position:relative}
.nav__strip .wrap{padding-inline:0}
/* scroll-padding-inline MUST match padding-inline here, and it is not a
   nicety. A snap container's snapport is its PADDING box, so `scroll-snap-align:
   start` on the first chip aligned that chip to x=0 and the browser snapped to
   it on load: scrollLeft settled at exactly 22 (16 on a phone), cancelling the
   lead-in and rendering the first chip flush against the screen edge at every
   width. The padding was in the stylesheet, computed correctly, and simply not
   on screen -- measured in Chrome at 390 and 900. scroll-padding insets the
   snapport by the same amount, so the snapped position is scrollLeft:0 and the
   gutter survives. */
.menu{
  display:flex;flex-wrap:nowrap;gap:8px;list-style:none;margin:0;
  padding:10px 22px;align-items:center;scroll-padding-inline:22px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%);
}
.menu::-webkit-scrollbar{display:none}
.menu li{flex:0 0 auto;scroll-snap-align:start}
.menu a{
  display:inline-block;padding:8px 16px;border-radius:var(--chip);
  font-family:var(--text);font-size:.875rem;font-weight:600;white-space:nowrap;
  color:var(--ink-2);text-decoration:none;background:var(--panel);
  border:1px solid var(--line);transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.menu a:hover{color:var(--deep);border-color:var(--line-2)}
.menu a[aria-current="page"]{background:var(--deep);border-color:var(--deep);color:#fff}
/* the ribbon has run out of chips at the right, so drop the fade */
.nav__strip.is-end .menu{-webkit-mask-image:none;mask-image:none}

/* ---- topline strip: the five trust facts, above the navigation.
   Role, lot, dose and count, guarantee, order phone. It exists so the ribbon
   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). 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(--dark);color:#cdb8b5;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;min-width:0}
.util__item+.util__item::before{content:"";width:3px;height:3px;border-radius:50%;
  background:#7d6164;flex:0 0 auto;margin-right:11px}
.util b{color:#f4e9e7;font-weight:700}
.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 phone; the lot and the dose are on the pages that
     need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}

/* ---- hero: copy LEFT, the bottle RIGHT inside the orbit */
.hero{position:relative;padding:54px 0 62px;overflow-x:clip;overflow-y:visible}
.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(--blue-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--blue);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;font-weight:600;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px;min-width:0}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight:800}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:0.9062rem;font-weight:600;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 15px;border-radius:var(--chip);min-width:0;
}
.factpills li b{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:13px 15px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:2rem;font-weight:800;color:var(--deep);line-height:1}
.figures span{display:block;font-size:0.9062rem;font-weight:600;color:var(--ink-3);margin-top:5px}
/* the product stands inside the orbit with no opaque plate behind it, so the
   rings drawn on .hero__media are visible rather than covered */
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px}
.hero__card img{position:relative;z-index:3;width:100%;max-width:330px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 26px 44px rgba(34,48,61,.34))}
.hero__cap{margin:16px 0 0;font-size:.8125rem;font-weight:600;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;font-weight:600;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:800}

/* ---- 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(--blue-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)}

/* The hero motif that belongs here is WRITTEN BY A TOOL and must not be edited
   in place: `python _generators/hero_motifs.py thememovancepro.com --write`
   replaces everything between its own marker and CRITICAL-END, so a hand edit
   below this line survives until the next run and then disappears. The recipe
   and the reasoning for it live in hero_motifs.py under "recall-orbit". */


/* ---- hero motif -- recall-orbit ---------------------------------------- */
.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:radial-gradient(ellipse 120% 90% at 74% 30%,#f4eae7 0%,#efdfdb 46%,#e3d4d0 100%)}.hero__media::before{content:'';position:absolute;left:50%;top:44%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid rgba(27,142,192,0.40);background:radial-gradient(circle at 50% 0,rgba(27,142,192,0.68) 0 5px,transparent 6px);animation:mvOrbit 26s linear infinite,mvRecall 26s ease-in-out infinite;z-index:0;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:47%;width:128%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px dashed rgba(34,72,92,0.30);animation:mvOrbit 38s linear infinite reverse;z-index:0;pointer-events:none}@keyframes mvOrbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes mvRecall{0%,100%{opacity:1}46%{opacity:.46}}
@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:minmax(0,1fr);gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:34px 0 44px}
  .hero__card img{max-width:250px}
}
@media (min-width:981px){
  .hero__media{position:sticky; top:calc(var(--navh,112px) + 14px); align-self:start; min-height:calc(100vh - var(--navh,112px) - 28px); min-height:calc(100svh - var(--navh,112px) - 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, geometry. Inlined into every page head, so it is kept small
   and every rule is scoped to the home page: `body:has(.hero)` is true on
   index.html alone, and .hero__copy exists nowhere else.

   1. The buy button was at y=931 on a 900px screen -- the money page opened
      with nothing to click. The hero copy column is re-ordered on DESKTOP
      ONLY so the reading order is eyebrow, headline, the quick answer, the
      buttons, the payment line, then the evidence. The phone order is
      composed separately at <=980px with display:contents and is untouched.
   2. The pack ribbon becomes a full-width bar across the top of every pack
      card, so the head band has to give it its own room, and the card has to
      stop insetting its own children: .card--pack is also .card, so it was
      carrying .card's 24/22/22 padding on top of .pack__body's own 20px --
      the head band, which has a bottom border and a full-bleed background,
      floated 22px inside the card edge and the body content sat 42px in.
      Measured on the built page before touching it. All three cards carry a
      flag and take the same padding, so all three change by the same amount
      and the shared Add-To-Cart baseline is unchanged -- measured after at
      768/1024/1440/1920. */
@media (min-width:981px){
  /* 54px of air between the chip ribbon and the eyebrow buys nothing and
     costs the fold 14px at every desktop width. */
  .hero{padding-top:40px}
  .hero__copy>*{order:9}
  .hero__copy>.eyebrow{order:1}
  .hero__copy>h1{order:2}
  .hero__copy>.answer{order:3}
  .hero__copy>.hero__cta{order:4}
  .hero__copy>.hero__sub{order:5;margin-bottom:24px}
  .hero__copy>.hero__road{order:6}
  .hero__copy>.factpills{order:7}
  .hero__copy>.figures{order:8}
}
body:has(.hero) .pack__flag{left:0;right:0;text-align:center;padding:7px 14px;line-height:1.3}
body:has(.hero) .card--pack{padding:0}
body:has(.hero) .pack__head{padding:44px 20px 14px}
/* .pack__per is a <p>, so it was carrying the document's 1.05em bottom margin
   at a 3.4rem font size -- 57px of nothing between "$79" and "a bottle".
   Measured on the built page. */
body:has(.hero) .pack__per{margin-bottom:0}
body:has(.hero) .pack__perks li{padding-bottom:7px}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:64px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--dark);color:#e0cfcc}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#d3c0bd}
.sec--dark .eyebrow{color:#7fc9ea}
.sec--dark .eyebrow::before{border-color:#7fc9ea}
.sec--dark a{color:#8fd2ef}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 28px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#d3c0bd}

/* 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);font-weight:800}
.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);min-width:0}
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(--display);font-weight:800;color:#fff;background:var(--deep);font-size:1.08rem;letter-spacing:.02em;text-transform:uppercase}
tbody tr:nth-child(even){background:#fdf6f4}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--deep)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.steps>*{min-width:0}
.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);
  position:absolute;left:20px;top:19px;width:38px;height:38px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--blue-d));color:#fff;
  font-family:var(--display);font-weight:800;font-size:1.3rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: an orbit arc cut across the top-right corner */
.grid{display:grid;gap:18px}
.grid>*{min-width:0}
.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))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px 22px;overflow:hidden;min-width:0}
.card::before{
  content:"";position:absolute;right:-34px;top:-34px;width:86px;height:86px;
  border-radius:50%;border:3px solid var(--blue);opacity:.42;
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#372b2f;border-color:#50403f}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #bcdcec;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--deep)}
.callout p:last-child{margin:0}
.alert{background:#fbf1e4;border:1px solid #ecd9ba;border-left:4px 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;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.7rem;font-weight:600;line-height:1.24;color:var(--deep);border-left:4px solid var(--blue);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;font-weight:400;color:var(--ink-3);margin-top:10px}
.keypoints{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px}
.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}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. A
   .tablewrap holding a 520px-min table therefore keeps its column 520px wide
   however narrow the grid is, and `1fr` (= minmax(auto,1fr)) reintroduces that
   floor that the desktop minmax(0,1fr) avoids. Measured elsewhere at 390: the
   grid box was 350px and its single column resolved to 522px, so the right-hand
   half was clipped away by body{overflow-x:clip} with nothing to scroll and
   nothing to report. min-width:0 is the fix, and it belongs on the items at
   every width rather than only in the media query. */
.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.9rem;font-weight:800;color:#fff;line-height:1}
.stats div span{display:block;font-size:.9375rem;color:#cdb8b5;margin-top:6px}

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

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* Same family as the .split fix above. .inglist is a grid, .ingcard is a grid
   ITEM, and a grid item's default min-width is auto — so the card cannot shrink
   below its min-content. `.ing__dose` is white-space:nowrap and the longest of
   these labels is wide enough to set that floor on a phone. min-width:0 lets
   the card shrink; .ingcard__top already wraps, so the chip drops onto its own
   line and fits. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0;min-width:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3);min-width:0}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:700;color:#fff;background:var(--deep);padding:4px 14px;border-radius:var(--chip);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:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-lg);overflow:hidden;position:relative}
.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 deeper shadow, its coloured head
   band and its flag, so the lift bought nothing and cost the check. */
.card--pack.featured{border-color:var(--blue);box-shadow:var(--shadow-lg)}
/* padding-right reserves the corner tab's width. .pack__flag is absolutely
   positioned at the top right of the card with z-index 3, and the head band's
   supply figure is pushed to that same end by margin-left:auto, so without this
   the two occupy the same pixels and the flag paints over "60-day supply" on
   every flagged card. Both facts are wanted, so the band gives the tab room
   rather than dropping one of them. */
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:14px 112px 14px 20px;display:flex;align-items:center;gap:10px;min-width:0}
.card--pack.featured .pack__head{background:linear-gradient(100deg,var(--deep),var(--deep-2));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.5rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--blue);color:#fff;font-family:var(--text);font-size:0.8438rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius)}
.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:3.4rem;font-weight:800;color:var(--deep);line-height:.9;text-align:center}
.pack__per sup{font-size:1.2rem;font-weight:700;top:-1.1em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;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;flex-wrap:wrap}
.pack__tot b{font-weight:700}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:600}
.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);font-weight:800}
.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:.8125rem;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>*{min-width:0}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.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;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-size:1.02rem;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 minmax(0,1fr) 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--line);border-radius:var(--chip);overflow:hidden;min-width:0}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--deep))}
.stars{color:#c98a2b;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.36rem;line-height:1.2;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.34rem;font-weight:400;color:var(--blue-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. On another site that pushed a single <a> past the
   viewport on eleven pages — 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:4px solid var(--blue);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:linear-gradient(140deg,var(--deep),var(--deep-2));color:#fff;font-family:var(--display);font-weight:800;font-size:1.4rem;border-radius:50%}
.byline>div{min-width:0}
.byline b{display:block;margin-bottom:6px;color:var(--deep)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:0 0 var(--radius) var(--radius);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final--media>*{min-width:0}
.final__img img{width:180px}
.final h2{margin:0 0 10px}
.final__price{font-weight:600;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,transform .18s ease}
.rel a:hover{border-color:var(--blue);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.3rem;color:var(--deep);margin-bottom:5px;letter-spacing:.01em}
.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-weight:700;font-size:.9688rem;margin-bottom:6px}
.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;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 light guarantee band, then the DARK block whose upper edge is
   crossed by the seal rail. The rail is half on the light page and half on the
   dark block, which is the slot's whole idea — the compliance marks sit on the
   join rather than being filed at the bottom. */
.fcta{background:var(--panel);border-top:1px solid var(--line);padding:52px 0 76px}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__box>*{min-width:0}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.75rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--blue-d);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:2.3rem;font-weight:800;line-height:1.1;color:var(--deep);margin:0 0 10px;letter-spacing:.01em}
.fcta p{color:var(--ink-2)}
.fcta__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}
.fcta__img img{width:240px}

footer{background:var(--dark);color:#cdb8b5;padding-top:0}
.fseals{
  position:relative;z-index:2;margin-top:-44px;margin-bottom:34px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:16px 24px;
}
.fseals img{width:52px;height:52px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-2);min-width:0}
.fseals a{color:var(--blue-d)}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:26px;padding:0 0 32px}
.fgrid>*{min-width:0}
.fbrand{font-family:var(--display);font-size:2.4rem;font-weight:800;color:#fff;letter-spacing:.02em;line-height:.95;text-transform:uppercase}
.fbrand span{color:var(--blue)}
.frole{font-size:.9375rem;color:#bda6a3;margin:10px 0 14px}
.fcard p{font-size:1.062rem;color:#bda6a3;margin:0 0 .7em}
.fcard b{color:#f4e9e7}
.fcard a{color:#8fd2ef}
.fh{font-family:var(--text);font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#a78c89;margin:0 0 10px}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0}
.fgrid li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back
   (pitfall 82). */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.9688rem;color:#cdb8b5;text-decoration:none}
footer li a:hover{color:#8fd2ef}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 26px;border-top:1px solid #443437;padding-top:22px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:#a78c89;min-width:0}
.disc{background:var(--dark-2);border-top:1px solid #443437;padding:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:#bda6a3}
.disc b{color:#f4e9e7}
.disc a{color:#8fd2ef}
.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:.55em;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--blue)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid #443437;font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--dark-2);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:12px 22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#bda6a3}
.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){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:24px}
}
@media (max-width:980px){
  :root{--navh:104px}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .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}
  .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:minmax(0,1fr)}
  .fcta__img{display:none}
  .final--media{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:46px 0}
  .hero{padding:34px 0 44px}
  .hero__card img{max-width:250px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:minmax(0,1fr)}
  .prices{grid-template-columns:minmax(0,1fr)}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:minmax(0,1fr)}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:minmax(0,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 gets pushed to the right of a line with no room for it and overhangs
     the card edge. On a phone let it sit at the start of its own line and wrap
     its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:minmax(0,1fr);gap:8px}
  .fgrid{grid-template-columns:1fr 1fr;gap:22px}
  .fseals{margin-top:-36px;padding:14px 18px;gap:12px 16px}
  .fseals img{width:44px;height:44px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
  /* The ribbon keeps its own gutter when .wrap has surrendered its padding,
     so the first chip is never flush against the screen edge (pitfall 46's
     cousin: a bar whose first element measures padding-left:0 at 390). */
  .menu{padding-inline:16px;scroll-padding-inline:16px}
}
/* ---- the masthead row at phone widths.
   Measured in Chrome, not eyeballed: at 390 the row wanted 36px of mark + 12
   gap + a 210px wordmark + 18 gap + a 103px button = 379px inside a 346px
   content box, so `body{overflow-x:clip}` quietly cut 11px off the RIGHT of
   the Order button — the one control in the header. Nothing reported it: the
   document never grew, so no overflow test fired, and the button still looked
   like a button. At 360 it lost 41px.

   Big Shoulders Display is condensed, so the wordmark can give back a lot of
   width for very little apparent size; it scales with the viewport and the
   button trims its padding rather than either one being dropped. min-width:0
   on both flex items is what lets the row shrink at all — without it the
   brand's min-content width is the floor and the button is pushed out however
   small the type gets. */
@media (max-width:560px){
  .nav__top{gap:12px}
  .brand{gap:9px;min-width:0}
  .bw{min-width:0}
  /* 5.6vw reaches 1.9rem at 543px, so the wordmark arrives at its full desktop
     size just before this query stops applying and there is no step at 561. */
  .bw b{font-size:clamp(1.18rem,5.6vw,1.9rem)}
  .bw small{font-size:0.9062rem}
  /* nowrap is load-bearing, not tidiness: .btn is an inline-flex box with no
     white-space rule, so the first pass of this fix trimmed the padding and
     "Order Now" broke onto two lines inside a pill with a 999px radius -- a
     round blue blob in the masthead at 390. The button must keep one line and
     give back width through its padding instead. */
  .nav__buy{padding-inline:15px;font-size:.95rem;white-space:nowrap}
}
@media (max-width:440px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:minmax(0,1fr)}
}

/* ---- hero: the product breathes inside the orbit -------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted (hero.md).

   There is no opaque plate on this hero by design, so the bottle needs its own
   ground: a soft blue bloom behind it and an elliptical contact shadow beneath,
   both sized to the product rather than to the column. The two orbit rings are
   owned by the motif block above CRITICAL-END. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:46%;translate:-50% -50%;
  width:74%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(27,142,192,.26),transparent 70%);
  z-index:0;pointer-events:none;
}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:30px;translate:-50% 0;
  width:46%;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(34,48,61,.38),transparent 74%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  /* The float goes on the CARD, never on the <img>. The image is the LCP
     element and is preloaded; animating it is what hero.md rules out. */
  .hero__card{animation:mvFloat 9s ease-in-out infinite}
  @keyframes mvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}

/* ---- 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: nav heights run 66-112px across
   the estate and change when a bar compacts, and a hardcoded offset tucks the
   product under the bar on the taller ones. This header is two rows and a
   ribbon, so it is one of the tall ones.

   min-height makes the sticky box a full screen tall so the shot can be CENTRED
   inside it. Without it the box is only as tall as the image 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,112px) + 14px);
    align-self:start;
    min-height:calc(100vh - var(--navh,112px) - 28px);
    min-height:calc(100svh - var(--navh,112px) - 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 product shots are all 1125x1125 here,
   but the blurbs are different lengths, so without these three rules 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. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* ==== 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, paint. Slot: orbit motif, 20px cards, 14px controls, a
   two-stop depth (tight contact + wide ambient) tinted with this site's own
   ink rgba(42,29,31) and, on the blue surfaces, its own blue rgba(19,105,143).
   No geometry here: radius, shadow, background, colour, transition and
   animation move no box, so this block needs a restamp, not a rebuild.

   Every selector carries body:has(.hero) or .hero, which lifts it above
   modern_surface.py and footer_type.py -- both re-append their own blocks
   AFTER this one on every build, so this beats them on specificity and never
   on source order. */
:root{
  --mv-rc:20px;
  --mv-rb:14px;
  --mv-sh:0 1px 2px rgba(42,29,31,.07),0 10px 28px rgba(42,29,31,.10);
  --mv-sh-up:0 2px 4px rgba(42,29,31,.08),0 18px 44px rgba(42,29,31,.16);
  --mv-sh-cta:0 1px 2px rgba(19,105,143,.32),0 10px 28px rgba(19,105,143,.30);
  --mv-sh-cta-up:0 2px 4px rgba(19,105,143,.28),0 16px 38px rgba(19,105,143,.40);
  --mv-sh-pack:0 2px 6px rgba(19,105,143,.16),0 24px 54px rgba(19,105,143,.26);
}

/* -- surfaces: one curve, one depth language ---------------------------- */
body:has(.hero) .card,
body:has(.hero) .step,
body:has(.hero) .callout,
body:has(.hero) .ingcard,
body:has(.hero) .faq,
body:has(.hero) .tablewrap,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .keypoints,
body:has(.hero) .toc,
body:has(.hero) .byline,
body:has(.hero) .split__img,
body:has(.hero) .final,
body:has(.hero) .figures div{border-radius:var(--mv-rc);box-shadow:var(--mv-sh)}

/* The quick answer and the alert keep their flat accent edge: a 4px bar down
   the left of a box rounded on all four corners bends away from the text. */
body:has(.hero) .answer,
body:has(.hero) .alert{border-radius:0 var(--mv-rc) var(--mv-rc) 0;box-shadow:var(--mv-sh)}
body:has(.hero) .hero .answer{background:linear-gradient(180deg,#fff 0%,var(--panel) 100%)}

/* -- the pair of buttons: one gradient, one solid ----------------------- */
/* #main only. The masthead and the sticky buy bar are on all 31 pages and
   are not this pass's to restyle. */
body:has(.hero) #main .btn{
  border-radius:var(--mv-rb);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
body:has(.hero) #main .btn--cyan{
  background-image:linear-gradient(135deg,var(--blue) 0%,var(--blue-d) 54%,var(--deep) 100%);
  box-shadow:var(--mv-sh-cta);
}
/* the secondary reads as the lighter weight: solid, not a gradient */
body:has(.hero) #main .btn--ghost{
  background-color:var(--wash);
  box-shadow:inset 0 0 0 1px var(--line-2),var(--mv-sh);
}
body:has(.hero) #main .btn--ghost:hover{background-color:var(--wash);color:var(--deep-2)}
body:has(.hero) #main .btn:hover{transform:translateY(-2px)}
body:has(.hero) #main .btn--cyan:hover{box-shadow:var(--mv-sh-cta-up)}
body:has(.hero) #main .btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--blue),var(--mv-sh-up)}
body:has(.hero) #main .btn:active{transform:translateY(0)}
/* the global focus ring is var(--blue) on a var(--blue) button: invisible
   exactly where it is needed. */
body:has(.hero) #main .btn:focus-visible{outline:3px solid var(--deep);outline-offset:3px}

/* -- pack cards: a full-width ribbon, dashed feature rows ---------------- */
body:has(.hero) .card--pack{
  border-radius:var(--mv-rc);
  box-shadow:inset 0 0 0 1px var(--line),var(--mv-sh);
}
body:has(.hero) .card--pack.featured{box-shadow:inset 0 0 0 1px var(--blue),var(--mv-sh-pack)}
body:has(.hero) .card--pack:hover{box-shadow:inset 0 0 0 1px var(--line),var(--mv-sh-up);transform:translateY(-2px)}
body:has(.hero) .card--pack.featured:hover{box-shadow:inset 0 0 0 1px var(--blue),var(--mv-sh-up);transform:translateY(-2px)}
/* the ribbon. Dark navy on the two side packs, the label's own blue on the
   recommended one, so the row has a ranking rather than three identical tabs.
   White holds 9.2:1 on --deep and 6.0:1 on --blue-d. */
body:has(.hero) .pack__flag{
  background:var(--deep);border-radius:0;
  font-size:.8125rem;letter-spacing:.14em;
}
/* the recommended card's ribbon sits directly on its dark head band, so it
   carries the label's bright blue as a 2px underline rather than trying to
   separate itself by hue alone. White holds 6.0:1 on --blue-d; on --blue
   itself it is 3.66:1, which is why the bar is not painted in it. */
body:has(.hero) .card--pack.featured .pack__flag{
  background:var(--blue-d);box-shadow:inset 0 -2px 0 var(--blue);
}
body:has(.hero) .card--pack .pack__head{background:linear-gradient(180deg,var(--panel) 0%,var(--tint) 100%)}
body:has(.hero) .card--pack.featured .pack__head{background:linear-gradient(120deg,var(--deep) 0%,var(--deep-2) 100%)}
/* dashed rules between the feature rows, drawn as a background so no row
   changes height */
body:has(.hero) .pack__perks li{
  background-image:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 9px);
  background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%;
}
body:has(.hero) .pack__perks li:last-child{background-image:none}

/* -- the hero motif: orbit ---------------------------------------------- */
/* The slot is a thin ring with one bright arc travelling it, slowly. The site
   already orbits: .hero__media::before is a 784px ring carrying a bright bead,
   and ::after was a dashed 669px ring turning the other way. This replaces
   that second ring -- same element, same size, same containing block -- with
   the arc, and leaves the first ring alone.
   Why the ring is drawn as a conic gradient behind a radial mask rather than
   as a border: a border can only be one colour the whole way round, so the
   arc has to travel a ring that is itself painted. The mask keeps the outer
   1.5px of the box, which is the ring.
   It sits on a pseudo-element of the media column, never on the <img>: the
   bottle is the LCP element and is preloaded. 84s is one turn -- these are
   capsules taken daily for weeks. Sized at 128% of the media column, which is
   669px against a 350px product card, so it reads outside the product rather
   than behind it. */
body:has(.hero) .hero__media::after{
  border:0;
  background:conic-gradient(from 0deg,
    rgba(34,72,92,.22) 0 56%,
    rgba(27,142,192,.38) 63%,
    rgba(27,142,192,.95) 70%,
    rgba(255,255,255,.98) 72.5%,
    rgba(27,142,192,.95) 75%,
    rgba(27,142,192,.34) 83%,
    rgba(34,72,92,.22) 90% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));
  animation:mvArcRun 84s linear infinite;
}
@keyframes mvArcRun{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::after{animation:none}
  body:has(.hero) #main .btn,
  body:has(.hero) .card--pack{transition:none}
  body:has(.hero) #main .btn:hover,
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .card--pack.featured: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 li a{font-size:16px}
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fh{font-size:15px}
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 17 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 (42,29,31), 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(42,29,31,.06), 0 6px 18px rgba(42,29,31,.07);
  --lift:0 2px 6px rgba(42,29,31,.09), 0 16px 34px rgba(42,29,31,.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}