/* ===== HERO: smaller, stricter cap ===== */
.phone-frame {
  /* narrower overall + scales down on big screens */
  width: clamp(200px, 24vw, 280px);
  aspect-ratio: 9 / 19.5;
  position: relative; border-radius: 46px; padding: 10px;
  background: linear-gradient(180deg, #0ea5e9 0%, #6366f1 100%);
  box-shadow: inset 0 0 0 8px #000, 0 20px 40px rgba(2,6,23,.15);
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .phone-frame { width: min(260px, 20vw); } /* shrink a bit more on desktop */
}
.phone-frame::before {
  content: "";
  position: absolute; inset: 10px auto auto 50%;
  transform: translateX(-50%);
  width: 40%; height: 22px; background: #000;
  border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
  z-index: 2;
}

/* Screen wrapper sits inside the frame, clips content perfectly */
.phone-screen {
  position: relative;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
}

/* Make sure the video actually fills the screen */
.phone-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}




/* ===== COLLAGE (static screenshots) ===== */
.collage {
  position: relative;
  min-height: 380px;
  overflow: hidden;
}

.cardish {
  background: rgba(255,255,255,0.9);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(2,6,23,0.12), 0 2px 6px rgba(2,6,23,0.06);
  border: 1px solid rgba(0,0,0,0.05);
  overflow: hidden;            /* keeps large images from spilling */
}

.collage .shot {
  position: absolute;
  width: clamp(160px, 20vw, 240px);  /* tighter cap so they never get huge */
  height: auto;
  display: block;                    /* avoid inline gaps */
  max-width: 100% !important;        /* hard stop against intrinsic width */
  object-fit: cover;                 /* looks good if aspect ratios vary */
  user-select: none;
}

/* Pre-set positions/rotations */
.shot-1 { top: 12%; left: 6%;  transform: rotate(-6deg); }
.shot-2 { top: 6%;  right: 10%; transform: rotate(4deg); }
.shot-3 { top: 42%; left: 18%; transform: rotate(2deg); }
.shot-4 { top: 36%; right: 4%;  transform: rotate(-8deg); }
.shot-5 { top: 58%; left: 34%; transform: rotate(-2deg); }
.shot-6 { top: 18%; left: 38%; transform: rotate(9deg); }
.shot-7 { top: 48%; right: 28%; transform: rotate(5deg); }

@media (max-width: 640px) {
  .collage { min-height: 480px; }
  .collage .shot { width: clamp(150px, 44vw, 220px); }
  .shot-1 { top: 8%;  left: 8%; }
  .shot-2 { top: 28%; right: 6%; }
  .shot-3 { top: 56%; left: 10%; }
  .shot-4 { top: 12%; right: 8%; }
  .shot-5 { top: 72%; left: 42%; }
  .shot-6 { top: 44%; left: 50%; }
  .shot-7 { top: 82%; right: 12%; }
}

/* ===== Fade-in reveal (unchanged) ===== */
.fade-in { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.in-view { opacity: 1; transform: translateY(0); }


/* Legal pages layout */
body { background: linear-gradient(135deg, #eef2ff, #ecfeff); color: #0f172a; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
.dark body { color: #e2e8f0; }

.header-bar {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.4);
}
.header-inner { max-width: 72rem; margin: 0 auto; padding: .75rem 1rem; display: flex; align-items:center; justify-content: space-between; }

.legal-page {
  max-width: 48rem;
  margin: 2rem auto;
  padding: 1rem;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 1rem;
  box-shadow: 0 10px 24px rgba(2,6,23,0.06);
}

.legal-page h1 { font-size: 1.875rem; font-weight: 800; margin: 0 0 .75rem; }
.legal-page h2 { font-size: 1.125rem; font-weight: 700; margin: 1.25rem 0 .5rem; }
.legal-page p, .legal-page li { line-height: 1.7; color: #334155; }
.legal-page a { color: #0ea5e9; text-decoration: underline; }

.footer-bar {
  border-top: 1px solid rgba(255,255,255,0.4);
}
.footer-inner {
  max-width: 72rem; margin: 0 auto; padding: 1rem; font-size: .875rem; display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap;
}

/* Optional: shared language select on legal pages */
.lang-select { border: 1px solid rgba(51,65,85,.3); border-radius: .5rem; padding: .25rem .5rem; background: rgba(255,255,255,.8); }

/* Global safety for images */
img { max-width: 100%; height: auto; display: block; }

/* Limit annotated image size and keep it visible */
.why-shot {
  max-width: 320px;   /* cap */
  width: 100%;        /* but responsive */
  margin-left: auto;  /* align to the right column edge */
  border-radius: 0.75rem;
}

@media (min-width: 1024px) {
  .why-shot { max-width: 320px; }
}
.btn-store {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem;
  border-radius: 9999px;
  background: #111827; color: #fff; font-weight: 600; font-size: .95rem;
  box-shadow: 0 6px 18px rgba(17,24,39,.18), 0 2px 6px rgba(17,24,39,.12);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn-store:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(17,24,39,.24); }
.btn-store:active { transform: translateY(0); }
.btn-store .icon-apple { width: 18px; height: 18px; fill: currentColor; opacity: .9; }

.cta-band {
  background: radial-gradient(1200px 500px at 10% 0%, rgba(99,102,241,.18), transparent),
              radial-gradient(1200px 500px at 90% 100%, rgba(14,165,233,.15), transparent);
  padding: 3rem 1rem; margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.4);
}
.cta-inner { max-width: 64rem; margin: 0 auto; text-align: center; }
.cta-inner h2 { font-size: 1.875rem; font-weight: 800; margin-bottom: .25rem; }
.cta-inner p { color: #475569; margin-bottom: 1rem; }
.cta-actions { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }


/* --- App cards: separated, equal height, compact --- */

/* stretch cards to same height inside the grid */
.apps-grid { align-items: stretch; }

/* card surface + compact padding */
.app-card{
  display:flex; flex-direction:column; gap:.5rem;
  padding: .85rem .9rem;                  /* slightly narrower/denser */
  border-radius: 14px;
  background: rgba(255,255,255,.75);      /* light surface */
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 10px 20px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.04);
  height: 100%;                            /* fill grid row */
  min-height: 168px;                       /* equal-ish height */
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}

/* darker theme surface */
@media (prefers-color-scheme: dark){
  .app-card{
    background: rgba(2,6,23,.55);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.18);
  }
}

/* gentle hover lift */
.app-card.hover\:lift:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(2,6,23,.10), 0 4px 10px rgba(2,6,23,.06);
}

/* tighten the text block so it feels narrower */
.app-card .text-sm{ line-height: 1.3; }

/* badge stays close to copy, responsive size */
/* Center the App Store badge inside each card */
.app-card .store-badge{
  margin-top: .75rem;   /* spacing from text */
  align-self: center;   /* horizontal centering in the flex column */
}
.app-card .store-badge img{ height: clamp(34px, 3vw, 44px); width:auto; display:block; }
@media (max-width: 640px){
  .app-card .store-badge{ margin-top: 1rem; }
}