/* Four compact, key-driven SLA responses. The colored cover is untouched. */

/* Docking socket: bold pure white X, no border, no background, clean graphic symbol */
.support4 .sla-key-socket {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  color: #fff;
  border: none;
  background: transparent;
  outline: none;
  box-shadow: none;
  transform: translate(4px, -4px);
  cursor: pointer;
}
.support4 .sla-key-socket svg {
  display: block;
  width: 38px;
  height: 38px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 19;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  filter: url(#socket-inner-shadow);
  outline: none;
}
/* Only the active local owner takes the paint; the white socket stays in DOM. */
.support4 .sla-key-socket[data-key-painted='true'] svg {
  stroke: var(--sla-key-stroke, #f460c4);
  filter: none;
}
/* SLA card layout locking: compact density restored, height strictly equalized across slides */
.support4-card[data-sla-card] {
  position: relative;
  overflow: hidden;
}
.support4-card[data-sla-card] .support4-card-top {
  margin-bottom: 36px;
}
.support4-card[data-sla-card] h3 {
  max-width: min(65%, 560px);
  font-size: clamp(34px, 2.6vw, 50px);
}
.support4-card[data-sla-card] .support4-card-copy {
  max-width: min(48%, 500px);
  width: 100%;
  margin-top: 20px !important;
  margin-bottom: 12px !important;
  line-height: 1.55;
  font-size: 18px;
}
.support4-card[data-sla-card] .support4-card-note {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-top: 36px !important;
  max-width: min(65%, 290px);
  min-height: 36px;
  display: flex;
  align-items: flex-end;
}
.support4-card[data-sla-card] .support4-card-action {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-top: 36px !important;
  min-height: 36px;
  display: flex;
  align-items: flex-end;
}
.support4-card[data-sla-card] .support4-button {
  padding-inline: 36px !important;
  height: 40px;
}

/* Right-hand visual zone: absolute overlay, bottom-right placement, zero layout impact */
.support4 .sla-key-visual-zone {
  position: absolute;
  right: 48px;
  bottom: 40px;
  top: auto;
  width: 38%;
  max-width: 400px;
  height: 48%;
  max-height: 200px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 2;
}

/* Base line-art */
.support4 .sla-key-line {
  fill: none;
  stroke: #b8b5c2;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.support4 .sla-key-line-sub {
  fill: none;
  stroke: #b8b5c2;
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: .35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.support4 .sla-key-art {
  display: block;
  overflow: visible;
  pointer-events: none;
}

/* Card 2: Pulse & Log */
.support4 .sla-key-art--pulse {
  width: 100%;
  max-height: 160px;
  transform: translateX(6px);
}
.support4 .sla-key-pulse {
  fill: none;
  stroke: var(--sla-key-stroke, url(#sla-key-gradient));
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: .22 .78;
  stroke-dashoffset: 1;
  opacity: 0;
}
.support4 [data-sla-phase='active'] .sla-key-pulse {
  animation: sla-key-pulse 1800ms ease-in-out 1 both;
}
.support4 .sla-key-lock {
  opacity: .75;
}
.support4 .sla-key-lock path {
  stroke: #b8b5c2;
  stroke-width: 1.25;
}
.support4 .sla-key-log {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #494950;
  font: 400 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  text-align: right;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms;
}
.support4 [data-sla-phase='active'] .sla-key-log {
  opacity: 1;
  visibility: visible;
}

/* Card 3: Disks */
.support4 .sla-key-art--disks {
  max-height: 180px;
  width: 100%;
}
.support4 .sla-key-disk {
  fill: #fff5;
  stroke: #b8b5c2;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  transition: stroke 200ms ease;
}
.support4 .sla-key-disk:nth-child(1) { opacity: .5; }
.support4 .sla-key-disk:nth-child(2) { opacity: .72; }
.support4 .sla-key-disk:nth-child(3) { opacity: .92; }
.support4 [data-sla-phase='active'] .sla-key-disk {
  stroke: var(--sla-key-stroke, url(#sla-key-gradient));
}
.support4 [data-sla-phase='active'] .sla-key-disk:nth-child(1) {
  animation: sla-key-slice 650ms cubic-bezier(.2,.8,.25,1) 0ms 1 both;
}
.support4 [data-sla-phase='active'] .sla-key-disk:nth-child(2) {
  animation: sla-key-slice 650ms cubic-bezier(.2,.8,.25,1) 90ms 1 both;
}
.support4 [data-sla-phase='active'] .sla-key-disk:nth-child(3) {
  animation: sla-key-slice 650ms cubic-bezier(.2,.8,.25,1) 180ms 1 both;
}

/* Card 4: Timeline / Technical Response Line-Art */
.support4 .sla-key-art--timeline {
  width: 100%;
  max-height: 120px;
}
.support4 .sla-key-seg {
  fill: none;
  stroke: var(--sla-key-stroke, url(#sla-key-gradient));
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.support4 [data-sla-phase='active'] .sla-key-seg--1 {
  animation: sla-key-seg-draw 420ms cubic-bezier(.2,.7,.25,1) 50ms 1 both;
}
.support4 [data-sla-phase='active'] .sla-key-seg--2 {
  animation: sla-key-seg-draw 480ms cubic-bezier(.2,.7,.25,1) 450ms 1 both;
}
.support4 [data-sla-phase='active'] .sla-key-seg--3 {
  animation: sla-key-seg-draw 520ms cubic-bezier(.2,.7,.25,1) 900ms 1 both;
}
.support4 .sla-key-node-mark {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  transform-origin: center;
}
.support4 .sla-key-node-mark circle {
  fill: #fff;
  stroke: #b8b5c2;
  stroke-width: 1.8;
  transition: stroke .2s, transform .3s cubic-bezier(.34,1.56,.64,1);
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}
.support4 .sla-key-time-label {
  font: 600 11px/1 'Raleway', Arial, sans-serif;
  fill: #8b8994;
  text-anchor: middle;
  transition: fill .25s ease;
}
.support4 [data-sla-phase='active'] .sla-key-node-mark[data-sla-node='0'] circle {
  stroke: var(--sla-key-stroke, url(#sla-key-gradient));
  animation: sla-key-node-pop 380ms ease 0ms 1 both;
}
.support4 [data-sla-phase='active'] .sla-key-node-mark[data-sla-node='1'] {
  animation: sla-key-node-shift 400ms cubic-bezier(.2,.8,.25,1) 450ms 1 both;
}
.support4 [data-sla-phase='active'] .sla-key-node-mark[data-sla-node='1'] circle {
  stroke: var(--sla-key-stroke, url(#sla-key-gradient));
  animation: sla-key-node-pop 400ms ease 450ms 1 both;
}
.support4 [data-sla-phase='active'] .sla-key-node-mark[data-sla-node='1'] .sla-key-time-label {
  fill: #262129;
}
.support4 [data-sla-phase='active'] .sla-key-node-mark[data-sla-node='2'] {
  animation: sla-key-node-shift 400ms cubic-bezier(.2,.8,.25,1) 900ms 1 both;
}
.support4 [data-sla-phase='active'] .sla-key-node-mark[data-sla-node='2'] circle {
  stroke: var(--sla-key-stroke, url(#sla-key-gradient));
  animation: sla-key-node-pop 400ms ease 900ms 1 both;
}
.support4 [data-sla-phase='active'] .sla-key-node-mark[data-sla-node='3'] circle {
  stroke: var(--sla-key-stroke, url(#sla-key-gradient));
  animation: sla-key-node-pop 400ms ease 1350ms 1 both;
}

/* Card 5: Shield - Large technical graphic (+30%), no idle glow */
.support4 .sla-key-art--shield {
  width: 180px;
  height: 180px;
  max-height: 180px;
  filter: none;
}
.support4 .sla-key-shield-contour {
  fill: none;
  stroke: #b8b5c2;
  stroke-width: 1.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke .3s ease;
}
.support4 .sla-key-shield-inner {
  fill: none;
  stroke: #b8b5c2;
  stroke-width: 1.1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .25;
  transition: opacity .3s, stroke .3s;
}
.support4 .sla-key-shield-check {
  fill: none;
  stroke: #b8b5c2;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  stroke-dasharray: 45;
  stroke-dashoffset: 45;
  transition: opacity .3s, stroke .3s;
}
.support4 [data-sla-phase='active'] .sla-key-shield-contour {
  stroke: var(--sla-key-stroke, url(#sla-key-gradient));
  animation: sla-key-shield-contour-draw 550ms ease-out 0ms 1 both;
}
.support4 [data-sla-phase='active'] .sla-key-shield-inner {
  stroke: var(--sla-key-stroke, url(#sla-key-gradient));
  animation: sla-key-shield-inner-reveal 500ms ease-out 400ms 1 both;
}
.support4 [data-sla-phase='active'] .sla-key-shield-check {
  stroke: var(--sla-key-stroke, url(#sla-key-gradient));
  animation: sla-key-shield-check-draw 500ms cubic-bezier(.2,.8,.25,1) 800ms 1 both;
}
.support4 [data-sla-phase='active'] .sla-key-art--shield {
  animation: sla-key-shield-scale 450ms cubic-bezier(.34,1.4,.64,1) 1200ms 1 both;
}
.support4 [data-sla-phase='active'] .sla-key-action .support4-button {
  animation: sla-key-button 520ms cubic-bezier(.2,.8,.25,1) 1;
}

/* Status text across cards 3, 4, 5 - lives in visual zone beside graphic */
.support4 .sla-key-response {
  margin: 0 0 10px 0 !important;
  color: #62626c;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .005em;
  text-align: right;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms;
}
.support4 [data-sla-phase='active'] .sla-key-response {
  opacity: 1;
  visibility: visible;
}

/* Animations */
@keyframes sla-key-pulse {
  0% { opacity: 0; stroke-dashoffset: 1; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: -1; }
}
@keyframes sla-key-slice {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-7px); }
  65% { transform: translateY(2px); }
}
@keyframes sla-key-seg-draw {
  0% { opacity: 0; stroke-dashoffset: 1; }
  25% { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes sla-key-node-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.45); }
  100% { transform: scale(1.18); }
}
@keyframes sla-key-node-shift {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(-2px); }
}
@keyframes sla-key-shield-contour-draw {
  0% { stroke-dashoffset: 300; opacity: .4; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes sla-key-shield-inner-reveal {
  0% { opacity: .25; transform: scale(.95); }
  100% { opacity: .85; transform: scale(1); }
}
@keyframes sla-key-shield-check-draw {
  0% { opacity: 0; stroke-dashoffset: 45; }
  20% { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes sla-key-shield-scale {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes sla-key-button {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(2px); }
  72% { transform: translateX(-.5px); }
}

@media (max-width: 600px) {
  .support4-card[data-sla-card] {
    min-height: 400px;
    height: 100%;
  }
  .support4-card[data-sla-card] .support4-card-copy {
    max-width: 220px;
    font-size: 16px;
  }
  .support4-card[data-sla-card] h3 { max-width: 100%; font-size: 30px; }
  .support4-card[data-sla-card='pricing'] .support4-button { padding-inline: 20px !important; }
  .support4 .sla-key-visual-zone {
    right: 18px;
    bottom: 20px;
    top: auto;
    width: 170px;
    height: 140px;
  }
  .support4 .sla-key-log,
  .support4 .sla-key-response {
    font-size: 10px;
    line-height: 1.4;
  }
  .support4 .sla-key-art--shield {
    width: 95px;
    height: 95px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .support4 [data-sla-phase='active'] .sla-key-pulse,
  .support4 [data-sla-phase='active'] .sla-key-disk,
  .support4 [data-sla-phase='active'] .sla-key-seg,
  .support4 [data-sla-phase='active'] .sla-key-node-mark,
  .support4 [data-sla-phase='active'] .sla-key-node-mark circle,
  .support4 [data-sla-phase='active'] .sla-key-shield-contour,
  .support4 [data-sla-phase='active'] .sla-key-shield-inner,
  .support4 [data-sla-phase='active'] .sla-key-shield-check,
  .support4 [data-sla-phase='active'] .sla-key-art--shield,
  .support4 [data-sla-phase='active'] .sla-key-action .support4-button {
    animation: none !important;
  }
  .support4 [data-sla-phase='active'] .sla-key-pulse {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: .8;
  }
  .support4 [data-sla-phase='active'] .sla-key-seg {
    stroke-dashoffset: 0;
    opacity: .9;
  }
  .support4 [data-sla-phase='active'] .sla-key-shield-check {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}