/* ==========================================================================
   Lingriser — pricing page
   Loaded only by about/pricing/page.html.
   ========================================================================== */

/* Relative only so the "Most complete" tag can be pinned to the top edge.
   The cards are an information board — there are no buttons to line up, and
   equal heights come from `.trio` stretching its items. */
.price-card { position: relative; }

.price {
  margin: var(--space-4) 0;
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.price span {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Features a plan does not include — the marker becomes a dash rather than a
   dot, so the line still reads normally. */
.marker-list li.is-off { opacity: 0.65; }
.marker-list li.is-off::before {
  border-radius: 1px;
  height: 2px;
  top: 0.85em;
  opacity: 0.5;
}

.price-card--featured {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
}

.price-tag {
  position: absolute;
  top: calc(-1 * var(--space-3));
  right: var(--space-5);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-text-invert);
  font-size: var(--text-xs);
  font-weight: 600;
}