/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Bree Serif Fallback";src:local("Georgia");font-weight:400;size-adjust:102.32%;ascent-override:105.26%;descent-override:27.46%;line-gap-override:0.00%}
@font-face{font-family:"Overpass Fallback";src:local("Arial");font-weight:400;size-adjust:101.15%;ascent-override:87.29%;descent-override:37.86%;line-gap-override:0.00%}
@font-face{font-family:"Overpass Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:98.09%;ascent-override:90.02%;descent-override:39.05%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* prostaflowdaily.com — ProstaFlow, U.S. authorized retailer desk.
   Design slot: row 306 of batch8_assignments.py. Bree Serif / Overpass, an
   oxblood-tinted stone ground, a masthead whose name stacks over a strapline
   with the destinations wrapping beneath it in one flowing row, and a footer
   whose brand name is set as a rotated left-hand spine with the destinations
   ranked beside it. Hero motif: channel-ease.

   The accent is the label's teal, taken off the bottle itself: PROSTA in
   charcoal, FLOW in teal with a Mars symbol standing in for the O. Oxblood is
   the GROUND, teal is the ACCENT, and that pairing is what keeps this desk
   clear of the seafoam sister domain and of the navy-on-steel prostate desk
   already on the estate.

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

/* ---- tokens */
:root{
  --ink:#241a1c;            /* body text, warm near-black */
  --ink-2:#584749;          /* secondary */
  --ink-3:#7d6a67;          /* captions, meta */
  --ox:#7a2230;             /* the oxblood */
  --ox-d:#4e141d;           /* deep, for dark bands */
  --ox-2:#93323f;
  --teal:#1b8b91;           /* the label's teal, off the bottle */
  --teal-d:#1a6369;         /* the readable teal: 6.9:1 on --panel */
  --teal-l:#5fb6bb;
  --wash:#e2f0f0;           /* teal wash */
  --paper:#f3ebe7;          /* the page: oxblood-tinted stone */
  --panel:#fffdfc;
  --tint:#eadfd9;
  --line:#e2d2cb;
  --line-2:#c8b0a8;
  --good:#1d6f4f;
  /* --teal is deliberately the most saturated token in this block, because
     brand_marks.py derives the logo's accent by picking exactly that. Left at
     a duller teal the tool would have filled the mark's circle with --warn and
     shipped an amber logo on a teal-and-oxblood site. */
  --warn:#8a5f26;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:10px;
  --radius-lg:18px;
  --shadow:0 1px 2px rgba(36,26,28,.05), 0 12px 32px rgba(78,20,29,.08);
  --shadow-lg:0 24px 62px rgba(78,20,29,.20);
  --navh:118px;
  --display:"Bree Serif","Bree Serif Fallback",Georgia,"Times New Roman",serif;
  --text:"Overpass","Overpass Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ox);text-underline-offset:3px}
a:hover{color:var(--teal-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--ox);font-weight:400;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.95rem,1.25rem + 2.2vw,3rem);letter-spacing:-.01em}
h2{font-size:clamp(1.45rem,1.14rem + 1.2vw,2.15rem);letter-spacing:-.008em}
h3{font-size:1.2rem}
h4{font-size:1.03rem}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ox);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--teal-d);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it. The dot is the mark's
   own node glyph, reduced to its smallest possible statement. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:0.8438rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-d);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 0 3px var(--wash);flex:0 0 auto;
}

/* ---- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 32px;
  font-family:var(--text);font-size:1rem;font-weight:800;letter-spacing:.012em;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:linear-gradient(104deg,var(--ox-d) 0%,var(--ox-2) 100%);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.13);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--teal{background:linear-gradient(104deg,var(--teal-d) 0%,var(--teal) 100%)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.08rem}
.btn--ghost{background:none;color:var(--ox);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--ox-d)}
.btn--wide{width:100%}

/* ---- header: the name STACKED over its strapline, destinations wrapping
   beneath in one flowing row. No second tinted deck: the row sits on the
   paper and is separated by a hairline, so the masthead reads as one block
   of type rather than as two bars. */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);box-shadow:0 1px 0 var(--line)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap and
   `padding:14px 0` would set padding-inline to 0 and wipe the page gutter.
   Invisible above the container max-width, and no overflow test can see it
   (pitfall 46). */
.nav__top{display:flex;align-items:center;gap:20px;padding-block:14px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ox);min-width:0}
.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
   that tool runs and the glyph renders at its intrinsic size — a masthead two
   different heights on one site (pitfall 16). */
.brand>svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.bw b{font-family:var(--display);font-size:1.42rem;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.bw b em{font-style:normal;color:var(--teal-d)}
.bw small{font-size:0.9062rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav__price{text-align:right;line-height:1.24}
.nav__price b{display:block;font-family:var(--display);font-size:1.16rem;color:var(--ox)}
.nav__price span{font-size:.78125rem;font-weight:600;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 22px;font-size:.95rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--ox);margin:0 0 5px}
.burger span:last-child{margin:0}
.nav__flow{border-top:1px solid var(--line);padding-block:0}
.menu{
  display:flex;flex-wrap:wrap;gap:0 24px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:44px;
}
.menu a{
  display:inline-block;padding:11px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--ox)}
.menu a[aria-current="page"]{color:var(--ox);border-bottom-color:var(--teal)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the bottle RIGHT on a stone field */
.hero{position:relative;background:var(--paper);padding:52px 0 58px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--teal-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--teal);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:0 0 18px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.062rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:0.9688rem;font-weight:600;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px;min-width:0}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight:800}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:0.9062rem;font-weight:600;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:999px;min-width:0;
}
.factpills li b{color:var(--ox);font-weight:800}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);padding:13px 15px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--ox);line-height:1.12}
.figures span{display:block;font-size:0.9062rem;font-weight:600;color:var(--ink-3);margin-top:3px}
.hero__media{position:relative;align-self:center;min-width:0}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px}
.hero__card img{width:100%;max-width:430px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 26px 40px rgba(78,20,29,.28))}
.hero__cap{margin:16px 0 0;font-size:.8125rem;font-weight:700;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:0.9062rem;font-weight:600;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:800}

/* ---- inner page head */
.phead{padding:34px 0 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:0.9062rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--teal-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: the five trust facts, above the navigation.
   Role, lot, dose and count, guarantee, order phone. It exists so the NAV does
   not have to carry them (hero.md): getexitide shipped without one, pushed the
   lot into the menu as a chip, crowded the navigation and still left the other
   four facts off the page. It sits ABOVE CRITICAL-END because it is the first
   thing painted; appended to the end of the stylesheet it would load async and
   flash unstyled at the very top of the page. */
.util{background:var(--ox-d);color:#e3c7c9;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.util__item+.util__item::before{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--teal-l);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:760px){
  /* Five items wrap to three lines and eat ~100px of an 844px screen
     (hero.md). Keep role, guarantee and phone; the lot and the dose are on
     the pages that need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}


/* ---- hero motif -- channel-ease ---------------------------------------- */
.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(168deg,#f3ebe7,#ccdad8 52%,#f3ebe7)}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

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

/*!SITE-HOME-CRIT-START*/
/* ---- home page geometry (design pass) --------------------------------
   Above the critical marker because every rule here MOVES A BOX, and the
   block above the marker is inlined into the head of every page at build
   time. A restamp alone would leave the old copy inlined in ~30 pages, so
   this needs a rebuild. Small on purpose for the same reason.

   1. The buy button on the first screen. Measured at 1440x900 the hero CTA
      ran from y=881 to y=946: its top cleared the fold by 19px and its
      bottom did not, so the money page's first screen carried no whole
      button. Reordering the copy column to eyebrow, headline, Quick
      Answer, BUTTONS, payment line, then the evidence puts it at ~749.
      DESKTOP ONLY. Below 981px .hero__copy is display:contents and the
      phone order is composed above; those values are left untouched.
   2. Room between the pricing feature rows for a dashed separator, and the
      corner flag's own padding.
   3. The recommended tier is raised with margin-top, never transform: the
      reveal pass sets transform:none and would cancel it. A negative top
      margin inside a stretch row lifts the card's TOP edge only, so all
      three Add To Cart buttons stay on one baseline -- measured after. */
@media (min-width:981px){
  .hero__copy>.eyebrow{order:1}
  .hero__copy>h1{order:2}
  .hero__copy>.answer{order:3}
  .hero__copy>.hero__cta{order:4}
  .hero__copy>.hero__sub{order:5}
  .hero__copy>.hero__road{order:6}
  .hero__copy>.factpills{order:7}
  .hero__copy>.figures{order:8}
}
body:has(.hero) .pack__perks li{margin-bottom:9px;padding-bottom:9px;border-bottom:1px dashed var(--line-2)}
body:has(.hero) .pack__perks li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
body:has(.hero) .pack__flag{top:0;right:14px;padding:6px 14px 14px}
@media (min-width:761px){
  body:has(.hero) .prices>.card--pack.featured{margin-top:-14px}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:62px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--ox-d);color:#f0dcdd}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#e6cccd}
.sec--dark .eyebrow{color:#8fd2d6}
.sec--dark a{color:#9fdde0}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#e6cccd}

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

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

/* ---- tables */
.tablewrap{overflow-x:auto;min-width:0;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--display);font-weight:400;color:#fff;background:var(--ox);font-size:.9688rem}
tbody tr:nth-child(even){background:#fbf5f3}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--ox)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.steps>*{min-width:0}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 20px 70px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:36px;height:36px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--teal),var(--teal-d));color:#fff;
  font-family:var(--display);font-size:1.02rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: a teal node dot set into the top-left corner, the mark's glyph
   repeated at component scale */
.grid{display:grid;gap:18px}
.grid>*{min-width:0}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px 22px}
.card::before{
  content:"";position:absolute;left:22px;top:12px;width:9px;height:9px;
  border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px var(--wash);
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#63202a;border-color:#8a3742}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #bcdcdc;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--teal-d)}
.callout p:last-child{margin:0}
.alert{background:#fdf5ea;border:1px solid #efdcbc;border-left:4px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.3rem;line-height:1.5;color:var(--ox);border-left:4px solid var(--teal);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;font-weight:400;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--teal);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. A
   .tablewrap holding a 520px-min table therefore keeps its column 520px wide
   however narrow the grid is, and `1fr` (= minmax(auto,1fr)) reintroduces the
   floor that the desktop minmax(0,1fr) avoids. Measured elsewhere on this
   estate at 390: the grid box was 350px and its single column resolved to
   522px, so the right-hand half was clipped away by body{overflow-x:clip}
   with nothing to scroll and nothing to report. min-width:0 is the fix and it
   belongs on the items at every width, not only inside the media query. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats>*{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.2rem;color:#fff;line-height:1.12}
.stats div span{display:block;font-size:.9375rem;color:#e6cccd;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr 1fr 1.15fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem;min-width:0}
.versus>div:nth-child(3n+1){font-weight:700;background:#fbf5f3}
.versus__h{background:var(--ox)!important;color:#fff;font-family:var(--display);font-weight:400;font-size:.95rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* Same family as the .split fix above. .inglist is a grid, .ingcard is a grid
   ITEM, and a grid item's default min-width is auto — so the card cannot
   shrink below its min-content. `.ing__dose` is white-space:nowrap and the
   longest of these chips renders past 200px, which sets the floor.
   min-width:0 lets the card shrink; .ingcard__top already wraps, so the chip
   drops onto its own line and fits. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px;min-width:0}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:800;color:#fff;background:var(--teal-d);padding:4px 12px;border-radius:999px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-lg);overflow:hidden;position:relative}
.card--pack::before{display:none}
/* No lift on the featured card. A `margin-top:-12px` raises its box, which
   makes it 12px TALLER than its siblings and trips responsive.md's rule that a
   pricing row shares one height and one button baseline. The card is already
   unmistakable from its accent border, its deeper shadow, its coloured head
   band and its flag, so the lift bought nothing and cost the check. */
.card--pack.featured{border-color:var(--teal);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:10px;min-width:0}
.card--pack.featured .pack__head{background:linear-gradient(104deg,var(--ox-d),var(--ox-2));border-bottom-color:var(--ox)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.14rem;font-weight:400;min-width:0}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--teal-d);color:#fff;font-size:0.8438rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px;min-width:0}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,170px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.35rem;color:var(--ox);line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1rem;top:-.72em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;color:var(--ink-3);margin:4px 0 12px}
.pack__tot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:800}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:600}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:800}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots>*{min-width:0}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--ox)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.badgewall>*{min-width:0}
.badgewall figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px;color:var(--ox)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px minmax(0,1fr) 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden;min-width:0}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--ox))}
.stars{color:#c98a16;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;font-family:var(--display);font-size:1.06rem;color:var(--ox)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-family:var(--text);font-size:1.34rem;font-weight:400;color:var(--teal-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token. At 390 that pushed a single <a> past the viewport
   on eleven pages of another site — clipped, unscrollable, and invisible to
   every static check. `anywhere` rather than `break-word` because it also
   lowers the element's MIN-CONTENT, which is what stops the ancestor being
   sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:linear-gradient(140deg,var(--ox),var(--ox-2));color:#fff;font-family:var(--display);font-size:1.06rem;border-radius:50%}
.byline>div{min-width:0}
.byline b{display:block;margin-bottom:6px;color:var(--ox)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--teal);border-radius:0 0 var(--radius) var(--radius);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final__img img{width:210px}
.final__body{min-width:0}
.final h2{margin:0 0 10px}
.final__price{font-weight:700;color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel>*{min-width:0}
.rel a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--teal);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.08rem;font-weight:400;color:var(--ox);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms on focus (pitfall 86). */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:700;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--panel);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:0.9062rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--ox)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.062rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts>*{min-width:0}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.062rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: the brand name set as a rotated LEFT-HAND SPINE, with the
   destinations ranked beside it in a numbered index. The spine is the whole
   idea of this footer and it is the only one of its kind on the estate; below
   1100px it lies back down as an ordinary heading, because a 300px-tall
   rotated word on a phone is a column of wasted screen. */
.fcta{position:relative;background:linear-gradient(140deg,var(--ox) 0%,var(--ox-d) 100%);color:#fff;padding:52px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__txt{min-width:0}
.fcta__eye{display:inline-block;font-size:.78125rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-l);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.62rem;line-height:1.26;margin:0 0 10px}
.fcta p{color:#eed4d5}
.fcta__sm{font-size:.9375rem;color:#d7b4b6;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#a9e2e5}
.fcta__img img{width:280px}
footer{background:var(--panel)}
.fspine{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0;padding-block:46px 30px}
.fspine>*{min-width:0}
.fspine__rail{position:relative;border-right:1px solid var(--line)}
.fspine__name{
  position:sticky;top:calc(var(--navh,118px) + 20px);
  writing-mode:vertical-rl;transform:rotate(180deg);transform-origin:center;
  font-family:var(--display);font-size:2.05rem;color:var(--ox);
  letter-spacing:.01em;line-height:1;white-space:nowrap;
}
.fspine__name span{color:var(--teal-d)}
.fgrid{display:grid;grid-template-columns:1.45fr repeat(4,1fr);gap:26px;padding-left:28px;counter-reset:frank}
.fgrid>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.62rem;color:var(--ox);line-height:1.1}
.fbrand span{color:var(--teal-d)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 14px}
.fcard p{font-size:1.062rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--ox)}
/* "ranked beside it": each destination group is numbered, which is what makes
   the spine read as the edge of an index rather than as decoration. */
.fh{font-size:.8125rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fh::before{counter-increment:frank;content:counter(frank,decimal-leading-zero) " ";color:var(--teal-d)}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0}
.fgrid li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back
   (pitfall 82). */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--teal-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:20px;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3);min-width:0}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3);min-width:0}
.disc{background:var(--tint);border-top:1px solid var(--line);padding:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--ox)}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ox-d);color:#fff;transform:translateY(105%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;padding:12px 22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#e3c7c9}
.buybar .btn{margin-left:auto;flex:0 0 auto}

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

/* ---- responsive */
@media (max-width:1100px){
  .fspine{grid-template-columns:minmax(0,1fr)}
  .fspine__rail{border-right:0;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}
  .fspine__name{position:static;writing-mode:horizontal-tb;transform:none;font-size:1.7rem}
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:24px;padding-left:0}
}
@media (max-width:980px){
  :root{--navh:110px}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line-2)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line-2)}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:minmax(0,1fr)}
  .fcta__img{display:none}
  .final--media{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:46px 0}
  .hero{padding:34px 0 42px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:minmax(0,1fr)}
  .prices{grid-template-columns:minmax(0,1fr)}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:minmax(0,1fr)}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:minmax(0,1fr)}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it is pushed to the right of a line with no room for it and overhangs
     the card edge. On a phone let it sit at the start of its own line and wrap
     its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:minmax(0,1fr);gap:8px}
  .fgrid{grid-template-columns:1fr 1fr;gap:22px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:minmax(0,1fr)}
}

/* ---- hero: the bottle stands on its own ground ---------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted (hero.md).

   There is no card behind the product on this hero by design, so the shot
   needs its own ground: a teal rim glow behind it and an elliptical contact
   shadow beneath it, both sized to the product rather than to the column.
   hero_motifs.py owns the channel and the arc; these two are the bottle's. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:46%;translate:-50% -50%;
  width:80%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(27,139,145,.28),transparent 70%);
  z-index:0;pointer-events:none;
}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:30px;translate:-50% 0;
  width:54%;height:18px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(78,20,29,.38),transparent 74%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  /* The float goes on the CARD, never on the <img>. The image is the LCP
     element and is preloaded; animating it is what hero.md rules out. */
  .hero__card{animation:pfFloat 9s ease-in-out infinite}
  @keyframes pfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}

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

   --navh is measured and published by site.js: nav heights run 66-118px 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.

   Requires .hero NOT to clip on the block axis: any non-visible overflow on an
   ancestor becomes the scrollport sticky resolves against (pitfall 65). */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 118px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 118px) - 28px);
    min-height: calc(100svh - var(--navh, 118px) - 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 all 1125x1125
   here, but the blurbs are different lengths, so without these three rules 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,170px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

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

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

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

/*!SITE-HOME-PAINT-START*/
/* ---- home page surface (design pass) ---------------------------------
   The design slot for this site: a BLOOM hero motif, a CORNER FLAG on the
   pricing ribbon, 14px on cards, 8px on controls, and an architectural
   depth -- a hard 3px offset that reads like a printed edge, over one wide
   ambient stop. Both stops are tinted with this site's own ink, 36,26,28,
   never neutral black.

   SCOPE. class="hero" is on index.html and on no other page here, so
   body:has(.hero) is a home-only selector. It is also how this block beats
   modern_surface.py, which strips and re-appends its own .card and
   .card--pack rules on EVERY build and always lands after this one:
   (0,2,1) against its (0,1,0). On specificity, never on source order.

   PAINT ONLY. Radius, shadow, background, colour, transform and transition
   move no box, so this sits below the critical marker and needs
   restamp_assets.py rather than a rebuild. The geometry that goes with it
   is in the SITE-HOME-CRIT block above. */
:root{
  --pf-card:14px;   /* slot radius_card */
  --pf-ctl:8px;     /* slot radius_control */
  --pf-d1:0 3px 0 rgba(36,26,28,.07), 0 14px 24px -10px rgba(36,26,28,.20);
  --pf-d2:0 3px 0 rgba(36,26,28,.11), 0 22px 38px -12px rgba(36,26,28,.30);
  --pf-d3:0 2px 0 rgba(36,26,28,.07), 0 8px 16px -6px rgba(36,26,28,.16);
}

/* -- panels */
body:has(.hero) .card,
body:has(.hero) .step,
body:has(.hero) .callout,
body:has(.hero) .ingcard,
body:has(.hero) .figures div,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .tablewrap,
body:has(.hero) .faq,
body:has(.hero) .final,
body:has(.hero) .keypoints,
body:has(.hero) .toc,
body:has(.hero) .byline{border-radius:var(--pf-card);box-shadow:var(--pf-d1)}

/* The pack card's edge is a 2px TRANSPARENT border plus an inset hairline,
   so the hairline has to be carried into the new shadow or the three cards
   lose their edge entirely. */
body:has(.hero) .card--pack{border-radius:var(--pf-card);box-shadow:inset 0 0 0 1px var(--line),var(--pf-d1)}

/* The Quick Answer keeps its square teal spine: that 4px bar is the site's
   own mark at component scale, and a radius on that edge rounds it off.
   Only the outer corners take the slot radius. */
body:has(.hero) .answer{border-radius:0 var(--pf-card) var(--pf-card) 0;box-shadow:var(--pf-d1)}

/* -- controls: 8px, a hard contact edge, a 2px lift, a visible focus ring */
body:has(.hero) .btn{
  border-radius:var(--pf-ctl);box-shadow:var(--pf-d3);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
body:has(.hero) .btn:hover{transform:translateY(-2px);box-shadow:var(--pf-d2)}
body:has(.hero) .btn:active{transform:translateY(0);box-shadow:var(--pf-d3)}
body:has(.hero) .btn:focus-visible{outline:3px solid var(--teal-d);outline-offset:3px}
body:has(.hero) .factpills li{border-radius:var(--pf-ctl)}

/* The buying CTA is the only gradient on the page and it runs three stops
   deep, so it reads heavier than anything beside it. The lightest stop is
   the label teal itself and nothing lighter: the button carries white text
   at 17px, and a paler stop would drop that under contrast. */
body:has(.hero) .btn--teal{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-d) 52%,#123f44 100%)}
body:has(.hero) .btn--teal:hover{filter:brightness(1.08)}

/* The secondary is left SOLID beside it, so the pair reads as two weights
   rather than as two colours. */
body:has(.hero) .btn--ghost{background:var(--panel);color:var(--ox);box-shadow:inset 0 0 0 1px var(--line-2),var(--pf-d3)}
body:has(.hero) .btn--ghost:hover{background:var(--tint);color:var(--ox-d);transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line-2),var(--pf-d2)}

/* -- chrome: the same hard offset, so the bars belong to the same surface */
body:has(.hero) .nav{box-shadow:0 1px 0 var(--line),0 3px 0 rgba(36,26,28,.04),0 16px 26px -16px rgba(36,26,28,.26)}
body:has(.hero) .buybar{box-shadow:0 -3px 0 rgba(36,26,28,.10),0 -20px 34px -14px rgba(36,26,28,.34)}

/* -- pricing: a corner flag, and a recommended tier in its own colour.
   The dashed rule between the feature rows and the room it needs are in
   the geometry block above; only its colour could live here. */
body:has(.hero) .pack__flag{
  border-radius:0;letter-spacing:.07em;box-shadow:none;
  background:linear-gradient(135deg,var(--teal) 0%,var(--teal-d) 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 7px),0 100%);
}
body:has(.hero) .prices>.card--pack.featured{
  border-color:var(--teal);
  background:linear-gradient(180deg,#f1fafa 0%,var(--panel) 38%);
  box-shadow:var(--pf-d2);
}
body:has(.hero) .prices>.card--pack.featured .pack__flag{background:linear-gradient(135deg,var(--ox-2) 0%,var(--ox-d) 100%)}

/* -- hover: 2px on anything a reader can click */
body:has(.hero) .card,
body:has(.hero) .card--pack,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .posts article,
body:has(.hero) .rel a{transition:transform .22s ease,box-shadow .22s ease}
body:has(.hero) .card:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .badgewall figure:hover,
body:has(.hero) .posts article:hover,
body:has(.hero) .rel a:hover{transform:translateY(-2px);box-shadow:var(--pf-d2)}
body:has(.hero) .card--pack:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line),var(--pf-d2)}
body:has(.hero) .prices>.card--pack.featured:hover{transform:translateY(-2px);box-shadow:var(--pf-d2)}

/* -- hero motif: BLOOM -------------------------------------------------
   A radial bloom opens from behind the bottle and eases back. A soft disc
   and a ring of petals, both on the pseudo-elements of .hero__media and
   both sized LARGER than the 430x489 product card so they read OUTSIDE it
   instead of vanishing behind it. The product img is the LCP element and
   is preloaded, so nothing here touches it.

   21s and 26s, deliberately out of phase and deliberately slow: this is a
   capsule taken once a day for weeks, not an energy drink. Only transform
   and opacity animate, the blur is static, and the min() cap stops the
   percentage width from inflating the disc on a full-width phone column.
   pfBloom and pfPetal are new names -- pfEase, pfFloat and pfOpen are
   already taken in this sheet. */
body:has(.hero) .hero__media::before{
  content:"";position:absolute;left:50%;top:50%;width:min(150%,700px);
  aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(27,139,145,.32),rgba(27,139,145,.14) 44%,rgba(122,34,48,.07) 66%,transparent 80%);
  animation:pfBloom 21s cubic-bezier(.37,0,.24,1) infinite;
}
body:has(.hero) .hero__media::after{
  content:"";position:absolute;left:50%;top:50%;width:min(130%,620px);
  aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  z-index:0;pointer-events:none;
  background:
    repeating-conic-gradient(from 22.5deg,rgba(122,34,48,.17) 0 3deg,transparent 3deg 45deg),
    repeating-conic-gradient(from 0deg,rgba(27,139,145,.34) 0 4.5deg,transparent 4.5deg 45deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 52%,#000 61%,#000 88%,transparent 97%);
  mask-image:radial-gradient(closest-side,transparent 52%,#000 61%,#000 88%,transparent 97%);
  animation:pfPetal 26s cubic-bezier(.4,0,.24,1) infinite;
}
@keyframes pfBloom{0%{transform:scale(.80);opacity:.26}52%{transform:scale(1.06);opacity:.92}100%{transform:scale(.80);opacity:.26}}
@keyframes pfPetal{0%{transform:rotate(-7deg) scale(.84);opacity:.10}54%{transform:rotate(7deg) scale(1.05);opacity:.62}100%{transform:rotate(-7deg) scale(.84);opacity:.10}}

/* Everything above is switched off when the reader asks for less motion.
   The critical block already kills the two hero pseudo-elements with
   !important; this repeats it so the rule survives that block changing. */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{animation:none;opacity:0}
  body:has(.hero) .btn,
  body:has(.hero) .card,
  body:has(.hero) .card--pack,
  body:has(.hero) .shots figure,
  body:has(.hero) .badgewall figure,
  body:has(.hero) .posts article,
  body:has(.hero) .rel a{transition:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .card:hover,
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .prices>.card--pack.featured:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .badgewall figure:hover,
  body:has(.hero) .posts article:hover,
  body:has(.hero) .rel a:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer li a{font-size:16px}
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fh{font-size:15px}
footer .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */

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

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

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