/* KC-X for iPhone (the web app at voyagio.lat), 2026-10-24: the download
   center's iPhone card and the home page's iPhone band. Loaded after
   kcx.css and kcx-pages.css. */
.kx-iphone-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.kx-iphone-qr { text-align: center; }
.kx-iphone-qr img { display: block; width: 200px; height: 200px; margin: 0 auto; padding: 10px; background: #fff; border-radius: 18px; image-rendering: pixelated; }
.kx-iphone-qr p { margin: 10px 0 0; color: var(--kx-text-2, #b9b9c6); font-size: 0.86rem; }
.kx-iphone-body .release-market-product { display: flex; gap: 18px; align-items: center; }
.kx-iphone-body .release-market-product img { width: 72px; height: 72px; flex: none; border-radius: 22%; }
.kx-iphone-body h3 { margin: 0 0 6px; }
.kx-iphone-steps { margin: 16px 0; padding-inline-start: 1.3em; line-height: 1.6; }
.kx-iphone-steps li + li { margin-top: 6px; }
.kx-iphone-note { color: var(--kx-text-2, #b9b9c6); font-size: 0.9rem; line-height: 1.55; }
.kx-iphone-band .container { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.kx-iphone-band img { width: 120px; height: 120px; padding: 6px; background: #fff; border-radius: 14px; image-rendering: pixelated; }
.kx-iphone-band-text { flex: 1 1 320px; }
.kx-iphone-band-text h2 { margin: 0 0 8px; }
.kx-iphone-band-text p { margin: 0 0 12px; color: var(--kx-text-2, #b9b9c6); }
/* On a phone the code can't be scanned by the same phone: the button leads. */
@media (max-width: 720px) {
  .kx-iphone-card { grid-template-columns: minmax(0, 1fr); }
  .kx-iphone-qr { order: 2; }
  .kx-iphone-band img { display: none; }
}
/* The KC-X Helper's setup link and guide, under the iPhone card's note (2026-10-24). */
.kx-iphone-helper { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 16px; }
/* The download center's coin choice at checkout (stablecoins, 2026-10-24). */
.payment-coins { border: 1px solid var(--kx-line, rgba(255,255,255,.12)); border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; display: grid; gap: 8px; }
.payment-coins legend { padding: 0 6px; font-size: .9rem; color: var(--kx-text-2, #b9b9c6); }
.payment-coins label { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.payment-coins input { accent-color: #fe2c55; width: 18px; height: 18px; }
.payment-coins label.payment-coin-off { opacity: .45; cursor: not-allowed; text-decoration: line-through; }