/* ==== 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:"Mulish Fallback";src:local("Arial");font-weight:400;size-adjust:104.85%;ascent-override:95.85%;descent-override:23.84%;line-gap-override:0.00%}
@font-face{font-family:"Mulish Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:100.40%;ascent-override:100.10%;descent-override:24.90%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   BELLYFLUSH - bellyflushdaily.com
   Component system taken from the alkatidde.com reference: centred section
   heads, pill fact chips, circular check ticks, a left-ruled Quick Answer,
   numbered step rows, plan cards, a related-card grid.
   Palette re-derived from the bottle, never from the reference. The label is
   white, the cap band and the wordmark are navy 004076, the foot band and the
   Simple Promise sun are gold f0be06. Ground is a warm ivory that suits both.
   Type: Literata display, Mulish body.
   Chrome slot: centred logo with the menu split left and right, editorial
   two-column footer with small-caps headings, 8px radius, cards ruled top and
   bottom only, flat ivory hero, underline-grow nav and a slow image fade.
   ========================================================================== */
:root{
  /* warm ivory ground */
  --paper:      #fdfaf2;
  --tint:       #f8f2e4;
  --tint2:      #f2e9d5;
  --card:       #ffffff;
  --ink:        #1c2431;
  --ink-dk:     #0e1723;
  --muted:      #57616f;
  --faint:      #696e77;
  --line:       #e6dcc6;
  --line-soft:  #f0e8d8;

  /* the label navy - the lead */
  --navy:       #004076;
  --navy-dk:    #002d54;
  --navy-dp:    #001c37;
  --navy-lt:    #e9f1f8;
  --navy-line:  #bed3e6;

  /* the foot band gold - guarantees, seals, accents */
  --gold:       #f0be06;
  --gold-dk:    #896a03;
  --gold-dp:    #7d6103;
  --gold-lt:    #fdf6dc;
  --gold-line:  #efdda2;

  --shadow:    0 14px 34px -24px rgba(14,23,35,.44);
  --shadow-sm: 0 6px 18px -14px rgba(14,23,35,.34);
  --ease:      cubic-bezier(.22,1,.36,1);

  --r-s: 4px; --r: 8px; --r-l: 8px;

  --display:'Literata','Literata Fallback',Georgia,'Times New Roman',serif;
  --sans:'Mulish','Mulish Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap: 1140px; --prose: 68ch; --measure: 760px; --measure-wide: 980px;
}

/* ---- 2. RESET / BASE ----------------------------------------------------- */
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:104px}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.74;
  color:var(--ink);background:var(--paper);overflow-x:clip;max-width:100%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,iframe,table,figure{max-width:100%}
img{height:auto;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink-dk);font-weight:700;
  line-height:1.2;letter-spacing:-.005em;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.6vw,3.15rem)}
h2{font-size:clamp(1.55rem,3.1vw,2.2rem)}
h3{font-size:1.22rem;line-height:1.3}
h4{font-size:1.02rem}
p{margin:0 0 1.12em}
strong,b{font-weight:700}
::selection{background:var(--gold-lt)}
table{border-collapse:collapse}
section[id]{scroll-margin-top:104px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.prose{max-width:var(--prose)}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--navy);
  padding:10px 16px;border-radius:var(--r-s);z-index:2000}
.skip:focus{left:12px;top:12px}

/* ---- 3. SHARED ATOMS ----------------------------------------------------- */
.eyebrow{display:inline-block;font-family:var(--sans);font-weight:800;font-size:0.8438rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dp);margin-bottom:.9rem}
.note{font-size:0.9062rem;color:var(--faint);line-height:1.65}
.lead{font-size:1.17rem;line-height:1.65;color:var(--muted)}

.pill{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#e7f0f8;
  font-family:var(--sans);font-weight:800;font-size:0.8438rem;letter-spacing:.14em;
  text-transform:uppercase;padding:8px 15px;border-radius:var(--r-s);margin-bottom:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:800;font-size:1rem;padding:.92em 1.7em;
  border-radius:var(--r);cursor:pointer;border:1px solid transparent;min-height:46px;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
  text-decoration:none;line-height:1.15;text-align:center}
.btn:hover{text-decoration:none}
.btn--cta{background:var(--gold);color:var(--navy-dp);border-color:var(--gold-dk);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.btn--cta:hover{background:var(--gold-dk);color:#fff}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy-line)}
.btn--ghost:hover{background:var(--navy-lt);color:var(--navy-dk)}
.btn--dark{background:var(--navy);color:#fff}
.btn--dark:hover{background:var(--navy-dk);color:#fff}
.btn--lg{font-size:1.05rem;padding:1.02em 2em}
.btn--block{display:flex;width:100%}

.sec{padding:72px 0;border-top:1px solid var(--line-soft)}
.sec--tint{background:var(--tint)}
.sec--ivory{background:var(--tint2)}
.sec--tight{padding:50px 0}
.sec__head{max-width:var(--measure);margin-bottom:34px}
.sec--center .sec__head{margin-inline:auto;text-align:center}

/* ---- 4. UTILITY BAR + CENTRED NAV ---------------------------------------- */
.util{background:var(--navy-dp);color:#c7d9e8;font-size:0.9062rem}
.util__row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-block:8px;flex-wrap:wrap}
.util__item b{color:#fff}
.util__tel{color:var(--gold);font-weight:800;white-space:nowrap}
.util__tel:hover{color:#fff;text-decoration:none}
@media(max-width:760px){
  .util__row{justify-content:center;text-align:center;font-size:0.9062rem;gap:5px 14px;padding-block:7px}
  .util__item:nth-child(2),.util__item:nth-child(3){display:none}
}

.nav{position:sticky;top:0;z-index:60;background:rgba(253,250,242,.96);
  backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease}
.nav--stuck{box-shadow:var(--shadow-sm)}
@media(max-width:920px){
  .nav{transition:transform .28s var(--ease),box-shadow .3s ease;will-change:transform}
  .nav--away{transform:translateY(-100%)}
}
@media(prefers-reduced-motion:reduce){.nav{transition:none}}

/* the assigned chrome: brand centred, menu split left and right of it */
.nav__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:18px;padding-block:12px}
.brand{grid-column:2;justify-self:center;display:inline-flex;align-items:center;gap:0;
  font-family:var(--display);font-weight:700;font-size:1.34rem;letter-spacing:-.01em;
  color:var(--navy-dk);white-space:nowrap}
.brand:hover{text-decoration:none}
.brand span{color:var(--gold-dk)}
.brand svg{width:30px;height:30px;flex:none;margin-right:10px}
.menu{display:flex;align-items:center;list-style:none;margin:0;padding:0;
  gap:22px;flex-wrap:nowrap}
.menu--l{grid-column:1;justify-self:end}
.menu--r{grid-column:3;justify-self:end}
.menu a{font-size:.9rem;font-weight:700;color:var(--muted);white-space:nowrap;
  position:relative;padding-bottom:3px}
/* underline-grow, this site's nav motion */
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--gold);transition:right .26s var(--ease)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--navy-dk);text-decoration:none}
.menu a:hover::after,.menu a[aria-current="page"]::after{right:0}
.nav__cta{grid-column:3;justify-self:end;display:flex;align-items:center;gap:12px}
.nav__cta .btn{padding:.62em 1.2em;min-height:40px;font-size:.9rem}
.burger{display:none;background:none;border:0;flex-direction:column;gap:5px;
  cursor:pointer;padding:6px}
.burger span{width:22px;height:2px;background:var(--ink);display:block;border-radius:2px}
@media(max-width:1330px){.menu{gap:17px}.menu a{font-size:.86rem}}
@media(max-width:1200px){.menu{gap:13px}.menu a{font-size:.83rem}}
@media(max-width:1080px){
  .nav__row{grid-template-columns:auto 1fr auto;gap:12px}
  .menu--l,.menu--r{display:none;grid-column:1/-1;flex-direction:column;
    align-items:stretch;gap:0;border-top:1px solid var(--line-soft)}
  .menu--l{grid-row:2}
  .menu--r{grid-row:3}
  .nav.open .menu--l,.nav.open .menu--r{display:flex}
  .menu a{display:block;padding:13px 2px;min-height:44px;font-size:.95rem}
  .menu li+li{border-top:1px solid var(--line-soft)}
  .burger{display:flex;min-height:44px;min-width:44px;align-items:center;justify-content:center;
    grid-column:1;justify-self:start}
  .brand{grid-column:2;justify-self:center}
  .nav__cta{grid-column:3}
}
@media(max-width:430px){.nav__cta .btn{display:none}}

/* ---- 5. STICKY BUY BAR --------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--navy-dp);color:#fff;
  transform:translateY(105%);transition:transform .3s var(--ease);
  box-shadow:0 -6px 22px rgba(0,0,0,.24)}
.buybar.show{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--wrap);margin-inline:auto;padding:11px 22px}
.buybar__t{font-size:.95rem;line-height:1.3}
.buybar__t b{font-family:var(--display);font-size:1.02rem;display:block}
.buybar__t .from{color:var(--gold);font-weight:800}
.buybar .btn{white-space:nowrap}
@media(max-width:560px){.buybar__t{font-size:0.9062rem}.buybar__t b{font-size:.92rem}}

/* ---- 6. HERO (flat ivory, no gradient) ----------------------------------- */
.hero{background:var(--paper);position:relative;border-bottom:1px solid var(--line)}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:start;
  padding-block:54px 62px}
.hero h1{margin-bottom:.4em}
.hero h1 span{color:var(--navy)}
.hero h1 small{display:block;margin-top:.36em;font-size:.36em;font-weight:600;
  letter-spacing:0;line-height:1.3;color:var(--muted);font-family:var(--sans)}
@media(max-width:560px){.hero h1 small{font-size:.46em}}
.hero__sub{font-size:1.12rem;color:var(--muted);margin:0 0 20px;max-width:52ch}
.ticks{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:11px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-weight:500}
.ticks .ck{flex:0 0 21px;height:21px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:.72rem;margin-top:4px;font-weight:700}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.pay{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.pay img{height:26px;width:auto}
.pay span{font-size:0.9062rem;color:var(--navy);font-weight:700}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 20px;padding:0}
.factpills li{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);
  padding:6px 13px;font-size:0.9062rem;font-weight:700;color:var(--navy-dk)}
.factpills li b{color:var(--gold-dp)}

.hero__media{position:relative;text-align:center}
.hero__stick{position:relative;display:inline-block;max-width:100%}
.hero__card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px 26px;box-shadow:var(--shadow);display:inline-block}
.hero__card img{margin:0 auto}
.hero__tag{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
  background:var(--navy);color:#fff;font-family:var(--sans);font-weight:800;font-size:0.9062rem;
  letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:var(--r-s);
  white-space:nowrap}
.floaty{position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);
  padding:9px 13px;box-shadow:var(--shadow);font-family:var(--display);font-weight:700;
  font-size:0.9062rem;line-height:1.2;color:var(--ink-dk);z-index:2}
.floaty small{display:block;color:var(--gold-dp);font-size:0.9062rem;letter-spacing:.07em;
  text-transform:uppercase;font-weight:800;margin-top:2px;font-family:var(--sans)}
.floaty--tl{top:6px;left:-10px}
.floaty--br{bottom:22px;right:-10px}
@media(min-width:1025px){
  .hero__media{position:sticky;top:104px;align-self:start;height:calc(100vh - 104px);
    min-height:360px;display:flex;align-items:center;justify-content:center}
  .hero__stick{max-height:calc(100vh - 140px)}
  .hero__stick img{max-height:calc(100vh - 320px);min-height:170px;width:auto;object-fit:contain}
}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:20px;padding-block:36px 46px}
  .hero__copy{display:contents}
  .hero__copy > .pill{order:1}
  .hero__copy > h1{order:2}
  .hero__copy > .answer{order:4}
  .hero__media{order:3}
  .hero__copy > .hero__cta{order:6}
  .hero__copy > .pay{order:8}
  .hero__copy > .hero__sub{order:7}
  .hero__copy > .factpills{order:8}
  .hero__copy > .ticks{order:5}
  .hero__card{padding:12px 14px}
  .hero__card img{max-width:208px}
  .answer{padding:16px 18px}
  .hero h1{margin-bottom:.3em}
  .floaty{display:none}
}

/* ---- 7. QUICK ANSWER (AEO) ----------------------------------------------- */
.answer{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:19px 23px;margin:20px 0 0;box-shadow:var(--shadow-sm)}
.answer .tag{display:block;font-family:var(--sans);font-weight:800;font-size:0.8438rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold-dp);margin-bottom:.5em}
.answer p{margin:0;font-size:1.062rem}

/* In the hero the answer is not a card: the approved layout runs it as two
   flowing paragraphs under the H1. The wrapper stays because it is the
   speakable selector and the AEO block, but the card styling comes off. */
.hero .answer{background:none;border:0;box-shadow:none;padding:0;margin:18px 0 0}
.hero .answer .tag{display:none}
.hero .answer p{font-size:1.062rem;color:var(--muted);margin:0 0 .85em;max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--ink-dk)}
.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.95rem;color:var(--muted)}
.hero__rating b{color:var(--ink-dk)}
.hero__rating .rev__stars{color:var(--gold-dk);letter-spacing:.08em}
@media(max-width:920px){
  .hero__copy > .hero__rating{order:6}
  .hero__copy > .pay{order:7}
}


/* ---- hero motif -- tide-wash ---------------------------------------- */
.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(185deg,#fdfaf2,#fbefc8 70%)}.hero__media::before{content:'';position:absolute;inset:auto 0 0 0;height:46%;background:radial-gradient(120% 100% at 50% 100%,rgba(240,190,6,0.36),transparent 72%);animation:btTide 13s ease-in-out infinite;z-index:1}@keyframes btTide{0%,100%{transform:translateY(6%) scaleX(1)}50%{transform:translateY(0) scaleX(1.08)}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@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;}
}







/*!SITE-HOME-CRIT-START*/
/* ---- home page, LAYOUT (inlined into every page at build time) ------------
   Scoped to the home page: .hero is on index.html and on no other page of
   this site, and body:has(.hero) is inert everywhere else.

   1. The hero buy button measured at y=1033 on a 1440x900 screen -- 133px
      below the fold, so the money page opened with nothing to click. On
      DESKTOP the copy column becomes a flex column and the buttons move
      above the evidence list: eyebrow, headline, quick answer, BUTTONS,
      payment line, then the evidence. Below 921px the column is composed
      with display:contents and its own order values; that is left alone.
   2. The recommended tier is raised with margin-top, never transform -- the
      reveal pass resets transform to none. align-items:stretch means the
      card's BOTTOM edge does not move, so the three Add-To-Cart buttons stay
      on the one baseline they are engineered to share.
   3. Dashed rules between the price rows, identical on all three cards, so
      the shared baseline is preserved. */
@media(min-width:921px){
  .hero .hero__copy{display:flex;flex-direction:column}
  .hero .hero__copy>*{order:9}
  .hero .hero__copy>.pill{order:1}
  .hero .hero__copy>h1{order:2}
  .hero .hero__copy>.answer{order:3}
  .hero .hero__copy>.hero__sub{order:4}
  .hero .hero__copy>.hero__cta{order:5}
  .hero .hero__copy>.pay{order:6}
  .hero .hero__copy>.hero__rating{order:7}
  .hero .hero__copy>.ticks{order:8}
}
@media(min-width:861px){
  body:has(.hero) .prices .price--best{margin-top:-14px}
}
body:has(.hero) .prices .price__was,
body:has(.hero) .prices .price__tot{border-top:1px dashed var(--line);
  padding-top:.6em;margin-top:.6em}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
.qa{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;max-width:var(--measure-wide);margin:0 auto}
.qa__h{background:var(--navy-lt);padding:14px 22px;font-family:var(--display);font-weight:700;
  font-size:1rem;color:var(--ink-dk);border-bottom:1px solid var(--line)}
.qa dl{margin:0;display:grid;grid-template-columns:36% 1fr}
.qa dt,.qa dd{padding:12px 22px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:700;color:var(--ink-dk)}
.qa dd{color:var(--muted)}
.qa dl>:nth-last-child(-n+2){border-bottom:0}
@media(max-width:620px){
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
}

/* ---- 8. CARDS: ruled top and bottom only --------------------------------- */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:transparent;border:0;border-top:2px solid var(--navy);
  border-bottom:1px solid var(--line);border-radius:0;padding:20px 0 20px;box-shadow:none}
.card .ic{width:52px;height:52px;border-radius:var(--r-s);background:var(--gold-lt);
  display:grid;place-items:center;margin-bottom:14px;overflow:hidden}
.card .ic img{height:34px;width:34px;object-fit:contain}
.card h3{margin-bottom:.4em}
.card p{margin:0;color:var(--muted);font-size:1.062rem}
.card p+p{margin-top:.7em}
.card--gold{border-top-color:var(--gold)}

/* ---- 9. SPLIT / STEPS / BAND --------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split--rev .split__media{order:2}
.split__media img{border-radius:var(--r);border:1px solid var(--line);margin:0 auto}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:26px}.split--rev .split__media{order:0}}
.chips{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.chips li{display:flex;gap:10px}
.chips .ck{color:var(--gold-dk);font-weight:800;flex:none}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;counter-reset:s}
.step{background:transparent;border-top:2px solid var(--gold);border-bottom:1px solid var(--line);
  border-radius:0;padding:20px 0}
.step__n{counter-increment:s;width:36px;height:36px;border-radius:50%;background:var(--navy);
  color:#fff;display:grid;place-items:center;font-family:var(--sans);font-weight:800;
  margin-bottom:13px}
.step__n::before{content:counter(s)}
.step p{color:var(--muted);margin-bottom:0}
@media(max-width:880px){.steps{grid-template-columns:1fr}}

.band{max-width:980px;margin:0 auto;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:#fff}
.band img{width:100%;display:block}
.band__cap{padding:14px 22px;font-size:.87rem;color:var(--muted);
  border-top:1px solid var(--line-soft);background:var(--tint)}

/* ---- 10. SHOTS ----------------------------------------------------------- */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.shots--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:transparent;border-top:2px solid var(--navy);
  border-bottom:1px solid var(--line);border-radius:0;overflow:hidden;padding-bottom:18px}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--tint);margin-top:18px}
.shots figcaption{padding:16px 0 0}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.03rem;
  color:var(--ink-dk);margin-bottom:.35em}
.shots figcaption span{font-size:.92rem;color:var(--muted);display:block}
@media(max-width:940px){.shots,.shots--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.shots,.shots--wide{grid-template-columns:1fr}}

/* ---- 11. INGREDIENTS ----------------------------------------------------- */
.inglist{display:grid;gap:0}
.ing{background:transparent;border-top:1px solid var(--line);border-radius:0;
  padding:26px 0}
.ing:first-child{border-top:2px solid var(--navy)}
.ing__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin-bottom:.7em}
.ing__top h3{margin:0}
.ing__dose{font-family:var(--sans);font-weight:800;font-size:0.8438rem;background:var(--gold-lt);
  color:var(--gold-dp);border:1px solid var(--gold-line);border-radius:var(--r-s);padding:4px 11px}
.ing__lat{font-size:0.9062rem;color:var(--faint);font-style:italic}
.ing p{margin:0 0 .8em}
.ing p:last-child{margin-bottom:0}
.ingthumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.ingthumbs figure{margin:0;text-align:center}
.ingthumbs img{width:100%;border-radius:var(--r);border:1px solid var(--line)}
.ingthumbs figcaption{font-size:0.9062rem;color:var(--muted);margin-top:7px;line-height:1.35}
@media(max-width:900px){.ingthumbs{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.ingthumbs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- 12. PRICING --------------------------------------------------------- */
.prices{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:24px;align-items:stretch;
  padding-top:16px}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:30px 22px 24px;text-align:center;position:relative;display:flex;flex-direction:column}
.price--best{border:2px solid var(--navy);background:#fff}
.price--ordered{border-color:var(--gold-line)}
.price__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--navy);color:#fff;font-family:var(--sans);font-weight:800;font-size:0.9062rem;
  letter-spacing:.11em;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-s);
  white-space:nowrap}
.price--ordered .price__badge{background:var(--gold);color:var(--navy-dp)}
.price img{margin:0 auto 14px;height:auto}
.price h3{margin-bottom:.2em}
.price--best h3{font-size:1.5rem}
.price__supply{font-size:.87rem;color:var(--faint);margin-bottom:.9em}
.price__each{font-family:var(--display);font-weight:700;font-size:2.4rem;color:var(--navy);line-height:1}
.price--best .price__each{font-size:2.9rem}
.price__each small{font-size:0.9062rem;font-weight:600;color:var(--muted);display:block;margin-top:4px;
  font-family:var(--sans)}
.price__was{color:var(--faint);text-decoration:line-through;font-size:.91rem}
.price__tot{font-weight:700;margin:.5em 0 1em}
.price__save{display:inline-block;background:var(--gold-lt);color:var(--gold-dp);
  border:1px solid var(--gold-line);border-radius:var(--r-s);font-family:var(--sans);
  font-weight:800;font-size:0.8438rem;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;margin-left:6px;vertical-align:2px}
.price .btn--block{margin-top:auto}
.price__ship{font-size:0.9062rem;color:var(--navy);font-weight:600;margin:.8em 0 0}
@media(max-width:1040px){.prices{grid-template-columns:1fr 1.08fr 1fr;gap:14px}
  .price{padding:26px 15px 20px}.price--best .price__each{font-size:2.5rem}}
@media(max-width:860px){
  .prices{grid-template-columns:1fr;gap:28px;max-width:430px;margin-inline:auto}
  .price--best{order:1}.price--ordered{order:2}.price--basic{order:3}
  .price--best{transform:none}
}

/* ---- 13. STATS / REVIEWS ------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.stat{background:transparent;border-top:2px solid var(--gold);border-bottom:1px solid var(--line);
  padding:18px 0;text-align:center}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:2.1rem;
  color:var(--navy);line-height:1}
.stat span{font-size:0.9062rem;color:var(--muted)}
@media(max-width:880px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.rbars{display:grid;gap:9px;max-width:460px}
.rbar{display:grid;grid-template-columns:44px 1fr 46px;align-items:center;gap:11px;font-size:.9rem}
.rbar .track{height:9px;background:var(--tint2);border-radius:999px;overflow:hidden}
.rbar .fill{height:100%;background:var(--navy);border-radius:999px}
.rev__stars{color:var(--gold-dk);letter-spacing:.08em}

/* ---- 14. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:0;max-width:860px;margin-inline:auto;border-top:2px solid var(--navy)}
.faq details{background:transparent;border-bottom:1px solid var(--line); padding: 0 2px}
.faq summary{font-family:var(--display);font-weight:700;color:var(--ink-dk);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-dk);font-weight:800;flex:none;font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .faq__b{padding-top:.85em;color:var(--muted)}
.faq .faq__b p:last-child{margin-bottom:0}

/* ---- 15. CALLOUTS / ALERTS ----------------------------------------------- */
.callout{background:var(--navy-lt);border:1px solid var(--navy-line);border-left:4px solid var(--navy);
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px}
.callout p:last-child{margin-bottom:0}
.alert{background:var(--gold-lt);border:1px solid var(--gold-line);border-left:4px solid var(--gold-dk);
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px}
.alert p:last-child{margin-bottom:0}
.flag{display:inline-block;font-family:var(--sans);font-weight:800;font-size:0.8438rem;
  letter-spacing:.11em;text-transform:uppercase;background:var(--navy);color:#fff;
  border-radius:var(--r-s);padding:5px 12px;margin-bottom:1rem}

/* ---- 16. TABLES ---------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.dtable{width:100%;font-size:1rem;min-width:520px}
.dtable th,.dtable td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.dtable thead th{background:var(--navy);color:#fff;font-family:var(--sans);font-weight:800;
  font-size:0.9062rem;letter-spacing:.09em;text-transform:uppercase}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable tbody tr:nth-child(even){background:var(--tint)}
.facttab{width:100%;font-size:.94rem}
.facttab th,.facttab td{padding:12px 0;text-align:left;border-bottom:1px solid var(--line-soft)}
.facttab th{width:38%;font-weight:700;color:var(--ink-dk)}

/* ---- 17. FORMS ----------------------------------------------------------- */
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.form__row{display:grid;gap:16px;margin-bottom:16px}
@media(min-width:660px){.form__row--2{grid-template-columns:1fr 1fr}}
.form label{display:block;font-weight:700;font-size:0.9062rem;margin-bottom:6px;color:var(--ink-dk)}
.form input,.form select,.form textarea{width:100%;font-family:inherit;font-size:1rem;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper);
  color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--navy);
  outline-offset:1px;background:#fff}
.form textarea{min-height:130px;resize:vertical}
.form__hint{font-size:0.9062rem;color:var(--faint);margin-top:6px}
.form__msg{margin-top:14px;padding:12px 16px;border-radius:var(--r-s);background:var(--navy-lt);
  border:1px solid var(--navy-line);font-size:.92rem;display:none}
.form__msg.show{display:block}

/* ---- 18. TRUST STRIP ----------------------------------------------------- */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 38px;
  padding-block:20px}
.trust__item{display:flex;align-items:center;gap:10px;font-size:0.9062rem;font-weight:700;color:var(--muted)}
.trust__item img{height:40px;width:auto}
.badgewall{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.badgewall figure{margin:0;width:150px;text-align:center}
.badgewall img{height:64px;width:auto;margin:0 auto 8px}
.badgewall figcaption{font-size:0.8438rem;color:var(--muted);line-height:1.4}

/* ---- 19. FINAL CTA ------------------------------------------------------- */
.final{background:var(--navy-dp);color:#d6e4f0;border-radius:var(--r);padding:44px 40px;
  position:relative;overflow:hidden;border-top:4px solid var(--gold)}
.final h2{color:#fff}
.final p{color:#c0d3e3;max-width:56ch;margin:0 auto 1.4em}
.final b,.final strong{color:#fff}
.final--media{display:grid;grid-template-columns:.8fr 1.2fr;gap:38px;align-items:center;text-align:left}
.final--media h2{text-align:left}
.final--media p{margin:0 0 1.3em;max-width:54ch}
.final--media .final__img img{width:100%;max-width:300px;height:auto;margin-inline:auto}
.final__price{font-family:var(--display);font-weight:700;font-size:1.85rem;color:var(--gold);
  margin:.2em 0 .7em}
@media(max-width:880px){
  .final--media{grid-template-columns:1fr;gap:24px;text-align:center;padding:0}
  .final--media h2{text-align:center}
  .final--media p{margin-inline:auto}
  .final{padding:34px 22px}
}

/* ---- 20. RELATED / BYLINE / REFS ----------------------------------------- */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.rel a{background:transparent;border-top:2px solid var(--gold);border-bottom:1px solid var(--line);
  border-radius:0;padding:18px 0;text-align:left;display:block;color:var(--ink)}
.rel a:hover{text-decoration:none;border-top-color:var(--navy)}
.rel b{display:block;font-family:var(--display);color:var(--ink-dk);margin-bottom:.35em}
.rel span{font-size:.92rem;color:var(--muted)}
@media(max-width:880px){.rel{grid-template-columns:1fr}}

.byline{display:flex;gap:16px;align-items:flex-start;background:transparent;
  border-top:2px solid var(--navy);border-bottom:1px solid var(--line);border-radius:0;
  padding:20px 0;margin-top:2.4em}
.byline img{flex:0 0 64px;border-radius:50%;border:1px solid var(--line)}
.byline b{display:block;font-family:var(--display);color:var(--ink-dk);margin-bottom:.4em}
.byline p{margin:0;font-size:0.9062rem;color:var(--muted)}

.refs{font-size:.87rem;color:var(--muted)}
.refs ol{padding-left:1.3em;display:grid;gap:.6em}
.refs a{word-break:break-word}

.crumbs{font-size:0.9062rem;color:var(--faint);padding:14px 0 0;margin:0}
.crumbs a{color:var(--muted)}

.article{max-width:var(--prose);margin-inline:auto}
.article h2{margin-top:1.7em;scroll-margin-top:110px}
.article h3{margin-top:1.35em}
.dropcap::first-letter{float:left;font-family:var(--display);font-weight:700;font-size:3.1rem;
  line-height:.86;padding:.06em .1em 0 0;color:var(--navy)}
.pullquote{border-left:4px solid var(--gold);padding-left:20px;margin:1.6em 0;
  font-family:var(--display);font-size:1.14rem;color:var(--ink-dk)}
.pullquote p{margin:0 0 .4em}
.pullquote cite{display:block;font-family:var(--sans);font-style:normal;font-weight:700;
  font-size:.85rem;color:var(--muted);letter-spacing:.02em}

/* ---- 21. FOOTER: editorial, two wide columns, rule-separated ------------- */
footer{background:var(--navy-dp);color:#b9cddd;padding:52px 0 28px;font-size:.92rem}
footer h4{color:#fff;font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:1em;font-weight:800}
footer a{color:#e4eef7}
footer a:hover{color:var(--gold)}
.fed{display:grid;grid-template-columns:1.05fr 1fr;gap:0;margin-bottom:30px}
.fed__col{padding:0 0 0 0}
.fed__col--l{padding-right:44px;border-right:1px solid rgba(255,255,255,.16)}
.fed__col--r{padding-left:44px}
.fed__lists{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:860px){
  .fed{grid-template-columns:1fr;gap:28px}
  .fed__col--l{padding-right:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.16);
    padding-bottom:28px}
  .fed__col--r{padding-left:0}
}
@media(max-width:520px){.fed__lists{grid-template-columns:1fr}}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55em}
.fbrand{font-family:var(--display);font-weight:700;font-size:1.36rem;color:#fff;margin-bottom:.5em}
.fbrand span{color:var(--gold)}
.fmethod{font-size:.88rem;line-height:1.7}
.fbadges{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.fbadges img{height:36px;width:auto}
.fnap{border-top:1px solid rgba(255,255,255,.16);padding-top:22px;font-size:0.9062rem;line-height:1.75}
.fpay{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 0;
  border-top:1px solid rgba(255,255,255,.16);margin-top:20px;font-size:0.9062rem}
.fpay img{height:24px;width:auto}
.disc{border-top:1px solid rgba(255,255,255,.16);margin-top:20px;padding-top:20px;
  font-size:0.9062rem;line-height:1.72;color:#9fb5c8}
.disc p{margin-bottom:.9em}
.copy{color:#82a0b8}

/* ---- 22. BLOG ------------------------------------------------------------ */
.postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 1.8em;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:0.9062rem;color:var(--muted)}
.postmeta b{color:var(--ink-dk)}
.postmeta .sep{color:var(--line)}
.postmeta time{white-space:nowrap}

.toc{background:var(--tint);border-top:2px solid var(--navy);border-bottom:1px solid var(--line);
  padding:20px 24px;margin:0 0 2.2em}
.toc h2{font-family:var(--sans);font-size:.72rem!important;font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold-dp);margin:0 0 1em}
.toc ol{margin:0;padding-left:1.25em;display:grid;gap:.45em;font-size:.95rem}
.toc a{color:var(--ink)}
.toc a:hover{color:var(--navy)}

.article figure{margin:2em 0}
.article figure img{width:100%;border-radius:var(--r);border:1px solid var(--line)}
.article figcaption{margin-top:.7em;font-size:0.9062rem;color:var(--faint);text-align:center}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}

.keypoints{background:var(--gold-lt);border-top:2px solid var(--gold);
  border-bottom:1px solid var(--gold-line);padding:20px 24px;margin:0 0 2em}
.keypoints>b{display:block;font-family:var(--sans);font-size:0.8438rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dp);margin-bottom:1em}
.keypoints ul{margin:0;padding-left:1.2em;display:grid;gap:.5em}
.keypoints li b{color:var(--navy)}

.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;padding:28px 26px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.55rem;line-height:1.22;margin:0 0 .5em}
.article .final--media .final__price{font-size:1.35rem;margin:.3em 0 .7em}
@media(max-width:620px){
  /* a shared component in a narrower column is a new component: on a phone this
     block rendered 703px tall inside an 812px viewport, which is a screenful of
     interruption rather than an offer. See pitfalls #24. */
  .article .final--media{grid-template-columns:1fr;text-align:center;padding:24px 18px;gap:14px}
  .article .final--media h2{text-align:center;font-size:1.28rem;line-height:1.24}
  .article .final--media .final__img img{max-width:120px}
  .article .final--media .final__price{font-size:1.15rem;margin:.2em 0 .5em}
  .article .final--media p{font-size:1.062rem}
}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.posts article{background:transparent;border-top:2px solid var(--navy);
  border-bottom:1px solid var(--line);border-radius:0;overflow:hidden;
  display:flex;flex-direction:column;padding-bottom:20px}
.posts img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 40%;
  background:var(--tint);margin-top:18px;border-radius:var(--r)}
.posts .pbody{padding:18px 0 0;display:flex;flex-direction:column;flex:1}
.posts h3{margin:0 0 .45em;font-size:1.1rem}
.posts h3 a{color:var(--ink-dk)}
.posts h3 a:hover{color:var(--navy)}
.posts p{margin:0 0 1em;color:var(--muted);font-size:1.062rem}
.posts .pmeta{margin-top:auto;font-size:0.9062rem;color:var(--faint)}
@media(max-width:940px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}

/* ---- 23. MOTION: reveal on scroll + the slow image fade ------------------ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* The image fade is applied by JS only to images that have not painted yet, so
   a blocked script leaves every picture visible and nothing ever flashes out. */
img.imgfade{opacity:0;transition:opacity .9s ease}
img.imgfade.shown{opacity:1}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  img.imgfade{opacity:1}
  html{scroll-behavior:auto}
}

/* ---- 24. HERO ENTRANCE --------------------------------------------------- */
.anim{opacity:0;animation:riseIn .6s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.anim{opacity:1;animation:none}}

/* ---- 25. SINGLE-COLUMN MEASURE ------------------------------------------
   px, not ch: `ch` resolves against each element's own font-size, so one token
   would give .note and .lead different left edges. These sections need the edge. */
.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}

.sec--center > .wrap > .sec__head{margin-inline:auto}

@media(max-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,
  .sec > .wrap > .tablewrap,.sec > .wrap > .faq,.sec > .wrap > .steps{max-width:100%}
}


/* ---- 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; }
}

/* The FAQ click target is <summary>, not <details>. Keeping the
   vertical padding on details made the row LOOK ~56px and respond
   as ~30px, under the 44px minimum. Moving it here changes nothing
   visually and makes the whole row tappable. */
.faq summary{padding:17px 0}

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

/* The botanical latin name in an ingredient table sits in <small>, and no
   rule reached it -- `.price__each small` is scoped elsewhere -- so it
   inherited the browser default of ~0.83em = 13.3px, under the 14.5px
   caption floor. type_floor.py can only RAISE a rule that exists, so an
   element styled entirely by the UA stylesheet is invisible to it. Found
   by measuring in the browser, which is why that step is in the audit. */
td small,.dtable small{font-size:0.9062rem}

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.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*/
/* ===========================================================================
   bellyflushdaily.com -- HOME PAGE surface. Slot: bloom motif, corner-flag
   ribbon, 14px cards / 8px controls, architectural depth (hard 3px offset
   plus a wide ambient stop), tinted with this site's own ink rgb(28,36,49)
   and never neutral black.

   Paint only -- border-radius, box-shadow, background, colour, transform,
   transition, animation and filter -- so it belongs below the critical
   marker and needs a restamp rather than a rebuild.

   Every selector is scoped to the home page. modern_surface.py and
   footer_type.py re-append their own blocks AFTER this one on every build,
   so this beats them on specificity and never on source order: their
   selectors are single class (0,1,0), these are (0,3,x) or better.
   =========================================================================== */
body:has(.hero){
  --bf-rc:14px;
  --bf-rb:8px;
  --bf-d1:0 3px 0 rgba(28,36,49,.07), 0 14px 24px -13px rgba(28,36,49,.34);
  --bf-d2:0 3px 0 rgba(28,36,49,.11), 0 22px 34px -15px rgba(28,36,49,.42);
}

/* ---- panels: 14px, two-stop architectural depth --------------------------- */
body:has(.hero) .card,
body:has(.hero) .step,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .keypoints,
body:has(.hero) .byline,
body:has(.hero) .qa,
body:has(.hero) .faq,
body:has(.hero) .tablewrap,
body:has(.hero) .final,
body:has(.hero) .rel a,
body:has(.hero) .shots figure,
body:has(.hero) .split__media img{border-radius:var(--bf-rc);box-shadow:var(--bf-d1)}
body:has(.hero) .hero__card{border-radius:var(--bf-rc);box-shadow:var(--bf-d2);
  background-image:linear-gradient(180deg,#fff 0%,#fffdf4 100%)}

/* Chips and tags take the control radius, not the panel radius. */
body:has(.hero) .pill,
body:has(.hero) .factpills li,
body:has(.hero) .price__save,
body:has(.hero) .hero__tag,
body:has(.hero) .floaty{border-radius:var(--bf-rb)}
body:has(.hero) .floaty{box-shadow:var(--bf-d1)}

/* ---- controls: 8px, the buying CTA gradient, the second button solid ------ */
body:has(.hero) .btn{border-radius:var(--bf-rb);
  transition:background-color .2s ease,color .2s ease,
             box-shadow .22s ease,transform .22s ease}
body:has(.hero) .btn--cta{
  background-image:linear-gradient(180deg,#f8d341 0%,var(--gold) 45%,#dcae05 100%);
  box-shadow:var(--bf-d1),inset 0 1px 0 rgba(255,255,255,.5)}
body:has(.hero) .btn--cta:hover{
  background-image:linear-gradient(180deg,#f3c621 0%,#e0b104 55%,#c89b03 100%);
  color:var(--navy-dp);
  transform:translateY(-2px);
  box-shadow:var(--bf-d2),inset 0 1px 0 rgba(255,255,255,.38)}
body:has(.hero) .btn--ghost{background-image:none;
  box-shadow:0 2px 0 rgba(28,36,49,.05)}
body:has(.hero) .btn--ghost:hover,
body:has(.hero) .btn--dark:hover{transform:translateY(-2px);box-shadow:var(--bf-d1)}
body:has(.hero) .btn:active{transform:translateY(0)}

/* This stylesheet had no :focus-visible anywhere. A keyboard reader got the
   browser default ring on a gold button, on a gold page. */
body:has(.hero) a:focus-visible,
body:has(.hero) .btn:focus-visible,
body:has(.hero) button:focus-visible,
body:has(.hero) summary:focus-visible{outline:3px solid var(--navy);
  outline-offset:3px}

/* ---- hero motif: bloom ----------------------------------------------------
   A radial bloom that opens from behind the bottle and eases back. It lives on
   the media column's pseudo-elements and never on the <img> -- that image is
   the LCP element and is preloaded.

   SIZED AGAINST MEASURED GEOMETRY, not by eye. At 1440x900 the product card
   fills its whole column: 768..1260 x 317..802, so its half-extents from the
   media centre (1014, 580) are 247 across and 243 down. The first version of
   this put the ring at r=222 -- inside both -- and it rendered NOTHING,
   hidden under an opaque white card. Here the box is inset -140/-150, giving
   closest-side = 396px, and every visible stop sits beyond 65% of that
   (>257px), i.e. outside the card on all four sides. The outer edge stops at
   r=392 (x=1406) and the ring opens to r=384 (x=1398), both inside the
   hero's right edge at 1425, so nothing meets the overflow-x:clip boundary
   at full alpha.

   26s and 34s. This is a capsule taken nightly for weeks, not an energy
   drink. Transform and opacity only, and the keyframe names are new --
   btTide and riseIn are already taken in this file. */
body:has(.hero) .hero .hero__media::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  inset:-140px -150px -140px -150px;height:auto;
  transform-origin:50% 52%;
  background:
    radial-gradient(closest-side at 50% 52%,
      rgba(240,190,6,0) 0 52%,
      rgba(240,190,6,.34) 68%,
      rgba(244,205,60,.17) 84%,
      rgba(240,190,6,0) 99%),
    radial-gradient(closest-side at 50% 52%,
      rgba(0,64,118,0) 0 74%,
      rgba(0,64,118,.09) 90%,
      rgba(0,64,118,0) 100%);
  animation:bfBloomOpen 26s cubic-bezier(.42,0,.36,1) infinite}
body:has(.hero) .hero .hero__media::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  inset:-140px -150px -140px -150px;
  transform-origin:50% 52%;
  background:radial-gradient(closest-side at 50% 52%,
    rgba(0,64,118,0) 0 73.4%,
    rgba(0,64,118,.22) 75.4%,
    rgba(0,64,118,.22) 76.2%,
    rgba(0,64,118,0) 78.2%);
  animation:bfBloomRing 34s cubic-bezier(.42,0,.36,1) infinite}
@keyframes bfBloomOpen{
  0%,100%{transform:scale(.9);opacity:.55}
  46%{transform:scale(1.06);opacity:1}}
@keyframes bfBloomRing{
  0%{transform:scale(.8);opacity:0}
  18%{opacity:.9}
  70%,100%{transform:scale(1.28);opacity:0}}

/* ---- pricing: corner flag, raised and recoloured recommended tier --------- */
/* No transition on the card: .reveal already owns .price's transition
   property (opacity and transform, .6s), and overriding it here both broke
   that fade AND left the shadow stuck at its transparent start value --
   computed box-shadow read "rgba(0,0,0,0) 0 0 0 0, rgba(0,0,0,0) 0 0 0 0"
   in the browser while the declaration itself looked perfectly correct.
   The hover deepen is instant, which is the right weight for a panel that
   is not itself clickable. */
body:has(.hero) .prices .price{border-radius:var(--bf-rc);box-shadow:var(--bf-d1)}
body:has(.hero) .prices .price:hover{box-shadow:var(--bf-d2)}
body:has(.hero) .prices .price--best{box-shadow:var(--bf-d2);border-color:var(--navy);
  background-image:linear-gradient(180deg,#fff 0%,#f5f9fc 66%,var(--navy-lt) 100%)}
body:has(.hero) .prices .price--ordered{
  background-image:linear-gradient(180deg,#fff 0%,#fffdf3 100%)}

/* The badge becomes a flag flying off the top-right corner, notched on its
   inner end. It straddles the card's top edge rather than sitting inside it:
   measured, the product image starts 31px below the card top and the flag is
   39px tall, so an inside flag covered 24px of artwork. At top:-13px it
   clears the image entirely and still sits inside the 16px padding-top that
   .prices reserves for exactly this.

   clip-path clips the element's own box-shadow along with it, so the drop is
   a filter instead -- that applies after the clip and follows the notched
   silhouette. left/top/right/transform on an absolutely positioned badge
   move no card: the pricing row's geometry is untouched. */
body:has(.hero) .prices .price__badge{
  left:auto;right:-10px;top:-13px;transform:none;
  border-radius:0;padding:7px 15px 7px 24px;
  clip-path:polygon(13px 0,100% 0,100% 100%,13px 100%,0 50%);
  filter:drop-shadow(0 3px 0 rgba(28,36,49,.13))}
body:has(.hero) .prices .price--best .price__badge{
  background:linear-gradient(180deg,#00518f,var(--navy-dp));color:var(--gold)}
body:has(.hero) .prices .price--ordered .price__badge{
  background:linear-gradient(180deg,#f8d341,var(--gold));color:var(--navy-dp)}
body:has(.hero) .prices .price--basic .price__badge{
  background:linear-gradient(180deg,#0a5b96,var(--navy))}

/* ---- motion off ----------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  body:has(.hero) .hero .hero__media::before,
  body:has(.hero) .hero .hero__media::after{animation:none}
  body:has(.hero) .btn{transition:none}
  body:has(.hero) .btn--cta:hover,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .btn--dark:hover,
  body:has(.hero) .btn:active{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer{font-size:16px}
footer h4{font-size:15px}
footer .disc{font-size:16px}
footer .fmethod{font-size:16px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 18 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 (28,36,49), 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{
  --r:16px;
  --shadow:0 1px 2px rgba(28,36,49,.06), 0 6px 18px rgba(28,36,49,.07);
  --lift:0 2px 6px rgba(28,36,49,.09), 0 16px 34px rgba(28,36,49,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.final,
.answer,
.article figure{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,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.faq,
.answer,
.article figure{border-radius:var(--r)}

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