/* Align Phase 4 panels with the original landing UI */
#screen-landing .hero{
  width:min(1120px,calc(100% - 2rem))!important;
  max-width:1120px!important;
  margin:0 auto!important;
  padding:4.2rem 0 2rem!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(300px,370px)!important;
  gap:1.25rem!important;
  align-items:center!important;
  text-align:left!important;
}
#screen-landing .hero > #profile-compact,
#screen-landing .hero > .hero-title,
#screen-landing .hero > .hero-sub,
#screen-landing .hero > .hero-actions{
  grid-column:1!important;
  justify-self:start!important;
}
#screen-landing .hero-title{
  max-width:680px!important;
  margin-left:0!important;
  margin-right:0!important;
}
#screen-landing .hero-sub{
  max-width:590px!important;
  margin-left:0!important;
  margin-right:0!important;
}
#screen-landing .hero-actions{
  justify-content:flex-start!important;
  align-items:center!important;
}
#main-menu-scoreboard{
  grid-column:2!important;
  grid-row:1 / span 4!important;
  align-self:center!important;
  justify-self:stretch!important;
  margin:0!important;
}
#phase4-online-row,
#phase4-shell,
#screen-landing .how-it-works,
#screen-landing .safety-section,
#screen-landing .footer{
  width:min(1120px,calc(100% - 2rem))!important;
  max-width:1120px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
#phase4-shell{
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr)!important;
  align-items:stretch!important;
}
#phase4-shell .phase4-panel{
  min-width:0!important;
}
.main-menu-scoreboard,
.phase4-panel{
  box-sizing:border-box!important;
}

@media(max-width:900px){
  #screen-landing .hero{
    width:calc(100% - 1rem)!important;
    display:block!important;
    padding:2.4rem .5rem 1.4rem!important;
    text-align:center!important;
  }
  #screen-landing .hero > #profile-compact,
  #screen-landing .hero > .hero-title,
  #screen-landing .hero > .hero-sub,
  #screen-landing .hero > .hero-actions{
    justify-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  #screen-landing .hero-actions{
    justify-content:center!important;
  }
  #main-menu-scoreboard{
    width:min(430px,100%)!important;
    margin:1.1rem auto 0!important;
  }
  #phase4-shell{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:520px){
  #screen-landing .hero{
    width:calc(100% - .75rem)!important;
    padding-top:1.8rem!important;
  }
  #screen-landing .hero-title{
    text-align:center!important;
  }
  #screen-landing .hero-sub{
    text-align:center!important;
  }
  #main-menu-scoreboard{
    border-radius:22px!important;
  }
  #phase4-online-row,
  #phase4-shell,
  #screen-landing .how-it-works,
  #screen-landing .safety-section,
  #screen-landing .footer{
    width:calc(100% - .75rem)!important;
  }
}