/**
* Insights Page Styles
*
* Follows Palomarr design system:
* - P-shaped corners (border-radius: 1rem 1rem 1rem 0)
* - Dark background: #122C23
* - Accent greens: #daff98, #99f682, #22b49c
* - Light background: #fcfff6
*
* @package Palomarr
* @since 2025-12-19
*/

/* =============================================================================
VARIABLES & RESETS
============================================================================= */
.insights-pdf-btn {
    gap: 0.6rem;
}

.hero-actions .insights-pdf-btn img {
    width: 12px;
    height: 12px;
}

/* PDF Button Loading Circles - White */
.insights-pdf-btn.generating {
    pointer-events: none;
    opacity: 0.9;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.insights-pdf-btn .circles-pdf-btn {
    width: 0.9rem;
    height: 0.9rem;
    min-width: 0.9rem;
    min-height: 0.9rem;
    display: flex;
    position: relative;
    margin: 0 auto;
}

.insights-pdf-btn .circle-pdf-btn {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 130% 130% 117% 114% / 115% 120% 77% 125%;
    box-shadow: 0 0 0.7px 0.7px rgba(255, 255, 255, 0.8), inset 0 0 1.5px 0.7px rgba(255, 255, 255, 0.8);
    opacity: 0.7;
}

.insights-pdf-btn .circle-pdf-btn:nth-child(4),
.insights-pdf-btn .circle-pdf-btn:nth-child(5) {
    border-width: 0;
    box-shadow: 0 0 3px 0px rgba(255, 255, 255, 0.6), inset 0 0 3px 1px rgba(255, 255, 255, 0.6);
    opacity: 0.3;
}

.insights-pdf-btn .circle-pdf-btn:nth-child(1) {
    transform-origin: 48% 50%;
    animation: spin1 5s linear infinite;
}

.insights-pdf-btn .circle-pdf-btn:nth-child(2) {
    transform-origin: 50% 52%;
    animation: spin2 5s linear infinite;
}

.insights-pdf-btn .circle-pdf-btn:nth-child(3) {
    transform-origin: 52% 50%;
    animation: spin3 5s linear infinite;
}

.insights-pdf-btn .circle-pdf-btn:nth-child(4) {
    transform-origin: 50% 48%;
    animation: spin4 5s linear infinite;
    width: 80% !important;
    height: 110% !important;
}

.insights-pdf-btn .circle-pdf-btn:nth-child(5) {
    transform-origin: 49.7% 49.7%;
    animation: spin5 5s linear infinite;
    width: 110% !important;
}

#header-space {
    display: none !important;
}

.container-wrap {
    padding-top: 0 !important;
}

@media screen and (max-width: 640px) {
    .container {
        max-width: 92%;
    }
}

/* =============================================================================
SALIENT ROW STRUCTURE - FULL WIDTH BACKGROUNDS
============================================================================= */

body[data-col-gap="50px"] .vc_row-fluid .span_12 {
    margin: 0;
}

.insights-page {
    padding-bottom: 0 !important;
}

.insights-page .row-bg-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50vw;
    margin-left: calc(-50vw + var(--scroll-bar-w, 0) / 2);
    width: 100vw;
    width: calc(100vw - var(--scroll-bar-w, 0));
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.insights-page .row-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.insights-page .row_col_wrap_12 {
    position: relative;
    z-index: 1;
}

/* Section-specific backgrounds */
.insights-hero .row-bg {
    background: #112B23;
}

.insights-promo-section {
    background: var(--color-light);
}

.insights-cta-footer {
    background: #2e3c38;
}

/* =============================================================================
SECTION 1: HERO
============================================================================= */

.insights-hero {
    color: var(--text-white);
    padding: 8rem 0 5rem;
}

.insights-hero .row-bg-layer .row-bg::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 200%;
    height: 200%;
    background-image: url(/wp-content/uploads/2025/12/palomarr-bg-circles-14.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: none;
    opacity: 0.02;
}

.insights-breadcrumbs {
    margin-bottom: 2rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

.insights-breadcrumbs a {
    color: var(--color-accent);
    text-decoration: none;
}

.insights-breadcrumbs a:hover {
    text-decoration: underline;
}

.insights-breadcrumbs .separator {
    margin: 0 0.5rem;
    opacity: 0.5;
}

.hero-content-wrapper {
    display: flex;
    gap: 3rem;
    align-items: stretch;
    justify-content: space-between;
}

.hero-content-left {
    flex: 1;
    max-width: var(--max-width-50);
}

.hero-content-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* =============================================================================
   PDF PREVIEW CARD
   ============================================================================= */

.pdf-preview-card {
    background: rgba(90, 121, 107, 0.12);
    border-radius: 24px 24px 24px 0;
    backdrop-filter: blur(8px);
    padding: 20px;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    width: 210px;
    cursor: pointer;
    /* Hidden until images load */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-out, transform 0.3s ease, box-shadow 0.3s ease;
}

.pdf-preview-card.loaded {
    opacity: 1;
    pointer-events: auto;
}

.pdf-preview-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pdf-preview-header {
    font-family: var(--font-satoshi), sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: white;
    letter-spacing: -0.01em;
}

.pdf-preview-inner {
    background: white;
    border-radius: 16px 16px 16px 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Hide all images in card until loaded to prevent flash */
.pdf-preview-card img {
    opacity: 0;
}

.pdf-preview-card.loaded img {
    opacity: 1;
}

.pdf-preview-card.loaded .pdf-preview-logo {
    opacity: 0.8;
}

.pdf-preview-logo {
    position: absolute;
    top: 14px;
    right: 15px;
    width: 40px;
    height: 12px;
    object-fit: contain;
}

.pdf-preview-content {
    padding: 35px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pdf-preview-eyebrow {
    display: flex;
    align-items: center;
    gap: 2px;
}

.pdf-preview-eyebrow .eyebrow-brand {
    font-family: var(--font-satoshi), sans-serif;
    font-weight: 700;
    font-size: 6px;
    color: #252827;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    line-height: 1.6;
}

.pdf-preview-eyebrow .eyebrow-separator {
    font-family: var(--font-satoshi), sans-serif;
    font-size: 8px;
    color: rgba(37, 40, 39, 0.3);
    letter-spacing: 1.2px;
    width: 12px;
    text-align: center;
}

.pdf-preview-eyebrow .eyebrow-quarter {
    font-family: var(--font-satoshi), sans-serif;
    font-weight: 700;
    font-size: 6px;
    color: #7c988f;
    letter-spacing: 0.8px;
    line-height: 1.2;
}

.pdf-preview-title {
    font-family: var(--font-satoshi), sans-serif;
    font-size: 10px;
    color: #252827;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    line-height: 1.1;
    margin: 0;
    word-break: break-word;
}

.pdf-preview-image {
    width: 100%;
    height: 130px;
    margin-left: 20px;
}

.pdf-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.modal-template-outer .pdf-preview-image {
    height: 200px;
    margin-left: 30px;
}

.modal-template-outer .download-report-preview .pdf-preview-inner {
    width: 240px;
}

.modal-template-outer .pdf-preview-content {
    padding: 35px 30px 26px;
}

.modal-template-outer .download-report-preview {
    transition: all 0.3s ease;
}

.modal-template-outer .download-report-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-black) 25%, transparent);
}

/* PDF Preview Card Loading State */
.pdf-preview-card.generating {
    pointer-events: none;
}

.pdf-preview-card.generating .pdf-preview-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* White circles for card header */
.pdf-preview-header .circles-pdf-btn {
    width: 1rem;
    height: 1rem;
}

.pdf-preview-header .circle-pdf-btn {
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0.7px 0.7px rgba(255, 255, 255, 0.8), inset 0 0 1.5px 0.7px rgba(255, 255, 255, 0.8);
}

.pdf-preview-header .circle-pdf-btn:nth-child(4),
.pdf-preview-header .circle-pdf-btn:nth-child(5) {
    box-shadow: 0 0 3px 0px rgba(255, 255, 255, 0.6), inset 0 0 3px 1px rgba(255, 255, 255, 0.6);
}

/* Ensure inner elements don't block card clicks */
.pdf-preview-inner,
.pdf-preview-content,
.pdf-preview-image,
.pdf-preview-logo {
    pointer-events: none;
}

/* =============================================================================
   DOWNLOAD REPORT MODAL (?DownloadReport=Y)
   ============================================================================= */

.download-report-modal .modal-container {
    max-width: 32rem;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.download-report-modal .modal-inner {
    width: 100%;
}

.download-report-modal .modal-header {
    margin-bottom: 0;
}

.download-report-modal .modal-header-text {
    text-align: center;
}

.download-report-modal .modal-message-outer {
    margin: 1.5rem 0;
}

.download-report-modal .modal-message-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.download-report-preview {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    cursor: pointer;
}

.download-report-preview .pdf-preview-inner {
    width: 280px;
    pointer-events: none;
}

.download-report-preview .pdf-preview-inner img {
    opacity: 1;
}

.download-report-preview .pdf-preview-logo {
    opacity: 0.8;
}

.download-report-description {
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
    max-width: 28rem;
    margin: 0;
}

.download-report-modal .modal-form-outer {
    text-align: center;
}

.download-report-modal .modal-button-row {
    justify-content: center;
}

/* Desktop: Hide mobile button, show card */
.insights-pdf-btn-mobile {
    display: none !important;
}

/* Mobile: Hide card, show mobile button */
@media screen and (max-width: 999px) {
    .hero-content-wrapper {
        flex-direction: column;
        gap: 2rem;
    }

    .hero-content-left {
        max-width: 100%;
    }

    .hero-content-right {
        display: none;
    }

    .insights-pdf-btn-mobile {
        display: flex !important;
    }
}

.insights-hero h1 {
    margin-bottom: 1.5rem;
}

.insights-hero .hero-summary {
    font-size: 1.125rem;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.insights-hero .hero-summary-paragraph {
    margin-bottom: 1rem;
}

.insights-hero .hero-meta-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.span_12.light .hero-quarter-selector .select2-container--default .select2-selection--single {
    height: 42px !important;
    padding: 0 1rem !important;
}

.insights-hero .hero-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

.span_12.light .hero-quarter-selector .select2-container--default .select2-selection--single span#select2-quarter-select-container {
    line-height: 2.8 !important;
    font-size: 0.9rem !important;
}

body[data-fancy-form-rcs="1"] .hero-quarter-selector .select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 36px;
}

.hero-quarter-selector span.select2-selection__arrow:after {
    width: 12px;
    height: 12px;
    top: 15px;
    left: 8px;
    background-size: cover;
}

.insights-hero .meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.insights-hero .meta-value {
    color: var(--color-accent);
}

.insights-hero .meta-separator {
    opacity: 0.4;
    margin: 0 0.5rem;
}

/* Quarter Selector */
.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-quarter-selector .select2-container {
    height: 42px !important;
}

.hero-quarter-selector label {
    font-size: 0.9rem;
    opacity: 0.8;
}

.hero-quarter-selector .quarter-select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--text-white);
    font-size: 0.9rem;
    cursor: pointer;
}

.hero-quarter-selector .quarter-select:hover {
    border-color: var(--color-accent);
}

.hero-quarter-selector .quarter-select option {
    background: #112B23;
    color: var(--text-white);
}

/* =============================================================================
SECTION 2: ORBIT
============================================================================= */

.insights-orbit-section {
    padding: 4rem 0;
    max-width: var(--max-width-60);
    margin: 0 auto;
}

.insights-orbit-section .section-title {
    margin-bottom: 1.5rem;
    max-width: var(--max-width-60);
}

.insights-orbit-section .section-description {
    font-size: 1.125rem;
    color: var(--text-muted);
    max-width: var(--max-width-60);
    margin: 0 auto 3rem;
}

/* Orbit Container */
.orbit-container {
    margin-bottom: 2rem;
}

.orbit-wrapper {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    max-width: var(--max-width-60);
    margin: 0 auto;
}

.axis-arrow {
    font-size: 1rem;
}

/* Orbit Chart Area */
.orbit-chart {
    flex: 1;
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--color-white);
    box-shadow: 0 4px 60px #2528271a;
    border-radius: var(--border-radius-p-2);
}

/* Orbit labels container */
.orbit-labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.quadrant-label {
    position: absolute;
    font-size: 0.75rem;
    line-height: 1.8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(0, 0, 0, 0.3);
    text-shadow:
    0 0 8px #fff,
    0 0 12px #fff,
    0 0 16px #fff,
    0 0 20px #fff,
    0 0 24px #fff,
    0 0 32px #fff,
    0 0 48px #fff;
}

.orbit-x-label,
.orbit-y-label {
    position: absolute;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

.orbit-x-label {
    top: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.4s ease-out;
}

.orbit-container.orbit-shift-active .orbit-x-label {
    top: 1.5rem;
    left: 55%;
}

.orbit-y-label {
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
}

.orbit-y-label .axis-arrow {
    rotate: 90deg;
}

.orbit-x-label .strong,
.orbit-y-label .strong {
    font-size: 0.95rem;
    text-shadow:
    0 0 8px #fff,
    0 0 12px #fff,
    0 0 16px #fff,
    0 0 20px #fff,
    0 0 24px #fff,
    0 0 32px #fff,
    0 0 48px #fff;
}

.quadrant-label.quadrant-leader {
    top: 1.5rem;
    right: 1.7rem;
}

.quadrant-label.quadrant-challenger {
    bottom: 1.5rem;
    right: 1.7rem;
}

.quadrant-label.quadrant-contender {
    top: 1.5rem;
    left: 1.7rem;
}

.quadrant-label.quadrant-emerging {
    bottom: 1.5rem;
    left: 1.7rem;
}

/* Orbit curves (concentric ellipses from top-right, rotated 45deg) */
.orbit-curves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: var(--border-radius-p-2);
    overflow: hidden;
}

.orbit-curve {
    position: absolute;
    border: 1px solid #E8F0ED;
    border-radius: 50%;
    rotate: 45deg;
}

/* Ring 1 - innermost (top-right corner) */
.orbit-curve-1 {
    width: 50%;
    height: 38%;
    top: 16%;
    right: -1%;
    border-color: #dceae5;
}

/* Ring 2 */
.orbit-curve-2 {
    width: 85%;
    height: 65%;
    top: 8%;
    right: -15%;
    border-color: #dfece8;
}

/* Ring 3 */
.orbit-curve-3 {
    width: 120%;
    height: 92%;
    top: 0;
    right: -29%;
    border-color: #e1edea;
}

/* Ring 4 */
.orbit-curve-4 {
    width: 155%;
    height: 119%;
    top: -8%;
    right: -43%;
    border-color: #e3eeeb;
}

/* Ring 5 */
.orbit-curve-5 {
    width: 190%;
    height: 146%;
    top: -16%;
    right: -57%;
    border-color: #e4efec;
}

/* Ring 6 - outermost */
.orbit-curve-6 {
    width: 225%;
    height: 173%;
    top: -24%;
    right: -71%;
    border-color: #e5eeeb;
}

/* Orbit dots container */
.orbit-dots {
    position: absolute;
    top: 4rem;
    left: 3rem;
    width: calc(100% - 6rem);
    height: calc(100% - 9rem);
}

/* Individual supplier dot */
.orbit-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #CCDDD8;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 1;
    opacity: 1; /* Ensure dots are visible by default */
}

.orbit-dot:hover {
    transform: scale(1.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 50 !important;
}

/* Score tiers - 10% each based on combined score (best to worst) */
/* Colors: tiers 1-3 stand out (dark green), tiers 4-10 fade quickly to grayish-green */
/* Sizes: tier 1 is 14px, tier 2-3 step down, tiers 4-10 uniform at 10px */
.orbit-dot.score-tier-1  { background: #1D463A; width: 14px; height: 14px; z-index: 10; }
.orbit-dot.score-tier-2  { background: #6A847C; width: 11px; height: 11px; z-index: 9; }
.orbit-dot.score-tier-3  { background: #A0B3AC; width: 10.5px; height: 10.5px; z-index: 8; }
.orbit-dot.score-tier-4  { background: #B5C5BF; width: 10px; height: 10px; z-index: 7; }
.orbit-dot.score-tier-5  { background: #C5D2CD; width: 10px; height: 10px; z-index: 6; }
.orbit-dot.score-tier-6  { background: #BFCEC8; width: 10px; height: 10px; z-index: 5; }
.orbit-dot.score-tier-7  { background: #CDD9D4; width: 10px; height: 10px; z-index: 4; }
.orbit-dot.score-tier-8  { background: #D8E3DF; width: 10px; height: 10px; z-index: 3; }
.orbit-dot.score-tier-9  { background: #E2ECE8; width: 10px; height: 10px; z-index: 2; }
.orbit-dot.score-tier-10 { background: #EAF4F1; width: 10px; height: 10px; z-index: 1; }

/* Dot tooltip */
.orbit-dot .dot-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 9.5rem;
    transform: translateX(-50%);
    background: white;
    color: #1a1a1a;
    padding: 0.5rem 0.75rem 0.65rem 0.6rem;
    margin-top: 8px;
    border-radius: var(--border-radius-p);
    font-size: 0.8rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease 0.15s;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-black) 15%, transparent);
    z-index: 100;
}

/* Invisible bridge to keep tooltip open when hovering between dot and tooltip */
.orbit-dot .dot-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 12px;
}

.orbit-dot:hover .dot-tooltip,
.orbit-dot .dot-tooltip:hover {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

.dot-tooltip .tooltip-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tooltip-logo-link {
    flex-shrink: 0;
    line-height: 0;
}

.dot-tooltip .tooltip-logo {
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    object-fit: contain;
    box-shadow: 0 0 1px 0 color-mix(in srgb, var(--color-black) 50%, transparent);
}

a.tooltip-name {
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--text-dark);
    text-decoration: none;
    flex: 1;
    white-space: normal;
}

.dot-tooltip .tooltip-combined {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
}

.tooltip-combined-label {
    opacity: 0.7;
}

.tooltip-combined-value {
    color: var(--text-dark);
}

.dot-tooltip .tooltip-scores {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.5rem;
    line-height: 1;
    margin-left: 1.5rem;
    color: var(--text-link);
}

.tooltip-scores-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.tooltip-score {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.tooltip-score-label {
    opacity: 0.4;
}

.tooltip-score-overall .tooltip-score-label,
.tooltip-score-overall .tooltip-score-value {
    color: var(--text-dark);
    opacity: 1;
}

.tooltip-score-overall .tooltip-score-value {
    color: var(--text-dark);
    background: #ccede4;
    padding: 0.1rem 0.25rem 0.15rem 0.2rem;
    font-size: 0.45rem;
    border-radius: var(--border-radius-p-sm);
}

/* Dot name labels - hidden by default, shown via JS for top suppliers */
.orbit-dot .dot-name-label {
    display: block;
    position: absolute;
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--text-dark, #1a1a1a);
    white-space: nowrap;
    pointer-events: none;
    max-width: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Show label when visible class is added by JS */
.orbit-dot .dot-name-label.label-visible {
    opacity: 0.85;
}

.orbit-dot.score-tier-2 .dot-name-label.label-visible {
    opacity: 0.5;
}

.orbit-dot.score-tier-3 .dot-name-label.label-visible {
    opacity: 0.3;
}

/* Position: Bottom (default) */
.orbit-dot .dot-name-label.label-bottom {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.4rem;
}

/* Position: Right */
.orbit-dot .dot-name-label.label-right {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 0.4rem;
    text-align: left;
}

/* Position: Left */
.orbit-dot .dot-name-label.label-left {
    top: 50%;
    right: 100%;
    left: auto;
    transform: translateY(-50%);
    margin-right: 0.4rem;
    text-align: right;
}

/* Position: Top */
.orbit-dot .dot-name-label.label-top {
    bottom: 100%;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.4rem;
}

/* Hide label on hover (tooltip takes over) */
.orbit-dot:hover .dot-name-label {
    opacity: 0 !important;
}

@media (max-width: 640px) {
    .orbit-container {
        margin: 0 -1rem;
    }
    
    .orbit-chart {
        max-height: none;
        aspect-ratio: 4 / 5;
    }
    
    .quadrant-label {
        display: none;
    }
    
    .orbit-curve-1 {
        width: 43%;
        height: 20%;
        top: 16%;
        right: 9%;
    }
    
    .orbit-curve-2 {
        width: 80%;
        height: 39%;
        top: 10%;
        right: -5%;
    }
    
    .orbit-curve-3 {
        width: 117%;
        height: 58%;
        top: 4%;
        right: -19%;
    }
    
    .orbit-curve-4 {
        width: 154%;
        height: 77%;
        top: -2%;
        right: -33%;
    }
    
    .orbit-curve-5 {
        width: 191%;
        height: 96%;
        top: -8%;
        right: -47%;
    }
    
    .orbit-dots {
        top: 3rem;
        left: unset;
        right: 3.5rem;
        width: calc(100% - 5rem);
        height: calc(100% - 6rem);
    }
    
    /* Only show top tier labels on mobile */
    .orbit-dot.score-tier-2 .dot-name-label.label-visible,
    .orbit-dot.score-tier-3 .dot-name-label.label-visible {
        opacity: 0 !important;
    }
}

/* =============================================================================
ORBIT SHIFT
============================================================================= */

/* Toolbar layout */
.orbit-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: var(--max-width-60);
    margin: 0 auto 1.5rem;
    gap: 1rem;
    position: relative;
}

.orbit-toolbar-mobile-header {
    display: none;
}

.orbit-mobile-search-toggle {
    display: none;
}

.orbit-toolbar-left {
    flex: 1;
}

.orbit-toolbar-right {
    flex-shrink: 0;
}

/* Search wrapper */
.orbit-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Search input container - has the background */
.orbit-search-container {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--color-white) !important;
    box-shadow: 0 4px 24px color-mix(in srgb, var(--color-black) 5%, transparent), 0 -2px 4px color-mix(in srgb, var(--color-black) 2%, transparent);
    border-radius: 100px;
    padding: 0 0.7rem 0 0.9rem;
    cursor: text;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.orbit-search-container:focus-within,
.orbit-search-container:hover {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-black) 10%, transparent), 0 -2px 4px color-mix(in srgb, var(--color-black) 2%, transparent);
}

.orbit-search-icon {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.orbit-search-input {
    flex: 1;
    min-width: 180px;
    padding: 0.4rem 0.2rem !important;
    font-size: 0.9rem !important;
    color: var(--text-dark) !important;
    outline: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

input.orbit-search-input[type=text]::placeholder {
    color: rgba(190, 189, 170, 0.8) !important;
}

.orbit-search-input::placeholder {
    color: var(--text-muted);
}

/* Search dropdown */
.orbit-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.4rem;
    background: var(--color-white);
    border-radius: var(--border-radius-p);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.108), 0 0 8px rgba(0, 0, 0, 0.06);
    z-index: 100;
    max-height: 280px;
    overflow: hidden;
}

.orbit-search-dropdown.hidden {
    display: none;
}

.orbit-search-dropdown-inner {
    max-height: 280px;
    overflow-y: auto;
}

.orbit-search-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.2rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.orbit-search-row:hover,
.orbit-search-row.hover {
    background: #f5f8f2;
}

.orbit-search-row.hidden {
    display: none;
}

.orbit-search-row .search-logo {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    object-fit: contain;
    flex-shrink: 0;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

.orbit-search-row .search-name {
    font-size: 0.8rem;
    line-height: 2.2;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orbit-search-empty {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.orbit-search-empty.hidden {
    display: none;
}

/* Clear button - inside input container (pure CSS animation like expandable-hidden) */
.orbit-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 0;
    margin-left: 0;
    padding: 0;
    border: none;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-dark);
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: max-width 0.3s ease, margin-left 0.3s ease, opacity 0.2s ease, background 0.15s ease;
}

.orbit-search-clear > span {
    display: inline-block;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
}

/* Active state - use large max-width like expandable-hidden uses max-height */
.orbit-search-clear.active {
    max-width: 100px;
    margin-left: 0.5rem;
    opacity: 1;
    pointer-events: auto;
}

.orbit-search-clear:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* =============================================================================
ORBIT SHIFT
============================================================================= */

/* Orbit shift wrapper */
.orbit-shift-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Orbit shift input container - stacks inner + suggestion */
.orbit-shift-container {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white) !important;
    border-radius: var(--border-radius-p-1-5);
    gap: 0;
    overflow: hidden !important;
    transition: all 0.2s ease;
    box-shadow: 0 4px 24px color-mix(in srgb, var(--color-black) 5%, transparent), 0 -2px 4px color-mix(in srgb, var(--color-black) 2%, transparent);
}

.orbit-shift-container:hover {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-black) 10%, transparent), 0 -2px 4px color-mix(in srgb, var(--color-black) 2%, transparent);
}

.orbit-shift-container.loading,
.orbit-shift-container.loading:hover {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-black) 13%, transparent), 0 -2px 4px color-mix(in srgb, var(--color-black) 2%, transparent);
}

/* Inner container - holds icon, input, buttons */
.orbit-shift-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.6rem 0 0;
    cursor: text;
    min-height: 48px !important;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

/* Circles icon (green animated circles) */
.orbit-shift-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 0.9rem;
    height: 0.9rem;
}

span.orbit-shift-icon:before {
    content: '';
    width: 100%;
    height: 100%;
    display: flex;
    background: url(/wp-content/uploads/2026/01/icon-insights-w.svg) no-repeat center center;
    background-size: contain;
}

.orbit-shift-title {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 0.6rem;
    background: #4b6058;
    padding: 0.5rem 1rem;
    overflow: hidden;
    max-width: 10rem;
    transition: max-width 0.2s ease, padding 0.2s ease, gap 0.2s ease;
}

/* Hide title when long text threshold crossed */
.orbit-shift-inner.has-long-text .orbit-shift-title {
    max-width: 3rem;
    gap: 0;
}

.orbit-shift-title-text {
    color: white;
    font-size: 0.7rem !important;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.orbit-shift-inner.has-long-text .orbit-shift-title .orbit-shift-title-text {
    font-size: 0 !important;
}

.orbit-shift-input {
    flex: 1;
    min-width: 280px;
    padding: 0.4rem 0.2rem !important;
    font-size: 0.9rem !important;
    color: var(--text-dark) !important;
    outline: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.orbit-shift-input,
.orbit-shift-input:focus,
.orbit-shift-input:active {
    outline: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

input.orbit-shift-input[type=text]::placeholder {
    color: rgb(159 158 148 / 60%) !important;
}

/* Actions wrapper (contains char count + clear button) */
.orbit-shift-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-right: 0.5rem;
}

/* Background on actions when both long text and results */
.orbit-shift-inner.has-long-text.has-results .orbit-shift-actions {
    background: #f0f8f6;
    border-radius: var(--border-radius-p);
    padding: 0.3rem;
    margin-right: 0;
}

.orbit-shift-inner.has-results .orbit-shift-actions {
    margin-right: 0;
}

/* Character count - shows at 60+ characters (controlled by JS .visible class) */
.orbit-shift-char-count {
    display: none;
    align-items: center;
    font-size: 0.7rem;
    color: var(--text-link);
    padding: 0.1rem 0.3rem 0.15rem;
    letter-spacing: 0.02rem;
    flex-shrink: 0;
    background: #f0f8f6;
    line-height: 1.2;
    border-radius: var(--border-radius-p-sm);
}

.orbit-shift-char-count.visible {
    display: flex;
}

/* When both long text and results, remove individual background from count */
.orbit-shift-inner.has-long-text.has-results .orbit-shift-char-count {
    background: none;
}

/* Clear button - hidden by default, shows after submit (has-results) */
.orbit-shift-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.orbit-shift-inner.has-long-text.has-results .orbit-shift-clear {
    width: 1.5rem;
    height: 1.5rem;
    background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.orbit-shift-inner.has-long-text.has-results .orbit-shift-clear:hover {
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* Show clear button when has-results */
.orbit-shift-inner.has-results .orbit-shift-clear {
    display: flex;
}

.orbit-shift-clear:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

.orbit-shift-clear:active {
    transform: scale(0.95);
}

.orbit-shift-clear svg {
    width: 1rem;
    height: 1rem;
    stroke: var(--color-black);
}

.orbit-shift-inner.has-long-text.has-results .orbit-shift-clear svg {
    width: 0.9rem;
    height: 0.9rem;
}

/* Submit button (arrow) - hidden when empty, visible + black when input has value */
.orbit-shift-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #1a1a1a;
    color: white;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.2s ease, opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

/* Button appears (black) when input has value */
.orbit-shift-container.has-input .orbit-shift-submit {
    width: 2rem;
    opacity: 1;
}

.orbit-shift-container.has-input .orbit-shift-submit:hover {
    background: #333;
    transform: scale(1.05);
}

.orbit-shift-submit:active {
    transform: scale(0.95);
}

.orbit-shift-submit svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke: var(--color-white);
}

.orbit-shift-container.loading .orbit-shift-submit {
    opacity: 0.5;
    pointer-events: none;
}

/* Pre-loading state - white circles while waiting for page ready (URL param) */
.orbit-shift-container.pre-loading .orbit-shift-submit {
    pointer-events: none;
}

.orbit-shift-container.pre-loading .orbit-shift-submit svg {
    display: none;
}

.orbit-shift-submit .circles-orbit-shift {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1.1rem;
    width: 1.1rem;
    display: none;
}

.orbit-shift-container.pre-loading .orbit-shift-submit .circles-orbit-shift {
    display: block;
}

.orbit-shift-submit .circle-orbit-shift {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0.5px solid #ffffff;
    border-radius: 130% 130% 117% 114% / 115% 120% 77% 125%;
    box-shadow: 0 0 0.7px 0.7px #ffffff, inset 0 0 1.5px 0.7px #ffffff;
    opacity: 0.9;
}

.orbit-shift-submit .circle-orbit-shift:nth-child(1) {
    transform-origin: 48% 50%;
    animation: spin1 5s linear infinite;
}

.orbit-shift-submit .circle-orbit-shift:nth-child(2) {
    transform-origin: 50% 52%;
    animation: spin2 5s linear infinite;
}

.orbit-shift-submit .circle-orbit-shift:nth-child(3) {
    transform-origin: 52% 50%;
    animation: spin3 5s linear infinite;
}

.orbit-shift-submit .circle-orbit-shift:nth-child(4) {
    transform-origin: 50% 48%;
    animation: spin4 5s linear infinite;
    width: 70%;
    height: 110%;
    border-width: 0;
    box-shadow: 0 0 3px 0px #ffffff, inset 0 0 3px 1px #ffffff;
    opacity: 0.5;
}

.orbit-shift-submit .circle-orbit-shift:nth-child(5) {
    transform-origin: 49.7% 49.7%;
    animation: spin5 5s linear infinite;
    width: 110%;
    border-width: 0;
    box-shadow: 0 0 3px 0px #ffffff, inset 0 0 3px 1px #ffffff;
    opacity: 0.5;
}

/* Loading bar - positioned at top of orbit-chart */
.orbit-chart .orbit-shift-loading {
    position: absolute;
    top: 0.2rem;
    left: 1.6rem;
    width: calc(100% - 3.2rem);
    height: 3px;
    pointer-events: none;
    z-index: 100;
    border-radius: 100px;
    overflow: hidden;
}

.orbit-chart .orbit-shift-loading .ai-loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.orbit-chart.orbit-shift-loading .orbit-shift-loading .ai-loading-bar {
    opacity: 1;
}

/* Informational message below input - default state is collapsed */
.orbit-shift-error {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fef2f2;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #dc2626;
    overflow: hidden;
    pointer-events: none;
    /* Default: collapsed with slide-up position */
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    margin-top: 0;
    padding: 0 0.75rem;
    transition: transform 0.3s ease-out,
    opacity 0.3s ease-out,
    visibility 0s linear 0.3s,
    max-height 0.3s ease-out,
    margin-top 0.3s ease-out,
    padding-top 0.3s ease-out,
    padding-bottom 0.3s ease-out,
    border-color 0.3s ease-out;
}

/* Visible state - slides down from input */
.orbit-shift-error.visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    max-height: 100px;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-color: #fecaca;
    pointer-events: auto;
    transition: transform 0.3s ease-out,
    opacity 0.3s ease-out,
    visibility 0s linear 0s,
    max-height 0.3s ease-out,
    margin-top 0.3s ease-out,
    padding-top 0.3s ease-out,
    padding-bottom 0.3s ease-out,
    border-color 0.3s ease-out;
}

/* =============================================================================
ORBIT SHIFT - HIGHLIGHT STATES
============================================================================= */

/* When orbit shift is active, fade non-matching dots */
.orbit-container.orbit-shift-active .orbit-dot:not(.orbit-shift-match) {
    width: 8px !important;
    height: 8px !important;
    background: #dce3e1 !important;
    opacity: 0.6;
    transition: all 0.4s ease;
}

/* Hide labels on non-matching dots */
.orbit-container.orbit-shift-active .orbit-dot:not(.orbit-shift-match) .dot-name-label {
    opacity: 0 !important;
}

/* Hide ALL trails when orbit shift is active */
.orbit-container.orbit-shift-active .orbit-trails {
    opacity: 0 !important;
    transition: opacity 0.3s ease;
}

/* Matching dots - keep visible, add subtle highlight */
.orbit-container.orbit-shift-active .orbit-dot.orbit-shift-match {
    z-index: 10;
    transition: all 0.4s ease;
}

/* Hovered matched dot above others */
.orbit-container.orbit-shift-active .orbit-dot.orbit-shift-match:hover {
    z-index: 50 !important;
}

/* Tooltips above everything when orbit shift is active */
.orbit-container.orbit-shift-active .orbit-dot .dot-tooltip {
    z-index: 100;
}

/* Matched tier styling - overrides original tiers when orbit shift is active */
.orbit-container.orbit-shift-active .orbit-dot.matched-tier-1 {
    background: #1D463A !important;
    width: 16px !important;
    height: 16px !important;
    z-index: 15 !important;
}
.orbit-container.orbit-shift-active .orbit-dot.matched-tier-2 {
    background: #6A847C !important;
    width: 12px !important;
    height: 12px !important;
    z-index: 14 !important;
}
.orbit-container.orbit-shift-active .orbit-dot.matched-tier-3 {
    background: #A0B3AC !important;
    width: 10px !important;
    height: 10px !important;
    z-index: 13 !important;
}
.orbit-container.orbit-shift-active .orbit-dot.matched-tier-4 {
    background: #B5C5BF !important;
    width: 9px !important;
    height: 9px !important;
    z-index: 12 !important;
}
.orbit-container.orbit-shift-active .orbit-dot.matched-tier-5 {
    background: #C5D2CD !important;
    width: 9px !important;
    height: 9px !important;
    z-index: 11 !important;
}

/* Labels for all matched tiers - show with decreasing opacity */
.orbit-container.orbit-shift-active .orbit-dot.matched-tier-1 .dot-name-label.label-visible {
    opacity: 1 !important;
}
.orbit-container.orbit-shift-active .orbit-dot.matched-tier-2 .dot-name-label.label-visible {
    opacity: 0.85 !important;
}
.orbit-container.orbit-shift-active .orbit-dot.matched-tier-3 .dot-name-label.label-visible {
    opacity: 0.7 !important;
}
.orbit-container.orbit-shift-active .orbit-dot.matched-tier-4 .dot-name-label.label-visible {
    opacity: 0.55 !important;
}
.orbit-container.orbit-shift-active .orbit-dot.matched-tier-5 .dot-name-label.label-visible {
    opacity: 0.4 !important;
}

/* Curves re-center around matched cluster when orbit shift is active */
/* JS will apply inline styles for top/right positioning based on centroid */
.orbit-container.orbit-shift-active .orbit-curve {
    transition: top 0.6s ease, right 0.6s ease, width 0.6s ease, height 0.6s ease;
}

/* Reset transition for when clearing */
.orbit-curve {
    transition: top 0.4s ease, right 0.4s ease, width 0.4s ease, height 0.4s ease;
}

/* Hide animation buttons in match mode (they animate based on original scores) */
/* Keep compare button visible */
.orbit-container.orbit-shift-active + .orbit-controls .orbit-controls-buttons {
    display: none;
}

/* Hide label on hover for matched dots (tooltip takes over) */
.orbit-container.orbit-shift-active .orbit-dot.orbit-shift-match:hover .dot-name-label {
    opacity: 0 !important;
}

/* Disable hover/interaction on non-matched dots */
.orbit-container.orbit-shift-active .orbit-dot:not(.orbit-shift-match) {
    pointer-events: none;
    cursor: default;
}

/* Hide tooltip on non-matched dots (extra safety) */
.orbit-container.orbit-shift-active .orbit-dot:not(.orbit-shift-match) .dot-tooltip {
    display: none !important;
}

/* =============================================================================
ORBIT SHIFT + SEARCH ACTIVE — selected supplier overrides orbit shift dimming
============================================================================= */

.orbit-container.orbit-shift-active.search-active .orbit-dot.supplier-selected {
    opacity: 1 !important;
    transform: scale(1.5) !important;
    z-index: 50 !important;
    pointer-events: auto !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.orbit-container.orbit-shift-active.search-active .orbit-dot.supplier-selected .dot-tooltip {
    display: block !important;
    z-index: 100 !important;
}

.orbit-container.orbit-shift-active.search-active .orbit-dot.supplier-selected .dot-name-label {
    opacity: 1 !important;
}

.orbit-container.orbit-shift-active.search-active .orbit-dot.supplier-selected.tooltip-active .dot-name-label {
    opacity: 0 !important;
}

/* Hide quadrant labels and axis labels when orbit shift is active */
.orbit-container.orbit-shift-active .quadrant-label {
    display: none !important;
}

/* Shrink and fade axis arrows only (label text stays visible) */
.axis-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    overflow: hidden;
    transition: width 0.3s ease, opacity 0.3s ease;
}

.orbit-container.orbit-shift-active .axis-arrow {
    width: 0;
    opacity: 0;
}

/* Reduce label gap when arrow shrinks to keep centered */
.orbit-container.orbit-shift-active .orbit-x-label,
.orbit-container.orbit-shift-active .orbit-y-label {
    gap: 0;
}

/* Orbit Shift Matches indicator with clear button */
.orbit-shift-matches {
    position: absolute;
    top: 1.1rem;
    left: 1.6rem;
    display: flex;
    align-items: center;
    gap: 1.8rem;
    z-index: 20;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.orbit-shift-matches.hidden {
    display: flex !important; /* Override global .hidden display:none to allow fade */
    opacity: 0;
    pointer-events: none;
}

.orbit-shift-matches-text {
    font-size: 1.7rem;
}

/* Matrix clear button - inside orbit-shift-matches */
.orbit-shift-matches .orbit-clear-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.1rem 0.4rem 0.1rem 0.7rem !important;
    margin-top: 0.1rem !important;
    background: var(--color-white) !important;
    white-space: nowrap;
}

.orbit-clear-btn .orbit-clear-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.35rem;
    background: #4b6058;
    color: var(--text-white) !important;
    border-radius: 10px;
    font-size: 0.6rem;
    line-height: 1.8;
}

.orbit-clear-text {
    font-weight: 500;
}

/* Suggestion message when no matches - default state is collapsed */
.orbit-shift-suggestion {
    position: relative;
    background: linear-gradient(to bottom, #f5faf8, #fbfcfb 80%);
    box-shadow: inset 0 2px 4px color-mix(in srgb, var(--color-black) 2%, transparent) !important;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #647770;
    border-bottom-right-radius: 1.5rem;
    z-index: 10;
    overflow: hidden;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    padding: 0 1rem;
    transition: transform 0.3s ease-out,
    opacity 0.3s ease-out,
    visibility 0s linear 0.3s,
    max-height 0.3s ease-out,
    padding 0.3s ease-out;
}

/* Visible state - slides down */
.orbit-shift-suggestion.visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    max-height: 100px;
    padding: 0.6rem 1rem;
    transition: transform 0.3s ease-out,
    opacity 0.3s ease-out,
    visibility 0s linear 0s,
    max-height 0.3s ease-out,
    padding 0.3s ease-out;
}

/* Cross-category navigation link */
.orbit-shift-suggestion .cross-category-link {
    color: var(--color-green-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}
.orbit-shift-suggestion .cross-category-link:hover {
    color: var(--color-green-dark);
    text-decoration: underline;
}

/* Matched criteria display in suggestion */
.orbit-shift-suggestion .matched-criteria {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.orbit-shift-suggestion .matched-criteria-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    padding: 0.15rem 0.6rem 0.15rem 1.3rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.orbit-shift-suggestion.visible .matched-criteria-item {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered fade-in delays for up to 12 pills */
.orbit-shift-suggestion.visible .matched-criteria-item:nth-child(1) { transition-delay: 0.1s; }
.orbit-shift-suggestion.visible .matched-criteria-item:nth-child(2) { transition-delay: 0.2s; }
.orbit-shift-suggestion.visible .matched-criteria-item:nth-child(3) { transition-delay: 0.3s; }
.orbit-shift-suggestion.visible .matched-criteria-item:nth-child(4) { transition-delay: 0.4s; }
.orbit-shift-suggestion.visible .matched-criteria-item:nth-child(5) { transition-delay: 0.5s; }
.orbit-shift-suggestion.visible .matched-criteria-item:nth-child(6) { transition-delay: 0.6s; }
.orbit-shift-suggestion.visible .matched-criteria-item:nth-child(7) { transition-delay: 0.7s; }
.orbit-shift-suggestion.visible .matched-criteria-item:nth-child(8) { transition-delay: 0.8s; }
.orbit-shift-suggestion.visible .matched-criteria-item:nth-child(9) { transition-delay: 0.9s; }
.orbit-shift-suggestion.visible .matched-criteria-item:nth-child(10) { transition-delay: 1s; }
.orbit-shift-suggestion.visible .matched-criteria-item:nth-child(11) { transition-delay: 1.1s; }
.orbit-shift-suggestion.visible .matched-criteria-item:nth-child(12) { transition-delay: 1.2s; }

.orbit-shift-suggestion .matched-criteria-item::before {
    content: '';
    position: absolute;
    left: 0.1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background: url(/wp-content/uploads/2026/01/icon-star-filled-faded-g.svg);
    background-size: 0.6rem;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
}

/* Type-specific icons (all use #647770) */
.matched-criteria-item.type-language::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23647770'%3E%3Cpath d='M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0014.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z'/%3E%3C/svg%3E");
    background-size: 0.7rem;
}

.matched-criteria-item.type-integrations::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23647770'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E");
    background-size: 0.8rem;
}

.matched-criteria-item.type-category::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23647770'%3E%3Cpath d='M12 2l-5.5 9h11L12 2zm0 3.84L13.93 9h-3.87L12 5.84zM17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zM3 21.5h8v-8H3v8zm2-6h4v4H5v-4z'/%3E%3C/svg%3E");
    background-size: 0.75rem;
}

.matched-criteria-item.type-features::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23647770'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17l4.59-4.59L16 11l-6 6z'/%3E%3C/svg%3E");
    background-size: 0.7rem;
}

.matched-criteria-item.type-budget::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23647770'%3E%3Cpath d='M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z'/%3E%3C/svg%3E");
    background-size: 0.8rem;
}

.matched-criteria-item.type-segment::before {
    background-image: url("/wp-content/uploads/2026/01/icon-size-faded-g-bold.svg");
    background-size: 0.7rem;
}

.matched-criteria-item.type-support::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23647770'%3E%3Cpath d='M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z'/%3E%3C/svg%3E");
    background-size: 0.75rem;
    background-position: center 0.15rem;
}

.matched-criteria-item.type-implementation::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23647770'%3E%3Cpath d='M9.19 6.35c-2.04 2.29-3.44 5.58-3.57 5.89L2 10.69l4.05-4.05c.47-.47 1.15-.68 1.81-.55l1.33.26zM11.17 17s3.74-1.55 5.89-3.7c5.4-5.4 4.5-9.62 4.21-10.57-.95-.3-5.17-1.19-10.57 4.21C8.55 9.09 7 12.83 7 12.83L11.17 17zm6.48-2.19c-2.29 2.04-5.58 3.44-5.89 3.57L13.31 22l4.05-4.05c.47-.47.68-1.15.55-1.81l-.26-1.33zM9 18c0 .83-.34 1.58-.88 2.12C6.94 21.3 2 22 2 22s.7-4.94 1.88-6.12C4.42 15.34 5.17 15 6 15c1.66 0 3 1.34 3 3zm4-9c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2z'/%3E%3C/svg%3E");
    background-size: 0.7rem;
}

.matched-criteria-item.type-price::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23647770'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z'/%3E%3C/svg%3E");
    background-size: 0.75rem;
    background-position: center 0.17rem;
}

/* type-top and type-axis use default star icon */

/* Responsive - stack toolbar on mobile */
@media (max-width: 640px) {

    .orbit-shift-input {
        font-size: 1rem !important;
    }
    
    .orbit-shift-matches {
        width: calc(100% - 2rem);
        left: 1rem;
    }
    
    .orbit-shift-matches-text {
        font-size: 1.5rem;
    }
    
    .orbit-toolbar {
        flex-direction: column;
        align-items: stretch;
        margin: 0 -1rem 1rem;
        z-index: 100;
    }
    
    .orbit-toolbar-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }
    
    .orbit-toolbar-mobile-title {
        font-size: 1.4rem;
        line-height: 1.3;
        margin: 0;
    }
    
    .orbit-mobile-search-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--accent-color);
        color: var(--color-black);
        cursor: pointer;
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-black) 10%, transparent) !important;
        transition: background 0.2s ease, transform 0.2s ease;
    }
    
    .orbit-mobile-search-toggle.active {
        background: var(--color-black);
        color: var(--color-white);
    }
    
    .orbit-toolbar-left {
        width: 100%;
    }
    
    .orbit-shift-title {
        gap: 0;
    }
    
    .orbit-shift-title-text {
        font-size: 0 !important;
    }
    
    .orbit-shift-input {
        min-width: 0;
    }
    
    .orbit-shift-container {
        width: 100%;
    }
    
    .orbit-container.orbit-shift-active .orbit-x-label,
    .orbit-container.orbit-shift-active .orbit-y-label {
        display: none;
    }
    
    /* Hide search by default on mobile */
    .orbit-toolbar-right {
        display: none;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
    }
    
    /* Show search when toggle is active */
    .orbit-toolbar.search-visible .orbit-toolbar-right {
        display: block;
    }
    
    .orbit-toolbar.search-visible .orbit-toolbar-left {
        visibility: hidden;
        height: 0;
        overflow: hidden;
    }
    
    .orbit-toolbar-right .orbit-search-wrapper {
        width: 100%;
    }
    
    .orbit-toolbar-right .orbit-search-container {
        width: 100%;
    }
}

/* =============================================================================
ORBIT SHIFT HIGHLIGHT STATES
============================================================================= */

/* When a supplier is selected, dim all other dots */
.orbit-container.search-active .orbit-dot:not(.supplier-selected) {
    background: #dce3e1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.orbit-container.search-active .orbit-dot .dot-name-label {
    opacity: 0 !important;
}

/* Selected dot - fully visible, scaled up (same as hover), z-indexed */
.orbit-container.search-active .orbit-dot.supplier-selected {
    opacity: 1;
    transform: scale(1.5);
    z-index: 50 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Show label on selected dot by default */
.orbit-container.search-active .orbit-dot.supplier-selected .dot-name-label {
    opacity: 1 !important;
}

/* Hide label when tooltip IS pinned (tooltip takes over) */
.orbit-container.search-active .orbit-dot.supplier-selected.tooltip-active .dot-name-label {
    opacity: 0 !important;
}

/* Pinned tooltip (stays visible without hover) */
.orbit-dot .dot-tooltip.tooltip-pinned {
    opacity: 1;
    pointer-events: auto;
}

/* Dismissed tooltip - hide until mouse leaves and re-enters */
.orbit-dot.tooltip-dismissed:hover .dot-tooltip {
    opacity: 0;
    pointer-events: none;
}

/* Close button on pinned tooltip */
.dot-tooltip .tooltip-close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.dot-tooltip.tooltip-pinned .tooltip-close {
    opacity: 1;
}

.dot-tooltip .tooltip-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-dark);
}

/* Adjust tooltip header to make room for close button when pinned */
.dot-tooltip.tooltip-pinned .tooltip-header {
    padding-right: 1rem;
}

/* =============================================================================
ORBIT ANIMATION STYLES
============================================================================= */

/* Animation controls below orbit */
.orbit-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.orbit-controls-buttons {
    display: flex;
    gap: 0.75rem;
    margin-right: auto;
}

.orbit-controls-logo {
    position: absolute;
    bottom: 1.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: 5.5rem;
}

/* Override nectar button styles for orbit toolbar */
.orbit-animate-btn.nectar-button,
.orbit-trails-toggle.nectar-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.8rem 0 1rem !important;
    position: relative;
    overflow: hidden;
}

/* Fixed width to prevent jump when switching between Animate/Pause */
.orbit-animate-btn.nectar-button {
    justify-content: center;
    order: 2;
    padding-right: 0.6rem !important;
}

.orbit-animate-btn svg,
.orbit-trails-toggle svg {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    padding: 0.15rem;
    width: 1rem;
    height: 1rem;
    border-radius: 100px;
    transition: all 0.2s ease;
}

.orbit-trails-toggle.active svg {
    padding: 0.2rem;
    background: black;
    stroke: white;
}

.orbit-animate-btn span,
.orbit-trails-toggle span {
    position: relative;
    z-index: 1;
}

/* Progress fill indicator */
.orbit-animate-btn .progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: rgba(255, 255, 255, 0.3);
    z-index: 0;
}

.orbit-animate-btn.button-black .progress-fill {
    animation: progressFill var(--loop-duration, 3.5s) linear infinite;
}

@keyframes progressFill {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* Trail layer */
.orbit-trails {
    transition: opacity 0.3s ease;
}

.orbit-trails.trails-hidden {
    opacity: 0;
}

.orbit-trail-line {
    /* Drawing animation using stroke-dashoffset */
    stroke-dasharray: var(--path-length, 1000);
    stroke-dashoffset: var(--path-length, 1000);
    /* Trail draws slightly faster than dot so it leads ahead */
    animation: trailDraw 0.45s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    /* Smooth transition for fading when supplier is selected */
    transition: opacity 0.3s ease;
}

/* Slower trail during replay */
.orbit-chart.replay-mode .orbit-trail-line {
    animation-duration: 0.9s;
}

@keyframes trailDraw {
    0% {
        stroke-dashoffset: var(--path-length, 1000);
        opacity: 0.2;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0.75;
    }
}

/* Fade out non-selected trails when a supplier is selected */
.orbit-trail-line.trail-faded {
    opacity: 0.1 !important;
}

/* Dot animation states */
.orbit-dot {
    will-change: auto;
}

.orbit-dot.animate-improved,
.orbit-dot.animate-new,
.orbit-dot.animate-unchanged {
    will-change: transform, opacity;
}

/* Initial state before animation */
.orbit-dot.animate-improved:not(.animate-in) {
    transform: translate(var(--from-x, 0), var(--from-y, 0));
}

.orbit-dot.animate-new:not(.animate-in),
.orbit-dot.animate-unchanged:not(.animate-in) {
    transform: translate(var(--offset-x, 0), var(--offset-y, 0));
    opacity: 0;
}

/* Animation keyframes */
.orbit-dot.animate-improved.animate-in {
    animation: dotMoveImproved 0.5s ease-out forwards;
    animation-delay: var(--delay, 0s);
}

.orbit-dot.animate-new.animate-in,
.orbit-dot.animate-unchanged.animate-in {
    animation: dotFadeOffset 0.5s ease-out forwards;
    animation-delay: var(--delay, 0s);
}

/* Slower animation during replay */
.orbit-chart.replay-mode .orbit-dot.animate-improved.animate-in {
    animation-duration: 1s;
}

.orbit-chart.replay-mode .orbit-dot.animate-new.animate-in,
.orbit-chart.replay-mode .orbit-dot.animate-unchanged.animate-in {
    animation-duration: 1s;
}

@keyframes dotMoveImproved {
    0% {
        opacity: 0;
        offset-distance: var(--start-percent, 0%);
    }
    100% {
        opacity: 1;
        offset-distance: 100%;
    }
}

@keyframes dotFadeOffset {
    0% {
        opacity: 0;
        transform: translate(var(--offset-x, 0), var(--offset-y, 0));
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/* Reset will-change after animation completes */
.orbit-dot.animate-in {
    animation-fill-mode: forwards;
}

/* Hide labels during animation */
.orbit-dots.animating .dot-name-label {
    opacity: 0 !important;
}

/* Responsive - controls stack on mobile */
@media (max-width: 640px) {
    
    .orbit-controls {
        flex-wrap: wrap;
    }
    
    .orbit-controls-logo {
        bottom: 1.2rem;
    }
    
    .palomarr-custom-project {
        width: 100%;
        min-width: 100%;
    }
    
    .orbit-controls-buttons {
        width: 100%;
        gap: 0.5rem;
    }
    
    .orbit-controls-buttons .orbit-animate-btn,
    .orbit-controls-buttons .orbit-trails-toggle {
        flex: 1 1 50%;
        min-width: 0;
    }
}

/* =============================================================================
SECTION 3: DYNAMIC CONTENT SECTIONS
============================================================================= */

.insights-content-sections {
    padding: 4rem 0 0;
    overflow: visible;
}

.insights-section {
    margin-bottom: 4rem;
    padding-bottom: 4rem;
    max-width: var(--max-width-60);
    margin: 0 auto;
    overflow: visible;
}

.insights-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.insights-section .section-title {
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.insights-section .section-paragraph {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-body);
    margin-bottom: 1rem;
}

/* Key Trends - styled like capabilities-grid */

.trends-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    margin-top: 6rem;
}

.trend-item {
    display: flex;
    flex-direction: column;
    background: #fcfff6;
    border-radius: var(--border-radius-p);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trend-item:hover {
    transform: translateY(-2px);
}

/* Trend icon wrapper for animated SVG icons */
.trend-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.trend-icon .nectar_icon_wrap {
    margin: 0;
}

.trend-icon .nectar_icon {
    margin: 0;
}

/* Override SVG icon color */
.trend-icon svg path,
.nectar_icon_wrap .svg-icon-holder[data-color="accent-color"] svg path {
    stroke: #2F9376 !important;
}

/* Fallback number styling when no icon is provided */
.trend-icon .trend-number,
.trend-number {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-black);
    font-weight: 700;
    font-size: 1.25rem;
    border-radius: 50%;
}

.trend-content h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}

.trend-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-body);
    margin: 0;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
    .trends-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
    .trends-grid {
        grid-template-columns: 1fr;
        margin-top: 2rem;
    }
    
    .insights-section .section-title,
    .insights-conclusion .section-title {
        font-size: 3rem;
        line-height: 1.2;
        margin-bottom: 3.5rem;
    }
    
    .insights-section.insights-section-buyerRecommendations .section-title {
        font-size: 2.6rem;
        line-height: 1.2;
    }
}

/* =============================================================================
COMPETITIVE ANALYSIS SECTION HEADER
============================================================================= */
.insights-section-competitiveAnalysis {
    max-width: none;
    margin: 10rem 0;
    padding: 0;
    overflow: visible;
}

.insights-competitive-header {
    padding: 0;
    margin-bottom: 1.5rem;
}

.insights-competitive-header .section-description {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-body);
    max-width: var(--max-width-60);
    margin: 0;
}

@media (max-width: 640px) {
    .insights-section-competitiveAnalysis {
        margin: 5rem 0;
    }
}

/* =============================================================================
INSIGHTS CONTEXT + QUICK LIST WRAPPER
============================================================================= */

.insights-context-list-wrapper {
    padding: 2rem 0 4rem;
    background: #fcfff6;
    overflow: visible;
}

.insights-context-list-wrapper .context-list-inner {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 9rem;
    overflow: visible;
}

/* Industry Context (sticky sidebar) */
.insights-industry-context {
    order: 2;
    position: sticky;
    top: 2rem;
    align-self: start;
    height: fit-content;
}

.insights-industry-context .context-title {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.insights-industry-context .industry-context-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-gray-700, #374151);
}

/* Expandable paragraphs */
.insights-industry-context .expandable-paragraphs {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

.insights-industry-context .expandable-paragraphs.active {
    max-height: 1000px;
    opacity: 1;
}

.insights-industry-context .see-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.insights-industry-context .see-more p {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-link);
    padding: 0;
}

.insights-industry-context .see-more.active p::after {
    transform: rotate(180deg);
}

/* Quick List */
.insights-quick-list {
    order: 1;
    background: #ffffff;
    border-radius: 2.2rem 2.2rem 2.2rem 0;
    box-shadow: 0 4px 60px #2528271a;
    padding: 2.5rem 3rem !important;
}

.insights-quick-list .quick-list-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.insights-quick-list .quick-list-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.insights-quick-list .quick-list-header .list-title {
    margin-bottom: 0;
}

.insights-quick-list .quick-list-logo {
    width: 6rem;
}

/* Rankings compare button - always visible */
.insights-quick-list .rankings-compare-btn {
    display: inline-flex;
    margin-left: auto;
}

/* Bottom center logo - always visible */
.insights-quick-list .quick-list-logo-bottom {
    display: block;
    width: 6rem;
    margin: 1.5rem 0 0 auto;
}

.insights-quick-list .list-title {
    font-size: 3rem;
    line-height: 1.2;
    color: var(--text-primary);
}

.insights-quick-list .quick-list-wrapper {
    display: flex;
    flex-direction: column;
}

.insights-quick-list .quick-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    position: relative;
    z-index: 1;
}

.insights-quick-list .quick-list-item:hover {
    z-index: 10;
}

.insights-quick-list .quick-list-item .rank {
    font-size: 1.3rem;
    min-width: 2rem;
    font-weight: 400;
    text-align: center;
}

.insights-quick-list .quick-list-item .company-logo {
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    object-fit: contain;
    flex-shrink: 0;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.8) !important;
}

.insights-quick-list .quick-list-item .company-logo-link {
    display: flex;
}

.insights-quick-list .quick-list-item .name-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.insights-quick-list .quick-list-item .name {
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--text-primary);
    text-decoration: none;
}

.insights-quick-list .quick-list-item .name:hover {
    color: var(--color-primary);
}

.insights-quick-list .quick-list-item .scores {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 3rem;
    position: relative;
    margin-left: auto;
}

.insights-quick-list .quick-list-item .score-main {
    font-size: 1.25rem;
    color: var(--text-link);
}

/* Scores Tooltip */
.insights-quick-list .quick-list-item .scores-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    background: #ffffff;
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    width: 14rem;
}

.insights-quick-list .quick-list-item .scores-tooltip .tooltip-description {
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    text-wrap-mode: wrap;
}

.insights-quick-list .quick-list-item .scores-tooltip .tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.insights-quick-list .quick-list-item .scores-tooltip .tooltip-label {
    color: var(--text-secondary);
}

.insights-quick-list .quick-list-item .scores-tooltip .tooltip-value {
    font-weight: 600;
}

.insights-quick-list .quick-list-item .scores:hover .scores-tooltip,
.insights-quick-list .quick-list-item .scores-tooltip:hover {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease 0.3s, visibility 0.2s ease 0.3s;
}

/* Badges */
.badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.top-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.8rem;
    border-radius: var(--border-radius-p-2);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    line-height: 2.5;
    color: var(--color-black);
}

.top-badge-overall {
    background: #24433a;
    color: var(--color-white);
    order: 2;
}

.top-badge-value {
    background: #d2f2d7;
}

.top-badge-smb {
    background: #c6e8e3;
}

.top-badge-enterprise {
    background: #e4f6d9;
}

.top-badge-midmarket {
    background: #cbe1f3;
}

.top-badge-default {
    background: var(--color-gray-light);
    color: var(--color-black);
}

/* =============================================================================
ORBIT SHIFT RANKINGS - Dynamic rankings when Orbit Shift is active
============================================================================= */

/* Orbit Shift badge in rankings header */
.insights-quick-list .orbit-shift-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #ebf5f1;
    padding: 0.3rem 0.3rem 0.3rem 0.75rem;
    border-radius: var(--border-radius-p);
    font-size: 0.75rem;
    width: fit-content;
}

.insights-quick-list .orbit-shift-badge .badge-text {
    color: var(--color-primary);
    font-size: 0.7rem;
}

button.rankings-clear-btn.nectar-button.button-xx-small.button-white,
button.assessment-clear-btn.nectar-button.button-xx-small.button-white {
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

button.rankings-clear-btn.nectar-button.button-xx-small.button-white:hover,
button.assessment-clear-btn.nectar-button.button-xx-small.button-white:hover {
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* Smooth transitions for rankings wrapper */
.insights-quick-list .quick-list-wrapper {
    transition: opacity 200ms ease;
}

/* Match percentage styling (replaces combined score) */
.insights-quick-list .quick-list-item .score-main.match-percentage {
    color: var(--color-primary);
    font-size: 1.1rem;
}

/* Orbit Shift specific badge colors (reuse existing badge styles) */
.top-badge.badge-overall {
    background: #24433a;
    color: var(--color-white);
}

.top-badge.badge-value {
    background: #d2f2d7;
}

.top-badge.badge-smb {
    background: #c6e8e3;
}

.top-badge.badge-enterprise {
    background: #e4f6d9;
}

/* Mobile responsive */
@media (max-width: 1024px) {
    .insights-context-list-wrapper .context-list-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .insights-industry-context {
        position: static;
        order: 1;
    }
    
    .insights-quick-list {
        order: 2;
    }
}

@media (max-width: 640px) {
    .insights-quick-list {
        padding: 1.5rem !important;
        border-radius: 1rem 1rem 1rem 0;
    }

    .insights-quick-list .quick-list-item .name-container {
        position: relative;
    }
    
    .insights-quick-list .list-title {
        font-size: 2rem;
        order: 2;
    }

    .quick-list-source-button {
        position: absolute;
        top: calc(100% + 0.2rem);
        left: -0.25rem;
    }
    
    .insights-quick-list .quick-list-item {
        flex-wrap: wrap;
    }
    
    .insights-quick-list .quick-list-item .badges {
        display: none;
    }
    
    .insights-quick-list .quick-list-item .scores {
        min-width: auto;
    }
    
    .insights-quick-list .quick-list-item .rank {
        min-width: 1.5rem;
    }
    
    .insights-quick-list .quick-list-header-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 2rem;
    }
}

/* Buyer Recommendations */
.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    margin-top: 4rem;
}

.insights-section.insights-section-buyerRecommendations {
    padding-bottom: 8rem;
}

.recommendation-icon {
    margin-bottom: 1rem;
}

.recommendation-icon svg {
    width: 40px;
    height: 40px;
}

/* Ensure stroke styling for icons */
.recommendation-icon .svg-icon-holder svg path,
.recommendation-icon .svg-icon-holder svg line,
.recommendation-icon .svg-icon-holder svg polyline,
.trend-icon .svg-icon-holder svg path,
.trend-icon .svg-icon-holder svg line,
.trend-icon .svg-icon-holder svg polyline {
    stroke: var(--color-primary) !important;
    fill: none;
}

.recommendation-card h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}

.recommendation-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-body);
    margin: 0;
}

@media (max-width: 640px) {
    .insights-section.insights-section-buyerRecommendations {
        padding-bottom: 4rem;
    }
    
    .recommendation-card {
        padding: 0;
    }
    
    .recommendations-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
}

/* Quadrant Analysis */
.quadrant-analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.quadrant-analysis-card {
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #e5e9e1;
    border-radius: 1rem 1rem 1rem 0;
}

.quadrant-analysis-card .quadrant-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.quadrant-analysis-card .quadrant-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.quadrant-analysis-card.quadrant-leader .quadrant-dot {
    background: #1D463A;
}

.quadrant-analysis-card.quadrant-challenger .quadrant-dot {
    background: #4A7569;
}

.quadrant-analysis-card.quadrant-contender .quadrant-dot {
    background: #74958B;
}

.quadrant-analysis-card.quadrant-emerging .quadrant-dot {
    background: #B3CEC6;
}

.quadrant-analysis-card h3 {
    font-size: 1.125rem;
    margin: 0;
    flex: 1;
}

.quadrant-analysis-card .quadrant-badge {
    background: #f5f8f2;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.quadrant-analysis-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-body);
    margin: 0;
}

/* Section Chart + Stats Wrapper (for marketLandscape) */
.section-chart-stats-wrapper {
    display: flex;
    margin: 2rem 0;
    gap: 2rem;
    background: var(--color-white);
    border-radius: var(--border-radius-p-2);
    box-shadow: 0 4px 60px color-mix(in srgb, var(--color-black) 10%, transparent);
    padding: 2rem !important;
    overflow: hidden;
}

.section-chart-stats-wrapper .section-chart,
.section-chart-stats-wrapper .section-stats {
    margin: 0;
}

/* Section Stats */
.section-stats {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(25% - 1rem);
    border-radius: var(--border-radius-p);
    overflow: hidden;
}

.stat-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    text-align: left;
    padding: 1.5rem 2rem;
}

.stat-item:nth-child(1) {
    background: #38C673;
}

.stat-item:nth-child(2) {
    background: #15A061;
}

.stat-item:nth-child(3) {
    background: #00734B;
}

.stat-item:nth-child(4) {
    background: #004A32;
}

.stat-value {
    display: block;
    font-size: 2rem;
    line-height: 2rem;
    color: var(--text-white);
    margin-bottom: 0.4rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-white);
    line-height: 1.4;
}

/* Section Charts */
.section-chart {
    margin: 2rem 0;
    padding: 2rem;
    border-radius: var(--border-radius-p);
    min-height: 300px;
}

.section-chart-stats-wrapper .section-chart {
    flex: 0 0 calc(75% - 1rem);
    padding: 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chart-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 250px;
}

.chart-title {
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
}

.section-chart-stats-wrapper .chart-title {
    margin-bottom: 1.5rem;
    font-size: 2.6rem;
    line-height: 1.2;
}
.section-chart-stats-wrapper .chart-description {
    margin-bottom: 1.5rem;
}

/* Bar Chart Styles */
.bar-chart {
    width: 100%;
}

.bar-chart-bars {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bar-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bar-label {
    flex-shrink: 0;
    width: 120px;
    font-size: 0.85rem;
    color: var(--text-body);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #e5e9e1;
    border-radius: 0.25rem;
    height: 28px;
    overflow: hidden;
}

.bar-item .bar {
    height: 100%;
    background: linear-gradient(90deg, #2d5a4a, #4a7c6a);
    border-radius: 0.25rem;
    min-width: 4px;
    transition: width 0.5s ease;
}

.bar-value {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    min-width: 40px;
}

/* Pie Chart Styles */
.pie-chart {
    width: 100%;
}

.pie-chart-wrapper {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.pie-circle-container {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    position: relative;
}

.pie-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.25s ease;
}

.pie-slice-overlays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.pie-center-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background: white;
    border-radius: 50%;
    z-index: 2;
    pointer-events: auto;
    cursor: default;
}

.pie-legend {
    display: flex;
    flex-direction: column;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.4rem;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-label {
    font-size: 0.9rem;
    color: var(--text-body);
    min-width: 100px;
}

.legend-value {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.legend-count {
    display: flex;
}

.legend-percent.strong {
    background: #e9f6ee;
    font-size: 0.7rem;
    line-height: 1.7;
    padding: 0 0.3rem;
    border-radius: 0.5rem 0.5rem 0.5rem 0;
    color: #4b6058;
}

/* Pie Chart Slice Hover Effects */
.pie-slice-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 1;
}

/* Show overlay on hover to create highlight effect */
.pie-slice-overlay.slice-highlighted {
    opacity: 1;
}

/* Fade the base pie when hovering - keep colors visible but dimmed */
.pie-chart.slice-hover-active .pie-circle {
    opacity: 0.2;
    transition: opacity 0.25s ease;
}


/* Legend item hover states */
.legend-item {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.legend-item.slice-faded {
    opacity: 0.3;
}

.legend-item.slice-highlighted {
    opacity: 1;
}

/* Histogram Chart Styles */
.histogram-chart {
    width: 100%;
}

.histogram-bars {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    align-items: flex-end;
    height: 220px;
    padding-top: 20px;
}

.histogram-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 100px;
}

.histogram-bar-wrapper {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.histogram-bar {
    width: 60%;
    background: linear-gradient(180deg, #2d5a4a, #4a7c6a);
    border-radius: 0.25rem 0.25rem 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 4px;
    transition: height 0.5s ease;
}

.histogram-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    padding-top: 0.5rem;
}

.histogram-label {
    font-size: 0.8rem;
    color: var(--text-body);
    margin-top: 0.5rem;
    text-align: center;
}

.histogram-percent {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Radar Chart Styles (Table-based fallback) */
.radar-chart {
    width: 100%;
}

.radar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.radar-grid {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    display: none; /* Hidden - using table instead */
}

.radar-metric {
    position: absolute;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    transform: translate(-50%, -50%);
}

.radar-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.radar-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.radar-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.radar-legend-name {
    font-size: 0.85rem;
    color: var(--text-body);
}

.radar-table {
    overflow-x: auto;
}

.radar-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.radar-table th,
.radar-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e9e1;
}

.radar-table th {
    font-weight: 600;
    color: var(--text-dark);
    background: #f5f8f2;
}

.radar-table td {
    color: var(--text-body);
}

.radar-table td:first-child {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.supplier-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.radar-table tbody tr:hover {
    background: #fcfff6;
}

@media screen and (max-width: 640px) {
    .section-chart-stats-wrapper {
        flex-direction: column;
    }
    
    .section-chart-stats-wrapper .section-chart {
        padding: 0;
    }
    
    .pie-chart-wrapper {
        flex-wrap: nowrap;
        gap: 2rem;
    }
    
    .pie-circle-container {
        width: 80px;
        height: 80px;
    }
    
    .pie-legend {
        gap: 0;
    }
    
    .legend-label {
        min-width: 70px;
    }
    
    .legend-label,
    .legend-count {
        font-size: 0.8rem;
    }
    
    .legend-percent.strong {
        font-size: 0.6rem;
    }
    
    .section-stats {
        flex-direction: column;
    }
}

/* =============================================================================
SECTION 4: CONCLUSION
============================================================================= */

.insights-conclusion {
    padding: 4rem 0;
    max-width: var(--max-width-60);
    margin: 0 auto;
}

.insights-conclusion .section-title {
    margin-bottom: 1.5rem;
}

.insights-conclusion .conclusion-paragraph {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-body);
    margin-bottom: 1rem;
}

/* =============================================================================
SECTION 5: ABOUT & METHODOLOGY
============================================================================= */

.insights-about {
    padding: 4rem 0;
    max-width: var(--max-width-60);
    margin: 0 auto;
}

.about-grid {
    display: block;
    margin-bottom: 2rem;
}

.about-card {
    margin-bottom: 4rem;
}

.about-card h3 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.about-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-body);
    margin: 0;
}

.insights-about h2 {
    margin-bottom: 2rem;
}

/* FAQs & Disclaimers structured layout */
.faqs-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 1rem;
}

.faq-question {
    margin-bottom: 0;
    padding-bottom: 0;
}

.faq-answer {
    color: var(--text-body);
}

.faq-disclaimer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light, #e5e9e1);
}

.faq-disclaimer p {
    font-size: 0.9rem;
    color: var(--text-muted, #6b7280);
}

.sources-section {
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 1rem 1rem 1rem 0;
    border: 1px solid #e5e9e1;
}

.sources-section h3 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.sources-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
}

.sources-list li {
    font-size: 0.9rem;
    color: var(--text-muted);
}

@media screen and (max-width: 640px) {
    .about-grid,
    .about-card.faqs-card {
        margin-bottom: 0;
    }
    
    .insights-about,
    .insights-conclusion {
        padding-bottom: 0;
    }
}

/* =============================================================================
SECTION 6: PROMO CARDS
============================================================================= */

.insights-promo-section {
    padding: 4rem 0;
}

.insights-promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.insights-promo-card {
    display: flex;
    flex-direction: column;
    padding: 3rem 4rem 4rem;
    background: var(--color-light-2);
    border-radius: var(--border-radius-p-2);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.insights-promo-card .promo-card-content {
    flex: 1;
    margin-bottom: 1.5rem;
}

.insights-promo-card h3 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    margin: 0 0 0.75rem 0;
}

.insights-promo-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-body);
    margin: 0;
}

.insights-promo-card .promo-card-cta {
    align-self: flex-start;
}

/* =============================================================================
SECTION 7: CTA FOOTER
============================================================================= */

.insights-cta-footer {
    padding: 5rem 0;
    color: var(--text-white);
}

.insights-cta-footer .cta-content {
    text-align: center;
    max-width: var(--max-width-50);
    margin: 0 auto;
}

.insights-cta-footer h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.insights-cta-footer .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.insights-cta-footer .cta-note {
    font-size: 0.9rem;
    opacity: 0.7;
    margin: 0;
}

.category-cta-footer .row-bg {
    background-color: #2e3c38;
}

.category-landing-page .row-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.category-cta-footer {
    color: var(--text-white);
    padding: 5rem 0;
    text-align: center;
    margin-bottom: 0 !important;
}

.category-cta-footer h2 {
    max-width: var(--max-width-50);
    margin: 0 auto 4rem;
    line-height: 1.2;
}

.category-cta-footer .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.category-cta-footer .nectar-button {
    max-width: 22rem;
}

.before-footer {
    background: var(--bg-dark) !important;
}

@media screen and (max-width: 640px) {
    
    .insights-promo-card {
        padding: 3rem;
    }
    
    .category-cta-footer .cta-buttons {
        flex-direction: column;
    }
    
}

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

@media (max-width: 1024px) {
    
    .quadrant-analysis-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .insights-hero {
        padding: 6rem 0 3rem;
    }
    
    .insights-hero .hero-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }
    
    .insights-hero .hero-meta {
        align-items: flex-start;
        gap: 2rem;
    }
    
    .insights-hero .meta-separator {
        display: none;
    }
    
    .quadrant-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .insights-cta-footer .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    
    .insights-hero .hero-meta {
        gap: 3rem;
    }
    
    .insights-hero .hero-meta .meta-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .insights-hero .hero-meta .meta-label {
        order: 2;
    }
    
    .insights-hero .hero-meta .meta-value {
        font-size: 1.1rem;
    }
    
}


/* =============================================================================
COMPETITIVE ASSESSMENT SECTION
============================================================================= */

.competitive-assessment-section {
    margin: 6rem 0;
}

/* Assessment header with title and compare button */
.competitive-assessment-section .assessment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.competitive-assessment-section .assessment-header .section-title {
    margin-bottom: 0;
}

/* Assessment compare button - always visible */
.competitive-assessment-section .assessment-compare-btn {
    display: inline-flex;
}

.assessment-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.assessment-section-description {
    margin-bottom: 2rem;
    font-size: 1rem;
    max-width: var(--max-width-60);
}

/* Full-width stacked cards */
.assessment-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.assessment-card {
    display: flex;
    align-items: stretch;
    background: var(--color-white);
    border-radius: var(--border-radius-p-2);
    box-shadow: 0 4px 24px color-mix(in srgb, var(--color-black) 10%, transparent);
    padding: 2rem;
    gap: 4rem;
    transition: box-shadow 0.2s ease;
}

.assessment-card:hover {
    box-shadow: 0 8px 32px color-mix(in srgb, var(--color-black) 15%, transparent);
}

/* Left side: Content (60%) */
.assessment-card-content {
    flex: 0 0 calc(60% - 2rem);
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.assessment-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.assessment-rank {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--color-dark);
    color: var(--color-accent);
    border-radius: 0.5rem 0.5rem 0.5rem 0;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.assessment-logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.assessment-logo {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    border-radius: 100px;
    box-shadow: 0 0 1px 1px color-mix(in srgb, var(--color-black) 15%, transparent);
}

.assessment-supplier-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.assessment-supplier-name {
    display: block;
    font-size: 2rem;
    color: var(--text-dark);
    text-decoration: none;
}

.assessment-supplier-name:hover {
    color: var(--color-accent-dark);
}

.assessment-score-badges {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-shrink: 0;
}

.assessment-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.assessment-score {
    text-align: right;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}

.assessment-score .score-value {
    font-size: 2rem;
    color: var(--color-primary);
}

.assessment-score .scores-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.7rem;
    line-height: 1.4;
    white-space: nowrap;
    width: 14rem;
}

.assessment-score .scores-tooltip .tooltip-description {
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    text-wrap-mode: wrap;
    text-align: left;
}

.assessment-score .scores-tooltip .tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.assessment-score .scores-tooltip .tooltip-label {
    color: var(--text-secondary);
}

.assessment-score .scores-tooltip .tooltip-value {
    font-weight: 600;
}

.assessment-score:hover .scores-tooltip,
.assessment-score .scores-tooltip:hover {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease 0.3s, visibility 0.2s ease 0.3s;
}

.assessment-card-body {
    padding-left: 3rem;
    flex: 1;
}

.assessment-description {
    color: var(--text-muted);
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

/* Key Differentiators */
.assessment-key-differentiators {
    margin: 0;
}

.assessment-key-differentiators ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.assessment-key-differentiators li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    font-size: 0.9rem;
    color: var(--text-dark);
    line-height: 1.5;
}

.assessment-key-differentiators li:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 0.25rem;
    background-image: url(https://palomarr.com/wp-content/uploads/2024/05/icon-arrow-right.svg);
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: 2px 1px;
}

/* Assessment Card Action Buttons */
.assessment-card-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-left: 3rem;
}

.assessment-card-actions .nectar-button {
    font-size: 0.875rem;
}

/* Right side: Spider Chart (40%) */
.assessment-card-chart {
    flex: 0 0 calc(40% - 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: #edf7f5;
    border-radius: var(--border-radius-p);
    position: relative;
}

.assessment-chart-logo {
    position: absolute;
    bottom: 1.2rem;
    right: 1.5rem;
    width: 5rem;
    height: auto;
    opacity: 0.7;
}

/* Spider Chart SVG Styles */
.spider-chart {
    width: 100%;
    height: auto;
}

.spider-grid-ring {
    fill: none;
    stroke: #dcebe7;
    stroke-width: 0.6;
}

.spider-grid-outer {
    fill: white;
}

.spider-axis {
    stroke: #dcebe7;
    stroke-width: 0.6;
}

.spider-data {
    fill: rgba(34, 180, 156, 0.35);
    stroke: #3cc4ac;
    stroke-width: 0.6;
}

/* Spider chart color variants (rotate every 3) */
.spider-chart.spider-color-2 .spider-data {
    fill: rgba(140, 210, 165, 0.35);
    stroke: #6bc48e;
}

.spider-chart.spider-color-3 .spider-data {
    fill: rgba(180, 215, 140, 0.35);
    stroke: #8fbf5c;
}

/* Chart container background variants */
.assessment-card-chart:has(.spider-color-2) {
    background: #edf7f0;
}

.assessment-card-chart:has(.spider-color-3) {
    background: #f6fbf5;
}

.spider-point {
    display: none;
}

.spider-label {
    font-size: 9px;
    fill: var(--text-dark);
}

/* =============================================================================
ORBIT SHIFT ASSESSMENT - Dynamic assessment when Orbit Shift is active
============================================================================= */

/* Assessment header container — title + badge inline on desktop */
.competitive-assessment-section .assessment-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.competitive-assessment-section .assessment-header-top .section-title {
    margin-bottom: 0;
}

/* Orbit Shift badge in assessment header */
.competitive-assessment-section .orbit-shift-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #ebf5f1;
    padding: 0.3rem 0.3rem 0.3rem 0.75rem;
    border-radius: var(--border-radius-p);
    font-size: 0.75rem;
    width: fit-content;
}

.competitive-assessment-section .orbit-shift-badge .badge-text {
    color: var(--color-primary);
    font-size: 0.7rem;
}

/* Smooth transitions for assessment list */
.assessment-list {
    transition: opacity 200ms ease;
}

/* Match percentage color for orbit shift cards */
.assessment-card.orbit-shift-card .match-percentage {
    color: var(--color-primary);
}

/* Loading skeleton for AI-generated descriptions */
.assessment-description-loading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 1.5em 0;
}

.assessment-description-loading .skeleton-line {
    height: 0.875rem;
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 10%, transparent) 25%, color-mix(in srgb, var(--color-primary) 25%, transparent) 50%, color-mix(in srgb, var(--color-primary) 10%, transparent) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s infinite;
    border-radius: 4px;
}

.assessment-description-loading .skeleton-line:last-child {
    width: 60%;
}

/* Loading skeleton for key differentiators */
.assessment-differentiators-loading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 50%;
}

.assessment-differentiators-loading .skeleton-line {
    height: 0.875rem;
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 10%, transparent) 25%, color-mix(in srgb, var(--color-primary) 25%, transparent) 50%, color-mix(in srgb, var(--color-primary) 10%, transparent) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (max-width: 640px) {
    
    .competitive-assessment-section .assessment-header {
        margin-bottom: 2rem;
        flex-direction: column;
    }

    .competitive-assessment-section .assessment-header-top {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .assessment-card {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    
    .assessment-card-header {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .assessment-logo-link {
        order: 1;
        flex: 0 0 auto;
    }

    .assessment-badges {
        flex-direction: column;
    }
    
    .assessment-score-badges {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        gap: 1.3rem;
        align-items: flex-start;
        justify-content: flex-end;
    }

    .assessment-supplier-info {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        margin-top: 0.75rem;
    }
    
    .assessment-card-body {
        padding-left: 0;
    }
    
    .assessment-card-chart {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
    
    .assessment-chart-logo {
        width: 3.5rem;
        bottom: 1rem;
        right: 1rem;
    }
    
    .assessment-card-content {
        padding: 0;
    }
    
    .assessment-card-actions {
        flex-direction: column;
        padding-left: 0;
    }
    
    .assessment-badges .top-badge {
        font-size: 0.6rem;
        width: auto;
        flex: 0 0 auto;
    }
    
    .assessment-score .score-value {
        font-size: 1.7rem;
    }
    
    .assessment-card-actions .nectar-button {
        width: 100% !important;
    }
}

/* =============================================================================
QUICK LIST & ASSESSMENT CARD SOURCE BUTTONS
============================================================================= */

/* Quick list source button - flex sibling to .name */
.quick-list-source-button {
    font-size: 0.7rem;
    color: var(--color-green-faded);
    background: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    padding: 2px 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Assessment name source button - flex sibling to .assessment-supplier-name */
.assessment-source-button {
    font-size: 0.7rem;
    color: var(--color-green-faded);
    background: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    padding: 2px 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.quick-list-source-button .source-count,
.assessment-source-button .source-count,
.chart-source-button .source-count {
    margin-left: 2px;
}

/* Show on hover of parent row */
.quick-list-item:hover .quick-list-source-button,
.assessment-supplier-info:hover .assessment-source-button {
    opacity: 1;
}

.quick-list-source-button:hover,
.assessment-source-button:hover {
    opacity: 1;
}

/* Chart source button - positioned bottom left */
.chart-source-button {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    font-size: 0.7rem;
    color: var(--color-green-faded);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    padding: 0.3rem 0.3rem 0.3rem 0.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
}

.assessment-card-chart:hover .chart-source-button {
    opacity: 1;
}

/* Ensure chart container has positioning context */
.assessment-card-chart {
    position: relative;
}