/* One mobile type scale. Desktop, hero display type and graphic numerals remain unchanged. */
@media (max-width:760px) {
  :root {
    --mobile-section-title:clamp(1.75rem,7.5vw,2rem);
    --mobile-card-title:1.25rem;
    --mobile-body:1rem;
    --mobile-label:.875rem;
    --mobile-meta:.75rem;
  }

  /* All eight category labels, including the separately marked-up FAQ. */
  main .section-marker,
  main .section-marker>span,
  main .section .eyebrow,
  #faq .faq-title>.marker-name {
    font-size:var(--mobile-meta);
    line-height:1.7;
    letter-spacing:.04em;
  }
  main .section-marker {flex-wrap:wrap;gap:8px 18px}

  /* All eight section headlines share the same scale at each viewport width. */
  main .section h2,
  #business>.business-introduction>h2,
  #why-join .opportunity-intro h2,
  #faq .faq-title h2 {
    font-size:var(--mobile-section-title);
    line-height:1.65;
    letter-spacing:.025em;
    overflow-wrap:anywhere;
  }

  #business .business-card>h3,
  main .company-block h3,
  main .phage-values h3,
  main .person-meta h3,
  main .founder-message h3,
  main .process-diagram h3,
  main .person-quote {
    font-size:var(--mobile-card-title);
    line-height:1.75;
  }

  main .mission-body>p:not(.lead),
  main .mission .purpose-type,
  main .section-heading>p,
  main .section-heading>div>p,
  #business>.business-introduction>p,
  #business .business-summary,
  #why-join .opportunity-intro>div>p,
  main .values-title>p,
  main .phage-values p:not(.value-name),
  main .founder-message p:not(.section-note),
  main .process-diagram p,
  #faq .faq-title>p,
  #faq details p,
  main .join-panel .join-bottom p {
    font-size:var(--mobile-body);
    line-height:2;
  }
  #faq summary {font-size:var(--mobile-body);line-height:1.85}

  #business .business-caption,
  main .phage-values .value-name,
  main .person-meta>span,
  main .company-block dt,
  main .company-block dd,
  main .process-stage,
  main .detail-trigger,
  main .person-card>.text-link,
  main .job-filters button,
  main .join-panel .button,
  footer .footer-links,
  footer .footer-links button {
    font-size:var(--mobile-label);
    line-height:1.8;
  }
  main .person-meta h3 small,
  main .process-diagram small,
  main .job-category,
  main .job-type,
  main .section-note,
  main .map-link-hint,
  main .workspace-thumbs button span,
  main .join-panel .join-top>.eyebrow,
  footer .footer-bottom {
    font-size:var(--mobile-meta);
    line-height:1.8;
  }
  .workspace-feature #workspace-slide-title {font-size:var(--mobile-label);line-height:1.8}
  .workspace-feature figcaption {flex-wrap:wrap;gap:12px}

  /* Preserve the approved Japanese/English job-title hierarchy. */
  main .job h3 {font-size:1.125rem;line-height:1.8}
  main .job p {font-size:var(--mobile-label);line-height:1.8}

  .mobile-nav .menu-link .menu-link-copy>span {font-size:1.375rem;line-height:1.5}

  /* Equal roles stay equal inside Purpose, Business and member dialogs too. */
  #detail-dialog .dialog-title,
  #detail-dialog[data-view="business"] .dialog-title {font-size:1.5rem;line-height:1.65}
  #detail-dialog .dialog-label,
  #detail-dialog[data-view="business"] .dialog-label,
  #detail-dialog .purpose-statement .statement-label {font-size:var(--mobile-meta);line-height:1.8}
  #detail-dialog .dialog-body>h3,
  #detail-dialog .purpose-statement h3,
  #detail-dialog .team-story-header h3,
  #detail-dialog .business-editorial h3 {font-size:var(--mobile-card-title);line-height:1.75}
  #detail-dialog .dialog-body>p,
  #detail-dialog .purpose-statement>p:last-child {font-size:var(--mobile-body);line-height:2}
  #detail-dialog .team-story-header .team-story-role,
  #detail-dialog .team-story-header p[lang="en"] {font-size:var(--mobile-label);line-height:1.8}
  #detail-dialog .business-editorial h4,
  #detail-dialog .business-editorial :is(.be-audiences,.be-care-steps,.be-research-steps,.be-cycle-flow,.be-capability-heading,.be-consent) h4 {font-size:1.125rem;line-height:1.75}
  #detail-dialog .business-editorial .be-case h4 {font-size:var(--mobile-card-title)}
  #detail-dialog .team-story-header>div {min-width:0;overflow-wrap:anywhere}
}