/* ---------- 1. THE STAR (SPEC row 9) ----------
   Measured before: 13 px (it inherits the label's 13 px; its own rule sets colour, letter-spacing and line-height only).
   One size step = 1.3 x the inherited size (1.3em = 16.9 px) - "a little bigger", not a new element; vertical-align
   middle keeps it on the words' line, line-height 1 keeps the line box from growing more than the glyph; the label is
   flex nowrap on the phone (a3-phone.css, LIST 8) and stays one row. */
.a3-look2-page .a3-plans-section .a3-plans-label .a3-plans-star {
  font-size: 1.3em;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: -0.04em;
}


/* The title is a child of the art span in the markup (span.btile__art > img + span.btile__t), so the span must stop
   being a fixed-shape, overflow-hidden box: it grows to hold the picture AND the title; the picture itself carries the
   960 : 536 shape at the tile's width (fitted whole), the title flows under it. Measured first the other way round (the
   span kept as the fixed box): the static title fell below the picture INSIDE the box and was clipped away - the tile
   read "title under" with no title on screen. */
.a3-look2-page .bdeck .btile__art {
  aspect-ratio: auto;
  height: auto;
  overflow: visible;
  background: var(--black, #000);
}
.a3-look2-page .bdeck .btile__art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 536;
  object-fit: contain;
  object-position: center;
}
.a3-look2-page .bdeck .btile__t {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  padding: 10px 12px 12px;
  background: none;
}

/* ---------- 3. THE PLANS SLIDE IN (SPEC row 11) ----------
   Measured before: the page's own motion script lists .tier among the elements that RISE 28 px (page lines 1526-1557:
   .mo .mo-rise { opacity 0; translateY(28px) } -> .is-in, with an inline transition-delay of 0.09 s steps). Here the four
   bands slide in from the left (1, 3) and the right (2, 4) instead, each arriving at least 180 ms after the one before,
   then sit exactly where they sit today (transform none). Everything in this section is keyed on .a3-look2-plans, a
   class that ONLY the script a3-look2.js puts on the plans section: a page without the script behaves as today. The
   script sets each band's direction class and its delay (--a3-look2-delay, from its own IntersectionObserver, measured
   from the previous band's arrival) and adds a3-look2-tier--in; the delay is read by an !important transition-delay,
   which beats the inline delay the page's motion script writes (the page's mo class sits on the html element). The section clips the slide sideways (overflow-x: clip -
   not a scroll container, so nothing sticky or fixed changes). The compare table, the plan dialogs, the phone's
   full-width bands and the store rows are not named here. Off under reduced motion: the bands sit plain. */
@media (prefers-reduced-motion: no-preference) {
  .a3-look2-page .a3-look2-plans { overflow-x: clip; }
  /* the script's one-frame hold while it sets the start position: no transition then */
  .a3-look2-page .a3-look2-plans .a3-plans-band.a3-look2-tier--set { transition: none !important; }
  .a3-look2-page .a3-look2-plans .a3-look2-tier--left { --a3-look2-x: calc(-1 * clamp(36px, 6vw, 96px)); }
  .a3-look2-page .a3-look2-plans .a3-look2-tier--right { --a3-look2-x: clamp(36px, 6vw, 96px); }
  .mo .a3-look2-page .a3-look2-plans .a3-plans-band.mo-rise,
  .mo .a3-look2-page .a3-look2-plans .a3-plans-band.mo-rise.is-in {
    opacity: 0;
    transform: translate3d(var(--a3-look2-x, 0px), 0, 0);
    transition: opacity 520ms ease-out, transform 520ms cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--a3-look2-delay, 0s) !important;
    will-change: opacity, transform;
  }
  .mo .a3-look2-page .a3-look2-plans .a3-plans-band.mo-rise.a3-look2-tier--in,
  .mo .a3-look2-page .a3-look2-plans .a3-plans-band.mo-rise.is-in.a3-look2-tier--in {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .a3-look2-page .a3-look2-plans .a3-plans-band,
  .a3-look2-page .a3-look2-plans .a3-plans-band.a3-look2-tier--in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}