html,
body {
  margin: 0;
  padding: 0;
  background: #030303;
  color: #f4f0e8;
}

jb-discount-stage-email,
jb-discount-stage,
.jb_discount_stage {
  display: block;
  width: 100%;
  background: #030303;
  color: #f4f0e8;
  font-family: Arial, Helvetica, sans-serif;

  * {
    box-sizing: border-box;
  }

  button,
  input,
  select {
    font: inherit;
  }

  .jb_field:focus,
  .jb_field:focus-within,
  .jb_field:focus-visible{
    outline: none;
  }

  button {
    cursor: pointer;
  }

  /* Utility classes */
  .jb_serif {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -0.055em;
  }

  .jb_mono {
    font-family:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }

  .jb_text_red {
    color: #DD3735;
  }

  .jb_hidden {
    display: none !important;
  }

  /* Header */
  .jb_oc_app {
    width: 100%;
    padding: 30px 15px;
    background: #030303;
  }

  .jb_phone {
    width: 100%;
    max-width: 440px;
    margin: auto;
    background: #050505;
    border: 1px solid rgba(255, 38, 38, 0.25);
    border-radius: 6px;
    overflow: hidden;
  }

  .jb_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(244, 240, 232, 0.13);

    .jb_header_left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .jb_back_btn {
      background: transparent;
      border: 0;
      color: rgba(255, 255, 255, 0.55);
      font-size: 10px;
      letter-spacing: 0.15em;
      padding: 0;
      text-transform: uppercase;
      transition: color 0.2s ease;
      cursor: pointer;

      &:hover {
        color: #ff2626;
      }
    }

    .jb_logo {
      font-size: 14px;
      font-weight: 600;
    }

    .jb_header_tax {
      color: #FF544E;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }
  }

  /* Activity ticker */
  .jb_ticker_wrap {
    overflow: hidden;
    border-bottom: 1px solid rgba(244, 240, 232, 0.13);
    background: #090909;
    padding: 8px 0;

    .jb_ticker {
      display: flex;
      width: max-content;
      animation: jb_ticker 20s linear infinite;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: #767777;

      .jb_ticker_content {
        display: flex;
        gap: 32px;
        padding-right: 32px;
      }
    }
  }

  /* Stage system */
  .jb_stage_wrap {
    display: block;
  }

  .jb_stage {
    display: none;
    min-height: 650px;
    padding: 32px 20px;

    &.jb_active {
      display: block;
      animation: jb_stageIn 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .jb_notice {
      color: #FF544E;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
    }

    .jb_hero_title {
      margin: 25px 0 0;
      font-size: clamp(62px, 18vw, 74px);
      line-height: 0.78;
      font-weight: 400 !important;

      span {
        color: #DD3735;
        font-style: italic;
      }
    }

    .jb_section_title {
      margin: 20px 0 0;
      font-size: 50px;
      line-height: 0.88;
      font-weight: 400 !important;
      max-width: 85%;
    }

    .jb_intro_text,
    .jb_section_description {
      margin-top: 24px;
      font-size: 15px;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.55);
    }

    .jb_fair {
      margin: 12px 0 0;
      font-size: 18px;
    }

    /* Stage 1, intro */
    &.jb_stage_intro {
      .jb_info_grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        margin-top: 40px;
        background: rgba(255, 255, 255, 0.1);

        .jb_info_box {
          min-height: 82px;
          padding: 16px;
          background: #050505;
          font-size: 14px;

          &.jb_info_box_full {
            grid-column: 1 / -1;
          }

          .jb_info_label {
            margin-bottom: 6px;
            color: rgba(255, 255, 255, 0.28);
            font-size: 9px;
            text-transform: uppercase;
          }
        }
      }

      .jb_activity_toast {
        margin-top: 20px;
        padding: 16px;
        border: 1px solid rgba(255, 38, 38, 0.42);
        background: #0b0505;
        animation: jb_toastIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);

        .jb_activity_label {
          display: flex;
          align-items: center;
          gap: 8px;
          color: rgba(255, 255, 255, 0.28);
          font-size: 9px;
          text-transform: uppercase;
          letter-spacing: 0.13em;

          .jb_pulse_dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #ff2626;
            animation: jb_pulse 1.25s ease-in-out infinite;
          }
        }

        .jb_activity_text {
          margin-top: 8px;
          font-size: 14px;
          line-height: 1.5;
        }
      }
    }

    /* Stage 2, label form */
    &.jb_stage_label_form {
      .jb_woven_label {
        background:
          repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.045) 0,
            rgba(0, 0, 0, 0.045) 1px,
            transparent 1px,
            transparent 3px
          ),
          repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.018) 0,
            rgba(0, 0, 0, 0.018) 1px,
            transparent 1px,
            transparent 4px
          ),
          #f1ede4;
        color: #070707;
        margin-top: 32px;
        padding: 20px;

        .jb_label_top {
          display: flex;
          justify-content: space-between;
          gap: 10px;
          font-size: 8px;
          text-transform: uppercase;
          letter-spacing: 0.16em;
          color: rgba(0, 0, 0, 0.35);
        }

        .jb_label_main {
          margin-top: 40px;
          padding: 36px 0;
          border-top: 1px solid rgba(0, 0, 0, 0.15);
          border-bottom: 1px solid rgba(0, 0, 0, 0.15);
          text-align: center;

          .jb_label_brand {
            font-size: 36px;
            font-weight: 400;
          }

          .jb_label_size {
            margin-top: 12px;
            color: rgba(0, 0, 0, 0.4);
            font-size: 11px;
            letter-spacing: 0.2em;
          }
        }

        .jb_label_bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
          margin-top: 16px;
          color: rgba(0, 0, 0, 0.35);
          font-size: 8px;
          text-transform: uppercase;
          letter-spacing: 0.11em;
          line-height: 1.5;

          .jb_red_square {
            width: 28px;
            height: 28px;
            flex-shrink: 0;
            background: #BA1A20;
          }
        }
      }

      .jb_field {
        display: block;
        margin-top: 28px;

        .jb_field_label {
          display: block;
          margin-bottom: 8px;
          color: rgba(255, 255, 255, 0.38);
          font-size: 9px;
          text-transform: uppercase;
          letter-spacing: 0.15em;
        }

        input,
        select {
          width: 100%;
          padding: 12px 0;
          border: 0;
          border-bottom: 1px solid rgba(255, 38, 38, 0.42);
          outline: none;
          background: transparent;
          color: #fff;
          font-size: 24px;
          text-transform: uppercase;

          &::placeholder {
            color: rgba(255, 255, 255, 0.15);
          }
        }

        select {
          background: #050505;
        }
      }
    }

    /* Stage 3, scanner */
    &.jb_stage_scanner {
      .jb_scanner {
        position: relative;
        height: 390px;
        margin-top: 28px;
        overflow: hidden;
        border: 1px solid rgba(255, 38, 38, 0.42);
        background:
          repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 4px
          ),
          #0a0a0a;

        .jb_scanner_line {
          position: absolute;
          top: -2%;
          right: 0;
          left: 0;
          height: 2px;
          background: #ff2626;
          box-shadow: 0 0 18px rgba(255, 38, 38, 0.75);
          animation: jb_scan 1s linear infinite;
        }

        .jb_thread {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 1px;
          background: #ff2626;
          opacity: 0.3;
          animation: jb_thread 1.8s ease-in-out infinite;

          &.jb_thread1 {
            left: 10%;
          }

          &.jb_thread2 {
            left: 28%;
            animation-delay: 0.25s;
          }

          &.jb_thread3 {
            left: 53%;
            animation-delay: 0.5s;
          }

          &.jb_thread4 {
            left: 76%;
            animation-delay: 0.8s;
          }

          &.jb_thread5 {
            left: 91%;
            animation-delay: 1.1s;
          }
        }

        .jb_scanner_content {
          position: relative;
          z-index: 2;
          display: flex;
          height: 100%;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;

          .jb_scanner_label {
            color: rgba(255, 255, 255, 0.3);
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.17em;
          }

          .jb_scan_brand {
            margin-top: 20px;
            font-size: 50px;
          }

          .jb_checks {
            margin-top: 36px;
            color: rgba(255, 255, 255, 0.32);
            font-size: 9px;
            line-height: 2.1;
            text-transform: uppercase;
            letter-spacing: 0.12em;
          }
        }
      }
    }

    /* Stage 4, reward */
    &.jb_stage_reward {
      .jb_reward {
        margin-top: 5px;
        color: #DD3735;
        font-size: 104px;
        font-family: 'Arimo';
        line-height: 1;
      }

      .jb_reward_rule {
        color: rgba(255, 255, 255, 0.42);
        font-size: 14px;
      }

      .jb_reward_label {
        background:
          repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.045) 0,
            rgba(0, 0, 0, 0.045) 1px,
            transparent 1px,
            transparent 3px
          ),
          repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.018) 0,
            rgba(0, 0, 0, 0.018) 1px,
            transparent 1px,
            transparent 4px
          ),
          #f1ede4;
        color: #070707;
        margin-top: 32px;
        padding: 20px;
        transform: rotate(-1deg);

        .jb_label_top {
          display: flex;
          justify-content: space-between;
          gap: 10px;
          font-size: 8px;
          text-transform: uppercase;
          letter-spacing: 0.16em;
          color: rgba(0, 0, 0, 0.35);
        }

        .jb_reward_middle {
          margin-top: 36px;
          padding: 32px 0;
          border-top: 1px solid rgba(0, 0, 0, 0.15);
          border-bottom: 1px solid rgba(0, 0, 0, 0.15);
          text-align: center;

          .jb_reward_brand {
            font-size: 30px;
            font-weight: 400;
          }

          .jb_reward_sub {
            margin-top: 10px;
            color: rgba(0, 0, 0, 0.4);
            font-size: 10px;
            letter-spacing: 0.18em;
          }
        }

        .jb_reward_bottom {
          display: flex;
          align-items: end;
          justify-content: space-between;
          margin-top: 16px;

          .jb_code_label {
            color: rgba(0, 0, 0, 0.35);
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.12em;
          }

          .jb_discount_code {
            margin-top: 5px;
            font-size: 20px;
          }

          .jb_paid_stamp {
            padding: 8px 12px;
            border: 2px solid #DD3735;
            color: #DD3735;
            font-size: 14px;
            font-weight: 400;
            transform: rotate(-4deg);
          }
        }
      }

      .jb_demo_code_toggle {
        width: 100%;
        margin-top: 16px;
        padding-bottom: 8px;
        border: 0;
        border-bottom: 1px solid rgba(244, 240, 232, 0.13);
        background: transparent;
        color: rgba(255, 255, 255, 0.34);
        text-align: left;
        font-size: 12px;
      }

      .jb_code_pool {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 16px;

        button {
          padding: 12px;
          border: 1px solid rgba(255, 38, 38, 0.42);
          background: transparent;
          color: #fff;
          text-align: left;

          small {
            display: block;
            margin-top: 5px;
            color: rgba(255, 255, 255, 0.35);
            font-size: 10px;
          }
        }
      }

      .jb_field {
        display: block;
        margin-top: 28px;

        .jb_field_label {
          display: block;
          margin-bottom: 8px;
          color: rgba(255, 255, 255, 0.38);
          font-size: 9px;
          text-transform: uppercase;
          letter-spacing: 0.15em;
        }

        input,
        select {
          width: 100%;
          padding: 12px 0;
          border: 0;
          border-bottom: 1px solid rgba(255, 38, 38, 0.42);
          outline: none;
          background: transparent;
          color: #fff;
          font-size: 24px;
          text-transform: uppercase;

          &::placeholder {
            color: rgba(255, 255, 255, 0.15);
          }
        }

        select {
          background: #050505;
        }
      }
    }

    /* Stage 5, products */
    &.jb_stage_products {
      .jb_proof_list {
        margin-top: 32px;

        .jb_proof_item {
          padding-top: 12px;
          margin-top: 18px;
          border-top: 1px solid rgba(255, 38, 38, 0.42);
          font-size: 14px;
          line-height: 1.5;

          .jb_proof_number {
            margin-bottom: 4px;
            color: #ff2626;
            font-size: 9px;
          }
        }
      }

      .jb_floating_label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-top: 36px;
        padding: 16px;
        border: 1px solid rgba(255, 38, 38, 0.42);

        .jb_float_small {
          color: rgba(255, 255, 255, 0.3);
          font-size: 9px;
          text-transform: uppercase;
        }

        .jb_float_value {
          color: #ff2626;
          font-size: 42px;
        }
      }

      .jb_product_card {
        margin-top: 24px;
        padding: 12px;
        border: 1px solid rgba(244, 240, 232, 0.13);

        .jb_product_image {
          display: flex;
          aspect-ratio: 4 / 3;
          align-items: end;
          padding: 16px;
          background: #0b0b0b;
          color: rgba(255, 255, 255, 0.2);
          font-family: ui-monospace, monospace;
          font-size: 9px;
        }

        .jb_product_info {
          display: flex;
          align-items: end;
          justify-content: space-between;
          gap: 12px;
          margin-top: 12px;

          .jb_product_name {
            font-size: 14px;
          }

          .jb_product_type {
            margin-top: 3px;
            color: rgba(255, 255, 255, 0.28);
            font-size: 10px;
          }

          .jb_product_price {
            text-align: right;

            .jb_old_price {
              color: rgba(255, 255, 255, 0.25);
              font-size: 10px;
              text-decoration: line-through;
            }

            .jb_new_price {
              color: #ff2626;
              font-size: 30px;
            }
          }
        }
      }

      .jb_prototype_note {
        margin-top: 12px;
        color: rgba(255, 255, 255, 0.24);
        text-align: center;
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
      }
    }

    /* Stage 6, receipt */
    &.jb_stage_receipt {
      .jb_checkout_content {
        display: flex;
        min-height: 570px;
        flex-direction: column;
        justify-content: space-between;

        .jb_receipt {
          background:
            repeating-linear-gradient(
              0deg,
              rgba(0, 0, 0, 0.045) 0,
              rgba(0, 0, 0, 0.045) 1px,
              transparent 1px,
              transparent 3px
            ),
            repeating-linear-gradient(
              90deg,
              rgba(0, 0, 0, 0.018) 0,
              rgba(0, 0, 0, 0.018) 1px,
              transparent 1px,
              transparent 4px
            ),
            #f1ede4;
          color: #070707;
          padding: 20px;

          .jb_receipt_title {
            color: rgba(0, 0, 0, 0.35);
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.15em;
          }

          .jb_receipt_row {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            padding: 14px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.15);
            font-size: 14px;

            &.jb_total {
              border-bottom: 0;
              font-weight: 400;
            }
          }
        }
      }
    }
  }

  /* Progress indicator */
  .jb_progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid rgba(244, 240, 232, 0.13);

    .jb_progress_label {
      color: #767777;
      font-size: 8px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }

    .jb_progress_bars {
      display: flex;
      gap: 6px;

      .jb_progress_item {
        width: 20px;
        height: 6px;
        background: rgba(255, 255, 255, 0.12);

        &.jb_active {
          background: #BA1A20;
        }
      }
    }
  }

  /* Buttons */
  .jb_primary_btn {
    width: 100%;
    margin-top: 32px;
    padding: 16px 20px;
    border: 0;
    border-radius: 999px;
    background: #DD3735;
    color: #FFEDEB;
    font-size: 13px;
    font-weight: 400;
    transition:
      transform 0.2s ease,
      opacity 0.2s ease;

    &:hover {
      transform: scale(1.015);
    }

    &:active {
      transform: scale(0.98);
    }

    &:disabled {
      opacity: 0.25;
      cursor: not-allowed;
    }
  }

  /* Animations */
  .jb_raise {
    animation: jb_raise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .jb_delay1 {
    animation-delay: 0.09s;
  }

  .jb_delay2 {
    animation-delay: 0.18s;
  }

  .jb_delay3 {
    animation-delay: 0.27s;
  }

  .jb_label_enter {
    animation: jb_labelEnter 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .jb_flash {
    animation: jb_flash 0.6s ease both;
  }

  @media (max-width: 480px) {
    .jb_oc_app {
      padding: 0;
    }

    .jb_phone {
      border-right: 0;
      border-left: 0;
    }

    .jb_hero_title {
      font-size: 70px;
    }

    .jb_section_title {
      font-size: 46px;
      font-weight: 400 !important;
    }

    .jb_reward {
      font-size: 92px;
    }
  }
}

@keyframes jb_stageIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes jb_raise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes jb_labelEnter {
  from {
    opacity: 0;
    transform: rotate(-5deg) translateY(32px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: rotate(-1deg) translateY(0) scale(1);
  }
}

@keyframes jb_scan {
  to {
    top: 102%;
  }
}

@keyframes jb_ticker {
  to {
    transform: translateX(-50%);
  }
}

@keyframes jb_pulse {
  50% {
    opacity: 0.35;
  }
}

@keyframes jb_thread {
  0%,
  100% {
    transform: scaleY(0.2);
    opacity: 0.1;
  }

  50% {
    transform: scaleY(1);
    opacity: 0.5;
  }
}

@keyframes jb_toastIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes jb_flash {
  0%,
  100% {
    background-color: #050505;
  }

  35% {
    background-color: #260000;
  }
}

.jb_under_cta{
  text-align: center;
  padding: 15px;
  font-size: 10px;
  color: #767777;
}