/* SPA Structure */
.spa-section {
    display: none;
}

.spa-section.active {
    display: block;
}

/* Page transitions */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.spa-section.active {
    animation: fadeIn 0.4s ease-out;
}

/* Navbar clearance: sections that don't have their own full-viewport hero
   or min-height:100vh wrapper need structural padding so content doesn't
   render behind the fixed navbar (~65px). The landing page and dashboard
   handle this internally; these two don't. */
#section-pricing,
#section-account,
#section-studio {
    padding-top: 5rem;
}

/* Desktop nav auth links — inline-flex so Login + Get Started sit side by side.
   The mobile overlay variant (#mobile-auth-links) is styled in styles.css as a
   vertical stack inside .nav-overlay-auth. */
#nav-auth-links {
    display: inline-flex;
    gap: 2rem;
    align-items: center;
}