/* ==========================================================================
   CarAsset — Business / GROW (grow.css)
   ========================================================================== */

.ca-grow {
    background-color: var(--ca-color-extra-light-gray);
}

.ca-grow__header {
    max-width: 68ch;
}

.ca-grow__title {
    color: var(--ca-color-navy);
    margin-block: var(--ca-space-3);
    max-width: 16ch;
}

.ca-grow__description {
    color: var(--ca-color-dark-gray);
}

.ca-grow__caption {
    color: var(--ca-color-slate);
    margin-top: var(--ca-space-10);
}

/* -------------------------------------------------------------------------
   JOURNEY — visual pertumbuhan berjenjang (bukan tiga kartu identik)
   ------------------------------------------------------------------------- */
.ca-grow__journey {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: var(--ca-space-8);
    margin-top: var(--ca-space-6);
    padding-bottom: var(--ca-space-8);
}

.ca-grow__track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--ca-color-light-gray) 0,
        var(--ca-color-light-gray) 10px,
        transparent 10px,
        transparent 18px
    );
}

.ca-grow__stage {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-2);
    padding: var(--ca-space-5) var(--ca-space-6);
    border-radius: var(--ca-radius-lg);
    background-color: var(--ca-color-white);
    border: 1px solid var(--ca-border-color);
}

.ca-grow__stage-marker {
    position: absolute;
    top: -8px;
    left: var(--ca-space-6);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--ca-color-white);
    border: 3px solid var(--ca-color-navy);
}

.ca-grow__stage-eyebrow {
    color: var(--ca-color-slate);
}

.ca-grow__stage-title {
    margin: 0;
    max-width: 22ch;
}

/* Tahap 1 — paling sederhana, posisi terendah */
.ca-grow__stage--1 {
    margin-top: var(--ca-space-24);
}

/* Tahap 2 — lebih aktif */
.ca-grow__stage--2 {
    margin-top: var(--ca-space-12);
    background-color: var(--ca-bg-green-soft);
    border-color: transparent;
}

.ca-grow__stage--2 .ca-grow__stage-marker {
    border-color: var(--ca-color-green);
}

/* Tahap 3 — aksen gold, paling menonjol */
.ca-grow__stage--3 {
    margin-top: 0;
    background-color: var(--ca-bg-gold-soft);
    border-color: transparent;
    box-shadow: var(--ca-shadow-sm);
}

.ca-grow__stage--3 .ca-grow__stage-marker {
    border-color: var(--ca-color-gold);
}

.ca-grow__stage--3 .ca-grow__stage-title {
    color: var(--ca-color-navy);
}

.ca-grow__disclaimer {
    max-width: 70ch;
    margin-top: var(--ca-space-10);
}

.ca-grow__cta {
    margin-top: var(--ca-space-6);
}

/* Desktop-small safety */
@media (max-width: 1180px) {
    .ca-grow__journey {
        flex-wrap: wrap;
        gap: var(--ca-space-6);
    }

    .ca-grow__stage,
    .ca-grow__stage--1,
    .ca-grow__stage--2,
    .ca-grow__stage--3 {
        flex: 1 1 260px;
        margin-top: 0;
    }
}