/* Sticky steps improved - CSS
   - layout for left/right improved
   - vertical progress rail with smooth transform fill
   - metrics animation on scroll
*/

.sticky-steps-improved { --ss-center-offset: 80px; background: linear-gradient(180deg, #071C61 0%, #0A2FA0 100%); color: #fff; }

.container-frame.no-padding { padding: 0; }

.ss-left-improved { padding: 40px 24px; position: relative; }
.ss-left-improved .left-border { display: none; /* hidden: replaced by separated vertical ticks */ }

/* boxed left content with thin lines above and below */
.ss-left .ss-left-inner { position: relative; padding: 40px 40px 40px 100px; /* left column fixed width */
   width: 611px;
   /* border-right removed; using separated vertical ticks instead */
}
.ss-left::after {
  content: "";
display: block;
width: 639px;
margin: 0 auto;
border-bottom: 1px solid rgba(255, 255, 255, 0.30);
margin-left: 60px !important;
}

/* external borders: two horizontal lines above and below the .ss-left block */
.ss-left { position: relative; }

/* hide internal thin rules to avoid duplicate lines (we use the external borders instead) */
.ss-left .ss-left-inner::before,
.ss-left .ss-left-inner::after { display: none; }

/* central vertical line that spans the entire container-frame for this band */
.sticky-steps-improved .container-frame { position: relative; }
.sticky-steps-improved .container-frame::before { content: ''; position: absolute; left: calc(50% - var(--ss-center-offset)); top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.30); z-index: 0; }
.sticky-steps-improved .gx-5{
    padding-top: 60px;
    margin-right: 0;
}
/* Left decorative SVG area (now outside of .ss-left) */
.ss-left-graphic { display: flex;margin-top: 50px; opacity: 0; transform: translateX(-174px) translateY(0); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.31,1); pointer-events: none; }
.ss-left-graphic.is-visible { opacity: 1; transform: translateX(0) translateY(0);justify-content: center; }
.ss-left-graphic.is-clipped { overflow: hidden; opacity: 0; transform: translateX(0) translateY(0) scale(.98); }
.ss-left{
    position: sticky;
    top: 96px;
    padding: 0 !important;
    color: #fff;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.30);
    border-bottom: none !important;
    margin-left: -98px !important;
    width: 700px;
}

.ss-right-improved { padding: 20px 24px; position: relative; }

/* Place the rail between the fixed-width icon column and the flexible text column.
   Icons live in a fixed column (72px). The rail is positioned just after the icon
   column so it visually separates icons and metric text, matching the design. */
.progress-rail-improved { position: absolute; left: 72px; top: 132px; bottom: 66px; width: 8px; pointer-events: none; z-index: 1; }
.progress-rail-improved .rail-improved { position: absolute; left: 50%; transform: translateX(-50%); width: 2px; top: 0; bottom: 0; background: rgba(255,255,255,0.12); border-radius: 2px; }
.progress-rail-improved .fill-improved { position: absolute; left: 50%; transform-origin: top; transform: translateX(-50%) scaleY(0); width: 2px; top: 0; height: 100%; background: linear-gradient(180deg, #C4F222 0%, #C4F222 33%, #C4F222 66%, #C4F222 90%, #C4F222 100%); border-radius: 2px; }

/* small square marker that travels down the rail and disappears at the end */
.progress-rail-improved .rail-marker { position: absolute; left: 50%; transform: translateX(-50%) translateY(0); width: 12px; height: 12px; background: #C4F222; border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,0.25); transition: opacity .24s linear; z-index: 2; }

.metrics-improved { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 48px; margin-top: -14px; padding-bottom: 25px;}

/* Each metric: fixed icon column + flexible text body. */
.metrics-improved .metric { opacity: 0.6; transform: translateY(8px); transition: transform .36s cubic-bezier(.22,.9,.31,1), opacity .36s ease; display: flex; gap: 24px; align-items: flex-start; padding-bottom: 17px; }
.metrics-improved .metric.is-active { opacity: 1; transform: translateY(0); }

/* Icon wrapper (first child) - keep icons vertically centered inside a fixed column */
.metrics-improved .metric > [aria-hidden] { width: 72px; flex: 0 0 72px; display: flex; align-items: center; justify-content: center; margin-left: -40px; margin-top: 17px;}

/* Icon sizing: specific per metric (nth-child) */
.metrics-improved .metric:nth-child(1) > [aria-hidden] svg { width: 44.28px; height: 49px; flex-shrink: 0; display: block; }
.metrics-improved .metric:nth-child(2) > [aria-hidden] svg { width: 61px; height: 46.53px; flex-shrink: 0; display: block; }
.metrics-improved .metric:nth-child(3) > [aria-hidden] svg { width: 53.284px; height: 52.1px; flex-shrink: 0; display: block; }

.metrics-improved .metric .metric-body { flex: 1 1 auto; padding-left: 32px;}
.metrics-improved .metric .metric-kpi { color: var(--CG-colors-Grey-White, #FFF); font-family: "Space Grotesk", sans-serif; font-size: 60px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -1.2px; }

/* symbol shown after the numeric value */
.metrics-improved .metric .metric-kpi .kpi-symbol { color: var(--CG-colors-Grey-White, #FFF); font-family: var(--Typography-font-family-title, "Space Grotesk"); font-size: 40px; font-style: normal; font-weight: 500; line-height: 44px; vertical-align: baseline; margin-left: 6px; }

/* title under KPI (Body 4) */
.sticky-steps-improved .metrics-improved .metric .metric-title { color: var(--CG-colors-Grey-White, #FFF); font-family: var(--Typography-font-family-body, Montserrat); font-size: 20px; font-style: normal; font-weight: 400; line-height: 26px; margin-top: 4px; }

/* Left column typography overrides (scoped) */
.sticky-steps-improved .ss-left .eyebrow { color: var(--CG-colors-Lime-Lime-5, #C4F222); font-family: var(--Typography-font-family-caption, Montserrat); font-size: 14px; font-style: normal; font-weight: 500; line-height: 21px; margin: 0 0 24px 0; }
.sticky-steps-improved .ss-left .btn-discover, .sticky-steps-improved .ss-left .btn-discover .text { font-family: var(--Typography-font-family-caption, Montserrat); font-size: 14px; font-style: normal; font-weight: 500; line-height: 21px; }
.sticky-steps-improved .ss-left .title { color: var(--CG-colors-Grey-White, #FFF); font-family: var(--Typography-font-family-title, "Space Grotesk"); font-size: 40px; font-style: normal; font-weight: 500; line-height: 44px; margin: 0 0 24px 0; }
.sticky-steps-improved .ss-left .lead { color: var(--CG-colors-Highlights-White-80, rgba(255, 255, 255, 0.80)); font-family: var(--Typography-font-family-body, Montserrat); font-size: 20px; font-style: normal; font-weight: 400; line-height: 26px; margin: 0 0 18px 0; }

/* Match Transactions animation: keep gap stable and animate only the label */
.sticky-steps-improved .ss-left .btn-discover { gap: 8px; }
.sticky-steps-improved .ss-left .btn-discover:hover { gap: 8px; }
.sticky-steps-improved .ss-left .btn-discover:hover .btn-discover__label { transform: translateX(6px); transition: transform .18s ease; }
.sticky-steps-improved .ss-left .btn-discover__label { transition: transform .18s ease; display: inline-block; }

/* Left column now uses the shared .btn-discover styles from common.css */

/* body text */
.metrics-improved .metric .metric-text { color: var(--CG-colors-Highlights-White-80, rgba(255, 255, 255, 0.80)); font-family: var(--Typography-font-family-body, Montserrat); font-size: 18px; font-style: normal; font-weight: 400; line-height: 24px; margin-top: 8px; max-width: 410px; box-sizing: border-box; }

@media (max-width: 900px){
  .progress-rail-improved{ display:none; }
  .metrics-improved{ gap: 28px; }
  .metrics-improved .metric > [aria-hidden] { width: 56px; flex: 0 0 56px; }
}

/* Hide external borders and the .ss-left pseudo-element on medium+ small screens
    From 1440px and below we remove the decorative borders to avoid layout clipping */
@media (max-width: 1440px) {
   .ss-left::after { display: none; }
   .ss-left { border-top: none !important; border-bottom: none !important; }
   .sticky-steps-improved .container-frame::before{ display: none;}
   .ss-left-graphic.is-visible{ display: none !important;}
}