/* ─────────────────────────────────────────────────────────────────────────
   Phase HR — Hero redesign (loaded LAST, after landing-home-fixes, so these
   overrides win). Four annotated fixes from Alex:
     1. Lift the eyebrow higher (top-align the copy, tighten the rhythm).
     2. Premium H1 typeface — self-hosted Bricolage Grotesque display face.
     3. Remove the fake browser chrome; show ONE large, legible widget.
     4. Align the "See how it works" link with the "Start free" button.
   Desktop = title beside media. Mobile (<=640px) = title -> media -> subtitle,
   full-width, eyebrow top-left. All spacing on the 8px ramp; no raw #fff/#000.
   ───────────────────────────────────────────────────────────────────────── */

/* Fix 2 — premium display face for the hero headline. Uses the site's global
   self-hosted Satoshi (weight 900), already declared via @font-face in style.css
   and quotefleet-font-system.css — no separate face needed here. */

/* ── Fix 1 — lift the eyebrow: top-align the copy against the tall media so the
   kicker sits high in the hero, with an intentional gap down to the H1. ── */
body.qf-wft .hero-grid {
  align-items: start !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr) !important;
  gap: clamp(48px, 5vw, 80px) !important;
}

body.qf-wft .hero-copy {
  align-self: start !important;
  padding-top: 4px !important;
}

body.qf-wft .hero-copy .eyebrow {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

/* ── Fix 2 — apply the site's premium Satoshi face to the headline at its
   heaviest self-hosted weight (900). Trim the desktop size from 84px down to
   ~68px so the title wraps to fewer, tighter lines while staying bold. The
   `html` prefix lifts specificity above landing-wefixtrades-cleanup.css's
   `body.qf-wft .hero h1 { font-size: clamp(...84px) !important }`, which
   landing-motion.js injects AFTER this sheet's static <link>. ── */
html body.qf-wft .hero h1 {
  font-family: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(44px, 5.2vw, 68px) !important;
  font-optical-sizing: auto;
  letter-spacing: -0.035em !important;
  line-height: 1.02 !important;
  margin-top: 0 !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ── Fix 3 — bigger, clean widget. The browser chrome (traffic-light dots +
   fake address bar) was baked into the old cluster PNG; qf-hero-widget.png is
   the same product capture with that chrome removed and the top corners
   rounded into a clean app frame on a transparent background. Enlarge it and
   ground it with a soft drop-shadow that hugs the frame's alpha (no box). ── */
body.qf-wft .visual-flow.qf-hero-media {
  max-width: 820px !important;
  width: 100% !important;
  justify-self: stretch !important;
}

body.qf-wft .visual-flow.qf-hero-media > img {
  width: 100% !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 32px 60px rgba(0, 0, 0, 0.55)) !important;
}

/* ── Composite hero mockup (desktop right side). One large laptop+phone-on-rock
   render. Its rectangular edges are feathered into the hero background with a
   4-edge alpha mask (two intersecting linear gradients) so there are NO hard
   lines — the image dissolves into the hero and reads as one piece. No hard
   drop-shadow (the fade IS the edge treatment). Mobile keeps the existing
   widget image; the composite is desktop-only. ── */
html body.qf-wft .visual-flow.qf-hero-media > .qf-hero-img-mobile { display: none !important; }
html body.qf-wft .visual-flow.qf-hero-media > .qf-hero-img-desktop {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, var(--ink) 13%, var(--ink) 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, var(--ink) 11%, var(--ink) 89%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, var(--ink) 13%, var(--ink) 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, var(--ink) 11%, var(--ink) 89%, transparent 100%);
  mask-composite: intersect;
}

/* ── Fix 4 — align the CTA row flush under the eyebrow/H1/lead (left edge), and
   vertically-center "See how it works" against the "Start free" button. The base
   rule (style.css) is `inline-flex; justify-content:center`, which pushed the row
   ~92px right of the copy; force flex-start + full-width so its left edge = h1.x. ── */
body.qf-wft .hero-cta {
  display: flex !important;
  width: 100% !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 24px !important;
}

body.qf-wft .hero-cta .demo-link {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  gap: 8px !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

body.qf-wft .hero-cta .demo-link .arr {
  display: inline-flex !important;
  align-items: center !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile (<=640px): title -> media -> subtitle, full-width, eyebrow top-left.
   display:contents promotes the copy's children into the hero-grid flex flow
   so the media can be ordered between the H1 and the lead without moving DOM.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.qf-wft .hero {
    text-align: left !important;
  }

  /* `html body` specificity bump so this actually wins the mobile hero gap over
     landing-wefixtrades-cleanup.css's equal-specificity `gap: clamp(42px…)`
     (JS-injected after this static sheet). 24px = a clean, intentional rhythm. */
  html body.qf-wft .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
    width: min(92%, calc(100vw - 32px)) !important;
  }

  body.qf-wft .hero-copy {
    display: contents !important;
  }

  body.qf-wft .hero-copy .eyebrow {
    order: 1;
    margin: 0 0 4px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  html body.qf-wft .hero h1 {
    order: 2;
    margin: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
    /* Sized to wrap to exactly 2 lines on mobile (was clamp(34px,9vw,40px),
       which broke to 3). text-wrap:balance evens the two lines. */
    font-size: clamp(25px, 6.9vw, 31px) !important;
    line-height: 1.08 !important;
    text-wrap: balance !important;
  }

  /* The widget sits directly under the headline, full-width and legible.
     `html body` specificity bump so this out-cascades landing-wefixtrades-
     cleanup.css's equal-specificity `display:none` rule (which JS-injects after
     this now-static <link>), mirroring the .hero h1 fix — keeps the mobile
     widget visible as it was before the static-link change. */
  html body.qf-wft .visual-flow.qf-hero-media {
    order: 3;
    display: block !important;
    max-width: 320px !important;
    width: 100% !important;
    margin: 4px auto !important;
  }

  /* Mobile keeps the compact widget; the desktop composite is hidden here. */
  html body.qf-wft .visual-flow.qf-hero-media > .qf-hero-img-desktop { display: none !important; }
  html body.qf-wft .visual-flow.qf-hero-media > .qf-hero-img-mobile {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    /* The phone mockup already carries a baked-in grounding shadow, so drop the
       base 60px blur drop-shadow here (it added visual dead space + doubled up). */
    filter: none !important;
  }

  /* `html body` bump to zero out cleanup.css's `margin-top: 20px` on the lead,
     which otherwise stacks on top of the grid gap and bloats the space under
     the hero phone. The 24px grid gap alone is the intended breathing room. */
  html body.qf-wft .hero .lead {
    order: 4;
    margin: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  /* CTA reading order on mobile: button → trust microcopy → "See how it works".
     Promote the button + demo-link out of .hero-cta with display:contents so all
     three read as direct siblings in the hero flex flow, letting the trust line
     (order 6-7) sit between the button (5) and the demo-link (8). */
  body.qf-wft .hero-cta {
    display: contents !important;
  }

  body.qf-wft .hero-cta .btn-primary {
    order: 5;
    width: 100% !important;
    margin-top: 8px !important;
  }

  body.qf-wft .hero-cta .demo-link {
    order: 8;
    align-self: flex-start !important;
    justify-content: flex-start !important;
    padding: 4px 0 !important;
    margin-top: 4px !important;
  }

  /* Trust/reassurance lines land after the button and before the demo-link.
     .hero-trial-note is also a .micro-copy, so its rule follows to win the tie. */
  body.qf-wft .hero .micro-copy {
    order: 7;
    text-align: left !important;
  }

  body.qf-wft .hero .hero-trial-note {
    order: 6;
    text-align: left !important;
  }
}