/* gosodamelt.com — SodaMelt, U.S. stocking partner desk.
   Design slot: row 324 of batch8_assignments.py. Crimson Pro over Archivo
   Narrow, a cool pewter ground carrying pale-mint cards, a masthead whose
   identity sits in a TALL block with the trust facts and the destinations
   stacked alongside it, a footer that is one numbered index set in three
   ragged columns, and the fizz-settle hero motif.

   Colour is taken from the bottle, not from the LOOKS FOR reference. The
   capsule bottle carries one warm ember orange on a silver body and the
   printed wordmark is drawn in a deep blue with a red rule, so the accent
   ramp is ember, the heading ink is that blue, and the pewter-and-mint
   ground comes from the slot. It is the only pewter ground on the estate.

   Everything above CRITICAL-END is inlined into every page head.
   Archivo Narrow is condensed, so reading sizes run a step larger than the
   estate default: body copy is 18px rather than 17px. */

/* ---- tokens */
:root{
  --ink:#1b2328;            /* body text */
  --ink-2:#4a5761;          /* secondary */
  --ink-3:#6e7d87;          /* captions, meta */
  --navy:#1d3376;           /* the printed wordmark's blue */
  --navy-d:#132250;         /* deep */
  --navy-2:#2a4694;
  --ember:#d4700a;          /* the bottle's one warm colour */
  --ember-d:#a6550a;
  --ember-l:#f59a35;
  --wash:#fdf1e2;           /* ember wash */
  --paper:#e6eaec;          /* the page: cool pewter */
  --panel:#f2f9f4;          /* the cards: pale mint */
  --panel-2:#ffffff;
  --tint:#dbe3e5;
  --line:#c9d4d6;
  --line-2:#adbcbf;
  --good:#1f7a55;
  --warn:#8a5a10;
  --wrap:1180px;
  --measure:748px;
  --measure-wide:968px;
  --radius:6px;
  --radius-lg:14px;
  --shadow:0 1px 2px rgba(19,34,80,.05), 0 10px 28px rgba(19,34,80,.08);
  --shadow-lg:0 20px 54px rgba(19,34,80,.20);
  --navh:118px;
  --display:"Crimson Pro",Georgia,"Times New Roman",serif;
  --text:"Archivo Narrow",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.7;font-weight:400;
  letter-spacing:.004em;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px}
a:hover{color:var(--ember-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--navy);font-weight:700;line-height:1.14;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,1.3rem + 2.4vw,3.3rem);letter-spacing:-.012em}
h2{font-size:clamp(1.6rem,1.2rem + 1.3vw,2.35rem);letter-spacing:-.008em}
h3{font-size:1.32rem;font-weight:700}
h4{font-size:1.12rem;font-weight:700}
p,li{font-size:1.125rem}
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(--navy);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--ember);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:.86rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ember-d);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:22px;height:2px;background:var(--ember);flex:0 0 auto;
}

/* ---- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 30px;
  font-family:var(--text);font-size:1.02rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--navy);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.16);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--ember{background:linear-gradient(98deg,var(--ember-d) 0%,var(--ember) 100%)}
.btn--lg{min-height:62px;padding:17px 36px;font-size:1.08rem}
.btn--ghost{background:none;color:var(--navy);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--panel);color:var(--navy-d)}
.btn--wide{width:100%}

/* ---- header: the identity in a TALL block, facts and destinations alongside.
   .nav__top also carries .wrap, so it uses padding-BLOCK. `padding:16px 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{position:sticky;top:0;z-index:100;background:var(--panel);box-shadow:0 1px 0 var(--line)}
.nav__top{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:18px 34px;
  align-items:stretch;padding-block:14px}
.nav__id{display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0;
  padding-right:30px;border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}
.brand__glyph{width:42px;height:42px;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 class="brand__glyph" onto the
   replacement, so a rule keyed only to that class stops applying the moment
   the tool runs and the glyph renders at its intrinsic size (pitfall 16). */
.brand>svg{width:42px;height:42px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.06;min-width:0}
.bw b{font-family:var(--display);font-size:1.72rem;font-weight:700;letter-spacing:-.014em}
.bw b em{font-style:normal;color:var(--ember-d)}
.bw small{font-size:.86rem;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.nav__strap{margin:0;font-size:.95rem;line-height:1.35;color:var(--ink-2);max-width:31ch}
.nav__stack{display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0}
.nav__facts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 10px;min-width:0}
.nav__facts span{font-size:.91rem;font-weight:600;color:var(--ink-2);background:var(--panel-2);
  border:1px solid var(--line);border-radius:999px;padding:5px 13px;white-space:nowrap;min-width:0}
.nav__facts b{color:var(--navy);font-weight:700}
.nav__go{display:flex;align-items:center;justify-content:flex-end;gap:16px;min-width:0}
.menu{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 24px;list-style:none;
  margin:0;padding:0;align-items:center;min-width:0}
.menu a{display:inline-block;padding:9px 0;font-family:var(--text);
  font-size:1rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent}
.menu a:hover{color:var(--navy)}
.menu a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--ember)}
.menu__more{display:none}
.nav__buy{min-height:46px;padding:11px 20px;font-size:.94rem;flex:0 0 auto}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;align-self:center;
}
.burger span{display:block;height:2px;background:var(--navy);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: copy LEFT, the bottle RIGHT on the pewter ground */
.hero{position:relative;background:var(--paper);padding:52px 0 58px;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(--ember-d)}
.answer{
  background:var(--panel-2);border:1px solid var(--line);
  border-left:4px solid var(--ember);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.1rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1.05rem;color:var(--ink-2);margin:0 0 20px;max-width:58ch}
.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:.98rem;
  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:700}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.91rem;font-weight:600;color:var(--ink-2);background:var(--panel-2);
  border:1px solid var(--line);padding:7px 14px;border-radius:999px;min-width:0;
}
.factpills li b{color:var(--navy);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.62rem;font-weight:700;
  color:var(--navy);line-height:1.08}
.figures span{display:block;font-size:.91rem;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;padding:10px}
.hero__card img{width:100%;max-width:430px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 22px 38px rgba(19,34,80,.30))}
.hero__cap{margin:14px 0 0;font-size:.91rem;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:.98rem;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:700}

/* ---- inner page head */
.phead{padding:34px 0 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:.91rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--ember-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.2rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: the five facts a buyer wants before reading anything,
   above the navigation. Role, lot, dose and count, guarantee, order phone.
   It exists so the NAV does not have to carry them (hero.md). It sits above
   the critical-CSS marker below because it is the first thing painted;
   appended to the end of the stylesheet it would load async and flash
   unstyled at the very top of the page. 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(--navy-d);color:#b7c6e4;font-size:.91rem;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:#5875b5;flex:0 0 auto;margin-right:11px}
.util b{color:#eef3fb;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}
}


/* ---- hero motif -- fizz-settle ---------------------------------------- */
.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(176deg,#f2f4f5 0%,#e4dbd1 48%,#e6eaec 100%)}.hero__media::before{content:'';position:absolute;left:50%;top:-10%;width:152%;height:124%;translate:-50% 0;z-index:0;pointer-events:none;background-image:radial-gradient(circle at 50% 50%,rgba(212,112,10,0.55) 0 3.2px,transparent 3.9px);background-size:52px 52px;-webkit-mask-image:radial-gradient(ellipse 56% 68% at 50% 58%,#000 8%,transparent 80%);mask-image:radial-gradient(ellipse 56% 68% at 50% 58%,#000 8%,transparent 80%);animation:smFizz 12s linear infinite,smCalm 12s ease-out infinite}.hero__media::after{content:'';position:absolute;left:50%;bottom:3%;width:140%;height:17%;translate:-50% 0;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(212,112,10,0.42),transparent 76%);filter:blur(11px);animation:smSettle 12s cubic-bezier(.18,.74,.28,1) infinite}@keyframes smFizz{0%{background-position:0 0}100%{background-position:0 -312px}}@keyframes smCalm{0%{opacity:.14}20%{opacity:.92}64%{opacity:.46}100%{opacity:.10}}@keyframes smSettle{0%{transform:scaleX(.58) scaleY(.66);opacity:.20}36%{transform:scaleX(1.02) scaleY(1.06);opacity:.82}76%{transform:scaleX(1.10) scaleY(.92);opacity:.54}100%{transform:scaleX(1.14) scaleY(.86);opacity:.30}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:62px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--navy-d);color:#dbe3f4}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c4d0e8}
.sec--dark .eyebrow{color:var(--ember-l)}
.sec--dark .eyebrow::before{background:var(--ember-l)}
.sec--dark a{color:#a8c6f5}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#c4d0e8}

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

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel-2);min-width:0}
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;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:var(--navy);font-size:.9375rem}
tbody tr:nth-child(even){background:#f6fbf8}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--navy)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.steps>*{min-width:0}
.step{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px 20px 70px}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;left:18px;top:19px;width:38px;height:38px;
  display:grid;place-items:center;
  background:var(--navy);color:#fff;
  font-family:var(--text);font-weight:700;font-size:.95rem;border-radius:var(--radius);
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards */
.grid{display:grid;gap:18px}
.grid>*{min-width:0}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);
  border-top:3px solid var(--ember);border-radius:0 0 var(--radius) var(--radius);
  padding:22px 22px 20px}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#1b2f60;border-color:#2f4a86}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #f0dcbe;border-radius:var(--radius);
  padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--navy)}
.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.46rem;font-weight:500;line-height:1.42;
  color:var(--navy);border-left:4px solid var(--ember);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(--ember);
  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:.9375rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ember-d)}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy.
   A grid item's default min-width is auto, which floors at MIN-CONTENT. A
   .tablewrap holding a 520px-min table therefore keeps its column 520px wide
   however narrow the grid is. min-width:0 is the fix and it belongs on the
   items at every width, not only inside the media query (pitfall 46/75). */
.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}
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel-2)}
.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:700;
  color:#fff;line-height:1.08}
.stats div span{display:block;font-size:.9375rem;color:#b7c6e4;margin-top:4px}

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

/* ---- ingredient cards.
   .inglist is a grid and .ingcard is a grid ITEM, so the card cannot shrink
   below its min-content. `.ing__dose` is white-space:nowrap, which sets that
   floor. min-width:0 lets the card shrink and the chip drops onto its own
   line (pitfall 75). */
.inglist{display:grid;gap:16px}
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--ember);
  border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px;
  min-width:0}
.ingcard__top h3{margin:0}
.ing__latin{font-size:1rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:700;color:#fff;background:var(--navy);
  padding:4px 12px;border-radius:999px;white-space:nowrap;min-width:0}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--panel-2);
  border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);
  border-radius:var(--radius-lg);overflow:hidden;position:relative}
/* No lift on the featured card: a negative margin makes it taller than its
   siblings and trips responsive.md's rule that a pricing row shares one height
   and one button baseline. The border, the shadow, the coloured head band and
   the flag already make it unmistakable. */
.card--pack.featured{border-color:var(--ember);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:var(--navy);border-bottom-color:var(--navy)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.32rem;font-weight:700}
.pack__head span{font-size:.9375rem;font-weight:600;color:var(--ink-3);margin-left:auto;
  white-space:nowrap;min-width:0}
.pack__flag{position:absolute;right:0;top:0;background:var(--ember);color:#fff;
  font-family:var(--text);font-size:.8125rem;font-weight:700;letter-spacing:.09em;
  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,170px);object-fit:contain;
  margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.6rem;font-weight:700;color:var(--navy);
  line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1.05rem;font-weight:700;top:-.72em}
.pack__unit{display:block;text-align:center;font-size:.9375rem;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:1.05rem;flex-wrap:wrap}
.pack__tot b{font-weight:700;color:var(--navy)}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:600}
.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:1rem}
.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:.9375rem;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.s1{grid-template-columns:minmax(0,1fr)}
.shots>*{min-width:0}
.shots figure{margin:0;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
/* The three ingredient photographs ship at three different ratios — one tall,
   two wide — so a plain row renders them at three heights. Cropping in CSS
   keeps the width/height ATTRIBUTES stating each file's true ratio, which is
   what validate.py and fix_img_dims.py both require. */
.shots--crop img{aspect-ratio:4/3;object-fit:cover}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--navy)}
.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-2);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:1.06rem;margin-bottom:4px;color:var(--navy)}
.badgewall span{font-size:.9375rem;color:var(--ink-2)}

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

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--panel-2);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.22rem;color:var(--navy)}
.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.4rem;font-weight:400;color:var(--ember-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` rather than `break-word` because it also
   lowers the element's MIN-CONTENT, which is what stops the ancestor being
   sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--ember);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:var(--navy);color:#fff;font-family:var(--display);font-weight:700;
  font-size:1.2rem;border-radius:var(--radius)}
.byline>div{min-width:0}
.byline b{display:block;margin-bottom:6px;color:var(--navy)}
.byline p{font-size:1rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel-2);border:1px solid var(--line);border-top:4px solid var(--ember);
  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:200px}
.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-2);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(--ember);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.24rem;color:var(--navy);
  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:1rem;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-2);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(--navy)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.05rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts>*{min-width:0}
.posts article{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.05rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: a contact slab, then ONE numbered index in three ragged
   columns. CSS columns rather than a grid, because the slot asks for ragged
   columns and a grid would rule them off. */
.fcta{position:relative;background:var(--navy-d);color:#fff;padding:52px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__box>*{min-width:0}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.9375rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ember-l);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.96rem;font-weight:700;line-height:1.2;margin:0 0 10px}
.fcta p{color:#c4d0e8}
.fcta__sm{font-size:.9375rem;color:#9aacca;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#a8c6f5}
.fcta__img img{width:280px}
footer{background:var(--panel)}
.fcard{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(2,minmax(0,1fr));gap:20px 30px;
  padding:42px 0 26px;border-bottom:1px solid var(--line)}
.fcard>*{min-width:0}
.fbrand{font-family:var(--display);font-size:2rem;font-weight:700;color:var(--navy);
  letter-spacing:-.014em;line-height:1;margin:0 0 10px}
.fbrand span{color:var(--ember-d)}
.fmark{width:190px;height:auto;margin:0 0 12px}
.frole{font-size:.9375rem;color:var(--ink-2);margin:0 0 14px}
.fcard p{font-size:.9375rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--navy)}
.fh{font-family:var(--text);font-size:.9375rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember-d);margin:0 0 12px}
.findex{columns:3;column-gap:38px;list-style:none;margin:0 0 6px;padding:0;counter-reset:fx}
.findex li{break-inside:avoid;margin:0 0 2px;position:relative;padding-left:34px}
.findex li::before{counter-increment:fx;content:counter(fx,decimal-leading-zero);
  position:absolute;left:0;top:5px;font-size:.8125rem;font-weight:700;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
/* 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:1rem;
  color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--ember-d)}
.findex--pad{padding-block:22px 26px}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0;
  border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3);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:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--navy)}
.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:.68em;width:8px;height:2px;
  background:var(--ember)}
.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(--navy-d);color:#fff;
  transform:translateY(105%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;
  padding:12px 22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1.05rem}
.buybar__t span{color:#b7c6e4}
.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){
  .nav__top{grid-template-columns:minmax(0,1fr)}
  .nav__id{border-right:0;padding-right:0}
  .nav__facts,.nav__go,.menu{justify-content:flex-start}
  .findex{columns:2}
}
@media (max-width:980px){
  :root{--navh:104px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__top{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .nav__facts{display:none}
  .nav__stack{order:3;grid-column:1/-1}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 10px;width:100%}
  .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)}
  .nav__go{flex-direction:column;align-items:stretch;gap:10px}
  .burger{display:block;justify-self:end}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
  .fcard{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  .sec{padding:46px 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 let it start its own line and wrap its text. */
  .ing__dose{margin-left:0;white-space:normal}
  .findex,.disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .fcard{grid-template-columns:1fr}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .badgewall{grid-template-columns:1fr}
}

/* ---- hero: the bottle stands on the pewter, with its own ground ------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted (hero.md).

   There is no card behind the product on this hero by design, so the bottle
   needs a ground of its own: an elliptical shadow beneath it and a warm rim
   behind it, both sized to the PRODUCT rather than to the column.
   hero_motifs.py owns everything wider than that. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:45%;translate:-50% -50%;
  width:80%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(212,112,10,.26),transparent 72%);
  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(19,34,80,.38),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; animating it is what hero.md rules out. */
  .hero__card{animation:smFloat 9s 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
   masthead is a tall two-column block and its height changes between
   breakpoints, so a hardcoded offset tucks the bottle under the bar.

   min-height makes the sticky box a full screen tall so the shot can be
   CENTRED inside it. Requires .hero NOT to clip on the block axis: any
   non-visible overflow on an ancestor becomes the scrollport sticky resolves
   against (pitfall 65). */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 104px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 104px) - 28px);
    min-height: calc(100svh - var(--navh, 104px) - 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 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,170px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}