/* Relationship diagrams use their own available width, not viewport width. */
.media-frame, .stage-visual { min-width: 0; max-width: 100%; container-type: inline-size; }
.method-index ol { display: grid; grid-template-columns: 1fr; border: 0; }
.method-index li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; padding: .8rem 0; border: 0; border-bottom: 1px solid var(--line); overflow-wrap: normal; }
.method-index li:last-child { border-bottom: 0; }
.method-index strong { margin: 0; font-size: clamp(1.3rem, 2cqi + 1rem, 1.8rem); word-break: normal; overflow-wrap: normal; }
.semantic-row { min-width: 0; grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr); }
.semantic-row > span, .semantic-row > strong { min-width: 0; word-break: normal; overflow-wrap: normal; hyphens: none; }
@container (max-width: 23rem) {
  .semantic-row { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .semantic-row > span, .semantic-row > strong { padding: .65rem .5rem; }
  .semantic-row > i { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 64rem) {
  .segment-opening .opening-grid--wide { grid-template-columns: minmax(0, 1fr); }
  .stage-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .button, .text-link, .arrow-link, .lab-tool-card, .audience-route { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
  .button:hover { box-shadow: 0 .2rem 0 var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}