.visitor-sign-info {
  background: #ffffff;
  color: #111827;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.35;
  margin: 0;
  overflow-x: hidden;
  width: 100%;
}

html:has(.visitor-sign-info),
body:has(.visitor-sign-info),
html.kg-visitor-contractor-signin-info,
body.kg-visitor-contractor-signin-info {
  background: #4338ca;
  margin: 0;
  padding: 0;
}

body:has(.visitor-sign-info) > div,
body.kg-visitor-contractor-signin-info > div,
body.kg-visitor-contractor-signin-info .page-wrapper,
body.kg-visitor-contractor-signin-info .page-wrapper > .container,
body.kg-visitor-contractor-signin-info .page-wrapper > .container > .row,
body.kg-visitor-contractor-signin-info .page-wrapper > .container > .row > .col-md-12,
body.kg-visitor-contractor-signin-info .page-copy,
body.kg-visitor-contractor-signin-info .xrm-editable-html,
body.kg-visitor-contractor-signin-info .xrm-attribute-value {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.visitor-sign-info * {
  box-sizing: border-box;
}

.vsi-section {
  height: 100svh;
  left: 50%;
  margin: 0 0 0 -50vw;
  max-height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(18px, 3.5vw, 34px) clamp(16px, 3.2vw, 38px);
  position: relative;
  -webkit-overflow-scrolling: touch;
  width: 100vw;
}

.vsi-inner {
  margin: 0 auto;
  max-width: 1120px;
  width: 100%;
}

.vsi-section h1,
.vsi-section h2,
.vsi-section h3,
.vsi-section p {
  margin: 0;
}

.vsi-section h1 {
  font-size: clamp(32px, 5.2vw, 58px);
  font-weight: 800;
  line-height: 0.98;
  margin-top: 8px;
  text-transform: uppercase;
}

.vsi-section h2 {
  font-size: clamp(22px, 3.3vw, 38px);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.vsi-section h3 {
  font-size: clamp(17px, 2.15vw, 25px);
  font-weight: 800;
  line-height: 1.15;
  margin-top: 18px;
}

.vsi-section p {
  font-size: clamp(15px, 1.75vw, 20px);
  font-weight: 600;
  margin-top: 9px;
}

.vsi-action {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.vsi-action i {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 1.35em;
  font-size: 0.7em;
  height: 1.35em;
  justify-content: center;
  line-height: 1;
  margin-top: 0.16em;
  width: 1.35em;
}

.vsi-action span {
  color: inherit !important;
  flex: 1 1 auto;
}

.vsi-action--do i {
  background: #15803d;
  color: #ffffff !important;
}

.vsi-action--dont i {
  background: #dc2626;
  color: #ffffff !important;
}

.vsi-kicker,
.vsi-lede {
  font-size: clamp(17px, 2.25vw, 26px);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.vsi-lede {
  margin-bottom: 34px;
  text-transform: none;
}

.vsi-section--hero {
  background: #4338ca;
  color: #ffffff !important;
  min-height: 100svh;
}

.vsi-section--hero .vsi-inner {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - clamp(18px, 3.5vw, 34px) - clamp(18px, 3.5vw, 34px));
}

.vsi-section--summary {
  background: #f7c948;
  color: #102a43 !important;
}

.vsi-section--safeguarding {
  background: #1f7a5c;
  color: #ffffff !important;
}

.vsi-section--alarm {
  background: #b91c1c;
  color: #ffffff !important;
}

.vsi-section--atrium {
  background: #f8fafc;
  color: #123047 !important;
}

.vsi-section--contractor {
  background: #4338ca;
  color: #ffffff !important;
}

.visitor-sign-info .vsi-section--hero h1,
.visitor-sign-info .vsi-section--hero h2,
.visitor-sign-info .vsi-section--hero h3,
.visitor-sign-info .vsi-section--hero p,
.visitor-sign-info .vsi-section--safeguarding h1,
.visitor-sign-info .vsi-section--safeguarding h2,
.visitor-sign-info .vsi-section--safeguarding h3,
.visitor-sign-info .vsi-section--safeguarding p,
.visitor-sign-info .vsi-section--alarm h1,
.visitor-sign-info .vsi-section--alarm h2,
.visitor-sign-info .vsi-section--alarm h3,
.visitor-sign-info .vsi-section--alarm p,
.visitor-sign-info .vsi-section--contractor h1,
.visitor-sign-info .vsi-section--contractor h2,
.visitor-sign-info .vsi-section--contractor h3,
.visitor-sign-info .vsi-section--contractor p {
  color: #ffffff !important;
}

.visitor-sign-info .vsi-section--summary h1,
.visitor-sign-info .vsi-section--summary h2,
.visitor-sign-info .vsi-section--summary h3,
.visitor-sign-info .vsi-section--summary p {
  color: #102a43 !important;
}

.visitor-sign-info .vsi-section--atrium h1,
.visitor-sign-info .vsi-section--atrium h2,
.visitor-sign-info .vsi-section--atrium h3,
.visitor-sign-info .vsi-section--atrium p {
  color: #123047 !important;
}

.vsi-announcement {
  background: #f0f9ff;
  border: 3px solid #38bdf8;
  border-radius: 8px;
  color: #0f2d44 !important;
  margin-top: auto;
  padding: 34px 24px 24px;
  position: relative;
}

.vsi-announcement__icon {
  align-items: center;
  background: #38bdf8;
  border: 3px solid #102a43;
  border-radius: 999px;
  color: #102a43 !important;
  display: inline-flex;
  font-size: 20px;
  height: 44px;
  justify-content: center;
  left: 18px;
  position: absolute;
  top: -22px;
  width: 44px;
}

.visitor-sign-info .vsi-announcement h2 {
  color: #0f2d44 !important;
  font-size: clamp(18px, 2.25vw, 26px);
  line-height: 1.12;
  padding-left: 48px;
}

.visitor-sign-info .vsi-announcement p {
  color: #0f2d44 !important;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.35;
  margin-top: 12px;
}

.vsi-announcement .vsi-action {
  gap: 10px;
}

.vsi-announcement .vsi-action i {
  font-size: 0.72em;
}

.vsi-leads {
  border-top: 4px solid currentColor;
  margin-top: 34px;
  padding-top: 8px;
}

.vsi-lead-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  margin-top: 16px;
}

.vsi-lead {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
  text-align: center;
}

.vsi-lead__photo {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.18);
  border: 3px solid currentColor;
  border-radius: 50%;
  display: block;
  height: auto;
  max-width: 142px;
  object-fit: cover;
  overflow: hidden;
  width: 100%;
}

.visitor-sign-info .vsi-lead__name {
  color: #ffffff !important;
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 800;
  line-height: 1.15;
  margin-top: 10px;
}

.vsi-scroll-cue {
  align-items: center;
  animation: vsiScrollCueFloat 1.4s ease-in-out infinite;
  background: rgba(17, 24, 39, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  bottom: 22px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  color: #ffffff !important;
  display: inline-flex;
  font-size: 18px;
  font-weight: 800;
  gap: 10px;
  left: 22px;
  line-height: 1;
  opacity: 1;
  padding: 14px 18px;
  pointer-events: none;
  position: fixed;
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
  visibility: visible;
  z-index: 9999;
}

.vsi-scroll-cue i,
.vsi-scroll-cue span {
  color: #ffffff !important;
}

.vsi-scroll-cue i {
  font-size: 20px;
}

.vsi-scroll-cue.is-hidden {
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
}

@keyframes vsiScrollCueFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vsi-scroll-cue {
    animation: none;
  }
}

@media (max-width: 700px) {
  .vsi-lead-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}