/* ==========================================================================
   PREVIEW ONLY - do not deploy this file.

   Your live styles.css already contains .hero-devices, .mobile-phones and
   .faq-* rules. The styles.css in the zip you sent me (29 July) predates
   them, so the preview needs these to lay the real screenshots out. Shipping
   this to production would duplicate and fight your existing rules.

   apn-polish.css is the file you actually deploy.
   ========================================================================== */

/* --- hero device cascade -------------------------------------------------
   Matches the arrangement on apn.ba: laptop anchored top-right, tablet
   dropped below and to the left overlapping it, and the travel-order cards
   cascading down-right in front of both. Absolute positioning inside a
   reserved box so nothing reflows as the images load.                     */

.hero-devices {
  position: relative;
  max-width: none;
  padding-bottom: 88%;
}

.hero-device-laptop {
  position: absolute;
  top: 0;
  left: 6%;
  width: 96%;
  z-index: 10;
  filter: drop-shadow(0 30px 60px rgb(12 19 44 / 0.16));
}

.hero-devices-bottom {
  position: static;
}

.hero-device-tablet {
  position: absolute;
  left: -12%;
  top: 45%;
  width: 62%;
  z-index: 30;                 /* in front of the travel-order cards */
  transform: rotate(-4deg);
  transform-origin: 60% 40%;
  filter: drop-shadow(0 28px 54px rgb(12 19 44 / 0.22));
}

/* anchored from the right rather than the left: the bleed past the column
   then stays a fixed proportion at every width instead of drifting with the
   card's own width, which is what kept clipping it on smaller laptops */
.hero-device-stack {
  position: absolute;
  right: -12%;
  left: auto;
  top: 50%;
  width: 80%;
  z-index: 40;                 /* in front, overlapping the tablet screen */
  filter: drop-shadow(0 22px 46px rgb(12 19 44 / 0.16));
}

/* the cluster bleeds past its column by design; below 1280 that bleed starts
   getting cut by the viewport edge, so it steps back in stages */
/* the overhang steps back as the viewport narrows, so the right-hand card
   never gets cut by the screen edge */
@media (max-width: 1440px) {
  .hero-device-stack { right: -8%; }
}

@media (max-width: 1366px) {
  .hero-device-stack { right: -4%; }
}

/* below 1280 the column already sits close to the screen edge, so the cards
   can't bleed further - the laptop narrows instead, which keeps the cards
   overhanging its edge without pushing them off-screen */
@media (max-width: 1280px) {
  .hero-device-laptop { width: 90%; }
  .hero-device-stack { right: 0; width: 78%; }
}

@media (max-width: 1023px) {
  .hero-devices { padding-bottom: 92%; }
  .hero-device-laptop { left: 6%; width: 92%; }
  .hero-device-tablet { top: 38%; width: 62%; }
  .hero-device-stack { right: 0; top: 36%; width: 80%; }
}

/* --- mobile app screens ---------------------------------------------------
   Four phones in a row, evenly spaced, each tilted slightly so the group has
   depth instead of reading as a flat filmstrip. The renders carried a light
   halo baked in, which showed as a grey rectangle behind them on the page;
   that's been cleared to alpha in the source PNGs, so they now sit directly
   on the section with only their CSS shadow.                              */

.mobile-phones {
  width: 100%;
  min-width: 0;
  perspective: 1400px;
}

.mobile-phones-scroller {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.mobile-phones-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.mobile-phones-track img {
  width: 25%;
  max-width: 168px;
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 18px 30px rgb(12 19 44 / 0.20));
  transition: transform 0.35s ease;
}

/* a shallow fan: outer phones angle away, inner ones sit closer to flat */
.mobile-phones-track img:nth-child(1) { transform: rotateY(14deg) rotate(-1.5deg) translateY(6px); }
.mobile-phones-track img:nth-child(2) { transform: rotateY(5deg); }
.mobile-phones-track img:nth-child(3) { transform: rotateY(-5deg); }
.mobile-phones-track img:nth-child(4) { transform: rotateY(-14deg) rotate(1.5deg) translateY(6px); }

@media (max-width: 640px) {
  .mobile-phones-track {
    flex-wrap: wrap;
    gap: 0.75rem 0.5rem;
  }
  .mobile-phones-track img {
    width: 46%;
    max-width: none;
    transform: none !important;
  }
  .mobile-phones { perspective: none; }
}

/* --- FAQ accordion ---------------------------------------------------------
   Your live styles.css already carries .faq-* rules; the 29 July zip predates
   them, so the preview needs these to match apn.ba's two-column accordion.
   Production keeps its own.                                                 */

.faq-heading {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

@media (min-width: 768px) {
  .faq-heading { font-size: 3rem; }
}

.faq-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 3.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 900px) {
  .faq-cols { grid-template-columns: 1fr 1fr; }
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.4rem 0;
  border: 0;
  background: none;
  text-align: left;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}

.faq-q:hover {
  color: var(--brand-700);
}

.faq-icon {
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}

.faq-q[aria-expanded="true"] .faq-icon {
  color: var(--brand-700);
}

/* height animates from a measured value set by the script */
.faq-a {
  overflow: hidden;
  height: 0;
  transition: height 0.28s ease;
}

.faq-a p {
  padding-bottom: 1.5rem;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 60ch;
}

@media (prefers-reduced-motion: reduce) {
  .faq-a { transition: none; }
}


.platform-collage {
  position: relative;
  width: 100%;
  min-height: 34rem;
  aspect-ratio: 16 / 11;
}

.platform-card {
  position: absolute;
  margin: 0;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgb(12 19 44 / 0.08);
  box-shadow: 0 1px 2px rgb(12 19 44 / 0.04);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.85s ease;
}

.platform-card::before {
  content: "";
  display: block;
  height: 1.75rem;
  background: #f7f8fa;
  border-bottom: 1px solid rgb(12 19 44 / 0.06);
  background-image:
    radial-gradient(circle at 0.85rem 50%, #ff5f56 0 0.28rem, transparent 0.3rem),
    radial-gradient(circle at 1.7rem 50%, #ffbd2e 0 0.28rem, transparent 0.3rem),
    radial-gradient(circle at 2.55rem 50%, #27c93f 0 0.28rem, transparent 0.3rem);
  background-repeat: no-repeat;
}

.platform-card img {
  display: block;
  width: 100%;
  height: auto;
}

.platform-card--tr {
  top: 0;
  right: 0;
  left: auto;
  width: 79%;
  z-index: 2;
  transform: translate3d(14%, 18%, 0);
  transition-delay: 0.06s;
}

.platform-card--tl {
  top: 10%;
  left: 0;
  width: 24%;
  z-index: 4;
  transform: translate3d(-16%, 20%, 0);
  transition-delay: 0s;
}

.platform-card--bl {
  left: 0;
  bottom: 25px;
  width: 50%;
  z-index: 3;
  transform: translate3d(-12%, 24%, 0);
  transition-delay: 0.12s;
}

.platform-card--br {
  right: 0;
  bottom: 70px;
  width: 52%;
  z-index: 3;
  transform: translate3d(12%, 24%, 0);
  transition-delay: 0.18s;
}

.platform-card.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.platform-card--solo {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .platform-card {
    opacity: 1;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 63.9375rem) {
  .platform-collage {
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .platform-card {
    position: static;
    width: 100% !important;
    max-width: 28rem;
    margin: 0 auto;
  }
}

.subpage-hero-visual {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0) scale(0.985);
  animation: subpage-hero-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
  will-change: transform, opacity;
}

@keyframes subpage-hero-in {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .subpage-hero-visual {
    opacity: 1;
    transform: none;
    animation: none;
  }
}