/* V11 / The global distribution story lives beside the platform details. */
#platPanels.platform-panel {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 42px;
  padding: 38px;
  min-height: 530px;
  overflow: hidden;
}
.platform-panel-copy { min-width: 0; }
.platform-network {
  min-width: 0;
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #F5F7FB;
  border: 1px solid #E1E7F0;
  border-radius: 13px;
  isolation: isolate;
}
.platform-network-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid #E4E9F2;
}
.platform-network-top > .eyebrow { font-size: 8px; letter-spacing: .12em; color: #60718B; }
.platform-network-top > span:last-child { font-size: 8px; color: #8792A4; }
.platform-network-canvas { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 22px 0; flex: 1; }
.platform-network .network-wrap { position: relative; left: auto; top: auto; transform: none; width: calc(100% - 48px); max-width: 500px; margin: 0 auto; aspect-ratio: 500 / 380; }
.platform-network .network-earth { width: 76%; max-width: 350px; opacity: .5; }
.platform-network .network-node { min-width: 78px; min-height: 70px; padding: 10px; gap: 6px; border-radius: 10px; }
.platform-network .network-node > img { width: 25px; height: 25px; border-radius: 5px; }
.platform-network .network-node > span { font-size: 8px; }
.platform-network .network-node.is-current,
.platform-network .network-node.highlighted { border-color: #4576E9 !important; background: #FAFCFF; box-shadow: 0 0 0 4px #2457E610, 0 9px 24px -15px #2457E64D !important; }
.platform-network .network-node.is-current > span,
.platform-network .network-node.highlighted > span { color: var(--green); font-weight: 600; }
.platform-network .network-path { stroke: #BDD0E8; opacity: .78; }
.platform-network .network-path.is-current { stroke: #7D9DE7; stroke-width: 1.8; opacity: 1; }
.platform-network .network-packet { stroke: #7297E8; opacity: .65; }
.platform-network .network-packet.is-current { stroke: var(--green); stroke-width: 4; opacity: 1; }
.platform-network-caption { padding: 0 24px 13px; text-align: center; }
.platform-network-caption > p { margin: 0; color: #40526D; font-size: 12px; font-weight: 500; line-height: 1.6; }
.platform-network-caption > span { display: block; margin-top: 5px; color: #78869B; font-size: 9px; line-height: 1.7; }
.network-legend { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 0 24px 20px; font-size: 9px; line-height: 1.5; color: #5273AD; }
.network-legend > .status-dot { width: 4px; height: 4px; box-shadow: 0 0 0 3px #2457E60A; }

/* A quiet handoff replaces the earlier, duplicated full-size network. */
.distribution-handoff { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; padding: 24px 35px; text-align: center; }
.handoff-orb { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; width: 82px; height: 82px; flex: none; border-radius: 50%; background: #fff; border: 1px solid #DCE5F4; box-shadow: 0 12px 32px -24px #2457E652; color: var(--green); animation: distribution-orb-float 6s ease-in-out infinite; }
.handoff-orb > .icon { width: 24px; height: 24px; }
.handoff-orb > b { font-size: 18px; line-height: 1.2; font-weight: 600; letter-spacing: -.05em; }
.handoff-orb > i { display: none; }
.handoff-orb::before, .handoff-orb::after { content: ""; position: absolute; inset: -10px; border: 1px solid #B8CFF169; border-radius: 50%; animation: distribution-ready-ring 4s ease-out infinite; }
.handoff-orb::after { animation-delay: -2s; }
.handoff-channels { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; }
.handoff-channels > img { width: 35px; height: 35px; padding: 6px; border: 1px solid #DEE6F2; border-radius: 9px; background: #fff; object-fit: contain; animation: distribution-channel-ready 4s ease-in-out infinite; }
.handoff-channels > img:nth-child(2) { animation-delay: .3s; }
.handoff-channels > img:nth-child(3) { animation-delay: .6s; }
.distribution-handoff > h4 { margin: 20px 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -.035em; line-height: 1.4; color: #2D3C52; }
.distribution-handoff > p { margin: 0; max-width: 310px; font-size: 11px; line-height: 1.8; color: #6C7B91; }
.distribution-handoff > .button { margin-top: 22px; min-height: 40px; padding: 11px 16px; gap: 12px; font-size: 10px; border-radius: 6px; }
.distribution-handoff > .button > .icon { width: 12px; height: 12px; }
.distribution-handoff .handoff-orb,
.distribution-handoff .handoff-orb::before,
.distribution-handoff .handoff-orb::after,
.distribution-handoff .handoff-channels > img { animation-play-state: var(--motion-play-state, paused); }

@keyframes distribution-orb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes distribution-ready-ring { from { transform: scale(.88); opacity: .8; } to { transform: scale(1.38); opacity: 0; } }
@keyframes distribution-channel-ready { 0%, 100% { transform: translateY(0); border-color: #DEE6F2; } 30%, 55% { transform: translateY(-4px); border-color: #ABC4ED; } }

@media (max-width: 1190px) {
  #platPanels.platform-panel { padding: 30px; gap: 28px; }
  .platform-network-top { padding: 15px 17px; }
  .platform-network .network-wrap { width: calc(100% - 40px); }
  .platform-network .network-node { min-width: 70px; min-height: 64px; padding: 9px; }
  .platform-network .network-node > img { width: 23px; height: 23px; }
  .platform-network .network-node > span { font-size: 7px; }
  .platform-network .network-hub { width: 84px; height: 84px; border-radius: 15px; }
  .platform-network .network-hub > b { font-size: 23px; }
}
@media (max-width: 960px) {
  #platPanels.platform-panel { grid-template-columns: minmax(0, 1fr); padding: 28px; gap: 29px; min-height: 0; }
  .platform-panel-copy { max-width: 590px; }
  .platform-network { width: 100%; max-width: 660px; justify-self: center; }
  .platform-network .network-wrap { width: calc(100% - 54px); max-width: 500px; }
  .platform-network .network-node { min-width: 78px; min-height: 70px; gap: 6px; padding: 10px; }
  .platform-network .network-node > img { width: 25px; height: 25px; }
  .platform-network .network-node > span { font-size: 8px; }
  .platform-network .network-hub { width: 90px; height: 90px; border-radius: 16px; }
  .platform-network .network-hub > .icon { width: 18px; height: 18px; }
  .platform-network .network-hub > span { font-size: 8px; }
}
@media (max-width: 700px) {
  #platPanels.platform-panel { padding: 27px 20px 0; gap: 26px; }
  .platform-network { max-width: none; width: calc(100% + 40px); margin-inline: -20px; border-radius: 0 0 13px 13px; border-inline: 0; border-bottom: 0; }
  .platform-network-top { padding: 15px 18px; }
  .platform-network-top > .eyebrow { font-size: 7px; letter-spacing: .1em; }
  .platform-network-top > span:last-child { font-size: 7px; }
  .platform-network-canvas { padding: 22px 0; }
  .platform-network .network-wrap { width: calc(100% - 46px); max-width: 500px; }
  .platform-network .network-earth { width: 84%; opacity: .48; }
  .platform-network .network-node { min-width: 62px; min-height: 51px; gap: 4px; padding: 7px 6px; border-radius: 8px; }
  .platform-network .network-node > img { width: 21px; height: 21px; }
  .platform-network .network-node > span { font-size: 7px; }
  .platform-network .network-node.is-current,
  .platform-network .network-node.highlighted { box-shadow: 0 0 0 3px #2457E610, 0 8px 20px -14px #2457E63D !important; }
  .platform-network .network-hub { width: 65px; height: 65px; gap: 3px; border-radius: 11px; }
  .platform-network .network-hub > .icon { width: 13px; height: 13px; }
  .platform-network .network-hub > b { font-size: 19px; }
  .platform-network .network-hub > span { font-size: 6px; }
  .platform-network .network-hub > i { inset: -9px; border-radius: 17px; }
  .platform-network-caption { padding: 0 20px 11px; }
  .platform-network-caption > p { font-size: 11px; }
  .platform-network-caption > span { font-size: 8px; }
  .network-legend { font-size: 8px; padding: 0 20px 18px; }
  .distribution-handoff { padding: 9px 22px; }
  .handoff-orb { width: 52px; height: 52px; }
  .handoff-orb > .icon { width: 16px; height: 16px; }
  .handoff-orb > b { font-size: 14px; }
  .handoff-orb::before, .handoff-orb::after { inset: -7px; }
  .handoff-channels { margin-top: 12px; gap: 7px; }
  .handoff-channels > img { width: 27px; height: 27px; padding: 4px; border-radius: 6px; }
  .distribution-handoff > h4 { margin: 13px 0 5px; font-size: 17px; }
  .distribution-handoff > p { max-width: 245px; font-size: 8px; line-height: 1.7; }
  .distribution-handoff > .button { margin-top: 12px; min-height: 33px; padding: 8px 12px; gap: 8px; font-size: 8px; }
  .distribution-handoff > .button > .icon { width: 10px; height: 10px; }
}
@media (max-width: 380px) {
  #platPanels.platform-panel { padding-inline: 16px; }
  .platform-network { width: calc(100% + 32px); margin-inline: -16px; }
  .platform-network-top { padding-inline: 14px; }
  .platform-network .network-wrap { width: calc(100% - 40px); }
  .platform-network .network-node { min-width: 58px; min-height: 47px; padding: 6px 5px; }
  .platform-network .network-node > img { width: 19px; height: 19px; }
  .platform-network .network-node > span { font-size: 6px; }
  .platform-network .network-hub { width: 59px; height: 59px; }
  .platform-network .network-hub > b { font-size: 18px; }
  .platform-network .network-hub > span { font-size: 5px; }
  .platform-network-caption { padding-inline: 16px; }
  .distribution-handoff { padding-inline: 16px; }
  html[lang="en"] .distribution-handoff > h4 { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .handoff-orb, .handoff-orb::before, .handoff-orb::after,
  .handoff-channels > img { animation: none !important; }
}