/* A single headline scale; colour carries the emphasis. */
.hero h1,.closing h2{font-size:clamp(34px,5.2vw,72px);line-height:1.1;letter-spacing:-.045em;white-space:normal}
.hero h1>.hero-create,.closing h2>span{display:block;font-size:inherit;line-height:inherit;letter-spacing:inherit;margin-top:5px}
.hero h1>.hero-prefix{font:inherit;color:inherit}
.hero h1 .hero-word{display:inline-block;font:inherit;letter-spacing:inherit;white-space:nowrap}
.hero h1 .hero-letter{display:inline-block;font:inherit;letter-spacing:inherit;margin:0}
.hero-lede{max-width:640px}
.hero>.native-demo{margin-top:128px}
.hero-pet{opacity:1;transition:opacity .4s ease}

/* Reserve the tallest placeholder quote while the three examples crossfade. */
.hero-quotes{max-width:690px;margin:28px auto 0;text-align:center}
.hero-quotes:focus-visible{outline:2px solid var(--purple);outline-offset:10px;border-radius:8px}
.hero-quotes-stack{display:grid;align-items:start}
.hero-quote{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .65s ease,visibility .65s;pointer-events:none}
.hero-quote[data-active=true]{opacity:1;visibility:visible;pointer-events:auto}
.hero-quote blockquote{font:italic 500 clamp(16px,1.6vw,20px)/1.5 var(--font-sans);letter-spacing:-.025em;color:var(--text);margin:0}
.hero-quote figcaption{font-size:12px;color:var(--muted);margin-top:10px}
.hero-quote figcaption strong{font-weight:600;color:var(--text)}
.hero-quote figcaption span:before{content:' · '}

/* JS is optional. The boot flag is bounded by a visibility failsafe. */
html[data-hero-entering=true] [data-hero-reveal],
html[data-hero-entering=true] main>:not(.hero),
html[data-hero-entering=true] .footer{opacity:0}
html[data-hero-entering=true] .hero-create{visibility:hidden}
html[data-hero-entering=true] .hero-create[data-letters-ready]{visibility:visible}
html[data-hero-entering=true] .hero-letter{opacity:0}
html[data-hero-entering=true] .hero>[data-product-demo=home]>.product-frame{opacity:0}
html[data-hero-entering=true] .hero-pet{visibility:hidden;opacity:0}

@media(max-width:740px){
 .hero h1,.closing h2{font-size:clamp(34px,7vw,52px);line-height:1.12;letter-spacing:-.04em}
 .hero-quotes{max-width:550px;margin-top:24px;padding:0 5px}
 .hero-quote blockquote{font-size:16px}
 .hero>.native-demo{margin-top:116px}
}
@media(prefers-reduced-motion:reduce){
 .hero-quote,.hero-pet{transition:none}
 html[data-hero-entering=true] [data-hero-reveal],html[data-hero-entering=true] main>:not(.hero),html[data-hero-entering=true] .footer,html[data-hero-entering=true] .hero-letter,html[data-hero-entering=true] .hero>[data-product-demo=home]>.product-frame{opacity:1}
 html[data-hero-entering=true] .hero-create,html[data-hero-entering=true] .hero-pet{visibility:visible}
 html[data-hero-entering=true] .hero-pet{opacity:1}
}