/* Let flex-based quote rows shrink past native form-control widths on desktop. */
:where(.cta-form, .cta form) > div > :where(input, select, textarea) {
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :where(
    main,
    section,
    .container,
    .wrap,
    .detail-body,
    .detail-hero-grid,
    .article,
    .article-wrap,
    .article-block,
    .article-section,
    .sys-section,
    .cases-section,
    .cta,
    .cta-form,
    .cta form
  ) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  :where(
    .container,
    .detail-hero-grid,
    .article,
    .article-wrap,
    .article-block,
    .article-section,
    .cta-form,
    .cta form
  ) > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  :where(main, section, .container, .wrap) > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  img,
  video {
    max-width: 100% !important;
    height: auto;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-grid > * {
    min-width: 0;
  }

  .btn,
  a.btn,
  button.btn,
  .hero .btn,
  .cta .btn,
  .cta-form button {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
  }

  .cta-form > div,
  .cta form > div {
    width: 100%;
    flex-wrap: wrap !important;
  }

  .cta-form > div > *,
  .cta form > div > * {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
  }

  .cta-form,
  .cta form,
  .cta-form > *,
  .cta form > *,
  .cta-form label,
  .cta form label,
  .cta-form div,
  .cta form div,
  .cta-form input,
  .cta form input,
  .cta-form select,
  .cta form select,
  .cta-form textarea,
  .cta form textarea,
  .cta-form button {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .process-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .process-grid::before {
    display: none !important;
  }

  .p-step {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    grid-template-areas:
      "num title"
      "num copy";
    align-items: start;
    gap: 8px 20px;
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .p-step .p-num {
    grid-area: num;
    margin: 0;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  .p-step h4 {
    grid-area: title;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .p-step p {
    grid-area: copy;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  :where(
    .tbl-wrap,
    .cmp-wrap,
    .spec-table-wrap,
    .quote-table-wrap,
    .table-wrap,
    .responsive-table
  ) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .link-row {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .link-row a {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .sys-features li,
  .sys-features li span,
  .sys-features li div {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  :where(.cap-grid, .system-grid, .case-grid, .qc-grid) {
    max-width: 100%;
    min-width: 0;
  }

  :where(.cap, .cases-section, .article-section) :where(p, a, span, li) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}