/* ── Pricing page ───────────────────────────────────────────
   /pricing in the landing's design: views/pricing.js wraps the plans in .lp,
   so the page gets the same canvas, light/dark tokens, blue accent and header
   as the landing. This file restyles the plan cards (views/landing-plans.js)
   to match: Geist for the title and prices, hairline cards on the page
   colour, the accent only on the plan we recommend, flat colour throughout,
   and a compact phone layout. Scoped to .pricing-page so the dashboard's
   plan panel (billing.css) is untouched. */

.pricing-page .plans { margin-top: clamp(24px, 4vw, 56px); gap: 36px; }

.pricing-page .plans-head { gap: 14px; }

.pricing-page .plans-title {
  font-family: var(--font-geist);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 600;
}

.pricing-page .plans-note { font-size: clamp(15.5px, 1.3vw, 17px); color: var(--muted); }
.pricing-page .plans-save { color: var(--lp-cyan); font-weight: 500; }

.pricing-page .segmented {
  padding: 4px;
  border: none;
  background: var(--lp-panel);
  box-shadow: 0 0 0 1px var(--lp-hair);
}

.pricing-page .segmented-btn { padding: 7px 18px; font-size: 13.5px; }
.pricing-page .segmented-btn[aria-pressed="true"] { background: var(--lp-accent); color: var(--lp-on-accent); }

.pricing-page .plan-grid { gap: 20px; max-width: 1120px; width: 100%; margin: 0 auto; }

.pricing-page .plan {
  gap: 16px;
  padding: 30px 28px 32px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--lp-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.pricing-page .plan:hover { transform: none; border-color: var(--line-hi); }

/* The recommended plan: an accent ring and a lift, nothing louder. */
.pricing-page .plan.is-featured {
  border: 1.5px solid var(--lp-accent);
  background: var(--lp-panel);
  box-shadow: 0 28px 56px -32px rgba(9, 9, 11, 0.35);
}

.pricing-page .plan-badge { left: 26px; background: var(--lp-accent); color: var(--lp-on-accent); }

.pricing-page .plan-name { font-family: var(--font-geist); font-size: 19px; letter-spacing: -0.02em; }

.pricing-page .plan-amount {
  font-family: var(--font-geist);
  font-size: clamp(44px, 4.2vw, 54px);
  letter-spacing: -0.05em;
}

/* Room for the longest billing line (Brand's wraps to two) so all three
   buttons share one baseline. */
.pricing-page .plan-billing { min-height: 38px; }

.pricing-page .plan-tick { color: var(--lp-accent-ink); }
.pricing-page .plan-features li { color: var(--text); }
.pricing-page .plan-inherits { color: var(--subtle); }

/* Secondary plans: an outline button, so only Pro's is a filled one. */
.pricing-page .plan .btn:not(.btn--primary) {
  background: transparent;
  border-color: var(--line-hi);
}

.pricing-page .plan .btn:not(.btn--primary):hover:not(:disabled) { background: var(--surface-hi); }

.pricing-page .plan-link { color: var(--lp-accent-ink); text-decoration-color: currentColor; }

/* Phones: one compact column, the variable lines no longer padded to align
   (nothing sits beside them), and every size a step down. */
@media (max-width: 600px) {
  .pricing-page .plans { margin-top: 12px; gap: 24px; }
  .pricing-page .plans-head { gap: 10px; }
  .pricing-page .plans-title { font-size: 34px; }
  .pricing-page .plans-note { font-size: 15px; }
  .pricing-page .plan-grid { gap: 16px; }
  .pricing-page .plan { gap: 12px; padding: 22px 18px 24px; border-radius: 20px; }
  .pricing-page .plan-badge { left: 18px; }
  .pricing-page .plan-amount { font-size: 40px; }
  .pricing-page .plan-billing,
  .pricing-page .plan-tagline { min-height: 0; }
  .pricing-page .plan-tagline { font-size: 13.5px; }
  .pricing-page .plan-features { gap: 8px; }
  .pricing-page .plan-features li { font-size: 13.5px; }
}