/* =====================================================================
   Ad Landing Page — Variant 6 ("The right leave, for every employee,
   on the record" — ensure-leave-compliance). Loaded *after* the shared
   ad-landing-page.css; only the pieces unique to V6 live here: the
   report + employee-profile hero collage, the "Balances" accrual mock,
   and the "Leave types" depth mock. Everything else is inherited from
   the shared stylesheet. Scoped to .vt-ad-lp--v6 so it never affects
   the other variants.
   ===================================================================== */

/* ============================ HERO COLLAGE ========================== */
/* The leave report anchors the back-right; the employee profile card
   floats front-left over it. Both transparent PNGs. */
/* A slightly wider text column than the other variants so the long
   headline breaks into three lines instead of four. */
.vt-ad-lp--v6 .alp-hero-grid--v6 { grid-template-columns: 0.92fr 1.08fr; gap: 40px; }
.vt-ad-lp--v6 .alp-collage-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 76%; /* reserves the collage height (children are absolute) */
}
.vt-ad-lp--v6 .alp-collage-report {
  position: absolute; top: 4%; right: 0; width: 78%; height: auto;
  border-radius: 14px; z-index: 1;
  filter: drop-shadow(0 30px 60px rgba(40, 24, 83, 0.18));
}
.vt-ad-lp--v6 .alp-collage-user {
  position: absolute; bottom: 0; left: 0; width: 46%; height: auto;
  border-radius: 14px; z-index: 2;
  filter: drop-shadow(0 26px 48px rgba(40, 24, 83, 0.24));
}

/* ==================== BENEFIT MOCK 0 — BALANCES ===================== */
/* Per-leave-type progress bars that grow in from the left when the
   mock becomes active. */
.vt-ad-lp--v6 .bm-bal-list { display: flex; flex-direction: column; gap: 12px; }
.vt-ad-lp--v6 .bm-bal-head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px;
}
.vt-ad-lp--v6 .bm-bal-name {
  font-weight: 500; font-size: 13px; line-height: 18px; letter-spacing: -0.2px;
  color: var(--vt-fg-1);
}
.vt-ad-lp--v6 .bm-bal-left { font-weight: 400; font-size: 12px; line-height: 16px; color: var(--vt-fg-3); }
.vt-ad-lp--v6 .bm-bal-left b { font-weight: 600; color: var(--vt-fg-1); }
.vt-ad-lp--v6 .bm-bal-track {
  height: 7px; border-radius: 9999px; background: var(--vt-border); overflow: hidden;
}
.vt-ad-lp--v6 .bm-bal-fill {
  height: 100%; border-radius: 9999px; transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .vt-ad-lp--v6 .bm-bal-fill.bm-grow-x { animation: alpBmGrowX 0.9s var(--vt-ease) both; }
}
@keyframes alpBmGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ===================== BENEFIT MOCK 3 — DEPTH ======================= */
/* "Leave types" list: each row carries a rule pill, and one row at a
   time is gently highlighted (cycled by the V6 script). */
.vt-ad-lp--v6 .bm-type-row {
  transition: background .45s var(--vt-ease), border-color .45s var(--vt-ease);
}
.vt-ad-lp--v6 .bm-type-row.is-hi {
  background: var(--vt-violet-100);
  border-color: var(--vt-violet-200);
}
.vt-ad-lp--v6 .bm-type-name { flex: 1; }
.vt-ad-lp--v6 .bm-type-rule {
  font-weight: 500; font-size: 11px; line-height: 16px; letter-spacing: -0.1px;
  color: var(--vt-violet); background: var(--vt-violet-100);
  border-radius: 9999px; padding: 3px 10px; white-space: nowrap;
}

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