/* Business Display primitives. Shared Story styles own component composition. */
body.bd-site {
    --bd-canvas: #171b21;
    --bd-ink: #e6edf5;
    --bd-copy: #a1aebd;
    --bd-muted: #98a6b7;
    --bd-accent: #007fff;
    --bd-accent-soft: #9fb6ca;
    --bd-line: rgba(124, 177, 232, .16);
    --bd-space: clamp(72px, 7.2vw, 104px);
    --bd-button-bg: linear-gradient(115deg, #0875df, #0059bc);
    --bd-button-hover: #005fbe;
    --bd-radius: 6px;
    background-color: var(--bd-canvas);
}
.bd-page { color: var(--bd-ink); }
.bd-page .main-header-ctas { --bd-action-min-height: 54px; }
.bd-page .blog-load-more { --bd-action-min-height: 48px; }

/* Opt-in artwork preserves each page's existing header composition. */
.bd-page .bd-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--bd-canvas);
}
.bd-page .bd-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url('/Images/Business%20Display/hero-ribbon.svg') center / cover no-repeat;
    opacity: .45;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 58%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 24%, #000 58%, transparent);
}
.bd-page .bd-hero > .o-container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
    .bd-page .bd-hero::before { background-image: url('/Images/Business%20Display/hero-ribbon.svg#paused'); }
}

/* Public actions share the hero's restrained primary button and text-link treatment. */
html body.bd-site:has(.bd-page) :is(.nav, .bd-page, .o-footer) :is(.cta, .tools-mega-cta-link, .subscribe) {
    min-height: var(--bd-action-min-height, 44px);
    border: 1px solid #2884df;
    border-radius: var(--bd-radius);
    background: var(--bd-button-bg);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

html body.bd-site:has(.bd-page) :is(.nav, .bd-page, .o-footer) :is(.cta, .tools-mega-cta-link, .subscribe):hover {
    background: var(--bd-button-hover);
    border-color: var(--bd-button-hover);
    box-shadow: none;
    transform: none;
}

html body.bd-site:has(.bd-page) :is(.nav, .bd-page) .cta.cta-alternate {
    background: transparent;
    border-color: transparent;
    color: #e5ecf5;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-color: #69798c;
    text-underline-offset: 6px;
}

html body.bd-site:has(.bd-page) :is(.nav, .bd-page) .cta.cta-alternate:hover {
    background: transparent;
    border-color: transparent;
    text-decoration-color: currentColor;
}

html body.bd-site:has(.bd-page) :is(.nav, .bd-page, .o-footer) :is(.cta, .tools-mega-cta-link, .subscribe):focus-visible,
html body.bd-site:has(.bd-page) :is(.nav, .bd-page) a:focus-visible > .cta {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html body.bd-site:has(.bd-page) :is(.nav, .bd-page, .o-footer) :is(.cta, .tools-mega-cta-link, .subscribe) {
        transition: none;
    }
}

/* Shared chapter boundaries: equal breathing room and one continuous charcoal canvas. */
.bd-page:not(.o-about-page) {
    --bd-flow-fade: var(--bd-space);
    --bd-flow-shade: linear-gradient(180deg, var(--body-bg), transparent var(--bd-flow-fade), transparent calc(100% - var(--bd-flow-fade)), var(--body-bg));
    --section-padding: var(--bd-space);
}

/* The screenshot and ribbon retain their composition while their backdrop fades out. */
.bd-page:not(.o-about-page) .narrative-hero {
    padding-bottom: var(--bd-space);
}
.bd-page:not(.o-about-page) .narrative-hero .main-header-bg {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--bd-flow-fade)), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - var(--bd-flow-fade)), transparent);
}
/* Dissolve the remaining product shadow at the edge below the screenshot. */
.bd-page:not(.o-about-page) .narrative-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 24px;
    z-index: 3;
    background: linear-gradient(180deg, transparent, var(--body-bg));
    pointer-events: none;
}
.bd-page:not(.o-about-page) > :is(.story-overview, .data-connection) {
    padding-block: var(--bd-space);
}

html body .bd-page:not(.o-about-page) > :is(.o-sign-up-steps, .o-tools, .o-marketplaces, .o-trust, .o-faqs, .o-cta-grow) .o-section {
    padding-block: var(--bd-space);
    border-top: 1px solid var(--bd-line);
}
.bd-page:not(.o-about-page) > .o-sign-up-steps { padding-bottom: 0; }

/* A shared panel without closing copy ends at the next chapter's divider. */
.bd-page > .o-tools:not(:has(.story-section-close)) .tools-tools-item {
    border-bottom: 0;
}
.bd-page > .o-faqs .o-faq:last-child {
    border-bottom: 0;
}
.bd-page.ppc-optimization-tool > .o-section .bullets-flex {
    border-bottom: 0;
}
.bd-page.promise-advertising .bullets-flex,
.bd-page > .o-section:has(.o-breaker) .o-breaker > .o-container,
.bd-page > .o-about-principles {
    border-bottom: 0;
}

/* A comparison table already supplies the closing edge for its chapter. */
.bd-page.o-comparison-page > .comparison-pricing + .demo-interlude > .o-container,
.bd-page.o-comparison-page > .comparison-pricing + .o-pricing > .o-section > .o-container {
    border-top: 0;
}

/* These chapters have no .o-section wrapper; their container owns the same edge. */
.bd-page:not(.o-about-page) > :is(.competitive-edge, .o-seller-stories, .demo-interlude) {
    padding-block: 0 var(--bd-space);
}
.bd-page:not(.o-about-page) > :is(.competitive-edge, .o-seller-stories, .demo-interlude) > .o-container {
    padding-top: var(--bd-space);
    border-top: 1px solid var(--bd-line);
}
.bd-page:not(.o-about-page) .competitive-edge-shell {
    padding-block: 0;
    border: 0;
}
.bd-page:not(.o-about-page) .competitive-edge::before,
.bd-page:not(.o-about-page) .competitive-edge::after { content: none; }

/* Pricing's wrapper spans the viewport, so put its divider on the content width. */
html body .bd-page:not(.o-about-page) > .o-pricing > .o-section {
    padding-block: 0 var(--bd-space);
    border-top: 0;
}
.bd-page:not(.o-about-page) > .o-pricing > .o-section > .o-container {
    padding-top: var(--bd-space);
    border-top: 1px solid var(--bd-line);
}

/* Keep the existing colour in the centre, but reach the exact canvas colour at both ends. */
.bd-page:not(.o-about-page) > .competitive-edge {
    background-image: var(--bd-flow-shade), radial-gradient(ellipse at 18% 44%, rgba(33, 72, 105, .25), transparent 64%);
}
.bd-page:not(.o-about-page) > .o-seller-stories {
    background-image: var(--bd-flow-shade), radial-gradient(ellipse at 82% 12%, rgba(0, 127, 255, .035), transparent 62%);
}
.bd-page:not(.o-about-page) > :is(.demo-interlude, .o-cta-grow)::after {
    inset: 0;
    height: auto;
    z-index: 0;
    background: var(--bd-flow-shade);
}
.bd-page:not(.o-about-page) > :is(.demo-interlude, .o-cta-grow) > .o-container {
    position: relative;
    z-index: 1;
}

/* The final invitation and footer meet on one muted surface, separated by the chapter rule. */
.bd-page:not(.o-about-page) > .o-cta-grow::after {
    background: linear-gradient(180deg, var(--body-bg), transparent var(--bd-flow-fade), transparent calc(100% - var(--bd-flow-fade)), #1a222c);
}
body.bd-site:has(.bd-page) .o-footer {
    padding-top: 0;
    background:
        linear-gradient(180deg, #1a222c, transparent 160px),
        radial-gradient(ellipse at 68% 0%, rgba(47, 78, 108, .16), transparent 50%),
        linear-gradient(180deg, #1a222c 0%, #111923 48%, #10161e);
}
body.bd-site:has(.bd-page) .o-footer > .o-container {
    padding-top: clamp(72px, 7.2vw, 104px);
    border-top: 1px solid rgba(124, 177, 232, 0.16);
}
body.bd-site:has(.bd-page) .o-footer::after {
    content: none;
}

/* Pages without the final invitation meet the footer on the common canvas. */
body.bd-site:not(:has(.bd-page > .o-cta-grow)) .o-footer {
    background:
        linear-gradient(180deg, var(--bd-canvas), transparent 160px),
        radial-gradient(ellipse at 68% 0%, rgba(47, 78, 108, .16), transparent 50%),
        linear-gradient(180deg, #1a222c 0%, #111923 48%, #10161e);
}
/* Shared, once-per-visit entrances keep chapter surfaces and dividing rules still. */
@media (prefers-reduced-motion: no-preference) {
    body.bd-site .bd-motion-pending { opacity: 0; }

    body.bd-site .bd-motion-entering {
        animation: businessDisplayEnter 850ms var(--bd-motion-delay, 0ms) cubic-bezier(.16, 1, .3, 1) both;
    }

    body.bd-site .bd-motion-visual {
        --bd-motion-distance: 42px;
        --bd-motion-scale: .975;
    }
}

@keyframes businessDisplayEnter {
    from {
        opacity: 0;
        transform: translate3d(0, var(--bd-motion-distance, 26px), 0) scale(var(--bd-motion-scale, 1));
    }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 780px) {
    body.bd-site .bd-motion-target { --bd-motion-distance: 20px; --bd-motion-scale: 1; }
}

@media print {
    body.bd-site .bd-motion-target { opacity: 1 !important; animation: none !important; transform: none !important; }
}