/* ==========================================================================
   MT - Process Steps
   ========================================================================== */

.mtfe-ps {
    --ps-cols: 4;
    --ps-gap: 24px;
    --ps-radius: 22px;
    --ps-card: #FFFFFF;
    --ps-ink: #191326;
    --ps-muted: #5F566B;
    --ps-accent: #2340D8;
    --ps-light: #2340D8;
    --ps-number: #DCE3F6;
    --ps-hl-bg: #191326;

    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--ps-cols), minmax(0, 1fr));
    gap: var(--ps-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

/* dashed connector running through the icon badges */
.mtfe-ps.has-connector::before {
    content: "";
    position: absolute;
    left: calc(100% / var(--ps-cols) / 2);
    right: calc(100% / var(--ps-cols) / 2);
    top: 58px;
    border-top: 2px dashed var(--ps-light);
    opacity: 0.55;
    z-index: 0;
}

.mtfe-ps__card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 28px 26px 26px;
    border-radius: var(--ps-radius);
    background: var(--ps-card);
    border: 1px solid rgba(25, 19, 38, 0.07);
    box-shadow: 0 18px 40px -30px rgba(25, 19, 38, 0.45);
    transition: transform 0.3s cubic-bezier(.2, .7, .2, 1), box-shadow 0.3s ease;
    overflow: hidden;
}
.mtfe-ps__card::after { /* accent bar that grows on hover */
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--ps-light), var(--ps-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.mtfe-ps__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 50px -28px rgba(25, 19, 38, 0.55);
}
.mtfe-ps__card:hover::after { transform: scaleX(1); }

.mtfe-ps__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}
.mtfe-ps__icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: var(--ps-accent);
    color: #FFFFFF;
    font-size: 22px;
    box-shadow: 0 0 0 6px var(--ps-card), 0 12px 24px -12px rgba(35, 64, 216, 0.8);
    transition: transform 0.3s ease;
}
.mtfe-ps__icon svg { width: 24px; height: 24px; fill: #FFFFFF; }
.mtfe-ps__icon i { color: #FFFFFF; }
.mtfe-ps__card:hover .mtfe-ps__icon { transform: rotate(-6deg) scale(1.05); }

.mtfe-ps__num {
    font-family: "Archivo", "Source Sans 3", Arial, sans-serif;
    font-size: 54px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ps-number);
}

.mtfe-ps .mtfe-ps__title {
    margin: 0 0 10px;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ps-ink);
}
.mtfe-ps__text {
    margin: 0 0 22px;
    font-size: 15.5px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--ps-muted);
}
.mtfe-ps__meta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 30px;
    background: rgba(35, 64, 216, 0.08);
    color: var(--ps-accent);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}
.mtfe-ps__meta svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* highlighted card */
.mtfe-ps__card.is-highlight {
    background: var(--ps-hl-bg);
    border-color: transparent;
    box-shadow: 0 26px 50px -26px rgba(25, 19, 38, 0.8);
}
.mtfe-ps__card.is-highlight .mtfe-ps__icon { box-shadow: 0 0 0 6px var(--ps-hl-bg), 0 12px 24px -12px rgba(0, 0, 0, 0.6); }
.mtfe-ps__card.is-highlight .mtfe-ps__num { -webkit-text-stroke-color: rgba(255, 255, 255, 0.22); }
.mtfe-ps .mtfe-ps__card.is-highlight .mtfe-ps__title { color: #FFFFFF; }
.mtfe-ps__card.is-highlight .mtfe-ps__text { color: rgba(255, 255, 255, 0.78); }
.mtfe-ps__card.is-highlight .mtfe-ps__meta { background: rgba(201, 211, 247, 0.14); color: #C9D3F7; }

/* long badge labels (years) */
.mtfe-ps__num.is-label { font-size: 40px; }

@media (max-width: 1024px) {
    .mtfe-ps.has-connector::before { display: none; }
}
@media (max-width: 600px) {
    .mtfe-ps__card { padding: 24px 22px 22px; }
    .mtfe-ps__num { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .mtfe-ps__card, .mtfe-ps__card::after, .mtfe-ps__icon { transition: none; }
}