.forsis-roi {
  --fr-ink: #152c3d;
  --fr-muted: #435c6a;
  --fr-border: #c9d9e0;
  --fr-panel: #fff;
  --fr-accent: #096b72;
  --fr-error: #a32b24;
  --fr-focus: #087784;
  color: var(--fr-ink);
  container: forsis-roi / inline-size;
  font-family: inherit;
  line-height: 1.5;
  max-width: 1120px;
  margin-inline: auto;
}

.forsis-roi *, .forsis-roi *::before, .forsis-roi *::after { box-sizing: border-box; }
.forsis-roi [hidden] { display: none !important; }
.forsis-roi :focus-visible { outline: 3px solid var(--fr-focus); outline-offset: 3px; }
.forsis-roi h2, .forsis-roi h3, .forsis-roi h4 { margin: 0; color: inherit; line-height: 1.18; letter-spacing: normal; }

.forsis-roi .fr-hero {
  background: linear-gradient(115deg, #11283e, #164959);
  color: #fff;
  padding: clamp(20px, 5cqi, 52px);
  border-radius: 14px;
  margin-block-end: 20px;
}
.forsis-roi .fr-hero h2 { font-size: clamp(23px, 4.5cqi, 43px); font-weight: 730; overflow-wrap: anywhere; }
.forsis-roi .fr-hero p { margin: 12px 0 0; color: #e2edf0; max-width: 62ch; }

.forsis-roi .fr-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.forsis-roi .fr-panel {
  min-width: 0;
  padding: clamp(16px, 3cqi, 28px);
  border: 1px solid var(--fr-border);
  border-radius: 14px;
  background: var(--fr-panel);
}
.forsis-roi .fr-panel h3 { font-size: clamp(20px, 2.8cqi, 29px); }
.forsis-roi .fr-group { min-inline-size: 0; margin: 0 0 22px; padding: 0; border: 0; }
.forsis-roi .fr-group + .fr-group { border-top: 1px solid var(--fr-border); }
.forsis-roi .fr-group legend { padding: 0 10px 0 0; margin: 0 0 12px; font-size: 1.08rem; font-weight: 700; color: inherit; max-width: 100%; overflow-wrap: anywhere; }
.forsis-roi .fr-field { min-width: 0; margin-bottom: 14px; }
.forsis-roi .fr-field:last-child { margin-bottom: 0; }
.forsis-roi .fr-field label { display: grid; gap: 5px; font-weight: 650; }
.forsis-roi .fr-unit { font-size: .875em; color: var(--fr-muted); font-weight: 500; }
.forsis-roi .fr-hint { font-size: .875rem; color: var(--fr-muted); overflow-wrap: anywhere; }
.forsis-roi small.fr-hint, .forsis-roi small.fr-error { display: block; margin-block-start: 4px; }
.forsis-roi .fr-error { color: var(--fr-error); font-size: .875rem; }

.forsis-roi .fr-field input:not([type="range"]), .forsis-roi .fr-field textarea {
  display: block;
  font: inherit;
  font-weight: 500;
  font-size: max(16px, 1rem);
  line-height: 1.4;
  color: var(--fr-ink);
  background: #f7fafb;
  border: 1px solid #aabfc9;
  border-radius: 7px;
  width: 100%;
  min-height: 44px;
  padding: 8px 11px;
  margin: 0;
}
.forsis-roi .fr-field textarea { resize: vertical; }
.forsis-roi input[aria-invalid="true"]:not([type="checkbox"]), .forsis-roi textarea[aria-invalid="true"] { border-color: var(--fr-error); }
.forsis-roi input[type="range"] { width: 100%; min-height: 32px; margin: 7px 0 0; padding: 0; accent-color: var(--fr-accent); cursor: pointer; }
.forsis-roi input[type="radio"], .forsis-roi input[type="checkbox"] { accent-color: var(--fr-accent); inline-size: 18px; block-size: 18px; margin: 0; flex: none; }
.forsis-roi .fr-radio-list { display: flex; flex-wrap: wrap; gap: 8px; }
.forsis-roi .fr-radio-list label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 44px; border: 1px solid var(--fr-border); border-radius: 7px; cursor: pointer; }
.forsis-roi .fr-radio-list label:has(:checked) { border-color: var(--fr-accent); background: #eaf4f4; }

.forsis-roi .fr-results { background: linear-gradient(180deg, var(--fr-panel), #f3f9fa); }
.forsis-roi .fr-metrics { margin: 16px 0 20px; }
.forsis-roi .fr-metric { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content); gap: 8px 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--fr-border); }
.forsis-roi .fr-metric dt { min-width: 0; overflow-wrap: anywhere; }
.forsis-roi .fr-metric dd { margin: 0; font-size: 1.15rem; font-weight: 750; font-variant-numeric: tabular-nums; text-align: end; overflow-wrap: anywhere; }
.forsis-roi .fr-payback { display: block; border: 0; padding: 14px 16px; margin-block-end: 6px; border-radius: 9px; background: #e3f1f0; }
.forsis-roi .fr-payback dd { text-align: start; color: #07545e; font-size: clamp(24px, 4cqi, 37px); line-height: 1.2; }
.forsis-roi [data-roi-chart] h4 { font-size: 1.06rem; overflow-wrap: anywhere; }
.forsis-roi [data-roi-plot] { display: block; width: 100%; height: auto; margin-block-start: 8px; background: #edf5f6; border-radius: 8px; }
.forsis-roi [data-roi-plot] text { fill: #3d5865; font-size: 12px; }
.forsis-roi .fr-plot-axis { stroke: #688694; stroke-dasharray: 4 4; }
.forsis-roi .fr-plot-line { stroke: var(--fr-accent); stroke-width: 3; fill: none; stroke-linejoin: round; }
.forsis-roi .fr-plot-dot { fill: var(--fr-accent); }
.forsis-roi .fr-chart-data summary { color: var(--fr-accent); cursor: pointer; font-weight: 650; padding-block: 6px; }
.forsis-roi .fr-chart-data table { width: 100%; margin-block: 6px; border-collapse: collapse; }
.forsis-roi .fr-chart-data :is(th, td) { padding: 5px; border-bottom: 1px solid var(--fr-border); text-align: start; }
.forsis-roi .fr-assumptions { margin: 15px 0; padding-block-start: 12px; border-top: 1px solid var(--fr-border); }

.forsis-roi .fr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 16px;
  border-radius: 7px;
  border: 1px solid var(--fr-accent);
  font: inherit;
  font-weight: 700;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: filter 140ms ease;
}
.forsis-roi .fr-primary { color: #fff; background: var(--fr-accent); }
.forsis-roi .fr-secondary { color: var(--fr-accent); background: #fff; }
.forsis-roi .fr-button:hover:not(:disabled) { filter: brightness(.92); }
.forsis-roi .fr-button:disabled { cursor: wait; opacity: .7; }
.forsis-roi [data-quote-open] { width: 100%; }
.forsis-roi .fr-quote { margin-block-start: 20px; }
.forsis-roi .fr-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.forsis-roi .fr-contact-grid .fr-field { margin: 0; }
.forsis-roi .fr-privacy { margin: 20px 0; }
.forsis-roi .fr-privacy label { display: flex; align-items: start; gap: 10px; cursor: pointer; }
.forsis-roi .fr-privacy input { margin-top: 3px; }
.forsis-roi .fr-privacy a { display: inline-block; margin: 4px 0 0 28px; color: var(--fr-accent); text-decoration: underline; }
.forsis-roi .fr-quote-status:empty { display: none; }
.forsis-roi .fr-quote-status { padding: 12px 14px; border-radius: 7px; background: #fbedea; color: var(--fr-error); margin: 16px 0 0; }
.forsis-roi .fr-quote-status[data-status="success"], .forsis-roi .fr-quote-status[data-status="sending"] { background: #e3f1f0; color: #07545e; }
.forsis-roi .fr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@container forsis-roi (min-width: 600px) {
  .forsis-roi .fr-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forsis-roi .fr-span { grid-column: 1 / -1; }
}
@container forsis-roi (min-width: 760px) {
  .forsis-roi .fr-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
@container forsis-roi (max-width: 360px) {
  .forsis-roi .fr-metric { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .forsis-roi .fr-metric dd { text-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .forsis-roi .fr-button { transition: none; }
}