/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Petrona Fallback";src:local("Georgia");font-weight:400;size-adjust:98.06%;ascent-override:87.50%;descent-override:27.53%;line-gap-override:0.00%}
@font-face{font-family:"Petrona Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:89.12%;ascent-override:96.28%;descent-override:30.30%;line-gap-override:0.00%}
@font-face{font-family:"Asap Fallback";src:local("Arial");font-weight:400;size-adjust:100.37%;ascent-override:93.06%;descent-override:21.12%;line-gap-override:0.00%}
@font-face{font-family:"Asap Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:92.68%;ascent-override:100.78%;descent-override:22.87%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
:root{
  --dark:#0f1218;
  --dark-2:#161b24;
  --paper:#0f1218;
  --paper-tint:#141922;
  --paper-card:#1a1f2a;
  --paper-deep:#090b10;
  --on-dark:#f7f2e9;

  --ink:#f7f2e9;
  --ink-soft:#e0d9ca;
  --muted:#b0a898;
  --faint:#938b7c;
  --line:#272e3a;
  --line-soft:#1c222c;
  --panel:#1a1f2a;
  --panel-2:#212734;

  --accent:#f2a338;
  --accent-deep:#c2760f;
  --accent-on:#ffbc5e;
  --accent-tint:#2b1f0d;
  --accent-edge:#57411c;
  --accent-glow:rgba(242,163,56,.30);

  --ember:#e0683a;
  --ember-on:#f79063;
  --ember-soft:#2a1710;
  --ember-line:#4f2a17;

  --parch:#f6efe1;
  --parch-2:#ebe1cd;

  --display:'Petrona','Petrona Fallback',Georgia,'Times New Roman',serif;
  --serif:'Petrona','Petrona Fallback',Georgia,'Times New Roman',serif;
  --sans:'Asap','Asap Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1160px;
  --banner:1420px;
  --measure:760px;
  --measure-wide:980px;
  --r:12px;
  --r-s:5px;
  --r-l:22px;
  --radius:12px;
  --figw:430px;
  --navh:72px;
  --shadow:0 20px 46px rgba(0,0,0,.52);
  --shadow-sm:0 5px 18px rgba(0,0,0,.38);
  --shadow-lg:0 32px 74px rgba(0,0,0,.62);
}

/* ==========================================================================
   Evoslimdaily - evoslimdaily.com            design slot: batch 10, Evo Slim

   DEEP INK, WARM AMBER, DARK-FIRST. The page ground is a near-black blue-ink
   and every reading surface is a lifted ink panel; the one light surface on
   the site is the parchment the Quick Answer and the printed label panel sit
   on, because both are reproductions of paper.

   Type is a serif display over a humanist sans: Petrona sets every heading,
   Asap sets everything that is read in quantity.

   THE HEADER is a single dark bar whose ordering button is a full-height
   amber block welded to the right edge of the bar. It has no radius, no
   inset and no gap: the bar runs edge to edge and the block terminates it.
   That is why the header row abandons the content wrap and takes its own
   asymmetric inset - a centred 1160px bar cannot have a block on its edge.

   THE FOOTER is a near-black slab whose compliance seals are INSET ALONG ITS
   TOP EDGE, each one in a round chip lifted above the slab's own boundary so
   the row straddles it. The seals are the first thing in the footer for the
   same reason they are the last thing on a bottle.

   ONE RULE HOLDS THE WHOLE SHEET TOGETHER: no component rule carries a
   literal colour. Everything reads a token, so the three surfaces that change
   ground - the parchment card, the amber block, the near-black slab -
   re-point tokens on themselves and every component inside them follows
   without a single override.
   ========================================================================== */

/* ---- RESET AND BASE ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:110px}
html,body{overflow-x:clip}
body{font-family:var(--sans);background:var(--paper);color:var(--muted);
  line-height:1.74;-webkit-font-smoothing:antialiased;font-size:1.0625rem}
img,svg,table,video{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent-on);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.16;
  font-weight:700;letter-spacing:-.012em}
b,strong{color:var(--ink-soft)}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#161006;
  padding:10px 18px;z-index:9999;font-weight:700}
.skip:focus{left:0}

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

/* ---- 1. TOPLINE STRIP ----------------------------------------------------
   Role, lot, dose, guarantee, order phone. Five facts above the navigation so
   the menu does not have to carry any of them. */
.util{background:var(--paper-deep);color:var(--ink-soft);font-size:.9375rem;
  border-bottom:1px solid var(--line-soft)}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;
  padding-block:8px}
.util__item{white-space:nowrap;padding-inline:15px;border-left:1px solid var(--line)}
.util__item:first-child{padding-left:0;border-left:0}
.util__item b{color:var(--accent-on);font-weight:700}
.util__tel{margin-left:auto;color:var(--ink);font-weight:700;white-space:nowrap;
  padding-left:15px}
@media(max-width:980px){.util__item:nth-child(3),.util__item:nth-child(4){display:none}}
@media(max-width:440px){.util__item:nth-child(2){display:none}}

/* ---- 2. NAV: a dark bar terminated by an amber block ----------------------
   The row runs the full width of the viewport rather than sitting inside the
   content wrap, because the ordering block has to reach the bar's right edge.
   The inset on the left is a clamp rather than a fixed gutter so the wordmark
   keeps its distance from the screen edge at every width.

   Nothing in the row may wrap: it sheds instead. Destinations tighten at
   1240, the track collapses to a dropdown at 1080, the amber block loses its
   wording at 520 and the block itself at 400 - by which point the buy bar at
   the foot of the screen has taken over. */
.nav{position:sticky;top:0;z-index:900;background:var(--dark-2);
  border-bottom:1px solid var(--line)}
.nav .wrap{max-width:none;padding-left:clamp(18px,3.4vw,46px);padding-right:0}
.nav__row{display:flex;align-items:stretch;justify-content:space-between;gap:26px;
  flex-wrap:nowrap;position:relative}
.brand{display:inline-flex;align-items:center;gap:0;flex:none;color:var(--ink);
  padding-block:11px}
.brand:hover{text-decoration:none}
.brand svg{width:34px;height:34px;margin-right:12px;flex:none}
.brand__t{display:flex;flex-direction:column;line-height:1.06}
.brand__prod{font-family:var(--display);font-size:1.42rem;font-weight:700;
  color:var(--ink);letter-spacing:-.018em;white-space:nowrap}
.brand__prod span{color:var(--accent-on)}
.brand__firm{font-family:var(--sans);font-size:.7188rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--faint);margin-top:3px;
  white-space:nowrap}
.navmenus{display:flex;align-items:stretch;flex-wrap:nowrap;margin-left:auto}
.nav__track{display:flex;align-items:stretch;flex-wrap:nowrap}
.menu{display:flex;align-items:stretch;flex-wrap:nowrap}
.menu li{flex:none;display:flex}
.menu a{display:flex;align-items:center;font-family:var(--sans);font-size:.9375rem;
  font-weight:600;color:var(--ink-soft);white-space:nowrap;padding-inline:14px;
  border-bottom:3px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--accent-on);
  border-bottom-color:var(--accent);text-decoration:none}
.nav__cta{flex:none;display:flex;align-items:stretch}
.nav__cta .btn{border-radius:0;padding-inline:clamp(18px,2.4vw,34px);
  border:0;letter-spacing:.07em}
.burger{display:none;background:var(--panel);border:1px solid var(--line);cursor:pointer;
  width:44px;height:44px;padding:10px;flex:none;align-self:center;margin-right:14px}
.burger span{display:block;height:2px;background:var(--ink);margin:4px 0}

/* ---- 3. BUTTONS ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.2;
  padding:14px 26px;border-radius:var(--r-s);border:2px solid transparent;
  cursor:pointer;text-align:center;letter-spacing:.05em;text-transform:uppercase;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{text-decoration:none}
.btn--cta{background:var(--accent);color:#1a1205}
.btn--cta:hover{background:var(--accent-on);color:#1a1205}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-on)}
.btn--ember{background:var(--ember-soft);color:var(--ember-on);border-color:var(--ember-line)}
.btn--ember:hover{border-color:var(--ember)}
.btn--lg{padding:17px 32px;font-size:1.05rem}
.btn--block{display:flex;width:100%}

/* ---- 4. HERO: copy left, bottle right, a wedge of light behind it ---------
   Two columns. The copy keeps the larger share because the headline, not the
   photograph, is what the first screen is for. The bottle column is sticky
   and vertically centred, so it travels with the reader while the copy
   scrolls past it.

   The motif block further down paints the wedge that tapers up behind the
   bottle. Nothing in this section sets a background on .hero: that is the
   motif's, and a second declaration here would win the cascade and erase it. */
.hero{position:relative;overflow-x:clip;overflow-y:visible;color:var(--on-dark);
  padding-block:44px 58px;border-bottom:1px solid var(--accent-edge)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,520px);
  gap:52px;align-items:start;position:relative;z-index:2}
.hero__copy{display:block;position:relative;z-index:3}
.hero .eyebrow{color:var(--accent-on)}
.hero h1{font-size:clamp(2rem,3.4vw,2.9rem);margin:10px 0 0;font-weight:700;
  line-height:1.1;letter-spacing:-.018em;color:var(--ink)}
.hero h1 span{color:var(--accent-on)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.hero__media{position:relative;display:flex;align-items:center;justify-content:center}
.hero__stick{position:relative;display:block;width:100%}
.hero__card{position:relative;text-align:center;padding:0;z-index:2}
.hero__card img{margin-inline:auto;max-width:100%;position:relative;z-index:3;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.7))}
.hero__tag{display:block;margin:14px auto 0;width:max-content;position:relative;z-index:4;
  background:var(--panel);color:var(--ink-soft);font-size:.9375rem;font-weight:700;
  letter-spacing:.06em;padding:7px 16px;white-space:nowrap;
  border:1px solid var(--line)}
.ticks{margin:24px 0 0;display:grid;gap:10px;max-width:var(--measure-wide)}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;
  color:var(--ink-soft)}
.ck{flex:none;width:22px;height:22px;background:var(--accent);
  color:#1a1205;display:inline-flex;align-items:center;justify-content:center;
  font-size:.8125rem;font-weight:700;margin-top:4px}
.pay{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:20px 0 0;
  font-size:.9375rem;color:var(--faint)}
.pay img{width:214px;height:31px;object-fit:contain}
.hero__sub{margin:18px 0 0;font-size:1rem;color:var(--ink-soft)}
/* --ink-soft rather than --muted because .hero__sub is the one block in this
   copy column with no opaque card under it: it sits directly on the motif
   gradient, whose warm stop is #584022. Muted measured 4.1:1 there against a
   4.5 requirement, which is a fail at the top of the gradient even though the
   block usually renders lower down where the ground has resolved to ink. The
   pills and the figure tiles keep --muted and --faint: both carry their own
   opaque --panel background and are measured against it, not against the
   gradient behind it (responsive.md, proof 4). */
.factpills{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.factpills li{background:var(--panel);border:1px solid var(--line);
  padding:6px 14px;font-size:.9375rem;color:var(--muted)}
.factpills li b{color:var(--ink)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin:20px 0 0;max-width:640px}
.figures div{background:var(--panel);border:1px solid var(--line);
  border-top:3px solid var(--accent);padding:14px 16px}
.figures b{display:block;font-family:var(--display);font-size:1.75rem;font-weight:700;
  color:var(--ink);line-height:1}
.figures span{display:block;margin-top:6px;font-size:.9375rem;color:var(--faint)}
.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:1rem;color:var(--faint);flex-wrap:wrap}
.hero__rating b{color:var(--ink-soft)}
.floaty{position:absolute;background:var(--panel);border:1px solid var(--accent-edge);
  padding:11px 15px;box-shadow:var(--shadow-lg);font-family:var(--display);
  font-size:1rem;font-weight:700;color:var(--ink);z-index:5;line-height:1.15}
.floaty small{display:block;color:var(--accent-on);font-family:var(--sans);
  font-size:.9375rem;font-weight:700;margin-top:3px}
.floaty--tl{top:6px;left:-18px}
.floaty--br{bottom:64px;right:-18px}

/* ---- 5. QUICK ANSWER: the one parchment surface on the site ---------------
   It reproduces paper, so it is paper. It re-points every token it needs
   rather than carrying literal colours, which is what lets the same component
   sit on the ink ground and on a lifted panel without a variant. */
.answer{background:var(--parch);border-left:6px solid var(--accent);
  box-shadow:var(--shadow);padding:22px 26px;margin:20px 0 0;
  max-width:var(--measure-wide);
  --ink:#151109;--ink-soft:#2c2618;--muted:#4b4534;--faint:#5d5644;
  --accent-on:#8c5205;color:var(--muted)}
.answer .qtag{display:block;font-family:var(--sans);font-weight:700;font-size:.875rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent-on);margin-bottom:.5em}
.answer p{margin:0;font-size:1.0625rem;color:var(--ink-soft)}
.answer p+p{margin-top:.75em}
.answer a{color:var(--accent-on);text-decoration:underline}
.hero .answer p{font-size:1.1rem;line-height:1.66}

/* ---- 6. TRUST ROW --------------------------------------------------------- */
.trust{background:var(--paper-tint);border-bottom:1px solid var(--line)}
.trust__note{max-width:300px;font-size:.9375rem;line-height:1.5;color:var(--faint)}
.trust__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:22px 40px;padding-block:24px}
.trust__row figure{text-align:center;max-width:132px}
.trust__row img{margin-inline:auto}
.trust__row figcaption{font-size:.9375rem;color:var(--faint);margin-top:8px;font-weight:600}

/* ---- ABOVE-THE-FOLD RESPONSIVE ------------------------------------------- */
@media(max-width:1240px){.menu a{padding-inline:10px;font-size:.9375rem}
  .nav__row{gap:16px}}
@media(max-width:1080px){
  .burger{display:block}
  .navmenus{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;background:var(--panel);
    border-bottom:1px solid var(--line);max-height:76vh;overflow-y:auto;z-index:20}
  .navmenus.open{display:flex}
  .nav__track{flex-direction:column}
  .menu{flex-direction:column;align-items:stretch}
  .menu a{display:block;padding:13px 24px;font-size:1rem;border-bottom:1px solid var(--line-soft)}
  .nav__row .brand{margin-right:auto}
  .navmenus{margin-left:0}
}
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:18px}
  .hero__copy{display:contents}
  .hero__copy>.eyebrow{order:1;justify-self:start}
  .hero__copy>h1{order:2}
  .hero__media{order:3}
  .hero__copy>.answer{order:4}
  .hero__copy>.hero__cta{order:5}
  .hero__copy>.ticks{order:6}
  .hero__copy>.pay{order:7}
  .hero__sub{order:8}
  .hero__copy>.hero__rating{order:9}
  .factpills{order:10}
  .figures{order:11}
  .hero__card img{max-width:420px;margin-inline:auto}
  .floaty{display:none}
}
@media(max-width:700px){
  .hero h1{font-size:2rem}
  .hero__card img{max-width:330px}
  .figures{grid-template-columns:1fr}
}
@media(max-width:520px){.nav__cta .btn span{display:none}
  .brand__firm{display:none}}
@media(max-width:400px){.nav__cta{display:none}}

/* --- 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 (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 -- taper-glow ---------------------------------------- */
.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(168deg,#584022,#0f1218 52%,#0f1218)}.hero__media::before{content:'';position:absolute;left:50%;bottom:-6%;width:120%;height:96%;translate:-50% 0;z-index:1;pointer-events:none;clip-path:polygon(50% 0,88% 100%,12% 100%);background:linear-gradient(0deg,rgba(242,163,56,0.40),transparent 74%);animation:esTaper 11s ease-in-out infinite}@keyframes esTaper{0%,100%{transform:translate(-50%,8%) scaleY(.9);opacity:.28}50%{transform:translate(-50%,-2%) scaleY(1.05);opacity:.66}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/

/* ---- 7. SECTIONS ---------------------------------------------------------- */
.sec{padding-block:74px}
.sec--tight{padding-block:42px}
.sec--slab{background:var(--paper-deep)}
.sec--lift{background:var(--paper-tint)}
.sec--center .sec__head{text-align:center;margin-inline:auto}
.sec__head{max-width:var(--measure-wide);margin-bottom:34px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
  font-size:.875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-on);margin-bottom:10px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent)}
.sec h2{font-size:clamp(1.65rem,3vw,2.3rem);margin-bottom:12px}
.sec h3{font-size:1.2rem;margin-bottom:8px}
.lead{font-size:1.14rem;color:var(--ink-soft)}
.note{font-size:.9375rem;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,.sec>.wrap>.preclist{
  max-width:var(--measure-wide);margin-inline:auto}
.sec>.wrap>h1{max-width:var(--measure);margin-inline:auto;
  font-size:clamp(1.95rem,3.5vw,2.7rem);font-weight:700;letter-spacing:-.018em}
.sec>.wrap>.eyebrow{display:flex;max-width:var(--measure);margin-inline:auto}
.sec ul li{position:relative}
.sec>.wrap>ul>li,.preclist li{padding-left:24px;margin-bottom:.5em}
.sec>.wrap>ul>li::before,.preclist li::before{content:"";position:absolute;left:2px;
  top:.7em;width:9px;height:2px;background:var(--accent)}
.preclist li{position:relative;font-size:1.0625rem}
.sec ol{counter-reset:n;display:grid;gap:11px}
.sec>.wrap>ol>li{position:relative;padding-left:38px;counter-increment:n}
.sec>.wrap>ol>li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;
  top:1px;width:28px;color:var(--accent-on);font-size:1.0625rem;font-weight:700;
  font-family:var(--display)}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:3.6rem;
  line-height:.84;font-weight:700;color:var(--accent-on);padding:8px 14px 0 0}
.pullquote{border-left:3px solid var(--accent);padding:8px 0 8px 22px;margin:26px auto}
.pullquote p{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--ink);
  line-height:1.42}
.pullquote cite{display:block;margin-top:9px;font-style:normal;font-size:.875rem;
  color:var(--faint);letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.crumbs{font-size:.9375rem;color:var(--faint);padding-block:18px 0}
.crumbs a{color:var(--faint)}

/* ---- 8. CARDS AND GRIDS --------------------------------------------------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--line);
  padding:26px 24px;box-shadow:var(--shadow-sm);
  transition:border-color .2s ease}
.card:hover{border-color:var(--accent-edge)}
.card h3{font-size:1.14rem}
.card p{font-size:1.0625rem;color:var(--muted)}
.card p+p{margin-top:.8em}
.steps{display:grid;gap:14px;counter-reset:s}
.step{background:var(--panel);border:1px solid var(--line);
  padding:24px 26px 24px 80px;position:relative;box-shadow:var(--shadow-sm);
  counter-increment:s}
.step__n{position:absolute;left:24px;top:24px;width:38px;height:38px;
  background:var(--accent);color:#1a1205;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:700;font-size:1rem}
.step__n::before{content:counter(s,decimal-leading-zero)}
.step h3{font-size:1.12rem}
.step p{font-size:1.0625rem;color:var(--muted)}
.chips{display:grid;gap:10px;margin:18px 0 0}
.chips li{display:flex;gap:11px;align-items:flex-start;font-size:1rem}
.chips .ck{background:var(--ember-soft);color:var(--ember-on);border:1px solid var(--ember-line)}
.callout{background:var(--accent-tint);border-left:5px solid var(--accent);
  padding:18px 24px;margin:24px auto;font-size:1.0625rem}
.callout p+p{margin-top:.8em}
.alert{background:var(--ember-soft);border-left:5px solid var(--ember);
  padding:18px 24px;margin:24px auto;font-size:1.0625rem}
.alert p+p{margin-top:.8em}
.flag{display:inline-block;background:var(--ember-soft);color:var(--ember-on);
  font-size:.875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 11px;border:1px solid var(--ember-line)}

/* ---- 9. TABLES ------------------------------------------------------------ */
.tablewrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);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.05rem}
.dtable th,.dtable td{padding:12px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft);color:var(--muted)}
.dtable thead th{background:var(--paper-deep);color:var(--accent-on);
  font-size:.9375rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  font-family:var(--sans)}
.dtable tbody tr:nth-child(even) td{background:var(--panel-2)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td b,.dtable th b{color:var(--ink)}
.dtable tbody th{font-weight:600;color:var(--ink-soft)}

/* ---- 10. SPLIT AND SHOTS -------------------------------------------------- */
/* `align-items:center` is what makes a picture look detached from the copy it
   belongs to. The two are almost never the same height, so the shorter one
   floats in the middle of the taller one's row: the three-bottle shot is
   380x380 beside 448px of copy and sat 30px below the first line, with the
   bottle caps level with nothing. `start` lines the top of the picture up with
   the first line of its own text, and the surplus height falls at the BOTTOM
   of the short column, where it reads as margin instead of as a hole.

   No height cap is needed here, unlike the sibling sites: every image that
   lands in one of these two components is square (380x380, 150x150), so
   nothing dwarfs the copy once the two start level. */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:46px;
  align-items:start}
.split--rev{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.split__media{text-align:center}
.split__media img{margin-inline:auto}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:8px}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots figure{background:var(--panel);border:1px solid var(--line);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.shots img{width:100%}
.shots figcaption{padding:18px 20px;font-size:1rem;color:var(--muted)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.08rem;
  color:var(--ink);margin-bottom:6px}

/* ---- 11. PROMO, STATS, SEAL WALL ------------------------------------------ */
.promo{background:var(--paper-deep);border-left:5px solid var(--accent);
  padding:32px 36px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;
  align-items:center;--ink:#ffffff;--ink-soft:#ffffff;--muted:#c6bfb1;--faint:#a49d8f;
  --panel:#1a1f2a;--line:#272e3a;color:var(--muted)}
.promo p{margin:0}
.stats{background:var(--paper-deep);border:1px solid var(--accent-edge);padding:34px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;text-align:center;
  --ink:#ffffff;--faint:#a49d8f;--muted:#c6bfb1;color:var(--muted)}
.stats b{display:block;font-family:var(--display);font-size:2.2rem;font-weight:700;
  color:var(--ink);line-height:1}
.stats span{display:block;margin-top:8px;font-size:.9375rem;color:var(--faint)}
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.badgewall figure{background:var(--panel);border:1px solid var(--line);
  padding:20px 14px;text-align:center;box-shadow:var(--shadow-sm)}
.badgewall img{margin:0 auto 10px}
.badgewall figcaption{font-size:.9375rem;color:var(--muted)}
.badgewall figcaption b{display:block;color:var(--ink);font-size:1rem;
  margin-bottom:4px;font-family:var(--display)}

/* ---- 12. WHY CARDS AND THE FIT LISTS -------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.whycard{background:var(--panel);border:1px solid var(--line);padding:26px 24px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.whycard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent),var(--ember))}
.whycard h3{font-size:1.12rem}
.whycard p{font-size:1.0625rem;color:var(--muted)}
.whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.forlist{background:var(--panel);border:1px solid var(--line);padding:26px;
  box-shadow:var(--shadow-sm)}
.forlist h3{font-size:1.12rem;margin-bottom:12px}
.forlist li{display:flex;gap:10px;font-size:1.0625rem;margin-bottom:9px}
.forlist li::before{content:"";flex:none;width:9px;height:2px;margin-top:.88em;
  background:var(--accent)}
.forlist--no li::before{background:var(--ember-on)}

/* ---- 13. INGREDIENT CARDS AND THE PRINTED PANEL ---------------------------
   The panel reproduces a printed label, so like the Quick Answer it sits on
   parchment and re-points its tokens rather than inverting a dark component. */
.ing{display:grid;gap:22px}
.ingcard{background:var(--panel);border:1px solid var(--line);padding:28px;
  box-shadow:var(--shadow-sm);position:relative}
.ingcard h3{font-size:1.22rem;margin-bottom:4px}
.ingcard .ingsub{font-size:.9375rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-on);font-weight:700;margin-bottom:12px;display:block}
.ingcard p{font-size:1.0625rem}
.ingcard p+p{margin-top:.85em}
.ing__dose{font-weight:700;color:var(--ink);white-space:nowrap}
.facts{background:var(--parch);border:2px solid var(--accent);overflow:hidden;
  max-width:640px;margin-inline:auto;
  --ink:#151109;--ink-soft:#2c2618;--muted:#4b4534;--faint:#5d5644;
  --line:#ded2b8;color:var(--muted)}
.facts__h{background:var(--paper-deep);color:var(--on-dark);padding:14px 22px;
  font-family:var(--display);font-size:1.16rem;font-weight:700}
.facts__serve{padding:12px 22px 0;font-size:1rem;color:var(--muted)}
.facts__foot{padding:12px 22px 18px;font-size:.9375rem;color:var(--faint)}
.facttab{width:100%;border-collapse:collapse;font-size:1rem}
.facttab th,.facttab td{padding:10px 22px;border-bottom:1px solid var(--line);
  text-align:left;color:var(--muted)}
.facttab thead th{font-size:.9375rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-family:var(--sans)}
.facttab tbody th{font-weight:600;color:var(--ink-soft);font-size:1rem}
.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}
/* wrap_tables.py puts a .tablewrap round every table AFTER the build, including
   the transcribed panel, and .tablewrap paints var(--panel) - this site's dark
   ground - straight over the parchment card. .facttab meanwhile keeps the dark
   inks .facts defines for a LIGHT ground, so the ingredient column measured
   1.10:1, the %DV column 1.14:1 and the head row 2.26:1 on the home page and on
   supplement-facts.html: about sixty cells that cannot be read at all. The
   scroller keeps its job here and gives back its ground. */
.facts .tablewrap{background:transparent;border-color:transparent;border-radius:0;
  box-shadow:none;margin:0}


/* ---- 14. THE RECORD SHEET ------------------------------------------------- */
.qa{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  overflow:hidden;max-width:920px;margin-inline:auto}
.qa__h{background:var(--paper-deep);color:var(--accent-on);padding:16px 24px;
  font-family:var(--display);font-weight:700;font-size:1.06rem}
.qa dl{margin:0;display:grid;grid-template-columns:32% minmax(0,1fr)}
.qa dt,.qa dd{padding:13px 24px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:700;color:var(--ink);font-size:1rem;letter-spacing:.07em;
  text-transform:uppercase;font-family:var(--sans)}
.qa dd{color:var(--muted);font-size:1.0625rem}
.qa dl>:nth-last-child(-n+2){border-bottom:0}

/* ---- 15. THE ADD-TO-CART PANEL --------------------------------------------
   Three pack cards that share one image slot and one button baseline. The
   body PACKS FROM THE TOP and the button carries a min-height, because the
   Add To Cart is not the last thing in a card - a payment strip and a note
   follow it, and `margin-top:auto` would absorb whatever those left over,
   which differs per card and puts three buttons on three baselines.

   The supply line reserves two lines at every width for the same reason: on
   the six-bottle card it wraps and on the two-bottle card it does not.

   Every card carries a 2px transparent border and the featured one changes
   only the colour, because box-sizing is border-box and a border added to one
   card alone steals 2px from its content box. */
.buy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  align-items:stretch;margin-top:8px}
.buy__card{background:var(--panel);border:2px solid var(--line);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;text-align:center}
.buy__card--feature{border-color:var(--accent);box-shadow:var(--shadow-lg);margin-top:-14px}
.buy__head{background:var(--paper-deep);padding:16px 18px 14px;position:relative;
  --ink:#ffffff;--muted:#c6bfb1}
.buy__card--feature .buy__head{background:var(--accent);--ink:#1a1205;--muted:#4a3410}
.buy__flag{display:inline-block;background:var(--ember-soft);color:var(--ember-on);
  font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 12px;margin-bottom:8px;border:1px solid var(--ember-line)}
.buy__flag--ghost{visibility:hidden}
/* On the featured card the flag sits on the amber head, and a .24 scrim left
   white 14px caps at 3.53:1, under AA for text this size. Deepening the scrim
   keeps the same badge and takes it to about 5.6:1. */
.buy__card--feature .buy__flag{background:rgba(0,0,0,.44);color:#fff;
  border-color:rgba(0,0,0,.5)}
.sec .buy__name{color:var(--ink);font-size:1.5rem;font-weight:700;margin:0;
  letter-spacing:-.012em;font-family:var(--display)}
.buy__supply{color:var(--muted);font-size:.9375rem;font-weight:600;margin-top:4px;
  min-height:3.2em}
.buy__body{padding:18px 22px 22px;display:flex;flex-direction:column;flex:1}
.buy__img{display:block;width:100%;max-width:230px;height:174px;object-fit:contain;
  margin:0 auto 10px}
.buy__price{font-family:var(--display);font-size:2.9rem;font-weight:700;color:var(--ink);
  line-height:1;display:flex;align-items:flex-start;justify-content:center;gap:2px}
.buy__cur{font-size:1.3rem;margin-top:6px}
.buy__per{font-family:var(--sans);font-size:1rem;font-weight:700;color:var(--faint);
  align-self:flex-end;margin:0 0 6px 6px}
.buy__total{font-size:1.0625rem;color:var(--muted);margin:10px 0 14px;min-height:3em}
.buy__total b{color:var(--ink);font-size:1.18rem}
.buy__was{color:var(--faint);text-decoration:line-through;margin-left:6px}
.buy__perks{display:grid;gap:7px;text-align:left;margin:0 auto 6px;font-size:1rem;
  color:var(--ink-soft);min-height:7.6em;width:100%}
.buy__perks li{position:relative;padding-left:26px}
.buy__perks li::before{content:"\2713";position:absolute;left:0;top:1px;width:19px;
  height:19px;background:var(--accent-tint);color:var(--accent-on);font-size:1rem;
  font-weight:700;display:flex;align-items:center;justify-content:center}
.buy__add{font-size:.98rem;padding-block:15px;margin-top:14px;min-height:74px;
  display:flex;align-items:center;justify-content:center}
.buy__pay{display:block;width:180px;height:auto;margin:12px auto 0;opacity:.85}
.buy__why{font-size:.9375rem;color:var(--faint);text-align:left;margin-top:14px;
  padding-top:12px;border-top:1px dashed var(--line)}
.buy__foot{max-width:var(--measure-wide);margin:26px auto 0;text-align:center}
/* Same correction as .split above, and this is the worse of the two. The seal
   is 150x150 against 473px of copy on guarantee.html and 367px on the home
   page, so centring dropped it 161px and 108px below the heading it is the
   mark for -- a gold roundel floating in the middle of a paragraph it has no
   visible relationship to. Aligned to the top it sits beside the heading,
   which is the line it illustrates. */
.guarantee{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:34px;
  align-items:start;background:var(--panel);border:1px solid var(--line);padding:32px;
  box-shadow:var(--shadow-sm)}
.guarantee img{margin-inline:auto}
.guarantee h3{font-size:1.36rem;margin-bottom:12px}

/* ---- 16. REVIEWS ---------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tcard{background:var(--panel);border:1px solid var(--line);padding:24px;
  box-shadow:var(--shadow-sm)}
.tcard .stars,.rev__stars{color:var(--accent-on);letter-spacing:1px;font-size:1rem}
.tcard b{display:block;margin-top:8px;font-family:var(--display);font-size:1.06rem;
  color:var(--ink)}
.tcard span{font-size:.9375rem;color:var(--faint)}
.tcard p{font-size:1.0625rem;margin-top:10px}
.bars{display:grid;gap:9px;max-width:460px}
.bar{display:grid;grid-template-columns:62px minmax(0,1fr) 52px;gap:12px;align-items:center;
  font-size:.9375rem;color:var(--faint)}
.bar__t{height:10px;background:var(--line-soft);overflow:hidden}
.bar__f{display:block;height:100%;background:var(--accent)}
.dist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;
  align-items:center;background:var(--panel);border:1px solid var(--line);padding:28px;
  box-shadow:var(--shadow-sm)}
.bigscore{font-family:var(--display);font-size:2.7rem;font-weight:700;color:var(--ink);
  line-height:1}
.bigscore small{font-size:1rem;color:var(--faint);font-weight:600}

/* ---- 17. FAQ -------------------------------------------------------------- */
.faq{display:grid;gap:10px;text-align:left}
.faq details{background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);overflow:hidden}
.faq details[open]{border-color:var(--accent-edge)}
.faq summary{padding:17px 22px;font-family:var(--display);font-weight:700;
  color:var(--ink);cursor:pointer;font-size:1.06rem;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:"+";flex:none;width:28px;height:28px;
  background:var(--accent-tint);color:var(--accent-on);font-size:1.2rem;
  display:flex;align-items:center;justify-content:center}
.faq details[open] summary::after{content:"\2013";background:var(--accent);color:#1a1205}
.faq__b{padding:0 22px 18px;font-size:1.0625rem}
.faq__b p+p{margin-top:.8em}

/* ---- 18. REFERENCES AND BYLINE -------------------------------------------- */
.refs{background:var(--panel);border:1px solid var(--line);padding:24px 26px;
  box-shadow:var(--shadow-sm)}
.refs h2{font-size:1.18rem;margin-bottom:12px}
.refs ol{counter-reset:r;display:grid;gap:9px}
.refs li{counter-increment:r;position:relative;padding-left:32px;font-size:1rem;
  color:var(--muted);line-height:1.6}
.refs li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;
  font-weight:700;color:var(--accent-on);font-family:var(--display);font-size:1rem}
.refs a{word-break:break-word}
.byline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;
  background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);
  padding:24px 26px;box-shadow:var(--shadow-sm);margin:26px auto 0}
.byline svg{width:64px;height:64px;flex:none}
.byline b{font-family:var(--display);font-size:1.08rem;color:var(--ink);display:block;
  margin-bottom:7px}
.byline p{font-size:1rem;color:var(--muted)}

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

/* ---- 20. FINAL CTA AND KEEP READING --------------------------------------- */
.final{background:var(--paper-deep);border:1px solid var(--accent-edge);
  padding:40px 42px;position:relative;overflow:hidden;
  --ink:#ffffff;--ink-soft:#ffffff;--muted:#c6bfb1;--faint:#a49d8f;
  --accent-on:#ffc57a;color:var(--muted)}
.final::after{content:"";position:absolute;right:-70px;bottom:-70px;width:250px;
  height:250px;border:2px solid var(--accent-edge);transform:rotate(45deg)}
.final h2{color:var(--ink);font-size:clamp(1.5rem,2.9vw,2.1rem);margin-bottom:12px}
.final--media{display:grid;grid-template-columns:300px minmax(0,1fr);gap:36px;
  align-items:center}
.final--media .final__img img{width:100%;height:auto;margin-inline:auto;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.66))}
.final__body{position:relative;z-index:2}
.final__price{font-family:var(--display);font-size:1.22rem;font-weight:700;color:var(--ink);
  margin:14px 0 18px}
.final p,.article .final p{color:var(--muted)}
.final__price,.article .final .final__price{color:var(--ink)}
.final a:not(.btn){color:var(--accent-on);text-decoration:underline}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel a{background:var(--panel);border:1px solid var(--line);padding:22px;display:block;
  box-shadow:var(--shadow-sm);transition:border-color .2s ease}
.rel a:hover{border-color:var(--accent);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:1rem;color:var(--muted)}

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

/* ---- 22. THE DESK CARDS AND THE FOOTER SLAB -------------------------------
   The footer is a near-black slab and its seals are INSET ALONG ITS TOP EDGE:
   the row is the first thing inside the slab and is pulled up by half its own
   height, so each chip straddles the boundary between the desk band above and
   the slab below. The chips carry the slab's own colour so they read as holes
   punched in the edge rather than as badges laid on top of it. */
.fdesk{background:var(--paper-tint);border-top:1px solid var(--line);
  padding-block:34px 44px}
.fdesk__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fdesk__card{background:var(--panel);border:1px solid var(--line);padding:20px 22px;
  box-shadow:var(--shadow-sm)}
.fdesk__card b{display:block;font-family:var(--display);font-size:1.06rem;color:var(--ink);
  margin-bottom:4px}
.fdesk__card p{font-size:1.0625rem;color:var(--muted)}
.fdesk__card .flag{margin-bottom:10px}
footer{background:var(--paper-deep);color:var(--muted);padding-block:0 26px;
  font-size:1rem;border-top:2px solid var(--accent)}
footer a{color:var(--ink-soft)}
footer a:hover{color:var(--accent-on)}
.fseals{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;
  margin-top:-34px;margin-bottom:26px;position:relative;z-index:3}
.fseals figure{background:var(--paper-deep);border:1px solid var(--accent-edge);
  width:68px;height:68px;display:flex;align-items:center;justify-content:center;
  border-radius:50%}
.fseals img{width:44px;height:44px;object-fit:contain}
.fhead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 34px;
  align-items:start;padding-bottom:26px;border-bottom:1px solid var(--line)}
.fbrand{font-family:var(--display);font-size:1.8rem;font-weight:700;color:var(--ink);
  letter-spacing:-.018em;grid-column:1}
.fbrand span{color:var(--accent-on)}
.fhead p{grid-column:1;font-size:1.0625rem;line-height:1.6}
.fhead .fmark{grid-column:2;grid-row:1 / span 2;justify-self:end;max-width:132px}
.findex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 34px;
  padding-block:30px;border-bottom:1px solid var(--line);align-items:start}
.findex h4{color:var(--accent-on);font-family:var(--sans);font-size:.875rem;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.findex ul{display:grid;gap:2px}
.findex li{font-size:1.0625rem;line-height:1.5}
footer li a{display:inline-block;padding-block:4px;margin-block:-4px}
.fnap{padding-block:24px;border-bottom:1px solid var(--line);font-size:1rem;
  line-height:1.74}
.fnap strong{color:var(--ink)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:20px;
  font-size:.9375rem}
.fpay img{background:var(--panel);padding:5px 8px}
.disc{padding-top:18px;font-size:.9375rem;line-height:1.7;color:var(--faint)}
.disc p{margin-bottom:.9em}
.disc b{color:var(--ink-soft)}
.disc .copy{margin-top:16px}

/* ---- 23. BUY BAR ---------------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--paper-deep);
  transform:translateY(110%);transition:transform .3s ease;
  border-top:2px solid var(--accent);--ink:#ffffff;--muted:#c6bfb1;color:var(--muted)}
.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:.9375rem}
.buybar__t b{color:var(--ink)}
.buybar .from{color:var(--accent-on)}
.buybar .btn{padding:10px 20px}

/* ---- 24. BLOG ------------------------------------------------------------- */
.article{max-width:780px;margin-inline:auto}
.article h1{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:14px;font-weight:700}
.article h2{font-size:1.52rem;margin:1.9em 0 .6em;scroll-margin-top:120px}
.article h3{font-size:1.18rem;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:"";position:absolute;left:3px;top:.7em;width:9px;height:2px;
  background:var(--accent)}
.article ol{counter-reset:ai}
.article ol li{position:relative;padding-left:32px;margin-bottom:8px;counter-increment:ai}
.article ol li::before{content:counter(ai,decimal-leading-zero);position:absolute;left:0;
  color:var(--accent-on);font-weight:700;font-family:var(--display);font-size:1rem}
.article figure{margin:1.6em 0}
.article figure img{width:100%}
.article figure.portrait img{width:100%;max-width:var(--figw);margin-inline:auto}
.article figcaption{font-size:.9375rem;color:var(--faint);margin-top:9px;
  border-left:3px solid var(--accent);padding-inline-start:12px}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:.9375rem;color:var(--faint);
  padding-block:12px;border-block:1px solid var(--line);margin-bottom:26px}
.postmeta b{color:var(--ink-soft)}
.postmeta .sep{color:var(--line)}
.toc{background:var(--panel);border:1px solid var(--line);padding:20px 24px;
  margin-bottom:26px;box-shadow:var(--shadow-sm)}
.toc h2{font-size:.875rem;letter-spacing:.18em;text-transform:uppercase;
  font-family:var(--sans);color:var(--accent-on);margin:0 0 10px}
.toc ol{counter-reset:t;display:grid;gap:6px}
.toc li{counter-increment:t;position:relative;padding-left:30px;font-size:1.0625rem}
.toc li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;
  color:var(--faint);font-weight:700;font-family:var(--display);font-size:1rem}
.keypoints{background:var(--accent-tint);border-left:5px solid var(--accent);
  padding:20px 24px;margin-bottom:24px}
.keypoints>b{display:block;font-family:var(--sans);font-size:.875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-on);margin-bottom:10px}
.keypoints li b{color:var(--ink)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{background:var(--panel);border:1px solid var(--line);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:border-color .2s ease}
.posts article:hover{border-color:var(--accent)}
.posts img{width:100%}
.posts .pbody{padding:20px 22px}
.posts h3{font-size:1.12rem;margin-bottom:8px}
.posts p{font-size:1.0625rem;color:var(--muted)}
.posts .pmeta{font-size:.9375rem;color:var(--faint);margin-top:12px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700}
.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.5rem;line-height:1.24;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.3rem}
  .article .final--media .btn{width:100%}
}
.article .refs{margin-top:2em}
.article .refs h2{margin-top:0}

/* ---- 25. BENEFIT ICONS ----------------------------------------------------
   The vendor's benefit icons are mid-grey line art on a transparent ground,
   drawn for a white listing page. On this ink ground they read at about
   4.6:1 - legible, but dull beside the amber. Brightening them is a display
   decision about a line drawing, not a retouch of a product shot. */
.iconrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.iconrow figure{background:var(--panel);border:1px solid var(--line);padding:22px 14px;
  text-align:center;box-shadow:var(--shadow-sm)}
.iconrow img{margin:0 auto 12px;filter:brightness(1.9)}
.iconrow figcaption{font-size:1rem;color:var(--muted)}
.iconrow figcaption b{display:block;font-family:var(--display);font-size:1.04rem;
  color:var(--ink);margin-bottom:4px}

/* ---- 26. MOTION: rise on entry -------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(18px)}
[data-reveal].in{opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].in{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- 27. RESPONSIVE ------------------------------------------------------- */
@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>h1,.sec>.wrap>.eyebrow,
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps,.sec>.wrap>.preclist{
    max-width:none}
  .badgewall,.iconrow{grid-template-columns:repeat(3,minmax(0,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,minmax(0,1fr))}
  .g3,.g4,.whygrid,.tgrid,.rel,.posts,.fdesk__grid{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .findex{grid-template-columns:repeat(2,minmax(0,1fr))}
  .buy{grid-template-columns:1fr;max-width:440px;margin-inline:auto;gap:18px}
  .buy .buy__card:nth-child(1){order:3}
  .buy .buy__card:nth-child(2){order:1}
  .buy .buy__card:nth-child(3){order:2}
  .buy__card--feature{margin-top:0}
  .buy__supply,.buy__total,.buy__perks{min-height:0}
  .final--media{grid-template-columns:1fr;gap:22px}
  .final--media .final__img img{max-width:260px}
}
@media(max-width:700px){
  .sec{padding-block:54px}
  .g2,.g3,.g4,.whygrid,.whofor,.tgrid,.rel,.posts,.shots,.shots--wide,
  .badgewall,.iconrow,.fdesk__grid,.findex,.fhead{grid-template-columns:1fr}
  .fhead .fmark{grid-column:1;grid-row:auto;justify-self:start}
  .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 22px}
  .step{padding:22px 20px 22px 70px}
  .step__n{left:16px}
  .promo{padding:26px 22px}
  .answer{padding:18px 20px}
}
@media(max-width:600px){.btn{min-height:44px}}


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

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav,header.header{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav,header.header{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*/
/* ---- Evo Slim HOME PAGE: modern surface + circulate motif ------------------
   Design slot for this site: cards 24px, controls 16px, depth "two tight
   stops, crisp", ribbon "tab above the card", motif family "circulate".

   PAINT ONLY. Every declaration below is border-radius, box-shadow,
   background, colour, transform, transition, animation or an absolutely
   positioned pseudo-element. Nothing here moves a box, so it lives below
   the critical marker and needs restamp_assets.py, not a rebuild.

   HOME ONLY. class="hero" is on index.html and on no other page of this
   site, so ".hero ..." is home-only by construction and ".hero ~ * ..."
   reaches the trust row and every .sec because all of them are siblings of
   .hero inside main#main. The header, the footer and .buybar are outside
   main and are deliberately NOT touched: the welded amber nav block and the
   footer type floor are other passes' work.

   SPECIFICITY, NOT SOURCE ORDER. modern_surface.py and footer_type.py strip
   and re-append their own blocks on every build and land after this one.
   Every selector here carries at least two class components, so it outranks
   modern_surface's bare ".card" / ".answer" list wherever the two overlap.
   The custom properties are all --es-* so its later :root{--radius;--shadow}
   cannot clobber them either. */

:root{
  --es-rc:24px;                 /* slot radius_card    */
  --es-rb:16px;                 /* slot radius_control */
  --es-rs:10px;
  --es-pill:999px;
  /* slot depth: two tight stops, crisp. Tinted with this site's own ink
     (#f7f2e9) on the dark panels and with its own deep ink (#090b10) under
     the one parchment surface. No neutral black anywhere. */
  --es-d1:0 1px 1px rgba(247,242,233,.07),0 4px 10px rgba(247,242,233,.10);
  --es-d2:0 1px 1px rgba(247,242,233,.11),0 10px 22px rgba(247,242,233,.16);
  --es-da:0 1px 1px rgba(242,163,56,.30),0 4px 10px rgba(242,163,56,.24);
  --es-dah:0 1px 1px rgba(242,163,56,.40),0 10px 22px rgba(242,163,56,.30);
  --es-dp:0 1px 1px rgba(9,11,16,.55),0 4px 10px rgba(9,11,16,.55);
  /* --line (#272e3a) is a border against the page ground and disappears
     when it is drawn ON a panel. The separators and the perk discs get a
     tint of the site's own ink instead, measured on --panel and on the
     featured card's lighter --panel-2 head. */
  --es-rule:rgba(247,242,233,.15);
}

/* ---- panels: the slot's card radius and the two-stop depth ---------------- */
.hero ~ * .card,.hero ~ * .whycard,.hero ~ * .ingcard,.hero ~ * .step,
.hero ~ * .callout,.hero ~ * .guarantee,.hero ~ * .byline,.hero ~ * .faq,
.hero ~ * .final,.hero ~ * .promo,.hero ~ * .qa,.hero ~ * .stats,
.hero ~ * .tablewrap,.hero ~ * .shots figure,.hero ~ * .rel a,
.hero ~ * .buy__card{border-radius:var(--es-rc);box-shadow:var(--es-d1)}

/* The printed panel is a reproduction of a label and keeps its square
   corners; rounding it would make it a card rather than a facsimile. */
.hero ~ * .facts .tablewrap{border-radius:0;box-shadow:none}

/* The one light surface on the site takes its depth from its OWN ink. */
.hero .answer{border-radius:var(--es-rc);box-shadow:var(--es-dp)}

/* ---- controls: the slot's control radius, a gradient on the buying CTA
   only, the secondary left solid, a 2px lift and a visible focus ring ------- */
.hero .btn,.hero ~ * .btn{border-radius:var(--es-rb);
  transition:background .2s ease,color .2s ease,border-color .2s ease,
    box-shadow .2s ease,transform .2s ease}
.hero .btn--cta,.hero ~ * .btn--cta{
  background:linear-gradient(168deg,var(--accent-on),var(--accent) 54%,var(--accent-deep));
  box-shadow:var(--es-da)}
.hero .btn--cta:hover,.hero ~ * .btn--cta:hover{
  background:linear-gradient(168deg,var(--accent-on),var(--accent-on) 40%,var(--accent));
  box-shadow:var(--es-dah);transform:translateY(-2px)}
.hero .btn--ghost,.hero ~ * .btn--ghost{background:var(--panel-2);
  color:var(--ink);border-color:var(--line);box-shadow:var(--es-d1)}
.hero .btn--ghost:hover,.hero ~ * .btn--ghost:hover{background:var(--panel);
  border-color:var(--accent);color:var(--accent-on);
  box-shadow:var(--es-d2);transform:translateY(-2px)}
.hero a:focus-visible,.hero button:focus-visible,
.hero ~ * a:focus-visible,.hero ~ * button:focus-visible{
  outline:3px solid var(--accent-on);outline-offset:3px}

/* The reveal pass settles its targets at transform:none, which outranked
   the estate hover lift on these two and silently killed it. Two class
   components put it back without touching the reveal itself. */
.hero ~ * .rel a,.hero ~ * .shots figure{
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.hero ~ * .rel a:hover,.hero ~ * .shots figure:hover{
  box-shadow:var(--es-d2);transform:translateY(-2px)}

/* ---- the small round things ---------------------------------------------- */
.hero .ck,.hero ~ * .ck,.hero ~ * .step__n,
.hero ~ * .buy__perks li::before{border-radius:50%}
.hero .hero__tag,.hero .factpills li,.hero ~ * .flag,
.hero ~ * .bar__t,.hero ~ * .bar__f{border-radius:var(--es-pill)}
.hero .figures div{border-radius:var(--es-rb);box-shadow:var(--es-d1)}
.hero .floaty{border-radius:var(--es-rb);box-shadow:var(--es-d2)}

/* ---- pricing: a tab above the recommended card, dashed feature rows -------
   NOTHING here touches the alignment engineering. The fixed head, the fixed
   image box, the per-item min-heights and the featured card's margin-top all
   stand: the tab and the separators are absolutely positioned pseudo-
   elements and cost zero height, and no .buy__card carries a hover transform
   because [data-reveal].in settles these cards at transform:none. */
.hero ~ * .buy__card{overflow:visible}
.hero ~ * .buy__head{border-radius:22px 22px 0 0}
.hero ~ * .buy__flag{border-radius:var(--es-pill)}
.hero ~ * .buy__card:hover{box-shadow:var(--es-d2)}
.hero ~ * .buy__card--feature{
  background:linear-gradient(180deg,var(--panel-2),var(--panel) 44%);
  box-shadow:var(--es-da)}
.hero ~ * .buy__card--feature:hover{box-shadow:var(--es-dah)}
/* The tab has to be a tone DOWN from the amber head it rises out of, or
   the two read as one shape and the ribbon disappears. */
.hero ~ * .buy__card--feature .buy__head::before{content:'';position:absolute;
  left:50%;top:-13px;width:104px;height:14px;translate:-50% 0;
  border-radius:8px 8px 0 0;pointer-events:none;
  background:linear-gradient(180deg,var(--accent-deep),var(--accent))}
.hero ~ * .buy__perks li+li::after{content:'';position:absolute;left:0;right:0;
  top:-4px;border-top:1px dashed var(--es-rule);pointer-events:none}
.hero ~ * .buy__perks li::before{background:var(--accent-edge)}

/* ---- hero motif: CIRCULATE -----------------------------------------------
   Two counter-rotating arcs around the bottle, the outer one wide and thin,
   the inner one tighter and heavier, turning at different speeds so the pair
   never settles into a fixed figure. They are pseudo-elements of the hero
   card, never of the <img>, which is the preloaded LCP element and is not
   touched. The outer ring is 600px against a 520x460 card, so it reads
   OUTSIDE the card rather than disappearing inside it. 38s and 25s: this is
   a capsule taken daily for weeks, not an energy drink. Transform only. The
   keyframe names do not collide with esTaper, the taper-glow already in
   this sheet, which is left exactly as it is. */
/* .hero__card is written unscoped higher up this sheet, and every page of
   the site carries that rule in its inlined critical block - but the MARKUP
   exists on index.html alone (checked: class="hero__card" appears in one
   file). The ".hero " prefix is belt and braces so a future page that reuses
   the class cannot inherit a motif meant for the money page. */
.hero .hero__card::before,.hero .hero__card::after{content:'';position:absolute;
  top:50%;left:50%;aspect-ratio:1;border-radius:50%;border-style:solid;
  border-color:transparent;translate:-50% -50%;pointer-events:none;z-index:-1}
.hero .hero__card::before{width:min(600px,118%);border-width:1.5px;
  border-top-color:rgba(242,163,56,.46);border-right-color:rgba(242,163,56,.13);
  animation:esCircWide 38s linear infinite}
.hero .hero__card::after{width:min(452px,90%);border-width:2.5px;
  border-bottom-color:rgba(242,163,56,.30);border-left-color:rgba(224,104,58,.26);
  animation:esCircTight 25s linear infinite reverse}
@keyframes esCircWide{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes esCircTight{from{transform:rotate(0)}to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  .hero .hero__card::before,.hero .hero__card::after{animation:none}
  .hero .btn:hover,.hero ~ * .btn:hover,
  .hero ~ * .rel a:hover,.hero ~ * .shots figure:hover{transform: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 .disc{font-size:16px}
footer .findex h4{font-size:15px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 39 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 (247,242,233), 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(247,242,233,.06), 0 6px 18px rgba(247,242,233,.07);
  --lift:0 2px 6px rgba(247,242,233,.09), 0 16px 34px rgba(247,242,233,.14);
}

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