@media (max-width: 600px) {
  .container { padding-inline: 22px; }
  .site-header { padding-block: 26px; }
  .logo { gap: 14px; }
  .logo-mark { width: 27px; }
  .logo-type { padding-left: 14px; font-size: 15px; }
  .logo-expanded { font-size: 8px; }
  .hero { padding-block: 32px 40px; }
  .hero h1 { font-size: clamp(38px, 10vw, 60px); }
  .hero-description { max-width: 310px; margin-block: 24px 30px; }
  .message-form { padding: 18px; border-radius: 14px; }
  .message-form textarea { min-height: 110px; }
  .message-actions { flex-wrap: wrap; gap: 16px; margin-top: 16px; }
  .reply-field { flex-basis: 100%; }
  .site-footer { padding-block: 20px 28px; font-size: 10px; }
}
@media (max-height: 800px) and (min-width: 601px) {
  .site-header { padding-block: 24px; }
  .hero { padding-block: 20px 32px; }
  .hero h1 { font-size: clamp(52px, 10vh, 72px); }
  .hero-description { margin-block: 20px 24px; }
  .site-footer { padding-block: 16px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .send-button { transition: none; }
  .message-example-caret { display: none; animation: none; }
}