/* myhoneypower.com — HoneyPower, the U.S. stocking partner's desk.
   Design slot row 328 (batch8_assignments.py): Alegreya / Montserrat, a CREAM
   ground carrying DEEP-INDIGO slabs, a single header band with the price ladder
   stated at its right-hand end, a footer whose destinations run as one flowing
   inline list beneath a centred identity block, and the flow/draw-glow hero
   motif.

   The colour is taken from the bottle, not from the LOOKS FOR reference
   (alkaslean.com), which contributed its component rhythm and nothing else. The
   HoneyPower front label is gold-on-black honeycomb, so the accent is honey
   amber and the dark is pushed to indigo rather than to black — black slabs
   under a cream page read as a hole, indigo reads as a plate.

   Two contrast decisions worth stating, because both were measured:
     * the honey button carries INDIGO text, not white. White on #e0a323 is
       2.3:1 and unreadable; #1a1240 on the same gold is 7.9:1.
     * the eyebrow is #8f5c05 rather than the mid amber. The mid amber is
       4.38:1 against the panel, which is under the 4.5 floor for 12.5px text.

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

/* ---- tokens */
:root{
  --ink:#1c1733;            /* body text */
  --ink-2:#4d4668;          /* secondary */
  /* Captions and meta. #736c8c measured 4.28:1 against the --tint band, which
     is where the header's price-ladder labels sit at 11px. #6a6383 is 4.81:1
     there and 5.70:1 on the panel, so the same token clears the floor on both
     grounds instead of only on white. */
  --ink-3:#6a6383;
  --indigo:#2a1f5c;         /* the slab */
  --indigo-d:#1a1240;       /* deep */
  --indigo-2:#3c2d7e;
  --honey:#e0a323;          /* the label's gold */
  --honey-2:#c8891a;
  --honey-d:#8f5c05;        /* text-safe gold */
  --wash:#fbf0d8;           /* honey wash */
  --paper:#fbf5e9;          /* the page: cream */
  --panel:#ffffff;
  --tint:#f5ebd7;
  --line:#e7dcc5;
  --line-2:#cfc1a4;
  --good:#1d7a4f;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:10px;
  --radius-lg:18px;
  --shadow:0 1px 2px rgba(28,23,51,.05), 0 10px 30px rgba(28,23,51,.08);
  --shadow-lg:0 22px 60px rgba(26,18,64,.22);
  --navh:104px;
  --display:"Alegreya",Georgia,"Times New Roman",serif;
  --text:"Montserrat",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.76;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--indigo-2);text-underline-offset:3px}
a:hover{color:var(--honey-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--indigo);font-weight:800;line-height:1.14;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,1.32rem + 2.4vw,3.3rem);letter-spacing:-.012em}
h2{font-size:clamp(1.62rem,1.24rem + 1.3vw,2.38rem);letter-spacing:-.008em}
h3{font-size:1.26rem;font-weight:800}
h4{font-size:1.06rem;font-weight:800}
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(--indigo);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--honey-2);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:.78125rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--honey-d);
  margin:0 0 10px;
}
/* a drawn comb cell at the smallest scale — the bottle's own motif */
.eyebrow::before{
  content:"";width:13px;height:15px;flex:0 0 auto;background:var(--honey-2);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

/* ---- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 32px;
  font-family:var(--text);font-size:.99rem;font-weight:700;letter-spacing:.01em;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:linear-gradient(104deg,var(--indigo-d) 0%,var(--indigo-2) 100%);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.16);color:#fff}
.btn:active{transform:translateY(1px)}
/* Indigo text on the gold, never white — see the note at the top of this file. */
.btn--gold{background:linear-gradient(104deg,var(--honey-2) 0%,var(--honey) 100%);color:var(--indigo-d)}
.btn--gold:hover{color:var(--indigo-d)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.06rem}
.btn--ghost{background:none;color:var(--indigo);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--indigo-d)}
.btn--wide{width:100%}

/* ---- header: ONE band, price ladder stated at its right-hand end */
.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__band{display:flex;align-items:center;gap:22px;padding-block:14px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--indigo)}
.brand__glyph{width:36px;height:36px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class. brand_marks.py rewrites the
   <svg> inside .brand and does not 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:36px;height:36px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-family:var(--display);font-size:1.46rem;font-weight:800;letter-spacing:-.01em}
.bw b em{font-style:normal;color:var(--honey-d)}
.bw small{font-size:.72rem;font-weight:600;color:var(--ink-3);letter-spacing:.02em}

.menu{
  display:flex;flex-wrap:wrap;gap:0 24px;list-style:none;margin:0;padding:0;
  align-items:center;
}
.menu a{
  display:inline-block;padding:9px 0;font-family:var(--text);
  font-size:.875rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--indigo)}
.menu a[aria-current="page"]{color:var(--indigo);border-bottom-color:var(--honey)}
.menu__more{display:none}

/* the right-hand end: the three-step price ladder, then the order button */
.nav__ladder{margin-left:auto;display:flex;align-items:center;gap:14px}
/* flex:0 0 auto so the band squeezes the DESTINATIONS, which wrap, rather than
   the ladder, whose cells are white-space:nowrap and would overhang instead. */
.ladder{
  flex:0 0 auto;
  display:flex;align-items:stretch;gap:0;list-style:none;margin:0;padding:0;
  border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;
  background:var(--tint);
}
.ladder li{
  display:flex;flex-direction:column;justify-content:center;
  padding:5px 13px;border-right:1px solid var(--line-2);line-height:1.15;
  white-space:nowrap;
}
.ladder li:last-child{border-right:0}
.ladder li.is-best{background:var(--indigo);color:#fff}
.ladder b{font-family:var(--display);font-size:1.02rem;font-weight:800;color:var(--indigo)}
.ladder li.is-best b{color:var(--honey)}
.ladder span{font-size:.6875rem;font-weight:600;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.ladder li.is-best span{color:#cfc4ee}
.nav__buy{min-height:44px;padding:10px 20px;font-size:.9rem}
.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(--indigo);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: copy LEFT, the bottle RIGHT on a deep-indigo slab */
.hero{position:relative;background:var(--paper);padding:52px 0 60px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:46px;align-items:center;padding-block:0}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--honey-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px 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.0625rem}
.answer p:last-child{margin:0}
.hero__road{font-size:.99rem;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:.91rem;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:.8438rem;font-weight:600;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:999px;
}
.factpills li b{color:var(--indigo);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.56rem;font-weight:800;color:var(--indigo);line-height:1.1}
.figures span{display:block;font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-top:3px}

/* the slab the bottle stands on */
.hero__media{position:relative;align-self:center;min-width:0}
.hero__card{
  position:relative;z-index:2;text-align:center;padding:30px 26px 22px;
  background:linear-gradient(162deg,var(--indigo) 0%,var(--indigo-d) 100%);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
}
.hero__card img{width:100%;max-width:330px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.45))}
.hero__cap{margin:16px 0 0;font-size:.8125rem;font-weight:600;color:#b9aee6;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}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:800}

/* ---- 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.12rem;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 — a site without one pushes the lot into the menu as a
   chip, crowds the navigation and still leaves 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(--indigo-d);color:#bab0e2;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.util__item+.util__item::before{content:"";width:3px;height:3px;border-radius:50%;
  background:#584a94;flex:0 0 auto;margin-right:11px}
.util b{color:#f3e7c8;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 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}
}

/* ---- hero motif -- draw-glow ---------------------------------------- */
.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(168deg,#fbf5e9,#f6e6c5 52%,#fbf5e9)}.hero__media::before{content:'';position:absolute;left:50%;bottom:-8%;width:62%;height:126%;translate:-50% 0;border-radius:999px 999px 46% 46%;background:linear-gradient(0deg,rgba(224,163,35,0.46) 0%,rgba(224,163,35,0.30) 44%,transparent 84%);filter:blur(24px);animation:hpDraw 9s ease-in-out infinite;z-index:0;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:-14%;width:150%;aspect-ratio:1;translate:-50% 0;border-radius:50%;border:2px dashed rgba(224,163,35,0.50);animation:hpGlow 16s linear infinite;z-index:0;pointer-events:none}@keyframes hpDraw{0%,100%{transform:translateY(6%) scaleY(.94);opacity:.42}50%{transform:translateY(-6%) scaleY(1.04);opacity:.88}}@keyframes hpGlow{0%{rotate:0deg;opacity:.30}50%{opacity:.72}100%{rotate:360deg;opacity:.30}}
@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:62px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--indigo-d);color:#ddd6f4}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c9c0ea}
.sec--dark .eyebrow{color:var(--honey)}
.sec--dark .eyebrow::before{background:var(--honey)}
.sec--dark a{color:#f0cd7c}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* the indigo slab, set into the cream with a rule above it */
.sec--slab{background:var(--panel);border-top:5px solid var(--indigo);border-bottom:1px solid var(--line)}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#c9c0ea}

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

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

/* ---- cards: a comb cell tucked into the top-left corner */
.grid{display:grid;gap:18px}
.grid>*{min-width:0}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px 22px;overflow:hidden}
.card::before{
  content:"";position:absolute;left:-8px;top:-10px;width:34px;height:38px;
  background:var(--honey);opacity:.9;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#241a56;border-color:#3d2f7e}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #efdcb2;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--indigo)}
.callout p:last-child{margin:0}
.alert{background:#fdf5ea;border:1px solid #eedcbe;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.34rem;font-weight:700;line-height:1.5;color:var(--indigo);border-left:4px 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;font-weight:400;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--honey);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 the
   floor that minmax(0,1fr) avoids. Measured on a sibling site at 390: the grid
   box was 350px and its single column resolved to 522px, so the right-hand half
   was clipped away by body{overflow-x:clip} with nothing to scroll and nothing
   to report. min-width:0 belongs on the items at EVERY width, not only inside
   the 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>div{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.3rem;font-weight:800;color:var(--honey);line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#bab0e2;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:.97rem;min-width:0}
.versus>div:nth-child(3n+1){font-weight:700;background:#fdfaf3}
.versus__h{background:var(--indigo)!important;color:#fff;font-family:var(--display);font-weight:800;font-size:.95rem}

/* ---- 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 the longest of
   these chips renders well past 200px, which sets the floor and pushes the
   column wider than the phone. min-width:0 lets the card shrink; .ingcard__top
   already wraps, so the chip drops onto its own line and fits. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--honey);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:.875rem;font-weight:700;color:var(--indigo-d);background:var(--wash);border:1px solid #e9d5a6;padding:4px 12px;border-radius:999px;white-space:nowrap;min-width:0}
.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:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-lg);overflow:hidden;position:relative}
.card--pack::before{display:none}
/* No lift on the featured card. A `margin-top:-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 accent border, its deeper shadow, its coloured head
   band and its flag. (A transform would move it without changing the box, but
   the reveal animation overwrites transform — that is why the lift was a
   margin.) */
.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:linear-gradient(104deg,var(--indigo),var(--indigo-2));border-bottom-color:var(--indigo)}
.card--pack.featured .pack__head b{color:#fff}
.card--pack.featured .pack__head span{color:#cfc4ee}
.pack__head b{font-family:var(--display);font-size:1.2rem;font-weight:800}
.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:var(--indigo-d);font-family:var(--text);font-size:.7188rem;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}
.pack__per{font-family:var(--display);font-size:2.5rem;font-weight:800;color:var(--indigo);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;font-weight:700;top:-.75em}
.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;flex-wrap:wrap}
.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>*{min-width:0}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots.s1{grid-template-columns: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(--indigo)}
.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:100%;max-width:120px;height:auto;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:.99rem;margin-bottom:4px;color:var(--indigo)}
.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(--honey),var(--indigo))}
.stars{color:var(--honey-2);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:800;font-size:1.1rem;color:var(--indigo)}
.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.3rem;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. On a sibling site that pushed a single <a> past the
   390px viewport on eleven pages — clipped, unscrollable, and invisible to
   every static check. `anywhere` rather than `break-word` because it also lowers
   the element's MIN-CONTENT, which is what stops the ancestor being sized by the
   longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}

.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--honey);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:58px;display:grid;place-items:center;background:linear-gradient(140deg,var(--honey),var(--honey-2));color:var(--indigo-d);font-family:var(--display);font-weight:800;font-size:1.06rem;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.byline>div{min-width:0}
.byline b{display:block;margin-bottom:6px;color:var(--indigo)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--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:180px}
.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(--honey);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.12rem;color:var(--indigo);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(--indigo)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.0625rem}
.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:1.0625rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: indigo CTA slab, a CENTRED identity block, then every
   destination as one flowing inline list beneath it. */
.fcta{background:linear-gradient(140deg,var(--indigo) 0%,var(--indigo-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:700;letter-spacing:.16em;text-transform:uppercase;color:var(--honey);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.72rem;font-weight:800;line-height:1.22;margin:0 0 10px}
.fcta p{color:#c9c0ea}
.fcta__sm{font-size:.9375rem;color:#a99ed6;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#f0cd7c}
.fcta__img img{width:260px}

footer{background:var(--panel)}
.fid{text-align:center;max-width:720px;margin-inline:auto;padding:44px 0 26px}
.fbrand{font-family:var(--display);font-size:2rem;font-weight:800;color:var(--indigo);letter-spacing:-.01em;line-height:1}
.fbrand span{color:var(--honey-d)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:10px 0 16px}
.fid p{font-size:.9375rem;color:var(--ink-2);margin:0 0 .6em}
.fid b{color:var(--indigo)}
.fh{font-family:var(--text);font-size:.78125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;text-align:center}
/* the flowing inline list: every destination on one wrapped run, separated by
   a drawn comb cell rather than a pipe */
.flinks{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 0;list-style:none;margin:0 0 24px;padding:0}
.flinks li{display:inline-flex;align-items:center}
.flinks li+li::before{content:"";width:6px;height:7px;background:var(--line-2);margin:0 13px;flex:0 0 auto;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
/* 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:6px;margin-block:-6px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--honey-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 20px;padding:20px 0;border-top:1px solid var(--line)}
.fseals img{width:66px;height:auto;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;padding:0 0 26px}
.fpay img{width:220px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.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(--indigo)}
.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:7px;height:8px;background:var(--honey-2);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.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(--indigo-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:#bab0e2}
.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){
  /* The band cannot hold the wordmark, five destinations, a three-step ladder
     and a button at once. The destinations fold into the burger first, because
     the ladder is this header's whole idea. */
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;
    width:100%;order:9;padding:6px 0 12px;border-top:1px solid var(--line)}
  .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}
  .nav__band{flex-wrap:wrap}
}
@media (max-width:980px){
  :root{--navh:96px}
  .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}
  .ladder li:first-child,.ladder li:nth-child(2){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}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:46px 0}
  .hero{padding:34px 0 44px}
  .nav__buy{display:none}
  .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 and wrap
     its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .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}
  .ladder{display:none}
}

/* ---- hero: the slab breathes ----------------------------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted (hero.md). The float goes on
   the CARD, never on the <img>, which is preloaded. */
.hero__card{isolation:isolate}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:hpFloat 8.5s ease-in-out infinite}
  @keyframes hpFloat{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 band wraps, 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. Without it the box is only as tall as the image and `top` merely
   pins it under the header.

   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 product shots here are three different
   shapes — 466x900 tall, 1200x781 wide and 1143x969 square — so without these
   rules the images render at three sizes and the three CTAs sit at three
   heights.

   The height lives here and not on the <img> attributes on purpose: those must
   keep stating each file's true ratio, or fix_img_dims.py rewrites them and CLS
   gets worse (pitfall 91). */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,176px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}
/* brand mark: bare construction */
.brand svg.brand__glyph{background:none!important}