/* =====================================================
   GTG MOBILE SALES / UPGRADE / TRANSFER
   ===================================================== */

@media (max-width: 768px) {
  .container {
    padding: 12px !important;
    max-width: 100% !important;
    margin: 20px auto !important;
  }

  .page-header {
    text-align: left !important;
  }

  .page-header h1 {
    font-size: 1.5em !important;
    line-height: 1.15 !important;
  }

  .gold-ticker {
    padding: 10px !important;
    font-size: 0.9em !important;
  }

  .claim-highlight {
    padding: 14px !important;
    font-size: 0.95em !important;
    line-height: 1.4 !important;
  }

  .benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .comparison-table {
    display: block !important;
    overflow-x: auto !important;
  }

  .payment-section,
  .payment-form,
  .price-ticker,
  .transfer-section,
  .notes-section {
    padding: 14px !important;
  }

  .payment-form input,
  .payment-form select,
  .payment-form button,
  .form-select,
  .form-input,
  .submit-btn {
    width: 100% !important;
  }

  .header {
    margin: 12px !important;
    padding: 18px 14px !important;
  }

  .header-center {
    position: static !important;
    text-align: left !important;
  }

  .header-actions {
    position: static !important;
    transform: none !important;
    margin-top: 12px !important;
    width: 100% !important;
  }

  .header-actions .back-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  .header h1 {
    font-size: 1.55em !important;
    line-height: 1.15 !important;
  }

  .header p {
    font-size: 0.9em !important;
    line-height: 1.3 !important;
    margin-top: 6px !important;
  }

  .balance-section {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
  }

  .balance-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px 14px !important;
  }

  .balance-amount {
    font-size: 1.5em !important;
    line-height: 1.15 !important;
  }

  .gold-breakdown {
    gap: 10px !important;
  }

  .direction-selector {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .direction-btn {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 1.35em !important;
  }

  .gold-ticker {
    font-size: 0.85em !important;
  }

  .header {
    margin: 10px !important;
    padding: 14px 12px !important;
  }

  .header h1 {
    font-size: 1.38em !important;
  }

  .balance-card,
  .price-ticker,
  .transfer-section,
  .notes-section {
    padding: 12px !important;
  }

  .balance-amount {
    font-size: 1.3em !important;
  }
}
/* =====================================================
   CONVERT BITS PAGE MOBILE TUNE
   ===================================================== */

@media (max-width: 768px) {
  .header {
    margin: 12px !important;
    padding: 18px 14px !important;
  }

  .header-center {
    position: static !important;
    text-align: left !important;
  }

  .header-actions {
    position: static !important;
    transform: none !important;
    margin-top: 12px !important;
    width: 100% !important;
  }

  .header .back-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  .header h1 {
    font-size: 1.5em !important;
    line-height: 1.15 !important;
  }

  .header p {
    font-size: 0.9em !important;
    line-height: 1.3 !important;
    margin-top: 6px !important;
  }

  .container {
    align-items: stretch !important;
    padding: 12px !important;
  }

  .card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 14px !important;
    text-align: center !important;
  }

  .status,
  .info-box,
  .contact-info {
    padding: 14px !important;
    margin: 18px 0 !important;
  }

  .status h2,
  .info-box h3 {
    line-height: 1.2 !important;
  }

  .status p,
  .info-box li,
  .contact-info p {
    line-height: 1.45 !important;
  }

  #bitsToConvert {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* action buttons row under conversion */
  .card > div[style*="display:flex"][style*="justify-content:center"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    justify-content: stretch !important;
  }

  .card > div[style*="display:flex"][style*="justify-content:center"] .back-btn,
  .card > div[style*="display:flex"][style*="justify-content:center"] button {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* recent conversions rows */
  .activity-item {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    align-items: start !important;
  }

  .activity-amount {
    white-space: normal !important;
    text-align: left !important;
  }

  .view-all-link a,
  .back-link a {
    display: inline-block;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .header {
    margin: 10px !important;
    padding: 14px 12px !important;
  }

  .header h1 {
    font-size: 1.35em !important;
  }

  .card,
  .status,
  .info-box,
  .contact-info {
    padding: 12px !important;
  }

  .icon {
    font-size: 56px !important;
    margin-bottom: 12px !important;
  }
}
/* =====================================================
   HOW MYPOG WORKS MOBILE TUNE
   ===================================================== */

@media (max-width: 768px) {
  .gold-ticker {
    padding: 10px 12px !important;
    align-items: flex-start !important;
  }

  .ticker-item {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .header {
    position: relative !important;
    padding: 18px 14px !important;
    text-align: left !important;
  }

  .header .back-btn {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    text-align: center !important;
  }

  .logo-text {
    font-size: 1.5em !important;
    line-height: 1.15 !important;
  }

  .tagline {
    font-size: 0.95em !important;
    line-height: 1.3 !important;
    margin-top: 8px !important;
  }

  .container {
    max-width: 100% !important;
    padding: 18px 10px !important;
  }

  .page-title {
    font-size: 2em !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
  }

  .page-subtitle {
    font-size: 1.1em !important;
    line-height: 1.3 !important;
    margin-bottom: 22px !important;
  }

  .hero-section,
  .what-section,
  .benefits-section,
  .signup-section,
  .ladder-section,
  .cta-section {
    padding: 16px !important;
    margin-bottom: 20px !important;
  }

  .hero-section h2,
  .what-section h2,
  .income-section h2,
  .benefits-section h2,
  .signup-section h2,
  .ladder-section h2,
  .cta-section h2 {
    font-size: 1.45em !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }

  .hero-section p,
  .what-section p,
  .cta-section p,
  .ladder-note {
    font-size: 0.98em !important;
    line-height: 1.55 !important;
  }

  .income-grid,
  .benefits-list,
  .cta-actions {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .income-card,
  .benefit-item {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
  }

  .income-number {
    font-size: 2.2em !important;
  }

  .learn-more-btn,
  .cta-btn,
  .signup-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .price-large {
    font-size: 3em !important;
  }

  .signup-form {
    max-width: 100% !important;
    width: 100% !important;
    padding: 16px !important;
  }

  .form-input {
    width: 100% !important;
  }

  .card-group {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .back-link a {
    display: inline-block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 14px 8px !important;
  }

  .header {
    padding: 14px 12px !important;
  }

  .logo-text {
    font-size: 1.3em !important;
  }

  .tagline {
    font-size: 0.88em !important;
  }

  .hero-section,
  .what-section,
  .benefits-section,
  .signup-section,
  .ladder-section,
  .cta-section,
  .signup-form,
  .income-card,
  .benefit-item {
    padding: 12px !important;
  }

  .page-title {
    font-size: 1.7em !important;
  }

  .price-large {
    font-size: 2.4em !important;
  }
}