/* Mobile title rhythm for audited app detail pages. */
.app-title-mobile-break { display: none; }

@media (max-width: 720px) {
  .app-title-audit .app-split-grid.cca-wide-copy,
  .app-title-audit .section-head.cca-compare-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-title-audit .app-detail-hero h1 {
    max-width: 100%;
    font-size: clamp(29px, 8.2vw, 32px);
    line-height: 1.12;
    letter-spacing: -.075em;
    text-wrap: balance;
  }

  .app-title-audit .app-detail-section .section-head h2,
  .app-title-audit .app-split-grid h2 {
    max-width: 100%;
    font-size: clamp(25px, 7vw, 27px);
    line-height: 1.14;
    letter-spacing: -.07em;
    text-wrap: balance;
  }

  .app-title-audit .app-detail-section h3 {
    text-wrap: balance;
  }

  @supports (word-break: auto-phrase) {
    .app-title-audit main h1,
    .app-title-audit main h2,
    .app-title-audit main h3 {
      word-break: auto-phrase;
    }
  }

  .app-title-mobile-break { display: block; }

  .app-title-audit .app-split-grid .cca-about-heading {
    font-size: 25px;
    letter-spacing: -.085em;
    text-wrap: wrap;
  }

  /* CCA uses deliberate block-line spans; balancing their parent collapses them on mobile. */
  .app-title-audit h2:has(.cca-heading-line) {
    text-wrap: wrap;
  }

  .app-title-audit h2:has(.cca-heading-line) .cca-heading-line {
    width: auto;
    max-width: 100%;
  }
}