/* Phones and narrow windows (the web version at qunasys.com/en/readiness-check, opened from a QR code).
   Loaded after style.css on every screen; the kiosk iPad (landscape, 1024px and wider) never matches.
   One column, normal page scrolling, the instrument shrinks to a progress mark in the top bar. */
@media (max-width: 900px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }

  /* top */
  .top-page { height: auto; overflow: visible; }
  .top-grid { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .top-left { padding: 20px 16px 28px; }
  .top-left .logo { width: 120px; }
  .top-h1 { margin-top: 28px; font-size: clamp(44px, 13vw, 64px); }
  .top-cta { margin-top: 24px; }
  .top-cta .btn { min-height: 64px; padding: 0 24px 0 28px; font-size: 22px; }
  .top-cta .btn svg { width: 26px; height: 26px; }
  .top-fine { padding-top: 20px; font-size: 15px; }
  .top-right { padding: 24px 16px 20px; }
  .top-ins { width: min(72vw, 320px); }
  .top-ins .ins-center { font-size: 110px; }
  .top-meta { width: 100%; gap: 12px; }
  .who { --who-fs: 22px; gap: 12px; }
  .who .badge { width: 48px; height: 48px; }
  .who .badge .ico { width: 26px; height: 26px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts-half { padding: 12px 16px; gap: 24px; }
  .facts-half + .facts-half { box-shadow: inset 0 1px 0 rgba(0, 35, 55, .1); }
  .fact b { font-size: 40px; }
  .fact span { font-size: 16px; }
  .fact small { font-size: 13px; }

  /* sector, size, about, question: the navy column becomes a bar with the logo and a small instrument */
  .q-page { height: auto; overflow: visible; }
  .q-grid { height: auto; min-height: 100vh; min-height: 100dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .q-left { flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 16px; }
  .q-left .logo { width: 112px; }
  .q-ins-wrap { flex: none; margin: 0; }
  .q-ins { width: 64px; margin: 0; }
  .q-ins .ins-label, .q-ins .ins-center { display: none; }
  .q-right { padding: 16px 16px 28px; }
  .q-back { width: 44px; height: 44px; }
  .q-back svg { width: 22px; height: 22px; }
  .q-step { font-size: 17px; }
  .q-step b { font-size: 26px; }
  .q-step i { font-size: 20px; }
  .q-text { margin-top: 16px; font-size: clamp(22px, 6.4vw, 28px); }
  .setup-h { font-size: clamp(28px, 8vw, 34px); }
  .q-hint { font-size: 15px; }
  .opts { flex: none; margin-top: 16px; gap: 10px; }
  .opts li { flex: none; min-height: 56px; }
  .opt { grid-template-columns: 40px minmax(0, 1fr) 30px; column-gap: 12px; padding: 10px 12px 10px 8px; border-radius: 12px; }
  .opt-lvl { width: 40px; height: 40px; font-size: 22px; border-radius: 8px; }
  .opt-txt { font-size: 16px; }
  .opt-check { width: 30px; height: 30px; }
  .opt-check svg { width: 18px; height: 18px; }

  .tiles { flex: none; margin-top: 16px; grid-template-rows: none; grid-auto-rows: minmax(104px, auto); gap: 10px; }
  .tiles .tile.is-wide { min-height: 60px; }
  .tile { padding: 12px 12px 12px 14px; border-radius: 14px; }
  .tile-ico { width: 44px; height: 44px; }
  .tile-ico .ico { width: 26px; height: 26px; }
  .tile-t { font-size: 17px; padding-right: 26px; }
  .tile .opt-check { right: 10px; top: 10px; width: 28px; height: 28px; }
  .tile.is-wide .opt-check, .tile-row .opt-check { top: 50%; margin-top: -14px; right: 12px; }
  .tile.is-wide .tile-ico { width: 40px; height: 40px; }
  .tiles-size { grid-auto-rows: minmax(84px, auto); }
  .tile-row { gap: 16px; padding-left: 16px; }
  .tile-row .tile-t { font-size: 17px; }
  .tile-row .tile-t b { font-size: 34px; }
  .tile-row .tile-t small { font-size: 14px; }

  .notes { flex: none; margin-top: 16px; grid-auto-rows: auto; }
  .notes li { gap: 16px; padding: 14px 0; }
  .note-ico { width: 52px; height: 52px; }
  .note-ico .ico { width: 28px; height: 28px; }
  .notes b { font-size: 21px; }
  .notes p span { font-size: 15px; }
  .about-end { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 20px; }
  .about-go { min-height: 64px; min-width: 0; padding: 0 24px; font-size: 24px; justify-content: space-between; }
  .about-go svg { width: 26px; height: 26px; }
  .how { min-height: 60px; font-size: 17px; padding: 0 12px 0 18px; }
  .how .box { width: 40px; height: 40px; }
  .how-panel { font-size: 15px; padding: 14px 16px 14px 36px; }

  /* summary */
  .s-bar { height: 60px; gap: 12px; padding: 0 16px; }
  .s-bar .logo { width: 112px; }
  .s-bar .btn { min-height: 44px; font-size: 15px; padding: 0 14px; }
  .s-hero { height: auto; min-height: 0; max-height: none; grid-template-columns: minmax(0, 1fr); }
  .s-score { padding: 24px 16px 28px; gap: 28px; }
  .s-bandname { font-size: clamp(56px, 17vw, 88px); }
  .s-bandname.is-long { font-size: clamp(44px, 12.5vw, 64px); }
  .s-scale { padding-bottom: 60px; }
  .s-lead { font-size: 22px; }
  .s-vs div { font-size: 15px; gap: 10px; }
  .s-vs b { font-size: 28px; }
  .s-cta-btn { min-height: 64px; font-size: 18px; white-space: normal; text-align: left; padding: 10px 20px; }
  .s-lanes { padding: 24px 16px 16px; }
  .s-lanes .chart-host { flex: none; height: 560px; }
  .ln-band-lbl:not(.on) { display: none; }   /* four band names do not fit a phone; yours stays */
  .sec-head h2, .s-prof-text h2 { font-size: 26px; }
  .legend { font-size: 15px; gap: 14px; }
  .lane-tools { font-size: 15px; flex-wrap: wrap; }
  .lane-tools .btn { min-height: 44px; font-size: 15px; padding: 0 16px; }
  .s-profile { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 32px 16px; }
  .s-call dt { font-size: 14px; }
  .s-call dd { font-size: 22px; }
  .s-call dd b { font-size: 28px; }
  .s-end { padding: 32px 16px 28px; gap: 24px; }
  .s-book { flex-direction: column; align-items: flex-start; gap: 16px; }
  .s-book h3 { font-size: 28px; }
  .s-book p { font-size: 16px; }
  .fineprint { font-size: 14px; }

  /* form */
  .f-grid { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .f-left { padding: 14px 16px; }
  .f-left .logo { width: 112px; }
  .f-unlock { display: none; }
  .f-ho { flex-direction: row; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; }
  .f-right { padding: 20px 16px 32px; }
  .f-head { min-height: 0; }
  .f-h { font-size: 28px; }
  .f-fields { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  .fld label { font-size: 15px; }
  .fld input, .fld select { font-size: 17px; min-height: 52px; }   /* 16px+ keeps iOS from zooming in */
  .chk-box { width: 32px; height: 32px; }
  .chk-t { font-size: 15px; padding-top: 4px; }
  .link { margin-left: 48px; font-size: 15px; min-height: 40px; }
  .f-legal { font-size: 14px; margin-top: 14px; }
  .f-actions { flex-wrap: wrap; gap: 12px; }
  .f-actions .btn { min-height: 56px; flex: 1 1 auto; justify-content: center; }
  .f-actions .btn-teal { font-size: 18px; padding: 0 20px; }
  .f-sum { flex-basis: 100%; font-size: 15px; }
  .sheet-card { padding: 24px 16px 28px; border-radius: 20px 20px 0 0; max-height: 85vh; overflow: auto; }
  .sheet h3 { font-size: 26px; }
}