/* Safe areas: https://webkit.org/blog/7929/designing-websites-for-iphone-x/
   Edge sampling: WebKit LocalFrameView::fixedContainerEdges.
   Use opaque real header surfaces, not body gradients or pseudo-element strips. */
:root{--hm-safe-top:env(safe-area-inset-top,0px);--hm-safe-bottom:env(safe-area-inset-bottom,0px)}
html:has(body[data-header-surface="marketing"]){background:#35b6f0}
body[data-header-surface="marketing"]{background-color:#35b6f0}
body[data-header-surface="marketing"] main{background-color:#fff}
body[data-header-surface="marketing"] .hm-hero,
body[data-header-surface="marketing"]>.hero{padding-top:var(--hm-safe-top)}
html:has(body[data-header-surface="public"]){background:#fff}
body[data-header-surface="public"]{background-color:#fff}
body[data-header-surface="public"]>.header,
body[data-header-surface="public"]>.top{padding-top:var(--hm-safe-top);background-color:#fff}
html:has(body[data-header-surface="dashboard"]),
body[data-header-surface="dashboard"]{background-color:var(--bg,#f7f8fc)}
body[data-header-surface="dashboard"]{min-height:100svh}
body[data-header-surface="dashboard"] .shell{background:transparent;min-height:100svh}
body[data-header-surface="dashboard"] .main{background:var(--bg,#f7f8fc);padding-bottom:calc(40px + var(--hm-safe-bottom))}
body[data-header-surface="dashboard"] .main>.top{background-color:#fff;padding-top:calc(18px + var(--hm-safe-top))}
@media(max-width:760px){
 /* Full-width opaque header is the upper edge's surface. The lower canvas
    remains solid gray independently. Avoid backdrop-filter on sampled bar. */
 body[data-header-surface="dashboard"] .main>.top{position:sticky;top:0;z-index:20;background-color:#fff;padding-top:calc(12px + var(--hm-safe-top));isolation:isolate}
 body[data-header-surface="dashboard"] .main{padding-bottom:calc(32px + var(--hm-safe-bottom))}
 body[data-header-surface="dashboard"] .side{padding-top:calc(32px + var(--hm-safe-top))}
 body[data-header-surface="public"]>.header,
 body[data-header-surface="public"]>.top{position:sticky;top:0;z-index:20}
}

/* Match the iOS canvas at the top, then blend into the hero gradient. */
@media(max-width:760px){
 body[data-header-surface="marketing"] .hm-hero:before,
 body[data-header-surface="marketing"]>.hero{background:linear-gradient(to bottom,#35b6f0 0,transparent 220px),linear-gradient(118deg,#35b6f0 0%,#296de5 51%,#2628d7 100%)}
}

/* Let Safari sample the scrolling page after leaving the top; no fixed header. */
html:has(body[data-header-surface="marketing"].hm-scrolled),
body[data-header-surface="marketing"].hm-scrolled{background-color:transparent}