/* MOD-205-174-39: semantic SVG flows and decorative art confined to the intro.
   Each slide shares one PNG resource; descriptions span below heading and art. */
.mod204-promotion.mod205-hero-intro { display: flex; align-items: stretch; }
.mod205-hero-intro::before { content: none; }
.mod205-hero-copy { min-width: 0; }
.mod205-hero-intro .mod17502-message { display: grid; grid-template-columns: minmax(0,1.95fr) minmax(0,1fr); align-content: start; align-items: center; column-gap: 10px; }
.mod205-message-heading { display: flex; flex-direction: column; gap: var(--hero-gap); min-width: 0; }
.mod205-hero-intro .mod17502-description { grid-column: 1 / -1; }
.mod205-hero-art { min-width: 0; pointer-events: none; }
.mod205-hero-art img { display: block; width: 100%; height: auto; max-height: 240px; object-fit: contain; }
.mod17502-home .mod204-map-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 8px; }
.mod204-map-heading > :is(span,h2,p) { grid-column: 1; }
.mod204-map-heading .mod205-flow-toggle { grid-column: 2; grid-row: 1 / 4; }
.mod205-flow-toolbar { display: flex; align-items: center; }
.mod205-flow-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .6875rem; color: #536982; }
.mod205-flow-legend span { display: inline-flex; align-items: center; gap: 4px; }
.mod205-flow-legend span::before { content: ''; width: 18px; border-top: 2px solid #447ac9; }
.mod205-flow-legend .mod205-key-backup::before { border-color: #8561bf; border-top-style: dashed; }
.mod205-flow-legend .mod205-key-collection::before { border-color: #479596; border-top-style: dotted; }
.mod205-flow-toggle { min-height: 44px; padding: 5px 8px; border: 1px solid #c8daed; border-radius: 8px; color: #265791; background: #f5f9ff; font-size: .75rem; white-space: nowrap; }
.mod17502-home #systemObjectMap { gap: 7px; }
.mod17502-home #systemObjectMap .hero-html-map-scale { grid-template-columns: repeat(12,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(68px,1fr)); column-gap: 7px; row-gap: 42px; min-height: 314px; padding: 0 12px; }
.mod17502-home #systemObjectMap .hero-svg-node { height: auto !important; min-height: 76px !important; align-self: stretch; padding: 6px 4px !important; gap: 3px; }
.mod17502-home #systemObjectMap [data-node-id="internet"] { grid-area: 1 / 1 / 2 / 4; }
.mod17502-home #systemObjectMap [data-node-id="firewall"] { grid-area: 1 / 4 / 2 / 7; }
.mod17502-home #systemObjectMap [data-node-id="coreswitch"] { grid-area: 1 / 7 / 2 / 10; }
.mod17502-home #systemObjectMap [data-node-id="userpcs"] { grid-area: 1 / 10 / 2 / 13; }
.mod17502-home #systemObjectMap [data-node-id="waf"] { grid-area: 2 / 1 / 3 / 4; }
.mod17502-home #systemObjectMap [data-node-id="serverzone"] { grid-area: 2 / 5 / 3 / 9; }
.mod17502-home #systemObjectMap [data-node-id="dbzone"] { grid-area: 2 / 10 / 3 / 13; }
.mod17502-home #systemObjectMap [data-node-id="backup"] { grid-area: 3 / 1 / 4 / 4; }
.mod17502-home #systemObjectMap [data-node-id="monitoring"] { grid-area: 3 / 5 / 4 / 9; }
.mod17502-home #systemObjectMap [data-node-id="aianalysis"] { grid-area: 3 / 10 / 4 / 13; }
.mod17502-home #systemObjectMap :is([data-node-id="monitoring"],[data-node-id="aianalysis"]) { color: #168081 !important; border-color: #cde4e4 !important; }
.mod17502-home #systemObjectMap :is([data-node-id="monitoring"],[data-node-id="aianalysis"]) :is(.node-icon,strong) { color: #168081 !important; }
.mod17502-home .mod205-flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.mod205-flow-edge { fill: none; stroke: #6293d5; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.mod205-flow-backup .mod205-flow-edge { stroke: #9574c5; stroke-dasharray: 7 4; }
.mod205-flow-collection .mod205-flow-edge { stroke: #8cbabb; stroke-width: 1.3; stroke-dasharray: 2 4; }
.mod205-flow-dot { fill: #2065c6; stroke: white; stroke-width: .7; }
.mod205-flow-backup .mod205-flow-dot { fill: #7950b2; }
.mod205-flow-collection .mod205-flow-dot { fill: #218b8e; }
.mod205-flow-collection.is-emphasized .mod205-flow-edge { stroke: #258284; stroke-width: 2; }
.mod205-flow-label { fill: #536982; font: 10px system-ui,sans-serif; paint-order: stroke; stroke: #fbfdff; stroke-width: 4px; stroke-linejoin: round; }
.mod205-flow-junction { fill: #8cbabb; }
.mod205-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 12px; }
.mod205-detail-actions a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid #c8daed; border-radius: 8px; color: #265791; background: #f5f9ff; text-decoration: none; }
@media (min-width:1200px) {
  .mod17502-home { --thumb-height: clamp(104px,calc(var(--home-top-height) * .52 - 130px),248px); }
}
@media (min-width:1200px) and (min-height:821px) {
  .mod205-hero-intro { --hero-title-limit: clamp(1.75rem,2.1vw,2.5rem); }
}
@media (min-width:1200px) and (max-height:820px) {
  .mod17502-home #systemObjectMap { gap: 2px; }
  .mod17502-home #systemObjectMap .hero-html-map-scale { row-gap: 28px; min-height: 260px; }
  .mod17502-home #systemObjectMap .hero-svg-node { min-height: 68px !important; }
  .mod17502-home #systemObjectMap .hero-html-map-footer { font-size: .6875rem; }
  .mod205-hero-art img { max-height: 180px; }
}
@media (max-width:1199.98px) { .mod205-hero-art img { max-height: 220px; } }
@media (max-width:599.98px) {
  .mod205-hero-intro .mod17502-message { grid-template-columns: minmax(0,1fr); }
  .mod205-hero-art { display: none; }
  .mod17502-home .mod204-map-heading { grid-template-columns: minmax(0,1fr); }
  .mod204-map-heading .mod205-flow-toggle { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
  .mod17502-home #systemObjectMap .hero-html-map-scale { grid-template-columns: minmax(0,1fr); grid-template-rows: none; grid-auto-rows: minmax(82px,auto); gap: 32px; padding-inline: 34px; }
  .mod17502-home #systemObjectMap .hero-svg-node { grid-area: auto; min-height: 82px !important; }
}
@media (min-width:1200px) and (max-height:700px) {
  .mod205-hero-art img { max-height: 112px; }
}