:root {
  color-scheme: light dark;
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1d1d1f;
  background: #f5f5f7;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: #0070c9; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid #007aff; outline-offset: 5px; }

.language-bar {
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px 12px;
}
#language-toggle {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#language-toggle:hover { background: rgba(128, 128, 128, .12); }
#language-toggle:active { transform: scale(.94); }
#language-flag { font: 29px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

main { width: min(920px, calc(100% - 48px)); margin: 0 auto; padding-bottom: 56px; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.step-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px 20px 10px 10px; }
.app-art { display: grid; place-items: center; height: 270px; flex-shrink: 0; }
.testflight-art { background: conic-gradient(from 270deg, #57bff7, #060d17); background-size: 100% 630px; }
.church-art { background: conic-gradient(from 270deg, #fff, #0c0c0c); background-size: 100% 630px; }
.app-art a { display: block; line-height: 0; }
.app-art img { display: block; object-fit: contain; }
.testflight-art img { filter: drop-shadow(0 0 10px rgba(0, 0, 0, .15)); }
.step-content { display: flex; flex-direction: column; flex: 1; padding: 20px; background: #fff; color: #000; }
.step-label { margin: 0 0 4px; color: #777; font-size: .875rem; font-weight: 650; line-height: 1.4; text-transform: uppercase; }
.step-content h1, .step-content h2 { margin: 0 0 6px; font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.625rem; font-weight: 700; line-height: 1.15; overflow-wrap: break-word; }
.step-description { flex: 1; margin: 0 0 22px; font-size: 1rem; line-height: 1.4; }
.download-button { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; max-width: 100%; border: 1px solid #0070c9; border-radius: 4px; padding: 7px 10px; font-size: .875rem; line-height: 1.35; }
.download-button:hover { color: #0079d8; border-color: #0079d8; background: #f5faff; text-decoration: none; }
.contact { margin: 64px auto 0; text-align: center; }
.contact h2 { margin: 0 0 20px; font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 2rem; font-weight: 600; line-height: 1.125; letter-spacing: -.02em; }
.contact p { margin: 0; font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.3125rem; line-height: 1.381; font-weight: 400; letter-spacing: .011em; }
.contact a { white-space: nowrap; }

@media (max-width: 735px) {
  .language-bar { padding: 8px 12px; }
  main { width: calc(100% - 24px); padding-bottom: 32px; }
  .steps { gap: 12px; }
  .step-card { border-radius: 14px 14px 10px 10px; }
  .app-art { height: clamp(120px, 32vw, 180px); }
  .testflight-art, .church-art { background-size: 100% 430px; }
  .app-art img { width: clamp(84px, 24vw, 120px); height: clamp(84px, 24vw, 120px); }
  .step-content { padding: 14px 12px; }
  .step-content h1, .step-content h2 { font-size: 1.25rem; line-height: 1.2; }
  .step-description { margin-bottom: 16px; overflow-wrap: anywhere; }
  .download-button { width: 100%; min-height: 44px; padding: 8px 6px; }
  .contact { margin-top: 32px; }
  .contact h2 { font-size: 1.75rem; margin-bottom: 14px; }
  .contact p { font-size: 1.1875rem; line-height: 1.5; }
}

@media (prefers-color-scheme: dark) {
  :root { background: #000; color: #f5f5f7; }
  .contact p { color: #ccc; }
  .contact a { color: #2997ff; }
}