/* Mobile overrides follow the shared, account and marketplace styles. */
.app-startup { max-width: 560px; padding: 35px 0; }
.app-startup h1 { font-size: clamp(32px, 7vw, 48px); }
.app-startup p { margin: 20px 0; line-height: 1.7; color: var(--muted); }
.app-startup a { margin-top: 8px; }

@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { font-size: 16px; }
  main, .app-shell, .hero, .search-field, .categories { min-width: 0; }
  .topbar { margin: 0 20px; min-height: 72px; height: auto; padding-top: env(safe-area-inset-top, 0px); }
  .mobile-brand { min-height: 56px; }
  .demo-pill { font-size: 11px; }
  main { padding: 27px 20px 30px; }
  .hero h1 { font-size: clamp(38px, 10.5vw, 54px); }
  .eyebrow, .section-kicker { font-size: 11px; }
  .hero-copy, .page-heading p, .inbox-heading p { font-size: 15px; line-height: 1.65; }
  .hero-actions .button, .button, .button.small,
  .studio-nav .button, .video-methods .button,
  .publication-actions .button, .composer-actions .button { font-size: 14px; min-height: 48px; }
  .text-button, .media-toolbar button, .media-toolbar a { min-height: 44px; }
  .icon-button, .save-button { width: 44px; height: 44px; }
  .save-button svg { width: 19px; height: 19px; }
  .search-row { flex-wrap: wrap; padding: 0; gap: 0; }
  .search-field { flex-basis: 100%; padding: 3px 14px; gap: 10px; }
  .search-field svg, .search-location svg { width: 18px; height: 18px; flex-shrink: 0; }
  .search-location { width: 100%; border-left: 0; border-top: 1px solid var(--line); padding: 3px 14px; gap: 10px; }
  .search-location select { flex: 1; width: auto; max-width: none; }
  .search-field input, .search-location select, .field input,
  .field select, .field textarea, .custom-question input,
  .filters-grid select, .share-link, .message-composer textarea { font-size: 16px; min-height: 46px; }
  .field { font-size: 14px; gap: 10px; }
  .field small, .notice, .account-footnote, .studio-panel > p,
  .studio-check, .script-box p, .upload-zone small { font-size: 13px; line-height: 1.6; }
  .upload-zone strong, .upload-zone input, .script-box h3 { font-size: 14px; }
  .category { min-height: 44px; font-size: 13px; padding: 10px 13px; }
  .filter-button { width: 44px; min-height: 44px; justify-content: center; }
  .categories { overscroll-behavior-x: contain; }
  .section-heading p, .section-heading .result-count { font-size: 12px; }
  .card-meta-name { font-size: 13px; }
  .card-meta-location { font-size: 12px; }
  .compare-mini { min-width: 44px; min-height: 44px; justify-content: flex-end; }
  .compare-mini svg { width: 19px; height: 19px; }
  .mobile-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 8px max(6px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); }
  .mobile-nav button { min-width: 0; min-height: 50px; padding: 5px 0; gap: 5px; font-size: 11px; }
  .mobile-nav svg { width: 22px; height: 22px; }
  .app-footer { padding: 22px 20px calc(96px + env(safe-area-inset-bottom, 0px)); font-size: 11px; }
  .app-footer button { min-height: 44px; font-size: 11px; }
  .feed-end { font-size: 11px; line-height: 1.6; }
  #toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); font-size: 13px; line-height: 1.5; }
  .compare-bar { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; gap: 12px; }
  .compare-bar p { max-width: none; font-size: 12px; }
  .compare-actions .button, .compare-actions .text-button { min-height: 44px; font-size: 12px; }
  .detail-close { top: calc(12px + env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
  .real-player .player-top { top: calc(22px + env(safe-area-inset-top, 0px)); right: 70px; }
  .detail-tabs { gap: 20px; overflow-x: auto; }
  .detail-tabs button, .question { min-height: 48px; font-size: 14px; }
  .description, .dialog-intro p, .answer-card p,
  .real-player .player-caption p, .info-dialog p { font-size: 15px; line-height: 1.65; }
  .detail-location, .provider strong { font-size: 13px; }
  .detail-category, .fact small, .provider small, .media-credit,
  .media-notice, .question > small, .detail-bottom > p { font-size: 11px; }
  .fact strong, .detail-bottom .button { font-size: 14px; }
  .custom-question button { min-width: 44px; min-height: 44px; }
  .detail-bottom { padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
  .studio-step { font-size: 12px; }
  .studio-step span { width: 24px; height: 24px; flex-shrink: 0; font-size: 11px; }
  .studio-nav { flex-wrap: wrap; }
  .review-row { font-size: 14px; }
  .conversation-item > span, .conversation-item p { font-size: 14px; }
  .conversation-item small { font-size: 12px; }
  .message-bubble > p { font-size: 15px; }
  .message-bubble { min-width: 0; overflow-wrap: anywhere; }
  .message-bubble time, .message-bubble footer button, .message-who,
  .thread-context, .message-composer .account-footnote { font-size: 11px; }
  .message-bubble footer button { min-height: 44px; }
  .thread-header .text-button, .publication-actions .text-button { font-size: 13px; }
  .composer-actions { flex-wrap: wrap; }
  .thread-back { flex-shrink: 0; }
}

@media (max-width: 480px) {
  .cards, .my-listings .cards { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .card-visual { aspect-ratio: 4 / 5; max-height: 530px; border-radius: 13px; }
  .card-top { top: 16px; left: 16px; font-size: 11px; padding: 7px 9px; max-width: calc(100% - 83px); }
  .card-top svg { width: 13px; height: 13px; }
  .save-button { top: 12px; right: 12px; }
  .card-bottom { left: 22px; right: 22px; bottom: 22px; }
  .card-tag { font-size: 11px; }
  .card-title { font-size: 34px; line-height: 1.1; margin-bottom: 12px; }
  .card-price { font-size: 16px; }
  .card-price small { font-size: 12px; }
  .card-play-row { margin-top: 20px; }
  .play-round { width: 44px; height: 44px; }
  .play-round svg { width: 17px; height: 17px; }
  .card-play-row > span:last-child { font-size: 11px; padding: 7px 9px; }
  .mini-avatar { width: 36px; height: 36px; font-size: 12px; }
  .card-meta { gap: 10px; }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .studio-step { flex-direction: column; align-items: center; text-align: center; flex: 1; }
  .studio-account-note { padding: 17px; }
  .account-stats { gap: 28px; }
  .section-heading { flex-wrap: wrap; }
  .detail-main { padding-left: 20px; padding-right: 20px; }
  .detail-bottom { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .media-row { gap: 12px; }
}