/* Keep artwork and progress in separate rows: no scene may paint over its footer. */
.flow-scene{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:18px;padding:30px 4% 20px;min-height:620px!important}
.flow-scene>.flow-heading{position:relative;inset:auto;z-index:2}
.flow-scene>.flow-stage{position:relative;inset:auto;width:100%;height:100%;min-height:0;overflow:visible;isolation:isolate}
.flow-scene>.flow-footer{position:relative;inset:auto;z-index:10;background:transparent;border-top:0;padding-top:14px;align-self:end}
.flow-footer .flow-timeline{font-size:9px;padding-bottom:13px}
.flow-footer .flow-footnote{margin-top:8px}
.flow-footer .flow-footnote button{white-space:nowrap}
.flow-ai .ai-outputs{inset:5% 1% 5%}
/* Navigation has a separate strip below the pinned artwork. */
.scroll-story-pin{height:calc(100svh - 130px);max-height:850px;top:30px;min-height:0}
.scroll-story-pin>.story-art,.scroll-story-pin>.scroll-art{max-height:100%;height:100%;min-height:0}
.scroll-story-pin>.flow-scene{height:100%!important;min-height:0!important;max-height:none}
.case-rail{bottom:14px}
/* Older product/web scenes also get a quiet, legible footer area. */
.story-status{padding:10px 0;background:transparent;border-radius:0}
.scroll-story .apple-art .install-badge{bottom:16%}
.scroll-story .apple-art .story-status{bottom:48px}
@media(max-width:700px){
 .scroll-story-pin{top:18px;height:calc(100svh - 112px);max-height:none}
 .scroll-story-pin>.flow-scene{padding:23px 5% 15px;gap:13px}
 .flow-scene .flow-heading h3{font-size:29px;margin:11px 0 9px}
 .flow-scene .flow-heading>span{font-size:8px;letter-spacing:1px}
 .flow-scene .flow-heading p{font-size:10px;line-height:1.5}
 .flow-scene>.flow-footer{padding-top:11px}
 .flow-footer .flow-timeline{font-size:6px;letter-spacing:.5px;padding-bottom:10px}
 .flow-footer .flow-footnote{gap:6px;margin-top:6px}
 .flow-footer .flow-footnote>span{font-size:5px;max-width:120px}
 .flow-footer .flow-footnote button{font-size:8px;min-height:26px}
 .flow-ai .ai-outputs{inset:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
 .flow-ai .output-column{min-height:0;height:100%;grid-template-columns:34px 1fr;grid-template-rows:25px 1fr auto auto;align-content:start}
 .flow-ai .output-column .panel-bar{padding:6px 10px;font-size:7px}
 .flow-ai .output-symbol{font-size:19px;margin:8px 7px}
 .flow-ai .output-column h4{font-size:15px;margin:8px 0 3px;align-self:center}
 .flow-ai .output-column p{font-size:7px;line-height:1.35;margin:0 10px 5px 34px}
 .flow-ai .output-item{font-size:7px;padding:6px;margin:0 8px 7px}
 .flow-crm .shared-dashboard{bottom:3%;width:86%}
 .flow-crm .shared-dashboard h4{font-size:17px}
 .flow-crm .shared-summary{margin:9px 15px}
 .flow-salon .auto-reply{bottom:2%;width:83%}
 .flow-salon .built-system{top:0}
 .flow-audit .metric-panel{bottom:1%;width:88%}
 .flow-audit .audit-process{inset:0 0 51%}
 .flow-audit .process-tile{height:64px;padding:9px}
 .flow-audit .process-tile b{font-size:11px;margin-top:8px}
 .flow-audit .metric-tags{margin:8px 12px;font-size:6px}
 .flow-audit .metric-tags span{padding:5px}
 .flow-audit .business-chart{height:70px}
 .flow-audit .metric-state{font-size:14px;margin:10px 12px}
 .case-rail{bottom:8px;padding:4px}
}
@media(prefers-reduced-motion:reduce){
 .scroll-story-pin{position:relative;top:0;height:auto;max-height:none}
 .scroll-story-pin>.flow-scene{height:720px!important}
}