/* Keep the desktop composition; give controls room at phone and tablet widths. */
.exchange__label-short { display: none; }

@media (max-width: 1024px) {
  .hero__button,
  .inline-pill,
  .portfolio__tour-button,
  .portfolio__add-button,
  .image-carousel__toggle {
    flex-shrink: 0;
    white-space: nowrap;
    text-wrap: nowrap;
    border-radius: 999px;
    -webkit-tap-highlight-color: transparent;
  }

  .hero__button-label,
  .inline-pill__content,
  .inline-pill__fill { flex-shrink: 0; white-space: nowrap; text-wrap: nowrap; }

  .hero__button { max-width: 100%; }
  .hero__button-arrows { display: none; }
  .hero__returning .inline-pill__outline rect { rx: 19px; ry: 19px; }
  .login-drawer__submit .hero__button-arrows,
  .login-drawer__submit:is(:hover, :focus-visible) .hero__button-arrows { display: inline-flex; width: 14px; margin-left: 0; opacity: 1; }
  .login-drawer__submit .hero__button-arrow { opacity: 1; animation: none; }
  .login-drawer__submit .hero__button-arrow:not(:first-child) { display: none; }
  .site-nav__start { width: auto; flex: 0 0 auto; }
  .site-nav__actions { gap: 10px; }
  .site-nav__float { animation: none; transform: none; }
  .site-nav.is-hovered .site-nav__float { translate: none; rotate: none; }
  .hero__primary-action { flex: 0 1 auto; max-width: 100%; }
  .hero__returning { gap: 10px; }
  .hero__returning .inline-pill__content,
  .hero__returning .inline-pill__fill { min-height: 40px; padding: 8px 14px; }
  .portfolio__tour-button,
  .portfolio__add-button,
  .image-carousel__toggle { min-height: 44px; }

  .exchange__tab,
  .exchange__tab-ink > span { white-space: nowrap; text-wrap: nowrap; }
  .exchange__page-arrow { top: 56px; }
  .exchange__page-arrow--previous { left: 12px; }
  .exchange__page-arrow--next { right: 12px; }
  .exchange__shell { padding-top: 108px; }
  .exchange__scenario-title { gap: 10px 20px; }
  .portfolio__tour { align-items: flex-start; gap: 12px; }
  .portfolio__tour-copy { min-width: 0; }

  /* The floating signature stops here instead of covering the cityscape. */
  .site-footer__inner { padding-bottom: 96px; }
  .scroll-cue--signature {
    bottom: max(var(--signature-bottom, 22px), env(safe-area-inset-bottom));
    max-width: calc(100% - 32px);
  }
}

@media (min-width: 701px) and (max-width: 1024px) {
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .stats__item { padding: 12px 24px; }
  .stats__item:nth-child(odd) { border-inline-start: 0; }
  .stats__item:last-child { grid-column: 1 / -1; justify-self: center; width: min(100%, 340px); padding-inline: 24px; text-align: center; }
  .stats__description { max-width: 260px; font-size: 14px; }
  .stats__item:last-child .stats__description { margin-inline: auto; }
  .portfolio__holdings { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .why-jerry__portrait { float: none; width: min(100%, 260px); margin: 0 auto 28px; }
  .why-jerry__callout { flex-direction: column; align-items: center; gap: 24px; padding: 32px 24px; border-radius: 32px; text-align: center; }
  .why-jerry__callout-action { flex: 0 0 auto; width: auto; max-width: 100%; justify-content: center; }
}

@media (max-width: 700px) {
  .exchange__label-full { display: none; }
  .exchange__label-short { display: inline; }
  .exchange__tab,
  .exchange__tab-ink > span { padding-inline: 4px; font-size: 13px; line-height: 1.25; }
  .exchange__tab-rail { width: calc(100% - 16px); }
  .exchange__timer { flex-basis: 44px; width: 44px; }
  .exchange__timer svg { inset-inline: 1px; }
  .exchange__scenario-title { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .exchange__scenario-title > span { flex: 1 1 100%; }
  .exchange__scenario-reset { min-height: 40px; padding-block: 8px; }
  .portfolio__tour { display: grid; grid-template-columns: 30px minmax(0, 1fr); }
  .portfolio__tour-copy { flex-basis: auto; }
  .portfolio__tour-button { grid-column: 2; justify-self: start; margin-left: 0; }
  .portfolio__holding-foot { flex-wrap: wrap; row-gap: 6px; }
  .getting-started__step-heading { align-items: flex-start; }
  .getting-started__number { flex-shrink: 0; }
}

@media (max-width: 560px) {
  .site-nav__glass { gap: 8px; }
  .site-nav__brand { margin-left: 6px; }
  .site-nav__actions { gap: 6px; }
  .hero__actions { align-items: flex-start; gap: 20px; }
  .hero__returning { font-size: 15px; }
  .scroll-cue--signature { --signature-bottom: 14px; padding-inline: 16px; font-size: 12px; }
}

@media (max-width: 360px) {
  .site-nav__glass { gap: 4px; }
  .site-nav__brand { margin-left: 0; }
  .site-nav__actions { gap: 4px; }
  .exchange__tab,
  .exchange__tab-ink > span { font-size: 12px; padding-inline: 2px; }
}