/* mindhoneypros.com — Mind Honey Pro, U.S. authorized retailer desk.
   Design slot: batch8_assignments.py row 327. Gluten / Asap Condensed, an IRON
   GREY ground carrying MINT cards, the identity centred above destinations set
   as small tracked capitals, a narrow closing strip above four ranks of
   destinations in the footer, and the honey-orbit hero motif.

   The ground is the idea. Every other desk on this estate paints a near-white
   paper; this one paints a cool iron grey and lifts a mint card off it, which
   is what makes the honey gold taken off the bottle read as warm rather than as
   one more amber site. The gold is the label's own: the hexagon lattice, the
   60 PRO roundel and the HONEY wordmark are all drawn in it.

   Contrast was measured against the iron ground rather than against white,
   because a gold that passes on #ffffff fails on #dfe4e7. Every reading colour
   here clears 4.5:1 on the ground it is actually printed on.

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

/* ---- tokens */
:root{
  --ink:#181d20;            /* body text, the label's graphite */
  --ink-2:#414a4f;          /* secondary */
  --ink-3:#5a646a;          /* captions, meta — 4.7:1 on the iron ground */
  --iron:#333b40;           /* the structural grey */
  --iron-d:#1f2528;         /* deepest */
  --iron-2:#475258;
  --gold:#e5ad2c;           /* the label's honey */
  --gold-b:#c8880f;
  --gold-d:#8a5a06;
  --gold-t:#7a4f04;         /* gold as reading text on the iron ground */
  --wash:#f6ecd4;           /* honey wash */
  --mint:#e8f6ef;           /* the cards */
  --mint-2:#d7eee2;         /* mint band */
  --mint-line:#bfdccd;
  --paper:#dfe4e7;          /* the page: iron grey */
  --paper-2:#d3dade;        /* the deeper iron band */
  --panel:#f4faf7;          /* near-white mint */
  --line:#c2cbd0;
  --line-2:#a8b4bb;
  --good:#0f6b45;
  --warn:#8a5a10;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --radius:10px;
  --radius-lg:20px;
  --shadow:0 1px 2px rgba(24,29,32,.05), 0 12px 30px rgba(24,29,32,.08);
  --shadow-lg:0 24px 60px rgba(31,37,40,.20);
  --navh:112px;
  --display:"Gluten","Trebuchet MS",system-ui,-apple-system,sans-serif;
  --text:"Asap Condensed","Segoe UI",system-ui,-apple-system,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:18px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-t);text-underline-offset:3px}
a:hover{color:var(--iron-d)}
/* Gluten is a rounded display face and it runs WIDE: measured at 1440, the
   13-word H1 took six lines at 3.05rem and buried the Quick Answer. The whole
   scale is a step down from the estate's default for that reason, and the
   weight is 700 rather than 800 — Gluten's 800 reads as a poster face at
   headline sizes and this is a cognition product, not a sweet shop. */
h1,h2,h3,h4{font-family:var(--display);color:var(--iron-d);font-weight:700;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.7rem,1.1rem + 1.55vw,2.35rem);letter-spacing:-.01em}
h2{font-size:clamp(1.32rem,1.08rem + .82vw,1.78rem);letter-spacing:-.005em}
h3{font-size:1.12rem;font-weight:700}
h4{font-size:1rem;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(--iron-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--gold-b);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it. The rule beside it is a
   honeycomb edge, cut with clip-path, so the smallest element on the page still
   carries the label's lattice. */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:.8125rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-t);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:20px;height:11px;background:var(--gold-b);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}

/* ---- 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:1rem;font-weight:800;letter-spacing:.01em;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:linear-gradient(120deg,var(--iron) 0%,var(--iron-d) 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(120deg,var(--gold) 0%,var(--gold-b) 100%);color:var(--iron-d)}
.btn--gold:hover{color:var(--iron-d)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.08rem}
.btn--ghost{background:none;color:var(--iron-d);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--mint);color:var(--iron-d)}
.btn--wide{width:100%}

/* ---- header: the identity CENTRED, destinations beneath it in small tracked
   capitals. Three columns rather than an absolute position, so the wordmark
   sits on the true centre of the page and the rail cannot overlap it. */
.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:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding-block:13px}
.nav__lead{text-align:left;line-height:1.24;min-width:0}
.nav__lead b{display:block;font-family:var(--display);font-size:1.04rem;font-weight:800;color:var(--iron-d)}
.nav__lead span{font-size:.8125rem;font-weight:600;color:var(--ink-3)}
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--iron-d);justify-self:center}
.brand__glyph{width:38px;height:38px;flex:0 0 auto}
/* Size the mark by ELEMENT, not only 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 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}
/* And INK the mark by rule, not by attribute. brand_marks.py draws the glyph in
   the most saturated :root token it can find, which here is --gold #e5ad2c, and
   writes it as a presentation attribute on the path. That gold reads at 1.9:1
   on this masthead's --panel ground, which is the trap the palette note at the
   top of this file describes and the reason every reading colour here was
   measured against the iron rather than against white. A presentation attribute
   loses to any CSS rule, so the comb is restated in the label's darker honey at
   5.6:1. Both selectors are here because a glyph can arrive stroked (comb,
   wave) or filled (flame, drop), and fill="none" has to be left alone or the
   hexagons fill in solid. This survives every run of the tool. */
.brand>svg path[stroke]{stroke:var(--gold-d)}
.brand>svg path[fill]:not([fill="none"]){fill:var(--gold-d)}
.bw{display:flex;flex-direction:column;align-items:center;line-height:1.05;text-align:center}
.bw b{font-family:var(--display);font-size:1.3rem;font-weight:800;letter-spacing:-.01em}
.bw b em{font-style:normal;color:var(--gold-b)}
.bw small{font-size:.6875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.nav__rail{justify-self:end;display:flex;align-items:center;gap:14px}
.nav__buy{min-height:46px;padding:11px 22px;font-size:.95rem}
.burger{
  display:none;width:48px;height:46px;background:var(--mint);border:1px solid var(--line-2);
  border-radius:999px;cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--iron-d);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the destinations: one centred rank of small tracked capitals */
.nav__strip{background:var(--mint);border-top:1px solid var(--mint-line)}
.menu{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 26px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:44px;
}
.menu a{
  display:inline-block;padding:11px 0;font-family:var(--display);
  font-size:.8125rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--gold-t)}
.menu a[aria-current="page"]{color:var(--iron-d);border-bottom-color:var(--gold-b)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the bottle RIGHT on a mint card */
.hero{position:relative;padding:54px 0 58px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--gold-d)}
.answer{
  background:var(--panel);border:1px solid var(--mint-line);
  border-left:4px solid var(--gold-b);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:.9375rem;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(--mint-line);padding:7px 14px;border-radius:999px;
}
.factpills li b{color:var(--iron-d);font-weight:800}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--mint);border:1px solid var(--mint-line);padding:13px 15px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.38rem;font-weight:800;color:var(--iron-d);line-height:1.1}
.figures span{display:block;font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-top:3px}
/* the mint card the bottle stands on */
.hero__media{position:relative;align-self:center}
.hero__card{
  position:relative;z-index:2;text-align:center;padding:26px 22px 20px;
  background:var(--mint);border:1px solid var(--mint-line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
}
.hero__card img{width:100%;max-width:330px;height:auto;margin-inline:auto}
.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:.9375rem;font-weight:600;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:800}

/* ---- inner page head */
.phead{padding:34px 0 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:.9375rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--gold-t)}
.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 — getexitide shipped without one, pushed the lot into
   the menu as a chip, crowded the navigation and still left the other four
   facts off the page (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(--iron-d);color:#b9c6c1;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:7px;height:4px;flex:0 0 auto;margin-right:11px;
  background:#6f8079;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.util b{color:#f0e3c6;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 103px 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 14px}
}


/* ---- the hero motif.

   Written by `hero_motifs.py mindhoneypros.com --write`, which owns everything
   between the marker below and the CRITICAL-END line. Do not hand-edit it and
   do not insert a comment inside it: the tool cuts from its marker to the next
   comment, so a comment in the middle of the block leaves the other half
   behind. (Nor may any comment here repeat the CRITICAL-END marker verbatim --
   tpl.py splits the stylesheet on that literal, and a second copy would
   truncate the inlined critical CSS on every page.)

   The recipe is `honey-orbit`, reserved to this domain; the sister desk at
   themindhoneypro.com sells the same capsule and holds `mind-trace`. It turns
   the label's own gold hexagon once every 34 seconds around the product and
   lifts a honey bloom past it on an 11-second cycle, so the two layers never
   line up twice in a viewing. Neither touches the <img>: that is preloaded and
   it is the LCP element.

   The reduced-motion rule takes both layers to opacity 0 rather than merely
   animation:none. `animation:none` alone PARKS a motif at its base state, and
   measured in Chrome on 19 Sep 2026 this hero's base state was the worst of
   both: the honeycomb resting at opacity 1, a 685px gold ring across the media
   column, and the perfusion glow at opacity 1 -- brighter than it ever is while
   moving, because its opacity lives only in its keyframes and peaks at .88.
   Ask for less motion, get the one broken hero. NEVER display:none: both layers
   are sized in percentages of .hero__media, and removing the box removes the
   containing block those percentages resolve against (pitfall 107).
   .hero__card keeps its opacity -- it holds the LCP image. */

/* ---- hero motif -- honey-orbit ---------------------------------------- */
.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(ellipse 116% 88% at 76% 10%,#f6ecd4 0%,#e9ecee 46%,#dfe4e7 100%)}.hero__media::before{content:'';position:absolute;left:50%;top:-9%;width:132%;aspect-ratio:1;translate:-50% 0;background:linear-gradient(140deg,rgba(200,136,15,0.62),rgba(229,173,44,0.30) 54%,rgba(200,136,15,0.52));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%,50% 0,50% 2.1%,3.6% 26.1%,3.6% 73.9%,50% 97.9%,96.4% 73.9%,96.4% 26.1%,50% 2.1%);animation:mhComb 34s linear infinite;z-index:0;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;bottom:-6%;width:118%;aspect-ratio:1.4;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(229,173,44,0.50),rgba(229,173,44,0.15) 56%,transparent 78%);filter:blur(16px);animation:mhPerfuse 11s ease-in-out infinite;z-index:0;pointer-events:none}@keyframes mhComb{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes mhPerfuse{0%,100%{transform:translateY(18%) scale(.92);opacity:.30}52%{transform:translateY(-28%) scale(1.06);opacity:.88}}
@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}
/* The masthead is sticky and two rows tall, so an in-page jump -- the hero's
   "See the pricing", the AI summary, the FAQ -- lands the heading UNDERNEATH
   it. Measured in Chrome on 19 Sep 2026 by clicking that link with the rule
   switched off: the pricing H2 landed at y=12 under a 154px masthead at 1440,
   and at y=80 under a 118px one at 390 -- hidden in both. With the rule it
   clears the bar at both widths. --navh is measured and published by site.js;
   the literal is the desktop two-row height and covers the frames before that
   runs. :where() keeps the specificity at zero so any section rule still
   wins. */
:where(section[id],div[id],h2[id]){scroll-margin-top:calc(var(--navh,112px) + 14px)}
.sec--tint{background:var(--paper-2)}
.sec--panel{background:var(--panel)}
.sec--mint{background:var(--mint-2)}
.sec--dark{background:var(--iron-d);color:#d3ded8}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c3cfca}
.sec--dark .eyebrow{color:var(--gold)}
.sec--dark .eyebrow::before{background:var(--gold)}
.sec--dark a{color:#f0cd7a}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#c3cfca}

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

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--mint-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:800;color:#fff;background:var(--iron);font-size:.9375rem}
tbody tr:nth-child(even){background:var(--mint)}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--iron-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}
.step{position:relative;background:var(--mint);border:1px solid var(--mint-line);border-radius:var(--radius);padding:20px 22px 20px 72px;min-width:0}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:38px;height:38px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--gold),var(--gold-b));color:var(--iron-d);
  font-family:var(--display);font-weight:800;font-size:1.02rem;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: a mint plate with a honeycomb notch at the top-left */
.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(--mint);border:1px solid var(--mint-line);border-radius:var(--radius);padding:26px 22px 22px;overflow:hidden}
.card::before{
  content:"";position:absolute;left:18px;top:0;width:34px;height:14px;
  background:var(--gold-b);clip-path:polygon(0 0,100% 0,75% 100%,25% 100%);
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#2b3337;border-color:#3d484d}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #e6d4a8;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--iron-d)}
.callout p:last-child{margin:0}
.alert{background:#fdf4e7;border:1px solid #eed9b6;border-left:4px 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.18rem;font-weight:600;line-height:1.5;color:var(--iron-d);border-left:4px solid var(--gold-b);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(--mint-line);border-top:4px solid var(--gold-b);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 `1fr` (= minmax(auto,1fr)) reintroduces that
   floor that the desktop minmax(0,1fr) avoids. min-width:0 is the fix, and it
   belongs on the items at every width rather than only in the media query
   (pitfall 79). */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--mint-line);border-radius:var(--radius);background:var(--panel)}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats>div{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2rem;font-weight:800;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#b9c6c1;margin-top:4px}

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

/* ---- 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 one of these
   labels renders past 200px wide, which sets the floor. 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(--mint);border:1px solid var(--mint-line);border-radius:var(--radius);padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:800;color:var(--iron-d);background:var(--gold);padding:4px 14px;border-radius:999px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin:0 0 20px}
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--mint-line);border-radius:var(--radius-lg);overflow:hidden;position:relative;min-width:0}
.card--pack::before{display:none}
/* No lift on the featured card. A `margin-top:-12px` raises its box, which
   makes it 12px 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 gold border, its deeper shadow, its coloured head band
   and its flag. */
.card--pack.featured{border-color:var(--gold-b);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--mint);border-bottom:1px solid var(--mint-line);padding:14px 20px;display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:linear-gradient(120deg,var(--iron),var(--iron-d));border-bottom-color:var(--iron-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.06rem;font-weight:800}
.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(--gold-b);color:var(--iron-d);font-family:var(--display);font-size:.75rem;font-weight:800;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,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.1rem;font-weight:800;color:var(--iron-d);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;font-weight:700;top:-.7em}
.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:800}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:600}
.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(--mint);border:1px solid var(--mint-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(--iron-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(--mint-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(--iron-d)}
.badgewall span{font-size:.9375rem;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(--gold-b))}
.stars{color:var(--gold-b);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(--mint-line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--mint-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:1rem;color:var(--iron-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(--gold-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. At 390 that pushed a single <a> past the viewport
   on eleven pages of another site — 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(--mint);border:1px solid var(--mint-line);border-left:4px solid var(--gold-b);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(--gold),var(--gold-b));color:var(--iron-d);font-family:var(--display);font-weight:800;font-size:1rem;border-radius:var(--radius)}
.byline>div{min-width:0}
.byline b{display:block;margin-bottom:6px;color:var(--iron-d)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--mint-line);border-top:4px solid var(--gold-b);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:180px}
.final__body{min-width:0}
.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 a{display:block;background:var(--mint);border:1px solid var(--mint-line);border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .18s ease;min-width:0}
.rel a:hover{border-color:var(--gold-b);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1rem;color:var(--iron-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:.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(--mint);border:1px solid var(--mint-line);border-radius:var(--radius);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--iron-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(--mint);border:1px solid var(--mint-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}

/* ---- AI factsheet block */
.qa{background:var(--panel);border:1px solid var(--mint-line);border-radius:var(--radius);padding:22px 24px;margin:0 0 1.2em}
.qa>p{color:var(--ink-2)}
.qa .tablewrap{margin-bottom:0}

/* ---- footer: a narrow closing strip, then four RANKS of destinations.
   Every other footer on this estate is a column grid. This one runs the links
   as four horizontal ranks, each labelled at its left, which is the slot's
   arrangement and reads as an index rather than as a sitemap. */
.fcta{background:linear-gradient(140deg,var(--iron) 0%,var(--iron-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__txt{min-width:0}
.fcta__eye{display:inline-block;font-family:var(--display);font-size:.8125rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.42rem;font-weight:800;line-height:1.22;margin:0 0 10px}
.fcta p{color:#c3cfca}
.fcta__sm{font-size:.9375rem;color:#a7b4af;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#f0cd7a}
.fcta__img img{width:250px}
footer{background:var(--panel)}
.fstrip{background:var(--mint-2);border-bottom:1px solid var(--mint-line)}
.fstrip__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 26px;padding-block:14px;font-size:.9375rem;color:var(--ink-2);text-align:center}
.fstrip__row b{color:var(--iron-d)}
.fbrand{font-family:var(--display);font-size:1.34rem;font-weight:800;color:var(--iron-d);letter-spacing:-.01em;line-height:1}
.fbrand span{color:var(--gold-b)}
.fgrid{display:grid;gap:0;padding:34px 0 22px}
.frank{display:grid;grid-template-columns:172px minmax(0,1fr);gap:10px 22px;align-items:baseline;padding-block:14px;border-top:1px solid var(--line)}
.frank:first-child{border-top:0;padding-top:0}
.fh{font-family:var(--display);font-size:.8125rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0}
.frank ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 22px;min-width:0}
.frank 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(--gold-t)}
.fcard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 30px;padding:20px 0;border-top:1px solid var(--line)}
.fcard p{font-size:.9375rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--iron-d)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 14px}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--paper-2);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(--iron-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:18px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:5px;background:var(--gold-b);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.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(--iron-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:#b9c6c1}
.buybar .btn{margin-left:auto;flex:0 0 auto}

/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- responsive */
@media (max-width:1100px){
  .frank{grid-template-columns:1fr;gap:6px}
}
@media (max-width:980px){
  :root{--navh:104px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__top{grid-template-columns:auto 1fr auto}
  .nav__lead{display:none}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--mint-line);letter-spacing:.08em}
  .menu a[aria-current="page"]{border-bottom-color:var(--mint-line)}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
  .fcard{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Four seal plates in a 724px wrap resolve to 168px each, measured at 768.
     A 74px mark with a heading and a sentence under it needs more than that,
     so the wall drops to two columns a breakpoint earlier than the rest. */
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:17px}
  .sec{padding:44px 0}
  .hero{padding:34px 0 42px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it is pushed to the right of a line with no room for it and overhangs
     the card edge. On a phone let it sit at the start of its own line and wrap
     its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .fcard{grid-template-columns:1fr}
  .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}
  .bw b{font-size:1.24rem}
}

/* ---- hero: the bottle breathes on its mint 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}
@media (prefers-reduced-motion:no-preference){
  .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: this masthead is two rows and
   its height changes between breakpoints, so a hardcoded offset would tuck the
   bottle under the bar at one width and leave a gap at another.

   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, 96px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 96px) - 28px);
    min-height: calc(100svh - var(--navh, 96px) - 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 but the
   blurbs are different lengths, so without these three rules the CTAs sit at
   three heights. The height lives here and not on the <img> attributes on
   purpose: those must keep stating each file's true ratio, or fix_img_dims.py
   rewrites them and CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* ==== 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>figure:only-child{grid-column:1/-1;max-width:calc((100% - 40px) / 3);margin-inline:auto}
/* brand mark: bare construction */
.brand svg.brand__glyph{background:none!important}