/* getslimset.com — SlimSet, the USA authorized retail desk.
   Design slot: batch8_assignments.py row 316. Vollkorn / Saira, burnt sienna
   BANDS on oat paper, a compact header plate whose ordering button overhangs
   its lower boundary, a footer that runs seals across the top with the
   destinations beneath and one legal rail last, and the trim-taper hero motif.

   The bands are the whole idea. The page ground is oat paper and burnt sienna
   crosses it in full-width horizontal bands — a hairline band under every
   eyebrow, a fine band rule over every pale panel, and four solid bands that
   run edge to edge down the page. Nothing else on this estate is built from
   horizontal bands, which is what keeps this desk off the other metabolism
   sites.

   The bottle is violet with a teal wordmark, and neither colour drives this
   palette: the ground is assigned. Violet and teal survive as two small marks
   only, on the brand plate and the tick glyphs.

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

/* ---- tokens */
:root{
  --ink:#2a2119;            /* body text */
  --ink-2:#5a4c3e;          /* secondary */
  --ink-3:#8a7a68;          /* captions, meta */
  --sienna:#a8482a;         /* the band */
  --sienna-d:#7c3119;       /* deep band */
  --sienna-2:#bd5c37;       /* lit band */
  --wash:#f7e3d8;           /* sienna wash */
  --paper:#f5efe3;            /* the page: oat paper */
  --tint:#ece3d2;          /* tint */
  --panel:#fffdf8;
  --line:#e0d4bf;
  --line-2:#c8b79c;
  --good:#2f6b3a;
  --warn:#8a5a10;
  --violet:#5b4796;         /* from the bottle, used twice */
  --teal:#1d8d83;           /* from the wordmark, used twice */
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:10px;
  --radius-lg:18px;
  --shadow:0 1px 2px rgba(42,33,25,.06), 0 12px 30px rgba(42,33,25,.09);
  --shadow-lg:0 24px 62px rgba(124,49,25,.22);
  --navh:104px;
  --display:"Vollkorn",Georgia,"Times New Roman",serif;
  --text:"Saira",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(--sienna-d);text-underline-offset:3px}
a:hover{color:var(--sienna)}
h1,h2,h3,h4{font-family:var(--display);color:var(--sienna-d);font-weight:800;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.28rem + 2.3vw,3.05rem);letter-spacing:-.012em}
h2{font-size:clamp(1.48rem,1.16rem + 1.2vw,2.15rem);letter-spacing:-.008em}
h3{font-size:1.2rem;font-weight:700}
h4{font-size:1.02rem;font-weight:700}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--sienna-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--sienna);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it, and carries the band
   at its smallest scale */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:.78125rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sienna);
  margin:0 0 10px;
}
.eyebrow::before{content:"";width:26px;height:4px;background:var(--sienna);border-radius:1px}

/* ---- 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:.012em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:linear-gradient(98deg,var(--sienna-d) 0%,var(--sienna) 100%);color:#fff;
  box-shadow:0 8px 20px rgba(124,49,25,.22);
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.1);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--sienna{background:linear-gradient(98deg,var(--sienna) 0%,var(--sienna-2) 100%)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.06rem}
.btn--ghost{background:none;color:var(--sienna-d);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--sienna-d)}
.btn--wide{width:100%}

/* ---- header: a compact plate, its ordering button overhanging the lower edge.
   The plate floats on the page ground, so .nav carries the oat rather than a
   white bar. Nothing in this header may clip: the Order button hangs half its
   own height below the plate's boundary and a stray overflow:hidden would cut
   it in two. */
.nav{position:sticky;top:0;z-index:100;background:var(--paper)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:10px 0` sets padding-inline to 0 and wipes the page gutter.
   Invisible above the container max-width, and no overflow test can see it
   (pitfall 46). */
.nav__in{padding-block:10px}
.nav__plate{
  position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
  /* the bottom shelf is not decoration: the Order button hangs from the
     plate's lower boundary, and without reserved space it lands on the price
     rail at 1440 and on the burger at 390. Measured both before and after. */
  padding:10px 20px 26px 18px;
}
.nav__plate::after{
  content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--sienna),var(--sienna-2) 46%,transparent);
  border-radius:2px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--sienna-d)}
.brand__glyph{width:34px;height:34px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class. brand_marks.py rewrites the
   <svg> inside .brand and does not carry 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 — a masthead two
   different heights on one site (pitfall 16). */
.brand>svg{width:34px;height:34px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-family:var(--display);font-size:1.4rem;font-weight:800;letter-spacing:-.01em}
.bw b em{font-style:normal;color:var(--teal)}
.bw small{font-family:var(--text);font-size:.7375rem;font-weight:500;color:var(--ink-3)}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav__price{text-align:right;line-height:1.2}
.nav__price b{display:block;font-family:var(--display);font-size:1.16rem;font-weight:800;color:var(--sienna-d)}
.nav__price span{font-size:.75rem;font-weight:500;color:var(--ink-3)}
/* THE OVERHANG. Half the button sits below the plate's lower boundary. */
.nav__buy{
  position:absolute;right:22px;bottom:0;translate:0 50%;
  min-height:46px;padding:11px 24px;font-size:.95rem;z-index:3;
  box-shadow:0 10px 22px rgba(124,49,25,.30);
}
.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(--sienna-d);margin:0 0 5px}
.burger span:last-child{margin:0}
.menu{
  display:flex;flex-wrap:wrap;gap:0 22px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:40px;
}
.menu a{
  display:inline-block;padding:9px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--sienna-d)}
.menu a[aria-current="page"]{color:var(--sienna-d);border-bottom-color:var(--sienna)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the bottle RIGHT, sienna bands crossing the oat */
.hero{position:relative;background:var(--paper);padding:52px 0 62px;overflow-x:clip}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(168,72,42,.085) 0 3px,transparent 3px 36px);
  mask-image:linear-gradient(180deg,#000 0 62%,transparent);
}
.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(--sienna)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:5px solid var(--sienna);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:0 0 18px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.06rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:.925rem;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:800}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.875rem;font-weight:500;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:999px;
}
.factpills li b{color:var(--sienna-d);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--sienna);padding:13px 15px;border-radius:var(--radius)}
.figures b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:800;color:var(--sienna-d);line-height:1.1}
.figures span{display:block;font-size:.8125rem;font-weight:500;color:var(--ink-3);margin-top:3px}
/* the bottle stands on the taper, with no plate behind it */
.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 26px 40px rgba(42,33,25,.34))}
.hero__cap{margin:16px 0 0;font-size:.8125rem;font-weight:600;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:.875rem;font-weight:600;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:800}

/* ---- inner page head */
.phead{position:relative;padding:34px 0 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.phead::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,var(--sienna-d),var(--sienna) 42%,transparent)}
.crumbs{font-size:.875rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--sienna)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.13rem;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 sits ABOVE CRITICAL-END because it is the first band painted; appended to
   the end of the stylesheet it would load async and flash unstyled at the very
   top of the page. Lot and dose are trimmed on phones, where five items wrap
   to three lines (hero.md). */
.util{background:var(--sienna-d);color:#f0d9cd;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}
.util__item+.util__item::before{content:"";width:8px;height:2px;border-radius:1px;
  background:#c98a6e;flex:0 0 auto;margin-right:11px}
.util b{color:#fff5ed;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 -- trim-taper ---------------------------------------- */
.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,#f5efe3,#e3c0ac 54%,#f5efe3)}.hero__media::before{content:'';position:absolute;left:50%;top:-14%;width:76%;height:128%;translate:-50% 0;background:linear-gradient(180deg,rgba(189,92,55,0.34),rgba(189,92,55,0.15) 46%,rgba(189,92,55,0.26) 80%,transparent);clip-path:polygon(0 0,100% 0,71% 52%,100% 100%,0 100%,29% 52%);filter:blur(15px);animation:ssTaper 8.5s ease-in-out infinite;z-index:1;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:0;width:152%;aspect-ratio:1;translate:-50% -24%;border-radius:50%;border:1.5px solid rgba(189,92,55,0.45);animation:ssCinch 7s ease-in infinite;z-index:0;pointer-events:none}@keyframes ssTaper{0%,100%{clip-path:polygon(0 0,100% 0,71% 52%,100% 100%,0 100%,29% 52%);opacity:.55}50%{clip-path:polygon(0 0,100% 0,85% 52%,100% 100%,0 100%,15% 52%);opacity:.92}}@keyframes ssCinch{0%{scale:1.38;opacity:0}28%{opacity:.7}100%{scale:.76;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. The default ground is oat; .sec--paper is a pale panel under
   a fine sienna rule; .sec--band is one of the four solid bands that cross the
   page edge to edge. */
.sec{padding:62px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--paper{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec--paper::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--sienna),var(--sienna-2) 38%,transparent 78%)}
.sec--band{background:linear-gradient(100deg,var(--sienna-d) 0%,var(--sienna) 100%);color:#f7e7dd}
.sec--band h2,.sec--band h3{color:#fff}
.sec--band p,.sec--band li{color:#f1d9cd}
.sec--band .eyebrow{color:#f6cdb9}
.sec--band .eyebrow::before{background:#f6cdb9}
.sec--band a{color:#ffe0d2}
.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--band .sec__head p{color:#f1d9cd}

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

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--display);font-weight:800;color:#fff;background:var(--sienna-d);font-size:.96rem}
tbody tr:nth-child(even){background:#fbf6ec}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--sienna-d)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 20px 70px}
.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(--sienna),var(--sienna-d));color:#fff;
  font-family:var(--display);font-weight:800;font-size:1.02rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: a sienna band across the top edge */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT — a
   card holding a table or a nowrap chip then refuses to shrink below it and
   overhangs the phone silently. */
.grid>*{min-width:0}
.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:0;top:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--sienna),var(--sienna-2) 40%,transparent 82%)}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--band .card{background:rgba(48,17,7,.30);border-color:rgba(255,222,205,.28)}
.sec--band .card h3{color:#fff}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #edc7b3;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--sienna-d)}
.callout p:last-child{margin:0}
.alert{background:#fdf5e6;border:1px solid #ecd9b2;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.3rem;font-weight:600;line-height:1.5;color:var(--sienna-d);border-left:5px solid var(--sienna);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(--sienna);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* min-width:0 on the items at EVERY width, not only inside the media query: a
   .tablewrap holding a 520px-min table keeps its column 520px wide however
   narrow the grid is, and the overhang is clipped away by body{overflow-x:clip}
   with nothing to scroll and nothing to report. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats>*{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.2rem;font-weight:800;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#f1d9cd;margin-top:4px}

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

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* .inglist is a grid and .ingcard is a grid ITEM, so its default min-width of
   auto floors the card at min-content. `.ing__dose` is white-space:nowrap and
   sets that floor on its own. min-width:0 lets the card shrink; .ingcard__top
   already wraps, so the chip drops onto its own line and fits. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--sienna);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:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:700;color:#fff;background:var(--sienna-d);padding:4px 13px;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 accent border, the deeper shadow, the banded head and
   the flag already make it unmistakable. */
.card--pack.featured{border-color:var(--sienna);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(100deg,var(--sienna-d),var(--sienna));border-bottom-color:var(--sienna-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.16rem;font-weight:800}
.pack__head span{font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--sienna);color:#fff;font-family:var(--text);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.35rem;font-weight:800;color:var(--sienna-d);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;font-weight:700;top:-.7em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:600;color:var(--ink-3);margin:4px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:700}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:500}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:800}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots.s1{grid-template-columns:minmax(0,1fr)}
.shots>*{min-width:0}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--sienna-d)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.badgewall>*{min-width:0}
.badgewall figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--sienna);border-radius:0 0 var(--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:.98rem;margin-bottom:4px;color:var(--sienna-d)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px 1fr 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__row>*{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(--sienna-2),var(--sienna-d))}
.stars{color:#c88a1e;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(--display);font-weight:700;font-size:1.08rem;color:var(--sienna-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-family:var(--text);font-size:1.34rem;font-weight:400;color:var(--sienna)}
.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:5px solid var(--sienna);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:linear-gradient(140deg,var(--sienna),var(--sienna-d));color:#fff;font-family:var(--display);font-weight:800;font-size:1.06rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--sienna-d)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--sienna);border-radius:0 0 var(--radius) var(--radius);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final--media>*{min-width:0}
.final__img img{width:210px}
.final h2{margin:0 0 10px}
.final__price{font-weight:600;color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel>*{min-width:0}
.rel a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--sienna);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.1rem;color:var(--sienna-d);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:600;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--panel);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:.875rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--sienna);border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--sienna-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: the guarantee band, then seals across the top, the destinations
   beneath, and one legal rail last. */
.fcta{background:linear-gradient(100deg,var(--sienna-d) 0%,var(--sienna) 100%);color:#fff;padding:52px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__box>*{min-width:0}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.78125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#f8cfbb;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.66rem;font-weight:800;line-height:1.24;margin:0 0 10px}
.fcta p{color:#f4ddd2}
.fcta__sm{font-size:.9375rem;color:#eccbbc;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#ffe6da}
.fcta__img img{width:280px}
footer{background:var(--panel)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding-block:22px;border-bottom:1px solid var(--line)}
.fseals img{width:46px;height:46px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fgrid{display:grid;grid-template-columns:1.45fr repeat(4,1fr);gap:26px;padding:34px 0 30px}
.fgrid>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.7rem;font-weight:800;color:var(--sienna-d);letter-spacing:-.01em;line-height:1}
.fbrand span{color:var(--teal)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 14px}
.fcard p{font-size:.9375rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--sienna-d)}
.fh{font-family:var(--text);font-size:.8125rem;font-weight:700;letter-spacing:.13em;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:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--sienna)}
.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)}
/* the single legal rail, last */
.disc{background:var(--sienna-d);color:#f2ddd3;padding-block:26px}
.disc p,.disc li{font-size:.9375rem;color:#f2ddd3}
.disc b{color:#fff}
.disc a{color:#ffe0d2}
.disc__line{margin:12px 0 0;display:block}
.disc__line i{font-style:normal;color:#e6c4b5}
.disc__line i::after{content:"\00a0\00b7\00a0";color:#c98a6e}
.disc__line i:last-child::after{content:""}
.copy{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,224,210,.28);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--sienna-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}
.buybar__t span{color:#f0cebe}
.buybar .btn{margin-left:auto;flex:0 0 auto}

/* ---- in-page anchors clear the sticky plate.
   Measured at 390x844 on 19 Sep 2026: a jump to #pricing put the section top at
   0 and its H2 at 85px, under a header whose bottom edge is at 104. The reader
   lands on a section whose heading is behind the masthead -- so "See the
   pricing" in the hero appears to do nothing much. This header is taller than
   the estate's usual plate because its ordering button overhangs the lower
   boundary, which is the slot's own design, so the offset has to be stated
   rather than inherited. --navh is what site.js measures the plate to be. */
html{scroll-padding-top:calc(var(--navh) + 16px)}

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

/* ---- responsive */
@media (max-width:1100px){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:24px}
}
@media (max-width:980px){
  :root{--navh:92px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .nav__plate{padding-bottom:26px}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 4px;width:100%;order:3}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .burger{display:block}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:46px 0}
  .hero{padding:34px 0 46px}
  .nav__buy{right:16px;padding:10px 18px;min-height:44px;font-size:.9rem}
  .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}
  .pack__head span{white-space:normal}
  .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}
}

/* ---- hero: the bottle breathes on the taper -------------------------------
   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 plate behind this bottle by design, so it needs its own ground:
   a warm rim behind it and an elliptical shadow beneath, both sized to the
   product rather than to the column. hero_motifs.py owns the taper and the
   cinching ring around it. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:46%;translate:-50% -50%;
  width:80%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(189,92,55,.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(42,33,25,.40),transparent 74%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  /* The float goes on the CARD, never on the <img>. The image is the LCP
     element and is preloaded; animating it is what hero.md rules out. */
  .hero__card{animation:ssFloat 8.5s 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: this header is a plate with an
   overhanging button, so its height is not the number anyone would guess.

   min-height makes the sticky box a full screen tall so the bottle can be
   CENTRED inside it. Without it the box is only as tall as the image and `top`
   merely pins it under the bar.

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

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

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is three cards that share their edges, their image slot and
   their button baseline. The vendor pack shots are three different shapes
   (1254x1254, 1536x1024, 1254x1254), so without these rules the images render
   at three sizes and the three CTAs sit at three heights.

   The height lives here and not on the <img> attributes on purpose: those must
   keep stating each file's true ratio, or fix_img_dims.py rewrites them 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. */
.sec--band .sec__head p{color:var(--accent-ink,#f7e7dd)}