/* ============================================================
   GKS overrides for riskbased.ai  (GKSC2-1745)
   Loaded on every page via /js/gks-overrides.js.
   Only GKS brand colors are used (see CLAUDE.md).
   ============================================================ */
:root {
  --gks-purple: #524FE5;
  --gks-purple-dark: #3F3DA8;
  --gks-purple-light: #CDCDF9;
  --gks-purple-ice: #F1F1FC;
}

/* --- KeyPedia-company announcement bar ---------------------- */
.gks-announce-bar {
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--gks-purple);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.35;
  padding: 10px 46px;
  text-align: center;
}
.gks-announce-text, .gks-announce-text strong { color: #fff !important; }
.gks-announce-text strong { font-weight: 700; }
.gks-announce-link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.gks-announce-link:hover { color: var(--gks-purple-light); }
.gks-announce-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  padding: 0 4px;
}
.gks-announce-close:hover { opacity: 1; }
@media (max-width: 479px) {
  .gks-announce-bar { font-size: 13px; padding: 9px 42px; }
}

/* --- Homepage: enlarge the 4-step "how it works" titles ----- */
.gks-step-title { font-size: 1.5rem !important; line-height: 1.25 !important; }

/* --- "Riskbased.ai is now part of KeyPedia" redirect popup --- */
/* --- Seamless "continue to KeyPedia" transition ------------- */
.gks-rd-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* The real KeyPedia page loads in behind the card (an iframe). If KeyPedia
   allows framing by riskbased.ai it shows through; if it is blocked, the
   backdrop is transparent so the riskbased.ai page itself stays visible
   (dimmed by the scrim) — never a flat/random color. */
.gks-rd-bg { position: absolute; inset: 0; background: transparent; opacity: 0; transition: opacity 0.6s ease; }
.gks-rd-overlay.is-active .gks-rd-bg { opacity: 1; }
.gks-rd-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.gks-rd-scrim { position: absolute; inset: 0; background: rgba(15, 18, 32, 0.42); cursor: pointer; }

.gks-rd-card {
  position: relative; z-index: 1;
  background: #fff; border-radius: 20px; max-width: 400px; width: 100%;
  padding: 34px 30px 26px; text-align: center; font-family: inherit;
  box-shadow: 0 30px 70px rgba(16, 15, 30, 0.42);
  transform: translateY(14px) scale(0.98); opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease;
}
.gks-rd-overlay.is-active .gks-rd-card { transform: none; opacity: 1; }

.gks-rd-ring { position: relative; width: 96px; height: 96px; margin: 4px auto 20px; }
.gks-rd-prog { width: 100%; height: 100%; transform: rotate(-90deg); }
.gks-rd-prog .trk { fill: none; stroke: var(--gks-purple-ice); stroke-width: 6; }
.gks-rd-prog .bar {
  fill: none; stroke: #2166e8; stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 283; stroke-dashoffset: 283; transition: stroke 0.3s ease;
}
.gks-rd-overlay.is-active .gks-rd-prog .bar {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--rd-dur, 7000ms) linear, stroke 0.3s ease;
}
.gks-rd-overlay.is-done .gks-rd-prog .bar { stroke: #249c3d; transition: none; }
.gks-rd-icon {
  position: absolute; top: 50%; left: 50%; width: 42px; height: 42px;
  transform: translate(-50%,-50%); transition: opacity 0.25s ease, transform 0.25s ease;
}
.gks-rd-overlay.is-done .gks-rd-icon { opacity: 0; transform: translate(-50%,-50%) scale(0.6); }
.gks-rd-check {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px;
  transform: translate(-50%,-50%) scale(0.7); opacity: 0;
  transition: opacity 0.25s ease 0.1s, transform 0.35s cubic-bezier(0.22,1,0.36,1) 0.1s;
}
.gks-rd-check path {
  fill: none; stroke: #249c3d; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset 0.4s ease 0.15s;
}
.gks-rd-overlay.is-done .gks-rd-check { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.gks-rd-overlay.is-done .gks-rd-check path { stroke-dashoffset: 0; }

.gks-rd-title { font-size: 22px; font-weight: 700; color: #0f1220; margin: 0 0 8px; letter-spacing: -0.01em; }
.gks-rd-text { font-size: 14.5px; line-height: 1.5; color: #0f1220; margin: 0 0 22px; }
.gks-rd-cta {
  display: block; width: 100%; background: #2166e8; color: #fff !important;
  font-size: 16px; font-weight: 600; padding: 13px 20px; border-radius: 999px;
  text-decoration: none; transition: background 0.15s ease;
}
.gks-rd-cta:hover { background: #1751c4; color: #fff !important; }
.gks-rd-back {
  display: block; width: 100%; margin-top: 12px; background: transparent; border: 0;
  cursor: pointer; color: #33333f; font-size: 14px; font-weight: 600; font-family: inherit;
}
.gks-rd-back:hover { color: #0f1220; text-decoration: underline; }
.gks-rd-close {
  position: absolute; top: 12px; right: 14px; background: transparent; border: 0;
  cursor: pointer; font-size: 24px; line-height: 1; color: #6f6d85;
}
.gks-rd-close:hover { color: #55535f; }
@media (prefers-reduced-motion: reduce) {
  .gks-rd-bg, .gks-rd-card, .gks-rd-prog .bar, .gks-rd-icon, .gks-rd-check { transition: none !important; }
}