/* Five building blocks, with reviewed learning feeding the next cycle. */
#how { background: #fff; }
.understanding { margin: 0; }
.understanding__stage { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: stretch; gap: 56px 32px; padding: 0 0 24px; border-radius: 12px; }
.understanding .understanding__card { position: relative; inset: auto; width: auto; min-width: 0; max-width: none; margin: 0; padding: 20px; z-index: 1; border: 1px solid #ccc; box-shadow: none; background: linear-gradient(145deg,rgba(255,255,255,.86),rgba(250,253,255,.62) 45%,rgba(226,234,243,.68)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.understanding .shared-scene__context { font-size: 14px; line-height: 20px; }
.understanding .shared-scene__status { margin-top: 20px; min-height: 54px; align-items: flex-start; font-size: 21px; line-height: 27px; letter-spacing: -.3px; }
.understanding .shared-scene__status svg { margin-top: 4px; width: 20px; height: 20px; }
.understanding__mechanism { min-height: 40px; margin-top: 16px; font-size: 14px; font-weight: 600; line-height: 20px; }
.understanding .shared-scene__detail { margin-top: 8px; font-size: 14px; font-weight: 400; line-height: 21px; }
.understanding .understanding__card--learning { grid-column: 2 / 4; }
.understanding__card--learning .shared-scene__status,
.understanding__card--learning .understanding__mechanism { min-height: 0; }
.understanding__connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; fill: none; stroke: #36a9a8; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.understanding__connections path { vector-effect: non-scaling-stroke; }
.understanding__connections .understanding__return { stroke-dasharray: 4 5; opacity: .8; }
.understanding__caption { margin-top: 16px; text-align: center; font-size: 16px; line-height: 24px; color: #52565b; }
.understanding__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1100px) and (min-width: 901px) {
  .understanding__stage { column-gap: 24px; }
  .understanding .understanding__card { padding: 16px; }
  .understanding .shared-scene__status { font-size: 19px; line-height: 25px; }
}
@media (max-width: 900px) {
  .understanding__stage { grid-template-columns: minmax(0,1fr); gap: 32px; max-width: 560px; margin-inline: auto; padding: 0 0 16px 24px; }
  .understanding .understanding__card { grid-column: auto; padding: 18px; }
  .understanding .shared-scene__status { min-height: 0; margin-top: 16px; font-size: 20px; line-height: 26px; }
  .understanding__mechanism { min-height: 0; margin-top: 12px; }
  .understanding__caption { max-width: 300px; margin: 16px auto 0; }
}
@media (max-width: 380px) {
  .understanding__stage { padding-left: 18px; }
  .understanding .understanding__card { padding: 14px; }
  .understanding .shared-scene__status { font-size: 18px; line-height: 24px; }
}