/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Literata Fallback";src:local("Georgia");font-weight:400;size-adjust:108.51%;ascent-override:108.47%;descent-override:28.39%;line-gap-override:0.00%}
@font-face{font-family:"Literata Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:99.53%;ascent-override:118.26%;descent-override:30.95%;line-gap-override:0.00%}
@font-face{font-family:"Hanken Grotesk Fallback";src:local("Arial");font-weight:400;size-adjust:101.70%;ascent-override:98.33%;descent-override:29.79%;line-gap-override:0.00%}
@font-face{font-family:"Hanken Grotesk Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:95.43%;ascent-override:104.79%;descent-override:31.75%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* flexguarddaily.com - FlexGuard, U.S. stocking partner desk.

   Batch 10 design slot: Literata / Hanken Grotesk, a dusty lavender-grey
   ground carrying warm paper cards, a wordmark set inside a drawn keyline box
   with the destinations stacked in two rows beside it, a footer that puts a
   paper index next to a tall lavender-grey guarantee panel, and the
   brace-ease hero motif.

   The idea is a DRAWN page rather than a lifted one. Everything here is an
   ink line on paper: the keyline around the wordmark, the keyline around the
   product plate, the rules between sections, the bracket on a callout. There
   are no soft shadows anywhere above the buy bar, and the only curve in the
   system is 3px. That is what keeps this desk off the three other joint
   sites, all of which build depth with shadow or with a filled band.

   Colour: the ground and the cards come from the slot; the clay accent is the
   label's own coral, read off the FlexGuard bottle and darkened until white
   text on it clears AA.

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

/* ---- tokens */
:root{
  --ground:#e7e4ed;         /* the page: dusty lavender-grey */
  --paper:#fbf7f2;          /* the cards: warm paper */
  --paper-2:#f4eee6;        /* a second warm surface */
  --ink:#2a2530;            /* body text */
  --ink-2:#554d5e;          /* secondary */
  /* Darkened from #736a7e on 20 Sep 2026. Every .tnote, crumb, caption and
     meta line uses this one token, and at the old value it measured 4.09:1 on
     the lavender page ground and 4.45:1 on the warm card - under AA for text
     this size, 22 elements on the home page alone. One token, one fix. */
  --ink-3:#605869;          /* captions, meta */
  --plum:#453a5c;           /* headings, keylines, the footer panel */
  --plum-2:#5b4e78;
  --plum-d:#2e2640;
  --clay:#c4643e;           /* the label's coral */
  /* Darkened again on 20 Sep 2026: white still clears AA on it at 6.8:1, and
     the hero eyebrow set in it now clears 4.5 against the hero wash, which it
     missed at 4.03:1 measured off the painted pixels. */
  --clay-d:#914528;         /* carries white, and reads on the paper grounds */
  --clay-tint:#f6e5dc;
  --line:#cfc9da;           /* lavender hairline */
  --line-2:#b4abc6;
  --line-warm:#e3d9cc;      /* hairline on paper */
  --good:#2f6e4e;
  --warn:#8a5a10;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --radius:3px;
  --navh:118px;
  --serif:"Literata","Literata Fallback",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk","Hanken Grotesk Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
*{min-width:0}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg,table{max-width:100%}
img{height:auto;display:block}
a{color:var(--plum-2);text-underline-offset:3px}
a:hover{color:var(--clay-d)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--plum);font-weight:700;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(1.95rem,1.3rem + 2vw,2.9rem);letter-spacing:-.015em}
h2{font-size:clamp(1.44rem,1.14rem + 1.1vw,2.05rem);letter-spacing:-.01em}
h3{font-size:1.16rem;font-weight:700}
h4{font-size:1.02rem;font-weight:700}
p,li{font-size:1.0625rem}
p{margin:0 0 1.02em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--plum);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--clay-d);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it; a drawn tick, not a bar */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:0.8125rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--clay-d);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:16px;height:16px;flex:0 0 auto;
  border-left:2px solid var(--clay);border-bottom:2px solid var(--clay);
}

/* ---- buttons: drawn, square-ish, no gradient anywhere */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 30px;
  font-family:var(--sans);font-size:1rem;font-weight:800;letter-spacing:.01em;
  border:2px solid var(--clay-d);border-radius:var(--radius);cursor:pointer;
  text-decoration:none;background:var(--clay-d);color:#fff;
  transition:background .18s ease,border-color .18s ease;
}
.btn:hover{background:var(--plum);border-color:var(--plum);color:#fff}
.btn--clay{background:var(--clay-d);border-color:var(--clay-d);color:#fff}
.btn--lg{min-height:60px;padding:17px 36px;font-size:1.06rem}
.btn--ghost{background:transparent;color:var(--plum);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--paper);color:var(--plum-d);border-color:var(--plum)}
.btn--wide{width:100%}

/* ---- the topline: role, lot, dose and count, guarantee, order phone.
   Five facts above the navigation so the menu does not have to carry them
   (hero.md). Above CRITICAL-END because it is the first thing painted. */
.util{background:var(--plum-d);color:#cfc6dd;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:1px;height:12px;background:#6a5f80;
  flex:0 0 auto;margin-right:11px}
.util b{color:#f3ecf8;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 */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}

/* ---- header: the wordmark inside a drawn keyline box, destinations stacked
   in two rows to its right, the order rail at the far end. */
.nav{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:2px solid var(--plum)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:14px 0` sets padding-inline to 0 and wipes the page gutter. It is
   invisible above the container max-width and no overflow test can see it
   (pitfall 46). */
.nav__top{display:flex;align-items:stretch;gap:20px;padding-block:12px}
.brand{
  display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--plum);
  border:2px solid var(--plum);border-radius:var(--radius);padding:9px 15px;flex:0 0 auto;
}
.brand:hover{border-color:var(--clay-d);color:var(--plum)}
/* Size the mark by ELEMENT as well as by class: brand_marks.py rewrites the
   <svg> inside .brand and does not carry class="brand__glyph" onto the
   replacement, so a class-only rule stops applying the moment the tool runs
   and the glyph renders at its intrinsic size (pitfall 16). */
.brand__glyph,.brand>svg{width:32px;height:32px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.06}
.bw b{font-family:var(--serif);font-size:1.32rem;font-weight:700;letter-spacing:-.02em}
.bw b em{font-style:normal;color:var(--clay-d)}
.bw small{font-size:0.75rem;font-weight:600;color:var(--ink-3);letter-spacing:.02em}

.nav__stack{display:flex;flex-direction:column;justify-content:center;gap:5px;
  flex:1 1 auto;min-width:0}
.menu{display:flex;flex-wrap:wrap;gap:2px 22px;list-style:none;margin:0;padding:0;
  align-items:center}
.menu a{display:inline-block;padding:4px 0;font-family:var(--sans);
  font-size:.9375rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent}
.menu a:hover{color:var(--plum)}
.menu a[aria-current="page"]{color:var(--plum);border-bottom-color:var(--clay)}
.menu__more a{font-weight:600;color:var(--ink-3);font-size:.875rem}
.nav__rail{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.nav__price{text-align:right;line-height:1.16}
.nav__price b{display:block;font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--plum)}
.nav__price span{font-size:.75rem;font-weight:600;color:var(--ink-3)}
.nav__buy{min-height:44px;padding:10px 18px;font-size:.9375rem}
.burger{display:none;width:48px;height:46px;background:transparent;
  border:2px solid var(--plum);border-radius:var(--radius);cursor:pointer;padding:12px 11px}
.burger span{display:block;height:2px;background:var(--plum);margin:0 0 5px}
.burger span:last-child{margin:0}
/* The stack is a COLUMN, so .nav__rail stretched to its full width and packed
   the price and the Order Now button at its left edge: measured at 1440 the
   button sat at x=610, in the middle of a 153px header, with fourteen links
   ragged across two ranks above it. Laying the stack out as a row puts the rail
   back on the right margin where every other site on this estate has it, drops
   the header to 134px, and gives the menu a 535px box that breaks cleanly after
   the fifth (primary) link so the .menu__more group reads as its own rank.
   Below 981px the burger takes over and this block does not apply. */
@media (min-width:981px){
  .nav__stack{flex-direction:row;align-items:center;justify-content:flex-end;gap:26px}
  .menu{flex:1 1 auto;row-gap:6px}
  .nav__rail{flex:0 0 auto}
}


/* ---- hero: copy LEFT, the product RIGHT on a warm paper plate with the same
   drawn keyline as the wordmark. The plate is 76% of the media column so the
   motif's two braces, which sit at its outer edges, fall clear of it. */
.hero{position:relative;background:var(--ground);padding:34px 0 52px}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:38px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
/* The hero H1 is a twelve-word headline and the copy column is 637px, so the
   global clamp would set it five lines deep and push the primary CTA's BOTTOM
   to y=944 at 1440x900 -- a half-button through the fold, which is the defect
   hero.md records. Measured with webfonts loaded AND blocked, because the
   fallback face can add a line on its own. */
.hero h1{font-size:clamp(1.9rem,1.05rem + 1.65vw,2.5rem);line-height:1.13;margin:0 0 14px}
.hero h1 em{font-style:normal;color:var(--clay-d)}
.answer{background:var(--paper);border:2px solid var(--plum);border-radius:var(--radius);
  padding:18px 21px;margin:0 0 14px}
.answer p{margin:0 0 .7em;font-size:1.0625rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 14px;max-width:58ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 16px;
  font-size:0.9688rem;font-weight:600;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 16px;padding:0}
.factpills li{font-size:0.9062rem;font-weight:600;color:var(--ink-2);background:var(--paper);
  border:1px solid var(--line-warm);padding:6px 13px;border-radius:var(--radius)}
.factpills li b{color:var(--plum);font-weight:800}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.figures div{background:var(--paper);border:1px solid var(--line-warm);
  border-top:3px solid var(--clay);padding:12px 14px;border-radius:0 0 var(--radius) var(--radius)}
.figures b{display:block;font-family:var(--serif);font-size:1.44rem;font-weight:700;
  color:var(--plum);line-height:1.1}
.figures span{display:block;font-size:0.875rem;font-weight:600;color:var(--ink-3);margin-top:3px}
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;width:72%;margin-inline:auto;
  background:var(--paper);border:2px solid var(--plum);border-radius:var(--radius);
  padding:24px 20px 16px;text-align:center}
.hero__card img{width:100%;max-width:330px;height:auto;margin-inline:auto}
.hero__cap{margin:12px 0 0;font-size:.8125rem;font-weight:600;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 20px;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}

/* ---- inner page head */
.phead{padding:32px 0 26px;background:var(--paper);border-bottom:2px solid var(--plum)}
.crumbs{font-size:0.9062rem;color:var(--ink-3);margin:0 0 13px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--clay-d)}
.phead h1{margin:0 0 15px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide);background:var(--paper-2)}
.lead{font-size:1.12rem;color:var(--ink-2);max-width:var(--measure)}


/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:2px 0 14px}
  /* The CTA comes BEFORE the roadmap line on a phone. hero.md's stacked order is eyebrow, H1, product shot, Quick Answer, CTA: the roadmap sentence is useful and it is not worth 176px between the answer and the button. */ .hero__cta{order:5}
  .hero__road{order:7}
  .hero__sub{order:8}
  .hero__card{width:100%;max-width:290px}
}
@media (max-width:760px){
  .hero{padding:32px 0 40px}
}
@media (min-width:981px){
  .hero__media{position:sticky;top:calc(var(--navh,118px) + 14px);align-self:start; min-height:calc(100vh - var(--navh,118px) - 28px); min-height:calc(100svh - var(--navh,118px) - 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;}
}
@media (max-width:980px){
  /* the media column is the full page width here; keep the bloom off the headline that now sits above it */ body:has(.hero) .hero__media::before{width:min(118%,420px)}
  body:has(.hero) .hero__media::after{width:min(94%,330px)}
}
/* --- end of the copied hero responsive rules --- */

/* ---- hero motif -- brace-ease ---------------------------------------- */
.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(184deg,#e1cdce,#e7e4ed 58%,#e7e4ed)}.hero__media::before,.hero__media::after{content:'';position:absolute;top:26%;height:48%;width:16%;z-index:1;pointer-events:none;border:2px solid rgba(196,100,62,0.48);border-radius:12px;animation:fgBrace 11s cubic-bezier(.4,.9,.4,1) infinite}.hero__media::before{left:0;border-right:0;border-radius:12px 0 0 12px}.hero__media::after{right:0;border-left:0;border-radius:0 12px 12px 0;animation-delay:.3s}@keyframes fgBrace{0%,100%{transform:translateX(0);opacity:.24}44%,64%{transform:translateX(var(--fgIn,6%));opacity:.62}}.hero__media::after{--fgIn:-6%}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!SITE-HOME-CRIT-START*/
/* The recommended pack sits 14px proud of the other two.  margin-top, never
   transform: the pack cards carry data-reveal and [data-reveal].in sets
   transform:none, which would silently cancel a translate.  The grid is
   align-items:stretch, so a negative top margin grows the featured card
   upwards while its bottom edge stays on the row line -- the Add To Cart
   button is pushed down by margin-top:auto inside the body, so all three
   buttons keep the one baseline.  Measured after applying.
   Layout, so it lives above CRITICAL-END and needs a rebuild. */
body:has(.hero) .card--pack.featured{margin-top:-14px}
@media (max-width:760px){
  /* one column, and .featured is pulled to order:-1 -- proud of nothing */
  body:has(.hero) .card--pack.featured{margin-top:0}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections: separated by a drawn rule, not by a filled band */
.sec{padding:56px 0;position:relative;border-top:1px solid var(--line)}
.sec--tint{background:var(--paper-2);border-top-color:var(--line-warm)}
.sec--panel{background:var(--paper);border-top-color:var(--line-warm)}
.sec--dark{background:var(--plum-d);color:#ded6e8;border-top-color:var(--plum-d)}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#cfc6dd}
.sec--dark .eyebrow{color:#e6a586}
.sec--dark .eyebrow::before{border-color:#e6a586}
.sec--dark a{color:#e6a586}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 24px}
.sec__head h2{margin:0 0 9px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#cfc6dd}

/* 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:26px;margin:0 0 .5em}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;
  background:var(--clay)}
.sec--dark .ticks li::before{background:#e6a586}

/* ---- tables: ruled, not striped */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--paper)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line-warm);vertical-align:top}
th{font-family:var(--serif);font-weight:700;color:var(--plum);background:var(--paper-2);
  font-size:.9375rem;border-bottom:2px solid var(--plum)}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--plum)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps: the number drawn in a keyline square */
.steps{display:grid;gap:14px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--paper);border:1px solid var(--line-warm);
  border-radius:var(--radius);padding:19px 21px 19px 68px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:19px;top:18px;
  width:34px;height:34px;display:grid;place-items:center;
  border:2px solid var(--clay);color:var(--clay-d);background:var(--paper);
  font-family:var(--serif);font-weight:700;font-size:1rem;border-radius:var(--radius)}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: flat paper with a drawn top rule */
.grid{display:grid;gap:16px}
.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(--paper);border:1px solid var(--line-warm);
  border-top:3px solid var(--plum);border-radius:0 0 var(--radius) var(--radius);
  padding:22px 21px 20px}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#3a3050;border-color:#4d4166;border-top-color:#e6a586}

/* ---- callout, alert, quote, keypoints: all drawn brackets */
.callout{background:var(--clay-tint);border:1px solid #e6c6b4;border-left:4px solid var(--clay);
  border-radius:0 var(--radius) var(--radius) 0;padding:19px 21px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--plum)}
.callout p:last-child{margin:0}
.alert{background:#fbf3e4;border:1px solid #ecd9b6;border-left:4px solid var(--warn);
  border-radius:0 var(--radius) var(--radius) 0;padding:19px 21px;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(--serif);font-size:1.26rem;font-weight:500;line-height:1.5;
  color:var(--plum);border-left:3px solid var(--clay);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--sans);font-size:.9375rem;font-style:normal;
  font-weight:400;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--paper);border:1px solid var(--line-warm);
  border-left:4px solid var(--plum);border-radius:0 var(--radius) var(--radius) 0;
  padding:19px 21px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px;color:var(--plum)}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;
  align-items:start;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, so a
   .tablewrap holding a 520px-min table keeps its column 520px wide however
   narrow the grid gets and the right-hand half is clipped away by
   body{overflow-x:clip} with nothing to scroll. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:2px solid var(--plum);border-radius:var(--radius);
  background:var(--paper)}
.split__body p:last-child{margin:0}
/* A .split is a pair: the media and the paragraph that belongs to it start on
   the same line. Centring them put the first line of copy 107-191px below the
   top of its own image (measured across all six of these sites, 1440px), which
   reads as a figure stranded in the column with the text floating beside it.
   The cap stops a 1:1 artwork at 551px from dwarfing two paragraphs; wide panel
   shots are unaffected because their height is set by the column width. Desktop
   only - below 761px the split is one column and the image is already small. */
@media (min-width:761px){
  .split__img img{max-height:420px;width:auto;margin-inline:auto}
}


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

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr 1fr 1.25fr;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--paper);margin:0 0 1.2em}
.versus>div{padding:12px 15px;border-bottom:1px solid var(--line-warm);font-size:.98rem;min-width:0}
.versus>div:nth-child(3n+1){font-weight:700;background:var(--paper-2)}
.versus__h{background:var(--plum)!important;color:#fff;font-family:var(--serif);
  font-weight:700;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:14px}
.inglist>*{min-width:0}
.ingcard{background:var(--paper);border:1px solid var(--line-warm);
  border-left:4px solid var(--clay);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 22px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 9px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:800;color:#fff;
  background:var(--plum);padding:3px 11px;border-radius:var(--radius);white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel.
   Three cards packed FROM THE TOP so the buttons share a baseline: the head
   band, the image slot and the supply line all carry a min-height, and the
   button is pushed down by margin-top:auto inside a flex column. Measured as
   an offset from each card's OWN top, because the featured card's border
   changes its viewport top legitimately (responsive.md proof 3). */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  align-items:stretch;margin:0 0 18px}
.card--pack{display:flex;flex-direction:column;background:var(--paper);
  border:2px solid var(--line-warm);border-radius:var(--radius);position:relative}
.card--pack::before{display:none}
.card--pack.featured{border-color:var(--clay)}
.pack__head{background:var(--paper-2);border-bottom:2px solid var(--plum);
  padding:13px 18px;display:flex;align-items:center;gap:10px;min-height:56px}
.card--pack.featured .pack__head{background:var(--plum);border-bottom-color:var(--plum)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--plum)}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:-2px;top:-2px;background:var(--clay-d);color:#fff;
  font-family:var(--sans);font-size:0.75rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 11px;z-index:3;border-radius:0 var(--radius) 0 0}
.pack__body{display:flex;flex-direction:column;flex:1;padding:18px 18px 20px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,156px);object-fit:contain;
  margin-inline:auto;margin-bottom:12px}
.pack__per{font-family:var(--serif);font-size:2.2rem;font-weight:700;color:var(--plum);
  line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:.95rem;font-weight:700;top:-.75em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;
  color:var(--ink-3);margin:4px 0 10px;min-height:22px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 13px;
  font-size:1rem;min-height:27px}
.pack__tot b{font-weight:800;color:var(--plum)}
.pack__perks{list-style:none;margin:0 0 16px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:22px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;
  background:var(--clay)}
.card--pack>.pack__body>.btn{margin-top:auto;min-height:54px}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:11px 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:18px;margin:0 0 1.2em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:var(--paper);border:1px solid var(--line-warm);
  border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:15px 17px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--plum)}
.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:16px;margin:0 0 1.2em}
.badgewall figure{margin:0;text-align:center;background:var(--paper);
  border:1px solid var(--line-warm);border-radius:var(--radius);padding:17px 15px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px;color:var(--plum)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

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

/* ---- FAQ. Padding on <summary>, which is the click target. */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--paper);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line-warm)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:16px 46px 16px 19px;cursor:pointer;position:relative;list-style:none;
  font-family:var(--serif);font-weight:700;font-size:1.04rem;color:var(--plum)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:19px;top:50%;translate:0 -50%;
  font-family:var(--sans);font-size:1.3rem;font-weight:400;color:var(--clay-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 19px 17px}
.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.0625rem;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; `anywhere` also lowers the element's min-content,
   which is what stops the ancestor being sized by the longest URL. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:17px;background:var(--paper);border:1px solid var(--line-warm);
  border-left:4px solid var(--plum);border-radius:0 var(--radius) var(--radius) 0;
  padding:21px 22px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:52px;height:52px;display:grid;place-items:center;
  border:2px solid var(--plum);color:var(--plum);font-family:var(--serif);font-weight:700;
  font-size:1.04rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--plum)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--paper);border:2px solid var(--plum);border-radius:var(--radius);
  padding:28px 30px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.final__img img{width:200px}
.final h2{margin:0 0 10px}
.final__price{font-weight:700;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:16px;text-align:left}
.rel a{display:block;background:var(--paper);border:1px solid var(--line-warm);
  border-top:3px solid var(--clay);border-radius:0 0 var(--radius) var(--radius);
  padding:19px 21px;text-decoration:none;color:var(--ink);transition:border-color .18s ease}
.rel a:hover{border-color:var(--plum);border-top-color:var(--plum)}
.rel b{display:block;font-family:var(--serif);font-size:1.06rem;color:var(--plum);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms the page on focus. */
.form{display:grid;gap:15px;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(--sans);font-size:16px;
  padding:12px 13px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--paper);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}
.formcard{background:var(--paper);border:1px solid var(--line-warm);border-top:3px solid var(--plum);
  border-radius:0 0 var(--radius) var(--radius);padding:24px 24px 26px;margin:0 0 1.2em}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.article h2{scroll-margin-top:calc(var(--navh,118px) + 12px)}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px;padding:10px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.toc{background:var(--paper-2);border:1px solid var(--line-warm);border-radius:var(--radius);
  padding:19px 22px;margin:0 0 26px}
.toc b{display:block;margin-bottom:8px;color:var(--plum)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.0625rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.posts article{background:var(--paper);border:1px solid var(--line-warm);
  border-top:3px solid var(--clay);border-radius:0 0 var(--radius) var(--radius);padding:21px 22px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.0625rem;color:var(--ink-2)}
.dtable{min-width:520px}
.article .final--media{grid-template-columns:1fr;gap:18px;padding:22px 24px}
.article .final__img{display:none}

/* ---- pre-footer order band */
.fcta{background:var(--paper);border-top:2px solid var(--plum);padding:42px 0 44px}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.fcta__eye{display:inline-block;font-family:var(--sans);font-size:.75rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--clay-d);margin-bottom:8px}
.fcta__h{font-family:var(--serif);font-size:1.55rem;font-weight:700;line-height:1.24;
  color:var(--plum);margin:0 0 10px}
.fcta p{color:var(--ink-2)}
.fcta__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}
.fcta__img img{width:240px}

/* ---- footer: a paper index beside a tall lavender-grey guarantee panel */
footer{background:var(--ground);border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) 326px;gap:30px;padding:40px 0 30px;
  align-items:stretch}
.findex{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:24px;
  background:var(--paper);border:1px solid var(--line-warm);border-radius:var(--radius);
  padding:26px 26px 20px;min-width:0}
.findex>*{min-width:0}
.fbrand{font-family:var(--serif);font-size:1.6rem;font-weight:700;color:var(--plum);
  letter-spacing:-.02em;line-height:1}
.fbrand span{color:var(--clay-d)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 13px}
.fcard p{font-size:1rem;color:var(--ink-2);margin:0 0 .65em}
.fcard b{color:var(--plum)}
.fh{font-family:var(--sans);font-size:.75rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 9px}
.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. */
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(--clay-d)}
.fguard{background:var(--ground);border:2px solid var(--plum);border-radius:var(--radius);
  padding:24px 24px 26px;display:flex;flex-direction:column;min-width:0}
.fguard img{width:96px;height:96px;object-fit:contain;margin:0 0 14px}
.fguard__h{font-family:var(--serif);font-size:1.28rem;font-weight:700;color:var(--plum);
  margin:0 0 10px;line-height:1.25}
.fguard p{font-size:.9688rem;color:var(--ink-2);margin:0 0 .8em}
.fguard ul{list-style:none;margin:0 0 16px;padding:0}
.fguard li{position:relative;padding-left:20px;margin:0 0 6px;font-size:.9375rem;color:var(--ink-2)}
.fguard li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;
  background:var(--clay)}
.fguard .btn{margin-top:auto;min-height:48px;font-size:.9375rem}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:18px 0;
  border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 24px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--plum-d);color:#c6bcd6;border-top:2px solid var(--plum);padding:26px 0 30px}
.disc p,.disc li{font-size:.9375rem;color:#c6bcd6}
.disc b{color:#f3ecf8}
.disc a{color:#e6a586}
.disc__list{columns:2;column-gap:36px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:15px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:2px;
  background:#e6a586}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid #4d4166;font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--plum-d);color:#fff;
  transform:translateY(105%);transition:transform .25s ease;box-shadow:0 -6px 24px rgba(46,38,64,.22)}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;
  padding:11px 22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#cfc6dd}
.buybar .btn{margin-left:auto;flex:0 0 auto}

/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(13px);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:2px 16px}
  .menu a{font-size:.9rem}
  .findex{grid-template-columns:1.3fr 1fr 1fr}
}
@media (max-width:1040px){
  .nav__price{display:none}
  .fgrid{grid-template-columns:1fr}
  .fguard{max-width:none}
}
@media (max-width:980px){
  :root{--navh:104px}
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:2px 0 14px}
  .answer{order:4}
  /* The CTA comes BEFORE the roadmap line on a phone. hero.md's stacked order
     is eyebrow, H1, product shot, Quick Answer, CTA: the roadmap sentence is
     useful and it is not worth 176px between the answer and the button. */
  .hero__cta{order:5}
  .hero__road{order:7}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .hero__card{width:100%;max-width:290px}
  .nav__top{align-items:center}
  .nav__stack{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px;
    width:100%;order:2}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:11px 0;border-bottom:1px solid var(--line-warm)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line-warm)}
  .nav__rail{margin-left:auto;order:1}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:18px}
  .findex{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding:32px 0 40px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* At one column the three .versus__h bars stop labelling anything: a reader
     meets a stack of three titles and then nine unlabelled cells. Hide the bars
     and let every cell carry its own heading from data-l instead. */
  .versus__h{display:none}
  .versus>div[data-l]::before{content:attr(data-l);display:block;margin-bottom:3px;
    font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-2)}
  /* the dose chip is nowrap and margin-left:auto, so on a narrow card it is
     pushed onto a line with no room for it and overhangs the card edge */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .findex{grid-template-columns:1fr;padding:22px 20px 18px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .badgewall{grid-template-columns:1fr}
  .brand{padding:7px 11px}
  .bw b{font-size:1.16rem}
}

/* ---- hero: the plate holds still, the braces move ------------------------
   The float goes on the CARD and is transform-only. The <img> is the LCP
   element and is preloaded, so it is never animated and never starts at
   opacity 0 (hero.md). hero_motifs.py owns the two braces at the outer edges
   of .hero__media; this file only gives the plate its own quiet lift. */
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:fgLift 9s ease-in-out infinite}
  @keyframes fgLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}

/* ---- hero: sticky, centred product column ------------------------------
   The product column holds its place, vertically centred, until the hero has
   scrolled past. --navh is measured and published by site.js, because this
   header is two rows and its height changes between breakpoints.

   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,118px) + 14px);align-self:start;
    min-height:calc(100vh - var(--navh,118px) - 28px);
    min-height:calc(100svh - var(--navh,118px) - 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; }
}

/* ==== 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% - 18px) / 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 ==== */

/* --- 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 different
   shapes (one site shipped 200x243, 200x105 and 200x65 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:14px}
.card--pack>.btn{margin-top:auto}
/*!SITE-HOME-PAINT-START*/
/* ====================================================================
   flexguarddaily.com -- HOME PAGE surface, slot "bloom".

   The drawn-page language (keylines, rules, the clay accent) is kept.
   What changes is the depth: a three-stop shadow tinted with this site's
   own ink #2a2530 = 42,37,48, a two-tier curve (14px on paper surfaces,
   8px on controls) so panels and buttons stop sharing one corner, a
   gradient on the buying CTA with the ghost button left flat so the pair
   reads as two weights, and a slow radial bloom behind the bottle.

   Scope: body:has(.hero).  Specificity of every rule here is at least
   (0,2,1), which clears modern_surface.py's (0,1,0)/(0,2,0) rules and
   [data-reveal].in's (0,2,0) whatever order they end up in.

   Paint only -- border-radius, box-shadow, background, colour, transform,
   animation and transition move no box -- so this block is below
   CRITICAL-END and needs only restamp_assets.py.
   ==================================================================== */
body:has(.hero){
  --fgx-rc:14px;                      /* paper surfaces */
  --fgx-rq:8px;                       /* controls */
  --fgx-d1:0 1px 2px rgba(42,37,48,.09);
  --fgx-d2:0 1px 2px rgba(42,37,48,.07),0 6px 14px rgba(42,37,48,.10);
  --fgx-d3:0 1px 2px rgba(42,37,48,.07),0 6px 14px rgba(42,37,48,.11),
           0 20px 44px rgba(42,37,48,.15);
  --fgx-dh:0 1px 2px rgba(42,37,48,.10),0 8px 18px rgba(42,37,48,.14),
           0 24px 52px rgba(42,37,48,.19);
}

/* ---- paper surfaces: one curve, one depth */
body:has(.hero) .card,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .ingcard,
body:has(.hero) .step,
body:has(.hero) .faq,
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) .answer{border-radius:var(--fgx-rc);box-shadow:var(--fgx-d2)}

/* the callout keeps its 4px clay bracket, so only three corners curve */
body:has(.hero) .callout{border-radius:0 var(--fgx-rc) var(--fgx-rc) 0}
/* the figures row hangs off a 3px clay rule; curve the two free corners */
body:has(.hero) .figures div{border-radius:0 0 var(--fgx-rc) var(--fgx-rc);
  box-shadow:var(--fgx-d1)}
/* chips read as chips */
body:has(.hero) .factpills li{border-radius:999px;box-shadow:var(--fgx-d1)}

/* ---- the product plate is the deepest object on the page */
body:has(.hero) .hero__card{border-radius:var(--fgx-rc);box-shadow:var(--fgx-d3)}

/* ---- controls: the second curve */
body:has(.hero) .btn,
body:has(.hero) .burger,
body:has(.hero) .brand,
body:has(.hero) input,
body:has(.hero) select,
body:has(.hero) textarea{border-radius:var(--fgx-rq)}

/* ---- the buying CTA carries a gradient; .btn--ghost stays flat.
   Every stop is checked against white: #a85232 5.36:1, #914528 6.81:1,
   #7a3a20 8.56:1, and on hover #b05534 5.01:1 / #9c4a2b 6.0:1 -- all
   clear AA, which is the reason --clay-d was darkened to #914528 in the
   first place and is not a thing a gradient gets to undo. */
body:has(.hero) .btn{
  transition:background-color .2s ease,background-image .2s ease,
    border-color .2s ease,color .2s ease,box-shadow .22s ease,transform .22s ease;
}
body:has(.hero) .btn--clay{
  background-color:var(--clay-d);
  background-image:linear-gradient(180deg,#a85232 0%,#914528 46%,#7a3a20 100%);
  border-color:#7a3a20;
  box-shadow:0 1px 2px rgba(42,37,48,.12),0 6px 14px rgba(122,58,32,.22);
}
body:has(.hero) .btn--clay:hover{
  background-color:#9c4a2b;
  background-image:linear-gradient(180deg,#b05534 0%,#9c4a2b 46%,#853f23 100%);
  border-color:#853f23;color:#fff;
  box-shadow:0 2px 4px rgba(42,37,48,.14),0 12px 26px rgba(122,58,32,.30);
  transform:translateY(-2px);
}
body:has(.hero) .btn--ghost{
  background-image:none;box-shadow:var(--fgx-d1);
}
body:has(.hero) .btn--ghost:hover{
  background-color:var(--paper);background-image:none;
  border-color:var(--plum);color:var(--plum-d);
  box-shadow:var(--fgx-d2);transform:translateY(-2px);
}
/* the global ring is clay, which disappears on a clay button */
body:has(.hero) .btn:focus-visible{
  outline:3px solid var(--plum);outline-offset:3px;box-shadow:var(--fgx-d2);
}

/* ---- anything clickable answers the pointer with the same 2px */
body:has(.hero) .card--pack,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .posts article,
body:has(.hero) .rel a{transition:box-shadow .22s ease,transform .22s ease}
body:has(.hero) .card--pack:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .badgewall figure:hover,
body:has(.hero) .posts article:hover,
body:has(.hero) .rel a:hover{box-shadow:var(--fgx-dh);transform:translateY(-2px)}

/* ---- pricing: ribbon as an inset pill sitting on the head rule */
body:has(.hero) .card--pack{border-radius:var(--fgx-rc);box-shadow:var(--fgx-d2)}
body:has(.hero) .card--pack.featured{
  border-color:var(--clay-d);box-shadow:var(--fgx-d3);
}
body:has(.hero) .card--pack.featured .pack__head{
  background-image:linear-gradient(135deg,#5b4e78 0%,#453a5c 55%,#3a2f50 100%);
}
body:has(.hero) .card--pack.featured .pack__per{color:var(--clay-d)}
/* The pill is notched into the card's own top rule rather than hung off the
   corner.  top:-1px puts its midline on the middle of the 2px border at every
   width -- the first version of this anchored to the head band's bottom edge
   with a measured 58px, and the head wraps to two lines (88.5px) between 761px
   and ~860px, so the pill dropped onto the bottle.  A rule that never moves is
   the only honest anchor here. */
body:has(.hero) .pack__flag{
  left:50%;right:auto;top:-1px;bottom:auto;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:var(--plum);
  box-shadow:0 1px 2px rgba(42,37,48,.12),0 6px 14px rgba(42,37,48,.20);
  z-index:4;
}
body:has(.hero) .card--pack.featured .pack__flag{background:var(--clay-d)}
/* dashed separators drawn as a background, so the rows gain no height and
   the three Add To Cart buttons keep their shared baseline */
body:has(.hero) .pack__perks li{
  background-image:repeating-linear-gradient(90deg,
    var(--line-warm) 0 5px,rgba(0,0,0,0) 5px 10px);
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:100% 1px;
}
body:has(.hero) .pack__perks li:last-child{background-image:none}

/* ---- hero motif: bloom -------------------------------------------------
   A radial bloom opening from behind the bottle and easing back, on the
   pseudo-elements of the media column -- never on the <img>, which is the
   preloaded LCP element.  600px across against a 332px plate, so it reads
   OUTSIDE the opaque card instead of being swallowed by it.  transform and
   opacity only, one 26s cycle: this is a capsule taken daily for weeks.
   Keyframe names are new -- this sheet already owns fgBrace and fgLift.
   The existing reduced-motion rule already stops and hides both pseudos. */
body:has(.hero) .hero__media::before,
body:has(.hero) .hero__media::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:50%;top:50%;right:auto;bottom:auto;
  height:auto;aspect-ratio:1;
  border:0;border-radius:50%;
  transform:translate(-50%,-50%);
}
/* The stops are pushed OUTWARD on purpose.  The product plate is opaque and
   332px wide inside a 600px bloom, so it covers everything inside about 55%
   of the radius: a gradient that peaks in the middle paints its colour under
   the card and renders as nothing.  The peak sits at 62%, just outside the
   plate, which is the only band a reader can actually see. */
body:has(.hero) .hero__media::before{
  width:min(138%,600px);
  background:radial-gradient(closest-side,
    rgba(196,100,62,.10) 0%,
    rgba(196,100,62,.17) 48%,
    rgba(196,100,62,.30) 62%,
    rgba(145,69,40,.13) 79%,
    rgba(69,58,92,0) 100%);
  animation:fgxBloom 26s cubic-bezier(.37,0,.32,1) infinite;
}
body:has(.hero) .hero__media::after{
  width:min(108%,470px);
  background:none;
  box-shadow:inset 0 0 0 2px rgba(69,58,92,.22);
  animation:fgxBloomRing 26s cubic-bezier(.37,0,.32,1) infinite;
  animation-delay:-3.4s;
}
@keyframes fgxBloom{
  0%,100%{transform:translate(-50%,-50%) scale(.84);opacity:.48}
  46%,58%{transform:translate(-50%,-50%) scale(1.06);opacity:1}
}
@keyframes fgxBloomRing{
  0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.16}
  46%,58%{transform:translate(-50%,-50%) scale(1.12);opacity:.7}
}
@media (max-width:980px){
  /* the media column is the full page width here; keep the bloom off the
     headline that now sits above it */
  body:has(.hero) .hero__media::before{width:min(118%,420px)}
  body:has(.hero) .hero__media::after{width:min(94%,330px)}
}
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .btn,
  body:has(.hero) .card--pack,
  body:has(.hero) .shots figure,
  body:has(.hero) .badgewall figure,
  body:has(.hero) .posts article,
  body:has(.hero) .rel a{transition:none}
  body:has(.hero) .btn--clay:hover,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .badgewall figure:hover,
  body:has(.hero) .posts article:hover,
  body:has(.hero) .rel a:hover{transform:none}
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{animation: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 .fguard .btn{font-size:16px}
footer .fguard li{font-size:16px}
footer .fguard 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 15 box-shadow declaration(s)
   and 3 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,37,48), 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,37,48,.06), 0 6px 18px rgba(42,37,48,.07);
  --lift:0 2px 6px rgba(42,37,48,.09), 0 16px 34px rgba(42,37,48,.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,
.keypoints,
.callout,
.alert,
.byline,
.posts article,
.ingcard,
.split__img{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}