/* ============================================================
   SILK REEL — vz-pane.css (v1.6.3)
   LEFT PANE ONLY — rebuilt from scratch with all-new class names
   (vz-*) and an all-new filename, so no cache layer anywhere can
   ever serve stale rules for it. The right blue pane is styled
   exclusively by app-login.css and is untouched.

   Defence in depth against the "giant logo" failure mode:
   1. Images carry hard width/height HTML attributes.
   2. max-width is enforced here as well.
   3. Even with NO stylesheet at all, the HTML attributes alone
      cap the logo at 150×54 px. The failure is impossible, not
      merely styled away.
   ============================================================ */

.vz-pane {
  position: relative;
  overflow: hidden;
  background: #10141a;
}

.vz-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  display: block;
}

/* subtle bottom shade so the tagline stays readable */
.vz-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .12) 26%, rgba(0, 0, 0, 0) 48%);
}

/* ---- Veriza logo — TOP-LEFT corner, hard-capped ---- */
.vz-mark {
  position: absolute;
  top: 3.7%;               /* owner-tuned in Logo Playground v3 */
  left: 0.1%;
  z-index: 3;
  width: 252px;
  max-width: 252px;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .55));
}

/* ---- Tagline — bottom-left ---- */
.vz-tag {
  position: absolute;
  left: 4.5%;
  bottom: 6%;
  z-index: 3;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}
.vz-tag span { display: block; font-size: 1.02rem; opacity: .95; }
.vz-tag b    { display: block; font-size: 1.65rem; font-weight: 700; margin-top: .15rem; }

@media (max-width: 820px) {
  .vz-mark { width: 170px; max-width: 170px; }  /* scaled proportionally for mobile */
  .vz-tag b { font-size: 1.35rem; }
}