/* ============================================================================
   AVENLEO — PLANS
   ----------------------------------------------------------------------------
   Ten levels, which is a lot of cards, which is why density is the whole
   problem on this screen.

   The card is built to be COMPARED rather than read: the price is the largest
   thing, the rate sits directly under it because that is the number somebody is
   actually weighing, and the features are a scannable list rather than prose.
   Every card is identical except for its figures — no "most popular" ribbon, no
   colour per tier, no card scaled up to look chosen for you. A price list that
   leans on the reader is a price list they distrust.

   The current level is marked once, on its edge.
   ========================================================================== */

/* The heading carries no sub-line any more — the rate chip below it is the
   whole statement — so it sits closer to the bar that states it. */
.page__header { margin-bottom: var(--space-4); }

.plans-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
/* The terms stay together on the left however the bar wraps. Left to
   space-between on their own they drifted to opposite ends of the row and read
   as unrelated facts. */
.plans-bar__terms { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.plans-bar__note { font-size: var(--text-sm); color: var(--color-text-muted); display: inline-flex; align-items: center; gap: var(--space-2); }

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}

/* Stacks the parts and pins the button to the bottom, so the buttons in a row
   line up whatever the feature lists do. */
.plan { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }

.plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.plan__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
}
.plan__desc { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; line-height: var(--leading-snug); }

/* price + rate, as one block: the two numbers being compared, together */
.plan__money { display: flex; flex-direction: column; gap: var(--space-1); }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.plan__price .metric { font-size: var(--text-3xl); }
.plan__alt { font-size: var(--text-2xs); color: var(--color-text-faint); }
.plan__reward { align-self: flex-start; }
/* The per-prompt breakdown under the daily figure. Quieter than it, deliberately:
   the day is what somebody is deciding on, and the prompt rate is the working
   behind it — which is the opposite of how this card used to read, where a
   percentage was the loudest thing on it. */
.plan__perday {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* "Earns back $5.00 in 30 days" — the one claim the card is actually making.
   Louder than the working above it and quieter than the price: it is the line
   somebody repeats to themselves while deciding, so it gets the success colour
   the rest of the product uses for money coming in, and nothing else. */
.plan__cycle {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-accent-strong);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.plan__feats { display: flex; flex-direction: column; gap: 6px; }
.plan__feat { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-snug); }
.plan__feat .icon { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--color-success); }
.plan__cta { margin-top: auto; }

/* The level held right now. One mark, on the edge. */
.plan--current { border-color: var(--color-primary); border-left-width: 2px; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 560px) {
  .plans-bar { align-items: flex-start; }
  .plans-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The failure state, which occupies the grid rather than leaving it empty.
   Spans every column so it reads as one statement about the page instead of
   a card sitting where a level should be. */
.plans-error { grid-column: 1 / -1; }