/* ==========================================================================
   WEIGHT GOALS CUSTOM PREMIUM HERO STYLES (HERWISE 50/50 DIVISION SPEC)
   ========================================================================== */

/* Enforces margins on both sides of the hero element */
.wg-main-outer-bounds {
    padding: 10px 65px 40px 65px !important; 
    margin-top: 0px !important; 
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    width: 100% !important;
    display: block !important;
}

/* Enforces a 50/50 flex alignment grid layout for the split rows */
.wg-inner-split-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-height: 620px !important;
    margin-top: -30px !important; /* Negative margin pulls the block up to touch the nav bar perfectly */
    background-color: #FDFBF7 !important; 
    border-radius: 24px !important; 
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
}

.wg-column-left {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Anchors global container content to the left side */
    justify-content: flex-start !important; 
    padding: 60px 8% !important;
    box-sizing: border-box !important;
    order: 1 !important; /* Order token for fluid mobile reordering controls */
}

.wg-column-right {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    position: relative !important;
    background-color: transparent !important; /* Changed from legacy gray fill to clean background */
    box-sizing: border-box !important;
    order: 2 !important; 
    
    /* FIX: Adds matching interior padding boundaries so the picture framing shrinks away 
       from the absolute edge and aligns perfectly with the layout grid lines */
    padding: 60px 8% 60px 0 !important; /* 60px top/bottom, 8% indent on the right hand edge, 0 on the left */
}

/* Structural Text Spacing Definitions */
.wg-text-content-holder {
    width: 100% !important;
    max-width: 520px !important;
    padding-top: 20px !important; 
}

.wg-mini-badge {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #D37556 !important; /* Terracotta for an encouraging punch */
    letter-spacing: 1.5px !important;
    margin-bottom: 6px !important;
}

.wg-premium-tagline {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #7A8A80 !important; /* Harmonized slate-sage tone descriptor */
    letter-spacing: 1px !important;
    margin-bottom: 30px !important;
    text-transform: uppercase !important;
}

.wg-main-title {
    font-family: 'Lora', Georgia, serif !important; /* Matched the template's serif engine font family */
    font-size: 44px !important;
    color: #191F30 !important; /* Deepest premium navy-charcoal anchor */
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin: 0 0 15px 0 !important;
    text-align: left !important;
}

.wg-main-subtitle {
    font-family: 'Roboto', sans-serif !important;
    font-size: 24px !important;
    color: #2C4236 !important; /* Authoritative Deep Forest Sage */
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 0 0 25px 0 !important;
    text-align: left !important;
}

.wg-main-description {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    color: #555555 !important;
    line-height: 1.6 !important;
    margin: 0 0 10px 0 !important;
    text-align: left !important;
}

/* UI Action Button Definitions */
.wg-action-button-row {
    display: flex !important;
    flex-direction: column !important; /* Stack buttons vertically */
    gap: 12px !important;
    width: 100% !important;
}

.wg-btn-teal, .wg-btn-border-dark {
    display: flex !important;          /* Hard-overrides any third-party framework alignments */
    flex-direction: column !important; /* Forces title and subtext to stack vertically */
    align-items: flex-start !important;    
    justify-content: flex-start !important; /* FORCES text content strictly to the left edge layout */
    text-align: left !important;       
    height: auto !important;
    width: 100% !important;            /* Forces full block container length */
    padding: 16px 24px !important;     /* 16px top/bottom, 24px indentation space from edge */
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.25s ease-in-out !important;
    box-sizing: border-box !important;
}

.wg-btn-teal {
    background-color: #2C4236 !important; /* Deep Forest Sage primary buttons */
    color: #ffffff !important;
}

.wg-btn-teal:hover {
    background-color: #1E2B24 !important;
}

.wg-btn-border-dark {
    background-color: transparent !important;
    color: #191F30 !important;
    border: 1px solid #2C4236 !important;
}

.wg-btn-border-dark:hover {
    background-color: rgba(44, 66, 54, 0.04) !important;
}

/* Inner Button Layout Elements (Global Styles for Desktop + Mobile support) */
.wg-btn-title {
    display: block !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important; /* Small separation gap before subtext */
}

.wg-btn-italic-sub {
    display: block !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    font-style: italic !important;   /* Makes the subtext italicized */
    color: #8c7b6d !important;       /* Clean premium soft brown accent color tint */
    line-height: 1.2 !important;
}

/* Image Slider Frame Layout Engine */
.wg-image-slider-window {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 980 / 1080 !important;
    min-height: 500px !important;
}

.wg-slider-image-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 0.8s ease-in-out !important;
    z-index: 1 !important;
}

.wg-slider-image-item.active {
    opacity: 1 !important;
    z-index: 2 !important;
}

.wg-slider-indicator-dots {
    position: absolute !important;
    bottom: 25px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 10px !important;
    z-index: 10 !important;
}

.wg-indicator-dot {
    width: 8px !important;
    height: 8px !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    transition: background-color 0.3s !important;
}

.wg-indicator-dot.active {
    background-color: #ffffff !important;
}

/* ==========================================================================
   WEIGHTGOALS HERO FEATURE LIST STYLING
   ========================================================================== */
.wg-feature-list {
    margin: 12px 0 25px 0 !important; 
    padding: 0 !important;
    list-style: none !important;
}

.wg-feature-list li {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: #4A554E !important;
    line-height: 1.4 !important;      
    margin-bottom: 6px !important;    
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.wg-feature-list li:last-child {
    margin-bottom: 0 !important;
}

.wg-feature-list li .icon {
    color: #D37556 !important; /* Distinct Terracotta validation check icons */
    font-weight: 700 !important;
    font-size: 18px !important;
    margin-right: 12px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Global Definition for the Hint Text Component */
.wg-mq-hint {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: #8c7b6d !important; 
    font-style: italic !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* ==========================================================================
   MOBILE MEDIA QUERY OVERRIDES (Flipped Order: Image Displayed First)
   ========================================================================== */
@media screen and (max-width: 991px) {
    .wg-main-outer-bounds {
        padding: 20px 15px !important; 
        margin-top: 70px !important; 
    }
    
    .wg-inner-split-container {
        display: flex !important;
        flex-direction: column !important; /* Switch flow to stack order layout structure */
        min-height: auto !important;
    } 
    
    .wg-column-left, .wg-column-right {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .wg-column-right {
        order: 1 !important; /* Image goes on top for mobile screens */
        height: 380px !important;
    }
    
    .wg-column-left {
        order: 2 !important; /* Text goes under image */
        padding: 45px 24px !important;
        align-items: center !important; /* Centers mobile layout container context */
    }
    
    .wg-main-title, .wg-main-subtitle, .wg-main-description {
        text-align: center !important;
    }
    
    .wg-action-button-row {
        width: 100% !important;
        gap: 10px !important;
    }

    .wg-btn-teal, .wg-btn-border-dark {
        align-items: center !important;
        justify-content: center !important; /* Re-centers button text strictly on mobile screens */
        text-align: center !important;
    }
    
    .wg-btn-title {
        text-align: center !important;
    }
    
    .wg-image-slider-window {
        height: 100% !important; 
        min-height: auto !important;
    }
    
    .wg-main-title {
        font-size: 34px !important;
    }
    
    .wg-main-subtitle {
        font-size: 20px !important;
    }
}

/* ==========================================================================
   WEIGHTGOALS FOOTER TRUST & PRIVACY ENGINE (RE-STACKED PROSE VERSION)
   ========================================================================== */
.wg-trust-validation-block {
    width: 100% !important;
    margin-top: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; /* Unified vertical margin flow across rows */
}

/* Horizontal layout locking avatars and stars on a single row */
.wg-trust-header-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
}

.wg-trust-avatars {
    font-size: 20px !important;
    letter-spacing: 2px !important; /* Space avatars out evenly */
    line-height: 1 !important;
    user-select: none !important;
}

.wg-trust-stars {
    color: #D37556 !important; /* Terracotta star matrix brand accents */
    font-size: 14px !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
}

.wg-trust-tagline {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #4A554E !important; /* Grounded dark slate-green body text */
    line-height: 1.5 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Bottom privacy metadata strip */
.wg-trust-privacy-bar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 12px !important;
    color: #7A8A80 !important; /* Slate-sage soft metadata tone */
    font-weight: 500 !important;
    margin-top: 4px !important;
}

.wg-privacy-divider {
    color: #A2B0A7 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   RESPONSIVE LAYOUT OVERRIDES (Centered for Mobile Screen viewports)
   ========================================================================== */
@media screen and (max-width: 991px) {
    .wg-trust-header-row {
        justify-content: center !important;
    }
    
    .wg-trust-tagline {
        text-align: center !important;
    }
    
    .wg-trust-privacy-bar {
        justify-content: center !important;
    }
}

/* ==========================================================================
   WEIGHTGOALS LIVE COUNTER PULSE BADGE ENGINE
   ========================================================================== */
.wg-live-counter-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background-color: #EBF2EE !important; /* Soft premium green tint box background fill */
    border: 1px solid #C6DCD0 !important;   /* Muted inner frame borders */
    border-radius: 6px !important;
    padding: 14px 18px !important;
    margin-top: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Radar pulse container configuration */
.wg-pulse-container {
    position: relative !important;
    width: 14px !important;
    height: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Core central static active indicator green dot */
.wg-pulse-dot {
    width: 10px !important;
    height: 10px !important;
    background-color: #2CD571 !important; /* Vivid active green signaling anchor */
    border-radius: 50% !important;
    display: block !important;
}

/* Expanding glowing halo ring decoration */
.wg-pulse-ring {
    position: absolute !important;
    width: 22px !important;
    height: 22px !important;
    background-color: rgba(44, 213, 113, 0.4) !important;
    border-radius: 50% !important;
    animation: wgRadarPulse 2.2s infinite ease-out !important; /* Continuous smooth loop pulse timeline */
}

.wg-counter-text {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #191F30 !important; /* Dark navy typography color anchor */
    line-height: 1.4 !important;
}

/* Keyframes framework tracking the expanding pulse ring opacity */
@keyframes wgRadarPulse {
    0% {
        transform: scale(0.4);
        opacity: 1;
    }
    80% {
        transform: scale(1.2);
        opacity: 0;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* ==========================================================================
   MOBILE SUPPORT SPECIFICATIONS
   ========================================================================== */
@media screen and (max-width: 991px) {
    .wg-live-counter-badge {
        justify-content: center !important;
        text-align: center !important;
    }
}



    /* Community Feature Layout Refinements */
.wg-circle-benefits-list li i {
    flex-shrink: 0;
}

.wg-community-image-holder img {
    transition: transform 0.4s ease-in-out;
}

/* Micro-interaction layout look */
.wg-community-image-holder:hover img {
    transform: scale(1.01);
}

@media (max-width: 991px) {
    .wg-community-image-holder {
        margin-bottom: 20px;
    }
    .wg-community-image-holder img {
        min-height: 300px !important;
    }
}



    /* Story Hover Interactions and Responsive Layout Adjustments */
.wg-story-link:hover {
    color: #D37556 !important;
}

@media (max-width: 991px) {
    .wg-commitment-box {
        margin-top: 20px;
        border-left: none !important;
        border-top: 4px solid #2C4236;
        border-radius: 0 0 8px 8px !important;
    }
}




    /* Card Hover Enhancements matching the structural frames */
.wg-reveal-card {
    background-color: #FFFFFF;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.wg-reveal-card:hover {
    transform: translateY(-4px);
    border-color: #2C4236 !important;
    box-shadow: 0 8px 25px rgba(44, 66, 54, 0.06);
}

.wg-reveal-card:hover .wg-reveal-card-icon {
    border-color: #2C4236 !important;
    background-color: #F4F6F4;
}






    /* ==========================================================================
   CLEAN WHITE PHILOSOPHY & SYMPTOMS SECTIONS
   ========================================================================== */
.wg-familiar-section {
    background-color: #FFFFFF !important;
    color: #2C4236 !important;
}

.wg-section-lead-text {
    font-size: 16px;
    color: #757F95;
    line-height: 1.7;
}

/* Rounded Inline Icon Circles */
.wg-circle-icon-badge {
    width: 60px;
    height: 60px;
    border: 1px solid #EAE5DF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px auto;
    color: #D37556;
    font-size: 20px;
    background-color: #FDFBF7;
    transition: all 0.3s ease;
}

.wg-circle-icon-badge:hover {
    border-color: #2C4236;
    background-color: #F4F6F4;
}

.wg-circle-icon-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: #2C4236;
}

.wg-section-divider {
    border-top: 1px solid #EAE5DF;
    opacity: 0.7;
    margin: 20px 0;
}

/* Split Column Styles */
.wg-split-title {
    font-family: 'Lora', serif;
    font-size: 36px;
    font-weight: 700;
    color: #191F30;
}

.wg-split-checkmark-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.wg-split-checkmark-list li {
    font-size: 16px;
    color: #2C4236;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.wg-split-checkmark-list li i {
    color: #D37556;
    font-size: 18px;
}

/* Right Side Accent Content Row */
.wg-split-accent-wrapper {
    padding: 10px 20px;
}

.wg-accent-header-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.wg-accent-line {
    height: 1px;
    flex: 1;
    background-color: #EAE5DF;
}

.wg-accent-italic-title {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 32px;
    color: #D37556;
    font-weight: 600;
    margin: 0;
}

.wg-accent-body-desc {
    font-size: 15px;
    color: #757F95;
    line-height: 1.6;
}

.btn-terracotta-override {
    background-color: #D37556 !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
}

.btn-terracotta-override:hover {
    background-color: #C26445 !important;
}


.wg-circle-icon-description {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #757F95 !important;
    margin: 4px auto 0 auto !important;
    max-width: 140px; /* Restricts structural cross-column bleed bounds */
    text-align: center;
}



                /* ==========================================================================
   MINIMALIST FAQ ACCORDION OVERRIDES (As seen in HERWISE Layout)
   ========================================================================== */
.wg-faq-cat-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.wg-faq-cat-title {
    font-size: 12px;
    font-weight: 700;
    color: #2C4236;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.wg-faq-cat-line {
    height: 1px;
    width: 100%;
    background-color: #2C4236;
}

/* Accordion Structural Adjustments */
.wg-custom-faq-accordion .accordion-item {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #EAE5DF !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

.wg-custom-faq-accordion .accordion-button {
    background-color: transparent !important;
    color: #191F30 !important;
    font-family: 'Lora', serif;
    font-size: 18px;
    font-weight: 600;
    padding: 22px 0 !important;
    box-shadow: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

/* Removes default background arrows and sets up clean indicators */
.wg-custom-faq-accordion .accordion-button::after {
    display: none !important;
}

.wg-custom-faq-accordion .accordion-button::before {
    content: "+";
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 300;
    color: #2C4236;
    order: 2;
    margin-left: 15px;
    transition: transform 0.2s ease;
}

.wg-custom-faq-accordion .accordion-button:not(.collapsed)::before {
    content: "−";
    transform: rotate(0deg);
}

.wg-custom-faq-accordion .accordion-body {
    padding: 0 0 25px 0 !important;
    font-size: 15px;
    line-height: 1.6;
    color: #757F95;
    background-color: transparent !important;
}






.wg-premium-intro{
    font-size:18px;
    line-height:1.7;
    color:#0A3434;
    font-weight:600;
    margin-bottom:18px;
}