/* Version 117: responsive refinements shared by all pages.
   Preserve text scale and content; allow tracks and controls to shrink rather
   than concealing overflow at the document level. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
main, .site-footer, .site-header > *, .header-actions { min-width: 0; }

/* The header may become taller when text is enlarged. Without JavaScript it
   remains in document flow. The small layout observer enables its fixed
   position and synchronizes the existing --header offsets with its height. */
@media screen {
  :root { --header-min-height: 94px; }
  .site-header {
    position: relative;
    inset: auto;
    height: auto;
    min-height: var(--header-min-height);
    padding-block: 12px;
  }
  main { padding-top: 0; }
  html.header-layout-ready { scroll-padding-top: calc(var(--header) + 84px); }
  html.header-layout-ready .site-header {
    position: fixed;
    top: 0;
    left: var(--rail);
    right: 0;
  }
  html.header-layout-ready main { padding-top: var(--header); }
}
@media screen and (min-width: 1800px) { :root { --header-min-height: 104px; } }
@media screen and (max-width: 900px) { :root { --header-min-height: 88px; } }
@media screen and (max-width: 650px) { :root { --header-min-height: 82px; } }

:is(.section-head, .direction-panel, .direction-tabs, .purpose-grid,
    .about-signature, .future-path, .visual-panel, .footer-top,
    .footer-brand, .resolution-layout, .path-tabs, .service-browser-head,
    .service-grid, .process-grid, .four-grid, .values-grid) > * {
  min-width: 0;
}

:is(.reading, .section-head, .direction-panel, .purpose-card,
    .signature-copy, .future-step, .story-copy, .footer-top,
    .path-panel, .dialog-content, .resource-card) {
  overflow-wrap: anywhere;
  word-break: normal;
}

:is(.actions, .direction-links, .resource-card, .dialog-content) :is(a, button) {
  max-inline-size: 100%;
  min-inline-size: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.dialog-content, .dialog-content > *, .dialog-content form,
.choice > *, .search-result > *, .search-field { min-inline-size: 0; }
.dialog :is(input:not([type="checkbox"]), select, textarea) {
  max-inline-size: 100%;
  min-inline-size: 0;
}
.dialog :is(.choice, .text-link) { overflow-wrap: anywhere; }
.dialog .actions { flex-wrap: wrap; }
.footer-top a, .footer-legal a { overflow-wrap: anywhere; }

body[data-page] :is(.idp-example, .inp-example, .llp-example,
    .ldp-example, .sdp-example, .inp-effect) > span:last-child,
body[data-page] .inp-core > div,
body[data-page] .explorer-card-heading > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
body[data-page] :is(.bp-modes, .cf-modes, .cp-modes, .crp-modes,
    .dcp-modes, .hwp-modes, .hhs-modes) { flex-wrap: wrap; }
body[data-page] :is(.bp-modes, .cf-modes, .cp-modes, .crp-modes,
    .dcp-modes, .hwp-modes, .hhs-modes) > button {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Keep the document timeline's intentional horizontal scrolling local to its
   labelled, keyboard-focusable region, rather than stretching the page. */
body[data-page="document-your-dispute"] .document-table-wrap {
  min-inline-size: 0;
  overscroll-behavior-inline: contain;
}
body[data-page="document-your-dispute"] .document-table-wrap:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .section-head { flex-wrap: wrap; }
  .section-head > p { max-width: 100%; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .visual-panel { grid-template-columns: minmax(0, 1fr); }
  .visual-panel .story-copy { padding: clamp(28px, 6vw, 50px); }
  .visual-panel .story-image { min-height: 320px; }
  .visual-panel:nth-of-type(even) .story-image { order: 0; }
  .visual-panel:nth-of-type(even) .story-copy { height: auto; }
  .future-path { grid-template-columns: minmax(0, 1fr); }
  .purpose-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 650px) {
  .site-header :is(.header-search, .menu-button, .header-vcard) {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    justify-content: center;
  }
  .site-header .header-actions { gap: 4px !important; flex-shrink: 0; }
  .site-header .brand { min-width: 0; }
  .site-header .brand-name { white-space: normal; }
  .site-header .brand-emblem { flex-shrink: 0; }
  /* The ordinary Solutions link remains available when scripts are disabled. */
  .site-header .solutions-fallback {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .topic-nav { scroll-padding-inline: 6%; overscroll-behavior-inline: contain; }
  .topic-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .visual-panel .story-image { min-height: 0; }
  .path-panel { padding: clamp(20px, 5vw, 27px); }
  .path-panel h3 { font-size: clamp(1.75rem, 6.5vw, 2.125rem); line-height: 1.2; }
  .dialog .close-dialog { min-width: 44px; min-height: 44px; }
  .dialog-content { padding-top: 60px; }
  .dialog .choice { gap: 12px; }
  .back-top { bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* A single column gives full use-case labels room on phones. Larger screens
   retain the component's original two/three-column arrangement. */
@media (max-width: 520px) {
  body[data-page] :is(.business-cases-tabs, .businesses-cases-tabs,
      .consumer-cases-tabs, .contractor-cases-tabs, .credit-cases-tabs,
      .debt-cases-tabs, .homeowner-cases-tabs, .homeowners-cases-tabs,
      .identity-cases-tabs, .home-cases-tabs, .individuals-cases-tabs,
      .lemon-cases-tabs, .loan-cases-tabs, .services-cases-tabs, .solar-cases-tabs) {
    grid-template-columns: minmax(0, 1fr);
  }
  .actions { align-items: stretch; }
  .actions .btn { flex-wrap: wrap; gap: 10px; }
  .service-grid.is-list .service-card { grid-template-columns: minmax(0, 1fr); }
  .service-grid.is-list .card-visual { grid-row: auto; aspect-ratio: 1.7; }
}

@media print {
  .visual-panel, .duo, .purpose-grid, .future-path { display: block; }
}

@media (max-width: 420px) {
  #mobile-menu .mobile-page-links { grid-template-columns: minmax(0, 1fr); }
}