/* Real MonieAccess dashboard preview in the hero. */
.hero-dashboard {
  position: absolute;
  z-index: 3;
  width: 350px;
  right: 64px;
  bottom: 104px;
  margin: 0;
  transform: rotate(5deg);
  filter: drop-shadow(14px 18px 0 rgba(0, 0, 0, .18));
}

.hero-dashboard img {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid #000;
  border-radius: 34px;
  background: #fff;
}

@media (max-width: 900px) {
  .hero-dashboard {
    right: 50%;
    bottom: 78px;
    width: 320px;
    transform: translateX(50%) rotate(4deg);
  }
}

@media (max-width: 560px) {
  .hero-dashboard {
    width: 235px;
    bottom: 85px;
    transform: translateX(50%) rotate(3deg);
  }
}

/* The real dashboard is much taller than the earlier mockup. Keep it clear of
   the navigation, hero copy, and statistics at each layout width. */
.hero-dashboard {
  width: 245px;
  right: 100px;
  bottom: 106px;
}

@media (max-width: 900px) {
  .hero-shell {
    min-height: 1080px;
  }

  .hero-dashboard {
    top: 520px;
    right: 50%;
    bottom: auto;
    width: 205px;
    transform: translateX(50%) rotate(4deg);
  }
}

@media (max-width: 560px) {
  .hero-shell {
    min-height: 1100px;
  }

  .hero-dashboard {
    top: 590px;
    width: 175px;
    transform: translateX(50%) rotate(3deg);
  }
}

/* Supported country indicators in the payout-corridor chips. */
.payout-tags .country-flag {
  display: inline-block;
  flex: 0 0 auto;
  width: 22px;
  height: 15px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
  overflow: hidden;
}

.flag-ng { background: linear-gradient(90deg, #008751 0 33.33%, #fff 33.33% 66.66%, #008751 66.66%); }
.flag-ke { background: linear-gradient(#000 0 27%, #fff 27% 31%, #bb1e2d 31% 69%, #fff 69% 73%, #006b3f 73%); }
.flag-za { background: linear-gradient(145deg, #e03c31 0 38%, #fff 38% 42%, #007a4d 42% 61%, #f6c744 61% 65%, #172c6a 65%); }
.flag-us { position: relative; background: repeating-linear-gradient(#b22234 0 1.3px, #fff 1.3px 2.6px); }
.flag-us::after { content: ""; position: absolute; inset: 0 auto auto 0; width: 9px; height: 8px; background: #3c3b6e; }
.flag-gb { background: linear-gradient(33deg, transparent 42%, #fff 42% 48%, #c8102e 48% 52%, #fff 52% 58%, transparent 58%), linear-gradient(-33deg, #012169 42%, #fff 42% 48%, #c8102e 48% 52%, #fff 52% 58%, #012169 58%); }
.flag-gh { background: linear-gradient(#ce1126 0 33.33%, #fcd116 33.33% 66.66%, #006b3f 66.66%); }
.flag-ci { background: linear-gradient(90deg, #f77f00 0 33.33%, #fff 33.33% 66.66%, #009e60 66.66%); }
.flag-cm { background: linear-gradient(90deg, #007a5e 0 33.33%, #ce1126 33.33% 66.66%, #fcd116 66.66%); }
.flag-eg { background: linear-gradient(#ce1126 0 33.33%, #fff 33.33% 66.66%, #000 66.66%); }
.flag-tz { background: linear-gradient(145deg, #1eb53a 0 43%, #fcd116 43% 46%, #000 46% 54%, #fcd116 54% 57%, #00a3dd 57%); }

/* Real external flag assets and official store-badge artwork. */
.payout-tags .country-flag {
  display: inline-block;
  width: 22px;
  height: 15px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 3px;
  background: transparent;
}

.hero-store-links a,
.store-links a {
  display: block;
  width: 154px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero-store-links a:hover,
.store-links a:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

.hero-store-links img,
.store-links img {
  display: block;
  width: 154px;
  height: 46px;
  object-fit: contain;
}

@media (max-width: 560px) {
  .store-links a {
    width: 141px;
  }

  .hero-store-links img {
    width: 100%;
    height: 42px;
  }

  .store-links img {
    width: 141px;
    height: 43px;
  }
}

/* Product icons orbit the real dashboard on the hero. */
.hero-product-icons {
  position: absolute;
  z-index: 3;
  top: 185px;
  right: 55px;
  width: 380px;
  height: 525px;
  pointer-events: none;
}

.hero-product-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 45px;
  padding: 6px 10px 6px 6px;
  border: 1.5px solid #000;
  border-radius: 13px;
  background: #fff;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, .16);
  transform: rotate(-4deg);
}

.hero-product-chip b {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1.5px solid #000;
  border-radius: 9px;
  background: #FF9C2E;
  color: #000;
  font: 800 18px/1 var(--display);
}

.hero-product-chip b img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px;
  object-fit: contain;
}

.hero-product-chip small {
  color: #000;
  font: 800 10px/1 var(--body);
  letter-spacing: .06em;
  white-space: nowrap;
}

.chip-ngn { top: 15px; left: 0; }
.chip-usd { top: 25px; right: -4px; transform: rotate(5deg); }
.chip-crypto { top: 216px; left: -48px; transform: rotate(-8deg); }
.chip-gift { top: 333px; right: -30px; transform: rotate(7deg); }
.chip-bills { bottom: 8px; left: 4px; transform: rotate(4deg); }
.chip-usd b { background: #000; color: #fff; }
.chip-crypto b { background: #fff0dc; }
.chip-gift b { background: #FF9C2E; }
.chip-bills b { background: #fff; }
.chip-ngn b,
.chip-usd b { overflow: hidden; padding: 0; }
.chip-ngn b img,
.chip-usd b img { padding: 0; object-fit: cover; }

@media (max-width: 900px) {
  .hero-product-icons {
    top: 495px;
    right: auto;
    left: 50%;
    width: 350px;
    height: 450px;
    transform: translateX(-50%);
  }

  .chip-ngn { top: 0; left: 0; }
  .chip-usd { top: 8px; right: 0; }
  .chip-crypto { top: 170px; left: -24px; }
  .chip-gift { top: 260px; right: -16px; }
  .chip-bills { bottom: 0; left: 9px; }
}

@media (max-width: 560px) {
  .hero-product-icons {
    top: 565px;
    width: 325px;
    height: 380px;
  }

  .hero-product-chip {
    min-height: 37px;
    gap: 5px;
    padding: 4px 7px 4px 4px;
    border-radius: 10px;
    box-shadow: 3px 4px 0 rgba(0, 0, 0, .14);
  }

  .hero-product-chip b {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 15px;
  }

  .hero-product-chip small { font-size: 8px; }
  .chip-ngn { left: 4px; }
  .chip-usd { right: 4px; }
  .chip-crypto { top: 140px; left: -5px; }
  .chip-gift { top: 216px; right: -3px; }
  .chip-bills { bottom: 3px; left: 20px; }
}

/* Refined spacing: service chips frame, rather than cover, the dashboard. */
@media (min-width: 901px) {
  .hero-dashboard {
    right: 135px;
  }

  .hero-product-icons {
    z-index: 4;
    top: 180px;
    right: 5px;
    width: 470px;
    height: 535px;
  }

  .chip-ngn { top: 20px; left: -22px; }
  .chip-usd { top: 28px; right: 0; }
  .chip-crypto { top: 218px; left: -36px; }
  .chip-gift { top: 342px; right: -22px; }
  .chip-bills { bottom: 8px; left: -10px; }
}

@media (max-width: 900px) {
  .hero-product-icons {
    z-index: 4;
  }
}