:root {
    --seo-readable: #dbe4f0;
    --seo-readable-strong: #f8fafc;
}

/* Keep the decision panel visible while the visitor evaluates the offer. */
.seo-sticky-panel {
    position: sticky;
    top: 96px;
    align-self: start;
    z-index: 3;
}

.seo-sticky-panel::before {
    content: 'SEO / GBP VISIBILITY';
    display: block;
    width: fit-content;
    margin: 0 0 12px 4px;
    color: var(--brand-gold);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.seo-sticky-panel .fcard {
    border-color: rgba(255, 255, 255, .14);
    background: linear-gradient(150deg, rgba(23, 33, 62, .96), rgba(15, 15, 26, .96));
}

.seo-sticky-panel .split__lead,
.seo-landing p {
    color: var(--seo-readable);
}

.seo-sticky-panel .fcard__title {
    color: #cbd5e1;
}

.seo-sticky-panel .fcard__list li,
.seo-landing + .section-dark .fcard,
.seo-landing + .section-dark .fcard span {
    color: var(--seo-readable);
}

.seo-sticky-panel .fcard__title span {
    color: var(--seo-readable-strong);
}

/* Improve the low-opacity text used by the dark editorial sections. */
.seo-landing + .section-dark p,
.seo-landing ~ .section-dark p,
.seo-landing ~ .split p {
    color: var(--seo-readable);
}

@media (max-width: 960px) {
    .seo-sticky-panel {
        position: static;
    }
}

@media (prefers-reduced-motion: reduce) {
    .seo-sticky-panel .fcard,
    .seo-sticky-panel .fcard:hover {
        animation: none;
        transform: none;
    }
}