:root {
    --primary-base: #4F46E5;
    --primary-hover: #4338CA;
    --primary-active: #3730A3;
    --primary-surface: #EEF2FF;
    --primary-subtle: #E0E7FF;
    --secondary-base: #0EA5E9;
    --secondary-hover: #0284C7;
    --secondary-surface: #F0F9FF;
    --secondary-subtle: #E0F2FE;
    --accent-base: #EC4899;
    --accent-hover: #DB2777;
    --accent-surface: #FDF2F8;
    --accent-subtle: #FCE7F3;
    --warning-defect: #F59E0B;
    --success-finish: #10B981;
    --bg-canvas: #F8FAFC;
    --bg-surface-elevated: #FFFFFF;
    --bg-surface-muted: #F1F5F9;
    --bg-gradient-hero: linear-gradient(135deg, #EEF2FF 0%, #FDF4FF 50%, #F0F9FF 100%);
    --bg-gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.85) 100%);
    --bg-gradient-cta: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #0EA5E9 100%);
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --text-disabled: #94A3B8;
    --border-default: rgba(226, 232, 240, 0.8);
    --border-subtle: rgba(241, 245, 249, 0.6);
    --border-active: rgba(99, 102, 241, 0.4);
    --shadow-soft-sm: 0 2px 8px -2px rgba(15, 23, 42, 0.05), 0 1px 4px -1px rgba(15, 23, 42, 0.03);
    --shadow-soft-md: 0 8px 24px -4px rgba(79, 70, 229, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    --shadow-soft-lg: 0 20px 36px -6px rgba(79, 70, 229, 0.12), 0 8px 20px -4px rgba(15, 23, 42, 0.05);
    --shadow-floating: 0 24px 48px -12px rgba(79, 70, 229, 0.14), 0 4px 16px -2px rgba(14, 165, 233, 0.08);
    --font-headings: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

.site-body {
    font-family: var(--font-body);
    background-color: var(--bg-canvas);
    color: var(--text-primary);
    line-height: 1.55;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* ===== header ===== */
.support-header-section {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.06);
    z-index: 1030;
    position: sticky;
    top: 0;
    width: 100%
}

.support-header-section .support-header-top-bar {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.75rem;
    font-weight: 500
}

.support-header-section .support-badge-pill {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg, #eef2ff 0%, #f0f9ff 100%);
    color: #4f46e5;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid #e0e7ff
}

.support-header-section .support-meta-text {
    color: #475569;
    font-size: 0.75rem
}

.support-header-section .support-status-indicator {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2)
}

.support-header-section .support-navbar {
    padding: 0.75rem 0;
    background-color: #ffffff
}

.support-header-section .support-brand {
    text-decoration: none
}

.support-header-section .support-brand-logo {
    max-width: 44px;
    max-height: 44px;
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 10px;
    background: #eef2ff;
    padding: 4px;
    border: 1px solid #e0e7ff
}

.support-header-section .support-brand-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.2;
    color: #0f172a;
    letter-spacing: -0.02em
}

.support-header-section .support-brand-subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 0.04em
}

.support-header-section .support-toggler {
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    padding: 0.4rem 0.65rem;
    border-radius: 10px;
    color: #0f172a
}

.support-header-section .support-toggler:focus {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
    outline: none
}

.support-header-section .support-toggler-icon {
    font-size: 1.35rem;
    color: #0f172a;
    line-height: 1;
    display: block
}

.support-header-section .support-nav-list {
    gap: 0.25rem
}

.support-header-section .support-nav-link {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.925rem;
    font-weight: 600;
    color: #475569;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    transition: color 0.2s ease, background-color 0.2s ease;
    display: inline-flex;
    align-items: center
}

.support-header-section .support-nav-link i {
    font-size: 1rem;
    color: #6366f1
}

.support-header-section .support-nav-link:hover {
    color: #4f46e5;
    background-color: #eef2ff
}

.support-header-section .support-nav-link.active {
    color: #4f46e5;
    background-color: #eef2ff;
    font-weight: 700
}

.support-header-section .support-cta-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 0.65rem 1.35rem;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 6px 16px -3px rgba(79, 70, 229, 0.35);
    transition: all 0.25s ease;
    text-decoration: none
}

.support-header-section .support-cta-btn:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -4px rgba(79, 70, 229, 0.45)
}

.support-header-section .support-cta-btn:active {
    color: #ffffff;
    transform: translateY(0)
}

@media(max-width:991.98px) {
    .support-header-section .navbar-collapse {
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 1rem;
        margin-top: 0.75rem;
        box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.1)
    }

    .support-header-section .support-nav-link {
        padding: 0.65rem 0.85rem;
        width: 100%
    }

    .support-header-section .support-brand-logo {
        max-width: 34px;
        max-height: 34px;
        width: 34px;
        height: 34px;
    }

    .support-header-section .support-brand-title {
        font-size: 0.85rem;
        line-height: 1.15;
    }

    .support-header-section .support-brand-subtitle {
        font-size: 0.55rem;
    }

    .support-header-section .support-brand {
        max-width: calc(100% - 60px);
    }
}

@media(max-width:575.98px) {
    .support-header-section .support-brand-logo {
        max-width: 30px;
        max-height: 30px;
        width: 30px;
        height: 30px;
    }

    .support-header-section .support-brand-title {
        font-size: 0.72rem;
    }

    .support-header-section .support-brand-subtitle {
        font-size: 0.5rem;
    }
}

/* ===== review_what_support_decisions_left_behind ===== */
.hero-block {
    position: relative;
    background-color: #F8FAFC;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.hero-block-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.hero-block-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-block-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.94) 0%, rgba(238, 242, 255, 0.90) 50%, rgba(240, 249, 255, 0.92) 100%);
    backdrop-filter: blur(4px);
}

.hero-block .container {
    z-index: 2;
}

.hero-block-badge {
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(79, 70, 229, 0.2);
    width: fit-content;
}

.hero-block-badge-icon {
    color: #4F46E5;
    font-size: 1.1rem;
}

.hero-block-badge-text {
    color: #4F46E5;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hero-block-title {
    color: #0F172A;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(2rem, 4vw + 0.5rem, 3.25rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.hero-block-lead {
    color: #475569;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 600px;
}

.hero-block-btn-primary {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 50px;
    padding: 0.85rem 2rem;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 10px 20px -5px rgba(79, 70, 229, 0.35);
    transition: all 0.3s ease;
}

.hero-block-btn-primary:hover,
.hero-block-btn-primary:focus {
    background: linear-gradient(135deg, #4338CA 0%, #4F46E5 100%);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -5px rgba(79, 70, 229, 0.45);
}

.hero-block-btn-secondary {
    background: rgba(255, 255, 255, 0.95);
    color: #4F46E5;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 50px;
    padding: 0.85rem 1.75rem;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.hero-block-btn-secondary:hover,
.hero-block-btn-secondary:focus {
    background: #EEF2FF;
    color: #4338CA;
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
}

.hero-block-summary-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(226, 232, 240, 0.9);
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 36px -6px rgba(79, 70, 229, 0.12);
}

.hero-block-summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748B;
}

.hero-block-summary-val {
    font-size: 1.1rem;
    color: #0F172A;
}

.hero-block-summary-icon {
    width: 48px;
    height: 48px;
    background: #EEF2FF;
    color: #4F46E5;
    font-size: 1.4rem;
}

.hero-block-metric-title {
    color: #334155;
    font-size: 0.95rem;
    font-weight: 500;
}

.hero-block-metric-tag {
    background: #F1F5F9;
    color: #475569;
    font-size: 0.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-weight: 600;
}

.hero-block-features-row {
    border-color: rgba(226, 232, 240, 0.8) !important;
}

.hero-block-feature-item {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s ease;
}

.hero-block-feature-item:hover {
    transform: translateY(-4px);
    background: #FFFFFF;
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 12px 24px -6px rgba(79, 70, 229, 0.08);
}

.hero-block-feature-icon-wrapper {
    width: 44px;
    height: 44px;
    background: #EEF2FF;
    color: #4F46E5;
    font-size: 1.3rem;
}

.hero-block-feature-heading {
    color: #0F172A;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.hero-block-feature-text {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .hero-block-title {
        font-size: 1.125rem;
        hyphens: auto;
    }

    .hero-block-feature-heading {
        font-size: 0.875rem;
        hyphens: auto;
    }

    .hero-block-lead {
        font-size: 0.95rem;
    }

    .hero-block-summary-val {
        font-size: 0.95rem;
    }
}

/* ===== support_categories ===== */
.support-categories-section {
    background-color: #F8FAFC;
    position: relative;
    overflow: hidden
}

.support-categories-section .support-categories-badge {
    background-color: #EEF2FF;
    color: #4F46E5;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid rgba(79, 70, 229, 0.18)
}

.support-categories-section .support-categories-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.75rem, 3vw + 0.25rem, 2.5rem);
    font-weight: 700;
    line-height: 1.25;
    color: #0F172A;
    hyphens: auto
}

.support-categories-section .support-categories-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #475569;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto
}

.support-categories-section .support-categories-filter-btn {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.55rem 1.25rem;
    border-radius: 50px;
    border: 1px solid #E2E8F0;
    background-color: #FFFFFF;
    color: #475569;
    transition: all 0.25s ease
}

.support-categories-section .support-categories-filter-btn:hover {
    background-color: #EEF2FF;
    color: #4F46E5;
    border-color: #C7D2FE
}

.support-categories-section .support-categories-filter-btn.active {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: #FFFFFF;
    border-color: #4F46E5;
    box-shadow: 0 8px 16px -4px rgba(79, 70, 229, 0.3)
}

.support-categories-section .support-categories-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)
}

.support-categories-section .support-categories-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -8px rgba(79, 70, 229, 0.12);
    border-color: rgba(99, 102, 241, 0.4)
}

.support-categories-section .support-categories-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: #EEF2FF;
    color: #4F46E5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem
}

.support-categories-section .support-categories-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: #F1F5F9;
    color: #475569;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    border: 1px solid #E2E8F0
}

.support-categories-section .support-categories-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35
}

.support-categories-section .support-categories-link {
    color: #0F172A;
    text-decoration: none;
    transition: color 0.2s ease
}

.support-categories-section .support-categories-link:hover {
    color: #4F46E5;
    text-decoration: none
}

.support-categories-section .support-categories-card-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #475569
}

.support-categories-section .support-categories-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.25rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4F46E5;
    background-color: #EEF2FF;
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.25s ease
}

.support-categories-section .support-categories-cta-btn:hover {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: #FFFFFF;
    border-color: #4F46E5;
    box-shadow: 0 8px 18px -4px rgba(79, 70, 229, 0.35);
    transform: translateY(-1px)
}

.support-categories-section .support-categories-cta-btn:active {
    transform: translateY(0)
}

@media (max-width:767.98px) {
    .support-categories-section .support-categories-title {
        font-size: 1.35rem
    }

    .support-categories-section .support-categories-card-title {
        font-size: 1.05rem
    }

    .support-categories-section .support-categories-card {
        padding: 1.25rem
    }
}

/* ===== overcoming_support_objections ===== */
.support-objections-section {
    padding: 4rem 1rem;
    background-color: #F8FAFC;
    position: relative;
    overflow: hidden
}

.support-objections-section__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(90deg, #EEF2FF 0%, #F0F9FF 100%);
    color: #4F46E5;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border: 1px solid rgba(79, 70, 229, 0.15)
}

.support-objections-section__badge i {
    font-size: 1rem;
    color: #4F46E5
}

.support-objections-section__title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.75rem, 3vw + 0.25rem, 2.5rem);
    font-weight: 700;
    line-height: 1.25;
    color: #0F172A;
    margin-bottom: 1rem;
    hyphens: auto
}

.support-objections-section__subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 0
}

.support-objections-section__card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 24px;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05), 0 1px 4px -1px rgba(15, 23, 42, 0.03)
}

.support-objections-section__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 36px -6px rgba(79, 70, 229, 0.12), 0 8px 20px -4px rgba(15, 23, 42, 0.05);
    border-color: rgba(99, 102, 241, 0.4)
}

.support-objections-section__card-header {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.25rem
}

.support-objections-section__icon-wrap {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #EEF2FF;
    color: #4F46E5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: background 0.3s ease, color 0.3s ease
}

.support-objections-section__card:hover .support-objections-section__icon-wrap {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: #FFFFFF
}

.support-objections-section__header-text {
    flex-grow: 1
}

.support-objections-section__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0EA5E9;
    margin-bottom: 0.25rem
}

.support-objections-section__card-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0F172A;
    margin-bottom: 0
}

.support-objections-section__card-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex-grow: 1;
    justify-content: space-between
}

.support-objections-section__text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 0
}

.support-objections-section__metric-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1rem;
    margin-top: auto
}

.support-objections-section__metric {
    display: flex;
    flex-direction: column
}

.support-objections-section__metric-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: #4F46E5;
    line-height: 1.2
}

.support-objections-section__metric-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748B;
    margin-top: 0.25rem
}

.support-objections-section__cta-box {
    background: linear-gradient(135deg, #EEF2FF 0%, #FDF4FF 50%, #F0F9FF 100%);
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 24px;
    padding: 2.5rem 1.5rem;
    box-shadow: 0 8px 24px -4px rgba(79, 70, 229, 0.08)
}

.support-objections-section__cta-heading {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.25rem, 2vw + 0.1rem, 1.75rem);
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 0.75rem
}

.support-objections-section__cta-description {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
    color: #475569;
    max-width: 700px;
    margin: 0 auto 1.75rem;
    line-height: 1.6
}

.support-objections-section__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: #FFFFFF;
    border-radius: 50px;
    padding: 0.85rem 2rem;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px -5px rgba(79, 70, 229, 0.35);
    border: none
}

.support-objections-section__btn:hover {
    color: #FFFFFF;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 28px -5px rgba(79, 70, 229, 0.45)
}

@media (max-width:767.98px) {
    .support-objections-section {
        padding: 3rem 0.75rem
    }

    .support-objections-section__title {
        font-size: 16px
    }

    .support-objections-section__card-title {
        font-size: 14px
    }

    .support-objections-section__cta-heading {
        font-size: 15px
    }

    .support-objections-section__card {
        padding: 1.5rem 1.25rem
    }

    .support-objections-section__icon-wrap {
        width: 44px;
        height: 44px;
        font-size: 1.25rem
    }

    .support-objections-section__metric-box {
        grid-template-columns: 1fr;
        gap: 0.75rem
    }

    .support-objections-section__btn {
        width: 100%
    }
}

/* ===== the_cost_of_inaction ===== */
.cost-of-inaction-section {
    background: #F8FAFC;
    position: relative;
    overflow: hidden;
}

.cost-of-inaction-section .coi-badge {
    background: #EEF2FF;
    color: #4F46E5;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #E0E7FF;
    letter-spacing: 0.02em;
}

.cost-of-inaction-section .coi-title {
    color: #0F172A;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    line-height: 1.25;
}

.cost-of-inaction-section .coi-subtitle {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.6;
}

.cost-of-inaction-section .coi-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 20px;
    box-shadow: 0 10px 30px -5px rgba(79, 70, 229, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.03);
}

.cost-of-inaction-section .coi-panel-icon {
    font-size: 1.25rem;
    color: #4F46E5;
}

.cost-of-inaction-section .coi-panel-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.3;
}

.cost-of-inaction-section .coi-panel-desc {
    font-size: 0.875rem;
    color: #64748B;
}

.cost-of-inaction-section .coi-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1E293B;
}

.cost-of-inaction-section .coi-value-badge {
    background: #F1F5F9;
    color: #0F172A;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
}

.cost-of-inaction-section .form-range::-webkit-slider-thumb {
    background: #4F46E5;
}

.cost-of-inaction-section .form-range::-moz-range-thumb {
    background: #4F46E5;
}

/* Filled portion of range sliders (Weekly Overhang Prints, Manual Cleanup & Scraping) */
.cost-of-inaction-section .form-range.js-coi-prints,
.cost-of-inaction-section .form-range.js-coi-cleanup {
    --coi-range-fill: 0%;
    background: linear-gradient(to right, #4F46E5 0%, #4F46E5 var(--coi-range-fill), #E2E8F0 var(--coi-range-fill), #E2E8F0 100%);
    border-radius: 1rem;
    height: 0.5rem;
}

.cost-of-inaction-section .form-range.js-coi-prints::-webkit-slider-runnable-track,
.cost-of-inaction-section .form-range.js-coi-cleanup::-webkit-slider-runnable-track {
    background: transparent;
    height: 0.5rem;
    border-radius: 1rem;
}

.cost-of-inaction-section .form-range.js-coi-prints::-moz-range-track,
.cost-of-inaction-section .form-range.js-coi-cleanup::-moz-range-track {
    background: transparent;
    height: 0.5rem;
    border-radius: 1rem;
}

.cost-of-inaction-section .form-range.js-coi-prints::-webkit-slider-thumb {
    background: #4F46E5;
    margin-top: -0.4rem;
}

.cost-of-inaction-section .form-range.js-coi-cleanup::-webkit-slider-thumb {
    background: #4F46E5;
    margin-top: -0.4rem;
}

.cost-of-inaction-section .coi-range-hint {
    font-size: 0.75rem;
    color: #94A3B8;
}

.cost-of-inaction-section .form-select {
    background-color: #FFFFFF;
    border: 1px solid #CBD5E1;
    color: #0F172A;
    font-size: 0.875rem;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    font-weight: 500;
}

.cost-of-inaction-section .form-select:focus {
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.cost-of-inaction-section .coi-kicker {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #6366F1;
}

.cost-of-inaction-section .coi-severity-pill {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    background: #FDF2F8;
    color: #DB2777;
    border: 1px solid #FCE7F3;
}

.cost-of-inaction-section .coi-stat-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
}

.cost-of-inaction-section .coi-stat-icon {
    font-size: 1.1rem;
}

.cost-of-inaction-section .text-indigo {
    color: #4F46E5;
}

.cost-of-inaction-section .text-pink {
    color: #EC4899;
}

.cost-of-inaction-section .coi-stat-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
}

.cost-of-inaction-section .coi-stat-number {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.cost-of-inaction-section .coi-stat-desc {
    font-size: 0.8125rem;
    color: #64748B;
    line-height: 1.4;
}

.cost-of-inaction-section .coi-breakdown-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
}

.cost-of-inaction-section .coi-breakdown-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1E293B;
}

.cost-of-inaction-section .coi-breakdown-percentage {
    font-weight: 700;
    font-size: 0.95rem;
    color: #4F46E5;
}

.cost-of-inaction-section .coi-progress-bar {
    height: 8px;
    background-color: #E2E8F0;
    border-radius: 999px;
}

.cost-of-inaction-section .coi-bar-fill {
    background: linear-gradient(90deg, #4F46E5 0%, #EC4899 100%);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.cost-of-inaction-section .coi-breakdown-meta {
    font-size: 0.775rem;
    color: #64748B;
}

.cost-of-inaction-section .coi-risk-list {
    background: #FFFBEB;
    border: 1px solid #FEF3C7;
}

.cost-of-inaction-section .coi-risk-title {
    color: #92400E;
    font-weight: 700;
}

.cost-of-inaction-section .coi-risk-items {
    font-size: 0.8125rem;
    color: #78350F;
    line-height: 1.5;
}

.cost-of-inaction-section .coi-btn-primary {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 50px;
    padding: 0.75rem 1.6rem;
    font-weight: 600;
    font-size: 0.925rem;
    box-shadow: 0 8px 18px -4px rgba(79, 70, 229, 0.35);
    transition: all 0.25s ease;
    text-decoration: none;
    white-space: nowrap;
}

.cost-of-inaction-section .coi-btn-primary:hover {
    background: linear-gradient(135deg, #4338CA 0%, #4F46E5 100%);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -4px rgba(79, 70, 229, 0.45);
}

@media (max-width: 767.98px) {
    .cost-of-inaction-section .coi-title {
        font-size: 1.5rem;
        hyphens: auto;
    }

    .cost-of-inaction-section .coi-panel-title {
        font-size: 1.1rem;
    }

    .cost-of-inaction-section .coi-stat-number {
        font-size: 1.65rem;
    }
}

/* ===== book_a_consultation ===== */
.consultation-section {
    background: linear-gradient(135deg, #EEF2FF 0%, #FDF4FF 50%, #F0F9FF 100%);
    position: relative;
    overflow: hidden
}

.consultation-section .consultation-wrapper {
    position: relative;
    z-index: 1
}

.consultation-section .consultation-info-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.85) 100%);
    border-radius: 24px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 8px 24px -4px rgba(79, 70, 229, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(16px)
}

.consultation-section .consultation-pill {
    background: rgba(238, 242, 255, 0.9);
    color: #4F46E5;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(99, 102, 241, 0.2)
}

.consultation-section .consultation-title {
    color: #0F172A;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25
}

.consultation-section .consultation-desc {
    color: #475569;
    font-size: 1rem;
    line-height: 1.6
}

.consultation-section .perk-icon-box {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: #EEF2FF;
    color: #4F46E5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem
}

.consultation-section .perk-heading {
    color: #0F172A;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3
}

.consultation-section .perk-text {
    color: #64748B;
    font-size: 0.875rem;
    line-height: 1.5
}

.consultation-section .specialist-badge {
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05)
}

.consultation-section .badge-icon-wrap {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4F46E5 0%, #0EA5E9 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem
}

.consultation-section .specialist-title {
    color: #0F172A;
    font-size: 0.95rem;
    font-weight: 700
}

.consultation-section .specialist-subtitle {
    color: #64748B;
    font-size: 0.8rem
}

.consultation-section .consultation-form-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 24px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 20px 36px -6px rgba(79, 70, 229, 0.12), 0 8px 20px -4px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(16px)
}

.consultation-section .form-main-title {
    color: #0F172A;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3
}

.consultation-section .form-main-subtitle {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.5
}

.consultation-section .field-label {
    color: #0F172A;
    font-size: 0.875rem;
    font-weight: 600;
    display: block
}

.consultation-section .slot-option-btn {
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 14px;
    padding: 0.65rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    cursor: pointer
}

.consultation-section .slot-option-btn .duration-time {
    color: #0F172A;
    font-size: 1rem;
    font-weight: 700
}

.consultation-section .slot-option-btn .duration-caption {
    color: #64748B;
    font-size: 0.75rem;
    font-weight: 500
}

.consultation-section .slot-option-btn:hover {
    border-color: #6366F1;
    background: #EEF2FF
}

.consultation-section .slot-option-btn.active {
    background: #EEF2FF;
    border-color: #4F46E5;
    box-shadow: 0 4px 12px -2px rgba(79, 70, 229, 0.2)
}

.consultation-section .slot-option-btn.active .duration-time {
    color: #4F46E5
}

.consultation-section .slot-option-btn.active .duration-caption {
    color: #4338CA
}

.consultation-section .topic-option-btn {
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 12px;
    padding: 0.6rem 0.85rem;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: all 0.25s ease;
    cursor: pointer
}

.consultation-section .topic-option-btn i {
    color: #4F46E5;
    font-size: 1rem
}

.consultation-section .topic-option-btn:hover {
    border-color: #6366F1;
    color: #0F172A;
    background: #F8FAFC
}

.consultation-section .topic-option-btn.active {
    background: #EEF2FF;
    border-color: #4F46E5;
    color: #4F46E5;
    font-weight: 600
}

.consultation-section .time-slot-btn {
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 10px;
    padding: 0.5rem 0.25rem;
    color: #0F172A;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.25s ease;
    cursor: pointer
}

.consultation-section .time-slot-btn:hover {
    border-color: #6366F1;
    background: #EEF2FF;
    color: #4F46E5
}

.consultation-section .time-slot-btn.active {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    border-color: #4F46E5;
    color: #FFFFFF;
    box-shadow: 0 4px 12px -2px rgba(79, 70, 229, 0.3)
}

.consultation-section .input-wrapper {
    position: relative
}

.consultation-section .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748B;
    font-size: 1.1rem;
    pointer-events: none
}

.consultation-section .custom-form-input {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 12px;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    color: #0F172A;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s
}

.consultation-section .custom-form-input::placeholder {
    color: #94A3B8;
    opacity: 1
}

.consultation-section .custom-form-input:focus {
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15)
}

.consultation-section .custom-form-textarea {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    color: #0F172A;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: vertical
}

.consultation-section .custom-form-textarea::placeholder {
    color: #94A3B8;
    opacity: 1
}

.consultation-section .custom-form-textarea:focus {
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15)
}

.consultation-section .submit-booking-btn {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 50px;
    padding: 0.85rem 1.75rem;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 10px 20px -5px rgba(79, 70, 229, 0.35);
    transition: all 0.25s ease;
    cursor: pointer
}

.consultation-section .submit-booking-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -5px rgba(79, 70, 229, 0.45);
    color: #FFFFFF
}

.consultation-section .booking-security {
    color: #64748B;
    font-size: 0.75rem
}

@media(max-width:767.98px) {
    .consultation-section .consultation-title {
        font-size: 16px;
        hyphens: auto
    }

    .consultation-section .perk-heading {
        font-size: 14px;
        hyphens: auto
    }

    .consultation-section .form-main-title {
        font-size: 16px;
        hyphens: auto
    }

    .consultation-section .consultation-info-card,
    .consultation-section .consultation-form-card {
        padding: 1.5rem
    }
}

/* ===== footer ===== */
.site-footer-outcome {
    background-color: #F8FAFC;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    padding-top: 4rem;
    padding-bottom: 2rem;
    position: relative;
    color: #475569;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
}

.site-footer-outcome__container {
    max-width: 1280px;
}

.site-footer-outcome__brand-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0F172A;
    margin-bottom: 0.85rem;
    letter-spacing: -0.015em;
}

.site-footer-outcome__brand-desc {
    font-size: 0.9375rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.site-footer-outcome__meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: #EEF2FF;
    border: 1px solid #E0E7FF;
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #4F46E5;
}

.site-footer-outcome__meta-badge i {
    font-size: 1rem;
}

.site-footer-outcome__heading {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0F172A;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.site-footer-outcome__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.site-footer-outcome__link {
    color: #475569;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.site-footer-outcome__link:hover {
    color: #4F46E5;
    transform: translateX(3px);
}

.site-footer-outcome__note {
    font-size: 0.8125rem;
    color: #64748B;
    line-height: 1.5;
    margin-top: 1.25rem;
}

.site-footer-outcome__contacts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.site-footer-outcome__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: #475569;
    line-height: 1.5;
}

.site-footer-outcome__contact-item i {
    color: #4F46E5;
    font-size: 1.125rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.site-footer-outcome__contact-link {
    color: #0F172A;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    word-break: break-word;
}

.site-footer-outcome__contact-link:hover {
    color: #4F46E5;
}

.site-footer-outcome__contact-text {
    word-break: break-word;
}

.site-footer-outcome__wa-wrapper {
    margin-top: 0.5rem;
}

.site-footer-outcome__wa-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.65rem 1.25rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.3);
    transition: all 0.25s ease;
}

.site-footer-outcome__wa-button:hover {
    color: #FFFFFF;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -3px rgba(16, 185, 129, 0.4);
}

.site-footer-outcome__wa-button i {
    font-size: 1.125rem;
}

.site-footer-outcome__bottom {
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.site-footer-outcome__copyright {
    font-size: 0.875rem;
    color: #64748B;
    margin-bottom: 0;
    line-height: 1.5;
}

.site-footer-outcome__canonical-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4F46E5;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer-outcome__canonical-link:hover {
    color: #4338CA;
}

.site-footer-outcome__canonical-link i {
    font-size: 1rem;
}

@media (max-width: 767.98px) {
    .site-footer-outcome {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }

    .site-footer-outcome__brand-title {
        font-size: 1rem;
        hyphens: auto;
    }

    .site-footer-outcome__heading {
        font-size: 0.875rem;
        hyphens: auto;
        margin-top: 0.5rem;
    }

    .site-footer-outcome__bottom {
        margin-top: 2rem;
        padding-top: 1.25rem;
    }

    .site-footer-outcome__wa-button {
        width: 100%;
    }
}

.support-header-section {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.06);
    z-index: 1030;
    position: sticky;
    top: 0;
    width: 100%
}

.support-header-section .support-header-top-bar {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.75rem;
    font-weight: 500
}

.support-header-section .support-badge-pill {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg, #eef2ff 0%, #f0f9ff 100%);
    color: #4f46e5;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid #e0e7ff
}

.support-header-section .support-meta-text {
    color: #475569;
    font-size: 0.75rem
}

.support-header-section .support-status-indicator {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2)
}

.support-header-section .support-navbar {
    padding: 0.75rem 0;
    background-color: #ffffff
}

.support-header-section .support-brand {
    text-decoration: none
}

.support-header-section .support-brand-logo {
    max-width: 44px;
    max-height: 44px;
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 10px;
    background: #eef2ff;
    padding: 4px;
    border: 1px solid #e0e7ff
}

.support-header-section .support-brand-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.2;
    color: #0f172a;
    letter-spacing: -0.02em
}

.support-header-section .support-brand-subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 0.04em
}

.support-header-section .support-toggler {
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    padding: 0.4rem 0.65rem;
    border-radius: 10px;
    color: #0f172a
}

.support-header-section .support-toggler:focus {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
    outline: none
}

.support-header-section .support-toggler-icon {
    font-size: 1.35rem;
    color: #0f172a;
    line-height: 1;
    display: block
}

.support-header-section .support-nav-list {
    gap: 0.25rem
}

.support-header-section .support-nav-link {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.925rem;
    font-weight: 600;
    color: #475569;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    transition: color 0.2s ease, background-color 0.2s ease;
    display: inline-flex;
    align-items: center
}

.support-header-section .support-nav-link i {
    font-size: 1rem;
    color: #6366f1
}

.support-header-section .support-nav-link:hover {
    color: #4f46e5;
    background-color: #eef2ff
}

.support-header-section .support-nav-link.active {
    color: #4f46e5;
    background-color: #eef2ff;
    font-weight: 700
}

.support-header-section .support-cta-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 0.65rem 1.35rem;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 6px 16px -3px rgba(79, 70, 229, 0.35);
    transition: all 0.25s ease;
    text-decoration: none
}

.support-header-section .support-cta-btn:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -4px rgba(79, 70, 229, 0.45)
}

.support-header-section .support-cta-btn:active {
    color: #ffffff;
    transform: translateY(0)
}

.theory-template-page {
    background-color: #f8fafc;
    color: #0f172a;
    min-height: 100vh;
}

.theory-hero-section {
    background: linear-gradient(135deg, #eef2ff 0%, #fdf4ff 50%, #f0f9ff 100%);
    padding: 4.5rem 0 3.5rem 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.theory-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #ffffff;
    color: #4f46e5;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    border: 1px solid #e0e7ff;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05);
}

.theory-hero-title {
    color: #0f172a;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 3.5vw + 0.5rem, 3.2rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
}

.theory-hero-subtitle {
    color: #475569;
    font-size: 1.15rem;
    max-width: 780px;
    margin: 0 auto;
    line-height: 1.6;
}

.theory-metric-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e2e8f0;
    padding: 0.45rem 0.95rem;
    border-radius: 50px;
    font-size: 0.825rem;
    font-weight: 600;
    color: #334155;
}

.theory-metric-chip i {
    color: #4f46e5;
}

.theory-catalog-section {
    padding: 3.5rem 0 4.5rem 0;
}

.theory-filter-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.04);
}

.theory-search-wrapper {
    position: relative;
}

.theory-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 1.1rem;
}

.theory-search-input {
    width: 100%;
    padding: 0.65rem 1rem 0.65rem 2.75rem;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #0f172a;
    font-size: 0.925rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.theory-search-input::placeholder {
    color: #64748b;
    opacity: 1;
}

.theory-search-input:focus {
    border-color: #6366f1;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.theory-filter-btn {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 0.5rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.theory-filter-btn:hover {
    background: #eef2ff;
    color: #4f46e5;
    border-color: #c7d2fe;
}

.theory-filter-btn.active {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
    box-shadow: 0 4px 12px -2px rgba(79, 70, 229, 0.35);
}

.theory-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.theory-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 32px -8px rgba(79, 70, 229, 0.14);
    border-color: #c7d2fe;
}

.theory-card-img-wrap {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f1f5f9;
}

.theory-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.theory-card:hover .theory-card-img {
    transform: scale(1.04);
}

.theory-card-category-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    backdrop-filter: blur(8px);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.theory-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.theory-card-meta {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.theory-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.theory-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.75rem;
}

.theory-card-title-link {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.2s;
}

.theory-card-title-link:hover {
    color: #4f46e5;
}

.theory-card-excerpt {
    color: #475569;
    font-size: 0.925rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.theory-card-footer {
    border-top: 1px solid #f1f5f9;
}

.theory-reading-time {
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
    display: inline-flex;
    align-items: center;
}

.theory-card-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #4f46e5;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: gap 0.2s, color 0.2s;
}

.theory-card-action-btn:hover {
    color: #4338ca;
    gap: 0.65rem;
}

.theory-no-results {
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
}

.theory-no-results-icon {
    font-size: 2.75rem;
    color: #94a3b8;
}

.theory-no-results-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.theory-no-results-text {
    color: #64748b;
    font-size: 0.925rem;
    margin-bottom: 1.25rem;
}

.theory-reset-btn {
    background: #4f46e5;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    border: none;
}

.theory-reset-btn:hover {
    background: #4338ca;
    color: #ffffff;
}

.theory-consultation-section {
    padding: 0 0 5rem 0;
}

.theory-form-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 20px 36px -6px rgba(79, 70, 229, 0.08);
}

.theory-form-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #eef2ff;
    color: #4f46e5;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.theory-form-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.5rem, 2.5vw + 0.2rem, 2rem);
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
    margin-bottom: 1rem;
}

.theory-form-desc {
    color: #475569;
    font-size: 0.975rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.theory-form-points {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.theory-point-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.925rem;
    color: #334155;
    font-weight: 500;
}

.theory-point-item i {
    color: #10b981;
    font-size: 1.15rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.theory-form-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.04);
}

.theory-form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.4rem;
}

.theory-form-input,
.theory-form-select,
.theory-form-textarea {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #0f172a;
    font-size: 0.925rem;
    padding: 0.65rem 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.theory-form-input::placeholder,
.theory-form-textarea::placeholder {
    color: #64748b;
    opacity: 1;
}

.theory-form-input:focus,
.theory-form-select:focus,
.theory-form-textarea:focus {
    background-color: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    color: #0f172a;
}

.theory-submit-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.8rem 1.75rem;
    border-radius: 50px;
    border: none;
    box-shadow: 0 8px 20px -3px rgba(79, 70, 229, 0.35);
    transition: all 0.25s ease;
}

.theory-submit-btn:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -4px rgba(79, 70, 229, 0.45);
}

.site-footer-outcome {
    background-color: #F8FAFC;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    padding-top: 4rem;
    padding-bottom: 2rem;
    position: relative;
    color: #475569;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
}

.site-footer-outcome__container {
    max-width: 1280px;
}

.site-footer-outcome__brand-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0F172A;
    margin-bottom: 0.85rem;
    letter-spacing: -0.015em;
}

.site-footer-outcome__brand-desc {
    font-size: 0.9375rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.site-footer-outcome__meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: #EEF2FF;
    border: 1px solid #E0E7FF;
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #4F46E5;
}

.site-footer-outcome__meta-badge i {
    font-size: 1rem;
}

.site-footer-outcome__heading {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0F172A;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.site-footer-outcome__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.site-footer-outcome__link {
    color: #475569;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.site-footer-outcome__link:hover {
    color: #4F46E5;
    transform: translateX(3px);
}

.site-footer-outcome__note {
    font-size: 0.8125rem;
    color: #64748B;
    line-height: 1.5;
    margin-top: 1.25rem;
}

.site-footer-outcome__contacts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.site-footer-outcome__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: #475569;
    line-height: 1.5;
}

.site-footer-outcome__contact-item i {
    color: #4F46E5;
    font-size: 1.125rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.site-footer-outcome__contact-link {
    color: #0F172A;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    word-break: break-word;
}

.site-footer-outcome__contact-link:hover {
    color: #4F46E5;
}

.site-footer-outcome__contact-text {
    word-break: break-word;
}

.site-footer-outcome__wa-wrapper {
    margin-top: 0.5rem;
}

.site-footer-outcome__wa-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.65rem 1.25rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.3);
    transition: all 0.25s ease;
}

.site-footer-outcome__wa-button:hover {
    color: #FFFFFF;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -3px rgba(16, 185, 129, 0.4);
}

.site-footer-outcome__wa-button i {
    font-size: 1.125rem;
}

.site-footer-outcome__bottom {
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.site-footer-outcome__copyright {
    font-size: 0.875rem;
    color: #64748B;
    margin-bottom: 0;
    line-height: 1.5;
}

.site-footer-outcome__canonical-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4F46E5;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer-outcome__canonical-link:hover {
    color: #4338CA;
}

.site-footer-outcome__canonical-link i {
    font-size: 1rem;
}

@media (max-width: 991.98px) {
    .support-header-section .navbar-collapse {
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 1rem;
        margin-top: 0.75rem;
        box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.1);
    }

    .support-header-section .support-nav-link {
        padding: 0.65rem 0.85rem;
        width: 100%;
    }

    .support-header-section .support-brand-logo {
        max-width: 34px;
        max-height: 34px;
        width: 34px;
        height: 34px;
    }

    .support-header-section .support-brand-title {
        font-size: 0.85rem;
        line-height: 1.15;
    }

    .support-header-section .support-brand-subtitle {
        font-size: 0.55rem;
    }

    .support-header-section .support-brand {
        max-width: calc(100% - 60px);
    }

    .theory-form-card {
        padding: 1.75rem;
    }
}

@media (max-width: 575.98px) {
    .support-header-section .support-brand-logo {
        max-width: 30px;
        max-height: 30px;
        width: 30px;
        height: 30px;
    }

    .support-header-section .support-brand-title {
        font-size: 0.72rem;
    }

    .support-header-section .support-brand-subtitle {
        font-size: 0.5rem;
    }
}

@media (max-width: 767.98px) {
    .theory-hero-title {
        font-size: 1.125rem;
        hyphens: auto;
    }

    .theory-card-title {
        font-size: 1rem;
        hyphens: auto;
    }

    .theory-form-title {
        font-size: 1rem;
        hyphens: auto;
    }

    .site-footer-outcome {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }

    .site-footer-outcome__brand-title {
        font-size: 1rem;
        hyphens: auto;
    }

    .site-footer-outcome__heading {
        font-size: 0.875rem;
        hyphens: auto;
        margin-top: 0.5rem;
    }

    .site-footer-outcome__bottom {
        margin-top: 2rem;
        padding-top: 1.25rem;
    }

    .site-footer-outcome__wa-button {
        width: 100%;
    }
}


/* ===== PAGE: brand-support ===== */
.brand-support-section {
  background-color: #F8FAFC;
  color: #0F172A;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.brand-support-section .brand-support-hero-card {
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.95) 0%, rgba(253, 244, 255, 0.9) 50%, rgba(240, 249, 255, 0.95) 100%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 24px;
  box-shadow: 0 8px 24px -4px rgba(79, 70, 229, 0.08);
}

.brand-support-section .brand-support-badge {
  background-color: #4F46E5;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
}

.brand-support-section .brand-support-pill {
  background-color: #EEF2FF;
  color: #4F46E5;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.brand-support-section .brand-support-heading {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #0F172A;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.brand-support-section .brand-support-lead {
  color: #475569;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 680px;
}

.brand-support-section .metric-pill {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.8);
  backdrop-filter: blur(8px);
  min-width: 140px;
}

.brand-support-section .metric-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  color: #4F46E5;
  line-height: 1.2;
}

.brand-support-section .metric-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748B;
}

.brand-support-section .brand-support-btn-primary {
  background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
  color: #FFFFFF;
  font-weight: 600;
  border: none;
  padding: 0.8rem 1.75rem;
  border-radius: 50px;
  box-shadow: 0 8px 16px -4px rgba(79, 70, 229, 0.35);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.brand-support-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.2px;
  border: none;
  padding: 0.9rem 2rem;
  border-radius: 50px;
  box-shadow: 0 10px 24px -6px rgba(79, 70, 229, 0.5);
  transition: all 0.3s ease;
  text-decoration: none;
  white-space: nowrap;
}

.brand-support-hero-cta:hover {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #4338CA 0%, #4F46E5 100%);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -6px rgba(79, 70, 229, 0.6);
}

.brand-support-hero-cta i {
  font-size: 1.1rem;
  line-height: 1;
}

.brand-support-section .brand-support-btn-secondary,
.brand-support-section .brand-support-btn-outline {
  white-space: nowrap;
}

.brand-support-info-card .btn {
  flex-shrink: 0;
}

/* Request Summary rows - adaptive layout */
.request-summary-row {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f1f5f9;
}

.request-summary-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.request-summary-label {
  font-weight: 500;
  color: #94a3b8;
}

.request-summary-value {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.4;
}

@media (min-width: 576px) {
  .request-summary-value {
    max-width: 60%;
    text-align: right;
  }
}

.brand-support-section .brand-support-btn-primary:hover {
  color: #FFFFFF;
  background: linear-gradient(135deg, #4338CA 0%, #4F46E5 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -4px rgba(79, 70, 229, 0.45);
}

.brand-support-section .brand-support-btn-secondary {
  background-color: #FFFFFF;
  color: #4F46E5;
  font-weight: 600;
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 0.8rem 1.75rem;
  border-radius: 50px;
  transition: all 0.25s ease;
}

.brand-support-section .brand-support-btn-secondary:hover {
  background-color: #F8FAFC;
  color: #3730A3;
  border-color: #CBD5E1;
  transform: translateY(-2px);
}

.brand-support-section .brand-support-btn-outline {
  background-color: transparent;
  color: #4F46E5;
  font-weight: 600;
  border: 1px solid #4F46E5;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  transition: all 0.25s ease;
}

.brand-support-section .brand-support-btn-outline:hover {
  background-color: #4F46E5;
  color: #FFFFFF;
}

.brand-support-section .brand-support-media {
  aspect-ratio: 4/3;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.brand-support-section .brand-support-media-badge {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 600;
}

.brand-support-section .brand-support-filter-bar {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05);
}

.brand-support-section .brand-support-filter-btn {
  border: none;
  background: transparent;
  color: #64748B;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1.15rem;
  border-radius: 50px;
  transition: all 0.2s ease;
}

.brand-support-section .brand-support-filter-btn:hover {
  color: #0F172A;
  background-color: #F1F5F9;
}

.brand-support-section .brand-support-filter-btn.active {
  background: #4F46E5;
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
}

.brand-support-section .brand-support-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-support-section .brand-support-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(79, 70, 229, 0.12);
  border-color: rgba(99, 102, 241, 0.4);
}

.brand-support-section .brand-support-chip {
  background-color: #F0FDF4;
  color: #166534;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
}

.brand-support-section .brand-support-meta {
  font-size: 0.75rem;
  color: #64748B;
  font-weight: 500;
}

.brand-support-section .brand-support-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
}

.brand-support-section .brand-support-card-link {
  color: #0F172A;
  transition: color 0.2s ease;
}

.brand-support-section .brand-support-card-link:hover {
  color: #4F46E5;
}

.brand-support-section .brand-support-card-text {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.55;
}

.brand-support-section .brand-support-score {
  font-size: 0.8rem;
  font-weight: 700;
}

.brand-support-section .brand-support-action-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: #4F46E5;
  text-decoration: none;
  transition: transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.brand-support-section .brand-support-action-link:hover {
  color: #3730A3;
  transform: translateX(2px);
}

.brand-support-section .brand-support-info-card {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
}

.brand-support-section .brand-support-info-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #0F172A;
}

.brand-support-section .brand-support-info-desc {
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  .brand-support-section .brand-support-heading {
    font-size: 1.35rem;
    hyphens: auto;
  }
  .brand-support-section .brand-support-card-title {
    font-size: 1rem;
  }
  .brand-support-section .brand-support-info-title {
    font-size: 1.15rem;
  }
  .brand-support-section .brand-support-filter-bar {
    border-radius: 16px !important;
    width: 100%;
  }
  .brand-support-section .brand-support-filter-btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ===== PAGE: privacy ===== */
.privacy-policy-section { background-color: #F8FAFC; color: #0F172A; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.privacy-policy-section .privacy-hero-card { background: linear-gradient(135deg, #EEF2FF 0%, #FDF4FF 50%, #F0F9FF 100%); border-radius: 24px; border: 1px solid rgba(226, 232, 240, 0.9); box-shadow: 0 8px 24px -4px rgba(79, 70, 229, 0.08); }
.privacy-policy-section .badge-pill { background: linear-gradient(90deg, #4F46E5 0%, #6366F1 100%); color: #FFFFFF; font-size: 0.75rem; font-weight: 700; padding: 0.35rem 0.85rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; }
.privacy-policy-section .badge-subtle { background: rgba(79, 70, 229, 0.1); color: #4F46E5; font-size: 0.75rem; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: 999px; display: inline-flex; align-items: center; }
.privacy-policy-section .privacy-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #0F172A; font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); line-height: 1.25; }
.privacy-policy-section .privacy-lead { font-size: 1.05rem; color: #475569; line-height: 1.6; }
.privacy-policy-section .stat-box { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(226, 232, 240, 0.8); backdrop-filter: blur(12px); box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.04); }
.privacy-policy-section .stat-icon { width: 48px; height: 48px; border-radius: 14px; background: #EEF2FF; color: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.privacy-policy-section .stat-value { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.25rem; font-weight: 700; color: #0F172A; line-height: 1.2; }
.privacy-policy-section .stat-label { font-size: 0.85rem; color: #64748B; }
.privacy-policy-section .sticky-nav-card { background: #FFFFFF; border: 1px solid rgba(226, 232, 240, 0.8); position: sticky; top: 1.5rem; }
.privacy-policy-section .text-primary-custom { color: #4F46E5; }
.privacy-policy-section .text-secondary-custom { color: #475569; line-height: 1.7; }
.privacy-policy-section .text-dark-custom { color: #0F172A; }
.privacy-policy-section .tracking-wider { letter-spacing: 0.05em; }
.privacy-policy-section .policy-toc { list-style: none; padding: 0; margin: 0; }
.privacy-policy-section .toc-link { display: flex; align-items: center; padding: 0.6rem 0.85rem; color: #475569; text-decoration: none; font-size: 0.9rem; font-weight: 500; border-radius: 8px; transition: all 0.2s ease-in-out; margin-bottom: 0.25rem; }
.privacy-policy-section .toc-link:hover { color: #4F46E5; background: #EEF2FF; }
.privacy-policy-section .toc-link.active { color: #4F46E5; background: #EEF2FF; font-weight: 600; }
.privacy-policy-section .policy-body-card { background: #FFFFFF; border: 1px solid rgba(226, 232, 240, 0.8); }
.privacy-policy-section .section-heading { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: #0F172A; display: flex; align-items: center; gap: 0.75rem; }
.privacy-policy-section .heading-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #EEF2FF; color: #4F46E5; font-size: 0.875rem; font-weight: 700; flex-shrink: 0; }
.privacy-policy-section .data-tile { background: #F8FAFC; border: 1px solid #E2E8F0; }
.privacy-policy-section .policy-checklist { list-style: none; }
.privacy-policy-section .policy-table { font-size: 0.9rem; }
.privacy-policy-section .policy-table thead th { background: #F1F5F9; color: #0F172A; font-weight: 600; border-bottom: 1px solid #CBD5E1; padding: 0.75rem 1rem; }
.privacy-policy-section .policy-table tbody td { padding: 0.75rem 1rem; color: #475569; border-bottom: 1px solid #F1F5F9; }
.privacy-policy-section .rights-chip { background: #F8FAFC; border: 1px solid #E2E8F0; }
.privacy-policy-section .contact-callout { background: linear-gradient(135deg, #EEF2FF 0%, #F0F9FF 100%); border: 1px solid rgba(99, 102, 241, 0.25); }
.privacy-policy-section .btn-contact-custom { background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%); color: #FFFFFF; border-radius: 50px; padding: 0.75rem 1.5rem; font-weight: 600; text-decoration: none; font-size: 0.9rem; box-shadow: 0 8px 16px -4px rgba(79, 70, 229, 0.3); transition: all 0.25s ease; border: none; }
.privacy-policy-section .btn-contact-custom:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -4px rgba(79, 70, 229, 0.4); color: #FFFFFF; }

/* ===== PAGE: terms ===== */
.terms-content-section { background-color: #F8FAFC; color: #0F172A; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.terms-content-section .terms-sidebar { top: 2rem; z-index: 10; }
.terms-content-section .terms-summary-card, .terms-content-section .terms-nav-card { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(226, 232, 240, 0.8); border-radius: 20px; padding: 1.5rem; box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04); backdrop-filter: blur(12px); }
.terms-content-section .terms-badge { background-color: #EEF2FF; color: #4F46E5; font-weight: 600; font-size: 0.75rem; padding: 0.35rem 0.75rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; }
.terms-content-section .terms-version-pill { background: #F0F9FF; color: #0284C7; font-size: 0.75rem; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: 999px; font-family: 'JetBrains Mono', monospace; }
.terms-content-section .terms-sidebar-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.15rem; font-weight: 700; color: #0F172A; }
.terms-content-section .terms-sidebar-desc { font-size: 0.875rem; color: #475569; line-height: 1.5; }
.terms-content-section .terms-metric-box { background: linear-gradient(135deg, #EEF2FF 0%, #F0F9FF 100%); border: 1px solid rgba(199, 210, 254, 0.6); }
.terms-content-section .terms-metric-value { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 800; color: #4F46E5; line-height: 1.2; }
.terms-content-section .terms-metric-label { font-size: 0.75rem; font-weight: 500; color: #64748B; text-transform: uppercase; letter-spacing: 0.025em; }
.terms-content-section .terms-nav-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 700; color: #0F172A; }
.terms-content-section .terms-search-icon { background: #F1F5F9; border-color: #E2E8F0; color: #64748B; border-radius: 10px 0 0 10px; }
.terms-content-section .terms-search-input { background: #FFFFFF; border-color: #E2E8F0; color: #0F172A; font-size: 0.875rem; border-radius: 0 10px 10px 0; }
.terms-content-section .terms-search-input::placeholder { color: #94A3B8; }
.terms-content-section .terms-search-input:focus { border-color: #6366F1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.terms-content-section .terms-quick-nav { max-height: 380px; overflow-y: auto; padding-right: 4px; }
.terms-content-section .terms-nav-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; border-radius: 8px; color: #475569; text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: all 0.2s ease; }
.terms-content-section .terms-nav-link:hover { color: #4F46E5; background-color: #EEF2FF; transform: translateX(3px); }
.terms-content-section .terms-nav-link.active { color: #4F46E5; background-color: #EEF2FF; font-weight: 600; }
.terms-content-section .terms-main-paper { background: #FFFFFF; border: 1px solid rgba(226, 232, 240, 0.9); border-radius: 24px; box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05); }
.terms-content-section .terms-main-heading { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); font-weight: 800; color: #0F172A; letter-spacing: -0.02em; line-height: 1.25; }
.terms-content-section .terms-header { font-size: 0.875rem; }
.terms-content-section .clause-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #EEF2FF; color: #4F46E5; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; font-weight: 700; border-radius: 8px; flex-shrink: 0; }
.terms-content-section .clause-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.25rem; font-weight: 700; color: #0F172A; }
.terms-content-section .clause-text { font-size: 0.95rem; line-height: 1.7; color: #475569; margin-bottom: 1rem; }
.terms-content-section .clause-list { list-style: none; padding-left: 0; margin-bottom: 1rem; }
.terms-content-section .clause-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.75rem; font-size: 0.95rem; line-height: 1.6; color: #475569; }
.terms-content-section .clause-list li::before { content: ''; position: absolute; left: 0; top: 0.6rem; width: 6px; height: 6px; border-radius: 50%; background-color: #4F46E5; }
.terms-content-section .terms-callout-box { background: #FFFBEB; border: 1px solid #FDE68A; }
.terms-content-section .terms-callout-icon { font-size: 1.5rem; color: #D97706; flex-shrink: 0; }
.terms-content-section .terms-callout-heading { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 700; color: #92400E; }
.terms-content-section .terms-callout-text { font-size: 0.875rem; line-height: 1.6; color: #78350F; }
.terms-content-section .terms-contact-card { background: #F8FAFC; border: 1px solid #E2E8F0; }
.terms-content-section .terms-contact-btn { background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%); color: #FFFFFF; font-weight: 600; font-size: 0.875rem; border-radius: 50px; border: none; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25); transition: all 0.2s ease; }
.terms-content-section .terms-contact-btn:hover { background: linear-gradient(135deg, #4338CA 0%, #4F46E5 100%); color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35); }
@media (max-width: 767.98px) { .terms-content-section .terms-main-paper { padding: 1.5rem; border-radius: 16px; } .terms-content-section .clause-title { font-size: 1.1rem; } }

/* ===== PAGE: disclaimer ===== */
.disclaimer-page-section { background-color: #F8FAFC; color: #0F172A; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.disclaimer-page-section .disclaimer-hero-card { background: linear-gradient(135deg, #EEF2FF 0%, #FDF4FF 50%, #F0F9FF 100%); border-radius: 24px; border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 0 8px 24px -4px rgba(79, 70, 229, 0.08); }
.disclaimer-page-section .disclaimer-badge { display: inline-flex; align-items: center; background: rgba(238, 242, 255, 0.95); color: #4F46E5; font-size: 0.875rem; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid rgba(99, 102, 241, 0.25); }
.disclaimer-page-section .disclaimer-pill { display: inline-flex; align-items: center; background: rgba(240, 249, 255, 0.95); color: #0284C7; font-size: 0.875rem; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid rgba(14, 165, 233, 0.25); }
.disclaimer-page-section .disclaimer-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); font-weight: 800; line-height: 1.25; color: #0F172A; letter-spacing: -0.02em; }
.disclaimer-page-section .disclaimer-lead { font-size: 1.1rem; line-height: 1.6; color: #475569; }
.disclaimer-page-section .disclaimer-meta-grid { border-color: rgba(226, 232, 240, 0.9) !important; }
.disclaimer-page-section .disclaimer-stat-box { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(226, 232, 240, 0.8); border-radius: 16px; padding: 1rem 1.25rem; height: 100%; }
.disclaimer-page-section .disclaimer-stat-number { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.125rem; font-weight: 700; color: #4F46E5; line-height: 1.3; margin-bottom: 0.25rem; }
.disclaimer-page-section .disclaimer-stat-label { display: block; font-size: 0.85rem; color: #64748B; line-height: 1.45; }
.disclaimer-page-section .disclaimer-content-card { background: rgba(255, 255, 255, 0.95); border-radius: 24px; border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.05); }
.disclaimer-page-section .disclaimer-icon-wrap { width: 36px; height: 36px; min-width: 36px; border-radius: 10px; background: #EEF2FF; color: #4F46E5; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.disclaimer-page-section .disclaimer-section-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.2rem; font-weight: 700; color: #0F172A; margin: 0; line-height: 1.35; }
.disclaimer-page-section .disclaimer-text { font-size: 0.95rem; line-height: 1.7; color: #475569; margin-bottom: 0; }
.disclaimer-page-section .disclaimer-link-chip { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: 50px; background: #F8FAFC; border: 1px solid rgba(226, 232, 240, 0.9); color: #4F46E5; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: all 0.25s ease; }
.disclaimer-page-section .disclaimer-link-chip:hover { background: #EEF2FF; color: #4338CA; border-color: rgba(99, 102, 241, 0.35); transform: translateY(-2px); }
@media (max-width: 767.98px) { .disclaimer-page-section .disclaimer-title { font-size: 1.5rem; hyphens: auto; } .disclaimer-page-section .disclaimer-section-title { font-size: 1.05rem; } .disclaimer-page-section .disclaimer-hero-card, .disclaimer-page-section .disclaimer-content-card { border-radius: 18px; } }

.custom-comment-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 24px;
    box-shadow: 0 8px 24px -4px rgba(79, 70, 229, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    transition: all .35s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-comment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 36px -6px rgba(79, 70, 229, 0.12), 0 8px 20px -4px rgba(15, 23, 42, 0.05);
}

.avatar-initials {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
    user-select: none;
}

.primary-avatar-grad {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #0EA5E9 100%);
}

.comment-author-name {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    color: #0F172A;
    font-size: 1.05rem;
    line-height: 1.3;
}

.comment-author-role {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.8125rem;
    color: #64748B;
}

.comment-badge-pill {
    background: linear-gradient(90deg, #EEF2FF 0%, #F0F9FF 100%);
    color: #4F46E5;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.comment-time {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.8rem;
    color: #94A3B8;
}

.comment-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #334155;
}

.comment-metrics-chip {
    background: rgba(238, 242, 255, 0.7);
    border: 1px solid rgba(224, 231, 255, 0.8);
}

.btn-comment-action {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.875rem;
    color: #475569;
    background: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
}

.btn-comment-action:hover {
    color: #4F46E5;
    background: rgba(238, 242, 255, 0.6);
}

.custom-comment-reply-wrapper {
    position: relative;
    border-left: 2px dashed rgba(99, 102, 241, 0.25);
}

.custom-comment-card.reply-comment {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 18px;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05);
}

.avatar-initials.avatar-sm {
    width: 38px;
    height: 38px;
    min-width: 38px;
    font-size: 0.85rem;
}

.secondary-avatar-grad {
    background: linear-gradient(135deg, #0EA5E9 0%, #6366F1 100%);
    box-shadow: 0 3px 8px rgba(14, 165, 233, 0.25);
}

.comment-author-name.small-name {
    font-size: 0.95rem;
}

.comment-text.reply-text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #475569;
}

.reply-mention {
    background: rgba(238, 242, 255, 0.8);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    color: #4F46E5;
}


/* ===== PAGE TEMPLATE: cura-cases ===== */
.theory-detail-container {
    background-color: #f8fafc;
    color: #0f172a;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.theory-detail-container .theory-breadcrumb-wrapper {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.theory-detail-container .theory-bc-link {
    color: #64748b;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.theory-detail-container .theory-bc-link:hover {
    color: #4f46e5;
}

.theory-detail-container .theory-hero-section {
    background: linear-gradient(135deg, #eef2ff 0%, #fdf4ff 50%, #f0f9ff 100%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.theory-detail-container .theory-badge-category {
    background-color: #eef2ff;
    color: #4f46e5;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #e0e7ff;
}

.theory-detail-container .theory-badge-date,
.theory-detail-container .theory-badge-author {
    background-color: #ffffff;
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
}

.theory-detail-container .theory-main-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.75rem, 3.5vw + 0.5rem, 2.75rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.theory-detail-container .theory-lead-text {
    font-size: 1.125rem;
    color: #475569;
    line-height: 1.6;
}

.theory-detail-container .theory-share-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
}

.theory-detail-container .theory-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.2s ease;
}

.theory-detail-container .theory-share-btn:hover {
    background-color: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
    transform: translateY(-2px);
}

.theory-detail-container .theory-header-stat-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 10px 24px -4px rgba(79, 70, 229, 0.08);
}

.theory-detail-container .theory-stat-icon-wrapper {
    background-color: #eef2ff;
}

.theory-detail-container .theory-article-card,
.theory-detail-container .theory-service-box,
.theory-detail-container .theory-sidebar-card {
    background-color: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.theory-detail-container .theory-featured-media {
    background-color: #f1f5f9;
    max-height: 480px;
}

.theory-detail-container .theory-post-image {
    height: auto;
    max-height: 480px;
    object-fit: cover;
    display: block;
}

.theory-detail-container .theory-rich-text h2 {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 1.75rem;
    margin-bottom: 0.85rem;
}

.theory-detail-container .theory-rich-text h3 {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.theory-detail-container .theory-rich-text p {
    color: #334155;
    line-height: 1.7;
    margin-bottom: 1.2rem;
}

.theory-detail-container .theory-rich-text ul {
    color: #334155;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.theory-detail-container .theory-rich-text li {
    margin-bottom: 0.5rem;
}

.theory-detail-container .theory-service-badge {
    width: 48px;
    height: 48px;
    background-color: #eef2ff;
    flex-shrink: 0;
}

.theory-detail-container .theory-service-heading {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.theory-detail-container .theory-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.35rem;
}

.theory-detail-container .theory-input {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    border-radius: 10px;
    padding: 0.65rem 0.95rem;
    font-size: 0.9375rem;
}

.theory-detail-container .theory-input::placeholder {
    color: #94a3b8;
}

.theory-detail-container .theory-input:focus {
    background-color: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    outline: none;
}

.theory-detail-container .theory-primary-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9375rem;
    box-shadow: 0 6px 16px -3px rgba(79, 70, 229, 0.35);
    transition: all 0.25s ease;
}

.theory-detail-container .theory-primary-btn:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -4px rgba(79, 70, 229, 0.45);
}


.theory-detail-container .custom-comment-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition: border-color 0.2s ease;
}

.theory-detail-container .custom-comment-card:hover {
    border-color: #cbd5e1;
}

.theory-detail-container .avatar-initials {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.theory-detail-container .avatar-initials.avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 0.75rem;
}

.theory-detail-container .primary-avatar-grad {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
}

.theory-detail-container .secondary-avatar-grad {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

.theory-detail-container .comment-author-name {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}

.theory-detail-container .comment-author-name.small-name {
    font-size: 0.875rem;
}

.theory-detail-container .comment-badge-pill {
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 50px;
}

.theory-detail-container .comment-text {
    font-size: 0.9375rem;
    color: #334155;
    line-height: 1.55;
}

.theory-detail-container .comment-text.reply-text {
    font-size: 0.875rem;
}

.theory-detail-container .comment-metrics-chip {
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.theory-detail-container .btn-comment-action {
    background: transparent;
    border: none;
    color: #64748b;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.theory-detail-container .btn-comment-action:hover {
    color: #4f46e5;
}

.theory-detail-container .btn-comment-action.liked {
    color: #4f46e5;
}

.theory-detail-container .btn-comment-action.liked i {
    font-weight: 700;
}

.theory-detail-container .custom-comment-reply-wrapper {
    border-left: 2px solid #e2e8f0;
}

.theory-detail-container .theory-comment-form-wrap {
    background-color: #ffffff;
}


.theory-detail-container .theory-sidebar-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
}

.theory-detail-container .theory-related-item {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 0.75rem;
}

.theory-detail-container .theory-related-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.theory-detail-container .theory-related-link {
    text-decoration: none;
    transition: transform 0.2s ease;
    display: block;
}

.theory-detail-container .theory-related-link:hover .theory-related-text {
    color: #4f46e5;
}

.theory-detail-container .bg-light-gradient {
    background: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 100%);
}

.theory-detail-container .tiny-text {
    font-size: 0.75rem;
}

@media (max-width: 767.98px) {
    .theory-detail-container .theory-main-title {
        font-size: 1.125rem;
        hyphens: auto;
    }

    .theory-detail-container .theory-lead-text {
        font-size: 0.9375rem;
    }

    .theory-detail-container .theory-rich-text h2 {
        font-size: 1rem;
        hyphens: auto;
    }

    .theory-detail-container .theory-rich-text h3 {
        font-size: 0.875rem;
        hyphens: auto;
    }

    .theory-detail-container .theory-service-heading {
        font-size: 0.95rem;
        hyphens: auto;
    }
}

/* ===== PAGE TEMPLATE: guides ===== */
.theory-detail-container {
    background-color: #f8fafc;
    color: #0f172a;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.theory-detail-container .theory-breadcrumb-wrapper {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.theory-detail-container .theory-bc-link {
    color: #64748b;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.theory-detail-container .theory-bc-link:hover {
    color: #4f46e5;
}

.theory-detail-container .theory-hero-section {
    background: linear-gradient(135deg, #eef2ff 0%, #fdf4ff 50%, #f0f9ff 100%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.theory-detail-container .theory-badge-category {
    background-color: #eef2ff;
    color: #4f46e5;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #e0e7ff;
}

.theory-detail-container .theory-badge-date,
.theory-detail-container .theory-badge-author {
    background-color: #ffffff;
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
}

.theory-detail-container .theory-main-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.75rem, 3.5vw + 0.5rem, 2.75rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.theory-detail-container .theory-lead-text {
    font-size: 1.125rem;
    color: #475569;
    line-height: 1.6;
}

.theory-detail-container .theory-share-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
}

.theory-detail-container .theory-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.2s ease;
}

.theory-detail-container .theory-share-btn:hover {
    background-color: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
    transform: translateY(-2px);
}

.theory-detail-container .theory-header-stat-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 10px 24px -4px rgba(79, 70, 229, 0.08);
}

.theory-detail-container .theory-stat-icon-wrapper {
    background-color: #eef2ff;
}

.theory-detail-container .theory-article-card,
.theory-detail-container .theory-service-box,
.theory-detail-container .theory-sidebar-card {
    background-color: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.theory-detail-container .theory-featured-media {
    background-color: #f1f5f9;
    max-height: 480px;
}

.theory-detail-container .theory-post-image {
    height: auto;
    max-height: 480px;
    object-fit: cover;
    display: block;
}

.theory-detail-container .theory-rich-text h2 {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 1.75rem;
    margin-bottom: 0.85rem;
}

.theory-detail-container .theory-rich-text h3 {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.theory-detail-container .theory-rich-text p {
    color: #334155;
    line-height: 1.7;
    margin-bottom: 1.2rem;
}

.theory-detail-container .theory-rich-text ul {
    color: #334155;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.theory-detail-container .theory-rich-text li {
    margin-bottom: 0.5rem;
}

.theory-detail-container .theory-service-badge {
    width: 48px;
    height: 48px;
    background-color: #eef2ff;
    flex-shrink: 0;
}

.theory-detail-container .theory-service-heading {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.theory-detail-container .theory-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.35rem;
}

.theory-detail-container .theory-input {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    border-radius: 10px;
    padding: 0.65rem 0.95rem;
    font-size: 0.9375rem;
}

.theory-detail-container .theory-input::placeholder {
    color: #94a3b8;
}

.theory-detail-container .theory-input:focus {
    background-color: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    outline: none;
}

.theory-detail-container .theory-primary-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9375rem;
    box-shadow: 0 6px 16px -3px rgba(79, 70, 229, 0.35);
    transition: all 0.25s ease;
}

.theory-detail-container .theory-primary-btn:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -4px rgba(79, 70, 229, 0.45);
}


.theory-detail-container .custom-comment-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition: border-color 0.2s ease;
}

.theory-detail-container .custom-comment-card:hover {
    border-color: #cbd5e1;
}

.theory-detail-container .avatar-initials {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.theory-detail-container .avatar-initials.avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 0.75rem;
}

.theory-detail-container .primary-avatar-grad {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
}

.theory-detail-container .secondary-avatar-grad {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

.theory-detail-container .comment-author-name {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}

.theory-detail-container .comment-author-name.small-name {
    font-size: 0.875rem;
}

.theory-detail-container .comment-badge-pill {
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 50px;
}

.theory-detail-container .comment-text {
    font-size: 0.9375rem;
    color: #334155;
    line-height: 1.55;
}

.theory-detail-container .comment-text.reply-text {
    font-size: 0.875rem;
}

.theory-detail-container .comment-metrics-chip {
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.theory-detail-container .btn-comment-action {
    background: transparent;
    border: none;
    color: #64748b;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.theory-detail-container .btn-comment-action:hover {
    color: #4f46e5;
}

.theory-detail-container .btn-comment-action.liked {
    color: #4f46e5;
}

.theory-detail-container .btn-comment-action.liked i {
    font-weight: 700;
}

.theory-detail-container .custom-comment-reply-wrapper {
    border-left: 2px solid #e2e8f0;
}

.theory-detail-container .theory-comment-form-wrap {
    background-color: #ffffff;
}


.theory-detail-container .theory-sidebar-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
}

.theory-detail-container .theory-related-item {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 0.75rem;
}

.theory-detail-container .theory-related-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.theory-detail-container .theory-related-link {
    text-decoration: none;
    transition: transform 0.2s ease;
    display: block;
}

.theory-detail-container .theory-related-link:hover .theory-related-text {
    color: #4f46e5;
}

.theory-detail-container .bg-light-gradient {
    background: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 100%);
}

.theory-detail-container .tiny-text {
    font-size: 0.75rem;
}

@media (max-width: 767.98px) {
    .theory-detail-container .theory-main-title {
        font-size: 1.125rem;
        hyphens: auto;
    }

    .theory-detail-container .theory-lead-text {
        font-size: 0.9375rem;
    }

    .theory-detail-container .theory-rich-text h2 {
        font-size: 1rem;
        hyphens: auto;
    }

    .theory-detail-container .theory-rich-text h3 {
        font-size: 0.875rem;
        hyphens: auto;
    }

    .theory-detail-container .theory-service-heading {
        font-size: 0.95rem;
        hyphens: auto;
    }
}

/* ===== PAGE TEMPLATE: theory ===== */
.theory-detail-container {
    background-color: #f8fafc;
    color: #0f172a;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.theory-detail-container .theory-breadcrumb-wrapper {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.theory-detail-container .theory-bc-link {
    color: #64748b;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.theory-detail-container .theory-bc-link:hover {
    color: #4f46e5;
}

.theory-detail-container .theory-hero-section {
    background: linear-gradient(135deg, #eef2ff 0%, #fdf4ff 50%, #f0f9ff 100%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.theory-detail-container .theory-badge-category {
    background-color: #eef2ff;
    color: #4f46e5;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #e0e7ff;
}

.theory-detail-container .theory-badge-date,
.theory-detail-container .theory-badge-author {
    background-color: #ffffff;
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
}

.theory-detail-container .theory-main-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.75rem, 3.5vw + 0.5rem, 2.75rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.theory-detail-container .theory-lead-text {
    font-size: 1.125rem;
    color: #475569;
    line-height: 1.6;
}

.theory-detail-container .theory-share-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
}

.theory-detail-container .theory-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.2s ease;
}

.theory-detail-container .theory-share-btn:hover {
    background-color: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
    transform: translateY(-2px);
}

.theory-detail-container .theory-header-stat-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 10px 24px -4px rgba(79, 70, 229, 0.08);
}

.theory-detail-container .theory-stat-icon-wrapper {
    background-color: #eef2ff;
}

.theory-detail-container .theory-article-card,
.theory-detail-container .theory-service-box,
.theory-detail-container .theory-sidebar-card {
    background-color: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.theory-detail-container .theory-featured-media {
    background-color: #f1f5f9;
    max-height: 480px;
}

.theory-detail-container .theory-post-image {
    height: auto;
    max-height: 480px;
    object-fit: cover;
    display: block;
}

.theory-detail-container .theory-rich-text h2 {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 1.75rem;
    margin-bottom: 0.85rem;
}

.theory-detail-container .theory-rich-text h3 {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.theory-detail-container .theory-rich-text p {
    color: #334155;
    line-height: 1.7;
    margin-bottom: 1.2rem;
}

.theory-detail-container .theory-rich-text ul {
    color: #334155;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.theory-detail-container .theory-rich-text li {
    margin-bottom: 0.5rem;
}

.theory-detail-container .theory-service-badge {
    width: 48px;
    height: 48px;
    background-color: #eef2ff;
    flex-shrink: 0;
}

.theory-detail-container .theory-service-heading {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.theory-detail-container .theory-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.35rem;
}

.theory-detail-container .theory-input {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    border-radius: 10px;
    padding: 0.65rem 0.95rem;
    font-size: 0.9375rem;
}

.theory-detail-container .theory-input::placeholder {
    color: #94a3b8;
}

.theory-detail-container .theory-input:focus {
    background-color: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    outline: none;
}

.theory-detail-container .theory-primary-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9375rem;
    box-shadow: 0 6px 16px -3px rgba(79, 70, 229, 0.35);
    transition: all 0.25s ease;
}

.theory-detail-container .theory-primary-btn:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -4px rgba(79, 70, 229, 0.45);
}


.theory-detail-container .custom-comment-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition: border-color 0.2s ease;
}

.theory-detail-container .custom-comment-card:hover {
    border-color: #cbd5e1;
}

.theory-detail-container .avatar-initials {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.theory-detail-container .avatar-initials.avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 0.75rem;
}

.theory-detail-container .primary-avatar-grad {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
}

.theory-detail-container .secondary-avatar-grad {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

.theory-detail-container .comment-author-name {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}

.theory-detail-container .comment-author-name.small-name {
    font-size: 0.875rem;
}

.theory-detail-container .comment-badge-pill {
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 50px;
}

.theory-detail-container .comment-text {
    font-size: 0.9375rem;
    color: #334155;
    line-height: 1.55;
}

.theory-detail-container .comment-text.reply-text {
    font-size: 0.875rem;
}

.theory-detail-container .comment-metrics-chip {
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.theory-detail-container .btn-comment-action {
    background: transparent;
    border: none;
    color: #64748b;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.theory-detail-container .btn-comment-action:hover {
    color: #4f46e5;
}

.theory-detail-container .btn-comment-action.liked {
    color: #4f46e5;
}

.theory-detail-container .btn-comment-action.liked i {
    font-weight: 700;
}

.theory-detail-container .custom-comment-reply-wrapper {
    border-left: 2px solid #e2e8f0;
}

.theory-detail-container .theory-comment-form-wrap {
    background-color: #ffffff;
}


.theory-detail-container .theory-sidebar-title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
}

.theory-detail-container .theory-related-item {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 0.75rem;
}

.theory-detail-container .theory-related-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.theory-detail-container .theory-related-link {
    text-decoration: none;
    transition: transform 0.2s ease;
    display: block;
}

.theory-detail-container .theory-related-link:hover .theory-related-text {
    color: #4f46e5;
}

.theory-detail-container .bg-light-gradient {
    background: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 100%);
}

.theory-detail-container .tiny-text {
    font-size: 0.75rem;
}

@media (max-width: 767.98px) {
    .theory-detail-container .theory-main-title {
        font-size: 1.125rem;
        hyphens: auto;
    }

    .theory-detail-container .theory-lead-text {
        font-size: 0.9375rem;
    }

    .theory-detail-container .theory-rich-text h2 {
        font-size: 1rem;
        hyphens: auto;
    }

    .theory-detail-container .theory-rich-text h3 {
        font-size: 0.875rem;
        hyphens: auto;
    }

    .theory-detail-container .theory-service-heading {
        font-size: 0.95rem;
        hyphens: auto;
    }
}