@charset "UTF-8";
/* ==========================================================================
   GLOBAL CANVAS & BODY BACKGROUND (Artistic Direction V2)
   ========================================================================== */
:root {
    --bg-page: #F5F5F5;
    --bg-surface: #FFFFFF;
    --bg-surface-alt: #F8FAFC;
    --text-main: #0F172A;
    --text-muted: #64748B;
    --border-subtle: rgba(125, 125, 125, 0.17);
    --border-divider: #E2E8F0;


    /* ══════════════════════════════════════════════════════════════════════
       SECTION SPACING TOKENS (Modern Fluid REM + Clamp Design System)
       ══════════════════════════════════════════════════════════════════════ */
    --sec-pad-hero-top:          clamp(1.75rem, 3vw, 2.75rem);   /* 28px - 44px */
    --sec-pad-hero-bottom:       clamp(1rem, 1.8vw, 1.5rem);     /* 16px - 24px */
    --sec-pad-grid-top:          clamp(0.75rem, 1.2vw, 1.125rem);/* 12px - 18px */
    --sec-pad-grid-bottom:       clamp(1.5rem, 2.5vw, 2.25rem);  /* 24px - 36px */
    --sec-pad-mid-top:           clamp(1.5rem, 2.5vw, 2.25rem);  /* 24px - 36px */
    --sec-pad-mid-bottom:        clamp(1.75rem, 3vw, 2.75rem);   /* 28px - 44px */
    --sec-pad-faq-top:           clamp(1.5rem, 2.5vw, 2.25rem);  /* 24px - 36px */
    --sec-pad-faq-bottom:        clamp(2.5rem, 4.5vw, 4rem);     /* 40px - 64px */
    --sec-pad-static-hero-top:   clamp(3.5rem, 6vw, 5.5rem);     /* 56px - 88px */
    --sec-pad-static-hero-bottom:clamp(1.75rem, 3vw, 2.75rem);   /* 28px - 44px */
}

html,
body,
#breakdance-canvas-wrapper,
.breakdance {
    background-color: #F5F5F5 !important;
}

/* ==========================================================================
           ZENSCRIB GLOBAL MASTER STYLESHEET
           ========================================================================== */

        /* ==========================================================================
   0. MASTER SITE HEADER — CLEAN DARK HOVER & SUBMENU DROPDOWNS (V5 Active)
   ========================================================================== */

/* Outer bar: Static relative at top across all views, transparent background */
.site-header-wrap,
header.c-header,
header.site-header-wrap,
.c-header {
    position: relative !important;
    top: auto !important;
    z-index: 9999 !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 0.625rem 0 !important;
    box-sizing: border-box !important;
}

/* Inner capsule: Permanent static white card aligned with max-width: 1100px */
.header-inner,
div.header-inner {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.625rem 1.25rem !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
    transition: box-shadow 0.2s ease !important;
}

/* Subtle soft elevation boost on hover (no background or border jumps) */
.site-header-wrap:hover .header-inner,
header.c-header:hover .header-inner,
header.site-header-wrap:hover .header-inner,
.c-header:hover .header-inner {
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.09), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

/* Column 1: Logo (Pinned to Left) */
.header-logo-link,
a.header-logo-link {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-decoration: none !important;
    min-width: 0 !important;
}
.header-logo-img,
img.header-logo-img {
    height: 28px !important;
    width: auto !important;
    max-height: 28px !important;
    max-width: 180px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Column 2: Navigation Menu Wrapper & Centered List */
.header-nav-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

.header-nav,
ul.header-nav {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.header-nav-item,
li.header-nav-item {
    display: inline-flex !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}
.header-nav-link,
.header-nav a,
.header-nav-text,
a.header-nav-link {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    letter-spacing: -0.015em !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

/* User Preference: Clean dark hover (#0f172a / #000000), NO GREEN EFFECT */
.header-nav-link:hover,
.header-nav a:hover,
a.header-nav-link:hover,
.header-has-dropdown:hover > a.header-nav-link {
    color: #0f172a !important;
    text-decoration: none !important;
}

/* Dropdown Trigger & Chevron */
.header-dropdown-trigger,
.header-dropdown-trigger:hover,
.header-has-dropdown:hover > .header-dropdown-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    cursor: default !important;
    user-select: none !important;
}
.header-dropdown-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 12px !important;
    height: 12px !important;
    color: #64748b !important;
    transition: transform 0.2s ease, color 0.15s ease !important;
}
/* ==========================================================================
   DESKTOP NAVIGATION DROPDOWN (>= 992px)
   ========================================================================== */
@media (min-width: 992px) {
    .header-nav,
    ul.header-nav {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1.5rem !important;
    }

    .header-has-dropdown:hover .header-dropdown-icon,
    .header-has-dropdown.dropdown-open .header-dropdown-icon {
        transform: rotate(180deg) !important;
        color: #0f172a !important;
    }

    /* Bridge pseudo-element to prevent dropdown closing when moving cursor */
    .header-has-dropdown::after {
        content: "" !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        height: 14px !important;
    }

    /* Desktop Dropdown Box: Left-aligned with Best AI Writing Tools, subtle vertical float */
    .header-dropdown-menu,
    ul.header-dropdown-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: auto !important;
        transform: translateY(6px) !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 0.875rem !important;
        box-shadow: 0 12px 30px -6px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.04) !important;
        padding: 0.5rem !important;
        margin: 0 !important;
        list-style: none !important;
        min-width: 250px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
        z-index: 10000 !important;
        pointer-events: none !important;
    }

    .header-has-dropdown:hover .header-dropdown-menu,
    .header-has-dropdown:focus-within .header-dropdown-menu,
    .header-has-dropdown.dropdown-open .header-dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    /* User feedback: Hide redundant Hub link on desktop (the top menu trigger is already a clickable link to the Hub) */
    .header-dropdown-hub-link,
    li.header-dropdown-hub-link {
        display: none !important;
    }

    .header-dropdown-item,
    li.header-dropdown-item {
        width: 100% !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-dropdown-link,
    a.header-dropdown-link {
        display: flex !important;
        align-items: center !important;
        padding: 0.625rem 0.875rem !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: #334155 !important;
        text-decoration: none !important;
        border-radius: 0.5rem !important;
        transition: background 0.15s ease, color 0.15s ease !important;
        white-space: nowrap !important;
    }

    .header-dropdown-link:hover,
    a.header-dropdown-link:hover {
        background: #f1f5f9 !important;
        color: #0f172a !important;
        text-decoration: none !important;
    }
}

/* Column 3: Actions (Pinned to Right) */
.header-actions,
div.header-actions {
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
    min-width: 0 !important;
}

/* Language Switcher Capsule */
.lang-switcher-wrapper {
    display: inline-flex !important;
    align-items: center !important;
}
.lang-switcher-capsule,
.c-lang-switcher {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 0.1875rem 0.3125rem !important;
    border-radius: 0.5rem !important;
    box-sizing: border-box !important;
}
.lang-globe-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    padding: 0 0.125rem !important;
}
.lang-pill,
span.lang-pill,
a.lang-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    padding: 0.3125rem 0.5rem !important;
    border-radius: 0.375rem !important;
    min-width: 22px !important;
    height: 26px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}
.lang-btn-active {
    background: #0f172a !important;
    color: #ffffff !important;
    cursor: default !important;
}
.lang-btn-inactive {
    background: #f1f5f9 !important;
    color: #475569 !important;
    cursor: pointer !important;
}
.lang-btn-inactive:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

/* Search Trigger Button */
.c-search-btn,
.header-search-btn,
a.header-search-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    background: #f1f5f9 !important;
    border-radius: 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.header-search-btn:hover,
a.header-search-btn:hover {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #000000 !important;
}

/* Responsive Nav Labels (Desktop: "Best AI Writing Tools", Mobile: "Categories") */
.nav-label-desktop {
    display: inline !important;
}
.nav-label-mobile {
    display: none !important;
}

/* Mobile Hamburger Button */
.c-header-burger,
button.c-header-burger {
    display: none !important;
}

/* ==========================================================================
   MOBILE & TABLET HEADER SYSTEM (< 991px, < 640px, < 480px, < 380px, 320px)
   Drawer Plein Écran Accessible & Accordion Submenus Fluides (Session 20)
   ========================================================================== */
@media (max-width: 991px) {
    .nav-label-desktop {
        display: none !important;
    }
    .nav-label-mobile {
        display: inline !important;
    }

    .site-header-wrap,
    header.c-header,
    header.site-header-wrap,
    .c-header {
        position: relative !important;
        top: auto !important;
        z-index: 9999 !important;
        background: transparent !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0.5rem 0 !important;
    }

    .header-inner,
    div.header-inner {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: calc(100% - 1.5rem) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0.5rem 1rem !important;
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 0.875rem !important;
        box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
        box-sizing: border-box !important;
    }

    .header-logo-link,
    a.header-logo-link {
        flex: 0 1 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    .header-logo-img,
    img.header-logo-img {
        height: 25px !important;
        width: auto !important;
        max-width: 150px !important;
        object-fit: contain !important;
        display: block !important;
    }

    .header-actions,
    div.header-actions {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .c-header-burger,
    button.c-header-burger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 0.5rem !important;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        color: #0f172a !important;
        cursor: pointer !important;
        padding: 0 !important;
        transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    }

    .c-header-burger:hover,
    button.c-header-burger:hover,
    .c-header-burger.is-active,
    button.c-header-burger.is-active {
        background: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
        color: #000000 !important;
    }

    .c-header-burger svg {
        width: 18px !important;
        height: 18px !important;
        display: block !important;
    }

    .header-nav-wrapper {
        display: contents !important;
    }

    /* Mobile Navigation Drawer: Hidden by default, opens below header */
    .header-nav,
    ul.header-nav {
        display: none !important;
        position: fixed !important;
        top: var(--zs-header-height, 58px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        max-height: calc(100dvh - var(--zs-header-height, 58px)) !important;
        background-color: #ffffff !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 1.25rem 1.5rem 3rem 1.5rem !important;
        box-sizing: border-box !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
        z-index: 9998 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-8px) !important;
        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease !important;
    }

    .header-nav.is-open,
    ul.header-nav.is-open {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    /* Body scroll lock when drawer is active - NEVER set height: 100vh */
    body.zenscrib-nav-locked {
        overflow: hidden !important;
    }

    .header-nav-item,
    li.header-nav-item {
        width: 100% !important;
        border-bottom: 1px solid #f1f5f9 !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .header-nav-link,
    .header-nav a,
    a.header-nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 0.75rem 0.5rem !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        transition: color 0.15s ease, background-color 0.15s ease !important;
    }

    .header-nav-link:hover,
    a.header-nav-link:hover {
        color: #000000 !important;
        background-color: #f8fafc !important;
        border-radius: 0.5rem !important;
    }

    /* Dropdown Trigger & Rotating Chevron */
    .header-dropdown-trigger {
        cursor: pointer !important;
    }

    .header-dropdown-icon {
        width: 16px !important;
        height: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #64748b !important;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease !important;
    }

    .header-has-dropdown.dropdown-open .header-dropdown-icon {
        transform: rotate(180deg) !important;
        color: #0f172a !important;
    }

    /* Fluid Accordion Submenu on Mobile & Tablet: Fixed to Left Edge */
    .header-has-dropdown {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        text-align: left !important;
    }

    .header-has-dropdown .header-dropdown-menu,
    .header-has-dropdown ul.header-dropdown-menu {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        max-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        pointer-events: none !important;
        box-shadow: none !important;
        border: none !important;
        border-left: 2px solid #e2e8f0 !important;
        border-radius: 0 !important;
        margin: 0 0 0 0.5rem !important;
        padding: 0 0 0 0.75rem !important;
        background: transparent !important;
        width: calc(100% - 0.5rem) !important;
        min-width: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
        text-align: left !important;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease, padding 0.2s ease !important;
    }

    .header-has-dropdown.dropdown-open .header-dropdown-menu,
    .header-has-dropdown.dropdown-open ul.header-dropdown-menu {
        max-height: 420px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        margin: 0.25rem 0 0.75rem 0.5rem !important;
        padding: 0.25rem 0 0.375rem 0.75rem !important;
        transform: none !important;
    }

    /* Neutralize hover / focus-within transform leak on mobile & tablet */
    .header-has-dropdown:hover .header-dropdown-menu,
    .header-has-dropdown:focus-within .header-dropdown-menu,
    .header-has-dropdown.dropdown-open .header-dropdown-menu {
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
    }

    /* Mobile drawer: clean overview link inside accordion (cohesive slate, zero green, finished look) */
    .header-dropdown-hub-link,
    li.header-dropdown-hub-link {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #f1f5f9 !important;
        padding-bottom: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .header-dropdown-hub-link a.header-dropdown-link {
        color: #0f172a !important;
        font-weight: 700 !important;
        font-size: 14.5px !important;
    }

    .header-dropdown-hub-link a.header-dropdown-link:hover {
        color: #000000 !important;
        background: #f1f5f9 !important;
    }

    .header-dropdown-item,
    li.header-dropdown-item {
        width: 100% !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        text-align: left !important;
    }

    .header-dropdown-link,
    a.header-dropdown-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        width: 100% !important;
        padding: 0.5rem 0.625rem !important;
        min-height: 40px !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        color: #475569 !important;
        border-radius: 0.5rem !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        transition: background 0.15s ease, color 0.15s ease !important;
    }

    .header-dropdown-link:hover,
    a.header-dropdown-link:hover {
        background: #f1f5f9 !important;
        color: #0f172a !important;
    }
}

/* Smartphone Adjustments (< 640px) */
@media (max-width: 640px) {
    .site-header-wrap,
    header.c-header,
    header.site-header-wrap,
    .c-header {
        padding: 0.4rem 0 !important;
    }

    .header-inner,
    div.header-inner {
        width: calc(100% - 1rem) !important;
        padding: 0.45rem 0.75rem !important;
    }

    .header-logo-img,
    img.header-logo-img {
        height: 23px !important;
        max-width: 130px !important;
    }

    .header-actions,
    div.header-actions {
        gap: 0.45rem !important;
    }

    .c-header-burger,
    button.c-header-burger {
        width: 32px !important;
        height: 32px !important;
    }

    .header-search-btn,
    a.header-search-btn {
        width: 32px !important;
        height: 32px !important;
    }

    .header-nav,
    ul.header-nav {
        top: var(--zs-header-height, 54px) !important;
        height: auto !important;
        max-height: calc(100dvh - var(--zs-header-height, 54px)) !important;
        padding: 1rem 1.25rem 2.5rem 1.25rem !important;
    }
}

/* Compact Mobile Adjustments (< 480px) */
@media (max-width: 480px) {
    .site-header-wrap,
    header.c-header,
    header.site-header-wrap,
    .c-header {
        padding: 0.35rem 0 !important;
    }

    .header-inner,
    div.header-inner {
        width: calc(100% - 0.75rem) !important;
        padding: 0.4rem 0.5rem !important;
    }

    .header-logo-img,
    img.header-logo-img {
        height: 21px !important;
        max-width: 110px !important;
    }

    /* Hide globe icon to preserve space for logo and buttons without wrap */
    .lang-globe-icon {
        display: none !important;
    }

    .lang-switcher-capsule,
    .c-lang-switcher {
        padding: 0.125rem 0.25rem !important;
        gap: 0.15rem !important;
    }

    .lang-pill,
    span.lang-pill,
    a.lang-pill {
        font-size: 11px !important;
        height: 24px !important;
        min-width: 20px !important;
        padding: 0.2rem 0.35rem !important;
    }

    .header-actions,
    div.header-actions {
        gap: 0.35rem !important;
    }

    .header-search-btn,
    a.header-search-btn {
        width: 30px !important;
        height: 30px !important;
    }

    .c-header-burger,
    button.c-header-burger {
        width: 30px !important;
        height: 30px !important;
    }

    .header-nav,
    ul.header-nav {
        top: var(--zs-header-height, 50px) !important;
        height: auto !important;
        max-height: calc(100dvh - var(--zs-header-height, 50px)) !important;
    }
}

/* Ultra-Compact Mobile (< 380px and down to 320px) */
@media (max-width: 380px) {
    .site-header-wrap,
    header.c-header,
    header.site-header-wrap,
    .c-header {
        padding: 0.25rem 0 !important;
    }

    .header-inner,
    div.header-inner {
        width: calc(100% - 0.5rem) !important;
        padding: 0.35rem 0.375rem !important;
    }

    .header-logo-img,
    img.header-logo-img {
        height: 19px !important;
        max-width: 95px !important;
    }

    .lang-switcher-capsule,
    .c-lang-switcher {
        padding: 0.1rem 0.2rem !important;
        gap: 0.1rem !important;
    }

    .lang-pill,
    span.lang-pill,
    a.lang-pill {
        font-size: 10px !important;
        height: 22px !important;
        min-width: 18px !important;
        padding: 0.15rem 0.25rem !important;
    }

    .header-actions,
    div.header-actions {
        gap: 0.25rem !important;
    }

    .header-search-btn,
    a.header-search-btn {
        width: 28px !important;
        height: 28px !important;
        border-radius: 0.375rem !important;
    }

    .header-search-icon svg {
        width: 13px !important;
        height: 13px !important;
    }

    .c-header-burger,
    button.c-header-burger {
        width: 28px !important;
        height: 28px !important;
        border-radius: 0.375rem !important;
    }

    .c-header-burger svg {
        width: 15px !important;
        height: 15px !important;
    }

    .header-nav,
    ul.header-nav {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
        height: calc(100dvh - 46px) !important;
    }
}

        /* Hero Card Media relative container and badge */
        .c-card-hero,
        .c-card-hero__media,
        .hero-media-wrap,
        .c-card-hero > div:first-child,
        .oxy-container-2229-104 {
            position: relative;
            overflow: hidden;
            border-radius: 0.75rem;
        }
        .hero-badge,
        .c-card-hero__badge {
            position: absolute;
            top: 14px;
            left: 14px;
            z-index: 10;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            color: #0f172a;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 0.3125rem 0.625rem;
            border-radius: 0.375rem;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
            line-height: 1;
            display: inline-flex;
            align-items: center;
        }

        /* --------------------------------------------------------------------------
           1. MATRIX COMPARISON TABLES (Pillars 1377, 1399, 1416, 1420, 1384)
           -------------------------------------------------------------------------- */
        .c-table-scroll {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border-radius: 1rem;
            border: 1px solid #e2e8f0;
            background: #ffffff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        }
        .c-best-matrix-table {
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
            table-layout: auto;
        }
        .c-best-matrix-table thead tr th {
            font-size: 10.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #64748b;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            padding: 0.75rem 0.625rem;
            white-space: nowrap;
            vertical-align: middle;
        }
        .c-best-matrix-table tbody tr {
            border-bottom: 1px solid #f1f5f9;
            transition: background-color 0.15s ease;
        }
        .c-best-matrix-table tbody tr:hover {
            background-color: #f8fafc;
        }
        .c-best-matrix-table tbody td {
            padding: 0.75rem 0.625rem;
            vertical-align: middle;
            font-size: 13px;
            color: #334155;
            border-bottom: 1px solid #f1f5f9;
        }

        .c-best-matrix-table td.tbl-check-yes,
        .c-best-matrix-table td.tbl-check-no,
        .c-best-matrix-table th[style*="text-align: center"],
        .c-best-matrix-table td[style*="text-align: center"],
        .c-best-matrix-table td.tbl-score-val {
            text-align: center;
        }
        .c-best-matrix-table td.tbl-score-val {
            font-size: 14.5px;
            font-weight: 900;
            color: #0f172a;
        }
        .c-best-matrix-table td:last-child,
        .c-best-matrix-table th:last-child {
            text-align: right;
            padding-right: 0.875rem;
        }
        .c-best-matrix-table td:first-child,
        .c-best-matrix-table th:first-child {
            padding-left: 0.875rem;
        }

        .tbl-tool-wrap {
            display: flex;
            align-items: center;
            gap: 0.625rem;
        }
        .tbl-logo-wrap {
            width: 34px;
            height: 34px;
            border-radius: 0.5rem;
            overflow: hidden;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .tbl-tool-logo {
            width: 24px;
            height: 24px;
            object-fit: contain;
        }
        .tbl-tool-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .tbl-tool-name {
            font-size: 14px;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
            white-space: nowrap;
        }
        .tbl-tagline {
            font-size: 11px;
            color: #64748b;
            margin: 0;
        }
        .tbl-score-badge {
            display: inline-flex;
            align-items: baseline;
            font-weight: 900;
            font-size: 14px;
            color: #0f172a;
        }
        .tbl-score-max {
            font-size: 10.5px;
            color: #94a3b8;
            font-weight: 600;
        }
        .tbl-bestfor-text {
            font-size: 12px;
            color: #475569;
            line-height: 1.35;
        }
        .tbl-pricing-text,
        .tbl-price-cell {
            font-size: 12.5px;
            font-weight: 700;
            color: #0f172a;
            white-space: nowrap;
        }
        .tbl-freetrial-badge {
            display: inline-block;
            font-size: 9.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #059669;
            background: #ecfdf5;
            border: 1px solid #a7f3d0;
            padding: 2px 0.375rem;
            border-radius: 0.25rem;
            margin-top: 0.25rem;
        }


        /* ══════════════════════════════════════════════════════════════════════
           DESIGN TOKENS — THÈME MONO-COULEUR (Vert ZenScrib)
           Identité de marque globale appliquée sur :root
           ══════════════════════════════════════════════════════════════════════ */

        :root {
            --theme-accent:       #059669;
            --theme-accent-hover: #047857;
            --theme-text:         #065f46;
            --theme-bg:           #ecfdf5;
            --theme-bg-alt:       #f0fdf4;
            --theme-border:       #a7f3d0;
        }
        /* 2. Hero Split & Quick Picks */
        /* display:none removed to harmonize with modern badge row */

        .sec-best-hero .best-hero-h1-accent,
        .best-hero-h1-accent,
        .accent-themed {
            color: var(--theme-accent);
        }

        .sec-best-hero .quick-picks-eyebrow,
        .quick-picks-eyebrow {
            color: #64748b !important;
            text-transform: uppercase !important;
            letter-spacing: 0.15em !important;
        }

        .sec-best-hero .quick-pick-rank,
        .quick-pick-rank {
            color: #0f172a !important;
            font-weight: 800 !important;
        }

        .sec-best-hero .quick-pick-score-val,
        .quick-pick-score-val {
            color: #0f172a !important;
        }

        .sec-best-hero .quick-pick-score,
        .quick-pick-score {
            background: #f8fafc !important;
            border: 1px solid #e2e8f0 !important;
        }

        .quick-pick-item:hover .quick-pick-chevron {
            color: #0f172a !important;
        }

        /* 3. Section How It Works */
        .sec-how-it-works .mechanics-kicker,
        .mechanics-kicker,
        .kicker-themed {
            color: var(--theme-accent);
        }

        .sec-how-it-works .step-icon-box,
        .icon-box-themed,
        .step-icon-box {
            background: var(--theme-bg);
            border: 1px solid var(--theme-border);
            color: var(--theme-accent);
        }

        .sec-how-it-works .step-badge-num,
        .step-badge-num {
            background: var(--theme-bg);
            color: var(--theme-text);
            border: 1px solid var(--theme-border);
        }

        .sec-how-it-works .callout-themed,
        .c-callout-editorial,
        .callout-themed {
            background: var(--theme-bg);
            border-left: 4px solid var(--theme-accent);
        }

        /* 4. Section Editor's Top 3 Picks */
        .sec-editors-picks .picks-kicker,
        .picks-kicker {
            color: #64748b !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
        }

        .sec-editors-picks .pick-rank-num,
        .pick-rank-num {
            color: var(--theme-accent);
        }

        .sec-editors-picks .pick-score-num,
        .pick-score-num {
            color: var(--theme-accent);
        }

        .sec-editors-picks .pick-progress-fill,
        .pick-progress-fill {
            background: var(--theme-accent);
        }

        .sec-editors-picks .pick-badge-choice,
        .pick-badge-choice {
            background: var(--theme-bg);
            color: var(--theme-text);
            border: 1px solid var(--theme-border);
        }

        /* Explore Tool Button (Primary Dark Conversion CTA) */
        .sec-editors-picks .btn-pick-site,
        .btn-pick-site {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.375rem;
            color: #ffffff;
            font-weight: 800;
            font-size: 11px;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 0.625rem 1.125rem;
            background-color: #0f172a;
            border: 1px solid #0f172a;
            border-radius: 0.75rem;
            transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        .sec-editors-picks .btn-pick-site:hover,
        .btn-pick-site:hover {
            background-color: #1e293b;
            border-color: #1e293b;
            color: #ffffff;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
            text-decoration: none;
        }

        .sec-editors-picks .btn-pick-site svg,
        .btn-pick-site svg {
            color: #ffffff;
            stroke: #ffffff;
        }

        /* Read Review Button (Secondary Light Editorial CTA) */
        .sec-editors-picks .btn-pick-review,
        .btn-pick-review {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            color: #0f172a;
            font-weight: 800;
            font-size: 11px;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 0.625rem 1.125rem;
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 0.75rem;
            transition: all 0.15s ease;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
        }

        .sec-editors-picks .btn-pick-review:hover,
        .btn-pick-review:hover {
            background-color: var(--theme-bg);
            color: var(--theme-text);
            border-color: var(--theme-border);
            transform: translateY(-1px);
            text-decoration: none;
        }

        /* 5. Section Comparison Matrix */
        .sec-compare-matrix .picks-kicker,
        .matrix-kicker {
            color: #64748b !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
        }

        .c-best-matrix-table tr.row-featured,
        .row-featured {
            background: #f8fafc !important;
            border-left: 3px solid #0f172a !important;
        }

        .c-best-matrix-table td.tbl-check-yes,
        .tbl-check-yes {
            color: #0f172a !important;
            font-weight: 700 !important;
            font-size: 15px !important;
        }

        .c-best-matrix-table td.tbl-score-val,
        .tbl-score-val {
            color: #0f172a !important;
            font-weight: 800 !important;
            font-size: 14px !important;
            text-align: center !important;
        }

        .tbl-review-link {
            color: #64748b !important;
            font-size: 11.5px !important;
            font-weight: 600 !important;
            text-decoration: none !important;
        }

        .tbl-review-link:hover {
            color: #0f172a !important;
            text-decoration: none !important;
        }

        .btn-tbl-visit {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0.35rem !important;
            background: #0f172a !important;
            color: #ffffff !important;
            border: 1px solid #0f172a !important;
            border-radius: 8px !important;
            font-size: 11px !important;
            font-weight: 750 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.06em !important;
            padding: 7px 14px !important;
            text-decoration: none !important;
            transition: all 0.15s ease !important;
            white-space: nowrap !important;
        }

        .btn-tbl-visit:hover {
            background: #1e293b !important;
            border-color: #1e293b !important;
            color: #ffffff !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
            text-decoration: none !important;
        }

        .tbl-freetrial-badge {
            color: #475569 !important;
            background: #f1f5f9 !important;
            border: 1px solid #e2e8f0 !important;
        }

        /* 6. Section FAQ */
        .sec-faq-pad .faq-kicker,
        .faq-kicker {
            color: #64748b !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
        }

        .sec-faq-pad details.faq-accordion-item[open],
        details.faq-accordion-item[open] {
            border-color: var(--theme-border);
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
        }

        summary.faq-summary:hover .faq-icon-cross,
        summary.faq-summary:hover svg,
        details.faq-accordion-item[open] .faq-icon-cross,
        details.faq-accordion-item[open] summary svg {
            color: var(--theme-accent);
        }

        /* 7. Section Crosslink CTA (Neutral Minimalist Banner & Dark Button) */
        .sec-crosslink-cta {
            width: 100%;
            box-sizing: border-box;
            padding-top: var(--sec-pad-mid-top);
            padding-bottom: var(--sec-pad-mid-bottom);
            background: transparent;
        }

        .sec-crosslink-cta .c-crosslink-card,
        .c-crosslink-card {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 1.25rem;
            padding: clamp(28px, 4vw, 40px);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.03);
        }

        .c-crosslink-card .crosslink-h3 {
            font-size: clamp(20px, 2.8vw, 26px);
            font-weight: 800;
            color: #0f172a;
            margin: 0;
            letter-spacing: -0.02em;
        }

        .c-crosslink-card .crosslink-desc {
            font-size: clamp(14px, 1.6vw, 15.5px);
            color: #475569;
            max-width: 620px;
            margin: 0 auto 0.375rem auto;
            line-height: 1.6;
        }

        .sec-crosslink-cta .btn-crosslink-cta,
        .btn-crosslink-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background-color: #0f172a;
            color: #ffffff;
            border: 1px solid #0f172a;
            border-radius: 0.75rem;
            padding: 0.75rem 1.5rem;
            font-size: 13.5px;
            font-weight: 800;
            text-decoration: none;
            transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        .sec-crosslink-cta .btn-crosslink-cta:hover,
        .btn-crosslink-cta:hover {
            background-color: #1e293b;
            border-color: #1e293b;
            color: #ffffff;
            transform: translateY(-1px);
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
            text-decoration: none;
        }

        /* --------------------------------------------------------------------------
           3. ZERO-LIFT / FLAT HOVER SPECIFICATION (Anti-Funky & Zero Underline on Cards)
           -------------------------------------------------------------------------- */
        html body .c-card-review-item,
        html body .c-card-guide,
        html body .guide-card,
        html body .c-row-guide,
        html body .guide-row-item,
        html body .c-card-hero,
        html body .c-card-side,
        html body .c-card-news,
        html body .c-card-deeper-sub,
        html body .c-card-deeper-featured,
        html body .c-card-use-case,
        html body .c-card-step {
            transform: none;
            text-decoration: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        }
        html body .c-card-review-item:hover,
        html body .c-card-guide:hover,
        html body .guide-card:hover,
        html body .c-row-guide:hover,
        html body .guide-row-item:hover,
        html body .c-card-hero:hover,
        html body .c-card-side:hover,
        html body .c-card-news:hover,
        html body .c-card-deeper-sub:hover,
        html body .c-card-deeper-featured:hover,
        html body .c-card-use-case:hover,
        html body .c-card-step:hover {
            transform: none;
            text-decoration: none;
        }

        /* Prevent Any Internal Child Shadow / Text-Shadow Bleed on Hover */
        .c-card-guide .guide-card-body,
        .c-card-guide .guide-card-meta,
        .c-card-guide .guide-card-title,
        .c-card-guide .guide-card-excerpt,
        .guide-card .guide-card-body,
        .guide-card .guide-card-meta,
        .guide-card .guide-card-title,
        .guide-card .guide-card-excerpt,
        .c-card-review-item .review-card-body,
        .c-card-review-item .review-card-meta,
        .c-card-review-item .review-card-title,
        .c-card-review-item .review-card-excerpt,
        .c-row-guide .guide-row-info,
        .c-row-guide .guide-row-title,
        .guide-row-item .guide-row-info,
        .guide-row-item .guide-row-title,
        .c-card-guide:hover .guide-card-body,
        .c-card-guide:hover .guide-card-meta,
        .c-card-guide:hover .guide-card-title,
        .c-card-guide:hover .guide-card-excerpt,
        .guide-card:hover .guide-card-body,
        .guide-card:hover .guide-card-meta,
        .guide-card:hover .guide-card-title,
        .guide-card:hover .guide-card-excerpt,
        .c-card-review-item:hover .review-card-body,
        .c-card-review-item:hover .review-card-meta,
        .c-card-review-item:hover .review-card-title,
        .c-card-review-item:hover .review-card-excerpt,
        .c-row-guide:hover .guide-row-info,
        .c-row-guide:hover .guide-row-title,
        .guide-row-item:hover .guide-row-info,
        .guide-row-item:hover .guide-row-title {
            box-shadow: none;
            text-shadow: none;
            border: none;
            text-decoration: none;
        }

        /* Explicit Card Title Styling (Zero Underline, Crisp Dark Hover) */
        html body .review-card-title,
        html body .guide-card-title,
        html body .guide-row-title,
        html body .hero-card-title,
        html body .side-card-title,
        html body .news-card-title,
        html body .deeper-card-title,
        html body .step-card-title {
            text-decoration: none;
            box-shadow: none;
            text-shadow: none;
        }
        html body .c-card-review-item:hover .review-card-title,
        html body .review-card-title:hover,
        html body .c-card-guide:hover .guide-card-title,
        html body .guide-card:hover .guide-card-title,
        html body .guide-card-title:hover,
        html body .c-row-guide:hover .guide-row-title,
        html body .guide-row-item:hover .guide-row-title,
        html body .guide-row-title:hover,
        html body .c-card-hero:hover .hero-card-title,
        html body .hero-card-title:hover,
        html body .c-card-side:hover .side-card-title,
        html body .side-card-title:hover,
        html body .c-card-news:hover .news-card-title,
        html body .news-card-title:hover,
        html body .c-card-deeper-sub:hover .deeper-card-title,
        html body .deeper-card-title:hover,
        html body .c-card-step:hover .step-card-title,
        html body .step-card-title:hover {
            color: #000000;
            text-decoration: none;
            box-shadow: none;
            text-shadow: none;
        }

        /* --------------------------------------------------------------------------
           4. HUB HEROES SPECIFICATION (Guides, Reviews & News Hubs)
           -------------------------------------------------------------------------- */
        .sec-guides-hero,
        .sec-reviews-hero,
        .sec-news-hero {
            padding-top: var(--sec-pad-hero-top);
            padding-bottom: var(--sec-pad-hero-bottom);
            background: transparent;
            width: 100%;
        }
        .guides-hero-inner,
        .reviews-hero-inner,
        .news-hero-inner {
            max-width: 860px;
            margin: 0 auto;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .guides-badges-row,
        .guides-badges-row,
        .reviews-badges-row,
        .news-badges-row {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0.5rem !important;
            margin-bottom: 0.875rem !important;
        }
        .guides-badge-emerald,
        .reviews-badge-emerald,
        .news-badge-emerald {
            color: var(--theme-accent, #059669) !important;
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
            border-radius: 0 !important;
            font-size: 11px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.12em !important;
            box-shadow: none !important;
            line-height: 1.2 !important;
            display: inline-flex !important;
            align-items: center !important;
        }
        .guides-badge-neutral,
        .reviews-badge-neutral,
        .news-badge-neutral {
            color: #64748b !important;
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
            border-radius: 0 !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.12em !important;
            box-shadow: none !important;
            line-height: 1.2 !important;
            display: inline-flex !important;
            align-items: center !important;
        }
        .guides-badge-neutral::before,
        .reviews-badge-neutral::before,
        .news-badge-neutral::before {
            content: "\2022" !important;
            margin-right: 0.5rem !important;
            color: #cbd5e1 !important;
            font-weight: 800 !important;
        }
        .guides-hero-h1,
        .reviews-hero-h1,
        .news-hero-h1 {
            font-size: clamp(28px, 4.2vw, 48px);
            font-weight: 900;
            color: #0f172a;
            letter-spacing: -0.03em;
            line-height: 1.15;
            margin: 0 0 0.875rem 0;
            text-align: center;
        }
        .guides-hero-h1-accent,
        .reviews-hero-h1-accent,
        .news-hero-h1-accent {
            color: #059669;
        }
        .guides-hero-sub,
        .reviews-hero-sub,
        .news-hero-sub {
            font-size: clamp(14px, 1.8vw, 16px);
            color: #475569;
            max-width: 680px;
            margin: 0 auto 1.75rem auto;
            line-height: 1.6;
            font-weight: 500;
            text-align: center;
        }
        .guides-filter-bar,
        .reviews-filter-bar {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0.625rem !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        .guides-filter-btn,
        .reviews-filter-btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            height: 40px !important;
            padding: 0 1.25rem !important;
            border-radius: 0.75rem !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.08em !important;
            color: #334155 !important;
            background: #ffffff !important;
            border: 1.5px solid #e2e8f0 !important;
            cursor: pointer !important;
            text-decoration: none !important;
            transition: all 0.2s ease !important;
            box-sizing: border-box !important;
            white-space: nowrap !important;
            user-select: none !important;
        }
        .guides-filter-btn:hover,
        .guides-filter-btn:focus,
        .guides-filter-btn:active,
        .reviews-filter-btn:hover,
        .reviews-filter-btn:focus,
        .reviews-filter-btn:active {
            border-color: #cbd5e1 !important;
            color: #0f172a !important;
            text-decoration: none !important;
        }
        .guides-filter-btn.active,
        .reviews-filter-btn.active {
            background: #0f172a !important;
            color: #ffffff !important;
            border-color: #0f172a !important;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18) !important;
            text-decoration: none !important;
        }

        @media (max-width: 768px) {
            .guides-filter-bar,
            .reviews-filter-bar {
                display: flex !important;
                flex-wrap: wrap !important;
                justify-content: center !important;
                align-items: center !important;
                gap: 8px !important;
                padding: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                overflow-x: visible !important;
            }
            .guides-filter-btn,
            .reviews-filter-btn {
                height: 35px !important;
                padding: 0 13px !important;
                font-size: 11px !important;
                border-radius: 999px !important;
                white-space: nowrap !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
        }
        @media (max-width: 480px) {
            .guides-filter-bar,
            .reviews-filter-bar {
                gap: 6px !important;
            }
            .guides-filter-btn,
            .reviews-filter-btn {
                height: 32px !important;
                padding: 0 10px !important;
                font-size: 10.5px !important;
            }
        }
        @media (max-width: 380px) {
            .guides-filter-bar,
            .reviews-filter-bar {
                gap: 5px !important;
            }
            .guides-filter-btn,
            .reviews-filter-btn {
                height: 30px !important;
                padding: 0 8px !important;
                font-size: 10px !important;
            }
        }

        /* --------------------------------------------------------------------------
           5. GUIDES HUB SECTION 2: GRID, CARDS & PANELS ("Latest Guides & Playbooks")
           -------------------------------------------------------------------------- */
        .sec-guides-grid {
            padding-top: var(--sec-pad-grid-top);
            padding-bottom: var(--sec-pad-grid-bottom);
            background: transparent;
            width: 100%;
        }
        .guides-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
            width: 100%;
        }
        .guides-section-title {
            font-size: clamp(22px, 2.8vw, 28px);
            font-weight: 800;
            color: #0f172a;
            margin: 0;
            letter-spacing: -0.02em;
        }
        .guides-count-badge {
            font-size: 11px;
            font-weight: 700;
            color: #64748b;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            padding: 0.25rem 0.75rem;
            border-radius: 62.4375rem;
        }
        .guides-panels-wrap {
            width: 100%;
            position: relative;
        }
        .guides-tab-panel {
            width: 100%;
            display: none;
        }
        .guides-tab-panel.active {
            display: block;
        }
        .guides-grid-3cols,
        .reviews-grid,
        .reviews-grid-3cols,
        .news-main-grid {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 1.25rem !important;
            width: 100% !important;
            box-sizing: border-box !important;
            align-items: stretch !important;
        }
        @media (max-width: 991px) {
            .guides-grid-3cols,
            .reviews-grid,
            .reviews-grid-3cols,
            .news-main-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 1.125rem !important;
            }
        }
        @media (max-width: 640px) {
            .guides-grid-3cols,
            .reviews-grid,
            .reviews-grid-3cols,
            .news-main-grid {
                grid-template-columns: 1fr !important;
                gap: 1rem !important;
            }
        }

        /* 3-Column Guide Card Container */
        .c-card-guide,
        .guide-card {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
            cursor: pointer;
            text-decoration: none;
            box-sizing: border-box;
        }
        .c-card-guide:hover,
        .guide-card:hover {
            border-color: #e2e8f0;
            box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
            transform: none;
            text-decoration: none;
        }
        .guide-card-thumb-wrap {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9.5;
            overflow: hidden;
            background: #f1f5f9;
            border-radius: 0.75rem;
            -webkit-mask-image: -webkit-radial-gradient(white, black);
            transform: translateZ(0);
        }
        .guide-card-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0.75rem;
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .c-card-guide:hover .guide-card-img,
        .guide-card:hover .guide-card-img {
            transform: scale(1.05);
        }
        .guide-badge-cat {
            position: absolute;
            top: 12px;
            left: 12px;
            background: #ffffff;
            color: #0f172a;
            font-size: 10.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 0.25rem 0.625rem;
            border-radius: 0.375rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            z-index: 2;
        }
        .guide-card-body {
            padding: 0.125rem 0.25rem 0.25rem 0.25rem;
            display: flex;
            flex-direction: column;
            flex: 1 1 0;
            gap: 0.375rem;
            background: #ffffff;
            box-shadow: none;
            border: none;
        }
        .guide-card-meta {
            font-size: 10.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #94a3b8;
            box-shadow: none;
            border: none;
        }
        .guide-card-author {
            color: #0f172a;
            font-weight: 800;
        }
        .guide-card-title {
            font-size: 17px !important;
            font-weight: 800 !important;
            color: #0f172a !important;
            line-height: 1.35 !important;
            margin: 0 !important;
            min-height: 2.7em !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            text-decoration: none !important;
            box-shadow: none !important;
            text-shadow: none !important;
            border: none !important;
            transition: color 0.15s ease !important;
        }
        .c-card-guide:hover .guide-card-title,
        .guide-card:hover .guide-card-title,
        .guide-card-title:hover {
            color: #000000 !important;
            text-decoration: none !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }
        .guide-card-excerpt,
        .guide-card-excerpt p {
            font-size: 13px !important;
            line-height: 1.55 !important;
            color: #64748b !important;
            font-weight: 400 !important;
            margin: 0 !important;
            padding: 0 !important;
            min-height: 3.1em !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            box-shadow: none !important;
            border: none !important;
        }
        li.guide-grid-item,
        .guides-grid-3cols .guide-grid-item {
            display: flex !important;
            flex-direction: column !important;
            height: 100% !important;
        }
        .guides-grid-3cols .bde-loop-item,
        .c-card-guide-wrap {
            display: flex !important;
            flex-direction: column !important;
            height: 100% !important;
            flex: 1 1 auto !important;
            width: 100% !important;
        }

        /* --------------------------------------------------------------------------
           6. GUIDES HUB ARCHIVE / BACKLOG LIST ("More Guides & Tutorials")
           -------------------------------------------------------------------------- */
        .guides-archive-wrap {
            margin-top: clamp(32px, 4.5vw, 48px);
            padding-top: clamp(28px, 4vw, 40px);
            border-top: 1px solid #e2e8f0;
            width: 100%;
        }
        .guides-archive-header {
            margin-bottom: 1.25rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.25rem;
        }
        .guides-archive-kicker {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: #059669;
        }
        .guides-archive-title {
            font-size: clamp(20px, 2.5vw, 24px);
            font-weight: 800;
            color: #0f172a;
            margin: 0;
            letter-spacing: -0.02em;
        }
        .guides-archive-sub {
            font-size: 13px;
            color: #64748b;
            margin: 0;
            font-weight: 500;
        }
        .guides-rows-box {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 0.875rem;
            padding: 0.5rem 0.75rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
            display: flex;
            flex-direction: column;
            gap: 2px;
            width: 100%;
        }
        .c-row-guide,
        .guide-row-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem 0.75rem;
            border-radius: 0.625rem;
            text-decoration: none;
            transition: background-color 0.15s ease;
            gap: 0.875rem;
            width: 100%;
            box-sizing: border-box;
        }
        .c-row-guide:hover,
        .guide-row-item:hover {
            background: #f8fafc;
            text-decoration: none;
        }
        .guide-row-left {
            display: flex;
            align-items: center;
            gap: 0.875rem;
            min-width: 0;
            flex: 1 1 0;
        }
        .guide-row-thumb-wrap {
            width: 104px;
            height: 64px;
            min-width: 104px;
            max-width: 104px;
            border-radius: 0.5rem;
            overflow: hidden;
            background: #f1f5f9;
            flex-shrink: 0;
            -webkit-mask-image: -webkit-radial-gradient(white, black);
            transform: translateZ(0);
        }
        .guide-row-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0.5rem;
            transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .c-row-guide:hover .guide-row-img,
        .guide-row-item:hover .guide-row-img {
            transform: scale(1.06);
        }
        .guide-row-info {
            display: flex;
            flex-direction: column;
            gap: 0.1875rem;
            min-width: 0;
            box-shadow: none;
            border: none;
        }
        .guide-row-cat {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #059669;
        }
        .guide-row-date {
            font-size: 11px;
            font-weight: 600;
            color: #94a3b8;
        }
        .guide-row-title {
            font-size: 14.5px;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-decoration: none;
            box-shadow: none;
            text-shadow: none;
            border: none;
            transition: color 0.15s ease;
        }
        .c-row-guide:hover .guide-row-title,
        .guide-row-item:hover .guide-row-title,
        .guide-row-title:hover {
            color: #000000;
            text-decoration: none;
            box-shadow: none;
            text-shadow: none;
        }
        .guide-row-right {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            padding-left: 0.5rem;
        }
        .guide-row-arrow {
            width: 16px;
            height: 16px;
            color: #94a3b8;
            transition: transform 0.2s ease, color 0.2s ease;
        }
        .c-row-guide:hover .guide-row-arrow,
        .guide-row-item:hover .guide-row-arrow {
            transform: translateX(3px);
            color: #0f172a;
        }

        /* --------------------------------------------------------------------------
           6.1 GUIDES & NEWS ARCHIVE ROWS — RESPONSIVE PROPORTIONAL HORIZONTAL LAYOUT
           Preserves sleek, compact horizontal row layout across all viewports.
           Thumbnails scale proportionally alongside text (no awkward column stacking).
           -------------------------------------------------------------------------- */
        .c-row-guide,
        .guide-row-item {
            border-bottom: 1px solid #f8fafc !important;
        }
        .c-row-guide:last-child,
        .guide-row-item:last-child {
            border-bottom: none !important;
        }

        @media (max-width: 768px) {
            .guides-rows-box,
            .news-rows-box {
                padding: 0.375rem 0.5rem !important;
            }
            .c-row-guide,
            .guide-row-item {
                padding: 0.5rem 0.625rem !important;
                gap: 0.75rem !important;
            }
            .guide-row-left {
                gap: 0.75rem !important;
            }
            .guide-row-thumb-wrap,
            .news-row-thumb-wrap {
                width: 88px !important;
                min-width: 88px !important;
                max-width: 88px !important;
                height: 56px !important;
                border-radius: 0.5rem !important;
            }
            .guide-row-title {
                font-size: 13.5px !important;
                line-height: 1.32 !important;
                white-space: normal !important;
                display: -webkit-box !important;
                -webkit-line-clamp: 2 !important;
                -webkit-box-orient: vertical !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }
        }

        @media (max-width: 480px) {
            .guides-rows-box,
            .news-rows-box {
                padding: 0.25rem 0.375rem !important;
                border-radius: 0.75rem !important;
            }
            .c-row-guide,
            .guide-row-item {
                padding: 0.4375rem 0.375rem !important;
                gap: 0.5rem !important;
            }
            .guide-row-left {
                gap: 0.5rem !important;
            }
            .guide-row-thumb-wrap,
            .news-row-thumb-wrap {
                width: 76px !important;
                min-width: 76px !important;
                max-width: 76px !important;
                height: 48px !important;
                border-radius: 0.375rem !important;
            }
            .guide-row-thumb-wrap img,
            .news-row-thumb-wrap img,
            .guide-row-img,
            .news-row-img {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
                border-radius: 0.375rem !important;
            }
            .guide-row-info {
                gap: 2px !important;
            }
            .guide-row-cat {
                font-size: 9.5px !important;
            }
            .guide-row-date {
                font-size: 10px !important;
            }
            .guide-row-title {
                font-size: 12.5px !important;
                line-height: 1.3 !important;
                white-space: normal !important;
                display: -webkit-box !important;
                -webkit-line-clamp: 2 !important;
                -webkit-box-orient: vertical !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }
            .guide-row-right {
                display: none !important;
            }
        }

        @media (max-width: 360px) {
            .guide-row-thumb-wrap,
            .news-row-thumb-wrap {
                width: 64px !important;
                min-width: 64px !important;
                max-width: 64px !important;
                height: 42px !important;
            }
            .guide-row-title {
                font-size: 12px !important;
            }
        }

        /* --------------------------------------------------------------------------
           7. GUIDES HUB SECTION 3: CALLOUT CTA WORKFLOW
           -------------------------------------------------------------------------- */
        .sec-guides-cta,
        .sec-news-cta {
            padding-top: var(--sec-pad-mid-top);
            padding-bottom: var(--sec-pad-mid-bottom);
            background: transparent;
            width: 100%;
        }
        .guides-cta-card,
        .news-cta-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 1.5rem;
            padding: clamp(28px, 4vw, 44px);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
            display: grid;
            grid-template-columns: 1.45fr 1fr;
            gap: clamp(24px, 3.5vw, 40px);
            align-items: center;
            width: 100%;
            box-sizing: border-box;
        }
        @media (max-width: 860px) {
            .guides-cta-card,
            .news-cta-card {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 640px) {
            .guides-cta-card,
            .news-cta-card {
                padding: 22px 18px !important;
                border-radius: 1rem !important;
                gap: 20px !important;
            }
            .guides-cta-title {
                font-size: 20px !important;
            }
            .guides-cta-desc {
                font-size: 13.5px !important;
            }
            .guides-cta-btns {
                width: 100% !important;
                flex-direction: column !important;
                gap: 10px !important;
            }
            .guides-cta-btns a,
            .btn-workflow-dark,
            .btn-workflow-light {
                width: 100% !important;
                display: flex !important;
                justify-content: center !important;
                text-align: center !important;
                box-sizing: border-box !important;
                padding: 0.75rem 1rem !important;
            }
            .guides-stat-box {
                padding: 12px 14px !important;
            }
            .guides-stat-val {
                font-size: 17px !important;
            }
            .guides-stat-label {
                font-size: 9.5px !important;
            }
        }
        .guides-cta-left {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;
        }
        .guides-cta-kicker {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: #059669;
        }
        .guides-cta-title {
            font-size: clamp(22px, 3vw, 34px);
            font-weight: 900;
            color: #0f172a;
            line-height: 1.2;
            margin: 0;
            letter-spacing: -0.025em;
        }
        .guides-cta-desc {
            font-size: 14px;
            color: #475569;
            line-height: 1.6;
            margin: 0 0 0.5rem 0;
            font-weight: 500;
        }
        .guides-cta-btns {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.75rem;
        }
        .btn-workflow-dark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #0f172a;
            color: #ffffff;
            font-size: 11.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 0.75rem 1.375rem;
            border-radius: 0.75rem;
            text-decoration: none;
            transition: background-color 0.15s ease;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        }
        .btn-workflow-dark:hover {
            background: #1e293b;
            color: #ffffff;
            text-decoration: none;
        }
        .btn-workflow-light {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            color: #0f172a;
            border: 1px solid #e2e8f0;
            font-size: 11.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 0.75rem 1.375rem;
            border-radius: 0.75rem;
            text-decoration: none;
            transition: background-color 0.15s ease, border-color 0.15s ease;
        }
        .btn-workflow-light:hover {
            background: #f8fafc;
            border-color: #cbd5e1;
            color: #0f172a;
            text-decoration: none;
        }
        .guides-cta-stats {
            display: flex;
            flex-direction: column;
            gap: 0.625rem;
            width: 100%;
        }
        .guides-stat-box {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 0.875rem;
            padding: 0.875rem 1.125rem;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .guides-stat-val {
            font-size: 20px;
            font-weight: 900;
            color: #0f172a;
            line-height: 1.2;
        }
        .guides-stat-val.val-accent {
            color: #059669;
        }
        .guides-stat-label {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #64748b;
        }

        /* --------------------------------------------------------------------------
           8. UNIVERSAL FAQ ACCORDION (Homepage & Guides Hub)
           -------------------------------------------------------------------------- */
        .sec-faq-pad,
        .sec-guides-faq {
            padding-top: var(--sec-pad-faq-top);
            padding-bottom: var(--sec-pad-faq-bottom);
            width: 100%;
            background: transparent;
        }
        .faq-header-center {
            text-align: center;
            margin-bottom: clamp(28px, 4vw, 40px);
            max-width: 800px;
            margin-inline: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.375rem;
        }
        .faq-kicker {
            color: #64748b !important;
            font-size: 10px;
            font-weight: 700 !important;
            letter-spacing: 0.2em;
            text-transform: uppercase !important;
            margin: 0;
        }
        .faq-h2 {
            font-size: clamp(24px, 3.5vw, 36px);
            font-weight: 900;
            color: #0f172a;
            letter-spacing: -0.025em;
            margin: 0;
            line-height: 1.2;
        }
        .faq-sub {
            font-size: 14.5px;
            color: #64748b;
            font-weight: 500;
            margin: 0.25rem 0 0 0;
            max-width: 620px;
        }
        .faq-list-wrap {
            max-width: 860px;
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        details.faq-accordion-item {
            background: #ffffff;
            border: 1px solid #eef2f6;
            border-radius: 0.875rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
            overflow: hidden;
        }
        details.faq-accordion-item[open] {
            border-color: #cbd5e1;
        }
        summary.faq-summary {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 1.125rem 1.5rem;
            font-size: 15.5px;
            font-weight: 800;
            color: #0f172a;
            cursor: pointer;
            list-style: none;
            gap: 1rem;
            min-height: 60px;
            box-sizing: border-box;
            user-select: none;
        }
        summary.faq-summary::-webkit-details-marker {
            display: none;
        }
        .faq-q-text,
        summary.faq-summary .faq-q-text {
            flex: 1 1 auto;
            min-width: 0;
            line-height: 1.4;
            margin: 0;
        }
        .faq-icon-cross,
        summary.faq-summary .faq-icon-cross,
        summary.faq-summary svg.faq-icon-cross,
        summary.faq-summary span.faq-icon-cross svg,
        details.faq-accordion-item summary svg {
            width: 22px;
            height: 22px;
            flex-shrink: 0;
            color: #0f172a;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            align-self: flex-start;
            margin-top: 2px;
            transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
        }
        details.faq-accordion-item[open] .faq-icon-cross,
        details[open] .faq-icon-cross,
        details.faq-accordion-item[open] summary svg,
        details[open] summary svg {
            transform: rotate(45deg);
            color: #0f172a;
        }
        summary.faq-summary:hover .faq-icon-cross,
        summary.faq-summary:hover svg {
            color: #020617;
        }
        .faq-content-anim {
            overflow: hidden;
        }
        .faq-answer-body {
            padding: 0.5rem 1.5rem 1.375rem 1.5rem;
            font-size: 14.5px;
            line-height: 1.65;
            color: #475569;
            border-top: 1px solid #f8fafc;
        }
        .faq-answer-body strong {
            color: #0f172a;
            font-weight: 700;
        }

        /* --------------------------------------------------------------------------
           9. REVIEWS HUB: CARDS & FILTER BUTTONS SPECIFICATION
           -------------------------------------------------------------------------- */
        /* Filter bar is unified above with .guides-filter-bar (including mobile touch scroll) */

        .c-card-review-item,
        a.c-card-review-item {
            display: flex !important;
            flex-direction: column !important;
            height: 100% !important;
            flex: 1 1 auto !important;
            width: 100% !important;
            background: #ffffff !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 0.75rem !important;
            overflow: hidden !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
            transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
            cursor: pointer !important;
            text-decoration: none !important;
            box-sizing: border-box !important;
        }
        .c-card-review-item:hover {
            border-color: #e2e8f0 !important;
            box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
            transform: none !important;
            text-decoration: none !important;
        }
        .review-thumb-wrap {
            position: relative !important;
            width: 100% !important;
            aspect-ratio: 16 / 9 !important;
            overflow: hidden !important;
            background: #f1f5f9 !important;
            border-radius: 0.75rem !important;
            -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
            transform: translateZ(0) !important;
            flex-shrink: 0 !important;
        }
        .review-thumb-img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            border-radius: 0.75rem !important;
            transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
        }
        .c-card-review-item:hover .review-thumb-img {
            transform: scale(1.05) !important;
        }
        /* Reviews Hub Category Badge: Top-Left down to ~360px; Bottom-Left only on very narrow mobile (<=360px) */
        .review-badge-cat {
            position: absolute !important;
            top: 10px !important;
            bottom: auto !important;
            left: 10px !important;
            right: auto !important;
            background: rgba(255, 255, 255, 0.96) !important;
            backdrop-filter: blur(4px) !important;
            -webkit-backdrop-filter: blur(4px) !important;
            color: #0f172a !important;
            font-size: 10px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.08em !important;
            padding: 0.25rem 0.5625rem !important;
            border-radius: 0.375rem !important;
            z-index: 2 !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
            max-width: calc(100% - 65px) !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            box-sizing: border-box !important;
        }
        @media (max-width: 360px) {
            .review-badge-cat {
                top: 8px !important;
                bottom: auto !important;
                left: 8px !important;
                right: auto !important;
                height: auto !important;
                max-height: 22px !important;
                max-width: calc(100% - 55px) !important;
            }
        }
        .review-badge-score {
            position: absolute !important;
            top: 10px !important;
            right: 10px !important;
            left: auto !important;
            bottom: auto !important;
            background: rgba(15, 23, 42, 0.9) !important;
            color: #ffffff !important;
            font-size: 10px !important;
            font-weight: 900 !important;
            padding: 0.25rem 0.5625rem !important;
            border-radius: 0.375rem !important;
            z-index: 2 !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
        }
        .review-card-body {
            padding: 0.125rem 0.25rem 0.25rem 0.25rem !important;
            display: flex !important;
            flex-direction: column !important;
            flex: 1 1 auto !important;
            height: 100% !important;
            gap: 0.375rem !important;
            background: #ffffff !important;
            box-shadow: none !important;
            border: none !important;
            box-sizing: border-box !important;
        }
        .review-card-meta {
            font-size: 10.5px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.06em !important;
            color: #94a3b8 !important;
            box-shadow: none !important;
            border: none !important;
            margin: 0 !important;
        }
        .review-card-author {
            color: #0f172a !important;
            font-weight: 800 !important;
        }
        .review-card-title {
            font-size: 16.5px !important;
            font-weight: 800 !important;
            color: #0f172a !important;
            line-height: 1.35 !important;
            margin: 0 !important;
            min-height: auto !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            text-decoration: none !important;
            box-shadow: none !important;
            text-shadow: none !important;
            border: none !important;
            transition: color 0.15s ease !important;
        }
        .c-card-review-item:hover .review-card-title,
        .review-card-title:hover {
            color: #000000 !important;
            text-decoration: none !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }
        .review-card-excerpt,
        .review-card-excerpt p {
            font-size: 13px !important;
            line-height: 1.55 !important;
            color: #64748b !important;
            font-weight: 400 !important;
            margin: 0 !important;
            padding: 0 !important;
            min-height: auto !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            box-shadow: none !important;
            border: none !important;
        }
        li.review-grid-item,
        .reviews-grid .review-grid-item,
        .reviews-grid-3cols .review-grid-item {
            display: flex !important;
            flex-direction: column !important;
            height: 100% !important;
        }
        .reviews-grid .bde-loop-item,
        .reviews-grid-3cols .bde-loop-item,
        .c-card-review-item-wrap {
            display: flex !important;
            flex-direction: column !important;
            height: 100% !important;
            flex: 1 1 auto !important;
            width: 100% !important;
        }

        /* --------------------------------------------------------------------------
           9.1 REVIEWS HUB: METHODOLOGY CARD (Responsive Stacking & Fluid Mobile)
           -------------------------------------------------------------------------- */
        .sec-methodology-pad,
        .sec-reviews-methodology {
            padding-top: var(--sec-pad-mid-top);
            padding-bottom: var(--sec-pad-mid-bottom);
            width: 100%;
            background: transparent;
        }
        .methodology-card {
            background: #ffffff !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 1.25rem !important;
            padding: clamp(24px, 4vw, 40px) !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
            display: grid !important;
            grid-template-columns: 1.4fr 1fr !important;
            gap: clamp(20px, 3vw, 36px) !important;
            align-items: center !important;
            box-sizing: border-box !important;
            width: 100% !important;
        }
        .methodology-left {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 8px !important;
            min-width: 0 !important;
        }
        .methodology-kicker {
            display: inline-flex !important;
            align-items: center !important;
            padding: 4px 12px !important;
            border-radius: 999px !important;
            font-size: 10px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.12em !important;
            color: #047857 !important;
            background: #ecfdf5 !important;
            border: 1px solid #a7f3d0 !important;
            margin-bottom: 2px !important;
        }
        .methodology-h2 {
            font-size: clamp(20px, 2.5vw, 28px) !important;
            font-weight: 800 !important;
            color: #0f172a !important;
            line-height: 1.25 !important;
            letter-spacing: -0.02em !important;
            margin: 0 !important;
        }
        .methodology-desc {
            font-size: 14px !important;
            color: #475569 !important;
            line-height: 1.6 !important;
            margin: 0 !important;
            font-weight: 500 !important;
        }
        .methodology-btns {
            display: flex !important;
            flex-direction: column !important;
            gap: 10px !important;
            justify-content: center !important;
            width: 100% !important;
        }
        .btn-protocol-dark {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: #0f172a !important;
            color: #ffffff !important;
            font-size: 11.5px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.06em !important;
            padding: 0.75rem 1.375rem !important;
            border-radius: 0.75rem !important;
            text-decoration: none !important;
            transition: background-color 0.15s ease !important;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        }
        .btn-protocol-dark:hover {
            background: #1e293b !important;
            color: #ffffff !important;
            text-decoration: none !important;
        }
        .btn-protocol-light {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: #ffffff !important;
            color: #0f172a !important;
            border: 1px solid #e2e8f0 !important;
            font-size: 11.5px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.06em !important;
            padding: 0.75rem 1.375rem !important;
            border-radius: 0.75rem !important;
            text-decoration: none !important;
            transition: background-color 0.15s ease, border-color 0.15s ease !important;
        }
        .btn-protocol-light:hover {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            color: #0f172a !important;
            text-decoration: none !important;
        }
        @media (max-width: 768px) {
            .methodology-card {
                grid-template-columns: 1fr !important;
                gap: 20px !important;
                padding: 22px 18px !important;
                border-radius: 1rem !important;
            }
            .methodology-btns a,
            .btn-protocol-dark,
            .btn-protocol-light {
                width: 100% !important;
                display: flex !important;
                justify-content: center !important;
                text-align: center !important;
                box-sizing: border-box !important;
            }
        }

        /* --------------------------------------------------------------------------
           10. UNIVERSAL CLEAN HOVER & ANTI-UNDERLINE RULES (Zero Box-Shadow Bleed)
           -------------------------------------------------------------------------- */
        a.c-card-review-item,
        a.c-card-guide,
        a.guide-card,
        a.c-row-guide,
        a.guide-row-item,
        a.c-card-hero,
        a.c-card-side,
        a.c-card-news,
        a.c-card-deeper-sub,
        a.c-card-deeper-featured,
        a.c-card-use-case,
        a.c-card-step,
        a.guides-filter-btn,
        a.reviews-filter-btn,
        a.btn-workflow-dark,
        a.btn-workflow-light {
            text-decoration: none;
        }
        a.c-card-review-item:hover,
        a.c-card-guide:hover,
        a.guide-card:hover,
        a.c-row-guide:hover,
        a.guide-row-item:hover,
        a.c-card-hero:hover,
        a.c-card-side:hover,
        a.c-card-news:hover,
        a.c-card-deeper-sub:hover,
        a.c-card-deeper-featured:hover,
        a.c-card-use-case:hover,
        a.c-card-step:hover,
        a.guides-filter-btn:hover, a.guides-filter-btn:focus, a.guides-filter-btn:active,
        a.reviews-filter-btn:hover, a.reviews-filter-btn:focus, a.reviews-filter-btn:active,
        a.btn-workflow-dark:hover,
        a.btn-workflow-light:hover {
            text-decoration: none;
        }
    /* --------------------------------------------------------------------------
           10. STATIC PAGES ENHANCEMENTS (ABOUT, CONTACT, PRIVACY, TERMS)
           -------------------------------------------------------------------------- */
        .sec-static-hero {
            padding-top: var(--sec-pad-static-hero-top);
            padding-bottom: var(--sec-pad-static-hero-bottom);
            width: 100%;
            background: transparent;
        }

        /* Hero Trust Strip */
        .about-trust-strip {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
            margin-top: 1.125rem;
        }
        .about-trust-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 62.4375rem;
            padding: 0.375rem 0.875rem;
            font-size: 12px;
            font-weight: 700;
            color: #0f172a;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        }
        .about-trust-pill svg {
            color: #059669;
            width: 14px;
            height: 14px;
        }

        /* Comparison Bento Cards in Why We Exist */
        .about-compare-card {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 1.25rem;
            padding: clamp(24px, 3.5vw, 36px);
            box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.03);
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .compare-card-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .compare-card-header h3 {
            font-size: 19px;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
            letter-spacing: -0.02em;
        }
        .compare-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-top: 0.5rem;
        }
        .compare-item {
            display: flex;
            align-items: flex-start;
            gap: 0.625rem;
            font-size: 13.5px;
            line-height: 1.55;
            color: #475569;
        }
        .compare-item strong {
            color: #0f172a;
        }
        .compare-bullet-bad {
            width: 20px;
            height: 20px;
            min-width: 20px;
            border-radius: 0.375rem;
            background: #fef2f2;
            color: #ef4444;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 12px;
            margin-top: 1px;
        }
        .compare-bullet-good {
            width: 20px;
            height: 20px;
            min-width: 20px;
            border-radius: 0.375rem;
            background: #ecfdf5;
            color: #059669;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 12px;
            margin-top: 1px;
        }

        /* Value Cards with Top Number Badge */
        .c-card-value-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-bottom: 0.25rem;
        }
        .value-badge-num {
            font-size: 11px;
            font-weight: 800;
            color: #94a3b8;
            font-family: monospace, sans-serif;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 0.375rem;
            padding: 0.1875rem 0.5rem;
        }

        /* 4 Methodology Pillars Grid */
        .about-pillars-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.25rem;
            width: 100%;
        }
        @media (max-width: 768px) {
            .about-pillars-grid {
                grid-template-columns: 1fr;
            }
        }
        .c-card-pillar {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 1.25rem;
            padding: 1.625rem;
            box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.03);
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        .pillar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        .pillar-badge-weight {
            font-size: 10.5px;
            font-weight: 800;
            color: #059669;
            background: #ecfdf5;
            border: 1px solid #a7f3d0;
            border-radius: 62.4375rem;
            padding: 0.25rem 0.625rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .c-card-pillar h3 {
            font-size: 17.5px;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
        }
        .c-card-pillar p {
            font-size: 13.5px;
            line-height: 1.6;
            color: #475569;
            margin: 0;
        }

        /* Enhanced Team & Disclosure Cards */
        .team-quote-box {
            background: #f8fafc;
            border-left: 3px solid #059669;
            border-radius: 0.625rem;
            padding: 0.875rem 1.125rem;
            font-size: 13.5px;
            line-height: 1.6;
            color: #334155;
            font-style: italic;
            text-align: left;
            width: 100%;
            box-sizing: border-box;
            margin-top: 0.25rem;
        }
        .team-social-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
            margin-top: 0.5rem;
            flex-wrap: wrap;
        }
        .team-social-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            background: #f1f5f9;
            border-radius: 0.5rem;
            padding: 0.375rem 0.875rem;
            font-size: 12px;
            font-weight: 700;
            color: #334155;
            text-decoration: none;
            transition: background-color 0.2s ease, color 0.2s ease;
        }
        .team-social-pill:hover {
            background: #0f172a;
            color: #ffffff;
        }

        /* Editorial Disclosure Box */
        .about-disclosure-card {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 1.25rem;
            padding: clamp(24px, 3vw, 32px);
            box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.03);
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        .about-disclosure-header {
            display: flex;
            align-items: center;
            gap: 0.625rem;
        }
        .about-disclosure-header h3 {
            font-size: 17px;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
        }
        .about-disclosure-card p {
            font-size: 13.5px;
            line-height: 1.65;
            color: #475569;
            margin: 0;
        }

        /* ==========================================================================
           Today's Highlight — Large Hero Card & Side Cards (Clean Soft Shadow Hover)
           ========================================================================== */
        html body .c-card-hero,
        html body .highlight-hero-card,
        html body a.c-card-hero,
        html body a.highlight-hero-card,
        html body .c-card-side,
        html body .side-article-card,
        html body a.c-card-side,
        html body a.side-article-card {
            border: 1px solid #e2e8f0 !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
            transform: none !important;
            transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
        }

        html body .c-card-hero:hover,
        html body .highlight-hero-card:hover,
        html body a.c-card-hero:hover,
        html body a.highlight-hero-card:hover,
        html body .c-card-side:hover,
        html body .side-article-card:hover,
        html body a.c-card-side:hover,
        html body a.side-article-card:hover,
        html body .highlight-hero-col .bde-loop-item:hover .c-card-hero,
        html body .highlight-hero-col .bde-loop-item:hover .highlight-hero-card,
        html body .highlight-hero-col .bde-loop-item:hover a.c-card-hero,
        html body .highlight-hero-col .bde-loop-item:hover a.highlight-hero-card,
        html body .highlight-side-col .bde-loop-item:hover .c-card-side,
        html body .highlight-side-col .bde-loop-item:hover .side-article-card {
            border-color: #e2e8f0 !important;
            box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
            transform: none !important;
            text-decoration: none !important;
        }

        html body .c-card-hero:hover .c-card-hero__img,
        html body .highlight-hero-card:hover .hero-img,
        html body .highlight-hero-col .bde-loop-item:hover .hero-img,
        html body .highlight-hero-col .bde-loop-item:hover .c-card-hero__img,
        html body .c-card-side:hover .c-card-side__thumb,
        html body .side-article-card:hover .side-img,
        html body .highlight-side-col .bde-loop-item:hover .side-img {
            transform: scale(1.04) !important;
        }

        html body .c-card-hero:hover .c-card-hero__title,
        html body .highlight-hero-card:hover .hero-title,
        html body .highlight-hero-col .bde-loop-item:hover .hero-title,
        html body .highlight-hero-col .bde-loop-item:hover .c-card-hero__title,
        html body .highlight-hero-col .bde-loop-item:hover h3,
        html body .c-card-side:hover .c-card-side__title,
        html body .side-article-card:hover .side-title,
        html body .highlight-side-col .bde-loop-item:hover h4 {
            color: #000000 !important;
            text-decoration: none !important;
        }

    
                                                /* ==========================================================================
           SINGLE REVIEW & SINGLE ARTICLE DESIGN SYSTEM (T5 & T6)
           ========================================================================== */

        /* ==========================================================================
   SINGLE REVIEWS & ARTICLES MASTER STYLES (T5 & T6 - CRO OPTIMIZED)
   ========================================================================== */

        /* ── Global 1100px Contained Width for All Review & Article Sections ── */
        .review-single-hero-wrap,
        .review-proscons-wrap,
        .review-specs-wrap,
        .review-toc-wrap,
        .article-prose-container,
        .review-alternatives-wrap,
        .review-verdict-wrap,
        .article-author-box,
        .article-single-header-wrap,
        .sec-article-related-wrap {
            max-width: 1100px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1.25rem;
            padding-right: 1.25rem;
            box-sizing: border-box;
            width: 100%;
        }

        /* ── Top Spacing from Header (Harmonized with Guide & News at 20px) ── */
        .review-single-hero-wrap {
            padding-top: 20px;
            margin-bottom: 1.5rem;
        }

        .article-single-header-wrap {
            padding-top: 20px;
            margin-bottom: 1.5rem;
        }

        /* ── Hero Title & Badge ── */
        .review-single-header {
            text-align: center;
            max-width: 860px;
            margin: 0 auto 1.75rem auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.875rem;
        }

        .review-badges-row {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0;
        }

        /* display:none removed */

        .hub-hero-badge,
        .legal-badge {
            display: inline-flex !important;
            align-items: center !important;
            flex-wrap: wrap !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            white-space: normal !important;
            word-break: break-word !important;
            text-align: left !important;
            padding: 0.25rem 0.625rem !important;
            border-radius: 0.375rem !important;
            background: var(--theme-bg, #ecfdf5) !important;
            color: var(--theme-text, #065f46) !important;
            border: 1px solid var(--theme-border, #a7f3d0) !important;
            font-size: 10.5px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.08em !important;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
            line-height: 1.35 !important;
            margin-bottom: 12px !important;
        }

        /* Media query mobile display:none on best-hero-badge removed */


        /* Hub Page Hero Info (Best AI Writing Tools) — Clean Typographic Kicker */
        .hub-pill-updated,
        .sec-hub-hero-pad .hub-pill-updated,
        .hub-hero-pills-row .hub-pill-updated {
            display: inline-flex !important;
            align-items: center !important;
            padding: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            color: #64748b !important;
            border: none !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.12em !important;
            box-shadow: none !important;
            line-height: 1.2 !important;
            margin-bottom: 0.75rem !important;
        }

        .review-single-title {
            font-size: clamp(28px, 4vw, 44px);
            font-weight: 900;
            color: #020617;
            letter-spacing: -0.03em;
            line-height: 1.15;
            margin: 0;
        }

        .review-single-meta {
            font-size: 12.5px;
            font-weight: 600;
            color: #94a3b8;
        }

                /* ── Discrete Header Byline ── */
        .review-discrete-byline {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            font-size: 13px;
            color: #64748b;
            font-weight: 500;
            margin-top: 0.375rem;
        }

        .byline-item {
            display: inline-flex;
            align-items: center;
            gap: 0.3125rem;
        }

        .byline-author strong {
            color: #0f172a;
            font-weight: 700;
        }

        .byline-role {
            color: #94a3b8;
            font-size: 12px;
            font-weight: 500;
        }

        .byline-sep {
            color: #cbd5e1;
            font-weight: 700;
        }

        .byline-tested {
            display: inline-flex;
            align-items: center;
            gap: 0.3125rem;
            color: #64748b;
            font-weight: 500;
        }
        .byline-tested svg {
            color: #94a3b8;
        }

        /* ── Immediate Decision Block (TechRadar / ToolTester Style) ── */
        .review-decision-card {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 1.375rem;
            padding: clamp(20px, 3vw, 28px) clamp(22px, 3.5vw, 32px);
            box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
            margin: 1.5rem auto 2rem auto;
            width: 100%;
            box-sizing: border-box;
        }

        .decision-card-grid {
            display: grid;
            grid-template-columns: 140px 1fr 220px;
            gap: 1.75rem;
            align-items: center;
        }

        @media (max-width: 960px) {
            .decision-card-grid {
                grid-template-columns: 1fr;
                gap: 1.25rem;
            }
            .decision-verdict-col {
                border-left: none;
                border-right: none;
                border-top: 1px solid #f1f5f9;
                border-bottom: 1px solid #f1f5f9;
                padding: 1.125rem 0;
            }
            .decision-action-col {
                width: 100%;
            }
        }

        /* Col 1: Brand & Score */
        .decision-brand-score-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 0.5rem;
        }

        .decision-logo-box {
            width: 58px;
            height: 58px;
            border-radius: 0.875rem;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.375rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            overflow: hidden;
        }

        .decision-logo-img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }

        .decision-logo-monogram {
            font-size: 24px;
            font-weight: 900;
            color: #0f172a;
        }

        .decision-score-wrap {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 2px;
            line-height: 1;
        }

        
/* ==========================================================================
   SCORE TIER COLOR SCHEME (Ratings 0 to 10 & Dynamic Badges)
   - Tier 1 (>= 8.5) : ZenScrib Emerald (#059669) - Exceptionnel / Outstanding
   - Tier 2 (7.5-8.4): Fresh Green (#10b981) - Très Bon / Very Good
   - Tier 3 (6.5-7.4): Warm Amber (#d97706) - Bon / Good
   - Tier 4 (5.0-6.4): Copper Orange (#ea580c) - Moyen / Average
   - Tier 5 (< 5.0)  : Soft Coral (#e11d48) - Déconseillé / Not Recommended
   ========================================================================== */
.score-tier-exceptional { color: #059669 !important; }
.badge-tier-exceptional { background: #ecfdf5 !important; color: #065f46 !important; border: 1px solid #a7f3d0 !important; }

.score-tier-very-good { color: #10b981 !important; }
.badge-tier-very-good { background: #f0fdf4 !important; color: #047857 !important; border: 1px solid #bbf7d0 !important; }

.score-tier-good { color: #d97706 !important; }
.badge-tier-good { background: #fffbeb !important; color: #92400e !important; border: 1px solid #fde68a !important; }

.score-tier-average { color: #ea580c !important; }
.badge-tier-average { background: #fff7ed !important; color: #9a3412 !important; border: 1px solid #fed7aa !important; }

.score-tier-poor { color: #e11d48 !important; }
.badge-tier-poor { background: #fff1f2 !important; color: #9f1239 !important; border: 1px solid #fecdd3 !important; }

/* Recommended Bots Unified Green Styles (Homepage T1) */
.sec-selection-pad {
    position: relative !important;
}
.protocol-badge-pill,
.protocol-card .protocol-badge-pill,
.c-card-protocol .protocol-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.25rem 0.5625rem !important;
    border-radius: 0.375rem !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    line-height: 1 !important;
    margin-bottom: 0.375rem !important;
    width: fit-content !important;
}
.protocol-card-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.375rem !important;
    margin-bottom: 0.875rem !important;
}
.protocol-card-title {
    margin: 0 !important;
    font-size: 1.125rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
}
.protocol-check-icon {
    color: var(--theme-accent, #059669) !important;
    background: transparent !important;
}
.protocol-check-icon svg circle {
    fill: var(--theme-bg, #ecfdf5) !important;
    stroke: var(--theme-accent, #059669) !important;
}

/* All Tabs active state forced to ZenScrib Green */
.selection-tabs-row .selection-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    text-decoration: none !important;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease !important;
    cursor: pointer !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.02) !important;
}
.selection-tabs-row .selection-tab-btn:hover {
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
.selection-tabs-row .selection-tab-btn.active,
.selection-tab-btn.active,
.selection-tab-btn[data-active="true"],
.selection-tab-btn.tab-btn-0.active,
.selection-tab-btn.tab-btn-1.active,
.selection-tab-btn.tab-btn-2.active,
.selection-tab-btn.tab-btn-3.active {
    background-color: #ecfdf5 !important;
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border-color: #059669 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.15) !important;
}

.decision-score-num {
            font-size: 32px;
            font-weight: 900;
            color: var(--theme-accent, #059669);
            letter-spacing: -0.04em;
        }

        .decision-score-max {
            font-size: 14px;
            font-weight: 800;
            color: #94a3b8;
        }

        .decision-status-badge {
            display: inline-flex !important;
            align-items: center !important;
            padding: 3px 0.625rem !important;
            border-radius: 0.375rem !important;
            font-size: 10.5px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.08em !important;
            line-height: 1.2 !important;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
        }

        /* Col 2: Quick Verdict */
        .decision-verdict-col {
            border-left: 1px solid #f1f5f9;
            border-right: 1px solid #f1f5f9;
            padding: 0 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.375rem;
        }

        .decision-verdict-header {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .decision-verdict-kicker {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #64748b;
        }

        .decision-verdict-title {
            font-size: 17px;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
            line-height: 1.3;
        }

        .decision-verdict-text {
            font-size: 13.5px;
            line-height: 1.6;
            color: #475569;
            margin: 0;
        }

        /* Col 3: Action & Price */
        .decision-action-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 0.5rem;
        }

        .decision-price-box {
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        .decision-price-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            color: #94a3b8;
            letter-spacing: 0.05em;
        }

        .decision-price-val {
            font-size: 16px;
            font-weight: 800;
            color: #0f172a;
        }

        .btn-decision-primary-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 0.75rem 1.125rem;
            border-radius: 0.75rem;
            background: #020617;
            color: #ffffff;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            text-decoration: none;
            transition: all 0.2s ease;
            box-shadow: 0 4px 14px rgba(2, 6, 23, 0.15);
        }

        .btn-decision-primary-cta:hover {
            background: #1e293b;
            color: #ffffff;
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(2, 6, 23, 0.22);
        }

        .decision-verified-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.3125rem;
            font-size: 10.5px;
            font-weight: 700;
            color: #64748b;
        }

        .decision-verified-pill svg {
            color: var(--theme-accent, #059669);
        }

        /* ── Scoring Breakdown Benchmarks in Verdict Section ── */
        .verdict-benchmarks-card {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 1.25rem;
            padding: clamp(20px, 3vw, 28px) clamp(22px, 3.5vw, 32px);
            box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.03);
            margin-bottom: 1.5rem;
        }

        .verdict-benchmarks-header {
            margin-bottom: 1.125rem;
            padding-bottom: 0.625rem;
            border-bottom: 1.5px solid #f1f5f9;
        }

        .verdict-benchmarks-kicker {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #64748b;
            display: block;
            margin-bottom: 2px;
        }

        .verdict-benchmarks-title {
            font-size: clamp(17px, 2vw, 20px);
            font-weight: 800;
            color: #0f172a;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .verdict-gauges-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 0.875rem 1.75rem;
        }

        .verdict-gauge-item {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .verdict-gauge-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            font-weight: 700;
            color: #1e293b;
        }

        .verdict-gauge-val {
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
        }

        .verdict-gauge-val small {
            color: #94a3b8;
            font-weight: 600;
        }

        .verdict-gauge-track {
            width: 100%;
            height: 7px;
            background: #f1f5f9;
            border-radius: 62.4375rem;
            overflow: hidden;
        }

        .verdict-gauge-fill {
            height: 100%;
            background: var(--theme-accent, #059669);
            border-radius: 62.4375rem;
            transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        /* ── Sticky Conversion Bar (DEPRECATED & HIDDEN) ── */
        .review-sticky-bar,
        .review-sticky-bar.is-active {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

                /* ── Master Blend Dashboard (Specs Strip) ── */
        .swiss-specs-strip {
            background: #f8fafc;
            border-bottom: 1px solid rgba(226, 232, 240, 0.9);
            padding: 18px clamp(24px, 3.5vw, 36px);
        }

        .swiss-specs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1rem 1.5rem;
        }

        .swiss-spec-item {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .spec-strip-label {
            font-size: 10px;
            font-weight: 800;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .spec-strip-val {
            font-size: 14px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.3;
        }
        
        .review-scorecard-bottom-strip {
            padding: 1.25rem 1.5rem;
            background: rgba(15, 23, 42, 0.02);
            border-top: 1px solid #f1f5f9;
            border-radius: 0 0 1.5rem 1.5rem;
            margin: 28px calc(-1 * clamp(24px, 3.5vw, 36px)) calc(-1 * clamp(24px, 3.5vw, 36px)) calc(-1 * clamp(24px, 3.5vw, 36px));
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* ── Review Pros & Cons (Option 5 Swiss Grid + Target Audience) ── */
        .review-proscons-wrap {
            margin: 2rem auto;
        }

        .swiss-container {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 1.375rem;
            overflow: hidden;
            box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.03);
        }

        .swiss-top-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        @media (max-width: 768px) {
            .swiss-top-row {
                grid-template-columns: 1fr;
            }
            .swiss-pros-half {
                border-right: none;
                border-bottom: 1px solid #e2e8f0;
            }
        }

        .swiss-half {
            padding: clamp(24px, 3.5vw, 36px);
        }

        .swiss-pros-half {
            border-right: 1px solid #e2e8f0;
        }

        .swiss-header {
            display: flex;
            align-items: baseline;
            gap: 0.75rem;
            margin-bottom: 1.25rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid #0f172a;
        }

        .swiss-index {
            font-size: 24px;
            font-weight: 900;
            color: #059669;
            letter-spacing: -0.04em;
            line-height: 1;
        }

        .swiss-cons-idx {
            color: #64748b;
        }

        .swiss-heading {
            margin: 0;
            font-size: 15px;
            font-weight: 800;
            color: #0f172a;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .swiss-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.875rem;
        }

        .swiss-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
        }

        .swiss-bullet {
            flex-shrink: 0;
            font-weight: 800;
            font-size: 14px;
            line-height: 1.4;
        }

        .swiss-check {
            color: #059669;
        }

        .swiss-dash {
            color: #94a3b8;
        }

        .swiss-text {
            font-size: 14.5px;
            line-height: 1.5;
            color: #334155;
        }

                /* ── Target Audience Row (Who it's for / Who should avoid it) ── */
        .swiss-target-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-top: 1px solid #e2e8f0;
            background: #fafbfc;
        }

        @media (max-width: 768px) {
            .swiss-target-row {
                grid-template-columns: 1fr;
            }
            .swiss-target-ideal {
                border-right: none;
                border-bottom: 1px solid #e2e8f0;
            }
        }

        .swiss-target-col {
            padding: clamp(20px, 3vw, 28px) clamp(24px, 3.5vw, 36px);
            display: flex;
            flex-direction: column;
            gap: 0.375rem;
        }

        .swiss-target-ideal {
            border-right: 1px solid #e2e8f0;
        }

        .swiss-target-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.25rem;
        }

        .swiss-target-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 0.375rem;
            background: #ecfdf5;
            color: #059669;
        }

        .swiss-target-icon.swiss-icon-avoid {
            background: #f1f5f9;
            color: #64748b;
        }

        .swiss-target-label {
            font-size: 11.5px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #059669;
        }

        .swiss-target-label.swiss-label-avoid {
            color: #64748b;
        }

        .swiss-target-text {
            margin: 0;
            font-size: 13.5px;
            line-height: 1.55;
            color: #475569;
        }

        /* ── Technical Specifications Table ("At a Glance") ── */
        .review-specs-wrap {
            margin: 2rem auto;
        }

        .review-specs-card {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 1.25rem;
            padding: clamp(20px, 3vw, 28px) clamp(22px, 3.5vw, 32px);
            box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.03);
        }

        .review-specs-header {
            margin-bottom: 1.125rem;
            padding-bottom: 0.75rem;
            border-bottom: 1.5px solid #f1f5f9;
        }

        .review-specs-kicker {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #64748b;
            display: block;
            margin-bottom: 0.25rem;
        }

        .review-specs-title {
            font-size: clamp(17px, 2vw, 20px);
            font-weight: 800;
            color: #0f172a;
            margin: 0;
            letter-spacing: -0.02em;
        }

        .review-specs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1rem 2.25rem;
        }

        .review-spec-row {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            padding-bottom: 0.625rem;
            border-bottom: 1px dashed #e2e8f0;
        }

        .spec-label {
            font-size: 11.5px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .spec-value {
            font-size: 14px;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.4;
        }

        /* ── Dynamic Table of Contents (TOC) ── */
        .review-toc-wrap {
            margin: 1.75rem auto;
        }

        .review-toc-card {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 1.25rem;
            padding: 1.125rem 1.5rem;
            box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.03);
            transition: all 0.2s ease;
        }

        .review-toc-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            user-select: none;
        }

        .review-toc-header-left {
            display: flex;
            align-items: center;
            gap: 0.625rem;
        }

        .review-toc-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 0.5rem;
            background: #f1f5f9;
            color: #0f172a;
        }

        .review-toc-title {
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .review-toc-count {
            font-size: 11px;
            font-weight: 800;
            background: #f1f5f9;
            color: #475569;
            padding: 2px 0.5rem;
            border-radius: 6.1875rem;
        }

        .review-toc-toggle-btn {
            background: none;
            border: none;
            color: #64748b;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.25rem;
            transition: transform 0.2s ease;
        }

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

        .review-toc-card.toc-collapsed .review-toc-nav {
            display: none !important;
        }

        .review-toc-nav {
            margin-top: 0.875rem;
            padding-top: 0.875rem;
            border-top: 1px solid #f1f5f9;
        }

        .review-toc-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.625rem;
        }

        .review-toc-item {
            margin: 0;
        }

        .review-toc-link {
            display: inline-flex;
            align-items: baseline;
            gap: 0.5rem;
            color: #475569;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: color 0.15s ease, transform 0.15s ease, font-weight 0.15s ease;
        }

        .review-toc-link:hover {
            color: #0f172a;
            font-weight: 700;
            transform: translateX(2px);
        }

        /* ── Active Heading in Viewport (ScrollSpy Bold Highlight) ── */
        .review-toc-link.is-active,
        .review-toc-item.is-active > .review-toc-link {
            color: #0f172a !important;
            font-weight: 800 !important;
            transform: translateX(3px);
        }

        .review-toc-link.is-active .review-toc-num,
        .review-toc-item.is-active .review-toc-num {
            color: var(--theme-accent, #059669) !important;
            font-weight: 900 !important;
        }

        .review-toc-link.is-active .review-toc-text,
        .review-toc-item.is-active .review-toc-text {
            color: #0f172a !important;
            font-weight: 800 !important;
        }

        .review-toc-num {
            font-size: 11px;
            font-weight: 800;
            color: #94a3b8;
            font-variant-numeric: tabular-nums;
        }

        .review-toc-text {
            line-height: 1.4;
        }

                /* ── Compact Mid-Article CTA ── */
        .review-mid-article-cta-compact {
            display: flex;
            width: 100%;
            box-sizing: border-box;
            align-items: center;
            justify-content: space-between;
            gap: 1.25rem;
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.8);
            border-radius: 1rem;
            padding: 1rem 1.5rem;
            margin: 2.25rem 0;
            box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
            transition: box-shadow 0.2s ease;
        }

        .review-mid-article-cta-compact:hover {
            box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02);
            transform: none !important;
        }

        @media (max-width: 640px) {
            .review-mid-article-cta-compact {
            display: flex;
            width: 100%;
            box-sizing: border-box;
            align-items: center;
            justify-content: space-between;
            gap: 1.25rem;
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.8);
            border-radius: 1rem;
            padding: 1rem 1.5rem;
            margin: 2.25rem 0;
            box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
            transition: box-shadow 0.2s ease;
        }

        .review-mid-article-cta-compact:hover {
            box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02);
            transform: none !important;
        }
        }

        .mid-cta-compact-left {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            min-width: 0;
        }

        .mid-cta-spark-icon {
            color: var(--theme-accent, #059669);
            flex-shrink: 0;
        }

        .mid-cta-compact-text {
            font-size: 14px;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.4;
        }

        .mid-cta-compact-right {
            flex-shrink: 0;
        }

        .btn-mid-cta-compact {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #020617;
            color: #ffffff;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0.5625rem 1.125rem;
            border-radius: 0.625rem;
            text-decoration: none;
            white-space: nowrap;
            transition: all 0.2s ease;
            box-shadow: 0 2px 8px rgba(2, 6, 23, 0.15);
        }

        .btn-mid-cta-compact:hover {
            background: #1e293b;
            color: #ffffff;
            transform: translateY(-1px);
        }

        /* ── Final Verdict Card & CTA Styling ── */
        .review-verdict-card {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 1.375rem;
            padding: clamp(24px, 3.5vw, 36px);
            box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.03);
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .verdict-top-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
            padding-bottom: 0.75rem;
            border-bottom: 1.5px solid #f1f5f9;
        }

        .review-verdict-kicker {
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #64748b;
        }

        .verdict-overall-score-badge {
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.375rem !important;
            background: #0f172a !important;
            color: #ffffff !important;
            padding: 0.25rem 0.625rem !important;
            border-radius: 0.375rem !important;
            font-size: 12px !important;
        }

        .verdict-score-label {
            color: #94a3b8;
            font-weight: 600;
        }

        .verdict-score-bold {
            color: #ffffff;
            font-weight: 900;
            letter-spacing: -0.01em;
        }

        .review-verdict-title {
            margin: 0;
            font-size: clamp(20px, 2.5vw, 24px);
            font-weight: 800;
            color: #0f172a;
            line-height: 1.2;
        }

        .review-verdict-desc {
            margin: 0;
            font-size: 15px;
            line-height: 1.65;
            color: #475569;
        }

        .verdict-cta-row {
            margin-top: 0.5rem;
        }

        .btn-review-verdict-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.875rem 1.75rem;
            border-radius: 0.75rem;
            background: #020617;
            color: #ffffff;
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            text-decoration: none;
            transition: all 0.2s ease;
            box-shadow: 0 4px 14px rgba(2, 6, 23, 0.18);
        }

        .btn-review-verdict-cta:hover {
            background: #1e293b;
            color: #ffffff;
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(2, 6, 23, 0.25);
        }

        /* ── Single Article Author Box (Clean & Subtle) ── */
        .article-author-box {
            margin: 2rem auto 3.125rem auto;
        }

        .article-author-card-inner {
            background: #fafbfc;
            border: 1px solid #eef2f6;
            border-radius: 1.25rem;
            padding: 1.375rem 1.75rem;
            display: flex;
            align-items: flex-start;
            gap: 1.25rem;
            box-shadow: none;
        }

        

                /* ── Top Alternatives Comparison Grid ── */
        .review-alternatives-wrap {
            margin: 3rem auto 2.5rem auto;
        }

        .review-alt-section-header {
            margin-bottom: 1.5rem;
        }

        .review-alt-kicker {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #64748b;
            display: block;
            margin-bottom: 0.25rem;
        }

        .review-alt-title {
            font-size: clamp(20px, 3vw, 26px);
            font-weight: 800;
            color: #0f172a;
            margin: 0 0 0.375rem 0;
            line-height: 1.25;
        }

        .review-alt-sub {
            font-size: 14.5px;
            color: #64748b;
            margin: 0;
            line-height: 1.55;
        }

        .review-alt-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
            gap: 1.375rem;
        }

        .review-alt-card {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 1.25rem;
            padding: 1.375rem;
            box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.03);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 1rem;
            transition: all 0.25s ease;
        }

        .review-alt-card:hover {
            transform: translateY(-3px);
            border-color: #cbd5e1;
            box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.08);
        }

        .alt-card-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .alt-card-thumb-wrap {
            width: 44px;
            height: 44px;
            border-radius: 0.75rem;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            overflow: hidden;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .alt-card-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .alt-card-header-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1;
            gap: 0.5rem;
        }

        .alt-card-name {
            margin: 0;
            font-size: 16px;
            font-weight: 800;
            color: #0f172a;
        }

        .alt-card-score-badge {
            display: inline-flex;
            align-items: baseline;
            gap: 2px;
            background: #0f172a;
            color: #ffffff;
            padding: 2px 0.5rem;
            border-radius: 0.375rem;
            font-size: 12px;
            font-weight: 800;
        }

        .alt-card-score-badge small {
            font-size: 9.5px;
            opacity: 0.8;
        }

        .alt-card-body {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            flex: 1;
        }

        .alt-card-price-row {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            font-size: 13px;
        }

        .alt-card-price-lbl {
            font-size: 10.5px;
            font-weight: 700;
            text-transform: uppercase;
            color: #94a3b8;
            letter-spacing: 0.04em;
        }

        .alt-card-price-val {
            font-weight: 800;
            color: #0f172a;
        }

        .alt-card-tldr {
            font-size: 13px;
            line-height: 1.5;
            color: #475569;
            margin: 0;
        }

        .alt-card-actions {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-top: 0.25rem;
        }

        .btn-alt-visit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #020617;
            color: #ffffff;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0.625rem 1rem;
            border-radius: 0.625rem;
            text-decoration: none;
            transition: all 0.2s ease;
            box-shadow: 0 2px 8px rgba(2, 6, 23, 0.12);
        }

        .btn-alt-visit:hover {
            background: #1e293b;
            color: #ffffff;
            transform: translateY(-1px);
        }

        .link-alt-review {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12.5px;
            font-weight: 700;
            color: #475569;
            text-decoration: none;
            padding: 0.25rem 0;
            transition: color 0.15s ease;
        }

        .link-alt-review:hover {
            color: var(--theme-accent, #059669);
        }

        /* ── 8.10 Single Article Related Posts Cards ── */
        .sec-article-related-wrap {
            margin: 3rem auto 4rem auto;
        }

        .related-section-header {
            margin-bottom: 1.5rem;
        }

        .related-kicker {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #059669;
            display: block;
            margin-bottom: 0.25rem;
        }

        .related-title {
            font-size: clamp(20px, 3vw, 26px);
            font-weight: 800;
            color: #0f172a;
            margin: 0 0 0.375rem 0;
        }

        .related-sub {
            font-size: 14.5px;
            color: #64748b;
            margin: 0;
        }

        .related-grid-3cols {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }

        .related-card-item {
            background: #ffffff;
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 1.125rem;
            overflow: hidden;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            transition: all 0.25s ease;
            box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.03);
        }

        .related-card-item:hover {
            transform: none !important;
            border-color: #e2e8f0;
            box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
        }

        .related-thumb-wrap {
            position: relative;
            width: 100%;
            aspect-ratio: 16/9;
            overflow: hidden;
            background: #f1f5f9;
        }

        .related-thumb-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .related-card-item:hover .related-thumb-img {
            transform: scale(1.03);
        }

        .related-badge-cat {
            position: absolute;
            top: 12px;
            left: 12px;
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(8px);
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            padding: 0.1875rem 0.625rem;
            border-radius: 0.375rem;
        }

        .related-card-body {
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .related-card-meta {
            font-size: 12px;
            color: #94a3b8;
            font-weight: 600;
            margin-bottom: 0.375rem;
        }

        .related-card-title {
            margin: 0 0 0.625rem 0;
            font-size: 16px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.35;
        }

        .related-card-excerpt {
            margin: 0;
            font-size: 13.5px;
            line-height: 1.5;
            color: #64748b;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    
        /* ── Desktop Sidebar Layout ── */
        .review-sidebar-layout-wrap {
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
            margin-top: 2rem;
            align-items: stretch;
        }

        @media (min-width: 992px) {
            .review-sidebar-layout-wrap {
                flex-direction: row;
                gap: 3rem;
            }
            .review-sidebar-layout-main {
                flex: 1;
                min-width: 0; /* prevent overflow */
            }
            .review-sidebar-layout-side {
                width: 320px;
                flex-shrink: 0;
            }
            .review-sidebar-sticky {
                position: sticky;
                top: 100px; /* height of header + buffer */
                padding-bottom: 2.5rem;
                
                
                scrollbar-width: thin;
                scrollbar-color: #cbd5e1 transparent;
            }
        }
        
        .review-sidebar-sticky::-webkit-scrollbar {
            width: 6px;
        }
        .review-sidebar-sticky::-webkit-scrollbar-thumb {
            background-color: #cbd5e1;
            border-radius: 62.4375rem;
        }

                /* ── Modern Verdict (Ultra-Premium, Compact & Sleek) ── */
        

        
        
        

        

        

        

        

        @media (min-width: 768px) {
            
        }

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        /* ── Modern Author Box ── */
        .article-author-modern {
            margin: 2.5rem auto 4rem auto;
            background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid #e2e8f0;
            border-radius: 1.25rem;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.04);
            position: relative;
            overflow: hidden;
        }
        
        @media (min-width: 640px) {
            .article-author-modern {
                flex-direction: row;
                align-items: flex-start;
            }
        }
        
        .author-modern-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: linear-gradient(135deg, #334155, #0f172a);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            font-weight: 800;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
        }
        
        .author-modern-body {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .author-modern-header {
            display: flex;
            flex-direction: column;
            margin-bottom: 0.75rem;
            gap: 0.25rem;
        }
        
        @media (min-width: 640px) {
            .author-modern-header {
                flex-direction: row;
                align-items: baseline;
                justify-content: space-between;
            }
        }
        
        .author-modern-name {
            font-size: 18px;
            font-weight: 800;
            color: #020617;
            margin: 0;
        }
        
        .author-modern-kicker {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--theme-accent, #059669);
            background: var(--theme-bg, #ecfdf5);
            padding: 0.1875rem 0.625rem;
            border-radius: 62.4375rem;
            display: inline-block;
            width: fit-content;
        }
        
        .author-modern-bio {
            font-size: 14.5px;
            line-height: 1.6;
            color: #475569;
            margin: 0 0 1rem 0;
        }
        
        .author-modern-cred {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            font-size: 12.5px;
            font-weight: 700;
            color: #0f172a;
        }
        
        .author-modern-cred svg {
            color: var(--theme-accent, #059669);
        }
        /* ── Sidebar Related Articles ── */
        .sidebar-related-wrap {
            margin-top: 2.5rem;
            padding-top: 2rem;
            border-top: 1px solid #e2e8f0;
        }
        .sidebar-related-title {
            font-size: 14px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #475569;
            margin: 0 0 1.25rem 0;
        }
        .sidebar-related-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .sidebar-related-card {
            display: flex;
            gap: 1rem;
            align-items: center;
            text-decoration: none;
            background: #f8fafc;
            border: 1px solid rgba(226, 232, 240, 0.6);
            padding: 0.75rem;
            border-radius: 0.75rem;
            transition: all 0.2s ease;
        }
        .sidebar-related-card:hover {
            background: #ffffff;
            border-color: #cbd5e1;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
        }
        .sidebar-related-thumb {
            width: 60px;
            height: 60px;
            border-radius: 0.5rem;
            background-size: cover;
            background-position: center;
            background-color: #e2e8f0;
            flex-shrink: 0;
        }
        .sidebar-related-info {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }
        .sidebar-related-cat {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            color: var(--theme-accent, #059669);
            letter-spacing: 0.05em;
        }
        .sidebar-related-name {
            margin: 0;
            font-size: 13.5px;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.3;
        }
        .sidebar-related-score {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 11px;
            font-weight: 700;
            color: #64748b;
        }
    
        /* ── Premium In-Article Images / Screenshots ── */
        .article-prose-container figure.wp-block-image {
            margin: 3rem 0;
            text-align: center;
        }
        .article-prose-container figure.wp-block-image img {
            border-radius: 0.75rem;
            border: 1px solid #e2e8f0;
            box-shadow: 0 10px 30px -10px rgba(15,23,42,0.12);
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
        .article-prose-container figure.wp-block-image figcaption {
            font-size: 13.5px;
            color: #64748b;
            margin-top: 0.875rem;
            font-style: italic;
            line-height: 1.5;
        }
    

@media (min-width: 1280px) {
    .article-3col-layout-wrap {
        gap: 4rem;
    }
}
    
/* ═══════════════════════════════════════════════════
   T6 SINGLE ARTICLE TOC LEFT STICKY
   ═══════════════════════════════════════════════════ */
.article-toc-left-sticky {
    display: none;
}
@media (min-width: 1400px) {
    .article-toc-left-sticky {
        display: block;
        position: absolute;
        left: -250px;
        top: 0;
        width: 220px;
        height: 100%;
        pointer-events: none;
    }
    .article-toc-left-sticky > div {
        position: sticky;
        top: 15vh;
        pointer-events: auto;
    }
}
    

.article-hero-split-content {
    flex: 1.1;
    min-width: 0;
}
.article-hero-split-media {
    flex: 0.9;
    min-width: 0;
    width: 100%;
}
.article-hero-badge {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 624.9375rem;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}
.article-hero-split-title {
    font-size: 2.25rem;
    line-height: 1.2;
    margin: 0 0 1rem 0;
    color: #0f172a;
    font-weight: 800;
    letter-spacing: -0.02em;
}
@media (min-width: 1024px) {
    .article-hero-split-title {
        font-size: 2.75rem;
    }
}
.article-hero-split-meta {
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}
.article-hero-split-img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
    object-fit: cover;
    aspect-ratio: 16 / 9;
    display: block;
}
    

/* ═══════════════════════════════════════════════════
   SMOOTH SCROLL OFFSET FOR HEADINGS (TOC Anchor Fix)
   ═══════════════════════════════════════════════════ */
.article-prose-container h1,
.article-prose-container h2,
.article-prose-container h3,
.article-prose-container h4,
.article-prose-container h5,
.article-prose-container h6,
h2[id],
h3[id],
h4[id] {
    scroll-margin-top: 6.875rem;
}
    
/* ═══════════════════════════════════════════════════
   T6 SINGLE ARTICLE HEADER (Integrated in Left Column)
   ═══════════════════════════════════════════════════ */
.article-header-col-wrap {
    margin-bottom: 2rem;
}
.article-header-col-badge-row {
    margin-bottom: 0.875rem;
}
.article-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.3125rem 0.75rem;
    background: #f8fafc;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    line-height: 1;
}
.article-hero-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}
.article-header-col-title {
    font-size: 2.25rem;
    line-height: 1.2;
    margin: 0 0 1rem 0;
    color: #0f172a;
    font-weight: 900;
    letter-spacing: -0.025em;
}
@media (min-width: 768px) {
    .article-header-col-title {
        font-size: 2.65rem;
    }
}
.article-header-col-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 1.5rem;
}
.article-meta-dot {
    color: #cbd5e1;
    font-weight: bold;
}
.article-header-col-img-wrap {
    width: 100%;
    margin-bottom: 2rem;
}
.article-header-col-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
    display: block;
}

/* ═══════════════════════════════════════════════════
   T5 SINGLE REVIEW HEADER & EXECUTIVE TAKEAWAY (Option A Unified Layout)
   ═══════════════════════════════════════════════════ */
.review-header-col-wrap {
    margin-bottom: 2rem;
}
.review-header-col-badge-row {
    margin-bottom: 0.875rem;
}
.review-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.3125rem 0.75rem;
    background: #f8fafc;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    line-height: 1;
}
.review-hero-kicker::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--theme-accent, #059669);
}
.review-header-col-title {
    font-size: 2.25rem;
    line-height: 1.2;
    margin: 0 0 1rem 0;
    color: #0f172a;
    font-weight: 900;
    letter-spacing: -0.025em;
}
@media (min-width: 768px) {
    .review-header-col-title {
        font-size: 2.65rem;
    }
}
@media (max-width: 768px) {
    .review-header-col-title {
        font-size: clamp(1.5rem, 5.5vw, 2.25rem) !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
        margin-bottom: 0.75rem !important;
    }
}
.review-header-col-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.review-header-col-meta .meta-item-tested {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
@media (max-width: 768px) {
    .review-header-col-meta {
        row-gap: 0.25rem !important;
        column-gap: 0.5rem !important;
        margin-bottom: 1.125rem !important;
        font-size: 12.5px !important;
    }
}

/* Executive Takeaway Card */
.review-executive-takeaway {
    background: #FFFFFF;
    border-radius: 14px;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 6px 16px -4px rgba(15, 23, 42, 0.04);
    padding: 1.5rem 1.75rem;
    margin-top: 1.5rem;
    box-sizing: border-box;
}
.review-header-col-wrap .article-header-col-img-wrap + .review-executive-takeaway {
    margin-top: 0;
}
.takeaway-verdict-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}
.takeaway-kicker {
    display: block;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.375rem;
}
.takeaway-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin: 0 0 0.625rem 0;
    letter-spacing: -0.015em;
}
.takeaway-tldr {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #334155;
    margin: 0;
    font-weight: 450;
}

/* Pros & Cons Grid */
.takeaway-proscons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.takeaway-col {
    display: flex;
    flex-direction: column;
}
.takeaway-col-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.875rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.takeaway-pros-col .takeaway-col-title {
    color: #065f46;
}
.takeaway-cons-col .takeaway-col-title {
    color: #991b1b;
}
.takeaway-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.takeaway-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #334155;
}
.takeaway-bullet {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 0.125rem;
    line-height: 1;
}
.takeaway-check {
    background: var(--theme-bg, #ecfdf5);
    color: var(--theme-accent, #059669);
}
.takeaway-dash {
    background: #fef2f2;
    color: #ef4444;
}
.takeaway-text {
    flex: 1;
}

/* Audience Row */
.takeaway-audience-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f1f5f9;
}
.takeaway-audience-item {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #334155;
}
.takeaway-audience-item .audience-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}
.takeaway-audience-item .badge-ideal {
    background: var(--theme-bg, #ecfdf5);
    color: var(--theme-text, #065f46);
    border: 1px solid var(--theme-border, #a7f3d0);
}
.takeaway-audience-item .badge-avoid {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.takeaway-audience-item .audience-text {
    flex: 1;
}

@media (max-width: 640px) {
    .takeaway-proscons-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    .takeaway-audience-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.375rem !important;
    }
    .review-executive-takeaway {
        padding: 1.25rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIVE SEARCH MODAL & GLOBAL INTERACTION STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.zenscrib-search-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(60px, 12vh, 120px);
    padding-inline: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.zenscrib-search-modal-backdrop.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.zenscrib-search-modal {
    width: 100%;
    max-width: 620px;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transform: scale(0.96) translateY(-8px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.zenscrib-search-modal-backdrop.active .zenscrib-search-modal {
    transform: scale(1) translateY(0);
}

.zenscrib-search-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
    margin: 0;
}

.zenscrib-search-form svg {
    color: #64748b;
    flex-shrink: 0;
}

.zenscrib-search-input {
    flex: 1 1 0;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 500;
    color: #0f172a;
    background: transparent;
    padding: 0;
    font-family: inherit;
    box-shadow: none;
}

.zenscrib-search-input::placeholder {
    color: #94a3b8;
}

.zenscrib-search-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    font-size: 10.5px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s ease;
}

.zenscrib-search-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.zenscrib-search-body {
    padding: 1rem 1.25rem;
    max-height: 380px;
    overflow-y: auto;
    background: #ffffff;
}

.zenscrib-search-hints {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 12.5px;
    color: #64748b;
}

.zenscrib-search-hints span {
    font-weight: 600;
}

.zenscrib-search-hint-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 62.4375rem;
    color: #0f172a;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.zenscrib-search-hint-tag:hover {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.zenscrib-search-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.zenscrib-search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: #0f172a;
    background: transparent;
    transition: background 0.15s ease;
    gap: 0.75rem;
}

.zenscrib-search-result-item:hover {
    background: #f8fafc;
}

.zenscrib-search-result-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zenscrib-search-result-badge {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.25rem;
    background: #f1f5f9;
    color: #64748b;
    flex-shrink: 0;
}

.zenscrib-search-loading,
.zenscrib-search-empty {
    padding: 1.25rem 0.75rem;
    text-align: center;
    color: #64748b;
    font-size: 13.5px;
}


/* ==========================================================================
   ZENSCRIB POLISHED OVERRIDES & RESPONSIVE ARCHITECTURE
   ========================================================================== */

/* 1. ZERO-LIFT & CLEAN CARD HOVER SPECIFICATION */
.c-card-hero, .highlight-hero-card,
.c-card-review-item, .c-card-guide, .guide-card,
.c-card-news, .news-card,
.c-card-side, .side-article-card,
.c-card-step, .c-pick-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.c-card-hero:hover, .highlight-hero-card:hover,
.c-card-review-item:hover,
.c-card-guide:hover, .guide-card:hover,
.c-card-news:hover, .news-card:hover,
.c-card-side:hover, .side-article-card:hover,
.c-card-step:hover, .c-pick-card:hover,
.protocol-card:hover, .c-card-protocol:hover,
.protocol-feature-card:hover {
    border-color: #e2e8f0 !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    transform: none !important;
    text-decoration: none !important;
}

/* Hover Image Zoom Only */
.c-card-hero:hover .c-card-hero__img, .highlight-hero-card:hover .hero-img,
.c-card-review-item:hover .review-thumb-img,
.c-card-guide:hover .guide-img, .guide-card:hover .guide-img,
.c-card-news:hover .c-card-news__thumb, .news-card:hover .news-img,
.c-card-side:hover .c-card-side__thumb, .side-article-card:hover .side-img,
.c-card-deeper-sub:hover .deeper-sub-thumb, .deeper-sub-card:hover .deeper-sub-thumb {
    transform: scale(1.04) !important;
}

/* Zero Underline on Title Hovers */
.c-card-hero:hover .c-card-hero__title, .highlight-hero-card:hover .hero-title,
.c-card-review-item:hover .review-card-title,
.c-card-guide:hover .guide-card-title, .guide-card:hover .guide-card-title,
.c-card-news:hover .c-card-news__title, .news-card:hover .news-title,
.c-card-side:hover .c-card-side__title, .side-article-card:hover .side-title,
.bde-loop-item:hover h3, .bde-loop-item:hover h4,
.hero-card-title:hover, .review-card-title:hover, .guide-card-title:hover, .news-card-title:hover, .side-card-title:hover,
.c-card-usecase-item:hover .usecase-title, .usecase-item:hover .usecase-title,
.deeper-feat-card:hover .deeper-feat-title, .deeper-sub-card:hover .deeper-sub-title {
    color: #000000 !important;
    text-decoration: none !important;
}

/* 2. RESPONSIVE HEADER & HAMBURGER NAVIGATION
   Consolidated into Master Header System at lines 45-93 & 358-716.
   Legacy duplicate block purged to prevent cascade conflicts. */

/* 3. HERO RESPONSIVE — Consolidated in Section Hero System (lines 8630+) */

/* ==========================================================================
   GLOBAL FOOTER — CLEAN, CRISP SAAS FOOTER (Desktop 4-Col Grid + Responsive)
   ========================================================================== */
.c-footer,
footer.c-footer,
.site-footer {
    width: 100% !important;
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 3.5rem 1.25rem 2rem !important;
    box-sizing: border-box !important;
}

.c-footer > .oxy-container,
.c-footer > div {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.footer-grid {
    display: grid !important;
    grid-template-columns: 1.8fr 1fr 1fr 1.2fr !important;
    gap: 2.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.footer-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.footer-logo-img {
    display: block !important;
    width: auto !important;
    height: 28px !important;
    max-height: 28px !important;
    object-fit: contain !important;
}

.footer-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
    margin: 0 !important;
}

.footer-socials {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 4px !important;
}

.social-icon-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}
.social-icon-link:hover {
    background-color: #0f172a !important;
    border-color: #0f172a !important;
    color: #ffffff !important;
    transform: none !important;
}

/* Footer Language Buttons (Flags next to Socials) */
.footer-lang-buttons {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.footer-lang-btn {
    cursor: pointer !important;
    position: relative !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.15s ease !important;
}
.footer-lang-btn .flag-icon {
    width: 18px !important;
    height: 12px !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
    display: block !important;
    transition: transform 0.15s ease !important;
}
.footer-lang-btn:not(.is-active):hover {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}
.footer-lang-btn:not(.is-active):hover .flag-icon {
    transform: scale(1.08) !important;
}

/* Active State: Same grey background as other buttons, with subtle refined green border */
.footer-lang-btn.is-active {
    background-color: #f1f5f9 !important;
    border: 1.5px solid #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15) !important;
    cursor: default !important;
}
.footer-lang-btn.is-active .flag-icon {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

.footer-col-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #0f172a !important;
    margin: 0 0 4px 0 !important;
}

.footer-links-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.footer-link-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.footer-link {
    font-size: 13.5px !important;
    color: #64748b !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
.footer-link:hover {
    color: #0f172a !important;
}
.footer-link.is-active {
    color: #64748b !important;
    font-weight: 500 !important;
}

.footer-contact-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #64748b !important;
    margin: 0 !important;
}

.footer-contact-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    align-self: flex-start !important;
    margin-top: 4px !important;
}
.footer-contact-btn:hover {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    text-decoration: none !important;
}

/* Footer Bottom Container (Editorial Independence & Copyright) */
.c-footer > .oxy-container > .oxy-container:last-child,
.c-footer > div > div:last-child,
.footer-bottom {
    margin-top: 2.5rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.c-footer > .oxy-container > .oxy-container:last-child p,
.c-footer > div > div:last-child p,
.footer-bottom p {
    margin: 0 !important;
    padding: 0 !important;
}

/* 1. Editorial Independence Disclaimer */
.c-footer > .oxy-container > .oxy-container:last-child p:first-child,
.c-footer > div > div:last-child p:first-child,
.footer-disclaimer,
p.footer-disclaimer {
    font-size: 12px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
    max-width: 100% !important;
}
.c-footer > .oxy-container > .oxy-container:last-child p:first-child strong,
.c-footer > div > div:last-child p:first-child strong,
.footer-disclaimer strong {
    font-weight: 700 !important;
    color: #334155 !important;
}

/* 2. Copyright Line */
.c-footer > .oxy-container > .oxy-container:last-child p:last-child,
.c-footer > div > div:last-child p:last-child,
.footer-copyright,
p.footer-copyright {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.01em !important;
}

/* ==========================================================================
   TODAY'S HIGHLIGHT — BALANCED 16:10 HERO IMAGE WITH INSET PADDING
   ========================================================================== */
.c-card-hero,
.highlight-hero-card,
a.c-card-hero,
a.highlight-hero-card,
.highlight-hero-col .bde-loop-item .c-card-hero,
.highlight-hero-col .bde-loop-item a {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 0.875rem !important;
    padding: 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.c-card-hero__img-wrap,
.hero-img-wrap,
.highlight-hero-card .c-card-hero__img-wrap,
.highlight-hero-card .hero-img-wrap {
    aspect-ratio: 16/10 !important;
    max-height: 280px !important;
    min-height: 230px !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 0.625rem !important;
    background-color: #f1f5f9 !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
}

.c-card-hero__img,
.hero-img,
.highlight-hero-card .c-card-hero__img,
.highlight-hero-card .hero-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0.625rem !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.c-card-hero__content,
.hero-content-wrap,
.highlight-hero-card .c-card-hero__content {
    padding: 0 0.25rem 0.25rem 0.25rem !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    gap: 0.375rem !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.c-card-hero__title,
.hero-title,
.highlight-hero-card .hero-title {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin: 2px 0 0 0 !important;
}

.c-card-hero__excerpt,
.hero-excerpt,
.highlight-hero-card .hero-excerpt {
    font-size: 13.5px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
}

/* ==========================================================================
   GLOBAL BORDERLESS & 100% FLUSH IMAGES ARCHITECTURE
   ========================================================================== */

/* 1. Global Zero-Border & Zero-Gap Card Containers */
.c-card-hero,
.highlight-hero-card,
a.c-card-hero,
a.highlight-hero-card,
.c-card-side,
.side-article-card,
a.c-card-side,
a.side-article-card,
.highlight-hero-col .bde-loop-item .c-card-hero,
.highlight-hero-col .bde-loop-item .highlight-hero-card,
.highlight-side-col .bde-loop-item .c-card-side,
.highlight-side-col .bde-loop-item .side-article-card,
.c-card-review-item,
.review-card,
.review-card-body,
.review-grid-card,
.c-card-review-grid,
a.c-card-review-item,
a.review-card,
.reviews-grid .bde-loop-item a,
.reviews-grid .bde-loop-item .c-card-review-item,
.c-card-guide,
.guide-card,
.guide-card-body,
a.c-card-guide,
a.guide-card,
.c-row-guide,
.guide-row-item,
.c-row-guide__body,
a.c-row-guide,
a.guide-row-item,
.guides-feat-grid .bde-loop-item a,
.guides-rows-wrap .bde-loop-item a,
.c-card-news,
.news-card,
.news-card-body,
.news-grid-item,
a.c-card-news,
a.news-card,
.news-grid .bde-loop-item a,
.news-grid .bde-loop-item .c-card-news,
.matrix-table-wrap,
.matrix-table-card,
.tbl-card,
.best-cta-card,
.cta-banner-wrap,
.cta-card-inner,
.subhub-faq-card,
.hub-card,
.explore-sub-card,
.sec-explore-pad .hub-card,
.sec-explore-pad .explore-sub-card,
details.faq-accordion-item,
.faq-accordion-item,
.sec-faq-pad details.faq-accordion-item,
.review-specs-card,
.review-score-box,
.review-hero-card,
.pros-card,
.cons-card,
.verdict-box,
.verdict-card,
.author-modern-card,
.author-box-wrap,
.author-modern-box,
.related-card,
.c-card-related,
a.related-card,
.review-toc-card,
.article-reading-card {
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* 2. 100% Flush Images & Thumbnail Wrappers (Eliminates 1px Inset/Padding) */
.c-card-review-item__thumb-wrap,
.review-thumb-wrap,
.review-card-thumb-wrap,
.c-card-guide__thumb-wrap,
.guide-card-thumb-wrap,
.c-card-news__thumb-wrap,
.news-card-thumb-wrap {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
    overflow: hidden !important;
    display: block !important;
    box-sizing: border-box !important;
}

.guide-row-thumb-wrap,
.news-row-thumb-wrap {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    display: block !important;
    align-self: center !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.c-card-hero__img,
.hero-img,
.c-card-side__thumb,
.side-img,
.review-thumb-img,
.review-card img,
.guide-card-img,
.guide-img,
.c-card-news__thumb,
.news-img,
.guide-row-img,
.news-row-img,
.deeper-sub-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* News Hub spacing is handled cleanly by unified section tokens */


/* ==========================================================================
   BENTO BOX FLAGSHIP CARD — PERFECT MIDWAY WARM SAND (#f7f1e7, Static BG)
   ========================================================================== */
.hub-card,
a.hub-card,
.sec-explore-pad .hub-card,
.hub-card:hover,
a.hub-card:hover,
.sec-explore-pad .hub-card:hover {
    background-color: #f7f1e7 !important;
    background: #f7f1e7 !important;
    border: 1px solid transparent !important;
    border-color: transparent !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}


/* Universal FAQ spacing is handled cleanly by unified section tokens */

.faq-header-center {
    text-align: center !important;
    margin-bottom: clamp(28px, 4vw, 40px) !important;
    max-width: 800px !important;
    margin-inline: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.375rem !important;
}

.faq-kicker {
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

.faq-h2 {
    font-size: clamp(24px, 3.5vw, 34px) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.025em !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.faq-sub {
    font-size: 14.5px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    margin: 0.25rem 0 0 0 !important;
    max-width: 620px !important;
}

.faq-list-wrap,
.faq-accordions-group {
    max-width: 860px !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

details.faq-accordion-item,
.faq-accordion-item,
.sec-faq-pad details.faq-accordion-item,
.subhub-faq-card {
    background-color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 0.875rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    transition: box-shadow 0.25s ease !important;
}

details.faq-accordion-item[open],
.sec-faq-pad details.faq-accordion-item[open] {
    border: 1px solid transparent !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
}

summary.faq-summary {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 1.125rem 1.5rem !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    list-style: none !important;
    gap: 1rem !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
    user-select: none !important;
}

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

.faq-q-text,
summary.faq-summary .faq-q-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.faq-icon-cross,
summary.faq-summary .faq-icon-cross,
summary.faq-summary svg.faq-icon-cross,
summary.faq-summary span.faq-icon-cross svg,
details.faq-accordion-item summary svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    color: #059669 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;
    margin-top: 2px !important;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease !important;
}

details.faq-accordion-item[open] .faq-icon-cross,
details[open] .faq-icon-cross,
details.faq-accordion-item[open] summary svg,
details[open] summary svg {
    transform: rotate(45deg) !important;
    color: #0f172a !important;
}

summary.faq-summary:hover .faq-icon-cross,
summary.faq-summary:hover svg {
    color: #047857 !important;
}

.faq-content-anim {
    overflow: hidden !important;
}

.faq-answer-body {
    padding: 0.5rem 1.5rem 1.375rem 1.5rem !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    border-top: 1px solid #f8fafc !important;
}

.faq-answer-body strong {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.faq-answer-body p {
    margin: 0 0 0.625rem 0 !important;
}

.faq-answer-body p:last-child {
    margin-bottom: 0 !important;
}


/* Hero section spacing is handled cleanly by unified section tokens */

.hub-hero-center,
.reviews-hero-inner,
.guides-hero-inner,
.news-hero-inner,
.best-hero-grid {
    margin-top: 0 !important;
}


/* ==========================================================================
   CALL TO ACTION & ARCHIVE LISTS — BORDERLESS ARCHITECTURE
   ========================================================================== */

/* 1. All CTA Cards & Callout Banners */
.guides-cta-card,
.news-cta-card,
.reviews-cta-card,
.best-cta-card,
.cta-banner-wrap,
.cta-card-inner,
.c-crosslink-card,
.sec-crosslink-cta .c-crosslink-card,
.review-verdict-card,
.review-mid-article-cta-compact,
.guides-stat-box,
.reviews-stat-box {
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* 2. More Guides & Tutorials / More News & Updates (Backlog Lists) */
.guides-archive-wrap,
.news-archive-wrap {
    border-top: none !important;
    border: none !important;
}

.guides-rows-box,
.news-rows-box {
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}


/* ==========================================================================
   SIDEBAR RELATED CARDS (Single Posts vs Single Reviews)
   ========================================================================== */
.sidebar-related-wrap {
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
    border-top: none !important;
}

.sidebar-related-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #64748b !important;
    margin: 0 0 1rem 0 !important;
}

.sidebar-related-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem !important;
}

.sidebar-related-card {
    display: flex !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    border-radius: 0.75rem !important;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
    box-sizing: border-box !important;
}

.sidebar-related-card.no-thumb {
    flex-direction: column !important;
    padding: 0.875rem 1.125rem !important;
    gap: 0.25rem !important;
}

.sidebar-related-card.has-thumb {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.875rem !important;
    padding: 0.625rem 0.875rem !important;
}

.sidebar-related-card:hover {
    background-color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
    text-decoration: none !important;
}

.sidebar-related-thumb {
    width: 54px !important;
    height: 54px !important;
    border-radius: 0.5rem !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #f1f5f9 !important;
    flex-shrink: 0 !important;
}

.sidebar-related-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.1875rem !important;
    width: 100% !important;
}

.sidebar-related-cat {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #059669 !important;
    letter-spacing: 0.06em !important;
}

.sidebar-related-name {
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
}

.sidebar-related-card:hover .sidebar-related-name {
    color: #000000 !important;
}

.sidebar-related-meta {
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
}

/* ==========================================================================
   SIDEBAR REVIEW CALL TO ACTION CARD (Single Reviews T5)
   ========================================================================== */
.sidebar-review-cta-card {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 6px 16px -4px rgba(15, 23, 42, 0.04) !important;
    padding: 1.25rem !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    box-sizing: border-box !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.sidebar-cta-tool-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.875rem !important;
    min-width: 0 !important;
}

.sidebar-cta-logo-wrap {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.sidebar-cta-logo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 4px !important;
    display: block !important;
    box-sizing: border-box !important;
}

.sidebar-cta-monogram {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.125rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    background: #f1f5f9 !important;
}

.sidebar-cta-tool-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.sidebar-cta-tool-name {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #020617 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sidebar-cta-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

.sidebar-cta-score {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 0.15rem 0.5rem !important;
    border-radius: 9999px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

.sidebar-cta-score svg {
    flex-shrink: 0 !important;
}

.sidebar-cta-score strong {
    font-weight: 800 !important;
}

.sidebar-cta-score small {
    font-size: 10px !important;
    opacity: 0.8 !important;
}

.sidebar-cta-price {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    white-space: nowrap !important;
}

.sidebar-cta-btn-wrap {
    width: 100% !important;
}

.btn-sidebar-review-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    background: #020617 !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.btn-sidebar-review-cta:hover {
    background: #1e293b !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(2, 6, 23, 0.16) !important;
    text-decoration: none !important;
}

.btn-sidebar-review-cta:active {
    transform: translateY(0) !important;
}


/* ==========================================================================
   BEST SUB-HUBS MATRIX TABLES — BORDERLESS ARCHITECTURE (.c-table-card)
   ========================================================================== */
.c-table-card,
.matrix-table-wrap,
.matrix-table-card,
.best-matrix-table-wrap,
.sec-best-matrix .matrix-table-wrap,
.sec-compare-matrix .c-table-card {
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    background-color: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 16px -4px rgba(15, 23, 42, 0.03) !important;
    overflow: hidden !important;
}

.c-best-matrix-table,
.matrix-table {
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.c-best-matrix-table thead tr th,
.matrix-table th {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background-color: #f8fafc !important;
}

.c-best-matrix-table tbody td,
.matrix-table td {
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.c-best-matrix-table tbody tr:last-child td,
.matrix-table tr:last-child td {
    border-bottom: none !important;
}

.tbl-logo-wrap {
    border: none !important;
    border-width: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.tbl-freetrial-badge {
    border: none !important;
    border-width: 0 !important;
}

.btn-tbl-visit {
    border: 1px solid #0f172a !important;
}


/* ==========================================================================
   REVIEWS HUB METHODOLOGY CARD — BORDERLESS (.methodology-card)
   ========================================================================== */
.methodology-card,
.sec-methodology-pad .methodology-card {
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    background-color: #ffffff !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.methodology-kicker {
    border: none !important;
    border-width: 0 !important;
}


/* ==========================================================================
   HOMEPAGE SIDE CARDS — RECTANGULAR 16:10 / 40% FORMAT (4 Rounded Corners)
   ========================================================================== */
.c-card-side,
.side-article-card,
a.c-card-side,
a.side-article-card,
.highlight-side-col .bde-loop-item .c-card-side,
.highlight-side-col .bde-loop-item .side-article-card,
.highlight-side-col .bde-loop-item a {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 96px !important;
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 0.875rem !important;
    padding: 0.75rem !important;
    gap: 0.75rem !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    text-decoration: none !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.c-card-side__thumb-wrap,
.side-img-wrap,
.highlight-side-col .c-card-side__thumb-wrap,
.highlight-side-col .side-img-wrap {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 170px !important;
    height: 100% !important;
    min-height: 90px !important;
    aspect-ratio: 16 / 9 !important;
    align-self: stretch !important;
    border-radius: 0.625rem !important;
    overflow: hidden !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background-color: #f1f5f9 !important;
}

.c-card-side__thumb,
.side-img,
.highlight-side-col .c-card-side__thumb,
.highlight-side-col .side-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0.625rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.c-card-side__content,
.side-content,
.highlight-side-col .c-card-side__content {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0.125rem 0.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0.1875rem !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}



/* Homepage sections container max-width harmonization (1120px)
   Standardizes Hero section with News and other homepage sections across desktop */
html body .sec-highlight-pad .sec-inner-1120,
html body .sec-highlight-pad .l-container-1120,
html body .sec-highlight-pad .l-container-1200,
html body .sec-news-pad .sec-inner-1120,
html body .sec-news-pad .l-container-1120,
html body .sec-news-pad .l-container-1200,
html body .sec-selection-pad .sec-inner-1120,
html body .sec-selection-pad .l-container-1120,
html body .sec-deeper-pad .sec-inner-1120,
html body .sec-deeper-pad .l-container-1120,
html body .sec-faq-pad .sec-inner-1120,
html body .sec-faq-pad .l-container-1120 {
    width: 100% !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* Header Row (Title Left, View All Link Right) */
html body .sec-news-pad .sec-news-header-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin-bottom: 1.25rem !important;
    gap: 1rem !important;
    width: 100% !important;
}

html body .sec-news-pad .sec-news-header-row .news-h2 {
    font-size: clamp(22px, 2.5vw, 28px) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

html body .sec-news-pad .sec-news-all-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    border-radius: 0.5rem !important;
    padding: 0.4375rem 0.9375rem !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}

html body .sec-news-pad .sec-news-all-link:hover {
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04) !important;
    color: #000000 !important;
    text-decoration: none !important;
    transform: none !important;
}

html body .sec-news-pad .sec-news-all-link .news-all-arrow {
    transition: transform 0.2s ease !important;
    display: inline-block !important;
}

html body .sec-news-pad .sec-news-all-link:hover .news-all-arrow {
    transform: translateX(3px) !important;
}

/* Responsive Latest News Header Row (< 640px & < 420px) */
@media (max-width: 640px) {
    html body .sec-news-pad .sec-news-header-row {
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
    }
    html body .sec-news-pad .sec-inner-1120 {
        padding-left: clamp(1rem, 4vw, 1.5rem) !important;
        padding-right: clamp(1rem, 4vw, 1.5rem) !important;
        box-sizing: border-box !important;
    }
}
@media (max-width: 420px) {
    html body .sec-news-pad .sec-news-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.625rem !important;
    }
    html body .sec-news-pad .sec-news-all-link {
        align-self: flex-start !important;
    }
}

/* Outer Post Loop Component is a normal 100% block */
html body .sec-news-pad .bde-post-loop,
html body .sec-news-pad [class*="bde-post-loop"],
html body .sec-news-pad ul.bde-post-loop,
html body .sec-news-pad ol.bde-post-loop {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 4-Columns Grid Layout on the INNER LOOP ONLY (STRICT 4 CARDS PER ROW ON DESKTOP) */
html body .sec-news-pad .bde-post-loop > .bde-loop,
html body .sec-news-pad .bde-loop.bde-loop-grid,
html body .sec-news-pad .bde-post-loop .bde-loop,
html body .sec-news-pad [class*="bde-post-loop"] > .bde-loop,
html body .sec-news-pad [class*="bde-post-loop"] .bde-loop,
html body .sec-news-pad .ee-posts-grid {
    --bde-posts-per-row: 4 !important;
    --bde-posts-gap: 1.25rem !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

html body .sec-news-pad .bde-loop-item,
html body .sec-news-pad .ee-post {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 1024px) {
    html body .sec-news-pad .bde-post-loop > .bde-loop,
    html body .sec-news-pad .bde-loop,
    html body .sec-news-pad .bde-loop.bde-loop-grid,
    html body .sec-news-pad [class*="bde-post-loop"] > .bde-loop,
    html body .sec-news-pad [class*="bde-post-loop"] .bde-loop,
    html body .sec-news-pad .ee-posts-grid {
        --bde-posts-per-row: 2 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }
}

@media (max-width: 540px) {
    html body .sec-news-pad .bde-post-loop > .bde-loop,
    html body .sec-news-pad .bde-loop,
    html body .sec-news-pad .bde-loop.bde-loop-grid,
    html body .sec-news-pad [class*="bde-post-loop"] > .bde-loop,
    html body .sec-news-pad [class*="bde-post-loop"] .bde-loop,
    html body .sec-news-pad .ee-posts-grid {
        --bde-posts-per-row: 1 !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
}

/* Card Container (Clean ZenScrib Inset Architecture) */
html body .sec-news-pad .bde-loop-item a,
html body a.c-card-news.news-feed-card,
html body .c-card-news.news-feed-card,
html body .news-feed-card {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 0.875rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    padding: 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    height: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    transform: none !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

html body .sec-news-pad .bde-loop-item a:hover,
html body a.c-card-news.news-feed-card:hover,
html body .c-card-news.news-feed-card:hover,
html body .news-feed-card:hover {
    border-color: #e2e8f0 !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    transform: none !important;
    text-decoration: none !important;
}

/* 1. Thumbnail Wrap & Image (FULL 4-CORNER BORDER RADIUS, 16:9 RATIO) */
html body .sec-news-pad .news-card-thumb-wrap {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    position: relative !important;
    background-color: #f1f5f9 !important;
    border-radius: 0.625rem !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
    border: none !important;
}

html body .sec-news-pad .news-card-thumb-img,
html body .sec-news-pad .news-card-thumb-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0.625rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Hover Image Zoom ONLY (Zero-Lift Rule) */
html body .sec-news-pad a:hover .news-card-thumb-img,
html body .sec-news-pad a:hover .news-card-thumb-wrap img {
    transform: scale(1.04) !important;
}

/* 2. Body Wrap */
html body .sec-news-pad .news-card-body-wrap {
    padding: 0 0.25rem 0.25rem 0.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Meta Row (Cat Badge + Date) */
html body .sec-news-pad .news-card-meta-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    width: 100% !important;
}

html body .sec-news-pad .news-card-cat-badge {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #0f172a !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

html body .sec-news-pad .news-card-date {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Title (NO green highlight, crisp #000000 on hover) */
html body .sec-news-pad .news-card-title,
html body .c-card-news .news-card-title,
html body .news-feed-card .news-card-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
    color: #0f172a !important;
    margin: 0 0 0.625rem 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.15s ease !important;
}

html body .sec-news-pad a:hover .news-card-title,
html body .c-card-news:hover .news-card-title,
html body .news-feed-card:hover .news-card-title {
    color: #000000 !important;
    text-decoration: none !important;
}

/* Footer (Subtle CTA + Arrow) */
html body .sec-news-pad .news-card-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: auto !important;
    padding-top: 0.5rem !important;
    width: 100% !important;
}

html body .sec-news-pad .news-card-cta-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    transition: color 0.15s ease !important;
    margin: 0 !important;
}

html body .sec-news-pad a:hover .news-card-cta-label {
    color: #475569 !important;
}

html body .sec-news-pad .news-arrow-icon {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease, color 0.15s ease !important;
    display: inline-block !important;
}

html body .sec-news-pad a:hover .news-arrow-icon {
    color: #0f172a !important;
    transform: translateX(3px) !important;
}

/* Tablet Responsive System (768px - 1023px) — 4-Card Row Balance */
@media (min-width: 768px) and (max-width: 1023px) {
    html body .sec-news-pad .bde-loop-item a,
    html body a.c-card-news.news-feed-card,
    html body .c-card-news.news-feed-card,
    html body .news-feed-card {
        padding: 0.625rem !important;
    }
    html body .sec-news-pad .news-card-title,
    html body .c-card-news .news-card-title,
    html body .news-feed-card .news-card-title {
        font-size: 12.5px !important;
        line-height: 1.35 !important;
        margin-bottom: 0.375rem !important;
    }
    html body .sec-news-pad .news-card-date {
        font-size: 10px !important;
    }
    html body .sec-news-pad .news-card-cat-badge {
        font-size: 9px !important;
    }
}


/* ==========================================================================
   GLOBAL REM-BASED SECTION & COMPONENT SPACING RHYTHM (Universal Harmonization)
   - Powered by Modern Fluid Tokens in :root (--sec-pad-*)
   - Consistent responsive vertical cadence across all templates (T1 - T7)
   - Clean specificity and maintainable architecture
   ========================================================================== */

/* 1. Hero Sections (Homepage & Hubs) */
.sec-highlight-pad,
.sec-reviews-hero,
.sec-guides-hero,
.sec-news-hero,
.sec-best-hero,
.sec-hub-hero-pad {
    padding-top: var(--sec-pad-hero-top);
    padding-bottom: var(--sec-pad-hero-bottom);
    width: 100%;
    background: transparent;
}

/* 2. Grid & Feed Sections (Catalogues, News Feed, Guides Grid, Reviews Grid) */
.sec-news-pad,
.sec-reviews-grid,
.sec-guides-grid,
.sec-news-grid,
.sec-best-grid {
    padding-top: var(--sec-pad-grid-top);
    padding-bottom: var(--sec-pad-grid-bottom);
    width: 100%;
    background: transparent;
}

/* Header Row in Grids ("Latest Posts", "Latest News", Section Titles) */
.guides-section-header,
.news-section-header,
.sec-news-header-row,
.sec-news-grid .news-section-header,
.sec-guides-grid .guides-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0.75rem;
    gap: 1rem;
    width: 100%;
}

/* 3. Mid-Page Features / Protocol / Methodology / Bento / CTA Sections */
.sec-selection-pad,
.sec-methodology-pad,
.sec-reviews-methodology,
.sec-guides-cta,
.sec-news-cta,
.sec-explore-pad,
.sec-deeper-pad,
.sec-protocol-pad,
.sec-matrix-pad,
.sec-stages-pad,
.sec-expert-pad,
.sec-crosslink-cta {
    padding-top: var(--sec-pad-mid-top);
    padding-bottom: var(--sec-pad-mid-bottom);
    width: 100%;
    background: transparent;
}

/* 4. FAQ Sections (All Hubs, Homepage, Guides, Reviews) */
.sec-faq-pad,
.sec-guides-faq,
.sec-reviews-faq,
.sec-news-faq,
.sec-subhub-faq {
    padding-top: var(--sec-pad-faq-top);
    padding-bottom: var(--sec-pad-faq-bottom);
    width: 100%;
    background: transparent;
}

/* 5. Static Pages Hero (About, Contact, Legal) */
.sec-static-hero {
    padding-top: var(--sec-pad-static-hero-top);
    padding-bottom: var(--sec-pad-static-hero-bottom);
    width: 100%;
    background: transparent;
}

/* 5. Universal Inset Cards in REM Units */
html body .c-card-review-item,
html body a.c-card-review-item,
html body .review-card,
html body .review-grid-card,
html body .c-card-review-grid,
html body .c-card-guide,
html body a.c-card-guide,
html body .guide-card,
html body .c-card-news,
html body a.c-card-news,
html body .news-card,
html body .news-feed-card,
html body .news-grid-item,
html body .c-card-hero,
html body a.c-card-hero,
html body .highlight-hero-card,
html body .c-card-side,
html body a.c-card-side,
html body .side-article-card {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-radius: 0.875rem !important;
    padding: 0.75rem !important;
}

html body .review-thumb-wrap,
html body .c-card-review-item__thumb-wrap,
html body .guide-card-thumb-wrap,
html body .c-card-guide__thumb-wrap,
html body .news-card-thumb-wrap,
html body .c-card-news__thumb-wrap {
    border-radius: 0.625rem !important;
    margin-bottom: 0.75rem !important;
}

html body .review-thumb-img,
html body .guide-card-img,
html body .news-card-thumb-img,
html body .review-thumb-wrap img,
html body .guide-card-thumb-wrap img,
html body .news-card-thumb-wrap img {
    border-radius: 0.625rem !important;
}
/* ── Universal Compact Card Text Area (Harmonized Reviews, Guides, News) ── */
.c-card-review-item .review-card-body,
.review-card .review-card-body,
.review-grid-card .review-card-body,
.c-card-guide .guide-card-body,
.guide-card .guide-card-body,
.c-card-news .news-card-body,
.news-card .news-card-body,
.news-card-body-wrap {
    padding: 0.125rem 0.25rem 0.25rem 0.25rem !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   HUB PILIER T2 — TESTING PROTOCOL CARDS (.protocol-feature-card)
   ========================================================================== */
.protocol-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    align-items: stretch !important;
}

@media (max-width: 1023px) {
    .protocol-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

@media (max-width: 575px) {
    .protocol-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

.protocol-feature-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 24px 20px 22px 20px !important;
    background-color: #ffffff !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    height: 100% !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important;
}

.protocol-feature-card:hover {
    transform: none !important;
    border: none !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
}

.protocol-card-num {
    display: inline-block !important;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 14px !important;
    line-height: 1 !important;
}

.protocol-card-h3 {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}

.protocol-card-text {
    font-size: 13px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    font-weight: 450 !important;
}

.hub-hero-btn-light:hover,
.hub-hero-btn-dark:hover {
    transform: none !important;
}

/* ==========================================================================
   HUB PILIER T2 — TOP-TIER SAAS BENCHMARK MATRIX
   ========================================================================== */
.sec-matrix-pad {
    padding-top: var(--sec-pad-mid-top, 4rem) !important;
    padding-bottom: var(--sec-pad-mid-bottom, 4.5rem) !important;
}

.matrix-header-center {
    text-align: center !important;
    max-width: 760px !important;
    margin: 0 auto 2.5rem !important;
}
.matrix-kicker {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #64748b !important;
    margin-bottom: 0.5rem !important;
}
.matrix-h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.025em !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

/* Outer Container Card — Sober, Structured B2B SaaS Architecture */
.matrix-table-container,
.matrix-table-card,
.matrix-table-wrap,
.sec-matrix-pad .matrix-table-container,
.sec-matrix-pad .matrix-table-card {
    position: relative !important;
    border: 1px solid #e2e8f0 !important;
    outline: none !important;
    background-color: #f8fafc !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 16px -4px rgba(15, 23, 42, 0.03) !important;
    overflow: hidden !important;
}

/* Corner cell radius synchronization (prevents white gap / background bleed) */
.c-matrix-table thead tr:first-child th:first-child,
.c-matrix-table th.matrix-th-label-col {
    border-top-left-radius: 11px !important;
}
.c-matrix-table thead tr:first-child th:last-child {
    border-top-right-radius: 11px !important;
}
.c-matrix-table tbody tr:last-child td:first-child,
.c-matrix-table tbody tr:last-child td.matrix-td-label {
    border-bottom-left-radius: 11px !important;
}
.c-matrix-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 11px !important;
}

/* Mobile & Tablet Visual Scroll Indicator Prompt */
@media (max-width: 900px) {
    .matrix-table-container::before {
        content: "⟵ Scroll horizontally to compare all categories ⟶" !important;
        display: block !important;
        text-align: center !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        padding: 8px 12px !important;
        background: #f8fafc !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    html[lang="fr"] .matrix-table-container::before,
    html:lang(fr) .matrix-table-container::before {
        content: "⟵ Faites défiler horizontalement pour comparer ⟶" !important;
    }
}

.matrix-table-scroll {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: none !important;
    background-color: transparent !important;
    border-radius: 11px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 #f8fafc !important;
}
.matrix-table-scroll::-webkit-scrollbar {
    height: 6px !important;
}
.matrix-table-scroll::-webkit-scrollbar-track {
    background: #f8fafc !important;
}
.matrix-table-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 999px !important;
}
.matrix-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

.c-matrix-table {
    display: table !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
    min-width: 860px !important;
    border: none !important;
    border-width: 0 !important;
    background: #ffffff !important;
    margin: 0 !important;
}
.c-matrix-table colgroup {
    display: table-column-group !important;
}
.c-matrix-table col {
    display: table-column !important;
}
.c-matrix-table thead {
    display: table-header-group !important;
}
.c-matrix-table tbody {
    display: table-row-group !important;
}
.c-matrix-table tr {
    display: table-row !important;
}

/* Header Cells */
.c-matrix-table thead tr th,
.c-matrix-table th {
    display: table-cell !important;
    background: #f8fafc !important;
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid #f1f5f9 !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 11px 14px !important;
    vertical-align: middle !important;
    text-align: left !important;
    box-sizing: border-box !important;
}
.c-matrix-table thead tr th:last-child,
.c-matrix-table th.matrix-th-cat:last-child {
    border-right: none !important;
}

/* First Column Header — Frozen Sticky Column */
.c-matrix-table th.matrix-th-label-col {
    display: table-cell !important;
    width: 18% !important;
    min-width: 150px !important;
    background: #f8fafc !important;
    border-right: 1px solid #e2e8f0 !important;
    vertical-align: middle !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    box-shadow: 4px 0 8px -3px rgba(15, 23, 42, 0.05) !important;
}
.matrix-th-label-inner {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #475569 !important;
}

/* Category Column Header Card */
.c-matrix-table th.matrix-th-cat {
    display: table-cell !important;
    width: 20.5% !important;
}
.matrix-col-header-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    width: 100% !important;
}
.matrix-col-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}
.matrix-col-sub {
    font-size: 11.5px !important;
    color: #64748b !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 500 !important;
}

/* Table Body Rows */
.c-matrix-table tbody tr.matrix-row {
    display: table-row !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.c-matrix-table tbody tr.matrix-row:last-child {
    border-bottom: none !important;
}

/* Table Cells */
.c-matrix-table tbody td,
.c-matrix-table td {
    display: table-cell !important;
    padding: 10px 14px !important;
    vertical-align: middle !important;
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    transition: background-color 0.12s ease !important;
}
.c-matrix-table tbody tr.matrix-row:nth-child(even) td {
    background-color: #fafbfc !important;
}
.c-matrix-table tbody td:last-child {
    border-right: none !important;
}
.c-matrix-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Leftmost Label Column — Frozen Sticky Column */
.matrix-td-label,
.c-matrix-table tbody td.matrix-td-label {
    display: table-cell !important;
    width: 18% !important;
    min-width: 150px !important;
    background-color: #f8fafc !important;
    border-right: 1px solid #e2e8f0 !important;
    padding: 10px 14px !important;
    vertical-align: middle !important;
    transition: background-color 0.12s ease !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 4 !important;
    box-shadow: 4px 0 8px -3px rgba(15, 23, 42, 0.05) !important;
}
.c-matrix-table tbody tr.matrix-row:nth-child(even) td.matrix-td-label {
    background-color: #f4f6f9 !important;
}
.matrix-td-label-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #334155 !important;
    line-height: 1.3 !important;
}
.matrix-row-icon {
    color: #64748b !important;
    flex-shrink: 0 !important;
}
.matrix-row-icon.icon-emerald {
    color: var(--theme-accent, #059669) !important;
}
.matrix-row-icon.icon-amber {
    color: #64748b !important;
}

/* Category Column Header Stage Kickers */
.matrix-stage-kicker {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--theme-accent, #059669) !important;
    display: block !important;
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
}

/* Synchronized Subtle Hover Across Row */
.c-matrix-table tbody tr.matrix-row:hover td {
    background-color: #f1f5f9 !important;
}
.c-matrix-table tbody tr.matrix-row:hover td.matrix-td-label {
    background-color: #e6ecf2 !important;
}

/* 1. Core Purpose (Row 1) — 2-Line Typographic Block with ZenScrib Emerald Accent */
.matrix-purpose-card,
.matrix-purpose-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.matrix-purpose-heading {
    font-size: 13px !important;
    font-weight: 750 !important;
    color: var(--theme-accent, #059669) !important;
    line-height: 1.35 !important;
}
.matrix-purpose-desc {
    font-size: 12px !important;
    color: #475569 !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
}

/* 2. Compact Data & Profile Typography (Cheat Sheet Rows 1, 2, 3) */
.matrix-compact-text {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
    display: inline-block !important;
}
.matrix-profile-text {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    line-height: 1.4 !important;
    display: inline-block !important;
}

/* Backward-compatible data block fallback */
.matrix-data-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.matrix-data-primary {
    font-size: 12.5px !important;
    font-weight: 650 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
}
.matrix-data-secondary {
    font-size: 11px !important;
    color: #64748b !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}

/* 3. Leading Tools Inline (Row 4) — Sleek, compact inline links with micro-ratings */
.matrix-tools-inline {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 6px !important;
    line-height: 1.4 !important;
}
.matrix-tool-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
a.matrix-tool-link:hover {
    color: var(--theme-accent, #059669) !important;
    text-decoration: underline !important;
}
.matrix-tool-score {
    font-size: 10.5px !important;
    font-weight: 750 !important;
    color: var(--theme-accent, #059669) !important;
    background: var(--theme-bg, #ecfdf5) !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    line-height: 1.2 !important;
}
.matrix-tool-sep {
    color: #cbd5e1 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    user-select: none !important;
}

/* Legacy badges & risk blocks (preserved for safety) */
.matrix-tools-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}
.matrix-tool-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 3px 7px !important;
    text-decoration: none !important;
}
.matrix-tool-name {
    font-size: 11.5px !important;
    font-weight: 650 !important;
    color: #0f172a !important;
}
.matrix-tool-rating {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    color: var(--theme-accent, #059669) !important;
    background: var(--theme-bg, #ecfdf5) !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
}

/* 4. Feature Matrix Mobile & Tablet Responsiveness (<= 768px & <= 480px) */
@media (max-width: 768px) {
    .c-matrix-table {
        min-width: 1000px !important;
    }
    .c-matrix-table th.matrix-th-label-col,
    .matrix-td-label,
    .c-matrix-table tbody td.matrix-td-label {
        position: static !important;
        left: auto !important;
        box-shadow: none !important;
        width: 135px !important;
        min-width: 135px !important;
        max-width: 135px !important;
        padding: 9px 12px !important;
    }
    .c-matrix-table th.matrix-th-cat,
    .c-matrix-table tbody td {
        width: 220px !important;
        min-width: 220px !important;
        padding: 9px 12px !important;
    }
    .matrix-col-header-card {
        gap: 2px !important;
    }
    .matrix-col-title {
        font-size: 13px !important;
    }
    .matrix-col-sub {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .c-matrix-table {
        min-width: 920px !important;
    }
    .c-matrix-table th.matrix-th-label-col,
    .matrix-td-label,
    .c-matrix-table tbody td.matrix-td-label {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        padding: 8px 10px !important;
    }
    .c-matrix-table th.matrix-th-cat,
    .c-matrix-table tbody td {
        width: 200px !important;
        min-width: 200px !important;
        padding: 8px 10px !important;
    }
}

/* ==========================================================================
   HUB PILIER T2 — TOP-TIER SAAS DECISION GUIDE CARDS (.stage-card)
   ========================================================================== */
.sec-stages-pad {
    padding-top: var(--sec-pad-mid-top, 4rem) !important;
    padding-bottom: var(--sec-pad-mid-bottom, 4.5rem) !important;
    width: 100% !important;
}

.stages-header-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: center !important;
    margin-bottom: 2.5rem !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.stages-kicker {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--theme-accent, #059669) !important;
    margin: 0 !important;
}
.stages-h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.025em !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}
.stages-sub {
    font-size: 14.5px !important;
    color: #64748b !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* 4-Column Grid */
.stages-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
@media (max-width: 991px) {
    .stages-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 575px) {
    .stages-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Card Container — Seamless Borderless & Fixed Position */
.stage-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background-color: #ffffff !important;
    border-radius: 1rem !important;
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    padding: 24px 20px 20px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02), 0 6px 18px -4px rgba(15, 23, 42, 0.04) !important;
    transition: box-shadow 0.2s ease !important;
    transform: none !important;
    box-sizing: border-box !important;
}
.stage-card:hover {
    transform: none !important;
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
}

.stage-card-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* Top Row & Category Pill */
/* Card Heading (Direct Top-Level Element) */
.stage-card-h3 {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
}

.stage-card-sub {
    font-size: 12.5px !important;
    color: #64748b !important;
    line-height: 1.45 !important;
    margin: -6px 0 14px 0 !important;
    font-weight: 450 !important;
}

/* Features List */
.stage-features-list,
.stage-card .stage-features-list,
.stage-card-body .stage-features-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    list-style: none !important;
    margin: 0 0 11px 0 !important;
    padding: 0 !important;
}
.stage-feature-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 12.5px !important;
    color: #475569 !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}
.stage-check-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #059669 !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
    padding: 0 !important;
}

/* Compact Black SaaS CTA Button — Sentence Case & Subtle Anthracite Hover */
.stage-cta-btn,
.stage-card .stage-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background-color: #0f172a !important;
    border: 1px solid #0f172a !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
    box-sizing: border-box !important;
    text-align: center !important;
    margin-top: auto !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}
.stage-cta-btn:hover,
.stage-card .stage-cta-btn:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border-color: #1e293b !important;
    transform: none !important;
}

/* Responsive subtle spacing between last feature bullet and CTA button */
@media (max-width: 991px) {
    .stage-card .stage-features-list,
    .stage-card-body .stage-features-list {
        margin-bottom: 11px !important;
    }
    .stage-card .stage-cta-btn {
        margin-top: auto !important;
    }
}
@media (max-width: 575px) {
    .stage-card .stage-features-list,
    .stage-card-body .stage-features-list {
        margin-bottom: 10px !important;
    }
    .stage-card .stage-cta-btn {
        margin-top: auto !important;
    }
}

/* ==========================================================================
   READY TO DIVE DEEPER — PROPOSITION 1 (CLEAN EDITORIAL CHIPS)
   ========================================================================== */
.deeper-col-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 14px !important;
    box-sizing: border-box !important;
}

.deeper-cat-btn,
a.deeper-cat-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 9px 14px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

.deeper-cat-btn .deeper-btn-arrow {
    display: inline-flex !important;
    align-items: center !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
    font-size: 13px !important;
    margin-left: 6px !important;
}

.deeper-cat-btn:hover,
a.deeper-cat-btn:hover {
    background: #f8fafc !important;
    color: var(--theme-accent, #059669) !important;
    border-color: var(--theme-border, #a7f3d0) !important;
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.08) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

.deeper-cat-btn:hover .deeper-btn-arrow,
a.deeper-cat-btn:hover .deeper-btn-arrow {
    transform: translateX(3px) !important;
    color: var(--theme-accent, #059669) !important;
}

/* ==========================================================================
   READY TO DIVE DEEPER — 100% STATIC ZERO-LIFT & SOFT SHADOW HOVER
   ========================================================================== */
html body .sec-deeper-pad .bde-loop-item,
html body .sec-deeper-pad article.bde-loop-item {
    transform: none !important;
    border: none !important;
    border-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: none !important;
}

html body .sec-deeper-pad .bde-loop-item:hover,
html body .sec-deeper-pad article.bde-loop-item:hover {
    transform: none !important;
    border: none !important;
    border-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Base card state: strictly borderless, invariant geometry */
.c-card-deeper-sub,
.deeper-sub-card,
a.c-card-deeper-sub,
a.deeper-sub-card,
html body .sec-deeper-pad .c-card-deeper-sub,
html body .sec-deeper-pad .deeper-sub-card,
html body .sec-deeper-pad a.c-card-deeper-sub,
html body .sec-deeper-pad a.deeper-sub-card,
html body .sec-deeper-pad .bde-loop-item a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    padding: 8px 12px 8px 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transform: none !important;
    transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hover state: 100% static, ZERO border change, soft elevation shadow only */
.c-card-deeper-sub:hover,
.deeper-sub-card:hover,
a.c-card-deeper-sub:hover,
a.deeper-sub-card:hover,
html body .sec-deeper-pad .bde-loop-item a:hover,
html body .sec-deeper-pad .bde-loop-item:hover a,
html body .sec-deeper-pad a.c-card-deeper-sub:hover,
html body .sec-deeper-pad .c-card-deeper-sub:hover,
html body .sec-deeper-pad .deeper-sub-card:hover,
html body .sec-deeper-pad .bde-loop-item:hover .c-card-deeper-sub,
html body .sec-deeper-pad .bde-loop-item:hover .deeper-sub-card {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    transform: none !important;
    text-decoration: none !important;
    padding: 8px 12px 8px 8px !important;
    margin: 0 !important;
}

html body .sec-deeper-pad .deeper-sub-thumb-wrap {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .sec-deeper-pad .deeper-sub-thumb,
html body .sec-deeper-pad .deeper-sub-thumb-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

html body .sec-deeper-pad a:hover .deeper-sub-thumb,
html body .sec-deeper-pad a:hover .deeper-sub-thumb-wrap img {
    transform: scale(1.05) !important;
}

html body .sec-deeper-pad .deeper-sub-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 80px !important;
    padding: 2px 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

html body .sec-deeper-pad .deeper-sub-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0b132b !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

html body .sec-deeper-pad a:hover .deeper-sub-title {
    color: #000000 !important;
    text-decoration: none !important;
}

html body .sec-deeper-pad .deeper-sub-footer-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .sec-deeper-pad .deeper-sub-date {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

html body .sec-deeper-pad .deeper-sub-cta {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    transition: color 0.15s ease !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

html body .sec-deeper-pad a:hover .deeper-sub-cta {
    color: #475569 !important;
}

html body .sec-deeper-pad .deeper-arrow-icon {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease, color 0.15s ease !important;
    display: inline-block !important;
    line-height: 1 !important;
}

html body .sec-deeper-pad a:hover .deeper-arrow-icon {
    transform: translateX(3px) !important;
    color: #475569 !important;
}

/* ==========================================================================
   SECTION 'READY TO DIVE DEEPER' (LE SPLIT ASYMÉTRIQUE FINAL)
   ========================================================================== */

/* En-tête de section sobre */
.asym-section-header {
    margin-bottom: 28px !important;
}

.asym-section-kicker {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--theme-accent, #059669) !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.asym-section-title {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: #020617 !important;
    line-height: 1.25 !important;
    margin: 0 0 10px 0 !important;
}

.asym-section-subtitle {
    font-size: 14.5px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    max-width: 720px !important;
    margin: 0 !important;
}

/* Bandeau Haut Alternatives Pleine Largeur */
.asym-top-strip {
    background: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 22px 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.asym-top-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.asym-top-kicker {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #0f172a !important;
}

.asym-top-link,
.asym-top-btn {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.15s ease !important;
}

.asym-top-link:hover,
.asym-top-btn:hover {
    color: #334155 !important;
    transform: translateX(2px) !important;
    text-decoration: none !important;
}

/* Grille 4 cartes Alternatives avec vraies vignettes retina 16:9 */
.asym-alts-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.asym-alt-card {
    display: flex !important;
    flex-direction: column !important;
    background: #f8fafc !important;
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.05), 0 1px 3px -1px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    height: 100% !important;
}

.asym-alt-card:hover {
    background: #ffffff !important;
    border: none !important;
    border-color: transparent !important;
    transform: none !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    text-decoration: none !important;
}

.asym-alt-thumb {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    overflow: hidden !important;
    background: #e2e8f0 !important;
    position: relative !important;
}

.asym-alt-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.35s ease !important;
}

.asym-alt-card:hover .asym-alt-thumb img {
    transform: scale(1.04) !important;
}

.asym-alt-info {
    padding: 11px 13px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex-grow: 1 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.asym-alt-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
}

.asym-alt-title {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: color 0.15s ease !important;
}

.asym-alt-card:hover .asym-alt-title {
    color: #000000 !important;
    text-decoration: none !important;
}

.asym-alt-arrow {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.asym-alt-card:hover .asym-alt-arrow {
    color: #0f172a !important;
    transform: translateX(3px) !important;
}

.asym-alt-sub {
    font-size: 11.5px !important;
    color: #64748b !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Grille Asymétrique (65% Gauche / 35% Droite) */
.asym-grid-split {
    display: grid !important;
    grid-template-columns: 1.85fr 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    min-width: 0 !important;
}

/* Zone Gauche (65% - Apprentissage) */
.asym-col-learn {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    min-width: 0 !important;
}

.asym-subblock {
    background: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 22px 20px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.asym-subblock-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.asym-subblock-title {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    color: #020617 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}

.asym-subblock-link {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.15s ease !important;
}

.asym-subblock-link:hover {
    color: #334155 !important;
    transform: translateX(2px) !important;
    text-decoration: none !important;
}

/* Grilles 2 colonnes de cartes Tutoriels / Playbooks */
.asym-cards-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.asym-guide-card {
    display: flex !important;
    flex-direction: column !important;
    background: #f8fafc !important;
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.05), 0 1px 3px -1px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    height: 100% !important;
}

.asym-guide-card:hover {
    background: #ffffff !important;
    border: none !important;
    border-color: transparent !important;
    transform: none !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    text-decoration: none !important;
}

.asym-guide-img-wrap {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    overflow: hidden !important;
    background: #e2e8f0 !important;
    position: relative !important;
}

.asym-guide-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.35s ease !important;
}

.asym-guide-card:hover .asym-guide-img-wrap img {
    transform: scale(1.04) !important;
}

.asym-guide-body {
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex-grow: 1 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.asym-guide-meta {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.asym-guide-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.15s ease !important;
}

.asym-guide-card:hover .asym-guide-title {
    color: #000000 !important;
    text-decoration: none !important;
}

.asym-guide-desc {
    font-size: 12px !important;
    color: #475569 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Zone Droite (35% - Duels & Face-à-Face) */
.asym-col-versus {
    background: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    height: 100% !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    min-width: 0 !important;
}

.asym-versus-header {
    margin-bottom: 14px !important;
}

.asym-versus-title {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    color: #020617 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}

.asym-versus-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

.asym-versus-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 11px 15px !important;
    background: #f8fafc !important;
    border: none !important;
    border-radius: 10px !important;
    flex: 1 1 0 !important;
    min-height: 75px !important;
    box-shadow: 0 2px 5px -1px rgba(15, 23, 42, 0.05), 0 1px 3px -1px rgba(15, 23, 42, 0.02) !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.asym-versus-card:hover {
    background: #ffffff !important;
    border: none !important;
    border-color: transparent !important;
    transform: none !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    text-decoration: none !important;
}

.asym-versus-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
}

.asym-versus-card-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: color 0.15s ease !important;
}

.asym-versus-card:hover .asym-versus-card-title {
    color: #000000 !important;
    text-decoration: none !important;
}

.asym-versus-arrow {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
}

.asym-versus-card:hover .asym-versus-arrow {
    color: #0f172a !important;
    transform: translate(2px, -2px) !important;
}

.asym-versus-desc {
    font-size: 12.5px !important;
    color: #64748b !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.btn-asym-versus-all {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 12px 20px !important;
    background: #080e1a !important;
    color: #ffffff !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    margin-top: auto !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.btn-asym-versus-all:hover {
    background: #334155 !important;
    color: #ffffff !important;
    transform: none !important;
    text-decoration: none !important;
}

/* Responsive Media Queries pour le Split Asymétrique */
@media (max-width: 960px) {
    .asym-grid-split {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .asym-alts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .asym-alts-grid {
        grid-template-columns: 1fr !important;
    }
    .asym-cards-grid-2 {
        grid-template-columns: 1fr !important;
    }
    .asym-subblock {
        padding: 18px 14px !important;
    }
    .asym-top-strip {
        padding: 18px 14px !important;
    }
    .asym-col-versus {
        padding: 18px 14px !important;
    }
}

/* ==========================================================================
   HEADER RESPONSIVE LOGO SWITCHER (DESKTOP VS MOBILE ICON)
   ========================================================================== */
.header-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}
.header-logo-img {
    height: 28px !important;
    width: auto !important;
    max-height: 28px !important;
    object-fit: contain !important;
}
.header-logo-desktop {
    display: block !important;
}
.header-logo-mobile {
    display: none !important;
}

@media (max-width: 479px) {
    .header-logo-desktop {
        display: none !important;
    }
    .header-logo-mobile {
        display: block !important;
    }
}

/* ==========================================================================
   SESSION 17: HTML5 SEMANTIC LIST & LOOP GRID RESETS + PROTOCOL BOTS
   ========================================================================== */
.protocol-grid,
.protocol-cards-grid,
.stages-cards-grid,
.quick-picks-list,
.c-grid-mechanics,
.picks-cards-list,
.pick-tags-row,
.subhub-vs-grid,
.reviews-grid,
.guides-grid-3cols,
.guides-rows-box,
.news-main-grid,
.news-rows-box,
.sidebar-related-list,
.related-grid-3cols,
.review-alts-grid,
.protocol-features-list,
.review-toc-list,
ul.bde-post-loop,
ol.bde-post-loop,
.bde-post-loop ul,
.bde-post-loop ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

li.quick-pick-item-wrap,
li.guide-row-item-wrap,
li.news-row-item-wrap,
li.sidebar-related-item,
li.related-grid-item,
li.review-alt-item,
li.subhub-vs-item,
li.review-grid-item,
li.guide-grid-item,
li.news-grid-item {
    list-style: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

li.pick-tag-pill {
    display: inline-flex !important;
    width: auto !important;
    list-style: none !important;
}

li.guide-row-item-wrap,
li.news-row-item-wrap {
    display: block !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   HOMEPAGE: 3 RECOMMENDED BOTS (SECTION 3) - 3 COLS GRID & CARDS
   ────────────────────────────────────────────────────────────────────────── */
.sec-selection-pad .selection-tab-panel,
.selection-tab-panel {
    width: 100% !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
}

.sec-selection-pad .protocol-grid,
ul.protocol-grid,
.protocol-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

/* Tablet (768px - 1023px): Keep 3 columns with balanced spacing */
@media (min-width: 768px) and (max-width: 1023px) {
    .sec-selection-pad .protocol-grid,
    ul.protocol-grid,
    .protocol-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
    .protocol-card,
    .c-card-protocol,
    li.protocol-card,
    li.c-card-protocol,
    .sec-selection-pad .protocol-card {
        padding: 20px 16px 18px 16px !important;
    }
    .protocol-card-title {
        font-size: 18px !important;
    }
    .protocol-feature-text {
        font-size: 12.5px !important;
    }
}

/* Mobile (< 768px): Collapse to 1 column */
@media (max-width: 767px) {
    .sec-selection-pad .protocol-grid,
    ul.protocol-grid,
    .protocol-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

.protocol-card,
.c-card-protocol,
li.protocol-card,
li.c-card-protocol,
.sec-selection-pad .protocol-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 16px !important;
    padding: 26px 24px 22px 24px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 100% !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.protocol-card:hover,
.c-card-protocol:hover,
li.protocol-card:hover,
li.c-card-protocol:hover {
    transform: none !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    border-color: #e2e8f0 !important;
}

.protocol-card-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    gap: 0 !important;
}

.protocol-subkicker {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: block !important;
}

.protocol-card-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0b132b !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: block !important;
}

.protocol-badge-pill,
.protocol-card .protocol-badge-pill,
.c-card-protocol .protocol-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: #64748b !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    margin: 0 0 10px 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    width: fit-content !important;
    box-sizing: border-box !important;
}

.protocol-features-list,
ul.protocol-features-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.protocol-feature-item,
li.protocol-feature-item {
    list-style: none !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.protocol-check-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    color: var(--theme-accent, #059669) !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 1px !important;
}

.protocol-feature-text {
    font-size: 13.5px !important;
    color: #334155 !important;
    line-height: 1.45 !important;
    font-weight: 450 !important;
}

.protocol-cta-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 20px !important;
    background: #080e1a !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 9px !important;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin-top: auto !important;
}

.protocol-cta-btn:hover {
    background: #334155 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   SUB-HUB BEST (TEMPLATE T3) — HERO QUICK PICKS, THE MECHANICS & TOP PICKS
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   1. HERO & QUICK PICKS (TOP 3)
   ────────────────────────────────────────────────────────────────────────── */
.sec-best-hero {
    overflow-x: clip !important;
}

.sec-inner-1100,
.l-container-1100 {
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(14px, 4vw, 20px) !important;
    padding-right: clamp(14px, 4vw, 20px) !important;
    box-sizing: border-box !important;
}

.sec-best-hero .best-hero-grid,
.best-hero-grid {
    display: grid !important;
    grid-template-columns: 1.35fr 1fr !important;
    gap: clamp(24px, 3.5vw, 44px) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.best-hero-left {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 991px) {
    .sec-best-hero .best-hero-grid,
    .best-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

.c-card-quick-picks {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 16px !important;
    padding: clamp(20px, 2.5vw, 26px) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

@media (max-width: 640px) {
    .c-card-quick-picks {
        padding: 16px 14px !important;
        border-radius: 18px !important;
    }
}

@media (max-width: 380px) {
    .c-card-quick-picks {
        padding: 14px 10px !important;
        border-radius: 14px !important;
    }
}

.quick-picks-eyebrow {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: #64748b !important;
    margin-bottom: 14px !important;
}

.quick-picks-list,
ol.quick-picks-list {
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

li.quick-pick-item-wrap {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.quick-pick-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 11px 0 !important;
    text-decoration: none !important;
    border-top: 1px solid #f1f5f9 !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    gap: 8px !important;
}

li.quick-pick-item-wrap:first-child .quick-pick-item,
.quick-pick-item:first-child {
    border-top: none !important;
}

.quick-pick-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

.quick-pick-left > div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

.quick-pick-rank {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    width: 22px !important;
    flex-shrink: 0 !important;
}

.quick-pick-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    transition: color 0.15s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.quick-pick-item:hover .quick-pick-title {
    color: #000000 !important;
}

.quick-pick-tag {
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.quick-pick-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

.quick-pick-score {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 2px !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
}

.quick-pick-score-val {
    font-size: 12.5px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
}

.quick-pick-score-max {
    font-size: 10px !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

.quick-pick-chevron {
    color: #94a3b8 !important;
    transition: transform 0.15s ease, color 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.quick-pick-item:hover .quick-pick-chevron {
    transform: translateX(2px) !important;
    color: #0f172a !important;
}

@media (max-width: 640px) {
    .quick-pick-item {
        padding: 9px 0 !important;
        gap: 6px !important;
    }
    .quick-pick-left {
        gap: 8px !important;
    }
    .quick-pick-rank {
        width: 18px !important;
        font-size: 12px !important;
    }
    .quick-pick-title {
        font-size: 13.5px !important;
    }
    .quick-pick-tag {
        font-size: 10.5px !important;
    }
    .quick-pick-right {
        gap: 6px !important;
    }
    .quick-pick-score {
        padding: 2px 6px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }
    .quick-pick-score-val {
        font-size: 11.5px !important;
    }
    .quick-pick-score-max {
        font-size: 9px !important;
    }
    .quick-pick-chevron svg {
        width: 14px !important;
        height: 14px !important;
    }
}

@media (max-width: 380px) {
    .quick-pick-item {
        padding: 8px 0 !important;
        gap: 4px !important;
    }
    .quick-pick-left {
        gap: 6px !important;
    }
    .quick-pick-rank {
        width: 16px !important;
        font-size: 11px !important;
    }
    .quick-pick-title {
        font-size: 12.5px !important;
    }
    .quick-pick-tag {
        font-size: 10px !important;
    }
    .quick-pick-right {
        gap: 4px !important;
    }
    .quick-pick-score {
        padding: 2px 5px !important;
    }
    .quick-pick-chevron {
        display: none !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   2. HOW IT WORKS / THE MECHANICS
   ────────────────────────────────────────────────────────────────────────── */
.sec-how-it-works {
    padding-top: var(--sec-pad-mid-top, 2.5rem) !important;
    padding-bottom: var(--sec-pad-mid-bottom, 2.5rem) !important;
    width: 100% !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.mechanics-header-center {
    text-align: center !important;
    margin-bottom: 28px !important;
}

.mechanics-kicker {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25em !important;
    color: var(--theme-accent, #059669) !important;
    margin-bottom: 6px !important;
}

.mechanics-h2 {
    font-size: clamp(22px, 3vw, 30px) !important;
    font-weight: 800 !important;
    color: #020617 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}

.c-grid-mechanics,
ol.c-grid-mechanics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2vw, 24px) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 28px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 820px) {
    .c-grid-mechanics,
    ol.c-grid-mechanics {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

.c-card-step,
li.c-card-step {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 20px !important;
    padding: clamp(20px, 2.5vw, 26px) !important;
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    list-style: none !important;
    margin: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.c-card-step:hover,
li.c-card-step:hover {
    transform: none !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    border-color: #e2e8f0 !important;
}

.step-card-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
}

.step-icon-box {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--theme-bg, #ecfdf5) !important;
    border: 1px solid var(--theme-border, #a7f3d0) !important;
    color: var(--theme-accent, #059669) !important;
}

.step-badge-num {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    background: var(--theme-bg, #ecfdf5) !important;
    color: var(--theme-text, #065f46) !important;
    border: 1px solid var(--theme-border, #a7f3d0) !important;
}

.step-card-h3 {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.3 !important;
}

.step-card-desc {
    font-size: 13.5px !important;
    color: #64748b !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

.c-callout-editorial,
.callout-themed {
    background: var(--theme-bg, #ecfdf5) !important;
    border: 1px solid var(--theme-border, #a7f3d0) !important;
    border-left: 4px solid var(--theme-accent, #059669) !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.03) !important;
    margin-top: 28px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.callout-editorial-text {
    font-size: 13px !important;
    color: #334155 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   3. TOP RECOMMENDATIONS (TOP 3 DETAILED CARDS)
   ────────────────────────────────────────────────────────────────────────── */
.sec-editors-picks {
    padding-top: var(--sec-pad-mid-top, 2.5rem) !important;
    padding-bottom: var(--sec-pad-mid-bottom, 2.5rem) !important;
    width: 100% !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.picks-header-center {
    text-align: center !important;
    margin-bottom: 28px !important;
}

.picks-kicker {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25em !important;
    color: #64748b !important;
    margin-bottom: 6px !important;
}

.picks-h2 {
    font-size: clamp(22px, 3vw, 30px) !important;
    font-weight: 800 !important;
    color: #020617 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}

.picks-cards-list,
ol.picks-cards-list {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(20px, 2.5vw, 28px) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.c-pick-card,
li.c-pick-card {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 16px !important;
    padding: clamp(24px, 3vw, 32px) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    list-style: none !important;
    margin: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.c-pick-card:hover,
li.c-pick-card:hover {
    transform: none !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    border-color: #e2e8f0 !important;
}

.pick-card-grid {
    display: grid !important;
    grid-template-columns: 320px 1fr !important;
    gap: clamp(24px, 3vw, 36px) !important;
    align-items: center !important;
    width: 100% !important;
}

@media (max-width: 991px) {
    .pick-card-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

.pick-left-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.pick-hero-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

.pick-rank-num {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: var(--theme-accent, #059669) !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
}

.pick-brand-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.pick-brand-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.pick-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pick-brand-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.pick-score-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.pick-score-num {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: var(--theme-accent, #059669) !important;
    line-height: 1 !important;
}

.pick-score-max {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
}

.pick-progress-bar {
    width: 110px !important;
    height: 6px !important;
    background: #f1f5f9 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

.pick-progress-fill {
    height: 100% !important;
    background: var(--theme-accent, #059669) !important;
    border-radius: 999px !important;
}

.pick-tags-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pick-tag-pill,
li.pick-tag-pill {
    display: inline-flex !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    line-height: 1.3 !important;
    list-style: none !important;
    margin: 0 !important;
}

.pick-right-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.pick-pitch-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 10px !important;
}

.pick-pitch-text {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #334155 !important;
    margin: 0 !important;
    flex: 1 !important;
}

.pick-badge-choice {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    background: var(--theme-bg, #ecfdf5) !important;
    color: var(--theme-text, #065f46) !important;
    border: 1px solid var(--theme-border, #a7f3d0) !important;
    white-space: nowrap !important;
}

.pick-pricing-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12.5px !important;
    color: #64748b !important;
}

.pick-price-pill {
    font-weight: 800 !important;
    color: #0f172a !important;
}

.pick-price-type {
    font-weight: 500 !important;
    color: #64748b !important;
}

.pick-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}



/* ──────────────────────────────────────────────────────────────────────────
   4. COMPARISON MATRIX (8 COLUMNS) — TACTILE SCROLL & ADAPTIVE STICKY COLUMN
   ────────────────────────────────────────────────────────────────────────── */

/* Outer Card Container */
.sec-compare-matrix {
    padding-top: var(--sec-pad-mid-top, 2.5rem) !important;
    padding-bottom: var(--sec-pad-mid-bottom, 2.5rem) !important;
    width: 100% !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.sec-compare-matrix .c-table-card,
.c-table-card {
    position: relative !important;
    width: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 16px -4px rgba(15, 23, 42, 0.03) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Mobile & Tablet Visual Scroll Indicator Prompt */
@media (max-width: 900px) {
    .sec-compare-matrix .c-table-card::before,
    .c-table-card::before {
        content: "⟵ Scroll horizontally to compare all tools ⟶" !important;
        display: block !important;
        text-align: center !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        padding: 8px 12px !important;
        background: #f8fafc !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    html[lang="fr"] .sec-compare-matrix .c-table-card::before,
    html:lang(fr) .sec-compare-matrix .c-table-card::before,
    html[lang="fr"] .c-table-card::before,
    html:lang(fr) .c-table-card::before {
        content: "⟵ Faites défiler horizontalement pour comparer tous les outils ⟶" !important;
    }
}

/* Inner Scrollable Wrapper with Custom Tactile Scrollbar */
.sec-compare-matrix .c-table-scroll,
.c-table-scroll {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background-color: transparent !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 #f8fafc !important;
}
.c-table-scroll::-webkit-scrollbar {
    height: 6px !important;
}
.c-table-scroll::-webkit-scrollbar-track {
    background: #f8fafc !important;
}
.c-table-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 999px !important;
}
.c-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* Table Dimensions & Structure */
.c-best-matrix-table {
    display: table !important;
    width: 100% !important;
    min-width: 820px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
    border: none !important;
    background: #ffffff !important;
    margin: 0 !important;
}

/* Table Headers */
.c-best-matrix-table thead tr th {
    font-size: 11px !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #64748b !important;
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid #f1f5f9 !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 12px 14px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}
.c-best-matrix-table thead tr th:last-child {
    border-right: none !important;
}

/* Table Body Rows */
.c-best-matrix-table tbody tr {
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background-color 0.15s ease !important;
}
.c-best-matrix-table tbody tr:hover {
    background-color: #f8fafc !important;
}
.c-best-matrix-table tr.row-featured,
.c-best-matrix-table tbody tr.row-featured,
.row-featured {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border-left: 3px solid #0f172a !important;
}
.c-best-matrix-table tr.row-featured:hover,
.c-best-matrix-table tbody tr.row-featured:hover,
.row-featured:hover {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
}

/* Table Cells */
.c-best-matrix-table tbody td {
    padding: 12px 14px !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    color: #334155 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease !important;
}
.c-best-matrix-table tbody tr:hover td {
    background-color: #f8fafc !important;
}
.c-best-matrix-table tbody tr.row-featured td {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
}
.c-best-matrix-table tbody tr.row-featured:hover td {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
}
.c-best-matrix-table tbody td:last-child {
    border-right: none !important;
}
.c-best-matrix-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Tool Name & Review Link in 1st Column */
.tbl-tool-name {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    white-space: nowrap !important;
    line-height: 1.25 !important;
}
.tbl-review-link,
.c-best-matrix-table a.tbl-review-link {
    display: inline-block !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    margin-top: 2px !important;
    transition: color 0.15s ease !important;
}
.tbl-review-link:hover,
.c-best-matrix-table a.tbl-review-link:hover {
    color: #0f172a !important;
    text-decoration: none !important;
}

/* 6-Column Cells Styling */
.tbl-best-for,
.c-best-matrix-table td.tbl-best-for {
    font-size: 13px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.tbl-core-strength,
.c-best-matrix-table td.tbl-core-strength {
    font-size: 13px !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.tbl-price-cell,
.c-best-matrix-table td.tbl-price-cell {
    font-size: 12.5px !important;
    color: #334155 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.tbl-score-val,
.c-best-matrix-table td.tbl-score-val {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: center !important;
}

.tbl-score-max,
.c-best-matrix-table td.tbl-score-max {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    margin-left: 1px !important;
}

.c-best-matrix-table td.tbl-check-yes {
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-align: center !important;
}
.c-best-matrix-table td.tbl-check-no {
    color: #94a3b8 !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* Action Cell & Dual Buttons (Option A) */
.tbl-action-cell,
td.tbl-action-cell {
    text-align: right !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.tbl-actions-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

.btn-tbl-review {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 7px 12px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

.btn-tbl-review:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
    text-decoration: none !important;
}

.btn-tbl-visit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid #0f172a !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 7px 14px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}
.btn-tbl-visit:hover {
    background: #1e293b !important;
    border-color: #1e293b !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
    text-decoration: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ADAPTIVE STICKY BEHAVIOR:
   - On Tablets & Desktops (>= 768px): 1st Column is Frozen Sticky with subtle shadow.
   - On Mobile Phones (< 768px): 1st Column is UNPINNED so the user has 100% of screen width to swipe through all columns without cramming!
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .c-best-matrix-table thead tr th:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 5 !important;
        background-color: #f8fafc !important;
        border-right: 1px solid #e2e8f0 !important;
        box-shadow: 4px 0 8px -3px rgba(15, 23, 42, 0.06) !important;
        min-width: 140px !important;
    }
    .c-best-matrix-table tbody td:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 4 !important;
        background-color: #ffffff !important;
        border-right: 1px solid #e2e8f0 !important;
        box-shadow: 4px 0 8px -3px rgba(15, 23, 42, 0.06) !important;
        min-width: 140px !important;
    }
    .c-best-matrix-table tbody tr:hover td:first-child {
        background-color: #f8fafc !important;
    }
    .c-best-matrix-table tbody tr.row-featured td:first-child {
        background-color: #f8fafc !important;
        background: #f8fafc !important;
    }
    .c-best-matrix-table tbody tr.row-featured:hover td:first-child {
        background-color: #f8fafc !important;
        background: #f8fafc !important;
    }
}

@media (max-width: 767px) {
    .c-best-matrix-table {
        min-width: 720px !important;
    }
    .c-best-matrix-table thead tr th:first-child,
    .c-best-matrix-table tbody tr td:first-child {
        position: static !important;
        left: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
        min-width: 110px !important;
        width: auto !important;
    }
    .c-best-matrix-table thead tr th,
    .c-best-matrix-table tbody td {
        padding: 9px 8px !important;
        font-size: 12px !important;
    }
    .c-best-matrix-table thead tr th {
        font-size: 10px !important;
        padding: 10px 8px !important;
    }
    .tbl-tool-name {
        font-size: 13px !important;
    }
    .tbl-review-link {
        font-size: 11px !important;
    }
    .btn-tbl-visit {
        padding: 5px 9px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   5. TEMPLATE T3 MOBILE POLISHING (TOP PICKS & STEP CARDS)
   ────────────────────────────────────────────────────────────────────────── */

/* Step Cards Equal Height & Spacing */
.c-card-step,
li.c-card-step {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
    transform: none !important;
}
.c-card-step:hover,
li.c-card-step:hover {
    transform: none !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    border-color: #e2e8f0 !important;
}
.step-card-desc {
    flex-grow: 1 !important;
}

/* Pick Card Responsive & Fluid Resizing */
.c-pick-card,
li.c-pick-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
    transform: none !important;
}
.c-pick-card:hover,
li.c-pick-card:hover {
    transform: none !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    border-color: #e2e8f0 !important;
}

.pick-card-grid,
.pick-left-col,
.pick-right-col {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Tablet & Mobile (< 991px): 1-Column Stack with zero min-width blockage */
@media (max-width: 991px) {
    .pick-card-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        width: 100% !important;
    }
    .pick-pitch-top {
        flex-direction: column-reverse !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
        width: 100% !important;
    }
    .pick-badge-choice {
        align-self: flex-start !important;
        white-space: normal !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }
}

/* Mobile Screens (< 640px): Flexible layout and full tactile CTA buttons */
@media (max-width: 640px) {
    .c-pick-card,
    li.c-pick-card {
        padding: 16px 14px !important;
        border-radius: 16px !important;
    }
    .pick-hero-row {
        gap: 10px !important;
        width: 100% !important;
    }
    .pick-brand-info {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    .pick-brand-title {
        font-size: 18px !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
    .pick-rank-num {
        font-size: 24px !important;
        flex-shrink: 0 !important;
    }
    .pick-score-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .pick-progress-bar {
        flex: 1 1 70px !important;
        max-width: 100px !important;
        min-width: 50px !important;
    }
    .pick-tags-row {
        gap: 4px !important;
        width: 100% !important;
    }
    .pick-tag-pill,
    li.pick-tag-pill {
        font-size: 10.5px !important;
        padding: 2px 7px !important;
    }
    .pick-pitch-text {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        word-break: break-word !important;
    }
    .pick-pricing-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
        font-size: 12px !important;
    }
    .pick-actions-row {
        width: 100% !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    .btn-pick-review,
    .btn-pick-site {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        padding: 0.625rem 0.875rem !important;
        word-break: break-word !important;
    }
}

/* Super Narrow Phones (< 380px): Maximum compactness */
@media (max-width: 380px) {
    .c-pick-card,
    li.c-pick-card {
        padding: 14px 10px !important;
        border-radius: 14px !important;
    }
    .pick-hero-row {
        gap: 8px !important;
    }
    .pick-rank-num {
        font-size: 20px !important;
    }
    .pick-brand-title {
        font-size: 16px !important;
    }
    .pick-score-num {
        font-size: 14px !important;
    }
    .pick-progress-bar {
        min-width: 40px !important;
        max-width: 80px !important;
    }
    .c-card-step,
    li.c-card-step {
        padding: 14px 12px !important;
        border-radius: 14px !important;
    }
    .c-callout-editorial,
    .callout-themed {
        padding: 12px 14px !important;
        border-radius: 10px !important;
    }
}

/* ==========================================================================
   SUB-HUB BEST PAGES: HEAD-TO-HEAD MATCHUPS & COMPARISONS (.sec-subhub-vs)
   ========================================================================== */
.sec-subhub-vs {
    padding-top: var(--sec-pad-mid-top, 2.5rem) !important;
    padding-bottom: var(--sec-pad-mid-bottom, 3rem) !important;
    width: 100% !important;
    background: transparent !important;
}

.sec-subhub-vs .picks-header-center,
.sec-subhub-vs .matrix-header-center {
    text-align: center !important;
    margin-bottom: 28px !important;
    width: 100% !important;
}

.sec-subhub-vs .picks-kicker {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25em !important;
    color: #64748b !important;
    margin-bottom: 6px !important;
}

.sec-subhub-vs .picks-h2 {
    font-size: clamp(22px, 3vw, 30px) !important;
    font-weight: 800 !important;
    color: #020617 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}

.subhub-vs-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    width: 100% !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 1024px) {
    .subhub-vs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.25rem !important;
    }
}

@media (max-width: 640px) {
    .subhub-vs-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

.subhub-vs-item,
.subhub-vs-item .c-card-guide-wrap {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.subhub-vs-item a.c-card-guide.guide-card {
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 0.875rem !important;
    padding: 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.subhub-vs-item a.c-card-guide.guide-card:hover {
    border-color: #e2e8f0 !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    transform: none !important;
    text-decoration: none !important;
}

.subhub-vs-item .guide-card-thumb-wrap {
    width: 100% !important;
    aspect-ratio: 16 / 9.5 !important;
    height: auto !important;
    border-radius: 0.625rem !important;
    overflow: hidden !important;
    position: relative !important;
    background-color: #f1f5f9 !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
    border: none !important;
}

.subhub-vs-item .guide-card-img,
.subhub-vs-item .guide-card-thumb-wrap img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9.5 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0.625rem !important;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.subhub-vs-item a:hover .guide-card-img,
.subhub-vs-item a:hover .guide-card-thumb-wrap img {
    transform: scale(1.04) !important;
}

.subhub-vs-item .guide-badge-cat {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    background: #ffffff !important;
    color: #0f172a !important;
    padding: 0.25rem 0.625rem !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
    line-height: 1.2 !important;
    z-index: 2 !important;
}

.subhub-vs-item .guide-card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    padding: 0 0.25rem 0.25rem 0.25rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.subhub-vs-item .guide-card-meta {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 0.375rem 0 !important;
}

.subhub-vs-item .guide-card-author {
    font-weight: 700 !important;
    color: #475569 !important;
}

.subhub-vs-item .guide-card-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
    color: #0f172a !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.15s ease !important;
}

.subhub-vs-item a:hover .guide-card-title {
    color: #000000 !important;
    text-decoration: none !important;
}

.subhub-vs-item .guide-card-excerpt p {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: #64748b !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.subhub-vs-item .guide-cta-link {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--theme-accent, #059669) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: transform 0.15s ease !important;
}

.subhub-vs-item a:hover .guide-cta-link {
    transform: translateX(3px) !important;
}

/* ==========================================================================
   HEAD-TO-HEAD DIRECT COMPARISON HERO COMPONENT (.vs-header-card)
   B2B SaaS Qualitative Arbitrage & Target Users Architecture
   ========================================================================== */
.vs-header-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1.125rem !important;
    padding: 1.25rem 1.375rem 1.375rem 1.375rem !important;
    box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.03) !important;
    margin: 1.25rem auto 2.25rem auto !important;
    max-width: 1100px !important;
    box-sizing: border-box !important;
}

.vs-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    align-items: stretch !important;
    width: 100% !important;
    position: relative !important;
}

/* Floating Duel Badge (In Foreground, Vertical Center) */
.vs-floating-badge {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

.vs-divider-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16) !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .vs-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .vs-floating-badge {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: -18px auto !important;
        z-index: 10 !important;
        width: 100% !important;
    }

    .vs-card--a {
        border-bottom-left-radius: 0.5rem !important;
        border-bottom-right-radius: 0.5rem !important;
    }

    .vs-card--b {
        border-top-left-radius: 0.5rem !important;
        border-top-right-radius: 0.5rem !important;
    }
}

.vs-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    padding: 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.vs-card-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.vs-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.875rem !important;
    padding-bottom: 0.625rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.vs-card-logo-wrap {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vs-card-logo-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 4px !important;
}

.vs-card-logo-avatar {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--theme-accent, #059669) !important;
}

.vs-card-name {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.vs-card-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    text-align: left !important;
}

.vs-card-kicker {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #64748b !important;
}

.vs-card-tagline {
    font-size: 13px !important;
    color: #334155 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

.vs-card-highlights {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
}

.vs-card-highlight-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    font-size: 12.5px !important;
    color: #334155 !important;
    line-height: 1.4 !important;
}

.vs-card-check-icon {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    color: var(--theme-accent, #059669) !important;
    margin-top: 2px !important;
}

.vs-card-personas {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
}

.vs-card-persona-tag {
    background: #f8fafc !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2.5px 8px !important;
    border-radius: 6px !important;
    line-height: 1.3 !important;
}

.vs-card-footer {
    margin-top: 1rem !important;
}

.vs-card-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0.65rem 1.125rem !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 0.5rem !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
}

.vs-card-btn:hover {
    background: #1e293b !important;
    border-color: #1e293b !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
}

.vs-verdict-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    padding: 1rem 1.25rem !important;
    margin-top: 1.125rem !important;
    text-align: left !important;
}

.vs-verdict-kicker {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #0f172a !important;
    margin-bottom: 0.25rem !important;
    display: block !important;
}

.vs-verdict-text {
    font-size: 13.5px !important;
    color: #334155 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* ==========================================================================
   SINGLE REVIEW: TOP ALTERNATIVES GRID (.review-alternatives-wrap)
   ========================================================================== */
.review-alternatives-wrap {
    margin: 3.5rem auto 2.5rem auto !important;
    width: 100% !important;
    max-width: 1100px !important;
}

.review-alt-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin-bottom: 2rem !important;
    width: 100% !important;
}

.review-alt-kicker {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--theme-accent, #059669) !important;
    background: rgba(5, 150, 105, 0.08) !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    margin-bottom: 0.625rem !important;
    display: inline-block !important;
}

.review-alt-title {
    font-size: clamp(22px, 2.5vw, 28px) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
    margin: 0 0 0.5rem 0 !important;
}

.review-alt-sub {
    font-size: 14.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.55 !important;
}




/* ==========================================================================
   SINGLE REVIEW & ARTICLE — MODERN VERDICT & SCORE BREAKDOWN
   ========================================================================== */
.review-verdict-modern { 
    margin: 48px auto; 
    background: #ffffff; 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02), 0 2px 4px -2px rgba(0,0,0,0.02), inset 0 1px 0 rgba(255,255,255,1); 
    display: flex; 
    flex-direction: column; 
    padding: 28px; 
}
@media(min-width: 768px) {
    .review-verdict-modern { flex-direction: row; gap: 40px; align-items: stretch; }
    .verdict-modern-header { margin-bottom: 0; flex: 1; padding-right: 24px; border-right: 1px solid #f1f5f9; display: flex; flex-direction: column; }
    .verdict-modern-body { flex: 1.5; }
}
.verdict-modern-header { margin-bottom: 24px; }
.verdict-modern-kicker { font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; display: block; }
.verdict-modern-title { font-size: 24px; font-weight: 900; color: #0f172a; margin: 0 0 12px 0; line-height: 1.2; letter-spacing: -0.01em; }
.verdict-modern-desc { font-size: 15px; line-height: 1.6; color: #475569; margin: 0; }

/* Author Bio inside Verdict */
.verdict-author-mini { display: flex; align-items: flex-start; gap: 12px; margin-top: auto; padding-top: 24px; }
.verdict-author-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.verdict-author-info { display: flex; flex-direction: column; }
.verdict-author-name { font-size: 14px; font-weight: 800; color: #0f172a; }
.verdict-author-role { font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 4px; }
.verdict-author-bio { font-size: 12px; line-height: 1.5; color: #64748b; margin: 0; }

.verdict-modern-body { display: flex; flex-direction: column; gap: 24px; }
.verdict-modern-bars { display: flex; flex-direction: column; gap: 12px; }
.modern-bar-item { display: flex; flex-direction: column; gap: 6px; }
.modern-bar-header { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: #334155; }
.modern-bar-track { height: 6px; background: #f1f5f9; border-radius: 999px; position: relative; overflow: hidden; }
.modern-bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--theme-accent, #059669); border-radius: 999px; }

.verdict-modern-score-action { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 12px; padding-top: 24px; border-top: 1px solid #f1f5f9; }
.modern-score-lockup { display: flex; align-items: baseline; gap: 4px; }
.modern-score-num { font-size: 40px; font-weight: 900; color: #0f172a; line-height: 1; letter-spacing: -0.02em; }
.modern-score-max { font-size: 16px; font-weight: 700; color: #94a3b8; }

/* Black Button with Gray Hover */
.btn-modern-verdict { background: #0f172a; color: #ffffff; font-size: 14px; font-weight: 700; padding: 12px 24px; border-radius: 8px; text-decoration: none; transition: background 0.2s, transform 0.2s; display: inline-flex; align-items: center; justify-content: center; }
.btn-modern-verdict:hover { background: #334155; transform: translateY(-1px); color: #ffffff; }

/* ── Reassurance & Decision Confirmation (Verdict Right Column) ── */
.verdict-modern-reassurance {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.verdict-reassurance-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-sizing: border-box;
}
.verdict-reassurance-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}
.verdict-reassurance-kicker {
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.verdict-reassurance-highlights {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.reassurance-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #334155;
}
.reassurance-check-icon {
    color: var(--theme-accent, #059669);
    flex-shrink: 0;
    margin-top: 2px;
}
.reassurance-tag-icon {
    color: #64748b;
    flex-shrink: 0;
    margin-top: 2px;
}
.reassurance-highlight-label {
    color: #0f172a;
    font-weight: 700;
}
.verdict-reassurance-action {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
}
.verdict-reassurance-action .btn-modern-verdict {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
.verdict-reassurance-note {
    display: none !important;
}


/* ==========================================================================
   HOMEPAGE HERO SECTION (TODAY'S HIGHLIGHT) — RESPONSIVE SYSTEM
   - Mode Tablette (768px - 1023px) : Maintien strict de la disposition 2 colonnes
     (1 Grand Article à gauche + 3 Articles latéraux empilés à droite)
   - Mode Mobile (<= 767px) : Bascule en 1 colonne avec harmonisation intégrale
     des 4 cartes (forme, taille et ratio d'image 16:9 100% identiques)
   ========================================================================== */

/* 1. Tablet Landscape & Portrait (768px - 1023px) — Balanced 2-Column Grid */
@media (min-width: 768px) and (max-width: 1023px) {
    .sec-inner-1100 .highlight-grid,
    .sec-inner-1120 .highlight-grid,
    .highlight-grid {
        display: grid !important;
        grid-template-columns: 1.05fr 0.95fr !important;
        gap: 16px !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Left Column: Featured Hero Post */
    .highlight-hero-col {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
    }
    .highlight-hero-col .bde-post-loop,
    .highlight-hero-col .bde-loop,
    .highlight-hero-col .bde-loop-item {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
    }
    .c-card-hero,
    .highlight-hero-card {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding: 0.75rem !important;
        border-radius: 0.875rem !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .c-card-hero__img-wrap,
    .hero-img-wrap,
    .highlight-hero-card .c-card-hero__img-wrap {
        width: 100% !important;
        aspect-ratio: 16 / 10 !important;
        max-height: 220px !important;
        min-height: 170px !important;
        border-radius: 0.625rem !important;
        overflow: hidden !important;
        position: relative !important;
        margin: 0 0 0.5rem 0 !important;
        flex-shrink: 0 !important;
    }
    .c-card-hero__img,
    .hero-img,
    .highlight-hero-card .c-card-hero__img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0.625rem !important;
    }
    .c-card-hero__content,
    .hero-content-wrap,
    .highlight-hero-card .c-card-hero__content {
        padding: 0 0.25rem 0.25rem 0.25rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
        flex: 1 1 auto !important;
    }
    .c-card-hero__title,
    .hero-title,
    .highlight-hero-card .hero-title {
        font-size: 16.5px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
        margin: 2px 0 4px 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .c-card-hero__excerpt,
    .hero-excerpt,
    .highlight-hero-card .hero-excerpt {
        font-size: 12.5px !important;
        color: #64748b !important;
        line-height: 1.45 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    /* Right Column: 3 Side Posts */
    .highlight-side-col {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
    }
    .highlight-side-col .bde-post-loop,
    .highlight-side-col .bde-loop {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .highlight-side-col .bde-loop-item {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .c-card-side,
    .side-article-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 86px !important;
        padding: 0.625rem !important;
        gap: 0.625rem !important;
        border-radius: 0.875rem !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }
    .c-card-side__thumb-wrap,
    .side-img-wrap,
    .highlight-side-col .c-card-side__thumb-wrap,
    .highlight-side-col .side-img-wrap {
        width: 115px !important;
        min-width: 115px !important;
        max-width: 115px !important;
        height: auto !important;
        min-height: 100% !important;
        aspect-ratio: 16 / 10 !important;
        border-radius: 0.5rem !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }
    .c-card-side__thumb,
    .side-img,
    .highlight-side-col .c-card-side__thumb,
    .highlight-side-col .side-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0.5rem !important;
        display: block !important;
    }
    .c-card-side__content,
    .side-content,
    .highlight-side-col .c-card-side__content {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 2px !important;
        overflow: hidden !important;
    }
    .c-card-side__meta,
    .side-meta,
    .highlight-side-col .c-card-side__meta {
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        line-height: 1.3 !important;
        margin: 0 0 2px 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        white-space: nowrap !important;
    }
    .c-card-side__title,
    .side-title,
    .highlight-side-col .c-card-side__title {
        font-size: 13px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        line-height: 1.25 !important;
        margin: 0 0 2px 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-decoration: none !important;
        word-break: break-word !important;
    }
    .c-card-side__excerpt,
    .side-excerpt,
    .highlight-side-col .c-card-side__excerpt {
        font-size: 11px !important;
        color: #64748b !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin: 0 !important;
    }
}

/* 2. Mobile Viewports (<= 767px) — 2x2 Grid (480px - 767px) & Unified Cards System */
@media (max-width: 767px) {
    .sec-highlight-pad {
        padding-top: 20px !important;
        padding-bottom: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* 2x2 Grid Layout for highlight-grid */
    .sec-inner-1100 .highlight-grid,
    .sec-inner-1120 .highlight-grid,
    .highlight-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
    }

    /* Dissolve all intermediate layout wrappers so all 4 loop items become direct grid children */
    .highlight-hero-col,
    .highlight-side-col,
    .highlight-hero-col .bde-post-loop,
    .highlight-hero-col .bde-loop,
    .highlight-side-col .bde-post-loop,
    .highlight-side-col .bde-loop,
    .highlight-grid > div,
    .highlight-grid > div > div,
    .highlight-grid > div > ul,
    .highlight-grid > div > div > .bde-loop,
    .highlight-grid > div > ul > .bde-loop {
        display: contents !important;
    }

    /* Loop items inside highlight-grid */
    .highlight-grid .bde-loop-item {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }

    /* ALL 4 CARDS (Card 1 Hero + Cards 2, 3, 4 Side) Unified Inset Architecture */
    .highlight-grid .c-card-hero,
    .highlight-grid .highlight-hero-card,
    .highlight-grid a.c-card-hero,
    .highlight-grid a.highlight-hero-card,
    .highlight-grid .c-card-side,
    .highlight-grid .side-article-card,
    .highlight-grid a.c-card-side,
    .highlight-grid a.side-article-card,
    .highlight-side-col .bde-loop-item .c-card-side,
    .highlight-side-col .bde-loop-item .side-article-card,
    .highlight-side-col .bde-loop-item a {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 0.875rem !important; /* 14px */
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        overflow: hidden !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
        padding: 0.625rem !important; /* 10px */
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    }

    .highlight-grid .c-card-hero:hover,
    .highlight-grid .c-card-side:hover {
        transform: translateY(-2px) !important;
        border-color: #cbd5e1 !important;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
    }

    /* Image Wrappers on ALL 4 cards: strictly identical 16:9 ratio, 10px rounded corners */
    .highlight-grid .c-card-hero__img-wrap,
    .highlight-grid .hero-img-wrap,
    .highlight-grid .c-card-side__thumb-wrap,
    .highlight-grid .side-img-wrap,
    .highlight-hero-card .c-card-hero__img-wrap,
    .highlight-side-col .c-card-side__thumb-wrap,
    .highlight-side-col .side-img-wrap {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 0.625rem !important; /* 10px */
        position: relative !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        margin: 0 0 0.5rem 0 !important;
        padding: 0 !important;
        background-color: #f1f5f9 !important;
    }

    /* Images on ALL 4 cards */
    .highlight-grid .c-card-hero__img,
    .highlight-grid .hero-img,
    .highlight-grid .c-card-side__thumb,
    .highlight-grid .side-img,
    .highlight-hero-card .c-card-hero__img,
    .highlight-side-col .c-card-side__thumb,
    .highlight-side-col .side-img {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 0.625rem !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Category / Format Badges on ALL 4 cards */
    .highlight-grid .c-card-hero__badge,
    .highlight-grid .hero-badge,
    .highlight-grid .c-card-side__badge,
    .highlight-grid .side-badge {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 10 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        color: #0f172a !important;
        font-size: 9.5px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        padding: 3px 7px !important;
        border-radius: 0.375rem !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    /* Content Containers on ALL 4 cards */
    .highlight-grid .c-card-hero__content,
    .highlight-grid .hero-content-wrap,
    .highlight-grid .c-card-side__content,
    .highlight-grid .side-content,
    .highlight-side-col .c-card-side__content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0.125rem 0.125rem 0.25rem 0.125rem !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        overflow: visible !important;
        flex: 1 1 auto !important;
    }

    /* Meta Rows (Date + Author) on ALL 4 cards */
    .highlight-grid .c-card-hero__meta,
    .highlight-grid .hero-meta,
    .highlight-grid .c-card-side__meta,
    .highlight-grid .side-meta,
    .highlight-side-col .c-card-side__meta {
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        margin: 0 0 2px 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* Titles on ALL 4 cards (2 lines clamped) */
    .highlight-grid .c-card-hero__title,
    .highlight-grid .hero-title,
    .highlight-grid .c-card-side__title,
    .highlight-grid .side-title,
    .highlight-side-col .c-card-side__title {
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
        margin: 0 0 3px 0 !important;
        padding: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-decoration: none !important;
        word-break: break-word !important;
    }

    .highlight-grid .c-card-hero:hover .c-card-hero__title,
    .highlight-grid .c-card-side:hover .c-card-side__title {
        color: #0284c7 !important;
    }

    /* Excerpts on ALL 4 cards (2 lines clamped) */
    .highlight-grid .c-card-hero__excerpt,
    .highlight-grid .hero-excerpt,
    .highlight-grid .c-card-side__excerpt,
    .highlight-grid .side-excerpt,
    .highlight-side-col .c-card-side__excerpt {
        font-size: 11.5px !important;
        color: #64748b !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        word-break: break-word !important;
    }

    .highlight-grid .c-card-hero__excerpt p,
    .highlight-grid .c-card-side__excerpt p,
    .highlight-grid .side-excerpt p {
        margin: 0 !important;
        padding: 0 !important;
        display: inline !important;
    }
}

/* 3. Compact Phones (<= 479px down to 320px) — 1-Column Stack with Same Identical Cards */
@media (max-width: 479px) {
    .sec-inner-1100 .highlight-grid,
    .sec-inner-1120 .highlight-grid,
    .highlight-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .highlight-grid .c-card-hero,
    .highlight-grid .highlight-hero-card,
    .highlight-grid a.c-card-hero,
    .highlight-grid a.highlight-hero-card,
    .highlight-grid .c-card-side,
    .highlight-grid .side-article-card,
    .highlight-grid a.c-card-side,
    .highlight-grid a.side-article-card {
        padding: 0.625rem !important;
    }

    .highlight-grid .c-card-hero__title,
    .highlight-grid .hero-title,
    .highlight-grid .c-card-side__title,
    .highlight-grid .side-title,
    .highlight-side-col .c-card-side__title {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    .highlight-grid .c-card-hero__excerpt,
    .highlight-grid .hero-excerpt,
    .highlight-grid .c-card-side__excerpt,
    .highlight-grid .side-excerpt,
    .highlight-side-col .c-card-side__excerpt {
        font-size: 12px !important;
    }

    .highlight-grid .c-card-hero__meta,
    .highlight-grid .hero-meta,
    .highlight-grid .c-card-side__meta,
    .highlight-grid .side-meta,
    .highlight-side-col .c-card-side__meta {
        font-size: 10px !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY SKIP LINK (.oxy-skip-link)
   ========================================================================== */
.bde-skip-link,
.oxy-skip-link {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    z-index: 999999 !important;
}
.bde-skip-link:focus,
.bde-skip-link:focus-visible,
.oxy-skip-link:focus,
.oxy-skip-link:focus-visible {
    left: 16px !important;
    top: 16px !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    overflow: visible !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.25), 0 2px 6px -1px rgba(15, 23, 42, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    outline: 2px solid #059669 !important;
    outline-offset: 2px !important;
    text-decoration: none !important;
}

/* ==========================================================================
   HOMEPAGE T1 — SECTION 5: READY TO DIVE DEEPER (MOBILE RESPONSIVENESS)
   ========================================================================== */
/* Tablet (768px - 1023px): Keep 2 columns side by side, compact sizing */
@media (min-width: 768px) and (max-width: 1023px) {
    .deeper-grid,
    .deeper-magazine-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .deeper-col {
        min-width: 0 !important;
    }
    .deeper-col-footer {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .deeper-cat-btn {
        white-space: normal !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 9px 12px !important;
    }
    .c-card-deeper-sub,
    .deeper-sub-card {
        padding: 8px 10px 8px 8px !important;
        gap: 10px !important;
    }
    .deeper-sub-thumb-wrap {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
    }
    .deeper-sub-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
}

/* Mobile (< 768px): Collapse to 1 column, full-width cards */
@media (max-width: 767px) {
    .deeper-grid,
    .deeper-magazine-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .deeper-col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .deeper-col .bde-loop-item,
    .deeper-col .bde-post-loop,
    .deeper-col .bde-loop {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .deeper-col-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 14px !important;
    }
    .deeper-cat-btn {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
        padding: 11px 14px !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
        box-sizing: border-box !important;
    }
    .c-card-deeper-sub,
    .deeper-sub-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 8px 12px 8px 8px !important;
        gap: 12px !important;
    }
    .deeper-sub-content {
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 0 !important;
        overflow: hidden !important;
    }
    .deeper-sub-title {
        white-space: normal !important;
        word-break: break-word !important;
    }
}

@media (max-width: 480px) {
    .c-card-deeper-sub,
    .deeper-sub-card {
        padding: 8px 10px 8px 8px !important;
        gap: 10px !important;
        border-radius: 10px !important;
    }
    .deeper-sub-thumb-wrap {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
        border-radius: 7px !important;
    }
    .deeper-sub-thumb {
        border-radius: 7px !important;
    }
    .deeper-sub-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    .deeper-sub-meta {
        font-size: 10px !important;
    }
    .deeper-cat-btn {
        padding: 10px 12px !important;
        font-size: 10.5px !important;
    }
}




/* ==========================================================================
   SESSION 20 — ÉTAPE 5 : TEMPLATES T5 & T6 (SINGLE REVIEWS & ARTICLES)
   - Mobile & Tablet Responsive Audit & Polishing
   - 70/30 Column Layout to Single Column Adaptation (< 992px)
   - Double Padding Removal on .article-prose-container
   - In-Article Mid CTA Stacking (< 640px)
   - Sticky Conversion Bar Tactile & Compact Smartphone Hardening (< 640px / < 440px / < 360px)
   - Swiss Pros & Cons Container Mobile Padding & 2x2 Specs Grid
   - Decision Card & Modern Verdict Mobile Hardening
   - Alternatives & Further Reading Single-Column Grids
   ========================================================================== */

/* 1. 70/30 DOUBLE COLUMN -> SINGLE COLUMN RESPONSIVE ADAPTATION */
.review-sidebar-layout-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.review-sidebar-layout-main,
.review-sidebar-layout-side {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Eliminate double padding inside .review-sidebar-layout-main */
.review-sidebar-layout-main .article-prose-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 992px) {
    .review-sidebar-layout-wrap {
        flex-direction: row !important;
        gap: 3rem !important;
        align-items: flex-start !important;
    }
    .review-sidebar-layout-main {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
    }
    .review-sidebar-layout-side {
        width: 320px !important;
        max-width: 320px !important;
        min-width: 320px !important;
        flex-shrink: 0 !important;
        position: sticky !important;
        top: 96px !important;
    }
}

@media (max-width: 991px) {
    .sidebar-related-wrap {
        margin-top: 1.5rem !important;
        padding-top: 1.5rem !important;
        border-top: 1px solid #e2e8f0 !important;
    }
    .sidebar-related-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    .sidebar-related-card {
        width: 100% !important;
    }
}

/* 2. IN-ARTICLE MID CTA RESPONSIVE STACKING */
@media (max-width: 640px) {
    .review-mid-article-cta-compact {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.875rem !important;
        padding: 1.125rem 1.25rem !important;
        margin: 1.75rem 0 !important;
        border-radius: 0.875rem !important;
    }
    .mid-cta-compact-left {
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.625rem !important;
    }
    .mid-cta-compact-text {
        font-size: 13.5px !important;
        line-height: 1.45 !important;
    }
    .mid-cta-compact-right {
        width: 100% !important;
    }
    .btn-mid-cta-compact {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.625rem 1rem !important;
        font-size: 11.5px !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* 3. SINGLE ARTICLE T6 HEADER & PROSE POLISHING */
@media (max-width: 768px) {
    .article-header-col-title {
        font-size: clamp(1.5rem, 5.5vw, 2.25rem) !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
        margin-bottom: 0.75rem !important;
    }
    .article-header-col-meta {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        row-gap: 0.25rem !important;
        column-gap: 0.5rem !important;
        margin-bottom: 1.125rem !important;
        font-size: 12.5px !important;
    }
    .article-header-col-img-wrap {
        margin-bottom: 1.5rem !important;
    }
    .article-header-col-img {
        border-radius: 0.625rem !important;
    }
}

/* 4. FURTHER READING (T6) & ALTERNATIVES (T5) GRIDS ON MOBILE */
.review-alt-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

@media (max-width: 640px) {
    .related-grid-3cols {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    .related-grid-item {
        width: 100% !important;
    }
    .related-card-item {
        border-radius: 0.875rem !important;
    }
    .review-alts-grid,
    .review-alt-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    .review-alt-item {
        width: 100% !important;
    }
    .review-alt-card {
        padding: 1.125rem 1rem !important;
        border-radius: 1rem !important;
    }
}

@media (max-width: 380px) {
    .review-alt-card {
        padding: 1rem 0.875rem !important;
    }
}

/* 5. STICKY CONVERSION BAR ROBUST MOBILE HARDENING */
.sticky-bar-price {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sticky-bar-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 640px) {
    .review-sticky-bar {
        display: none !important;
    }
}

@media (max-width: 440px) {
    .sticky-bar-inner {
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px !important;
        gap: 0.5rem !important;
    }
    .sticky-bar-left {
        gap: 0.5rem !important;
    }
    .sticky-bar-thumb-wrap {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
    .sticky-bar-title {
        font-size: 12.5px !important;
        max-width: 110px !important;
    }
    .sticky-bar-score {
        font-size: 11px !important;
        padding: 1px 4px !important;
    }
    .sticky-bar-price {
        font-size: 11px !important;
    }
    .btn-sticky-cta {
        font-size: 11.5px !important;
        padding: 0.45rem 0.65rem !important;
        letter-spacing: -0.01em !important;
    }
}

@media (max-width: 360px) {
    .sticky-bar-inner {
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)) 8px !important;
        gap: 0.375rem !important;
    }
    .sticky-bar-thumb-wrap {
        display: none !important;
    }
    .sticky-bar-title {
        font-size: 12px !important;
        max-width: 95px !important;
    }
    .sticky-bar-score small {
        display: none !important;
    }
    .btn-sticky-cta {
        font-size: 11px !important;
        padding: 0.4rem 0.55rem !important;
    }
}

/* 6. SWISS PROS & CONS CARD RESPONSIVE SYSTEM */
@media (max-width: 768px) {
    .swiss-top-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    .swiss-pros-half {
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    .swiss-target-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    .swiss-target-ideal {
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
}

@media (max-width: 640px) {
    .swiss-container {
        border-radius: 1rem !important;
    }
    .swiss-half {
        padding: 1.25rem 1rem !important;
    }
    .swiss-target-col {
        padding: 1.125rem 1rem !important;
    }
    .swiss-specs-strip {
        padding: 14px 16px !important;
    }
    .swiss-header {
        margin-bottom: 1rem !important;
        padding-bottom: 0.625rem !important;
    }
    .swiss-index {
        font-size: 20px !important;
    }
    .swiss-heading {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .swiss-specs-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem 1rem !important;
    }
    .spec-strip-label {
        font-size: 9px !important;
    }
    .spec-strip-val {
        font-size: 13px !important;
    }
    .swiss-half {
        padding: 1.125rem 0.875rem !important;
    }
    .swiss-target-col {
        padding: 1rem 0.875rem !important;
    }
    .swiss-item {
        gap: 0.625rem !important;
    }
    .swiss-text {
        font-size: 13.5px !important;
        line-height: 1.45 !important;
    }
    .swiss-bullet {
        font-size: 13px !important;
    }
    .swiss-target-header {
        margin-bottom: 0.2rem !important;
    }
    .swiss-target-label {
        font-size: 10px !important;
    }
    .swiss-target-text {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
}

@media (max-width: 340px) {
    .swiss-specs-grid {
        grid-template-columns: 1fr !important;
        gap: 0.625rem !important;
    }
}

/* 7. DECISION CARD & FINAL VERDICT BOX MOBILE HARDENING */
@media (max-width: 640px) {
    .review-decision-card {
        padding: 1.25rem 1rem !important;
        border-radius: 1rem !important;
        margin: 1rem auto 1.5rem auto !important;
    }
    .decision-verdict-title {
        font-size: 17px !important;
    }
    .decision-verdict-text {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }
    .btn-decision-primary-cta {
        padding: 0.6875rem 1rem !important;
        font-size: 11.5px !important;
    }
    .review-verdict-modern {
        padding: 20px 16px !important;
        border-radius: 1rem !important;
        margin: 28px auto !important;
    }
    .verdict-modern-title {
        font-size: 20px !important;
    }
    .verdict-modern-desc {
        font-size: 14px !important;
    }
}

@media (max-width: 540px) {
    .verdict-modern-score-action {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding-top: 18px !important;
    }
    .modern-score-lockup {
        justify-content: center !important;
    }
    .btn-modern-verdict {
        width: 100% !important;
        text-align: center !important;
        padding: 11px 20px !important;
        font-size: 13.5px !important;
    }
}

@media (max-width: 380px) {
    .review-decision-card {
        padding: 1rem 0.875rem !important;
    }
    .decision-logo-box {
        width: 48px !important;
        height: 48px !important;
    }
    .decision-score-num {
        font-size: 32px !important;
    }
    .review-verdict-modern {
        padding: 16px 12px !important;
    }
    .modern-score-num {
        font-size: 34px !important;
    }
}

/* 8. VS HEADER CARD MOBILE HARDENING */
@media (max-width: 640px) {
    .vs-header-card {
        padding: 1rem 0.875rem !important;
        border-radius: 1rem !important;
        margin: 1rem auto 1.75rem auto !important;
    }
    .vs-card {
        padding: 1.125rem 1rem !important;
    }
    .vs-card-name {
        font-size: 17px !important;
    }
}

@media (max-width: 380px) {
    .vs-header-card {
        padding: 1rem 0.875rem !important;
    }
    .vs-card {
        padding: 1rem 0.875rem !important;
    }
}

/* ==========================================================================
   SESSION 20 POLISHING: UNIFIED RECOMMENDATION CARDS, HOMEPAGE HOVER & RESPONSIVE SIDEBAR
   ========================================================================== */

/* 1. VERSUS EDITORIAL VERDICT BOX (Clean Styling, No Emoji) */
.vs-verdict-box {
    margin-top: 1.5rem !important;
    padding: 1.125rem 1.375rem !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    box-sizing: border-box !important;
    display: block !important;
}

.vs-verdict-text {
    margin: 0 !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    color: #334155 !important;
}

.vs-verdict-text strong {
    color: #0f172a !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.06em !important;
    margin-right: 0.375rem !important;
}

/* 2. UNIFIED RECOMMENDATION CARDS (T5 Review Alternatives & T6 Related Articles) */
/* Container: Modern White Inset Capsule with Padding around Image */
.c-card-review-item,
a.c-card-review-item,
.related-card-item,
a.related-card-item,
.review-alt-card {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    padding: 0.75rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
    transform: none !important;
}

/* Grid Items & Wrappers Full Height Stretch */
.review-alts-grid .review-alt-item,
.related-grid-3cols .related-grid-item,
.c-card-review-item-wrap,
.related-article-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Thumbnail Wrap: Rounded Inset with 16:9 Aspect Ratio */
.review-thumb-wrap,
.related-thumb-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
    border-radius: 0.625rem !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
    border: none !important;
    flex-shrink: 0 !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    transform: translateZ(0) !important;
    box-sizing: border-box !important;
}

/* Thumbnail Image: Smooth Zoom Transition */
.review-thumb-img,
.related-thumb-img,
.review-thumb-wrap img,
.related-thumb-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0.625rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Badges (Category & Review Score) — Strict Pill Capsule Geometry */
.review-badge-cat,
.related-badge-cat {
    position: absolute !important;
    top: 10px !important;
    bottom: auto !important;
    left: 10px !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100% - 65px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    color: #0f172a !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.review-badge-score {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    z-index: 2 !important;
    background: rgba(15, 23, 42, 0.92) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    color: #ffffff !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

@media (max-width: 480px) {
    .review-badge-cat,
    .related-badge-cat {
        top: 8px !important;
        bottom: auto !important;
        left: 8px !important;
        right: auto !important;
        height: auto !important;
        max-height: 22px !important;
        max-width: calc(100% - 60px) !important;
        font-size: 9.5px !important;
        padding: 0.2rem 0.45rem !important;
    }
    .review-badge-score {
        top: 8px !important;
        bottom: auto !important;
        right: 8px !important;
        left: auto !important;
        height: auto !important;
        max-height: 22px !important;
        font-size: 9.5px !important;
        padding: 0.2rem 0.45rem !important;
    }
}

@media (max-width: 360px) {
    .review-badge-cat,
    .related-badge-cat {
        top: 8px !important;
        bottom: auto !important;
        left: 8px !important;
        right: auto !important;
        height: auto !important;
        max-height: 20px !important;
        max-width: calc(100% - 55px) !important;
        font-size: 9px !important;
        padding: 0.15rem 0.375rem !important;
    }
    .review-badge-score {
        top: 8px !important;
        bottom: auto !important;
        right: 8px !important;
        left: auto !important;
        height: auto !important;
        max-height: 20px !important;
        font-size: 9px !important;
        padding: 0.15rem 0.375rem !important;
    }
}

/* Card Body & Typography Equalization */
.review-card-body,
.related-card-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    gap: 0.375rem !important;
    padding: 0.125rem 0.25rem 0.25rem 0.25rem !important;
    box-sizing: border-box !important;
}

.review-card-meta,
.related-card-meta {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.review-card-author {
    color: #64748b !important;
    font-weight: 700 !important;
}

/* Titles: Clean Compact 2 Lines Max */
.c-card-review-item .review-card-title,
.review-card-title,
.related-card-title {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    min-height: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border: none !important;
    transition: color 0.15s ease !important;
}

/* Excerpts: Compact 2 Lines Max, Natural Spacing Without Void */
.c-card-review-item .review-card-excerpt,
.review-card-excerpt,
.related-card-excerpt {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #64748b !important;
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: none !important;
    border: none !important;
}

.c-card-review-item .review-card-excerpt p,
.review-card-excerpt p,
.related-card-excerpt p {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #64748b !important;
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* 3. HOMEPAGE-PARITY HOVER EFFECTS (Soft Elevation Option 1, Scale 1.04, Black Pure Title) */
.c-card-review-item:hover,
a.c-card-review-item:hover,
.related-card-item:hover,
a.related-card-item:hover,
.review-alt-card:hover {
    border-color: #e2e8f0 !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03) !important;
    transform: none !important;
    text-decoration: none !important;
}

.c-card-review-item:hover .review-thumb-img,
.c-card-review-item:hover .related-thumb-img,
.related-card-item:hover .related-thumb-img,
.related-card-item:hover .review-thumb-img {
    transform: scale(1.04) !important;
}

.c-card-review-item:hover .review-card-title,
.related-card-item:hover .related-card-title,
.review-card-title:hover,
.related-card-title:hover {
    color: #000000 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 4. SIDEBAR "YOU MAY ALSO LIKE" RESPONSIVE SCALING (< 992px) */
@media (max-width: 991px) {
    .sidebar-related-wrap {
        margin-top: 2.25rem !important;
        padding-top: 2rem !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    .sidebar-related-title {
        font-size: 14px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        color: #64748b !important;
        margin: 0 0 1.25rem 0 !important;
    }

    .sidebar-related-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.875rem !important;
    }

    .sidebar-related-card {
        width: 100% !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 0.875rem !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    .sidebar-related-card:hover {
        border-color: #e2e8f0 !important;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
        transform: none !important;
    }

    .sidebar-related-card.no-thumb {
        padding: 1.125rem 1.25rem !important;
        gap: 0.375rem !important;
    }

    .sidebar-related-card.has-thumb {
        padding: 0.875rem 1.125rem !important;
        gap: 1rem !important;
    }

    .sidebar-related-thumb {
        width: 64px !important;
        height: 64px !important;
        border-radius: 0.625rem !important;
        background-color: #f1f5f9 !important;
        flex-shrink: 0 !important;
    }

    .sidebar-related-cat {
        font-size: 11px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        color: var(--theme-accent, #059669) !important;
        letter-spacing: 0.06em !important;
    }

    .sidebar-related-name {
        margin: 0 !important;
        font-size: 15.5px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.4 !important;
    }

    .sidebar-related-card:hover .sidebar-related-name {
        color: #000000 !important;
    }

    .sidebar-related-meta {
        font-size: 12.5px !important;
        color: #64748b !important;
        margin-top: 3px !important;
    }

    .sidebar-related-score {
        font-size: 12.5px !important;
        font-weight: 700 !important;
        color: #64748b !important;
    }
}

@media (max-width: 480px) {
    .sidebar-related-card.no-thumb {
        padding: 1rem 1.125rem !important;
    }

    .sidebar-related-card.has-thumb {
        padding: 0.75rem 1rem !important;
        gap: 0.875rem !important;
    }

    .sidebar-related-thumb {
        width: 58px !important;
        height: 58px !important;
    }

    .sidebar-related-name {
        font-size: 14.5px !important;
    }
}


/* ==========================================================================
   FOOTER GLOBAL RESPONSIVE POLISHING (< 991px, < 640px, < 380px)
   Session 20 Étape 6 — Clean 2-Col Tablet, 1-Col Mobile, Fluid Rhythm
   ========================================================================== */
@media (max-width: 991px) {
    .c-footer,
    footer.c-footer,
    .site-footer {
        padding: 3rem 1.5rem 2rem !important;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2.5rem 2rem !important;
    }
}

@media (max-width: 640px) {
    .c-footer,
    footer.c-footer,
    .site-footer {
        padding: 2.5rem 1.25rem 1.75rem !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2.25rem !important;
    }

    .footer-col {
        gap: 10px !important;
    }

    .footer-logo-img {
        height: 26px !important;
    }

    .footer-desc {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
        max-width: 480px !important;
    }

    .footer-socials {
        gap: 10px !important;
        margin-top: 6px !important;
        flex-wrap: wrap !important;
    }

    .social-icon-link {
        width: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
    }

    .footer-lang-buttons {
        gap: 10px !important;
    }

    .footer-col-title {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .footer-links-list {
        gap: 10px !important;
    }

    .footer-link {
        font-size: 14px !important;
        padding: 4px 0 !important;
        min-height: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .footer-contact-desc {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        max-width: 480px !important;
    }

    .footer-contact-btn {
        width: 100% !important;
        max-width: 240px !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 0.625rem 1.25rem !important;
        font-size: 14px !important;
        margin-top: 8px !important;
    }

    .c-footer > .oxy-container > .oxy-container:last-child,
    .c-footer > div > div:last-child,
    .footer-bottom {
        margin-top: 2rem !important;
        padding-top: 1.25rem !important;
        gap: 0.625rem !important;
    }

    .footer-disclaimer,
    p.footer-disclaimer {
        font-size: 12px !important;
        line-height: 1.65 !important;
    }

    .footer-copyright,
    p.footer-copyright {
        font-size: 11.5px !important;
    }
}

@media (max-width: 380px) {
    .c-footer,
    footer.c-footer,
    .site-footer {
        padding: 2rem 1rem 1.5rem !important;
    }

    .footer-grid {
        gap: 1.875rem !important;
    }

    .footer-logo-img {
        height: 24px !important;
    }

    .footer-contact-btn {
        max-width: 100% !important;
    }
}


/* ==========================================================================
   STATIC & LEGAL PAGES RESPONSIVE POLISHING (T7 — Contact, About, Terms, Privacy)
   Session 20 Étape 6 — BitForms, Clean Prose, Card Contained, Zero Overflow
   ========================================================================== */

/* 1. Universal Layout & Fluid Spacing */
.contact-page-section,
.about-hero-section,
.about-why-section,
.about-values-section,
.about-methodology-section,
.about-team-section,
.about-cta-section,
.legal-page-section {
    background-color: var(--bg-page, #F5F5F5) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.contact-page-section {
    padding: var(--sec-pad-mid-top, 2.5rem) 1.25rem var(--sec-pad-mid-bottom, 3rem) !important;
}

.legal-page-section {
    padding: var(--sec-pad-mid-top, 2.5rem) 1.25rem var(--sec-pad-mid-bottom, 3.5rem) !important;
}

.about-hero-section {
    padding: var(--sec-pad-hero-top, 3rem) 1.25rem var(--sec-pad-hero-bottom, 1.5rem) !important;
}

.about-why-section,
.about-values-section,
.about-methodology-section,
.about-team-section {
    padding: var(--sec-pad-grid-top, 1.5rem) 1.25rem var(--sec-pad-grid-bottom, 2.25rem) !important;
}

.about-cta-section {
    padding: var(--sec-pad-mid-top, 2.5rem) 1.25rem var(--sec-pad-mid-bottom, 3.5rem) !important;
}

/* 2. Contact Page Grid & Bit Form Polishing */
.contact-container {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.contact-header {
    margin-bottom: 2rem !important;
}

.contact-title {
    font-size: clamp(1.85rem, 5vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
    margin: 0 0 0.75rem 0 !important;
}

.contact-subtitle {
    font-size: clamp(0.95rem, 2vw, 1.1rem) !important;
    line-height: 1.65 !important;
    color: #64748b !important;
    margin: 0 !important;
    max-width: 680px !important;
}

.contact-grid {
    display: grid !important;
    grid-template-columns: 1fr 340px !important;
    gap: 2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
}

.contact-form-column {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    padding: 2.25rem 2rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
}

/* Bit Form Inputs & Polish */
.contact-form-column input[type="text"],
.contact-form-column input[type="email"],
.contact-form-column textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.5rem !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.contact-form-column input[type="text"]:focus,
.contact-form-column input[type="email"]:focus,
.contact-form-column textarea:focus {
    border-color: var(--theme-accent, #059669) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15) !important;
}

.contact-form-column textarea {
    min-height: 130px !important;
    resize: vertical !important;
}

.contact-form-column .bf-label,
.contact-form-column label.bf-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.contact-form-column .bf-button,
.contact-form-column button[type="submit"] {
    width: 100% !important;
    background-color: #020617 !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 14px 24px !important;
    border-radius: 0.5rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    box-sizing: border-box !important;
}

.contact-form-column .bf-button:hover,
.contact-form-column button[type="submit"]:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
    transform: none !important;
}

/* Contact Sidebar */
.contact-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
}

.contact-info-card,
.contact-notice-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
}

.contact-info-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 6px 0 !important;
}

.contact-info-desc {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #64748b !important;
    margin: 0 0 14px 0 !important;
}

.contact-info-link {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--theme-accent, #059669) !important;
    text-decoration: none !important;
    word-break: break-all !important;
    transition: color 0.15s ease !important;
}

.contact-info-link:hover {
    color: var(--theme-accent-hover, #047857) !important;
    text-decoration: underline !important;
}

.contact-notice-text {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
    margin: 0 !important;
}

.contact-notice-text strong {
    color: #0f172a !important;
    font-weight: 700 !important;
}

@media (max-width: 860px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 1.75rem !important;
    }
}

@media (max-width: 640px) {
    .contact-page-section {
        padding: 2rem 1rem 2.5rem !important;
    }

    .contact-form-column {
        padding: 1.5rem 1.25rem !important;
    }

    .contact-info-card,
    .contact-notice-box {
        padding: 1.25rem !important;
    }
}

@media (max-width: 380px) {
    .contact-form-column {
        padding: 1.25rem 1rem !important;
        border-radius: 0.75rem !important;
    }
}

/* 3. About Page Grids & Mobile Polish */
.about-container-text {
    width: 100% !important;
    max-width: 780px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.about-container-wide {
    width: 100% !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.about-hero-title {
    font-size: clamp(2rem, 5.5vw, 2.75rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.025em !important;
    line-height: 1.15 !important;
    margin: 0 0 1rem 0 !important;
}

.about-hero-lead {
    font-size: clamp(1rem, 2.5vw, 1.15rem) !important;
    color: #64748b !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

.about-section-title {
    font-size: clamp(1.5rem, 4vw, 1.85rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
    margin: 0 0 1.5rem 0 !important;
}

.about-why-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2rem !important;
}

.about-values-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.125rem !important;
    align-items: stretch !important;
}

.about-value-card {
    height: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    padding: 1.5rem 1.125rem !important;
    box-sizing: border-box !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.about-value-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07) !important;
    transform: none !important;
}

.about-method-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    padding: 1.25rem 1.5rem !important;
    box-sizing: border-box !important;
}

.about-team-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    padding: 2rem 1.5rem !important;
    max-width: 580px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

@media (max-width: 991px) {
    .about-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }
}

@media (max-width: 640px) {
    .about-why-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .about-values-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .about-value-card {
        padding: 1.25rem !important;
    }

    .about-method-item {
        padding: 1.125rem 1.25rem !important;
    }

    .about-cta-btns {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.75rem !important;
    }

    .about-btn-primary,
    .about-btn-secondary {
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: center !important;
    }
}

/* 4. Legal Pages (Terms & Privacy) Polish */
.legal-container {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.legal-header {
    text-align: center !important;
    margin-bottom: 2.25rem !important;
}

.legal-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: #ecfdf5 !important;
    color: var(--theme-text, #065f46) !important;
    border: 1px solid var(--theme-border, #a7f3d0) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 4px 14px !important;
    border-radius: 9999px !important;
    margin-bottom: 1rem !important;
}

.legal-title {
    font-size: clamp(1.85rem, 5.5vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
    margin: 0 0 0.75rem 0 !important;
    word-break: break-word !important;
}

.legal-meta {
    font-size: 13.5px !important;
    color: #64748b !important;
    margin-bottom: 1rem !important;
}

.legal-intro {
    font-size: clamp(0.95rem, 2.2vw, 1.1rem) !important;
    color: #475569 !important;
    line-height: 1.65 !important;
    max-width: 740px !important;
    margin: 0 auto !important;
}

.legal-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.875rem !important;
    padding: 2.75rem 3rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
}

.legal-section + .legal-section {
    margin-top: 2.25rem !important;
    padding-top: 2rem !important;
    border-top: 1px solid #f1f5f9 !important;
}

.legal-h2 {
    font-size: clamp(1.2rem, 3vw, 1.35rem) !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 0.875rem 0 !important;
    line-height: 1.35 !important;
}

.legal-h3 {
    font-size: clamp(1.05rem, 2.5vw, 1.15rem) !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 1.25rem 0 0.5rem 0 !important;
    line-height: 1.4 !important;
}

.legal-section p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #334155 !important;
    margin: 0 0 0.875rem 0 !important;
}

.legal-section ul {
    padding-left: 1.25rem !important;
    margin: 0.75rem 0 1rem 0 !important;
}

.legal-section li {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #334155 !important;
    margin-bottom: 0.5rem !important;
}

.legal-section a {
    color: var(--theme-accent, #059669) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.legal-callout-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 3px solid var(--theme-accent, #059669) !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    padding: 1.125rem 1.375rem !important;
    margin-top: 1.5rem !important;
}

.legal-callout-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 0.375rem 0 !important;
}

@media (max-width: 768px) {
    .legal-card {
        padding: 2rem 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .legal-page-section {
        padding: 2rem 1rem 2.5rem !important;
    }

    .legal-card {
        padding: 1.5rem 1.125rem !important;
        border-radius: 0.75rem !important;
    }

    .legal-section + .legal-section {
        margin-top: 1.75rem !important;
        padding-top: 1.5rem !important;
    }
}

@media (max-width: 380px) {
    .legal-card {
        padding: 1.25rem 0.875rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. PILLAR ROUND-UP TEMPLATE ARCHITECTURE (WIRECUTTER / EVS STANDARD)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Global Smooth Scrolling & Scroll Margin */
html {
    scroll-behavior: smooth !important;
}

.roundup-tool-card,
.roundup-tool-h2,
[id^="tool-"],
.sec-roundup-matrix,
.sec-roundup-guide,
.sec-roundup-list,
.sec-roundup-faq {
    scroll-margin-top: 110px !important;
}

/* ── 1. Sub-Hub Best Hero Section (Harmonized with Reviews, Guides & News) ── */
.sec-roundup-hero,
.sec-best-hero {
    padding-top: var(--sec-pad-hero-top, clamp(1.75rem, 3vw, 2.75rem)) !important;
    padding-bottom: var(--sec-pad-hero-bottom, clamp(1rem, 1.8vw, 1.5rem)) !important;
    width: 100% !important;
    overflow-x: clip !important;
}

.best-hero-inner,
.best-hero-header-wrap {
    max-width: 860px !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.best-badges-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.875rem !important;
}

.best-badge-emerald {
    color: var(--theme-accent, #059669) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.best-badge-neutral {
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.best-badge-neutral::before {
    content: "\2022" !important;
    margin-right: 0.5rem !important;
    color: #cbd5e1 !important;
    font-weight: 800 !important;
}

.best-hero-h1 {
    font-size: clamp(28px, 4.2vw, 48px) !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    letter-spacing: -0.03em !important;
    line-height: 1.15 !important;
    margin: 0 0 0.875rem 0 !important;
    text-align: center !important;
}

.best-hero-h1-accent {
    color: var(--theme-accent, #059669) !important;
}

.best-hero-sub {
    font-size: clamp(14px, 1.8vw, 16px) !important;
    color: #475569 !important;
    max-width: 680px !important;
    margin: 0 auto 1.25rem auto !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    text-align: center !important;
}

.best-hero-meta-line {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin: 0 auto !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

/* ── 2. Common Section Header Typography ── */
.roundup-kicker {
    display: inline-block !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--theme-accent, #059669) !important;
    margin-bottom: 0.35rem !important;
}

.roundup-section-h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
    font-weight: 800 !important;
    color: #020617 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
    margin: 0 0 0.5rem 0 !important;
}

.roundup-section-sub {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #64748b !important;
    margin: 0 0 1.5rem 0 !important;
    max-width: 760px !important;
}

/* ── 3. Comparison Matrix Table ── */
.sec-roundup-matrix {
    padding-top: var(--sec-pad-mid-top, clamp(1.5rem, 2.5vw, 2.25rem)) !important;
    padding-bottom: var(--sec-pad-mid-bottom, clamp(1.75rem, 3vw, 2.75rem)) !important;
}

.roundup-matrix-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
}

.roundup-matrix-scroll-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.roundup-matrix-table {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: left !important;
    font-size: 0.875rem !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    min-width: 780px !important;
}

.roundup-matrix-table th {
    padding: 14px 18px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    white-space: nowrap !important;
}

.roundup-matrix-table td {
    padding: 16px 18px !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

.roundup-matrix-table tbody tr {
    transition: background-color 0.15s ease !important;
}

.roundup-matrix-table tbody tr:hover {
    background-color: #f8fafc !important;
}



.roundup-matrix-tool-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    color: inherit !important;
}

.roundup-matrix-logo-box {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.roundup-matrix-logo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 2px !important;
}

.roundup-matrix-logo-fallback {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.roundup-matrix-tool-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.roundup-matrix-tool-name {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 0.95rem !important;
    transition: color 0.15s ease !important;
}

.roundup-matrix-tool-link:hover .roundup-matrix-tool-name {
    color: var(--theme-accent, #059669) !important;
}



.roundup-matrix-strength {
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
    color: #475569 !important;
    max-width: 250px !important;
    display: block !important;
}

.roundup-matrix-price {
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    font-size: 0.875rem !important;
}

.roundup-matrix-score-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.roundup-matrix-score-num {
    font-weight: 800 !important;
    font-size: 1rem !important;
    color: #020617 !important;
}

.roundup-matrix-score-tier { font-size: 0.75rem !important; font-weight: 600 !important; color: #64748b !important; background: transparent !important; border: none !important; padding: 0 !important; }

.roundup-matrix-btn-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.btn-matrix-anchor {
    display: inline-flex !important;
    align-items: center !important;
    padding: 7px 11px !important;
    border-radius: 6px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    border: 1px solid #e2e8f0 !important;
}

.btn-matrix-anchor:hover {
    background: #e2e8f0 !important;
    color: #020617 !important;
}

.btn-matrix-visit {
    display: inline-flex !important;
    align-items: center !important;
    padding: 7px 13px !important;
    border-radius: 6px !important;
    background: #0f172a !important;
    border: 1px solid #0f172a !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.btn-matrix-visit:hover {
    background: #1e293b !important;
    border-color: #1e293b !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
}

/* ── 4. Buying Criteria Guide ── */
.sec-roundup-guide {
    padding-top: var(--sec-pad-mid-top, clamp(1.5rem, 2.5vw, 2.25rem)) !important;
    padding-bottom: var(--sec-pad-mid-bottom, clamp(1.75rem, 3vw, 2.75rem)) !important;
}

.roundup-guide-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 1.25rem !important;
}

.roundup-guide-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.roundup-guide-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 1rem !important;
}

.roundup-guide-icon-box {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    background-color: var(--theme-bg, #ecfdf5) !important;
    color: var(--theme-accent, #059669) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.roundup-guide-num {
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.05em !important;
}

.roundup-guide-card-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #020617 !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.35 !important;
}

.roundup-guide-card-desc {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin: 0 !important;
}

/* ── 5. Product Mini-Reviews List & Sticky TOC ── */
.sec-roundup-list {
    padding-top: var(--sec-pad-mid-top, clamp(1.5rem, 2.5vw, 2.25rem)) !important;
    padding-bottom: var(--sec-pad-mid-bottom, clamp(1.75rem, 3vw, 2.75rem)) !important;
}

.roundup-layout-wrap {
    display: grid !important;
    grid-template-columns: 1fr 260px !important;
    gap: 2.25rem !important;
    align-items: start !important;
}

@media (max-width: 1199px) {
    .roundup-layout-wrap {
        grid-template-columns: 1fr !important;
    }
    .roundup-toc-sidebar {
        display: none !important;
    }
}

/* Sticky TOC Sidebar */
.roundup-toc-sidebar {
    position: sticky !important;
    top: 110px !important;
    max-height: calc(100vh - 130px) !important;
    overflow-y: auto !important;
    z-index: 10 !important;
}

.roundup-toc-card {
    background: #ffffff !important;
    border-radius: 1.25rem !important;
    padding: 1.125rem 1.5rem !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.roundup-toc-sidebar .review-toc-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: default !important;
}

.roundup-toc-sidebar .review-toc-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
}

.roundup-toc-sidebar .review-toc-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 0.5rem !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.roundup-toc-sidebar .review-toc-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.roundup-toc-sidebar .review-toc-count {
    font-size: 11px !important;
    font-weight: 800 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    padding: 2px 0.5rem !important;
    border-radius: 6.1875rem !important;
}

.roundup-toc-sidebar .review-toc-nav {
    margin-top: 0.875rem !important;
    padding-top: 0.875rem !important;
    border-top: 1px solid #f1f5f9 !important;
}

.roundup-toc-sidebar .review-toc-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem !important;
}

.roundup-toc-sidebar .review-toc-item {
    margin: 0 !important;
}

.roundup-toc-sidebar .review-toc-link {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 0.5rem !important;
    color: #475569 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transition: color 0.15s ease, transform 0.15s ease, font-weight 0.15s ease !important;
}

.roundup-toc-sidebar .review-toc-link:hover {
    color: #0f172a !important;
    font-weight: 700 !important;
    background: transparent !important;
    transform: translateX(2px) !important;
}

.roundup-toc-sidebar .review-toc-link.is-active,
.roundup-toc-sidebar .review-toc-item.is-active > .review-toc-link {
    color: #0f172a !important;
    font-weight: 800 !important;
    background: transparent !important;
    transform: translateX(3px) !important;
}

.roundup-toc-sidebar .review-toc-link.is-active .review-toc-num,
.roundup-toc-sidebar .review-toc-item.is-active .review-toc-num {
    color: #0f172a !important;
    font-weight: 900 !important;
}

.roundup-toc-sidebar .review-toc-link.is-active .review-toc-text,
.roundup-toc-sidebar .review-toc-item.is-active .review-toc-text {
    color: #0f172a !important;
    font-weight: 800 !important;
}

.roundup-toc-sidebar .review-toc-num {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
    font-variant-numeric: tabular-nums !important;
}

.roundup-toc-sidebar .review-toc-text {
    line-height: 1.4 !important;
}

/* Main Mini-Reviews Cards */
.roundup-reviews-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.25rem !important;
    min-width: 0 !important;
}

.roundup-tool-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: clamp(1.5rem, 2.5vw, 2.25rem) !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    scroll-margin-top: 110px !important;
    box-sizing: border-box !important;
}

.roundup-tool-header {
    margin-bottom: 1.25rem !important;
}

.roundup-tool-title-row {
    margin-bottom: 0.65rem !important;
}

.roundup-tool-h2 {
    font-size: clamp(1.4rem, 2.2vw, 1.85rem) !important;
    font-weight: 800 !important;
    color: #020617 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    scroll-margin-top: 110px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}



.roundup-tool-name-text {
    color: #020617 !important;
}

.roundup-tool-meta-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
}

.roundup-score-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

.roundup-score-value {
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    color: #020617 !important;
}

.roundup-score-tier-label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    border: 1px solid transparent !important;
}

.roundup-price-pill,


.roundup-pill-label {
    color: #64748b !important;
    font-weight: 600 !important;
}

.roundup-pill-val {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.roundup-tool-media-wrap {
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 1.25rem !important;
    border: 1px solid #e2e8f0 !important;
    background: #0f172a !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

.roundup-tool-screenshot {
    width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    object-fit: cover !important;
    display: block !important;
}

.roundup-tool-pitch p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #334155 !important;
    margin: 0 0 1.25rem 0 !important;
}

/* Pros & Cons Grid */
.roundup-pros-cons-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    .roundup-pros-cons-grid {
        grid-template-columns: 1fr !important;
    }
}

.roundup-pros-heading,
.roundup-cons-heading {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 0.65rem 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.roundup-pros-heading {
    color: var(--theme-accent, #059669) !important;
}

.roundup-cons-heading {
    color: #64748b !important;
}

.roundup-pros-list,
.roundup-cons-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.roundup-pros-list li,
.roundup-cons-list li {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

.roundup-bullet-pro {
    color: var(--theme-accent, #059669) !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    flex-shrink: 0 !important;
}

.roundup-bullet-con {
    color: #94a3b8 !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    flex-shrink: 0 !important;
}

/* Verdict Box */
.roundup-verdict-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.roundup-verdict-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
    color: #334155 !important;
}

.roundup-verdict-badge {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.roundup-verdict-badge.badge-ideal {
    background: var(--theme-bg, #ecfdf5) !important;
    color: var(--theme-text, #065f46) !important;
    border: 1px solid var(--theme-border, #a7f3d0) !important;
}

.roundup-verdict-badge.badge-avoid {
    background: #fff1f2 !important;
    color: #9f1239 !important;
    border: 1px solid #fecdd3 !important;
}

.roundup-verdict-text {
    margin: 0 !important;
    flex-grow: 1 !important;
}

/* Action Bar */
.roundup-tool-action-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #f1f5f9 !important;
}

.roundup-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #020617 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 11px 22px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.roundup-btn-primary:hover {
    background: var(--theme-accent, #059669) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25) !important;
}

.roundup-link-review {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.roundup-link-review:hover {
    color: var(--theme-accent, #059669) !important;
    text-decoration: underline !important;
}

@media (max-width: 640px) {
    .roundup-tool-action-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .roundup-btn-primary {
        width: 100% !important;
        text-align: center !important;
    }
    .roundup-link-review {
        justify-content: center !important;
    }
}

/* ── 6. FAQ Section ── */
.sec-roundup-faq {
    padding-top: var(--sec-pad-faq-top, clamp(1.5rem, 2.5vw, 2.25rem)) !important;
    padding-bottom: var(--sec-pad-faq-bottom, clamp(2.5rem, 4.5vw, 4rem)) !important;
}

.roundup-faq-accordion {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.875rem !important;
    max-width: 860px !important;
    margin: 0 auto !important;
}

.roundup-faq-item {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease !important;
}

.roundup-faq-item:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important;
}

.roundup-faq-summary {
    padding: 1.25rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #020617 !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    user-select: none !important;
    list-style: none !important;
    gap: 12px !important;
}

.roundup-faq-summary::-webkit-details-marker {
    display: none !important;
}

.roundup-faq-toggle {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.roundup-faq-item[open] .roundup-faq-toggle {
    transform: rotate(45deg) !important;
    color: var(--theme-accent, #059669) !important;
}

.roundup-faq-answer {
    padding: 0 1.5rem 1.25rem 1.5rem !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    border-top: 1px solid #f8fafc !important;
}

.roundup-faq-answer p {
    margin: 0 !important;
}

.roundup-tool-pitch-prose { font-size: 0.95rem !important; line-height: 1.65 !important; color: #334155 !important; margin: 1.25rem 0 !important; }
.roundup-tool-pitch-prose p { margin: 0 0 0.85rem 0 !important; }
.roundup-tool-pitch-prose img { max-width: 100% !important; height: auto !important; border-radius: 8px !important; margin: 1rem 0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; }