.pricing-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 auto 2.1rem auto;
      text-align: center;
    }
    .pricing-comparison {
      display: flex;
      gap: 24px;
      justify-content: center;
      flex-wrap: wrap;
      margin: 34px auto 16px auto;
      max-width: 780px;
      box-sizing: border-box;
      padding-left:10px;
      padding-right:10px;
    }
    .pricing-box {
      background: #f8f5fc;
      border: 1.4px solid #ecd6f4;
      border-radius: 1.2em;
      width: 355px;
      padding: 1.3em 1.5em 1.6em 1.5em;
      box-shadow: 0 2px 10px 0 rgba(60,30,80,.09);
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
    }
    .pricing-box.premium {
      border: 2px solid #b174c6;
      background: linear-gradient(130deg,#f9effc 55%,#fceafa 100%);
    }
    .pricing-title {
      font-size: 1.23em;
      font-weight: bold;
      letter-spacing: 0.03em;
      margin-bottom: 0.5em;
      color: #a21caf;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .pricing-box.premium .pricing-title {
      color: #a21caf;
    }
    .early-access-badge {
      background: linear-gradient(90deg, #a21caf, #e3adc9 85%);
      color: #fff;
      border-radius: 1em;
      font-size: 0.93em;
      padding: 2px 9px;
      margin-left: 7px;
      letter-spacing: 0.03em;
      font-weight: 600;
      vertical-align: middle;
      display: inline-block;
    }
    .pricing-price {
      font-size: 2em;
      font-weight: 700;
      color: #a21caf;
      margin-bottom: 0.28em;
    }
    .pricing-feature-list {
      list-style: none;
      padding: 0;
      margin: 0 0 1.2em 0;
      text-align: left;
      width: 100%;
      font-size: 1.06em;
    }
    .pricing-feature-list li {
      margin-bottom: 0.44em;
      display: flex;
      align-items: flex-start;
      gap: 7px;
    }
    .pricing-btn {
      margin-top: 0.7em;
      background: linear-gradient(97deg,#a21caf,#e3adc9);
      color: #fff;
      font-weight: 600;
      padding: 0.75em 2.3em;
      font-size: 1.08em;
      border: none;
      border-radius: 2em;
      cursor: pointer;
      box-shadow: 0 2px 8px 0 rgba(180,60,180,.12);
      transition: background .14s;
    }
    .pricing-btn[disabled] {
      opacity: 0.58;
      cursor: not-allowed;
    }
    @media (max-width: 800px) {
      .pricing-comparison { box-sizing: border-box; flex-direction: column; align-items: center; gap: 18px; }
      .pricing-box { box-sizing: border-box; width: 98%; min-width: 0; }
    }

    .pricing-feature-list li::before {
      content: "✓";
      color: #a21caf;
      font-weight: bold;
      display: inline-block;
      width: 1.1em;
      margin-left: -1.25em;
      margin-right: 0.45em;
      font-size: 1.06em;
      vertical-align: middle;
    }
    .pricing-feature-list {
      list-style: none;
      padding-left: 1.5em;
    }

    .pricing-btn.buy-btn {
      background: linear-gradient(97deg,#a21caf,#e3adc9);
      color: #fff;
      font-weight: 600;
      padding: 0.75em 2.3em;
      font-size: 1.1em;
      border: none;
      border-radius: 2em;
      cursor: pointer;
      box-shadow: 0 2px 8px 0 rgba(180,60,180,.12);
      margin-top: 0.9em;
      transition: background .14s;
    }
    .pricing-btn.buy-btn:hover {
      opacity: 0.95;
      background: linear-gradient(97deg,#a21caf 80%,#e3adc9 100%);
    }

    .spinner {
      display:inline-block;
      width:22px; height:22px;
      border: 3px solid #e3adc9;
      border-top: 3px solid #a21caf;
      border-radius: 50%;
      animation: spin 0.9s linear infinite;
      vertical-align:middle;
    }
    @keyframes spin {
      0% { transform: rotate(0deg);}
      100% { transform: rotate(360deg);}
    }


  .pricing-action-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #payment-spinner {
    display: none;
    align-items: center;
    gap: 10px;
    justify-content: center;
    font-size: 1.08em;
    margin-top: 24px;  /* Adjust for more/less space */
  }

  #payment-spinner .spinner {
    vertical-align: middle;
  }

  @media (max-width: 600px) {
    #payment-spinner {
      margin-top: 16px;
    }
  }

.payment-link-btn {
  display: inline-block;
  margin-top: 20px;
  border-radius: 14px;
  border: 2.5px solid #a21caf; /* Add a subtle purple border */
  box-shadow: 0 1.5px 8px 0 rgba(160,33,175,0.09);
  padding: 0;
  background: none;
  transition: box-shadow 0.18s, border-color 0.18s;
  line-height: 0;
  outline: none;
}

.payment-link-btn:hover,
.payment-link-btn:focus {
  border-color: #b174c6;   /* Lighter purple on hover/focus */
  box-shadow: 0 4px 20px 0 #c7bae2;
}

.payment-link-btn img {
  display: block;
  border-radius: 14px;
  box-shadow: 0 2px 10px 0 #e6d2f4;
  height: 46px;
  transition: box-shadow 0.18s, filter 0.18s;
}

.payment-link-btn:hover img,
.payment-link-btn:focus img {
  box-shadow: 0 8px 28px 0 #d6c0e8;
  filter: brightness(1.07);
}