.wwh-access-flow {
  background: #f0f2f9;
  padding: calc(48 * var(--groot-ui-rpx, 0.0625em)) 0 calc(56 * var(--groot-ui-rpx, 0.0625em));
}

.wwh-access-flow-inner {
  width: calc(1190 * var(--groot-ui-rpx, 0.0625em));
  max-width: 100%;
  margin: 0 auto;
  padding: 0 calc(20 * var(--groot-ui-rpx, 0.0625em));
  box-sizing: border-box;
}

.wwh-access-flow-title {
  margin: 0 0 calc(40 * var(--groot-ui-rpx, 0.0625em));
  text-align: center;
  font-size: calc(28 * var(--groot-ui-rpx, 0.0625em));
  font-weight: 600;
  color: #333;
}

.wwh-access-flow-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

.wwh-access-flow-step-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

.wwh-access-flow-step {
  position: relative;
  width: calc(180 * var(--groot-ui-rpx, 0.0625em));
  height: calc(180 * var(--groot-ui-rpx, 0.0625em));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(4 * var(--groot-ui-rpx, 0.0625em)) calc(20 * var(--groot-ui-rpx, 0.0625em)) rgba(43, 68, 144, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wwh-access-flow-badge {
  position: absolute;
  top: calc(8 * var(--groot-ui-rpx, 0.0625em));
  left: calc(8 * var(--groot-ui-rpx, 0.0625em));
  width: calc(28 * var(--groot-ui-rpx, 0.0625em));
  height: calc(28 * var(--groot-ui-rpx, 0.0625em));
  border-radius: 50%;
  background: #2b4490;
  color: #fff;
  font-size: calc(14 * var(--groot-ui-rpx, 0.0625em));
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.wwh-access-flow-step-text {
  font-size: calc(28 * var(--groot-ui-rpx, 0.0625em));
  font-weight: 700;
  color: #222;
}

.wwh-access-flow-step-label {
  margin: calc(16 * var(--groot-ui-rpx, 0.0625em)) 0 0;
  font-size: calc(16 * var(--groot-ui-rpx, 0.0625em));
  font-weight: 600;
  color: #2b4490;
  text-align: center;
}

.wwh-access-flow-connector {
  flex: 1 1 auto;
  min-width: calc(120 * var(--groot-ui-rpx, 0.0625em));
  max-width: calc(200 * var(--groot-ui-rpx, 0.0625em));
  padding: calc(50 * var(--groot-ui-rpx, 0.0625em)) calc(8 * var(--groot-ui-rpx, 0.0625em)) 0;
  text-align: center;
}

.wwh-access-flow-connector-line {
  position: relative;
  height: calc(2 * var(--groot-ui-rpx, 0.0625em));
  margin: calc(12 * var(--groot-ui-rpx, 0.0625em)) 0;
  border-top: calc(2 * var(--groot-ui-rpx, 0.0625em)) dashed #69c0ff;
}

.wwh-access-flow-connector-line::after {
  content: "";
  position: absolute;
  right: calc(-4 * var(--groot-ui-rpx, 0.0625em));
  top: 50%;
  transform: translateY(-50%);
  border: calc(6 * var(--groot-ui-rpx, 0.0625em)) solid transparent;
  border-left-color: #69c0ff;
}

.wwh-access-flow-connector-title {
  margin: 0;
  font-size: calc(14 * var(--groot-ui-rpx, 0.0625em));
  font-weight: 600;
  color: #333;
  line-height: 1.5;
}

.wwh-access-flow-connector-desc {
  margin: calc(8 * var(--groot-ui-rpx, 0.0625em)) 0 0;
  font-size: calc(12 * var(--groot-ui-rpx, 0.0625em));
  color: #888;
  line-height: 1.5;
}

.wwh-access-flow-visual-platform {
  position: relative;
  width: calc(80 * var(--groot-ui-rpx, 0.0625em));
  height: calc(100 * var(--groot-ui-rpx, 0.0625em));
}

.wwh-access-flow-visual-platform::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: calc(44 * var(--groot-ui-rpx, 0.0625em));
  height: calc(72 * var(--groot-ui-rpx, 0.0625em));
  background: linear-gradient(180deg, #b37feb 0%, #9254de 100%);
  border-radius: calc(8 * var(--groot-ui-rpx, 0.0625em));
}

.wwh-access-flow-visual-platform::after {
  content: "";
  position: absolute;
  right: calc(4 * var(--groot-ui-rpx, 0.0625em));
  top: calc(20 * var(--groot-ui-rpx, 0.0625em));
  width: calc(28 * var(--groot-ui-rpx, 0.0625em));
  height: calc(18 * var(--groot-ui-rpx, 0.0625em));
  background: #ffd666;
  border-radius: calc(3 * var(--groot-ui-rpx, 0.0625em));
  box-shadow: calc(-36 * var(--groot-ui-rpx, 0.0625em)) calc(40 * var(--groot-ui-rpx, 0.0625em)) 0 calc(12 * var(--groot-ui-rpx, 0.0625em)) #ff9c6e;
}

.wwh-access-flow-visual-consumer {
  position: relative;
  width: calc(90 * var(--groot-ui-rpx, 0.0625em));
  height: calc(90 * var(--groot-ui-rpx, 0.0625em));
}

.wwh-access-flow-visual-consumer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -40%);
  width: calc(56 * var(--groot-ui-rpx, 0.0625em));
  height: calc(48 * var(--groot-ui-rpx, 0.0625em));
  background: linear-gradient(180deg, #40a9ff 0%, #1890ff 100%);
  border-radius: calc(6 * var(--groot-ui-rpx, 0.0625em)) calc(6 * var(--groot-ui-rpx, 0.0625em)) calc(4 * var(--groot-ui-rpx, 0.0625em)) calc(4 * var(--groot-ui-rpx, 0.0625em));
}

.wwh-access-flow-visual-consumer::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(8 * var(--groot-ui-rpx, 0.0625em));
  transform: translateX(-50%);
  width: calc(70 * var(--groot-ui-rpx, 0.0625em));
  height: calc(12 * var(--groot-ui-rpx, 0.0625em));
  background: #69c0ff;
  border-radius: 50%;
  opacity: 0.4;
}