/* Approved refined hero, desktop and mobile. */
html,.nav-wrap,.quiet-hero{background:#f7f7f4}
.nav-wrap{padding-inline:max(28px,calc((100% - 1024px)/2))}
.nav{min-height:92px;padding:24px 0;border-bottom:1px solid #2228200d}
.nav .brand img{width:60px}
.nav-links{gap:30px}.nav-links a{font-size:14px}
.quiet-hero{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:48px;align-items:start;min-height:0;padding:54px max(28px,calc((100% - 1024px)/2)) 64px}
.quiet-hero .copy{padding-top:100px}
.quiet-hero h1{font-size:56px;font-weight:500;line-height:1.09;letter-spacing:-.048em;margin:0 0 28px}
.quiet-hero .copy>p{font-size:18px;line-height:1.65;margin:0 0 28px;color:#767a72}
.quiet-hero .copy>p strong{font-weight:500;color:#292d27}
.quiet-hero .app-store-button{transform:none;min-height:62px;padding:11px 20px;gap:12px;border-radius:12px;box-shadow:0 7px 17px -10px #20282160}
.quiet-hero .app-store-button svg{width:27px;height:32px}
.quiet-hero .app-store-button small{font-size:11px;line-height:1.3}
.quiet-hero .app-store-button strong{font-size:25px;line-height:1.13}
.quiet-hero .phone{position:relative;isolation:isolate;justify-self:center;width:100%;overflow:visible}
.quiet-hero .phone:before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:14% -12% 8%;background:radial-gradient(ellipse at 52% 55%,#3648df0d 0%,#3648df06 40%,transparent 70%)}
.quiet-hero .phone>#demo{width:264px;border-radius:32px;clip-path:inset(0 round 32px)}
.quiet-hero #hero-movie{border-radius:32px}
.quiet-hero .hint{display:flex;align-items:center;justify-content:center;gap:5px;margin:14px -20px 0;font-size:11px;line-height:1.4;white-space:nowrap;color:#777b73}
.quiet-hero .hero-playback{min-width:44px;padding:8px;color:#3d49c9}
@media(max-width:1100px) and (min-width:701px){.quiet-hero{gap:32px}.quiet-hero h1{font-size:49px}.quiet-hero .copy{padding-top:95px}}
@media(max-width:700px){
.nav-wrap{padding-inline:24px}.nav{min-height:82px;padding:20px 0}.nav .brand img{width:55px}
.quiet-hero{gap:38px;padding:38px 24px 38px}.quiet-hero .copy{padding-top:0}
.quiet-hero h1{font-size:39px;line-height:1.09;letter-spacing:-.05em;margin-bottom:22px}
.quiet-hero .copy>p{font-size:16px;line-height:1.6;margin-bottom:24px}
.quiet-hero .phone>#demo{width:264px}.quiet-hero .hint{margin-top:10px;font-size:10px;gap:2px}
.quiet-hero .phone:before{inset:9% -6% 6%}
}
@media(max-width:360px){.quiet-hero h1{font-size:33px}.quiet-hero .phone>#demo{width:248px}}
/* Preview revision: compact download badge with a quiet moving highlight. */
.quiet-hero .app-store-button{
 zoom:.75;
 box-shadow:inset 0 1px 0 #ffffff30,0 4px 8px #1c24191a,0 14px 24px -10px #1c241969;
}
.quiet-hero .app-store-button::after{
 display:block;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 22%,rgba(255,255,255,.25) 50%,transparent);
 animation:store-shimmer 6s ease-in-out 1s infinite;
}
@media(max-width:700px){
 .quiet-hero .copy{text-align:center}
 .quiet-hero .app-store-button{zoom:.675}
}
@media(prefers-reduced-motion:reduce){
 .quiet-hero .app-store-button::after{display:none;animation:none}
}

.quiet-hero .app-store-button{-webkit-text-size-adjust:none;text-size-adjust:none}
/* Center the mobile block on the viewport, not its shrink-to-fit content. */
@media(max-width:700px){
 .quiet-hero{align-items:stretch}
 .quiet-hero .copy{width:100%;min-width:0;align-self:stretch;text-align:center}
 .quiet-hero .copy h1,.quiet-hero .copy>p{width:100%;max-width:none}
}