/* =========================================================
   Process Cards
   ========================================================= */

.stampli-process-cards {
    width: 100%;
	padding: 96px 0;
}

.stampli-process-cards__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

/* Shared image display: one image visible at a time. */
.stampli-process-cards__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 2.1 / 1;
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 12px;
    background: #eaf3ff;
	border-radius: 19px !important;
}

.stampli-process-cards__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity 350ms ease, visibility 350ms ease;

	background: var(--Web-UI-Light-gradient, linear-gradient(148deg, #F9FBFF 0%, #66A5F1 112.4%)) !important;
}

.stampli-process-cards__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
	border-radius: 19px !important;
	border: 1px solid var(--Brand-Pallette-Global-outline, #C0DCFB) !important;
}

/* Card-specific images are only shown in the mobile stack. */
.stampli-process-cards__picture {
    display: none;
}

.stampli-process-cards__image.is-active {
    opacity: 1;
    visibility: visible;
}


/* Section Header
   --------------------------------------------------------- */

.stampli-process-cards__header {
    max-width: 850px;
    margin: 0 auto 48px 0;
}

.stampli-process-cards__title {
    color: var(--Stampli-Navy, #1E3C74);
    font-family: 'Aeonik', 'Inter', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 42px;
	letter-spacing: -0.5px;
    margin: 0 0 24px;
}

.stampli-process-cards__subtitle {
    color: var(--Stampli-Navy, #1E3C74);
    font-family: 'Aeonik', 'Inter', sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 30px;
}

/* Cards
   --------------------------------------------------------- */

.stampli-process-cards__card {
    min-width: 0;
    cursor: pointer;
}

.stampli-process-cards__card:focus-visible {
    outline: 2px solid #1e3c74;
    outline-offset: 5px;
}

.stampli-process-cards__line {
    position: relative;
    width: 100%;
    height: 3px;
    margin-bottom: 16px;
	overflow: hidden;
    background: #b9dcff;
	border-radius: 1.5px;
}


/* Progress Line
   --------------------------------------------------------- */

.stampli-process-cards__line::before {
    content: "";
    position: absolute;
    inset: 0;

    background: #739bc6;
	border-radius: 1.5px;
    transform: scaleX(0);
    transform-origin: left center;
}


/*
 * The active card fills from left to right.
 */
.stampli-process-cards__card.is-active
.stampli-process-cards__line::before {
    animation: process-card-progress 5s linear forwards;
}

.stampli-process-cards.is-paused .stampli-process-cards__card.is-active
.stampli-process-cards__line::before {
    animation-play-state: paused;
}


@keyframes process-card-progress {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }

}

/* Content Container
   --------------------------------------------------------- */
.stampli-process-cards__content {
	max-width:244px;
}

/* Heading
   --------------------------------------------------------- */

.stampli-process-cards__heading {
    margin: 0 0 16px;
	color: var(--Stampli-Navy, #1E3C74);

	/* Web UI/Heading S */
	font-family: 'Aeonik', 'Inter', sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: 28px; /* 116.667% */
	max-width: 85%;
}


/* Description
   --------------------------------------------------------- */

.stampli-process-cards__description {
    color: var(--Stampli-Navy, #1E3C74);

	/* Web UI/Body M */
	font-family: 'Aeonik', 'Inter', sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; /* 150% */
}


/* Tablet
   --------------------------------------------------------- */

@media (max-width: 1032px) {

    .stampli-process-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        row-gap: 32px;
		max-width: 704px;
        margin: auto;
    }
	.stampli-process-cards__card {
		max-width: 340px;
	}
	
	.stampli-process-cards__header {
		margin: 0 auto 48px 0;
	}

	.stampli-process-cards__title {
		color: var(--Stampli-Navy, #1E3C74);
		font-family: 'Aeonik', 'Inter', sans-serif;
		font-size: 32px;
		line-height: 33px;
		margin: 0 0 24px;
		width: 50%;
	}
	
	.stampli-process-cards__subtitle {
		width: 75%;
	}

}


/* Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {
	
    .stampli-process-cards__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
	
	.stampli-process-cards__header {
		max-width: 100%;
		margin: 0 auto 16px;
	}

	.stampli-process-cards__title {
		font-size: 24px;
		line-height: 28px;
		margin: 0 0 16px;
		width: 75%;
	}

	.stampli-process-cards__subtitle {
		font-size: 18px;
		font-weight: 400;
		line-height: 28px;
		width: 100%;
	}
	
	.stampli-process-cards__visual {
		display: none;
	}
	.stampli-process-cards__card {
		max-width: none;
		cursor: default;
	}
	
	.stampli-process-cards__line {
		display: none;
	}	
	
	.stampli-process-cards__content:before {
		content: "";
		width: 95%;
		background: #DBEBFD;
		height: 1px;
		display: block;
		margin: 0 auto 24px;
	}
	
	.stampli-process-cards__content {
		max-width: none;
	}
	
	.stampli-process-cards__heading{
		font-size: 18px;
		line-height: 24px;
		max-width: unset;
	}
	
    .stampli-process-cards__header {
        margin-bottom: 32px;
    }

	.stampli-process-cards__picture {
		display: block;
		width: 100%;
		margin-top: 24px;
	}

	.stampli-process-cards__mobile-image {
		display: block;
		width: 100%;
		height: auto;
	}	


}
@media (prefers-reduced-motion: reduce) {
    .stampli-process-cards__image { transition: none; }
}