/* ===================================
   Responsive Design - Mobile First
   =================================== */

/* ===================================
   Small Tablets (640px+)
   =================================== */
@media (min-width: 640px) {
  .hero {
    padding: 3rem 0;
  }

  .logo-combo__mark {
    width: 80px;
    height: 80px;
  }

  .mockup-placeholder--feature {
    max-width: 240px;
  }

  .phone-mockup--feature {
    max-width: 200px;
  }

  .beta-form__input-group {
    flex-direction: row;
  }

  .beta-form__input {
    flex: 1;
  }

  .beta-form .btn {
    flex-shrink: 0;
  }
}

/* ===================================
   Tablets (768px+)
   =================================== */
@media (min-width: 768px) {
  :root {
    --container-padding: 2rem;
  }

  /* Navbar Desktop Styles */
  .navbar__actions {
    display: block;
  }

  .navbar__toggle {
    display: none;
  }

  .navbar__menu {
    display: none !important;
  }

  /* Hero Styles */
  .hero__content {
    grid-template-columns: 1.2fr 1fr;
  }

  .hero__text {
    text-align: left;
  }

  .hero__tagline {
    text-align: left;
  }

  .hero__features-tagline {
    text-align: left;
  }

  .hero__description {
    margin-left: 0;
    margin-right: 0;
  }

  .hero__cta-group {
    flex-direction: row;
    justify-content: flex-start;
  }

  .feature-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .phone-mockup--feature {
    max-width: 240px;
  }

  .feature-row--reverse {
    direction: rtl;
  }

  .feature-row--reverse > * {
    direction: ltr;
  }

  .footer__links {
    gap: var(--space-xl);
  }
}

/* ===================================
   Laptops (1024px+)
   =================================== */
@media (min-width: 1024px) {
  .hero {
    padding: 4rem 0;
  }

  .hero__mockup {
    max-width: 300px;
  }

  .feature-showcase {
    gap: var(--space-3xl);
  }

  .feature-row {
    padding: var(--space-lg) 0;
  }

  .phone-mockup--feature {
    max-width: 260px;
  }

  .mockup-placeholder--feature {
    max-width: 320px;
  }
}

/* ===================================
   Desktops (1280px+)
   =================================== */
@media (min-width: 1280px) {
  :root {
    --container-padding: 3rem;
  }
}

/* ===================================
   Reduced Motion Preference
   =================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================================
   Print Styles
   =================================== */
@media print {
  .beta-signup,
  .download {
    display: none;
  }

  .hero,
  .features {
    page-break-inside: avoid;
  }
}