/* New How It Works Section (Interactive) */
.new-how-it-works-section {
  background-color: var(--background-primary);
  padding: 80px 0;
}

.new-how-it-works-section h2 {
  color: var(--text-primary);
  text-align: center;
  font-size: 2.8em;
  margin-bottom: 60px;
}

.how-it-works-interactive-container {
  display: flex;
  flex-direction: column;
  align-items: center; 
  gap: 30px; /* Increased gap between items */
  max-width: 550px; /* Reduced max-width */
  margin: 0 auto;
}

.how-it-works-item {
  width: 100%; 
  text-align: center; 
  position: relative; /* Added for pseudo-element positioning */
}

.how-it-works-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%; /* Start from the bottom of the item */
  width: 1px;
  height: 30px; /* Should match the gap in .how-it-works-interactive-container */
  background-color: #DCDCDC; /* Light gray line */
}

.how-it-works-item h3 {
  font-size: 1.4em; /* As per previous plan */
  font-weight: 500; 
  color: var(--text-primary);
  margin-bottom: 8px; /* Reduced gap */
  line-height: 1.4;
  transform-origin: center center; /* Added for scaling text */
}

.how-it-works-item .image-box {
  width: 100%; 
  overflow: hidden; 
  transition: none; 
  transform-origin: center center; /* Added: image-box itself will scale */
  /* filter, scale, maxHeight will be controlled by GSAP */
}

/* .expanded class on image-box is no longer needed for box-shadow or other direct styles */

.how-it-works-item .image-box img {
  width: 100%;
  height: 100%; /* Changed from auto to fill the parent image-box */
  object-fit: cover; /* Ensures image covers the box, might crop */
  display: block;
  border-radius: 8px; 
  /* transform-origin removed from img, scale/filter now on image-box */
}

/* Line extending down from the 'New How It Works' section */
#new-how-it-works.new-how-it-works-section::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0; 
  transform: translateX(-50%);
  width: 1px;
  height: 60px; /* Adjust height to connect visually */
  background-color: #DCDCDC;
  z-index: 1; 
}