/* The existing interactive map gets the same opening as the platform window. */
#infrastructure.iw23-section {
  --iw23-width: min(1260px, 100%);
  --iw23-sticky-top: 88px;
}

#infrastructure.iw23-section > .section-heading { margin-bottom: 32px; }
#infrastructure .iw23-explanation { max-width: 1010px; margin-bottom: 25px; }
#infrastructure .iw23-explanation p { font-size: 12px; line-height: 1.7; }
#infrastructure .iw23-tour { position: relative; isolation: isolate; overflow-x: clip; overflow-y: visible; }
#infrastructure .iw23-stage { position: relative; width: var(--iw23-width); margin-inline: auto; min-width: 0; }
#infrastructure .iw23-window { position: relative; display: flex; flex: 0 0 auto; flex-direction: column; width: 100%; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #9e8bff45; border-radius: 19px; background: #111318; box-shadow: 0 20px 100px #0005, 0 0 65px #9e8bff0e; transform-origin: 50% 0; }
#infrastructure .iw23-chrome { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 18px; min-height: 46px; padding: 6px 17px; border-bottom: 1px solid var(--border); background: #171a21; color: var(--muted); font-size: 11px; line-height: 1.4; }
#infrastructure .iw23-chrome > span { display: flex; align-items: center; gap: 10px; }
#infrastructure .iw23-dots { display: flex; gap: 5px; flex-shrink: 0; }
#infrastructure .iw23-dots i { width: 6px; height: 6px; border: 1px solid #646b7c; border-radius: 50%; }
#infrastructure .iw23-dots i:first-child { background: var(--accent); border-color: var(--accent); }
#infrastructure .iw23-chrome-actions { display: flex; align-items: center; gap: 18px; }
#infrastructure .iw23-chrome-actions > span { display: flex; align-items: center; gap: 7px; color: var(--soft); font-size: 10px; }
#infrastructure .iw23-chrome .data-map-controls { gap: 4px; }
#infrastructure .iw23-chrome .data-map-controls button { width: 31px; height: 31px; border-radius: 7px; background: #13161c; font-size: 17px; }
#infrastructure .iw23-chrome .data-map-controls button:last-child { width: auto; padding-inline: 11px; font-size: 10px; }
#infrastructure .iw23-workspace { padding: 10px; min-width: 0; }
#infrastructure .iw23-workspace .data-map-viewport { border-radius: 11px; background-color: #12151c; }
#infrastructure .iw23-window .infra-detail { display: grid; grid-template-columns: 145px minmax(0, 1fr); align-content: center; gap: 7px 20px; min-height: 156px; margin: 12px 0 0; padding: 16px 19px; border: 1px solid var(--border); border-radius: 11px; background: #14171d; box-shadow: none; scroll-margin-top: 110px; }
#infrastructure .iw23-window .infra-detail > .micro { grid-column: 1; grid-row: 1 / 4; align-self: start; padding-top: 4px; font-size: 10px; line-height: 1.6; color: var(--soft); letter-spacing: .08em; }
#infrastructure .iw23-window .infra-detail h3 { grid-column: 2; margin: 0; font-size: 23px; line-height: 1.25; font-weight: 450; letter-spacing: -.035em; }
#infrastructure .iw23-window .infra-detail p { grid-column: 2; max-width: none; margin: 0; font-size: 12px; line-height: 1.65; }
#infrastructure .iw23-window .infra-detail a { grid-column: 2; justify-self: start; margin-top: 3px; font-size: 11px; }
#infrastructure .iw23-hint { flex: 0 0 auto; margin: 10px 3px 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
#infrastructure .iw23-followup { width: var(--iw23-width); margin: 28px auto 0; }
#infrastructure .iw23-followup .infra-note { border-top: 1px solid var(--border); }

#infrastructure .iw23-window.is-opening { will-change: transform; }
#infrastructure .iw23-tour.is-pinned { height: calc(var(--iw23-stage-height, calc(100svh - 108px)) + var(--iw23-distance, 700px)); }
#infrastructure .iw23-tour.is-pinned .iw23-stage { position: sticky; top: var(--iw23-sticky-top); display: flex; flex-direction: column; justify-content: center; height: calc(100svh - 108px); padding-block: 6px; }
#infrastructure .iw23-tour.is-pinned .data-map-viewport { height: var(--iw23-map-height); }
#infrastructure .iw23-tour:not(.is-animated) .iw23-window { transform: none; }

@media (max-width: 1000px) {
  #infrastructure .iw23-window .infra-detail { grid-template-columns: 120px minmax(0, 1fr); gap: 7px 15px; }
  #infrastructure .iw23-window .infra-detail h3 { font-size: 22px; }
}

@media (max-width: 800px) {
  #infrastructure.iw23-section { --iw23-sticky-top: 76px; }
  #infrastructure.iw23-section > .section-heading { margin-bottom: 25px; }
  #infrastructure .iw23-explanation { margin-bottom: 21px; }
  #infrastructure .iw23-explanation p { font-size: 11px; }
  #infrastructure .iw23-window { border-radius: 13px; }
  #infrastructure .iw23-chrome { padding-inline: 13px; gap: 10px; font-size: 10px; }
  #infrastructure .iw23-chrome-actions { gap: 9px; }
  #infrastructure .iw23-chrome-actions > span { display: none; }
  #infrastructure .iw23-workspace { padding: 8px; }
  #infrastructure .iw23-window .infra-detail { display: block; min-height: 0; margin-top: 12px; padding: 22px 18px; }
  #infrastructure .iw23-window .infra-detail > .micro { display: block; padding-top: 0; margin-bottom: 11px; }
  #infrastructure .iw23-window .infra-detail h3 { font-size: 23px; }
  #infrastructure .iw23-window .infra-detail p { margin-top: 12px; font-size: 13px; line-height: 1.7; }
  #infrastructure .iw23-window .infra-detail a { margin-top: 17px; font-size: 12px; }
  #infrastructure .iw23-hint { margin-top: 12px; font-size: 10px; }
  #infrastructure .iw23-followup { margin-top: 26px; }
}

@media (max-width: 520px) {
  #infrastructure .iw23-chrome { flex-wrap: wrap; justify-content: flex-start; padding-block: 10px; gap: 10px; }
  #infrastructure .iw23-chrome-actions { width: 100%; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  #infrastructure .iw23-window { transform: none !important; will-change: auto; }
}