body.ds-page { margin: 0; background: var(--ds-paper); --ds-ink-faint: var(--ds-ink-soft); }
.pricing-page { max-width: 76rem; padding-top: 3rem; padding-bottom: 4rem; }
.pricing-header { max-width: 48rem; margin: 0 0 2rem; }
.pricing-header h1 { font-size: 2.25rem; line-height: 1.4; margin: 0 0 1rem; letter-spacing: -.02em; }
.pricing-header > p { color: var(--ds-ink-soft); margin: 0; max-width: 44rem; }
.current-plan { margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--ds-jade-wash); color: #266747; border-radius: var(--ds-radius); }
.current-plan strong, .current-plan span { display: block; }.current-plan span { margin-top: .5rem; font-size: .875rem; }
.pricing-task-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; margin: 0 0 2rem; }
.pricing-task-links a { display: block; padding: .75rem 0; border-bottom: 1px solid var(--ds-line-strong); color: var(--ds-ink); font-weight: 600; text-decoration: none; }
.pricing-task-links span { display: block; color: var(--ds-vermilion-deep); font-weight: 400; font-size: .875rem; margin-top: .25rem; }
.pricing-task-links a:hover { border-color: var(--ds-vermilion); }
.pricing-billing-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-bottom: 1.5rem; }
.pricing-billing-row > p { color: var(--ds-ink-soft); font-size: .8125rem; margin: 0; }
.billing-toggle { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); background: var(--ds-paper-raised); }
.billing-btn { padding: .6rem 1rem; min-height: 44px; border: 0; border-radius: var(--ds-radius-sm); background: none; color: var(--ds-ink-soft); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.billing-btn:hover { background: var(--ds-paper-sunken); }.billing-btn.active { background: var(--ds-ink); color: var(--ds-paper-raised); }
.plan-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.plan-card { display: flex; flex-direction: column; min-width: 0; padding: 1.5rem; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); background: var(--ds-paper-raised); scroll-margin-top: 6rem; }
.plan-card.is-recommended { border-color: var(--ds-vermilion); }
.plan-card h2 { margin: 0 0 .35rem; font-size: 1.125rem; font-weight: 700; }
.plan-purpose { color: var(--ds-ink-soft); font-size: .875rem; margin: 0 0 1.25rem; min-height: 3em; }
.plan-price { font-size: 2.25rem; font-weight: 700; line-height: 1.35; margin: 0 0 .35rem; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: .8125rem; font-weight: 400; color: var(--ds-ink-soft); margin-left: .35rem; }
.plan-payment { color: var(--ds-ink-soft); font-size: .8125rem; margin: 0 0 1.25rem; min-height: 3.5em; }
.plan-feats { list-style: none; margin: 0 0 1.5rem; padding: 0; flex: 1; }
.plan-feats li { margin: 0; padding: .8rem 0; font-size: .875rem; line-height: 1.65; border-top: 1px solid var(--ds-line); }
.plan-feats li span:not([data-limit]) { display: block; color: var(--ds-ink-soft); font-size: .8125rem; margin-top: .25rem; }
.plan-card .ds-btn { box-shadow: none; min-height: 48px; font-size: .875rem; padding: .75rem; }
.pricing-recommendation { padding: 0 0 1rem; margin: 0; color: var(--ds-vermilion-deep); font-size: .875rem; }
.pricing-metering { margin: 3rem 0; padding-top: 2rem; border-top: 1px solid var(--ds-line-strong); }
.pricing-page section > h2, .api-content h2 { margin: 0 0 1.25rem; font-size: 1.5rem; font-weight: 700; }
.metering-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem; }
.metering-columns h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; }
.metering-columns p { color: var(--ds-ink-soft); font-size: .875rem; margin: 0 0 .75rem; max-width: 42rem; }
.pricing-api { margin-bottom: 3rem; border-top: 1px solid var(--ds-line-strong); border-bottom: 1px solid var(--ds-line-strong); scroll-margin-top: 6rem; }
.pricing-api > summary { cursor: pointer; padding: 1.25rem 0; font-weight: 600; }.pricing-api > summary span { font-size: .875rem; color: var(--ds-ink-soft); font-weight: 400; margin-left: .75rem; }
.api-content { display: grid; grid-template-columns: 1fr 16rem; gap: 2rem; padding: .75rem 0 2rem; }
.api-content p, .api-content li { font-size: .875rem; color: var(--ds-ink-soft); }.api-content ul { padding-left: 1.25rem; margin: 1rem 0; }.api-content a { font-size: .875rem; color: var(--ds-vermilion-deep); }.api-purchase .plan-price { font-size: 2.25rem; color: var(--ds-ink); }
.pricing-faq { max-width: 52rem; }.pricing-faq > details { border-top: 1px solid var(--ds-line); }.pricing-faq summary { cursor: pointer; padding: 1rem 0; font-size: .9375rem; font-weight: 600; }.pricing-faq details p { margin: 0 0 1.25rem; font-size: .875rem; color: var(--ds-ink-soft); max-width: 46rem; }
.pricing-contact { margin-top: 1.5rem; font-size: .875rem; color: var(--ds-ink-soft); }.pricing-contact button { border: 0; background: none; color: var(--ds-vermilion-deep); cursor: pointer; font: inherit; padding: .5rem .25rem; min-height: 44px; }
#payment-modal { top: 0; right: 0; bottom: 0; left: 0; } .payment-dialog { position: relative; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; color: var(--ds-ink); box-shadow: var(--ds-shadow-lg); }
#modal-price { color: var(--ds-vermilion-deep); }.pricing-modal-note { margin: 0 0 1.25rem; font-size: .875rem; color: var(--ds-ink-soft); }.pricing-plan-change { margin: 0 0 1.25rem; padding: 1rem; background: var(--ds-warn-wash); font-size: .875rem; color: #795214; text-align: left; border-radius: var(--ds-radius-sm); }
.pricing-page :is(a,button,summary):focus-visible, .payment-dialog :is(a,button):focus-visible { outline: 2px solid var(--ds-vermilion); outline-offset: 3px; }.pricing-page a { text-underline-offset: 4px; }.pricing-page ::selection { background: var(--ds-vermilion-wash); color: var(--ds-ink); }
.hidden, [hidden] { display: none !important; }
@media(max-width:1100px) { .plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.plan-purpose, .plan-payment { min-height: 0; } }
@media(max-width:680px) { .pricing-page { padding-top: 2rem; }.pricing-header h1 { font-size: 1.75rem; }.pricing-task-links { grid-template-columns: 1fr; gap: .5rem; }.pricing-task-links a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .875rem; }.pricing-task-links span { flex-shrink: 0; margin: 0; font-size: .75rem; }.plan-grid, .metering-columns, .api-content { grid-template-columns: 1fr; }.plan-card { padding: 1.25rem; }.plan-purpose { margin-bottom: 1rem; }.metering-columns { gap: 1.25rem; }.pricing-api > summary span { display: block; margin: .35rem 0 0 1rem; }.api-content { gap: 1rem; }.api-purchase .plan-payment { margin-bottom: 1rem; } }
@media(prefers-reduced-motion:reduce) { .pricing-page *, .payment-dialog * { transition: none !important; scroll-behavior: auto !important; } }
.payment-dialog > button { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.payment-dialog :is(.text-purple-600,.text-purple-700) { color: var(--ds-vermilion-deep); }.payment-dialog :is(.text-gray-400,.text-gray-500,.text-gray-600) { color: var(--ds-ink-soft); }