/* Adjustments from real desktop and phone render review. */
main{overflow:clip}
.hero-description{max-width:425px}
.hero-tour{min-height:44px}
.hero .eyebrow{font-size:10px}
.hero-description{font-size:18px;line-height:1.8}
.site-header nav{font-size:12px}
.header-actions .theme-label{font-size:11px}
.foundation>div span{font-size:11px;max-width:120px}
.foundation>p{font-size:13px}
.gallery-preview .screen-label{max-width:100%;text-align:center}
@media(max-width:900px){.hero .eyebrow{font-size:8px}.hero-description{font-size:16px;max-width:350px}.foundation>div span{font-size:10px}.foundation>p{font-size:11px}}
@media(min-width:651px) and (max-width:900px){
  .hero{grid-template-columns:1fr 1fr;gap:18px}
  .hero-copy{min-width:0}
  .hero h1{font-size:clamp(39px,5.8vw,51px)}
  .hero-art{margin-left:0}
  .hero-phone-main{width:225px;right:-4px;top:37px}
  .hero-phone-back{width:174px;left:0;top:104px}
  .note-word{left:0;top:60px}
  .note-streak{right:0;bottom:30px}
}
@media(max-width:650px){
  h1{font-size:clamp(38px,10.8vw,68px)}
  .hero{padding-top:34px}
  .hero .eyebrow{font-size:8px;margin-bottom:19px}
  .hero-description{font-size:16px;line-height:1.8;margin:20px auto 0;max-width:325px}
  .hero-stores{margin-top:23px}
  .hero-art{height:478px;margin-top:8px}
  .hero-phone-main{width:235px;right:calc(50% - 159px);top:10px}
  .hero-phone-back{width:190px;left:calc(50% - 161px);top:75px}
  .hero-halo{transform:scale(.88);inset:9% 0 8%}
  .note-word{left:calc(50% - 153px);top:35px}
  .note-streak{right:calc(50% - 154px);bottom:14px}
  .names-phone-front{width:235px;right:calc(50% - 160px)}
  .names-phone-back{width:187px;left:calc(50% - 160px)}
  .names-art{min-height:475px}
  .foundation>div span{font-size:10px}
  .foundation>p{font-size:12px}
  .download-note,.hero .download-note{font-size:10px}
}
@media(max-width:370px){
  h1{font-size:clamp(34px,11.7vw,43px)}
  .header-actions .button{white-space:nowrap;font-size:9px;padding:10px 9px}
  .header-actions .button .icon{display:none}
  .hero-phone-main{width:205px;right:calc(50% - 137px)}
  .hero-phone-back{width:166px;left:calc(50% - 137px)}
}
@media(max-width:370px){.hero .eyebrow{font-size:7px}.hero-description{font-size:15px}.hero-art{height:425px}.note-word{left:calc(50% - 131px)}.note-streak{right:calc(50% - 133px)}.names-phone-front{width:222px;right:calc(50% - 149px)}.names-phone-back{width:178px;left:calc(50% - 149px)}.names-art{min-height:455px}}