/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Vollkorn Fallback";src:local("Arial");font-weight:400;size-adjust:98.82%;ascent-override:96.33%;descent-override:44.63%;line-gap-override:0.00%}
@font-face{font-family:"Vollkorn Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:98.85%;ascent-override:96.31%;descent-override:44.61%;line-gap-override:0.00%}
@font-face{font-family:"Space Grotesk Fallback";src:local("Arial");font-weight:400;size-adjust:111.32%;ascent-override:88.39%;descent-override:26.23%;line-gap-override:0.00%}
@font-face{font-family:"Space Grotesk Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:102.72%;ascent-override:95.79%;descent-override:28.43%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   memohonaey.com - MemoHoney, a once-daily memory and focus capsule.
   Design slot: batch13_assignments.py row 263.

     type     Vollkorn (a warm book serif: every heading and every figure)
              over Space Grotesk (the chrome, the eyebrows, the buttons and
              all reading text)
     ground   cocoa ink, broken by pale straw slabs - the page is dark and
              the slabs are the light it is read by
     cards    flat fill, ONE rule along the bottom edge, radius 8 as
              authored; the featured pack tier carries a ribbon
     depth    hairline everywhere, and exactly one soft lift, on the pack row
     layout   twelve columns. The hero is asymmetric: the bottle stands in a
              FOUR-column well offset LEFT, and the headline runs the full
              width and overlaps the top edge of that well
     motion   nectar-drift, a blurred band travelling across the bottle
              (hero_motifs.py)

   Honey is the product's own colour and it is the only saturated thing here:
   it is what the band across the middle of the bottle is printed in. The
   cocoa is the dark chocolate-brown of the "30 CAPSULES" pill on the label.

   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 when the async sheet lands is the estate's largest
   mobile-CLS fault, and it is invisible on a desktop.
   ========================================================================== */

:root{
  --bg:#2b2018;            /* cocoa ink, the page ground */
  --ink:#2b2018;           /* the same cocoa, named so the motif can find it */
  --cocoa-2:#221a13;       /* the deeper band, and the footer */
  --cocoa-3:#3a2c21;       /* the raised cocoa surface: cards on the dark */
  --straw:#f4ead3;         /* the pale straw slab */
  --straw-2:#fbf5e7;       /* the lighter straw, for cards inside a slab */
  --on-dark:#efe4d1;       /* reading text on cocoa */
  --on-dark-mut:#c3b39a;   /* secondary text on cocoa, 7.7:1 */
  --ink-2:#2b2018;         /* headings and reading text on straw */
  --mut:#6b5844;           /* secondary text on straw, 5.6:1 */
  --line:#4d3b2d;          /* the hairline on cocoa */
  --line-2:#ddcdad;        /* the hairline on straw */
  --accent:#c98f1c;        /* honey, off the band on the bottle */
  --accent-2:#e7b64a;      /* the lighter stop of the one CTA gradient */
  --accent-d:#7d5604;      /* honey dark enough to carry small text on straw */
  --on-accent:#251a04;     /* ink used ON honey, never white */

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

  --shadow:0 1px 2px rgba(20,14,9,.18), 0 6px 18px rgba(20,14,9,.22);
  --lift:0 2px 6px rgba(20,14,9,.26), 0 16px 34px rgba(20,14,9,.34);

  --wrap:1200px;
  --gutter:30px;
  --col-gap:28px;
  --navh:120px;
}

*,*::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;
  background:var(--bg);
  color:var(--on-dark);
  font-family:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  font-size:17px;
  line-height:1.74;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

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

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

h1,h2,h3,h4,.bw b,.pack__per,.stats b,.figures b,.fcta__h,.lotplate b,.meter span:first-child{
  font-family:Vollkorn,Georgia,"Times New Roman",serif;
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.004em;
  color:var(--on-dark);
}
h1{font-size:clamp(2rem,1.28rem + 2.05vw,2.85rem);margin:.06em 0 .3em}
h2{font-size:clamp(1.62rem,1.22rem + 1.4vw,2.25rem);margin:0 0 .4em}
h3{font-size:1.22rem;margin:0 0 .38em}
h4{font-size:1.06rem;margin:0 0 .32em}
p{margin:0 0 1.05em}

/* THE TWELVE COLUMNS. Every full-width row on this site is measured against
   the same grid, so a four-column well in the hero lines up with a
   four-column card three screens down. */
.wrap{
  width:min(var(--wrap), calc(100% - (var(--gutter) * 2)));
  margin-inline:auto;
  position:relative;
}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);
  padding:12px 18px;z-index:99;border-radius:0 0 var(--radius-sm) 0;font-weight:700}
.skip:focus{left:0}

.eyebrow{
  display:inline-block;
  font-size:14px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent-2);
  margin-bottom:.4em;
}

/* --------------------------------------------------------------- buttons
   Rule 11's solid/gradient pair. The primary carries the one CTA gradient on
   this site; the secondary is a flat straw slab, 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 label 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:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  font-size:17px;font-weight:700;letter-spacing:.005em;
  padding:13px 24px;border-radius:var(--radius-sm);
  border:2px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:var(--on-accent);border-color:#a3720f;
  transition:transform .18s ease, box-shadow .18s ease, background .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:#a3720f;
  box-shadow:var(--shadow);
}
.btn.btn--gold:hover,a.btn.btn--gold:hover{
  background:linear-gradient(180deg,#f0c260,#d29a21);
  color:var(--on-accent);
  box-shadow:var(--lift);transform:translateY(-2px);
}
.btn.btn--ghost,a.btn.btn--ghost{
  background:var(--straw);color:var(--ink-2);border-color:var(--straw);
}
.btn.btn--ghost:hover,a.btn.btn--ghost:hover{
  background:#fffaf0;color:var(--ink-2);box-shadow:var(--lift);transform:translateY(-2px);
}
.btn.btn--outline,a.btn.btn--outline{
  background:transparent;color:var(--accent-2);border-color:var(--accent-2);
}
.btn.btn--outline:hover,a.btn.btn--outline:hover{
  background:var(--accent-2);color:var(--on-accent);
}
.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-2);outline-offset:2px;
}

/* --------------------------------------------------------------- topline
   Who is selling, what the routine is, which run the bottles came from, how
   long the window runs, and the order line. Four of rule 12's five trust
   facts, above the fold on every page and at every width. */
.util{background:var(--cocoa-2);color:var(--on-dark-mut);font-size:15px;line-height:1.5;
  border-bottom:1px solid var(--line)}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:5px 26px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:.4em}
.util__item b{color:var(--on-dark);font-weight:700}
.util__item--role{
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-2);font-size:14.5px;
}
.util__item--tel{margin-left:auto}
.util a{color:var(--on-dark);text-decoration:underline}
.util a:hover{color:var(--accent-2)}

/* --------------------------------------------------------------- masthead
   An ink-brown rail. Rank one is the identity with an OVERSIZED lot number
   standing to its right, because on this counter the run number is the thing
   a buyer can actually check. Rank two carries the destinations. */
.nav{
  position:sticky;top:0;z-index:40;
  background:var(--cocoa-2);
  border-bottom:2px solid var(--accent);
  transition:transform .26s ease, box-shadow .26s ease;
}
.nav__top{display:flex;align-items:center;gap:20px;padding:12px 0 10px;min-height:58px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand svg{width:40px;height:40px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-size:26px;color:var(--on-dark);font-weight:700;letter-spacing:-.012em}
.bw b em{font-style:normal;color:var(--accent-2)}
.bw small{font-size:14.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-mut);
  font-family:"Space Grotesk","Segoe UI",system-ui,sans-serif}

.lotplate{
  display:flex;align-items:baseline;gap:10px;
  margin-left:26px;padding-left:22px;
  border-left:1px solid var(--line);
}
.lotplate span{font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark-mut);white-space:nowrap}
.lotplate b{font-size:23px;color:var(--accent-2);letter-spacing:.01em;white-space:nowrap}

.nav__buy{flex:0 0 auto;margin-left:auto;padding:11px 20px;font-size:16px}
.burger{display:none;background:none;border:0;padding:9px;cursor:pointer;margin-left:auto}
.burger span{display:block;width:24px;height:2px;background:var(--on-dark);margin:5px 0}

.nav__rank{border-top:1px solid var(--line)}
.menu{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;
  list-style:none;margin:0;padding:0;
}
.menu a{
  display:inline-block;padding:9px 1px;
  font-size:15.5px;font-weight:500;color:var(--on-dark);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover,.menu a[aria-current]{color:var(--accent-2);border-bottom-color:var(--accent)}
.menu__more{display:none}

/* --------------------------------------------------------------- hero
   Twelve columns. The headline runs the whole width on row one; the well
   stands in columns 1 to 4 on row two and is pulled UP so that its top edge
   passes behind the last line of the headline. The copy takes columns 5 to
   12 beside it.

   The well is a straw slab on the cocoa ground - the first of the slabs, and
   the one everything else on the page is measured against. It is inset
   inside `.hero__media` on all four sides so the nectar band, sized at 146%
   of the media column, has cocoa to travel across instead of being covered
   by an opaque plate. */
.hero{
  position:relative;
  padding:30px 0 52px;
  color:var(--on-dark);
  border-bottom:1px solid var(--line);
}
.hero__grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--col-gap);
  row-gap:0;
  align-items:start;
}
/* The headline takes all twelve columns, which is the point of it: capped at a
   short measure it ran to five lines at 1440 and pushed the buying buttons
   over the fold. Measured before and after: 269px of headline became 161px,
   and the primary CTA moved from y=878 to inside the first screen. */
.hero__head{grid-column:1 / 13;grid-row:1;position:relative;z-index:3}
.hero__head h1{max-width:none}
/* The overlap is deliberate and it is measured. At -42px the well's straw fill
   climbed into the x-height of the last headline line, and pale ink on a pale
   slab is invisible ink: the word sitting there rendered at about 1.2:1. At
   -24px only the honey top rule and a few pixels of slab pass behind the
   descenders, so the rule reads as passing BEHIND the headline and every
   letterform stays on cocoa at 9.4:1. */
.hero__media{
  grid-column:1 / 5;grid-row:2;
  position:relative;
  margin-top:-24px;
  padding:14px 0 8px;
  display:flex;align-items:flex-start;justify-content:center;
}
.hero__copy{grid-column:5 / 13;grid-row:2;padding-top:10px}

.hero__card{
  position:relative;z-index:2;width:100%;
  background:var(--straw);
  border:1px solid var(--line-2);
  border-top:4px solid var(--accent);
  border-radius:var(--radius);
  padding:12px 12px 10px;
  box-shadow:0 1px 2px rgba(20,14,9,.24), 0 18px 40px rgba(20,14,9,.38);
}
.hero__card img{width:100%;height:auto;position:relative;z-index:3}
.hero__cap{
  margin:8px 0 0;text-align:center;
  font-size:13.5px;letter-spacing:.06em;color:var(--mut);
  text-transform:uppercase;font-weight:500;
}

.answer{
  background:var(--cocoa-3);
  border:1px solid var(--line);
  border-left:5px solid var(--accent);
  border-radius:var(--radius);
  padding:17px 21px;
  margin:0 0 18px;
}
.answer p{margin:0 0 .7em;font-size:17.5px;color:var(--on-dark)}
.answer p:last-child{margin-bottom:0}
.answer b{font-family:Vollkorn,Georgia,serif;font-weight:700;font-size:1.06em}
.answer a{color:var(--accent-2)}

.hero__road{color:var(--on-dark-mut);font-size:16.5px;margin-bottom:20px;max-width:72ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.hero__sub{
  display:flex;flex-wrap:wrap;gap:5px 22px;margin:0 0 18px;padding:0;
  font-size:15.5px;color:var(--on-dark-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:2px;flex:0 0 auto}

.factpills{
  display:grid;grid-template-columns:1fr 1fr;gap:7px 22px;
  list-style:none;margin:0 0 20px;padding:0;font-size:15.5px;
}
.factpills li{display:flex;gap:.5em;align-items:baseline;color:var(--on-dark)}
.factpills b{font-family:Vollkorn,Georgia,serif;color:var(--accent-2);font-weight:700;
  font-size:1.05em;white-space:nowrap}

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

/* The first screen at >=1061px, where this hero is two columns (house rule
   12 C2: product top within the first screen, target y<=400 at 1440x900).
   Measured before this block, 1440x900: the well's bottle at y=386 once
   Vollkorn had loaded, but y=441 until it did, because at 45.6px the
   full-width headline takes two lines in Vollkorn and THREE in the Georgia
   fallback -- and the fallback is what paints first. So the lift comes from
   above the well, never from pulling the well further up behind the
   headline (see the -24px note above: pale ink on the straw slab):

     hero top padding   30 -> 14px
     headline           capped at 2.5rem, so it holds two lines in either
                        face and the bottle no longer moves when the font
                        swaps
     card top padding   12 -> 6px; the cut-out carries its own empty band
                        above the bottles, so the plate needs no more

   Nothing else moves: same twelve columns, same four-column well offset
   left, same -24px overlap, same copy column. */
@media (min-width:1061px){
  .hero{padding-top:14px}
  .hero__head h1{font-size:clamp(2rem,1.1rem + 2vw,2.5rem)}
  .hero__card{padding-top:6px}
}
/* The phone hero, ABOVE the critical marker on purpose.
   `.hero__copy{display:contents}` dissolves the copy column so 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 bottle lands below
   every fact block in it, on the third screenful - exactly the defect house
   rule 12 exists to stop. The order is eyebrow and headline, BOTTLE, the
   Quick Answer, and then the BUYING BUTTONS before anything else: measured at
   390 with the roadmap ahead of them they started at y=1610, which is the far
   edge of the second screenful. Ahead of it they start at y=1390. */
@media (max-width:1060px){
  .hero__grid{grid-template-columns:minmax(0,1fr);column-gap:0}
  .hero__head{grid-column:1;grid-row:auto;order:1}
  .hero__media{grid-column:1;grid-row:auto;order:2;margin-top:-6px;padding:0 0 4px}
  .hero__copy{display:contents}
  .hero .answer{order:3;margin-top:16px}
  .hero__cta{order:4}
  .hero__sub{order:5}
  .hero__road{order:6}
  .factpills{order:7}
  .hero .figures{order:8}
  .hero__card{max-width:430px;margin-inline:auto}
  .hero__head h1{max-width:none}
}
/* The nav sheds, it never wraps. Below 980 the destinations go behind the
   burger rather than ranking onto two more lines. */
@media (max-width:980px){
  .nav__rank{display:none}
  .nav__top{gap:12px;min-height:56px}
  /* The plate stacks below 980: with the label at the 13.5px label floor a
     single row of label + number ran past the burger at 768. Stacked, it is
     as wide as the longer of the two lines. */
  .lotplate{margin-left:14px;padding-left:14px;flex-direction:column;align-items:flex-start;
    gap:0;line-height:1.18}
  .lotplate span{letter-spacing:.14em}
  .lotplate b{font-size:19px}
  .nav__buy{display:none}
  .burger{display:block}
  .menu.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:var(--cocoa-2);border-bottom:2px solid var(--accent);
    padding:6px 30px 14px;max-height:72vh;overflow:auto;z-index:41;
  }
  .menu.open .menu__more{display:block}
  .menu.open li{border-bottom:1px solid var(--line)}
  .menu.open a{display:block;padding:12px 2px;font-size:17px;border:0}
  .nav__rank.open-host{display:block;border:0}
}
@media (max-width:760px){
  .hero{padding:22px 0 40px}
  .bw b{font-size:22px}
  .bw small{display:none}
  .brand svg{width:34px;height:34px}
  .lotplate{flex-direction:column;gap:0;margin-left:12px;padding-left:12px;min-width:0}
  .lotplate span{letter-spacing:.12em}
  .lotplate b{font-size:16px}
  .factpills{grid-template-columns:1fr}
  .figures{grid-template-columns:1fr;gap:12px}
  /* The topline is four of rule 12's five trust facts and it is the tallest
     thing above the headline on a phone. Tightened rather than trimmed: at
     15px with 1.5 leading it stood 130px tall on a 390px screen. */
  .util{font-size:14.5px;line-height:1.38}
  .util__row{gap:1px 16px;padding-block:6px}
  .util__item--tel{margin-left:0}
  .burger{padding:8px 0 8px 8px}
  .hero__cta .btn{width:100%}
  :root{--gutter:18px}
}
@media (max-width:480px){
  /* Who is selling is carried by the role line and by the masthead, so the
     shipping origin can stand down here and give the headline its room back. */
  .util__item--trim:nth-of-type(3){display:none}
}
/* Below 440 the brand, the plate and the burger cannot share one row: at 375
   the run number ran 41px under the burger and past the viewport edge, and the
   only way to fit it was type under the floor. The nav sheds, it never wraps,
   so the plate stands down here. The same run number is printed on the hero
   card under the bottle, on every pack card and in the footer lot bar. */
@media (max-width:440px){
  .lotplate{display:none}
}
@media (min-width:981px) and (max-width:1200px){
  .menu{gap:0 15px}
  .menu a{font-size:14.8px}
}

/* The inner-page head and the section shell. 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:54px 0;position:relative}
.sec--slab{background:var(--straw);color:var(--ink-2)}
.sec--slab h2,.sec--slab h3,.sec--slab h4{color:var(--ink-2)}
.sec--slab .eyebrow{color:var(--accent-d)}
.sec--slab a{color:var(--accent-d)}
.sec--slab a:hover{color:#5c3f03}
.sec--slab .sec__head p{color:var(--mut)}
.sec--deep{background:var(--cocoa-2);border-block:1px solid var(--line)}
.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(--on-dark-mut);margin-bottom:0}
.phead{padding:36px 0 12px}
.phead h1{margin-top:.06em}
.crumbs{font-size:14.5px;color:var(--on-dark-mut);margin:0 0 .6em}
.crumbs a{color:var(--on-dark-mut)}
.lead{font-size:19px;line-height:1.66;color:var(--on-dark);max-width:74ch}
.sec--slab .lead{color:var(--ink-2)}
@media (max-width:760px){.sec{padding:40px 0}.phead{padding:24px 0 8px}}


/* ---- hero motif -- nectar-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(179deg,#2b2018,#473419 52%,#2b2018)}.hero__media::before{content:'';position:absolute;pointer-events:none;left:50%;top:44%;width:146%;aspect-ratio:4.0;translate:-50% -50%;z-index:1;filter:blur(16px);background:linear-gradient(180deg,transparent 6%,rgba(201,143,28,0.31) 46%,transparent 94%);-webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);animation:b13NectarDrift 15s cubic-bezier(.4,.1,.5,1) infinite}.hero__media::after{content:'';position:absolute;pointer-events:none;left:50%;top:58%;width:146%;aspect-ratio:4.0;translate:-50% -50%;z-index:1;filter:blur(16px);background:linear-gradient(180deg,transparent 6%,rgba(201,143,28,0.22) 46%,transparent 94%);-webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);animation:b13NectarDrift 15s cubic-bezier(.4,.1,.5,1) infinite;animation-delay:7.5s}@keyframes b13NectarDrift{0%{transform:rotate(-0deg) translateX(-20%);opacity:0}30%{opacity:0.44}70%{transform:rotate(0deg) translateX(20%);opacity:0.18}100%{transform:rotate(0deg) translateX(26%);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/

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

/* --------------------------------------------------------------- surfaces
   The card is a flat fill with ONE rule along its bottom edge. No border on
   three sides, no shadow at rest: the single honey rule is what separates
   one card from the next, and it is the whole of this site's card language.
   The one exception is the pack row, which is the only lifted thing on the
   site. */
.card{
  background:var(--cocoa-3);
  border:0;
  border-bottom:3px solid var(--accent);
  border-radius:var(--radius);
  padding:22px 22px 20px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.card h3{color:var(--on-dark)}
.card p:last-child{margin-bottom:0}
/* A telephone number or a mailbox set on a line of its own inside a card is a
   standalone target (the contact routes), and inline it answered as 22px. The
   padding grows the hit area and the negative margin gives it back, so no
   line moves. */
.card a[href^="tel:"],.card a[href^="mailto:"]{display:inline-block;padding-block:4px;margin-block:-4px}
/* A link that is the whole of its paragraph or table cell ("Read the guide",
   a start-here route) is a standalone control; `tgo` is set on it in the
   generator because CSS cannot tell a lone link from one inside a sentence. */
.tgo{display:inline-block;padding-block:4px;margin-block:-4px}
.sec--slab .card{background:var(--straw-2);border-bottom-color:var(--accent-d);color:var(--ink-2)}
.sec--slab .card h3{color:var(--ink-2)}

.grid{display:grid;gap:22px}
.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))}

.steps{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr));counter-reset:st}
.step{
  background:var(--cocoa-3);border-bottom:3px solid var(--accent);
  border-radius:var(--radius);padding:22px;position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.step h3{padding-left:44px;position:relative}
.step h3::before{
  counter-increment:st;content:counter(st);
  position:absolute;left:0;top:-2px;
  width:32px;height:32px;border-radius:var(--radius-sm);
  background:var(--accent);color:var(--on-accent);
  font-family:Vollkorn,Georgia,serif;font-size:18px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.step p:last-child{margin-bottom:0}
.sec--slab .step{background:var(--straw-2);border-bottom-color:var(--accent-d);color:var(--ink-2)}
.sec--slab .step h3{color:var(--ink-2)}

.callout{
  background:var(--cocoa-3);border-left:5px solid var(--accent);
  border-radius:var(--radius);padding:18px 22px;margin:22px 0;
}
.callout b{display:block;font-family:Vollkorn,Georgia,serif;font-size:1.13rem;
  color:var(--accent-2);margin-bottom:.3em}
.callout p:last-child{margin-bottom:0}
.sec--slab .callout{background:var(--straw-2);border-left-color:var(--accent-d);color:var(--ink-2)}
.sec--slab .callout b{color:var(--accent-d)}

.alert{
  background:#3c2a1a;border:1px solid #6a4a22;border-left:5px solid var(--accent-2);
  border-radius:var(--radius);padding:18px 22px;margin:22px 0;color:var(--on-dark);
}
.alert b{display:block;font-family:Vollkorn,Georgia,serif;font-size:1.13rem;
  color:var(--accent-2);margin-bottom:.3em}
.alert p:last-child{margin-bottom:0}
.sec--slab .alert{background:#fbeecd;border-color:#dcb968;color:var(--ink-2)}
.sec--slab .alert b{color:var(--accent-d)}

.keypoints{
  background:var(--cocoa-3);border-bottom:3px solid var(--accent);
  border-radius:var(--radius);padding:20px 22px;margin:22px 0;
}
.keypoints b{display:block;font-family:Vollkorn,Georgia,serif;font-size:1.13rem;
  color:var(--accent-2);margin-bottom:.4em}
.keypoints ul{margin:0;padding-left:1.15em}
.keypoints li{margin-bottom:.4em}
.sec--slab .keypoints{background:var(--straw-2);border-bottom-color:var(--accent-d);color:var(--ink-2)}
.sec--slab .keypoints b{color:var(--accent-d)}

.pullquote{
  margin:24px 0;padding:6px 0 6px 24px;
  border-left:4px solid var(--accent);
  font-family:Vollkorn,Georgia,serif;font-size:1.32rem;line-height:1.42;
  color:var(--on-dark);
}
.pullquote cite{display:block;margin-top:.5em;font-family:"Space Grotesk",sans-serif;
  font-size:.92rem;font-style:normal;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-dark-mut)}
.sec--slab .pullquote{color:var(--ink-2);border-left-color:var(--accent-d)}
.sec--slab .pullquote cite{color:var(--mut)}

ul.ticks{list-style:none;margin:0 0 1.05em;padding:0}
ul.ticks li{position:relative;padding-left:27px;margin-bottom:.5em}
ul.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:11px;height:11px;border-radius:2px;background:var(--accent);
}
.sec--slab ul.ticks li::before{background:var(--accent-d)}
ol.ord{padding-left:1.25em}
ol.ord li{margin-bottom:.5em}

/* --------------------------------------------------------------- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.1em;border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:520px;
  background:var(--cocoa-3)}
thead th{
  background:var(--accent);color:var(--on-accent);
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:14.5px;letter-spacing:.09em;text-transform:uppercase;
  text-align:left;padding:11px 14px;
}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;
  color:var(--on-dark)}
tbody tr:last-child td{border-bottom:0}
.sec--slab table{background:var(--straw-2)}
.sec--slab tbody td{color:var(--ink-2);border-bottom-color:var(--line-2)}
.sec--slab thead th{background:var(--accent-d);color:#fff6e2}
.tnote{font-size:15px;color:var(--on-dark-mut)}
.sec--slab .tnote{color:var(--mut)}

/* --------------------------------------------------------------- split
   House rule 12D: a picture and the copy beside it start LEVEL. The shape is
   decided in the generator from each image's own width and height, because
   CSS cannot size one grid item from its sibling's proportions. */
.split{display:grid;grid-template-columns:5fr 7fr;gap:30px;align-items:start;margin:0 0 26px}
.split--flip .split__img{order:2}
.split--tall{grid-template-columns:4fr 8fr}
.split--band{grid-template-columns:minmax(0,1fr)}
.split__img img{border-radius:var(--radius);border-bottom:3px solid var(--accent);
  width:100%;height:auto}
.split__body p:last-child{margin-bottom:0}
/* The cap lives on the PLATE, never on the image (house rule 12 D). The
   generator stamps --imgw, the width this file occupies at 420px tall, so a
   portrait comes out 420px high and a square never dwarfs its copy. The old
   form, `max-height:420px;width:auto` on the <img>, rendered every split image
   here 0x3 until its bytes arrived. `width:100%` on the plate is load-bearing:
   a grid item with auto margins is otherwise sized to fit-content, and a
   pending image shrinks it to nothing. */
@media (min-width:981px){
  .split__img{width:100%;max-width:min(100%,var(--imgw,100%));margin-inline:auto}
  .split--band .split__img{max-width:100%}
}
/* The split stacks at 980 rather than at 760. Measured at 768: a two-column
   list nested inside a 7/12 copy column rendered its cards 187px wide, which
   is the nested-grid fault the house tools exist to catch. Stacking the split
   one breakpoint earlier gives the nested grid the full measure back. */
@media (max-width:980px){
  .split,.split--tall{grid-template-columns:minmax(0,1fr);gap:18px}
  .split--flip .split__img{order:0}
  /* stacked, the cap is 380px tall: the same stamp scaled by 380/420 */
  .split__img{width:100%;max-width:min(100%,calc(var(--imgw,1000px) * .9048));margin-inline:auto}
  .split--band .split__img{max-width:100%}
}
@media (max-width:760px){
  .split__img{max-width:100%}
}

/* --------------------------------------------------------------- figures */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0 0 6px}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:var(--cocoa-3);border-bottom:3px solid var(--accent);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease}
.shots figure img{width:100%}
.shots figcaption{padding:14px 16px 16px;display:block}
.shots figcaption b{display:block;font-family:Vollkorn,Georgia,serif;font-size:1.06rem;
  color:var(--on-dark);margin-bottom:.22em}
.shots figcaption span{display:block;font-size:15px;color:var(--on-dark-mut);line-height:1.5}
.sec--slab .shots figure{background:var(--straw-2);border-bottom-color:var(--accent-d)}
.sec--slab .shots figcaption b{color:var(--ink-2)}
.sec--slab .shots figcaption span{color:var(--mut)}
figure.portrait img{width:var(--figw,320px);max-width:100%;margin-inline:auto}

.badgewall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.badgewall figure{margin:0;text-align:center;background:var(--cocoa-3);
  border-bottom:3px solid var(--accent);border-radius:var(--radius);padding:16px 12px;
  transition:transform .2s ease, box-shadow .2s ease}
.badgewall img{margin:0 auto 9px}
.badgewall b{display:block;font-family:Vollkorn,Georgia,serif;font-size:15.5px;
  color:var(--on-dark);margin-bottom:.25em}
.badgewall span{display:block;font-size:14.5px;color:var(--on-dark-mut);line-height:1.5}
.sec--slab .badgewall figure{background:var(--straw-2);border-bottom-color:var(--accent-d)}
.sec--slab .badgewall b{color:var(--ink-2)}
.sec--slab .badgewall span{color:var(--mut)}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.stats div{display:flex;flex-direction:column;gap:3px;padding-left:16px;
  border-left:3px solid var(--accent)}
.stats b{font-size:2rem;color:var(--accent-2)}
.stats span{font-size:15px;color:var(--on-dark-mut);line-height:1.45}

/* --------------------------------------------------------------- versus */
.versus{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:0;
  border-radius:var(--radius);overflow:hidden}
.versus > div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:16px;
  background:var(--cocoa-3);color:var(--on-dark)}
.versus__h{background:var(--accent)!important;color:var(--on-accent)!important;
  font-weight:700;font-size:14px;letter-spacing:.09em;text-transform:uppercase}
.sec--slab .versus > div{background:var(--straw-2);color:var(--ink-2);border-bottom-color:var(--line-2)}
.sec--slab .versus__h{background:var(--accent-d)!important;color:#fff6e2!important}
@media (max-width:760px){
  .versus{grid-template-columns:minmax(0,1fr)}
  .versus__h{display:none}
}

/* --------------------------------------------------------------- ingredients */
.inglist{display:grid;gap:20px}
.ingcard{background:var(--cocoa-3);border-bottom:3px solid var(--accent);
  border-radius:var(--radius);padding:22px;
  transition:transform .2s ease, box-shadow .2s ease}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;
  margin-bottom:.6em;padding-bottom:.55em;border-bottom:1px solid var(--line)}
.ingcard__top h3{margin:0}
.ing__latin{font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark-mut)}
.ing__dose{margin-left:auto;font-size:14.5px;font-weight:700;color:var(--accent-2);
  border:1px solid var(--accent);border-radius:999px;padding:3px 13px}
.ingcard p:last-child{margin-bottom:0}
.sec--slab .ingcard{background:var(--straw-2);border-bottom-color:var(--accent-d);color:var(--ink-2)}
.sec--slab .ingcard h3{color:var(--ink-2)}
.sec--slab .ing__latin{color:var(--mut)}
.sec--slab .ing__dose{color:var(--accent-d);border-color:var(--accent-d)}
.sec--slab .ingcard__top{border-bottom-color:var(--line-2)}

/* --------------------------------------------------------------- pricing
   The one lifted row on the site. Three tiers, flat straw fills, and the
   featured one carries a ribbon across its top-right corner. */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  align-items:stretch}
.card--pack{
  background:var(--straw);color:var(--ink-2);
  border:1px solid var(--line-2);border-bottom:4px solid var(--accent-d);
  border-radius:var(--radius);padding:0;overflow:hidden;position:relative;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card--pack:hover{box-shadow:var(--lift);transform:translateY(-3px)}
.card--pack.featured{border-bottom-color:var(--accent);box-shadow:var(--lift)}
/* The ribbon is given a fixed length and centres its own text. Sized by the
   padding instead, a longer flag grew past the corner it crosses and the first
   three words were clipped by the card's own overflow: the six-bottle tier
   read "EST PER BOTTLE".
   The visible run of a 45-degree band is sqrt(2) x (its centre's distance in
   from the top edge + in from the right edge), less the glyph height. At the
   13.5px label floor "LOWEST PER BOTTLE" sets 153px wide, and the old 220px
   band centred 48px/48px in showed about 126px of it: "OWEST PER BOTTL".
   Centred 64.5px/64.5px in, it shows about 173px, which leaves ~10px of band
   either side of the longest flag. The band stays in the head and the top
   corner of the body; it never reaches the pack shot, which starts at 107px. */
/* The band sits in its own clipping box in the card's top-right corner. The
   card still rounds and clips it; this box only keeps the rotated band's
   bounding box from registering as overflow of the card. It is transparent
   and ignores the pointer, and 170px holds the whole visible run. */
.pack__corner{position:absolute;top:0;right:0;width:170px;height:170px;overflow:hidden;
  z-index:3;pointer-events:none}
.pack__flag{
  position:absolute;top:47px;right:-65px;z-index:3;
  width:260px;text-align:center;
  transform:rotate(45deg);
  background:var(--accent);color:var(--on-accent);
  font-size:13.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 0;
}
.pack__head{background:var(--cocoa-2);color:var(--on-dark);padding:14px 20px}
.pack__head b{display:block;font-family:Vollkorn,Georgia,serif;font-size:1.28rem}
.pack__head span{display:block;font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-dark-mut)}
.pack__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1 1 auto}
/* Two of the three vendor pack shots are cut-outs and the six-bottle one is
   not: it ships with an opaque white rectangle behind it, which read as a
   white block dropped onto the straw tier. Giving all three the same small
   white plate makes the row one repeated object again. */
.pack__body img{margin:0 auto 12px;background:#fff;border-radius:var(--radius-sm)}
.pack__per{font-size:2.9rem;margin:0;line-height:1;color:var(--ink-2)}
.pack__per sup{font-size:.42em;top:-.85em;position:relative}
.pack__unit{display:block;font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);margin-bottom:.5em}
.pack__tot{margin:0 0 .8em;font-size:17px;color:var(--ink-2)}
.pack__was{color:var(--mut);text-decoration:line-through;margin-left:.4em}
.pack__perks{list-style:none;margin:0 0 16px;padding:0;font-size:15.5px;flex:1 1 auto}
.pack__perks li{position:relative;padding-left:22px;margin-bottom:.4em;color:var(--ink-2)}
.pack__perks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:2px;background:var(--accent-d)}
.pack__marks{margin:10px 0 0;font-size:14px;color:var(--mut);text-align:center}
.buy__note{font-size:15.5px;color:var(--on-dark-mut);max-width:82ch;margin-top:20px}
.sec--slab .buy__note{color:var(--mut)}
@media (max-width:900px){.prices{grid-template-columns:minmax(0,1fr)}}

/* --------------------------------------------------------------- meter */
.meter{display:grid;gap:9px;max-width:560px}
.meter__row{display:grid;grid-template-columns:82px 1fr 48px;align-items:center;gap:12px;
  font-size:15.5px}
.meter__bar{display:block;height:11px;background:var(--line);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.sec--slab .meter__bar{background:var(--line-2)}
.sec--slab .meter__bar i{background:var(--accent-d)}

/* --------------------------------------------------------------- FAQ */
.faq{display:grid;gap:12px}
.faq details{background:var(--cocoa-3);border-bottom:3px solid var(--accent);
  border-radius:var(--radius);
  transition:transform .2s ease, box-shadow .2s ease}
.faq summary{
  cursor:pointer;padding:16px 20px;list-style:none;
  font-family:Vollkorn,Georgia,serif;font-size:1.12rem;font-weight:600;
  color:var(--on-dark);display:flex;justify-content:space-between;gap:16px;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-2);font-size:1.5rem;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"\2013"}
.faq__body{padding:0 20px 18px;font-size:16.5px}
.faq__body p:last-child{margin-bottom:0}
.sec--slab .faq details{background:var(--straw-2);border-bottom-color:var(--accent-d)}
.sec--slab .faq summary{color:var(--ink-2)}
.sec--slab .faq summary::after{color:var(--accent-d)}
.sec--slab .faq__body{color:var(--ink-2)}

/* --------------------------------------------------------------- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;text-align:left}
.rel a{
  display:block;background:var(--cocoa-3);border-bottom:3px solid var(--accent);
  border-radius:var(--radius);padding:20px;text-decoration:none;color:var(--on-dark);
  transition:transform .2s ease, box-shadow .2s ease;
}
.rel b{display:block;font-family:Vollkorn,Georgia,serif;font-size:1.12rem;
  color:var(--accent-2);margin-bottom:.25em}
.rel span{display:block;font-size:15.5px;color:var(--on-dark-mut);line-height:1.5}
.sec--slab .rel a{background:var(--straw-2);border-bottom-color:var(--accent-d);color:var(--ink-2)}
.sec--slab .rel b{color:var(--accent-d)}
.sec--slab .rel span{color:var(--mut)}

/* --------------------------------------------------------------- CTA blocks */
.final{
  background:var(--straw);color:var(--ink-2);
  border-bottom:4px solid var(--accent);border-radius:var(--radius);
  padding:28px 30px;
}
.final h2,.final h3{color:var(--ink-2)}
.final--media{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:start}
.final__img img{border-radius:var(--radius)}
.final__price{font-family:Vollkorn,Georgia,serif;font-size:1.16rem;color:var(--ink-2)}
.final__sm{font-size:15px;color:var(--mut);margin:10px 0 0}
.final a:not(.btn){color:var(--accent-d)}
@media (max-width:760px){.final--media{grid-template-columns:minmax(0,1fr)}
  .final{padding:22px}}

.fcta{background:var(--cocoa-2);border-top:1px solid var(--line);padding:52px 0}
.fcta__box{display:grid;grid-template-columns:1fr 250px;gap:34px;align-items:center}
.fcta__eye{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-2);margin-bottom:.4em}
.fcta__h{font-size:1.72rem;margin:0 0 .5em;color:var(--on-dark)}
.fcta p{color:var(--on-dark)}
.fcta__sm{font-size:15px;color:var(--on-dark-mut);margin:12px 0 0}
.fcta__img img{margin-inline:auto}
@media (max-width:860px){.fcta__box{grid-template-columns:minmax(0,1fr)}
  .fcta__img{order:-1}}

/* --------------------------------------------------------------- sources */
.refs ol{padding-left:1.3em;font-size:15.5px;line-height:1.62}
.refs li{margin-bottom:.6em;color:var(--on-dark-mut)}
.refs a{word-break:break-word}
.sec--slab .refs li{color:var(--mut)}
.byline{
  display:grid;grid-template-columns:62px 1fr;gap:18px;align-items:start;
  background:var(--cocoa-3);border-bottom:3px solid var(--accent);
  border-radius:var(--radius);padding:22px;margin-top:24px;
}
.byline__mark{
  width:62px;height:62px;border-radius:var(--radius-sm);
  background:var(--accent);color:var(--on-accent);
  font-family:Vollkorn,Georgia,serif;font-size:23px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.byline b{display:block;font-family:Vollkorn,Georgia,serif;font-size:1.1rem;
  color:var(--on-dark);margin-bottom:.35em}
.byline p{font-size:16px;color:var(--on-dark-mut);margin:0}
.sec--slab .byline{background:var(--straw-2);border-bottom-color:var(--accent-d)}
.sec--slab .byline b{color:var(--ink-2)}
.sec--slab .byline p{color:var(--mut)}
@media (max-width:600px){.byline{grid-template-columns:minmax(0,1fr)}}

/* --------------------------------------------------------------- AI block */
.qa{background:var(--cocoa-3);border-left:5px solid var(--accent);
  border-radius:var(--radius);padding:22px}
.qa table{min-width:0;background:transparent}
.qa .tablewrap{margin-bottom:0}
.qa tbody td{border-bottom-color:var(--line)}
.sec--slab .qa{background:var(--straw-2);border-left-color:var(--accent-d);color:var(--ink-2)}

/* --------------------------------------------------------------- forms */
.form{display:grid;gap:16px;max-width:640px}
.field{display:grid;gap:6px}
.field label{font-size:15.5px;font-weight:700;color:var(--on-dark)}
.field input,.field select,.field textarea{
  font-family:"Space Grotesk",sans-serif;font-size:17px;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--cocoa-3);color:var(--on-dark);width:100%;
}
.field textarea{min-height:150px;resize:vertical}
.field small{font-size:14.5px;color:var(--on-dark-mut)}
.sec--slab .field label{color:var(--ink-2)}
.sec--slab .field input,.sec--slab .field select,.sec--slab .field textarea{
  background:var(--straw-2);color:var(--ink-2);border-color:var(--line-2)}
.sec--slab .field small{color:var(--mut)}

/* --------------------------------------------------------------- blog */
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.posts article{background:var(--cocoa-3);border-bottom:3px solid var(--accent);
  border-radius:var(--radius);padding:22px;
  transition:transform .2s ease, box-shadow .2s ease}
.posts h3{margin-bottom:.3em}
.posts h3 a{color:var(--on-dark);text-decoration:none}
.posts h3 a:hover{color:var(--accent-2)}
.postmeta{font-size:14.5px;letter-spacing:.06em;color:var(--on-dark-mut);margin-bottom:.6em}
.article{max-width:none}
.toc{background:var(--cocoa-3);border-left:5px solid var(--accent);border-radius:var(--radius);
  padding:20px 24px;margin:0 0 28px}
.toc b{display:block;font-family:Vollkorn,Georgia,serif;font-size:1.12rem;
  color:var(--accent-2);margin-bottom:.4em}
.toc ol{margin:0;padding-left:1.25em;font-size:16px}
.toc li{margin-bottom:.32em}
/* Each entry is its own control and inline it answered as 21px. Block, not
   inline-block: an inline-block's baseline is its LAST line, so a wrapped
   entry would drag its list number down to the second line. */
.toc li a{display:block}
.article h2{margin-top:1.3em}
.article h3{margin-top:1.1em}
.article figure{margin:26px 0}
.article figure img{border-radius:var(--radius);border-bottom:3px solid var(--accent)}
.article figcaption{font-size:15px;color:var(--on-dark-mut);margin-top:.5em;line-height:1.5}
.article .final--media{grid-template-columns:170px 1fr;padding:24px}
@media (max-width:760px){
  .posts{grid-template-columns:minmax(0,1fr)}
  .article .final--media{grid-template-columns:minmax(0,1fr)}
}

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

/* --------------------------------------------------------------- buy bar
   House rule 8: one call to action on screen at a time. The bar arrives once
   the hero has gone and stands down when the reader scrolls back up. */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:var(--cocoa-2);border-top:2px solid var(--accent);
  transform:translateY(105%);transition:transform .26s ease;
  box-shadow:0 -6px 24px rgba(15,10,6,.45);
}
.buybar.show{transform:none}
.buybar__in{
  width:min(var(--wrap), calc(100% - (var(--gutter) * 2)));margin-inline:auto;
  display:flex;align-items:center;gap:20px;padding:11px 0;
}
.buybar__t{flex:1 1 auto;line-height:1.36}
.buybar__t b{display:block;font-family:Vollkorn,Georgia,serif;font-size:1.06rem;
  color:var(--on-dark)}
.buybar__t span{display:block;font-size:14.5px;color:var(--on-dark-mut)}
.buybar .btn{flex:0 0 auto}
@media (max-width:620px){
  .buybar__t span{display:none}
  .buybar__in{gap:12px;padding:9px 0}
  .buybar .btn{padding:11px 16px;font-size:15.5px}
}

/* --------------------------------------------------------------- footer
   Cocoa ground. The index runs in four ranks and the lot number closes it,
   as it opened the masthead. */
footer{background:var(--cocoa-2);border-top:2px solid var(--accent);padding:44px 0 0;
  color:var(--on-dark)}
.fhead{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:start;
  padding-bottom:30px;border-bottom:1px solid var(--line)}
.fbrand{display:block;font-family:Vollkorn,Georgia,serif;font-size:1.85rem;font-weight:700;
  color:var(--on-dark)}
.fbrand span{color:var(--accent-2)}
.frole{font-size:16px;color:var(--on-dark-mut);margin:.3em 0 .8em}
.fcoa{font-size:16px;color:var(--on-dark-mut);margin:0}
.fsealwrap{display:grid;gap:12px}
.fsealrow{display:flex;gap:12px;flex-wrap:wrap}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;
  padding:30px 0;border-bottom:1px solid var(--line)}
.flotbar{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line)}
.flot{margin:0}
.flot span{display:block;font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-mut)}
.flot b{font-family:Vollkorn,Georgia,serif;font-size:2rem;color:var(--accent-2);
  letter-spacing:.01em}
.fcoanote{margin:0;font-size:16px;color:var(--on-dark-mut)}
.fh{font-family:Vollkorn,Georgia,serif;font-size:16px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-2);margin:0 0 .6em}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.4em}
footer a{color:var(--on-dark);text-decoration:none;font-size:16px}
footer a:hover{color:var(--accent-2);text-decoration:underline}

.fcard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
  padding:26px 0;border-bottom:1px solid var(--line);font-size:16px}
.fcard b{font-family:Vollkorn,Georgia,serif;color:var(--accent-2);font-size:1.02rem}
.fcard p{margin:0;color:var(--on-dark-mut)}
.fcard a{text-decoration:underline}
/* The order line and the two mailboxes each sit on a line of their own, so
   they are standalone targets, and inline they answered as 21px. Same repair
   as the footer columns: the padding grows the hit area, the negative margin
   hands the space straight back, and the footer renders identically. */
.fcard a{display:inline-block;padding-block:4px;margin-block:-4px}

.fpay{display:flex;align-items:center;gap:20px;padding:22px 0;flex-wrap:wrap}
.fpay span{font-size:16px;color:var(--on-dark-mut)}

.disc{background:#1b140e;border-top:1px solid var(--line);padding:26px 0 30px;margin-top:0}
.disc p{font-size:16px;color:var(--on-dark-mut);max-width:96ch}
.disc b{color:var(--on-dark)}
.disc__list{list-style:none;margin:14px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 30px}
.disc__list li{font-size:17px;color:var(--on-dark-mut);padding-left:16px;position:relative;
  line-height:1.6}
.disc__list li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:7px;
  border-radius:2px;background:var(--accent)}
.copy{margin-top:18px;font-size:16px;color:var(--on-dark-mut)}
.disc a{color:var(--accent-2)}

/* --------------------------------------------------------------- responsive */
@media (max-width:1060px){
  .fgrid{grid-template-columns:1fr 1fr}
  .fhead{grid-template-columns:minmax(0,1fr);gap:22px}
  .badgewall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .grid.g3,.grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel{grid-template-columns:minmax(0,1fr)}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .grid.g2,.grid.g3,.grid.g4,.steps{grid-template-columns:minmax(0,1fr)}
  .shots,.shots.s2{grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:minmax(0,1fr)}
  .fgrid{grid-template-columns:1fr 1fr;gap:22px}
  .flotbar{grid-template-columns:minmax(0,1fr);gap:12px}
  .fcard{grid-template-columns:minmax(0,1fr);gap:18px}
  .disc__list{grid-template-columns:minmax(0,1fr)}
  .meter__row{grid-template-columns:72px 1fr 40px;font-size:15px}
}
@media (max-width:480px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:minmax(0,1fr)}
  .pack__per{font-size:2.4rem}
}

/* --- 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 8 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 (43,32,24), 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(43,32,24,.06), 0 6px 18px rgba(43,32,24,.07);
  --lift:0 2px 6px rgba(43,32,24,.09), 0 16px 34px rgba(43,32,24,.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. */
.faq,
.split__img,
.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 ==== */