/* Mobile-only flow dots (desktop unchanged: stays display:none outside 920px rules). */
.arch-map__soc-track {
  display: none;
}

.arch-map__enterprise-connector {
  display: none;
}

@media (max-width: 1080px) {
  .arch-map__product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }

  .arch-map__flow-layout {
    min-height: 760px;
  }

  .arch-map__cloud-badges {
    width: auto;
  }

  .arch-map__cloud-badge {
    width: 26px;
    height: 26px;
  }

  .arch-map__cloud-card[data-product-id='phishiq-api'] .arch-map__cloud-badges {
    justify-content: flex-start;
  }

  .arch-map__engine-cylinder {
    top: 372px;
    width: min(620px, 88%);
  }

  .arch-map__link-packet {
    top: 354px;
  }

  .arch-map__text-packet {
    top: 346px;
  }

  .arch-map__qr-packet {
    top: 348px;
  }

  .arch-map__enterprise-panel {
    top: 404px;
    left: 14px;
    width: calc(100% - 28px);
  }

  .arch-map__soc-panel {
    top: 520px;
    right: 14px;
    width: calc(100% - 28px);
  }

  .arch-map__flow-overlay {
    display: none;
  }
}

@media (max-width: 760px) {
  .arch-map__inner {
    padding: 22px 12px 30px;
  }

  .arch-map__title {
    font-size: 1.45rem;
  }

  .arch-map__subtitle {
    font-size: 0.86rem;
  }

  .arch-map__top-actions {
    flex-wrap: wrap;
  }

  .arch-map__product-grid {
    grid-template-columns: 1fr;
  }

  .arch-map__cloud-tooltip {
    display: none;
  }

  .arch-map__cloud-badges {
    width: auto;
  }

  .arch-map__cloud-card[data-product-id='phishiq-api'] {
    transform: none;
    min-height: 214px;
    padding-top: 18px;
    padding-bottom: 12px;
  }

  .arch-map__cloud-card[data-product-id='phishiq-api'] .arch-map__cloud-badges {
    width: auto;
  }

  .arch-map__cloud-card[data-product-id='phishiq-api'] .arch-map__cloud-title {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    padding-left: 40px;
    margin-top: 6px;
  }

  .arch-map__cloud-card[data-product-id='phishiq-api'] .arch-map__cloud-platforms {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    padding-left: 40px;
    margin-top: 0;
    margin-bottom: 6px;
  }

  .arch-map__cloud-card[data-product-id='phishiq-api'] .arch-map__cloud-branches {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: translateX(-14px);
    padding-left: 40px;
    gap: 5px;
  }

  .arch-map__cloud-card[data-product-id='phishiq-api'] .arch-map__cloud-branch-chip {
    max-width: none;
  }

  .arch-map__flow-layout {
    min-height: 1020px;
    padding-bottom: 14px;
  }

  .arch-map__engine-cylinder {
    top: 584px;
    width: calc(100% - 24px);
    min-height: 94px;
  }

  .arch-map__link-packet {
    top: 566px;
  }

  .arch-map__text-packet {
    top: 558px;
  }

  .arch-map__qr-packet {
    top: 560px;
  }

  .arch-map__soc-panel {
    top: 770px;
  }

  .arch-map__enterprise-panel {
    top: 704px;
    left: 12px;
    width: calc(100% - 24px);
  }

  .arch-map__enterprise-grid {
    grid-template-columns: 1fr;
  }

  .arch-map-sms-modal-overlay {
    padding: 10px;
  }

  .arch-map-sms-chat {
    padding: 12px;
    gap: 8px;
  }

  .arch-map-sms-bubble {
    max-width: 100%;
    font-size: 0.75rem;
  }
}

@media (max-width: 920px) {
  .arch-map__flow-overlay,
  .arch-map__link-packet,
  .arch-map__text-packet,
  .arch-map__qr-packet {
    display: none;
  }

  .arch-map__flow-layout {
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 12px;
    overflow: visible;
  }

  .arch-map__product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    /* Same row height for all four cards (titles wrap differently per width / device). */
    align-items: stretch;
    margin-bottom: 24px;
  }

  .arch-map__cloud-tooltip {
    display: none;
  }

  .arch-map__cloud-card {
    position: relative;
    min-height: 118px;
    padding: 8px 6px 10px;
    border-radius: 30px;
  }

  .arch-map__cloud-card::after {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(100% + clamp(4px, 1.5vw, 10px));
    bottom: auto;
    transform: translateX(-50%);
    /* Wider box so the dot is not clipped; red line stays 6px in the center. */
    width: 20px;
    height: calc(78px - clamp(4px, 1.5vw, 10px));
    /* Radial (dot) must be listed first so it paints above the red stroke. */
    background:
      radial-gradient(circle, rgba(255, 255, 255, 1) 0 32%, rgba(255, 236, 236, 0.95) 33% 52%, rgba(255, 255, 255, 0) 70%) center -12px / 16px 16px no-repeat,
      linear-gradient(180deg, rgba(220, 38, 38, 0.96), rgba(220, 38, 38, 0.42)) center top / 6px 100% no-repeat;
    border-radius: 999px;
    pointer-events: none;
    animation: mobile-stream-dot 2.05s linear infinite;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 6px rgba(220, 38, 38, 0.45));
  }

  .arch-map__cloud-badges {
    transform: none;
    justify-content: center;
    padding-left: 0;
    margin-bottom: 4px;
    gap: 4px;
  }

  .arch-map__cloud-badge {
    width: 20px;
    height: 20px;
  }

  .arch-map__cloud-title {
    transform: none;
    padding-left: 8px;
    font-size: 0.56rem;
    min-height: 2.1em;
    max-width: 100%;
  }

  .arch-map__cloud-platforms {
    transform: none;
    padding-left: 8px;
    font-size: 0.5rem;
    margin-bottom: 0;
    white-space: normal;
  }

  .arch-map__cloud-icons,
  .arch-map__cloud-branches {
    display: none;
  }

  .arch-map__engine-cylinder,
  .arch-map__enterprise-panel,
  .arch-map__soc-panel {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    z-index: 2;
  }

  .arch-map__engine-cylinder {
    margin-top: 50px;
    z-index: 1;
  }

  .arch-map__enterprise-panel {
    width: calc(100% - 44px);
    margin-left: auto;
    padding: 10px;
    margin-top: 30px;
    isolation: isolate;
  }

  /* Dashed connector between PHISHIQ PLUS title and ENTERPRISE SYSTEMS title. */
  .arch-map__enterprise-connector {
    display: block;
    position: absolute;
    left: -52px;
    top: -246px;
    width: 50px;
    height: 264px;
    border-left: 3px dashed rgba(220, 38, 38, 0.92);
    border-top: 3px dashed rgba(220, 38, 38, 0.92);
    border-radius: 12px 0 0 0;
    background:
      repeating-linear-gradient(
        to right,
        rgba(220, 38, 38, 0.92) 0 4px,
        transparent 4px 10px
      ) left bottom / 50px 3px no-repeat;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 2px rgba(220, 38, 38, 0.26));
  }

  .arch-map__enterprise-connector::before,
  .arch-map__enterprise-connector::after {
    content: '';
    position: absolute;
    right: -2px;
    width: 11px;
    height: 9px;
    background: #dc2626;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    filter: drop-shadow(0 0 1px rgba(153, 27, 27, 0.9));
    pointer-events: none;
    z-index: 1;
  }

  .arch-map__enterprise-connector::before {
    top: -6px;
  }

  .arch-map__enterprise-connector::after {
    bottom: -4px;
  }

  .arch-map__enterprise-connector-dot {
    position: absolute;
    left: 44px;
    top: calc(100% - 10px);
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(220, 38, 38, 0.35);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 6px rgba(220, 38, 38, 0.28);
    animation: enterprise-connector-dot-up 2.6s linear infinite;
    pointer-events: none;
    z-index: 2;
  }

  .arch-map__soc-panel {
    width: calc(100% - 48px);
    margin-left: auto;
    margin-top: 40px;
    padding: 10px 10px 10px 12px;
    z-index: 30;
    isolation: isolate;
  }

  /* L-shaped dashed runs: inner (::after) Splunk; outer (::before) Sentinel. Dots follow SVG paths. */
  .arch-map__soc-panel::before,
  .arch-map__soc-panel::after {
    content: '';
    position: absolute;
    top: -82px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 0;
    border-style: dashed;
    border-color: rgba(220, 38, 38, 0.92);
    border-width: 0 0 3px 3px;
    border-radius: 0 0 0 12px;
    filter: drop-shadow(0 0 2px rgba(220, 38, 38, 0.28));
  }

  .arch-map__soc-panel::after {
    left: -26px;
    width: 34px;
    top: -52px;
    height: calc(52px + 36%);
  }

  .arch-map__soc-panel::before {
    left: -42px;
    width: 46px;
    top: -68px;
    height: calc(68px + 76%);
  }

  .arch-map__soc-track--splunk,
  .arch-map__soc-track--sentinel {
    display: block;
    position: absolute;
    top: -82px;
    width: 34px;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
  }

  /* Stable top arrows: rendered in CSS, independent of SVG viewBox clipping. */
  .arch-map__soc-track--splunk::before,
  .arch-map__soc-track--sentinel::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -2px;
    width: 11px;
    height: 9px;
    background: #dc2626;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    filter: drop-shadow(0 0 1px rgba(153, 27, 27, 0.9));
    z-index: 0;
    pointer-events: none;
  }

  .arch-map__soc-track--splunk::after {
    content: '';
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 11px;
    height: 9px;
    background: #dc2626;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    filter: drop-shadow(0 0 1px rgba(153, 27, 27, 0.9));
    z-index: 0;
    pointer-events: none;
  }

  .arch-map__soc-track--sentinel::after {
    content: '';
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 11px;
    height: 9px;
    background: #dc2626;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    filter: drop-shadow(0 0 1px rgba(153, 27, 27, 0.9));
    z-index: 0;
    pointer-events: none;
  }

  .arch-map__soc-track--splunk {
    left: -26px;
    top: -52px;
    height: calc(52px + 36%);
  }

  .arch-map__soc-track--sentinel {
    left: -42px;
    width: 46px;
    top: -68px;
    height: calc(68px + 76%);
  }

  .arch-map__soc-track__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .arch-map__soc-track__dot {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 3px rgba(220, 38, 38, 0.35));
  }

  .arch-map__soc-title,
  .arch-map__soc-subtitle,
  .arch-map__soc-grid {
    position: relative;
    z-index: 12;
  }

  .arch-map__soc-tooltip {
    z-index: 999 !important;
  }

  .arch-map__enterprise-title,
  .arch-map__enterprise-grid {
    position: relative;
    z-index: 12;
  }

  .arch-map__cloud-card[data-product-id='phishiq-api'] {
    transform: none;
    min-height: 118px;
    padding-top: 8px;
    padding-bottom: 10px;
  }

  .arch-map__cloud-card[data-product-id='phishiq-api'] .arch-map__cloud-badges {
    top: auto;
    left: auto;
    width: auto;
    justify-content: center;
  }

  .arch-map__cloud-card[data-product-id='phishiq-api'] .arch-map__cloud-title {
    position: relative;
    padding-left: 8px;
    margin-top: 0;
  }

  .arch-map__cloud-card[data-product-id='phishiq-api'] .arch-map__cloud-platforms {
    position: relative;
    padding-left: 8px;
    margin-bottom: 0;
  }
}

@keyframes mobile-stream-dot {
  0% {
    background-position: center -12px, center top;
    opacity: 0.88;
  }
  24% {
    opacity: 1;
  }
  100% {
    background-position: center calc(100% + 12px), center top;
    opacity: 0.98;
  }
}

@keyframes enterprise-connector-dot-up {
  0% {
    left: 44px;
    top: calc(100% - 10px);
    opacity: 0.95;
  }
  24% {
    left: -7px;
    top: calc(100% - 10px);
    opacity: 1;
  }
  78% {
    left: -7px;
    top: -5px;
    opacity: 1;
  }
  100% {
    left: 44px;
    top: -5px;
    opacity: 0.98;
  }
}