/* /pricing shares Creator's typography, tokens, navigation and buttons. */
.pricing-page {
  background-image: none;
}
.pricing-page .brand {
  min-height: 44px;
}
.pricing-page .acct [aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
}
.pricing-main,
.pricing-heading,
.pricing-packs,
.pricing-how,
.pack-card,
.pack-details,
.pack-heading,
.pack-price,
.how-item p {
  display: flex;
  flex-direction: column;
}
.pricing-main {
  max-width: 1120px;
  padding: clamp(22px, 2vw, 24px) var(--gutter) clamp(40px, 6vw, 72px);
  gap: clamp(30px, 4vw, 40px);
}
.pricing-intro,
.pricing-payment {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 32px;
}
.pricing-intro {
  align-items: flex-end;
}
.pricing-heading {
  max-width: 640px;
  gap: 10px;
}
.pricing-heading h1 {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 750;
  line-height: 1.08;
}
.pricing-heading p {
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--ink-2);
}
.balance-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: clamp(4px, 0.5vw, 6px) clamp(12px, 1.1vw, 14px);
  border-radius: 999px;
  font-size: clamp(14px, 1.2vw, 15px);
  background: var(--card);
  border: 1px solid #ddd1bd;
}
.balance-chip b {
  font: 700 clamp(18px, 1.6vw, 20px) var(--f-display);
  color: var(--ink-3);
}
.pricing-packs,
.pricing-how {
  gap: 18px;
}
#p-packs {
  font: 700 clamp(13px, 1.1vw, 14px)/1.6 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pricing-pack-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.pricing-method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 4px;
  border: 1px solid #ddd1bd;
  border-radius: 14px;
  background: var(--card);
}
.pricing-method legend {
  float: left;
  padding: 0 10px 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
}
.pricing-method .payment-tile {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  background: transparent;
}
.pricing-method .payment-tile:has(input[value="card"]:checked) {
  background: var(--paper-2);
}
.pricing-method .payment-tile:has(input[value="wechat"]:checked) {
  background: var(--wechat);
  color: #fff;
}
.payment-detail {
  font-weight: 400;
}
.pricing-method input[value="card"] ~ .payment-detail {
  color: var(--ink-3);
}
.wechat-note {
  font-size: 15px;
  color: var(--ink-2);
}
.pack-card {
  border-radius: 12px 16px 12px 14px;
  scroll-margin-block: 24px;
}
.pack-grid,
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.pack-card {
  padding: clamp(16px, 2vw, 24px) clamp(16px, 1.8vw, 22px);
  background: var(--card);
  border: 1px solid #ddd1bd;
}
.pack-card,
.pack-details {
  gap: 14px;
}
.pack-heading {
  gap: 4px;
}
.pack-name {
  font: 700 28px/1.05 var(--f-display);
  color: var(--ink);
}
/* four columns: "Standard Pack" stays on one line in the narrower cards */
@media (min-width: 980px) and (max-width: 1099px) {
  .pack-name {
    font-size: 23px;
  }
}
.pack-seconds {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-2);
}
.pack-price b {
  font-size: 22px;
}
.pack-price span {
  font-size: 14px;
  color: var(--ink-3);
}
.pack-card .btn {
  min-height: 46px;
  margin-top: auto;
  padding-inline: 12px;
  gap: 0;
  border-radius: 12px;
  font-size: 15.5px;
  background: rgba(255, 255, 255, 0.7);
  white-space: pre;
}
.pack-card .btn.btn-wechat {
  background: var(--wechat);
  color: #fff;
  gap: 8px;
  box-shadow: none;
}
.is-wechat .pack-card .btn {
  padding-inline: 8px;
  white-space: normal;
  text-align: center;
}
.is-wechat .pack-card .btn > span {
  white-space: nowrap;
}
/* Keep longer payment labels inside the four-column grid. */
@media (max-width: 1099px) {
  .is-wechat .pack-card .btn > span {
    white-space: normal;
  }
}
.pack-card.is-selected {
  border-color: var(--clay-btn);
  box-shadow: 0 0 0 1px var(--clay-btn), 5px 7px 0 rgba(232, 222, 206, 0.85);
  background: var(--note);
}
.pricing-page .btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}
.pricing-how h2 {
  font-size: clamp(25px, 2.5vw, 30px);
  line-height: inherit;
}
.how-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 40px;
}
.how-item {
  display: flex;
  gap: 14px;
}
.how-item svg {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 3px;
  fill: none;
  stroke: var(--clay-d);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.how-item .how-check {
  stroke: var(--sage-d);
  stroke-width: 2.2;
}
.how-item p {
  gap: 2px;
}
.how-item p > span {
  font-size: 15.5px;
  color: var(--ink-2);
}
.pricing-payment {
  gap: 20px 40px;
  padding: clamp(16px, 1.8vw, 22px) clamp(16px, 2.1vw, 26px);
  border: 1px dashed rgba(42, 37, 33, 0.3);
  border-radius: 12px;
  color: var(--ink-2);
  font-size: clamp(13.5px, 1.2vw, 14.5px);
  line-height: 1.55;
}
.pricing-payment p:not(:last-child) {
  flex: 2 1 520px;
}
.pricing-payment p:last-child {
  flex: 1 1 240px;
}
.pricing-page .foot .legal nav a {
  display: inline-block;
  min-height: 44px;
  align-content: center;
}
@media (max-width: 979px) {
  .pack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .pricing-method {
    width: 100%;
  }
  .pricing-method .payment-tile {
    flex-wrap: wrap;
    padding: 8px;
  }
  .pricing-method legend {
    width: 100%;
    padding-block: 4px;
  }
  .pricing-method .payment-detail {
    font-size: 13px;
  }
  .is-wechat .pack-card {
    flex-direction: column;
    align-items: stretch;
  }
  .is-wechat .pack-details {
    gap: 6px;
  }
  .is-wechat .buy-detail {
    display: inline;
  }
  .pricing-page .top {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px 0;
  }
  .pricing-page .acct {
    width: calc(100% + 12px);
    justify-content: flex-start;
    gap: 0 16px;
    font-size: 15px;
    border-bottom: 1px solid var(--line);
  }
  .pricing-main {
    line-height: 1.55;
  }
  .pricing-intro {
    gap: 10px;
  }
  .pricing-heading h1 {
    line-height: 1.1;
  }
  .balance-chip b {
    color: var(--clay-d);
  }
  .pricing-packs,
  .pack-grid {
    gap: 12px;
  }
  .pack-grid,
  .how-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pack-card {
    flex-direction: row;
    align-items: center;
  }
  .pack-details {
    flex: 1;
    min-width: 0;
    gap: 0;
  }
  .pack-name {
    font-size: 26px;
  }
  .pack-seconds {
    font-size: 15px;
  }
  .pack-price {
    display: block;
  }
  .pack-price b,
  .pack-price span,
  .how-item p > span {
    font-size: 15px;
  }
  .pack-price span::before {
    content: " · ";
  }
  .pack-card .btn {
    min-height: 44px;
    margin: 0;
    padding-inline: 16px;
    font-size: 15px;
  }
  .buy-detail,
  .how-item svg {
    display: none;
  }
  .pricing-how,
  .how-grid {
    gap: 14px;
  }
  .pricing-payment {
    gap: 10px;
  }
}