/* Photographs behind their sections on phones (Who We Are and Why Enwealth,
   2026-09-28): each photo fills its section under a wash, instead of a
   300-400px block of its own. Loaded only by the pages in PHOTO_BACKDROP
   (page.tsx), which mark <main data-backdrop>. Desktop is unchanged. Every
   selector starts with `html`: this file loads before site.css.
   The <img> itself is pinned: its <picture> has no box of its own. The wash
   is the figure's ::after, which also replaces the hero's lime corners. */
@media (max-width:760px){
  html [data-backdrop] :is(.page-hero,.numbered,.timeline-section,.prose-photo){position:relative;overflow:hidden;isolation:isolate}
  html [data-backdrop] :is(.page-hero-figure,.numbered-figure,.timeline-figure,.prose-photo-figure){position:static;margin:0;padding:0;transform:none}
  /* `main` outranks product.css's fixed height for the columns variant. */
  html main[data-backdrop] :is(.page-hero-figure,.numbered-figure,.timeline-figure,.prose-photo-figure) img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0;transform:none}
  html [data-backdrop] :is(.page-hero-figure,.prose-photo-figure)::before{display:none}
  html [data-backdrop] :is(.page-hero-figure,.numbered-figure,.timeline-figure,.prose-photo-figure)::after{
    content:"";display:block;position:absolute;inset:0;z-index:-1;width:auto;height:auto;
    border-radius:0;clip-path:none;transform:none;
    background:linear-gradient(180deg,rgba(252,252,248,.8),rgba(252,252,248,.74))
  }
  /* The numbered list's band is white since 2026-10-13 (it was the brand
     purple), so its wash is light too, and stronger: its lines are long
     body copy, which needs 4.5:1 over the photograph. */
  html [data-backdrop] .numbered-dark .numbered-figure::after{background:linear-gradient(180deg,rgba(252,252,248,.9),rgba(252,252,248,.86))}
}