/* Vector SMART diagram shared by the hero and academy pages. */
.site-main .smart-radar-figure.smart-radar-refined {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 660px;
  padding: 0;
  margin-inline: auto !important;
  font-family: Inter, Arial, sans-serif;
}

.site-main .isa-hero .smart-radar-refined {
  width: 88%;
  max-width: 560px;
  margin-block: clamp(2rem, 3vw, 3rem) !important;
}

.site-main .smart-radar-refined .smart-radar {
  position: relative;
  display: block;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1;
  overflow: visible;
  contain: none;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 87, 151, .3), rgba(19, 50, 88, .12) 56%, transparent 72%);
  box-shadow: none;
  color: #85baff;
  text-decoration: none;
}

.smart-radar-refined .smart-grid { position: absolute; inset: 0; width: 100%; height: 100%; }

.smart-radar-refined .smart-sweep {
  position: absolute;
  inset: 5%;
  z-index: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 300deg, rgba(60, 148, 246, .03) 310deg, rgba(80, 163, 255, .18) 357deg, transparent 360deg);
  animation: smart-refined-sweep 16s linear infinite paused;
  pointer-events: none;
}

.smart-radar-refined .smart-radar.is-in-view .smart-sweep { animation-play-state: running; }
.smart-radar-refined .smart-radar.is-paused .smart-sweep { animation-play-state: paused; }

.smart-radar-refined .smart-centre {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 28%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid #69aaff;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 25%, #163b63, #091d36 75%);
  box-shadow: 0 0 0 7px rgba(64, 142, 239, .1), 0 0 35px rgba(34, 120, 231, .16);
  line-height: 1;
}

.smart-radar-refined .smart-centre small {
  color: #b1d2f5;
  font-size: clamp(.55rem, 1.7cqi, .72rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.smart-radar-refined .smart-centre strong {
  margin: .18em 0 .22em;
  color: #fff;
  font-size: clamp(1.25rem, 6.1cqi, 2.5rem);
  font-weight: 800;
  letter-spacing: .015em;
}

.smart-radar-refined .smart-centre > span {
  color: #9fc7f2;
  font-size: clamp(.55rem, 1.7cqi, .72rem);
  font-weight: 600;
  letter-spacing: .15em;
}

.smart-radar-refined .smart-phase {
  position: absolute;
  top: var(--radar-y);
  left: var(--radar-x);
  z-index: 4;
  width: 10%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: #8dc2ff;
  text-align: center;
}

.smart-radar-refined .smart-phase-marker {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: clamp(1rem, 4.2cqi, 1.65rem);
  font-weight: 750;
  line-height: 1;
  transition: color .3s ease, filter .3s ease;
}

.smart-radar-refined .smart-phase-marker::before,
.smart-radar-refined .smart-phase-marker::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #4578b1;
  clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
  content: '';
  transition: background .3s ease;
}

.smart-radar-refined .smart-phase-marker::after { inset: 2px; z-index: -1; background: #0b2340; }

.smart-radar-refined .smart-phase-label {
  position: absolute;
  top: calc(100% + .45rem);
  left: 50%;
  display: block;
  width: 26cqi;
  max-width: 148px;
  transform: translateX(-50%);
  color: #d1e4fa;
  font-family: inherit;
  font-size: clamp(.75rem, 2.55cqi, .95rem);
  font-weight: 650;
  letter-spacing: .025em;
  line-height: 1.3;
  text-shadow: 0 1px 3px #091a30;
}

.smart-radar-refined .smart-phase.is-active .smart-phase-marker { color: #fff; filter: drop-shadow(0 0 9px rgba(89, 169, 255, .45)); }
.smart-radar-refined .smart-phase.is-active .smart-phase-marker::before { background: #a6d4ff; }
.smart-radar-refined .smart-phase.is-active .smart-phase-marker::after { background: #2764a4; }
.smart-radar-refined .smart-phase.is-active .smart-phase-label { color: #fff; }

.site-main .smart-radar-refined .smart-radar-caption {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  padding: .9rem .25rem 0;
  border-top: 1px solid rgba(139, 189, 245, .18);
  color: #b1d2f5;
  text-align: center;
  pointer-events: auto;
}

.smart-radar-refined [data-radar-status] { font-size: .75rem; font-weight: 500; line-height: 1.5; }
.site-main .smart-radar-refined .smart-radar-read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .6rem 1rem;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font: 600 .75rem/1.5 Inter, Arial, sans-serif;
  text-decoration: none;
}
.site-main .smart-radar-refined .smart-radar-read-more:hover,
.site-main .smart-radar-refined .smart-radar-read-more:focus-visible {
  border-color: #fff;
  background: #fff;
  color: #111a24;
}
.smart-radar-refined .smart-radar:focus-visible,
.smart-radar-refined .smart-radar-read-more:focus-visible { outline: 2px solid #a6d4ff; outline-offset: 5px; }

@keyframes smart-refined-sweep { to { transform: rotate(360deg); } }
@media (max-width: 991.98px) { .site-main .isa-hero .smart-radar-refined { max-width: 420px; } }
@media (max-width: 575.98px) { .site-main .isa-hero .smart-radar-refined { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .smart-radar-refined .smart-sweep { animation: none; display: none; }
  .smart-radar-refined .smart-phase-marker,
  .smart-radar-refined .smart-phase-marker::before,
  .smart-radar-refined .smart-phase-marker::after { transition: none; }
}