/* Bring the sample work into the first screen while retaining the hero artwork. */
.site-2026 .hero-new::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  width: auto;
  height: 220px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(234, 244, 255, .4) 42%, #eaf4ff 100%);
  pointer-events: none;
}
.site-2026 #examples.work-showcase {
  margin-top: -1px;
  background: linear-gradient(180deg, #eaf4ff 0%, #eaf4ff 15%, #f6faff 67%, #edf6ff 100%);
}
.site-2026 #packages.home-packages {
  margin-top: -1px;
  background: linear-gradient(180deg, #edf6ff 0%, rgba(237, 246, 255, .98) 12%, rgba(237, 246, 255, .78) 48%, rgba(237, 246, 255, .9) 100%),
    url('assets/vibecept-flow-2026.webp') center top / cover no-repeat;
}
@media (min-width: 901px) {
  .site-2026 .hero-new .hero-grid {
    min-height: 515px;
    padding-block: 28px 22px;
  }
  .site-2026 .hero-showcase { height: 455px; }
  .site-2026 .showcase-browser { top: 25px; }
  .site-2026 .showcase-phone { top: 112px; }
  .site-2026 .showcase-mascot { bottom: 0; }
  .site-2026 #examples.work-showcase { padding-top: 14px; }
}

@media (max-width: 900px) {
  .site-2026 .hero-new .hero-grid {
    min-height: 0;
    padding-block: 32px 18px;
    gap: 12px;
  }
  .site-2026 .hero-showcase { height: 400px; }
}

@media (max-width: 700px) {
  .site-2026 .hero-new .hero-grid { padding-block: 24px 10px; gap: 4px; }
  .site-2026 .hero-showcase { height: 275px; }
  .site-2026 .hero-new::after { height: 130px; }
  .site-2026 #examples.work-showcase { padding-top: 16px; }
  .site-2026 #packages.home-packages {
    background: linear-gradient(180deg, rgba(237,246,255,.95) 0%, rgba(237,246,255,.9) 55%, #edf6ff 100%),
      url('assets/vibecept-flow-2026.webp') center top / cover no-repeat;
  }
}