/* SentralTech protection story: restored system map with collision-safe geometry. */
.protection-scroll,
.protection-scroll * {
  box-sizing: border-box;
}

.protection-scroll__visual {
  min-width: 0;
}

.protection-scroll__frame {
  --map-cyan: #62d7f5;
  --map-cyan-soft: #78a9bc;
  --map-amber: #f0b16d;
  --map-green: #69deb0;
  isolation: isolate;
  display: grid;
  grid-template:
    "counter status" 62px
    "map map" minmax(0, 1fr)
    "phases phases" 58px /
    minmax(126px, 0.34fr) minmax(0, 1fr);
  gap: 0 22px;
  height: 100%;
  padding: 22px 28px 18px;
  overflow: hidden;
  border-radius: 3px 28px 3px 3px;
  background:
    linear-gradient(90deg, rgba(73, 144, 175, 0.045) 1px, transparent 1px) 0 0 / 38px 38px,
    linear-gradient(rgba(73, 144, 175, 0.045) 1px, transparent 1px) 0 0 / 38px 38px,
    linear-gradient(145deg, #072335 0%, #03101b 100%);
  transition: border-color 520ms ease, box-shadow 520ms ease;
}

.protection-scroll__frame::before {
  z-index: 0;
  inset: 14px;
  border: 1px solid rgba(120, 189, 217, 0.16);
  border-radius: 2px 20px 2px 2px;
  box-shadow: inset 0 0 42px rgba(21, 133, 219, 0.045);
}

.protection-scroll__frame::after {
  z-index: 0;
  display: block;
  width: 46%;
  inset: 0 auto 0 -46%;
  opacity: 0.7;
  background: linear-gradient(105deg, transparent 12%, rgba(115, 222, 255, 0.055) 50%, transparent 88%);
  animation: protection-map-sweep 8.4s linear infinite;
}

.protection-scroll__frame[data-active-stage="1"],
.protection-scroll__frame[data-active-stage="2"] {
  border-color: rgba(240, 177, 109, 0.38);
  box-shadow: 0 38px 90px rgba(0, 0, 0, 0.3), inset 0 0 48px rgba(240, 177, 109, 0.025);
}

.protection-scroll__frame[data-active-stage="3"] {
  border-color: rgba(105, 222, 176, 0.42);
  box-shadow: 0 38px 90px rgba(0, 0, 0, 0.3), inset 0 0 48px rgba(105, 222, 176, 0.025);
}

.protection-scroll__counter {
  z-index: 3;
  grid-area: counter;
  position: relative;
  inset: auto;
  align-self: center;
  width: min(100%, 132px);
  min-width: 0;
  color: #8ddff9;
  font-size: 0.66rem;
}

.protection-scroll__counter i::after {
  transition: width 620ms ease;
}

.protection-scroll__core {
  z-index: 3;
  grid-area: status;
  position: relative;
  inset: auto;
  justify-self: end;
  align-self: center;
  display: flex;
  width: min(100%, 300px);
  height: auto;
  min-height: 43px;
  padding: 5px 0 5px 15px;
  transform: none;
  overflow: hidden;
  border: 0;
  border-left: 2px solid rgba(104, 211, 241, 0.66);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: border-color 480ms ease;
}

.protection-scroll__core-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

.protection-scroll__core small {
  max-width: 100%;
  color: #8ddff9;
  font-size: 0.48rem;
  line-height: 1.25;
}

.protection-scroll__core strong {
  max-width: 100%;
  margin-top: 5px;
  color: #f4fbff;
  font-family: var(--font-mono);
  font-size: clamp(0.76rem, 1.08vw, 0.98rem);
  font-weight: 760;
  letter-spacing: 0.015em;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.protection-scroll__core[data-stage="1"],
.protection-scroll__core[data-stage="2"] {
  border-left-color: rgba(240, 177, 109, 0.88);
}

.protection-scroll__core[data-stage="1"] small,
.protection-scroll__core[data-stage="2"] small {
  color: #f5c28c;
}

.protection-scroll__core[data-stage="3"] {
  border-left-color: rgba(105, 222, 176, 0.88);
}

.protection-scroll__core[data-stage="3"] small {
  color: #92e8c5;
}

.protection-scroll__telemetry {
  z-index: 3;
  grid-area: phases;
  position: relative;
  inset: auto;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding-top: 13px;
  color: #78a9bc;
  font-size: 0.5rem;
  letter-spacing: 0.075em;
}

.protection-scroll__telemetry span {
  min-width: 0;
  white-space: normal;
  line-height: 1.25;
}

.protection-scroll__telemetry span.is-complete {
  color: #86cce7;
}

.protection-scroll__telemetry span.is-active {
  color: #c2f3ff;
}

.protection-scroll__event,
.security-lifecycle-map__finding {
  display: none;
}

.security-lifecycle-map {
  z-index: 2;
  grid-area: map;
  position: relative;
  inset: auto;
  align-self: center;
  justify-self: center;
  width: 100%;
  height: auto;
  min-width: 0;
  max-height: 100%;
  aspect-ratio: 1000 / 560;
  overflow: visible;
}

.security-lifecycle-map::before {
  display: none;
}

.security-lifecycle-map__zones {
  z-index: 3;
  inset: 0 0 auto;
  color: #78a9bc;
  font-size: 0.43rem;
}

.security-lifecycle-map__zones span {
  min-width: 0;
  padding: 0 7px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.security-lifecycle-map__routes {
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.security-lifecycle-map__routes--mobile {
  display: none;
}

.security-lifecycle-map__base-routes path {
  stroke: rgba(104, 169, 198, 0.33);
  stroke-width: 1.1px;
}

.security-lifecycle-map__stage {
  transition: opacity 420ms ease;
}

.security-lifecycle-map__capture-route {
  stroke: rgba(98, 215, 245, 0.92);
  stroke-dasharray: 4 12;
  stroke-width: 1.45px;
}

.security-lifecycle-map__incident-route,
.security-lifecycle-map__blocked-route {
  stroke: var(--map-amber);
}

.security-lifecycle-map__incident-route {
  stroke-dasharray: 7 11;
  stroke-width: 1.65px;
}

.security-lifecycle-map__blocked-route {
  stroke-dasharray: 5 9;
  stroke-width: 1.55px;
}

.security-lifecycle-map__incident-ring {
  stroke: rgba(240, 177, 109, 0.8);
}

.security-lifecycle-map__incident-point,
.security-lifecycle-map__gate line {
  fill: var(--map-amber);
  stroke: var(--map-amber);
}

.security-lifecycle-map__recovery-route {
  stroke: var(--map-cyan);
  stroke-dasharray: 6 11;
  stroke-width: 1.75px;
}

.security-lifecycle-map__recovery-point {
  fill: var(--map-green);
}

.security-lifecycle-map[data-stage="0"] .security-lifecycle-map__scan {
  animation: protection-map-scan 6.2s ease-in-out infinite;
}

.security-lifecycle-map[data-stage="0"] .security-lifecycle-map__capture-route {
  animation: protection-map-flow 4.2s linear infinite;
}

.security-lifecycle-map[data-stage="1"] .security-lifecycle-map__incident-route {
  animation: protection-map-flow 3.1s linear infinite;
}

.security-lifecycle-map[data-stage="1"] .security-lifecycle-map__incident-ring {
  animation: protection-map-alert 2.6s ease-in-out infinite;
}

.security-lifecycle-map[data-stage="2"] .security-lifecycle-map__blocked-route {
  animation: protection-map-flow 3.4s linear infinite;
}

.security-lifecycle-map[data-stage="2"] .security-lifecycle-map__gate {
  animation: protection-map-gate 2.4s ease-in-out infinite;
}

.security-lifecycle-map[data-stage="3"] .security-lifecycle-map__recovery-route {
  animation: protection-map-flow-reverse 3.8s linear infinite;
}

.security-lifecycle-map__node {
  z-index: 2;
  display: flex;
  width: clamp(94px, 19%, 136px);
  min-width: 0;
  min-height: 54px;
  padding: 8px 10px;
  gap: 7px;
  overflow: hidden;
  background: #041825;
  border-color: rgba(113, 181, 210, 0.43);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  transition: border-color 420ms ease, background-color 420ms ease, box-shadow 420ms ease;
}

.security-lifecycle-map__node--internet {
  width: clamp(78px, 15%, 102px);
  top: 50%;
  left: 11.5%;
}

.security-lifecycle-map__node--mail {
  top: 25%;
  left: 32%;
}

.security-lifecycle-map__node--identity {
  top: 69.6429%;
  left: 32%;
}

.security-lifecycle-map__node--endpoint {
  top: 48.2143%;
  left: 57%;
}

.security-lifecycle-map__node--data {
  width: clamp(106px, 21%, 148px);
  top: 26.7857%;
  left: 82%;
}

.security-lifecycle-map__node--backup {
  top: 71.4286%;
  left: 82%;
}

.security-lifecycle-map__node-icon {
  flex: 0 0 23px;
  width: 23px;
  height: 25px;
  padding-right: 6px;
}

.security-lifecycle-map__node-copy {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.security-lifecycle-map__node-copy small,
.security-lifecycle-map__node-copy strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.security-lifecycle-map__node-copy small {
  color: #78a9bc;
  font-size: 0.4rem;
  line-height: 1.15;
}

.security-lifecycle-map__node-copy strong {
  color: #d8edf5;
  font-size: clamp(0.5rem, 0.74vw, 0.62rem);
  line-height: 1.1;
}

.security-lifecycle-map__node-state {
  top: 50%;
  right: 5px;
  width: 4px;
  height: 4px;
  transform: translateY(-50%);
}

.security-lifecycle-map[data-stage="1"] .security-lifecycle-map__node--mail,
.security-lifecycle-map[data-stage="1"] .security-lifecycle-map__node--identity,
.security-lifecycle-map[data-stage="1"] .security-lifecycle-map__node--endpoint {
  background: #251b15;
  border-color: rgba(240, 177, 109, 0.78);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), 0 0 22px rgba(240, 177, 109, 0.08);
}

.security-lifecycle-map[data-stage="2"] .security-lifecycle-map__node--mail,
.security-lifecycle-map[data-stage="2"] .security-lifecycle-map__node--identity,
.security-lifecycle-map[data-stage="2"] .security-lifecycle-map__node--endpoint {
  background: #171918;
  border-color: rgba(240, 177, 109, 0.66);
}

.security-lifecycle-map[data-stage="3"] .security-lifecycle-map__node {
  background: #04211f;
  border-color: rgba(105, 222, 176, 0.6);
}

.security-lifecycle-map[data-stage="3"] .security-lifecycle-map__node-state {
  background: var(--map-green);
}

.protection-scroll__steps,
.protection-scroll__step-card,
.protection-scroll__step-heading,
.protection-scroll__step-detail,
.protection-scroll__steps h3,
.protection-scroll__steps strong,
.protection-scroll__steps a {
  min-width: 0;
  max-width: 100%;
}

.protection-scroll__steps h3,
.protection-scroll__steps strong,
.protection-scroll__steps a {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.protection-scroll__steps a {
  width: fit-content;
}

.protection-scroll[data-motion="paused"] .protection-scroll__frame::after,
.protection-scroll[data-motion="paused"] .security-lifecycle-map__scan,
.protection-scroll[data-motion="paused"] .security-lifecycle-map__capture-route,
.protection-scroll[data-motion="paused"] .security-lifecycle-map__incident-route,
.protection-scroll[data-motion="paused"] .security-lifecycle-map__blocked-route,
.protection-scroll[data-motion="paused"] .security-lifecycle-map__recovery-route,
.protection-scroll[data-motion="paused"] .security-lifecycle-map__incident-ring,
.protection-scroll[data-motion="paused"] .security-lifecycle-map__gate {
  animation-play-state: paused;
}

@keyframes protection-map-sweep {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 0.65; }
  72% { opacity: 0.65; }
  100% { transform: translateX(320%); opacity: 0; }
}

@keyframes protection-map-flow {
  to { stroke-dashoffset: -46; }
}

@keyframes protection-map-flow-reverse {
  to { stroke-dashoffset: 50; }
}

@keyframes protection-map-scan {
  0%, 100% { transform: translateX(0); opacity: 0; }
  12% { opacity: 0.46; }
  82% { opacity: 0.46; }
  94% { transform: translateX(1050px); opacity: 0; }
}

@keyframes protection-map-alert {
  0%, 100% { opacity: 0.38; transform: scale(0.86); }
  50% { opacity: 0.95; transform: scale(1.18); }
}

@keyframes protection-map-gate {
  0%, 100% { opacity: 0.68; }
  50% { opacity: 1; }
}

@media (max-width: 980px) {
  .protection-scroll__visual {
    width: min(100%, 760px);
    height: clamp(620px, 78vw, 660px);
    aspect-ratio: auto;
  }

  .protection-scroll__frame {
    grid-template-rows: 58px minmax(0, 1fr) 62px;
  }

  .protection-scroll__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .protection-scroll__steps li {
    min-width: 0;
    min-height: 330px;
  }

  .protection-scroll__step-card,
  .protection-scroll__steps li.is-before .protection-scroll__step-card,
  .protection-scroll__steps li.is-after .protection-scroll__step-card,
  .protection-scroll__steps li.is-far .protection-scroll__step-card,
  .protection-scroll__steps li.is-far.is-before .protection-scroll__step-card {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  .security-lifecycle-map[data-stage="0"] .security-lifecycle-map__scan {
    animation: protection-map-scan 8.2s ease-in-out infinite !important;
  }

  .security-lifecycle-map[data-stage="0"] .security-lifecycle-map__capture-route {
    animation: protection-map-flow 5.6s linear infinite !important;
  }
}

@media (max-width: 720px) {
  .protection-scroll__frame {
    padding-inline: 20px;
  }

  .security-lifecycle-map__node {
    width: clamp(92px, 22%, 126px);
  }

  .security-lifecycle-map__node--internet {
    width: clamp(78px, 16%, 94px);
  }

  .security-lifecycle-map__node--data {
    width: clamp(104px, 24%, 138px);
  }
}

@media (min-width: 521px) and (max-width: 620px) {
  .protection-scroll__frame {
    padding-inline: 18px;
  }

  .security-lifecycle-map__zones {
    display: none;
  }

  .security-lifecycle-map__node {
    width: clamp(84px, 19%, 118px);
    min-height: 44px;
    justify-content: center;
    padding: 7px;
  }

  .security-lifecycle-map__node--internet {
    width: clamp(72px, 15%, 90px);
  }

  .security-lifecycle-map__node--data {
    width: clamp(94px, 22%, 126px);
  }

  .security-lifecycle-map__node-icon,
  .security-lifecycle-map__node-copy small {
    display: none;
  }

  .security-lifecycle-map__node-copy strong {
    text-align: center;
    font-size: 0.52rem;
  }
}

@media (max-width: 520px) {
  .protection-scroll__visual {
    width: min(100%, 440px);
    height: clamp(550px, calc(100vw + 230px), 660px);
    aspect-ratio: auto;
    margin-inline: auto;
  }

  .protection-scroll__frame {
    grid-template:
      "counter" 36px
      "status" 66px
      "map" minmax(0, 1fr)
      "phases" 68px /
      minmax(0, 1fr);
    gap: 0;
    padding: 17px 16px 14px;
    border-radius: 3px 22px 3px 3px;
  }

  .protection-scroll__frame::before {
    inset: 10px;
    border-radius: 2px 15px 2px 2px;
  }

  .protection-scroll__counter {
    justify-self: start;
    align-self: start;
    width: 112px;
    font-size: 0.62rem;
  }

  .protection-scroll__core {
    justify-self: stretch;
    align-self: center;
    width: 100%;
    min-height: 52px;
    padding: 6px 10px 6px 12px;
    border-left-width: 2px;
  }

  .protection-scroll__core small {
    font-size: 0.45rem;
  }

  .protection-scroll__core strong {
    font-size: clamp(0.73rem, 3.2vw, 0.88rem);
  }

  .security-lifecycle-map {
    width: min(100%, 330px);
    height: auto;
    max-height: 100%;
    aspect-ratio: 360 / 500;
  }

  .security-lifecycle-map__routes--desktop,
  .security-lifecycle-map__zones {
    display: none;
  }

  .security-lifecycle-map__routes--mobile {
    display: block;
  }

  .security-lifecycle-map__node {
    width: min(38%, 138px);
    min-height: 48px;
    gap: 5px;
    padding: 7px 8px;
  }

  .security-lifecycle-map__node--internet {
    top: 11%;
    left: 50%;
    width: min(36%, 124px);
  }

  .security-lifecycle-map__node--mail {
    top: 33%;
    left: 25.5556%;
  }

  .security-lifecycle-map__node--identity {
    top: 33%;
    left: 74.4444%;
  }

  .security-lifecycle-map__node--endpoint {
    top: 57%;
    left: 50%;
  }

  .security-lifecycle-map__node--data {
    top: 85%;
    left: 25.5556%;
    width: min(41%, 146px);
  }

  .security-lifecycle-map__node--backup {
    top: 85%;
    left: 74.4444%;
  }

  .security-lifecycle-map__node-icon {
    flex-basis: 20px;
    width: 20px;
    height: 22px;
    padding-right: 5px;
  }

  .security-lifecycle-map__node-icon svg {
    width: 15px;
  }

  .security-lifecycle-map__node-copy small {
    display: none;
  }

  .security-lifecycle-map__node-copy strong {
    font-size: clamp(0.54rem, 2vw, 0.6rem);
    letter-spacing: 0.015em;
  }

  .protection-scroll__telemetry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
    padding-top: 10px;
    font-size: 0.47rem;
  }

  .protection-scroll__telemetry span,
  .protection-scroll__telemetry span:nth-child(2n) {
    display: inline-flex;
  }

  .protection-scroll__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .protection-scroll__steps li {
    min-height: auto;
  }

  .protection-scroll__steps h3 {
    font-size: clamp(1.85rem, 9vw, 2.15rem);
  }
}

@media (max-width: 350px) {
  .protection-scroll__frame {
    padding-inline: 13px;
  }

  .security-lifecycle-map__node {
    padding-inline: 6px;
  }

  .security-lifecycle-map__node-icon {
    display: none;
  }

  .security-lifecycle-map__node-copy strong {
    text-align: center;
  }
}

@media (min-width: 981px) and (max-height: 700px) {
  .protection-scroll__sticky {
    height: calc(100svh - var(--header-height) - 20px);
    min-height: 500px;
    gap: 12px;
  }

  .protection-scroll h2 {
    font-size: clamp(2rem, 3.1vw, 3.15rem);
  }

  .protection-scroll__frame {
    grid-template-rows: 54px minmax(0, 1fr) 50px;
    padding-block: 17px 14px;
  }

  .security-lifecycle-map {
    width: auto;
    height: 100%;
    max-width: 100%;
  }

  .security-lifecycle-map__node {
    width: clamp(86px, 18%, 118px);
    min-height: 46px;
  }

  .security-lifecycle-map__node--internet {
    width: clamp(70px, 14%, 88px);
  }

  .security-lifecycle-map__node--data {
    width: clamp(96px, 20%, 130px);
  }

  .security-lifecycle-map__node-copy small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .protection-scroll__frame,
  .protection-scroll__frame::after,
  .protection-scroll__core,
  .protection-scroll__counter i::after,
  .protection-scroll__telemetry span,
  .security-lifecycle-map__stage,
  .security-lifecycle-map__node,
  .security-lifecycle-map__scan,
  .security-lifecycle-map__capture-route,
  .security-lifecycle-map__incident-route,
  .security-lifecycle-map__blocked-route,
  .security-lifecycle-map__recovery-route,
  .security-lifecycle-map__incident-ring,
  .security-lifecycle-map__gate {
    animation: none !important;
    transition: none !important;
  }

  .protection-scroll__frame::after,
  .security-lifecycle-map__stage {
    display: none;
  }

  .security-lifecycle-map__base-routes path {
    stroke: rgba(120, 199, 226, 0.58);
  }
}

@media (min-width: 981px) and (prefers-reduced-motion: reduce) {
  .protection-scroll__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }

  .protection-scroll__sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
  }

  .protection-scroll__visual {
    width: min(100%, 760px);
    height: 560px;
  }

  .protection-scroll__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 0;
  }

  .protection-scroll__steps li {
    min-height: auto;
  }

  .protection-scroll__step-card,
  .protection-scroll__steps li.is-before .protection-scroll__step-card,
  .protection-scroll__steps li.is-after .protection-scroll__step-card,
  .protection-scroll__steps li.is-far .protection-scroll__step-card,
  .protection-scroll__steps li.is-far.is-before .protection-scroll__step-card {
    min-height: 100%;
    padding: 36px 30px;
  }
}

@media (forced-colors: active) {
  .protection-scroll__frame,
  .protection-scroll__core,
  .security-lifecycle-map__node {
    border: 1px solid CanvasText;
  }

  .security-lifecycle-map__routes path,
  .security-lifecycle-map__routes line,
  .security-lifecycle-map__routes circle {
    stroke: CanvasText;
  }
}