/* SCREENS / APP PREVIEW ---------------------------------------- */
/* MOBILE FIRST */

#screens {
  padding: 40px 0 64px;
}

/* Centered header on mobile */
#screens .section-header {
  display: flex; /* override base .section-header */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  max-width: 360px;
  margin: 0 auto 28px; /* horizontally center */
  text-align: center;
}

#screens .section-title {
  font-size: 24px;
  letter-spacing: -0.04em;
  font-weight: 650;
  color: #020617;
}

#screens .section-sub {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

/* SCREEN HEADER ANIMATION -------------------------------------- */

/* start hidden + slightly lowered */
#screens .section-header.reveal .section-title,
#screens .section-header.reveal .section-sub {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* when IntersectionObserver adds .is-visible */
#screens .section-header.reveal.is-visible .section-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.06s;
}

#screens .section-header.reveal.is-visible .section-sub {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.16s; /* comes in just after the title */
}

/* Each row (image + copy) – stacked on mobile ------------------ */

.screen-section {
  max-width: 380px;
  margin: 0 auto 40px;
}

.screen-layout,
.screen-layout.reverse {
  display: flex;
  flex-direction: column; /* image + text stacked */
  align-items: center;
  text-align: center;
  row-gap: 14px; /* tighter so copy hugs the image */
}

/* IMAGE -------------------------------------------------------- */

.screen-shot,
.screen-shot-duo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* small gap between phones */
  width: 100%;
  /* remove padding-left */
}

/* soft floating halo under phones */
.screen-shot::before,
.screen-shot-duo::before {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 68%;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    rgba(15, 23, 42, 0.12),
    transparent 70%
  );
  filter: blur(6px);
  opacity: 0.55;
  pointer-events: none;
}

/* single screenshot */
.screen-shot img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 32px;
}

.screen-shot-duo img {
  display: block;
  width: 48%;
  max-width: none;
  height: auto;
  border-radius: 28px;
}

/* subtle float on hover (desktop users still get this) */
.screen-shot img,
.screen-shot-duo img {
  transition: transform 0.22s ease, filter 0.22s ease;
}

.screen-section:hover .screen-shot img,
.screen-section:hover .screen-shot-duo img {
  transform: translateY(-4px);
}

/* COPY --------------------------------------------------------- */

.screen-copy {
  max-width: 360px;
}

/* tiny label, Stripe/Linear-style */
.screen-copy-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f3f4ff;
  color: #4f46e5;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.screen-copy-label span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
}

/* headline for each screen */
.screen-copy h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* web-style body copy */
.screen-copy p {
  margin: 0 auto; /* tuck under heading */
  max-width: 280px; /* narrower for a tighter feel */
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280; /* slightly softer than heading */
}

/* DESKTOP / LARGE SCREENS ------------------------------------- */
/* Enhance layout only when we have room */

@media (min-width: 880px) {
  #screens {
    padding: 56px 0 80px;
  }

  #screens .section-header {
    max-width: 560px; /* wider on desktop */
    margin: 0 auto 32px; /* keep perfectly centered */
  }

  #screens .section-title {
    font-size: 28px;
  }

  .screen-section {
    max-width: 980px; /* narrower = more premium */
    margin: 0 auto 56px;
  }

  .screen-layout {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 40px; /* gap between image and text */
    row-gap: 0;
  }

  .screen-layout.reverse {
    flex-direction: row-reverse;
  }

  .screen-shot-duo {
    gap: 18px;
    padding-left: 0;
  }

  .screen-shot-duo img {
    width: 100%;
    max-width: 210px;
  }

  /* give both sides ~50/50 split */
  .screen-shot,
  .screen-shot-duo,
  .screen-copy {
    flex: 0 0 48%;
  }

  .screen-copy {
    max-width: 420px;
    text-align: left;
  }

  .screen-shot::before,
  .screen-shot-duo::before {
    width: 70%;
    height: 22px;
  }

  .screen-copy h3 {
    font-size: 24px;
    margin: 0 0 8px;
  }

  .screen-copy p {
    max-width: none;
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #4b5563;
  }
}