/* glucoprildaily.com — GlucoPril, U.S. stocking partner desk.
   Design slot row 318 (batch8_assignments.py): Libre Baskerville / Rethink
   Sans, a PEWTER ground with warm white cards, an editorial masthead with a
   rule above and below a centred identity, a footer that opens on the review
   score in a tinted band above four ranks on white, and the level-drift hero
   motif.

   The colour is taken from the bottle rather than from the LOOKS FOR reference
   (boostsurge-x.com, which contributed its explanation flow and nothing else):
   amber glass, a crimson label band, a charcoal dropper cap. Crimson is the
   accent, amber the second ink, and the page sits on pewter so the warm white
   cards read as paper laid on metal.

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

/* ---- tokens */
:root{
  --ink:#1b1a17;            /* body text, near-black with a warm cast */
  --ink-2:#4d4a44;          /* secondary */
  --ink-3:#6f6b63;          /* captions, meta */
  --paper:#dcdcd7;          /* the page: pewter */
  --card:#fffdf8;           /* warm white, the card surface */
  --panel:#fffdf8;          /* alias used by components */
  --tint:#d0d1ca;           /* deeper pewter band */
  --tint-2:#e6e6e1;         /* lighter pewter band */
  --line:#c3c3bb;           /* hairline on pewter */
  --line-2:#a9a9a0;         /* stronger rule */
  --rule:#1b1a17;           /* the editorial rule above the identity */
  --red:#c22026;            /* the label band */
  --red-d:#8f1318;          /* deep crimson */
  --red-2:#a71a20;
  --wash:#f7e9e6;           /* crimson wash */
  --amber:#a8681f;          /* the glass */
  --amber-d:#7c4a12;
  --good:#1d6b45;
  --warn:#8a5a10;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --radius:5px;
  --radius-lg:8px;
  --shadow:0 1px 2px rgba(27,26,23,.05), 0 12px 28px rgba(27,26,23,.08);
  --shadow-lg:0 20px 54px rgba(27,26,23,.20);
  --navh:112px;
  --display:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --text:"Rethink Sans",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(--red-d);text-underline-offset:3px}
a:hover{color:var(--red)}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:700;line-height:1.24;margin:0 0 .5em}
h1{font-size:clamp(1.75rem,1.14rem + 1.9vw,2.6rem);letter-spacing:-.012em}
h2{font-size:clamp(1.34rem,1.06rem + 1.05vw,1.92rem);letter-spacing:-.008em}
h3{font-size:1.1rem}
h4{font-size:1rem}
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(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it. Set in the TEXT face:
   Libre Baskerville in tracked capitals at 12px is a smear. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:.78125rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--red-d);
  margin:0 0 10px;
}
.eyebrow::after{content:"";width:26px;height:1px;background:var(--line-2)}

/* ---- buttons: square-cornered, editorial, no gradient */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 30px;
  font-family:var(--text);font-size:1rem;font-weight:700;letter-spacing:.012em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--ink);color:#fff;
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:#000;color:#fff}
.btn:active{transform:translateY(1px)}
.btn--red{background:var(--red)}
.btn--red:hover{background:var(--red-d);color:#fff}
.btn--lg{min-height:60px;padding:17px 36px;font-size:1.06rem}
.btn--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--tint-2);color:var(--ink)}
.btn--wide{width:100%}

/* ---- header: a rule above, the identity centred, a rule below, menu beneath */
.nav{position:sticky;top:0;z-index:100;background:var(--card);box-shadow:0 1px 0 var(--line)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:15px 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:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding-block:15px;border-top:3px solid var(--rule);border-bottom:1px solid var(--line);
}
/* Grid items default to min-width:auto, which floors at min-content. The brand
   holds a wordmark that does not wrap and the rail holds a nowrap button, so
   both need the floor removed or the row refuses to shrink on a phone. */
.nav__top>*{min-width:0}
.brand{grid-column:2;justify-self:center;display:flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--ink)}
.brand__glyph{width:38px;height:38px;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 carry the class onto the replacement, so a
   rule keyed only to .brand__glyph stops applying the moment the tool runs and
   the mark renders at its intrinsic size (pitfall 16). */
.brand>svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;min-width:0}
.bw b{font-family:var(--display);font-size:1.32rem;font-weight:700;letter-spacing:-.01em}
.bw b em{font-style:normal;color:var(--red)}
.bw small{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.nav__rail{grid-column:3;justify-self:end;display:flex;align-items:center;gap:14px;min-width:0}
.nav__buy{min-height:46px;padding:11px 20px;font-size:.9375rem;white-space:nowrap}
.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(--ink);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the menu, centred under the lower rule */
.nav__strip{background:var(--card)}
.menu{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 26px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:42px;
}
.menu a{
  display:inline-block;padding:10px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--ink)}
.menu a[aria-current="page"]{color:var(--red-d);border-bottom-color:var(--red)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the bottle RIGHT on a warm white plate */
.hero{position:relative;background:var(--card);padding:52px 0 58px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);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(--red-d)}
.answer{
  background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--red);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:800}
.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(--tint-2);
  border:1px solid var(--line);padding:7px 14px;border-radius:999px;
}
.factpills li b{color:var(--ink);font-weight:800}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--red);padding:13px 15px;min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.4rem;font-weight:700;color:var(--ink);line-height:1.15}
.figures span{display:block;font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-top:4px}
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:18px 14px 14px;
  background:var(--card);border:1px solid var(--line)}
.hero__card img{width:100%;max-width:380px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 20px 34px rgba(27,26,23,.26))}
.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:800}

/* ---- inner page head */
.phead{padding:32px 0 10px;background:var(--card);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(--red-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.12rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: the five facts, above the navigation.
   Role, lot, dose and size, guarantee, order phone. It exists so the NAV does
   not have to carry them (hero.md, 18 Sep 2026). 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. The lot
   and the dose are trimmed on phones, where five items wrap to three lines. */
.util{background:#2b2a26;color:#cfcdc6;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:#7a766c;flex:0 0 auto;margin-right:11px}
.util b{color:#f4f1e9;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}


/* ---- hero motif -- level-drift ---------------------------------------- */
.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(184deg,#f4d5d2,#fffdf8 58%,#fffdf8)}.hero__media::before{content:'';position:absolute;right:-20%;top:24%;width:120%;height:36%;z-index:0;pointer-events:none;border-top:1px dashed rgba(194,32,38,0.30);border-bottom:1px dashed rgba(194,32,38,0.30);background:linear-gradient(180deg,transparent,rgba(194,32,38,0.09) 50%,transparent)}.hero__media::after{content:'';position:absolute;right:-16%;top:24%;width:114%;height:36%;z-index:0;pointer-events:none;background-image:linear-gradient(90deg,transparent,rgba(194,32,38,0.55) 20%,rgba(194,32,38,0.55) 80%,transparent);background-size:100% 2px;background-repeat:no-repeat;background-position:0 50%;animation:gdDrift 19s ease-in-out infinite}@keyframes gdDrift{0%,100%{transform:translateY(-38%);opacity:.55}26%{transform:translateY(26%);opacity:.95}52%{transform:translateY(-14%);opacity:.7}78%{transform:translateY(34%);opacity:.9}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:60px 0;position:relative}
.sec--tint{background:var(--tint-2)}
.sec--panel{background:var(--card)}
.sec--dark{background:#26251f;color:#dedbd2}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c9c5ba}
.sec--dark .eyebrow{color:#e6a09c}
.sec--dark .eyebrow::after{background:#5c584e}
.sec--dark a{color:#f0b7b3}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* the editorial rule: every section head opens on one */
.sec__head{max-width:var(--measure);margin:0 0 26px;padding-top:18px;border-top:1px solid var(--line-2)}
.sec--dark .sec__head{border-top-color:#4a463d}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#c9c5ba}

/* 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:800}
.sec--dark .ticks li::before{color:#6fd3a4}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);background:var(--card)}
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(--text);font-weight:700;color:#fff;background:var(--ink);font-size:.9375rem}
tbody tr:nth-child(even){background:#f7f4ed}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--ink)}
.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}
.steps>*{min-width:0}
.step{position:relative;background:var(--card);border:1px solid var(--line);padding:20px 22px 20px 70px}
.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(--red);color:#fff;
  font-family:var(--display);font-weight:700;font-size:1rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: warm white paper with a crimson head rule */
.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))}
/* Every grid child may hold a table or a nowrap chip; without this the column
   is floored at its min-content and the card overflows the phone silently. */
.grid>*{min-width:0}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--red);padding:22px 22px 20px;min-width:0}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#32302a;border-color:#4a463d;border-top-color:var(--red)}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #e3c7c3;padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--red-d)}
.callout p:last-child{margin:0}
.alert{background:#fbf3e4;border:1px solid #e9d7b4;border-left:4px solid var(--warn);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.16rem;font-weight:400;line-height:1.6;color:var(--ink);border-left:3px solid var(--red);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--amber);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:32px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. A
   .tablewrap holding a 520px-min table keeps its column 520px wide however
   narrow the grid gets, and the right-hand half is then clipped away by
   body{overflow-x:clip} with nothing to scroll and nothing to report.
   min-width:0 belongs on the items at every width, not only in a query. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);background:var(--card)}
.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>*{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2rem;font-weight:700;color:#fff;line-height:1.15}
.stats div span{display:block;font-size:.9375rem;color:#b3aea3;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr 1fr 1.25fr;border:1px solid var(--line);background:var(--card);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:700;background:#f7f4ed}
.versus__h{background:var(--ink)!important;color:#fff;font-family:var(--text);font-weight:700;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* .ingcard is a grid ITEM and .ing__dose is white-space:nowrap, so without this
   the card cannot shrink below the chip's width and overhangs a 390px screen. */
.inglist>*{min-width:0}
.ingcard{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--amber);padding:22px 24px}
.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:.875rem;font-weight:700;color:#fff;background:var(--amber-d);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(--card);border:1px solid var(--line);border-top:3px solid var(--line-2);position:relative;padding:0}
.card--pack.featured{border-color:var(--red);border-top-color:var(--red);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint-2);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(--red);border-bottom-color:var(--red)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.08rem;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(--ink);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 12px;z-index:3}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
/* No price is printed on this site: the seller's listing could not be read and
   the pack panel says so in words rather than inventing a figure. */
.pack__checkout{font-family:var(--display);font-size:1.32rem;font-weight:700;color:var(--ink);line-height:1.2;text-align:center;margin:0 0 4px}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:600;color:var(--ink-3);margin:0 0 14px}
.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:800}
.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(--card);border:1px solid var(--line)}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--ink)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---- seal wall */
.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(--card);border:1px solid var(--line);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(--ink)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px 1fr 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__row>*{min-width:0}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--red)}
.stars{color:#b8860b;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);background:var(--card);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.02rem;color:var(--ink)}
.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(--red-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. `anywhere` rather than `break-word` because it also
   lowers the element's MIN-CONTENT, which is what stops an 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(--card);border:1px solid var(--line);border-left:4px solid var(--red);padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:52px;height:52px;display:grid;place-items:center;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:1rem}
.byline b{display:block;margin-bottom:6px;color:var(--ink)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}
.byline>*{min-width:0}

/* ---- closing CTA */
.final{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--red);padding:28px 30px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.final--media>*{min-width:0}
.final__img img{width:200px}
.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(--card);border:1px solid var(--line);padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--red);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.04rem;color:var(--ink);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(--card);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(--card);border:1px solid var(--line);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--ink)}
.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(--card);border:1px solid var(--line);padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: the review score in a tinted band, then four ranks on white */
.fcta{position:relative;background:#26251f;color:#fff;padding:48px 0 50px}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.fcta__box>*{min-width:0}
.fcta__eye{display:inline-block;font-size:.78125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#e6a09c;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.5rem;font-weight:700;line-height:1.3;margin:0 0 10px}
.fcta p{color:#c9c5ba}
.fcta__sm{font-size:.9375rem;color:#a9a49a;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#f0b7b3}
.fcta__img img{width:270px}
footer{background:var(--card)}
.fscore{background:var(--tint);border-bottom:1px solid var(--line)}
.fscore__row{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:22px;align-items:center;padding-block:22px}
.fscore__row>*{min-width:0}
.fscore__big{display:flex;align-items:baseline;gap:10px}
.fscore__big b{font-family:var(--display);font-size:2.5rem;font-weight:700;color:var(--ink);line-height:1}
.fscore__big span{font-size:.9375rem;color:var(--ink-2)}
.fscore__cell b{display:block;font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--ink);line-height:1.2}
.fscore__cell span{font-size:.875rem;color:var(--ink-2)}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:26px;padding-block:40px 30px}
.fgrid>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1}
.fbrand span{color:var(--red)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 14px}
.fcard p{font-size:.9375rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--ink)}
.fh{font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0}
.fgrid li{margin:0}
/* 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:5px;margin-block:-5px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--red-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:20px;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3);min-width:0}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3);min-width:0}
.disc{background:var(--tint-2);border-top:1px solid var(--line);padding-block:28px 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--ink)}
.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:.7em;width:8px;height:1px;background:var(--red)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#26251f;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:#b3aea3}
.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){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:24px}
  .fscore__row{grid-template-columns:auto repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--navh:104px}
  .nav__top{grid-template-columns:auto 1fr;gap:12px}
  .brand{grid-column:1;justify-self:start}
  .nav__rail{grid-column:2}
  .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}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu 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}
  .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{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:2px solid var(--line-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it is pushed onto 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}
  .fgrid{grid-template-columns:1fr 1fr;gap:22px}
  .fscore__row{grid-template-columns:1fr 1fr;gap:16px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .fgrid{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
  .fscore__row{grid-template-columns:1fr}
}

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

   The plate gets its own ground so the product does not float: a soft crimson
   bloom behind the glass and an elliptical shadow beneath it, both sized to the
   product rather than to the column. hero_motifs.py owns the drift band that
   runs across the media column outside this card. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:44%;translate:-50% -50%;
  width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(194,32,38,.16),transparent 70%);
  z-index:0;pointer-events:none;
}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:30px;translate:-50% 0;
  width:48%;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(27,26,23,.34),transparent 74%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
.hero__card img{position:relative;z-index:1}
@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:gpFloat 9s ease-in-out infinite}
  @keyframes gpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}


/* ---- 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-118px 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.

   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, 100px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 100px) - 28px);
    min-height: calc(100svh - var(--navh, 100px) - 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 shots are different shapes (1600x1413,
   1368x1589 and 1800x1301 here) 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 (pitfall 91). */
.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}