/* ============== Section base ============== */
            .tx-section {
                background: linear-gradient(180deg, var(--bg-1) 0%, var(--white) 30%, var(--bg-1) 100%);
                padding: clamp(80px, 9vw, 120px) 2rem;
                position: relative;
                overflow: hidden;
            }
            .tx-section::before {
                content: '';
                position: absolute;
                top: 5%; left: -8%;
                width: 320px; height: 320px;
                background: radial-gradient(circle, rgba(107,63,160,.07) 0%, transparent 70%);
                pointer-events: none;
            }
            .tx-section::after {
                content: '';
                position: absolute;
                bottom: 8%; right: -6%;
                width: 280px; height: 280px;
                background: radial-gradient(circle, rgba(184,137,46,.07) 0%, transparent 70%);
                pointer-events: none;
            }

            /* ============== Toolbar ============== */
            .tx-toolbar {
                display: flex;
                align-items: center;
                gap: .75rem;
                max-width: 1400px;
                margin: 0 auto 1.5rem;
                flex-wrap: wrap;
            }
            .tx-search-wrap {
                flex: 1;
                min-width: 220px;
                position: relative;
                display: flex;
                align-items: center;
            }
            .tx-search-wrap i {
                position: absolute;
                left: 14px;
                color: var(--ink-3);
                font-size: 13px;
                pointer-events: none;
            }
            .tx-search-wrap input {
                width: 100%;
                padding: 11px 14px 11px 38px;
                background: var(--white);
                border: 1px solid var(--bg-3);
                border-radius: var(--r);
                font-family: var(--sans);
                font-size: 14px;
                color: var(--ink);
                outline: none;
                transition: all .25s var(--ease);
            }
            .tx-search-wrap input:focus {
                border-color: var(--v-bg2);
                box-shadow: 0 0 0 4px rgba(107,63,160,.08);
            }
            .tx-search-wrap input::placeholder { color: var(--ink-3); }

            .tx-filter-wrap {
                position: relative;
                display: flex;
                align-items: center;
            }
            .tx-filter-wrap select {
                appearance: none;
                -webkit-appearance: none;
                padding: 11px 36px 11px 14px;
                background: var(--white);
                border: 1px solid var(--bg-3);
                border-radius: var(--r);
                font-family: var(--sans);
                font-size: 13.5px;
                color: var(--ink);
                font-weight: 500;
                cursor: pointer;
                outline: none;
                transition: all .25s var(--ease);
            }
            .tx-filter-wrap select:focus {
                border-color: var(--v-bg2);
            }
            .tx-filter-arr {
                position: absolute;
                right: 14px;
                color: var(--ink-3);
                font-size: 10px;
                pointer-events: none;
            }

            .tx-legend {
                display: flex;
                gap: 1rem;
                margin-left: auto;
            }
            .tx-legend-item {
                display: inline-flex;
                align-items: center;
                gap: .4rem;
                font-family: var(--mono);
                font-size: 10.5px;
                font-weight: 600;
                color: var(--ink-3);
                letter-spacing: .04em;
                text-transform: uppercase;
            }
            .tx-legend-dot {
                width: 8px; height: 8px;
                border-radius: 50%;
            }
            .tx-dot-real { background: var(--blue); }
            .tx-dot-ai { background: var(--teal); }

            /* ============== 2-panel grid ============== */
            .tx-grid {
                display: grid;
                grid-template-columns: 1fr 380px;
                gap: 2rem;
                max-width: 1400px;
                margin: 0 auto;
                align-items: start;
            }

            /* ============== LEFT: Thumbnail grid ============== */
            .tx-list {
                background: var(--white);
                border: 1px solid var(--bg-3);
                border-radius: var(--r3);
                padding: 1.5rem;
                box-shadow: 0 8px 32px rgba(24,19,30,.04);
                position: relative;
            }

            .tx-thumbs {
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                gap: 1rem;
            }

            .tx-thumb {
                position: relative;
                cursor: pointer;
                transition: all .3s var(--ease);
                background: transparent;
                padding: .35rem;
                border-radius: var(--r2);
                border: 2px solid transparent;
            }
            .tx-thumb:hover {
                transform: translateY(-3px);
                background: var(--bg-1);
            }
            .tx-thumb-active {
                background: var(--v-bg);
                border-color: var(--v);
                box-shadow: 0 6px 20px rgba(107,63,160,.18);
            }
            .tx-thumb-active .tx-thumb-name { color: var(--v); }

            /* Photo wrap */
            .tx-thumb-img-wrap {
                position: relative;
                aspect-ratio: 1 / 1;
                overflow: hidden;
                border-radius: var(--r);
                background: var(--bg-1);
            }
            /* Synthetic persona: green gradient bg */
            .tx-thumb-ai .tx-thumb-img-wrap {
                background: linear-gradient(155deg, #d8f0e0 0%, #b6dfc4 50%, #88c4a0 100%);
            }
            /* Real person: blue gradient bg */
            .tx-thumb-real .tx-thumb-img-wrap {
                background: linear-gradient(155deg, #d6e3f5 0%, #adc7eb 50%, #7fa3dc 100%);
            }
            .tx-thumb-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center top;
                transition: transform .5s var(--ease);
            }
            .tx-thumb:hover .tx-thumb-img {
                transform: scale(1.06);
            }

            /* Tone indicator badge */
            .tx-thumb-tone-ic {
                position: absolute;
                top: 6px; left: 6px;
                width: 22px; height: 22px;
                border-radius: 50%;
                background: rgba(255,255,255,.92);
                backdrop-filter: blur(4px);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 9px;
                box-shadow: 0 2px 6px rgba(0,0,0,.08);
            }
            .tx-thumb-real .tx-thumb-tone-ic { color: var(--blue); }
            .tx-thumb-ai .tx-thumb-tone-ic { color: var(--teal); }

            /* Name + role */
            .tx-thumb-name {
                margin-top: .55rem;
                font-size: 12.5px;
                font-weight: 600;
                color: var(--ink);
                text-align: center;
                line-height: 1.25;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                transition: color .25s var(--ease);
            }
            .tx-thumb-role {
                margin-top: 2px;
                font-size: 10.5px;
                font-weight: 500;
                color: var(--ink-3);
                text-align: center;
                line-height: 1.25;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* Empty state */
            .tx-empty {
                text-align: center;
                padding: 3rem 1rem;
                color: var(--ink-3);
            }
            .tx-empty i {
                font-size: 32px;
                color: var(--bg-4);
                display: block;
                margin-bottom: .8rem;
            }
            .tx-empty p {
                font-size: 14px;
                margin: 0;
            }

            /* ============== RIGHT: Detail panel ============== */
            .tx-detail {
                background: var(--white);
                border: 1px solid var(--bg-3);
                border-radius: var(--r3);
                padding: 1.8rem;
                box-shadow: 0 8px 32px rgba(24,19,30,.05);
                position: sticky;
                top: 2rem;
                max-height: calc(100vh - 4rem);
                overflow-y: auto;
                scrollbar-width: thin;
                scrollbar-color: var(--bg-4) transparent;
            }
            .tx-detail::-webkit-scrollbar { width: 6px; }
            .tx-detail::-webkit-scrollbar-track { background: transparent; }
            .tx-detail::-webkit-scrollbar-thumb {
                background: var(--bg-4);
                border-radius: 3px;
            }

            /* Close button (hidden on desktop) */
            .tx-close {
                position: absolute;
                top: 14px;
                right: 14px;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                border: 1px solid var(--bg-3);
                background: var(--white);
                color: var(--ink-3);
                display: none;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                font-size: 14px;
                transition: all .2s var(--ease);
                z-index: 5;
            }
            .tx-close:hover {
                background: var(--ink);
                color: white;
                border-color: var(--ink);
                transform: rotate(90deg);
            }

            /* Empty state in detail panel */
            .tx-detail-empty {
                text-align: center;
                padding: 1rem 0;
            }
            .tx-detail-empty-ic {
                width: 64px; height: 64px;
                margin: 0 auto 1.2rem;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--v-bg) 0%, var(--v-bg2) 100%);
                color: var(--v);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                animation: txHoverBob 2s ease-in-out infinite;
            }
            @keyframes txHoverBob {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-4px); }
            }
            .tx-detail-empty-h {
                font-family: var(--serif);
                font-size: 22px;
                font-weight: 600;
                color: var(--ink);
                margin-bottom: .5rem;
                letter-spacing: -.01em;
            }
            .tx-detail-empty-desc {
                font-size: 14px;
                line-height: 1.65;
                color: var(--ink-3);
                margin-bottom: 1.8rem;
                max-width: 280px;
                margin-left: auto;
                margin-right: auto;
            }
            .tx-detail-empty-stats {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: .5rem;
                padding-top: 1.2rem;
                border-top: 1px solid var(--bg-3);
            }
            .tx-stat {
                text-align: center;
            }
            .tx-stat-num {
                font-family: var(--serif);
                font-size: 26px;
                font-weight: 600;
                color: var(--v);
                line-height: 1;
                letter-spacing: -.02em;
                margin-bottom: .2rem;
            }
            .tx-stat-lbl {
                font-family: var(--mono);
                font-size: 9px;
                font-weight: 600;
                color: var(--ink-3);
                letter-spacing: .12em;
                text-transform: uppercase;
            }

            /* ============== Detail content (filled) ============== */
            .tx-detail-content {
                animation: txDetailIn .45s cubic-bezier(.22,1,.36,1) both;
            }
            @keyframes txDetailIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }

            /* Hero block */
            .tx-detail-hero {
                text-align: center;
                margin-bottom: 1.4rem;
            }
            .tx-detail-portrait-wrap {
                width: 140px;
                height: 140px;
                border-radius: 50%;
                overflow: hidden;
                margin: 0 auto 1.2rem;
                background: linear-gradient(155deg, #d8f0e0 0%, #88c4a0 100%);
                box-shadow: 0 8px 24px rgba(0,0,0,.1);
                position: relative;
            }
            .tx-detail[data-tone="real"] .tx-detail-portrait-wrap {
                background: linear-gradient(155deg, #d6e3f5 0%, #7fa3dc 100%);
            }
            .tx-detail-portrait-wrap::before {
                content: '';
                position: absolute;
                inset: -4px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--teal) 0%, transparent 60%);
                z-index: -1;
                opacity: .3;
            }
            .tx-detail[data-tone="real"] .tx-detail-portrait-wrap::before {
                background: linear-gradient(135deg, var(--blue) 0%, transparent 60%);
            }
            .tx-detail-portrait {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center top;
            }

            .tx-detail-tag {
                display: inline-flex;
                align-items: center;
                gap: .5rem;
                padding: 5px 11px;
                background: var(--teal-bg);
                color: var(--teal);
                border-radius: var(--r-full);
                font-family: var(--mono);
                font-size: 9.5px;
                font-weight: 700;
                letter-spacing: .14em;
                text-transform: uppercase;
                margin-bottom: .8rem;
            }
            .tx-detail[data-tone="real"] .tx-detail-tag {
                background: var(--blue-bg);
                color: var(--blue);
            }
            .tx-tag-dot {
                width: 6px; height: 6px;
                border-radius: 50%;
                background: var(--teal);
                animation: txTagPulse 2s infinite;
            }
            .tx-detail[data-tone="real"] .tx-tag-dot {
                background: var(--blue);
            }
            @keyframes txTagPulse {
                0%, 100% { opacity: 1; }
                50% { opacity: .4; }
            }

            .tx-detail-name {
                font-family: var(--serif);
                font-size: clamp(22px, 2.6vw, 28px);
                font-weight: 600;
                color: var(--ink);
                line-height: 1.15;
                letter-spacing: -.02em;
                margin-bottom: .35rem;
            }
            .tx-detail-role {
                font-size: 13.5px;
                color: var(--teal);
                font-weight: 600;
            }
            .tx-detail[data-tone="real"] .tx-detail-role {
                color: var(--blue);
            }

            /* Divider */
            .tx-detail-divider {
                height: 1px;
                background: var(--bg-3);
                margin: 0 0 1.3rem;
            }

            /* Specialty section */
            .tx-detail-flag-lbl {
                font-family: var(--mono);
                font-size: 9.5px;
                font-weight: 700;
                letter-spacing: .16em;
                color: var(--ink-3);
                text-transform: uppercase;
                margin-bottom: .35rem;
            }
            .tx-detail-h {
                font-family: var(--serif);
                font-size: clamp(22px, 2.4vw, 28px);
                font-weight: 600;
                color: var(--teal);
                line-height: 1.15;
                letter-spacing: -.02em;
                margin-bottom: 1rem;
            }
            .tx-detail[data-tone="real"] .tx-detail-h {
                color: var(--blue);
            }

            /* Bio */
            .tx-detail-bio {
                font-size: 14px;
                line-height: 1.7;
                color: var(--ink-3);
                margin-bottom: 1.5rem;
            }

            /* Section title */
            .tx-detail-section-title {
                font-family: var(--mono);
                font-size: 10px;
                font-weight: 700;
                letter-spacing: .16em;
                color: var(--ink);
                text-transform: uppercase;
                padding-top: 1.1rem;
                border-top: 1px solid var(--bg-3);
                margin-bottom: .9rem;
            }

            /* Focus list */
            .tx-focus-list {
                display: flex;
                flex-direction: column;
                gap: .8rem;
                margin-bottom: 1.4rem;
            }
            .tx-focus-item {
                display: flex;
                gap: .75rem;
                align-items: flex-start;
            }
            .tx-focus-ic {
                width: 30px; height: 30px;
                border-radius: 8px;
                background: var(--teal-bg);
                color: var(--teal);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 11px;
                flex-shrink: 0;
                margin-top: 1px;
            }
            .tx-detail[data-tone="real"] .tx-focus-ic {
                background: var(--blue-bg);
                color: var(--blue);
            }
            .tx-focus-text { flex: 1; min-width: 0; }
            .tx-focus-name {
                font-size: 13px;
                font-weight: 600;
                color: var(--ink);
                line-height: 1.3;
                margin-bottom: .15rem;
            }
            .tx-focus-desc {
                font-size: 11.5px;
                color: var(--ink-3);
                line-height: 1.5;
            }

            /* ============== Footer count ============== */
            .tx-foot {
                max-width: 1400px;
                margin: 1.5rem auto 0;
                display: flex;
                justify-content: center;
                gap: 2rem;
                flex-wrap: wrap;
                font-family: var(--mono);
                font-size: 11px;
                color: var(--ink-3);
                letter-spacing: .04em;
            }
            .tx-foot-item {
                display: inline-flex;
                align-items: center;
                gap: .4rem;
            }
            .tx-foot-item i { color: var(--v); }
            .tx-foot-item strong { color: var(--ink); font-weight: 700; font-size: 13px; }

            /* ============== Mobile backdrop ============== */
            .tx-backdrop {
                position: fixed;
                inset: 0;
                background: rgba(15,12,30,.55);
                backdrop-filter: blur(3px);
                -webkit-backdrop-filter: blur(3px);
                opacity: 0;
                visibility: hidden;
                transition: opacity .2s ease, visibility .2s ease;
                z-index: 998;
            }
            .tx-backdrop.active {
                opacity: 1;
                visibility: visible;
            }

            /* ============== RESPONSIVE ============== */

            /* Tablet: 4-col thumbs + sticky right detail (narrower) */
            @media (max-width: 1180px) {
                .tx-grid {
                    grid-template-columns: 1fr 340px;
                    gap: 1.5rem;
                }
                .tx-thumbs {
                    grid-template-columns: repeat(4, 1fr);
                }
            }

            /* ============== MOBILE — INLINE ACCORDION EXPANSION ==============
               When a profile is tapped, the full description expands inline
               directly below that profile's row (accordion style).
               No modal, no backdrop — the detail panel becomes a full-width
               grid item inserted after the clicked row via JS.
            ============================================================= */
            @media (max-width: 768px) {
                /* Grid collapses to single column */
                .tx-grid {
                    grid-template-columns: minmax(0, 1fr);
                    gap: 1rem;
                }
                .tx-list {
                    padding: .75rem;
                    min-width: 0;
                    overflow: hidden;
                }

                /* Thumbnails — 3-col with comfortable tap targets.
                   minmax(0,1fr) prevents grid blowout from wide inline detail content. */
                .tx-thumbs {
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                    gap: .65rem;
                    align-items: start;
                    min-width: 0;
                }
                .tx-thumb {
                    padding: .45rem .35rem;
                    min-width: 0;
                    -webkit-tap-highlight-color: transparent;
                    transition: transform .2s var(--ease), background .2s ease;
                }
                .tx-thumb:active {
                    transform: scale(.94);
                    background: var(--bg-1);
                }
                .tx-thumb-name { font-size: 11.5px; }
                .tx-thumb-role { font-size: 9.5px; }

                /* Active thumb gets a clear highlight ring + connector */
                .tx-thumb.tx-thumb-active {
                    background: var(--bg-1);
                    box-shadow: 0 0 0 2px var(--v) inset;
                    border-radius: 14px;
                    position: relative;
                    z-index: 2;
                }

                /* ===== INLINE ACCORDION DETAIL PANEL ===== */
                .tx-detail {
                    /* Becomes a full-width grid item (JS sets grid-column) */
                    position: relative !important;
                    top: auto !important;
                    left: auto !important;
                    right: auto !important;
                    bottom: auto !important;
                    transform: none !important;
                    width: 100% !important;
                    max-width: 100% !important;
                    min-width: 0 !important;
                    margin: 0 !important;
                    z-index: 3 !important;
                    grid-column: 1 / -1 !important;
                    /* Collapsed by default */
                    max-height: 0 !important;
                    opacity: 0 !important;
                    overflow: hidden !important;
                    visibility: hidden !important;
                    padding: 0 !important;
                    background: var(--white);
                    border: 1px solid var(--bg-3);
                    border-radius: 16px !important;
                    box-shadow: none !important;
                    transition: max-height .5s cubic-bezier(.4, 0, .2, 1),
                                opacity .35s ease,
                                margin .4s ease,
                                padding .4s ease,
                                visibility .5s ease !important;
                    -webkit-overflow-scrolling: touch;
                }
                .tx-detail.active {
                    max-height: 1400px !important;
                    opacity: 1 !important;
                    visibility: visible !important;
                    margin: .25rem 0 .5rem !important;
                    overflow: visible !important;
                    box-shadow:
                        0 12px 32px rgba(107, 63, 160, 0.12),
                        0 2px 8px rgba(24, 19, 30, 0.05) !important;
                }

                /* Decorative top accent bar (purple, matches news cards) */
                .tx-detail::before {
                    content: '' !important;
                    display: block !important;
                    position: absolute !important;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 3px;
                    background: linear-gradient(90deg, var(--v), var(--gold-l));
                    border-radius: 16px 16px 0 0;
                    z-index: 5;
                }
                .tx-detail::after {
                    display: none !important;
                    content: none !important;
                }

                /* Inner content padding */
                .tx-detail-content {
                    padding: 1.6rem 1.4rem 1.6rem !important;
                    min-width: 0 !important;
                }
                .tx-detail-empty {
                    padding: 0 !important;
                }

                /* Hide empty-state on mobile — panel only opens with content */
                .tx-detail-empty { display: none !important; }

                /* Hero block — centered, comfortable spacing */
                .tx-detail-hero {
                    text-align: center;
                    padding-top: .35rem;
                }
                .tx-detail-portrait-wrap {
                    width: 88px !important;
                    height: 88px !important;
                    margin: 0 auto .9rem !important;
                }
                .tx-detail-tag {
                    margin: 0 auto !important;
                    display: inline-flex !important;
                }
                .tx-detail-name {
                    font-size: 1.4rem !important;
                    margin-top: .5rem !important;
                    line-height: 1.25 !important;
                }
                .tx-detail-role {
                    font-size: .9rem !important;
                    margin-top: .25rem !important;
                }

                .tx-detail-divider {
                    margin: 1.1rem 0 !important;
                }

                .tx-detail-flag-lbl {
                    font-size: .65rem !important;
                    letter-spacing: 0.18em !important;
                    margin-bottom: .35rem !important;
                }
                .tx-detail-h {
                    font-size: 1.02rem !important;
                    margin-bottom: .85rem !important;
                    line-height: 1.4 !important;
                }
                .tx-detail-bio {
                    font-size: 13.5px !important;
                    line-height: 1.65 !important;
                    margin-bottom: 0 !important;
                    color: var(--ink-3) !important;
                }

                /* SHOW focus areas on mobile */
                .tx-focus-block {
                    display: block !important;
                    margin-top: 1.4rem !important;
                }
                .tx-detail-section-title {
                    font-size: .65rem !important;
                    letter-spacing: 0.18em !important;
                    margin-bottom: .85rem !important;
                }
                .tx-focus-list {
                    display: grid !important;
                    grid-template-columns: 1fr 1fr !important;
                    gap: .6rem !important;
                }
                .tx-focus-item {
                    padding: .75rem !important;
                    border-radius: 12px !important;
                    background: var(--bg-1) !important;
                    border: 1px solid var(--bg-3) !important;
                }
                .tx-focus-name {
                    font-size: 12px !important;
                    margin-bottom: .25rem !important;
                    line-height: 1.3 !important;
                }
                .tx-focus-desc {
                    font-size: 10.5px !important;
                    line-height: 1.5 !important;
                }
                .tx-focus-ic {
                    width: 28px !important;
                    height: 28px !important;
                    font-size: 11px !important;
                }

                /* Close button — subtle, top-right inside panel */
                .tx-close {
                    display: flex !important;
                    position: absolute !important;
                    top: 12px !important;
                    right: 12px !important;
                    width: 32px !important;
                    height: 32px !important;
                    background: var(--bg-2) !important;
                    color: var(--ink-2) !important;
                    border: none !important;
                    font-size: 13px !important;
                    box-shadow: none !important;
                    z-index: 10;
                    border-radius: 50% !important;
                    transition: background .2s ease, transform .15s var(--ease) !important;
                }
                .tx-close:active {
                    transform: scale(.9) !important;
                    background: var(--bg-3) !important;
                }

                /* Backdrop not used in accordion mode */
                .tx-backdrop {
                    display: none !important;
                }

                /* Toolbar stacks vertically */
                .tx-toolbar {
                    flex-direction: column;
                    align-items: stretch;
                }
                .tx-search-wrap { min-width: 0; }
                .tx-filter-wrap select { width: 100%; }
                .tx-legend {
                    margin-left: 0;
                    justify-content: center;
                    flex-wrap: wrap;
                }

                /* Footer count: simplified */
                .tx-foot {
                    flex-direction: column;
                    gap: .5rem;
                    text-align: center;
                }
            }

            /* Very small phones — single-column focus grid, tighter typography */
            @media (max-width: 380px) {
                .tx-thumbs {
                    gap: .5rem;
                }
                .tx-thumb { padding: .3rem .25rem; }
                .tx-thumb-name { font-size: 10.5px; }
                .tx-thumb-role { display: none; }

                .tx-focus-list {
                    grid-template-columns: 1fr !important;
                }
                .tx-detail-name { font-size: 1.3rem !important; }
                .tx-detail-bio { font-size: 13px !important; }
            }