/* OpsJi · fluid layout. Loaded last.
   Wide screens: the column grows with the screen (up to 1640px), headings and the big visuals scale.
   Phones: long card stacks become swipeable rows. */
:root{--maxw:1180px;--gut:24px}
.wrap{width:min(var(--maxw),calc(100% - 2 * var(--gut)))}
.tp-h1{font-size:clamp(34px,calc(1.6vw + 34px),80px)}
.tp-sub{font-size:clamp(17px,calc(.25vw + 14px),20px);max-width:640px}
.oj-head{max-width:min(calc(var(--maxw) * .76),100%)}
.tp2 .tp-h1{max-width:min(1480px,100%)}
.oj-head h2{font-size:clamp(28px,calc(1.1vw + 26px),58px)}
.oj-band h3{font-size:clamp(26px,calc(.6vw + 24px),40px)}
.t2{max-width:min(100%,calc(var(--maxw) - 100px))}
@media (min-width:1500px){
 :root{--maxw:1320px;--gut:40px}
 #plant .scene,#plant .feed{height:680px}
 #plant .frame{grid-template-columns:minmax(0,1fr) 340px}
 .t2-dia{grid-template-columns:minmax(0,1fr) 380px minmax(0,1fr)}
 .oj-letter p,.oj-faq details p{font-size:16.5px}
}
@media (min-width:1800px){
 :root{--maxw:1480px;--gut:56px}
 #plant .scene,#plant .feed{height:740px}
 #plant .frame{grid-template-columns:minmax(0,1fr) 360px}
 .t2-dia{grid-template-columns:minmax(0,1fr) 420px minmax(0,1fr)}
 .cx{font-size:15px}
 .t2-mid{height:380px}.t2-mid .stage{transform:scale(1.2)}
 .port.in{left:calc(50% - 168px)}.port.out{left:calc(50% + 168px)}
}
@media (min-width:2200px){
 :root{--maxw:1640px;--gut:72px}
 #plant .scene,#plant .feed{height:800px}
 #plant .frame{grid-template-columns:minmax(0,1fr) 380px}
}
@media (max-width:900px){.oj-head{max-width:none}}
@media (max-width:640px){:root{--gut:16px}}
@media (max-width:760px){
 .oj-sec{padding-top:64px}.oj-sec+.oj-sec{padding-top:64px}.oj-last{padding-bottom:64px}
 .oj-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
 .oj-trust>div{padding:14px}
}