/* ── How it works — horizontal desktop relayout ──────────────────────────────
   Desktop (≥900px): the four .hiw-card steps sit side-by-side in ONE row
   (equal columns, equal heights), and WITHIN each card the media slot sits on
   TOP with the numbered copy BELOW it (single-column card grid — overrides the
   media-left / text-right 2-col card layout from landing-home-fixes.css).
   Below 900px nothing here applies, so tablet/mobile keep their existing
   stacked behavior exactly as before. Loaded LAST so equal-specificity
   !important rules win over landing-home-fixes.css. ─────────────────────── */
@media (min-width: 900px) {
  body.qf-wft.landing-v2 .simple-steps.hiw-stack {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr;
    gap: 16px !important;
    align-items: stretch !important;
  }
  body.qf-wft.landing-v2 .simple-step.hiw-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr;
    align-items: start !important;
    align-content: start;
    gap: 16px !important;
    padding: 16px !important;
    height: 100%;
    min-width: 0;
  }
  /* Media stays the uniform fixed-aspect slot; just make sure it can never
     exceed its (narrower) column. */
  body.qf-wft.landing-v2 .hiw-card .hiw-media {
    max-width: 100% !important;
  }
  /* Narrower column → let copy use the full card width and size down a hair. */
  body.qf-wft.landing-v2 .hiw-card .hiw-body strong {
    font-size: 17px !important;
  }
  body.qf-wft.landing-v2 .hiw-card .hiw-body p {
    max-width: none !important;
    font-size: 14px !important;
  }
}

/* ── Contrast fix: step-number pills ─────────────────────────────────────────
   .hiw-num used color: var(--accent), which computes to cobalt #0d3cfc on this
   page (body.qf-wft token in landing-wefixtrades-cleanup.css, !important) —
   ~2.8:1 on the dark background. Number goes light periwinkle (>=4.5:1); the
   subtle accent wash + ring from landing-home-fixes.css stay as-is. */
body.qf-wft.landing-v2 .hiw-card .hiw-num {
  color: #9aaeff !important;
}

/* ── Media normalization: all four slots share the same horizontal frame ─────
   The slot is already a uniform 16/10 box, but object-fit: contain let the
   portrait step-2 clip render as a tall pillar-boxed phone. Fill the frame
   instead, and tune the portrait clip so the price/total area stays visible. */
body.qf-wft.landing-v2 .hiw-card .hiw-media > img,
body.qf-wft.landing-v2 .hiw-card .hiw-media > video {
  object-fit: cover !important;
  object-position: 50% 50%;
}
/* Step 2's 1.28:1 quote clip in the 1.6:1 slot crops ~20% of its height.
   The clip's key content is the filled form + the "Get instant quote" CTA at
   the bottom (no price/total frame exists in this clip) — bias the crop down
   so the CTA stays in frame; only the top dropdown (already clipped in the
   source) loses a slice. */
body.qf-wft.landing-v2 .hiw-card .hiw-media > video[poster*="qf-flow-quote"] {
  object-position: 50% 62% !important;
}