/* The purchase-bonus ladder on /pricing (live since 2026-10-04,
   functions/purchase_bonus.js; figures in src/content/facts.json).
   Kept out of page.css on purpose: every spoke page links page.css with a
   content-hash ?v= tag, so a page.css edit re-stamps all ~90 pages and makes
   the sitemap claim they all changed. Only /pricing links this file.

   The voice is the ledger's: mono figures on hairlines, monochrome. Lime
   stays where page.css puts it — the chosen plan's frame, its badge, its
   CTA — so the bonus on the featured plan borrows that plan's ink and the
   others stay in the foreground family. A bonus is a line on the receipt,
   not a sticker: no fill, no glow, no countdown. */

/* ————— A plan's month, as a receipt ————— */
.plan .plan-ledger {
  margin: 0;
  border-top: 1px solid rgb(var(--c-line) / 0.14);
  border-bottom: 1px solid rgb(var(--c-line) / 0.14);
}
.plan .plan-ledger > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 7px 0;
}
.plan .plan-ledger > div + div { border-top: 1px dashed rgb(var(--c-line) / 0.1); }
.plan .plan-ledger dt,
.plan .plan-ledger dd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}
.plan .plan-ledger dt {
  font-size: clamp(11px, 0.625vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--c-muted));
}
.plan .plan-ledger dd {
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  font-size: 0.95rem;
  color: rgb(var(--c-fg));
  text-align: right;
}
.plan .plan-ledger .is-total { border-top: 1px solid rgb(var(--c-line) / 0.22) !important; }
.plan .plan-ledger .is-total dt { color: rgb(var(--c-fg)); }
.plan .plan-ledger .is-total dd {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.plan .plan-ledger .is-total dd .per {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgb(var(--c-muted));
}

/* The bonus and the saving: hairline pills in the ledger voice. */
.bonus-chip,
.save-chip,
.pack .pack-bonus {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 999px;
}
.bonus-chip {
  padding: 6px 10px;
  border: 1px solid rgb(var(--c-fg) / 0.55);
  color: rgb(var(--c-fg));
}
.plan.featured .bonus-chip { border-color: var(--accent-ink); color: var(--accent-ink); }
.save-chip {
  padding: 5px 9px;
  background: rgb(var(--c-fg) / 0.07);
  color: rgb(var(--c-fg) / 0.86);
}

.pricing-note {
  margin: 22px 0 0;
  max-width: 52em;
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgb(var(--c-muted));
}

/* ————— Packs: the total is the figure, the bonus sits on the frame ————— */
.pack { display: flex; flex-direction: column; align-items: center; }
.pack .pack-bonus {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 11px;
  background: rgb(var(--c-base));
  border: 1px solid rgb(var(--c-fg) / 0.55);
  color: rgb(var(--c-fg));
}
.pack.has-bonus { border-color: rgb(var(--c-line) / 0.24); }
.pack .pack-math {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--c-muted));
  font-variant-numeric: tabular-nums;
}
.pack.has-bonus .pack-math { color: rgb(var(--c-fg) / 0.8); }
.pack .pack-price { margin-top: 12px; }

/* ————— The comparison table's credit row ————— */
.cmp .cmp-bonus {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--c-muted));
  white-space: nowrap;
}