/* ─────────────────────────────────────────────────────────────────────────
   Hero device pair — TWO looping product videos framed as a laptop + phone,
   replacing the old static composite WebP. The wrapper KEEPS the class
   `.qf-hero-devices` so the frame + dotted-grid layers (landing-frame.css) keep
   sitting correctly behind it (z-index 1 over the ::before dot field), and it
   carries the shared soft drop-shadow + the desktop scale(1.2) origin center-
   right. Loaded LAST so it out-cascades the earlier hero sheets. Phone bezel
   lives in landing-hero-phone.css (repurposed retired bezel).
   ───────────────────────────────────────────────────────────────────────── */

/* Wrapper — reserves the same 1600×1046 (1.53:1) box the composite used so the
   hero grid geometry is unchanged; positions the two device frames; grounds the
   whole group with ONE soft drop-shadow (paint only → never any layout / scroll). */
html body.qf-wft .visual-flow.qf-hero-media > .qf-hero-devices {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1600 / 1046 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 32px 60px rgba(0, 0, 0, 0.5)) !important;
}

/* Laptop — reuse the `.qf-browser` window chrome; large, upper-left. */
html body.qf-wft .qf-hero-devices > .qf-hero-laptop {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  z-index: 1;
}
/* Drop the component's own heavy drop-shadow so the wrapper's shadow leads
   (avoids a doubled shadow on the grouped devices). */
html body.qf-wft .qf-hero-devices > .qf-hero-laptop > .qf-browser {
  filter: none !important;
}

/* Phone — overlaps the bottom-right corner of the laptop, in front of it. Kept
   inside the wrapper's right edge (right:2%, width:25%) so the desktop
   scale(1.2) origin center-right never pushes it past the viewport. */
html body.qf-wft .qf-hero-devices > .qf-hero-vphone {
  position: absolute;
  right: 2%;
  bottom: -2%;
  width: 25%;
  z-index: 2;
}

/* Desktop only — 20% larger, anchored center-right: grows left + up/down into
   the hero's whitespace while the right edge stays anchored inside the viewport.
   transform scales the paint, not the layout box → no reflow, no page scroll. */
@media (min-width: 641px) {
  html body.qf-wft .visual-flow.qf-hero-media > .qf-hero-devices {
    transform: scale(1.2) !important;
    transform-origin: center right !important;
  }
}

/* Mobile (≤640px) — the hero reflows to a single column (title → media → lead).
   Keep the same laptop+phone composition, scaled down to the column width
   (mirrors how the old composite behaved); no scale transform; lighter shadow.
   The grid column is min(92%, 100vw−32px) → stays inside the viewport. */
@media (max-width: 640px) {
  html body.qf-wft .visual-flow.qf-hero-media {
    max-width: none !important;
  }
  html body.qf-wft .visual-flow.qf-hero-media > .qf-hero-devices {
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45)) !important;
  }
}