.pricing-hero { padding: 96px 0 93px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pricing-hero h1 { max-width: 750px; margin: 21px 0 23px; font-size: clamp(52px, 7vw, 86px); }
.pricing-hero > p { max-width: 610px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.pricing-hero-meta { display: flex; align-items: center; gap: 26px; margin-top: 29px; color: #747e92; font-size: 12px; font-weight: 600; }
.pricing-hero-meta b { margin-right: 5px; color: #2b9b70; }
.plans-section { padding-bottom: 125px; }
.plans-heading { display: grid; grid-template-columns: .95fr 1.05fr; gap: 75px; align-items: end; padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.plans-heading h2 { margin: 17px 0 0; font-size: clamp(42px, 4.5vw, 60px); }
.plans-heading > p { max-width: 480px; margin: 0 0 2px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.pricing-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.pricing-page-card { position: relative; min-height: 468px; display: flex; flex-direction: column; padding: 28px 25px 24px; border: 1px solid #d9dfec; border-radius: 9px; background: var(--card); }
.page-card-featured { border: 2px solid var(--purple); padding: 27px 24px 23px; box-shadow: 0 16px 36px rgba(99, 91, 255, .13); }
.page-featured-label { position: absolute; top: -14px; right: 20px; padding: 6px 11px; border-radius: 4px; color: #fff; background: var(--purple); font-size: 10px; font-weight: 700; }
.page-card-top { display: flex; justify-content: space-between; gap: 15px; }
.page-plan-name { display: block; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.04em; }
.page-plan-kicker { display: block; margin-top: 6px; color: #929bad; font-size: 11px; }
.page-plan-index { color: #aab2c2; font: 11px var(--mono); }
.page-price { margin-top: 31px; color: var(--ink); font-family: var(--display); font-size: 51px; font-weight: 700; letter-spacing: -.07em; }
.page-price > span { margin-right: 4px; color: var(--purple); font-size: 25px; vertical-align: top; }
.page-price small { margin-left: 5px; color: #9aa3b5; font: 10px var(--sans); letter-spacing: 0; }
.page-credits { margin-top: 2px; color: #55627b; font: 13px var(--mono); }.page-credits span { color: #9aa3b5; font-family: var(--sans); }
.page-card-description { min-height: 58px; margin: 20px 0 0; color: #7a8498; font-size: 12px; line-height: 1.6; }
.page-features { display: grid; gap: 11px; min-height: 114px; margin: 21px 0 24px; padding: 18px 0 0; border-top: 1px solid #e7eaf3; list-style: none; color: #626c80; font-size: 12px; }
.page-features li span { margin-right: 7px; color: #36a574; font-weight: 800; }
.pricing-page-card .button { width: 100%; margin-top: auto; font-size: 12px; }
.custom-volume { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 16px; padding: 25px 28px; border: 1px solid #d9dfec; border-radius: 9px; background: #edf1ff; }
.custom-label { display: block; margin-bottom: 4px; color: var(--purple-deep); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .07em; }.custom-volume strong { display: block; font-family: var(--display); font-size: 19px; letter-spacing: -.04em; }.custom-volume p { margin: 7px 0 0; color: #747e92; font-size: 12px; }
.how-pricing-works { display: grid; grid-template-columns: .82fr 1.18fr; gap: 95px; padding-bottom: 118px; }.how-pricing-works .section-heading h2 { margin-top: 17px; font-size: clamp(41px, 4.2vw, 57px); }.how-pricing-works .section-heading p { margin-top: 20px; max-width: 340px; }
.billing-steps { border-top: 1px solid var(--line); }.billing-step { position: relative; padding: 22px 0 22px 56px; border-bottom: 1px solid var(--line); }.billing-number { position: absolute; left: 0; top: 23px; color: var(--purple); font: 11px var(--mono); }.billing-step strong { display: block; color: #39445b; font-size: 14px; }.billing-step p { max-width: 455px; margin: 7px 0 0; color: #7b8598; font-size: 12px; line-height: 1.6; }
.pricing-note-band { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 98px; padding: 23px 26px; border: 1px solid #cfe7dd; border-radius: 9px; background: #effaf5; }.note-icon { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border: 1px solid #6db596; border-radius: 50%; color: #3b9870; font: 12px Georgia, serif; font-weight: 700; }.pricing-note-band strong { display: block; color: #327a61; font-size: 12px; }.pricing-note-band p { max-width: 710px; margin: 6px 0 0; color: #659182; font-size: 11px; line-height: 1.6; }.pricing-note-band > a { margin-left: auto; flex: 0 0 auto; padding-top: 2px; color: #328367; font-size: 11px; font-weight: 700; white-space: nowrap; }.pricing-note-band > a span { margin-left: 4px; }
.pricing-bottom-cta { display: flex; align-items: center; justify-content: space-between; gap: 35px; margin-bottom: 104px; padding: 48px 56px; border-radius: 11px; background: var(--mint); }.pricing-bottom-cta h2 { margin: 15px 0 11px; font-size: clamp(35px, 4vw, 51px); }.pricing-bottom-cta p { margin: 0; color: #528275; font-size: 13px; }.pricing-bottom-cta p a { color: #347d68; font-weight: 700; }
.desktop-nav a.active { color: var(--purple-deep); }
@media (max-width: 900px) { .plans-heading, .how-pricing-works { grid-template-columns: 1fr; gap: 35px; }.pricing-page-grid { grid-template-columns: 1fr; max-width: 570px; }.pricing-page-card { min-height: auto; }.custom-volume { align-items: flex-start; flex-direction: column; }.pricing-note-band { flex-wrap: wrap; }.pricing-note-band > a { margin-left: 34px; }.pricing-bottom-cta { align-items: flex-start; flex-direction: column; }.pricing-bottom-cta .button { margin-top: 4px; } }
@media (max-width: 640px) { .pricing-hero { padding: 64px 0 70px; }.pricing-hero > p { font-size: 15px; }.pricing-hero-meta { align-items: flex-start; flex-direction: column; gap: 10px; }.plans-section { padding-bottom: 90px; }.plans-heading { padding-bottom: 32px; }.pricing-page-grid { margin-top: 29px; }.pricing-note-band { margin-bottom: 70px; padding: 20px; }.pricing-note-band > a { margin-left: 34px; }.pricing-bottom-cta { margin-bottom: 70px; padding: 34px 25px; } }