/* ==========================================================================
   pricing.css — page-specific styles for pricing.html (the Upgrade page).
   Layers on top of css/main.css and resolves EVERY color, font, and radius
   from the --ca-* token contract declared there, so the light theme, the
   dark theme, and any runtime brand override from brand.js all work with no
   per-theme rules in this file.
   ========================================================================== */

/* Serif section headings on this page follow the handoff's quieter scale:
   no hairline underline, tighter size ("Already purchased?"). */
.ca-pricing h2 {
  font-size: var(--ca-fs-xl);
  border-bottom: none;
  padding-bottom: 0;
  margin: var(--ca-space-7) 0 var(--ca-space-3);
}

/* ---------- Comparison table -----------------------------------------------
   A single white card (12px radius, hairline border) wrapping a real <table>
   for accessibility. Header row is uppercase IBM Plex Mono; body rows are
   separated by hairlines only — no cell borders, no zebra fill. */
.ca-tiers-card {
  background: var(--ca-bg-elevated);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  overflow: hidden;
  margin: var(--ca-space-6) 0;
}
/* Narrow screens scroll the table inside the card, never the page body. */
.ca-tiers-scroll { overflow-x: auto; }

table.ca-tiers {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.875rem; /* 14px, per handoff */
}
.ca-tiers th,
.ca-tiers td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--ca-border);
  vertical-align: middle;
}
/* Uppercase-mono header row: What you get / Free / Premium. */
.ca-tiers thead th {
  font-family: var(--ca-font-mono);
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ca-text-label);
  padding: 14px 20px;
  text-align: left;
}
/* Feature names: plain body face, semibold, left-aligned. */
.ca-tiers tbody th {
  font-family: var(--ca-font-body);
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
  color: var(--ca-text);
  line-height: 1.4;
}
/* The two tier columns are narrow and centered. */
.ca-tiers thead th:not(:first-child),
.ca-tiers td {
  width: 90px;
  min-width: 72px;
  text-align: center;
}
/* The card's own border closes the bottom — no doubled hairline. */
.ca-tiers tbody tr:last-child th,
.ca-tiers tbody tr:last-child td {
  border-bottom: none;
}

/* Small muted sub-note under a feature name (tier nuance). */
.ca-tiers-sub {
  display: block;
  font-weight: 400;
  font-size: var(--ca-fs-xs);
  color: var(--ca-text-faint);
}

/* Checkmarks: green for included-free items, indigo for the Premium column;
   muted em-dash for not-included. */
.ca-check { font-weight: 600; }
.ca-check--free { color: var(--ca-green-fg); }
.ca-check--premium { color: var(--ca-brand); }
.ca-check--none { color: var(--ca-text-faint); font-weight: 400; }

/* ---------- Price card ------------------------------------------------------
   Indigo-bordered, tinted-indigo card: one flex row with the big serif price
   + description on the left and the filled "Get Premium" button on the right. */
.ca-price-card {
  display: flex;
  align-items: center;
  gap: var(--ca-space-6);
  padding: 26px 30px;
  border: 1.5px solid var(--ca-brand);
  border-radius: var(--ca-radius-lg);
  background: var(--ca-brand-tint);
  margin: var(--ca-space-6) 0;
}
.ca-price-copy { flex: 1; min-width: 0; }
.ca-price-line {
  margin: 0;
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: 1.875rem; /* 30px, per handoff */
  line-height: 1.2;
  color: var(--ca-text);
}
.ca-price-billing {
  font-family: var(--ca-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ca-text-soft);
}
.ca-price-desc {
  margin: var(--ca-space-1) 0 0;
  font-size: 0.84375rem; /* 13.5px */
  line-height: 1.5;
  color: var(--ca-text-secondary);
}
.ca-price-buy {
  flex: none;
  font-weight: 700;
  padding: 13px 28px;
}
@media (max-width: 640px) {
  .ca-price-card {
    flex-wrap: wrap;
    gap: var(--ca-space-4);
    padding: var(--ca-space-5);
  }
}

/* ---------- "Already purchased?" key card ----------------------------------
   White card holding the license-key input + outline Unlock button. The
   input (.ca-key-input), label, key row, and error line reuse main.css's
   paywall styles; this only draws the card around them. */
.ca-key-card {
  background: var(--ca-bg-elevated);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-md);
  padding: 18px 20px;
  margin: var(--ca-space-4) 0;
}
.ca-key-hint {
  margin: var(--ca-space-3) 0 0;
  font-size: var(--ca-fs-xs);
  color: var(--ca-text-faint);
}