/* Mobile Safari tints its status bar and toolbar from the page background colour, so the page canvas is the
   sky blue the gradient ends in, and the very top of the page is faded to that same blue so the bar blends in. */
html,body{background:#b1d8ec}
.bp-refined:has(.world){background:
  linear-gradient(180deg,#b1d8ec 0,#b1d8ec00 140px),
  radial-gradient(1100px 700px at 72% 0%,#fff8e0a6,#fff8e000 70%),
  radial-gradient(900px 700px at 20% 58%,#fffef3a3,#fffef300 70%),
  linear-gradient(180deg,#b1d8ec 0%,#e9f3f6 13%,#eef5f6 19%,#f4f8f7 31%,#eef5f6 44%,#d9edf6 51%,#c8e5f5 58%,#eaf5fc 67%,#f0f6f5 78%,#d9edf6 89%,#b1d8ec 100%)}
.bp-refined:has(.application-section){background:
  linear-gradient(180deg,#b1d8ec 0,#b1d8ec00 140px),
  radial-gradient(1000px 700px at 72% 0%,#fff8e6a8,#fff8e600 70%),
  radial-gradient(800px 700px at 6% 52%,#fffbeacc,#fffbea00 70%),
  linear-gradient(180deg,#b5dcec 0%,#d9edf6 24%,#edf6f8 36%,#e4f2f8 52%,#d5ebf5 68%,#c6e3f2 84%,#b1d8ec 100%)}

/* iOS Safari paints an opaque status bar whenever a fixed element touches the top edge of the screen, and keeps it
   while scrolling. Keeping the fixed headers 12px below the edge (the same offset the scrolled glass pill uses)
   leaves Safari's see-through status bar in place. */
@media(max-width:720px){
  .bp-refined:not([data-sticky="false"]) .bp-home .header{top:12px;height:64px}
  .bp-refined:not([data-sticky="false"]) .bp-pro .site-header{top:12px}
}