@font-face {
  font-family: "PayJoy Display";
  src: url("payjoy-display.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "PayJoy Body";
  src: url("payjoy-body.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

.payjoy-promo {
  padding: 0;
  background: transparent;
}

.payjoy-promo__canvas {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: min(100%, 640px);
  aspect-ratio: 1122 / 1402;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  font-family: "PayJoy Body", Arial, sans-serif;
}

.payjoy-promo__symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.payjoy-promo__corner { position: absolute; z-index: -1; inset: 0 auto auto 0; width: 17%; height: 12.5%; }
.payjoy-promo__swoosh {
  position: absolute;
  z-index: -1;
  top: 61%;
  left: -13%;
  width: 127%;
  height: 66%;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 35% 8%, #b3ff3b 0, #7ee016 18%, #23b500 41%, #008338 64%, #006c30 100%);
  transform: rotate(-5deg);
}

.payjoy-promo__brand {
  position: absolute;
  z-index: 3;
  top: 3.05%;
  left: 38.9%;
  display: flex;
  align-items: center;
  gap: 1.45cqw;
  height: 5.3%;
  color: #59c500;
}
.payjoy-promo__brand svg { width: 6.55cqw; height: 6.55cqw; flex: none; }
.payjoy-promo__brand-name {
  font: 900 6.5cqw/.95 "PayJoy Display", "Arial Black", sans-serif;
  letter-spacing: -.055em;
  background: linear-gradient(5deg, #003c00 0%, #53c900 80%);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.payjoy-promo__title {
  position: absolute;
  z-index: 3;
  top: 8.65%;
  left: 18.7%;
  width: 74.6%;
  margin: 0;
  font: 900 11.25cqw/.88 "PayJoy Display", "Arial Black", sans-serif;
  letter-spacing: -.065em;
  text-align: center;
}
.payjoy-promo__title span {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  color: transparent;
  background: linear-gradient(105deg, #004a00 2%, #008e00 39%, #009d00 55%, #003d00 96%);
  background-clip: text;
  -webkit-background-clip: text;
  white-space: nowrap;
}
.payjoy-promo__title span:first-child { transform: translateX(-1.6cqw) scaleX(.965); }
.payjoy-promo__title span + span {
  max-width: none;
  font-size: 10.3cqw;
  line-height: .96;
  letter-spacing: -.07em;
  transform: scaleX(.96);
  transform-origin: left center;
}
.payjoy-promo__rays { position: absolute; z-index: 2; top: 11.8%; width: 5.8%; height: 5.5%; overflow: visible; }
.payjoy-promo__rays--left { left: 17.8%; }
.payjoy-promo__rays--right { right: 7.1%; transform: scaleX(-1); }

.payjoy-promo__photo { position: absolute; display: block; overflow: visible; }
.payjoy-promo__photo--desktop, .payjoy-promo__desktop-ground, .payjoy-promo__gift-rays { display: none; }
.payjoy-promo__photo--woman { z-index: 1; left: 1.7825%; top: 22.6106%; width: 52.139%; height: 65.3352%; }
.payjoy-promo__photo--honor { z-index: 6; left: 21.3904%; top: 53.7803%; width: 31.1943%; height: 36.5193%; }
.payjoy-promo__photo--gifts { z-index: 7; left: 52.4064%; top: 62.5535%; width: 47.0588%; height: 30.3852%; }

.payjoy-promo__requirements { position: absolute; z-index: 3; top: 26.6%; left: 56.05%; width: 41.7%; }
.payjoy-promo__requirements h3 {
  display: grid;
  place-items: center;
  height: 7.58cqw;
  margin: 0 0 1.4cqw;
  border-radius: 4cqw;
  color: #fff;
  background: linear-gradient(110deg, #65d100 0%, #00852a 46%, #00501d 100%);
  font: 700 5.1cqw/1 "PayJoy Body", Arial, sans-serif;
  letter-spacing: -.055em;
  white-space: nowrap;
}
.payjoy-promo__requirements ul { display: grid; gap: 1.8cqw; margin: 0; padding: 0; list-style: none; }
.payjoy-promo__requirement {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 9.8cqw;
  padding: .8cqw .6cqw .8cqw 12.5cqw;
}
.payjoy-promo__requirement::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 5cqw;
  border-radius: 2.5cqw;
  background: linear-gradient(100deg, #f0f0f0, #fafafa);
  box-shadow: 0 1.3cqw 2.5cqw rgba(27, 42, 31, .035);
  content: "";
}
.payjoy-promo__requirement + li { min-height: 12.25cqw; }
.payjoy-promo__requirement p {
  margin: 0;
  color: #0c1237;
  font-size: 2.98cqw;
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.055em;
  white-space: nowrap;
}
.payjoy-promo__requirement:first-child p { white-space: nowrap; }
.payjoy-promo__icon {
  position: absolute;
  left: 0;
  top: 50%;
  display: grid;
  place-items: center;
  width: 10.1cqw;
  height: 10.1cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 20% 15%, #70d700 0%, #00a600 38%, #00641f 85%);
  transform: translateY(-50%);
  box-shadow: .5cqw .7cqw 1.5cqw rgba(0, 77, 22, .1);
}
.payjoy-promo__requirement + li .payjoy-promo__icon { height: 11cqw; }
.payjoy-promo__icon svg { width: 7.5cqw; height: 7.5cqw; }

.payjoy-promo__gift-banner {
  position: absolute;
  z-index: 4;
  top: 53.92%;
  left: 52.94%;
  display: flex;
  align-items: center;
  gap: 1.3cqw;
  width: 44.3%;
  height: 10.13%;
  padding: 1.6cqw 1.7cqw 1.6cqw 2.3cqw;
  border-radius: 3.5cqw;
  color: #fff;
  background: radial-gradient(ellipse at 58% 90%, #087e20, #00531d 85%);
}
.payjoy-promo__gift-banner > svg { width: 7.1cqw; height: 8.5cqw; flex: none; }
.payjoy-promo__gift-banner p {
  margin: 0;
  padding-left: 1.3cqw;
  border-left: .24cqw solid #fff;
  font-size: 4.1cqw;
  letter-spacing: -.06em;
  line-height: .98;
  white-space: nowrap;
}
.payjoy-promo__gift-banner strong { display: block; color: #f0ff00; font-size: 3.98cqw; font-weight: 700; }

.payjoy-promo__green-stage {
  position: absolute;
  z-index: 2;
  right: -4%;
  bottom: -1.5%;
  width: 57%;
  height: 19%;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 40% 0%, #a5ef22 0%, #50ce00 38%, #13a000 72%, #047d00 100%);
  box-shadow: inset 0 2.5cqw 2cqw rgba(174, 250, 23, .25);
}
.payjoy-promo__green-stage::after {
  position: absolute;
  inset: 0 0 7cqw;
  border-bottom: .5cqw solid rgba(183, 255, 44, .6);
  border-radius: 50%;
  content: "";
}
.payjoy-promo__white-stage {
  position: absolute;
  z-index: 5;
  bottom: -8%;
  left: -6%;
  width: 65%;
  height: 19.8%;
  border-radius: 50% 50% 0 0 / 20% 20% 0 0;
  background: linear-gradient(95deg, #bfbfbf, #ededed 50%, #fff);
}
.payjoy-promo__white-stage::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 31%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 62% 35%, #d5dfd0 0%, #fff 60%, #f8f8f8 100%);
  content: "";
}

@media (max-width: 640px) {
  .payjoy-promo__canvas { width: 100%; }
}

/* Desktop follows the horizontal composition; mobile keeps its own artwork. */
@media (min-width: 900px) {
  .payjoy-promo__canvas { width: min(100%, 1672px); aspect-ratio: 1672 / 941; }
  .payjoy-promo__corner { width: 14.06%; height: 19.55%; }
  .payjoy-promo__swoosh { display: none; }
  .payjoy-promo__desktop-ground { position: absolute; z-index: -1; inset: 0; display: block; width: 100%; height: 100%; }

  .payjoy-promo__brand { left: 53%; top: 7.12%; gap: 1.15cqw; height: 8.08%; }
  .payjoy-promo__brand svg { width: 4.65cqw; height: 4.65cqw; }
  .payjoy-promo__brand-name { font-size: 4.65cqw; }
  .payjoy-promo__title { top: 16.26%; left: 39.17%; width: 51.91%; font-size: 7.6cqw; line-height: .82; }
  .payjoy-promo__title span:first-child { transform: none; }
  .payjoy-promo__title span + span { margin-top: .25cqw; font-size: 7cqw; line-height: .92; transform: none; }
  .payjoy-promo__rays { top: 18.8%; width: 4.19%; height: 7.01%; }
  .payjoy-promo__rays--left { left: 38.6%; }
  .payjoy-promo__rays--right { right: 9.1%; }
  .payjoy-promo__gift-rays { position: absolute; z-index: 3; display: block; left: 95.8%; top: 74.5%; width: 3.3%; height: 7%; transform: scaleX(-1); }

  .payjoy-promo__photo--woman,
  .payjoy-promo__photo--honor,
  .payjoy-promo__photo--gifts { display: none; }
  .payjoy-promo__photo--desktop { display: block; }
  .payjoy-promo__photo--desktop-woman { z-index: 1; left: .8971%; top: 4.6759%; width: 37.3804%; height: 81.9341%; }
  .payjoy-promo__photo--desktop-honor { z-index: 6; left: 16.3876%; top: 49.8406%; width: 16.6268%; height: 40.2763%; }
  .payjoy-promo__photo--desktop-gifts { z-index: 7; left: 33.134%; top: 56.7481%; width: 28.7081%; height: 35.0691%; }

  .payjoy-promo__requirements { left: 65.55%; top: 39.96%; width: 28.89%; }
  .payjoy-promo__requirements h3 { height: 4.78cqw; margin-bottom: .65cqw; border-radius: 2.5cqw; font-size: 3.45cqw; }
  .payjoy-promo__requirements ul { gap: .9cqw; }
  .payjoy-promo__requirement { min-height: 5.9cqw; padding: .6cqw .8cqw .6cqw 8cqw; }
  .payjoy-promo__requirement::before { left: 3cqw; border-radius: 1.7cqw; box-shadow: 0 .65cqw 1.3cqw rgba(27, 42, 31, .035); }
  .payjoy-promo__requirement + li { min-height: 7.1cqw; }
  .payjoy-promo__requirement p { font-size: 1.91cqw; line-height: 1; }
  .payjoy-promo__requirement + li p { font-size: 1.8cqw; }
  .payjoy-promo__icon { width: 6.7cqw; height: 6.3cqw; }
  .payjoy-promo__requirement + li .payjoy-promo__icon { width: 6.95cqw; height: 6.95cqw; }
  .payjoy-promo__icon svg { width: 4.7cqw; height: 4.7cqw; }

  .payjoy-promo__gift-banner { left: 64.41%; top: 76.2%; width: 31.7%; height: 14.35%; border-radius: 2.4cqw; padding: 1.1cqw 1.2cqw; gap: .9cqw; }
  .payjoy-promo__gift-banner > svg { width: 4.5cqw; height: 5.3cqw; }
  .payjoy-promo__gift-banner p { padding-left: .8cqw; border-left-width: .15cqw; font-size: 2.9cqw; line-height: .98; }
  .payjoy-promo__gift-banner strong { font-size: 2.8cqw; }

  .payjoy-promo__green-stage { left: 32.12%; top: 86.4%; right: auto; bottom: auto; width: 34.8%; height: 18%; }
  .payjoy-promo__green-stage::after { inset: 0 0 3.6cqw; border-bottom-width: .3cqw; }
  .payjoy-promo__white-stage { left: 0; bottom: -7%; width: 36.78%; height: 21.45%; }
  .payjoy-promo__white-stage::before { height: 34%; }
}