/* Keep the directory and account controls easy to reach on a phone. */
@media(max-width:700px){
 html{scroll-padding-top:80px}
 .shell{width:calc(100% - 28px)}
 .topbar{position:sticky;top:0;z-index:5;height:calc(64px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);background:#fffafdf2;backdrop-filter:blur(12px)}
 .topnav{gap:10px}
 .topnav .header-link{font-size:13px}
 #account-open{min-height:44px;max-width:126px;font-size:14px;padding:9px 12px}
 .hero{gap:16px;padding:20px 0 24px}
 h1{font-size:38px;letter-spacing:-1.7px;margin:10px 0 14px}
 .hero-copy>p{line-height:1.65;margin-bottom:15px}
 .hero-copy .primary{min-height:46px;font-size:14px}
 .hero-note{font-size:12px;margin:9px 0 0 10px}
 .hero-aside>img{height:156px}
 .featured-caption{padding:14px;gap:10px}
 .featured-caption .eyebrow{font-size:9px;letter-spacing:1px}
 .featured-caption strong{font-size:21px}
 .featured-caption p{font-size:13px}
 .featured-caption>a{min-height:44px;gap:12px;padding:10px 14px;font-size:14px}
 .applications{scroll-margin-top:80px;padding-top:20px}
 .search{min-height:48px}
 .search input{font-size:16px}
 .categories button,.recent-link{min-height:44px;font-size:14px}
 .app-grid .app-card,.app-grid>.app-card:only-child,.app-grid>.app-entry:only-child .app-card{display:grid;grid-template-columns:86px minmax(0,1fr);padding:0;gap:0}
 .app-grid .app-card .app-cover,.app-grid>.app-card:only-child .app-cover,.app-grid>.app-entry:only-child .app-cover{width:100%;height:100%;min-height:150px;margin:0;grid-column:1}
 .app-grid .app-card .app-art:not(.app-cover){width:58px;height:58px;margin:14px;grid-column:1;align-self:start}
 .app-grid .app-card .card-content,.app-grid>.app-card:only-child .card-content,.app-grid>.app-entry:only-child .card-content{min-width:0;padding:15px;grid-column:2}
 /* Small complete previews keep applications easy to scan without tall banners. */
 .app-grid .app-card.illustrated-card{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:14px}
 .app-grid .app-card.illustrated-card .app-art.app-cover{height:auto;min-height:0;aspect-ratio:3/2;grid-column:1;margin:0}
 .app-grid .app-card.illustrated-card .card-content{grid-column:2;padding:0}
 .app-grid .app-card.illustrated-card h3{font-size:19px;margin:0 0 7px}
 .app-grid h3{font-size:20px;margin:7px 0}
 .card-content>p{font-size:14px;line-height:1.6}
 .tags{gap:5px;margin:12px 0}
 .card-launch{min-height:44px;padding:10px 0 0;font-size:13px}
 .app-account-controls,.app-grid>.app-entry:only-child .app-account-controls{padding:0 15px}
 .app-account-controls button{min-height:44px;font-size:14px;line-height:1.5}
 .outro{padding:18px}
 .outro p{font-size:14px}
 .outro>button{min-height:44px}
 #account-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;inset:0;border:0;border-radius:0;padding:calc(12px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));overscroll-behavior:contain}
 .account-dialog-head{position:sticky;top:calc(-12px - env(safe-area-inset-top));background:#fff;padding:10px 0;z-index:2}
 .account-dialog-head button{min-width:44px;min-height:44px}
 #account-body button,#account-body select,#account-body input,#account-body summary{min-height:44px}
 #account-body input,#account-body select{font-size:16px}
 .account-tabs{gap:20px}
 #account-body form>button{width:100%;justify-self:stretch}
 footer{font-size:11px;gap:14px}
}

#mobile-install-host:empty{display:none}
.mobile-install{background:#fff;border:1px solid #dccce4;border-radius:14px;padding:12px 16px;margin:18px 0}
.mobile-install summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:650;line-height:1.5}
.mobile-install p,.mobile-install li{font-size:14px;line-height:1.7}.mobile-install li+li{margin-top:8px}.mobile-install ol{padding-left:22px}
.mobile-install a{display:inline-flex;align-items:center;min-height:44px;color:#62408a;font-weight:650}