/* These illustrations leave card and section layout to home.css. */
.rf-process-visual.refresh-icon {
  display: block;
  width: 76px;
  height: 76px;
  max-width: 100%;
  flex: 0 0 auto;
  margin: 0 0 20px;
  color: #292623;
  overflow: visible;
}

.rf-scope-visual {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 300 / 160;
  flex: 0 0 auto;
  margin: 0 0 22px;
  color: #292623;
  overflow: visible;
}

:is(.rf-process-visual, .rf-scope-visual) :is(.rf-visual-line, .rf-visual-muted-line, .rf-visual-accent-line, .rf-visual-accent-outline) {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rf-process-visual :is(.rf-visual-line, .rf-visual-accent-line) {
  stroke-width: 2;
}

.rf-scope-visual :is(.rf-visual-line, .rf-visual-muted-line, .rf-visual-accent-line, .rf-visual-accent-outline) {
  stroke-width: 1.5;
}

:is(.rf-process-visual, .rf-scope-visual) .rf-visual-line {
  stroke: currentColor;
}

:is(.rf-process-visual, .rf-scope-visual) .rf-visual-muted-line {
  stroke: #bcb6b0;
}

:is(.rf-process-visual, .rf-scope-visual) .rf-visual-paper {
  fill: #fff;
}

:is(.rf-process-visual, .rf-scope-visual) .rf-visual-soft {
  fill: #f0ede8;
}

:is(.rf-process-visual, .rf-scope-visual) .rf-visual-ink {
  fill: currentColor;
}

:is(.rf-process-visual, .rf-scope-visual) .rf-visual-accent {
  fill: #d9380c;
}

:is(.rf-process-visual, .rf-scope-visual) :is(.rf-visual-accent-line, .rf-visual-accent-outline) {
  stroke: #d9380c;
}

@media (max-width: 760px) {
  .rf-process-visual.refresh-icon {
    width: 68px;
    height: 68px;
    margin-bottom: 17px;
  }

  .rf-scope-visual {
    max-width: 340px;
    margin-bottom: 20px;
  }
}

@media print {
  .rf-process-visual,
  .rf-scope-visual {
    break-inside: avoid;
    print-color-adjust: exact;
  }
}