/* STS AI Academy - public site mobile refinement (loaded after style.css) */
@media (max-width: 768px) {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  .container { width: 100%; max-width: 100%; min-width: 0; padding-inline: 16px; }

  .navbar, .nav-container { min-width: 0; }
  .nav-container { gap: 10px; padding-inline: 16px !important; }
  .logo-brand { min-width: 0; max-width: calc(100% - 58px); }
  .main-navbar-logo { max-width: 100%; object-fit: contain; }
  .mobile-menu-btn { flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .nav-menu { left: 0; right: 0; width: auto; padding: 16px; }
  .nav-links a, .nav-actions .btn { min-height: 44px; white-space: normal !important; }

  .hero, .hero-grid, .hero-content, .hero-img-wrapper { width: 100%; min-width: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-img-wrapper { max-width: 100% !important; }
  .hero-img-wrapper > div[style*="Courier New"] { width: 100%; min-width: 0; }
  .hero-img-wrapper > div[style*="Courier New"] > div:first-child {
    padding: 10px 12px !important; gap: 7px !important; flex-wrap: wrap;
  }
  .hero-img-wrapper > div[style*="Courier New"] > div:first-child > div:first-child {
    min-width: 0; gap: 5px !important;
  }
  .hero-img-wrapper > div[style*="Courier New"] > div:first-child > div:first-child > span:last-child {
    max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 5px !important;
  }
  .hero-img-wrapper > div[style*="Courier New"] > div:first-child > div:last-child { font-size: .66rem !important; }
  .hero-img-wrapper > div[style*="Courier New"] > div[style*="padding:22px"] {
    padding: 16px 13px !important; font-size: .73rem !important; line-height: 1.6 !important; overflow-x: auto !important;
  }
  .hero-img-wrapper > div[style*="Courier New"] > div[style*="padding:22px"] > div { min-width: max-content; }
  .hero-img-wrapper > div[style*="Courier New"] > div:last-child {
    padding: 10px 12px !important; gap: 8px; flex-wrap: wrap; font-size: .68rem !important;
  }
  .hero-img-wrapper > div[style*="position:absolute"] {
    inset-inline-end: 8px !important; bottom: -13px !important; max-width: calc(100% - 16px); padding: 9px 11px !important; gap: 8px !important;
  }
  .hero-img-wrapper > div[style*="position:absolute"] > div:first-child { flex: 0 0 34px; width: 34px !important; height: 34px !important; }

  .hero + div .container > div { display: grid !important; grid-template-columns: minmax(0, 1fr); justify-content: stretch !important; gap: 12px !important; }
  .hero + div .container > div > div { justify-content: flex-start !important; min-width: 0; }

  #programs .container > div[style*="grid-template-columns"],
  #pricing div[style*="minmax(320px"] { grid-template-columns: minmax(0, 1fr) !important; }
  #programs .service-card, #pricing [style*="minmax(320px"] > div { min-width: 0; }
  #pricing [style*="minmax(320px"] > div { padding: 24px 18px !important; }
  #pricing > .container { padding-inline: 16px; }
  #pricing .billing-switcher-wrapper { display: flex !important; width: 100% !important; }
  #pricing .billing-switcher-wrapper button { min-height: 44px; }
  #pricing a[style*="display:block"] { display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px; width: 100%; }

  #fullComparisonSection { width: 100%; max-width: 100% !important; margin-top: 34px !important; }
  #fullComparisonSection h3 { font-size: 1.18rem !important; line-height: 1.5; }
  .table-responsive-touch { width: 100% !important; max-width: 100% !important; overscroll-behavior-x: contain; }
  .table-responsive-touch > div { min-width: 640px; }

  .footer, footer { overflow-wrap: anywhere; }
  .footer a, footer a, .footer-social a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-social a { min-width: 44px; justify-content: center; }
}

@media (max-width: 390px) {
  .container { padding-inline: 14px; }
  .nav-container { padding-inline: 14px !important; }
  .main-navbar-logo { height: 52px !important; }
  .hero-img-wrapper > div[style*="Courier New"] > div:first-child > div:first-child > span:last-child { max-width: 106px; }
  .hero-img-wrapper > div[style*="Courier New"] > div[style*="padding:22px"] { font-size: .68rem !important; }
  #pricing [style*="minmax(320px"] > div { padding: 22px 15px !important; }
}