/* Bounded dialogs: only the form scrolls, never the close or primary footer. */
body:has(dialog[open]){overflow:hidden}
dialog[open]{display:flex;flex-direction:column;overflow:hidden}
.modal-head,.modal-foot{flex:none}
.modal-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
dialog:has(#hosted-login),dialog:has(#account-link){width:min(460px,calc(100vw - 24px))}
#hosted-login+.toolbar{margin:18px 0 0;justify-content:space-between;gap:12px}
#hosted-login>button,#account-link>button{width:100%}
.payment-actions{display:grid;gap:10px;margin-top:16px}
@media(max-width:700px){
 header{padding:14px 12px 8px;gap:10px;min-height:0}
 .brand{font-size:25px}.brand small{font-size:8px;margin-top:5px}
 nav button{min-height:44px;padding:8px 6px}
 .wrap{width:calc(100% - 24px);margin:18px auto 32px}
 h1{font-size:36px;margin:8px 0 14px}h2{font-size:26px}
 dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);margin:auto;border-radius:10px}
 .modal-head{padding:12px 14px;gap:8px}.modal-head h2{font-size:25px;line-height:1.12}
 .modal-head .eyebrow{font-size:8px}.modal-head [data-close]{min-width:44px;min-height:44px;padding:8px}
 .modal-body{padding:14px}.modal-foot{padding:10px 14px;gap:8px}
 .modal-foot>button{min-height:44px}.modal-foot>small{font-size:10px}
 .modal-columns{gap:14px}.stepper{margin-bottom:14px;font-size:10px}
 label{margin-bottom:12px}input,select,textarea{min-height:44px;padding:9px 10px;font-size:16px;max-width:100%;min-width:0}
 textarea{min-height:76px}.notice{padding:10px 12px;margin:12px 0}
 .summary{padding:12px}.summary h2{font-size:23px;margin:4px 0 8px}.summary .price{font-size:26px}
 .modal-columns:has(#book-service)>.summary,.modal-columns:has(#booking-form)>.summary{order:-1;display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
 .modal-columns:has(#book-service)>.summary>.eyebrow,.modal-columns:has(#booking-form)>.summary>.eyebrow,
 .modal-columns:has(#book-service)>.summary>p.muted,.modal-columns:has(#booking-form)>.summary>p.muted,
 .modal-columns:has(#book-service)>.summary>hr,.modal-columns:has(#booking-form)>.summary>hr,
 .modal-columns:has(#book-service)>.summary>small:last-child,.modal-columns:has(#booking-form)>.summary>small:last-child{display:none}
 .modal-columns>.summary>h2{margin:0}.modal-columns>.summary>p:not(.muted){margin:0}
 .slots{margin:10px 0;gap:8px}.slots button{min-height:44px;padding:8px}
 #join-waitlist{width:100%;padding:10px;font-size:12px}
 .cash-summary{font-size:36px;margin:8px 0}.status-line{padding:10px 0}
 .booking-success{padding:12px 0}.card-content{padding:16px}
 .hero{min-height:0}.hero-copy{padding:22px}.hero img{height:210px}.hero h1{font-size:38px}
 .section-head{margin:22px 0 14px}.footer{padding:18px 12px}
}