/* ===================================================================
 * Mobile fixes
 * -------------------------------------------------------------------
 * Loaded last. Two things the template got wrong on phones:
 *  1. Below 400px the root font size drops to 9.4px, which pushed many
 *     small uppercase labels down to 8-10px. They get a 11px floor here.
 *  2. Several text links were 17-23px tall. They get a 44px tap area
 *     (padding + negative margin, so the layout does not move).
 * =================================================================== */

@media only screen and (max-width: 600px) {

  /* 1. legibility floor for small labels */
  .risk-cta__meta,
  .scroll-cue__text,
  .logo-section__title,
  .eyebrow,
  .sources,
  .how__caption,
  .step__num,
  html body .integration-strip li,
  .journey__scenario-badge,
  .journey__step-label,
  .journey__page-num,
  .journey__scenario,
  .journey__fp-sub,
  .journey__meta-label,
  .journey__play,
  .info-eyebrow,
  .ix-tab,
  .ix-l,
  .ix-kicker,
  .ix-bar__k,
  .ix-note,
  .calc-eyebrow,
  .calc-control__head label,
  .calc-scale span,
  .calc-meta,
  .calc-meta b,
  .result-label,
  .result-label span,
  .footer-col h3,
  .footer-base p {
    font-size: max(1.15rem, 11px);
  }

  /* 2. tap targets */
  .footer-col a,
  .info-email,
  .s-cta a.btn-ghost {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* inline link inside a sentence: grow the hit area without moving text */
  .faq__head .lede a {
    padding: 1.4rem 0.3rem;
  }

  .journey__play {
    min-height: 44px;
  }

  .home-social a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}