/* The pink wash behind the hero, and a calm dark counterpart. Tailwind handles
   everything else; this is only what a utility class would make unreadable. */
:root { color-scheme: light dark; }

.hero-wash {
  background:
    radial-gradient(60rem 32rem at 50% -8rem, #FBD9E8 0%, #FDEFF5 45%, #FFFFFF 100%);
}
@media (prefers-color-scheme: dark) {
  .hero-wash {
    background:
      radial-gradient(60rem 32rem at 50% -8rem, #3A0C22 0%, #1B0B13 48%, #0B0B0D 100%);
  }
}

/* Screenshots sit in a thin bezel rather than a full device mock. */
.shot {
  border-radius: 1.75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px -8px rgba(80,20,50,.18);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }