/* The same Nexus connections, carried into the page's working surfaces. */
body main.homepage .depth-card {
  position: relative;
  isolation: isolate;
  --light-x: 78%;
  --light-y: 12%;
  --light-strength: 0;
}
body main.homepage .depth-card::before,
body main.homepage .depth-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
}
body main.homepage .depth-card::before {
  background: url('assets/nexus-card-connections.svg') right top / auto 100% no-repeat;
  mask-image: linear-gradient(100deg, transparent 23%, #000 100%);
  opacity: .38;
  transition: opacity 220ms ease-out;
}
body main.homepage .depth-card::after {
  background: radial-gradient(280px circle at var(--light-x) var(--light-y), #9cd5f04d, transparent 78%);
  opacity: var(--light-strength);
  transition: opacity 180ms ease-out;
}
body main.homepage .depth-card.is-lit { --light-strength: 1; }
body main.homepage .depth-card.is-lit::before { opacity: .68; }
body main.homepage .home-points > article,
body main.homepage .home-steps > li {
  border: 0;
  border-radius: 16px;
  padding: 28px;
  background: linear-gradient(135deg, #fff 8%, #f2f8fc 100%);
  box-shadow: 0 14px 32px -19px #24597938;
  transition: box-shadow 220ms ease-out, background-color 220ms ease-out;
}
body main.homepage .home-points > article:nth-child(2) {
  background: linear-gradient(135deg, #f5fafd, #e9f4fb);
}
body main.homepage .home-points > article:nth-child(2)::before {
  background-position: right bottom;
  transform: scaleY(-1);
}
body main.homepage .home-points > article.is-lit,
body main.homepage .home-steps > li.is-lit {
  box-shadow: 0 18px 36px -18px #2459794a;
}
body main.homepage .hero-stage {
  box-shadow: 0 22px 48px -30px #24597952;
}
body main.homepage .hero-stage.depth-card::before { opacity: .2; }
body main.homepage .hero-stage .hero-output .document,
body main.homepage .home-demo .wf-chat-output .wf-document {
  border: 0;
  border-radius: 12px;
  background: linear-gradient(150deg, #fff 35%, #f4f9fc);
  box-shadow: 0 12px 28px -17px #2459795c;
}
body main.homepage .hero-stage .hero-output .document::before,
body main.homepage .home-demo .wf-document::before { opacity: .18; }
body main.homepage .home-demo .home-demo-frame {
  background: linear-gradient(140deg, #eaf4fb, #d9eaf6);
  box-shadow: 0 24px 52px -32px #2459795c;
}
body main.homepage .home-demo .wf-delivery {
  background: linear-gradient(155deg, #fff 20%, #f7fbfe 100%);
}
body main.homepage .home-demo .wf-chat-top { background: #f1f7fce6; }
body main.homepage .home-demo .wf-attachment-head,
body main.homepage .home-demo .wf-attachment-source { background: #f3f8fbc9; }
body main.homepage .home-demo .home-connected { background: #f7fbfd; }
body main.homepage .home-about figure img {
  box-shadow: 0 24px 50px -30px #24597966;
}
/* Scroll describes the order of an engagement, while every card stays legible. */
.journey-track {
  position: relative;
  height: 2px;
  margin: 44px 28px 0;
  background: #d4e6f0;
  --journey-progress: 1;
}
.journey-track > span {
  position: absolute;
  inset: 0;
  background: #2180b8;
  transform: scaleX(var(--journey-progress));
  transform-origin: left;
}
.journey-track > i {
  position: absolute;
  top: -3px;
  left: var(--stop);
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: #d4e6f0;
  transform: translateX(-50%);
  transition: background-color 180ms ease-out;
}
.journey-track > i.is-reached { background: #2180b8; }
body main.homepage .home-steps { margin-top: 24px; }
body main.homepage .home-steps > li > span { color: #527082; }
body main.homepage .home-steps > li.is-reached {
  background: linear-gradient(135deg, #fff 5%, #eaf5fc);
}
body main.homepage .home-steps > li.is-reached > span { color: #14638f; }
body main.homepage .home-steps > li.is-reached::before { opacity: .6; }
body main.homepage .home-steps > li:nth-child(even)::before { transform: scaleY(-1); }
body main.homepage .home-bar { transform-origin: left; }
body main.homepage ::selection { background: #cce8f6; color: #153f57; }
body main.homepage a:focus-visible,
body main.homepage summary:focus-visible { outline: 2px solid #2180b8; outline-offset: 5px; }
@media (max-width: 1100px) {
  body main.homepage .home-steps > li { padding: 24px 20px; }
}
@media (max-width: 900px) {
  body main.homepage .home-points { gap: 16px; }
  body main.homepage .home-points > article { padding: 24px 20px; }
  .journey-track { display: none; }
  body main.homepage .home-steps { margin-top: 40px; }
}
@media (max-width: 640px) {
  body main.homepage .home-points > article,
  body main.homepage .home-steps > li { padding: 26px 24px; }
  body main.homepage .home-points { gap: 18px; }
  body main.homepage .home-steps { gap: 20px; }
}
@media (hover: none), (pointer: coarse) {
  body main.homepage .depth-card::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body main.homepage .depth-card,
  body main.homepage .depth-card::before,
  body main.homepage .depth-card::after,
  .journey-track > i { transition: none; }
}
@media (forced-colors: active) {
  body main.homepage .depth-card::before,
  body main.homepage .depth-card::after,
  .journey-track { display: none; }
  body main.homepage .home-points > article,
  body main.homepage .home-steps > li { outline: 1px solid CanvasText; }
}