/* Mobile overrides — loaded via media="(max-width: 768px)", no @media wrapper needed.
   styles.css already has @media breakpoints for layout. This file adds extra
   mobile-specific tweaks that stack on top. */

/* Prevent iOS auto-zoom on input focus */
input, select, textarea { font-size: 16px !important; }

/* Full-width buttons on mobile */
.btn-large { width: 100%; }

/* Sticky mobile CTA bar */
.mobile-cta-bar {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-dark-deep);
  padding: 0.75rem var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.1);
  z-index: 999;
  text-align: center;
}

.mobile-cta-bar .btn {
  width: 100%;
  font-size: 0.95rem;
  padding: 0.8rem;
}

/* Add bottom padding to body so footer isn't hidden behind sticky CTA */
body { padding-bottom: 70px; }

/* Reduce section padding on mobile */
.section { padding: 2.5rem 0; }
.cta-section { padding: 2rem 0; }

/* Tighter card padding */
.card { padding: 1.5rem; }
.usp-card { padding: 1.5rem; }
.feature-card { padding: 1.5rem; }
.tutor-card { padding: 1.5rem; }
.review-card { padding: 1.25rem; }

/* Tutor photo slightly smaller */
.tutor-photo { width: 100px; height: 100px; }

/* Trust bar tighter */
.trust-bar { padding: 0.75rem 0; }

/* Contact info card full width */
.contact-info-card { margin-top: var(--space-md); }

/* Pricing card full width */
.pricing-card { padding: var(--space-lg); }

/* Platform screenshots — tighter on mobile */
.platform-screenshot-frame { border-radius: 8px; }
.screenshot-dots { padding: 7px 10px; }
.screenshot-dots span { width: 8px; height: 8px; }

/* About hero photo */
.about-hero-photo { border-radius: 8px; }