/* Plan comparison table. Flat, monochrome, follows the page theme (app variables, else Bootstrap's).
   public/plan-compare.css and homepage/assets/plan-compare.css are the same file. */
.plan-compare { --pc-ink: var(--ink, var(--bs-body-color)); --pc-mute: var(--mute, var(--bs-secondary-color)); --pc-line: var(--line, var(--bs-border-color)); --pc-bg: var(--card, var(--bs-body-bg)); --pc-tint: color-mix(in srgb, var(--pc-ink) 7%, var(--pc-bg)); position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--pc-line); border-radius: 12px; background: var(--pc-bg); color: var(--pc-ink); max-width: 100%; }
.plan-compare:focus-visible { outline: 2px solid var(--pc-ink); outline-offset: 2px; }
.plan-compare table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; line-height: 1.35; margin: 0; }
.plan-compare th, .plan-compare td { padding: 10px 10px; text-align: center; vertical-align: middle; border-top: 1px solid var(--pc-line); background: var(--pc-bg); color: var(--pc-ink); }
.plan-compare thead th { border-top: 0; vertical-align: bottom; }
.plan-compare tbody th[scope="row"], .plan-compare thead th:first-child { position: sticky; left: 0; z-index: 1; width: 128px; text-align: left; font-weight: 600; box-shadow: 1px 0 0 var(--pc-line); }
.plan-compare .pc-name { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.plan-compare .pc-price { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--pc-mute); }
.plan-compare .pc-desc td, .plan-compare .pc-desc th { font-size: 12px; font-weight: 400; color: var(--pc-mute); text-align: center; }
.plan-compare .pc-desc th { text-align: left; font-weight: 600; color: var(--pc-mute); }
.plan-compare td.is-current, .plan-compare th.is-current { background: var(--pc-tint); }
.plan-compare thead th.is-current { box-shadow: inset 0 2px 0 var(--pc-ink); }
.plan-compare .pc-tag { display: inline-block; margin-top: 4px; padding: 1px 8px; border: 1px solid var(--pc-ink); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--pc-ink); }
.plan-compare .pc-mark { width: 18px; height: 18px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-compare .pc-no { color: var(--pc-mute); opacity: .7; }
.plan-compare .pc-text { font-size: 13px; font-weight: 500; }
.plan-compare .pc-cta td, .plan-compare .pc-cta th { padding-top: 12px; padding-bottom: 12px; }
.plan-compare .pc-cta a, .plan-compare .pc-cta span.pc-soon { display: inline-block; min-height: 32px; padding: 5px 12px; border: 1px solid var(--pc-ink); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--pc-ink); text-decoration: none; background: transparent; }
.plan-compare .pc-cta a:hover { background: var(--pc-ink); color: var(--pc-bg); }
.plan-compare .pc-cta span.pc-soon { border-color: var(--pc-line); color: var(--pc-mute); font-weight: 500; }
.plan-compare .pc-cta span.pc-here { font-size: 13px; font-weight: 600; color: var(--pc-mute); }
.plan-compare .pc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) {
  .plan-compare table { min-width: 520px; font-size: 13px; }
  .plan-compare tbody th[scope="row"], .plan-compare thead th:first-child { width: 112px; }
  .plan-compare th, .plan-compare td { padding: 9px 7px; }
}