/*
 * Pricing page. Rides on ca-chrome.css (tokens, card, buttons) and ca-app.css
 * (header, form messages) — everything here is what a sales page needs and the
 * app does not.
 */

main.page {
  max-width: 760px;
  padding: 28px 18px 60px;
}

.page h1 {
  font-size: 30px;
  font-weight: 800;
  color: var(--vm-text-strong);
  margin: 0 0 8px;
  letter-spacing: -.4px;
}

.page h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--vm-text-strong);
  margin: 0 0 12px;
}

.lede {
  color: var(--vm-text-muted);
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 56ch;
}

.head-link {
  color: var(--vm-accent);
  text-decoration: none;
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid var(--vm-border);
  border-radius: 7px;
}
.head-link:hover { background: var(--vm-hover); }

/* ── term cards ─────────────────────────────────────────────────────────────
   Four boxes, one per term. `best` marks the largest discount, computed in JS
   rather than hard-coded, so changing payment-config.json is enough. */

.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.plan {
  background: var(--vm-surface);
  border: 1px solid var(--vm-border);
  border-radius: 10px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.plan:hover { background: var(--vm-hover); }
.plan.best { border-color: var(--vm-success); }
.plan.sel  { border-color: var(--vm-accent); background: var(--vm-accent-soft); }

.plan b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--vm-text-strong);
}
.plan span {
  display: block;
  font-size: 11px;
  color: var(--vm-text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.plan em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--vm-success);
  margin-top: 3px;
}

/* ── lists ────────────────────────────────────────────────────────────────── */

.checks { margin: 0; padding: 0; list-style: none; }
.checks li {
  position: relative;
  padding: 0 0 0 22px;
  margin-bottom: 9px;
  color: var(--vm-text);
  line-height: 1.55;
  font-size: 13px;
}
.checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--vm-success);
  font-weight: 700;
}

.faq { margin: 0; }
.faq dt {
  font-weight: 600;
  color: var(--vm-text-strong);
  font-size: 13px;
  margin-top: 14px;
}
.faq dt:first-child { margin-top: 0; }
.faq dd {
  margin: 5px 0 0;
  color: var(--vm-text-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ── checkout ─────────────────────────────────────────────────────────────── */

.pay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0 4px;
}
.pay-grid.two { grid-template-columns: 2fr 1fr; align-items: end; }

.pay-amount {
  font-size: 26px;
  font-weight: 800;
  color: var(--vm-success);
  margin-bottom: 6px;
}
.pay-amount span:last-child {
  font-size: 13px;
  font-weight: 500;
  color: var(--vm-text-muted);
}

/* The address must be copyable by eye as well as by button: monospace, broken
   at any character so a 44-char Solana address never overflows on a phone. */
.pay-addr {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: var(--vm-text-strong);
  background: var(--vm-inset);
  border: 1px solid var(--vm-border);
  border-radius: 8px;
  padding: 12px;
  margin: 10px 0;
  word-break: break-all;
  user-select: all;
}

.btn-copy {
  font-size: 12px;
  padding: 6px 12px;
}

.pay-status {
  margin-top: 12px;
  font-size: 13px;
  color: var(--vm-warning);
}
.pay-status.seen { color: var(--vm-accent); }
.pay-status.dead { color: var(--vm-danger); }

.pay-key {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--vm-success);
  background: var(--vm-inset);
  border: 1px solid var(--vm-success);
  border-radius: 8px;
  padding: 14px;
  margin: 10px 0;
  text-align: center;
  user-select: all;
}

.form-msg.err { color: var(--vm-danger); }
.form-msg.ok  { color: var(--vm-success); }

.foot {
  text-align: center;
  padding: 20px;
  font-size: 12px;
  color: var(--vm-text-muted);
  border-top: 1px solid var(--vm-border);
}
.foot a { color: var(--vm-text-muted); }

@media (max-width: 620px) {
  .plans { grid-template-columns: repeat(2, 1fr); }
  .pay-grid, .pay-grid.two { grid-template-columns: 1fr; }
  .page h1 { font-size: 24px; }
}