/* ============================================================
   GYMSMART BLOG & KNOWLEDGE HUB - PREMIUM HERO & SUB-SECTION SYSTEM
   100% Matching Home, Features & Pricing Design Aesthetics (1240px Grid)
   Updated: 2026-10-21 (Festive Edition v2)
   ============================================================ */

:root {
    --blog-primary-gradient: linear-gradient(135deg, #a855f7 0%, #38bdf8 100%);
    --blog-accent-purple: #c084fc;
    --blog-accent-cyan: #38bdf8;
    --blog-card-dark-bg: linear-gradient(135deg, rgba(20, 16, 42, 0.68) 0%, rgba(12, 10, 26, 0.82) 100%);
    --blog-card-dark-border: rgba(192, 132, 252, 0.18);
    --blog-card-light-bg: #ffffff;
    --blog-card-light-border: rgba(203, 213, 225, 0.85);
}

body {
    background-color: #06050c;
    color: #f8fafc;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body:not(.dark) {
    background-color: #f8faff;
    color: #0f172a;
}

.blog-detail-page-wrap {
    min-height: 100vh;
    position: relative;
    padding-top: 108px;
    padding-bottom: 80px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .blog-detail-page-wrap {
        padding-top: 88px;
    }
}

/* Master 1240px Container Alignment - 100% Pixel-Matched with Header .nav-container */
.blog-detail-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

@media (max-width: 1280px) {
    .blog-detail-container {
        padding: 0 20px;
    }
}

/* ============================================================
   1. TOP NAVIGATION BAR (TIGHT & BALANCED)
   ============================================================ */

.blog-top-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(14px, 2vw, 24px) 0 12px;
    width: 100%;
    box-sizing: border-box;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-back-blog {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(192, 132, 252, 0.25);
    color: #c084fc !important;
    font-size: 13.5px;
    font-weight: 750;
    text-decoration: none !important;
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
}

body:not(.dark) .btn-back-blog {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #7e22ce !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-back-blog:hover {
    background: rgba(147, 51, 234, 0.15);
    border-color: #c084fc;
    transform: translateX(-3px);
}

.article-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(147, 51, 234, 0.15);
    border: 1px solid rgba(192, 132, 252, 0.35);
    color: #c084fc;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

body:not(.dark) .article-cat-badge {
    background: #f3e8ff;
    border-color: #d8b4fe;
    color: #7e22ce;
}

.top-bar-share-btns {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.share-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.2s ease;
    text-decoration: none !important;
    cursor: pointer;
}

body:not(.dark) .share-btn {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569 !important;
}

.share-btn:hover {
    transform: translateY(-2px);
    background: rgba(147, 51, 234, 0.2);
    border-color: #c084fc;
    color: #ffffff !important;
}

/* ============================================================
   2. HERO HEADER SECTION (Centered, Bold & High-Contrast Gradient)
   ============================================================ */

.blog-hero-header {
    text-align: center;
    padding: clamp(36px, 5vw, 64px) 0 36px;
    max-width: 1100px;
    margin: 0 auto;
}

.blog-hero-title {
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: clamp(2.25rem, 4.3vw, 3.6rem) !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.03em !important;
    color: #ffffff !important;
    margin: 0 auto 20px !important;
    max-width: 1080px !important;
}

body:not(.dark) .blog-hero-title {
    color: #0f172a !important;
}

/* 3-Color Tricolor Gradient Highlight - 100% Matched to Features & Home Pages */
.blog-gradient-span {
    background: linear-gradient(135deg, #c084fc 0%, #38bdf8 60%, #10b981 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
}

body:not(.dark) .blog-gradient-span {
    background: linear-gradient(135deg, #7c3aed 0%, #0284c7 60%, #059669 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.blog-hero-subtitle {
    font-size: clamp(1.02rem, 1.25vw, 1.15rem) !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    max-width: 860px !important;
    margin: 0 auto 22px !important;
}

body:not(.dark) .blog-hero-subtitle {
    color: #475569 !important;
}

/* Centered Quick Stats Bar */
.blog-quick-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.quick-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(192, 132, 252, 0.2);
    padding: 6px 16px;
    border-radius: 999px;
}

body:not(.dark) .quick-stat-item {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.quick-stat-item i {
    color: #38bdf8;
}

body:not(.dark) .quick-stat-item i {
    color: #0284c7;
}

/* ============================================================
   3. SUB-SECTION ARCHITECTURE (Individually Polished Cards)
   ============================================================ */

.article-body-content {
    font-size: 1.08rem;
    line-height: 1.82;
    color: rgba(255, 255, 255, 0.88);
    width: 100%;
}

body:not(.dark) .article-body-content {
    color: #334155;
}

/* Individual Glassmorphism Section Card */
.content-section {
    background: var(--blog-card-dark-bg);
    border: 1px solid var(--blog-card-dark-border);
    border-radius: 24px;
    padding: clamp(24px, 3.5vw, 40px);
    margin-bottom: 30px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    scroll-margin-top: 125px;
    transition: all 0.3s ease;
}

.article-body-content [id^="section-"],
.article-body-content h2,
.article-body-content h3 {
    scroll-margin-top: 125px;
}

@media (max-width: 768px) {

    .content-section,
    .article-body-content [id^="section-"],
    .article-body-content h2,
    .article-body-content h3 {
        scroll-margin-top: 98px;
    }
}

.content-section:hover {
    border-color: rgba(192, 132, 252, 0.3);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

body:not(.dark) .content-section {
    background: var(--blog-card-light-bg) !important;
    border: 1px solid var(--blog-card-light-border) !important;
    box-shadow: 0 8px 24px rgba(114, 78, 191, 0.05) !important;
}

body:not(.dark) .content-section:hover {
    border-color: #d8b4fe !important;
    box-shadow: 0 12px 32px rgba(114, 78, 191, 0.1) !important;
}

/* Section Headings with Purple Glow Accent Bar */
.content-section h2,
.article-body-content h2 {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.48rem, 2.6vw, 1.95rem);
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 18px 0;
    position: relative;
    padding-left: 16px;
    border-left: 4px solid #c084fc;
    display: block;
}

body:not(.dark) .content-section h2,
body:not(.dark) .article-body-content h2 {
    color: #0f172a;
    border-left-color: #7e22ce;
}

.content-section h3,
.article-body-content h3 {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.2rem, 2vw, 1.48rem);
    font-weight: 800;
    line-height: 1.32;
    color: #c084fc;
    margin: 24px 0 12px 0;
    display: block;
}

body:not(.dark) .content-section h3,
body:not(.dark) .article-body-content h3 {
    color: #7e22ce;
}

.content-section p,
.article-body-content p {
    margin-bottom: 20px;
}

.content-section strong,
.article-body-content strong {
    color: #ffffff;
    font-weight: 750;
}

body:not(.dark) .content-section strong,
body:not(.dark) .article-body-content strong {
    color: #0f172a;
}

.content-section ul,
.content-section ol,
.article-body-content ul,
.article-body-content ol {
    margin: 16px 0 24px;
    padding-left: 24px;
}

.content-section li,
.article-body-content li {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.88);
}

body:not(.dark) .content-section li,
body:not(.dark) .article-body-content li {
    color: #334155;
}

/* Key Takeaways Card */
.gymsmart-takeaways-box {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.14) 0%, rgba(56, 189, 248, 0.08) 100%) !important;
    border: 1px solid rgba(192, 132, 252, 0.32) !important;
    border-left: 5px solid #c084fc !important;
    border-radius: 24px !important;
    padding: clamp(24px, 3.5vw, 36px) !important;
    margin-top: 20px !important;
    margin-bottom: 36px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(14px) !important;
}

body:not(.dark) .gymsmart-takeaways-box {
    background: #fbf8ff !important;
    border-color: #e9d5ff !important;
    border-left-color: #7e22ce !important;
    box-shadow: 0 8px 24px rgba(114, 78, 191, 0.06) !important;
}

body:not(.dark) .gymsmart-takeaways-box h3 {
    color: #1e1b4b !important;
}

body:not(.dark) .gymsmart-takeaways-box ul {
    color: #334155 !important;
}

/* Strategic Perspective Quote Box */
.ceo-intro {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(147, 51, 234, 0.08) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    border-radius: 20px !important;
    padding: 22px 26px !important;
    margin-bottom: 26px !important;
}

body:not(.dark) .ceo-intro {
    background: #f0f9ff !important;
    border-color: #bae6fd !important;
}

/* Embedded Media inside Section Cards */
.content-section img,
.content-section video,
.article-body-content img,
.article-body-content video {
    max-width: 100%;
    height: auto;
    border-radius: 18px;
    margin: 26px 0;
    border: 1px solid rgba(192, 132, 252, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: block;
}

body:not(.dark) .content-section img,
body:not(.dark) .content-section video,
body:not(.dark) .article-body-content img,
body:not(.dark) .article-body-content video {
    border-color: #e2e8f0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

/* Comparison Tables */
.gymsmart-table-wrapper {
    border-radius: 20px;
    overflow-x: auto;
    background: rgba(14, 10, 28, 0.6);
    border: 1px solid rgba(192, 132, 252, 0.2);
    margin: 28px 0;
}

body:not(.dark) .gymsmart-table-wrapper {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* FAQ Section & Accordions */
.gymsmart-faq-section {
    margin-top: 36px;
}

.gymsmart-faq-section h2 {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 850;
    color: #ffffff;
    margin-bottom: 22px;
}

body:not(.dark) .gymsmart-faq-section h2 {
    color: #0f172a !important;
}

.faq-item {
    background: var(--blog-card-dark-bg);
    border: 1px solid var(--blog-card-dark-border);
    border-radius: 18px;
    padding: 20px 24px;
    margin-bottom: 14px;
    transition: all 0.25s ease;
}

.faq-item:hover {
    border-color: rgba(192, 132, 252, 0.4);
}

body:not(.dark) .faq-item {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.faq-item summary {
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 750;
    color: #ffffff;
}

body:not(.dark) .faq-item summary span {
    color: #0f172a !important;
}

body:not(.dark) .faq-item p {
    color: #475569 !important;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item[open] summary i {
    transform: rotate(180deg);
}

.faq-item summary i {
    transition: transform 0.25s ease;
    color: #c084fc;
}

/* ============================================================
   EXERCISE CARDS & VISUAL FORM CUES STYLING (1000X UI)
   ============================================================ */

.exercise-card-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(192, 132, 252, 0.2);
    border-radius: 20px;
    padding: 24px;
    margin: 20px 0 32px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

body:not(.dark) .exercise-card-box {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.exercise-img-wrap {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
    background: #000000;
    border: 1px solid rgba(192, 132, 252, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.exercise-feature-img {
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.exercise-card-box:hover .exercise-feature-img {
    transform: scale(1.02);
}

.exercise-meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.exercise-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
}

.exercise-tag.primary {
    background: rgba(147, 51, 234, 0.18);
    border: 1px solid rgba(192, 132, 252, 0.35);
    color: #c084fc;
}

body:not(.dark) .exercise-tag.primary {
    background: #f3e8ff;
    border-color: #d8b4fe;
    color: #7e22ce;
}

.exercise-tag.secondary {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
}

body:not(.dark) .exercise-tag.secondary {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: #0284c7;
}

.exercise-tag.type {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
}

body:not(.dark) .exercise-tag.type {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #059669;
}

.exercise-steps-list {
    margin: 14px 0 22px;
    padding-left: 22px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
}

body:not(.dark) .exercise-steps-list {
    color: #334155;
}

.exercise-steps-list li {
    margin-bottom: 10px;
}

.exercise-errors-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .exercise-errors-box {
        grid-template-columns: 1fr;
    }
}

.error-col {
    padding: 16px 18px;
    border-radius: 14px;
}

.error-col.danger {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

body:not(.dark) .error-col.danger {
    background: #fef2f2;
    border-color: #fecaca;
}

.error-col.success {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

body:not(.dark) .error-col.success {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.error-col h5 {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-col.danger h5 {
    color: #f87171;
}

body:not(.dark) .error-col.danger h5 {
    color: #dc2626;
}

.error-col.success h5 {
    color: #34d399;
}

body:not(.dark) .error-col.success h5 {
    color: #16a34a;
}

.error-col ul {
    margin: 0;
    padding-left: 18px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}

body:not(.dark) .error-col ul {
    color: #475569;
}

.error-col ul li {
    margin-bottom: 6px;
}

/* ============================================================
   4. BOTTOM ACTION & SHARE PILL BAR (Sleek, Compact & Horizontal)
   ============================================================ */

.article-bottom-bar {
    margin-top: 40px;
    padding: 14px 24px;
    background: linear-gradient(135deg, rgba(20, 16, 42, 0.8) 0%, rgba(12, 10, 26, 0.9) 100%);
    border: 1px solid rgba(192, 132, 252, 0.25);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

body:not(.dark) .article-bottom-bar {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.article-share-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.share-label {
    font-size: 13.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 7px;
}

body:not(.dark) .share-label {
    color: #475569;
}

.share-label i {
    color: #c084fc;
}

body:not(.dark) .share-label i {
    color: #7e22ce;
}

.article-share-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none !important;
    cursor: pointer;
}

body:not(.dark) .share-btn {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #334155 !important;
}

.share-btn:hover {
    transform: translateY(-2px);
    background: rgba(147, 51, 234, 0.25);
    border-color: #c084fc;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(147, 51, 234, 0.3);
}

.share-btn.share-wa:hover {
    background: rgba(37, 211, 102, 0.25);
    border-color: #25d366;
    color: #25d366 !important;
}

.share-btn.share-tw:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
    color: #ffffff !important;
}

.share-btn.share-li:hover {
    background: rgba(10, 102, 194, 0.25);
    border-color: #0a66c2;
    color: #38bdf8 !important;
}

.share-btn.share-cp:hover {
    background: rgba(192, 132, 252, 0.25);
    border-color: #c084fc;
    color: #c084fc !important;
}

@media (max-width: 640px) {
    .article-bottom-bar {
        border-radius: 20px;
        padding: 18px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .article-share-group {
        justify-content: space-between;
    }
}

/* Loading Spinner */
.loading-spinner {
    display: none;
    text-align: center;
    padding: 60px 0;
}

.spinner {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-left-color: #c084fc;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   RESPONSIVE DESIGN - Synchronized with Header Breakpoints
   ============================================================ */

@media (max-width: 1200px) {
    .blog-detail-container {
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .blog-detail-page-wrap {
        padding-bottom: 45px !important;
    }

    .blog-detail-container {
        padding: 0 16px !important;
    }

    .blog-top-nav-bar {
        padding: 10px 0 8px !important;
    }

    .btn-back-blog {
        padding: 7px 14px !important;
        font-size: 12.5px !important;
    }

    .article-cat-badge {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    .blog-hero-header {
        padding: 10px 0 24px !important;
    }

    .blog-hero-title {
        font-size: 1.85rem !important;
        line-height: 1.22 !important;
        margin-bottom: 16px !important;
    }

    .blog-hero-subtitle {
        font-size: 0.96rem !important;
        margin-bottom: 18px !important;
    }

    .blog-quick-stats {
        gap: 8px !important;
    }

    .quick-stat-item {
        font-size: 12px !important;
        padding: 5px 12px !important;
    }

    .content-section {
        padding: 20px 16px !important;
        border-radius: 18px !important;
        margin-bottom: 20px !important;
    }

    .content-section h2,
    .article-body-content h2 {
        font-size: 1.35rem !important;
        margin-bottom: 14px !important;
        padding-left: 12px !important;
    }

    .content-section h3,
    .article-body-content h3 {
        font-size: 1.18rem !important;
        margin: 18px 0 10px !important;
    }

    .content-section img,
    .content-section video,
    .article-body-content img,
    .article-body-content video {
        border-radius: 14px !important;
        margin: 18px 0 !important;
    }

    .content-section ul,
    .content-section ol,
    .article-body-content ul,
    .article-body-content ol {
        padding-left: 20px !important;
        margin: 12px 0 18px !important;
    }

    .article-bottom-bar {
        padding: 18px 16px !important;
        border-radius: 16px !important;
        margin-top: 26px !important;
    }
}

@media (max-width: 480px) {
    .blog-detail-container {
        padding: 0 12px !important;
    }

    .blog-hero-title {
        font-size: 1.55rem !important;
    }

    .content-section {
        padding: 18px 14px !important;
    }
}

/* ============================================================
   5. FREQUENTLY ASKED QUESTIONS (100% IDENTICAL TO HOMEPAGE & PRICING UI)
   ============================================================ */

#section-faq,
.gs-faq-container,
.gymsmart-faq-container {
    margin-top: clamp(48px, 5vw, 68px);
    margin-bottom: 30px;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#section-faq.content-section,
.content-section.gs-faq-container,
.content-section.gymsmart-faq-container {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.gs-faq-header {
    text-align: center;
    margin-bottom: clamp(28px, 3.5vw, 38px);
}

.gs-faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(147, 51, 234, 0.12);
    border: 1px solid rgba(192, 132, 252, 0.35);
    color: #c084fc;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

body:not(.dark) .gs-faq-badge {
    background: #f3e8ff;
    color: #7e22ce;
    border-color: #d8b4fe;
}

.gs-faq-title {
    font-size: clamp(2rem, 3.5vw, 2.8rem) !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: 1.2 !important;
    letter-spacing: -0.8px !important;
    margin-bottom: 0.8rem !important;
    text-align: center !important;
}

body:not(.dark) .gs-faq-title {
    color: #0f172a !important;
}

.gs-faq-gradient {
    background: linear-gradient(135deg, #c084fc 0%, #38bdf8 50%, #10b981 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
}

body:not(.dark) .gs-faq-gradient {
    background: linear-gradient(135deg, #7c3aed 0%, #0284c7 50%, #059669 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.gs-faq-sub {
    font-size: 1.05rem !important;
    color: rgba(255, 255, 255, 0.65) !important;
    margin: 0 auto !important;
    max-width: 720px !important;
    text-align: center !important;
    line-height: 1.6 !important;
}

body:not(.dark) .gs-faq-sub {
    color: #64748b !important;
}

.gs-faq-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.gs-faq-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(20, 16, 38, 0.75) !important;
    border: 1px solid rgba(192, 132, 252, 0.18) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

body:not(.dark) .gs-faq-item {
    background: #ffffff !important;
    border: 1px solid rgba(203, 213, 225, 0.85) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.gs-faq-item:hover {
    border-color: rgba(192, 132, 252, 0.45) !important;
    box-shadow: 0 8px 25px rgba(147, 51, 234, 0.15) !important;
    transform: translateY(-2px) !important;
}

body:not(.dark) .gs-faq-item:hover {
    border-color: #c084fc !important;
    box-shadow: 0 8px 25px rgba(147, 51, 234, 0.1) !important;
}

.gs-faq-item.active {
    border-color: rgba(192, 132, 252, 0.6) !important;
    box-shadow: 0 12px 35px rgba(147, 51, 234, 0.22) !important;
    background: rgba(24, 18, 48, 0.9) !important;
}

body:not(.dark) .gs-faq-item.active {
    border-color: #9333ea !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(147, 51, 234, 0.12) !important;
}

.gs-faq-question {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 1.15rem 1.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    user-select: none !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.gs-faq-question h3,
.article-body-content .gs-faq-question h3 {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    flex: 1 !important;
    text-align: left !important;
}

body:not(.dark) .gs-faq-question h3,
body:not(.dark) .article-body-content .gs-faq-question h3 {
    color: #0f172a !important;
}

.gs-faq-question h3 span,
.article-body-content .gs-faq-question h3 span {
    flex: 1 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.45 !important;
}

.gs-faq-q-icon-pill {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: rgba(147, 51, 234, 0.15) !important;
    border: 1px solid rgba(192, 132, 252, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #c084fc !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
}

.gs-faq-item.active .gs-faq-q-icon-pill {
    background: linear-gradient(135deg, #9333ea, #7c3aed) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(147, 51, 234, 0.4) !important;
}

body:not(.dark) .gs-faq-q-icon-pill {
    background: #f3e8ff !important;
    border-color: #d8b4fe !important;
    color: #7e22ce !important;
}

.gs-faq-toggle-ico {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #c084fc !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, color 0.3s ease !important;
}

body:not(.dark) .gs-faq-toggle-ico {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #7e22ce !important;
}

.gs-faq-item.active .gs-faq-toggle-ico {
    transform: rotate(180deg) !important;
    background: linear-gradient(135deg, #9333ea, #7c3aed) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.35) !important;
}

.gs-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s ease;
    padding: 0 1.4rem 0 4.3rem !important;
}

.gs-faq-item.active .gs-faq-answer {
    padding: 0 1.4rem 1.35rem 4.3rem !important;
}

.gs-faq-answer p {
    font-size: 0.96rem !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 !important;
}

body:not(.dark) .gs-faq-answer p {
    color: #475569 !important;
}

@media (max-width: 768px) {
    .gs-faq-item {
        border-radius: 14px !important;
    }

    .gs-faq-question {
        padding: 1rem 1.1rem !important;
        gap: 10px !important;
    }

    .gs-faq-question h3,
    .article-body-content .gs-faq-question h3 {
        gap: 10px !important;
    }

    .gs-faq-question h3 span,
    .article-body-content .gs-faq-question h3 span {
        font-size: 0.94rem !important;
    }

    .gs-faq-q-icon-pill {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.88rem !important;
        border-radius: 10px !important;
    }

    .gs-faq-toggle-ico {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.8rem !important;
    }

    .gs-faq-answer,
    .gs-faq-item.active .gs-faq-answer {
        padding: 0 1.1rem 1.15rem 1.1rem !important;
    }

    .gs-faq-answer p {
        font-size: 0.9rem !important;
    }
}

/* ============================================================
   6. HUMAN-CENTRIC STORYTELLING & VISUAL PROOF COMPONENTS
   ============================================================ */

/* 1. The 3 Nightmares Grid */
.gym-nightmare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin: 24px 0 28px;
}

.gym-nightmare-card {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.08) 0%, rgba(20, 16, 38, 0.9) 100%);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 16px;
    padding: 22px;
    transition: all 0.3s ease;
}

body:not(.dark) .gym-nightmare-card {
    background: #fff5f5;
    border-color: #fecaca;
}

.gym-nightmare-card:hover {
    transform: translateY(-3px);
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.12);
}

.nightmare-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    margin-bottom: 12px;
}

body:not(.dark) .nightmare-badge {
    background: #fee2e2;
    color: #dc2626;
}

.nightmare-title {
    font-size: 1.12rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    border: none !important;
}

body:not(.dark) .nightmare-title {
    color: #991b1b !important;
}

.nightmare-desc {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin: 0 !important;
}

body:not(.dark) .nightmare-desc {
    color: #4b5563 !important;
}

/* 2. Before vs After Comparison Grid */
.gym-vs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin: 24px 0 28px;
}

.gym-vs-card {
    border-radius: 18px;
    padding: 24px;
    box-sizing: border-box;
}

.gym-vs-danger {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.06), rgba(18, 14, 32, 0.85));
    border: 1px solid rgba(239, 68, 68, 0.25);
}

body:not(.dark) .gym-vs-danger {
    background: #fffafa;
    border-color: #fca5a5;
}

.gym-vs-success {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.08), rgba(18, 14, 32, 0.85));
    border: 1px solid rgba(16, 185, 129, 0.35);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.1);
}

body:not(.dark) .gym-vs-success {
    background: #f0fdf4;
    border-color: #86efac;
}

.gym-vs-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.gym-vs-danger .gym-vs-header {
    color: #f87171;
}

body:not(.dark) .gym-vs-danger .gym-vs-header {
    color: #dc2626;
}

.gym-vs-success .gym-vs-header {
    color: #34d399;
}

body:not(.dark) .gym-vs-success .gym-vs-header {
    color: #059669;
}

.gym-vs-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gym-vs-list li {
    font-size: 0.93rem;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
}

body:not(.dark) .gym-vs-list li {
    color: #334155;
}

.gym-vs-danger .gym-vs-list li i {
    color: #f87171;
    margin-top: 3px;
    flex-shrink: 0;
}

.gym-vs-success .gym-vs-list li i {
    color: #34d399;
    margin-top: 3px;
    flex-shrink: 0;
}

/* 3. WhatsApp Message Mockup */
.whatsapp-mockup-wrap {
    max-width: 580px;
    margin: 26px auto;
    background: #0b141a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 18px 20px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.whatsapp-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 14px;
}

.whatsapp-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    flex-shrink: 0;
}

.whatsapp-sender-title {
    font-weight: 700;
    font-size: 14px;
    color: #e9edef;
    display: flex;
    align-items: center;
    gap: 6px;
}

.whatsapp-bubble {
    background: #005c4b;
    color: #e9edef;
    border-radius: 12px 12px 12px 4px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.55;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.whatsapp-bubble strong {
    color: #ffffff;
}

.whatsapp-action-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 10px;
}

.whatsapp-btn-pill {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
    text-align: center;
    color: #25d366;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 4. Hardware Brands Pill Grid */
.hardware-brand-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}

.hardware-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(192, 132, 252, 0.25);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    transition: all 0.2s ease;
}

body:not(.dark) .hardware-pill {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.hardware-pill i {
    color: #38bdf8;
}

/* 5. In-Article High Converting CTA Box */
.article-cta-box {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.18) 0%, rgba(56, 189, 248, 0.12) 100%);
    border: 1px solid rgba(192, 132, 252, 0.4);
    border-radius: 20px;
    padding: clamp(28px, 4vw, 40px);
    text-align: center;
    margin: 36px 0 20px;
    box-shadow: 0 16px 40px rgba(147, 51, 234, 0.12);
}

body:not(.dark) .article-cta-box {
    background: linear-gradient(135deg, #f5f3ff 0%, #f0f9ff 100%);
    border-color: #c4b5fd;
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.08);
}

.article-cta-title {
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 10px;
}

body:not(.dark) .article-cta-title {
    color: #0f172a;
}

.article-cta-sub {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 680px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

body:not(.dark) .article-cta-sub {
    color: #475569;
}

.article-cta-btns {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cta-action-btn-primary {
    background: linear-gradient(135deg, #9333ea, #7c3aed);
    color: #ffffff !important;
    padding: 12px 28px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(147, 51, 234, 0.35);
    transition: all 0.25s ease;
    border: none;
    cursor: pointer;
}

.cta-action-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(147, 51, 234, 0.45);
}

.cta-action-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff !important;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

body:not(.dark) .cta-action-btn-secondary {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a !important;
}

.cta-action-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

/* ============================================================
   COMPREHENSIVE LIGHT THEME ENGINE FOR ALL BLOG PLAYBOOKS & ARTICLES
   Ensures 100% Flawless Contrast, Crystal-Clear Typography & Beautiful UI
   ============================================================ */

body:not(.dark) .blog-detail-page-wrap {
    background-color: #f8faff;
    color: #1e293b;
}

/* 1. Main Content Section & Container */
body:not(.dark) .content-section,
body:not(.dark) .article-body-content {
    color: #334155;
}

body:not(.dark) .content-section p,
body:not(.dark) .article-body-content p {
    color: #334155;
}

/* 2. Image Banners & Overlays MUST always keep white text in Light Mode */
body:not(.dark) .article-body-content [style*="position: absolute"],
body:not(.dark) .article-body-content [style*="position:absolute"],
body:not(.dark) .article-body-content [style*="position: absolute"] *,
body:not(.dark) .article-body-content [style*="position:absolute"] *,
body:not(.dark) .article-body-content [style*="linear-gradient(to top, rgba(11, 15, 25"] *,
body:not(.dark) .article-body-content .banner-overlay * {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85) !important;
}

body:not(.dark) .article-body-content [style*="position: absolute"] p,
body:not(.dark) .article-body-content [style*="position:absolute"] p,
body:not(.dark) .article-body-content [style*="linear-gradient(to top, rgba(11, 15, 25"] p {
    color: rgba(248, 250, 252, 0.95) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75) !important;
}

body:not(.dark) .article-body-content [style*="position: absolute"] span,
body:not(.dark) .article-body-content [style*="position:absolute"] span {
    color: #ffffff !important;
}

body:not(.dark) .article-body-content [style*="position: absolute"] [style*="background: rgba(59, 130, 246"],
body:not(.dark) .article-body-content [style*="position:absolute"] [style*="background: rgba(59, 130, 246"] {
    background: rgba(37, 99, 235, 0.8) !important;
    border-color: #60a5fa !important;
}

/* 3. Overriding all white / near-white hardcoded text colors in light mode (excluding image overlays) */
body:not(.dark) .article-body-content [style*="color: #ffffff"]:not(.badge):not([style*="background: #"]):not([style*="background:#"]):not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#ffffff"]:not(.badge):not([style*="background: #"]):not([style*="background:#"]):not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color: #fff"]:not(.badge):not([style*="background: #"]):not([style*="background:#"]):not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#fff"]:not(.badge):not([style*="background: #"]):not([style*="background:#"]):not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color: #f8fafc"]:not(.badge):not([style*="background: #"]):not([style*="background:#"]):not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#f8fafc"]:not(.badge):not([style*="background: #"]):not([style*="background:#"]):not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color: #f1f5f9"]:not(.badge):not([style*="background: #"]):not([style*="background:#"]):not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#f1f5f9"]:not(.badge):not([style*="background: #"]):not([style*="background:#"]):not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color: rgba(255, 255, 255"]:not(.badge):not([style*="background: #"]):not([style*="background:#"]):not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:rgba(255, 255, 255"]:not(.badge):not([style*="background: #"]):not([style*="background:#"]):not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color: rgba(248,250,252"]:not(.badge):not([style*="background: #"]):not([style*="background:#"]):not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:rgba(248,250,252"]:not(.badge):not([style*="background: #"]):not([style*="background:#"]):not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color: rgba(248, 250, 252"]:not(.badge):not([style*="background: #"]):not([style*="background:#"]):not([style*="position: absolute"] *):not([style*="position:absolute"] *) {
    color: #0f172a !important;
}

/* Maintain crisp white text for solid badges and colored pill buttons */
body:not(.dark) .article-body-content span[style*="background: #"],
body:not(.dark) .article-body-content span[style*="background:#"],
body:not(.dark) .article-body-content span[style*="background: rgb("],
body:not(.dark) .article-body-content .badge {
    color: #ffffff !important;
}

/* 4. Overriding dark slate / mockup window containers across all 34 playbooks */
body:not(.dark) .article-body-content div[style*="rgba(15, 23, 42"]:not([style*="position: absolute"]):not([style*="position:absolute"]),
body:not(.dark) .article-body-content div[style*="rgba(15,23,42"]:not([style*="position: absolute"]):not([style*="position:absolute"]),
body:not(.dark) .article-body-content div[style*="rgba(30, 41, 59"]:not([style*="position: absolute"]):not([style*="position:absolute"]),
body:not(.dark) .article-body-content div[style*="rgba(30,41,59"]:not([style*="position: absolute"]):not([style*="position:absolute"]),
body:not(.dark) .article-body-content div[style*="rgba(20, 20, 38"]:not([style*="position: absolute"]):not([style*="position:absolute"]),
body:not(.dark) .article-body-content div[style*="rgba(20,20,38"]:not([style*="position: absolute"]):not([style*="position:absolute"]),
body:not(.dark) .article-body-content div[style*="rgba(16, 14, 30"]:not([style*="position: absolute"]):not([style*="position:absolute"]),
body:not(.dark) .article-body-content div[style*="rgba(16,14,30"]:not([style*="position: absolute"]):not([style*="position:absolute"]),
body:not(.dark) .article-body-content div[style*="#0f172a"]:not([style*="position: absolute"]):not([style*="position:absolute"]),
body:not(.dark) .article-body-content div[style*="#0b0f19"]:not([style*="position: absolute"]):not([style*="position:absolute"]),
body:not(.dark) .article-body-content div[style*="#111827"]:not([style*="position: absolute"]):not([style*="position:absolute"]),
body:not(.dark) .article-body-content div[style*="#06050c"]:not([style*="position: absolute"]):not([style*="position:absolute"]) {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
    color: #334155 !important;
}

/* Mockup window header dividers and subtitles */
body:not(.dark) .article-body-content div[style*="border-bottom: 1px solid rgba(255,255,255"] {
    border-bottom-color: #e2e8f0 !important;
}

body:not(.dark) .article-body-content div[style*="rgba(15, 23, 42"] span[style*="color: #cbd5e1"],
body:not(.dark) .article-body-content div[style*="rgba(15,23,42"] span[style*="color: #cbd5e1"],
body:not(.dark) .article-body-content div[style*="rgba(30, 41, 59"] span[style*="color: #cbd5e1"] {
    color: #1e293b !important;
}

/* Pillar button cards nested inside mockup windows */
body:not(.dark) .article-body-content div[style*="rgba(15, 23, 42"] div[style*="rgba(15, 23, 42"],
body:not(.dark) .article-body-content div[style*="rgba(15, 23, 42"] div[style*="rgba(15,23,42"],
body:not(.dark) .article-body-content div[style*="rgba(30, 41, 59"] div[style*="rgba(15, 23, 42"],
body:not(.dark) .article-body-content div[style*="rgba(30, 41, 59"] div[style*="rgba(15,23,42"] {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

/* 5. Headings (h1, h2, h3, h4, h5, h6) */
body:not(.dark) .article-body-content h1,
body:not(.dark) .article-body-content h2,
body:not(.dark) .article-body-content h3:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content h4:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content h5,
body:not(.dark) .article-body-content h6 {
    color: #0f172a;
}

/* 6. High-Contrast WCAG AA Color Accents in Light Mode */
/* Cyan / Blue Accents */
body:not(.dark) .article-body-content [style*="color: #38bdf8"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#38bdf8"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color: #60a5fa"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#60a5fa"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *) {
    color: #0284c7 !important;
}

body:not(.dark) .article-body-content h4[style*="color: #38bdf8"] {
    color: #0284c7 !important;
}

/* Yellow / Amber Accents */
body:not(.dark) .article-body-content [style*="color: #fbbf24"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#fbbf24"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color: #f59e0b"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#f59e0b"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *) {
    color: #b45309 !important;
}

body:not(.dark) .article-body-content h4[style*="color: #fbbf24"] {
    color: #b45309 !important;
}

/* Green Accents */
body:not(.dark) .article-body-content [style*="color: #4ade80"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#4ade80"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color: #22c55e"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#22c55e"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *) {
    color: #15803d !important;
}

body:not(.dark) .article-body-content h4[style*="color: #4ade80"] {
    color: #15803d !important;
}

/* Purple Accents */
body:not(.dark) .article-body-content [style*="color: #c084fc"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#c084fc"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color: #a855f7"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#a855f7"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *) {
    color: #7e22ce !important;
}

body:not(.dark) .article-body-content h4[style*="color: #c084fc"] {
    color: #7e22ce !important;
}

/* Red Accents */
body:not(.dark) .article-body-content [style*="color: #f87171"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#f87171"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color: #ef4444"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#ef4444"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *) {
    color: #dc2626 !important;
}

body:not(.dark) .article-body-content h4[style*="color: #f87171"] {
    color: #dc2626 !important;
}

/* Muted Secondary Text */
body:not(.dark) .article-body-content [style*="color: #cbd5e1"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#cbd5e1"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *) {
    color: #334155 !important;
}

body:not(.dark) .article-body-content [style*="color: #94a3b8"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content [style*="color:#94a3b8"]:not([style*="position: absolute"] *):not([style*="position:absolute"] *),
body:not(.dark) .article-body-content small[style*="color: #94a3b8"] {
    color: #64748b !important;
}

/* Strong & Em Tags */
body:not(.dark) .article-body-content strong:not([style*="position: absolute"] *):not([style*="position:absolute"] *) {
    color: #0f172a !important;
}

body:not(.dark) .article-body-content em:not([style*="position: absolute"] *):not([style*="position:absolute"] *) {
    color: #1e293b !important;
}

/* 7. Monster Stat Grid (Rent, AC Bill, Staff & Trainer Base) */
body:not(.dark) .article-body-content [style*="background: rgba(239, 68, 68, 0.08)"] {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.06) !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(239, 68, 68, 0.08)"] div[style*="font-size: 1.2rem"],
body:not(.dark) .article-body-content [style*="background: rgba(239, 68, 68, 0.08)"] [style*="color: #ffffff"],
body:not(.dark) .article-body-content [style*="background: rgba(239, 68, 68, 0.08)"] [style*="color: #fff"] {
    color: #be123c !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(239, 68, 68, 0.08)"] span {
    color: #e11d48 !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(239, 68, 68, 0.08)"] small {
    color: #9f1239 !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(245, 158, 11, 0.08)"] {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.06) !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(245, 158, 11, 0.08)"] div[style*="font-size: 1.2rem"],
body:not(.dark) .article-body-content [style*="background: rgba(245, 158, 11, 0.08)"] [style*="color: #ffffff"],
body:not(.dark) .article-body-content [style*="background: rgba(245, 158, 11, 0.08)"] [style*="color: #fff"] {
    color: #b45309 !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(245, 158, 11, 0.08)"] span {
    color: #d97706 !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(245, 158, 11, 0.08)"] small {
    color: #78350f !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(56, 189, 248, 0.08)"] {
    background: #f0f9ff !important;
    border-color: #bae6fd !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.06) !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(56, 189, 248, 0.08)"] div[style*="font-size: 1.2rem"],
body:not(.dark) .article-body-content [style*="background: rgba(56, 189, 248, 0.08)"] [style*="color: #ffffff"],
body:not(.dark) .article-body-content [style*="background: rgba(56, 189, 248, 0.08)"] [style*="color: #fff"] {
    color: #0369a1 !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(56, 189, 248, 0.08)"] span {
    color: #0284c7 !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(56, 189, 248, 0.08)"] small {
    color: #075985 !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(34, 197, 94, 0.08)"],
body:not(.dark) .article-body-content [style*="background: rgba(16, 185, 129, 0.08)"] {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.06) !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(34, 197, 94, 0.08)"] div[style*="font-size: 1.2rem"],
body:not(.dark) .article-body-content [style*="background: rgba(34, 197, 94, 0.08)"] [style*="color: #ffffff"],
body:not(.dark) .article-body-content [style*="background: rgba(34, 197, 94, 0.08)"] [style*="color: #fff"] {
    color: #15803d !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(34, 197, 94, 0.08)"] span {
    color: #16a34a !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(34, 197, 94, 0.08)"] small {
    color: #166534 !important;
}

/* 8. Trap Cards & Colored Pill Borders in Light Mode */
body:not(.dark) .article-body-content [style*="border: 1px solid rgba(239, 68, 68"] {
    border-color: #fca5a5 !important;
}

body:not(.dark) .article-body-content [style*="border: 1px solid rgba(245, 158, 11"] {
    border-color: #fcd34d !important;
}

body:not(.dark) .article-body-content [style*="border: 1px solid rgba(56, 189, 248"] {
    border-color: #7dd3fc !important;
}

body:not(.dark) .article-body-content [style*="border: 1px solid rgba(192, 132, 252"] {
    border-color: #d8b4fe !important;
}

body:not(.dark) .article-body-content [style*="border: 1px solid rgba(34, 197, 94"] {
    border-color: #86efac !important;
}

/* 9. Fast-Read Executive Summary Box */
body:not(.dark) .gymsmart-takeaways-box {
    background: linear-gradient(135deg, #faf5ff 0%, #f0f9ff 100%) !important;
    border: 1px solid #d8b4fe !important;
    border-left: 6px solid #9333ea !important;
    box-shadow: 0 10px 30px rgba(147, 51, 234, 0.08) !important;
}

body:not(.dark) .gymsmart-takeaways-box h3 {
    color: #0f172a !important;
}

body:not(.dark) .gymsmart-takeaways-box p {
    color: #334155 !important;
}

body:not(.dark) .gymsmart-takeaways-box span {
    color: #475569 !important;
}

body:not(.dark) .gymsmart-takeaways-box ul li {
    color: #334155 !important;
}

body:not(.dark) .gymsmart-takeaways-box ul li strong {
    color: #0f172a !important;
}

body:not(.dark) .gymsmart-takeaways-box div[style*="background: rgba(15, 23, 42"] {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* 10. WhatsApp Pitch Scripts & Quotes */
body:not(.dark) .article-body-content div[style*="background: rgba(0,0,0"],
body:not(.dark) .article-body-content div[style*="background: rgba(0, 0, 0"] {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body:not(.dark) .article-body-content div[style*="background: rgba(0,0,0"] em,
body:not(.dark) .article-body-content div[style*="background: rgba(0, 0, 0"] em {
    color: #0f172a !important;
    font-style: italic !important;
}

/* 11. Comparison Tables & DataGrids */
body:not(.dark) .article-body-content table,
body:not(.dark) .article-body-content .table,
body:not(.dark) .article-body-content table.table-dark,
body:not(.dark) .article-body-content .table-dark {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

body:not(.dark) .article-body-content table th,
body:not(.dark) .article-body-content table td,
body:not(.dark) .article-body-content .table-dark th,
body:not(.dark) .article-body-content .table-dark td {
    background: #ffffff !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}

body:not(.dark) .article-body-content table thead th,
body:not(.dark) .article-body-content .table-dark thead th {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

body:not(.dark) .article-body-content table tbody tr:hover td {
    background: #f8fafc !important;
}

/* 12. List Elements */
body:not(.dark) .article-body-content ul li,
body:not(.dark) .article-body-content ol li {
    color: #334155 !important;
}

body:not(.dark) .article-body-content ul li strong,
body:not(.dark) .article-body-content ol li strong {
    color: #0f172a !important;
}

/* 13. Default Dark Cards & Panels in Light Theme */
body:not(.dark) .article-body-content [style*="background: rgba(15, 23, 42"],
body:not(.dark) .article-body-content [style*="background: rgba(15,23,42"],
body:not(.dark) .article-body-content [style*="background: #0f172a"],
body:not(.dark) .article-body-content [style*="background: #0b1120"],
body:not(.dark) .article-body-content [style*="background: #090d16"],
body:not(.dark) .article-body-content [style*="background: #1e293b"] {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(15, 23, 42"] p,
body:not(.dark) .article-body-content [style*="background: rgba(15,23,42"] p,
body:not(.dark) .article-body-content [style*="background: #0f172a"] p,
body:not(.dark) .article-body-content [style*="background: #0b1120"] p,
body:not(.dark) .article-body-content [style*="background: #090d16"] p,
body:not(.dark) .article-body-content [style*="background: #1e293b"] p {
    color: #334155 !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(15, 23, 42"] h3,
body:not(.dark) .article-body-content [style*="background: rgba(15, 23, 42"] h4,
body:not(.dark) .article-body-content [style*="background: #0f172a"] h3,
body:not(.dark) .article-body-content [style*="background: #0f172a"] h4 {
    color: #0f172a !important;
}

/* Universal Text & Heading Contrast in Light Theme */
body:not(.dark) .article-body-content p,
body:not(.dark) .article-body-content li,
body:not(.dark) .article-body-content [style*="color: #cbd5e1"],
body:not(.dark) .article-body-content [style*="color: #e2e8f0"],
body:not(.dark) .article-body-content [style*="color: #f1f5f9"],
body:not(.dark) .article-body-content [style*="color: rgba(248, 250, 252"] {
    color: #334155 !important;
}

body:not(.dark) .article-body-content h2,
body:not(.dark) .article-body-content h3,
body:not(.dark) .article-body-content h4,
body:not(.dark) .article-body-content strong,
body:not(.dark) .article-body-content [style*="color: #f8fafc"],
body:not(.dark) .article-body-content [style*="color: #fff"],
body:not(.dark) .article-body-content [style*="color: #ffffff"] {
    color: #0f172a !important;
}

body:not(.dark) .article-body-content [style*="color: #94a3b8"] {
    color: #64748b !important;
}

/* Graphic Frames / Windows in Light Theme */
body:not(.dark) .article-body-content div[style*="linear-gradient(145deg, rgba(15, 23, 42"] {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

body:not(.dark) .article-body-content div[style*="border-bottom: 1px solid rgba(255,255,255,0.08)"] {
    border-bottom: 1px solid #e2e8f0 !important;
}

body:not(.dark) .article-body-content div[style*="border-bottom: 1px solid rgba(255,255,255,0.08)"] span {
    color: #334155 !important;
}

body:not(.dark) .article-body-content div[style*="background: #0b0f19"] {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Callout Gradients in Light Theme */
body:not(.dark) .article-body-content div[style*="linear-gradient(135deg, rgba(15, 23, 42"] {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* 14. Bootstrap Utility Text-Light override */
body:not(.dark) .article-body-content .text-light {
    color: #334155 !important;
}

/* Ambient Blobs in Light Theme */
body:not(.dark) .blob {
    opacity: 0.05 !important;
}

/* ============================================================
   FAQ ACCORDION COMPONENT FULL-WIDTH SECTION ALIGNMENT
   ============================================================ */
#section-faq,
.gs-faq-container,
.gymsmart-faq-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

#section-faq.content-section,
.content-section.gs-faq-container,
.content-section.gymsmart-faq-container {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.gs-faq-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.gs-faq-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================================
   5. TABLE OF CONTENTS (TOC) COMPONENT
   ============================================================ */
.blog-toc-wrapper {
    width: 100%;
    margin-bottom: 32px;
}

.blog-toc-card {
    background: var(--blog-card-dark-bg);
    border: 1px solid var(--blog-card-dark-border);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 36px !important;
    margin-bottom: 50px !important;
}

body:not(.dark) .blog-toc-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 8px 24px rgba(114, 78, 191, 0.06) !important;
    margin-top: 36px !important;
    margin-bottom: 50px !important;
}

.blog-toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease;
}

body:not(.dark) .blog-toc-header {
    border-bottom-color: #f1f5f9;
}

.blog-toc-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.toc-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(147, 51, 234, 0.15);
    border: 1px solid rgba(192, 132, 252, 0.3);
    color: #c084fc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.toc-main-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    display: block;
    line-height: 1.2;
}

body:not(.dark) .toc-main-title {
    color: #0f172a;
}

.toc-sub-title {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.55);
}

body:not(.dark) .toc-sub-title {
    color: #64748b;
}

.toc-counter {
    font-size: 12px;
    font-weight: 750;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 4px 12px;
    border-radius: 999px;
}

.toc-toggle-arrow {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    transition: transform 0.3s ease;
}

body:not(.dark) .toc-toggle-arrow {
    color: #64748b;
}

.blog-toc-card.collapsed .toc-toggle-arrow {
    transform: rotate(-90deg);
}

.blog-toc-card.collapsed .blog-toc-body {
    display: none;
}

.blog-toc-body {
    padding: 18px 24px 24px;
}

.blog-toc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 860px) {
    .blog-toc-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.blog-toc-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.22s ease;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(192, 132, 252, 0.15);
}

.blog-toc-link:hover {
    background: rgba(147, 51, 234, 0.16);
    border-color: rgba(192, 132, 252, 0.45);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(147, 51, 234, 0.18);
}

body:not(.dark) .blog-toc-link {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

body:not(.dark) .blog-toc-link:hover {
    background: #faf5ff;
    border-color: #d8b4fe;
    box-shadow: 0 6px 18px rgba(126, 34, 206, 0.08);
}

.toc-num {
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-size: 11.5px;
    font-weight: 800;
    color: #c084fc;
    background: rgba(147, 51, 234, 0.2);
    border: 1px solid rgba(192, 132, 252, 0.3);
    padding: 3px 8px;
    border-radius: 7px;
    flex-shrink: 0;
    margin-top: 1px;
}

body:not(.dark) .toc-num {
    color: #7e22ce;
    background: #f3e8ff;
    border-color: #d8b4fe;
}

.toc-text {
    font-size: 13.5px;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.45;
    flex: 1;
    white-space: normal;
    word-break: break-word;
}

.blog-toc-link:hover .toc-text {
    color: #ffffff;
}

body:not(.dark) .toc-text {
    color: #1e293b;
}

body:not(.dark) .blog-toc-link:hover .toc-text {
    color: #7e22ce;
}

.toc-arrow {
    font-size: 11px;
    color: rgba(192, 132, 252, 0.5);
    transition: transform 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
    margin-top: 4px;
}

.blog-toc-link:hover .toc-arrow {
    color: #c084fc;
    transform: translateX(3px);
}

body:not(.dark) .toc-arrow {
    color: #a855f7;
}

/* ============================================================
   6. IN-ARTICLE CONVERSION CTA BOX
   ============================================================ */
.blog-inarticle-cta-box {
    position: relative;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(28, 18, 56, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(192, 132, 252, 0.35);
    padding: clamp(24px, 3.5vw, 36px);
    margin: 36px 0;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 40px rgba(147, 51, 234, 0.15);
    backdrop-filter: blur(14px);
    overflow: hidden;
}

body:not(.dark) .blog-inarticle-cta-box {
    background: linear-gradient(135deg, #faf5ff 0%, #f0fdf4 100%) !important;
    border: 1px solid #d8b4fe !important;
    box-shadow: 0 10px 30px rgba(126, 34, 206, 0.08) !important;
}

.inarticle-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #c084fc;
    background: rgba(147, 51, 234, 0.2);
    border: 1px solid rgba(192, 132, 252, 0.35);
    padding: 4px 12px;
    border-radius: 999px;
}

body:not(.dark) .inarticle-badge {
    color: #7e22ce;
    background: #f3e8ff;
    border-color: #d8b4fe;
}

.inarticle-subbadge {
    font-size: 11.5px;
    font-weight: 750;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 4px 12px;
    border-radius: 999px;
}

.inarticle-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    font-weight: 850;
    color: #ffffff;
    line-height: 1.28;
    margin: 12px 0 10px 0;
}

body:not(.dark) .inarticle-title {
    color: #0f172a;
}

.inarticle-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    max-width: 820px;
    margin-bottom: 20px;
}

body:not(.dark) .inarticle-desc {
    color: #475569;
}

.inarticle-btn-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-wa-glow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff !important;
    font-weight: 750;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 12px;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.35);
    transition: all 0.25s ease;
}

.btn-wa-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(34, 197, 94, 0.5);
    color: #ffffff !important;
}

.btn-demo-glow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
    color: #ffffff !important;
    font-weight: 750;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.35);
    transition: all 0.25s ease;
    cursor: pointer;
}

.btn-demo-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(168, 85, 247, 0.5);
    color: #ffffff !important;
}

/* ============================================================
   7. BOTTOM VIP CONVERSION CARD
   ============================================================ */
.blog-bottom-vip-card {
    position: relative;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(22, 17, 46, 0.96) 0%, rgba(10, 8, 22, 0.98) 100%);
    border: 1px solid rgba(192, 132, 252, 0.32);
    padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 42px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 50px rgba(147, 51, 234, 0.15);
    backdrop-filter: blur(18px);
    margin: 48px 0 36px;
    overflow: hidden;
}

body:not(.dark) .blog-bottom-vip-card {
    background: linear-gradient(135deg, #ffffff 0%, #fbf8ff 100%) !important;
    border: 1px solid #d8b4fe !important;
    box-shadow: 0 15px 35px rgba(126, 34, 206, 0.08) !important;
}

.bottom-vip-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: rgba(147, 51, 234, 0.18);
    border: 1px solid rgba(192, 132, 252, 0.35);
    color: #c084fc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 18px;
}

.bottom-vip-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 850;
    color: #ffffff;
    line-height: 1.22;
    margin-bottom: 14px;
}

body:not(.dark) .bottom-vip-title {
    color: #0f172a;
}

.bottom-vip-desc {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.75);
    max-width: 780px;
    margin: 0 auto 24px;
}

body:not(.dark) .bottom-vip-desc {
    color: #475569;
}

.bottom-vip-chips {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bottom-vip-chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 6px 16px;
    border-radius: 999px;
}

body:not(.dark) .bottom-vip-chips span {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.bottom-vip-cta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ============================================================
   8. RELATED ARTICLES SHOWCASE
   ============================================================ */
.blog-related-section {
    margin: 50px 0 20px;
}

.related-section-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.55rem;
    font-weight: 850;
    color: #ffffff;
}

body:not(.dark) .related-section-title {
    color: #0f172a;
}

.related-section-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
}

body:not(.dark) .related-section-subtitle {
    color: #64748b;
}

.btn-all-guides {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 750;
    color: #c084fc !important;
    text-decoration: none !important;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(147, 51, 234, 0.12);
    border: 1px solid rgba(192, 132, 252, 0.25);
    transition: all 0.2s ease;
}

.btn-all-guides:hover {
    background: rgba(147, 51, 234, 0.2);
    border-color: #c084fc;
    transform: translateX(3px);
}

.related-card-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
    height: 100%;
}

.related-card {
    background: var(--blog-card-dark-bg);
    border: 1px solid var(--blog-card-dark-border);
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(14px);
    transition: all 0.3s ease;
}

body:not(.dark) .related-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 8px 24px rgba(114, 78, 191, 0.05) !important;
}

.related-card:hover {
    transform: translateY(-5px);
    border-color: rgba(192, 132, 252, 0.4);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.related-card-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 54%;
    overflow: hidden;
    background: #0f1322;
}

.related-card-img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transition: transform 0.4s ease;
}

.related-card:hover .related-card-img-wrap img {
    transform: scale(1.05);
}

.related-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(12, 10, 26, 0.85);
    border: 1px solid rgba(192, 132, 252, 0.35);
    color: #c084fc;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
}

.related-card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.related-card-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.05rem;
    font-weight: 750;
    line-height: 1.35;
    color: #ffffff;
    margin-bottom: 14px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body:not(.dark) .related-card-title {
    color: #0f172a;
}

.related-title-link {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.related-title-link:hover {
    color: #38bdf8 !important;
}

.related-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 12px;
}

body:not(.dark) .related-card-meta {
    border-top-color: #f1f5f9;
    color: #64748b;
}

.read-more-text {
    color: #38bdf8;
    font-weight: 750;
}

/* ============================================================
   9. STEP 2: HIGH-CONTRAST TABLES, INFOGRAPHICS & MOBILE POLISH
   ============================================================ */

/* --- 9.1 ULTRA-PREMIUM RESPONSIVE TABLE SYSTEM --- */
.gymsmart-table-wrapper,
.table-responsive {
    position: relative;
    border-radius: 18px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(135deg, rgba(17, 13, 36, 0.85) 0%, rgba(10, 8, 22, 0.95) 100%) !important;
    border: 1px solid rgba(192, 132, 252, 0.28) !important;
    margin: 28px 0 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.gymsmart-table-wrapper::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    height: 7px;
}

.gymsmart-table-wrapper::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}

.gymsmart-table-wrapper::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(192, 132, 252, 0.4);
    border-radius: 999px;
}

.gymsmart-table-wrapper::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #c084fc;
}

.article-body-content table,
.gymsmart-table-wrapper table,
.table-responsive table,
.article-body-content .table,
.gymsmart-table-wrapper .table,
.table-responsive .table {
    width: 100% !important;
    min-width: 580px;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 0 !important;
    font-size: 0.93rem;
    --bs-table-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-active-bg: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-color: rgba(255, 255, 255, 0.88) !important;
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

.article-body-content table > :not(caption) > * > *,
.gymsmart-table-wrapper table > :not(caption) > * > *,
.table-responsive table > :not(caption) > * > * {
    background-color: transparent !important;
    box-shadow: none !important;
}

.article-body-content table thead th,
.gymsmart-table-wrapper table thead th,
.table-responsive table thead th {
    background-color: rgba(147, 51, 234, 0.28) !important;
    box-shadow: none !important;
    color: #e9d5ff !important;
    font-weight: 800 !important;
    font-size: 0.86rem !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 16px 18px !important;
    border-bottom: 2px solid rgba(192, 132, 252, 0.35) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle;
    white-space: nowrap;
}

.article-body-content table tbody td,
.gymsmart-table-wrapper table tbody td,
.table-responsive table tbody td {
    padding: 14px 18px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle;
    line-height: 1.55;
    transition: background 0.15s ease;
}

.article-body-content table tbody tr:hover td,
.gymsmart-table-wrapper table tbody tr:hover td,
.table-responsive table tbody tr:hover td {
    background-color: rgba(147, 51, 234, 0.12) !important;
}

/* Light Mode Overrides for Tables */
body:not(.dark) .gymsmart-table-wrapper,
body:not(.dark) .table-responsive {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 6px 22px rgba(114, 78, 191, 0.05) !important;
}

body:not(.dark) .article-body-content table,
body:not(.dark) .gymsmart-table-wrapper table,
body:not(.dark) .table-responsive table,
body:not(.dark) .article-body-content .table,
body:not(.dark) .gymsmart-table-wrapper .table,
body:not(.dark) .table-responsive .table {
    --bs-table-bg: #ffffff !important;
    --bs-table-color: #1e293b !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
}

body:not(.dark) .article-body-content table > :not(caption) > * > *,
body:not(.dark) .gymsmart-table-wrapper table > :not(caption) > * > *,
body:not(.dark) .table-responsive table > :not(caption) > * > * {
    background-color: #ffffff !important;
    box-shadow: none !important;
}

body:not(.dark) .article-body-content table thead th,
body:not(.dark) .gymsmart-table-wrapper table thead th,
body:not(.dark) .table-responsive table thead th {
    background-color: #f3e8ff !important;
    box-shadow: none !important;
    color: #6b21a8 !important;
    border-bottom: 2px solid #d8b4fe !important;
}

body:not(.dark) .article-body-content table tbody td,
body:not(.dark) .gymsmart-table-wrapper table tbody td,
body:not(.dark) .table-responsive table tbody td {
    background-color: #ffffff !important;
    box-shadow: none !important;
    color: #334155 !important;
    border-top-color: #f1f5f9 !important;
}

body:not(.dark) .article-body-content table tbody tr:hover td,
body:not(.dark) .gymsmart-table-wrapper table tbody tr:hover td,
body:not(.dark) .table-responsive table tbody tr:hover td {
    background-color: #f8fafc !important;
}
    background: #faf5ff !important;
}

body:not(.dark) .gymsmart-table-wrapper::-webkit-scrollbar-track,
body:not(.dark) .table-responsive::-webkit-scrollbar-track {
    background: #f8fafc;
}

body:not(.dark) .gymsmart-table-wrapper::-webkit-scrollbar-thumb,
body:not(.dark) .table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}

body:not(.dark) .gymsmart-table-wrapper::-webkit-scrollbar-thumb:hover,
body:not(.dark) .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* --- 9.2 INFOGRAPHIC CARDS, STAT STRIPS & CALLOUT LIGHT MODE PERFECTION --- */
body:not(.dark) .article-body-content [style*="background: rgba(15, 23, 42"],
body:not(.dark) .article-body-content [style*="background: rgba(15,23,42"],
body:not(.dark) .article-body-content [style*="background: rgba(11, 17, 32"],
body:not(.dark) .article-body-content [style*="background: rgba(11,17,32"],
body:not(.dark) .article-body-content [style*="background: #0b0f19"],
body:not(.dark) .article-body-content [style*="background: #0f172a"] {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    color: #1e293b !important;
}

body:not(.dark) .article-body-content [style*="background: rgba(15, 23, 42"] h3,
body:not(.dark) .article-body-content [style*="background: rgba(15,23,42"] h3,
body:not(.dark) .article-body-content [style*="background: rgba(15, 23, 42"] h4,
body:not(.dark) .article-body-content [style*="background: rgba(15,23,42"] h4,
body:not(.dark) .article-body-content [style*="background: #0b0f19"] h4,
body:not(.dark) .article-body-content [style*="background: rgba(15, 23, 42"] p,
body:not(.dark) .article-body-content [style*="background: rgba(15,23,42"] p,
body:not(.dark) .article-body-content [style*="background: rgba(15, 23, 42"] span:not([style*="background:"]),
body:not(.dark) .article-body-content [style*="background: rgba(15,23,42"] span:not([style*="background:"]) {
    color: #1e293b !important;
}

body:not(.dark) .article-body-content [style*="linear-gradient(145deg, rgba(15, 23, 42"] {
    background: linear-gradient(145deg, #ffffff 0%, #fbf8ff 100%) !important;
    border-color: #d8b4fe !important;
    box-shadow: 0 10px 30px rgba(126, 34, 206, 0.06) !important;
}

body:not(.dark) .article-body-content [style*="linear-gradient(145deg, rgba(15, 23, 42"] h4,
body:not(.dark) .article-body-content [style*="linear-gradient(145deg, rgba(15, 23, 42"] span:not([style*="background:"]) {
    color: #1e293b !important;
}

body:not(.dark) .article-body-content [style*="border-bottom: 1px solid rgba(255,255,255"] {
    border-bottom-color: #f1f5f9 !important;
}

/* Fix text contrast in light mode */
body:not(.dark) .article-body-content [style*="color: #f8fafc"],
body:not(.dark) .article-body-content [style*="color: #f1f5f9"],
body:not(.dark) .article-body-content [style*="color: #cbd5e1"],
body:not(.dark) .article-body-content [style*="color: #ffffff"],
body:not(.dark) .article-body-content [style*="color: #fff"] {
    color: #1e293b !important;
}

body:not(.dark) .article-body-content [style*="color: rgba(248, 250, 252"],
body:not(.dark) .article-body-content [style*="color: rgba(248,250,252"],
body:not(.dark) .article-body-content [style*="color: rgba(255, 255, 255"],
body:not(.dark) .article-body-content [style*="color: rgba(255,255,255"] {
    color: #475569 !important;
}

/* --- 9.3 MOBILE VIEWPORT & SPACING OPTIMIZATIONS (<= 768px & <= 480px) --- */
@media (max-width: 768px) {
    .content-section {
        border-radius: 18px !important;
        padding: 20px 16px !important;
        margin-bottom: 22px !important;
    }

    .article-body-content h2 {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
        padding-left: 12px !important;
        border-left-width: 3.5px !important;
        margin-bottom: 14px !important;
    }

    .article-body-content h3 {
        font-size: 1.15rem !important;
        margin: 18px 0 10px 0 !important;
    }

    .article-body-content p {
        font-size: 0.98rem !important;
        line-height: 1.72 !important;
        margin-bottom: 16px !important;
    }

    .article-body-content ul,
    .article-body-content ol {
        padding-left: 20px !important;
        margin: 12px 0 18px !important;
    }

    .article-body-content li {
        font-size: 0.95rem !important;
        margin-bottom: 8px !important;
    }

    .content-section img,
    .content-section video,
    .article-body-content img,
    .article-body-content video {
        border-radius: 14px !important;
        margin: 18px 0 !important;
    }

    .gymsmart-takeaways-box {
        padding: 20px 16px !important;
        border-radius: 18px !important;
        margin-bottom: 22px !important;
    }

    .gymsmart-takeaways-box h3 {
        font-size: 1.15rem !important;
    }

    .gymsmart-table-wrapper,
    .table-responsive {
        border-radius: 14px !important;
        margin: 20px 0 !important;
    }

    .article-body-content table thead th,
    .gymsmart-table-wrapper table thead th,
    .table-responsive table thead th {
        padding: 12px 14px !important;
        font-size: 0.8rem !important;
    }

    .article-body-content table tbody td,
    .gymsmart-table-wrapper table tbody td,
    .table-responsive table tbody td {
        padding: 11px 14px !important;
        font-size: 0.88rem !important;
    }

    .inarticle-btn-group {
        flex-direction: column !important;
        width: 100% !important;
    }

    .btn-wa-glow,
    .btn-demo-glow {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .bottom-vip-cta-row {
        flex-direction: column !important;
        width: 100% !important;
    }

    .bottom-vip-cta-row .btn-demo-glow,
    .bottom-vip-cta-row .btn-wa-glow {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .blog-bottom-vip-card {
        padding: 30px 18px !important;
        border-radius: 20px !important;
        margin: 36px 0 24px !important;
    }

    .bottom-vip-chips {
        gap: 8px !important;
    }

    .bottom-vip-chips span {
        font-size: 11.5px !important;
        padding: 5px 12px !important;
    }
}

@media (max-width: 480px) {
    .blog-detail-container {
        padding: 0 12px !important;
    }

    .content-section {
        padding: 16px 14px !important;
        border-radius: 14px !important;
    }

    .blog-hero-header {
        padding: 24px 0 20px !important;
    }

    .blog-hero-title {
        font-size: 1.75rem !important;
        line-height: 1.22 !important;
    }

    .blog-quick-stats {
        gap: 8px !important;
    }

    .quick-stat-item {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    .article-bottom-bar {
        padding: 12px 16px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        border-radius: 18px !important;
    }

    .article-share-group {
        justify-content: space-between !important;
        width: 100% !important;
    }

    .btn-back-blog {
        justify-content: center !important;
        width: 100% !important;
    }
}

/* ============================================================
   FESTIVE PLAYBOOK & EXECUTIVE GUIDE DESIGN SYSTEM
   Full Dual-Theme Compatibility (Dark Theme & Light Theme)
   ============================================================ */

/* 1. Cockpit Header & Subtitles */
.cockpit-subtitle {
    font-size: 0.84rem;
    font-weight: 600;
    color: #fbbf24;
}
body:not(.dark) .cockpit-subtitle {
    color: #b45309 !important;
}

/* 2. Cockpit 4-Stat Cards */
.festive-stat-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 14px 16px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body:not(.dark) .festive-stat-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}
.festive-stat-card:hover {
    transform: translateY(-2px);
}

.festive-stat-val {
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.1;
}
.festive-stat-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 4px;
    color: #cbd5e1;
    letter-spacing: 0.4px;
}
body:not(.dark) .festive-stat-label {
    color: #64748b !important;
}

/* Stat color variants */
.stat-amber {
    border-color: rgba(245, 158, 11, 0.35);
}
.stat-amber .festive-stat-val {
    color: #fbbf24;
}
body:not(.dark) .stat-amber {
    border-color: #fde68a !important;
}
body:not(.dark) .stat-amber .festive-stat-val {
    color: #b45309 !important;
}

.stat-green {
    border-color: rgba(34, 197, 94, 0.35);
}
.stat-green .festive-stat-val {
    color: #4ade80;
}
body:not(.dark) .stat-green {
    border-color: #bbf7d0 !important;
}
body:not(.dark) .stat-green .festive-stat-val {
    color: #15803d !important;
}

.stat-purple {
    border-color: rgba(192, 132, 252, 0.35);
}
.stat-purple .festive-stat-val {
    color: #c084fc;
}
body:not(.dark) .stat-purple {
    border-color: #e9d5ff !important;
}
body:not(.dark) .stat-purple .festive-stat-val {
    color: #7e22ce !important;
}

.stat-sky {
    border-color: rgba(56, 189, 248, 0.35);
}
.stat-sky .festive-stat-val {
    color: #38bdf8;
}
body:not(.dark) .stat-sky {
    border-color: #bae6fd !important;
}
body:not(.dark) .stat-sky .festive-stat-val {
    color: #0284c7 !important;
}

/* 3. Comparison Matrix (Chaos vs Smart Automation) */
.festive-compare-card {
    border-radius: 14px;
    padding: 18px 20px;
    height: 100%;
    transition: transform 0.2s ease;
}
.festive-compare-card.chaos {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.35);
}
body:not(.dark) .festive-compare-card.chaos {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.05) !important;
}
.festive-compare-card.chaos .compare-badge {
    background: #ef4444;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
}
.festive-compare-card.chaos .compare-icon {
    color: #f87171;
    font-size: 18px;
}
body:not(.dark) .festive-compare-card.chaos .compare-icon {
    color: #dc2626 !important;
}
.festive-compare-card.chaos .compare-title {
    color: #f87171;
    font-size: 0.98rem;
    font-weight: 800;
}
body:not(.dark) .festive-compare-card.chaos .compare-title {
    color: #b91c1c !important;
}
.festive-compare-card.chaos ul {
    margin: 0;
    padding-left: 20px;
    color: #fca5a5;
    font-size: 0.88rem;
    line-height: 1.65;
}
body:not(.dark) .festive-compare-card.chaos ul {
    color: #991b1b !important;
}

.festive-compare-card.smart {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.35);
}
body:not(.dark) .festive-compare-card.smart {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.05) !important;
}
.festive-compare-card.smart .compare-badge {
    background: #16a34a;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
}
.festive-compare-card.smart .compare-icon {
    color: #22c55e;
    font-size: 18px;
}
body:not(.dark) .festive-compare-card.smart .compare-icon {
    color: #16a34a !important;
}
.festive-compare-card.smart .compare-title {
    color: #4ade80;
    font-size: 0.98rem;
    font-weight: 800;
}
body:not(.dark) .festive-compare-card.smart .compare-title {
    color: #15803d !important;
}
.festive-compare-card.smart ul {
    margin: 0;
    padding-left: 20px;
    color: #86efac;
    font-size: 0.88rem;
    line-height: 1.65;
}
body:not(.dark) .festive-compare-card.smart ul {
    color: #166534 !important;
}

/* 4. Strategic Festive Callout Boxes */
.festive-callout {
    border-radius: 12px;
    padding: 18px 22px;
    margin: 24px 0;
}
.festive-callout.callout-purple {
    background: rgba(147, 51, 234, 0.1);
    border: 1px solid rgba(192, 132, 252, 0.25);
    border-left: 4px solid #c084fc;
}
body:not(.dark) .festive-callout.callout-purple {
    background: #faf5ff !important;
    border-color: #e9d5ff !important;
    border-left-color: #7e22ce !important;
    box-shadow: 0 4px 14px rgba(126, 34, 206, 0.05) !important;
}
.festive-callout.callout-purple h4,
.festive-callout.callout-purple .callout-card-title {
    margin: 0 0 8px;
    color: #c084fc;
    font-size: 1.05rem;
    font-weight: 800;
}
body:not(.dark) .festive-callout.callout-purple h4,
body:not(.dark) .festive-callout.callout-purple .callout-card-title {
    color: #7e22ce !important;
}

.festive-callout.callout-amber {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid #f59e0b;
}
body:not(.dark) .festive-callout.callout-amber {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    border-left-color: #d97706 !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.05) !important;
}
.festive-callout.callout-amber h4,
.festive-callout.callout-amber .callout-card-title {
    margin: 0 0 8px;
    color: #fbbf24;
    font-size: 1.05rem;
    font-weight: 800;
}
body:not(.dark) .festive-callout.callout-amber h4,
body:not(.dark) .festive-callout.callout-amber .callout-card-title {
    color: #b45309 !important;
}

.festive-callout p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
}
body:not(.dark) .festive-callout p {
    color: #334155 !important;
}

/* 5. 3-Pillar Feature Action Cards (Section 3 Dues Recovery) */
.festive-feature-card {
    background: rgba(20, 16, 42, 0.7);
    border: 1px solid rgba(192, 132, 252, 0.25);
    border-radius: 14px;
    padding: 20px;
    height: 100%;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
body:not(.dark) .festive-feature-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
.festive-feature-card:hover {
    transform: translateY(-2px);
    border-color: rgba(192, 132, 252, 0.5);
}
body:not(.dark) .festive-feature-card:hover {
    border-color: #cbd5e1 !important;
}
.festive-feature-card .card-num-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 850;
    margin-bottom: 12px;
}
.festive-feature-card .card-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: #ffffff;
}
body:not(.dark) .festive-feature-card .card-title {
    color: #0f172a !important;
}
.festive-feature-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
    margin: 0;
}
body:not(.dark) .festive-feature-card p {
    color: #475569 !important;
}

/* 6. WhatsApp Script Cards */
.festive-wa-card {
    background: rgba(20, 16, 42, 0.85);
    border: 1.5px solid rgba(34, 197, 94, 0.35);
    border-radius: 18px;
    padding: 22px 24px;
    margin: 24px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
body:not(.dark) .festive-wa-card {
    background: #ffffff !important;
    border-color: #86efac !important;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.08) !important;
}
.festive-wa-card.border-amber {
    border-color: rgba(245, 158, 11, 0.4);
}
body:not(.dark) .festive-wa-card.border-amber {
    border-color: #fde68a !important;
}
.festive-wa-card.border-sky {
    border-color: rgba(56, 189, 248, 0.4);
}
body:not(.dark) .festive-wa-card.border-sky {
    border-color: #bae6fd !important;
}
.festive-wa-card.border-purple {
    border-color: rgba(192, 132, 252, 0.4);
}
body:not(.dark) .festive-wa-card.border-purple {
    border-color: #e9d5ff !important;
}

.festive-wa-card .wa-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.festive-wa-card .wa-title {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 800;
}
body:not(.dark) .festive-wa-card .wa-title {
    color: #0f172a !important;
}

.wa-msg-bubble {
    background: #111b21;
    border: 1px solid rgba(37, 211, 102, 0.2);
    border-radius: 12px;
    padding: 16px 18px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
    font-size: 0.9rem;
    color: #e9edef;
    line-height: 1.65;
    white-space: pre-wrap;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}
body:not(.dark) .wa-msg-bubble {
    background: #efeae2 !important;
    border-color: #cbd5e1 !important;
    color: #111b21 !important;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

/* 7. Checklist Box (Section 8) */
.festive-checklist-box {
    background: rgba(20, 16, 42, 0.75);
    border: 1px solid rgba(192, 132, 252, 0.3);
    border-radius: 16px;
    padding: 24px 28px;
    margin: 20px 0;
}
body:not(.dark) .festive-checklist-box {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
.festive-checklist-box .checklist-title {
    color: #c084fc;
    font-size: 1.15rem;
    margin-bottom: 16px;
    font-weight: 800;
}
body:not(.dark) .festive-checklist-box .checklist-title {
    color: #7e22ce !important;
}
.festive-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.94rem;
    color: rgba(255, 255, 255, 0.88);
}
body:not(.dark) .festive-checklist-item {
    color: #334155 !important;
}
.festive-checklist-item strong {
    color: #ffffff;
}
body:not(.dark) .festive-checklist-item strong {
    color: #0f172a !important;
}
.festive-checklist-item .chk-ico {
    color: #4ade80;
    font-size: 18px;
    line-height: 1.2;
    flex-shrink: 0;
}
body:not(.dark) .festive-checklist-item .chk-ico {
    color: #16a34a !important;
}

/* 8. Status Badges for Tables */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}
.status-pill.open {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}
body:not(.dark) .status-pill.open {
    background: #dcfce7 !important;
    color: #15803d !important;
    border-color: #86efac !important;
}
.status-pill.closed {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
}
body:not(.dark) .status-pill.closed {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border-color: #fca5a5 !important;
}
.status-pill.half {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
body:not(.dark) .status-pill.half {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}
.status-pill.optional {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
}
body:not(.dark) .status-pill.optional {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    border-color: #bae6fd !important;
}

/* Comparison Table Specific Contrast */
.td-metric-loss {
    color: #fca5a5;
}
body:not(.dark) .td-metric-loss {
    color: #b91c1c !important;
}
.td-metric-win {
    color: #86efac;
    font-weight: 700;
}
body:not(.dark) .td-metric-win {
    color: #15803d !important;
}

/* ============================================================
   RICH VISUAL PLAYBOOK COMPONENTS (ICONS, ROLE CARDS, WA MOCKUPS)
   100% Dual-Theme Native Support (Dark Mode & Light Mode)
   ============================================================ */

/* Section Micro-Badge Header */
.section-kicker-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.section-kicker-pill {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(147, 51, 234, 0.15);
    color: #c084fc;
    border: 1px solid rgba(192, 132, 252, 0.3);
}
body:not(.dark) .section-kicker-pill {
    background: #f3e8ff !important;
    color: #7e22ce !important;
    border-color: #d8b4fe !important;
}
.section-kicker-sub {
    font-size: 0.8rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
body:not(.dark) .section-kicker-sub {
    color: #64748b !important;
}

/* Visual Schedule Timeline Grid (Section 1) */
.festive-timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 20px 0 24px;
}
.festive-timeline-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
body:not(.dark) .festive-timeline-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}
.festive-timeline-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.festive-timeline-card .day-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.festive-timeline-card .day-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
}
body:not(.dark) .festive-timeline-card .day-name {
    color: #0f172a !important;
}
.festive-timeline-card .day-timing {
    font-size: 0.74rem;
    color: #cbd5e1;
    line-height: 1.4;
}
body:not(.dark) .festive-timeline-card .day-timing {
    color: #64748b !important;
}

/* Objection Dialogue Card (Section 1) */
.objection-dialogue-box {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(192, 132, 252, 0.25);
    border-radius: 16px;
    padding: 20px 22px;
    margin: 22px 0;
}
body:not(.dark) .objection-dialogue-box {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}
.dialogue-bubble-member {
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid #ef4444;
    border-radius: 0 10px 10px 0;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 0.92rem;
    color: #fca5a5;
    line-height: 1.6;
}
body:not(.dark) .dialogue-bubble-member {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-left-color: #dc2626 !important;
}
.dialogue-bubble-owner {
    background: rgba(34, 197, 94, 0.1);
    border-left: 4px solid #22c55e;
    border-radius: 0 10px 10px 0;
    padding: 12px 16px;
    font-size: 0.92rem;
    color: #86efac;
    line-height: 1.6;
}
body:not(.dark) .dialogue-bubble-owner {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border-left-color: #16a34a !important;
}

/* 4-Role Visual Staff Cards (Section 2) */
.festive-role-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    height: 100%;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}
body:not(.dark) .festive-role-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
.festive-role-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}
body:not(.dark) .festive-role-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.festive-role-card.role-amber {
    border-color: rgba(245, 158, 11, 0.35);
}
body:not(.dark) .festive-role-card.role-amber {
    border-color: #fde68a !important;
}
.festive-role-card.role-purple {
    border-color: rgba(192, 132, 252, 0.35);
}
body:not(.dark) .festive-role-card.role-purple {
    border-color: #e9d5ff !important;
}
.festive-role-card.role-green {
    border-color: rgba(34, 197, 94, 0.35);
}
body:not(.dark) .festive-role-card.role-green {
    border-color: #bbf7d0 !important;
}
.festive-role-card.role-sky {
    border-color: rgba(56, 189, 248, 0.35);
}
body:not(.dark) .festive-role-card.role-sky {
    border-color: #bae6fd !important;
}

.role-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.role-avatar-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.role-card-header h4,
.role-card-header .role-card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 850;
    color: #ffffff;
}
body:not(.dark) .role-card-header h4,
body:not(.dark) .role-card-header .role-card-title {
    color: #0f172a !important;
}
.role-pay-sub {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
}
body:not(.dark) .role-pay-sub {
    color: #64748b !important;
}

.role-bonus-box {
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.role-bonus-label {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.role-bonus-value {
    font-size: 1.15rem;
    font-weight: 900;
}

.role-gift-strip {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #cbd5e1;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
body:not(.dark) .role-gift-strip {
    color: #475569 !important;
}
.role-retention-pill {
    margin-top: auto;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    font-weight: 600;
}

/* 3-Step 72-Hour Cash Sprint Stepper (Section 3) */
.sprint-stepper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 20px 0;
}
.sprint-step-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px 20px;
    position: relative;
    transition: transform 0.2s ease;
}
body:not(.dark) .sprint-step-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}
.sprint-step-card:hover {
    transform: translateY(-3px);
}
.sprint-time-tag {
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 10px;
}
.sprint-step-title {
    font-size: 1.02rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}
body:not(.dark) .sprint-step-title {
    color: #0f172a !important;
}
.sprint-step-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0;
}
body:not(.dark) .sprint-step-desc {
    color: #475569 !important;
}

/* 3 Festive Offer Pricing Cards (Section 4) */
.festive-offer-card {
    background: rgba(15, 23, 42, 0.85);
    border-radius: 18px;
    padding: 24px 22px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body:not(.dark) .festive-offer-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}
.festive-offer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
body:not(.dark) .festive-offer-card:hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1) !important;
}

.festive-offer-card.gold-tier {
    border: 2px solid #fbbf24;
}
body:not(.dark) .festive-offer-card.gold-tier {
    border: 2px solid #f59e0b !important;
}
.festive-offer-card.cyan-tier {
    border: 1.5px solid rgba(56, 189, 248, 0.45);
}
body:not(.dark) .festive-offer-card.cyan-tier {
    border: 1.5px solid #38bdf8 !important;
}
.festive-offer-card.purple-tier {
    border: 1.5px solid rgba(192, 132, 252, 0.45);
}
body:not(.dark) .festive-offer-card.purple-tier {
    border: 1.5px solid #c084fc !important;
}

.offer-top-badge {
    position: absolute;
    top: -12px;
    left: 20px;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 999px;
}
.offer-title {
    font-size: 1.25rem;
    font-weight: 900;
    color: #ffffff;
    margin: 8px 0 6px;
}
body:not(.dark) .offer-title {
    color: #0f172a !important;
}
.offer-sub {
    font-size: 0.82rem;
    color: #94a3b8;
    margin-bottom: 16px;
}
body:not(.dark) .offer-sub {
    color: #64748b !important;
}
.offer-price-banner {
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.offer-main-price {
    font-size: 1.5rem;
    font-weight: 900;
}
.offer-benefit-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.offer-benefit-list li {
    font-size: 0.88rem;
    line-height: 1.5;
    color: #cbd5e1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
body:not(.dark) .offer-benefit-list li {
    color: #334155 !important;
}
.offer-footer-pill {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    margin-top: auto;
}

/* Authentic WhatsApp Chat Mockup (Section 5) */
.wa-chat-window {
    background: #0b141a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    margin: 24px 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
body:not(.dark) .wa-chat-window {
    background: #efeae2 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}
.wa-window-header {
    background: #202c33;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body:not(.dark) .wa-window-header {
    background: #008069 !important;
    border-bottom: none !important;
}
.wa-contact-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wa-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #25d366;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.4);
}
.wa-contact-name {
    font-size: 0.94rem;
    font-weight: 700;
    color: #e9edef;
    display: flex;
    align-items: center;
    gap: 6px;
}
body:not(.dark) .wa-contact-name {
    color: #ffffff !important;
}
.wa-status-text {
    font-size: 0.74rem;
    color: #8696a0;
}
body:not(.dark) .wa-status-text {
    color: rgba(255, 255, 255, 0.85) !important;
}
.btn-copy-wa-script {
    background: rgba(37, 211, 102, 0.18);
    border: 1px solid rgba(37, 211, 102, 0.4);
    color: #25d366;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
body:not(.dark) .btn-copy-wa-script {
    background: #ffffff !important;
    color: #008069 !important;
    border-color: #ffffff !important;
}
.btn-copy-wa-script:hover {
    background: #25d366;
    color: #ffffff;
}

.wa-chat-canvas {
    padding: 18px 16px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}
body:not(.dark) .wa-chat-canvas {
    background-color: #efeae2 !important;
    background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px) !important;
}
.wa-bubble-sent {
    background: #005c4b;
    color: #e9edef;
    border-radius: 12px 0 12px 12px;
    padding: 14px 16px;
    max-width: 90%;
    margin-left: auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
    font-size: 0.88rem;
    line-height: 1.65;
    white-space: pre-wrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    position: relative;
}
body:not(.dark) .wa-bubble-sent {
    background: #d9fdd3 !important;
    color: #111b21 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}
.wa-bubble-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 6px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.65);
}
body:not(.dark) .wa-bubble-meta {
    color: rgba(0, 0, 0, 0.5) !important;
}
.wa-bubble-meta i {
    color: #53bdeb;
}

/* 4-Card AMC Maintenance Matrix (Section 6) */
.amc-matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin: 20px 0 24px;
}
.amc-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 18px 16px;
    height: 100%;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
body:not(.dark) .amc-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}
.amc-card:hover {
    transform: translateY(-3px);
    border-color: rgba(192, 132, 252, 0.4);
}
.amc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.amc-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.amc-badge {
    font-size: 0.7rem;
    font-weight: 850;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
}
.amc-title {
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}
body:not(.dark) .amc-title {
    color: #0f172a !important;
}
.amc-desc {
    font-size: 0.86rem;
    line-height: 1.55;
    color: #cbd5e1;
    margin: 0;
}
body:not(.dark) .amc-desc {
    color: #475569 !important;
}

/* Checklist Milestone Cards (Section 8) */
.checklist-timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin: 18px 0;
}
.checklist-milestone-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
body:not(.dark) .checklist-milestone-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03) !important;
}
.checklist-milestone-card:hover {
    transform: translateY(-2px);
    border-color: rgba(74, 222, 128, 0.4);
}
.chk-day-badge {
    font-size: 0.74rem;
    font-weight: 850;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
.chk-body {
    flex: 1;
}
.chk-body-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
}
body:not(.dark) .chk-body-title {
    color: #0f172a !important;
}
.chk-body-desc {
    font-size: 0.84rem;
    line-height: 1.5;
    color: #cbd5e1;
    margin: 0;
}
body:not(.dark) .chk-body-desc {
    color: #475569 !important;
}

/* ============================================================
   BREADCRUMB NAVIGATION & FEATURED SNIPPET TAKEAWAYS CARD
   ============================================================ */

.blog-breadcrumb-nav {
    margin-bottom: 20px;
    width: 100%;
}

.blog-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
}

.blog-breadcrumb-item a {
    color: #c084fc;
    text-decoration: none;
    transition: color 0.2s ease;
}

body:not(.dark) .blog-breadcrumb-item a {
    color: #7e22ce;
}

.blog-breadcrumb-item a:hover {
    color: #e9d5ff;
    text-decoration: underline;
}

body:not(.dark) .blog-breadcrumb-item a:hover {
    color: #581c87;
}

.blog-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
}

body:not(.dark) .blog-breadcrumb-sep {
    color: #94a3b8;
}

.blog-breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.65);
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.dark) .blog-breadcrumb-item.active {
    color: #64748b;
}

/* Executive Summary / Key Takeaways Card */
.blog-takeaways-card {
    background: linear-gradient(135deg, rgba(20, 16, 42, 0.8) 0%, rgba(14, 11, 28, 0.9) 100%);
    border: 1px solid rgba(192, 132, 252, 0.25);
    border-left: 5px solid #c084fc;
    border-radius: 20px;
    padding: clamp(22px, 3vw, 32px);
    margin: 32px 0 36px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

body:not(.dark) .blog-takeaways-card {
    background: #ffffff !important;
    border: 1px solid #e9d5ff !important;
    border-left: 5px solid #7e22ce !important;
    box-shadow: 0 8px 24px rgba(126, 34, 206, 0.06) !important;
}

.takeaways-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.takeaways-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(192, 132, 252, 0.15);
    border: 1px solid rgba(192, 132, 252, 0.35);
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

body:not(.dark) .takeaways-icon-badge {
    background: #f3e8ff;
    border-color: #d8b4fe;
    color: #d97706;
}

.takeaways-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 850;
    color: #ffffff;
    margin: 0 0 4px 0;
}

body:not(.dark) .takeaways-title {
    color: #0f172a !important;
}

.takeaways-sub {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

body:not(.dark) .takeaways-sub {
    color: #64748b !important;
}

.takeaways-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.takeaways-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

body:not(.dark) .takeaways-list li {
    color: #334155 !important;
}

.takeaways-list li i {
    color: #4ade80;
    margin-top: 4px;
    font-size: 15px;
    flex-shrink: 0;
}

body:not(.dark) .takeaways-list li i {
    color: #16a34a !important;
}