/* Keep the choice, input and matching example together above the fold. */
.experience .site-nav{height:68px}
.brand-hero{padding:20px 24px 24px}
.brand-intro h1{font-size:clamp(38px,4.2vw,60px);line-height:1.05;letter-spacing:-2.5px;margin:4px 0 12px}
.brand-intro .positioning{font-size:14px;line-height:1.5;margin:0 0 14px}
.brand-intro .positioning strong{font-size:16px}
.brand-intro>.ratio-picker{max-width:650px;margin:12px auto 10px}
.brand-intro .ratio-option{min-height:58px;padding:9px 12px}
.brand-intro .link-form{max-width:650px;margin:10px auto 0}
.brand-intro [data-daily-allowance]{font-size:12px!important;line-height:1.45!important;max-width:850px;margin:10px auto 14px!important}
.hero-proof{max-width:1100px;box-sizing:border-box;grid-template-columns:minmax(0,.9fr) 24px minmax(0,1.25fr) minmax(0,.85fr);gap:20px;padding:16px 24px;min-height:258px}
.hero-proof-source .input-browser{max-width:270px;margin:auto}
.hero-proof-source>p{font-size:11px;text-align:center}
.hero-proof-source img{max-height:180px;object-fit:contain}
.hero-proof-result{min-width:0}
.hero-inline-film{height:224px;justify-content:center;gap:8px}
.hero-proof .hero-inline-film video{width:101px;height:180px;aspect-ratio:9/16;object-fit:contain;flex:none}
.hero-proof[data-format=square] video{width:180px;height:180px;aspect-ratio:1}
.hero-proof[data-format=landscape] video{width:min(100%,320px);height:auto;aspect-ratio:16/9;max-height:180px}
.hero-proof .preview-toggle{order:1;min-height:36px;padding:6px 14px;font-size:12px}
.hero-proof .hero-proof-copy{display:block;min-width:0}
.hero-proof-copy .proof-duration{display:block;font-size:22px;line-height:1.2}
.hero-proof-copy p{font-size:13px;line-height:1.5;margin:8px 0}
.hero-proof-copy .proof-use{display:block;font-size:12px;font-weight:650;line-height:1.4;color:#554575}
.hero-proof-copy .proof-spec{display:block;font-size:12px;margin:10px 0 6px;color:#554575}
.hero-proof-copy .proof-template{display:block;font-size:11px;line-height:1.4;color:#756a80}
@media(max-width:760px){
 .experience .site-nav{height:auto;min-height:58px;padding:10px 16px}.site-nav nav{display:none!important}
 .brand-hero{padding:14px 16px 20px}.brand-intro h1{font-size:34px;letter-spacing:-1.5px;margin:2px 0 10px}
 .brand-intro .positioning{font-size:12px;line-height:1.4;margin-bottom:10px}.brand-intro .positioning strong{font-size:13px}
 .brand-intro>.ratio-picker{margin:10px auto 8px}.brand-intro .ratio-picker legend{font-size:12px;margin-bottom:7px}
 .brand-intro .ratio-option{min-height:44px;padding:8px 3px}.brand-intro .ratio-option strong{font-size:10px}
 .brand-intro .link-form{max-width:none;flex-wrap:nowrap;gap:5px;margin-top:8px;padding:5px}.brand-intro .link-form>span{display:none}.brand-intro .link-form input{min-width:0;font-size:13px;padding:10px 8px}.brand-intro .link-form .button{width:auto;font-size:11px;padding:10px 9px;min-height:42px}
 .brand-intro [data-daily-allowance]{font-size:11px!important;margin:8px auto 10px!important}
 .hero-proof{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10px;padding:12px;min-height:0}.hero-proof-arrow{display:none}.hero-proof-source img{max-height:125px}.hero-proof-source>p{font-size:9px;line-height:1.3;margin-top:6px}.hero-proof .browser-dots span{display:inline;font-size:8px;margin-left:4px}.hero-proof .browser-dots{padding:5px;font-size:6px;letter-spacing:0}
 .hero-inline-film{height:172px;gap:6px}.hero-proof .hero-inline-film video{height:132px;width:74.25px}.hero-proof[data-format=square] video{height:132px;width:132px}.hero-proof[data-format=landscape] video{width:100%;height:auto;max-height:132px}
 .hero-proof .preview-toggle{min-height:32px;padding:5px 9px;font-size:11px}
 .hero-proof-copy{grid-column:1/-1;border-top:1px solid #e6e0ed;padding-top:9px;display:grid!important;grid-template-columns:1fr 1fr;gap:4px 10px}.hero-proof-copy .proof-duration{font-size:17px}.hero-proof-copy p{display:none}.hero-proof-copy .proof-use{font-size:10px;grid-column:2;grid-row:1/3;align-self:center}.hero-proof-copy .proof-spec{font-size:10px;margin:0}.hero-proof-copy .proof-template{font-size:10px;grid-column:1/-1}
}
@media(min-width:761px) and (max-height:800px){
 .brand-hero{padding-top:10px}.brand-intro h1{font-size:44px;margin:0 0 8px}.brand-intro .positioning{font-size:12px;line-height:1.4;margin-bottom:8px}.brand-intro .positioning strong{font-size:14px}.brand-intro>.ratio-picker{margin-top:8px}.brand-intro .ratio-option{min-height:50px;padding-block:8px}.hero-proof{min-height:240px;padding-block:10px}.hero-inline-film{height:210px}.hero-proof .hero-inline-film video{height:166px;width:93.375px}.hero-proof[data-format=square] video{width:166px;height:166px}.hero-proof[data-format=landscape] video{width:min(100%,295px);height:auto;max-height:166px}
}