/* Pricing page (pricing/index.html): Free, and Pro raised beside it, monthly or yearly. Open Sky
   components from open-sky.css; only layout here. Every value is the landing's or the phone's. */
.pricing { padding-block: 64px 120px; }
.pricing-intro { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.pricing-intro .eyebrow { margin-bottom: 18px; }
.pricing-intro h1 { font-size: clamp(44px, 5vw, 62px); margin-bottom: 18px; text-wrap: balance; }
.pricing-lead { font-size: 17px; line-height: 1.75; color: var(--ms-secondary); margin: 0 auto; max-width: 560px; }

.plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); max-width: 920px; margin-inline: auto; gap: 28px; align-items: start; }
.plan { display: flex; flex-direction: column; gap: 18px; padding: 32px; margin-top: 40px; }
.plan--featured { margin-top: 0; padding: 40px 36px; }
.plan h2 { font-size: 30px; letter-spacing: -.04em; line-height: 1.1; margin: 0; }
.plan--featured h2 { font-size: 34px; }
.plan-price { font-family: var(--ms-font-editorial); font-size: 40px; letter-spacing: -.04em; line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; }
.plan-unit { font-family: var(--ms-font-sans); font-size: 16px; letter-spacing: 0; color: var(--ms-secondary); }
.plan-note { font-size: 13px; line-height: 1.5; color: var(--ms-secondary); margin: -8px 0 0; min-height: 1.5em; }
.plan-toggle { display: flex; gap: 8px; }
.plan-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.plan-list li { font-size: 16px; line-height: 1.5; color: var(--ms-secondary); padding-left: 22px; position: relative; }
.plan-list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--sky-accent); }
.plan .sky-button { align-self: stretch; }

.pricing-faq { margin-top: 96px; padding-top: 0; }

@media (max-width: 980px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 28px; }
  .plan, .plan--featured { margin-top: 0; }
  .plan--featured { order: -1; }
}
@media (max-width: 860px) {
  .pricing { padding-block: 40px 90px; }
  .pricing-intro { margin-bottom: 40px; }
  .plan { padding: 28px 24px; }
  .plan--featured { padding: 32px 24px; }
  .pricing-faq { margin-top: 64px; }
}