/* The pricing page (pricing/show), on the home page's bands (home.css): the heading centred over a Monthly | Yearly
   switch, three plan cards (Business outlined in indigo, Pro dashed as not yet), then Free against Business as a
   table whose head stays under the site's header. The switch is two radios; :has() shows the chosen prices, and
   without it the year shows. Loaded only here. */

.pr-head { display: grid; justify-items: center; text-align: center; }
.pr-band .intro-title { max-width: 16ch; }
.pr-band .intro-lead { max-width: 30rem; }

/* A joined switch: rounded, its inside buttons 4px less (DESIGN.md, Shapes). */
.pr-bill { display: flex; width: max-content; margin: 2.25rem auto 0; padding: 4px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-control); background: var(--color-white); }
.pr-bill label { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.125rem; border-radius: calc(var(--radius-control) - 4px); color: var(--color-ink-muted); font-size: var(--text-small); font-weight: 620; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.pr-bill input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pr-bill label:has(input:checked) { background: var(--color-indigo); color: var(--color-white); }
.pr-bill label:has(input:focus-visible) { outline: 3px solid var(--color-indigo); outline-offset: 3px; }
.pr-off { padding: .125rem .5rem; border-radius: 9999px; background: color-mix(in oklab, var(--color-key-green) 18%, transparent); color: light-dark(#2f7a4d, #82cd9b); font-size: .75rem; font-weight: 650; white-space: nowrap; }
.pr-bill label:has(input:checked) .pr-off { background: rgb(255 255 255 / .18); color: inherit; }

/* The year shows unless Monthly is picked. */
.pr-when-month { display: none; }
.pr-page:has(#pr-month:checked) .pr-when-month { display: inline-flex; }
.pr-page:has(#pr-month:checked) .pr-when-year { display: none; }

.pr-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 56rem; margin: 2.5rem auto 0; }
.pr-plan { display: flex; flex-direction: column; padding: 1.75rem 1.5rem 1.5rem; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-white); }
.pr-plan.is-main { border: 2px solid var(--color-indigo); box-shadow: 0 30px 60px -24px rgb(30 27 75 / .4); }
.pr-plan.is-later { border: 1.5px dashed var(--color-line-strong); background: color-mix(in oklab, var(--color-white) 55%, transparent); }
.pr-plan-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.pr-plan h2 { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; }
.pr-tag { padding: .1875rem .625rem; border-radius: 9999px; background: var(--color-indigo); color: var(--color-white); font-size: .75rem; font-weight: 650; white-space: nowrap; }
.pr-tag.is-quiet { background: var(--color-mist); color: var(--color-ink-muted); }
.pr-plan-line { margin-top: .375rem; color: var(--color-ink-muted); font-size: .9375rem; }

.pr-price { display: flex; align-items: baseline; gap: .5rem; min-height: 4rem; margin-top: 1.5rem; }
.pr-price > span { align-items: baseline; gap: .5rem; }
.pr-price > .pr-when-year { display: inline-flex; }
.pr-price b { font-size: 3.25rem; font-weight: 400; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.pr-price b.is-quiet { color: var(--color-ink-soft); }
.pr-price small { color: var(--color-ink-muted); font-size: .875rem; font-weight: 550; }
.pr-price-note { margin-top: .375rem; color: var(--color-ink-soft); font-size: .8125rem; }

.pr-plan-btn { width: 100%; margin-top: 1.5rem; }
.pr-points { display: grid; gap: .625rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-line); font-size: .9375rem; }
.pr-points li { display: flex; align-items: flex-start; gap: .625rem; line-height: 1.4; }
.pr-points svg { color: var(--color-indigo); }

/* Free against Business, a group at a time. */
.pr-compare { padding-top: var(--home-space); }
.pr-compare .intro-h2 { max-width: 18ch; }
.pr-table { width: 100%; margin-top: 2.5rem; border-collapse: collapse; font-size: .9375rem; }
.pr-table thead th, .pr-table thead td { position: sticky; top: 4rem; z-index: 1; padding: 1rem .75rem; border-bottom: 1px solid var(--color-line-strong); background: var(--color-white); font-size: 1.125rem; font-weight: 650; text-align: center; }
.pr-table th[scope=row] { width: 50%; padding: .875rem .75rem .875rem 0; font-weight: 500; text-align: left; }
.pr-table td { width: 25%; padding: .875rem .75rem; text-align: center; font-variant-numeric: tabular-nums; }
.pr-table td svg { display: inline; color: var(--color-indigo); }
.pr-table tbody tr:not(.pr-group) { border-bottom: 1px solid var(--color-line); }
.pr-group th { padding: 2.25rem 0 .625rem; color: var(--color-ink-soft); font-size: var(--text-micro); font-weight: 650; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.pr-none { color: var(--color-ink-soft); }
.pr-compare + .intro-grey { margin-top: var(--home-space); }

@media (max-width: 63.99rem) {
  .pr-plans { grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin-inline: auto; }
  .pr-plan.is-main { order: -1; }
}
@media (max-width: 47.99rem) {
  .pr-bill { width: 100%; }
  .pr-bill label { flex: 1; justify-content: center; padding-inline: .75rem; }
  .pr-plan { padding: 1.25rem 1.125rem 1.125rem; }
  .pr-price b { font-size: 2.75rem; }
  .pr-table { font-size: .875rem; }
  .pr-table thead th, .pr-table thead td { font-size: 1rem; padding-inline: .375rem; }
  .pr-table th[scope=row] { width: 46%; }
  .pr-table td { width: 27%; padding-inline: .375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-bill label { transition: none; }
}

/* Business's button, one for each interval (pricing/_buy): a block either way, so the card stretches it and the black
   close centres it. */
.pr-buy { width: 100%; }
.pr-page:has(#pr-month:checked) .pr-buy.pr-when-month { display: block; }