/* ============================================================================
   Benchmark Email × Playable Video integration page — page-specific styles
   Load this AFTER colors_and_type.css and site.css (it uses their CSS variables).
   ============================================================================ */

/* Benchmark × Playable lockup. */
.pv-lockup { display:flex; align-items:center; gap:14px; margin:0 0 22px; }
.pv-lockup__bmk { height:28px; width:auto; display:block; }
.pv-lockup__x { font-family:var(--font-body); font-size:20px; color:var(--be-concrete); font-weight:500; }
.pv-lockup__pv { height:52px; width:auto; display:block; margin-left:-4px; }

/* Hero video frame (Wistia embed). */
.pv-hero-video {
  border-radius:var(--radius-lg); overflow:hidden; border:2px solid var(--be-night-rider);
  box-shadow:0 12px 32px rgba(60,36,127,.18); background:#000;
}

/* Account note banner. */
.be-note { max-width:760px; margin:0 auto; background:var(--be-cloud); border-radius:var(--radius-sm); padding:18px 26px; }
.be-note p { font-family:var(--font-body); font-size:15px; line-height:1.65; color:var(--be-night-rider); margin:0; }
.be-note a { color:var(--be-purple); text-decoration:underline; }

/* How it works — numbered step cards. */
.pv-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1180px; margin:0 auto; }
.pv-step { background:#fff; border:2px solid var(--be-night-rider); border-radius:var(--radius-sm); padding:28px 24px;
display:flex;flex-direction:column;justify-content:space-between;
}
.pv-step__num {
  width:44px; height:44px; border-radius:var(--radius-full); background:var(--be-purple);
  color:#fff; font-family:var(--font-display); font-size:20px; font-weight:500;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.pv-step__title { font-family:var(--font-display); font-size:21px; font-weight:500; color:var(--be-night-rider); margin:0 0 8px;height:67.2px; }
.pv-step__body { font-family:var(--font-body); font-size:15px; line-height:1.7; color:var(--be-rainy-day); margin:0; }
 /*Step screenshot. */
.pv-step__shot {
  margin-top:20px; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top;
  border:2px solid var(--be-night-rider); border-radius:var(--radius-sm); display:block;
  background:var(--be-soft-purple);
}


/* Special pricing band. */
.pv-pricing { max-width:1080px; margin:0 auto; background:var(--be-sherpa); border-radius:var(--radius-lg); padding:48px 40px; text-align:center; }

@media (max-width:960px) {
  .pv-steps { grid-template-columns:1fr; }
}