/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Barlow Fallback";src:local("Arial");font-weight:400;size-adjust:97.50%;ascent-override:102.56%;descent-override:20.51%;line-gap-override:0.00%}
@font-face{font-family:"Barlow Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:92.85%;ascent-override:107.70%;descent-override:21.54%;line-gap-override:0.00%}
@font-face{font-family:"Spectral Fallback";src:local("Georgia");font-weight:400;size-adjust:100.38%;ascent-override:105.49%;descent-override:46.12%;line-gap-override:0.00%}
@font-face{font-family:"Spectral Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:89.35%;ascent-override:118.53%;descent-override:51.82%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* govapofil.com — Vapofil, USA Authorized Vapofil Retailer.

   Design slot: row 83 of batch12_assignments.py.

     Type    Spectral / Barlow — an editorial serif over a narrow grotesque
     Layout  two columns at 6/6 on a full-bleed dark band, bottle RIGHT,
             headline and Quick Answer left (rule 12 C2, rewritten 21 Sep
             2026 -- the centred stack put the bottle at y=659 on a 900px
             screen); below it the page runs as one narrow column with
             full-bleed image bands breaking it
     Cards   one-edge rule — a 4px left bar in the accent on an otherwise
             bare dark card, radius 0
     Ground  deep charcoal, DARK-FIRST, one burnt-copper accent
     Depth   hard offset — a 6px solid displaced shadow in the accent, no blur
     Motion  flow / swell-hold — the swell holds at full for about a third of
             its cycle instead of crossing the column
     Mark    droplet / key
     Header  a charcoal bar with the wordmark centred and the ordering button
             as a full-height copper block at the right edge
     Footer  near-black, the seals inset along the top edge, the index in a
             single wide row beneath

   The sibling this is held apart from is horsewoodcare.com, same category and
   same batch: light, wide and horizontal where this one is dark, editorial and
   vertical. The separation was decided in the slot file and neither desk can
   react to the other afterwards, so nothing here drifts toward a pale ground,
   a landscape hero or a soft shadow.

   ON A DARK-FIRST SITE, CONTRAST IS THE THING THAT BREAKS FIRST.
   Every colour below was measured against the surface it actually lands on,
   walking up to the nearest NON-TRANSPARENT ancestor rather than assuming the
   nearest one. Two results shaped the ramp:

     --copper   #c4683c  4.64:1 on the page ground but only 4.23:1 on a card,
                         so it is a BAR and a RULE here, never running text
     --copper-l #e08a55  6.8:1 on the ground, 6.2:1 on a card — this is the
                         link, the eyebrow and every other piece of copper TEXT
     --copper-d #9d4e29  5.9:1 against white, so it is the button fill; the
                         lighter copper would have put button labels at 3.9:1

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

/* ---- tokens */
:root{
  --ink:#f0e9e1;            /* body text on charcoal */
  --ink-2:#c3b8ac;          /* secondary */
  --ink-3:#9c9083;          /* captions, meta — 5.8:1 on the ground */
  --copper:#c4683c;         /* the accent, as a bar or a rule */
  --copper-l:#e08a55;       /* the accent as TEXT */
  --copper-d:#9d4e29;       /* button fill under white */
  --copper-x:#7e3c1d;       /* the deep end, offset shadows and gradients */
  --dark:#171615;           /* the page: deep charcoal */
  --char-2:#201f1d;         /* the raised surface: cards, panels */
  --char-3:#2a2826;         /* the tinted band */
  --char-4:#0d0c0c;         /* near-black: the footer and the image bands */
  --on-dark:#f0e9e1;     /* the hero's own text colour, named so the shared
                            tools can tell this is a dark hero */
  --bone:#efe8df;           /* the one light plate, for white-ground artwork */
  --line:#39352f;
  --line-2:#4e4941;
  --good:#7fb894;
  --warn:#cfa257;
  --wrap:1180px;
  --measure:700px;          /* the narrow column the page runs in */
  --measure-wide:900px;
  --radius:0;               /* radius 0 everywhere: the slot's card rule */
  --radius-lg:0;
  --bar:4px;                /* the one-edge rule */
  --shadow:6px 6px 0 var(--copper);        /* hard offset, no blur */
  --shadow-lg:10px 10px 0 var(--copper-x);
  --navh:104px;
  --display:"Spectral","Spectral Fallback",Georgia,"Times New Roman",serif;
  --text:"Barlow","Barlow 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%;background:var(--dark)}
body{
  overflow-x:clip;background:var(--dark);color:var(--ink);
  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(--copper-l);text-underline-offset:3px}
a:hover{color:#f0a877}
/* Spectral is a true text serif with a tall x-height, so it carries a display
   role at a tighter line-height than a grotesque would want. */
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:700;line-height:1.16;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,1.3rem + 2.3vw,3.1rem);letter-spacing:-.012em}
h2{font-size:clamp(1.6rem,1.18rem + 1.5vw,2.3rem);letter-spacing:-.008em}
h3{font-size:1.32rem;font-weight:600;letter-spacing:-.004em}
h4{font-size:1.1rem;font-weight:600}
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(--copper-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--copper-l);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:.8125rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--copper-l);
  margin:0 0 12px;
}
.eyebrow::before{content:"";width:26px;height:var(--bar);background:var(--copper);flex:0 0 auto}

/* ---- buttons. Square, heavy, and displaced rather than lifted. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 30px;
  font-family:var(--text);font-size:1.02rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;
  border:0;border-radius:0;cursor:pointer;text-decoration:none;
  background:var(--char-3);color:var(--ink);
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease;
}
.btn:hover{color:#fff}
.btn--cop{background:linear-gradient(180deg,#b3572e,var(--copper-x));color:#fff;box-shadow:var(--shadow-lg)}
.btn--cop:hover{background:linear-gradient(180deg,#b45e33,#8e4523);box-shadow:4px 4px 0 var(--copper-x);transform:translate(2px,2px)}
.btn--dark{background:var(--char-4);color:var(--ink)}
.btn--lg{min-height:62px;padding:18px 36px;font-size:1.1rem}
.btn--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{box-shadow:inset 0 0 0 2px var(--copper);color:var(--copper-l)}
.btn--wide{width:100%}

/* ---- topline strip: the five facts a buyer wants before reading anything.
   Above the header, so the navigation does not have to carry them. Its CSS is
   above CRITICAL-END because it is the first thing painted. */
.util{background:var(--char-4);color:var(--ink-3);font-size:.8125rem;line-height:1.5;
  border-bottom:1px solid var(--line)}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:9px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.util__item+.util__item::before{content:"";width:1px;height:12px;background:var(--line-2);
  flex:0 0 auto;margin-right:11px}
.util b{color:var(--ink);font-weight:600}
.util a{color:var(--copper-l);text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:980px){
  /* Five items wrap to two lines at 768 and three at 390, which eats 85px of
     the first screen. Keep the role, the 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}
}

/* ---- header: the wordmark sits on the centre line of a charcoal bar and the
   ordering button is a full-height copper block welded to the right edge. The
   destinations take a second row beneath, divided by a copper hairline, so the
   bar reads as a product header rather than a list of links. */
.nav{position:sticky;top:0;z-index:100;background:var(--dark);
  box-shadow:0 1px 0 var(--line),0 14px 28px rgba(0,0,0,.42)}
.nav__top{position:relative}
/* 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__topin{display:flex;align-items:center;justify-content:center;padding-block:11px;min-height:66px}
.brand{
  display:inline-flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);
  text-align:left;
}
.brand__glyph{width:42px;height:42px;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 always carry the class onto the
   replacement, so a rule keyed only to .brand__glyph stops applying the moment
   the tool runs and the glyph renders at its intrinsic size (pitfall 16). */
.brand>svg{width:42px;height:42px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.08;min-width:0}
.bw b{font-family:var(--display);font-size:1.7rem;font-weight:700;letter-spacing:.01em}
.bw b em{font-style:normal;color:var(--copper-l)}
.bw small{font-size:.75rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.nav__buy{
  position:absolute;right:0;top:0;bottom:0;z-index:4;
  display:flex;align-items:center;min-height:0;border-radius:0;box-shadow:none;
  padding:0 clamp(16px,2.4vw,32px);font-size:.9375rem;letter-spacing:.09em;
}
.nav__buy:hover{transform:none;box-shadow:none}
.nav__bar{border-top:1px solid var(--line);background:var(--char-4)}
.menu{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 26px;list-style:none;
  margin:0;padding:0;align-items:center;min-width:0;
}
.menu a{
  display:inline-block;padding:9px 0;font-family:var(--text);
  font-size:.9688rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;border-bottom:var(--bar) solid transparent;
}
.menu a:hover{color:var(--copper-l)}
.menu a[aria-current="page"]{color:var(--copper-l);border-bottom-color:var(--copper)}
.menu__more{display:none}
.burger{
  position:absolute;left:18px;top:50%;translate:0 -50%;z-index:5;
  display:none;width:48px;height:44px;background:transparent;border:1px solid var(--line-2);
  border-radius:0;cursor:pointer;padding:11px 10px;
}
.burger span{display:block;height:2px;background:var(--ink);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: one full-width dark field. Below 981px the headline stacks over
   the bottle; at 981px and up they stand side by side (rule 12 C2).
   The H1 comes first in the source so it is above the fold at 1440x900 —
   a centred stacked hero once buried a headline at y=796 (pitfall 86). */
.hero{position:relative;background:var(--dark);color:var(--on-dark);
  padding:24px 0 10px;overflow-x:clip;overflow-y:visible}
/* ONE COLUMN, and the visual order is set with `order` rather than by the
   source, so the bottle can sit under the CTA while the fact blocks sit under
   the bottle. Measured at 1440x900 before this: the media column started at
   y=1205, which put the product AND its motif entirely below the fold on the
   one screen most visitors ever see. `.hero__copy{display:contents}` promotes
   its children to flex items of .hero__grid so they can be ordered against
   .hero__media, which is their sibling rather than their child.

   This is the PHONE AND TABLET hero. At 981px and up it becomes two columns
   -- see the desktop block below. */
.hero__grid{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:0}
.hero__copy{display:contents}
.hero .eyebrow{order:1;margin-bottom:10px}
.hero h1{order:2;margin:0 0 14px;max-width:30ch;letter-spacing:-.018em}
.hero h1 em{font-style:normal;color:var(--copper-l)}
.answer{
  background:var(--char-2);border:0;border-left:var(--bar) solid var(--copper);
  border-radius:0;padding:16px 24px;margin:0 0 14px;text-align:left;
  box-shadow:var(--shadow);max-width:var(--measure);width:100%;
}
.hero .answer{order:3;max-width:var(--measure-wide)}
.answer p{margin:0 0 .75em;font-size:1.06rem;font-family:var(--display)}
.answer p:last-child{margin:0}
.hero__road{order:6;font-size:1rem;color:var(--ink-2);margin:0 0 18px;max-width:62ch}
.hero__cta{order:4;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:0 0 16px}
.hero__sub{order:7;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  margin:0 0 18px;font-size:.925rem;font-weight:500;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight:700}
.factpills{order:8;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  list-style:none;margin:0 0 20px;padding:0}
.factpills li{
  font-size:.875rem;font-weight:500;color:var(--ink-2);background:var(--char-2);
  border:1px solid var(--line);padding:7px 15px;border-radius:0;
}
.factpills li b{color:var(--copper-l);font-weight:700}
.figures{order:9;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin:0 0 6px;width:100%;max-width:var(--measure-wide)}
.figures div{background:var(--char-2);border-left:var(--bar) solid var(--copper);
  padding:14px 17px;border-radius:0;min-width:0;text-align:left}
.figures b{display:block;font-family:var(--display);font-size:1.78rem;font-weight:700;color:var(--ink);line-height:1.05}
.figures span{display:block;font-size:.8125rem;font-weight:500;color:var(--ink-3);margin-top:4px}
/* The media column is WIDER than the plate on purpose. The swell-hold motif is
   sized against .hero__media — 132% for the swell and 78% for the ring — and
   .hero__card is opaque, so a plate that filled the column would hide the only
   part of the motif a screenshot can see. */
.hero__media{order:5;position:relative;width:100%;max-width:680px;margin:0 auto 24px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.hero__card{
  position:relative;z-index:2;text-align:center;padding:14px 18px 12px;width:100%;max-width:400px;
  background:var(--char-2);border:1px solid var(--line);border-radius:0;
  box-shadow:var(--shadow-lg);
}
.hero__card img{width:100%;max-width:330px;height:auto;margin-inline:auto}
.hero__cap{margin:12px 0 0;font-size:.8125rem;font-weight:500;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:0;padding:0;
  list-style:none;font-size:.875rem;font-weight:500;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:700}

/* ---- inner page head */
.phead{padding:34px 0 14px;background:var(--char-2);border-bottom:var(--bar) solid var(--copper)}
.crumbs{font-size:.875rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--copper-l)}
.phead h1{margin:0 0 18px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide);background:var(--char-3)}
.lead{font-size:1.16rem;font-family:var(--display);color:var(--ink-2);max-width:var(--measure)}

/* ---- hero, desktop: TWO COLUMNS (rule 12 C2, 21 Sep 2026). The slot now
   reads "6/6 on a full-bleed dark band, bottle RIGHT, headline and Quick
   Answer left". The centred stack put the product at y=659 on a 900px screen;
   side by side, the reader sees the bottle and the claim at the same time.

   .hero__copy stops being display:contents here and becomes a flex column of
   its own, so the `order` values above still hold INSIDE it -- the CTA pair
   stays directly under the Quick Answer rather than falling below the road.

   The grid declaration is what tells hero_sticky.py this hero is two-column;
   it then appends the sticky, vertically centred product column at 981px,
   which is why this query uses the same breakpoint.

   The motif's pseudo-elements take a height of 100% + 30px from the trace
   block, which in a full-screen sticky column stretches the swell and the
   ring into tall ovals. height:auto hands the shape back to the swell-hold's
   own aspect-ratio. And the swell-hold offsets them twice -- `translate:
   -50% -50%` AND a keyframed transform:translate(-50%,-50%) -- which put the
   glow's centre at x=662 in the gutter, 356px left of the bottle, with its
   rim crossing the headline column. translate:none (what the trace block
   intended, and lost to the later rule) centres both on the plate. Written
   at (0,2,1) so it holds wherever hero_motifs.py re-inserts its block. */
@media (min-width:981px){
  .hero{padding:40px 0 38px}
  .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:56px;align-items:start;text-align:left}
  .hero__copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
  .hero__media{grid-column:2;grid-row:1;min-width:0;max-width:none;margin:0}
  .hero h1{max-width:none;font-size:clamp(2.2rem,.9rem + 1.9vw,2.7rem)}
  .hero .answer{max-width:none}
  .hero__cta,.hero__sub,.factpills{justify-content:flex-start}
  .figures{max-width:none}
  .hero__card{max-width:480px}
  .hero__card img{max-width:420px}
  .hero .hero__media::before,.hero .hero__media::after{height:auto}
}

/* --- hero responsive rules
   Copied above CRITICAL-END by critical_hero.py so a phone does not paint the
   desktop hero and then relay it. Below 981px the hero is a single column and
   the visual order is set with `order`; what changes here is the rhythm. */
@media (max-width:980px){
  .hero{padding:22px 0 8px}
  .hero h1{max-width:24ch}
  .hero__media{max-width:520px;margin-bottom:20px}
}
@media (max-width:760px){
  .hero{padding:18px 0 6px}
  .hero__card{max-width:320px}
  .hero__media{max-width:100%}
  .hero__road{font-size:.9688rem}
  /* The ordering pair stacks into two full-width blocks on a phone and put the
     bottle a whole screen below the headline. The shot comes first there. */
  .hero__media{order:4}
  .hero__cta{order:5}
}

/*!SITE-HOME-CRIT-START*/
/* ---- home page, above the marker: the two things here that are NOT paint.

   1. the hero motif. This site serves style.css with rel=preload + onload,
      so the stylesheet is NOT render blocking and the inlined critical copy
      paints first. A motif written below the marker would show the old
      swell-hold for a frame and then swap. It belongs up here, where the
      one it replaces already lived.
   2. the raised recommended tier and the room under each perk row: margin
      and padding move boxes, so they are rebuilt into every page rather
      than restamped.

   MOTIF -- slot family "trace": a single line traces the silhouette of the
   product plate and releases outward. Both stops are pseudo elements of
   .hero__media, never the <img> (it is the preloaded LCP element).

   SIZE. Measured at 1440x900 first: .hero__media and .hero__card are the
   same box, 400x393, and the hero is packed hard vertically -- the CTA row
   ends at y=628 and the plate starts at y=644. So the shape is grown
   SIDEWAYS, where the 680px column leaves 140px of air on each side, and
   only 15px top and bottom. width/height are written against the plate
   itself (calc(100% + n)) so the shape stays outside it at 1440, 980 and
   390 without a breakpoint doing the arithmetic.

   Every property the swell-hold rule set is re-declared here -- translate,
   filter, aspect-ratio, border, background -- because the old rule is still
   above this one and anything left out survives it. */
.hero__media::before{
  content:'';position:absolute;left:50%;top:50%;
  width:min(700px,calc(100% + 44px));height:calc(100% + 30px);aspect-ratio:auto;
  translate:none;transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;filter:none;
  border:1px solid rgba(224,138,85,.30);border-radius:40px;
  background:radial-gradient(58% 64% at 50% 50%,rgba(224,138,85,.20),rgba(224,138,85,0) 74%);
  animation:gvpSilhouette 27s ease-in-out infinite;
}
.hero__media::after{
  content:'';position:absolute;left:50%;top:50%;
  width:min(700px,calc(100% + 44px));height:calc(100% + 30px);aspect-ratio:auto;
  translate:none;transform:translate(-50%,-50%) scale(.965);
  z-index:1;pointer-events:none;filter:none;opacity:0;
  border:1.5px solid rgba(240,233,225,.88);border-radius:40px;background:none;
  -webkit-mask:linear-gradient(104deg,#000 0 24%,rgba(0,0,0,.42) 47%,transparent 70%);
  mask:linear-gradient(104deg,#000 0 24%,rgba(0,0,0,.42) 47%,transparent 70%);
  animation:gvpRelease 21s cubic-bezier(.32,0,.18,1) infinite;
}
/* transform and opacity only, and slow: this is a capsule taken twice a day
   for three months, not an energy drink. */
@keyframes gvpSilhouette{0%,100%{opacity:.45}46%{opacity:.92}}
@keyframes gvpRelease{
  0%{transform:translate(-50%,-50%) scale(.965);opacity:0}
  13%{opacity:.85}
  48%{transform:translate(-50%,-50%) scale(1.022);opacity:.46}
  72%,100%{transform:translate(-50%,-50%) scale(1.05);opacity:0}
}
/* the released line passes the CTA row at its widest, so the buttons get a
   stacking order of their own. No offsets: this moves no box. */
.hero__cta{position:relative;z-index:3}
/* the rule above this one is `animation:none!important;opacity:0!important`,
   so the static state has to be important to be reached at all. */
@media (prefers-reduced-motion:reduce){
  .hero__media::before{animation:none!important;opacity:.7!important}
  .hero__media::after{animation:none!important;opacity:.38!important;transform:translate(-50%,-50%) scale(1)}
}

/* ---- recommended tier, raised by growing UPWARD.
   .prices is align-items:stretch and every Add To Cart is pinned with
   margin-top:auto, so a negative margin-top lifts the card's TOP edge and
   leaves its bottom, and its button, on the shared baseline. transform is
   not available here: the reveal pass sets transform:none. Desktop only --
   below 980 the grid is one column and the tier is re-ordered first. */
@media (min-width:981px){
  body:has(.hero) #pricing .card--pack.featured{margin-top:-20px}
}
/* air under each perk row for the dashed rule that the paint block draws */
body:has(.hero) #pricing .pack__perks li{padding-bottom:8px}
body:has(.hero) #pricing .pack__perks li:last-child{padding-bottom:0}
/*!SITE-HOME-CRIT-END*/

/* --- 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 (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 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 --- */

/* ---- hero motif -- swell-hold ---------------------------------------- */
.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(168deg,#171615,#3b2b21 46%,#171615)}.hero__media::before{content:'';position:absolute;left:50%;top:54%;width:132%;aspect-ratio:1.5;translate:-50% -50%;z-index:0;pointer-events:none;border-radius:50%;filter:blur(16px);background:radial-gradient(closest-side,rgba(224,138,85,0.44),transparent 68%);animation:gvpSwell 11s cubic-bezier(.22,.9,.3,1) infinite}.hero__media::after{content:'';position:absolute;left:50%;top:54%;width:78%;aspect-ratio:1;translate:-50% -50%;z-index:1;pointer-events:none;border-radius:50%;border:1px solid rgba(224,138,85,0.36);animation:gvpHold 11s cubic-bezier(.22,.9,.3,1) infinite}@keyframes gvpSwell{0%,100%{transform:scale(.72);opacity:.16}34%,64%{transform:scale(1.06);opacity:.66}}@keyframes gvpHold{0%{transform:scale(.86);opacity:0}30%,66%{transform:scale(1.14);opacity:.5}100%{transform:scale(1.3);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/
/* ---- sections. The page runs as ONE NARROW COLUMN. Reading matter is held to
   --measure at every width above the phone, not only on the widest screens,
   and the components that need room take --measure-wide. Image bands break the
   column by going full-bleed. */
.sec{padding:62px 0;position:relative}
.sec--tint{background:var(--char-2)}
.sec--panel{background:var(--char-3)}
.sec--dark{background:var(--char-4)}
.sec--band{background:var(--char-4);color:var(--ink);padding:0 0 26px;overflow:hidden}
.sec--band .wrap{max-width:none;padding-inline:0}
/* object-position is ABOVE centre on purpose: the lifestyle band is a 1:1
   master cropped to a 520px strip, and a centred crop cut the subject's head
   off and left a torso in a leather jacket. */
.sec--band img{width:100%;height:auto;max-height:520px;object-fit:cover;
  object-position:center 22%}
.band__cap{max-width:var(--measure);margin:20px auto 0;padding-inline:22px;
  font-size:.9375rem;color:var(--ink-3);text-align:center}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 30px;position:relative}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}

@media (min-width:900px){
  .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,.sec>.wrap>.keypoints{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps,.sec>.wrap>.inglist,
  .sec>.wrap>.versus,.sec>.wrap>.meter{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:700}

/* ---- tables. The wrapper scrolls; the item that HOLDS it needs min-width:0
   or a 540px table sets its grid column's floor and the phone loses the right
   half of the block with nothing to scroll (pitfall 79). */
.tablewrap{overflow-x:auto;min-width:0;margin:0 0 1.3em;border:1px solid var(--line);
  border-left:var(--bar) solid var(--copper);border-radius:0;background:var(--char-2)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:13px 17px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--text);font-weight:600;font-size:.875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);background:var(--char-4)}
tbody tr:nth-child(even){background:var(--char-3)}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--copper-l)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.5em 0 1.3em}

/* ---- numbered steps */
.steps{display:grid;gap:0;margin:0 0 1.3em;counter-reset:s;border-top:1px solid var(--line)}
.step{position:relative;min-width:0;background:none;border-bottom:1px solid var(--line);
  padding:22px 0 22px 74px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:22px;width:48px;height:48px;
  display:grid;place-items:center;
  background:var(--char-2);border-left:var(--bar) solid var(--copper);color:var(--copper-l);
  font-family:var(--display);font-weight:700;font-size:1.34rem;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: the one-edge rule. A 4px copper bar on the left of an otherwise
   bare dark card, radius 0, no outline and no lift. */
.grid{display:grid;gap:20px}
.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))}
/* Every grid item can hold a table or a nowrap chip, and a grid item's default
   min-width is auto, which floors at MIN-CONTENT. Without this the column is
   sized by the widest unbreakable thing inside it and refuses to shrink. */
.grid>*{min-width:0}
.card{position:relative;background:var(--char-2);border:0;border-left:var(--bar) solid var(--copper);
  border-radius:0;padding:22px 24px 20px;min-width:0}
.card h3{margin:0 0 8px;color:var(--ink)}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--tint .card{background:var(--char-3)}
.sec--panel .card,.sec--dark .card{background:var(--char-2)}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--char-2);border:0;border-left:var(--bar) solid var(--copper);
  border-radius:0;padding:20px 24px;margin:0 0 1.3em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--copper-l)}
.callout p:last-child{margin:0}
.alert{background:var(--char-2);border:0;border-left:var(--bar) solid var(--warn);
  border-radius:0;padding:20px 24px;margin:0 0 1.3em}
.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.5rem;font-weight:400;font-style:italic;
  line-height:1.44;color:var(--ink);border-left:var(--bar) solid var(--copper);
  padding:6px 0 6px 24px;margin:0 0 1.3em}
.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(--char-2);border:0;border-left:var(--bar) solid var(--copper);
  border-radius:0;padding:22px 24px;margin:0 0 1.3em;box-shadow:var(--shadow)}
.keypoints>b{display:block;margin-bottom:8px;color:var(--ink)}
.keypoints ul{margin:0;padding-left:20px}
.keypoints li{color:var(--ink-2)}

/* ---- image beside copy */
/* A .split is a pair: the picture and the paragraph that belongs to it start
   on the same line. Centring them left the first line of copy 151-254px below the top of
   its own image (measured on this site at 1440), so the copy floated in the
   middle of the column with dead air above and below it and stopped reading as
   part of the picture beside it. Nothing overlaps and nothing overflows, which
   is why no checker has ever seen it. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start;margin:0 0 1.3em}
.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. min-width:0 is the fix and it belongs on the
   items at every width, not only inside the breakpoint. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:0;border-radius:0;background:var(--char-4);
  box-shadow:var(--shadow)}
.split__body p:last-child{margin:0}
/* The artwork is sized by the artwork, not by half the wrap. Filled to its
   own column these square and portrait shots stand two to five times the
   height of the two or three paragraphs beside them, and no alignment rescues
   a pair that far out of proportion.

   The cap is on the PLATE, never the image (rule 12 D). The old form here was
   `img{max-height:420px;width:auto}`, and author width:auto beats the width
   attribute's hint, so a lazy image still in flight has no intrinsic size and
   Chromium computes it at 0x0 -- a 100-200px jump per block as each one lands.
   blocks.split() stamps --imgw = round(420 * w / h) from the file's own
   dimensions: a square comes out 420 wide, a portrait narrower, and a wide
   panel shot resolves to the full column. width:100% on the plate is
   load-bearing beside margin-inline:auto -- without it a grid item with auto
   margins sizes to fit-content and a pending image shrinks it to nothing.
   Desktop only: below the stacking breakpoint the picture fills the phone. */
@media (min-width:761px){
  .split__img{width:100%;max-width:min(100%,var(--imgw,100%));margin-inline:auto}
  .split--band .split__img{max-width:100%}
}
.split__img img{height:auto}


/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;text-align:left;
  border-top:1px solid var(--line-2)}
.stats>div{min-width:0;padding:22px 20px;border-bottom:1px solid var(--line-2);
  border-left:1px solid var(--line-2)}
.stats>div:first-child{border-left:0}
.stats div b{display:block;font-family:var(--display);font-size:2.6rem;font-weight:700;
  color:var(--copper-l);line-height:1.02}
.stats div span{display:block;font-size:.9375rem;color:var(--ink-2);margin-top:6px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr 1fr 1.3fr;border:1px solid var(--line);
  border-radius:0;overflow:hidden;background:var(--char-2);margin:0 0 1.3em}
.versus>div{padding:14px 17px;border-bottom:1px solid var(--line);font-size:.98rem;min-width:0;
  color:var(--ink-2)}
.versus>div:nth-child(3n+1){font-weight:500;background:var(--char-3);color:var(--ink)}
.versus__h{background:var(--char-4)!important;color:var(--ink)!important;font-family:var(--text);
  font-weight:600;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase}

/* ---- ingredient cards */
.inglist{display:grid;gap:20px}
/* Same family as the .split fix. `.ing__dose` is white-space:nowrap, so on a
   phone it sets the card's min-content and the card refuses to shrink below
   it. 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(--char-2);border:0;border-left:var(--bar) solid var(--copper);
  border-radius:0;padding:24px 26px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 12px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;font-family:var(--display);color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.875rem;font-weight:600;letter-spacing:.06em;color:#fff;
  background:var(--copper-d);padding:5px 13px;border-radius:0;white-space:nowrap}
.ingcard p:last-child{margin:0}
/* The ingredient photograph is a plate inside the card, not the card itself.
   At the full 900px measure each one rendered ~790px tall and the seven cards
   read as a photo gallery with captions rather than as a formula. */
.ingcard figure{margin:0 0 16px;max-width:440px}
.ingcard figure img{width:100%;border-radius:0;border:0}
.ingcard figure figcaption{font-size:.875rem;color:var(--ink-3);margin-top:8px}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch;margin:0 0 22px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--char-2);border:1px solid var(--line);
  border-left:var(--bar) solid var(--line-2);border-radius:0;overflow:visible;position:relative;padding:0}
.card--pack.featured{border-left-color:var(--copper);box-shadow:var(--shadow)}
/* The head stacks rather than ranging the supply line to the right edge.
   pack_cta.py pins .pack__flag into the card's top-right corner at z-index 3,
   and on the two flagged cards that ribbon printed over the top half of
   "90-day supply" and "180-day supply": the flag ran y1-32 inside the card and
   the words sat at y23-45, so nine pixels of a 22px line were painted out and
   only the lower half of the letters showed. Stacking puts both lines on the
   left, clear of the ribbon, and keeps all three heads one height so the pack
   buttons stay on a single baseline. */
.pack__head{background:var(--char-4);border-bottom:1px solid var(--line);padding:13px 20px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.card--pack.featured .pack__head{background:linear-gradient(180deg,#b3572e,var(--copper-x))}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.3rem;font-weight:700}
.pack__head span{font-size:.8125rem;font-weight:500;color:var(--ink-3)}
.pack__flag{position:absolute;right:0;top:0;background:var(--copper-d);color:#fff;
  font-family:var(--text);font-size:.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0}
.pack__body{display:flex;flex-direction:column;flex:1;padding:22px 20px 24px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;
  margin-inline:auto;margin-bottom:16px}
.pack__per{font-family:var(--display);font-size:3rem;font-weight:700;color:var(--ink);line-height:1;text-align:center}
.pack__per sup{font-size:1.15rem;font-weight:700;top:-.72em;color:var(--copper-l)}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:500;color:var(--ink-3);margin:6px 0 14px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 16px;font-size:1rem}
.pack__tot b{font-weight:700;color:var(--ink)}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:400}
.pack__perks{list-style:none;margin:0 0 20px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 7px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:14px 0 0;
  font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0;
  max-width:var(--measure-wide);margin-inline:auto}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0 0 1.3em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots.s1{grid-template-columns:minmax(0,1fr)}
.shots>*{min-width:0}
.shots figure{margin:0;background:var(--char-2);border:0;border-left:var(--bar) solid var(--copper);
  border-radius:0;overflow:hidden}
.shots img{width:100%}
/* Several vendor files are artwork on a WHITE ground — the three-jar
   comparison shot, the press marks, most of the seals. On a charcoal card a
   white rectangle is the loudest thing in the section, so those figures get a
   bone plate of their own and the rest sit straight on the card. */
.shots img.onbone{background:var(--bone);padding:18px}
.shots img.onink{background:var(--char-4);padding:18px}
.shots figcaption{padding:17px 19px}
.shots figcaption b{display:block;margin-bottom:6px;color:var(--copper-l)}
.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:20px;margin:0 0 1.3em}
.badgewall>*{min-width:0}
.badgewall figure{margin:0;text-align:center;background:var(--char-2);border:0;
  border-top:var(--bar) solid var(--copper);border-radius:0;padding:20px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 12px;
  background:var(--bone);padding:5px}
.badgewall b{display:block;font-family:var(--display);font-size:1.06rem;margin-bottom:5px;color:var(--ink)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.3em}
.meter__row{display:grid;grid-template-columns:76px minmax(0,1fr) 52px;gap:14px;align-items:center;
  margin:0 0 9px;font-size:.9375rem;color:var(--ink-2)}
.meter__bar{height:10px;background:var(--char-3);border-radius:0;overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--copper)}
.stars{color:#d9a441;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

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

/* ---- references and byline */
.refs{margin:0 0 1.3em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:.9375rem;color:var(--ink-2);margin:0 0 .7em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token. `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:20px;background:var(--char-2);border:0;
  border-left:var(--bar) solid var(--copper);border-radius:0;padding:24px 26px;margin:0 0 1.3em;
  box-shadow:var(--shadow)}
.byline__mark{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;
  background:var(--copper-x);color:#fff;font-family:var(--display);font-weight:700;
  font-size:1.34rem;border-radius:0}
.byline>div{min-width:0}
.byline b{display:block;margin-bottom:6px;color:var(--ink)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--char-2);border:0;border-left:var(--bar) solid var(--copper);
  border-radius:0;padding:30px 32px;box-shadow:var(--shadow)}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final__img img{width:200px}
.final__body{min-width:0}
.final h2{margin:0 0 10px}
.final__price{font-weight:500;color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:14px 0 0}

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

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

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

/* ---- footer: near-black, the seals INSET along the top edge and straddling
   the band above it, the index in one wide row beneath, then the contact card
   and the legal rail. */
.fcta{background:var(--char-2);border-top:var(--bar) solid var(--copper);color:var(--ink);padding:56px 0}
.fcta h2,.fcta__h{color:var(--ink)}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center}
.fcta__txt{min-width:0}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.8125rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--copper-l);margin-bottom:10px}
.fcta__h{font-family:var(--display);font-size:2rem;font-weight:700;line-height:1.18;margin:0 0 12px}
.fcta p{color:var(--ink-2)}
.fcta__sm{font-size:.9375rem;color:var(--ink-3);margin:14px 0 0}
.fcta__img img{width:270px}
footer{background:var(--char-4)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  background:var(--char-2);border:1px solid var(--line);border-top:var(--bar) solid var(--copper);
  padding:20px 24px;margin:-34px 0 34px;box-shadow:var(--shadow-lg);position:relative;z-index:2}
.fseals img{width:46px;height:46px;object-fit:contain;background:var(--bone);padding:3px}
.fseals span{font-size:.9375rem;color:var(--ink-2)}
.findex{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 30px;min-width:0;
  padding:0 0 34px;border-bottom:1px solid var(--line)}
.findex>*{min-width:0}
.fh{font-family:var(--text);font-size:.875rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--copper-l);margin:0 0 12px}
.findex ul{list-style:none;margin:0 0 18px;padding:0}
.findex 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:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--copper-l)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px;padding:32px 0 30px}
.fcard{min-width:0;background:none;border:0;border-left:var(--bar) solid var(--copper);
  border-radius:0;padding:4px 0 4px 22px}
.fmark{width:210px;height:auto;background:var(--bone);border-radius:0;padding:12px 16px;margin:0 0 16px}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 16px}
.fcard p{font-size:.9375rem;color:var(--ink-2);margin:0 0 .8em}
.fcard b{color:var(--ink)}
.fpay{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.fpay img{width:230px;height:auto;background:var(--bone);padding:8px}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--dark);border-top:1px solid var(--line);padding:30px 0 34px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--ink)}
.disc__list{columns:2;column-gap:40px;list-style:none;margin:16px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 10px;padding-left:18px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.75em;width:10px;height:2px;background:var(--copper)}
.copy{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:.9375rem}

/* ---- sticky buy bar. Declared at the TOP LEVEL with display:flex so it
   exists on desktop: a site that hid it outside a phone query had the
   direction classes landing correctly on an element that never rendered. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;
  background:var(--char-4);color:var(--ink);border-top:var(--bar) solid var(--copper);
  transform:translateY(105%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:20px;width:100%;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:1.08rem;font-family:var(--display);font-weight:700}
.buybar__t span{color:var(--ink-3)}
.buybar .btn{margin-left:auto;flex:0 0 auto;box-shadow:none}
.buybar .btn:hover{transform:none;box-shadow:none}

/* ---- 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:1180px){
  .menu{gap:0 20px}
  .menu a{font-size:.9375rem}
  .nav__topin{padding-inline:clamp(80px,14vw,150px)}
}
@media (max-width:980px){
  :root{--navh:96px}
  .nav__bar .wrap{position:relative}
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;z-index:60;
    background:var(--char-2);border:1px solid var(--line-2);
    border-top:var(--bar) solid var(--copper);
    border-radius:0;padding:4px 20px 12px;box-shadow:0 22px 40px rgba(0,0,0,.6);
  }
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:13px 0;border-bottom:1px solid var(--line);text-align:left}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .burger{display:block}
  .nav__bar{min-height:12px}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats>div:nth-child(odd){border-left:0}
  .findex{grid-template-columns:repeat(3,minmax(0,1fr))}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .fgrid{grid-template-columns:1fr;gap:28px}
  .final--media{grid-template-columns:1fr;gap:22px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:46px 0}
  .nav__topin{padding-inline:76px;min-height:64px}
  .bw b{font-size:1.36rem}
  .bw small{font-size:.6875rem}
  .nav__buy{padding:0 14px;font-size:.8125rem;letter-spacing:.05em}
  .brand__glyph,.brand>svg{width:34px;height:34px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2,.shots.s1{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 gets 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. */
  .ing__dose{margin-left:0;white-space:normal}
  .step{padding:18px 0 18px 62px}
  .step::before{width:42px;height:42px;top:18px;font-size:1.2rem}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:10px}
  .findex{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fseals{margin-top:-26px;padding:16px 18px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:460px){
  /* The role line wraps to two rows inside a centred wordmark at 390 and makes
     the identity look crowded. It is already the FIRST item in the topline
     strip directly above, so nothing is lost by dropping it here. */
  .bw small{display:none}
  .findex{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
  .bw b{font-size:1.18rem}
  .nav__topin{padding-inline:68px}
  .stats{grid-template-columns:1fr}
  .stats>div{border-left:0}
}

/* ---- hero: the bottle stands on its own hard-offset plate ----------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted (hero.md). Any float goes
   on the CARD, never on the <img>, which is preloaded.

   The slot's motion is a HOLD, not a drift, so the plate itself does not
   float: it sits still under a swell that rises, stays at full for about a
   third of its cycle and only then releases. A plate bobbing underneath would
   argue with that stillness and with the hard-offset shadow language. */
.hero__card{isolation:isolate}
.hero__card img{position:relative;z-index:3}

/* ---- 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 shots are different shapes
   (1200x1200, 1800x1059 and 1800x659 side by side) and the blurbs are
   different lengths, so without these three rules the images render at three
   sizes and the three 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:16px}
.card--pack>.btn{margin-top:auto}

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav{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 surface -- govapofil.com =============================
   Slot: radius_card 28, radius_control 18, depth "hard short offset,
   architectural (0 3px 0 / 0 14px 24px)", ribbon "corner flag".

   SCOPE. style.css is served to all 31 pages and `.hero` is on index.html
   only, so every selector here is either `.hero ...` or `body:has(.hero)`.
   Confirmed in the browser: the tokens below resolve to 28px/18px on the
   home page and stay at the estate's 16px everywhere else.

   SPECIFICITY, NOT SOURCE ORDER. modern_surface.py and footer_type.py
   re-append after this block on every build. `body:has(.hero) .card` is
   (0,2,1) against their (0,1,0), so they cannot take it back.

   The shadow is tinted with this site's own ink (240,233,225) and its own
   deep copper (126,60,29). No neutral black anywhere. */

/* ---- NOT a home-page change: a repair, sitewide, and the reason it is
   here. modern_surface.py re-derives its block on every build. It emits
   `box-shadow:var(--shadow)` on this panel list only while it judges the
   sheet flat, and the first run of this pass pushed the layered-shadow
   count from 0 to 4 -- so on the next build it emitted the radius half
   and silently dropped the shadow half, and the panels on the other 31
   pages lost the shadow they shipped with. Measured, not assumed:
   `.card` computed box-shadow `none` in the browser after that build.
   This is modern_surface's own selector list and its own declaration,
   held here so the rest of the site is where it was. Unscoped on
   purpose; the token, not this rule, is what differs on the home page. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.split__img,
.answer{box-shadow:var(--shadow)}

body:has(.hero){
  --radius:28px;
  --radius-lg:28px;
  --gv-ctl:18px;
  --shadow:0 3px 0 rgba(240,233,225,.07),0 14px 24px rgba(240,233,225,.09);
  --shadow-lg:0 3px 0 rgba(126,60,29,.85),0 14px 24px rgba(126,60,29,.52);
  --lift:0 3px 0 rgba(240,233,225,.13),0 18px 30px rgba(240,233,225,.16);
}

/* ---- panels: the slot's 28px, and the one-edge copper bar curves with it */
body:has(.hero) .card,
body:has(.hero) .card--pack,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .keypoints,
body:has(.hero) .toc,
body:has(.hero) .faq,
body:has(.hero) .ingcard,
body:has(.hero) .final,
body:has(.hero) .step,
body:has(.hero) .tablewrap,
body:has(.hero) .byline,
body:has(.hero) .split__img,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .posts article,
body:has(.hero) .answer,
body:has(.hero) .figures div{border-radius:var(--radius)}
body:has(.hero) .hero__card{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
/* a pill is a pill */
body:has(.hero) .factpills li{border-radius:999px}
body:has(.hero) .eyebrow::before{border-radius:2px}

/* ---- controls: the slot's 18px. 4px-square buttons under a flat hairline
   are the dated signature this pass exists to remove. */
body:has(.hero) .btn{
  border-radius:var(--gv-ctl);
  transition:background .2s ease,box-shadow .2s ease,transform .2s ease,color .2s ease;
}
body:has(.hero) .burger{border-radius:14px}
/* the ordering block is welded to the right edge of the header bar and has
   no corner to round. It stays square on purpose. */
body:has(.hero) .nav__buy{border-radius:0}

/* ---- the pair reads as two weights: gradient on the buying CTA, a solid
   charcoal fill on the secondary. Gradient nowhere else. */
body:has(.hero) .btn--cop{
  /* light stop was #d0733f: 3.38:1 under the white label, measured on the
     rendered Order and Add To Cart buttons. #af5a30 keeps the copper at
     4.85:1; the worst stop is what a gradient is scored on. */
  background:linear-gradient(135deg,#af5a30 0%,#b3572e 44%,#8e4523 100%);
  box-shadow:var(--shadow-lg);
}
body:has(.hero) .btn--ghost{
  background:var(--char-3);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2),0 3px 0 rgba(240,233,225,.06);
}

/* ---- 2px lift on anything clickable, and a focus ring that is not the
   hover state. The old hover PRESSED the button into its hard offset;
   the slot's language is architectural, so it lifts. */
body:has(.hero) .btn--cop:hover{
  /* was #dd8049 / #bd5f33: 2.89:1 and 4.33:1 under white on hover. The lift
     and the shadow carry the hover; the fill only warms a step. */
  background:linear-gradient(135deg,#b45e33,#ab552c 44%,#9a4b27);
  box-shadow:0 5px 0 rgba(126,60,29,.9),0 18px 28px rgba(126,60,29,.55);
  transform:translateY(-2px);
}
body:has(.hero) .btn--ghost:hover{
  background:var(--char-2);color:var(--copper-l);
  box-shadow:inset 0 0 0 1px var(--copper),0 5px 0 rgba(240,233,225,.08);
  transform:translateY(-2px);
}
body:has(.hero) .nav__buy:hover,
body:has(.hero) .buybar .btn:hover{transform:none}
body:has(.hero) .btn:focus-visible{
  outline:2px solid var(--copper-l);outline-offset:3px;border-radius:var(--gv-ctl);
}
body:has(.hero) a:focus-visible,
body:has(.hero) button:focus-visible{outline:2px solid var(--copper-l);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .btn{transition:none}
  body:has(.hero) .btn--cop:hover,
  body:has(.hero) .btn--ghost:hover{transform:none}
}

/* ---- pricing: corner flag, a recommended tier in its own colour, dashed
   separators. Nothing here touches the engineering that puts the three Add
   To Cart buttons on one baseline -- the fixed head height, the fixed image
   box, and the margin-top raise. Measured after: all three at the same y. */
body:has(.hero) .card--pack>.pack__head{border-radius:25px 27px 0 0}
body:has(.hero) .card--pack.featured{
  border-color:rgba(224,138,85,.55);border-left-color:var(--copper);
  background:linear-gradient(180deg,#2d2a27,#201f1d 46%);
  box-shadow:0 3px 0 rgba(126,60,29,.75),0 18px 32px rgba(240,233,225,.13);
}
body:has(.hero) .pack__flag{
  top:-12px;right:20px;padding:6px 15px 7px;border-radius:13px 13px 0 13px;
  background:linear-gradient(135deg,#af5a30,#9d4e29);
  box-shadow:0 3px 0 rgba(126,60,29,.6),0 10px 18px rgba(240,233,225,.07);
}
/* the fold that makes it a flag rather than a tab */
body:has(.hero) .pack__flag::after{
  content:"";position:absolute;right:0;bottom:-8px;width:8px;height:8px;
  background:#7e3c1d;clip-path:polygon(0 0,100% 0,0 100%);
}
body:has(.hero) .pack__perks li{border-bottom:1px dashed rgba(240,233,225,.17)}
body:has(.hero) .pack__perks li:last-child{border-bottom:0}
body:has(.hero) .card--pack:hover{box-shadow:var(--lift)}
body:has(.hero) .card--pack.featured:hover{
  box-shadow:0 3px 0 rgba(126,60,29,.9),0 22px 38px rgba(240,233,225,.18);
}

/* ---- the sticky ordering bar keeps the same language */
body:has(.hero) .buybar{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
/* ==== end home page surface ========================================== */
/*!SITE-HOME-PAINT-END*/
/* ---- 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-99px across
   the estate and change when a bar compacts, and a hardcoded offset tucks the
   product under the bar on the taller 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, which is what the old house rule did.

   Requires .hero NOT to clip on the block axis -- any non-visible overflow on
   an ancestor becomes the scrollport sticky resolves against. See pitfall 65,
   whose first fix got this wrong. */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 88px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 88px) - 28px);
    min-height: calc(100svh - var(--navh, 88px) - 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; }
}
/* ==== 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 .fcard 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 29 box-shadow declaration(s)
   and 4 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 (240,233,225), 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(240,233,225,.06), 0 6px 18px rgba(240,233,225,.07);
  --lift:0 2px 6px rgba(240,233,225,.09), 0 16px 34px rgba(240,233,225,.14);
}

/* 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. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.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}