/* Match the mobile hero cutout to the browser's light-grey canvas.
   Keep this native paint behind the masked hero, not inside its mask. */
@media(max-width:700px){
 html{--safari-chrome-color:#e5e5ea;--hero-notch-color:#e5e7ec;background-color:var(--safari-chrome-color)}
 body,body.courses-site{background-color:var(--safari-chrome-color)}
 .mobile-hero-summary{background:linear-gradient(var(--hero-notch-color),transparent 160px)}
 .mobile-hero-summary::before{
  content:"";
  position:absolute;
  top:calc(-1 * var(--join-height));
  left:0;
  right:0;
  height:calc(var(--join-height) + 1px);
  background:var(--hero-notch-color);
  pointer-events:none;
 }
}