.fpsw-wrap{
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 10px 10px;
  font-family: var(--fpsw-font, inherit);
}

.fpsw-top{
  text-align: center;
  margin: 0 auto 18px;
  max-width: 820px;
}
.fpsw-top h2{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 36px;
  color: var(--fpsw-head, #1F1F1F);
}
.fpsw-top p{
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--fpsw-head-desc, #3A3A3A);
}

.fpsw-line{
  position:absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 6px;
  transform: translateX(-50%);
  background: var(--fpsw-accent);
  border-radius: 99px;
  opacity: .95;
  pointer-events:none;
}


/* Start line below heading so it doesn't cut through title/desc */
.fpsw-has-heading .fpsw-line{ top: 120px; }
@media (max-width: 1024px){ .fpsw-has-heading .fpsw-line{ top: 108px; } }
@media (max-width: 767px){ .fpsw-has-heading .fpsw-line{ top: 98px; } }
.fpsw-step{
  position: relative;
  display:flex;
  align-items: center;
  gap: 18px;
  margin: 26px 0;
}

.fpsw-col{ display:flex; align-items: center; }

.fpsw-col-node{
  width: var(--fpsw-node);
  justify-content:center;
  z-index: 2;
}

.fpsw-node{
  width: var(--fpsw-node);
  height: var(--fpsw-node);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.fpsw-node::before{
  content:"";
  position:absolute;
  inset: -10px;
  border-radius: 999px;
  border: 8px solid var(--fpsw-step-accent, var(--fpsw-accent));
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(18deg);
  opacity: .9;
}

.fpsw-node-inner{
  width: calc(var(--fpsw-node) * 0.68);
  height: calc(var(--fpsw-node) * 0.68);
  border-radius: 999px;
  background: var(--fpsw-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

.fpsw-node-icon{
  color: var(--fpsw-step-icon, var(--fpsw-accent));
  font-size: calc(var(--fpsw-node) * 0.26);
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.fpsw-node-icon i{ font-size: 1em; line-height: 1; }
.fpsw-node-icon svg{ width: 1em; height: 1em; fill: currentColor; }

.fpsw-col-content, .fpsw-col-label{ flex: 1 1 0; }

.fpsw-content{
  max-width: var(--fpsw-box-max);
  background: var(--fpsw-boxbg);
  color: var(--fpsw-step-text, var(--fpsw-text));
  border-radius: 22px;
  padding: 22px 26px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  position: relative;
}

.fpsw-content p{ margin:0; font-size: 15px; line-height: 1.9; }

.fpsw-label{
  width: var(--fpsw-label-w);
  height: var(--fpsw-label-h);
  background: var(--fpsw-step-accent, var(--fpsw-accent));
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  box-shadow: 0 10px 26px rgba(244,180,42,.28);
}

.fpsw-label-title{
  color: var(--fpsw-step-label, var(--fpsw-label));
  font-weight: 800;
  font-size: 28px;
  letter-spacing: .2px;
}

.fpsw-label::after{
  content:"";
  position:absolute;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  background-repeat:no-repeat;
  background-size: contain;
  opacity: .95;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));
}

.fpsw-label::before{
  content:"";
  position:absolute;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}

.fpsw-right .fpsw-col-content{ justify-content: flex-end; }
.fpsw-right .fpsw-col-label{ justify-content: flex-start; }
.fpsw-right .fpsw-label{ margin-inline-start: 6px; }
.fpsw-right .fpsw-label::before{ right: 100%; border-right: 22px solid var(--fpsw-step-accent, var(--fpsw-accent)); }
.fpsw-right .fpsw-label::after{
  left: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath fill='white' d='M24 13c1-1 3-1 4 0l18 17c1 1 1 3 0 4L28 51c-1 1-3 1-4 0s-1-3 0-4l14-13H9c-2 0-3-1-3-3s1-3 3-3h29L24 17c-1-1 0-3 0-4z'/%3E%3C/svg%3E");
}

.fpsw-left{ flex-direction: row-reverse; }
.fpsw-left .fpsw-col-content{ justify-content: flex-start; }
.fpsw-left .fpsw-col-label{ justify-content: flex-end; }
.fpsw-left .fpsw-label{ margin-inline-end: 6px; }
.fpsw-left .fpsw-label::before{ left: 100%; border-left: 22px solid var(--fpsw-step-accent, var(--fpsw-accent)); }
.fpsw-left .fpsw-label::after{
  right: 18px;
  transform: translateY(-50%) scaleX(-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath fill='white' d='M24 13c1-1 3-1 4 0l18 17c1 1 1 3 0 4L28 51c-1 1-3 1-4 0s-1-3 0-4l14-13H9c-2 0-3-1-3-3s1-3 3-3h29L24 17c-1-1 0-3 0-4z'/%3E%3C/svg%3E");
}

.fpsw-step:hover .fpsw-node-inner{
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
  filter: saturate(1.05);
}
.fpsw-effect-glow .fpsw-step:hover .fpsw-node-inner{
  box-shadow: 0 0 0 8px rgba(244,180,42,.18), 0 18px 34px rgba(0,0,0,.18);
}

@keyframes fpswPulse { 0%{ transform: translateY(-2px) scale(1.03);} 50%{ transform: translateY(-2px) scale(1.10);} 100%{ transform: translateY(-2px) scale(1.03);} }
.fpsw-effect-pulse .fpsw-step:hover .fpsw-node-inner{ animation: fpswPulse .9s ease-in-out infinite; }

@keyframes fpswRotate { 0%{ transform: translateY(-2px) scale(1.05) rotate(0deg);} 100%{ transform: translateY(-2px) scale(1.05) rotate(360deg);} }
.fpsw-effect-rotate .fpsw-step:hover .fpsw-node-inner{ animation: fpswRotate 1.1s linear infinite; }

@keyframes fpswBounce { 0%,100%{ transform: translateY(-2px) scale(1.05);} 50%{ transform: translateY(-10px) scale(1.05);} }
.fpsw-effect-bounce .fpsw-step:hover .fpsw-node-inner{ animation: fpswBounce .75s ease-in-out infinite; }

.fpsw-step{ opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.fpsw-step.fpsw-inview{ opacity: 1; transform: translateY(0); }

@media (max-width: 1024px){
  .fpsw-wrap{ padding-inline: 14px; }
  .fpsw-top h2{ font-size: 30px; }
  .fpsw-label-title{ font-size: 24px; }
  .fpsw-content{ padding: 18px 20px; }
}

@media (max-width: 767px){
  .fpsw-top{ text-align: right; }
  .fpsw-top h2{ font-size: 26px; }
  .fpsw-line{ left: 18px; transform:none; }
  .fpsw-step{ flex-direction: row; gap: 12px; align-items: flex-start; }
  .fpsw-col-node{ width: 74px; }
  .fpsw-node{ width: 74px; height: 74px; }
  .fpsw-node::before{ inset:-8px; border-width:7px; }
  .fpsw-col-label, .fpsw-col-content{ flex: 1 1 auto; }
  .fpsw-label{ width: 100%; height: 56px; margin: 0 0 10px 0 !important; }
  .fpsw-label-title{ font-size: 22px; }
  .fpsw-content{ max-width: 100%; }
  .fpsw-right .fpsw-col-content, .fpsw-left .fpsw-col-content{ justify-content:flex-start; }
  .fpsw-left{ flex-direction: row; }
  .fpsw-left .fpsw-label::before{ left:auto; right:100%; border-left:0; border-right:22px solid var(--fpsw-step-accent, var(--fpsw-accent)); }
  .fpsw-left .fpsw-label::after{ right:auto; left:18px; transform: translateY(-50%); }
}


/* ------------------------------------------------------------
   Mobile responsive: keep desktop design unchanged, but make the
   timeline readable & non-breaking on small screens.
------------------------------------------------------------ */
@media (max-width: 767px){
  /* Slightly smaller defaults on mobile (safe even if user customizes sizes) */
  .fpsw-wrap{
    --fpsw-node: 72px;
    --fpsw-label-h: 52px;
  }

  .fpsw-top h2{ font-size: 22px; }
  .fpsw-top p{ font-size: 14px; line-height: 1.7; }

  /* Stack each step vertically (node -> label -> content) */
  .fpsw-step,
  .fpsw-left{
    flex-direction: column !important;
    align-items: stretch;
    gap: 10px;
    margin: 18px 0;
  }

  .fpsw-col{ width: 100%; }

  .fpsw-col-node{
    order: 1;
    width: 100%;
    justify-content: center;
  }

  .fpsw-col-label{
    order: 2;
    justify-content: center;
  }

  .fpsw-col-content{
    order: 3;
    justify-content: center;
  }

  /* Center the label and remove arrow teeth (they break on narrow widths) */
  .fpsw-label{
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: var(--fpsw-label-h);
    padding: 12px 14px;
    border-radius: 14px;
    justify-content: center;
    text-align: center;
  }
  .fpsw-label::before,
  .fpsw-label::after{
    display: none !important;
    content: none !important;
  }

  /* Full-width content card */
  .fpsw-content{
    max-width: 100% !important;
  }
  .fpsw-content p{ font-size: 14px; line-height: 1.8; }

  /* Keep the center line and node aligned */
  .fpsw-line{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }
}