/* @u */
/* Purple academy sections - Figma file MZpypl41ZiKTBvRwIRNBUV, frame 1:3144 (steps 1:3307, jokers 1:3416, guarantee 1:3471).
   <1280px: stacked. >=1280px: the block at the bottom is in Figma px, converted by build.js to calc(N * var(--u)). */
.c-pur { --u: calc(min(100vw, 1920px) / 1920); --pur: #b426ff; --pur2: #d726ff; --g2: linear-gradient(180deg, #fff 0%, #d726ff 100%);
  background: #05000f; color: #fff; direction: rtl; font-family: "Noto Sans Hebrew", sans-serif; line-height: 1.5; overflow-x: clip; isolation: isolate; }
.c-pur :where(h2, h3, p, ol, li) { margin: 0; padding: 0; }
.c-pur :where(ol) { list-style: none; }
.c-pur img { display: block; max-width: none; }
.c-pur .gtext { color: transparent; background-image: var(--g2); -webkit-background-clip: text; background-clip: text; }

/* -- steps -- */
.c-pur-steps__section { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 16px; border-block: 1px solid #333;
  background: radial-gradient(90vw 70% at 50% 0, rgba(215, 38, 255, .15) 0, rgba(215, 38, 255, 0) 79%), #05000f; }
.c-pur-steps__title { display: flex; flex-direction: column; align-items: center; text-align: center; }
.c-pur-steps__title-1 { font-size: 26px; font-weight: 400; line-height: 1.2; }
.c-pur-steps__title-2 { font-size: 28px; font-weight: 900; line-height: 1.2; color: transparent; background-image: var(--g2); -webkit-background-clip: text; background-clip: text; }
.c-pur-steps__list { --tl-w: 2px; --tl-track: rgba(215, 38, 255, .25); --tl-fill: var(--pur); position: relative; display: flex; flex-direction: column; gap: 22px; width: min(560px, 100%); }
.c-pur-step { position: relative; display: flex; flex-direction: column; gap: 8px; }
.c-pur-step__badge { position: relative; z-index: 1; align-self: flex-start; display: grid; place-items: center; width: 41px; height: 41px; font-family: "Poppins", sans-serif; font-weight: 900; font-size: 22px; line-height: 1; color: #fff; background: var(--pur); border-radius: 3px; }
.c-pur-step__card { padding: 22px 20px; background: #070707; border: 1px solid rgba(215, 38, 255, .15); box-shadow: 0 0 5px rgba(215, 38, 255, .15); }
.c-pur-step__card h3 { margin-bottom: 10px; font-size: 22px; font-weight: 900; line-height: 1.2; text-align: right; color: var(--pur); }
.c-pur-step__card p { font-size: 15px; font-weight: 300; line-height: 1.6; text-align: right; }
.c-pur-step__card p + p { margin-top: 14px; }
.c-pur-step__card br { display: none; }

/* -- jokers -- */
.c-pur-jokers__section { position: relative; padding: 50px 16px; }
.c-pur-jokers__bg { position: absolute; inset: 0; background: url("../assets/pur-jokers-bg.png") center / cover no-repeat; opacity: .9; }
.c-pur-jokers__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; width: min(1140px, 100%); margin-inline: auto; }
.c-pur-jokers__frame { position: relative; width: min(627px, 100%); padding: 28px 16px 20px; text-align: center; background: #070016; border: 1px solid var(--pur); border-radius: 25px; overflow: hidden; }
.c-pur-jokers__frame::before { content: ""; position: absolute; inset: 0; background: url("../assets/pur-jokers-frame.png") center / cover no-repeat; opacity: .2; }
.c-pur-jokers__kicker, .c-pur-jokers__title { position: relative; }
.c-pur-jokers__kicker { font-size: 22px; font-weight: 500; line-height: 1.3; }
.c-pur-jokers__title { font-size: 30px; font-weight: 900; line-height: 1.2; color: transparent; background-image: var(--g2); -webkit-background-clip: text; background-clip: text; }
.c-pur-jokers__row { display: flex; flex-direction: column; gap: 36px; width: 100%; max-width: 420px; }
.c-pur-joker { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 36px 16px 20px; text-align: center; background: #070016; border-radius: 15px 25px 25px 15px; box-shadow: 10px 10px 25px rgba(0, 0, 0, .24); }
.c-pur-joker__num { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; min-width: 76px; height: 56px; padding-inline: 14px; font-family: "Poppins", sans-serif; font-weight: 900; font-size: 30px; line-height: 1; color: #1b1b1b; -webkit-text-stroke: 1.5px #d0d0d0; background: #000; border: 1px solid var(--pur); border-radius: 15px; filter: drop-shadow(10px 10px 12.5px rgba(0, 0, 0, .27)); }
.c-pur-joker h3 { font-size: 22px; font-weight: 900; line-height: 1.15; color: transparent; background-image: var(--g2); -webkit-background-clip: text; background-clip: text; }
.c-pur-joker p { font-size: 16px; font-weight: 400; line-height: 1.6; color: #f2ece4; }
.c-pur-joker br { display: none; }

/* -- guarantee -- */
.c-pur-guar__section { position: relative; padding: 40px 16px 50px; }
.c-pur-guar__bg { position: absolute; inset: 0; background: url("../assets/pur-guar-bg.png") center / cover no-repeat; opacity: .9; }
.c-pur-guar__stage { position: relative; width: min(604px, 100%); margin-inline: auto; }
.c-pur-guar__badge { position: absolute; z-index: 2; top: -34px; right: -10px; width: 120px; height: 120px; transform: rotate(18deg); }
.c-pur-guar__card { position: relative; padding: 70px 16px 24px; text-align: center; background: #070016; border: 1px solid var(--pur2); border-radius: 15px; box-shadow: 10px 10px 25px rgba(0, 0, 0, .24); overflow: hidden; }
.c-pur-guar__card::before { content: ""; position: absolute; inset: 0; background: url("../assets/pur-guar-frame.png") center / cover no-repeat; opacity: .4; }
.c-pur-guar__hand { position: absolute; top: -26px; left: -26px; width: 130px; height: 130px; transform: rotate(-26deg); }
.c-pur-guar__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.c-pur-guar__content p { font-size: 16px; font-weight: 400; line-height: 1.7; color: #f2ece4; }
.c-pur-guar__content strong { font-weight: 700; color: var(--pur2); }
.c-pur-guar__content .w { font-weight: 700; color: #fff; }
.c-pur-guar__h1, .c-pur-guar__h2, .c-pur-guar__h3 { font-weight: 900; line-height: 1.15; color: transparent; background-image: var(--g2); -webkit-background-clip: text; background-clip: text; }
.c-pur-guar__h1 { font-size: 28px; }
.c-pur-guar__h2 { font-size: 30px; }
.c-pur-guar__h3 { padding-bottom: 6px; font-size: 24px; border-bottom: 1px solid #333; }
.c-pur-guar__h3 span { display: block; }
.c-pur-guar__p1b { font-size: 15px; color: #fff; }
.c-pur-guar__p1b strong, .c-pur-guar__p1 br, .c-pur-guar__p2 br, .c-pur-guar__p3 br { font-weight: 700; }
.c-pur-guar__p1 br, .c-pur-guar__p2 br, .c-pur-guar__p3 br { display: none; }
.c-pur-guar__pill { width: 100%; padding: 4px 12px 8px; font-size: 28px !important; font-weight: 900 !important; line-height: 1.2 !important; color: transparent !important; background: rgba(255, 239, 239, .04); border: 2px solid #333; border-radius: 25px; box-shadow: 10px 10px 25px rgba(0, 0, 0, .14); }
.c-pur-guar__pill { background-image: var(--g2); -webkit-background-clip: text; background-clip: text; background-color: transparent; }

@media (min-width: 1280px) {
  /* steps */
  .c-pur-steps__section { gap: calc(20 * var(--u)); padding: calc(70 * var(--u)) calc(260 * var(--u)); }
  .c-pur-steps__title-1 { font-size: calc(35 * var(--u)); line-height: calc(35 * var(--u)); }
  .c-pur-steps__title-2 { margin-top: calc(-2 * var(--u)); font-size: calc(40 * var(--u)); line-height: calc(40 * var(--u)); }
  .c-pur-steps__list { --tl-w: calc(4 * var(--u)); margin-top: calc(50 * var(--u)); width: calc(1400 * var(--u)); gap: calc(44 * var(--u)); }
  .c-pur-step { display: grid; grid-template-columns: calc(650 * var(--u)) calc(100 * var(--u)) calc(650 * var(--u)); align-items: center; gap: 0; direction: ltr; }
  .c-pur-step > * { direction: rtl; }
  .c-pur-step__badge { align-self: center; justify-self: center; grid-column: 2; grid-row: 1; width: calc(58 * var(--u)); height: calc(58 * var(--u)); font-size: calc(34 * var(--u)); line-height: calc(52 * var(--u)); border-radius: calc(4 * var(--u)); }
  .c-pur-step:nth-child(odd) .c-pur-step__card { grid-column: 3; grid-row: 1; }
  .c-pur-step:nth-child(even) .c-pur-step__card { grid-column: 1; grid-row: 1; }
  .c-pur-step__card { padding: calc(48 * var(--u)) calc(50 * var(--u)) calc(50 * var(--u)); }
  .c-pur-step__card h3 { margin-bottom: calc(20 * var(--u)); padding-bottom: calc(0.59 * var(--u)); font-size: calc(35 * var(--u)); line-height: calc(42 * var(--u)); white-space: nowrap; }
  .c-pur-step__card p { font-size: max(13px, calc(21 * var(--u))); line-height: calc(32 * var(--u)); white-space: nowrap; }
  .c-pur-step__card p + p { margin-top: calc(30 * var(--u)); }
  .c-pur-step__card br { display: inline; }

  /* jokers */
  .c-pur-jokers__section { padding: calc(85.96 * var(--u)) calc(390 * var(--u)) calc(85.95 * var(--u)); }
  .c-pur-jokers__bg { inset: 0 auto 0 12.38%; width: 75.24%; background-size: 100% 100%; opacity: 1; }
  .c-pur-jokers__inner { gap: calc(20 * var(--u)); width: calc(1140 * var(--u)); }
  .c-pur-jokers__head { position: relative; width: calc(627 * var(--u)); height: calc(420 * var(--u)); }
  .c-pur-jokers__frame { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: calc(420 * var(--u)); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: calc(20 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(25 * var(--u)); backdrop-filter: blur(calc(2.5 * var(--u))); }
  .c-pur-jokers__kicker { font-size: calc(31 * var(--u)); line-height: calc(31 * var(--u)); white-space: nowrap; }
  .c-pur-jokers__title { position: relative; width: calc(595 * var(--u)); height: calc(90 * var(--u)); margin-top: calc(-21 * var(--u)); font-size: calc(45 * var(--u)); line-height: calc(45 * var(--u)); white-space: nowrap; }
  .c-pur-jokers__title { top: 0; padding-top: 0; }
  .c-pur-jokers__title::before { content: none; }
  .c-pur-jokers__row { flex-direction: row; align-items: stretch; gap: calc(20 * var(--u)); width: calc(1140 * var(--u)); max-width: none; padding: calc(10 * var(--u)); }
  .c-pur-joker { flex: 1 1 0; min-width: 0; gap: calc(20 * var(--u)); padding: calc(15 * var(--u)); border-radius: calc(15 * var(--u)) calc(25 * var(--u)) calc(25 * var(--u)) calc(15 * var(--u)); }
  .c-pur-joker__num { position: relative; top: calc(-24 * var(--u)); left: auto; transform: none; width: calc(89.09 * var(--u)); height: calc(68.7 * var(--u)); margin-bottom: calc(-24 * var(--u)); padding: 0; font-size: calc(38 * var(--u)); line-height: calc(36.7 * var(--u)); border-radius: calc(15 * var(--u)); }
  .c-pur-joker h3 { width: calc(300.3 * var(--u)); font-size: calc(25 * var(--u)); line-height: calc(25 * var(--u)); white-space: nowrap; }
  .c-pur-joker p { padding-bottom: calc(14.39 * var(--u)); font-size: max(13px, calc(18 * var(--u))); line-height: calc(27 * var(--u)); white-space: nowrap; }
  .c-pur-joker br { display: inline; }

  /* guarantee */
  .c-pur-guar__section { padding: calc(99.19 * var(--u)) calc(390 * var(--u)) calc(50 * var(--u)); }
  .c-pur-guar__bg { inset: 0 auto 0 2.65%; width: 94.7%; background-size: 100% 100%; opacity: 1; }
  .c-pur-guar__stage { width: calc(604.19 * var(--u)); height: calc(802.31 * var(--u)); margin: 0 auto; }
  .c-pur-guar__badge { top: calc(-49 * var(--u)); left: calc(438 * var(--u)); right: auto; width: calc(205.19 * var(--u)); height: calc(205.19 * var(--u)); transform: rotate(18deg); }
  .c-pur-guar__card { position: relative; width: calc(604.19 * var(--u)); height: calc(802.31 * var(--u)); padding: 0; border-radius: calc(15 * var(--u)); }
  .c-pur-guar__hand { top: calc(-45 * var(--u)); left: calc(-30 * var(--u)); width: calc(211.7 * var(--u)); height: calc(211.7 * var(--u)); }
  .c-pur-guar__content { position: static; display: block; }
  .c-pur-guar__content > * { position: absolute; left: 0; right: 0; margin: 0; }
  .c-pur-guar__content p, .c-pur-guar__content h2 { white-space: nowrap; }
  .c-pur-guar__content .c-pur-guar__p1 { top: calc(137.7 * var(--u)); font-size: max(13px, calc(18 * var(--u))); line-height: calc(27 * var(--u)); }
  .c-pur-guar__content .c-pur-guar__p1b { top: calc(257.1 * var(--u)); font-size: max(13px, calc(18 * var(--u))); line-height: calc(18 * var(--u)); }
  .c-pur-guar__h1 { top: calc(293.1 * var(--u)); font-size: calc(38 * var(--u)); line-height: calc(38 * var(--u)); }
  .c-pur-guar__h2 { top: calc(330.1 * var(--u)); font-size: calc(40 * var(--u)); line-height: calc(40 * var(--u)); }
  .c-pur-guar__content .c-pur-guar__p2 { top: calc(430.1 * var(--u)); font-size: max(13px, calc(18 * var(--u))); line-height: calc(27 * var(--u)); }
  .c-pur-guar__h3 { top: calc(543.5 * var(--u)); left: calc(226.57 * var(--u)); right: auto; width: calc(149.05 * var(--u)); padding-bottom: calc(6.72 * var(--u)); font-size: calc(30 * var(--u)); line-height: calc(30 * var(--u)); }
  .c-pur-guar__content .c-pur-guar__p3 { top: calc(630.2 * var(--u)); font-size: max(13px, calc(18 * var(--u))); line-height: calc(27 * var(--u)); }
  .c-pur-guar__pill { top: calc(725.6 * var(--u)); left: calc(15 * var(--u)); right: calc(15 * var(--u)); width: auto; padding: calc(2 * var(--u)) calc(12 * var(--u)) calc(7.72 * var(--u)); font-size: calc(45 * var(--u)) !important; line-height: calc(45 * var(--u)) !important; }
  .c-pur-guar__p1 br, .c-pur-guar__p2 br, .c-pur-guar__p3 br { display: inline; }
}
