/* Pricing page: reference-first presentation. Tokens match
   company/design/references/pricing.html. Page-scoped like homepage-hero.css —
   only ever linked from pricing.html. Loaded after reference-system.css so the
   two overrides at the bottom of this file can win the places that shared sheet
   drops text below this page's minimums. */

/* The account-first note: a calm, expected next step, not a warning. Deliberately
   static (not the #pricing-status box, which is reused for real errors/loading
   states and must keep its existing warning styling). */
.account-note {
  margin: 20px 0 0;
  padding: 14px 16px;
  background: #e8f4ee;
  color: #102c27;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.5;
}
.account-note strong {
  display: block;
  margin-bottom: 2px;
}

.cancel-line {
  margin: 18px 0 0;
  color: #405765;
  font-size: 16px;
}

.phone-check {
  padding: 30px 0 4px;
}
.phone-check p {
  margin: 0 0 14px;
  max-width: 46ch;
  font-size: 16px;
  color: #21313e;
}

.limits {
  margin: 26px 0 0;
  padding: 16px 18px;
  border-left: 4px solid #006b52;
  background: #e8f4ee;
  color: #102c27;
  border-radius: 0 12px 12px 0;
}
.limits p {
  margin: 0;
  font-size: 16px;
}

.questions {
  padding: 26px 0 4px;
}
.questions p {
  margin: 0 0 8px;
  color: #405765;
  font-size: 16px;
}
.questions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: 18px;
  font-weight: 500;
  font-size: 16px;
  color: #006b52;
}

.signin-line {
  margin: 22px 0 0;
  color: #405765;
  font-size: 16px;
}
.signin-line a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  color: #006b52;
}

/* #pricing-status doubles as an error/loading banner and, now, the unconfirmed-
   compatibility explanation; when message() attaches a link, give it its own
   line under the text (it's .action.secondary, inline-flex by default, so it
   would otherwise try to sit beside the text) instead of a new button style. */
#pricing-status a.action {
  display: block;
  width: fit-content;
  margin-top: 10px;
}

/* "Most chosen" tag: .price-tile has overflow:hidden in trust.css, so the badge
   sits inside the card (above the name) instead of overlapping its top edge.
   .price-tile is also display:flex;flex-direction:column, so without align-self
   the badge stretches to the card's full width (flex align-items:stretch). */
.price-tile .tag {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 8px;
  padding: 4px 10px;
  background: #006b52;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
}

/* --- Narrow, page-scoped fixes for two shared-CSS defects (reference-system.css) --- */
/* That sheet drops all buttons/.action links to 13px site-wide (no !important on
   this property), under both the 14px mechanical minimum and this page's 16px
   body-text minimum. Same defect exists on every ref-page button; flagged to
   Design Systems rather than patched globally from here. */
body[data-reference-page="pricing"] .action {
  font-size: 16px;
}

/* That sheet also forces all .site-footer text to 12px!important site-wide,
   under the 14px mechanical minimum. Needs matching specificity + !important to
   win; same defect exists on every .site-footer page (e.g. the homepage). */
body[data-reference-page="pricing"] .site-footer .footer-links-new a {
  font-size: 15px !important;
  color: #21313e !important;
  min-height: 44px;
  min-width: 44px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body[data-reference-page="pricing"] .site-footer .site-brand {
  font-size: 15px !important;
  color: #21313e !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* The footer is the page's last content; at rest, scrolled to the bottom, its
   last link would sit under the fixed chat launcher's bottom-right corner. */
@media (min-width: 900px) {
  body[data-reference-page="pricing"] .site-footer .footer-top {
    padding-right: 90px;
  }
}