/* Keep online-care forms usable on small screens without changing desktop layouts. */
@media (max-width: 700px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout > .card { min-width: 0; }
  .field-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
  .layout input, .layout select, .layout textarea { min-width: 0; max-width: 100%; }
}
@media (max-width: 420px) {
  .header-inner { gap: .35rem; }
  .wordmark { width: 100px; height: auto; }
  .header-cta { min-width: 0; padding-inline: .7rem; font-size: .8rem; }
}

/* Keep the review-hours notice centered and fully inside narrow phone screens. */
@media (max-width: 700px) {
  .page-hero .review-hours-notice {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    padding-inline: 0.5rem;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Homepage notice is outside the padded hero; keep its text off phone edges. */
@media (max-width: 700px) {
  .review-hours-notice {
    box-sizing: border-box;
    display: block;
    scroll-margin-top: 110px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin-inline: 1rem;
    padding-inline: 0.5rem;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}