/* =========================================================
   AMSYNK V12.14 — HOMEPAGE PROCESS TIMELINE FIX
   Fixes card-bottom clipping and compacts the 5-stage desktop
   process so outputs remain fully visible.
   ========================================================= */

/* Reduce the overall vertical footprint. */
body.amsynk-enterprise-v21 .process-section{
  padding-top:54px !important;
  padding-bottom:54px !important;
}

body.amsynk-enterprise-v21 .process{
  padding:28px 28px 30px !important;
  border-radius:24px !important;
  /* Keep decorative artwork clipped, but card geometry now fits cleanly. */
  overflow:hidden !important;
}

body.amsynk-enterprise-v21 .process-intro{
  max-width:690px !important;
  margin:0 auto 24px !important;
}

body.amsynk-enterprise-v21 .process-intro .eyebrow{
  margin-bottom:7px !important;
}

body.amsynk-enterprise-v21 .process-intro h2{
  font-size:clamp(1.8rem,2.65vw,2.55rem) !important;
  line-height:1.04 !important;
}

body.amsynk-enterprise-v21 .process-intro p{
  margin-top:10px !important;
  font-size:.91rem !important;
  line-height:1.55 !important;
}

/* Structural fix: the old card used height:100%, which made each card
   extend below its step (marker + card) and get clipped by .process. */
body.amsynk-enterprise-v21 .process-track{
  align-items:stretch !important;
  gap:12px !important;
}

body.amsynk-enterprise-v21 .process-track::before,
body.amsynk-enterprise-v21 .process-track::after{
  top:27px !important;
}

body.amsynk-enterprise-v21 .process-step{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  height:auto !important;
}

body.amsynk-enterprise-v21 .process-marker{
  width:56px !important;
  height:56px !important;
  margin:0 auto 12px !important;
  border-width:4px !important;
  font-size:.75rem !important;
  box-shadow:0 8px 18px rgba(35,87,190,.20) !important;
}

body.amsynk-enterprise-v21 .process-card{
  flex:1 1 auto !important;
  height:auto !important;
  min-height:198px !important;
  padding:15px 15px 14px !important;
  border-radius:15px !important;
  overflow:visible !important;
}

body.amsynk-enterprise-v21 .process-card:hover{
  transform:translateY(-2px) !important;
}

body.amsynk-enterprise-v21 .process-icon{
  width:36px !important;
  height:36px !important;
  margin-bottom:10px !important;
  border-radius:10px !important;
}

body.amsynk-enterprise-v21 .process-icon svg{
  width:18px !important;
  height:18px !important;
}

body.amsynk-enterprise-v21 .process-card h3{
  margin-bottom:7px !important;
  font-size:.92rem !important;
  line-height:1.2 !important;
}

body.amsynk-enterprise-v21 .process-card p{
  font-size:.77rem !important;
  line-height:1.48 !important;
}

body.amsynk-enterprise-v21 .process-output{
  min-height:25px !important;
  margin-top:13px !important;
  padding:5px 8px !important;
  border-radius:7px !important;
  font-size:.63rem !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
}

/* On narrower desktop/laptop screens keep the same compact horizontal
   timeline a little longer, then switch to the existing vertical mode. */
@media (max-width:1050px){
  body.amsynk-enterprise-v21 .process-section{
    padding-top:46px !important;
    padding-bottom:46px !important;
  }

  body.amsynk-enterprise-v21 .process{
    padding:26px 22px !important;
  }

  body.amsynk-enterprise-v21 .process-step{
    display:grid !important;
    grid-template-columns:56px minmax(0,1fr) !important;
    flex-direction:initial !important;
    gap:14px !important;
  }

  body.amsynk-enterprise-v21 .process-step + .process-step{
    margin-top:12px !important;
  }

  body.amsynk-enterprise-v21 .process-marker{
    width:52px !important;
    height:52px !important;
    margin:0 !important;
  }

  body.amsynk-enterprise-v21 .process-card{
    min-height:0 !important;
    padding:15px 16px !important;
  }
}

@media (max-width:640px){
  body.amsynk-enterprise-v21 .process-section{
    padding-top:34px !important;
    padding-bottom:34px !important;
  }

  body.amsynk-enterprise-v21 .process{
    padding:20px 14px !important;
    border-radius:20px !important;
  }

  body.amsynk-enterprise-v21 .process-intro{
    margin-bottom:18px !important;
  }

  body.amsynk-enterprise-v21 .process-step{
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:11px !important;
  }

  body.amsynk-enterprise-v21 .process-marker{
    width:44px !important;
    height:44px !important;
  }

  body.amsynk-enterprise-v21 .process-card{
    padding:14px !important;
    border-radius:14px !important;
  }
}