/* govigorhorse.com — VigorHorse, U.S. stocking partner desk.
   Design slot: row 325 of batch8_assignments.py. Rajdhani / Ubuntu, a SLATE
   ground carrying PALE-LEMON cards, a header whose destinations sit inside a
   bordered inset with the identity breaking out to its left, and a footer that
   puts the contact facts in one wide card on the left and a two-column index
   on the right.

   The accent is taken from the jar, not from the reference site: VigorHorse
   ships a black label with a crimson horse and crimson gummies, so the accent
   ramp is that crimson over a cool slate page. The pale-lemon card is what
   keeps a red-on-grey site from reading as an alarm; it is the only warm
   surface on the page and every piece of reading matter sits on it.

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

/* ---- tokens */
:root{
  --ink:#191d24;            /* body text */
  --ink-2:#4b5360;          /* secondary */
  --ink-3:#707988;          /* captions, meta */
  --crimson:#c2172b;        /* the jar's horse and the gummies */
  --crimson-d:#96101f;      /* pressed, links on lemon */
  --crimson-l:#de2a3f;      /* the brighter half of the label gradient */
  --slate:#39424f;          /* the slate band */
  --slate-d:#232a34;        /* the topline strip and the buy bar */
  --wash:#fbe7ea;           /* crimson wash */
  --paper:#e4e8ee;          /* the page: slate */
  --panel:#fbf6dd;          /* the cards: pale lemon */
  --panel-2:#fffdf1;        /* the lighter lemon, for striped rows */
  --tint:#d5dbe3;           /* the deeper slate band */
  --lemon:#f4ecc0;          /* lemon, one step down */
  --line:#c9d1da;
  --line-2:#adb8c6;
  --good:#1c6b45;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:6px;
  --radius-lg:14px;
  --shadow:0 1px 2px rgba(25,29,36,.06), 0 10px 26px rgba(25,29,36,.08);
  --shadow-lg:0 20px 54px rgba(35,42,52,.22);
  --navh:86px;
  --display:"Rajdhani",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Ubuntu",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(--crimson-d);text-underline-offset:3px}
a:hover{color:var(--crimson)}
/* Rajdhani is a narrow display face: it reads flat at the default tracking and
   needs a little more line-height than a normal grotesque at the same size. */
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:700;line-height:1.14;margin:0 0 .5em}
h1{font-size:clamp(2.15rem,1.35rem + 2.5vw,3.35rem);letter-spacing:.004em}
h2{font-size:clamp(1.62rem,1.2rem + 1.4vw,2.35rem);letter-spacing:.006em}
h3{font-size:1.3rem;font-weight:700;letter-spacing:.008em}
h4{font-size:1.1rem;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:20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--crimson-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--crimson);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(--display);font-size:.8125rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--crimson-d);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:22px;height:2px;background:var(--crimson);flex:0 0 auto;
}

/* ---- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 32px;
  font-family:var(--display);font-size:1.12rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--slate-d);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.18);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--crim{background:linear-gradient(104deg,var(--crimson-d) 0%,var(--crimson-l) 100%)}
.btn--dark{background:var(--slate-d)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.22rem}
.btn--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--panel);color:var(--crimson-d)}
.btn--wide{width:100%}

/* ---- header: the destinations live in a bordered inset, and the identity
   breaks out past its left edge onto the page ground. The brand carries the
   page background and a negative right margin so it sits ON the border rather
   than beside it. */
.nav{position:sticky;top:0;z-index:100;background:var(--paper);box-shadow:0 1px 0 var(--line)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:12px 0` would set padding-inline to 0 and wipe the page gutter.
   Invisible above the container max-width, and no overflow test can see it
   (pitfall 46). */
.nav__top{display:flex;align-items:center;gap:0;padding-block:12px}
.brand{
  position:relative;z-index:3;flex:0 0 auto;display:flex;align-items:center;gap:11px;
  text-decoration:none;color:var(--ink);background:var(--paper);
  padding-right:20px;margin-right:-18px;
}
.brand__glyph{width:38px;height:38px;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 the class onto the
   replacement, so a rule keyed only to .brand__glyph stops applying the moment
   the tool runs and the glyph renders at its intrinsic size (pitfall 16). */
.brand>svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.bw b{font-family:var(--display);font-size:1.62rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.bw b em{font-style:normal;color:var(--crimson)}
.bw small{font-size:.75rem;font-weight:500;color:var(--ink-3)}
.nav__inset{
  flex:1 1 auto;min-width:0;position:relative;
  display:flex;align-items:center;gap:16px;
  border:2px solid var(--line-2);border-radius:var(--radius-lg);
  background:var(--panel);padding:6px 10px 6px 34px;
}
.menu{
  display:flex;flex-wrap:wrap;gap:0 24px;list-style:none;margin:0;padding:0;
  align-items:center;min-width:0;
}
.menu a{
  display:inline-block;padding:9px 0;font-family:var(--display);
  font-size:1.06rem;font-weight:600;letter-spacing:.02em;color:var(--ink-2);
  text-decoration:none;border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--crimson-d)}
.menu a[aria-current="page"]{color:var(--crimson-d);border-bottom-color:var(--crimson)}
.menu__more{display:none}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:12px;flex:0 0 auto}
.nav__price{text-align:right;line-height:1.16}
.nav__price b{display:block;font-family:var(--display);font-size:1.26rem;font-weight:700;color:var(--ink)}
.nav__price span{font-size:.75rem;font-weight:500;color:var(--ink-3)}
.nav__buy{min-height:44px;padding:10px 20px;font-size:1rem}
.burger{
  display:none;width:48px;height:44px;background:transparent;border:2px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:11px 10px;
}
.burger span{display:block;height:2px;background:var(--ink);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: copy LEFT, the jar RIGHT on a lemon plate */
.hero{position:relative;background:var(--paper);padding:52px 0 58px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:42px;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(--crimson-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--crimson);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:500;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:.875rem;font-weight:500;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:6px 14px;border-radius:999px;
}
.factpills li b{color:var(--crimson-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);padding:13px 15px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.72rem;font-weight:700;color:var(--ink);line-height:1.05}
.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;padding:22px 18px 18px;
  background:linear-gradient(168deg,var(--panel) 0%,var(--lemon) 100%);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
}
.hero__card img{width:100%;max-width:400px;height:auto;margin-inline:auto}
.hero__cap{margin:12px 0 0;font-size:.8125rem;font-weight:500;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:500;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:700}

/* ---- inner page head */
.phead{padding:32px 0 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(--crimson-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide);background:var(--panel-2)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: the five facts a buyer wants before reading anything.
   Role, lot, dose and count, guarantee, order desk. It sits above the header
   so the NAV does not have to carry them, and its CSS sits ABOVE CRITICAL-END
   because it is the first thing painted: appended to the end of the sheet it
   would load async and flash unstyled at the very top of the page. */
.util{background:var(--slate-d);color:#b4bfcd;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:#5d6b7d;flex:0 0 auto;margin-right:11px}
.util b{color:#f1f4f8;font-weight:500}
.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 a hundred pixels of an 844px
     screen. Keep the role, the guarantee and the order desk; the lot and the
     dose are on the pages that need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}


/* ---- hero motif -- gallop-arc ---------------------------------------- */
.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(159deg,#e4e8ee,#e3c6ce 56%,#e4e8ee)}.hero__media::before,.hero__media::after{content:'';position:absolute;left:50%;border-radius:50%;border:2px solid transparent;translate:-50% -50%;-webkit-mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);z-index:0;pointer-events:none}.hero__media::before{top:33%;width:142%;aspect-ratio:2.35;border-top-color:rgba(222,42,63,0.54);animation:vgBound 4.8s cubic-bezier(.36,.04,.48,1) infinite backwards}.hero__media::after{top:57%;width:118%;aspect-ratio:2.9;border-top-color:rgba(222,42,63,0.34);filter:blur(.7px);animation:vgBound 4.8s cubic-bezier(.36,.04,.48,1) infinite 1.2s backwards}@keyframes vgBound{0%{transform:translateX(-30%) scaleY(.66);opacity:0}16%{opacity:.62}48%{transform:translateX(0) scaleY(1.08);opacity:.82}84%{opacity:.34}100%{transform:translateX(30%) scaleY(.66);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 */
.sec{padding:60px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--slate-d);color:#d5dce6}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c0cad6}
.sec--dark .eyebrow{color:#f08a97}
.sec--dark .eyebrow::before{background:var(--crimson-l)}
.sec--dark a{color:#f3b3bb}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#c0cad6}

/* one measure, centred; multi-column components keep the full wrap */
@media (min-width:1060px){
  .sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote,
  .sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{
    max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- lists */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .5em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.sec--dark .ticks li::before{color:#63c79a}

/* ---- tables. The wrapper scrolls; the item that HOLDS it needs min-width:0
   or a 540px table sets its grid column's floor and the phone loses the right
   half of the block with nothing to scroll (pitfall 79). */
.tablewrap{overflow-x:auto;min-width:0;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:700;font-size:1.06rem;letter-spacing:.03em;color:#fff;background:var(--slate-d)}
tbody tr:nth-child(even){background:var(--panel-2)}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--crimson-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;min-width:0;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(--crimson),var(--crimson-d));color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.2rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards */
.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))}
/* Every grid item can hold a table or a nowrap chip, and a grid item's default
   min-width is auto, which floors at MIN-CONTENT. Without this the column is
   sized by the widest unbreakable thing inside it and refuses to shrink. */
.grid>*{min-width:0}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--crimson);border-radius:0 0 var(--radius) var(--radius);padding:22px 22px 20px;min-width:0}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#2c3543;border-color:#3d4859;border-top-color:var(--crimson-l)}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #f0c3c9;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--crimson-d)}
.callout p:last-child{margin:0}
.alert{background:#fdf6ea;border:1px solid #efdcbc;border-left:4px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.45rem;font-weight:600;line-height:1.42;color:var(--ink);border-left:4px solid var(--crimson);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(--crimson);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:32px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. A
   .tablewrap holding a 520px-min table therefore keeps its column 520px wide
   however narrow the grid is. min-width:0 is the fix and it belongs on the
   items at every width, not only inside the breakpoint. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2)}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats>div{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.5rem;font-weight:700;color:#fff;line-height:1.05}
.stats div span{display:block;font-size:.9375rem;color:#aab6c5;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:500;background:var(--panel-2)}
.versus__h{background:var(--slate-d)!important;color:#fff;font-family:var(--display);font-weight:700;font-size:1.04rem;letter-spacing:.03em}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* Same family as the .split fix. `.ing__dose` is white-space:nowrap, so on a
   phone it sets the card's min-content and the card refuses to shrink 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-left:4px solid var(--crimson);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}
.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(--slate-d);padding:4px 12px;border-radius:999px;white-space:nowrap}
.ingcard p:last-child{margin:0}
.ingcard figure{margin:0 0 14px}
.ingcard figure img{width:100%;border-radius:var(--radius);border:1px solid var(--line)}
.ingcard figure figcaption{font-size:.875rem;color:var(--ink-3);margin-top:6px}

/* ---- 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;padding:0}
.card--pack.featured{border-color:var(--crimson);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--lemon);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:linear-gradient(104deg,var(--crimson-d),var(--crimson-l));border-bottom-color:var(--crimson-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.3rem;font-weight:700;letter-spacing:.02em}
.pack__head span{font-size:.8125rem;font-weight:500;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--crimson);color:#fff;font-family:var(--display);font-size:.8125rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:4px 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.9rem;font-weight:700;color:var(--ink);line-height:1;text-align:center}
.pack__per sup{font-size:1.15rem;font-weight:700;top:-.7em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:500;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:400}
.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: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);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%}
/* The brand wordmark is silver-and-crimson on transparency. On a lemon card
   the silver half disappears, so the one figure that carries it gets the
   label's own black ground behind the artwork. */
.shots img.onink{background:linear-gradient(160deg,#2b333f,#12171e);padding:18px}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--crimson-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-radius:var(--radius);padding:18px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:1.02rem;margin-bottom:4px;color:var(--ink)}
.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(--crimson-l),var(--crimson-d))}
.stars{color:#c9932a;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.18rem;color:var(--ink)}
.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(--crimson-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:.9375rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token. `anywhere` rather than `break-word` because it
   also lowers the element's MIN-CONTENT, which is what stops the ancestor
   being sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--crimson);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(--crimson-d),var(--slate-d));color:#fff;font-family:var(--display);font-weight:700;font-size:1.3rem;border-radius:var(--radius)}
.byline>div{min-width:0}
.byline b{display:block;margin-bottom:6px;color:var(--ink)}
.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(--crimson);border-radius:0 0 var(--radius) var(--radius);padding:28px 30px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.final__img img{width:200px}
.final__body{min-width:0}
.final h2{margin:0 0 10px}
.final__price{font-weight:500;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(--crimson);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.22rem;color:var(--ink);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:500;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-2);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(--ink)}
.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 crimson CTA band, then the contact card on the left with a
   two-column index beside it, then the slate legal rail. */
.fcta{background:linear-gradient(120deg,var(--crimson-d) 0%,#6d0b16 62%,var(--slate-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__txt{min-width:0}
.fcta__eye{display:inline-block;font-family:var(--display);font-size:.8125rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:#ffc9cf;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.95rem;font-weight:700;line-height:1.16;margin:0 0 10px}
.fcta p{color:#f0d6d9}
.fcta__sm{font-size:.9375rem;color:#e0bcc0;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#fff}
.fcta__img img{width:270px}
footer{background:var(--paper)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.55fr);gap:30px;padding:42px 0 28px}
.fcard{min-width:0;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--crimson);border-radius:0 var(--radius) var(--radius) 0;padding:24px 26px}
.fmark{width:210px;height:auto;background:linear-gradient(150deg,#2b333f,#12171e);border-radius:var(--radius);padding:12px 16px;margin:0 0 14px}
.fbrand{font-family:var(--display);font-size:2rem;font-weight:700;color:var(--ink);letter-spacing:.02em;line-height:1;text-transform:uppercase}
.fbrand span{color:var(--crimson)}
.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(--ink)}
.findex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 34px;min-width:0}
.findex>*{min-width:0}
.fh{font-family:var(--display);font-size:.875rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fgrid ul{list-style:none;margin:0 0 18px;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(--crimson-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(--ink)}
.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:.7em;width:8px;height:2px;background:var(--crimson)}
.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(--slate-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 20px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1.06rem;font-family:var(--display);font-weight:700;letter-spacing:.02em}
.buybar__t span{color:#aab6c5}
.buybar .btn{margin-left:auto;flex:0 0 auto}

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

/* ---- responsive */
@media (max-width:1180px){
  .menu{gap:0 18px}
  .menu a{font-size:1rem}
}
@media (max-width:1100px){
  .nav__price{display:none}
}
@media (max-width:980px){
  :root{--navh:78px}
  .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 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}
  /* The inset keeps its border on a phone and becomes the anchor the menu
     drops out of, so the identity still breaks out of it at every width. */
  .nav__inset{padding:6px 8px 6px 30px}
  .menu{
    display:none;position:absolute;left:0;right:0;top:calc(100% + 10px);
    flex-direction:column;align-items:stretch;gap:0;z-index:60;
    background:var(--panel);border:2px solid var(--line-2);
    border-radius:var(--radius-lg);padding:6px 18px 12px;box-shadow:var(--shadow-lg);
  }
  .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}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .fgrid{grid-template-columns:1fr;gap:26px}
  .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,.shots.s1{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 gets 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. */
  .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;gap:20px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:460px){
  .findex{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
  .bw b{font-size:1.4rem}
}

/* ---- hero: the jar settles on its plate ---------------------------------
   Transform only, NEVER opacity: the jar 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>, which is preloaded.

   hero_motifs.py owns the strides that cross the column; this is only the
   plate the product stands on. */
.hero__card{isolation:isolate}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:26px;translate:-50% 0;
  width:54%;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(25,29,36,.34),transparent 74%);
  filter:blur(6px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:vhSettle 9s ease-in-out infinite}
  @keyframes vhSettle{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: 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}
/* brand mark: bare construction */
.brand svg.brand__glyph{background:none!important}