/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Crete Round Fallback";src:local("Georgia");font-weight:400;size-adjust:101.57%;ascent-override:97.47%;descent-override:28.16%;line-gap-override:0.00%}
@font-face{font-family:"Nunito Sans Fallback";src:local("Arial");font-weight:400;size-adjust:101.87%;ascent-override:99.24%;descent-override:34.65%;line-gap-override:0.00%}
@font-face{font-family:"Nunito Sans Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:97.82%;ascent-override:103.36%;descent-override:36.09%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* goflexguard.com - FlexGuard, USA authorized retailer desk.
   Batch 10 design slot: Crete Round / Nunito Sans, a PALE STONE ground with a
   DEEP TEAL SPINE running down the left page edge, a header mounted on that
   spine with the destinations in one flowing row, and a footer whose contact
   facts sit in a teal band above a stone index. Hero motif: joint / pivot-hold.
   Brand mark: the bracket construction.

   The spine is drawn as a border on the body element, so it is a real edge of
   the document rather than a fixed overlay. It cannot cover the burger, which
   sits at the opposite end of the header row, and it cannot trap a sticky
   column, because it adds no scroll container.

   Crete Round ships one weight only, so every display rule is font-weight:400
   and all the bold on this site is Nunito Sans. Synthetic bold on a slab serif
   is a smear at heading sizes.

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

/* ---- tokens. This block must be the first brace-terminated block in the
   file: validate.py reads the declared custom properties out of it. */
:root{
  --ink:#20262b;
  --ink-2:#4c565e;
  --ink-3:#5c6770;
  --teal:#00767e;
  --teal-d:#03454b;
  --teal-2:#1a8a90;
  --wash:#e2eeee;
  --clay:#c4785d;
  --clay-d:#9d5942;
  --paper:#f3f1ec;
  --panel:#fffdf9;
  --tint:#e9e6df;
  --line:#ddd8ce;
  --line-2:#c6bfb2;
  --good:#186b4f;
  --warn:#8a5a10;
  --on-teal:#cfe0e0;
  --teal-ink:#006a71;   /* the accent as TEXT on the stone tint: 5.1:1, where --teal is 4.33 */
  --wrap:1180px;
  --measure:760px;
  --measure-wide:980px;
  --radius:5px;
  --radius-lg:12px;
  --spine:14px;
  --navh:100px;
  --pack-img:170px;
  --figw:320px;
  --shadow:0 1px 2px rgba(32,38,43,.05), 0 12px 30px rgba(32,38,43,.07);
  --shadow-lg:0 20px 54px rgba(3,69,75,.19);
  --display:"Crete Round","Crete Round Fallback",Georgia,"Times New Roman",serif;
  --text:"Nunito Sans","Nunito Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.72;font-weight:400;
  border-left:var(--spine) solid var(--teal-d);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-underline-offset:3px}
a:hover{color:var(--teal-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--teal-d);font-weight:400;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.92rem,1.25rem + 1.9vw,2.55rem);letter-spacing:-.005em}
h2{font-size:clamp(1.44rem,1.16rem + 1.05vw,1.98rem)}
h3{font-size:1.18rem}
h4{font-size:1.02rem}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
b,strong{font-weight:700}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--teal-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--teal-2);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it. Nunito Sans, because
   Crete Round has no bold and a tracked 13.5px slab reads as a mistake. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:0.8438rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
  margin:0 0 10px;
}
.eyebrow::before{content:"";width:16px;height:16px;flex:0 0 auto;border-radius:50%;
  border:3px solid var(--clay)}

/* ---- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 30px;
  font-family:var(--text);font-size:1rem;font-weight:800;letter-spacing:.01em;
  border:2px solid transparent;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--teal);color:#fff;
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--teal-d);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--clay{background:var(--clay-d)}
.btn--clay:hover{background:#87472f}
.btn--lg{min-height:62px;padding:18px 36px;font-size:1.06rem}
.btn--ghost{background:none;color:var(--teal-d);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--teal-d);border-color:var(--teal)}
.btn--wide{width:100%}

/* ---- topline strip: role, lot, dose and count, guarantee, order phone.
   Five facts a buyer wants before reading anything, above the navigation, so
   the nav does not have to carry them. Above CRITICAL-END because it is the
   first thing painted. */
.util{background:var(--teal-d);color:var(--on-teal);font-size:0.9062rem;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:6px;height:1px;background:#5c8d90;
  flex:0 0 auto;margin-right:11px}
.util b{color:#fff;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}

/* ---- header: the spine carries the identity, destinations flow beneath */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);border-bottom:1px solid var(--line)}
.nav__top{display:flex;align-items:center;gap:18px;padding-block:11px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--teal-d)}
.brand__glyph{width:32px;height:32px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class: brand_marks.py rewrites the
   svg inside .brand and does not carry the class onto its replacement, so a
   rule keyed only to the class stops applying the moment the tool runs. */
.brand>svg{width:32px;height:32px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-family:var(--display);font-size:1.44rem;font-weight:400;letter-spacing:-.01em}
.bw b em{font-style:normal;color:var(--clay-d)}
.bw small{font-size:0.9062rem;font-weight:700;color:var(--ink-3)}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav__tel{text-align:right;line-height:1.24}
.nav__tel b{display:block;font-size:1.02rem;font-weight:800;color:var(--teal-d)}
.nav__tel span{font-size:.8125rem;font-weight:700;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 20px;font-size:.95rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:2px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--teal-d);margin:0 0 5px}
.burger span:last-child{margin:0}
/* one flowing row of destinations, on a stone strip under the identity */
.nav__flow{background:var(--tint);border-top:1px solid var(--line)}
.menu{
  display:flex;flex-wrap:nowrap;gap:0 22px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:42px;
}
.menu a{
  display:inline-block;padding:10px 0;white-space:nowrap;
  font-size:.9062rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--teal-d)}
.menu a[aria-current="page"]{color:var(--teal-d);border-bottom-color:var(--clay)}
.menu__more{display:none}

/* ---- hero: copy LEFT mounted on a teal rule, bottles RIGHT standing free */
.hero{position:relative;background:var(--paper);padding:30px 0 52px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:36px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0;
  border-left:3px solid var(--teal);padding-left:26px}
.hero h1{margin:0 0 12px}
.hero h1 em{font-style:normal;color:var(--clay-d)}
.hero .eyebrow{color:var(--teal-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--clay);border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 20px;margin:0 0 14px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .7em;font-size:1.0625rem}
.answer p:last-child{margin:0}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 16px;max-width:58ch}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 16px;
  font-size:0.9688rem;font-weight:700;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:800}
.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:700;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:var(--radius);
}
.factpills li b{color:var(--teal-d);font-weight:800}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);
  border-top:3px solid var(--clay);padding:13px 15px;border-radius:0 0 var(--radius) var(--radius)}
.figures b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:400;
  color:var(--teal-d);line-height:1.12}
.figures span{display:block;font-size:0.9062rem;font-weight:600;color:var(--ink-3);margin-top:3px}
/* the bottles stand on the stone, no plate behind them */
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px;background:none}
.hero__card img{width:100%;max-width:400px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 22px 30px rgba(32,38,43,.22))}
.hero__cap{margin:14px 0 0;font-size:.90625rem;font-weight:700;color:var(--ink-2);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;
  font-size:0.9062rem;font-weight:700;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:800}

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

@media (max-width:760px){
  /* Five items wrap to three lines and eat 103px of an 844px screen. Keep the
     role, the guarantee and the order phone. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}

/* --- 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){
  /* display:contents promotes nine copy children to grid items, so the row gap is paid eight times over on a stacked hero. */ .hero__grid{grid-template-columns:1fr;gap:16px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 18px}
  .hero__cta{order:5}
  .hero__road{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:24px 0 36px}
  .hero__media{margin:2px 0 12px}
  .hero__card{padding:4px}
  .hero__card img{max-width:250px}
}
@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 --- */

/*!SITE-HOME-CRIT-START*/
/* ---- goflexguard.com home page: ground, motif and the two layout rules ----
   Design slot for this site: an 18px card corner, a 12px control corner, ONE
   soft lift with no tight contact stop, a corner-flag ribbon on the pricing
   row, and a "settle" hero motif - a soft halo that arrives once, settles,
   and then breathes very slowly.

   SCOPE. Every selector below starts at the hero or at a body that contains
   one. class="hero" is on index.html and on no other page of this site, so
   the whole block is inert on the other 34 pages even though it is inlined
   into all of their heads.

   WHY THESE ARE ABOVE THE MARKER. Two of them move a box and have to be:
   the desktop reading order of the hero copy column, and the raise on the
   recommended pack. The hero GROUND and the hero MOTIF are paint and would
   normally sit below the marker with the rest of it - they are here because
   the arc-and-dot motif they replace is itself above the marker. Leave the
   replacement below it and the first frame paints the old rotating arc and
   the old hard diagonal band and then swaps them, in the one part of the page
   the reader is looking at. Nothing else paint-related is up here.

   MEASURED FIRST, at 1440x900: the hero buy button already sat at y=619 with
   its foot at y=688, i.e. on the first screen with 212px to spare. The copy
   column did not need reordering to rescue the button, and the order below is
   therefore a reading order, not a rescue: the only thing that actually moves
   is the guarantee line, up from under a 138px paragraph of prose to directly
   beneath the buttons. */

/* The ground: stone, with the teal gathered softly behind the product and a
   little clay warmth in the opposite corner, in place of one hard diagonal
   band drawn across the whole hero. */
body:has(.hero) .hero{
  background:
    radial-gradient(1020px 660px at 79% 34%, rgba(0,118,126,.20) 0%,
                    rgba(0,118,126,.10) 38%, rgba(0,118,126,0) 68%),
    radial-gradient(720px 520px at 2% 96%, rgba(196,120,93,.13) 0%,
                    rgba(196,120,93,0) 62%),
    linear-gradient(176deg, #f6f4f0 0%, #eeece6 100%);
}

/* The motif lives on the MEDIA column's pseudo-elements and never on the
   product image, which is the LCP element and is preloaded. Both circles are
   sized in percent of the media column - 158% and 124% of a 429px column
   against a 420px card - so they read OUTSIDE the card instead of vanishing
   under it. The wash fades out at 78% of its own radius, so the visible disc
   is about 530px: still wider and taller than the card, and it never reaches
   the hero's horizontal clip edge.

   The ring arrives once, overshoots a little and settles. The wash then
   breathes on a 34-second cycle, about four breaths a minute. These are
   capsules taken daily for weeks, not an energy drink.

   Both rules replace the rotating arc and the dot declared further up this
   block, so every property those set is restated here rather than left to
   inherit - including height, which the old dot pinned at 10px. */
body:has(.hero) .hero__media::before{
  content:"";position:absolute;left:50%;top:50%;z-index:1;
  width:158%;height:auto;aspect-ratio:1;translate:-50% -50%;
  border:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(0,118,126,.22) 0%, rgba(0,118,126,.13) 44%,
    rgba(0,118,126,.05) 66%, rgba(0,118,126,0) 78%);
  opacity:0;transform:scale(.9);
  animation:gfgHaloArrive 3.6s cubic-bezier(.16,.74,.26,1) .2s 1 both,
            gfgHaloBreathe 34s ease-in-out 4s infinite;
}
body:has(.hero) .hero__media::after{
  content:"";position:absolute;left:50%;top:50%;z-index:1;
  width:124%;height:auto;aspect-ratio:1;translate:-50% -50%;
  border:1px solid rgba(3,69,75,.22);border-radius:50%;
  background:none;pointer-events:none;
  opacity:0;transform:scale(.82);
  animation:gfgRingArrive 4.4s cubic-bezier(.12,.78,.2,1) .1s 1 both;
}
@keyframes gfgHaloArrive{
  0%{opacity:0;transform:scale(.9)}
  58%{opacity:1;transform:scale(1.03)}
  100%{opacity:.94;transform:scale(1)}
}
@keyframes gfgHaloBreathe{
  0%,100%{opacity:.88;transform:scale(.995)}
  50%{opacity:1;transform:scale(1.03)}
}
@keyframes gfgRingArrive{
  0%{opacity:0;transform:scale(.82)}
  62%{opacity:.9;transform:scale(1.02)}
  100%{opacity:.62;transform:scale(1)}
}
/* Reduced motion keeps the SETTLED frame instead of deleting the motif. The
   rule further up this block hides both pseudo-elements outright with
   !important, so this one has to carry !important to reach past it. */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::before{
    animation:none!important;opacity:.9!important;transform:scale(1)!important}
  body:has(.hero) .hero__media::after{
    animation:none!important;opacity:.6!important;transform:scale(1)!important}
}

@media (min-width:981px){
  /* Desktop reading order: eyebrow, headline, the quick answer, the buttons,
     the guarantee line, then the evidence. The phone order is composed
     separately under 981px with display:contents and is left alone. */
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero .answer{order:3}
  .hero__cta{order:4}
  .hero__sub{order:5}
  .hero__road{order:6}
  .hero .factpills{order:7}
  .hero .figures{order:8}
}
@media (min-width:761px){
  /* The recommended tier stands 18px proud of its neighbours. margin-top and
     never transform: site.js sets a data-reveal attribute on every
     .sec .card--pack, and the revealed state sets transform:none, which would
     cancel a transform raise the moment the row scrolled into view. The row
     is align-items:stretch, so the card grows by the same 18px it rises, its
     foot stays on the row's baseline, and the Add To Cart button pinned there
     with margin-top:auto keeps the shared button baseline. Above 761px only:
     below that the row is a single column and a negative margin would simply
     pull the first card up into the section heading. */
  body:has(.hero) .prices>.card--pack.featured{margin-top:-18px}
}
/*!SITE-HOME-CRIT-END*/

/* ---- hero motif -- pivot-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(160deg,#f3f1ec,#c7dbd8 46%,#f3f1ec)}.hero__media::before{content:'';position:absolute;left:50%;top:50%;width:118%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:1;pointer-events:none;border:2px solid transparent;border-top-color:rgba(0,118,126,0.55);transform-origin:50% 50%;animation:gfgPivot 13s cubic-bezier(.45,.05,.4,1) infinite}.hero__media::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;translate:-50% -50%;border-radius:50%;z-index:1;pointer-events:none;background:rgba(0,118,126,0.50);animation:gfgDot 13s ease-in-out infinite}@keyframes gfgPivot{0%,100%{transform:rotate(-14deg)}40%,60%{transform:rotate(14deg)}}@keyframes gfgDot{0%,100%{opacity:.3}50%{opacity:.8}}
@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 */
.sec{padding:58px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
/* :not(.btn) is load-bearing -- without it this rule repainted the pack
   buttons' own labels teal-on-teal at 1.18:1 inside the tinted pricing band. */
.sec--tint a:not(.btn),.sec--tint .eyebrow{color:var(--teal-ink)}
.sec--dark{background:var(--teal-d);color:var(--on-teal)}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:var(--on-teal)}
.sec--dark .eyebrow{color:#8fd0cf}
.sec--dark .eyebrow::before{border-color:#e0a184}
.sec--dark a{color:#9fe0df}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec--rule{border-top:1px solid var(--line)}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:var(--on-teal)}

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

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

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

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--teal);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 22px 20px 70px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:34px;height:34px;
  display:grid;place-items:center;background:var(--teal);color:#fff;
  font-family:var(--text);font-weight:800;font-size:1rem;border-radius:50%;
}
.step,.card,.ingcard,.faq__body,.callout,.alert,.keypoints{overflow-wrap:anywhere}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: flat, a clay hairline along the top edge */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid>*{min-width:0}
.card{position:relative;background:var(--panel);border:1px solid var(--line);
  border-top:3px solid var(--clay);border-radius:0 0 var(--radius) var(--radius);
  padding:22px 22px 20px}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#0a565c;border-color:#12676d;border-top-color:#e0a184}

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

/* ---- image beside copy */
/* A .split is a pair: the picture and the paragraph that belongs to it start
   on the same line. Centring them put the first line of copy 115-197px below
   the top of its own image (measured on this site at 1440), so the sentence
   floated in the middle of the column with dead air above and below it and
   stopped reading as a caption for 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: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. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel)}
.split__body p:last-child{margin:0}
/* Both pictures used in a .split here are 1:1 artwork. Filled to a 552px half
   of the 1180px wrap they stand two and three times the height of the two or
   three paragraphs beside them, and a square that tall beside 160px of copy is
   what makes the pair read as two unrelated things however they are aligned.
   The cap is on the HEIGHT and the width follows it, so a wide panel shot --
   whose height is set by the column width, not by this rule -- is untouched.
   Desktop only: below 761px the split is one column and the picture should
   fill the phone. */
@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:20px;text-align:center}
.stats div b{display:block;font-family:var(--display);font-size:2.1rem;font-weight:400;
  color:#fff;line-height:1.12}
.stats div span{display:block;font-size:.9375rem;color:var(--on-teal);margin-top:4px}

/* ---- label amount versus research amount */
.versus{display:grid;grid-template-columns:1.1fr .72fr 1.5fr;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem}
.versus>div:nth-child(3n+1){font-weight:700;background:#f7f4ee}
.versus__h{background:var(--teal-d)!important;color:#fff;font-family:var(--text);
  font-weight:800;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--teal);border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.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(--teal-d);padding:4px 12px;border-radius:var(--radius);white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel.
   Three cards that share their edges, one image slot and one button baseline.
   The height lives here and not on the img attributes, which must keep stating
   each file's true ratio or fix_img_dims.py rewrites them and CLS gets worse. */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--panel);
  border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);
  border-radius:var(--radius-lg);overflow:hidden;position:relative;padding:0}
.card--pack.featured{border-color:var(--teal);box-shadow:var(--shadow-lg)}
/* The head stacks rather than ranging the supply line to the right edge.
   pack_cta.py pins .pack__flag to the card's top-right corner at z-index 3,
   and on the two flagged cards that ribbon printed straight over "90-day
   supply" and "180-day supply": the flag ran x747-908 and the words sat at
   x793-888, so 15px of a 24px line was painted out and only the descenders
   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 one baseline. */
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:12px 20px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:2px;min-height:58px}
.card--pack.featured .pack__head{background:var(--teal-d);border-bottom-color:var(--teal-d)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.14rem;font-weight:400;color:var(--teal-d)}
.pack__head span{font-size:.875rem;font-weight:800;color:var(--ink-3)}
.pack__flag{position:absolute;right:0;top:0;background:var(--clay-d);color:#fff;
  font-size:0.8438rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,170px);object-fit:contain;
  margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.3rem;font-weight:400;color:var(--teal-d);
  line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1rem;top:-.75em}
.pack__unit{display:block;text-align:center;font-size:.90625rem;font-weight:800;
  color:var(--ink-3);margin:4px 0 12px;min-height:22px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;
  font-size:1rem}
.pack__tot b{font-weight:800}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:600}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:800}
.card--pack>.pack__body>.btn{margin-top:auto;min-height:54px}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;
  font-size:.90625rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

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

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.badgewall>*{min-width:0}
.badgewall figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px;color:var(--teal-d)}
.badgewall span{font-size:.90625rem;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:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--teal)}
.stars{color:#c9982c;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(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;
  font-family:var(--display);font-weight:400;font-size:1.1rem;color:var(--teal-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;
  font-family:var(--text);font-size:1.34rem;font-weight:400;color:var(--clay-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.0625rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's 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:18px;background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--teal);border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:52px;height:52px;display:grid;place-items:center;
  background:var(--teal-d);color:#fff;font-family:var(--text);font-weight:800;font-size:1.02rem;
  border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--teal-d)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--clay);
  border-radius:0 var(--radius) var(--radius) 0;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:18px;text-align:left}
.rel>*{min-width:0}
.rel a{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);
  transition:border-color .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--teal);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.08rem;color:var(--teal-d);
  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:16px;max-width:var(--measure)}
.field label{display:block;font-weight:700;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;
  padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--panel);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:0.9062rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.article h2{scroll-margin-top:130px}
.postmeta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.9375rem;color:var(--ink-3);
  margin:0 0 20px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.toc{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--clay);
  border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--teal-d)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.0625rem}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.posts>*{min-width:0}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column}
.posts article>div{padding:20px 22px}
.posts h3{margin:0 0 8px;font-size:1.12rem}
.posts p{font-size:1.0625rem;color:var(--ink-2)}
.posts .meta{font-size:.9062rem;color:var(--ink-3);margin:0}
.article .final--media{grid-template-columns:1fr;gap:18px;text-align:left}
.article .final__img img{width:150px}

/* ---- footer: a teal band of contact facts above a stone index */
.fcta{background:var(--tint);border-top:1px solid var(--line);padding:46px 0 50px}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--teal);
  padding:28px 30px;border-radius:0 var(--radius) var(--radius) 0}
.fcta__eye{display:inline-block;font-size:.8438rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--clay-d);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.6rem;font-weight:400;line-height:1.24;
  color:var(--teal-d);margin:0 0 10px}
.fcta p{color:var(--ink-2)}
.fcta__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}
.fcta__img img{width:250px}
footer{background:var(--paper)}
.fband{background:var(--teal-d);color:var(--on-teal)}
.fband__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:28px;padding-block:38px}
.fbrand{font-family:var(--display);font-size:1.7rem;font-weight:400;color:#fff;
  letter-spacing:-.01em;line-height:1}
.fbrand span{color:#e0a184}
.frole{font-size:.9375rem;color:var(--on-teal);margin:8px 0 14px}
.fband p{font-size:1.0625rem;color:var(--on-teal);margin:0 0 .7em}
.fband b{color:#fff;font-weight:700}
.fband a{color:#fff;text-decoration:none;border-bottom:1px solid #4d8487}
.fband a:hover{border-bottom-color:#fff}
.fhead{font-size:.8438rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8fb9bb;margin:0 0 10px}
.findex{padding-block:38px}
.findex__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px}
.findex__grid>*{min-width:0}
.fh{font-size:.8438rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px}
.findex ul{list-style:none;margin:0 0 20px;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(--teal)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:20px;
  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-block:0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--tint);border-top:1px solid var(--line);padding-block:28px 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--teal-d)}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;
  background:var(--clay)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem}

/* ---- sticky buy bar. left is offset by the spine: a fixed element is
   positioned against the viewport, not against the body's content box. */
.buybar{position:fixed;left:var(--spine);right:0;bottom:0;z-index:90;background:var(--teal-d);
  color:#fff;transform:translateY(105%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;
  padding:12px 22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:var(--on-teal)}
.buybar .btn{margin-left:auto;flex:0 0 auto;background:var(--clay-d)}
.buybar .btn:hover{background:#87472f}

/* ---- 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. The row sheds items; it never wraps. */
@media (max-width:1300px){.menu{gap:0 17px}.menu a{font-size:.875rem}}
@media (max-width:1160px){.nav__tel{display:none}}
/* three number tiles in a column under 200px read as one word a line */
@media (max-width:1100px){.figures{grid-template-columns:minmax(0,1fr);gap:8px}}
@media (max-width:1100px){.findex__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The hero stacks at 980 and not a pixel higher: the sticky product column
   below is scoped to min-width:981px, and a stacked hero with a sticky column
   is a column with no taller sibling to travel against. */
@media (max-width:980px){
  /* display:contents promotes nine copy children to grid items, so the row gap
     is paid eight times over on a stacked hero. */
  .hero__grid{grid-template-columns:1fr;gap:16px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 18px}
  .answer{order:4}
  .hero__cta{order:5}
  .hero__road{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
}
@media (max-width:1040px){
  :root{--navh:70px}
  .menu{display:none;flex-direction:column;flex-wrap:wrap;align-items:stretch;gap:0;
    padding:6px 0 12px}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;white-space:normal;border-bottom:1px solid var(--line-2)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line-2)}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
  .fband__grid{grid-template-columns:1fr 1fr}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  :root{--spine:6px}
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding:24px 0 36px}
  .hero__media{margin:2px 0 12px}
  .hero__card{padding:4px}
  .hero__card img{max-width:250px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns: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 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{grid-template-columns:1fr 1fr}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .findex__grid,.fband__grid{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
}

/* ---- hero: the bottles settle on the stone ------------------------------
   Transform only, never opacity: the product is the LCP element and an element
   starting at opacity:0 is not recorded as painted.

   There is no plate behind the bottles by design, so they need their own
   ground: a soft elliptical shadow under them. hero_motifs.py owns the arc
   that pivots around them and the dot that marks the pivot. */
.hero__card{isolation:isolate}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:22px;translate:-50% 0;
  width:52%;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(32,38,43,.26),transparent 74%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  /* The settle goes on the CARD, never on the img: the image is the LCP
     element and it is preloaded. */
  .hero__card{animation:fgSettle 9s ease-in-out infinite}
  @keyframes fgSettle{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}

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

   --navh is measured and published by site.js: 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; }
}

/* ---- a figure alone on the last row of a two-column shot grid */
.shots.s2>figure:last-child:nth-child(odd){grid-column:1/-1;
  max-width:calc((100% - 20px) / 2);margin-inline:auto}

/* --- 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}
/* brand mark: bracket construction */
.brand{position:relative;padding-inline:14px}.brand::before,.brand::after{content:'';position:absolute;top:2px;bottom:2px;width:8px;border:2px solid #00767e}.brand::before{left:0;border-right:0}.brand::after{right:0;border-left:0}

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

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

/*!SITE-HOME-PAINT-START*/
/* ---- goflexguard.com home page: modern surface --------------------------
   Paint only. Radius, shadow, background, colour, transition and transform
   move no box, so this block needs restamp_assets.py rather than a rebuild.
   (The hero ground, the hero motif and the two layout rules are the
   exception and sit above the critical marker, for the reasons written
   there.)

   Every selector is scoped to a body that contains a .hero, which is
   index.html and no other page of this site. That scope is also what buys the
   specificity: modern_surface.py and footer_type.py strip and re-append their
   own blocks AFTER this one on every build, so nothing here may rely on
   coming last in the file. modern_surface targets bare .card and .card--pack
   at one class of specificity; every rule below carries at least two.

   Slot: 18px on cards and panels, 12px on controls, chips fully round, and a
   SINGLE soft lift - one wide ambient stop, no tight contact stop - tinted
   with this site's own ink (32 38 43) or its deep teal (3 69 75), never
   neutral black. */

body:has(.hero){
  --gfg-rc:18px;                                    /* cards and panels */
  --gfg-rk:12px;                                    /* buttons and controls */
  --gfg-lift:0 12px 30px rgba(32,38,43,.11);
  --gfg-lift-up:0 18px 40px rgba(32,38,43,.17);
  --gfg-lift-teal:0 14px 32px rgba(3,69,75,.20);
  --gfg-lift-teal-up:0 20px 46px rgba(3,69,75,.27);
  --gfg-buy:linear-gradient(135deg,#0b7d84 0%,#046068 52%,#03454b 100%);
  --gfg-buy-up:linear-gradient(135deg,#0a6f76 0%,#04555c 52%,#02363b 100%);
}

/* ---- panels: one corner, one lift */
body:has(.hero) .card,
body:has(.hero) .step,
body:has(.hero) .keypoints,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .byline,
body:has(.hero) .ingcard,
body:has(.hero) .final,
body:has(.hero) .split__img,
body:has(.hero) .split__img img,
body:has(.hero) .answer,
body:has(.hero) .faq,
body:has(.hero) .tablewrap,
body:has(.hero) .versus,
body:has(.hero) .figures div,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure{
  border-radius:var(--gfg-rc);
  box-shadow:var(--gfg-lift);
}
/* The Quick Answer is the first panel on the money page: give it a sheet of
   paper rather than a flat fill, and keep its clay spine. */
body:has(.hero) .answer{
  background-image:linear-gradient(180deg,#fffefb 0%,#fbf8f2 100%);
}
/* Chips are chips: fully round, one hairline of depth. */
body:has(.hero) .factpills li,
body:has(.hero) .ing__dose{border-radius:999px}
body:has(.hero) .factpills li{box-shadow:0 2px 8px rgba(32,38,43,.07)}
body:has(.hero) .byline__mark{border-radius:var(--gfg-rk)}
/* The bottles stand on stone with no plate behind them, so their own shadow
   is the only thing seating them. Tint it with the deep teal rather than grey
   so it belongs to the halo it now sits inside. */
body:has(.hero) .hero__card img{
  filter:drop-shadow(0 24px 32px rgba(3,69,75,.26));
}
/* The card's float is a settle, not a bob: 9s reads as fidgeting under a halo
   that breathes on a 34s cycle. Duration only - the keyframe is untouched. */
body:has(.hero) .hero__card{animation-duration:26s}

/* ---- controls: 12px, and the BUYING button is the only gradient ----------
   The pair has to read as two weights. Every checkout link on this site is
   href="order/..." , so the attribute selector picks out exactly the buying
   buttons and nothing else; the secondary "See the pricing" button keeps its
   flat outline. #main keeps it off the header button and the sticky bottom
   bar, which are clay on teal by design and would lose their contrast. */
body:has(.hero) .btn{
  border-radius:var(--gfg-rk);
  transition:background-color .2s ease,background-image .2s ease,
             box-shadow .22s ease,transform .18s ease,
             border-color .2s ease,color .2s ease;
}
body:has(.hero) #main a.btn[href^="order/"]{
  background-image:var(--gfg-buy);
  border-color:transparent;
  box-shadow:var(--gfg-lift-teal);
}
body:has(.hero) #main a.btn[href^="order/"]:hover{
  background-image:var(--gfg-buy-up);
  box-shadow:var(--gfg-lift-teal-up);
  transform:translateY(-2px);
}
body:has(.hero) #main a.btn[href^="order/"]:active{transform:translateY(0)}
body:has(.hero) .btn--ghost{background-image:none;box-shadow:none}
body:has(.hero) .btn--ghost:hover{
  background-color:var(--wash);border-color:var(--teal);
  box-shadow:var(--gfg-lift);transform:translateY(-2px);
}
body:has(.hero) .btn:focus-visible{outline:3px solid var(--clay);outline-offset:3px}
body:has(.hero) .buybar .btn{border-radius:var(--gfg-rk)}

/* ---- a surface a reader can click answers the pointer, 2px */
body:has(.hero) .card--pack,
body:has(.hero) .badgewall figure,
body:has(.hero) .shots figure,
body:has(.hero) .faq summary{
  transition:box-shadow .22s ease,transform .22s ease,background-color .22s ease;
}
body:has(.hero) .card--pack:hover,
body:has(.hero) .badgewall figure:hover,
body:has(.hero) .shots figure:hover{
  box-shadow:var(--gfg-lift-up);transform:translateY(-2px);
}
body:has(.hero) .faq summary:hover{background-color:#f7f4ef}
body:has(.hero) .faq summary:focus-visible{outline:3px solid var(--clay);outline-offset:-3px}

/* ---- the pricing row ----------------------------------------------------
   The shared button baseline is engineered upstream - fixed head min-height,
   a fixed image box, pack__body flex:1 and the button on margin-top:auto -
   and nothing here touches any of it. The raise on the featured card is a
   margin above the critical marker, never a transform, because the reveal
   pass sets transform:none. */
body:has(.hero) .prices .card--pack{
  border-radius:var(--gfg-rc);
  box-shadow:inset 0 0 0 1px var(--line),var(--gfg-lift);
}
body:has(.hero) .prices .card--pack.featured{
  border-color:var(--teal);
  box-shadow:inset 0 0 0 1px rgba(0,118,126,.35),var(--gfg-lift-teal);
}
body:has(.hero) .prices .card--pack.featured:hover{
  box-shadow:inset 0 0 0 1px rgba(0,118,126,.35),var(--gfg-lift-teal-up);
  transform:translateY(-2px);
}
body:has(.hero) .prices .card--pack.featured .pack__head{
  background-image:linear-gradient(135deg,#0a6f76 0%,#03454b 100%);
}
body:has(.hero) .prices .card--pack.featured .pack__body{
  background-image:linear-gradient(180deg,#eff7f6 0%,#fffdf9 58%);
}
/* The ribbon is a corner flag: squared off into the corner it is pinned to,
   with the tail notched out of its free edge. clip-path only, so the badge
   keeps the box it already had. */
body:has(.hero) .prices .pack__flag{
  border-radius:0;
  /* The light end of the ribbon was #b56b4e, which carries the white
     uppercase label at 4.06:1 -- under the 4.5 an 13.5px bold label needs.
     Darkened to the top of the clay ramp: 4.70:1, and the gradient still
     reads as one. */
  background-image:linear-gradient(135deg,#a86146 0%,#8a4a34 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,8px 50%);
  box-shadow:0 8px 18px rgba(32,38,43,.20);
}
/* Dashed separators between the feature rows, drawn on a pseudo-element
   inside the 6px gap the list already has. A border on the row itself would
   have added 1px to every row and changed the height of all three cards. */
body:has(.hero) .prices .pack__perks li+li::after{
  content:"";position:absolute;left:0;right:0;top:-4px;
  border-top:1px dashed var(--line-2);pointer-events:none;
}
body:has(.hero) .prices .card--pack.featured .pack__perks li+li::after{
  border-top-color:rgba(0,118,126,.32);
}

/* ---- chrome */
body:has(.hero) .nav{box-shadow:0 8px 24px rgba(32,38,43,.06)}
body:has(.hero) .buybar{box-shadow:0 -12px 34px rgba(32,38,43,.20)}

/* ---- everything off under reduced motion */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .prices .card--pack.featured:hover,
  body:has(.hero) .badgewall figure:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) #main a.btn[href^="order/"]:hover,
  body:has(.hero) .btn--ghost:hover{transform:none}
  body:has(.hero) .hero__card{animation:none!important}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer li a{font-size:16px}
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fh{font-size:15px}
footer .fhead{font-size:16px}
footer .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 16 box-shadow declaration(s)
   and 0 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (32,38,43), 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(32,38,43,.06), 0 6px 18px rgba(32,38,43,.07);
  --lift:0 2px 6px rgba(32,38,43,.09), 0 16px 34px rgba(32,38,43,.14);
}

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

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.card,
.step,
.keypoints,
.alert,
.toc,
.byline,
.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}