/* ══════════════════════════════════════════════════════════════════════════════════
   MESAscale · phone pass. Linked on every page except the growth-diagnostic landing page (which is not touched).
   Three jobs, none of which move a desktop pixel:
     1. line breaks: headings balance, paragraphs never end on a single word
     2. hit areas: small links and icon buttons get an invisible target of 40–44px, the visible size does not change
     3. type floor: labels set under 11px on a phone are lifted to 11px (10px where the label sits in a tight row)
   Chrome and Safari 26 honour text-wrap: pretty, older browsers ignore it and keep the browser's own breaks.
   ══════════════════════════════════════════════════════════════════════════════════ */

/* ───── 1. line breaks ───── */
@media (max-width: 760px) {
  h1, h2, h3, h4 { text-wrap: balance; }
  p, li, dd, blockquote, figcaption, .faq-a, summary { text-wrap: pretty; }
  /* two- and three-line notes read better evened out than with a short tail */
  .cs-next-p, .track-note, .cs-footer-note, .em-funnel-sub, .em-change-desc, .output-notice, .sk-stage-aside, .pc-arch-footer, .form-submit, .apply-badge { text-wrap: balance; }
}

/* ───── 2. hit areas ─────
   ::after where the element has no pseudo of its own; padding that cancels out where it has. */
@media (max-width: 760px) {
  .sf-soc, .sf-ref, .cs-back-link, .cs-next-more, .cs-author-linkedin, .cs-more-all, .cs-mid-hook-link, .tq-li, .jw-link, .cf-cta,
  .contact-info-val, .nav-back, .apply-footer-logo, .site-nav-logo, .cf-dots button, .gdr-step, .footer-logo, .nav-inner > a.logo { position: relative; }
  /* .ann-close is already absolutely placed, so its ::after below hangs off it as it is: giving it position: relative moved the bar's x below its text. (.epa-close is absolute on some pages and static on others, so it gets no pseudo.) */
  .sf-soc::after { content: ''; position: absolute; inset: -6px; }
  .sf-ref::after, .cs-back-link::after, .cs-next-more::after, .cs-author-linkedin::after, .cs-more-all::after, .cs-mid-hook-link::after, .tq-li::after,
  .jw-link::after, .cf-cta::after, .contact-info-val::after, .nav-back::after, .apply-footer-logo::after, .site-nav-logo::after, .footer-logo::after,
  .nav-inner > a.logo::after { content: ''; position: absolute; inset: -12px -4px; }
  .ann-close::after { content: ''; position: absolute; inset: -12px; }
  .cf-dots button::after { content: ''; position: absolute; inset: -16px -3px; }
  .gdr-step::after { content: ''; position: absolute; inset: -12px -8px; }
  /* these already use ::before / ::after for their arrow or underline, so the target grows with padding that is taken back with margin */
  .u-link, .mf-link, .proof-cap-link { padding-block: 8px; margin-block: -8px; }
  /* running text: an inline link grows downward only through padding, which does not move the line */
  .sf-contact-block a, .apply-footer-copy a, .faq-got a, .sf-legal-row a { padding-block: 10px; }   /* footer About / Contact / Terms / Privacy were 15px tall */
}

/* ───── 3. type floor ───── */
@media (max-width: 560px) {
  .cf-meta dt, .cf-hint, .proof-url, .lb-hint-touch,                                                       /* home */
  .clients-eyebrow, .tq-role,                                                                              /* about */
  .contact-info-lbl, .contact-next-title,                                                                  /* contact */
  .form-box-label, .next-hdr > span, .next-step-time, .next-step-num,                                      /* apply */
  .nav-state, .vsl-eyebrow, .vsl-duration, .prep-eyebrow, .studies-eyebrow, .cs-feat-platform,             /* thank-you */
  .cs-stat-detail, .cs-sm-platform, .footer-close-label,
  .hero-eyebrow, .section-eyebrow, .output-eyebrow, .proof-label, .proof-vertical { font-size: 11px !important; }
  .pt-stage, .prep-pill { font-size: 10px !important; }                                                    /* thank-you: stepper labels and chips share a tight row */
}

/* thank-you and confirmation (no menu, so the wordmark, the status and the theme switch share one row): under 350px the status gives way, the headline below says the same thing */
@media (max-width: 350px) {
  .nav-state, .nav-status { display: none !important; }
}

/* apply: the 'Free · No obligation · 60 minutes total' pill left one word on a second line at 320 */
@media (max-width: 360px) {
  .apply-badge { font-size: 11px !important; letter-spacing: .01em !important; }
}