/*
 * The page builder's kit: what the builder's blocks (Admin Console → Website → Pages, the page
 * builder) are made of. Linked only on pages served from a build that uses it.
 *
 * Every class is namespaced `evpb-`, so nothing here can restyle a page's own elements, and every
 * colour is one of the pages' shared :root variables (identical on every marketing page), so new
 * elements match the design. The buttons copy the site's own: .btn-primary, .btn-secondary,
 * .btn-pop and the white button of the dark CTA bands. The devices break at the pages' own widths:
 * 960px (tablet) and 720px (phone).
 */

.evpb-section { padding: 72px 32px; }
.evpb-section--soft { background: var(--bg-soft); }
.evpb-section--tint { background: var(--navy-tint); }
.evpb-section--navy { background: var(--navy); color: #fff; }
.evpb-wrap { max-width: 1180px; margin: 0 auto; }

.evpb-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
.evpb-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.evpb-col { min-width: 0; }

.evpb-heading { color: var(--navy); font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1.2; margin-bottom: 16px; }
.evpb-section--navy .evpb-heading { color: #fff; }
.evpb-text { color: var(--text-light); font-size: 17px; line-height: 1.7; margin-bottom: 16px; }
.evpb-section--navy .evpb-text { color: rgba(255, 255, 255, 0.85); }

.evpb-btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1.4;
  padding: 15px 32px; border-radius: 10px; border: 1.5px solid transparent; cursor: pointer;
  font-family: inherit; text-align: center;
}
.evpb-btn--primary { background: var(--gradient); color: #fff; }
.evpb-btn--primary:hover { opacity: 0.92; }
.evpb-btn--secondary { color: var(--navy); border-color: #c9d6e4; background: rgba(255, 255, 255, 0.6); }
.evpb-btn--secondary:hover { border-color: var(--navy); }
.evpb-btn--pop { background: var(--pop); color: #fff; font-weight: 700; }
.evpb-btn--pop:hover { filter: brightness(0.95); }
.evpb-btn--white { background: #fff; color: var(--navy); }
.evpb-btn--white:hover { background: var(--navy-tint); }
.evpb-btn:focus-visible { outline: 2px solid var(--pop); outline-offset: 3px; }

.evpb-image { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.evpb-spacer { height: 48px; }
.evpb-divider { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }

.evpb-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--navy); }
.evpb-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 960px) {
  .evpb-cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evpb-section { padding: 56px 24px; }
}

@media (max-width: 720px) {
  .evpb-cols, .evpb-cols--3 { grid-template-columns: 1fr; gap: 24px; }
  .evpb-section { padding: 44px 20px; }
  .evpb-heading { font-size: 28px; }
  .evpb-btn { display: block; width: 100%; }
}