@media (prefers-reduced-motion: reduce) {
  .screen--loading::before {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fab--discover-pulse {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marker-cluster--pulse::before,
  .marker--user::before {
    animation: none;
  }
}

@media (min-width: 769px) {
  .modal__body:not(.modal__body--flush) {
    padding: var(--modal-pad);
  }

  .modal__tabs {
    height: 52px;
  }

  .modal__tab {
    font-size: 0.86rem;
    padding: 0 14px;
  }

  .offer-sheet__avatar {
    width: 64px;
    height: 64px;
  }

  .offer-sheet__name {
    font-size: 1.05rem;
  }

  .offer-sheet__profession {
    font-size: 0.82rem;
  }

  .offer-sheet__actions {
    gap: 8px;
  }

  .offer-sheet__actions .action-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
    padding: 10px 12px;
    font-size: 0.78rem;
    gap: 6px;
  }

  .offer-sheet__actions .action-btn i {
    font-size: 0.78rem;
  }

  .profile-card__top {
    padding: 16px 18px;
    gap: 14px;
  }

  .profile-card__avatar {
    width: 52px;
    height: 52px;
  }

  .profile-card__name {
    font-size: 1rem;
  }

  .profile-card__field {
    padding: 11px 18px;
  }

  .profile-card__value {
    font-size: 0.88rem;
  }

  .pricing__title {
    font-size: 1.28rem;
    white-space: nowrap;
  }

  .pricing__amount {
    font-size: 1.5rem;
  }

  .modal--domain-picker {
    width: min(100%, 520px);
    height: var(--modal-max-h, 80vh);
    max-height: var(--modal-max-h, 80vh);
  }

  .modal--plans,
  .modal--review-compose,
  .report-modal {
    height: auto;
    max-height: none;
  }
}

@media (max-width: 768px) {
  .discover-stage,
  .discover-filters-stage,
  .account-stage {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .account-stage::before,
  .account-stage::after {
    display: none;
  }

  .account-stage .modal {
    max-height: 100%;
  }

  .overlay {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }

  /* Phone: existing fullscreen modals/sheets. Hug cards stay hug via exceptions below. */
  .overlay > .modal,
  .modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .modal--plans .modal__body,
  .modal--review-compose .modal__body,
  .report-modal .modal__body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  .overlay > .modal.modal--account,
  .overlay > .modal:has(.js-account-tab) {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .modal--account .modal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .modal > .searchable-select__panel--modal {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
  }

  .modal:has(.js-request-form-fields),
  .modal:has(.js-offer-save),
  .modal:has(.request-detail__header),
  .modal:has(.sheet-header-bar),
  .modal--domain-picker,
  .modal--review-compose,
  .modal--offer-form,
  .modal--request-form,
  .modal--profile-form,
  .modal--photos-form,
  .modal--plans,
  .modal--filters,
  .report-modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  /* Beat desktop Hug + cap (`.discover-stage .modal:not(.modal--filters)` in app.css). */
  .discover-stage .modal,
  .discover-stage .modal:not(.modal--filters),
  .discover-filters-stage .modal,
  .discover-filters-stage .modal--filters {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .modal--domain-picker .modal__body--domain-picker {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-top: 20px;
  }

  .discover-stage--dialog {
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .discover-stage--lightbox {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .discover-stage--dialog .confirm-modal {
    width: calc(100% - 48px);
    max-width: 340px;
    height: auto;
    max-height: none;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }

  .discover-stage--dialog .modal {
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }

  .intent-stage,
  .signin-prompt-stage,
  .location-stage,
  .account-profile-stage,
  .map-popup-stage,
  .toast-stage {
    padding: 16px 20px;
    align-items: center;
    justify-content: center;
  }

  .toast-stage {
    align-items: flex-end;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .screen--loading,
  .intent-stage,
  .signin-prompt-stage,
  .location-stage,
  .visibility-stage {
    width: 100%;
    height: 100%;
  }

  .visibility-stage {
    padding: 16px 20px;
    align-items: center;
    justify-content: center;
  }

  .visibility-card,
  .location-permission__card {
    max-width: 380px;
    width: 100%;
    max-height: min(90vh, 640px);
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }

  .map-top-bar {
    top: calc(12px + env(safe-area-inset-top, 0px));
    gap: 8px;
    padding-inline: 12px;
  }

  .map-bottom-right {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    right: 12px;
  }

  .fab--discover {
    flex-shrink: 0;
    font-size: 0.78rem;
  }

  .fab--discover i {
    font-size: 1rem;
  }

  .request-form-budget,
  .phone-split--form {
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
  }

  .request-form-budget__amount-col,
  .request-form-budget__currency-col,
  .phone-split--form > .phone-split__dial,
  .phone-split--form > .phone-split__number,
  .phone-split--form > .searchable-select {
    flex: 0 0 calc(50% - 4px);
    max-width: calc(50% - 4px);
    min-width: 0;
  }

  .request-form-budget__amount .form-field,
  .request-form-budget__currency .searchable-select,
  .request-form-budget__currency .searchable-select__trigger,
  .phone-split--form .searchable-select,
  .phone-split--form .searchable-select__trigger,
  .phone-split--form .phone-split__number.form-field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .js-confirm-overlay {
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .js-confirm-overlay .confirm-modal {
    width: calc(100% - 48px);
    max-width: 340px;
    height: auto;
    max-height: none;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }

  body > .overlay:has(.modal--domain-picker) {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }

  .overlay > .lightbox,
  .overlay > .lightbox--fullscreen {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .app-toast--visible {
    transform: translateY(0);
  }
}