/* First-screen composition: artwork stays above the heading. */
.startHero .art{
  top:-34px !important;
  width:440px !important;
  height:250px !important;
  left:50% !important;
  background-size:contain !important;
  background-position:center top !important;
  z-index:1;
}
.startHero .intro{
  bottom:74px !important;
  z-index:2;
  left:50% !important;
  text-align:center;
}
.startHero .intro p{margin-left:auto;margin-right:auto;}

/* First choice screen shares the same centre axis as the hero artwork. */
.quiz:has(.gender){
  width:min(640px,calc(100vw - 48px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center;
}
.quiz .gender{margin-left:auto;margin-right:auto;}
@media(max-width:700px){
  .startHero .art{top:0 !important;width:310px !important;height:190px !important;}
  .startHero .intro{bottom:48px !important;}
}