.iwa-process {
  --iwa-process-columns: 4;
  --iwa-process-gap: 24px;
  --iwa-process-padding: 0px;
  --iwa-process-icon: 48px;
  --iwa-process-visual-gap: 28px;
  --iwa-process-badge-gap: 24px;
  --iwa-process-line-color: #d7dbe0;
  --iwa-process-line-width: 2px;
  --iwa-process-default-line-style: dotted;
  --iwa-process-line-style: var(--iwa-process-default-line-style);
  --iwa-process-row-gap: 32px;
  display: grid;
  grid-template-columns: repeat(var(--iwa-process-columns), minmax(0, 1fr));
  column-gap: var(--iwa-process-gap);
  row-gap: var(--iwa-process-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: clip;
  overflow-clip-margin: 8px;
}
@media (max-width: 1024px) {
  .iwa-process { --iwa-process-columns: 2; }
}
@media (max-width: 767px) {
  .iwa-process { --iwa-process-columns: 1; }
  .iwa-process:not(.is-stacked) .iwa-process-marker::before { display: none; }
}
.iwa-process.is-stacked { grid-template-columns: minmax(0, 1fr); }
.iwa-process .iwa-process-step {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: var(--iwa-process-padding);
  list-style: none;
  text-align: var(--iwa-process-align, center);
  overflow-wrap: anywhere;
}
.iwa-process .iwa-process-visual {
  display: block;
  height: var(--iwa-process-icon);
  margin: 0 0 var(--iwa-process-visual-gap);
  color: #794aff;
  font-size: var(--iwa-process-icon);
  line-height: 1;
}
.iwa-process .iwa-process-visual img,
.iwa-process .iwa-process-visual svg {
  display: inline-block;
  width: var(--iwa-process-icon);
  height: var(--iwa-process-icon);
  object-fit: contain;
  vertical-align: top;
}
.iwa-process .iwa-process-visual svg { fill: currentColor; }
.iwa-process .iwa-process-marker {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: var(--iwa-process-align, center);
  min-height: 34px;
  margin-bottom: var(--iwa-process-badge-gap);
}
.iwa-process.has-connector .iwa-process-marker::before {
  content: '';
  position: absolute;
  pointer-events: none;
  top: 50%;
  inset-inline: calc(-.5 * var(--iwa-process-gap) - var(--iwa-process-padding));
  border-top: var(--iwa-process-line-width) var(--iwa-process-line-style) var(--iwa-process-line-color);
}
.iwa-process .iwa-process-badge {
  position: relative;
  padding: 5px 18px;
  border: 1px solid #e1e4e7;
  border-radius: 999px;
  background: #fff;
  color: #101828;
  font-size: .875rem;
  line-height: 1.4;
}
.iwa-process .iwa-process-title { margin: 0 0 6px; color: #101828; font-size: 1.25rem; line-height: 1.3; }
.iwa-process .iwa-process-title a { color: inherit; }
.iwa-process .iwa-process-description { color: #666; line-height: 1.55; }
.iwa-process .iwa-process-description > :first-child { margin-top: 0; }
.iwa-process .iwa-process-description > :last-child { margin-bottom: 0; }
.iwa-process .iwa-process-button {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 6px;
  background: #6a39dc;
  color: #fff;
  text-decoration: none;
}
.iwa-process .iwa-process-button:hover { text-decoration: underline; }
.iwa-process a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.iwa-process.is-stacked .iwa-process-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  align-items: start;
  column-gap: 18px;
  text-align: var(--iwa-process-align, left);
}
.iwa-process.is-stacked .iwa-process-visual { grid-column: 2; grid-row: 1; margin-bottom: 10px; }
.iwa-process.is-stacked .iwa-process-marker { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.iwa-process.is-stacked .iwa-process-marker::before { display: none; }
.iwa-process.is-stacked .iwa-process-copy { grid-column: 2; }
.iwa-process.is-stacked.no-visual .iwa-process-copy { grid-row: 1; }

.iwa-process .iwa-process-button svg { width: 1em; height: 1em; fill: currentColor; }
.iwa-process .iwa-process-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.iwa-process .iwa-process-description a { position: relative; z-index: 2; }
.iwa-process .iwa-process-watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 5rem;
  opacity: 0;
  pointer-events: none;
}
.iwa-process .iwa-process-watermark svg { width: 1em; height: 1em; fill: currentColor; }
.iwa-process .iwa-process-step:is(:hover,:focus-within) .iwa-process-watermark { opacity: .07; }
.iwa-process.is-stacked.has-connector .iwa-process-step:not(:last-child)::before {
  content: '';
  position: absolute;
  pointer-events: none;
  inset-block: calc(var(--iwa-process-padding) + 15px) 0;
  inset-inline-start: calc(var(--iwa-process-padding) + 16px);
  border-inline-start: var(--iwa-process-line-width) var(--iwa-process-line-style) var(--iwa-process-line-color);
}
.iwa-process.is-stacked.no-badges { --iwa-process-marker-gap: 0px; }
.iwa-process.is-stacked.no-badges .iwa-process-step { column-gap: 0; }
.iwa-process.is-stacked:is(.visual-left,.visual-right):not(.no-visual) .iwa-process-step {
  grid-template-columns: max-content minmax(0, var(--iwa-process-icon)) minmax(0, 1fr);
}
.iwa-process.is-stacked.visual-right:not(.no-visual) .iwa-process-step {
  grid-template-columns: max-content minmax(0, 1fr) minmax(0, var(--iwa-process-icon));
}
.iwa-process.is-stacked.visual-left:not(.no-visual) .iwa-process-copy { grid-column: 3; grid-row: 1; }
.iwa-process.is-stacked.visual-right:not(.no-visual) .iwa-process-visual { grid-column: 3; }
.iwa-process.is-stacked.visual-right:not(.no-visual) .iwa-process-copy { grid-row: 1; }
.iwa-process.is-stacked.no-badges:is(.visual-left,.visual-right):not(.no-visual) .iwa-process-visual { margin-inline: 0 8px; }

.iwa-process.auto-card-height:not(.is-stacked):not(.is-timeline) { align-items: start; }
.iwa-process .iwa-process-icon-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  padding: var(--iwa-process-icon-padding, 0px);
  border: var(--iwa-process-icon-border-width, 0px) solid transparent;
}
.iwa-process.icon-filled, .iwa-process.icon-outlined { --iwa-process-icon-padding: 10px; }
.iwa-process.icon-outlined { --iwa-process-icon-border-width: 2px; }
.iwa-process.icon-filled .iwa-process-icon-face { background-color: var(--iwa-process-icon-surface, #eee8ff); }
.iwa-process.icon-outlined .iwa-process-icon-face { border-color: var(--iwa-process-icon-surface, currentColor); }
.iwa-process.icon-filled .iwa-process-step:is(:hover,:focus-within) .iwa-process-icon-face { background-color: var(--iwa-process-icon-surface-hover, var(--iwa-process-icon-surface, #eee8ff)); }
.iwa-process.icon-outlined .iwa-process-step:is(:hover,:focus-within) .iwa-process-icon-face { border-color: var(--iwa-process-icon-surface-hover, var(--iwa-process-icon-surface, currentColor)); }
.iwa-process.shape-circle:not(.icon-plain) .iwa-process-icon-face { border-radius: 50%; }
.iwa-process.shape-rounded:not(.icon-plain) .iwa-process-icon-face { border-radius: 12px; }
.iwa-process .iwa-process-visual:has(.iwa-process-icon-face) { min-height: calc(var(--iwa-process-icon) + 2 * (var(--iwa-process-icon-padding, 0px) + var(--iwa-process-icon-border-width, 0px))); }
.iwa-process.is-timeline {
  --iwa-process-default-line-style: solid;
  --iwa-process-timeline-badge-size: 88px;
  --iwa-process-badge-diameter: clamp(32px, var(--iwa-process-timeline-badge-size), min(30vw, 120px));
  grid-template-columns: minmax(0, 1fr);
}
.iwa-process.is-timeline .iwa-process-step {
  display: grid;
  grid-template-columns: var(--iwa-process-badge-diameter) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--iwa-process-gap);
  align-items: start;
  text-align: var(--iwa-process-align, start);
  isolation: isolate;
}
.iwa-process.is-timeline .iwa-process-marker { position: static; grid-column: 1; grid-row: 1 / span 2; margin: 0; justify-items: center; min-height: var(--iwa-process-badge-diameter); }
.iwa-process.is-timeline .iwa-process-visual { grid-column: 2; grid-row: 1; margin-bottom: 10px; }
.iwa-process.is-timeline .iwa-process-copy { grid-column: 2; grid-row: 2; }
.iwa-process.is-timeline.no-visual .iwa-process-copy { grid-row: 1 / span 2; align-self: center; }
.iwa-process.is-timeline.no-badges .iwa-process-step { grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; }
.iwa-process.is-timeline .iwa-process-badge {
  box-sizing: border-box;
  width: var(--iwa-process-badge-diameter);
  min-height: var(--iwa-process-badge-diameter);
  display: grid;
  place-items: center;
  padding: 6px;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
}
.iwa-process.is-timeline.highlight-first .iwa-process-step:first-child .iwa-process-badge {
  background: var(--iwa-process-highlight-bg, linear-gradient(155deg,#675af5,#b13ee9));
  color: var(--iwa-process-highlight-color, #fff);
}
.iwa-process.is-timeline.has-connector .iwa-process-marker::before { display: none; }
.iwa-process.is-timeline.has-connector .iwa-process-step:not(:last-child)::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset-block-start: calc(var(--iwa-process-padding) + var(--iwa-process-badge-diameter) / 2);
  inset-block-end: calc(0px - var(--iwa-process-row-gap) - var(--iwa-process-padding) - var(--iwa-process-badge-diameter) / 2);
  inset-inline-start: calc(var(--iwa-process-padding) + var(--iwa-process-badge-diameter) / 2);
  border-inline-start: var(--iwa-process-line-width) var(--iwa-process-line-style) var(--iwa-process-line-color);
}

/* Follow the page/container typeface instead of theme heading, link or list fonts. */
.iwa-process,
.iwa-process .iwa-process-step,
.iwa-process .iwa-process-copy,
.iwa-process .iwa-process-marker,
.iwa-process .iwa-process-title,
.iwa-process .iwa-process-title > a,
.iwa-process .iwa-process-description,
.iwa-process .iwa-process-description :where(p, li, a, span, strong, em),
.iwa-process .iwa-process-badge,
.iwa-process .iwa-process-button {
  font-family: inherit;
}
