/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Playfair Display Fallback";src:local("Georgia");font-weight:400;size-adjust:102.36%;ascent-override:105.71%;descent-override:24.52%;line-gap-override:0.00%}
@font-face{font-family:"Playfair Display Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:89.63%;ascent-override:120.71%;descent-override:28.00%;line-gap-override:0.00%}
@font-face{font-family:"Inter Fallback";src:local("Arial");font-weight:400;size-adjust:107.47%;ascent-override:90.14%;descent-override:22.44%;line-gap-override:0.00%}
@font-face{font-family:"Inter Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:102.34%;ascent-override:94.66%;descent-override:23.57%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* horseboostdaily.com - Horse Boost, U.S. stocking partner.
   Design slot: "horseboostdaily.com" in _generators/batch12_assignments.py.

   Playfair Display / Inter. Cream ground with a VERTICAL rust-to-cream
   gradient behind the hero and flat cream everywhere else. Lifted white cards
   with an 18px radius and no border. The jar sits LEFT in a 5/7 hero split and
   the page runs on a THREE-ACROSS rhythm. Depth is a soft lift built from two
   shadow stops. Header is three zones on one cream bar - wordmark left,
   destinations centred, ordering button right. The closing band is a rust slab
   carrying the guarantee as an oversized figure above a three-column index.

   WHY EVERY ONE OF THOSE IS SPELT OUT
   This product has a sister desk, horseboostformula.com, written from the same
   vendor pack at the same time by another writer who cannot see this file.
   The separation had to be decided before either build started, so it lives in
   the slot and it holds on all six of rule 9's levers:

     Type    Playfair Display / Inter        vs  Sofia Sans Condensed / Livvic
     Layout  jar LEFT, 5/7, three-across     vs  jar RIGHT, tall column, two-across
     Cards   lifted white, radius 18         vs  outlined, 2px border, radius 0
     Ground  cream + rust gradient           vs  flat bone, no gradient anywhere
     Depth   soft lift, two shadow stops     vs  none at all
     Motion  flow/canter-glow, a three-beat  vs  flow/surge-braid, two ribbons

   So nothing here may quietly borrow a flat ground, a hairline card or a
   square corner: each of those is the other desk's half of the pair.

   The accent is the bottle's own colour. The Horse Boost front panel is black
   with BOOST set in a hot orange-red and a rust horse behind it, and the
   pack's own favicon gradient runs #852112 down to #411009 - hue 7, the same
   rust twice. --rust is that colour opened up enough to carry body links on
   cream; --ember is the orange off the wordmark, kept for figures and the
   gradient's top stop.

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

/* ---- tokens */
:root{
  --paper:#fbf5ec;          /* cream: the whole site's ground */
  --paper-2:#f6ebdd;        /* the tint band, a half step warmer */
  --panel:#ffffff;          /* cards, and they are white on purpose */
  --tint:#f6ebdd;
  --ink:#241a14;            /* body text, a warm near-black */
  --ink-2:#5b4a3f;          /* secondary copy */
  --ink-3:#6b584b;          /* captions and meta; 5.6:1 on the tint band */
  --rust:#a8371a;           /* the label's rust, the primary accent */
  --rust-d:#7d2711;         /* deeper: links, the closing slab, the bar */
  --rust-2:#5e1d0c;         /* deepest, the gradient's bottom stop */
  --ember:#d4601f;          /* the wordmark orange, for figures and rules */
  --ember-l:#fbe7d8;        /* the palest wash of it */
  --line:#ecd9c6;
  --line-2:#dcbda3;
  --good:#2b6a45;
  --warn:#8a5a10;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --radius:18px;            /* the card radius the slot names */
  --radius-sm:10px;
  --radius-pill:999px;
  /* Soft lift, TWO stops. One close and tight for the edge, one wide and
     faint for the lift. A single stop reads as a drop shadow; two read as
     paper sitting above paper, which is the whole depth lever here. */
  --shadow:0 1px 2px rgba(36,26,20,.06), 0 10px 26px rgba(36,26,20,.07);
  --shadow-lg:0 2px 4px rgba(36,26,20,.07), 0 26px 60px rgba(94,29,12,.14);
  --navh:112px;
  --display:"Playfair Display","Playfair Display Fallback",Georgia,"Times New Roman",serif;
  --text:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
*{min-width:0}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;color:var(--ink);background:var(--paper);
  font-family:var(--text);font-size:17px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg,table{max-width:100%}
img{height:auto;display:block}
a{color:var(--rust-d);text-underline-offset:3px}
a:hover{color:var(--rust)}
/* Playfair is a high-contrast didone. It needs negative tracking at display
   sizes and it must never be asked to set body copy, which is Inter's job. */
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:700;
  line-height:1.16;margin:0 0 .5em}
h1{font-size:clamp(1.82rem,1.1rem + 1.9vw,2.5rem);letter-spacing:-.02em}
h2{font-size:clamp(1.42rem,1.1rem + 1.2vw,2.05rem);letter-spacing:-.017em}
h3{font-size:1.2rem;letter-spacing:-.01em}
h4{font-size:1.04rem}
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:24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--rust-d);color:#fff;
  padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--rust);outline-offset:2px}

/* the eyebrow names the JOB of the section under it */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:.8125rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rust-d);
  margin:0 0 12px;
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;
  background:var(--ember)}

/* ---- buttons: a filled pill, because the cards are round and a square
   button beside an 18px radius reads as an accident */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 30px;
  font-family:var(--text);font-size:1rem;font-weight:700;letter-spacing:.005em;
  border:0;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;
  background:var(--ink);color:#fff;box-shadow:var(--shadow);
  transition:filter .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn:hover{filter:brightness(1.14);color:#fff;box-shadow:var(--shadow-lg)}
.btn:active{transform:translateY(1px)}
.btn--red{background:linear-gradient(180deg,var(--rust),var(--rust-d))}
.btn--red:hover{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(--paper-2);color:var(--ink);filter:none;
  box-shadow:inset 0 0 0 2px var(--rust)}
.btn--wide{width:100%}

/* ---- topline strip: role, lot, dose and count, guarantee, order phone.
   Five facts above the navigation so the menu does not have to carry them
   (hero.md). Above CRITICAL-END because it is the first thing painted. */
.util{background:var(--ink);color:#e8d6c8;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:3px;height:3px;border-radius:50%;
  background:#9c8071;flex:0 0 auto;margin-right:11px}
.util b{color:#fff;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:860px){
  /* Five items wrap to three lines and eat 103px of an 844px screen. Keep the
     role, the guarantee and the phone. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}
@media (max-width:480px){
  /* Even at three items this ran to three lines at 390 and took 86px off the
     first screen. Tightening the type and the separator pairs the guarantee
     with the phone and gives one line back. */
  .util{font-size:.75rem}
  .util__row{gap:3px 12px}
  .util__item+.util__item::before{margin-right:8px}
}

/* ---- header: THREE ZONES ON ONE CREAM BAR.
   Wordmark hard left, destinations centred in the space that is left, the
   ordering button hard right. One row, one ground, no second tier - the
   sister desk's masthead is a two-row bar split by a rule, so this one is
   deliberately single-storey.
   `padding-block`, never the shorthand: .nav__row also carries .wrap and
   `padding:14px 0` would wipe the page gutter (pitfall 46). */
.nav{position:sticky;top:0;z-index:100;background:var(--paper);
  box-shadow:0 1px 0 var(--line),0 10px 24px rgba(36,26,20,.05)}
.nav__row{display:flex;align-items:center;gap:20px;padding-block:12px;
  flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--ink);flex:0 0 auto;white-space:nowrap}
.brand__glyph{width:38px;height:38px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class: brand_marks.py replaces 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 (pitfall 16). */
.brand>svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;gap:1px}
.bw b{font-family:var(--display);font-size:1.4rem;font-weight:700;
  letter-spacing:-.022em;line-height:1.05}
.bw b em{font-style:normal;color:var(--rust)}
.bw small{font-size:.6875rem;font-weight:600;letter-spacing:.13em;
  color:var(--ink-3);text-transform:uppercase}
.menu{display:flex;flex-wrap:nowrap;gap:0 21px;list-style:none;margin:0 auto;
  padding:0;align-items:center;justify-content:center}
.menu a{display:inline-block;padding:9px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap}
.menu a:hover{color:var(--ink)}
.menu a[aria-current="page"]{color:var(--rust-d);border-bottom-color:var(--rust)}
.menu__more{display:none}
.nav__buy{margin-left:auto;display:flex;align-items:center;gap:14px;flex:0 0 auto}
.nav__price{text-align:right;line-height:1.22}
.nav__price b{display:block;font-family:var(--display);font-size:1.02rem;
  font-weight:700;color:var(--ink)}
.nav__price span{font-size:.7188rem;font-weight:600;color:var(--ink-3)}
.nav__cta{min-height:44px;padding:10px 22px;font-size:.9062rem}
.burger{display:none;width:48px;height:44px;background:transparent;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);cursor:pointer;
  padding:11px}
.burger span{display:block;height:2px;background:var(--ink);margin:0 0 5px}
.burger span:last-child{margin:0}
/* The row SHEDS as it narrows, it never wraps (design-system.md). */
@media (max-width:1340px){.menu{gap:0 16px}.menu a{font-size:.9rem}}
@media (max-width:1200px){.nav__price{display:none}}

/* ---- hero: the jar LEFT in a 5/7 split, the copy right.
   The slot's arrangement, and the opposite of the sister desk's tall right
   column. The ground under it is the one vertical gradient on the site: rust
   at the top edge washing down into the page's own cream, so the header reads
   as sitting on colour and the first section below reads as sitting on paper.
   hero_motifs.py rewrites the .hero background with the canter-glow recipe
   below; the shape of the rule is kept identical so the two cannot fight. */
.hero{position:relative;padding:36px 0 56px;overflow-x:clip;
  background:linear-gradient(180deg,#f0d8c5,var(--paper) 46%,var(--paper))}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 16px}
.hero h1 em{font-style:normal;color:var(--rust-d)}
/* The Quick Answer is a lifted white card, like every other card here, so the
   single most-read block on the site is built from the site's own language. */
.answer{background:var(--panel);border:0;border-radius:var(--radius);
  padding:20px 24px;margin:0 0 16px;box-shadow:var(--shadow-lg);
  border-left:5px solid var(--rust)}
.answer p{margin:0 0 .7em;font-size:1rem}
.answer p:last-child{margin:0}
.hero__road{font-size:.9688rem;color:var(--ink-2);margin:0 0 18px;max-width:66ch}
.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:.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:.9062rem;font-weight:600;color:var(--ink-2);
  background:var(--panel);padding:8px 16px;border-radius:var(--radius-pill);
  box-shadow:var(--shadow)}
.factpills li b{color:var(--rust-d);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);padding:14px 16px;border-radius:var(--radius);
  box-shadow:var(--shadow)}
.figures b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:700;
  color:var(--rust-d);line-height:1.1}
.figures span{display:block;font-size:.875rem;font-weight:600;color:var(--ink-3);
  margin-top:4px}
.hero__media{position:relative;align-self:center;min-width:0}
/* The jar sits on a white plate with the site's deepest lift under it. The
   plate is opaque and fills this column, which is why the motif's glows are
   sized at 118% and 150% of it - a shape drawn inside the card is invisible
   (design-system.md, rule 6). */
.hero__card{position:relative;z-index:2;text-align:center;border-radius:var(--radius);
  padding:26px 22px 16px;background:var(--panel);box-shadow:var(--shadow-lg)}
.hero__card img{width:100%;max-width:330px;height:auto;margin-inline:auto}
.hero__cap{margin:12px 0 0;font-size:.8125rem;font-weight:600;color:var(--ink-3)}
/* The hero shot is 1200x1200 square. Capping it on a PHONE inside the critical
   block matters: uncapped it renders full column width, adds ~120px to the
   media row and pushes the Quick Answer past the first screen. */
@media (max-width:760px){
  .hero__card{padding:14px 12px 10px}
  .hero__card img{max-width:232px}
  .hero__cap{margin-top:8px}
}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;
  font-size:.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. Flat cream: the gradient is the home hero's alone. */
.phead{padding:34px 0 14px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.crumbs{font-size:.9062rem;color:var(--ink-3);margin:0 0 13px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--rust-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:var(--measure)}

/* --- hero responsive rules, copied above the marker by critical_hero.py.
   Kept here as well so the first paint on a phone is already the phone hero
   rather than the desktop one relaid 692px later (SKILL.md, the performance
   gate). These are COPIES; the originals stay below. */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:24px}
  /* display:contents promotes the copy column's CHILDREN to grid items so each
     can be ordered on its own. Without it only .hero__media is a grid item and
     every other order value silently does nothing (hero.md). */
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  /* Cap the plate once the hero stacks. Left full width it runs 720px at
     768 around a 330px product shot, which reads as an empty card. The
     motif's glows are sized in percent OF this column, so narrowing it
     also keeps the halo tight around the card instead of washing the
     whole band. */
  .hero__media{order:3;margin:4px auto 18px;width:100%;max-width:470px}
  .answer{order:4}
  .hero__cta{order:5}
  .hero__road{order:6}
  .hero__sub{order:8}
  .factpills{order:10}
  .figures{order:11}
}
@media (max-width:760px){
  .hero{padding:24px 0 40px}
  .figures{grid-template-columns:1fr}
}
/* --- 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}
  /* Cap the plate once the hero stacks. Left full width it runs 720px at 768 around a 330px product shot, which reads as an empty card. The motif's glows are sized in percent OF this column, so narrowing it also keeps the halo tight around the card instead of washing the whole band. */ .hero__media{order:3;margin:4px auto 18px;width:100%;max-width:470px}
  .hero__cta{order:5}
  .hero__road{order:6}
  .hero__sub{order:8}
}
@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;}
}
@media (max-width:760px){
  /* the column is the screen on a phone; keep the plume inside it */ body:has(.hero) .hero__media::before{width:124%;height:104%;filter:blur(13px)}
  body:has(.hero) .hero__media::after{width:136%;filter:blur(20px)}
}
/* --- end of the copied hero responsive rules --- */

/* ---- hero motif -- canter-glow ---------------------------------------- */
.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(184deg,#f4dac7,#fbf5ec 40%,#fbf5ec)}.hero__media::before{content:'';position:absolute;left:50%;top:50%;width:118%;aspect-ratio:1.2;translate:-50% -50%;z-index:0;pointer-events:none;border-radius:50%;filter:blur(12px);background:radial-gradient(closest-side,rgba(212,96,31,0.34),transparent 66%);animation:hbdCanter 3.6s ease-in-out infinite}.hero__media::after{content:'';position:absolute;left:50%;top:50%;width:150%;aspect-ratio:2.2;translate:-50% -50%;z-index:0;pointer-events:none;border-radius:50%;filter:blur(18px);background:radial-gradient(closest-side,rgba(212,96,31,0.24),transparent 72%);animation:hbdCanter 3.6s ease-in-out infinite;animation-delay:.24s}@keyframes hbdCanter{0%,100%{transform:scale(.9);opacity:.16}12%{transform:scale(1.02);opacity:.58}24%{transform:scale(.96);opacity:.3}36%{transform:scale(1.05);opacity:.62}48%{transform:scale(.98);opacity:.34}60%{transform:scale(1.01);opacity:.5}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/

/* ==================================================================
   Everything below here loads async.
   ================================================================== */

/* ---- sections: a WIDE THREE-ACROSS RHYTHM.
   The slot's layout lever. Cards, steps, reason cards and image figures all
   default to three columns on a wide screen and the container runs 1180px to
   give them room. The sister desk runs two-across throughout and never three,
   so this is the difference a reader sees before they read a word. */
.sec{padding:60px 0}
.sec--tint{background:var(--paper-2)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--ink);color:#f0e4d9}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark .eyebrow{color:#e8a878}
.sec--dark .eyebrow::before{background:#e8a878}
.sec--dark a{color:#f2c6a4}
.sec--dark p,.sec--dark li{color:#efe2d6}
.sec--center{text-align:center}
.sec--center .eyebrow{justify-content:center}
.sec--center .sec__head p{margin-inline:auto}
.sec__head{margin:0 0 30px;max-width:var(--measure-wide)}
.sec__head h2{margin:0 0 12px}
.sec__head p{font-size:1.08rem;color:var(--ink-2);margin:0;max-width:var(--measure)}
/* The honest sections get their own field. The class is what marks the
   quarantine, and preflight's absence check measures the prose OUTSIDE it,
   because concentrating the caveats here is the rule's prescribed fix. */
.sec--honest{background:var(--paper-2);
  border-top:3px solid var(--ember);border-bottom:1px solid var(--line)}

.sec p,.sec li{max-width:none}
.sec>.wrap>p,.sec>.wrap>ul{max-width:var(--measure-wide)}

/* ---- cards: LIFTED WHITE, RADIUS 18, NO BORDER.
   The whole card lever in one rule. Nothing on this site separates content
   with a border; separation is by white paper and a two-stop shadow. */
.card{background:var(--panel);border-radius:var(--radius);padding:26px 26px 22px;
  box-shadow:var(--shadow);transition:box-shadow .2s ease,transform .2s ease}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.card h3{margin:0 0 10px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

.ticks{list-style:none;margin:0 0 1em;padding:0}
.ticks li{position:relative;padding-left:27px;margin:0 0 .55em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;
  color:var(--good);font-weight:700}
.sec--dark .ticks li::before{color:#8fd0aa}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  counter-reset:step}
.step{background:var(--panel);border-radius:var(--radius);padding:26px;
  box-shadow:var(--shadow);position:relative;counter-increment:step}
.step::before{content:counter(step);position:absolute;top:-14px;left:26px;
  width:36px;height:36px;border-radius:50%;background:var(--rust);color:#fff;
  font-family:var(--display);font-size:1.06rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.step h3{margin:14px 0 10px}
.step p:last-child{margin-bottom:0}

/* ---- image beside copy

   `align-items:center` is what made these blocks read as scattered. The
   picture and the copy are almost never the same height, so the shorter of the
   two floated in the middle of the taller one's row: the 298x760 hero scene
   filled its track at 458x1167 beside 452px of copy and left 361px of empty
   ground above the first line. `start` puts that first line level with the top
   of the picture, which is what makes the two read as one block, and the
   surplus height falls at the BOTTOM of the short column where it reads as
   margin rather than as a hole. */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:34px;
  align-items:start}
.split--flip .split__img{order:2}
.split__img img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.split__body p:last-child{margin-bottom:0}
/* A portrait still has to be capped, or it dwarfs the copy it belongs to even
   when the two start level: 1167px of bottle against 452px of text is not a
   pair. The cap is a HEIGHT, because that is the dimension that has to match
   the copy, and the width that produces it is this file's own aspect --
   blocks.py stamps --imgar and --imgw, and stamps .split--tall at h/w >= 1.2.
   Never `width:auto`: these images are lazy, and one that has not arrived
   computes 4px wide under it and collapses the section.
   Measured: 458x1167 beside 452px of copy becomes 204x520, and the doctor shot
   641x1121 beside 482px becomes 297x520. Inside the query because below it
   .split is a single column and the bottle should fill the phone. */
@media (min-width:761px){
  .split--tall .split__img{
    width:min(100%,var(--imgw,100%),calc(var(--split-h,520px) * var(--imgar,1)));
    margin-inline:auto}
}
/* A banner is a band, not a column. The 736x94 payment strip renders 82px tall
   in a 641px track beside 405px of copy -- a hairline of picture stranded in
   half a row of white, and stretched past its own file to get even that far.
   Stacked it reads as a strip with its text under it: full width of the block,
   capped at the file's own width, the copy on the page's own measure. */
.split--band{grid-template-columns:minmax(0,1fr);gap:20px;justify-items:center}
.split--band .split__img{order:0;width:min(100%,var(--imgw,100%))}
.split--band .split__body{max-width:var(--measure-wide)}

/* Images always carry content: .shots figures have a heading and a sentence.
   Three across, matching the section rhythm. */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots.s1{grid-template-columns:minmax(0,1fr);max-width:var(--measure)}
.shots figure{margin:0;background:var(--panel);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.shots img{width:100%}
.shots figcaption{padding:18px 20px 20px}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.1rem;
  margin:0 0 6px}
.shots figcaption span{display:block;font-size:.9688rem;color:var(--ink-2)}
.shots figure.portrait img{width:auto;max-width:var(--figw,280px);margin-inline:auto}

.badgewall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.badgewall figure{margin:0;background:var(--panel);border-radius:var(--radius);
  padding:22px;text-align:center;box-shadow:var(--shadow)}
.badgewall img{margin:0 auto 12px}
.badgewall b{display:block;font-family:var(--display);font-size:1.06rem;margin:0 0 6px}
.badgewall span{display:block;font-size:.9375rem;color:var(--ink-2)}

/* ---- tables */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--radius);box-shadow:var(--shadow);background:var(--panel);
  margin:0 0 16px}
table{border-collapse:collapse;width:100%;min-width:520px;background:var(--panel)}
th,td{text-align:left;padding:14px 18px;font-size:.9688rem;
  border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--text);font-weight:700;font-size:.8125rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  background:var(--paper-2);border-bottom:2px solid var(--line-2)}
tbody tr:last-child td{border-bottom:0}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:0 0 1em}

.versus{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.3fr);
  gap:1px;background:var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow)}
.versus>div{background:var(--panel);padding:14px 18px;font-size:.9688rem}
.versus__h{background:var(--paper-2);font-weight:700;font-size:.8125rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

/* ---- callouts */
.callout{background:var(--panel);border-radius:var(--radius);padding:22px 24px;
  box-shadow:var(--shadow);border-left:5px solid var(--ember);margin:0 0 22px}
.callout b{display:block;font-family:var(--display);font-size:1.12rem;margin:0 0 8px}
.callout p:last-child{margin-bottom:0}
.alert{background:var(--ember-l);border-radius:var(--radius);padding:22px 24px;
  border-left:5px solid var(--rust);margin:0 0 22px}
.alert b{display:block;font-family:var(--display);font-size:1.12rem;margin:0 0 8px}
.alert p:last-child{margin-bottom:0}
.note{font-size:.9688rem;color:var(--ink-3);margin:0 0 1em}
.keypoints{background:var(--panel);border-radius:var(--radius);padding:22px 24px;
  box-shadow:var(--shadow);border-left:5px solid var(--rust);margin:0 0 24px}
.keypoints>b{display:block;font-family:var(--display);font-size:1.12rem;margin:0 0 10px}
.keypoints ul{margin:0;padding-left:20px}
.keypoints li{margin:0 0 .45em}
.pullquote{margin:0 0 24px;padding:0 0 0 26px;border-left:4px solid var(--ember);
  font-family:var(--display);font-size:1.32rem;line-height:1.42;color:var(--ink)}
.pullquote cite{display:block;margin-top:10px;font-family:var(--text);
  font-size:.9375rem;font-style:normal;font-weight:600;color:var(--ink-3)}
.flag{display:inline-block;background:var(--rust);color:#fff;font-size:.75rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--radius-pill)}

/* ---- stats band, for use inside .sec--dark */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stats div{text-align:center}
.stats b{display:block;font-family:var(--display);font-size:2.4rem;font-weight:700;
  color:#fff;line-height:1.05}
.stats span{display:block;font-size:.9688rem;color:#e0cfc2;margin-top:8px}

/* ---- ingredients */
.ingthumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  margin:0 0 30px}
.ingthumbs figure{margin:0;background:var(--panel);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.ingthumbs img{width:100%}
.ingthumbs figcaption{padding:14px 16px;font-size:.9375rem}
.ingthumbs figcaption b{display:block;font-family:var(--display);font-size:1.04rem}
.inglist{display:grid;gap:22px}
.ingcard{background:var(--panel);border-radius:var(--radius);padding:26px;
  box-shadow:var(--shadow)}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
  margin:0 0 12px}
.ingcard__top h3{margin:0}
.ing__latin{font-style:italic;color:var(--ink-3);font-size:.9688rem}
.ing__dose{margin-left:auto;background:var(--paper-2);color:var(--rust-d);
  font-size:.875rem;font-weight:700;padding:5px 14px;border-radius:var(--radius-pill)}
.ingcard p:last-child{margin-bottom:0}

/* ---- the add-to-cart panel. Three lifted white cards; the featured tier
   rises 12px and runs taller, which is the slot's own card rule. */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  align-items:stretch}
.card--pack{position:relative;display:flex;flex-direction:column;
  padding:0;overflow:hidden}
.card--pack.featured{transform:translateY(-12px);box-shadow:var(--shadow-lg)}
.card--pack.featured .pack__head{background:var(--rust);color:#fff}
.card--pack.featured .pack__body{padding-bottom:34px}
.card--pack:hover{transform:translateY(-2px)}
.card--pack.featured:hover{transform:translateY(-14px)}
.pack__flag{position:absolute;top:16px;right:16px;z-index:2;background:var(--ink);
  color:#fff;font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 12px;border-radius:var(--radius-pill)}
.pack__head{background:var(--paper-2);padding:20px 24px 16px;text-align:center}
.pack__head b{display:block;font-family:var(--display);font-size:1.34rem}
.pack__head span{display:block;font-size:.875rem;font-weight:600;opacity:.82}
.pack__body{padding:22px 24px 26px;display:flex;flex-direction:column;
  align-items:center;text-align:center;flex:1}
.pack__body img{width:auto;max-height:150px;object-fit:contain;margin:0 auto 16px}
.pack__per{font-family:var(--display);font-size:3rem;font-weight:700;
  line-height:1;margin:0;color:var(--ink)}
.pack__per sup{font-size:1.3rem;vertical-align:super;font-weight:700}
.pack__unit{display:block;font-size:.875rem;font-weight:600;color:var(--ink-3);
  margin:4px 0 12px}
.pack__tot{margin:0 0 16px;font-size:1rem}
.pack__tot b{font-weight:700}
.pack__was{text-decoration:line-through;color:var(--ink-3);margin-left:8px}
.pack__perks{list-style:none;margin:0 0 20px;padding:0;width:100%}
.pack__perks li{font-size:.9375rem;color:var(--ink-2);padding:7px 0;
  border-bottom:1px solid var(--line)}
.pack__perks li:last-child{border-bottom:0}
.pack__marks{margin:12px 0 0;font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);margin:22px 0 0;
  max-width:var(--measure-wide)}
.pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tier{background:var(--panel);border-radius:var(--radius);padding:26px;
  box-shadow:var(--shadow)}
.tier--feature{transform:translateY(-12px);box-shadow:var(--shadow-lg)}
.tier__flag{display:inline-block;background:var(--rust);color:#fff;font-size:.75rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;
  border-radius:var(--radius-pill);margin:0 0 10px}
.tier__price{font-family:var(--display);font-size:2.6rem;font-weight:700;line-height:1}
.tier__rows{list-style:none;margin:16px 0;padding:0}
.tier__rows li{padding:7px 0;border-bottom:1px solid var(--line);font-size:.9375rem}
.guarantee{background:var(--panel);border-radius:var(--radius);padding:28px;
  box-shadow:var(--shadow);display:grid;grid-template-columns:auto 1fr;gap:24px;
  align-items:center}
.guarantee img{width:104px;height:auto}
.pay{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:20px 0 0}
.pay img{max-width:230px}
.pay span{font-size:.9375rem;color:var(--ink-3)}

/* ---- reviews */
.meter{display:grid;gap:10px;max-width:var(--measure)}
.meter__row{display:grid;grid-template-columns:52px 1fr 48px;gap:14px;
  align-items:center;font-size:.9375rem;font-weight:600}
.meter__bar{display:block;height:12px;background:var(--paper-2);
  border-radius:var(--radius-pill);overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--ember);
  border-radius:var(--radius-pill)}
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tcard{background:var(--panel);border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow)}
.tcard .meta{display:block;font-size:.875rem;color:var(--ink-3);margin:0 0 10px}
.tcard p:last-child{margin-bottom:0}
.tlife{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  margin:0 0 30px}
.tlife figure{margin:0;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);background:var(--panel)}
.tlife img{width:100%}
.tlife figcaption{padding:14px 16px;font-size:.9375rem;color:var(--ink-2)}
.stars{color:var(--ember);letter-spacing:2px}
.stars i{font-style:normal;opacity:.34}
.dist{display:grid;gap:8px}

/* ---- who it is for */
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.whycard{background:var(--panel);border-radius:var(--radius);padding:26px;
  box-shadow:var(--shadow)}
.whycard h3{margin:0 0 10px}
.whycard p:last-child{margin-bottom:0}
.why{display:grid;gap:22px}
.whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.forlist{background:var(--panel);border-radius:var(--radius);padding:26px;
  box-shadow:var(--shadow)}
.forlist h3{margin:0 0 12px}
.howuse{display:grid;gap:22px}
.usesteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.docband{background:var(--paper-2);border-radius:var(--radius);padding:26px;
  margin:24px 0 0}
.benefits{display:grid;gap:22px}
.benicons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.facts{display:grid;gap:22px}
.facttab{width:100%}
.ing{display:grid;gap:22px}

/* ---- trust strip and promo */
.trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:18px 34px;padding:26px 0;background:var(--paper-2)}
.trust img{max-height:58px;width:auto}
.promo{background:var(--ink);color:#f0e4d9;border-radius:var(--radius);
  padding:30px 34px;display:grid;grid-template-columns:1fr auto;gap:24px;
  align-items:center}
.promo h3{color:#fff;margin:0 0 8px}
.promo p{margin:0;color:#e5d6c9}
/* .promo is a dark band that does NOT carry .sec--dark, so the dark-band link
   colour further up does not reach it and weave_links.py's contextual link
   rendered at 1.76:1 -- rust on ink, effectively invisible. Any dark ground
   needs its own link colour, not only the one that happens to be named. */
.promo a{color:#f2c6a4}
.promo a:hover{color:#fff}
/* ...but a button is not a link in the prose. .promo a is (0,1,1) and was
   beating .btn's own (0,1,0) colour, so "Read the panel" rendered #f2c6a4
   on the rust gradient's lighter top stop at 4.15:1 -- under the 4.5 floor --
   while every other .btn--red on this site is white at 6.51:1. Re-assert the
   button's own label colour at container specificity. Text colour only: the
   fill, the radius and the accent are untouched. */
.promo .btn{color:#fff}

/* ---- FAQ */
.faq{display:grid;gap:14px}
.faq details{background:var(--panel);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
/* display:BLOCK, not flex, and the marker is positioned rather than being a
   flex item. weave_links.py inserts a contextual <a> inside these summaries,
   and under flex the anonymous text node and that link become two separate
   items which justify-content then pushes to opposite ends of the row. It
   validates clean and it reads as a broken question. */
.faq summary{cursor:pointer;list-style:none;padding:20px 52px 20px 24px;
  font-family:var(--display);font-size:1.1rem;font-weight:700;
  display:block;position:relative;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:24px;top:50%;
  transform:translateY(-50%);font-family:var(--text);font-size:1.5rem;
  font-weight:400;color:var(--rust);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq__body{padding:0 24px 22px}
.faq__body p:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{background:var(--panel);border-radius:var(--radius);padding:26px 28px;
  box-shadow:var(--shadow);margin:0 0 24px}
.refs ol{margin:0;padding-left:22px}
.refs li{font-size:.9375rem;color:var(--ink-2);margin:0 0 .7em;word-break:break-word}
.byline{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  background:var(--paper-2);border-radius:var(--radius);padding:26px 28px}
.byline__mark{width:56px;height:56px;border-radius:50%;background:var(--rust);
  color:#fff;font-family:var(--display);font-size:1.3rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.byline b{display:block;margin:0 0 8px}
.byline p{margin:0;font-size:.9688rem;color:var(--ink-2)}
.qa{background:var(--panel);border-radius:var(--radius);padding:26px 28px;
  box-shadow:var(--shadow)}
.qa p:first-child{margin-top:0}

/* ---- forms */
.form{display:grid;gap:18px}
.formcard{background:var(--panel);border-radius:var(--radius);padding:28px;
  box-shadow:var(--shadow)}
.formcard h3{margin:0 0 8px}
.form label{display:block;font-size:.9375rem;font-weight:600;margin:0 0 6px}
.form input,.form select,.form textarea{width:100%;font-family:var(--text);
  font-size:1rem;padding:13px 15px;border:1px solid var(--line-2);
  border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);
  min-height:48px}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--rust);
  border-color:var(--rust)}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

/* ---- the closing CTA */
.final{background:var(--panel);border-radius:var(--radius);padding:34px;
  box-shadow:var(--shadow-lg)}
.final--media{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center}
/* The closing CTA carries the single-bottle shot, and that file is only 121px
   wide. Asking for more than its native width is the one place on this site a
   product image could ship soft, so it is capped at 1:1. */
.final__img img{width:121px;max-width:121px;height:auto}
.final__body h2{margin:0 0 12px}
.final__price{font-weight:700;color:var(--rust-d);margin:0 0 18px}
.final__sm{margin:14px 0 0;font-size:.875rem;color:var(--ink-3)}
.fcta{padding:56px 0;background:var(--paper-2)}
.fcta__box{background:var(--panel);border-radius:var(--radius);padding:36px;
  box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1fr auto;
  gap:32px;align-items:center}
.fcta__eye{display:inline-block;font-size:.8125rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rust-d);margin:0 0 10px}
.fcta__h{font-family:var(--display);font-size:1.6rem;font-weight:700;
  line-height:1.2;margin:0 0 14px}
.fcta__sm{margin:14px 0 0;font-size:.875rem;color:var(--ink-3)}
.fcta__img img{width:280px;height:auto}

/* ---- keep reading */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.rel a{display:block;background:var(--panel);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);
  text-align:left;transition:box-shadow .2s ease,transform .2s ease}
.rel a:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);color:var(--ink)}
.rel b{display:block;font-family:var(--display);font-size:1.12rem;margin:0 0 8px}
.rel span{display:block;font-size:.9375rem;color:var(--ink-2)}

/* ---- footer: A RUST SLAB.
   The guarantee is set as an oversized figure, and the page index runs in
   THREE short columns beside it. Type here is at the house floor - 16px
   running text, 15px column headings - and footer_type.py appends a scoped
   copy of that floor at the end of this file so nothing below can shrink it. */
footer{background:var(--rust-d);color:#f7e6da}
/* EVERY link in the footer, not only the ones in the columns. The base rule
   sets `a{color:var(--rust-d)}` and the footer slab IS --rust-d, so a link
   this block does not recolour renders invisible against its own background.
   The contact line in .fpay shipped that way for one build: the telephone
   number and the email address were both present in the markup and neither
   could be seen. */
footer a{color:#ffd9bf}
footer a:hover{color:#fff}
.fband{background:var(--rust-2);padding:22px 0}
.fband__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:16px 26px}
.fband img{max-height:46px;width:auto}
.fband__note{font-size:.9375rem;color:#f0d5c4;max-width:460px}
.fband__note a{color:#ffd9bf}
/* padding-BLOCK, never the shorthand. .findex also carries .wrap, and
   `padding:44px 0 34px` sets padding-inline to 0, which wipes the page gutter
   on every page of the site and is invisible above the container's max-width
   (pitfall 46). */
.findex{padding-block:44px 34px;display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:40px}
.fguar{align-self:start}
/* `.fguar p` below is (0,1,1) and this was (0,1,0), so the running-text rule
   was winning and rendering the oversized guarantee figure at 16px. Qualify
   the class with its element and it outranks it (0,2,1). */
.fguar p.fguar__fig{font-family:var(--display);font-size:5.4rem;font-weight:700;
  line-height:.9;color:#fff;margin:0}
.fguar p.fguar__fig span{display:block;font-family:var(--text);font-size:1rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f4cdb5;
  margin-top:10px}
.fguar p{font-size:1rem;color:#f4ddd0;margin:16px 0 0}
.fguar a{color:#ffd9bf}
.fname{font-family:var(--display);font-size:1.6rem;font-weight:700;color:#fff;
  margin:0 0 6px}
.fname em{font-style:normal;color:#ffbe93}
.frole{font-size:1rem;color:#f1d3c1;margin:0 0 26px}
.fcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.fcols h3{font-family:var(--text);font-size:.9375rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#ffc6a1;margin:0 0 14px}
.fcols ul{list-style:none;margin:0;padding:0}
.fcols li{margin:0 0 .5em;font-size:1rem;line-height:1.6}
.fcols a{color:#fbeade;text-decoration:none}
.fcols a:hover{color:#fff;text-decoration:underline}
.fcols span{color:#efd2c0}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:28px 0 0;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.fpay img{max-width:230px}
.fpay span{font-size:1rem;color:#f0d3c2}
.disc{background:var(--rust-2);padding:28px 0 32px}
.disc p,.disc li{font-size:1rem;color:#f3dbcb;line-height:1.66}
.disc b{color:#fff}
.disc__list{margin:14px 0 0;padding-left:20px}
.disc__list li{margin:0 0 .45em}
.copy{margin:20px 0 0;font-size:1rem;color:#edcdb9}
.legal{max-width:var(--measure-wide)}
.legal h2{margin-top:1.4em}

/* ---- the sticky buy bar.
   It is declared display:flex at TOP LEVEL, not inside a phone breakpoint:
   house rule 8 applies on desktop too, and a bar that is display:none above
   760px receives the direction classes on an element that never renders. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:flex;
  background:var(--ink);color:#fff;transform:translateY(105%);
  transition:transform .28s ease;box-shadow:0 -6px 24px rgba(36,26,20,.22)}
.buybar.show{transform:translateY(0)}
.buybar__in{width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:12px 24px;display:flex;align-items:center;justify-content:space-between;
  gap:18px}
.buybar__t b{display:block;font-family:var(--display);font-size:1.06rem}
.buybar__t span{display:block;font-size:.875rem;color:#dcc9ba}
.buybar .btn{min-height:46px;padding:11px 26px;font-size:.9375rem}

/* ---- scroll reveal, gated on reduced motion */
[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!important;transform:none!important;transition:none}
  .card:hover,.rel a:hover{transform:none}
}

/* ---- blog */
.article{max-width:var(--measure);padding-top:8px}
.article h2{margin-top:1.6em;scroll-margin-top:130px}
.article h3{margin-top:1.3em}
.article figure{margin:26px 0;background:var(--panel);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.article figure img{width:100%}
.article figure.portrait img{width:auto;max-width:var(--figw,300px);margin-inline:auto}
.article figcaption{padding:14px 18px;font-size:.9375rem;color:var(--ink-2)}
.article .final--media{grid-template-columns:auto 1fr;padding:26px;gap:22px}
.article .final--media .final__img img{width:110px}
.article .final--media h2{margin-top:0;font-size:1.34rem}
.postmeta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 24px;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:.9375rem;color:var(--ink-3)}
.toc{background:var(--paper-2);border-radius:var(--radius);padding:22px 26px;
  margin:0 0 28px}
.toc b{display:block;font-family:var(--display);font-size:1.1rem;margin:0 0 10px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 .4em;font-size:.9688rem}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{background:var(--panel);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow)}
.posts img{width:100%}
.posts .pbody{padding:20px 22px 24px}
.posts h3{margin:0 0 10px;font-size:1.14rem}
.posts h3 a{text-decoration:none;color:var(--ink)}
.posts h3 a:hover{color:var(--rust-d)}
.posts p{font-size:.9688rem;color:var(--ink-2);margin:0 0 10px}
.posts .meta{font-size:.875rem;color:var(--ink-3)}

/* ---- responsive */
@media (max-width:1100px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .findex{grid-template-columns:1fr;gap:30px}
  .fguar p.fguar__fig{font-size:4.2rem}
}
@media (max-width:1040px){
  /* The menu collapses to the burger before the row can wrap. */
  .menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--paper);padding:10px 24px 18px;
    box-shadow:0 18px 30px rgba(36,26,20,.12);display:none;margin:0}
  .menu.open{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid var(--line)}
  .menu__more{display:block}
  .burger{display:block}
  .nav{position:sticky}
  .nav__row{position:relative}
}
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  /* Cap the plate once the hero stacks. Left full width it runs 720px at
     768 around a 330px product shot, which reads as an empty card. The
     motif's glows are sized in percent OF this column, so narrowing it
     also keeps the halo tight around the card instead of washing the
     whole band. */
  .hero__media{order:3;margin:4px auto 18px;width:100%;max-width:470px}
  .answer{order:4}
  .hero__cta{order:5}
  .hero__road{order:6}
  .hero__sub{order:8}
  .factpills{order:10}
  .figures{order:11}
  .g3,.steps,.shots,.tgrid,.tlife,.whygrid,.usesteps,.benicons,.rel,.posts,
  .badgewall,.ingthumbs,.prices,.pricing{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split--flip{grid-template-columns:1fr}
  .split--flip .split__img{order:0}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{order:-1}
  .fcta__img img{width:200px;margin-inline:auto}
  .final--media{grid-template-columns:1fr}
  .final__img img{margin-inline:auto}
  .promo{grid-template-columns:1fr}
  .card--pack.featured,.tier--feature{transform:none}
  .card--pack.featured:hover{transform:translateY(-2px)}
  .versus{grid-template-columns:1fr;gap:0}
  .versus__h:not(:first-child){display:none}
  .versus>div{border-bottom:1px solid var(--line)}
}
@media (max-width:760px){
  body{font-size:16px}
  .sec{padding:44px 0}
  .g2,.g3,.g4,.steps,.shots,.shots.s2,.tgrid,.tlife,.whygrid,.whofor,.usesteps,
  .benicons,.rel,.posts,.badgewall,.ingthumbs,.stats,.form__row,.fcols{
    grid-template-columns:1fr}
  /* Stacked, the best value has to come first; DOM order is starter, best,
     mid for the desktop ladder (design-system.md). */
  .prices,.pricing{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  .prices .card--pack:nth-child(1),.pricing .tier:nth-child(1){order:3}
  .prices .card--pack:nth-child(2),.pricing .tier:nth-child(2){order:1}
  .prices .card--pack:nth-child(3),.pricing .tier:nth-child(3){order:2}
  .guarantee{grid-template-columns:1fr;text-align:center}
  .guarantee img{margin-inline:auto}
  .byline{grid-template-columns:1fr}
  .buybar__in{padding:10px 16px;gap:12px}
  .buybar__t span{display:none}
  .fcta__box{padding:24px}
  .fguar p.fguar__fig{font-size:3.6rem}
  .card,.step,.tcard,.whycard,.forlist,.ingcard,.formcard{padding:22px}
}
@media (max-width:430px){
  .nav__cta{padding:10px 16px;font-size:.875rem}
  .bw small{display:none}
}


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

   --navh is measured and published by site.js: nav heights run 66-99px across
   the estate and change when a bar compacts, and a hardcoded offset tucks the
   product under the bar on the taller ones.

   min-height makes the sticky box a full screen tall so the shot can be
   CENTRED inside it. Without it the box is only as tall as the image and
   `top` merely pins it under the header, which is what the old house rule did.

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

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

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is three cards that have to share their edges, their image
   slot and their button baseline. The vendor product shots are different
   shapes (one site shipped 200x243, 200x105 and 200x65 side by side) and the
   blurbs are different lengths, so without these three rules the images
   render at three sizes and the three CTAs sit at three heights.

   The height lives here and not on the <img> attributes on purpose: those
   must keep stating each file's true ratio, or fix_img_dims.py rewrites them
   and CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* The footer column link is the thing you tap, and it was 17px tall in
   35px of row pitch -- under the 24px WCAG AA floor. The padding grows the
   hit area to ~33px and the negative margin gives the space straight back,
   so the footer renders identically. inline-block (not block) keeps the
   hover underline the width of the words. See fix_footer_tap.py. */
footer li a{display:inline-block;padding-block:4px;margin-block:-4px}

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav{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 surface + "rise" motif -- horseboostdaily.com =================

   Design slot for this domain: radius_card 16, radius_control 10,
   depth "deep ambient only, very diffuse (0 22px 60px)",
   motif_family "rise" -- warmth rising from the base of the bottle, drifting
   up and fading -- and ribbon "tab above the card".

   PAINT ONLY.  border-radius, box-shadow, background, colour, transform,
   transition and animation, plus the offsets of two decorative pseudo-elements
   and one already-absolute badge.  Nothing here moves a box that is in flow,
   so it lives below the CRITICAL-END marker and needs a restamp, not a
   rebuild.  (The marker is not spelt in full anywhere inside this block: CSS
   comments do not nest, so its closing delimiter would end this one, and
   tpl.py splits the stylesheet on that exact string to build the inline head.)

   EVERY selector is scoped to body:has(.hero).  class="hero" is on index.html
   and nowhere else on this site, so that scope is exactly "the home page" --
   and it is also what keeps this block alive: modern_surface.py and
   footer_type.py re-append AFTER this one on every build, so nothing here may
   win on source order.  body:has(.hero) carries (0,1,1) of its own, which puts
   every rule below at (0,2,1) or higher against modern_surface's (0,1,0).
   No !important is used anywhere except inside the reduced-motion block, where
   it has to match an existing !important that ships above the marker.        */

body:has(.hero){
  --hbp-rc:16px;                                  /* slot radius_card    */
  --hbp-rk:10px;                                  /* slot radius_control */
  /* One stop, deep and very diffuse -- the slot's depth language, and the
     opposite of the two-stop contact+ambient pair the rest of the estate
     shares.  Tinted with this site's own ink (36,26,20) and its own rust
     (94,29,12), never neutral black. */
  --hbp-amb:0 22px 60px rgba(36,26,20,.13);
  --hbp-amb-sm:0 12px 34px rgba(36,26,20,.10);
  --hbp-amb-lift:0 30px 74px rgba(36,26,20,.18);
  --hbp-amb-feat:0 30px 78px rgba(94,29,12,.22);
  --hbp-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- panels: radius 16, one deep diffuse stop ------------------------- */
body:has(.hero) .card,
body:has(.hero) .step,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .keypoints,
body:has(.hero) .refs,
body:has(.hero) .qa,
body:has(.hero) .byline,
body:has(.hero) .tablewrap,
body:has(.hero) .versus,
body:has(.hero) .faq details,
body:has(.hero) .rel a,
body:has(.hero) .figures div{
  border-radius:var(--hbp-rc);
  box-shadow:var(--hbp-amb);
}

/* The four panels that carry the page's weight -- the Quick Answer, the
   product plate and the two closing boxes -- take the deeper stop so the
   page has two levels of lift rather than one. */
body:has(.hero) .answer,
body:has(.hero) .hero__card,
body:has(.hero) .final,
body:has(.hero) .fcta__box,
body:has(.hero) .split__img img{
  border-radius:var(--hbp-rc);
  box-shadow:var(--hbp-amb-lift);
}

/* Chips stay pills on purpose: a 16px card, a 10px control and a full pill
   chip is three registers doing three jobs, not an accident. */
body:has(.hero) .factpills li{box-shadow:var(--hbp-amb-sm)}

/* ---- controls: radius 10, gradient on the buy button only ------------- */
body:has(.hero) .btn{
  border-radius:var(--hbp-rk);
  box-shadow:var(--hbp-amb-sm);
  transition:transform .22s var(--hbp-ease),box-shadow .22s var(--hbp-ease),
             filter .22s var(--hbp-ease),background-color .22s var(--hbp-ease);
}
/* The buying CTA is the only gradient on the page.  It runs rust -> deep rust
   -> deepest rust on the diagonal; white sits at 6.51:1 on the lightest of
   those three and rises from there, so the whole sweep clears 4.5:1.  --ember
   is deliberately NOT in it: white on --ember is 3.82:1 and this stylesheet
   already carries a note about shipping a label under the floor once. */
body:has(.hero) .btn--red{
  background:linear-gradient(135deg,var(--rust) 0%,var(--rust-d) 52%,var(--rust-2) 100%);
  color:#fff;
}
/* ...and the secondary button is SOLID, not an outline, so the pair reads as
   two weights of the same object rather than a button and a not-button. */
body:has(.hero) .btn--ghost{
  background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2),var(--hbp-amb-sm);
}
body:has(.hero) .btn:hover{transform:translateY(-2px);box-shadow:var(--hbp-amb-lift)}
body:has(.hero) .btn--ghost:hover{
  background:#fff;color:var(--ink);filter:none;
  box-shadow:inset 0 0 0 1px var(--rust),var(--hbp-amb-lift);
}
body:has(.hero) .btn:active{transform:translateY(0);box-shadow:var(--hbp-amb-sm)}
/* The site-wide ring is rust, which disappears on a rust button. */
body:has(.hero) .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
body:has(.hero) .btn--ghost:focus-visible{outline-color:var(--rust-d)}
body:has(.hero) .burger{border-radius:var(--hbp-rk)}
body:has(.hero) .buybar{border-radius:var(--hbp-rc) var(--hbp-rc) 0 0}

/* ---- pricing ladder ---------------------------------------------------
   The three Add To Cart buttons share ONE baseline (measured: all three at
   y=17505 at 1440x900) and nothing below is allowed to break it.  So the
   recommended tier is raised with DEPTH and COLOUR, not with a translate:
   .card--pack.featured{transform:translateY(-12px)} already ships above, and
   it has never rendered, because these cards carry data-reveal and
   [data-reveal].in{transform:none} comes later in the file and wins.  Putting
   the raise back would push that one button 12px off the shared baseline, so
   it is left inert and reported instead.                                   */
body:has(.hero) .card--pack{
  border-radius:var(--hbp-rc);
  box-shadow:var(--hbp-amb);
  overflow:visible;                /* the flag is a tab ABOVE the card now  */
}
/* overflow:hidden was what rounded the head's square corners; give the head
   its own radius back now that the card no longer clips. */
body:has(.hero) .card--pack .pack__head{
  border-radius:var(--hbp-rc) var(--hbp-rc) 0 0;
}
body:has(.hero) .card--pack .pack__perks li{
  border-bottom:1px dashed var(--line-2);
}
body:has(.hero) .card--pack .pack__perks li:last-child{border-bottom:0}

/* the recommended tier: warm surface, rust hairline, the deepest stop */
body:has(.hero) .card--pack.featured{
  background:linear-gradient(180deg,#fffaf4 0%,#fdf1e5 100%);
  box-shadow:0 0 0 1px rgba(168,55,26,.22),var(--hbp-amb-feat);
}
body:has(.hero) .card--pack.featured .pack__perks li{
  border-bottom-color:rgba(168,55,26,.32);
}

/* the ribbon: a tab sitting on top of the card's edge, not a pill in its
   corner.  The badge was already position:absolute, so moving it reflows
   nothing. */
body:has(.hero) .card--pack .pack__flag{
  top:0;left:50%;right:auto;
  transform:translate(-50%,-100%);
  border-radius:var(--hbp-rk) var(--hbp-rk) 0 0;
  background:linear-gradient(135deg,var(--rust),var(--rust-d));
  box-shadow:0 -12px 26px rgba(94,29,12,.20);
}

/* One hover weight for all three cards.  Without this the featured card
   answers the pointer by jumping 14px from a resting position of 0, because
   .card--pack.featured:hover{translateY(-14px)} survives the reveal pass that
   nulls its resting transform. */
body:has(.hero) .card--pack:hover{
  transform:translateY(-3px);box-shadow:var(--hbp-amb-lift);
}
body:has(.hero) .card--pack.featured:hover{
  transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(168,55,26,.30),var(--hbp-amb-feat);
}

/* ---- hero motif: "rise" -----------------------------------------------
   Slot motif_family "rise".  It replaces the canter-glow that ships above the
   marker, on the SAME two pseudo-elements of the media column -- never on the
   <img>, which is the preloaded LCP element -- at (0,2,1) against the inlined
   rule's (0,1,1), so the older block is outranked rather than deleted.

   Two things it also corrects.  The shipped rule sets the `translate` property
   AND a translate(-50%,-50%) inside its keyframe; those compose, so the glow
   was drawn half its own size up and to the left of the plate and read as a
   smudge in the corner of the band.  All offset here is in `transform` and
   `translate` is reset to none.  And 3.6s is a heartbeat: this is a gummy
   taken once a day for three to four weeks, so the plume runs 19s and the
   pool under it 27s.

   Sized past the plate on purpose: .hero__card is opaque and fills this
   column, so a shape drawn inside it renders nothing.  148% wide and 94% tall
   of a 453x802 column puts ~105px of plume either side of the card and ~150px
   above and below it.                                                      */
body:has(.hero) .hero__media::before,
body:has(.hero) .hero__media::after{
  content:'';position:absolute;left:50%;top:auto;z-index:0;
  translate:none;pointer-events:none;border-radius:50%;
}
body:has(.hero) .hero__media::before{
  bottom:2%;width:148%;height:94%;aspect-ratio:auto;
  background:radial-gradient(58% 52% at 50% 76%,
              rgba(212,96,31,.36) 0%,rgba(212,96,31,.17) 46%,rgba(212,96,31,0) 74%);
  filter:blur(16px);
  transform:translateX(-50%) translateY(8%) scale(.92);
  animation:hbdRiseWarm 19s cubic-bezier(.33,0,.5,1) infinite;
  animation-delay:0s;
}
body:has(.hero) .hero__media::after{
  bottom:-6%;width:170%;height:38%;aspect-ratio:auto;
  background:radial-gradient(closest-side,
              rgba(168,55,26,.26) 0%,rgba(168,55,26,.10) 58%,rgba(168,55,26,0) 78%);
  filter:blur(26px);
  transform:translateX(-50%);
  animation:hbdRiseBase 27s ease-in-out infinite;
  animation-delay:0s;
}
/* transform and opacity only, and opacity is 0 at both ends of the plume so
   the loop has no seam. */
@keyframes hbdRiseWarm{
  0%{transform:translateX(-50%) translateY(9%) scale(.90);opacity:0}
  16%{opacity:.62}
  58%{opacity:.40}
  100%{transform:translateX(-50%) translateY(-15%) scale(1.12);opacity:0}
}
@keyframes hbdRiseBase{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.30}
  50%{transform:translateX(-50%) scale(1.07);opacity:.46}
}
@media (max-width:760px){
  /* the column is the screen on a phone; keep the plume inside it */
  body:has(.hero) .hero__media::before{width:124%;height:104%;filter:blur(13px)}
  body:has(.hero) .hero__media::after{width:136%;filter:blur(20px)}
}

/* ---- motion off ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  /* The block above the marker already carries opacity:0!important on both
     pseudo-elements, so this has to answer in kind: same !important, higher
     specificity.  The motif stays, it simply stops moving. */
  body:has(.hero) .hero__media::before{
    animation:none!important;opacity:.34!important;
    transform:translateX(-50%) translateY(0) scale(1)!important;
  }
  body:has(.hero) .hero__media::after{
    animation:none!important;opacity:.34!important;
    transform:translateX(-50%)!important;
  }
  body:has(.hero) .btn,
  body:has(.hero) .card--pack{transition:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn:active,
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .card--pack.featured:hover{transform:none}
}
/* ==== end home surface + "rise" motif =================================== */
/*!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 .fband__note{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 55 box-shadow declaration(s)
   and 0 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 (36,26,20), 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-sm:12px;
  --shadow:0 1px 2px rgba(36,26,20,.06), 0 6px 18px rgba(36,26,20,.07);
  --lift:0 2px 6px rgba(36,26,20,.09), 0 16px 34px rgba(36,26,20,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.answer,
.whycard,
.tier,
.article figure{box-shadow:var(--shadow)}

/* 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. */
.faq{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,
.tier,
.posts h3 a{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier:hover,
.posts h3 a: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,
.tier:hover,
.posts h3 a:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}