/* PetHub shared viewport layout. No device sniffing; updates on folding/rotation. */
:where(main,section,article,form,fieldset,.main,.panel,.copy,.wrap){min-width:0}
:where(input,select,textarea,button){max-width:100%}
:where(.table-wrap,.table-responsive,.table-scroll){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
:where(.app,.ins-main,.pethub-results,.pethub-payment){overflow-wrap:anywhere}
:where(.site-nav,.customer-nav,.ins-header,.app-header){gap:12px}
:where(.app-header,.ins-header)>*{min-width:0}
.photo-comparison{grid-template-columns:repeat(2,minmax(0,1fr))}
.photo-comparison figure{min-width:0;margin-left:0;margin-right:0}
.photo-comparison canvas{display:block;width:100%;height:auto}
.photo-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
.owner-check{align-items:flex-start}
.owner-check input{margin-top:5px}
@media(min-width:600px){
 body>.app{width:calc(100% - 48px);max-width:720px}
 body>.app main{padding:30px clamp(24px,4vw,40px) 16px}
 body>.app .app-header{padding:24px clamp(24px,4vw,40px)}
 body>.app .photo-comparison{gap:20px}
}
@media(max-width:1100px){
 .site-nav{flex-wrap:wrap;height:auto}
 .site-nav .nav-links{order:3;flex:1 1 100%;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px}
 .site-nav .nav-tools{margin-left:auto;flex-wrap:wrap}
 .home-unified-copy h1{font-size:clamp(30px,4.3vw,56px)}
 .p-silver-detail{gap:28px}
 .customer-nav{flex-wrap:wrap}.customer-nav nav{gap:12px;flex-wrap:wrap}
 .title-row,.panel-top,.ins-title{flex-wrap:wrap}
 #workspace .main>header{height:auto;min-height:76px;padding:14px 18px;flex-wrap:wrap;gap:12px}
}
@media(min-width:721px) and (max-width:1100px){
 .guide{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:24px;padding:26px 20px}
 .guide .copy h1{font-size:clamp(24px,3.4vw,34px)}
 .guide .role-group button{white-space:normal}
 .guide .device{width:100%;min-width:0}
 .guide .device iframe{zoom:.7;width:100%;height:690px}
 .guide .promise{font-size:13px}
}
@media(min-width:651px) and (max-width:900px){
 #workspace{grid-template-columns:160px minmax(0,1fr)}
 #workspace aside{padding:20px 10px}
 #workspace aside .brand img{width:130px;max-width:100%}
 #workspace aside nav a{padding:10px 8px;white-space:normal}
 #workspace .metrics{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
 #workspace .filters>*{min-width:0;flex:1 1 160px}
}
@media(max-width:599px){
 body>.app{width:100%;max-width:100%;margin:0;border-radius:0}
 .app main{padding-left:16px;padding-right:16px}
 .app-header{padding-left:16px;padding-right:16px}
 .app .footer-privacy{padding:10px 8px;font-size:clamp(10px,3.3vw,14px)}
 .app .footer-privacy strong{font-size:inherit;white-space:normal}
 .customer-nav{padding:16px}.customer-nav nav{font-size:12px}
 .ins-header{flex-wrap:wrap}.ins-main{padding-left:14px;padding-right:14px}
 #workspace .metrics{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
 #workspace .filters input{min-width:0;flex-basis:100%}
 #workspace .title-row .primary{white-space:normal}
}
@media(max-width:380px){
 .site-nav .nav-tools{width:100%;justify-content:space-between;margin-left:0}
 .site-nav .nav-links{gap:10px;font-size:11px}
 .app .photo-toolbar{grid-template-columns:1fr}
 .app .photo-toolbar button{margin-top:4px}
 .app .photo-comparison{gap:10px}
 .app h1{font-size:25px}
 .app .chat-heading{flex-wrap:wrap}
 .app .chat-form textarea{min-width:0}
 .guide .controls{flex-wrap:wrap}
 .guide .copy nav button{white-space:normal}
}