/* Page 1 (index) styles */
.kb-page {
  height: 100%;
  height: 100dvh;
}

.figma-canvas {
  --canvas: min(100vw, 1920px);
  position: relative;
  top: -40px;
  width: var(--canvas);
  margin-inline: auto;
  height: 100%;
  height: 100dvh;
  min-height: 100%;
  min-height: 100dvh;
  overflow: hidden;
}

/* Vector.png — width 122, height 83, top 94, left 818 */
.vector {
  position: absolute;
  z-index: 1;
  top: calc(94 * var(--canvas) / var(--figma-w));
  left: calc(818 * var(--canvas) / var(--figma-w));
  width: calc(122 * var(--canvas) / var(--figma-w));
  height: calc(83 * var(--canvas) / var(--figma-w));
  display: flex;
  align-items: center;
  justify-content: center;
}

.vector__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.icloud-label {
  position: absolute;
  z-index: 2;
  top: calc(118 * var(--canvas) / var(--figma-w));
  left: calc(951 * var(--canvas) / var(--figma-w));
  width: calc(233 * var(--canvas) / var(--figma-w));
  height: calc(44 * var(--canvas) / var(--figma-w));
  margin: 0;
  padding: 0;
  background: transparent;
  color: #007ada;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: calc(58 * var(--canvas) / var(--figma-w));
  line-height: 90%;
  letter-spacing: -0.04em;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.kb-title {
  position: absolute;
  z-index: 3;
  top: calc(335 * var(--canvas) / var(--figma-w) - 40px);
  left: 50%;
  width: calc(795 * var(--canvas) / var(--figma-w));
  height: calc(171 * var(--canvas) / var(--figma-w));
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  background: transparent;
  color: #007ada;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: calc(100 * var(--canvas) / var(--figma-w));
  line-height: 90%;
  letter-spacing: -0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.hero-lead {
  position: absolute;
  z-index: 4;
  top: calc(457 * var(--canvas) / var(--figma-w));
  left: calc(238 * var(--canvas) / var(--figma-w));
  width: calc(1403.753527913125 * var(--canvas) / var(--figma-w));
  min-height: calc(89.5419074906771 * var(--canvas) / var(--figma-w));
  margin: 0;
  padding: 0;
  background: transparent;
  color: rgba(160, 155, 155, 0.44);
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: calc(35 * var(--canvas) / var(--figma-w));
  line-height: 90%;
  letter-spacing: -0.04em;
  text-align: center;
  box-sizing: border-box;
}

.login-cta {
  position: absolute;
  z-index: 5;
  top: calc(570 * var(--canvas) / var(--figma-w));
  left: calc(1401 * var(--canvas) / var(--figma-w));
  width: calc(230 * var(--canvas) / var(--figma-w));
  height: calc(60 * var(--canvas) / var(--figma-w));
  border-radius: calc(35 * var(--canvas) / var(--figma-w));
  background: rgba(0, 134, 240, 0.83);
  text-decoration: none;
  overflow: hidden;
}

.login-cta:hover {
  filter: brightness(1.05);
}

.login-cta:focus-visible {
  outline: 2px solid rgba(0, 134, 240, 0.9);
  outline-offset: 3px;
}

.login-cta__text {
  position: absolute;
  left: calc(74 * var(--canvas) / var(--figma-w));
  top: calc(16 * var(--canvas) / var(--figma-w));
  width: calc(81 * var(--canvas) / var(--figma-w));
  min-height: calc(21 * var(--canvas) / var(--figma-w));
  margin: 0;
  padding: 0;
  background: transparent;
  color: #ffffff;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: calc(30 * var(--canvas) / var(--figma-w));
  line-height: 100%;
  letter-spacing: -0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  pointer-events: none;
}

.bottom-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;
  transform: scale(0.75);
  transform-origin: bottom center;
  pointer-events: none;
}

.bottom-strip img {
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  object-fit: contain;
}

.bottom-strip__rect {
  position: relative;
  top: 387px;
  left: 110px;
  width: 364px;
  height: 363px;
}

.bottom-strip__leftleft {
  position: absolute;
  width: 314px;
  height: 226px;
  left: 41px;
  bottom: 0;
  z-index: 3;
}

.bottom-strip__rightright {
  position: absolute;
  width: 274px;
  height: 253px;
  right: 0;
  bottom: 0;
  z-index: 3;
}

.bottom-strip__left {
  position: relative;
  top: 387px;
  left: -320px;
  width: 453px;
  height: 436px;
}

.bottom-strip__team {
  position: relative;
  z-index: 2;
  top: 382px;
  left: -430px;
  width: 312px;
  height: 382px;
}

.bottom-strip__right {
  position: relative;
  z-index: 1;
  top: 8px;
  left: 284px;
  width: 400px;
  height: 340px;
}