/* Compound pages (/peptides/*): a light page between the navy nav and footer.
   Served immutable: bump the ?v= on the compound pages when this changes. */
.pd{background:#F3F5F8;color:var(--ink);padding:24px 0 96px}
.pd-page footer{margin-top:0}
.nw{white-space:nowrap}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono-f);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs a:focus-visible{outline-color:var(--accent)}
.crumbs [aria-current]{color:var(--ink)}

/* ---------- hero: the vial and the buy box ---------- */
.pd-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;margin-top:20px}
.pd-stage{position:relative;min-height:560px;border-radius:32px;background:var(--stage);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.pd-stage img{height:min(420px,62vw);width:auto;rotate:-6deg;filter:drop-shadow(0 30px 28px rgba(30,45,64,.24))}
.pd-stage::after{content:"";width:170px;height:22px;margin-top:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(30,45,64,.26),rgba(30,45,64,0))}
.pd-tag{position:absolute;left:20px;top:20px;background:rgba(255,255,255,.88);border-radius:999px;padding:7px 13px;font-family:var(--mono-f);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.pd-eyebrow{font-family:var(--mono-f);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.pd-info h1{margin-top:10px;font-family:var(--display);font-weight:800;font-size:clamp(44px,5.6vw,80px);line-height:.92;letter-spacing:-.04em;text-transform:uppercase;color:var(--ink)}
/* a single long word (Bacteriostatic) has to fit the column */
.pd-info h1.pd-long{font-size:clamp(32px,4.4vw,64px)}
.pd-aka{margin-top:14px;font-family:var(--mono-f);font-size:13px;line-height:1.6;color:var(--ink-muted)}
.pd-lead{margin-top:16px;max-width:58ch;font-size:18px;line-height:1.6;color:var(--ink-2)}
.pd-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pd-badges span{background:#fff;border:1px solid var(--rule);border-radius:999px;padding:7px 13px;font-family:var(--mono-f);font-size:12px;letter-spacing:.04em;color:var(--ink-2)}
.pd-badges a{background:#fff;border:1px solid rgba(11,122,110,.35);border-radius:999px;padding:7px 13px;font-family:var(--mono-f);font-size:12px;letter-spacing:.04em;color:var(--accent);text-decoration:none;transition:background .15s ease}
.pd-badges a:hover{background:rgba(11,122,110,.08)}
.pd-badges .pd-purity{border-color:rgba(11,122,110,.35);color:var(--accent)}
.pd-buy{margin-top:24px;padding:22px;border-radius:24px;background:#fff}
.pd-buy-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.pd-sizes{display:flex;flex-wrap:wrap;gap:8px}
.pd-size,.pd-fill{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border:0;border-radius:999px;font:400 14px var(--mono-f);background:var(--paper-2);color:var(--ink)}
.pd-size{cursor:pointer;transition:background .15s ease}
.pd-size:hover{background:#DDE1E6}
.pd-size[aria-pressed="true"],.pd-fill{background:var(--ink);color:#fff}
.pd-size:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pd-price{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.pd-price small{font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:0;color:var(--ink-muted)}
.pd-add{width:100%;margin-top:16px;min-height:54px;font-size:16px}
.pd-add:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* volume pricing: the standout panel in the buy box, live against the cart */
.pd-deal{position:relative;margin-top:16px;padding:18px;border-radius:20px;overflow:hidden;color:#fff;
  background:radial-gradient(120% 140% at 100% 0%,rgba(37,228,200,.28),transparent 55%),
             radial-gradient(90% 120% at 0% 100%,rgba(59,130,246,.30),transparent 60%),#0B1220}
.pd-deal-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.pd-deal-kicker{font-family:var(--mono-f);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.pd-deal-head b{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;text-transform:uppercase}
.pd-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.pd-tier{display:flex;flex-direction:column;align-items:flex-start;padding:12px 12px 11px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:background .3s ease,border-color .3s ease,transform .3s ease}
.pd-tier b{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;letter-spacing:-.03em}
.pd-tier span{margin-top:2px;font-family:var(--mono-f);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9AA6B4}
.pd-tier em{margin-top:8px;font-style:normal;font-weight:600;font-size:15px;color:var(--mint)}
/* the tier the cart has reached, and the next one to go for */
.pd-tier.on{background:linear-gradient(135deg,var(--cyan),var(--blue));border-color:transparent;color:#04121A;transform:translateY(-2px)}
.pd-tier.on span,.pd-tier.on em{color:#04121A}
.pd-tier.next{border-color:var(--mint);animation:pd-pulse 2.2s ease-in-out infinite}
@keyframes pd-pulse{0%,100%{box-shadow:0 0 0 0 rgba(95,224,207,.0)}50%{box-shadow:0 0 0 4px rgba(95,224,207,.22)}}
.pd-meter{height:6px;margin-top:14px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.pd-meter i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--blue));transition:width .5s cubic-bezier(.2,.7,.2,1)}
.pd-deal-msg{margin-top:10px;font-size:14px;line-height:1.5;color:#D7DDE4}
.pd-deal-msg b{color:#fff}
@media (prefers-reduced-motion:reduce){.pd-tier.next{animation:none}.pd-meter i,.pd-tier{transition:none}}
@media(max-width:600px){.pd-tier b{font-size:26px}.pd-deal-head b{font-size:18px}}
.pd-ruo{margin-top:8px;font-size:13px;color:var(--ink-muted)}

/* ---------- sections ---------- */
.pd-sec{margin-top:88px}
.pd-sec > h2,.pd-head h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,4vw,52px);line-height:.95;letter-spacing:-.035em;text-transform:uppercase;color:var(--ink)}
.pd-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 40px}
.pd-head p{max-width:440px;color:var(--ink-muted)}
.pd .link-arrow{color:var(--ink)}
.pd .link-arrow:hover{color:var(--accent)}
.pd-about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.pd-about p{font-size:17px;line-height:1.75;color:var(--ink-2)}
.pd-about p + p{margin-top:16px}
.pd-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:28px}
.pd-app{background:#fff;border-radius:22px;padding:24px}
.pd-app span{font-family:var(--mono-f);font-size:12px;letter-spacing:.1em;color:var(--accent)}
.pd-app h3{margin-top:10px;font-size:18px;font-weight:600;line-height:1.25;color:var(--ink)}
.pd-app p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink-muted)}

.pd-specs-wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px;margin-top:28px;align-items:start}
.pd-specs{width:100%;border-collapse:collapse;background:#fff;border-radius:22px;overflow:hidden;font-size:15px}
.pd-specs th,.pd-specs td{text-align:left;vertical-align:top;padding:14px 20px;border-bottom:1px solid var(--rule)}
.pd-specs tr:last-child th,.pd-specs tr:last-child td{border-bottom:0}
.pd-specs th{width:34%;font-family:var(--mono-f);font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.pd-specs td{color:var(--ink)}
.pd-handle{background:var(--ink);color:#D7DDE4;border-radius:22px;padding:26px}
.pd-handle h3{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;text-transform:uppercase;color:#fff}
.pd-handle p{margin-top:12px;font-size:15px;line-height:1.65}
.pd-handle a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}

.pd-faq{margin-top:24px;border-top:1px solid #D5DAE0}
.pd-faq details{border-bottom:1px solid #D5DAE0;padding:20px 0}
.pd-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;font-size:17px;font-weight:600;color:var(--ink)}
.pd-faq summary::-webkit-details-marker{display:none}
.pd-faq summary::after{content:"+";flex:none;font-size:24px;line-height:1;transition:transform .2s ease}
.pd-faq details[open] summary::after{transform:rotate(45deg)}
.pd-faq summary:focus-visible{outline-color:var(--accent)}
.pd-faq p{margin-top:10px;max-width:72ch;font-size:16px;line-height:1.65;color:var(--ink-2)}

.pd-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:28px}
.pd-rel a{display:flex;flex-direction:column;background:#fff;border-radius:22px;overflow:hidden;transition:transform .2s ease}
.pd-rel a:hover{transform:translateY(-4px)}
.pd-rel a:focus-visible{outline-color:var(--accent)}
.pd-rel-img{height:200px;background:var(--stage);display:flex;align-items:center;justify-content:center}
.pd-rel-img img{height:150px;width:auto;filter:drop-shadow(0 16px 14px rgba(30,45,64,.2))}
.pd-rel-txt{padding:16px 20px 20px}
.pd-rel-txt span{font-family:var(--mono-f);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.pd-rel-txt b{display:block;margin-top:6px;font-family:var(--display);font-weight:800;font-size:22px;line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)}
.pd-rel-txt em{display:block;margin-top:8px;font-style:normal;font-size:14px;color:var(--ink-2)}

.pd-notice{margin-top:72px;padding:22px 26px;border-radius:20px;background:#fff;border-left:4px solid var(--accent);font-size:14px;line-height:1.65;color:var(--ink-2)}
.pd-notice b{color:var(--ink)}

@media(max-width:900px){
  .pd-hero,.pd-about,.pd-specs-wrap{grid-template-columns:1fr}
  .pd-stage{min-height:420px}
  .pd-stage img{height:320px}
}
@media(max-width:600px){
  .pd{padding:16px 0 72px}
  .pd-hero{margin-top:14px;gap:22px}
  .pd-stage{min-height:340px;border-radius:24px}
  .pd-stage img{height:250px}
  .pd-lead{font-size:17px}
  .pd-buy{padding:18px}
  .pd-price{font-size:34px}
  .pd-sec{margin-top:64px}
  .pd-specs th,.pd-specs td{display:block;width:auto;padding:4px 18px}
  .pd-specs th{padding-top:14px;border-bottom:0}
  .pd-specs td{padding-bottom:14px}
}