/* ROI calculator for /book (Jason, 2026-09-30). Injected by
   scripts/sync_book_page.py; mounted by roi.js before the FAQ section.
   Surfaces reuse the page's own glass classes; everything else is scoped
   under .bb-roi so it can't touch the Freebuff app. No eyebrow above the
   heading and no gradient text: both are craft-floor refusals. */
.bb-roi {
  --roi-ink: #EDF4F2;
  --roi-soft: #A9C4BE;
  --roi-faint: #8FAEA9;
  --roi-accent: #6FAE9F;
  --roi-line: rgba(237, 244, 242, .12);
  --roi-track: rgba(237, 244, 242, .14);
  width: 100%; max-width: 72rem; margin: 0 auto; padding: 80px 16px;
  color: var(--roi-ink); font-variant-numeric: tabular-nums;
  scroll-margin-top: 88px;
}
@media (min-width: 640px) { .bb-roi { padding-left: 24px; padding-right: 24px; } }
.bb-roi-head { text-align: center; max-width: 42rem; margin: 0 auto 40px; }
.bb-roi-head h2 { margin: 0; font-size: 30px; line-height: 36px; font-weight: 800;
  letter-spacing: -.025em; text-wrap: balance; }
@media (min-width: 640px) { .bb-roi-head h2 { font-size: 36px; line-height: 40px; } }
.bb-roi-head p { margin: 16px auto 0; font-size: 18px; line-height: 1.6; color: var(--roi-soft); }

.bb-roi-grid { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .bb-roi-grid { grid-template-columns: 5fr 6fr; gap: 24px; } }
.bb-roi-card { padding: 28px; border-radius: 24px; }
@media (min-width: 640px) { .bb-roi-card { padding: 36px; } }
.bb-roi-card h3 { margin: 0 0 24px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }

.bb-roi-field + .bb-roi-field { margin-top: 28px; }
.bb-roi-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bb-roi-label label { font-size: 15px; font-weight: 600; color: var(--roi-soft); }
.bb-roi-label output { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.bb-roi-range { display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 12px; color: var(--roi-faint); }

.bb-roi input[type=range] { -webkit-appearance: none; appearance: none; width: 100%;
  height: 28px; margin: 12px 0 0; background: transparent; cursor: pointer; }
.bb-roi input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--roi-accent) 0 var(--p, 50%), var(--roi-track) var(--p, 50%) 100%); }
.bb-roi input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--roi-track); }
.bb-roi input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--roi-accent); }
.bb-roi input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px;
  margin-top: -9px; border-radius: 50%; background: var(--roi-ink); border: 0;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .6); transition: transform .15s cubic-bezier(.16, 1, .3, 1); }
.bb-roi input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%;
  background: var(--roi-ink); border: 0; box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .6); }
.bb-roi input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
.bb-roi input[type=range]:focus-visible { outline: none; }
.bb-roi input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(111, 174, 159, .45); }
.bb-roi input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(111, 174, 159, .45); }

.bb-roi-fixed { display: flex; justify-content: space-between; align-items: center; margin-top: 28px;
  padding-top: 20px; border-top: 1px solid var(--roi-line); font-size: 15px; color: var(--roi-soft); }
.bb-roi-fixed b { color: var(--roi-ink); font-size: 18px; }
.bb-roi-assume { margin: 20px 0 0; font-size: 13px; line-height: 1.6; color: var(--roi-faint); }

.bb-roi-rows { margin: 0; }
.bb-roi-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--roi-line); }
.bb-roi-rows dt { font-size: 15px; color: var(--roi-soft); }
.bb-roi-rows dd { margin: 0; font-size: 17px; font-weight: 700; }
.bb-roi-rows .bb-roi-strong dt { color: var(--roi-ink); font-weight: 600; }
.bb-roi-rows .bb-roi-strong dd { font-size: 22px; font-weight: 800; }
.bb-roi-sub { display: block; font-size: 12px; font-weight: 500; color: var(--roi-faint); margin-top: 2px; }

.bb-roi-total { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  margin-top: 24px; }
.bb-roi-total span { font-size: 15px; font-weight: 600; color: var(--roi-soft); padding-bottom: 8px; }
.bb-roi-total strong { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -.035em;
  color: var(--roi-accent); }
.bb-roi-total strong.is-neg { color: var(--roi-soft); }
.bb-roi-percall { margin: 20px 0 0; padding: 14px 16px; border-radius: 16px;
  background: rgba(237, 244, 242, .06); font-size: 15px; line-height: 1.5; }
.bb-roi-percall b { color: var(--roi-ink); }
.bb-roi-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.bb-roi-cta a { display: inline-flex; align-items: center; justify-content: center; height: 48px;
  padding: 0 28px; border-radius: 999px; background: var(--roi-ink); color: #0E2926;
  font-size: 17px; font-weight: 700; text-decoration: none;
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .7); transition: transform .18s cubic-bezier(.16, 1, .3, 1); }
.bb-roi-cta a:hover { transform: translateY(-2px); background: #fff; }
.bb-roi-cta a:focus-visible { outline: 2px solid var(--roi-accent); outline-offset: 3px; }
.bb-roi-note { font-size: 12px; color: var(--roi-faint); }
@media (prefers-reduced-motion: reduce) {
  .bb-roi input[type=range]::-webkit-slider-thumb, .bb-roi-cta a { transition: none; }
}