/* ============================================================
   SAFFRON MOBILE TYPE FLOOR — 2026-08-10
   For the pages that do NOT load deferred.css (/work, /contact,
   /audit, /7-day, /omnisphere, blog). Each ships its own inline
   CSS with a long tail of 0.55-0.62rem labels, which resolve to
   8.8-11.2px on a 390px viewport — under the size most people can
   read at arm's length.

   Scoped to phones only; desktop typography is untouched. Sizes
   were chosen from a measured census, not guessed, and the slight
   letter-spacing trim keeps the wider glyphs inside their badges.
   ============================================================ */

@media (max-width: 600px) {

  /* eyebrows and section kickers */
  .sec__eyebrow,
  .hero__eyebrow,
  .cw-eyebrow { font-size: 12px; letter-spacing: .14em; }

  /* badges and pills — these sit in tight containers, so they get the
     floor plus a tracking trim rather than a larger jump */
  .m-card__tag,
  .cw-badge,
  .topbar__badge,
  .hero__badge,
  .hero__cta-tag,
  .cred__lbl,
  .defect__sev,
  .perf-tile__lab,
  .score-card__lab { font-size: 11.5px; letter-spacing: .08em; }

  /* secondary meta and captions */
  .m-card__note,
  .defect__loc,
  .perf-tile__sub,
  .sev-tile__sub,
  .score-card__tier { font-size: 12px; }

  /* form labels must never fall under the body floor */
  .form-label { font-size: 13px; }

  /* generic small print */
  small { font-size: 12px; }

  /* data tables read at arm's length too */
  th, td { font-size: 12.5px; }
}

/* ---- Layout guard -------------------------------------------------
   .topbar is a flex row with wrap:nowrap. On /work its contents already
   sat right on the 390px edge, so lifting the badge to the legibility
   floor pushed "Why Us" off-screen (right edge 424px). Letting the bar
   wrap on phones is better than clipping it — the badge becomes visible
   rather than merely smaller. Desktop keeps the single-row layout. */
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; row-gap: .4rem; }
  .topbar__badge { max-width: 100%; }
}

/* ---- Landscape phones ---------------------------------------------
   The floors above key off max-width:600px, so a phone held sideways
   (844x390) fell straight through them — the audit counted 23-38 sub-
   11.4px nodes per page in landscape versus 3-7 upright. Re-apply the
   same floors on any short, touch-driven viewport regardless of width. */
@media (max-height: 500px) and (pointer: coarse) {
  .sec__eyebrow, .hero__eyebrow, .cw-eyebrow { font-size: 12px; letter-spacing: .14em; }
  .m-card__tag, .cw-badge, .topbar__badge, .hero__badge, .hero__cta-tag,
  .cred__lbl, .defect__sev, .perf-tile__lab,
  .score-card__lab { font-size: 11.5px; letter-spacing: .08em; }
  .m-card__note, .defect__loc, .perf-tile__sub, .sev-tile__sub,
  .score-card__tier { font-size: 12px; }
  .form-label { font-size: 13px; }
  small { font-size: 12px; }
  th, td { font-size: 12.5px; }
  .topbar { flex-wrap: wrap; row-gap: .4rem; }
}

/* ---- Touch hit areas -----------------------------------------------
   Footer and topbar text links measured 16-18px tall. Rather than
   resizing them — which would reflow those rows — expand the touch
   target with a centred pseudo-element. The link looks identical and
   the finger gets a 44px box. Only for coarse pointers, and only where
   the parent is not already a large control. */
@media (pointer: coarse) {
  .footer__nav a, .footer__legal a, .footer__mail,
  .topbar a, .topbar__home,
  .contact__meta a, .arrowlink a { position: relative; }

  .footer__nav a::after, .footer__legal a::after, .footer__mail::after,
  .topbar a::after, .topbar__home::after,
  .contact__meta a::after, .arrowlink a::after {
    content: ""; position: absolute;
    left: 0; right: 0; top: 50%;
    height: 44px; min-width: 44px;
    transform: translateY(-50%);
    pointer-events: auto;
  }
}

/* ---- Round 2: measured stragglers ----------------------------------
   The floors above were out-specified by page rules like
   `.cw-card .cw-badge` (0,2,0) beating `.cw-badge` (0,1,0), so a tail
   of 8.8-11.0px text survived. These are the exact nodes left after
   re-auditing staging, raised with !important because a legibility
   floor should not lose a specificity race. Phones only. */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
  .cw-badge            { font-size: 11.5px !important; letter-spacing: .08em; }
  .cw-eyebrow          { font-size: 12px   !important; letter-spacing: .14em; }
  .pricing-table th,
  .pricing-table td,
  td.phrase span       { font-size: 12.5px !important; }

  /* /schedule — the booking funnel, where legibility matters most */
  .brand .tagline      { font-size: 12px   !important; }
  .hero .eyebrow,
  .confirm .eyebrow    { font-size: 12.5px !important; }
  .field .lbl,
  .field .lbl span     { font-size: 13px   !important; }
  .ticket .k,
  .cal-heading         { font-size: 12.5px !important; }
}

/* ---- Round 2: touch targets, with the real selectors ----------------
   The first pass guessed .footer__nav / .topbar, but these pages use
   .page-foot and .topbar__nav. Measured: topbar links 34x17, footer
   links 83x16, contact channel links 302x18. Expanding vertically only
   (left/right pinned to the link's own box) so no link ever widens into
   its neighbour — only the finger's vertical reach grows. */
@media (pointer: coarse) {
  .topbar__nav a, .topbar__home,
  .page-foot a, .cw-foot a, .ch-card a { position: relative; }

  .topbar__nav a::after, .topbar__home::after,
  .page-foot a::after, .cw-foot a::after, .ch-card a::after {
    content: ""; position: absolute;
    left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
  }
}

/* ---- Round 3: touch targets that the ::after could not reach -------
   Measured reach after round 2: .topbar__nav a = 45px (works), but
   .page-foot a = 1px and .ch-card a = 32px — their pseudo-element is
   clipped by an ancestor, and clipped pixels take no taps. Real padding
   cancelled by an equal negative margin gives a genuine 44px box with
   net-zero layout change, and cannot be clipped away. */
@media (pointer: coarse) {
  /* No negative margin: cancelling the padding made adjacent stacked links
     overlap, so a tap near the boundary landed on the wrong link — worse
     than a small target. Let the rows grow instead; a footer ~20px taller
     on a phone is a fair trade for targets a thumb can actually hit. */
  .page-foot a, .ch-card a, .cw-foot a, .topbar__home, .contact__meta a {
    display: inline-block;
    padding-block: 12px;
  }
  .page-foot, .ch-card, .contact__meta { row-gap: .35rem; }
  .page-foot a::after, .ch-card a::after,
  .cw-foot a::after, .topbar__home::after { content: none; }
}