.page-viewport {
  position: relative;
  width: min(100vw, var(--layout-max) * 1px);
  max-width: calc(var(--layout-max) * 1px);
  overflow-x: hidden;
  overflow-y: visible;
  flex-shrink: 0;
}

.page {
  position: relative;
  width: 375px;
  transform-origin: top left;
  overflow-x: hidden;
}

.header {
  display: flex;
  width: 375px;
  height: 67px;
  padding: 12px 20px;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  background: #fff;
  border-radius: 0 0 22px 22px;
  backdrop-filter: blur(10px);
  flex-shrink: 0;
  overflow: hidden;
}

.header__logo {
  width: 47px;
  height: 32.791px;
  display: block;
  flex-shrink: 0;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-radius: 100px;
  background: rgba(0, 134, 240, 0.15);
  color: #0086f0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 1;
  white-space: nowrap;
}

.header__social > span {
  display: block;
  line-height: 1;
}

.header__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 39px;
  padding: 20px 40px;
  border-radius: 100px;
  background: #2fb000;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  line-height: 1;
  white-space: nowrap;
}

.header__button > span {
  display: block;
  line-height: 1;
}

.screen {
  position: relative;
  width: 375px;
  height: 690px;
  margin: 0 auto;
  background: #fff;
  border-radius: 0 0 24px 24px;
  flex-shrink: 0;
  overflow: hidden;
}

.screen__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 840px;
  border-radius: 20px;
  background-image: linear-gradient(180deg, #1899ff 0%, #64bbff 100%), linear-gradient(90deg, #d9d9d9 0%, #d9d9d9 100%);
}

.screen__icloud {
  position: absolute;
  left: 92px;
  top: 95px;
  width: 185.9998px;
  height: 34.2125px;
}

.screen__icloud-subtract {
  position: absolute;
  left: 50.2702px;
  top: 1.7675px;
  width: 135.7296px;
  height: 32.445px;
}

.screen__icloud-vector {
  position: absolute;
  left: 0;
  top: 0.00001px;
  width: 40.3394px;
  height: 28.6181px;
}

.screen__sand {
  position: absolute;
  top: 457.25px;
  left: calc(75% - 76.28px);
  width: 377.317px;
  height: 265.089px;
  transform: translateX(-50%);
  overflow: hidden;
}

.screen__sand img {
  position: absolute;
  top: -144.53%;
  left: 0;
  width: 100%;
  height: 244.71%;
}

.screen__beach {
  position: absolute;
  left: -26px;
  top: 0;
  width: 429px;
  height: 874px;
  overflow: hidden;
  pointer-events: none;
}

.screen__beach-main {
  position: absolute;
  left: -132px;
  top: -168px;
  width: 595px;
  height: 850.0593px;
  display: block;
  z-index: 1;
  -webkit-mask-image: url("../../assets/mobile/figma/hero-mask-2995.svg");
  mask-image: url("../../assets/mobile/figma/hero-mask-2995.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 127px 176px;
  mask-position: 127px 176px;
  -webkit-mask-size: 429px 874px;
  mask-size: 429px 874px;
}

.screen__leaf-wrap {
  position: absolute;
  left: -163px;
  top: 509px;
  width: 444.367px;
  height: 444.367px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.screen__leaf-rotate {
  flex-shrink: 0;
  transform: scaleY(-1) rotate(45deg);
  transform-origin: center center;
}

.screen__leaf {
  width: 314.301px;
  height: 314.301px;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-mask-image: url("../../assets/mobile/figma/hero-mask-2995.svg");
  mask-image: url("../../assets/mobile/figma/hero-mask-2995.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 137px -509px;
  mask-position: 137px -509px;
  -webkit-mask-size: 429px 874px;
  mask-size: 429px 874px;
}

.screen__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 5px;
  background: transparent;
}

.screen__prize {
  display: contents;
}

.screen__prize-count {
  position: absolute;
  left: calc(50% + 15.09px);
  top: 464px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5.761px 14.781px 13.635px;
  border: 1.344px solid #fff;
  border-radius: 11.432px;
  background: #d0eaff;
}

.screen__prize-count > span {
  color: #0086f0;
  font-family: "Helvetica Neue", "HelveticaNeue-Medium", Helvetica, Arial, sans-serif;
  font-size: 19.873px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.7949px;
  text-align: right;
  white-space: nowrap;
}

.screen__prize-label {
  position: absolute;
  left: 175px;
  top: 491.62px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5.764px 12.382px;
  border-radius: 23.696px;
  background: #fff;
}

.screen__prize-label > span {
  color: #0086f0;
  font-family: "Helvetica Neue", "HelveticaNeue-Medium", Helvetica, Arial, sans-serif;
  font-size: 15.176px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.6071px;
  text-align: right;
  white-space: nowrap;
}

.screen__cta {
  position: absolute;
  left: 50%;
  bottom: 45px;
  transform: translateX(-50%);
  width: 335px;
  height: 57px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 40px;
  border: 2px solid #3dd804;
  border-radius: 100px;
  background: #2fb000;
}

.screen__cta > span {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.48px;
  white-space: nowrap;
}