/* The pricing proposal uses the Fenaky palette, type and existing checkout. */
.pricing-page { width: 100%; max-width: none; margin: 0; padding: 0 0 12px; }
.pricing-header { text-align: center; padding: 22px 16px 38px; }
.pricing-header h1 { margin: 0; font: 500 clamp(32px, 3.3vw, 48px)/1.12 var(--display); letter-spacing: -.035em; }
.pricing-header p { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.pricing-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.pricing-toolbar h2 { margin: 0; font-size: 14px; font-weight: 600; }
.pricing-duration { display: flex; align-items: center; gap: 12px; }
.pricing-duration > span { color: var(--muted); font-size: 12px; }
.pricing-segments { display: flex; gap: 3px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.pricing-segments button { min-height: 34px; padding: 7px 12px; border-radius: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.pricing-segments button:hover { color: var(--text); background: var(--surface-raised); }
.pricing-segments button[aria-pressed=true] { background: var(--purple); color: var(--purple-ink); font-weight: 600; }
.pricing-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 12px; }
.pricing-card { position: relative; min-width: 0; padding: 22px 18px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pricing-card-popular { border-color: var(--purple); background: #211d2c; }
.pricing-popular { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 6px; background: var(--purple); color: var(--purple-ink); font-size: 12px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.pricing-card h3 { margin: 0; font: 500 21px/1.2 var(--display); letter-spacing: -.025em; white-space: nowrap; }
.pricing-price { display: flex; align-items: baseline; gap: 4px; margin: 24px 0 0; font: 500 clamp(27px, 2.5vw, 42px)/1.15 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricing-currency { font: 400 14px var(--font); letter-spacing: 0; }
.pricing-cycle { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.pricing-unit { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.pricing-choose { width: 100%; min-height: 44px; margin-top: 18px; padding: 10px 8px; font-size: 12px; white-space: nowrap; }
.pricing-output { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.pricing-output > p { margin: 0 0 12px; color: var(--text); font-size: 12px; font-weight: 500; }
.pricing-output dl { margin: 0; display: grid; gap: 9px; }
.pricing-output dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pricing-output dt { color: var(--muted); font-size: 12px; }
.pricing-output dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricing-output dd > span { color: var(--muted); font-size: 12px; font-weight: 400; }
.pricing-output dd > .pricing-free { padding: 2px 7px; border-radius: 6px; background: var(--purple-subtle); color: var(--purple); font-weight: 600; }
.pricing-comparison-note { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 24px; flex-wrap: wrap; margin-top: 16px; font-size: 12px; color: var(--muted); }
.pricing-comparison-note p { margin: 0; }
.pricing-upgrade { display: flex; align-items: flex-start; gap: 7px; color: var(--purple); }
.pricing-upgrade .icon { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; }
.pricing-features { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.pricing-features h2 { margin: 0 0 18px; font: 500 18px/1.3 var(--display); letter-spacing: -.02em; }
.pricing-features-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 12px; }
.pricing-features-grid > div { min-width: 0; }
.pricing-features-grid .icon { width: 18px; height: 18px; color: var(--purple); }
.pricing-features h3 { margin: 10px 0 6px; font-size: 13px; font-weight: 500; }
.pricing-features p { margin: 0; font-size: 12px; color: var(--muted); }
.pricing-features .pricing-feature-free { color: var(--purple); }
.pricing-soon { display: inline-block; padding: 2px 6px; border-radius: 6px; background: var(--surface-raised); color: var(--muted); font-size: 12px; }
.pricing-extras { margin-top: 28px; border-top: 1px solid var(--line); }
.pricing-extra { border-bottom: 1px solid var(--line); }
.pricing-extra summary { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 12px 0; font-size: 13px; font-weight: 500; list-style: none; cursor: pointer; }
.pricing-extra summary::-webkit-details-marker { display: none; }
.pricing-extra summary > span { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 400; }
.pricing-extra summary > .icon { width: 16px; height: 16px; margin-left: auto; color: var(--muted); }
.pricing-extra summary > span + .icon { margin-left: 0; }
.pricing-extra[open] summary > .icon { transform: rotate(180deg); }
.pricing-extra > p { margin: 0; padding: 0 0 18px; max-width: 75ch; color: var(--muted); font-size: 13px; }
.pricing-pass-option { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 4px 0 18px; }
.pricing-pass-option h3 { margin: 0 0 8px; font: 500 24px/1.2 var(--display); }
.pricing-pass-option h3 small { font: 400 12px var(--font); color: var(--muted); }
.pricing-pass-option p { margin: 3px 0; color: var(--muted); font-size: 13px; }
.pricing-pass-option .button { flex-shrink: 0; min-height: 44px; }
.pricing-payment-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 18px; font-size: 12px; color: var(--muted); }
.pricing-review { max-width: 540px; margin: 0 auto; }
.pricing-back { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; margin-bottom: 20px; color: var(--muted); font-size: 13px; }
.pricing-back:hover { color: var(--text); }
.pricing-back .icon { width: 16px; height: 16px; }
.pricing-review .plan-summary { position: static; padding: 24px; }
.pricing-review .plan-summary-body { gap: 18px; }
.pricing-review h1 { margin: 0; font: 500 30px/1.15 var(--display); letter-spacing: -.03em; }
.pricing-review .plan-summary-name { gap: 8px; }
.pricing-review .plan-summary-name strong { font-size: 15px; }
.pricing-review .plan-summary-price { animation: none; }
.pricing-review .plan-summary-terms { font-size: 13px; }
.pricing-review .plan-purchase > .button { font-size: 13px; }
.pricing-review .plan-summary-note { font-size: 12px; }
.pricing-page .billing-state { margin: 8px 0 24px; }
@media (min-width: 1440px) {
  .pricing-card { padding: 26px 24px 22px; }
  .pricing-card h3 { font-size: 24px; }
  .pricing-output dd { font-size: 17px; }
}
@media (max-width: 1199px) {
  .pricing-card { padding: 20px 13px 16px; }
  .pricing-card h3 { font-size: 18px; }
  .pricing-price { font-size: 28px; }
}
@media (max-width: 1040px) {
  .pricing-cards, .pricing-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pricing-card { padding: 22px 18px; }
  .pricing-card h3 { font-size: 21px; }
  .pricing-price { font-size: 34px; }
}
@media (max-width: 650px) {
  .pricing-header { padding: 6px 0 28px; text-align: left; }
  .pricing-header p { font-size: 13px; }
  .pricing-toolbar { gap: 12px; }
  .pricing-duration { width: 100%; justify-content: space-between; gap: 8px; }
  .pricing-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 10px; }
  .pricing-card { padding: 20px 13px 16px; }
  .pricing-card h3 { font-size: 18px; }
  .pricing-price { font-size: 28px; }
  .pricing-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-review .plan-summary { padding: 20px; }
}
@media (max-width: 480px) {
  .pricing-duration { align-items: flex-start; flex-direction: column; }
  .pricing-segments { width: 100%; justify-content: space-between; }
  .pricing-cards { grid-template-columns: 1fr; }
  .pricing-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; padding: 20px; }
  .pricing-card h3 { grid-column: 1 / -1; font-size: 21px; }
  .pricing-price { grid-column: 1; font-size: 32px; margin-top: 20px; }
  .pricing-cycle, .pricing-unit { grid-column: 1; }
  .pricing-unit { margin-top: 8px; }
  .pricing-choose { grid-column: 1 / -1; grid-row: 7; }
  .pricing-output { grid-column: 2; grid-row: 2 / 6; margin-top: 18px; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid var(--line); }
  .pricing-output dd > span:not(.pricing-free) { display: none; }
  .pricing-pass-option { align-items: flex-start; flex-direction: column; gap: 12px; }
  .pricing-payment-note { flex-direction: column; }
}
@media (max-width: 380px) {
  .pricing-card { display: block; padding: 18px 14px; }
  .pricing-card h3 { font-size: 20px; }
  .pricing-price { font-size: 27px; }
  .pricing-output { margin-top: 16px; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .pricing-output dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pricing-output dl > div { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (pointer: coarse) {
  .pricing-segments button { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
  .pricing-choose { transition: background-color 150ms var(--ease); }
}