/*!
 |------------------------------------------------------------------
 | growth-system.css — "Your Growth System" six-module grid (navy band).
 |------------------------------------------------------------------
 |
 | Owns .raas-growth__* only.  Cards sit on the navy section as quiet
 | translucent surfaces with a blue icon chip and a muted index number;
 | the green dot bullets echo the brand accent.
 */

.raas-growth__head {
    max-width: 44rem;
    margin-bottom: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
}

.raas-growth__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .raas-growth__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .raas-growth__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }
}

.raas-growth__card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem 1.5rem 1.375rem;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--z-radius);
}

.raas-growth__card:hover {
    border-color: rgba(95, 168, 255, .5);
    background: rgba(255, 255, 255, .07);
}

.raas-growth__num {
    position: absolute;
    top: 1.375rem;
    right: 1.5rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .35);
}

.raas-growth__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1.125rem;
    border-radius: 12px;
    background: rgba(31, 111, 255, .2);
    border: 1px solid rgba(95, 168, 255, .35);
    color: var(--z-blue-soft);
    transition: background-color .25s ease;
}

.raas-growth__card:hover .raas-growth__icon {
    background: rgba(31, 111, 255, .32);
}

.raas-growth__icon svg {
    display: block;
    width: 21px;
    height: 21px;
}

.raas-growth__card h3 {
    margin: 0 0 .75rem;
    font-size: 1.125rem;
    color: #FFFFFF;
}

.raas-growth__list {
    display: grid;
    gap: .4375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.raas-growth__list li {
    position: relative;
    padding-left: 1.125rem;
    font-size: .9375rem;
    color: var(--z-navy-soft);
}

.raas-growth__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5625em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--z-green);
}

/* Stagger the scroll reveal across the six cards. */
.raas-js .raas-growth__card:nth-child(2) { transition-delay: .08s; }
.raas-js .raas-growth__card:nth-child(3) { transition-delay: .16s; }
.raas-js .raas-growth__card:nth-child(4) { transition-delay: .24s; }
.raas-js .raas-growth__card:nth-child(5) { transition-delay: .32s; }
.raas-js .raas-growth__card:nth-child(6) { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
    .raas-growth__card {
        transition: none;
    }
}