/* ==========================================================================
   PIKKA — mobile overrides (loaded after style.css)
   Applied at phone / small-tablet widths so one page serves both layouts.
   ========================================================================== */

@media (max-width: 820px) {
body{
  overflow-x:hidden;
  background:var(--cream-2);
}

/* ---------- hero ---------------------------------------------------------- */
.hero{
  /* artwork is cropped to 430x932, so the box must hold that ratio */
  aspect-ratio:430 / 932;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 22px 96px;
  background:var(--yellow) url("../assets/bg-hero-mobile.png") center bottom / 100% 100% no-repeat;
}
.hero__inner{--rise:120px;width:100%;position:relative;top:2px}

.float{display:none}

.hero__props{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:20px;
  margin-top:60px;
}
.hero__props-img{
  height:200px;
  width:auto;
  display:block;
  animation:floatY 5s ease-in-out infinite;
}
.hero__props > :nth-child(1) .hero__props-img{animation-delay:2.82s}
.hero__props > :nth-child(2) .hero__props-img{animation-delay:0.32s}
.hero__props-wrap{
  animation:popIn .62s cubic-bezier(.2,1.35,.4,1) both;
}
.hero__props-wrap:nth-child(1){animation-delay:2.2s;position:relative;top:-14px}
.hero__props-wrap:nth-child(2){animation-delay:2.36s;position:relative;top:44px}
@keyframes floatY{
  0%,100%{transform:translateY(-12px)}
  50%    {transform:translateY(14px)}
}
@media (prefers-reduced-motion:reduce){
  .hero__props-img{animation:none}
  .hero__props-wrap{animation:popIn .62s cubic-bezier(.2,1.35,.4,1) both}
}

.logo{width:76%;max-width:290px;height:auto;aspect-ratio:594 / 250;position:relative;top:-20px}

.kicker{
  margin:52px auto 0;
  font-size:17px;
  -webkit-text-stroke-width:2.5px;
  text-shadow:
     2.5px 0 0 #fff, -2.5px 0 0 #fff, 0 2.5px 0 #fff, 0 -2.5px 0 #fff,
     1.8px 1.8px 0 #fff, -1.8px 1.8px 0 #fff, 1.8px -1.8px 0 #fff, -1.8px -1.8px 0 #fff;
}

.offer{width:320px;max-width:320px;height:auto;aspect-ratio:4722 / 1129;margin-top:16px}

.hero__cta{margin-top:38px}
.btn--ink{
  width:100%;
  max-width:290px;
  min-width:0;
  padding:17px 24px;
  font-size:14px;
}

/* ---------- register ----------------------------------------------------- */
.register{
  min-height:100vh;
  min-height:100svh;
  padding:58px 22px 76px;
  background:var(--cream-2) url("../assets/bg-register-mobile.png") center top / 100% 100% no-repeat;
}
.register__inner{max-width:100%}

.section-head{margin-bottom:38px}
.section-head__title{font-size:22px;gap:14px}
.mini-bolt{width:28px}
.section-head__sub{font-size:14px;margin-top:12px}

.field{margin-bottom:24px}
.field__label{font-size:15px;margin-bottom:9px}

.input{height:50px;font-size:15px;padding:0 16px;border-radius:10px}

/* phone: prefix + number on one row, Request OTP full width beneath */
.phone-row{flex-wrap:wrap;gap:10px}
.phone-row .prefix{width:62px;flex:0 0 62px}
.phone-row .input[name="phone"]{flex:1 1 120px}
.btn--otp{flex:1 1 100%;width:100%;height:48px;font-size:13px}

.otp-row{gap:8px}
.otp-row .otp{font-size:18px}

.otp-hint{font-size:13px;margin-top:13px}

.form-foot{margin-top:40px}
.form-foot .btn--ink{width:100%;max-width:none}

.toast{left:22px;right:22px;width:auto;max-width:none;box-sizing:border-box;bottom:22px;transform:translateY(160%);text-align:center;background:#ff8a00;font-weight:500}
.toast.is-visible{transform:translateY(0)}

.modal{
  width:min(440px,calc(100vw - 28px));
  height:auto;
  min-height:0;
  aspect-ratio:380 / 426;
  padding:52% 34px 26px;
  border-radius:22px;
}
.modal__body{font-size:16px;margin:36px 0 22px}
}