/* =====================================================================
   Ad Landing Page — Variant 5 ("Your team's time off, sorted in an
   afternoon" — get-setup-quick). Loaded *after* the shared
   ad-landing-page.css; only the pieces unique to V5 live here: the
   Gmail / Teams-calendar / Slack hero collage and the "Connected apps"
   integrations mock. Everything else is inherited from the shared
   stylesheet. Scoped to .vt-ad-lp--v5 so it never affects the other
   variants.
   ===================================================================== */

/* ============================ HERO COLLAGE ========================== */
/* Three transparent PNGs layered into a depth collage: the Teams
   calendar anchors the right, the Gmail notification sits back-left,
   and the Slack auto-approval floats front-left. */
.vt-ad-lp--v5 .alp-hero-grid--v5 { grid-template-columns: 0.78fr 1.22fr; gap: 40px; }
.vt-ad-lp--v5 .alp-collage-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 72%; /* reserves the collage height (children are absolute) */
}
.vt-ad-lp--v5 .alp-collage-gmail {
  position: absolute; top: 4%; left: -4%; width: 60%; height: auto;
  border-radius: 10px; z-index: 1;
  filter: drop-shadow(0 18px 36px rgba(40, 24, 83, 0.14));
}
.vt-ad-lp--v5 .alp-collage-cal {
  position: absolute; top: 15%; right: -4%; width: 82%; height: auto;
  border-radius: 12px; z-index: 2;
  filter: drop-shadow(0 30px 60px rgba(40, 24, 83, 0.18));
}
.vt-ad-lp--v5 .alp-collage-slack {
  position: absolute; bottom: 0; left: 2%; width: 50%; height: auto; z-index: 3;
  filter: drop-shadow(0 26px 48px rgba(40, 24, 83, 0.24));
}

/* ================= BENEFIT MOCK 0 — CONNECTED APPS ================== */
/* 3x2 grid of integration tiles; one tile at a time is gently
   highlighted (cycled by the V5 script). */
.vt-ad-lp--v5 .bm-int-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.vt-ad-lp--v5 .bm-int-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border-radius: 10px;
  border: 1px solid var(--vt-border); background: #fff;
  transition: background .4s var(--vt-ease), border-color .4s var(--vt-ease);
}
.vt-ad-lp--v5 .bm-int-tile.is-hi {
  background: var(--vt-violet-100);
  border-color: var(--vt-violet-200);
}
.vt-ad-lp--v5 .bm-int-tile img { height: 24px; width: 24px; object-fit: contain; }
.vt-ad-lp--v5 .bm-int-name {
  font-weight: 500; font-size: 10px; line-height: 14px; letter-spacing: -0.1px;
  color: var(--vt-fg-3);
}

/* ============================= RESPONSIVE =========================== */
@media (max-width: 980px) {
  .vt-ad-lp--v5 .alp-hero-grid--v5 { grid-template-columns: 1fr; gap: 40px; }
  .vt-ad-lp--v5 .alp-collage-wrap { max-width: 520px; margin: 0 auto; }
}