/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Arbutus Slab Fallback";src:local("Georgia");font-weight:400;size-adjust:112.08%;ascent-override:87.57%;descent-override:23.96%;line-gap-override:0.00%}
@font-face{font-family:"Cantarell Fallback";src:local("Arial");font-weight:400;size-adjust:104.65%;ascent-override:104.51%;descent-override:30.79%;line-gap-override:0.00%}
@font-face{font-family:"Cantarell Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:109.97%;ascent-override:99.46%;descent-override:29.31%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* seodaslim.com - SodaSlim, U.S. stocking partner desk.

   Design slot, row 274 of batch11_assignments.py, built lever by lever:

     Type    Arbutus Slab for every heading, Cantarell for everything read.
             A single-weight slab serif against a humanist sans -- the slab
             carries the weight, so no heading on this site is ever bolded.
     Layout  the hero runs PRODUCT LEFT, copy right, reversing the estate
             default; every section below it is a two-column measure with the
             eyebrow and H2 standing in a narrow left rail.
     Cards   filled, no border at all, 18px radius. Separation is fill against
             ground, never a line.
     Ground  a cool graphite band laid over pale grey. The band carries the
             product in the hero and returns as the stat and quote slabs.
     Depth   one hairline shadow, 1px, barely present. Nothing lifts.
     Motion  the recall-fade motif around the bottle (hero_motifs.py).

   Colour is the bottle's: amber over navy, on a cool grey paper that keeps
   both of them warm.

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

/* ---- tokens */
:root{
  --ink:#1b2027;
  --ink-2:#4a535f;
  --ink-3:#6b7480;
  --amber:#d9760c;          /* the label's mark and the S */
  --amber-d:#a85808;
  --amber-l:#f2a03c;
  --navy:#16355f;           /* the label's lower band */
  --navy-d:#0f2542;
  --graphite:#2c323b;       /* the band */
  --graphite-2:#3a4149;
  --wash:#fbf1e4;           /* amber wash */
  --paper:#edeff2;          /* the page: pale grey */
  --card:#ffffff;
  --tint:#e3e7ec;
  --line:#d5dae1;
  --line-2:#bcc4ce;
  --good:#1a7a4e;
  --warn:#8a5410;
  --wrap:1280px;
  --rail:260px;
  --measure:740px;
  --radius:18px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(27,32,39,.09);
  --shadow-lg:0 1px 3px rgba(27,32,39,.14);
  --navh:112px;
  --display:"Arbutus Slab","Arbutus Slab Fallback",Georgia,"Times New Roman",serif;
  --text:Cantarell,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px}
a:hover{color:var(--amber-d)}
/* Arbutus Slab ships one weight. The slab serifs carry the emphasis, so
   nothing here is ever set bold -- a synthesised bold on a slab this heavy
   smears the brackets. */
h1,h2,h3,h4{font-family:var(--display);color:var(--navy);font-weight:400;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,1.28rem + 1.8vw,2.72rem);letter-spacing:-.012em}
h2{font-size:clamp(1.44rem,1.14rem + 1.1vw,2.05rem);letter-spacing:-.008em}
h3{font-size:1.19rem}
h4{font-size:1.03rem}
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(--navy);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:block;
  font-family:var(--text);font-size:0.875rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber-d);
  margin:0 0 9px;
}

/* ---- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 32px;
  font-family:var(--text);font-size:1rem;font-weight:700;letter-spacing:.01em;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:var(--navy);color:#fff;box-shadow:var(--shadow);
  transition:background .18s ease;
}
.btn:hover{background:var(--navy-d);color:#fff}
.btn--amber{background:var(--amber-d)}
.btn--amber:hover{background:#8d4906}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.08rem}
.btn--ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--tint);color:var(--navy-d)}
.btn--wide{width:100%}

/* ---- topline: the graphite strip, above the header */
.util{background:var(--graphite);color:#c6cdd6;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 18px;padding-block:9px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:3px;height:3px;border-radius:50%;
  background:#6c7784;flex:0 0 auto;margin-right:11px}
.util b{color:#f2f5f8;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
/* Five items wrap to five lines on a phone and eat 125px of an 844px screen.
   Keep the role, the guarantee and the order number; the lot and the routine
   are on the pages that need them. Measured at 390 before this rule. */
@media (max-width:760px){
  .util__item--trim{display:none}
  .util__row{gap:4px 14px;padding-block:7px}
}

/* ---- header: the name centred, destinations split evenly either side */
.nav{position:sticky;top:0;z-index:100;background:var(--card);box-shadow:0 1px 0 var(--line)}
/* padding-BLOCK only: this element also carries .wrap, and the shorthand
   would zero padding-inline and wipe the page gutter (pitfall 46). */
.nav__top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding-block:12px;position:relative}
.menus{display:contents}
.menu{display:flex;flex-wrap:wrap;gap:0 22px;list-style:none;margin:0;padding:0;align-items:center}
/* grid-ROW as well as grid-column, and the row is the whole point. `.menus`
   is display:contents, so both rails are grid items placed by hand in
   columns 1 and 3. The wordmark carries grid-column:2 with an AUTO row, and
   auto-placement resolves that against the cursor -- which has already moved
   past column 3 of row 1 -- so it landed on a SECOND row underneath both
   rails. Measured at 1440 before this line: rails at y=50, wordmark at
   y=113, masthead 191px tall. The slot wants the name BETWEEN the
   destinations, not beneath them. */
.menu--a{grid-column:1;grid-row:1;justify-content:flex-end}
.menu--b{grid-column:3;grid-row:1;justify-content:flex-start}
.menu a{
  display:inline-block;padding:9px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--amber-d)}
.menu a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--amber)}
.brand{grid-column:2;grid-row:1;display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--navy);justify-self:center}
.brand__glyph{width:38px;height:38px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as class: brand_marks.py replaces the
   <svg> and does not carry the class onto the replacement, which left five
   sites with a masthead at two different heights (pitfall 16). */
.brand>svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.06;text-align:left}
.bw b{font-family:var(--display);font-size:1.42rem;font-weight:400;letter-spacing:-.01em}
.bw b em{font-style:normal;color:var(--amber-d)}
.bw small{font-family:var(--text);font-size:0.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius-sm);cursor:pointer;padding:12px 11px;
  position:absolute;left:22px;top:50%;translate:0 -50%;
}
.burger span{display:block;height:2px;background:var(--navy);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the order rail: a centred second row, so the brand above it stays the
   middle of a balanced masthead */
.nav__rail{background:var(--tint);border-top:1px solid var(--line)}
.nav__rail__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 20px;padding-block:9px}
.nav__price{line-height:1.25;text-align:right}
.nav__price b{font-family:var(--display);font-size:1.06rem;font-weight:400;color:var(--navy)}
.nav__price span{display:block;font-size:.8125rem;font-weight:700;color:var(--ink-3)}
.nav__buy{min-height:44px;padding:10px 26px;font-size:.9375rem}

/* ---- hero: the product on the graphite band, LEFT; the copy right */
.hero{position:relative;background:var(--paper);padding:38px 0 52px;overflow-x:clip}
/* 46%, not 54%, and the number is measured rather than chosen. The band is
   positioned against .hero, which is full width, while the product column it
   has to sit behind lives inside a 1280px .wrap. At 1440 the copy column
   starts at x=695 (48.3% of the viewport) and at 1100 it starts at 48.5%, so
   anything above ~47% puts a hard vertical edge THROUGH the headline: at 54%
   the H1 crossed it at x=777 and half of every line was navy-on-graphite.
   46% clears the copy column at every width this rule applies to. */
.hero::before{
  content:"";position:absolute;left:0;top:7%;bottom:7%;width:46%;
  background:linear-gradient(104deg,var(--graphite) 0%,var(--graphite-2) 100%);
  border-radius:0 var(--radius) var(--radius) 0;
  z-index:0;
}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:46px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0;order:2}
.hero__media{order:1}
.hero h1{margin:0 0 16px}
.hero h1 em{font-style:normal;color:var(--amber-d)}
.answer{
  background:var(--card);border:0;border-radius:var(--radius);
  padding:20px 24px;margin:0 0 16px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.0625rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 16px;max-width:58ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:0.9688rem;font-weight:700;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:0.9062rem;font-weight:700;color:var(--ink-2);background:var(--card);
  border:0;padding:8px 16px;border-radius:999px;box-shadow:var(--shadow);
}
.factpills li b{color:var(--amber-d);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--card);border:0;padding:14px 16px;border-radius:var(--radius-sm);box-shadow:var(--shadow)}
.figures b{display:block;font-family:var(--display);font-size:1.46rem;font-weight:400;color:var(--navy);line-height:1.1}
.figures span{display:block;font-size:0.9062rem;font-weight:700;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 18px 34px rgba(0,0,0,.38))}
.hero__cap{margin:14px 0 0;font-size:.8125rem;font-weight:700;color:#b9c3cf;text-align:center}

/* ---- inner page head */
.phead{padding:32px 0 12px;background:var(--card)}
.crumbs{font-size:0.9062rem;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:900px}
.phead .answer{max-width:900px;background:var(--tint);box-shadow:none}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)}


/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (max-width:980px){
  /* the hero band goes full width behind the stacked product */ .hero::before{left:0;right:0;width:100%;top:auto;bottom:auto;height:0;display:none}
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 18px;background:linear-gradient(104deg,var(--graphite) 0%,var(--graphite-2) 100%);border-radius:var(--radius);padding:18px 0}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:32px 0 42px}
}
@media (min-width: 981px){
  .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;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}

/* ---- the masthead, responsive. ABOVE CRITICAL-END on purpose: the header is
   the first thing painted, and a phone that paints the desktop masthead and
   then collapses it pays for the difference in layout shift.

   1080 rather than 980 because this masthead is a CENTRED name with a rail of
   four destinations either side of it, and those two rails plus the wordmark
   need more room than a left-aligned header does. Measured at 1440: each rail
   column resolves to ~489px against a 476px rail, which fits; at 1024 the
   column is 361px and the left rail wrapped to a second line, dropping "Who
   It's For" below the others and pushing the wordmark off the optical
   centre. */
@media (max-width:1240px){
  .menu{gap:0 16px}
  .menu a{font-size:.875rem}
  .bw b{font-size:1.3rem}
}
@media (max-width:1080px){
  :root{--navh:104px}
  .nav__top{grid-template-columns:1fr;gap:0;padding-block:10px}
  .brand{grid-column:1;grid-row:1;justify-self:center}
  .burger{display:block}
  .menus{display:none;grid-column:1;grid-row:2;width:100%;padding:8px 0 10px}
  .menus.open{display:block}
  .menu{flex-direction:column;align-items:stretch;gap:0}
  .menu--a,.menu--b{grid-column:1;grid-row:auto;justify-content:flex-start}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line);border-bottom-width:1px;font-size:1rem}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .nav__price{display:none}
}


/* ---- hero motif -- recall-fade ---------------------------------------- */
.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,#f4f5f7 0%,#edeff2 46%,#e2e4e7 100%)}.hero__media::before{content:'';position:absolute;left:50%;bottom:2%;width:124%;aspect-ratio:2.6;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(217,118,12,0.50),rgba(217,118,12,0.18) 54%,transparent 78%);-webkit-mask:linear-gradient(90deg,#000 0,#000 58%,transparent 84%);mask:linear-gradient(90deg,#000 0,#000 58%,transparent 84%);filter:blur(14px);animation:ssSwell 10s ease-in-out infinite;z-index:0;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:0;width:150%;aspect-ratio:1;translate:-50% -26%;border-radius:50%;background:radial-gradient(closest-side,transparent 0 61%,rgba(217,118,12,0.62) 61% 61.9%,transparent 62.8% 77%,rgba(44,50,59,0.46) 77% 77.8%,transparent 78.6%);-webkit-mask:linear-gradient(90deg,#000 0,#000 56%,transparent 84%);mask:linear-gradient(90deg,#000 0,#000 56%,transparent 84%);animation:ssFade 9s cubic-bezier(.16,.74,.32,1) infinite;z-index:0;pointer-events:none}@keyframes ssSwell{0%,100%{transform:scaleY(.62) translateY(14%);opacity:.16}52%{transform:scaleY(1.06) translateY(-6%);opacity:.74}}@keyframes ssFade{0%{transform:scale(.70);opacity:0}16%{opacity:.88}70%{opacity:.46}100%{transform:scale(1.20);opacity:0}}
@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: a narrow left rail carries the section's job */
.sec{padding:60px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--card)}
.sec--band{background:var(--graphite);color:#d3d9e1}
.sec--band h2,.sec--band h3{color:#fff}
.sec--band p,.sec--band li{color:#c3cbd4}
.sec--band .eyebrow{color:var(--amber-l)}
.sec--band a{color:#f0b168}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto;max-width:var(--measure)}
.sec__head{margin:0 0 24px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0;font-size:1rem}
.sec--band .sec__head p{color:#c3cbd4}

@media (min-width:1100px){
  .sec>.wrap{display:grid;grid-template-columns:minmax(0,var(--rail)) minmax(0,1fr);
    gap:22px 46px;align-items:start}
  .sec>.wrap>*{grid-column:2;max-width:var(--measure)}
  .sec>.wrap>.tablewrap,.sec>.wrap>.grid,.sec>.wrap>.prices,.sec>.wrap>.shots,
  .sec>.wrap>.badgewall,.sec>.wrap>.steps,.sec>.wrap>.inglist,.sec>.wrap>.versus,
  .sec>.wrap>.split,.sec>.wrap>.stats,.sec>.wrap>.faq,.sec>.wrap>.posts,
  .sec>.wrap>.rel,.sec>.wrap>.meter,.sec>.wrap>.final,.sec>.wrap>.form,
  .sec>.wrap>.article{max-width:none}
  .sec>.wrap>.sec__head{grid-column:1;grid-row:1;margin:0;max-width:none}
  .sec--center>.wrap{display:block}
  .sec--center>.wrap>*{max-width:none}
}

/* ---- 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--band .ticks li::before{color:#6fd3a4}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
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(--navy);font-size:.9375rem}
tbody tr:nth-child(even){background:#f7f9fb}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--navy);font-weight:700}
.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(--card);border:0;border-radius:var(--radius);padding:20px 24px 20px 72px;box-shadow:var(--shadow)}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:22px;top:19px;width:36px;height:36px;
  display:grid;place-items:center;
  background:var(--amber-d);color:#fff;
  font-family:var(--display);font-weight:400;font-size:1.02rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: filled, no border, generous radius */
.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(2,minmax(0,1fr))}
.grid>*{min-width:0}
.card{position:relative;background:var(--card);border:0;border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--panel .card{background:var(--tint);box-shadow:none}
.sec--band .card{background:var(--graphite-2);box-shadow:none}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:0;border-radius:var(--radius);padding:22px 24px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--amber-d)}
.callout p:last-child{margin:0}
.alert{background:#fdf4e6;border:0;border-left:4px solid var(--warn);border-radius:var(--radius-sm);padding:22px 24px;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.28rem;font-weight:400;line-height:1.5;color:var(--navy);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;color:var(--ink-3);margin-top:8px}
.sec--band .pullquote{color:#fff}
.keypoints{background:var(--card);border:0;border-radius:var(--radius);padding:22px 24px;margin:0 0 1.2em;box-shadow:var(--shadow)}
.keypoints>b{display:block;margin-bottom:8px;color:var(--navy)}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* A grid item floors at min-content unless told otherwise, and a .tablewrap
   holding a 520px table keeps its column 520px wide however narrow the grid
   is. min-width:0 belongs on the items at every width. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:0;border-radius:var(--radius);background:var(--card)}
.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 b{display:block;font-family:var(--display);font-size:2.1rem;font-weight:400;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#b3bcc7;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.1fr 1fr 1.1fr;border-radius:var(--radius);overflow:hidden;background:var(--card);margin:0 0 1.2em;box-shadow:var(--shadow)}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem}
.versus>div:nth-child(3n+1){font-weight:700;background:#f7f9fb}
.versus__h{background:var(--navy)!important;color:#fff;font-weight:700;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
.inglist>*{min-width:0}
.ingcard{background:var(--card);border:0;border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow)}
.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:.9375rem;font-weight:700;color:#fff;background:var(--graphite);padding:4px 14px;border-radius:999px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--card);border:0;border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:var(--shadow)}
.card--pack.featured{box-shadow:var(--shadow-lg),inset 0 0 0 2px var(--amber)}
.pack__head{background:var(--tint);padding:14px 20px;display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background: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.1rem;font-weight:400}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--amber-d);color:#fff;font-size:0.8125rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius-sm)}
.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,166px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.3rem;font-weight:400;color:var(--navy);line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1rem;top:-.75em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;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}
.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);font-size:.9375rem}
.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);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(--card);border:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.shots img{width:100%}
.shots figcaption{padding:16px 20px}
.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(--card);border:0;border-radius:var(--radius);padding:20px 16px;box-shadow:var(--shadow)}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px;color:var(--navy)}
.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 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:var(--amber)}
.stars{color:#d99215;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target. */
.faq{border-radius:var(--radius);overflow:hidden;background:var(--card);margin:0 0 1.2em;box-shadow:var(--shadow)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 22px;cursor:pointer;position:relative;list-style:none;font-family:var(--display);font-weight:400;font-size:1.06rem;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.34rem;color:var(--amber-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 22px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.0625rem;color:var(--ink-2);margin:0 0 .6em}
/* The 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(--card);border:0;border-radius:var(--radius);padding:24px 26px;margin:0 0 1.2em;box-shadow:var(--shadow)}
.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:400;font-size:1.06rem;border-radius:50%}
.byline b{display:block;margin-bottom:6px;color:var(--navy)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--card);border:0;border-radius:var(--radius);padding:30px 34px;box-shadow:var(--shadow)}
.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:.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(--card);border:0;border-radius:var(--radius);padding:22px 24px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.rel a:hover{background:var(--wash)}
.rel b{display:block;font-family:var(--display);font-size:1.06rem;font-weight:400;color:var(--navy);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms on focus. */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:700;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--card);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:0.9062rem;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(--tint);border:0;border-radius:var(--radius);padding:22px 26px;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.0625rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts>*{min-width:0}
.posts article{background:var(--card);border:0;border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow)}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.0625rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- closing guarantee slab, above the footer */
.fcta{background:var(--graphite);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:block;font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-l);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.62rem;font-weight:400;line-height:1.24;margin:0 0 10px}
.fcta p{color:#c3cbd4}
.fcta__sm{font-size:.9375rem;color:#a6b0bc;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#f0b168}
.fcta__img img{width:290px}

/* ---- footer: a wide guarantee panel beside a two-column page index */
footer{background:var(--card);font-size:16px}
.fmain{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;padding:46px 0 34px}
.fmain>*{min-width:0}
.fguar{background:var(--tint);border-radius:var(--radius);padding:28px 30px}
.fguar__mark{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.fguar__mark img{width:60px;height:60px;object-fit:contain}
.fbrand{font-family:var(--display);font-size:1.62rem;font-weight:400;color:var(--navy);letter-spacing:-.01em;line-height:1.05}
.fbrand span{color:var(--amber-d)}
.frole{font-size:16px;color:var(--ink-2);margin:0}
.fguar h3{margin:0 0 8px}
.fguar p{font-size:16px;color:var(--ink-2);margin:0 0 .8em}
.fguar b{color:var(--navy);font-weight:700}
.fnap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;margin:18px 0 0}
.fnap>*{min-width:0}
.fnap p{margin:0;font-size:16px}
.findex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 30px}
.findex>*{min-width:0}
.fh{font-family:var(--text);font-size:15px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.findex ul{list-style:none;margin:0 0 20px;padding:0}
.findex 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:16px;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--amber-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:22px 0;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:16px;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:16px;color:var(--ink-3)}
.disc{background:var(--tint);border-top:1px solid var(--line);padding:28px 0 32px}
.disc p,.disc li{font-size:16px;color:var(--ink-2)}
.disc b{color:var(--navy);font-weight:700}
.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;font-size:16px}
.disc__list li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--amber)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:16px}

/* ---- sticky buy bar. Declared at the TOP level and shown at every width:
   house rule 8 is about the CLICK, not about reading space, so desktop gets
   the bottom CTA too. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:block;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:1rem;font-weight:700}
.buybar__t span{color:#a9b6c6}
.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:1060px){
  .fmain{grid-template-columns:1fr;gap:30px}
}
@media (max-width:980px){
  :root{--navh:104px}
  /* The motif, re-aimed for the stacked layout. On desktop the copy is BESIDE
     the product and both layers fade out to the right so the arc never
     reaches the headline. On a phone the headline sits directly ABOVE the
     media column instead, so the right-hand fade buys nothing and the arc has
     to be pulled DOWN and in: at 150% anchored -26% it reached y=438 against
     an H1 running to y=560. Measured at 390. */
  .hero__media::before,.hero__media::after{-webkit-mask:none;mask:none}
  .hero__media::after{width:120%;translate:-50% -4%}
  .hero__media::before{width:112%}
  /* the hero band goes full width behind the stacked product */
  .hero::before{left:0;right:0;width:100%;top:auto;bottom:auto;height:0;display:none}
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 18px;background:linear-gradient(104deg,var(--graphite) 0%,var(--graphite-2) 100%);border-radius:var(--radius);padding:18px 0}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .factpills{order:10}
  .figures{order:11}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding:32px 0 42px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* the dose chip is nowrap and pushed right; on a narrow card 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}
  .findex{grid-template-columns:1fr 1fr}
  .fnap{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){
  .findex{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
  .util__row{gap:4px 12px}
}

/* ---- hero: the bottle breathes on the band --------------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted. The motif around it is
   owned by hero_motifs.py; this is the product's own ground and float. */
.hero__card{isolation:isolate}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:26px;translate:-50% 0;
  width:52%;height:18px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.44),transparent 74%);
  filter:blur(6px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:ssFloat 9s ease-in-out infinite}
  @keyframes ssFloat{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: nav heights run 66-99px across
   the estate and change when a bar compacts, and a hardcoded offset tucks the
   product under the bar on the taller ones.

   min-height makes the sticky box a full screen tall so the shot can be
   CENTRED inside it. Without it the box is only as tall as the image and
   `top` merely pins it under the header, which is what the old house rule did.

   Requires .hero NOT to clip on the block axis -- any non-visible overflow on
   an ancestor becomes the scrollport sticky resolves against. See pitfall 65,
   whose first fix got this wrong. */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 88px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 88px) - 28px);
    min-height: calc(100svh - var(--navh, 88px) - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
   hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
   resolve against the nearest positioned ancestor; `static` re-parents them to
   a box several times wider -- measured at 1800px against a 523px column --
   and the ring lands across the headline. Worse, the same query stops it
   animating, so it SITS there: ask for less motion, get the one broken hero.

   `relative` lays out identically to `static` and keeps the containing block.
   `top:0` is not decoration: the rule above sets a top offset of one nav height
   plus 14px, which a relative box would apply for real and push the plate
   ~110px down the page (pitfall 65). Written WITHOUT naming that custom
   property in the usual var() form on purpose -- preflight's undefined-variable
   check reads comments too, so a property named here is a property it believes
   the sheet uses. Measured on 7 sites before and after (pitfall 107). */
@media (prefers-reduced-motion: reduce) {
  .hero__media { position: relative; top: 0; min-height: 0; }
}

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is three cards that have to share their edges, their image
   slot and their button baseline. The vendor product shots are different
   shapes (one site shipped 200x243, 200x105 and 200x65 side by side) and the
   blurbs are different lengths, so without these three rules the images
   render at three sizes and the three CTAs sit at three heights.

   The height lives here and not on the <img> attributes on purpose: those
   must keep stating each file's true ratio, or fix_img_dims.py rewrites them
   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}

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav{transition:none}}
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 24 box-shadow declaration(s)
   and 0 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (27,32,39), not neutral black.

   Paint only: border-radius, box-shadow and transform change no
   geometry, so this is safe below the critical marker and needs a
   restamp rather than a rebuild. */
:root{
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(27,32,39,.06), 0 6px 18px rgba(27,32,39,.07);
  --lift:0 2px 6px rgba(27,32,39,.09), 0 16px 34px rgba(27,32,39,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.split__img,
.answer{box-shadow:var(--shadow)}

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.alert,
.split__img{border-radius:var(--radius)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.card--pack,
.badgewall figure{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover{transform:none}
}
/* ==== end modern surface ==== */

/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */