/* mobile-center.css — centre every heading and text block at mobile only.
 * Bashō, Aug 21 2026. Method proven on the 32-page CFR build (S278).
 *
 * WHY :where() + !important — a sitewide alignment change meets three kinds of
 * resistance and only the first is easy: inherited defaults (a single rule wins),
 * deeper selectors (need specificity or !important) and INLINE style attributes
 * (only !important beats those). :where() contributes ZERO specificity, so this
 * sweep sits at (0,0,2): it beats ordinary rules via !important, while the real
 * exceptions below — genuinely more specific and also !important — still win.
 *
 * BREAKPOINT: 768px. This site's grids are already single column below it, so
 * nothing is centred while it is still sitting in a column.
 *
 * Loaded LAST and as a separate file on purpose, so desktop equivalence can be
 * proven by aborting this one request and diffing computed style.
 */
@media (max-width: 768px){

  html body { text-align:center; }

  html body :where(header,footer,main,section,article,div,p,
    h1,h2,h3,h4,h5,h6,ul,ol,li,blockquote,figure,figcaption,
    span,small,strong,em,address,label,dl,dt,dd,
    table,thead,tbody,tr,th,td){ text-align:center !important; }

  /* bullets centre with their text rather than hanging off the left margin */
  html body :where(ul,ol){ list-style-position:inside; padding-left:0; }

  /* flex rows need justify-content; text-align does nothing to them */
  html body :where(.footer-bottom,.fbot,.pillars,.evid,.roadmap,.chips,.cta,.book){
    justify-content:center;
  }

  /* ── exceptions, all more specific than the sweep so they win ── */

  /* typed input stays left. A caret that jumps as someone types is a real
     usability defect, not a style choice. Labels and buttons still centre. */
  html body input[type="text"],
  html body input[type="email"],
  html body input[type="tel"],
  html body textarea,
  html body select { text-align:left !important; }
}