/* SyokBox Landing V3.13 — hero flow + phone presentation cleanup */

/* Meter removed from the visual flow. Existing DOM stays hidden for legacy animation safety. */
.meter,.meter-progress,.meter-note{display:none!important}

/* The approved How-it-Works phone sequence now sits directly below the hero subline. */
.hero .hero-motion{
  padding:24px 0 0!important;
  margin:0!important;
}
.hero .hero-motion .section-head{margin-bottom:18px}
.hero .hero-motion .motion-card{
  background:#fff!important;
  background-image:none!important;
  border-color:#e7ecf5!important;
  box-shadow:none!important;
}
.hero .hero-motion .motion-copy span{
  color:#2451d8!important;
}
.hero .hero-motion .phone-screen{background:#fff!important}

/* Merchant pain-point copy continues directly below the phone mockup, no new heading. */
.hero-story{margin-top:22px!important}
.hero-story strong{font-weight:800;color:#102356}

/* Reward-screen domain pill requested for the live phone mockup. */
.win-domain{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:122px;
  height:30px;
  margin:11px auto 0;
  padding:0 16px;
  border:1px solid #dfe5f0;
  border-radius:999px;
  background:#fff;
  color:#2451d8;
  font-size:9px;
  font-weight:800;
  letter-spacing:-.01em;
}

/* Confetti must visually fall in front of the reward-screen content. */
.phone-v34 .win-slide-v34{overflow:hidden!important}
.phone-v34 .full-confetti{z-index:8!important;pointer-events:none!important}
.phone-v34 .win-slide-v34>*:not(.full-confetti){position:relative;z-index:3!important}

/* Purchase proof = exactly two text rows: Name / Just got SyokBox today. */
.purchase-proof div{gap:2px!important}
.purchase-proof span{font-size:11.5px!important;line-height:1.28!important}
.purchase-proof small{display:none!important}

/* Exact merchant-portal screenshots prepared by user. */
.portal-shot{object-fit:cover!important;object-position:top center!important}

@media(max-width:620px){
  .hero{padding-top:38px!important}
  .hero-copy h1{font-size:46px!important;line-height:1.06!important}
  .hero-sub{margin-bottom:0!important}
  .hero .hero-motion{padding-top:30px!important}
  .hero .hero-motion .section-head{text-align:left!important}
  .hero .hero-motion .section-head h2{font-size:31px!important}
  .hero .hero-motion .motion-card{padding:15px 0 18px!important;border-left:0!important;border-right:0!important;border-radius:0!important}
  .hero .hero-motion .phone{width:250px!important}
  .hero-story{padding:0 2px!important;margin-top:24px!important}
}