/* ============================================================
   pages/pricing.css — Pricing page.
   Design-system classes only; values via tokens.css.
   Lean "Free now / Pro coming soon" layout (payment not yet live).
   ============================================================ */

.pricing {
  max-width: var(--container-read);
  margin: 0 auto;
}

/* ── Hero ───────────────────────────────────────────────── */
.pricing-hero {
  padding: var(--s-11) 0 var(--s-9);
  border-bottom: var(--hairline);
}
.pricing-hero__sub {
  margin: var(--s-5) 0 0;
  max-width: 54ch;
}

/* ── Plan grid ──────────────────────────────────────────── */
.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  padding: var(--s-9) 0;
  border-bottom: var(--hairline);
}
@media (max-width: 640px) {
  .plan-grid { grid-template-columns: 1fr; }
}

.plan {
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: var(--hairline-strong);
  border-radius: var(--radius-2);
  padding: var(--s-7);
}
.plan--pro {
  border-top: var(--rule-accent);
}

.plan__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.plan__name {
  font: 600 var(--t-h2)/1 var(--sans);
  color: var(--ink-900);
}
.plan__tag {
  font: 600 var(--t-micro)/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--accent);
}
.plan__price {
  font: 500 var(--t-display-s)/1 var(--serif);
  color: var(--ink-900);
  margin: var(--s-3) 0 var(--s-1);
}
.plan__price small {
  font: 400 var(--t-body-s) var(--sans);
  color: var(--fg-meta);
}
.plan__note {
  margin: 0 0 var(--s-6);
  color: var(--fg-meta);
}

/* Outcome list */
.plan__list {
  list-style: none;
  margin: 0 0 var(--s-7);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1 1 auto;
}
.plan__list li {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
}
.plan__list li::before {
  content: "\2192"; /* → */
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}
.plan--free .plan__list li::before {
  content: "\00B7"; /* · */
  color: var(--ink-400);
}

/* CTA */
.plan__cta {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.btn--block {
  justify-content: center;
  width: 100%;
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-body);
}
.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--cream-300);
  border-color: var(--cream-400);
  color: var(--ink-500);
  cursor: not-allowed;
}

/* ── FAQ ────────────────────────────────────────────────── */
.pricing-faq {
  padding: var(--s-9) 0 var(--s-10);
}
.pricing-faq__item {
  padding: var(--s-6) 0;
  border-top: var(--hairline);
}
.pricing-faq__item:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.pricing-faq__q {
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 var(--s-2);
}
.pricing-faq__a {
  margin: 0;
  color: var(--ink-800);
}

/* ── Fine print ─────────────────────────────────────────── */
.pricing-fine {
  padding: var(--s-8) 0 var(--s-9);
  border-top: var(--hairline);
  text-align: center;
  font: 400 var(--t-micro)/var(--lh-relax) var(--sans);
  color: var(--fg-meta);
  max-width: 60ch;
  margin: 0 auto;
}