/*!
 * codex-mobile-readability.css
 * Perseus Fans - mobile typography readability layer
 * Version: 20261008v2
 *
 * Scope: phones only (@media max-width:767px).
 * Desktop (>1024px) and tablet (768-1024px) render exactly as before.
 *
 * Background: on phones lplug.min.css sets :root{--font-size:3vw}, which is
 * only 11.25px at a 375px viewport, and *{line-height:inherit} collapses every
 * line-height back to "normal" (~1.2). Body copy therefore renders below the
 * readable floor and multi-line text looks cramped.
 *
 * Loaded after lplug.min.css and the per-page sheets, so rules of equal
 * specificity win by source order.
 */

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

  /* 1. Base text scale: 3vw -> readable floor (375px => 15.75px, 414px => 17px) */
  :root {
    --font-size: clamp(15px, 4.2vw, 17px);
  }

  /* 2. Comfortable line-height for running text */
  body { line-height: 1.6; }
  p, pre, li, dd, dt, td, th, blockquote, figcaption { line-height: 1.6; }

  /* 3. Utility classes whose floors collapse on phones */
  .l-font12 { font-size: clamp(12px, 3.2vw, 13px); }
  .l-font14 { font-size: clamp(14px, 3.7vw, 15px); }

  /* 4. Titles / labels that wrap to 2+ lines on phones */
  .capabilities-banner-text .label { line-height: 1.3 !important; }
  .index-products-hd .name { line-height: 1.3 !important; }
  .index-products-cont > .top .name { line-height: 1.25 !important; }
  .index-capabilities .name { line-height: 1.35 !important; }

  /* 5. /products/ portfolio cards (page has its own px scale, mobile block at 700px) */
  .product-overview-v3 .po-card-link { font-size: 13px !important; line-height: 1.4 !important; }
  .product-overview-v3 .po-card-title { line-height: 1.25 !important; }
  .product-overview-v3 .po-code { font-size: 11px !important; }
}