/* ============================================================
   Mobile layer for the marketing page.
   Load AFTER css/landing.css. Everything is inside media queries,
   so the desktop layout is unchanged.

   Root cause of the "text touches the screen edge" bug:
   <div class="container hero-content"> — landing.css sets
   .hero-content { padding: 40px 0 }, which cancels the 24px side
   padding that .container provides. Below ~720px the box fills the
   screen with zero inner padding.
   ============================================================ */

/* ---------- laptop / tablet ---------- */
@media (max-width: 1100px) {
  .section-title { font-size: 56px; }
}

/* ---------- phone + small tablet ---------- */
@media (max-width: 820px) {

  /* ----- hero ----- */
  .hero {
    min-height: 100vh;
    min-height: 100svh;               /* don't hide under mobile browser bars */
    padding-top: 96px;                /* clears the fixed navbar (56px logo + padding) */
    padding-bottom: 56px;
  }
  .hero .hero-content {
    width: 100%;
    padding: 24px 20px;               /* the missing side padding */
  }
  .hero h1 {
    font-size: clamp(28px, 8.6vw, 44px);
    line-height: 1.12;
    overflow-wrap: break-word;
  }
  .hero p {
    font-size: 17px;
    line-height: 1.55;
    margin-bottom: 26px;
  }
  .hero-stats {
    margin-top: 32px;
    gap: 10px 20px;
    font-size: 13px;
  }

  /* ----- navbar ----- */
  .logo img { height: 40px; }
  .navbar .container { padding-left: 20px; padding-right: 20px; }
  .hamburger { padding: 8px; margin-right: -8px; }
  .nav-links.open { padding-bottom: 20px; }

  /* ----- sections ----- */
  .container { padding-left: 20px; padding-right: 20px; }
  section,
  #features,
  .use-cases { padding-top: 64px; padding-bottom: 64px; }
  #contact { padding-top: 32px; padding-bottom: 32px; }
  .section-title { font-size: clamp(30px, 8vw, 44px); line-height: 1.12; overflow-wrap: break-word; }
  #contact .section-title { font-size: 28px; }
  .section-sub { font-size: 16px; }

  .grid-3 { gap: 16px; margin-top: 32px; }
  .integrations-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 32px; }
  .integration-tile { padding: 18px 10px; }
  .steps-grid { margin-top: 32px; }
  .use-case-grid { gap: 20px; }
  .page-hero { padding: 120px 0 56px; }
  .error-content { padding: 40px 20px; }

  /* touch screens have no hover: keep cards from jumping on tap */
  .card-feature:hover,
  .use-case-card:hover,
  .integration-tile:hover { transform: none; }

  .footer-grid { gap: 28px; }
  .footer-bottom { gap: 12px; }
}

/* ---------- small phones ---------- */
@media (max-width: 560px) {
  /* stack the three hero buttons full width — easier to tap, no ragged wrapping */
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats { flex-direction: column; gap: 8px; }

  #contact .container > div:last-child { width: 100%; }
  #contact .btn { flex: 1 1 100%; justify-content: center; }

  .price-amount .value { font-size: 38px; }
  .faq-item { padding: 4px 16px; }
}

/* ---------- very small phones ---------- */
@media (max-width: 360px) {
  .hero .hero-content { padding-left: 16px; padding-right: 16px; }
  .container,
  .navbar .container { padding-left: 16px; padding-right: 16px; }
}

/* ---------- a looping background video is motion + data ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}