/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Roboto Slab Fallback";src:local("Georgia");font-weight:400;size-adjust:107.97%;ascent-override:97.05%;descent-override:25.10%;line-gap-override:0.00%}
@font-face{font-family:"Roboto Slab Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:93.48%;ascent-override:112.10%;descent-override:28.99%;line-gap-override:0.00%}
@font-face{font-family:"Titillium Web Fallback";src:local("Arial");font-weight:400;size-adjust:95.30%;ascent-override:118.88%;descent-override:40.71%;line-gap-override:0.00%}
@font-face{font-family:"Titillium Web Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:90.77%;ascent-override:124.82%;descent-override:42.75%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* theretraburn.com — RetraBurn, U.S. authorized retailer desk.
   Design slot, row 312 (batch8_assignments.py): Roboto Slab / Titillium Web,
   a moss-tinted paper ground, a header whose name sits flush left above a
   drawn divider with the destinations in two stacked ranks beneath it, and a
   footer built as a ribbon of inline destinations above the disclaimer block.

   Two inks, both taken off the bottle rather than off the reference site: the
   amber of the glass and the indigo-violet of the printed label. The amber is
   the accent the shared tools read out of this file, which is why the brand
   mark and the ember-fold hero motif both come up warm while the type stays
   violet. Nothing else on the estate pairs a moss ground with those two.

   Everything above CRITICAL-END is inlined into every page head. */

/* ---- tokens */
:root{
  --ink:#211d2c;            /* body text, tinted toward the label's violet */
  --ink-2:#4f4a5e;          /* secondary */
  --ink-3:#757084;          /* captions, meta */
  --violet:#3a2580;         /* the wordmark's deep indigo-violet */
  --violet-d:#251550;       /* deep */
  --violet-2:#6a54b4;       /* the "DIETARY SUPPLEMENT" pill */
  --iris:#9a8fd0;           /* the lighter "Burn" */
  --amber:#c25f0c;          /* the glass */
  --amber-d:#9a4808;
  --amber-l:#e8901f;
  --wash:#efeaf9;           /* violet wash */
  --ember:#fbf0e2;          /* amber wash */
  --paper:#eff2e7;          /* the page: moss-tinted paper */
  --panel:#fbfcf7;
  --tint:#e3e8d6;
  --line:#d6dcc6;
  --line-2:#b9c2a5;
  --good:#3f7a2e;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:4px;
  --radius-lg:10px;
  --shadow:0 1px 2px rgba(33,29,44,.05), 0 10px 28px rgba(33,29,44,.07);
  --shadow-lg:0 20px 54px rgba(37,21,80,.20);
  --navh:118px;
  --pack-img:174px;
  --figw:320px;
  --display:"Roboto Slab","Roboto Slab Fallback",Georgia,"Times New Roman",serif;
  --text:"Titillium Web","Titillium Web Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet);text-underline-offset:3px}
a:hover{color:var(--amber-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--violet);font-weight:700;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(1.95rem,1.28rem + 2.1vw,3rem);letter-spacing:-.018em}
h2{font-size:clamp(1.46rem,1.16rem + 1.15vw,2.15rem);letter-spacing:-.012em}
h3{font-size:1.18rem;font-weight:700}
h4{font-size:1.02rem;font-weight:700}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--violet);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:.78125rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber-d);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:9px;height:9px;background:var(--amber);flex:0 0 auto;
}

/* ---- buttons: a slab with a printed offset, after the slab type */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 30px;
  font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:.005em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--violet);color:#fff;box-shadow:3px 3px 0 var(--violet-d);
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
}
.btn:hover{background:var(--violet-2);color:#fff;transform:translate(1px,1px);box-shadow:2px 2px 0 var(--violet-d)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--violet-d)}
.btn--amber{background:var(--amber);box-shadow:3px 3px 0 var(--amber-d)}
.btn--amber:hover{background:var(--amber-l);box-shadow:2px 2px 0 var(--amber-d)}
.btn--amber:active{box-shadow:0 0 0 var(--amber-d)}
.btn--lg{min-height:62px;padding:17px 36px;font-size:1.06rem}
.btn--ghost{background:none;color:var(--violet);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--violet-d);transform:none;box-shadow:inset 0 0 0 2px var(--violet-2)}
.btn--wide{width:100%}

/* ---- header: the name flush left, a drawn divider, two stacked ranks under it */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);box-shadow:0 1px 0 var(--line)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:14px 0` would set padding-inline to 0 and wipe the page gutter.
   Invisible above the container max-width, and no overflow test can see it
   (pitfall 46). */
.nav__top{display:flex;align-items:center;gap:18px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--violet)}
.brand__glyph{width:36px;height:36px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class. brand_marks.py rewrites the
   <svg> inside .brand and does not always carry class="brand__glyph" onto the
   replacement, so a rule keyed only to that class stops applying the moment
   the tool runs and the glyph renders at its intrinsic size — a masthead two
   different heights on one site (pitfall 16). */
.brand>svg{width:36px;height:36px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-family:var(--display);font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.bw b em{font-style:normal;color:var(--amber-d)}
.bw small{font-size:.75rem;font-weight:600;color:var(--ink-3)}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav__price{text-align:right;line-height:1.22}
.nav__price b{display:block;font-family:var(--display);font-size:1.16rem;font-weight:700;color:var(--violet)}
.nav__price span{font-size:.78125rem;font-weight:600;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 20px;font-size:.95rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--violet);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the drawn divider: one rule, amber for the first 84px and moss after it */
.nav__ranks{background:var(--panel)}
.nav__rule{height:3px;background:linear-gradient(90deg,var(--amber) 0 84px,var(--line) 84px)}
.menu{
  display:flex;flex-wrap:wrap;gap:0 24px;list-style:none;margin:0;padding:0;
  align-items:center;
}
.menu a{
  display:inline-block;padding:10px 0;font-family:var(--display);
  font-size:.9375rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--violet)}
.menu a[aria-current="page"]{color:var(--violet);border-bottom-color:var(--amber)}
/* rank two: the same destinations, set quieter, on their own line */
.menu__break{flex-basis:100%;height:0;margin:0;padding:0;list-style:none}
.menu__more a{font-family:var(--text);font-size:.9063rem;font-weight:600;color:var(--ink-3);padding:8px 0}
.menu__more a:hover{color:var(--amber-d)}

/* ---- hero: copy LEFT, the dropper bottle RIGHT on the ember ground */
.hero{position:relative;background:var(--paper);padding:52px 0 58px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:44px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--amber-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:5px solid var(--amber);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:0 0 18px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.06rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:.925rem;font-weight:600;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight:700}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.875rem;font-weight:600;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:999px;
}
.factpills li b{color:var(--violet);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--amber);padding:13px 15px;border-radius:0 0 var(--radius) var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.44rem;font-weight:700;color:var(--violet);line-height:1.12}
.figures span{display:block;font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-top:3px}
/* the bottle stands on the ground, with no plate behind it, so the motif's
   pseudo-elements are visible around it (house rule 7) */
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px}
/* The shot is a 358x1110 dropper bottle. Sizing it by HEIGHT keeps the fold
   honest on a laptop: at width:100% it would render 1,200px tall and bury
   everything under it. */
.hero__card img{width:auto;height:clamp(330px,46vh,520px);max-width:100%;margin-inline:auto;
  filter:drop-shadow(0 22px 34px rgba(37,21,80,.32))}
.hero__cap{margin:14px 0 0;font-size:.8125rem;font-weight:600;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:.875rem;font-weight:600;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:700}

/* ---- inner page head */
.phead{padding:32px 0 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:.875rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--amber-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.13rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: the five facts a buyer wants before reading anything.
   Role, lot, dose and count, guarantee, order phone — above the navigation, so
   the menu does not have to carry them (hero.md). It sits ABOVE CRITICAL-END
   because it is the first thing painted; appended to the end of the stylesheet
   it would load async and flash unstyled at the very top of the page. */
.util{background:var(--violet-d);color:#c5b9e6;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.util__item+.util__item::before{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--iris);flex:0 0 auto;margin-right:11px}
.util b{color:#f1ecff;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines and eat a third of the first screen on a
     phone (hero.md). Keep role, guarantee and phone; the lot and the dose are
     on the pages that need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}


/* ---- hero motif -- ember-fold ---------------------------------------- */
.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(172deg,#edd3a7,#eff2e7 44%,#eee0c3)}.hero__media::before{content:'';position:absolute;left:50%;bottom:2%;width:64%;height:94%;translate:-50% 0;background:linear-gradient(0deg,rgba(232,144,31,0.50),transparent 74%);border-radius:50% 50% 44% 56%/60% 58% 42% 40%;filter:blur(18px);animation:rbFold 12s ease-in-out infinite;z-index:1;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:5%;width:132%;aspect-ratio:1/.6;translate:-50% 0;border-radius:50%;border:2px solid rgba(232,144,31,0.40);border-bottom-color:transparent;animation:rbFoldArc 9s ease-in-out infinite;z-index:0;pointer-events:none}@keyframes rbFold{0%,100%{transform:translateY(9%) scaleY(.92) rotate(-2deg);opacity:.32}50%{transform:translateY(-9%) scaleY(1.07) rotate(2.5deg);opacity:.86}}@keyframes rbFoldArc{0%,100%{transform:perspective(620px) rotateX(2deg) scale(.94);opacity:.24}50%{transform:perspective(620px) rotateX(42deg) scale(1.07);opacity:.72}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!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 (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:32px 0 42px}
  .hero__card img{height:clamp(280px,42vh,380px)}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 118px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 118px) - 28px); min-height: calc(100svh - var(--navh, 118px) - 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 only, and geometry only, so it is inlined with the rest of the
   critical block and the site is REBUILT after any edit here. `.hero` is on
   index.html and on no other page of this site; the two rules not keyed to it
   are scoped with body:has(.hero) instead. */
@media (min-width:981px){
  /* Measured at 1440x900 before this rule: .hero__cta sat at y=913, thirteen
     pixels under the fold, so the money page's first screen had nothing to
     click. .hero__copy is the flex column at this width -- at 980 and below it
     is display:contents and the phone order is composed there, which this
     query deliberately does not touch. Reading order becomes eyebrow,
     headline, quick answer, buttons, payment line, then the evidence. */
  .hero .hero__copy>.eyebrow{order:1}
  .hero .hero__copy>h1{order:2}
  .hero .hero__copy>.answer{order:3}
  .hero .hero__copy>.hero__cta{order:4}
  .hero .hero__copy>.hero__sub{order:5}
  .hero .hero__copy>.hero__road{order:6}
  .hero .hero__copy>.factpills{order:7}
  .hero .hero__copy>.figures{order:8}
  /* The recommended pack stands proud of the row. The raise is taken off the
     OTHER two cards rather than applied to the featured one: the three cards
     stretch to the row height, so a top margin shortens a card from the top
     and leaves its bottom edge -- and with it the shared Add To Cart baseline
     -- exactly where it was. A negative margin on the featured card makes it
     taller than its siblings and splits that baseline, which is what the
     pricing panel's own note already warns about. */
  .hero ~ #pricing .prices>.card--pack{margin-top:16px}
  .hero ~ #pricing .prices>.card--pack.featured{margin-top:0}
}
/* Room under the corner flag for its notch. The flag is absolutely
   positioned, so this moves no other box; it sits above the marker only
   because padding is geometry. */
.hero ~ #pricing .pack__flag{padding:6px 14px 15px}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:58px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--violet-d);color:#ded6f2}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#cfc5e8}
.sec--dark .eyebrow{color:var(--amber-l)}
.sec--dark a{color:#d7c9ff}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec--ember{background:var(--ember)}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#cfc5e8}

/* one measure, centred; multi-column components keep the full wrap */
@media (min-width:1060px){
  .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>.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}
}

/* ---- lists */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .5em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.sec--dark .ticks li::before{color:#8fd47c}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--display);font-weight:700;color:#fff;background:var(--violet);font-size:.9375rem}
tbody tr:nth-child(even){background:#f6f8f1}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--violet)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 20px 70px;min-width:0}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:34px;height:34px;
  display:grid;place-items:center;
  background:var(--amber);color:#fff;
  font-family:var(--display);font-weight:700;font-size:1rem;border-radius:var(--radius);
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: a short amber rule standing in the bottom-left corner */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT, so a
   card holding a table or a nowrap chip refuses to shrink below it and the
   right-hand edge is clipped away by body{overflow-x:clip} with nothing to
   scroll and nothing to report. min-width:0 at every width is the fix. */
.grid>*{min-width:0}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px 22px;overflow:hidden;min-width:0}
.card::before{
  content:"";position:absolute;left:0;bottom:0;width:5px;height:54px;
  background:var(--amber);
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#33206b;border-color:#4a3390}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #d9cff2;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--violet)}
.callout p:last-child{margin:0}
.alert{background:#fdf6ea;border:1px solid #efdcbc;border-left:5px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.26rem;font-weight:600;line-height:1.52;color:var(--violet);border-left:5px solid var(--amber);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;font-weight:400;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--amber);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* Same family as .grid above: `1fr` is minmax(auto,1fr) and reintroduces the
   min-content floor a .tablewrap would set at 520px. Measured on a sister
   build at 390: the grid box was 350px and its single column resolved to
   522px. min-width:0 belongs on the items at every width. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
/* The single-bottle shot is 358x1110. Sized by width it would render taller
   than the copy beside it, so the tall variant is sized by height and drops
   the frame the wide graphics need. */
.split--tall .split__img img{width:auto;height:430px;margin-inline:auto;border:0;background:none;
  filter:drop-shadow(0 18px 28px rgba(37,21,80,.26))}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats>div{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.1rem;font-weight:700;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#c5b9e6;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr .8fr 1.35fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem;min-width:0}
.versus>div:nth-child(3n+1){font-weight:600;background:#f6f8f1}
.versus__h{background:var(--violet)!important;color:#fff;font-family:var(--display);font-weight:700;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* `.ing__dose` is white-space:nowrap and the longest of these chips renders
   well over 200px, which sets the card's min-content floor. The card is a grid
   ITEM, so without min-width:0 it cannot shrink under that floor and the right
   edge is clipped on a phone. .ingcard__top already wraps, so the chip simply
   drops onto its own line. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--iris);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;min-width:0}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:700;color:#fff;background:var(--violet);padding:4px 12px;border-radius:999px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-lg);overflow:hidden;position:relative}
.card--pack::before{display:none}
/* No lift on the featured card. A negative margin raises its box, which makes
   it taller than its siblings and trips responsive.md's rule that a pricing
   row shares one height and one button baseline. The card is already
   unmistakable from its border, its head band and its flag. */
.card--pack.featured{border-color:var(--amber);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:10px;min-width:0}
.card--pack.featured .pack__head{background:var(--violet);border-bottom-color:var(--violet)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.12rem;font-weight:700}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--amber);color:#fff;font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px;min-width:0}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,174px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.3rem;font-weight:700;color:var(--violet);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;font-weight:700;top:-.72em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;color:var(--ink-3);margin:4px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem;flex-wrap:wrap}
.pack__tot b{font-weight:700}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:600}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots.s1{grid-template-columns:minmax(0,1fr)}
.shots>*{min-width:0}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--violet)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---- seal wall, and the same wall at icon size */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.badgewall>*{min-width:0}
.badgewall figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px;color:var(--violet)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}
.badgewall--icons{grid-template-columns:repeat(5,minmax(0,1fr))}
.badgewall--icons figure{background:var(--ember);border-color:#eddcc4}
.badgewall--icons img{width:86px;height:86px}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px minmax(0,1fr) 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden;min-width:0}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber-l),var(--violet))}
.stars{color:#d98f16;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;font-family:var(--display);font-weight:700;font-size:1.04rem;color:var(--violet)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-family:var(--text);font-size:1.34rem;font-weight:400;color:var(--amber-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:.9375rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token that pushed a single <a> past the viewport on
   eleven pages of a sister build — clipped, unscrollable and invisible to
   every static check. `anywhere` rather than `break-word` because it also
   lowers the element's MIN-CONTENT, which is what stops the ancestor being
   sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--amber);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:var(--violet);color:#fff;font-family:var(--display);font-weight:700;font-size:1.04rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--violet)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}
.byline>div{min-width:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--amber);border-radius:0 0 var(--radius) var(--radius);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final--media>*{min-width:0}
.final__img img{width:auto;height:250px;margin-inline:auto}
.final h2{margin:0 0 10px}
.final__price{font-weight:700;color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel>*{min-width:0}
.rel a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .16s ease,transform .16s ease}
.rel a:hover{border-color:var(--amber);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.06rem;color:var(--violet);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms on focus (pitfall 86). */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:700;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--panel);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:.875rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--violet)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts>*{min-width:0}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: a ribbon of inline destinations above the disclaimer block */
.fcta{position:relative;background:var(--violet-d);color:#fff;padding:52px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__eye{display:inline-block;font-family:var(--display);font-size:.78125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-l);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.6rem;font-weight:700;line-height:1.24;margin:0 0 10px}
.fcta p{color:#cfc5e8}
.fcta__sm{font-size:.9375rem;color:#ab9dd2;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#d7c9ff}
.fcta__img img{width:auto;height:210px}
footer{background:var(--panel)}
.fribbon{padding:36px 0 26px;border-bottom:1px solid var(--line)}
.fribbon__h{display:block;font-family:var(--display);font-size:.78125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.fribbon ul{display:flex;flex-wrap:wrap;gap:2px 0;list-style:none;margin:0;padding:0}
.fribbon li{display:flex;align-items:center}
.fribbon li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-2);margin:0 14px;flex:0 0 auto}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back
   (pitfall 82). */
footer li a{display:inline-block;padding-block:6px;margin-block:-6px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--amber-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--tint);border-top:1px solid var(--line);padding:30px 0 34px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--violet)}
.fdesk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:0 0 22px;padding:0 0 22px;border-bottom:1px solid var(--line-2)}
.fdesk>div{min-width:0}
.fbrand{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--violet);letter-spacing:-.02em;line-height:1}
.fbrand span{color:var(--amber-d)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 0}
.fdesk p{margin:0 0 .7em}
.fdesk p:last-child{margin:0}
.fh{font-family:var(--display);font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:3px;background:var(--amber)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--violet-d);color:#fff;transform:translateY(105%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;padding:12px 22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#c5b9e6}
.buybar .btn{margin-left:auto;flex:0 0 auto}

/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s 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}
}

/* ---- responsive */
@media (max-width:1100px){
  .fdesk{grid-template-columns:1fr 1fr;gap:22px}
  .badgewall--icons{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--navh:104px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px}
  .menu.open{display:flex}
  .menu__break{display:none}
  .menu a,.menu__more a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding:32px 0 42px}
  .hero__card img{height:clamp(280px,42vh,380px)}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall,.badgewall--icons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:3px solid var(--line-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it is pushed to the right of a line with no room for it and overhangs
     the edge. On a phone let it start its own line and wrap its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .fdesk{grid-template-columns:1fr}
  .fribbon li+li::before{margin:0 10px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .badgewall,.badgewall--icons{grid-template-columns:1fr}
}

/* ---- hero: the bottle breathes on the ground -------------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted (hero.md).

   There is no plate on this hero by design, so the bottle carries its own
   ground: an amber rim glow behind the glass and an elliptical shadow beneath
   it, both sized to the product rather than to the column. hero_motifs.py owns
   the fold and the arc around it. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:52%;translate:-50% -50%;
  width:74%;aspect-ratio:1/1.5;border-radius:50%;
  background:radial-gradient(closest-side,rgba(194,95,12,.26),transparent 72%);
  z-index:0;pointer-events:none;
}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:16px;translate:-50% 0;
  width:40%;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(37,21,80,.40),transparent 74%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  /* The float goes on the CARD, never on the <img>. The image is the LCP
     element and is preloaded; animating it is what hero.md rules out. */
  .hero__card{animation:rbFloat 9s ease-in-out infinite}
  @keyframes rbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}

/* ---- 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: this header is two rows and its
   height changes between breakpoints, so a hardcoded offset tucks the bottle
   under the bar at one width and leaves a gap at another.

   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.

   Requires .hero NOT to clip on the block axis — any non-visible overflow on
   an ancestor becomes the scrollport sticky resolves against (pitfall 65). */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 118px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 118px) - 28px);
    min-height: calc(100svh - var(--navh, 118px) - 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}

/* ==== 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(105%)}
/* ==== end directional chrome ==== */

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

/*!SITE-HOME-PAINT-START*/
/* =====================================================================
   theretraburn.com -- HOME PAGE surface and hero motif.

   Slot: bloom motif, 14px panels, 8px controls, a hard short offset over a
   wide ambient stop, corner-flag ribbon.

   PAINT ONLY. Radius, shadow, background, colour, transform, transition,
   animation. Nothing below moves a box, so this needs a restamp rather than
   a rebuild. Every rule is scoped with body:has(.hero) or with a `.hero `
   ancestor, and .hero appears on index.html and on no other page here.

   Specificity, never source order: modern_surface.py and footer_type.py
   strip and re-append their own blocks after this one on every build, so
   each rule below carries an extra ancestor and wins wherever they meet.
   The estate tokens --radius (16px) and --shadow are left exactly as those
   tools set them, so the other thirty pages are untouched.
   ===================================================================== */

body:has(.hero){
  --rb-card:14px;         /* panels  */
  --rb-ctl:8px;           /* buttons, chips, inputs */
  /* The depth language: a hard short offset carrying the weight, a wide
     ambient stop underneath it. Tinted with this site's own inks -- the
     label violet 37,21,80 and the body ink 33,29,44 -- never neutral black. */
  --rb-d1:0 2px 0 rgba(37,21,80,.09), 0 12px 22px rgba(33,29,44,.09);
  --rb-d2:0 3px 0 rgba(37,21,80,.14), 0 8px 14px rgba(33,29,44,.08), 0 22px 38px rgba(33,29,44,.13);
  --rb-d3:0 3px 0 rgba(154,72,8,.34), 0 10px 18px rgba(33,29,44,.12), 0 24px 44px rgba(37,21,80,.18);
}

/* ---- the ground -------------------------------------------------------
   A soft warm halo behind the bottle and a cool one under the copy, over the
   moss paper this site is built on. Replaces the flat three-stop tan ramp
   the motif pass left behind. */
body:has(.hero) .hero{
  background:
    radial-gradient(118% 80% at 74% 6%, rgba(232,144,31,.24) 0%, rgba(232,144,31,.07) 42%, rgba(232,144,31,0) 68%),
    radial-gradient(86% 68% at 4% 98%, rgba(58,37,128,.10) 0%, rgba(58,37,128,0) 60%),
    linear-gradient(176deg,#f7f3e7 0%,#eff2e7 46%,#e8ede0 100%);
}

/* ---- the motif: a bloom that opens from behind the bottle and eases back.
   Both pseudo-elements belong to the media COLUMN, never to the <img>: the
   shot is the LCP element and is preloaded. Sized well past .hero__card,
   which measures roughly 300x470 here, so the bloom reads around the glass
   rather than behind an opaque panel.

   Every inherited declaration from the ember-fold pass is reset explicitly
   -- bottom, height, filter, border -- because those rules still apply for
   any property this one does not name. Twenty-four and thirty seconds: this
   is a supplement taken daily for weeks, not an energy drink. */
body:has(.hero) .hero__media::before{
  content:"";position:absolute;left:50%;top:50%;bottom:auto;
  translate:-50% -50%;
  width:min(124%,620px);height:auto;aspect-ratio:1/1;
  border-radius:50%;filter:none;
  background:radial-gradient(closest-side circle at 50% 50%,
    rgba(232,144,31,.42) 0%,
    rgba(232,144,31,.21) 30%,
    rgba(194,95,12,.11) 50%,
    rgba(58,37,128,.06) 66%,
    rgba(58,37,128,0) 82%);
  animation:rbBloomOpen 24s cubic-bezier(.37,0,.32,1) infinite;
  z-index:0;pointer-events:none;
}
body:has(.hero) .hero__media::after{
  content:"";position:absolute;left:50%;top:50%;bottom:auto;
  translate:-50% -50%;
  width:min(106%,540px);height:auto;aspect-ratio:1/1;
  border:0;border-radius:50%;filter:none;
  background:
    radial-gradient(closest-side circle at 50% 50%, transparent 0 43%, rgba(58,37,128,.14) 43.4% 44.3%, transparent 44.7%),
    radial-gradient(closest-side circle at 50% 50%, transparent 0 58%, rgba(194,95,12,.20) 58.4% 59.4%, transparent 59.8%),
    radial-gradient(closest-side circle at 50% 50%, transparent 0 73%, rgba(154,143,208,.24) 73.4% 74.2%, transparent 74.6%);
  animation:rbBloomRings 30s cubic-bezier(.37,0,.32,1) infinite;
  z-index:0;pointer-events:none;
}
/* Transform and opacity only, and neither keyframe name is already in this
   stylesheet (rbFloat, rbFold, rbFoldArc are taken). */
@keyframes rbBloomOpen{
  0%{transform:scale(.84);opacity:.36}
  48%{transform:scale(1.05);opacity:.92}
  100%{transform:scale(.84);opacity:.36}
}
@keyframes rbBloomRings{
  0%{transform:scale(.70);opacity:0}
  20%{opacity:.82}
  70%{transform:scale(1.14);opacity:.18}
  100%{transform:scale(.70);opacity:0}
}

/* ---- controls ---------------------------------------------------------
   8px, and the printed 3px/3px diagonal offset becomes a vertical one with
   an ambient stop under it -- the architectural read this slot asks for.
   The buying CTA is the only gradient on the page; the secondary button
   stays solid so the pair reads as two weights rather than two buttons. */
body:has(.hero) .btn{
  border-radius:var(--rb-ctl);
  box-shadow:0 2px 0 rgba(37,21,80,.55), 0 6px 12px rgba(33,29,44,.13);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background-color .18s ease;
}
body:has(.hero) .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 3px 0 rgba(37,21,80,.55), 0 12px 22px rgba(33,29,44,.19);
}
body:has(.hero) .btn:active{transform:translateY(0);box-shadow:0 1px 0 rgba(37,21,80,.55), 0 4px 8px rgba(33,29,44,.14)}
body:has(.hero) .btn:focus-visible{outline-offset:3px}

body:has(.hero) .btn--amber{
  background-color:var(--amber);
  background-image:linear-gradient(177deg,#eb9a2a 0%,var(--amber) 54%,#ae5309 100%);
  box-shadow:var(--rb-d3);
}
body:has(.hero) .btn--amber:hover{
  background-color:var(--amber-l);
  background-image:linear-gradient(177deg,#f2a83c 0%,var(--amber-l) 48%,var(--amber) 100%);
  box-shadow:0 3px 0 rgba(154,72,8,.42), 0 14px 26px rgba(33,29,44,.17), 0 26px 48px rgba(37,21,80,.20);
  transform:translateY(-2px);
}
body:has(.hero) .btn--amber:active{transform:translateY(0);box-shadow:0 1px 0 rgba(154,72,8,.42), 0 6px 12px rgba(33,29,44,.16)}
/* Amber on amber is not an outline anyone can see. */
body:has(.hero) .btn--amber:focus-visible{outline:3px solid var(--violet-d);outline-offset:3px}

body:has(.hero) .btn--ghost{
  background-image:none;background-color:rgba(251,252,247,.74);
  box-shadow:inset 0 0 0 2px var(--line-2), 0 2px 0 rgba(37,21,80,.05), 0 10px 18px rgba(33,29,44,.07);
}
body:has(.hero) .btn--ghost:hover{
  background-color:var(--wash);color:var(--violet-d);transform:translateY(-2px);
  box-shadow:inset 0 0 0 2px var(--violet-2), 0 3px 0 rgba(37,21,80,.10), 0 14px 24px rgba(33,29,44,.11);
}

/* ---- panels -----------------------------------------------------------
   14px, one depth stop, and the left- and top-flag panels keep their square
   accented edge: a 5px printed rule reading into a 14px curve is the detail
   that makes a card look unfinished. */
body:has(.hero) .card,
body:has(.hero) .callout,
body:has(.hero) .faq,
body:has(.hero) .tablewrap,
body:has(.hero) .step,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .versus,
body:has(.hero) .toc,
body:has(.hero) .rel a{border-radius:var(--rb-card);box-shadow:var(--rb-d1)}
body:has(.hero) .split__img img{border-radius:var(--rb-card);box-shadow:var(--rb-d1)}
body:has(.hero) .answer,
body:has(.hero) .alert,
body:has(.hero) .ingcard,
body:has(.hero) .byline{border-radius:0 var(--rb-card) var(--rb-card) 0;box-shadow:var(--rb-d1)}
body:has(.hero) .final{border-radius:0 0 var(--rb-card) var(--rb-card);box-shadow:var(--rb-d1)}
body:has(.hero) .figures div{border-radius:0 0 var(--rb-card) var(--rb-card);box-shadow:var(--rb-d1)}
body:has(.hero) .byline__mark{border-radius:var(--rb-ctl)}
body:has(.hero) .field input,
body:has(.hero) .field select,
body:has(.hero) .field textarea{border-radius:var(--rb-ctl)}
/* The hero's quick answer is the first panel a reader meets: give it a lit
   top edge so it lifts off the ground rather than sitting in it. */
body:has(.hero) .answer{background:linear-gradient(180deg,#ffffff 0%,var(--panel) 72%)}
body:has(.hero) .factpills li{box-shadow:0 1px 0 rgba(37,21,80,.06), 0 4px 10px rgba(33,29,44,.06)}

/* Anything a reader can click answers the pointer, 2px, with a transition. */
body:has(.hero) .card,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .rel a{transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease}
body:has(.hero) .rel a:hover{transform:translateY(-2px);border-color:var(--amber);box-shadow:var(--rb-d2)}
body:has(.hero) .shots figure:hover,
body:has(.hero) .badgewall figure:hover{transform:translateY(-2px);box-shadow:var(--rb-d2)}
body:has(.hero) .faq summary:focus-visible{outline:3px solid var(--violet);outline-offset:-3px}

/* ---- the pricing row --------------------------------------------------
   Paint only. The engineering that gives the three Add To Cart buttons one
   baseline -- the head band, the fixed image box, the stretch and the
   margin-top auto on the button -- is not touched, and the featured card is
   raised in the critical block by shortening its two neighbours from the
   top, never by a transform (the reveal pass sets transform:none). */
body:has(.hero) .card--pack{
  border-radius:var(--rb-card);
  box-shadow:inset 0 0 0 1px var(--line), var(--rb-d1);
  transition:box-shadow .22s ease, transform .22s ease;
}
body:has(.hero) .card--pack:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line-2), var(--rb-d2)}
body:has(.hero) .card--pack.featured{
  background:linear-gradient(180deg,#fdf6ec 0%,var(--panel) 44%);
  box-shadow:inset 0 0 0 1px rgba(194,95,12,.38), var(--rb-d2);
}
body:has(.hero) .card--pack.featured:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(194,95,12,.55), var(--rb-d3)}
body:has(.hero) .card--pack.featured .pack__head{background:linear-gradient(180deg,var(--violet-2) 0%,var(--violet) 62%,var(--violet-d) 100%)}
/* The ribbon: a corner flag with a notched tail, warm on the recommended
   pack and quiet violet on the other, so the row has one obvious answer. */
body:has(.hero) .pack__flag{
  border-radius:0;
  background:linear-gradient(180deg,var(--amber-l) 0%,var(--amber) 58%,var(--amber-d) 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 8px),0 100%);
  letter-spacing:.09em;
}
body:has(.hero) .card--pack:not(.featured) .pack__flag{
  background:linear-gradient(180deg,var(--violet-2) 0%,var(--violet) 62%,var(--violet-d) 100%);
}
/* Dashed separators between the feature rows, painted as a repeating
   background on the row itself. A border or a padding would have changed
   the height of every list item and pushed on the shared button baseline;
   a background changes nothing at all. */
body:has(.hero) .pack__perks li{
  background-image:linear-gradient(90deg,rgba(33,29,44,.26) 0 5px,rgba(33,29,44,0) 5px 10px);
  background-repeat:repeat-x;background-size:10px 1px;background-position:left bottom;
}
body:has(.hero) .pack__perks li:last-child{background-image:none}
/* The per-bottle price set in the label's own violet ramp. Guarded, because
   the fallback for an unsupported background-clip is an invisible PRICE:
   without the @supports the colour goes transparent whether or not the clip
   ever arrives. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  body:has(.hero) .pack__per{background-image:linear-gradient(174deg,var(--violet-2),var(--violet-d));
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent}
}

/* ---- chrome ----------------------------------------------------------- */
body:has(.hero) .nav{box-shadow:0 1px 0 var(--line), 0 10px 24px rgba(33,29,44,.055)}
body:has(.hero) .buybar{box-shadow:0 -2px 0 rgba(194,95,12,.7), 0 -14px 30px rgba(33,29,44,.22)}

/* ---- reduced motion ---------------------------------------------------
   Everything above is switched off here. The bloom is kept as a still --
   the estate block that follows hides it with opacity:0 !important, and
   these selectors carry one more ancestor, so an important declaration
   with higher specificity is what puts it back. */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::before{animation:none!important;opacity:.58!important;transform:scale(.97)}
  body:has(.hero) .hero__media::after{animation:none!important;opacity:.42!important;transform:scale(1)}
  body:has(.hero) .btn,
  body:has(.hero) .card,
  body:has(.hero) .card--pack,
  body:has(.hero) .shots figure,
  body:has(.hero) .badgewall figure,
  body:has(.hero) .rel a{transition:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn:active,
  body:has(.hero) .btn--amber:hover,
  body:has(.hero) .btn--amber:active,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .card--pack.featured:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .badgewall figure:hover,
  body:has(.hero) .rel a: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 li a{font-size:16px}
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fh{font-size:15px}
footer .fpay span{font-size:16px}
footer .fribbon__h{font-size:15px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 34 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 (33,29,44), 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(33,29,44,.06), 0 6px 18px rgba(33,29,44,.07);
  --lift:0 2px 6px rgba(33,29,44,.09), 0 16px 34px rgba(33,29,44,.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,
.alert,
.byline,
.ingcard,
.final,
.split__img,
.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{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack: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,
.card--pack: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}