/* ==========================================================================
   Component: Process Cards
   3-col cards with emoji icons, colored top borders, optional checklist
   ========================================================================== */

.process {
    background: var(--purple-section);
    padding: 64px 0 80px;
}

.process__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.process-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 24px 24px;
    border-top: 3px solid var(--blue);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.process-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.12);
}

.process-card--pink {
    border-top-color: var(--red-light);
}

.process-card--green {
    border-top-color: var(--green);
}

.process-card__icon {
    font-size: 20px;
    margin-bottom: 24px;
}

.process-card__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    color: var(--purple-text);
    margin-bottom: 10px;
}

.process-card__desc {
    font-size: 13.6px;
    line-height: 1.625;
    color: var(--text-body);
}

.process-card__desc p {
    margin-bottom: 10px;
}

.process-card__desc p:last-child {
    margin-bottom: 0;
}

/* ---------- Checklist (expect) ---------- */

.expect {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.expect__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    color: var(--purple-deep);
    margin-bottom: 16px;
}

.expect__list {
    list-style: none;
}

.expect__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.4px;
    line-height: 1.625;
    color: #404057;
    margin-bottom: 12px;
}

.expect__item:last-child {
    margin-bottom: 0;
}

.expect__check {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 9999px;
    background: var(--red-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11.2px;
    font-weight: 700;
    margin-top: 2px;
}

@media (max-width: 768px) {
    .process__cards {
        grid-template-columns: 1fr;
    }
}