.pricing-page .page-intro h1 {letter-spacing: -.04em}
.pricing-plans {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; max-width: 58rem}
.pricing-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(16px,3vw,30px);
  border-radius: 14px;
  background: var(--surface);
}
.pricing-plan + .pricing-plan {background: var(--mist)}
.pricing-plan :is(h2,p) {margin: 0}
.pricing-plan h2 {font-size: 1.15rem}
.pricing-plan .pricing-value {margin-block: 4px 12px; font-size: clamp(1.45rem,3vw,2rem); font-weight: 760; letter-spacing: -.03em; color: var(--ink)}
.pricing-plan p {color: var(--muted)}
.pricing-action {margin-top: auto; padding-top: 16px}
.pricing-action p {margin-top: 6px; font-size: .9rem}
.pricing-action .button, .pricing-guide a {min-height: 44px}
.pricing-action .ghost:is(:hover,:active) {background: var(--surface)}
.pricing-comparison {width: 100%; max-width: 58rem; margin-block: clamp(24px,4vw,42px) 0; border-collapse: collapse; table-layout: fixed; color: var(--ink)}
.pricing-comparison caption {padding-block-end: 10px; text-align: start; font-size: clamp(1.15rem,2vw,1.4rem); font-weight: 760}
.pricing-comparison :is(th,td) {padding: 10px clamp(5px,1.5vw,16px); border-block-end: 1px solid var(--line); line-height: 1.35; vertical-align: middle; overflow-wrap: anywhere}
.pricing-comparison tr > :first-child {width: 48%; text-align: start}
.pricing-comparison tr > :not(:first-child) {text-align: center}
.pricing-comparison thead th {background: var(--surface)}
.pricing-comparison tr > :last-child {background: var(--mist)}
.pricing-comparison tbody th {font-weight: 600}
.pricing-guide {display: flex; flex-wrap: wrap; column-gap: 20px; margin-block: 14px 0}
.pricing-guide a {display: inline-flex; align-items: center; font-weight: 650}
@media (max-width: 680px) {
  .pricing-plans {grid-template-columns: minmax(0,1fr)}
  .pricing-comparison {font-size: .875rem}
}
@media (max-width: 380px) {
  .pricing-comparison {font-size: .8125rem}
  .pricing-comparison tr > :first-child {width: 42%}
  .pricing-comparison tr > :nth-child(2) {width: 31%}
}