/* Phone layout is intentionally independent of the three-column desktop showcase. */
@media(max-width:620px){
 .photo-entry .entry-image{object-position:center}
 .photo-entry .entry-wordmark{font-size:22px}
 .photo-entry .entry-about,.photo-entry .entry-access{min-width:44px;min-height:48px}
 .demo-waitlist{padding:clamp(24px,4dvh,36px) 24px;min-height:min(740px,88dvh)}
 .demo-waitlist .waitlist-heading h2{font-size:clamp(28px,8.5vw,34px)}
 .demo-waitlist .waitlist-intro{font-size:18px;line-height:1.4}
 .story .chapter{padding-inline:24px;gap:24px}
 .story .chapter .chapter-lines h2{font-size:clamp(30px,8.3vw,40px);line-height:1.14}
 .story .chapter .chapter-lines p{font-size:21px;line-height:1.4}
 #app-preview{padding:48px 20px 64px;min-height:0}
 #app-preview .hero-copy{padding-inline:0}
 #app-preview .screen-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;padding:0;gap:6px;margin-bottom:24px}
 #app-preview .screen-tabs button{min-height:48px;padding:10px 4px;font-size:15px;border:1px solid #3b2c2920;border-radius:8px}
 #app-preview .screen-tabs button[aria-pressed=true]{background:#ad29270d;border-color:#ad2927}
 #app-preview .screen-tabs button:after{display:none}
 #app-preview .hero-stage{display:block;width:100%;max-width:380px;margin:0 auto;padding:0;overflow:visible}
 #app-preview .hero-stage .side-phone{display:none}
 #app-preview .hero-stage .main-phone{width:100%;margin:0}
 #app-preview .hero-stage figcaption{font-size:16px;margin-top:14px}
 #app-preview .hero-thread{display:none}
 .site-footer{flex-wrap:nowrap;padding:30px 24px max(32px,env(safe-area-inset-bottom));gap:20px}
 .site-footer>span{flex-basis:auto;max-width:145px;margin-top:0}
 .access-dialog{max-height:calc(100dvh - 24px);overflow:auto}
}
@media(max-width:620px) and (max-height:650px){.demo-waitlist{padding:22px}.demo-waitlist .waitlist-wordmark{margin-bottom:16px}.demo-waitlist .waitlist-intro{font-size:17px;margin-bottom:16px}}
/* Compact entry sheet, with only a hint of separation from the photograph. */
.demo-waitlist{width:min(680px,calc(100% - 36px));max-width:calc(100% - 36px);min-height:0;max-height:calc(100dvh - 60px);padding:32px 52px 30px}
.demo-waitlist::backdrop{background:rgba(30,25,22,.04);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.demo-waitlist .waitlist-wordmark{margin-bottom:24px}
.demo-waitlist .waitlist-heading h2{font-size:40px;margin-bottom:20px}
.demo-waitlist .waitlist-intro{font-size:19px;margin-bottom:24px}
@media(max-width:620px){.demo-waitlist{padding:26px 24px 24px;max-height:calc(100dvh - 32px)}.demo-waitlist .waitlist-heading h2{font-size:32px}.demo-waitlist .waitlist-intro{font-size:17px;margin-bottom:18px}.demo-waitlist .waitlist-wordmark{margin-bottom:22px}}
.demo-waitlist.keyboard-open{min-height:0;max-height:calc(var(--keyboard-height) - 24px)}

/* Let the closing message fill the sage section on phones. */
@media(max-width:620px){
 .story .chapter-closing{height:auto;min-height:100svh;padding:64px 24px}
 .story .chapter-closing .chapter-copy{width:100%;max-width:none}
 .story .chapter-closing .chapter-lines{width:100%;gap:32px}
 .story .chapter-closing .chapter-lines h2{font-size:clamp(48px,13vw,80px);line-height:1.08;max-width:11ch}
 .story .chapter-closing .chapter-lines p.closing-wordmark{font-size:clamp(56px,16vw,96px);line-height:1.08}
}