/* Core layout */
.ysa-scroll-sync,
.ysa-scroll-sync__grid{
  overflow: visible !important;
}

.ysa-scroll-sync__grid{
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items:start;
}

/* Sticky left */
.ysa-scroll-sync__left{
  position: sticky;
  top: var(--ysa-sticky-offset, 120px);
  align-self: start;
}

/* Tablet: still two columns but tighter */
@media (max-width: 1024px){
  .ysa-scroll-sync__grid{ gap: 28px; }
}

/* Mobile: single column, left list becomes horizontal and stays at top */
@media (max-width: 767px){
  .ysa-scroll-sync__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ysa-scroll-sync__left{
    position: sticky;
    top: var(--ysa-sticky-offset, 90px);
    z-index: 10;
    background: var(--ysa-mobile-bg, transparent);
    padding: 8px 0;
  }
  .ysa-scroll-sync__list{
    display: flex;
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .ysa-scroll-sync__item{
    white-space: nowrap;
    padding: 10px 0;
    font-size: 18px;
  }
}

.ysa-scroll-sync__list{
  margin: 0;
  padding: 0;
  list-style: none;
}

.ysa-scroll-sync__item{
  position: relative;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  padding: 14px 0 14px 0;
  cursor: default;
  transition: color .25s ease, transform .25s ease, opacity .25s ease;
  opacity: .75;
}

.ysa-scroll-sync__item.is-active{
  opacity: 1;
  transform: translateX(6px);
}

.ysa-scroll-sync__item.is-active::before{
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 26px;
  border-radius: 999px;
  background: currentColor;
  opacity: 1;
}

.ysa-scroll-sync__step{
  padding: 24px 0;
  min-height: 70vh;
}

.ysa-scroll-sync__title{
  margin: 0 0 10px 0;
}

.ysa-scroll-sync__content{
  line-height: 1.7;
}


.ysa-scroll-sync.ysa-no-indicator .ysa-scroll-sync__item.is-active::before{
  display:none;
}