@media (max-width: 820px) {
  html.rye-nano-mobile-prepaint body {
    visibility: hidden;
  }

  html.rye-nano-mobile-ready body {
    visibility: visible;
  }

  .rye-nano-overlay-kill {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .rye-nano-overlay-frame-kill {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
  }

  .rye-nano-overlay-frame-kill::before,
  .rye-nano-overlay-frame-kill::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* Make the actual page hero read as one continuous TRE composition. */
  body {
    overflow-x: hidden;
  }

  main,
  main > section:first-of-type,
  header + main > section:first-of-type {
    position: relative;
    isolation: isolate;
  }

  main > section:first-of-type,
  header + main > section:first-of-type {
    margin-top: 0 !important;
  }

  /* No abrupt visual layer between TRE chrome and RYE NANO content. */
  main > section:first-of-type::before,
  header + main > section:first-of-type::before {
    content: "";
    position: absolute;
    inset: -80px 0 auto;
    height: 180px;
    pointer-events: none;
    z-index: -1;
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.0),
        rgba(0,0,0,.12) 42%,
        rgba(0,0,0,0)
      );
  }
}