:root{
  /* ---- ground: bone white with sand-taupe bands ----
     The separation in this batch is carried by the GROUND, not the accent:
     three of the four products are blue-green and two ledger rows already sit
     near that space. GutOptim's teal therefore stays on the product and on
     the buttons, and the page itself is bone and sand. */
  --paper:#faf8f4;
  --paper-tint:#ece4d8;
  --paper-card:#ffffff;
  --paper-deep:#ddd2c1;

  /* ---- ink: the charcoal of the printed GutOptim wordmark (#262626) ---- */
  --ink:#22282a;
  --ink-dk:#171b1c;
  --ink-soft:#33403f;
  --muted:#46524f;
  --faint:#55625f;
  --line:#ddd4c6;
  --line-soft:#ebe4d8;

  /* ---- accent, taken from the bottle art and nowhere else ----
     #65c7b8 is sampled from the label ground in gutoptim-product-label.webp
     and is the colour of the bottle itself. It is far too light to carry text
     on bone, so --accent is that hue taken down to a readable weight (5.2:1
     on --paper, 5.5:1 white-on-accent) and --mint keeps the bottle's own
     value for fills, rules and the product bands. */
  --accent:#1c7570;
  --accent-deep:#14544f;
  /* --mint and --mint-soft are written as rgb() rather than hex ON PURPOSE.
     brand_marks.py picks a logo fill by scanning :root for the most SATURATED
     #hex token between 0.12 and 0.7 lightness, and on this palette that is the
     mint -- which gives a 1.9:1 tile with an invisible white glyph on a bone
     header (pitfall 64). Written as rgb() the tool skips them and lands on
     --accent, which is what the mark actually uses. Same colour, same cascade;
     only the tool's regex sees a difference. */
  --mint:rgb(101,199,184);
  --mint-soft:rgb(159,220,208);
  --accent-tint:#e2f2ee;
  --accent-line:#b7dcd3;
  --accent-glow:rgba(28,117,112,.22);

  /* ---- charcoal: the footer link wall and the dark bands ---- */
  --char:#23262a;
  --char-2:#2e3236;
  --char-ink:#d8d2c6;
  --char-mint:#9bdccf;

  /* ---- warning ramp: a deeper sand-taupe, from the same ground ----
     There is no metallic on this bottle, so there is no gold ramp. Safety
     blocks take the ground's own darker clay instead, which reads as a note
     rather than as a second brand colour. */
  --warn:#8a7454;
  --warn-deep:#5c4b32;
  --warn-soft:#f2ece0;
  --warn-line:#d9cbb0;

  /* ---- type: Familjen Grotesk (display) + Lexend (body) ---- */
  --display:'Familjen Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Familjen Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Lexend',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- metrics: a squarer register than either sister site ---- */
  --wrap:1180px;
  --measure:760px;
  --measure-wide:980px;
  --r:8px;
  --r-s:4px;
  --r-l:14px;
  --radius:8px;
  --shadow:0 12px 30px rgba(34,40,42,.09);
  --shadow-sm:0 2px 10px rgba(34,40,42,.06);
  --shadow-lg:0 22px 54px rgba(34,40,42,.16);
}

/* ==========================================================================
   Getgutoptim - getgutoptim.com
   Component system taken from the UI reference at alkatidde.com: flat
   bordered cards, a Quick Answer card with an accent left edge, centred
   section heads, tinted section bands, rounded-chip fact pills, a checklist
   with a filled accent dot, three figure tiles, a sticky product column.
   The ARRANGEMENT is not the reference's. The reference puts the product on
   the right over a soft curved blob; this site splits the hero down a drawn
   vertical rule -- copy left, bottle right standing over three stacked
   tinted bands, with the rule running on past the bottle to the section edge.
   Colour is not the reference's either. It is derived from the product: the
   mint-teal of the bottle label (#65c7b8), taken down to a readable weight
   for type and buttons, on a bone-white ground with sand-taupe bands.
   Type: Familjen Grotesk for display, Lexend for reading.
   ========================================================================== */

/* ---- RESET AND BASE ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:128px}
html,body{overflow-x:clip}
body{font-family:var(--sans);background:var(--paper);color:var(--muted);
  line-height:1.7;-webkit-font-smoothing:antialiased;font-size:1.0625rem}
img,svg,table,video{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style:none}
h1,h2,h3,h4,h5{font-family:var(--display);color:var(--ink);line-height:1.16;
  font-weight:700;letter-spacing:-.016em}
b,strong{color:var(--ink-soft)}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:10px 16px;z-index:9999;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}

/* ---- 0. THE TOPLINE TRUST STRIP (house .util component) ------------------
   Role, lot, dose and count, guarantee, order phone, above the masthead, so
   the masthead does not have to carry them (hero.md). It stays ABOVE the
   CRITICAL-END marker: it is the first thing painted, and from the async half
   of the sheet it would flash unstyled at the very top of the page.

   This site's separation is carried by the GROUND, not by the accent -- that
   is written at the top of :root and it governs here too. So the strip is the
   sand-taupe band, the same --paper-tint the section slabs use, with the page
   ink on it; the teal stays on the product, the buttons and the one link in
   the row. Flat, square and hairline-ruled, like everything else here: the
   separator is a 5px SQUARE mint pip, the bottle's own colour at the size the
   nav chip already uses for its dot, and there is not a rounded corner or a
   shadow in the strip. Nothing in it is borrowed from a sister site.

   The pip is suppressed on the guarantee, which is the last item at every
   width, so shedding items 2 and 3 on a narrow screen cannot leave a pip
   pointing at nothing. */
.util{background:var(--paper-tint);color:var(--ink-soft);font-size:.9063rem;
  border-bottom:1px solid var(--paper-deep)}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:0;
  padding-block:8px}
/* The items are flex CHILDREN, never flex containers: an inline-flex item
   with a gap would open the same gap between "Lot" and the lot code. */
.util__item{white-space:nowrap;padding-right:13px}
.util__item::after{content:"";display:inline-block;width:5px;height:5px;
  background:var(--mint);margin-left:13px;vertical-align:.12em}
.util__item:nth-child(4)::after{display:none}
.util__item b{color:var(--ink);font-weight:600}
.util__tel{color:var(--accent-deep);font-weight:600;white-space:nowrap;
  padding-left:13px;margin-left:auto}
.util__tel:hover{color:var(--accent)}
/* The five facts measure 1,099px and the row is 1,136px at every width from
   1180 up, so it is one line on a desktop with 37px to spare. Below that it
   sheds, least useful first: the lot at 1140 (it is printed again on
   batch-verify.html), the dose at 960 (the Quick Answer opens with it). The
   role, the guarantee and the order line reach 390, where the strip sets
   itself as two LEFT-ALIGNED rows flush with the wordmark below it rather
   than centring -- this masthead is a left-aligned stack and the strip is
   part of that stack. Below 430 "money-back" goes too: 233 + 144 is 377px of
   text in a 346px row, and it is the one word in the strip that states
   nothing the rest of the line does not. */
@media(max-width:1140px){.util__item:nth-child(2){display:none}}
@media(max-width:960px){.util__item:nth-child(3){display:none}}
@media(max-width:700px){
  .util__row{padding-block:7px}
  .util__item:first-child{flex:0 0 100%;padding-right:0}
  .util__item:first-child::after{display:none}
  .util__item:nth-child(4)::after{display:inline-block}
  .util__tel{margin-left:0;padding-left:0}
}
@media(max-width:430px){.util__long{display:none}}

/* ---- 1-2. NAV: an oversized wordmark, the menu on a rule beneath -----------
   Row one is the wordmark at display size with the order button at the far
   right. Row two is the menu, left-aligned under the wordmark, with the
   shipping chip pinned to the right end of the same rule. Companions of
   .wrap here use padding-block only: a `padding: Npx 0` shorthand would wipe
   the page gutter and no overflow test can see it (pitfall 46). */
.nav{position:sticky;top:0;z-index:900;background:var(--paper);
  border-bottom:1px solid var(--line)}
.nav__top{background:var(--paper)}
.nav__toprow{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:14px 10px;flex-wrap:nowrap;position:relative}
.brand{display:inline-flex;align-items:center;gap:0;flex:none;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand svg{width:40px;height:40px;margin-right:13px;flex:none}
.brand__t{display:flex;flex-direction:column;line-height:1}
.brand__prod{font-family:var(--display);font-size:2.05rem;font-weight:700;
  color:var(--ink);letter-spacing:-.035em;white-space:nowrap;text-transform:uppercase}
.brand__prod span{color:var(--accent)}
.brand__firm{font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-top:6px;
  white-space:nowrap}
.nav__cta{flex:none}
.nav__menu{border-top:1px solid var(--line-soft);background:var(--paper)}
.nav__menurow{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:0;flex-wrap:nowrap;position:relative}
.navmenus{display:flex;align-items:center;flex-wrap:nowrap;min-width:0}
.menu{display:flex;align-items:center;gap:26px;flex-wrap:nowrap}
.menu li{flex:none}
.menu a{font-family:var(--sans);font-size:.9375rem;font-weight:500;color:var(--ink-soft);
  white-space:nowrap;display:block;padding-block:13px;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--accent);text-decoration:none;
  border-bottom-color:var(--accent)}
.nav__chip{flex:none;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:.8438rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-deep);background:var(--accent-tint);
  border:1px solid var(--accent-line);border-radius:var(--r-s);padding:5px 13px;
  white-space:nowrap}
.nav__chip::before{content:"";width:7px;height:7px;background:var(--mint);
  border-radius:50%}
.burger{display:none;background:var(--paper-card);border:1px solid var(--line);
  cursor:pointer;width:46px;height:46px;padding:11px;flex:none;border-radius:var(--r-s)}
.burger span{display:block;height:2px;background:var(--ink);margin:4px 0}

/* ---- 3. BUTTONS: a square block, no arrow, tracked caps on the large one -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1.2;
  padding:14px 26px;border-radius:var(--r-s);border:2px solid transparent;
  cursor:pointer;text-align:center;letter-spacing:.01em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--cta{background:var(--accent);color:#fff;box-shadow:0 8px 20px var(--accent-glow)}
.btn--cta:hover{background:var(--accent-deep);color:#fff}
.btn--ghost{background:var(--paper-card);color:var(--accent-deep);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-deep)}
.btn--dark,.btn--ink{background:var(--char);color:#fff}
.btn--dark:hover,.btn--ink:hover{background:var(--ink-dk);color:#fff}
.btn--lg{padding:17px 32px;font-size:1.05rem;letter-spacing:.03em}
.btn--block{display:flex;width:100%}

/* ---- 4. HERO: split down a drawn rule, bottle over stacked bands ----------
   The divider is a pseudo-element on the grid so it can run PAST the bottle
   to the bottom edge of the section, which is the whole point of the shape.
   .hero must not clip on the block axis or the sticky product column has
   nothing to stick to (pitfall 65). */
.hero{position:relative;background:var(--paper);overflow-x:clip;overflow-y:visible;
  border-bottom:1px solid var(--line)}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:0;
  align-items:start;padding-block:46px 60px}
/* The columns are 1.04fr and 0.96fr, so the boundary falls at 52% of the
   grid. The rule runs from above the first line of copy to past the bottom of
   the section, which is the shape: the bottle stands beside a rule, not
   inside a card. */
.hero__grid::before{content:"";position:absolute;z-index:0;
  left:52%;top:-46px;bottom:-60px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 8%,var(--line) 78%,var(--mint) 100%)}
.hero__copy{padding-right:54px;position:relative;z-index:2}
.hero__media{position:relative;z-index:2;padding-left:54px}
.hero__stick{position:relative;display:block;padding-block:20px 40px}
.hero__bands{position:absolute;left:0;right:0;top:12%;bottom:16%;z-index:0;
  display:grid;grid-template-rows:repeat(3,1fr);border-radius:var(--r);
  overflow:hidden}
.hero__bands span{display:block}
.hero__bands span:nth-child(1){background:var(--paper-tint)}
.hero__bands span:nth-child(2){background:var(--accent-tint)}
.hero__bands span:nth-child(3){background:var(--paper-deep)}
.hero__card{position:relative;z-index:2;background:transparent;text-align:center;
  padding:10px}
.hero__card img{margin-inline:auto;max-width:100%;
  filter:drop-shadow(0 22px 26px rgba(34,40,42,.26))}
.hero__tag{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:4;
  background:var(--char);color:#fff;font-size:.9063rem;font-weight:500;
  letter-spacing:.06em;padding:7px 16px;border-radius:var(--r-s);white-space:nowrap}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
  font-size:.8438rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:12px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--mint)}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--paper-card);
  border:1px solid var(--line);color:var(--accent-deep);font-weight:500;
  font-size:.875rem;padding:7px 15px;border-radius:var(--r-s)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint)}
.hero h1{font-size:clamp(2.1rem,4.2vw,3.15rem);margin:14px 0 0;font-weight:700;
  line-height:1.06;letter-spacing:-.03em}
.hero h1 span{color:var(--accent)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.hero__sub{margin:16px 0 0;font-size:1.0625rem}

.ticks{margin:22px 0 0;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:1.0625rem;
  color:var(--ink-soft)}
.ck{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;margin-top:3px}

.pay{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:18px 0 0;
  font-size:.9063rem;color:var(--faint)}
.pay img{width:200px;height:26px;object-fit:contain}

.factpills{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.factpills li{background:var(--paper-card);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;font-size:.9063rem;color:var(--faint)}
.factpills li b{color:var(--ink)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin:20px 0 0}
.figures div{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r-s);padding:14px 10px;text-align:center}
.figures b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--ink);
  line-height:1.1;font-weight:700}
.figures span{display:block;font-size:0.9062rem;font-weight:500;color:var(--faint);
  text-transform:uppercase;letter-spacing:.06em;margin-top:4px}

.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.95rem;color:var(--faint);flex-wrap:wrap}
.hero__rating b{color:var(--ink-soft)}
.rev__stars{color:var(--warn-deep);letter-spacing:1px}
.floaty{position:absolute;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 15px;box-shadow:var(--shadow);
  font-family:var(--display);font-size:1.02rem;font-weight:700;color:var(--ink);
  z-index:4;line-height:1.15;display:flex;align-items:center;gap:10px}
.floaty img{width:44px;height:44px;flex:none}
.floaty small{display:block;color:var(--accent-deep);font-family:var(--sans);
  font-size:.9063rem;font-weight:500;margin-top:3px}
.floaty--tl{top:26px;left:12px}
.floaty--br{bottom:56px;right:-8px}

/* ---- 5. QUICK ANSWER (AEO): a card with an accent edge, as the reference -- */
.answer{background:var(--paper-card);border:1px solid var(--line);
  border-left:5px solid var(--accent);border-radius:0 var(--r) var(--r) 0;
  padding:19px 24px;margin:22px 0 0}
.answer .qtag{display:block;font-family:var(--sans);font-weight:600;font-size:.8438rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);
  margin-bottom:.5em}
.answer p{margin:0;font-size:1.0625rem;color:var(--ink-soft)}
.hero .answer p{font-size:1.1rem;line-height:1.66}
.hero .answer::before{content:"Quick answer";display:block;font-family:var(--sans);
  font-weight:600;font-size:.8438rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:.45em}

/* ---- 6. TRUST ROW -------------------------------------------------------- */
.trust{background:var(--paper-tint);border-bottom:1px solid var(--line)}
.trust__note{max-width:320px;font-size:.9063rem;line-height:1.55;color:var(--faint)}
.trust__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:22px 40px;padding-block:22px}
.trust__row figure{text-align:center;max-width:130px}
.trust__row img{margin-inline:auto}
.trust__row figcaption{font-size:.9063rem;color:var(--faint);margin-top:7px;
  font-weight:500}

/* ---- ABOVE-THE-FOLD RESPONSIVE -------------------------------------------
   The nav collapse and the hero's phone ordering decide the first paint, so
   they sit above the critical marker and are inlined into every page head. */
@media(max-width:1300px){.menu{gap:20px}.menu a{font-size:.9063rem}}
@media(max-width:1150px){.menu{gap:15px}.menu a{font-size:.8875rem}}
@media(max-width:1080px){
  .burger{display:block}
  .nav__menurow{justify-content:flex-end;padding-block:0}
  .navmenus{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;background:var(--paper-card);
    border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);
    box-shadow:var(--shadow);padding-block:4px 8px;max-height:76vh;overflow-y:auto;
    z-index:10}
  .navmenus.open{display:flex}
  .menu{flex-direction:column;align-items:stretch;gap:0}
  .menu a{display:block;padding:14px 22px;border-bottom:1px solid var(--line-soft);
    font-size:1rem}
  .menu a:hover,.menu a[aria-current]{border-bottom-color:var(--line-soft);
    background:var(--accent-tint)}
  .nav__chip{margin-block:9px}
}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:20px;padding-block:26px 44px}
  .hero__grid::before{display:none}
  .hero__copy{padding-right:0;display:contents}
  .hero__media{padding-left:0;order:3;background:var(--paper-tint);
    border-radius:var(--r);overflow:hidden}
  .hero__bands{top:0;bottom:0;border-radius:0;opacity:.85}
  .hero__copy>.eyebrow{order:1}
  .hero__copy>.pill{order:1;justify-self:start}
  .hero__copy>h1{order:2}
  .hero__copy>.answer{order:4}
  .hero__copy>.ticks{order:5}
  .hero__copy>.hero__cta{order:6}
  .hero__copy>.hero__rating{order:7}
  .hero__copy>.pay{order:8}
  .hero__copy>.hero__sub{order:9}
  .hero__copy>.factpills{order:10}
  .hero__copy>.figures{order:11}
  .hero__card img{max-width:290px}
  .floaty{display:none}
}
@media(max-width:700px){
  .hero h1{font-size:2.1rem}
  .hero__card img{max-width:235px}
  .brand__prod{font-size:1.65rem}
}
@media(max-width:480px){
  .nav__toprow{padding-block:11px 8px}
  .nav__cta .btn{padding:11px 15px;font-size:.92rem}
  .brand__firm{display:none}
  .nav__chip{display:none}
}
/* The header CTA has to go before the burger is pushed off the viewport. At 390
   the row is brand 173 + CTA 155 + burger 46 + 20px gaps + 44px gutter = 458px
   against 390 available, so the burger landed at x=390 with its bars at 424 --
   measured, not guessed. It was hidden only under 380px, which is narrower than
   the phone most people hold. The sticky buy bar carries the CTA on a phone, so
   nothing is lost. .brand keeps flex:none, so it must also be able to shrink
   rather than shove its neighbours out. */
@media(max-width:560px){.nav__cta .btn{display:none}}
@media(max-width:700px){.brand{min-width:0}.burger{flex:none}}


/* ---- hero motif -- bloom-grid ---------------------------------------- */
.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(158deg,#faf8f4,#dfefe9 48%,#faf8f4)}.hero__media::before{content:'';position:absolute;inset:-8% -6%;background-image:linear-gradient(rgba(101,199,184,0.22) 1px,transparent 1px),linear-gradient(90deg,rgba(101,199,184,0.22) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(closest-side,#000 30%,transparent 78%);-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 78%);z-index:1;pointer-events:none}.hero__media::after{content:'';position:absolute;left:46%;top:46%;width:88%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(101,199,184,0.24),transparent 74%);animation:goBloom 9s ease-in-out infinite;z-index:1;pointer-events:none}@keyframes goBloom{0%,100%{scale:.86;opacity:.45}50%{scale:1.08;opacity:.9}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!important}}

/* ---- hero stage: what the product is FOR, moving around the bottle ----
   The motif paints the ground; this paints the air around the product. The
   bottle's own artwork is a field of rising bubbles, so the hero carries the
   same idea into the space around it: fine bubbles drifting up past the
   bottle, and a culture halo breathing behind it. That is the use case --
   something living and settling in the gut -- rather than decoration.
   Both layers hang off .hero__stick and .hero__card::before, which have no
   rules of their own here; .hero__media's two pseudo-elements belong to
   hero_motifs.py and are left alone (pitfall 65: a motif that touched the
   media column removed the sticky product column on 14 sites).
   Transform, opacity and background-position only. Nothing sets position on
   .hero__media and nothing makes an ancestor a scroll container. */
.hero__stick{isolation:isolate}
/* The field has to be WIDER than the bottle, or every bubble renders behind
   the product image (z-index 3) and the tinted bands, and only a sliver shows
   down one edge. Measured: .hero__stick is 350px wide, so a field inset to 4%
   put the whole pattern under the bottle. -26% on each side puts the movement
   in the air beside it, which is where it reads. The hero clips overflow-x,
   so a wide decorative layer cannot widen the document. */
.hero__stick::after{content:"";position:absolute;inset:-2% -26% -2%;z-index:1;
  pointer-events:none;opacity:.78;
  background-image:radial-gradient(circle,var(--accent) 5.5px,transparent 6.2px),
    radial-gradient(circle,var(--accent-deep) 3.4px,transparent 4px),
    radial-gradient(circle,var(--accent) 2.2px,transparent 2.8px);
  background-size:104px 146px,78px 112px,58px 88px;
  background-position:12px 0,50px 34px,28px 62px;
  -webkit-mask-image:linear-gradient(to top,#000 2%,rgba(0,0,0,.5) 52%,transparent 90%);
  mask-image:linear-gradient(to top,#000 2%,rgba(0,0,0,.5) 52%,transparent 90%);
  animation:goBubbles 24s linear infinite}
.hero__card::before{content:"";position:absolute;left:50%;top:52%;width:78%;
  aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;
  pointer-events:none;
  background:radial-gradient(closest-side,var(--accent-tint,#dff0ec),transparent 74%);
  animation:goCulture 10s ease-in-out infinite}
.hero__card{animation:goSettle 9s ease-in-out infinite}
@keyframes goBubbles{to{background-position:12px -500px,86px -336px,44px -204px}}
@keyframes goCulture{0%,100%{transform:scale(.9);opacity:.5}
  50%{transform:scale(1.06);opacity:.9}}
@keyframes goSettle{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){
  .hero__stick::after,.hero__card::before,.hero__card{animation:none!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 118px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 118px) - 28px); min-height: calc(100svh - var(--navh, 118px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}

/*!CRITICAL-END*/

/* ---- 7. SECTIONS --------------------------------------------------------- */
.sec{padding-block:72px}
.sec--tight{padding-block:40px}
.sec--tint{background:var(--paper-tint)}
.sec--white{background:var(--paper-card)}
.sec--center .sec__head{text-align:center;margin-inline:auto}
/* --accent is 4.35:1 on the sand band, under the 4.5 floor, so links inside a
   tinted section take the deeper value instead of the base one. */
.sec--tint a:not(.btn){color:var(--accent-deep)}
.sec__head{max-width:var(--measure-wide);margin-bottom:34px}
.sec__head--center{text-align:center;margin-inline:auto}
.sec h2{font-size:clamp(1.65rem,3vw,2.3rem);margin-bottom:12px}
.sec h3{font-size:1.2rem;margin-bottom:8px}
.lead{font-size:1.12rem;color:var(--muted)}
.note{font-size:.9063rem;color:var(--faint)}
.sec p+p,.sec p+ul,.sec p+ol,.sec ul+p,.sec ol+p{margin-top:1em}
.sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
.sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
.sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
.sec>.wrap>.keypoints,.sec>.wrap>.pullquote,.sec>.wrap>blockquote{
  max-width:var(--measure);margin-inline:auto}
.sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{
  max-width:var(--measure-wide);margin-inline:auto}
.sec>.wrap>h1{max-width:var(--measure);margin-inline:auto;
  font-size:clamp(1.95rem,3.8vw,2.8rem);font-weight:700;letter-spacing:-.026em}
.sec>.wrap>.eyebrow{display:flex;max-width:var(--measure);margin-inline:auto}
.sec ul li{position:relative}
.sec>.wrap>ul>li{padding-left:24px;margin-bottom:.45em}
.sec>.wrap>ul>li::before{content:"";position:absolute;left:2px;top:.66em;width:9px;
  height:9px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 2px var(--accent-tint)}
.sec ol{counter-reset:n;display:grid;gap:11px}
.sec>.wrap>ol>li{position:relative;padding-left:38px;counter-increment:n}
.sec>.wrap>ol>li::before{content:counter(n);position:absolute;left:0;top:1px;
  width:27px;height:27px;border-radius:50%;background:var(--accent-tint);
  color:var(--accent-deep);font-size:1.0625rem;font-weight:700;display:flex;
  align-items:center;justify-content:center;font-family:var(--display)}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:3.6rem;
  line-height:.82;font-weight:700;color:var(--accent);padding:6px 12px 0 0}

.pullquote{border-left:4px solid var(--mint);padding:8px 0 8px 22px;margin:26px auto}
.pullquote p{font-family:var(--display);font-size:1.3rem;font-weight:600;
  color:var(--ink);line-height:1.4}
.pullquote cite{display:block;margin-top:9px;font-style:normal;font-size:.8438rem;
  color:var(--faint);letter-spacing:.09em;text-transform:uppercase;font-weight:500}

.crumbs{font-size:.9063rem;color:var(--faint);padding-block:18px 0}
.crumbs a{color:var(--faint)}

/* ---- 8. CARDS, GRIDS ----------------------------------------------------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);
  border-color:var(--accent-line)}
.card h3{font-size:1.15rem}
.card p{font-size:1.0625rem;color:var(--muted)}
.card p+p{margin-top:.8em}

.steps{display:grid;gap:14px;counter-reset:s}
.step{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px 24px 80px;position:relative;counter-increment:s}
.step__n{position:absolute;left:22px;top:22px;width:40px;height:40px;
  border-radius:var(--r-s);background:var(--char);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--display);font-weight:700;
  font-size:1.05rem}
.step__n::before{content:counter(s,decimal-leading-zero)}
.step h3{font-size:1.12rem}
.step p{font-size:1.0625rem;color:var(--muted)}

.chips{display:grid;gap:10px;margin:18px 0 0}
.chips li{display:flex;gap:11px;align-items:flex-start;font-size:1.0625rem}
.chips .ck{background:var(--mint);color:var(--ink)}

.callout{background:var(--accent-tint);border-left:5px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:19px 24px;margin:24px auto;
  font-size:1.0625rem}
.callout p+p{margin-top:.8em}
.alert{background:var(--warn-soft);border-left:5px solid var(--warn);
  border-radius:0 var(--r) var(--r) 0;padding:19px 24px;margin:24px auto;
  font-size:1.0625rem}
.alert p+p{margin-top:.8em}
.flag{display:inline-block;background:var(--accent-tint);color:var(--accent-deep);
  font-size:.8438rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 11px;border-radius:var(--r-s);border:1px solid var(--accent-line)}

/* ---- 9. TABLES ----------------------------------------------------------- */
.tablewrap{overflow-x:auto;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);margin:22px auto}
table.dtable{width:100%;border-collapse:collapse;font-size:1rem;min-width:540px}
.dtable caption{text-align:left;padding:16px 20px 0;font-family:var(--display);
  font-weight:700;color:var(--ink);font-size:1.05rem}
.dtable th,.dtable td{padding:12px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
.dtable thead th{background:var(--char);color:#fff;font-size:.9063rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:600;font-family:var(--sans)}
.dtable tbody tr:nth-child(even) td{background:#faf7f1}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td b{color:var(--ink)}

/* ---- 10. SPLIT ----------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;
  align-items:center}
.split--rev{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.split__media{text-align:center}
.split__media img{margin-inline:auto;border-radius:var(--r)}

/* ---- 11. SHOTS: images that carry content -------------------------------- */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
  margin-top:8px}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots figure{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:18px 20px;font-size:.9688rem;color:var(--muted)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.08rem;
  color:var(--ink);margin-bottom:6px}

/* ---- 12. PROMO / STATS / BADGEWALL: the charcoal bands ------------------- */
.promo{background:var(--char);color:var(--char-ink);border-radius:var(--r-l);
  padding:32px 36px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;
  align-items:center}
.promo p{margin:0}
.promo b{color:#fff}
.stats{background:var(--char);border-radius:var(--r-l);padding:34px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;text-align:center}
.stats b{display:block;font-family:var(--display);font-size:2.25rem;font-weight:700;
  color:#fff;line-height:1}
.stats span{display:block;margin-top:8px;font-size:.9063rem;color:var(--char-ink)}
.badgewall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.badgewall figure{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 14px;text-align:center}
.badgewall img{margin:0 auto 10px}
.badgewall figcaption{font-size:.9063rem;color:var(--muted)}
.badgewall figcaption b{display:block;color:var(--ink);font-size:.98rem;
  margin-bottom:4px;font-family:var(--display)}

/* ---- 13. WHY / WHOFOR ---------------------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.whycard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:28px 24px 26px;position:relative;overflow:hidden}
.whycard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--mint),var(--accent))}
.whycard h3{font-size:1.14rem}
.whycard p{font-size:1.0625rem;color:var(--muted)}
.whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.forlist{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px}
.forlist h3{font-size:1.14rem;margin-bottom:12px}
.forlist li{display:flex;gap:10px;font-size:1.0625rem;margin-bottom:9px}
.forlist li::before{content:"";flex:none;width:9px;height:9px;margin-top:.58em;
  border-radius:50%;background:var(--mint)}
.forlist--no li::before{background:var(--warn)}

/* ---- 14. INGREDIENT CARDS AND THE LABEL PANEL ---------------------------- */
.ing{display:grid;gap:22px}
.ingcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:0;overflow:hidden;display:grid;
  grid-template-columns:200px minmax(0,1fr)}
.ingcard>img{width:100%;height:100%;object-fit:cover}
.ingcard__b{padding:26px 28px}
.ingcard h3{font-size:1.24rem;margin-bottom:4px}
.ingcard .ingsub{font-size:0.9062rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-deep);font-weight:600;margin-bottom:12px;display:block}
.ingcard p{font-size:1.0625rem}
.ingcard p+p{margin-top:.85em}
.ing__dose{display:inline-block;margin-top:12px;font-size:.9063rem;
  background:var(--paper-tint);border-radius:var(--r-s);padding:5px 12px;
  color:var(--faint)}
.ingthumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ingthumbs figure{text-align:center}
.ingthumbs img{border-radius:50%;margin-inline:auto}
.ingthumbs figcaption{font-size:.9063rem;color:var(--faint);margin-top:8px;
  font-weight:500}
.facts{background:var(--paper-card);border:2px solid var(--ink);border-radius:var(--r-s);
  overflow:hidden;max-width:580px;margin-inline:auto}
.facts__h{background:var(--ink);color:#fff;padding:14px 22px;font-family:var(--display);
  font-size:1.2rem;font-weight:700}
.facttab{width:100%;border-collapse:collapse;font-size:1rem}
.facttab th,.facttab td{padding:11px 22px;border-bottom:1px solid var(--line);
  text-align:left}
.facttab th{font-weight:500;color:var(--ink-soft);font-size:1rem}
.facttab td:last-child{text-align:right;font-weight:600;color:var(--ink)}
.facttab tr:last-child th,.facttab tr:last-child td{border-bottom:0}

/* ---- 15. QA record sheet ------------------------------------------------- */
.qa{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;max-width:920px;margin-inline:auto}
.qa__h{background:var(--char);color:#fff;padding:16px 24px;font-family:var(--display);
  font-weight:700;font-size:1.08rem}
.qa dl{margin:0;display:grid;grid-template-columns:32% minmax(0,1fr)}
.qa dt,.qa dd{padding:13px 24px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:600;color:var(--ink);font-size:1.0625rem;letter-spacing:.06em;
  text-transform:uppercase;font-family:var(--sans)}
.qa dd{color:var(--muted);font-size:1.0625rem}
.qa dl>:nth-last-child(-n+2){border-bottom:0}

/* ---- 16. ADD-TO-CART PANEL ------------------------------------------------
   Three pack cards sharing one image box and one button baseline. The three
   vendor pack shots are 0.57:1, 1.31:1 and 2.10:1, so a shared width alone
   would render them at three heights (pitfall 80). Every card carries a 2px
   transparent border and only the featured one colours it in, or box-sizing
   would steal 2px from the featured card's content box and drop its button
   out of line. */
.buy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  align-items:stretch;margin-top:8px}
.buy__card{background:var(--paper-card);border:2px solid transparent;
  outline:1px solid var(--line);outline-offset:-1px;border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;text-align:center}
.buy__card--feature{border-color:var(--accent);outline-color:transparent;
  box-shadow:var(--shadow-lg)}
.buy__head{background:var(--char);color:#fff;padding:16px 18px 14px;position:relative}
.buy__card--feature .buy__head{background:var(--accent)}
.buy__flag{display:inline-block;background:var(--mint);color:var(--ink);
  font-size:.8438rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 12px;border-radius:var(--r-s);margin-bottom:8px}
.sec .buy__name{color:#fff;font-size:1.7rem;font-weight:700;margin:0;
  letter-spacing:-.02em}
.buy__supply{color:var(--char-ink);font-size:.9063rem;font-weight:500;margin-top:2px;min-height:3.3em}
.buy__card--feature .buy__supply{color:#eaf6f4}
.buy__body{padding:18px 22px 22px;display:flex;flex-direction:column;flex:1}
.buy__img{display:block;width:100%;max-width:230px;height:180px;object-fit:contain;
  margin:0 auto 10px}
.buy__price{font-family:var(--display);font-size:3.1rem;font-weight:700;
  color:var(--ink);line-height:1;display:flex;align-items:flex-start;
  justify-content:center;gap:2px}
.buy__cur{font-size:1.4rem;margin-top:6px}
.buy__per{font-family:var(--sans);font-size:1rem;font-weight:500;color:var(--faint);
  align-self:flex-end;margin:0 0 6px 6px}
.buy__total{font-size:1.0625rem;color:var(--muted);margin:10px 0 14px}
.buy__total b{color:var(--ink);font-size:1.2rem}
.buy__perks{display:grid;gap:7px;text-align:left;margin:0 auto 18px;font-size:1rem;
  color:var(--ink-soft)}
.buy__perks li{position:relative;padding-left:26px}
.buy__perks li::before{content:"\2713";position:absolute;left:0;top:1px;width:19px;
  height:19px;border-radius:50%;background:var(--accent-tint);color:var(--accent-deep);
  font-size:1.0625rem;font-weight:700;display:flex;align-items:center;
  justify-content:center}
/* The three Add To Cart buttons must share one baseline. `margin-top:auto`
   could not deliver that here, because the button is NOT the last element in
   the card: payment art and a short note follow it. The auto margin therefore
   absorbed whatever space those trailing blocks left over, which differs per
   card, and the buttons landed at 624, 605 and 631 at 1440.
   Packing the body from the top instead puts every button at the same y,
   because everything above it (image, price, total, perks) is already equal.
   min-height keeps a two-line label ('Add To Cart - 6 Bottles') the same
   height as a one-line one, so the row does not stagger on a narrow column. */
/* Pack-card alignment, fixed by measurement 18 Sep 2026. Two separate
   causes, both invisible to every automated check:
   1. The Add To Cart button is NOT the last element in a card -- payment
      art and a note follow it -- so `margin-top:auto` absorbed whatever
      space those trailing blocks left over, which differs per card. The
      buttons landed on three different baselines. The body now packs from
      the top, and min-height keeps a two-line label level with a one-line
      one.
   2. The supply line wraps to two lines on the larger packs at some widths,
      which pushed the whole card body down on those cards only. It now
      reserves two lines at every width.
   pack_cards.py is the tool that should guarantee this and cannot: its
   matcher is `\bcard`, which cannot match `buy__card`, because an
   underscore is a word character. */
.buy__add{margin-top:14px;min-height:73px;display:flex;align-items:center;
  justify-content:center;font-size:1.02rem;padding-block:15px;
  text-transform:uppercase;letter-spacing:.04em}
.buy__cart{flex:none}
.buy__card--feature .buy__add{background:var(--char)}
.buy__card--feature .buy__add:hover{background:var(--ink-dk)}
.buy__pay{display:block;width:180px;height:auto;margin:12px auto 0;opacity:.9}
.buy__why{font-size:.9375rem;color:var(--faint);text-align:left;margin-top:14px;
  padding-top:12px;border-top:1px dashed var(--line)}
.buy__foot{max-width:var(--measure-wide);margin:26px auto 0;text-align:center}
.guarantee{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:34px;
  align-items:center;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r-l);padding:32px}
.guarantee img{margin-inline:auto}
.guarantee h3{font-size:1.4rem;margin-bottom:12px}

/* ---- 17. REVIEWS --------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px}
.tcard .stars{color:var(--warn-deep);letter-spacing:1px;font-size:1rem}
.tcard b{display:block;margin-top:8px;font-family:var(--display);font-size:1.06rem;
  color:var(--ink)}
.tcard span{font-size:.9063rem;color:var(--faint)}
.tcard p{font-size:1.0625rem;margin-top:10px}
.bars{display:grid;gap:9px;max-width:460px}
.bar{display:grid;grid-template-columns:62px minmax(0,1fr) 52px;gap:12px;
  align-items:center;font-size:.9063rem;color:var(--faint)}
.bar__t{height:10px;background:var(--paper-deep);border-radius:5px;overflow:hidden}
.bar__f{display:block;height:100%;background:var(--accent);border-radius:5px}
.dist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;
  align-items:center;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:28px}
.bigscore{font-family:var(--display);font-size:2.8rem;font-weight:700;color:var(--ink);
  line-height:1}
.bigscore small{font-size:1rem;color:var(--faint);font-weight:500}

/* ---- 18. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:10px;text-align:left}
.faq details{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.faq details[open]{border-color:var(--accent-line)}
.faq summary{padding:17px 22px;font-family:var(--display);font-weight:700;
  color:var(--ink);cursor:pointer;font-size:1.06rem;list-style:none;display:flex;
  justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;
  border-radius:var(--r-s);background:var(--accent-tint);color:var(--accent-deep);
  font-size:1.2rem;display:flex;align-items:center;justify-content:center}
.faq details[open] summary::after{content:"\2013";background:var(--accent);color:#fff}
.faq__b{padding:0 22px 18px;font-size:1.0625rem}
.faq__b p+p{margin-top:.8em}

/* ---- 19. REFS, BYLINE, KEYPOINTS ----------------------------------------- */
.refs{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px}
.refs h2{font-size:1.2rem;margin-bottom:12px}
.refs ol{counter-reset:r;display:grid;gap:9px}
.refs li{counter-increment:r;position:relative;padding-left:30px;font-size:1.0625rem;
  color:var(--muted);line-height:1.6}
.refs li::before{content:counter(r) ".";position:absolute;left:0;font-weight:700;
  color:var(--accent-deep)}
.refs a{word-break:break-word}
.byline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;margin:26px auto 0}
.byline img{border-radius:50%;flex:none}
.byline svg{width:64px;height:64px;flex:none}
.byline b{font-family:var(--display);font-size:1.08rem;color:var(--ink);display:block;
  margin-bottom:7px}
.byline p{font-size:.9688rem;color:var(--muted)}
.keypoints{background:var(--accent-tint);border-left:5px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin:24px auto}
.keypoints>b{display:block;font-family:var(--sans);font-size:.8438rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);
  margin-bottom:10px}
.keypoints ul{display:grid;gap:8px}
.keypoints li{font-size:1.0625rem}
.keypoints li b{color:var(--accent-deep)}

/* ---- 20. FORMS ----------------------------------------------------------- */
.form{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
.formcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px}
.formcard h3{font-size:1.16rem;margin-bottom:6px}
.formcard label{display:block;font-size:.9063rem;font-weight:500;color:var(--ink-soft);
  margin:14px 0 5px}
/* 16px floor, or iOS Safari zooms the whole page on focus and never zooms
   back (pitfall 86). */
.formcard input,.formcard textarea,.formcard select{width:100%;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-s);font-family:var(--sans);
  font-size:1rem;color:var(--ink);background:var(--paper)}
.formcard textarea{min-height:120px;resize:vertical}
.formcard .btn{margin-top:18px}

/* ---- 21. FINAL CTA / RELATED --------------------------------------------- */
.final{background:var(--char);border-radius:var(--r-l);padding:40px 42px;
  color:var(--char-ink);position:relative;overflow:hidden}
.final::after{content:"";position:absolute;right:-70px;top:-70px;width:240px;
  height:240px;border-radius:50%;border:2px solid rgba(155,220,207,.28)}
.final h2{color:#fff;font-size:clamp(1.55rem,3vw,2.15rem);margin-bottom:12px}
.final--media{display:grid;grid-template-columns:320px minmax(0,1fr);gap:36px;
  align-items:center}
.final--media .final__img img{width:100%;height:auto;margin-inline:auto;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.34))}
.final__price{font-family:var(--display);font-size:1.28rem;font-weight:700;color:#fff;
  margin:14px 0 18px}
.final .btn--cta{background:var(--mint);color:var(--ink)}
.final .btn--cta:hover{background:#fff;color:var(--ink)}
.final p,.article .final p{color:var(--char-ink)}
.final__price,.article .final .final__price{color:#fff}
.final a:not(.btn){color:var(--char-mint);text-decoration:underline}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  text-align:left}
.rel a{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:22px;display:block;
  transition:transform .2s ease,box-shadow .2s ease}
.rel a:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.rel b{display:block;font-family:var(--display);font-size:1.08rem;color:var(--ink);
  margin-bottom:6px}
.rel span{font-size:.9688rem;color:var(--muted)}

/* ---- 22. LEGAL ----------------------------------------------------------- */
.legal h2{margin-top:1.5em}
.legal h3{margin-top:1.2em}
.meta{font-size:.9063rem;color:var(--faint)}

/* ---- 23. FOOTER: a sand band with the contact card, then a charcoal wall --
   Two tones, in that order. The contact card is ONE object with three
   columns inside it, because the three routes are one answer to one question
   and a reader has to see which one their problem belongs to. */
.fdesk{background:var(--paper-tint);border-top:1px solid var(--line);
  padding-block:38px}
.fdesk__card{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r-l);padding:28px 30px;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.fdesk__col+.fdesk__col{border-left:1px solid var(--line-soft);padding-left:30px}
.fdesk__card b{display:block;font-family:var(--display);font-size:1.06rem;
  color:var(--ink);margin-bottom:4px}
.fdesk__card p{font-size:1.0625rem;color:var(--muted)}
.fdesk__card .flag{margin-bottom:10px}
footer{background:var(--char);color:rgba(216,210,198,.80);padding-block:48px 24px;
  font-size:.9375rem}
footer a{color:#fff}
footer a:hover{color:var(--char-mint)}
footer li a{display:inline-block}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:30px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.12)}
.fgrid h4{color:var(--char-mint);font-family:var(--sans);font-size:.8438rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}
.fgrid li{margin-bottom:7px;font-size:1.0625rem;line-height:1.5}
.fbrand{font-family:var(--display);font-size:1.8rem;font-weight:700;color:#fff;
  margin-bottom:10px;letter-spacing:-.03em;text-transform:uppercase}
.fbrand span{color:var(--char-mint)}
.fbadges{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.fbadges img{background:#fff;border-radius:50%;padding:2px}
.fnap{padding-block:22px;border-bottom:1px solid rgba(255,255,255,.12);
  font-size:.9375rem;line-height:1.75}
.fnap strong{color:#fff}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:18px;
  font-size:.9063rem}
.fpay img{background:#fff;border-radius:var(--r-s);padding:4px 6px}
.disc{padding-top:18px;font-size:.9063rem;line-height:1.65;color:rgba(216,210,198,.74)}
.disc p{margin-bottom:.9em}
.disc b{color:#fff}
.disc .copy{margin-top:16px;color:rgba(216,210,198,.62)}

/* ---- 24. BUY BAR --------------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--char);
  color:#fff;transform:translateY(110%);transition:transform .3s ease;
  border-top:2px solid var(--mint)}
.buybar.show{transform:translateY(0)}
.buybar__in{max-width:var(--wrap);margin-inline:auto;padding:11px 22px;display:flex;
  align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;
  font-size:.9375rem}
.buybar__t b{color:#fff}
.buybar .from{color:var(--char-mint)}
.buybar .btn{padding:10px 22px}

/* ---- 25. BLOG ------------------------------------------------------------ */
.article{max-width:780px;margin-inline:auto}
.article h1{font-size:clamp(1.95rem,3.8vw,2.7rem);margin-bottom:14px;font-weight:700}
.article h2{font-size:1.55rem;margin:1.9em 0 .6em;scroll-margin-top:140px}
.article h3{font-size:1.2rem;margin:1.5em 0 .5em}
.article p{margin-bottom:1em}
.article ul,.article ol{margin:0 0 1.2em}
.article ul li{position:relative;padding-left:24px;margin-bottom:8px}
.article ul li::before{content:"";position:absolute;left:3px;top:.66em;width:9px;
  height:9px;border-radius:50%;background:var(--mint)}
.article ol{counter-reset:ai}
.article ol li{position:relative;padding-left:30px;margin-bottom:8px;
  counter-increment:ai}
.article ol li::before{content:counter(ai) ".";position:absolute;left:0;
  color:var(--accent-deep);font-weight:700}
.article figure{margin:1.6em 0}
.article figure img{width:100%;border-radius:var(--r)}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);
  margin-inline:auto}
.article figcaption{font-size:.9375rem;color:var(--faint);margin-top:9px;
  border-left:3px solid var(--mint);padding-inline-start:12px}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:.9063rem;
  color:var(--faint);padding-block:12px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-bottom:26px}
.postmeta b{color:var(--ink-soft)}
.postmeta .sep{color:var(--line)}
.toc{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 24px;margin-bottom:26px}
.toc h2{font-size:.8438rem;letter-spacing:.18em;text-transform:uppercase;
  font-family:var(--sans);color:var(--accent-deep);margin:0 0 10px}
.toc ol{counter-reset:t;display:grid;gap:6px}
.toc li{counter-increment:t;position:relative;padding-left:28px;font-size:1.0625rem}
.toc li::before{content:counter(t) ".";position:absolute;left:0;color:var(--faint);
  font-weight:600}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease}
.posts article:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.posts img{width:100%}
.posts .pbody{padding:20px 22px}
.posts h3{font-size:1.14rem;margin-bottom:8px}
.posts p{font-size:1.0625rem;color:var(--muted)}
.posts .pmeta{font-size:0.9062rem;color:var(--faint);margin-top:12px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:500}
/* A shared component in a narrower column is a new component (pitfall 24). */
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;
  padding:30px 28px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.6rem;line-height:1.22;margin-top:0}
@media(max-width:760px){
  .article .final--media{grid-template-columns:1fr;gap:16px;padding:24px 22px;
    text-align:center}
  .article .final--media .final__img img{max-width:128px;margin-inline:auto}
  .article .final--media h2{font-size:1.34rem}
  .article .final--media .btn{width:100%}
}
.article .refs{margin-top:2em}
.article .refs h2{margin-top:0}

/* ---- 26. MOTION: settle on entry ----------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(16px)}
[data-reveal].in{opacity:1;transform:none;
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].in{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover,.rel a:hover,.posts article:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ---- 27. RESPONSIVE ------------------------------------------------------ */
@media(max-width:1060px){
  .sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
  .sec>.wrap>.keypoints,.sec>.wrap>.pullquote,.sec>.wrap>blockquote,
  .sec>.wrap>h1,.sec>.wrap>.eyebrow,.sec>.wrap>.tablewrap,.sec>.wrap>.faq,
  .sec>.wrap>.steps{max-width:none}
  .badgewall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ingthumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:920px){
  .split,.split--rev,.guarantee,.dist,.form{grid-template-columns:1fr;gap:26px}
  .promo{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.g4,.whygrid,.tgrid,.rel,.posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ingcard{grid-template-columns:1fr}
  .ingcard>img{height:220px}
  .buy{grid-template-columns:1fr;max-width:440px;margin-inline:auto;gap:18px}
  .buy .buy__card:nth-child(1){order:3}
  .buy .buy__card:nth-child(2){order:1}
  .buy .buy__card:nth-child(3){order:2}
  .final--media{grid-template-columns:1fr;gap:22px}
  .final--media .final__img img{max-width:250px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fdesk__card{grid-template-columns:1fr;gap:22px}
  .fdesk__col+.fdesk__col{border-left:0;border-top:1px solid var(--line-soft);
    padding-left:0;padding-top:22px}
}
@media(max-width:700px){
  .sec{padding-block:50px}
  .g2,.g3,.g4,.whygrid,.whofor,.tgrid,.rel,.posts,.shots,.shots--wide,
  .badgewall,.fgrid{grid-template-columns:1fr}
  .ingthumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
  .stats{grid-template-columns:1fr}
  .final{padding:28px 22px}
  .step{padding:22px 20px 22px 70px}
  .step__n{left:16px;width:36px;height:36px}
  .promo{padding:26px 22px}
  .fdesk__card{padding:24px 22px}
}
/* Tap target: a button on a phone must be reachable with a thumb (44px). */
@media(max-width:600px){.btn{min-height:44px}}

/* ---- 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 and is taller than most on the estate; a hardcoded
   offset would tuck the bottle under the wordmark. Requires .hero NOT to clip
   on the block axis -- any non-visible overflow on an ancestor becomes the
   scrollport sticky resolves against (pitfall 65). */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 118px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 118px) - 28px);
    min-height: calc(100svh - var(--navh, 118px) - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
   hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
   resolve against the nearest positioned ancestor; `static` re-parents them to
   a box several times wider -- measured at 1800px against a 523px column --
   and the ring lands across the headline. Worse, the same query stops it
   animating, so it SITS there: ask for less motion, get the one broken hero.

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

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

/* Between the point the row becomes three columns and 1180px, the first
   card's perk list wraps one line more than the other two ('Free US
   shipping on every pack, including the single bottle'), which pushed that
   card's Add To Cart button 26px below the other two. Measured: perks are
   184/157/157 at 981 and 1024, 157/130/130 at 1100, level from 1180 up.
   Reserving the taller height inside that band keeps the three buttons on
   one baseline without padding the layout at any width where they agree. */
@media(min-width:981px) and (max-width:1179px){.buy__perks{min-height:184px}}

/* ==== 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>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 24px) / 2);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */

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

/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer{font-size:16px}
footer .disc{font-size:16px}
footer .fgrid h4{font-size:15px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */

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

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

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.answer,
.whycard,
.article figure{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 ==== */

/* ==== 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 ==== */