/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Kanit Fallback";src:local("Arial");font-weight:400;size-adjust:102.69%;ascent-override:107.12%;descent-override:38.47%;line-gap-override:0.00%}
@font-face{font-family:"Kanit Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:98.74%;ascent-override:111.40%;descent-override:40.00%;line-gap-override:0.00%}
@font-face{font-family:"Noto Sans Fallback";src:local("Arial");font-weight:400;size-adjust:107.15%;ascent-override:99.77%;descent-override:27.35%;line-gap-override:0.00%}
@font-face{font-family:"Noto Sans Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:105.46%;ascent-override:101.37%;descent-override:27.78%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* prostaflowformula.com — ProstaFlow, U.S. stocking partner desk.
   Design slot 307 (batch8_assignments.py): Kanit / Noto Sans, a seafoam wash
   over white, a header whose destinations sit in one OUTLINED TRACK as separate
   segments, and a footer built as a closing offer slab, then the destinations,
   then a narrow legal band.

   The teal is the bottle's own: #17838d is sampled from the "FLOW" in the
   wordmark and the label's band fades that colour out to white, which is what
   the seafoam wash over a white page is echoing. No other desk on this estate
   runs a white page with a seafoam wash and a pill-segmented nav track.

   The component system — pill buttons, wide corner radii, an eyebrow drawn as
   a tinted badge rather than a rule, and a centred section lede — comes from
   the LOOKS FOR reference (kerafirmmpro.com). Its palette, its copy and its
   claims do not.

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

/* ---- tokens */
:root{
  --ink:#17272b;            /* body text */
  --ink-2:#46595e;          /* secondary */
  --ink-3:#71868b;          /* captions, meta */
  --teal:#17838d;           /* the label's FLOW ink */
  --teal-d:#0f5f68;         /* deep */
  --teal-2:#2aa0a8;         /* the lighter half of the label's fade */
  --teal-l:#5cc0c4;
  --seafoam:#e6f4f3;        /* the wash */
  --seafoam-2:#d3ebe9;
  --paper:#ffffff;          /* the page: white, the wash sits on top of it */
  --panel:#ffffff;
  --tint:#f1f8f7;
  --line:#dce9e8;
  --line-2:#bcd4d2;
  --good:#12795a;
  --warn:#8a5a10;
  --wrap:1220px;
  --measure:760px;
  --measure-wide:980px;
  --radius:14px;
  --radius-lg:22px;
  --shadow:0 2px 6px rgba(15,95,104,.05), 0 14px 38px rgba(15,95,104,.08);
  --shadow-lg:0 24px 64px rgba(15,95,104,.20);
  --navh:112px;
  --display:"Kanit","Kanit Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Noto Sans","Noto Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.78;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-d);text-underline-offset:3px}
a:hover{color:var(--teal)}
h1,h2,h3,h4{font-family:var(--display);color:var(--teal-d);font-weight:600;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.28rem + 2.3vw,3.15rem);letter-spacing:-.015em}
h2{font-size:clamp(1.5rem,1.16rem + 1.25vw,2.2rem);letter-spacing:-.01em}
h3{font-size:1.22rem;font-weight:600}
h4{font-size:1.04rem;font-weight:600}
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(--teal-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--teal-2);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it. Drawn as a tinted
   badge rather than a rule, which is the reference's own device. */
.eyebrow{
  display:inline-block;
  font-family:var(--display);font-size:0.8438rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);
  background:var(--seafoam);border-radius:999px;padding:6px 15px;
  margin:0 0 12px;
}

/* ---- buttons: full pills, taken from the reference's component system */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 34px;
  font-family:var(--display);font-size:1rem;font-weight:600;letter-spacing:.012em;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:var(--teal-d);color:#fff;
  transition:filter .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn:hover{filter:brightness(1.12);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--teal{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-d) 100%);
  box-shadow:0 8px 22px rgba(23,131,141,.30)}
.btn--lg{min-height:62px;padding:17px 42px;font-size:1.08rem}
.btn--ghost{background:none;color:var(--teal-d);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--seafoam);color:var(--teal-d);filter:none}
.btn--wide{width:100%}

/* ---- header: brand row, then every destination inside ONE outlined track */
.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:12px 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:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--teal-d)}
.brand__glyph{width:36px;height:36px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class. brand_marks.py rewrites the
   <svg> inside .brand and does not carry class="brand__glyph" onto the
   replacement, so a rule keyed only to the class stops applying the moment the
   tool runs and the glyph renders at its intrinsic size — a masthead two
   different heights on one site (pitfall 16). */
.brand>svg{width:36px;height:36px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-family:var(--display);font-size:1.4rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.bw b em{font-style:normal;color:var(--teal)}
.bw small{font-size:0.9062rem;font-weight:600;color:var(--ink-3)}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:16px;min-width:0}
.nav__price{text-align:right;line-height:1.24;min-width:0}
.nav__price b{display:block;font-family:var(--display);font-size:1.16rem;font-weight:600;color:var(--teal-d)}
.nav__price span{font-size:.78125rem;font-weight:600;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 24px;font-size:.95rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1.5px solid var(--line-2);
  border-radius:999px;cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--teal-d);margin:0 0 5px;border-radius:2px}
.burger span:last-child{margin:0}

/* the track: one outlined rail holding every destination as its own segment */
.nav__trackwrap{padding-block:0 10px;background:var(--panel)}
.nav__track{
  display:flex;border:1.5px solid var(--line-2);border-radius:999px;
  background:var(--tint);padding:3px;overflow-x:auto;
  scrollbar-width:none;
}
.nav__track::-webkit-scrollbar{display:none}
.menu{
  display:flex;list-style:none;margin:0;padding:0;align-items:stretch;
  min-height:38px;width:100%;
}
.menu>li{display:flex;min-width:0}
.menu>li+li{border-left:1px solid var(--line-2)}
.menu a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 17px;font-family:var(--display);
  font-size:.9375rem;font-weight:500;color:var(--ink-2);text-decoration:none;
  border-radius:999px;white-space:nowrap;
}
.menu a:hover{color:var(--teal-d);background:var(--seafoam)}
.menu a[aria-current="page"]{color:#fff;background:var(--teal-d)}
/* Two class selectors on purpose. `.menu>li{display:flex}` above carries a
   class AND an element, so a bare `.menu__more{display:none}` LOSES the
   cascade to it whatever the source order, and all fourteen destinations
   render in a track sized for five. It looked like a track that had simply
   been given too many items, which is why it is worth a comment: the fault was
   specificity, not width. */
.menu .menu__more{display:none}

/* ---- hero: copy LEFT, bottle RIGHT on the seafoam wash */
.hero{position:relative;background:var(--paper);padding:48px 0 58px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:46px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
/* The badge is inline-block, but .hero__copy is a column flex container and a
   flex item STRETCHES across the cross axis unless told not to, so the eyebrow
   rendered as a 600px pill with three words in it. justify-self covers the
   phone layout, where .hero__copy becomes display:contents and the eyebrow is
   a grid item of .hero__grid instead. */
.hero .eyebrow{align-self:flex-start;justify-self:start}
.hero h1{margin:0 0 18px;color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--teal)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:5px solid var(--teal-2);border-radius:var(--radius);
  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:700}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:0.9062rem;font-weight:600;color:var(--ink-2);background:var(--tint);
  border:1px solid var(--line);padding:7px 15px;border-radius:999px;min-width:0;
}
.factpills li b{color:var(--teal-d);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--seafoam);border:1px solid var(--line);padding:14px 16px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--teal-d);line-height:1.1}
.figures span{display:block;font-size:0.9062rem;font-weight:600;color:var(--ink-3);margin-top:3px}
.hero__media{position:relative;align-self:center}
.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(15,95,104,.28))}
.hero__cap{margin:14px 0 0;font-size:.8125rem;font-weight:600;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size: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:700}

/* ---- inner page head */
.phead{padding:34px 0 12px;background:var(--seafoam);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);color:var(--ink)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: the five facts a buyer wants before reading anything —
   role, lot, dose and count, guarantee, order phone — above the navigation, so
   the NAV does not have to carry them (hero.md). It sits ABOVE CRITICAL-END
   because it is the first thing painted; appended to the end of the stylesheet
   it would load async and flash unstyled at the very top of the page. */
.util{background:var(--teal-d);color:#bfe0e2;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:#3d8990;flex:0 0 auto;margin-right:11px}
.util b{color:#effafa;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 a third of the first screen on a
     phone (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}
}
@media (max-width:560px){
  /* The three survivors do not fit on one line at phone width, and a wrapped
     flex row puts the dot separator at the START of lines two and three, which
     reads as a bullet nobody asked for. Below this width the strip is a stack
     and the dots come out. */
  .util__row{flex-direction:column;align-items:flex-start;gap:2px}
  .util__item+.util__item::before{display:none}
}


/* ---- hero motif -- stream-settle ---------------------------------------- */
.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(180deg,#ffffff,#d9eeef 46%,#ffffff)}.hero__media::before{content:'';position:absolute;left:50%;top:-18%;width:26%;height:136%;translate:-50% 0;border-radius:999px;background:linear-gradient(180deg,transparent,rgba(42,160,168,0.52) 30%,rgba(42,160,168,0.34) 62%,transparent);filter:blur(17px);animation:pfStream 10s cubic-bezier(.16,.72,.3,1) infinite;z-index:1;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;bottom:6%;width:74%;height:15%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(42,160,168,0.46),transparent 78%);filter:blur(10px);animation:pfSettle 10s ease-out infinite;z-index:0;pointer-events:none}@keyframes pfStream{0%{transform:translateY(-28%);opacity:0}16%{opacity:.92}68%{transform:translateY(22%);opacity:.5}100%{transform:translateY(28%);opacity:0}}@keyframes pfSettle{0%,24%{transform:scaleX(.5);opacity:0}58%{transform:scaleX(1);opacity:.62}82%{transform:scaleX(1.06);opacity:.4}100%{transform:scaleX(1.14);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

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

/*!SITE-HOME-CRIT-START*/
/* ---- home page, design slot "orbit" -- GEOMETRY ONLY --------------------
   Everything in this block is inlined into all ~31 pages, so every rule is
   scoped to the home page: class="hero" exists on index.html and nowhere
   else, and `body:has(.hero)` is the same test for the components that are
   shared with the inner pages.  Paint for these components lives below
   CRITICAL-END under /*!SITE-HOME-PAINT-START*   (see the tail of this file). */

/* 1. the buy button belongs on the first screen.  Measured at 1440x900 the
   roadmap paragraph pushed .hero__cta down the column, so on DESKTOP the
   reading order becomes eyebrow, headline, quick answer, BUTTONS, payment
   line, then the evidence.  min-width:981px on purpose: below that
   .hero__copy is display:contents and the phone order is already composed by
   the max-width:980px block above -- that composition is left untouched. */
@media (min-width:981px){
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero .answer{order:3}
  .hero .hero__cta{order:4}
  .hero .hero__sub{order:5}
  .hero .hero__road{order:6}
  .hero .factpills{order:7}
  .hero .figures{order:8}
  /* 404 + 12 + 206 is 622 in a 599px column, so the pair wrapped and the
     secondary fell 17px past the fold. Trimming the inline padding of the two
     hero buttons only -- .btn--lg elsewhere is untouched -- brings them onto
     one line at y=775. */
  .hero .hero__cta .btn--lg{padding-inline:28px}
}

/* 2. the motif: a thin ring with one bright arc travelling it, slow.
   It replaces the stream-settle motif declared earlier in this same block --
   every property that one set is reset here, so there is no flash of the old
   decoration between the inline copy and the async sheet.  It lives on the
   pseudo-elements of the media COLUMN, never on the <img>, which is the LCP
   element and is preloaded.  Sized larger than the 430px bottle so the ring
   reads outside the product rather than behind it.  34s: this is a capsule
   taken once a day for weeks, not an energy drink. */
.hero .hero__media{--orb:min(560px,104%)}
.hero .hero__media::before,
.hero .hero__media::after{
  content:"";position:absolute;left:50%;top:50%;right:auto;bottom:auto;
  width:var(--orb);height:auto;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;
  filter:none;pointer-events:none;
}
.hero .hero__media::before{
  border:1.5px solid rgba(23,131,141,.30);
  background:radial-gradient(closest-side,rgba(230,244,243,.62),rgba(230,244,243,0) 74%);
  z-index:0;animation:pfOrbitHalo 26s ease-in-out infinite;
}
.hero .hero__media::after{
  border:0;
  background:conic-gradient(from 0deg,rgba(42,160,168,0) 0deg,rgba(42,160,168,0) 244deg,rgba(92,192,196,.22) 292deg,rgba(42,160,168,.85) 330deg,rgba(15,95,104,.95) 346deg,rgba(15,95,104,.18) 355deg,rgba(42,160,168,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,rgba(0,0,0,0) calc(100% - 3.5px),#000 calc(100% - 3.5px));
  mask:radial-gradient(farthest-side,rgba(0,0,0,0) calc(100% - 3.5px),#000 calc(100% - 3.5px));
  z-index:1;animation:pfOrbitArc 34s linear infinite;
}
@media (max-width:980px){.hero .hero__media{--orb:min(430px,112%)}}
@keyframes pfOrbitArc{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pfOrbitHalo{0%,100%{opacity:.55}50%{opacity:.95}}
/* The block above already kills these with !important at (0,1,1); this is the
   same switch at (0,2,1) so the ring survives as a still shape and only the
   travelling arc goes. */
@media (prefers-reduced-motion:reduce){
  .hero .hero__media::before,.hero .hero__media::after{animation:none!important}
  .hero .hero__media::before{opacity:.6!important}
  .hero .hero__media::after{opacity:0!important}
}

/* 3. pack cards: the ribbon becomes a tab standing ABOVE the card, and the
   recommended tier rides 38px higher than its two siblings.
   The raise is margin-top and NOT transform: the reveal pass sets
   transform:none on .in, and in a stretch grid a top margin shortens the card
   without moving its bottom edge -- so .pack__body{flex:1} and
   .btn{margin-top:auto} still put the three Add To Cart buttons on the one
   baseline they are engineered to share.  The separators add the same 8px to
   every card (all three lists are four rows), so that baseline holds. */
body:has(.hero) .prices{padding-top:38px}
body:has(.hero) .card--pack{margin-top:38px;overflow:visible}
body:has(.hero) .card--pack.featured{margin-top:0}
body:has(.hero) .card--pack .pack__flag{
  top:auto;bottom:100%;right:20px;left:auto;
  padding:6px 16px 8px;border-radius:14px 14px 0 0;
}
body:has(.hero) .pack__perks li{
  padding-bottom:7px;margin-bottom:7px;border-bottom:1px dashed var(--line-2);
}
body:has(.hero) .pack__perks li:last-child{
  border-bottom:0;margin-bottom:0;padding-bottom:0;
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:66px 0;position:relative}
/* The header is sticky and 134px tall, so an in-page anchor lands with its
   heading UNDER the bar unless the target reserves the space. --navh is the
   measured value site.js publishes, not a guess. */
section[id]{scroll-margin-top:calc(var(--navh,104px) + 14px)}
.sec--tint{background:var(--seafoam)}
.sec--panel{background:var(--tint)}
.sec--dark{background:var(--teal-d);color:#d6ecee}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c6e2e4}
.sec--dark .eyebrow{color:#effafa;background:rgba(255,255,255,.14)}
.sec--dark a{color:#9fe0e4}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 28px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#c6e2e4}

/* 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:29px;margin:0 0 .5em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.sec--dark .ticks li::before{color:#6ad6b2}

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

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

/* ---- cards */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. Any
   card holding a table or a nowrap chip then refuses to shrink below that
   floor and its right-hand half is clipped away by body{overflow-x:clip} with
   nothing to scroll and nothing to report. */
.grid>*{min-width:0}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px 24px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#12666e;border-color:#1f7f88;box-shadow:none}
.sec--tint .card{box-shadow:none}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--seafoam);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:22px 24px;margin:0 0 1.2em}
/* `>` matters. `:first-child` counts ELEMENT children only, so a bare
   `.callout b:first-child` also matches a <b> that opens a paragraph after a
   run of text -- and display:block then throws that word onto a line of its
   own mid-sentence. It rendered "a hypromellose" as three lines. The title is
   a direct child of the box, so say so. */
.callout>b:first-child{display:block;margin-bottom:6px;color:var(--teal-d)}
.callout p:last-child{margin:0}
.alert{background:#fdf6ea;border:1px solid #efdcbc;border-left:5px solid var(--warn);border-radius:var(--radius);padding:22px 24px;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;font-weight:500;line-height:1.5;color:var(--teal-d);border-left:5px solid var(--teal-2);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:5px solid var(--teal-2);border-radius:var(--radius);padding:22px 24px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px;color:var(--teal-d)}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* Same family as the .grid rule above, and this is where it was first
   measured: a .tablewrap holding a 520px-min table keeps its column 520px
   wide however narrow the grid is, because `1fr` is minmax(auto,1fr) and auto
   floors at min-content. min-width:0 belongs on the items at EVERY width
   rather than only inside a media query. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius-lg);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;font-weight:600;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#a9d2d5;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.1fr 1fr 1.25fr;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:600;background:#f5fbfa}
.versus__h{background:var(--teal-d)!important;color:#fff;font-family:var(--display);font-weight:600;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* .inglist is a grid and .ingcard is a grid ITEM, so the card cannot shrink
   below its min-content. `.ing__dose` is white-space:nowrap and one of these
   chips renders well over 200px, which sets that floor and pushes the card
   past a 390px viewport. 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-lg);padding:24px 26px;box-shadow:var(--shadow)}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top>*{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:700;color:#fff;background:var(--teal);padding:4px 14px;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),var(--shadow);border-radius:var(--radius-lg);overflow:hidden;position:relative;padding:0}
/* No lift on the featured card. A negative margin-top raises its box, which
   makes it taller than its siblings and trips responsive.md's rule that a
   pricing row shares one height and one button baseline. The card is already
   unmistakable from its accent border, its deeper shadow, its coloured head
   band and its flag. */
.card--pack.featured{border-color:var(--teal-2);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--seafoam);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:linear-gradient(135deg,var(--teal),var(--teal-d));border-bottom-color:var(--teal-d)}
.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:600;color:var(--teal-d);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-2);color:#fff;font-family:var(--display);font-size:0.8438rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:5px 14px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 24px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,172px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.4rem;font-weight:600;color:var(--teal-d);line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1rem;font-weight:600;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;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem;flex-wrap:wrap}
.pack__tot b{font-weight:700;color:var(--ink)}
.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:25px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0;max-width:var(--measure-wide);margin-inline:auto}

/* ---- 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-lg);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 20px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--teal-d)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
/* A single scene image in a two-column .shots grid sits in the left half and
   leaves the right half empty, which reads as a missing second figure rather
   than as a deliberate one. Span the row and cap the width instead. */
.shots>figure:only-child{grid-column:1/-1;max-width:720px;margin-inline:auto}
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-lg);padding:20px 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(--teal-d)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em;max-width:var(--measure-wide);margin-inline:auto}
.meter__row{display:grid;grid-template-columns:76px 1fr 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__row>*{min-width:0}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal-l),var(--teal-d))}
.stars{color:#e0a924;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-lg);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 50px 17px 22px;cursor:pointer;position:relative;list-style:none;font-family:var(--display);font-weight:500;font-size:1.06rem;color:var(--teal-d)}
.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-2)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 22px 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 that would otherwise push a single <a> past a
   390px viewport — 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:5px solid var(--teal-2);border-radius:var(--radius);padding:24px 26px;margin:0 0 1.2em}
.byline>*{min-width:0}
.byline__mark{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;font-family:var(--display);font-weight:600;font-size:1.06rem;border-radius:50%}
.byline b{display:block;margin-bottom:6px;color:var(--teal-d)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

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

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

/* ---- the AI factsheet block */
.qa{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px;margin:0 0 1.2em}
.qa>p:first-child{margin-top:0}
.qa .tablewrap{margin-bottom:0}

/* ---- 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(--seafoam);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:22px 26px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--teal-d)}
.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-lg);padding:24px 26px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.062rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: a closing offer SLAB, then the destinations, then a narrow
   legal band. Three bands, each doing one job, and the slab is flat rather
   than clipped so it reads as a shelf under the page. */
.fcta{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-d) 100%);color:#fff;padding:54px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center}
.fcta__box>*{min-width:0}
.fcta__eye{display:inline-block;font-family:var(--display);font-size:.78125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#effafa;background:rgba(255,255,255,.16);border-radius:999px;padding:6px 15px;margin-bottom:10px}
.fcta__h{font-family:var(--display);font-size:1.7rem;font-weight:600;line-height:1.24;margin:0 0 10px}
.fcta p{color:#cfe8ea}
.fcta .btn{background:#fff;color:var(--teal-d);box-shadow:0 8px 22px rgba(0,0,0,.18)}
.fcta .btn:hover{color:var(--teal-d)}
.fcta__sm{font-size:.9375rem;color:#a9d2d5;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#effafa}
.fcta__img img{width:280px}
footer{background:var(--panel)}
.fgrid{display:grid;grid-template-columns:1.45fr repeat(4,1fr);gap:26px;padding-block:46px 30px}
.fgrid>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.7rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1}
.fbrand span{color:var(--teal)}
.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(--teal-d)}
.fh{font-family:var(--display);font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.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:46px;height:46px;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}
/* the narrow legal band: smaller type, three columns, one thin rule */
.disc{background:var(--tint);border-top:1px solid var(--line-2);padding-block:22px 26px}
.disc p,.disc li{font-size:0.9062rem;color:var(--ink-2)}
.disc b{color:var(--teal-d)}
.disc__list{columns:3;column-gap:32px;list-style:none;margin:12px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 8px;padding-left:15px;position:relative;line-height:1.6}
.disc__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;border-radius:2px;background:var(--teal-2)}
.copy{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.875rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--teal-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__in>*{min-width:0}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#a9d2d5}
.buybar .btn{margin-left:auto;flex:0 0 auto;background:#fff;color:var(--teal-d)}
.buybar .btn:hover{color:var(--teal-d)}

/* ---- 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){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:24px}
  .disc__list{columns:2}
}
@media (max-width:980px){
  :root{--navh:104px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .nav__trackwrap{padding-block:0 8px}
  /* The track becomes a plain stack rather than a rail. No `:has()` here on
     purpose: the closed menu must collapse in every browser, and a selector
     that fails to parse would leave the whole track hidden. */
  .nav__track{border:0;background:none;padding:0;overflow:visible;display:block}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:0;width:100%;
    border:1.5px solid var(--line-2);border-radius:var(--radius);background:var(--tint)}
  .menu.open{display:flex}
  .menu>li+li{border-left:0;border-top:1px solid var(--line-2)}
  .menu a{justify-content:flex-start;padding:12px 12px;border-radius:var(--radius)}
  .menu .menu__more{display:flex}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:48px 0}
  .hero{padding:32px 0 42px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it is pushed to the right of a line with no room for it and overhangs
     the card edge. On a phone let it 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: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:1fr}
  .badgewall{grid-template-columns:1fr}
}

/* ---- hero: the bottle stands on the wash ---------------------------------
   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 opaque card on this hero by design, so the bottle carries its
   own ground: a soft teal bloom behind it and an elliptical shadow beneath.
   The stream itself belongs to hero_motifs.py. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:48%;translate:-50% -50%;
  width:84%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(42,160,168,.26),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(15,95,104,.34),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: this header is two rows and its
   height changes between breakpoints, so a hardcoded offset tucks the product
   under the bar at one width and leaves a gap at another.

   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,104px) + 14px);
    align-self:start;
    min-height:calc(100vh - var(--navh,104px) - 28px);
    min-height:calc(100svh - var(--navh,104px) - 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 pack shots are all 1125x1125 here
   but the blurbs are different lengths, so without these 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,172px);
  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, design slot "orbit" -- PAINT ONLY -----------------------
   border-radius, box-shadow, background, colour, transform, transition.
   Nothing here moves a box, so a restamp is enough for this block; the
   geometry that goes with it is above CRITICAL-END and needs the rebuild.

   Depth language for this slot is a single DEEP, very diffuse ambient stop --
   0 22px 60px -- tinted rgba(15,95,104), the deep half of the label's own
   teal, never neutral black.  The hairline that makes the edge read is the
   card's existing 1px border (or, on .card--pack, its existing inset
   hairline); it is not a second shadow stop.

   The tokens are set on BODY rather than on :root on purpose.  modern_surface.py
   re-appends its own `:root{--radius;--shadow;--lift}` after this file on every
   build; body is closer to the cards in the tree than :root is, so these win by
   proximity and not by source order -- and being on body they are home-only. */
body:has(.hero){
  --radius:20px;          /* slot radius_card */
  --radius-lg:20px;
  --shadow:0 22px 60px rgba(15,95,104,.13);
  --shadow-lg:0 26px 72px rgba(15,95,104,.22);
  --lift:0 30px 78px rgba(15,95,104,.24);
}

/* panels.  The token carries most of these through modern_surface's own
   `.card,.step,...{box-shadow:var(--shadow)}` list; .card is named here so the
   20px corner is drawn and not merely declared. */
body:has(.hero) .card{border-radius:20px}
/* `.sec--tint .card{box-shadow:none}` is (0,2,0) and would lose to the token
   rule; restated at (0,3,1) so tinted and dark bands stay flat as designed. */
body:has(.hero) .sec--tint .card{box-shadow:none}
body:has(.hero) .sec--dark .card{box-shadow:none}

/* pack cards */
body:has(.hero) .card--pack{
  border-radius:20px;
  box-shadow:0 22px 60px rgba(15,95,104,.12),inset 0 0 0 1px var(--line);
  transition:box-shadow .3s ease,transform .3s cubic-bezier(.2,.7,.3,1);
}
body:has(.hero) .card--pack.featured{
  border-color:var(--teal-2);
  background:linear-gradient(180deg,#f1fbfa 0%,#ffffff 44%);
  box-shadow:0 30px 78px rgba(15,95,104,.26);
}
/* (0,3,1): beats modern_surface's `.card--pack:hover` (0,2,0) whatever order
   it lands in, and beats `[data-reveal].in{transform:none}` (0,2,0) too. */
body:has(.hero) .card--pack:hover{
  transform:translateY(-3px);
  box-shadow:0 30px 78px rgba(15,95,104,.20),inset 0 0 0 1px var(--line-2);
}
body:has(.hero) .card--pack.featured:hover{
  transform:translateY(-3px);
  box-shadow:0 36px 90px rgba(15,95,104,.30);
}
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .card--pack.featured:hover{transform:none}
}
/* the card head is clipped by the card no longer (overflow is visible so the
   ribbon tab can stand outside it), so it carries its own top corners. */
body:has(.hero) .pack__head{border-radius:18px 18px 0 0}
body:has(.hero) .card--pack.featured .pack__head{
  background:linear-gradient(135deg,var(--teal-2) 0%,var(--teal-d) 100%);
}
/* two weights: the recommended tab is the loud one, the other is quiet. */
body:has(.hero) .pack__flag{
  background:var(--seafoam-2);color:var(--teal-d);
  box-shadow:0 -14px 30px rgba(15,95,104,.14);
}
body:has(.hero) .card--pack.featured .pack__flag{
  background:linear-gradient(135deg,var(--teal-2) 0%,var(--teal-d) 100%);color:#fff;
  box-shadow:0 -14px 30px rgba(15,95,104,.26);
}

/* controls.  The buying CTA carries the gradient; the secondary button is left
   a flat solid so the pair reads as two weights.  The 999px pill is this
   site's own component language -- the nav track, the eyebrow badge and the
   fact pills are all full pills -- so the slot's 14px radius_control is spent
   on the ribbon tab above rather than on flattening it. */
body:has(.hero) .btn{
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,filter .22s ease;
}
body:has(.hero) .btn--teal{
  background:linear-gradient(135deg,var(--teal-2) 0%,var(--teal) 46%,var(--teal-d) 100%);
  box-shadow:0 14px 34px rgba(15,95,104,.30);
}
body:has(.hero) .btn--ghost{
  background:var(--tint);color:var(--teal-d);
  box-shadow:inset 0 0 0 1.5px var(--line-2);
}
body:has(.hero) .btn--ghost:hover{background:var(--seafoam);filter:none}
body:has(.hero) .btn:hover{transform:translateY(-2px)}
body:has(.hero) .btn--teal:hover{box-shadow:0 20px 46px rgba(15,95,104,.36)}
body:has(.hero) .btn:active{transform:translateY(0)}
body:has(.hero) .btn:focus-visible{outline:3px solid var(--teal-2);outline-offset:3px}
body:has(.hero) .buybar .btn{
  background:#fff;color:var(--teal-d);box-shadow:0 12px 28px rgba(15,95,104,.28);
}
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .btn{transition:none}
  body:has(.hero) .btn:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer li a{font-size:16px}
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .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 23 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 (23,39,43), 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(23,39,43,.06), 0 6px 18px rgba(23,39,43,.07);
  --lift:0 2px 6px rgba(23,39,43,.09), 0 16px 34px rgba(23,39,43,.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. */
.split__img{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}