/* The same product stage, arranged for a phone's available space. */
@media (max-width: 700px) {
  html {
    --mobile-header-height: calc(76px + env(safe-area-inset-top, 0px));
    scroll-padding-top: calc(var(--mobile-header-height) + 16px);
  }

  .site-polished .site-header {
    position: fixed;
    top: 0;
    height: var(--mobile-header-height);
    padding-top: env(safe-area-inset-top, 0px);
    padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
    gap: 10px;
    background: linear-gradient(180deg, #020304fa 70%, #02030400);
  }

  .site-polished:not(.guide-page) .site-header .brand { width: min(142px, 36vw); }
  .site-header .nav-actions { gap: 8px; }
  .site-header .language button, .site-header .menu-toggle { min-width: 44px; min-height: 44px; }
  .site-header .nav-links { top: var(--mobile-header-height); }
  .site-header .nav-links a { min-height: 44px; display: flex; align-items: center; }

  .hero-copy { top: max(13%, calc(var(--mobile-header-height) + 20px)); }
  .hero-copy p { font-size: 16px; line-height: 1.6; }
  .hero-copy .underlined-action { min-height: 44px; font-size: 13px; }
  .inside-copy { top: max(16%, calc(var(--mobile-header-height) + 20px)); }

  .experience-stage:not(.is-open) .hero-switches {
    top: auto;
    bottom: 25%;
    left: 7%;
    right: 7%;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
  }

  .experience-stage:not(.is-open) .hero-switch { width: 44px; height: 44px; }
  .experience-stage:not(.is-open) .feature-switch-heading { display: none; }
  .experience-stage:not(.is-open) .feature-tooltip {
    top: auto;
    bottom: calc(100% + 8px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 64px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-align: center;
    opacity: 1;
    visibility: visible;
  }
  .experience-stage:not(.is-open) .feature-tooltip::after { display: none; }
  .experience-stage:not(.is-open) .feature-tooltip strong { white-space: normal; font-size: 11px; line-height: 1.35; }

  .experience[data-hero-product="mtm"] .hero-mode-label,
  .experience[data-hero-product="sms"] .hero-mode-label { display: none; }
  .stage-footer { bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
}