:root 		{
				--color-light: #F8F7F1;
				--color-red: #FF4B2C;
				--color-dark: #09302E;
				--font-headers: "Bricolage Grotesque", Helvetica, Arial, sans-serif;
				--font-copy: "Inter", Helvetica, Arial, sans-serif;
				}

html * 		{
				margin: 0;
				padding: 0;
				}

html			{scroll-behavior: smooth;}

body 			{
				margin: 0;
				padding: 0;
				font-size: 0;
				font-weight: 400;
				font-family: var(--font-copy);
				-webkit-font-smoothing: antialiased;
				color: var(--color-dark);
				background: var(--color-light);
				}

*:focus 		{outline: none;}

a 				{
				color: var(--font-copy);
				transition: all .15s;
				}

				.brico
				{
				font-family: var(--font-headers);
				font-optical-sizing: auto;
				font-style: normal;
				}







.wrap  		{
				max-width: 1590px;
				margin: auto;
				padding: 0 20px;
				}

.top 			{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20px 0;
				}

				.logo
				{
				text-decoration: none;
				display: flex;
				align-items: center;
				gap: 5px;
				position: relative;
				}

				.logo div
				{
				width: 35px;
				height: 35px;
				display: flex;
				flex-shrink: 0;
				align-items: center;
				justify-content: center;
				background: var(--color-dark);
				border-radius: 100px;				
				}

				.logo svg
				{
				height: 13px;
				color: var(--color-red);
				padding-bottom: 2px;
				}

				.logo strong
				{
				display: flex;
				flex-wrap: wrap;
				gap: 5px;
				font-size: 22px;
				line-height: 1;
				font-weight: 650;
				font-variation-settings: "wdth" 85;
				}

				.logo span
				{
				font-weight: 400;
				opacity: .5;
				}

				.footer .logo strong
				{
				display: inline;
				line-height: 1.3;
				}

				.footer .logo span
				{
				display: block;
				font-size: 18px;
				}

				.footer .logo svg
				{
				height: 15px;
				position: absolute;
				top: 6px;
				left: -25px;
				}







.right
{
display: flex;
gap: 30px;
align-items: center;
}

				.menu
				{
				display: flex;
				gap: 20px;
				}

					.menu a
					{
					white-space: nowrap;
					color: var(--color-dark);
					font-size: 16px;
					font-weight: 500;
					text-decoration: none;
					text-decoration-color: #11202950;
					}

					.menu a:hover,
					.menu a.current
					{
					text-decoration: underline;
					text-decoration-thickness: 3px;
					text-underline-offset: 2px;
					text-decoration-color: #11202950;
					}

					.menu a.breaker
					{opacity: .2;}

				.auth
				{
				display: flex;
				flex: 1;
				gap: 10px;
				justify-content: flex-end;				
				}

					.auth a
					{
					display: flex;
					padding: 9px 15px;
					white-space: nowrap;
					border-radius: 50px;
					text-decoration: none;
					color: #000000ff;
					background: #00000020;
					font-size: 14px;
					line-height: 1;
					cursor: pointer;
					}

						.auth a.auth-try
						{
						color: var(--color-light);
						background: var(--color-dark);
						}

						.auth a.auth-try:hover
						{
						color: var(--color-light);
						background: var(--color-dark);
						}






.error 		{
				color: var(--color-light);
				background: var(--color-dark);
				padding: 100px;
				text-align: center;
				margin: 20px 0;
				border-radius: 7px;
				}

				.error h2
				{
				font-size: 50px;
				font-weight: 450;
				margin-bottom: 10px;
				}

				.error p
				{
				font-size: 30px;
				font-weight: 300;
				line-height: 2;
				}







.hero 		{
				color: var(--color-light);
				background: var(--color-red);
				padding: 45px 50px 49px;
				border-top-left-radius: 7px;
				border-top-right-radius: 7px;
				}	

.hero h1,
.hero h2		{
				font-size: 50px;
				font-weight: 450;
				}

				.hero h2
				{
				font-size: 23px;
				font-weight: 350;
				opacity: .9;
				}

.hero-more 	{
				padding: 30px 50px;
				background: #FF4B2C30;
				border-bottom-left-radius: 7px;
				border-bottom-right-radius: 7px;
				}

				.hero-more h3
				{
				font-size: 20px;
				font-weight: 350;
				color: var(--color-red);
				}







.cta,
.center-button
		 		{
				padding: 35px 50px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				}

				.center-button
				{justify-content: center;}

				.button
				{
				display: inline-flex;
				align-items: center;
				gap: 20px;
				font-size: 21px;
				font-weight: 500;
				white-space: nowrap;
				color: var(--color-light);
				background: var(--color-dark);
				text-decoration: none;
				padding: 20px 25px 20px 30px;
				border-radius: 100px;
				outline: 8px solid #09302E20;
				}

					.bottom .button
					{margin: 30px 0 20px;}

				.button svg
				{
				transform: rotate(90deg);
				width: 15px;
				color: var(--color-red);
				}

				.cta h3
				{
				display: flex;
				align-items: center;
				gap: 10px;
				font-size: 21px;
				font-weight: 500;
				}

				.cta h3 svg
				{
				height: 15px;
				transform: rotate(180deg);
				color: var(--color-red);
				}







.testimonials
				{
				display:	flex;
				gap: 10px;
				background: #09302E10;
				padding: 10px;
				border-radius: 7px;
				margin: 0 auto;
				width: fit-content;				
				}

				.quip
				{
				width: calc((100% - 10px) / 3);
				padding: 25px;
				background: #fff;
				border-radius: 4px;
				position: relative;
				box-sizing: border-box;
				}

					.mhalf
					{width: 70%;}

					.mhalf .quip
					{width: calc((100% - 10px) / 2);}

				.quip h2
				{
				font-size: 21px;
				font-weight: 550;
				margin-bottom: 7px;
				color: var(--color-red);
				}

				.quip p
				{
				font-size: 15px;
				font-weight: 450;
				line-height: 1.35;
				opacity: .7;
				}

				.quip div
				{
				display: flex;
				gap: 5px;
				align-items: center;
				margin-top: 15px;
				}

				.quip img
				{
				width: 40px;
				border-radius: 3px;
				}

				.quip span
				{font-size: 14px;}

				.quip a
				{
				opacity: .5;
				text-decoration: none;
				}







.logos 		{
				text-align: center;
				position: relative;
				margin: 50px auto;
				overflow: hidden;
				opacity: .35;
				transition: all .5s;
				}

				.logos:hover
				{opacity: 1;}

				.logos-in
				{
				display: flex;
				align-items: center;
				width: max-content;
				gap: 60px;
				padding: 15px 30px;
				animation: logos-scroll 170s linear infinite;
				will-change: transform;
				}

				.logos-in > div
				{
				flex: 0 0 auto;
				padding: 0;
				box-sizing: border-box;
				}

				.logos-in img,
				.logos-in svg
				{display: block;}

				@keyframes logos-scroll
				{
				from { transform: translateX(0); }
				to { transform: translateX(-50%); }
				}

				.logos:before,
				.logos:after
				{
				content: "";
				position: absolute;
				top: 0;
				width: 200px;
				height: 100%;
				pointer-events: none;
				z-index: 10;
				}

				.logos:before
				{
				left: 0;
				background: linear-gradient(to right, #F8F7F1, transparent);
				}

				.logos:after
				{
				right: 0;
				background: linear-gradient(to left, #F8F7F1, transparent);
				}







.reviews 	{
				padding-bottom: 55px;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 50px;
				}

				.reviews div
				{
				width: 30%;
				text-align: center;
				}	

				.reviews p
				{
				font-size: 21px;
				font-weight: 500;
				margin-bottom: 20px;
				}			

				.reviews a
				{
				font-size: 18px;
				color: var(--color-red);
				text-decoration: none;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 5px;
				}







.screenshot-wrap
				{
				max-width: 1200px;
				margin: auto;
				background: #09302E10;
				padding: 10px;
				border-radius: 7px;
				}

				.screenshot
				{
				display: grid;
				background: #fff;
				overflow: hidden;
				border-radius: 4px;
				}

				.screenshot img
				{
				grid-area: 1 / 1;
				width: 100%;
				opacity: 0;
				visibility: hidden;
				transition: opacity 1s ease;
				pointer-events: none;
				}

				.screenshot img.visible
				{
				opacity: 1;
				visibility: visible;
				pointer-events: auto;
				}

				.dots
				{
				display: flex;
				gap: 10px;
				justify-content: center;
				margin: 35px 0;
				}

				.dots span
				{
				width: 10px;
				height: 10px;
				background: var(--color-dark);
				border-radius: 20px;
				opacity: .2;
				cursor: pointer;
				}

				.dots span:hover
				{opacity: .35;}

				.dots span.current
				{opacity: .8;}







.copy 		{
				max-width: 500px;
				margin: auto;
				text-align: center;
				}

				.copy h2
				{
				font-size: 23px;
				font-weight: 600;
				margin-bottom: 10px;
				}

				.copy p
				{
				font-size: 16px;
				font-weight: 400;
				opacity: .7;
				}







.features	{
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
				margin: 100px 50px 10px;
				justify-content: center;
				}

				.feature
				{
				width: calc((100% - 40px) / 5);
				text-align: center;
				background: #09302E10;
				padding: 20px 30px 25px;
				border-radius: 7px;
				box-sizing: border-box;
				}

				.feature svg
				{
				width: 24px;
				margin-bottom: 10px;
				opacity: .5;
				}

				.feature h2
				{
				color: var(--color-red);
				font-size: 18px;
				font-weight: 450;
				margin-bottom: 5px;
				}

				.feature p
				{
				font-size: 15px;
				font-weight: 400;
				opacity: .6;
				}







.tags-wrap	{
				margin: 100px auto;
				display: flex;
				flex-direction: column;
				gap: 30px;
				}

				.tags
				{
				display: flex;
				flex-wrap: wrap;
				gap: 5px;
				}

				.tags p,
				.tags span
				{
				font-size: 15px;
				padding: 7px 12px;
				border-radius: 5px;
				background: #09302E10;
				}

				.tags p
				{background: #09302E30;}





/* these are on the homepage, right below features

.standouts	{
				display: flex;
				gap: 10px;
				margin: 0 50px 100px;
				}

				.standout
				{
				width: calc((100% - 30px) / 3);
				padding: 35px 39px 37px;
				background: #09302e20;
				border-radius: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				}

				.standout h2
				{
				font-size: 60px;
				font-weight: 500;
				line-height: 1;
				color: #09302e70;
				}

				.standout h3
				{
				font-size: 30px;
				font-weight: 400;
				color: #09302e50;
				}
*/








.pros-wrap 	{
				margin: 100px 0;
				padding: 60px 0;
				background: #fff;
				box-shadow: 0 -10px 0 0 #ff4b2c10, 0 10px 0 0 #ff4b2c10;
				}

.pros 		{
				max-width: 1700px;
				margin: auto;
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
				text-align: center;
				}

				.pro
				{
				width: calc((100% - 30px) / 3);
				padding: 35px;
				box-sizing: border-box;
				color: var(--color-dark);
				}

				.pro h2
				{
				font-size: 18px;
				font-weight: 500;
				margin-bottom: 5px;
				color: var(--color-red);
				}

				.pro p
				{
				font-size: 15px;
				font-weight: 350;
				opacity: .7;
				}

				.pro p strong
				{font-weight: 550;}







.paragraph	{
				max-width: 800px;
				margin: 100px auto;
				padding: 0 20px;
				text-align: center;
				}

				.paragraph h2
				{
				font-size: 39px;
				font-weight: 500;
				margin-bottom: 15px;
				}

				.paragraph p
				{
				font-size: 18px;
				font-weight: 390;
				line-height: 1.5;
				margin-bottom: 10px;
				opacity: .7;
				}

				.paragraph p + h2
				{margin-top: 50px;}







.content		{
				max-width: 800px;
				margin: 50px auto;
				}

				.content h2
				{
				font-size: 39px;
				font-weight: 500;
				margin-bottom: 15px;
				}

				.content p,
				.content li
				{
				font-size: 18px;
				font-weight: 390;
				line-height: 1.5;
				color: #09302E99;
				}

				.content p + p,
				.content li + li
				{margin-top: 10px;}

				.content li
				{line-height: 1.35;}

				.content p + h2,
				.content ul + h2
				{margin-top: 50px;}

				.content p + ul
				{margin-top: 15px;}

				.content strong
				{font-weight: 550;}

				.content ul,
				.content ul ul
				{margin-left: 20px;}

				.content li + ul
				{margin-top: 10px;}

				.content li ul
				{
				margin-top: 10px;
				margin-bottom: 30px;
				}







.faq 			{
				max-width: 900px;
				width: calc(100% - 60px);
				margin: 100px auto;
				display: flex;
				flex-direction: column;
				gap: 3px;
				background: #09302E10;
				padding: 10px;
				border-radius: 7px;
				}

				.faq div
				{
				background: #fff;
				padding: 20px;
				border-radius: 3px;
				position: relative;
				}

				.faq div:first-child
				{
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
				}

				.faq div:last-child
				{
				border-bottom-left-radius: 4px;
				border-bottom-right-radius: 4px;
				}

				.faq h2
				{
				font-size: 16px;
				font-weight: 550;
				opacity: .9;
				padding-right: 100px;
				}

				.faq-click h2
				{cursor: pointer;}

				.faq p
				{
				font-size: 14px;
				opacity: .7;
				display: none;
				margin-top: 5px;
				display: block;
				}

				.faq-click p
				{display: none;}

				.faq a
				{
				position: absolute;
				top: 0;
				right: 17px;
				font-size: 43px;
				font-weight: 200;
				color: var(--color-red);
				opacity: .3;
				display: none;
				}

				.faq-click a
				{display: block;}

				.faq h2:hover a
				{opacity: 1;}







.pricing		{
				max-width: 900px;
				margin: 100px auto;
				padding: 10px;
				background: #09302E10;
				border-radius: 7px;
				}

				.price
				{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 50px;
				}

				.pricing h2
				{
				font-size: 70px;
				font-weight: 500;
				line-height: 1;
				display: flex;
				align-items: center;
				gap: 3px;
				position: relative;
				}

				.pricing h2 span
				{
				font-size: 40px;
				font-weight: 400;
				opacity: .7;
				}

				.pricing h2 strong
				{
				font-size: 20px;	
				text-transform: uppercase;
				opacity: .5;
				}

				.pricing h2 b
				{
				position: absolute;
				bottom: -15px;
				right: 58px;
				font-size: 18px;
				font-weight: 550;
				color: var(--color-red);
				}

				.benefits
				{
				background: #fff;
				display: flex;
				flex-wrap: wrap;
				gap: 0 30px;
				padding: 15px 30px;
				border-bottom-left-radius: 4px;
				border-bottom-right-radius: 4px;
				}

				.benefit-row
				{width: calc((100% - 30px) / 2);}

				.benefits p
				{
				font-size: 15px;
				font-weight: 390;
				color: #09302Ecc;
				padding: 10px 0;
				display: flex;
				align-items: center;
				gap: 5px;
				border-bottom: 1px solid #09302E20;
				}

				.benefits p strong
				{font-weight: 550;}

				.benefit-row p:last-child
				{border: none;}

				.benefits p span
				{
				font-size: 8px;
				color: var(--color-red);
				}







.bottom 		{
				background: var(--color-red);
				color: var(--color-light);
				margin: 100px 20px;
				padding: 100px 50px;
				text-align: center;
				border-radius: 10px;
				}

				.bottom h2
				{
				font-size: 55px;
				font-weight: 450;
				}

				.bottom h3
				{
				font-size: 25px;
				font-weight: 350;
				opacity: .9;
				}

				.bottom p
				{
				font-size: 16px;
				font-weight: 350;
				}







.footer 		{padding: 0 20px 100px;}

				.footer .wrap
				{
				display: flex;
				gap: 50px;
				}

				.footer-left
				{
				border-right: 1px solid #09302E30;
				padding-right: 50px;
				}

				.footer-left-wrap
				{padding-left: 35px;}

				.footer .auth
				{
				justify-content: start;
				padding: 25px 0;
				}

				.disclaimer
				{width: 270px;}

				.disclaimer h3
				{
				font-size: 15px;
				font-weight: 500;
				margin-bottom: 3px;
				opacity: .8;
				}

				.disclaimer p
				{
				font-size: 13px;
				line-height: 1.35;
				opacity: .5;
				margin-bottom: 4px;
				}

					.disclaimer p sub
					{line-height: .1}

				.copyright
				{
				max-width: 1590px;
				font-size: 13px;
				margin: 30px auto;
				padding: 0 20px;
				}

				.footer-right
				{
				display: flex;
				flex-wrap: wrap;
				gap: 50px;
				}

				.footer-right h2
				{
				font-size: 14px;
				font-weight: 500;
				text-transform: uppercase;
				margin-bottom: 7px;
				}

				.footer-right a
				{
				display: block;
				font-size: 14px;
				text-decoration: none;
				opacity: .6;
				margin-bottom: 5px;
				}

				.footer-right a:hover
				{opacity: 1;}







@media only screen 
	and (max-width: 1300px) {

		.top 
		{
		flex-direction: column;
		gap: 10px;
		}

}








@media only screen 
	and (max-width: 900px) {

		.right
		{
		flex-direction: column;
		gap: 20px;
		}

		.hero
		{
		padding: 30px;
		text-align: center;
		}

		.hero h1
		{
		font-size: 35px;
		line-height: 1;
		margin-bottom: 10px;
		}

		.hero-more
		{
		padding: 20px 30px;
		text-align: center;
		}

		.cta
		{
		flex-direction: column;
		text-align: center;
		gap: 30px;
		}

		.cta h3 svg
		{display: none;}

		.testimonials
		{flex-direction: column;}

		.quip
		{width: 100%;}

		.reviews
		{
		flex-direction: column;
		gap: 30px;
		padding-bottom: 35px;
		}

		.reviews div
		{width: 100%;}

		.reviews p
		{margin-bottom: 5px;}

		.features
		{margin: 50px 0;}

		.feature
		{width: calc((100% - 10px) / 2);}

		.paragraph
		{margin: 50px auto;}

		.paragraph h2
		{
		font-size: 30px;
		margin-bottom: 10px;
		}

		.paragraph p
		{font-size: 16px;}

		.faq
		{margin: 50px auto;}

		.bottom
		{
		margin: 50px 20px;
		padding: 50px;
		}

		.bottom h2
		{font-size: 45px;}

		.bottom h3
		{font-size: 20px;}

		.footer .wrap
		{flex-direction: column;}

		.footer-left
		{
		border: none;
		text-align: center;
		padding: 0;
		}

		.footer .logo,
		.footer .auth
		{justify-content: center;}

		.footer .logo svg
		{display: none;}

		.disclaimer
		{margin: auto;}

		.pricing
		{margin: 50px auto;}

		.price
		{
		flex-direction: column;
		gap: 10px;
		padding: 20px 0 40px;
		}

		.benefits
		{flex-direction: column;}

		.benefit-row
		{width: 100%;}

		.pros-wrap
		{
		margin: 50px 0;
		padding: 40px 0;
		}

		.pro
		{
		width: calc((100% - 20px) / 2);
		padding: 25px;
		}

		.tags-wrap
		{margin: 50px auto;}

		.content h2
		{
		font-size: 30px;
		margin-bottom: 5px;
		}

		.content p, .content li
		{font-size: 16px;}

		.content p + h2, .content ul + h2
		{margin-top: 30px;}

}