/* ============================================================
   mobile-refresh.css
   Homepage (HomeRefresh) mobile optimisation. Loaded LAST so it
   wins over the layered v1–v20 rules in home-refresh.css without
   editing that fragile history.

   Goals
   1. Kill horizontal overflow and video/CTA overlap.
   2. Right-size the oversized display headlines vs. small media.
   3. Replace the 5-screen stacked "How it works" cards with one
      compact list that fits a single screen.
   4. Tighten section rhythm so the page is far shorter to scroll.

   Primary breakpoint 720px matches the existing homepage mobile
   switch; a few tweaks at 480px for small phones.
   ============================================================ */

/* ==================================================================
   HERO — force single column across the whole tablet/phone range.
   The layered history in home-refresh.css (v1–v20) flip-flops the
   hero grid: an @900/1024 rule sets 1fr, but a LATER rule resets it
   to a 2-column grid with NO mobile override — so on 640–900px the
   headline sits in a narrow left column and the giant display type
   collides with the artwork on the right. We stack it here, up to
   900px (matching the hamburger-nav switch), so copy is on top and
   the artwork sits below it, centered, never overlapping.
   ================================================================== */
@media (max-width: 900px) {
  .home-refresh { overflow-x: clip; }
  .home-refresh section { max-width: 100vw; }

  .hr-hero {
    grid-template-columns: 1fr !important;
    justify-items: start;
    align-content: center;
    gap: 24px !important;
  }
  .hr-hero-copy { max-width: 640px; }
  .hr-hero-art {
    width: 100% !important;
    max-width: 460px;
    margin: 4px auto 0 !important;
    transform: none !important;   /* drop the tilt → no edge clipping */
    order: 2;
  }
  .hr-hero-art::before { display: none !important; }
  .hr-hero-art img { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; }

  /* Demo & feature stages flip to single column here too. Their own
     history only un-columns at <=800px, but the hamburger nav kicks
     in at <=900px — so 800–900px left them as desktop 2-up with the
     copy crushed against the media. Stack copy over media instead. */
  /* Use plain block flow (not flex/grid) so neither the copy column
     nor the CTA inside it can ever be shrunk by a parent track — the
     layered history sets min-height on .hr-demo which, under flex/grid,
     squeezed the copy box shorter than its content and pushed the CTA
     down onto the video. Block flow always grows to fit children. */
  .hr-demo,
  .hr-demo.is-reversed,
  .hr-feature-stage,
  .hr-feature-stage.is-reversed {
    display: block !important;
    min-height: 0 !important;
    padding: 56px 20px !important;
  }
  .hr-demo-copy, .hr-feature-copy { order: 0 !important; display: block !important; height: auto !important; }
  /* ROOT CAUSE of the CTA-over-video overlap: the scroll-reveal
     animation leaves the CTA with transform:translateY(65px) when the
     section is only partially in view, shoving the button down onto the
     dark video panel. Neutralise the reveal transform on mobile so the
     CTA always sits in its natural place inside the copy block. */
  .hr-demo .hr-section-cta,
  .hr-feature-stage .hr-section-cta { transform: none !important; }
  /* High-specificity guard: push the media clearly below the copy/CTA. */
  .home-refresh .hr-demo .hr-demo-video,
  .home-refresh .hr-demo .hr-feature-video,
  .home-refresh .hr-feature-stage .hr-demo-video,
  .home-refresh .hr-feature-stage .hr-feature-video {
    transform: none !important;
    margin-top: 32px !important;
    clear: both;
  }
  .hr-inbox-panel { grid-template-columns: 1fr !important; }
}

@media (max-width: 720px) {
  /* ---- 1. Hero: balance headline vs. artwork --------------------- */
  .hr-hero { padding: 116px 20px 56px !important; gap: 22px !important; }
  .hr-hero h1 { font-size: clamp(46px, 13.5vw, 68px) !important; line-height: .9 !important; margin: 10px 0 20px !important; }
  .hr-lead { font-size: 16px !important; line-height: 1.5; margin-bottom: 26px !important; }
  .hr-hero-art { max-width: 380px; }

  /* ---- 2. Section heads: rein in the giant display type ---------- */
  .hr-section-head { margin-bottom: 30px; padding: 0 20px; }
  .hr-section-head h2 { font-size: clamp(40px, 11vw, 56px) !important; line-height: .92 !important; }
  .hr-section-head > p { font-size: 15px; }

  /* ---- 3. Surface rail: readable vertical cards, no giant drag ---- */
  .hr-rail-section { padding: 64px 0 72px; }
  .hr-rail { gap: 16px; padding: 8px 16px 30px !important; }
  .hr-product-card {
    --surface-card-width: 82vw !important;
    width: var(--surface-card-width) !important;
    min-height: 0 !important;
    padding: 16px !important;
    transform: none !important;      /* drop the rotate → no edge overflow */
    gap: 14px !important;
  }
  .hr-product-card .hr-card-media { height: 210px !important; }
  .hr-product-card .hr-card-copy h3 { font-size: 32px !important; margin-top: 12px !important; }
  .hr-product-card .hr-card-copy p { font-size: 15px !important; margin: 8px 0 12px !important; }
  .hr-card-cta { padding: 11px 12px 11px 16px !important; }

  /* ---- 4. Inbox panel: title no longer overruns the artwork ------ */
  .hr-inbox-section { padding: 28px 14px 56px; }
  .hr-inbox-panel { padding: 26px 20px !important; gap: 22px !important; border-radius: 26px !important; }
  .hr-inbox-copy h2 { font-size: clamp(30px, 8.5vw, 42px) !important; line-height: 1.05 !important; }
  .hr-inbox-copy .hr-kicker { margin-bottom: 14px !important; }

  /* ---- 5. Demo + feature stages: no overlap, tight rhythm -------- */
  .hr-demo,
  .hr-demo.is-reversed,
  .hr-feature-stage,
  .hr-feature-stage.is-reversed {
    min-height: 0 !important;
    padding: 52px 20px !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    align-content: start;
  }
  .hr-demo-copy, .hr-feature-copy { order: 0 !important; }
  .hr-demo-copy h2,
  .hr-feature-copy h2 {
    font-size: clamp(34px, 9.5vw, 48px) !important;
    line-height: 1.04 !important;
    margin: 12px 0 14px !important;
  }
  .hr-demo-copy > p:last-child,
  .hr-feature-copy > p:last-child { font-size: 15.5px !important; line-height: 1.5; }
  .hr-section-cta { margin-top: 20px !important; }

  /* Videos: fixed 16/9 box, cover, never bleed under the copy. */
  .hr-demo-video,
  .hr-feature-video {
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;      /* was rotate(-1deg) → caused clipping */
    border-radius: 20px !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .hr-demo-video video,
  .hr-feature-video video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  /* ---- 6. How it works: swap stacked cards → compact list -------- */
  .hr-steps { padding: 56px 0 60px !important; }
  .hr-step-stage { display: none !important; }   /* hide desktop stacked cards */
  .hr-steps-mobile { display: block; }

  /* ---- 7. Capabilities word list: keep it snug ------------------- */
  .hr-genre { padding: 56px 16px 64px !important; }
  .hr-genre-list button { font-size: 12.5vw !important; line-height: .9 !important; }

  /* ---- 8. Final CTA --------------------------------------------- */
  .hr-final { min-height: 0 !important; padding: 72px 22px !important; }
  .hr-final h2 { font-size: clamp(52px, 16vw, 84px) !important; margin: 14px 0 30px !important; }
}

/* ------------------------------------------------------------------
   How it works — mobile compact list (component)
   Hidden on desktop; shown by the 720px block above.
   ------------------------------------------------------------------ */
.hr-steps-mobile { display: none; }
@media (max-width: 720px) {
  .hr-steps-mobile {
    list-style: none;
    max-width: 520px;
    margin: 4px auto 0;
    padding: 0 18px;
    display: grid;
    gap: 12px;
    position: relative;
    z-index: 2;
  }
  .hr-mstep {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: start;
    gap: 14px;
    padding: 16px 16px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(7, 61, 40, .12);
    border-radius: 16px;
  }
  .hr-mstep-no {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #09281c;
    color: #dffc63;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.03em;
  }
  .hr-mstep-body h3 {
    margin: 2px 0 3px;
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: #06150e;
  }
  .hr-mstep-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #3c5a4b;
  }
  /* Alternate accent so the list reads as distinct steps. */
  .hr-mstep:nth-child(2) .hr-mstep-no { background: #1e7a4d; }
  .hr-mstep:nth-child(3) .hr-mstep-no { background: #0f5a38; }
  .hr-mstep:nth-child(4) .hr-mstep-no { background: #2a8c5a; }
  .hr-mstep:nth-child(5) .hr-mstep-no { background: #09281c; }
}

/* Small phones: shave the largest headlines a touch more. */
@media (max-width: 480px) {
  .hr-hero h1 { font-size: 13vw !important; }
  .hr-section-head h2 { font-size: 10.5vw !important; }
  .hr-product-card { --surface-card-width: 86vw !important; }
}