/* FAQ artwork: observation/forecasting above, community services below.
   Decorative CSS layers keep the existing question and answer UI intact. */
.faqpage {
    position: relative;
    isolation: isolate;
    background-color: #f1f7fb;
    background-image:
        radial-gradient(circle, rgba(47, 109, 137, 0.09) 1px, transparent 1px),
        linear-gradient(180deg, #f5f9fc, #edf6fa 55%, #f1f7fb);
    background-size: 28px 28px, 100% 100%;
    background-repeat: repeat, no-repeat;
}

.faqpage::before,
.faqpage::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 960px;
    max-height: 50%;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: max(1440px, 100%) auto;
}

.faqpage::before {
    top: 0;
    background-image: url('/images/faq/weather-observations.webp?v=1');
    background-position: center top;
    mask-image: linear-gradient(to bottom, #000 65%, transparent);
}

.faqpage::after {
    bottom: 0;
    background-image: url('/images/faq/community-services.webp?v=1');
    background-position: center bottom;
    mask-image: linear-gradient(to bottom, transparent, #000 35%);
}

.faqpage > .background-svg {
    /* The existing diamond grid remains decorative and cannot intercept tiles. */
    opacity: 0.2;
    pointer-events: none;
}

.faqpage-content {
    padding-bottom: 220px;
}

.faq-item-title-wrapper {
    box-shadow: 0 8px 24px rgba(30, 76, 108, 0.09);
}

@media (max-width: 767px) {
    .faqpage::before,
    .faqpage::after {
        background-size: 1000px auto;
        height: 720px;
    }

    .faqpage::before { background-position: 20% top; }
    .faqpage::after { background-position: 75% bottom; }
    .faqpage-content { padding-bottom: 180px; }
}