/* Pricing page: plan cards, shared inclusions as ledger rows, comparison table, pricing FAQ. */

/* ---------- plan cards ---------- */
.pr-grid { display: grid; gap: 20px; }
.pr-plan {
  display: flex; flex-direction: column; padding: 24px;
  background: var(--field); border: 1px solid var(--rule); border-radius: 6px;
}
/* The recommended tier is marked by a heavier rule and the one primary button, not by a badge. */
.pr-plan.is-featured { border: 2px solid var(--accent); padding: 23px; }
.pr-audience { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.pr-plan h3 { margin: 0 0 8px; font-size: 1.375rem; line-height: 1.25; }
.pr-summary { margin: 0 0 16px; color: var(--muted); }
.pr-price { display: grid; gap: 2px; margin: 0 0 16px; padding: 10px 0; border-block: 1px solid var(--rule); }
.pr-price strong { font-size: 1.75rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pr-price span { font-size: 14px; color: var(--muted); }
.pr-includes { list-style: none; margin: 0 0 24px; padding: 0; }
.pr-includes li { display: flex; gap: 10px; margin: 0 0 10px; align-items: flex-start; }
.pr-includes .ic { color: var(--accent); margin-top: 3px; }
.pr-plan .btn { margin-top: auto; }
@media (min-width: 960px) {
  .pr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
}

/* ---------- included in every plan ---------- */
.pr-included-layout { display: grid; gap: 24px; }
.pr-rows { margin: 0; }
.pr-row { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--rule); }
.pr-row:last-child { border-bottom: 1px solid var(--rule); }
.pr-row dt { font-weight: 600; }
.pr-row dd { margin: 0; color: var(--muted); max-width: 62ch; }
@media (min-width: 900px) {
  .pr-included-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; }
  .pr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; }
}

/* ---------- comparison table ---------- */
.pr-compare { overflow-x: auto; border: 1px solid var(--rule); background: var(--field); border-radius: 6px; }
.pr-compare:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pr-compare table { min-width: 640px; font-size: 15px; }
.pr-compare th, .pr-compare td { padding: 12px 16px; vertical-align: top; }
.pr-compare thead th { background: var(--field); border-bottom: 1px solid var(--muted); }
.pr-compare tbody th { font-weight: 600; width: 22%; }
/* The row label stays visible while the plan columns scroll under it. */
.pr-compare tbody th, .pr-compare thead th:first-child {
  position: sticky; left: 0; background: var(--field); border-right: 1px solid var(--rule);
}
.pr-scroll-hint { display: none; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 759px) {
  .pr-scroll-hint { display: block; }
  .pr-compare tbody th { min-width: 132px; }
}

/* ---------- pricing FAQ ---------- */
.pr-faq-layout { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .pr-faq-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; }
}