/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Prata Fallback";src:local("Arial");font-weight:400;size-adjust:108.37%;ascent-override:91.63%;descent-override:33.40%;line-gap-override:0.00%}
@font-face{font-family:"Figtree Fallback";src:local("Arial");font-weight:400;size-adjust:101.52%;ascent-override:93.58%;descent-override:24.63%;line-gap-override:0.00%}
@font-face{font-family:"Figtree Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:96.56%;ascent-override:98.39%;descent-override:25.89%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   memohonee.com - MemoHoney, a once-daily memory and focus capsule.
   Design slot: _generators/batch13_assignments.py row 265.

     type     Prata (one weight, 400, every display line) over Figtree
     ground   DARK FIRST - deep espresso, one warm gold accent, nothing else
     cards    one-edge rule: a 4px gold bar down the left, bare fill
     depth    hard offset - a 6px solid displaced shadow, no blur anywhere
     layout   full-bleed dark hero, the bottle centred low on a plinth with
              the headline stacked over it; a narrow reading column below,
              broken by full-width image bands
     motion   amber-recall, two offset warm bodies around the bottle
              (_generators/hero_motifs.py)

   ONE RECONCILIATION, RECORDED RATHER THAN DONE QUIETLY.
   The slot asks for radius 0. House rule 11 sets a card-radius floor and
   preflight.py enforces it twice: the `--radius` token must resolve to 12px
   or more, and the first real panel selector must RENDER at 12px or more.
   There is no radius-0 stylesheet that can clear that gate, so the token is
   authored at the house value and the slot's actual signature - the one-edge
   gold bar, the bare fill, the hard displaced shadow with no blur - is kept
   exactly. Another site holding the same card slot in this batch resolved
   it the same way and gated clean. Reported, not hidden.

   PRATA SHIPS ONE WEIGHT. Every display rule here is 400 and every piece of
   bold on the site is Figtree. Asking for 600 on a Prata heading paints a
   synthesised bold in Chrome and nothing at all in Safari.

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

:root{
  --bg:#150f0a;            /* deep espresso, the page ground */
  --bg-2:#1e150d;          /* the alternating band and the hero plinth */
  --panel:#241a11;         /* cards, tables, panels */
  --panel-2:#2d2116;       /* the solid secondary button, inputs, chips */
  --ink:#f4ece0;           /* reading text, 14:1 on the card fill */
  --ink-2:#e8dcc8;         /* headings */
  --mut:#c2ae94;           /* secondary text, still 7:1 on the card fill */
  --line:#3d2d1e;          /* the hairline */
  --line-2:#513c27;

  /* TWO ALIASES THAT EXIST FOR THE SHARED TOOLS, AND ARE TRUE ANYWAY.
     hero_motifs.py decides whether a hero is dark by looking for
     `color:var(--on-dark)` on `.hero` itself, and then reads the ground
     from a token named --dark, --ink, --night or --deep, in that order.
     A dark-FIRST site declares neither: its ground is --bg and its
     light text is --ink, so the tool read --ink (#f4ece0) as the paper
     and painted a near-white gradient across this espresso hero. That
     is rule 12's opening defect -- a white hero band on a dark site --
     and no gate can see a colour. Caught in a screenshot, not a check.
     Both names describe exactly what they hold here, so they are
     declared rather than the tool being worked around. */
  --dark:#150f0a;          /* the espresso ground, for hero_motifs.py */
  --on-dark:#f4ece0;       /* the ink used on it, which is every page */

  --gold:#e3a93c;          /* the band across the bottle. The only accent. */
  --gold-2:#f6cd74;        /* the light stop of the one CTA gradient */
  --gold-3:#c68c1f;        /* the dark stop, and every gold border */
  --on-gold:#170e04;       /* ink used ON gold, never white */

  --radius:16px;           /* the house floor - see the note above */
  --radius-sm:12px;        /* buttons, inputs, chips */
  --bar:4px;               /* the one edge every card is ruled on */

  /* HARD OFFSET, NO BLUR. Two stops, as house rule 11 requires, but both of
     them solid: a tight gold contact edge and a wide espresso displacement.
     A blurred ambient shadow under a card on a near-black ground is invisible
     anyway, which is how a dark site ends up reading flat. */
  --shadow:2px 2px 0 rgba(227,169,60,.22), 6px 6px 0 rgba(6,3,1,.62);
  --lift:3px 3px 0 rgba(227,169,60,.40), 10px 10px 0 rgba(6,3,1,.70);

  --wrap:1060px;           /* the outer container */
  --col:768px;             /* the reading column inside it */
  --navh:78px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Figtree,"Segoe UI",system-ui,sans-serif;
  font-size:17.5px;
  line-height:1.74;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

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

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

h1,h2,h3,h4{
  font-family:Prata,"Times New Roman",Georgia,serif;
  font-weight:400;
  line-height:1.24;
  letter-spacing:.002em;
  color:var(--ink-2);
}
h1{font-size:clamp(2rem,1.28rem + 1.55vw,2.6rem);margin:.1em 0 .5em}
h2{font-size:clamp(1.58rem,1.18rem + 1.3vw,2.18rem);margin:0 0 .5em}
h3{font-size:1.2rem;margin:0 0 .4em}
h4{font-size:1.06rem;margin:0 0 .35em}
p{margin:0 0 1.1em}
b,strong{font-weight:700;color:var(--ink)}

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

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

.eyebrow{
  display:inline-block;
  font-family:Figtree,"Segoe UI",system-ui,sans-serif;
  font-size:14px;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.5em;
}
.eyebrow::before{
  content:"";display:inline-block;width:22px;height:2px;
  background:var(--gold);vertical-align:.32em;margin-right:.7em;
}

/* --------------------------------------------------------------- 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 one button drawn twice.

   GUARDED AT .btn.btn--x, specificity (0,2,0). These buttons are <a>
   elements, and a container rule such as `.final a` at (0,1,1) outranks a
   single-class colour, repaints the label in the link colour and leaves a
   primary CTA printed in gold on gold. That is the 1.00:1 defect rule 12
   opens with, and 85 of 103 stylesheets on this estate carry the geometry
   that produces it. The guard lives above CRITICAL-END so the broken colour
   never paints first either. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:Figtree,"Segoe UI",system-ui,sans-serif;
  font-size:17px;font-weight:800;letter-spacing:.015em;
  padding:14px 26px;border-radius:var(--radius-sm);
  border:2px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  background:linear-gradient(180deg,var(--gold-2),var(--gold-3));
  color:var(--on-gold);border-color:var(--gold-3);
  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(--gold-2),var(--gold-3));
  color:var(--on-gold);
  border-color:var(--gold-3);
  box-shadow:var(--shadow);
}
.btn.btn--gold:hover,a.btn.btn--gold:hover{
  background:linear-gradient(180deg,#ffdc95,#d99b23);
  color:var(--on-gold);
  box-shadow:var(--lift);transform:translateY(-2px);
}
.btn.btn--ghost,a.btn.btn--ghost{
  background:var(--panel-2);color:var(--ink);border-color:var(--line-2);
}
.btn.btn--ghost:hover,a.btn.btn--ghost:hover{
  background:#3a2b1c;color:#fff;border-color:var(--gold-3);
  box-shadow:var(--lift);transform:translateY(-2px);
}
.btn.btn--outline,a.btn.btn--outline{
  background:transparent;color:var(--gold);border-color:var(--gold-3);
}
.btn.btn--outline:hover,a.btn.btn--outline:hover{
  background:var(--gold);color:var(--on-gold);border-color:var(--gold);
}
.btn--lg{padding:17px 32px;font-size:18px}
.btn--wide{width:100%}
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{
  outline:3px solid var(--gold-2);outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover{transition:none;transform:none}
}

/* --------------------------------------------------------------- topline
   Who is selling, the routine, the lot, the window and the order line. Four
   of rule 12's five trust facts, above the fold on every page and every
   width, so the masthead below can spend its room on identity and ordering. */
.util{background:#100b07;color:var(--mut);font-size:15px;line-height:1.55;
  border-bottom:1px solid var(--line)}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;padding-block:9px}
.util__item{display:inline-flex;align-items:center;gap:.4em}
.util__item b{color:var(--ink);font-weight:700}
.util__item--role{
  font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);font-size:14.5px;
}
.util__item--tel{margin-left:auto}
.util__item--tel a{font-weight:700}

/* --------------------------------------------------------------- masthead
   One espresso band. Identity hard left, a gold rule standing between it and
   the destinations, the Order button drawn as a filled pill hard right. */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(21,15,10,.97);
  border-bottom:1px solid var(--line);
  transition:transform .26s ease, box-shadow .26s ease;
}
.nav--away{transform:translateY(-100%)}
.nav__top{
  display:flex;align-items:center;gap:22px;
  min-height:var(--navh);padding-block:10px;
}
/* The mark is brand_marks.py's ('stack','key'): the keyed ring sits ABOVE the
   wordmark rather than beside it, which is what the `stack` construction
   means, and the whole identity block stands to the left of the gold rule. */
.brand{display:flex;flex-direction:column;align-items:center;gap:4px;
  text-align:center;text-decoration:none;flex:0 0 auto;
  padding-right:22px;border-right:2px solid var(--gold-3)}
.brand svg{width:26px;height:26px;flex:0 0 auto;margin-right:0}
.bw{display:flex;flex-direction:column;line-height:1.12}
.bw b{font-family:Prata,"Times New Roman",Georgia,serif;font-weight:400;
  font-size:23px;color:var(--ink-2);letter-spacing:.01em}
.bw b em{font-style:normal;color:var(--gold)}
.bw small{font-size:14.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mut)}
.menu{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:2px 18px;margin:0;padding:0;flex:1 1 auto}
.menu a{color:var(--ink);text-decoration:none;font-size:15.5px;font-weight:600;
  padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}
.menu__more{display:none}
.nav__buy{flex:0 0 auto;border-radius:999px;padding:11px 22px;font-size:15.5px}
.burger{display:none;background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);width:46px;height:44px;padding:11px 12px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}

/* --------------------------------------------------------------- the hero
   Full bleed, dark, single column. The headline is stacked over the bottle,
   the bottle is centred low and stands on the plinth that carries the fact
   pills, and the motif's two warm bodies sit behind it in .hero__media.

   overflow-x is clipped here because the motif is sized at 112% of the media
   column and would otherwise widen the document. overflow-y stays VISIBLE:
   any non-visible overflow on an ancestor becomes the scrollport a sticky
   descendant resolves against (pitfall 65). */
.hero{
  position:relative;
  overflow-x:clip;
  background:var(--bg);
  color:var(--on-dark);
  padding:30px 0 0;
  border-bottom:1px solid var(--line);
}
.hero__grid{display:grid;grid-template-columns:1fr;gap:0}
/* The hero copy runs WIDER than the reading column below it, and that is
   measured rather than chosen: at 768px this H1 wrapped to four lines and
   pushed the bottle to y=973 on a 900px screen. At 920 it wraps to three
   and the product clears the fold. Rule 12C outranks a tidy measure. */
.hero__copy{max-width:min(920px,100%);margin-inline:auto;text-align:left}
.hero h1{margin:.04em 0 .34em}

.answer{
  background:var(--panel);
  border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 22px 4px;margin:0 0 16px;
}
.answer p{margin:0 0 .9em}
.answer p:first-child b{color:var(--gold-2);font-weight:700}

.hero__road{color:var(--mut);font-size:16.5px;margin:0 0 16px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 14px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0 0 6px;
  color:var(--mut);font-size:16px}
.hero__sub span{display:inline-flex;align-items:center;gap:.45em}
.hero__sub span::before{content:"";width:7px;height:7px;background:var(--gold);
  display:inline-block;transform:rotate(45deg)}

.hero__media{
  position:relative;
  width:min(560px,92vw);
  margin:18px auto -64px;
  display:flex;justify-content:center;
  z-index:2;
}
.hero__card{
  position:relative;z-index:2;
  width:min(460px,84%);
  background:transparent;border:0;padding:0;
}
.hero__card img{width:100%;height:auto;filter:drop-shadow(10px 14px 0 rgba(6,3,1,.55))}
.hero__cap{
  margin:14px 0 0;text-align:center;color:var(--mut);font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;
}
/* THE PLINTH IS FULL BLEED, and that is why it sits OUTSIDE .hero__grid in
   the markup rather than inside it. A `margin-inline:calc(50% - 50vw)` would
   have done it from inside the wrap, but 50vw counts the scrollbar and the
   overhang then relies on .hero{overflow-x:clip} to hide it. A block child of
   .hero is 100% wide with no arithmetic and no overhang. The bottle overlaps
   it by 64px of negative margin, so it reads as a slab the product stands on
   rather than as a second section. */
.hero__base{
  position:relative;z-index:1;
  background:var(--bg-2);
  border-top:1px solid var(--line-2);
  margin-top:0;padding:92px 0 30px;
}
.factpills{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;padding:0}
.factpills li{
  background:var(--panel);border:1px solid var(--line-2);
  border-left:var(--bar) solid var(--gold-3);
  border-radius:999px;padding:8px 18px;font-size:15.5px;color:var(--ink);
}
.factpills li b{color:var(--gold-2)}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.figures>div{
  background:var(--panel);border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px 18px;
}
.figures b{display:block;font-family:Prata,"Times New Roman",Georgia,serif;
  font-weight:400;font-size:1.7rem;color:var(--gold-2);line-height:1.1;margin-bottom:.25em}
.figures span{display:block;color:var(--mut);font-size:15.5px;line-height:1.5}

/* ---- hero, tablet and phone. Above the marker on purpose: these rules are
   what makes the hero a PHONE hero, and a phone that paints the desktop
   arrangement first and relays when the async sheet lands is the estate's
   largest single mobile-CLS fault (critical_hero.py, "Performance pass"). */
@media (max-width:1040px){
  .menu{gap:2px 14px}
  .menu a{font-size:15px}
}
@media (max-width:900px){
  /* The masthead's phone geometry lives ABOVE the critical marker with the
     hero's, and for the same reason: a phone that paints the desktop nav
     and then relays it moves everything under it. Measured at 390 before
     this block existed, the topline stacked to five rows and the masthead
     to two, 327px of chrome before a word of the page. */
  .menu{display:none;order:4;flex-basis:100%}
  .menu.open{display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:10px 0 14px;border-top:1px solid var(--line)}
  .menu.open li{border-bottom:1px solid var(--line)}
  .menu.open a{display:block;padding:12px 2px}
  .menu__more{display:block}
  .burger{display:block;order:3;margin-left:0}
  .nav__top{flex-wrap:wrap;gap:10px}
  .nav .brand{flex-direction:row;align-items:center;gap:10px;text-align:left;
    border-right:0;padding-right:0}
  .nav .brand svg{width:30px;height:30px}
  .nav__buy{order:2;margin-left:auto}
  .hero{padding-top:30px}
  .hero__media{width:min(460px,90vw);margin:24px auto -52px}
  .hero__card{width:min(380px,88%)}
  .hero__base{padding:78px 0 26px}
  .figures{grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:620px){
  .util{font-size:14.5px}
  .util__row{gap:2px 18px;padding-block:7px}
  .util__item--phone{display:none}
  .util__item--role{font-size:14.5px}
  .nav__top{min-height:0;padding-block:8px}
  .bw b{font-size:20px}
  .bw small{font-size:14.5px;letter-spacing:.1em}
  .nav__buy{padding:9px 16px;font-size:15px}
  .burger{width:42px;height:40px;padding:9px 10px}
  .hero{padding-top:24px}
  .hero__copy{max-width:none}
  .hero__media{width:100%;margin:22px auto -44px}
  .hero__card{width:min(320px,86%)}
  .hero__cap{font-size:14px}
  .hero__base{padding:66px 0 22px}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .figures{grid-template-columns:1fr}
  .factpills li{font-size:15px;padding:7px 15px}
}

/* ---- hero motif -- amber-recall ---------------------------------------- */
.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(191deg,#150f0a,#3a2b13 52%,#150f0a)}.hero__media::before{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:0;left:50%;top:50%;width:112%;aspect-ratio:1.25;translate:-50% -50%;filter:blur(13px);background:radial-gradient(closest-side,rgba(227,169,60,0.32),transparent 66%);animation:b13AmberRecall 12s ease-in-out infinite}.hero__media::after{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:0;left:50%;top:50%;width:91%;aspect-ratio:1.25;translate:-50% -50%;filter:blur(16px);background:radial-gradient(closest-side,rgba(227,169,60,0.23),transparent 72%);animation:b13AmberRecall 12s ease-in-out infinite;animation-delay:1.2s}@keyframes b13AmberRecall{0%,100%{transform:scale(.8);opacity:.14}52%{transform:scale(1.06);opacity:0.54}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/

/* --------------------------------------------------------------- sections
   A narrow reading column, broken by full-width bands. The column is the
   slot's layout lever: prose, callouts and lists are held to --col and
   centred, while grids, tables, pack tiles and picture rows run the full
   container width so the page changes measure as you scroll. */
.sec{padding:64px 0;position:relative}
.sec--tint{background:var(--bg-2);border-block:1px solid var(--line)}
.sec--panel{background:var(--panel);border-block:1px solid var(--line-2)}
.sec--center{text-align:center}
.sec--center .sec__head{text-align:center}
.sec--center .eyebrow::before{display:none}
.sec__head{max-width:var(--col);margin:0 auto 30px}
.sec__head p{color:var(--mut);margin:0}

.sec>.wrap>p,
.sec>.wrap>ul,
.sec>.wrap>ol,
.sec>.wrap>.callout,
.sec>.wrap>.alert,
.sec>.wrap>.keypoints,
.sec>.wrap>.pullquote,
.sec>.wrap>.answer,
.sec>.wrap>.qa,
.sec>.wrap>.refs,
.sec>.wrap>.byline,
.sec>.wrap>.tnote,
.sec>.wrap>.buy__note{max-width:var(--col);margin-inline:auto}

.phead{padding:46px 0 10px;background:var(--bg)}
.phead h1{max-width:var(--col);margin-inline:auto}
/* display:block matters. `.eyebrow` is inline-block, so max-width plus
   margin-inline:auto centres nothing and the eyebrow sat 150px to the
   left of the H1 it belongs to on every inner page. Section heads escape
   this because `.sec__head` is already a centred block around both. */
.phead .eyebrow{display:block}
.phead .eyebrow,.phead .crumbs{max-width:var(--col);margin-inline:auto}
.phead .answer,.phead .lead{max-width:var(--col);margin-inline:auto}
.crumbs{font-size:14.5px;color:var(--mut);margin:0 0 14px}
.crumbs a{color:var(--mut)}
.crumbs a:hover{color:var(--gold)}

.lead{font-size:19.5px;line-height:1.66;color:var(--ink);margin:0 0 1.1em}

/* --------------------------------------------------------------- the card
   The one-edge rule. A 4px gold bar down the left of an otherwise bare fill,
   carried by every panel on the site so the page reads as one system. */
.card{
  background:var(--panel);
  border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px 26px;min-width:0;
}
.card h3{color:var(--gold-2)}
.card p:last-child,.card ul:last-child,.card ol:last-child{margin-bottom:0}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}

.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;counter-reset:s}
.step{
  position:relative;counter-increment:s;
  background:var(--panel);
  border-left:var(--bar) solid var(--gold-3);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px 26px 24px 26px;min-width:0;
}
.step h3::before{
  content:counter(s);
  font-family:Prata,"Times New Roman",Georgia,serif;
  color:var(--gold);margin-right:.6em;
}
.step p:last-child{margin-bottom:0}

.keypoints{
  background:var(--panel);border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 26px;margin:0 0 22px;
}
.keypoints b{display:block;margin-bottom:.5em;color:var(--gold-2);font-size:1.05rem}
.keypoints ul{margin:0;padding-left:1.2em}
.callout{
  background:var(--panel-2);border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 26px;margin:0 0 22px;
}
.callout b{display:block;margin-bottom:.4em;color:var(--gold-2);font-size:1.05rem}
.callout p:last-child{margin-bottom:0}
.alert{
  background:#2a1a12;border-left:var(--bar) solid #d4703a;
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 26px;margin:0 0 22px;
}
.alert b{display:block;margin-bottom:.4em;color:#f0a06a;font-size:1.05rem}
.alert p:last-child{margin-bottom:0}
.pullquote{
  margin:0 0 22px;padding:20px 0 20px 26px;
  border-left:var(--bar) solid var(--gold);
  font-family:Prata,"Times New Roman",Georgia,serif;
  font-size:1.32rem;line-height:1.5;color:var(--ink-2);
}
.pullquote cite{display:block;margin-top:.6em;font-family:Figtree,sans-serif;
  font-size:15.5px;font-style:normal;color:var(--mut)}

.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:.55em}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;background:var(--gold);transform:rotate(45deg);
}
.ord{margin:0 0 1.1em;padding-left:1.3em}
.ord li{margin-bottom:.55em}
.ord li::marker{color:var(--gold);font-weight:800}

/* --------------------------------------------------------------- tables */
.tablewrap{
  overflow-x:auto;
  background:var(--panel);
  border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin:0 0 18px;
}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
thead th{
  background:#1a1209;color:var(--gold-2);
  font-weight:800;font-size:14.5px;letter-spacing:.09em;text-transform:uppercase;
  border-bottom:2px solid var(--gold-3);
}
tbody tr:last-child td{border-bottom:0}
.tnote{font-size:15.5px;color:var(--mut);margin:0 0 1.2em}

.versus{
  display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:1px;
  background:var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);margin:0 0 20px;font-size:16px;
}
.versus>div{background:var(--panel);padding:14px 16px}
.versus__h{
  background:#1a1209 !important;color:var(--gold-2);
  font-weight:800;font-size:14px;letter-spacing:.09em;text-transform:uppercase;
}

/* --------------------------------------------------------------- picture beside copy
   House rule 12D: the picture and its copy start LEVEL. align-items:start,
   plus a desktop height cap so a 1200-square cannot dwarf two paragraphs.
   The shape modifier is decided by the generator from the file's own width
   and height, because CSS cannot size one grid item from its sibling. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;
  margin:0 0 26px}
.split--flip .split__img{order:2}
.split--tall{grid-template-columns:minmax(0,.78fr) 1fr}
.split--band{grid-template-columns:1fr}
.split__img{
  background:var(--panel);
  border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:12px;overflow:hidden;
}
.split__img img{width:100%;border-radius:calc(var(--radius) - 6px);background:#fff}
@media (min-width:761px){
  .split__img img{max-height:420px;width:100%;object-fit:contain;margin-inline:auto}
}
.split__body>:last-child{margin-bottom:0}

/* --------------------------------------------------------------- figures with captions
   Never a bare image row: every figure carries a heading and a sentence.
   The cream plate under each shot is deliberate. Four of the nine emblems in
   this vendor pack are black line art on a transparent ground, and several of
   the product cut-outs are white; dropped straight onto espresso they would
   be the "black on black" panel rule 12 opens with. */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{
  margin:0;background:var(--panel);
  border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;min-width:0;
  transition:transform .2s ease, box-shadow .2s ease;
}
.shots figure img{width:100%;background:#fff}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;color:var(--gold-2);margin-bottom:.3em;font-size:1.02rem}
.shots figcaption span{display:block;color:var(--mut);font-size:15.5px;line-height:1.55}

.badgewall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.badgewall figure{
  margin:0;background:var(--panel);
  border-left:var(--bar) solid var(--gold-3);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px;text-align:center;min-width:0;
  transition:transform .2s ease, box-shadow .2s ease;
}
.badgewall figure img{
  width:74px;height:74px;margin:0 auto 12px;
  background:#f6f0e4;border-radius:999px;padding:7px;
}
.badgewall figure b{display:block;color:var(--gold-2);margin-bottom:.3em}
.badgewall figure span{display:block;color:var(--mut);font-size:15.5px;line-height:1.55}

/* The full-width image band. The slot's "narrow column broken by full-width
   bands": the reading measure stops, one picture runs the whole container,
   and the measure resumes underneath it. */
.band{margin:0 0 26px;background:var(--panel);
  border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.band img{width:100%;background:#fff}
.band figcaption{padding:18px 24px;max-width:var(--col);margin-inline:auto}
.band figcaption b{display:block;color:var(--gold-2);margin-bottom:.3em;font-size:1.05rem}
.band figcaption span{display:block;color:var(--mut);font-size:16px;line-height:1.6}

/* --------------------------------------------------------------- ingredients */
.inglist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ingcard{
  background:var(--panel);
  border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 24px;min-width:0;
}
.ingcard__top{margin-bottom:.7em}
.ingcard h3{margin:0 0 .2em;color:var(--gold-2)}
.ing__latin{display:block;color:var(--mut);font-size:15px;font-style:italic}
.ing__dose{display:inline-block;margin-top:.5em;background:var(--panel-2);
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:5px 12px;font-size:14.5px;color:var(--ink)}
.ingcard p:last-child{margin-bottom:0}

/* --------------------------------------------------------------- pricing */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  margin:0 0 20px;align-items:stretch}
.card--pack{
  position:relative;display:flex;flex-direction:column;
  background:var(--panel);
  border-left:var(--bar) solid var(--line-2);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:0;overflow:hidden;min-width:0;
  transition:transform .2s ease, box-shadow .2s ease;
}
/* ONE LITERAL LAYERED SHADOW, WRITTEN OUT RATHER THAN TOKENISED.
   Two solid stops and no blur, which is this slot's depth lever, and the
   same value --lift carries. It is spelled out here because
   modern_surface.py counts colour stops inside the box-shadow DECLARATION
   and cannot see through `box-shadow:var(--shadow)`. With every shadow on
   the site tokenised, the tool reads "31 declarations, 0 layered" and
   appends a :root that replaces both tokens with a blurred, ink-tinted
   pair -- which on a near-black ground paints a pale halo round every card
   and removes the hard offset the slot is built on. One literal keeps the
   tool honest and changes nothing a reader sees. Pitfall 64's shape. */
.card--pack.featured{border-left-color:var(--gold);
  box-shadow:3px 3px 0 rgba(227,169,60,.40), 10px 10px 0 rgba(6,3,1,.70)}
.pack__flag{
  position:absolute;top:0;right:0;z-index:2;
  background:var(--gold);color:var(--on-gold);
  font-size:13.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 13px;border-bottom-left-radius:var(--radius-sm);
}
.pack__head{background:#1a1209;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.pack__head b{display:block;font-family:Prata,"Times New Roman",Georgia,serif;
  font-weight:400;font-size:1.34rem;color:var(--ink-2)}
.pack__head span{display:block;color:var(--mut);font-size:15px}
.pack__body{padding:20px;display:flex;flex-direction:column;flex:1 1 auto}
/* THE PACK SHOTS SIT ON A CREAM PLATE, and that is a fix rather than a
   flourish. Two of the three vendor pack shots are transparent cut-outs and
   the six-bottle one is an opaque WHITE JPEG-style webp, so on an espresso
   card the first two floated and the third rendered as a white rectangle.
   Seen in a screenshot, invisible to every gate. A plate under all three
   makes the row one system and makes the odd file out look deliberate. */
.pack__body img{margin:0 auto 14px;background:#fff;
  border-radius:calc(var(--radius) - 6px);padding:8px}
.pack__per{
  font-family:Prata,"Times New Roman",Georgia,serif;font-weight:400;
  font-size:2.5rem;color:var(--gold-2);margin:0;line-height:1;
}
.pack__per sup{font-size:.48em;top:-.72em;position:relative}
.pack__unit{display:block;color:var(--mut);font-size:15px;margin-bottom:.6em}
.pack__tot{margin:0 0 .9em;font-size:16.5px}
.pack__tot b{color:var(--ink)}
.pack__was{color:var(--mut);text-decoration:line-through;margin-left:.4em}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:15.5px;flex:1 1 auto}
.pack__perks li{position:relative;padding-left:22px;margin-bottom:.45em;color:var(--ink)}
.pack__perks li::before{content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.pack__marks{margin:10px 0 0;color:var(--mut);font-size:14.5px;text-align:center}
.buy__note{color:var(--mut);font-size:16px}

.meter{margin:0 0 20px}
.meter__row{display:grid;grid-template-columns:64px 1fr 54px;align-items:center;
  gap:12px;margin-bottom:9px;font-size:16px}
.meter__bar{display:block;height:12px;background:var(--panel-2);
  border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--gold)}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stats>div{background:var(--panel);border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.stats b{display:block;font-family:Prata,"Times New Roman",Georgia,serif;
  font-weight:400;font-size:1.9rem;color:var(--gold-2);line-height:1.1}
.stats span{display:block;color:var(--mut);font-size:15.5px;line-height:1.5}

.stars{color:var(--gold);letter-spacing:.1em}
.stars i{font-style:normal;opacity:.4}

/* --------------------------------------------------------------- Q and A */
.faq{
  background:var(--panel);
  border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 24px;
  font-weight:700;font-size:17px;color:var(--ink);
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--gold-2)}
.faq__body{padding:0 24px 20px;color:var(--ink)}
.faq__body p:last-child{margin-bottom:0}

.qa{
  background:var(--panel-2);
  border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 24px;
}
.qa .tablewrap{box-shadow:none;border-left:0;background:transparent;margin-bottom:0}
.qa td{font-size:16px}

/* --------------------------------------------------------------- references */
.refs ol{margin:0;padding-left:1.3em;font-size:15.5px;line-height:1.6;color:var(--mut)}
.refs li{margin-bottom:.7em;word-break:break-word}
.refs a{color:var(--gold)}

.byline{
  display:flex;gap:20px;align-items:flex-start;
  background:var(--panel);border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:24px 26px;margin-top:22px;
}
.byline__mark{
  flex:0 0 auto;width:54px;height:54px;border-radius:999px;
  background:var(--gold);color:var(--on-gold);
  display:flex;align-items:center;justify-content:center;
  font-family:Prata,"Times New Roman",Georgia,serif;font-size:1.2rem;
}
.byline b{display:block;margin-bottom:.4em;color:var(--gold-2)}
.byline p{margin:0;font-size:16px;color:var(--mut);line-height:1.62}

/* --------------------------------------------------------------- keep reading */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel a{
  display:block;text-decoration:none;
  background:var(--panel);border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px 22px;min-width:0;
  transition:transform .2s ease, box-shadow .2s ease;
}
.rel a b{display:block;color:var(--gold-2);margin-bottom:.3em;font-size:1.05rem}
.rel a span{display:block;color:var(--mut);font-size:15.5px;line-height:1.55}

/* --------------------------------------------------------------- closing CTA */
.final{
  background:var(--panel);
  border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--lift);
  padding:30px 32px;
}
.final--media{display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:start}
.final__img img{width:100%;background:#fff;border-radius:calc(var(--radius) - 6px);padding:8px}
.final__body h2{margin-bottom:.4em}
.final__price{color:var(--gold-2);font-weight:700;margin:0 0 1em}
.final__sm{margin:14px 0 0;color:var(--mut);font-size:15.5px}
.final a.btn{color:var(--on-gold)}

.fcta{background:var(--bg-2);border-top:1px solid var(--line);padding:56px 0}
.fcta__box{display:grid;grid-template-columns:1fr 250px;gap:32px;align-items:start}
.fcta__eye{display:inline-block;color:var(--gold);font-size:14px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:.5em}
.fcta__h{font-family:Prata,"Times New Roman",Georgia,serif;font-weight:400;
  font-size:clamp(1.42rem,1.1rem + 1vw,1.9rem);color:var(--ink-2);
  line-height:1.26;margin:0 0 .6em}
.fcta__sm{margin:14px 0 0;color:var(--mut);font-size:15.5px}
.fcta__img img{width:100%;background:#fff;border-radius:calc(var(--radius) - 6px);padding:8px}

/* --------------------------------------------------------------- forms */
.formcard{
  background:var(--panel);border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 28px;
}
.form{display:grid;gap:16px}
.field label{display:block;font-weight:700;margin-bottom:.35em;font-size:16px}
.field input,.field select,.field textarea{
  width:100%;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:12px 14px;font:inherit;font-size:16.5px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:3px solid var(--gold-2);outline-offset:2px;border-color:var(--gold-3)}
.form__hint{color:var(--mut);font-size:15.5px;margin:0}

/* --------------------------------------------------------------- blog */
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.posts article{
  background:var(--panel);border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 26px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.posts h3{margin:0 0 .35em}
.posts h3 a{color:var(--gold-2);text-decoration:none}
.posts h3 a:hover{color:var(--gold)}
.posts p{margin:0 0 .6em}
.postmeta{color:var(--mut);font-size:15.5px;margin:0 0 1em}
.article{max-width:var(--col);margin-inline:auto}
.article h2{margin-top:1.5em}
.article figure{
  margin:26px 0;background:var(--panel);
  border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.article figure img{width:100%;background:#fff}
.article figure figcaption{padding:14px 18px;color:var(--mut);font-size:15.5px}
.article figure.portrait img{width:var(--figw,320px);margin-inline:auto}
.toc{
  background:var(--panel-2);border-left:var(--bar) solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 26px;margin:0 0 26px;
}
.toc b{display:block;margin-bottom:.5em;color:var(--gold-2)}
.toc ol{margin:0;padding-left:1.3em}
.toc li{margin-bottom:.35em}
/* Tap targets (WCAG 2.5.8, 24px). The contents links, the blog-index titles
   and the one-link lines inside cards (the order desk's phone and email on
   contact.html, "Read the guide" on guides.html) stand alone, so the inline
   exemption does not cover them, and they measured 20-23px tall. Vertical
   padding on an INLINE box widens its hit area and its border box without
   touching the line box, so this moves no geometry and cannot shift layout
   when the async sheet lands -- which is why it may live below CRITICAL-END. */
.toc li a,.posts h3 a,.card p>a:not(.btn){padding-block:3px}
.dtable{width:100%}

/* --------------------------------------------------------------- footer
   Espresso ground. Five short columns of destinations, the guarantee set as
   running prose rather than a list, then the contact card, the payment strip
   and the legal rail. House rule 10's floor is authored here rather than
   patched on: running text and links 16.5px, column headings 15.5px. */
footer{background:#100b07;border-top:2px solid var(--gold-3);padding:54px 0 0;
  font-size:16.5px;line-height:1.7}
.fgrid{display:grid;grid-template-columns:2.2fr repeat(5,1fr);gap:26px;
  padding-bottom:34px;border-bottom:1px solid var(--line)}
.fseals{min-width:0}
.fbrand{display:block;font-family:Prata,"Times New Roman",Georgia,serif;
  font-size:1.5rem;color:var(--ink-2);margin-bottom:.2em}
.fbrand span{color:var(--gold)}
.frole{color:var(--mut);font-size:16.5px;margin:0 0 .9em}
.fguar{color:var(--ink);font-size:16.5px;margin:0 0 .9em}
.flot{margin:0 0 .5em;font-size:16.5px}
.flot span{display:block;color:var(--mut);font-size:16px;
  letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.flot b{font-family:Prata,"Times New Roman",Georgia,serif;font-weight:400;
  font-size:1.2rem;color:var(--gold-2)}
.fcoa{color:var(--mut);font-size:16.5px;margin:0 0 .9em}
.fsealrow{display:flex;gap:10px;margin-bottom:10px}
.fsealrow img{width:58px;height:58px;background:#f6f0e4;border-radius:999px;padding:6px}
.fseals>span{display:block;color:var(--mut);font-size:16.5px}
.fh{font-size:15.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .8em}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.45em}
footer a{color:var(--ink);text-decoration:none;font-size:16.5px;
  display:inline-block;padding:3px 0}
/* A link inside footer PROSE has to look like a link. The rule above is for
   the five destination columns, where a list of gold words would read as a
   warning strip; in the guarantee paragraph and the lot note it made an
   ordinary inline link indistinguishable from bold text. */
.fguar a,.fcoa a,.fseals>span a,.fcard a,.fpay a,.disc a{color:var(--gold);
  text-decoration:underline;display:inline}
footer a:hover{color:var(--gold);text-decoration:underline}
.fcard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  padding:26px 0;border-bottom:1px solid var(--line)}
.fcard p{margin:0;font-size:17px;color:var(--mut)}
.fcard b{color:var(--ink)}
.fpay{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:22px 0}
.fpay img{background:transparent}
.fpay span{color:var(--mut);font-size:16.5px}
.disc{background:#0b0704;border-top:1px solid var(--line);padding:26px 0 30px;
  font-size:16px;line-height:1.66;color:var(--mut)}
.disc b{color:var(--ink)}
.disc__list{list-style:none;margin:14px 0 0;padding:0;
  columns:2;column-gap:36px}
.disc__list li{margin-bottom:.7em;break-inside:avoid;font-size:17px}
.disc .copy{margin:18px 0 0;color:var(--mut);font-size:16px}

/* --------------------------------------------------------------- buy bar
   House rule 8: one call to action on screen at a time. The bar exists on
   desktop as well as on the phone; the direction class on <html> decides
   which of the two is showing. */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;
  background:#100b07;border-top:2px solid var(--gold-3);
  transform:translateY(105%);transition:transform .28s ease;
}
.buybar.show{transform:translateY(0)}
html.chrome-up .buybar{transform:translateY(105%)}
.buybar__in{width:min(var(--wrap), calc(100% - 40px));margin-inline:auto;
  display:flex;align-items:center;gap:18px;padding:12px 0}
.buybar__t{flex:1 1 auto;min-width:0;font-size:16px}
.buybar__t b{display:block;color:var(--ink)}
.buybar__t span{display:block;color:var(--mut);font-size:15px}
@media (prefers-reduced-motion:reduce){.buybar{transition:none}}

/* --------------------------------------------------------------- motion
   Every clickable surface answers the pointer: 2px of travel and the harder
   offset. 2px registers without reflowing the row beside it. */
.shots figure:hover,.badgewall figure:hover,.rel a:hover,
.card--pack:hover,.posts article:hover{
  transform:translateY(-2px);box-shadow:var(--lift);
}
@media (prefers-reduced-motion:reduce){
  .shots figure:hover,.badgewall figure:hover,.rel a:hover,
  .card--pack:hover,.posts article:hover{transform:none}
}

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

/* --------------------------------------------------------------- responsive */
@media (max-width:1040px){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:24px}
  .fseals{grid-column:1 / -1}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .menu{display:none;order:4;flex-basis:100%}
  .menu.open{display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:10px 0 14px;border-top:1px solid var(--line)}
  .menu.open li{border-bottom:1px solid var(--line)}
  .menu.open a{display:block;padding:12px 2px}
  .menu__more{display:block}
  .burger{display:block;order:3;margin-left:auto}
  .nav__top{flex-wrap:wrap;gap:12px}
  .brand{border-right:0;padding-right:0}
  .nav__buy{order:2;margin-left:auto}
  .sec{padding:52px 0}
  .grid.g3,.rel,.shots,.badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prices{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  .final--media{grid-template-columns:1fr}
  .final__img{max-width:230px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{max-width:230px}
  .split,.split--tall{grid-template-columns:1fr}
  .split--flip .split__img{order:0}
  .versus{grid-template-columns:1fr;font-size:15.5px}
  .versus__h:nth-of-type(2),.versus__h:nth-of-type(3){display:none}
  .inglist{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:17px}
  .sec{padding:44px 0}
  .grid,.grid.g2,.grid.g3,.steps,.rel,.shots,.shots.s2,.badgewall,
  .stats{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .fcard{grid-template-columns:1fr}
  .disc__list{columns:1}
  .card,.step,.ingcard,.callout,.alert,.keypoints,.final,.formcard,
  .byline{padding-left:20px;padding-right:20px}
  .byline{flex-direction:column;gap:14px}
  .buybar__in{gap:12px;padding:10px 0}
  .buybar__t span{display:none}
  .util__item--tel{margin-left:0}
  .meter__row{grid-template-columns:54px 1fr 46px;font-size:15.5px}
}
@media (max-width:420px){
  .fgrid{grid-template-columns:1fr}
  .buybar__t{font-size:15px}
}

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

/* ==== 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 ==== */
/* brand mark: stack construction */
.brand{flex-direction:column;align-items:center;gap:4px;text-align:center}.brand svg{width:26px;height:26px;margin-right:0!important}