/* ===================================
   Radar Hero
   =================================== */
.radar-hero {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: var(--space-16) 0 var(--space-8);
    padding-top: calc(80px + var(--space-16));
    background: var(--color-dark);
}

@media (max-width: 768px) {
    .radar-hero {
        padding-top: calc(70px + var(--space-10));
    }
}

.radar-bg {
    position: absolute;
    inset: 0;
}

.radar-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,107,53,0.1) 0%, transparent 70%);
    animation: radarPulse 4s ease-out infinite;
}

@keyframes radarPulse {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

.radar-grid {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at center, transparent 0%, var(--color-dark) 70%),
        linear-gradient(rgba(255,107,53,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,107,53,0.03) 1px, transparent 1px);
    background-size: 100% 100%, 30px 30px, 30px 30px;
}

.radar-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.radar-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255,107,53,0.1);
    border: 1px solid rgba(255,107,53,0.3);
    color: var(--color-accent);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-6);
}

.radar-badge svg {
    width: 18px;
    height: 18px;
}

.radar-hero-content h1 {
    color: white;
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: var(--space-4);
    line-height: 1.2;
}

.radar-hero-content p {
    color: var(--color-gray-400);
    font-size: var(--text-xl);
}

/* ===================================
   Radar Tool
   =================================== */
.radar-tool {
    padding: var(--space-12) 0 var(--space-20);
    background: linear-gradient(180deg, var(--color-dark) 0%, var(--color-gray-900) 20%, var(--color-gray-50) 20%);
    min-height: 70vh;
}

.radar-step {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.radar-step.hidden {
    display: none;
}

/* Input Card */
.radar-input-card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    box-shadow: var(--shadow-xl);
    max-width: 700px;
    margin: 0 auto;
}

.input-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.input-header h2 {
    margin-bottom: var(--space-2);
}

.input-header p {
    color: var(--color-gray-500);
}

.radar-form {
    margin-bottom: var(--space-8);
}

/* Search Row - Input + Button side by side */
.search-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.input-wrapper-flex {
    display: flex;
    align-items: center;
}

.btn-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-lg);
}

.input-label-centered {
    justify-content: center;
    margin-bottom: var(--space-4);
}

@media (max-width: 640px) {
    .search-row {
        grid-template-columns: 1fr;
    }
}

/* Dual Input Grid (legacy) */
.dual-input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 640px) {
    .dual-input-grid {
        grid-template-columns: 1fr;
    }
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.input-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-gray-600);
}

.input-label svg {
    width: 16px;
    height: 16px;
}

.input-label.social-label {
    color: #1877f2;
}

.input-label.social-label svg {
    width: 18px;
    height: 18px;
}

.label-badge {
    background: linear-gradient(135deg, #1877f2, #0d5bb5);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-hint {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-4);
    text-align: center;
}

.input-wrapper {
    display: flex;
    gap: var(--space-3);
    background: var(--color-gray-100);
    border-radius: var(--radius-xl);
    padding: var(--space-3);
    border: 2px solid transparent;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-wrapper:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(255,107,53,0.1);
}

.social-input-primary:focus-within {
    border-color: #1877f2;
    box-shadow: 0 0 0 4px rgba(24,119,242,0.1);
}

.input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    flex-shrink: 0;
}

.input-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-gray-400);
}

.input-wrapper input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--text-lg);
    padding: var(--space-3);
    outline: none;
}

.input-wrapper input::placeholder {
    color: var(--color-gray-400);
}

.btn-scan {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    white-space: nowrap;
}

.btn-scan .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-scan .btn-icon svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 600px) {
    .input-wrapper {
        flex-direction: column;
    }

    .input-icon {
        display: none;
    }

    .btn-scan {
        width: 100%;
        justify-content: center;
    }
}

.input-examples {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    flex-wrap: wrap;
}

.input-examples span {
    color: var(--color-gray-500);
    font-size: var(--text-sm);
}

.example-btn {
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-scan.btn-lg {
    width: 100%;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-lg);
}

.example-btn:hover {
    background: var(--color-gray-200);
    color: var(--color-dark);
}

.trust-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-gray-500);
    font-size: var(--text-sm);
}

.trust-item svg {
    width: 18px;
    height: 18px;
    stroke: var(--color-gray-400);
}

/* ===================================
   Scanning Animation
   =================================== */
.scanning-card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
    box-shadow: var(--shadow-xl);
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.scanning-visual {
    margin-bottom: var(--space-8);
}

.scan-radar {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: relative;
}

.scan-circle {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255,107,53,0.2);
    border-radius: 50%;
}

.scan-circle:nth-child(1) { transform: scale(0.33); }
.scan-circle:nth-child(2) { transform: scale(0.66); }
.scan-circle:nth-child(3) { transform: scale(1); }

.scan-sweep {
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255,107,53,0.3) 30deg, transparent 60deg);
    border-radius: 50%;
    animation: radarSweep 2s linear infinite;
}

@keyframes radarSweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.scan-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: var(--color-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.scan-center img {
    width: 30px;
    height: 30px;
    border-radius: 4px;
}

.scan-dot {
    width: 16px;
    height: 16px;
    background: var(--color-accent);
    border-radius: 50%;
    animation: scanPulse 1s ease-out infinite;
}

@keyframes scanPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

.scanning-info h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-6);
}

#scan-domain {
    color: var(--color-accent);
}

.scan-progress {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: 400px;
    margin: 0 auto var(--space-8);
}

.scan-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.scan-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent) 0%, #f7931e 100%);
    border-radius: var(--radius-full);
    width: 0%;
    transition: width 0.3s ease;
}

.scan-progress-text {
    font-weight: 600;
    color: var(--color-accent);
    min-width: 45px;
}

.scan-stages {
    text-align: left;
    max-width: 350px;
    margin: 0 auto;
}

.scan-stage {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.scan-stage:last-child {
    border-bottom: none;
}

.stage-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stage-icon svg {
    width: 20px;
    height: 20px;
}

.stage-icon.pending svg { stroke: var(--color-gray-300); }
.stage-icon.active svg { stroke: var(--color-accent); }
.stage-icon.done svg { stroke: var(--color-success); }

.stage-icon .icon-pending { display: block; }
.stage-icon .icon-active { display: none; }
.stage-icon .icon-done { display: none; }

.stage-icon.active .icon-pending { display: none; }
.stage-icon.active .icon-active { display: block; animation: spin 1s linear infinite; }

.stage-icon.done .icon-pending { display: none; }
.stage-icon.done .icon-done { display: block; }

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

.stage-text {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.stage-icon.active + .stage-text,
.stage-icon.done + .stage-text {
    color: var(--color-dark);
}

/* ===================================
   Email Capture
   =================================== */
.email-card {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

@media (max-width: 768px) {
    .email-card {
        grid-template-columns: 1fr;
    }
}

.email-preview {
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a3e 100%);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.preview-score-ring {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: var(--space-6);
}

.preview-score-ring svg {
    width: 100%;
    height: 100%;
}

.preview-score-value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.preview-score-value span:first-child {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: white;
}

.preview-score-max {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

.preview-teaser h3 {
    color: white;
    margin-bottom: var(--space-2);
}

.preview-teaser p {
    color: var(--color-gray-400);
    margin-bottom: var(--space-6);
}

.preview-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.preview-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: rgba(255,255,255,0.05);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
}

.preview-item-icon {
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    font-size: var(--text-sm);
}

.preview-item-text {
    color: var(--color-gray-300);
    font-size: var(--text-sm);
}

.email-form-section {
    padding: var(--space-10);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.email-lock {
    width: 50px;
    height: 50px;
    background: var(--color-accent-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.email-lock svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-accent);
}

.email-form-section h3 {
    margin-bottom: var(--space-2);
}

.email-form-section > p {
    color: var(--color-gray-500);
    margin-bottom: var(--space-6);
}

/* Facebook Login Button */
.btn-facebook {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: #1877f2;
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn-facebook:hover {
    background: #166fe5;
    transform: translateY(-2px);
}

.btn-facebook:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-facebook svg {
    width: 20px;
    height: 20px;
    fill: white;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-5) 0;
    color: var(--color-gray-400);
    font-size: var(--text-sm);
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-gray-200);
}

/* Login Card Styles */
.login-card {
    text-align: center;
    padding: var(--space-10);
}

.login-card .input-header {
    margin-bottom: var(--space-8);
}

.btn-facebook.btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-lg);
}

.btn-facebook.btn-lg svg {
    width: 24px;
    height: 24px;
}

.fb-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-6) 0;
    text-align: left;
}

.fb-benefit {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-gray-600);
    font-size: var(--text-sm);
}

.fb-benefit svg {
    width: 18px;
    height: 18px;
    stroke: var(--color-success);
    flex-shrink: 0;
}

.btn-skip {
    width: 100%;
    color: var(--color-gray-500);
    border-color: var(--color-gray-300);
}

.btn-skip:hover {
    color: var(--color-gray-700);
    border-color: var(--color-gray-400);
    background: var(--color-gray-50);
}

/* FB User Info (shown after login) */
.fb-user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(24, 119, 242, 0.1);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.fb-user-avatar {
    width: 44px;
    height: 44px;
    background: #1877f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fb-user-avatar svg {
    width: 24px;
    height: 24px;
    stroke: white;
}

.fb-user-details {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.fb-user-name {
    font-weight: 600;
    color: var(--color-dark);
}

.fb-user-status {
    font-size: var(--text-sm);
    color: #1877f2;
}

/* Page Selector */
.page-selector-container {
    margin: var(--space-4) 0;
}

.page-selector-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 400px;
    overflow-y: auto;
}

.page-selector-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.page-selector-item:hover {
    border-color: #1877f2;
    background: rgba(24, 119, 242, 0.05);
}

.page-selector-img {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--color-gray-200);
}

.page-selector-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.page-selector-name {
    font-weight: 600;
    color: var(--color-dark);
    font-size: var(--text-base);
}

.page-selector-fans {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.skip-link {
    display: block;
    width: 100%;
    padding: var(--space-3);
    margin-top: var(--space-4);
    background: transparent;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.skip-link:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-400);
}

.email-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.email-form input {
    flex: 1;
    min-width: 200px;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast);
}

.email-form input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.email-form button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.email-form button svg {
    width: 18px;
    height: 18px;
}

.email-error {
    width: 100%;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.email-error::before {
    content: '⚠️';
}

.email-error.hidden {
    display: none;
}

.email-form input.error {
    border-color: #f87171;
    background: #fef2f2;
}

.email-form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 500px) {
    .email-form {
        flex-direction: column;
    }
}

.email-disclaimer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.email-disclaimer svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ===================================
   Results
   =================================== */
.results-header {
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a3e 100%);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.results-company {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.result-favicon {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: var(--radius-lg);
    padding: 4px;
}

.results-company-info h2 {
    color: white;
    font-size: var(--text-2xl);
    margin-bottom: var(--space-1);
}

.result-date {
    color: var(--color-gray-400);
    font-size: var(--text-sm);
}

.results-main-score {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.main-score-ring {
    position: relative;
    width: 120px;
    height: 120px;
}

.main-score-ring svg {
    width: 100%;
    height: 100%;
}

.main-score-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-score-value {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: white;
    line-height: 1;
}

.main-score-label {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

.main-score-verdict {
    text-align: left;
}

.verdict-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    margin-bottom: var(--space-1);
}

.verdict-text {
    display: block;
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-accent);
}

@media (max-width: 600px) {
    .results-header {
        flex-direction: column;
        text-align: center;
    }

    .results-company {
        flex-direction: column;
    }

    .results-main-score {
        flex-direction: column;
    }

    .main-score-verdict {
        text-align: center;
    }
}

/* Results Grid */
.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

@media (max-width: 1200px) {
    .results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .results-grid {
        grid-template-columns: 1fr;
    }
}

.result-card {
    display: block !important; /* Ensure children stack vertically - override global style.css */
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* Featured Social Media Card */
.result-card-featured {
    display: block !important; /* Force vertical stacking */
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
    border: 2px solid rgba(24, 119, 242, 0.2);
    margin-bottom: var(--space-6);
}

.result-card-featured .result-card-header {
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.08) 0%, rgba(24, 119, 242, 0.02) 100%);
}

.featured-icon {
    background: linear-gradient(135deg, #1877f2, #0d5bb5) !important;
}

.featured-icon svg {
    fill: white;
    stroke: none;
}

.fb-api-note {
    background: rgba(24, 119, 242, 0.05);
    border: 1px dashed rgba(24, 119, 242, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
}

.fb-api-note p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
}

.fb-api-note a {
    color: #1877f2;
    text-decoration: none;
    font-weight: 500;
}

.fb-api-note a:hover {
    text-decoration: underline;
}

.result-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-gray-100);
}

/* On smaller desktop screens, stack header vertically */
@media (max-width: 1400px) {
    .results-grid .result-card-header {
        flex-direction: column;
        text-align: center;
        gap: var(--space-2);
    }

    .results-grid .result-card-title {
        width: 100%;
    }

    .results-grid .result-card-score {
        width: 100%;
        text-align: center;
    }
}

.result-card-icon {
    width: 48px;
    height: 48px;
    background: var(--color-gray-100);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.result-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-dark);
}

.result-card-title {
    flex: 1;
}

.result-card-title h3 {
    font-size: var(--text-lg);
    margin-bottom: 0;
}

.result-card-title p {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin: 0;
}

.result-card-score {
    text-align: right;
}

.card-score-value {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-dark);
}

.card-score-max {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
}

.result-card-body {
    padding: var(--space-5);
}

.result-findings {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.finding-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.finding-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.finding-icon.good {
    background: rgba(34, 197, 94, 0.1);
}

.finding-icon.good svg {
    stroke: var(--color-success);
}

.finding-icon.warning {
    background: rgba(245, 158, 11, 0.1);
}

.finding-icon.warning svg {
    stroke: #f59e0b;
}

.finding-icon.bad {
    background: rgba(239, 68, 68, 0.1);
}

.finding-icon.bad svg {
    stroke: #ef4444;
}

.finding-icon svg {
    width: 14px;
    height: 14px;
}

.finding-text {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

/* Extended Website Analysis Section */
.website-extended-section {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    margin-top: var(--space-6);
    overflow: hidden;
}

.extended-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0.02) 100%);
    border-bottom: 1px solid var(--color-gray-100);
}

.extended-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.extended-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.extended-icon svg {
    width: 24px;
    height: 24px;
    stroke: white;
}

.extended-title h3 {
    font-size: var(--text-lg);
    margin-bottom: 0;
    color: var(--color-dark);
}

.extended-title p {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin: 0;
}

.extended-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.extended-toggle:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
}

.extended-toggle[aria-expanded="true"] {
    background: var(--color-gray-100);
}

.extended-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

.toggle-icon {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-fast);
}

/* Quick Stats Bar */
.extended-quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
}

.quick-stat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.quick-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-stat-icon.good {
    background: rgba(34, 197, 94, 0.1);
}

.quick-stat-icon.good svg {
    stroke: var(--color-success);
}

.quick-stat-icon.warning {
    background: rgba(245, 158, 11, 0.1);
}

.quick-stat-icon.warning svg {
    stroke: #f59e0b;
}

.quick-stat-icon.bad {
    background: rgba(239, 68, 68, 0.1);
}

.quick-stat-icon.bad svg {
    stroke: #ef4444;
}

.quick-stat-icon.neutral {
    background: var(--color-gray-100);
}

.quick-stat-icon.neutral svg {
    stroke: var(--color-gray-500);
}

.quick-stat-icon svg {
    width: 16px;
    height: 16px;
}

.quick-stat-content {
    flex: 1;
    min-width: 0;
}

.quick-stat-value {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.2;
}

.quick-stat-label {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Website Summary - Alltid synlig (Video + Bilder) */
.website-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    background: white;
}

@media (max-width: 768px) {
    .website-summary {
        grid-template-columns: 1fr;
    }
}

.summary-card {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--color-gray-100);
}

.summary-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-gray-200);
}

.summary-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.summary-icon svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.summary-title {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-title h4 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0;
}

.summary-score {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
}

.summary-score small {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gray-400);
}

.summary-findings {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.summary-findings .finding-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    padding: var(--space-2);
    background: white;
    border-radius: var(--radius-md);
}

.summary-findings .finding-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-findings .finding-icon.good { color: var(--color-success); }
.summary-findings .finding-icon.warning { color: #f59e0b; }
.summary-findings .finding-icon.bad { color: #ef4444; }

/* Extended category score badge */
.ext-score {
    margin-left: auto;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(99, 102, 241, 0.1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
}

/* Extended Details (expandable) */
.extended-details {
    padding: var(--space-5);
}

.extended-category {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-gray-100);
}

.extended-category:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.extended-category h4 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-3);
}

.extended-category h4 svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-gray-400);
}

.ext-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
}

.ext-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.ext-stat-label {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.ext-stat-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
}

.ext-stat-value.good {
    color: var(--color-success);
}

.ext-stat-value.warning {
    color: #f59e0b;
}

.ext-stat-value.bad {
    color: #ef4444;
}

/* Extended Findings */
.extended-findings {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 2px solid var(--color-gray-100);
}

.extended-findings h4 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-4);
}

.extended-findings h4 svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-gray-400);
}

.ext-findings-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ext-finding-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-gray-200);
}

.ext-finding-item.high {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.ext-finding-item.medium {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.ext-finding-item.low {
    border-left-color: var(--color-success);
    background: rgba(34, 197, 94, 0.05);
}

.ext-finding-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ext-finding-item.high .ext-finding-icon {
    background: rgba(239, 68, 68, 0.2);
}

.ext-finding-item.high .ext-finding-icon svg {
    stroke: #ef4444;
}

.ext-finding-item.medium .ext-finding-icon {
    background: rgba(245, 158, 11, 0.2);
}

.ext-finding-item.medium .ext-finding-icon svg {
    stroke: #f59e0b;
}

.ext-finding-item.low .ext-finding-icon {
    background: rgba(34, 197, 94, 0.2);
}

.ext-finding-item.low .ext-finding-icon svg {
    stroke: var(--color-success);
}

.ext-finding-icon svg {
    width: 14px;
    height: 14px;
}

.ext-finding-content {
    flex: 1;
}

.ext-finding-text {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.ext-finding-stat {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    line-height: 1.4;
}

/* Social Links */
.social-links {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-100);
    flex-wrap: wrap;
}

.social-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-gray-100);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.social-link:hover {
    background: var(--color-gray-200);
    color: var(--color-dark);
}

.social-link svg {
    width: 18px;
    height: 18px;
}

.social-link.found {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success);
}

.social-link.not-found {
    background: var(--color-gray-100);
    color: var(--color-gray-400);
}

/* Facebook Insights */
.facebook-insights {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.05) 0%, rgba(24, 119, 242, 0.02) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(24, 119, 242, 0.15);
}

.facebook-insights.hidden {
    display: none;
}

.fb-insights-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-weight: 600;
    color: #1877f2;
    font-size: var(--text-sm);
}

.fb-icon {
    width: 18px;
    height: 18px;
}

.fb-page-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(24, 119, 242, 0.1);
}

.fb-page-picture {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    display: none;
}

.fb-page-details {
    display: flex;
    flex-direction: column;
}

.fb-page-name {
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--text-base);
}

.fb-page-category {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.fb-insights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

@media (max-width: 640px) {
    .fb-insights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.fb-stat {
    text-align: center;
    padding: var(--space-2);
}

.fb-stat-value {
    display: block;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
}

.fb-stat-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    margin-top: var(--space-1);
}

/* Facebook Detailed Analysis */
.fb-verdict {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, #e8f4fd 0%, #f0f7ff 100%);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid rgba(24, 119, 242, 0.2);
}

.fb-verdict-text {
    font-size: var(--text-base);
    font-weight: 600;
    color: #1877f2;
}

.fb-verdict.verdict-good {
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    border-color: rgba(34, 197, 94, 0.3);
}

.fb-verdict.verdict-good .fb-verdict-text {
    color: #16a34a;
}

.fb-verdict.verdict-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border-color: rgba(245, 158, 11, 0.3);
}

.fb-verdict.verdict-warning .fb-verdict-text {
    color: #d97706;
}

.fb-verdict.verdict-bad {
    background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
    border-color: rgba(239, 68, 68, 0.3);
}

.fb-verdict.verdict-bad .fb-verdict-text {
    color: #dc2626;
}

.fb-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-gray-100);
}

.fb-section-title svg {
    color: #1877f2;
}

.fb-findings-detailed,
.fb-insights-detailed,
.fb-recommendations,
.fb-posting-activity {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.fb-activity-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.fb-activity-stat {
    text-align: center;
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.fb-activity-stat .activity-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.fb-activity-stat .activity-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-top: var(--space-1);
}

.fb-activity-assessment {
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
}

.fb-activity-assessment.good {
    border-left-color: var(--color-success);
}

.fb-activity-assessment.warning {
    border-left-color: var(--color-warning);
}

.fb-activity-assessment.bad {
    border-left-color: var(--color-error);
}

/* Video vs Image Comparison */
.fb-comparison {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.fb-comparison-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.fb-comparison-item {
    flex: 1;
    text-align: center;
    padding: var(--space-4);
    background: white;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-gray-200);
    max-width: 180px;
}

.fb-comparison-item.video {
    border-color: var(--color-primary);
}

.fb-comparison-item .comparison-icon {
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

.fb-comparison-item .comparison-label {
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: var(--space-1);
}

.fb-comparison-item .comparison-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
}

.fb-comparison-item.video .comparison-value {
    color: var(--color-primary);
}

.fb-comparison-item.image .comparison-value {
    color: var(--color-gray-600);
}

.fb-comparison-item .comparison-sublabel {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.fb-comparison-vs {
    font-weight: 700;
    color: var(--color-gray-400);
    font-size: 1.25rem;
}

.fb-comparison-result {
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 500;
}

.fb-comparison-result.positive {
    border-left: 3px solid var(--color-success);
    color: var(--color-success);
}

.fb-comparison-result.negative {
    border-left: 3px solid var(--color-warning);
    color: var(--color-warning);
}

.fb-comparison-result.warning {
    border-left: 3px solid var(--color-warning);
    background: rgba(251, 191, 36, 0.1);
}

.fb-comparison-result.warning strong {
    color: #b45309;
}

.fb-comparison-result.neutral {
    border-left: 3px solid var(--color-gray-400);
    background: rgba(156, 163, 175, 0.1);
}

.fb-comparison-result.neutral strong {
    color: var(--color-gray-700);
}

.fb-comparison-result strong {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-base);
}

.comparison-hint {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    font-weight: 400;
}

.comparison-count {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin-bottom: var(--space-1);
}

.fb-comparison-explainer {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    text-align: center;
    margin-bottom: var(--space-3);
    margin-top: 0;
}

/* Engagement Rate */
.fb-engagement-rate {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.fb-engagement-display {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.engagement-rate-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    min-width: 100px;
}

.engagement-rate-benchmark {
    flex: 1;
}

.benchmark-bar {
    height: 12px;
    background: var(--color-gray-200);
    border-radius: 6px;
    position: relative;
    overflow: visible;
}

.benchmark-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-error), var(--color-warning), var(--color-success));
    border-radius: 6px;
    width: 100%;
}

.benchmark-marker {
    position: absolute;
    top: -4px;
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border: 3px solid white;
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    left: 0%;
}

.benchmark-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.fb-engagement-assessment {
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
}

.fb-engagement-assessment.good { border-left-color: var(--color-success); }
.fb-engagement-assessment.warning { border-left-color: var(--color-warning); }
.fb-engagement-assessment.bad { border-left-color: var(--color-error); }

/* Last Post Alert */
.fb-last-post {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.fb-last-post-content {
    text-align: center;
    padding: var(--space-4);
    background: white;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.last-post-days {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
}

.last-post-days.warning { color: var(--color-warning); }
.last-post-days.bad { color: var(--color-error); }

.last-post-label {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
}

.fb-last-post-assessment {
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
}

.fb-last-post-assessment.good { border-left-color: var(--color-success); }
.fb-last-post-assessment.warning { border-left-color: var(--color-warning); }
.fb-last-post-assessment.bad { border-left-color: var(--color-error); }

/* Top Performing Posts */
.fb-top-posts {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.fb-top-posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.fb-top-post-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius-md);
}

.top-post-rank {
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.top-post-rank.gold { background: #FFD700; color: #333; }
.top-post-rank.silver { background: #C0C0C0; color: #333; }
.top-post-rank.bronze { background: #CD7F32; color: white; }

.top-post-content {
    flex: 1;
    min-width: 0;
}

.top-post-type {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-gray-100);
    border-radius: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}

.top-post-type.video { background: var(--color-primary); color: white; }

.top-post-message {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-post-stats {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    flex-shrink: 0;
}

.top-post-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Video Stats */
.fb-video-stats {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.fb-video-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

@media (max-width: 768px) {
    .fb-video-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.fb-video-stat-item {
    text-align: center;
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.fb-video-stat-item .video-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.fb-video-stat-item .video-stat-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    margin-top: var(--space-1);
}

.fb-section-subtitle {
    display: block;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-gray-500);
    margin-top: 2px;
}

/* Rekkevidde & Engasjement */
.fb-reach-section {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: var(--radius-lg);
    border: 1px solid #bae6fd;
}

.fb-reach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.fb-reach-item {
    text-align: center;
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.fb-reach-item.highlight {
    background: linear-gradient(135deg, var(--color-primary) 0%, #7c3aed 100%);
    border-color: var(--color-primary);
}

.fb-reach-item.highlight .reach-value,
.fb-reach-item.highlight .reach-label,
.fb-reach-item.highlight .reach-description {
    color: white;
}

.fb-reach-item .reach-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.fb-reach-item .reach-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin-top: var(--space-1);
}

.fb-reach-item .reach-description {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    margin-top: 2px;
}

/* Innholdsfordeling */
.fb-content-mix {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.fb-content-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.fb-content-bar-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.content-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-bar-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gray-700);
}

.content-bar-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-gray-600);
}

.content-bar-track {
    height: 8px;
    background: var(--color-gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.content-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.content-bar-fill.video {
    background: linear-gradient(90deg, var(--color-primary) 0%, #7c3aed 100%);
}

.content-bar-fill.photo {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.content-bar-fill.link {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.fb-content-tip {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    border-left: 3px solid var(--color-primary);
}

/* Kilde-tooltip */
/* ============================================
   TOOLTIPS - Full tooltip implementation
   ============================================ */

/* Custom tooltip for source-tooltip */
.source-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
    background: rgba(255, 107, 53, 0.15);
    border-radius: 50%;
    cursor: help;
    vertical-align: middle;
}
.source-tooltip:hover {
    background: rgba(255, 107, 53, 0.3);
}
.source-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    width: 280px;
    max-width: 90vw;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
    text-transform: none !important; /* Important: Ikke uppercase i tooltip-tekst */
}
.source-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a2e;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1001;
}
.source-tooltip:hover::after,
.source-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 640px) {
    /* På mobil: vis tooltip sentrert på skjermen */
    .source-tooltip {
        position: static;
    }
    .source-tooltip::after {
        position: fixed;
        bottom: auto;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        width: min(280px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
    }
    .source-tooltip::before {
        display: none;
    }
}

/* Tooltip headers for table */
.tooltip-header {
    position: relative;
    cursor: help;
    text-transform: none !important; /* Important: Ikke uppercase */
}
.tooltip-header::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    width: 260px;
    max-width: 90vw;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
    white-space: normal;
    text-transform: none !important; /* Important: Ikke uppercase i tooltip-tekst */
}
.tooltip-header:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Dataperiode */
.fb-data-period {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.fb-data-period svg {
    flex-shrink: 0;
    color: var(--color-gray-400);
}

/* Anmeldelser/Ratings */
.fb-ratings-section {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border-radius: var(--radius-lg);
    border: 1px solid #fde047;
}

.fb-ratings-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-4);
}

.fb-rating-card {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
    border: 1px solid var(--color-gray-200);
}

.rating-stars {
    font-size: 1.8rem;
    letter-spacing: 2px;
    margin-bottom: var(--space-2);
}

.rating-stars .star {
    color: #d1d5db;
    transition: color 0.3s ease;
}

.rating-stars .star.filled {
    color: #fbbf24;
}

.rating-stars .star.half {
    background: linear-gradient(90deg, #fbbf24 50%, #d1d5db 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rating-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-800);
}

.rating-big-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.rating-label {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-top: var(--space-1);
}

.fb-ratings-assessment {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-primary);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.fb-ratings-assessment.good {
    border-left-color: var(--color-success);
    background: rgba(34, 197, 94, 0.05);
}

.fb-ratings-assessment.warning {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.fb-ratings-assessment.bad {
    border-left-color: var(--color-danger);
    background: rgba(239, 68, 68, 0.05);
}

@media (max-width: 768px) {
    .fb-ratings-row {
        grid-template-columns: 1fr;
    }

    .fb-reach-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .fb-reach-grid {
        grid-template-columns: 1fr;
    }
}

.video-eng-benchmark {
    margin-top: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    text-align: center;
}

.video-eng-benchmark.benchmark-low {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

.video-eng-benchmark.benchmark-average {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.video-eng-benchmark.benchmark-good {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success);
}

/* Video Retention Styles */
.fb-video-retention {
    background: var(--color-gray-800);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-4);
}

.fb-retention-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.fb-retention-item {
    text-align: center;
    padding: var(--space-3);
    background: var(--color-gray-700);
    border-radius: var(--radius-md);
}

.fb-retention-item.highlight {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.retention-value {
    display: block;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-white);
}

.retention-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-gray-300);
    margin-top: 2px;
}

.retention-desc {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    margin-top: 2px;
}

.fb-retention-assessment {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    border-left: 3px solid var(--color-gray-600);
    background: var(--color-gray-700);
}

.fb-retention-assessment.excellent { border-left-color: var(--color-success); background: rgba(34, 197, 94, 0.1); }
.fb-retention-assessment.good { border-left-color: #22c55e; background: rgba(34, 197, 94, 0.08); }
.fb-retention-assessment.average { border-left-color: var(--color-warning); background: rgba(245, 158, 11, 0.1); }
.fb-retention-assessment.poor { border-left-color: var(--color-error); background: rgba(239, 68, 68, 0.1); }

/* Post Reactions Styles */
.fb-reactions {
    background: var(--color-gray-800);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-4);
}

.fb-reactions-chart {
    margin-top: var(--space-3);
}

.reaction-bar-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.reaction-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.reaction-emoji {
    font-size: 1.25rem;
    width: 28px;
    text-align: center;
}

.reaction-bar-fill {
    flex: 1;
    height: 24px;
    background: var(--color-gray-700);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}

.reaction-bar-fill::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--fill-width, 0%);
    border-radius: var(--radius-sm);
    transition: width 0.5s ease;
}

.reaction-bar[data-type="like"] .reaction-bar-fill::after { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.reaction-bar[data-type="love"] .reaction-bar-fill::after { background: linear-gradient(90deg, #ef4444, #f87171); }
.reaction-bar[data-type="haha"] .reaction-bar-fill::after { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.reaction-bar[data-type="wow"] .reaction-bar-fill::after { background: linear-gradient(90deg, #f59e0b, #fcd34d); }
.reaction-bar[data-type="sad"] .reaction-bar-fill::after { background: linear-gradient(90deg, #f59e0b, #fde047); }
.reaction-bar[data-type="angry"] .reaction-bar-fill::after { background: linear-gradient(90deg, #dc2626, #ef4444); }

.reaction-count {
    min-width: 50px;
    text-align: right;
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    font-weight: 500;
}

.fb-reactions-insight {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--color-gray-700);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-gray-300);
}

/* Best Time to Post Styles */
.fb-best-time {
    background: var(--color-gray-800);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-4);
}

.fb-time-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.fb-time-item {
    text-align: center;
    padding: var(--space-3);
    background: var(--color-gray-700);
    border-radius: var(--radius-md);
}

.time-value {
    display: block;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-white);
}

.time-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    margin-top: 2px;
}

.fb-online-chart {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--color-gray-700);
    border-radius: var(--radius-md);
}

.online-hours-bar {
    display: flex;
    gap: 2px;
    height: 60px;
    align-items: flex-end;
}

.online-hour {
    flex: 1;
    background: var(--color-primary);
    border-radius: 2px 2px 0 0;
    min-height: 4px;
    position: relative;
    transition: background 0.2s;
}

.online-hour:hover {
    background: var(--color-primary-light);
}

.online-hour.peak {
    background: var(--color-success);
}

.online-hour::after {
    content: attr(data-hour);
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: var(--color-gray-500);
    display: none;
}

.online-hour:nth-child(4n)::after {
    display: block;
}

/* Reels Styles */
.fb-reels {
    background: var(--color-gray-800);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-4);
}

.fb-reels-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.fb-reels-item {
    text-align: center;
    padding: var(--space-3);
    background: var(--color-gray-700);
    border-radius: var(--radius-md);
}

.fb-reels-item.highlight {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(244, 114, 182, 0.2));
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.reels-value {
    display: block;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-white);
}

.reels-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    margin-top: 2px;
}

.fb-reels-comparison {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--color-gray-700);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-gray-300);
}

/* Post Insights Styles */
.fb-post-insights {
    background: var(--color-gray-800);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-4);
}

.fb-post-insights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.fb-post-insights-item {
    text-align: center;
    padding: var(--space-3);
    background: var(--color-gray-700);
    border-radius: var(--radius-md);
}

.fb-post-insights-item.highlight {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(96, 165, 250, 0.2));
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.post-insights-value {
    display: block;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-white);
}

.post-insights-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-gray-300);
    margin-top: 2px;
}

.post-insights-desc {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    margin-top: 2px;
}

.fb-clicks-breakdown {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--color-gray-700);
    border-radius: var(--radius-md);
}

.fb-clicks-breakdown h5 {
    font-size: var(--text-sm);
    color: var(--color-gray-300);
    margin-bottom: var(--space-2);
}

.clicks-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

.click-type-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2);
    background: var(--color-gray-600);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
}

.click-type-name {
    color: var(--color-gray-400);
}

.click-type-value {
    color: var(--color-white);
    font-weight: 500;
}

@media (max-width: 600px) {
    .fb-activity-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .fb-comparison-grid {
        flex-direction: column;
    }

    .fb-comparison-item {
        max-width: 100%;
        width: 100%;
    }

    .fb-comparison-vs {
        transform: rotate(90deg);
    }

    .fb-engagement-display {
        flex-direction: column;
        text-align: center;
    }

    .fb-video-stats-grid {
        grid-template-columns: 1fr;
    }

    .fb-top-post-item {
        flex-wrap: wrap;
    }

    .top-post-stats {
        width: 100%;
        justify-content: center;
        margin-top: var(--space-2);
    }

    /* Responsive for new sections */
    .fb-retention-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fb-time-grid {
        grid-template-columns: 1fr;
    }

    .fb-reels-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fb-post-insights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .clicks-breakdown-grid {
        grid-template-columns: 1fr;
    }

    .online-hours-bar {
        height: 40px;
    }

    .online-hour::after {
        font-size: 7px;
    }
}

.fb-findings-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.fb-finding-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2);
    background: white;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.fb-finding-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fb-finding-icon svg {
    width: 12px;
    height: 12px;
}

.fb-finding-icon.good {
    background: #dcfce7;
    color: #16a34a;
}

.fb-finding-icon.warning {
    background: #fef3c7;
    color: #d97706;
}

.fb-finding-icon.bad {
    background: #fee2e2;
    color: #dc2626;
}

.fb-finding-text {
    color: var(--color-gray-700);
    line-height: 1.4;
}

.fb-insights-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.fb-insight-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius-md);
    border-left: 3px solid #1877f2;
}

.fb-insight-icon {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #e8f4fd 0%, #f0f7ff 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #1877f2;
}

.fb-insight-icon svg {
    width: 14px;
    height: 14px;
}

.fb-insight-text {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

.fb-recommendations-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.fb-recommendation-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: white;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-accent);
}

.fb-recommendation-number {
    width: 24px;
    height: 24px;
    background: var(--color-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.fb-recommendation-text {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

/* Recommendations */
.results-recommendations {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-md);
}

.recommendations-header {
    margin-bottom: var(--space-6);
}

.recommendations-header h3 {
    margin-bottom: var(--space-2);
}

.recommendations-header p {
    color: var(--color-gray-500);
}

.recommendations-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.recommendation-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-accent);
}

.recommendation-number {
    width: 32px;
    height: 32px;
    background: var(--color-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.recommendation-content h4 {
    font-size: var(--text-base);
    margin-bottom: var(--space-1);
}

.recommendation-content p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
}

/* ===================================
   Funnel Section
   =================================== */
.funnel-section {
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a3e 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
}

.funnel-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.funnel-header h3 {
    font-size: var(--text-xl);
    color: white;
    margin-bottom: var(--space-2);
}

.funnel-header h3 span {
    color: var(--color-accent);
}

.funnel-header p {
    color: var(--color-gray-400);
    margin: 0;
}

.funnel-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.funnel-shape {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.funnel-tier {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.funnel-tier.tier-1 {
    width: 100%;
    background: rgba(255, 107, 53, 0.9);
    clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
    padding-bottom: var(--space-5);
}

.funnel-tier.tier-2 {
    width: 84%;
    background: rgba(255, 107, 53, 0.7);
    clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
    margin-top: -4px;
    padding-bottom: var(--space-5);
}

.funnel-tier.tier-3 {
    width: 68%;
    background: rgba(255, 107, 53, 0.5);
    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
    margin-top: -4px;
    padding-bottom: var(--space-4);
}

.funnel-tier:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

.funnel-tier.active {
    filter: brightness(1.2);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.4);
}

.tier-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.125rem;
}

.tier-step {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

.tier-name {
    font-weight: 700;
    font-size: var(--text-base);
}

.tier-desc {
    font-size: var(--text-xs);
    opacity: 0.8;
}

.funnel-flow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-gray-500);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: var(--space-1) 0;
}

.funnel-flow svg {
    width: 16px;
    height: 16px;
}

/* Funnel Example Panel */
.funnel-example {
    display: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    position: relative;
    animation: fadeIn 0.3s ease;
}

.funnel-example.visible {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

.funnel-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.funnel-close svg {
    width: 14px;
    height: 14px;
}

.funnel-close:hover {
    background: rgba(255,255,255,0.2);
}

.example-stage-indicator {
    display: inline-block;
    background: var(--color-accent);
    color: white;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: var(--space-3);
}

.funnel-example h4 {
    color: white;
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
    padding-right: var(--space-8);
}

.funnel-example > p {
    color: var(--color-gray-400);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.example-meta {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.example-meta span {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-gray-300);
    font-size: var(--text-xs);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.example-hook-box {
    background: rgba(255, 107, 53, 0.15);
    border-left: 3px solid var(--color-accent);
    padding: var(--space-3);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.example-hook-box .hook-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: var(--space-1);
}

.example-hook-box p {
    margin: 0;
    color: white;
    font-style: italic;
    font-size: var(--text-sm);
}

.funnel-explanation {
    text-align: center;
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    margin: var(--space-6) auto 0;
    max-width: 500px;
    line-height: 1.6;
}

@media (max-width: 700px) {
    .funnel-wrapper {
        grid-template-columns: 1fr;
    }

    .funnel-example {
        margin-top: var(--space-4);
    }

    .funnel-section {
        padding: var(--space-6);
    }
}

/* ===================================
   Benchmark Section
   =================================== */
.result-card.benchmark-card {
    background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%) !important;
    border: 1px solid rgba(255, 107, 53, 0.2);
}

.benchmark-card .result-card-header {
    border-bottom-color: rgba(255, 107, 53, 0.1);
}

.benchmark-card .result-card-title h3 {
    color: white;
}

.benchmark-card .result-card-title p {
    color: rgba(255, 255, 255, 0.7);
}

.benchmark-card .result-card-icon svg {
    stroke: var(--color-accent);
}

.benchmark-icon {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(247, 147, 30, 0.2));
    color: var(--color-accent);
}

/* Benchmark Data Note */
.benchmark-data-note {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
}

.benchmark-data-note svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.5);
}

/* Benchmark Table */
.benchmark-table {
    margin-bottom: var(--space-8);
}

.benchmark-table-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--space-4);
}

.benchmark-table-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.benchmark-table-row.highlight-row {
    background: rgba(255, 107, 53, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-top: var(--space-4);
    border: 1px solid rgba(255, 107, 53, 0.2);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.benchmark-table-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.benchmark-col-video,
.benchmark-col-image {
    text-align: center;
}

.benchmark-col-subtitle {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.6);
    margin-top: var(--space-1);
}

.benchmark-row-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
}

.benchmark-big-number {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-accent);
}

.benchmark-big-number.dim {
    color: rgba(255, 255, 255, 0.5);
}

.benchmark-number {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-accent);
}

.benchmark-number.dim {
    color: rgba(255, 255, 255, 0.5);
}

.benchmark-col-span {
    grid-column: 2 / -1;
    text-align: center;
}

.benchmark-highlight-number {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-accent);
}

.benchmark-highlight-sub {
    display: block;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
    margin-top: var(--space-1);
}

.benchmark-badge {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
    display: inline-block;
}

.video-badge {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
}

.image-badge {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

/* Calculation Section */
.benchmark-calculation {
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.benchmark-calculation h4 {
    color: white;
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
    text-align: center;
}

.calc-intro {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
}

.calc-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.calc-step {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.calc-step-number {
    width: 32px;
    height: 32px;
    background: rgba(255, 107, 53, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    font-weight: 700;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.calc-step-content {
    flex: 1;
}

.calc-step-label {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.calc-step-value {
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.9);
}

.calc-step-value strong {
    color: white;
}

.calc-result {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(247, 147, 30, 0.1));
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.calc-result-label {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-2);
}

.calc-result-value {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.calc-result-note {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

/* Tooltips */
.tooltip {
    position: relative;
    cursor: help;
    display: inline-flex;
    align-items: center;
}

.tooltip-icon {
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s ease;
}

.tooltip:hover .tooltip-icon {
    color: var(--color-accent);
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: white;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    line-height: 1.5;
    width: 250px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a2e;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 101;
}

.tooltip:hover::after,
.tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .benchmark-table-header,
    .benchmark-table-row {
        grid-template-columns: 1fr 1fr;
    }

    .benchmark-table-header .benchmark-table-cell:first-child,
    .benchmark-table-row .benchmark-row-label {
        grid-column: 1 / -1;
        margin-bottom: var(--space-2);
    }

    .benchmark-table-row.highlight-row {
        flex-direction: column;
        text-align: center;
    }

    .calc-result-value {
        font-size: var(--text-3xl);
    }

    .tooltip::after {
        width: 200px;
        left: 0;
        transform: translateX(-20%);
    }
}

.benchmark-details {
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.benchmark-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.detail-label {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: var(--text-lg);
    font-weight: 600;
    color: white;
}

/* ===================================
   Recommendation Section - 2026 Design
   =================================== */
.recommendation-section {
    background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    margin-top: var(--space-8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.recommendation-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.recommendation-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-gray-300);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-4);
}

.recommendation-header h3 {
    font-size: var(--text-2xl);
    color: white;
    margin-bottom: var(--space-3);
}

.recommendation-header h3 span {
    color: var(--color-accent);
}

.recommendation-intro {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-base);
    max-width: 500px;
    margin: 0 auto;
}

/* Package Card */
.package-recommendation-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
}

.package-header {
    text-align: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.package-recommended-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-3);
}

.package-name {
    font-size: var(--text-3xl);
    color: white;
    margin-bottom: var(--space-2);
}

.package-tagline {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-base);
}

/* Package Details */
.package-includes {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.package-detail {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.detail-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.detail-icon svg {
    width: 20px;
    height: 20px;
    color: var(--color-accent);
}

.detail-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-base);
}

.detail-text strong {
    color: white;
}

/* Results Section */
.package-results {
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.package-results h5 {
    color: white;
    font-size: var(--text-lg);
    text-align: center;
    margin-bottom: var(--space-1);
}

.results-disclaimer {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

/* Removed: .result-cards and related styles (no longer used) */

.result-highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    background: rgba(255, 107, 53, 0.1);
    border: 1px solid rgba(255, 107, 53, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.highlight-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(247, 147, 30, 0.2));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.highlight-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-accent);
}

.highlight-content {
    text-align: left;
}

.highlight-value {
    display: block;
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-accent);
}

.highlight-label {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
}

.revenue-note {
    text-align: center;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Investment Section */
.package-investment {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-6);
    margin-bottom: var(--space-6);
}

.investment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
}

.investment-row:first-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.investment-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-base);
}

.investment-value {
    color: white;
    font-size: var(--text-lg);
    font-weight: 600;
}

.investment-secondary .investment-value {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-base);
    font-weight: 400;
}

/* CTA Button */
.btn-package-cta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-lg);
}

.btn-package-cta svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.btn-package-cta:hover svg {
    transform: translateX(4px);
}

/* Other Packages */
.other-packages {
    margin-bottom: var(--space-6);
}

.other-packages-title {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

.package-options {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.package-option {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-width: 120px;
}

.package-option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.package-option.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.option-name {
    display: block;
    color: white;
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
}

.option-videos {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-xs);
}

.package-option.active .option-name {
    color: white;
}

/* Social Proof Bar */
.social-proof-bar {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.proof-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
}

.proof-item svg {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .recommendation-section {
        padding: var(--space-6);
    }

    .package-recommendation-card {
        padding: var(--space-5);
    }

    .result-cards {
        grid-template-columns: 1fr;
    }

    .result-highlight {
        flex-direction: column;
        text-align: center;
    }

    .highlight-content {
        text-align: center;
    }

    .package-options {
        flex-direction: column;
    }

    .package-option {
        min-width: 100%;
    }

    .social-proof-bar {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }
}

.btn-benchmark-cta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.btn-benchmark-cta svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 600px) {
    .potential-comparison {
        flex-direction: column;
    }

    .potential-arrow {
        transform: rotate(90deg);
    }

    .potential-before,
    .potential-after {
        max-width: 100%;
        width: 100%;
    }

    .potential-results {
        grid-template-columns: 1fr;
    }
}

.benchmark-cta {
    text-align: center;
}

.btn-benchmark {
    border-color: rgba(255, 107, 53, 0.5);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-benchmark:hover {
    background: rgba(255, 107, 53, 0.1);
    border-color: var(--color-accent);
}

.btn-benchmark svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 600px) {
    .benchmark-detail-grid,
    .potential-grid {
        grid-template-columns: 1fr;
    }

    .benchmark-insight {
        flex-direction: column;
        text-align: center;
    }

    .insight-icon {
        margin: 0 auto;
    }
}

/* Results CTA */
.results-cta {
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a3e 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.results-cta .cta-content h3 {
    color: white;
    margin-bottom: var(--space-2);
}

.results-cta .cta-content p {
    color: var(--color-gray-400);
    margin: 0;
}

@media (max-width: 600px) {
    .results-cta {
        flex-direction: column;
        text-align: center;
    }
}

/* ROI CTA Card */
.roi-cta-card {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    background: linear-gradient(135deg, var(--color-gray-50) 0%, white 100%);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.roi-cta-icon {
    width: 56px;
    height: 56px;
    background: var(--color-accent-soft);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.roi-cta-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-accent);
}

.roi-cta-content {
    flex: 1;
}

.roi-cta-content h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-1);
    color: var(--color-dark);
}

.roi-cta-content p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
}

.roi-cta-card .btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.roi-cta-card .btn svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    .roi-cta-card {
        flex-direction: column;
        text-align: center;
        padding: var(--space-5);
        gap: var(--space-4);
    }

    .roi-cta-content h3 {
        font-size: var(--text-base);
    }

    .roi-cta-card .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Results Actions */
.results-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.results-actions .btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.results-actions .btn svg {
    width: 18px;
    height: 18px;
}

/* Print Styles */
@media print {
    .radar-hero,
    .results-cta,
    .results-actions,
    header,
    footer,
    .cta-section {
        display: none !important;
    }

    .radar-tool {
        background: white !important;
        padding: 0 !important;
    }

    .result-card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid var(--color-gray-200);
    }
}

/* ===================================
   Improved Mobile Styles for Radaren
   =================================== */

/* Desktop/tablet fixes */
@media (max-width: 1100px) {
    /* Force single column earlier for better readability */
    .results-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4);
    }
}

@media (max-width: 900px) {
    /* Benchmark section - stack columns */
    .benchmark-table-header,
    .benchmark-table-row {
        grid-template-columns: 1fr !important;
        gap: var(--space-2);
    }

    .benchmark-table-header {
        display: none;
    }

    .benchmark-table-row {
        display: flex;
        flex-direction: column;
        padding: var(--space-4);
        margin-bottom: var(--space-3);
        background: rgba(255, 255, 255, 0.03);
        border-radius: var(--radius-md);
    }

    .benchmark-table-row .benchmark-row-label {
        font-weight: 600;
        font-size: var(--text-base);
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: var(--space-3);
        text-align: center;
    }

    .benchmark-table-row .benchmark-table-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-3);
        background: rgba(255, 255, 255, 0.03);
        border-radius: var(--radius-sm);
        margin-bottom: var(--space-2);
    }

    .benchmark-col-image,
    .benchmark-col-video {
        text-align: left !important;
    }

    .benchmark-col-image::before {
        content: "Før Utenfra: ";
        font-size: var(--text-sm);
        color: rgba(255, 255, 255, 0.6);
        font-weight: normal;
    }

    .benchmark-col-video::before {
        content: "Med Utenfra: ";
        font-size: var(--text-sm);
        color: rgba(255, 255, 255, 0.6);
        font-weight: normal;
    }

    .benchmark-big-number,
    .benchmark-number {
        margin-left: auto;
    }

    .benchmark-table-row.highlight-row {
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: var(--space-5);
        background: rgba(255, 107, 53, 0.15);
    }

    .benchmark-col-span {
        grid-column: unset;
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        width: 100%;
    }
}

/* Stack card headers on screens up to 900px */
@media (max-width: 900px) {
    .result-card-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: var(--space-3);
    }

    .result-card-title {
        width: 100%;
        text-align: center;
    }

    .result-card-score {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 768px) {
    /* Prevent horizontal scrolling */
    .radar-tool,
    .results-card,
    .result-card,
    .benchmark-card {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Featured social card - full width and readable */
    .result-card-featured {
        margin-bottom: var(--space-4);
    }

    .result-card-featured .result-card-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .result-card-featured .result-card-icon {
        align-self: center;
    }

    .result-card-featured .result-card-title {
        text-align: center;
        width: 100%;
    }

    .result-card-featured .result-card-title h3 {
        font-size: var(--text-xl);
    }

    .result-card-featured .result-card-title p {
        font-size: var(--text-base);
    }

    .result-card-featured .result-card-score {
        text-align: center;
        width: 100%;
    }

    .result-card-featured .card-score-value {
        font-size: var(--text-4xl);
    }

    /* Facebook insights grid - stack on mobile */
    .fb-insights-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3);
    }

    .fb-stat {
        padding: var(--space-3);
    }

    .fb-stat-value {
        font-size: var(--text-xl) !important;
    }

    .fb-stat-label {
        font-size: var(--text-xs) !important;
    }

    /* Results header mobile */
    .results-header {
        padding: var(--space-5);
        flex-direction: column;
        gap: var(--space-4);
    }

    .results-company {
        flex-direction: column;
        text-align: center;
        width: 100%;
    }

    .results-company-info h2 {
        font-size: var(--text-xl);
    }

    .results-main-score {
        flex-direction: column;
        gap: var(--space-4);
        width: 100%;
        align-items: center;
    }

    .main-score-ring {
        width: 100px;
        height: 100px;
    }

    .main-score-value {
        font-size: var(--text-3xl);
    }

    .main-score-verdict {
        text-align: center;
    }

    /* Results grid mobile - always single column */
    .results-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4);
    }

    /* Result cards - stack vertically on mobile */
    .result-card {
        width: 100%;
        max-width: 100%;
    }

    .result-card-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .result-card-icon {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    .result-card-icon svg {
        width: 24px;
        height: 24px;
    }

    .result-card-title {
        flex: none;
        width: 100%;
        text-align: center;
    }

    .result-card-title h3 {
        font-size: var(--text-lg);
        line-height: 1.3;
        white-space: normal;
        word-break: normal;
    }

    .result-card-title p {
        font-size: var(--text-sm);
        line-height: 1.4;
        white-space: normal;
        word-break: normal;
    }

    .result-card-score {
        flex-shrink: 0;
        text-align: center;
        width: 100%;
    }

    .card-score-value {
        font-size: var(--text-3xl);
    }

    .card-score-max {
        font-size: var(--text-xs);
    }

    .result-card-body {
        padding: var(--space-4);
    }

    /* Finding items - more readable on mobile */
    .result-findings {
        gap: var(--space-2);
    }

    .finding-item {
        padding: var(--space-3);
        gap: var(--space-2);
        align-items: flex-start;
    }

    .finding-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .finding-icon svg {
        width: 12px;
        height: 12px;
    }

    .finding-text {
        font-size: var(--text-sm);
        line-height: 1.5;
        flex: 1;
    }

    /* Benchmark numbers */
    .benchmark-big-number {
        font-size: var(--text-xl);
    }

    .benchmark-number {
        font-size: var(--text-base);
    }

    .benchmark-highlight-number {
        font-size: var(--text-xl);
    }

    /* Calculation steps mobile */
    .calc-steps {
        gap: var(--space-2);
    }

    .calc-step {
        flex-direction: column;
        gap: var(--space-1);
        padding: var(--space-3);
        text-align: center;
    }

    .calc-step-label {
        font-size: var(--text-xs);
    }

    .calc-step-value {
        font-size: var(--text-sm);
        word-break: break-word;
    }

    /* Recommendation section mobile */
    .recommendation-section {
        padding: var(--space-5);
    }

    .recommendation-header h2 {
        font-size: var(--text-lg);
    }

    .recommendation-package {
        padding: var(--space-5);
    }

    .package-pricing-highlight {
        font-size: var(--text-xl);
    }

    /* CTA boxes mobile */
    .results-cta {
        padding: var(--space-5);
        flex-direction: column;
        text-align: center;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* Score ring animation mobile */
    .score-ring-container {
        width: 50px;
        height: 50px;
    }

    .score-value {
        font-size: var(--text-base);
    }
}

@media (max-width: 480px) {
    .radar-hero {
        padding: var(--space-8) 0 var(--space-5);
    }

    .radar-hero h1 {
        font-size: var(--text-xl);
    }

    .input-card {
        padding: var(--space-4);
    }

    /* Even smaller benchmark numbers */
    .benchmark-big-number {
        font-size: var(--text-lg);
    }

    .benchmark-number {
        font-size: var(--text-sm);
    }

    .benchmark-table-cell {
        font-size: var(--text-sm);
        padding: var(--space-2);
    }

    .benchmark-col-image::before,
    .benchmark-col-video::before {
        font-size: var(--text-xs);
    }

    /* Smaller result card headers */
    .result-card-header {
        padding: var(--space-3);
        gap: var(--space-2);
    }

    .result-card-icon {
        width: 36px;
        height: 36px;
    }

    .result-card-title h3 {
        font-size: var(--text-sm);
    }

    .result-card-title p {
        font-size: 11px;
    }

    .card-score-value {
        font-size: var(--text-xl);
    }

    .result-card-body {
        padding: var(--space-3);
    }

    /* Smaller findings */
    .finding-item {
        padding: var(--space-2);
    }

    .finding-text {
        font-size: var(--text-xs);
    }

    .calc-result-value {
        font-size: var(--text-xl);
    }

    /* Facebook insights on very small screens */
    .fb-insights-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .fb-stat-value {
        font-size: var(--text-lg) !important;
    }

    /* Extended website section responsive */
    .extended-header {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }

    .extended-header-content {
        flex-direction: column;
    }

    .extended-toggle {
        width: 100%;
        justify-content: center;
    }

    .extended-quick-stats {
        grid-template-columns: 1fr 1fr;
        padding: var(--space-3);
    }

    .quick-stat {
        padding: var(--space-2);
    }

    .quick-stat-icon {
        width: 28px;
        height: 28px;
    }

    .quick-stat-value {
        font-size: var(--text-sm);
    }

    .quick-stat-label {
        font-size: 10px;
    }

    .extended-details {
        padding: var(--space-3);
    }

    .ext-content {
        grid-template-columns: 1fr;
    }

    .ext-finding-item {
        padding: var(--space-3);
    }

    .ext-finding-text {
        font-size: var(--text-xs);
    }

    .ext-finding-stat {
        font-size: 10px;
    }
}