/* sodameltdaily.com — SodaMelt, the licensed U.S. retail desk.
   Design slot row 333 (batch8_assignments.py): Darker Grotesque / Barlow Semi
   Condensed, a RUST-TINTED OAT ground, a header that puts its destinations in
   two short columns beside a square mark, a footer running a closing card, then
   a destination index, then the disclaimers in two columns, and the melt-fizz
   hero motif.

   The palette is re-derived from the bottle rather than from the LOOKS FOR
   reference: the label is a warm orange sleeve over white, a red roundel and a
   deep blue wordmark. Rust is the accent, oat is the page, and the blue appears
   only where a second voice is needed. Nothing here is borrowed from
   kerafirmmpro.com except the shape of its explanation flow.

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

/* ---- tokens */
:root{
  --ink:#2b1f16;            /* body text, warm near-black */
  --ink-2:#5d4b3c;          /* secondary */
  --ink-3:#8a7663;          /* captions, meta */
  --rust:#a8401a;           /* the accent: the label's deep orange edge */
  --rust-d:#7c2c0f;         /* deep */
  --rust-2:#c4561f;
  --ember:#e8721c;          /* the sleeve orange, for marks and bars */
  --blue:#17357c;           /* the wordmark blue on the bottle */
  --wash:#f6e2d1;           /* rust wash */
  --paper:#f6efe3;          /* the page: rust-tinted oat */
  --panel:#fffcf6;
  --tint:#eee1cd;
  --line:#e0d0b8;
  --line-2:#c7b195;
  --good:#3f6b2b;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:12px;
  --radius-lg:20px;
  --shadow:0 1px 2px rgba(43,31,22,.06), 0 12px 30px rgba(43,31,22,.08);
  --shadow-lg:0 24px 62px rgba(124,44,15,.22);
  --navh:112px;
  --display:"Darker Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Barlow Semi Condensed",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:18px;line-height:1.66;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rust);text-underline-offset:3px}
a:hover{color:var(--rust-d)}
/* Darker Grotesque sets narrow and light, so the display face runs a weight
   heavier and a step larger than a grotesk would at the same role. */
h1,h2,h3,h4{font-family:var(--display);color:var(--rust-d);font-weight:800;line-height:1.05;margin:0 0 .4em}
h1{font-size:clamp(2.5rem,1.5rem + 3.1vw,4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.95rem,1.4rem + 1.8vw,2.9rem);letter-spacing:-.006em}
h3{font-size:1.5rem;font-weight:800;line-height:1.12}
h4{font-size:1.25rem;font-weight:800}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--rust-d);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. A small square, echoing
   the square mark in the masthead, at the smallest scale on the page. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:.8125rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--rust);
  margin:0 0 10px;
}
.eyebrow::before{content:"";width:10px;height:10px;background:var(--ember);border-radius:2px}

/* ---- buttons: full pills, which no other desk on this estate uses */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:14px 32px;
  font-family:var(--text);font-size:1.02rem;font-weight:700;letter-spacing:.01em;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:linear-gradient(104deg,var(--rust-d) 0%,var(--rust) 100%);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.12);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--cyan{background:linear-gradient(104deg,var(--rust) 0%,var(--ember) 100%)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.1rem}
.btn--ghost{background:none;color:var(--rust-d);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--rust-d)}
.btn--wide{width:100%}

/* ---- header: a square mark, the wordmark, then the destinations in TWO short
   columns beside it, and the order rail on the right. */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);box-shadow:0 1px 0 var(--line)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:12px 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;flex-wrap:wrap;align-items:center;gap:14px 26px;padding-block:12px}
.mark{flex:0 0 auto;display:block;width:46px;height:46px}
.mark svg{width:46px;height:46px;display:block}
/* brand_marks.py's "underline" construction: a wordmark over a drawn rule and
   no icon inside .brand at all. The square mark is a SIBLING of the anchor, so
   the tool's svg strip cannot reach it. */
.brand{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--rust-d);line-height:1.02}
.brand::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:3px;border-radius:2px;background:var(--rust)}
.bw{display:flex;flex-direction:column;line-height:1.02}
.bw b{font-family:var(--display);font-size:2.05rem;font-weight:900;letter-spacing:-.02em}
.bw b em{font-style:normal;color:var(--ember)}
.bw small{font-size:.75rem;font-weight:600;color:var(--ink-3);letter-spacing:.04em}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav__price{text-align:right;line-height:1.14}
.nav__price b{display:block;font-family:var(--display);font-size:1.55rem;font-weight:900;color:var(--rust-d)}
.nav__price span{font-size:.78125rem;font-weight:600;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(--rust-d);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the two short columns */
.menu{
  display:grid;grid-template-columns:repeat(2,auto);grid-auto-flow:column;
  grid-template-rows:repeat(3,auto);gap:0 30px;list-style:none;margin:0;padding:0;
  border-left:1px solid var(--line);padding-left:26px;
}
.menu a{
  display:inline-block;padding:3px 0;font-family:var(--text);
  font-size:.95rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--rust-d)}
.menu a[aria-current="page"]{color:var(--rust-d);border-bottom-color:var(--ember)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the bottle RIGHT on a raised oat plate */
.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)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:5px 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.08rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;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:.95rem;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:.9rem;font-weight:600;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:6px 15px;border-radius:999px;
}
.factpills li b{color:var(--rust-d);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);padding:13px 16px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:2rem;font-weight:900;color:var(--rust-d);line-height:1}
.figures span{display:block;font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-top:4px}
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:22px 18px 18px;
  background:linear-gradient(170deg,#fffcf6,#f3e5d1);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.hero__card img{width:100%;max-width:400px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 22px 34px rgba(124,44,15,.28))}
.hero__cap{margin:12px 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:.9rem;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:32px 0 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:.9rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--rust)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.16rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: the five trust facts, above the navigation.
   Role, lot, dose and count, guarantee, order phone. It exists so the NAV does
   not have to carry them (hero.md, 18 Sep 2026). Sits ABOVE CRITICAL-END
   because it is the first thing painted; appended to the end of the stylesheet
   it would load async and flash unstyled at the very top of the page. */
.util{background:var(--rust-d);color:#f0d6c3;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:4px;height:4px;border-radius:1px;
  background:var(--ember);flex:0 0 auto;margin-right:11px}
.util b{color:#fff4ea;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines and eat ~100px of an 844px screen
     (hero.md). Keep the role, the guarantee and the phone; the lot and the
     dose are on the pages that need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}
/* REMOVED 19 Sep 2026, and worth recording rather than deleting silently.

   Three rules used to sit here, written for an earlier hand-drawn hero and
   meant for @media (prefers-reduced-motion: reduce):

       .hero__card,.hero__media::before,.hero__media::after{animation:none!important}
       .hero__media::before{display:none}
       .hero__media::after{opacity:.55;transform:scaleX(.92)}

   They had lost their media query. The `}` on the line above closes the
   max-width:760px block, so all three were applying at TOP LEVEL, in every
   state, to every visitor. The hero motif's front was `display:none` and had
   never rendered once; its pool was pinned at opacity .55; and the
   `animation:none!important` cancelled both keyframe animations outright.

   Nothing caught it. validate, preflight and audit all read clean, because
   none of them can see a colour or a movement -- the motif block was present
   in the stylesheet and inlined into all 32 pages exactly as intended, and
   three rules further up the same file were quietly overruling it. It took a
   render at 1440 reading getComputedStyle on the pseudo-elements, which is the
   only thing that would have. Pitfall 107 says to render inside the media
   query; this is its sibling, which is to render OUTSIDE it as well and check
   the layers are actually there.

   Not restored, because hero_motifs.py now writes the correct reduced-motion
   tail itself, immediately below: animation:none plus opacity:0 on both
   pseudo-elements, and NEVER display:none, which would remove the containing
   block the percentage widths resolve against. .hero__card's float is gated
   separately under prefers-reduced-motion:no-preference further down. */


/* ---- hero motif -- melt-fizz ---------------------------------------- */
.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,#f6efe3 0%,#f3d8bf 46%,#f2c7a3 100%)}.hero__media::before{content:'';position:absolute;left:50%;top:-14px;width:112%;aspect-ratio:.92;translate:-50% 0;transform-origin:50% 0;border-radius:0 0 46% 46%;background:linear-gradient(180deg,rgba(232,114,28,0.46) 0%,rgba(232,114,28,0.22) 48%,transparent 100%);filter:blur(13px);animation:sdMelt 11s cubic-bezier(.42,0,.58,1) infinite;z-index:0;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;bottom:8px;width:88%;aspect-ratio:5.4;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(232,114,28,0.52),rgba(232,114,28,0.18) 58%,transparent 84%);filter:blur(11px);animation:sdPool 7.5s ease-in-out infinite;z-index:0;pointer-events:none}@keyframes sdMelt{0%{transform:scaleY(.05);opacity:0}17%{opacity:.88}68%{opacity:.36}100%{transform:scaleY(1);opacity:0}}@keyframes sdPool{0%,100%{transform:scaleX(.76);opacity:.24}54%{transform:scaleX(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:60px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--rust-d);color:#f2ddcd}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#eed6c3}
.sec--dark .eyebrow{color:#ffc79a}
.sec--dark a{color:#ffc79a}
.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:#eed6c3}

/* 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:#9ed18a}

/* ---- 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(--rust-d);font-size:.95rem;letter-spacing:.02em}
tbody tr:nth-child(even){background:#fdf7ee}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--rust-d)}
.tnote{font-size:.95rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT, so a
   step holding a nowrap chip or a table refuses to shrink below it and hangs
   off the phone silently. */
.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);
  position:absolute;left:20px;top:19px;width:36px;height:36px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--ember),var(--rust));color:#fff;
  font-family:var(--text);font-weight:700;font-size:1.02rem;border-radius:8px;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: a square accent tab, matching the masthead mark */
.grid{display:grid;gap:18px}
.grid>*{min-width:0}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px 22px;overflow:hidden}
.card::before{content:"";position:absolute;left:22px;top:0;width:34px;height:6px;background:var(--ember);border-radius:0 0 3px 3px}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#63240c;border-color:#8a3a18}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #e9c7a9;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--rust-d)}
.callout p:last-child{margin:0}
.alert{background:#fdf4e6;border:1px solid #efdcbc;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(--display);font-size:1.8rem;font-weight:800;line-height:1.16;color:var(--rust-d);border-left:5px solid var(--ember);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.95rem;font-style:normal;font-weight:400;color:var(--ink-3);margin-top:10px;line-height:1.5}
.keypoints{background:var(--panel);border:1px solid var(--line);border-top:5px 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}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. A
   .tablewrap holding a 520px-min table therefore keeps its column 520px wide
   however narrow the grid is, and `1fr` (= minmax(auto,1fr)) reintroduces the
   floor the desktop minmax(0,1fr) avoids. min-width:0 is the fix and it belongs
   on the items at every width, not only inside the media query (pitfall 46's
   sibling). */
.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>*{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.9rem;font-weight:900;color:#fff;line-height:1}
.stats div span{display:block;font-size:.95rem;color:#f0d6c3;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);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:700;background:#fbf4e9}
.versus__h{background:var(--rust-d)!important;color:#fff;font-family:var(--text);font-weight:700;font-size:.93rem;letter-spacing:.02em}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* Same family as the .split fix. .ingcard is a grid ITEM and `.ing__dose` is
   white-space:nowrap, so without min-width:0 the card cannot shrink below the
   chip's width and the phone loses the right-hand edge of every card. */
.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;min-width:0}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.95rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9rem;font-weight:700;color:#fff;background:var(--rust);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(--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:linear-gradient(104deg,var(--rust-d),var(--rust));border-bottom-color:var(--rust-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.55rem;font-weight:900;line-height:1}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--ember);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;min-width:0}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:3.3rem;font-weight:900;color:var(--rust-d);line-height:.9;text-align:center}
.pack__per sup{font-size:1.2rem;font-weight:800;top:-1.1em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;color:var(--ink-3);margin:6px 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:600}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.95rem}
.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:.95rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots>*{min-width:0}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--rust-d)}
.shots figcaption span{font-size:.95rem;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:84px;height:84px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:1rem;margin-bottom:4px;color:var(--rust-d)}
.badgewall span{font-size:.9rem;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:.95rem}
.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(--ember),var(--rust-d))}
.stars{color:#d9911f;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;font-family:var(--text);font-weight:700;font-size:1.08rem;color:var(--rust-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-size:1.4rem;font-weight:400;color:var(--rust)}
.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:.95rem;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; at 390 that pushed a single <a> past the viewport
   on eleven pages of another site. `anywhere` 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(--ember);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;background:linear-gradient(140deg,var(--rust-d),var(--rust));color:#fff;font-family:var(--text);font-weight:700;font-size:1.06rem;border-radius:10px}
.byline b{display:block;margin-bottom:6px;color:var(--rust-d)}
.byline p{font-size:.98rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:5px 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:210px}
.final h2{margin:0 0 10px}
.final__price{font-weight:700;color:var(--ink-2)}
.final__sm{font-size:.95rem;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(--ember);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.45rem;font-weight:800;color:var(--rust-d);margin-bottom:5px;line-height:1.08}
.rel span{font-size:.95rem;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:.98rem;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:.95rem;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(--rust-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: a closing card, then the destination index, then the
   disclaimers in two columns. */
.fcta{background:linear-gradient(140deg,var(--rust-d) 0%,#5c1f09 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;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);padding:32px 34px}
.fcta__box>*{min-width:0}
.fcta__eye{display:inline-block;font-size:.8125rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:#ffc79a;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:2.2rem;font-weight:900;line-height:1.04;margin:0 0 10px}
.fcta p{color:#f2ddcd}
.fcta__sm{font-size:.95rem;color:#dcb9a2;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#ffc79a}
.fcta__img img{width:290px}
footer{background:var(--panel)}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:26px;padding:44px 0 32px}
.fgrid>*{min-width:0}
.fbrand img{width:190px;height:auto}
.frole{font-size:.95rem;color:var(--ink-2);margin:12px 0 14px}
.fcard p{font-size:.95rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--rust-d)}
.fh{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
   (pitfall 82). */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.98rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--rust)}
.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:.95rem;color:var(--ink-3)}
.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:.95rem;color:var(--ink-3)}
.disc{background:var(--tint);border-top:1px solid var(--line);padding:28px 0 32px}
.disc p,.disc li{font-size:.95rem;color:var(--ink-2)}
.disc b{color:var(--rust-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:.62em;width:7px;height:7px;border-radius:2px;background:var(--ember)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.95rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--rust-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:.95rem;min-width:0}
.buybar__t b{display:block;font-size:1.02rem}
.buybar__t span{color:#f0d6c3}
.buybar .btn{margin-left:auto;flex:0 0 auto}

/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- responsive */
@media (max-width:1180px){
  .menu{gap:0 20px;padding-left:18px}
  .nav__price{display:none}
}
@media (max-width:1100px){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:24px}
}
@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}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .menu{display:none;grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none;
    border-left:0;padding-left:0;order:9;flex-basis:100%;width:100%}
  .menu.open{display:grid}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line);width:100%}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .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;padding:26px 24px}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:17.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 onto a line with no room and overhangs the edge. On a
     phone let it start its own line and wrap its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .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}
  .bw b{font-size:1.75rem}
}

/* ---- hero: the plate breathes -------------------------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted (hero.md). The float is on
   the CARD, never on the <img>. */
@media (prefers-reduced-motion:no-preference){
  .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
   header is one deep row and its height changes between breakpoints, and a
   hardcoded offset tucks the product under the bar.

   Requires .hero NOT to clip on the block axis: any non-visible overflow on an
   ancestor becomes the scrollport sticky resolves against (pitfall 65). */
@media (min-width: 981px) {
  .hero{overflow-x:clip;overflow-y:visible}
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 100px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 100px) - 28px);
    min-height: calc(100svh - var(--navh, 100px) - 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 pack shots are all 1254x1254 here
   but the blurbs are different lengths, so without these the three CTAs sit at
   three heights. The height lives here and not on the <img> attributes on
   purpose: those must keep stating each file's true ratio, or fix_img_dims.py
   rewrites them and CLS gets worse. 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}

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