/* Respond to the illustration's available width, including in desktop split rows. */
.motion-panel{container:feature-demo / inline-size}
.bm-prompt{white-space:normal}
.bm-status{max-width:100%}
.bm-status-text{min-width:0}
.bm-steps,.bm-icon{flex-shrink:0}
.ki-row>span{min-width:0}
.ki-row em{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.yo-file-name{white-space:normal;overflow-wrap:anywhere}
/* Keep the complete custom domain visible even in the capped desktop window. */
.yo-domain{grid-template-columns:28px minmax(0,1fr) auto;gap:4px 10px}
.yo-domain .yo-ico{grid-column:1;grid-row:1 / span 2}
.yo-domain .yo-label{grid-column:2;grid-row:1}
.yo-domain .yo-field{grid-column:2 / -1;grid-row:2;white-space:normal;overflow-wrap:anywhere}
.yo-domain .yo-badge{grid-column:3;grid-row:1}

@media(max-width:1100px){
 .feature-row,.feature-reverse{display:flex;flex-direction:column;align-items:stretch;gap:32px;max-width:640px;width:100%;margin-inline:auto}
 .feature-copy{max-width:none}
 .feature-panel{width:100%}
 main>.features{gap:88px}
 .how-steps{grid-template-columns:1fr;max-width:560px;margin-inline:auto;gap:48px}
 .how-card h3{font-size:38px}
 .how-image-placeholder{height:260px}
}

@container feature-demo (max-width:440px){
 .bm-status{min-height:38px}
 .bm-col-title{font-size:11px}
 .bm-card b{white-space:normal;overflow-wrap:anywhere}
 .yo-row{grid-template-columns:26px minmax(0,1fr) auto;gap:4px 8px}
 .yo-row .yo-label{display:block;grid-column:2;grid-row:1}
 .yo-ico{grid-column:1;grid-row:1 / span 2}
 .yo-field,.yo-value{grid-column:2 / -1;grid-row:2;white-space:normal}
 .yo-badge{grid-column:3;grid-row:1}
 .yo-file{grid-template-columns:30px minmax(0,1fr) 24px}
 .ki-row{grid-template-columns:minmax(0,1fr) 44px 62px}
 .ki-row b{display:block;white-space:normal;overflow-wrap:anywhere}
 .ki-row b i{display:inline-block;margin-right:6px}
 .ki-status{height:auto;min-height:36px}
 .ki-input{height:36px;white-space:normal;font-size:12px;line-height:18px}
 .ki-typed,.ki-placeholder{max-width:100%}
}

@media(max-width:600px){
 main>.features{gap:68px}
 .how-image-placeholder.hs{padding-inline:20px}
 .hs-bubble{max-width:calc(100% - 24px);white-space:normal}
 .hs-toast small{white-space:normal}
}
@media(max-width:380px){
 .hs-people{display:none}
 .bm-view{padding-inline:10px}
 .ki-table{padding-inline:8px}
 .ki-row{gap:6px}
 .yo-bar{padding-inline:12px}
 .yo-crumb{margin-left:0}
}