/* ════════════════════════════════════════════════════════════════════
   styles/commerce.css — page components for /pricing and /red-vote
   ════════════════════════════════════════════════════════════════════

   Loaded AFTER /site.css, never alongside style.css. These are the
   components the commerce pages need that site.css does not (yet)
   provide: the plan cards, the red-tick feature list, the numbered
   step list, and the fine-print line.

   Naming: the plan-card classes keep the names they already had in
   style.css so the markup on two live sales pages did not have to be
   rewritten during the #96 rebuild. The `rt-`-prefixed rules here
   (.rt-checklist, .rt-steps, .rt-fineprint, .rt-hero__mark) are
   genuinely generic — promote them into site.css in Wave 3 if another
   page wants them.

   Tokens only. Never redefine --rt-*.
   ════════════════════════════════════════════════════════════════════ */

/* ── Plan cards ───────────────────────────────────────────────────────
   .pricing-cards / .pricing-grid (a two-up grid) and .pricing-card--featured
   (the highlighted card) were removed in #104. Both lost their only
   consumers when #105 retired the founding-customer offer: /pricing and
   /red-vote now publish a single flat US$199 card, so there is nothing to
   lay out in a grid and nothing to contrast it against. Re-add a grid only
   when a second plan actually exists.
   ──────────────────────────────────────────────────────────────────── */

.pricing-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  padding: 28px 26px;
  color: var(--rt-ink-2);
}

.pricing-card h3 {
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: var(--rt-track-snug);
  color: var(--rt-ink);
  margin: 0 0 6px;
}

.pricing-card__tag {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-xs);
  letter-spacing: var(--rt-track-loose);
  text-transform: uppercase;
  color: var(--rt-red-dk);
  background: var(--rt-red-soft);
  border-radius: var(--rt-radius-sm);
  padding: 3px 7px;
}

.pricing-card__price {
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: var(--rt-track-tight);
  color: var(--rt-ink);
  margin: 10px 0 0;
}

.pricing-card__price-unit {
  font-family: var(--rt-font-body);
  font-weight: 400;
  font-size: var(--rt-text-base);
  letter-spacing: 0;
  color: var(--rt-ink-3);
}

.pricing-card__renewal {
  font-size: var(--rt-text-sm);
  line-height: 1.55;
  color: var(--rt-ink-2);
  margin: 10px 0 0;
}

.pricing-card__renewal strong { color: var(--rt-ink); }

ul.pricing-card__list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

.pricing-card__list li {
  position: relative;
  padding-left: 22px;
  margin: 9px 0;
  font-size: var(--rt-text-sm);
  line-height: 1.55;
}

.pricing-card__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--rt-red);
  font-weight: 700;
}

.pricing-card__list code,
.pricing-card__renewal code {
  font-family: var(--rt-font-mono);
  font-size: 0.9em;
  background: var(--rt-paper-2);
  padding: 2px 5px;
  border-radius: var(--rt-radius-sm);
}

/* Pushes the CTA to the bottom so two cards of unequal length align. */
.pricing-cta { margin-top: auto; padding-top: 22px; }

/* On /pricing the CTA is a standalone paragraph block, not a card
   footer, so give it a surface of its own. */
.rt-prose > .pricing-cta {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--rt-paper-2);
  border-left: 3px solid var(--rt-red);
  border-radius: var(--rt-radius-md);
}

.rt-prose > .pricing-cta p { margin: 0; }


/* ── Red-tick feature list ────────────────────────────────────────── */

ul.rt-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rt-checklist > li {
  position: relative;
  padding-left: 26px;
  margin: 14px 0;
  line-height: 1.6;
}

.rt-checklist > li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--rt-red);
  font-weight: 700;
}

.rt-checklist strong { color: var(--rt-ink); }


/* ── Numbered steps ───────────────────────────────────────────────── */

ol.rt-steps {
  list-style: none;
  counter-reset: rt-step;
  padding: 0;
  margin: 0;
}

.rt-steps > li {
  counter-increment: rt-step;
  position: relative;
  padding-left: 46px;
  margin: 18px 0;
  line-height: 1.6;
}

.rt-steps > li::before {
  content: counter(rt-step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--rt-red);
  background: #fff;
  border: 2px solid var(--rt-red);
  border-radius: 999px;
}

.rt-steps strong { color: var(--rt-ink); }


/* ── Fine print ───────────────────────────────────────────────────── */

.rt-fineprint {
  font-size: var(--rt-text-sm);
  line-height: 1.6;
  color: var(--rt-ink-3);
}

.rt-fineprint code {
  font-family: var(--rt-font-mono);
  font-size: 0.9em;
  background: var(--rt-paper-2);
  padding: 2px 5px;
  border-radius: var(--rt-radius-sm);
}

.rt-fineprint a { color: inherit; }

.pricing-card .rt-fineprint { margin-top: 16px; }

/* Fine print sitting on a dark band (the closing CTA on /red-vote). */
.rt-section--dark .rt-fineprint { color: rgba(244, 241, 235, 0.6); }
.rt-section--dark .rt-fineprint a { color: rgba(244, 241, 235, 0.85); }


/* ── Product pennant in a hero ────────────────────────────────────── */

.rt-hero__mark {
  display: block;
  width: 44px;
  height: auto;
  margin-bottom: 20px;
}