/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Sora Fallback";src:local("Arial");font-weight:400;size-adjust:114.54%;ascent-override:84.68%;descent-override:25.32%;line-gap-override:0.00%}
@font-face{font-family:"Sora Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:108.03%;ascent-override:89.79%;descent-override:26.84%;line-gap-override:0.00%}
@font-face{font-family:"Inter Tight Fallback";src:local("Arial");font-weight:400;size-adjust:96.95%;ascent-override:99.92%;descent-override:24.88%;line-gap-override:0.00%}
@font-face{font-family:"Inter Tight Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:95.83%;ascent-override:101.09%;descent-override:25.17%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ===================================================================
   ALPHAERECDAILY.COM  —  official Alpha Erec website
   ------------------------------------------------------------------
   Component system : taken from sugarresiet.com (section rhythm, card
                      treatment, answer box, pricing ladder, split rows)
   Colour           : taken from the Alpha Erec bottle, NOT from the
                      reference. Black body, hexagon texture, signal-red
                      label bands, white type. Ground is a cool grey-white.
   Type             : Sora (display) + Inter Tight (body)
   Chrome           : logo left / menu right with a boxed phone block,
                      a hairline scroll-progress line under the bar,
                      6px soft-rectangle radius, hairline cards with no
                      shadow, a light diagonal split behind the hero, and
                      fade-up on section entry only. The hero never
                      animates: the H1 is the LCP element.
   ------------------------------------------------------------------
   NOTE ON TOKEN NAMES: --serif holds the display face and --sans the body
   face. Sora is not a serif. The names are kept because the generators and
   the validator across this estate expect them, and a stable contract is
   worth more than an accurate adjective.
=================================================================== */

:root{
  /* ground — cool grey-white */
  --paper:#F5F6F8;
  --paper-tint:#ECEEF2;
  --paper-card:#FFFFFF;
  --paper-deep:#E3E7ED;

  /* ink */
  --ink:#14161A;
  --ink-soft:#2A2E35;
  --muted:#5B626C;
  --faint:#666c74;
  --line:#DCE0E7;
  --line-soft:#EAEDF1;

  /* accent — the label band */
  --accent:#D81E28;
  --accent-deep:#8E1119;
  --accent-dark:#5E0A10;
  --accent-tint:#FDEDED;
  --accent-line:#F1C6C8;

  /* secondary ramp — the money-back seal */
  --gold:#C9A24B;
  --gold-deep:#866721;
  --gold-soft:#FBF4E3;
  --gold-line:#E8D5A8;

  /* type */
  --serif:'Sora','Sora Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Inter Tight','Inter Tight Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  /* metrics */
  --wrap:1150px;
  --prose:68ch;
  --measure:760px;
  --measure-wide:980px;
  --radius:6px;
  --radius-lg:10px;
  --radius-pill:999px;
  --shadow:0 14px 34px rgba(20,22,26,.10);
  --shadow-soft:0 6px 16px rgba(20,22,26,.06);
  --navh:66px;
}

*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;scroll-padding-top:104px;overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,table{max-width:100%}
img{height:auto;display:block}

h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.18;
  margin:0 0 .52em;color:var(--ink);overflow-wrap:break-word}
h1{font-size:clamp(2rem,4.4vw,2.9rem);letter-spacing:-.022em}
h2{font-size:clamp(1.42rem,2.7vw,1.95rem);letter-spacing:-.016em}
h3{font-size:1.12rem;letter-spacing:-.008em}
h4{font-size:.98rem;letter-spacing:-.004em}
p{margin:0 0 1.15em}
a{color:inherit;text-decoration:none}
b,strong{font-weight:700}
ul,ol{margin:0 0 1.2em;padding-left:1.25em}
li{margin-bottom:.5em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:12px 18px;z-index:2000}
.skip:focus{left:8px;top:8px}

/* ---------- utility bar ---------- */
.util{background:var(--ink);color:#C2C7CE;font-size:0.9062rem;letter-spacing:.012em}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;
  padding-top:8px;padding-bottom:8px}
.util__item b{color:#fff;font-weight:600}
.util__tel{margin-left:auto;color:#fff;font-weight:700;white-space:nowrap}
.util__tel:hover{color:var(--accent)}

/* ---------- nav: logo left, menu right, boxed phone block, progress line ---------- */
.nav{position:sticky;top:0;z-index:900;background:rgba(245,246,248,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:nowrap;height:var(--navh)}
.brand{display:inline-flex;align-items:center;gap:0;flex:none;white-space:nowrap;
  font-family:var(--serif);font-weight:800;font-size:1.16rem;letter-spacing:-.024em;
  color:var(--ink)}
.brand svg{width:30px;height:30px;margin-right:9px;flex:none}
.brand span{color:var(--accent)}
.menu{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0;
  flex-wrap:nowrap}
.menu a{font-size:.875rem;font-weight:600;color:var(--ink-soft);white-space:nowrap;
  padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--accent-deep);border-bottom-color:var(--accent)}
.nav__cta{display:flex;align-items:center;gap:12px;flex:none}
.nav__tel{display:flex;flex-direction:column;line-height:1.16;flex:none;
  border:1px solid var(--line);border-radius:var(--radius);padding:7px 13px;
  background:var(--paper-card);white-space:nowrap}
.nav__tel small{font-size:.62rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}
.nav__tel b{font-size:.86rem;font-weight:700;color:var(--ink)}
.nav__tel:hover b{color:var(--accent-deep)}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--accent);transition:width .1s linear}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);
  width:42px;height:38px;cursor:pointer;padding:0;align-items:center;justify-content:center;
  flex-direction:column;gap:4px}
.burger span{display:block;width:18px;height:2px;background:var(--ink)}

@media(max-width:1420px){.menu{gap:16px}.menu a{font-size:.85rem}}
@media(max-width:1310px){.menu{gap:13px}.menu a{font-size:.825rem}}
@media(max-width:1240px){.nav__tel{display:none}}
@media(max-width:1080px){
  .menu{position:absolute;top:100%;left:0;right:0;background:var(--paper-card);
    flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);display:none;max-height:74vh;overflow:auto;
    box-shadow:var(--shadow)}
  .menu.open{display:flex}
  .menu li{border-bottom:1px solid var(--line-soft)}
  .menu a{display:block;padding:14px 22px;border-bottom:none}
  .burger{display:inline-flex}
  .nav{position:sticky}
}
/* The row at this width holds a wordmark, an Order button and a burger, which
   measures ~364px against a 390px phone. The CTA is the last thing to shed and
   it only goes below 360px, because a sticky order button at y=0 is worth more
   on a phone than anywhere else on the page. */
@media(max-width:359px){.nav__cta .btn{display:none}}
@media(max-width:430px){.nav__cta .btn{padding:11px 15px;font-size:.85rem}
  .brand{font-size:1.04rem}.brand svg{width:26px;height:26px;margin-right:7px}}

/* ---------- buttons: 6px soft rectangle ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:.93rem;letter-spacing:.006em;
  padding:13px 24px;border:1px solid transparent;border-radius:var(--radius);
  cursor:pointer;transition:background .16s,border-color .16s,color .16s;
  text-align:center;line-height:1.3}
.btn--cta{background:var(--accent);color:#fff}
.btn--cta:hover{background:var(--accent-deep);color:#fff}
.btn--ghost{background:var(--paper-card);border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-deep)}
.btn--gold{background:var(--gold);color:#2C2107}
.btn--gold:hover{background:var(--gold-deep);color:#fff}
.btn--lg{padding:16px 30px;font-size:1rem}
.btn--block{width:100%}

/* ---------- hero: light, diagonal split. NOTHING here animates. ---------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible;padding:46px 0 58px;background:var(--paper)}
.hero::before{content:'';position:absolute;inset:0;z-index:0;background:var(--paper-tint);
  clip-path:polygon(46% 0,100% 0,100% 100%,26% 100%)}
.hero::after{content:'';position:absolute;right:-6%;top:-12%;width:52%;height:124%;z-index:0;
  background:
    repeating-linear-gradient(60deg,transparent 0 26px,rgba(216,30,40,.055) 26px 27px),
    repeating-linear-gradient(-60deg,transparent 0 26px,rgba(216,30,40,.055) 26px 27px);
  pointer-events:none}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:48px;align-items:start}
.hero__copy{min-width:0}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--paper-card);
  border:1px solid var(--line);border-radius:var(--radius);padding:7px 15px;
  font-size:0.8438rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:18px}
.hero h1{margin-bottom:.42em}
.hero h1 span{color:var(--accent-deep)}
.hero h1 small{display:block;font-size:.44em;font-weight:600;letter-spacing:-.01em;
  color:var(--muted);margin-top:.34em;font-family:var(--sans)}

.answer{background:var(--paper-card);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 22px;margin:0 0 20px}
.answer .qtag{display:block;font-size:0.8438rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:8px}
.answer p{margin:0;color:var(--muted);font-size:1.062rem}
.answer p b{color:var(--ink)}
/* In the hero the answer is not a card: the approved layout runs it as two
   flowing paragraphs straight under the H1. The wrapper stays -- it is the
   speakable selector and the AEO block -- only the card styling and the
   label come off. */
.hero .answer{background:none;border:0;box-shadow:none;padding:0;margin:18px 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)}
.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.95rem;color:var(--muted)}
.hero__rating b{color:var(--ink)}
.qa{background:var(--paper-card);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 22px;margin:0 0 26px}
.qa .qtag{display:block;font-size:0.8438rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:8px}
.qa p{margin:0;color:var(--muted);font-size:1.062rem}
.qa p b{color:var(--ink)}

.hero__sub{font-size:1.005rem;color:var(--muted);margin-bottom:18px}
.ticks{list-style:none;margin:0 0 22px;padding:0}
.ticks li{display:flex;gap:11px;align-items:flex-start;margin-bottom:9px;font-size:1.062rem}
.ck{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;margin-top:3px;border-radius:3px;background:var(--accent);
  color:#fff;font-size:.62rem;font-weight:800}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 20px;padding:0}
.factpills li{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:7px 14px;font-size:0.9062rem;color:var(--muted)}
.factpills li b{color:var(--ink)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 22px}
.figures div{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 8px;text-align:center}
.figures b{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--accent-deep);
  line-height:1.15}
.figures span{font-size:0.9062rem;font-weight:700;color:var(--faint);text-transform:uppercase;
  letter-spacing:.06em}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.pay{display:flex;align-items:center;gap:13px;flex-wrap:wrap;font-size:0.9062rem;color:var(--faint)}
.pay img{border-radius:3px}

.hero__media{min-width:0;display:flex;align-items:center;justify-content:center}
.hero__stick{position:relative;width:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.hero__card{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:26px;width:100%;display:flex;
  align-items:center;justify-content:center}
.hero__card img{width:auto;max-width:100%;margin:0 auto}
.hero__tag{margin-top:14px;display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;border-radius:var(--radius);padding:8px 15px;
  font-size:0.9062rem;font-weight:700}
.hero__tag span{color:var(--accent);font-weight:800}
.floaty{position:absolute;z-index:2;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 14px;font-family:var(--serif);font-weight:700;
  font-size:.95rem;color:var(--accent-deep);line-height:1.2}
.floaty small{display:block;font-family:var(--sans);font-size:0.9062rem;font-weight:600;
  color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.floaty--tl{left:-6px;top:10px}
.floaty--br{right:-6px;bottom:52px}

@media(min-width:1025px){
  .hero__media{position:sticky;top:calc(var(--navh) + 26px);align-self:start;
    height:calc(100vh - var(--navh) - 26px);min-height:360px}
  .hero__stick{max-height:calc(100vh - 120px)}
  .hero__stick img{max-height:calc(100vh - 320px);min-height:180px;width:auto;
    object-fit:contain}
}
@media(max-width:920px){
  .hero{padding:22px 0 38px}
  .answer{padding:17px 18px}
  .answer p{font-size:1.062rem;line-height:1.62}
  /* The hero answer keeps its own size (.hero .answer p wins on specificity),
     but at 1.06rem the two paragraphs measured 316px on a 390x844 phone and
     pushed the CTA to y=1152, past the ~1100 target in hero.md. 1rem brings
     it back without shrinking it to the card size. */
  .hero .answer p{font-size:1.062rem;line-height:1.62}
  .hero .answer{margin-top:12px}
  .hero__cta{margin-bottom:14px;gap:10px}
  .hero::before{clip-path:polygon(0 66%,100% 48%,100% 100%,0 100%)}
  .hero::after{display:none}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .hero__copy{display:contents}
  .hero .pill{order:1;margin-bottom:10px}
  .hero h1{order:2}
  .hero .answer{order:4}
  .hero__media{order:3;margin:4px 0 18px}
  .hero__cta{order:6}
  .hero__rating{order:6}
  .hero__sub{order:7}
  .ticks{order:5}
  .factpills{order:9}
  .figures{order:10}
  .pay{order:8}
  .hero__card{padding:14px}
  /* This bottle is 300x547, a 1.82:1 portrait. A wider cap paints a 420px-tall
     image and pushes the CTA past the second screen on a phone, so the cap is
     set from the aspect ratio rather than copied from a squarer product. */
  .hero__card img{max-width:min(185px,100%)}
  .hero__tag{margin-top:10px;padding:6px 12px;font-size:0.9062rem}
  .floaty{display:none}
}

/* The utility bar carries five items. On a phone they wrap to three lines and
   eat a tenth of the screen before the H1, so it sheds down to the three that
   matter: who is selling, the guarantee and the telephone number. */
@media(max-width:700px){
  .util__row{gap:4px 16px}
  .util__item:nth-of-type(2),.util__item:nth-of-type(3){display:none}
}

/* ---------- trust row ---------- */
.trust{background:var(--paper-card);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.trust__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 30px;padding-top:18px;padding-bottom:18px}
.trust__item{display:inline-flex;align-items:center;gap:9px;font-size:0.9062rem;
  font-weight:600;color:var(--muted)}
.trust__item img{flex:none}

/* ---------- sections ---------- */
.sec{padding:66px 0}
.sec--tint{background:var(--paper-tint)}
.sec--card{background:var(--paper-card);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.sec--dark{background:var(--ink);color:#C8CDD4}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark .eyebrow{color:var(--accent)}
.sec--dark .lead{color:#AEB5BE}
.sec--center{text-align:center}
.sec--center .sec__head{margin-left:auto;margin-right:auto}
.sec__head{max-width:var(--measure);margin:0 auto 34px}
.sec--center .sec__head p{margin-left:auto;margin-right:auto}
.eyebrow{display:inline-block;font-size:0.8438rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:.75em}
.lead{font-size:1.06rem;color:var(--muted)}
.note{font-size:0.9062rem;color:var(--faint)}

/* one measure for single-column content, full wrap for components (pitfall 40) */
@media(min-width:1061px){
  .sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,.sec>.wrap>ul,.sec>.wrap>ol,
  .sec>.wrap>.sec__head,.sec>.wrap>.callout,.sec>.wrap>.alert,.sec>.wrap>.flag,
  .sec>.wrap>.byline,.sec>.wrap>.refs,.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}
}


/* ---- hero motif -- pulse-ring ---------------------------------------- */
.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:radial-gradient(100% 76% at 72% 14%,#f0cfd3,#f5f6f8 62%,#f5f6f8)}.hero__media::before{content:'';position:absolute;left:50%;top:0;width:152%;aspect-ratio:1;translate:-50% -25%;border-radius:50%;border:2px solid rgba(216,30,40,0.50);animation:btPulse 3.4s cubic-bezier(.4,0,.2,1) infinite;z-index:1}@keyframes btPulse{0%{scale:.86;opacity:.85}70%{scale:1.22;opacity:0}100%{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.
   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 --- */

/*!SITE-HOME-CRIT-START*/
/* Home-page geometry. class="hero" is on index.html and on no other page of
   this site, so body:has(.hero) and .hero-prefixed selectors cannot reach one.
   This sits above the critical marker because it is inlined into every page at
   build time; a restamp alone would leave the old copy inlined.

   Reading order on desktop: eyebrow, headline, quick answer, BUTTONS, payment
   line, then the evidence. Measured at 1440x900 the hero CTA started at y=877,
   so 23px of a 55px button cleared the fold. The phone order below 921px is
   composed separately with display:contents and is untouched here. */
@media(min-width:921px){
  .hero .hero__copy{display:flex;flex-direction:column;align-items:stretch}
  .hero .hero__copy>.pill{order:1;align-self:flex-start}
  .hero .hero__copy>h1{order:2}
  .hero .hero__copy>.answer{order:3;margin-top:0}
  .hero .hero__copy>.hero__cta{order:4;margin:22px 0 14px}
  .hero .hero__copy>.pay{order:5;margin-bottom:26px}
  .hero .hero__copy>.ticks{order:6}
  .hero .hero__copy>.factpills{order:7}
  .hero .hero__copy>.figures{order:8;margin-bottom:0}
}
/* Pack ladder: head room for the full-width ribbon bar, dashed feature rows,
   and the featured card raised with margin-top -- never transform, which the
   reveal pass resets to none. All three cards take the same head room and the
   same row borders, so each button keeps its offset inside its own card. */
body:has(.hero) .pricing .tier{padding-top:54px;overflow:hidden}
body:has(.hero) .pricing .tier__flag{top:0;left:0;right:0;width:auto;
  transform:none;border-radius:0;padding:9px 14px;text-align:center}
body:has(.hero) .pricing .tier__rows li{padding-bottom:7px;
  border-bottom:1px dashed var(--line)}
body:has(.hero) .pricing .tier__rows li:last-child{border-bottom:0}
/* The lift is margin-top with a matching margin-bottom, not a bare negative
   margin. The row is a stretch grid, so the card's MARGIN box fills the track:
   -16/+16 sums to zero, the border box keeps the row's height and simply sits
   16px higher. A bare -16px would have stretched the card 16px taller, the
   auto margin above its button would have eaten the difference, and its button
   offset inside its own card would have read 613 against its neighbours' 598.
   Measured both ways before choosing this one. */
@media(min-width:981px){
  body:has(.hero) .pricing .tier--feature{margin-top:0;margin-bottom:0}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* ---------- grids and cards: hairline border, no shadow ---------- */
.grid{display:grid;gap:18px}
.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))}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.g4,.g3,.g2{grid-template-columns:minmax(0,1fr)}}

.card{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 22px}
.card h3{margin-bottom:.45em}
.card p{color:var(--muted);font-size:1.062rem;margin-bottom:.8em}
.card p:last-child{margin-bottom:0}
.sec--tint .card{background:var(--paper-card)}
.sec--dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15)}
.sec--dark .card p{color:#AEB5BE}
.idx{display:inline-flex;align-items:center;justify-content:center;width:31px;height:31px;
  border-radius:var(--radius);background:var(--ink);color:#fff;font-family:var(--serif);
  font-weight:800;font-size:.9rem;margin-bottom:12px}
.idx--accent{background:var(--accent)}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;
  align-items:center}
.split--rev .split__media{order:-1}
@media(max-width:920px){.split{grid-template-columns:minmax(0,1fr);gap:26px}
  .split--rev .split__media{order:0}}
.split__media img{border:1px solid var(--line);border-radius:var(--radius);
  margin:0 auto;background:var(--paper-card)}
.split__media figcaption{font-size:0.9062rem;color:var(--faint);margin-top:10px}
.split p{color:var(--muted)}

/* ---------- shots: every figure carries copy ---------- */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.shots--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.shots,.shots--wide{grid-template-columns:minmax(0,1fr)}}
.shots figure{margin:0;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.shots figure img{width:100%;height:auto}
.shots figcaption{padding:16px 18px;font-size:0.9062rem;color:var(--muted)}
.shots figcaption b{display:block;color:var(--ink);font-family:var(--serif);
  font-size:.96rem;margin-bottom:5px}
.shots figcaption p{margin:0;font-size:0.9062rem}

/* ---------- chips, lists ---------- */
.chips{list-style:none;margin:0 0 1.2em;padding:0}
.chips li{display:flex;gap:11px;align-items:flex-start;margin-bottom:10px;font-size:0.9688rem;
  color:var(--muted)}
.chips li b{color:var(--ink)}
.forlist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:780px){.forlist{grid-template-columns:minmax(0,1fr)}}
.forlist li{background:var(--paper-card);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 17px;font-size:1.062rem;color:var(--muted);margin:0}
.forlist li b{display:block;color:var(--ink);margin-bottom:3px;font-size:1.062rem}
.forlist--no li{border-left-color:var(--faint)}

/* ---------- callouts ---------- */
.callout{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;font-size:.92rem;color:var(--muted)}
.callout b{color:var(--ink)}
.callout a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
.flag{background:var(--accent-tint);border:1px solid var(--accent-line);
  border-radius:var(--radius);padding:19px 22px;font-size:.9rem;color:#6B2A2E}
.flag b{color:var(--accent-dark)}
.alert{background:var(--gold-soft);border:1px solid var(--gold-line);
  border-radius:var(--radius);padding:19px 22px;font-size:.9rem;color:#6A521C}
.alert b{color:var(--gold-deep)}
.alert a,.flag a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.pullquote{margin:0 0 1.3em;padding:18px 0 18px 22px;border-left:3px solid var(--accent);
  font-family:var(--serif);font-size:1.1rem;line-height:1.5;color:var(--ink)}
.pullquote p{margin:0 0 .4em}
.pullquote cite{font-family:var(--sans);font-style:normal;font-size:0.8438rem;
  font-weight:600;color:var(--faint)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper-card);margin:0 0 1.4em}
table.dtable{border-collapse:collapse;width:100%;font-size:1rem;min-width:520px}
table.dtable caption{text-align:left;padding:14px 18px 0;font-size:1rem;color:var(--faint)}
table.dtable th,table.dtable td{padding:11px 16px;text-align:left;
  border-bottom:1px solid var(--line-soft);vertical-align:top}
table.dtable thead th{background:var(--paper-tint);font-family:var(--serif);
  font-size:0.9062rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--line)}
table.dtable tbody tr:last-child td{border-bottom:none}
table.dtable td b{color:var(--ink)}
.yes{color:var(--accent-deep);font-weight:700}
.no{color:var(--faint);font-weight:700}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0 0 1.4em;padding:0;counter-reset:s}
.steps li{position:relative;counter-increment:s;background:var(--paper-card);
  border:1px solid var(--line);border-radius:var(--radius);padding:19px 22px 19px 62px;
  margin-bottom:12px;font-size:1.062rem;color:var(--muted)}
.steps li::before{content:counter(s);position:absolute;left:20px;top:18px;
  width:28px;height:28px;border-radius:var(--radius);background:var(--accent);color:#fff;
  font-family:var(--serif);font-weight:800;font-size:1.062rem;display:flex;
  align-items:center;justify-content:center}
.steps li b{display:block;color:var(--ink);font-family:var(--serif);font-size:1.062rem;
  margin-bottom:3px}

/* ---------- ingredient rows ---------- */
.ing{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin-bottom:16px}
.ing__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:10px}
.ing__top h3{margin:0}
.ing__dose{background:var(--accent-tint);border:1px solid var(--accent-line);
  border-radius:var(--radius);padding:3px 10px;font-size:0.8438rem;font-weight:700;
  color:var(--accent-dark)}
.ing__lat{font-size:0.9062rem;color:var(--faint);font-style:italic}
.ing p{margin:0;color:var(--muted);font-size:1.062rem}
.ing p a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
.ingthumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-bottom:26px}
@media(max-width:700px){.ingthumbs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ingthumbs div{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 12px;text-align:center;font-size:0.9062rem;
  font-weight:600;color:var(--ink)}
.ingthumbs span{display:block;font-size:0.9062rem;font-weight:600;color:var(--faint);
  margin-top:3px}

/* ---------- supplement facts panel ---------- */
.facts{background:var(--paper-card);border:2px solid var(--ink);border-radius:var(--radius);
  padding:20px 22px;max-width:520px;margin:0 auto 1.4em}
.facts h3{font-size:1.3rem;border-bottom:6px solid var(--ink);padding-bottom:6px;
  margin-bottom:8px}
.facttab{width:100%;border-collapse:collapse;font-size:.86rem}
.facttab th,.facttab td{padding:7px 0;border-bottom:1px solid var(--line);text-align:left}
.facttab td:last-child,.facttab th:last-child{text-align:right}
.facttab tr:last-child td{border-bottom:none}

/* ---------- benefits ---------- */
.benicons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:700px){.benicons{grid-template-columns:minmax(0,1fr)}}
.benicons div{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 20px}
.benicons h3{font-size:1.02rem}
.benicons p{font-size:1.062rem;color:var(--muted);margin:0}

/* ---------- why cards ---------- */
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:980px){.whygrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.whygrid{grid-template-columns:minmax(0,1fr)}}
.whycard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 22px}
.whycard h3{font-size:1.04rem}
.whycard p{font-size:1.062rem;color:var(--muted);margin:0}

/* ---------- stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;text-align:center}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stats div{padding:6px}
.stats b{display:block;font-family:var(--serif);font-size:1.95rem;color:#fff;line-height:1.1}
.stats span{font-size:0.9062rem;font-weight:700;color:#AEB5BE;text-transform:uppercase;
  letter-spacing:.07em}
.promo{background:var(--accent);color:#fff;padding:28px 0}
.promo__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px}
.promo p{margin:0;font-family:var(--serif);font-weight:700;font-size:1.12rem}
.promo small{display:block;font-family:var(--sans);font-weight:500;font-size:0.9062rem;
  opacity:.88;margin-top:3px}
.promo .btn{background:#fff;color:var(--accent-deep);border-color:#fff}
.promo .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- badge wall ---------- */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:900px){.badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.badgewall{grid-template-columns:minmax(0,1fr)}}
.badgewall figure{margin:0;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;text-align:center}
.badgewall img{margin:0 auto 12px}
.badgewall figcaption{font-size:.85rem;color:var(--muted)}
.badgewall figcaption b{display:block;color:var(--ink);font-family:var(--serif);
  font-size:.95rem;margin-bottom:4px}

/* ---------- pricing ---------- */
.pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  align-items:stretch}
.tier{position:relative;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px 22px 26px;text-align:center;display:flex;
  flex-direction:column}
.tier img{margin:0 auto 14px}
.tier h3{margin-bottom:.25em}
.tier--feature{border:2px solid var(--accent)}
.tier__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:0.8438rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 15px;border-radius:var(--radius);white-space:nowrap}
.tier__supply{font-size:0.8438rem;color:var(--faint);margin-bottom:.9em}
.tier__price{font-family:var(--serif);font-size:2.05rem;font-weight:800;color:var(--ink);
  line-height:1.1}
.tier__price small{display:block;font-family:var(--sans);font-size:0.9062rem;font-weight:600;
  color:var(--faint);text-transform:uppercase;letter-spacing:.07em;margin-top:2px}
.tier__was{font-size:0.9062rem;color:var(--faint);text-decoration:line-through;margin:.5em 0 .2em}
.tier__tot{font-size:.96rem;font-weight:700;color:var(--ink);margin-bottom:1em}
.tier__save{display:inline-block;background:var(--gold-soft);border:1px solid var(--gold-line);
  border-radius:var(--radius);padding:2px 9px;font-size:0.8438rem;color:var(--gold-deep)}
.tier__rows{list-style:none;margin:0 0 1.2em;padding:0;text-align:left;font-size:.86rem;
  color:var(--muted)}
.tier__rows li{margin-bottom:6px;padding-left:18px;position:relative}
.tier__rows li::before{content:'\2713';position:absolute;left:0;color:var(--accent);
  font-weight:800;font-size:1.062rem}
.tier .btn{margin-top:auto}
.tier__ship{font-size:0.9062rem;color:var(--faint);margin:.8em 0 0}
@media(max-width:980px){
  .pricing{grid-template-columns:minmax(0,1fr);max-width:420px;margin-inline:auto}
  .pricing .tier:nth-child(1){order:3}
  .pricing .tier:nth-child(2){order:1}
  .pricing .tier:nth-child(3){order:2}
  .tier--feature{transform:none}
}
.guarantee{display:grid;grid-template-columns:150px minmax(0,1fr);gap:26px;
  align-items:center;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px}
@media(max-width:640px){.guarantee{grid-template-columns:minmax(0,1fr);text-align:center}
  .guarantee img{margin:0 auto}}
.guarantee p{margin:0;color:var(--muted);font-size:1.062rem}
.guarantee h3{margin-bottom:.35em}

/* ---------- reviews ---------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.tgrid{grid-template-columns:minmax(0,1fr)}}
.tcard{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px}
.tcard p{font-size:1.062rem;color:var(--muted)}
.tlife{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:820px){.tlife{grid-template-columns:minmax(0,1fr)}}
.tlife figure{margin:0;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.tlife img{width:100%}
.tlife figcaption{padding:15px 17px;font-size:0.9062rem;color:var(--muted)}
.tlife figcaption b{display:block;color:var(--ink);font-family:var(--serif);margin-bottom:4px}
.stars{color:var(--accent);letter-spacing:.06em}
.scorebox{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center;
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;margin-bottom:26px}
@media(max-width:700px){.scorebox{grid-template-columns:minmax(0,1fr)}}
.scorebox__n{font-family:var(--serif);font-size:3rem;font-weight:800;line-height:1;
  color:var(--ink);text-align:center}
.scorebox__n small{display:block;font-family:var(--sans);font-size:0.9062rem;font-weight:600;
  color:var(--faint);margin-top:6px}
.bar{display:flex;align-items:center;gap:10px;font-size:0.9062rem;color:var(--muted);
  margin-bottom:6px}
.bar i{flex:1;height:8px;background:var(--paper-tint);border-radius:var(--radius);
  overflow:hidden;font-style:normal}
.bar i b{display:block;height:100%;background:var(--accent)}
.dist{font-size:.85rem;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{margin:0 0 1.4em}
.faq details{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:0;margin-bottom:10px}
.faq summary{cursor:pointer;padding:16px 20px;font-family:var(--serif);font-weight:600;
  font-size:1rem;color:var(--ink);list-style:none;display:flex;justify-content:space-between;
  gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--accent);font-weight:800;flex:none;font-size:1.2rem;
  line-height:1.2}
.faq details[open] summary::after{content:'\2212'}
.faq .faq__a{padding:0 20px 16px;font-size:.92rem;color:var(--muted)}
.faq .faq__a p:last-child{margin-bottom:0}
.faq .faq__a a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}

/* ---------- references and byline ---------- */
.refs{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;font-size:.845rem;color:var(--muted)}
.refs ol{margin:0;padding-left:1.2em}
.refs li{margin-bottom:.7em}
.refs a{color:var(--accent-deep);word-break:break-word;text-decoration:underline;
  text-underline-offset:3px}
.byline{display:grid;grid-template-columns:70px minmax(0,1fr);gap:18px;
  background:var(--paper-card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.4em}
.byline img{border-radius:var(--radius)}
.byline b{font-family:var(--serif);font-size:1rem}
.byline p{margin:.4em 0 0;font-size:0.9062rem;color:var(--muted)}
.byline a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){.byline{grid-template-columns:minmax(0,1fr)}}

/* ---------- forms ---------- */
.form{display:grid;gap:14px}
.formcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px}
.formcard h3{margin-bottom:.3em}
.formcard>p{color:var(--muted);font-size:1.062rem}
.form label{display:block;font-size:0.9062rem;font-weight:700;color:var(--ink);margin-bottom:5px}
.form input,.form select,.form textarea{width:100%;font-family:var(--sans);font-size:1rem;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);color:var(--ink)}
.form textarea{min-height:120px;resize:vertical}
.form .row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:600px){.form .row2{grid-template-columns:minmax(0,1fr)}}

/* ---------- final CTA ---------- */
.final{background:var(--ink);color:#C8CDD4;border-radius:var(--radius);padding:38px 34px;
  text-align:center}
.final h2{color:#fff}
.final p{color:#AEB5BE}
.final--media{display:grid;grid-template-columns:260px minmax(0,1fr);gap:34px;
  text-align:left;align-items:center}
@media(max-width:780px){.final--media{grid-template-columns:minmax(0,1fr);text-align:center}}
.final__img img{width:100%;height:auto;max-width:260px;margin:0 auto;
  border-radius:var(--radius);background:#fff;padding:12px}
.final__price{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:#fff}

/* ---------- related ---------- */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
@media(max-width:900px){.rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.rel{grid-template-columns:minmax(0,1fr)}}
.rel a{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 21px;display:block}
.rel a:hover{border-color:var(--accent)}
.rel b{display:block;font-family:var(--serif);font-size:1rem;margin-bottom:5px;color:var(--ink)}
.rel span{font-size:.87rem;color:var(--muted)}

/* ---------- crumbs and meta ---------- */
.crumbs{font-size:0.9062rem;color:var(--faint);padding-top:16px;margin:0}
.crumbs a{color:var(--accent-deep)}
.meta{font-size:0.9062rem;color:var(--faint)}
.legal h2{margin-top:1.6em}
.legal h3{margin-top:1.3em}

/* ---------- footer: 3 columns, oversized wordmark, NAP card bottom-right ---------- */
footer{background:var(--ink);color:#A9B0B9;padding:56px 0 30px;font-size:.89rem}
footer a{color:#D3D8DE}
footer a:hover{color:var(--accent)}
.fgrid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:38px}
@media(max-width:900px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
@media(max-width:600px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.fbrand{font-family:var(--serif);font-weight:800;font-size:2.5rem;letter-spacing:-.035em;
  line-height:1;color:#fff;margin-bottom:14px}
.fbrand span{color:var(--accent)}
footer h4{color:#fff;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:14px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:8px;font-size:.87rem}
.fbadges{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.fbadges img{background:#fff;border-radius:var(--radius);padding:3px}
.fnapwrap{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;
  margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12)}
@media(max-width:900px){.fnapwrap{grid-template-columns:minmax(0,1fr);gap:24px}}
.fnap{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius);padding:20px 22px;font-size:0.9062rem;line-height:1.7}
.fnap b{color:#fff}
.flinks{font-size:.84rem;line-height:2}
.fpay{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px;
  font-size:0.9062rem;color:#8B939D}
.fpay img{background:#fff;border-radius:3px;padding:3px}
.disc{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:0.9062rem;color:#8B939D;line-height:1.7}
.disc b{color:#C8CDD4}
.disc p{margin-bottom:.9em}
.disc .copy{margin-top:16px;color:#6F777F}

/* ---------- sticky buy bar ---------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--ink);
  color:#fff;border-top:2px solid var(--accent);transform:translateY(110%);
  transition:transform .25s ease}
.buybar.show{transform:translateY(0)}
.buybar__in{max-width:var(--wrap);margin:0 auto;padding:11px 22px;display:flex;
  align-items:center;justify-content:space-between;gap:16px}
.buybar__t{font-size:0.9062rem;color:#AEB5BE;min-width:0}
.buybar__t b{display:block;color:#fff;font-size:.93rem}
.buybar .from{color:var(--accent);font-weight:700}
@media(max-width:620px){.buybar__t{font-size:0.9062rem}.buybar__t b{font-size:0.9062rem}
  .buybar__in{padding:9px 14px}.buybar .btn{padding:11px 16px;font-size:.85rem}}

.totop{position:fixed;right:18px;bottom:78px;z-index:940;width:42px;height:42px;
  border-radius:var(--radius);background:var(--paper-card);border:1px solid var(--line);
  color:var(--ink);display:none;align-items:center;justify-content:center;cursor:pointer;
  font-size:1.1rem}
.totop.show{display:flex}

/* ---------- motion: fade-up on section entry only ---------- */
[data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .52s ease,transform .52s ease}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .buybar{transition:none}
}

/* ===================================================================
   BLOG
=================================================================== */
.article{max-width:var(--measure-wide);margin:0 auto}
.article h2{scroll-margin-top:110px;margin-top:1.8em}
.article h3{margin-top:1.4em}
.article p,.article ul,.article ol{color:var(--ink-soft)}
.article figure{margin:1.8em 0;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.article figure img{width:100%;height:auto}
.article figcaption{padding:14px 18px;font-size:0.9062rem;color:var(--faint)}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}
.postmeta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:0.9062rem;color:var(--faint);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 0;margin:0 0 26px}
.postmeta b{color:var(--ink)}
.toc{background:var(--paper-tint);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px;margin:0 0 28px}
.toc b{display:block;font-family:var(--serif);font-size:.95rem;margin-bottom:8px}
.toc ol{margin:0;padding-left:1.2em;font-size:.9rem}
.toc li{margin-bottom:4px}
.toc a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
.keypoints{background:var(--accent-tint);border:1px solid var(--accent-line);
  border-left:4px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:0 0 28px}
.keypoints>b{display:block;font-family:var(--serif);font-size:0.8438rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-dark);margin-bottom:10px}
.keypoints ul{margin:0;padding-left:1.15em;font-size:.92rem;color:#5E3034}
.keypoints li b{color:var(--accent-dark)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:900px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:minmax(0,1fr)}}
.posts article{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.posts img{width:100%}
.posts .pbody{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.posts h3{font-size:1.02rem;margin-bottom:.4em}
.posts h3 a:hover{color:var(--accent-deep)}
.posts p{font-size:1.062rem;color:var(--muted);margin-bottom:.9em}
.posts .pmeta{margin-top:auto;font-size:0.9062rem;color:var(--faint)}
.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.55rem;line-height:1.22;margin-top:0}
@media(max-width:700px){.article .final--media{grid-template-columns:minmax(0,1fr)}}

/* ---------- contrast: dark blocks keep their light text ------------------- */
/* The dark CTA also appears inside .article on blog posts, where
   `.article p{color:var(--ink-soft)}` -- same specificity, defined later --
   repainted its body copy and its price line dark grey on a near-black card.
   Re-asserted with the block as an ancestor so context cannot outrank it. */
.final p,.article .final p{color:#AEB5BE}
.final__price,.article .final .final__price,.article .final p.final__price{color:#fff}
.final h2,.article .final h2{color:#fff}
.final li,.article .final li{color:#AEB5BE}
/* 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. */
@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; }
}

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

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

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

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#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-page paint. Slot: motif family "rise", 16px cards, 10px controls,
   depth = tight contact + wide ambient. Paint only -- radius, shadow,
   background, colour, transform, transition -- so this needs a restamp, not a
   rebuild, and it is scoped to body:has(.hero), which is index.html alone.

   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.
   body:has(.hero) X scores (0,2,1) against their (0,1,0), so it wins wherever
   it overlaps without depending on where in the file it sits. */

/* NOT a design change -- a repair for one this block itself caused, and the
   only rule here that is deliberately unscoped.

   modern_surface.py decides whether to shade the panels with
   `need_shade = not layered`: it emits this exact selector list only while the
   sheet contains NO layered shadow. The slot depth below is layered, so on the
   first rebuild the tool read nine of them, concluded the panels were already
   handled and dropped its own rule -- and .card, .callout, .tablewrap, .faq
   and the rest lost their shadow on all 31 pages, not just this one. Verified
   in the browser: computed box-shadow went to `none`.

   So the tool's own rule is restated here, ahead of the home-page scope and
   with the same `var(--shadow)` indirection. Every other page resolves that to
   modern_surface's :root value and renders exactly as it did before this pass;
   the home page resolves it to the slot depth redefined on <body> below. The
   list is modern_surface's PANELS filtered by what this sheet declares, taken
   from the tool rather than retyped. It also keeps the decision stable: the
   sheet now always carries a layered shadow, so the tool takes this branch on
   every future build. */
.card,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.final,
.answer,
.whycard,
.tier,
.article figure{box-shadow:var(--shadow)}

/* The depth language, re-pointed for this page only. modern_surface.py
   declares these two in a :root block; a definition on <body> is more specific
   than one on :root and is an ancestor of everything it styles, so its own
   rules pick these stops up rather than being overridden one by one. */
body:has(.hero){
  --shadow:0 1px 2px rgba(20,22,26,.07), 0 10px 28px rgba(20,22,26,.10);
  --lift:0 2px 4px rgba(20,22,26,.09), 0 18px 42px rgba(20,22,26,.16);
  --ctl:10px;
}

/* Controls at 10px against cards at 16px, so the two read as different
   objects. Declared straight on the element: modern_surface.py raises the
   shared radius token to 16px, and a value beats a token indirection whatever
   the source order. */
body:has(.hero) .btn,
body:has(.hero) .pill,
body:has(.hero) .nav__tel,
body:has(.hero) .burger,
body:has(.hero) .factpills li,
body:has(.hero) .floaty,
body:has(.hero) .hero__tag,
body:has(.hero) .tier__save,
body:has(.hero) .figures div{border-radius:var(--ctl)}
body:has(.hero) .ck{border-radius:5px;
  background:linear-gradient(180deg,var(--accent),var(--accent-deep))}

/* Two weights: the buying CTA carries the gradient and the deep shadow, the
   secondary stays a solid panel with a hairline. */
body:has(.hero) .btn{transition:background-color .18s ease,border-color .18s ease,
  color .18s ease,box-shadow .22s ease,transform .22s ease}
body:has(.hero) .btn--cta{
  background-image:linear-gradient(176deg,#E5333D 0%,var(--accent) 44%,var(--accent-deep) 100%);
  box-shadow:0 1px 2px rgba(20,22,26,.14), 0 10px 28px rgba(142,17,25,.26)}
body:has(.hero) .btn--cta:hover{
  background-image:linear-gradient(176deg,var(--accent) 0%,var(--accent-deep) 58%,var(--accent-dark) 100%);
  box-shadow:0 2px 4px rgba(20,22,26,.16), 0 18px 42px rgba(142,17,25,.34);
  transform:translateY(-2px)}
body:has(.hero) .btn--ghost{box-shadow:0 1px 2px rgba(20,22,26,.06)}
body:has(.hero) .btn--ghost:hover{
  box-shadow:0 1px 2px rgba(20,22,26,.07), 0 10px 28px rgba(20,22,26,.10);
  transform:translateY(-2px)}
body:has(.hero) a:focus-visible,
body:has(.hero) button:focus-visible{outline:3px solid var(--accent);
  outline-offset:3px}

/* Hero plate and the two labels that sit against it. */
body:has(.hero) .hero__card{border-radius:var(--radius);
  background:linear-gradient(180deg,#FFFFFF 0%,#FDF6F6 100%);
  border-color:#EDDBDC;
  box-shadow:0 1px 2px rgba(20,22,26,.07), 0 10px 28px rgba(20,22,26,.12)}
/* The lot tag is a static box, so it paints below anything positioned with a
   z-index -- including the motif, which washed it rose. `relative` with no
   offsets moves it nowhere; it only buys it a layer. */
body:has(.hero) .hero__tag{position:relative;z-index:2;
  background:linear-gradient(100deg,var(--ink) 0%,#262A31 100%);
  box-shadow:0 1px 2px rgba(20,22,26,.16), 0 10px 28px rgba(20,22,26,.18)}
body:has(.hero) .floaty{background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-color:#E6E9EF;
  box-shadow:0 1px 2px rgba(20,22,26,.07), 0 10px 28px rgba(20,22,26,.12)}

/* --- hero motif: rise ------------------------------------------------------
   Warmth rising from the base of the bottle, drifting up and fading. It lives
   on the media column's pseudo-elements, never on the <img>: that image is the
   LCP element and is preloaded.

   Both shapes are sized WIDER than the plate on purpose. .hero__card is opaque
   and 100% of the column, so a shape sized inside it paints nothing a reader
   can see; the visible part of this one is what spills past the plate's left
   and right edges and pools under it. .hero{overflow-x:clip} catches the
   spill, so nothing here can open a horizontal scrollbar.

   These two rules replace the pulse-ring that shipped on this site. The ring's
   declarations are all restated -- aspect-ratio, top, border -- because the
   cascade would otherwise carry them through. Only translate and opacity are
   animated, both compositable, and the two cycles are 19s and 27s: this is a
   gummy taken once a day for weeks, not an energy drink. New keyframe names,
   as btPulse is already taken in this sheet. */
body:has(.hero) .hero__media::before{
  content:'';position:absolute;z-index:1;pointer-events:none;
  left:50%;right:auto;top:auto;bottom:-4%;
  width:196%;height:118%;aspect-ratio:auto;
  border:0;border-radius:50%;
  background:radial-gradient(56% 58% at 50% 80%,
    rgba(216,30,40,.30) 0%, rgba(216,30,40,.15) 38%, rgba(216,30,40,0) 72%);
  translate:-50% 0;
  animation:aeRiseWarm 22s ease-in-out infinite}
body:has(.hero) .hero__media::after{
  content:'';position:absolute;z-index:1;pointer-events:none;
  left:50%;right:auto;top:auto;bottom:5%;
  width:152%;height:38%;
  border:0;border-radius:50%;
  background:radial-gradient(52% 60% at 50% 72%,
    rgba(201,162,75,.42) 0%, rgba(216,30,40,.18) 44%, rgba(216,30,40,0) 76%);
  translate:-50% 0;
  animation:aeRiseGold 17s ease-in-out infinite}
/* The broad field breathes in place; the plume leaves the base, climbs a
   little over half its own height and is gone before it reaches the label. */
@keyframes aeRiseWarm{
  0%{translate:-50% 5%;opacity:.38}
  50%{translate:-50% -7%;opacity:.86}
  100%{translate:-50% 5%;opacity:.38}}
@keyframes aeRiseGold{
  0%{translate:-50% 14%;opacity:0}
  26%{opacity:.8}
  100%{translate:-50% -52%;opacity:0}}
/* The ground under it. The site's own wash is anchored high at 72% 14%, which
   reads as something settling; low and left is the same wash asked to rise.
   The diagonal plate is the hero's other half and it is a flat tint, so it
   takes the same drift rather than staying inert beside a moving field. */
body:has(.hero) .hero{background:
  radial-gradient(92% 66% at 20% 104%, #F2D8DB, #F5F6F8 60%, #F5F6F8)}
body:has(.hero) .hero::before{
  background:linear-gradient(196deg,#EDEFF3 0%,#ECEEF2 44%,#F4E7E8 100%)}

/* --- panels ---------------------------------------------------------------
   .card, .callout, .faq, .tablewrap and the rest already read --shadow and
   --lift from modern_surface.py, which the body scope above re-points. These
   two are outside its list, so they are named here. */
/* .tcard is the only panel on this page outside modern_surface.py's list.
   .guarantee and .btn--gold were named in an earlier draft of this block and
   taken out again: .guarantee exists only on guarantee.html and .btn--gold on
   no page at all, so both rules were scoped to a page that cannot contain
   them and matched nothing anywhere. */
body:has(.hero) .tcard{border-radius:var(--radius);box-shadow:var(--shadow)}
body:has(.hero) .card,
body:has(.hero) .tcard{transition:box-shadow .22s ease,transform .22s ease}
body:has(.hero) .card:hover,
body:has(.hero) .tcard:hover{box-shadow:var(--lift);transform:translateY(-2px)}

/* --- pack ladder ----------------------------------------------------------
   Full-width ribbon bar across the head of the card, the recommended tier
   raised and warmed so it reads as a different object. The geometry of all of
   this is above the critical marker; these are its colours. */
body:has(.hero) .pricing .tier{border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(20,22,26,.07), 0 10px 28px rgba(20,22,26,.10)}
body:has(.hero) .pricing .tier__flag{
  background:linear-gradient(100deg,var(--ink) 0%,#2E333B 100%);color:#fff}
body:has(.hero) .pricing .tier--feature{
  background:linear-gradient(180deg,var(--accent-tint) 0%,var(--paper-card) 34%);
  border-color:var(--accent);
  box-shadow:0 2px 6px rgba(20,22,26,.10), 0 22px 52px rgba(142,17,25,.22)}
body:has(.hero) .pricing .tier--feature .tier__flag{
  background:linear-gradient(100deg,var(--accent-deep) 0%,var(--accent) 52%,var(--accent-deep) 100%)}
body:has(.hero) .pricing .tier--feature .tier__price{color:var(--accent-deep)}
body:has(.hero) .pricing .tier:hover{
  box-shadow:0 2px 4px rgba(20,22,26,.09), 0 18px 42px rgba(20,22,26,.16)}

/* Every moving thing on this page, switched off together. */
@media(prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{animation:none;translate:-50% 0;opacity:.5}
  body:has(.hero) .btn,
  body:has(.hero) .card,
  body:has(.hero) .tcard{transition:none}
  body:has(.hero) .btn--cta:hover,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .card:hover,
  body:has(.hero) .tcard: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{font-size:16px}
footer h4{font-size:15px}
footer li{font-size:16px}
footer .disc{font-size:16px}
footer .flinks{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 15 box-shadow declaration(s)
   and 9 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 (20,22,26), 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(20,22,26,.06), 0 6px 18px rgba(20,22,26,.07);
  --lift:0 2px 6px rgba(20,22,26,.09), 0 16px 34px rgba(20,22,26,.14);
}

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.keypoints,
.byline,
.faq,
.answer{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}