/*
    THE PRICING PAGE'S OWN STYLESHEET.

    The plan cards and nothing else. Its consumer is Components/Pages/Marketing/Pricing.razor.

    A CAPABILITY A PLAN DOES NOT INCLUDE IS SHOWN, not omitted - recessive rather than absent,
    because the whole point of listing it is that the reader can see what they would gain. It is the
    same rule a waterfall step that did not apply is drawn by: a thing that does not apply reports
    zero and says so.

    WHAT IT DOES NOT OWN. .sv-toggle is the monthly/annual switch and the billing screen inside the
    application wears the same control, so it is a utility and stays in utilities.css. The page hero
    above these cards is public-site.css's, because about and help wear it too.
*/

.sv-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sv-space-4);
  align-items: start;
}

.sv-plan {
  background: var(--sv-bg-raised);
  border: 1px solid var(--sv-border-subtle);
  border-radius: var(--sv-radius-panel);
  padding: var(--sv-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-3);
  position: relative;
}

.sv-plan--featured {
  border-color: var(--sv-accent);
}

.sv-plan__price {
  font: 400 34px/1.1 var(--sv-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sv-text);
}

.sv-plan__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-2);
}

.sv-plan__features li {
  display: flex;
  gap: var(--sv-space-2);
  font: 400 13px/1.5 var(--sv-font-sans);
  color: var(--sv-text-secondary);
}

.sv-plan__features li::before {
  content: '✓';
  color: var(--sv-accent);
  font-family: var(--sv-font-mono);
}

.sv-plan__features li.sv-plan__feature--absent {
  color: var(--sv-text-faint);
}

.sv-plan__features li.sv-plan__feature--absent::before {
  content: '-';
  color: var(--sv-text-faint);
}

/* ── The gaps the page used to state in its markup ────────────────────────────
   The plan card already owns its own rhythm, so a paragraph in one carries none.
   What is left is the two blocks either side of the grid: the control that
   changes what the cards say, and the note about what every plan includes.
   ------------------------------------------------------------------------ */

.sv-plan > p {
  margin: 0;
}

.sv-row + .sv-plans {
  margin-top: var(--sv-space-5);
}

/* What every plan includes, under the plans. A heading and two notes, so it
   states its gap once rather than on each note. */
.sv-plans + .sv-card {
  margin-top: var(--sv-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-2);
}

.sv-plans + .sv-card > p {
  margin: 0;
}