.security-summary__intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}

.security-summary__intro h2 {
  max-width: 15ch;
  font-size: var(--fs-h2);
  line-height: 1.1;
  text-wrap: balance;
}

.security-summary__intro p {
  max-width: 30rem;
  margin: 0;
  color: var(--c-ink-2);
}

.security-summary__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

.security-summary__card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem;
  border: 1px solid #ebe7e3;
  border-radius: 1rem;
  background-color: #f4f2ef;
}

.security-summary__card--local,
.security-summary__card--ai {
  grid-column: span 2;
  min-height: 23rem;
}

/* Same white dotted surface as the hero canvas. */
.security-summary__card--local {
  border-color: var(--c-line);
  background-color: var(--c-surface);
  background-image: radial-gradient(var(--c-hero-dot) .65px, transparent .8px);
  background-size: 5px 5px;
}

.security-summary__copy h3 {
  margin: 0 0 .45rem;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1.2;
}

.security-summary__copy p {
  margin: 0;
  color: var(--c-ink-2);
  font-size: .875rem;
  line-height: 1.55;
}

.security-summary__card--local h3,
.security-summary__card--ai h3 { font-size: clamp(1.25rem, 2.1vw, 1.7rem); }
.security-summary .visual-icon { flex: none; width: 1.125rem; height: 1.125rem; }

.security-summary__illustration {
  position: relative;
  display: grid;
  flex: 1;
  align-items: center;
  min-width: 0;
  padding: 1.25rem 1.5rem 1.75rem;
}

/* The panel, the boundary around it and the badge sealing it. */
.security-summary__vault {
  position: relative;
  width: min(100%, 25rem);
  margin: 0 auto;
}

.security-summary__fence {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  max-width: none;
  overflow: visible;
  pointer-events: none;
}

.security-summary__fence rect { fill: none; }
.security-summary__fence-line { stroke: #8fb2dc; stroke-width: 1.5; stroke-dasharray: 7 7; stroke-linecap: round; }
.security-summary__fence-hit { stroke: #1f9d6f; stroke-width: 2.5; opacity: 0; }

.security-summary__device {
  position: relative;
  border: 1px solid #dce7f5;
  border-radius: .9rem;
  background: #f7faff;
  color: #233750;
  box-shadow: 0 14px 30px #0a173b1f;
}

.security-summary__device-bar,
.security-summary__request-title {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid #dce7f5;
  font-weight: 600;
}

.security-summary__device-bar { border-radius: .85rem .85rem 0 0; background: #eaf2fd; }
.security-summary__device-bar svg,
.security-summary__files svg,
.security-summary__request-title svg,
.security-summary__route > svg { color: #1766bd; }

.security-summary__files {
  display: grid;
  gap: .35rem;
  padding: .75rem .9rem 1.15rem;
}

.security-summary__files span {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem;
  border: 1px solid #e4ebf4;
  border-radius: .45rem;
  background: #fff;
  font-size: .8rem;
}

.security-summary__local-badge {
  position: absolute;
  right: -1.5rem;
  bottom: -1.4rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  border: 1px solid #cde7da;
  border-radius: 999px;
  background: #f3fcf7;
  color: #175742;
  box-shadow: 0 6px 18px #0a173b1f;
  font-size: .8rem;
  font-weight: 600;
}

.security-summary__request {
  align-self: center;
  width: 100%;
  margin: auto 0;
  overflow: hidden;
  border: 1px solid #e8e3de;
  border-radius: .9rem;
  background: #fff;
}

.security-summary__request-title { border-color: #eeeae6; }
.security-summary__route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .6rem;
  padding: .9rem;
}

.security-summary__route span {
  display: grid;
  min-height: 3.5rem;
  place-items: center;
  padding: .45rem;
  border: 1px solid #dce7f6;
  border-radius: .5rem;
  background: #f3f7fe;
  text-align: center;
  font-size: .8rem;
  line-height: 1.35;
}

.security-summary__card--feature { min-height: 11.5rem; justify-content: flex-start; }
.security-summary__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .55rem;
  background: linear-gradient(135deg, #1979eb, #7a4fe0);
  color: #fff;
}

.security-summary__card--feature:nth-of-type(4) .security-summary__icon { background: linear-gradient(135deg, #7a4fe0, #d6309a); }
.security-summary__card--feature:nth-of-type(5) .security-summary__icon { background: linear-gradient(135deg, #e0520f, #d62f6a); }
.security-summary__card--feature:nth-of-type(6) .security-summary__icon { background: linear-gradient(135deg, #0a8a7c, #1979eb); }

/* A 9 second loop, one row every 2 seconds: a file slides out, meets the boundary and
   springs back, the boundary flashes green and the badge answers. The loop ends on its
   first frame. Only transform, opacity and the dash offset move. */
@media (prefers-reduced-motion: no-preference) {
  .security-summary__fence-line { animation: security-march 3s linear infinite; }
  .security-summary__fence-hit { animation: security-fence-hit 9s ease-out infinite; }

  .security-summary__files span {
    position: relative;
    isolation: isolate;
    animation: security-file-push 9s linear infinite;
  }

  .security-summary__files span::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border: 1px solid #b9d4f5;
    border-radius: inherit;
    background: #eaf3fe;
    opacity: 0;
    animation: security-file-light 9s ease-in-out infinite;
  }

  .security-summary__files span:nth-child(2),
  .security-summary__files span:nth-child(2)::before { animation-delay: 2s; }
  .security-summary__files span:nth-child(3),
  .security-summary__files span:nth-child(3)::before { animation-delay: 4s; }

  .security-summary__local-badge {
    isolation: isolate;
    animation: security-seal 9s ease-out infinite;
  }

  .security-summary__local-badge::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border: 1.5px solid #1f9d6f;
    border-radius: inherit;
    opacity: 0;
    animation: security-seal-ring 9s ease-out infinite;
  }
}

@keyframes security-march { to { stroke-dashoffset: -28; } }

@keyframes security-file-push {
  0%, 5% { transform: translateX(0); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  12% { transform: translateX(24px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  20% { transform: translateX(-3px); animation-timing-function: ease-in-out; }
  24%, 100% { transform: translateX(0); }
}

@keyframes security-file-light {
  0%, 3%, 26%, 100% { opacity: 0; }
  9%, 16% { opacity: 1; }
}

@keyframes security-fence-hit {
  0%, 11.5%, 26%, 33.7%, 48%, 55.9%, 72%, 100% { opacity: 0; }
  12.2%, 34.4%, 56.6% { opacity: 1; }
}

@keyframes security-seal {
  0%, 12%, 22%, 34.2%, 44%, 56.4%, 72%, 100% { transform: scale(1); }
  15%, 37%, 60% { transform: scale(1.09); }
}

@keyframes security-seal-ring {
  0%, 12%, 34.2%, 56.4% { opacity: 0; transform: scale(1); }
  13%, 35.2%, 57.4% { opacity: .9; transform: scale(1); }
  26%, 33.9% { opacity: 0; transform: scale(1.2, 1.6); }
  48%, 56.1% { opacity: 0; transform: scale(1.2, 1.6); }
  74%, 100% { opacity: 0; transform: scale(1.28, 1.8); }
}

@media (max-width: 800px) {
  .security-summary__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .security-summary__card--local,
  .security-summary__card--ai { grid-column: auto; min-height: 21rem; }
}

@media (max-width: 580px) {
  .security-summary__intro { grid-template-columns: minmax(0, 1fr); }
  .security-summary__card--local,
  .security-summary__card--ai { grid-column: 1 / -1; min-height: 0; }
  .security-summary__card--feature { padding: .9rem; }
}

@media (max-width: 360px) {
  .security-summary__card--feature { grid-column: 1 / -1; min-height: 0; }
}