/* One neutral palette for every public page. Load after page styles. */
:root {
    --public-page-bg: #ffffff;
    --public-panel-bg: #f4f5f8;
    --bg-lavender: var(--public-page-bg);
    --bg-lavender-light: var(--public-panel-bg);
}

body:is(.landing-page, .feature-page, .blog-post-page, .app-login-page, .pb-share-page) {
    background: var(--public-page-bg) !important;
}

/* Keep full-width sections on the same canvas, including secondary heroes. */
body:is(.landing-page, .feature-page, .blog-post-page) :is(main, main > section, .lp-hero, .site-footer),
body.app-login-page .site-footer {
    background: var(--public-page-bg) !important;
}

/* Content panels share Juuno's pale gray surface across all public routes. */
body:is(.landing-page, .feature-page, .blog-post-page, .app-login-page) :is(
    .article-summary, .article-author, .article-download-cta, .product-page__aside,
    .ratio-result, .public-disclosure, .lp-faq__item, .site-footer-card,
    .walkthrough-switcher__tabs, .feature-overview__grid article,
    .home-reviews__inner, .lp-tiers__card, .ratio-preview__box
) {
    background: var(--public-panel-bg) !important;
}

/* Override the secondary-hero rule in landing.css at equal specificity. */
body.landing-page .lp-hero:not(.lp-hero--home) {
    background: var(--public-page-bg) !important;
}

/* Screenshot surrounds use one surface on marketing pages and articles. */
body:is(.landing-page, .feature-page, .blog-post-page) :is(
    .app-visual-stage, .feature-detail__screens, .home-feature-focus,
    .home-design__stage, .lp-guide-card__cover,
    .lp-guide-card__body
) {
    background: var(--public-panel-bg) !important;
}

/* Preserve the homepage hero’s original scene colors. */
body:is(.landing-page, .feature-page, .blog-post-page) .lp-hero:not(.lp-hero--home) .booth-showcase-panel,
body:is(.landing-page, .feature-page, .blog-post-page) .lp-hero:not(.lp-hero--home) .booth-showcase-panel::before {
    background: var(--public-panel-bg) !important;
}

/* Mark the start of the footer on the shared white canvas. */
.site-footer {
    border-top: 1px solid #e4e4e7;
}