/* ════════════════════════════════════════════════════════
   IPONE Campaign Microsite — responsive.css
   ════════════════════════════════════════════════════════ */

/* ── Very small phones (≤ 360px) ──────────────────────── */
@media (max-width: 360px) {
  .card-title    { font-size: 1.25rem; }
  .hero-tagline  { font-size: 2.1rem; }
  .content-card  { padding: 22px 16px; margin: 0 12px; }
  .btn-primary   { padding: 13px 18px; font-size: 0.92rem; }
  .ty-title      { font-size: 2.2rem; }
}

/* ── Standard phones (361px – 480px) ──────────────────── */
@media (min-width: 361px) and (max-width: 480px) {
  .hero-tagline  { font-size: 2.4rem; }
}

/* ── Larger phones / small tablets (481px – 768px) ────── */
@media (min-width: 481px) and (max-width: 768px) {
  .content-card  { margin: 0 24px; max-width: 420px; align-self: center; width: calc(100% - 48px); }
  .hero-tagline  { font-size: 2.8rem; }
  .screen-wrap   { align-items: center; }
  .site-header, .steps-row { max-width: 420px; width: 100%; }
}

/* ── Tablet and up — show centered mobile preview ─────── */
@media (min-width: 769px) {
  #desktopWarning { display: flex !important; }
  #app            { display: none !important; }
}

/* ── Safe area / notch handling (iOS) ─────────────────── */
@supports (padding-top: env(safe-area-inset-top)) {
  .site-header {
    padding-top: calc(20px + env(safe-area-inset-top));
  }
  .screen {
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
}

/* ── Landscape phones ──────────────────────────────────── */
@media (max-height: 640px) and (orientation: landscape) {
  .hero-banner   { height: 120px; }
  .hero-tagline  { font-size: 1.8rem; }
  .content-card  { padding: 20px 20px; }
  .field-group   { margin-bottom: 12px; }
  .field-input,
  .field-select  { padding: 10px 14px; }
  .btn-primary   { padding: 12px 20px; }
}

/* ── High-DPI / Retina ─────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .content-card {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
}

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Dark mode (already dark, but ensure consistency) ──── */
@media (prefers-color-scheme: light) {
  /* The microsite is intentionally dark-themed regardless of system preference */
  body { background: #0a0a0a; color: #f0f0f0; }
}