@media (max-width: 539px) {
  .brand-copy small { display: none; }
  .header-meta { gap: 5px; }
  .screen-card { padding: 20px 16px; border-radius: 18px; }
  .hero-grid { min-height: auto; padding: 28px 19px; border-radius: 22px; }
  .hero-actions, .form-actions, .split-actions, .review-actions, .microphone-actions { display: grid; }
  .hero-actions .button, .form-actions .button, .split-actions .button, .review-actions .button, .microphone-actions .button { width: 100%; }
  .hero-visual { min-height: 230px; }
  .voice-orbit--one { width: 230px; height: 230px; }
  .voice-orbit--two { width: 170px; height: 170px; }
  .voice-card { padding: 23px 18px; }
  .document-meta { display: grid; }
  .stimulus-text { overflow-wrap: anywhere; }
}

@media (max-width: 359px) {
  .site-header { padding-inline: 10px; }
  .brand { gap: 8px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-copy strong { font-size: 1rem; }
  .journey-layout { padding-inline: 8px; }
  .step-list { padding-inline: 5px; }
  .step-list li { font-size: .56rem; }
  .screen-card { padding-inline: 13px; }
}

@media (min-width: 1200px) {
  .journey-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 34px; }
  .screen-card { min-height: 560px; }
}

@media (forced-colors: active) {
  .button, .screen-card, .hero-grid, .document-card, .method-option, .decision-card { border: 1px solid CanvasText; }
  .brand-mark span, .recording-dot { background: CanvasText; }
}
