/* ============================================================
   SA ASSOCIATES — STEPS R105
   Preserve the approved R103 default card design exactly.

   Only:
   - taller right-side images
   - calculated left-card spacing so row starts line up again
   - compact serial + title reveal ONLY while a card is actually
     covered by the next sticky card
   ============================================================ */

/* ------------------------------------------------------------
   DESKTOP RHYTHM

   R103 card height = 166px
   New image height = 208px
   Right image gap = 16px

   To keep each left card TOP aligned with its matching image:
   166 + 58 = 208 + 16 = 224px per row.
   ------------------------------------------------------------ */
@media (min-width:1025px) {
  #main .steps-section .steps-card-wrap {
    gap:58px !important;
  }

  #main .steps-section .steps-img-wrap {
    gap:16px !important;
  }

  #main .steps-section .steps-img-wrap > .steps-img,
  #main .steps-section .steps-img-wrap > .steps-img img {
    height:208px !important;
    min-height:208px !important;
  }
}

/* ------------------------------------------------------------
   TABLET RHYTHM

   R103 tablet card height = 154px
   New image height = 190px
   Right image gap = 16px

   154 + 52 = 190 + 16 = 206px per row.
   ------------------------------------------------------------ */
@media (max-width:1024px) and (min-width:835px) {
  #main .steps-section .steps-card-wrap {
    gap:52px !important;
  }

  #main .steps-section .steps-img-wrap {
    gap:16px !important;
  }

  #main .steps-section .steps-img-wrap > .steps-img,
  #main .steps-section .steps-img-wrap > .steps-img img {
    height:190px !important;
    min-height:190px !important;
  }
}

/* ------------------------------------------------------------
   STACK CAPTION

   Hidden during the normal/default card state.
   JS adds .saa-stack-covered only when the NEXT sticky card has
   actually reached the overlap position.

   Therefore the approved R103 design remains untouched before
   stacking begins.
   ------------------------------------------------------------ */
@media (min-width:835px) {
  #main .steps-section .steps-card-wrap > .steps-card {
    isolation:isolate !important;
  }

  #main .steps-section .steps-card-wrap > .steps-card .saa-stack-caption {
    position:absolute !important;
    z-index:40 !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;

    display:flex !important;
    align-items:center !important;
    gap:14px !important;

    height:68px !important;
    padding:0 22px !important;

    border-radius:21px 21px 0 0 !important;
    border-bottom:1px solid rgba(201,224,240,.72) !important;

    background:
      linear-gradient(
        90deg,
        rgba(248,252,255,.995) 0%,
        rgba(255,255,255,.995) 52%,
        rgba(248,252,255,.99) 100%
      ) !important;

    box-shadow:
      0 8px 18px rgba(38,89,127,.055),
      inset 0 1px 0 rgba(255,255,255,.99) !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;

    transform:translateY(-4px) !important;

    transition:
      opacity .16s ease,
      transform .16s ease,
      visibility .16s linear !important;
  }

  #main .steps-section .steps-card-wrap > .steps-card.saa-stack-covered .saa-stack-caption {
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
  }

  #main .steps-section .saa-stack-caption__number {
    flex:0 0 auto !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-width:42px !important;

    color:#078fe6 !important;
    font-size:25px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:-.035em !important;
  }

  #main .steps-section .saa-stack-caption__title {
    min-width:0 !important;

    color:#0b1734 !important;
    font-size:18px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    letter-spacing:-.018em !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

/* Mobile remains exactly R103: no stack caption and no sticky behavior. */
@media (max-width:834px) {
  #main .steps-section .steps-card-wrap {
    gap:16px !important;
  }

  #main .steps-section .saa-stack-caption {
    display:none !important;
  }
}
/* ===== R105 END ===== */