/* misoshiru.nom — minimal responsive guard rails.
   App pages now use their original per-page layouts/animations again so the hero phone positions
   stay in their intended spots and do not replace the built-in device styling. */

@media(min-width:801px){
 .mn-page-index .feature-card .feature-visual{
   display:grid!important;grid-template-columns:minmax(0,1fr) minmax(135px,40%)!important;
   grid-template-rows:auto minmax(0,1fr) auto!important;gap:15px!important;
   align-items:center!important;padding:24px!important;
   min-height:390px!important;overflow:visible!important;
 }
 .mn-page-index .feature-card .feature-headline{
   position:relative!important;inset:auto!important;grid-column:1/-1!important;
   grid-row:1!important;transform:none!important;margin:0!important;
 }
 .mn-page-index .feature-card .feature-photo{
   position:relative!important;inset:auto!important;grid-column:1!important;
   grid-row:2!important;width:100%!important;height:315px!important;
   overflow:hidden!important;border-radius:22px!important;transform:none!important;
 }
 .mn-page-index .feature-card .feature-photo img{
   width:100%!important;height:100%!important;object-fit:cover!important;
   object-position:50% 36%!important;
 }
 .mn-page-index .feature-card .feature-screen{
   position:relative!important;inset:auto!important;grid-column:2!important;
   grid-row:2!important;align-self:center!important;justify-self:center!important;
   width:min(100%,210px)!important;max-width:210px!important;
   margin:0!important;transform:none!important;
 }
 .mn-page-index .feature-card .feature-index{
   position:relative!important;inset:auto!important;grid-column:1/-1!important;
   grid-row:3!important;transform:none!important;margin:0!important;
 }
}

@media(max-width:760px){
 .mn-page-index .feature-card .feature-visual{height:auto!important;min-height:0!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  gap:14px!important;padding:18px!important;overflow:visible!important;}
 .mn-page-index .feature-card .feature-photo{position:relative!important;inset:auto!important;
  width:100%!important;height:230px!important;display:block!important;overflow:hidden!important;
  border-radius:18px!important;transform:none!important;}
 .mn-page-index .feature-card .feature-photo img{width:100%!important;height:100%!important;
  display:block!important;object-fit:cover!important;object-position:center 38%!important;}
 .mn-page-index .feature-card .feature-screen{position:relative!important;inset:auto!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  transform:none!important;width:min(54%,218px)!important;max-width:218px!important;
  align-self:center!important;margin:0 auto!important;z-index:1!important;}
 .mn-page-index .feature-card .feature-screen img{width:100%!important;height:auto!important;}
 .mn-page-index .feature-card .feature-headline,.mn-page-index .feature-card .feature-index{
   position:relative!important;inset:auto!important;left:auto!important;top:auto!important;
   right:auto!important;bottom:auto!important;transform:none!important;margin:0!important;}
}