/* Only add this if you see a scrollbar appears after the changes above */
body, html {
  overflow-x: hidden;
}

/* =========================================
   1. GLOBAL LAYOUT & CONTAINER
   ========================================= */
.hs-steps-module-wrapper {
  position: relative;
  width: 100%;
  overflow: visible; 
  font-family: 'Outfit', sans-serif;
}

.hs-steps-content-container {
  position: relative;
  z-index: 10; 
  max-width: 1400px; /* Allows grid to be wide */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =========================================
   2. WATERMARKS (Background Images)
   ========================================= */
.watermark-left-container,
.watermark-right-container {
  position: absolute;
  z-index: 1; 
  opacity: 0.04; /* Very faint */
  pointer-events: none;
  width: 330px;
  max-height: 330px;
  max-width: 40vw; 
}

.watermark-left-container {
  left: -200px; 
  transform: translateY(-50%);
}

.watermark-right-container {
  right: -200px; 
  transform: translateY(-50%);
}

.watermark-left-container img,
.watermark-right-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================
   3. TYPOGRAPHY & BUTTONS
   ========================================= */

/* Main Headline Container */
.hs-steps-main-headline {
  text-align: center;
  margin-bottom: 60px;
  max-width: 700px; 
  margin-left: auto;
  margin-right: auto;
  color: #073345;
}

/* Main Headline Rich Text Reset */
.hs-steps-main-headline h1,
.hs-steps-main-headline h2,
.hs-steps-main-headline h3,
.hs-steps-main-headline p,
.hs-steps-main-headline div {
  font: normal normal normal 50px/60px 'Outfit', sans-serif !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

/* Step Headline (Supports Rich Text Colors) */
.hs-step-headline {
  font: normal normal normal 25px/34px 'Outfit', sans-serif;
  color: #141414;
  margin: 0 0 15px 0;
  max-width: 100%; 
}

/* =========================================
   RICH TEXT RESET (The Fix)
   ========================================= */
/* This ensures that whether you use a Paragraph <p> 
   or a Heading <h3> in the editor, it looks exactly right. */

.hs-step-headline h1,
.hs-step-headline h2,
.hs-step-headline h3,
.hs-step-headline h4,
.hs-step-headline h5,
.hs-step-headline h6,
.hs-step-headline p,
.hs-step-headline div,
.hs-step-headline span,
.hs-step-headline strong {
  font-family: 'Outfit', sans-serif !important;
  font-size: 25px !important;     /* Forces the 25px size */
  line-height: 40px !important;   /* Forces your original spacing */
  font-weight: normal !important; /* Ensures it isn't too bold */
  color: inherit;                 /* Allows you to change colors in the editor */
  
  margin: 0 !important;           /* Removes default headers spacing */
  padding: 0 !important;
}

/* Step Body Text */
.hs-step-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  color: #141414;
  max-width: 620px; 
  margin: 0 auto;
}

/* Button */
.hs-steps-btn {
  display: inline-block;
  background: #073345;
  border-radius: 35px;
  padding: 22px 50px;
  font: normal normal medium 20px/30px 'Outfit', sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.hs-steps-btn:hover {
  background-image: linear-gradient(180deg, #E3DACD 36%, #C7A97F 100%);
  background-origin: border-box;
  background-clip: border-box;
  color: #073345 !important; 
  border-color: #073345;
}

/* =========================================
   4. DESKTOP GRID SYSTEM
   ========================================= */
.hs-steps-grid {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
  gap: 60px 40px; /* Vertical gap 60px, Horizontal gap 40px */
  margin-bottom: 60px;
  width: 100%;
}

.hs-step-item {
  /* Forces 2 items per row on Desktop */
  flex: 0 0 calc(50% - 40px); 
  display: flex;
  flex-direction: column;
  align-items: center; 
  text-align: center;
}

/* Step Number Pills */
.hs-step-number-wrapper {
  width: auto; 
  height: 46px;
  padding: 0 30px; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  border-radius: 23px; 
  white-space: nowrap; 
}

.hs-step-number {
  font: normal normal medium 16px/43px 'Outfit', sans-serif;
  letter-spacing: 1.6px;
  color: #000000;
  text-transform: uppercase;
  line-height: 1; 
}

/* Step Background Colors */
.hs-step-item:nth-child(1) .hs-step-number-wrapper { background: rgba(214, 179, 126, 0.55); }
.hs-step-item:nth-child(2) .hs-step-number-wrapper { background: #D6B37E; }
.hs-step-item:nth-child(3) .hs-step-number-wrapper { background: #859CAA; }
.hs-step-item:nth-child(4) .hs-step-number-wrapper { background: #8EB4CF; }


/* =========================================
   5. MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 767px) {
  
  /* Container: Safe & Locked */
  .hs-steps-module-wrapper {
    width: 100% !important;
    box-sizing: border-box; 
    overflow: hidden !important; 
  }

  /* ------------------------------
     HIDE WATERMARKS ON MOBILE
     ------------------------------ */
  .watermark-left-container, 
  .watermark-right-container {
    display: none !important;
  }

  /* --- FIX 1: HEADLINE ALIGNMENT --- */
  /* We must target the inner tags to override the Desktop !important */
  .hs-steps-main-headline,
  .hs-steps-main-headline h1,
  .hs-steps-main-headline h2,
  .hs-steps-main-headline h3,
  .hs-steps-main-headline p,
  .hs-steps-main-headline div {
    font-size: 35px !important;
    line-height: 42px !important;
    text-align: left !important; 
    margin-bottom: 20px !important;
    max-width: 100% !important; 
    box-sizing: border-box;
  }

  /* --- FIX 2: GRID DIRECTION --- */
  .hs-steps-grid {
    display: flex !important;
    flex-direction: column !important; /* Forces a vertical stack */
    align-items: flex-start !important; /* Aligns items to the left */
    
    margin-bottom: 20px;
    gap: 30px 0; 
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Step Items */
  .hs-step-item {
    flex: 0 0 auto !important;
    width: 100% !important;
    
    display: flex !important;
    flex-direction: column !important;
    
    /* CHANGED: Forces the Pill and Headline to snap to the left edge */
    align-items: flex-start !important; 
    text-align: left !important;
    
    margin-bottom: 15px;
    box-sizing: border-box;
  }

  /* Step Pills */
  .hs-step-number-wrapper {
    margin-left: 0; 
  }
  .hs-step-number {
    font-size: 16px; 
    line-height: 46px; 
  }

  /* Typography */
  .hs-step-headline {
    text-align: left !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 80% !important;
  }
  
  /* Ensure inner headline tags align left too */
  .hs-step-headline h1, .hs-step-headline h2, .hs-step-headline h3, 
  .hs-step-headline p, .hs-step-headline div {
     text-align: left !important;
  }

  .hs-step-desc {
    font-size: 15px;
    max-width: 100%;
    font-weight: 300;
    box-sizing: border-box;
    
    text-align: left !important;
    
    /* CRITICAL FIX: Removes the 'margin: 0 auto' from desktop that was centering the block */
    margin: 0 !important; 
    margin-bottom: 20px !important; /* Optional spacing */
  }

  /* Button Alignment */
  .hs-steps-button-wrapper {
    width: 100%;
    display: flex;
    justify-content: center; /* Keep button centered (or change to flex-start for left) */
    margin-top: 30px; 
    box-sizing: border-box;
  }
  
  .hs-steps-btn {
    font-size: 17px;
    font-weight: 600;
    padding: 20px 40px; 
  }
  .hs-step-headline h3,
  .hs-step-headline div,
  .hs-step-headline p {
    line-height: 32px !important; /* Overrides the desktop 40px */
  }
  .hs-steps-main-headline h2 {
    color: #393939;
}