/* Three visible text sizes across the mobile page and embedded previews.
   Phone geometry stays small; typography compensates for its .8 × .86 scale. */
@media (max-width: 760px) {
  body {
    --mobile-type-render-scale: 1;
    --mobile-type-heading: calc(24px / var(--mobile-type-render-scale));
    --mobile-type-body: calc(13px / var(--mobile-type-render-scale));
    --mobile-type-label: calc(11px / var(--mobile-type-render-scale));
    font-size: var(--mobile-type-body);
  }

  body:has([data-phone-demo]) { --mobile-type-render-scale: .688; }
  body:has(.story-demo[data-phone-demo]) { --mobile-type-render-scale: .8; }

  /* Inherit by default, rather than accumulating component-specific sizes. */
  body *, body *::before, body *::after { font-size: inherit !important; }
  body :is(button, input, textarea, select) { font-size: var(--mobile-type-body) !important; }
  body :is(h1, .section-intro h2, .faq-section h2, .footer-copy h2, .contact-dialog h2) { font-size: var(--mobile-type-heading) !important; line-height: 1.2 !important; }
  body :is(p, q, input, textarea, .bubble, .agent-response, .private-question) { line-height: 1.5 !important; }

  body :is(small, time, .source, .date, .day, .today, .story-label, .tab-name,
    .private-turn > span, .draft-recipient span, .draft-controls > span,
    .citation, .eyebrow, .calendar-date > span, .invite-card dt, .invite-card dd span, .draft-label, .sent-status, .reminder-status, .source-receipt,
    .screen-switcher button, .schedule-caption, .schedule-peek, .suggestion,
    .flight-ticket span, .departure-plan span, .departure-plan small,
    .list-preview, .list-time, .contact-preview, .recent, .recents-heading,
    .reel-caption span, .footer-meta, .access-privacy) {
    font-size: var(--mobile-type-label) !important;
    line-height: 1.4 !important;
  }
}