/* themindhoneypro.com — Mind Honey Pro, U.S. stocking partner desk.
   Design slot: batch8_assignments.py row 336. Cardo / Gelasio, deep-teal SLABS
   on a pale grey ground, a single header bar whose destinations are separated
   by drawn vertical hairlines, and a footer that sets a tall precautions block
   beside a compact list of destinations.

   Two serifs is the whole idea. Cardo is a humanist book face with old-style
   figures; Gelasio is a Georgia-metric text serif. Nothing else on this estate
   pairs two serifs, and the register it produces — reference book rather than
   supplement funnel — is the right one for a desk whose most valuable section
   sets a label amount beside a trial dose.

   The accent is read off the bottle: the honey-gold of the "60 PRO" roundel and
   the hexagon lattice behind the wordmark. The teal is the slot's.

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

/* ---- tokens */
:root{
  --ink:#17211f;            /* body text */
  --ink-2:#4b5a57;          /* secondary */
  --ink-3:#6f7e7b;          /* captions, meta */
  --teal:#0d4b4a;           /* the slab */
  --teal-d:#07302f;         /* the deep edge of the slab */
  --teal-2:#146663;
  --honey:#c08416;          /* the bottle's roundel */
  --honey-d:#8f6209;
  --honey-l:#e6b657;
  --wash:#eef4f2;
  --paper:#f0f2f1;          /* the page: pale grey */
  --panel:#ffffff;
  --tint:#e3eae8;
  --line:#d5ded9;
  --line-2:#bcc9c4;
  --good:#137a53;
  --warn:#8a5a10;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --radius:3px;
  --radius-lg:4px;
  --shadow:0 1px 2px rgba(7,48,47,.06), 0 12px 30px rgba(7,48,47,.07);
  --shadow-lg:0 20px 54px rgba(7,48,47,.20);
  --navh:104px;
  --display:"Cardo",Georgia,"Times New Roman",serif;
  --text:"Gelasio",Georgia,"Times New Roman",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(--teal);text-underline-offset:3px}
a:hover{color:var(--honey-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--teal-d);font-weight:700;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,1.34rem + 2.25vw,3.15rem);letter-spacing:-.012em}
h2{font-size:clamp(1.55rem,1.2rem + 1.25vw,2.25rem);letter-spacing:-.008em}
h3{font-size:1.22rem;font-weight:700}
h4{font-size:1.05rem;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(--teal-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--honey);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it. The rule is drawn AFTER
   the words here, and it is the same hairline the header draws between its
   destinations — one mark used at three scales. */
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--text);font-size:.8125rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--honey-d);
  margin:0 0 11px;
}
.eyebrow::after{content:"";width:30px;height:1px;background:var(--honey);flex:0 0 auto}

/* ---- buttons: squared, no gradient, a serif label */
.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:700;letter-spacing:.01em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--teal);color:#fff;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--teal-2);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--honey{background:var(--honey);color:#16210f;box-shadow:inset 0 -3px 0 rgba(0,0,0,.16)}
.btn--honey:hover{background:var(--honey-l);color:#16210f}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.14rem}
.btn--ghost{background:none;color:var(--teal-d);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--teal-d)}
.btn--wide{width:100%}

/* ---- header: ONE bar. Brand, then the destinations separated by drawn
   vertical hairlines, then the order button. */
.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;flex-wrap:wrap;align-items:center;gap:0 22px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--teal-d);flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.bw b{font-family:var(--display);font-size:1.4rem;font-weight:700;letter-spacing:-.01em}
.bw b em{font-style:normal;color:var(--honey-d)}
.bw small{font-size:.75rem;font-weight:400;color:var(--ink-3)}
/* Size any mark by ELEMENT as well as by class: brand_marks.py rewrites what
   sits inside .brand and does not carry the class onto its replacement, so a
   rule keyed only to the class stops applying the moment the tool runs
   (pitfall 16). This site's construction draws no glyph at all, and the rule
   stays so a later change of construction cannot ship a 120px masthead. */
.brand>svg,.brand__glyph{width:32px;height:32px;flex:0 0 auto}

.menu{
  display:flex;flex-wrap:wrap;list-style:none;margin:0 auto 0 8px;padding:0;
  align-items:center;min-width:0;
}
/* the drawn hairline between destinations */
.menu li+li{border-left:1px solid var(--line);}
.menu a{
  display:inline-block;padding:9px 15px;font-family:var(--text);
  font-size:.96rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--teal-d)}
.menu a[aria-current="page"]{color:var(--teal-d);border-bottom-color:var(--honey)}
.menu__more{display:none}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:14px;flex:0 0 auto}
.nav__price{text-align:right;line-height:1.2}
.nav__price b{display:block;font-family:var(--display);font-size:1.16rem;font-weight:700;color:var(--teal-d)}
.nav__price span{font-size:.78125rem;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 20px;font-size:.98rem}
.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(--teal-d);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: copy LEFT on the pale ground, the bottle RIGHT on a teal slab */
.hero{position:relative;background:var(--paper);padding:54px 0 62px;overflow-x:clip}
.hero::before{
  content:"";position:absolute;right:0;top:6%;bottom:6%;width:37%;
  background:linear-gradient(172deg,var(--teal) 0%,var(--teal-d) 100%);
  border-radius:var(--radius);z-index:0;
}
.hero::after{
  content:"";position:absolute;right:37%;top:6%;width:2px;height:88%;
  background:var(--honey);z-index:1;
}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:46px;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(--honey-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--honey);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:.93rem;font-weight:600;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px;min-width:0}
.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;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:var(--radius);min-width:0;
}
.factpills li b{color:var(--teal-d);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--honey);padding:13px 15px;border-radius:0 0 var(--radius) var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.52rem;font-weight:700;color:var(--teal-d);line-height:1.1}
.figures span{display:block;font-size:.8125rem;color:var(--ink-3);margin-top:3px}
/* the product stands on the slab, no card behind it */
.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:400px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.45))}
.hero__cap{margin:14px 0 0;font-size:.8125rem;color:#b9d2cf;text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:.875rem;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:700}

/* ---- 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(--honey-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(--teal-d);color:#a9c6c3;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:1px;height:12px;
  background:#2f6b68;flex:0 0 auto;margin-right:11px}
.util b{color:#eaf3f1;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 (hero.md).
     Keep the role, the guarantee and the phone; the lot and the dose are on the
     pages that need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}


/* ---- hero motif -- mind-trace ---------------------------------------- */
.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(158deg,#f0f2f1,#e7deca 50%,#f0f2f1)}.hero__media::before{content:'';position:absolute;inset:-6% -4%;z-index:1;pointer-events:none;background-repeat:no-repeat;background-size:260% 100%;background-image:linear-gradient(90deg,transparent 0 19%,rgba(192,132,22,0.10) 23%,rgba(192,132,22,0.72) 25%,rgba(192,132,22,0.10) 27%,transparent 31% 100%);animation:mhTraceX 13s linear infinite}.hero__media::after{content:'';position:absolute;inset:-4% -8%;z-index:0;pointer-events:none;background-repeat:no-repeat;background-size:100% 260%;background-image:linear-gradient(180deg,transparent 0 19%,rgba(192,132,22,0.09) 23%,rgba(192,132,22,0.60) 25%,rgba(192,132,22,0.09) 27%,transparent 31% 100%);animation:mhTraceY 19s linear infinite}@keyframes mhTraceX{0%{background-position-x:100%;opacity:0}14%{opacity:.92}84%{opacity:.70}100%{background-position-x:0%;opacity:0}}@keyframes mhTraceY{0%{background-position-y:100%;opacity:0}16%{opacity:.80}82%{opacity:.58}100%{background-position-y:0%;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: pale grey ground, deep-teal slabs cut through it */
.sec{padding:64px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:linear-gradient(168deg,var(--teal) 0%,var(--teal-d) 100%);color:#d3e3e0}
.sec--dark::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--honey) 0%,rgba(192,132,22,0) 62%)}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c2d6d3}
.sec--dark .eyebrow{color:var(--honey-l)}
.sec--dark .eyebrow::after{background:var(--honey-l)}
.sec--dark a{color:var(--honey-l)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 28px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#c2d6d3}

/* 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(--teal);font-size:.98rem}
tbody tr:nth-child(even){background:#f7faf9}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--teal-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:34px;height:34px;
  display:grid;place-items:center;
  background:var(--teal);color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.04rem;border-radius:var(--radius);
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: a honey rule across the top edge */
.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;min-width:0}
.card::before{content:"";position:absolute;left:0;top:0;width:46px;height:3px;background:var(--honey)}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
/* A card in .g3 is ~228px wide at 768, and an email address or a lot reference
   is one unbreakable token wider than that. .card carries overflow:hidden, so
   the token was not scrolling the page -- it was being CLIPPED, which is worse
   than an overflow because nothing signals it. Break inside the token instead. */
.card a,.card b,.card li,.card p{overflow-wrap:anywhere}
.sec--dark .card{background:#0b3f3e;border-color:#1c5b59}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #cadfd9;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(--teal-d)}
.callout p:last-child{margin:0}
.alert{background:#fdf7ea;border:1px solid #efdfbd;border-left:3px solid var(--warn);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(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.34rem;line-height:1.48;color:var(--teal-d);border-left:3px solid var(--honey);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--honey);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(--teal-d)}
.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/92). */
.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.25rem;font-weight:700;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#a9c6c3;margin-top:4px}

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

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* Same family as the .split fix above. `.ing__dose` is white-space:nowrap and
   one of these labels renders past 200px, which sets the card's min-content
   floor and refuses to shrink on a phone. min-width:0 lets the card shrink;
   .ingcard__top already wraps, so the chip drops onto its own line. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--teal);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}
.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(--teal-d);padding:4px 12px;border-radius:var(--radius);white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:1px solid 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:-12px` raises its box, which
   makes it taller than its siblings and trips responsive.md's rule that a
   pricing row shares one height and one button baseline. The card is already
   unmistakable from its border, its head band and its flag. */
.card--pack.featured{border-color:var(--honey);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}
.card--pack.featured .pack__head{background:var(--teal);border-bottom-color:var(--teal)}
.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:700;min-width:0}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--honey);color:#16210f;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}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,172px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.4rem;font-weight:700;color:var(--teal-d);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;font-weight:700;top:-.72em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;color:var(--ink-3);margin:4px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:700}
.pack__was{color:var(--ink-3);text-decoration:line-through}
.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>*{min-width:0}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.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(--teal-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:.99rem;margin-bottom:4px;color:var(--teal-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:9px;background:var(--line);border-radius:999px;overflow:hidden;min-width:0}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--honey),var(--teal))}
.stars{color:#c9931f;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--teal-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(--honey-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:3px solid var(--honey);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:var(--teal);color:#fff;font-family:var(--display);font-weight:700;font-size:1.06rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--teal-d)}
.byline p{font-size:.97rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--honey);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}
.rel a:hover{border-color:var(--honey)}
.rel b{display:block;font-family:var(--display);font-size:1.1rem;color:var(--teal-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:700;font-size:.97rem;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(--teal-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: a teal CTA slab, then a TALL PRECAUTIONS BLOCK beside a compact
   list of destinations, then the legal rail. */
.fcta{position:relative;background:linear-gradient(168deg,var(--teal) 0%,var(--teal-d) 100%);color:#fff;padding:52px 0}
.fcta::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--honey) 0%,rgba(192,132,22,0) 62%)}
.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-size:.8125rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--honey-l);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.7rem;font-weight:700;line-height:1.22;margin:0 0 10px}
.fcta p{color:#c2d6d3}
.fcta__sm{font-size:.9375rem;color:#9db5b2;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:var(--honey-l)}
.fcta__img img{width:280px}
footer{background:var(--panel)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:44px;padding-block:46px 30px}
.fgrid>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.75rem;font-weight:700;color:var(--teal-d);letter-spacing:-.01em;line-height:1}
.fbrand span{color:var(--honey-d)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 16px}
.fcard p{font-size:.9375rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--teal-d)}
/* the tall precautions block — the reason this footer is two columns and not
   five. It carries reading a buyer needs before ordering, not more links. */
.fprec{border-top:1px solid var(--line);margin:18px 0 0;padding:16px 0 0;list-style:none}
.fprec li{position:relative;font-size:.9375rem;color:var(--ink-2);margin:0 0 .6em;padding-left:18px}
.fprec li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--honey)}
.fdest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px;align-content:start}
.fdest>*{min-width:0}
.fh{font-family:var(--text);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fdest ul{list-style:none;margin:0 0 18px;padding:0}
.fdest 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:.96rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--honey-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);min-width:0}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3);min-width:0}
.disc{background:var(--tint);border-top:1px solid var(--line);padding:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--teal-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:.72em;width:9px;height:1px;background:var(--honey)}
.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(--teal-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:#a9c6c3}
.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){
  .menu a{padding:9px 12px;font-size:.92rem}
}
@media (max-width:1040px){
  .fdest{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--navh:96px}
  .hero::before{right:0;left:0;top:auto;bottom:0;width:100%;height:56%}
  .hero::after{display:none}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .menu{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;margin:0;padding:6px 0 10px}
  .menu.open{display:flex}
  .menu li+li{border-left:0}
  .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}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
  .fgrid{grid-template-columns:1fr;gap:30px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:48px 0}
  .hero{padding:34px 0 46px}
  .hero::before{height:52%}
  .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 gets 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}
  .figures{grid-template-columns:1fr;gap:8px}
  .fdest{grid-template-columns:1fr 1fr}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .fdest{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
}

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

   There is no white card on this hero by design, so the bottle needs its own
   ground: an elliptical shadow beneath it and a honey rim glow behind it, both
   sized to the product rather than to the column. hero_motifs.py owns the
   travelling trace and the honeycomb lattice around them. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:46%;translate:-50% -50%;
  width:80%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(230,182,87,.26),transparent 70%);
  z-index:0;pointer-events:none;
}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:30px;translate:-50% 0;
  width:50%;height:18px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.45),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:mhFloat 9s ease-in-out infinite}
  @keyframes mhFloat{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: nav heights run 66-99px across
   the estate and change when a bar compacts, and a hardcoded offset tucks the
   product under the bar on the taller ones.

   min-height makes the sticky box a full screen tall so the shot can be CENTRED
   inside it. 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, 88px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 88px) - 28px);
    min-height: calc(100svh - var(--navh, 88px) - 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 all 1125x1125 here, but
   the blurbs are different lengths, so without these three rules 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,172px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* brand mark: underline construction */
.brand{position:relative}.brand::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:3px;border-radius:2px;background:#c08416}

/* ==== 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}