/* getalkameltdrops.com — Alka Melt Drops, U.S. stocking partner desk.
   Design slot row 313 (batch8_assignments.py): Bebas Neue / Readex Pro, a
   burnt-orange cream ground, a header built as one WIDE PLATE carrying the
   identity with the destinations right-aligned inside it, a footer whose method
   statement sits left and whose destinations are massed on the right, and the
   melt-run hero motif.

   The colour is taken from the bottle: an amber glass dropper under a gold
   label, deep indigo type, a red roundel. Burnt orange carries the label; the
   indigo carries the headings so nothing has to be read off the amber.

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

/* ---- tokens */
:root{
  --ink:#2b2340;            /* body text */
  --ink-2:#5c5273;          /* secondary */
  --ink-3:#877d9b;          /* captions, meta */
  --indigo:#2e2a5e;         /* the label's type */
  --indigo-d:#211e48;       /* deep */
  --indigo-2:#3b3672;
  --burn:#b25c07;           /* burnt orange, safe on white */
  --burn-d:#8c4304;         /* deeper, for small text */
  --amber:#e89a22;          /* the label's gold */
  --amber-l:#f6c05a;
  --wash:#fdf0dc;           /* amber wash */
  --paper:#fbf3e7;          /* the page: burnt-orange cream */
  --panel:#ffffff;
  --tint:#f6e8d3;
  --line:#ebdac1;
  --line-2:#d7be9c;
  --good:#2e7d4f;
  --warn:#9a5a12;
  --wrap:1180px;
  --measure:760px;
  --measure-wide:980px;
  --radius:10px;
  --radius-lg:20px;
  --shadow:0 1px 2px rgba(43,35,64,.05), 0 12px 32px rgba(43,35,64,.08);
  --shadow-lg:0 22px 58px rgba(140,67,4,.20);
  --navh:96px;
  --display:"Bebas Neue",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --text:"Readex Pro",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.74;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--indigo);text-underline-offset:3px}
a:hover{color:var(--burn-d)}
/* Bebas Neue is a single-weight display face with no lowercase of its own, so
   the hierarchy is carried by SIZE and TRACKING here and by weight in the text
   face. h3/h4 stay in Readex Pro: a card title set in caps beside a caps
   eyebrow and a caps H2 is three shouts in ninety pixels. */
h1,h2{font-family:var(--display);color:var(--indigo);font-weight:400;
  line-height:1.03;letter-spacing:.012em;margin:0 0 .34em}
h3,h4{font-family:var(--text);color:var(--indigo);font-weight:600;
  line-height:1.3;margin:0 0 .5em}
/* Bebas is condensed, so it carries more characters per line than a normal
   face at the same size and the ceilings sit lower than they look. Measured
   against this site's own 14-word H1: at 3.6rem it lands in four lines at 1440
   and keeps the Quick Answer on the first screen. */
h1{font-size:clamp(2.3rem,1.5rem + 2.4vw,3.6rem)}
h2{font-size:clamp(1.95rem,1.5rem + 1.7vw,2.85rem)}
h3{font-size:1.18rem}
h4{font-size:1.04rem}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.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(--amber);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it, and it is drawn as a
   tinted chip rather than a rule, so it reads as a label at a glance */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--text);font-size:.84375rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--burn-d);
  background:var(--wash);border:1px solid var(--line);
  padding:5px 13px;border-radius:999px;margin:0 0 12px;
}
.eyebrow::before{
  content:"";width:9px;height:11px;flex:0 0 auto;background:var(--amber);
  border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
}

/* ---- 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(104deg,var(--indigo-d) 0%,var(--indigo-2) 100%);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.14);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--cyan{background:linear-gradient(104deg,var(--burn-d) 0%,var(--burn) 100%)}
.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 wide plate, identity left, destinations right-aligned
   inside the same plate. padding-BLOCK on .nav, never the shorthand: a
   `padding:12px 0` on an element that also carries .wrap sets padding-inline
   to 0 and wipes the page gutter, invisibly above the container max-width
   (pitfall 46). .nav__plate does NOT carry .wrap, so its shorthand is safe. */
.nav{position:sticky;top:0;z-index:100;background:var(--paper);padding-block:12px}
.nav__plate{
  display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:10px 12px 10px 20px;
}
.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 carry the class onto the replacement, so a
   rule keyed only to .brand__glyph stops applying the moment the tool runs and
   the glyph renders at its intrinsic size (pitfall 16). */
.brand>svg{width:36px;height:36px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1}
.bw b{font-family:var(--display);font-size:1.62rem;font-weight:400;letter-spacing:.02em}
.bw b em{font-style:normal;color:var(--burn)}
.bw small{font-size:.75rem;font-weight:500;color:var(--ink-3);letter-spacing:.01em;margin-top:3px}
.menu{
  margin-left:auto;display:flex;flex-wrap:wrap;gap:0 22px;list-style:none;
  padding:0;margin-block:0;align-items:center;
}
.menu a{
  display:inline-block;padding:9px 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(--indigo)}
.menu a[aria-current="page"]{color:var(--indigo);border-bottom-color:var(--amber)}
.menu__more{display:none}
.nav__buy{min-height:46px;padding:11px 22px;font-size:.9375rem}
.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 the warm ground */
.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: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(--burn)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:5px solid var(--amber);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:.9688rem;font-weight:600;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.90625rem;font-weight:500;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 15px;border-radius:999px;
}
.factpills li b{color:var(--burn-d);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--amber);padding:13px 16px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:2rem;font-weight:400;color:var(--indigo);line-height:1}
.figures span{display:block;font-size:.90625rem;font-weight:500;color:var(--ink-3);margin-top:5px}
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px}
.hero__card img{width:100%;max-width:400px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 26px 40px rgba(140,67,4,.34))}
.hero__cap{margin:16px 0 0;font-size:.90625rem;font-weight:500;color:var(--ink-3);text-align:center}

/* ---- inner page head */
.phead{padding:34px 0 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:.90625rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--burn-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, what is in the bottle, the guarantee basis, and the order desk.
   It sits above the header so the navigation does not have to carry them, and
   it is 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. Lot and volume are trimmed on phones, where five items wrap to
   three lines and eat a sixth of the screen. */
.util{background:var(--indigo-d);color:#cbc3e4;font-size:.90625rem;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:5px;height:6px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:var(--amber);flex:0 0 auto;margin-right:11px}
.util b{color:#fff;font-weight:600}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:860px){
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}

/* Cancelling only the animation leaves the motif's LAST painted frame resting
   on screen: ::before is a blurred melt-run column and ::after a pooled disc,
   and both then sit there as static decoration for a visitor who asked their OS
   for less motion. Every gate reads clean either way, because no gate renders
   inside this query (pitfall 107). The layers are hidden, not merely stopped. */
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}


/* ---- hero motif -- melt-run ---------------------------------------- */
.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(172deg,#fbf3e7,#f8e3c4 50%,#f5d7a8)}.hero__media::before{content:'';position:absolute;left:50%;top:-26%;width:74%;height:150%;translate:-50% 0;background:repeating-linear-gradient(92deg,transparent 0 16%,rgba(232,154,34,0.44) 20%,transparent 30% 46%);mask-image:linear-gradient(180deg,transparent,#000 26%,#000 64%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 64%,transparent);filter:blur(13px);animation:amMelt 12s ease-in-out infinite;z-index:1;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;bottom:-4%;width:126%;height:30%;translate:-50% 0;border-radius:50%;background:radial-gradient(70% 100% at 50% 100%,rgba(232,154,34,0.50),transparent 72%);filter:blur(17px);animation:amPool 12s ease-in-out infinite;z-index:0;pointer-events:none}@keyframes amMelt{0%,100%{transform:translateY(-9%);opacity:.34}55%{transform:translateY(11%);opacity:.86}}@keyframes amPool{0%,100%{transform:translateY(7%);opacity:.30}55%{transform:translateY(0);opacity:.78}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:60px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--indigo-d);color:#ded9f0}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c9c2e2}
.sec--dark .eyebrow{color:#ffd69a;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.sec--dark a{color:#ffcf8c}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* the two quarantine sections get their own ground, so the blunt parts of the
   site are visibly a place rather than a tone that leaks everywhere */
.sec--honest{background:var(--wash);border-block:1px solid var(--line)}
.sec--honest .sec__head{border-left:5px solid var(--amber);padding-left:18px}
.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:#c9c2e2}

/* 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;font-size:1.0625rem}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.sec--dark .ticks li::before{color:#7fd6a6}

/* ---- 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:1rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--text);font-weight:700;color:#fff;background:var(--indigo);font-size:.90625rem;letter-spacing:.02em}
td{font-size:1rem}
tbody tr:nth-child(even){background:#fffaf1}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--indigo)}
.tnote{font-size:.90625rem;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(--panel);border:1px solid var(--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(--amber),var(--burn));color:#fff;
  font-family:var(--display);font-weight:400;font-size:1.3rem;
  border-radius:50% 50% 50% 50%/58% 58% 42% 42%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards */
.grid{display:grid;gap:18px}
.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))}
/* 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
   silently off the right of a phone. min-width:0 on the items, at every width. */
.grid>*,.steps>*,.inglist>*,.prices>*,.shots>*,.badgewall>*{min-width:0}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px 22px}
.card::before{
  content:"";position:absolute;left:22px;top:0;width:44px;height:5px;
  background:linear-gradient(90deg,var(--amber),var(--burn));border-radius:0 0 4px 4px;
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#2a2556;border-color:#403a7d}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid var(--line-2);border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--indigo)}
.callout p:last-child{margin:0}
.alert{background:#fdf5e6;border:1px solid #eedcb8;border-left:5px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--text);font-size:1.25rem;font-weight:500;line-height:1.55;color:var(--indigo);border-left:5px solid var(--amber);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;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:5px solid var(--amber);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px;font-size:1rem;color:var(--indigo)}
.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}
/* Same floor as the cards above: a `1fr` column is minmax(auto,1fr), and auto
   floors at min-content — a .tablewrap holding a 520px table keeps its column
   520px wide however narrow the grid gets, and the right half is clipped away
   by body{overflow-x:clip} with nothing to scroll and nothing to report. */
.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.6rem;font-weight:400;color:#fff;line-height:1}
.stats div span{display:block;font-size:.9375rem;color:#c9c2e2;margin-top:6px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr 1fr 1.25fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem;min-width:0}
.versus>div:nth-child(3n+1){font-weight:600;background:#fffaf1}
.versus__h{background:var(--indigo)!important;color:#fff;font-family:var(--text);font-weight:700;font-size:.9375rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;font-size:1.0625rem}
.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)}
/* white-space:nowrap plus margin-left:auto is what pushes this chip off the
   right edge of a narrow card, which is why the card carries min-width:0 above
   and why the chip unwraps on a phone at the foot of this sheet. */
.ing__dose{margin-left:auto;font-size:.875rem;font-weight:700;color:#fff;background:var(--burn-d);padding:4px 12px;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(--line);border-radius:var(--radius-lg);overflow:hidden;position:relative}
.card--pack::before{display:none}
/* No lift on the featured card. A negative margin raises its box, which makes
   it taller than its siblings and breaks the one rule a pricing row has to
   keep: one height and one button baseline across three cards. The accent
   border, the deeper shadow, the coloured head band and the flag already make
   it unmistakable. */
.card--pack.featured{border-color:var(--amber);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;min-width:0}
.card--pack.featured .pack__head{background:linear-gradient(104deg,var(--indigo-d),var(--indigo-2));border-bottom-color:var(--indigo)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.5rem;font-weight:400;letter-spacing:.02em;color:var(--indigo)}
.pack__head span{font-size:.84375rem;font-weight:600;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--burn);color:#fff;font-family:var(--text);font-size:.78125rem;font-weight:700;letter-spacing:.07em;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;min-width:0}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,166px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.1rem;font-weight:400;color:var(--indigo);line-height:1.05;text-align:center;letter-spacing:.02em;margin:0}
.pack__per sup{font-size:1rem;font-weight:400;top:-.7em}
.pack__unit{display:block;text-align:center;font-size:.90625rem;font-weight:600;color:var(--ink-3);margin:5px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:700}
.pack__was{color:var(--ink-3);font-weight:500;font-size:.90625rem}
.pack__perks{list-style:none;margin:0 0 18px;padding:0}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2);font-size:1.0625rem;line-height:1.55}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.84375rem;color:var(--ink-3)}
.buy__note{font-size:.90625rem;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 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;font-size:.9375rem}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--indigo);font-size:1rem}
.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 figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:1rem;margin-bottom:4px;color:var(--indigo)}
.badgewall span{font-size:.9375rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:78px 1fr 54px;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(--amber),var(--burn))}
.stars{color:var(--amber);letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target. */
.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(--text);font-weight:600;font-size:1.06rem;color:var(--indigo)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-size:1.34rem;font-weight:400;color:var(--burn)}
.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:1.0625rem;line-height:1.6;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(--amber);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(--indigo),var(--indigo-2));color:#fff;font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:.04em;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--indigo)}
.byline p{font-size:1rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--amber);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,.final__body{min-width:0}
.final__img img{width:210px}
.final h2{margin:0 0 10px}
.final__price{font-weight:600;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(--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;min-width:0}
.rel a:hover{border-color:var(--amber);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--text);font-weight:600;font-size:1.08rem;color:var(--indigo);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms the page on focus. */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:600;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:.9375rem;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:1rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts>article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;min-width:0}
.posts h3{margin:0 0 8px}
.posts p{font-size:1rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: the method statement on the LEFT, every destination massed on
   the RIGHT. One indigo CTA band, then the two-part grid, then the legal rail. */
.fcta{position:relative;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__txt,.fcta__img{min-width:0}
.fcta__eye{display:inline-block;font-size:.84375rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--amber-l);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:2.1rem;font-weight:400;line-height:1.1;letter-spacing:.015em;margin:0 0 10px}
.fcta p{color:#c9c2e2}
.fcta__sm{font-size:.9375rem;color:#a9a2c6;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#ffcf8c}
.fcta__img img{width:300px}
footer{background:var(--panel)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,2fr);gap:34px;padding-block:44px 30px}
.fcard{min-width:0}
.fbrand{font-family:var(--display);font-size:2.1rem;font-weight:400;color:var(--indigo);letter-spacing:.02em;line-height:1}
.fbrand span{color:var(--burn)}
.frole{font-size:.9688rem;color:var(--ink-2);margin:8px 0 14px}
.fcard p{font-size:.9688rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--indigo)}
.fmass{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 22px}
.fmass>div{min-width:0}
.fh{font-size:.84375rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fmass ul{list-style:none;margin:0 0 18px;padding:0}
.fmass 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 —
   a 17px link in 35px of row pitch responds as a 17px target otherwise. */
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(--burn-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:20px;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:0 26px;font-size:.9375rem}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--tint);border-top:1px solid var(--line);padding-block:28px 32px;font-size:.9375rem}
.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:.6em;width:7px;height:8px;background:var(--amber);border-radius:50% 50% 50% 50%/62% 62% 38% 38%}
.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;font-size:.9375rem}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;padding:12px 20px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#c9c2e2}
.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){
  .fmass{grid-template-columns:repeat(3,minmax(0,1fr))}
  .menu{gap:0 16px}
  .menu a{font-size:.90625rem}
}
@media (max-width:980px){
  :root{--navh:88px}
  .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}
  .factpills{order:10}
  .figures{order:11}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;width:100%;
    order:3;margin-left:0;padding:6px 0 4px;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)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .burger{display:block;margin-left:auto}
  .nav__buy{display:none}
  .fgrid{grid-template-columns:1fr;gap:26px}
  .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:44px 0}
  .hero{padding:32px 0 42px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The dose chip is white-space:nowrap 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 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}
  .fmass{grid-template-columns:repeat(2,minmax(0,1fr))}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
  .sec--honest .sec__head{padding-left:14px}
}
@media (max-width:440px){
  .fmass{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
  .nav__plate{padding:10px 12px}
}

/* ---- hero: the bottle stands in its own pool --------------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted.

   There is no card ground on this hero by design, so the bottle gets its own:
   a warm halo behind the glass and an elliptical shadow beneath it, both sized
   to the product rather than to the column. The melt run and the spreading pool
   around them belong to the motif block above CRITICAL-END. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:44%;translate:-50% -50%;
  width:80%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(232,154,34,.34),transparent 70%);
  z-index:0;pointer-events:none;
}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:30px;translate:-50% 0;
  width:50%;height:18px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(66,40,10,.40),transparent 74%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  /* The float goes on the CARD, never on the <img>: the image is the LCP
     element and it is preloaded. */
  .hero__card{animation:amFloat 8.5s ease-in-out infinite}
  @keyframes amFloat{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 rather than
   hardcoded: this header is one plate whose height changes with the breakpoint.

   min-height makes the sticky box a full screen tall so the bottle can be
   CENTRED inside it; without it the box is only as tall as the image and `top`
   merely pins it 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, `clip` included. */
@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 bottle shots are three different shapes
   (1600x1413, 1080x1080 and 1800x1286 here), 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 on
   every build 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,166px);
  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}