/* =============================================================================
   Pep Research -- the home page (/), Pepvela refocus 2026-10-11.
   A concise hero with three vials, the trust strip (supported facts only),
   featured products from the live catalog, testing and transparency, three
   articles from the pepvela.com research library and a navy call to action.
   ============================================================================= */

/* ---- hero ---- */
.pr-hero { position: relative; overflow: hidden; background: var(--brand-hero-wash); border-bottom: 1px solid var(--brand-line); }
.pr-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 80px); }
.pr-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pr-hero__copy h1 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.04; letter-spacing: -0.035em; color: var(--brand-navy); }
.pr-hero__lead { max-width: 46ch; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.6; color: var(--brand-ink-2); }
.pr-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }

.pr-hero__stage { position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: end; gap: 0; min-height: clamp(300px, 34vw, 460px); padding: 0 4%; }
.pr-hero__stage::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 58%; border-radius: var(--brand-radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.85) 100%), linear-gradient(180deg, #EEF1FC 0%, #E3E8F8 100%); border: 1px solid var(--brand-line); }
.pr-hero__stage::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 7%; height: 5%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(11, 22, 64, 0.22), rgba(11, 22, 64, 0)); }
.pr-hero__vial { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 9%; text-decoration: none; border-radius: var(--brand-radius); }
.pr-hero__vial img { width: auto; height: clamp(200px, 23vw, 300px); max-width: 100%; object-fit: contain; transition: transform 0.3s var(--brand-ease); }
.pr-hero__vial--c img { height: clamp(250px, 29vw, 380px); }
.pr-hero__vial:hover img { transform: translateY(-4px); }
.pr-hero__tag { padding: 5px 10px; border-radius: var(--brand-radius-pill); background: rgba(255, 255, 255, 0.92); border: 1px solid var(--brand-line); color: var(--brand-navy); font: 650 12.5px/1.2 var(--brand-font); white-space: nowrap; box-shadow: var(--brand-shadow); }
.pr-hero__vial:focus-visible { outline: 2px solid var(--brand-focus); outline-offset: 4px; }

/* ---- trust strip ---- */
.pr-trust { padding: clamp(24px, 3.4vw, 36px) 0; border-bottom: 1px solid var(--brand-line); }
.pr-trust .pvb-trust { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) { .pr-trust .pvb-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pr-trust .pvb-trust { grid-template-columns: 1fr; } }

/* ---- sections ---- */
.pr-sec { padding: clamp(56px, 7vw, 96px) 0; }
.pr-sec--tint { background: var(--brand-surface); border-block: 1px solid var(--brand-line); }
.pr-sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.pr-sec__head > div { display: flex; flex-direction: column; gap: 8px; }
.pr-sec__head h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.025em; }

/* ---- testing and transparency ---- */
.pr-testing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.pr-testing__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pr-testing__copy h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.025em; }
.pr-testing__copy p { max-width: 52ch; font-size: 16.5px; line-height: 1.7; color: var(--brand-ink-2); }
.pr-testing__list { display: grid; gap: 12px; }
.pr-testing__list a { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--brand-line); border-radius: var(--brand-radius); background: var(--brand-white); box-shadow: var(--brand-shadow); color: var(--brand-ink-2); text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; }
.pr-testing__list a:hover { border-color: var(--brand-tint-2); box-shadow: var(--brand-shadow-lift); }
.pr-testing__list strong { display: block; font-size: 16px; color: var(--brand-navy); }
.pr-testing__list span span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--brand-muted); }
.pr-testing__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-indigo); }
.pr-testing__icon svg { width: 21px; height: 21px; }
.pr-testing__list .pvb-arrow { color: var(--brand-indigo); }

/* ---- research library ---- */
.pr-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pr-article { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--brand-line); border-radius: var(--brand-radius); background: var(--brand-white); box-shadow: var(--brand-shadow); transition: border-color 0.2s, box-shadow 0.2s; }
.pr-article:hover { border-color: var(--brand-tint-2); box-shadow: var(--brand-shadow-lift); }
.pr-article__cat { font: 700 12px/1.3 var(--brand-font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-indigo); }
.pr-article h3 { font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; }
.pr-article h3 a { color: var(--brand-navy); text-decoration: none; }
.pr-article h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pr-article h3 a:focus-visible { outline: none; }
.pr-article:focus-within { outline: 2px solid var(--brand-focus); outline-offset: 3px; }
.pr-article .pvb-link { margin-top: auto; }

/* ---- call to action ---- */
.pr-cta { padding: 0 0 clamp(16px, 3vw, 32px); }
.pr-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.pr-band h2 { margin-top: 8px; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.025em; }
.pr-band p:not(.pvb-eyebrow) { margin-top: 10px; max-width: 52ch; font-size: 16px; line-height: 1.6; }
.pr-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 960px) {
  .pr-hero__grid, .pr-testing { grid-template-columns: 1fr; }
  .pr-hero__stage { max-width: 560px; width: 100%; margin: 0 auto; }
  .pr-articles { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pr-hero__stage { padding: 0; min-height: 0; }
  .pr-hero__vial img { height: 170px; }
  .pr-hero__vial--c img { height: 210px; }
  .pr-hero__tag { font-size: 11px; padding: 4px 8px; white-space: normal; text-align: center; }
  .pr-hero__actions .pvb-btn, .pr-band__actions .pvb-btn { width: 100%; }
  .pr-testing__list a { grid-template-columns: 40px 1fr; }
  .pr-testing__list .pvb-arrow { display: none; }
}