/* Archivo is the headline family. Display is the wide cut, for the
   big lines only. Heading is the normal width, for labels and
   section titles. Body stays Work Sans. */
:root{
  --bg:#F1F1F5;
  --ink:#171A33;
  --ink-fill:#16182A;
  --muted:#5D6074;
  --subtle:#8D90A2;
  --h1-rest:#6A6D80;
  --lilac:#C9BBFF;
  --lilac-ring:#B8A6FF;
  --indigo:#6B5BFF;
  --live:#43D6B4;
  --ease-move:cubic-bezier(.65,0,.2,1);
  --ease-pop:cubic-bezier(.3,1.45,.45,1);
  --font-display:'Archivo',sans-serif;
  --font-heading:'Archivo',sans-serif;
  --font-body:'Work Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
a:focus-visible{outline:2px solid var(--indigo);outline-offset:4px;border-radius:4px}
img{max-width:100%;display:block}

.logo{
  font-family:var(--font-heading);
  font-stretch:100%;
  font-weight:700;
  font-size:19px;
  letter-spacing:-.02em;
  text-decoration:none;
  color:var(--ink);
}

/* "Building now" dot. 7px, ring every 1.6s. */
.live{position:relative;width:7px;height:7px;border-radius:999px;background:var(--live);flex:none}
.live::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:999px;
  background:var(--live);
  animation:live 1.6s ease-out infinite;
}
@keyframes live{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.8);opacity:0}}

.sq{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:32px;
  padding:0 12px 0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  color:var(--ink);
  font-family:var(--font-body);
  font-stretch:100%;
  font-weight:500;
  font-size:13px;
  line-height:32px;
  letter-spacing:0;
}
.sq::before,
.bn::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(107,91,255,.35);
  pointer-events:none;
}
.bn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:32px;
  padding:0 12px 0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  font-size:13px;
  font-weight:500;
  line-height:32px;
  color:var(--ink);
}
.pills{position:absolute;z-index:4;display:flex;align-items:center;gap:8px}

.cta{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:44px;
  padding:0 20px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  box-shadow:0 10px 24px -10px rgba(23,26,51,.55),0 0 0 1px rgba(23,26,51,.06);
}

/* Pause the loop when the card is off screen, in a background tab,
   or in the middle of growing and shrinking. Resizing the scene
   while the blurs and masks are moving is what makes the page hitch. */
.snap.is-off .k,
.snap.is-off .burst i,
.snap.is-off .sweep,
.snap.is-off .shim,
.snap.is-off .live::after,
.tab-hidden .k,
.tab-hidden .burst i,
.tab-hidden .sweep,
.tab-hidden .shim,
.tab-hidden .live::after,
html.is-opening .snap .k,
html.is-opening .snap .burst i,
html.is-opening .snap .sweep,
html.is-opening .snap .shim,
html.is-returning .snap .k,
html.is-returning .snap .burst i,
html.is-returning .snap .sweep,
html.is-returning .snap .shim{animation-play-state:paused}