/* myslimset.com — SlimSet, the U.S. stocking partner desk.
   Design slot: row 329 in _generators/batch8_assignments.py. Khand / Exo 2,
   a PALE CORAL ground over bone, a header whose destinations underline on hover
   along one shared drawn baseline, a two-tone footer block (tinted contact half,
   dark destination half), and the burn-family "set-cinch" hero motif.

   The coral is the assigned ground and it is what keeps this desk off the four
   other metabolism sites in the batch. The deep plum that carries the dark
   blocks is read off the SlimSet bottle itself (#553992 on the label sleeve),
   so the ground is the slot's and the ink is the product's.

   Khand tops out at 700, so no rule here asks for 800 — a synthesised weight on
   a condensed display face smears, and the difference is visible at H1 size.

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

/* ---- tokens */
:root{
  --ink:#241f2c;            /* body text */
  --ink-2:#514a5e;          /* secondary */
  --ink-3:#7b7387;          /* captions, meta */
  --coral:#e2604a;          /* the accent */
  --coral-d:#bd4331;        /* accent, text-safe */
  --coral-l:#f08a75;        /* accent, lifted */
  --plum:#3b2a6b;           /* the bottle's sleeve */
  --plum-d:#271b4a;         /* deep */
  --plum-2:#4c3785;
  --wash:#fdeae4;           /* coral wash */
  --paper:#faf4ec;          /* the page: bone */
  --panel:#ffffff;
  --tint:#f4e9df;           /* tinted band */
  --line:#e6d8cc;
  --line-2:#cfbcaa;
  --good:#2f7d52;
  --warn:#96581a;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:10px;
  --radius-lg:18px;
  --shadow:0 1px 2px rgba(36,31,44,.05), 0 10px 30px rgba(36,31,44,.08);
  --shadow-lg:0 22px 60px rgba(39,27,74,.20);
  --navh:104px;
  --pack-img:168px;
  --figw:320px;
  --display:"Khand",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Exo 2",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(--coral-d);text-underline-offset:3px}
a:hover{color:var(--plum)}
h1,h2,h3,h4{font-family:var(--display);color:var(--plum);font-weight:700;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,1.4rem + 2.8vw,3.7rem);letter-spacing:0}
h2{font-size:clamp(1.75rem,1.3rem + 1.5vw,2.6rem);letter-spacing:.002em}
h3{font-size:1.4rem;font-weight:600}
h4{font-size:1.18rem;font-weight:600}
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(--plum);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px}

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

/* ---- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:14px 32px;
  font-family:var(--display);font-size:1.18rem;font-weight:600;letter-spacing:.02em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:linear-gradient(103deg,var(--plum) 0%,var(--plum-2) 100%);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.12);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--coral{background:linear-gradient(103deg,var(--coral-d) 0%,var(--coral) 100%)}
.btn--lg{min-height:62px;padding:16px 38px;font-size:1.3rem}
.btn--ghost{background:none;color:var(--plum);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--plum-d)}
.btn--wide{width:100%}

/* ---- header: brand row, then the menu strip whose destinations share ONE
   drawn baseline and underline along it on hover. The baseline is a rule on
   .menu itself; each link paints its own coral segment over that same line, so
   the hover reads as part of the rule rather than as a separate decoration. */
.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:13px 0` would set padding-inline to 0 and wipe the page gutter.
   Invisible above the container max-width, and no overflow test can see it
   (pitfall 46). */
.nav__top{display:flex;align-items:center;gap:20px;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--plum)}
.brand__glyph{width:36px;height:36px;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 always carry class="brand__glyph" onto the
   replacement, so a rule keyed only to that class stops applying the moment the
   tool runs and the glyph renders at its intrinsic size (pitfall 16). */
.brand>svg{width:36px;height:36px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.04}
.bw b{font-family:var(--display);font-size:1.75rem;font-weight:700;letter-spacing:.01em}
.bw b em{font-style:normal;color:var(--coral)}
.bw small{font-size:.75rem;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:18px;min-width:0}
.nav__price{text-align:right;line-height:1.16;min-width:0}
.nav__price b{display:block;font-family:var(--display);font-size:1.45rem;font-weight:700;color:var(--plum)}
.nav__price span{font-size:.78125rem;font-weight:600;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:10px 22px;font-size:1.05rem}
.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(--plum);margin:0 0 5px}
.burger span:last-child{margin:0}
.nav__strip{background:var(--panel);border-top:1px solid var(--line)}
.menu{
  position:relative;display:flex;flex-wrap:wrap;gap:0 30px;list-style:none;margin:0;padding:0;
  align-items:flex-end;min-height:46px;
}
/* the shared drawn baseline every destination underlines along */
.menu::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--line-2);border-radius:2px;
}
.menu a{
  position:relative;display:inline-block;padding:12px 0 11px;font-family:var(--display);
  font-size:1.2rem;font-weight:600;color:var(--ink-2);text-decoration:none;letter-spacing:.015em;
}
.menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:3px;
  background:var(--coral);border-radius:2px;z-index:1;transition:right .22s ease;
}
.menu a:hover{color:var(--plum)}
.menu a:hover::after,.menu a:focus-visible::after{right:0}
.menu a[aria-current="page"]{color:var(--plum)}
.menu a[aria-current="page"]::after{right:0;background:var(--plum)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the bottle RIGHT on its own card */
.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.05fr) minmax(0,.95fr);gap:44px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 16px}
.hero h1 em{font-style:normal;color:var(--coral-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--coral);border-radius:0 var(--radius) var(--radius) 0;
  padding:19px 24px;margin:0 0 18px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .72em;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:6px 14px;border-radius:999px;min-width:0;
}
.factpills li b{color:var(--plum);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);padding:13px 15px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.9rem;font-weight:700;color:var(--plum);line-height:1.04}
.figures span{display:block;font-size:.8125rem;font-weight:500;color:var(--ink-3);margin-top:3px}
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 18px 16px;
  box-shadow:var(--shadow-lg)}
.hero__card img{width:100%;max-width:400px;height:auto;margin-inline:auto}
.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:.875rem;font-weight:600;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:800}

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

/* ---- topline strip: the five 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(--plum-d);color:#c5bad9;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.util__item+.util__item::before{content:"";width:3px;height:3px;border-radius:50%;
  background:#6a5a92;flex:0 0 auto;margin-right:11px}
.util b{color:#f3ecff;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 role, guarantee and phone; the lot and the dose are on the pages that
     need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}


/* ---- hero motif -- set-cinch ---------------------------------------- */
.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(196deg,#faf4ec,#f2c5b8 46%,#faf4ec)}.hero__media::before{content:'';position:absolute;left:50%;top:40%;width:150%;aspect-ratio:7;translate:-50% -50%;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(226,96,74,0.46) 13%,rgba(226,96,74,0.30) 50%,rgba(226,96,74,0.46) 87%,transparent);filter:blur(10px);animation:ssBand 6.4s cubic-bezier(.37,0,.24,1) infinite;z-index:1;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:40%;width:150%;aspect-ratio:7;translate:-50% -50%;background:repeating-linear-gradient(90deg,rgba(226,96,74,0.55) 0 2px,transparent 2px 20px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,transparent 33%,transparent 67%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,transparent 33%,transparent 67%,#000 88%,transparent);animation:ssNotch 6.4s cubic-bezier(.37,0,.24,1) infinite;z-index:1;pointer-events:none}@keyframes ssBand{0%,100%{transform:scaleX(1);opacity:.72}46%{transform:scaleX(.58);opacity:.95}64%{transform:scaleX(.62);opacity:.88}}@keyframes ssNotch{0%,100%{transform:scaleX(1);opacity:.5}46%{transform:scaleX(.58);opacity:.78}64%{transform:scaleX(.62);opacity:.7}}
@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(--plum-d);color:#ddd4ee}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c9bee0}
.sec--dark .eyebrow{color:#f2a08c}
.sec--dark .eyebrow::before{background:var(--coral-l)}
.sec--dark a{color:#f5b6a4}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* the coral rule, repeated as a section edge */
.sec--rule{background:var(--panel);border-top:4px solid var(--coral)}
.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:#c9bee0}

/* 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--dark .ticks li::before{color:#7fd6a5}

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

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.steps>*{min-width:0}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 20px 70px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:36px;height:36px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--coral-l),var(--coral-d));color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.25rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards */
.grid{display:grid;gap:18px}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT — so a
   card holding a table or a nowrap chip refuses to shrink below it and hangs
   over the phone edge, clipped by body{overflow-x:clip} with nothing to scroll
   and nothing for a static check to report. min-width:0 at every width. */
.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:24px 22px 22px;overflow:hidden}
.card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--coral),var(--coral-l) 58%,transparent);
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#33255f;border-color:#4a3781}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #f4c9bc;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--plum)}
.callout p:last-child{margin:0}
.alert{background:#fdf5e8;border:1px solid #eedcbd;border-left:4px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.62rem;font-weight:500;line-height:1.34;color:var(--plum);border-left:4px solid var(--coral);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(--coral);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px;color:var(--plum)}
.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}
.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.7rem;font-weight:700;color:#fff;line-height:1.04}
.stats div span{display:block;font-size:.9375rem;color:#c9bee0;margin-top:4px}

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

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* .ing__dose is white-space:nowrap, so it sets the card's min-content width and
   the grid item refuses to go below it. 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-radius:var(--radius);padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.ingcard__top>*{min-width: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(--coral-d);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 responsive.md's rule that a pricing row shares one height
   and one button baseline. The accent border, deeper shadow, coloured head band
   and flag already make it unmistakable. */
.card--pack.featured{border-color:var(--coral);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(103deg,var(--plum),var(--plum-2));border-bottom-color:var(--plum)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.4rem;font-weight:700;min-width:0}
.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(--coral);color:#fff;font-family:var(--text);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px;min-width:0}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:3.1rem;font-weight:700;color:var(--plum);line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1.2rem;font-weight:600;top:-.72em}
.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;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:700;color:var(--plum)}
.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>*{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(--plum)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

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

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px minmax(0,1fr) 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--coral-l),var(--coral-d))}
.stars{color:#dd9b1f;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:16px 48px 16px 20px;cursor:pointer;position:relative;list-style:none;font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--plum)}
.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.3rem;font-weight:400;color:var(--coral-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- AI summary block */
.qa{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--plum);border-radius:0 0 var(--radius) var(--radius);padding:22px 24px;margin:0 0 1.2em}
.qa>p{color:var(--ink-2)}
.qa .tablewrap{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:.9375rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token. `anywhere` rather than `break-word` because it also
   lowers the element's MIN-CONTENT, which is what stops the ancestor being
   sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--coral);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline>*{min-width:0}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:linear-gradient(140deg,var(--plum),var(--plum-2));color:#fff;font-family:var(--display);font-weight:700;font-size:1.35rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--plum)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--coral);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(--coral);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--plum);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-radius:var(--radius);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--plum)}
.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 two-tone block. The contact half sits on the coral tint, the
   destination half on the plum, and the two meet on one vertical seam. */
.fcta{position:relative;background:linear-gradient(140deg,var(--plum) 0%,var(--plum-d) 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:.75rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--coral-l);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:2rem;font-weight:700;line-height:1.12;margin:0 0 10px}
.fcta p{color:#c9bee0}
.fcta__sm{font-size:.9375rem;color:#ab9dc6;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#f5b6a4}
.fcta__img img{width:290px}
footer{background:var(--panel)}
.fgrid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,2fr);gap:0;margin:0}
.fzone{padding:40px 30px 32px;min-width:0}
.fzone--tint{background:var(--tint);border-right:1px solid var(--line)}
.fzone--dark{background:var(--plum-d);color:#c9bee0}
.fzone--dark .fh{color:#a293c4}
.fzone--dark li a{color:#ddd4ee}
.fzone--dark li a:hover{color:var(--coral-l)}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.fcols>*{min-width:0}
.fbrand{font-family:var(--display);font-size:2.2rem;font-weight:700;color:var(--plum);letter-spacing:.01em;line-height:1}
.fbrand span{color:var(--coral-d)}
.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(--plum)}
.fh{font-family:var(--text);font-size:.75rem;font-weight:800;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:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--coral-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.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)}
.disc{background:var(--tint);border-top:1px solid var(--line);padding:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--plum)}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:2px;border-radius:2px;background:var(--coral)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem}

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

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

/* ---- responsive */
@media (max-width:1100px){
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--navh:96px}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px}
  .menu.open{display:flex}
  .menu::after{display:none}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line-2)}
  .menu a::after{display:none}
  .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:minmax(0,1fr)}
  .fcta__img{display:none}
  .final--media{grid-template-columns:minmax(0,1fr);gap:20px}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .fzone--tint{border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding:34px 0 42px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:minmax(0,1fr)}
  .prices{grid-template-columns:minmax(0,1fr)}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:minmax(0,1fr)}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:minmax(0,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 own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .pack__head span{white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:minmax(0,1fr);gap:8px}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fzone{padding:30px 22px 26px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .fcols{grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:minmax(0,1fr)}
}

/* ---- hero: the bottle settles on its card -------------------------------
   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 goes on
   the CARD, never on the <img>. */
.hero__card{isolation:isolate}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:ssFloat 8.5s ease-in-out infinite}
  @keyframes ssFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}

/* ---- 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 rather than
   hardcoded, because this header is two rows and changes height between
   breakpoints. min-height makes the sticky box a full screen tall so the shot
   can be CENTRED inside it. Requires .hero NOT to clip on the block axis — any
   non-visible overflow on an ancestor becomes the scrollport sticky resolves
   against (pitfall 65). */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 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 shots are different shapes 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
   (pitfall 91). */
.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}
/* brand mark: bare construction */
.brand svg.brand__glyph{background:none!important}