/* mysodamelt.com — SodaMelt, U.S. authorized retailer desk.
   Design slot (batch8_assignments.py, row 330): Neuton / Josefin Sans, a sage
   ground over warm white, a header plate whose left third is filled with solid
   sage behind the identity, and a footer built as an index with the lot
   reference and certificate stated beneath it.

   The palette problem this site had to solve: the assigned ground is sage and
   every product photograph is orange. So the sage is structural — the topline,
   the header plate, the section tints, the footer index — and the amber taken
   off the bottle is the ACTION colour: every order button, every flag, the
   brand rule under the wordmark, and the rising motif behind the product. The
   bottle then sits in its own warm light with sage framing it rather than
   fighting it.

   Type: Neuton is the display serif and carries every heading; Josefin Sans
   sets the reading text. Josefin runs a small x-height, so the body floor here
   is 17.5px rather than the 17px most of the estate uses.

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

/* ---- tokens */
:root{
  --ink:#20241d;            /* body text, warm near-black */
  --ink-2:#4b5346;          /* secondary */
  --ink-3:#6e7768;          /* captions, meta */
  --sage:#5d7f5f;           /* the ground colour of the slot */
  --sage-d:#36523a;         /* the header plate and the deep bands */
  --sage-2:#47694b;
  --bark:#242e20;           /* topline strip, legal rail */
  --amber:#c2721c;          /* the bottle's own orange */
  --amber-d:#9c5a12;        /* the same orange, at text contrast */
  --wash:#e8efe4;           /* sage wash */
  --paper:#f8f5ee;          /* the page: warm white */
  --panel:#ffffff;
  --tint:#eef1e7;
  --line:#ddd9cc;
  --line-2:#c3c0b0;
  --good:#3f7a4a;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:6px;
  --radius-lg:14px;
  --shadow:0 1px 2px rgba(32,36,29,.05), 0 10px 28px rgba(32,36,29,.07);
  --shadow-lg:0 22px 58px rgba(36,46,32,.20);
  --navh:104px;
  --display:Neuton,Georgia,"Times New Roman",serif;
  --text:"Josefin Sans",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:17.5px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sage-d);text-underline-offset:3px}
a:hover{color:var(--amber-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--sage-d);font-weight:800;line-height:1.14;margin:0 0 .5em}
h1{font-size:clamp(2.15rem,1.35rem + 2.4vw,3.35rem);letter-spacing:-.012em}
h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.35rem);letter-spacing:-.008em}
h3{font-size:1.28rem;font-weight:700}
h4{font-size:1.08rem;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(--sage-d);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 */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--text);font-size:.8125rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber-d);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:20px;height:2px;background:var(--amber);border-radius:2px;
}

/* ---- 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:.02em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:linear-gradient(104deg,var(--sage-d) 0%,var(--sage-2) 100%);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.12);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--amber{background:linear-gradient(104deg,var(--amber-d) 0%,var(--amber) 100%)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.08rem}
.btn--ghost{background:none;color:var(--sage-d);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--sage-d)}
.btn--wide{width:100%}

/* ---- header: a plate whose LEFT THIRD is solid sage behind the identity.
   The plate is painted as a hard-stop gradient on .nav itself rather than as a
   pseudo-element, so it is full-bleed at every width with nothing to clip and
   nothing that can widen the document. brand_marks.py reads the first colour
   token in this declaration to decide what the mark may be drawn in, which is
   another reason it lives here. */
.nav{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(90deg,var(--sage-d) 0 34%,var(--panel) 34%);
  box-shadow:0 1px 0 var(--line);
}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:14px 0` would set padding-inline to 0 and wipe the page gutter.
   Invisible above the container max-width, and no overflow test can see it
   (pitfall 46). */
.nav__top{display:flex;align-items:center;gap:20px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;min-width:0}
.brand__glyph{width:34px;height:34px;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 .brand__glyph stops applying the moment the tool runs and
   the mark renders at its intrinsic size (pitfall 16). */
.brand>svg{width:34px;height:34px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.bw b{font-family:var(--display);font-size:1.62rem;font-weight:800;letter-spacing:-.01em;color:#fff}
.bw b em{font-style:normal;color:#e6a765}
.bw small{font-size:.75rem;font-weight:500;color:#c6d3c1;letter-spacing:.04em}
/* the wordmark rule the "underline" brand construction draws */
.brand{position:relative}
.brand::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:2px;background:var(--amber)}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:18px;min-width:0}
.nav__price{text-align:right;line-height:1.2}
.nav__price b{display:block;font-family:var(--display);font-size:1.22rem;font-weight:800;color:var(--sage-d)}
.nav__price span{font-size:.78125rem;font-weight:500;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 22px;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(--sage-d);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the menu strip under the plate */
.nav__strip{background:var(--tint);border-top:1px solid var(--line)}
.menu{
  display:flex;flex-wrap:wrap;gap:0 28px;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:.9688rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--sage-d)}
.menu a[aria-current="page"]{color:var(--sage-d);border-bottom-color:var(--amber)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the bottle RIGHT on warm light */
.hero{position:relative;background:var(--paper);padding:54px 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(--amber-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px 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:.9375rem;font-weight:600;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight:700}
.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 14px;border-radius:999px;
}
.factpills li b{color:var(--sage-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);padding:13px 15px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.6rem;font-weight:800;color:var(--sage-d);line-height:1.1}
.figures span{display:block;font-size:.8125rem;font-weight:500;color:var(--ink-3);margin-top:3px}
.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 24px 40px rgba(36,46,32,.32))}
.hero__cap{margin:14px 0 0;font-size:.8125rem;font-weight:600;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:.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:700}

/* ---- inner page head */
.phead{padding:34px 0 10px;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(--amber-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 phone. It sits above the header
   so the navigation does not have to carry any of them, and its CSS 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 top of the
   page. The lot and the dose are trimmed on phones, where five items wrap to
   three lines. */
.util{background:var(--bark);color:#c3cfbc;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:#5c6f52;flex:0 0 auto;margin-right:11px}
.util b{color:#eef3e9;font-weight:600}
.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}
}


/* ---- hero motif -- soda-rise ---------------------------------------- */
.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,#f8f5ee,#eeddc8 48%,#e7cbab)}.hero__media::before{content:'';position:absolute;left:50%;top:0;width:78%;height:100%;translate:-50% 0;background-image:radial-gradient(circle at 22% 74%,rgba(194,114,28,0.40) 0 3px,transparent 4px),radial-gradient(circle at 68% 36%,rgba(194,114,28,0.28) 0 5px,transparent 6px),radial-gradient(circle at 46% 12%,rgba(194,114,28,0.34) 0 4px,transparent 5px);background-size:118px 176px,164px 244px,92px 138px;-webkit-mask-image:linear-gradient(0deg,transparent,#000 14%,#000 52%,transparent 94%);mask-image:linear-gradient(0deg,transparent,#000 14%,#000 52%,transparent 94%);animation:smRise 9s linear infinite;z-index:1;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;bottom:2%;width:64%;height:42%;translate:-50% 0;background:radial-gradient(62% 100% at 50% 100%,rgba(194,114,28,0.42),transparent 72%);filter:blur(16px);animation:smPlume 7.5s ease-in-out infinite;z-index:0;pointer-events:none}@keyframes smRise{from{background-position:0 0,0 0,0 0}to{background-position:0 -176px,0 -244px,0 -138px}}@keyframes smPlume{0%,100%{transform:translateY(5%) scale(.94);opacity:.40}50%{transform:translateY(-6%) scale(1.06);opacity:.82}}
@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(--sage-d);color:#e2ead9}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#d3ddc9}
.sec--dark .eyebrow{color:#e9b578}
.sec--dark .eyebrow::before{background:#e9b578}
.sec--dark a{color:#f0c58f}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* the sage rule that opens a panel section */
.sec--panel{border-top:3px solid var(--wash)}
.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:#d3ddc9}

/* one measure, centred; multi-column components keep the full wrap */
@media (min-width:1060px){
  .sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote,
  .sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{
    max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- lists */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .5em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.sec--dark .ticks li::before{color:#8fcf9a}

/* ---- 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(--display);font-weight:800;color:#fff;background:var(--sage-d);font-size:1rem}
tbody tr:nth-child(even){background:#fbfaf5}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--sage-d)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 20px 70px;min-width:0}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:36px;height:36px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--amber),var(--amber-d));color:#fff;
  font-family:var(--display);font-weight:800;font-size:1.06rem;border-radius:50%;
}
.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))}
/* Grid items hold tables and nowrap chips, and a grid item's default min-width
   is auto, which floors at MIN-CONTENT. Without this a .tablewrap inside a
   card keeps its column 520px wide however narrow the grid is, and the right
   half is clipped away by body{overflow-x:clip} with nothing to scroll. */
.grid>*{min-width:0}
.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:0;top:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--amber) 0 56px,var(--wash) 56px);
}
.card h3{margin:8px 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#2d452f;border-color:#456647}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #cfdcc8;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--sage-d)}
.callout p:last-child{margin:0}
.alert{background:#fdf6ea;border:1px solid #efdcbc;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.42rem;font-weight:700;line-height:1.46;color:var(--sage-d);border-left:4px solid var(--amber);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(--amber);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}
/* min-width:0 on both items, at every width, for the reason given on .grid. */
.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:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#c3cfbc;margin-top:4px}

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

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* .ing__dose is white-space:nowrap, and a grid item cannot shrink below its
   min-content, so without this the chip sets the column width and the card
   overflows a phone silently. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.875rem;font-weight:700;color:#fff;background:var(--sage-2);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}
.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 negative margin makes it taller than its
   siblings and trips the rule that a pricing row shares one height and one
   button baseline. The border, the shadow, the 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(--sage-d),var(--sage-2));border-bottom-color:var(--sage-d)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.22rem;font-weight:800}
.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(--amber-d);color:#fff;font-family:var(--text);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.6rem;font-weight:800;color:var(--sage-d);line-height:1;text-align:center}
.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:4px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:700}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:500}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots>*{min-width:0}
.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(--sage-d)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.badgewall>*{min-width:0}
.badgewall figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:1rem;margin-bottom:4px;color:var(--sage-d)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px minmax(0,1fr) 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--sage))}
.stars{color:#d79a2a;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(--display);font-weight:700;font-size:1.16rem;color:var(--sage-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-family:var(--text);font-size:1.34rem;font-weight:400;color:var(--amber-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:.9375rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link text, and a URL
   is one unbreakable token. `anywhere` 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(--amber);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline>*{min-width:0}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:linear-gradient(140deg,var(--sage-d),var(--sage-2));color:#fff;font-family:var(--display);font-weight:800;font-size:1.12rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--sage-d)}
.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(--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--media>*{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>*{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(--amber);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.18rem;color:var(--sage-d);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms on focus and never zooms back. */
.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:.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(--sage-d)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts>*{min-width:0}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: an INDEX, with the lot reference and the certificate stated
   beneath it. The index is set in ranked columns like the back of a book; the
   batch rail under it carries the two references a buyer can hold against the
   bottle that arrives, and the legal rail closes the page. */
.fcta{position:relative;background:linear-gradient(140deg,var(--sage-d) 0%,var(--bark) 100%);color:#fff;padding:52px 0 52px}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;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:#e9b578;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.8rem;font-weight:800;line-height:1.2;margin:0 0 10px}
.fcta p{color:#d3ddc9}
.fcta__sm{font-size:.9375rem;color:#b3c0a9;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#f0c58f}
.fcta__img img{width:290px}
footer{background:var(--panel)}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:26px;padding:44px 0 30px}
.fgrid>*{min-width:0}
.fmark{width:190px;height:auto;margin:0 0 10px}
.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(--sage-d)}
.fh{font-family:var(--text);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fgrid ul{list-style:none;margin:0 0 20px;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. */
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(--amber-d)}
/* the batch rail: the lot reference and the certificate, stated beneath the index */
.flot{display:flex;flex-wrap:wrap;gap:10px 30px;align-items:baseline;padding:18px 0;border-top:2px solid var(--wash);border-bottom:1px solid var(--line)}
.flot div{min-width:0}
.flot b{display:block;font-family:var(--text);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.flot span{font-family:var(--display);font-size:1.16rem;font-weight:800;color:var(--sage-d)}
.flot p{margin:0;font-size:.9375rem;color:var(--ink-3);flex:1 1 320px;min-width:0}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0 0}
.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:16px 0 26px}
.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:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--sage-d)}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;border-radius:2px;background:var(--amber)}
.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(--bark);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:#c3cfbc}
.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:24px}
}
@media (max-width:980px){
  :root{--navh:96px}
  .nav{background:linear-gradient(90deg,var(--sage-d) 0 62%,var(--panel) 62%)}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .menu{display:none;flex-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:17px}
  .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 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 sits at the start of its own line and wraps. */
  .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:22px}
  .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}
  .nav{background:linear-gradient(90deg,var(--sage-d) 0 72%,var(--panel) 72%)}
}

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

   The card is transparent by design, so the bottle needs its own ground: a
   warm pool of light behind it and an elliptical shadow beneath it, both sized
   to the product rather than to the column. hero_motifs.py owns everything
   that moves on .hero__media. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:46%;translate:-50% -50%;
  width:84%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(194,114,28,.26),transparent 70%);
  z-index:0;pointer-events:none;
}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:30px;translate:-50% 0;
  width:52%;height:18px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(36,46,32,.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:smFloat 8.5s ease-in-out infinite}
  @keyframes smFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}

/* ---- hero: sticky, centred product column --------------------------------
   The product column holds its place, vertically centred, until the hero has
   fully scrolled past. --navh is measured and published by site.js: this
   header is two rows and changes height between breakpoints, and a hardcoded
   offset tucks the product under the bar on the taller ones.

   Requires .hero NOT to clip on the block axis: any non-visible overflow on an
   ancestor becomes the scrollport sticky resolves against. */
@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 share their edges, their image slot and
   their button baseline. The vendor pack shots are all 1254x1254 here, but the
   blurbs are different lengths, so the CTAs would still sit at three heights.
   The height lives here and not on the <img> attributes on purpose: those must
   keep stating each file's true ratio, or fix_img_dims.py rewrites them and
   CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}
/* brand mark: underline construction */
.brand{position:relative}.brand::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:3px;border-radius:2px;background:#c2721c}

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