/* Shared mobile-first hardening for the public site and authenticated app. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, iframe { max-width: 100%; }

@media (max-width: 760px) {
  html, body { width: 100%; min-width: 0; }
  .app-shell, .main-area, .page-container, .page-header, .panel,
  .billing-grid, .billing-card, .plan-current-banner,
  .affiliate-growth-panel, .affiliate-hero, .affiliate-action-grid,
  .affiliate-performance-grid, .plan-comparison-panel {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* iPhone/PWA: keep navigation below the native status bar and make the
     hamburger/bell large enough to tap reliably in standalone mode. */
  .main-area { width: 100%; min-height: 100dvh; overflow-x: hidden; }
  .mobile-topbar {
    box-sizing: border-box;
    height: calc(58px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(58px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }
  .mobile-topbar .icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
    touch-action: manipulation;
  }
  .mobile-topbar .brand-lockup { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .mobile-topbar .brand-logo-mobile { max-height: 34px; width: auto; }

  .sidebar {
    box-sizing: border-box;
    height: 100dvh;
    max-height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sidebar-brand .icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
  .sidebar-nav { min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .sidebar-footer { padding-bottom: max(11px, env(safe-area-inset-bottom, 0px)); }

  .page-container {
    width: 100%;
    padding: 18px 12px calc(38px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: clip;
  }
  .page-header { width: 100%; gap: 12px; }
  .page-header > * { min-width: 0; max-width: 100%; }
  .page-header h1 { font-size: clamp(25px, 8vw, 31px); overflow-wrap: anywhere; }
  .page-header p { max-width: 100%; }

  .plans-page-header .region-price-pill,
  .plan-current-actions .region-price-pill {
    width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
    line-height: 1.35;
    padding: 9px 12px;
  }

  .plan-current-banner { width: 100%; padding: 18px 16px !important; }
  .plan-current-banner h2 { font-size: 25px !important; }
  .plan-current-actions { width: 100%; }
  .plan-current-actions .button { width: 100%; }

  .annual-note { padding-inline: 4px; font-size: 12px !important; }
  .billing-grid { width: 100%; grid-template-columns: 1fr !important; gap: 12px !important; }
  .billing-card { width: 100%; min-height: 0 !important; padding: 18px 16px !important; border-radius: 15px !important; }
  .billing-card h2 { font-size: 30px !important; }
  .billing-card > p { min-height: 0 !important; }
  .billing-card ul { margin-bottom: 18px !important; }
  .billing-card li { align-items: flex-start; overflow-wrap: anywhere; }
  .billing-card .button { white-space: normal; min-height: 44px; line-height: 1.25; text-align: center; }

  .plan-comparison-panel { width: 100%; overflow: hidden !important; }
  .plan-compare { width: 100%; max-width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .plan-compare > div { min-width: 590px; }

  .affiliate-hero, .affiliate-action-grid { grid-template-columns: 1fr !important; }
  .affiliate-hero { padding: 20px 15px !important; }
  .affiliate-performance-grid { grid-template-columns: 1fr 1fr !important; padding: 12px !important; }
  .affiliate-action-grid { padding: 12px !important; }
  .affiliate-link-box, .affiliate-link-box-hero { min-width: 0; max-width: 100%; }
  .affiliate-link-box input { width: 100%; min-width: 0; }

  .onboarding-plan-overlay { padding: 0 !important; align-items: stretch !important; }
  .onboarding-plan-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: 16px 12px !important;
    padding-top: max(16px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .onboarding-plan-head { gap: 10px !important; }
  .onboarding-plan-head h2 { font-size: 23px !important; }
  .onboarding-plan-frame { display: block; width: 100% !important; min-width: 0 !important; height: 68dvh; border: 0; }
  .onboarding-plan-footer { gap: 10px !important; }

  /* Public site: never let desktop mockups or pricing tables widen the viewport. */
  .public-body, .public-body main, .lp-wrap, .lp-section, .hero-grid,
  .product-stage, .price-grid, .plan-compare, .integration-shell,
  .final-card, .footer-grid { min-width: 0 !important; max-width: 100% !important; }
  .lp-wrap { width: calc(100% - 28px) !important; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-copy, .hero-copy > * { max-width: 100%; }
  .email-box, .email-box input, .email-box .lp-btn { max-width: 100%; }
  .price-grid { grid-template-columns: 1fr !important; width: 100%; }
  .price-grid > article { width: 100%; min-width: 0; }
  .pricing .plan-compare { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .pricing .plan-compare > div { min-width: 600px; }
}

@media (max-width: 520px) {
  .page-container { padding-inline: 10px !important; }
  .affiliate-performance-grid { grid-template-columns: 1fr !important; }
  .onboarding-plan-modal { padding-inline: 10px !important; }
  .onboarding-plan-frame { height: 70dvh; }
  .lp-wrap { width: calc(100% - 24px) !important; }
}