@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wdth,wght@0,75..100,100..900;1,75..100,100..900&display=swap');
:root
{
	--font-normal:"Roboto";
	--font-header:"Lora";
	--padding:20px 20px;
	--border-color: #CCC;
	--border-radius: 10px;
	--box-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 4px 16px rgba(0, 0, 0, .05);
	--box-shadow-hover:0 8px 32px rgba(0, 0, 0, .12);

	--button-color:white;
	--button-background:black;
	--button-border:black;

	--orange:#e8a020;
	--gray0:#F5F5F5;
	--gray1:#D5D5D5;
	--gray2:#B5B5B5;

	--beige0:#f8f5f1;
	--beige1:#f0e9e0;
	--beige2:#e7ddcf;
	--beige3:#dfd1be;

	--green0:#E1F5EE;
	--green1:#9FE1CB;
	--green2:#2D8B6F;
	
	--red0: #fdf2ea;
	--red1: color-mix(in srgb, var(--red0), var(--red2));
	--red2: #c84b2f;

	--blue0: #E6F1FB;
	--blue1: #B5D4F4;
	--blue2: #185FA5;
  
	--color0:var(--green0);
	--color1:var(--green1);
	--color2:var(--green2);
}

* {box-sizing: border-box;}
body {margin:0;padding:0;background-color:var(--beige0);}
form, p {margin:0;padding:0}
body,table,tr,td,form,input,select,textarea {font-family:var(--font-normal);font-size:15px;color:var(--text);}
h1 {font-family:var(--font-header);margin:0;margin-bottom:40px;font-size:40px;line-height:110%;}
h2 {font-family:var(--font-header);margin:0;margin-bottom:20px;font-size:30px;line-height:110%;}
h3 {font-family:var(--font-header);margin:0;margin-bottom:5px ;font-size:20px;line-height:110%;}

ul {padding: 0;margin: 0 0 0 20px;}
li {margin-top:5px;}
li:first-child {margin-top:0;}
ul.check {margin-left:13px;}
ul.check>li {padding-left:5px;}
ul.check>li::marker
{
 content: "\2713";
 color: var(--red2);
 font-weight: bold;
}

p {margin:0;padding:0;}
hr {background-color:var(--beige1);border:none;height:2px}
hr.divider {margin: min(calc((100vw - 360px) / (1000 - 360) * (100 - 50) + 50px), 100px) 0}
img {border:0;}
img.hover {box-shadow: var(--box-shadow); transition:transform 0.2s;}
img.hover:hover {transform: scale(1.1);}

label>input.toggle[type=radio]             {display:none;}
label:has(>input[type=radio].toggle)       {color:var(--textClr);font-size:12px;cursor:pointer;padding:3px 12px;border:1px solid var(--border-color);border-radius:var(--border-radius);}
label:has(>input[type=radio].toggle:hover)       {border-color:#0f0f0f;}
label:has(input[type=radio].toggle:checked){color:white;background:#0f0f0f;border-color:#0f0f0f;}

.quote {font-style: italic;}
.quote::before {content: '\201C';}
.quote::after {content: '\201D';}

.tag {display:flex;gap:3px;align-items:center;background-color:#f0ebe3;border-radius:10px;padding:3px 10px;text-decoration:none;color:#3d3d3d;font-size:11px;line-height:100%;}
.tag  > a {text-decoration:none;}
.tag:hover {background-color:#E0E0E0;text-decoration:none}

.tag.green {background-color:var(--green0);border-color:var(--green1);color:var(--green2)}
.tag.green:hover {background-color:var(--green1);}

.tag.blue {background-color:var(--blue0);border-color:var(--blue1);color:var(--blue2)}
.tag.blue:hover {background-color:var(--blue1);}

.tag.red {background-color:var(--red0);border-color:var(--red1);color:var(--red2)}
.tag.red:hover {background-color:var(--red1);}

.w400 {max-width:400px;margin:auto;}
.w500 {max-width:500px;margin:auto;}
.w600 {max-width:600px;margin:auto;}
.w700 {max-width:700px;margin:auto;}
.w800 {max-width:800px;margin:auto;}
.w900 {max-width:900px;margin:auto;}
.w1000 {max-width:1000px;margin:auto;}
.w1100 {max-width:1100px;margin:auto;}
.w1200 {max-width:1200px;margin:auto;}
.w1300 {max-width:1300px;margin:auto;}
.w1400 {max-width:1400px;margin:auto;}

.box {border:1px solid var(--border-color);background-color:white;border-radius:var(--border-radius);padding:var(--padding);box-shadow:var(--box-shadow);overflow:hidden;}
.box:hover {box-shadow:var(--box-shadow-hover);}

.card {border:1px solid var(--border-color);background-color:white;border-radius:var(--border-radius);padding:var(--padding);box-shadow:var(--box-shadow); transition: transform 0.2s ease-in-out;}
.card:hover {box-shadow:var(--box-shadow-hover); transform:translateY(-4px);}
.card.green {border:1px solid var(--green1);background-color:var(--green0);color:var(--green2); }
.card.green:hover {box-shadow:var(--box-shadow-hover);}

.eyebrow
{
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red2);
  margin-bottom: 15px;
}


.button , .button:link, .button:active, .button:visited
{
	display:inline-block;
	text-align:center;
	padding:6px 20px;
 	text-decoration:none; 
	border:1px solid var(--button-border);
	border-radius:20px;
	background-color:var(--button-background);
	color:var(--button-color);
	transition:background-color 0.25s;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	line-height:100%;
}
.button:hover
{
	background-color: color-mix(in srgb, var(--button-background), white 20%);
}
.button.sml {font-size:11px;padding:3px 10px;}
.button.green {background-color:var(--green0);border:1px solid var(--green1);color:var(--green2);}
.button.green:hover {background-color:var(--green1);}
.button.green.invert {background-color:var(--green1);}
.button.green.invert:hover {background-color:var(--green0);}

.button.red {background-color:var(--red0);border:1px solid var(--red1);color:var(--red2);}
.button.red:hover {background-color:var(--red1);}
.button.red.invert {background-color:var(--red1);}
.button.red.invert:hover {background-color:var(--red0);}