/* ==================== Q&A SECTION (SEO Content) ==================== */

.qa-section {
    background: var(--bg-qa);
    padding: var(--space-3xl) 0;
    position: relative;
}

/* Diagonal line pattern — slightly more visible than CTA to differentiate */
.qa-section .qa-texture {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 1.5rem,
        rgba(61, 90, 128, 0.045) 1.5rem,
        rgba(61, 90, 128, 0.045) 1.5625rem
    );
    pointer-events: none;
    z-index: 0;
}

/* Wave separator top — transition from CTA (#f0f2f7) into Q&A (#e8edf5) */
.qa-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5rem;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 80V40C240 0 480 80 720 40C960 0 1200 80 1440 40V80Z' fill='%23e8edf5'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
    margin-top: -5rem;
}

/* Wave separator bottom — transition from Q&A into footer */
.qa-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4rem;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 64' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 0C360 64 720 0 1080 48C1260 60 1380 20 1440 0V64H0Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
}

.qa-section .container {
    max-width: 60rem;
    position: relative;
    z-index: 1;
}

.qa-item {
    margin-bottom: var(--space-3xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

/* Question */
.qa-question {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 500;
    color: var(--gray-500);
    line-height: 1.25;
    font-style: normal;
}

.qa-question em {
    font-style: italic;
    font-weight: 500;
}

/* Answer */
.qa-answer {
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
    line-height: 1.8;
    color: var(--text-primary);
}

.qa-answer p {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
}

/* Zig-zag layout: real spatial displacement */
.qa-item--left {
    text-align: left;
    max-width: 85%;
    margin-right: auto;
}

.qa-item--left .qa-answer {
    padding-left: var(--space-lg);
    border-left: 0.1875rem solid rgba(61, 90, 128, 0.25);
}

.qa-item--right {
    text-align: right;
    max-width: 85%;
    margin-left: auto;
}

.qa-item--right .qa-answer {
    padding-right: var(--space-lg);
    border-right: 0.1875rem solid rgba(61, 90, 128, 0.25);
}

/* Last item: no excessive margin */
.qa-item:last-child {
    margin-bottom: 0;
}

/* ==================== Responsive ==================== */
@media (max-width: 768px) {
    .qa-section {
        padding: var(--space-2xl) 0;
    }

    .qa-item {
        margin-bottom: var(--space-2xl);
    }

    /* Mobile: all left-aligned, full width */
    .qa-item--left,
    .qa-item--right {
        text-align: left;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .qa-item--left .qa-question,
    .qa-item--right .qa-question {
        padding-left: 0;
        padding-right: 0;
    }

    .qa-item--left .qa-answer,
    .qa-item--right .qa-answer {
        padding-left: var(--space-md);
        padding-right: 0;
        border-left: 0.1875rem solid rgba(61, 90, 128, 0.25);
        border-right: none;
    }

    .qa-question {
        font-size: clamp(1.5rem, 5vw, 1.75rem);
    }

    .qa-section::before {
        height: 3rem;
        margin-top: -3rem;
    }

    .qa-section::after {
        height: 2.5rem;
    }
}

/* Secondary SEO / migration hint — discrete, below Q&A */
.home-migration-note {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    margin: var(--space-xl) auto 0;
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(61, 90, 128, 0.12);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
}