/* Keep normal words dark; only the selected phrase receives the gradient. */
.hero-typewriter-heading {
    color: #1d1d1f;
    background: none;
    -webkit-text-fill-color: #1d1d1f;
}

.hero-typewriter-highlight {
    color: #0071e3;
    background: linear-gradient(115deg, #6d28d9 0%, #0071e3 52%, #008b99 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Reserve the height of every phrase before animation starts. */
.hero-typewriter {
    display: inline-grid;
    max-width: 100%;
    vertical-align: top;
}

.hero-typewriter-measure[hidden],
.hero-typewriter-output {
    grid-area: 1 / 1;
    min-width: 0;
}

.hero-typewriter-measure[hidden] {
    display: block !important;
    visibility: hidden;
    pointer-events: none;
}

.hero-typewriter-output {
    align-self: center;
}

.hero-typewriter-measure::after,
.hero-typewriter.is-running .hero-typewriter-cursor[hidden] {
    display: inline-block;
    width: 0.045em;
    height: 0.85em;
    margin-left: 0.09em;
    vertical-align: -0.06em;
    content: "";
}

.hero-typewriter.is-running .hero-typewriter-cursor[hidden] {
    display: inline-block !important;
    background-color: #0071e3;
    animation: hero-typewriter-blink 1s step-end infinite;
}

.hero-typewriter.is-paused .hero-typewriter-cursor[hidden] {
    animation-play-state: paused;
}

@keyframes hero-typewriter-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media (max-width: 575.98px) {
    .hero-typewriter-heading {
        font-size: 2.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-typewriter.is-running .hero-typewriter-cursor[hidden] {
        display: none !important;
        animation: none;
    }
}