/* ---------- Shared badges & cards ---------- */
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .6rem;border-radius:9999px;background:#eefbf4;color:#065f46;font-weight:600;font-size:.85rem}
.store-badge{display:inline-flex;align-items:center;gap:.75rem;border:1px solid rgba(0,0,0,.1);padding:.7rem 1rem;border-radius:.9rem;background:#fff}
.store-badge img{height:22px}
.shadow-soft{box-shadow:0 10px 30px rgba(0,0,0,.08)}
.round-2xl{border-radius:1.25rem}
.feature-card{padding:1rem;border:1px solid #f0f0f0;border-radius:1rem;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.feature-card h3{font-weight:700;margin-bottom:.25rem}

/* ---------- Phone screenshot sizing (identical everywhere) ---------- */
:root{
  --phone-w:min(320px, 32vw);      /* identical width cap on desktop */
  --phone-r:9/19.5;                 /* iPhone-ish aspect ratio */
}
.phone-frame{
  width:var(--phone-w);
  aspect-ratio:var(--phone-r);
  border-radius:1.25rem;
  background:#fbfbfb;
  box-shadow:0 14px 40px rgba(2,6,23,.15), inset 0 0 0 1px rgba(2,6,23,.06);
  padding:.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.app-screenshot{
  width:100%;
  height:100%;
  object-fit:contain;   /* never crop; keep full screen visible */
  border-radius:.9rem;
}

/* Make sure they stay nicely sized on small screens */
@media (max-width: 640px){
  :root{ --phone-w: min(280px, 85vw); }
  
  /* Make sure text comes first, image second on small screens for map section */
  #map .order-1 { order: 1 !important; }
  #map .order-2 { order: 2 !important; }
}

/* --- Coming Soon badge (top-right) --- */
.coming-soon-badge{
  background:#fef3c7;           /* amber-100 */
  color:#92400e;                 /* amber-700 */
  font-weight:700;
  padding:.5rem .8rem;
  border-radius:.75rem;
  border:1px solid rgba(0,0,0,.08);
}

/* --- CTA store badges: force black text on green background --- */
.cta-stores .store-badge,
.cta-stores .store-badge span{
  color:#000 !important;
}