/* SyokBox Landing V3.14 — approved mobile hero + phone proportion corrections */

/* Blue hero headline panel only. The phone flow stays clean white below. */
.hero-head-block{
  background:#1747d5;
  margin:0 -22px;
  padding:42px 22px 38px;
}
.hero-head-block h1{color:#fff!important;margin-bottom:18px!important}
.hero-head-block h1 em{color:#fff!important;font-style:normal}
.hero-head-block .hero-sub{color:rgba(255,255,255,.82)!important;margin-bottom:0!important}

/* Remove the extra how-it-works heading. Start directly with each phone step. */
.hero .hero-motion .section-head{display:none!important}
.hero .hero-motion{padding-top:26px!important}
.hero .hero-motion .motion-card{
  border:0!important;
  border-radius:0!important;
  padding-top:20px!important;
}

/* Keep step numbering SyokBox blue. */
.hero .hero-motion .motion-copy span{color:#2451d8!important}

/* Revert the live phone to the compact approved mobile proportion. */
@media(max-width:620px){
  .hero{padding-top:0!important}
  .hero-head-block{margin:0 -18px;padding:38px 18px 34px}
  .hero-copy h1{font-size:43px!important;line-height:1.04!important}
  .hero-sub{font-size:16px!important;line-height:1.52!important}
  .hero .hero-motion{padding-top:20px!important}
  .hero .hero-motion .motion-card{padding:14px 0 16px!important}
  .hero .hero-motion .phone,
  .hero .hero-motion .phone-v34{
    width:250px!important;
    height:500px!important;
    border-radius:39px!important;
  }
}
@media(max-width:430px){
  .hero-head-block{margin:0 -20px;padding-left:20px;padding-right:20px}
  .phone-v34{height:500px!important}
}

/* Drop the domain pill to avoid changing the approved reward screen. */
.win-domain{display:none!important}

/* Confetti sits on top of the reward content, falling from the top of the screen. */
.phone-v34 .win-slide-v34{isolation:isolate!important;overflow:hidden!important}
.phone-v34 .full-confetti{
  z-index:20!important;
  inset:-45px -10px -10px!important;
  pointer-events:none!important;
}
.phone-v34 .win-slide-v34>*:not(.full-confetti){position:relative;z-index:3!important}

/* Full emphasis requested for the first sentence of the second merchant paragraph. */
.hero-story strong{font-weight:800!important;color:#102356!important}