/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Eczar Fallback";src:local("Arial");font-weight:400;size-adjust:98.68%;ascent-override:115.83%;descent-override:64.25%;line-gap-override:0.00%}
@font-face{font-family:"Eczar Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:100.46%;ascent-override:113.78%;descent-override:63.11%;line-gap-override:0.00%}
@font-face{font-family:"Chivo Fallback";src:local("Arial");font-weight:400;size-adjust:108.03%;ascent-override:87.01%;descent-override:23.14%;line-gap-override:0.00%}
@font-face{font-family:"Chivo Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:101.57%;ascent-override:92.55%;descent-override:24.61%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   memohoneay.com - MemoHoney, a once-daily memory and focus capsule.
   Design slot: batch13_assignments.py row 264.

     type     Eczar (a high-contrast display serif: headings, figures,
              the wordmark) over Chivo (a grotesque sans for reading)
     ground   wheat-toned paper. ONE wash on the whole site, and it sits
              under the jar in the hero. Every other band is flat.
     cards    lifted white cards, radius 20, no border at rest; the
              featured pack tile is raised higher and set taller
     depth    soft lift - wide, low-opacity shadows that spread rather
              than darken
     layout   a WIDE HORIZONTAL hero: the headline across the top, a
              landscape frame under it with the jar standing at one end
              and the checkable facts at the other, and the reading copy
              in a short wide measure beneath. 1180px throughout.
     motion   hive-settle, the slow honey wash breathing under the jar
              (hero_motifs.py)

   THE JAR IS NEVER ROTATED. The slot describes the bottle "on its side in
   a landscape frame", and a sister site on this estate read that as a 90
   degree rotation and shipped a label nobody could read. The frame is the
   thing that turned landscape; the jar stands upright at the left end of
   it, and the frame's height is set from the jar rather than the other way
   round.

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

:root{
  --bg:#f6efe0;            /* wheat paper, the page ground */
  --paper:#ffffff;         /* the lifted cards. White, per the slot */
  --tint:#efe5d1;          /* the alternating band, a shade under the ground */
  --ink:#2a2419;           /* reading text. 13.4:1 on wheat */
  --ink-2:#463516;         /* headings, the topline band, the footer rule */
  --mut:#6b5c46;           /* secondary text. 5.65:1 on wheat */
  --line:#e4d8bd;          /* hairlines, where one is still wanted */
  --line-2:#efe6d3;
  --accent:#c08a12;        /* honey, off the gold band on the bottle */
  --accent-2:#e8b83c;      /* the light stop of the one CTA gradient */
  /* MEASURED, not chosen. At #8a6108 the eyebrow read 4.43:1 on the tint band
     and 4.12:1 on the hero wash -- both under 4.5 for 14px text. #7d5707 is
     the first step down that clears it on every ground this site paints:
     4.83 on the hero wash, 5.19 on the tint, 5.66 on the paper, 6.48 on
     white. */
  --accent-d:#7d5707;      /* honey dark enough to carry small text */
  --honey:#d9a62c;         /* the footer ground */
  --on-accent:#2a1d03;     /* ink used ON honey, never white */

  --radius:20px;           /* the card radius the slot asks for */
  --radius-sm:12px;        /* buttons, inputs, chips */

  /* Soft lift: wide and low-opacity, tinted with this site's own ink.
     The spread does the work here, not the darkness. */
  --shadow:0 1px 2px rgba(42,36,25,.04), 0 14px 34px rgba(42,36,25,.07);
  --lift:0 3px 8px rgba(42,36,25,.07), 0 26px 54px rgba(42,36,25,.13);
  --lift-hi:0 4px 12px rgba(42,36,25,.08), 0 34px 66px rgba(42,36,25,.16);

  --wrap:1180px;
  --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) + 18px);
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

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

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

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

h1,h2,h3,h4,.brand b,.pack__per,.stats b,.figures b,.fcta__h,.fbrand{
  font-family:Eczar,Georgia,serif;
  font-weight:600;
  line-height:1.18;
  color:var(--ink-2);
}
h1{font-size:clamp(2rem,1.25rem + 2.1vw,2.75rem);margin:.1em 0 .38em;letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,1.15rem + 1.4vw,2.2rem);margin:0 0 .4em}
h3{font-size:1.22rem;margin:0 0 .4em}
h4{font-size:1.05rem;margin:0 0 .35em}
p{margin:0 0 1.05em}

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

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

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

/* --------------------------------------------------------------- buttons
   Rule 11's gradient/solid pair. The primary carries the one CTA gradient
   this site spends; 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), because these buttons are
   <a> elements and a later `.final a` at (0,1,1) would otherwise outrank a
   single-class colour and repaint the label in the link colour. That is
   how a primary CTA ends up the same colour as its own fill; 85 of 103
   stylesheets on this estate carry that geometry. Both stops of the
   gradient were scored: the darker one, #c08a12, reads 5.4:1 against the
   ink the label is set in. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:Eczar,Georgia,serif;
  font-size:17px;font-weight:600;letter-spacing:.01em;
  padding:14px 26px;border-radius:var(--radius-sm);
  border:2px solid transparent;
  text-decoration:none;cursor:pointer;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:var(--on-accent);border-color:var(--accent-d);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease,
             border-color .18s ease, color .18s ease;
}
.btn.btn--gold,a.btn.btn--gold{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:var(--on-accent);border-color:var(--accent-d);
  box-shadow:var(--shadow);
}
.btn.btn--gold:hover,a.btn.btn--gold:hover{
  background:linear-gradient(180deg,#f0c54f,#cf9714);
  color:var(--on-accent);
  box-shadow:var(--lift);transform:translateY(-2px);
}
.btn.btn--ghost,a.btn.btn--ghost{
  background:var(--ink-2);color:#fbf6ea;border-color:var(--ink-2);
}
.btn.btn--ghost:hover,a.btn.btn--ghost:hover{
  background:#33270f;color:#fff;box-shadow:var(--lift);transform:translateY(-2px);
}
.btn.btn--outline,a.btn.btn--outline{
  background:transparent;color:var(--ink-2);border-color:var(--ink-2);
}
.btn.btn--outline:hover,a.btn.btn--outline:hover{
  background:var(--ink-2);color:#fbf6ea;transform:translateY(-2px);
}
.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(--accent-d);outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover{transition:none;transform:none}
}

/* --------------------------------------------------------------- topline
   Four of rule 12's five checkable facts, on every page and every width:
   who is selling, what the routine is, how long the window runs, and a
   human being on the end of a telephone. */
.util{background:var(--ink-2);color:#f1e8d5;font-size:15px;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:5px 24px;padding-block:9px}
.util__item{display:inline-flex;align-items:center;gap:.4em}
.util__item b{color:#fff;font-weight:600}
.util__item--role{
  font-family:Eczar,Georgia,serif;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:#f2c65a;font-size:14.5px;
}
.util__item--tel{margin-left:auto}
/* Rule 12A's five are role, routine, window and telephone. The lot number
   is useful and is not one of them, so it is the item that steps aside when
   the topline has to wrap on a phone. */

.util a{color:#fff;text-decoration:underline}
.util a:hover{color:#f2c65a}

/* --------------------------------------------------------------- masthead
   The slot: identity and destinations sharing ONE wide honey row, closed
   by a thin rule. Nothing is boxed and nothing stacks - the wordmark, the
   ten destinations and the Order button occupy a single rank across the
   1180, and the rule underneath is a hairline rather than a slab. */
.nav{
  position:sticky;top:0;z-index:40;
  /* SOLID. Rule 11 allows two gradients on a site and this one spends them
     on the buying CTA and on the hero ground; a third on the masthead would
     be a third competing surface. */
  background:#f5e3b8;
  border-bottom:1px solid #d9bd7a;
  transition:transform .26s ease, box-shadow .26s ease;
}
.nav--away{transform:translateY(-100%)}
.nav__top{display:flex;align-items:center;gap:20px;min-height:var(--navh);padding-block:8px}

/* The mark: brand_marks.py construction 'stack' carrying the 'comb' glyph.
   Stacked, so the comb sits above the wordmark rather than beside it. */
/* The identity sits on a near-white plate inside the honey row. That is a
   contrast decision, not decoration: brand_marks.py draws the 'stack' comb
   in the site accent itself (#c08a12), which reads 2.3:1 against honey and
   3.05:1 against white. The plate is the only surface on the page that gets
   the mark above 3:1, and the row around it stays honey. */
.brand{display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  text-align:center;text-decoration:none;flex:0 0 auto;
  background:#fffdf8;border-radius:16px;padding:8px 18px;box-shadow:var(--shadow)}
.brand svg{width:26px;height:26px;flex:0 0 auto}
.brand b{font-size:24px;letter-spacing:-.015em;display:block;color:#3c2d10}
.bw{display:block;line-height:1.1}
.bw b em{font-style:normal;color:var(--accent-d)}
.bw small{display:block;font-size:14.5px;letter-spacing:.17em;text-transform:uppercase;
  color:#6a5528;font-weight:600;margin-top:2px}

/* One rank, always. `flex-wrap:nowrap` plus `white-space:nowrap` on the link
   is what makes the row SHED rather than wrap; `.menu__rest` is the set that
   is shed, and every one of those destinations is in the footer. */
.menu{list-style:none;display:flex;flex-wrap:nowrap;align-items:center;
  gap:2px 15px;margin:0;padding:0;flex:1 1 auto;justify-content:center;min-width:0}
.menu__rest{display:none}
.menu a{
  display:inline-block;padding:5px 2px;font-size:15px;font-weight:500;
  white-space:nowrap;
  color:#4a3a18;text-decoration:none;border-bottom:2px solid transparent;
}
.menu a:hover{color:#2a1d03;border-bottom-color:var(--accent-d)}
.menu a[aria-current]{color:#2a1d03;border-bottom-color:var(--accent-d);font-weight:600}
.menu__more a{font-size:14px;color:#5d4a20}
.nav__buy{flex:0 0 auto;padding:10px 20px;font-size:16px}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink-2);margin:5px 0}

/* --------------------------------------------------------------- the hero
   House rule 12A. Five checkable things on the first screen:

     1. who is selling      the topline: U.S. Authorized MemoHoney Merchant,
                            Memohoneay, New York
     2. what it is          one capsule a morning, 30 to a bottle, six names
     3. price and window    from $49 a bottle, 60 days from purchase
     4. a route to evidence the "what the trials used" link in the frame
     5. a human route       the order line, in the topline, at every width

   The frame is the landscape element. `.hero__media` is only the jar's own
   column inside it, which is what the motif is anchored to, so the wash
   settles under the JAR rather than smearing across 1180px of band. */
.hero{position:relative;padding:26px 0 46px;background:var(--bg);overflow:hidden}
.hero__grid{display:block}
.hero__head{max-width:1000px}
.hero h1{margin-bottom:.3em}
.hero__kicker{font-size:18px;color:var(--mut);margin:0 0 16px;max-width:880px}

.hero__frame{
  display:grid;grid-template-columns:470px 1fr;align-items:center;gap:30px;
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--lift);
  padding:18px 30px 18px 18px;
  margin-bottom:22px;
}
/* A near-white well, flat, with a hairline inset instead of a gradient. The
   hive-settle wash is painted INTO this well by hero_motifs.py, and the
   paler the well the more of that wash a reader can actually see -- which is
   house rule 7's visibility requirement, measured rather than assumed. */
.hero__media{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:344px;overflow:hidden;border-radius:var(--radius);
  background:#fffdf7;box-shadow:inset 0 0 0 1px var(--line-2)}
.hero__card{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;gap:8px;padding:6px}
.hero__card img{width:344px;height:auto;max-width:100%}
.hero__cap{margin:0;font-size:14.5px;letter-spacing:.06em;text-transform:uppercase;
  color:#6a5528;font-weight:600;text-align:center}

/* The right end of the landscape frame: the facts a reader checks before
   they read anything. Not decoration - these are rule 12A items 2, 3 and 4. */
/* The right end of the landscape frame: a facts column with the buttons at
   the foot of it. */
.hero__side{display:flex;flex-direction:column;gap:18px;align-self:center}
.hero__marks{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
.hero__mark{margin:0}
.hero__mark b{display:block;font-family:Eczar,Georgia,serif;font-size:1.5rem;
  color:var(--ink-2);line-height:1.15}
.hero__mark span{display:block;font-size:15px;color:var(--mut);line-height:1.5}
.hero__mark a{color:var(--accent-d);font-weight:600}
.hero__marks .hero__mark--wide{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px}

/* The short wide measure beneath the frame. */
.hero__copy{max-width:940px}
.answer{border-left:4px solid var(--accent);padding-left:18px;margin-bottom:18px}
.answer p{margin-bottom:.6em;font-size:18px}
.answer p:last-child{margin-bottom:0}
.answer b{color:var(--ink-2)}
.hero__road{font-size:16px;color:var(--mut);max-width:900px;margin-bottom:18px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__sub{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:15.5px;color:var(--mut);
  margin-bottom:18px}
.hero__sub span{display:inline-flex;align-items:center;gap:.45em}
.hero__sub span::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex:0 0 auto}

.factpills{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px;padding:0}
.factpills li{
  background:var(--paper);border-radius:999px;padding:9px 18px;font-size:15.5px;
  box-shadow:var(--shadow);color:var(--ink);
}
.factpills b{font-family:Eczar,Georgia,serif;color:var(--accent-d);font-size:17px}

.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.figures div{background:var(--paper);border-radius:var(--radius);padding:18px 20px;
  box-shadow:var(--shadow)}
.figures b{display:block;font-size:2rem;line-height:1.1;color:var(--accent-d)}
.figures span{display:block;font-size:15px;color:var(--mut);line-height:1.5;margin-top:4px}

/* --------------------------------------------------------------- sections */
.sec{padding:54px 0;background:var(--bg)}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--paper)}
.sec--olive{background:var(--ink-2);color:#f3ead7}
.sec--olive h2,.sec--olive h3{color:#fff}
.sec--olive p,.sec--olive .sec__head p{color:#eee2ca}
/* The second selector is rule 12E trap 1 in miniature. `.sec__head p` sets
   var(--mut) at (0,1,1) and is declared later in this file, so on the dark
   band the section's own lead paragraph rendered at 1.82:1 -- present,
   dark brown on dark olive, and invisible. The declaration said one thing
   and the rendered element said another; only measuring found it. */
.sec--olive .eyebrow{color:#f2c65a}
.sec--olive a{color:#fff}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:860px;margin-bottom:26px}
.sec__head p{font-size:17.5px;color:var(--mut);margin-bottom:0}

.lead{font-size:19px;line-height:1.66;color:var(--ink);max-width:900px}

.phead{padding:34px 0 10px;background:var(--bg)}
.phead h1{max-width:1000px}
.crumbs{font-size:14.5px;color:var(--mut);margin:0 0 14px}
.crumbs a{color:var(--accent-d)}

/* --------------------------------------------------------------- cards
   Lifted white cards, radius 20, no border at rest. The lift is the whole
   depth language on this site, so a card answers the pointer by lifting
   further rather than by changing colour. */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--paper);border-radius:var(--radius);padding:26px 28px;
  box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;
  counter-reset:step}
.step{background:var(--paper);border-radius:var(--radius);padding:26px 28px;
  box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease}
.step:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.step h3::before{counter-increment:step;content:counter(step);display:inline-flex;
  align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);font-size:15px;margin-right:10px;
  vertical-align:2px}
.step p:last-child{margin-bottom:0}

.callout{background:var(--paper);border-radius:var(--radius);padding:22px 26px;
  box-shadow:var(--shadow);margin:22px 0}
.callout b{display:block;font-family:Eczar,Georgia,serif;font-size:1.15rem;
  color:var(--ink-2);margin-bottom:.35em}
.callout p:last-child{margin-bottom:0}

.alert{background:#fbf1d9;border-radius:var(--radius);padding:22px 26px;margin:22px 0;
  box-shadow:var(--shadow)}
.alert b{display:block;font-family:Eczar,Georgia,serif;font-size:1.15rem;
  color:#6d4a05;margin-bottom:.35em}
.alert p:last-child{margin-bottom:0}

.keypoints{background:var(--paper);border-radius:var(--radius);padding:24px 28px;
  box-shadow:var(--shadow);margin:22px 0}
.keypoints>b{display:block;font-family:Eczar,Georgia,serif;font-size:1.15rem;
  color:var(--ink-2);margin-bottom:.4em}
.keypoints ul{margin:0;padding-left:20px}
.keypoints li{margin-bottom:.4em}

.pullquote{margin:26px 0;padding:22px 28px;background:var(--tint);
  border-radius:var(--radius);font-family:Eczar,Georgia,serif;font-size:1.32rem;
  line-height:1.4;color:var(--ink-2)}
.pullquote cite{display:block;font-family:Chivo,sans-serif;font-size:15px;font-style:normal;
  color:var(--mut);margin-top:10px}

.ticks{list-style:none;margin:0 0 1em;padding:0}
.ticks li{position:relative;padding-left:28px;margin-bottom:.5em}
.ticks li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;
  border-radius:2px;background:var(--accent);transform:rotate(45deg)}
.ord{padding-left:22px}
.ord li{margin-bottom:.5em}

/* --------------------------------------------------------------- tables */
.tablewrap{overflow-x:auto;background:var(--paper);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:18px}
table{border-collapse:collapse;width:100%;font-size:16px}
th{text-align:left;font-family:Eczar,Georgia,serif;font-size:15px;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;background:var(--ink-2);padding:13px 18px;
  font-weight:600}
td{padding:13px 18px;border-top:1px solid var(--line-2);vertical-align:top;color:var(--ink)}
tbody tr:nth-child(even) td{background:#fcf8ef}
tbody tr:last-child td{border-bottom:0}
.tnote{font-size:15px;color:var(--mut);margin-top:-6px}
.dtable{width:100%}

/* --------------------------------------------------------------- split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;margin:26px 0}
.split--flip .split__img{order:2}
.split--tall{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
.split--band{grid-template-columns:1fr}
.split__img img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}
.split__body>:last-child{margin-bottom:0}
@media (min-width:761px){
  .split__img img{max-height:420px;width:auto;margin-inline:auto}
}

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

.badgewall{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px}
.badgewall figure{margin:0;background:var(--paper);border-radius:var(--radius);
  padding:22px;text-align:center;box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease}
.badgewall figure:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.badgewall img{margin:0 auto 12px}
.badgewall b{display:block;font-family:Eczar,Georgia,serif;font-size:1.05rem;
  color:var(--ink-2);margin-bottom:.25em}
.badgewall span{display:block;font-size:15px;color:var(--mut);line-height:1.55}

/* --------------------------------------------------------------- pricing
   The featured rung is RAISED and TALLER, per the slot: it carries the
   heavier shadow and a deeper tile, so the ladder reads as three steps
   rather than three identical boxes. */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.card--pack{position:relative;background:var(--paper);border-radius:var(--radius);
  padding:0;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease}
.card--pack:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.card--pack.featured{box-shadow:var(--lift-hi);transform:translateY(-10px)}
.card--pack.featured:hover{transform:translateY(-12px);box-shadow:var(--lift-hi)}
.card--pack.featured .pack__head{background:var(--accent);color:var(--on-accent)}
/* Taller, per the slot -- but the extra height is added at the FOOT of the
   tile, not split across it, so all three Add To Cart baselines stay on one
   line. Measured before the change: 17786 / 17786 / 17794. */
.card--pack.featured .pack__body{padding:22px 22px 38px}
.pack__flag{position:absolute;top:14px;right:14px;z-index:2;background:var(--ink-2);
  color:#fff;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;font-weight:600}
.pack__head{background:var(--tint);padding:18px 22px}
.pack__head b{display:block;font-family:Eczar,Georgia,serif;font-size:1.32rem;
  color:var(--ink-2)}
.pack__head span{display:block;font-size:15px;color:var(--mut)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:var(--on-accent)}
.pack__body{padding:22px}
.card--pack img{margin:0 auto 14px}
.pack__per{font-size:3rem;line-height:1;text-align:center;margin:0;color:var(--ink-2)}
.pack__per sup{font-size:1.2rem;vertical-align:top;top:.5em;position:relative}
.pack__unit{display:block;text-align:center;font-size:15px;color:var(--mut);margin-bottom:10px}
.pack__tot{text-align:center;margin:0 0 14px;font-size:17px}
.pack__tot b{font-weight:600;color:var(--ink)}
.pack__was{text-decoration:line-through;color:var(--mut);margin-left:6px;font-size:15px}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:15.5px}
.pack__perks li{position:relative;padding-left:24px;margin-bottom:.42em;color:var(--ink)}
.pack__perks li::before{content:"";position:absolute;left:3px;top:.6em;width:8px;height:8px;
  border-radius:50%;background:var(--accent)}
/* 14.5, not 14: the lot-and-origin line is a caption (typography.md), and
   type_floor.py cannot see it because a bare class names no element. */
.pack__marks{font-size:14.5px;color:var(--mut);text-align:center;margin:10px 0 0}
.buy__note{font-size:15.5px;color:var(--mut);margin-top:20px;max-width:900px}

/* --------------------------------------------------------------- ingredients */
.inglist{display:grid;gap:22px}
.ingcard{background:var(--paper);border-radius:var(--radius);padding:26px 28px;
  box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease}
.ingcard:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
  margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.ingcard__top h3{margin:0;font-size:1.34rem}
.ing__latin{font-size:14.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.ing__dose{margin-left:auto;font-size:15px;color:var(--accent-d);font-weight:600}
.ingcard p:last-child{margin-bottom:0}

.versus{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:0;background:var(--paper);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.versus>div{padding:14px 18px;border-top:1px solid var(--line-2);font-size:16px}
.versus__h{background:var(--ink-2);color:#fff;font-family:Eczar,Georgia,serif;
  font-size:15px;letter-spacing:.05em;text-transform:uppercase;border-top:0}

.meter{display:grid;gap:10px;max-width:640px}
.meter__row{display:grid;grid-template-columns:78px 1fr 46px;align-items:center;gap:12px;
  font-size:15.5px}
.meter__bar{display:block;height:12px;border-radius:999px;background:var(--tint);
  overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--accent)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px}
.stats div{text-align:center}
.stats b{display:block;font-size:2.4rem;color:#f2c65a;line-height:1.1}
.stats span{display:block;font-size:15.5px;color:#eee2ca;margin-top:4px}

.stars{color:var(--accent);letter-spacing:2px}
.stars i{opacity:.35;font-style:normal}

/* --------------------------------------------------------------- Q&A */
.faq{display:grid;gap:12px}
.faq details{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:18px 54px 18px 24px;position:relative;
  font-family:Eczar,Georgia,serif;font-size:1.1rem;color:var(--ink-2);font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:24px;top:15px;font-size:1.5rem;
  color:var(--accent-d);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--accent-d)}
.faq__body{padding:0 24px 20px}
.faq__body p:last-child{margin-bottom:0}

.qa{background:var(--paper);border-radius:var(--radius);padding:26px 28px;
  box-shadow:var(--shadow)}
.qa>p{font-size:17.5px}
.qa .tablewrap{box-shadow:none;background:transparent;margin-bottom:0}
.qa table{font-size:16px}
.qa td{padding:10px 0;border-top:1px solid var(--line-2)}
.qa td:first-child{width:36%;color:var(--ink-2)}

/* --------------------------------------------------------------- final CTA */
.final{background:var(--paper);border-radius:var(--radius);padding:34px 36px;
  box-shadow:var(--lift)}
.final h2{margin-bottom:.35em}
.final--media{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:center}
.final__img img{margin:0 auto;border-radius:var(--radius)}
.final__price{font-family:Eczar,Georgia,serif;font-size:1.2rem;color:var(--ink-2)}
.final__sm{font-size:15px;color:var(--mut);margin:12px 0 0}

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

/* --------------------------------------------------------------- byline */
.byline{display:grid;grid-template-columns:64px 1fr;gap:20px;background:var(--paper);
  border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow)}
.byline__mark{display:flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;background:var(--accent);
  color:var(--on-accent);font-family:Eczar,Georgia,serif;font-size:1.3rem;font-weight:700}
.byline b{display:block;font-family:Eczar,Georgia,serif;font-size:1.15rem;color:var(--ink-2);
  margin-bottom:.35em}
.byline p{margin:0;font-size:16px;color:var(--ink)}

.refs ol{padding-left:22px;font-size:15.5px;color:var(--ink)}
.refs li{margin-bottom:.6em;word-break:break-word}

/* --------------------------------------------------------------- forms */
.formcard{background:var(--paper);border-radius:var(--radius);padding:28px 30px;
  box-shadow:var(--shadow)}
.form{display:grid;gap:16px}
.field{display:grid;gap:6px}
.form label{font-weight:600;font-size:16px;color:var(--ink-2)}
.form input,.form select,.form textarea{
  font-family:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#fffdf7;color:var(--ink);width:100%;
}
.form__hint{font-size:15px;color:var(--mut)}

/* --------------------------------------------------------------- blog */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.posts article{background:var(--paper);border-radius:var(--radius);padding:26px 28px;
  box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease}
.posts article:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.posts h3{margin-bottom:.3em}
.posts h3 a{text-decoration:none;color:var(--ink-2)}
.posts h3 a:hover{color:var(--accent-d)}
.postmeta{font-size:15px;color:var(--mut);margin-bottom:1em}
.article{max-width:760px}
.article h2{margin-top:1.5em}
.article h3{margin-top:1.2em}
.article figure{margin:26px 0}
.article figure img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}
.article figure.portrait img{width:var(--figw,320px);margin-inline:auto}
.article figcaption{font-size:15px;color:var(--mut);margin-top:10px}
.article .final--media{grid-template-columns:150px 1fr;padding:26px 28px}
.article .final h2{font-size:1.5rem}
.toc{background:var(--tint);border-radius:var(--radius);padding:22px 26px;margin-bottom:28px}
.toc b{display:block;font-family:Eczar,Georgia,serif;font-size:1.1rem;color:var(--ink-2);
  margin-bottom:.4em}
.toc ol{margin:0;padding-left:20px}
.toc li{margin-bottom:.3em}

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

/* --------------------------------------------------------------- buybar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink-2);
  color:#f5ecd9;transform:translateY(105%);transition:transform .3s ease;display:block}
.buybar.show{transform:none}
/* `html.chrome-up .buybar` is NOT authored here. fix_chrome_scroll.py owns
   that rule and reads this bar's own hidden transform to write it, and two
   copies of it in one stylesheet is two places to get the number wrong. */
.buybar__in{width:min(var(--wrap),calc(100% - 28px));margin-inline:auto;display:flex;
  align-items:center;gap:18px;padding:12px 0}
.buybar__t{flex:1 1 auto;line-height:1.35}
.buybar__t b{display:block;font-family:Eczar,Georgia,serif;font-size:17px;color:#fff}
.buybar__t span{display:block;font-size:14.5px;color:#e7dcc4}
.buybar .btn{flex:0 0 auto}

/* --------------------------------------------------------------- phone
   Above CRITICAL-END on purpose: this block is what makes the hero a phone
   hero, and a phone that paints the desktop hero from the inlined critical
   CSS and then relays it when the async sheet lands is the estate's
   largest mobile-CLS fault. critical_hero.py copies the hero rules up here
   anyway; authoring them above the marker means the very first build ships
   them rather than the one after it. */
@media (max-width:1240px){
  .menu{gap:2px 11px}
  .menu a{font-size:14.5px}
}
@media (max-width:1080px){
  .hero__frame{grid-template-columns:380px 1fr;padding:20px}
  .hero__card img{width:320px}
  .hero__media{min-height:320px}
}
@media (max-width:980px){
  .hero{padding:22px 0 38px}
  /* A wide horizontal hero is the layout most likely to fall apart at 390, so
     below 980 the frame stops being a frame and the hero becomes an ORDERED
     column. `display:contents` on `.hero__frame` and `.hero__copy` promotes
     their children to flex items of `.hero__grid`, which is the only way to
     interleave the jar, the checkable facts and the reading copy without
     duplicating any of them in the markup.

     The order is chosen so that all five of rule 12A's facts land inside the
     first two screens at 390: headline, jar, the four marks, the Quick Answer,
     then the buttons. Measured before this block existed, with the frame
     stacked in source order, the phone CTA sat at y=2376. */
  .hero__grid{display:flex;flex-direction:column;gap:0}
  .hero__head{order:1}
  .hero__frame{display:contents}
  /* The well hugs the jar once the frame has stopped being a frame. Left at
     full width it ran 732px at 768 with a 300px bottle in the middle of it,
     and the wash spread out instead of settling under the product. */
  .hero__media{order:2;min-height:0;margin:0 auto 18px;padding:14px;max-width:560px;
    width:100%;background:var(--paper);box-shadow:var(--lift)}
  .hero__copy{display:contents;max-width:none}
  .hero__side{order:3;margin-bottom:18px}
  .hero__marks{grid-template-columns:1fr 1fr;gap:12px 20px}
  .hero .answer{order:4;margin-bottom:16px}
  .hero__road{order:6}
  .hero__sub{order:7}
  .hero .factpills{order:8}
  .hero .figures{order:9}
  .hero__card img{width:300px}
  .prices{grid-template-columns:1fr;gap:20px}
  .card--pack.featured{transform:none}
  .card--pack.featured:hover{transform:translateY(-2px)}
  .final--media{grid-template-columns:1fr}
  .split,.split--tall{grid-template-columns:1fr}
  .split--flip .split__img{order:0}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .versus{grid-template-columns:1fr}
  .versus__h:nth-of-type(n+2){display:none}
}
/* The burger takes over at 1100, which is where the shed row would otherwise
   run out of space. Everything the row was carrying is in the burger list. */
@media (max-width:1100px){
  .burger{display:block;order:3}
  .nav__top{flex-wrap:wrap;gap:12px}
  .menu{order:4;flex-basis:100%;display:none;flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:0;padding-bottom:10px}
  .menu.open{display:flex}
  .menu__rest{display:block}
  .menu a{padding:11px 4px;border-bottom:1px solid #e3cf9f;display:block}
  .nav__buy{margin-left:auto}
}
@media (max-width:860px){
  .g2,.g3{grid-template-columns:1fr}
  .byline{grid-template-columns:1fr}
  .article .final--media{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .sec{padding:40px 0}
  /* The H1 is fourteen words and at the clamp's own minimum it ran to seven
     lines and 227px on a 390 screen. 1.62rem puts it in five. */
  .hero h1{font-size:1.62rem;line-height:1.2}
  /* Who is selling is already in the topline on every width, so the kicker is
     the one hero element that repeats itself on a phone. */
  .hero__kicker{display:none}
  .hero .answer p{font-size:17px}
  .hero__marks{grid-template-columns:1fr;gap:10px}
  .hero__mark b{font-size:1.22rem}
  .hero__mark span{font-size:15px}
  .hero__marks .hero__mark--wide{padding-top:10px}
  .util__item--lot{display:none}
  /* 171px of masthead before the headline at 390, measured. The plate keeps
     its white ground because that is what lifts the mark to 3.05:1; it just
     stops carrying the label sub-line, which the topline already says. */
  .brand{padding:6px 12px;border-radius:14px}
  .brand b{font-size:21px}
  .bw small{display:none}
  .nav__buy{padding:9px 16px;font-size:15px}
  .hero__card img{width:min(300px,78vw)}
  .shots,.shots.s2{grid-template-columns:1fr}
  .util__row{gap:4px 16px;font-size:14.5px}
  .util__item--tel{margin-left:0}
  .buybar__in{gap:12px}
  .buybar__t span{display:none}
  .meter__row{grid-template-columns:66px 1fr 40px}
  .final{padding:26px 22px}
}

/* ---- tap targets (WCAG 2.5.8, 24px) ------------------------------------
   A link standing alone in a list row, a table cell or its own paragraph is
   a control, and as `display:inline` it answered as a 19-22px target at 375
   (measured: footer columns 19px, contact routes 21px, the post contents
   22px, the footer contact card's order line and order email 20-22px).
   Pitfall 82's shape: inline-block plus padding grows the target, and the
   equal negative margin hands the line box back its old height, so nothing
   on the page moves. Above CRITICAL-END so no paint ever differs. */
footer li a,
.fcard a,
.toc li a,
a.tap{display:inline-block;padding-block:4px;margin-block:-4px}

/* ---- hero motif -- hive-settle ---------------------------------------- */
.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(170deg,#f6efe0,#ecddbb 52%,#f6efe0)}.hero__media::before{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:0;left:50%;top:60%;width:132%;aspect-ratio:1.4;translate:-50% -50%;filter:blur(16px);background:radial-gradient(closest-side,rgba(192,138,18,0.30),transparent 68%);animation:b13HiveSettle 15s ease-in-out infinite}.hero__media::after{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:0;left:50%;top:60%;width:81%;aspect-ratio:1.4;translate:-50% -50%;filter:blur(12px);background:radial-gradient(closest-side,rgba(192,138,18,0.23),transparent 60%);animation:b13HiveSettle 15s ease-in-out infinite;animation-delay:5.0s}@keyframes b13HiveSettle{0%,100%{transform:scale(.82);opacity:.16}52%{transform:scale(1.08);opacity:0.5}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/

/* ==========================================================================
   Below the fold. Nothing here changes the geometry of the first screen.
   ========================================================================== */

/* --------------------------------------------------------------- guarantee band
   The slot asks for the guarantee figure oversized, and this is where it
   goes: one honey panel above the footer with the 60 set at display size
   beside the sentence that qualifies it. */
.fcta{background:var(--tint);padding:52px 0}
.fcta__box{display:grid;grid-template-columns:1fr 260px;gap:34px;align-items:center;
  background:var(--paper);border-radius:var(--radius);padding:34px 38px;
  box-shadow:var(--lift)}
.fcta__eye{display:inline-block;font-family:Eczar,Georgia,serif;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-d);margin-bottom:.4em}
.fcta__h{font-size:1.7rem;margin:0 0 .5em}
.fcta__sm{font-size:15px;color:var(--mut);margin:14px 0 0}
.fcta__img img{margin:0 auto}
@media (max-width:860px){
  .fcta__box{grid-template-columns:1fr;padding:26px 22px}
  .fcta__img{order:-1}
}

/* --------------------------------------------------------------- footer
   Honey ground, the guarantee figure oversized, links in three short
   ranks. Ink on honey measures 7.7:1, so nothing here is set in white on
   a colour that cannot carry it. */
footer{background:var(--honey);color:#241a06;padding:46px 0 0;
  border-top:6px solid var(--accent-d)}
footer a{color:#241a06;text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:#4a3410}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.45em}
footer li a{font-size:16px}

.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;margin-bottom:34px}
.fseals{max-width:420px}
/* The footer wordmark is two-tone, like the one on the bottle. It was white
   on honey and measured 2.22:1, which is pitfall 64 in a different colour;
   #5d3a05 keeps the two halves distinct at 4.55:1. */
.fbrand{display:block;font-size:2.1rem;color:#2c1f05;line-height:1.1}
.fbrand span{color:#5d3a05}
.frole{font-size:16px;margin:.35em 0 1em;color:#3a2b08}
.fh{font-family:Eczar,Georgia,serif;font-size:15px;letter-spacing:.13em;text-transform:uppercase;
  color:#2c1f05;font-weight:600;margin:0 0 .7em}

/* The oversized figure. It is the guarantee, not a decoration: the number
   and the unit are one phrase and the sentence beside it does the
   qualifying. */
.fguarantee{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.55);
  border-radius:var(--radius);padding:16px 20px;margin:0 0 16px}
.fguarantee b{font-family:Eczar,Georgia,serif;font-size:3.6rem;line-height:.9;
  color:#2c1f05}
.fguarantee span{font-size:16px;line-height:1.45;color:#3a2b08}

.flot{font-size:16px;margin:0 0 .6em}
.flot span{display:block;font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  color:#4a3410}
.flot b{font-size:18px}
.fcoa{font-size:16px;margin-bottom:1em}
.fsealrow{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.fsealrow img{background:rgba(255,255,255,.75);border-radius:12px;padding:5px}
.fseals>span{display:block;font-size:16px}

.fcard{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;
  background:rgba(255,255,255,.5);border-radius:var(--radius);padding:24px 26px;
  margin-bottom:26px}
.fcard b{font-family:Eczar,Georgia,serif;font-size:1.05rem;color:#2c1f05}
.fcard p{font-size:17px;margin:0;line-height:1.7}

.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-bottom:30px}
.fpay span{font-size:16px;color:#3a2b08}

.disc{background:#3a2b08;color:#f0e6d2;padding:30px 0 34px;font-size:16px}
.disc p{margin-bottom:1em}
.disc b{color:#fff}
.disc__list{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:.6em}
.disc__list li{position:relative;padding-left:20px;line-height:1.66;color:#ece0c9}
.disc__list li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:7px;
  border-radius:50%;background:var(--honey)}
.disc a{color:#f2c65a}
.copy{font-size:16px;color:#dcd0b6;margin:0}

@media (max-width:980px){
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .fgrid{grid-template-columns:1fr;gap:26px}
  .fguarantee b{font-size:3rem}
}

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

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

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav--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: stack construction */
.brand{flex-direction:column;align-items:center;gap:4px;text-align:center}.brand svg{width:26px;height:26px;margin-right:0!important}
/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 41 box-shadow declaration(s)
   and 0 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (42,36,25), not neutral black.

   Paint only: border-radius, box-shadow and transform change no
   geometry, so this is safe below the critical marker and needs a
   restamp rather than a rebuild. */
:root{
  --shadow:0 1px 2px rgba(42,36,25,.06), 0 6px 18px rgba(42,36,25,.07);
  --lift:0 2px 6px rgba(42,36,25,.09), 0 16px 34px rgba(42,36,25,.14);
}

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

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

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

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