/* ─────────────────────────────────────────────────────────────────────────
   Product / Compounding Pharmacy / Security pages.

   Design language from the Claude-design handoff (design_handoff_product_pages):
   paper #fdfcfc, ink #14140f, hairline rules, IBM Plex Mono labels, accent
   green oklch(52% .11 152). Depth is always a 1px rule or surface change,
   never a shadow. Every rule is scoped under .pp so none of it leaks into the
   site chrome, which stays on main.css.

   The approved markup carries its styles INLINE (ported verbatim from the
   design files). This file holds only what inline styles cannot express:
   hover/focus states, media queries, and the handful of responsive grids,
   which are classes here PRECISELY so the mobile overrides need no !important.
   ───────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

.pp{background:#fdfcfc; color:#14140f;
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased}
/* main.css sets Fraunces on headings element-wide; this design is Helvetica.
   Stated explicitly because inheritance loses to an element selector. */
.pp h1,.pp h2,.pp h3,.pp h4{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
.pp a{color:inherit; text-decoration:none}
.pp a:hover{opacity:.7}
.pp a:focus-visible, .pp button:focus-visible{outline:2px solid oklch(46% .1 152); outline-offset:3px}

/* type scale: fixed desktop sizes from the design, clamped for small screens */
.pp-h1{font-size:clamp(36px,6.2vw,66px)}
.pp-h1--sec{font-size:clamp(34px,6vw,62px)}
.pp-h2{font-size:clamp(28px,4.4vw,40px)}
.pp-h2--36{font-size:clamp(26px,4vw,36px)}
.pp-h2--32{font-size:clamp(24px,3.6vw,32px)}
.pp-h2--28{font-size:clamp(22px,3.2vw,28px)}
.pp-h3{font-size:clamp(24px,3.8vw,34px)}
.pp-h3--32{font-size:clamp(23px,3.6vw,32px)}

/* page gutters */
.pp-pad{padding-left:40px; padding-right:40px}
.pp-band-pad{padding:72px 64px}
@media (max-width:760px){
  .pp-pad{padding-left:20px; padding-right:20px}
  .pp-band-pad{padding:44px 20px}
}

/* responsive grids (columns live here, everything else stays inline) */
.pp-hero-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:64px; margin-top:22px; align-items:end}
.pp-hero-grid--sec{grid-template-columns:1.2fr .8fr; margin-top:20px}
.pp-proof{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#e6e2dd; border-bottom:1px solid #e6e2dd}
.pp-walk{display:grid; grid-template-columns:1.2fr .8fr; gap:64px; margin-top:48px; align-items:start}
.pp-cols-30{display:grid; grid-template-columns:30ch 1fr; gap:64px; align-items:start}
.pp-cols-band{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:end}
.pp-formulary{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:36px;
  background:#e6e2dd; border:1px solid #e6e2dd; border-radius:4px; overflow:hidden}
@media (max-width:1020px){
  .pp-formulary{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .pp-hero-grid,.pp-hero-grid--sec{grid-template-columns:1fr; gap:26px}
  .pp-walk{grid-template-columns:1fr; gap:36px}
  .pp-cols-30{grid-template-columns:1fr; gap:28px}
  .pp-cols-band{grid-template-columns:1fr; gap:32px; align-items:start}
  .pp-proof{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .pp-formulary{grid-template-columns:1fr}
}

/* the pinned walkthrough column */
.pp-stick-outer{align-self:stretch}
.pp-stickybox{position:sticky; top:7vh; display:flex; flex-direction:column; gap:20px}
.pp-panels{position:relative; width:100%; height:62vh}
.pp-obj{padding:24vh 0}
.pp-obj--first{padding:2vh 0 24vh}
.pp-obj--last{padding:24vh 0 6vh}
@media (max-width:900px){
  /* stacked: media above text, spacers collapse, nothing pins */
  .pp-stickybox{position:static}
  .pp-panels{height:52vh}
  .pp-obj,.pp-obj--first{padding:64px 0 0}
  .pp-obj--last{padding:64px 0 8px}
}

/* trust / workflow ruled rows */
.pp-row-18{display:grid; grid-template-columns:minmax(0,18ch) minmax(0,1fr); gap:28px}
.pp-row-12{display:grid; grid-template-columns:minmax(0,12ch) minmax(0,1fr); gap:24px}
@media (max-width:560px){
  .pp-row-18{grid-template-columns:1fr; gap:6px}
}

/* expandable rows: real buttons; JS collapses at init, so a no-JS visitor
   simply sees the content expanded rather than unreachable */
.pp-toggle{display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px; align-items:start;
  width:100%; padding:14px 0; margin:0; border:0; background:none; cursor:pointer;
  text-align:left; font:inherit; font-size:16.5px; line-height:1.55; color:#4b4842}
.pp-toggle .pp-ticon{width:22px; height:22px; border:1px solid #d8d3cb; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
  transition:transform .3s cubic-bezier(.4,0,.2,1)}
.pp-toggle[aria-expanded="true"] .pp-ticon{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){
  .pp *{transition:none !important}
}

/* closing CTA band (page content, sits above the site footer) */
.pp-ctaband{background:#14140f; color:#fdfcfc; padding:72px 40px}
.pp-ctaband-in{max-width:1360px; margin:0 auto; display:flex; justify-content:space-between;
  align-items:flex-end; gap:48px; flex-wrap:wrap}
@media (max-width:760px){ .pp-ctaband{padding:48px 20px} }

/* sticky section headers (security controls, product trust) */
.pp-stick40{position:sticky; top:40px}
@media (max-width:900px){ .pp-stick40{position:static} }