/* gethoneypower.com - HoneyPower, USA authorized retail desk.
   Design slot, row 314 of batch8_assignments.py: EB Garamond / Gantari, a
   lavender-grey ground with white cards, a header built as a slim band above a
   taller plate on one shared background, a footer whose destination headings
   sit on drawn rules, and the honey-draw hero motif.

   The accent is the bottle's, not the reference site's. HoneyPower ships black
   with a gold comb pattern and a gold droplet mark, so the ramp is honey over a
   cool lavender-grey - warm marks on a cool ground, which is the one colour
   relationship no other desk on this estate is using.

   en-gelagen.com contributed the COMPONENT REGISTER only: wide corner radii, a
   soft low shadow, a generous reading size, a notice band above the masthead.
   None of its palette, copy, headings or claims travel.

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

   NOTE on this comment block: no closing brace appears in it on purpose.
   validate.py reads the first brace-terminated block as the custom-property
   declaration list, so a brace here would truncate it and every token in the
   sheet would report as undefined. */

/* ---- tokens */
:root{
  --ink:#1c1726;            /* body text, a near-black with the label's violet cast */
  --ink-2:#4b4460;          /* secondary */
  --ink-3:#6f6886;          /* captions, meta */
  --dark:#171320;           /* the bottle itself */
  --dark-2:#241d31;
  --dark-3:#33294a;
  --gold:#d19a2c;           /* the comb pattern and the droplet mark */
  --gold-d:#9a6f14;         /* the same honey, dark enough to set type in */
  --gold-soft:#f0dcab;
  --wash:#fbf3e3;           /* honey wash */
  --paper:#eceaf2;          /* the page: lavender-grey */
  --panel:#ffffff;
  --tint:#e2def0;
  --line:#dcd7e8;
  --line-2:#c4bcd8;
  --good:#1c7a52;
  --warn:#8a5a10;
  --wrap:1180px;
  --measure:760px;
  --measure-wide:980px;
  --radius:10px;
  --radius-lg:22px;
  --radius-xl:32px;
  --shadow:0 2px 4px rgba(28,23,38,.04), 0 14px 36px -18px rgba(28,23,38,.28);
  --shadow-lg:0 30px 60px -28px rgba(28,23,38,.42);
  --navh:112px;
  --display:"EB Garamond",Georgia,"Times New Roman",serif;
  --text:"Gantari",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-d);text-underline-offset:3px}
a:hover{color:var(--dark-3)}
h1,h2,h3,h4{font-family:var(--display);color:var(--dark);font-weight:700;line-height:1.14;margin:0 0 .5em}
h1{font-size:clamp(2.15rem,1.34rem + 2.5vw,3.35rem);letter-spacing:-.012em}
h2{font-size:clamp(1.62rem,1.24rem + 1.4vw,2.4rem);letter-spacing:-.008em}
h3{font-size:1.34rem;font-weight:700;letter-spacing:-.004em}
h4{font-size:1.14rem;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(--dark);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it. A drawn hex cell, the
   smallest unit of the comb printed on the bottle. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:.8125rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);
  margin:0 0 12px;
}
.eyebrow::before{
  content:"";width:11px;height:12px;background:var(--gold);
  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:1rem;font-weight:700;letter-spacing:.01em;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:linear-gradient(135deg,var(--dark-2) 0%,var(--dark) 100%);color:#fff;
  transition:filter .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn:hover{filter:brightness(1.22);color:#fff}
.btn:active{transform:translateY(1px)}
/* The accent button. `btn--cyan` is the estate's class name for it and the
   shared post-build passes key off that literal, so the NAME stays and only the
   ink changes. Dark type on honey, because white on this gold reads at 2.2:1. */
.btn--cyan{background:linear-gradient(135deg,var(--gold) 0%,#e5b143 100%);color:var(--dark)}
.btn--cyan:hover{color:var(--dark);box-shadow:0 10px 26px -12px rgba(209,154,44,.9)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.06rem}
.btn--ghost{background:none;color:var(--dark);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--panel);color:var(--dark)}
.btn--wide{width:100%}

/* ---- header: a slim band above, a taller plate below, one shared ground.
   The two tiers are divided by a hairline and nothing else - no tint, no second
   colour - which is what the slot asks for and what keeps this masthead apart
   from the recessed-strip headers elsewhere on the estate. */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);box-shadow:0 1px 0 var(--line)}
/* padding-BLOCK, never the shorthand. These elements also carry .wrap, and
   `padding:8px 0` would zero padding-inline and wipe the page gutter - which is
   invisible above the container max-width and which no overflow test can see
   (pitfall 46). */
.nav__band{display:flex;align-items:center;gap:6px 20px;flex-wrap:wrap;padding-block:7px;
  border-bottom:1px solid var(--line);font-size:.8125rem;color:var(--ink-3)}
.nav__band b{color:var(--dark);font-weight:700}
.nav__band a{color:var(--ink-2);text-decoration:none}
.nav__band a:hover{color:var(--gold-d)}
.nav__links{margin-left:auto;display:flex;gap:18px;list-style:none;margin-block:0;padding:0}
.nav__top{display:flex;align-items:center;gap:20px;padding-block:14px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--dark)}
.brand__glyph{width:38px;height:38px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class: brand_marks.py rewrites the
   <svg> inside .brand and does not carry the class onto its replacement, so a
   rule keyed only to the class stops applying the moment that tool runs and the
   glyph renders at its intrinsic size (pitfall 16). */
.brand>svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.06}
.bw b{font-family:var(--display);font-size:1.62rem;font-weight:700;letter-spacing:-.01em}
.bw b em{font-style:normal;color:var(--gold-d)}
.bw small{font-size:.75rem;font-weight:600;color:var(--ink-3);letter-spacing:.04em}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav__price{text-align:right;line-height:1.2;min-width:0}
.nav__price b{display:block;font-family:var(--display);font-size:1.28rem;font-weight:700;color:var(--dark)}
.nav__price span{font-size:.78125rem;font-weight:600;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 24px;font-size:.95rem}
.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(--dark);margin:0 0 5px}
.burger span:last-child{margin:0}
.nav__strip{background:var(--panel);border-top:1px solid var(--line)}
.menu{
  display:flex;flex-wrap:wrap;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(--text);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--dark)}
.menu a[aria-current="page"]{color:var(--dark);border-bottom-color:var(--gold)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the bottle RIGHT on a raised white card */
.hero{position:relative;background:var(--paper);padding:54px 0 62px;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}
.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(--line);
  border-left:5px solid var(--gold);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  padding:22px 26px;margin:0 0 18px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.06rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:.925rem;font-weight:600;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px;min-width:0}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight:800}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.875rem;font-weight:600;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 15px;border-radius:999px;min-width:0;
}
.factpills li b{color:var(--dark);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);padding:14px 16px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.62rem;font-weight:700;color:var(--dark);line-height:1.08}
.figures span{display:block;font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-top:3px}
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-xl);padding:26px 22px 20px;
  box-shadow:var(--shadow-lg)}
.hero__card img{width:100%;max-width:330px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 22px 34px rgba(23,19,32,.34))}
.hero__cap{margin:16px 0 0;font-size:.8125rem;font-weight:600;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:.875rem;font-weight:600;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:800}

/* ---- inner page head */
.phead{padding:34px 0 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(--gold-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 facts a buyer wants before reading anything -
   role, lot, dose and count, guarantee, order desk. It sits ABOVE the header so
   the navigation does not have to carry them, and its CSS sits above
   CRITICAL-END because it is the first thing painted; appended to the end of
   the sheet it would load async and flash unstyled at the very top of the page.
   The lot and the dose are trimmed on phones, where five items wrap to three
   lines and eat a tenth of the screen. */
.util{background:var(--dark);color:#bdb3d0;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:11px;height:12px;flex:0 0 auto;
  background:#5a4a7a;margin-right:11px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.util b{color:#f3ecdb;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}

/* `animation:none` alone does NOT disable a motif -- it PARKS it at its base
   state, and both layers below declare their opacity ONLY in their keyframes,
   so the base state of each is opacity 1. hpDraw never exceeds .88 and hpComb
   never exceeds .72: asking for less motion therefore rendered the blurred gold
   column and the 152%-wide comb outline MORE strongly than any frame of the
   animation, and left them there. The .hero gradient stays; the moving layers go.

   NEVER display:none here. Both layers are sized in percentages of
   .hero__media, and removing the box removes the containing block those
   percentages resolve against -- pitfall 107 itself, which would make the two
   motion states disagree on width. opacity:0 keeps the box.

   .hero__card is deliberately NOT given opacity:0: it holds the product image,
   which is the LCP element. */
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}


/* ---- hero motif -- honey-draw ---------------------------------------- */
.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(186deg,#e7dcce,#eceaf2 54%,#e3d0b3)}.hero__media::before{content:'';position:absolute;left:50%;top:-20%;width:18%;height:152%;translate:-50% 0;transform-origin:50% 0;border-radius:999px;background:linear-gradient(180deg,rgba(209,154,44,0.58),rgba(154,111,20,0.40) 58%,transparent 94%);filter:blur(9px);animation:hpDraw 9s cubic-bezier(.36,0,.5,1) infinite;z-index:1;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;bottom:-9%;width:130%;aspect-ratio:1/.3;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(209,154,44,0.44),transparent 74%);filter:blur(14px);animation:hpPool 9s ease-in-out 1.1s infinite;z-index:0;pointer-events:none}@keyframes hpDraw{0%{transform:translateY(-44%) scaleY(.48);opacity:0}16%{opacity:.66}60%{transform:translateY(5%) scaleY(1.05);opacity:.82}100%{transform:translateY(32%) scaleY(.6);opacity:0}}@keyframes hpPool{0%,100%{transform:scale(.74,.68);opacity:.16}54%{transform:scale(1.05,1.04);opacity:.6}}
@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:64px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--dark);color:#ded6ea}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c9c0da}
.sec--dark .eyebrow{color:var(--gold-soft)}
.sec--dark .eyebrow::before{background:var(--gold)}
.sec--dark a{color:var(--gold-soft)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec--wedge{background:var(--panel);border-top:3px solid var(--gold)}
.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:#c9c0da}

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

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:14px 17px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--text);font-weight:700;color:#fff;background:var(--dark);font-size:.9375rem;letter-spacing:.02em}
tbody tr:nth-child(even){background:#faf8fd}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--dark)}
.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-lg);padding:22px 24px 22px 74px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:22px;top:21px;width:38px;height:38px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--gold),#e5b143);color:var(--dark);
  font-family:var(--display);font-weight:700;font-size:1.1rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards */
.grid{display:grid;gap:18px}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT, so any
   card holding a table or a nowrap chip refuses to shrink below it and hangs
   off the side of a phone with nothing to scroll and nothing to report. */
.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-lg);padding:26px 24px 24px;overflow:hidden}
.card::before{
  content:"";position:absolute;left:24px;top:0;width:13px;height:14px;
  background:var(--gold);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.card h3{margin:10px 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:var(--dark-2);border-color:#3a3050}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid var(--gold-soft);border-radius:var(--radius-lg);padding:22px 24px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--dark)}
.callout p:last-child{margin:0}
.alert{background:#f6f2fb;border:1px solid var(--line-2);border-left:5px solid var(--dark-3);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:22px 24px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--dark-3)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.46rem;font-weight:600;line-height:1.44;color:var(--dark);border-left:4px solid var(--gold);padding:4px 0 4px 24px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;font-weight:400;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:22px 24px;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:36px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* Same floor as .grid above. A .tablewrap holding a 520px-min table keeps its
   column 520px wide however narrow the grid gets unless the item can shrink. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius-lg);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.4rem;font-weight:700;color:#fff;line-height:1.08}
.stats div span{display:block;font-size:.9375rem;color:#bdb3d0;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-lg);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:14px 17px;border-bottom:1px solid var(--line);font-size:.98rem;min-width:0}
.versus>div:nth-child(3n+1){font-weight:700;background:#faf8fd}
.versus__h{background:var(--dark)!important;color:#fff!important;font-family:var(--text);font-weight:700;font-size:.92rem;letter-spacing:.02em}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* .ing__dose is white-space:nowrap, so without this the chip sets the card's
   min-content width and the card refuses to shrink to a phone. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px}
.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(--dark);background:var(--gold-soft);padding:5px 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}
.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-xl);overflow:hidden;position:relative}
.card--pack::before{display:none}
/* No lift on the featured card: a negative margin makes it taller than its
   siblings and breaks the one-height, one-button-baseline rule the pricing row
   is measured against. The accent border, the deeper shadow, the filled head
   band and the flag already make it unmistakable. */
.card--pack.featured{border-color:var(--gold);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:15px 22px;display:flex;align-items:center;gap:10px;min-width:0}
.card--pack.featured .pack__head{background:linear-gradient(135deg,var(--dark-2),var(--dark));border-bottom-color:var(--dark)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.22rem;font-weight:700}
.pack__head span{font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--gold);color:var(--dark);font-family:var(--text);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px;min-width:0}
.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.6rem;font-weight:700;color:var(--dark);line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1rem;font-weight:700;top:-.8em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:600;color:var(--ink-3);margin:5px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:700}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight: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 figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:17px 19px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--dark)}
.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-lg);padding:20px 16px}
.badgewall img{width:100%;max-width:158px;height:78px;object-fit:contain;margin:0 auto 12px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px;color:var(--dark)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px minmax(0,1fr) 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-d))}
.stars{color:var(--gold);letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line);border-radius:var(--radius-lg);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:18px 48px 18px 22px;cursor:pointer;position:relative;list-style:none;font-family:var(--display);font-weight:700;font-size:1.16rem;color:var(--dark)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;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 22px 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 an 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:5px solid var(--gold);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:24px 26px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;background:linear-gradient(140deg,var(--dark-2),var(--dark));color:var(--gold-soft);font-family:var(--display);font-weight:700;font-size:1.16rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--dark)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:32px 34px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center}
.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-lg);padding:22px 24px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--gold);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.2rem;color:var(--dark);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 15px;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-lg);padding:22px 26px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--dark)}
.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-lg);padding:24px 26px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1rem;color:var(--ink-2)}
.dtable{min-width:520px}
/* A figure inside an article column. Without this it inherits the UA's
   `margin:1em 40px`, which indents the picture against every paragraph around
   it and reads as a mistake. */
.article figure{margin:0 0 1.4em;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.article figure img{width:100%}
.article figure.portrait{padding:20px 0 0}
.article figcaption{padding:16px 22px;font-size:.9375rem;color:var(--ink-2)}

/* ---- footer: a dark closing plate, then ranks of destinations whose headings
   sit on drawn rules, then the legal rail */
.fcta{background:linear-gradient(140deg,var(--dark-2) 0%,var(--dark) 100%);color:#fff;padding:56px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.86rem;font-weight:700;line-height:1.2;margin:0 0 10px}
.fcta p{color:#c9c0da}
.fcta__sm{font-size:.9375rem;color:#a89dbd;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:var(--gold-soft)}
.fcta__img img{width:260px}
footer{background:var(--panel)}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:28px;padding:48px 0 34px}
.fgrid>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.9rem;font-weight:700;color:var(--dark);letter-spacing:-.01em;line-height:1}
.fbrand span{color:var(--gold-d)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 14px}
.fcard p{font-size:.9375rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--dark)}
/* the drawn rule each rank heading sits on */
.fh{font-family:var(--text);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;padding-top:11px;border-top:2px solid var(--gold)}
.fgrid ul{list-style:none;margin:0 0 22px;padding:0}
.fgrid li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back
   (pitfall 82). */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--gold-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:22px 0;border-top:1px solid var(--line)}
/* Four seals of two different shapes ship in this pack: three at 500x300 and
   one at 551x553. Fix the HEIGHT and let the width follow, or the square one
   renders half again as wide as the others on the same rule. */
.fseals img{width:auto;height:36px;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:30px 0 34px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--dark)}
.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:.6em;width:9px;height:10px;background:var(--gold);
  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(--dark);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:#bdb3d0}
.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){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:26px}
}
@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__price{display:none}
  .nav__links{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(--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}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:46px 0}
  .hero{padding:34px 0 44px}
  .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 onto a line with no room for it and overhangs the edge.
     On a phone it starts its own line and wraps its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .fgrid{grid-template-columns:1fr 1fr;gap:24px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .fgrid{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
  .hero__card{padding:18px 14px 16px}
}

/* ---- hero: the bottle breathes on its plate ------------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity 0 is not recorded as painted. The float goes on the CARD
   and never on the <img>, which is preloaded. hero_motifs.py owns the draw and
   the comb around it. */
.hero__card{isolation:isolate}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:hpFloat 9s 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
   scrolled past. --navh is measured and published by site.js: this header is
   three tiers and its height changes between breakpoints, so a hardcoded offset
   tucks the plate under the bar.

   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; }
}

/* --- the 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 shots are three different shapes -
   466x900, 1200x781 and 1143x969 - so without a fixed slot height they 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. */
.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.s2>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 20px) / 2);margin-inline:auto}