/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Kameron Fallback";src:local("Georgia");font-weight:400;size-adjust:100.69%;ascent-override:88.40%;descent-override:29.48%;line-gap-override:0.00%}
@font-face{font-family:"Kameron Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:97.50%;ascent-override:91.29%;descent-override:30.45%;line-gap-override:0.00%}
@font-face{font-family:"Gafata Fallback";src:local("Arial");font-weight:400;size-adjust:92.08%;ascent-override:100.02%;descent-override:21.94%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* memohonees.com - MemoHoney, U.S. shop.
   Design slot row 266 (batch11_assignments.py).

   Type      Kameron (slab serif) over Gafata (humanist sans). Gafata ships one
             weight, so every bold inside running text is SET IN KAMERON rather
             than synthesised - see the `b,strong` rule below. That is the whole
             typographic idea of this site: the sans carries the reading, the
             slab carries every emphasis, heading and number.
   Layout    hero copy left, the pack right; sections run full width and the
             reading column is centred inside them.
   Cards     hairline border, SQUARE corners, no fill at all.
   Depth     none. Nothing on this site casts a shadow; separation is done with
             a 1px rule and a change of ground.
   Ground    cool SLATE paper carrying warm IVORY slabs. The tension between a
             grey page and a cream panel is what replaces the shadow.
   Header    a masthead whose name sits in a filled dark square at the far left.
   Footer    a closing panel whose 60 is set very large beside the page index.

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

/* ---- tokens */
:root{
  --ink:#241d12;            /* body text, and the filled brand square */
  --ink-2:#5a4e3c;          /* secondary */
  --ink-3:#6b6255;          /* captions, meta */
  --amber:#b07d16;          /* the label band */
  --amber-d:#7d560b;        /* links, buttons - the accessible amber */
  --honey:#e2a92e;          /* the bright mark, dark grounds only */
  /* One step lighter than the #e2e5e9 this started at, and the step is
     load-bearing: hero_motifs.palette() only accepts a ground token whose
     lightness is STRICTLY above 0.9, and #e2e5e9 lands on exactly 0.900.
     At that value the tool silently falls back to its own white default
     and builds the hero gradient from a colour this site does not use. */
  --paper:#e4e7ea;          /* the page: cool slate */
  --panel:#fbf7ec;          /* the slab: warm ivory */
  --tint:#d7dbe1;           /* a deeper slate band */
  --dark:#262d34;           /* the one dark band */
  --line:#c3c9d1;           /* the hairline, on slate */
  --line-2:#a5adb8;
  --line-3:#ded5c0;         /* the hairline, on ivory */
  --good:#1f6b3f;
  --warn:#8a5a10;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --radius:0;
  --shadow:none;
  --navh:104px;
  --display:"Kameron","Kameron Fallback",Georgia,"Times New Roman",serif;
  --text:"Gafata","Gafata 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%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17.5px;line-height:1.76;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber-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(2rem,1.34rem + 2.1vw,3rem);letter-spacing:-.012em}
h2{font-size:clamp(1.48rem,1.16rem + 1.2vw,2.15rem);letter-spacing:-.008em}
h3{font-size:1.2rem;font-weight:600}
h4{font-size:1.04rem;font-weight:600}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
/* Gafata has exactly one weight. A browser asked for bold would SYNTHESISE it,
   which smears the stems. So every inline emphasis is set in the slab instead -
   deliberate, and the reason this site can use a single-weight text face at
   all. Size is pinned to 1em so the switch never changes the line. */
b,strong{font-family:var(--display);font-weight:700;font-size:1em;color:var(--ink)}
em{font-style:italic}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--panel);padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--amber-d);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(--display);font-size:0.9375rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber-d);
  margin:0 0 12px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--amber)}

/* ---- buttons: square, flat, no shadow. The primary is the ink slab. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 30px;
  font-family:var(--display);font-size:1.02rem;font-weight:700;letter-spacing:.005em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--ink);color:var(--panel);
  transition:background .18s ease,color .18s ease;
}
.btn:hover{background:#3b2f1c;color:var(--panel)}
.btn--honey{background:var(--amber-d);color:#fff}
.btn--honey:hover{background:var(--ink);color:#fff}
.btn--lg{min-height:62px;padding:17px 36px;font-size:1.1rem}
.btn--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--panel)}
.btn--wide{width:100%}

/* ---- header: a masthead whose name sits in a filled square at the far left */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);border-bottom:1px solid var(--line)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:0` on the inline axis would wipe the page gutter (pitfall 46). */
.nav__top{display:flex;align-items:stretch;gap:26px;padding-block:0}
/* the filled square: the mark and the name share one dark block that runs the
   full height of the masthead and sits flush with the page gutter */
.brand{
  display:flex;align-items:center;gap:13px;text-decoration:none;
  background:var(--ink);color:var(--panel);
  padding:14px 22px;margin-inline:-22px 0;
  flex:0 0 auto;
}
.brand:hover{color:var(--panel)}
.brand__glyph{width:38px;height:38px;flex:0 0 auto}
/* Size the mark by ELEMENT, not only by class. brand_marks.py rewrites the
   <svg> inside .brand and does not carry class="brand__glyph" onto the
   replacement, so a rule keyed to that class stops applying the moment the
   tool runs and the glyph renders at its intrinsic size (pitfall 16). */
.brand>svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-family:var(--display);font-size:1.42rem;font-weight:700;letter-spacing:-.01em;color:var(--panel)}
.bw b em{font-style:normal;color:var(--honey)}
.bw small{font-size:0.9375rem;font-weight:400;font-family:var(--text);color:#b7ac97;letter-spacing:.02em}
.menu{
  display:flex;flex-wrap:wrap;gap:0 26px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:62px;
}
.menu a{
  display:inline-block;padding:10px 0;font-family:var(--display);
  font-size:1rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--ink)}
.menu a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--amber)}
.menu__more{display:none}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav__buy{min-height:44px;padding:10px 20px;font-size:.98rem}
.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: copy LEFT, the pack RIGHT on an ivory slab */
.hero{position:relative;background:var(--paper);padding:56px 0 62px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:46px;align-items:center}
/* The motif's layers are sized to 132-148% of .hero__media, which is sticky
   and therefore a stacking context that paints above non-positioned
   siblings -- so at 1440 the honey glow reaches about 76px across the
   right edge of the Quick Answer box. Measured, not guessed. Lifting the
   copy column above it keeps the reading surface clean while the glow
   still spills into the gutter between the two columns, which is the part
   that makes the motif read. Inert below 981px, where .hero__copy is
   display:contents and has no box to position. */
.hero__copy{display:flex;flex-direction:column;min-width:0;position:relative;z-index:3}
.hero h1{margin:0 0 20px}
.answer{
  background:var(--panel);border:1px solid var(--line-3);
  border-left:4px solid var(--amber);
  padding:20px 24px;margin:0 0 20px;
}
.answer p{margin:0 0 .75em;font-size:1.075rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 22px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:0.9688rem;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-family:var(--display);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.9375rem;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line-3);padding:7px 14px;border-radius:0;
}
.factpills li b{color:var(--ink)}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;border:1px solid var(--line)}
.figures div{background:var(--panel);padding:14px 16px;border-right:1px solid var(--line-3)}
.figures div:last-child{border-right:0}
.figures b{display:block;font-family:var(--display);font-size:1.62rem;font-weight:700;color:var(--ink);line-height:1.1}
.figures span{display:block;font-size:0.9375rem;color:var(--ink-3);margin-top:3px}
/* the pack stands on an ivory slab with a hairline round it - no shadow */
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;background:var(--panel);border:1px solid var(--line-3);padding:26px 24px 20px}
.hero__card img{width:100%;max-width:400px;height:auto;margin-inline:auto}
.hero__cap{margin:14px 0 0;font-size:.9375rem;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:0.9375rem;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--good);font-family:var(--display);font-weight:700}

/* ---- inner page head */
.phead{padding:36px 0 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:0.9375rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--amber-d)}
.phead h1{margin:0 0 18px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide);background:var(--paper);border-color:var(--line)}
.lead{font-size:1.16rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: the five trust facts, above the navigation.
   Role, lot, dose and count, guarantee, order phone. It exists so the NAV does
   not have to carry them. Sits ABOVE CRITICAL-END because it is the first
   thing painted; appended to the end of the stylesheet it would load async and
   flash unstyled at the very top of the page. */
.util{background:var(--dark);color:#c9cfd6;font-size:.875rem;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:1px;height:12px;
  background:#535d68;flex:0 0 auto;margin-right:11px}
.util b{color:#fff;font-family:var(--display);font-weight:600}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines and eat a phone's first screenful. Keep the
     role, the guarantee and the phone; the lot and the dose are on the pages
     that need them. */
  .util__item--trim{display:none}
  /* Three items still wrap to two lines at 390, and the divider rule is an
     ::before on the ITEM, so a wrapped line opens with a stray vertical rule.
     No CSS can see a wrap, so the separators come off entirely below 760 and
     the row centres instead. Caught in a 390 screenshot, not by a checker. */
  .util__item+.util__item::before{display:none}
  .util__row{gap:2px 14px;justify-content:center;text-align:center}
}


/* --- hero responsive rules, copied into the critical block by critical_hero.py
   A phone otherwise paints the DESKTOP hero from the inline block and relays
   when the async sheet arrives. These are COPIES: the originals stay below, so
   the cascade is unchanged and the first paint is already correct. */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:34px 0 44px}
}


/* ---- hero motif -- melt-drift ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:linear-gradient(181deg,#e3d3ae 0%,#e4dcc8 16%,#e4e7ea 48%)}.hero__media::before{content:'';position:absolute;left:50%;top:-10%;width:148%;height:118%;translate:-50% 0;z-index:0;pointer-events:none;border-radius:44% 44% 50% 50%/20% 20% 80% 80%;background:linear-gradient(180deg,rgba(226,169,46,0.58) 0%,rgba(226,169,46,0.38) 38%,transparent 76%);filter:blur(26px);animation:mhMelt 15s ease-in-out infinite}.hero__media::after{content:'';position:absolute;left:50%;top:60%;width:132%;aspect-ratio:1.55;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,transparent 66%,rgba(226,169,46,0.46) 84%,transparent 98%);filter:blur(14px);animation:mhDrift 23s ease-in-out infinite}@keyframes mhMelt{0%,100%{opacity:.32;transform:translateY(-14%) scaleY(.94)}46%{opacity:.82;transform:translateY(9%) scaleY(1.06)}76%{opacity:.48;transform:translateY(21%) scaleY(1.13)}}@keyframes mhDrift{0%,100%{opacity:.28;transform:translateX(-7%) scale(.94)}50%{opacity:.66;transform:translateX(7%) scale(1.05)}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!SITE-HOME-CRIT-START*/
/* ---- home page only: the buy button, and the pricing row's geometry -------
   Measured at 1440x900 before the change: the hero CTA opened at y=845 and its
   lower edge landed at y=910, ten pixels past the fold, so the money page's
   first screen had no whole button on it. Above 980px .hero__copy is a flex
   column, so ORDER alone lifts the button to ~y=710 without touching the
   markup, without touching a word of copy, and without touching the phone
   composition -- below 981 .hero__copy is display:contents and the existing
   blocks order the children as grid items. Reading order becomes: eyebrow,
   headline, quick answer, BUTTONS, payment line, then the evidence. */
@media (min-width:981px){
  .hero__copy>.eyebrow{order:1}
  .hero__copy>h1{order:2}
  .hero__copy>.answer{order:3}
  .hero__copy>.hero__cta{order:4}
  .hero__copy>.hero__sub{order:5}
  .hero__copy>.hero__road{order:6}
  .hero__copy>.factpills{order:7}
  .hero__copy>.figures{order:8}
}
/* The pricing row. .prices and .card--pack also exist on pricing.html, so each
   one is scoped to the home page with body:has(.hero).
   padding-top opens the headroom the tab ribbon hangs in; the recommended tier
   is raised by giving the OTHER two a margin-top, never by a transform, since
   the reveal pass sets transform:none on these cards. The grid is
   align-items:stretch, so a margin at the top shortens the item instead of
   sliding it: all three bottoms stay on one line and the three Add-To-Cart
   buttons keep the single baseline pack_cards.py built for them. */
body:has(.hero) .prices{padding-top:20px}
body:has(.hero) .card--pack:not(.featured){margin-top:22px}
body:has(.hero) .pack__perks li+li{border-top:1px dashed var(--line-3);padding-top:7px}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:64px 0;position:relative;border-top:1px solid var(--line)}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--dark);color:#d5dae0;border-top-color:var(--dark)}
.sec--dark h2,.sec--dark h3,.sec--dark b,.sec--dark strong{color:#fff}
.sec--dark p,.sec--dark li{color:#c9cfd6}
.sec--dark .eyebrow{color:var(--honey)}
.sec--dark .eyebrow::before{background:var(--honey)}
.sec--dark a{color:var(--honey)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 28px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#c9cfd6}

/* the sections run full width and the reading column is centred inside them -
   this site's layout lever, applied from the first breakpoint that has room */
@media (min-width:1000px){
  .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>.keypoints,.sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps,.sec>.wrap>.versus,
  .sec>.wrap>.inglist{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-family:var(--display);font-weight:700}
.sec--dark .ticks li::before{color:#7fce9f}

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

/* ---- numbered steps */
.steps{display:grid;gap:0;margin:0 0 1.2em;counter-reset:s;border:1px solid var(--line)}
.step{position:relative;background:var(--panel);padding:22px 24px 22px 74px;border-bottom:1px solid var(--line-3)}
.step:last-child{border-bottom:0}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:24px;top:22px;width:34px;height:34px;
  display:grid;place-items:center;
  background:var(--ink);color:var(--panel);
  font-family:var(--display);font-weight:700;font-size:1.02rem;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: hairline border, square corners, NO fill */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:transparent;border:1px solid var(--line-2);border-radius:0;padding:24px 22px 22px}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--panel .card{border-color:var(--line-3)}
.sec--dark .card{border-color:#4a545e}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--panel);border:1px solid var(--line-3);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--amber-d)}
.callout p:last-child{margin:0}
.alert{background:#f6ecd8;border:1px solid #e0cda4;border-left:4px solid var(--warn);padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.32rem;font-weight:400;line-height:1.5;color:var(--ink);border-left:4px solid var(--amber);padding:4px 0 4px 24px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9688rem;font-style:normal;color:var(--ink-3);margin-top:8px}
.keypoints{background:transparent;border:1px solid var(--line-2);border-top:4px solid var(--amber);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items: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, so a
   .tablewrap holding a 520px-min table keeps its column 520px wide however
   narrow the grid is. min-width:0 is the fix and it belongs at every width. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line-3);background:var(--panel)}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;text-align:center;border:1px solid #4a545e}
.stats div{padding:20px 14px;border-right:1px solid #4a545e}
.stats div:last-child{border-right:0}
.stats div b{display:block;font-family:var(--display);font-size:2.1rem;font-weight:700;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9688rem;color:#b3bcc5;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1fr 0.8fr 1.5fr;border:1px solid var(--line);background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line-3);font-size:.99rem}
.versus>div:nth-child(3n+1){font-family:var(--display);background:#f4eee0}
.versus__h{background:var(--ink)!important;color:var(--panel);font-family:var(--display);font-weight:700;font-size:.94rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:0;border:1px solid var(--line-2)}
/* Same family as the .split fix above: a grid item's default min-width is
   auto, and .ing__dose is white-space:nowrap, which sets the floor. */
.inglist>*{min-width:0}
.ingcard{background:transparent;padding:24px 26px;border-bottom:1px solid var(--line)}
.ingcard:last-child{border-bottom:0}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9688rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-family:var(--display);font-size:.9375rem;font-weight:600;color:var(--panel);background:var(--ink-2);padding:4px 12px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap: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:0;position:relative;padding:0}
/* The featured pack is marked by a 3px ink frame and a coloured head band, not
   by a lift: a margin-based lift makes the card taller than its siblings and
   breaks the one-height rule the pricing row is measured against.
   The frame is an OUTLINE rather than a thicker border. A 3px border in place
   of the siblings' 1px shrinks this card's content box by 4px, and because the
   button is pushed down with `margin-top:auto` that lifted its baseline 2px
   above the other two -- measured at 1440, invisible to every static check and
   a fail on responsive.md's one-baseline rule. An outline paints in the same
   place and takes no space at all. It is also not a shadow, which matters on a
   site whose depth lever is that nothing here casts one. */
.card--pack.featured{outline:3px solid var(--ink);outline-offset:-3px;border-color:var(--ink)}
.pack__head{background:#efe6d2;border-bottom:1px solid var(--line-3);padding:14px 20px;display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:var(--ink)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:var(--panel)}
.pack__head b{font-family:var(--display);font-size:1.16rem;font-weight:700}
.pack__head span{font-size:.875rem;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--amber-d);color:#fff;font-family:var(--display);font-size:0.875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 13px;z-index:3}
.pack__body{display:flex;flex-direction:column;flex:1;padding:22px 20px 24px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,164px);object-fit:contain;margin-inline:auto;margin-bottom:16px}
.pack__per{font-family:var(--display);font-size:2.4rem;font-weight:700;color:var(--ink);line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1rem;font-weight:600;top:-.72em}
.pack__unit{display:block;text-align:center;font-size:.9062rem;color:var(--ink-3);margin:6px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__was{color:var(--ink-3);text-decoration:line-through}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9688rem}
.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-family:var(--display);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:.875rem;color:var(--ink-3)}
.buy__note{font-size:.9688rem;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-3)}
.shots img{width:100%}
.shots figcaption{padding:16px 18px;border-top:1px solid var(--line-3)}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--ink)}
.shots figcaption span{font-size:.9688rem;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:0;margin:0 0 1.2em;border:1px solid var(--line)}
.badgewall figure{margin:0;text-align:center;background:var(--panel);padding:20px 16px;border-right:1px solid var(--line-3);border-bottom:1px solid var(--line-3)}
.badgewall img{width:72px;height:72px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:1rem;margin-bottom:4px;color:var(--ink)}
.badgewall span{font-size:.9062rem;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:.9688rem}
.meter__bar{height:12px;background:var(--tint);border:1px solid var(--line-2);overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--amber)}
.stars{color:#c28d18;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);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.34rem;color:var(--amber-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.0625rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token that would otherwise size its ancestor. `anywhere`
   rather than `break-word` because it also lowers the element's MIN-CONTENT. */
.refs li,.refs li a{overflow-wrap:anywhere}

.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line-3);border-left:4px solid var(--amber);padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:var(--ink);color:var(--panel);font-family:var(--display);font-weight:700;font-size:1.06rem}
.byline b{display:block;margin-bottom:6px;color:var(--ink)}
.byline p{font-size:.9938rem;color:var(--ink-2);margin:0}

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

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;text-align:left;border:1px solid var(--line-2)}
.rel a{display:block;background:transparent;border-right:1px solid var(--line-2);padding:22px 24px;text-decoration:none;color:var(--ink);transition:background .18s ease}
.rel a:last-child{border-right:0}
.rel a:hover{background:var(--panel)}
.rel b{display:block;font-family:var(--display);font-size:1.1rem;color:var(--ink);margin-bottom:5px}
.rel span{font-size:.9688rem;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-family:var(--display);font-weight:600;font-size:1rem;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:0;background:var(--panel);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:0.9375rem;color:var(--ink-3);margin-top:5px}

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

/* ---- footer: a closing panel whose guarantee is set very large beside the
   page index, then the contact card, the seals and the legal rail.
   House rule 10: nothing in here is under 16px except the column headings,
   which sit at 15px because they are uppercase and letter-spaced. */
footer{background:var(--panel);border-top:1px solid var(--line)}
.fpanel{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.6fr);gap:44px;padding:52px 0 44px;align-items:start}
.fguar{border-right:1px solid var(--line-3);padding-right:40px}
.fguar__eye{display:block;font-family:var(--display);font-size:0.9375rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-d)}
.fguar__n{display:block;font-family:var(--display);font-size:clamp(5.4rem,3rem + 8vw,9rem);font-weight:700;line-height:.86;color:var(--ink);letter-spacing:-.04em;margin:8px 0 2px}
.fguar__u{display:block;font-family:var(--display);font-size:1.28rem;color:var(--ink-2);margin-bottom:16px}
.fguar__p{font-size:1rem;color:var(--ink-2)}
.fguar__sm{font-size:1rem;color:var(--ink-3);margin:14px 0 0}
.findex{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.findex__col{min-width:0}
.fh{font-family:var(--display);font-size:0.9375rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.findex ul{list-style:none;margin:0 0 20px;padding:0}
.findex li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back. */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:1rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--amber-d)}
.fcard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 30px;border-top:1px solid var(--line-3);padding:28px 0 24px}
.fbrand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:1.7rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1;grid-column:1/-1}
.fbrand em{font-style:normal;color:var(--amber-d)}
.fbrand img{width:40px;height:40px}
.frole{font-size:1rem;color:var(--ink-2);margin:0 0 .7em;grid-column:1/-1}
.fcard p{font-size:1rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--ink)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--line-3)}
.fseals img{width:42px;height:42px;object-fit:contain}
.fseals span{font-size:1rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 26px}
.fpay img{width:228px;height:auto}
.fpay span{font-size:1rem;color:var(--ink-3)}
.disc{background:var(--tint);border-top:1px solid var(--line);padding:28px 0 32px}
.disc p,.disc li{font-size:1rem;color:var(--ink-2)}
.disc b{color:var(--ink)}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;background:var(--amber)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:1rem}

/* ---- sticky buy bar. Declared at the top level, with no display gate, so it
   exists on desktop as well as on the phone (house rule 8). */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ink);color:var(--panel);transform:translateY(105%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;padding:12px 22px}
.buybar__t{font-size:.9688rem;min-width:0}
.buybar__t b{display:block;font-size:1.02rem;color:var(--panel)}
.buybar__t span{color:#bdb4a2}
.buybar .btn{margin-left:auto;flex:0 0 auto}

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

/* ---- responsive */
@media (max-width:1120px){
  .menu{gap:0 18px}
  .menu a{font-size:.95rem}
  .findex{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--navh:96px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__top{flex-wrap:wrap;gap:0}
  .brand{margin-inline:-22px 0}
  .menu{display:none;order:3;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px;width:100%;min-height:0;border-top:1px solid var(--line)}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line);width:100%}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .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))}
  .stats div:nth-child(2n){border-right:0}
  .stats div:nth-child(-n+2){border-bottom:1px solid #4a545e}
  .fpanel{grid-template-columns:1fr;gap:34px}
  .fguar{border-right:0;border-bottom:1px solid var(--line-3);padding-right:0;padding-bottom:30px}
  .final--media{grid-template-columns:1fr;gap:20px}
  .rel{grid-template-columns:1fr}
  .rel a{border-right:0;border-bottom:1px solid var(--line-2)}
  .rel a:last-child{border-bottom:0}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:46px 0}
  .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))}
  .badgewall figure:nth-child(2n){border-right:0}
  .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 white-space: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.
     On a phone let it start its own line and wrap its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr}
  .figures div{border-right:0;border-bottom:1px solid var(--line-3)}
  .figures div:last-child{border-bottom:0}
  .findex{grid-template-columns:1fr;gap:18px}
  .fcard{grid-template-columns:1fr}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .badgewall{grid-template-columns:1fr}
  .badgewall figure{border-right:0}
  .brand{padding:12px 18px;gap:10px}
  .bw b{font-size:1.24rem}
}

/* ---- hero: sticky, centred product column -------------------------------
   The pack column sticks and stays vertically centred until the hero scrolls
   past. `.hero` clips only the X axis: ANY non-visible overflow on an ancestor
   becomes the scrollport position:sticky resolves against, so `overflow:clip`
   on both axes would silently kill this (pitfall 65). */
@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}
}
/* 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 ==== */

/* ==== 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*/
/* ==== memohonees.com home surface + hero motif ============================
   Slot: motif "rise", card radius 16, control radius 10, depth "deep ambient
   only, very diffuse", ribbon "tab above the card".

   Paint only -- radius, shadow, background, colour, transform, animation and
   transition move no box -- so this sits below the critical marker and a
   restamp is enough to ship it.

   Every token here carries an mh- prefix. modern_surface.py re-appends its own
   :root{--radius/--shadow/--lift} after this block on every build and would
   win any name it shares, so this block shares none and beats it on selector
   specificity instead: body:has(.hero) .card is 0,2,1 against its 0,1,0.

   Depth is ONE stop, wide and soft, tinted with this site's own ink
   (36,29,18) -- never neutral black -- which is what separates it from the
   two-stop contact+ambient shadow the estate default lays down. */
:root{
  --mh-rc:16px;                                     /* cards and panels */
  --mh-rq:10px;                                     /* buttons, chips */
  --mh-depth:0 22px 60px rgba(36,29,18,.15);
  --mh-depth-hi:0 30px 74px rgba(36,29,18,.22);
  --mh-cta:0 16px 38px rgba(125,86,11,.30);         /* tinted with the amber */
  --mh-cta-hi:0 22px 50px rgba(125,86,11,.40);
}

/* ---- surfaces */
body:has(.hero) .card,
body:has(.hero) .step,
body:has(.hero) .keypoints,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .toc,
body:has(.hero) .byline,
body:has(.hero) .posts article,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .tablewrap,
body:has(.hero) .faq,
body:has(.hero) .ingcard,
body:has(.hero) .final,
body:has(.hero) .split__img,
body:has(.hero) .answer{border-radius:var(--mh-rc);box-shadow:var(--mh-depth)}

.hero__card{border-radius:var(--mh-rc);box-shadow:var(--mh-depth)}
.hero__copy>.factpills li{border-radius:var(--mh-rq)}
/* the three-figure strip reads as one panel, so its cells are clipped to the
   panel's corner rather than each carrying a radius of its own */
.hero__copy>.figures{border-radius:var(--mh-rc);overflow:hidden;box-shadow:var(--mh-depth)}

/* ---- controls: 10px, and everything clickable answers the pointer */
body:has(.hero) .btn{
  border-radius:var(--mh-rq);
  transition:background .18s ease,background-image .18s ease,color .18s ease,
             box-shadow .22s ease,transform .22s ease;
}
body:has(.hero) .btn:hover{transform:translateY(-2px)}
body:has(.hero) .btn:active{transform:translateY(0)}
body:has(.hero) .btn:focus-visible,
body:has(.hero) .card--pack a:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* The buying CTA is the only gradient on the page. The secondary stays the
   flat keyline it already was, so the pair reads as two weights rather than
   two buttons. .btn--honey:hover sets the `background` SHORTHAND, which would
   blank a gradient, so the hover state restates both halves. */
body:has(.hero) .btn--honey{
  background-color:#7d560b;
  background-image:linear-gradient(177deg,#a8740f 0%,#7d560b 54%,#6a4708 100%);
  box-shadow:var(--mh-cta);
}
body:has(.hero) .btn--honey:hover{
  background-color:#8c6109;
  background-image:linear-gradient(177deg,#bb840f 0%,#8c6109 54%,#77500a 100%);
  color:#fff;
  box-shadow:var(--mh-cta-hi);
}

/* ---- pricing row */
body:has(.hero) .card--pack{border-radius:var(--mh-rc);box-shadow:var(--mh-depth)}
/* The card keeps overflow:visible so the ribbon can hang above it, so the head
   is given the corner itself instead of being clipped to one. 1px in from the
   card's radius because the card carries a 1px border. */
body:has(.hero) .pack__head{border-radius:15px 15px 0 0}
body:has(.hero) .card--pack.featured{
  background-image:linear-gradient(180deg,#fffdf5 0%,#fbf7ec 44%);
  box-shadow:var(--mh-depth-hi);
}
body:has(.hero) .card--pack:hover{box-shadow:var(--mh-depth-hi);transform:translateY(-2px)}
body:has(.hero) .card--pack.featured:hover{box-shadow:0 38px 86px rgba(36,29,18,.26)}
/* the ribbon: a tab standing above the card's top edge, not a corner sticker */
body:has(.hero) .pack__flag{
  top:-14px;right:auto;left:22px;
  border-radius:8px 8px 0 0;
  box-shadow:0 10px 22px rgba(36,29,18,.20);
}
body:has(.hero) .card--pack.featured .pack__flag{
  background-image:linear-gradient(177deg,#a8740f 0%,#7d560b 100%);
}

/* ---- hero motif: RISE ----------------------------------------------------
   Warmth lifting off the base of the pack, drifting up and fading out.

   It lives on the media column's two pseudo-elements and never on the <img>,
   which is the LCP element and is preloaded. .hero__card is an opaque ivory
   panel 450x488, so both layers are sized far larger than it -- the plume is
   832x850 -- and read around its flanks and above and below it instead of
   disappearing behind it. Only transform and opacity are animated; the blurs
   are static.

   Slow on purpose: 27s and 41s. This is a capsule taken once a morning for
   two months, not an energy drink.

   mhHoneyRise and mhHoneyBed -- the stylesheet already owns mhMelt and
   mhDrift, and a redefined keyframe name silently replaces the original. */
.hero .hero__media::before{
  top:auto;bottom:-4%;height:106%;width:166%;
  border-radius:50% 50% 44% 44%/60% 60% 40% 40%;
  background:linear-gradient(0deg,rgba(226,169,46,.52) 0%,rgba(226,169,46,.32) 30%,
             rgba(226,169,46,.14) 58%,transparent 84%);
  filter:blur(32px);
  animation:mhHoneyRise 27s ease-in-out infinite;
}
.hero .hero__media::after{
  top:auto;bottom:1%;left:50%;width:124%;height:38%;aspect-ratio:auto;
  translate:-50% 0;border-radius:50%;
  background:radial-gradient(60% 52% at 50% 72%,rgba(176,125,22,.36) 0%,
             rgba(226,169,46,.22) 46%,transparent 78%);
  filter:blur(22px);
  animation:mhHoneyBed 41s ease-in-out infinite;
}
/* opacity is 0 at both ends, so the loop restarts while the plume is invisible
   and there is no jump back down */
@keyframes mhHoneyRise{
  0%{opacity:0;transform:translateY(13%) scaleY(.9)}
  22%{opacity:.5;transform:translateY(4%) scaleY(.97)}
  58%{opacity:.4;transform:translateY(-9%) scaleY(1.06)}
  100%{opacity:0;transform:translateY(-22%) scaleY(1.14)}
}
@keyframes mhHoneyBed{
  0%,100%{opacity:.42;transform:translateY(0) scale(1)}
  50%{opacity:.7;transform:translateY(-2%) scale(1.06)}
}

@media (prefers-reduced-motion:reduce){
  /* the block above the marker switches these off with opacity:0, which leaves
     the hero with no motif at all; this keeps the warmth, just still */
  .hero .hero__media::before{animation:none!important;opacity:.34!important;transform:none!important}
  .hero .hero__media::after{animation:none!important;opacity:.5!important;transform:none!important}
  body:has(.hero) .btn,
  body:has(.hero) .card--pack{transition:none!important}
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn:active,
  body:has(.hero) .card--pack:hover{transform:none!important}
}
/* ==== end memohonees.com home surface ==== */
/*!SITE-HOME-PAINT-END*/

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

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

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

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