/* ═══════════════════════════════════════
   Hero demo — the animated GhostText lines inside Notes.app
   Lines reveal on a stepped timer (see js/demo.js); reduced-motion
   shows them all at once (handled in base.css + demo.js).
   ═══════════════════════════════════════ */
.hero-demo {
    padding: 26px 28px 32px;
    min-height: 196px;
    text-align: left;
}

.demo-line {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s var(--ease-out-expo),
                transform 0.5s var(--ease-out-expo);
}
.demo-line.visible {
    opacity: 1;
    transform: none;
}

/* ── Phones: shrink the mono demo so ghost lines never overflow the window ── */
@media (max-width: 560px) {
    .hero-demo .ghost-text { font-size: 0.74rem; line-height: 1.7; }
    .hero-demo .ghost-tab { margin-left: 8px; padding: 1px 6px; font-size: 0.62rem; }
    .hero-demo .ghost-suggestion { padding-left: 7px; }
    .hero-demo .ghost-comment { font-size: 0.66rem; }
}

@media (max-width: 400px) {
    .hero-demo .ghost-text { font-size: 0.68rem; }
}