/* ========================================
   XclSkills Quiz Styles
   Modern, Sleek, Professional Design
   ======================================== */

:root {
    --xclq-primary: #000000;
    --xclq-primary-dark: #1a1a1a;
    --xclq-secondary: #333333;
    --xclq-danger: #ef4444;
    --xclq-text: #000000;
    --xclq-text-light: #666666;
    --xclq-border: #e5e7eb;
    --xclq-bg: #ffffff;
    --xclq-bg-light: #f9fafb;
    --xclq-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --xclq-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Container */
.xclq-container {
    max-width: 700px;
    margin: 40px auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Screen Management */
.xclq-screen {
    display: none;
    animation: pplqFadeIn 0.4s ease-in-out;
}

.xclq-screen.xclq-active {
    display: block;
}

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

/* Welcome Screen */
.xclq-welcome {
    text-align: center;
    background: #ffffff;
    padding: 60px 40px;
    border-radius: 20px;
    color: #000000;
    box-shadow: var(--xclq-shadow-lg);
    border: 1px solid var(--xclq-border);
}

.xclq-hero-image {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 30px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.xclq-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

.xclq-main-message {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 40px 0;
    opacity: 0.98;
    color: #000000;
}

/* Testimonial style for the updated welcome message */
.xclq-main-message.xclq-testimonial-style {
    font-size: 36px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    padding: 0 30px;
    color: #000000;
}

.xclq-main-message.xclq-testimonial-style::before {
    content: '"';
    font-size: 80px;
    position: absolute;
    left: -10px;
    top: -30px;
    opacity: 0.3;
    font-family: Georgia, serif;
}

.xclq-main-message.xclq-testimonial-style::after {
    content: '"';
    font-size: 80px;
    position: absolute;
    right: -10px;
    bottom: -50px;
    opacity: 0.3;
    font-family: Georgia, serif;
}

.xclq-terms {
    margin-top: 20px;
    font-size: 12px;
    opacity: 0.75;
    line-height: 1.6;
}

.xclq-terms a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: underline;
}

.xclq-terms a:hover {
    color: white;
    opacity: 1;
}

.xclq-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.xclq-subtitle {
    font-size: 18px;
    line-height: 1.6;
    margin: 0 0 40px 0;
    opacity: 0.95;
}

/* Buttons */
.xclq-btn {
    border: none;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    display: inline-block;
    text-align: center;
}

.xclq-btn-primary {
    background: white;
    color: #667eea;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
}

.xclq-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    background: #10b981;
    color: white;
}

.xclq-btn-secondary {
    background: var(--xclq-primary);
    color: white;
}

.xclq-btn-secondary:hover {
    background: var(--xclq-secondary);
    color: white;
    transform: translateY(-2px);
}

.xclq-btn-ghost {
    background: transparent;
    color: var(--xclq-text-light);
    border: 2px solid var(--xclq-border);
}

.xclq-btn-ghost:hover {
    border-color: var(--xclq-primary);
    color: var(--xclq-primary);
}

.xclq-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Progress Bar */
.xclq-progress-container {
    margin-bottom: 40px;
}

.xclq-progress-bar {
    height: 8px;
    background: var(--xclq-bg-light);
    border-radius: 10px;
    overflow: hidden;
}

.xclq-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--xclq-primary), var(--xclq-secondary));
    border-radius: 10px;
    transition: width 0.5s ease;
}

/* Questions */
.xclq-question {
    font-size: 26px;
    font-weight: 700;
    color: var(--xclq-text);
    margin: 0 0 30px 0;
    line-height: 1.3;
}

/* Options */
.xclq-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 40px;
}

.xclq-option {
    display: block;
    position: relative;
    cursor: pointer;
}

.xclq-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.xclq-option-text {
    display: block;
    padding: 20px 24px;
    background: white;
    border: 2px solid var(--xclq-border);
    border-radius: 12px;
    font-size: 16px;
    color: var(--xclq-text);
    transition: all 0.3s ease;
    line-height: 1.5;
}

.xclq-option:hover .xclq-option-text {
    border-color: var(--xclq-primary);
    background: var(--xclq-bg-light);
    transform: translateX(4px);
}

.xclq-option input[type="radio"]:checked ~ .xclq-option-text {
    border-color: var(--xclq-primary);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    font-weight: 600;
}

.xclq-option input[type="radio"]:checked ~ .xclq-option-text::before {
    content: '✓';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--xclq-primary);
    font-weight: bold;
    font-size: 20px;
}

/* Navigation */
.xclq-nav {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Interstitial Screens */
.xclq-interstitial {
    text-align: center;
    background: white;
    padding: 60px 40px;
    border-radius: 20px;
    box-shadow: var(--xclq-shadow-lg);
}

.xclq-checkmark {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, var(--xclq-secondary), #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: white;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
}

.xclq-interstitial-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--xclq-text);
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.xclq-interstitial-text {
    font-size: 18px;
    line-height: 1.7;
    color: var(--xclq-text-light);
    margin: 0 0 20px 0;
}

/* Analysis Screen */
.xclq-analysis {
    text-align: center;
    background: white;
    padding: 60px 40px;
    border-radius: 20px;
    box-shadow: var(--xclq-shadow-lg);
}

.xclq-spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto 30px;
    border: 4px solid var(--xclq-bg-light);
    border-top: 4px solid var(--xclq-primary);
    border-radius: 50%;
    animation: pplqSpin 1s linear infinite;
}

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

.xclq-analysis-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--xclq-text);
    margin: 0 0 40px 0;
}

.xclq-analysis-items {
    margin: 0 auto 30px;
    max-width: 400px;
}

.xclq-analysis-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 16px;
    color: var(--xclq-text);
    animation: pplqCheckAppear 0.5s ease-in-out;
}

.xclq-analysis-item:nth-child(1) { animation-delay: 0.3s; }
.xclq-analysis-item:nth-child(2) { animation-delay: 0.6s; }
.xclq-analysis-item:nth-child(3) { animation-delay: 0.9s; }
.xclq-analysis-item:nth-child(4) { animation-delay: 1.2s; }

@keyframes pplqCheckAppear {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.xclq-check {
    width: 24px;
    height: 24px;
    background: var(--xclq-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    flex-shrink: 0;
}

.xclq-generating {
    font-size: 16px;
    color: var(--xclq-text-light);
    font-style: italic;
}

/* Email Capture */
.xclq-email-capture {
    background: white;
    padding: 60px 40px;
    border-radius: 20px;
    box-shadow: var(--xclq-shadow-lg);
}

.xclq-hero-image-result {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 30px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.xclq-hero-image-result img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

.xclq-result-icon {
    font-size: 60px;
    text-align: center;
    margin-bottom: 30px;
}

.xclq-capture-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--xclq-text);
    margin: 0 0 20px 0;
    text-align: center;
    line-height: 1.3;
}

.xclq-risk-area {
    font-size: 18px;
    line-height: 1.6;
    color: var(--xclq-text-light);
    margin: 0 0 30px 0;
    text-align: center;
}

.xclq-risk-area strong {
    color: var(--xclq-primary);
    font-weight: 700;
}

.xclq-capture-subtitle {
    font-size: 16px;
    color: var(--xclq-text-light);
    margin: 0 0 40px 0;
    text-align: center;
}

.xclq-capture-subtitle-small {
    font-size: 15px;
    color: var(--xclq-text-light);
    margin: 30px 0 30px 0;
    text-align: center;
    line-height: 1.5;
}

/* Main heading for email capture screen */
.xclq-capture-main-heading {
    font-size: 28px;
    font-weight: 600;
    color: var(--xclq-text);
    margin: 40px 0;
    text-align: center;
    line-height: 1.5;
    padding: 0 20px;
}

/* Outcome Content */
.xclq-outcome-content {
    background: var(--xclq-bg-light);
    padding: 30px;
    border-radius: 12px;
    margin: 30px 0;
    text-align: left;
    border-left: 4px solid var(--xclq-primary);
}

.xclq-outcome-subtitle {
    font-size: 18px;
    font-weight: 700;
    color: var(--xclq-primary);
    margin: 0 0 20px 0;
    line-height: 1.4;
    display: block;
}

.xclq-outcome-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--xclq-text);
    margin: 0 0 16px 0;
    display: block;
}

.xclq-outcome-cta {
    font-size: 16px;
    line-height: 1.7;
    color: var(--xclq-text);
    margin: 20px 0 0 0;
    padding: 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 8px;
}

.xclq-outcome-cta strong {
    color: var(--xclq-primary);
    font-weight: 700;
}

/* Form */
.xclq-form {
    max-width: 400px;
    margin: 0 auto;
}

.xclq-form-group {
    margin-bottom: 24px;
}

.xclq-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--xclq-text);
    margin-bottom: 8px;
}

.xclq-form-group input {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    border: 2px solid var(--xclq-border);
    border-radius: 8px;
    font-family: inherit;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.xclq-form-group input:focus {
    outline: none;
    border-color: var(--xclq-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.xclq-submit-btn {
    width: 100%;
    margin-top: 12px;
    background: white;
    color: #667eea;
    font-size: 18px;
    font-weight: 700;
    padding: 18px 32px;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
}

.xclq-submit-btn:hover {
    background: #10b981;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(16, 185, 129, 0.3);
}

.xclq-mini-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: pplqSpin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

.xclq-privacy {
    text-align: center;
    font-size: 13px;
    color: var(--xclq-text-light);
    margin: 20px 0 0 0;
}

/* Success Message */
.xclq-success-message {
    text-align: center;
    background: white;
    padding: 60px 40px;
    border-radius: 20px;
    box-shadow: var(--xclq-shadow-lg);
}

.xclq-success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, var(--xclq-secondary), #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: white;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
}

.xclq-success-message h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--xclq-text);
    margin: 0 0 16px 0;
}

.xclq-success-message p {
    font-size: 18px;
    color: var(--xclq-text-light);
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .xclq-container {
        padding: 15px;
        margin: 20px auto;
    }

    .xclq-welcome,
    .xclq-interstitial,
    .xclq-analysis,
    .xclq-email-capture {
        padding: 40px 24px;
        border-radius: 16px;
    }

    .xclq-main-message {
        font-size: 26px;
    }

    .xclq-title {
        font-size: 26px;
    }

    .xclq-subtitle {
        font-size: 16px;
    }

    .xclq-question {
        font-size: 22px;
    }

    .xclq-option-text {
        padding: 16px 20px;
        font-size: 15px;
    }

    .xclq-nav {
        flex-direction: column-reverse;
    }

    .xclq-btn {
        width: 100%;
    }

    .xclq-interstitial-title,
    .xclq-capture-title {
        font-size: 24px;
    }
}

/* Print styles */
@media print {
    .xclq-container {
        display: none;
    }
}

/* ========================================
   XclSkills Specific Styles
   ======================================== */

/* Main Title and Subtitle on Welcome Screen */
.xclq-main-title {
    font-size: 38px;
    font-weight: 800;
    margin: 0 0 15px 0;
    color: white;
    text-align: center;
}

.xclq-subtitle {
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 40px 0;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
}

.xclq-subtitle-small {
    font-size: 16px;
    color: var(--xclq-text-light);
    margin: -10px 0 25px 0;
    text-align: center;
}

/* Persona Cards */
.xclq-persona-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 30px 0;
}

.xclq-persona-card {
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid transparent;
    backdrop-filter: blur(10px);
}

.xclq-persona-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.15);
}

.xclq-persona-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.xclq-persona-card input[type="radio"]:checked + .xclq-persona-content {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

.xclq-persona-content {
    padding: 20px;
    text-align: center;
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.xclq-persona-content img {
    width: 100%;
    max-width: 180px;
    height: auto;
    margin: 0 auto 15px;
    border-radius: 8px;
}

.xclq-persona-text {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: white;
    padding: 12px 20px;
    background: var(--xclq-primary);
    border-radius: 8px;
}

/* Simple Option Style (for age, etc.) */
.xclq-option-simple {
    padding: 20px 30px;
    text-align: center;
}

.xclq-option-simple .xclq-option-text {
    font-size: 20px;
    font-weight: 600;
}

/* Emoji Options */
.xclq-option-emoji .xclq-option-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.xclq-emoji {
    font-size: 32px;
    flex-shrink: 0;
}

/* Emoji Options with Details */
.xclq-option-emoji-detailed .xclq-option-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.xclq-option-text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.xclq-option-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--xclq-text);
}

.xclq-option-subtitle {
    font-size: 14px;
    color: var(--xclq-text-light);
    font-weight: 400;
}

/* Readiness Score Screen */
.xclq-readiness-container {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: var(--xclq-shadow-lg);
}

.xclq-readiness-title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 40px 0;
    color: var(--xclq-text);
}

.xclq-score-section {
    margin-bottom: 40px;
}

.xclq-score-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.xclq-score-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--xclq-text);
}

.xclq-score-result {
    font-size: 14px;
    color: var(--xclq-text-light);
}

.xclq-score-result strong {
    color: var(--xclq-text);
    font-weight: 600;
}

.xclq-score-slider {
    margin: 20px 0;
}

.xclq-slider-bar {
    height: 8px;
    background: linear-gradient(to right, #ef4444, #f59e0b, #84cc16, #10b981);
    border-radius: 10px;
    position: relative;
    margin-bottom: 10px;
}

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

.xclq-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: var(--xclq-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.xclq-insights {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.xclq-insight-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: var(--xclq-bg-light);
    border-radius: 12px;
    align-items: flex-start;
}

.xclq-insight-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.xclq-insight-content {
    flex: 1;
}

.xclq-insight-content h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--xclq-text);
}

.xclq-insight-content p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    color: var(--xclq-text-light);
}

.xclq-highlight {
    font-weight: 600;
    color: var(--xclq-text);
    font-size: 16px !important;
}

/* Form Styles */
.xclq-form {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: var(--xclq-shadow-lg);
    max-width: 500px;
    margin: 0 auto;
}

.xclq-form-group {
    margin-bottom: 20px;
}

.xclq-input {
    width: 100%;
    padding: 16px 20px;
    font-size: 16px;
    border: 2px solid var(--xclq-border);
    border-radius: 10px;
    transition: all 0.3s ease;
    font-family: inherit;
    box-sizing: border-box;
}

.xclq-input:focus {
    outline: none;
    border-color: var(--xclq-primary);
    box-shadow: 0 0 0 3px rgba(80, 70, 229, 0.1);
}

.xclq-error-message {
    color: var(--xclq-danger);
    font-size: 14px;
    margin-top: 10px;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    border-left: 3px solid var(--xclq-danger);
}

.xclq-submit-btn {
    width: 100%;
    margin-top: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .xclq-persona-options {
        grid-template-columns: 1fr;
    }
    
    .xclq-main-title {
        font-size: 28px;
    }
    
    .xclq-subtitle {
        font-size: 16px;
    }
    
    .xclq-readiness-container {
        padding: 25px;
    }
    
    .xclq-readiness-title {
        font-size: 24px;
    }
    
    .xclq-form {
        padding: 25px;
    }
    
    .xclq-score-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .xclq-container {
        padding: 15px;
    }
    
    .xclq-option {
        padding: 16px 20px;
    }
    
    .xclq-emoji {
        font-size: 24px;
    }
    
    .xclq-option-text {
        font-size: 15px;
    }
}
/* ========================================
   XclSkills Color and Layout Fixes
   ======================================== */

/* Main Title and Subtitle - Black on White */
.xclq-main-title {
    font-size: 38px;
    font-weight: 800;
    margin: 0 0 15px 0;
    color: #000000;
    text-align: center;
}

.xclq-subtitle {
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 40px 0;
    color: #333333;
    line-height: 1.6;
}

/* Persona Cards - Updated Styling */
.xclq-persona-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 30px 0;
}

.xclq-persona-card {
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #ffffff;
    border: 2px solid #e5e7eb;
}

.xclq-persona-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: #000000;
}

.xclq-persona-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.xclq-persona-card input[type="radio"]:checked + .xclq-persona-content {
    border-color: #000000;
    background: #f9fafb;
}

.xclq-persona-content {
    padding: 20px;
    text-align: center;
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* Smaller Images */
.xclq-persona-content img {
    width: 100%;
    max-width: 120px;
    height: auto;
    margin: 0 auto 15px;
    border-radius: 8px;
}

.xclq-persona-text {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    padding: 12px 15px;
    background: #f3f4f6;
    border-radius: 8px;
}

.xclq-persona-card:hover .xclq-persona-text {
    background: #000000;
    color: #ffffff;
}

.xclq-persona-card input[type="radio"]:checked + .xclq-persona-content .xclq-persona-text {
    background: #000000;
    color: #ffffff;
}

/* Terms text on white background */
.xclq-terms {
    font-size: 12px;
    color: #666666;
    margin-top: 20px;
}

.xclq-terms a {
    color: #000000;
    text-decoration: underline;
}

/* Mobile - Keep 2 columns */
@media (max-width: 768px) {
    .xclq-persona-options {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .xclq-persona-content {
        padding: 15px 10px;
    }
    
    .xclq-persona-content img {
        max-width: 100px;
    }
    
    .xclq-persona-text {
        font-size: 14px;
        padding: 10px 8px;
    }
    
    .xclq-main-title {
        font-size: 28px;
    }
    
    .xclq-subtitle {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .xclq-persona-options {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .xclq-persona-content {
        padding: 12px 8px;
    }
    
    .xclq-persona-content img {
        max-width: 80px;
        margin-bottom: 10px;
    }
    
    .xclq-persona-text {
        font-size: 13px;
        padding: 8px 6px;
    }
}

/* Button Color Overrides - Black Theme */
.xclq-btn-primary {
    background: #000000;
    color: #ffffff;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
}

.xclq-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    background: #333333;
    color: white;
}

.xclq-btn-secondary {
    background: #000000;
    color: white;
}

.xclq-btn-secondary:hover {
    background: #333333;
    transform: translateY(-2px);
}

.xclq-btn-ghost {
    background: transparent;
    color: #000000;
    border: 2px solid #e5e7eb;
}

.xclq-btn-ghost:hover {
    background: #f9fafb;
    border-color: #000000;
}

/* Update interstitial checkmarks */
.xclq-checkmark {
    font-size: 64px;
    color: #000000;
    margin-bottom: 20px;
    animation: xclqCheckmarkPop 0.5s ease-out;
}

/* Update interstitial backgrounds */
.xclq-interstitial {
    background: #ffffff;
    padding: 60px 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: var(--xclq-shadow-lg);
    border: 1px solid var(--xclq-border);
}

.xclq-interstitial-title {
    font-size: 28px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.xclq-interstitial-text {
    font-size: 18px;
    color: #333333;
    line-height: 1.7;
    margin: 0 0 20px 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Progress bar colors */
.xclq-progress-bar {
    background: #e5e7eb;
    height: 8px;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 40px 0;
}

.xclq-progress-fill {
    background: #000000;
    height: 100%;
    transition: width 0.3s ease;
}

/* Readiness Score - Black Theme */
.xclq-slider-marker {
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border: 3px solid #000000;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Update input borders */
.xclq-input:focus {
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}
/* ========================================
   XclSkills Quiz - Comprehensive Fixes v1.0.2
   ======================================== */

/* ISSUE 1: Remove checkmarks, keep only highlighting */
.xclq-option input[type="radio"]:checked ~ .xclq-option-text::before {
    display: none !important;
}

.xclq-option input[type="radio"]:checked ~ .xclq-option-text {
    border-color: #5653FE !important;
    background: #f0f0ff !important;
    box-shadow: 0 4px 12px rgba(86, 83, 254, 0.15) !important;
    font-weight: 600;
}

.xclq-option:hover .xclq-option-text {
    border-color: #5653FE !important;
    background: var(--xclq-bg-light);
    transform: translateX(4px);
}

/* ISSUE 2: Lighter green checkmark on interstitials */
.xclq-checkmark {
    font-size: 64px;
    color: #86D293 !important; /* Lighter, more promising green */
    margin-bottom: 20px;
    animation: xclqCheckmarkPop 0.5s ease-out;
}

/* ISSUE 3: Emoji options - centered with consistent frames */
.xclq-option-emoji .xclq-option-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px 24px;
    min-height: 70px;
}

.xclq-option-emoji .xclq-option-text {
    text-align: center;
    flex: 1;
}

.xclq-emoji {
    font-size: 32px;
    flex-shrink: 0;
}

/* ISSUE 4: Option content styling for consistent frames */
.xclq-option-content {
    display: block;
    padding: 20px 24px;
    background: white;
    border: 2px solid var(--xclq-border);
    border-radius: 12px;
    font-size: 16px;
    color: var(--xclq-text);
    transition: all 0.3s ease;
    line-height: 1.5;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xclq-option:hover .xclq-option-content {
    border-color: #5653FE !important;
    background: var(--xclq-bg-light);
    transform: translateX(4px);
}

.xclq-option input[type="radio"]:checked ~ .xclq-option-content {
    border-color: #5653FE !important;
    background: #f0f0ff !important;
    box-shadow: 0 4px 12px rgba(86, 83, 254, 0.15) !important;
    font-weight: 600;
}

/* ISSUE 5: Emoji detailed options - proper frames */
.xclq-option-emoji-detailed .xclq-option-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    padding: 20px 24px;
    background: white;
    border: 2px solid var(--xclq-border);
    border-radius: 12px;
    transition: all 0.3s ease;
    min-height: 70px;
}

.xclq-option-text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex: 1;
}

.xclq-option-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--xclq-text);
}

.xclq-option-subtitle {
    font-size: 14px;
    color: var(--xclq-text-light);
    font-weight: 400;
}

/* Ensure proper structure for all option types */
.xclq-option {
    display: block;
    position: relative;
    cursor: pointer;
    margin-bottom: 12px;
}

.xclq-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* ISSUE 6: Button color change to #5653FE */
.xclq-btn-primary {
    background: #5653FE !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px 0 rgba(86, 83, 254, 0.25);
}

.xclq-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(86, 83, 254, 0.35);
    background: #4845d9 !important;
    color: white;
}

.xclq-btn-secondary {
    background: #5653FE !important;
    color: white !important;
}

.xclq-btn-secondary:hover {
    background: #4845d9 !important;
    transform: translateY(-2px);
}

.xclq-btn-ghost {
    background: transparent;
    color: #000000;
    border: 2px solid #e5e7eb;
}

.xclq-btn-ghost:hover {
    background: #f9fafb;
    border-color: #5653FE;
}

/* Update progress bar color */
.xclq-progress-fill {
    background: #5653FE !important;
    height: 100%;
    transition: width 0.3s ease;
}

/* ISSUE 7: Remove Focus from readiness insights, better padding */
.xclq-insight-item.xclq-focus-item {
    display: none !important;
}

.xclq-insights {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 30px;
}

.xclq-insight-item {
    display: flex;
    gap: 15px;
    padding: 18px;
    background: var(--xclq-bg-light);
    border-radius: 12px;
    align-items: flex-start;
}

/* ISSUE 8: Readiness slider animation */
.xclq-slider-marker {
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border: 3px solid #5653FE;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 0%; /* Start at 0 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: left 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bouncy animation */
}

/* Update persona cards for new color */
.xclq-persona-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(86, 83, 254, 0.15);
    border-color: #5653FE;
}

.xclq-persona-card input[type="radio"]:checked + .xclq-persona-content {
    border-color: #5653FE;
    background: #f9fafb;
}

.xclq-persona-text {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    padding: 12px 15px;
    background: #f3f4f6;
    border-radius: 8px;
}

.xclq-persona-card:hover .xclq-persona-text {
    background: #5653FE;
    color: #ffffff;
}

.xclq-persona-card input[type="radio"]:checked + .xclq-persona-content .xclq-persona-text {
    background: #5653FE;
    color: #ffffff;
}

/* Simple options proper styling */
.xclq-option-simple {
    position: relative;
    cursor: pointer;
}

.xclq-option-simple input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.xclq-option-simple .xclq-option-text {
    display: block;
    padding: 20px 30px;
    text-align: center;
    background: white;
    border: 2px solid var(--xclq-border);
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.3s ease;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xclq-option-simple:hover .xclq-option-text {
    border-color: #5653FE;
    background: var(--xclq-bg-light);
    transform: translateX(4px);
}

.xclq-option-simple input[type="radio"]:checked ~ .xclq-option-text {
    border-color: #5653FE !important;
    background: #f0f0ff !important;
    box-shadow: 0 4px 12px rgba(86, 83, 254, 0.15) !important;
}

/* FIX: Remove double frames for emoji options */
.xclq-option-emoji {
    display: block;
    position: relative;
    cursor: pointer;
    margin-bottom: 12px;
}

.xclq-option-emoji input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.xclq-option-emoji .xclq-option-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    padding: 20px 24px;
    background: white;
    border: 2px solid var(--xclq-border);
    border-radius: 12px;
    transition: all 0.3s ease;
    min-height: 70px;
}

.xclq-option-emoji .xclq-option-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--xclq-text);
    border: none !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    flex: 1;
    text-align: left;
}

.xclq-option-emoji:hover .xclq-option-content {
    border-color: #5653FE !important;
    background: var(--xclq-bg-light);
    transform: translateX(4px);
}

.xclq-option-emoji input[type="radio"]:checked ~ .xclq-option-content {
    border-color: #5653FE !important;
    background: #f0f0ff !important;
    box-shadow: 0 4px 12px rgba(86, 83, 254, 0.15) !important;
    font-weight: 600;
}

.xclq-option-emoji.xclq-selected .xclq-option-content {
    border-color: #5653FE !important;
    background: #f0f0ff !important;
    box-shadow: 0 4px 12px rgba(86, 83, 254, 0.15) !important;
}

/* Emoji inside frame */
.xclq-option-emoji .xclq-emoji {
    font-size: 32px;
    flex-shrink: 0;
}

/* FINAL FIX: Much brighter, promising checkmark */
.xclq-checkmark {
    font-size: 64px;
    color: #4ade80 !important; /* Bright success green - very promising! */
    margin-bottom: 20px;
    animation: xclqCheckmarkPop 0.5s ease-out;
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.5); /* Glowing effect! */
}

@keyframes xclqCheckmarkPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* FINAL FIX: Force slider to start at 0 and ensure animation works */
.xclq-slider-marker {
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border: 3px solid #5653FE;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 0% !important; /* Force start at 0% */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: left 2s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* Longer, bouncier animation */
}

/* When animated class is added, it will move */
.xclq-slider-marker.xclq-animated {
    left: var(--target-position) !important;
}
/* ================================================
   CRITICAL FIXES - Checkmark & Slider & Mobile
   ================================================ */

/* CHECKMARK - BRIGHTEST GREEN POSSIBLE WITH MAXIMUM GLOW */
.xclq-checkmark {
    font-size: 64px !important;
    color: #22c55e !important; /* Even brighter green */
    margin-bottom: 20px !important;
    animation: xclqCheckmarkPop 0.5s ease-out !important;
    text-shadow: 0 0 30px rgba(34, 197, 94, 0.8), 
                 0 0 60px rgba(34, 197, 94, 0.4) !important; /* Double glow! */
    filter: brightness(1.3) !important; /* Extra brightness */
}

/* Ensure interstitial uses this */
.xclq-interstitial .xclq-checkmark {
    color: #22c55e !important;
    text-shadow: 0 0 30px rgba(34, 197, 94, 0.8), 
                 0 0 60px rgba(34, 197, 94, 0.4) !important;
    filter: brightness(1.3) !important;
}

/* SLIDER - FORCE START AT 0 AND ANIMATE */
.xclq-slider-bar {
    position: relative !important;
    height: 8px !important;
    background: linear-gradient(to right, #ef4444, #f59e0b, #84cc16, #10b981) !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
}

.xclq-slider-marker {
    position: absolute !important;
    width: 20px !important;
    height: 20px !important;
    background: white !important;
    border: 3px solid #5653FE !important;
    border-radius: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    left: 0% !important; /* FORCE START */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    transition: left 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* 3 SECONDS! */
    z-index: 10 !important;
}

/* MOBILE - REDUCE PADDING TO FIT NEXT BUTTON */
@media (max-width: 768px) {
    .xclq-options {
        gap: 8px !important; /* Reduced from 12px */
        margin-bottom: 20px !important; /* Reduced from 40px */
    }
    
    .xclq-option {
        margin-bottom: 8px !important; /* Reduced from 12px */
    }
    
    .xclq-option-text {
        padding: 16px 20px !important; /* Reduced from 20px 24px */
    }
    
    .xclq-option-content {
        padding: 16px 20px !important; /* Reduced from 20px 24px */
        min-height: 60px !important; /* Reduced from 70px */
    }
    
    .xclq-question {
        font-size: 22px !important; /* Reduced from 26px */
        margin-bottom: 20px !important; /* Reduced from 30px */
    }
    
    .xclq-progress-container {
        margin-bottom: 20px !important; /* Reduced from 40px */
    }
    
    .xclq-nav {
        margin-top: 15px !important;
        padding-bottom: 20px !important;
    }
    
    /* Emoji options on mobile */
    .xclq-option-emoji .xclq-option-content {
        padding: 14px 16px !important;
        min-height: 56px !important;
        gap: 12px !important;
    }
    
    .xclq-emoji {
        font-size: 28px !important; /* Slightly smaller */
    }
}

@media (max-width: 480px) {
    .xclq-options {
        gap: 6px !important;
        margin-bottom: 15px !important;
    }
    
    .xclq-option {
        margin-bottom: 6px !important;
    }
    
    .xclq-option-text {
        padding: 14px 16px !important;
        font-size: 15px !important;
    }
    
    .xclq-option-content {
        padding: 14px 16px !important;
        min-height: 56px !important;
    }
    
    .xclq-question {
        font-size: 20px !important;
        margin-bottom: 16px !important;
    }
    
    .xclq-progress-container {
        margin-bottom: 16px !important;
    }
    
    .xclq-emoji {
        font-size: 24px !important;
    }
    
    .xclq-option-emoji .xclq-option-content {
        padding: 12px 14px !important;
        min-height: 52px !important;
        gap: 10px !important;
    }
}

/* ========================================
   ORIGINAL CHECKMARK & ANALYSIS STYLES
   From PlanUpPro - Exact Colors!
   ======================================== */

/* Checkmark - EXACT original green gradient */
.xclq-checkmark {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 30px !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 40px !important;
    color: white !important;
    animation: xclqCheckmarkPop 0.5s ease-out !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Analysis Screen */
.xclq-analysis {
    text-align: center;
    background: white;
    padding: 60px 40px;
    border-radius: 20px;
    box-shadow: var(--xclq-shadow-lg);
}

.xclq-spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto 30px;
    border: 4px solid var(--xclq-bg-light);
    border-top: 4px solid #5653FE;
    border-radius: 50%;
    animation: xclqSpin 1s linear infinite;
}

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

.xclq-analysis-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--xclq-text);
    margin: 0 0 40px 0;
}

.xclq-analysis-items {
    margin: 0 auto 30px;
    max-width: 400px;
}

.xclq-analysis-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 16px;
    color: var(--xclq-text);
    opacity: 0;
    animation: xclqCheckAppear 0.5s ease-in-out forwards;
}

.xclq-analysis-item:nth-child(1) { animation-delay: 0.3s; }
.xclq-analysis-item:nth-child(2) { animation-delay: 0.6s; }
.xclq-analysis-item:nth-child(3) { animation-delay: 0.9s; }
.xclq-analysis-item:nth-child(4) { animation-delay: 1.2s; }

@keyframes xclqCheckAppear {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.xclq-check {
    width: 24px;
    height: 24px;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    flex-shrink: 0;
}

.xclq-generating {
    font-size: 16px;
    color: var(--xclq-text-light);
    font-style: italic;
}

/* Mobile adjustments for analysis */
@media (max-width: 768px) {
    .xclq-analysis {
        padding: 40px 25px;
    }
    
    .xclq-analysis-title {
        font-size: 22px;
    }
    
    .xclq-spinner {
        width: 50px;
        height: 50px;
    }
}

/* ========================================
   HIDE NEXT/FINISH BUTTONS - AUTO-ADVANCE
   ======================================== */

/* Hide Next and Finish buttons since we auto-advance on selection */
.xclq-next-btn,
.xclq-finish-btn {
    display: none !important;
}

/* Keep Back button visible */
.xclq-back-btn {
    display: inline-block !important;
}

/* Adjust nav alignment with only Back button */
.xclq-nav {
    justify-content: flex-start !important;
}

/* ========================================
   MOBILE - DRASTICALLY REDUCED PADDING
   ======================================== */

@media (max-width: 768px) {
    .xclq-container {
        padding: 10px !important;
    }
    
    .xclq-options {
        gap: 4px !important;
        margin-bottom: 10px !important;
    }
    
    .xclq-option {
        margin-bottom: 4px !important;
    }
    
    .xclq-option-text {
        padding: 12px 16px !important;
        font-size: 15px !important;
    }
    
    .xclq-option-content {
        padding: 12px 16px !important;
        min-height: 50px !important;
    }
    
    .xclq-question {
        font-size: 20px !important;
        margin-bottom: 12px !important;
        line-height: 1.2 !important;
    }
    
    .xclq-progress-container {
        margin-bottom: 12px !important;
    }
    
    .xclq-nav {
        margin-top: 10px !important;
    }
    
    .xclq-option-emoji .xclq-option-content {
        padding: 10px 14px !important;
        min-height: 48px !important;
        gap: 10px !important;
    }
    
    .xclq-emoji {
        font-size: 24px !important;
    }
    
    /* Persona cards on mobile */
    .xclq-persona-card {
        padding: 10px !important;
    }
    
    .xclq-persona-icon {
        font-size: 36px !important;
        margin-bottom: 8px !important;
    }
    
    .xclq-persona-text {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }
}

@media (max-width: 480px) {
    .xclq-container {
        padding: 8px !important;
    }
    
    .xclq-options {
        gap: 3px !important;
        margin-bottom: 8px !important;
    }
    
    .xclq-option {
        margin-bottom: 3px !important;
    }
    
    .xclq-option-text {
        padding: 10px 14px !important;
        font-size: 14px !important;
    }
    
    .xclq-option-content {
        padding: 10px 14px !important;
        min-height: 46px !important;
    }
    
    .xclq-question {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }
    
    .xclq-progress-container {
        margin-bottom: 10px !important;
    }
    
    .xclq-emoji {
        font-size: 22px !important;
    }
    
    .xclq-option-emoji .xclq-option-content {
        padding: 9px 12px !important;
        min-height: 44px !important;
        gap: 8px !important;
    }
}

/* ========================================
   FIX DOUBLE BORDER ON PERSONA CARDS
   ======================================== */

.xclq-persona-card {
    border: 2px solid var(--xclq-border) !important;
    padding: 20px 15px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.xclq-persona-card:hover {
    border-color: #5653FE !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(86, 83, 254, 0.15) !important;
}

.xclq-persona-card input[type="radio"]:checked + .xclq-persona-content {
    border: none !important; /* Remove inner border */
    background: transparent !important;
}

.xclq-persona-card.xclq-selected {
    border-color: #5653FE !important;
    background: #f9fafb !important;
    box-shadow: 0 8px 16px rgba(86, 83, 254, 0.15) !important;
}

/* Remove double border */
.xclq-persona-content {
    border: none !important;
    padding: 0 !important;
}

/* ========================================
   FIX TEXT ALIGNMENT IN INTERSTITIALS
   ======================================== */

.xclq-interstitial {
    text-align: center !important;
    padding: 40px 30px !important;
}

.xclq-interstitial h2 {
    font-size: 28px !important;
    line-height: 1.3 !important;
    margin: 20px 0 !important;
}

.xclq-interstitial p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin: 20px auto !important;
    max-width: 600px !important;
}

@media (max-width: 768px) {
    .xclq-interstitial {
        padding: 30px 20px !important;
    }
    
    .xclq-interstitial h2 {
        font-size: 24px !important;
    }
    
    .xclq-interstitial p {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .xclq-interstitial {
        padding: 25px 15px !important;
    }
    
    .xclq-interstitial h2 {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }
    
    .xclq-interstitial p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
}

/* ========================================
   GREEN CHECKMARKS IN ANALYSIS - EXACT MATCH
   ======================================== */

.xclq-check {
    width: 24px !important;
    height: 24px !important;
    background: #10b981 !important; /* Same green as checkmark circle */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    font-weight: bold !important;
}