/* R120: homepage floating hero shows a preview of the real app (fictional family "Maya").
   Keeps the floating effect from floating-product.css; only the inside of the scene changes. */
.app-preview .product-stage { height: 656px; }
.app-preview .ap-window { top: 122px; left: 2%; width: 84%; min-height: 0; overflow: hidden; }
.ap-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e0e5f1; background: #fff; }
.ap-for { display: flex; flex-direction: column; padding: 5px 11px; border: 1px solid #e0e5f1; border-radius: 10px; font-size: 11.5px; font-weight: 700; color: #14203f; line-height: 1.25; }
.ap-for small { font-size: 9.5px; font-weight: 600; color: #6a7590; }
.ap-btn { margin-left: auto; padding: 7px 12px; border-radius: 9px; background: #1f5fe0; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ap-main { display: grid; grid-template-columns: 86px 1fr; }
.ap-side { display: flex; flex-direction: column; gap: 3px; padding: 14px 8px; border-right: 1px solid #e6eaf3; background: #fbfcfe; }
.ap-side span { padding: 6px 8px; border-radius: 7px; font-size: 11px; font-weight: 700; color: #3b4766; }
.ap-side .is-on { background: #e8efff; color: #1f4fc4; }
.ap-body { padding: 14px 16px 16px; min-width: 0; }
.app-preview .product-stage p.ap-eyebrow { margin: 0 0 2px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #2154ad; }
.app-preview .ap-body > strong { display: block; font: 800 1.3rem/1.25 var(--font-display); letter-spacing: -.03em; color: #14203f; }
.ap-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 12px; padding: 7px 9px; border: 1px solid #e3e8f2; border-radius: 10px; background: #fff; }
.ap-steps span { padding: 3px 9px; border: 1px solid #dfe4ee; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #4b5872; }
.ap-steps .is-current { background: #1f5fe0; border-color: #1f5fe0; color: #fff; }
.ap-steps em { font-style: normal; font-size: 10.5px; color: #4b5872; }
.ap-next { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid #dfe6f5; border-left: 3px solid #1f5fe0; border-radius: 10px; background: #fff; }
.app-preview .product-stage p.ap-next-title { color: #14203f; font-weight: 800; font-size: 13px; line-height: 1.3; }
.app-preview .ap-next .product-label { margin-bottom: 2px; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #2154ad; }
.ap-cta { flex: 0 0 auto; padding: 8px 11px; border-radius: 9px; background: #1f5fe0; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ap-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ap-card { padding: 10px 11px; border: 1px solid #e3e8f2; border-radius: 10px; background: #fff; min-width: 0; }
.ap-card:first-child { border-top: 3px solid #e3a25b; }
.app-preview .ap-card .product-label { font-size: 11px; color: #14203f; margin-bottom: 6px; }
.app-preview .product-stage p.ap-item { color: #14203f; font-weight: 700; font-size: 11.5px; line-height: 1.35; }
.app-preview .product-stage p.ap-meta { color: #6a7590; font-size: 10.5px; line-height: 1.4; }
.app-preview .product-stage p.ap-item2 { margin-top: 7px; }
.ap-scale { display: flex; gap: 4px; margin-top: 8px; }
.ap-scale span { flex: 1; height: 6px; border-radius: 6px; background: #e3e8f2; }
.ap-scale .on { background: #2e9b7d; }
/* Floating cards around the window */
.app-preview .satellite-question { top: 6px; right: 0; width: 290px; border-color: #d7e3fb; background: #f8fbff; animation-delay: -4s; }
.app-preview .satellite-question .icon-note { background: #dce7ff; }
.app-preview .satellite-question .product-label { color: #234a9c; }
.app-preview .satellite-next { top: 540px; left: 0; width: 300px; border-color: #e6dcf6; background: #fcfaff; }
.app-preview .satellite-next .icon-question { color: #7a4cc2; background: #efe6fb; }
.app-preview .satellite-next .product-label { color: #5e3a9a; }
.app-preview .satellite-share { right: 0; top: 574px; width: 290px; border-color: #cfe6da; background: #fafffc; animation-delay: -6s; }
.app-preview .satellite-share .product-label { color: #28704f; }
@media (max-width: 1100px) and (min-width: 761px) {
  .app-preview .product-stage { height: 760px; }
  .app-preview .ap-window { width: 96%; left: 0; top: 112px; }
  .ap-main { grid-template-columns: 1fr; }
  .ap-side { display: none; }
  .app-preview .satellite-question { top: 4px; width: 260px; }
  .app-preview .satellite-next { top: 560px; width: 250px; }
  .app-preview .satellite-share { top: 650px; width: 250px; }
}
@media (max-width: 760px) {
  .app-preview .product-stage { height: 790px; }
  .app-preview .product-stage p.ap-item2, .app-preview .product-stage p.ap-item2 + .ap-meta { display: none; }
  .app-preview .ap-window { top: 100px; left: 0; width: 100%; }
  .ap-main { grid-template-columns: 1fr; }
  .ap-side { display: none; }
  .ap-for { display: none; }
  .ap-body { padding: 12px 12px 14px; }
  .ap-next { flex-direction: column; align-items: flex-start; }
  .ap-cols { grid-template-columns: 1fr; }
  .app-preview .satellite-question { top: 0; right: 0; width: 86%; }
  .app-preview .satellite-next { top: 618px; left: 0; width: 84%; }
  .app-preview .satellite-share { top: 700px; right: 0; width: 84%; }
}