/* The public pricing page. Prose furniture comes from legal.css — this is a
   document as much as a page — and the plan cards from plans.css. Only the
   calculator block on top is new. */

.pricing-calc {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 22px;
  margin: 28px 0 8px;
  display: grid;
  gap: 18px;
}

.pricing-calc > label {
  display: grid;
  gap: 8px;
  max-width: 320px;
  font-weight: 600;
  font-size: 0.95rem;
}

.pricing-calc input {
  max-width: 140px;
}

/* Three plans at most, and they want to be readable rather than wide. */
.pricing-calc .plan-list {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* The page's own cards are not choices — nothing here is clickable, so
   nothing should invite a click. The first is highlighted because it is the
   cheapest, which is information, not a control. */
.pricing-calc .plan-card {
  cursor: default;
}

.pricing-calc .plan-card:hover {
  border-color: var(--plan-border);
}

.pricing-calc .plan-card.is-active:hover {
  border-color: var(--plan-active-border);
}

.pricing-cta {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}