/* =============================================================================
   pricing.css — the plans grid and the credit table.

   Everything here is built from the site tokens. No colour, radius, shadow or
   spacing value is written literally: the pricing page has to look like a
   TerraMap page, not like a pricing template that happens to live on one.

   Two things carry the design weight:

     .tm-plans        a four-up grid that degrades to two and then one, sized
                      so the four cards stay comparable at a glance
     .tm-credit-table a wide data table that SCROLLS inside its own container
                      rather than making the page scroll sideways
   ============================================================================= */

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.tm-price-hero .tm-lead {
  max-inline-size: var(--tm-measure);
}

.tm-price-hero .tm-btn-row {
  margin-block-start: var(--tm-space-6);
}

/* ── Plans ─────────────────────────────────────────────────────────────────
   FIVE ACROSS AT DESKTOP, A SNAP RAIL BELOW IT.

   The five self-service plans are a ladder, and the page's whole argument is
   the progression along it. Broken over two rows, Growth and Scale read as an
   afterthought rather than the destination, so they stay on one line wherever
   one line is honest -- and where it stops being honest the row becomes a
   swipeable rail rather than an awkward 3+2. */

.tm-plans {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--tm-space-3);
  align-items: stretch;
  margin-block-start: var(--tm-space-7);
}

/* Between the rail and the full row there is a band where five cards fit but
   only just; the gap tightens rather than the type shrinking, because narrow
   cards are recoverable and small text is not. */
@media (max-width: 1439px) and (min-width: 1180px) {
  .tm-plans { gap: var(--tm-space-2); }
}

/* Below that, a horizontal rail. Snapping makes it behave like a carousel
   without becoming one: no state, no buttons, no JavaScript. */
@media (max-width: 1179px) {
  .tm-plans {
    display: flex;
    gap: var(--tm-space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* The gutter is paid back as padding so the first and last cards are not
       flush against the viewport edge while scrolling. */
    margin-inline: calc(var(--tm-gutter) * -1);
    padding-inline: var(--tm-gutter);
    padding-block-end: var(--tm-space-3);
    scrollbar-width: thin;
  }
  .tm-plan {
    flex: 0 0 clamp(240px, 72vw, 300px);
    scroll-snap-align: start;
  }
  .tm-plans__rail-hint { display: block; }
}

/* One column on a phone: a rail you must swipe five times to compare is worse
   than a list you can scroll once. */
@media (max-width: 599px) {
  .tm-plans {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .tm-plan { flex: initial; }
  .tm-plans__rail-hint { display: none; }
}

.tm-plans__rail-hint {
  display: none;
  margin: var(--tm-space-2) 0 0;
  color: var(--tm-text-subtle);
  font-size: var(--tm-text-caption);
}

/* ── The card ──────────────────────────────────────────────────────────────
   Light by default: one border, no fills, no dividers except the single rule
   above the footer. Hierarchy is carried by type size and whitespace. */

.tm-plan {
  display: flex;
  flex-direction: column;
  padding: var(--tm-space-4) var(--tm-space-4) var(--tm-space-5);
  border: var(--tm-border-width) solid var(--tm-border);
  border-radius: var(--tm-radius-lg);
  background: var(--tm-surface);
  transition: transform var(--tm-duration-fast) var(--tm-ease),
              border-color var(--tm-duration-fast) var(--tm-ease),
              box-shadow var(--tm-duration-fast) var(--tm-ease);
}

@media (hover: hover) {
  .tm-plan:hover {
    transform: translateY(-2px);
    border-color: var(--tm-border-strong);
    box-shadow: var(--tm-shadow-sm);
  }
}

/* Emphasis by BORDER COLOUR only, so the two marked cards keep exactly the
   same geometry as the other three and every row still lines up. */
.tm-plan--featured { border-color: var(--tm-primary); }
.tm-plan--value { border-color: var(--tm-accent); }

/* The badge sits INSIDE the card, in a row every card reserves. Straddling
   the top border looked like a sticker and pushed the badged cards' contents
   down; reserving the row costs 22px and keeps five prices on one line. */
.tm-plan__badge-row {
  /* A FIXED height, not a minimum. With min-block-size the badge's own box
     (padding + line-height) came out 2px taller than the reserve, so the two
     badged cards pushed their prices 2px below the other three and the row
     stopped lining up -- measured, 76px against 74px. */
  block-size: 22px;
  margin-block-end: var(--tm-space-2);
}

.tm-plan__badge {
  display: inline-block;
  margin: 0;
  /* Height comes from line-height alone, so the badge always fits the row
     above exactly rather than depending on the inherited leading. */
  padding: 0 var(--tm-space-2);
  line-height: 20px;
  border-radius: var(--tm-radius-sm);
  background: var(--tm-primary-subtle);
  color: var(--tm-primary);
  font-size: var(--tm-text-caption);
  font-weight: var(--tm-weight-semibold);
  letter-spacing: var(--tm-tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}

.tm-plan--value .tm-plan__badge {
  background: var(--tm-accent-subtle);
  color: var(--tm-accent-text);
}

.tm-plan__name {
  margin: 0;
  color: var(--tm-text-muted);
  font-size: var(--tm-text-sm);
  font-weight: var(--tm-weight-semibold);
  letter-spacing: var(--tm-tracking-eyebrow);
  text-transform: uppercase;
}

/* PRICE: the dominant element on the card. */
.tm-plan__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: var(--tm-space-2) 0 0;
}

.tm-plan__amount {
  font-size: clamp(2rem, 2.4vw, 2.6rem);
  font-weight: var(--tm-weight-semibold);
  line-height: 1.05;
  letter-spacing: var(--tm-tracking-hero);
  font-variant-numeric: tabular-nums;
  /* $1,000 must never wrap onto two lines. */
  white-space: nowrap;
}

.tm-plan__period {
  color: var(--tm-text-muted);
  font-size: var(--tm-text-sm);
  white-space: nowrap;
}

/* CREDITS: second in the hierarchy, and typographic rather than a filled box. */
.tm-plan__quota {
  margin: var(--tm-space-4) 0 0;
}

.tm-plan__credits {
  display: block;
  font-size: var(--tm-text-h3);
  font-weight: var(--tm-weight-semibold);
  line-height: var(--tm-leading-tight);
  letter-spacing: var(--tm-tracking-h3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tm-plan__quota-label,
.tm-plan__rate {
  display: block;
  color: var(--tm-text-muted);
  font-size: var(--tm-text-sm);
}

.tm-plan__rate {
  margin: var(--tm-space-1) 0 0;
  font-variant-numeric: tabular-nums;
  min-block-size: 1.25rem;
}

.tm-plan__for {
  margin: var(--tm-space-4) 0 0;
  color: var(--tm-text-muted);
  font-size: var(--tm-text-sm);
  line-height: var(--tm-leading-relaxed);
}

/* The footer is pushed to the bottom, so the overage line and every CTA sit on
   the same baseline across all five cards however long the sentence above is. */
.tm-plan__foot {
  margin-block-start: auto;
  padding-block-start: var(--tm-space-4);
}

.tm-plan__overage {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tm-space-2);
  margin: 0 0 var(--tm-space-3);
  padding-block-start: var(--tm-space-3);
  border-block-start: var(--tm-border-width) solid var(--tm-divider);
  font-size: var(--tm-text-sm);
}

.tm-plan__overage-label { color: var(--tm-text-muted); }

.tm-plan__overage-value {
  color: var(--tm-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Enterprise ────────────────────────────────────────────────────────────
   A band, not a sixth card. It has no price, so presenting it in the same
   shape as the priced tiers invites a comparison that cannot be made.

   It used to be so quiet it read as a footnote. It now has its own eyebrow, a
   heading at section weight and a defined surface -- differentiation by
   surface and border, not by gradient or colour wash. */

.tm-enterprise {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tm-space-6);
  margin-block-start: var(--tm-space-6);
  padding: var(--tm-space-6);
  border: var(--tm-border-width) solid var(--tm-border-strong);
  border-radius: var(--tm-radius-lg);
  background: var(--tm-surface-sunken);
}

.tm-enterprise__body { min-inline-size: 0; }

.tm-enterprise__eyebrow {
  margin: 0;
  color: var(--tm-accent-text);
  font-size: var(--tm-text-caption);
  font-weight: var(--tm-weight-semibold);
  letter-spacing: var(--tm-tracking-eyebrow);
  text-transform: uppercase;
}

.tm-enterprise__title {
  margin: var(--tm-space-2) 0 0;
  font-size: var(--tm-text-h3);
  line-height: var(--tm-leading-snug);
  max-inline-size: 34ch;
}

.tm-enterprise__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tm-space-2) var(--tm-space-5);
  margin: var(--tm-space-4) 0 0;
  padding: 0;
  list-style: none;
  color: var(--tm-text-muted);
  font-size: var(--tm-text-sm);
}

.tm-enterprise__points li {
  position: relative;
  padding-inline-start: var(--tm-space-3);
}

.tm-enterprise__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--tm-accent);
}

.tm-enterprise__action {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: var(--tm-space-2);
}

.tm-enterprise__note {
  margin: 0;
  color: var(--tm-text-subtle);
  font-size: var(--tm-text-caption);
}

/* Stacked on a phone, with a full-width CTA: side-by-side leaves the button
   stranded in a narrow column against a wrapped heading. */
@media (max-width: 767px) {
  .tm-enterprise {
    flex-direction: column;
    align-items: stretch;
    gap: var(--tm-space-5);
    padding: var(--tm-space-5) var(--tm-space-4);
  }
  .tm-enterprise__title { max-inline-size: none; }
  .tm-enterprise__action { justify-items: stretch; }
  .tm-enterprise__action .tm-btn { inline-size: 100%; }
  .tm-enterprise__note { text-align: center; }
}

/* ── How billing works ─────────────────────────────────────────────────────
   Four peer rules across the content width. They were one prose column in a
   720px container, which left most of the screen empty and made four short,
   independent statements read as an essay. */

.tm-billing-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tm-space-5);
  margin-block-start: var(--tm-space-6);
}

@media (max-width: 1023px) {
  .tm-billing-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .tm-billing-facts { grid-template-columns: minmax(0, 1fr); }
}

/* A rule above each, not a box around each: these are informational, and four
   more bordered rectangles is the weight this page is being relieved of. */
.tm-billing-fact {
  min-inline-size: 0;
  padding-block-start: var(--tm-space-4);
  border-block-start: var(--tm-border-width) solid var(--tm-divider);
}

.tm-billing-fact h3 {
  margin: 0;
  font-size: var(--tm-text-body);
  line-height: var(--tm-leading-snug);
}

.tm-billing-fact p {
  margin: var(--tm-space-2) 0 0;
  color: var(--tm-text-muted);
  font-size: var(--tm-text-sm);
  line-height: var(--tm-leading-relaxed);
}

.tm-price-foot {
  margin-block-start: var(--tm-space-5);
}

/* ── The unavailable / stale notice ────────────────────────────────────────── */

.tm-price-alert {
  margin-block-start: var(--tm-space-5);
  padding: var(--tm-space-3) var(--tm-space-4);
  border: var(--tm-border-width) solid var(--tm-warning);
  border-radius: var(--tm-radius-md);
  background: var(--tm-warning-subtle);
  color: var(--tm-text);
  font-size: var(--tm-text-sm);
}

/* ── Credit table ──────────────────────────────────────────────────────────── */

/* The page must never scroll sideways, so the TABLE scrolls inside this.
   Asserted by the browser suite at 390px. */
.tm-table-wrap {
  margin-block-start: var(--tm-space-6);
  overflow-x: auto;
  border: var(--tm-border-width) solid var(--tm-border);
  border-radius: var(--tm-radius-lg);
  background: var(--tm-surface);
}

.tm-table {
  inline-size: 100%;
  border-collapse: collapse;
  /* Below this the columns start wrapping mid-word; the wrapper scrolls
     instead, which is readable where a squeezed table is not. */
  min-inline-size: 40rem;
  font-size: var(--tm-text-sm);
}

.tm-table th,
.tm-table td {
  padding: var(--tm-space-3) var(--tm-space-4);
  text-align: start;
  vertical-align: top;
}

.tm-table thead th {
  background: var(--tm-surface-sunken);
  color: var(--tm-text);
  font-weight: var(--tm-weight-semibold);
  white-space: nowrap;
  border-block-end: var(--tm-border-width) solid var(--tm-border);
}

.tm-table tbody th {
  font-weight: var(--tm-weight-medium);
}

.tm-table tbody tr + tr th,
.tm-table tbody tr + tr td {
  border-block-start: var(--tm-border-width) solid var(--tm-divider);
}

.tm-th-note {
  display: block;
  margin-block-start: 2px;
  color: var(--tm-text-muted);
  font-size: var(--tm-text-caption);
  font-weight: var(--tm-weight-regular);
  white-space: nowrap;
}

.tm-credit-table__usd {
  font-family: var(--tm-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Motion ────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tm-plan,
  .tm-price-alert {
    transition: none !important;
    animation: none !important;
  }
}