/* ---------- Pricing page: extends the .price cards in site.css ---------- */
.plans { display: grid; gap: 1rem; }

/* The result and the custom quote span the width: text on the left, the action on the right. */
.plan-wide { display: grid; gap: 1.25rem; }
.plan-wide .btn { justify-self: start; }
@media (min-width: 760px) {
  .plan-wide { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; }
}

/* Tier and billing-period pickers: segmented controls of radio buttons, revealed by pricing.js. */
.picker { display: grid; gap: 0.5rem; margin-top: 1rem; }
.picker[hidden] { display: none; }
.picker .eyebrow { margin-top: 0.75rem; }
.segmented { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.segmented button {
  display: inline-flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--ghost-border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.14s, border-color 0.14s, color 0.14s;
}
.segmented button small { font-size: 0.72rem; font-weight: 500; color: var(--accent-deep); }
.segmented button:hover { border-color: var(--accent); }
.segmented button[aria-checked="true"] { border-color: var(--ink); background: var(--ink); color: var(--white); }
.segmented button[aria-checked="true"] small { color: var(--white); }
/* The billing periods while the free version is picked: muted, the remembered period still outlined. */
.segmented button:disabled { border-color: var(--line); background: var(--surface); color: var(--muted); cursor: not-allowed; }
.segmented button:disabled small { color: var(--muted); }
.segmented button:disabled[aria-checked="true"] { border-color: var(--muted); }
/* Eight tiers: four per row on phones and tablets, one row from 900px up. */
.segmented-tiers { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (min-width: 640px) {
  .segmented button { flex: 0 1 auto; min-width: 9rem; padding-inline: 1rem; }
  .segmented-tiers button { min-width: 0; padding-inline: 0.5rem; }
}
@media (min-width: 900px) {
  .segmented-tiers { grid-template-columns: repeat(8, 1fr); }
}

.result { margin-top: 1rem; border-color: var(--ink); }
.price .amount + .total { margin-top: 0.15rem; font-size: 0.85rem; color: var(--muted); }
.result .vat { margin-top: 0.75rem; font-size: 0.85rem; color: var(--muted); }

/* Note for existing customers, between the result card and the price list. */
.existing { margin-top: 1rem; padding: 0.75rem 1rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: var(--radius-sm); color: var(--muted); }
.existing strong { color: var(--ink); }
.existing a { color: var(--accent-deep); font-weight: 600; overflow-wrap: anywhere; }

/* The complete price list: always shown, highlighted by pricing.js at the picked tier and period. */
.price-table { margin-top: 1rem; }
.price-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.price-table caption { padding-bottom: 0.75rem; text-align: left; font-weight: 600; }
.price-table th,
.price-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
.price-table th:first-child { text-align: left; border-left: 3px solid transparent; }
.price-table thead th { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.price-table td { font-weight: 600; white-space: nowrap; }
.price-table td small { display: block; margin-top: 0.15rem; font-size: 0.75rem; font-weight: 500; color: var(--muted); white-space: normal; }
.price-table td:has(> .price-pick) { padding: 0; }
.price-table .price-pick {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: right;
  white-space: inherit;
  cursor: pointer;
}
.price-table .price-pick:disabled { cursor: default; }
.price-table .price-pick:enabled:hover { background: var(--surface); }
.price-table .price-pick small { display: block; }
.price-table tr.is-selected th,
.price-table tr.is-selected td,
.price-table .is-selected[data-period] { background: var(--surface); }
.price-table tr.is-selected th:first-child { border-left-color: var(--accent); }
.price-table thead th.is-selected { color: var(--ink); }
.price-table tr.is-selected td.is-selected { color: var(--accent-deep); font-weight: 800; }
@media (max-width: 479px) {
  .price-table table { font-size: 0.85rem; }
  .price-table th,
  .price-table td { padding: 0.5rem 0.35rem; }
  .price-table td:has(> .price-pick) { padding: 0; }
  .price-table .price-pick { padding: 0.5rem 0.35rem; }
  .price-table th:first-child { padding-left: 0.5rem; }
  .price-table td small { font-size: 0.68rem; }
}

.payment-step .eyebrow { margin-bottom: 0.5rem; }
.faq { display: grid; gap: 2rem; max-width: 46rem; }
.faq dd { margin: 0.6rem 0 0; color: var(--muted); }