/* Homepage card rails should fit the viewport instead of creating horizontal scrollbars. */
body.marketing-media-home{
  overflow-x:hidden;
}

.marketing-media-home .homepage-streams,
.marketing-media-home .media-rail-section{
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}

.marketing-media-home .homepage-rail,
.marketing-media-home .homepage-rail.compact{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  grid-auto-columns:unset!important;
  gap:clamp(8px,.9vw,14px)!important;
  width:100%;
  max-width:100%;
  overflow-x:clip!important;
  overscroll-behavior-inline:auto!important;
  scroll-snap-type:none!important;
  scrollbar-width:none;
  padding:4px 0 16px!important;
}

.marketing-media-home .homepage-rail::-webkit-scrollbar{
  display:none;
}

.marketing-media-home .homepage-media-card{
  width:100%;
  min-width:0;
  min-height:clamp(118px,8.75vw,168px);
  scroll-snap-align:none;
}

.marketing-media-home .homepage-media-card.server{
  min-height:clamp(96px,6.7vw,128px);
}

.marketing-media-home .homepage-media-card span{
  overflow-wrap:anywhere;
}

@media(max-width:980px){
  .marketing-media-home .homepage-rail,
  .marketing-media-home .homepage-rail.compact{
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
  }
}

@media(max-width:560px){
  .marketing-media-home .homepage-rail,
  .marketing-media-home .homepage-rail.compact{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .marketing-media-home .homepage-media-card,
  .marketing-media-home .homepage-media-card.server{
    min-height:108px;
  }
}

/* Conversion-focused first screen: keep the journey visible without crowding. */
.marketing-media-home .hero{
  min-height:clamp(520px,70vh,640px)!important;
  align-items:center;
}

.marketing-media-home .hero-actions{
  margin-top:20px!important;
}

.marketing-media-home .hero-flow{
  max-width:780px!important;
  margin-top:18px!important;
}

.marketing-media-home .conversion-steps{
  gap:8px!important;
}

.marketing-media-home .conversion-steps li{
  min-height:86px!important;
  padding:12px!important;
}

.marketing-media-home .conversion-steps span{
  font-size:12px!important;
}

@media(max-width:900px){
  .marketing-media-home .hero{
    min-height:auto!important;
  }
}

@media(max-width:560px){
  .marketing-media-home .hero{
    padding-top:26px!important;
  }
}