/* The apps' page (/apps, static/apps.html): the friends page's sky, a phone in airplane mode with a game on it, the
   stores' own badges, and the website and the app side by side. */
body.apps-body { margin: 0; min-height: 100vh; background: #04070a radial-gradient(ellipse 120% 700px at 50% -140px, #15303a, #04070a 70%) no-repeat; color: #f8f0dc; }
.gu-page.apps-body #page { max-width: 1120px; margin: 0 auto; padding: calc(60px + 56px) 24px 64px; box-sizing: border-box; font-family: var(--gu-sans); }
.apps { display: flex; flex-direction: column; gap: 72px; }
/* (the words above the tilted phone's shadow) */
.apps-copy, .apps-choose { position: relative; z-index: 1; }

/* the top: what it's for, the stores, and the phone */
.apps-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.apps-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.gu-page .apps-copy h1 { margin: 0; font: 400 60px/1.03 var(--gu-serif); letter-spacing: -.015em; color: #f8f0dc; text-wrap: balance; text-shadow: 0 4px 24px #000a; }
.apps-copy p { margin: 0; max-width: 34em; font-size: 17px; line-height: 1.6; color: #d9cfbd; }
.gu-page .apps-copy .apps-lead { font-size: 20px; line-height: 1.5; color: #f8f0dc; }
.apps-copy strong { color: #f5dfaa; font-weight: 600; }

.apps-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 8px; }
.gu-page a.apps-store { display: inline-flex; align-items: center; border-radius: 12px; transition: transform .15s, filter .15s; }
.gu-page a.apps-store:hover { transform: translateY(-2px); filter: drop-shadow(0 10px 18px #000c); }
.gu-page a.apps-store:focus-visible { outline: 2px solid #dbbc76; outline-offset: 4px; }
.apps-badge-apple { display: block; height: 56px; width: auto; }
/* (Google's badge comes with its clear space round it: the badge itself the same height as Apple's) */
.apps-badge-google { display: block; height: 84px; width: auto; margin: -14px -14px -14px -14px; }
.apps-copy .apps-soon { margin: 2px 0 0; padding: 12px 16px; border-radius: 12px; border: 1px solid #dbbc7666; background: #dbbc761a; color: #f5dfaa; font-size: 15px; line-height: 1.5; max-width: 30em; }
.apps-soon.on { animation: apps-soon .35s ease-out; }
@keyframes apps-soon { from { transform: translateY(-4px); opacity: 0; } }

/* a phone on its side, a frame of pool on it, in airplane mode */
.apps-phone { margin: 0; justify-self: center; width: 100%; max-width: 560px; transform: rotate(-4deg); }
.apps-phone-body { position: relative; padding: 14px 18px; border-radius: 42px; background: linear-gradient(145deg, #2b3a42, #0b141a 55%, #1d2a31); box-shadow: 0 0 0 2px #46565e, 0 40px 80px #000d, 0 0 120px #3a7a6a33; }
.apps-phone-body::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 46px; margin-top: -23px; border-radius: 3px; background: #04070a; }
.apps-phone-body img { display: block; width: 100%; height: auto; aspect-ratio: 1300 / 599; border-radius: 28px; object-fit: cover; }
.apps-airplane { position: absolute; top: 28px; right: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px; background: #04070acc; color: #f8f0dc; font: 600 12px/1 var(--gu-sans); letter-spacing: .01em; }
.apps-airplane svg { width: 14px; height: 14px; fill: #f5dfaa; transform: rotate(45deg); }

/* the website and the app, side by side */
.apps-choose { display: flex; flex-direction: column; gap: 22px; }
.gu-page .apps-choose h2 { margin: 0; font: 400 36px/1.15 var(--gu-serif); color: #f8f0dc; }
.apps-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.apps-card { display: flex; flex-direction: column; gap: 10px; padding: 28px 30px; border-radius: 22px; border: 1px solid #d7e3e73d; background: linear-gradient(145deg, #14242ee6, #081117ee); }
.apps-card-app { border-color: #dbbc7680; }
.gu-page .apps-price { margin: 0; font-size: 14px; font-weight: 600; color: #f5dfaa; }
.gu-page .apps-card h3 { margin: 0; font: 400 30px/1.15 var(--gu-serif); color: #f8f0dc; }
.apps-card ul { margin: 6px 0 10px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.apps-card li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.5; color: #d9cfbd; }
.apps-card li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 7px; border-left: 2px solid #dbbc76; border-bottom: 2px solid #dbbc76; transform: rotate(-45deg); }
.gu-page a.apps-go { align-self: flex-start; display: inline-flex; align-items: center; min-height: 46px; padding: 0 24px; border-radius: 999px; border: 1px solid #dbbc76; background: #dbbc76; color: #081117; font: 600 16px var(--gu-sans); text-decoration: none; }
.gu-page a.apps-go:hover { background: #e6c98a; border-color: #e6c98a; }
.gu-page a.apps-go-quiet { background: transparent; color: #f5dfaa; }
.gu-page a.apps-go-quiet:hover { background: #dbbc761a; color: #fff; }
.gu-page a.apps-go:focus-visible { outline: 2px solid #dbbc76; outline-offset: 3px; }
.gu-page .apps-note { margin: 0; font-size: 14px; line-height: 1.5; color: #a9babd; }
.gu-page .apps-note a { color: #f5dfaa; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .apps-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .apps-phone { max-width: 520px; }
  .apps-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .gu-page.apps-body #page { padding: calc(60px + 28px) 16px 40px; }
  .apps { gap: 48px; }
  .gu-page .apps-copy h1 { font-size: 40px; }
  .gu-page .apps-copy .apps-lead { font-size: 18px; }
  .apps-phone-body { padding: 9px 12px; border-radius: 30px; }
  .apps-phone-body img { border-radius: 20px; }
  .apps-airplane { top: 18px; right: 24px; }
  .apps-card { padding: 22px 20px; }
  .gu-page .apps-card h3 { font-size: 26px; }
  .apps-badge-apple { height: 48px; }
  .apps-badge-google { height: 72px; margin: -12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gu-page a.apps-store, .apps-soon.on { transition: none; animation: none; }
}