.hero-device{transition:background .25s;animation:hero-materialize .28s cubic-bezier(.16,1,.3,1) both}.hero-caption{animation:caption-materialize 1.3s var(--ease) both}.caption-right{animation-delay:.25s}.caption-left{animation-delay:.1s}.reveal-word{opacity:var(--word-opacity,1);filter:blur(var(--word-blur,0px));transition:opacity .15s linear,filter .15s linear}
@keyframes hero-materialize{0%{opacity:0;filter:blur(6px);translate:0 12px}45%{opacity:1;filter:blur(0)}100%{opacity:1;filter:blur(0);translate:0 0}}@keyframes caption-materialize{from{opacity:0;filter:blur(8px);translate:0 12px}to{opacity:1;filter:none;translate:0 0}}
@media(prefers-reduced-motion:reduce){.reveal-word{opacity:1!important;filter:none!important}.hero-device,.hero-caption{animation:none!important}}

/* Crisp editorial copy fills progressively from quiet gray to ink. */
.reveal-word{opacity:1;filter:none;color:color-mix(in srgb,var(--ink) var(--word-fill,0%),#c7c7c9);background:none;transition:none}
@media(prefers-reduced-motion:reduce){.reveal-word{color:var(--ink);background:none}}

/* Intrinsic centered pill layout follows the animated word slot. */
.badge-text{display:inline-flex;align-items:center;line-height:18px;gap:.28em;white-space:nowrap}
.badge-word-slot{display:inline-block;position:relative;height:18px;transition:width .55s cubic-bezier(.22,1,.36,1)}
.badge-word{position:absolute;top:0;left:0;display:flex;align-items:center;height:18px;line-height:18px;white-space:nowrap;width:max-content}
.badge-source-icon{width:18px;height:18px;object-fit:contain;margin-left:5px;flex:none}
.badge-letter{display:inline-block;opacity:0}
@media(prefers-reduced-motion:reduce){.badge-word-slot{transition:none}}

.product .demo-card .phone{opacity:var(--still-opacity,0);translate:0 var(--still-offset,64px);filter:blur(var(--still-blur,9px));transition:none}
.product>h2{min-height:2.24em;transition:opacity .18s ease,filter .18s ease,translate .25s var(--ease)}
.product>h2[data-changing]{opacity:0;filter:blur(6px);translate:0 4px}
.product .demo-card:focus-visible{outline:2px solid #aaa;outline-offset:8px;border-radius:var(--phone-radius)}
@media(prefers-reduced-motion:reduce){.product .demo-card .phone{opacity:1;translate:none;filter:none;transition:none}.product>h2{transition:none}}

/* Fan the stills out as the panel moves through the viewport. */
.product .demo-card{transition:none}
.product .demo-card[data-demo="2"]{transform:translateX(calc(var(--spread)*var(--still-fan,0))) translateY(8px) rotate(calc(3deg*var(--still-fan,0)))}
.product .demo-card[data-demo="1"]{transform:translateX(calc(-1*var(--spread)*var(--still-fan,0))) translateY(8px) rotate(calc(-3deg*var(--still-fan,0)))}
@media(prefers-reduced-motion:reduce){.product .demo-card{--still-fan:1!important}}

/* Hover scale lives on the phone; the outer card retains scroll-driven placement. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .product .demo-card .phone{scale:1;transition:scale .4s cubic-bezier(.22,1,.36,1)}
 .product .demo-card:hover .phone,.product .demo-card:focus-visible .phone{scale:1.035}
}

/* Native disclosure owns open state; only the answer animates into view. */
.questions details[open]>p{animation:faq-answer-in .32s cubic-bezier(.22,1,.36,1) both}
@keyframes faq-answer-in{from{opacity:0;filter:blur(5px);transform:translateY(6px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.questions details[open]>p{animation:none}}