/* ProAnimate on top of the template: only what the template has no word for. */
.pa-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: Inter, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.pa-logo svg { width: 34px; height: 34px; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.35)); }
.footer-logo-link { color: #fff; }

/* Contrast: dark ink on every green fill, the way the editor's own Render button reads. */
.primary-button, .primary-button .button-text, .primary-button-2, .from-primary-small-input, .from-primary-small-input:hover { color: #052e16; }
.menu-icon, .menu-icon-close { filter: brightness(0.15); }
.primary-button .button-text, .from-primary-small-input { font-weight: 700; }


/* Reviews wait until there are real ones. The section stays in the page, hidden. */
.section.review { display: none; }

/* github.com's hero scroll: the sky and the words hold still while the screen
   rides up over them, the words dimming and shrinking as it comes. */
.section.hero { background-attachment: scroll, fixed, fixed; }
.hero-block { position: sticky; top: 6.5rem; z-index: 0; transform-origin: 50% 100%; will-change: transform, opacity; }
.dashboard-image-block { position: relative; z-index: 2; }
/* The screen is the editor itself, a 16:9 film open, shot at 1600×920 and shown at its own shape — never stretched. */
.deshboard-image { display: block; height: auto; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
/* On a phone the screen is the prompt page instead — the editor's five panels are not a phone's width. */
@media (max-width: 767px) { .deshboard-image { max-width: 320px; margin: 0 auto; border-radius: 28px; } }
@media (max-width: 767px) { .hero-block { top: 5rem; } }