/* Hero clean up (v110 only, loaded last). Small, reversible refinements to the current hero.
   #top matches the specificity of the hero rules in home.css. */

/* The phone mockups: a thin outline phone in our dark greys instead of a black bezel with a notch. A 1px #333 outline,
   a 10px #121212 bezel, a hairline round the screen and one small side button. No notch, no home bar and no drop shadow,
   so the page is the only thing on the screen. Every phone in the ring gets the same frame. */
#top .device { padding: 10px; border: 1px solid #333; border-radius: 54px; background: #121212; box-shadow: none; }
#top .device::before { content: ""; position: absolute; left: -3px; top: 20%; width: 2px; height: 56px; border-radius: 2px 0 0 2px; background: #333; }
#top .scr { border: 1px solid #2a2a2a; border-radius: 44px; }
#top .scr .isl, #top .scr .home { display: none; }
@media (max-width: 600px) {
  #top .device { padding: 8px; border-radius: 44px; }
  #top .scr { border-radius: 36px; }
}

/* The scroll hint sits on phone 1's screen again (it had moved to the caption row, bottom left): a soft dark fade rising
   from the screen's foot, pointing the eye down the page, with "Scroll to explore" and the bobbing arrow. It fades away
   the moment the page is touched or scrolled (stage.js adds .off) and while another phone is in front (.away). */
#top .sh {
  height: 38%; padding-bottom: var(--s3);
  background: linear-gradient(to top, rgba(11, 11, 11, .72) 0%, rgba(11, 11, 11, .38) 42%, rgba(11, 11, 11, .12) 72%, rgba(11, 11, 11, 0) 100%);
}
#top .sh-p {
  height: 32px; padding: 0 12px 0 14px; font-size: 14px; color: var(--text);
  background: rgba(17, 17, 17, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#top .sh.away { opacity: 0; visibility: hidden; }
@media (max-width: 600px) { #top .sh { height: 34%; padding-bottom: var(--s2); } }