/* Responsive layer for the static marketing pages. The pages are styled
   inline; this sheet carries only what inline styles cannot express —
   media queries and shared safety rules. */

html,
body {
  overflow-x: clip;
}

#how,
#features,
#pricing {
  scroll-margin-top: 76px;
}

/* Flex cards keep their desktop minimum, but never exceed the row. */
.mw340 { min-width: min(340px, 100%) !important; }
.mw320 { min-width: min(320px, 100%) !important; }
.mw300 { min-width: min(300px, 100%) !important; }
.mw260 { min-width: min(260px, 100%) !important; }

@media (max-width: 760px) {
  .nav-inner { flex-wrap: wrap; }
  .nav-links {
    order: 5;
    width: 100%;
    gap: 18px !important;
    overflow-x: auto;
    padding: 8px 2px 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; }
}

@media (max-width: 700px) {
  .section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .hero { padding-top: 36px !important; }
  .cta-card { padding: 40px 22px !important; }
}

@media (max-width: 560px) {
  .hero-phone { width: min(300px, 100%) !important; }
  .hero-phone img { width: 100% !important; }
  .fc-left { left: -6px !important; }
  .fc-right { right: -6px !important; }
  .qr-card {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
  }
}