/* golipodyne.com — LipoDyne, the US ordering desk.
   Design slot: row 321 in batch8_assignments.py. Oswald / Geist, a
   COPPER-TINTED PARCHMENT ground, a header built as ONE row where an oversized
   ordering button anchors the final third, and a footer whose closing offer
   card overlaps the top edge of the destination block.

   The ink comes off the bottle rather than off the reference site: LipoDyne is
   a deep green label with a gold wordmark, so the masthead is that green, the
   accent is that gold, and the page itself is the copper parchment the slot
   asks for. Nothing here is borrowed from alkatidde.com except the shape of its
   component system.

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

/* ---- tokens */
:root{
  --ink:#241a12;            /* body text, warm near-black */
  --ink-2:#5c4a39;          /* secondary */
  --ink-3:#8a7458;          /* captions, meta */
  --green:#10604f;          /* the label's field */
  --green-d:#0a4335;        /* the masthead */
  --green-2:#17745f;
  --gold:#d19d04;           /* the label's wordmark and its three icons */
  --gold-d:#a87e03;
  --copper:#b45f1f;         /* the ground's tint, and the link colour */
  --copper-d:#8c4715;
  --wash:#fbf3e3;           /* gold wash */
  --paper:#f6eee1;          /* the page: copper-tinted parchment */
  --panel:#fffaf1;
  --tint:#f0e4d1;
  --line:#e3d3ba;
  --line-2:#cdb493;
  --good:#15704a;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:9px;
  --radius-lg:18px;
  --shadow:0 1px 2px rgba(36,26,18,.05), 0 10px 28px rgba(36,26,18,.08);
  --shadow-lg:0 24px 60px rgba(10,67,53,.26);
  --navh:78px;
  --display:"Oswald",Impact,"Haettenschweiler","Arial Narrow",system-ui,sans-serif;
  --text:"Geist",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(--copper-d);text-underline-offset:3px}
a:hover{color:var(--green)}
h1,h2,h3,h4{font-family:var(--display);color:var(--green-d);font-weight:600;line-height:1.14;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,1.3rem + 2.3vw,3.15rem);letter-spacing:.005em}
h2{font-size:clamp(1.55rem,1.2rem + 1.25vw,2.25rem);letter-spacing:.008em}
h3{font-size:1.24rem;font-weight:600;letter-spacing:.01em}
h4{font-size:1.05rem;font-weight:600}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--green-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--gold);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:.8125rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--copper-d);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:20px;height:2px;background:var(--gold);border-radius:2px;
}

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

/* ---- header: ONE row, and the ordering button owns the final third.
   The slot asks for a single bar rather than a brand row with a menu strip
   beneath it, so the menu sits inline between the wordmark and an oversized
   order block that is given a fixed share of the row. */
.nav{position:sticky;top:0;z-index:100;background:linear-gradient(92deg,var(--green-d) 0%,var(--green) 72%);box-shadow:0 2px 0 var(--gold)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:10px 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__row{display:flex;align-items:center;gap:16px;padding-block:9px;min-width:0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;flex:0 0 auto}
.brand__glyph{width:36px;height:36px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class. brand_marks.py replaces 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 — 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.06}
.bw b{font-family:var(--display);font-size:1.42rem;font-weight:600;letter-spacing:.03em;color:#fff}
.bw b em{font-style:normal;color:var(--gold)}
.bw small{font-size:.75rem;font-weight:500;color:#a9c6bb;letter-spacing:.02em}
.menu{
  display:flex;flex-wrap:wrap;gap:0 22px;list-style:none;margin:0;padding:0;
  align-items:center;min-width:0;
}
.menu a{
  display:inline-block;padding:10px 0;font-family:var(--display);
  font-size:.95rem;font-weight:500;letter-spacing:.04em;color:#dcebe4;text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:#fff}
.menu a[aria-current="page"]{color:#fff;border-bottom-color:var(--gold)}
.menu__more{display:none}
/* the final third */
.nav__order{margin-left:auto;flex:0 0 clamp(200px,31%,330px);display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
.nav__price{text-align:right;line-height:1.18;min-width:0}
.nav__price b{display:block;font-family:var(--display);font-size:1.18rem;font-weight:600;color:var(--gold)}
.nav__price span{font-size:.75rem;font-weight:500;color:#a9c6bb}
.nav__buy{min-height:52px;padding:15px 26px;font-size:1rem;flex:0 1 auto}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid #2f6b59;
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;flex:0 0 auto;
}
.burger span{display:block;height:2px;background:#e7f0ec;margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: copy LEFT, the bottle RIGHT on the parchment, no card behind it */
.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;padding-block:0}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--copper-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:0 0 18px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .72em;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:58ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 16px;font-size:.9375rem;font-weight:500;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:.9rem;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(--green-d);font-weight:600}
.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(--gold);padding:13px 15px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.55rem;font-weight:600;color:var(--green-d);line-height:1.08}
.figures span{display:block;font-size:.8125rem;font-weight:500;color:var(--ink-3);margin-top:3px}
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px}
.hero__card img{width:100%;max-width:282px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 28px 40px rgba(10,67,53,.34))}
.hero__cap{margin:16px 0 0;font-size:.8125rem;font-weight:500;color:var(--ink-3);text-align:center}

/* ---- inner page head */
.phead{padding:34px 0 12px;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(--copper-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 trust facts, above the navigation.
   Role, lot, dose and count, guarantee, order phone. It exists so the NAV does
   not have to carry them (hero.md). 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(--tint);color:var(--ink-2);font-size:.8125rem;line-height:1.5;border-bottom:1px solid var(--line)}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding-block:7px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.util__item+.util__item::before{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--line-2);flex:0 0 auto;margin-right:10px}
.util b{color:var(--green-d);font-weight:600}
.util a{color:var(--copper-d);text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines and eat ~100px of an 844px screen (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 13px}
}


/* ---- hero motif -- lipid-dissolve ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:radial-gradient(118% 92% at 74% 6%,#ead49a,#efdfb9 50%,#f6eee1)}.hero__media::before{content:'';position:absolute;left:50%;top:4%;width:118%;height:88%;translate:-50% 0;z-index:1;pointer-events:none;background:radial-gradient(24% 19% at 26% 26%,rgba(209,157,4,0.55),transparent 68%),radial-gradient(19% 14% at 76% 44%,rgba(209,157,4,0.46),transparent 70%),radial-gradient(28% 21% at 48% 80%,rgba(209,157,4,0.50),transparent 72%);filter:blur(13px);animation:ldDissolve 10.5s cubic-bezier(.32,.06,.24,1) infinite}.hero__media::after{content:'';position:absolute;left:50%;top:0;width:152%;aspect-ratio:1;translate:-50% -23%;border-radius:50%;z-index:0;pointer-events:none;border:1.5px solid rgba(209,157,4,0.58);animation:ldClose 8.5s ease-in infinite}@keyframes ldDissolve{0%{transform:scale(1);opacity:.86}58%{transform:scale(.68) translateY(-5%);opacity:.28}82%{transform:scale(.74) translateY(-2%);opacity:.40}100%{transform:scale(1);opacity:.86}}@keyframes ldClose{0%{scale:1.24;opacity:0}26%{opacity:.7}100%{scale:.82;opacity:0}}
@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(--green-d);color:#dfeae5}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c7dbd3}
.sec--dark .eyebrow{color:var(--gold)}
.sec--dark a{color:#f2d98a}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* a ruled edge, the parchment equivalent of a section break */
.sec--rule{border-top:1px solid var(--line)}
.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:#c7dbd3}

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

/* ---- 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:600;letter-spacing:.04em;color:#fff;background:var(--green-d);font-size:.95rem}
tbody tr:nth-child(even){background:#fdf8ee}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--green-d)}
.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(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 20px 70px}
.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(--gold),var(--gold-d));color:#2a2005;
  font-family:var(--display);font-weight:600;font-size:1.05rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards */
.grid{display:grid;gap:18px}
.grid>*{min-width:0}
.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))}
.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;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--gold),transparent);
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#0d5244;border-color:#1d6a58}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #edd9a6;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--green-d)}
.callout p:last-child{margin:0}
.alert{background:#fbf0e2;border:1px solid #e8cfae;border-left:4px solid var(--copper);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(--copper-d)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.32rem;font-weight:500;line-height:1.46;color:var(--green-d);border-left:4px solid var(--gold);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(--gold);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}
/* 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, and the right-hand half is clipped away by
   body{overflow-x:clip} with nothing to scroll and nothing to report.
   min-width:0 is the fix, and it belongs on the items at every width rather
   than only inside a media query. */
.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__img img.portrait-shot{width:auto;max-width:100%;max-height:520px;margin-inline:auto}
.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.2rem;font-weight:600;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#a9c6bb;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:#fdf8ee}
.versus__h{background:var(--green-d)!important;color:#fff;font-family:var(--display);font-weight:600;letter-spacing:.04em;font-size:.93rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* Same family as the .split fix above. .inglist is a grid, .ingcard is a grid
   ITEM, and a grid item's default min-width is auto — so the card cannot shrink
   below its min-content. `.ing__dose` is white-space:nowrap and sets that
   floor, which on a 390px screen resolved the column wider than the grid box.
   min-width:0 lets the card shrink; .ingcard__top already wraps, so the chip
   drops onto its own line and fits. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px;min-width:0}
.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:600;color:#2a2005;background:var(--gold);padding:4px 12px;border-radius:999px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel.
   A flex row rather than a three-column grid, because this seller lists ONE
   SKU and a single card in a `repeat(3,1fr)` grid renders a 380px-wide object
   stretched across 1200px. Flex gives the same row for a future ladder and a
   sensibly sized card for the one pack that exists. */
.prices{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0;flex:1 1 300px;max-width:400px}
.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 margin-top 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 border, the shadow, the
   coloured head band and the flag already make it unmistakable. */
.card--pack.featured{border-color:var(--gold);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(--green-d),var(--green));border-bottom-color:var(--green-d)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.16rem;font-weight:600;letter-spacing:.03em}
.pack__head span{font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--gold);color:#2a2005;font-family:var(--display);font-size:.75rem;font-weight:600;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,190px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.4rem;font-weight:600;color:var(--green-d);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;font-weight:600;top:-.8em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:600;color:var(--ink-3);margin:4px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:700}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:500}
.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);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(--green-d)}
.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(--green-d)}
.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(--gold),var(--copper))}
.stars{color:var(--gold);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:500;font-size:1.08rem;color:var(--green-d)}
.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(--copper-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, which pushes a single <a> past the viewport at 390
   — 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:4px solid var(--gold);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:linear-gradient(140deg,var(--green-d),var(--green));color:#fff;font-family:var(--display);font-weight:600;font-size:1.06rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--green-d)}
.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(--gold);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:150px}
.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 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(--gold);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.1rem;font-weight:500;color:var(--green-d);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(--green-d)}
.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: the closing offer card OVERLAPS the top edge of the
   destination block. The card is the last thing in the page's own flow and the
   footer is pulled up under it, so the green plate straddles the boundary
   instead of sitting above it. The overlap is halved on a phone, where 96px of
   negative margin would put the card on top of the first column heading. */
.fcta{background:transparent;padding:58px 0 0}
.fcta__box{position:relative;z-index:3;margin-bottom:-96px;
  background:linear-gradient(128deg,var(--green-d) 0%,var(--green) 100%);color:#fff;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:34px 36px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.fcta h2,.fcta__h{color:#fff}
.fcta__eye{display:inline-block;font-family:var(--display);font-size:.8125rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.68rem;font-weight:600;line-height:1.2;margin:0 0 10px}
.fcta p{color:#c7dbd3}
.fcta__sm{font-size:.9375rem;color:#a9c6bb;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#f2d98a}
.fcta__img img{width:170px}
footer{background:var(--panel);border-top:1px solid var(--line);padding-top:116px}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:26px;padding-block:8px 32px}
.fgrid>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.7rem;font-weight:600;color:var(--green-d);letter-spacing:.03em;line-height:1}
.fbrand span{color:var(--gold)}
.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(--green-d)}
.fh{font-family:var(--display);font-size:.8125rem;font-weight:600;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(--copper-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)}
.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)}
.disc{background:var(--tint);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(--green-d)}
.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:8px;height:2px;border-radius:2px;background:var(--gold)}
.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(--green-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 20px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#a9c6bb}
.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:1280px){
  .menu{gap:0 16px}
  .menu a{font-size:.9rem}
}
@media (max-width:1100px){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:24px}
}
@media (max-width:1160px){
  /* One row cannot hold a wordmark, five links and an oversized button, so the
     links become a panel under the bar and the button keeps its place — the
     ordering block is the point of this masthead and it stays visible. */
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--green-d);border-top:1px solid #1d6a58;
    padding:6px 20px 14px;box-shadow:0 18px 30px rgba(10,67,53,.28);
  }
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid #1d6a58}
  .menu a[aria-current="page"]{border-bottom-color:var(--gold)}
  .burger{display:block}
  /* margin-left:auto is kept from the base rule: the ordering block stays at
     the end of the row on a phone, because it is the point of this masthead. */
  .nav__order{flex:0 0 auto;gap:10px}
  .nav__price{display:none}
  .nav__buy{min-height:44px;padding:11px 18px;font-size:.9rem}
  /* The wordmark has to be allowed to give way. `.brand` is flex:0 0 auto in
     the base rule, so with the role line under it the block measured 221px at
     every phone width, and a masthead of 20 + 221 + 16 + 166 + 20 = 443px ran
     34px past a 390 viewport. body{overflow-x:clip} then CLIPPED the burger —
     48px of menu button with only 14px of it on screen, which is a menu a
     phone cannot open, and no scrollWidth test can see it (responsive.md). */
  .brand{flex:0 1 auto;min-width:0}
  .bw{min-width:0}
  .bw b{white-space:nowrap}
}
@media (max-width:560px){
  /* Below this the role line is what does not fit, and it is the one part of
     the masthead that is already printed elsewhere: it is the first item of the
     .util topline strip above the header, which is not trimmed on phones. So
     the wordmark keeps the name and the strip keeps the role. */
  .bw small{display:none}
  .bw{line-height:1.12}
}
@media (max-width:980px){
  :root{--navh:70px}
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 16px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .factpills{order:10}
  .figures{order:11}
  .hero__card img{max-width:206px}
  .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 40px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices>*{flex:1 1 100%;max-width:none}
  .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 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}
  .fcta__box{margin-bottom:-56px;padding:26px 24px}
  footer{padding-top:78px}
  .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}
}

/* ---- hero: the bottle stands on its own ground -----------------------------
   There is no card on this hero by design, so the bottle needs one: a warm
   pool beneath it and a gold rim behind it, both sized to the product rather
   than to the column. hero_motifs.py owns everything that moves.

   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted (hero.md). */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:44%;translate:-50% -50%;
  width:74%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(209,157,4,.34),transparent 70%);
  z-index:0;pointer-events:none;
}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:26px;translate:-50% 0;
  width:46%;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(10,67,53,.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:ldFloat 9s ease-in-out infinite}
  @keyframes ldFloat{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 masthead is one row and
   its height changes when the menu panel opens, so a hardcoded offset would
   tuck the bottle under the bar.

   min-height makes the sticky box a full screen tall so the shot can be
   CENTRED inside it. 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, 78px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 78px) - 28px);
    min-height: calc(100svh - var(--navh, 78px) - 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 --------------------------------
   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,190px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}