/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Zilla Slab Fallback";src:local("Georgia");font-weight:400;size-adjust:98.16%;ascent-override:96.17%;descent-override:26.08%;line-gap-override:0.00%}
@font-face{font-family:"Zilla Slab Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:85.95%;ascent-override:109.83%;descent-override:29.78%;line-gap-override:0.00%}
@font-face{font-family:"Manrope Fallback";src:local("Arial");font-weight:400;size-adjust:104.27%;ascent-override:102.23%;descent-override:28.77%;line-gap-override:0.00%}
@font-face{font-family:"Manrope Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:101.42%;ascent-override:105.11%;descent-override:29.58%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   memohoeney.com - MemoHoney, a once-daily memory and focus capsule.
   Design slot: batch13_assignments.py row 262.

     type     Zilla Slab (slab serif: headings, numbers, emphasis)
              over Manrope (geometric sans: everything read at length)
     ground   pale birch, with ONE deep-olive rule running the full height
              of the document
     cards    fill-on-hover, radius 10 as authored, hairline at rest
     depth    hairline at rest, a layered lift only on hover
     layout   hero 7/5 - copy LEFT, the bottle RIGHT in a tall recessed
              well - and a two-across rhythm everywhere below it
     motion   the cell-glow ring around the bottle (hero_motifs.py)

   Honey is the product's own colour and stays: it is what the band across
   the bottle is printed in. Everything else here is birch and olive.

   Everything above CRITICAL-END is inlined into every page head by tpl.py,
   INCLUDING the hero's phone layout - a phone that paints the desktop hero
   and then relays it is the estate's largest mobile-CLS fault.
   ========================================================================== */

:root{
  --bg:#f2eee2;            /* pale birch, the page ground */
  --paper:#fbf9f2;         /* the lighter slab cards and panels sit on */
  --tint:#e9e3d2;          /* the alternating section band */
  --ink:#282d1a;           /* deep olive, all reading text */
  --ink-2:#3b4526;         /* the rule, the headings, the chrome */
  --mut:#575c42;           /* secondary text, still 4.5:1 on birch */
  --line:#cfc8b2;          /* the hairline every surface rests on */
  --line-2:#ded7c3;
  --accent:#b8860f;        /* honey, off the band on the bottle */
  --accent-2:#e0a92a;      /* the lighter stop of the one CTA gradient */
  --accent-d:#785606;      /* honey dark enough to carry small text: 5.2:1 on the tint band (#8a6409 was 4.19) */
  --on-accent:#241c05;     /* ink used ON honey, never white */

  --r:10px;                /* the card radius the slot asks for */
  --radius:10px;           /* modern_surface.py raises this to the house floor */
  --radius-sm:8px;         /* buttons, inputs, chips */

  --shadow:0 1px 2px rgba(40,45,26,.05), 0 6px 18px rgba(40,45,26,.06);
  --lift:0 2px 6px rgba(40,45,26,.09), 0 16px 34px rgba(40,45,26,.14);

  --wrap:1180px;
  --navh:83px;             /* = the rendered masthead at 1440, so site.js's measured value changes nothing on load */
  --rule-x:24px;           /* how far OUTSIDE the text column the rule stands */
}

/* Metric-matched fallbacks. The Google fonts arrive after the first paint, and
   Georgia at weight 600 runs 19% wider than Zilla Slab: the home H1 painted on
   five lines, then dropped to four when the slab arrived, and everything under
   it jumped (CLS 0.12-0.19 at 1440). size-adjust scales each local fallback to
   the web font's measured advance width (a 40px sample line, Chromium, Windows:
   Zilla 600 4064 / Georgia Bold 4848; Zilla 400 4017 / Georgia 4187; Manrope 400
   4238 / Segoe UI 4153 / Roboto 3840; Manrope 600 4392 / Segoe UI Semibold 4282),
   so the fallback wraps where the web font will. Line heights are unitless and
   unaffected. */
@font-face{font-family:"Zilla Slab Fallback";src:local("Georgia Bold"),local("Georgia-Bold");
  font-weight:600 800;size-adjust:84%}
@font-face{font-family:"Zilla Slab Fallback";src:local("Georgia");font-weight:300 599;size-adjust:96%}
@font-face{font-family:"Manrope Fallback";src:local("Segoe UI"),local("SegoeUI");font-weight:300 599;
  size-adjust:102%}
@font-face{font-family:"Manrope Fallback";src:local("Segoe UI Semibold"),local("SegoeUI-Semibold");
  font-weight:600 800;size-adjust:102.6%}
@font-face{font-family:"Manrope Fallback R";src:local("Roboto"),local("Roboto-Regular");size-adjust:110%}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--navh) + 18px);
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  position:relative;
  background:var(--bg);
  color:var(--ink);
  font-family:Manrope,"Manrope Fallback","Manrope Fallback R","Segoe UI",system-ui,sans-serif;
  font-size:17px;
  line-height:1.72;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

/* THE RULE. One deep-olive line, two pixels wide, running from the top of
   the document to the bottom of it. It is the slot's ground lever and the
   only vertical thing on the page: every section, the header and the footer
   are measured against it. It stands a fixed distance in from the left edge
   of the text column, so on a phone it becomes the margin rule of a
   notebook and on a wide monitor it sits just outside the copy. */
body::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  /* 7px floor, not 14: on a phone the wrap gutter is 18px, and a 14px rule
     sat 2-3px off every card edge, reading as a line scraping the cards. */
  left:max(7px, calc(50% - (var(--wrap) / 2) - var(--rule-x)));
  width:2px;
  background:var(--ink-2);
  opacity:.92;
  z-index:3;
  pointer-events:none;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--ink-2);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-d)}

h1,h2,h3,h4,.brand b,.pack__per,.stats b,.figures b,.fcta__h{
  font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.005em;
  color:var(--ink-2);
}
h1{font-size:clamp(1.95rem,1.3rem + 1.85vw,2.65rem);margin:.15em 0 .45em}
h2{font-size:clamp(1.6rem,1.2rem + 1.35vw,2.2rem);margin:0 0 .45em}
h3{font-size:1.2rem;margin:0 0 .4em}
h4{font-size:1.05rem;margin:0 0 .35em}
p{margin:0 0 1.05em}

.wrap{width:min(var(--wrap), calc(100% - 36px));margin-inline:auto;position:relative;z-index:1}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink-2);color:#fff;
  padding:12px 18px;z-index:99;border-radius:0 0 var(--radius-sm) 0}
.skip:focus{left:0}

.eyebrow{
  display:inline-block;
  font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;
  font-size:14px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-d);
  margin-bottom:.35em;
}

/* --------------------------------------------------------------- buttons
   Rule 11's solid/gradient pair. The primary carries the one CTA gradient
   on the site; the secondary stays flat and solid so the two read as two
   weights rather than the same button drawn twice.

   Guarded at .btn.btn--x, specificity (0,2,0), because these buttons are
   <a> elements and a later `.final a` at (0,1,1) would otherwise outrank a
   single-class colour and repaint the text in the link colour. That is how
   a primary CTA ends up the same colour as its own fill. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;
  font-size:17px;font-weight:600;letter-spacing:.01em;
  padding:13px 24px;border-radius:var(--radius-sm);
  border:2px solid transparent;
  text-decoration:none;cursor:pointer;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:var(--on-accent);border-color:var(--accent-d);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease,
             border-color .18s ease, color .18s ease;
}
.btn.btn--gold,a.btn.btn--gold{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:var(--on-accent);
  border-color:var(--accent-d);
  box-shadow:var(--shadow);
}
.btn.btn--gold:hover,a.btn.btn--gold:hover{
  background:linear-gradient(180deg,#eab63c,#c8930f);
  color:var(--on-accent);
  box-shadow:var(--lift);transform:translateY(-2px);
}
.btn.btn--ghost,a.btn.btn--ghost{
  background:var(--ink-2);color:#f6f3e8;border-color:var(--ink-2);
}
.btn.btn--ghost:hover,a.btn.btn--ghost:hover{
  background:#2c3419;color:#fff;box-shadow:var(--lift);transform:translateY(-2px);
}
.btn.btn--outline,a.btn.btn--outline{
  background:transparent;color:var(--ink-2);border-color:var(--ink-2);
}
.btn.btn--outline:hover,a.btn.btn--outline:hover{
  background:var(--ink-2);color:#f6f3e8;
}
.btn--lg{padding:16px 30px;font-size:18px}
.btn--wide{width:100%}
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{
  outline:3px solid var(--accent-d);outline-offset:2px;
}

/* --------------------------------------------------------------- topline */
.util{background:var(--ink-2);color:#e8e4d3;font-size:15px;line-height:1.5}
.util__row{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;
  padding-block:9px;
}
.util__item{display:inline-flex;align-items:center;gap:.4em}
.util__item b{color:#fff;font-weight:600}
.util__item--role{
  font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#f0c14b;font-size:14.5px;
}
.util__item--tel{margin-left:auto}
.util a{color:#fff;text-decoration:underline}
.util a:hover{color:#f0c14b}
/* Four items fit one row at the 1180 wrap with ~120px to spare. Below 1200
   the routine item goes, and on a phone only who is selling and the order line
   stay (760 block). Every breakpoint leaves a wide margin on purpose: a row
   sitting within a few pixels of its width flips between one line and two as
   the web fonts swap in, and that flip moved the whole page 25px down and back
   (CLS 0.48 at 375). */
@media (max-width:1200px){.util__item--trim{display:none}}

/* --------------------------------------------------------------- masthead
   One wide birch row closed by an olive rule. Nothing floats above it and
   nothing is boxed inside it: the identity, the destinations and a single
   outlined Order button share one rank. */
.nav{
  position:sticky;top:0;z-index:40;
  background:var(--bg);
  border-bottom:3px solid var(--ink-2);
  transition:transform .26s ease, box-shadow .26s ease;
}
.nav__top{
  display:flex;align-items:center;gap:22px;
  padding-block:13px;min-height:74px;
}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-size:25px;color:var(--ink-2);font-weight:700;letter-spacing:-.01em}
.bw b em{font-style:normal;color:var(--accent-d)}
.bw small{font-size:14.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--mut)}

.menu{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;
  list-style:none;margin:0;padding:0;margin-left:auto;
}
.menu a{
  display:inline-block;padding:7px 2px;
  font-size:16px;font-weight:600;color:var(--ink);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover,.menu a[aria-current]{color:var(--accent-d);border-bottom-color:var(--accent)}
.menu__more{display:none}
.nav__buy{flex:0 0 auto;padding:11px 20px;font-size:16px}
.burger{display:none;background:none;border:0;padding:9px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink-2);margin:5px 0}

/* --------------------------------------------------------------- hero
   7 / 5. Copy left, the bottle right in a well that is INSET on all four
   sides of .hero__media, so the cell-glow ring - sized at 116% of the media
   column - has birch to be seen against instead of being covered by an
   opaque plate. */
.hero{
  position:relative;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:34px 0 48px;
}
.hero__grid{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:48px;
  align-items:start;
}
.hero__copy{max-width:63ch}
.hero h1{margin-top:.1em}
.nw{white-space:nowrap}

.answer{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:5px solid var(--accent);
  border-radius:var(--radius);
  padding:18px 22px;
  margin:0 0 20px;
}
.answer p{margin:0 0 .7em;font-size:17.5px}
.answer p:last-child{margin-bottom:0}
.answer b{font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-weight:600}

.hero__road{color:var(--mut);font-size:17px;margin-bottom:22px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.hero__sub{
  display:flex;flex-wrap:wrap;gap:6px 22px;
  margin:0 0 18px;padding:0;
  font-size:15.5px;color:var(--mut);
}
.hero__sub span{display:inline-flex;align-items:center;gap:.45em}
.hero__sub span::before{content:"";width:7px;height:7px;background:var(--accent);
  border-radius:50%;flex:0 0 auto}

.factpills{
  display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;
  list-style:none;margin:0 0 20px;padding:0;
  font-size:15.5px;
}
.factpills li{display:flex;gap:.5em;align-items:baseline;color:var(--ink)}
/* An odd last pill spans both columns instead of leaving a hole beside it. */
.factpills li:last-child:nth-child(odd){grid-column:1/-1}
.factpills b{font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;color:var(--accent-d);font-weight:600;
  white-space:nowrap;flex:0 0 auto}

.figures{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  border-top:1px solid var(--line);padding-top:16px;
}
.figures div{display:flex;flex-direction:column;gap:2px}
.figures b{font-size:1.5rem;color:var(--ink-2)}
.figures span{font-size:15px;color:var(--mut);line-height:1.45}

.hero__media{position:relative;min-height:440px;display:flex;align-items:center;
  justify-content:center;padding:26px}
.hero__card{
  position:relative;z-index:2;
  width:100%;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 22px 14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),
             0 1px 2px rgba(40,45,26,.06), 0 18px 38px rgba(40,45,26,.13);
}
.hero__card img{width:100%;height:auto;position:relative;z-index:3}
.hero__cap{
  margin:10px 0 0;text-align:center;
  font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;
  font-size:14.5px;letter-spacing:.05em;color:var(--mut);
}

/* The phone hero, ABOVE the critical marker on purpose. A phone that paints
   the desktop hero from the inlined block and relays it when the async sheet
   lands is a 0.9 CLS on its own.

   `.hero__copy{display:contents}` dissolves the copy column so that its
   children become grid items in their own right and can be ordered one at a
   time. Without it the whole column is a single item and the product lands
   BELOW every fact block in it: measured at y=1892 on a 390px screen, which is
   the third screenful and exactly the defect house rule 12 exists to stop. The
   order below is eyebrow, headline, BOTTLE, Quick Answer, then the rest. */
@media (max-width:1040px){
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero__copy > .eyebrow{order:1}
  .hero h1{order:2;margin-bottom:.25em}
  .hero__media{min-height:0;padding:4px 0 0;order:3}
  .hero .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:7}
  .factpills{order:8}
  .hero .figures{order:9}
  .hero__card{max-width:420px;margin-inline:auto}
  .figures{grid-template-columns:1fr 1fr}
}
/* The nav row sheds, it never wraps. At 768 the ten destinations ranked onto
   two lines and made the masthead 130px tall, which is the defect house rule
   11 calls out by name. Below 900 the menu goes behind the burger instead. */
@media (max-width:900px){
  .menu{display:none}
  .nav__top{gap:10px;min-height:64px}
  .nav__buy{margin-left:auto;padding:10px 14px;font-size:15px}
  .burger{display:block;padding:9px 0 9px 6px}
  .menu.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:3px solid var(--ink-2);
    padding:8px 18px 14px;max-height:72vh;overflow:auto;
  }
  .menu.open .menu__more{display:block}
  .menu.open li{border-bottom:1px solid var(--line-2)}
  .menu.open a{display:block;padding:12px 2px;font-size:17px;border:0}
}
@media (max-width:760px){
  .hero{padding:30px 0 38px}
  .bw b{font-size:21px}
  .bw small{display:none}
  .brand svg{width:34px;height:34px}
  .factpills{grid-template-columns:1fr}
  .figures{grid-template-columns:1fr;gap:12px}
  .util__row{gap:4px 16px;font-size:14.5px;justify-content:space-between}
  .util__item--tel{margin-left:0}
  .util__item--win{display:none}
  .hero__cta .btn{width:100%}
}
@media (min-width:901px) and (max-width:1160px){
  .menu{gap:4px 13px}
  .menu a{font-size:15.5px}
}
/* On a phone the two items are laid out as two rows ALWAYS, rather than one
   row that may or may not fit depending on which font has arrived. */
@media (max-width:560px){
  .util__lbl{display:none}
  .util__row{gap:2px 12px;padding-block:7px}
  .util__item{flex:1 0 100%}
}

/* The inner-page head and the section shell. These are above the fold on
   every page that is not the home page, so they are inlined with the hero
   rather than arriving with the async sheet. */
.sec{padding:52px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--paper);border-block:1px solid var(--line)}
.sec--olive{background:var(--ink-2);color:#ece8d8}
.sec--olive h2,.sec--olive h3{color:#fff}
.sec--olive .eyebrow{color:#f0c14b}
.sec--olive a{color:#f0c14b}
.sec--olive p{color:#e4e0cf}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:74ch;margin-bottom:26px}
.sec__head p{color:var(--mut);margin-bottom:0}
.sec--olive .sec__head p{color:#e4e0cf}   /* --mut on olive read 1.46:1 */
.phead{padding:38px 0 14px}
.phead h1{margin-top:.1em}
.crumbs{font-size:14.5px;color:var(--mut);margin:0 0 .6em}
.crumbs a{color:var(--mut)}
.lead{font-size:19px;line-height:1.68;color:var(--ink);max-width:74ch}
@media (max-width:760px){.sec{padding:38px 0}.phead{padding:26px 0 10px}}
/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@media (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;}
}
/* --- end of the copied hero responsive rules --- */

/* ---- hero motif -- cell-glow ---------------------------------------- */
/* The ring starts pulsing 5s after load, holding its first keyframe until then
   (fill-mode both). A scale animation that is already running when the async
   sheet or a font lands is reported as a 0.05 layout shift of the ::before on
   every home load at 1440; held still through the load window, it is not. */
.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(182deg,#f2eee2,#efe2c1 52%,#f2eee2)}.hero__media::before{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:0;left:50%;top:48%;width:116%;aspect-ratio:1;translate:-50% -50%;z-index:1;border:2px solid rgba(224,169,42,0.45);animation:b13CellGlow 13s cubic-bezier(.3,.8,.35,1) 5s infinite both}.hero__media::after{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:0;left:50%;top:48%;width:67%;aspect-ratio:1;translate:-50% -50%;filter:blur(12px);background:radial-gradient(closest-side,rgba(224,169,42,0.28),transparent 70%);animation:b13CellGlowGlow 13s ease-in-out infinite}@keyframes b13CellGlow{0%,100%{transform:scale(.74);opacity:.18;filter:blur(6px)}38%,66%{transform:scale(1.06);opacity:0.56;filter:blur(0)}}@keyframes b13CellGlowGlow{0%,100%{opacity:.18}54%{opacity:0.50}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/* --- first-screen layout rules, COPIED above the marker (CLS) -----------
   The inlined block painted inner pages and blog posts without these, then
   relaid them when the async sheet landed: 0.12 on every blog post at 1440
   (the article column went from 1180px to 76ch and the TOC reflowed) and
   0.12 on who-its-for (the first split and its cards). These are COPIES of
   rules that still stand below the marker in the same order, so the cascade
   is unchanged and the first paint is already the final one. Edit both. */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card,.ingcard,.step{background:transparent;border:1px solid var(--line);padding:22px 24px;
  border-radius:var(--radius)}
.card h3,.ingcard h3,.step h3{margin-bottom:.35em}
.card p:last-child,.ingcard p:last-child,.step p:last-child{margin-bottom:0}
.steps{display:grid;gap:22px;grid-template-columns:repeat(2,1fr);counter-reset:st}
.step{position:relative;padding-top:26px}
.ticks{list-style:none;margin:0 0 1em;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:.5em;font-size:17px}
.callout{background:var(--paper);border:1px solid var(--line);
  border-left:5px solid var(--accent);padding:18px 22px;margin:22px 0;border-radius:var(--radius)}
.alert{background:#f6efdc;border:1px solid #ddc98a;border-left:5px solid var(--accent-d);
  padding:18px 22px;margin:22px 0;border-radius:var(--radius)}
.callout b,.alert b{display:block;font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:1.08rem;
  margin-bottom:.3em}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);margin-bottom:1em}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
th{font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:15px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:var(--ink-2);border-bottom:0}
td{font-size:16px;line-height:1.6}
.split{display:grid;grid-template-columns:5fr 7fr;gap:34px;align-items:start;margin-bottom:28px}
.split--flip{grid-template-columns:7fr 5fr}
.split--flip .split__img{order:2}
.split--tall{grid-template-columns:4fr 8fr}
.split--band{grid-template-columns:1fr}
.split__img img{width:100%;border-radius:var(--radius);border:1px solid var(--line)}
@media (min-width:761px){
  .split__img img{max-height:420px;width:auto;margin-inline:0}
  .split--tall .split__img img{max-height:520px}
  .split--band .split__img img{max-height:none;width:100%}
}
.split__body>:last-child{margin-bottom:0}
.article{max-width:76ch}
.article h2{margin-top:1.5em}
.article h3{margin-top:1.2em}
.article figure{margin:26px 0}
.postmeta{font-size:15px;color:var(--mut);margin:0 0 .6em}
.toc{background:var(--paper);border:1px solid var(--line);padding:20px 24px;margin:0 0 28px;
  border-radius:var(--radius)}
.toc b{display:block;font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);margin-bottom:.5em}
.toc ol{margin:0;padding-left:1.25em}
.toc li{margin-bottom:.35em;font-size:17px}
.toc li a,.tap{display:inline-block;min-height:24px}
@media (max-width:860px){.split,.split--tall,.split--flip{grid-template-columns:1fr;gap:20px}}
@media (max-width:760px){.g2,.g3,.steps,.posts{grid-template-columns:1fr}}
/* --- end of the copied first-screen rules --- */

/* Tables on a phone. NEW rules rather than copies, kept above the marker
   because they decide a table's height and some tables sit on a first screen.
   A two-column key/value table fits 358px, so it drops the blanket 520px
   floor that made it scroll sideways and cut its answers mid-word. Three
   columns or more (blocks.table adds class "stack" and a data-label per
   cell) become one labelled card per row below 600px, so no column is ever
   off-screen with nothing to show it exists. */
table:not(:has(th:nth-child(3))):not(:has(td:nth-child(3))){min-width:0}
@media (max-width:600px){
  table.stack{min-width:0}
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{padding:12px 16px;border-bottom:1px solid var(--line-2)}
  table.stack tbody tr:last-child{border-bottom:0}
  table.stack td{padding:2px 0;border:0}
  table.stack td:first-child{font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-weight:600;
    font-size:17px;color:var(--ink-2);padding-bottom:4px}
  table.stack td:not(:first-child)::before{content:attr(data-label);display:block;
    font-size:16px;font-weight:700;letter-spacing:.01em;
    color:var(--accent-d);margin-top:6px}
}

/*!CRITICAL-END*/

/* ==========================================================================
   Below the fold. Nothing here decides the first paint.
   ========================================================================== */

/* --------------------------------------------------------------- surfaces
   The slot's card: a hairline rectangle at rest that FILLS when the pointer
   arrives, and only then takes the layered lift. Nothing on this page casts
   a shadow until it is pointed at. */
.card,.ingcard,.step,.keypoints,.callout,.alert,.qa,.faq,.toc,.byline,
.formcard,.refs,.final,.fcta__box,.meter{
  border-radius:var(--radius);
}
.card,.ingcard,.step{
  background:transparent;
  border:1px solid var(--line);
  padding:22px 24px;
  transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease,
             border-color .2s ease;
}
.card:hover,.ingcard:hover,.step:hover{
  background:var(--paper);
  border-color:var(--line-2);
  box-shadow:var(--lift);
  transform:translateY(-2px);
}
.card h3,.ingcard h3,.step h3{margin-bottom:.35em}
.card p:last-child,.ingcard p:last-child,.step p:last-child{margin-bottom:0}

.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.steps{display:grid;gap:22px;grid-template-columns:repeat(2,1fr);counter-reset:st}
.step{position:relative;padding-top:26px}
.step h3::before{
  counter-increment:st;content:counter(st,decimal-leading-zero);
  display:block;font-size:14px;letter-spacing:.14em;color:var(--accent-d);
  margin-bottom:.3em;
}

.ticks{list-style:none;margin:0 0 1em;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:.5em;font-size:17px}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:11px;height:11px;border:2px solid var(--accent);border-radius:2px;
}
.ord{margin:0 0 1em;padding-left:1.3em}
.ord li{margin-bottom:.5em;font-size:17px}

.callout{
  background:var(--paper);border:1px solid var(--line);
  border-left:5px solid var(--accent);padding:18px 22px;margin:22px 0;
}
.callout b{display:block;font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:1.08rem;
  color:var(--ink-2);margin-bottom:.3em}
.callout p:last-child{margin-bottom:0}
.alert{
  background:#f6efdc;border:1px solid #ddc98a;border-left:5px solid var(--accent-d);
  padding:18px 22px;margin:22px 0;
}
.alert b{display:block;font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:1.08rem;
  color:#5d4302;margin-bottom:.3em}
.alert p:last-child{margin-bottom:0}

.keypoints{background:var(--paper);border:1px solid var(--line);padding:20px 24px;margin:22px 0}
.keypoints>b{
  display:block;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-d);margin-bottom:.5em;font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;
}
.keypoints ul{margin:0;padding-left:1.15em}
.keypoints li{margin-bottom:.45em;font-size:17px}

.pullquote{
  margin:26px 0;padding:6px 0 6px 24px;border-left:4px solid var(--accent);
  font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:1.28rem;line-height:1.45;
  color:var(--ink-2);
}
.pullquote cite{display:block;font-family:Manrope,"Manrope Fallback","Manrope Fallback R",sans-serif;font-size:15px;
  font-style:normal;color:var(--mut);margin-top:.5em}

/* --------------------------------------------------------------- tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);margin-bottom:1em}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line-2);
  vertical-align:top}
th{
  font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:15px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--ink-2);
  border-bottom:0;
}
td{font-size:16px;line-height:1.6}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(207,200,178,.16)}
.tnote{font-size:15px;color:var(--mut);margin-top:-.2em}

/* --------------------------------------------------------------- split */
.split{display:grid;grid-template-columns:5fr 7fr;gap:34px;align-items:start;
  margin-bottom:28px}
.split--flip{grid-template-columns:7fr 5fr}
.split--flip .split__img{order:2}
.split--tall{grid-template-columns:4fr 8fr}
.split--band{grid-template-columns:1fr}
.split__img img{width:100%;border-radius:var(--radius);border:1px solid var(--line)}
@media (min-width:761px){
  /* flush with the heading's left edge, not centred inside the column */
  .split__img img{max-height:420px;width:auto;margin-inline:0}
  .split--tall .split__img img{max-height:520px}
  .split--band .split__img img{max-height:none;width:100%}
}
.split__body>:last-child{margin-bottom:0}

/* --------------------------------------------------------------- figures */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stats div{display:flex;flex-direction:column;gap:3px}
.stats b{font-size:2.1rem;color:#fff;line-height:1}
.stats span{font-size:15px;color:#ddd9c6;line-height:1.45}

.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.shots.s2{grid-template-columns:repeat(2,1fr)}
.shots figure{
  margin:0;background:transparent;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.shots figure:hover{background:var(--paper);box-shadow:var(--lift);transform:translateY(-2px)}
.shots img{width:100%}
.shots figcaption{padding:15px 18px 18px;display:block}
.shots figcaption b{display:block;font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;
  font-size:1.05rem;color:var(--ink-2);margin-bottom:.25em}
.shots figcaption span{font-size:15px;color:var(--mut);line-height:1.55}

.badgewall{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.badgewall figure{
  margin:0;padding:20px;border:1px solid var(--line);border-radius:var(--radius);
  text-align:center;background:transparent;
  transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.badgewall figure:hover{background:var(--paper);box-shadow:var(--lift);transform:translateY(-2px)}
.badgewall img{margin:0 auto 10px}
.badgewall b{display:block;font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:1.02rem;
  color:var(--ink-2);margin-bottom:.25em}
.badgewall span{display:block;font-size:15px;color:var(--mut);line-height:1.55}

/* --------------------------------------------------------------- versus */
.versus{display:grid;grid-template-columns:1.1fr 1fr 2fr;gap:0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--paper)}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line-2);font-size:16px}
.versus__h{
  font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:14.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--ink-2);
  border-bottom:0;
}
.versus__name{font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-weight:600;color:var(--ink-2)}
.versus__lab{font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-weight:600;color:#5d4302}

/* --------------------------------------------------------------- ingredients */
.inglist{display:grid;gap:22px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
  margin-bottom:.6em}
.ingcard__top h3{margin:0}
.ing__latin{font-size:14.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.ing__dose{
  margin-left:auto;font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:14.5px;
  background:#f1e4c3;color:#5d4302;border-radius:999px;padding:4px 13px;
}

/* --------------------------------------------------------------- pricing */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.card--pack{display:flex;flex-direction:column;position:relative;padding:0;overflow:hidden}
.card--pack.featured{border-color:var(--accent);border-width:2px}
.pack__flag{
  position:absolute;top:0;right:0;z-index:2;
  background:var(--accent);color:var(--on-accent);
  font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:13.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;
}
.pack__head{background:var(--ink-2);color:#fff;padding:15px 20px}
/* The flag is pinned top-right over the head band; keep the pack name and
   supply line clear of it rather than running underneath. */
.card--pack:has(.pack__flag) .pack__head{padding-right:150px}
.pack__head b{display:block;font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:1.26rem}
.pack__head span{font-size:14.5px;color:#ded9c6;letter-spacing:.05em}
.pack__body{padding:20px;display:flex;flex-direction:column;flex:1}
/* The vendor ships two cut-outs and one shot on a white plate. Putting all
   three on the same white plate is the only way the row reads as one row. */
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,170px);
  object-fit:contain;margin:0 auto 12px;background:#fff;
  border-radius:var(--radius-sm);padding:4px}
.pack__per{font-size:3rem;line-height:1;margin:0;color:var(--ink-2);text-align:center}
.pack__per sup{font-size:1.4rem;top:-.7em}
.pack__unit{display:block;text-align:center;font-size:14.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mut);margin-bottom:.7em}
.pack__tot{text-align:center;margin:0 0 .9em;font-size:16px}
.pack__tot b{font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:1.1rem;color:var(--ink-2)}
.pack__was{text-decoration:line-through;color:var(--mut);font-size:15px;margin-left:.4em}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:16px}
.pack__perks li{padding-left:22px;position:relative;margin-bottom:.4em;line-height:1.5}
.pack__perks li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:2px;
  background:var(--accent)}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{font-size:14.5px;color:var(--mut);text-align:center;margin:10px 0 0}
.buy__note{font-size:15.5px;color:var(--mut);margin-top:18px;max-width:82ch}

/* --------------------------------------------------------------- meter */
.meter{background:var(--paper);border:1px solid var(--line);padding:20px 24px}
.meter__row{display:grid;grid-template-columns:78px 1fr 46px;gap:14px;align-items:center;
  margin-bottom:9px;font-size:16px}
.meter__bar{display:block;height:11px;background:var(--tint);border-radius:999px;
  overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.stars{color:var(--accent);letter-spacing:.1em}
.stars i{opacity:.35;font-style:normal}

/* --------------------------------------------------------------- FAQ */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--paper)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq details:last-child{border-bottom:0}
.faq summary{
  cursor:pointer;padding:16px 20px;list-style:none;
  font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:1.08rem;font-weight:600;
  color:var(--ink-2);display:flex;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-d);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{background:var(--tint)}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child{margin-bottom:0}

/* --------------------------------------------------------------- related */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.rel a{
  display:block;padding:20px 22px;border:1px solid var(--line);
  border-radius:var(--radius);text-decoration:none;background:transparent;
  transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rel a:hover{background:var(--paper);box-shadow:var(--lift);transform:translateY(-2px)}
.rel b{display:block;font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:1.08rem;
  color:var(--ink-2);margin-bottom:.25em}
.rel span{display:block;font-size:15.5px;color:var(--mut);line-height:1.55}

/* --------------------------------------------------------------- CTA blocks */
.final{
  border:1px solid var(--line);border-left:5px solid var(--accent);
  background:var(--paper);padding:28px 30px;
}
.final--media{display:grid;grid-template-columns:210px 1fr;gap:28px;align-items:start}
.final__img img{width:100%;border-radius:var(--radius)}
.final h2{margin-bottom:.4em}
.final__price{font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:1.06rem;color:var(--ink-2)}
.final__sm{font-size:15px;color:var(--mut);margin:12px 0 0}

.fcta{background:var(--tint);border-top:1px solid var(--line);padding:48px 0}
.fcta__box{display:grid;grid-template-columns:1fr 250px;gap:34px;align-items:start;
  background:var(--paper);border:1px solid var(--line);padding:30px 32px}
.fcta__eye{display:inline-block;font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);margin-bottom:.4em}
.fcta__h{font-size:1.65rem;margin:0 0 .5em}
.fcta__sm{font-size:15px;color:var(--mut);margin:12px 0 0}
.fcta__img img{width:100%;border-radius:var(--radius)}

/* --------------------------------------------------------------- sources */
.refs{background:var(--paper);border:1px solid var(--line);padding:20px 26px;
  margin-bottom:22px}
.refs ol{margin:0;padding-left:1.3em}
.refs li{font-size:17px;line-height:1.6;margin-bottom:.7em;word-break:break-word}
.byline{display:grid;grid-template-columns:62px 1fr;gap:20px;align-items:start;
  background:var(--paper);border:1px solid var(--line);
  border-left:5px solid var(--accent);padding:22px 26px}
.byline__mark{
  display:grid;place-items:center;width:62px;height:62px;border-radius:50%;
  background:var(--ink-2);color:#f0c14b;
  font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:1.3rem;letter-spacing:.06em;
}
.byline b{font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:1.1rem;color:var(--ink-2);
  display:block;margin-bottom:.35em}
.byline p{font-size:16px;margin:0;color:var(--mut)}

/* --------------------------------------------------------------- AI block */
.qa{background:var(--paper);border:1px solid var(--line);padding:22px 26px}
.qa>p{font-size:17px}
.qa .tablewrap{margin-bottom:0;border:0;border-top:1px solid var(--line-2);border-radius:0}
.qa table{min-width:0}
.qa td{font-size:16px}
.qa td:first-child{width:36%}

/* --------------------------------------------------------------- forms */
.formcard{background:var(--paper);border:1px solid var(--line);padding:26px 28px}
.form{display:grid;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.form label{font-size:15px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.form input,.form select,.form textarea{
  font-family:inherit;font-size:16px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;color:var(--ink);
}
.form textarea{min-height:140px;resize:vertical}
.form__hint{font-size:15px;color:var(--mut);margin:0}

/* --------------------------------------------------------------- blog */
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.posts article{
  border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;
  background:transparent;
  transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.posts article:hover{background:var(--paper);box-shadow:var(--lift);transform:translateY(-2px)}
.posts h3{margin-bottom:.3em}
.posts h3 a{text-decoration:none;color:var(--ink-2)}
.posts h3 a:hover{color:var(--accent-d)}
.postmeta{font-size:15px;color:var(--mut);margin:0 0 .6em}
.article{max-width:76ch}
.article h2{margin-top:1.5em}
.article h3{margin-top:1.2em}
.article figure{margin:26px 0}
.article figure img{border-radius:var(--radius);border:1px solid var(--line)}
.article figure.portrait img{width:var(--figw,340px);max-width:100%;margin-inline:auto}
.article figcaption{font-size:15px;color:var(--mut);margin-top:.5em;line-height:1.55}
.toc{background:var(--paper);border:1px solid var(--line);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);margin-bottom:.5em}
.toc ol{margin:0;padding-left:1.25em}
.toc li{margin-bottom:.35em;font-size:17px}
/* Standalone links (a TOC entry, a phone or email alone in a cell) are tap
   targets, not inline citations: 24px minimum. The line-height already
   exceeds 24px, so this moves nothing. */
.toc li a,.tap{display:inline-block;min-height:24px}
.article .final--media{grid-template-columns:150px 1fr;gap:22px;padding:24px}
.article .final h2{font-size:1.4rem;margin-top:0}
.dtable{width:100%}

/* --------------------------------------------------------------- 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}
  .card:hover,.ingcard:hover,.step:hover,.shots figure:hover,.badgewall figure:hover,
  .rel a:hover,.posts article:hover,.btn:hover{transform:none}
}

/* --------------------------------------------------------------- buy bar
   Declared at the TOP LEVEL so it exists on desktop as well as on a phone:
   house rule 8 is about the click, not about reading space. */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;
  background:var(--ink-2);color:#f1eddd;
  border-top:3px solid var(--accent);
  transform:translateY(105%);
  transition:transform .28s ease;
}
.buybar.show{transform:none}
.buybar__in{
  width:min(var(--wrap), calc(100% - 36px));margin-inline:auto;
  display:flex;align-items:center;gap:18px;padding-block:11px;
}
.buybar__t{display:flex;flex-direction:column;line-height:1.35;font-size:15px}
.buybar__t b{font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:16.5px;color:#fff}
.buybar__t span{color:#dcd7c4;font-size:14.5px}
.buybar .btn{margin-left:auto;flex:0 0 auto}
.nav--away{transform:translateY(-102%);box-shadow:none}

/* --------------------------------------------------------------- footer
   Birch ground, an olive rule above it, and the lot number set large in a
   left rail beside the index. */
footer{background:var(--bg);border-top:3px solid var(--ink-2);padding:44px 0 0}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr;gap:30px;
  padding-bottom:32px;border-bottom:1px solid var(--line)}
.fbrand{font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:1.45rem;font-weight:700;
  color:var(--ink-2);display:block;margin-bottom:.2em}
.fbrand span{color:var(--accent-d)}
.frole{font-size:16px;color:var(--mut);margin-bottom:.9em}
.flot{margin:0 0 .5em;display:flex;flex-direction:column}
.flot span{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.flot b{font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:1.72rem;line-height:1.1;
  color:var(--ink-2);letter-spacing:-.01em}
.fcoa{font-size:16px;color:var(--mut);margin-bottom:1em}
.fsealrow{display:flex;gap:10px;margin-bottom:10px}
.fsealrow img{border-radius:var(--radius-sm)}
/* :not(.fbrand): the wordmark is also a direct span child, and this rule at
   (0,1,1) was beating .fbrand's 1.45rem, printing the wordmark at 16px. */
.fseals>span:not(.fbrand){display:block;font-size:16px;color:var(--mut);margin-top:.5em}
.fh{font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif;font-size:15px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0 0 .7em}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.45em}
footer a{color:var(--mut);text-decoration:none;font-size:16px;display:inline-block;
  padding-block:2px}
footer a:hover{color:var(--accent-d);text-decoration:underline}

.fcard{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:26px 0;
  border-bottom:1px solid var(--line)}
.fcard p{font-size:17px;color:var(--mut);margin:0}
.fcard b{color:var(--ink-2);font-family:"Zilla Slab","Zilla Slab Fallback",Georgia,serif}
.fpay{display:flex;align-items:center;gap:18px;padding:20px 0;flex-wrap:wrap}
.fpay span{font-size:16px;color:var(--mut)}

.disc{background:var(--tint);border-top:1px solid var(--line);padding:26px 0;margin-top:0}
.disc p{font-size:16px;color:var(--mut);max-width:96ch}
.disc b{color:var(--ink-2)}
.disc__list{margin:0 0 1em;padding-left:1.2em;max-width:96ch}
.disc__list li{font-size:17px;color:var(--mut);margin-bottom:.5em;line-height:1.6}
.copy{font-size:16px;color:var(--mut);margin:0}

/* A follow-on paragraph after a grid, a card list, the dosage table or the
   star meter butted straight against it: p carries no top margin. */
.steps+p,.inglist+p,.versus+p,.meter+p,.grid+p{margin-top:22px}

/* An odd card left alone on the last row of a two-across grid spans the row
   instead of leaving the right half empty. */
@media (min-width:761px){
  .steps>:last-child:nth-child(odd),
  .grid.g2>:last-child:nth-child(odd){grid-column:1/-1}
}

/* --------------------------------------------------------------- responsive */
@media (max-width:1040px){
  .fgrid{grid-template-columns:1.4fr 1fr 1fr;gap:26px}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .stats{grid-template-columns:repeat(2,1fr)}
  .rel{grid-template-columns:1fr 1fr}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{max-width:230px}
}
@media (max-width:860px){
  .split,.split--tall,.split--flip{grid-template-columns:1fr;gap:20px}
  .versus{grid-template-columns:1fr}
  .versus>div{border-bottom:0;padding:3px 16px}
  .versus__h{display:none}
  /* One group per ingredient: the name opens it on a tinted band under a
     heavier rule, and each value carries its column name above it. */
  .versus>.versus__name{background:var(--tint);border-top:2px solid var(--ink-2);
    padding:10px 16px;font-size:17px}
  .versus>.versus__name:nth-child(4){border-top:0}
  .versus>.versus__lab,.versus>.versus__res{padding-top:8px}
  .versus>.versus__res{padding-bottom:14px}
  .versus__lab::before,.versus__res::before{content:attr(data-label);display:block;
    font-family:Manrope,"Manrope Fallback","Manrope Fallback R","Segoe UI",system-ui,sans-serif;font-size:16px;font-weight:700;
    letter-spacing:.01em;color:var(--accent-d);margin-bottom:2px}
  .shots,.badgewall{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .g2,.g3,.steps,.posts{grid-template-columns:1fr}
  .shots,.shots.s2,.badgewall{grid-template-columns:1fr}
  .rel{grid-template-columns:1fr}
  .final--media,.article .final--media{grid-template-columns:1fr;gap:18px}
  .final__img{max-width:190px}
  .fgrid,.fcard{grid-template-columns:1fr;gap:22px}
  .stats{grid-template-columns:1fr}
  .buybar__in{gap:12px;padding-block:9px}
  .buybar .btn{padding:11px 16px;font-size:15.5px}
  .byline{grid-template-columns:1fr}
  .meter__row{grid-template-columns:70px 1fr 40px;gap:10px;font-size:15.5px}
  h1{font-size:1.95rem}
}


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

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

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

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

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

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is three cards that have to share their edges, their image
   slot and their button baseline. The vendor product shots are different
   shapes (one site shipped 200x243, 200x105 and 200x65 side by side) and the
   blurbs are different lengths, so without these three rules the images
   render at three sizes and the three CTAs sit at three heights.

   The height lives here and not on the <img> attributes on purpose: those
   must keep stating each file's true ratio, or fix_img_dims.py rewrites them
   and CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

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

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav--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 ==== */
/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 10 box-shadow declaration(s)
   and 1 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 (40,45,26), 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;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(40,45,26,.06), 0 6px 18px rgba(40,45,26,.07);
  --lift:0 2px 6px rgba(40,45,26,.09), 0 16px 34px rgba(40,45,26,.14);
}

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

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

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