/* goglucopril.com — GlucoPril, U.S. authorized retailer desk.
   Design slot: batch8_assignments.py row 320. Domine / Fira Sans, a
   forest-tinted white ground, a header built as a STEPPED PAIR OF ROWS whose
   second row is narrower and pulled inward, a footer carrying its destinations
   in five ranks with the legal text set apart in a boxed rail, and the
   drop-meter hero motif.

   The accent is re-derived from the bottle, as the house rule requires, and the
   bottle is crimson on amber glass under a grey-white upper label. So this is a
   crimson ramp on a green-tinted ground: the one deliberate contrast on this
   site, and the reason the forest ink is kept for structure — rules, bands,
   headings — while the crimson is kept for the things a buyer acts on.

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

/* ---- tokens */
:root{
  --ink:#1b2620;            /* body text */
  --ink-2:#4a5a51;          /* secondary */
  --ink-3:#6e8076;          /* captions, meta */
  --forest:#17402e;         /* the ground's own dark */
  --forest-d:#0e2a1d;       /* deepest band */
  --forest-2:#235a41;
  --crimson:#c5232b;        /* the label's red block and its blood-drop mark */
  --crimson-d:#9c1a21;
  --amber:#b8791f;          /* the glass */
  --wash:#fcecec;           /* crimson wash */
  --paper:#f4f7f4;          /* the page: forest-tinted white */
  --panel:#ffffff;
  --tint:#e8efe9;
  --line:#d6e2d8;
  --line-2:#bccfbf;
  --good:#1a7a4e;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:8px;
  --radius-lg:16px;
  --shadow:0 1px 2px rgba(23,64,46,.06), 0 10px 30px rgba(23,64,46,.08);
  --shadow-lg:0 22px 60px rgba(14,42,29,.20);
  --navh:112px;
  --display:"Domine",Georgia,"Times New Roman",serif;
  --text:"Fira 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.74;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--forest);text-underline-offset:3px}
a:hover{color:var(--crimson-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--forest);font-weight:700;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.94rem,1.28rem + 2.1vw,3rem);letter-spacing:-.018em}
h2{font-size:clamp(1.46rem,1.16rem + 1.15vw,2.12rem);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(--forest);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--crimson);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(--text);font-size:.78125rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--crimson-d);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:9px;height:9px;border-radius:50% 50% 50% 0;
  rotate:-45deg;background:var(--crimson);   /* the label's drop, at the smallest scale */
}

/* ---- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 32px;
  font-family:var(--text);font-size:1rem;font-weight:700;letter-spacing:.01em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:linear-gradient(100deg,var(--forest) 0%,var(--forest-2) 100%);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.12);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--cta{background:linear-gradient(100deg,var(--crimson-d) 0%,var(--crimson) 100%)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.06rem}
.btn--ghost{background:none;color:var(--forest);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--tint);color:var(--forest-d)}
.btn--wide{width:100%}

/* ---- header: a stepped pair of rows, the second narrower and pulled inward.
   Row one runs the full container. Row two is a plate that stops short of both
   page edges and is indented from the left, so the masthead reads as a step
   down rather than as two stacked bars. */
.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:20px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--forest)}
.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 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 (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.3rem;font-weight:700;letter-spacing:-.018em}
.bw b em{font-style:normal;color:var(--crimson)}
.bw small{font-size:.75rem;font-weight:500;color:var(--ink-3)}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:16px;min-width:0}
.nav__fact{text-align:right;line-height:1.24;min-width:0}
.nav__fact b{display:block;font-family:var(--display);font-size:1.02rem;font-weight:700;color:var(--forest)}
.nav__fact span{font-size:.78125rem;font-weight:500;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 22px;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(--forest);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the step: narrower, pulled inward, and hung off the row above it */
.nav__strip{background:var(--panel)}
.nav__step{
  margin-inline:56px 96px;background:var(--tint);
  border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  padding-inline:24px;min-width:0;
}
.menu{
  display:flex;flex-wrap:wrap;gap:0 26px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:44px;
}
.menu a{
  display:inline-block;padding:11px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--forest)}
.menu a[aria-current="page"]{color:var(--forest);border-bottom-color:var(--crimson)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the bottle RIGHT on an open plate */
.hero{position:relative;background:var(--paper);padding:54px 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(--crimson-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--crimson);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:500;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:999px;
}
.factpills li b{color:var(--forest);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);padding:13px 15px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.38rem;font-weight:700;color:var(--forest);line-height:1.14}
.figures span{display:block;font-size:.8125rem;font-weight:500;color:var(--ink-3);margin-top:3px}
/* The product plate is OPAQUE, and that is a decision forced by the artwork:
   this vendor's bottle shots are RGB with no alpha channel, so the file is a
   white rectangle with a bottle drawn on it. A drop-shadow filter on that
   renders a rectangle, and any motif sized inside the card renders nothing at
   all. So the card is a proper white plate with a red rule at its head, and the
   drop-meter motif is sized at ~150% of the media column and anchored above it,
   which is the pattern house rule 7 prescribes for exactly this case. */
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:20px 20px 16px;
  background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--crimson);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-lg)}
.hero__card img{width:100%;max-width:400px;height:auto;margin-inline:auto}
.hero__cap{margin:14px 0 0;font-size:.8125rem;font-weight:500;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:500;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:34px 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(--crimson-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: the five facts a buyer wants before reading anything —
   role, lot, dose and fill, guarantee, order desk — above the navigation, so
   the menu 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 sheet it would load async and flash unstyled at the top of the page.
   Lot and dose are trimmed on phones, where five items wrap to three lines. */
.util{background:var(--forest-d);color:#aac6b6;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:#3f6f57;flex:0 0 auto;margin-right:11px}
.util b{color:#e7f2eb;font-weight:600}
.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 -- drop-meter ---------------------------------------- */
.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(176deg,#f4f7f4,#e8efe9 46%,#f4f7f4)}.hero__media::before{content:'';position:absolute;left:50%;top:-24%;width:150%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:repeating-conic-gradient(from -90deg,rgba(197,35,43,0.34) 0 .7deg,transparent .7deg 6deg);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 15px),#000 calc(100% - 14px));mask:radial-gradient(closest-side,transparent calc(100% - 15px),#000 calc(100% - 14px));animation:gpMeter 26s linear infinite;z-index:0;pointer-events:none}.hero__media::after{content:'';position:absolute;right:-7%;top:-8%;width:7%;aspect-ratio:1;border-radius:50% 50% 50% 0;background:rgba(197,35,43,0.55);transform:rotate(-45deg);animation:gpDrop 6.6s cubic-bezier(.4,0,.7,.4) infinite;z-index:0;pointer-events:none}@keyframes gpMeter{to{transform:rotate(360deg)}}@keyframes gpDrop{0%{top:-8%;opacity:0;transform:rotate(-45deg) scale(.55)}14%{opacity:.9}72%{top:76%;opacity:.85;transform:rotate(-45deg) scale(1)}100%{top:92%;opacity:0;transform:rotate(-45deg) scale(.5)}}
@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)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--forest-d);color:#d9e7de}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c0d5c8}
.sec--dark .eyebrow{color:#f0a6a6}
.sec--dark .eyebrow::before{background:#e2626a}
.sec--dark a{color:#9fd8bb}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.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:#c0d5c8}

/* 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:#6fd3a4}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);min-width:0}
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(--forest);font-size:.9375rem}
tbody tr:nth-child(even){background:#f8fbf9}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--forest)}
.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:36px;height:36px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--crimson),var(--crimson-d));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: a drawn corner rule in the label's red */
.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))}
/* Grid items that may hold a table or a nowrap chip must be allowed to shrink
   below their min-content, or the column is sized by the widest word in it and
   the block is clipped away by body{overflow-x:clip} with nothing to scroll. */
.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}
.card::before{
  content:"";position:absolute;left:0;top:0;width:4px;height:52px;
  background:var(--crimson);
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#133424;border-color:#2a5943}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--tint);border:1px solid var(--line-2);border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em;min-width:0}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--forest)}
.callout p:last-child{margin:0}
.alert{background:var(--wash);border:1px solid #f0cdcd;border-left:4px solid var(--crimson);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em;min-width:0}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--crimson-d)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.24rem;font-weight:500;line-height:1.5;color:var(--forest);border-left:4px solid var(--crimson);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(--crimson);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em;min-width:0}
.keypoints>b{display:block;margin-bottom:8px;color:var(--forest)}
.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}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. A
   .tablewrap holding a 520px-min table therefore keeps its column 520px wide
   however narrow the grid is. min-width:0 is the fix, and it belongs on the
   items at every width rather than only in the media query (pitfall 46's
   sibling). */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.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.05rem;font-weight:700;color:#fff;line-height:1.14}
.stats div span{display:block;font-size:.9375rem;color:#aac6b6;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.1fr 1fr 1fr;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:#f7faf8}
.versus__h{background:var(--forest)!important;color:#fff;font-family:var(--display);font-weight:700;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* Same family as the .split fix. `.ing__dose` is white-space:nowrap and sets
   the card's min-content floor, so without this the column resolves wider than
   the phone and the right edge is clipped silently. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);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:.9375rem;font-weight:700;color:#fff;background:var(--forest);padding:4px 12px;border-radius:999px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel.
   No figure was read for this product, so the price slot prints the fact that
   the checkout holds it rather than a number nobody supplied. */
.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}
.card--pack.featured{border-color:var(--crimson);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:linear-gradient(100deg,var(--forest),var(--forest-2));border-bottom-color:var(--forest)}
.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;min-width:0}
.pack__head span{font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--crimson);color:#fff;font-family:var(--text);font-size:.75rem;font-weight:700;letter-spacing:.08em;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,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__price{font-family:var(--display);font-size:1.4rem;font-weight:700;color:var(--forest);line-height:1.2;text-align:center;margin:0 0 4px}
.pack__price small{display:block;font-family:var(--text);font-size:.8125rem;font-weight:400;color:var(--ink-3);margin-top:5px}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:600;color:var(--ink-3);margin:4px 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: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>*{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(--forest)}
.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(--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(--forest)}
.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 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}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--crimson),var(--forest))}
.stars{color:#d79a1c;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;min-width:0}
.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(--forest)}
.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(--crimson-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 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:4px solid var(--crimson);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em;min-width:0}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:linear-gradient(140deg,var(--forest),var(--forest-2));color:#fff;font-family:var(--display);font-weight:700;font-size:1rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--forest)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--crimson);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__img img{width:210px}
.final__body{min-width:0}
.final h2{margin:0 0 10px}
.final__price{font-weight:600;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 .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--crimson);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.04rem;color:var(--forest);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:600;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(--forest)}
.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 forest CTA band, a contact card, FIVE ranks of destinations,
   and the legal set apart in its own boxed rail. */
.fcta{background:linear-gradient(140deg,var(--forest) 0%,var(--forest-d) 100%);color:#fff;padding:50px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__txt{min-width:0}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.78125rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#f0a6a6;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.56rem;font-weight:700;line-height:1.26;margin:0 0 10px}
.fcta p{color:#c0d5c8}
.fcta__sm{font-size:.9375rem;color:#9cb6a6;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#9fd8bb}
.fcta__img img{width:290px}
footer{background:var(--panel)}
.fcard{padding:40px 0 4px;max-width:var(--measure-wide)}
.fbrand{font-family:var(--display);font-size:1.62rem;font-weight:700;color:var(--forest);letter-spacing:-.018em;line-height:1}
.fbrand span{color:var(--crimson)}
.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(--forest)}
.fcontact{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0 0 6px}
.fgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px;padding:26px 0 30px;border-top:1px solid var(--line);margin-top:22px}
.fgrid>*{min-width:0}
.fh{font-family:var(--text);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(--crimson-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:196px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
/* the boxed rail: the legal text is not a footnote band running edge to edge,
   it is a bordered panel standing clear of the page edge with the disclaimer
   pinned to its head. */
.disc{background:var(--tint);border-top:1px solid var(--line);padding:30px 0 34px}
.disc__rail{background:var(--panel);border:1px solid var(--line-2);border-left:5px solid var(--crimson);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:24px 28px;min-width:0}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--forest)}
.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:.56em;width:7px;height:7px;
  border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--crimson)}
.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:var(--forest-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:#aac6b6}
.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:1180px){
  .nav__step{margin-inline:32px 48px}
}
@media (max-width:1100px){
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .fcontact{grid-template-columns:repeat(2,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__fact{display:none}
  .nav__step{margin-inline:0;border-radius:0;border-left:0;border-right:0}
  .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-2);border-bottom-width:1px}
  .menu a[aria-current="page"]{border-bottom-color:var(--line-2)}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Four seal tiles across a 724px wrap resolve to 168px each, which is under
     the ~200px floor responsive.md sets for a grid child and reads as four
     stamps in a row rather than four captioned marks. Three fits at 229px. */
  .badgewall{grid-template-columns:repeat(3,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:46px 0}
  .hero{padding:34px 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 to the right of a line with no room for it and overhangs
     the card edge. On a phone let it sit at the start of its own line. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .disc__rail{padding-inline:20px;border-radius:0 var(--radius) var(--radius) 0}
  .figures{grid-template-columns:1fr;gap:8px}
  .fcontact,.fgrid{grid-template-columns:1fr 1fr;gap:22px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .fcontact,.fgrid{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
}

/* ---- hero: the plate breathes -------------------------------------------
   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 float goes on
   the CARD, never on the <img>: the image is preloaded and animating it is what
   hero.md rules out. hero_motifs.py owns the meter ring and the drop that falls
   past the plate. */
.hero__card{isolation:isolate}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:gpFloat 8.5s ease-in-out infinite}
  @keyframes gpFloat{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 changes height between breakpoints, and a hardcoded offset
   tucks the product under the bar.

   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, 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 pack shots are three different shapes
   (1368x1589, 1800x1301 and 1600x1413), so without these 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}