/* The iPhone app on the marketing site: the App Store badge, the fanned screenshots, and the
   band on the home page that points at /iphone. */

/* Apple's own badge artwork, unaltered, as tall as the .btn-ghost beside it: 13px of padding
   twice, a 15px line at 1.6 and a 1.5px border twice make 53. The badge is 3:1, so 159 wide,
   and still above the 40 Apple asks for on screen. */
.app-store-badge { display: inline-block; line-height: 0; border-radius: 8px; transition: transform .18s ease, box-shadow .18s ease; }
.app-store-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.app-store-badge img { display: block; width: 159px; height: 53px; }

/* Three App Store screenshots, fanned, the middle one in front. Sized as shares of the fan's
   own width, so the three always fit their column: each card is 42% wide, overlapping by 13%. */
.iphone-fan { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; margin: 0 auto; }
.iphone-fan img { position: absolute; top: 5%; width: 42%; height: auto; border-radius: 22px; box-shadow: var(--shadow-lg); background: var(--white); }
.iphone-fan img:nth-child(1) { left: 0; transform: rotate(-7deg); transform-origin: bottom right; }
.iphone-fan img:nth-child(2) { left: 29%; top: 0; z-index: 2; }
.iphone-fan img:nth-child(3) { right: 0; transform: rotate(7deg); transform-origin: bottom left; }

/* HOME — the iPhone band */
.iphone-band { padding: 96px 0; background: linear-gradient(180deg, var(--white) 0%, var(--primary-light) 100%); overflow: hidden; }
.iphone-band-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.iphone-band h2 { font-size: 44px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; color: var(--text); margin-bottom: 18px; }
.iphone-band h2 em { font-style: normal; color: var(--primary); }
.iphone-band p { font-size: 17px; color: var(--text-2); line-height: 1.65; max-width: 480px; margin-bottom: 28px; }
.iphone-band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

@media (max-width: 900px) {
  /* One column: the fan lines up with the text above it instead of centring on the page. A tilted
     card's top corner swings out 10.8% of the fan's width on each side, so a fan 1/1.216 of the
     column wide, inset by that swing, puts the cards' outer corners on the column's edges. */
  .iphone-fan { width: 82.2%; max-width: 440px; margin: 0 0 0 min(8.9%, 47.5px); }
  .iphone-fan img { border-radius: 16px; }
  .iphone-band { padding: 64px 0; }
  .iphone-band-inner { grid-template-columns: 1fr; gap: 28px; }
  .iphone-band h2 { font-size: 32px; }
}