@charset "UTF-8";
.block-roi-calculator {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg); }
  .block-roi-calculator__title {
    margin-bottom: var(--spacing-xm); }

.roi {
  position: relative;
  padding: var(--spacing-xs);
  border-radius: 0.4375rem;
  background: #ffffff;
  box-shadow: 0 1rem 4rem rgba(120, 120, 120, 0.1);
  /* ------------------------------------------------- progress (discrete) */
  /* -------------------------------------------------------------- step */
  /* ------------------------------------------------------------- field */
  /* ----------------------------------------------------- amount + slider */
  /* ------------------------------------------------------------ payback */
  /* ---------------------------------------------------------- breakdown */
  /* ------------------------------------------------------------- trust */
  /* -------------------------------------------------------------- done */
  /* The booking confirmation replaces the calendar and stands alone on the step, with the
       step's own title hidden — so this heading has to carry it rather than sit at body size. */
  /* ----------------------------------------------------------- booking */
  /* ------------------------------------------------- error notification */
  /* ---------------------------------------------------- honeypot, unseen */
  /* ------------------------- unit chooser, inside the input cell ---------- */
  /* ------------------------------------------------------ consent radios */
  /* ----------------------------------------------------------- results */
  /* --------------------------------------------------------------- nav */
  /* ------------------------------------------------- resume / start over */
  /* --------------------------------------------- carried over from booking */ }
  .roi.has-resume {
    min-height: 25rem; }
  @media (min-width: 768px) {
    .roi {
      padding: var(--spacing-xm); } }
  .roi__progress {
    display: flex;
    gap: .25rem;
    margin: 0 0 var(--spacing-xs);
    padding: 0;
    list-style: none; }
    .roi__progress[hidden] {
      display: none; }
  .roi__progress-step {
    flex: 1 1 0;
    padding: 0;
    height: 2px;
    border-radius: 1px;
    background: #e6e6e6;
    transition: background 300ms ease-in-out; }
    .roi__progress-step.is-done {
      background: #c3c3c3; }
    .roi__progress-step.is-current {
      background: #2d2d2d; }
  .roi__step {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0; }
    @media (min-width: 768px) {
      .roi__step {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        -moz-column-gap: var(--spacing-xs);
             column-gap: var(--spacing-xs);
        align-items: start; }
        .roi__step > legend,
        .roi__step > .roi__step-text,
        .roi__step > .roi__skip,
        .roi__step > .roi__nav,
        .roi__step > .roi__results,
        .roi__step > .roi__form-error {
          grid-column: 1 / -1; }
        .roi__step > .roi__field--wide,
        .roi__step > .roi__field:has(textarea),
        .roi__step > .roi__field:has(.roi__asks),
        .roi__step > .roi__field:has(.roi__radios) {
          grid-column: 1 / -1; } }
    .roi__step[hidden] {
      display: none; }
    .roi__step--success {
      display: block; }
      .roi__step--success h3 {
        margin-top: 0; }
      .roi__step--success p:last-child {
        margin-bottom: 0; }
  .roi__step-title {
    display: block;
    width: 100%;
    margin-bottom: .5rem;
    padding: 0;
    color: #000; }
  .roi__step-text {
    margin-bottom: var(--spacing-xs);
    color: #4d4d4d; }
    .roi__step-text--lead {
      max-width: 46rem;
      font-size: var(--fz-md-t16);
      line-height: 1.6; }
  .roi__field {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    margin-bottom: var(--spacing-xs); }
  .roi__label {
    display: block;
    margin-bottom: .5rem;
    font-size: var(--fz-md-t16);
    font-weight: 600;
    color: #000; }
    @media (min-width: 768px) {
      .roi__label {
        min-height: 2.75rem; } }
  .roi__input-wrap {
    position: relative;
    display: flex;
    align-items: center; }
  .roi__input {
    width: 100%;
    padding: .75rem 3.25rem .75rem 1rem;
    font-family: "Nunito Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--fz-xl-t24);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #000;
    border: 1px solid #dbdbdb;
    border-radius: 0.4375rem;
    background: #ffffff;
    transition: border-color 300ms ease-in-out, box-shadow 300ms ease-in-out;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none; }
    .roi__input:focus {
      outline: none;
      border-color: #ff27b8;
      box-shadow: 0 0 0 3px rgba(255, 39, 184, 0.12); }
    .roi__input:disabled {
      color: #999999;
      background: #f5f5f5; }
    .roi__input.has-error {
      border-color: #ff4040;
      border-bottom-color: #ff4040;
      border-radius: 0.4375rem 0.4375rem 0 0; }
  .roi__textarea {
    max-width: 44rem;
    min-height: 6rem;
    padding-right: 1rem;
    font-size: var(--fz-md-t16);
    font-weight: 400;
    resize: vertical;
    line-height: 1.5; }
  .roi__input--text {
    padding-right: 1rem;
    font-size: var(--fz-lg-t18);
    font-weight: 400; }
  .roi__unit {
    position: absolute;
    right: 1rem;
    font-size: var(--fz-lg-t18);
    font-weight: 600;
    color: #999999;
    pointer-events: none; }
  .roi__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: .625rem 0 0; }
  .roi__chip {
    white-space: nowrap;
    padding: .25rem .5625rem;
    font-size: var(--fz-sm-t14);
    font-weight: 500;
    line-height: 1.3;
    color: #4d4d4d;
    border: 0;
    border-radius: 4.125rem;
    background: rgba(45, 45, 45, 0.05);
    cursor: pointer;
    transition: color 300ms ease-in-out, background 300ms ease-in-out; }
    .roi__chip:hover {
      color: #2d2d2d;
      background: rgba(45, 45, 45, 0.1); }
    .roi__chip:focus-visible {
      outline: 2px solid #ff27b8;
      outline-offset: 2px; }
    .roi__chip.is-on {
      color: #d81f9b;
      font-weight: 600;
      background: rgba(255, 39, 184, 0.12); }
  .roi__payback-ref {
    color: #ff5308;
    font-weight: 700; }
  .roi__amount {
    display: block; }
  .roi__slider {
    display: block;
    width: 100%;
    height: 1.25rem;
    margin: .875rem 0 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer; }
    .roi__slider:focus {
      outline: none; }
    .roi__slider::-webkit-slider-runnable-track {
      height: 4px;
      border-radius: 2px;
      background: #e6e6e6; }
    .roi__slider::-moz-range-track {
      height: 4px;
      border-radius: 2px;
      background: #e6e6e6; }
    .roi__slider::-webkit-slider-thumb {
      width: 1.25rem;
      height: 1.25rem;
      margin-top: -.5rem;
      border: 2px solid #ffffff;
      border-radius: 50%;
      background: #ff27b8;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
      -webkit-appearance: none;
              appearance: none;
      -webkit-transition: transform 300ms ease-in-out;
      transition: transform 300ms ease-in-out; }
    .roi__slider::-moz-range-thumb {
      width: 1.25rem;
      height: 1.25rem;
      border: 2px solid #ffffff;
      border-radius: 50%;
      background: #ff27b8;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
    .roi__slider:disabled {
      cursor: default; }
      .roi__slider:disabled::-webkit-slider-thumb {
        opacity: 0; }
      .roi__slider:disabled::-moz-range-thumb {
        opacity: 0; }
      .roi__slider:disabled::-webkit-slider-runnable-track {
        background: #f5f5f5; }
      .roi__slider:disabled::-moz-range-track {
        background: #f5f5f5; }
    .roi__slider:focus-visible::-webkit-slider-thumb {
      box-shadow: 0 0 0 4px rgba(255, 39, 184, 0.25); }
    .roi__slider:focus-visible::-moz-range-thumb {
      box-shadow: 0 0 0 4px rgba(255, 39, 184, 0.25); }
    .roi__slider:active::-webkit-slider-thumb {
      transform: scale(1.1); }
  .roi__scale {
    display: flex;
    justify-content: space-between;
    margin-top: .25rem;
    font-size: var(--fz-xs-t13);
    font-variant-numeric: tabular-nums;
    color: #999999; }
  @media (min-width: 768px) {
    .roi__field:has(> .roi__hint) .roi__label,
    .roi__field:has(> .roi__hint) .roi__label {
      min-height: 0; } }
  .roi__hint {
    margin: .125rem 0 .625rem;
    font-size: var(--fz-xs-t13);
    line-height: 1.45;
    color: #999999; }
    @media (min-width: 768px) {
      .roi__hint {
        min-height: 2.375rem; } }
  .roi__result-assumed {
    display: block;
    margin-top: .25rem;
    font-size: var(--fz-xs-t13);
    line-height: 1.4;
    font-style: italic;
    color: #999999; }
    .roi__result-assumed[hidden] {
      display: none; }
  .roi__result-desc {
    display: block;
    margin-top: .375rem;
    font-size: var(--fz-xs-t13);
    line-height: 1.45;
    color: #999999; }
  .roi__payback {
    margin-bottom: var(--spacing-xs);
    padding: var(--spacing-xs);
    border-radius: 0.4375rem;
    background: #2d2d2d;
    color: #ffffff; }
    .roi__payback[hidden] {
      display: none; }
    @media (min-width: 768px) {
      .roi__payback {
        grid-column: 1 / -1; } }
  .roi__payback-label {
    margin: 0;
    font-size: var(--fz-sm-t14);
    color: rgba(255, 255, 255, 0.7); }
  .roi__payback-value {
    margin: .125rem 0 .5rem;
    font-size: var(--fz-xxl-t32);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(93deg, #ff5208, #ff27b8);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .roi__payback-note {
    max-width: 46rem;
    margin: 0;
    font-size: var(--fz-sm-t14);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75); }
  .roi__breakdown {
    margin-bottom: var(--spacing-xs);
    font-size: var(--fz-sm-t14); }
    .roi__breakdown[hidden] {
      display: none; }
    @media (min-width: 768px) {
      .roi__breakdown {
        grid-column: 1 / -1; } }
  .roi__breakdown-summary {
    cursor: pointer;
    color: #4d4d4d;
    text-decoration: underline;
    text-underline-offset: 2px; }
    .roi__breakdown-summary::marker {
      color: #999999; }
    .roi__breakdown-summary:hover {
      color: #2d2d2d; }
  .roi__ledger {
    display: grid;
    gap: var(--spacing-xxs);
    margin-top: .75rem; }
    @media (min-width: 768px) {
      .roi__ledger {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        -moz-column-gap: var(--spacing-md);
             column-gap: var(--spacing-md); } }
  .roi__ledger-side {
    padding: 0; }
    @media (min-width: 768px) {
      .roi__ledger-side {
        padding-right: var(--spacing-xs); } }
    @media (min-width: 768px) {
      .roi__ledger-side--gain {
        padding-left: var(--spacing-sm);
        border-left: 1px solid #dbdbdb; } }
  .roi__ledger-title {
    margin: 0 0 .5rem;
    font-size: var(--fz-sm-t14);
    font-weight: 700; }
    .roi__ledger-side--cost .roi__ledger-title {
      color: #c62828; }
    .roi__ledger-side--gain .roi__ledger-title {
      color: #0b7a3b; }
  .roi__ledger-list {
    display: grid;
    grid-template-columns: auto 1fr;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    margin: 0;
    padding: 0;
    font-size: var(--fz-sm-t14); }
    .roi__ledger-list dt,
    .roi__ledger-list dd {
      border-bottom: 1px solid #f5f5f5; }
    .roi__ledger-list dt:last-of-type,
    .roi__ledger-list dd:last-of-type {
      border-bottom: 0; }
    .roi__ledger-list dt {
      padding: .375rem 0;
      font-weight: 400;
      color: #4d4d4d; }
    .roi__ledger-list dd {
      margin: 0;
      padding: .375rem 0;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      text-align: right;
      color: #000; }
    .roi__ledger-list .roi__ledger-total {
      margin-top: .1875rem;
      padding-top: .5rem;
      border-top: 1px solid rgba(11, 122, 59, 0.25);
      color: #0b7a3b; }
  .roi__trust {
    display: block;
    margin: 0 0 var(--spacing-xs);
    padding: 1rem;
    border: 1px solid #dbdbdb;
    border-radius: 0.4375rem; }
    @media (min-width: 768px) {
      .roi__trust {
        grid-column: 1 / 2; } }
  .roi__trust-line {
    margin: 0;
    font-size: var(--fz-sm-t14);
    line-height: 1.5;
    color: #4d4d4d; }
  .roi__marks {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: .625rem 0 0;
    padding: 0;
    list-style: none; }
    .roi__marks li {
      padding: .1875rem .5rem;
      font-size: var(--fz-xs-t13);
      font-weight: 600;
      color: #4d4d4d;
      border: 1px solid #dbdbdb;
      border-radius: 4.125rem; }
  .roi__done {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: var(--spacing-xs);
    padding: 0; }
    .roi__done h3 {
      margin: 0;
      font-size: var(--fz-md-t16);
      font-weight: 700;
      line-height: 1.5;
      color: #000; }
    .roi__done p {
      margin: 0;
      font-size: var(--fz-md-t16);
      line-height: 1.5;
      color: #4d4d4d; }
  .roi__done--booked {
    align-items: flex-start;
    margin-top: var(--spacing-xs); }
    .roi__done--booked h3 {
      margin-bottom: .25rem;
      font-size: var(--fz-xl-t24);
      line-height: 1.2; }
    .roi__done--booked .roi__done-tick {
      width: 1.5rem;
      height: 1.5rem;
      margin-top: .25rem; }
  .roi__done-body {
    min-width: 0; }
  .roi__done-tick {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    align-self: flex-start;
    margin-top: .1875rem;
    color: #ff27b8; }
  .roi__after {
    display: grid;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs); }
  .roi__after-col {
    padding: 1rem;
    border: 1px solid #dbdbdb;
    border-radius: 0.4375rem; }
    .roi__after-col--li {
      display: flex;
      flex-direction: column;
      gap: .875rem;
      height: 100%;
      padding: var(--spacing-xs);
      border: 0;
      background: #f5f5f5; }
  .roi__follow-line {
    max-width: 46rem;
    margin: 0;
    font-size: var(--fz-md-t16);
    line-height: 1.6;
    color: #000; }
  .roi__linkedin:empty {
    display: none; }
  .roi__linkedin-fallback {
    margin: 0; }
    .roi__linkedin-fallback[hidden] {
      display: none; }
  .roi__booking {
    min-height: 40rem; }
    .roi__booking:empty {
      min-height: 0; }
    @media (min-width: 768px) {
      .roi__booking {
        grid-column: 1 / -1; } }
  .roi__booking-fallback {
    padding: var(--spacing-xs) 0; }
    .roi__booking-fallback[hidden] {
      display: none; }
    @media (min-width: 768px) {
      .roi__booking-fallback {
        grid-column: 1 / -1; } }
  .roi__error {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: -1px 0 0;
    padding: .5rem .875rem;
    font-size: var(--fz-sm-t14);
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
    border-radius: 0 0 0.4375rem 0.4375rem;
    background: #ff4040; }
    .roi__error[hidden] {
      display: none; }
  .roi__error-icon {
    flex: 0 0 auto;
    width: 1.0625rem;
    height: 1.0625rem;
    margin-top: .05rem;
    fill: currentColor; }
  .roi__form-error {
    margin: 0 0 var(--spacing-xxs);
    border-radius: 0.4375rem; }
  .roi__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden; }
  @media (min-width: 768px) {
    .roi__step[data-roi-role="consent"] .roi__label,
    .roi__step[data-roi-role="asks"] .roi__label {
      min-height: 0; } }
  .roi__asks {
    display: grid;
    gap: .5rem;
    margin-bottom: .25rem; }
    .roi__asks .roi__radio {
      align-items: flex-start; }
  .roi__asks .roi__radio {
    flex-wrap: wrap; }
    @media (min-width: 768px) {
      .roi__asks .roi__radio {
        flex-wrap: nowrap; } }
  .roi__ask-desc {
    display: block;
    flex: 1 1 100%;
    padding-left: 1.4375rem;
    margin-top: .1875rem;
    font-size: var(--fz-xs-t13);
    font-weight: 400;
    line-height: 1.45;
    color: #999999; }
    @media (min-width: 768px) {
      .roi__ask-desc {
        flex: 0 1 auto;
        padding-left: 0; } }
  .roi__radios {
    display: grid;
    gap: .5rem; }
  .roi__radio {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin: 0;
    padding: .875rem 1rem;
    font-size: var(--fz-md-t16);
    color: #000;
    border: 1px solid #dbdbdb;
    border-radius: 0.4375rem;
    cursor: pointer;
    transition: border-color 300ms ease-in-out, background 300ms ease-in-out; }
    .roi__radio:hover {
      border-color: #787878; }
    .roi__radio input {
      margin-top: .2rem;
      flex: 0 0 auto;
      accent-color: #ff27b8; }
    .roi__radio:has(input:checked) {
      border-color: #ff27b8;
      background: rgba(255, 39, 184, 0.05); }
  .roi__skip {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .75rem 0 0;
    margin-top: auto;
    padding-top: .75rem;
    font-size: var(--fz-sm-t14);
    color: #4d4d4d;
    cursor: pointer; }
    .roi__skip input {
      accent-color: #ff27b8; }
  .roi__results {
    display: grid;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs); }
    @media (min-width: 576px) {
      .roi__results {
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
  .roi__result[hidden] {
    display: none; }
  .roi__result-value {
    display: block;
    font-size: var(--fz-xxl-t32);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(93deg, #ff5208, #ff27b8);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .roi__result-label {
    display: block;
    margin-top: .25rem;
    font-size: var(--fz-sm-t14);
    color: #4d4d4d; }
  .roi__note {
    margin-bottom: var(--spacing-xs);
    font-size: var(--fz-sm-t14);
    color: #999999; }
  .roi__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: var(--spacing-xs); }
  .roi__cta.fz-button {
    color: #ffffff;
    border-color: transparent;
    background: #ff27b8 border-box; }
    .roi__cta.fz-button:after {
      background: #ff27b8; }
    .roi__cta.fz-button:hover, .roi__cta.fz-button:focus, .roi__cta.fz-button:active {
      color: #ffffff;
      background: #d81f9b border-box; }
      .roi__cta.fz-button:hover:after, .roi__cta.fz-button:focus:after, .roi__cta.fz-button:active:after {
        background: #d81f9b;
        opacity: 1; }
    .roi__cta.fz-button:focus-visible {
      outline: 2px solid #ff27b8;
      outline-offset: 3px; }
    .roi__cta.fz-button.is-loading {
      opacity: .55;
      pointer-events: none; }
  .roi__back, .roi__link {
    padding: 0;
    font-size: var(--fz-sm-t14);
    font-weight: 400;
    color: #999999;
    border: 0;
    background: none;
    cursor: pointer;
    text-decoration: none;
    transition: color 300ms ease-in-out; }
    .roi__back:hover, .roi__back:focus-visible, .roi__link:hover, .roi__link:focus-visible {
      color: #4d4d4d;
      text-decoration: underline; }
  .roi__resume {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs);
    border-radius: 0.4375rem;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(3px); }
    .roi__resume[hidden] {
      display: none; }
  .roi__resume-card {
    width: 100%;
    max-width: 30rem;
    padding: var(--spacing-xs);
    text-align: center;
    border-radius: 0.4375rem;
    background: #ffffff;
    box-shadow: 0 1rem 4rem rgba(120, 120, 120, 0.1); }
  .roi__resume-icon {
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: .5rem;
    fill: #ff27b8; }
  .roi__resume-title {
    margin-bottom: .5rem; }
  .roi__resume-text {
    margin-bottom: var(--spacing-xs);
    font-size: var(--fz-sm-t14);
    line-height: 1.5;
    color: #4d4d4d; }
  .roi__resume-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem; }
  .roi__carried {
    display: flex;
    align-items: flex-start;
    grid-column: 1 / -1;
    gap: .4375rem;
    margin-bottom: var(--spacing-xs);
    padding: .5rem .75rem;
    font-size: var(--fz-sm-t14);
    line-height: 1.4;
    color: #4d4d4d;
    border-radius: 0.4375rem;
    background: #f5f5f5; }
    .roi__carried[hidden] {
      display: none; }
  .roi__carried-icon {
    flex: 0 0 auto;
    width: .9375rem;
    height: .9375rem;
    margin-top: .15rem;
    fill: #ff27b8; }
  .roi__input.is-carried {
    border-color: #c3c3c3;
    background: #f5f5f5; }

/* ============================================================ diagnostics panel
   Developer tool. Only ever in the DOM when ?roi-debug=1 is present, so this can
   never reach a visitor — but it is scoped tightly regardless. */
.roi-diag {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  width: calc(100vw - 2rem);
  max-width: 30rem;
  max-height: 70vh;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  color: #e6e6e6;
  border-radius: 6px;
  background: #14161a;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden; }
  .roi-diag__bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .625rem;
    color: #fff;
    background: #22262d; }
    .roi-diag__bar strong {
      font-size: 11px;
      letter-spacing: .04em;
      text-transform: uppercase; }
    .roi-diag__bar button {
      padding: .1875rem .5rem;
      font: inherit;
      color: #e6e6e6;
      border: 1px solid #3a4048;
      border-radius: 4px;
      background: none;
      cursor: pointer; }
      .roi-diag__bar button:hover {
        color: #fff;
        border-color: #5a626d; }
  .roi-diag__spacer {
    flex: 1 1 auto; }
  .roi-diag__body {
    padding: .25rem .625rem .625rem;
    overflow: auto; }
  .roi-diag.is-min .roi-diag__body {
    display: none; }
  .roi-diag h4 {
    margin: .625rem 0 .25rem;
    font-size: 11px;
    font-weight: 700;
    color: #7fd1ff; }
  .roi-diag pre {
    margin: 0;
    padding: .375rem .5rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: #cfd6dd;
    border-radius: 4px;
    background: #0e1013; }