/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Fraunces Fallback";src:local("Georgia");font-weight:400;size-adjust:105.95%;ascent-override:92.30%;descent-override:24.07%;line-gap-override:0.00%}
@font-face{font-family:"Fraunces Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:96.71%;ascent-override:101.13%;descent-override:26.37%;line-gap-override:0.00%}
@font-face{font-family:"Commissioner Fallback";src:local("Arial");font-weight:400;size-adjust:101.57%;ascent-override:100.13%;descent-override:20.28%;line-gap-override:0.00%}
@font-face{font-family:"Commissioner Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:95.28%;ascent-override:106.74%;descent-override:21.62%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* maemohoney.com - MemoHoney, the U.S. stocking partner's counter.
   ------------------------------------------------------------------
   Design slot (batch13_assignments.py, sheet row 258):

     type    Fraunces over Commissioner, an optical-size serif with a soft
             wedge terminal above a humanist sans with a tall x-height
     layout  hero 6/6 with the BOTTLE LEFT and the copy right; a
             three-across rhythm everywhere below it
     cards   filled on a deeper tint of the paper, radius 18, NO border
     ground  honeyed cream, amber panels, and exactly ONE gradient, in the
             buying CTA. Nothing else here is a gradient except the hero
             wash the motif tool paints.
     depth   soft lift, two stops, both tinted with this site's own ink
     mark    arch container, comb glyph
     motif   focus / comb-warm

   Everything above the CRITICAL-END marker is minified and inlined into
   every page head, including the phone rules for the header and the hero:
   a phone that paints the desktop hero from the inline block and then
   relays it when the async sheet lands is this estate's largest single
   source of mobile CLS.

   Do not write the marker's literal text anywhere except at the marker.
   A CSS comment cannot nest, so the closing delimiter inside a quoted copy
   of it ends this comment early AND steals the split that every tool makes
   on the marker. That cost this build one render pass.
*/
/* ============================================================== tokens */
:root {
  --paper:      #fdf7ea;   /* honeyed cream — the page ground             */
  --paper-2:    #f8eed7;   /* one step deeper — section tint              */
  --tint:       #f4e5c3;   /* the card fill: a deeper tint, never a border*/
  --panel:      #efdcb2;   /* amber panel                                 */
  --panel-2:    #e8cf95;   /* amber panel, heavier                        */
  --amber:      #c98a12;   /* the honey accent, for rules and marks       */
  --amber-deep: #a2610a;   /* the accent at text and button strength      */
  --amber-dark: #7a4404;   /* the far stop of the one gradient            */
  /* Links only. --amber-deep is the bottle's own accent and it keeps the buy
     gradient, the marks and the rules -- but as LINK TEXT on these creams it
     measures 3.66:1 on the hero wash, 3.91:1 on the panel and 3.96:1 on the
     card tint, against a 4.5 floor. Darkening the accent itself would have
     moved the fill and every mark with it, so the link gets a colour of its
     own: the same honey two steps down, measured 4.73:1 on the darkest cream
     it lands on and 5.98:1 on the paper ground. */
  --amber-link: #8a5208;
  --ink:        #2a2118;   /* warm near-black — all running text          */
  --ink-2:      #574634;   /* secondary text                              */
  /* Captions, meta. Was #7d6950: 4.20:1 on the --tint card fill, where the
     ingredient family line, the pack's "a bottle" and the struck comparison
     price all sit (audit 21 Sep 2026). #6f5b45 is the same brown one step
     down: 5.17:1 on --tint, 4.77:1 on --panel, 5.59:1 on --paper-2. */
  --ink-3:      #6f5b45;
  --line:       #e2cfa4;   /* hairlines, where a hairline is still right  */
  --white:      #fffdf8;

  /* Curve: a scale, not one value (house rule 11.1). */
  --radius:     18px;
  --radius-sm:  11px;

  /* Shade: two stops, tinted with 42,33,24 — this site's own ink. A grey
     shadow under honeyed paper is the tell that the palette stopped at the
     surface. */
  --shadow: 0 1px 2px rgba(42,33,24,.07), 0 8px 22px rgba(42,33,24,.08);
  --lift:   0 2px 6px rgba(42,33,24,.10), 0 18px 38px rgba(42,33,24,.16);

  /* Gradient: ONE, and it belongs to the thing that takes the money. */
  --buy: linear-gradient(135deg, var(--amber-deep) 0%, var(--amber-dark) 100%);

  --wrap: 1180px;
  --navh: 118px;
  --serif:"Fraunces","Fraunces Fallback", Georgia, "Times New Roman", serif;
  --sans:"Commissioner","Commissioner Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

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

html, body { overflow-x: clip; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.72;
  font-synthesis-weight: none;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.008em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(1.95rem, 1.3rem + 2.1vw, 2.8rem); }
h2 { font-size: clamp(1.6rem, 1.22rem + 1.5vw, 2.3rem); }
h3 { font-size: 1.24rem; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--amber-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--amber-dark); }

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--ink); color: var(--white); padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0; font-size: 1rem;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--amber-deep); outline-offset: 3px; }

/* ============================================================== topline */
.util {
  background: var(--ink);
  color: #f4e7cf;
  font-size: .95rem;
  letter-spacing: .01em;
}
.util__row {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  align-items: center; justify-content: space-between;
  padding: 9px 0;
}
.util__item { display: inline-flex; gap: 7px; align-items: center; }
.util__item b { color: var(--white); font-weight: 600; }
.util a { color: #f6dfa8; text-decoration: none; font-weight: 600; }
.util a:hover { text-decoration: underline; }

/* ============================================================== header
   The slot: a cream band, an OVERSIZED INITIAL left of the desk name, and
   the destinations on their own rank beneath. Two ranks, so the wordmark
   gets to be a wordmark and the links get a full line to themselves. */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: transform .26s ease, box-shadow .26s ease;
}
.nav--away { transform: translateY(-104%); }
.nav__top {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "brand chip . buy" "menu menu menu menu";
  align-items: center;
  gap: 8px 20px;
  padding: 14px 0 0;
}
.brand {
  grid-area: brand;
  display: flex; align-items: center; gap: 13px;
  text-decoration: none; color: var(--ink);
}
/* The mark is an ARCH container holding a comb glyph — the shape is the
   path, so the element takes no radius of its own. Selected on the element
   rather than on a class: brand_marks.py stamps the svg without one. */
.brand > svg, .brand__glyph { width: 54px; height: 54px; flex: 0 0 auto; }
.bw { display: flex; flex-direction: column; line-height: 1.1; }
.bw b {
  font-family: var(--serif); font-weight: 600; font-size: 1.62rem;
  letter-spacing: -.015em;
}
.bw b em { font-style: normal; color: var(--amber-deep); }
/* The oversized initial sitting left of the desk name. */
.bw__i {
  font-size: 1.62em; line-height: .8; color: var(--amber-dark);
  margin-right: 1px;
}
.bw small {
  font-size:0.9062rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin-top: 3px;
}
.nav__chip {
  grid-area: chip;
  justify-self: start;
  background: var(--panel); color: #58380a;
  border-radius: 999px; padding: 6px 15px;
  font-size: .88rem; font-weight: 600; letter-spacing: .01em;
}
.nav__buy { grid-area: buy; }
.menu {
  grid-area: menu;
  display: flex; flex-wrap: wrap; gap: 2px 24px;
  list-style: none; margin: 12px 0 0; padding: 10px 0 0;
  border-top: 1px solid var(--line);
}
.menu a {
  display: block; padding: 8px 0;
  color: var(--ink-2); text-decoration: none;
  font-size: 1rem; font-weight: 600; letter-spacing: .005em;
  border-bottom: 2px solid transparent;
}
.menu a:hover, .menu a[aria-current="page"] {
  color: var(--ink); border-bottom-color: var(--amber);
}
.burger { display: none; }

/* ============================================================== buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px;
  background: var(--buy);
  color: var(--white);
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
  letter-spacing: .012em;
  padding: 13px 24px;
  border: 0; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover { color: var(--white); filter: brightness(1.08); box-shadow: var(--lift); transform: translateY(-2px); }
.btn--gold { background: var(--buy); color: var(--white); }
.btn.btn--gold { color: var(--white); }
.btn--lg { padding: 17px 32px; font-size: 1.08rem; }
.btn--wide { width: 100%; }
/* Solid, deliberately — the pair must read as two weights, not one button
   drawn twice (house rule 11.4). */
.btn--ghost, .btn.btn--ghost {
  background: var(--panel); color: #503309;
  box-shadow: none; border: 0;
}
.btn.btn--ghost:hover { background: var(--panel-2); color: #3d2606; filter: none; }

/* ============================================================== hero
   6/6, bottle LEFT, copy right. The media column is first in the source so
   a phone shows the product under the headline without a reorder; on the
   desktop grid the copy is pushed to column two. */
.hero {
  position: relative;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: 36px 0 48px;
}
.hero__grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 46px;
  align-items: start;
}
.hero__media {
  position: relative;
  /* The copy is FIRST in the source so a phone reads eyebrow, headline,
     Quick Answer before it meets the bottle. On the desktop 6/6 the bottle
     moves to column one, which is what the design slot asks for. */
  order: -1;
}
.hero__card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 22px 16px;
  position: relative; z-index: 2;
  max-width: 460px;
  margin-inline: auto;
}
.hero__card img { width: 100%; height: auto; border-radius: 12px; }
.hero__cap {
  margin: 12px 0 0; text-align: center;
  font-size: .92rem; color: var(--ink-3); letter-spacing: .02em;
}
.eyebrow {
  display: inline-block;
  font-size:0.8438rem; font-weight: 700; letter-spacing: .17em;
  /* --amber-deep read 4.28:1 on the --paper-2 page head and 3.96:1 on the
     card tint. The link honey clears every cream it lands on (5.53 / 5.12 /
     4.72 on paper-2 / tint / panel) and stays the same hue. */
  text-transform: uppercase; color: var(--amber-link);
  margin-bottom: 10px;
}
.hero h1 { margin-bottom: .4em; }
.answer {
  background: var(--white);
  border-left: 5px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 17px 20px;
  margin: 0 0 18px;
  box-shadow: var(--shadow);
}
.answer p { margin-bottom: .7em; font-size:1.062rem; }
.answer p:last-child { margin-bottom: 0; }
.hero__road { color: var(--ink-2); font-size: 1.02rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 13px; margin: 20px 0 14px; }
.hero__sub {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  margin: 0 0 16px; font-size: .96rem; color: var(--ink-2);
}
.hero__sub span { display: inline-flex; gap: 7px; align-items: center; }
.hero__sub span::before { content: "\2713"; color: var(--amber-deep); font-weight: 700; }
.factpills {
  display: flex; flex-wrap: wrap; gap: 9px;
  list-style: none; margin: 0 0 18px; padding: 0;
}
.factpills li {
  background: var(--panel); color: #533509;
  border-radius: 999px; padding: 7px 15px;
  font-size: .92rem;
}
.factpills li b { color: #3d2606; }
.figures {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.figures > div {
  background: var(--tint);
  border-radius: var(--radius);
  padding: 15px 16px;
}
.figures b {
  display: block; font-family: var(--serif); font-size: 1.5rem;
  color: var(--amber-dark); line-height: 1.1;
}
.figures span { display: block; font-size: .9rem; color: var(--ink-2); margin-top: 5px; }

/* ---- audit 21 Sep 2026: geometry fixes, ABOVE the marker on purpose ----
   Each of these moves layout, so each has to be in the inline block or a
   phone relays the page when the async sheet lands.
   1. The final-CTA eyebrow was 13.1px (.82rem), under the 13.5px label
      floor, and --amber-deep on the tint at 3.96:1. The original rule
      below the marker carries the same values; this copy paints them first.
   2. Citation URLs in .refs are single unbreakable runs after a slash that
      precedes digits (pubmed.ncbi.nlm.nih.gov/40789388/), and at 17px they
      ran 1-9px past a 375px viewport. They may break anywhere.
   3. Standalone contact links, one per line under a <br>, rendered as 22px
      inline boxes: the footer contact card on every page and the two
      contact cards on contact.html. inline-block takes the line height, so
      the target is ~29px and the line box does not change.
   4. The blog table of contents: one link per list item, 20px inline boxes.
      Same treatment. */
.fcta__eye { font-size: .8438rem; color: var(--amber-link); }
.refs li, .refs a { overflow-wrap: anywhere; }
.fcard p > a, .card p > b > a,
.card p > a[href^="tel:"], .card p > a[href^="mailto:"] { display: inline-block; }
.toc li > a { display: inline-block; }
/* 5. The rating meter: its label column was 34px and the labels are
      "5 stars", so every label broke onto two lines beside its bar, and the
      block sat flush on whatever followed it. Same values as the originals
      below the marker. */
.meter { margin-bottom: 24px; }
.meter__row { grid-template-columns: 4.4em 1fr 48px; }

/* ---- the phone hero, ABOVE the marker on purpose --------------------- */
@media (max-width: 980px) {
  .hero { padding: 30px 0 38px; }
  .hero__grid { grid-template-columns: 1fr; gap: 22px; }
  .hero__copy { display: contents; }
  .hero__copy > * { order: 6; }
  .hero__copy > .eyebrow { order: 1; }
  .hero__copy > h1 { order: 2; }
  .hero__copy > .answer { order: 3; }
  .hero__media { order: 4; }
  .hero__copy > .hero__cta { order: 5; }
  .hero__copy > .hero__road { order: 6; }
  .hero__copy > .hero__sub { order: 7; }
  .hero__copy > .factpills { order: 8; }
  .hero__copy > .figures { order: 9; }
  /* One column, so the plate would otherwise run the full 728px of a
     tablet and render the bottle far larger than the 240-400px band the
     house measures at phone widths. Capped, and centred. */
  .hero__card { padding: 18px 18px 14px; max-width: 420px; margin-inline: auto; }
  .figures { grid-template-columns: 1fr; }
  .figures > div { display: flex; gap: 12px; align-items: baseline; }
  .figures b { font-size: 1.32rem; }
}
@media (max-width: 880px) {
  .nav__top {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand burger" "menu menu";
    padding: 12px 0 0;
    gap: 6px 14px;
  }
  .nav__chip, .nav__buy { display: none; }
  .brand > svg, .brand__glyph { width: 46px; height: 46px; }
  .bw b { font-size: 1.32rem; }
  .burger {
    grid-area: burger;
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 0 10px;
    background: var(--panel); border: 0; border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .burger span { display: block; height: 3px; border-radius: 2px; background: var(--ink); }
  .menu {
    display: none; flex-direction: column; gap: 0;
    margin: 10px 0 0; padding: 6px 0 10px;
  }
  .menu.open { display: flex; }
  .menu a { padding: 11px 2px; border-bottom: 1px solid var(--line); }
  .util__row { justify-content: flex-start; gap: 2px 14px; padding: 7px 0; }
  .util { font-size:0.9062rem; line-height: 1.5; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .wrap { width: min(var(--wrap), 100% - 32px); }
  .hero__cta .btn { width: 100%; }
  .hero__card { max-width: 330px; padding: 14px 14px 10px; }
}/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@media print{
  .nav, .util, .buybar, .fcta, .hero__cta{display: none;}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}
/* --- end of the copied hero responsive rules --- */

/* ---- hero motif -- comb-warm ---------------------------------------- */
.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(181deg,#fdf7ea,#f4e3c3 52%,#fdf7ea)}.hero__media::before{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:0;left:50%;top:42%;width:128%;aspect-ratio:1.2;translate:-50% -50%;filter:blur(15px);background:radial-gradient(closest-side,rgba(201,138,18,0.32),transparent 68%);animation:b13CombWarm 14s ease-in-out infinite}.hero__media::after{content:'';position:absolute;pointer-events:none;border-radius:50%;z-index:0;left:50%;top:42%;width:79%;aspect-ratio:1.2;translate:-50% -50%;filter:blur(11px);background:radial-gradient(closest-side,rgba(201,138,18,0.24),transparent 60%);animation:b13CombWarm 14s ease-in-out infinite;animation-delay:4.7s}@keyframes b13CombWarm{0%,100%{transform:scale(.82);opacity:.16}52%{transform:scale(1.08);opacity:0.54}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/

/* ============================================================== sections */
.sec { padding: 54px 0; }
.sec--tint { background: var(--paper-2); }
.sec--panel { background: var(--panel); }
.sec--brass { background: var(--ink); color: #f2e6d0; }
.sec--brass h2, .sec--brass h3 { color: var(--white); }
.sec--brass .eyebrow { color: #f0c465; }
.sec--brass a { color: #f6dfa8; }
.sec--center { text-align: center; }
.sec--center .sec__head { margin-inline: auto; }
.sec__head { max-width: 76ch; margin-bottom: 26px; }
.sec__head p { color: var(--ink-2); font-size: 1.05rem; }
/* ...but --ink-2 is a secondary tone for PAPER. Inside the brass band it was
   dark brown on near-black at 1.75:1, so the one line qualifying the
   distributor's own numbers was the only thing in that band a reader could not
   see. Same on-dark tone the cards in this band already use: 10.2:1. */
.sec--brass .sec__head p { color: #ddceb4; }
.phead {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: 30px 0 40px;
}
.phead .answer { max-width: 80ch; }
.crumbs { font-size: .93rem; color: var(--ink-3); margin: 0 0 14px; }
.crumbs a { color: var(--ink-2); }
.lead { font-size: 1.12rem; color: var(--ink-2); max-width: 80ch; }

/* ============================================================== cards
   Filled on a deeper tint of the paper. No border anywhere — the fill is
   the edge. Radius 18, soft two-stop lift on hover. */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--tint);
  border: 0; border-radius: var(--radius);
  padding: 24px 24px 26px;
  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: .45em; }
.card p { font-size:1.062rem; color: var(--ink-2); }
.sec--tint .card { background: var(--white); }
.sec--panel .card { background: var(--white); }
.sec--brass .card { background: #3a2f22; color: #eadfcb; }
.sec--brass .card p { color: #ddceb4; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
.step {
  background: var(--tint); border-radius: var(--radius);
  padding: 22px 22px 24px;
  box-shadow: var(--shadow);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.step:hover { transform: translateY(-2px); box-shadow: var(--lift); }
.step::before {
  counter-increment: s; content: counter(s);
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600;
  color: var(--amber-dark);
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--panel); margin-bottom: 12px;
}
.step p { font-size:1.062rem; color: var(--ink-2); }
.sec--tint .step { background: var(--white); }

/* ============================================================== callouts */
.callout, .alert, .keypoints {
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 22px 0;
  box-shadow: var(--shadow);
}
.callout { background: var(--panel); }
.alert { background: #f6e0cf; }
.keypoints { background: var(--tint); }
.callout b, .alert b, .keypoints b {
  display: block; font-family: var(--serif); font-size: 1.14rem;
  margin-bottom: .4em;
}
.callout p, .alert p, .keypoints li { font-size:1.062rem; }
.keypoints ul { margin: 0; padding-left: 20px; }
.keypoints li { margin-bottom: .45em; }
.pullquote {
  margin: 26px 0; padding: 4px 0 4px 22px;
  border-left: 5px solid var(--amber);
  font-family: var(--serif); font-size: 1.28rem; line-height: 1.45;
  color: var(--ink);
}
.pullquote cite {
  display: block; margin-top: .5em;
  font-family: var(--sans); font-size: .96rem; font-style: normal;
  color: var(--ink-3);
}

/* ============================================================== lists */
.ticks { list-style: none; margin: 0 0 1em; padding: 0; }
.ticks li { position: relative; padding-left: 28px; margin-bottom: .55em; font-size: 1rem; }
.ticks li::before {
  content: "\2713"; position: absolute; left: 0; top: -1px;
  color: var(--amber-deep); font-weight: 700;
}
.sec ul:not(.ticks):not(.pack__perks):not(.menu) { padding-left: 22px; }
.sec ul:not(.ticks) li { margin-bottom: .45em; }

/* ============================================================== tables */
.tablewrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 12px; }
table { width: 100%; border-collapse: collapse; background: var(--white); font-size: 1rem; }
thead th {
  background: var(--panel); color: #3d2606;
  text-align: left; font-weight: 700; letter-spacing: .02em;
  padding: 13px 16px;
}
td { padding: 13px 16px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
td b { color: var(--ink); }
tbody tr:nth-child(even) td { background: #fffaf0; }
.tnote { font-size: .95rem; color: var(--ink-3); margin-top: 8px; }

/* ============================================================== split
   align-items:start, because short copy floated to the middle of a tall
   photograph is what "content scattered" looks like (house rule 12 D). */
.split {
  display: grid; grid-template-columns: 5fr 7fr; gap: 30px;
  align-items: start;
  margin: 24px 0;
}
.split--flip .split__img { order: 2; }
.split--tall { grid-template-columns: 4fr 8fr; }
.split--band { grid-template-columns: 1fr; }
.split__img img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.split__body p { font-size:1.062rem; }
@media (min-width: 761px) {
  .split__img img { max-height: 420px; width: auto; margin-inline: auto; }
  .split--band .split__img img { max-height: none; width: 100%; }
}

/* ============================================================== figures */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shots.s2 { grid-template-columns: repeat(2, 1fr); }
.shots figure {
  margin: 0; background: var(--tint); 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 { display: block; padding: 16px 18px 20px; }
.shots figcaption b { display: block; font-family: var(--serif); font-size: 1.1rem; margin-bottom: .3em; }
.shots figcaption span { display: block; font-size: .97rem; color: var(--ink-2); }
figure.portrait img { width: var(--figw, 320px); max-width: 100%; margin-inline: auto; }

/* Three across, so six marks make two clean rows and nine make three. A
   five-column wall left one roundel stranded on its own second row, which
   is the same defect fix_layout_breaks.py catches in a .shots grid. */
.badgewall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.badgewall figure {
  margin: 0; text-align: center;
  background: var(--white); border-radius: var(--radius);
  padding: 18px 12px 20px; 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 10px; }
.badgewall b { display: block; font-size: 1rem; font-family: var(--serif); }
.badgewall span { display: block; font-size: .9rem; color: var(--ink-2); margin-top: 4px; }

/* ============================================================== figures band */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stats > div { text-align: center; }
.stats b {
  display: block; font-family: var(--serif); font-size: 2.2rem;
  color: #f0c465; line-height: 1.1;
}
.stats span { display: block; font-size: .96rem; color: #e0d2ba; margin-top: 6px; }

/* ============================================================== ingredients */
.inglist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ingcard {
  background: var(--tint); border-radius: var(--radius);
  padding: 22px 22px 24px; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ingcard:hover { transform: translateY(-2px); box-shadow: var(--lift); }
.ingcard__top { margin-bottom: 12px; }
.ingcard__top h3 { margin-bottom: .2em; }
.ing__latin { display: block; font-size: .93rem; color: var(--ink-3); font-style: italic; }
.ing__dose {
  display: inline-block; margin-top: 8px;
  background: var(--panel); color: #503309;
  border-radius: 999px; padding: 5px 13px; font-size: .88rem; font-weight: 600;
}
.ingcard p { font-size: 1rem; color: var(--ink-2); }
.sec--tint .ingcard { background: var(--white); }

/* ============================================================== versus */
.versus {
  display: grid; grid-template-columns: 1.1fr 1.3fr 2fr;
  background: var(--white); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.versus > div { padding: 14px 16px; border-top: 1px solid var(--line); font-size: 1rem; color: var(--ink-2); }
.versus__h {
  background: var(--panel); color: #3d2606;
  font-weight: 700; border-top: 0;
}

/* ============================================================== packs */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.card--pack {
  background: var(--tint); border: 0; border-radius: var(--radius);
  padding: 0; overflow: hidden; position: relative;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card--pack:hover { transform: translateY(-2px); box-shadow: var(--lift); }
.card--pack.featured { outline: 3px solid var(--amber); }
.pack__flag {
  position: absolute; top: 14px; right: 0;
  background: var(--ink); color: #f6dfa8;
  font-size:0.8438rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 13px; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.pack__head { background: var(--panel); padding: 18px 20px; }
.pack__head b { display: block; font-family: var(--serif); font-size: 1.35rem; color: #3d2606; }
.pack__head span { display: block; font-size: .95rem; color: #6a4409; margin-top: 2px; }
.pack__body { padding: 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
/* The pack shot's slot is set by pack_cards.py below the marker, which gives
   all three tiers one 168px box with object-fit:contain. This rule centres it
   and puts a white plate behind it: two of the three vendor shots are cut-outs
   and the six-bottle file carries its own white ground, so without this the
   third tier reads as a photograph pasted onto the other two. Paint only, so
   it costs no layout. */
.pack__body img {
  margin: 0 auto 12px;
  background: var(--white);
  border-radius: var(--radius-sm);
}
.pack__per { font-family: var(--serif); font-size: 2.6rem; line-height: 1; margin: 0; color: var(--ink); }
.pack__per sup { font-size: 1.1rem; top: -1em; }
.pack__unit { display: block; font-size: .95rem; color: var(--ink-3); margin-bottom: 8px; }
.pack__tot { margin: 0 0 12px; font-size: 1.05rem; }
.pack__was { color: var(--ink-3); text-decoration: line-through; margin-left: 6px; }
.pack__perks { list-style: none; margin: 0 0 16px; padding: 0; }
.pack__perks li { position: relative; padding-left: 25px; font-size:1.062rem; margin-bottom: .4em; color: var(--ink-2); }
.pack__perks li::before { content: "\2713"; position: absolute; left: 0; color: var(--amber-deep); font-weight: 700; }
.card--pack .btn { margin-top: auto; }
.pack__marks { margin: 10px 0 0; font-size: .88rem; color: var(--ink-3); text-align: center; }
.buy__note { margin-top: 18px; font-size: .96rem; color: var(--ink-2); max-width: 90ch; }

/* ============================================================== meter */
.meter { display: grid; gap: 10px; max-width: 620px; margin-bottom: 24px; }
.meter__row { display: grid; grid-template-columns: 4.4em 1fr 48px; gap: 12px; align-items: center; font-size: 1rem; }
.meter__bar { display: block; height: 12px; border-radius: 999px; background: var(--panel); overflow: hidden; }
.meter__bar i { display: block; height: 100%; background: var(--amber-deep); }
.stars { color: var(--amber); letter-spacing: 2px; }
.stars i { font-style: normal; opacity: .4; }

/* ============================================================== faq */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--tint); border-radius: var(--radius);
  padding: 4px 20px; box-shadow: var(--shadow);
}
.faq summary {
  cursor: pointer; padding: 16px 0; list-style: none;
  font-family: var(--serif); font-size: 1.13rem; font-weight: 600;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--amber-deep); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq__body { padding: 0 0 18px; font-size: 1rem; color: var(--ink-2); }
.sec--tint .faq details { background: var(--white); }

/* ============================================================== ai block */
.qa { background: var(--tint); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); }
.qa > p { font-size:1.062rem; }

/* ============================================================== related */
.rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.rel a {
  display: block; background: var(--white); border-radius: var(--radius);
  padding: 20px 22px; 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: var(--serif); font-size: 1.12rem; color: var(--ink); margin-bottom: .25em; }
.rel span { display: block; font-size: .97rem; color: var(--ink-2); }

/* ============================================================== refs */
.refs ol { margin: 0; padding-left: 22px; }
.refs li { font-size:1.062rem; color: var(--ink-2); margin-bottom: .6em; }
.byline {
  display: grid; grid-template-columns: 74px 1fr; gap: 20px;
  background: var(--tint); border-radius: var(--radius);
  padding: 24px; margin-top: 24px; box-shadow: var(--shadow);
}
.byline__mark {
  display: grid; place-items: center;
  width: 74px; height: 74px; border-radius: 22px;
  background: var(--buy); color: var(--white);
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
}
.byline b { display: block; font-family: var(--serif); font-size: 1.16rem; margin-bottom: .35em; }
.byline p { font-size: 1rem; color: var(--ink-2); }

/* ============================================================== final CTA */
.final {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 30px 32px;
  box-shadow: var(--shadow);
}
.final--media { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: start; }
.final__img img { border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.final h2 { margin-bottom: .35em; color: #3d2606; }
.final p { color: #55390e; }
.final__price { font-weight: 700; color: #3d2606; }
.final .btn { margin-top: 6px; }
.final__sm { margin-top: 12px; font-size: .93rem; color: #6a4409; }

.fcta { background: var(--paper-2); padding: 46px 0; }
.fcta__box {
  display: grid; grid-template-columns: 1fr 250px; gap: 30px; align-items: start;
  background: var(--tint); border-radius: var(--radius);
  padding: 30px 32px; box-shadow: var(--shadow);
}
.fcta__eye {
  display: inline-block; font-size: .8438rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--amber-link);
  margin-bottom: 8px;
}
.fcta__h { font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; margin: 0 0 .5em; }
.fcta__sm { margin-top: 12px; font-size: .95rem; color: var(--ink-3); }
.fcta__img img { margin-inline: auto; }

/* ============================================================== footer
   Amber ground, the CONTACT FACTS leading, and the index folded into two
   ranks beneath them. Type floor: 16px running, 15px headings. */
footer { background: var(--panel); color: var(--ink); padding: 44px 0 0; font-size: 16px; }
footer a { color: #5b3a09; }
.fcard {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  background: var(--white); border-radius: var(--radius);
  padding: 24px 26px; box-shadow: var(--shadow);
  margin-bottom: 30px;
}
.fcard p { margin: 0; font-size:17px; line-height: 1.7; }
.fcard b { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
/* Two ranks: the seals and two destination columns, then three more beneath a
   hairline. The index is folded rather than strung across five columns. */
.fgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 26px; margin-bottom: 28px; }
.fgrid--two { grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(74,51,19,.22); padding-top: 26px; }
.fbrand { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; display: block; }
.fbrand span { color: var(--amber-dark); }
.frole { font-size: 16px; color: #5b4429; margin: 6px 0 14px; }
.fsealrow { display: flex; gap: 10px; margin-bottom: 10px; }
.fseals > span { display: block; font-size: 16px; color: #5b4429; margin-top: 8px; }
.fh {
  font-size: 15px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: #4a3313; margin: 0 0 10px;
}
.fgrid ul { list-style: none; margin: 0; padding: 0; }
.fgrid li { margin-bottom: 4px; }
.fgrid li a { display: block; padding: 7px 0; font-size:17px; text-decoration: none; }
.fgrid li a:hover { text-decoration: underline; }
.fpay { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding-bottom: 26px; }
.fpay span { font-size: 16px; color: #5b4429; }
.disc { background: var(--ink); color: #ddcfb8; padding: 26px 0 30px; }
.disc p, .disc li { font-size: 16px; line-height: 1.68; }
.disc b { color: var(--white); }
.disc a { color: #f6dfa8; }
.disc__list { margin: 14px 0 0; padding-left: 22px; }
.disc__list li { margin-bottom: .5em; }
.copy { margin-top: 18px; font-size: 16px; color: #b7a78c; }

/* ============================================================== buybar */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--ink); color: var(--white);
  transform: translateY(105%);
  transition: transform .3s ease;
  box-shadow: 0 -2px 6px rgba(42,33,24,.12), 0 -14px 34px rgba(42,33,24,.22);
}
.buybar.show { transform: translateY(0); }
html.chrome-up .buybar { transform: translateY(105%); }
.buybar__in {
  width: min(var(--wrap), 100% - 32px); margin-inline: auto;
  display: flex; gap: 18px; align-items: center; justify-content: space-between;
  padding: 12px 0;
}
.buybar__t b { display: block; font-size: 1.02rem; }
.buybar__t span { display: block; font-size: .92rem; color: #d8c9ae; }

/* ============================================================== forms */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 1rem; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px;
  padding: 12px 14px;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--amber-deep); }

/* ============================================================== blog */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.posts article {
  background: var(--tint); border-radius: var(--radius);
  padding: 22px 24px 26px; 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: .35em; }
.posts h3 a { text-decoration: none; color: var(--ink); }
.posts p { font-size:1.062rem; color: var(--ink-2); }
.postmeta { font-size: .95rem; color: var(--ink-3); }
.article { max-width: 74ch; }
.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); }
.article figcaption { font-size: .95rem; color: var(--ink-3); margin-top: 8px; }
.toc {
  background: var(--tint); border-radius: var(--radius);
  padding: 20px 24px; margin: 24px 0; box-shadow: var(--shadow);
}
.toc b { display: block; font-family: var(--serif); font-size: 1.1rem; margin-bottom: .4em; }
.toc ol { margin: 0; padding-left: 22px; }
.toc li { margin-bottom: .3em; font-size:1.062rem; }

/* ============================================================== reveal */
[data-reveal], .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
[data-reveal].in, .reveal.in { opacity: 1; transform: none; }

/* ============================================================== responsive */
@media (max-width: 1080px) {
  .fgrid, .fgrid--two { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 980px) {
  .g3, .g4, .steps, .inglist, .prices, .shots, .rel, .posts { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .final--media { grid-template-columns: 1fr; }
  .fcta__box { grid-template-columns: 1fr; }
  .fcta__img img { margin: 0; }
}
@media (max-width: 760px) {
  .sec { padding: 40px 0; }
  .g2, .g3, .g4, .steps, .inglist, .prices, .shots, .shots.s2, .rel, .posts { grid-template-columns: 1fr; }
  .split, .split--tall { grid-template-columns: 1fr; }
  .split--flip .split__img { order: 0; }
  .versus { grid-template-columns: 1fr; }
  .versus__h { display: none; }
  .versus > div:nth-child(3n+1) { font-weight: 700; color: var(--ink); background: var(--paper-2); }
  .fgrid, .fgrid--two { grid-template-columns: 1fr 1fr; }
  .fcard { grid-template-columns: 1fr; }
  .badgewall { grid-template-columns: repeat(2, 1fr); }
  .card--pack.featured { order: -1; }
  .byline { grid-template-columns: 1fr; }
  .buybar__in { flex-direction: column; gap: 10px; align-items: stretch; text-align: center; padding: 10px 0; }
  .buybar .btn { width: 100%; }
}
@media (max-width: 460px) {
  .badgewall, .stats { grid-template-columns: 1fr 1fr; }
  .fgrid, .fgrid--two { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .card:hover, .step:hover, .ingcard:hover, .card--pack:hover, .rel a:hover,
  .shots figure:hover, .badgewall figure:hover, .posts article:hover, .btn:hover { transform: none; }
  [data-reveal], .reveal { opacity: 1; transform: none; }
}

@media print {
  .nav, .util, .buybar, .fcta, .hero__cta { display: none; }
}


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

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

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

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

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

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

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

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

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */

/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots.s2>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 20px) / 2);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */
/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 35 box-shadow declaration(s)
   and 1 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (42,33,24), not neutral black.

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

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.faq,
.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 .fcard b{font-size:16px}
/* ==== end footer type floor ==== */