/* Homepage-only phone sample. Tablets/unfolded screens and desktop retain
   their existing layout. Do not scale the root, disable zoom or alter motion. */
@media (max-width: 760px) {
  html:root body {
    --home-phone-display: var(--compact-display);
    --home-phone-heading: var(--compact-section);
  }

  html:root body:not(.secondary-body) main .hero-copy h1 {
    font-size: var(--home-phone-display) !important;
    font-weight: 600 !important;
    font-variation-settings: normal;
    line-height: 1.35 !important;
  }

  html:root body main .hero-kicker { margin-bottom: 20px; gap: 10px; }
  html:root body main .hero-kicker::before { width: 8px; height: 8px; }
  html:root body main .hero-lead { margin-top: 20px; }
  html:root body main .hero-actions { margin-top: 26px; gap: 10px; }
  html:root body main .hero-actions .button { padding-inline: 18px; min-height: 46px; }

  /* Animated characters have their own legacy !important weight. Override
     both the heading and its letters without changing the animation itself. */
  html:root body main .section-heading .char-title {
    font-size: var(--home-phone-heading) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }
  html:root body main .section-heading .char-title span {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
  }
  html:root body main .section-heading { gap: 16px !important; }
  html:root body main .section-heading > p { margin-block: 0; }

  html:root body main :is(.hero-lead, .section-heading > p, .funding-spotlight-summary,
    .ecosystem-accordion-lead, .forum-copy p, .impact-panel-copy p, .anniversary-expand-copy p,
    .coverage-map-copy p) {
    font-size: var(--compact-body) !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
  }
  html:root body main .funding-data-heading > p:not(.section-label) { margin-top: 0; }

  html:root body main .funding-spotlight h2 {
    font-size: var(--home-phone-heading) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }
  html:root body main :is(.ecosystem-accordion-title, .forum-copy h3,
    .impact-panel-header h3, .impact-honors-heading h3, .anniversary-expand-copy h3,
    .application-title, .application-panel h2) {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
  }
  html:root body main :is(.forum-copy h3 a, .ecosystem-accordion-title span,
    .impact-activity-row strong, .metric strong) { font-weight: 600 !important; }

  html:root body main .news-card h3 {
    font-size: .9375rem !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
  }
  html:root body main .news-card h3 a { font-weight: inherit !important; }
  html:root body main .coverage-map-copy strong {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
  }
  html:root body main .funding-coverage-shell {
    gap: 24px;
    /* Keep breathing room above the title at the narrow 680px breakpoint;
       horizontal padding and the map's interaction area stay unchanged. */
    padding-top: 44px;
  }

  html:root body main .metrics-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --metric-fit-min-size: 32px;
  }
  html:root body main .metric { min-height: 136px; padding: 20px 8px; }
  html:root body main .metric strong { gap: 6px; }
  html:root body main .metric:nth-child(2n) { border-right: 0; }

  /* Keep the approved section tracks, map controls, horizontal articles,
     expansion interactions, form input sizes and >=44px touch targets. */
}