/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Sofia Sans Condensed Fallback";src:local("Arial");font-weight:400;size-adjust:75.61%;ascent-override:119.03%;descent-override:39.68%;line-gap-override:0.00%}
@font-face{font-family:"Sofia Sans Condensed Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:73.63%;ascent-override:122.23%;descent-override:40.74%;line-gap-override:0.00%}
@font-face{font-family:"Livvic Fallback";src:local("Arial");font-weight:400;size-adjust:102.01%;ascent-override:98.52%;descent-override:24.51%;line-gap-override:0.00%}
@font-face{font-family:"Livvic Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:102.16%;ascent-override:98.38%;descent-override:24.47%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* horseboostformula.com - Horse Boost, Licensed U.S. retail desk.
   Design slot: "horseboostformula.com" in _generators/batch12_assignments.py.

   Sofia Sans Condensed / Livvic. FLAT BONE, no gradient anywhere on this site,
   with ONE forest band behind the supplement-facts section. NO SHADOWS AT ALL:
   every separation on this page is a border or a space. Outlined cards, 2px in
   the label's red, radius 0. The bottle sits RIGHT in a tall narrow column with
   the copy left, and the whole page runs two-across, never three.

   WHY IT IS BUILT THIS WAY, AND WHAT IT IS BUILT AGAINST
   -----------------------------------------------------
   Horse Boost is sold from two desks at once. The other one answers the same
   black-and-crimson bottle with cream, a rust gradient, layered soft shadows,
   lifted cards at radius 18, the bottle on the LEFT and a three-across rhythm.
   This desk takes the opposite of each: a bone field that never gradients, no
   shadow of any weight, a hard 2px keyline instead of a lift, square corners,
   the bottle on the RIGHT, and two columns wherever the other has three. The two
   pages cannot be confused at a glance, which is the point of holding the slot
   exactly rather than approximately.

   THREE THINGS THAT WILL LOOK LIKE OMISSIONS AND ARE NOT
   -----------------------------------------------------
   1. There is no `--shadow` token. There is nothing to reference. A box-shadow
      anywhere in this file is a defect, including a faint one.
   2. There is no gradient token and no `linear-gradient(` outside the hero
      motif's own pseudo-elements, which draw the two blurred ribbons that are
      this site's movement. `.hero` itself takes a single solid colour.
   3. `.g3` and `.g4` lay out TWO columns, not three and four. The class names
      are shared estate vocabulary and every tool keys off them; the rhythm is
      this site's, and it is two.

   The accent is the bottle's own red (#c02b22) and the forest (#1d3b2a) is the
   one dark surface on the site. Everything above CRITICAL-END is inlined into
   every page head.
*/

/* ---- tokens */
:root{
  --paper:#f3efe6;          /* bone: the page ground, flat, everywhere */
  --panel:#ffffff;          /* card fill: the product shots are cut out on white,
                               so a white card leaves no seam round a bottle */
  --tint:#eae5d8;           /* the quieter band, still flat */
  --ink:#1f1c17;            /* body text */
  --ink-2:#4d4740;          /* secondary text */
  --ink-3:#5d564c;          /* captions and meta. Measures 6.2:1 on bone */
  --forest:#1d3b2a;         /* the one dark surface: facts band, topline, bar */
  --forest-2:#14291d;
  --forest-l:#2c5740;
  --red:#c02b22;            /* the bottle's red: the 2px keyline and the buttons */
  --red-d:#8f1d17;          /* link and hover ink. 6.0:1 on bone */
  --red-w:#f7e6e3;          /* the flattest possible red wash, for a row stripe */
  --line:#d9d2c2;           /* hairlines that are not the accent */
  --line-2:#b9b09b;
  --on-dark:#f4f1e8;
  --good:#1d5c3c;
  --warn:#8a5a10;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --navh:126px;
  --display:"Sofia Sans Condensed","Sofia Sans Condensed Fallback","Arial Narrow",system-ui,sans-serif;
  --text:"Livvic","Livvic 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;color:var(--ink);background:var(--paper);
  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)}

/* Sofia Sans Condensed is narrow and tall. It takes a much larger nominal size
   than a normal-width face before it reads as the same size, and it needs its
   tracking opened a little at display sizes or the condensed stems close up.
   Measured at 1440: the H1 below sets three lines and leaves the hero CTA at
   y=690, well above the 900px fold. */
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:800;line-height:1.06;margin:0 0 .46em}
h1{font-size:clamp(2.3rem,1.42rem + 2.5vw,3.5rem);letter-spacing:.004em;text-transform:none}
h2{font-size:clamp(1.75rem,1.3rem + 1.7vw,2.6rem);letter-spacing:.006em}
h3{font-size:1.34rem;line-height:1.16;letter-spacing:.008em}
h4{font-size:1.16rem;letter-spacing:.008em}
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(--forest);color:var(--on-dark);
  padding:12px 18px;z-index:999;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* ---- buttons: flat fills, square, no lift and nothing to lift with */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:.03em;
  text-transform:uppercase;text-decoration:none;border-radius:0;
  padding:13px 24px;border:2px solid transparent;transition:background .15s,color .15s,border-color .15s}
.btn--red{background:var(--red);color:#fff;border-color:var(--red)}
.btn--red:hover{background:var(--red-d);border-color:var(--red-d);color:#fff}
.btn--ghost{background:transparent;color:var(--forest);border-color:var(--forest)}
.btn--ghost:hover{background:var(--forest);color:var(--on-dark)}
.btn--lg{padding:16px 30px;font-size:1.2rem}
.btn--wide{width:100%}

/* ---- the eyebrow: every section names its job */
.eyebrow{display:inline-block;font-family:var(--display);font-weight:700;
  font-size:.99rem;letter-spacing:.17em;text-transform:uppercase;color:var(--red-d);
  margin:0 0 10px}

/* ---- the topline strip */
.util{background:var(--forest);color:var(--on-dark);font-size:.9rem}
/* flex-start, not space-between. With space-between the two `--trim` items
   vanish below 920px and the remaining three are pushed to the edges, leaving
   a hole in the middle of the strip. Flowing from the left keeps the spacing
   identical at every width. */
.util__row{display:flex;flex-wrap:wrap;gap:4px 26px;align-items:center;
  padding-block:9px;justify-content:flex-start}
.util__item{display:inline-flex;align-items:center;gap:6px;font-weight:400;letter-spacing:.01em}
.util__item b{font-weight:700;color:#fff}
.util a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}

/* ---- the masthead: two rows, split by a forest hairline.
   Row one is the identity and the ordering block. Row two is the destinations.
   Nothing here lifts; the rule between the rows is the whole separation. */
.nav{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:2px solid var(--forest);transition:transform .22s ease}
.nav--away{transform:translateY(-100%)}
.nav__id{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-block:13px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand svg{width:34px;height:34px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1}
.bw b{font-family:var(--display);font-weight:800;font-size:1.92rem;letter-spacing:.012em;
  text-transform:uppercase;color:var(--ink)}
.bw b em{font-style:normal;color:var(--red)}
.bw small{font-family:var(--text);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-top:5px;font-weight:600}
.nav__buy{display:flex;align-items:center;gap:14px}
.nav__price{display:flex;flex-direction:column;line-height:1.2;text-align:right}
.nav__price b{font-family:var(--display);font-size:1.3rem;font-weight:800;color:var(--ink)}
.nav__price span{font-size:.82rem;color:var(--ink-3)}
.nav__cta{padding:11px 20px;font-size:1.02rem}
.nav__rail{border-top:1px solid var(--forest)}
.nav__railrow{display:flex;align-items:center;gap:16px;padding-block:4px;flex-wrap:wrap}
.menu{display:flex;flex-wrap:wrap;gap:2px 22px;list-style:none;margin:0;padding:0;flex:1 1 auto}
.menu a{font-family:var(--display);font-size:1.08rem;font-weight:700;letter-spacing:.055em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  padding:11px 0;display:inline-block;border-bottom:3px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--red-d);border-bottom-color:var(--red)}
.menu__more{display:none}
.burger{display:none;align-items:center;gap:9px;background:transparent;
  border:2px solid var(--forest);border-radius:0;height:42px;padding:0 14px 0 12px;
  cursor:pointer;font-family:var(--display);font-weight:800;font-size:1.06rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--forest)}
.burger i{display:flex;flex-direction:column;justify-content:space-between;
  width:20px;height:14px;flex:0 0 auto}
.burger span{display:block;height:2px;background:var(--forest)}

/* ---- the hero: copy LEFT, the bottle RIGHT in a tall narrow column.
   The media column is deliberately the narrow one -- 340px against a fluid
   copy column -- so the bottle reads as an upright object beside the argument
   rather than as half the screen. The motif's two ribbons are sized at 156%
   of this column and cross well outside it, which is what makes them visible
   past the opaque card.  */
.hero{background:var(--paper);border-bottom:2px solid var(--forest);
  padding:48px 0 44px;position:relative}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:46px;align-items:start}
/* The two motif ribbons are sized at 156% of the media column and cross well
   outside it, which is what makes them visible past the opaque card -- and at
   1440 that reach takes the left-hand tip about 50px into the copy column. The
   copy is therefore given its own stacking context ABOVE the ribbons (they sit
   at z-index 1), so the band passes behind the headline instead of over it.
   The motif's geometry is untouched. */
.hero__copy{min-width:0;position:relative;z-index:2}
.hero h1{margin-bottom:.3em}
.hero h1 em{font-style:normal;color:var(--red)}
.answer{border-left:4px solid var(--red);padding:2px 0 2px 18px;margin:0 0 18px}
.answer p{margin:0 0 .7em;font-size:1.12rem;line-height:1.62}
.answer p:last-child{margin-bottom:0}
.answer b{font-weight:700}
.hero__road{font-size:1rem;color:var(--ink-2);max-width:56ch;margin:0 0 20px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 18px;padding:0}
.hero__sub span{font-family:var(--display);font-size:.98rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--forest);border:2px solid var(--forest);padding:5px 11px}
.factpills{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0 0 20px;padding:0;
  border-top:2px solid var(--line-2);border-left:2px solid var(--line-2)}
.factpills li{font-size:.97rem;color:var(--ink-2);padding:9px 14px;
  border-right:2px solid var(--line-2);border-bottom:2px solid var(--line-2);flex:1 1 auto}
.factpills b{font-family:var(--display);font-size:1.3rem;font-weight:800;color:var(--ink);
  margin-right:5px}
.figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  border-top:2px solid var(--red);border-left:2px solid var(--red)}
.figures div{padding:13px 15px;border-right:2px solid var(--red);border-bottom:2px solid var(--red)}
.figures b{display:block;font-family:var(--display);font-size:1.85rem;font-weight:800;
  line-height:1;color:var(--red-d)}
.figures span{display:block;font-size:.93rem;color:var(--ink-2);margin-top:5px;line-height:1.42}
.hero__media{position:relative}
.hero__card{background:var(--panel);border:2px solid var(--forest);border-radius:0;
  padding:16px 16px 12px}
.hero__cap{margin:10px 0 0;font-size:.88rem;color:var(--ink-3);text-align:center;line-height:1.4}

/* ---- sections. Two across, always. */
.sec{padding:52px 0;border-bottom:2px solid var(--line)}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--forest);color:var(--on-dark);border-bottom-color:var(--forest)}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark .eyebrow{color:#e7b8b1}
.sec--dark a{color:#fff}
.sec--dark p,.sec--dark li,.sec--dark td,.sec--dark th{color:var(--on-dark)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec--center .answer,.sec--center .lead{margin-inline:auto}
.sec__head{max-width:var(--measure-wide);margin:0 0 28px}
.sec__head h2{margin-bottom:.3em}
.sec__head p{color:var(--ink-2);margin:0;max-width:var(--measure)}
.sec--dark .sec__head p{color:var(--on-dark)}
.lead{font-size:1.14rem;line-height:1.65;color:var(--ink-2);max-width:var(--measure);margin:0 0 1.1em}
.sec p,.sec li{max-width:var(--measure-wide)}
.sec--dark .sec p{max-width:none}

/* ---- the page head on an inner page */
.phead{padding:40px 0 34px;border-bottom:2px solid var(--forest);background:var(--paper)}
.phead h1{margin-bottom:.34em}
.crumbs{font-size:.92rem;color:var(--ink-3);margin:0 0 10px}
.crumbs a{color:var(--ink-3)}

/* ---- cards: 2px keyline, square, flat fill, nothing lifted */
.grid{display:grid;gap:22px}
.g2,.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--panel);border:2px solid var(--red);border-radius:0;padding:22px 22px 18px}
.card h3{margin-bottom:.4em}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:var(--forest-2);border-color:var(--forest-l)}
.sec--tint .card{background:var(--paper)}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;counter-reset:s}
.step{border:2px solid var(--forest);border-radius:0;padding:20px 22px 16px;background:var(--panel);
  counter-increment:s;position:relative}
.step h3::before{content:counter(s) ".";color:var(--red);margin-right:8px;font-weight:800}
.step p:last-child{margin-bottom:0}
.keypoints{border:2px solid var(--forest);border-radius:0;padding:20px 22px;background:var(--panel);margin:0 0 22px}
.keypoints b{display:block;font-family:var(--display);font-size:1.3rem;letter-spacing:.01em;margin-bottom:8px}
.keypoints ul{margin:0;padding-left:20px}
.callout{border:2px solid var(--red);border-left-width:8px;border-radius:0;padding:18px 22px;
  background:var(--red-w);margin:0 0 22px}
.callout b{display:block;font-family:var(--display);font-size:1.26rem;letter-spacing:.01em;margin-bottom:6px}
.callout p:last-child{margin-bottom:0}
.alert{border:2px solid var(--forest);border-left-width:8px;border-radius:0;padding:18px 22px;
  background:var(--tint);margin:0 0 22px}
.alert b{display:block;font-family:var(--display);font-size:1.26rem;letter-spacing:.01em;margin-bottom:6px}
.alert p:last-child{margin-bottom:0}
.pullquote{border:0;border-left:8px solid var(--red);margin:0 0 22px;padding:4px 0 4px 22px;
  font-family:var(--display);font-size:1.6rem;line-height:1.2;letter-spacing:.01em}
.pullquote cite{display:block;font-family:var(--text);font-size:.96rem;font-style:normal;
  color:var(--ink-3);margin-top:10px;letter-spacing:0}
.note,.tnote{font-size:.95rem;color:var(--ink-3)}
.ticks{list-style:none;margin:0 0 1em;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:7px}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--red)}
.sec--dark .ticks li::before{background:#e7b8b1}

/* ---- the honest quarantine: same card language, forest keyline, named */
.sec--honest{background:var(--tint)}
.sec--honest .card{border-color:var(--forest);background:var(--paper)}
.sec--honest .eyebrow{color:var(--forest)}

/* ---- tables */
.tablewrap{overflow-x:auto;border:2px solid var(--forest);margin:0 0 22px}
table{border-collapse:collapse;width:100%;min-width:560px;background:var(--panel)}
th,td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--line);font-size:1rem;
  vertical-align:top}
thead th{font-family:var(--display);font-size:1.06rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--forest);color:#fff;border-bottom:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even) td{background:var(--tint)}
.sec--dark .tablewrap{border-color:var(--forest-l)}
.sec--dark table{background:var(--forest-2)}
.sec--dark tbody tr:nth-child(even) td{background:#193423}
.sec--dark th,.sec--dark td{border-bottom-color:var(--forest-l)}
.sec--dark thead th{background:var(--forest-l)}

/* ---- the label-versus-research grid */
.versus{display:grid;grid-template-columns:1.1fr 1fr 1.3fr;border-top:2px solid var(--forest);
  border-left:2px solid var(--forest);margin:0 0 22px;background:var(--panel)}
.versus>div{padding:11px 14px;border-right:2px solid var(--forest);border-bottom:2px solid var(--forest);
  font-size:.99rem}
.versus__h{font-family:var(--display);font-size:1.04rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--forest);color:#fff}

/* ---- ingredient cards */
.inglist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ingcard{border:2px solid var(--red);border-radius:0;padding:20px 22px 16px;background:var(--panel)}
.ingcard__top{border-bottom:2px solid var(--line);padding-bottom:10px;margin-bottom:12px}
.ingcard__top h3{margin:0 0 4px}
.ing__latin{display:block;font-style:italic;color:var(--ink-3);font-size:.95rem}
.ing__dose{display:inline-block;margin-top:8px;font-family:var(--display);font-weight:700;
  font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--red);
  padding:3px 10px}
.ingcard p:last-child{margin-bottom:0}

/* ---- figures that carry content */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.shots.s1{grid-template-columns:minmax(0,1fr)}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;border:2px solid var(--forest);border-radius:0;background:var(--panel);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:14px 16px;border-top:2px solid var(--forest)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.2rem;letter-spacing:.01em;
  margin-bottom:4px}
.shots figcaption span{display:block;font-size:.97rem;color:var(--ink-2);line-height:1.5}
figure.portrait img{width:var(--figw,320px);max-width:100%;margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  border-top:2px solid var(--line-2);border-left:2px solid var(--line-2)}
.badgewall figure{margin:0;padding:18px 20px;display:grid;grid-template-columns:74px 1fr;
  gap:4px 16px;align-items:center;border-right:2px solid var(--line-2);border-bottom:2px solid var(--line-2)}
.badgewall img{grid-row:span 2}
.badgewall b{font-family:var(--display);font-size:1.16rem;letter-spacing:.01em;align-self:end}
.badgewall span{font-size:.95rem;color:var(--ink-2);line-height:1.45;align-self:start}

/* ---- the split: image one side, argument the other */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:30px;align-items:start}
.split--flip .split__img{order:2}
.split__img{border:2px solid var(--forest);border-radius:0;background:var(--panel);padding:0}
.split__img img{width:100%}
.split__body p:last-child{margin-bottom:0}

/* ---- big-number band, forest only */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  border-top:2px solid var(--forest-l);border-left:2px solid var(--forest-l)}
.stats div{padding:18px 20px;border-right:2px solid var(--forest-l);border-bottom:2px solid var(--forest-l)}
.stats b{display:block;font-family:var(--display);font-size:2.5rem;font-weight:800;line-height:1;color:#fff}
.stats span{display:block;font-size:.98rem;color:var(--on-dark);margin-top:7px;line-height:1.45}

/* ---- the review meter */
.meter{border:2px solid var(--forest);background:var(--panel);padding:16px 20px;margin:0 0 22px}
.meter__row{display:grid;grid-template-columns:64px 1fr 52px;gap:12px;align-items:center;
  margin-bottom:8px;font-size:.99rem}
.meter__bar{display:block;height:14px;background:var(--tint);border:1px solid var(--line-2)}
.meter__bar i{display:block;height:100%;background:var(--red)}
.stars{color:var(--red);letter-spacing:2px}
.stars i{font-style:normal;color:var(--line-2)}

/* ---- the add-to-cart panel. Two across, never three: the featured pack
   takes the full width of the row above its two siblings. The featured
   marker is an INVERTED head strip -- forest instead of bone -- because
   nothing on this site is allowed to lift. */
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:0 0 20px}
.card--pack{position:relative;padding:0;border:2px solid var(--red);background:var(--panel);
  display:flex;flex-direction:column}
.card--pack.featured{grid-column:1/-1;border-color:var(--forest)}
.pack__flag{position:absolute;top:0;right:0;background:var(--red);color:#fff;
  font-family:var(--display);font-size:.95rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 12px;z-index:2}
.pack__head{padding:14px 20px;border-bottom:2px solid var(--red);display:flex;
  flex-direction:column;gap:2px;background:var(--paper)}
.pack__head b{font-family:var(--display);font-size:1.6rem;font-weight:800;letter-spacing:.01em;
  text-transform:uppercase}
.pack__head span{font-size:.94rem;color:var(--ink-3)}
.featured .pack__head{background:var(--forest);border-bottom-color:var(--forest)}
.featured .pack__head b{color:#fff}
.featured .pack__head span{color:var(--on-dark)}
.pack__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1 1 auto}
.pack__body img{width:100%;max-width:210px;margin:0 auto 12px}
/* A flex row with the currency mark top-aligned against the digits. The
   previous `position:relative;top:-1.1em` lifted it by more than its own
   height and it read as a separate line above the figure. */
.pack__per{font-family:var(--display);font-size:3.1rem;font-weight:800;line-height:.92;
  margin:0;color:var(--ink);display:flex;align-items:flex-start;gap:3px}
.pack__per sup{font-size:1.2rem;line-height:1.1;font-weight:700;position:static;
  vertical-align:baseline}
.pack__unit{font-size:.95rem;color:var(--ink-3);display:block;margin-bottom:10px}
.pack__tot{margin:0 0 12px;font-size:1.06rem}
.pack__tot b{font-weight:700}
.pack__was{text-decoration:line-through;color:var(--ink-3);margin-left:6px}
.pack__perks{list-style:none;margin:0 0 16px;padding:0;flex:1 1 auto}
.pack__perks li{position:relative;padding-left:22px;font-size:.99rem;margin-bottom:5px}
.pack__perks li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;
  background:var(--red)}
.pack__marks{margin:10px 0 0;font-size:.88rem;color:var(--ink-3)}
/* The featured order spans both columns, so above the phone breakpoint its
   body becomes image-left / everything-else-right. Without this the pack shot
   is a 210px object centred in a 1,100px card and the row reads as empty.
   Specificity (0,3,1) beats the `.card--pack img` rule pack_cards.py appends
   at the end of this file, so source order does not matter here. */
@media (min-width:761px){
  /* The featured order spans both columns, so above the phone breakpoint the
     pack shot is parked down the left-hand side and the copy keeps its own
     single-column flow beside it.

     It is ABSOLUTE rather than a grid cell on purpose. A grid item spanning
     every row distributes its own height across those rows even when they are
     sized `min-content`, which pushed the price 200px clear of its "a bottle"
     caption. Taking the image out of flow leaves the copy column exactly as it
     is on the two smaller cards. */
  .card--pack.featured .pack__body{position:relative;padding-left:302px;min-height:250px}
  .card--pack.featured .pack__body img{position:absolute;left:22px;top:50%;
    translate:0 -50%;width:250px;max-width:250px;height:auto;max-height:250px;margin:0}
  .card--pack.featured .pack__perks{columns:2;column-gap:28px}
  .card--pack.featured .btn--wide{max-width:430px}
}
}
.buy__note{font-size:.95rem;color:var(--ink-3);max-width:var(--measure-wide)}

/* ---- the AI / answer-engine block */
.qa{border:2px solid var(--forest);background:var(--panel);padding:22px}
.qa>p:first-child{margin-top:0}
.qa .tablewrap{margin-bottom:0}
.qa table{min-width:420px}

/* ---- FAQ */
.faq{border-top:2px solid var(--forest)}
.faq details{border-bottom:2px solid var(--forest)}
.faq summary{cursor:pointer;list-style:none;padding:15px 40px 15px 2px;position:relative;
  font-family:var(--display);font-size:1.28rem;font-weight:700;letter-spacing:.01em;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:12px;font-size:1.6rem;
  color:var(--red);font-weight:700}
.faq details[open] summary::after{content:"\2013"}
.faq__body{padding:0 2px 16px}
.faq__body p:last-child{margin-bottom:0}

/* ---- related links */
.rel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;text-align:left;
  border-top:2px solid var(--forest);border-left:2px solid var(--forest)}
.rel a{display:block;padding:16px 20px;text-decoration:none;color:var(--ink);
  border-right:2px solid var(--forest);border-bottom:2px solid var(--forest)}
.rel a:hover{background:var(--red-w)}
.rel b{display:block;font-family:var(--display);font-size:1.24rem;letter-spacing:.01em;
  color:var(--red-d);margin-bottom:3px}
.rel span{display:block;font-size:.96rem;color:var(--ink-2);line-height:1.45}

/* ---- the closing CTA */
.final{border:2px solid var(--forest);background:var(--panel);padding:26px}
.final--media{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:center}
.final__img img{width:100%}
.final__body h2{margin-bottom:.32em}
.final__price{font-family:var(--display);font-size:1.28rem;font-weight:700;letter-spacing:.02em;
  margin:0 0 14px}
.final__sm{margin:12px 0 0;font-size:.9rem;color:var(--ink-3)}

/* ---- references and byline */
.refs ol{margin:0;padding-left:22px}
.refs li{margin-bottom:9px;font-size:.99rem;line-height:1.5}
.byline{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;
  border:2px solid var(--forest);background:var(--panel);padding:20px 22px;margin-top:24px}
.byline__mark{display:flex;align-items:center;justify-content:center;width:56px;height:56px;
  background:var(--forest);color:#fff;font-family:var(--display);font-size:1.5rem;font-weight:800;
  letter-spacing:.04em}
.byline b{display:block;font-family:var(--display);font-size:1.24rem;letter-spacing:.01em;margin-bottom:6px}
.byline p{margin:0;font-size:.99rem;line-height:1.55}

/* ---- forms */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--display);font-size:1.06rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase}
.field input,.field select,.field textarea{font-family:var(--text);font-size:17px;
  padding:11px 13px;border:2px solid var(--forest);border-radius:0;background:var(--panel);
  color:var(--ink)}
.field textarea{min-height:150px;resize:vertical}

/* ---- the sticky buy bar. It EXISTS on desktop; house rule 8 needs it to. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--forest);
  color:var(--on-dark);border-top:2px solid var(--red);transform:translateY(105%);
  transition:transform .22s ease}
.buybar.show{transform:translateY(0)}
html.chrome-up .buybar{transform:translateY(105%)}
.buybar__in{max-width:var(--wrap);margin-inline:auto;padding:11px 22px;display:flex;
  align-items:center;justify-content:space-between;gap:18px}
.buybar__t{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.buybar__t b{font-family:var(--display);font-size:1.22rem;font-weight:800;color:#fff;letter-spacing:.01em}
.buybar__t span{font-size:.92rem;color:var(--on-dark)}
.buybar .btn{flex:0 0 auto}

/* ---- the hero on a narrow screen. Copied above CRITICAL-END by
   critical_hero.py on the build after this one; it is written here first so
   a phone never paints the desktop hero and relays. */
@media (max-width:980px){
  .hero{padding:32px 0 34px}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .hero__media{max-width:340px;margin-inline:auto;width:100%}
  .figures{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .hero{padding:26px 0 30px}
  .figures{grid-template-columns:minmax(0,1fr)}
  .factpills li{flex:1 1 100%}
}

/* ---- hero motif -- surge-braid ---------------------------------------- */
.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:#f3efe6}.hero__media::before{content:'';position:absolute;left:50%;top:44%;width:156%;aspect-ratio:5.2;translate:-50% -50%;z-index:1;pointer-events:none;filter:blur(14px);background:linear-gradient(180deg,transparent 6%,rgba(192,43,34,0.38) 46%,transparent 94%);-webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);animation:hbfBraidA 9s cubic-bezier(.45,.05,.45,1) infinite}.hero__media::after{content:'';position:absolute;left:50%;top:56%;width:156%;aspect-ratio:5.2;translate:-50% -50%;z-index:1;pointer-events:none;filter:blur(14px);background:linear-gradient(180deg,transparent 6%,rgba(192,43,34,0.30) 46%,transparent 94%);-webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);animation:hbfBraidB 9s cubic-bezier(.45,.05,.45,1) infinite}@keyframes hbfBraidA{0%,100%{transform:rotate(-7deg) translateX(-26%);opacity:0}25%{opacity:.6}50%{transform:rotate(7deg) translateX(24%);opacity:.34}75%{opacity:.5}}@keyframes hbfBraidB{0%,100%{transform:rotate(7deg) translateX(26%);opacity:0}25%{opacity:.5}50%{transform:rotate(-7deg) translateX(-24%);opacity:.3}75%{opacity:.44}}
@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 (min-width:761px){
  /* the featured card sets its perks in two columns above this width, and a separator above the first item of column two has nothing above it */ body:has(.hero) #home-packs .featured .pack__perks li + li::after{display:none}
}
@media (max-width:980px){
  body:has(.hero) .hero__media::before{width:146%;top:42%}
  body:has(.hero) .hero__media::after{width:116%;top:42%}
}
/* --- end of the copied hero responsive rules --- */

/*!CRITICAL-END*/

/* ---- reveal on entry. `transform` and `opacity` only: neither can move the
   layout, which is what keeps this off the CLS score. */
[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}
  .nav,.buybar{transition:none}
}

/* ---- blog */
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.posts article{border:2px solid var(--red);background:var(--panel);padding:22px}
.posts article h3{margin-bottom:.35em}
.posts article p:last-child{margin-bottom:0}
.postmeta{font-size:.95rem;color:var(--ink-3);margin:0 0 16px}
.article{max-width:var(--measure);margin-inline:auto}
.article h2{margin-top:1.5em}
.article h3{margin-top:1.3em}
.toc{border:2px solid var(--forest);background:var(--panel);padding:20px 22px;margin:0 0 28px}
.toc b{display:block;font-family:var(--display);font-size:1.24rem;letter-spacing:.01em;margin-bottom:8px}
.toc ol{margin:0;padding-left:22px}
.toc li{margin-bottom:5px}
.article .final--media{grid-template-columns:150px minmax(0,1fr);gap:20px;padding:22px}
.article .final__price{font-size:1.12rem}
.dtable{width:100%}

/* ---- trust row and payment strip */
.trust__row{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}

/* ---- the footer: a bone slab. A forest keyline box holds the contact facts
   and the four-column page index sits beside it. */
.fcta{background:var(--tint);padding:48px 0;border-top:2px solid var(--forest)}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:center;
  border:2px solid var(--forest);background:var(--paper);padding:28px}
.fcta__eye{display:inline-block;font-family:var(--display);font-weight:700;font-size:1rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red-d);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:2rem;font-weight:800;line-height:1.08;
  letter-spacing:.01em;margin:0 0 12px}
.fcta__sm{margin:12px 0 0;font-size:.92rem;color:var(--ink-3)}
.fcta__img img{width:100%}

footer{background:var(--paper);border-top:2px solid var(--forest)}
.fband{border-bottom:2px solid var(--line)}
.fband__row{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;padding-block:20px}
.fband__note{font-size:1rem;color:var(--ink-2);flex:1 1 300px;line-height:1.5}
.findex{padding:34px 22px 30px}
.fname{font-family:var(--display);font-size:2.1rem;font-weight:800;letter-spacing:.012em;
  text-transform:uppercase;margin:0 0 4px}
.fname em{font-style:normal;color:var(--red)}
.frole{font-size:1rem;color:var(--ink-2);margin:0 0 26px;max-width:var(--measure-wide)}
.fgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:30px;align-items:start}
.fkey{border:2px solid var(--forest);padding:20px 22px;background:var(--panel)}
.fkey h3{font-size:1.2rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px}
.fkey p{margin:0 0 10px;font-size:1rem;line-height:1.5}
.fkey p:last-child{margin-bottom:0}
.fkey a{color:var(--red-d)}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.fcols h3{font-family:var(--display);font-size:1.1rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--forest);margin:0 0 10px}
.fcols ul{list-style:none;margin:0;padding:0}
.fcols li{margin-bottom:7px;font-size:1rem;line-height:1.45}
.fcols a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.fcols a:hover{color:var(--red-d);border-bottom-color:var(--red)}
.fcols span{color:var(--ink-2)}
.fpay{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:28px;
  border-top:2px solid var(--line);padding-top:20px}
.fpay span{font-size:1rem;color:var(--ink-2)}
.disc{background:var(--forest);color:var(--on-dark);padding:26px 0 30px}
.disc p,.disc li{font-size:1rem;line-height:1.6;color:var(--on-dark)}
.disc b{color:#fff}
.disc a{color:#fff}
.disc__list{margin:14px 0 0;padding-left:20px}
.disc__list li{margin-bottom:6px}
.copy{margin:18px 0 0;font-size:1rem;color:var(--on-dark)}

/* ---- breakpoints */
@media (max-width:1080px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:920px){
  .nav__price{display:none}
  .burger{display:inline-flex}
  .menu{display:none;flex-direction:column;gap:0;width:100%;order:3;
    border-top:2px solid var(--forest);padding-bottom:8px}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu li{border-bottom:1px solid var(--line)}
  .menu a{display:block;padding:12px 2px;border-bottom:0}
  .nav__railrow{justify-content:space-between;padding-block:8px}
  .util__item--trim{display:none}
  .split,.fcta__box{grid-template-columns:minmax(0,1fr)}
  .split--flip .split__img{order:0}
  .final--media{grid-template-columns:150px minmax(0,1fr);gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:38px 0}
  .g2,.g3,.g4,.steps,.inglist,.posts,.prices,.shots,.shots.s2,.badgewall,.rel,.stats{
    grid-template-columns:minmax(0,1fr)}
  .card--pack.featured{grid-column:auto}
  .versus{grid-template-columns:minmax(0,1fr)}
  .versus>div{border-right:0}
  .versus__h{display:none}
  .versus>div:nth-child(3n+1){background:var(--tint);font-weight:700}
  .final--media,.article .final--media{grid-template-columns:minmax(0,1fr)}
  .final__img{max-width:190px}
  .buybar__in{padding:10px 16px;gap:12px}
  .buybar__t span{display:none}
  .byline{grid-template-columns:minmax(0,1fr)}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .meter__row{grid-template-columns:52px 1fr 44px;gap:8px}
}
@media (max-width:520px){
  .bw small{display:none}
  .nav__id{padding-block:11px}
}
@media (max-width:420px){
  .bw b{font-size:1.62rem}
  .fname{font-size:1.8rem}
  .btn{font-size:1.04rem;padding:12px 18px}
  .btn--lg{font-size:1.1rem;padding:14px 22px}
}

/* --- 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--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots.s2>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 22px) / 2);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */

/* brand mark: underline construction */
.brand{position:relative}.brand::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:3px;border-radius:2px;background:#c02b22}

/* ==== 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*/
/* ===========================================================================
   Horse Boost - home page surface pass.  PAINT ONLY.

   Slot: motif family "circulate" (two counter-rotating arcs, one tighter),
   card radius 24, control radius 16, depth "two tight crisp stops", and the
   pricing ribbon as a tab above the card.

   SCOPE.  Every selector below is prefixed `body:has(.hero)`.  `class="hero"`
   is on index.html and on no other page of this site (checked), so the whole
   block is home-only.  The prefix also does a second job: it raises every
   selector to (0,2,1) or better, which beats the bare `.card` / `.card--pack`
   / `.answer` rules that modern_surface.py re-appends AFTER this block on
   every build.  Specificity, never source order.

   TOKENS are `--hbf-*` so nothing here collides with `--radius` / `--shadow` /
   `--lift`, which modern_surface.py owns and rewrites.
   =========================================================================== */

:root{
  --hbf-rc:24px;                                  /* cards and panels        */
  --hbf-rk:16px;                                  /* buttons and the tab     */
  /* Two tight stops, crisp, tinted with this site's own ink (31,28,23) --
     never neutral black. */
  --hbf-d1:0 1px 1px rgba(31,28,23,.10), 0 4px 10px rgba(31,28,23,.11);
  --hbf-d2:0 1px 1px rgba(31,28,23,.13), 0 10px 22px rgba(31,28,23,.16);
  /* the same two stops tinted with the label red and the forest, for the
     objects that are those colours */
  --hbf-dr:0 1px 1px rgba(143,29,23,.22), 0 4px 10px rgba(143,29,23,.24);
  --hbf-dr2:0 1px 1px rgba(143,29,23,.26), 0 10px 20px rgba(143,29,23,.30);
  --hbf-df:0 1px 1px rgba(29,59,42,.18), 0 6px 16px rgba(29,59,42,.20);
  --hbf-df2:0 1px 1px rgba(29,59,42,.22), 0 12px 26px rgba(29,59,42,.26);
}

/* ---- panels: the slot's 24px corner and its two-stop depth --------------- */
body:has(.hero) .hero__card,
body:has(.hero) .card,
body:has(.hero) .card--pack,
body:has(.hero) .step,
body:has(.hero) .keypoints,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .qa,
body:has(.hero) .final,
body:has(.hero) .meter,
body:has(.hero) .tablewrap,
body:has(.hero) .byline{border-radius:var(--hbf-rc);box-shadow:var(--hbf-d1)}

/* A picture that fills its frame needs the frame to clip, or the corner is
   rounded on the border and square on the photograph inside it. */
body:has(.hero) .split__img{border-radius:var(--hbf-rc);box-shadow:var(--hbf-d1);overflow:hidden}

/* ---- the keyline grids.  These draw their rules on the cells, so the round
   corner has to be clipped by the container rather than set on it. --------- */
body:has(.hero) .factpills,
body:has(.hero) .figures,
body:has(.hero) .rel,
body:has(.hero) .versus,
body:has(.hero) .stats{border-radius:var(--hbf-rc);overflow:hidden}

/* ---- two panels that have no fill, so a drop shadow drew a rectangle round
   nothing.  The quick answer is a rail and the FAQ is a list of rules. ----- */
body:has(.hero) .answer,
body:has(.hero) .faq{box-shadow:none;border-radius:0}

/* ---- the hero tags read better as pills than as square keylines --------- */
body:has(.hero) .hero__sub span{border-radius:999px}
body:has(.hero) .meter__bar,
body:has(.hero) .meter__bar i{border-radius:999px}

/* ---- buttons: the slot's 16px control corner, a gradient on the buying CTA
   and the secondary left solid, so the pair reads as two weights.  Both
   gradient stops are this site's own reds. ------------------------------- */
body:has(.hero) .btn{
  border-radius:var(--hbf-rk);
  transition:background-color .18s ease, background-image .18s ease,
             color .18s ease, border-color .18s ease,
             box-shadow .18s ease, transform .18s ease;
}
body:has(.hero) .btn--red{
  background-color:var(--red);
  background-image:linear-gradient(180deg,var(--red) 0%,var(--red-d) 100%);
  border-color:var(--red-d);
  box-shadow:var(--hbf-dr);
}
body:has(.hero) .btn--red:hover{
  background-color:var(--red-d);
  background-image:linear-gradient(180deg,var(--red-d) 0%,var(--red) 100%);
  border-color:var(--red-d);
  box-shadow:var(--hbf-dr2);
  transform:translateY(-2px);
}
body:has(.hero) .btn--ghost{background-image:none;box-shadow:var(--hbf-d1)}
body:has(.hero) .btn--ghost:hover{box-shadow:var(--hbf-d2);transform:translateY(-2px)}
body:has(.hero) .btn:active{transform:translateY(0)}
/* the page-wide focus ring is red, which is invisible on a red button */
body:has(.hero) .btn--red:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
body:has(.hero) .btn--ghost:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ---- anything else clickable answers the pointer ----------------------- */
body:has(.hero) .card--pack{transition:box-shadow .2s ease, transform .2s ease}
body:has(.hero) .card--pack:hover{box-shadow:var(--hbf-d2);transform:translateY(-2px)}
body:has(.hero) #home-packs .card--pack.featured:hover{box-shadow:var(--hbf-df2)}
/* `.rel a` is a cell inside a keyline grid: lifting it tears it off its own
   rules.  It answers with its fill, which is what this site drew it to do. */
body:has(.hero) .rel a{transition:background-color .18s ease}
body:has(.hero) .rel a:hover{transform:none;box-shadow:none;background:var(--red-w)}

/* ---- the pricing row --------------------------------------------------- */
/* Inner corner = outer corner minus the 2px keyline, or the head's square
   corner pokes out through the card's round one. */
body:has(.hero) #home-packs .pack__head{border-radius:22px 22px 0 0}
/* The recommended tier, differently coloured: its head deepens through the
   forest rather than sitting flat in it, and its depth is forest-tinted.
   It is NOT raised with margin or transform -- on this site the featured
   pack has the full width of its own row, so there is no shared button
   baseline to disturb and nothing to raise it above. */
body:has(.hero) #home-packs .card--pack.featured{box-shadow:var(--hbf-df)}
body:has(.hero) #home-packs .featured .pack__head{
  background:linear-gradient(180deg,var(--forest-l) 0%,var(--forest) 100%);
}
/* The ribbon, as this slot's tab above the card.  `transform` and not `top`,
   so it stays paint; the flag is absolutely positioned, so it moves nothing
   either way. */
body:has(.hero) #home-packs .pack__flag{
  left:auto;right:22px;top:0;
  transform:translateY(-46%);
  border-radius:var(--hbf-rk) var(--hbf-rk) 0 0;
  background:linear-gradient(180deg,var(--red) 0%,var(--red-d) 100%);
  box-shadow:var(--hbf-dr);
}
body:has(.hero) #home-packs .featured .pack__flag{
  background:linear-gradient(180deg,var(--forest-l) 0%,var(--forest) 100%);
  box-shadow:var(--hbf-df);
}
/* Dashed separators between the feature rows.  Drawn on an absolutely
   positioned pseudo-element in the 5px gap the list already has, so no row
   grows by a pixel and the button baselines are untouched. */
body:has(.hero) #home-packs .pack__perks li + li::after{
  content:'';position:absolute;left:0;right:0;top:-3px;height:0;
  border-top:1px dashed var(--line-2);
}
@media (min-width:761px){
  /* the featured card sets its perks in two columns above this width, and a
     separator above the first item of column two has nothing above it */
  body:has(.hero) #home-packs .featured .pack__perks li + li::after{display:none}
}

/* ---- the hero motif: circulate ----------------------------------------- */
/* Two counter-rotating arcs, one tighter.  They live on the media column's
   pseudo-elements, never on the <img>, which is the preloaded LCP element.
   Both are sized well past the 340x385 product card -- 162% and 128% of the
   column -- so they read OUTSIDE it rather than being hidden under an opaque
   card.  Only `transform` is animated, one turn in 44s and 34s: this is a
   gummy taken daily for weeks, not an energy drink.
   These override the surge-braid rules that sit above the critical marker,
   which is why every property those set is set again here. */
body:has(.hero) .hero__media::before,
body:has(.hero) .hero__media::after{
  content:'';position:absolute;left:50%;top:50%;
  translate:-50% -50%;
  aspect-ratio:1;height:auto;
  z-index:1;pointer-events:none;
  border:0;border-radius:50%;
  filter:none;opacity:1;
}
body:has(.hero) .hero__media::before{
  width:162%;
  background:conic-gradient(from 0deg,
    rgba(192,43,34,0) 0deg,
    rgba(192,43,34,.44) 42deg,
    rgba(192,43,34,.44) 78deg,
    rgba(192,43,34,0) 126deg,
    rgba(192,43,34,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 calc(100% - 3px));
  animation:hbfCircWide 44s linear infinite;
}
body:has(.hero) .hero__media::after{
  width:128%;
  background:conic-gradient(from 168deg,
    rgba(29,59,42,0) 0deg,
    rgba(29,59,42,.42) 34deg,
    rgba(29,59,42,.42) 62deg,
    rgba(29,59,42,0) 104deg,
    rgba(29,59,42,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 7px),#000 calc(100% - 6px));
  mask:radial-gradient(farthest-side,#0000 calc(100% - 7px),#000 calc(100% - 6px));
  animation:hbfCircTight 34s linear infinite reverse;
}
@keyframes hbfCircWide{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes hbfCircTight{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Below 980px the hero stacks and the product column becomes the LAST thing
   in it, so a ring sized for the desktop column hangs 51px past the hero's
   bottom rule and over the section beneath (measured at 390x844). Smaller,
   and carried a little above centre, it stays inside the hero at every width
   down to 320: both rings are a percentage of the column, so the clearance
   scales with it. Only the decoration resizes -- these are out of flow, so
   nothing in the page moves and there is no reflow when the sheet lands. */
@media (max-width:980px){
  body:has(.hero) .hero__media::before{width:146%;top:42%}
  body:has(.hero) .hero__media::after{width:116%;top:42%}
}

/* ---- everything above is switched off when motion is not wanted --------- */
@media (prefers-reduced-motion:reduce){
  /* the block above the marker hides these entirely; a still ring is better
     than nothing, and this selector is more specific, so it wins */
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{animation:none!important;opacity:1!important}
  body:has(.hero) .btn,
  body:has(.hero) .card--pack,
  body:has(.hero) .rel a{transition:none}
  body:has(.hero) .btn--red:hover,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .btn:active,
  body:has(.hero) .card--pack:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 13 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 (31,28,23), 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(31,28,23,.06), 0 6px 18px rgba(31,28,23,.07);
  --lift:0 2px 6px rgba(31,28,23,.09), 0 16px 34px rgba(31,28,23,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.split__img,
.answer{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. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.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}