/* Peptides. House red; only --apex-* tokens. Full-width sections use padding
   centering (see the alignment note in hormone-therapy.css), never auto
   margins on children. */

.pp-sec { max-width: var(--apex-max); margin: 0 auto; padding: 88px var(--apex-gutter); }
.pp-kicker { font: 800 12px/1 var(--apex-font-mono); letter-spacing: .16em;
             text-transform: uppercase; color: var(--apex-red); }
.pp-kicker-light { color: var(--apex-red-bright); }
.pp-head { max-width: 780px; margin-bottom: 44px; }
.pp-sec h2, .pp-end h2 { margin: 18px 0 16px; font-size: clamp(28px, 3.3vw, 42px);
                         font-weight: 900; line-height: 1.07; letter-spacing: -.02em; }
.pp-lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--apex-body); }
.pp-sec p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: var(--apex-body); }
.pp-sec p:last-child { margin-bottom: 0; }
.btn-ghost, a.btn-ghost { background: transparent; color: var(--apex-ink);
                          box-shadow: inset 0 0 0 1.5px var(--apex-rule); }
.btn-ghost:hover, a.btn-ghost:hover { color: var(--apex-red);
                          box-shadow: inset 0 0 0 1.5px var(--apex-red); }

.pp-alt { background: var(--apex-bg-alt); max-width: none;
  padding-left:  max(var(--apex-gutter), calc((100% - var(--apex-max)) / 2 + var(--apex-gutter)));
  padding-right: max(var(--apex-gutter), calc((100% - var(--apex-max)) / 2 + var(--apex-gutter))); }

/* hero ------------------------------------------------------------------ */
.pp-hero { position: relative; isolation: isolate; background: var(--apex-ink);
           overflow: hidden; }
/* two red glows and a faint dot grid, so the dark ground has depth behind the
   floating vials instead of reading as a flat black box */
.pp-hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 60% at 72% 34%, rgba(211,7,4,.42) 0%, rgba(211,7,4,0) 70%),
    radial-gradient(38% 52% at 96% 88%, rgba(255,90,77,.22) 0%, rgba(255,90,77,0) 72%),
    radial-gradient(circle at center, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px; }
.pp-hero-in { position: relative; max-width: var(--apex-max); margin: 0 auto; display: grid;
              grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center;
              padding: 92px var(--apex-gutter) 84px; }
.pp-hero h1 { margin: 18px 0 18px; color: #fff; font-weight: 900;
              font-size: clamp(34px, 4.4vw, 56px); line-height: 1.03; letter-spacing: -.025em; }
.pp-hero .pp-kicker { color: var(--apex-red-bright); }
.pp-hero-sub { margin: 0; color: #d9d2ca; font-size: 17.5px; line-height: 1.62; max-width: 52ch; }
.pp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 26px; }
.btn-ghost-light, a.btn-ghost-light { background: transparent; color: #fff;
        box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.btn-ghost-light:hover, a.btn-ghost-light:hover { color: #fff; background: rgba(255,255,255,.12);
        box-shadow: inset 0 0 0 1.5px #fff; }
.pp-hero-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0;
                 list-style: none; }
.pp-hero-trust li { position: relative; padding-left: 20px; font-size: 14.5px; color: #cfc7be; }
.pp-hero-trust li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px;
                 height: 8px; border-radius: 50%; background: var(--apex-red); }

/* the stage: four vials, the current one forward */
.pp-stage { position: relative; }
.pp-stage-shelf { position: relative; height: clamp(300px, 34vw, 420px); }
.pp-stage-shelf::after { content: ""; position: absolute; left: 50%; bottom: 4%;
  width: 62%; height: 42px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 70%);
  filter: blur(2px); }
.pp-stage-shelf img { position: absolute; left: 50%; bottom: 8%; width: auto;
  height: 74%; transform: translate(-50%, 0) scale(.82) rotate(-4deg);
  opacity: 0; filter: drop-shadow(0 26px 34px rgba(0,0,0,.55));
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.pp-stage-shelf img.is-current { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0deg);
  animation: pp-float 6s ease-in-out infinite; }
@keyframes pp-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}

.pp-stage-card { position: relative; margin-top: 22px; padding: 22px 24px;
  border-radius: var(--apex-radius); background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.pp-stage-name { font-size: 24px; font-weight: 900; color: #fff; letter-spacing: -.01em; }
.pp-stage-line { margin-top: 4px; font-size: 15px; color: #cfc7be; }
.pp-stage-price { margin-top: 8px; font: 800 12px/1.4 var(--apex-font-mono);
                  letter-spacing: .12em; text-transform: uppercase; color: var(--apex-red-bright); }
.pp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 16px; }
.pp-tabs button { cursor: pointer; border: 0; padding: 9px 14px; border-radius: 999px;
  font: 800 11.5px/1 var(--apex-font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: #d9d2ca; background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.pp-tabs button:hover { color: #fff; background: rgba(255,255,255,.16); }
.pp-tabs button[aria-selected="true"] { background: var(--apex-red); color: #fff;
  box-shadow: inset 0 0 0 1px var(--apex-red); }
.pp-tabs button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pp-stage-go { display: inline-block; font: 800 13px/1 var(--apex-font-ui);
  letter-spacing: .04em; color: #fff; padding: 4px 0; border-bottom: 2px solid var(--apex-red); }
.pp-stage-go:hover { color: var(--apex-red-bright); }

/* press */
.pp-press { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
            gap: 18px 44px; padding: 26px var(--apex-gutter);
            border-bottom: 1px solid var(--apex-rule); }
.pp-press span { font: 800 11px/1 var(--apex-font-mono); letter-spacing: .16em;
                 text-transform: uppercase; color: var(--apex-muted); }
.pp-press img { height: 26px; width: auto; filter: grayscale(1); opacity: .75; }

/* steps */
.pp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
            margin: 0; padding: 0; list-style: none; }
.pp-steps li { border: 1px solid var(--apex-rule); border-radius: var(--apex-radius);
               padding: 26px 24px; background: var(--apex-bg); }
.pp-steps img { height: 64px; width: auto; display: block; margin-bottom: 18px; }
.pp-step-n { font: 800 12px/1 var(--apex-font-mono); letter-spacing: .16em; color: var(--apex-red); }
.pp-steps h3 { margin: 10px 0 8px; font-size: 19px; font-weight: 800; }
.pp-steps p { margin: 0 !important; font-size: 15px !important; }

/* products */
.pp-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pp-product { display: flex; flex-direction: column; background: var(--apex-bg);
              border: 1px solid var(--apex-rule); border-radius: var(--apex-radius);
              overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.pp-product:hover { transform: translateY(-4px);
                    box-shadow: 0 18px 40px rgba(23,20,15,.12); }
.pp-product-tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background:
    radial-gradient(60% 60% at 50% 42%, rgba(211,7,4,.16) 0%, rgba(211,7,4,0) 72%),
    linear-gradient(180deg, #16130f 0%, #221c17 100%); }
.pp-product-tile img { position: absolute; left: 50%; top: 50%; height: 78%; width: auto;
  transform: translate(-50%, -50%); display: block;
  filter: drop-shadow(0 20px 26px rgba(0,0,0,.5));
  transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.pp-product:hover .pp-product-tile img { transform: translate(-50%, -54%) scale(1.04); }
.pp-product-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 22px 24px; }
.pp-product-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pp-product-meta span { font: 800 10.5px/1 var(--apex-font-mono); letter-spacing: .14em;
                        text-transform: uppercase; color: var(--apex-muted); }
.pp-product-meta strong { font-size: 17px; font-weight: 900; color: var(--apex-ink); }
.pp-product h3 { margin: 4px 0 0; font-size: 22px; font-weight: 900; letter-spacing: -.01em; }
.pp-product-tag { font-size: 14px; font-weight: 700; color: var(--apex-red); }
.pp-product p { margin: 0 !important; font-size: 14.5px !important; line-height: 1.6 !important; }
.pp-product .btn { margin-top: auto; text-align: center; }
.pp-list { margin: 4px 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pp-list li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: var(--apex-body); }
.pp-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px;
                      border-radius: 50%; background: var(--apex-red); }

/* comparison */
.pp-tablewrap { max-width: 860px; overflow-x: auto; border: 1px solid var(--apex-rule);
                border-radius: var(--apex-radius); background: var(--apex-bg); }
.pp-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.pp-table th, .pp-table td { padding: 15px 20px; text-align: left; font-size: 15px;
                             border-bottom: 1px solid var(--apex-rule); color: var(--apex-body); }
.pp-table thead th { font-size: 13px; font-weight: 800; color: var(--apex-ink); background: var(--apex-bg-alt); }
.pp-table thead .is-on { background: var(--apex-red); color: #fff; }
.pp-table tbody th { font-weight: 700; color: var(--apex-ink-soft); }
.pp-table td.is-on { background: var(--apex-red-tint); color: var(--apex-ink); font-weight: 800; }
.pp-table tbody tr:last-child > * { border-bottom: 0; }
.pp-yes, .pp-no { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.pp-yes::before { content: "\2713"; color: var(--apex-red); }
.pp-no { color: var(--apex-muted); font-weight: 600; }
.pp-no::before { content: "\2715"; }

/* faq */
.pp-faq { max-width: 860px; border-top: 1px solid var(--apex-rule); }
.pp-faq details { border-bottom: 1px solid var(--apex-rule); }
.pp-faq summary { list-style: none; cursor: pointer; position: relative;
                  padding: 20px 44px 20px 0; font-size: 17.5px; font-weight: 800; color: var(--apex-ink); }
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after { content: "+"; position: absolute; right: 8px; top: 16px;
                         font: 700 24px/1 var(--apex-font-ui); color: var(--apex-red); }
.pp-faq details[open] summary::after { content: "\2013"; }
.pp-faq summary:hover { color: var(--apex-red); }
.pp-faq summary:focus-visible { outline: 3px solid var(--apex-red); outline-offset: 2px; }
.pp-faq details > div { padding: 0 44px 22px 0; }

/* end */
.pp-end { background: var(--apex-ink); padding: 84px var(--apex-gutter); }
.pp-end-in { max-width: 760px; margin: 0 auto; text-align: center; }
.pp-end h2 { color: #fff; margin-bottom: 28px; }
.pp-disclaim { margin: 40px 0 0; font-size: 12.5px; line-height: 1.6; color: #8f877e; text-align: left; }

@media (max-width: 1100px) {
  .pp-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .pp-hero-grid { max-width: 520px; }
  .pp-products { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* the mono labels sit at 11-12px on desktop; a notch up on phones,
     where they are read at arm's length on a smaller screen */
  .pp-kicker, .pp-kicker-light { font-size: 12.5px; }
  [class*="pp-"] cite, .pp-offer-what, .pp-tier-tag, .pp-tier-kind,
  .pp-metric-t, .pp-method-t, .pp-step-n, .pp-card-k, .pp-formula-mix,
  .pp-product-meta span, .pp-flip-hint { font-size: 12px; }

  .pp-sec { padding: 56px var(--apex-gutter); }
  .pp-hero-in { padding: 80px var(--apex-gutter) 52px; }
  .pp-head { margin-bottom: 28px; }
  .pp-steps, .pp-products { grid-template-columns: 1fr; }
  .pp-hero-offer { padding: 18px; }
  .pp-hero-offer .btn, .pp-product .btn { display: block; width: 100%; text-align: center;
                                          white-space: normal; line-height: 1.35; margin-left: 0; }
  .pp-press { gap: 16px 28px; }
  .pp-table { min-width: 0; }
  .pp-table th, .pp-table td { padding: 12px 10px; font-size: 13.5px; }
  .pp-press img { height: 20px; }
  .pp-end { padding: 56px var(--apex-gutter); }
}

/* dose comparison bars ---------------------------------------------------- */
.pp-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 860px;
           margin-top: 32px; }
.pp-bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pp-bar-top span { font: 800 11.5px/1 var(--apex-font-mono); letter-spacing: .14em;
                   text-transform: uppercase; color: var(--apex-muted); }
.pp-bar-top strong { font-size: 22px; font-weight: 900; color: var(--apex-ink);
                     letter-spacing: -.02em; }
.pp-bar-track { margin: 10px 0 8px; height: 12px; border-radius: 999px;
                background: var(--apex-bg-alt); box-shadow: inset 0 0 0 1px var(--apex-rule);
                overflow: hidden; }
.pp-bar-fill { height: 100%; width: var(--w); border-radius: 999px; background: #cdc5bb; }
.pp-bar-fill.is-on { background: linear-gradient(90deg, var(--apex-red), var(--apex-red-bright)); }
.pp-bar-foot { font-size: 13.5px; color: var(--apex-muted); }
.pp-bar-fill.will-fill { width: 0; }
.pp-bar-fill.is-filled { width: var(--w); transition: width 1.1s cubic-bezier(.2,.7,.2,1); }

/* reveal on scroll -------------------------------------------------------- */
.will-reveal { opacity: 0; transform: translateY(24px); }
.is-revealed { opacity: 1; transform: none;
               transition: opacity .6s ease, transform .6s cubic-bezier(.16,.7,.3,1); }
.pp-steps > li.is-revealed:nth-child(2) { transition-delay: .09s; }
.pp-steps > li.is-revealed:nth-child(3) { transition-delay: .18s; }
.pp-product.is-revealed:nth-child(2) { transition-delay: .07s; }
.pp-product.is-revealed:nth-child(3) { transition-delay: .14s; }
.pp-product.is-revealed:nth-child(4) { transition-delay: .21s; }

/* steps get a little lift too */
.pp-steps li { transition: transform .3s ease, box-shadow .3s ease; }
.pp-steps li:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(23,20,15,.1); }

@media (prefers-reduced-motion: reduce) {
  .pp-stage-shelf img.is-current { animation: none; }
  .pp-stage-shelf img, .pp-product, .pp-product-tile img, .pp-steps li { transition: none; }
  .will-reveal { opacity: 1; transform: none; }
  .pp-bar-fill.will-fill { width: var(--w); }
}

@media (max-width: 1100px) {
  .pp-stage-shelf { height: clamp(260px, 38vw, 360px); }
}
@media (max-width: 760px) {
  .pp-bars { grid-template-columns: 1fr; gap: 18px; }
  .pp-stage-shelf { height: 280px; }
  .pp-stage-card { padding: 18px; }
  .pp-hero-cta .btn { display: block; width: 100%; text-align: center;
                      white-space: normal; line-height: 1.35; }
  /* the switcher is the main thing a thumb hits here: give it a real target */
  .pp-tabs button { flex: 1 1 calc(50% - 8px); text-align: center;
                    padding: 14px 14px; min-height: 44px; }
  .pp-stage-go { padding: 12px 0; min-height: 44px; }
}