/*
    THE PRICING PAGE'S OWN STYLESHEET.

    The plan cards and the questions under them. 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);
}

/* The trial, under the button that takes it. Centred on the button rather than ranged left with
   the feature list, because it belongs to the action above it and not to the column. */
.sv-plan__trial {
  margin: var(--sv-space-2) 0 0;
  text-align: center;
}

.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;
}

/* ── The period switch, without a circuit ──────────────────────────────────

   THIS PAGE WAS THE ONLY PUBLIC ROUTE ON InteractiveServer, and it was there for one control: a
   monthly/annual toggle. Every anonymous visitor to the pricing page opened a SignalR circuit to
   read a price. Two radios and a sibling selector do the same job with no server involved, and the
   page drops to SSR like every other marketing page.

   PLAIN SIBLING COMBINATORS, NOT :has(). The radios sit as direct siblings of both the switch and
   the card grid, so `~` reaches everything that has to change. Nothing here needs a parent
   selector.

   .sv-toggle IS A SHARED UTILITY and the billing screen inside the application wears the same
   control with real buttons. Its `button` rules are untouched; these mirror them onto the labels
   this page uses instead, which is why they live in the page's own stylesheet.

   THE RADIO STAYS FOCUSABLE. It is moved off-screen rather than display:none - a hidden input is
   not in the tab order, and the switch has to be operable from the keyboard. The focus ring is
   drawn on the label the focused radio names. */

.sv-period {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sv-toggle label {
  border: 0;
  background: transparent;
  color: var(--sv-text-secondary);
  padding: 6px 14px;
  border-radius: var(--sv-radius-pill);
  font: 500 12px/1 var(--sv-font-sans);
  cursor: pointer;
  user-select: none;
}

#sv-period-monthly:checked ~ .sv-row .sv-toggle label[for="sv-period-monthly"],
#sv-period-annual:checked ~ .sv-row .sv-toggle label[for="sv-period-annual"] {
  background: var(--sv-accent-fill);
  color: var(--sv-on-accent);
}

#sv-period-monthly:focus-visible ~ .sv-row .sv-toggle label[for="sv-period-monthly"],
#sv-period-annual:focus-visible ~ .sv-row .sv-toggle label[for="sv-period-annual"] {
  outline: 2px solid var(--sv-accent);
  outline-offset: 2px;
}

/* Both figures are rendered; the switch decides which is shown. */
#sv-period-monthly:checked ~ .sv-plans [data-period="annual"],
#sv-period-monthly:checked ~ .sv-row [data-period="annual"],
#sv-period-annual:checked ~ .sv-plans [data-period="monthly"],
#sv-period-annual:checked ~ .sv-row [data-period="monthly"] {
  display: none;
}

/* ── Before you start ───────────────────────────────────────────────────────

   THE QUESTIONS UNDER THE PRICES, one ruled row each. Not .sv-explainer: that is the application's
   collapsed note, set in the mono label face, and a question a buyer is scanning for has to read as
   a sentence at the page's own scale. The marker is the explainer's, so the two disclosures in the
   product open the same way.

   HELD TO A READING MEASURE rather than the container, because an answer is prose and a
   1100-pixel line is the other way prose stops being read. */

.sv-faq {
  max-width: 820px;
  margin-top: var(--sv-space-5);
  border-top: 1px solid var(--sv-border-subtle);
}

.sv-faq + p {
  margin-top: var(--sv-space-5);
}

.sv-faq__item {
  border-bottom: 1px solid var(--sv-border-subtle);
}

.sv-faq__item > summary {
  display: flex;
  gap: var(--sv-space-3);
  padding: var(--sv-space-4) 0;
  cursor: pointer;
  list-style: none;
  font: 600 15px/1.4 var(--sv-font-sans);
  color: var(--sv-text);
}

.sv-faq__item > summary::-webkit-details-marker {
  display: none;
}

.sv-faq__item > summary::before {
  content: "+";
  flex: none;
  width: 1rem;
  color: var(--sv-accent);
  font-family: var(--sv-font-mono);
}

.sv-faq__item[open] > summary::before {
  content: "-";
}

.sv-faq__item > summary:hover {
  color: var(--sv-accent);
}

/* Indented by the marker's own width plus the gap, so the answer hangs under the question's first
   word rather than under the marker. */
.sv-faq__answer {
  padding: 0 0 var(--sv-space-4) calc(1rem + var(--sv-space-3));
}

.sv-faq__answer p {
  margin: 0;
  max-width: 68ch;
  font: 400 15px/1.6 var(--sv-font-sans);
  color: var(--sv-text-secondary);
}

.sv-faq__answer p + p {
  margin-top: var(--sv-space-3);
}