/* ===== Mobile/UI Fixes v22 ===== */
@media (max-width: 900px) {
  h1, .h1, .hero h1, .hero-title, .headline-xl { font-size: clamp(24px, 6vw, 30px) !important; line-height: 1.25 !important; }
  .hero .subtitle, .subtitle, .lead { font-size: clamp(14px, 3.8vw, 17px) !important; line-height: 1.5 !important; }
  header, .header { background: #ffffff !important; }
  nav, .nav { display: block !important; background: #ffffff; border: 1px solid #f0f0f0; border-radius: 12px; padding: 8px 12px; margin-top: 8px; }
  nav ul, .nav ul { display: flex !important; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
  nav a, .nav a { display: inline-block; padding: 8px 12px; border-radius: 10px; border: 1px solid #eaeaea; text-decoration: none; }
  .cta, .btn, .button, .btn-primary, .cta-primary, .cta-lg, .primary-btn { display: block !important; width: 100% !important; padding: 14px 16px !important; font-size: 1rem !important; line-height: 1.2 !important; white-space: normal !important; max-width: 100% !important; }
  .container, .wrapper, .content, main, section { padding-left: 1rem !important; padding-right: 1rem !important; overflow: visible !important; }
  p { font-size: 15px; line-height: 1.6; } ul li { line-height: 1.6; }
}
.pricing, .pricing-section, .pricing-table, .plans, .plan-cards, .cards, .section-pricing { max-height: none !important; height: auto !important; overflow: visible !important; }
:target { scroll-margin-top: 80px; }


/* v29: tighten spacing for resources/tutorials section */
.resources-tight { padding-top: 14px !important; padding-bottom: 14px !important; margin-top: 8px !important; margin-bottom: 8px !important; }
.resources-tight h2, .resources-tight h3 { margin-top: 6px !important; margin-bottom: 10px !important; }


/* ===== v32 Mobile Fixes ===== */
@media (max-width: 900px) {
  header, .header { background: #ffffff !important; }
  nav, .nav { display: block !important; background: #ffffff !important; border: 1px solid #f0f0f0 !important; border-radius: 12px !important; padding: 8px 12px !important; margin-top: 8px !important; z-index: 1000 !important; }
  nav ul, .nav ul { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; }
  nav li, .nav li { list-style: none !important; }
  nav a, .nav a { display: block !important; color: #111 !important; background: #fff !important; border: 1px solid #eaeaea !important; border-radius: 10px !important; padding: 10px 12px !important; text-decoration: none !important; }
  nav a:hover, .nav a:hover { background: #f7f7f8 !important; }
}
#disclaimer, section#disclaimer { background: #f9fafb; border-top: 1px solid #eef0f3; padding: 14px 16px; color: #4b5563; line-height: 1.6; }
@media (max-width: 900px) {
  #disclaimer, section#disclaimer { padding: 12px 14px !important; font-size: 14px !important; text-align: left !important; }
  #disclaimer p, section#disclaimer p { margin: 8px 0 !important; }
}
footer .legal, .footer .legal, footer .footer-legal, .footer .footer-legal, footer .disclaimer, .footer .disclaimer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; color: #6b7280; }
footer small, .footer small { color: #6b7280; }
@media (max-width: 900px) { footer, .footer { text-align: center; } }
@media (max-width: 900px) { body { padding-bottom: max(84px, env(safe-area-inset-bottom)) !important; } }