:root{--gray-white: #ffffff;--gray-offwhite: #f2f2f2;--gray-100: #f5fbff;--gray-200: #d5e0e5;--gray-300: #b8c5cc;--gray-400: #98a9b2;--gray-500: #829199;--gray-600: #6c7980;--gray-700: #576166;--gray-800: #41494c;--gray-900: #2b3033;--gray-1000: #161819;--blue-100: #99ddff;--blue-300: #17a1e5;--blue-400: #086999;--blue-500: #004466;--red-100: #ed755d;--red-500: #cb0000;--red-800: #800202;--green-100: #8ded5d;--green-500: #006600;--spacing--xxs: 4px;--spacing--xs: 8px;--spacing--sm: 12px;--spacing--reg: 16px;--spacing-med: 20px;--spacing--l: 24px;--spacing--xl: 32px;--spacing--xxl: 36px;--spacing--h: 40px;--spacing-xh: 48px;--spacing-g: 64px;--spacing-xg: 80px;--typography--font-family: "Space Grotesk";--typography--font-weigth-light: 300;--typography--font-weight-regular: 400;--typography--font-weight-medium: 500;--typography--font-size-label: 12px;--typography--font-size-body: 16px;--typography--font-size-sub-heading: 20px;--typography--font-size-heading: 24px;--typography--font-size-title: 32px;--elevation-2: 6px 16px 5px rgba(from var(--gray-500) r g b/ 0%), 4px 10px 4px rgba(from var(--gray-500) r g b / 1%), 2px 6px 4px rgba(from var(--gray-500) r g b / 5%), 1px 3px 3px rgba(from var(--gray-500) r g b / 9%), 0px 1px 1px rgba(from var(--gray-500) r g b / 10%);--elevation-3: 9px 23px 7px rgba(from var(--gray-500) r g b/ 0%), 5px 15px 6px rgba(from var(--gray-500) r g b / 3%), 3px 8px 5px rgba(from var(--gray-500) r g b / 10%), 1px 4px 4px rgba(from var(--gray-500) r g b / 17%), 0px 1px 2px rgba(from var(--gray-500) r g b / 20%);--elevation--btn-default: 14px 38px 11px rgba(from var(--gray-900) r g b/ 0%), 9px 24px 10px rgba(from var(--gray-900) r g b / 3%), 5px 14px 9px rgba(from var(--gray-900) r g b / 10%), 2px 6px 6px rgba(from var(--gray-900) r g b / 17%), 1px 2px 4px rgba(from var(--gray-900) r g b / 20%);--elevation--btn-hover: 7px 19px 6px rgba(from var(--gray-900) r g b/ 0%), 4px 12px 5px rgba(from var(--gray-900) r g b / 3%), 2px 7px 4px rgba(from var(--gray-900) r g b / 10%), 1px 3px 3px rgba(from var(--gray-900) r g b / 17%), 0px 1px 2px rgba(from var(--gray-900) r g b / 20%);--size-base: 8px;--size-multiplier-xs: 5;--size-multiplier-sm: 8;--size-multiplier-reg: 10;--size-multiplier-med: 12;--size-multiplier-l: 50;--z-index--100: 1;--z-index--500: 5;--z-index--1000: 10;--max-container-size: 1400px}.btn-primary,.btn-secondary,.btn-tertiary{transition:background-color,box-shadow .3s ease-out;.label{text-wrap:nowrap;text-align:center}&:focus{outline:3px solid var(--blue-300)}}a:is(.btn-primary,.btn-secondary){text-decoration:none}.btn-primary,.btn-secondary{display:flex;justify-content:center;align-items:center;padding:var(--spacing--reg);box-shadow:var(--elevation--btn-default)}.btn-primary{background-color:var(--gray-900);color:var(--gray-white)}.btn-secondary{background-color:var(--gray-white);border:1px solid var(--gray-300);color:var(--gray-1000)}.btn-tertiary{background-color:inherit;text-decoration:underline}.btn-primary:hover,.btn-secondary:hover,.btn-tertiary:hover{cursor:pointer}.btn-primary:hover,.btn-secondary:hover{box-shadow:var(--elevation--btn-hover)}.btn-primary:hover{background-color:var(--gray-800)}.btn-secondary:hover{background-color:var(--gray-400);border:1px solid var(--gray-400)}.btn-tertiary:hover{color:var(--gray-800)}@font-face{font-family:Space Grotesk;src:url("../../fonts/SpaceGrotesk-VariableFont_wght.ttf")}*{box-sizing:border-box;overscroll-behavior:none}body{font-family:var(--typography--font-family);font-weight:var(--typography--font-weight-regular);font-size:var(--typography--font-size-body);color:var(--gray-1000);background-color:var(--gray-offwhite);line-height:1.25;display:flex;flex-direction:column;gap:var(--spacing-xg)}h1{font-size:var(--typography--font-size-title)}h2{font-size:var(--typography--font-size-heading)}h3{font-size:var(--typography--font-size-sub-heading)}p{font-size:var(--typography--font-size-body)}.logo{display:flex;justify-content:center;align-items:center;gap:var(--spacing--sm);padding:0 var(--spacing--sm) 0 var(--spacing--sm);.logo-title{font-size:var(--typography--font-size-heading)}&[data-xh-get]:hover{cursor:pointer}}.top-nav{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing--l) var(--spacing-g);ul{display:flex;gap:var(--spacing--reg);li{list-style:none;a{text-decoration:none;color:inherit;&:hover{text-decoration:underline}}}}}main{width:80%;margin:0 auto;padding:var(--spacing--h) 0}footer{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-g) var(--spacing--l);background-color:var(--gray-800);color:var(--gray-white);nav{ul{display:flex;gap:var(--spacing--reg);li{list-style:none;a.btn-tertiary{text-decoration:none;color:inherit;&:hover{color:inherit;text-decoration:underline}}}}}}@media screen and (width < 600px){body{gap:var(--spacing-med)}.top-nav{padding:var(--spacing--reg) var(--spacing-med);.page-nav-links,.sign-up-cta{display:none}}footer{flex-direction:column;gap:var(--spacing-med)}}strong{font-weight:var(--typography--font-weight-medium)}img{max-width:100%;filter:brightness(98%);border:1px solid var(--gray-300);height:auto}.cta-btn{padding:var(--spacing-med) var(--spacing--h);.label{font-size:var(--typography--font-size-sub-heading)}}main{display:flex;flex-direction:column;gap:var(--spacing-xg);#hero,#features,#pricing,.faq{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-g)}#hero{gap:var(--spacing--h);text-align:center;.hero-text{display:flex;flex-direction:column;gap:var(--spacing-med)}.cta-btn{align-self:center}}.feature-section{gap:var(--spacing--reg)}#features{.feature-section{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--spacing-med) 128px;.feature-description{display:flex;flex-direction:column;gap:var(--spacing--reg);max-width:40ch}&:nth-of-type(2n){.feature-description{order:-1}}}.cta{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing--reg);h3{text-align:center}}}#pricing{.pricing-section{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:var(--spacing-med) 128px;.description{display:flex;flex-direction:column;gap:var(--spacing--reg);max-width:40ch}.cta-btn{align-self:center}}}.faq{.questions{display:flex;flex-direction:column;gap:var(--spacing-med);.question{width:100%;h3,p{max-width:70ch}}}}}@media screen and (width < 600px){main{#hero{text-align:start;h1>br{display:none}}#features{.feature-section{.feature-description{order:-1}}}}}
