/* ═══════════════════════════════════════════════════════════
   App — coming soon page (app.html). Same tokens as styles.css;
   reuses .gx-kf-num, .hero-actions, .btn-primary/.btn-ghost.
   ═══════════════════════════════════════════════════════════ */

/* ─── HERO ─── */
#app-hero {
  min-height: 100vh; padding: 140px 48px 80px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
  overflow: hidden;
}
.ap-title {
  font-family: var(--display); font-weight: 400; font-size: clamp(72px, 10vw, 148px);
  line-height: 0.9; letter-spacing: 0.02em; color: var(--white); margin-bottom: 28px;
  opacity: 0; animation: fadeUp 0.8s ease 0.4s forwards;
}
.ap-title em { font-style: normal; color: var(--sage); }
.ap-sub {
  font-family: var(--body); font-size: 17px; line-height: 1.7; color: rgba(245,245,242,0.7);
  max-width: 520px; margin-bottom: 28px;
  opacity: 0; animation: fadeUp 0.8s ease 0.6s forwards;
}
.ap-stores { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; opacity: 0; animation: fadeUp 0.8s ease 0.7s forwards; }
.ap-store {
  display: grid; gap: 1px; padding: 10px 16px; border-radius: 10px;
  border: 1px solid rgba(139,168,152,0.35); background: rgba(139,168,152,0.06);
}
.ap-store b { font-family: var(--body); font-weight: 600; font-size: 15px; color: var(--white); }
.ap-store small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
#app-hero .hero-actions { opacity: 0; animation: fadeUp 0.8s ease 0.8s forwards; }

.ap-hero-phones { position: relative; height: min(78vh, 720px); }
.ap-hero-phones .ap-phone { position: absolute; width: auto; height: 92%; }
.ap-phone--back { right: 4%; top: 0; transform: rotate(5deg); opacity: 0.55; }
.ap-phone--front { left: 6%; bottom: 0; transform: rotate(-4deg); }

/* ─── PHONE SCREENSHOTS ─── */
.ap-phone {
  display: block; width: 100%; height: auto;
  border-radius: 34px; border: 6px solid #1c1f1d;
  box-shadow: 0 0 0 1px rgba(139,168,152,0.18), 0 40px 80px -30px rgba(0,0,0,0.9);
  background: #000;
}

/* ─── SCREENS ─── */
#app-screens { padding: 40px 48px 80px; }
.ap-row {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: center;
  padding: 80px 0; border-top: 1px solid rgba(139,168,152,0.1);
}
.ap-row:first-child { border-top: none; }
.ap-row.flip .ap-copy { order: 2; }
.ap-row.flip .ap-shots { order: 1; }
.ap-copy h2 { font-family: var(--display); font-weight: 400; font-size: 52px; letter-spacing: 0.02em; line-height: 1; margin: 10px 0 18px; }
.ap-copy p { font-family: var(--body); font-size: 17px; line-height: 1.7; color: rgba(245,245,242,0.75); max-width: 520px; }
.ap-i {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--sage); color: var(--sage-light); font-size: 12px; font-family: var(--body);
  vertical-align: 1px;
}
.ap-shots { margin: 0; display: grid; justify-items: center; }
.ap-shots .ap-phone { max-width: 300px; }
.ap-shots--two { grid-template-columns: 1fr 1fr; gap: 24px; }
.ap-shots--two .ap-phone { max-width: 280px; }
.ap-shots--two .ap-phone:nth-child(2) { margin-top: 64px; }
.ap-shots--three { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ap-shots--three .ap-phone { max-width: 220px; border-radius: 26px; border-width: 5px; }
.ap-shots--three .ap-phone:nth-child(2) { margin-top: 48px; }

/* ─── CTA ─── */
#app-cta { padding: 120px 48px 140px; text-align: center; display: grid; justify-items: center; gap: 24px; }
#app-cta .section-body { max-width: 640px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  #app-hero { grid-template-columns: 1fr; padding: 120px 32px 64px; min-height: 0; }
  .ap-hero-phones { height: 520px; }
  #app-screens { padding: 24px 32px 64px; }
  .ap-row { grid-template-columns: 1fr; gap: 40px; padding: 64px 0; }
  .ap-row.flip .ap-copy, .ap-row.flip .ap-shots { order: 0; }
}
@media (max-width: 768px) {
  #app-hero { padding: 104px 24px 48px; }
  .ap-hero-phones { height: 440px; }
  #app-screens { padding: 16px 24px 48px; }
  .ap-copy h2 { font-size: 42px; }
  #app-cta { padding: 88px 24px 104px; }
}
@media (max-width: 480px) {
  #app-hero { padding: 96px 20px 40px; }
  .ap-hero-phones { height: 380px; }
  #app-screens { padding: 8px 20px 40px; }
  .ap-shots--two { gap: 12px; }
  .ap-shots--two .ap-phone:nth-child(2) { margin-top: 36px; }
  .ap-shots--three { grid-template-columns: 1fr 1fr; }
  .ap-shots--three .ap-phone:nth-child(3) { display: none; }
  .ap-phone { border-radius: 24px; border-width: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-title, .ap-sub, .ap-stores, #app-hero .hero-actions { animation: none; opacity: 1; }
}