/* ==========================================================================
   plans.css — the Free vs Lifetime plan columns
   --------------------------------------------------------------------------
   Loaded by BOTH the landing page's pricing section and /purchase, because
   they show the same object and had drifted into two copies that disagreed
   on borders, weights and tick colours. Edit here and both move together.

   Depends only on the shared tokens, which v2.css and site.css both define
   with identical values, so it works under either stylesheet.

   Colour discipline: the paid column is the single decision on the page, so
   it carries exactly one tinted channel — a violet hairline. The ticks stay
   grey; a dozen accent ticks would read as a wall of colour and would leave
   the column with no way to distinguish itself.
   ========================================================================== */

.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-card);
}

.plan--paid { border-color: var(--violet); }

.plan-head { display: flex; flex-direction: column; gap: 5px; }

.plan-name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.plan-price {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
}

.plan-price small {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
}

.plan-sub { font-size: 15px; color: var(--ink-2); }

/* Feature groups inside a column */
.plan-group { display: flex; flex-direction: column; gap: 12px; }

.plan-group-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.plan-group-title em {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-3);
}

.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.plan-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.plan-list li svg { width: 16px; height: 16px; margin-top: 3px; color: var(--ink-3); }
.plan-list li.dim svg { color: var(--ink-4); }

/* Device tiers, inside the paid column. Behave as a radio group; the chosen
   one is what the CTA sends to Stripe. */
.tiers { display: flex; flex-direction: column; gap: 8px; }

.tier {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-card);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.tier:hover { background: var(--paper-band); }

.tier.is-selected {
  border-color: var(--violet);
  box-shadow: inset 0 0 0 1px var(--violet);
  background: var(--paper-card);
}

.tier-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.tier-meta { font-size: 12.5px; color: var(--ink-3); }
.tier-right { text-align: right; display: flex; flex-direction: column; gap: 1px; }

.tier-amt {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tier-save { font-size: 12px; font-weight: 700; color: var(--teal); }
.tier-once { font-size: 12px; color: var(--ink-4); }

.pricing-loading { font-size: 14px; color: var(--ink-3); padding: 20px 0; }

/* Push the button to the bottom so both columns end on the same line */
.plan-foot { margin-top: auto; }

.plan-foot-note {
  margin-top: 10px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-4);
}

@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .plan { padding: 24px 20px; }
  .plan-price { font-size: 34px; }
}

/* While checkout is being created the button is not actionable. Value change,
   not hue change: it stays the same violet, just quieter. */
.btn.is-busy { opacity: 0.7; pointer-events: none; }