/* ---------------------------------------------------------
   BLOCK: GAP STATEMENT (All-White, Fluid Spacing)
   --------------------------------------------------------- */
.gap-statement {
    position: relative;
}

.gap__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto clamp(40px, 6vw, 60px); 
}

.gap__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px); 
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .gap__grid { grid-template-columns: 1fr 1fr; }
}

.gap__col {
    background: var(--color-white);
    border: 1px solid rgba(8, 24, 50, 0.08); 
    border-radius: 20px;
    padding: clamp(28px, 5vw, 40px) clamp(20px, 5vw, 32px);
    box-shadow: 0 10px 40px rgba(8, 24, 50, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gap__col:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(8, 24, 50, 0.06);
}

/* 🚨 REFACTORED: Typography removed. Inherits from .heading-3 */
.gap__col-title {
    margin: 0 0 clamp(20px, 4vw, 32px) 0;
    padding-bottom: clamp(16px, 3vw, 20px);
    border-bottom: 1px solid rgba(8, 24, 50, 0.08);
}

.gap__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 3vw, 20px);
}

.gap__list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-family: var(--font-tagline);
    font-size: clamp(0.95rem, 2vw, 1.05rem); 
    font-weight: 600;
    color: #4b5563;
    line-height: 1.5;
}

.gap__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Color Modifiers for Impact */
.gap__col--cost .gap__col-title { color: #dc2626; }
.gap__col--cost .gap__icon { color: #dc2626; } 

.gap__col--investment .gap__col-title { color: var(--color-black); }
.gap__col--investment .gap__icon { color: var(--color-yellow); }
.gap__col--investment { 
    background: rgba(253, 211, 44, 0.02); 
    border-color: rgba(253, 211, 44, 0.3);
}

h3.gap__col-title.heading-3.text-center {
    text-align: center;
}