/* =========================================================
   FLY HOW IT WORKS — CARD 03 MOBILE FIT V65.12

   Preserves V65.11's equal compact mobile card height.
   Only compacts Card 03's INTERNAL spacing/typography so the
   third FLY is fully visible instead of being clipped.
   ========================================================= */

@media (max-width: 720px) {

  /* Do NOT change the V65.11 outer card height. */
  .stepsCarouselV65__typesCard{
    overflow:hidden !important;
  }

  /* Card 03 heading block gets a tighter mobile rhythm only. */
  .stepsCarouselV65__typesCard .howNum{
    margin-bottom:8px !important;
  }

  .stepsCarouselV65__typesCard .howTitle{
    margin-top:0 !important;
    margin-bottom:12px !important;
    font-size:clamp(44px, 11.2vw, 58px) !important;
    line-height:.94 !important;
    letter-spacing:-.045em !important;
  }

  .stepsCarouselV65__typesCard .howText{
    margin-top:0 !important;
    margin-bottom:8px !important;
    font-size:16px !important;
    line-height:1.28 !important;
  }

  /* Pull the visual closer to the copy without changing structure. */
  .stepsCarouselV65__typesCard .stepsCarouselV65__typesVisual{
    margin-top:0 !important;
  }

  .stepsCarouselV65__typesCard .marketMixV24__event{
    margin:0 auto 7px !important;
    padding:6px 9px !important;
    border-radius:16px !important;
  }

  .stepsCarouselV65__typesCard .marketMixV24__eventIcon{
    width:31px !important;
    height:31px !important;
    flex:0 0 31px !important;
  }

  .stepsCarouselV65__typesCard .marketMixV24__eventIcon img{
    width:19px !important;
    height:19px !important;
  }

  .stepsCarouselV65__typesCard .marketMixV24__eventText small{
    font-size:7px !important;
    line-height:1 !important;
  }

  .stepsCarouselV65__typesCard .marketMixV24__eventText strong{
    font-size:15px !important;
    line-height:1.05 !important;
  }

  /* Three FLY cards remain intact, simply denser. */
  .stepsCarouselV65__typesCard .marketMixV24__examples{
    gap:5px !important;
  }

  .stepsCarouselV65__typesCard .marketMixV24__example{
    padding:8px 10px 9px !important;
    row-gap:5px !important;
    column-gap:7px !important;
    border-radius:15px !important;
  }

  .stepsCarouselV65__typesCard .marketMixV60__profile{
    gap:7px !important;
  }

  .stepsCarouselV65__typesCard .marketMixV60__avatar{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    max-width:28px !important;
    flex:0 0 28px !important;
  }

  .stepsCarouselV65__typesCard .marketMixV60__name{
    font-size:10.5px !important;
    line-height:1.05 !important;
  }

  .stepsCarouselV65__typesCard .marketMixV60__username{
    font-size:7.5px !important;
    line-height:1 !important;
  }

  .stepsCarouselV65__typesCard .marketMixV24__type{
    padding:4px 6px !important;
    gap:4px !important;
    font-size:6.5px !important;
  }

  .stepsCarouselV65__typesCard .marketMixV24__typeIcon{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    max-width:17px !important;
    flex:0 0 17px !important;
  }

  .stepsCarouselV65__typesCard .marketMixV24__typeIcon svg{
    width:9px !important;
    height:9px !important;
  }

  .stepsCarouselV65__typesCard .marketMixV24__ask{
    font-size:10.5px !important;
    line-height:1.18 !important;
  }

  /* Connector segments stay inside the tighter gaps. */
  .stepsCarouselV65__typesCard .marketMixV24__event::after{
    height:7px !important;
  }

  .stepsCarouselV65__typesCard .marketMixV24__example:nth-child(1)::after,
  .stepsCarouselV65__typesCard .marketMixV24__example:nth-child(2)::after{
    bottom:-6px !important;
    height:6px !important;
  }
}

/* Narrow phones need one extra step of compaction, but still keep
   the exact V65.11 card height. */
@media (max-width: 390px) {
  .stepsCarouselV65__typesCard .howTitle{
    font-size:42px !important;
  }

  .stepsCarouselV65__typesCard .howText{
    font-size:15px !important;
    line-height:1.24 !important;
  }

  .stepsCarouselV65__typesCard .marketMixV24__example{
    padding:7px 9px 8px !important;
  }

  .stepsCarouselV65__typesCard .marketMixV24__ask{
    font-size:10px !important;
  }
}