@charset "UTF-8";
/* Shared first-screen frame and motion for the homepage and recruitment page. */
:is(.homepage, .careers-page) .hero-shell {
  --hero-height: clamp(636px, calc(41.16vw + 193px), 694px);
  --hero-top: 138px;
  --hero-side: 28px;
  --hero-bottom: 28px;
  position: relative;
  isolation: isolate;
  min-height: var(--hero-height);
  margin: 0;
  padding: var(--hero-top) var(--hero-side) var(--hero-bottom);
  overflow: clip;
  color: #eef8ff;
  background:
    radial-gradient(ellipse at 83% 42%, #0c426c70, transparent 45%),
    radial-gradient(ellipse at 32% -24%, #1c487a6e, transparent 65%),
    #060f1e;
}
.hero-shell > :is(.hero-inner, .careers-hero-grid) {
  position: relative;
  z-index: 1;
  min-height: calc(var(--hero-height) - var(--hero-top) - var(--hero-bottom));
}
:is(.homepage, .careers-page) .hero-shell::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(#9fd5ff75 .7px, transparent 1px) 0 0 / 47px 47px;
  mask-image: linear-gradient(90deg, transparent 35%, #0009);
  opacity: .32;
  pointer-events: none;
}
:is(.homepage, .careers-page) .hero-shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto -15% -420px;
  width: 130%;
  height: 470px;
  border: 0;
  border-top: 1px solid #a1d5ff8c;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 -12px 60px #379dff35, 0 -2px 13px #b7e1ff2b;
  pointer-events: none;
}
.hero-shell .hero-light {
  position: absolute;
  z-index: 0;
  width: 520px;
  height: 520px;
  top: 20px;
  left: calc(50% + 160px);
  border-radius: 50%;
  background: radial-gradient(circle, #329afa18, transparent 67%);
  pointer-events: none;
  animation: home-glow 9s ease-in-out infinite alternate;
}
.hero-shell .hero-spotlight {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(380px circle at var(--cursor-x, 70%) var(--cursor-y, 40%), #6fbaff15, transparent 80%);
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
}
.hero-shell[data-pointer-active="true"] .hero-spotlight { opacity: 1; }
.hero-shell :is(.hero-art, .careers-art) {
  transform: translate3d(var(--art-x, 0px), var(--art-y, 0px), 0);
  transition: transform .2s ease-out;
}
.hero-shell .hero-floating { animation: home-float 9s ease-in-out infinite; }
.hero-shell .hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 9px; color: #bdd8ed; background: #79bbef0a; border: 1px solid #9dcff82e; border-radius: 30px; font-size: 11px; letter-spacing: 1px; }
.hero-shell .hero-eyebrow > span { color: #a5deff; font-size: 17px; line-height: 1; }
.hero-shell .hero-action { position: relative; overflow: hidden; }
.hero-shell .hero-action::before { content: ""; position: absolute; inset: -50% auto -50% -85%; width: 55%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, #fff9, transparent); pointer-events: none; }
.hero-shell .hero-action:is(:hover, :focus-visible)::before { animation: button-sheen .7s ease-out; }
@keyframes home-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes home-glow { from { opacity: .6; } to { opacity: 1; } }
@keyframes button-sheen { to { left: 145%; } }
@media (max-width: 900px) {
  :is(.homepage, .careers-page) .hero-shell { --hero-height: 604px; }
}
@media (max-width: 760px) {
  :is(.homepage, .careers-page) .hero-shell { --hero-height: 570px; --hero-top: 126px; --hero-side: 24px; }
  .hero-shell .hero-eyebrow { font-size: 9px; letter-spacing: .3px; }
}
@media (max-width: 600px) {
  :is(.homepage, .careers-page) .hero-shell {
    /* Allocate room for the stacked copy and the homepage's 640:540 artwork. */
    --hero-height: calc(206px + clamp(338px, calc(24vw + 244px), 370px) + min(390px, calc(100vw - 48px)) * .84375);
    --hero-top: 151px;
  }
  .hero-shell .hero-light { left: 10%; top: 380px; width: 360px; height: 360px; }
  .hero-shell .hero-eyebrow { font-size: 10px; }
}
@media (max-width: 360px) {
  :is(.homepage, .careers-page) .hero-shell { --hero-height: calc(536px + (100vw - 40px) * .84375); --hero-side: 20px; }
}
:is(.homepage, .careers-page)[data-motion-paused="true"] .hero-shell :is(.hero-light, .hero-floating) { animation-play-state: paused; }
:is(.homepage, .careers-page)[data-motion="off"] .hero-shell :is(.hero-light, .hero-floating),
:is(.homepage, .careers-page)[data-motion="off"] .hero-shell .hero-action::before { animation: none; }
:is(.homepage, .careers-page)[data-motion="off"] .hero-shell :is(.hero-art, .careers-art, .hero-action) { transform: none; transition: none; }
:is(.homepage, .careers-page)[data-motion="off"] .hero-spotlight { opacity: 0; transition: none; }
.careers-page:is([data-pointer="touch"], [data-pointer="pen"]) .careers-art { transform: none; }
html:has(body.careers-page[data-motion="off"]) { scroll-behavior: auto; }
@media (hover: none), (pointer: coarse) {
  :is(.homepage, .careers-page):not([data-pointer="mouse"]) .hero-shell :is(.hero-art, .careers-art) { transform: none; }
  :is(.homepage, .careers-page):not([data-pointer="mouse"]) .hero-spotlight { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shell :is(.hero-light, .hero-floating), .hero-shell .hero-action::before { animation: none; }
  .hero-shell :is(.hero-art, .careers-art, .hero-action) { transform: none; transition: none; }
  .hero-shell .hero-spotlight { display: none; }
}
@media (forced-colors: active) {
  :is(.homepage, .careers-page) .hero-shell { background: Canvas; color: CanvasText; }
  :is(.homepage, .careers-page) .hero-shell::before,
  :is(.homepage, .careers-page) .hero-shell::after,
  .hero-shell :is(.hero-light, .hero-spotlight) { display: none; }
}