/**
 * Background Options (ACF-Ready)
 * ==============================
 * CSS classes for section backgrounds, controlled via ACF dropdown.
 * 
 * BACKGROUND TYPES:
 * - Solid colors: .bg-opt-white, .bg-opt-blue, .bg-opt-blue-dark, .bg-opt-orange
 * - Angled backgrounds: .bg-opt-blue-angle, .bg-opt-orange-angle, etc.
 *   (Uses ::before for angle, ::after for background color)
 * - Split backgrounds: .bg-split-blue-white, etc.
 * 
 * ANGLE GEOMETRY:
 * - Default offset: bottom: -200px (pushes angle DOWN into next section)
 * - Slider sections use LIFTED angles (see slider.css for CSS variables)
 * - Responsive adjustments at 1600px, 1200px, 768px breakpoints
 * 
 * TEXT COLOR OVERRIDES:
 * - Dark backgrounds → white text automatically
 * - Light backgrounds → dark text automatically
 */

/* =============================================================================
   BACKGROUND OPTIONS (ACF-READY)
   ============================================================================= */

/* --- Base Variables --- */
:root {
    --bg-blue-main: #006997;
    /* Brand Blue (Light) */
    --bg-blue-dark: #004664;
    /* Dark Blue */
    --bg-blue-light: #4DC3E8;
    /* Cyan accent from image */
    --bg-orange-main: #E37225;
    /* Matches CTA Orange */
    --bg-orange-smartsub: #AF481B;
    /* SmartSUB Orange (User Requested) */
    --bg-white: #FFFFFF;
}

/* --- 1. All Blue (Light/Brand) --- */
.bg-opt-blue {
    background-color: transparent;
    /* Remove direct background */
    color: #FFFFFF;
    position: relative;
    /* No z-index - prevents stacking context isolation */
}

.bg-opt-blue::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--bg-blue-main);
    z-index: 5;
    /* Background - lowest layer */
}

/* --- 2. All Blue (Dark) --- */
.bg-opt-blue-dark {
    background-color: transparent;
    /* Remove direct background */
    color: #FFFFFF;
    position: relative;
    /* No z-index - prevents stacking context isolation */
}

.bg-opt-blue-dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--bg-blue-dark);
    z-index: 5;
    /* Background - lowest layer */
}

/* --- 3. All Orange --- */
.bg-opt-orange {
    background-color: transparent;
    /* Remove direct background */
    color: #FFFFFF;
    position: relative;
    /* No z-index - prevents stacking context isolation */
}

.bg-opt-orange::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--bg-orange-main);
    z-index: 5;
    /* Background - lowest layer */
}

/* --- 4. Transparent (default) --- */
.bg-opt-white {
    background-color: transparent;
    color: inherit;
    position: relative;
    /* No z-index - prevents stacking context isolation */
}

/* --- 4b. Explicit Transparent --- */
.bg-opt-transparent {
    background-color: transparent !important;
    position: relative;
    /* No z-index - allows global grid to show through */
}

/* --- 5. Blue Angles (Light/Brand) --- */
.bg-opt-blue-angle {
    background-color: #FFFFFF;
    position: relative;
    z-index: 8;
    /* Above other backgrounds (5), below angles (10) and content (20) */
    overflow: visible !important;
    box-shadow: 0 195px 0 0 #FFFFFF;
    /* 5px less than offset to remove white line */
    margin-top: 5px;
    /* Positive gap at top */
}

.bg-opt-blue-angle::after {
    content: '';
    position: absolute;
    bottom: -200px;
    /* Push down globally - matches box-shadow */
    left: 0;
    width: 100%;
    height: calc(100% + 45vw);
    background-color: var(--bg-blue-main);
    clip-path: polygon(0% 100%, 100% 100%, 100% calc(100% - 45vw));
    z-index: 10;
    /* Angle - above backgrounds (5), below content (20) */
}

.bg-opt-blue-angle::before {
    content: '';
    position: absolute;
    bottom: -200px;
    /* Push down globally */
    left: 0;
    width: 35vw;
    /* Constant aspect ratio (Rise 25vw / Run 35vw) */
    /* Consistent across all breakpoints */
    height: calc(100% + 25vw);
    background-color: var(--bg-blue-light);
    clip-path: polygon(100% 100%, 0% calc(100% - 25vw), 0% 100%);
    z-index: 10;
    /* Angle - above backgrounds (5), below content (20) */
}

/* --- 6. Blue Angles (Dark) --- */
.bg-opt-blue-dark-angle {
    background-color: #FFFFFF;
    position: relative;
    z-index: 8;
    /* Above other backgrounds (5), below angles (10) and content (20) */
    overflow: visible !important;
    box-shadow: 0 195px 0 0 #FFFFFF;
    /* 5px less than offset to remove white line */
    margin-top: 5px;
    /* Positive gap at top */
}

.bg-opt-blue-dark-angle::after {
    content: '';
    position: absolute;
    bottom: -200px;
    /* Push down globally */
    left: 0;
    width: 100%;
    height: calc(100% + 45vw);
    background-color: var(--bg-blue-dark);
    clip-path: polygon(0% 100%, 100% 100%, 100% calc(100% - 45vw));
    z-index: 10;
    /* Angle - above backgrounds (5), below content (20) */
}

.bg-opt-blue-dark-angle::before {
    content: '';
    position: absolute;
    bottom: -200px;
    /* Push down globally */
    left: 0;
    width: 35vw;
    /* Constant aspect ratio (Rise 25vw / Run 35vw) */
    /* Consistent across all breakpoints */
    height: calc(100% + 25vw);
    background-color: var(--bg-blue-light);
    clip-path: polygon(100% 100%, 0% calc(100% - 25vw), 0% 100%);
    z-index: 10;
    /* Angle - above backgrounds (5), below content (20) */
}

/* --- 7. Orange Angles --- */
.bg-opt-orange-angle {
    background-color: #FFFFFF;
    position: relative;
    z-index: 8;
    /* Above other backgrounds (5), below angles (10) and content (20) */
    overflow: visible !important;
    box-shadow: 0 195px 0 0 #FFFFFF;
    /* 5px less than offset to remove white line */
    margin-top: 5px;
    /* Positive gap at top */
}

.bg-opt-orange-angle::after {
    content: '';
    position: absolute;
    bottom: -200px;
    /* Push down globally */
    left: 0;
    width: 100%;
    height: calc(100% + 45vw);
    background-color: var(--bg-orange-main);
    clip-path: polygon(0% 100%, 100% 100%, 100% calc(100% - 45vw));
    z-index: 10;
    /* Angle - above backgrounds (5), below content (20) */
}

.bg-opt-orange-angle::before {
    content: '';
    position: absolute;
    bottom: -200px;
    /* Push down globally */
    left: 0;
    width: 35vw;
    /* Constant aspect ratio (Rise 25vw / Run 35vw) */
    /* Consistent across all breakpoints */
    height: calc(100% + 25vw);
    background-color: var(--bg-blue-light);
    clip-path: polygon(100% 100%, 0% calc(100% - 25vw), 0% 100%);
    z-index: 10;
    /* Angle - above backgrounds (5), below content (20) */
}

/* --- 8. SmartSUB Orange (Solid) --- */
.bg-opt-smartsub-orange {
    background-color: transparent;
    /* Remove direct background */
    color: #FFFFFF;
    position: relative;
    /* No z-index - prevents stacking context isolation */
}

.bg-opt-smartsub-orange::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--bg-orange-smartsub);
    z-index: 5;
    /* Background - lowest layer */
}

/* --- 9. SmartSUB Orange Angles --- */
.bg-opt-smartsub-orange-angle {
    background-color: #FFFFFF;
    position: relative;
    z-index: 8;
    /* Above other backgrounds (5), below angles (10) and content (20) */
    overflow: visible !important;
    box-shadow: 0 195px 0 0 #FFFFFF;
    /* 5px less than offset to remove white line */
    margin-top: 5px;
    /* Positive gap at top */
}

.bg-opt-smartsub-orange-angle::after {
    content: '';
    position: absolute;
    bottom: -200px;
    /* Push down globally */
    left: 0;
    width: 100%;
    height: calc(100% + 45vw);
    background-color: var(--bg-orange-smartsub);
    clip-path: polygon(0% 100%, 100% 100%, 100% calc(100% - 45vw));
    z-index: 10;
    /* Angle - above backgrounds (5), below content (20) */
}

.bg-opt-smartsub-orange-angle::before {
    content: '';
    position: absolute;
    bottom: -200px;
    /* Push down globally */
    left: 0;
    width: 35vw;
    /* Constant aspect ratio (Rise 25vw / Run 35vw) */
    /* Consistent across all breakpoints */
    height: calc(100% + 25vw);
    background-color: var(--bg-blue-light);
    clip-path: polygon(100% 100%, 0% calc(100% - 25vw), 0% 100%);
    z-index: 10;
    /* Angle - above backgrounds (5), below content (20) */
}

/* =============================================================================
   SPLIT-COLOR BACKGROUNDS (Product Page Two-Column Table)
   Top half: Color, Bottom half: White
   Isometric grid (z-index: 6) appears above color pseudo-element (z-index: 5)
   ============================================================================= */

/* --- 10. Split Blue/White --- */
.bg-split-blue-white {
    background-color: #FFFFFF;
    position: relative;
}

.bg-split-blue-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: var(--bg-blue-main);
    z-index: 5;
    /* Background layer - isometric grid (z:6) will be above this */
}

/* --- 11. Split Dark Blue/White --- */
.bg-split-blue-dark-white {
    background-color: #FFFFFF;
    position: relative;
}

.bg-split-blue-dark-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: var(--bg-blue-dark);
    z-index: 5;
}

/* --- 12. Split Orange/White --- */
.bg-split-orange-white {
    background-color: #FFFFFF;
    position: relative;
}

.bg-split-orange-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: var(--bg-orange-main);
    z-index: 5;
}

/* --- 13. Split SmartSUB Orange/White --- */
.bg-split-smartsub-orange-white {
    background-color: #FFFFFF;
    position: relative;
}

.bg-split-smartsub-orange-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: var(--bg-orange-smartsub);
    z-index: 5;
}

/* 
 * White Line Fix: Box-shadow extends 5px MORE than the bottom offset
 * so white coverage fully reaches the angle edges with no gap.
 * This extra 5px is added in each breakpoint's box-shadow value.
 */

/* --- Responsive Adjustments for Angles --- */
/* 
 * Key: bottom offset and box-shadow must match at each breakpoint
 * so white coverage never extends past the angle bottom.
 */

/* Ultra Large screens (2500px+): Maximum offset */
@media (min-width: 2500px) {

    .bg-opt-blue-angle::after,
    .bg-opt-blue-dark-angle::after,
    .bg-opt-orange-angle::after,
    .bg-opt-smartsub-orange-angle::after,
    .bg-opt-blue-angle::before,
    .bg-opt-blue-dark-angle::before,
    .bg-opt-orange-angle::before,
    .bg-opt-smartsub-orange-angle::before {
        bottom: -400px;
    }

    .bg-opt-blue-angle,
    .bg-opt-blue-dark-angle,
    .bg-opt-blue-dark-angle,
    .bg-opt-orange-angle,
    .bg-opt-smartsub-orange-angle {
        box-shadow: 0 395px 0 0 #FFFFFF;
    }
}

/* Extra Large screens (1600px+): Push angles down significantly */
@media (min-width: 1600px) and (max-width: 2499px) {

    .bg-opt-blue-angle::after,
    .bg-opt-blue-dark-angle::after,
    .bg-opt-blue-dark-angle::after,
    .bg-opt-orange-angle::after,
    .bg-opt-smartsub-orange-angle::after,
    .bg-opt-blue-angle::before,
    .bg-opt-blue-dark-angle::before,
    .bg-opt-orange-angle::before,
    .bg-opt-smartsub-orange-angle::before {
        bottom: -350px;
    }

    .bg-opt-blue-angle,
    .bg-opt-blue-dark-angle,
    .bg-opt-blue-dark-angle,
    .bg-opt-orange-angle,
    .bg-opt-smartsub-orange-angle {
        box-shadow: 0 345px 0 0 #FFFFFF;
    }
}

/* Large screens (1200px-1599px): Intermediate step */
@media (min-width: 1200px) and (max-width: 1599px) {

    .bg-opt-blue-angle::after,
    .bg-opt-blue-dark-angle::after,
    .bg-opt-orange-angle::after,
    .bg-opt-smartsub-orange-angle::after,
    .bg-opt-blue-angle::before,
    .bg-opt-blue-dark-angle::before,
    .bg-opt-orange-angle::before,
    .bg-opt-smartsub-orange-angle::before {
        bottom: -300px;
    }

    .bg-opt-blue-angle,
    .bg-opt-blue-dark-angle,
    .bg-opt-orange-angle,
    .bg-opt-smartsub-orange-angle {
        box-shadow: 0 295px 0 0 #FFFFFF;
    }
}

/* Default (769px-1199px): Standard offset - defined in base rules */
/* bottom: -200px, box-shadow: 0 200px 0 0 #FFFFFF */

/* Tablet (768px and below): Reduce offset */
@media (max-width: 768px) {

    .bg-opt-blue-angle::after,
    .bg-opt-blue-dark-angle::after,
    .bg-opt-orange-angle::after,
    .bg-opt-smartsub-orange-angle::after {
        bottom: -100px;
    }

    .bg-opt-blue-angle::before,
    .bg-opt-blue-dark-angle::before,
    .bg-opt-orange-angle::before,
    .bg-opt-smartsub-orange-angle::before {
        bottom: -100px;
    }

    .bg-opt-blue-angle,
    .bg-opt-blue-dark-angle,
    .bg-opt-orange-angle,
    .bg-opt-smartsub-orange-angle {
        box-shadow: 0 95px 0 0 #FFFFFF;
    }
}

/* Mobile (480px and below): Minimal offset */
@media (max-width: 480px) {

    .bg-opt-blue-angle::after,
    .bg-opt-blue-dark-angle::after,
    .bg-opt-orange-angle::after,
    .bg-opt-smartsub-orange-angle::after,
    .bg-opt-blue-angle::before,
    .bg-opt-blue-dark-angle::before,
    .bg-opt-orange-angle::before,
    .bg-opt-smartsub-orange-angle::before {
        bottom: -50px;
    }

    .bg-opt-blue-angle,
    .bg-opt-blue-dark-angle,
    .bg-opt-orange-angle,
    .bg-opt-smartsub-orange-angle {
        box-shadow: 0 45px 0 0 #FFFFFF;
    }
}

/* Ensure section content stays above overflowing angle backgrounds */
.section-container .content-container {
    position: relative;
    z-index: 20;
    /* Content - above everything */
}

/* Cyan width now consistent globally - no responsive changes needed */

/* =============================================================================
   TEXT COLOR OVERRIDES
   ============================================================================= */

/* 
 * GROUP A: Dark Backgrounds (Blue, Blue-Dark, Orange)
 * Rule: Force all text to WHITE.
 * EXCEPTION: Do not force buttons to white if they have their own styling.
 */
.bg-opt-blue h1,
.bg-opt-blue h2,
.bg-opt-blue h3,
.bg-opt-blue h4,
.bg-opt-blue h5,
.bg-opt-blue h6,
.bg-opt-blue p,
.bg-opt-blue li,
.bg-opt-blue span,
.bg-opt-blue a:not(.cta-button):not(.button):not(.btn),
.bg-opt-blue-dark h1,
.bg-opt-blue-dark h2,
.bg-opt-blue-dark h3,
.bg-opt-blue-dark h4,
.bg-opt-blue-dark h5,
.bg-opt-blue-dark h6,
.bg-opt-blue-dark p,
.bg-opt-blue-dark li,
.bg-opt-blue-dark span,
.bg-opt-blue-dark a:not(.cta-button):not(.button):not(.btn),
.bg-opt-orange h1,
.bg-opt-orange h2,
.bg-opt-orange h3,
.bg-opt-orange h4,
.bg-opt-orange h5,
.bg-opt-orange h6,
.bg-opt-orange p,
.bg-opt-orange li,
.bg-opt-orange span,
.bg-opt-orange a:not(.cta-button):not(.button):not(.btn),
.bg-opt-smartsub-orange h1,
.bg-opt-smartsub-orange h2,
.bg-opt-smartsub-orange h3,
.bg-opt-smartsub-orange h4,
.bg-opt-smartsub-orange h5,
.bg-opt-smartsub-orange h6,
.bg-opt-smartsub-orange p,
.bg-opt-smartsub-orange li,
.bg-opt-smartsub-orange span,
.bg-opt-smartsub-orange a:not(.cta-button):not(.button):not(.btn),
.bg-opt-smartsub-orange h1,
.bg-opt-smartsub-orange h2,
.bg-opt-smartsub-orange h3,
.bg-opt-smartsub-orange h4,
.bg-opt-smartsub-orange h5,
.bg-opt-smartsub-orange h6,
.bg-opt-smartsub-orange p,
.bg-opt-smartsub-orange li,
.bg-opt-smartsub-orange span,
.bg-opt-smartsub-orange a:not(.cta-button):not(.button):not(.btn) {
    color: #FFFFFF !important;
}

/* Feature Grid Bullets on Dark Backgrounds -> White */
.bg-opt-blue .feature-grid-item-body li::before,
.bg-opt-blue-dark .feature-grid-item-body li::before,
.bg-opt-orange .feature-grid-item-body li::before,
.bg-opt-smartsub-orange .feature-grid-item-body li::before {
    color: #FFFFFF !important;
}

/* Bottom Box Header on Dark Backgrounds -> White */
.bg-opt-blue .bottom-box-header,
.bg-opt-blue-dark .bottom-box-header,
.bg-opt-orange .bottom-box-header,
.bg-opt-smartsub-orange .bottom-box-header {
    color: #FFFFFF !important;
}

/* Slider Arrows on Dark Backgrounds -> White */
.bg-opt-blue .slider-nav-btn,
.bg-opt-blue-dark .slider-nav-btn,
.bg-opt-orange .slider-nav-btn,
.bg-opt-smartsub-orange .slider-nav-btn {
    color: #FFFFFF !important;
}

.bg-opt-blue .slider-nav-btn:hover,
.bg-opt-blue-dark .slider-nav-btn:hover,
.bg-opt-orange .slider-nav-btn:hover,
.bg-opt-smartsub-orange .slider-nav-btn:hover {
    background: #FFFFFF;
    color: var(--bg-blue-main);
    /* Reverse to blue on white hover */
}


/* 
 * GROUP B: Light/Transparent Backgrounds (White, Angles)
 * Rule: Force text to BRAND COLORS (Dark Blue, Cyan, Grey).
 * This ensures consistency even if a parent container set color to white.
 */

/* General Text Colors for Angles */
.bg-opt-blue-angle h1,
.bg-opt-blue-angle h3,
.bg-opt-blue-dark-angle h1,
.bg-opt-blue-dark-angle h3,
.bg-opt-orange-angle h1,
.bg-opt-orange-angle h3,
.bg-opt-smartsub-orange-angle h1,
.bg-opt-smartsub-orange-angle h3 {
    color: #186AA5 !important;
}

.bg-opt-blue-angle h2,
.bg-opt-blue-dark-angle h2,
.bg-opt-orange-angle h2,
.bg-opt-smartsub-orange-angle h2 {
    color: #00A6DD !important;
}

.bg-opt-blue-angle p,
.bg-opt-blue-angle li,
.bg-opt-blue-angle span,
.bg-opt-blue-angle a:not(.cta-button):not(.button):not(.btn),
.bg-opt-blue-dark-angle p,
.bg-opt-blue-dark-angle li,
.bg-opt-blue-dark-angle span,
.bg-opt-blue-dark-angle a:not(.cta-button):not(.button):not(.btn),
.bg-opt-orange-angle p,
.bg-opt-orange-angle li,
.bg-opt-orange-angle span,
.bg-opt-orange-angle a:not(.cta-button):not(.button):not(.btn),
.bg-opt-smartsub-orange-angle p,
.bg-opt-smartsub-orange-angle li,
.bg-opt-smartsub-orange-angle span,
.bg-opt-smartsub-orange-angle a:not(.cta-button):not(.button):not(.btn) {
    color: #626467 !important;
}

/* Feature Grid Bullets in Angles -> Brand Cyan */
.bg-opt-blue-angle .feature-grid-item-body li::before,
.bg-opt-blue-dark-angle .feature-grid-item-body li::before,
.bg-opt-orange-angle .feature-grid-item-body li::before,
.bg-opt-smartsub-orange-angle .feature-grid-item-body li::before {
    color: #00A6DD !important;
}

/* Slider and Feature Grid specific overrides removed - no longer needed */

/* Feature Grid Items in Angles -> WHITE Text */
.bg-opt-blue-angle .feature-grid-item-header,
.bg-opt-blue-angle .feature-grid-item-subheader,
.bg-opt-blue-angle .feature-grid-item-body li,
.bg-opt-blue-dark-angle .feature-grid-item-header,
.bg-opt-blue-dark-angle .feature-grid-item-subheader,
.bg-opt-blue-dark-angle .feature-grid-item-body li,
.bg-opt-orange-angle .feature-grid-item-header,
.bg-opt-orange-angle .feature-grid-item-subheader,
.bg-opt-orange-angle .feature-grid-item-body li,
.bg-opt-smartsub-orange-angle .feature-grid-item-header,
.bg-opt-smartsub-orange-angle .feature-grid-item-subheader,
.bg-opt-smartsub-orange-angle .feature-grid-item-body li {
    color: #FFFFFF !important;
}

/* Single Image Text Bullets in Angles -> Brand Blue (Match Headers) */
.bg-opt-blue-angle .single-image-text-item-number,
.bg-opt-blue-dark-angle .single-image-text-item-number,
.bg-opt-orange-angle .single-image-text-item-number,
.bg-opt-smartsub-orange-angle .single-image-text-item-number {
    color: #186AA5 !important;
}



/* 
 * GROUP D: Slider Section Card Exceptions
 * Rule: Valid inside BOTH Dark and Light backgrounds.
 * Always force Brand Colors inside the white card.
 */
.bg-opt-blue .slider-section-card .slider-card-title,
.bg-opt-blue-dark .slider-section-card .slider-card-title,
.bg-opt-orange .slider-section-card .slider-card-title,
.bg-opt-smartsub-orange .slider-section-card .slider-card-title {
    color: #383838 !important;
}

.bg-opt-blue .slider-section-card .slider-card-body,
.bg-opt-blue-dark .slider-section-card .slider-card-body,
.bg-opt-orange .slider-section-card .slider-card-body,
.bg-opt-smartsub-orange .slider-section-card .slider-card-body,
.bg-opt-blue .slider-section-card p,
.bg-opt-blue-dark .slider-section-card p,
.bg-opt-orange .slider-section-card p,
.bg-opt-smartsub-orange .slider-section-card p {
    color: #666666 !important;
}

/* 
 * GROUP E: Comparison Table Exceptions
 * Rule: Valid inside BOTH Dark and Light backgrounds.
 * Always force Brand Colors inside the comparison table to prevent white text override.
 * User Request: Col 1 = White, Col 2 = Grey, Col 3 = Blue.
 */

/* Ensure Comparison Table sits ON TOP of slider white background to cover gaps */
/* Removed - handled globally in styles.css via .slider-section + .section-container */
/* .comparison-table-section {
    position: relative;
    z-index: 20;
} */

/* Column 1 -> White */
.bg-opt-blue .comparison-table-desktop .comparison-table-col1,
.bg-opt-blue-dark .comparison-table-desktop .comparison-table-col1,
.bg-opt-orange .comparison-table-desktop .comparison-table-col1,
.bg-opt-smartsub-orange .comparison-table-desktop .comparison-table-col1 {
    color: #FFFFFF !important;
}

/* Column 2 -> Standard Grey */
.bg-opt-blue .comparison-table-desktop .comparison-table-col2,
.bg-opt-blue-dark .comparison-table-desktop .comparison-table-col2,
.bg-opt-orange .comparison-table-desktop .comparison-table-col2,
.bg-opt-smartsub-orange .comparison-table-desktop .comparison-table-col2,
.bg-opt-blue .comparison-table-card-col2 p,
.bg-opt-blue-dark .comparison-table-card-col2 p,
.bg-opt-orange .comparison-table-card-col2 p,
.bg-opt-smartsub-orange .comparison-table-card-col2 p {
    color: #626467 !important;
}

/* Column 2 Header (Mobile) -> Grey or Specific? Keeping Grey/Black for consistency with col2 */
.bg-opt-blue .comparison-table-card-label,
.bg-opt-blue-dark .comparison-table-card-label,
.bg-opt-orange .comparison-table-card-label,
.bg-opt-smartsub-orange .comparison-table-card-label {
    color: #626467 !important;
}

/* Column 3 -> Brand Blue */
.bg-opt-blue .comparison-table-desktop .comparison-table-col3,
.bg-opt-blue-dark .comparison-table-desktop .comparison-table-col3,
.bg-opt-orange .comparison-table-desktop .comparison-table-col3,
.bg-opt-smartsub-orange .comparison-table-desktop .comparison-table-col3,
.bg-opt-blue .comparison-table-card-col3 p,
.bg-opt-blue-dark .comparison-table-card-col3 p,
.bg-opt-orange .comparison-table-card-col3 p,
.bg-opt-smartsub-orange .comparison-table-card-col3 p {
    color: #006997 !important;
}

/* Override for Headers (th span) to prevent them turning white on dark section backgrounds */
/* Override for Headers (th span) to prevent them turning white on dark section backgrounds */
.bg-opt-blue .comparison-table th.comparison-table-col2 span,
.bg-opt-blue-dark .comparison-table th.comparison-table-col2 span,
.bg-opt-orange .comparison-table th.comparison-table-col2 span,
.bg-opt-smartsub-orange .comparison-table th.comparison-table-col2 span {
    color: #626467 !important;
}

.bg-opt-blue .comparison-table th.comparison-table-col3 span,
.bg-opt-blue-dark .comparison-table th.comparison-table-col3 span,
.bg-opt-orange .comparison-table th.comparison-table-col3 span,
.bg-opt-smartsub-orange .comparison-table th.comparison-table-col3 span {
    color: #006997 !important;
}