/* a3-tierstack.css - the four plan bands on the home page hold and stack as the page scrolls, the way the store's
   numbered sections do, on a phone and on a computer: each band stops just under the top of the screen (under the bar
   on a phone), a few pixels lower than the band before so the edges of the stack show, and the next band slides up over
   it; scrolling back up lifts each one off again. The script beside this sheet measures each band's holding line and
   switches the class on, so without it the bands stand as plain bands; with motion turned off nothing here applies.
   Every band keeps its own height and its own ground (white or black), so nothing above or below the bands moves. */
@media (prefers-reduced-motion: no-preference) {
  /* 1. each band: held at the line the script measured for it, opaque on its own ground, a soft shadow cast up onto
     the band it covers */
  .a3-plans-section .a3-plans-listing.a3-tierstack-on .a3-plans-band {
    position: sticky;
    z-index: 1;
    background: var(--a3-plans-ground);
    box-shadow: 0 -20px 40px -18px rgba(0, 0, 0, 0.6);
  }

  /* 2. the slide-in from the side yields to the stack, as the store's sections gave up their fade on a phone: a band
     arrives whole and stays whole - no fade, no slide - so a band is never held while it is still sliding in. The
     selectors carry one class more than the slide's own rules, so they win wherever this sheet is linked. */
  .a3-plans-section .a3-plans-listing.a3-tierstack-on .a3-plans-band,
  .mo .a3-look2-page .a3-look2-plans .a3-plans-listing.a3-tierstack-on .a3-plans-band.mo-rise,
  .mo .a3-look2-page .a3-look2-plans .a3-plans-listing.a3-tierstack-on .a3-plans-band.mo-rise.is-in,
  .mo .a3-look2-page .a3-look2-plans .a3-plans-listing.a3-tierstack-on .a3-plans-band.mo-rise.is-in.a3-look2-tier--in {
    opacity: 1;
    transform: none;
    translate: none;
    transition: none;
    will-change: auto;
  }
}