/* =============================================
   BENEFITS SECTION - PARTNERS
   Desktop: title left column + 2x2 grid right column
   Cards divided by a cross (vertical + horizontal line)
   ============================================= */

.benefits-partners {
    background-color: rgba(250, 250, 250, 0.55);
    padding: 96px 20px;
    position: relative;
}

/* ✅ Standard site container — was max-width: 1400px */
/* Container now drives the outer 2-column layout */
.benefits-partners-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;  /* Title narrow, grid wide */
    gap: 80px;
    align-items: start;
}

/* =============================================
   SECTION TITLE — left column
   ============================================= */

.benefits-partners-title {
    font-family: 'Archia', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 2.5rem; /* 40px — was 45px (column is narrower now) */
    color: #000000;
    margin: 0;
    padding-bottom: 20px;
    position: relative;
    line-height: 1.2;
}

/* Accent line under title — fixed width reads better in narrow column */
.benefits-partners-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px; /* was 5% — too small to be visible in narrow column */
    height: 4px;
    background: #01e55f;
    border-radius: 0;
}

/* =============================================
   BENEFITS GRID — 2x2 with cross dividers
   ============================================= */

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 56px;
    position: relative;
}

/* Vertical divider — runs through the middle column gap */
.benefits-grid::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #d4d4d4;
    transform: translateX(-50%);
}

/* ✅ Horizontal divider — runs through the middle row gap (was missing) */
.benefits-grid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #d4d4d4;
    transform: translateY(-50%);
}

/* =============================================
   BENEFIT CARD
   ============================================= */

.benefit-card {
    position: relative;
    z-index: 1; /* Sits above the dividers */
}

/* Icon Box */
.benefit-icon {
    width: 44px;
    height: 44px;
    background: #03e55f;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.benefit-icon svg {
    width: 16px;
    height: 16px;
}

/* Card Title */
.benefit-card-title {
    font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 1.625rem; /* 26px — was 33px (cards are ~370px wide now) */
    color: #1e1e23;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

/* Card Description */
.benefit-card-description {
    font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 1.125rem; /* 18px — was 23px */
    color: #1e1e23;
    line-height: 1.5;
    margin: 0;
}

/* =============================================
   RESPONSIVE DESIGN
   ============================================= */

/* Tablet — stack outer layout (title row, grid row); keep 2x2 grid */
@media (max-width: 1024px) {
    .benefits-partners {
        padding: 80px 20px;
    }

    .benefits-partners-container {
        grid-template-columns: 1fr; /* Stack title + grid */
        gap: 48px;
    }

    .benefits-partners-title {
        font-size: 2.25rem;
        padding-bottom: 18px;
    }

    .benefits-grid {
        gap: 40px 48px;
    }

    .benefit-card-title {
        font-size: 1.5rem;
    }

    .benefit-card-description {
        font-size: 1.0625rem;
    }
}

/* Mobile — single column; cards stack with horizontal lines between */
@media (max-width: 768px) {
    .benefits-partners {
        padding: 60px 20px;
    }

    .benefits-partners-container {
        gap: 40px;
    }

    .benefits-partners-title {
        font-size: 1.875rem;
        padding-bottom: 16px;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 0; /* Cards now use border-bottom instead of grid gap */
    }

    /* Cross dividers don't make sense in a single column */
    .benefits-grid::after,
    .benefits-grid::before {
        display: none;
    }

    /* Horizontal divider between stacked cards */
    .benefit-card {
        padding-bottom: 32px;
        margin-bottom: 32px;
        border-bottom: 1px solid #d4d4d4;
    }

    .benefit-card:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
    }

    .benefit-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 18px;
    }

    .benefit-card-title {
        font-size: 1.375rem;
    }

    .benefit-card-description {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .benefits-partners-title {
        font-size: 1.625rem;
    }

    .benefit-card-title {
        font-size: 1.25rem;
    }

    .benefit-card-description {
        font-size: 0.9375rem;
    }
}