/**
 * Mobile compact layout — afripayfunnels.com (Launch / afh-premium)
 * Loaded via funnel-assets-head.php on sales-funnel pages.
 */

body.afh-premium {
  overflow-x: clip;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

body.afh-premium .container {
  width: min(1160px, calc(100% - max(20px, env(safe-area-inset-left) + env(safe-area-inset-right))));
}

@media (max-width: 768px) {
  body.afh-premium .afh-section {
    padding: 48px 0;
  }

  body.afh-premium .afh-three-steps {
    padding: 52px 0;
  }

  body.afh-premium .afh-flow-row {
    margin-bottom: 48px;
    gap: 28px;
  }

  body.afh-premium .afh-flow-visual {
    padding: 20px;
  }

  body.afh-premium .afh-compare-grid {
    gap: 16px;
  }

  body.afh-premium .afh-features-grid {
    gap: 14px;
  }

  body.afh-premium .afh-feature-card {
    padding: 18px 16px;
  }

  body.afh-premium .afh-pricing-card,
  body.afh-premium .afh-final-panel {
    padding: 24px 18px;
  }

  body.afh-premium .btn,
  body.afh-premium .btn-primary {
    min-height: 44px;
  }

  body.afh-premium .afh-flow-cta {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.afh-premium .afh-usp-sell-types .container {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  body.afh-premium .afh-usp-sell-grid-wrap {
    overflow-x: visible;
    width: 100%;
  }

  body.afh-premium .afh-usp-sell-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 12px;
  }

  body.afh-premium .afh-usp-sell-card__title {
    font-size: 0.88rem;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  body.afh-premium .afh-section-title {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem);
  }

  body.afh-premium .afh-section-sub {
    font-size: 0.95rem;
    margin-bottom: 24px;
  }

  body.afh-premium .afh-three-steps-header {
    margin-bottom: 40px;
  }

  body.afh-premium .afh-flow-copy h3 {
    font-size: clamp(1.35rem, 5vw, 1.85rem);
  }

  body.afh-premium .afh-hero-cta .btn {
    width: 100%;
  }

  body.afh-premium .afh-hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
}