/* =====================================================================
   BUY PAGE — Mobile-first (xs < 576px)
   Design references:
   - XS (<576): 1613_143900 (480px)
   - SM (>=576): 1613_142255 (576px)
   - MD (>=768): 1613_140304 (768px)
   - LG (>=992): 1612_138695 (992px)
   - XL (>=1200): 1612_136321 (1200px)
   - XXL (>=1400): 1612_135266 (1440px)
   - XXXL (>=1920): 1612_131400 (1920px)
   ===================================================================== */

:root {
  --b-blue: #26a7fe;
  --b-green: #02cb64;
  --b-red-1: #f93845;
  --b-red-2: #fd708a;
  --b-t-1: #000000e5;
  --b-t-2: #000000b2;
  --b-t-3: #00000080;
  --b-card-border: #d6d6d6;
  --b-gradient: linear-gradient(180deg, #26a7fe 0%, #02cb64 100%);
  --b-gradient-red: linear-gradient(180deg, #f93845 0%, #fd708a 100%);
}

.buy-page {
  background: #ffffff;
  font-family: Figtree, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
}

/* =====================================================================
   BANNER — XS (<576px)
   ===================================================================== */
.b-banner {
  width: 100%;
  background: linear-gradient(90deg, #eaf6ff 0%, #e9fff2 100%);
}

.b-banner-img {
  display: block;
  width: 100%;
  height: 86px;
  object-fit: cover;
}

/* =====================================================================
   PRICING SECTION — XS (<576px)
   ===================================================================== */
.b-pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  padding: 55px 20px;
  row-gap: 40px;
}

.b-pricing-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  row-gap: 12px;
}

.b-pricing-title {
  flex-shrink: 0;
  align-self: stretch;
  text-align: center;
  line-height: 67px;
  letter-spacing: 0;
  color: var(--b-t-1);
  font-size: 42px;
  font-weight: 700;
  margin: 0;
}

.b-pricing-subtitle {
  flex-shrink: 0;
  align-self: stretch;
  text-align: center;
  line-height: 36px;
  letter-spacing: 0;
  color: var(--b-t-2);
  font-size: 24px;
  margin: 0;
}

/* ---- Plans list (XS: single column) ---- */
.b-plans {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 20px;
}

/* ---- Plan card ---- */
.b-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  justify-content: space-between;
  border: 1px solid var(--b-card-border);
  border-radius: 40px;
  padding: 59px 39px;
  min-height: 608px;
}

.b-plan--featured:hover {
  outline: 1px solid var(--b-blue);
  border-radius: 40px;
  box-shadow: 0px 0px 20px 0px #26a7fe1f;
  background-image: linear-gradient(180deg, #26a7fe14 0%, #26a7fe00 50.07%);
}

.b-plan--all {
  border-radius: 40px;
  box-shadow: 0px 0px 20px 0px #26a7fe1f;
  background: var(--b-gradient);
  overflow: hidden;
  min-height: 568px;
}

/* Plan head */
.b-plan-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 8px;
}

.b-plan-name {
  flex-shrink: 0;
  align-self: stretch;
  line-height: 34px;
  letter-spacing: 0;
  color: var(--b-t-1);
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.b-plan-name--gradient {
  background: var(--b-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.b-plan-name--white {
  color: #ffffff;
}

.b-plan-meta {
  display: flex;
  align-items: center;
  align-self: stretch;
  column-gap: 4px;
}

.b-plan-meta-text {
  flex-shrink: 0;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--b-t-3);
  font-size: 16px;
}

.b-plan-meta-text--white {
  color: #ffffffb2;
}

.b-plan-info {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Price */
.b-plan-price {
  display: flex;
  align-items: center;
  align-self: stretch;
  column-gap: 8px;
}

.b-plan-price-value {
  flex-shrink: 0;
  background: var(--b-gradient-red);
  background-clip: text;
  -webkit-background-clip: text;
  line-height: 56px;
  letter-spacing: 0;
  color: transparent;
  font-size: 40px;
  font-weight: 700;
}

.b-plan-price-value--light {
  color: #f5f5cb;
  background: none;
  -webkit-background-clip: initial;
}

.b-plan-price-original {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  height: 39px;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--b-t-3);
  font-size: 16px;
  text-decoration: line-through;
}

.b-plan-price-original--light {
  color: #ffffffb2;
}

/* Features */
.b-plan-features {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.b-plan-feature {
  display: flex;
  align-items: center;
  align-self: stretch;
  column-gap: 8px;
  color: var(--b-t-1);
  font-size: 16px;
  line-height: 22px;
}

.b-plan-feature-text--white {
  color: #ffffff;
}

.b-feature-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* Buttons */
.b-plan-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  row-gap: 12px;
}

.b-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  border-radius: 999px;
  padding: 10px 36px;
  width: 240px;
  min-width: max-content;
  height: 58px;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
}

.b-btn-win {
  background: var(--b-blue);
  color: #ffffff;
}

.b-btn-mac {
  background: var(--b-green);
  color: #ffffff;
}

/* All-In-One card: light buttons */
.b-btn-win--light {
  background: #ffffff;
}

.b-btn-win--light span {
  background: var(--b-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.b-btn-win--light:hover,
.b-btn-mac--light:hover {
  opacity: 0.9;
}

.b-btn-mac--light {
  background: transparent;
  border: 2px solid #ffffff;
  padding: 8px 34px;
  color: #ffffff;
}

.b-btn-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.b-btn-icon-mac {
  width: 24px;
  height: 24px;
}

/* ---- Discount badge ---- */
.b-badge {
  position: absolute;
  top: -11px;
  right: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  border-radius: 16px;
}

.b-badge-normal-light {
  background-image: url(../images/buy/normal-pay-bg.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.b-badge-musicone-light {
  background-image: url(../images/buy/musicone-pay-bg.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.b-badge-text {
  position: absolute;
  top: 30px;
  right: 20px;
  transform: rotate(45deg);
  width: 90px;
  text-align: center;
  line-height: 38px;
  letter-spacing: 2.56px;
  color: #ffffff;
  font-size: 32px;
  font-weight: 900;
  white-space: nowrap;
}

.b-badge-text--gradient {
  background: var(--b-gradient-red);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* =====================================================================
   PAYMENT — XS (<576px)
   ===================================================================== */
.b-payment {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  border-radius: 20px;
  gap: 16px;
  margin: auto;
  max-width: max-content;
}

.b-payment-secure {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
}

.b-payment-lock {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.b-payment-secure-text {
  flex-shrink: 0;
  line-height: 22px;
  letter-spacing: 0;
  color: #00000099;
  font-family: "Nunito Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.b-payment-logos {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  column-gap: 16px;
  row-gap: 16px;
}

.b-payment-logo {
  flex-shrink: 0;
  width: 55px;
  height: 28px;
}

/* =====================================================================
   NOTES — XS (<576px)
   ===================================================================== */
.b-notes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 100px;
  row-gap: 16px;
}

.b-notes-title {
  flex-shrink: 0;
  align-self: stretch;
  letter-spacing: 0;
  color: var(--b-t-1);
  font-size: 36px;
  font-weight: 600;
  margin: 0;
}

.b-notes-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 16px;
  list-style: decimal;
  list-style-position: outside;
  margin: 0;
  padding-left: 28px;
}

.b-notes-item {
  flex-shrink: 0;
  align-self: stretch;
  line-height: 29px;
  letter-spacing: 0;
  color: var(--b-t-2);
  font-size: 18px;
}

.b-notes-item::marker {
  font-weight: 700;
}

.b-notes-strong {
  color: var(--b-t-2);
  font-weight: 700;
}

.b-notes-link {
  color: var(--b-blue);
  font-size: 18px;
  line-height: 29px;
  text-decoration: underline;
}

.b-notes-link:hover {
  color: #51B9FD;
}

.b-notes-link:active {
  color: #1E86CA;
}


/* =====================================================================
   SM (>=576px)
   ===================================================================== */
@media (min-width: 576px) {
  .b-banner-img {
    height: 104px;
  }
}

/* =====================================================================
   MD (>=768px)
   ===================================================================== */
@media (min-width: 768px) {
  .b-banner-img {
    height: 138px;
  }

  /* 两张一行，第三张换行后居中 */
  .b-plans {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .b-plan {
    width: calc(50% - 10px);
  }

   .b-plan-buttons {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }
}

/* =====================================================================
   LG (>=992px) — plans switch to 3-column row
   ===================================================================== */
@media (min-width: 992px) {
  .b-banner-img {
    height: 179px;
  }

  .b-plans {
    justify-content: center;
    gap: 40px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .b-plan {
    width: auto;
    flex: 1 1 0;
    max-width: 430px;
    align-self: auto;
    justify-content: flex-start;
    row-gap: 24px;
    padding: 35px 23px;
    min-height: 576px;
  }

  .b-plan-buttons {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    margin-top: auto;
    flex-wrap: wrap;
    width: 100%;
  }

  .b-plan--featured {
    padding: 34px 22px;
  }

  .b-plan--all {
    padding: 36px 24px;
  }
}

/* =====================================================================
   XL (>=1200px)
   ===================================================================== */
@media (min-width: 1200px) {
  .b-banner-img {
    height: 216px;
  }

  .b-pricing {
    padding: 100px 40px;
  }

  .b-notes {
    padding-right: 40px;
    padding-left: 40px;
  }

  .b-plan {
    min-height: 560px;
  }
}

/* =====================================================================
   XXL (>=1400px)
   ===================================================================== */
@media (min-width: 1400px) {
  .b-banner-img {
    height: 259px;
  }

  .b-pricing {
    padding: 100px 40px;
  }

  .b-plan {
    padding: 59px 39px;
    min-height: 568px;
  }

  .b-plan--featured {
    padding: 58px 38px;
  }

  .b-plan--all {
    padding: 60px 40px;
  }
}

/* =====================================================================
   XXXL (>=1920px)
   ===================================================================== */
@media (min-width: 1600px) {
  .b-pricing {
    padding: 100px 240px;
  }

  .b-notes {
    padding-right: 240px;
    padding-left: 240px;
  }
}

@media (min-width: 1920px) {
  .b-banner-img {
    height: 346px;
  }

  .b-pricing {
    padding: 100px 320px;
  }

  .b-notes {
    padding-right: 320px;
    padding-left: 320px;
  }

}

.b-badge-promo {
  position: absolute;
  top: 0;
  right: 20px;
  width: 90px;
  height: auto;
}