/* /pricing/ and /zh/pricing/ (self-serve Phase 2, 2026-09-28). Loads after
   /style.css and /calculators/calculators.css, whose .mc-* layout, FAQ
   and focus rules the page reuses; only what pricing adds lives here.
   Same tokens as the rest of the public site, no new colours. */

.visually-hidden {
  border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px;
}

.pk-status {
  border-left: 2px solid var(--color-accent);
  color: var(--color-ink);
  line-height: 1.6;
  margin: var(--space-24) 0 0;
  max-width: 70ch;
  padding: var(--space-4) 0 var(--space-4) var(--space-16);
}

/* Free plan: one wide card, the list in two columns on a wide screen. */
.pk-free {
  background: var(--color-card);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-cards);
  margin-top: var(--space-40);
  padding: var(--card-padding);
}
.pk-free-top { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); justify-content: space-between; }
.pk-name { color: var(--color-white); font-size: 1.25rem; font-weight: 480; letter-spacing: -0.01em; margin: 0; }
.pk-price {
  color: var(--color-white);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  font-variant-numeric: tabular-nums;
  font-weight: 480;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.pk-price-unit { color: var(--color-ink-soft); font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; }
.pk-list {
  color: var(--color-ink-soft);
  columns: 2 22rem;
  column-gap: var(--space-40);
  line-height: 1.55;
  margin: var(--space-24) 0;
  padding-left: 1.1rem;
}
.pk-list li { break-inside: avoid; margin-bottom: var(--space-8); }

/* Open for testing (2026-09-29): no packs on this page; the note sends
   anyone who wants more to WhatsApp. */
.pk-status p { margin: 0; }
.pk-test-cta { margin-top: var(--space-12); }

.pk-peg { color: var(--color-ink-soft); line-height: 1.65; margin: 0; }
.pk-subhead { color: var(--color-ink); font-size: 1.0625rem; font-weight: 480; margin: var(--space-32) 0 var(--space-12); }
.pk-costs { border-collapse: collapse; width: 100%; }
.pk-costs th, .pk-costs td {
  border-bottom: 1px solid rgba(255, 60, 74, 0.2);
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: var(--space-12) var(--space-8) var(--space-12) 0;
  text-align: left;
  vertical-align: top;
}
.pk-costs thead th { color: var(--color-ink-soft); font: 400 0.75rem/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.pk-costs tbody th { color: var(--color-ink); font-weight: 400; }
.pk-costs td { color: var(--color-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pk-close .btn-cta { margin-top: var(--space-24); }

@media (max-width: 560px) {
  .pk-free { padding: var(--space-20); }
  .pk-costs td { white-space: normal; }
}