/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Wix Madefor Display Fallback";src:local("Arial");font-weight:400;size-adjust:105.10%;ascent-override:95.91%;descent-override:23.98%;line-gap-override:0.00%}
@font-face{font-family:"Wix Madefor Display Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:101.23%;ascent-override:99.58%;descent-override:24.89%;line-gap-override:0.00%}
@font-face{font-family:"Wix Madefor Text Fallback";src:local("Arial");font-weight:400;size-adjust:105.36%;ascent-override:95.67%;descent-override:23.92%;line-gap-override:0.00%}
@font-face{font-family:"Wix Madefor Text Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:100.43%;ascent-override:100.37%;descent-override:25.09%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* getprostacyl.com — Prostacyl, U.S. authorized retailer desk.
   Design slot 32 (batch6_assignments.py): Wix Madefor Display / Wix Madefor
   Text, steel-white ground with a navy DIAGONAL wedge, a brand row carrying the
   pack-ladder price with the menu on a recessed strip beneath, a three-band
   footer, and the channel-glide hero motif.

   The diagonal is the whole idea and it is taken from the product's own label,
   which splits white-to-navy across a slant. It is the only diagonal ground on
   this estate, which is what keeps this site off the four other blue-green
   desks.

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

/* ---- tokens */
:root{
  --ink:#10192a;            /* body text */
  --ink-2:#465266;          /* secondary */
  --ink-3:#6e7a8e;          /* captions, meta */
  --navy:#16355c;           /* the label's band */
  --navy-d:#0d2340;         /* deep */
  --navy-2:#1d4374;
  --cyan:#2aa3e0;           /* the label's arrow and tick marks */
  --cyan-d:#1580b8;
  --wash:#e8f2fa;           /* cyan wash */
  --paper:#f2f5f8;          /* the page: steel-white */
  --panel:#ffffff;
  --tint:#e6ecf3;
  --line:#d8e0ea;
  --line-2:#bfcbdb;
  --good:#127a4e;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:8px;
  --radius-lg:16px;
  --shadow:0 1px 2px rgba(16,25,42,.05), 0 10px 30px rgba(16,25,42,.07);
  --shadow-lg:0 22px 60px rgba(13,35,64,.18);
  --navh:104px;
  --display:"Wix Madefor Display","Wix Madefor Display Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Wix Madefor Text","Wix Madefor Text 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.74;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px}
a:hover{color:var(--cyan-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--navy);font-weight:800;line-height:1.16;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.3rem + 2.2vw,3.1rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,1.18rem + 1.2vw,2.2rem);letter-spacing:-.014em}
h3{font-size:1.2rem;font-weight:700}
h4{font-size:1.03rem;font-weight:700}
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(--navy);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:0.8438rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--cyan-d);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:18px;height:3px;background:var(--cyan);
  transform:skewX(-24deg);   /* the diagonal, echoed at the smallest scale */
}

/* ---- buttons: a slanted right edge, matching the label's diagonal */
.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:800;letter-spacing:.01em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:linear-gradient(100deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.12);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--cyan{background:linear-gradient(100deg,var(--cyan-d) 0%,var(--cyan) 100%)}
.btn--lg{min-height:62px;padding:17px 40px;font-size:1.08rem}
.btn--ghost{background:none;color:var(--navy);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--navy-d)}
.btn--wide{width:100%}

/* ---- header: brand row with the price rail, menu on a recessed strip under it */
.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:13px 0` would set padding-inline to 0 and wipe the page gutter.
   Invisible above the container max-width, and no overflow test can see it
   (pitfall 46). */
.nav__top{display:flex;align-items:center;gap:20px;padding-block:13px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}
.brand__glyph{width:34px;height:34px;flex:0 0 auto}
/* Size the mark by ELEMENT, not only by class. brand_marks.py rewrites the
   <svg> inside .brand and does NOT carry class="brand__glyph" onto the
   replacement, so a rule keyed to that class stops applying the moment the
   tool runs and the glyph renders at its intrinsic size. Measured on
   getprostacyl: the brand row went 74px on blog pages (original markup,
   class intact) to 120px on every root page (rewritten, class gone) -- a
   masthead two different heights on one site, which is pitfall 16.
   Five sites on the estate are in that state. Keying the element as well
   makes this immune to whatever the tool emits. */
.brand>svg{width:34px;height:34px;flex:0 0 auto}

.bw{display:flex;flex-direction:column;line-height:1.08}
.bw b{font-family:var(--display);font-size:1.38rem;font-weight:800;letter-spacing:-.02em}
.bw b em{font-style:normal;color:var(--cyan)}
.bw small{font-size:0.9062rem;font-weight:600;color:var(--ink-3)}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav__price{text-align:right;line-height:1.2}
.nav__price b{display:block;font-family:var(--display);font-size:1.18rem;font-weight:800;color:var(--navy)}
.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(--navy);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the recessed strip */
.nav__strip{background:var(--tint);border-top:1px solid var(--line)}
.menu{
  display:flex;flex-wrap:wrap;gap:0 28px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:44px;
}
.menu a{
  display:inline-block;padding:11px 0;font-family:var(--display);
  font-size:.9375rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--navy)}
.menu a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--cyan)}
.menu__more{display:none}

/* ---- hero: copy LEFT, bottle RIGHT over a navy diagonal wedge */
.hero{position:relative;background:var(--paper);padding:56px 0 60px;overflow-x:clip}
.hero::before{
  content:"";position:absolute;inset:0 0 0 auto;width:46%;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-d) 100%);
  clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);
  z-index:0;
}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);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(--cyan-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--cyan);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:0 0 18px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.062rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:0.9688rem;font-weight:600;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight: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;
}
.factpills li b{color:var(--navy);font-weight:800}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);padding:13px 15px;border-radius:var(--radius)}
.figures b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:800;color:var(--navy);line-height:1.1}
.figures span{display:block;font-size:0.9062rem;font-weight:600;color:var(--ink-3);margin-top:3px}
/* the product sits on the wedge, no card behind it */
.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:440px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.4))}
.hero__cap{margin:16px 0 0;font-size:.8125rem;font-weight:600;color:#a8c4dd;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}
.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(--cyan-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 -- getexitide shipped without one, pushed the lot into
   the menu as a chip, crowded the navigation and still left the other four
   facts off the page (hero.md). 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(--navy-d);color:#a8bdd6;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}
.util__item+.util__item::before{content:"";width:3px;height:3px;border-radius:50%;
  background:#3d6597;flex:0 0 auto;margin-right:11px}
.util b{color:#e4edf7;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines and eat 103px of an 844px screen (hero.md).
     Keep role, guarantee and phone; the lot and the dose are on the pages that
     need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}


/* ---- hero motif -- channel-glide ---------------------------------------- */
.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(166deg,#f2f5f8,#cee6f4 54%,#f2f5f8)}.hero__media::before{content:'';position:absolute;left:50%;top:-20%;width:48%;height:140%;translate:-50% 0;border-radius:999px;background:linear-gradient(180deg,transparent,rgba(42,163,224,0.50) 36%,rgba(42,163,224,0.38) 64%,transparent);filter:blur(20px);animation:pcGlide 9.5s ease-in-out infinite;z-index:1;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid rgba(42,163,224,0.45);animation:pcRing 7.5s ease-out infinite;z-index:0;pointer-events:none}@keyframes pcGlide{0%,100%{transform:translateY(-15%);opacity:.32}50%{transform:translateY(13%);opacity:.85}}@keyframes pcRing{0%{scale:.8;opacity:.7}100%{scale:1.2;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::before{width:100%;clip-path:polygon(0 42%,100% 34%,100% 100%,0 100%)}
  .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:36px 0 44px}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}
/* --- end of the copied hero responsive rules --- */

/*!SITE-HOME-CRIT-START*/
/* ---- home hero: desktop reading order + the circulate motif --------------
   GEOMETRY, which is why it sits above the marker: the block above the
   marker is inlined into every page at build time, so this needs a rebuild
   and not merely a restamp.

   Measured at 1440x900 before this block: the Buy button sat at y=938, 38px
   under the fold, because the roadmap paragraph ran between the quick answer
   and the buttons. Desktop only. Below 981px .hero__copy is display:contents
   and the phone order is composed separately -- that order is left alone.

   The headline is set one step tighter here as well. At 49.6px in a 567px
   column this H1 runs five lines and 288px on its own, which left the button
   under the fold on a 768-tall laptop even after the reorder: 41.6px and a
   1.14 leading bring it to 233px and the button clears 768, 800 and 900.
   Desktop only -- the phone keeps the size it already had. */
@media (min-width:981px){
  .hero{padding-top:34px}
  .hero .eyebrow{order:1}
  .hero h1{order:2;margin-bottom:12px;
    font-size:clamp(1.9rem,1.15rem + 1.9vw,2.6rem);line-height:1.14}
  .hero .answer{order:3;margin-bottom:16px}
  .hero .hero__cta{order:4;margin-bottom:14px}
  .hero .hero__sub{order:5;margin-bottom:16px}
  .hero .hero__road{order:6;margin-bottom:18px}
  .hero .factpills{order:7}
  .hero .figures{order:8}
}
/* The motif, slot family "circulate": two counter-rotating arcs, the inner
   one tighter, suggesting flow. On the media column's pseudo-elements, never
   on the <img> -- that is the LCP element and is preloaded. Both arcs are
   sized WIDER than the 460px product card so they read outside it, both are
   transform-only, and both are slow: 46s and 34s for a capsule taken daily
   for weeks. Overrides the channel-glide pair declared above by specificity,
   so every property that one set is reset here by hand -- height and filter
   included, because an explicit height beats aspect-ratio. */
.hero .hero__media::before{
  content:"";position:absolute;left:50%;top:50%;width:124%;height:auto;
  aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:none;filter:none;
  border:2px solid transparent;
  border-top-color:rgba(42,163,224,.62);
  border-right-color:rgba(42,163,224,.26);
  animation:pcOrbitA 46s linear infinite;
  z-index:0;pointer-events:none;
}
.hero .hero__media::after{
  content:"";position:absolute;left:50%;top:50%;width:94%;height:auto;
  aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:none;
  border:3px dashed rgba(232,242,250,.34);
  border-top-color:transparent;border-right-color:transparent;
  animation:pcOrbitB 34s linear infinite;
  z-index:1;pointer-events:none;
}
@keyframes pcOrbitA{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pcOrbitB{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
/* Reduced motion stops both arcs. They stay visible and still, rather than
   being hidden: the reader asked for less movement, not for less page. */
@media (prefers-reduced-motion:reduce){
  .hero .hero__media::before,
  .hero .hero__media::after{animation:none!important;opacity:.55!important}
}
/*!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(--navy-d);color:#dce6f2}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c3d2e4}
.sec--dark .eyebrow{color:#7fc4ee}
.sec--dark a{color:#9ed3f5}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* the diagonal, repeated as a section edge */
.sec--wedge{background:var(--panel);clip-path:polygon(0 0,100% 3vw,100% 100%,0 100%);margin-top:-1px;padding-top:calc(62px + 3vw)}
.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:#c3d2e4}

/* 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:#6fd3a4}

/* ---- 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:800;color:#fff;background:var(--navy);font-size:.9375rem}
tbody tr:nth-child(even){background:#fafcfe}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--navy)}
.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);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(--cyan),var(--cyan-d));color:#fff;
  font-family:var(--display);font-weight:800;font-size:1.02rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: a slanted accent tab on the top-left corner */
.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))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px 22px;overflow:hidden}
.card::before{
  content:"";position:absolute;left:0;top:0;width:58px;height:5px;
  background:var(--cyan);transform:skewX(-34deg);transform-origin:left top;
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#122d4e;border-color:#25497a}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #c3dff2;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--navy)}
.callout p:last-child{margin:0}
.alert{background:#fdf6ea;border:1px solid #efdcbc;border-left:4px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.3rem;font-weight:600;line-height:1.5;color:var(--navy);border-left:4px solid var(--cyan);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(--cyan);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 that
   floor that the desktop minmax(0,1fr) avoids. Measured at 390: the grid box
   was 350px and its single column resolved to 522px, so the right-hand half of
   the block 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 rather than only in 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 div b{display:block;font-family:var(--display);font-size:2.2rem;font-weight:800;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#a8bdd6;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.1fr 1fr 1fr;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}
.versus>div:nth-child(3n+1){font-weight:700;background:#f8fbfd}
.versus__h{background:var(--navy)!important;color:#fff;font-family:var(--display);font-weight:800;font-size:.92rem}

/* ---- 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 one
   of these labels renders 221px wide, which set the floor: measured at 390
   the grid box was 346px and its column resolved to 423px. min-width:0 lets
   the card shrink; .ingcard__top already wraps, so the chip drops onto its
   own line and fits. */
.inglist>*{min-width:0}

.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:800;color:#fff;background:var(--navy);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}
.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. (A transform would move it without changing the box, but the reveal
   animation overwrites transform -- that is why the lift was a margin.) */
.card--pack.featured{border-color:var(--cyan);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}
.card--pack.featured .pack__head{background:linear-gradient(100deg,var(--navy),var(--navy-2));border-bottom-color:var(--navy)}
.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:800}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--cyan);color:#fff;font-family:var(--display);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}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.35rem;font-weight:800;color:var(--navy);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;font-weight:700;top:-.7em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;color:var(--ink-3);margin:4px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight: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 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(--navy)}
.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 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(--navy)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px 1fr 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--navy))}
.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);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;font-family:var(--display);font-weight:700;font-size:1.06rem;color:var(--navy)}
.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(--cyan-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> to x=398
   against a 390 viewport on eleven pages -- 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(--cyan);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(--navy),var(--navy-2));color:#fff;font-family:var(--display);font-weight:800;font-size:1.06rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--navy)}
.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(--cyan);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 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 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(--cyan);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.08rem;color:var(--navy);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(--navy)}
.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 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: navy CTA wedge, white link grid, steel legal rail */
.fcta{position:relative;background:linear-gradient(140deg,var(--navy) 0%,var(--navy-d) 100%);color:#fff;padding:calc(48px + 3vw) 0 52px;clip-path:polygon(0 3vw,100% 0,100% 100%,0 100%)}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__eye{display:inline-block;font-family:var(--display);font-size:.78125rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.66rem;font-weight:800;line-height:1.22;margin:0 0 10px}
.fcta p{color:#c3d2e4}
.fcta__sm{font-size:.9375rem;color:#9fb2c9;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#9ed3f5}
.fcta__img img{width:290px}
footer{background:var(--panel)}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:26px;padding:44px 0 32px}
.fbrand{font-family:var(--display);font-size:1.7rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1}
.fbrand span{color:var(--cyan)}
.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(--navy)}
.fh{font-family:var(--display);font-size:.8125rem;font-weight:800;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(--cyan-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.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(--navy)}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:2px;background:var(--cyan);transform:skewX(-24deg)}
.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(--navy-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:#a8bdd6}
.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){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:24px}
}
@media (max-width:980px){
  :root{--navh:96px}
  .hero::before{width:100%;clip-path:polygon(0 42%,100% 34%,100% 100%,0 100%)}
  .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}
  .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);border-bottom-width:1px}
  .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:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:46px 0}
  .sec--wedge{clip-path:none;padding-top:46px}
  .hero{padding:36px 0 44px}
  .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 gets pushed to the right of a line that has 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 product breathes on the wedge -------------------------------
   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 on this hero by design, so the bottle needs its own ground:
   an elliptical shadow beneath it and a cyan rim glow behind it, both sized to
   the product rather than to the column. hero_motifs.py owns the channel and
   the ring around it. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:46%;translate:-50% -50%;
  width:82%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(42,163,224,.30),transparent 70%);
  z-index:0;pointer-events:none;
}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:34px;translate:-50% 0;
  width:52%;height:18px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.42),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:pcFloat 8s ease-in-out infinite}
  @keyframes pcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
}


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

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

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

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

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

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

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

/* --- text over the navy wedge -------------------------------------------
   `.hero::before` is a navy panel. At desktop it is `inset:0 0 0 auto;
   width:46%` -- a right-hand column behind the product, with the copy safely
   on the light ground beside it. Below 980px it becomes full width with
   `clip-path:polygon(0 42%,100% 34%,100% 100%,0 100%)`, so the SAME copy that
   was on light is now on navy, and none of its colours changed with it.

   Measured at 412x924 before this block:
       .btn--ghost  "See the pricing"        1.00:1   navy on navy
       .hero__road  "This page covers ..."   1.57:1
       the three trust ticks                 1.57:1
       .hero__cap   "Lot PRO-26/GE-3008"     1.40:1   (light text, now on light)
   AA wants 4.5:1. Desktop measured clean and is deliberately left alone.

   Colours are this site's own tokens, checked against BOTH gradient stops
   (#16355c and #0d2340): --wash 10.90, --line-2 7.53, --ink-2 on light 6.11. */
@media (max-width:980px){
  .hero__road{color:var(--wash)}
  /* the three trust lines are spans in .hero__sub, not a .ticks list --
     guessing the class left them at 1.57:1 through a "fixed" run */
  .hero__sub,
  .hero__sub span{color:var(--wash)}
  .hero .ticks li,
  .hero .ticks li span{color:var(--wash)}
  .hero .btn--ghost{color:var(--wash);border-color:var(--line-2)}
  .hero .btn--ghost:hover{color:#fff;border-color:var(--wash)}
  /* the bottle and its caption sit ABOVE the wedge here, on the light
     ground, so this one goes the other way */
  .hero__cap{color:var(--ink-2)}
}
/* The eyebrow failed on the light ground at BOTH widths -- 3.38:1 as
   --cyan-d. --navy-2 keeps it blue and reaches 7.71:1. */
.hero .eyebrow{color:var(--navy-2)}

/* --- the primary CTA needs 4.5:1 with its own label ----------------------
   `.btn--cyan` ran white 15-17px/800 text on a cyan gradient. Bold at 17px
   is still "normal" text for WCAG (large starts at 18.66px bold), so it
   needs 4.5:1 and the light stop gave 2.83:1 -- on the Order button, the
   most important element on every page.

   Darkened along the SAME hue rather than swapped for another colour, so the
   brand cyan survives: #0f5c86 (7.25:1) -> #197cae (4.63:1). Ten of the
   twelve sites sampled already passed at 4.88-11.16; this one and
   getlivpure were the outliers. */
.btn--cyan{background:linear-gradient(100deg,#0f5c86 0%,#197cae 100%)}
.btn--cyan:hover{background:linear-gradient(100deg,#0b4c6d 0%,#146a96 100%)}

/* ==== 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 slot: 24px cards, 16px controls, ONE soft
   lift (0 12px 30px) with no contact stop, tinted with this site's own ink
   (16,25,42), and a full-width ribbon bar on the pricing row.

   Scope: `.hero` is on index.html and nowhere else on this site, and every
   section of the home page is either inside `.hero` or a following sibling
   of it inside main#main -- so `.hero ~ *` cannot reach pricing.html, the
   header, the footer or the sticky buy bar. Nothing here is written bare.

   Order is not the defence: modern_surface.py and footer_type.py re-append
   their own blocks AFTER this one on every build. Every rule below carries
   more specificity than theirs (.card, .card--pack, .answer), so the
   cascade settles the same way whatever the source order ends up being.

   Paint only -- radius, shadow, background, colour, transform, transition.
   The one exception is the pricing row's own head padding and the perk
   separators, which are geometry but live below the marker for the same
   reason the whole pricing panel already does: none of it is in the
   critical block, so no inline copy can go stale against it. */
:root{
  --home-lift:0 12px 30px rgba(16,25,42,.10);
  --home-lift-2:0 18px 44px rgba(16,25,42,.17);
  --home-r-card:24px;
  --home-r-ctrl:16px;
}

/* panels: one curve, one soft lift */
.hero .answer,
.hero .figures div,
.hero ~ * .card,
.hero ~ * .ingcard,
.hero ~ * .faq,
.hero ~ * .callout,
.hero ~ * .keypoints,
.hero ~ * .shots figure,
.hero ~ * .final{border-radius:var(--home-r-card);box-shadow:var(--home-lift)}
.hero ~ * .tablewrap{border-radius:var(--home-r-card);box-shadow:var(--home-lift)}

/* a surface a reader can click answers the pointer: 2px, no reflow */
.hero ~ * .card,
.hero ~ * .shots figure,
.hero ~ #pricing .card--pack{transition:box-shadow .25s ease,transform .25s ease}
.hero ~ * .card:hover,
.hero ~ * .shots figure:hover{box-shadow:var(--home-lift-2);transform:translateY(-2px)}

/* controls: the slot's 16px, a lift on hover, a ring on keyboard focus */
.hero .btn,
.hero ~ * .btn{border-radius:var(--home-r-ctrl);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background .18s ease}
.hero .btn:hover,
.hero ~ * .btn:hover{transform:translateY(-2px)}
.hero .btn:active,
.hero ~ * .btn:active{transform:translateY(0)}
.hero .btn:focus-visible,
.hero ~ * .btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;
  box-shadow:0 0 0 6px rgba(42,163,224,.22)}

/* the BUYING button is the only gradient on the page, and it keeps the
   contrast repair above: #197cae is the lightest stop here too (4.63:1
   against its own white 800-weight label), and every hover stop is darker. */
.hero .btn--cyan,
.hero ~ * .btn--cyan{background:linear-gradient(118deg,#0c4f74 0%,#14709f 48%,#197cae 100%);
  box-shadow:0 12px 30px rgba(12,79,116,.32)}
.hero .btn--cyan:hover,
.hero ~ * .btn--cyan:hover{background:linear-gradient(118deg,#0a4463 0%,#12648c 48%,#16739f 100%);
  box-shadow:0 16px 38px rgba(12,79,116,.40)}
/* the secondary stays SOLID so the pair reads as two weights. Desktop only:
   below 981px this button sits on the navy wedge and is deliberately light
   text on it, so a white ground here would erase its label. */
@media (min-width:981px){
  .hero .btn--ghost{background:#fff;color:var(--navy);
    box-shadow:inset 0 0 0 2px var(--line-2),0 8px 20px rgba(16,25,42,.07)}
  .hero .btn--ghost:hover{background:var(--wash);color:var(--navy-d);
    box-shadow:inset 0 0 0 2px var(--cyan),0 12px 30px rgba(16,25,42,.10)}
}

/* ---- the pricing row.
   The row is engineered to share one height and one button baseline: a fixed
   image box, a per-item min-height and no transform on the featured card,
   because the reveal pass sets transform:none. None of that is touched here.
   The head padding and the perk separators are the same number on all three
   cards, so the three Add To Cart buttons stay on their one baseline --
   measured at 1440x900 after this block, all three at the same offset. */
.hero ~ #pricing .card--pack{border-radius:var(--home-r-card);
  box-shadow:inset 0 0 0 1px var(--line),var(--home-lift)}
.hero ~ #pricing .card--pack:hover{box-shadow:inset 0 0 0 1px var(--line-2),var(--home-lift-2);
  transform:translateY(-2px)}
/* the recommended tier, in its own colour and its own depth */
.hero ~ #pricing .card--pack.featured{
  box-shadow:inset 0 0 0 2px rgba(42,163,224,.60),0 20px 48px rgba(16,25,42,.20)}
.hero ~ #pricing .card--pack.featured:hover{
  box-shadow:inset 0 0 0 2px rgba(42,163,224,.85),0 24px 56px rgba(16,25,42,.24)}
.hero ~ #pricing .card--pack.featured .pack__body{
  background:linear-gradient(180deg,rgba(232,242,250,.62),rgba(255,255,255,0) 46%)}
/* the ribbon, slot form: a FULL-WIDTH bar across the top of the card. The
   head reserves the same room on all three, including the card that carries
   no ribbon, or the row would lose its shared baseline. */
.hero ~ #pricing .pack__flag{left:0;right:0;top:0;border-radius:0;
  text-align:center;padding:8px 14px;line-height:1.25;letter-spacing:.11em;
  background:var(--navy-2);box-shadow:0 1px 0 rgba(16,25,42,.10)}
.hero ~ #pricing .card--pack.featured .pack__flag{
  background:linear-gradient(100deg,var(--cyan-d) 0%,var(--cyan) 100%)}
.hero ~ #pricing .pack__head{padding-top:50px}
/* dashed separators between the feature rows -- four perks on every card, so
   the added height is identical across the row */
.hero ~ #pricing .pack__perks li+li{border-top:1px dashed var(--line-2);
  padding-top:8px;margin-top:8px}

@media (prefers-reduced-motion:reduce){
  .hero .btn:hover,
  .hero ~ * .btn:hover,
  .hero ~ * .card:hover,
  .hero ~ * .shots figure:hover,
  .hero ~ #pricing .card--pack: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 18 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 (16,25,42), 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(16,25,42,.06), 0 6px 18px rgba(16,25,42,.07);
  --lift:0 2px 6px rgba(16,25,42,.09), 0 16px 34px rgba(16,25,42,.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}

/*!SITE-REFRESH-PCX 2026-09-30 (getprostacyl): credential strip, bylines, review panel, pre-order check, reading shelf, doctor-first cards, reviewer card, policy contents, motion layer, readability floors*/
:root{--ink-3:#5a6578}.nav__price span{font-size:13px}.util .pcx-sm{display:none}@media (max-width:560px){.util .pcx-lg{display:none}.util .pcx-sm{display:inline}.util__row{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}}.pcx-by{margin:-4px 0 16px;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:var(--measure-wide)}.pcx-by a{font-weight:600}.postmeta{color:var(--ink-2)}
.pcx-cred{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pcx-cred__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding-block:14px;font-size:16px;line-height:1.45;color:var(--ink-2)}
.pcx-cred__row a{font-weight:700}
.pcx-cred__tag{font:800 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--navy);padding:8px 12px;border-radius:999px}
.pcx-cred__go{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--line-2);text-decoration:none;color:var(--navy)}
.pcx-cred__go:hover{box-shadow:inset 0 0 0 2px var(--cyan)}
@media (max-width:640px){.pcx-cred__row{gap:6px 14px}}
.pcx-sign{padding:56px 0;background:var(--paper)}
.pcx-sign__box{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:28px;align-items:start;padding:30px 30px 28px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.pcx-sign__box::before{content:"";position:absolute;left:0;top:0;width:96px;height:6px;background:var(--cyan);transform:skewX(-34deg);transform-origin:left top}
.pcx-sign__k{font:800 13px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#0e6590;margin:0 0 8px}
.pcx-sign__main h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);margin:0 0 12px}
.pcx-sign__main p{font-size:16.5px;color:var(--ink-2)}
.pcx-sign__ref{padding:14px 16px;border-left:4px solid var(--cyan);background:var(--wash);border-radius:0 12px 12px 0;color:var(--ink)!important}
.pcx-sign__links{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.pcx-sign__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line-2);color:var(--navy);font-weight:700;font-size:16px;text-decoration:none}
.pcx-sign__links a:hover{box-shadow:inset 0 0 0 2px var(--cyan);color:var(--navy-d)}
.pcx-sign__card{margin:0;display:grid;gap:10px}
.pcx-sign__card>div{padding:14px 16px;border-radius:12px;background:var(--wash)}
.pcx-sign__card>div:first-child{background:linear-gradient(140deg,var(--navy) 0%,var(--navy-d) 100%)}
.pcx-sign__card dt{font:800 13px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#0e6590;margin:0 0 4px}
.pcx-sign__card>div:first-child dt{color:#9ed3f5}
.pcx-sign__card dd{margin:0;font:700 17px/1.35 var(--display);color:var(--navy)}
.pcx-sign__card dd a{color:inherit;text-underline-offset:3px}
.pcx-sign__card>div:first-child dd,.pcx-sign__card>div:first-child dd a{color:#fff}
.pcx-sign__card dd small{display:block;font:600 15px/1.4 var(--text);color:#c3d2e4}
@media (max-width:860px){.pcx-sign__box{grid-template-columns:1fr;padding:24px 20px}}
.pcx-check{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pcx-check__col{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 24px 22px;box-shadow:var(--shadow)}
.pcx-check__col--doc{border-top:5px solid var(--navy)}
.pcx-check__col--buy{border-top:5px solid var(--cyan)}
.pcx-check__col h3{margin:0 0 14px}
.pcx-check__col ol{list-style:none;counter-reset:pcxk;margin:0;padding:0;display:grid;gap:12px}
.pcx-check__col li{counter-increment:pcxk;position:relative;padding-left:42px;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.pcx-check__col li::before{content:counter(pcxk);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:800 14px/1 var(--display);color:#fff;background:var(--navy)}
.pcx-check__col--buy li::before{background:#0e6590}
@media (max-width:860px){.pcx-check{grid-template-columns:1fr}}
.pcx-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pcx-shelf__item{display:grid;gap:6px;align-content:start;min-width:0;padding:20px 22px;border-radius:var(--radius-lg);background:var(--panel);border:1px solid var(--line);border-bottom:4px solid var(--cyan);box-shadow:var(--shadow);text-decoration:none;color:var(--ink-2)}
.pcx-shelf__item strong{font:800 1.12rem/1.25 var(--display);color:var(--navy)}
.pcx-shelf__item span:not(.pcx-shelf__kind){font-size:16px}
.pcx-shelf__kind{font:800 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#0e6590}
@media (max-width:900px){.pcx-shelf{grid-template-columns:1fr}}
.pcx-doc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pcx-doc__item{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:var(--radius);padding:20px 22px}
.pcx-doc__item h3{margin:0 0 8px}
.pcx-doc__item p{margin:0;font-size:16.5px;color:var(--ink-2)}
.pcx-doc__item:last-child:nth-child(odd){grid-column:1/-1}
.pcx-doc__item--now{border-left-color:var(--navy);background:var(--wash)}
.pcx-doc__item--now p{color:var(--ink)}
.pcx-doc__ref{margin:20px 0 0;padding:16px 20px;border-radius:var(--radius);background:var(--navy);color:#fff;font-weight:600}
@media (max-width:860px){.pcx-doc{grid-template-columns:1fr}}
.pcx-rev{max-width:860px;background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--navy);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow)}
.pcx-rev h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem)}
.pcx-tocwrap{padding:26px 0 0}
.pcx-toc__h{font:800 13px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#0e6590;margin:0 0 10px}
.pcx-toc{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pcx-toc a{display:inline-flex;align-items:center;min-height:42px;padding:0 15px;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2);font-size:16px;font-weight:600;color:var(--navy);text-decoration:none}
.pcx-toc a:hover{box-shadow:inset 0 0 0 2px var(--cyan)}
/* readability floors (owner, 30 Sep: "text should clear"): every colour 4.5:1 on its ground, body 16px, labels 13px */
.eyebrow{color:#0e6590!important}
.tnote,.buy__note,.final__sm,.byline p,.fcta__sm{font-size:16px!important}
.tnote,.buy__note,.final__sm{color:var(--ink-2)!important}
.fcta__eye{font-size:13px!important;color:#7cc8f0!important}
.hero h1 em{color:#0e6590!important}
.pack__flag{background:var(--navy-2)!important}
.card--pack.featured .pack__flag{background:linear-gradient(100deg,#0c5d88 0%,#13729f 100%)!important}
.nav__price span{font-size:13px!important}
.is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:no-preference){
.btn--cyan{position:relative;overflow:hidden;isolation:isolate}
.btn--cyan::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.26) 50%,transparent 70%);transform:translateX(-140%);pointer-events:none}
.hero .btn--cyan::after,.final .btn--cyan::after,.fcta .btn--cyan::after{animation:pcxSheen 7.5s ease-in-out 2s infinite}
.btn--cyan:hover::after{animation:pcxSheen 1.1s ease}
@keyframes pcxSheen{0%,76%{transform:translateX(-140%)}100%{transform:translateX(140%)}}
.pcx-rip{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none;z-index:-1;animation:pcxRip .6s ease-out forwards}
@keyframes pcxRip{from{transform:scale(0);opacity:1}to{transform:scale(14);opacity:0}}
.btn--cyan.pcx-mag{translate:var(--pbx,0px) var(--pby,0px);transition:translate .22s ease,transform .18s ease,box-shadow .18s ease,filter .18s ease,background .18s ease}
.pcx-tilt{transition:transform .3s ease,box-shadow .3s ease,opacity .5s ease}
.pcx-tilt.is-tilting{transform:perspective(900px) rotateX(var(--prx,0deg)) rotateY(var(--pry,0deg)) translateY(-3px)!important;box-shadow:var(--lift)}
.pcx-shelf__item:hover{box-shadow:var(--lift)}
.pcx-sign__card>div:first-child{background-image:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.1) 50%,rgba(255,255,255,0) 62%),linear-gradient(140deg,var(--navy) 0%,var(--navy-d) 100%);background-size:260% 100%,100% 100%;animation:pcxCard 9s linear infinite}
@keyframes pcxCard{from{background-position:130% 0,0 0}to{background-position:-130% 0,0 0}}
}
/*!END-SITE-REFRESH-PCX*/