/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Gelasio Fallback";src:local("Arial");font-weight:400;size-adjust:99.73%;ascent-override:93.02%;descent-override:34.27%;line-gap-override:0.00%}
@font-face{font-family:"Gelasio Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:107.47%;ascent-override:86.32%;descent-override:31.80%;line-gap-override:0.00%}
@font-face{font-family:"Commissioner Fallback";src:local("Arial");font-weight:400;size-adjust:101.57%;ascent-override:100.13%;descent-override:20.28%;line-gap-override:0.00%}
@font-face{font-family:"Commissioner Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:95.28%;ascent-override:106.74%;descent-override:21.62%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* digestflowdaily.com — DigestFlow, U.S. stocking partner desk.
   Design slot: batch10_assignments.py, digestflowdaily.com.

   Gelasio over Commissioner. Warm oat ground with clay-pink panels. The
   masthead is a wordmark hard against the left edge with one deep rule beneath
   it and the destinations right-aligned under that rule. The footer is a wide
   oat slab carrying the guarantee as an oversized figure with the index in
   three short columns. Motif: settle-drift, a broad band that settles downward
   and comes to rest, which is what a digestive capsule is sold for.

   The accent ramp is re-derived from the bottle, not from the ground: the
   label's own sage green, sampled at #4c8a51 off the DIETARY SUPPLEMENT chip
   and taken to #3f8a4a so it carries an accent and to #2f6b39 where white type
   has to sit on it. Every other colour token is kept below it in saturation on
   purpose, because hero_motifs.py and brand_marks.py both pick the most
   saturated token inside a lightness band and would otherwise draw this site's
   motif and its mark in clay pink.

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

/* ---- tokens */
:root{
  --ink:#22201c;            /* body text */
  --ink-2:#574f44;          /* secondary */
  --ink-3:#6f6559;          /* captions, meta */
  --leaf:#3f8a4a;           /* the bottle's sage, taken up one step */
  --leaf-d:#2f6b39;         /* where white type sits on it */
  --leaf-dd:#22502a;
  --wash:#e3efe2;           /* leaf wash */
  --paper:#f6efe3;            /* the page: warm oat */
  --oat-d:#ece0cd;          /* the slab */
  --panel:#fffaf2;
  --clay:#f5e2da;           /* clay-pink panel */
  --clay-2:#efd3c8;
  --clay-d:#845548;         /* clay ink, kept under the leaf in saturation */
  --line:#e0d4c0;
  --line-2:#c9b99f;
  --bark:#262019;           /* the dark band */
  --bark-2:#3a3126;
  --good:#2f6b39;
  --warn:#7d5a3c;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --radius:4px;
  --radius-lg:10px;
  --shadow:0 1px 2px rgba(34,32,28,.05), 0 12px 32px rgba(34,32,28,.07);
  --shadow-lg:0 18px 48px rgba(38,32,25,.17);
  --navh:150px;
  --display:Gelasio,Georgia,"Times New Roman",serif;
  --text:Commissioner,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.75;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--leaf-d);text-underline-offset:3px}
a:hover{color:var(--leaf-dd)}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:700;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,1.22rem + 1.72vw,2.55rem);letter-spacing:-.014em}
h2{font-size:clamp(1.46rem,1.16rem + 1.15vw,2.1rem);letter-spacing:-.008em}
h3{font-size:1.2rem;font-weight:700}
h4{font-size:1.03rem;font-weight:700}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
/* The page gutter comes from a WIDTH constraint, never from padding on .wrap.
   A companion class carrying a padding shorthand cannot then wipe it. */
.wrap{width:min(var(--wrap),100% - 44px);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--bark);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--leaf);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:0.8438rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--clay-d);
  margin:0 0 10px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--clay-d)}

/* ---- buttons: square-shouldered, in the leaf ramp */
.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:700;letter-spacing:.005em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:linear-gradient(97deg,var(--leaf-dd) 0%,var(--leaf-d) 100%);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.14);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--leaf{background:linear-gradient(97deg,#2a6033 0%,#3a7a44 100%)}
.btn--lg{min-height:62px;padding:17px 36px;font-size:1.06rem}
.btn--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--clay);color:var(--ink)}
.btn--wide{width:100%}

/* ---- header: wordmark hard left, ONE deep rule, destinations right-aligned
   beneath it. The rule is the whole idea, so nothing else in the masthead is
   allowed a border. */
.nav{position:sticky;top:0;z-index:100;background:var(--paper)}
.nav__top{display:flex;align-items:center;gap:18px;padding-block:14px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand__glyph{width:34px;height:34px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class: brand_marks.py replaces the
   <svg> inside .brand and does not carry the class onto the replacement, so a
   rule keyed only to the class stops applying the moment that tool runs. */
.brand>svg{width:34px;height:34px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-family:var(--display);font-size:1.42rem;font-weight:700;letter-spacing:-.015em}
.bw b em{font-style:normal;color:var(--leaf-d)}
.bw small{font-size:0.8438rem;font-weight:600;color:var(--ink-3);letter-spacing:.04em}
.nav__rail{display:flex;align-items:center;gap:14px}
.nav__buy{min-height:46px;padding:11px 20px;font-size:.95rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--ink);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the single deep rule */
.nav__rule{border-top:3px solid var(--bark);margin:0}
.nav__strip{background:var(--paper)}
.menu{
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 26px;list-style:none;
  margin:0;padding:0;align-items:center;min-height:44px;
}
.menu a{
  display:inline-block;padding:11px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--leaf-d)}
.menu a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--leaf)}
.menu__more{display:none}

/* ---- hero: copy LEFT on oat, bottle RIGHT over a clay-pink plate */
.hero{position:relative;background:var(--paper);padding:26px 0 52px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:38px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 14px;line-height:1.14}
.hero h1 em{font-style:normal;color:var(--leaf-d)}
.answer{
  background:var(--clay);border:1px solid var(--clay-2);
  border-left:4px solid var(--leaf);border-radius:0 var(--radius) var(--radius) 0;
  padding:17px 22px;margin:0 0 14px;
}
.answer p{margin:0 0 .65em;font-size:1.03rem}
.answer p:last-child{margin:0}
.hero__road{font-size:.9688rem;color:var(--ink-2);margin:0 0 16px;max-width:62ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:0.9688rem;font-weight:600;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight:800}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:0.9062rem;font-weight:600;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:999px;
}
.factpills li b{color:var(--ink);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);padding:13px 15px;border-radius:var(--radius)}
.figures b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--ink);line-height:1.1}
.figures span{display:block;font-size:0.9062rem;font-weight:600;color:var(--ink-3);margin-top:3px}
/* the bottle stands on a clay-pink plate, which is where the motif settles */
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:22px 16px;background:var(--clay);border-radius:var(--radius-lg)}
.hero__card img{width:100%;max-width:392px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 22px 34px rgba(38,32,25,.26))}
.hero__cap{margin:14px 0 0;font-size:.8125rem;font-weight:600;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:600;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(--leaf-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: role, lot, dose and count, guarantee, order phone. Five
   facts above the navigation so the menu does not have to carry them. Kept
   ABOVE CRITICAL-END because it is the first thing painted. */
.util{background:var(--bark);color:#cbc0ae;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:3px;height:3px;border-radius:50%;
  background:#6d6153;flex:0 0 auto;margin-right:11px}
.util b{color:#f3ebdd;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  .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){
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:32px 0 40px}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 150px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 150px) - 28px); min-height: calc(100svh - var(--navh, 150px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}
/* --- end of the copied hero responsive rules --- */

/* ---- hero motif -- settle-drift ---------------------------------------- */
.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(178deg,#d5ddc7,#f6efe3 56%,#f6efe3)}.hero__media::before{content:'';position:absolute;left:50%;top:40%;width:126%;height:52%;translate:-50% -50%;border-radius:46% 46% 38% 38%/54% 54% 46% 46%;z-index:1;pointer-events:none;filter:blur(18px);background:linear-gradient(180deg,rgba(63,138,74,0.34),transparent 78%);animation:dfSettle 14s cubic-bezier(.32,.9,.4,1) infinite}.hero__media::after{content:'';position:absolute;left:50%;bottom:10%;width:64%;height:20%;translate:-50% 0;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(63,138,74,0.22),transparent 72%);animation:dfRest 14s ease-in-out infinite}@keyframes dfSettle{0%{transform:translateY(-12%) scaleY(.88);opacity:.2}48%{transform:translateY(4%) scaleY(1.06);opacity:.7}78%,100%{transform:translateY(0) scaleY(1);opacity:.45}}@keyframes dfRest{0%,100%{opacity:.35;transform:scale(.95)}50%{opacity:.7;transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}
/*!SITE-HOME-CRIT-START*/
/* ---- home hero, desktop reading order ---------------------------------
   The money button used to sit under the roadmap paragraph, after the
   quick answer. Reordering the copy column puts it directly under the
   answer: eyebrow, headline, answer, BUTTONS, payment line, then the
   evidence (roadmap, fact pills, figures).

   `order` moves boxes, so this has to be above the marker and the site
   has to be rebuilt -- a restamp alone would leave the old block inlined
   in every page.

   DESKTOP ONLY. The phone order is composed separately in the
   max-width:980px block above, where .hero__copy is display:contents and
   its children are grid items of .hero__grid. Nothing below touches it. */
@media (min-width:981px){
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero .answer{order:3}
  .hero .hero__cta{order:4}
  .hero .hero__sub{order:5}
  .hero .hero__road{order:6}
  .hero .factpills{order:7}
  .hero .figures{order:8}
  .hero{padding-top:16px}
  .hero h1{margin-bottom:12px}
  .hero .answer{margin-bottom:16px}
  .hero .hero__cta{margin:0 0 12px}
  .hero .hero__sub{margin:0 0 22px}
  .hero .hero__road{margin:0 0 16px}
}

/* ---- the recommended pack stands proud of the row ----------------------
   The three Add To Cart buttons share ONE baseline, and this row is
   packed from the top, so the obvious lift is a trap in both directions:
   a positive margin-top SINKS the card (its top drops while the siblings
   grow to match, so it reads shorter, not raised), and transform is
   overwritten by the reveal pass, which sets transform:none on .in.

   A NEGATIVE margin-top is the one that works. The card's border box
   extends 16px above the row, the siblings are unchanged, and the button
   baseline is arithmetically unmoved: the card starts 16px higher and its
   own auto margin absorbs exactly 16px more. Measured at 1440x900 with
   -14/-18/-22/-28px: btnTop spread 0 at every value. 16px leaves 10px of
   clearance under the section heading.

   Above 760px only: below that the row is one column and the featured
   card is ordered first, where a negative margin would pull it into the
   heading. */
@media (min-width:761px){
  body:has(.hero) .card--pack.featured{margin-top:-16px}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:60px 0;position:relative}
.sec--tint{background:var(--panel)}
.sec--panel{background:var(--clay)}
.sec--dark{background:var(--bark);color:#e2d9c9}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#d3c9b7}
.sec--dark .eyebrow{color:#e0b6a6}
.sec--dark .eyebrow::before{background:#e0b6a6}
.sec--dark a{color:#b8d9b4}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.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:#d3c9b7}

/* 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:#8cc48f}

/* ---- 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:700;color:#fff;background:var(--bark);font-size:.9375rem;letter-spacing:.02em}
tbody tr:nth-child(even){background:#faf4e9}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--ink)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);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(--leaf-d);color:#fff;
  font-family:var(--display);font-weight:700;font-size:1rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: a clay-pink shoulder on the left 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))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--clay-2);border-radius:0 var(--radius) var(--radius) 0;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:var(--bark-2);border-color:#4c4234;border-left-color:#7d5f4e}
.sec--panel .card{background:var(--panel);border-left-color:var(--leaf)}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #c6ddc4;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--leaf-dd)}
.callout p:last-child{margin:0}
.alert{background:#f7ece0;border:1px solid #e2cdb2;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.3rem;font-weight:400;font-style:italic;line-height:1.52;color:var(--ink);border-left:4px solid var(--clay-2);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-top:3px solid var(--bark);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items: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, and a
   .tablewrap holding a 520px-min table would keep its column 520px wide however
   narrow the grid is. min-width:0 belongs on the items at every width. */
.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}
/* A .split is a pair: the media and the paragraph that belongs to it start on
   the same line. Centring them put the first line of copy 107-191px below the
   top of its own image (measured across all six of these sites, 1440px), which
   reads as a figure stranded in the column with the text floating beside it.
   The cap stops a 1:1 artwork at 551px from dwarfing two paragraphs; wide panel
   shots are unaffected because their height is set by the column width. Desktop
   only - below 761px the split is one column and the image is already small. */
@media (min-width:761px){
  .split__img img{max-height:420px;width:auto;margin-inline:auto}
}


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

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

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:700;color:#fff;background:var(--leaf-d);padding:4px 12px;border-radius:999px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin:0 0 20px}
/* Packed from the TOP, with a min-height on the button and on the supply line,
   so the three buttons share one offset from their own card's top. No lift on
   the featured card: a margin-top would make its box taller than its siblings
   and break the shared baseline the row is measured on. */
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:2px solid var(--line);border-left-width:2px;border-radius:var(--radius-lg);overflow:hidden;position:relative}
.card--pack.featured{border-color:var(--leaf);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--oat-d);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:10px;min-height:56px}
.card--pack.featured .pack__head{background:var(--bark);border-bottom-color:var(--bark)}
.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:700}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-2);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--leaf-d);color:#fff;font-family:var(--text);font-size:0.8125rem;font-weight:700;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,160px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.3rem;font-weight:700;color:var(--ink);line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1rem;font-weight:700;top:-.72em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;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;min-height:27px}
.pack__tot b{font-weight:700}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem;min-height:132px}
.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:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--ink)}
.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 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(--ink)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px 1fr 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--oat-d);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--leaf),var(--leaf-dd))}
.stars{color:#a9772c;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:700;font-size:1.06rem;color:var(--ink)}
.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(--leaf-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
/* A URL is one unbreakable token and the reference list prints them as link
   text. `anywhere` also lowers the element's min-content, which is what stops
   the ancestor being sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--bark);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:var(--bark);color:#fff;font-family:var(--display);font-weight:700;font-size:1.06rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--ink)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--clay);border:1px solid var(--clay-2);border-top:3px solid var(--bark);border-radius:0 0 var(--radius) var(--radius);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final__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 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(--leaf);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.08rem;color:var(--ink);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}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--ink)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.062rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts article{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--clay-2);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.062rem;color:var(--ink-2)}
.dtable{min-width:520px}
.article figure{margin:0 0 1.4em;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.article figure img{width:100%}
.article figcaption{padding:14px 18px;font-size:.9375rem;color:var(--ink-2)}

/* ---- footer: a wide oat slab, the guarantee as an oversized figure, the
   index in three short columns beneath the rule. */
.fcta{background:var(--bark);color:#fff;padding:50px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.8125rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:#e0b6a6;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.62rem;font-weight:700;line-height:1.24;margin:0 0 10px}
.fcta p{color:#d3c9b7}
.fcta__sm{font-size:.9375rem;color:#b3a795;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#b8d9b4}
.fcta__img img{width:270px}
footer{background:var(--oat-d)}
.fslab{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;padding:46px 0 30px;align-items:start}
.fguar{border-right:1px solid var(--line-2);padding-right:34px}
.fguar__n{display:block;font-family:var(--display);font-size:clamp(4.4rem,3rem + 5vw,7rem);font-weight:700;line-height:.86;letter-spacing:-.04em;color:var(--bark);margin:0}
.fguar__u{display:block;font-family:var(--text);font-size:1.02rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-d);margin:6px 0 12px}
.fguar p{font-size:.9688rem;color:var(--ink-2);margin:0 0 .7em}
.findex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.fh{font-family:var(--text);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);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(--leaf-d)}
.fbrand{font-family:var(--display);font-size:1.62rem;font-weight:700;color:var(--ink);letter-spacing:-.015em;line-height:1}
.fbrand span{color:var(--leaf-d)}
.fcard p{font-size:.9688rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--ink)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 14px}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--line-2)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-2)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-2)}
.disc{background:var(--paper);border-top:1px solid var(--line-2);padding:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--ink)}
.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-d)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--bark);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:#cbc0ae}
.buybar .btn{margin-left:auto;flex:0 0 auto}

/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- responsive */
@media (max-width:1100px){
  .findex{gap:20px}
  .fslab{grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:28px}
}
@media (max-width:980px){
  :root{--navh:144px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .menu{display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:6px 0 12px}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line-2);border-bottom-width:1px}
  .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}
  .fslab{grid-template-columns:1fr;gap:30px}
  .fguar{border-right:0;border-bottom:1px solid var(--line-2);padding-right:0;padding-bottom:22px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding:32px 0 40px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* At one column the three .versus__h bars stop labelling anything: a reader
     meets a stack of three titles and then nine unlabelled cells. Hide the bars
     and let every cell carry its own heading from data-l instead. */
  .versus__h{display:none}
  .versus>div[data-l]::before{content:attr(data-l);display:block;margin-bottom:3px;
    font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-2)}
  /* The dose chip is nowrap and margin-left:auto, so on a narrow card it is
     pushed onto a line with no room for it and overhangs the card edge. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .findex{grid-template-columns:1fr 1fr;gap:20px}
  /* A tool-appended rule halves a lone .shots.s2 figure so a single image does
     not balloon across a two-column row. Below 760 that grid is ONE column, so
     the same rule rendered a 163px figure in a 346px slot. Written with one
     extra class in the selector so it outranks the appended rule whatever the
     source order, because that rule is re-appended by a shared tool. */
  .shots.s2>figure:last-child:nth-child(odd):not(.x){max-width:none;grid-column:auto}
  .pack__perks{min-height:0}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .findex{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
}

/* ---- hero: the plate breathes under the bottle -----------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity 0 is not recorded as painted. The float goes on the
   CARD, never on the image. */
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:dfFloat 9s ease-in-out infinite}
  @keyframes dfFloat{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 because this
   masthead is two rows and its height changes between breakpoints.

   min-height makes the sticky box a full screen tall so the shot can be CENTRED
   inside it. Requires .hero NOT to clip on the block axis: any non-visible
   overflow on an ancestor becomes the scrollport sticky resolves against. */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 150px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 150px) - 28px);
    min-height: calc(100svh - var(--navh, 150px) - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
   hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
   resolve against the nearest positioned ancestor; `static` re-parents them to
   a box several times wider -- measured at 1800px against a 523px column --
   and the ring lands across the headline. Worse, the same query stops it
   animating, so it SITS there: ask for less motion, get the one broken hero.

   `relative` lays out identically to `static` and keeps the containing block.
   `top:0` is not decoration: the rule above sets a top offset of one nav height
   plus 14px, which a relative box would apply for real and push the plate
   ~110px down the page (pitfall 65). Written WITHOUT naming that custom
   property in the usual var() form on purpose -- preflight's undefined-variable
   check reads comments too, so a property named here is a property it believes
   the sheet uses. Measured on 7 sites before and after (pitfall 107). */
@media (prefers-reduced-motion: reduce) {
  .hero__media { position: relative; top: 0; min-height: 0; }
}

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots.s2>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 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}

/* ==== 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*/
/* ======================================================================
   DigestFlow home page -- modern surface, bloom motif, pricing ribbon
   ----------------------------------------------------------------------
   PAINT ONLY. border-radius, box-shadow, background, colour, clip-path,
   transition, transform and the keyframes. Nothing here moves a box, so
   it belongs below the marker.

   SCOPE. Every selector carries `body:has(.hero)`. class="hero" is on
   index.html and on no other page of this site (checked, 33 pages), so
   these rules cannot reach the inner pages that share this stylesheet.

   SPECIFICITY, NOT SOURCE ORDER. modern_surface.py and footer_type.py
   strip and re-append their own blocks on every build and land AFTER
   this one. body:has(.hero) .card is (0,2,1) against their bare .card
   at (0,1,0), so this block still wins once it has been overtaken.

   The pricing row's shared button baseline is untouched: no padding, no
   margin, no min-height, no font-size and no transform on .card--pack
   itself except a hover lift that the reveal pass cannot see.
   ====================================================================== */
body:has(.hero){
  --dfs-rc:14px;                       /* slot radius_card    */
  --dfs-rb:8px;                        /* slot radius_control */
  /* Slot depth language: a hard short offset over a wide architectural
     ambient stop, tinted with this site's own ink #22201c (34,32,28),
     never neutral black. */
  --dfs-d1:0 3px 0 rgba(34,32,28,.09),0 14px 24px rgba(34,32,28,.10);
  --dfs-d2:0 3px 0 rgba(34,32,28,.13),0 20px 34px rgba(34,32,28,.15);
  --dfs-dleaf:0 3px 0 rgba(47,107,57,.26),0 20px 34px rgba(34,32,28,.16);
}

/* ---- panels: slot radius 14px and the two-stop architectural depth */
body:has(.hero) .card,
body:has(.hero) .card--pack,
body:has(.hero) .keypoints,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .final,
body:has(.hero) .split__img,
body:has(.hero) .ingcard,
body:has(.hero) .tablewrap,
body:has(.hero) .faq,
body:has(.hero) .step,
body:has(.hero) .stats,
body:has(.hero) .versus,
body:has(.hero) .byline,
body:has(.hero) .posts article,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .answer,
body:has(.hero) .hero__card,
body:has(.hero) .figures div{border-radius:var(--dfs-rc);box-shadow:var(--dfs-d1)}

/* ---- controls: slot radius 8px, one transition, one 2px lift */
body:has(.hero) .btn,
body:has(.hero) .burger{border-radius:var(--dfs-rb)}
body:has(.hero) .btn{transition:transform .2s ease,box-shadow .2s ease}
body:has(.hero) .btn:hover{transform:translateY(-2px)}
body:has(.hero) .btn:active{transform:translateY(0)}
body:has(.hero) .btn:focus-visible{outline:3px solid var(--leaf-dd);outline-offset:3px}
body:has(.hero) a:focus-visible,
body:has(.hero) .menu a:focus-visible{outline:3px solid var(--leaf);outline-offset:3px}
body:has(.hero) .menu a{transition:color .18s ease,border-color .18s ease}

/* The buying CTA is the only gradient on the page; the secondary button
   stays a solid surface, so the pair reads as two weights rather than
   two colours of the same weight. */
body:has(.hero) .btn--leaf{background:linear-gradient(135deg,#4d9e58 0%,#3f8a4a 30%,#2a6033 100%);box-shadow:var(--dfs-d1)}
body:has(.hero) .btn--leaf:hover{box-shadow:var(--dfs-d2)}
body:has(.hero) .btn--ghost{background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 2px var(--line-2),0 3px 0 rgba(34,32,28,.07)}
body:has(.hero) .btn--ghost:hover{background:var(--clay);color:var(--ink);box-shadow:inset 0 0 0 2px var(--clay-d),0 3px 0 rgba(34,32,28,.11)}

/* ---- hero furniture */
body:has(.hero) .hero__card{background:linear-gradient(163deg,#f8e9e2 0%,#f2dcd2 58%,#ecd3c7 100%);box-shadow:var(--dfs-d2)}
body:has(.hero) .figures div{background:linear-gradient(180deg,#fffaf2 0%,#fdf4e6 100%)}
body:has(.hero) .factpills li{background:linear-gradient(180deg,#fffaf2 0%,#f8f0e1 100%);box-shadow:0 2px 0 rgba(34,32,28,.06)}
body:has(.hero) .answer{background:linear-gradient(180deg,#f8e9e2 0%,#f2ded5 100%)}

/* ---- hero motif: bloom -------------------------------------------------
   Slot motif_family "bloom" -- a radial bloom opening from behind the
   bottle and easing back.

   Both shapes are pseudo-elements of .hero__media, never the <img>: the
   image is the LCP element and is preloaded. They sit at z-index 0 and 1
   under the opaque .hero__card at z-index 2, so each one is sized LARGER
   than the card (150% and 168% of the media column, capped in px) or it
   would render behind the card and read as nothing at all.

   26s and 34s. This is a capsule taken once a day for three to six
   weeks, not an energy drink.

   Every property the earlier settle-drift motif set above the marker is
   restated here -- filter, height, bottom, border-radius -- because a
   property left out would be inherited from that rule rather than reset.
   New keyframe names: the stylesheet already holds dfFloat, dfRest and
   dfSettle.

   WHERE THE COLOUR SITS. .hero__card is opaque, 424x473 at 1440, and the
   bloom is centred on it, so everything inside a radius of ~236px is
   never seen. The first cut put its weight at the centre and rendered as
   nothing at all. Both gradients now carry their weight between 55% and
   90% of the radius -- 170px to 280px at rest, 180px to 300px at the
   open -- which is the band that clears the card.

   The hero's own wash is a shallow top band rather than a corner glow,
   for the same reason: a green field behind the media column cancels a
   green bloom drawn on top of it. */
body:has(.hero) .hero{background:linear-gradient(177deg,#e7edd9 0%,#f2ecdd 33%,#f6efe3 61%,#f6efe3 100%)}
body:has(.hero) .hero__media::before{
  content:"";position:absolute;left:50%;top:50%;bottom:auto;
  width:150%;max-width:620px;height:auto;aspect-ratio:1;
  translate:-50% -50%;transform-origin:50% 50%;
  border-radius:50%;z-index:1;pointer-events:none;filter:none;
  background:radial-gradient(closest-side,rgba(63,138,74,.34) 0%,rgba(63,138,74,.33) 58%,rgba(63,138,74,.26) 76%,rgba(63,138,74,.10) 89%,rgba(63,138,74,0) 98%);
  animation:dfBloomOpen 26s cubic-bezier(.33,.7,.3,1) infinite
}
body:has(.hero) .hero__media::after{
  content:"";position:absolute;left:50%;top:50%;bottom:auto;
  width:168%;max-width:700px;height:auto;aspect-ratio:1;
  translate:-50% -50%;transform-origin:50% 50%;
  border-radius:50%;z-index:0;pointer-events:none;filter:none;
  background:radial-gradient(closest-side,rgba(34,80,42,0) 58%,rgba(34,80,42,.24) 72%,rgba(34,80,42,.28) 79%,rgba(34,80,42,.09) 88%,rgba(34,80,42,0) 97%);
  animation:dfBloomRing 34s cubic-bezier(.26,.68,.32,1) infinite
}
/* The two scale ranges are deliberately narrow and start near 1. A ring
   that sweeps up from scale .5 spends most of its cycle hidden behind
   the card and is already fading by the time it clears it -- which is
   the same "renders nothing" mistake in motion rather than in colour.
   .90-1.08 and .94-1.16 keep both shapes outside the card for the whole
   cycle, so the movement is a slow breath rather than a pulse.
   26s and 34s: co-prime enough that the pair never repeats a frame. */
@keyframes dfBloomOpen{
  0%{transform:scale(.90);opacity:.45}
  46%{transform:scale(1.08);opacity:.92}
  100%{transform:scale(.90);opacity:.45}
}
@keyframes dfBloomRing{
  0%{transform:scale(.94);opacity:.16}
  42%{transform:scale(1.16);opacity:.55}
  100%{transform:scale(.94);opacity:.16}
}

/* ---- pricing row ------------------------------------------------------
   Paint only. The shared button baseline is engineered above -- fixed
   head min-height, fixed image box, per-item min-heights and NO lift on
   the featured card, because this row is packed from the top. Nothing
   here adds padding, margin, min-height or font-size, and the hover
   transform is a hover state the reveal pass never sets. */
body:has(.hero) .card--pack{transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease}
body:has(.hero) .card--pack:hover{box-shadow:var(--dfs-d2);transform:translateY(-2px)}
body:has(.hero) .card--pack.featured{border-color:var(--leaf);box-shadow:var(--dfs-dleaf);background:linear-gradient(180deg,#fffdf6 0%,#fff6e9 100%)}
body:has(.hero) .card--pack.featured:hover{box-shadow:0 3px 0 rgba(47,107,57,.30),0 26px 44px rgba(34,32,28,.20)}
body:has(.hero) .card--pack.featured .pack__head{background:linear-gradient(118deg,#2f6b39 0%,#22502a 56%,#1b3f22 100%);border-bottom-color:#1b3f22}
body:has(.hero) .card--pack.featured .pack__per{color:var(--leaf-dd)}

/* Slot ribbon: a corner flag. clip-path takes the top-left corner off at
   14px, which tapers to nothing by the baseline, so no glyph is cut. */
body:has(.hero) .pack__flag{
  border-radius:0 0 0 12px;
  background:linear-gradient(135deg,#7d6a55 0%,#3a3126 100%);
  box-shadow:0 3px 0 rgba(34,32,28,.13);
  clip-path:polygon(14px 0,100% 0,100% 100%,0 100%)
}
body:has(.hero) .card--pack.featured .pack__flag{background:linear-gradient(135deg,#9a6355 0%,#5d3a30 100%)}

/* Dashed separators drawn as a background line on the bottom edge of the
   row, not as a border: a border would add 1px per row to a column that
   the three cards' shared button baseline is measured through. */
body:has(.hero) .pack__perks li{
  background-image:repeating-linear-gradient(90deg,rgba(34,32,28,.30) 0 4px,rgba(34,32,28,0) 4px 9px);
  background-repeat:no-repeat;
  background-size:100% 1px;
  background-position:0 100%
}
body:has(.hero) .pack__perks li:last-child{background-image:none}

/* ---- footer and sticky bar: paint only, no type sizes touched */
body:has(.hero) .fcard,
body:has(.hero) .fguar{border-radius:var(--dfs-rc)}
body:has(.hero) .buybar{box-shadow:0 -3px 0 rgba(34,32,28,.16),0 -18px 34px rgba(34,32,28,.22)}

/* ---- everything off under reduced motion ------------------------------
   The bloom stays, static and dimmed; the lifts and the transitions go. */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::before{animation:none!important;transform:scale(1)!important;opacity:.5!important}
  body:has(.hero) .hero__media::after{animation:none!important;transform:scale(1)!important;opacity:.45!important}
  body:has(.hero) .btn,
  body:has(.hero) .card--pack,
  body:has(.hero) .menu a{transition:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn:active,
  body:has(.hero) .card--pack:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer li a{font-size:16px}
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fcard p{font-size:16px}
footer .fguar p{font-size:16px}
footer .fh{font-size:15px}
footer .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */

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

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