/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Newsreader Fallback";src:local("Arial");font-weight:400;size-adjust:95.81%;ascent-override:76.72%;descent-override:27.66%;line-gap-override:0.00%}
@font-face{font-family:"Newsreader Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:95.30%;ascent-override:77.12%;descent-override:27.81%;line-gap-override:0.00%}
@font-face{font-family:"Archivo Fallback";src:local("Arial");font-weight:400;size-adjust:98.62%;ascent-override:89.03%;descent-override:21.29%;line-gap-override:0.00%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:98.06%;ascent-override:89.53%;descent-override:21.41%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* godigestflow.com - DigestFlow, USA authorized retailer desk.
   Batch 10 slot: Newsreader / Archivo, a cool porcelain ground with a sage
   band standing behind the product, an identity centred over a thin sage rule
   with the destinations split either side of it, and a sage footer block whose
   first column is the returns address.

   Colour is taken off the bottle, not off a reference site. The label runs a
   pale sage gradient up from its base and prints "Flow" in the green sampled
   here at #639665; the chips on the Supplement Facts artwork read #7baf7b and
   #8cbd8d, and the wash behind that artwork reads #c4ddc5. Those four values
   are the whole accent ramp. The ground is a cool porcelain rather than a warm
   paper, which is what separates this desk from its sister on the same product.

   The rhythm is drawn in HAIRLINES. There is no card shadow anywhere above the
   pricing row: sections are separated by 1px sage rules, cards are 1px boxes,
   and the only soft edges on the page are the pill buttons and the hero swell.

   Everything above CRITICAL-END is inlined into every page head, so the token
   block has to be the first thing in this file with a closing brace in it. */
:root{
  --ink:#1c2529;             /* body text, a cool graphite */
  --ink-2:#4a585d;           /* secondary */
  --ink-3:#5f6b70;           /* captions and meta, at 5.01:1 on the ground */
  --sage:#35743f;            /* the accent: the label's green, taken to AA */
  --sage-d:#2f5836;          /* deep: dark bands, the footer block */
  --sage-2:#639665;          /* the bottle's own chip green */
  --sage-3:#a9d3aa;          /* the artwork's chip, lifted to 4.90:1 on the block */
  --sage-tint:#e7efe6;       /* pale wash */
  --sage-wash:#f0f5ef;       /* paler wash, the hero band */
  --sage-line:#c4ddc5;       /* the hairline, from the artwork ground */
  --paper:#f2f5f6;       /* the page */
  --panel:#ffffff;
  --tint:#e9eef0;            /* cool band, no green in it */
  --line:#dbe2e4;
  --line-2:#bcc7ca;
  --good:#3f6b4e;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:3px;
  --radius-lg:4px;
  --shadow:0 12px 34px rgba(28,37,41,.10);
  --navh:112px;
  --pack-img:170px;
  --display:Newsreader,Georgia,"Times New Roman",serif;
  --text:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
}

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

/* the eyebrow names the JOB of the section beneath it, over a short rule */
.eyebrow{
  display:block;font-family:var(--text);font-size:.875rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--sage);
  margin:0 0 12px;padding-top:11px;border-top:2px solid var(--sage-line);
  max-width:340px;
}

/* ---- buttons: pill, flat, no gradient */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 32px;
  font-family:var(--text);font-size:1rem;font-weight:700;letter-spacing:.005em;
  border:2px solid var(--sage);border-radius:999px;cursor:pointer;text-decoration:none;
  background:var(--sage);color:#fff;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{background:var(--sage-d);border-color:var(--sage-d);color:#fff}
.btn--sage{background:var(--sage);border-color:var(--sage);color:#fff}
.btn--lg{min-height:58px;padding:16px 30px;font-size:1.02rem}
.btn--ghost{background:none;color:var(--sage-d)}
.btn--ghost:hover{background:var(--sage-tint);color:var(--sage-d);border-color:var(--sage)}
.btn--wide{width:100%}

/* ---- topline strip: the five trust facts, above the navigation */
.util{background:var(--sage-d);color:#cfe0cf;font-size:.9375rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 16px;padding-block:9px}
.util__item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:1px;height:13px;background:#6a8f6d;flex:0 0 auto;margin-right:9px}
.util b{color:#f1f7f0;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}

/* ---- header: identity centred over a thin sage rule, destinations split */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);border-bottom:1px solid var(--sage-line)}
.nav__row{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding-block:14px}
.menu{display:contents}
.nav__ends{display:flex;flex-wrap:nowrap;gap:0 26px;list-style:none;margin:0;padding:0;align-items:center}
.nav__ends--l{order:1;justify-content:flex-end}
.nav__ends--r{order:3;justify-content:flex-start}
.nav__ends a{
  display:inline-block;padding-block:8px;font-family:var(--text);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  white-space:nowrap;border-bottom:2px solid transparent;
}
.nav__ends a:hover{color:var(--sage-d)}
.nav__ends a[aria-current="page"]{color:var(--sage-d);border-bottom-color:var(--sage-2)}
.nav__more{display:none}
.nav__id{order:2;justify-self:center;text-align:center}
/* the thin sage rule the identity stands over */
.nav__id::after{content:"";display:block;height:2px;background:var(--sage-2);margin:7px auto 0;width:78%;min-width:120px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand>svg{width:30px;height:30px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.06;text-align:center}
.bw b{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.018em}
.bw b em{font-style:normal;color:var(--sage)}
.bw small{font-size:.9375rem;font-weight:500;color:var(--ink-3);letter-spacing:.01em}
/* the order button rides the right gutter without entering the symmetry */
.nav__buy{position:absolute;right:22px;top:50%;translate:0 -50%;min-height:44px;padding:10px 22px;font-size:.9375rem}
.burger{
  display:none;position:absolute;right:22px;top:50%;translate:0 -50%;
  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(--sage-d);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: copy left on porcelain, product right on a sage band */
.hero{position:relative;background:var(--paper);padding:40px 0 56px;overflow-x:clip}
.hero::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:37%;
  background:linear-gradient(180deg,var(--sage-wash) 0%,var(--sage-tint) 100%);
  border-left:1px solid var(--sage-line);z-index:0;pointer-events:none;
}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:44px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 14px}
.hero h1 em{font-style:normal;color:var(--sage)}
.answer{
  background:var(--panel);border:1px solid var(--sage-line);
  border-top:3px solid var(--sage-2);border-radius:0 0 var(--radius) var(--radius);
  padding:18px 22px;margin:0 0 14px;
}
.answer p{margin:0 0 .75em;font-size:1.0625rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 16px;max-width:60ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.hero__pay{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 18px;font-size:.9375rem;color:var(--ink-3)}
.hero__pay img{width:184px;height:auto}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:1rem;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:700}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.9375rem;font-weight:600;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--sage-line);padding:7px 15px;border-radius:999px;
}
.factpills li b{color:var(--sage-d);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;background:var(--sage-line);border:1px solid var(--sage-line)}
.figures div{background:var(--panel);padding:14px 16px}
.figures b{display:block;font-family:var(--display);font-size:1.6rem;font-weight:600;color:var(--sage-d);line-height:1.08}
.figures span{display:block;font-size:.9375rem;font-weight:500;color:var(--ink-3);margin-top:4px}
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px}
.hero__card img{width:100%;max-width:430px;height:auto;margin-inline:auto}
.hero__cap{margin:14px 0 0;font-size:.9375rem;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:.9375rem;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:700}

/* ---- inner page head */
.phead{padding:32px 0 12px;background:var(--panel);border-bottom:1px solid var(--sage-line)}
.crumbs{font-size:.9375rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--sage-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)}


/* --- 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){
  /* the sage band would fall behind the copy once the columns stack */ .hero::after{display:none}
  .hero__grid{grid-template-columns:1fr;gap:18px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:2px 0 8px;background:var(--sage-wash);border:1px solid var(--sage-line);padding:12px 0}
  /* the CTA comes straight after the Quick Answer on a phone; the roadmap line follows it. hero.md's stacked order is eyebrow, H1, shot, answer, CTA, and the roadmap is not one of the ordered blocks, so it goes below rather than pushing the button another screen down. */ .hero__cta{order:5}
  .hero__road{order:6}
  .hero__pay{order:7}
  /* a 346px-wide bottle on a 390px screen puts the Quick Answer at y=974. The shot still has to be recognisable, so it is capped rather than shrunk to a thumbnail. */ .hero__card img{max-width:250px}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:26px 0 40px}
  /* the stacked H1 sat at six lines and pushed the Quick Answer to y=900 on a 390px screen. 28px still reads as the headline and buys back a line. */ .hero h1{font-size:1.75rem}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 104px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 104px) - 28px); min-height: calc(100svh - var(--navh, 104px) - 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 -- calm-swell ---------------------------------------- */
.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:radial-gradient(120% 90% at 50% 82%,#d0ded5,#f2f5f6 58%,#f2f5f6)}.hero__media::before{content:'';position:absolute;left:-14%;right:-14%;bottom:4%;height:46%;z-index:1;pointer-events:none;filter:blur(12px);border-radius:50% 50% 0 0/70% 70% 0 0;background:linear-gradient(180deg,rgba(53,116,63,0.38),transparent 72%);animation:gdfSwell 16s ease-in-out infinite}@keyframes gdfSwell{0%,100%{transform:translateY(16%) scaleX(.94);opacity:.3}50%{transform:translateY(-4%) scaleX(1.05);opacity:.68}}
@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-page geometry -----------------------------------------------
   class="hero" is on index.html and nowhere else on this site, so every
   selector below either starts with ".hero " or is guarded by
   body:has(.hero). Geometry only: this block is inlined into every page
   head at build time, so it stays small and it is rebuilt, never restamped.

   1. DESKTOP READING ORDER. The roadmap paragraph sat between the Quick
      Answer and the buy pair and pushed the button to y=731 on a 900px
      screen. Reordering the copy column puts the buttons and the payment
      line straight after the Answer and drops the roadmap into the
      evidence that follows. The PHONE order is composed separately at
      <=980px with display:contents and is deliberately left alone. */
@media (min-width:981px){
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero .answer{order:3}
  .hero .hero__cta{order:4}
  .hero .hero__pay{order:5}
  .hero .hero__road{order:6}
  .hero .hero__sub{order:7}
  .hero .factpills{order:8}
  .hero .figures{order:9}
}

/* 2. PRICING ROW. The corner tag becomes a full-width bar across the top of
      the card, so every head reserves the same strip and the three heads
      stay level whether or not that card carries a bar. The recommended
      tier is raised with a NEGATIVE MARGIN against align-items:stretch --
      its top edge rises, its BOTTOM edge does not move, so the three
      Add-To-Cart buttons keep the one baseline they were engineered to
      share. Not transform: the reveal pass sets transform:none. */
body:has(.hero) .prices .pack__flag{
  left:0;right:0;top:0;height:36px;padding:0 14px;
  display:flex;align-items:center;justify-content:center;
  font-size:.8125rem;letter-spacing:.15em;
}
/*    .card--pack inherits .card's 24px padding-top, so the head already
      starts 24px below the card edge. The bar is absolutely positioned
      against the PADDING BOX, i.e. flush at the top, 36px tall. The head
      therefore only has to reserve 36 - 24 + 12 = 24px for its text to
      clear the bar by 12px. Reserving the full 36 left a visible trough.
      Measured, not assumed. */
body:has(.hero) .prices .pack__head{padding-top:24px}
/*    The 2-bottle card carries no flag, so it would be the one card in the
      row with a bare cap. It gets the same strip in a quiet tint, which
      keeps the three heads reading as one repeated object. Clipped to the
      card radius by the overflow:hidden already on .card--pack. */
body:has(.hero) .prices .card--pack:not(:has(.pack__flag))::before{
  content:"";position:absolute;left:0;right:0;top:0;height:36px;z-index:1;
  background:linear-gradient(90deg,var(--sage-tint) 0%,var(--sage-wash) 100%);
  border-bottom:1px solid var(--sage-line);
}
/*    The raise only means anything while the three cards share a row. At
      <=760px .prices collapses to one column and .card--pack.featured is
      pulled to order:-1, so a negative margin there would just eat the
      20px gap above the first card. Gated to the multi-column layout. */
@media (min-width:761px){
  body:has(.hero) .prices .card--pack.featured{margin-top:-18px}
}

/* 3. HERO MOTIF -- rise. Warmth lifting off the base of the bottle,
      drifting up and fading out. It lives on a pseudo-element of the media
      column and never on the <img>, which is the LCP element and is
      preloaded. Sized wider and taller than the 450px product card so it
      reads OUTSIDE it rather than being swallowed by it. 24s: this is a
      capsule taken once a day for weeks, not an energy drink. transform
      and opacity only. The reduced-motion guard a few lines above already
      names .hero__media::after with !important, so asking for less motion
      switches this off with everything else.

      Filed above the marker with the geometry, the way this sheet already
      files its other motif on .hero__media::before, so the hero paints
      once instead of popping when the async sheet lands. */
.hero .hero__media::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:-24%;right:-24%;bottom:-8%;height:88%;
  background:
    radial-gradient(34% 26% at 32% 86%,rgba(99,150,101,.34),rgba(99,150,101,0) 70%),
    radial-gradient(28% 22% at 64% 92%,rgba(169,211,170,.42),rgba(169,211,170,0) 72%),
    radial-gradient(20% 16% at 48% 74%,rgba(53,116,63,.22),rgba(53,116,63,0) 74%);
  filter:blur(30px);
  animation:gdfRiseWarm 24s cubic-bezier(.4,0,.5,1) infinite;
}
@keyframes gdfRiseWarm{
  0%{transform:translate3d(0,16%,0) scale(.94);opacity:0}
  16%{opacity:.54}
  58%{opacity:.46}
  100%{transform:translate3d(0,-30%,0) scale(1.1);opacity:0}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections, separated by hairlines rather than shadows */
.sec{padding:60px 0;position:relative;border-top:1px solid var(--line)}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--sage{background:var(--sage-wash);border-top-color:var(--sage-line)}
.sec--dark{background:var(--sage-d);color:#dceadb;border-top-color:var(--sage-d)}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#cbdec9}
.sec--dark .eyebrow{color:#a8d3a6;border-top-color:#54805a}
.sec--dark a{color:#b8e0b6}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec--center .eyebrow{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:#cbdec9}

/* 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;font-size:1.0625rem}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.sec--dark .ticks li::before{color:#8fd08d}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--sage-line);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;font-size:.9375rem;color:#fff;background:var(--sage-d);letter-spacing:.02em}
td{font-size:1rem}
tbody tr:nth-child(even){background:#f7faf7}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--sage-d)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps, numbers outside on a rule */
.steps{display:grid;gap:0;margin:0 0 1.2em;counter-reset:s;border-top:1px solid var(--sage-line)}
.step{position:relative;background:none;border-bottom:1px solid var(--sage-line);padding:22px 0 22px 66px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:22px;width:40px;height:40px;
  display:grid;place-items:center;
  background:var(--sage-tint);color:var(--sage-d);border:1px solid var(--sage-line);
  font-family:var(--display);font-weight:600;font-size:1.1rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: flat 1px boxes with a sage top rule */
.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-top:3px solid var(--sage-line);border-radius:0;padding:24px 22px 22px}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#26492c;border-color:#3d6844;border-top-color:#6a9f6f}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--sage-tint);border:1px solid var(--sage-line);border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--sage-d)}
.callout p:last-child{margin:0}
.alert{background:#fdf6ea;border:1px solid #efdcbc;border-left:4px solid #8a5a10;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:#8a5a10}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.34rem;font-weight:500;line-height:1.48;color:var(--sage-d);border-left:3px solid var(--sage-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-left:4px solid var(--sage-2);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px;font-size:1rem;color:var(--sage-d)}
.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}
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--sage-line);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:600;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#bcd4ba;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr 1fr 1.25fr;border:1px solid var(--sage-line);background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:1rem}
.versus>div:nth-child(3n+1){font-weight:600;background:#f7faf7}
.versus__h{background:var(--sage-d)!important;color:#fff;font-family:var(--text);font-weight:700;font-size:.9375rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--sage-line);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(--sage-d);padding:4px 13px;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}
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:2px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;position:relative}
.card--pack.featured{border-color:var(--sage);box-shadow:var(--shadow)}
.pack__head{background:var(--sage-tint);border-bottom:1px solid var(--sage-line);padding:14px 20px;display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:var(--sage-d);border-bottom-color:var(--sage-d)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.16rem;font-weight:600}
.pack__head span{font-size:.875rem;font-weight:600;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--sage);color:#fff;font-family:var(--text);font-size:.875rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px 13px;z-index:3}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,170px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.4rem;font-weight:600;color:var(--sage-d);line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1rem;font-weight:600;top:-.72em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:700}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2);font-size:.9375rem}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.9375rem;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(--sage-line);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px;font-size:.9375rem}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--sage-d);font-size:1rem}
.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);padding:18px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:1rem;margin-bottom:4px;color:var(--sage-d)}
.badgewall span{font-size:.9375rem;color:var(--ink-2)}

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

/* ---- FAQ */
.faq{border:1px solid var(--sage-line);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:600;font-size:1.08rem;color:var(--sage-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-family:var(--text);font-size:1.3rem;font-weight:400;color:var(--sage)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.0625rem;color:var(--ink-2);margin:0 0 .6em}
.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(--sage-2);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(--sage-d);color:#fff;font-family:var(--display);font-weight:600;font-size:1.1rem;border-radius:50%}
.byline b{display:block;margin-bottom:6px;color:var(--sage-d)}
.byline p{font-size:.9375rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--sage-line);border-top:3px solid var(--sage-2);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final__img img{width:210px}
.final h2{margin:0 0 10px}
.final__price{font-weight:600;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);padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .18s ease}
.rel a:hover{border-color:var(--sage)}
.rel b{display:block;font-family:var(--display);font-size:1.1rem;color:var(--sage-d);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms 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:.9375rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.article h2{scroll-margin-top:130px}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.toc{background:var(--sage-wash);border:1px solid var(--sage-line);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--sage-d)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.0625rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts article{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--sage-line);padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.0625rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: a sage block, returns address first, the rest a plain index */
.fcta{background:var(--sage-wash);border-top:1px solid var(--sage-line);padding:52px 0}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__eye{display:block;font-family:var(--text);font-size:.875rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--sage);margin-bottom:10px}
.fcta__h{font-family:var(--display);font-size:1.7rem;font-weight:600;line-height:1.24;color:var(--ink);margin:0 0 10px}
.fcta p{color:var(--ink-2)}
.fcta__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}
.fcta__img img{width:280px}
footer{background:var(--sage-d);color:#cfe0cf}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:26px;padding:48px 0 34px}
.fbrand{font-family:var(--display);font-size:1.7rem;font-weight:600;color:#fff;letter-spacing:-.018em;line-height:1}
.fbrand span{color:var(--sage-3)}
.frole{font-size:.9375rem;color:#b6cdb5;margin:8px 0 14px}
.fcard p{font-size:1rem;color:#cfe0cf;margin:0 0 .7em}
.fcard b{color:#fff}
.fcard a{color:#d8ead6}
.fh{font-family:var(--text);font-size:.875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-3);margin:0 0 10px}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0}
.fgrid li{margin:0}
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.9688rem;color:#cfe0cf;text-decoration:none}
footer li a:hover{color:#fff}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0;border-top:1px solid #4a7351}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:#b6cdb5}
.fseals a{color:#d8ead6}
.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:#b6cdb5}
.disc{background:#27492d;border-top:1px solid #4a7351;padding:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:#c3d7c2}
.disc b{color:#fff}
.disc a{color:#d8ead6}
.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:1px;background:var(--sage-3)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid #4a7351;font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--sage-d);color:#fff;transform:translateY(105%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;padding:12px 22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#bcd4ba}
.buybar .btn{margin-left:auto;flex:0 0 auto;background:#fff;color:var(--sage-d);border-color:#fff}
.buybar .btn:hover{background:var(--sage-tint);color:var(--sage-d);border-color:var(--sage-tint)}

/* ---- 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:1240px){
  .nav__buy{display:none}
  .nav__ends{gap:0 20px}
}
@media (max-width:1100px){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:24px}
}
@media (max-width:1040px){
  :root{--navh:104px}
  /* the split nav collapses into a single stacked panel under the identity */
  .nav__row{grid-template-columns:1fr;justify-items:center}
  /* The burger is position:absolute in the right gutter, so centring the
     identity in the FULL row width walked it straight under the button: the
     identity ended at x=333 against a burger starting at 320 (390px), 345 v 344
     at 414 and 318 v 290 at 360, which hides the closing bracket of the mark
     and crowds "Retailer" into the menu icon. Reserve the gutter and centre the
     identity in what is left. */
  .nav__row{padding-right:80px}
  .nav__id{max-width:100%}
  /* With the gutter reserved the retailer line has to wrap, and it broke with
     "Retailer" alone on the last line. Balance it over two lines instead of
     shrinking 15px type to make it fit. */
  .nav__id .bw small{text-wrap:balance;max-width:19ch;margin-inline:auto}
  .menu{display:none;order:4;width:100%}
  .menu.open{display:block}
  .nav__ends{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav__ends a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav__ends a[aria-current="page"]{border-bottom-color:var(--line)}
  .nav__more{display:block}
  .burger{display:block}
  .nav__id{order:2}
}
@media (max-width:980px){
  /* the sage band would fall behind the copy once the columns stack */
  .hero::after{display:none}
  .hero__grid{grid-template-columns:1fr;gap:18px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:2px 0 8px;background:var(--sage-wash);border:1px solid var(--sage-line);padding:12px 0}
  .answer{order:4}
  /* the CTA comes straight after the Quick Answer on a phone; the roadmap line
     follows it. hero.md's stacked order is eyebrow, H1, shot, answer, CTA, and
     the roadmap is not one of the ordered blocks, so it goes below rather than
     pushing the button another screen down. */
  .hero__cta{order:5}
  .hero__road{order:6}
  .hero__pay{order:7}
  /* a 346px-wide bottle on a 390px screen puts the Quick Answer at y=974. The
     shot still has to be recognisable, so it is capped rather than shrunk to a
     thumbnail. */
  .hero__card img{max-width:250px}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding:26px 0 40px}
  /* the stacked H1 sat at six lines and pushed the Quick Answer to y=900 on a
     390px screen. 28px still reads as the headline and buys back a line. */
  .hero h1{font-size:1.75rem}
  .util__row{gap:4px 12px}
  .util__item--trim{display:none}
  .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)}
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr;gap:22px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .fgrid{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
  .bw b{font-size:1.32rem}
}

/* ---- hero: the product stands on the sage band -----------------------------
   No card behind the bottle, so it needs its own ground: a soft elliptical
   shadow under it and nothing else. The swell that rises and subsides belongs
   to hero_motifs.py and lives on .hero__media::before, above CRITICAL-END.
   Transform only on the card, never on the <img>: the bottle is the LCP
   element and an element starting at opacity:0 is not recorded as painted. */
.hero__card{isolation:isolate}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:26px;translate:-50% 0;
  width:54%;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(28,37,41,.26),transparent 76%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:gdfRest 11s ease-in-out infinite}
  @keyframes gdfRest{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 header is two rows tall and its height changes between breakpoints.

   Requires .hero NOT to clip on the block axis: any non-visible overflow on an
   ancestor becomes the scrollport a sticky child resolves against. */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 104px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 104px) - 28px);
    min-height: calc(100svh - var(--navh, 104px) - 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; }
}

/* --- pack cards read as one repeated object ---------------------------------
   A pricing row is three cards that share their edges, their image slot and
   their button baseline. The three vendor pack shots are all 1125x1125, so one
   slot height serves all three; the height lives here rather than on the <img>
   attributes, which must keep stating each file's true ratio or fix_img_dims.py
   rewrites them on every build and layout shift gets worse. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,170px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}
/* brand mark: bracket construction */
.brand{position:relative;padding-inline:14px}.brand::before,.brand::after{content:'';position:absolute;top:2px;bottom:2px;width:8px;border:2px solid #35743f}.brand::before{left:0;border-right:0}.brand::after{right:0;border-left:0}

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

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

/*!SITE-HOME-PAINT-START*/
/* ---- home-page surface -------------------------------------------------
   Paint only: radius, shadow, background, colour, transform, transition.
   Home page only -- .hero is on index.html alone, so body:has(.hero) is the
   guard for anything that also exists on an inner page.

   modern_surface.py and footer_type.py re-append their own blocks on every
   build and land AFTER this one, so nothing here relies on source order.
   Every rule is won on SPECIFICITY: body:has(.hero) .x scores 0,2,1 against
   their 0,1,0. Their two custom properties are left alone and this block
   carries its own, prefixed gdf-, so a re-append cannot take them back.

   Slot: radius_card 16, radius_control 10, depth = tight contact + wide
   ambient, tinted with this site's own ink (28,37,41) rather than neutral
   black. */
:root{
  --gdf-rc:16px;
  --gdf-rb:10px;
  --gdf-sh:0 1px 2px rgba(28,37,41,.07),0 10px 28px rgba(28,37,41,.10);
  --gdf-sh-lift:0 2px 4px rgba(28,37,41,.10),0 18px 40px rgba(28,37,41,.15);
  --gdf-sh-cta:0 1px 2px rgba(28,37,41,.18),0 10px 28px rgba(47,88,54,.30);
  --gdf-sh-cta-lift:0 2px 4px rgba(28,37,41,.20),0 18px 40px rgba(47,88,54,.36);
  --gdf-cta:linear-gradient(135deg,#3a7d45 0%,#35743f 45%,#2f5836 100%);
  --gdf-cta-over:linear-gradient(135deg,#35743f 0%,#2f5836 52%,#27482c 100%);
}

/* controls: 10px, and every clickable thing answers the pointer */
body:has(.hero) .btn{
  border-radius:var(--gdf-rb);
  transition:background-color .2s ease,background-image .2s ease,
             border-color .2s ease,color .2s ease,
             box-shadow .22s ease,transform .22s ease;
}
body:has(.hero) .btn:hover{transform:translateY(-2px)}
body:has(.hero) .btn:focus-visible{outline:3px solid var(--sage-2);outline-offset:3px}

/* the two weights: the buying CTA carries the gradient, the secondary stays
   solid. background-image only, so the flat sage the base rule paints stays
   underneath as the fallback and the pair never loses its contrast. The top
   stop is #3a7d45 -- 4.97:1 against white, so the lightest band of the
   gradient still clears AA for the label sitting on it. */
body:has(.hero) .hero__cta .btn:not(.btn--ghost),
body:has(.hero) .prices .card--pack .btn,
body:has(.hero) .final .btn:not(.btn--ghost),
body:has(.hero) .nav__buy{
  background-image:var(--gdf-cta);border-color:#2f5836;
  box-shadow:var(--gdf-sh-cta);
}
body:has(.hero) .hero__cta .btn:not(.btn--ghost):hover,
body:has(.hero) .prices .card--pack .btn:hover,
body:has(.hero) .final .btn:not(.btn--ghost):hover,
body:has(.hero) .nav__buy:hover{
  background-image:var(--gdf-cta-over);border-color:#27482c;
  box-shadow:var(--gdf-sh-cta-lift);
}
body:has(.hero) .hero__cta .btn--ghost{
  background-color:var(--panel);border-color:var(--sage-line);
  color:var(--sage-d);box-shadow:var(--gdf-sh);
}
body:has(.hero) .hero__cta .btn--ghost:hover{
  background-color:var(--sage-tint);border-color:var(--sage);
  color:var(--sage-d);box-shadow:var(--gdf-sh-lift);
}

/* panels: one radius, one layered depth */
body:has(.hero) .card,
body:has(.hero) .answer,
body:has(.hero) .badgewall figure,
body:has(.hero) .tablewrap,
body:has(.hero) .faq,
body:has(.hero) .ingcard,
body:has(.hero) .keypoints,
body:has(.hero) .callout,
body:has(.hero) .step,
body:has(.hero) .final,
body:has(.hero) .shots figure,
body:has(.hero) .posts article{border-radius:var(--gdf-rc);box-shadow:var(--gdf-sh)}
.hero .figures{border-radius:var(--gdf-rc);overflow:hidden;box-shadow:var(--gdf-sh)}
.hero .answer{border-top-color:var(--sage-2)}

body:has(.hero) .card--pack:hover,
body:has(.hero) .badgewall figure:hover,
body:has(.hero) .posts article:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .rel a:hover{box-shadow:var(--gdf-sh-lift);transform:translateY(-2px)}

/* pricing row: full-width ribbon bar, a recommended tier in its own colour,
   and dashed separators drawn as a BACKGROUND so they add no height and the
   three Add-To-Cart buttons keep their shared baseline. */
body:has(.hero) .prices .card--pack{
  border-radius:var(--gdf-rc);border-color:var(--sage-line);
  box-shadow:var(--gdf-sh);
  transition:box-shadow .22s ease,transform .22s ease;
}
body:has(.hero) .prices .card--pack.featured{
  border-color:var(--sage);
  background:linear-gradient(180deg,#f7fbf6 0%,var(--panel) 46%);
  box-shadow:var(--gdf-sh-lift);
}
body:has(.hero) .prices .card--pack.featured .pack__head{
  background:linear-gradient(135deg,#35743f 0%,#2f5836 100%);
}
body:has(.hero) .prices .pack__flag{
  background:linear-gradient(90deg,#35743f 0%,#2f5836 100%);
  border-radius:0;
}
body:has(.hero) .prices .card--pack.featured .pack__flag{
  background:linear-gradient(90deg,#639665 0%,#35743f 56%,#2f5836 100%);
}
body:has(.hero) .prices .pack__perks li{
  background-image:repeating-linear-gradient(90deg,var(--sage-line) 0 5px,rgba(0,0,0,0) 5px 10px);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
}
body:has(.hero) .prices .pack__perks li:last-child{background-image:none}

@media (prefers-reduced-motion:reduce){
  body:has(.hero) .btn,
  body:has(.hero) .prices .card--pack{transition:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .badgewall figure:hover,
  body:has(.hero) .posts article:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .rel a: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 .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 10 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,37,41), 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(28,37,41,.06), 0 6px 18px rgba(28,37,41,.07);
  --lift:0 2px 6px rgba(28,37,41,.09), 0 16px 34px rgba(28,37,41,.14);
}

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

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.card,
.step,
.keypoints,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.split__img,
.answer{border-radius:var(--radius)}

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