/* ============================================================
   ZAILY — monthly plans (home #plans + dashboard billing tab).
   The MONTHLY price leads (.plan-price / .hw-price, style.css + sale.css), then
   "N videos per month", then the price PER VIDEO one line lower with how much
   cheaper it is than Presence and a bar that shrinks card after card.
   Loaded after sale.css; the sale (.hw-on) keeps its own struck prices.
   ============================================================ */

.pv-hero { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.pv-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-family: 'IBM Plex Mono', monospace; }
.pv-now b { font-size: 1.55rem; font-weight: 600; letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pv-now span { font-size: .8rem; color: var(--steel); }

/* how far the per-video price has fallen, in words and as a bar that shrinks card after card */
.pv-drop { display: inline-block; margin-top: 12px; padding: 5px 9px; border-radius: 2px; border: 1px solid #B6D8A3; background: var(--signal-wash); color: var(--signal-ink); font: 600 .68rem/1.25 'IBM Plex Mono', monospace; letter-spacing: .03em; }
.pv-drop.is-base { background: transparent; border-color: var(--rule); color: var(--steel); }
.pv-track { height: 6px; margin-top: 10px; background: var(--rule-soft); border-radius: 3px; overflow: hidden; }
.pv-track i { display: block; height: 100%; background: var(--signal); border-radius: 3px; }

/* the recommended card: the staircase ends here */
.pricing-card.is-pick .pv-track i { background: var(--signal-ink); }