@font-face {
  font-family: "Waypoint Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/kaiko-site/fonts/waypoint-google-sans-latin.woff2") format("woff2");
}

:root {
  --waypoint-canvas: #b5baff;
  --waypoint-surface: #9fa1ff;
  --waypoint-info: #aee2ff;
  --waypoint-accent: #67a2c5;
  --waypoint-ink: #14152b;
  --waypoint-ink-soft: #454868;
  --waypoint-quiet: #f5f5fd;
  --waypoint-white: #ffffff;
  --waypoint-line: #d7d8f0;
  --waypoint-line-strong: #b9bbe0;
  color-scheme: light;
}

html {
  color: var(--waypoint-ink);
}

body {
  background: var(--waypoint-quiet);
}

html,
body,
button,
input,
select,
textarea,
.font-title,
.font-body,
.font-button {
  font-family:
    "Waypoint Google Sans", ui-sans-serif, system-ui, sans-serif !important;
}

/*
 * The hero glass is a moving MP4 rather than a CSS gradient. Shift its
 * cobalt/cyan pixels into Waypoint's lavender range without changing motion.
 * Apply the same grade to the low-power poster fallback.
 */
.js-header-video,
img[src$="/images/poster.webp"],
img[src="images/poster.webp"] {
  filter: hue-rotate(36deg) saturate(0.58) brightness(1.08) contrast(0.88);
}

/* Keep only the landing-page CTA from the original navigation header. */
.js-navigation .js-nav-bg,
.js-navigation > .js-nav-item > a,
.js-navigation nav > ul > li:not(:has([data-gtm-location="nav_bar"])) {
  display: none !important;
}

.js-navigation > .js-nav-item {
  justify-content: flex-end;
}

.js-navigation > .js-nav-item > nav {
  margin-left: auto;
}

.js-navigation nav > ul > li:has([data-gtm-location="nav_bar"]) {
  display: block !important;
  margin-left: 0;
}

/* These secondary section CTAs were removed from the static HTML. */
.iso-cta {
  display: none !important;
}

/* Keep testimonial quotes and controls, but remove author identities. */
section:has(.js-partners-button) .relative:has(.js-author) {
  display: none !important;
}

/* The security section's Trust Center CTA was removed. */
.js-security-cta {
  display: none !important;
}

/* Give the final hospital-workflows CTA a little more breathing room. */
section:has(.js-getintouch-title-regular) {
  padding-bottom: 34px;
}

main > .bg-page:has(.js-getintouch-title-regular) {
  border-radius: 0 0 12px 12px;
}

@media (min-width: 640px) {
  main > .bg-page:has(.js-getintouch-title-regular) {
    border-radius: 0 0 16px 16px;
  }
}

/* Core Kaiko utility colors translated to the Waypoint design system. */
.bg-blue,
.peer:checked ~ .peer-checked\:bg-blue {
  background-color: var(--waypoint-ink);
}

.bg-light-blue,
.hover\:bg-light-blue:hover {
  background-color: var(--waypoint-info);
}

.bg-page {
  background-color: var(--waypoint-quiet);
}

.bg-white,
.nottouch\:hover\:bg-white:hover {
  background-color: var(--waypoint-white);
}

.bg-ui,
.after\:bg-ui::after,
.js-square {
  background-color: var(--waypoint-line-strong);
}

.text-blue,
.\!text-blue {
  color: var(--waypoint-ink) !important;
}

.text-blue\/50 {
  color: rgb(20 21 43 / 0.5);
}

.text-blue\/70 {
  color: rgb(20 21 43 / 0.7);
}

.text-\[\#387DD5\] {
  color: var(--waypoint-accent);
}

.text-\[\#86D6D2\] {
  color: var(--waypoint-info);
}

.border-ui,
.divide-ui > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--waypoint-line);
}

.border-blue,
.hover\:border-blue:hover,
.peer:checked ~ .peer-checked\:border-blue {
  border-color: var(--waypoint-ink);
}

.placeholder\:text-blue\/40::placeholder {
  color: rgb(69 72 104 / 0.55);
}

.placeholder\:text-blue\/50::placeholder {
  color: rgb(69 72 104 / 0.65);
}

/* Intro, page cover, navigation menu, and glass dialog atmosphere. */
.grad-menu {
  background:
    radial-gradient(
      circle at 18% 12%,
      rgb(174 226 255 / 0.9) 0,
      rgb(174 226 255 / 0) 38%
    ),
    radial-gradient(
      circle at 82% 78%,
      rgb(103 162 197 / 0.42) 0,
      rgb(103 162 197 / 0) 42%
    ), linear-gradient(145deg, var(--waypoint-canvas), var(--waypoint-surface));
}

.grad-overlay {
  background:
    radial-gradient(circle at 75% 35%, rgb(174 226 255 / 0.5), transparent 38%),
    linear-gradient(
      270deg,
      rgb(159 161 255 / 0.96),
      rgb(181 186 255 / 0.93) 40%,
      rgb(20 21 43 / 0.42)
    );
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
}

.grad-page {
  background-image: linear-gradient(
    105deg,
    rgb(255 255 255 / 0.97),
    rgb(245 245 253 / 0.97)
  );
}

.fixed.grad-menu {
  color: var(--waypoint-ink);
}

.fixed.grad-menu > .text-white,
.fixed.grad-menu > .absolute .text-white,
.fixed.grad-menu nav > ul.text-white {
  color: var(--waypoint-ink);
}

.grad-overlay [fill="#FFFDF9"],
.grad-overlay [fill="#fff"],
.grad-overlay [fill="white"] {
  fill: var(--waypoint-ink);
}

.fixed.grad-menu [fill="#FFFDF9"],
.fixed.grad-menu [fill="#fff"],
.fixed.grad-menu [fill="white"] {
  fill: var(--waypoint-ink);
}

/* Animated headings, ambient halo, and scroll/pagination dots. */
.gradient-text--blue .gradient-char,
.js-getintouch-title-gradient,
.js-title-gradient {
  background-image: linear-gradient(
    91deg,
    var(--waypoint-accent),
    var(--waypoint-surface)
  );
}

.gradient-text--purple .gradient-char,
.gradient-text--research .gradient-char {
  background-image: linear-gradient(
    91deg,
    var(--waypoint-surface),
    var(--waypoint-accent)
  );
}

.title--bg {
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgb(159 161 255 / 0.52) 0,
    rgb(174 226 255 / 0) 100%
  );
}

.js-square,
.js-pagination-arrow rect,
.js-back-to-top rect {
  fill: var(--waypoint-ink);
}

/* Inline SVGs are generated again during hydration, so theme their source colors. */
[fill="#193969"] {
  fill: var(--waypoint-ink);
}

[stroke="#193969"] {
  stroke: var(--waypoint-ink);
}

[fill="#387DD5"],
[fill="#387dd5"] {
  fill: var(--waypoint-accent);
}

[stroke="#387DD5"],
[stroke="#387dd5"] {
  stroke: var(--waypoint-accent);
}

[fill="#86D6D2"],
[fill="#86d6d2"] {
  fill: var(--waypoint-info);
}

.scrollable {
  scrollbar-color: var(--waypoint-line-strong) var(--waypoint-quiet);
}

.scrollable::-webkit-scrollbar-track {
  background: var(--waypoint-quiet);
}

.scrollable::-webkit-scrollbar-thumb {
  background-color: var(--waypoint-line-strong);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}