.pricing-page {
  background:
    radial-gradient(ellipse at 50% 5%, #30394a2b, transparent 42%),
    radial-gradient(ellipse at 90% 35%, #29293210, transparent 40%),
    #111317;
}

.pricing-main { max-width: 1056px; padding-top: 105px; padding-bottom: 90px; }
.plans-intro { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.plans-intro h1 { font-size: 40px; line-height: 1.2; letter-spacing: -1.1px; margin: 22px 0 16px; }
.plans-intro > p { font-size: 18px; line-height: 1.65; }
.plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.plan-card { display: flex; flex-direction: column; padding: 36px 28px 28px; border-radius: 14px; background: #1b1e22; border: 1px solid #ffffff03; }
.free-plan { background: radial-gradient(ellipse at top right, #666f8420, transparent 45%), #1b1e22; }
.premium-plan { background: radial-gradient(ellipse at top right, #d6a02418, transparent 40%), #1b1e22; }
.plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.plan-heading h2 { color: #c5bffc; text-transform: uppercase; letter-spacing: .6px; font-size: 12px; font-weight: 500; }
.plan-heading p { font-size: 13px; margin-top: 5px; }
.plan-heading .badge { font-size: 10px; padding: 4px 9px; letter-spacing: 1px; }
.premium-plan .plan-heading h2, .annual-price { color: #edc05e; }
.plan-heading .premium-badge { color: #efbc55; background: #b27b232b; text-transform: uppercase; letter-spacing: .5px; }
.plan-price { color: #e4e2eb; font-size: clamp(42px, 4.8vw, 58px); font-weight: 300; line-height: 1.2; letter-spacing: -2px; white-space: nowrap; }
.plan-price > span { font-size: 15px; letter-spacing: 0; color: #c1becd; }
.annual-price { font-size: 13px; margin-top: 1px; }
.annual-price span { white-space: nowrap; }
.plan-description { margin: 18px 0 28px; font-size: 15px; line-height: 1.65; color: #bfbdcc; }
.capacity { padding: 16px; border-radius: 9px; background: #ffffff02; margin-bottom: 30px; }
.capacity > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; }
.capacity > div:first-child > .positive { text-transform: none; }
.capacity-bar { display: flex; gap: 3px; height: 5px; margin: 6px 0; }
.capacity-bar i { flex: 1; border-radius: 3px; background: #4aaf8b; }
.capacity p { font-size: 12px; color: #a8a4b7; }
.provisional-notice { display: flex; align-items: start; gap: 10px; padding: 17px; background: #ffffff06; border: 1px solid #ffffff03; border-radius: 9px; margin-bottom: 28px; }
.notice-icon { font-size: 20px; line-height: 1; color: #eab442; }
.provisional-notice h3 { font-size: 11px; text-transform: uppercase; font-weight: 500; letter-spacing: .6px; }
.provisional-notice p { font-size: 13px; line-height: 1.6; color: #bfbaca; margin-top: 4px; }
.plan-features { list-style: none; padding: 0; display: grid; gap: 13px; margin: 0 0 60px; color: #dedbe6; font-size: 14px; line-height: 1.5; }
.plan-features li { position: relative; padding-left: 26px; }
.plan-features li::before { content: '✓'; display: grid; place-items: center; width: 14px; height: 14px; position: absolute; left: 0; top: 3px; border: 1.5px solid #3ce2b0; border-radius: 50%; color: #3ce2b0; font-size: 9px; font-weight: 600; }
.plan-features .unlimited-feature::before { content: '∞'; border: 0; font-size: 25px; font-weight: 400; }
.keyboard-hints { white-space: nowrap; }
kbd { font: inherit; font-size: 11px; padding: 2px 5px; border-radius: 4px; background: #424453; color: #d1cafa; }
.plan-action { width: 100%; border-radius: 8px; min-height: 55px; margin-top: auto; font-size: 15px; }
.free-action { background: #8483f5; color: #171331; }
.free-action:hover { background: #9897ff !important; }
.premium-action:disabled { background: #292c31; color: #aaa6b8; }
.pricing-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 64px; }
.pricing-note-card { display: flex; flex-direction: column; padding: 28px; border-radius: 12px; background: #0c0e11db; border: 1px solid #ffffff02; }
.pricing-note-card .eyebrow { font-size: 10px; letter-spacing: 1px; }
.pricing-note-card h2 { font-size: 24px; line-height: 1.4; letter-spacing: -.4px; margin: 8px 0 10px; }
.pricing-note-card > p { font-size: 15px; line-height: 1.65; margin-bottom: 20px; }
.note-footer { display: flex; gap: 6px; align-items: center; margin-top: auto; font-size: 12px; line-height: 1.6; color: #c6bfd6; }
.note-footer.positive { color: #54dfb3; }
.quota-example { flex-wrap: wrap; padding: 9px; border-radius: 6px; background: #1c1e23; font-size: 11px; gap: 8px; }
.quota-example > span { display: inline-flex; align-items: center; gap: 5px; }
.milestone-dot { background: #c5bcff; }
.quota-total { margin-left: auto; color: #9b96ab; font-size: 10px; }
.pricing-questions { margin: 80px auto 0; max-width: 900px; }
.pricing-questions .section-intro { margin-bottom: 32px; }
.pricing-questions h2 { font-size: 26px; letter-spacing: -.5px; margin-top: 10px; }
.pricing-questions .faq-list { max-width: none; gap: 10px; }
.pricing-questions details { background: #1a1d22; border: 1px solid #ffffff03; border-radius: 12px; }
.pricing-questions summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; padding: 22px 18px; color: #cecad6; font-size: 17px; }
.pricing-questions summary::-webkit-details-marker { display: none; }
.pricing-questions details[open] .faq-chevron { transform: rotate(180deg); }
.pricing-questions details > p { padding: 0 18px 22px; font-size: 14px; }
.pricing-invitation { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 900px; margin: 80px auto 0; border-radius: 12px; padding: 30px 28px; background: #1e2126; border: 1px solid #ffffff03; }
.pricing-invitation h2 { font-size: 25px; line-height: 1.4; letter-spacing: -.3px; margin-bottom: 4px; }
.pricing-invitation p { font-size: 14px; }
.pricing-invitation .button { flex-shrink: 0; min-height: 55px; padding-inline: 28px; }
.desktop-nav a[aria-current='page'] { color: #e5e0ff; }

@media (max-width: 1000px) {
  .pricing-main { padding-top: 80px; }
  .plan-card { padding: 28px 24px 24px; }
  .pricing-note-card { padding: 24px; }
  .pricing-note-card h2 { font-size: 21px; }
  .pricing-note-card > p { font-size: 14px; }
  .pricing-invitation h2 { font-size: 22px; }
}

@media (max-width: 760px) {
  .plans-grid { grid-template-columns: 1fr; max-width: 500px; margin: auto; }
  .plan-price { font-size: 56px; }
  .plan-features { margin-bottom: 36px; }
  .pricing-notes { grid-template-columns: 1fr; max-width: 500px; margin: 36px auto 0; }
  .pricing-note-card { min-height: 270px; }
  .pricing-note-card h2 { font-size: 24px; }
  .pricing-note-card > p { font-size: 15px; }
  .quota-example { max-width: 300px; }
  .pricing-invitation { align-items: start; flex-direction: column; }
}

@media (max-width: 640px) {
  .pricing-main { padding-top: 60px; padding-bottom: 65px; }
  .plans-intro { margin-bottom: 36px; }
  .plans-intro h1 { font-size: 34px; line-height: 1.2; letter-spacing: -1px; margin-top: 20px; }
  .plans-intro > p { font-size: 15px; }
  .plan-card { padding: 28px 24px 24px; }
  .plan-price { font-size: 48px; letter-spacing: -1.7px; }
  .plan-heading .badge { font-size: 9px; }
  .plan-heading p { font-size: 12px; }
  .plan-description, .plan-features { font-size: 14px; }
  .capacity { padding: 13px 10px; }
  .capacity > div:first-child { font-size: 9px; }
  .capacity p { font-size: 11px; }
  .provisional-notice { padding: 14px 12px; }
  .pricing-questions { margin-top: 60px; }
  .pricing-questions h2 { font-size: 26px; }
  .pricing-questions summary { font-size: 15px; padding: 20px 18px; }
  .pricing-invitation { margin-top: 55px; padding: 24px; }
  .pricing-invitation h2 { font-size: 24px; }
  .pricing-invitation .button { width: 100%; }
}