/* [project]/app/components/OllsoftProcessFlow/OllsoftProcessFlow.css [app-client] (css) */
.opf {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  background: #14283c;
  padding: 46px 40px 64px;
  font-family: Nunito, system-ui, -apple-system, sans-serif;
}

.opf *, .opf :before, .opf :after {
  box-sizing: border-box;
}

.opf-header {
  max-width: 820px;
  margin: 0 0 26px;
}

.opf-title {
  color: #fff;
  letter-spacing: -.01em;
  font-size: 22px;
  font-weight: 800;
}

.opf-intro {
  color: #fff9;
  max-width: 640px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.opf-stage {
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  display: flex;
}

.opf-controls {
  order: 2;
  justify-content: flex-end;
  margin-top: 18px;
  display: flex;
}

.opf-replay {
  appearance: none;
  color: #ffffff80;
  cursor: pointer;
  background: none;
  border: 1px solid #ffffff29;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: color .2s, border-color .2s;
  display: inline-flex;
}

.opf-replay:hover {
  color: #ffffffd9;
  border-color: #ffffff59;
}

.opf-wrap {
  background: none;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.opf-artboard {
  transform-origin: 0 0;
  background: none;
  width: 1080px;
}

.opf-pad {
  flex-direction: column;
  align-items: flex-end;
  padding: 54px 56px 50px;
  display: flex;
}

.opf-legend {
  align-items: center;
  gap: 34px;
  display: flex;
}

.opf-legend-item {
  align-items: center;
  gap: 11px;
  display: flex;
}

.opf-swatch {
  border-radius: 5px;
  width: 19px;
  height: 19px;
}

.opf-swatch--machine {
  background: #fff;
  box-shadow: 0 1px 3px #00000040;
}

.opf-swatch--human {
  background: #eaf0f4;
  border: 1.5px solid #88a9c3;
}

.opf-legend-label {
  color: #fff;
  letter-spacing: .01em;
  font-size: 16px;
  font-weight: 600;
}

.opf-chain {
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
  display: flex;
}

.opf-card {
  border-radius: 24px;
  width: 680px;
}

.opf-card--machine {
  background: #fff;
  padding: 26px 34px;
  box-shadow: 0 16px 36px #00000038, 0 3px 8px #0000001f;
}

.opf-card-title {
  color: #2b4257;
  letter-spacing: -.01em;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
}

.opf-card-sub {
  color: #2b42578c;
  margin-top: 7px;
  font-size: 17px;
  font-weight: 400;
}

.opf-chips {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  display: flex;
}

.opf-chip {
  color: #2b4257;
  white-space: nowrap;
  background: #2b42570d;
  border: 1px solid #2b425738;
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 14px;
  font-weight: 600;
}

.opf-arrow {
  margin: 7px 0;
  display: block;
  overflow: visible;
}

.opf-card--human {
  background: #eaf0f4;
  border: 1.5px solid #88a9c3;
  border-radius: 26px;
  padding: 28px 32px 30px;
  box-shadow: 0 22px 50px #88a9c36b, 0 5px 14px #2b42571a;
}

.opf-card--human .opf-card-title {
  font-size: 31px;
  line-height: 1.12;
}

.opf-card--human .opf-card-sub {
  color: #2b4257b8;
}

.opf-ui {
  background: #fff;
  border: 1px solid #2b42570f;
  border-radius: 16px;
  margin-top: 20px;
  padding: 22px 22px 20px;
  box-shadow: 0 8px 22px #2b42571a;
}

.opf-ui-dots {
  gap: 7px;
  display: flex;
}

.opf-ui-dot {
  background: #2b425738;
  border-radius: 50%;
  width: 9px;
  height: 9px;
}

.opf-ui-rows {
  flex-direction: column;
  gap: 13px;
  margin-top: 20px;
  display: flex;
}

.opf-ui-row {
  align-items: center;
  gap: 14px;
  padding: 0 4px;
  display: flex;
}

.opf-bar {
  border-radius: 6px;
  height: 11px;
}

.opf-ui-flagrow {
  background: #eff3f7;
  border-left: 3px solid #88a9c3;
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  display: flex;
}

.opf-tag {
  border: 1.5px solid #2b4257;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  display: inline-flex;
}

.opf-tag-dot {
  background: #2b4257;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.opf-tag-label {
  color: #2b4257;
  letter-spacing: .01em;
  font-size: 14px;
  font-weight: 600;
}

.opf-ui-actions {
  justify-content: flex-end;
  margin-top: 22px;
  display: flex;
}

.opf-btn {
  color: #fff;
  transform-origin: center;
  background: #2b4257;
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  padding: 12px 28px;
  font-size: 17px;
  font-weight: 700;
  display: inline-flex;
  box-shadow: 0 6px 16px #2b425747;
}

.opf-caption {
  text-align: center;
  margin-top: 30px;
}

.opf-caption-text {
  color: #ffffff80;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
}

.opf-anim {
  opacity: 0;
}

.opf-anim[data-anim="up18"] {
  transform: translateY(18px);
}

.opf-anim[data-anim="up10"] {
  transform: translateY(10px);
}

.opf-anim[data-anim="up8"] {
  transform: translateY(8px);
}

.opf-anim[data-anim="up6"] {
  transform: translateY(6px);
}

.opf-anim[data-anim="popCard"] {
  transform: scale(.95);
}

.opf-anim[data-anim="popTag"] {
  transform: scale(.7);
}

.opf-anim[data-anim="popBtn"] {
  transform: scale(.8);
}

.opf-anim[data-anim="draw"] {
  clip-path: inset(0 0 100%);
}

.opf.is-revealed .opf-anim {
  opacity: 1;
  transition: opacity   var(--dur, .5s) cubic-bezier(.215, .61, .355, 1) var(--delay, 0s),
    transform var(--dur, .5s) cubic-bezier(.215, .61, .355, 1) var(--delay, 0s);
  transform: none;
}

.opf.is-revealed .opf-anim[data-anim="draw"] {
  clip-path: inset(0 0 0%);
  transition: clip-path var(--dur, .5s) cubic-bezier(.215, .61, .355, 1) var(--delay, 0s);
}

.opf.is-revealed .opf-anim[data-ease="back"] {
  transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
}

.opf.is-revealed .opf-btn {
  animation: opf-glow var(--glow-dur, 1.15s) linear var(--glow-delay, 0s) 1 both;
}

@keyframes opf-glow {
  0% {
    box-shadow: 0 6px 16px #2b425747, 0 0 #88a9c300;
  }

  50% {
    box-shadow: 0 6px 16px #2b425747, 0 0 0 16px #88a9c380;
  }

  100% {
    box-shadow: 0 6px 16px #2b425747, 0 0 #88a9c300;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opf-anim {
    opacity: 1 !important;
    clip-path: none !important;
    transition: none !important;
    transform: none !important;
  }

  .opf .opf-btn {
    animation: none !important;
  }
}

/*# sourceMappingURL=app_components_OllsoftProcessFlow_OllsoftProcessFlow_0g65tcv.css.map*/