/* ---------- v2: new pricing elements, styled with the site's own tokens ---------- */
/* Under each price: two quiet lines in the card's own .sub style, no box */
.price-lockup .price-amount .rzf-subs { display: block; flex: 0 0 100%; margin-top: 10px; text-align: left; }
.price-lockup .price-amount .rzf-subs .sub { display: block; margin-top: 4px; color: var(--ink-2); font-size: 14px; line-height: 1.4; text-align: left; justify-self: start; }
.price-lockup .price-amount .rzf-subs strong { color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.price-lockup .price-amount .rzf-nofee { color: var(--brand); font-weight: 600; }

/* Worked example: a plain centered line under the cards, like the homepage's hero note */
.rzf-note { max-width: 860px; margin: 28px auto 56px; color: var(--ink-3); font-size: 14px; line-height: 20px; text-align: center; }
.rzf-note strong { color: var(--ink-2); font-weight: 600; }

.rzf-lead { max-width: 760px; margin: -8px 0 20px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.rzf-lead strong { color: var(--ink); font-weight: 700; }


/* "Do the math" calculator: deal-owner picker and cost note */
.rzf-seg { display: flex; gap: 6px; }
.rzf-seg button {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 4px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: 600 13px/1.2 var(--sans, Inter, sans-serif);
  cursor: pointer;
}
.rzf-seg button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; }
.rzf-cost-sub { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; font-weight: 500; }

/* ROI page v2: the calculator section doubles as the page hero */
.pricing-roi-copy .rzf-h1 { margin: 0 0 18px; color: var(--ink); font-size: clamp(36px, 4.4vw, 52px); letter-spacing: -0.035em; line-height: 1.06; }
.rzf-roi-hero { padding-top: 72px; }
.rzf-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Pricing page: link from the "Do the math" section to the ROI page */
.rzf-roi-link { display: inline-flex; gap: 6px; align-items: center; margin-top: 18px; color: var(--brand); font-size: 15px; font-weight: 600; text-decoration: none; }
.rzf-roi-link:hover { text-decoration: underline; text-underline-offset: 3px; }