/* =====================================================================
   FIXES (10 Nov 2026). Loaded LAST on index.html. Words unchanged.
   1. Phone packages: the turning card was taller than the free space, so
      it covered the arrow buttons (above) and the note (below).
      a. the photo at the top of each card is a little shorter on phones
      b. js/fixes.js measures the free space and sets --fit (for example
         0.93); "scale" then shrinks the card stack (around its middle) just enough
         to fit. It is set on the stack box, not on each card, so the cards
         keep turning exactly as js/swap.js moves them.
   2. Small phones (320px wide, like iPhone SE 1st gen): the arrow
      buttons above the cards stuck out 6px past the right edge.
      The thin progress line between 01 and 04 gets a little shorter there.
   3. Phone compare: the Washtron card was 4px wider than the screen.
   ===================================================================== */
@media (max-width:760px){
  /* 1a */
  #packages.pk3d .panel.pkc .stagebox{aspect-ratio:16/8}
  #packages.pk3d .panel.pkc .stagebox img{object-position:50% 72%}
  /* 1b */
  #packages.pk3d .pkstage{scale:var(--fit,1)}
}
@media (max-width:760px) and (max-height:620px){
  /* small phones (iPhone SE size): an even shorter photo */
  #packages.pk3d .panel.pkc .stagebox{aspect-ratio:16/6}
}
@media (max-width:760px){
  /* 2 (on a 390px phone this is still 120px, so nothing changes there) */
  #packages.pk3d #show .ocount i{width:min(120px,calc(100vw - 230px))}
}
@media (max-width:760px){
  /* 3. The highlighted card is made 2% bigger (scale 1.02) and it is as wide
     as the screen, so it stuck out 4px on each side. Clip the section's
     sides so the page is never wider than the phone. Looks the same. */
  #compare{overflow-x:clip}
}