/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Podkova Fallback";src:local("Georgia");font-weight:400;size-adjust:102.59%;ascent-override:83.73%;descent-override:24.27%;line-gap-override:0.00%}
@font-face{font-family:"Podkova Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:93.26%;ascent-override:92.11%;descent-override:26.70%;line-gap-override:0.00%}
@font-face{font-family:"Varta Fallback";src:local("Arial");font-weight:400;size-adjust:94.45%;ascent-override:98.33%;descent-override:55.21%;line-gap-override:0.00%}
@font-face{font-family:"Varta Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:89.66%;ascent-override:103.58%;descent-override:58.16%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* menmohoney.com — MemoHoney, the U.S. desk.
   Design slot: batch11_assignments.py, row 272.

     Type    Podkova (slab serif display) / Varta (humanist sans text)
     Layout  a NARROW hero column beside a tall product rail that runs past
             the fold — the rail is a full screen high and sticks, so the
             bottle is still beside the reader four sections down
     Cards   outlined, square, with the header strip FILLED in the accent
     Depth   inset shading only. Nothing on this site is raised off the page:
             there is not one outer box-shadow in this file
     Ground  cold pewter washing to white, top-down, on every page
     Header  the name flush left, destinations wrapping in two short rows
     Footer  a two-tone block — a tinted contact half, a dark destination half
     Motion  the steam-rise motif (hero_motifs.py), warm air lifting off the
             bottle rather than anything urgent

   The palette comes from the bottle, not from the slot: the label is a white
   cylinder with a honey band and a gold hexagon brain, photographed on
   espresso. So the accent is that honey, the ink is that espresso, and the
   ground is the one cold thing on the page. Warm mark on a cold ground is the
   whole idea, and it is what keeps this desk away from its five sisters.

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

/* ---- tokens */
:root{
  --paper:#f4f6f7;          /* the cold pewter ground, washed to white */
  --pewter:#ccd2d7;
  --pewter-2:#dfe3e7;
  --pewter-3:#edeff1;
  --panel:#ffffff;
  --ink:#221a13;            /* espresso, off the listing artwork */
  --ink-2:#55493c;
  --ink-3:#7d7165;
  --honey:#a9761a;          /* the label band, dark enough to read on white */
  --honey-d:#7d560f;
  --amber:#d8a53c;          /* the band's light stop — a FILL, never a text colour */
  --amber-l:#f2dcab;
  --espresso:#241b12;
  --espresso-2:#34281c;
  --line:#ccd2d7;
  --line-2:#aeb7be;
  --line-3:#e2e6e9;
  --good:#1f7a4d;
  --warn:#9a5f0c;
  --wrap:1220px;
  --measure:720px;
  --measure-wide:950px;
  --radius:3px;
  --radius-lg:4px;
  --inset:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(34,26,19,.06);
  --inset-deep:inset 0 2px 7px rgba(34,26,19,.09);
  --navh:104px;
  --display:"Podkova","Podkova Fallback",Georgia,"Times New Roman",serif;
  --text:"Varta","Varta Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
/* The wash. A no-repeat gradient over a white base, so it reads as cold
   pewter at the top of every page and is plain white by the time the reader
   is in the body copy — the same treatment on all 26 pages rather than a
   hero-only effect that makes the inner pages look like a different site. */
body{
  overflow-x:clip;
  background-color:#fff;
  background-image:linear-gradient(180deg,#c9ced4 0,#e4e7ea 210px,var(--paper) 430px,#fff 760px);
  background-repeat:no-repeat;
  color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--honey-d);text-underline-offset:3px}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:700;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.94rem,1.3rem + 2vw,2.9rem);letter-spacing:-.005em}
h2{font-size:clamp(1.45rem,1.16rem + 1.1vw,2.05rem)}
h3{font-size:1.18rem;font-weight:600}
h4{font-size:1.02rem;font-weight:600}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--espresso);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--honey);outline-offset:2px}

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

/* ---- buttons. Square, weighted, no lift: depth on this site is inset only,
   so :active presses IN rather than moving the box. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 32px;
  font-family:var(--display);font-size:1.03rem;font-weight:700;letter-spacing:.005em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--espresso);color:#fff;
  transition:background .18s ease,box-shadow .18s ease;
}
.btn:hover{background:#3b2c1d;color:#fff}
.btn:active{box-shadow:inset 0 3px 8px rgba(0,0,0,.34)}
.btn--honey{background:var(--honey-d)}
.btn--honey:hover{background:var(--honey)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.12rem}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--pewter-3);color:var(--ink)}
.btn--wide{width:100%}

/* ---- topline strip: the five facts a buyer wants before anything else */
.util{background:var(--espresso);color:#c2b6a5;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:2px;height:13px;background:#5a4632;
  flex:0 0 auto;margin-right:11px}
.util b{color:var(--amber);font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{color:#fff;text-decoration:underline}
@media (max-width:820px){
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}

/* ---- header: the name flush left, destinations wrapping in two short rows.
   One row of chrome, not two: the menu sits BESIDE the wordmark and is allowed
   to wrap, which is what gives this masthead its shape. `padding-block`, never
   the shorthand — this element also carries .wrap and `padding:10px 0` would
   wipe the page gutter (pitfall 46). */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);
  box-shadow:inset 0 -1px 0 var(--line)}
.nav__bar{display:flex;align-items:center;gap:28px;padding-block:11px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand__glyph{width:38px;height:38px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class: brand_marks.py replaces the
   <svg> and does not carry the class onto the replacement, so a class-only
   rule stops applying the moment that tool runs (pitfall 16). */
.brand>svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.06}
.bw b{font-family:var(--display);font-size:1.42rem;font-weight:700;letter-spacing:-.01em}
.bw b em{font-style:normal;color:var(--honey-d)}
.bw small{font-size:0.8125rem;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.nav__dest{flex:1 1 auto;min-width:0;max-width:700px}
.menu{
  display:flex;flex-wrap:wrap;gap:0 19px;list-style:none;margin:0;padding:0;
  align-items:center;
}
.menu a{
  display:inline-block;padding:4px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--ink);border-bottom-color:var(--amber)}
.menu a[aria-current="page"]{color:var(--honey-d);border-bottom-color:var(--honey)}
.nav__act{margin-left:auto;display:flex;align-items:center;gap:14px;flex:0 0 auto}
.nav__buy{min-height:46px;padding:11px 20px;font-size:.95rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--ink);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: a NARROW copy column beside a tall product rail ---------------
   The copy is held to a single readable measure and the rail takes the rest
   of the width. The rail is translucent so the motif behind it still reads,
   and it is a full screen tall — with the sticky rule below it keeps the
   bottle beside the reader well past the fold, which is the point of it. */
.hero{position:relative;padding:46px 0 52px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:46px;align-items:start}
.hero__copy{display:flex;flex-direction:column;min-width:0;max-width:540px}
.hero h1{margin:0 0 17px}
.hero h1 em{font-style:normal;color:var(--honey-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-top:3px solid var(--amber);
  padding:19px 22px;margin:0 0 18px;box-shadow:var(--inset-deep);
}
.answer p{margin:0 0 .72em;font-size:1.0625rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;
  font-size:0.9688rem;font-weight:600;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight:700}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:0.9062rem;font-weight:600;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 13px;border-radius:var(--radius);
}
.factpills li b{color:var(--ink);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);padding:13px 14px;
  border-radius:var(--radius);box-shadow:var(--inset)}
.figures b{display:block;font-family:var(--display);font-size:1.46rem;font-weight:700;
  color:var(--honey-d);line-height:1.1}
.figures span{display:block;font-size:0.9062rem;font-weight:600;color:var(--ink-3);margin-top:3px}

/* the rail */
.hero__media{position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.80) 0,rgba(255,255,255,.42) 62%,rgba(255,255,255,0) 100%);
  border-left:3px solid var(--amber);
  padding:20px 14px 30px;
}
.hero__card{position:relative;text-align:center;padding:6px}
.hero__card img{width:100%;max-width:430px;height:auto;margin-inline:auto}
.hero__cap{margin:14px 0 0;font-size:.8438rem;font-weight:600;color:var(--ink-3);text-align:center}

/* ---- inner page head */
.phead{padding:34px 0 26px}
.crumbs{font-size:0.9062rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--honey-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (max-width:1180px){
  .hero__grid{grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:34px}
}
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__copy{display:contents;max-width:none}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 20px;border-left:0;border-top:3px solid var(--amber); padding:18px 10px 22px;background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,0))}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:32px 0 40px}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 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;}
}


/* ---- hero motif -- steam-rise ---------------------------------------- */
.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(179deg,#c3cad1 0%,#efe7d5 34%,#f4f6f7 100%)}.hero__media::before{content:'';position:absolute;left:50%;bottom:4%;width:150%;height:76%;translate:-50% 0;z-index:0;pointer-events:none;background:radial-gradient(48% 58% at 50% 100%,rgba(216,165,60,0.50),transparent 74%);filter:blur(24px);animation:mhRise 13s ease-in-out infinite}.hero__media::after{content:'';position:absolute;left:50%;top:50%;width:132%;aspect-ratio:1.18;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,transparent 56%,rgba(216,165,60,0.40) 78%,transparent 93%);animation:mhSettle 17s ease-in-out infinite}@keyframes mhRise{0%,100%{opacity:.20;transform:translateY(12%) scaleX(.92)}44%{opacity:.78;transform:translateY(-16%) scaleX(1.04)}72%{opacity:.46;transform:translateY(-30%) scaleX(1.10)}}@keyframes mhSettle{0%,100%{opacity:.22;transform:scale(.90)}50%{opacity:.62;transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:58px 0;position:relative}
.sec--tint{background:var(--pewter-3)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--espresso);color:#d6ccbe}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#cfc4b4}
.sec--dark .eyebrow{color:var(--amber)}
.sec--dark .eyebrow::before{background:var(--amber)}
.sec--dark a{color:var(--amber-l)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* the ruled section: a hairline above the head, the house's quietest divider */
.sec--rule{border-top:1px solid var(--line-3)}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#cfc4b4}

/* one measure, centred; multi-column components keep the full wrap */
@media (min-width:1060px){
  .sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote,
  .sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{
    max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- lists */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .5em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.sec--dark .ticks li::before{color:#7fd3a6}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-3);vertical-align:top}
th{font-family:var(--display);font-weight:700;color:var(--espresso);background:var(--amber);
  font-size:.9688rem}
tbody tr:nth-child(even){background:#faf9f7}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--ink)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps */
.steps{display:grid;gap:14px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:19px 22px 19px 68px;box-shadow:var(--inset)}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:0;bottom:0;width:48px;
  display:grid;place-items:center;
  background:var(--amber);color:var(--espresso);
  font-family:var(--display);font-weight:700;font-size:1.1rem;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: outlined, square, header strip FILLED in the accent ----------
   The strip is the card here. There is no shadow and no radius to lean on, so
   the coloured band is what separates one card from the page behind it, and it
   is also the only place the accent appears at any size. Text inside the strip
   is espresso rather than white: white on this amber measures 2.2:1. */
.grid{display:grid;gap:16px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--panel);border:1px solid var(--line-2);
  border-radius:var(--radius);padding:0 0 18px;overflow:hidden;box-shadow:var(--inset)}
.card>h3{margin:0 0 15px;padding:11px 18px;background:var(--amber);color:var(--espresso);
  font-size:1.06rem;font-weight:700;line-height:1.32}
.card>*:not(h3){margin-left:18px;margin-right:18px}
.card>*:last-child{margin-bottom:0}
.sec--dark .card{background:var(--espresso-2);border-color:#4d3c2a;box-shadow:none}
.sec--dark .card>h3{background:var(--honey-d);color:#fff}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--pewter-3);border:1px solid var(--line);border-left:4px solid var(--honey);
  border-radius:var(--radius);padding:19px 21px;margin:0 0 1.2em;box-shadow:var(--inset-deep)}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--ink)}
.callout p:last-child{margin:0}
.alert{background:#fbf3e4;border:1px solid #e9d5ad;border-left:4px solid var(--warn);
  border-radius:var(--radius);padding:19px 21px;margin:0 0 1.2em;box-shadow:var(--inset-deep)}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.3rem;font-weight:600;line-height:1.48;
  color:var(--ink);border-left:5px solid var(--amber);padding:2px 0 2px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;
  font-weight:400;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:0 0 18px;margin:0 0 1.2em;box-shadow:var(--inset)}
.keypoints>b{display:block;margin:0 0 14px;padding:11px 18px;background:var(--amber);
  color:var(--espresso);font-family:var(--display);font-size:1.04rem}
.keypoints ul{margin:0 18px;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;
  align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT, and a
   .tablewrap holding a 520px-min table then keeps its column 520px wide however
   narrow the grid is. min-width:0 belongs on the items at every width. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel)}
.split__body p:last-child{margin:0}

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

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

/* ---- ingredient cards */
.inglist{display:grid;gap:15px}
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:0 0 20px;overflow:hidden;box-shadow:var(--inset)}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  margin:0 0 15px;padding:12px 20px;background:var(--amber)}
.ingcard__top h3{margin:0;color:var(--espresso)}
.ingcard>*:not(.ingcard__top){margin-left:20px;margin-right:20px}
.ingcard>*:last-child{margin-bottom:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:#5c4623}
.ing__dose{margin-left:auto;font-size:.9062rem;font-weight:700;color:#fff;
  background:var(--espresso);padding:4px 12px;border-radius:var(--radius);white-space:nowrap}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  align-items:stretch;margin:0 0 20px}
.card--pack{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;
  position:relative;padding:0;box-shadow:var(--inset)}
.card--pack>*:not(h3){margin-left:0;margin-right:0}
.card--pack.featured{border-color:var(--honey-d);box-shadow:inset 0 0 0 2px var(--honey-d)}
.pack__head{background:var(--amber);padding:13px 20px;display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:var(--honey-d)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.16rem;font-weight:700;color:var(--espresso)}
.pack__head span{font-size:.8125rem;font-weight:700;color:#5c4623;margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--espresso);color:var(--amber);
  font-family:var(--text);font-size:0.8125rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 12px;z-index:3}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;
  margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.3rem;font-weight:700;color:var(--ink);
  line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1rem;font-weight:700;top:-.72em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;
  color:var(--ink-3);margin:5px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;
  font-size:1rem}
.pack__tot b{font-weight:700}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:600}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;
  font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line-2);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--inset)}
.shots img{width:100%}
.shots figcaption{padding:15px 18px;border-top:3px solid var(--amber)}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--ink)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 1.2em}
.badgewall figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 15px;box-shadow:var(--inset)}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px;color:var(--ink)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px 1fr 52px;gap:12px;align-items:center;
  margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:11px;background:var(--pewter);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--inset-deep)}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--honey))}
.stars{color:#c8901c;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target. */
.faq{border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;
  background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line-3)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;
  font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;
  font-family:var(--text);font-size:1.4rem;font-weight:400;color:var(--honey-d)}
.faq details[open] summary{background:var(--pewter-3)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:14px 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.0625rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's URL as the link TEXT, and a URL is
   one unbreakable token that otherwise sets the ancestor's min-content width
   and pushes the list off a 390px screen. `anywhere`, not `break-word`. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);
  border-top:3px solid var(--amber);border-radius:var(--radius);padding:21px 23px;
  margin:0 0 1.2em;box-shadow:var(--inset)}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;
  background:var(--espresso);color:var(--amber);font-family:var(--display);font-weight:700;
  font-size:1.06rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--ink)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line-2);border-top:4px solid var(--amber);
  border-radius:var(--radius);padding:28px 30px;box-shadow:var(--inset)}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.final__img img{width:210px}
.final h2{margin:0 0 10px}
.final__price{font-weight:700;color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:left}
.rel a{display:block;background:var(--panel);border:1px solid var(--line-2);
  border-radius:var(--radius);padding:19px 21px;text-decoration:none;color:var(--ink);
  box-shadow:var(--inset);transition:border-color .18s ease,background .18s ease}
.rel a:hover{border-color:var(--honey);background:#fffdf8}
.rel b{display:block;font-family:var(--display);font-size:1.08rem;color:var(--ink);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms the page on focus. */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:700;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;
  padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--panel);color:var(--ink);box-shadow:var(--inset-deep)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:0.9062rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--amber);
  border-radius:var(--radius);padding:19px 23px;margin:0 0 28px;box-shadow:var(--inset)}
.toc b{display:block;margin-bottom:8px;color:var(--ink)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.0625rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.posts article{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:21px 23px;box-shadow:var(--inset)}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.0625rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: a two-tone block ------------------------------------------
   A tinted contact half and a dark destination half, edge to edge, each with
   its own inner measure so the two meet at the middle of the page. The
   contact routes are the half a reader comes here for, so they get the light
   side and the larger type; the index is the dark side.

   Every size in this block is at or above house rule 10's floor -- 16px for
   running text and links, 15px for the column headings -- so footer_type.py
   reports "already at the floor" rather than appending an override block. */
.fcta{background:var(--espresso);color:#fff;padding:52px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__eye{display:inline-block;font-size:.875rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--amber);margin-bottom:9px}
.fcta__h{font-family:var(--display);font-size:1.7rem;font-weight:700;line-height:1.24;margin:0 0 10px}
.fcta p{color:#cfc4b4;font-size:1.0625rem}
.fcta__sm{font-size:1rem;color:#b0a494;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:var(--amber-l)}
.fcta__img img{width:280px}

footer{background:var(--panel)}
.ftwo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.24fr)}
.fcontact{background:var(--pewter-2);padding:42px 26px 38px;display:flex;justify-content:flex-end}
.fcontact__in{width:100%;max-width:540px}
.fdest{background:var(--espresso);color:#cfc4b4;padding:42px 26px 38px}
.fdest__in{width:100%;max-width:700px}
.fbrand{font-family:var(--display);font-size:1.68rem;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;line-height:1}
.fbrand span{color:var(--honey-d)}
.frole{font-size:16px;color:var(--ink-2);margin:8px 0 16px}
.fcontact p{font-size:16px;color:var(--ink-2);margin:0 0 .75em}
.fcontact b{color:var(--ink)}
.fh{font-family:var(--text);font-size:15px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--honey-d);margin:0 0 10px}
.fdest .fh{color:var(--amber)}
.findex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.findex ul{list-style:none;margin:0 0 20px;padding:0}
.findex li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back. */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:16px;
  color:#cfc4b4;text-decoration:none}
footer li a:hover{color:var(--amber)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:18px 0 0;
  border-top:1px solid #c2c8cd;margin-top:6px}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:16px;color:var(--ink-2)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px 0 0}
.fpay img{width:230px;height:auto}
.fpay span{font-size:16px;color:var(--ink-2)}
.disc{background:var(--espresso-2);color:#c2b6a5;padding:26px 0 30px}
.disc p,.disc li{font-size:16px;color:#c2b6a5}
.disc b{color:var(--amber)}
.disc a{color:var(--amber-l)}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;
  background:var(--amber)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid #4d3c2a;font-size:16px}

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

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

/* ---- responsive */
@media (max-width:1180px){
  .hero__grid{grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:34px}
  .nav__dest{max-width:520px}
}
/* 980, not 1020: hero_sticky.py writes its sticky rail at `min-width:981px`,
   and a phone breakpoint that started earlier would leave a band of widths
   where the grid had collapsed to one column while the rail was still a
   sticky 100vh box. The two boundaries have to be the same number. */
@media (max-width:980px){
  :root{--navh:96px}
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__copy{display:contents;max-width:none}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 20px;border-left:0;border-top:3px solid var(--amber);
    padding:18px 10px 22px;background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,0))}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .factpills{order:10}
  .figures{order:11}
  /* The toggle stays on `.menu.open`, which is what site.js writes and what
     fix_chrome_scroll.py's menuIsOpen() looks for -- moving it to the wrapper
     would leave the header hiding itself under an open menu. */
  .nav__dest{order:3;flex:1 0 100%;max-width:none}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 10px}
  .menu.open{display:flex}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line-3);border-bottom-width:1px}
  .menu a[aria-current="page"]{border-bottom-color:var(--line-3)}
  .nav__bar{flex-wrap:wrap}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
  .ftwo{grid-template-columns:1fr}
  .fcontact{justify-content:flex-start}
  .fcontact__in,.fdest__in{max-width:none}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding:32px 0 40px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* the dose chip is nowrap and margin-left:auto, so on a narrow card it is
     pushed onto a line with no room for it and overhangs the edge */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .findex{grid-template-columns:1fr 1fr;gap:18px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .findex{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
}


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

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

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

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

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

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.split__img,
.answer{border-radius:var(--radius)}

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

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