/* Dean's shared spatial corrections; niche art, colors and type remain StillPicker's. */
:root{--u:clamp(.9px,calc(100vw / 812),1.15px)}
.frame{width:92%;max-width:1100px;margin-inline:auto;min-width:0}
.frame .frame{width:100%;max-width:none}
.site-header{height:clamp(45px,5.55vw,56px)}
.brand{gap:7px;color:var(--ink)}
.brand img{width:32px;height:32px}
.brand strong{font:700 calc(22 * var(--u))/1 DMSans,Arial,sans-serif;letter-spacing:-.7px}
.file-control:has(input:disabled){opacity:.55;cursor:wait}
.hero,.hero.feature{width:100%;max-width:1195.65px;height:auto;min-height:clamp(220px,27.1vw,324px);margin-inline:auto;background:#f7fbfd;overflow:hidden}
.hero:after{display:none}
body[data-page=home] .hero{background-image:url('/assets/hero-home-panorama.webp?v=mini-20261103-sp2');background-size:cover;background-position:center center}
body[data-page=home] .hero-art{visibility:hidden}
body[data-page=storyboard] .hero{background-image:url('/assets/hero-feature-panorama.webp?v=mini-20261103-sp2');background-size:cover;background-position:center center}
body[data-page=storyboard] .hero-art{visibility:hidden}
.hero .frame{height:auto;min-height:inherit;align-items:center;padding-block:calc(20 * var(--u))}
.hero-copy,.hero.feature .hero-copy{width:49%;margin:0;padding:0;align-self:center}
.hero h1,.hero.feature h1{font-size:calc(37 * var(--u));white-space:normal}
.hero:not(.feature) h1{font-size:calc(33 * var(--u))}
.hero.feature h3{font-size:calc(19 * var(--u))}
.hero.feature p:not(.breadcrumb){font-size:calc(14 * var(--u))}
.hero h3,.hero.feature h3{font-size:calc(24 * var(--u));max-width:100%;white-space:normal}
.hero p,.hero.feature p:not(.breadcrumb){font-size:calc(15 * var(--u));max-width:100%;white-space:normal;line-height:1.35}
.hero-art,.hero.feature .hero-art{width:49.4%;height:100%;object-fit:cover;object-position:right center;top:0;bottom:auto;opacity:1}
.hero-desk,.hero.feature .hero-desk{display:none}
.tool-panel{margin-top:0}
.share-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:calc(36 * var(--u));margin-inline:0}
.share{padding:calc(14 * var(--u)) calc(18 * var(--u))}
.share h2,.share>p,.how h2,.faq h2,.tips h2{text-align:left}
.formats{width:100%;margin-block:10px}
.formats label:focus-within{outline:3px solid var(--orange);outline-offset:2px}
.guide{height:auto;min-height:calc(206 * var(--u));grid-template-columns:32.4% 30.2% minmax(0,1fr)}
.guide-art{padding:8px;position:relative;min-width:0;background:#002453}
.guide-art img{width:100%;height:auto;max-height:260px;object-fit:contain}
.guide-caption{font-size:13px;line-height:1.2;margin-top:4px}
.guide-copy,.guide-signup{min-width:0;padding:14px}
.guide-copy h2{font-size:calc(21 * var(--u));line-height:1.13}
.guide-signup input{font-size:13px!important;height:32px;min-height:32px!important}
.guide-signup label{font-size:12px}
.guide-signup button{font-size:14px;min-height:36px}
.guide-signup p{font-size:12px;line-height:1.35}
.site-footer{height:auto;min-height:90px;padding-block:14px}
.footer-inner{gap:20px;flex-wrap:wrap}
.site-footer nav{font-size:12px}
.support-heart{display:block;width:20px;height:20px;flex:0 0 20px;mask:none;background:none;fill:var(--orange);margin:0}
.support{min-height:36px;font-size:12px}
.teaser{height:auto;min-height:calc(210 * var(--u))}
.teaser img{object-fit:cover}
.loading-status{font-size:13px;color:#24547c;margin:6px 0}
@media(max-width:767px){
 :root{--u:1px}
 body{font-size:15px}
 .site-header{height:auto;min-height:60px}
 .header-inner{min-height:60px;padding-block:10px;flex-wrap:wrap}
 .brand img{width:32px;height:32px;flex:0 0 32px}
 .menu{display:inline-flex;min-height:36px;padding:6px 10px}
 .site-header nav{display:none;position:absolute;top:58px;right:4%;left:4%;background:white;border:1px solid var(--line);padding:12px;box-shadow:0 8px 15px #1232;gap:14px;flex-wrap:wrap}
 .site-header nav.open{display:flex}
 .hero,.hero.feature{display:flex;flex-direction:column;min-height:0;height:auto}
 .hero .frame{min-height:0;order:0;padding-block:22px 18px}
 .hero-copy,.hero.feature .hero-copy{width:100%;padding:0;margin:0}
 .hero h1,.hero.feature h1{font-size:32px;max-width:100%}
 .hero h3,.hero.feature h3{font-size:22px;max-width:100%}
 .hero p,.hero.feature p:not(.breadcrumb){font-size:15px;max-width:100%}
 body[data-page=home] .hero,body[data-page=storyboard] .hero{background-image:none}
 body[data-page=home] .hero-art,body[data-page=storyboard] .hero-art{visibility:visible}
 .hero-art,.hero.feature .hero-art{position:relative;order:1;width:100%;height:auto;max-height:250px;object-fit:cover}
 .media-grid,.work-grid,.share-grid{grid-template-columns:minmax(0,1fr);gap:16px}
 .file-row,.tool-actions{grid-template-columns:minmax(0,1fr)}
 .settings-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:15px}
 .three-steps{grid-template-columns:minmax(0,1fr);gap:18px}
 .tip+.tip{border-left:0;padding-left:0}
 .example-cards{grid-template-columns:minmax(0,1fr)}
 .formats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .formats label{font-size:14px;min-height:50px}
 .formats span{font-size:12px}
 .guide{grid-template-columns:minmax(0,1fr)}
 .guide-art{grid-row:auto;padding:18px}
 .guide-art img{width:100%;height:230px;max-height:230px}
 .guide-copy{border-left:0;padding:20px}
 .guide-signup{grid-column:auto;border-left:0;border-top:1px solid #1360b0;padding:18px 20px}
 .guide h2{font-size:25px}
 .guide li{font-size:14px}
 .guide-signup input{height:38px;min-height:38px!important;font-size:15px!important}
 .guide-signup button{font-size:16px;min-height:44px}
 .teaser{grid-template-columns:minmax(0,1fr)}
 .teaser img{height:auto;max-height:260px}
 .footer-inner{flex-direction:column;align-items:flex-start}
 .site-footer nav{font-size:14px;flex-wrap:wrap}
 .share-grid{margin-inline:0}
 .board-preview{grid-template-columns:minmax(0,1fr)}
 .moment-row{grid-template-columns:80px minmax(0,1fr) 32px}
 .moment-row input{font-size:13px}
 .workspace-flags{flex-wrap:wrap;gap:12px}
 .faq summary{font-size:14px;line-height:1.3}
 .faq details p{font-size:13px;line-height:1.4}
}
/* Keep the creative hero copy in the approved quiet window area. */
@media(min-width:768px){
 .hero.feature .frame{align-items:flex-start;padding-block:calc(14 * var(--u)) calc(20 * var(--u))}
 .hero.feature .hero-copy{align-self:flex-start}
 .hero.feature h3{font-size:calc(19 * var(--u))}
 .hero.feature p:not(.breadcrumb){font-size:calc(14 * var(--u))}
}