@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,400i&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500&display=swap');



/*
=========================
   ROOT VARIABLES
=========================
*/

:root{
  --bg: #070A12;
  --panel: #0B1020;
  --glass: rgba(255,255,255,0.08);
  --dark: rgba(40,70,100,0.35);
  --border: rgba(255,255,255,0.12);

  --teal: #2DE2E6;
  --blue: #4C7DFF;
  --radius: 2rem;
  --shadow: 0 1.5rem 4rem rgba(0,0,0,0.6);


	--Primary: rgb(30,100,140);  /* #1E648C */
	--PrimaryDark: rgb(40,80,110);  /* #28506E */
	--PrimaryLight: rgb(23,121,186);   /* #1779BA */
	--PrimaryHeader: rgb(68,88,115); /*  #445873 */
	--PrimaryLightBgnd: rgb(239,249,255);   /* #EFF9FF */
	
	--Secondary: rgb(60,138,160);  /* #3C8AA0 */
	--SecondaryLight: rgb(75,160,190);  /* #4BA0BE */
	--SecondaryLightBgnd: rgb(225,248,250);  /* #E1F8FA */

	--Pale: rgb(250,250,250);  /* #FAFAFA */
	--White: #FFFFFF;
	--Default: rgb(51,51,51);  /* #333 */

	--Grey-100: rgb(245,245,245);
	--Grey-200: rgb(230,230,230);
	--Grey-300: rgb(212,212,212);
	--Grey-400: rgb(192,192,192);
	--Grey-500: rgb(162,162,162);
	--Grey-600: rgb(132,132,132);
	--Grey-700: rgb(102,102,102);
	--Grey-800: rgb(76,76,76);
	--Grey-900: rgb(68,68,68);
	
	--LighterGrey: rgb(242,242,242);  /* #ECF4F2 */
	--LightGrey: rgb(230,230,230);  /* #E6E6E6 */
	--MediumGrey: rgb(119,119,119);  /* #777 */
	--MediumLightGrey: rgb(138,138,138);  /* #8a8a8a */
	--MediumLighterGrey: rgb(160,160,160);  /* #A0A0A0 */
	--MediumLighterGreyPlus: rgb(190,190,190);  /* #BEBEBE */
	
	--Grey: rgb(102,102,102);  /* #666 */
	--DarkGrey: rgb(76,76,76);  /* #4C4C4C */
	--DarkerGrey: rgb(68,68,68);   /* #444 */
	--Light: rgb(217,217,217);  /* #D9D9D9 */

	--Active: rgb(228,240,248);
	--ActiveMedium: rgb(220,240,240);
	--ActiveDark: rgb(190,220,220);
	
	--Info: rgb(7,44,157);
	
	--adminPrimary: rgb(85,18,148);  /* #611AA4 */
	--adminPrimaryDark: rgb(60,25,100);  /* #3C1964 */

	--Success: rgb(30,170,160);
	--SuccessLight: rgb(175,227,227);
	--SuccessDark: rgb(39,129,119);	
	
	--Confirm: rgb(25,145,75);  /* #19914B	 */
	--ConfirmDark: rgb(0,120,50);  /* #007832 */
	--ConfirmLight: rgb(75,175,95);  /* #4BAF5F	 */
	--ConfirmLightest: rgb(245,255,235);  /* #F5FFEB */
	--ConfirmUltraLight: rgb(249,255,243);  /* #F9FFF3 */
	
	--Warning: rgb(255, 186, 42);   /* #E6AE3A */
	--WarningLightBgnd: rgb(255,248,232);  /* #FFF8E8 */
	--WarningDark: rgb(143,110,67);  /* #8F6E43 */
	
	--Error:  rgb(140,20,0);  /* #8C1400 */
	--ErrorBackground: rgb(255,250,250);  /* #FFFAFA */
	--Alert: rgb(180,70,50);   /* #B44632 */
	
	--General: rgb(40,145,150);  /* #289196 */
	--GeneralMedium: rgb(70,165,170);  /* #46A5AA */
	--GeneralLight: rgb(90,195,200);  /* #5AC3C8 */
	--GeneralLighter: rgb(215,245,250);  /* #D7F5FA */
	--GeneralLightest: rgb(230,250,255);  /* #E6FAFF */
	--GeneralDark: rgb(10,115,120);  /* #0A7378 */
		
	--alpha: rgba(250,250,250,0.3);
	--semiOpaque: rgba(255,255,255,0.88);
	
	--Code: rgb(20,60,110);  /* #143C6E */
	
	--SurveyLogoColour: rgb(4,99,128);  /* #046380 */
	
	--Quote: rgb(249,247,252);  /* #F9F7FC */
	
	--Verbatim: rgb(120,20,160);  /* #7814A0 */
	
	--LoginBackground: rgb(10,70,106);  /* #0A466A */
		
	--TestCardHeader: rgb(90,70,181);  /* #5A46B5 */
	--TestCardBody: rgb(234,245,251);  /* #EAF5FB */
	--TestCard: rgb(135,110,191);  /* #876EBF */
	--TestCardLight: rgb(230,225,245);  /* #E6E1F5 */
	
	--InsightCardBody: rgb(240,255,246);  /* #F0FFF6 */
	
	--Note: rgb(225,235,189);  /* #E1EBBD */
	--NoteMedium: rgb(204,209,182);  /* #CCD1B6 */
	--NoteLight: rgb(240,245,222);  /* #F0F5DE */
	
	--CanvasGreen: rgb(61,167,142);  /* #3DA78E */
	--CanvasOrange: rgb(247,146,38);  /* #F79226 */
	--CanvasRed: rgb(230,30,37);  /* #E61E25 */
	
	--base-measurement: 16px;
	
	--fontsize-half: calc(1rem * 0.5);
	--fontsize-three-quarter: calc(1rem * 0.75);
	--fontsize-1: calc(1rem * 1);
	--fontsize-2: calc(1rem * 1.25);
	--fontsize-3: calc(1rem * 1.5);
	--fontsize-4: calc(1rem * 1.75);
	--fontsize-5: calc(1rem * 2);
	--fontsize-6: calc(1rem * 2.25);
	--fontsize-7: calc(1rem * 2.5);
	--fontsize-8: calc(1rem * 2.75);
	--fontsize-9: calc(1rem * 3);
	--fontsize-10: calc(1rem * 3.25);
	--fontsize-11: calc(1rem * 3.75);
	--fontsize-12: calc(1rem * 4);
	
	--fontsize-1-and-eight: calc(1rem * 1.125);
	--fontsize-1-and-12: calc(1rem * 1.0833);
	
	--fontsize-1-less-eight: calc(1rem * 0.875);
	--fontsize-1-less-sixth: calc(1rem * 0.825);
	

	--fontsize-065: calc(1rem * 0.65);
	--fontsize-07: calc(1rem * 0.7);

	--fontsize-08: calc(1rem * 0.8);

	--fontsize-085: calc(1rem * 0.85);	
	--fontsize-09: calc(1rem * 0.9);
	--fontsize-0925: calc(1rem * 0.925);
	--fontsize-095: calc(1rem * 0.95);

	--font-weight-300: 300;  /* Light */
	--font-weight-400: 400;  /* Normal */
	--font-weight-500: 500;  /* Medium */
	--font-weight-600: 600;  /* Semi-bold */
	--font-weight-700: 700;  /* Bold */

	--measurement-quarter: calc(1rem * 0.25);
	--measurement-half: calc(1rem * 0.5);
	--measurement-three-quarter: calc(1rem * 0.75);
	--measurement-1-and-eight: calc(1rem * 1.125);
	
	--measurement-015: calc(1rem * 0.15);
	--measurement-02: calc(1rem * 0.2);
	--measurement-03: calc(1rem * 0.3);
	--measurement-035: calc(1rem * 0.35);
	--measurement-04: calc(1rem * 0.4);
	--measurement-045: calc(1rem * 0.45);
	--measurement-065: calc(1rem * 0.65);
	--measurement-08: calc(1rem * 0.8);
	--measurement-085: calc(1rem * 0.85);
	--measurement-0875: calc(1rem * 0.875);	

	--measurement-1077: calc(1rem * 1.077);
	--measurement-120: calc(1rem * 1.2);
	--measurement-135: calc(1rem * 1.35);
	--measurement-1375: calc(1rem * 1.375);
	--measurement-145: calc(1rem * 1.45);
	--measurement-155: calc(1rem * 1.55);
	--measurement-165: calc(1rem * 1.65);
	--measurement-235: calc(1rem * 2.35);

	--measurement-1: calc(1rem * 1);
	--measurement-2: calc(1rem * 1.25);
	--measurement-3: calc(1rem * 1.5);
	--measurement-4: calc(1rem * 1.75);
	--measurement-5: calc(1rem * 2);
	--measurement-6: calc(1rem * 2.25);
	--measurement-7: calc(1rem * 2.5);
	--measurement-8: calc(1rem * 2.75);
	--measurement-9: calc(1rem * 3);
	--measurement-10: calc(1rem * 3.25);
	--measurement-11: calc(1rem * 3.5);
	--measurement-12: calc(1rem * 3.75);
	--measurement-13: calc(1rem * 4);
	--measurement-14: calc(1rem * 4.25);
	--measurement-15: calc(1rem * 4.5);
	--measurement-16: calc(1rem * 4.75);
	--measurement-17: calc(1rem * 5);
	--measurement-18: calc(1rem * 5.25);
	--measurement-19: calc(1rem * 5.5);
	--measurement-20: calc(1rem * 5.75);
	--measurement-21: calc(1rem * 6);
	--measurement-22: calc(1rem * 6.25);
	--measurement-23: calc(1rem * 6.5);
	--measurement-24: calc(1rem * 7);	
	--measurement-25: calc(1rem * 7.25);
	
}

/* 
=========================
   GLOBAL
========================= 
*/
*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: #1E5A82;
/* 	background: linear-gradient(180deg,rgba(30, 90, 130, 1) 0%, rgba(25, 70, 100, 1) 30%, rgba(33, 33, 33, 1) 100%); */
	background: radial-gradient(circle,rgba(30, 100, 140, 1) 0%, rgba(40, 80, 110, 1) 50%, rgba(12, 41, 56, 1) 100%);        
  color:var(--Grey-200);
  overflow-x:hidden;
}

html {scroll-behavior:smooth}

.container{
  width: min(1200px, 92%);
  margin:0 auto;
}


.logo {}

.strapline {
	font-size: var(--fontsize-3);
	margin-bottom: var(--measurement-5);
	margin-top: 0;
}

a.underline, .underline {
	text-decoration: underline;
}


.text-primary {color: var(--Primary) !important;}
.text-label {color: var(--PrimaryLight) !important;}
.text-secondary {color: var(--Secondary) !important;}
.text-confirm {color: var(--Confirm) !important;}
.text-info {color: var(--Info) !important;}
.text-warning {color: var(--WarningDark) !important;}
.text-error {color: var(--Error) !important;}

.text-dark {color: var(--SurveyLogoColour) !important;}

.text-light {color: var(--Light) !important;}
.text-light-grey {color: var(--MediumLightGrey) !important;}
.text-grey {color: var(--Grey) !important;}
.text-dark-grey {color: var(--DarkGrey) !important;}
.text-default {color: var(--Default) !important;}

body .text-white, .text-white {color: var(--White) !important;}



.text-uppercase {text-transform: uppercase !important;}
.text-lowercase {text-transform: lowercase !important;}


.disabled {
	background-color: var(--LightGrey);
	cursor: not-allowed;
	opacity: 0.25;
	user-select: none;
	pointer-events: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}


.non-focus {
	cursor: not-allowed;
	user-select: none;
	pointer-events: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}


.hide {display: none !important;}

/* 
=========================
   BROWSER COMPONENTS
========================= 
*/

.survey-card {
	max-width: 600px;
	width: 100%;
	margin: auto;
	background: var(--White);
	border-radius: var(--measurement-1);
	padding: var(--measurement-7);
	box-shadow:0 var(--measurement-three-quarter) var(--measurement-3) rgba(0,0,0,.08);
	color: var(--Grey-900);
	border-top-right-radius: 0;
  border-top-left-radius: 0;
  max-width: 100%;
}

.stats {
	display:flex;
	justify-content:space-between;
	margin: var(--measurement-5) 0;
	color: var(--Grey-900);
}

.stats div {
	text-align: center;
	flex: 1;
}

.stats strong {
	display:block;
	font-size: var(--measurement-5);
	color: var(--Primary);
}

.stats span {
	color: var(--Grey-800);
}

.result {
	margin: var(--measurement-3) 0;
	color: var(--Grey-900);
}

.bar {
	height:10px;
	background:  var(--Grey-300);
	border-radius: var(--measurement-3);
	overflow:hidden;
	margin: var(--measurement-half) 0;
}

.bar div {
	height: 100%;
	background: var(--Confirm);
}

small {
	color: var(--Grey-700);
}

.survey-card h2 {
	margin-bottom: var(--measurement-1);
	color: var(--Primary);
}

.survey-card p {
	color: var(--Grey-800);
}

.progress {
	display: inline-block;
	background: var(--Grey-100);
	color: var(--Secondary);
	padding: var(--measurement-half) var(--measurement-1);
	border-radius: var(--measurement-3);
	font-size: var(--fontsize-1);
	margin-bottom: var(--measurement-3);
}

.hint {
	color: var(--Grey-800);
	margin-bottom: var(--measurement-3);
}

.survey-card input[type=text] {
	width: 100%;
	padding: var(--measurement-1);
	font-size: var(--measurement-1);
	border: 1px solid var(--Grey-500);
	border-radius: var(--measurement-half);
}

.survey-card .option {
	display: flex;
	align-items: center;
	gap: var(--measurement-three-quarter);
	padding: var(--measurement-three-quarter);
	margin: var(--measurement-1) 0;
	border: 1px solid var(--Grey-100);
	border-radius: var(--measurement-half);
	cursor: pointer;
}

.survey-card .option:hover {
	background: var(--Grey-100);
}

.survey-card .actions {
	display: flex;
	gap: var(--measurement-three-quarter);
	margin-top: var(--measurement-3);
}

.survey-card button {
	flex: 1;
	padding: var(--measurement-1);
	border: none;
	border-radius: var(--measurement-half);
	cursor: pointer;
	font-size: var(--measurement-1);
}

.survey-card .btn-primary {
	background: var(--ConfirmLight);
	color: var(--White);
}

.survey-card .btn-secondary {
	background: var(--Grey-100);
}

.survey-card .card {
  background: var(--Grey-100);
  border: 1px solid var(--Grey-200);
  border-radius: var(--measurement-three-quarter);
  padding: var(--measurement-2);
  margin-bottom: var(--measurement-1);
}

.survey-card .banner {
	background: var(--ConfirmLight);
	color:white;
	padding: var(--measurement-1);
	margin: var(--measurement-2) -2rem;
	text-align: center;
	font-size: var(--measurement-3);
	font-weight: var(--font-weight-600);
}

.survey-card h1 {
	text-align:center;
	margin:var(--measurement-2) 0;
	color: var(--ConfirmDark);
	font-size: var(--measurement-3);
	font-family: "Open Sans", "Helvetica Neue", Helvetica,Roboto,Arial,sans-serif;
}

.survey-card .logo {
	width: 160px;
	height: auto;
	margin: 0 auto;
}


/* 
=========================
   BUTTONS
========================= 
*/

.btn {
  padding:  var(--measurement-1) var(--measurement-3);
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--Warning);
  color: var(--Grey-900);
  cursor: pointer;
  transition: .3s;
  font-weight: var(--font-weight-600);
  display: inline-block;
  margin-top: var(--measurement-1);
  text-decoration: none;
}

.btn:hover {
/* 	transform:translateY(-2px); */
	border-color:var(--Grey-600)
}

/* 
.btn.primary {
  background: linear-gradient(135deg, var(--teal), var(--CanvasGreen));
  color: var(--Default);
}
 */


.btn.default {
  background: var(--Grey-100);
  color: var(--Grey-500);
}


/*
=========================
   HERO
=========================
*/

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--measurement-7);
  align-items: center;
}

h1 {
  line-height: 1.05;
  letter-spacing: -1px;
}

h1,h2,h3,h4,h5,h6 {
	font-family: "Open Sans", "Helvetica Neue", Helvetica,Roboto,Arial,sans-serif;
	font-weight: var(--font-weight-700);
}

h1 {font-size: var(--fontsize-8);}
h2 {font-size: var(--fontsize-5);}
h3 {font-size: var(--fontsize-3);}
h4 {font-size: var(--fontsize-2);}
h5 {font-size: var(--fontsize-1-and-eight);}
h6 {font-size: var(--fontsize-1-and-12);}



p {
  color: var(--White);
  margin-top: var(--measurement-2);
  font-size: var(--fontsize-1);
  line-height: 1.6;
}
.hero-actions {
  margin-top: var(--measurement-3);
  display: flex;
  gap: var(--measurement-1);
  flex-wrap: wrap;
}

/* floating mock */
.float {
  transform: translateY(0);
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%,100%{transform:translateY(0px)}
  50%{transform:translateY(-18px)}
}

/* 
=========================
   GLASS CARD
========================= 
*/
.glass {
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(25%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 
=========================
   BROWSER MOCK
========================= 
*/
.browser {
  border-radius: var(--measurement-1);
  overflow: hidden;
  border: 1px solid var(--Grey-500);
  box-shadow:var(--shadow);
  background: var(--Grey-900);
}

.browser-bar {
  height:  var(--measurement-4);
  display: flex;
  align-items: center;
  padding: 0 var(--measurement-three-quarter);
  background: rgba(255,255,255,0.04);
  gap: var(--measurement-half);
}

.dot {
	width: var(--measurement-three-quarter);
	height: var(--measurement-three-quarter);
	border-radius:50%;
}

.red {background: var(--CanvasRed)}
.yellow {background: var(--Warning)}
.green {background: var(--CanvasGreen)}

.browser img {
  width: 100%;
  display: block;
}

/* 
=========================
   SECTIONS
========================= 
*/
section{
  padding: 120px 0;
}

.section-title {
  font-size: var(--fontsize-7);
  letter-spacing: -0.5px;
}

.section-sub {
  color:var(--Grey-200);
  margin-top: var(--measurement-three-quarter);
  width: auto;
}


/*
=========================
   FEATURE GRID
=========================
*/

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:  var(--measurement-21);
  align-items: center;
}


/* 
=========================
   PARALLAX SECTION
========================= 
*/

.parallax {
  position: relative;
  background: linear-gradient(135deg, rgba(45,226,230,0.08), rgba(76,125,255,0.08));
  overflow: hidden;
}

.parallax h2 {
  font-size: var(--fontsize-9);
}

.circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.25;
  filter:blur(40px);
}

.c1 {width:200px;height:200px;background:var(--teal);top:10%;left:10%}
.c2 {width:300px;height:300px;background:var(--blue);bottom:10%;right:10%}

/* 
=========================
   CARDS
========================= 
*/

.cards {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: var(--measurement-2);
  margin-top: var(--measurement-6);
}

.card {
  padding: var(--measurement-2);
  border-radius: var(--measurement-2);
  /* background: var(--glass); */
  background: linear-gradient(175deg, var(--glass) 0%, var(--dark) 100%);
  border: 1px solid var(--border);
}



/* +++++++++++++++++++++++++++++++++++++++++++ */
/* SPACING (RESPONSIVE) */
/* +++++++++++++++++++++++++++++++++++++++++++ */

.line-1 {line-height: var(--measurement-1);}
.line-125 {line-height: var(--measurement-2);}
.line-15 {line-height: var(--measurement-3);}
.line-175 {line-height: var(--measurement-4);}
.line-2 {line-height: var(--measurement-5);}

.padding-quarter {padding: var(--measurement-quarter);}
.padding-top-quarter {padding-top: var(--measurement-quarter);}
.padding-bottom-quarter {padding-bottom: var(--measurement-quarter);}
.padding-left-quarter {padding-left: var(--measurement-quarter);}
.padding-right-quarter {padding-right: var(--measurement-quarter);}

.padding-half {padding: var(--measurement-half);}
.padding-top-half {padding-top: var(--measurement-half);}
.padding-bottom-half {padding-bottom: var(--measurement-half);}
.padding-left-half {padding-left: var(--measurement-half);}
.padding-right-half {padding-right: var(--measurement-half);}

.padding-three-quarter {padding: var(--measurement-three-quarter) !important;}
.padding-top-three-quarter {padding-top: var(--measurement-three-quarter) !important;}
.padding-bottom-three-quarter {padding-bottom: var(--measurement-three-quarter) !important;}
.padding-left-three-quarter {padding-left: var(--measurement-three-quarter) !important;}
.padding-right-three-quarter {padding-right: var(--measurement-three-quarter) !important;}

.padding-top-4 {padding-top: var(--measurement-13) !important;}
.padding-top-5 {padding-top: var(--measurement-17) !important;}  


.padding-top-only {
	padding: 0;
	padding-top: var(--measurement-1);
}

.padding-bottom-only {
	padding: 0;
	padding-bottom: var(--measurement-1);
}


.padding-1 {padding: 1rem !important;}
.padding-top-1 {padding-top: 1rem !important;}
.padding-right-1 {padding-right: 1rem !important;}
.padding-bottom-1 {padding-bottom: 1rem !important;}
.padding-left-1 {padding-left: 1rem !important;}
  


.margin-0 {margin: 0 !important;}
.margin-top-4 {margin-top: var(--measurement-13) !important;}
.margin-top-5 {margin-top: var(--measurement-17) !important;}  

.margin-quarter {margin: var(--measurement-quarter) !important;}
.margin-top-quarter {margin-top: var(--measurement-quarter) !important;}
.margin-bottom-quarter {margin-bottom: var(--measurement-quarter) !important;}
.margin-left-quarter {margin-left: var(--measurement-quarter) !important;}
.margin-right-quarter {margin-right: var(--measurement-quarter) !important;}

.margin-half {margin: var(--measurement-half) !important;}
.margin-top-half {margin-top: var(--measurement-half) !important;}
.margin-bottom-half {margin-bottom: var(--measurement-half) !important;}
.margin-left-half {margin-left: var(--measurement-half) !important;}
.margin-right-half {margin-right: var(--measurement-half) !important;}

.margin-three-quarter {margin: var(--measurement-three-quarter) !important;}
.margin-top-three-quarter {margin-top: var(--measurement-three-quarter) !important;}
.margin-bottom-three-quarter {margin-bottom: var(--measurement-three-quarter) !important;}
.margin-left-three-quarter {margin-left: var(--measurement-three-quarter) !important;}
.margin-right-three-quarter {margin-right: var(--measurement-three-quarter) !important;}

.margin-top-1px {margin-top: 1px !important;}
.margin-top-2px {margin-top: 2px !important;}
.margin-top-3px {margin-top: 3px !important;}
.margin-top-4px {margin-top: 4px !important;}


.margin-1 {margin: 1rem !important;}
.margin-top-1 {margin-top: 1rem !important;}
.margin-right-1 {margin-right: 1rem !important;}
.margin-bottom-1 {margin-bottom: 1rem !important;}



/* 
=========================
   ACCESSIBILITY
========================= 
*/


.icons {
  display:flex;
  gap: var(--measurement-2);
  margin-top: var(--measurement-5);
}

.icon-item {
  flex: 1;
  padding: var(--measurement-3);
  text-align: center;
}


.show-for-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
  

/* 
=========================
SIGNUP
========================= 
*/

.signup {
  background: linear-gradient(180deg, var(--Primary), var(--PrimaryDark));
  color: var(--White);
  border-radius: var(--measurement-5);
  padding: var(--measurement-5);
  display: grid;
  grid-template-columns: 1fr 50%;
  gap: var(--measurement-5);
  align-items: center;
}

.signup h3 {
	color: var(--Default);
	margin-bottom: var(--measurement-3);
}

.signup input {
  width: 100%;
  padding: var(--measurement-1);
  margin-bottom: var(--measurement-1);
  border-radius: var(--measurement-three-quarter);
  border: 1px solid var(--Grey-400);
  font-size: var(--fontsize-1);
}

.signup .small {
	color: var(--Grey-700);
	margin: var(--measurement-1) 0;
	font-size: var(--fontsize-09);
}


.list {
  list-style: none;
  margin: var(--measurement-1) 0;
}

.list li {
  padding: var(--measurement-1) 0;
  display: flex;
  gap: var(--measurement-1);
}

.list li::before {
  content: "✓";
  color: var(--Confirm);
  font-weight: var(--font-weight-600);
  font-family: Inter,sans-serif;
}

form {
  background: var(--White);
  padding: var(--measurement-3);
  border-radius: var(--measurement-2);
}


.form-error {
	display: none;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  font-size: var(--fontsize-085);
  font-weight: var(--font-weight-500);
  color: var(--Error);
}

.form-error.is-visible {
  display: block;
}
    

.is-invalid-input:not(:focus) {
  border-color: var(--Error);
  background-color: var(--ErrorBackground);
}

.is-invalid-input:not(:focus)::-webkit-input-placeholder {
  color: var(--Error);
}

.is-invalid-input:not(:focus)::-moz-placeholder {
	color: var(--Error);
}

.is-invalid-input:not(:focus):-ms-input-placeholder {
	color: var(--Error);
	}

.is-invalid-input:not(:focus)::-ms-input-placeholder {
	color: var(--Error);
}

.is-invalid-input:not(:focus)::placeholder {
	color: var(--Error); 
}


.spinnerState .spinner {
	background: url("../icons/refresh-black.svg") no-repeat center center;
	width: var(--measurement-2);
	height: var(--measurement-2);
	-webkit-animation: spinning 2s infinite linear;
	animation: spinning 2s infinite linear;
}

.btn.spinnerState {padding-top: var(--measurement-three-quarter);}

@keyframes spinning {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}







.callout {
	position: relative;
	margin: 0 0 var(--measurement-1) 0;
	padding: var(--measurement-1);
	border: 1px solid var(--MediumLighterGreyPlus);
	border-radius: 0;
	background-color: var(--White);
	color: var(--Default);
	line-height: var(--measurement-3);
}

.callout.alert {
  background-color: var(--ErrorBackground);
  color: var(--Error);
  border: 1px solid var(--Alert);
  border-radius: var(--measurement-half);
  padding: var(--measurement-half) var(--measurement-1);
}



.hide {display: none !important;} 

/* 
=========================
   ANIMATIONS
========================= 
*/

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: 1s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}



/* 
=========================
   RESPONSIVE
=========================
*/

@media(max-width:900px){
  .hero-grid,.grid-2{
    grid-template-columns: 1fr;
  }
  
 /*  h1{font-size: var(--measurement-6)} */
  .cards {grid-template-columns: 1fr}
}


@media screen and (max-width: 39.9375em) {

	section {
		padding: 3rem 0;
	}

	.signup {
		display: flex;
		flex-direction: column;
	}

	.icon-item {
		flex: 1;
		padding: var(--measurement-1);
		text-align: center;
	}

	.survey-card {
		padding: var(--measurement-3);
	}

}