/* Show the phone at readable device dimensions, without shrinking the demo. */
.hero{min-height:880px;grid-template-columns:1fr 1fr}
.hero-visual{height:820px;transform:none}
.hero-visual>.phone{zoom:1.24;transform:rotate(3deg);height:540px}
.hero-visual .screen-date{margin-top:12px}
.hero-visual .week{margin-top:8px}
.float-tag{bottom:100px;left:-12px}
.demo-section{grid-template-columns:minmax(0,.85fr) minmax(450px,1.15fr)}
.demo-frame{min-width:0;container-type:inline-size;background:transparent;border:0;border-radius:0;overflow:visible;width:100%;max-width:450px;justify-self:center}
.demo-frame .frame-bar{display:none}
.demo-frame iframe{height:calc(min(761.65px, 201.5cqw - 48.36px) + 56px);background:transparent;color-scheme:normal}
@media(max-width:1000px){
 .hero h1{font-size:48px}
 .hero-visual>.phone{zoom:1.16}
 .hero-visual{height:770px}
 .hero{min-height:820px}
 .demo-section{grid-template-columns:1fr;gap:32px}
 .demo-section>div:first-child{max-width:620px}
 .demo-frame{width:100%;max-width:450px;justify-self:center}
}
@media(max-width:700px){
 .hero{min-height:0;overflow:hidden}
 .hero h1{font-size:53px}
 .hero-visual{height:800px;max-width:none;width:100%;margin-top:22px}
 .hero-visual>.phone{zoom:1.22;transform:none}
 .visual-label{top:15px;right:0}
 .float-tag{left:0;bottom:16px}
 .visual-bottom{display:none}
}
@media(max-width:390px){
 .hero-visual{height:735px}
 .hero-visual>.phone{zoom:1.1}
 .hero h1{font-size:46px}
 .demo-section{padding-left:12px;padding-right:12px}
 .frame-bar{font-size:7px;padding:14px 10px}
}