/* =========================
   HOW IT WORKS — FINAL SAFE
   ========================= */

.section.how-it-works{
  background:#f4f4f2;
  padding:80px 0; /* ⬅ shorter as requested */
}

.how-it-works-inner{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:100px;
  align-items:start;
}

/* LEFT */
.hiw-left h2{
  font-family: var(--font-heading);
  font-size:56px;
  line-height:0.98;
  font-weight:600;
  letter-spacing: -0.02em;
  margin:0 0 24px;
  color:#111;
}

.hiw-divider{
  width:100px;
  height:1px;
  background:rgba(0,0,0,.15);
  margin-bottom:24px;
}

.hiw-left p{
  max-width:360px;
  font-family: var(--font-body);
  font-size:14px;
  line-height:1.7;
  color:rgba(0,0,0,.60);
}

/* RIGHT */
.hiw-right{
  position:relative;
  display:flex;
  flex-direction:column;
  padding-left:44px;
}

.hiw-right::before{
  content:"";
  position:absolute;
  left:14px;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(0,0,0,.08);
}

/* STEP */
.hiw-card{
  display:grid;
  grid-template-columns:56px 1fr;
  column-gap:24px;
  padding:22px 0;
  background:transparent;

  /* IMPORTANT: visible by default */
  opacity:1;
  transform:none;
}

.hiw-card + .hiw-card{
  border-top:1px solid rgba(0,0,0,.06);
}

/* NUMBER */
.hiw-step{
  font-family: var(--font-body);
  font-weight: 600;
  font-size:18px;
  letter-spacing:.08em;
  color:rgba(0,0,0,.34);
  padding-top:4px;
}

/* TEXT */
.hiw-copy p{
  margin:0;
  font-family: var(--font-body);
  font-size:15px;
  line-height:1.65;
  color:rgba(0,0,0,.86);
  max-width:520px;
}

/* ANIMATION STATES (ONLY USED IF JS ADDS CLASS) */
.hiw-card.is-animating{
  opacity:0;
  transform:translateY(6px);
}

.hiw-card.is-revealed{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity 400ms cubic-bezier(.22,1,.36,1),
    transform 400ms cubic-bezier(.22,1,.36,1);
}

/* MOBILE */
@media(max-width:900px){
  .how-it-works-inner{
    grid-template-columns:1fr;
    gap:48px;
  }

  .hiw-left h2{
    font-size:38px;
  }

  .hiw-right{
    padding-left:0;
  }

  .hiw-right::before{
    display:none;
  }

  .hiw-step{
    font-size:16px;
  }

  .hiw-copy p{
    font-size:14px;
  }
}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  .hiw-card,
  .hiw-card.is-animating,
  .hiw-card.is-revealed{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}