/*
 * Planes y precios. Public, like the guide, and reached from pretor.ar by somebody who has not
 * signed up yet — so it stands on its own with no nav above it and has to look like the same
 * product as the marketing page they just came from.
 *
 * It carried no stylesheet at all until now, which is why it read as a wall: raw markup with the
 * browser's own margins. The classes were already here and correct; only the rules were missing.
 */

.plans {
  max-inline-size: 62rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.plans__header {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: center;
}

.plans__header h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
  line-height: 1.15;
  margin: 0;
}

.plans__lead {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
  max-inline-size: 44rem;
  margin-inline: auto;
}

/* Scarcity, not a user count. Reads as an offer rather than as a warning, so it is gold and
   not the alert red the rest of the app uses for things that went wrong. */
.plans__promo {
  margin: 0;
  padding: 0.9rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-align: center;
}

.plans__unavailable {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  line-height: 1.65;
}

.plans__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .plans__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .plans__list { grid-template-columns: repeat(4, 1fr); }
}

/* A column, so the button sits on the same baseline in every card however long the summary
   above it runs. Integral's sentence is the longest and would otherwise drag its button down
   alone. */
.plans__plan {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--stone-card);
}

.plans__name {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.plans__price {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--oxblood);
}

.plans__per {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.plans__includes {
  margin: 0 0 1.4rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}

/* The auto margin that pins a control to the baseline above has to name both controls: button_to
   renders a form, and the free card's call to action (PRE-147) is a plain link. */
.plans__plan > form,
.plans__plan > .btn {
  margin-top: auto;
}

.plans__plan .btn {
  inline-size: 100%;
  justify-content: center;
  text-align: center;
}

.plans__terms {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  max-inline-size: 46rem;
}

.plans__terms h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
}

.plans__terms p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--muted);
}

/* The shared inbox add-on (PRE-114). A section under the ladder rather than a fifth card in it:
   it is not a level, it is bought ON one, and sitting it in the grid would invite a reader to
   compare a per-person monthly fee against an abono. It borrows .plans__terms' shape for the same
   reason it sits beside it: both are things the firm agrees to rather than things it picks from. */
.plans__addon {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  max-inline-size: 46rem;
}

.plans__addon h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
}

.plans__addon p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--muted);
}

/* The price keeps the ladder's own treatment, so the one number a reader is looking for reads the
   same here as it does on a plan card. */
.plans__addon .plans__price {
  color: var(--oxblood);
  font-size: 1.4rem;
}

.plans__addon-terms {
  margin: 0;
  padding-inline-start: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--muted);
}

/* The three sentences the firm has to actually read: what the price is against, that the add-on
   buys no work, and where its clients' conversations are stored. Given the body colour rather than
   the muted one, because muting them would be quietly demoting the disclosure this section exists
   to make — and, for the first of them, hiding the argument that makes the figure legible. */
.plans__addon-worth,
.plans__addon-work,
.plans__addon-storage {
  color: inherit;
}