/* myvigorhorse.com — VigorHorse, U.S. authorized retailer desk.
   Design slot row 331 (batch8_assignments.py): Anybody / Comfortaa, an
   espresso-tinted tan ground, a masthead that runs identity, a drawn rule,
   the destinations and a boxed contact block, a footer slab whose destinations
   are one dense wrapping paragraph, and the stride-beat hero motif.

   The ground is the tan of a worn saddle with espresso in it; the accent is the
   red printed on the jar and the amber is the gummy itself. Nothing on this
   estate carries an espresso-tinted tan, and no other desk runs its whole
   footer index as a single flowing block of text.

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

/* ---- tokens */
:root{
  --ink:#2a1f17;            /* body text */
  --ink-2:#584636;          /* secondary */
  --ink-3:#7d6a58;          /* captions, meta */
  --espresso:#3a2a1e;       /* the dark band */
  --espresso-d:#26190f;     /* deeper */
  --espresso-2:#4d3927;
  --red:#c62b34;            /* the jar's own red */
  --red-d:#9a1f28;
  --gold:#c79447;           /* the gummy */
  --wash:#f7ebdb;           /* warm wash */
  --paper:#f3e8da;          /* the page: espresso-tinted tan */
  --panel:#fffaf3;
  --tint:#e9dbc9;
  --line:#dcc9b2;
  --line-2:#c3ab8e;
  --good:#2f6b4a;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:10px;
  --radius-lg:18px;
  --shadow:0 1px 2px rgba(42,31,23,.06), 0 12px 30px rgba(42,31,23,.09);
  --shadow-lg:0 22px 58px rgba(38,25,15,.24);
  --navh:104px;
  --display:"Anybody",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Comfortaa",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.76;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-d);text-underline-offset:3px}
a:hover{color:var(--espresso)}
h1,h2,h3,h4{font-family:var(--display);color:var(--espresso);font-weight:800;line-height:1.14;margin:0 0 .5em}
h1{font-size:clamp(1.94rem,1.26rem + 1.92vw,2.86rem);letter-spacing:-.018em}
h2{font-size:clamp(1.48rem,1.16rem + 1.2vw,2.18rem);letter-spacing:-.012em}
h3{font-size:1.19rem;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(--espresso);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it. Its marker is a leaf
   stroke rather than a bar: the assigned mark pairing for this row is
   (underline, leaf), and brand_marks.py draws no glyph for the underline
   construction, so the leaf lives here instead of being lost. */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:.78125rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--red-d);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:15px;height:15px;flex:0 0 auto;background:var(--red);
  border-radius:0 80% 0 80%;transform:rotate(-12deg);
}

/* ---- 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:1rem;font-weight:800;letter-spacing:.01em;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:linear-gradient(98deg,var(--espresso) 0%,var(--espresso-2) 100%);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.14);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--red{background:linear-gradient(98deg,var(--red-d) 0%,var(--red) 100%)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.07rem}
.btn--ghost{background:none;color:var(--espresso);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--espresso-d)}
.btn--wide{width:100%}

/* ---- header: identity left, a drawn rule, the destinations, then a boxed
   contact block at the right-hand end. One row, not two. */
.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:14px 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__row{display:flex;align-items:center;gap:14px;padding-block:13px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--espresso);flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.06}
.bw b{font-family:var(--display);font-size:1.42rem;font-weight:800;letter-spacing:-.022em}
.bw b em{font-style:normal;color:var(--red)}
.bw small{font-size:.6875rem;font-weight:600;color:var(--ink-3);letter-spacing:.005em}
/* the drawn rule between the identity and the destinations */
.nav__rule{flex:0 0 auto;width:2px;align-self:stretch;background:var(--line);margin-inline:4px}
.menu{
  display:flex;flex-wrap:wrap;gap:0 18px;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:.875rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent;white-space:nowrap;
}
.menu a:hover{color:var(--espresso)}
.menu a[aria-current="page"]{color:var(--espresso);border-bottom-color:var(--red)}
.menu__more{display:none}
/* the boxed contact block */
.nav__box{
  margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:11px;
  border:2px solid var(--line);border-radius:var(--radius);padding:8px 8px 8px 14px;
  background:var(--wash);
}
.nav__box div{line-height:1.2;text-align:right}
.nav__box b{display:block;font-family:var(--display);font-size:.96rem;font-weight:800;color:var(--espresso)}
.nav__box b a{color:inherit;text-decoration:none}
.nav__box span{font-size:.75rem;font-weight:600;color:var(--ink-3)}
.nav__buy{min-height:44px;padding:10px 17px;font-size:.875rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:2px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--espresso);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: copy LEFT, the jar RIGHT on a warm plate */
.hero{position:relative;background:var(--paper);padding:44px 0 56px;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 18px}
.hero h1 em{font-style:normal;color:var(--red-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--red);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:600;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:999px;
}
.factpills li b{color:var(--espresso);font-weight:800}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);padding:13px 15px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.48rem;font-weight:800;color:var(--espresso);line-height:1.1}
.figures span{display:block;font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-top:3px}
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px}
.hero__card img{width:100%;max-width:430px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 24px 40px rgba(38,25,15,.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{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(--red-d)}
.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: role, lot, dose and count, guarantee, order phone.
   Five facts a buyer wants before reading anything, above the navigation, so
   the masthead does not have to carry them (hero.md, 18 Sep 2026). It 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 top of the
   page. Lot and dose are trimmed on phones, where five items wrap to three
   lines and eat a third of the first screen. */
.util{background:var(--espresso-d);color:#d3bfa6;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:#7d6142;flex:0 0 auto;margin-right:11px}
.util b{color:#f6ece0;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 -- stride-beat ---------------------------------------- */
.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(163deg,#f3e8da,#e9dbc9 54%,#f3e8da)}.hero__media::before{content:'';position:absolute;left:50%;bottom:4%;width:152%;height:38%;translate:-50% 0;background:repeating-linear-gradient(74deg,rgba(198,43,52,0.30) 0 5px,transparent 5px 34px);-webkit-mask:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);mask:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);filter:blur(1.5px);animation:vhStride 5.4s linear infinite;z-index:0;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:46%;width:138%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:2px solid rgba(198,43,52,0.42);animation:vhBeat 2.9s cubic-bezier(.22,.68,.3,1) infinite;z-index:0;pointer-events:none}@keyframes vhStride{to{transform:translateX(-39px)}}@keyframes vhBeat{0%{scale:.70;opacity:0}10%{opacity:.72}34%{scale:1.02;opacity:0}42%{scale:.76;opacity:0}54%{opacity:.46}80%{scale:1.1;opacity:0}100%{scale:1.1;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(--espresso-d);color:#e6d7c4}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#d3bfa6}
.sec--dark .eyebrow{color:#e79a8f}
.sec--dark a{color:#f0b6ae}
.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:#d3bfa6}

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

/* ---- 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(--espresso);font-size:.9375rem}
tbody tr:nth-child(even){background:#fdf7ee}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--espresso)}
.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;min-width:0}
.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(--red),var(--red-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 */
.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, so a
   card holding a table or a nowrap chip refuses to shrink and overflows the
   phone silently. min-width:0 belongs on the items at every width. */
.grid>*{min-width:0}
.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(--red),var(--gold));
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#33220f;border-color:#553a20}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--espresso)}
.callout p:last-child{margin:0}
.alert{background:#fdf3e4;border:1px solid #edd9b6;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.28rem;font-weight:600;line-height:1.5;color:var(--espresso);border-left:4px solid var(--red);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(--red);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}
/* Same family as .grid above: a .tablewrap holding a 520px-min table keeps its
   column 520px wide however narrow the grid gets, and the right-hand half is
   clipped away by body{overflow-x:clip} with nothing to scroll and nothing to
   report. min-width:0 is the fix. */
.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>div{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.15rem;font-weight:800;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#d3bfa6;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:700;background:#fbf4ea}
.versus__h{background:var(--espresso)!important;color:#fff;font-family:var(--display);font-weight:800;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* .ingcard is a grid ITEM and .ing__dose is white-space:nowrap, so without
   min-width:0 the card cannot shrink below the chip's own width and overhangs
   the phone. The chip wraps onto its own line instead. */
.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}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:800;color:#fff;background:var(--espresso);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 raises its box, which 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, the deeper
   shadow, the coloured head band and the flag already make it unmistakable. */
.card--pack.featured{border-color:var(--red);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(98deg,var(--espresso),var(--espresso-2));border-bottom-color:var(--espresso)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.12rem;font-weight:800}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--red);color:#fff;font-family:var(--display);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px;min-width:0}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.3rem;font-weight:800;color:var(--espresso);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:700;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:800}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:600}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.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>*{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(--espresso)}
.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(--espresso)}
.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(--gold),var(--red))}
.stars{color:#c79447;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.05rem;color:var(--espresso)}
.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.32rem;font-weight:400;color:var(--red-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 that otherwise sets the ancestor's min-content and
   pushes a single <a> past the viewport on a phone. `anywhere` rather than
   `break-word` because it also lowers the MIN-CONTENT. */
.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(--red);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(--espresso),var(--espresso-2));color:#fff;font-family:var(--display);font-weight:800;font-size:1.05rem;border-radius:var(--radius)}
.byline>div{min-width:0}
.byline b{display:block;margin-bottom:6px;color:var(--espresso)}
.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(--red);border-radius:0 0 var(--radius) var(--radius);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final--media>*{min-width:0}
.final__img img{width:210px}
.final h2{margin:0 0 10px}
.final__price{font-weight:700;color:var(--ink-2)}
.final__sm{font-size:.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(--red);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.07rem;color:var(--espresso);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:700;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius);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(--espresso)}
.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 guarantee slab, then an espresso slab whose destinations are
   one dense wrapping paragraph rather than a column grid. */
.fcta{background:var(--tint);border-top:1px solid var(--line);padding:48px 0 52px}
.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(--display);font-size:.78125rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--red-d);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.62rem;font-weight:800;line-height:1.22;margin:0 0 10px;color:var(--espresso)}
.fcta p{color:var(--ink-2)}
.fcta__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}
.fcta__img img{width:280px}
footer{background:var(--espresso-d);color:#d3bfa6}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:46px 0 30px` 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). */
.fslab{padding-block:46px 30px}
.ftop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:34px;align-items:start;margin:0 0 30px}
.ftop>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.9rem;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1}
.fbrand span{color:#e8877f}
.frole{font-size:.9375rem;color:#bda58a;margin:10px 0 16px}
.fcard{border:1px solid #4d3927;border-radius:var(--radius);padding:20px 22px;background:#31210f}
.fcard p{font-size:.9375rem;color:#d3bfa6;margin:0 0 .7em}
.fcard p:last-child{margin:0}
.fcard b{color:#fff}
.fcard a{color:#f0b6ae;text-decoration:none}
.fcard a:hover{text-decoration:underline}
.fh{font-family:var(--display);font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#a78a6b;margin:0 0 10px}
/* THE dense wrapping paragraph. Every destination on the site set inline in one
   flowing block, separated by a drawn dot, rather than ranked in columns. */
.findex{list-style:none;margin:0;padding:0;display:block;font-size:0}
.findex li{display:inline;font-size:1rem}
.findex li+li::before{content:"\00B7";color:#7d6142;margin:0 9px;font-weight:700}
/* inline, not block: the box shrink-wraps so the hover underline stays the
   width of the words, and the padding/negative-margin pair grows the tap target
   to ~33px and gives the row height straight back (pitfall 82). */
footer li a{display:inline-block;padding-block:6px;margin-block:-6px;font-size:.9688rem;color:#e0cdb4;text-decoration:none}
footer li a:hover{color:#fff;text-decoration:underline}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:22px 0;border-top:1px solid #4d3927;margin-top:26px}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:#a78a6b}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 24px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:#a78a6b}
.disc{background:#1c1109;border-top:1px solid #3a2a1e;padding:26px 0 30px}
.disc p,.disc li{font-size:.9375rem;color:#bda58a}
.disc b{color:#fff}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  border-radius:0 80% 0 80%;background:var(--red)}
.disc a{color:#f0b6ae}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid #3a2a1e;font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--espresso-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:#bda58a}
.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 16px}
  .nav__box span{display:none}
}
@media (max-width:1040px){
  :root{--navh:96px}
  .burger{display:block}
  .nav__rule{display:none}
  .nav__row{position:relative}
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;padding:6px 0 14px;background:var(--panel);
    box-shadow:0 14px 26px rgba(38,25,15,.18);border-top:1px solid var(--line);
    z-index:5;
  }
  .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)}
}
@media (max-width:980px){
  .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}
  .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}
  .ftop{grid-template-columns:1fr;gap:24px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding:34px 0 42px}
  /* At 390 the masthead has to hold the wordmark, the order button and the
     burger inside 346px of gutter-inset row. Measured before this block: the
     boxed contact block ran to x=476 against a 390 viewport, clipped away by
     body{overflow-x:clip} with nothing to scroll and nothing to report. The box
     drops its frame and its text, the wordmark drops its role line, and the
     button tightens. */
  .nav__row{gap:10px}
  .brand{min-width:0}
  .bw b{font-size:1.24rem}
  .bw small{display:none}
  .nav__box{border:0;background:none;padding:0;gap:8px}
  .nav__box div{display:none}
  .nav__buy{padding:10px 14px;font-size:.875rem}
  .burger{width:44px;height:42px;padding:11px 10px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it is pushed onto a line with no room for it and overhangs the edge.
     On a phone it sits at the start of its own line and wraps its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .badgewall{grid-template-columns:1fr}
  .fcta{padding:36px 0 40px}
}

/* ---- hero: the jar breathes 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 card is transparent by design here, so the jar needs its own ground: a
   warm rim glow behind it and an elliptical shadow beneath it, both sized to
   the product rather than to the column. hero_motifs.py owns the stride track
   and the beat ring around it. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:46%;translate:-50% -50%;
  width:84%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(199,148,71,.34),transparent 70%);
  z-index:0;pointer-events:none;
}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:30px;translate:-50% 0;
  width:54%;height:18px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(38,25,15,.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:vhFloat 8.5s ease-in-out infinite}
  @keyframes vhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}

/* ---- hero: sticky, centred product column ---------------------------------
   The product column holds its place, vertically centred, until the hero has
   fully scrolled past.

   --navh is measured and published by site.js: nav heights change when the bar
   compacts, and a hardcoded offset tucks the product under the bar.

   min-height makes the sticky box a full screen tall so the jar 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. */
@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 (1254x1254,
   1254x918, 1254x1254) and the blurbs are different lengths, so without these
   the images render at three sizes and the 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: underline construction */
.brand{position:relative}.brand::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:3px;border-radius:2px;background:#c62b34}

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