/* goglucomild.com — Gluco Mild, U.S. stocking partner desk.
   Design slot row 319 (batch8_assignments.py): Lilita One / Sen, pale saffron
   over ivory, destinations LEFT with the identity RIGHT and the ordering button
   on its own strip below, a four-band stacked footer, and the pulse-widen hero
   motif.

   Colour comes from the bottle, not from the LOOKS FOR reference. Gluco Mild
   ships in amber glass with a near-black navy label and one cyan drop mark, so
   the ground is the saffron-over-ivory the slot assigns, the ink is the label's
   navy, and the single cool accent is the drop's blue. alkatidde.com supplied
   the component system and nothing else.

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

/* ---- tokens */
:root{
  --paper:#fdf8ee;          /* the page: ivory */
  --ink:#241d10;            /* body text */
  --ink-2:#5b4f3c;          /* secondary */
  --ink-3:#857863;          /* captions, meta */
  --night:#1d2438;          /* the label's navy */
  --night-d:#141a29;        /* the deep band */
  --night-2:#2c3550;
  --amber:#a8630f;          /* the glass */
  --saffron:#d99518;        /* the slot's ground colour, at full strength */
  --saffron-d:#b57a0c;
  --saffron-l:#f7d98a;
  --cyan:#3fa9d4;           /* the drop mark on the label */
  --cyan-d:#1f7fa8;
  --panel:#ffffff;
  --tint:#fbeed1;           /* pale saffron */
  --wash:#fff6e0;
  --line:#ecdcbb;
  --line-2:#d9c79e;
  --good:#2f7a3d;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:10px;
  --radius-lg:18px;
  --shadow:0 1px 2px rgba(36,29,16,.05), 0 10px 28px rgba(36,29,16,.08);
  --shadow-lg:0 22px 58px rgba(29,36,56,.20);
  --navh:112px;
  --display:"Lilita One",Impact,"Haettenschweiler",system-ui,sans-serif;
  --text:"Sen",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.75;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan-d);text-underline-offset:3px}
a:hover{color:var(--amber)}
/* Lilita One ships a single weight. Asking for 800 would synthesise a bolder
   face in some browsers and not in others, so the display family is pinned to
   400 and the SIZE carries the emphasis. */
h1,h2,h3,h4{font-family:var(--display);color:var(--night);font-weight:400;line-height:1.14;margin:0 0 .5em;letter-spacing:.002em}
h1{font-size:clamp(2.05rem,1.34rem + 2.25vw,3.15rem)}
h2{font-size:clamp(1.55rem,1.2rem + 1.3vw,2.25rem)}
h3{font-size:1.28rem}
h4{font-size:1.08rem}
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(--night);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--cyan);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:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:20px;height:20px;flex:0 0 auto;
  background:var(--saffron);
  /* the label's drop, cut down to a bullet */
  clip-path:polygon(50% 0,100% 62%,84% 96%,16% 96%,0 62%);
}

/* ---- 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.06rem;font-weight:400;letter-spacing:.02em;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:var(--night);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.18);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--cyan{background:linear-gradient(98deg,var(--saffron-d) 0%,var(--saffron) 100%);color:#2a1e06}
.btn--cyan:hover{color:#2a1e06}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.16rem}
.btn--ghost{background:none;color:var(--night);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--night)}
.btn--wide{width:100%}

/* ---- header: destinations LEFT, identity RIGHT, ordering strip BELOW */
.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:12px 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). Every .wrap companion on this site obeys the same rule. */
.nav__top{display:flex;align-items:center;gap:18px;padding-block:10px;min-width:0}
.menu{
  display:flex;flex-wrap:wrap;gap:0 24px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:44px;min-width:0;
}
.menu a{
  display:inline-block;padding:11px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--night)}
.menu a[aria-current="page"]{color:var(--night);border-bottom-color:var(--saffron)}
.menu__more{display:none}
.brand{margin-left:auto;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--night);flex:0 0 auto;order:2}
.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 always carry class="brand__glyph" onto the
   replacement, so a rule keyed only to that class stops applying the moment the
   tool runs and the glyph renders at its intrinsic size — a masthead two
   different heights on one site (pitfall 16). */
.brand>svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1;text-align:right;align-items:flex-end}
.bw b{font-family:var(--display);font-size:1.42rem;font-weight:400;letter-spacing:.01em}
.bw b em{font-style:normal;color:var(--cyan-d)}
.bw small{font-size:.75rem;font-weight:600;color:var(--ink-3)}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;order:1;
}
.burger span{display:block;height:2px;background:var(--night);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the ordering strip, the slot's defining move: it is its own band under the
   masthead rather than a button wedged into the brand row */
.nav__strip{background:linear-gradient(94deg,var(--tint),var(--wash))}
.nav__order{display:flex;align-items:center;gap:14px;padding-block:9px;min-width:0}
.nav__price{line-height:1.22;min-width:0}
.nav__price b{display:block;font-family:var(--display);font-size:1.1rem;font-weight:400;color:var(--night)}
.nav__price span{font-size:.78125rem;font-weight:600;color:var(--ink-2)}
.nav__buy{margin-left:auto;min-height:44px;padding:10px 24px;font-size:.99rem;flex:0 0 auto}

/* ---- hero: copy LEFT, the bottle RIGHT on a saffron plate */
.hero{position:relative;background:var(--paper);padding:48px 0 56px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:42px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 16px}
.hero h1 em{font-style:normal;color:var(--amber)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:5px solid var(--saffron);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(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:999px;min-width:0;
}
.factpills li b{color:var(--night);font-weight:800}
.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.52rem;font-weight:400;color:var(--night);line-height:1.12}
.figures span{display:block;font-size:.8125rem;font-weight:600;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:14px;
  background:radial-gradient(76% 62% at 50% 46%,var(--wash),rgba(253,248,238,0) 72%);border-radius:var(--radius-lg)}
.hero__card img{width:100%;max-width:420px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 26px 40px rgba(29,36,56,.34))}
.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;min-width:0}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:800}

/* ---- 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(--amber)}
.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 anything else.
   Role, lot, dose and count, guarantee, order desk. It sits above the
   navigation so the menu does not have to carry them, and its CSS 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 top of the page
   (hero.md, 18 Sep 2026). */
.util{background:var(--night-d);color:#c2c9da;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px;min-width:0}
.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(--saffron);flex:0 0 auto;margin-right:11px}
.util b{color:#fff;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines and eat ~100px of an 844px screen. Keep the
     role, the guarantee and the order desk; the lot and the dose are printed on
     the pages that need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}


/* ---- hero motif -- pulse-widen ---------------------------------------- */
.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% 82% at 28% 8%,#f7e6c7,#fdf8ee 50%,#fdf8ee)}.hero__media::before{content:'';position:absolute;left:50%;top:44%;width:134%;aspect-ratio:2.4;translate:-50% -50%;border-radius:999px;z-index:0;pointer-events:none;border:1px solid rgba(217,149,24,0.38);background:radial-gradient(closest-side,rgba(217,149,24,0.16),transparent 76%);animation:gwOpen 7.2s cubic-bezier(.38,0,.28,1) infinite}.hero__media::after{content:'';position:absolute;left:50%;top:44%;width:112%;aspect-ratio:3.4;translate:-50% -50%;border-radius:999px;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(63,169,212,0.30) 32%,rgba(63,169,212,0.22) 64%,transparent);filter:blur(20px);animation:gwRun 7.2s cubic-bezier(.38,0,.28,1) infinite;animation-delay:-3.6s}@keyframes gwOpen{0%,100%{transform:scaleX(.86);opacity:.28}42%{transform:scaleX(1.08);opacity:.70}68%{transform:scaleX(.98);opacity:.46}}@keyframes gwRun{0%,100%{transform:scaleX(.80);opacity:.22}46%{transform:scaleX(1.12);opacity:.64}}
@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(--night-d);color:#d3d9e6}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c2cadb}
.sec--dark .eyebrow{color:var(--saffron-l)}
.sec--dark .eyebrow::before{background:var(--saffron)}
.sec--dark a{color:var(--saffron-l)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* a saffron rule across the top of a tinted band, the slot's stacked-band idea
   repeated at section scale */
.sec--panel::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--saffron),var(--amber))}
.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:#c2cadb}

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

/* ---- 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:400;color:#fff;background:var(--night);font-size:1.02rem;letter-spacing:.01em}
tbody tr:nth-child(even){background:#fffdf7}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--night)}
.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(--saffron),var(--amber));color:#fff;
  font-family:var(--display);font-weight:400;font-size:1.06rem;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:26px 22px 22px;overflow:hidden;min-width:0}
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--saffron),var(--saffron-l));
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#20283c;border-color:#333d56}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid var(--line-2);border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--night)}
.callout p:last-child{margin:0}
.alert{background:#fdf1e4;border:1px solid #eccfae;border-left:5px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.34rem;font-weight:400;line-height:1.42;color:var(--night);border-left:5px solid var(--saffron);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(--saffron);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 keeps its column 520px wide however
   narrow the grid is, so the right-hand half of the block 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, not 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__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:2.3rem;font-weight:400;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#b6bed0;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr .8fr 1.3fr;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:700;background:#fffaf0}
.versus__h{background:var(--night)!important;color:#fff;font-family:var(--display);font-weight:400;font-size:1rem}
/* the empty column: this label prints no amount for anything, so the middle
   cell is a stated gap rather than a blank the reader has to interpret */
.versus .none{color:var(--ink-3);font-style:italic;font-weight:400}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* Same family as the .split fix. .inglist is a grid and .ingcard is a grid
   ITEM, so without this the card cannot shrink below its min-content and the
   nowrap `.ing__dose` chip sets the floor. */
.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;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:.875rem;font-weight:800;color:var(--night);background:var(--tint);border:1px solid var(--line-2);padding:4px 12px;border-radius:999px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel: FOUR tiers, because the artwork supports
   1, 3, 5 and 6 bottles and the seller's own review block names six as its
   top pack */
.prices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-lg);overflow:hidden;position:relative}
.card--pack::before{display:none}
/* No lift on the featured card. A negative margin raises its box, which makes
   it taller than its siblings and trips responsive.md's rule that a pricing row
   shares one height and one button baseline. The border, the shadow, the
   coloured head band and the flag already make it unmistakable. */
.card--pack.featured{border-color:var(--saffron);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:14px 18px;display:flex;align-items:center;gap:10px;min-width:0}
.card--pack.featured .pack__head{background:linear-gradient(98deg,var(--night),var(--night-2));border-bottom-color:var(--night)}
.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:400}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--saffron);color:#2a1e06;font-family:var(--text);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:18px 18px 20px;min-width:0}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,150px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:1.44rem;font-weight:400;color:var(--night);line-height:1.15;text-align:center;margin:0}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;color:var(--ink-3);margin:4px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:.98rem;text-align:center}
.pack__tot b{font-weight:800}
.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>*{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(--night)}
.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(--night)}
.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;min-width:0}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--saffron),var(--amber))}
.stars{color:var(--saffron-d);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:400;font-size:1.12rem;color:var(--night)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-family:var(--text);font-size:1.34rem;font-weight:400;color:var(--amber)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:.9375rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token that otherwise sets the ancestor's min-content.
   `anywhere` rather than `break-word` because it also lowers min-content. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--saffron);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline>*{min-width:0}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:linear-gradient(140deg,var(--night),var(--night-2));color:#fff;font-family:var(--display);font-weight:400;font-size:1.14rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--night)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--saffron);border-radius:0 0 var(--radius) var(--radius);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final--media>*{min-width:0}
.final__img img{width: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(--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(--saffron);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.12rem;font-weight:400;color:var(--night);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

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

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--night)}
.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: four stacked bands — contact card, destinations, payment,
   disclaimers. The slot asks for bands rather than columns, so each one owns a
   full-width strip with its own ground. */
.fcta{position:relative;background:linear-gradient(140deg,var(--night) 0%,var(--night-d) 100%);color:#fff;padding:52px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__box>*{min-width:0}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.78125rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron-l);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.72rem;font-weight:400;line-height:1.22;margin:0 0 10px}
.fcta p{color:#c2cadb}
.fcta__sm{font-size:.9375rem;color:#a8b1c4;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:var(--saffron-l)}
.fcta__img img{width:280px}
footer{background:var(--paper)}
/* band 1 */
.fcard{background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--saffron);border-radius:0 0 var(--radius) var(--radius);padding:26px 28px;margin-block:0 26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 28px}
.fcard>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.76rem;font-weight:400;color:var(--night);line-height:1}
.fbrand span{color:var(--cyan-d)}
.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(--night)}
/* band 2 */
.fh{font-family:var(--text);font-size:.8125rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;padding-block:8px 28px}
.fgrid>*{min-width:0}
.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(--amber)}
/* band 3 */
.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:220px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3);min-width:0}
/* band 4 */
.disc{background:var(--tint);border-top:1px solid var(--line-2);padding:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--night)}
.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:.62em;width:8px;height:8px;background:var(--saffron);
  clip-path:polygon(50% 0,100% 62%,84% 96%,16% 96%,0 62%)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--night-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:#b6bed0}
.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){
  .prices{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcard{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}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding-block:6px 12px;width:100%;order:3}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line-2)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line-2)}
  .burger{display:block;order:1}
  .brand{order:2}
  .nav__top{flex-wrap:wrap}
  .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:46px 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 with 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,.fcard{grid-template-columns:1fr;gap:20px}
  .nav__order{flex-wrap:wrap}
  .nav__buy{margin-left:0;width:100%}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .badgewall{grid-template-columns:1fr}
}

/* ---- hero: the bottle breathes 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 float goes on
   the CARD, never on the <img>, which is preloaded. */
.hero__card{isolation:isolate}
.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(29,36,56,.34),transparent 74%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:gmFloat 8.5s ease-in-out infinite}
  @keyframes gmFloat{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 rather than
   hardcoded: this header is two bands and its height changes between
   breakpoints.

   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 four cards that have to share their edges, their image slot
   and their button baseline. The vendor pack shots are different shapes
   (1600x1413, 1341x1589, 1600x1600, 1800x1327), so without these rules the
   images render at four sizes and the four CTAs sit at four 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 (pitfall 91). */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,150px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots.s2>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 20px) / 2);margin-inline:auto}