/* Portrait-safe overrides for marketing pages — desktop layout unchanged above 900px. */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

.hero-inner,
.hero-main,
.quality-grid,
.cert-grid,
.interest-inner,
.grid,
.strip-inner,
.onboard-grid,
.leads-grid,
.rha-stats,
.agent-phone-wrap,
.baa-layout,
.row2,
.row3,
.form-row,
.how-grid,
.lead-grid,
.pricing-grid,
.agent-grid,
.rha-grid,
.what-grid,
.stats-grid,
.erlanger-inner,
.problem-grid,
.flow-steps,
.market-grid,
.revenue-grid,
.stars-grid,
.status-grid,
.founder-inner,
.pain-grid,
.solution-grid,
.compare-grid,
.brief-grid,
.hero-settings,
.ph-member,
.ph-agent-btns,
.ap-actions {
  min-width: 0;
}

@media (max-width: 900px) {
  nav {
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
    height: auto !important;
    min-height: 60px;
    flex-wrap: wrap !important;
    gap: 8px;
    row-gap: 6px;
  }

  .nav-brand {
    font-size: 16px !important;
    line-height: 1.25;
    max-width: 100%;
  }

  .nav-back {
    width: 100% !important;
    order: 3;
    font-size: 12px !important;
    padding-bottom: 4px;
  }

  section,
  .hero,
  .strip,
  .interest-section,
  footer,
  .wrap,
  .inner,
  .founder-strip,
  .page-header {
    padding-left: max(24px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(24px, env(safe-area-inset-right, 0px)) !important;
  }

  .hero {
    min-height: auto !important;
    padding-top: 88px !important;
    padding-bottom: 48px !important;
  }

  .hero-inner,
  .hero-main,
  .quality-grid,
  .cert-grid,
  .interest-inner,
  .onboard-grid,
  .leads-grid,
  .grid,
  .baa-layout,
  .how-grid,
  .lead-grid,
  .pricing-grid,
  .agent-grid,
  .rha-grid,
  .what-grid,
  .market-grid,
  .revenue-grid,
  .stars-grid,
  .status-grid,
  .founder-inner,
  .erlanger-inner,
  .pain-grid,
  .solution-grid,
  .compare-grid,
  .brief-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .strip-inner,
  .stats-grid,
  .problem-grid,
  .flow-steps,
  .hero-settings {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .rha-stats {
    grid-template-columns: 1fr !important;
  }

  .form-row,
  .row2,
  .row3 {
    grid-template-columns: 1fr !important;
  }

  .hero-title,
  .hero-concept {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.15 !important;
  }

  .hero-lede {
    font-size: clamp(17px, 4.5vw, 22px) !important;
  }

  .sec-title {
    font-size: clamp(26px, 6.5vw, 34px) !important;
  }

  .closing-statement {
    font-size: clamp(22px, 5.5vw, 30px) !important;
  }

  .hero-sub,
  .hero-body,
  .sec-body {
    max-width: none !important;
  }

  .hero-right {
    padding: 28px 24px !important;
  }

  .phone-frame,
  .agent-phone-frame {
    width: min(300px, 100%) !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .agent-phone-wrap {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    justify-content: center;
  }

  .epic-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }

  .epic-frame {
    max-width: 100% !important;
  }

  .epic-callout-arrow {
    display: none !important;
  }

  .epic-referral-panel {
    position: static !important;
    margin: 16px auto 0 !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .hero-inner > [style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-top: 32px !important;
  }

  footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px;
    text-align: left !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  footer p {
    line-height: 1.5;
  }

  .footer-legal {
    display: block;
    margin-top: 6px;
  }

  .page-header {
    padding-top: 88px !important;
    padding-bottom: 40px !important;
  }

  .page-header h1 {
    font-size: clamp(28px, 7vw, 36px) !important;
  }

  .content-wrap {
    padding: 40px max(20px, env(safe-area-inset-left, 0px)) 72px !important;
  }

  .dev-notice {
    padding: 10px 16px !important;
    font-size: 11px !important;
  }

  .interest-section {
    padding-bottom: 56px !important;
  }

  .founder-inner {
    text-align: left;
  }

  .founder-initial {
    margin: 0 auto;
  }

  .shell {
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
  }

  .card,
  .panel {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (max-width: 480px) {
  .nav-brand .nav-bug {
    width: 28px;
    height: 28px;
  }

  .hero-settings {
    grid-template-columns: 1fr;
  }

  .strip-num {
    font-size: clamp(32px, 10vw, 44px);
  }
}