/* ============================================================================
   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; }
/* The note as plans.html ships it, and as an older, cached plans/index.js
   still fills it: one sentence. The current script swaps this class for
   `.plans-status` below the moment it draws, so this rule is only ever seen
   in the hour after a deploy — and is here so that hour looks as it always
   did rather than unstyled. */
.plans-bar__note { font-size: var(--text-sm); color: var(--color-text-muted); display: inline-flex; align-items: center; gap: var(--space-2); }

/* ---- where the member stands ---------------------------------------------
   The level held, what is available, and the one rule that follows from
   holding a level. Labelled figures in a single bordered strip — the same
   label-then-value pairing, hairline between, that the wallet readout in the
   top bar uses, so it reads as a part of the product rather than a new idea.

   This replaced a sentence: "You're on Pro · ₦29,400 · available ₦4,480.00 ·
   levels only move up", set as an inline-flex row. Every fragment of that
   sentence was its own flex item, so when the row ran out of width each one
   wrapped separately and the line came apart into ragged columns. A cell that
   holds a label over a value has nothing in it that can break that way.

   The class is put on by plans/index.js as it fills the block, so there is
   never an empty bordered box waiting for its contents. Every piece inside is
   a <span> and every one is given its `display` here — none of them relies on
   being a block. */
.plans-status {
  display: flex; align-items: stretch; min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-1);
  box-shadow: var(--edge-highlight);
}

/* A figure keeps its own width in the strip. When room runs short it is the
   sentence at the end that gives way and wraps, never a figure — "None yet"
   squeezed onto two lines is a figure that has stopped reading as one. */
.plans-status__cell {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  flex: none; min-width: 0;
}
.plans-status__cell + .plans-status__cell { border-left: 1px solid var(--color-border); }
.plans-status__label {
  font-size: var(--text-2xs); font-weight: var(--weight-medium);
  color: var(--color-text-faint); white-space: nowrap;
}
.plans-status__value {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.plans-status__value .icon { flex: none; }
/* The level's name and its price. They may part company — the price onto a
   line of its own — but neither may break inside itself: a price split across
   two lines is two wrong prices. */
.plans-status__pair {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-2);
  min-width: 0;
}
.plans-status__value span { white-space: nowrap; }
/* The price, beside the name and quieter than it. */
.plans-status__meta { font-weight: var(--weight-regular); color: var(--color-text-muted); }

/* The sentence under — or, on a wide screen, beside — the figures. */
.plans-status__foot {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-left: 1px solid var(--color-border);
  font-size: var(--text-xs); line-height: var(--leading-snug);
  color: var(--color-text-muted);
  flex: 0 1 auto; min-width: 0;
}
.plans-status__foot .icon { flex: none; }
.plans-status__foot .icon:not(.text-accent) { color: var(--color-text-faint); }

.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
   =========================================================================== */
/* ---- the status block, on a phone -----------------------------------------
   640px, the width at which the bottom bar appears and the product becomes its
   phone self. The bar stacks — the chip, then the block at the full width of
   the page — and the strip becomes a panel: the two figures side by side in
   equal columns, label over value, and the sentence across the foot of both.

   Equal columns, not "as wide as their contents". A level and a balance are a
   pair, and a pair set in two different widths looks like an accident. */
@media (max-width: 640px) {
  .plans-bar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: var(--space-3); }

  .plans-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-status--single { grid-template-columns: minmax(0, 1fr); }

  .plans-status__cell {
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
  }
  /* Small capitals over the figure, as on the balance cards in the wallet. */
  .plans-status__label {
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps); text-transform: uppercase;
  }
  /* Top-aligned, so that when the price drops to a second line the tick stays
     with the name on the first rather than floating between the two. */
  .plans-status__value { align-items: flex-start; max-width: 100%; font-size: var(--text-md); line-height: var(--leading-snug); }
  .plans-status__value .icon { margin-top: 3px; }
  .plans-status__meta { font-size: var(--text-sm); }

  .plans-status__foot {
    grid-column: 1 / -1; align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border-left: none; border-top: 1px solid var(--color-border);
  }
  /* Beside the first line of the sentence, not the middle of all of it. */
  .plans-status__foot .icon { margin-top: 1px; }
}

@media (max-width: 560px) {
  .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; }