@media (max-width: 620px) {
  body { padding: 20px 14px 40px; }
  .panel { padding: 18px 16px; }
  .form-row { gap: 18px; }
  input[type="text"] { width: 100%; }
  .form-group { width: 100%; }
  button#analyze-btn { width: 100%; padding: 15px 34px; }
  .consensus { padding: 18px; }
  .consensus-right { text-align: left; }
  .tf-card { padding: 18px; }
  .tf-pill { padding: 10px 15px; font-size: 12px; }
  .stats-row { gap: 13px; }
  .ticker-half { gap: 26px; padding-right: 26px; }
  .tick { font-size: 11px; }
  .brand { gap: 12px; }
  .scan-chart { height: 128px; }
  .scanner { padding: 16px 16px 14px; }
  .sign { font-size: 12px; padding: 10px 16px; letter-spacing: 0.05em; }
  .intro-signpost { gap: 9px; }
  .intro-skip { bottom: 22px; right: 22px; }
  .modal { padding: 20px 18px; max-height: 84vh; }
  /* .user-menu-wrap sits on the header's right on desktop (where the
     trigger has room to its left), so the dropdown anchors via `right: 0`
     and grows leftward. Below this width the header wraps and the trigger
     lands on the left instead — the same anchor then pushes the menu off
     the left edge of the screen. Flip the anchor so it grows rightward. */
  .user-menu { left: 0; right: auto; }
}
/* touch devices: no hover — keep cards flat, rely on tap interactions */
@media (hover: none) {
  .tf-card::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}