.section-open-eh-stu-step {
  --step-accent: #5000ac;
  --step-color-primary: #0a0a0a;
  --step-color-secondary: #404040;
  --step-color-muted: #737373;
  --step-color-white: #fff;
  --step-bg: #f5f5f5;
  --step-card-bg: #fff;
  --step-radius: 12px;
  padding-top: var(--step-pt-pc, 96px);
  padding-bottom: var(--step-pb-pc, 96px);
  background: var(--step-bg);
}
.section-open-eh-stu-step__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.section-open-eh-stu-step__heading {
  margin: 0;
  width: 100%;
  color: var(--step-color-primary);
  font-family: var(--Shokz-Sans-Display, "Shokz Sans Display");
  font-size: clamp(28px, 2.2vw, 36px);
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  word-break: break-word;
}
.section-open-eh-stu-step__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1200px;
}
.section-open-eh-stu-step__track-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.section-open-eh-stu-step__track {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 744px;
}
.section-open-eh-stu-step__step-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.section-open-eh-stu-step__connector {
  flex: 1 1 0;
  min-width: 24px;
  height: 0;
  align-self: center;
  border-top: 1px dashed var(--step-accent);
}
.section-open-eh-stu-step__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 20px;
  border: 0;
  border-radius: 32px;
  background: var(--step-accent);
  color: var(--step-color-white);
  cursor: default;
  transition:
    background .3s ease,
    color .3s ease,
    box-shadow .3s ease;
}
.section-open-eh-stu-step__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.section-open-eh-stu-step__icon-svg {
  display: block;
  width: 24px;
  height: 24px;
}
.section-open-eh-stu-step__label-btn {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--step-color-muted);
  font-family: "Young Serif", serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .3s ease;
}
.section-open-eh-stu-step__label-btn.is-active {
  color: var(--step-accent);
}
.section-open-eh-stu-step__cards {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: 100%;
}
.section-open-eh-stu-step__card {
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--step-radius);
  background: var(--step-card-bg);
  padding: 16px;
}
.section-open-eh-stu-step__card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.section-open-eh-stu-step__card-step {
  margin: 0 0 2px;
  color: var(--step-accent);
  font-family: "Young Serif", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1.2px;
}
.section-open-eh-stu-step__card-title {
  margin: 0;
  color: var(--step-color-primary);
  font-family: var(--Shokz-Sans-Display, "Shokz Sans Display");
  font-size: clamp(18px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.2;
  word-break: break-word;
}
.section-open-eh-stu-step__card-desc {
  margin: 0;
  color: var(--step-color-secondary);
  font-family: var(--Shokz-Sans-Text, "Shokz Sans Text");
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 300;
  line-height: 1.3;
  width: 78%;
  word-break: break-word;
}
@media screen and (min-width: 769px) {
  .section-open-eh-stu-step .hide-pc {
    display: none !important;
  }
  .section-open-eh-stu-step__card[hidden] {
    display: block !important;
  }
}
@media screen and (max-width: 768px) {
  .section-open-eh-stu-step .hide-mb {
    display: none !important;
  }
  .section-open-eh-stu-step {
    padding-top: var(--step-pt-mb, 48px);
    padding-bottom: var(--step-pb-mb, 48px);
  }
  .section-open-eh-stu-step__inner {
    gap: 24px;
  }
  .section-open-eh-stu-step__heading {
    font-size: 28px;
  }
  .section-open-eh-stu-step__track {
    max-width: 292px;
    align-items: flex-start;
  }
  .section-open-eh-stu-step__connector {
    align-self: flex-start;
    margin-top: 24px;
  }
  .section-open-eh-stu-step__icon-btn {
    width: 48px;
    height: 48px;
    padding: 15px;
    border: 1px solid var(--step-accent);
    border-radius: 24px;
    background: var(--step-color-white);
    color: var(--step-accent);
    cursor: pointer;
  }
  .section-open-eh-stu-step__icon-btn.is-active {
    background: var(--step-accent);
    color: var(--step-color-white);
    border-color: var(--step-accent);
  }
  .section-open-eh-stu-step__icon-wrap,
  .section-open-eh-stu-step__icon-svg {
    width: 18px;
    height: 18px;
  }
  .section-open-eh-stu-step__cards {
    display: block;
    width: 100%;
  }
  .section-open-eh-stu-step__card {
    width: 100%;
    padding: 24px;
  }
  .section-open-eh-stu-step__card:not(.is-active) {
    display: none;
  }
  .section-open-eh-stu-step__card[hidden] {
    display: none !important;
  }
  .section-open-eh-stu-step__card.is-active {
    display: block;
  }
  .section-open-eh-stu-step__card-inner {
    align-items: flex-start;
    text-align: left;
    gap: 8px;
  }
  .section-open-eh-stu-step__card-title {
    font-size: 18px;
    line-height: 1.2;
  }
  .section-open-eh-stu-step__card-desc {
    font-size: 14px;
    line-height: 1.3;
    width: 100%;
  }
}