.promotion-body .promotion-calculator input[type="number"] {
  appearance: textfield;
}

/* Keep off-canvas navigation and decorative/carousel content from widening
   the document. A widened layout makes the fixed mobile header appear to be
   missing and creates a horizontal scrollbar at the bottom of the page. */
html,
.promotion-body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  .promotion-body {
    overflow-x: clip;
  }
}

.promotion-body main,
.promotion-body main > section,
.promotion-body .cards-marquee-container {
  max-width: 100%;
}

.promotion-body .cards-marquee-container {
  overflow: hidden;
}

.promotion-body .promotion-calculator input[type="number"]::-webkit-inner-spin-button,
.promotion-body .promotion-calculator input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.promotion-body .referral-program-image img,
.promotion-body .promotion-calculator img {
  height: auto;
}

html { scroll-behavior: smooth; }
.p1-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.p1-referral-ranking { scroll-margin-top: 96px; }

@media (min-width: 1280px) {
  .p1-hero-actions { justify-content: flex-start; }
}

.p1-ranking-heading { align-items: end; display: flex; gap: 32px; justify-content: space-between; margin-bottom: 36px; }
.p1-ranking-heading h2 { margin: 16px 0 8px; }
.p1-ranking-heading p { color: rgb(20 27 52 / 65%); }
.dark .p1-ranking-heading p { color: rgb(255 255 255 / 65%); }
.p1-ranking-tabs { background: rgb(43 127 255 / 9%); border: 1px solid rgb(43 127 255 / 16%); border-radius: 999px; display: flex; padding: 5px; }
.p1-ranking-tabs button { background: transparent; border: 0; border-radius: 999px; color: #536078; cursor: pointer; font: inherit; font-weight: 600; min-width: 88px; padding: 10px 20px; }
.dark .p1-ranking-tabs button { color: rgb(255 255 255 / 72%); }
.p1-ranking-tabs button[aria-selected="true"] { background: #2b7fff; box-shadow: 0 8px 22px rgb(43 127 255 / 25%); color: #fff; }
.p1-ranking-card { background: rgb(255 255 255 / 88%); border: 1px solid rgb(43 127 255 / 12%); border-radius: 24px; box-shadow: 0 22px 70px rgb(34 52 84 / 8%); overflow: hidden; }
.dark .p1-ranking-card { background: rgb(20 23 36 / 92%); border-color: rgb(255 255 255 / 8%); }
.p1-ranking-table-head, .p1-ranking-row { align-items: center; display: grid; grid-template-columns: 100px minmax(0, 1fr) 180px; }
.p1-ranking-table-head { background: rgb(43 127 255 / 6%); color: #667085; font-size: 13px; font-weight: 700; letter-spacing: .06em; padding: 16px 28px; text-transform: uppercase; }
.dark .p1-ranking-table-head { color: rgb(255 255 255 / 62%); }
.p1-ranking-row { border-top: 1px solid rgb(20 27 52 / 8%); min-height: 76px; padding: 12px 28px; }
.dark .p1-ranking-row { border-color: rgb(255 255 255 / 8%); }
.p1-ranking-position b { align-items: center; background: #eef3fb; border-radius: 50%; display: inline-flex; height: 36px; justify-content: center; width: 36px; }
.dark .p1-ranking-position b { background: rgb(255 255 255 / 10%); color: rgb(255 255 255 / 82%); }
.p1-ranking-row.is-top-1 .p1-ranking-position b { background: linear-gradient(135deg, #ffe680, #ffb800); color: #6b4900; }
.p1-ranking-row.is-top-2 .p1-ranking-position b { background: linear-gradient(135deg, #f2f5f9, #bdc7d5); color: #435066; }
.p1-ranking-row.is-top-3 .p1-ranking-position b { background: linear-gradient(135deg, #ffd2b0, #c97a40); color: #693514; }
.p1-ranking-person { align-items: center; display: flex; gap: 14px; min-width: 0; }
.p1-ranking-person i { align-items: center; background: linear-gradient(135deg, #65dbff, #9b5cff); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 42px; font-style: normal; font-weight: 800; height: 42px; justify-content: center; }
.p1-ranking-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .p1-ranking-person strong { color: #f7f8fc; }
.p1-ranking-count { color: #2b7fff; display: grid; justify-items: end; justify-self: end; }
.p1-ranking-count strong { font-size: 17px; font-weight: 800; }
.p1-ranking-count small { color: #667085; font-size: 11px; margin-top: 3px; }
.dark .p1-ranking-count small, .dark .p1-ranking-status { color: rgb(255 255 255 / 58%); }
.p1-ranking-status { color: #667085; padding: 56px 24px; text-align: center; }

@media (max-width: 767px) {
  .promotion-body .header-one {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .promotion-body .header-one > div:last-child,
  .promotion-body .nav-hamburger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .promotion-body .cards-marquee-container > .flex {
    width: max-content;
    max-width: none;
  }

  .promotion-body .cards-marquee-container > .flex > div {
    min-width: min(358px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
  }

  .promotion-body .cards-marquee-container > .flex > div:first-child {
    margin-left: 16px;
  }

  .p1-hero-actions { align-items: center; flex-direction: column; }
  .p1-ranking-heading { align-items: stretch; flex-direction: column; }
  .p1-ranking-tabs { align-self: flex-start; }
  .p1-ranking-table-head, .p1-ranking-row { grid-template-columns: 58px minmax(0, 1fr) auto; padding-left: 16px; padding-right: 16px; }
  .p1-ranking-person i { display: none; }
  .p1-ranking-count { font-size: 13px; }

  .promotion-body .promotion-calculator > div:first-child {
    padding: 48px 20px 32px;
  }

  .promotion-body .promotion-calculator h2 {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 0 0 30px;
    line-height: 1;
  }

  .promotion-body .promotion-calculator h2 .sum-num {
    display: inline-block;
    font-size: clamp(64px, 19vw, 82px);
    line-height: 1;
  }

  .promotion-body .promotion-calculator article > .flex {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
    font-size: 20px;
    line-height: 1.4;
  }

  .promotion-body .promotion-calculator article > .flex > span {
    max-width: 100%;
    margin: 0 !important;
  }

  .promotion-body .promotion-calculator article > .flex > span:nth-child(2),
  .promotion-body .promotion-calculator article > .flex > span:nth-child(4) {
    width: min(100%, 260px);
    min-width: 0;
  }

  .promotion-body .promotion-calculator > div:last-child {
    padding: 28px 20px 32px;
  }
}