#scribble-connector.hidden-by-default {
        visibility: hidden;
    }

    .hero-bg {
        position: relative;
    }

    .hero-overlay {
        position: absolute;
        z-index: 1;
    }

    #scribble-connector {
        z-index: 0 !important;
        opacity: 1 !important;
    }

    #scribble-connector path {
        opacity: 1 !important;
    }

    @media (max-width: 1023px) {
        #palo-cta-container {
            display: none !important;
        }
    }

    @media (min-width: 1024px) {
        #mobile-menu .introducing-palo-mobile {
            display: none !important;
        }
    }

    /* Hand-drawn border animation */
    @keyframes drawBorder {
        to {
            stroke-dashoffset: 0;
        }
    }


/* Keep the shared header in document flow so it cannot cover page titles. */
#main-header {
    position: sticky;
}

/* Show the continuous connector only at the 1280px reference width and above.
   At narrower widths or browser zoom, hide it before reflow can put ink behind
   the text field. */
@media (max-width: 1279px) {
    #scribble-connector {
        display: none !important;
    }
}

/* Keep desktop navigation labels on one line when zoom narrows the CSS viewport. */
@media (max-width: 1199px) {
    #main-header .site-header-nav > ul {
        display: none !important;
    }

    #main-header #palo-cta-container {
        display: none !important;
    }

    #main-header .site-header-nav > div:last-child {
        display: block !important;
        margin-left: auto;
    }
}

/* Keep the Introducing Palo link on the same Radley display settings as
   marketing headings, on both desktop and mobile navigation. */
#main-header .site-header-cta,
#mobile-menu .introducing-palo-mobile a {
    font-family: var(--font-heading, 'Radley', serif) !important;
    font-weight: var(--font-heading-weight, 1000) !important;
    font-style: normal;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

.home-hero {
    height: auto;
    min-height: calc(100vh - 8rem);
    min-height: calc(100svh - 8rem);
}

/* The footer mascot changes illustration without relying on inline handlers. */
.footer-palo {
    position: relative;
    flex: 0 1 17.5rem;
    width: min(100%, 17.5rem);
    aspect-ratio: 1;
}

.footer-palo__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-palo__image--hover {
    display: none;
}

.footer-palo:hover .footer-palo__image {
    display: none;
}

.footer-palo:hover .footer-palo__image--hover {
    display: block;
}

/* Hero stages use the approved surface palette as fallback color only.
   Page-authored background images, gradients, and artwork stay in front. */
body {
    background-color: var(--color-bg-primary, #0d0d12);
}

.brand-hero {
    --brand-hero-surface: var(--color-bg-primary, #0d0d12);
    background-color: var(--brand-hero-surface);
    border: 0 !important;
    box-shadow: none !important;
}

.brand-hero--entry {
    --brand-hero-surface: var(--color-bg-primary, #0d0d12);
}

/* Keep viewport-height opening heroes within the space below the shared
   inset header. The header's 5rem navigation and 1rem outer margins occupy
   7rem in normal flow. */
:root {
    --site-header-flow-height: 7rem;
}

body:has(#main-header.site-header--flush) {
    --site-header-flow-height: 5rem;
}

body:not(.page-api-layout) .brand-hero--entry:is(.h-screen, [class~="h-[98vh]"]) {
    height: calc(100vh - var(--site-header-flow-height)) !important;
    height: calc(100svh - var(--site-header-flow-height)) !important;
    min-height: calc(100vh - var(--site-header-flow-height)) !important;
    min-height: calc(100svh - var(--site-header-flow-height)) !important;
    margin-top: 0 !important;
}

body:not(.page-api-layout) .brand-hero--entry:is(.ps-hero, .hero-container) {
    min-height: calc(100vh - var(--site-header-flow-height)) !important;
    min-height: calc(100svh - var(--site-header-flow-height)) !important;
}

body:not(.page-api-layout) .site-hero--viewport {
    height: calc(100vh - var(--site-header-flow-height)) !important;
    height: calc(100svh - var(--site-header-flow-height)) !important;
    min-height: calc(100vh - var(--site-header-flow-height)) !important;
    min-height: calc(100svh - var(--site-header-flow-height)) !important;
    margin-top: 0 !important;
    overflow: hidden;
}

.site-hero--frame {
    height: 100%;
    min-height: 0 !important;
    /* Empty media frames remain plain black; do not add decorative gradients. */
    background: #000;
}

.site-hero--content {
    height: 100%;
    min-height: 0 !important;
}

.brand-hero--institution {
    --brand-hero-surface: var(--color-bg-secondary, #181821);
}

.brand-hero--product {
    --brand-hero-surface: var(--color-bg-tertiary, #222230);
}

.brand-hero--research {
    --brand-hero-surface: var(--color-bg-quaternary, #2d2d3e);
}

.brand-hero--service {
    --brand-hero-surface: var(--color-bg-primary, #0d0d12);
}

/* Card separation comes from surface tone and spacing, never an outline. */
body :is(
    .glass-card,
    .faq-item,
    .quick-tile,
    .ticket-row,
    .benchmark-card,
    .legal-card,
    .privacy-archive-card,
    [class~="card"],
    [class*="-card"],
    [class*="card-"]
) {
    background-color: var(--color-card-primary, #252529) !important;
    border: 0 !important;
    box-shadow: none !important;
}

body footer[role="contentinfo"] {
    background-color: var(--color-bg-preprimary, #060608) !important;
}

/* Public content sections alternate the two page surfaces. A hero inside
   <main> starts the sequence on primary; a hero before <main> starts the
   following content on secondary. Pages without a hero start on primary. */
body:not(.page-api-layout):has(main > .brand-hero--entry) main > section:nth-of-type(odd) {
    background-color: var(--color-bg-primary, #0d0d12) !important;
}

body:not(.page-api-layout):has(main > .brand-hero--entry) main > section:nth-of-type(even) {
    background-color: var(--color-bg-secondary, #181821) !important;
}

body:not(.page-api-layout):has(.brand-hero--entry):not(:has(main > .brand-hero--entry)) main > section:nth-of-type(odd) {
    background-color: var(--color-bg-secondary, #181821) !important;
}

body:not(.page-api-layout):has(.brand-hero--entry):not(:has(main > .brand-hero--entry)) main > section:nth-of-type(even) {
    background-color: var(--color-bg-primary, #0d0d12) !important;
}

body:not(.page-api-layout):not(:has(.brand-hero--entry)) main > section:nth-of-type(odd) {
    background-color: var(--color-bg-primary, #0d0d12) !important;
}

body:not(.page-api-layout):not(:has(.brand-hero--entry)) main > section:nth-of-type(even) {
    background-color: var(--color-bg-secondary, #181821) !important;
}

body main :is(div, article, section, aside)[class~="border"][class*="rounded-"] {
    border: 0 !important;
    box-shadow: none !important;
}

body main > section + section,
body main > .brand-hero + section,
body main > .brand-hero + div {
    border-top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .brand-hero *,
    .brand-hero *::before,
    .brand-hero *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}