/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Righteous Fallback";src:local("Arial");font-weight:400;size-adjust:106.59%;ascent-override:92.39%;descent-override:24.09%;line-gap-override:0.00%}
@font-face{font-family:"Mada Fallback";src:local("Arial");font-weight:400;size-adjust:94.71%;ascent-override:100.31%;descent-override:36.95%;line-gap-override:0.00%}
@font-face{font-family:"Mada Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:92.59%;ascent-override:102.60%;descent-override:37.80%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* myhorsepeakgelatin.com - Horse Peak Gelatin, licensed U.S. retail desk.
   Design slot: row 301 in _generators/batch8_assignments.py. Righteous /
   Mada, a PALE MINT ground on white with no gradient anywhere, the name set
   small and wide in tracked capitals above a hairline of links, and a footer
   whose destinations run inline in two long flowing rows beneath an oversized
   name.

   The mint is the whole idea. This bottle is matte black with a crimson horse
   and a crimson claims bar, and every other desk in the male-vitality family
   on this estate answers black-and-red with more black and more red. A cool
   mint field does the opposite: it is the quietest ground on the estate and it
   makes the crimson do all the work, which is what a single-accent palette is
   for. There is no gradient on the page - not on the ground, not on a button,
   not behind the hero. Flat colour, one accent, one hairline.

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

/* ---- tokens */
:root{
  --ink:#12201a;            /* body text, the label's black with a green cast */
  --ink-2:#465a52;          /* secondary */
  --ink-3:#6c7f77;          /* captions, meta */
  --deep:#0c1512;           /* the label's black: dark bands, topline, buybar */
  --deep-2:#16241e;
  --red:#cf1d24;            /* the label's crimson bar and horse */
  --red-d:#a2141a;
  --red-l:#fbe6e7;
  --mint:#e9f4ee;           /* the page ground: pale mint */
  --mint-2:#d7ebe0;         /* tint bands */
  --paper:#e9f4ee;          /* alias read by the shared design tools */
  --panel:#ffffff;
  --tint:#d7ebe0;
  --line:#c8dfd2;
  --line-2:#a9cbb8;
  --good:#12704a;
  --warn:#8a5a10;
  --wrap:1180px;
  --measure:750px;
  --measure-wide:970px;
  --radius:6px;
  --radius-lg:14px;
  --shadow:0 1px 2px rgba(12,21,18,.05), 0 10px 28px rgba(12,21,18,.07);
  --shadow-lg:0 20px 54px rgba(12,21,18,.16);
  --navh:104px;
  --display:"Righteous","Righteous Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Mada","Mada Fallback",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(--mint);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(--red-d);text-underline-offset:3px}
a:hover{color:var(--red)}
/* Righteous ships ONE weight. Asking for 800 makes the browser synthesise a
   faux bold, which smears the geometry the face is chosen for, so every
   heading stays at 400 and earns its weight from size and tracking. */
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:400;line-height:1.18;margin:0 0 .5em}
/* The cap is 2.7rem rather than 3rem because Righteous is a wide face and this
   H1 carries thirteen words. At 3rem it ran to four lines at 1440 and pushed
   the hero CTA to y=837 against a 900px fold; at 2.7rem it is three lines and
   the CTA sits at 772 with room to spare. Measured, not eyeballed (hero.md). */
h1{font-size:clamp(1.9rem,1.2rem + 2vw,2.7rem);letter-spacing:-.005em}
h2{font-size:clamp(1.42rem,1.1rem + 1.2vw,2.1rem);letter-spacing:0}
h3{font-size:1.18rem}
h4{font-size:1.02rem}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
b,strong{font-weight:700}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--deep);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 */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:0.8438rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red-d);
  margin:0 0 10px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--red)}

/* ---- buttons: flat crimson, square-ish, no gradient anywhere */
.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:400;letter-spacing:.03em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--deep);color:#fff;
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--deep-2);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--red{background:var(--red)}
.btn--red:hover{background:var(--red-d);color:#fff}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.06rem}
.btn--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--mint-2);color:var(--ink)}
.btn--wide{width:100%}

/* ---- header: the name small and wide in tracked capitals, a hairline, links */
.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__top{display:flex;align-items:center;gap:20px;padding-block:13px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-width:0}
.brand__glyph{width:32px;height:32px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class: brand_marks.py rewrites the
   <svg> inside .brand and does not carry class="brand__glyph" onto the
   replacement, so a rule keyed only to the class stops applying the moment the
   tool runs and the glyph renders at its intrinsic size (pitfall 16). */
.brand>svg{width:32px;height:32px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;gap:3px;min-width:0}
.bw b{
  font-family:var(--display);font-size:.9375rem;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;line-height:1;
}
.bw b em{font-style:normal;color:var(--red)}
.bw small{font-size:0.9062rem;font-weight:600;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav__price{text-align:right;line-height:1.2}
.nav__price b{display:block;font-family:var(--display);font-size:1.1rem;font-weight:400;color:var(--ink)}
.nav__price span{font-size:.75rem;font-weight:600;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 22px;font-size:.9375rem}
.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(--ink);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the hairline, and the flowing row of links that sits under it */
.nav__strip{background:var(--panel);border-top:1px solid var(--line)}
.menu{
  display:flex;flex-wrap:wrap;gap:0 26px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:44px;
}
.menu a{
  display:inline-block;padding:11px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--ink)}
.menu a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}
.menu__more{display:none}

/* ---- hero: copy LEFT, bottle RIGHT on a white card, flat mint behind it */
.hero{position:relative;background:var(--mint);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: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)}
.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.062rem}
.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:0.9688rem;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:700}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:0.9062rem;font-weight:600;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:999px;
}
.factpills li b{color:var(--ink);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.45rem;font-weight:400;color:var(--red-d);line-height:1.1}
.figures span{display:block;font-size:0.9062rem;font-weight:600;color:var(--ink-3);margin-top:3px}
.hero__media{position:relative;align-self:center;min-width:0}
.hero__card{position:relative;z-index:2;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 18px 14px}
.hero__card img{width:100%;max-width:392px;height:auto;margin-inline:auto}
.hero__cap{margin:12px 0 0;font-size:.8125rem;font-weight:600;color:var(--ink-3);text-align:center}
/* On a phone the hero stacks and this bottle is a 1460x1600 portrait, so at the
   desktop cap it renders ~338px tall and pushes the Quick Answer past y=890.
   Capping it here, INSIDE the critical section, means the first paint is
   already the right size rather than reflowing once the async sheet lands.
   Measured at 390x844: answer 891 -> 831, CTA 1431 -> 1371 (hero.md). */
@media (max-width:760px){
  .hero__card{padding:14px 14px 10px}
  .hero__card img{max-width:286px}
}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:0.9062rem;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:700}

/* ---- inner page head */
.phead{padding:34px 0 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:0.9062rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--red-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.12rem;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: getexitide shipped without one, pushed the lot into
   the menu as a chip, crowded the navigation and still left the other four
   facts off the page (hero.md). 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 very top of the page. */
.util{background:var(--deep);color:#a9c4b6;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:#3f6b57;flex:0 0 auto;margin-right:11px}
.util b{color:#e6f3ec;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 103px 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 -- mane-sweep ---------------------------------------- */
.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__media::before{content:'';position:absolute;left:50%;top:-14%;width:150%;height:128%;translate:-50% 0;border-radius:50%;z-index:1;pointer-events:none;background:conic-gradient(from 196deg,transparent 0 30%,rgba(207,29,36,0.36) 52%,rgba(207,29,36,0.14) 72%,transparent 88%);filter:blur(14px);animation:hpMane 11s ease-in-out infinite}.hero__media::after{content:'';position:absolute;left:50%;bottom:6%;width:132%;height:34%;translate:-50% 0;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(207,29,36,0.14),transparent 72%);animation:hpPool 11s ease-in-out infinite}@keyframes hpMane{0%,100%{transform:rotate(-15deg) scale(.96);opacity:.5}50%{transform:rotate(15deg) scale(1.05);opacity:1}}@keyframes hpPool{0%,100%{transform:translateX(-5%) scaleX(.95);opacity:.55}50%{transform:translateX(5%) scaleX(1.06);opacity:1}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@media (max-width:980px){
  .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}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:34px 0 42px}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}
/* --- end of the copied hero responsive rules --- */

/*!SITE-HOME-CRIT-START*/
/* ---- home-page design pass, LAYOUT half -------------------------------
   Everything here is scoped to index.html: class="hero" is on the home page
   and on no other page of this site, so `.hero__copy>` and `body:has(.hero)`
   both resolve on the money page only. This half sits above CRITICAL-END
   because it is geometry (order, margin, padding) and because the hero motif
   below must not paint the old artwork first and swap when the async sheet
   lands. Comments are stripped by _critical_css(), so the inlined cost is the
   declarations alone. The paint half is at the end of the file under
   SITE-HOME-PAINT. Nothing above this marker was deleted; the mane-sweep
   block still stands and is overridden, not removed. */

/* 1. The buy button on the first screen.
   Measured at 1440x900 before: eyebrow 212, h1 245, answer 467, road 686,
   CTA 816-879 -- inside a 900px fold by 21px, which is not a margin. The
   roadmap paragraph ("this page covers...") was running between the Quick
   Answer and the buttons. Moving it below the payment line gives the order
   the brief asks for -- eyebrow, headline, quick answer, buttons, payment
   line, evidence -- and lifts the CTA by ~130px.
   .hero__copy is already display:flex/column at this width, so `order` alone
   does it and no box is re-parented. DESKTOP ONLY: under 980 the copy column
   is display:contents and its order is composed by the block further up,
   which is left exactly as it was. */
@media (min-width:981px){
  .hero__copy>.eyebrow{order:1}
  .hero__copy>h1{order:2}
  .hero__copy>.answer{order:3}
  .hero__copy>.hero__cta{order:4;margin-bottom:14px}
  .hero__copy>.hero__sub{order:5;margin-bottom:20px}
  .hero__copy>.hero__road{order:6;margin-bottom:20px}
  .hero__copy>.factpills{order:7}
  .hero__copy>.figures{order:8}
}

/* 2. Pricing row, home page only.
   The shared Add-To-Cart baseline is load-bearing and stays untouched: each
   CTA is bottom-anchored (margin-top:auto inside a flex:1 .pack__body), so
   changing perk height moves no button, and the featured card is raised by
   SHORTENING ITS NEIGHBOURS rather than by transform -- the reveal pass sets
   transform:none on these cards. The fixed image box, the head min-height
   and .prices{align-items:stretch} are not touched here.
   Measured: all three buttons at y=28486 before, all three equal after. */
body:has(.hero) #pricing .pack__perks li{
  padding:0 0 9px 24px;margin:0 0 9px;border-bottom:1px dashed var(--line-2)
}
body:has(.hero) #pricing .pack__perks li:last-child{
  padding-bottom:0;margin-bottom:0;border-bottom:0
}
/* 761px, not a round number: .prices collapses to one column at max-width
   760, so this is exactly the range in which the three cards stand side by
   side and a raised middle one means anything. */
@media (min-width:761px){
  body:has(.hero) #pricing .card--pack:not(.featured){margin-top:18px}
}
/* the ribbon: an inset pill sitting ON the head rule, not a flag welded to
   the corner. .pack__flag is out of flow, so this moves no sibling box.
   Measured on the card rather than guessed: .card pads 24px/22px, so the
   head band runs from y=26 to y=85.3 inset 24px either side, and its bottom
   hairline centres at 84.8 from the card's border box. `top` and `right`
   are resolved against the PADDING box, 2px in, so 67/34 puts a 31.2px pill
   centred on that hairline and 12px inside the band's right edge. */
body:has(.hero) #pricing .pack__flag{right:34px;top:67px;padding:4px 14px}

/* 3. Hero motif -- slot "settle": a soft halo that breathes once and stops.
   It lives on the pseudo-elements of the media column, never on the <img>,
   which is the LCP element and is preloaded. transform and opacity only, no
   filter, and each disc runs ONCE with fill:both: one slow bloom over 9-12s,
   then it settles and the page is still. New keyframe names; hpFloat,
   hpMane and hpPool are already taken in this sheet.

   SIZING IS MEASURED, not guessed. The product card is 430x498 inside a
   513x747 media column, so a disc sized at the column reads as nothing: the
   card's half-diagonal is 329px and swallows it. The crimson bloom is
   158% x 108% -- 811 x 807, half-axes 405 and 403 -- so the card's edge
   falls at 53% of the x axis and 62% of the y, and every stop past 62%
   paints outside the card where it can be seen. 108% vertical, not another
   158%, keeps the disc inside the hero band (182 to 988 against a hero that
   runs 160 to 1322) instead of bleeding under the header. A first pass at
   190% wide read as a tint over half the page rather than as a halo.

   The white disc is the card's pad, and it is deliberately SMALLER and
   weaker than the bloom. A first version had it at 112% and .92 alpha and
   it painted the crimson out to a distance nobody would notice. */
.hero__media::before{
  top:50%;bottom:auto;left:50%;width:158%;height:108%;
  translate:-50% -50%;filter:none;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(207,29,36,.06),rgba(207,29,36,.15) 60%,rgba(207,29,36,.12) 74%,rgba(207,29,36,.04) 90%,rgba(207,29,36,0) 100%);
  animation:hpHaloSettle 9s cubic-bezier(.16,.74,.28,1) both;
}
.hero__media::after{
  top:50%;bottom:auto;left:50%;width:108%;height:80%;
  translate:-50% -50%;filter:none;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.72),rgba(255,255,255,.5) 62%,rgba(255,255,255,0) 100%);
  animation:hpRingSettle 12s cubic-bezier(.16,.74,.28,1) both;
}
@keyframes hpHaloSettle{0%{opacity:0;transform:scale(.86)}45%{opacity:1;transform:scale(1.05)}100%{opacity:.92;transform:scale(1)}}
@keyframes hpRingSettle{0%{opacity:0;transform:scale(.9)}55%{opacity:1;transform:scale(1.03)}100%{opacity:.85;transform:scale(1)}}
/* The mane-sweep block above switches its pseudo-elements off entirely under
   reduced motion (opacity:0!important). The settled state of this motif is
   the whole picture, so it is shown, just never animated. */
@media (prefers-reduced-motion:reduce){
  .hero__media::before{animation:none!important;opacity:.92!important;transform:none!important}
  .hero__media::after{animation:none!important;opacity:.85!important;transform:none!important}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:60px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--deep);color:#d6e6dd}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#bed3c8}
.sec--dark .eyebrow{color:#f2999d}
.sec--dark .eyebrow::before{background:var(--red)}
.sec--dark a{color:#f2999d}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* The two quarantine sections. Every gap in this formula is stated inside one
   of these, once, and the class is what marks them: the absence-density check
   in preflight measures the prose OUTSIDE them, because the rule's own
   prescribed fix is to concentrate the detail here (pitfall 88). Visually they
   are a bordered field on white, so a reader can see where the candour lives. */
.sec--honest{background:var(--panel);border-block:2px solid var(--red)}
.sec--honest .sec__head h2{color:var(--red-d)}
.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:#bed3c8}

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

/* ---- 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:400;letter-spacing:.04em;color:#fff;background:var(--deep);font-size:.9375rem}
tbody tr:nth-child(even){background:#f6fbf8}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--ink)}
.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:var(--red);color:#fff;
  font-family:var(--display);font-weight:400;font-size:1.02rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: a crimson rule across the top edge */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* A grid item's default min-width is auto, which floors at min-content, so a
   card holding a table or a nowrap chip refuses to shrink and overflows the
   phone silently. min-width:0 at every width, not only in a media query. */
.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:54px;height:4px;background:var(--red)}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:var(--deep-2);border-color:#2a3d34}

/* ---- AI quick summary
   .qa is the speakable pair to .answer - both are named in the speakable
   selector on the home page - but it had no rule at all, so the one block an
   answer engine is pointed at rendered as undifferentiated body copy. Here it
   is a lead paragraph plus the factsheet table, not the <dl> that older sites
   on the estate use, so their .qa dt/dd rules would not have matched it.
   Same measure as .answer so the two read as one voice, and the lead takes the
   accent hairline to mark the block as a summary. Below CRITICAL-END because
   it sits far below the fold. */
.qa{max-width:var(--measure-wide)}
.qa>p:first-child{border-left:3px solid var(--red);padding-left:16px;margin:0 0 1.2em;color:var(--ink)}
.qa>.tablewrap:last-child{margin-bottom:0}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--mint-2);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(--ink)}
.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.26rem;font-weight:400;line-height:1.5;color:var(--ink);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:32px;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
   then clipped away by body overflow-x:clip with nothing to scroll and nothing
   to report. min-width:0 is the fix and it belongs at every width. */
.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.1rem;font-weight:400;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#a9c4b6;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr .85fr 1.5fr;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:#f6fbf8}
.versus__h{background:var(--deep)!important;color:#fff;font-family:var(--display);font-weight:400;font-size:.92rem;letter-spacing:.03em}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* .ing__dose is white-space:nowrap and one of these labels renders past 200px,
   which sets the card's min-content floor. 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}
.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(--red);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 the rule that a pricing row shares one
   height and one button baseline. The card is already unmistakable from its
   border, its shadow, its dark head band and its flag. */
.card--pack.featured{border-color:var(--red);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--mint-2);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:var(--deep);border-bottom-color:var(--deep)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.1rem;font-weight:400;letter-spacing:.02em}
.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:0.8438rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.3rem;font-weight:400;color:var(--ink);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;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;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: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: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%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--ink)}
.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(--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 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:var(--red)}
.stars{color:#c8920f;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:400;font-size:1.04rem;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(--red)}
.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:1.062rem;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 an 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(--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:var(--deep);color:#fff;font-family:var(--display);font-weight:400;font-size:1.04rem;border-radius:var(--radius)}
.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(--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.06rem;font-weight:400;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: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:0.9062rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--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:1.062rem}
.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:1.062rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: an oversized name, then everything inline in two flowing rows */
.fcta{background:var(--deep);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(--display);font-size:.78125rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#f2999d;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.6rem;font-weight:400;line-height:1.24;margin:0 0 10px}
.fcta p{color:#bed3c8}
.fcta__sm{font-size:.9375rem;color:#94ab9f;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#f2999d}
.fcta__img img{width:290px}
footer{background:var(--panel);border-top:1px solid var(--line)}
.fmast{padding-block:44px 6px}
/* The oversized name. It is the only place on this site the display face runs
   large, and the two link rows hang off it. */
.fname{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,1.2rem + 5.6vw,5.1rem);line-height:.96;letter-spacing:-.01em;color:var(--ink);margin:0}
.fname em{font-style:normal;color:var(--red)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:10px 0 0}
/* Two long flowing rows: destinations on the first, the desk's own facts and
   the legal pages on the second. Inline, wrapping, dot-separated. */
.frow{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;list-style:none;margin:0;padding:22px 0 0;border-top:1px solid var(--line)}
.frow--two{padding-top:14px;margin-top:16px}
.frow li{display:inline-flex;align-items:baseline}
/* The separator goes AFTER each item, not before the next one. A leading
   pseudo-element puts a stray dot at the start of every wrapped line, which is
   what a flowing row does for a living -- measured on the built footer, row one
   wrapped four times and started three of those lines with a dot. */
.frow li:not(:last-child)::after{content:"\00B7";color:var(--line-2);padding:0 11px}
/* 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:6px;margin-block:-6px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--red-d)}
.frow li span{font-size:1.062rem;color:var(--ink-3)}
.frow li b{font-size:1.062rem;color:var(--ink);font-weight:700}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:22px;margin-top:22px;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-block:0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--mint-2);border-top:1px solid var(--line);padding-block:28px 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:.66em;width:8px;height:2px;background:var(--red)}
.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(--deep);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:#a9c4b6}
.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){
  .versus{grid-template-columns:1fr .8fr 1.3fr}
}
@media (max-width:980px){
  :root{--navh:96px}
  .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}
  .nav__price{display:none}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px}
  .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}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding:34px 0 42px}
  /* The role line under the wordmark wraps to two lines on a phone and the
     topline strip above it already carries the same words. Dropping it here
     takes 22px off the masthead and removes the repetition. */
  .bw small{display:none}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it is pushed to the right of a line with no room for it and overhangs
     the card edge. On a phone let it start its own line and wrap its 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}
  .frow li:not(:last-child)::after{padding:0 8px}
}

/* ---- hero: the bottle breathes 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>, which is preloaded. */
.hero__card{isolation:isolate}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:hpFloat 9s ease-in-out infinite}
  @keyframes hpFloat{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, because
   this header is two rows and its height changes 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 three vendor shots here are 1080x1080,
   1800x1108 and 1800x689 - three different shapes - so without these rules 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 (pitfall 91). */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,150px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

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

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

/*!SITE-HOME-PAINT-START*/
/* ---- home-page design pass, PAINT half --------------------------------
   Slot: settle motif / 18px card radius, 12px control radius / two tight
   crisp stops for depth / inset-pill ribbon. Radius, shadow, gradient,
   colour, transform and transition move no box, so this half is below the
   critical marker and needs a restamp rather than a rebuild.

   The tokens are redeclared on BODY, not on :root. modern_surface.py
   re-appends its own :root block on every build and lands after this one;
   a declaration on the element beats an inherited one whatever the source
   order, so this wins on specificity rather than on position and survives
   that pass. It also keeps the raised radius on the home page and leaves
   the other thirty pages on the house 16px. */
body:has(.hero){
  --radius:18px;
  --radius-lg:18px;
  --r-control:12px;
  --shadow:0 1px 1px rgba(18,32,26,.07), 0 4px 10px rgba(18,32,26,.10);
  --shadow-lg:0 1px 1px rgba(18,32,26,.09), 0 10px 26px rgba(18,32,26,.15);
  --lift:0 1px 1px rgba(18,32,26,.09), 0 8px 20px rgba(18,32,26,.15);
}

/* Controls. The pair reads as two weights: the buying CTA carries the only
   gradient on the page, the secondary button stays solid with a ring. */
body:has(.hero) .btn{
  border-radius:var(--r-control);
  transition:background-color .2s ease,color .2s ease,box-shadow .22s ease,transform .22s ease;
}
body:has(.hero) .btn--red{
  background-color:var(--red);
  background-image:linear-gradient(176deg,#e4353d 0%,var(--red) 44%,var(--red-d) 100%);
  box-shadow:0 1px 1px rgba(18,32,26,.10), 0 4px 10px rgba(162,20,26,.26);
}
body:has(.hero) .btn--red:hover{
  background-color:var(--red-d);
  background-image:linear-gradient(176deg,var(--red) 0%,var(--red-d) 58%,#8c1015 100%);
  box-shadow:0 1px 1px rgba(18,32,26,.12), 0 10px 22px rgba(162,20,26,.32);
}
body:has(.hero) .btn--ghost{
  background:var(--panel);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2), 0 1px 1px rgba(18,32,26,.05), 0 4px 10px rgba(18,32,26,.07);
}
body:has(.hero) .btn--ghost:hover{
  background:var(--panel);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink-3), 0 1px 1px rgba(18,32,26,.07), 0 10px 22px rgba(18,32,26,.12);
}
/* 2px is the lift that registers without reflowing the row beside it. */
body:has(.hero) .btn:hover{transform:translateY(-2px)}
body:has(.hero) .btn:active{transform:translateY(0)}
/* The global focus ring is crimson, which disappears on a crimson button. */
body:has(.hero) .btn:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
body:has(.hero) .btn--ghost:focus-visible{outline-color:var(--red-d)}

/* Hero surfaces. The product card was flat -- border only, no shadow. */
body:has(.hero) .hero__card{
  border-radius:var(--radius-lg);border-color:rgba(18,32,26,.08);
  box-shadow:0 1px 1px rgba(18,32,26,.07), 0 10px 26px rgba(18,32,26,.13);
}
body:has(.hero) .hero .figures div{
  border-radius:12px;box-shadow:0 1px 1px rgba(18,32,26,.05);
}
body:has(.hero) .hero .factpills li{box-shadow:0 1px 1px rgba(18,32,26,.05)}

/* Pricing cards. Specificity beats modern_surface.py's .card / .card--pack
   rules, which land after this block on every build. */
body:has(.hero) #pricing .card--pack{
  border-radius:18px;
  box-shadow:inset 0 0 0 1px var(--line), 0 1px 1px rgba(18,32,26,.06), 0 4px 10px rgba(18,32,26,.09);
}
/* the recommended tier: raised by the margin above, and a different colour
   from its neighbours -- a warm ground and a crimson-tinted depth against
   their white and ink. */
body:has(.hero) #pricing .card--pack.featured{
  background:#fff7f7;border-color:var(--red);
  box-shadow:inset 0 0 0 1px rgba(207,29,36,.16), 0 2px 3px rgba(162,20,26,.12), 0 14px 30px rgba(162,20,26,.17);
}
body:has(.hero) #pricing .card--pack.featured .pack__head{background:var(--deep)}
/* the ribbon reads as a pill pressed into the card, sitting on the rule */
body:has(.hero) #pricing .pack__flag{
  border-radius:999px;background:var(--red);color:#fff;
  box-shadow:0 1px 1px rgba(18,32,26,.12), 0 4px 10px rgba(162,20,26,.28);
}
body:has(.hero) #pricing .pack__perks li{border-bottom-color:var(--line)}
body:has(.hero) #pricing .card--pack.featured .pack__perks li{
  border-bottom-color:rgba(207,29,36,.20);
}

/* The sticky buy bar is chrome that also appears on other pages; scoped so
   only the home page takes the new control language. */
body:has(.hero) .buybar{box-shadow:0 -1px 1px rgba(18,32,26,.05), 0 -6px 20px rgba(18,32,26,.10)}

@media (prefers-reduced-motion:reduce){
  body:has(.hero) .btn{transition:none}
  body:has(.hero) .btn:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer li a{font-size:16px}
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */

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

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

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

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