/* ==============================================================================
   COURSE PAGES - Mobile-First Design System Integration
   Applies design tokens to course hero, track record, and SHSAT pages

   🎯 SINGLE SOURCE OF TRUTH FOR .hero-card STYLES
   This file is the ONLY place where .hero-card / track record styles exist.
   Plugin CSS (/plugins/nyc-stem-courses/assets/css/course-styles.css) has been cleaned.

   Version: 2025-11-20
   Loads at priority: 1000 (overrides plugin CSS which loads at priority 10)
   Cache busting: Uses filemtime() for automatic version on file changes
   ============================================================================== */

/* ==============================================================================
   COURSE HERO - Mobile First
   ============================================================================== */

.course-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    min-height: auto;
    padding: var(--space-6) 0; /* Vertical only - horizontal padding on container */
    position: relative;
    overflow: hidden;
}

/* Remove decorative pseudo-element on mobile for cleaner look */
.course-hero::before {
    display: none;
}

.hero-container {
    max-width: var(--container-xl);
    width: 100%;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

@media (min-width: 768px) {
    .hero-container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}

/* Hero Content - Use display: contents to allow element reordering */
.hero-content {
    display: contents !important; /* Makes children direct children of hero-container */
}

/* Order 1: Title - Left aligned, full width */
.course-hero .hero-content h1,
.hero-content h1,
.course-hero h1 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    color: white;
    margin-bottom: var(--space-4);
    line-height: var(--leading-tight);
    order: 1 !important;
    width: 100% !important;
    text-align: left !important;
}

/* Order 2: Excerpt - Left aligned, full width */
.hero-tagline,
.hero-excerpt,
.hero-content > p,
.course-hero .hero-content > p {
    font-size: var(--text-lg) !important;
    font-weight: var(--font-normal) !important; /* Match card stats - 400 */
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-4);
    line-height: var(--leading-relaxed);
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 2 !important;
    width: 100% !important;
    text-align: left !important;
}

/* Order 3: Track Record Stats - Inline bullets */
.hero-track-record {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    width: 100% !important;
    order: 3 !important;
}

.track-record-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-base);
    line-height: 1.4;
}

.track-record-item::before {
    content: "✓";
    color: var(--color-orange, #FF7F07);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
}

.track-number {
    color: var(--color-orange, #FF7F07);
    font-weight: var(--font-bold);
}

@media (min-width: 768px) {
    .hero-track-record {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-3) var(--space-6);
    }
}

/* Order 4: Mini Stats - Left aligned */
.hero-stats-mini {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    order: 4 !important;
    width: 100% !important;
}

.stat-mini {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
}

.stat-mini-icon {
    width: 20px;
    height: 20px;
    color: var(--color-accent-light);
    flex-shrink: 0;
}

.stat-mini-icon svg {
    width: 100%;
    height: 100%;
}

.stat-mini-text {
    display: flex;
    flex-direction: column;
}

.stat-mini-number {
    font-size: var(--text-base); /* 16px mobile - increased from 14px */
    font-weight: var(--font-bold);
    color: white;
    line-height: 1.3;
}

.stat-mini-label {
    font-size: var(--text-sm); /* 14px mobile - increased from 12px */
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

/* Order 5: CTA Buttons - Left aligned */
.cta-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--space-3);
    order: 5 !important;
    margin-top: var(--space-2) !important;
    width: 100% !important;
}

.cta-group .nyc-stem-inquiry-btn,
.cta-group a.nyc-stem-inquiry-btn {
    width: 100%;
    max-width: 280px;
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    text-align: center;
    border-radius: var(--radius-md);
    min-height: 48px;
}

/* ==============================================================================
   TRACK RECORD - Modern Inline Pattern (DEFAULT for all new courses)
   Horizontal inline text with bullet separators
   ============================================================================== */

/* Default: Inline horizontal pattern - MAXIMUM SPECIFICITY */
.course-hero .hero-card,
.hero-container .hero-card,
body.single-course .hero-card,
.hero-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    order: 3 !important;
    margin: 0 0 var(--space-4) 0 !important;
}

.course-hero .hero-card h3,
.hero-container .hero-card h3,
body.single-course .hero-card h3,
.hero-card h3 {
    display: none !important;
}

.course-hero .hero-card-grid,
.hero-container .hero-card-grid,
body.single-course .hero-card-grid,
.hero-card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-2) !important;
}

.course-hero .card-stat-box,
.hero-container .card-stat-box,
body.single-course .card-stat-box,
.hero-card .card-stat-box,
.card-stat-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    gap: var(--space-2) !important;
}

.course-hero .card-stat-icon,
.hero-container .card-stat-icon,
body.single-course .card-stat-icon,
.hero-card .card-stat-icon,
.card-stat-icon {
    display: none !important;
}

.course-hero .card-stat-text,
.hero-container .card-stat-text,
body.single-course .card-stat-text,
.hero-card .card-stat-text,
.card-stat-text {
    display: inline !important;
}

.course-hero .card-stat-number,
.course-hero .card-stat-label,
.hero-container .card-stat-number,
.hero-container .card-stat-label,
body.single-course .card-stat-number,
body.single-course .card-stat-label,
.hero-card .card-stat-number,
.hero-card .card-stat-label,
.card-stat-number,
.card-stat-label {
    display: inline !important;
    font-size: var(--text-lg) !important; /* 18px */
    font-weight: var(--font-normal) !important; /* 400 */
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: var(--leading-relaxed) !important;
    margin: 0 !important;
    font-family: var(--font-body) !important;
}

.course-hero .card-stat-box:not(:last-child)::after,
.hero-container .card-stat-box:not(:last-child)::after,
body.single-course .card-stat-box:not(:last-child)::after,
.hero-card .card-stat-box:not(:last-child)::after,
.card-stat-box:not(:last-child)::after {
    content: "•" !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 var(--space-3) !important;
    font-size: 15px !important;
}

/* ==============================================================================
   LEGACY: Old Boxed Track Record Pattern
   Add class .hero-boxed-stats to any page that needs the old white box style
   ============================================================================== */

body.hero-boxed-stats .hero-card {
    background: white !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-6) !important;
    box-shadow: var(--shadow-xl) !important;
    order: 2 !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

body.hero-boxed-stats .hero-card h3 {
    display: block !important;
    font-family: var(--font-heading) !important;
    font-size: var(--text-xl) !important;
    font-weight: var(--font-bold) !important;
    color: var(--color-primary) !important;
    text-align: center;
    margin-bottom: var(--space-4) !important;
}

body.hero-boxed-stats .hero-card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
}

body.hero-boxed-stats .card-stat-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: var(--space-3) !important;
    background: var(--color-background-alt) !important;
    border-radius: var(--radius-md) !important;
}

body.hero-boxed-stats .card-stat-box::after {
    display: none !important;
}

body.hero-boxed-stats .card-stat-icon {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    color: var(--color-accent) !important;
    margin-bottom: var(--space-2) !important;
}

body.hero-boxed-stats .card-stat-number {
    display: block !important;
    font-size: var(--text-xl) !important;
    font-weight: var(--font-extrabold) !important;
    color: var(--color-primary) !important;
    margin-bottom: var(--space-1) !important;
}

body.hero-boxed-stats .card-stat-label {
    display: block !important;
    font-size: var(--text-xs) !important;
    color: var(--color-text-light) !important;
}

/* ==============================================================================
   MOBILE BREAKPOINT (max 767px) - Responsive Typography
   ============================================================================== */

@media (max-width: 767px) {
    /* Track record stats - better wrapping on mobile */
    .hero-card-grid {
        row-gap: var(--space-2) !important; /* Space between wrapped rows */
    }

    .card-stat-box {
        flex-shrink: 0; /* Prevent stats from shrinking too much */
    }

    /* Inline stats readable on mobile */
    .card-stat-number,
    .card-stat-label {
        font-size: var(--text-base) !important; /* 16px */
        line-height: 1.4 !important; /* Better for wrapping */
    }

    /* Tighter bullet spacing on mobile */
    .card-stat-box:not(:last-child)::after {
        margin: 0 var(--space-2) !important;
    }

    /* Mini stats stack better on mobile */
    .hero-stats-mini {
        gap: var(--space-3);
    }

    .stat-mini {
        padding: var(--space-2);
    }

    /* Legacy boxed stats on mobile */
    body.hero-boxed-stats .hero-card {
        max-width: 350px !important;
    }
}

/* ==============================================================================
   TABLET BREAKPOINT (768px+) - Maintains Single Column Layout
   ============================================================================== */

@media (min-width: 768px) {
    .course-hero {
        padding: var(--space-8) 0; /* Vertical only - horizontal padding on container */
    }

    /* Maintain single column layout on all devices */
    .hero-container {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Larger typography on tablet */
    .course-hero .hero-content h1,
    .hero-content h1,
    .course-hero h1 {
        font-size: var(--text-4xl) !important;
    }

    /* Horizontal CTA buttons on tablet+ */
    .cta-group {
        flex-direction: row !important;
        justify-content: flex-start !important;
    }

    .cta-group .nyc-stem-inquiry-btn,
    .cta-group a.nyc-stem-inquiry-btn {
        width: auto;
        max-width: none;
    }

    /* Track record inline pattern typography */
    .card-stat-number,
    .card-stat-label {
        font-size: var(--text-lg) !important; /* 18px */
    }

    /* Mini stats typography - larger on tablet */
    .stat-mini-icon {
        width: 24px;
        height: 24px;
    }

    .stat-mini-number {
        font-size: var(--text-lg); /* 18px tablet - increased from 16px */
    }

    .stat-mini-label {
        font-size: var(--text-base); /* 16px tablet - increased from 14px */
    }

    /* Legacy boxed pattern two-column layout on tablet */
    body.hero-boxed-stats .hero-container {
        flex-direction: row !important;
        align-items: center !important;
        gap: var(--space-10) !important;
    }

    body.hero-boxed-stats .hero-content {
        flex: 1 !important;
    }

    body.hero-boxed-stats .hero-card {
        order: 2 !important;
        flex-shrink: 0 !important;
        width: 340px !important;
        max-width: none !important;
        margin: 0 !important;
    }

    body.hero-boxed-stats .hero-card h3 {
        font-size: var(--text-xl) !important;
    }

    body.hero-boxed-stats .card-stat-number {
        font-size: var(--text-xl) !important;
    }

    body.hero-boxed-stats .card-stat-label {
        font-size: var(--text-xs) !important;
    }
}

/* ==============================================================================
   DESKTOP BREAKPOINT (1024px+)
   ============================================================================== */

@media (min-width: 1024px) {
    .course-hero {
        padding: var(--space-10) var(--space-8) var(--space-10) var(--space-8);
        min-height: auto;
    }

    /* Larger title on desktop */
    .course-hero .hero-content h1,
    .hero-content h1,
    .course-hero h1 {
        font-size: var(--text-5xl);
    }

    /* Larger excerpt on desktop */
    .hero-tagline,
    .hero-excerpt {
        font-size: var(--text-xl);
    }

    /* Inline stats match larger excerpt on desktop */
    .card-stat-number,
    .card-stat-label {
        font-size: var(--text-xl) !important; /* 20px */
    }

    /* Mini stats typography - even larger on desktop */
    .stat-mini-icon {
        width: 28px;
        height: 28px;
    }

    .stat-mini-number {
        font-size: var(--text-xl); /* 20px desktop - increased from 18px */
    }

    .stat-mini-label {
        font-size: var(--text-lg); /* 18px desktop - increased from 16px */
    }

    /* Legacy boxed pattern larger on desktop */
    body.hero-boxed-stats .hero-card {
        width: 380px !important;
        padding: var(--space-8) !important;
    }

    body.hero-boxed-stats .hero-card h3 {
        font-size: var(--text-2xl) !important;
    }

    body.hero-boxed-stats .card-stat-number {
        font-size: var(--text-2xl) !important;
    }

    body.hero-boxed-stats .card-stat-label {
        font-size: var(--text-sm) !important;
    }
}

/* ==============================================================================
   CENTERED HERO VARIANT (Enrichment courses)
   ============================================================================== */

.course-hero.hero-centered .hero-container {
    flex-direction: column;
    max-width: var(--container-xl);
    text-align: left;
}

.course-hero.hero-centered .hero-content {
    text-align: left;
}

.course-hero.hero-centered .hero-tagline,
.course-hero.hero-centered .hero-excerpt {
    margin-left: 0;
    margin-right: 0;
}

.course-hero.hero-centered .hero-stats-mini {
    justify-content: flex-start;
}

.course-hero.hero-centered .cta-group {
    justify-content: flex-start;
}

/* ==============================================================================
   COURSE SECTIONS - Consistent Spacing
   ============================================================================== */

.course-description,
.course-benefits,
.course-program,
.course-schedule,
.course-testimonials,
.course-faqs,
.course-cta,
.course-related {
    padding: var(--space-5) var(--space-4); /* Reduced from space-10 to space-5 (20px) */
}

@media (min-width: 768px) {
    .course-description,
    .course-benefits,
    .course-program,
    .course-schedule,
    .course-testimonials,
    .course-faqs,
    .course-cta,
    .course-related {
        padding: var(--space-8) var(--space-6); /* Reduced from space-12 to space-8 */
    }
}

@media (min-width: 1024px) {
    .course-description,
    .course-benefits,
    .course-program,
    .course-schedule,
    .course-testimonials,
    .course-faqs,
    .course-cta,
    .course-related {
        padding: var(--space-10) var(--space-8); /* Reduced from space-16 to space-10 */
    }
}

/* Alternate background sections */
.course-benefits,
.course-schedule,
.course-faqs {
    background-color: var(--color-background-alt);
}

/* Section headings */
.course-description h2,
.course-benefits h2,
.course-program h2,
.course-schedule h2,
.course-testimonials h2,
.course-faqs h2,
.course-cta h2,
.course-related h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    color: var(--color-primary);
    text-align: center;
    margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
    .course-description h2,
    .course-benefits h2,
    .course-program h2,
    .course-schedule h2,
    .course-testimonials h2,
    .course-faqs h2,
    .course-cta h2,
    .course-related h2 {
        font-size: var(--text-3xl);
    }
}

/* ==============================================================================
   SHSAT PAGE SPECIFIC - Tab Styling
   ============================================================================== */

/* Clean up tabs to match design system */
.elementor-element-78fc5ee .elementor-tab-title {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: all var(--transition-base);
}

.elementor-element-78fc5ee .elementor-tab-title.elementor-active {
    background: white;
    border-color: var(--color-accent);
}

.elementor-element-78fc5ee .elementor-tabs-content-wrapper {
    border-color: var(--color-accent);
    padding: var(--space-4);
}

@media (min-width: 768px) {
    .elementor-element-78fc5ee .elementor-tab-title {
        font-size: var(--text-base);
        padding: var(--space-4) var(--space-5);
    }

    .elementor-element-78fc5ee .elementor-tabs-content-wrapper {
        padding: var(--space-6);
    }
}

/* ==============================================================================
   COURSE CARDS GRID
   ============================================================================== */

.course-cards-grid,
.related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 640px) {
    .course-cards-grid,
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .course-cards-grid,
    .related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==============================================================================
   FAQ SECTION
   ============================================================================== */

.course-faqs .faq-item {
    background: white;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
}

.course-faqs .faq-question {
    padding: var(--space-4);
    font-weight: var(--font-semibold);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.course-faqs .faq-answer {
    padding: 0 var(--space-4) var(--space-4);
    color: var(--color-text-light);
    line-height: var(--leading-relaxed);
}

/* ==============================================================================
   CTA SECTION
   ============================================================================== */

.course-cta {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    text-align: center;
    color: white;
}

.course-cta h2 {
    color: white;
}

.course-cta p {
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-6);
}

/* ==============================================================================
   PRINT STYLES
   ============================================================================== */

/* ==============================================================================
   GLOBAL BUTTON STANDARDIZATION - All buttons site-wide
   ============================================================================== */

/* Reset and standardize ALL buttons across the entire site */
.nyc-stem-inquiry-btn,
a.nyc-stem-inquiry-btn,
button.nyc-stem-inquiry-btn,
.elementor-button,
a.elementor-button,
button.elementor-button,
.cta-button,
.btn,
a.btn,
button.btn,
.course-hero .cta-group a,
.course-hero .cta-group button,
.hero-section .cta-group a,
.hero-section .cta-group button,
.hero-content a,
.hero-content button,
.course-cta .nyc-stem-inquiry-btn,
.elementor-widget-button .elementor-button {
    font-family: var(--font-body) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-transform: none !important;
    padding: 16px 32px !important;
    border-radius: 0 !important;
    transition: all var(--transition-base) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    min-height: 54px !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Ensure NYC STEM buttons always have sharp edges and proper styling */
.nyc-stem-inquiry-btn,
a.nyc-stem-inquiry-btn,
button.nyc-stem-inquiry-btn {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 16px 32px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    color: white !important;
}

/* Global Inquiry Button Color - Vibrant Brand Orange */
.nyc-stem-inquiry-btn:not(.btn-teal):not(.btn-dark-teal),
a.nyc-stem-inquiry-btn:not(.btn-teal):not(.btn-dark-teal),
button.nyc-stem-inquiry-btn:not(.btn-teal):not(.btn-dark-teal) {
    background-color: #FF7F07 !important; /* Brand orange matching Final Push chevron */
}

/* Teal button variant */
.nyc-stem-inquiry-btn.btn-teal,
a.nyc-stem-inquiry-btn.btn-teal,
button.nyc-stem-inquiry-btn.btn-teal {
    background-color: #28AFCF !important;
    color: white !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.nyc-stem-inquiry-btn.btn-teal:hover,
a.nyc-stem-inquiry-btn.btn-teal:hover,
button.nyc-stem-inquiry-btn.btn-teal:hover {
    background-color: #1f96b8 !important;
    color: white !important;
}

/* Dark Teal button variant */
.nyc-stem-inquiry-btn.btn-dark-teal,
a.nyc-stem-inquiry-btn.btn-dark-teal,
button.nyc-stem-inquiry-btn.btn-dark-teal {
    background-color: #134958 !important;
    color: white !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.nyc-stem-inquiry-btn.btn-dark-teal:hover,
a.nyc-stem-inquiry-btn.btn-dark-teal:hover,
button.nyc-stem-inquiry-btn.btn-dark-teal:hover {
    background-color: #0f3a45 !important;
    color: white !important;
}

/* Remove any border-related properties */
.nyc-stem-inquiry-btn:hover,
a.nyc-stem-inquiry-btn:hover,
.elementor-button:hover,
a.elementor-button:hover,
.cta-button:hover,
.btn:hover,
a.btn:hover {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Mobile: Keep same size for consistency */
@media (max-width: 767px) {
    .nyc-stem-inquiry-btn,
    a.nyc-stem-inquiry-btn,
    .elementor-button,
    a.elementor-button,
    .cta-button,
    .btn,
    a.btn {
        font-size: 18px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        padding: 16px 32px !important;
        min-height: 54px !important;
        width: auto !important;
        border-radius: 0 !important;
    }
}

/* Tablet and up: Maintain consistency */
@media (min-width: 768px) {
    .nyc-stem-inquiry-btn,
    a.nyc-stem-inquiry-btn,
    .elementor-button,
    a.elementor-button,
    .cta-button,
    .btn,
    a.btn,
    .course-hero .cta-group a,
    .hero-section .cta-group a {
        font-size: 18px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        padding: 16px 32px !important;
        border-radius: 0 !important;
    }
}

/* Desktop: Maintain consistency */
@media (min-width: 1024px) {
    .nyc-stem-inquiry-btn,
    a.nyc-stem-inquiry-btn,
    .elementor-button,
    a.elementor-button,
    .cta-button,
    .btn,
    a.btn {
        font-size: 18px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        border-radius: 0 !important;
    }
}

/* ==============================================================================
   TRACK RECORD CARD - Stronger overrides
   ============================================================================== */

.course-hero .hero-card {
    background: white !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-5) !important;
    box-shadow: var(--shadow-lg) !important;
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 auto !important;
}

.course-hero .hero-card h3 {
    font-family: var(--font-heading) !important;
    font-size: var(--text-lg) !important;
    font-weight: var(--font-bold) !important;
    color: var(--color-primary) !important;
    text-align: center;
    margin-bottom: var(--space-4) !important;
    padding: 0 !important;
}

.course-hero .hero-card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
}

.course-hero .card-stat-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    padding: var(--space-3) !important;
    background: var(--color-background-alt) !important;
    border-radius: var(--radius-md) !important;
}

.course-hero .card-stat-number {
    font-size: var(--text-lg) !important;
    font-weight: var(--font-extrabold) !important;
    color: var(--color-primary) !important;
    line-height: 1 !important;
    margin-bottom: var(--space-1) !important;
}

.course-hero .card-stat-label {
    font-size: 11px !important;
    color: var(--color-text-light) !important;
    line-height: var(--leading-snug) !important;
}

@media (min-width: 768px) {
    .course-hero .hero-card {
        width: 320px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: var(--space-6) !important;
    }

    .course-hero .hero-card h3 {
        font-size: var(--text-xl) !important;
    }

    .course-hero .card-stat-number {
        font-size: var(--text-xl) !important;
    }

    .course-hero .card-stat-label {
        font-size: var(--text-xs) !important;
    }
}

@media (min-width: 1024px) {
    .course-hero .hero-card {
        width: 360px !important;
    }

    .course-hero .card-stat-number {
        font-size: var(--text-2xl) !important;
    }

    .course-hero .card-stat-label {
        font-size: var(--text-sm) !important;
    }
}

/* ==============================================================================
   MOCKUP PAGE RULES - NOW APPLIED GLOBALLY ABOVE
   These mockup-specific rules are no longer needed as they've been applied
   to all course pages globally. Keeping for reference only.
   ============================================================================== */

/*
.postid-17429 .course-hero .hero-container,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .hero-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

/* Hero content takes full width matching body sections below */
/* Use display: contents to allow children to be ordered within hero-container */
.postid-17429 .course-hero .hero-content,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .hero-content {
    display: contents !important; /* Makes children behave as direct children of hero-container */
}

/* Order 1: Title */
.postid-17429 .course-hero h1,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero h1 {
    order: 1 !important;
    margin-bottom: var(--space-4) !important;
}

/* Order 2: Excerpt paragraph */
.postid-17429 .course-hero .hero-excerpt,
.postid-17429 .course-hero .hero-content > p,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .hero-excerpt,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .hero-content > p {
    order: 2 !important;
    margin-bottom: var(--space-4) !important;
}

/* Order 3: Track record stats (90%+ Acceptance Rate • 50%+ Stuy Score Rate...) */
.postid-17429 .course-hero .hero-card,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .hero-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    order: 3 !important;
    margin: 0 0 var(--space-4) 0 !important;
}

/* Order 4: Mini stats (24-30 Sessions, 12-15 Weeks, etc.) */
.postid-17429 .course-hero .hero-stats-mini,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .hero-stats-mini {
    order: 4 !important;
    margin-bottom: var(--space-4) !important;
}

/* Order 5: CTA buttons */
.postid-17429 .course-hero .cta-group,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .cta-group {
    order: 5 !important;
    margin-top: var(--space-2) !important;
}

/* Hide the heading */
.postid-17429 .course-hero .hero-card h3,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .hero-card h3 {
    display: none !important;
}

/* Stats display as single column */
.postid-17429 .course-hero .hero-card-grid,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .hero-card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-2) !important;
}

.postid-17429 .course-hero .card-stat-box,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .card-stat-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    gap: var(--space-2) !important;
}

/* Hide icons */
.postid-17429 .course-hero .card-stat-icon,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .card-stat-icon {
    display: none !important;
}

.postid-17429 .course-hero .card-stat-text,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .card-stat-text {
    display: inline !important;
}

/* Number and label in same line - match excerpt typography */
.postid-17429 .course-hero .card-stat-number,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .card-stat-number {
    display: inline !important;
    font-size: var(--text-lg) !important; /* 18px - matches excerpt */
    font-weight: var(--font-normal) !important; /* 400 - same as excerpt */
    color: rgba(255, 255, 255, 0.9) !important; /* Same as excerpt */
    line-height: var(--leading-relaxed) !important; /* 1.625 - matches excerpt */
    margin: 0 !important;
    font-family: var(--font-body) !important; /* Roboto */
}

.postid-17429 .course-hero .card-stat-label,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .card-stat-label {
    display: inline !important;
    font-size: var(--text-lg) !important; /* 18px - matches excerpt */
    font-weight: var(--font-normal) !important; /* 400 */
    color: rgba(255, 255, 255, 0.9) !important; /* Same as excerpt */
    line-height: var(--leading-relaxed) !important; /* 1.625 */
    font-family: var(--font-body) !important; /* Roboto */
}

/* Add bullet separator after each stat (except last) */
.postid-17429 .course-hero .card-stat-box:not(:last-child)::after,
body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .card-stat-box:not(:last-child)::after {
    content: "•" !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 var(--space-3) !important;
    font-size: 15px !important;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    /* Single column hero on mobile */
    .postid-17429 .course-hero .hero-container,
    body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .hero-container {
        padding: var(--space-6) var(--space-4) !important;
    }

    .postid-17429 .course-hero .hero-content,
    body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .hero-content {
        text-align: left !important;
    }

    .postid-17429 .course-hero h1,
    body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero h1 {
        font-size: var(--text-3xl) !important; /* 30px - larger on mobile */
    }

    .postid-17429 .course-hero .hero-card-grid,
    body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .hero-card-grid {
        justify-content: flex-start !important;
    }

    /* Keep track record stats same size as desktop - they match excerpt */
    .postid-17429 .course-hero .card-stat-number,
    .postid-17429 .course-hero .card-stat-label,
    body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .card-stat-number,
    body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .card-stat-label {
        font-size: var(--text-base) !important; /* 16px on mobile - readable */
    }

    .postid-17429 .course-hero .card-stat-box:not(:last-child)::after,
    body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .card-stat-box:not(:last-child)::after {
        margin: 0 var(--space-2) !important;
    }
}

Desktop: Keep left-aligned
@media (min-width: 768px) {
    .postid-17429 .course-hero .hero-card-grid,
    body.single-course[class*="shsat-fall-bootcamp-mockup"] .course-hero .hero-card-grid {
        justify-content: flex-start !important;
    }
}
*/

/* ==============================================================================
   TRACK RECORD - OPTION B: Stats Strip Below Hero (Alternative)
   To use this instead of Option A, hide the .hero-card and create a stats strip
   section after the hero in your HTML
   ============================================================================== */

/*
Example HTML structure for Option B:
<section class="stats-strip">
    <div class="stats-container">
        <div class="stat-item">
            <span class="stat-number">90%+</span>
            <span class="stat-label">Acceptance Rate</span>
        </div>
        // ... repeat for each stat
    </div>
</section>
*/

.stats-strip {
    background: linear-gradient(to bottom, rgba(19, 73, 88, 0.03), transparent);
    padding: var(--space-8) var(--space-4);
    border-top: 1px solid rgba(19, 73, 88, 0.1);
}

.stats-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-6);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 120px;
}

.stat-item .stat-number {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stat-item .stat-label {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    font-weight: 500;
}

@media (min-width: 768px) {
    .stats-strip {
        padding: var(--space-10) var(--space-6);
    }

    .stats-container {
        gap: var(--space-10);
    }

    .stat-item {
        min-width: 140px;
    }

    .stat-item .stat-number {
        font-size: 42px;
    }

    .stat-item .stat-label {
        font-size: var(--text-base);
    }
}

/* ==============================================================================
   WHY CHOOSE SECTION - Mobile Compact Version
   ============================================================================== */

/* Keep content for SEO/AEO but make it more compact on mobile */
.course-benefits {
    padding: var(--space-8) var(--space-4) !important;
}

.course-benefits h2 {
    font-size: var(--text-xl) !important;
    margin-bottom: var(--space-4) !important;
}

/* Collapse image on mobile if it's decorative */
.course-benefits img,
.course-benefits .benefit-image,
.why-choose-image {
    display: none;
}

@media (min-width: 768px) {
    .course-benefits {
        padding: var(--space-12) var(--space-6) !important;
    }

    .course-benefits h2 {
        font-size: var(--text-2xl) !important;
        margin-bottom: var(--space-6) !important;
    }

    /* Show image on tablet+ */
    .course-benefits img,
    .course-benefits .benefit-image,
    .why-choose-image {
        display: block;
    }
}

/* Benefit cards - stack tighter on mobile */
.benefit-card,
.why-choose-item {
    padding: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
}

@media (min-width: 768px) {
    .benefit-card,
    .why-choose-item {
        padding: var(--space-4) !important;
    }
}

/* ==============================================================================
   CHEVRON TIMELINE - Mobile First (Sleek & Compact)
   ============================================================================== */

/* Mobile: Hide non-focus chevrons, show only the important one - ULTRA COMPACT */
@media (max-width: 767px) {
    .chevron-timeline {
        padding: var(--space-3) 0 !important; /* Reduced from space-4 */
    }

    .chevron-bar {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important; /* Reduced from space-3 */
        margin-bottom: var(--space-4) !important; /* Reduced from space-6 */
    }

    /* Remove any pseudo-element brackets */
    .chevron-timeline::before,
    .chevron-timeline::after,
    .chevron-bar::before,
    .chevron-bar::after,
    .chevron::before,
    .chevron::after {
        display: none !important;
        border: none !important;
    }

    /* Hide all chevrons on mobile (Foundation, Bootcamp, and Final Push) */
    .chevron-1,
    .chevron-2,
    .chevron-3 {
        display: none !important;
    }

    .chevron-content {
        padding: var(--space-3) !important; /* Reduced from space-4 */
        text-align: center;
    }

    .chevron-date {
        font-size: var(--text-xs) !important; /* Reduced from text-sm */
        margin-bottom: var(--space-1) !important; /* Reduced from space-2 */
        opacity: 0.8; /* Slightly more subtle */
    }

    .chevron-title {
        font-size: var(--text-lg) !important; /* Reduced from text-xl */
        font-weight: var(--font-bold) !important;
        margin-bottom: var(--space-2) !important;
    }

    /* Phase details - more compact with tighter spacing */
    .phase-details {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important; /* Reduced from space-3 */
    }

    .phase-detail {
        padding: var(--space-3) !important; /* Reduced from space-4 */
        background: var(--color-background-alt) !important;
        border-radius: var(--radius-md) !important;
        border-left: 2px solid var(--color-text-muted) !important; /* Thinner border */
        font-size: var(--text-xs) !important; /* Reduced from text-sm */
        line-height: var(--leading-normal) !important; /* Tighter line height */
    }

    /* Add dates via CSS for context - more compact */
    .phase-detail:nth-child(1) strong::after {
        content: " (SEPT–JUNE)";
        font-weight: normal;
        opacity: 0.7;
        font-size: 10px; /* Fixed small size */
    }

    .phase-detail:nth-child(2) strong::after {
        content: " (JULY–AUG)";
        font-weight: normal;
        opacity: 0.7;
        font-size: 10px;
    }

    .phase-detail:nth-child(3) strong::after {
        content: " (SEPT–OCT)";
        font-weight: normal;
        opacity: 0.7;
        font-size: 10px;
    }

    .phase-detail strong {
        display: block !important;
        margin-bottom: var(--space-1) !important; /* Reduced from space-2 */
        color: var(--color-primary) !important;
        font-size: var(--text-sm) !important; /* Reduced from text-base */
    }

    /* Highlight the focus phase (Final Push) - more subtle */
    .final-push-focus .phase-detail:nth-child(3) {
        border-left-color: var(--color-accent) !important;
        border-left-width: 3px !important; /* Slightly thicker for emphasis */
        background: white !important;
        box-shadow: none !important; /* Remove shadow for cleaner look */
    }

    .final-push-focus .phase-detail:nth-child(3) strong {
        color: var(--color-accent) !important;
    }
}

/* Tablet - can show horizontal but simpler */
@media (min-width: 768px) and (max-width: 1023px) {
    .chevron-bar {
        gap: var(--space-2) !important;
    }

    .chevron {
        /* Simpler chevron shape on tablet */
    }
}

/* ==============================================================================
   COURSE DESCRIPTION - Image and Timeline handling on mobile (Sleek & Compact)
   ============================================================================== */

/* Scale down all images in course description on mobile - MORE COMPACT */
@media (max-width: 767px) {
    .course-description img {
        max-width: 40% !important; /* Reduced from 50% */
        height: auto !important;
        margin: var(--space-2) auto !important; /* Reduced from space-3 */
        display: block !important;
    }

    /* Chevron/arrow/timeline images - hide on mobile, show styled boxes instead */
    .course-description img[src*="chevron"],
    .course-description img[src*="arrow"],
    .course-description img[src*="timeline"],
    .course-description img[src*="process"],
    .course-description img[alt*="chevron"],
    .course-description img[alt*="arrow"] {
        display: none !important;
    }

    /* Timeline/process step boxes - stack vertically on mobile - MORE COMPACT */
    .course-description-content table {
        display: block !important;
        width: 100% !important;
    }

    .course-description-content table tr {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important; /* Reduced from space-3 */
        margin-bottom: var(--space-3) !important; /* Reduced from space-4 */
    }

    .course-description-content table td {
        display: block !important;
        width: 100% !important;
        padding: var(--space-2) !important; /* Reduced from space-3 */
        background: var(--color-background-alt) !important;
        border-radius: var(--radius-md) !important;
        text-align: center;
        font-size: var(--text-sm) !important; /* Smaller text */
    }

    /* Hide empty cells that just contain arrows/chevrons */
    .course-description-content table td:empty,
    .course-description-content table td img:only-child {
        display: none !important;
    }

    /* Hide dotted bracket/chevron connector on mobile */
    .course-description-content [style*="dashed"],
    .course-description-content [style*="dotted"],
    .course-description-content *[style*="border-right: dashed"],
    .course-description-content *[style*="border-right: dotted"],
    .course-description-content *[style*="border: dashed"],
    .course-description-content *[style*="border: dotted"] {
        border: none !important;
    }

    /* Hide SVG brackets/connectors */
    .course-description-content svg[class*="bracket"],
    .course-description-content svg[class*="connector"],
    .course-description-content .bracket,
    .course-description-content .connector,
    .course-description-content .chevron-bracket {
        display: none !important;
    }

    /* Timeline boxes should be full width without the bracket */
    .course-description-content .timeline-box,
    .course-description-content [class*="step"],
    .course-description-content [class*="phase"] {
        width: 100% !important;
        margin-right: 0 !important;
    }
}

/* Tablet - slightly larger */
@media (min-width: 768px) and (max-width: 1023px) {
    .course-description img {
        max-width: 70% !important;
        margin: var(--space-4) auto !important;
    }
}

/* Desktop - full size for timeline visuals */
@media (min-width: 1024px) {
    .course-description img {
        max-width: 100% !important;
    }
}

/* ==============================================================================
   READY TO START SECTION - CTA Section with Grid Layout
   ============================================================================== */

.ready-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: white;
    padding: var(--space-12) var(--space-4);
}

.ready-section .section-container {
    max-width: var(--container-xl);
    margin: 0 auto;
}

.ready-section h2 {
    color: white;
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-8);
    text-align: center;
}

.ready-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-4);
}

.ready-column h3 {
    color: white;
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-4);
}

.ready-column ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.ready-column li {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-3);
    color: rgba(255, 255, 255, 0.95);
}

.ready-footer {
    text-align: center;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.ready-footer p {
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-4);
}

.ready-footer a {
    color: white;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ready-footer a:hover {
    opacity: 0.8;
}

/* Tablet and up - 2 column grid */
@media (min-width: 768px) {
    .ready-section {
        padding: var(--space-16) var(--space-6);
    }

    .ready-section h2 {
        font-size: var(--text-4xl);
    }

    .ready-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-12);
    }

    .ready-column h3 {
        font-size: var(--text-2xl);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .ready-section {
        padding: var(--space-20) var(--space-8);
    }
}

/* ==============================================================================
   DECORATIVE IMAGES - Hide on mobile if not essential
   ============================================================================== */

/* Generic approach for decorative images */
@media (max-width: 767px) {
    .decorative-image,
    .hero-decoration,
    [class*="decoration"],
    .elementor-section img[src*="chevron"],
    .elementor-section img[src*="arrow"],
    .elementor-section img[src*="decoration"] {
        display: none !important;
    }
}

/* ==============================================================================
   ALIGNMENT - Desktop centered sections, Mobile ALL left-aligned
   SINGLE SOURCE OF TRUTH for text alignment across the entire site
   ============================================================================== */

/* Desktop: Section headings and content centered */
.section h2,
.section-alt h2,
.section-container > h2,
.programs-section h2,
.ready-section h2,
.combined-approach h2,
.related-title,
.cta-section h2,
.course-cta h2,
.course-related h2,
.testimonials-section h2,
.nyc-testimonials-title,
.faq-section h2,
.faq-intro h2 {
    text-align: center;
}

/* ==============================================================================
   MOBILE: EVERYTHING LEFT-ALIGNED
   This single rule applies to ALL pages, templates, and shortcodes
   Excludes: Elementor elements, fixed/floating buttons, footer
   ============================================================================== */
@media (max-width: 768px) {
    /* GLOBAL: All content left-aligned on mobile */
    /* Target specific content areas only - NOT Elementor widgets */
    .course-hero,
    .course-hero h1,
    .course-hero p,
    .course-hero.hero-centered,
    .course-hero.hero-centered .hero-container,
    .course-hero.hero-centered .hero-content,
    .course-hero.hero-centered h1,
    .course-hero.hero-centered p,
    .hero-content,
    .hero-content h1,
    .hero-content p,
    .hero-container,
    .hero-title,
    .hero-tagline,
    .hero-excerpt,
    .hero-track-record,
    .hero-track-record *,
    .track-record-item,
    .section,
    .section h2,
    .section h3,
    .section p,
    .section-alt,
    .section-alt h2,
    .section-alt h3,
    .section-alt p,
    .section-header,
    .section-title,
    .section-subtitle,
    .content-section,
    .content-section h2,
    .content-section h3,
    .content-section p,
    .faq-section h2,
    .faq-intro,
    .faq-intro h2,
    .faq-intro p,
    .faq-question,
    .faq-answer,
    .faq-answer p,
    .testimonials-section,
    .testimonials-section h2,
    .nyc-testimonials-section,
    .nyc-testimonials-section h2,
    .nyc-testimonials-title,
    .testimonials-container,
    .testimonials-title,
    .course-testimonials,
    .course-cta,
    .course-cta h2,
    .course-cta p,
    .cta-section,
    .cta-section h2,
    .cta-section p,
    .cta-container,
    .cta-content,
    .cta-title,
    .cta-subtitle,
    .final-cta,
    .final-cta h2,
    .final-cta p,
    .course-related,
    .course-related h2,
    .course-crosssell,
    .course-crosssell h2,
    .related-title,
    h2.related-title,
    .why-choose-section,
    .why-choose-section h2,
    .why-choose-section p,
    .why-choose-sat-act h2,
    .programs-section,
    .programs-section h2,
    .programs-section p,
    .combined-approach,
    .combined-approach h2,
    .combined-approach p,
    .ready-section,
    .ready-section h2,
    .ready-section h3,
    .ready-section p,
    .ready-column,
    .ready-column h3,
    .ready-column li,
    .ready-footer,
    .ready-footer p,
    .course-description,
    .course-description p,
    .course-description-content,
    .course-description-content h2,
    .course-description-content h3,
    .course-description-content p,
    .module-title,
    .module-description,
    .timeline-content,
    .course-benefits,
    .course-benefits li,
    .admissions-universities-section,
    .admissions-universities-section h2,
    .admissions-universities-section p {
        text-align: left !important;
    }

    /* MOBILE FONT SIZES - Responsive typography */
    /* H1 - Hero titles (Industry standard: 32px mobile) */
    .course-hero h1,
    .course-hero .hero-content h1,
    .course-hero.hero-centered .hero-content h1,
    .hero-content h1,
    h1 {
        font-size: 32px !important;
    }

    /* H2 - Section titles */
    .course-hero h2,
    .section h2,
    .section-alt h2,
    .section-title,
    .content-section h2,
    .faq-section h2,
    .faq-intro h2,
    .testimonials-section h2,
    .nyc-testimonials-section h2,
    .nyc-testimonials-title,
    .testimonials-title,
    .course-cta h2,
    .cta-section h2,
    .cta-title,
    .final-cta h2,
    .course-related h2,
    .course-crosssell h2,
    .related-title,
    h2.related-title,
    .why-choose-section h2,
    .why-choose-sat-act h2,
    .programs-section h2,
    .combined-approach h2,
    .ready-section h2,
    .course-description-content h2,
    .admissions-universities-section h2,
    h2 {
        font-size: 24px !important;
    }

    /* H3 - Sub-section titles */
    .section h3,
    .section-alt h3,
    .content-section h3,
    .course-description-content h3,
    .ready-section h3,
    .ready-column h3,
    .module-title,
    h3 {
        font-size: 20px !important;
    }

    /* Body text */
    .hero-tagline,
    .hero-excerpt,
    .section-subtitle,
    .cta-subtitle,
    .module-description,
    .section p,
    .section-alt p,
    .content-section p,
    .cta-section p,
    .course-description p,
    .ready-section p,
    .ready-footer p,
    .ready-column li,
    .admissions-universities-section p {
        font-size: 16px !important;
    }

    /* Small text */
    .hero-track-record,
    .track-record-item {
        font-size: 14px !important;
    }

    /* Keep buttons text centered but container left-aligned */
    .cta-group,
    .hero-buttons,
    .course-hero.hero-centered .cta-group {
        text-align: left !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    /* Button text stays centered */
    .nyc-stem-inquiry-btn,
    button,
    .btn,
    a.btn,
    .elementor-button,
    .elementor-button-text {
        text-align: center !important;
    }

    /* Preserve Elementor alignment classes */
    .elementor-align-right,
    .elementor-align-right * {
        text-align: right !important;
    }

    .elementor-align-center,
    .elementor-align-center * {
        text-align: center !important;
    }

    /* CTA section - consistent padding with other sections */
    .cta-section {
        padding: 40px 16px !important;
    }

    /* Footer stays centered */
    footer,
    footer *,
    footer a {
        text-align: center !important;
    }
}

/* ==============================================================================
   TABLET+ TYPOGRAPHY (768px+)
   Industry standard: H1 = 40px on tablet
   ============================================================================== */
@media (min-width: 768px) {
    .course-hero h1,
    .course-hero .hero-content h1,
    .course-hero.hero-centered .hero-content h1,
    .hero-content h1 {
        font-size: 40px !important;
    }
}

/* ==============================================================================
   DESKTOP TYPOGRAPHY (1024px+)
   Industry standard: H1 = 48px on desktop
   ============================================================================== */
@media (min-width: 1024px) {
    .course-hero h1,
    .course-hero .hero-content h1,
    .course-hero.hero-centered .hero-content h1,
    .hero-content h1 {
        font-size: 48px !important;
    }
}

/* ==============================================================================
   PRINT STYLES
   ============================================================================== */

@media print {
    .course-hero {
        background: #134958;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .hero-card {
        box-shadow: none;
        border: 1px solid #dee2e6;
    }
}