/* =============================================================
   PWR Steps Connected Layout
   Figma ref: "3-step plan" node 5588-6422
   ============================================================= */

/* ---- Fallback colour token (overridden per-step via inline var) ---- */
.pwr-step-c {
  --pwr-step-c-color: var(--color-primary, #01b6e1);
  --pwr-step-c-grad-start: var(--pwr-step-c-color);
  --pwr-step-c-grad-end: var(--pwr-step-c-color);
  --pwr-step-c-box-border: color-mix(in srgb, var(--pwr-step-c-color) 19%, transparent);
}

/* ---- Outer wrapper ---- */
.pwr-steps-connected {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}

/* ---- Intro / header ---- */
.pwr-steps-connected__intro {
  text-align: center;
  margin-bottom: 64px;
}

.pwr-steps-connected__eyebrow {
  display: block;
  text-align: center;
}

.pwr-steps-connected__title,
.pwr-steps-connected__desc {
  text-align: center;
}

/* ---- Steps row ---- */
.pwr-steps-connected__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  position: relative;
}

/* ---- Individual step card ---- */
.pwr-step-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 0;
  position: relative;
  padding: 0 20px;
}

/* ---- Icon wrap ---- */
.pwr-step-c__icon-wrap {
  position: relative;
  margin-bottom: 28px;
  overflow: visible;
}

/* ---- Icon box ----
   --pwr-step-c-box-bg is set inline per step when the editor picks a colour.
   Falls back to #fff (light) or a subtle white tint (dark, see below).
   ---- */
.pwr-step-c__icon-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--pwr-step-c-box-bg, #fff);
  border: 1px solid var(--pwr-step-c-box-border);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
}

@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .pwr-step-c__icon-box {
    border-color: var(--pwr-step-c-box-border, var(--pwr-step-c-color));
    border-width: 1px;
  }
}

/* ---- Title mh-wrapper must be full width so text-align:center works ---- */
.pwr-step-c [data-pwr-mh="mhConnTitle"] {
  width: 100%;
}

/* ---- Icon itself ---- */
.pwr-step-c__icon {
  position: relative;
  z-index: 1;
  font-size: 28px;
  line-height: 1;
  color: var(--pwr-step-c-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pwr-step-c__icon .hs-icon,
.pwr-step-c__icon svg,
.pwr-step-c__icon i {
  color: inherit;
  fill: currentColor;
  width: 28px;
  height: 28px;
}

.pwr-step-c__icon--img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* ---- Connector ----
   Sits at the vertical centre of the 64px icon box (top: 32px).
   A single dashed gradient line runs from this icon's right edge to the
   next icon's left edge, with a chevron arrow tip at the end.
   ---- */
.pwr-step-c__connector {
  position: absolute;
  top: 32px;
  left: calc(50% + 34px);
  right: calc(-50% + 34px);
  height: 16px;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 0;
  transform: translateY(-50%);
  overflow: visible;
}

/* ---- Full-width dashed gradient line ----
   gradient runs start→end colour across the full connector width.
   CSS mask creates the dashes (8px on / 12px off) without breaking the gradient.
   ---- */
.pwr-step-c__line-start {
  flex: 1;
  height: 3px;
  background: linear-gradient(to right, var(--pwr-step-c-grad-start), var(--pwr-step-c-grad-end));
  -webkit-mask-image: repeating-linear-gradient(to right, black 0 9px, transparent 9px 17px);
  mask-image: repeating-linear-gradient(to right, black 0 9px, transparent 9px 17px);
}

/* ---- Second half element hidden — single line replaces two-half approach ---- */
.pwr-step-c__line-end {
  display: none;
}

/* Fallback for browsers without mask support */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .pwr-step-c__line-start {
    background: linear-gradient(to right, var(--pwr-step-c-grad-start), var(--pwr-step-c-grad-end));
    opacity: 0.6;
  }
}

.pwr-step-c__diamond {
  display: none;
}

/* ---- Text content ---- */
.pwr-step-c__step-title {
  display: block;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: #0a0e1a;
  margin-bottom: 12px;
}

.pwr-step-c__step-title--has-desc {
  margin-bottom: 12px;
}

.pwr-step-c__desc {
  font-size: 16px;
  line-height: 1.5625;
  color: rgba(10, 14, 26, 0.45);
  display: block;
}

.pwr-step-c__cta {
  margin-top: 20px;
}

/* =============================================================
   DARK MODE
   ============================================================= */
.pwr-steps-connected.pwr--dark .pwr-step-c__icon-box {
  background: var(--pwr-step-c-box-bg, rgba(255, 255, 255, 0.06));
}

.pwr-steps-connected.pwr--dark .pwr-step-c__step-title {
  color: #ffffff;
}

.pwr-steps-connected.pwr--dark .pwr-step-c__desc {
  color: rgba(255, 255, 255, 0.85);
}

.pwr-steps-connected.pwr--dark .pwr-steps-connected__title {
  color: #ffffff;
}

.pwr-steps-connected.pwr--dark .pwr-steps-connected__desc {
  color: #e6e6e6;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 991px) {
  .pwr-steps-connected__row {
    flex-wrap: wrap;
    gap: 48px 0;
  }

  .pwr-step-c {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .pwr-step-c__connector {
    display: none;
  }
}

@media (max-width: 575px) {
  .pwr-step-c {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .pwr-steps-connected {
    padding: 48px 0;
  }
}