/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Gilda Display Fallback";src:local("Georgia");font-weight:400;size-adjust:102.10%;ascent-override:87.37%;descent-override:27.91%;line-gap-override:0.00%}
@font-face{font-family:"Assistant Fallback";src:local("Arial");font-weight:400;size-adjust:93.88%;ascent-override:108.76%;descent-override:30.57%;line-gap-override:0.00%}
@font-face{font-family:"Assistant Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:91.80%;ascent-override:111.22%;descent-override:31.26%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* memoehoney.com - MemoHoney, a licensed U.S. retail desk.
   Design slot: _generators/batch13_assignments.py row 261.
   Type       Gilda Display over Assistant
   Layout     two columns at 6/6: copy LEFT with the price ladder directly
              under it, the bottle RIGHT on the parchment ground; a 68ch
              measure everywhere text runs below. (Slot rewritten 21 Sep 2026
              under house rule 12 C2; it was a centred axis.)
   Cards      outlined, 2px border, flat parchment fill, featured tier inverted
   Ground     parchment throughout, one walnut band across the facts,
              nothing washed - the hero carries the site's only gradient
   Depth      none. Separation is border and space. There is exactly ONE
              box-shadow declaration in this file and it is an INSET edge on
              .answer, drawn rather than cast: two stops so the house
              modern-surface floor resolves, no blur outside the box, nothing
              that reads as a lift. Hover answers with 2px of travel instead.
   Header     the identity centred above a centred destination rank, a walnut
              rule closing it, and no button in the bar
   Footer     parchment, the returns address boxed, destinations listed beneath
   Motif      honey-rise - a slow amber column climbing past the bottle

   The palette is the bottle's own: the cap and body are off-white, the band
   across the label is honey, and the INSIDE MEMOHONEY artwork sets the whole
   thing on near-black walnut. Parchment is the paper that band sits best on.

   ONE DEVIATION FROM THE SLOT, RECORDED HERE RATHER THAN HIDDEN: the slot
   asks for radius 0. House rule 11 sets a radius floor and `modern_surface.py`
   states in its own source that the floor "outranks a slot that chose square
   corners"; `preflight.py` fails any site whose card renders under 12px. So
   --radius is 16px and the panels carry it. Everything else the slot asks for
   is held exactly, and the square character survives where the floor does not
   reach: the bands, the rules, the buttons' hard honey edge, the tables and
   the walnut facts strip.

   Everything above CRITICAL-END is inlined into every page head.
   No brace may appear before the :root block: validate.py reads the declared
   custom properties from the text up to the first closing brace in this file. */
:root{
  --ink:#2b2018;            /* body text on parchment */
  --ink-2:#584535;          /* secondary */
  --ink-3:#6e5a44;          /* captions and meta; 4.99:1 on --paper-3, was #77634d at 4.36:1 */
  --paper:#faf4e6;          /* the page - parchment */
  --paper-2:#f3e9d3;        /* tinted sections */
  --paper-3:#ece0c4;        /* inset strips */
  --walnut:#4a3524;         /* the band across the facts */
  --walnut-2:#3a291b;       /* its deeper edge */
  --walnut-3:#5d4631;       /* rules drawn on parchment */
  --honey:#b8801f;          /* the label's band */
  --honey-d:#7f560e;        /* eyebrows, links, per-bottle figure: 4.95:1 on --paper-3 and
                               4.93:1 on the hero's #eedfc2 stop; #8f6212 read 4.08:1 there */
  --honey-l:#e0ad4a;
  --line:#ddcda9;
  --line-2:#c3ad83;
  --on-dark:#f7f0e1;
  --on-dark-2:#ddccb0;
  --good:#4a6b3f;
  --warn:#8a5a14;
  --wrap:1150px;
  --measure:68ch;
  --measure-wide:960px;
  --radius:16px;
  --radius-sm:12px;
  --navh:126px;
  --display:"Gilda Display","Gilda Display Fallback",Georgia,"Times New Roman",serif;
  --text:"Assistant","Assistant Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17.5px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--honey-d);text-underline-offset:3px}
a:hover{color:var(--walnut)}
h1,h2,h3,h4{font-family:var(--display);color:var(--walnut-2);font-weight:400;line-height:1.16;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,1.3rem + 2.4vw,3.15rem);letter-spacing:-.005em}
h2{font-size:clamp(1.5rem,1.17rem + 1.3vw,2.2rem)}
h3{font-size:1.24rem}
h4{font-size:1.06rem}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
/* Gilda Display ships one weight, so a heading never bolds; emphasis inside
   running text changes to the sans at 700, which is a real weight rather than
   a synthesised one. */
b,strong{font-weight:700;color:var(--walnut-2)}
.wrap{width:min(var(--wrap),91%);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--walnut);color:var(--on-dark);padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--honey-d);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:block;font-family:var(--text);font-size:0.9375rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--honey-d);
  margin:0 0 12px;
}

/* ---- buttons
   Two weights, drawn rather than lit: a solid honey plate with a hard walnut
   base edge, and an outlined ghost. No gradient here on purpose - the hero
   ground is the one gradient on this site. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;padding:15px 32px;
  font-family:var(--text);font-size:1.03rem;font-weight:700;letter-spacing:.01em;
  border:2px solid var(--walnut-2);border-radius:var(--radius-sm);
  cursor:pointer;text-decoration:none;
  background:var(--honey);color:#1f1509;
  transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
}
.btn:hover{background:var(--honey-l);color:#1f1509;border-color:var(--walnut)}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--honey);color:#1f1509}
.btn--lg{min-height:64px;padding:17px 38px;font-size:1.12rem}
.btn--ghost{background:none;color:var(--walnut-2);border-color:var(--walnut-3)}
.btn--ghost:hover{background:var(--paper-3);color:var(--walnut-2)}
.btn--wide{width:100%}

/* ---- topline: the facts a buyer wants before the navigation */
.util{background:var(--walnut-2);color:var(--on-dark-2);font-size:.9375rem;line-height:1.45;
  border-bottom:2px solid var(--honey-d)}
.util__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:2px 14px;padding-block:7px;text-align:center}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:1px;height:14px;
  background:var(--walnut-3);flex:0 0 auto;margin-right:9px}
.util b{color:var(--on-dark);font-weight:700}
.util a{color:var(--honey-l);text-decoration:none}
.util a:hover{color:#fff;text-decoration:underline}
/* The topline holds ONE row at every width, or it holds a stack with no
   separators. A wrapped flex row keeps each item's leading rule, so the second
   line opened on a stray bar, and on a phone the five items took five lines
   and 120px of the first screen. Items drop by priority instead: the lot
   first, then the window; the role and the order line always stay. */
@media (max-width:1180px){.util__item--trim{display:none}}
@media (max-width:900px){.util__item--mid{display:none}}
@media (max-width:600px){
  .util__row{flex-direction:column;gap:0}
  .util__item+.util__item::before{display:none}
}

/* ---- header: the identity centred above a centred destination rank.
   No order button rides in this bar. The topline above carries the phone and
   the bottom bar carries the cart, so the header's whole job is the name, what
   this desk is, and where the reader can go. A single walnut rule closes it. */
.nav{position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:2px solid var(--walnut);
  transition:transform .28s ease}
.nav--away{transform:translateY(-100%)}
.nav__top{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding-block:9px 0;position:relative}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--walnut-2);
  padding-inline:14px}
.brand__glyph{width:38px;height:38px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class: brand_marks.py replaces the
   <svg> inside .brand and does not carry the class onto its replacement, so a
   class-only rule stops applying the moment that tool runs (pitfall 16). */
.brand>svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.bw b{font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--walnut-2);letter-spacing:.005em}
.bw b em{font-style:normal;color:var(--honey-d)}
.bw small{font-family:var(--text);font-size:0.9062rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3)}
/* 6px a side, not 8: at the 1150px wrap the thirteen destinations measured
   1114px in Assistant and 1168px in the fallback face, so the rank broke onto
   a second row until the web font arrived and then pulled the page up 41px.
   At 6px the fallback row is 1117px and both faces paint one row. */
.menu{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:1px 2px;margin:0;padding:0 0 8px;border-top:1px solid var(--line);
  width:100%;padding-top:7px}
.menu a{display:block;padding:5px 6px;text-decoration:none;color:var(--ink-2);
  font-size:.92rem;font-weight:600;white-space:nowrap;
  border:2px solid transparent;border-radius:var(--radius-sm)}
.menu a:hover{color:var(--walnut-2);border-color:var(--line-2)}
.menu a[aria-current]{color:var(--walnut-2);border-color:var(--honey)}
.menu__more a{color:var(--ink-3);font-weight:400}
.burger{display:none;position:absolute;right:0;top:10px;width:44px;height:44px;
  background:var(--paper);border:2px solid var(--walnut-3);border-radius:var(--radius-sm);
  cursor:pointer;padding:11px 10px}
.burger span{display:block;height:2px;background:var(--walnut-2);margin:4px 0}

/* ---- hero: TWO COLUMNS at 6/6 from 1000px up (house rule 12 C2, owner 21
   Sep 2026). The top-level rules are the STACKED form a phone and a narrow
   tablet get; the two-column form is the min-width:1000px block after the
   ladder. Both sit above the critical marker, so the first paint is already
   the right one at every width.

   Until 21 Sep this was one centred axis -- headline, Quick Answer and both
   calls ABOVE the bottle -- and the product started at y=707 on a 900px
   screen: the first screen carried no product at all. */
.hero{position:relative;overflow-x:clip;overflow-y:visible;
  background:var(--paper-2);
  border-bottom:2px solid var(--walnut);
  padding:28px 0 46px}
.hero__grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
/* Stacked, both columns are promoted so the whole order is composed here, in
   the order references/hero.md sets: the bottle directly after the headline,
   because a reader from an advertisement wants the product to confirm the H1
   before reading sixty words about it; then the answer, the calls, and the
   roadmap, which carries the route to the evidence and the phone, inside the
   first two screens of a phone. Every child has an explicit order. */
.hero__copy,.hero__side{display:contents}
.hero .eyebrow{order:1}
.hero h1{order:2;max-width:34ch;margin-bottom:.32em;
  font-size:clamp(1.74rem,1.05rem + 1.8vw,2.5rem)}
.hero__media{order:3;position:relative;width:100%;max-width:520px;margin:14px auto 18px;
  display:flex;justify-content:center}
.hero .answer{order:4}
.hero__cta{order:5;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin:0 0 6px}
.hero__road{order:6;max-width:var(--measure);color:var(--ink-2);font-size:1.02rem;
  margin:18px 0 0}
.hero__sub{order:7;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;
  margin:16px 0 0;padding:0;font-size:1rem;color:var(--ink-2)}
.ladder{order:8}
.factpills{order:9}
.figures{order:10}
/* The copy sits ABOVE the motif. The honey column is positioned and climbs
   past the bottle; a positioned box paints over every unpositioned sibling,
   and stacked on a phone the bottle sits directly under the headline, so the
   climb would cross it. Rule 7 keeps the motion around the bottle and off the
   copy: the copy is lifted and the column passes behind it. */
.hero__copy>*,.hero__road,.hero__sub,.factpills,.figures{position:relative;z-index:2}
.hero__sub span{display:inline-flex;align-items:center;gap:8px}
.hero__sub span::before{content:"";width:8px;height:8px;flex:0 0 auto;
  border:2px solid var(--honey-d)}
/* The bottles stand on the parchment ground itself, not on a plate: the
   master is a cut-out, so the ground reads straight through it and the honey
   column climbing behind stays visible through the gaps between the bottles. */
.hero__card{position:relative;z-index:2;width:100%;padding:10px 10px 0;background:none}
.hero__card img{width:100%;max-width:420px;margin-inline:auto;height:auto}
.hero__cap{font-size:.9375rem;color:var(--ink-3);margin:6px 0 0;letter-spacing:.02em}
.factpills{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px;margin:22px 0 0;padding:0;max-width:var(--measure-wide)}
.factpills li{border:2px solid var(--line-2);border-radius:var(--radius-sm);
  padding:7px 15px;font-size:1rem;color:var(--ink-2);background:var(--paper)}
.factpills b{color:var(--walnut-2)}
/* Three separate tiles, each with its own edge and its own curve. It was one
   square frame holding three rounded cells, so every divider bowed at the
   corners and a phone stacked curved separator lines. */
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin:26px 0 0;width:100%;max-width:var(--measure-wide)}
.figures>div{padding:18px 16px;text-align:center;background:var(--paper);
  border:2px solid var(--line-2);border-radius:var(--radius)}
.figures b{display:block;font-family:var(--display);font-weight:400;font-size:2rem;
  color:var(--walnut-2);line-height:1.1}
.figures span{display:block;font-size:.9375rem;color:var(--ink-3);margin-top:4px}

/* the quick answer - the one drawn edge on this site, an inset rule rather
   than a cast shadow */
.answer{max-width:var(--measure);margin:0 auto 16px;text-align:left;
  background:var(--paper);border:2px solid var(--line-2);border-radius:var(--radius);
  padding:17px 22px;
  box-shadow:inset 5px 0 0 #b8801f, inset 0 0 0 2px rgba(74,53,36,.10)}
.answer p{margin:0 0 .7em}
.answer p:last-child{margin:0}
.answer b{color:var(--walnut-2)}

/* ---- the hero price ladder: three rungs, directly under the copy.
   Rule 12 asks the first screen to carry what it costs and what the guarantee
   is; the slot puts the answer in the copy column, directly under the calls. */
.ladder{width:100%;max-width:var(--measure-wide);margin:20px auto 0;
  border:2px solid var(--walnut);border-radius:var(--radius);background:var(--paper);
  overflow:hidden}
.ladder__h{display:block;background:var(--walnut);color:var(--on-dark);
  font-size:.9375rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 14px}
.rung{display:grid;grid-template-columns:1.1fr .8fr 1fr auto;align-items:center;
  gap:10px 16px;padding:13px 16px;border-top:2px solid var(--line-2);
  text-align:left;text-decoration:none;color:var(--ink)}
.rung:first-of-type{border-top:0}
.rung:hover{background:var(--paper-2);color:var(--ink)}
.rung b{font-family:var(--display);font-weight:400;font-size:1.2rem;color:var(--walnut-2)}
.rung span{font-size:1rem;color:var(--ink-2)}
.rung .rung__per{font-family:var(--display);font-size:1.5rem;color:var(--honey-d)}
.rung .rung__go{font-weight:700;color:var(--honey-d);white-space:nowrap}
.rung--top{background:var(--paper-3)}
.ladder__f{margin:0;padding:11px 16px;border-top:2px solid var(--line-2);
  font-size:.9375rem;color:var(--ink-3);text-align:left}

/* ---- the hero at >=1000px: TWO COLUMNS, 6/6 ------------------------------
   Copy LEFT -- eyebrow, headline, Quick Answer, the two calls, and the ladder
   directly under them. The bottle RIGHT on the parchment ground, with the
   roadmap and the supporting line under it: that paragraph is the route to
   the evidence and the phone (rule 12 A 4 and 5), and under the bottle it is
   on the first screen at 1440x900, where at the foot of the hero it never
   was. The fact pills and the figures run below both, centred on the measure.

   Both columns start at the top of the grid (rule 12 D): the bottle is level
   with the eyebrow, not centred against a copy column twice its height.

   The pair of calls is set a size down from --lg here, and only here. At the
   full size the two buttons measure 356 + 238px and cannot share a 547px
   column; wrapped, the ghost takes a row of its own and pushes the ladder --
   the price -- off the first screen. Sized so the pair ALSO fits in the
   fallback face (526px, measured with the web fonts blocked), or the row
   wraps until Assistant arrives and then jumps 79px when it does. */
@media (min-width:1000px){
  .hero{padding:34px 0 50px}
  .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:56px;row-gap:0;align-items:start;text-align:left}
  .hero__copy,.hero__side{display:block;min-width:0;grid-row:1}
  .hero__copy{grid-column:1}
  .hero__side{grid-column:2}
  .hero h1{max-width:none;margin-top:.28em}
  .hero .answer{max-width:none;margin:0 0 18px}
  .hero__cta{justify-content:flex-start;margin:0}
  .hero__cta{gap:10px}
  .hero__cta .btn--lg{padding:17px 20px;font-size:1.06rem}
  .ladder{max-width:none;margin:20px 0 0}
  /* one rung, two lines: name over the pack total on the left, the per-bottle
     figure and the cart link on the right. Four across does not fit 547px. */
  .rung{grid-template-columns:minmax(0,1fr) auto auto;gap:1px 18px;padding:11px 16px}
  .rung b{grid-column:1;grid-row:1}
  .rung>span:nth-of-type(2){grid-column:1;grid-row:2;font-size:.95rem}
  .rung .rung__per{grid-column:2;grid-row:1 / span 2}
  .rung .rung__go{grid-column:3;grid-row:1 / span 2}
  .hero__media{max-width:none;margin:0}
  .hero__card{padding:0}
  /* The master is a 1200px square cut-out whose bottles fill only the middle
     57% x 75% of it (alpha box 253-942 x 178-1077), so at full column width
     the pair floats in a band of empty ground and the caption lands 80px
     under the glass. 6/5 with cover trims the empty band top and bottom and
     nothing else: at this width the crop is 45px a side and the alpha box
     still clears it by 10px at the foot, shadow included. Width stays the
     full column, so the pair renders as large as the column allows. */
  .hero__card img{max-width:none;width:100%;aspect-ratio:6 / 5;object-fit:cover}
  .hero__road{max-width:none;margin:16px 0 0;text-align:left}
  .hero__sub{justify-content:flex-start;gap:6px 20px;margin:14px 0 0}
  .factpills{grid-column:1 / -1;grid-row:2;justify-self:center;margin-top:34px}
  /* scoped to the hero: unscoped, justify-self also centred the reviews
     figures inside an ordinary section, off the edge the meter starts on */
  .hero .figures{grid-column:1 / -1;grid-row:3;justify-self:center}
}

/* ---- the page head, which is above the fold on all thirty inner pages.
   Duplicated here rather than moved: these rules appear again in their own
   place below, identically, so nothing about the cascade changes. What changes
   is that a phone paints the breadcrumb, the H1 and the quick answer in their
   final geometry on the first frame instead of relaying them when the async
   sheet lands. */
.lead{font-size:1.14rem;line-height:1.66;color:var(--ink-2);max-width:var(--measure);margin:0 0 1.1em}
.crumbs{font-size:.9375rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-3)}
.phead{padding:40px 0 30px;background:var(--paper-2);border-bottom:2px solid var(--walnut)}
.phead h1{max-width:24ch}
.phead .answer{margin-left:0}
.phead .lead{margin-top:14px}
.sec p,.sec li,.phead p{max-width:var(--measure)}

/* ---- the destination rank folds behind the menu button below 1240px.
   Thirteen destinations measure 1114px in Assistant and 1117px in the
   fallback face, and the wrap is 91% of the screen, so anywhere under ~1230px
   the rank broke onto a second row (two rows at 768 and at 1024, audit 21 Sep
   2026). Below that width it behaves exactly as it does on a phone. Above the
   marker, so the first paint is already the folded header. */
@media (max-width:1240px){
  .nav__top{padding-block:9px}
  .burger{display:block}
  .menu{display:none}
  .menu.open{display:flex;flex-direction:column;align-items:stretch;text-align:center;
    margin-top:8px}
  .menu a{padding:7px 10px;font-size:.98rem}
}

/* ---- above-the-fold responsiveness, copied rather than moved for the same
   reason. A phone that paints the DESKTOP header and the DESKTOP hero from the
   inline block and then relays both when the async sheet arrives is the whole
   of this estate's mobile CLS problem; critical_hero.py exists to fix exactly
   that, and it has nothing to do here because the rules are already up here. */
@media (max-width:760px){
  body{font-size:17px}
  .hero{padding:30px 0 38px}
  .hero__media{max-width:none;margin-top:14px}
  .hero__card{padding:6px 0 0}
  .hero__card img{max-width:320px}
  .figures{grid-template-columns:1fr;gap:10px}
  .rung{grid-template-columns:1fr auto;gap:4px 12px}
  .rung span{grid-column:1/-1}
  .menu{gap:2px}
  .menu a{padding:7px 10px;font-size:.98rem}
  /* The phone header is the standard one: the identity at the left edge, the
     menu button at the right. Centred, the lockup had to clear the button on
     BOTH sides, which left 180px for a 23-letter tagline and wrapped it inside
     the brackets. */
  .nav__top{align-items:flex-start}
  .burger{display:block}
  .menu{display:none}
  .menu.open{display:flex;flex-direction:column;align-items:stretch;text-align:center}
  .g2,.g3{grid-template-columns:1fr}
  .phead{padding:28px 0 24px}
  .util{font-size:0.9062rem}
  .util__row{gap:1px 11px;padding-block:6px}
  .brand{max-width:calc(100% - 56px);padding-inline:14px}
  .bw b{font-size:1.28rem}
  .bw small{font-size:0.9062rem;letter-spacing:.04em;white-space:nowrap}
  .answer{padding:15px 17px}
  .hero__cta{gap:9px}
  .hero__cta .btn{width:100%}
  .ladder__f{font-size:.9062rem;padding:9px 13px}
  .rung{padding:11px 13px}
}
@media (max-width:420px){
  .hero h1{font-size:1.94rem}
  .btn{padding:14px 20px;font-size:.98rem}
}
@media (max-width:360px){
  .brand__glyph,.brand>svg{width:30px;height:30px}
  .brand{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important}
}
/* ---- geometry copied from below the marker (audit 21 Sep 2026).
   COPIES, like the page-head block above: each original stays in its own
   section below, identically, so the cascade is unchanged. Up here they mean
   the first paint already has the sizes the async sheet will settle on --
   the type-floor raises, the form fields that can no longer be widened by a
   long <option>, and the tap-target boxes. */
.dtable caption{font-size:1rem}
.pack__perks li{font-size:1.062rem}
.pack__marks{font-size:.9062rem}
.fcard p{font-size:1.062rem}
.refs li{font-size:1.062rem}
.form,.field{grid-template-columns:minmax(0,1fr)}
.field select{max-width:100%}
.field small{font-size:.9062rem;color:var(--ink-3)}
.fcard a,.toc a,td>a[href^="tel:"],td>a[href^="mailto:"]{display:inline-block}
.posts h3 a,.card h3 a{display:inline-block;padding-block:2px;margin-block:-2px}
/* ---- first-section layout, COPIED from below the marker (audit 21 Sep 2026).
   Measured with style.css held back: a blog post opens straight into
   `<section class="sec"><div class="wrap article">`, so the first paint laid
   the article out 1150px wide with no section padding and then narrowed it to
   the 68ch column -- CLS 0.14 on all five posts at 1440. The pricing page
   opens on the pack row, which painted as one 4,100px column of full-width
   images before the grid arrived -- CLS 0.195. The originals stay below,
   identically and later in the cascade, so nothing about the settled page
   changes; these only make the first frame the final one. */
.sec{padding:56px 0;border-top:2px solid var(--line)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 30px}
.sec--center .wrap>*{margin-inline:auto}
.sec__head p{color:var(--ink-2);margin:0}
.sec h2{margin-bottom:.35em}
.article{max-width:var(--measure);margin-inline:auto}
.article h2{margin-top:1.4em}
.postmeta{font-size:.95rem;color:var(--ink-3);margin:0 0 .6em}
.toc{background:var(--paper-3);border:2px solid var(--walnut-3);border-radius:var(--radius);
  padding:20px 24px;margin:0 0 26px}
.toc b{display:block;font-family:var(--display);font-weight:400;font-size:1.16rem;
  color:var(--walnut-2);margin-bottom:.4em}
.toc ol{margin:0;padding-left:20px}
.alert{background:var(--paper);border:2px solid var(--warn);border-radius:var(--radius);
  padding:20px 24px;margin:0 0 20px;max-width:var(--measure)}
.alert b{display:block;font-family:var(--display);font-weight:400;font-size:1.2rem;
  color:var(--warn);margin-bottom:.35em}
.alert p:last-child{margin-bottom:0}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border:2px solid var(--line-2);border-radius:var(--radius);
  padding:22px 22px 20px}
.card h3{margin:0 0 .4em}
.split{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin:0 0 24px}
.split--flip .split__img{order:2}
.split__img{margin:0;background:var(--paper);border:2px solid var(--line-2);
  border-radius:var(--radius);overflow:hidden}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 20px}
.card--pack{background:var(--paper);border:2px solid var(--walnut-3);border-radius:var(--radius);
  padding:0;overflow:hidden;position:relative;display:flex;flex-direction:column}
.pack__flag{display:block;background:var(--honey);color:#1f1509;font-size:.875rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;text-align:center}
.pack__head{padding:14px 18px;border-bottom:2px solid var(--line-2);text-align:center}
.pack__head b{display:block;font-family:var(--display);font-weight:400;font-size:1.44rem;
  color:var(--walnut-2)}
.pack__head span{font-size:.95rem;color:var(--ink-3)}
.pack__body{padding:18px;text-align:center;display:flex;flex-direction:column;flex:1 1 auto}
.pack__body img{margin:0 auto 12px}
.pack__per{font-family:var(--display);font-size:2.6rem;color:var(--walnut-2);margin:0;line-height:1}
.pack__per sup{font-size:1.1rem;top:-.8em}
.pack__unit{display:block;font-size:.95rem;color:var(--ink-3);margin-bottom:8px}
.pack__tot{margin:0 0 12px;font-size:1.02rem}
.pack__was{color:var(--ink-3);text-decoration:line-through;margin-left:6px}
.pack__perks{list-style:none;margin:0 0 16px;padding:0;text-align:left}
.pack__perks li{padding:6px 0 6px 24px;position:relative;border-bottom:1px solid var(--line)}
.pack__perks li:last-child{border-bottom:0}
.pack__marks{color:var(--ink-3);margin:10px 0 0}
.card--pack .btn{margin-top:auto}
.card--pack.featured{background:var(--walnut);border-color:var(--walnut-2);color:var(--on-dark-2)}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
@media (min-width:761px){
  .g2>:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;
    width:calc(50% - 9px)}
}
@media (max-width:980px){
  .prices{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .split{grid-template-columns:1fr}
  .split--flip .split__img{order:0}
}
@media (max-width:760px){
  .sec{padding:40px 0}
  .g2,.g3{grid-template-columns:1fr}
}
/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@media (max-width:760px){
  .hero{padding:30px 0 38px}
  .hero__media{max-width:none;margin-top:14px}
  .hero__card{padding:6px 0 0}
  .hero__card img{max-width:320px}
  .hero__cta{gap:9px}
  .hero__cta .btn{width:100%}
}
@media (max-width:420px){
  .hero h1{font-size:1.94rem}
}
/* --- end of the copied hero responsive rules --- */

/* ---- hero motif -- honey-rise ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:linear-gradient(187deg,#faf4e6,#eedfc2 52%,#faf4e6)}.hero__media::before{content:'';position:absolute;pointer-events:none;left:50%;bottom:-6%;width:50%;aspect-ratio:0.48;translate:-50% 0;z-index:1;filter:blur(14px);border-radius:50% 50% 42% 42%;background:linear-gradient(0deg,rgba(184,128,31,0.36),transparent 88%);animation:b13HoneyRise 14s cubic-bezier(.35,.05,.4,1) infinite}.hero__media::after{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:0;left:50%;bottom:2%;width:96%;aspect-ratio:2.6;translate:-50% 0;background:radial-gradient(closest-side,rgba(184,128,31,0.23),transparent 70%);animation:b13HoneyRiseBed 14s ease-in-out infinite}@keyframes b13HoneyRise{0%{transform:translateY(26%) scaleY(.6) scaleX(1.12);opacity:0}28%{opacity:0.52}72%{transform:translateY(-105%) scaleY(1.2) scaleX(.64);opacity:0.29}100%{transform:translateY(-150%) scaleY(1.3) scaleX(.46);opacity:0}}@keyframes b13HoneyRiseBed{0%,100%{transform:scale(.92);opacity:.2}50%{transform:scale(1.06);opacity:0.42}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/

/* ---- sections */
.sec{padding:56px 0;border-top:2px solid var(--line)}
.sec--tint{background:var(--paper-2)}
.sec--panel{background:var(--paper-3)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 30px}
.sec--center .wrap>*{margin-inline:auto}
.sec__head p{color:var(--ink-2);margin:0}
.sec h2{margin-bottom:.35em}

/* the walnut band across the facts */
.sec--brass{background:var(--walnut);border-top:2px solid var(--walnut-2);
  border-bottom:2px solid var(--walnut-2);color:var(--on-dark)}
.sec--brass h2,.sec--brass h3,.sec--brass h4{color:var(--on-dark)}
.sec--brass .eyebrow{color:var(--honey-l)}
.sec--brass p,.sec--brass li,.sec--brass span{color:var(--on-dark-2)}
.sec--brass b,.sec--brass strong{color:var(--on-dark)}
.sec--brass a{color:var(--honey-l)}
.sec--brass .card,.sec--brass .keypoints,.sec--brass .callout,.sec--brass .step{
  background:var(--walnut-2);border-color:var(--walnut-3)}
.sec--brass .card b,.sec--brass .card h3,.sec--brass .step>b,.sec--brass .step>h3{color:var(--on-dark)}
.sec--brass table{background:var(--walnut-2);color:var(--on-dark-2)}
.sec--brass .dtable th{background:var(--walnut-3);color:var(--on-dark)}
.sec--brass .dtable td,.sec--brass .dtable th{border-color:var(--walnut-3)}
.sec--brass .tablewrap{border-color:var(--walnut-3)}

/* ---- prose blocks */
.lead{font-size:1.14rem;line-height:1.66;color:var(--ink-2);max-width:var(--measure);margin:0 0 1.1em}
.crumbs{font-size:.9375rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-3)}
.phead{padding:40px 0 30px;background:var(--paper-2);border-bottom:2px solid var(--walnut)}
.phead h1{max-width:24ch}
.phead .answer{margin-left:0}
.phead .lead{margin-top:14px}
.sec p,.sec li,.phead p{max-width:var(--measure)}
.sec--center p,.sec--center li{margin-inline:auto}

.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border:2px solid var(--line-2);border-radius:var(--radius);
  padding:22px 22px 20px}
.card h3{margin:0 0 .4em}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.steps{display:grid;gap:16px;counter-reset:st;margin:0 0 24px}
.step{background:var(--paper);border:2px solid var(--line-2);border-radius:var(--radius);
  padding:20px 22px 18px;position:relative}
/* The step title is whatever the step opens with -- blocks.steps() writes an
   <h3>, older markup a <b> -- and it has to clear the 38px counter tab in the
   corner. Only `.step b` was padded, so every <h3> title ran under the
   number: "ing the order desk", "sk for a return". Child selectors, so a bold
   word inside the step's paragraph stays inline. */
.step>b,.step>h3{display:block;font-family:var(--display);font-weight:400;font-size:1.2rem;
  color:var(--walnut-2);margin:0 0 .3em;padding-left:34px;min-height:26px}
.step p:last-child{margin-bottom:0}
.step::before{counter-increment:st;content:counter(st);position:absolute;top:-2px;left:-2px;
  width:38px;height:38px;display:grid;place-items:center;background:var(--walnut);
  color:var(--on-dark);font-weight:700;font-size:1rem;border-radius:var(--radius) 0 var(--radius) 0}
/* Two across from 900px, so a card's text reaches the card's far edge instead
   of stopping at the 68ch measure halfway across a 1150px box. An odd last
   card sits centred under the pair rather than leaving a hole beside it. */
@media (min-width:900px){
  .steps,.inglist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps>:last-child:nth-child(odd),.inglist>:last-child:nth-child(odd){
    grid-column:1 / -1;justify-self:center;width:calc(50% - 9px)}
}
@media (min-width:761px){
  .g2>:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;
    width:calc(50% - 9px)}
}
.keypoints{background:var(--paper);border:2px solid var(--walnut-3);border-radius:var(--radius);
  padding:22px 24px}
.keypoints b{display:block;font-family:var(--display);font-weight:400;font-size:1.22rem;
  color:var(--walnut-2);margin-bottom:.45em}
.keypoints ul{margin:0;padding-left:20px}
.callout{background:var(--paper-3);border:2px solid var(--line-2);border-radius:var(--radius);
  padding:20px 24px;margin:0 0 20px;max-width:var(--measure)}
.callout b{display:block;font-family:var(--display);font-weight:400;font-size:1.2rem;
  color:var(--walnut-2);margin-bottom:.35em}
.callout p:last-child{margin-bottom:0}
.alert{background:var(--paper);border:2px solid var(--warn);border-radius:var(--radius);
  padding:20px 24px;margin:0 0 20px;max-width:var(--measure)}
.alert b{display:block;font-family:var(--display);font-weight:400;font-size:1.2rem;
  color:var(--warn);margin-bottom:.35em}
.alert p:last-child{margin-bottom:0}
.note,.tnote{font-size:1rem;color:var(--ink-3);max-width:var(--measure)}
.pullquote{border-left:5px solid var(--honey);padding:4px 0 4px 20px;margin:0 0 22px;
  font-family:var(--display);font-size:1.28rem;line-height:1.45;color:var(--walnut-2);
  max-width:var(--measure)}
.pullquote cite{display:block;font-family:var(--text);font-size:.95rem;font-style:normal;
  color:var(--ink-3);margin-top:8px}
.ticks{list-style:none;margin:0 0 18px;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:8px}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;
  border:2px solid var(--honey-d)}

/* ---- tables */
.tablewrap{overflow-x:auto;border:2px solid var(--line-2);border-radius:var(--radius);
  margin:0 0 22px;background:var(--paper)}
table{border-collapse:collapse;width:100%}
.dtable th,.dtable td{padding:12px 15px;border-bottom:2px solid var(--line);
  text-align:left;font-size:1rem;vertical-align:top}
.dtable th{background:var(--paper-3);font-weight:700;color:var(--walnut-2);
  font-size:.95rem;letter-spacing:.04em;text-transform:uppercase}
.dtable tr:last-child td{border-bottom:0}
.dtable caption{caption-side:bottom;padding:10px 15px;font-size:1rem;
  color:var(--ink-3);text-align:left}
.dtable td+td{border-left:1px solid var(--line)}
/* a narrow column must still hold its own header and a short row title on one
   line: "Out of 5" broke as OUT OF / 5 and "Weeks 2 to 3" as Weeks 2 to / 3 */
@media (min-width:641px){
  .dtable th{min-width:5.6em}
  .dtable--stack td:first-child{min-width:8.5em}
}
.dtable--stack td:first-child{font-weight:600;color:var(--walnut-2)}
/* a row title that IS a link is a tap target on its own: 21px as an inline
   box, so the padding grows the hit area and the negative margin hands the
   space straight back */
.dtable td:first-child>a{display:inline-block;padding-block:4px;margin-block:-4px}
/* the factsheet: a key column set as row headers, sentence case */
.dtable--kv th{background:var(--paper-2);text-transform:none;letter-spacing:0;
  font-size:1rem;width:32%;border-bottom:2px solid var(--line);vertical-align:top}
.dtable--kv tr:last-child th{border-bottom:0}
.dtable--kv td{border-left:1px solid var(--line)}
/* On a phone a three-column table cannot share 340px: each row becomes a small
   card, the first cell its title and every other cell under the name of its
   column (the data-label blocks.table() writes). The label sits at .875em of
   the 16px cell, 14px, which is the label floor rather than the cell floor. */
@media (max-width:640px){
  .dtable--stack thead{display:none}
  .dtable--stack,.dtable--stack tbody,.dtable--stack tr,.dtable--stack td{display:block;width:auto}
  .dtable--stack tr{padding:12px 15px;border-bottom:2px solid var(--line)}
  .dtable--stack tr:last-child{border-bottom:0}
  .dtable--stack td,.dtable--stack td+td{padding:3px 0;border:0}
  .dtable--stack td:first-child{font-family:var(--display);font-weight:400;font-size:1.14rem;
    padding-bottom:4px}
  .dtable--stack td+td[data-label]::before{content:attr(data-label);display:block;
    font-size:.875em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-3);margin-top:6px}
  .dtable--compact td+td[data-label]{display:flex;justify-content:space-between;
    align-items:baseline;gap:14px;text-align:right}
  .dtable--compact td+td[data-label]::before{margin:0;flex:0 0 auto;text-align:left}
  .dtable--kv,.dtable--kv tbody,.dtable--kv tr,.dtable--kv th,.dtable--kv td{display:block;width:auto}
  .dtable--kv tr{border-bottom:2px solid var(--line)}
  .dtable--kv tr:last-child{border-bottom:0}
  .dtable--kv th{background:none;border:0;padding:12px 15px 0}
  .dtable--kv td{border:0;padding:2px 15px 12px}
}

/* ---- versus: the label's column against the research's.
   blocks.versus() emits a flat run of cells, a three-across header followed by
   three cells per ingredient, so the grid is declared here rather than nested
   in the markup. */
.versus{display:grid;grid-template-columns:1.05fr 1fr 1.5fr;gap:0;
  border:2px solid var(--walnut-3);border-radius:var(--radius);overflow:hidden;margin:0 0 22px}
.versus>div{padding:13px 16px;border-top:2px solid var(--line-2);
  border-right:2px solid var(--line-2);font-size:1rem}
.versus>div:nth-child(3n){border-right:0}
.versus__h{background:var(--walnut);color:var(--on-dark);font-weight:700;font-size:.95rem;
  letter-spacing:.07em;text-transform:uppercase;border-top:0;
  border-right-color:var(--walnut-3)}
.versus__name{font-weight:600;color:var(--walnut-2)}

/* ---- ingredient cards */
.inglist{display:grid;gap:18px}
.ingcard{background:var(--paper);border:2px solid var(--line-2);border-radius:var(--radius);
  padding:22px 24px}
.ingcard__top{border-bottom:2px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.ingcard__top h3{margin:0 0 4px}
.ing__latin{display:block;font-size:.95rem;color:var(--ink-3);font-style:italic}
.ing__dose{display:inline-block;margin-top:8px;padding:4px 12px;border:2px solid var(--honey);
  border-radius:var(--radius-sm);font-size:.9375rem;font-weight:700;color:var(--walnut-2)}

/* ---- stats and meters */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:2px solid var(--walnut-3);
  border-radius:var(--radius);overflow:hidden;margin:0 0 22px;background:var(--paper)}
.stats>div{padding:18px 16px;border-right:2px solid var(--line-2);text-align:center}
.stats>div:last-child{border-right:0}
.stats b{display:block;font-family:var(--display);font-weight:400;font-size:1.9rem;color:var(--walnut-2)}
.stats span{font-size:.9375rem;color:var(--ink-3)}
.meter{display:grid;gap:9px;margin:0 0 22px;max-width:var(--measure)}
/* Outside the hero the figures sit on the section's own left edge and share
   the meter's measure, with room before the first bar. */
.sec .figures{margin:0 0 26px;max-width:var(--measure)}
.meter__row{display:grid;grid-template-columns:88px 1fr 48px;align-items:center;gap:12px;
  font-size:1rem;color:var(--ink-2)}
.meter__bar{display:block;height:14px;background:var(--paper-3);
  border:2px solid var(--line-2)}
.meter__bar i{display:block;height:100%;background:var(--honey)}

/* ---- the pack ladder on the pricing sections */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 20px}
.card--pack{background:var(--paper);border:2px solid var(--walnut-3);border-radius:var(--radius);
  padding:0;overflow:hidden;position:relative;display:flex;flex-direction:column}
.pack__flag{display:block;background:var(--honey);color:#1f1509;font-size:.875rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;text-align:center}
.pack__head{padding:14px 18px;border-bottom:2px solid var(--line-2);text-align:center}
.pack__head b{display:block;font-family:var(--display);font-weight:400;font-size:1.44rem;
  color:var(--walnut-2)}
.pack__head span{font-size:.95rem;color:var(--ink-3)}
.pack__body{padding:18px;text-align:center;display:flex;flex-direction:column;flex:1 1 auto}
.pack__body img{margin:0 auto 12px}
.pack__per{font-family:var(--display);font-size:2.6rem;color:var(--walnut-2);margin:0;line-height:1}
.pack__per sup{font-size:1.1rem;top:-.8em}
.pack__unit{display:block;font-size:.95rem;color:var(--ink-3);margin-bottom:8px}
.pack__tot{margin:0 0 12px;font-size:1.02rem}
.pack__was{color:var(--ink-3);text-decoration:line-through;margin-left:6px}
.pack__perks{list-style:none;margin:0 0 16px;padding:0;text-align:left}
.pack__perks li{font-size:1.062rem;padding:6px 0 6px 24px;position:relative;
  border-bottom:1px solid var(--line)}
.pack__perks li::before{content:"";position:absolute;left:0;top:1.05em;width:9px;height:9px;
  border:2px solid var(--honey-d)}
.pack__perks li:last-child{border-bottom:0}
.pack__marks{font-size:.9062rem;color:var(--ink-3);margin:10px 0 0}
.card--pack .btn{margin-top:auto}
/* the featured tier is INVERTED - walnut plate, parchment ink */
.card--pack.featured{background:var(--walnut);border-color:var(--walnut-2);color:var(--on-dark-2)}
.card--pack.featured .pack__head{border-bottom-color:var(--walnut-3)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__per,
.card--pack.featured .pack__tot b{color:var(--on-dark)}
.card--pack.featured .pack__head span,.card--pack.featured .pack__unit,
.card--pack.featured .pack__marks,.card--pack.featured .pack__was{color:var(--on-dark-2)}
.card--pack.featured .pack__perks li{border-bottom-color:var(--walnut-3);color:var(--on-dark-2)}
.card--pack.featured .pack__perks li::before{border-color:var(--honey-l)}
/* All three pack shots are cutouts of the same real bottle, so the featured
   tier's walnut plate reads straight through the gaps between the bottles
   exactly as the parchment does on the other two. No frame is needed. */
.buy__note{font-size:.9375rem;color:var(--ink-3);max-width:var(--measure-wide)}

/* ---- figures that carry content */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 22px}
.shots.s2{grid-template-columns:repeat(2,1fr)}
.shots figure{margin:0;background:var(--paper);border:2px solid var(--line-2);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .18s ease,border-color .18s ease}
.shots figure:hover{transform:translateY(-2px);border-color:var(--honey)}
.shots img{width:100%}
.shots figcaption{padding:14px 16px 16px;border-top:2px solid var(--line)}
.shots figcaption b{display:block;font-family:var(--display);font-weight:400;font-size:1.1rem;
  color:var(--walnut-2);margin-bottom:4px}
.shots figcaption span{font-size:.98rem;color:var(--ink-2)}
/* nine seals: three rows of three rather than five and four with a hole */
.badgewall{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 22px}
.badgewall figure{margin:0;text-align:center;background:var(--paper);
  border:2px solid var(--line-2);border-radius:var(--radius);padding:16px 12px;
  transition:transform .18s ease,border-color .18s ease}
.badgewall figure:hover{transform:translateY(-2px);border-color:var(--honey)}
.badgewall img{margin:0 auto 10px}
.badgewall b{display:block;font-size:1rem;color:var(--walnut-2);margin-bottom:4px}
/* one supplied tile shown at its own pixel size, never scaled up */
.stripfig{display:grid;grid-template-columns:148px minmax(0,1fr);gap:18px;align-items:center;
  max-width:var(--measure);margin:22px 0 0;background:var(--paper);
  border:2px solid var(--line-2);border-radius:var(--radius);padding:14px 18px}
.stripfig img{width:148px;height:148px}
.stripfig b{display:block;font-family:var(--display);font-weight:400;font-size:1.1rem;
  color:var(--walnut-2);margin-bottom:4px}
.stripfig span{display:block;font-size:1rem;color:var(--ink-2);line-height:1.55}
@media (max-width:520px){
  .stripfig{grid-template-columns:1fr;justify-items:center;text-align:center}
}
.badgewall span{display:block;font-size:.9375rem;color:var(--ink-3);line-height:1.5}

/* ---- split: image and copy START LEVEL (house rule 12D) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin:0 0 24px}
.split--flip .split__img{order:2}
.split__img{margin:0;background:var(--paper);border:2px solid var(--line-2);
  border-radius:var(--radius);overflow:hidden}
.split__body>:last-child{margin-bottom:0}
.split--tall{grid-template-columns:.8fr 1.2fr}
.split--band{grid-template-columns:1fr}

/* ---- FAQ */
.faq{border:2px solid var(--walnut-3);border-radius:var(--radius);overflow:hidden;
  background:var(--paper);max-width:var(--measure-wide)}
.faq details{border-bottom:2px solid var(--line-2)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:16px 20px;font-family:var(--display);font-size:1.14rem;
  color:var(--walnut-2);list-style:none;position:relative;padding-right:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:14px;font-size:1.4rem;
  color:var(--honey-d)}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{background:var(--paper-2)}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child{margin-bottom:0}

/* ---- related, posts, byline */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.rel a{display:block;padding:18px 20px;background:var(--paper);border:2px solid var(--line-2);
  border-radius:var(--radius);text-decoration:none;color:var(--ink);
  transition:transform .18s ease,border-color .18s ease}
.rel a:hover{transform:translateY(-2px);border-color:var(--honey)}
.rel b{display:block;font-family:var(--display);font-weight:400;font-size:1.14rem;
  color:var(--walnut-2);margin-bottom:5px}
.rel span{font-size:.98rem;color:var(--ink-2)}
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.posts article{background:var(--paper);border:2px solid var(--line-2);border-radius:var(--radius);
  padding:22px 24px;transition:transform .18s ease,border-color .18s ease}
.posts article:hover{transform:translateY(-2px);border-color:var(--honey)}
.posts h3{margin:0 0 .35em}
.posts h3 a{text-decoration:none;color:var(--walnut-2)}
.posts h3 a,.card h3 a{display:inline-block;padding-block:2px;margin-block:-2px}
.posts h3 a:hover{color:var(--honey-d)}
.postmeta{font-size:.95rem;color:var(--ink-3);margin:0 0 .6em}
.byline{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  background:var(--paper-3);border:2px solid var(--walnut-3);border-radius:var(--radius);
  padding:22px 24px;margin:26px 0 0;max-width:var(--measure-wide)}
.byline__mark{display:grid;place-items:center;width:52px;height:52px;background:var(--walnut);
  color:var(--on-dark);font-family:var(--display);font-size:1.2rem;border-radius:var(--radius-sm)}
.byline b{display:block;margin-bottom:.35em;color:var(--walnut-2)}
.byline p{margin:0;font-size:1rem;color:var(--ink-2);max-width:none}

/* ---- the closing call to action */
.final{background:var(--paper);border:2px solid var(--walnut);border-radius:var(--radius);
  padding:28px 30px;max-width:var(--measure-wide);margin-inline:auto;text-align:left}
.final--media{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start}
.final h2{margin:0 0 .4em}
.final__price{font-weight:700;color:var(--walnut-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}
.final__img img{border:2px solid var(--line-2);border-radius:var(--radius)}

/* ---- forms */
/* minmax(0,1fr), not the implicit auto track: an auto track cannot go below
   the min-content width of the <select>, and its longest <option> pushed the
   whole form 55px past a 375px screen. */
.form{display:grid;gap:16px;max-width:var(--measure);grid-template-columns:minmax(0,1fr);
  background:var(--paper);border:2px solid var(--line-2);border-radius:var(--radius);padding:24px}
.field{display:grid;gap:6px;grid-template-columns:minmax(0,1fr)}
.field select{max-width:100%}
.field small{font-size:.9062rem;color:var(--ink-3)}
.field label{font-weight:700;font-size:1rem;color:var(--walnut-2)}
.field input,.field select,.field textarea{
  font-family:var(--text);font-size:1.0625rem;padding:12px 14px;color:var(--ink);
  background:var(--paper);border:2px solid var(--line-2);border-radius:var(--radius-sm)}
.field textarea{min-height:150px;resize:vertical}

/* ---- the sticky buy bar. Present at every width: a site whose slot says
   "no motion" still obeys house rule 8, and a bar that only exists on a phone
   gives the desktop reader no second call at all. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--walnut);
  color:var(--on-dark);border-top:2px solid var(--honey);
  transform:translateY(105%);transition:transform .26s ease}
.buybar.show{transform:translateY(0)}
html.chrome-up .buybar{transform:translateY(105%)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:min(var(--wrap),94%);margin-inline:auto;padding:11px 0}
.buybar__t b{display:block;font-size:1.02rem;color:var(--on-dark)}
.buybar__t span{font-size:.9375rem;color:var(--on-dark-2)}
.buybar .btn{min-height:48px;padding:11px 24px;white-space:nowrap}

/* ---- footer: parchment, the returns box, then the index beneath it */
footer{background:var(--paper-2);border-top:2px solid var(--walnut);padding:44px 0 0}
.fcta{background:var(--paper-3);border-top:2px solid var(--line-2);padding:46px 0}
.fcta__box{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:start;
  border:2px solid var(--walnut);border-radius:var(--radius);background:var(--paper);
  padding:28px 30px}
.fcta__eye{display:block;font-size:.9375rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--honey-d);margin-bottom:10px}
.fcta__h{font-family:var(--display);font-size:1.62rem;color:var(--walnut-2);margin:0 0 .45em}
.fcta__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}
.fcta__img img{border:2px solid var(--line-2);border-radius:var(--radius)}
.fcard{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  border:2px solid var(--walnut);border-radius:var(--radius);background:var(--paper);
  padding:22px 24px;margin:0 0 28px}
.fcard p{margin:0;font-size:1.062rem;color:var(--ink-2)}
.fcard b{color:var(--walnut-2)}
/* The phone and the two addresses in this card are the thing you tap. As
   inline boxes they measured 21px tall; inline-block takes the line box, 29.75px,
   without moving anything. Same for the contents list, the telephone and
   mail cells of the contact tables, and the post titles on the blog index. */
.fcard a,.toc a,td>a[href^="tel:"],td>a[href^="mailto:"]{display:inline-block}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:24px;margin:0 0 30px}
.fseals{font-size:1rem;color:var(--ink-2)}
.fbrand{display:block;font-family:var(--display);font-size:1.6rem;color:var(--walnut-2)}
.fbrand span{color:var(--honey-d)}
.frole{margin:4px 0 14px;color:var(--ink-2);font-size:1rem}
.fsealrow{display:flex;gap:10px;margin-bottom:10px}
.fh{font-family:var(--text);font-size:.9375rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--walnut-2);margin:0 0 10px;
  padding-bottom:8px;border-bottom:2px solid var(--line-2)}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:7px}
footer a{color:var(--ink-2);text-decoration:none;font-size:1rem}
footer a:hover{color:var(--honey-d);text-decoration:underline}
.fpay{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:2px solid var(--line-2);padding:18px 0;font-size:1rem;color:var(--ink-3)}
.disc{background:var(--walnut-2);color:var(--on-dark-2);padding:26px 0;margin-top:0}
.disc p,.disc li{font-size:1rem;line-height:1.66;color:var(--on-dark-2)}
.disc b{color:var(--on-dark)}
.disc a{color:var(--honey-l)}
.disc__list{margin:14px 0;padding-left:20px}
.disc__list li{margin-bottom:7px}
.copy{margin:14px 0 0;font-size:1rem;color:var(--on-dark-2)}

/* ---- article column, for the blog */
.article{max-width:var(--measure);margin-inline:auto}
.article h2{margin-top:1.4em}
.article figure{margin:0 0 22px;background:var(--paper);border:2px solid var(--line-2);
  border-radius:var(--radius);overflow:hidden}
.article figure img{width:100%}
.article figure.portrait img{width:var(--figw,320px);margin-inline:auto}
.article figcaption{padding:12px 16px;font-size:.98rem;color:var(--ink-2);
  border-top:2px solid var(--line)}
.toc{background:var(--paper-3);border:2px solid var(--walnut-3);border-radius:var(--radius);
  padding:20px 24px;margin:0 0 26px}
.toc b{display:block;font-family:var(--display);font-weight:400;font-size:1.16rem;
  color:var(--walnut-2);margin-bottom:.4em}
.toc ol{margin:0;padding-left:20px}
.refs{margin:0;padding-left:20px}
.refs li{font-size:1.062rem;color:var(--ink-2);margin-bottom:9px;word-break:break-word}
.article .final{margin:30px 0}
.article .final--media{grid-template-columns:1fr}
.article .final__img{display:none}

/* ---- reveal on entry. Opacity and translate only - no shadow is involved,
   here or anywhere else on this site. */
[data-reveal]{opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .5s ease}
[data-reveal].in{opacity:1;transform:none}

/* ---- responsive
   The phone hero rules live above CRITICAL-END so a phone paints the phone
   layout on the first frame rather than the desktop one (critical_hero.py,
   and the estate's largest mobile-CLS fix). */
@media (max-width:980px){
  .fgrid{grid-template-columns:1fr 1fr;gap:22px}
  .prices{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .badgewall{grid-template-columns:repeat(3,1fr)}
  .rel{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats>div:nth-child(2n){border-right:0}
  .fcard{grid-template-columns:1fr}
  .fcta__box{grid-template-columns:1fr}
  .final--media{grid-template-columns:1fr}
  .final__img{display:none}
  .split{grid-template-columns:1fr}
  .split--tall{grid-template-columns:1fr}
  .split--flip .split__img{order:0}
}
@media (max-width:760px){
  body{font-size:17px}
  .hero{padding:30px 0 38px}
  .hero__media{max-width:none;margin-top:14px}
  .hero__card{padding:6px 0 0}
  .hero__card img{max-width:320px}
  .figures{grid-template-columns:1fr;gap:10px}
  .rung{grid-template-columns:1fr auto;gap:4px 12px}
  .rung span{grid-column:1/-1}
  .menu{gap:2px}
  .menu a{padding:7px 10px;font-size:.98rem}
  .nav__top{align-items:flex-start}
  .burger{display:block}
  .menu{display:none}
  .menu.open{display:flex;flex-direction:column;align-items:stretch;text-align:center}
  .shots{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,1fr)}
  .badgewall>:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;
    width:calc(50% - 7px)}
  .sec{padding:40px 0}
  .fgrid{grid-template-columns:1fr}
  /* Stacked, every body cell names the column it came from, and each
     ingredient opens on its own shaded name row -- with the header row hidden
     and no labels, "No amount on the artwork" read as a seventh ingredient. */
  .versus{grid-template-columns:1fr}
  .versus>div{border-right:0}
  .versus__h{display:none}
  .versus__name{background:var(--paper-3);font-weight:700;color:var(--walnut-2);
    border-top:2px solid var(--walnut-3)}
  .versus__h+.versus__name{border-top:0}
  .versus__lab,.versus__res{border-top:1px solid var(--line)}
  .versus [data-label]::before{content:attr(data-label);display:block;font-size:.875rem;
    font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
    margin-bottom:3px}
  .buybar__in{padding:9px 0;gap:10px}
  .buybar__t b{font-size:.95rem}
  .buybar .btn{padding:11px 16px;font-size:.95rem}
  .buybar__t span{display:none}
  .g2,.g3{grid-template-columns:1fr}
  .phead{padding:28px 0 24px}
  .util{font-size:0.9062rem}
  .util__row{gap:1px 11px;padding-block:6px}
  .brand{max-width:calc(100% - 56px);padding-inline:14px}
  .bw b{font-size:1.28rem}
  .bw small{font-size:0.9062rem;letter-spacing:.04em;white-space:nowrap}
  .answer{padding:15px 17px}
  .hero__cta{gap:9px}
  .hero__cta .btn{width:100%}
  .ladder__f{font-size:.9062rem;padding:9px 13px}
  .rung{padding:11px 13px}
}
@media (max-width:420px){
  .hero h1{font-size:1.94rem}
  .btn{padding:14px 20px;font-size:.98rem}
  .badgewall{grid-template-columns:1fr}
  .badgewall>:last-child:nth-child(odd){width:auto;justify-self:stretch}
}
@media (max-width:360px){
  .brand__glyph,.brand>svg{width:30px;height:30px}
  .brand{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .shots figure:hover,.badgewall figure:hover,.rel a:hover,.posts article:hover{transform:none}
}


/* ---- print */
@media print{
  .nav,.util,.buybar,.fcta,.skip{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .sec{padding:12pt 0;border-top:1px solid #999}
}

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

/* brand mark: bracket construction */
.brand{position:relative;padding-inline:14px}.brand::before,.brand::after{content:'';position:absolute;top:2px;bottom:2px;width:8px;border:2px solid #b8801f}.brand::before{left:0;border-right:0}.brand::after{right:0;border-left:0}