/**
 * Mobile open layout — generous typography, spacing, and tap targets on small screens.
 * Loaded last on marketing, app, dashboard, and auth pages. Desktop unchanged.
 */
@media (max-width: 900px) {
  :root {
    --ux-btn-min-h: 52px;
    --ux-space-section-y: 3.5rem;
    --ux-space-card: 1.75rem;
    --space-section-y: 3.5rem;
    --text-body: 1.0625rem;
    --text-h1: 2.35rem;
    --text-h2: 1.85rem;
    --text-h3: 1.35rem;
    --text-caption: 0.9375rem;
    --lh-body: 1.65;
    --ux-nav-drawer-w: min(100vw, 340px);
  }

  body {
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
  }

  /* ---- Marketing nav ---- */
  body > nav {
    padding: 0.75rem 6% !important;
  }

  .nav-logo img {
    height: 40px !important;
    width: 40px !important;
  }

  .nav-logo h1 {
    font-size: 1.25rem !important;
  }

  body > main {
    padding-top: 72px !important;
  }

  .mobile-menu-toggle {
    min-width: 52px !important;
    min-height: 52px !important;
    font-size: 1.35rem !important;
  }

  .nav-links.ux-nav-drawer {
    padding: 5rem 1.5rem 1.75rem !important;
    width: var(--ux-nav-drawer-w) !important;
  }

  .nav-links.ux-nav-drawer a {
    min-height: 52px !important;
    font-size: 1.0625rem !important;
    padding: 0.65rem 0.85rem !important;
  }

  /* ---- Type ---- */
  h1, .ux-h1 {
    font-size: 2.35rem !important;
    line-height: 1.15 !important;
    margin-bottom: 0.75rem !important;
  }

  h2, .ux-h2 {
    font-size: 1.85rem !important;
    line-height: 1.22 !important;
  }

  h3, .ux-h3 {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
  }

  p, li {
    line-height: 1.65 !important;
  }

  .section-header,
  .ux-section-header {
    margin-bottom: 2rem !important;
  }

  .section-header p,
  .ux-section-header p {
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
  }

  .text-small, .ux-meta, small.ux-meta {
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
  }

  .ux-eyebrow {
    font-size: 0.8125rem !important;
    padding: 0.35rem 1rem !important;
    margin-bottom: 0.85rem !important;
  }

  /* ---- Sections (wide horizontal padding = open feel) ---- */
  section {
    padding: 3.5rem 6% !important;
  }

  section.ux-section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  section.landing-hero,
  section.landing-hero.ux-hero-light,
  .landing-hero.ux-hero-light {
    padding-top: 2.5rem !important;
    padding-bottom: 2rem !important;
  }

  section.stats-strip {
    padding: 2.5rem 6% !important;
    margin: 2rem 0 !important;
  }

  section[style*="padding"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    padding-left: 6% !important;
    padding-right: 6% !important;
  }

  /* ---- Buttons ---- */
  .primary-btn,
  .secondary-btn,
  body > main .primary-btn,
  nav .cta-primary,
  .plan-cta.primary-btn,
  body > main .secondary-btn,
  .ux-btn-ghost,
  .plan-cta {
    min-height: 52px !important;
    padding: 0.85rem 1.75rem !important;
    font-size: 1.0625rem !important;
    border-radius: 14px !important;
  }

  .landing-hero .hero-cta-primary {
    min-height: 52px !important;
    padding: 0.9rem 1.75rem !important;
    font-size: 1.0625rem !important;
  }

  .hero-ghost-link {
    font-size: 1rem !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .cta-stack {
    gap: 1rem !important;
  }

  /* ---- Cards & grids ---- */
  .ux-card,
  .feature-card,
  .pricing-card {
    padding: 1.75rem 1.5rem !important;
    border-radius: 20px !important;
  }

  .feature-grid,
  .grid-features,
  .grid-metrics,
  .grid-pricing,
  .landing-steps-grid,
  .landing-niche-grid,
  .stats-grid {
    gap: 1.75rem !important;
  }

  .feature-icon {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.5rem !important;
    margin-bottom: 1.15rem !important;
  }

  .stat-card {
    padding: 2rem 1.5rem !important;
    border-radius: 20px !important;
  }

  .stat-card .stat-number,
  .stat-card strong {
    font-size: 2.25rem !important;
  }

  .stat-card .stat-label,
  .stat-card span {
    font-size: 0.9375rem !important;
    margin-top: 0.5rem !important;
  }

  .landing-steps-grid > div {
    padding: 2rem 1.65rem !important;
    border-radius: 20px !important;
  }

  .landing-steps-grid > div h3 {
    font-size: 1.25rem !important;
    margin-bottom: 0.75rem !important;
  }

  .landing-steps-grid > div p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  .landing-steps-grid > div [style*="56px"] {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 1.15rem !important;
  }

  .landing-steps-grid > div i[style*="1.5rem"] {
    font-size: 1.5rem !important;
  }

  .niche-card {
    padding: 1.75rem 1.35rem !important;
    border-radius: 20px !important;
    font-size: 1.0625rem !important;
  }

  .niche-card-desc {
    font-size: 0.9375rem !important;
    margin-top: 0.35rem !important;
  }

  /* ---- Hero ---- */
  .landing-hero h1,
  .landing-hero h1#abHeroHeadline,
  .landing-hero h1#abHeroHeadline.ux-h1,
  .landing-hero .hero-content--cinematic h1#abHeroHeadline.ux-h1 {
    font-size: 2.35rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.12 !important;
  }

  .landing-hero .subtitle {
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
  }

  .landing-hero .description {
    font-size: 1.0625rem !important;
    margin-bottom: 1.75rem !important;
    line-height: 1.65 !important;
  }

  .hero-feature-strip {
    gap: 0.85rem !important;
    font-size: 0.9375rem !important;
  }

  /* ---- Pricing ---- */
  #pricing .pricing-card {
    padding: 1.75rem 1.25rem !important;
  }

  #pricing .pricing-price,
  .pricing-price {
    font-size: 3.25rem !important;
  }

  .ux-plan-bullets {
    font-size: 0.9375rem !important;
  }

  .ux-plan-bullets li {
    margin-bottom: 0.5rem !important;
  }

  /* ---- Without/With, footer ---- */
  .without-with-section {
    padding: 3.5rem 6% !important;
  }

  .without-with-grid {
    gap: 2rem !important;
    margin-top: 2.5rem !important;
  }

  .without-col,
  .with-col {
    padding: 2rem 1.65rem !important;
  }

  footer {
    padding: 3rem 6% !important;
  }

  footer .footer-section h3 {
    font-size: 1.125rem !important;
    margin-bottom: 0.75rem !important;
  }

  footer .footer-section p,
  footer .footer-section a {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  footer .footer-grid {
    gap: 2rem !important;
  }

  /* ---- Ticker ---- */
  .ticker-mobile-list li {
    font-size: 1rem !important;
    padding: 0.85rem 0 !important;
    line-height: 1.55 !important;
  }

  .ticker-label {
    font-size: 0.9375rem !important;
    padding: 0.85rem 1.15rem !important;
  }

  section[style*="padding"] p[style*="1.15rem"],
  section[style*="padding"] p[style*="1.08rem"],
  section[style*="padding"] p[style*="1.2rem"],
  section[style*="padding"] p[style*="1.1rem"] {
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
    margin-bottom: 1.25rem !important;
  }

  section[style*="padding"] h3[style*="1.4rem"],
  section[style*="padding"] h3[style*="1.25rem"] {
    font-size: 1.35rem !important;
    margin-bottom: 0.75rem !important;
  }

  div[style*="margin-bottom: 4rem"] {
    margin-bottom: 3rem !important;
  }

  a[style*="padding: 2.4rem"] {
    padding: 2rem 1.75rem !important;
  }
}

/* =============================================================================
   APP / DASHBOARD — open spacing
   ============================================================================= */
@media (max-width: 900px) {
  .mobile-topbar {
    height: 60px !important;
    padding: 0 16px !important;
    gap: 14px !important;
  }

  .mobile-hamburger {
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
  }

  .mobile-topbar-logo {
    height: 34px !important;
    width: 34px !important;
  }

  .mobile-topbar-title {
    font-size: 17px !important;
  }

  .main,
  .main-content,
  main.main {
    padding: 20px 16px !important;
  }

  .sidebar {
    padding: 28px 22px 24px !important;
    gap: 24px !important;
  }

  .sidebar-inner {
    gap: 24px !important;
  }

  .sidebar-logo,
  .sidebar-logo-link img {
    max-height: 40px !important;
  }

  .sidebar-link {
    min-height: 52px !important;
    padding: 12px 14px !important;
    font-size: 1.0625rem !important;
    border-radius: 12px !important;
  }

  .sidebar-section-title {
    font-size: 0.8125rem !important;
    padding: 8px 12px !important;
  }

  .dashboard-page-header,
  .page-header {
    padding: 20px 18px !important;
    margin-bottom: 20px !important;
    gap: 16px !important;
    border-radius: 18px !important;
  }

  .dashboard-greeting,
  .page-title {
    font-size: 1.625rem !important;
  }

  .dashboard-subtitle,
  .page-subtitle,
  .page-intro {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  .dashboard-meta-pill,
  .dashboard-tier-badge {
    font-size: 0.9375rem !important;
    padding: 8px 14px !important;
  }

  .card {
    padding: 24px 20px !important;
    margin-bottom: 24px !important;
    border-radius: 18px !important;
  }

  .card h2,
  .card-header h2 {
    font-size: 1.25rem !important;
    margin-bottom: 0.65rem !important;
  }

  .card-subtitle,
  .section-help {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  .start-here-strip {
    padding: 20px 18px !important;
    margin-bottom: 24px !important;
    gap: 14px !important;
  }

  .start-here-strip h2 {
    font-size: 1.125rem !important;
  }

  .feed-grid {
    gap: 24px !important;
    margin-bottom: 28px !important;
  }

  .feed-section {
    padding: 24px 20px !important;
    border-radius: 18px !important;
  }

  .feed-header {
    margin-bottom: 18px !important;
    gap: 14px !important;
  }

  .feed-header h2 {
    font-size: 1.125rem !important;
  }

  .feed-header button,
  .feed-header select {
    padding: 10px 16px !important;
    font-size: 0.9375rem !important;
    min-height: 48px !important;
  }

  .feed-list,
  .notification-list {
    gap: 16px !important;
    max-height: 520px !important;
  }

  .feed-empty,
  .feed-item,
  .notification-item {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .dashboard-advanced-section > summary {
    padding: 16px 18px !important;
    font-size: 1.0625rem !important;
    min-height: 52px !important;
  }

  .dashboard-advanced-inner {
    padding: 0 16px 20px !important;
  }

  .banner-pill {
    padding: 16px 18px !important;
    gap: 14px !important;
  }

  .banner-pill-title {
    font-size: 1rem !important;
  }

  .banner-pill-sub {
    font-size: 0.9375rem !important;
  }

  #roi-stats-grid {
    gap: 16px !important;
  }

  .roi-stat-card,
  #roi-stats-grid > div {
    padding: 18px 14px !important;
  }

  .roi-stat-card [style*="1.5rem"],
  #roi-stats-grid [style*="1.5rem"] {
    font-size: 1.75rem !important;
  }

  .roi-stat-card [style*="0.75rem"],
  #roi-stats-grid [style*="0.75rem"] {
    font-size: 0.9375rem !important;
  }

  .btn {
    padding: 12px 22px !important;
    font-size: 1rem !important;
    min-height: 52px !important;
  }

  button,
  .pill,
  .chip {
    min-height: 48px !important;
    font-size: 1rem !important;
  }

  .form-row {
    gap: 16px !important;
    margin-bottom: 18px !important;
  }

  .form-row label,
  .field-group label {
    font-size: 1rem !important;
  }

  .app-input,
  .app-select,
  .input,
  .select,
  .main input[type="text"],
  .main input[type="number"],
  .main input[type="tel"],
  .main input[type="email"],
  .main input[type="password"],
  .main select,
  .main textarea {
    min-height: 52px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
  }

  table.responsive-table {
    font-size: 0.9375rem !important;
  }

  table.responsive-table th,
  table.responsive-table td {
    padding: 12px 14px !important;
  }

  .listings-grid,
  .results-grid,
  .cards-grid,
  .grid-3,
  .grid-4 {
    gap: 20px !important;
  }

  .listing-modal-content,
  .modal-content {
    padding: 20px !important;
  }

  .listing-modal-title {
    font-size: 1.25rem !important;
  }

  .pill-tabs > *,
  .tab-list > * {
    font-size: 0.9375rem !important;
    padding: 10px 16px !important;
    min-height: 48px !important;
  }
}

/* Auth pages */
@media (max-width: 900px) {
  .login-box,
  .verify-box,
  .container {
    padding: 2.5rem 2rem !important;
    max-width: min(100%, 440px) !important;
  }

  .login-box h2,
  .verify-box h2,
  .container h1 {
    font-size: 1.75rem !important;
    margin-bottom: 1.5rem !important;
  }

  .login-logo,
  .verify-box .logo {
    max-width: 240px !important;
  }

  input[type="text"],
  input[type="password"],
  input[type="email"] {
    min-height: 52px !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
  }

  button[type="submit"] {
    min-height: 52px !important;
    padding: 14px 20px !important;
    font-size: 1.0625rem !important;
  }

  .login-footer a {
    min-height: 52px !important;
    line-height: 52px !important;
    font-size: 1rem !important;
  }

  .form-field {
    margin-bottom: 16px !important;
  }

  .form-field label {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
  }
}