/* SyokBox Landing V3.16 */

/* Exact V3.12 phone size / placement. No stretching. */
.hero .hero-motion .phone,
.hero .hero-motion .phone-v34{
  width:284px!important;
  max-width:86vw!important;
  height:568px!important;
  border:8px solid #111b34!important;
  border-radius:44px!important;
  margin:8px auto 0!important;
}
.hero .hero-motion .phone-v34 .phone-screen{padding:45px 17px 17px!important}
.hero .hero-motion .phone-v34 .slide{inset:45px 17px 17px!important}
@media(max-width:430px){
  .hero .hero-motion .phone,
  .hero .hero-motion .phone-v34{width:284px!important;height:568px!important;max-width:86vw!important}
}

/* Clean phone presentation. Confetti is always above reward content. */
.phone-v34 .win-slide-v34{isolation:isolate!important;overflow:hidden!important}
.phone-v34 .full-confetti{position:absolute!important;inset:0!important;z-index:50!important;pointer-events:none!important}
.phone-v34 .win-slide-v34>*:not(.full-confetti){position:relative;z-index:4!important}
.win-domain{display:none!important}

/* About SyokBox: white only, no grey background. */
.about-syokbox{margin:34px 0 14px;padding:34px 0 10px;background:#fff;color:#101f4f}
.about-copy{text-align:center;max-width:680px;margin:0 auto}
.about-copy h2{font-size:38px;line-height:1.06;letter-spacing:-.04em;margin:10px 0 12px;color:#0e1f50}
.about-copy p{font-size:15px;line-height:1.6;color:#68748f;margin:0 auto;max-width:620px}
.about-no-list{display:grid;gap:9px;max-width:470px;margin:22px auto 28px;text-align:left}
.about-no-list span{font-weight:800;color:#142450;padding:8px 0 8px 34px;position:relative}
.about-no-list span:before{content:'✓';position:absolute;left:0;top:5px;width:24px;height:24px;border-radius:50%;background:#164ad7;color:#fff;display:grid;place-items:center;font-size:13px}
.about-flow{max-width:650px;margin:0 auto;display:grid;gap:12px;position:relative}
.about-flow-card{border:1px solid #dfe6f3;border-radius:20px;background:#fff;min-height:130px;padding:16px 18px;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:14px;box-shadow:0 9px 24px rgba(20,58,145,.06)}
.about-flow-card:nth-child(even){grid-template-columns:1.1fr 1fr}
.about-flow-card:nth-child(even) .about-flow-text{order:2}
.about-flow-text{display:flex;align-items:flex-start;gap:10px;flex-direction:column}
.about-flow-text b{width:28px;height:28px;border-radius:50%;background:#164ad7;color:#fff;display:grid;place-items:center;font-size:13px}
.about-flow-text strong{font-size:18px;line-height:1.2;color:#10204f}
.about-qr-visual{display:flex;justify-content:center;align-items:center}
.about-qr-visual img{width:96px;height:96px;object-fit:contain;border:1px solid #e6ebf4;border-radius:12px;padding:8px;background:#fff}
.about-form-visual{height:125px;border:1px solid #e6ebf4;border-radius:14px;overflow:hidden;background:#fff}
.about-form-visual img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.about-reward-visual{display:grid;place-items:center}
.about-reward-visual img{width:92px;height:92px;object-fit:contain}
.about-db-visual{display:grid;gap:8px;padding:8px 4px}
.about-db-visual i{height:22px;border-radius:8px;background:linear-gradient(90deg,#164ad7 0 13%,#edf2fb 13% 72%,#dff6e7 72%);position:relative}
.about-db-visual i:after{content:'✓';position:absolute;right:7px;top:2px;color:#21a15b;font-style:normal;font-size:12px;font-weight:900}
.about-return{text-align:center;color:#10204f;font-size:21px;font-weight:900;margin:8px 0 0}
.about-return:before{content:'↺';display:inline-grid;place-items:center;width:34px;height:34px;border:2px solid #164ad7;color:#164ad7;border-radius:50%;margin-right:9px;font-size:20px;vertical-align:middle}
.about-summary{text-align:center;font-size:13px;line-height:1.55;color:#596783;margin:18px auto 0;max-width:600px;font-weight:700}

/* Remove the old customer-details section completely. */
.story-section{display:none!important}

/* Reward / Campaign explanatory copy: text only, directly under each carousel. */
.showcase-explain{margin:14px 2px 0;padding:0 2px;text-align:left}
.showcase-explain strong{font-size:14px;color:#112252;display:block;margin-bottom:5px}
.showcase-explain p{margin:0;color:#68748d;font-size:12px;line-height:1.55}
.showcase-explain p b{color:#26375f;font-weight:800}

@media(max-width:620px){
  .about-syokbox{margin-top:26px;padding-top:28px}
  .about-copy{text-align:left}
  .about-copy h2{font-size:31px}
  .about-copy p{font-size:14px}
  .about-no-list{margin-left:0;margin-right:0}
  .about-flow-card,.about-flow-card:nth-child(even){grid-template-columns:1fr 1.05fr;min-height:118px;padding:14px}
  .about-flow-card:nth-child(even) .about-flow-text{order:0}
  .about-flow-text strong{font-size:15px}
  .about-form-visual{height:112px}
  .about-return{font-size:18px}
  .showcase-explain{margin-top:12px}
}