/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Spectral Fallback";src:local("Georgia");font-weight:400;size-adjust:100.38%;ascent-override:105.49%;descent-override:46.12%;line-gap-override:0.00%}
@font-face{font-family:"Spectral Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:89.35%;ascent-override:118.53%;descent-override:51.82%;line-gap-override:0.00%}
@font-face{font-family:"Cabin Fallback";src:local("Arial");font-weight:400;size-adjust:95.21%;ascent-override:101.35%;descent-override:26.26%;line-gap-override:0.00%}
@font-face{font-family:"Cabin Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:89.96%;ascent-override:107.27%;descent-override:27.79%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   Gelatidebalance - gelatidebalance.com
   Component system taken from the UI reference at ordergelatide.com: a light
   editorial ground, generously spaced section heads, 3-up card grids, a
   three-tier price ladder with the best value featured, and a dark closing
   band.
   Colour is NOT taken from that reference. It is derived from the product
   bottle in assets/: the violet wordmark and mark (#5b18b0 / #33096a), the
   lavender wash across the lower label, and the amber dropper glass, on a
   GREIGE ground.
   Type: Spectral (display serif) + Cabin (body sans).

   CHROME FOR THIS SITE, from the corrected design slot in
   _generators/batch4_assignments.py:
     * ground   - greige
     * header   - a fixed VERTICAL RAIL down the left edge carrying the
                  wordmark, with the horizontal menu to its right. No other
                  site on this estate has one. Below 1060px the rail is
                  dropped entirely and the wordmark returns to a conventional
                  bar, because a rail on a 390px screen would eat a fifth of
                  the width.
     * footer   - a three-tier sitemap: section heading, then grouped links
                  under a group label, then a legal strip last.
     * hero     - copy left, a free-standing dropper group on the right over a
                  drawn cast shadow, with no card behind it.
     * detail   - 7px radii, flat hairline cards, a scalloped wave rule above
                  every card heading that repeats the logo glyph.

   THE RAIL AND THE GUTTER. The page content is inset from the left by
   --rail and not from the right, so the gutter is set with `padding-inline`
   on .wrap and every .wrap companion uses `padding-block` only. A `padding`
   shorthand on any of them would zero the inline axis and the fault would be
   invisible above the container max-width (pitfalls 46 and 47).
   ========================================================================== */

/* ---- DESIGN TOKENS -------------------------------------------------------- */
:root{
  /* ---- ground: greige ---- */
  --paper:#eceae4;
  --paper-tint:#e3e0d8;
  --paper-card:#fbfaf8;
  --paper-deep:#d7d3c9;

  /* ---- ink ---- */
  --ink:#241f2b;
  --ink-dk:#1a161f;
  --ink-soft:#3c3644;
  --muted:#4d4756;
  --faint:#5d5667;
  --line:#d2cec4;
  --line-soft:#e2dfd7;

  /* ---- accent, from the violet wordmark on the bottle ---- */
  --accent:#5b18b0;
  --accent-deep:#33096a;
  --accent-tint:#f1e9fd;
  --accent-line:#cfb8ef;
  --accent-glow:rgba(91,24,176,.18);

  /* ---- secondary, from the amber dropper glass ---- */
  --gold:#9f6a2a;
  --gold-deep:#6d4718;
  --gold-soft:#f7edda;
  --gold-line:#e0c39a;

  /* ---- type ---- */
  --display:'Spectral','Spectral Fallback',Georgia,'Times New Roman',serif;
  --serif:'Spectral','Spectral Fallback',Georgia,'Times New Roman',serif;
  --sans:'Cabin','Cabin Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- metrics ---- */
  --rail:76px;
  --wrap:1120px;
  --measure:760px;
  --measure-wide:980px;
  --r:7px;
  --r-s:4px;
  --r-l:12px;
  --radius:7px;
  --shadow:0 10px 28px rgba(36,31,43,.10);
  --shadow-sm:0 2px 10px rgba(36,31,43,.05);
  --shadow-lg:0 22px 50px rgba(51,9,106,.18);
}

/* ---- RESET AND BASE ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:104px}
html,body{overflow-x:clip}
body{font-family:var(--sans);background:var(--paper);color:var(--muted);
  line-height:1.72;-webkit-font-smoothing:antialiased;font-size:1rem;
  padding-left:var(--rail)}
img,svg,table,video{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style:none}
h1,h2,h3,h4,h5{font-family:var(--display);color:var(--ink);line-height:1.22;
  font-weight:700;letter-spacing:-.008em}
b,strong{color:var(--ink-soft)}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:10px 16px;z-index:9999;border-radius:0 0 var(--r) 0}
.skip:focus{left:var(--rail)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}

/* ---- 1. THE LEFT RAIL ---------------------------------------------------- */
/* .brand is pulled out of the header row and becomes the rail itself. It is
   the only fixed element on the page apart from the buy bar, and the body's
   padding-left is what keeps every other element clear of it. */
.brand{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:960;
  background:var(--ink);color:#fff;display:flex;flex-direction:column;
  align-items:center;padding-block:18px;overflow:hidden;
  border-right:1px solid rgba(255,255,255,.10)}
.brand:hover{text-decoration:none}
.brand svg{width:36px;height:36px;flex:none}
.brand__t{writing-mode:vertical-rl;text-orientation:mixed;margin-top:22px;
  white-space:nowrap}
.brand__prod{font-family:var(--display);font-size:1.16rem;font-weight:700;
  color:#fff;letter-spacing:.04em}
.brand__prod span{color:#c8abf4}
.brand__firm{font-family:var(--sans);font-size:.62rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.52);
  margin-right:9px}
/* the accent foot of the rail, which is also the only place the wave glyph
   appears outside the mark itself */
.brand::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;
  background:radial-gradient(circle at 5px 9px,transparent 5.6px,
    var(--accent) 5.7px,var(--accent) 7.1px,transparent 7.2px) 0 0/14px 7px repeat-x}

/* ---- 2. UTILITY BAR: light strip, items split by hairline rules ---------- */
.util{background:var(--paper-tint);color:var(--faint);font-size:.91rem;
  border-bottom:1px solid var(--line)}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;
  padding-block:8px}
.util__item{white-space:nowrap;padding-inline:16px;
  border-left:1px solid var(--line)}
.util__item:first-child{padding-left:0;border-left:0}
.util__item b{color:var(--accent-deep);font-weight:700}
.util__tel{margin-left:auto;color:var(--accent-deep);font-weight:700;
  white-space:nowrap;padding-left:16px}

/* ---- 3. NAV: the horizontal menu that sits beside the rail --------------- */
/* No backdrop-filter here. It creates a containing block for fixed-position
   descendants, and .brand -- the left rail -- is one. With the filter on, the
   rail was contained by the nav row: 76x74px tucked under the menu instead of
   a full-height strip at the left edge. Measured, not guessed; it looked
   almost deliberate in a screenshot. The bar is 95% opaque anyway. */
.nav{position:sticky;top:0;z-index:900;background:rgba(236,234,228,.96);
  border-bottom:1px solid var(--line)}
.nav__row{display:flex;align-items:center;gap:20px;padding-block:14px;
  flex-wrap:nowrap}
.navmenus{display:contents}
.menu{display:flex;align-items:center;gap:22px;flex-wrap:nowrap;
  margin-right:auto}
.menu a{font-family:var(--sans);font-size:.9rem;font-weight:600;
  color:var(--ink-soft);white-space:nowrap;padding-block:4px}
.menu a:hover{color:var(--accent);text-decoration:none}
.menu a[aria-current]{color:var(--accent)}
.nav__cta{flex:none}
.nav__tel{flex:none;font-weight:700;font-size:.88rem;color:var(--accent-deep);
  white-space:nowrap}
.burger{display:none;background:none;border:0;cursor:pointer;width:40px;height:34px;
  padding:6px;flex:none}
.burger span{display:block;height:2px;background:var(--ink);margin:5px 0;
  border-radius:2px}

/* ---- 4. BUTTONS: 7px, flat, with a drawn edge --------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:700;font-size:.95rem;line-height:1.2;
  padding:13px 25px;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;text-align:center;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{text-decoration:none}
.btn--cta{background:var(--accent);color:#fff}
.btn--cta:hover{background:var(--accent-deep)}
.btn--ghost{background:transparent;color:var(--accent-deep);
  border-color:var(--accent-line)}
.btn--ghost:hover{border-color:var(--accent);background:var(--accent-tint)}
.btn--gold{background:var(--gold);color:#fff}
.btn--gold:hover{background:var(--gold-deep)}
.btn--lg{padding:16px 31px;font-size:1.02rem}
.btn--block{display:flex;width:100%}

/* ---- 5. HERO: copy left, free-standing dropper right over a cast shadow -- */
.hero{position:relative;background:var(--paper);
  border-bottom:1px solid var(--line);overflow-x:clip;overflow-y:visible}
.hero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;
  align-items:start;padding-block:50px 64px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--accent-tint);
  border:1px solid var(--accent-line);color:var(--accent-deep);font-weight:700;
  font-size:0.8438rem;padding:6px 15px;border-radius:var(--r);letter-spacing:.02em}
.hero h1{font-size:clamp(2.05rem,4.3vw,3.1rem);margin:18px 0 0;font-weight:700;
  line-height:1.12}
.hero h1 span{color:var(--accent)}
.hero h1 small{display:block;font-family:var(--sans);font-size:.94rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:12px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.hero__sub{margin:18px 0 0;font-size:1.02rem;max-width:58ch}

.ticks{margin:20px 0 0;display:grid;gap:9px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:1.062rem}
.ck{flex:none;width:21px;height:21px;border-radius:50%;background:var(--accent);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:700;margin-top:4px}

.pay{display:flex;align-items:center;gap:12px;margin:18px 0 0;
  font-size:0.9062rem;color:var(--faint)}
.pay img{width:220px;height:39px;object-fit:contain}

.factpills{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.factpills li{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:6px 14px;font-size:0.9062rem;color:var(--faint)}
.factpills li b{color:var(--ink-soft)}

.figures{display:grid;grid-template-columns:repeat(3,1fr);margin:24px 0 0;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper-card);overflow:hidden}
.figures div{padding:16px 18px}
.figures div+div{border-left:1px solid var(--line-soft)}
.figures b{display:block;font-family:var(--display);font-size:1.8rem;line-height:1;
  color:var(--accent-deep)}
.figures span{display:block;margin-top:5px;font-size:.91rem;color:var(--faint)}

.hero__media{position:relative}
.hero__stick{position:relative;display:block;text-align:center}
/* No card. The dropper group stands free on the greige ground over a drawn
   cast shadow, which is the arrangement this site's design slot specifies and
   the reason .hero__card carries no background here. */
.hero__card{background:none;padding:0;text-align:center}
.hero__card img{margin-inline:auto;max-width:100%;
  filter:drop-shadow(0 22px 26px rgba(51,9,106,.24))}
.hero__stick::after{content:"";position:absolute;left:50%;bottom:6px;width:58%;
  height:20px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(51,9,106,.26),transparent 74%)}
.hero__tag{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
  background:var(--accent-deep);color:#fff;font-size:0.9062rem;font-weight:700;
  letter-spacing:.08em;padding:6px 15px;border-radius:var(--r);white-space:nowrap;
  z-index:4}
.floaty{position:absolute;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:10px 14px;font-size:.95rem;font-weight:700;
  color:var(--ink);z-index:4;line-height:1.25}
.floaty small{display:block;color:var(--accent);font-size:0.9062rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:800;margin-top:4px}
.floaty--tl{top:6px;left:-10px}
.floaty--br{bottom:30px;right:-10px}

/* The hero copy column runs well past the media column, so a statically
   placed bottle ends up stranded beside the bottom of it. A sticky rail keeps
   the dropper next to whatever the reader is on. Offset by the header rather
   than by 0, and capped by height so it SCALES on a short laptop screen
   instead of being switched off by a min-height media query, which is the
   mistake that made this feature silently disappear on a previous build
   (pitfalls #4 and #15). */
@media(min-width:1061px){
  .hero__media{position:sticky;top:116px;align-self:start;
    height:calc(100vh - 130px);min-height:340px;
    display:flex;align-items:flex-start;justify-content:center}
  .hero__stick{max-height:calc(100vh - 166px)}
  .hero__stick img{max-height:calc(100vh - 326px);min-height:180px;
    width:auto;object-fit:contain}
}

.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.94rem;color:var(--faint);flex-wrap:wrap}
.hero__rating b{color:var(--ink-soft)}
.rev__stars{color:var(--gold-deep);letter-spacing:1px}

/* ---- 6. QUICK ANSWER (AEO) ---------------------------------------------- */
.answer{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 24px;margin:22px 0 0}
/* In the hero the answer is not a card: the reference layout runs it as two
   flowing paragraphs under the H1. The wrapper stays because it is the
   speakable selector and the AEO block, but the card styling comes off. */
.hero .answer{background:none;border:0;border-left:3px solid var(--accent-line);
  border-radius:0;padding:2px 0 2px 20px;margin:20px 0 0}
.hero .answer .qtag{display:none}
.hero .answer p{font-size:1.062rem;color:var(--muted);margin:0 0 .85em;max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--ink-dk)}
.answer .qtag{display:block;font-family:var(--sans);font-weight:800;font-size:0.8438rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin-bottom:.55em}
.answer p{margin:0;font-size:1.062rem}

/* ---- 7. TRUST ROW -------------------------------------------------------- */
.trust{background:var(--paper-card);border-bottom:1px solid var(--line)}
.trust__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:24px 38px;padding-block:20px}
.trust__row figure{text-align:center;max-width:132px}
.trust__row img{margin-inline:auto}
.trust__row figcaption{font-size:0.9062rem;color:var(--faint);margin-top:7px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:700}

/* ---- ABOVE-THE-FOLD RESPONSIVE -------------------------------------------
   The rail collapse and the hero's phone ordering decide what the first paint
   looks like, so they sit ABOVE the critical marker and are inlined into every
   page head. Leaving them below it meant a phone painted the hero in DOM order
   until the async stylesheet landed, which is a visible jump on the one screen
   that matters most. Everything else responsive is at the foot of this file. */
@media(max-width:1380px){.menu{gap:16px}.menu a{font-size:.87rem}}
@media(max-width:1230px){.nav__tel{display:none}}
@media(max-width:1060px){
  /* The rail is dropped entirely below this width. A 76px strip on a 390px
     screen would take a fifth of it, and the wordmark reads perfectly well in
     an ordinary bar. */
  :root{--rail:0px}
  body{padding-left:0}
  .skip:focus{left:0}
  .brand{position:static;width:auto;height:auto;background:none;color:inherit;
    flex-direction:row;align-items:center;padding-block:0;border-right:0;
    overflow:visible;flex:none}
  .brand::after{display:none}
  .brand svg{width:34px;height:34px;margin-right:11px}
  .brand__t{writing-mode:horizontal-tb;margin-top:0}
  .brand__prod{display:block;color:var(--ink);font-size:1.28rem;letter-spacing:.005em}
  .brand__prod span{color:var(--accent)}
  .brand__firm{display:block;color:var(--faint);margin-right:0;line-height:1.4;
    letter-spacing:.17em;font-size:.6rem}
  .nav__row{gap:14px}
  .navmenus{display:block;position:fixed;inset:0 0 0 auto;width:min(320px,86vw);
    background:var(--paper-card);padding:84px 26px 26px;transform:translateX(102%);
    transition:transform .28s ease;z-index:940;box-shadow:var(--shadow-lg);
    overflow-y:auto}
  .navmenus.open{transform:translateX(0)}
  .menu{flex-direction:column;align-items:flex-start;gap:2px;margin-right:0}
  .menu a{font-size:1rem;padding-block:11px;width:100%}
  .burger{display:block;order:3}
  .nav__cta{margin-left:auto}
  .buybar{left:0}
}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:22px;padding-block:32px 50px}
  /* display:contents promotes the copy column's children to grid items so the
     phone order can be set individually. DOM order is untouched: the Quick
     Answer still follows the H1 for parsers and for the speakable selector. */
  .hero__copy{display:contents}
  .hero__copy>.pill{order:1;justify-self:start}
  .hero__copy>h1{order:2}
  .hero__media{order:3}
  .hero__copy>.answer{order:4}
  .hero__copy>.hero__cta{order:6}
  .hero__copy>.hero__rating{order:6}
  .hero__copy>.pay{order:8}
  .hero__copy>.hero__sub{order:8}
  .hero__copy>.ticks{order:5}
  .hero__copy>.factpills{order:10}
  .hero__copy>.figures{order:11}
  .hero__card img{max-width:240px}
  .floaty{display:none}
  .util__item:nth-child(3),.util__item:nth-child(4){display:none}
}
@media(max-width:700px){
  .hero h1{font-size:2rem}
  .figures{grid-template-columns:1fr}
  .figures div+div{border-left:0;border-top:1px solid var(--line-soft)}
}
@media(max-width:430px){
  .nav__cta .btn{display:none}
  .util__item:nth-child(2){display:none}
}


/* ---- hero motif -- drop-cascade ---------------------------------------- */
.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(174deg,#d2c4db,#eceae4 50%,#eceae4)}.hero__media::before,.hero__media::after{content:'';position:absolute;left:52%;top:0;width:14px;height:22px;translate:-50% 0;border-radius:52% 52% 50% 50%/62% 62% 38% 38%;background:rgba(91,24,176,0.62);animation:gbDrop 6.4s cubic-bezier(.4,0,.7,1) infinite;z-index:1}.hero__media::after{left:64%;animation-delay:3.2s;scale:.72}@keyframes gbDrop{0%{transform:translateY(-14%);opacity:0}16%{opacity:.8}78%{opacity:.18}100%{transform:translateY(126%);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!important}}

/* --- 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. */
@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;}
}


/*!SITE-HOME-CRIT-START*/
/* ---- HOME GEOMETRY, design pass 20 Sep 2026 ----------------------------
   Two layout changes, both home-page only, both above the marker because
   this block is inlined into every page head at build time.

   1. THE BUY BUTTON ON THE FIRST SCREEN. Measured at 1440x900 the hero CTA
      sat at y=1054-1108: 154px below the fold, so the money page's first
      screen had nothing to click. The copy column becomes a flex column on
      DESKTOP ONLY and the reading order is set with `order`, which leaves
      the DOM -- and therefore the Quick Answer's position after the H1 for
      parsers -- untouched. The phone composition is a separate arrangement
      (.hero__copy{display:contents} under 920px) and is not touched: this
      block starts at 921px.
      .eyebrow and .meta carry an inline order:1, so they sort themselves
      between the pill (0) and the headline (2) without needing a rule.

   2. THE PRICE LADDER. The ribbon becomes a full-width bar sitting inside
      the card's top edge, so the cards need head room for it; the tier
      rows get a dashed separator. Both are applied to ALL THREE tiers
      equally, and the recommended tier is raised by pushing its two
      neighbours DOWN with margin-top -- never with transform, which the
      reveal pass resets to none. Every tier keeps a common bottom edge
      (the grid is align-items:stretch and .btn is margin-top:auto), so the
      three Add To Cart buttons keep their shared baseline. Measured.

   .hero and .hero__* exist in markup on index.html alone, so those
   selectors are home-only by construction; .pricing/.tier also live on
   pricing.html and carry body:has(.hero). */
@media(min-width:921px){
  .hero__copy{display:flex;flex-direction:column}
  .hero__copy>.pill{align-self:flex-start}
  .hero__copy>h1{order:2}
  .hero__copy>.answer{order:3}
  .hero__copy>.hero__cta{order:4}
  .hero__copy>.pay{order:5}
  .hero__copy>.hero__rating{order:6}
  .hero__copy>.ticks{order:7}
  .hero__copy>.hero__sub{order:8}
  .hero__copy>.factpills{order:9}
  .hero__copy>.figures{order:10}
  body:has(.hero) .pricing .tier:not(.tier--feature){margin-top:16px}
}
body:has(.hero) .pricing .tier{padding-top:50px}
body:has(.hero) .pricing .tier__rows>span+span{border-top:1px dashed var(--line);
  padding-top:5px}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* ---- 8. SECTIONS --------------------------------------------------------- */
.sec{padding-block:62px}
.sec--tight{padding-block:40px}
.sec--tint{background:var(--paper-tint)}
.sec--white{background:var(--paper-card)}
.sec--center .sec__head{text-align:center;margin-inline:auto}
.sec__head{max-width:var(--measure-wide);margin-bottom:32px}
.eyebrow{display:inline-block;font-family:var(--sans);font-size:0.8438rem;font-weight:800;
  letter-spacing:.19em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
/* The section rule repeats the wave in the logo mark rather than being a plain
   bar, so the brand idea recurs at every section head. */
.rule{display:block;width:42px;height:7px;border-radius:0;margin-bottom:13px;
  background:radial-gradient(circle at 5px 9px,transparent 5.6px,
    var(--accent) 5.7px,var(--accent) 7.1px,transparent 7.2px) 0 0/14px 7px repeat-x}
.sec--center .rule{margin-inline:auto}
.sec h2{font-size:clamp(1.6rem,3vw,2.24rem);margin-bottom:12px}
.sec h3{font-size:1.2rem;margin-bottom:8px}
.lead{font-size:1.07rem;color:var(--muted)}
.note{font-size:0.9062rem;color:var(--faint)}
.sec p+p,.sec p+ul,.sec p+ol,.sec ul+p,.sec ol+p{margin-top:1em}
.sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
.sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
.sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
.sec>.wrap>.pullquote,.sec>.wrap>blockquote{max-width:var(--measure);
  margin-inline:auto}
.sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{max-width:var(--measure-wide);
  margin-inline:auto}
.sec>.wrap>ul,.sec>.wrap>ol{padding-left:0}
.sec ol{counter-reset:n;display:grid;gap:11px}
.sec>.wrap>ol>li{position:relative;padding-left:34px;counter-increment:n}
.sec>.wrap>ol>li::before{content:counter(n);position:absolute;left:0;top:2px;
  width:24px;height:24px;border-radius:50%;background:var(--accent-tint);
  color:var(--accent-deep);font-size:1.062rem;font-weight:800;display:flex;
  align-items:center;justify-content:center;font-family:var(--sans)}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:3.3rem;
  line-height:.88;font-weight:700;color:var(--accent);padding:6px 12px 0 0}

.pullquote{border-left:3px solid var(--gold);padding:6px 0 6px 22px;margin:26px auto}
.pullquote p{font-family:var(--display);font-size:1.22rem;color:var(--ink);
  line-height:1.45}
.pullquote cite{display:block;margin-top:9px;font-style:normal;font-size:0.8438rem;
  color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-weight:700}

.crumbs{font-size:0.9062rem;color:var(--faint);padding-block:14px 0}
.crumbs a{color:var(--faint)}

/* ---- 9. CARDS, GRIDS: flat, hairline, wave rule above each heading ------- */
.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(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px;transition:border-color .22s ease}
.card:hover{border-color:var(--accent-line)}
.card h3{font-size:1.14rem}
.card h3::before,.whycard h3::before,.forlist h3::before{content:"";display:block;
  width:26px;height:6px;margin-bottom:9px;
  background:radial-gradient(circle at 4.4px 8px,transparent 4.8px,
    var(--accent) 4.9px,var(--accent) 6.2px,transparent 6.3px) 0 0/12px 6px repeat-x}
.card p{font-size:1.062rem;color:var(--faint)}
.card p+p{margin-top:.8em}

.steps{display:grid;gap:16px;counter-reset:s}
.step{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px 26px 24px 70px;position:relative;
  counter-increment:s}
.step__n{position:absolute;left:22px;top:24px;width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:700;font-size:1rem}
.step__n::before{content:counter(s)}
.step h3{font-size:1.1rem}
.step p{font-size:1.062rem;color:var(--faint)}

.chips{display:grid;gap:10px;margin:18px 0 0}
.chips li{display:flex;gap:11px;align-items:flex-start;font-size:0.9688rem}
.chips .ck{background:var(--gold);color:#fff;font-size:0.8125rem}

.callout{background:var(--accent-tint);border-left:4px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:18px 22px;margin:24px auto;
  font-size:.97rem}
.callout p+p{margin-top:.8em}
.alert{background:var(--gold-soft);border-left:4px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:18px 22px;margin:24px auto;
  font-size:.96rem}
.alert p+p{margin-top:.8em}
.flag{display:inline-block;background:var(--gold);color:#fff;font-size:.85rem;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;
  border-radius:var(--r-s)}

/* ---- 10. TABLES ---------------------------------------------------------- */
.tablewrap{overflow-x:auto;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);margin:22px auto}
table.dtable{width:100%;border-collapse:collapse;font-size:1rem;min-width:520px}
.dtable caption{text-align:left;padding:16px 20px 0;font-family:var(--display);
  font-weight:700;color:var(--ink);font-size:1.02rem}
.dtable th,.dtable td{padding:12px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
.dtable thead th{background:var(--accent-tint);color:var(--accent-deep);
  font-size:0.9062rem;letter-spacing:.09em;text-transform:uppercase;font-weight:800;
  font-family:var(--sans)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td b{color:var(--ink)}

/* ---- 11. SPLIT ----------------------------------------------------------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}
.split--rev{grid-template-columns:.95fr 1.05fr}
.split__media{text-align:center}
.split__media img{margin-inline:auto;border-radius:var(--r)}

/* ---- 12. SHOTS: images that carry content -------------------------------- */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:8px}
.shots--wide{grid-template-columns:repeat(3,1fr)}
.shots figure{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:18px 20px;font-size:0.9062rem;color:var(--faint)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.05rem;
  color:var(--ink);margin-bottom:6px}
/* The second-label-variant shot is the only portrait image that lands in a
   .shots grid, and at 504px it is the smallest master in this pack. .shots img
   sets width:100%, which stretched it to 524px in a two-up grid. Capping the
   width ATTRIBUTE alone would not have helped: author CSS beats the
   presentational hint, which is pitfall 30. Measured at 1280, 1440 and 1920. */
.shots img[src$="15-04-16.webp"]{max-width:504px;margin-inline:auto}

/* ---- 13. FACES ----------------------------------------------------------- */
.faces{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:10px}
.faces figure{text-align:center}
.faces img{width:100%;border-radius:50%}
.faces figcaption{font-size:0.9062rem;color:var(--faint);margin-top:8px;font-weight:600}

/* ---- 14. PROMO / STATS / BADGEWALL --------------------------------------- */
.promo{background:var(--accent-deep);color:rgba(255,255,255,.86);
  border-radius:var(--r);padding:30px 34px;display:grid;
  grid-template-columns:1fr auto;gap:24px;align-items:center}
.promo p{margin:0}
.promo b{color:#fff}
.stats{background:var(--accent-deep);border-radius:var(--r);padding:34px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stats b{display:block;font-family:var(--display);font-size:2.1rem;color:#fff;
  line-height:1}
.stats span{display:block;margin-top:7px;font-size:.91rem;color:rgba(255,255,255,.78)}
.badgewall{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.badgewall figure{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 14px;text-align:center}
.badgewall img{margin:0 auto 10px}
.badgewall figcaption{font-size:0.8438rem;color:var(--faint)}
.badgewall figcaption b{display:block;color:var(--ink);font-size:.91rem;
  margin-bottom:4px;font-family:var(--display)}

/* ---- 15. WHY / WHOFOR ---------------------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.whycard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px}
.whycard h3{font-size:1.1rem}
.whycard p{font-size:1.062rem;color:var(--faint)}
.whofor{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.forlist{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px}
.forlist h3{font-size:1.1rem;margin-bottom:12px}
.forlist li{display:flex;gap:10px;font-size:1.062rem;margin-bottom:9px}
.forlist li::before{content:"\2022";color:var(--accent);font-weight:700}

/* ---- 16. INGREDIENTS / FACTS PANEL --------------------------------------- */
.ing{display:grid;gap:22px}
.ingcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:28px;position:relative}
.ingcard h3{font-size:1.24rem;margin-bottom:4px}
.ingcard .ingsub{font-size:0.9062rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);font-weight:800;margin-bottom:12px;display:block}
.ingcard p{font-size:1.062rem}
.ingcard p+p{margin-top:.85em}
.ingthumbs{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}
.ingthumbs img{border-radius:var(--r-s)}
.facts{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;max-width:560px;margin-inline:auto}
.facts__h{background:var(--ink);color:#fff;padding:14px 22px;font-family:var(--display);
  font-size:1.16rem;font-weight:700}
.facttab{width:100%;border-collapse:collapse;font-size:1rem}
.facttab th,.facttab td{padding:11px 22px;border-bottom:1px solid var(--line-soft);
  text-align:left}
.facttab td:last-child{text-align:right;font-weight:700;color:var(--ink)}
.facttab tr:last-child th,.facttab tr:last-child td{border-bottom:0}

/* ---- 17. QA record sheet ------------------------------------------------- */
.qa{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;max-width:900px;margin-inline:auto}
.qa__h{background:var(--accent-tint);padding:16px 24px;font-family:var(--display);
  font-weight:700;font-size:1.06rem;color:var(--ink)}
.qa dl{margin:0;display:grid;grid-template-columns:32% 1fr}
.qa dt,.qa dd{padding:13px 24px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:800;color:var(--ink);font-size:1.062rem;letter-spacing:.09em;
  text-transform:uppercase;font-family:var(--sans)}
.qa dd{color:var(--muted);font-size:1.062rem}
.qa dl>:nth-last-child(-n+2){border-bottom:0}

/* ---- 18. PRICING --------------------------------------------------------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tier{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 24px;text-align:center;position:relative;display:flex;
  flex-direction:column}
.tier--feature{border-color:var(--accent);border-width:2px}
.tier__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:.85rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 14px;
  border-radius:var(--r-s);white-space:nowrap}
.tier h3{font-size:1.36rem;margin-bottom:2px}
.tier__supply{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin-bottom:14px}
.tier img{margin:0 auto 14px}
.tier__price{font-family:var(--display);font-size:1.6rem;font-weight:700;
  color:var(--accent-deep);line-height:1.2;margin-bottom:6px}
.tier__rows{font-size:.91rem;color:var(--faint);margin-bottom:18px;display:grid;gap:5px}
.tier .btn{margin-top:auto}
.guarantee{display:grid;grid-template-columns:.62fr 1.38fr;gap:32px;align-items:center;
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:30px}
.guarantee img{margin-inline:auto}
.guarantee h3{font-size:1.4rem;margin-bottom:12px}

/* ---- 19. REVIEWS --------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px}
.tcard .stars{color:var(--gold-deep);letter-spacing:1px;font-size:.92rem}
.tcard b{display:block;margin-top:8px;font-family:var(--display);font-size:1.04rem;
  color:var(--ink)}
.tcard span{font-size:.91rem;color:var(--faint)}
.tcard p{font-size:1.062rem;margin-top:10px}
.tlife{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tlife figure{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.tlife figcaption{padding:14px 16px;font-size:0.9062rem;color:var(--faint)}
.bars{display:grid;gap:9px;max-width:460px}
.bar{display:grid;grid-template-columns:52px 1fr 52px;gap:12px;align-items:center;
  font-size:.91rem;color:var(--faint)}
.bar__t{height:9px;background:var(--paper-deep);border-radius:5px;overflow:hidden}
.bar__f{display:block;height:100%;background:var(--accent);border-radius:5px}
.dist{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px}

/* ---- 20. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:11px;text-align:left}
.faq details{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.faq summary{padding:16px 22px;font-family:var(--display);font-weight:700;
  color:var(--ink);cursor:pointer;font-size:1.04rem;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.4rem;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq__b{padding:0 22px 18px;font-size:.95rem}
.faq__b p+p{margin-top:.8em}

/* ---- 21. REFS, BYLINE ---------------------------------------------------- */
.refs{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px 26px}
.refs h2{font-size:1.16rem;margin-bottom:12px}
.refs ol{counter-reset:r;display:grid;gap:9px}
.refs li{counter-increment:r;position:relative;padding-left:28px;font-size:1.062rem;
  color:var(--faint);line-height:1.6}
.refs li::before{content:counter(r) ".";position:absolute;left:0;font-weight:800;
  color:var(--accent)}
.refs a{word-break:break-word}
.byline{display:grid;grid-template-columns:auto 1fr;gap:20px;
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;margin:26px auto 0}
.byline img{border-radius:50%;flex:none}
.byline b{font-family:var(--display);font-size:1.06rem;color:var(--ink);display:block;
  margin-bottom:7px}
.byline p{font-size:0.9062rem;color:var(--faint)}

/* ---- 22. FORMS ----------------------------------------------------------- */
.form{display:grid;gap:22px;grid-template-columns:repeat(2,1fr)}
.formcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px}
.formcard h3{font-size:1.14rem;margin-bottom:6px}
.formcard label{display:block;font-size:.88rem;font-weight:700;color:var(--ink-soft);
  margin:14px 0 5px}
.formcard input,.formcard textarea,.formcard select{width:100%;padding:11px 14px;
  border:1px solid var(--line);border-radius:var(--r-s);font-family:var(--sans);
  font-size:1rem;color:var(--ink);background:var(--paper)}
.formcard textarea{min-height:120px;resize:vertical}
.formcard .btn{margin-top:18px}

/* ---- 23. FINAL CTA / RELATED --------------------------------------------- */
.final{background:var(--accent-deep);border-radius:var(--r);padding:38px 40px;
  color:rgba(255,255,255,.84)}
.final h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:12px}
.final p{color:rgba(255,255,255,.84)}
.final--media{display:grid;grid-template-columns:300px minmax(0,1fr);gap:34px;
  align-items:center}
/* max-width as well as width:100%. When .final--media collapses to one column
   at 920px the image cell becomes the full column and stretched this 600px
   master to 644px at a 768px viewport. */
.final--media .final__img img{width:100%;max-width:300px;height:auto;
  margin-inline:auto}
.final__price{font-family:var(--display);font-size:1.28rem;color:#fff;margin:14px 0 18px}
.final .btn--cta{background:var(--gold);color:#fff}
.final .btn--cta:hover{background:#8e5d22}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.rel a{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:22px;display:block;transition:border-color .2s ease}
.rel a:hover{border-color:var(--accent-line);text-decoration:none}
.rel b{display:block;font-family:var(--display);font-size:1.06rem;color:var(--ink);
  margin-bottom:6px}
.rel span{font-size:.91rem;color:var(--faint)}

/* ---- 24. LEGAL ----------------------------------------------------------- */
.legal h2{margin-top:1.5em}
.legal h3{margin-top:1.2em}
.meta{font-size:0.9062rem;color:var(--faint)}

/* ---- 25. FOOTER: a three-tier sitemap, then a legal strip ---------------- */
/* Tier one is the section heading, tier two the group label, tier three the
   links themselves. The legal strip is last and visually separate, so the
   footer reads as a map of the site rather than as four equal columns. */
footer{background:var(--paper-deep);color:var(--muted);padding-block:44px 0;
  font-size:.91rem;border-top:1px solid var(--line)}
footer a{color:var(--ink-soft)}
footer a:hover{color:var(--accent)}
.fcontact{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 26px;margin-bottom:36px}
.fcontact img{flex:none}
.fcontact__t b{display:block;font-family:var(--display);font-size:1.12rem;
  color:var(--ink);margin-bottom:5px}
.fcontact__t p{font-size:1.062rem;color:var(--faint)}

.fmap{display:grid;gap:30px}
.fmap__sec{border-top:1px solid var(--line);padding-top:22px}
.fmap__sec>h4{font-family:var(--display);font-size:1.22rem;color:var(--ink);
  margin-bottom:16px;letter-spacing:-.01em}
.fmap__groups{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.fmap__g>b{display:block;font-family:var(--sans);font-size:.85rem;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent);
  margin-bottom:9px}
.fmap__g li{margin-bottom:5px;font-size:1.062rem;line-height:1.5}
.fbrand{font-family:var(--display);font-size:1.5rem;color:var(--ink);margin-bottom:10px}
.fbrand span{color:var(--accent)}
.fbadges{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.fnap{padding-block:24px;margin-top:8px;border-top:1px solid var(--line);
  font-size:.91rem;line-height:1.75}
.fnap strong{color:var(--ink)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:18px;
  font-size:.91rem;color:var(--faint);border-top:1px solid var(--line)}
/* Tier three: the legal strip, on its own darker band. It sits OUTSIDE the
   footer's .wrap and carries its own, so it spans the full content width
   without a negative-margin full-bleed trick. With a fixed rail on the left
   that trick is the classic way to push a horizontal scrollbar onto the page,
   and there is no reason to risk it here. */
.flegal{background:var(--ink);color:rgba(255,255,255,.62);margin-top:26px;
  padding-block:26px}
.flegal a{color:rgba(255,255,255,.82)}
.flegal a:hover{color:#fff}
.flegal__links{display:flex;flex-wrap:wrap;gap:8px 18px;padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.12);font-size:.91rem}
.disc{padding-top:18px;font-size:.91rem;line-height:1.68;
  color:rgba(255,255,255,.6)}
.disc p{margin-bottom:.9em}
.disc b{color:rgba(255,255,255,.88)}
.disc .copy{margin-top:16px;color:rgba(255,255,255,.52)}

/* ---- 26. BUY BAR --------------------------------------------------------- */
.buybar{position:fixed;left:var(--rail);right:0;bottom:0;z-index:950;
  background:var(--accent-deep);color:#fff;transform:translateY(110%);
  transition:transform .3s ease}
.buybar.show{transform:translateY(0)}
.buybar__in{max-width:var(--wrap);margin-inline:auto;padding:11px 22px;display:flex;
  align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;
  font-size:.91rem}
.buybar__t b{color:#fff}
.buybar .from{color:#e8cfa4}
.buybar .btn{padding:10px 22px}
.buybar .btn--cta{background:var(--gold);color:#fff}

/* ---- 27. BLOG ------------------------------------------------------------ */
.article{max-width:768px}
.article h1{font-size:clamp(1.9rem,3.8vw,2.66rem);margin-bottom:14px}
.article h2{font-size:1.5rem;margin:1.9em 0 .6em;scroll-margin-top:110px}
.article h3{font-size:1.16rem;margin:1.5em 0 .5em}
.article p{margin-bottom:1em}
.article ul,.article ol{margin:0 0 1.2em}
.article ul li{position:relative;padding-left:22px;margin-bottom:8px}
.article ul li::before{content:"\2022";position:absolute;left:4px;color:var(--accent);
  font-weight:700}
.article ol{counter-reset:ai}
.article ol li{position:relative;padding-left:30px;margin-bottom:8px;counter-increment:ai}
.article ol li::before{content:counter(ai) ".";position:absolute;left:0;
  color:var(--accent);font-weight:800}
.article figure{margin:1.6em 0}
.article figure img{width:100%;border-radius:var(--r)}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}
.article figcaption{font-size:0.9062rem;color:var(--faint);margin-top:9px;
  border-left:2px solid var(--gold);padding-inline-start:12px}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:.91rem;color:var(--faint);
  padding-block:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:26px}
.postmeta b{color:var(--ink-soft)}
.postmeta .sep{color:var(--line)}
.toc{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 24px;margin-bottom:26px}
.toc h2{font-size:.85rem;letter-spacing:.17em;text-transform:uppercase;
  font-family:var(--sans);color:var(--accent);margin:0 0 10px}
.toc ol{counter-reset:t;display:grid;gap:6px}
.toc li{counter-increment:t;position:relative;padding-left:26px;font-size:1.062rem}
.toc li::before{content:counter(t) ".";position:absolute;left:0;color:var(--faint);
  font-weight:700}
.keypoints{background:var(--accent-tint);border-left:4px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin-bottom:24px}
.keypoints>b{display:block;font-family:var(--sans);font-size:.85rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.keypoints li b{color:var(--accent-deep)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.posts article{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color .2s ease}
.posts article:hover{border-color:var(--accent-line)}
.posts img{width:100%}
.posts .pbody{padding:20px 22px}
.posts h3{font-size:1.1rem;margin-bottom:8px}
.posts p{font-size:1.062rem;color:var(--faint)}
.posts .pmeta{font-size:.91rem;color:var(--faint);margin-top:12px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:700}
/* A shared component in a narrower column is a new component (pitfall 24).
   The prose column is ~768px where the page wrap is 1120px, so the closing
   CTA needs its own geometry here, and a third set again on a phone. */
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;
  padding:30px 28px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.6rem;line-height:1.22;margin-top:0}
@media(max-width:760px){
  .article .final--media{grid-template-columns:1fr;gap:16px;padding:24px 22px;
    text-align:center}
  .article .final--media .final__img img{max-width:128px;margin-inline:auto}
  .article .final--media h2{font-size:1.32rem}
  .article .final--media .btn{width:100%}
}
.final p,.article .final p{color:rgba(255,255,255,.84)}
.final__price,.article .final .final__price{color:#fff}
.article .refs{margin-top:2em}
.article .refs h2{margin-top:0}

/* ---- 28. MOTION: the section rule draws in, content fades up ------------- */
[data-reveal]{opacity:0;transform:translateY(14px)}
[data-reveal].in{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s ease}
.sec__head .rule{width:0;transition:width .6s cubic-bezier(.22,.61,.36,1)}
.sec__head.in .rule,.sec__head:not([data-reveal]) .rule{width:42px}
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].in{opacity:1;transform:none;transition:none}
  .sec__head .rule{width:42px;transition:none}
  html{scroll-behavior:auto}
}

/* ---- 29. RESPONSIVE ------------------------------------------------------ */
@media(max-width:1130px){
  .fmap__groups{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1060px){
  .sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
  .sec>.wrap>.pullquote,.sec>.wrap>blockquote,
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{max-width:none}
  .badgewall{grid-template-columns:repeat(3,1fr)}
  .faces{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:920px){
  .split,.split--rev,.guarantee,.dist,.form{grid-template-columns:1fr;gap:26px}
  .promo{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .g3,.g4,.whygrid,.tgrid,.tlife,.rel,.posts{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  .pricing .tier:nth-child(1){order:3}
  .pricing .tier:nth-child(2){order:1}
  .pricing .tier:nth-child(3){order:2}
  .final--media{grid-template-columns:1fr;gap:22px}
  .fcontact{grid-template-columns:1fr;text-align:left}
}
@media(max-width:700px){
  .sec{padding-block:46px}
  .g2,.g3,.g4,.whygrid,.whofor,.tgrid,.tlife,.rel,.posts,.shots,.shots--wide,
  .badgewall{grid-template-columns:1fr}
  .faces{grid-template-columns:repeat(3,1fr)}
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
  .stats{grid-template-columns:1fr}
  .final{padding:28px 24px}
  .fmap__groups{grid-template-columns:1fr}
}
/* Tap target: a button on a phone must be reachable with a thumb. Four sites
   sat at 39-42px, which is under the 44px minimum. Applied at the mobile
   breakpoint only so desktop proportions are untouched. */
/* Tap targets, measured: the burger rendered 34px tall and .btn 40px on a
   tablet, because the house rule only fired under 600px. A 768px screen is
   a touch screen, so the floor now applies for the whole span in which the
   burger exists. */
@media(max-width:1060px){.btn{min-height:44px}
  .burger{width:44px;height:44px;padding:9px 6px}}


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

/* A <small> inside a table cell that no rule reaches inherits the browser
   default of ~0.83em = 13.3px, under the 14.5px caption floor, and
   type_floor.py cannot see it because there is no rule to raise.
   See pitfalls.md #97. */
td small,.dtable small{font-size:0.9062rem}

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav{transition:none}}
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(110%)}
/* ==== 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 ==== */
/*!SITE-HOME-PAINT-START*/
/* ==== HOME SURFACE, design pass 20 Sep 2026 =============================
   Paint only -- radius, shadow, colour, gradient, transform, transition --
   so it sits below the critical marker and needs a restamp, not a rebuild.

   The slot for this site: 24px on cards and panels, 16px on controls, a
   SINGLE soft lift (0 12px 30px, no contact stop) tinted with this site's
   own ink rgb(36,31,43), a full-width ribbon on the price ladder, and a
   "circulate" hero motif -- two counter-rotating arcs, the inner one
   tighter. It replaces the 7px corners and the flat hairline that were the
   dated signature here.

   SPECIFICITY, NOT SOURCE ORDER. modern_surface.py and footer_type.py
   re-append their own blocks on every build and land after this one, so
   every rule here is written to outrank a bare `.card` / `.tier` rule.
   Home-only for the same reason the crit block is: body:has(.hero) for the
   components that also appear on inner pages, plain .hero__* for the ones
   that do not.
   ======================================================================== */
:root{
  --gb-card:24px;
  --gb-ctl:16px;
  --gb-soft:0 12px 30px rgba(36,31,43,.12);
  --gb-hi:0 18px 40px rgba(36,31,43,.18);
  --gb-cta:0 12px 30px rgba(91,24,176,.30);
  --gb-cta-hi:0 16px 38px rgba(91,24,176,.38);
}

/* ---- panels: one soft lift, 24px ---------------------------------------- */
body:has(.hero) .card,
body:has(.hero) .whycard,
body:has(.hero) .tcard,
body:has(.hero) .step,
body:has(.hero) .forlist,
body:has(.hero) .byline,
body:has(.hero) .refs,
body:has(.hero) .tablewrap,
body:has(.hero) .qa,
body:has(.hero) .facts,
body:has(.hero) .dist,
body:has(.hero) .guarantee,
body:has(.hero) .fcontact,
body:has(.hero) .shots figure,
body:has(.hero) .faq details,
body:has(.hero) .figures,
body:has(.hero) .final,
body:has(.hero) .promo,
body:has(.hero) .stats,
body:has(.hero) .rel a,
body:has(.hero) .tier{border-radius:var(--gb-card);box-shadow:var(--gb-soft)}

/* Swept the rendered page for anything left on the old 7px corner: the
   three related-link cards above, the three split images here, and the
   rating bars, which are better read as capsules. */
body:has(.hero) .split__media img{border-radius:var(--gb-card)}
body:has(.hero) .bar__t,
body:has(.hero) .bar__f{border-radius:999px}

/* The three left-barred panels keep their square left edge. */
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .keypoints{border-radius:0 var(--gb-card) var(--gb-card) 0;
  box-shadow:var(--gb-soft)}

/* ---- controls: 16px, and the pair reads as two weights ------------------ */
/* The buying CTA is the only gradient on the page; the secondary button
   stays solid/outlined so the two never compete. The gold pair inside the
   dark closing band and on the buy bar keeps its gold -- a violet gradient
   on a violet ground is an invisible button. */
body:has(.hero) .btn{border-radius:var(--gb-ctl);
  transition:background .2s ease,color .2s ease,border-color .2s ease,
    box-shadow .24s ease,transform .24s ease}
body:has(.hero) .btn--cta{background:var(--accent);
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  box-shadow:var(--gb-cta)}
body:has(.hero) .btn--cta:hover{
  background:linear-gradient(135deg,var(--accent-deep),var(--accent));
  box-shadow:var(--gb-cta-hi);transform:translateY(-2px)}
body:has(.hero) .final .btn--cta,
body:has(.hero) .buybar .btn--cta{background:var(--gold);
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  box-shadow:0 12px 30px rgba(36,31,43,.30)}
body:has(.hero) .final .btn--cta:hover,
body:has(.hero) .buybar .btn--cta:hover{
  background:linear-gradient(135deg,var(--gold-deep),var(--gold))}
body:has(.hero) .btn--ghost{background:transparent;box-shadow:none}
body:has(.hero) .btn--ghost:hover{background:var(--accent-tint);
  box-shadow:var(--gb-soft);transform:translateY(-2px)}
body:has(.hero) .btn--gold:hover{box-shadow:var(--gb-soft);
  transform:translateY(-2px)}

/* A keyboard reader gets the same affordance a pointer does. */
body:has(.hero) .btn:focus-visible,
body:has(.hero) a:focus-visible,
body:has(.hero) summary:focus-visible,
body:has(.hero) .burger:focus-visible{outline:2px solid var(--accent);
  outline-offset:3px}

/* ---- a surface answers the pointer -------------------------------------- */
body:has(.hero) .card,
body:has(.hero) .whycard,
body:has(.hero) .tcard,
body:has(.hero) .shots figure,
body:has(.hero) .rel a,
body:has(.hero) .tier{transition:box-shadow .24s ease,transform .24s ease,
  border-color .24s ease}
body:has(.hero) .card:hover,
body:has(.hero) .whycard:hover,
body:has(.hero) .tcard:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .rel a:hover,
body:has(.hero) .tier:hover{box-shadow:var(--gb-hi);transform:translateY(-2px);
  border-color:var(--accent-line)}

/* ---- the price ladder: full-width ribbon, raised recommendation --------- */
/* The bar is laid against the card's padding box, so its radius is the
   card's 24px less the 1px border. The head room it needs is set above the
   marker, on all three cards equally, so the button baseline is unmoved. */
body:has(.hero) .tier__flag{left:0;right:0;top:0;width:auto;transform:none;
  border-radius:23px 23px 0 0;background:var(--paper-deep);color:var(--ink);
  box-shadow:none}
body:has(.hero) .tier--feature{border-color:var(--accent);
  background:linear-gradient(180deg,var(--accent-tint),var(--paper-card) 58%);
  box-shadow:var(--gb-hi)}
body:has(.hero) .tier--feature .tier__flag{
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  color:#fff;border-radius:22px 22px 0 0}

/* ---- the hero's own furniture ------------------------------------------- */
.hero .pill{border-radius:999px;box-shadow:0 2px 10px rgba(91,24,176,.10)}
.hero .factpills li{border-radius:999px}
.hero .floaty{border-radius:18px;border-color:var(--line-soft);
  box-shadow:var(--gb-soft)}
.hero .hero__tag{border-radius:999px;box-shadow:var(--gb-cta)}
.hero .ck{box-shadow:0 2px 6px rgba(91,24,176,.26)}
/* The Quick Answer's rule becomes a gradient without moving the text:
   border-image paints the existing 3px edge, it does not add one. */
.hero .answer{border-image:linear-gradient(180deg,var(--accent),
  var(--gold-line)) 1}
body:has(.hero) .buybar{box-shadow:0 -10px 30px rgba(36,31,43,.20)}

/* ---- HERO MOTIF: "circulate" -------------------------------------------- */
/* Two counter-rotating arcs on the media column's pseudo-elements, never on
   the <img>: that image is the LCP element and is preloaded.

   Both rings are sized LARGER than the 454px product card (560px and 472px
   at 1440) so they read outside it rather than disappearing behind it, and
   both are pushed right of centre (left:58%) so the wide one bleeds into
   the page gutter instead of crossing the headline -- the hero has
   overflow-x:clip, so nothing can reach the scrollbar.

   These pseudo-elements previously carried a falling-drop motif; every one
   of its properties is restated here, `scale` included, or its leftovers
   would deform the ring. Slow on purpose: 58s and 41s. This is a supplement
   taken daily for weeks, not an energy drink.

   Off below 981px, where the media column is no longer the full-height
   sticky box these sizes are measured against. */
.hero .hero__media::before,
.hero .hero__media::after{content:"";position:absolute;left:58%;top:50%;
  translate:-50% -50%;scale:1;
  width:min(128%,560px);height:auto;aspect-ratio:1;
  border-radius:50%;background:none;
  border:1.5px solid transparent;
  border-top-color:rgba(91,24,176,.34);
  border-left-color:rgba(91,24,176,.11);
  z-index:0;pointer-events:none;
  animation:gbCirculate 58s linear infinite}
.hero .hero__media::after{width:min(104%,472px);
  border-top-color:transparent;border-left-color:transparent;
  border-bottom-color:rgba(159,106,42,.38);
  border-right-color:rgba(159,106,42,.13);
  animation:gbCounter 41s linear infinite}
@keyframes gbCirculate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes gbCounter{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@media(max-width:980px){
  .hero .hero__media::before,.hero .hero__media::after{display:none}
}

/* ---- motion off, for anyone who asked for it ---------------------------- */
@media(prefers-reduced-motion:reduce){
  .hero .hero__media::before,.hero .hero__media::after{animation:none;
    display:none}
  body:has(.hero) .btn--cta:hover,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .btn--gold:hover,
  body:has(.hero) .card:hover,
  body:has(.hero) .whycard:hover,
  body:has(.hero) .tcard:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .rel a:hover,
  body:has(.hero) .tier:hover{transform:none}
  body:has(.hero) .btn,
  body:has(.hero) .card,
  body:has(.hero) .whycard,
  body:has(.hero) .tcard,
  body:has(.hero) .shots figure,
  body:has(.hero) .rel a,
  body:has(.hero) .tier{transition:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== 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{font-size:16px}
footer .btn{font-size:16px}
footer .disc{font-size:16px}
footer .flegal__links{font-size:16px}
footer .fmap__g>b{font-size:16px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 17 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 (36,31,43), not neutral black.

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

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.answer,
.whycard,
.tier,
.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. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.answer,
.whycard,
.tier,
.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,
.tier{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier: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,
.tier:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}