/* ─────────────────────────────────────────────────────────────────────────
   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;
}

/* ── Bigger devices: give the media the LARGER hero column so the looped video
   content reads clearly. cleanup.css (JS-injected last) sets the effective
   desktop grid to `minmax(0,.9fr) minmax(380px,.72fr)` — media was the NARROW
   column (~490px → tiny mockups). `html body` specificity + the ≥981px gate
   out-cascade it and flip media to the dominant column. Scoped to two-column
   desktop only; ≤980 stays single-column (cleanup's 1fr). ── */
@media (min-width: 981px) {
  html body.qf-wft .hero-grid {
    /* width:100% forces the grid to FILL its 1300px max-width — without it the
       fr tracks shrank to content (~1180px total), starving both columns:
       the H1 wrapped to 6 lines and the device video rendered small. */
    width: 100% !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.12fr) !important;
    gap: clamp(48px, 3vw, 60px) !important;
    align-items: center !important;
  }
  /* Cap the copy content so its longest lines end well left of the device
     cluster (no collision) — but wide enough that the H1 no longer over-wraps. */
  html body.qf-wft .hero-copy { max-width: 560px !important; }
}

/* Laptop — reuse the `.qf-browser` window chrome; large, upper-left.
   Desktop mockup enlarged +15% (88% → 101.2% of the media column). Only takes
   effect ≥981px; the ≤980 block below pins it to 100% (in-flow, full column) so
   the bump never overflows the stacked/mobile layout. The stage-laptop recenter
   translate is retuned below (6.8% → -0.6%) so the now-near-full-width laptop
   stays centered in the column instead of overflowing the right edge. */
html body.qf-wft .qf-hero-devices > .qf-hero-laptop {
  position: absolute;
  top: 0;
  left: 0;
  width: 101.2%;
  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: 0%;
  bottom: -3%;
  width: 34.1%; /* mobile mockup enlarged +10% (was 31%); overlay anchored right:0, stays in-column */
  z-index: 2;
}

/* No desktop scale transform. The device pair is now enlarged directly via the
   wider media column + larger laptop/phone percentages, so the old center-right
   scale(1.2) is gone — it was what pushed the laptop left into the H1 (collision)
   and off-screen at tablet (clip). Size now comes from layout, not paint scale,
   which keeps the mockups crisp and the copy clear. */

/* Tablet (641–980px) — single-column stack (cleanup's 1fr). No scale (avoids the
   off-screen clip); the device cluster fills a wide, centered media box so the
   mockups stay large. Centered so laptop + phone both sit inside the viewport. */
@media (min-width: 641px) and (max-width: 980px) {
  html body.qf-wft .visual-flow.qf-hero-media {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── OVERLAP FIX — applies across the ENTIRE single-column range (≤980px). ──
   The hero grid collapses from two columns to one at ≤980px (cleanup.css
   `@media (max-width:980) .hero-grid { grid-template-columns: 1fr }`), NOT ≤640.
   `.qf-hero-devices` reserves `aspect-ratio: 1600/1046`, but the laptop's real
   height is the `.qf-browser` chrome bar PLUS the 1600/1046 video, so the
   absolutely-positioned `.qf-hero-laptop` overflowed the wrapper's bottom by
   ~55px. On the two-column desktop (≥981) that overflow lands in empty space in
   the right grid column (harmless); once the hero is stacked it ate the gap down
   to the next section (14–33px), and in the ≤640 reorder — where the media sits
   between the H1 and the lead — it landed directly on the lead text. Take the
   laptop IN-FLOW so the wrapper sizes to its true height and everything below it
   always clears; lift the phone overlay inside the now-shorter wrapper. The
   companion `stage-laptop` transform reset lives in the swap block below. */
@media (max-width: 980px) {
  html body.qf-wft .visual-flow.qf-hero-media > .qf-hero-devices {
    aspect-ratio: auto !important;
    height: auto !important;
  }
  html body.qf-wft .qf-hero-devices > .qf-hero-laptop {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  html body.qf-wft .qf-hero-devices > .qf-hero-vphone {
    bottom: 8% !important;
  }
}

/* Mobile (≤640px) — the hero reflows to a single column (title → media → lead).
   Keep the laptop+phone composition but let it fill the column and enlarge the
   two devices so their looped content is legible; no scale transform; lighter
   shadow. The grid column is min(94%, 100vw−24px) → 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;
  }
  /* Slightly larger phone overlay on the narrowest screens (enlarged +10%: 34% → 37.4%). */
  html body.qf-wft .qf-hero-devices > .qf-hero-vphone {
    width: 37.4% !important;
    right: 0% !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   HERO SWAP CHOREOGRAPHY (driven by landing-hero-swap.js)

   The laptop and phone tell one story via a foreground/background depth swap:
   laptop first (drop in a rate sheet → AI accepts + processes it), then it
   slides back + dims while the phone scales up into the foreground and runs the
   live customer calculator, then it swaps back and loops. The JS toggles
   .stage-laptop / .stage-phone on .qf-hero-devices--video; these rules give each
   device its front vs. back pose and animate between them. Without the JS the
   base rules above still render the static side-by-side layout (no blank hero).
   ───────────────────────────────────────────────────────────────────────── */
html body.qf-wft .qf-hero-devices--video > .qf-hero-laptop,
html body.qf-wft .qf-hero-devices--video > .qf-hero-vphone {
  transition: transform .9s cubic-bezier(.45, .05, .2, 1), opacity .6s ease, filter .6s ease;
  will-change: transform, opacity;
}
/* Grow toward the frame's centre, not each element's own corner. */
html body.qf-wft .qf-hero-devices--video > .qf-hero-laptop { transform-origin: 32% 42%; }
html body.qf-wft .qf-hero-devices--video > .qf-hero-vphone { transform-origin: 88% 58%; }

/* STAGE 1 — laptop in front, alone. The phone is fully hidden (opacity 0), not
   shown as a blurred card behind the desktop: keeping only the sharp desktop in
   the initial state reads cleaner. The phone fades + scales in only when it
   becomes the focus (stage-phone). */
html body.qf-wft .qf-hero-devices--video.stage-laptop > .qf-hero-laptop {
  /* Laptop is the sole focus now (the phone is hidden in this stage), so centre
     it in the media box instead of leaving it in the top-left where it used to
     sit beside the phone. translate is in % of the laptop's own size; the laptop
     is now 101.2% wide at left:0 (enlarged +15%), so -0.6% of its width recentres
     it to sit flush in the column (was +6.8% back when it was 88% wide). Applies
     ≥981px only; the ≤980 block below resets this to `transform: none`. */
  z-index: 3; transform: translate(-0.6%, 12%); opacity: 1; filter: none;
}
html body.qf-wft .qf-hero-devices--video.stage-laptop > .qf-hero-vphone {
  z-index: 1; transform: translate(15%, 7%) scale(.72); opacity: 0;
  filter: none; pointer-events: none;
}

/* STAGE 2 — phone in front, enlarged ~20% (scale .98 → 1.18) so the on-screen
   calculator content is clearly legible; laptop shrinks to a small, dimmed,
   blurred card behind the top-left (the one background-blur we keep). */
html body.qf-wft .qf-hero-devices--video.stage-phone > .qf-hero-vphone {
  z-index: 3; transform: translate(-92%, -7%) scale(1.18); opacity: 1; filter: none;
}
html body.qf-wft .qf-hero-devices--video.stage-phone > .qf-hero-laptop {
  /* Tuck the dimmed background laptop to the RIGHT (behind the phone) instead of
     letting it drift left toward the copy — it should sit behind the focused
     phone, never encroaching on the headline. */
  z-index: 1; transform: translate(24%, -8%) scale(.58); opacity: .32;
  filter: blur(2px) saturate(.88);
}

/* Across the whole single-column range (≤980px) the laptop is now IN-FLOW (see
   the overlap-fix block above). The desktop lone-laptop pose recenters it with
   `translate(6.8%, 12%)` to fill a TALL desktop media box; once stacked, that 12%
   downward shift only pushes the laptop toward whatever is below it (the lead at
   ≤640, the next section in the 641–980 band). Reset it so the laptop rests
   cleanly at the top of its auto-height wrapper. Placed after the base pose so it
   out-cascades it at equal specificity when the media query matches. */
@media (max-width: 980px) {
  html body.qf-wft .qf-hero-devices--video.stage-laptop > .qf-hero-laptop {
    transform: none;
  }
}

/* Mobile (≤640px): the hero is a single narrow column, so use a gentler swap
   with smaller offsets/scales that never push a device outside the column. */
@media (max-width: 640px) {
  html body.qf-wft .qf-hero-devices--video.stage-laptop > .qf-hero-vphone {
    transform: translate(6%, 5%) scale(.76);
  }
  html body.qf-wft .qf-hero-devices--video.stage-phone > .qf-hero-vphone {
    transform: translate(-82%, 3%) scale(1.10);
  }
  html body.qf-wft .qf-hero-devices--video.stage-phone > .qf-hero-laptop {
    transform: translate(-2%, -8%) scale(.64); opacity: .32; filter: blur(2px) saturate(.88);
  }
}

/* ── Hero DESKTOP (laptop) mockup: enlarge the frame. ≥981px only — mobile untouched. ──
   The laptop video is now a purpose-produced dark loop with its OWN dynamic zoom (punch-in on the
   file drop + the parsed-rate result, pull-back during processing), so no CSS crop-zoom is needed.
   This widens the device column + reclaims the dead margin at wide viewports so the mockup reads big
   and prominent, and adds vertical room so the taller frame clears the section below. */
@media (min-width: 981px) {
  html body.qf-wft .hero-grid {
    /* OVERLAP FIX: the prior over-push (min(1720px,96vw) + .8fr/1.3fr) widened the
       media column so the laptop's left edge — and its 60px-blur drop-shadow — crept
       into `.hero-copy`, leaving only ~43px box gap (the body paragraph sat inside the
       laptop's shadow) and 1–5px of horizontal scroll from the hidden phone poking past
       the viewport. Pull the media column back a touch (.83fr/1.25fr), trim the cap to
       min(1700px,95.5vw), and — the key lever — raise the column `gap` to
       clamp(80px,5vw,120px) (on the 8px ramp). That pushes the laptop right so its gap to the copy is
       ≥67px at every desktop width (shadow fully clears the text) with NO h-scroll, while
       the laptop stays large (~55% vw mid-range, its natural max ~972px at 1920). The
       bigger gap also pulls the media column narrower, so the hidden phone no longer
       overflows the right edge — killing the h-scroll too. */
    max-width: min(1700px, 95.5vw) !important;
    grid-template-columns: minmax(0, 0.83fr) minmax(0, 1.25fr) !important;
    gap: clamp(80px, 5vw, 120px) !important;
  }
  html body.qf-wft .hero-copy { max-width: 535px !important; }
  html body.qf-wft .hero.visual-hero { padding-bottom: clamp(48px, 6vw, 120px) !important; }
}