.roistat-preview :is(#process, #team, #materials) { background: #f7f7fa; }
.roistat-preview #sources { background: #fff; }
.roistat-preview main h2 {
  color: #221b31;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -.033em;
  text-wrap: balance;
}
.roistat-preview main .section-head { margin-bottom: clamp(22px, 3vw, 34px); }
.roistat-preview main .section-head > p:not(.eyebrow) { max-width: 60ch; }
.roistat-preview .trust-strip h2 { font-size: 18px; letter-spacing: -.015em; }
.roistat-preview .pricing-example {
  margin-top: 18px;
  padding: 12px 15px;
  border-inline-start: 3px solid #9d7bdf;
  background: #fff;
  color: #40364d;
}
.route-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.65fr);
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(18px, 3vw, 36px);
  border: 1px solid #d4e2f6;
  border-radius: 20px;
  background: #fff;
}
.route-step { position: relative; }
.route-step strong { color: #182f54; font-size: clamp(17px, 2vw, 21px); }
.route-step p, .route-copy p { margin-top: 5px; color: #425778; }
.route-step::after {
  content: "";
  position: absolute;
  top: 14px;
  right: calc(-1 * clamp(14px, 2vw, 28px));
  width: 8px;
  height: 8px;
  border-right: 2px solid #3566b4;
  border-top: 2px solid #3566b4;
  transform: rotate(45deg);
}
.route-result { padding: 14px; border-radius: 13px; background: #e8f1ff; }
.route-switch { min-inline-size: 0; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; border: 0; }
.route-switch legend { margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.route-switch label { position: relative; display: grid; cursor: pointer; }
.route-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.route-switch span { display: grid; place-items: center; min-height: 42px; padding: 5px 10px; border: 1px solid #b9cdeb; border-radius: 8px; background: #fff; color: #193e76; font-size: 14px; font-weight: 700; }
.route-switch input:checked + span { background: #245bd6; border-color: #245bd6; color: #fff; }
.route-switch input:focus-visible + span { outline: 2px solid #184ba9; outline-offset: 2px; }
.route-copy { min-height: 9em; }
.route-copy h3 { font-size: 21px; }
.roistat-preview .tech-proof { grid-template-columns: minmax(0, 1fr); max-width: 730px; background: #fff; }
.roistat-preview .tech-proof > article { background: #fff; }
.roistat-preview #cases { background: #fff; }
.roistat-preview .case-story { grid-template-columns: minmax(0, .53fr) minmax(0, 1fr); align-items: center; }
.roistat-preview #cases .case-brief { padding: 0; border: 0; background: transparent; }
.roistat-preview .case-volume strong { font-size: clamp(62px, 9vw, 112px); }
.roistat-preview .case-document { box-shadow: 0 8px 24px #18396c10; }
.case-details-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #d9e5f6; }
.case-details-preview .case-context, .case-details-preview .case-request { margin: 0; padding: 0; border: 0; }
.roistat-preview #materials .reading-theme-technology {
  --material-bg: #f5efff;
  --material-line: #9d7bdf;
  --material-accent: #5930a1;
}
.roistat-preview #materials .reading-theme-guide {
  --material-bg: #eefbf2;
  --material-line: #72bd95;
  --material-accent: #006d2d;
}

.roistat-preview #materials .reading-links article {
  background: var(--material-bg);
  border-color: var(--material-line);
}
.roistat-preview #materials .reading-links :is(.kicker, .button.outline) { color: var(--material-accent); }
.roistat-preview #materials .reading-links .button.outline { border-color: var(--material-line); }

.roistat-preview #why .journey-entry { background: #f1e9ff; color: #502c90; }
.roistat-preview #why .journey-entry span { border-color: #9d7bdf; color: #502c90; }
.roistat-preview .route-step::after { border-color: #8460c7; }
.roistat-preview .route-switch input:checked + span { background: #6940ba; border-color: #6940ba; }
.roistat-preview #process .tech-example { border-color: #009641; }
.roistat-preview #realtime .realtime-card {
  background: #f1e8ff;
  border: 1px solid #b399df;
  border-radius: 24px;
}
.roistat-preview #realtime .realtime-new {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #6940ba;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.roistat-preview #realtime .realtime-card :is(h2, p:not(.realtime-new)) { color: #302640; }
.roistat-preview #realtime .button.primary { background: #5930a1; }
.roistat-preview #realtime .button.primary:hover { background: #45257e; }
.roistat-preview #realtime .realtime-note { font-size: 13px; }
.roistat-preview #realtime .realtime-window {
  min-width: 0;
  margin: 0;
  background: #fff;
  border-color: #d0beec;
  color: #504366;
}
.roistat-preview #realtime .realtime-range strong {
  color: #5930a1;
  font-size: clamp(27px, 4vw, 48px);
  white-space: nowrap;
}
.roistat-preview #realtime .realtime-range span {
  position: relative;
  background: #a580e2;
}
.roistat-preview #realtime .realtime-range span::before,
.roistat-preview #realtime .realtime-range span::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6940ba;
  transform: translateY(-50%);
}
.roistat-preview #realtime .realtime-range span::before { inset-inline-start: 0; }
.roistat-preview #realtime .realtime-range span::after { inset-inline-end: 0; }
.roistat-preview #calculator .calc-result { background: #f7f0ff; border-color: #b89aea; }
.roistat-preview #calculator .calc-result .calc-budget dd { color: #572baa; }
.roistat-preview #calculator .chart-track { background: #e5eaf1; }
.roistat-preview #calculator .cost-chart [data-rate="2"] {
  --series-color: #e3182d;
  --series-tint: #fff0f1;
  --series-ink: #a61024;
}
.roistat-preview #calculator .cost-chart [data-rate="5"] {
  --series-color: #8050dd;
  --series-tint: #f3ebff;
  --series-ink: #572baa;
}
.roistat-preview #calculator .cost-chart [data-rate="10"] {
  --series-color: #009641;
  --series-tint: #eaf9ee;
  --series-ink: #006d2d;
}


.roistat-preview #price { background: #f7f7fa; }
.roistat-preview .pricing-plan {
  --plan-accent: #5930a1;
  --plan-border: #bda6e7;
  --plan-tint: #f4edff;
  border: 1px solid var(--plan-border);
  background: #fff;
}
.roistat-preview #price .pricing-plan-featured {
  --plan-accent: #006b42;
  --plan-border: #80c8a3;
  --plan-tint: #eaf8ef;
  border-top: 1px solid var(--plan-border);
}
.roistat-preview .pricing-rates > div {
  border-color: #e6e3eb;
  border-radius: 8px;
}
.roistat-preview .pricing-rates .pricing-base {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.roistat-preview .pricing-rates .is-current { background: var(--plan-tint); }
.roistat-preview .pricing-rates dd { text-align: end; }
.roistat-preview .pricing-rates data {
  font-family: Manrope, Onest, Arial, sans-serif;
  font-weight: 800;
  color: var(--plan-accent);
}
.roistat-preview .pricing-base data { font-size: clamp(24px, 3.1vw, 36px); }
.roistat-preview .pricing-base small {
  display: block;
  font: 500 13px/1.45 Onest, Arial, sans-serif;
  white-space: nowrap;
}
.roistat-preview .pricing-plan .button.outline {
  border-color: var(--plan-border);
  color: var(--plan-accent);
}
.roistat-preview .pricing-plan .button.outline:hover { background: var(--plan-tint); }
.roistat-preview .pricing-plan-featured .button.primary { background: var(--plan-accent); }
.roistat-preview .pricing-plan-featured .button.primary:hover { background: #005334; }

.roistat-preview #start { background: #f4eefc; }
.roistat-preview #start .lead-form { border: 1px solid #b49add; border-top: 4px solid #6940ba; }
.roistat-preview .lead-next li::before { background: #e7d8fa; color: #5930a1; }
.roistat-preview .lead-form :is(input:not([type=checkbox]), select, textarea) { background: #fbf8ff; border-color: #cbb8e8; }
.roistat-preview .lead-form :is(input, select, textarea):focus-visible { outline-color: #6940ba; }
.roistat-preview .lead-form .button.primary { background: #6940ba; }
.roistat-preview .lead-form .button.primary:hover { background: #532b9d; }

.roistat-preview .cost-chart { background: #fff; }
.roistat-preview .cost-chart li b {
  justify-self: end;
  min-width: 64px;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--series-ink);
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
.roistat-preview .route-result { background: #f5efff; }
.roistat-preview .route-switch span { border-color: #cbb8e8; color: #5930a1; }
.roistat-preview .case-document figcaption { background: #f5f2fa; color: #493966; }
.roistat-preview .faq details[open] { background: #f4effa; border-color: #d9c9ef; }
.roistat-preview .calc-mode input:checked + span,
.roistat-preview .calc-presets button[aria-pressed=true] {
  background: #f2eaff;
  border-color: #a182d7;
  color: #5930a1;
}

@media (max-width: 820px) {
  .route-visual, .roistat-preview .case-story { grid-template-columns: minmax(0, 1fr); }
  .route-step { padding-bottom: 13px; border-bottom: 1px solid #d4e2f6; }
  .route-step::after { display: none; }
  .route-copy { min-height: 7em; }
}
@media (max-width: 560px) {
  .case-details-preview { grid-template-columns: minmax(0, 1fr); }
  .route-copy { min-height: 9em; }
}