/* The iOS page (ios.html): the third tab, after the Mac page and the Android page.  It wears the iOS blue (body.theme-ios), and an
   amber notice for the one thing the page must say first: it is experimental.  Loaded after style.css, from ios.html only. */

.theme-ios {
  --cyan:      #0a84ff;
  --cyan-dim:  #0066d6;
  --cyan-rgb:  10, 132, 255;
  --btn-shadow: #0a4d99;
}
.theme-ios .btn { --btn-shadow: #0a4d99; }
.theme-ios .btn--ghost { --btn-shadow: transparent; }
.theme-ios .btn--amber { --btn-shadow: #9c7000; }

/* "Experimental" in the hero's first line and beside the version. */
.badge-exp {
  display: inline-block;
  padding: .1rem .55rem;
  margin-right: .5rem;
  border: 1px solid #ffb000;
  border-radius: 999px;
  color: #ffb000;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* The notice under the hero: what experimental means, before anything else. */
.exp {
  border: 1px solid rgba(255, 176, 0, .55);
  background: rgba(255, 176, 0, .09);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem 1.2rem;
  box-shadow: 0 0 60px -30px rgba(255, 176, 0, .6);
}
.exp h2 { color: #ffb000; font-size: 1.25rem; margin: 0 0 .7rem; }
.exp ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; color: var(--txt-2); }
.exp li { line-height: 1.5; }
.exp li b { color: var(--txt); }

/* The two iPad pictures are 4:3, not 16:9: they sit side by side and are as wide as the grid lets them. */
.shots--ipad img { aspect-ratio: 1613 / 1112; }

.note { margin-top: .9rem; color: var(--txt-3); font-size: .9rem; text-align: center; }

/* The iPad pictures' heading follows the phone pictures: room between them. */
.shots + .sec-head { margin-top: 3.2rem; }