/* SyokBox Landing V3.10 — approved visual consistency pass */

/* Database 4-step: no soft blue behind steps 1 and 3. Match outlined white treatment. */
.db-steps-v38 .db-live-visual{background:#fff}
.db-steps-v38 .db-qr-plain,
.db-steps-v38 .db-reward-clean{background:#fff;border:1px solid #edf0f7}
.db-steps-v38 .db-reward-clean{overflow:hidden}

/* Keep every phone screen clipped inside the rounded device frame. */
.phone-v34,
.phone-v34 .phone-screen,
.phone-v34 .slide,
.phone-v34 .full-confetti{overflow:hidden!important}
.phone-v34 .phone-screen{border-radius:34px}
.phone-v34 .slide{border-radius:28px}

/* Owner section: white, visual-first horizontal swipes. */
.benefits-v310{background:#fff!important}
.benefits-v310 .section-head{margin-bottom:26px}
.showcase-group{margin-top:24px}
.showcase-group+h3{margin-top:0}
.showcase-group>h3{font-size:16px;letter-spacing:.04em;color:#142659;margin:0 0 11px;font-weight:800}
.poster-carousel{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:2px 2px 8px;
  margin-right:-18px;
}
.poster-carousel::-webkit-scrollbar{display:none}
.poster-carousel article{
  flex:0 0 calc(50% - 7px);
  scroll-snap-align:start;
  background:#fff;
  border:1px solid #e5eaf3;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(21,45,108,.045);
}
.poster-carousel article:last-child{margin-right:18px}
.poster-carousel img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  background:#fff;
}

/* Merchant portal: natural screenshot ratio, but compact enough to fit as one phone preview. */
.portal-phone-original{
  width:min(86vw,340px)!important;
  max-width:340px;
  aspect-ratio:1170/2532!important;
  height:auto!important;
  border-width:6px!important;
  border-radius:38px!important;
}
.portal-phone-original .portal-screen-original{border-radius:31px!important}
.portal-phone-original .portal-pane{border-radius:31px!important}
.portal-shot{object-fit:cover!important;object-position:top center!important}

@media(max-width:430px){
  .benefits-v310 .section-sub{font-size:13px}
  .showcase-group{margin-top:22px}
  .showcase-group>h3{font-size:15px;margin-bottom:9px}
  .poster-carousel{gap:9px;margin-right:-16px}
  .poster-carousel article{flex-basis:calc(50% - 6px);border-radius:16px}
  .poster-carousel article:last-child{margin-right:16px}
  .portal-phone-original{width:min(78vw,310px)!important;max-width:310px!important;border-width:6px!important;border-radius:35px!important}
  .portal-phone-original .portal-screen-original,.portal-phone-original .portal-pane{border-radius:28px!important}
}