:root {
	--navy: #0E1A2B;
	--white: #ffffff;
	--coral: #FF6A3D;
	--lightGrey: #F9FAFD;
	--grey: #dfe1e6;
	--medGrey: #8C8C8C;
	--darkGrey: #525457;
	--lightGreen: #F4FBF2;
	--green: #77BC60;
	--lightBlue: #3691EC;
	--lilac: #708DDC;
	--red: #E84A5F;
}

body {
	margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: var(--navy);
}

.green {background: var(--green)}
.coral {background: var(--coral);}
.white {background: var(--white);}
.navy {background: var(--navy);}
.medGrey {background: var(--midGrey);}
.darkGrey {background: var(--darkGrey);}
.medGreyCopy {color: var(--medGrey);}
.darkGreyCopy {color: var(--darkGrey);}
.coralCopy {color: var(--coral);}
.whiteCopy {color: var(--white);}
.navyColor {color: var(--navy);}
.greenCopy {color: var(--green)}

h1 {
	font-weight: 500;
}

.content {
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;
	padding: 32px;
}

.button {
	background: var(--white);
	color: var(--navy);
	padding: 10px 16px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 14px;
	transition: 0.2s;
	border: 2px solid var(--white);
}

.button:hover {
	background: var(--navy);
	color: var(--white);
}


	#line-trans .appLine,
	#line-trans-dots .appLine {
		stroke: #3E4855;
	}

	#line-white .appLine,
	#line-white-dots .appLine {
		stroke: #ffffff;
		opacity: 0;
	}

	.dots .appLine {
	    stroke-width: 10px;
	    stroke-linecap: round;
	    animation: offset 60s linear infinite;
	}

	.dots .line-edge {stroke-dasharray: 0 240;}
	.dots .line-slack {stroke-dasharray: 0 200;}
	.dots .line-teams {stroke-dasharray: 0 370}
	.dots .line-drive {stroke-dasharray: 0 350;}
	.dots .line-gemini {stroke-dasharray: 0 450;}
	.dots .line-chatgpt {stroke-dasharray: 0 450;}
	.dots .line-copilot {stroke-dasharray: 0 400;}
	.dots .line-chrome {stroke-dasharray: 0 290;}
	.dots .line-gchat {stroke-dasharray: 0 490;}

	@keyframes offset {
		from {
			stroke-dashoffset: 0%;
		}
		to {
			stroke-dashoffset: 400%
		}
	}

	.appLine.active {
		opacity: 1 !important;
	}

	#dataSources .active rect {
		stroke: var(--coral);
		stroke-width: 4px;
	}

	#cai-logo {
	    width: 60px;
	    background: white;
	    height: 60px;
	    display: block;
	    border-radius: 30px;
	    overflow: hidden;
        margin-top: -6px;
		box-shadow: 0 4px 16px rgba(0,0,0,0.3);
		animation: pulse 3s 1.2s linear infinite;
	}

	@keyframes pulse {
		0%,100% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.15);
		}
	}

	#logoContainer {
		transform-origin: center center;
		animation: logoStart 1.2s both;
	}

	@keyframes logoStart {
		0%{
		transform: scale(0);
		}
		50%,70% {
			transform: scale(2.5);
		}
		100% {
			transform: scale(1.0);
		}
	}

	#caddy {
		background: url('img/background.jpg');
		background-size: cover;
		border-radius: 6px;
	    margin-top: -32px;
	    transform-origin: top;
		animation: caddy 0.6s both;
	}

	@keyframes caddy {
		from {
			height: 0;
		}
		to {
			height: 100%;
		}
	}

	#tieContainer {
		animation: tieContainer 0.4s 0.8s both;
	}

	@keyframes tieContainer {
		0% {
			transform: scale(0);
		}
		100% {
			transform: scale(1.0) translateY(0);
		}
	}

	#tie {
		background: var(--navy);
		border: 2px solid var(--white);
		color: var(--white);
		border-radius: 6px;
		text-align: center;
		padding: 12px 22px;
		box-shadow: 0 4px 16px rgba(0,0,0,0.3);
		font-size: 0.9em;
		margin: 64px 0 16px 0;
		position: relative;
		  animation: pulseBorder 3s ease-in-out infinite;
	}

	#tie::before {
	    content: " ";
	    height: 36px;
	    width: 2px;
	    transform-origin: bottom;
	    background: var(--white);
	    position: absolute;
	    top: -36px;
	    left: calc(50% - 2px);
	    animation: tieBefore 0.6s 0.8s both;
	}

	@keyframes tieBefore {
		from{
			transform: scaleY(0);
		}
		to {
			transform: scaleY(1);
		}
	}

@keyframes pulseBorder {
  0%, 100% {
    box-shadow: 0 0 0px rgba(255,255,255,0);
  }
  50% {
    box-shadow: 0 0 32px rgba(255,255,255,0.3);
  }
}

	.caddyItem {
		padding: 8px;
		border-radius: 6px;
		margin: 8px 0;
		box-shadow: 0 4px 16px rgba(0,0,0,0.3);
		font-size: 0.9em;
		display: flex;
		position: relative;
		z-index: 1;
		box-sizing: border-box;
	}

	.caddyItem span {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.caddyItem img {
		max-width: 36px;
		min-width: 36px;
	}

	.animate #detection {
		background: var(--red);
		color: var(--white);
		animation: detection 0.4s 1s both;
		transform-origin: top;
		position: relative;
		z-index: 1;
	}

	.animate #detection * {
		animation: fadeIn 0.2s 1.4s both;
	}


	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes detection {
		from {
			transform: scaleY(0);
		}
		to {
			transform: scaleY(1);
		}
	}

	#intervention {
		background: var(--lilac);
		color: var(--white);
	}

	.animate #interventionContainer {
		animation: notif 0.4s 3s both;
		position: relative;
		z-index: 2;
	}

	@keyframes notif{
		0% {
			opacity: 0;
			transform: translateY(-100%);
		}
		20% {
			opacity: 1;
			transform: translateY(-100%);
		}
		100% {
			transform: translateY(0);
		}
	}

	#caddyContainer.swipe #caddyItems {
		animation: swipe 0.2s cubic-bezier(0.34, 1.76, 0.54, 1) both;
	}

	@keyframes swipe {
		from {
			transform: translateY(0);
			opacity: 1;
		}
		to {
			transform: translateY(100%);
			opacity: 0;
		}
	}

	#resolved {
		background: var(--green);
		color: var(--white);
	}

	.animate #resolvedContainer{
		animation: notif 0.4s 4.5s both;
		position: relative;
		z-index: 3;
	}

	.caddyArrow {
		width: 16px;
		margin: 8px;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	#dataSources > g {
		transition: 0.2s;
		transform-box: fill-box;
		transform-origin: center;
	}

	#dataSources > g:not(.active) {
		cursor: pointer;
		opacity: 0.3;
	}

	.load #dataSources > g:not(.active){
		animation: fadeDown 0.6s 1.5s both;
	}

	@keyframes fadeDown {
		from {
			opacity: 1;
		}
		to {
			opacity: 0.3;
		}
	}

	#dataSources > g:not(.active):hover {
		opacity: 1;
		transform: scale(1.12);
	}
	#dataSources > g.active {
		transform: scale(1.12);
	}

	#line-white .active {
		animation: draw 2s linear both;
	  stroke-dasharray: 500;
	}

	@keyframes draw {
		from {
			    stroke-dashoffset: -100%;
		}
		to {
			    stroke-dashoffset: 0;
		}
	}

	#caddyItemContainer {
		height: 160px;
	}

	#explainer-main {
		width: 460px;
	}

	#svgContainer {
	    height: 200px;
	    overflow: hidden;
	}

	.app {
		animation: growIn 0.4s cubic-bezier(0.34, 1.76, 0.54, 1) both;
	    transform-box: fill-box;
	    transform-origin: center;
	}

	@keyframes growIn {
		from {
			transform: scale(0);
		}
		to {
			transform: scale(1.0);
		}
	}

	#dataSources > g:nth-child(1) .app {animation-delay: 0.05s;}
	#dataSources > g:nth-child(2) .app {animation-delay: 0.1s;}
	#dataSources > g:nth-child(3) .app {animation-delay: 0.15s;}
	#dataSources > g:nth-child(4) .app {animation-delay: 0.2s;}
	#dataSources > g:nth-child(5) .app {animation-delay: 0.25s;}
	#dataSources > g:nth-child(6) .app {animation-delay: 0.3s;}
	#dataSources > g:nth-child(7) .app {animation-delay: 0.35s;}
	#dataSources > g:nth-child(8) .app {animation-delay: 0.4s;}
	#dataSources > g:nth-child(9) .app {animation-delay: 0.45s;}

	#line-trans {
		animation: draw 2s both;
	  stroke-dasharray: 500;
	  stroke-dashoffset: 500;
	}
	#caddyContainer {
		height: 286px;
	}

	.eyebrow {
	    font-size: 0.72em;
		letter-spacing: 0.1em;
		opacity: 0.7;
		text-transform: uppercase;
	}


@media only screen and (max-width:1000px) {
	.flexBreak {
		flex-direction: column;
	}

		.mSwap {
		flex-direction: column-reverse;
	}
}