/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Karla Fallback";src:local("Arial");font-weight:400;size-adjust:103.91%;ascent-override:88.25%;descent-override:24.25%;line-gap-override:0.00%}
@font-face{font-family:"Karla Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:100.22%;ascent-override:91.50%;descent-override:25.14%;line-gap-override:0.00%}
@font-face{font-family:"Newsreader Fallback";src:local("Georgia");font-weight:400;size-adjust:96.06%;ascent-override:76.51%;descent-override:27.59%;line-gap-override:0.00%}
@font-face{font-family:"Newsreader Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:88.68%;ascent-override:82.89%;descent-override:29.88%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   GLYCO HARMONY — glycoeharmony.com
   Component system adapted from the GlycoTide reference: editorial display
   serif, layered shadow scale, scroll progress, refined spacing rhythm.
   Fonts deliberately differ from the reference (Fraunces + Inter is already
   used elsewhere in this family) — Newsreader + Karla holds the same
   editorial register without repeating it.
   Palette from the bottle: amber glass, brick-red label band, white panel.
   Amber leads, brick red accents, ground is oat rather than cream-white.
   ========================================================================== */

:root{
  /* oat ground, espresso ink — from the amber glass */
  --paper:#f7f5f0; --tint:#efeadf; --card:#fffefb;
  --ink:#26201c; --ink-dk:#171310; --muted:#6b6058; --faint:#706861;
  --line:#e6dfd2; --line-soft:#f0eae0;

  /* amber glass — the lead */
  --amber:#976717; --amber-dk:#906011; --amber-lt:#f6e9cf; --amber-line:#e8d3a8;

  /* brick red label band — the accent */
  --accent:#c0392b; --accent-dk:#8f2a20; --accent-lt:#fbe9e6; --accent-line:#f0cdc7;

  /* shadow scale, taken from the reference's approach */
  --sh-1:0 1px 2px rgba(38,32,28,.06), 0 1px 1px rgba(38,32,28,.04);
  --sh-2:0 8px 24px rgba(38,32,28,.09), 0 2px 6px rgba(38,32,28,.05);
  --sh-3:0 24px 56px rgba(38,32,28,.16), 0 6px 16px rgba(38,32,28,.08);
  --ease:cubic-bezier(.22,1,.36,1);

  --serif:'Newsreader','Newsreader Fallback',Georgia,'Times New Roman',serif;
  --sans:'Karla','Karla Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap:1160px; --prose:68ch;
}

*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:150px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.72;overflow-x:clip;max-width:100%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,iframe,table,figure{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.16;
  letter-spacing:-.012em;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(2.05rem,5vw,3.3rem)}
h2{font-size:clamp(1.6rem,3.3vw,2.35rem)}
h3{font-size:1.3rem}
h4{font-size:1.04rem}
p{margin:0 0 1.15em}
table{border-collapse:collapse}
section[id]{scroll-margin-top:150px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.prose,.article,.legal{max-width:var(--prose);margin-inline:auto}
.center{text-align:center}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--accent);
  padding:10px 16px;border-radius:8px;z-index:2000}
.skip:focus{left:12px;top:12px}

.sec,.section{padding:78px 0}
.sec--tint,.section--tint{background:var(--tint)}
.sec--dark,.section--dark{background:var(--ink);color:#ddd2c6}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark b,.sec--dark strong{color:#fff}
.section__head{max-width:var(--prose);margin-bottom:38px}
.section--center .section__head{margin-inline:auto;text-align:center}

.eyebrow{display:inline-block;font-family:var(--sans);font-size:0.8438rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--amber-dk);margin-bottom:.85em}
.sec--dark .eyebrow{color:var(--amber-lt)}
.lead{font-size:1.14rem;color:var(--muted)}
.sec--dark .lead{color:#c2b6a9}
.note{font-size:0.9062rem;color:var(--faint)}
.meta{font-size:0.9062rem;color:var(--faint);margin:-.3em 0 1.6em}

/* ---- buttons: soft rectangle, amber lead ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:.99rem;padding:15px 30px;
  border:none;border-radius:10px;cursor:pointer;min-height:48px;text-align:center;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
  background:var(--amber);color:#fff;box-shadow:var(--sh-2);text-decoration:none}
.btn:hover{background:var(--amber-dk);color:#fff;transform:translateY(-2px);
  box-shadow:var(--sh-3);text-decoration:none}
.btn--cta{background:var(--accent)}
.btn--cta:hover{background:var(--accent-dk)}
.btn--ink{background:var(--ink)}
.btn--ink:hover{background:var(--ink-dk)}
.btn--ghost{background:var(--card);border:1px solid var(--line);color:var(--ink);
  box-shadow:var(--sh-1);font-size:.95rem;padding:14px 26px}
.btn--ghost:hover{background:var(--amber-lt);border-color:var(--amber-line);color:var(--amber-dk)}
.btn--lg{font-size:1.08rem;padding:18px 36px}
.btn--block{display:flex;width:100%}
.btn--sm{padding:11px 20px;font-size:.9rem;min-height:44px}

/* ==========================================================================
   TWO-ROW HEADER — centred wordmark, menu on the row beneath.
   Distinct from the other sites in this family, which use logo-left rows.
   ========================================================================== */
.util{background:var(--ink);color:#c7bbb0;font-size:0.9062rem}
.util__row{display:flex;align-items:center;justify-content:center;gap:8px 26px;
  padding:8px 22px;flex-wrap:wrap;text-align:center}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item b{color:#fff}
.util__item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);flex:none}
@media(max-width:640px){.util__row{font-size:0.9062rem;gap:5px 16px}
  .util__item:nth-child(3){display:none}}

header.nav{position:sticky;top:0;z-index:60;background:rgba(247,245,240,.95);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.nav__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:15px 12px}
.nav__side{display:flex;align-items:center;gap:12px;flex:1 1 0;min-width:0}
.nav__side--r{justify-content:flex-end}
.nav__tel{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap}
.nav__tel:hover{text-decoration:none}
.nav__tel-l{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:700}
.nav__tel b{font-family:var(--serif);font-size:1rem;color:var(--ink)}
.nav__tel:hover b{color:var(--accent)}

/* the wordmark is two text nodes: gap 0, spacing on the mark */
.brand{display:inline-flex;align-items:center;gap:0;font-family:var(--serif);
  font-weight:600;font-size:1.62rem;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand span{color:var(--accent)}
.brand svg{width:30px;height:30px;flex:none;margin-right:10px}

.nav__bar{border-top:1px solid var(--line-soft)}
.menu{display:flex;align-items:center;justify-content:center;gap:30px;
  list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.menu a{position:relative;display:inline-block;padding:12px 0;font-size:.93rem;
  font-weight:600;color:var(--muted);white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:center;
  transition:transform .24s var(--ease)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ink);text-decoration:none}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px;
  min-width:44px;min-height:44px}
.burger span{display:block;width:25px;height:2.5px;background:var(--ink);border-radius:3px;margin:5px 0}

@media(max-width:1120px){.menu{gap:22px}.menu a{font-size:.89rem}}
@media(max-width:1060px){.menu{gap:16px}.menu a{font-size:.86rem}}
@media(max-width:1000px){
  .nav__bar{border-top:0}
  .menu{display:none}
  .menu.open{display:flex;flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--line);padding:4px 0 8px;max-height:74vh;overflow:auto}
  .menu.open li{border-bottom:1px solid var(--line-soft)}
  .menu.open a{display:block;padding:14px 4px;min-height:44px}
  .menu.open a::after{display:none}
  .burger{display:block}
  .nav__top{padding-block:12px}
}
@media(max-width:560px){
  .nav__tel{display:none}
  .brand{font-size:1.34rem}
  .nav__side{flex:0 0 auto}
}
@media(max-width:420px){.nav__side--r .btn{display:none}}

/* scroll progress — fixed to the very top, from the reference */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1200;
  background:linear-gradient(90deg,var(--amber),var(--accent));transition:width .1s linear}

/* ---- sticky buy bar ---- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);color:#fff;
  transform:translateY(105%);transition:transform .3s var(--ease);box-shadow:0 -8px 26px rgba(0,0,0,.24)}
.buybar.show{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:14px;
  max-width:var(--wrap);margin-inline:auto;padding:10px 22px}
.buybar__t{font-size:.95rem;line-height:1.3}
.buybar__t b{display:block;font-family:var(--serif);font-size:1.05rem}
.buybar__t .from{color:var(--amber-lt);font-weight:700}
@media(max-width:560px){.buybar__t{font-size:0.9062rem}.buybar__t b{font-size:.94rem}}

/* ---- hero ---- */
.hero{padding:56px 0 66px;background:linear-gradient(168deg,#fbf9f5 0%,var(--paper) 52%,var(--tint) 100%)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:start}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--card);
  border:1px solid var(--amber-line);border-radius:999px;padding:9px 19px;
  font-size:0.8438rem;font-weight:700;color:var(--amber-dk);box-shadow:var(--sh-1)}
.hero h1{margin-top:.35em}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero__sub{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 18px;
  font-size:0.9688rem;font-weight:600;color:var(--muted)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:22px}
.ticks{list-style:none;padding:0;margin:20px 0 22px;display:grid;gap:11px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:1.062rem}
.ticks .ck{flex:0 0 22px;height:22px;border-radius:50%;background:var(--amber-lt);
  color:var(--amber-dk);display:grid;place-items:center;font-size:.72rem;font-weight:700;margin-top:2px}

.hero__media{position:relative;text-align:center}
.hero__stick{position:relative;width:100%;background:var(--card);
  border:1px solid var(--line);border-radius:18px;padding:30px 26px;box-shadow:var(--sh-3)}
.hero__stick img{margin:0 auto;max-width:76%}
/* sticks at every desktop height; the shot scales rather than the effect dying */
@media(min-width:1001px){
  .hero__media{position:sticky;top:150px;align-self:start;
    height:calc(100vh - 160px);min-height:340px;
    display:flex;align-items:center;justify-content:center}
  .hero__stick{max-height:calc(100vh - 180px);display:flex;flex-direction:column;justify-content:center}
  .hero__stick img{max-height:calc(100vh - 330px);min-height:160px;width:auto;object-fit:contain}
}
.floaty{position:absolute;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:10px 14px;box-shadow:var(--sh-2);
  font-family:var(--sans);font-weight:700;font-size:0.9062rem;line-height:1.2;color:var(--ink);z-index:2}
.floaty small{display:block;color:var(--amber-dk);font-size:0.9062rem;letter-spacing:.05em;font-weight:700}
.floaty--tl{top:12px;left:-10px}
.floaty--br{bottom:16px;right:-10px}
@media(max-width:560px){.floaty{display:none}}

.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 20px;padding:0}
.factpills li{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-size:0.9062rem;font-weight:600;color:var(--muted);box-shadow:var(--sh-1)}
.factpills li b{color:var(--amber-dk)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 22px}
.figures div{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 10px;text-align:center;box-shadow:var(--sh-1)}
.figures b{display:block;font-family:var(--serif);font-size:1.55rem;color:var(--ink);line-height:1.05}
.figures span{font-size:0.9062rem;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}

/* ---- quick answer + glance table ---- */
.answer{background:var(--card);border:1px solid var(--amber-line);
  border-left:5px solid var(--amber);border-radius:0 14px 14px 0;
  padding:22px 26px;margin:0 0 22px;box-shadow:var(--sh-2)}
.answer .tag{display:block;font-size:0.8438rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber-dk);margin-bottom:.8em}
.answer p{margin:0 0 .8em;color:var(--muted)}
.answer p:last-child{margin:0}
.answer p.first{color:var(--ink);font-weight:600;font-size:1.062rem;font-family:var(--serif)}

/* In the hero the Quick Answer is not a card: the approved layout runs it as
   two flowing paragraphs under the H1. The .answer wrapper stays -- it is the
   speakable selector and the AEO block -- but the card styling and the label
   come off. Keep this above the critical-CSS cut marker so the inline copy
   carries it too, or 31 pages paint the old card first (pitfall 47). */
.hero .answer{background:none;border:0;box-shadow:none;padding:0;margin:18px 0 0}
.hero .answer .tag{display:none}
.hero .answer p{font-size:1.062rem;color:var(--muted);margin:0 0 .85em;max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--ink-dk)}
.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.95rem;color:var(--muted)}
.hero__rating b{color:var(--ink-dk)}
.hero__rating .stars{color:var(--amber);letter-spacing:.08em}
.ticks--gone{display:none}


/* ---- hero motif -- steady-wave ---------------------------------------- */
.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(180deg,#f7f5f0,#edd3cd 68%)}.hero__media::before{content:'';position:absolute;inset:auto 0 4% 0;height:38%;background:repeating-linear-gradient(90deg,rgba(192,57,43,0.30) 0 1px,transparent 1px 30px);mask-image:radial-gradient(closest-side,#000,transparent 80%);animation:btWave 16s linear infinite;z-index:1}@keyframes btWave{to{background-position:60px 0}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (max-width:1000px){
  .hero__grid{display:flex;flex-direction:column;gap:30px}
  .hero__media{max-width:400px;margin-inline:auto;width:100%; position:static;height:auto;display:block;order:3;margin:4px 0 18px}
  /* mobile hero order: eyebrow, H1, product shot, Quick Answer, CTA, rest. display:contents promotes the copy column's children to hero-grid items, so the shot can be placed between the H1 and the answer. */ /* the copy column on these builds is a bare unclassed <div>, so it has to be promoted too -- otherwise only .hero__media is a grid item and the order values on the eyebrow, H1 and answer do nothing at all. */ .hero__copy,.hero__grid > div:not([class]){display:contents}
  .hero .pill{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 18px}
  .hero .answer{order:4}
  /* The ticks follow the Quick Answer, per the hero build order in references/hero.md: eyebrow, H1, Quick Answer, ticks, seal row, CTA. */ .hero .ticks{order:5}
  .hero .hero__cta{order:6}
  .hero .hero__rating{order:6}
  .hero .hero__sub{order:7}
  .hero .pay{order:8}
  /* Promoting the copy column exposed these as grid items too. Without an order they default to 0 and jump above the eyebrow, so they are pinned below the CTA where they sat before. */ .hero .factpills{order:9}
  .hero .chips{order:10}
  .hero .figures{order:11}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}





/*!SITE-HOME-CRIT-START*/
/* Desktop hero reading order: eyebrow, headline, Quick Answer, BUTTONS,
   payment line, then the evidence. Measured at 1440x900 the buy button sat at
   y=937 -- 37px under the fold -- so the first screen of the money page had
   nothing on it to click. The phone order is composed separately with
   display:contents under max-width:1000px and is left exactly as it was. */
@media (min-width:1001px){
  .hero__grid>div:not([class]),.hero__copy{display:flex;flex-direction:column;align-items:stretch}
  .hero .pill{order:1;align-self:flex-start}
  .hero h1{order:2;margin:.35em 0 0}
  .hero .answer{order:3;margin:18px 0 0}
  .hero .hero__cta{order:4;margin:24px 0 0}
  .hero .hero__sub{order:5;margin:14px 0 0}
  .hero .ticks{order:6;margin:26px 0 0}
  .hero .factpills{order:7;margin:20px 0 0}
  .hero .figures{order:8;margin:20px 0 0}
  .hero .hero__rating{order:9;margin:14px 0 0}
  .hero .chips{order:10}
  .hero .pay{order:11}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
.qa{background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh-2);overflow:hidden;max-width:900px;margin:0 auto}
.qa__head{background:var(--amber-lt);border-bottom:1px solid var(--amber-line);padding:22px 26px}
.qa__head b{font-family:var(--serif);font-size:1.4rem;color:var(--ink);display:block;font-weight:600}
.qa__head p{margin:.5em 0 0;font-size:1.062rem;color:var(--muted)}
.qa dl{margin:0;display:grid;grid-template-columns:minmax(150px,33%) 1fr}
.qa dl>div{display:contents}
.qa dt,.qa dd{margin:0;padding:14px 26px;border-top:1px solid var(--line-soft);font-size:1.062rem}
.qa dt{font-weight:700;color:var(--ink)}
.qa dd{color:var(--muted)}
@media(max-width:640px){
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:2px}
  .qa dd{padding-top:2px;border-top:0}
  .qa dt,.qa dd{padding-inline:20px}
}

/* ---- trust / badges / stats ---- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 32px;padding:20px 22px}
.trust__item{display:flex;align-items:center;gap:10px;font-size:0.9062rem;font-weight:600;color:var(--muted)}
.trust__item img{width:38px;height:38px;object-fit:contain}
.badgewall{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:900px;margin-inline:auto}
.badgewall figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.badgewall img{width:86px;height:86px;object-fit:contain}
.badgewall figcaption{font-size:0.8438rem;color:var(--muted);font-weight:600;line-height:1.3}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:26px 18px;text-align:center;box-shadow:var(--sh-1)}
.stat b{display:block;font-family:var(--serif);font-size:2.3rem;color:var(--accent);line-height:1}
.stat span{font-size:0.9062rem;color:var(--muted)}
.sec--dark .stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.sec--dark .stat b{color:var(--amber-lt)}
.sec--dark .stat span{color:#c2b6a9}

/* ---- grids + cards ---- */
.grid{display:grid;gap:22px}
.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(--card);border:1px solid var(--line);border-radius:14px;
  padding:26px 24px;box-shadow:var(--sh-1);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.card .ic{width:52px;height:52px;border-radius:12px;background:var(--amber-lt);
  display:grid;place-items:center;margin-bottom:14px;overflow:hidden}
.card .ic img{height:34px;width:34px;object-fit:contain}
.card h3{margin-bottom:.4em}
.card p{margin:0;color:var(--muted);font-size:1.062rem}
.card p+p{margin-top:.8em}
.sec--dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.sec--dark .card p{color:#c2b6a9}
.idx{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--accent);color:#fff;font-family:var(--serif);font-weight:600;font-size:.98rem;margin-bottom:12px}

/* ---- split / steps ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split img{border-radius:16px;border:1px solid var(--line);box-shadow:var(--sh-2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.usesteps{list-style:none;margin:1.2em 0 0;padding:0;counter-reset:u;display:grid;gap:18px}
.usesteps li{position:relative;padding-left:3.2em;min-height:2.2em}
.usesteps li::before{counter-increment:u;content:counter(u);position:absolute;left:0;top:-.1em;
  width:2.2em;height:2.2em;border-radius:50%;background:var(--amber);color:#fff;
  font-family:var(--serif);font-weight:600;display:grid;place-items:center;font-size:1.062rem}
.usesteps b{display:block;font-family:var(--serif);font-size:1.08rem;color:var(--ink)}
.usesteps p{margin:.15em 0 0;color:var(--muted);font-size:1.062rem}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.gallery figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:1/1;background:var(--tint)}
.gallery img{width:100%;height:100%;object-fit:cover}

/* ---- ingredients ---- */
.ingthumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:860px;margin:0 auto 8px}
.ingthumb{text-align:center}
.ingthumb img{width:112px;height:112px;border-radius:50%;object-fit:cover;margin:0 auto .7em;
  border:3px solid var(--amber-line);background:#fff}
.ingthumb b{font-family:var(--serif);font-size:.98rem;display:block;color:var(--ink);line-height:1.2}
.ingthumb span{font-size:0.9062rem;color:var(--faint);display:block}
.inglist{max-width:var(--prose);margin-inline:auto}
.ing{padding:26px 0;border-top:1px solid var(--line)}
.ing:first-child{border-top:0}
.ing__top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ing h3{margin:0}
.ing__dose{font-family:var(--sans);font-size:0.8438rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--amber-dk);background:var(--amber-lt);
  padding:6px 12px;border-radius:999px;white-space:nowrap}
.ing p{margin:.6em 0 0;color:var(--muted)}
.ing__cite{font-size:.85rem}
.facts{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.facts__img{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--sh-2)}
.facttab{width:100%;font-size:.94rem}
.facttab th,.facttab td{text-align:left;padding:.62em .3em;border-bottom:1px solid var(--line)}
.facttab thead th{font-family:var(--sans);font-size:0.9062rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}
.facttab td:last-child,.facttab th:last-child{text-align:right;white-space:nowrap;color:var(--muted)}
.facttab .blend td{font-weight:700;color:var(--ink)}

/* ---- benefits ---- */
.benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:2px 36px;max-width:900px;margin-inline:auto}
.benefits li{display:flex;gap:.8em;padding:16px 0;border-top:1px solid var(--line);color:var(--ink)}
.benefits .ck{color:var(--amber-dk);font-weight:700;flex:none}
.forlist{list-style:none;margin:1.1em 0 0;padding:0;display:grid;gap:.7em}
.forlist li{position:relative;padding-left:1.8em;color:var(--ink)}
.forlist .ck{position:absolute;left:0;color:var(--amber-dk);font-weight:700}

/* ---- pricing ---- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:center}
.tier{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 24px;
  text-align:center;position:relative;display:flex;flex-direction:column;box-shadow:var(--sh-1);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.tier:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.tier--feature{border:2px solid var(--amber);box-shadow:var(--sh-3);transform:scale(1.04);z-index:2}
.tier--feature:hover{transform:scale(1.04) translateY(-5px)}
.tier__flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:0.8438rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:8px 16px;border-radius:999px;white-space:nowrap;
  background:var(--ink);color:#fff}
.tier--feature .tier__flag{background:var(--amber);color:#fff}
.tier h3{margin:.3em 0 .1em;font-size:1.3rem}
.tier__supply{font-size:0.8438rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.tier__img{height:154px;width:auto;margin:16px auto 10px;object-fit:contain}
.tier--feature .tier__img{height:180px}
.tier__price{font-family:var(--serif);font-size:2.7rem;color:var(--ink);line-height:1;font-weight:600}
.tier--feature .tier__price{font-size:3.05rem;color:var(--accent)}
.tier__price small{display:block;font-family:var(--sans);font-size:0.9062rem;font-weight:600;
  color:var(--faint);margin-top:6px}
.tier__tot{font-weight:700;margin:.7em 0 .1em;color:var(--ink)}
.tier__tot s{color:var(--faint);font-weight:400;margin-right:5px}
.tier__ship{font-size:0.9062rem;font-weight:700;color:var(--amber-dk);margin:.3em 0 1em;
  display:inline-block;background:var(--amber-lt);padding:6px 14px;border-radius:999px}
.tier__ship.pay{color:var(--muted);background:var(--tint)}
.tier__rows{list-style:none;margin:0 0 20px;padding:0;text-align:left;font-size:.9rem;
  color:var(--muted);display:grid;gap:.55em}
.tier__rows li{position:relative;padding-left:1.6em}
.tier__rows .ck{position:absolute;left:0;color:var(--amber-dk);font-weight:700}
.tier .btn{margin-top:auto}
.guarantee{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center;
  max-width:860px;margin:40px auto 0;background:var(--amber-lt);border:1px solid var(--amber-line);
  border-radius:18px;padding:26px 30px}
.guarantee img{width:118px;height:auto;flex:none}
.guarantee h3{margin:0 0 .3em}
.guarantee p{margin:0;color:var(--muted);font-size:1.062rem}
.pay{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:26px}
.pay img{height:28px}
.pay span{font-size:0.9062rem;color:var(--faint)}

/* ---- reviews ---- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:26px 24px;box-shadow:var(--sh-1)}
.tcard .stars{color:var(--amber);letter-spacing:2px;font-size:.92rem;margin:0 0 .5em}
.tcard h3{font-size:1.06rem;margin:0 0 .4em}
.tcard p{color:var(--muted);font-size:1.062rem;margin:0}
.tcard .who{margin-top:1em;font-size:.85rem;color:var(--ink);font-weight:700}
.tcard .who span{color:var(--faint);font-weight:400}
.tlife{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px}
.tlife figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:1/1;background:var(--tint)}
.tlife img{width:100%;height:100%;object-fit:cover}
.dist{list-style:none;margin:0;padding:0;max-width:520px}
.dist li{display:grid;grid-template-columns:52px 1fr 46px;align-items:center;gap:12px;
  margin-bottom:9px;font-size:1.062rem;font-weight:700;color:var(--muted)}
.dist .bar{background:var(--tint);border-radius:999px;height:10px;overflow:hidden}
.dist .bar i{display:block;height:100%;background:var(--amber);border-radius:999px}

/* ---- byline / callouts / faq / refs ---- */
.byline{display:flex;gap:18px;align-items:center;max-width:var(--prose);margin-inline:auto;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 24px;box-shadow:var(--sh-1)}
.byline img{width:66px;height:66px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--amber-line)}
.byline b{color:var(--ink);font-family:var(--serif)}
.byline p{margin:.3em 0 0;font-size:0.9062rem;color:var(--muted)}
@media(max-width:560px){.byline{flex-direction:column;text-align:center}}
.callout{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px 26px;font-size:.95rem;color:var(--muted);box-shadow:var(--sh-1)}
.callout b{color:var(--ink)}
.callout p:last-child,.flag p:last-child,.alert p:last-child{margin:0}
.flag{background:var(--amber-lt);border:1px solid var(--amber-line);border-radius:14px;
  padding:22px 26px;font-size:.94rem;color:#6a4a12}
.flag b{color:var(--amber-dk)}
.alert{background:var(--accent-lt);border:1px solid var(--accent-line);border-radius:14px;
  padding:22px 26px;font-size:.94rem;color:#7a2a20}
.alert b{color:var(--accent-dk)}
.alert a{color:var(--accent-dk)}
.faq{max-width:var(--prose);margin-inline:auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 2px;
  font-family:var(--serif);font-size:1.1rem;font-weight:600;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:1.5rem;color:var(--amber-dk);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq__b{padding:0 2px 22px;color:var(--muted)}
.faq__b p{margin:0 0 .8em}
.faq__b p:last-child{margin:0}
.refs{max-width:var(--prose);margin-inline:auto;font-size:.9rem;color:var(--muted)}
.refs ol{margin:0;padding-left:1.4em;display:grid;gap:.6em}
.refs a{word-break:break-word}
.dtable{width:100%;font-size:1rem}
.dtable th,.dtable td{text-align:left;padding:.7em .8em;border-bottom:1px solid var(--line);vertical-align:top}
.dtable thead th{font-family:var(--sans);font-size:0.9062rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);background:var(--amber-lt)}
.dtable td b{color:var(--ink)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* ---- forms ---- */
.form{display:grid;gap:16px}
.formcard{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:28px 30px;box-shadow:var(--sh-1)}
.form label{display:block;font-size:0.9062rem;font-weight:700;color:var(--ink);margin-bottom:.4em}
.form input,.form select,.form textarea{width:100%;font-family:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:.75em .9em;min-height:46px}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--amber);
  outline-offset:1px;border-color:var(--amber)}
.form .req{color:var(--accent)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__hint{font-size:0.9062rem;color:var(--faint);margin:.35em 0 0}
.form__msg{padding:14px 18px;border-radius:10px;font-size:.92rem;display:none}
.form__msg.ok{display:block;background:var(--amber-lt);border:1px solid var(--amber-line);color:var(--amber-dk)}

/* ---- final cta / related ---- */
.final{background:linear-gradient(150deg,var(--ink) 0%,var(--ink-dk) 100%);
  border-radius:20px;padding:52px 40px;text-align:center;position:relative;overflow:hidden;color:#ddd2c6}
.final::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% -20%,rgba(201,137,31,.34),transparent 62%);pointer-events:none}
.final h2{color:#fff;position:relative}
.final p{color:#c2b6a9;max-width:56ch;margin:0 auto 1.4em;position:relative}
.final b,.final strong{color:#fff}
.final .btn{position:relative}
.final--media{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center;
  text-align:left;padding:50px 44px}
/* width:100% so the bottle shot shrinks to its cell instead of spilling out
   of it when this component sits in a narrow column (the mid-article CTA). */
.final--media .final__img img{width:100%;max-width:300px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.5))}
.final--media h2{text-align:left}
.final--media p{margin:0 0 1.4em;max-width:54ch}
.final__price{font-family:var(--serif);font-size:2rem;color:var(--amber-lt);margin:.2em 0 .7em}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel a{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;box-shadow:var(--sh-1);transition:.2s var(--ease)}
.rel a:hover{border-color:var(--amber-line);text-decoration:none;transform:translateY(-3px);box-shadow:var(--sh-2)}
.rel b{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--ink);margin-bottom:.3em}
.rel span{font-size:.88rem;color:var(--muted)}
.crumbs{font-size:0.9062rem;color:var(--faint);padding:16px 0 0}
.crumbs a{color:var(--muted)}
.legal h2{font-size:1.45rem;margin-top:1.6em}
.legal h3{font-size:1.12rem;margin-top:1.3em}
.legal p,.legal li{color:var(--ink)}
.legal ul,.legal ol{padding-left:1.3em;display:grid;gap:.4em;margin:0 0 1.2em}

/* ==========================================================================
   CENTRED STACKED FOOTER — oversized wordmark, inline link rows.
   Deliberately not a column grid; no other site in the family uses this.
   ========================================================================== */
footer{background:var(--ink);color:#b3a89e;padding:56px 0 92px;font-size:.9rem;text-align:center}
footer a{color:#ddd2c6}
footer a:hover{color:#fff}
footer b,footer strong{color:#fff}
.fbrand{display:inline-flex;align-items:center;gap:0;font-family:var(--serif);
  font-size:clamp(2rem,5vw,3rem);color:#fff;margin-bottom:.25em;font-weight:600;letter-spacing:-.02em}
.fbrand span{color:var(--amber)}
.fintro{color:#b3a89e;max-width:56ch;margin:0 auto 26px}
.fbadges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:30px}
.fbadges img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:9px;padding:4px}
.flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  padding:22px 0;margin:0;list-style:none;border-top:1px solid rgba(255,255,255,.13);
  border-bottom:1px solid rgba(255,255,255,.13)}
.flinks a{font-weight:600;font-size:.88rem}
.flinks--sub{border-top:0;padding-top:14px;font-size:.83rem}
.flinks--sub a{font-weight:400;color:#b3a89e}
.fnap{margin:26px auto 0;max-width:70ch;line-height:1.8}
.fnap p{margin:0 0 .9em}
.fnap b{display:block;color:#fff;font-size:0.9062rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:.15em;font-family:var(--sans)}
.fpay{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.13);margin-top:26px;padding-top:24px}
.fpay img{height:26px}
.fpay span{font-size:0.9062rem;color:#b3a89e}
.disc{border-top:1px solid rgba(255,255,255,.13);margin-top:24px;padding-top:24px;
  display:grid;gap:.8em;text-align:left;max-width:var(--prose);margin-inline:auto}
.disc p{margin:0;font-size:1.062rem;color:#9d9289;line-height:1.6}
.disc b{color:#c8bcb2}
.disc .copy{margin-top:.6em;color:#b3a89e;text-align:center}
.totop{position:fixed;right:18px;bottom:86px;z-index:65;width:46px;height:46px;border:0;
  border-radius:50%;background:var(--amber);color:#fff;font-size:1.1rem;cursor:pointer;
  box-shadow:var(--sh-2);opacity:0;visibility:hidden;transition:.25s var(--ease)}
.totop.show{opacity:1;visibility:visible}
.totop:hover{transform:translateY(-3px);background:var(--amber-dk)}

/* ---- motion: soft fade-up ---- */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal]:nth-child(2){transition-delay:.06s}
[data-reveal]:nth-child(3){transition-delay:.12s}
[data-reveal]:nth-child(4){transition-delay:.18s}

/* ---- responsive ---- */
@media(max-width:1000px){
  .hero__grid{display:flex;flex-direction:column;gap:30px}
  .hero__media{max-width:400px;margin-inline:auto;width:100%;
    position:static;height:auto;display:block;order:3;margin:4px 0 18px}
  /* mobile hero order: eyebrow, H1, product shot, Quick Answer, CTA, rest.
     display:contents promotes the copy column's children to hero-grid items,
     so the shot can be placed between the H1 and the answer. */
  /* the copy column on these builds is a bare unclassed <div>, so it has to
     be promoted too -- otherwise only .hero__media is a grid item and the
     order values on the eyebrow, H1 and answer do nothing at all. */
  .hero__copy,.hero__grid > div:not([class]){display:contents}
  .hero .pill{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 18px}
  .hero .answer{order:4}
  /* The ticks follow the Quick Answer, per the hero build order in
     references/hero.md: eyebrow, H1, Quick Answer, ticks, seal row, CTA. */
  .hero .ticks{order:5}
  .hero .hero__cta{order:6}
  .hero .hero__rating{order:6}
  .hero .hero__sub{order:7}
  .hero .pay{order:8}
  /* Promoting the copy column exposed these as grid items too. Without an
     order they default to 0 and jump above the eyebrow, so they are pinned
     below the CTA where they sat before. */
  .hero .factpills{order:9}
  .hero .chips{order:10}
  .hero .figures{order:11}

  .split,.facts{grid-template-columns:1fr;gap:30px}
  .steps,.tgrid,.rel,.pricing{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,1fr)}
  .badgewall{grid-template-columns:repeat(3,1fr)}
  .ingthumbs,.gallery{grid-template-columns:repeat(3,1fr)}
  .tlife{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .final--media{grid-template-columns:1fr;text-align:center;gap:26px;padding:40px 26px}
  .final--media h2{text-align:center}
  .final--media p{margin-inline:auto}
  /* stacked pricing leads with the best value */
  .pricing{max-width:430px;margin-inline:auto}
  .pricing .tier:nth-child(1){order:3}
  .pricing .tier:nth-child(2){order:1}
  .pricing .tier:nth-child(3){order:2}
  .tier--feature{transform:none}
  .tier--feature:hover{transform:translateY(-5px)}
}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}
@media(max-width:560px){
  body{font-size:16px}
  .sec,.section{padding:54px 0}
  .badgewall,.gallery,.ingthumbs{grid-template-columns:repeat(2,1fr)}
  .form__row{grid-template-columns:1fr}
  .formcard{padding:22px 20px}
  .final{padding:38px 22px}
  .gallery figure:last-child{display:none}
  .totop{right:12px;bottom:78px;width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto;transition:none!important;animation:none!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ==========================================================================
   SHOTS — product and label imagery paired with the content that explains it.
   Replaces the old bare .gallery grid: an image on its own tells a buyer
   nothing, so every shot now carries a heading and a line of copy.
   ========================================================================== */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:36px}
.shots figure{margin:0;background:var(--card);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--sh-1);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.shots figure:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.shots img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--tint)}
.shots figcaption{padding:22px 26px}
.shots figcaption b{display:block;font-family:var(--serif);font-weight:600;font-size:1.14rem;
  color:var(--ink);margin-bottom:.4em;line-height:1.25}
.shots figcaption p{margin:0;color:var(--muted);font-size:.94rem}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots--wide img{aspect-ratio:4/3}
@media(max-width:900px){.shots--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.shots,.shots--wide{grid-template-columns:1fr}}

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

.toc{background:var(--tint);border:1px solid var(--line);border-radius:12px;
  padding:22px 26px;margin:0 0 2.2em}
.toc h2{font-family:var(--sans);font-size:.76rem!important;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-dk);margin:0 0 1em}
.toc ol{margin:0;padding-left:1.25em;display:grid;gap:.45em;font-size:.95rem}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.article h2{scroll-margin-top:110px}
.article h3{scroll-margin-top:110px}
.article figure{margin:2em 0}
.article figure img{width:100%;border-radius:12px;border:1px solid var(--line)}
.article figcaption{margin-top:.7em;font-size:0.9062rem;color:var(--faint);text-align:center}
/* A fixed cap, matching the authored width attribute, so the reserved box and
   the painted box are identical before and after the async stylesheet lands. */
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}

.keypoints{background:var(--amber-lt);border:1px solid var(--amber-line);
  border-left:4px solid var(--amber);border-radius:0 12px 12px 0;padding:22px 26px;margin:0 0 2em}
/* Direct child only: a <b> inside a bullet is emphasis and must stay inline. */
.keypoints>b{display:block;font-family:var(--sans);font-size:0.8438rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber-dk);margin-bottom:1em}
.keypoints ul{margin:0;padding-left:1.2em;display:grid;gap:.5em}
.keypoints li b{color:var(--ink-dk)}

/* The closing CTA reused mid-article: same component, narrower column. */
.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.62rem;line-height:1.22;margin:0 0 .5em}
.article .final--media .final__price{font-size:1.4rem;margin:.3em 0 .7em}
@media(max-width:620px){
  .article .final--media{grid-template-columns:1fr;text-align:center;padding:30px 22px}
  .article .final--media h2{text-align:center;font-size:1.45rem}
}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1)}
.posts img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 38%;
  background:var(--tint)}
.posts .pbody{padding:22px 24px;display:flex;flex-direction:column;flex:1}
.posts h3{margin:0 0 .45em;font-size:1.14rem}
.posts h3 a{color:var(--ink);text-decoration:none}
.posts h3 a:hover{color:var(--accent)}
.posts p{margin:0 0 1em;color:var(--muted);font-size:1.062rem}
.posts .pmeta{margin-top:auto;font-size:0.9062rem;color:var(--faint)}
@media(max-width:900px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}
/* brand mark: underline construction */
.brand{position:relative}.brand::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:3px;border-radius:2px;background:#c0392b}


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

   --navh is measured and published by site.js: nav heights run 66-99px across
   the estate and change when a bar compacts, and a hardcoded offset tucks the
   product under the bar on the taller ones.

   min-height makes the sticky box a full screen tall so the shot can be
   CENTRED inside it. Without it the box is only as tall as the image and
   `top` merely pins it under the header, which is what the old house rule did.

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

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

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

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

/* ==== 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(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 SURFACE + HERO BLOOM   (paint only -- below the critical marker)

   Slot for this site: bloom motif, 14px card corner, 8px control corner,
   three-stop depth (contact + mid + wide) tinted with this site's own ink
   rgb(38,32,28), never neutral black.

   Everything is scoped with body:has(.hero). .hero is on index.html and
   nowhere else, so that keeps the whole block to the home page, and carrying
   the body element in every selector puts it above modern_surface.py and
   footer_type.py, which re-append their own blocks AFTER this one on every
   build. Beaten on specificity, not on source order.
   ========================================================================== */
body:has(.hero){
  --gh-rc:14px;   /* cards and panels */
  --gh-rk:8px;    /* buttons and controls */
  --gh-d1:0 1px 2px rgba(38,32,28,.07);
  --gh-d2:0 1px 2px rgba(38,32,28,.06),0 6px 14px rgba(38,32,28,.08);
  --gh-d3:0 1px 2px rgba(38,32,28,.06),0 6px 14px rgba(38,32,28,.09),0 20px 44px rgba(38,32,28,.15);
  --gh-d4:0 1px 2px rgba(38,32,28,.07),0 8px 18px rgba(38,32,28,.12),0 28px 62px rgba(38,32,28,.20);
}

/* ---- 1. the wash the hero sits on -------------------------------------- */
body:has(.hero) .hero{
  background:
    radial-gradient(118% 78% at 78% 4%,rgba(151,103,23,.13) 0,rgba(151,103,23,0) 58%),
    linear-gradient(168deg,#fcfaf6 0,var(--paper) 44%,#f1e6df 100%);
}

/* ---- 2. surfaces -------------------------------------------------------- */
body:has(.hero) .card,
body:has(.hero) .tcard,
body:has(.hero) .qa,
body:has(.hero) .guarantee,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .formcard,
body:has(.hero) .tablewrap,
body:has(.hero) .faq,
body:has(.hero) .final,
body:has(.hero) .stat,
body:has(.hero) .ingthumb,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .figures div,
body:has(.hero) .hero__stick,
body:has(.hero) .tier{border-radius:var(--gh-rc);box-shadow:var(--gh-d2)}

/* z-index, not source order: the bloom's ::after is the last child of the
   media column, so without this the ring would be painted over the product
   card instead of behind it. Moves no box. */
body:has(.hero) .hero__stick{
  position:relative;z-index:2;
  box-shadow:var(--gh-d3);
  background:linear-gradient(180deg,#fffefb 0,#fdfaf5 100%);
}
body:has(.hero) .floaty{border-radius:10px;box-shadow:var(--gh-d2)}

body:has(.hero) .card:hover,
body:has(.hero) .tcard:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .badgewall figure:hover{box-shadow:var(--gh-d3);transform:translateY(-2px)}

/* ---- 3. controls -------------------------------------------------------- */
body:has(.hero) .btn{
  border-radius:var(--gh-rk);
  box-shadow:var(--gh-d2);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),
             background-color .22s var(--ease),background-image .22s var(--ease);
}
body:has(.hero) .btn:hover{transform:translateY(-2px);box-shadow:var(--gh-d3)}
body:has(.hero) .btn:active{transform:translateY(0);box-shadow:var(--gh-d1)}
body:has(.hero) input,
body:has(.hero) textarea,
body:has(.hero) select{border-radius:var(--gh-rk)}
body:has(.hero) .btn:focus-visible,
body:has(.hero) a:focus-visible,
body:has(.hero) button:focus-visible,
body:has(.hero) input:focus-visible,
body:has(.hero) textarea:focus-visible,
body:has(.hero) select:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* The buying CTA is the only gradient on the page. The button beside it stays
   flat so the pair reads as two weights rather than two buttons. Both stops
   keep white text above 4.5:1. */
body:has(.hero) .btn--cta{
  background-color:var(--accent);
  background-image:linear-gradient(180deg,#cb4032 0,#c0392b 46%,#a82e22 100%);
  box-shadow:var(--gh-d2),inset 0 1px 0 rgba(255,255,255,.20);
}
body:has(.hero) .btn--cta:hover{
  background-color:var(--accent-dk);
  background-image:linear-gradient(180deg,#c33d2f 0,#b03325 46%,#8f2a20 100%);
  box-shadow:var(--gh-d3),inset 0 1px 0 rgba(255,255,255,.20);
}
body:has(.hero) .btn--ghost{background-image:none;box-shadow:var(--gh-d1)}
body:has(.hero) .btn--ink{background-image:none}

/* ---- 4. hero motif: bloom ---------------------------------------------- */
/* A radial bloom that opens from behind the bottle and eases back. It lives
   on the media column's pseudo-elements, never on the <img>, which is the LCP
   element and is preloaded. It is sized LARGER than the product card (769px
   across a 506x632 card) so it reads outside it -- a bloom sized inside an
   opaque card renders nothing at all. 26 seconds a cycle, because this is a
   supplement taken daily for weeks. transform and opacity only. */
@media (min-width:1001px){
  body:has(.hero) .hero__media::before{
    content:"";position:absolute;z-index:0;pointer-events:none;
    inset:auto;left:50%;top:50%;width:152%;height:auto;aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle at 50% 50%,
      rgba(151,103,23,.20) 0,rgba(151,103,23,.15) 20%,
      rgba(192,57,43,.11) 40%,rgba(192,57,43,.05) 58%,
      rgba(192,57,43,0) 72%);
    -webkit-mask-image:none;mask-image:none;
    transform:translate(-50%,-50%) scale(.8);
    animation:ghBloomOpen 26s cubic-bezier(.37,0,.24,1) infinite;
  }
  body:has(.hero) .hero__media::after{
    content:"";position:absolute;z-index:0;pointer-events:none;
    inset:auto;left:50%;top:50%;width:112%;height:auto;aspect-ratio:1;
    border-radius:50%;border:1px solid rgba(151,103,23,.30);
    background:none;opacity:0;
    transform:translate(-50%,-50%) scale(.84);
    animation:ghBloomRing 26s cubic-bezier(.33,0,.2,1) infinite;
  }
}
/* Below 1001px the media column is position:static, so an absolutely
   positioned bloom would size itself against the whole hero section. The
   motif is desktop-only rather than wrong. */
@media (max-width:1000px){
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{display:none}
}
@keyframes ghBloomOpen{
  0%{transform:translate(-50%,-50%) scale(.8);opacity:.5}
  46%{transform:translate(-50%,-50%) scale(1.06);opacity:1}
  100%{transform:translate(-50%,-50%) scale(.8);opacity:.5}
}
@keyframes ghBloomRing{
  0%{transform:translate(-50%,-50%) scale(.84);opacity:0}
  18%{opacity:.6}
  68%{transform:translate(-50%,-50%) scale(1.3);opacity:0}
  100%{transform:translate(-50%,-50%) scale(1.3);opacity:0}
}

/* ---- 5. pricing: inset pill on a rule ---------------------------------- */
/* The three pack cards share one image slot and one button baseline, so
   nothing here touches flow. The rule either side of the ribbon and the
   dashed row separators are all absolutely positioned, and the recommended
   tier is raised with depth and colour -- not with margin and not with
   transform, which the reveal pass overwrites with transform:none. */
body:has(.hero) .tier__flag{
  z-index:3;
  background:var(--paper);
  color:var(--amber-dk);
  border:1px solid var(--amber-line);
  box-shadow:inset 0 2px 4px rgba(38,32,28,.13),0 1px 0 rgba(255,255,255,.75);
}
body:has(.hero) .tier__flag::before,
body:has(.hero) .tier__flag::after{
  content:"";position:absolute;top:50%;width:40px;height:1px;pointer-events:none;
}
body:has(.hero) .tier__flag::before{right:100%;margin-right:10px;
  background:linear-gradient(90deg,rgba(151,103,23,0),rgba(151,103,23,.5))}
body:has(.hero) .tier__flag::after{left:100%;margin-left:10px;
  background:linear-gradient(90deg,rgba(151,103,23,.5),rgba(151,103,23,0))}

body:has(.hero) .tier--feature{
  border:2px solid var(--accent);
  background:linear-gradient(180deg,#fffdfb 0,var(--card) 40%,#fdf2ee 100%);
  box-shadow:var(--gh-d4);
}
body:has(.hero) .tier--feature .tier__flag{
  background:var(--accent);color:#fff;border-color:var(--accent-dk);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 6px 14px rgba(192,57,43,.3);
}
body:has(.hero) .tier--feature .tier__flag::before{
  background:linear-gradient(90deg,rgba(192,57,43,0),rgba(192,57,43,.55))}
body:has(.hero) .tier--feature .tier__flag::after{
  background:linear-gradient(90deg,rgba(192,57,43,.55),rgba(192,57,43,0))}

body:has(.hero) .tier:hover{box-shadow:var(--gh-d3);transform:translateY(-2px)}
body:has(.hero) .tier--feature:hover{box-shadow:var(--gh-d4);transform:translateY(-2px)}

/* Dashed separators that add no height: drawn inside the existing .55em gap,
   absolutely positioned, so the button baseline below them does not move. */
body:has(.hero) .tier__rows li+li::before{
  content:"";position:absolute;left:0;right:0;top:-.3em;pointer-events:none;
  border-top:1px dashed rgba(38,32,28,.2);
}

/* ---- 6. motion off ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::before{
    animation:none;transform:translate(-50%,-50%) scale(.96);opacity:.85}
  body:has(.hero) .hero__media::after{
    animation:none;transform:translate(-50%,-50%) scale(1.04);opacity:.35}
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn:active,
  body:has(.hero) .card:hover,
  body:has(.hero) .tcard:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .badgewall figure:hover,
  body:has(.hero) .tier:hover,
  body:has(.hero) .tier--feature: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{font-size:16px}
footer .flinks a{font-size:16px}
footer .flinks--sub{font-size:16px}
footer .fnap b{font-size:16px}
footer .fpay span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 45 box-shadow declaration(s)
   and 2 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (38,32,28), not neutral black.

   Paint only: border-radius, box-shadow and transform change no
   geometry, so this is safe below the critical marker and needs a
   restamp rather than a rebuild. */
:root{
  --radius:16px;
  --shadow:0 1px 2px rgba(38,32,28,.06), 0 6px 18px rgba(38,32,28,.07);
  --lift:0 2px 6px rgba(38,32,28,.09), 0 16px 34px rgba(38,32,28,.14);
}

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.keypoints,
.badgewall figure,
.tablewrap,
.faq,
.answer,
.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,
.tier,
.posts h3 a{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier:hover,
.posts h3 a:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier:hover,
.posts h3 a:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}