/* ==========================================================
   Fixes applied after importing the landing from Claude Design.
   Kept separate so styles.css stays a verbatim mirror of the
   design project and can be re-imported without losing these.
   ========================================================== */

@media (max-width: 780px) {
  /* On a narrow screen the sun floods the whole hero and the gradient-filled
     "replaying." dissolves into it. Pull the glow back to a corner accent. */
  .hero-glow { opacity: .3; }
  .hero-bg {
    background:
      radial-gradient(560px 420px at 108% -14%, rgba(255,210,63,.34), transparent 62%),
      radial-gradient(480px 380px at -24% 102%, rgba(255,107,53,.08), transparent 60%),
      var(--c-bg);
  }

  /* Decorative fruits must not swallow taps meant for the buttons under them */
  .hero-fruit { pointer-events: none; }

  /* ...and must not sit on top of the call to action either */
  .hero-fruit--1 { top: 86%; left: 4%; }
  .hero-fruit--3 { top: 4%;  left: 2%; }
  .hero-fruit--4 { top: 92%; right: 6%; }

  /* Room for the corner corgi, who is fixed and lands on the footer at full scroll */
  .foot { padding-bottom: 120px; }
}

/* The Claude Design "Tweaks" panel used to push this in at runtime; it is a
   plain design value, so it belongs in CSS and not in a dev-only script. */
:root { --sun-intensity: 1.6; }