/* Final offline responsive pass. Loaded last; desktop art direction stays intact. */
:root{--saddl-header-height:88px}
.cinema :is(.head,.module,.module-head,.mock,.detail-list,.integration-browser,.business-split,.detail-body,.channel-detail,.card,.case-channel){min-width:0}
.cinema :is(a,button,summary){touch-action:manipulation}
.cinema :is(.btn,.textlink,.case-link,.integration-tabs button,.integration-scroll-controls button,.view-toggle button,.row-product,.compact button){min-height:44px}
.cinema :is(.textlink,.row-product){display:inline-flex;align-items:center}
.cinema .integration-scroll-controls button{width:44px;height:44px}
.cinema .actual-product>summary{align-items:center}
.cinema .actual-product>summary span{flex-shrink:0}
.cinema.os #capabilities .module-map{height:auto;min-height:0}
.cinema.os #capabilities .module-scene{position:relative;inset:auto;overflow:visible}
.cinema.os #capabilities .scene-demo{height:auto}
.cinema.os #capabilities .screen-label{margin-top:16px;line-height:1.6}

/* The tab bar stays with the content on tablets as well as phones. */
@media(max-width:1100px){
 .cinema.os #capabilities{display:block;padding-inline:24px;overflow-anchor:none}
 .cinema.os #capabilities .head{margin-bottom:20px}
 .cinema.os #capabilities .head h2{max-width:none;font-size:40px}
 .cinema.os #capabilities .head>p{max-width:65ch;font-size:15px}
 .cinema.os #capabilities .tabs{position:sticky;top:var(--saddl-header-height);z-index:20;display:flex;flex-direction:row;flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scroll-padding-inline:12px;margin:0 -24px 18px;padding:0 24px;background:#f5f3ed;scroll-margin-top:var(--saddl-header-height)}
 .cinema.os #capabilities .tabs button{flex:0 0 172px!important;width:auto;min-height:64px;padding:14px 12px 14px 37px;border:0;border-right:1px solid #c9c9bd;font-size:14px}
 .cinema.os #capabilities .tabs button:before{left:10px;top:17px}
 .cinema.os #capabilities .tabs button:after{top:auto;left:0;right:0;bottom:0;width:auto;height:3px;transform:scaleX(0);transform-origin:left}
 .cinema.os #capabilities .tabs button[aria-selected=true]:after{transform:scaleX(1)}
 .cinema.os #capabilities .module{scroll-margin-top:68px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);margin-top:0}
 .cinema.os #capabilities .module-head{grid-column:2;grid-row:1}
 .cinema.os #capabilities .mock{grid-column:1;grid-row:1/span 3;padding:22px;border-right:1px solid #708477}
 .cinema.os #capabilities .detail-list{grid-column:2;grid-row:2}
 .cinema.os #capabilities .workflow{grid-column:2;grid-row:3}
 .cinema.os #capabilities .capability-coverage{grid-column:1/-1;grid-row:4}
 .cinema.os #capabilities .detail-list span{font-size:14px}
 .cinema.os #capabilities .module-head p{font-size:15px}
 .cinema.os #capabilities .ads-film{display:flex;flex-direction:column;gap:20px;min-height:0;padding:16px 0}
 .cinema.os #capabilities .ads-film .scene-eyebrow{position:static;margin-bottom:8px}
 .cinema.os #capabilities .decision-level{position:relative;inset:auto;margin-left:8%;padding:14px 10px;gap:8px;grid-template-columns:23px minmax(0,1fr)}
 .cinema.os #capabilities .decision-level strong{font-size:16px;line-height:1.5}
 .cinema.os #capabilities .decision-level em{font-size:13px}
 .cinema.os #capabilities .marketplace-run{position:static;margin-left:8%;flex-wrap:wrap;gap:8px;font-size:12px}
 .cinema.os #capabilities .marketplace-run small{font-size:11px}
 .cinema.os #capabilities .money-film{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start;padding:16px 0}
 .cinema.os #capabilities .money-film .scene-eyebrow{position:static;grid-column:1/-1;margin-bottom:10px}
 .cinema.os #capabilities .money-source,.cinema.os #capabilities .contribution-destination{position:static;width:auto;height:auto;transform:none;text-align:left;margin:0;padding:10px 0;border:0;border-radius:0;box-shadow:none;background:none}
 .cinema.os #capabilities .money-source{grid-column:1;grid-row:2}
 .cinema.os #capabilities .contribution-destination{grid-column:2;grid-row:2}
 .cinema.os #capabilities .contribution-destination:before,.cinema.os #capabilities .contribution-destination:after,.cinema.os #capabilities .money-flow{display:none}
 .cinema.os #capabilities .money-source strong,.cinema.os #capabilities .contribution-destination strong{font-size:35px}
 .cinema.os #capabilities .money-source span,.cinema.os #capabilities .contribution-destination em{font-size:12px;line-height:1.5}
 .cinema.os #capabilities .cost-exit{position:static;width:auto;grid-column:1/-1;display:flex;flex-direction:row;gap:16px;align-items:center;padding:12px;border-bottom:1px solid #607368}
 .cinema.os #capabilities .cost-exit b{font-size:22px;min-width:42px}
 .cinema.os #capabilities .cost-exit span{display:block;font-size:14px}
 .cinema.os #capabilities .reconciliation-loop{position:static;grid-column:1/-1;margin-top:12px;display:block}
 .cinema.os #capabilities .reconciliation-loop div{font-size:12px;gap:8px;margin-top:10px}
 .cinema.os #capabilities .reconciliation-loop b{font-size:12px}
 .cinema.services .engagement-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cinema.services .cycle,.cinema.services .example .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cinema.services .cycle article:nth-child(3){border-left:0}
 .cinema.services .cycle article:nth-child(n+3){border-top:1px solid #687c59}
}

@media(max-width:900px){
 .cinema.os #capabilities .module{display:flex;flex-direction:column}
 .cinema.os #capabilities .module-head{order:0;padding:24px}
 .cinema.os #capabilities .module-head h3{max-width:none}
 .cinema.os #capabilities .module-head p{max-width:60ch}
 .cinema.os #capabilities .mock{order:1;border-right:0}
 .cinema.os #capabilities .detail-list{order:2}
 .cinema.os #capabilities .workflow{order:3;align-self:stretch}
 .cinema.os #capabilities .capability-coverage{order:4}
 .cinema.os #capabilities .whole-film{max-width:560px;margin-inline:auto}
 .cinema.os #capabilities .scene-demo{max-width:640px;margin-inline:auto}
 .cinema.services .head,.cinema.services .platform,.cinema.services .faq{grid-template-columns:1fr;gap:24px}
 .cinema.services .head>p{max-width:65ch}
 .cinema.services .grid3{grid-template-columns:1fr;gap:24px}
}

@media(max-width:760px){
 :root{--saddl-header-height:72px}
 .cinema .cinema-header,.cinema .cinema-header nav{height:72px}
 .cinema .cinema-progress{top:71px}
 .cinema .cinema-header nav .cinema-links{gap:12px!important}
 .cinema .cinema-header nav .cinema-links a{font-size:13px;min-height:44px;display:inline-flex!important;align-items:center;padding-block:10px}
 .cinema .cinema-logo{font-size:33px!important}
 .cinema :is(.hero-actions,.actions){flex-wrap:wrap;gap:14px}
 .cinema .btn{max-width:100%;white-space:normal;line-height:1.5;font-size:14px;text-align:center}
 .cinema :is(.textlink,.actions a:not(.btn)){font-size:14px;line-height:1.5}
 .cinema :is(.section-heading p,.ownership p,.contact p,.origin-grid p,.engagement-steps p,.case-channel .result-context,.case-thesis>p){font-size:16px;line-height:1.7}
 .cinema :is(.faqs summary,.faq summary){font-size:16px;line-height:1.5;min-height:48px}
 .cinema :is(.faqs details p,.faq details p){font-size:15px;line-height:1.7}
 .cinema :is(.contact-grid,.origin-grid){grid-template-columns:1fr;gap:28px}
 .cinema .contact-actions .btn{align-self:flex-start}
 .cinema .case-channel{padding:26px 18px}
 .cinema .case-channel .outcome-metrics span{font-size:12px}
 .cinema .case-channel .outcome-metrics span small{font-size:11px}
 .cinema :is(.workspace-intro p,.demo-label,.os-bottom,.detail-merch>span,.channel-detail>p){font-size:13px;line-height:1.6}
 .cinema .workspace-intro h3{font-size:24px}
 .cinema .business-metrics span{font-size:13px}
 .cinema .business-metrics b{font-size:28px}
 .cinema .view-toggle button,.cinema .compact button{font-size:13px;padding:10px 12px}
 .cinema .product-table-wrap{overflow-x:auto}
 .cinema .product-table{min-width:480px}
 .cinema .product-table th{font-size:12px}
 .cinema .product-table td,.cinema .product-table td:last-child{font-size:13px}
 .cinema .product-table .row-product,.cinema .product-table caption{font-size:14px}
 .cinema .detail-body{grid-template-columns:1fr;padding:0 20px 24px;gap:22px}
 .cinema .detail-merch{display:flex;align-items:center;gap:20px;justify-content:center}
 .cinema .detail-merch .merch{width:70px;height:110px;flex-shrink:0}
 .cinema .detail-merch>span{max-width:18ch;text-align:left}
 .cinema .channel-head{font-size:13px}
 .cinema .channel-cost-heading{font-size:14px}
 .cinema .new-legend{font-size:12px;line-height:1.5}
 .cinema .os-bottom button{font-size:14px;min-height:44px}
 .cinema dialog{max-width:calc(100vw - 24px);max-height:calc(100svh - 24px);padding:0}
 .cinema .dialog-top{gap:12px;padding:16px}
 .cinema .dialog-top h3{font-size:22px}
 .cinema .dialog-top button{min-height:44px;flex-shrink:0}
 .cinema .dialog-body{padding:0 16px 20px}
 .cinema .dialog-body p{font-size:14px}
 .cinema.os #capabilities{padding-inline:18px}
 .cinema.os #capabilities .tabs{margin-inline:-18px;padding-inline:18px}
 .cinema.os #capabilities .tabs button{min-height:60px}
 .cinema.os #capabilities .mock{padding:20px 16px}
 .cinema.os #capabilities .detail-list span{font-size:15px}
 .cinema.os #capabilities .listing-film .copy-sheet{width:auto;max-width:100%}
 .cinema.os #capabilities .price-reference>span{min-height:3em}
 .cinema.os #capabilities .price-reference p{font-size:12px}
 .cinema.os #capabilities .floor-boundary:after{font-size:11px}
 .cinema.os #capabilities .stock-film{min-height:560px}
 .cinema.os #capabilities .stock-film .scene-picture{inset:48px 0 150px}
 .cinema.os #capabilities .stock-film .art-wash{display:none}
 .cinema.os #capabilities .stock-film .art-label{top:auto;bottom:76px;left:0;right:auto;width:48%;max-width:none;transform:none;animation:none}
 .cinema.os #capabilities .stock-film .central-position{left:52%;text-align:left}
 .cinema.os #capabilities .stock-film .urgent-allocation{bottom:14px}
 .cinema.os #capabilities .stock-film .supplier-route{left:52%;bottom:14px;text-align:left;border-right:0;border-left:1px solid #d4dfd5}
 .cinema.os #capabilities .stock-film .cinematic-sequence{display:none}
 .cinema.os #capabilities .whole-insight{min-height:0}
 .cinema.os #capabilities .sheet-foot{font-size:11px}
 .cinema.os .film-section iframe{aspect-ratio:auto;height:600px}
 .cinema.os :is(.connection p,.foundation p){font-size:15px;line-height:1.7}
 .cinema.os .connection{grid-template-columns:1fr;gap:12px;padding:22px}
 .cinema.os .connection .arrow{display:none}
 .cinema.services :is(.grid2,.cycle,.example .grid4,.engagement-flow){grid-template-columns:1fr}
 .cinema.services .cycle article+article{border-left:0;border-top:1px solid #687c59}
 .cinema.services .cycle article{padding:24px 0}
 .cinema.services :is(.card p,.card li,.card .fit,.cycle p,.example p,.engagement-flow p){font-size:15px;line-height:1.7}
 .cinema.services .engagement-flow a{min-height:44px;display:inline-flex;align-items:center}
 .cinema.services #scope .scroll{overflow:visible}
 .cinema.services #scope table,.cinema.services #scope tbody{display:block;min-width:0;width:100%}
 .cinema.services #scope thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .cinema.services #scope tr{display:block;padding:22px 0;border-bottom:1px solid #c9c9bd}
 .cinema.services #scope td{display:block;width:100%;padding:10px 0;border:0;font-size:15px;line-height:1.6}
 .cinema.services #scope td:first-child{padding-top:0;font:600 28px/1.15 SaddlDisplay,Arial,sans-serif;color:#28332d}
 .cinema.services #scope td[data-label]:before{content:attr(data-label);display:block;font-size:12px;font-weight:700;color:#28332d;margin-bottom:4px}
 .cinema.services .case-metrics span{padding-inline:8px;font-size:12px}
 .cinema.services .case-metrics strong{font-size:30px}
}
@media(max-width:380px){
 .cinema .cinema-header nav{width:calc(100% - 28px);gap:8px}
 .cinema .cinema-header nav .cinema-links{gap:10px!important}
 .cinema .cinema-header nav .cinema-links a{font-size:12px}
 .cinema .cinema-logo{font-size:30px!important}
 .cinema.os #capabilities .price-reference>strong{font-size:24px}
 .cinema.os #capabilities .price-comparison{gap:6px}
 .cinema.os #capabilities .market-miniatures{gap:5px}
 .cinema.os #capabilities .market-miniatures i{width:16px}
 .cinema.os #capabilities .sheet-question{font-size:24px}
 .cinema.services .case-metrics{grid-template-columns:1fr;border:0;padding:0}
 .cinema.services .case-metrics span{border:0;border-top:1px solid #c4c4b8;padding:12px 0;min-height:0}
}
@media(max-height:500px) and (max-width:1100px){
 .cinema.os #capabilities .tabs{position:static}
 .cinema .cinema-header{position:relative!important}
}
/* The before/after ROAS value needs its own row on narrow phones. */
@media(max-width:480px){
 .cinema .early-proof>.wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .cinema .early-proof .proof-context,.cinema .early-proof small{min-width:0}
 .cinema .early-proof .proof-number{min-width:0}
 .cinema .early-proof .proof-number:nth-child(4){grid-column:1/-1;border-left:0;border-top:1px solid #71877a;padding:18px 0 0}
 .cinema .early-proof .proof-number span{font-size:12px}
 .cinema .early-proof small{font-size:12px;line-height:1.65}
}
@media(max-width:760px){
 .cinema footer .links{display:flex;flex-wrap:wrap;gap:8px 20px;max-width:100%;min-width:0}
 .cinema footer .links a{display:inline-flex;align-items:center;min-height:44px}
 .cinema .footer-inner{min-width:0}
}