/* Trackeo - consolidated stylesheet (hand-cleaned Webflow export).
   1 reset  2 base framework (load-bearing rules, renamed .wf-)  3 Trackeo design
   4 components (vanilla replacements for webflow.js / IX2).
   Fonts: assets/fonts/fonts.css (Inter + Inter Tight + Mr De Haviland +
   Font Awesome, all self-hosted). */

/* ======================================================================
   1. Reset (normalize)
   ====================================================================== */
html {
  font-family: sans-serif;
  
  -ms-text-size-adjust: 100%;
  
  -webkit-text-size-adjust: 100%;
  
}
body {
  margin: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
audio, canvas, progress, video {
  display: inline-block;
  
  vertical-align: baseline;
  
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden], template {
  display: none;
}
a {
  background-color: transparent;
}
a:active, a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b, strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button, input, optgroup, select, textarea {
  color: inherit;
  
  font: inherit;
  
  margin: 0;
  
}
button {
  overflow: visible;
}
button, select {
  text-transform: none;
}
button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  
  cursor: pointer;
  
}
button[disabled], html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type='checkbox'], input[type='radio'] {
  box-sizing: border-box;
  
  padding: 0;
  
}
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
input[type='search'] {
  -webkit-appearance: none;
  
}
input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  
  padding: 0;
  
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td, th {
  padding: 0;
}
/* ======================================================================
   2. Base framework (runtime-only rules dropped; the rest kept as .wf-)
   ====================================================================== */
[class^="w-icon-"], [class*=" w-icon-"] {
  
  font-family: 'webflow-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
.inline-block {
  max-width: 100%;
  display: inline-block;
}
.wf-button {
  display: inline-block;
  padding: 9px 15px;
  background-color: #3898EC;
  color: white;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
input.wf-button {
  -webkit-appearance: button;
}
html[data-w-dynpage] [data-w-cloak] {
  color: transparent !important;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin-bottom: 10px;
}
h1 {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}
h2 {
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}
h3 {
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px;
}
h4 {
  font-size: 18px;
  line-height: 24px;
  margin-top: 10px;
}
h5 {
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
}
h6 {
  font-size: 12px;
  line-height: 18px;
  margin-top: 10px;
}
p {
  margin-top: 0;
  margin-bottom: 10px;
}
blockquote {
  margin: 0 0 10px 0;
  padding: 10px 20px;
  border-left: 5px solid #E2E2E2;
  font-size: 18px;
  line-height: 22px;
}
figure {
  margin: 0;
  margin-bottom: 10px;
}
figcaption {
  margin-top: 5px;
  text-align: center;
}
ul, ol {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 40px;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}
button, [type='button'], [type='reset'] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}
.wf-form {
  margin: 0 0 15px;
}
.wf-form-done {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: #dddddd;
}
.wf-form-fail {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.wf-input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.wf-input::placeholder {
  color: #999;
}
.wf-input:focus {
  border-color: #3898EC;
  outline: 0;
}
.wf-input[disabled], .wf-input[readonly], fieldset[disabled] .wf-input {
  cursor: not-allowed;
}
.wf-input[readonly] {
  background-color: #eeeeee;
}
textarea.wf-input {
  height: auto;
}
.wf-form-label {
  display: inline-block;
  cursor: pointer;
  font-weight: normal;
  margin-bottom: 0px;
}
.wf-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}
.wf-container:before, .wf-container:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.wf-container:after {
  clear: both;
}
@media screen and (max-width: 991px) {
.wf-container {
    max-width: 728px;
  }
}
@media screen and (max-width: 479px) {
.wf-container {
    max-width: none;
  }
}
.richtext:before, .richtext:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.richtext:after {
  clear: both;
}
.richtext[contenteditable="true"]:before, .richtext[contenteditable="true"]:after {
  white-space: initial;
}
.richtext ol, .richtext ul {
  overflow: hidden;
}
.richtext .richtext-figure-selected.richtext-figure-type-video div:after, .richtext .richtext-figure-selected[data-rt-type="video"] div:after {
  outline: 2px solid #2895f7;
}
.richtext .richtext-figure-selected.richtext-figure-type-image div, .richtext .richtext-figure-selected[data-rt-type="image"] div {
  outline: 2px solid #2895f7;
}
.richtext figure.richtext-figure-type-video > div:after, .richtext figure[data-rt-type="video"] > div:after {
  content: '';
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.richtext figure {
  position: relative;
  max-width: 60%;
}
.richtext figure > div:before {
  cursor: default!important;
}
.richtext figure img {
  width: 100%;
}
.richtext figure figcaption.richtext-figcaption-placeholder {
  opacity: 0.6;
}
.richtext figure div {
  
  font-size: 0px;
  color: transparent;
}
.richtext figure.richtext-figure-type-image, .richtext figure[data-rt-type="image"] {
  display: table;
}
.richtext figure.richtext-figure-type-image > div, .richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}
.richtext figure.richtext-figure-type-image > figcaption, .richtext figure[data-rt-type="image"] > figcaption {
  display: table-caption;
  caption-side: bottom;
}
.richtext figure.richtext-figure-type-video, .richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}
.richtext figure.richtext-figure-type-video iframe, .richtext figure[data-rt-type="video"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.richtext figure.richtext-figure-type-video > div, .richtext figure[data-rt-type="video"] > div {
  width: 100%;
}
.richtext figure.richtext-align-center {
  margin-right: auto;
  margin-left: auto;
  clear: both;
}
.richtext figure.richtext-align-center.richtext-figure-type-image > div, .richtext figure.richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}
.richtext figure.richtext-align-normal {
  clear: both;
}
.richtext figure.richtext-align-fullwidth {
  width: 100%;
  max-width: 100%;
  text-align: center;
  clear: both;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.richtext figure.richtext-align-fullwidth > div {
  display: inline-block;
  
  padding-bottom: inherit;
}
.richtext figure.richtext-align-fullwidth > figcaption {
  display: block;
}
.richtext figure.richtext-align-floatleft {
  float: left;
  margin-right: 15px;
  clear: none;
}
.richtext figure.richtext-align-floatright {
  float: right;
  margin-left: 15px;
  clear: none;
}
[data-nav-menu-open] {
  display: block !important;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #C8C8C8;
  text-align: center;
  overflow: visible;
  min-width: 200px;
}
@keyframes spin {
0% {
    transform: rotate(0deg);
  }
100% {
    transform: rotate(360deg);
  }
}
.wf-layout-grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-row-gap: 16px;
  grid-column-gap: 16px;
}
/* ======================================================================
   3. Trackeo design
   ====================================================================== */
:root {
  --_fonts---inter-tight: "Inter Tight", sans-serif;
  --_colors---body: var(--_colors---gray-text-color);
  --regular-text: 16px;
  --_letter-spacing---line-height-regular: 26px;
  --_fonts---normal: 400;
  --_colors---primary: #503217;
  --h1: 72px;
  --_letter-spacing---line-height-heading: 116%;
  --_fonts---medium: 500;
  --_letter-spacing---h1: -2.16px;
  --h2: 54px;
  --_letter-spacing---h2: -1.62px;
  --h3: 46px;
  --_letter-spacing---h3: -1.38px;
  --h4: 28px;
  --medium: 500;
  --h5: 28px;
  --h6: 24px;
  --_colors---card-bg: #f3f3f3;
  --_colors---white: white;
  --_colors---gray-text-color: #5b5b5b;
  --_fonts---inter: Inter, sans-serif;
  --regular-l: 18px;
  --_letter-spacing---line-height-regular-xl: 28px;
  --_colors---text-color: #503217b8;
  --_colors---black: #000;
}
.wf-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.wf-commerce-commercecartwrapper {
  display: inline-block;
  position: relative;
}
.wf-commerce-commercecartopenlink {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commercecartopenlinkcount {
  color: #3898ec;
  text-align: center;
  background-color: #fff;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  display: inline-block;
}
.wf-commerce-commercecartcontainerwrapper {
  z-index: 1001;
  background-color: #000c;
  position: fixed;
  inset: 0;
}
.wf-commerce-commercecartcontainerwrapper--cartType-modal {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.wf-commerce-commercecartcontainer {
  background-color: #fff;
  flex-direction: column;
  width: 100%;
  min-width: 320px;
  max-width: 480px;
  display: flex;
  overflow: auto;
  box-shadow: 0 5px 25px #00000040;
}
.wf-commerce-commercecartheader {
  border-bottom: 1px solid #e6e6e6;
  flex: none;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  display: flex;
  position: relative;
}
.wf-commerce-commercecartheading {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.wf-commerce-commercecartcloselink {
  width: 16px;
  height: 16px;
}
.wf-commerce-commercecartformwrapper {
  flex-direction: column;
  flex: 1;
  display: flex;
}
.wf-commerce-commercecartform {
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecartlist {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 12px 24px;
  overflow: auto;
}
.wf-commerce-commercecartfooter {
  border-top: 1px solid #e6e6e6;
  flex-direction: column;
  flex: none;
  padding: 16px 24px 24px;
  display: flex;
}
.wf-commerce-commercecartlineitem {
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  display: flex;
}
.wf-commerce-commercecartordervalue {
  font-weight: 700;
}
.wf-commerce-commercecartcheckoutbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 2px;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercecartemptystate {
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}
.wf-checkbox {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}
.wf-checkbox:before {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}
.wf-checkbox:after {
  content: " ";
  clear: both;
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}
.wf-checkbox-input {
  float: left;
  margin: 4px 0 0 -20px;
  line-height: normal;
}
.wf-checkbox-input--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 12px;
  height: 12px;
}
.wf-checkbox-input--inputType-custom.is-checked {
  background-color: #3898ec;
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #3898ec;
}
.wf-checkbox-input--inputType-custom.is-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}
.wf-commerce-commerceaddtocartform {
  margin: 0 0 15px;
}
.wf-commerce-commerceaddtocartbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commercecheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercelayoutcontainer {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.wf-commerce-commercelayoutmain {
  flex: 0 800px;
  margin-right: 20px;
}
.wf-commerce-commercecheckoutcustomerinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutblockcontent {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
}
.wf-commerce-commercecheckoutlabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutemailinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutemailinput::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutemailinput:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingaddresswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutrow {
  margin-left: -8px;
  margin-right: -8px;
  display: flex;
}
.wf-commerce-commercecheckoutcolumn {
  flex: 1;
  padding-left: 8px;
  padding-right: 8px;
}
.wf-commerce-commercecheckoutshippingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingmethodswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingmethodslist {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
.wf-commerce-commercecheckoutshippingmethoditem {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 0;
  padding: 16px;
  font-weight: 400;
  display: flex;
}
.wf-commerce-commercecheckoutshippingmethoddescriptionblock {
  flex-direction: column;
  flex-grow: 1;
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
}
.wf-commerce-commerceboldtextblock {
  font-weight: 700;
}
.wf-commerce-commercecheckoutpaymentinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutcardnumber {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardnumber::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardnumber:focus, .wf-commerce-commercecheckoutcardnumber.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardexpirationdate {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardexpirationdate::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardexpirationdate:focus, .wf-commerce-commercecheckoutcardexpirationdate.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardsecuritycode {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardsecuritycode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardsecuritycode:focus, .wf-commerce-commercecheckoutcardsecuritycode.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingaddresstogglewrapper {
  flex-direction: row;
  display: flex;
}
.wf-commerce-commercecheckoutbillingaddresstogglecheckbox {
  margin-top: 4px;
}
.wf-commerce-commercecheckoutbillingaddresstogglelabel {
  margin-left: 8px;
  font-weight: 400;
}
.wf-commerce-commercecheckoutbillingaddresswrapper {
  margin-top: 16px;
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutbillingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutorderitemswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemslist {
  margin-bottom: -20px;
}
.wf-commerce-commercelayoutsidebar {
  flex: 0 0 320px;
  position: sticky;
  top: 20px;
}
.wf-commerce-commercecheckoutordersummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummarylineitem {
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8px;
  display: flex;
}
.wf-commerce-commercecheckoutsummarytotal {
  font-weight: 700;
}
.wf-commerce-commercecheckoutplaceorderbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 3px;
  align-items: center;
  margin-bottom: 20px;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercepaypalcheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercecheckoutcustomerinfosummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryitem, .wf-commerce-commercecheckoutsummarylabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutsummaryflexboxdiv {
  flex-direction: row;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecheckoutsummarytextspacingondiv {
  margin-right: .33em;
}
.wf-commerce-commercecheckoutpaymentsummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commerceorderconfirmationcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercecheckoutshippingsummarywrapper {
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
.wf-commerce-commercelayoutcontainer {
    flex-direction: column;
    align-items: stretch;
  }
.wf-commerce-commercelayoutmain {
    flex-basis: auto;
    margin-right: 0;
  }
.wf-commerce-commercelayoutsidebar {
    flex-basis: auto;
  }
}
@media screen and (max-width: 479px) {
.wf-commerce-commercecartcontainerwrapper--cartType-modal {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
.wf-commerce-commercecheckoutemailinput, .wf-commerce-commercecheckoutshippingfullname, .wf-commerce-commercecheckoutshippingstreetaddress, .wf-commerce-commercecheckoutshippingstreetaddressoptional {
    font-size: 16px;
  }
.wf-commerce-commercecheckoutrow {
    flex-direction: column;
  }
.wf-commerce-commercecheckoutshippingcity, .wf-commerce-commercecheckoutshippingstateprovince, .wf-commerce-commercecheckoutshippingzippostalcode, .wf-commerce-commercecheckoutshippingcountryselector, .wf-commerce-commercecheckoutcardnumber, .wf-commerce-commercecheckoutcardexpirationdate, .wf-commerce-commercecheckoutcardsecuritycode, .wf-commerce-commercecheckoutbillingfullname, .wf-commerce-commercecheckoutbillingstreetaddress, .wf-commerce-commercecheckoutbillingstreetaddressoptional, .wf-commerce-commercecheckoutbillingcity, .wf-commerce-commercecheckoutbillingstateprovince, .wf-commerce-commercecheckoutbillingzippostalcode, .wf-commerce-commercecheckoutbillingcountryselector {
    font-size: 16px;
  }
}
body {
  font-family: var(--_fonts---inter-tight);
  color: var(--_colors---body);
  font-size: var(--regular-text);
  line-height: var(--_letter-spacing---line-height-regular);
  font-weight: var(--_fonts---normal);
}
h1 {
  color: var(--_colors---primary);
  font-size: var(--h1);
  line-height: var(--_letter-spacing---line-height-heading);
  font-weight: var(--_fonts---medium);
  letter-spacing: var(--_letter-spacing---h1);
  margin-top: 0;
  margin-bottom: 0;
}
h2 {
  color: var(--_colors---primary);
  font-size: var(--h2);
  line-height: var(--_letter-spacing---line-height-heading);
  font-weight: var(--_fonts---medium);
  letter-spacing: var(--_letter-spacing---h2);
  margin-top: 0;
  margin-bottom: 0;
}
h3 {
  color: var(--_colors---primary);
  font-size: var(--h3);
  line-height: var(--_letter-spacing---line-height-heading);
  font-weight: var(--_fonts---medium);
  letter-spacing: var(--_letter-spacing---h3);
  margin-top: 0;
  margin-bottom: 0;
}
h4 {
  color: var(--_colors---primary);
  font-size: var(--h4);
  line-height: var(--_letter-spacing---line-height-heading);
  font-weight: var(--medium);
  margin-top: 0;
  margin-bottom: 0;
}
h5 {
  color: var(--_colors---primary);
  font-size: var(--h5);
  line-height: var(--_letter-spacing---line-height-heading);
  font-weight: var(--medium);
  margin-top: 0;
  margin-bottom: 0;
}
h6 {
  color: var(--_colors---primary);
  font-size: var(--h6);
  line-height: var(--_letter-spacing---line-height-heading);
  font-weight: var(--medium);
  margin-top: 0;
  margin-bottom: 0;
}
p {
  margin-bottom: 0;
  font-family: Inter, sans-serif;
}
ul {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}
blockquote {
  border-left: 5px solid #e2e2e2;
  margin-bottom: 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}
figure {
  margin-bottom: 10px;
}
.page-container {
  grid-row-gap: 20px;
  flex-flow: column;
  padding-top: 20px;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
}
.page-container.inner {
  padding-bottom: 20px;
}
.navbar {
  background-color: #fff0;
  border-radius: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: absolute;
  inset: 20px 24px auto;
}
.section {
  border-radius: 20px;
  padding-top: 80px;
  padding-bottom: 80px;
}
.section.banner {
  background-color: var(--_colors---card-bg);
  padding-top: 140px;
  padding-bottom: 0;
}
.section.every-role {
  background-color: var(--_colors---primary);
}
.section.cta-footer {
  background-color: var(--_colors---card-bg);
  padding-bottom: 0;
}
.section.faq {
  background-color: var(--_colors---white);
  border: 1px solid #50321714;
  box-shadow: inset 0 2px 64px -10px #5032170f;
}
.section.testimonial {
  background-color: var(--_colors---primary);
}
.section.integration-section {
  background-color: var(--_colors---card-bg);
}
.section.pricing-plan, .section.custom-roadmaps {
  background-color: var(--_colors---white);
  border: 1px solid #50321714;
  box-shadow: inset 0 0 64px -10px #5032170f;
}
.section.not-found {
  background-color: var(--_colors---card-bg);
  height: 100vh;
}
.section.password-protected {
  background-color: var(--_colors---card-bg);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin-bottom: 0;
  display: flex;
}
.section.inner-banner {
  background-color: var(--_colors---card-bg);
  padding-top: 180px;
  padding-bottom: 95px;
  position: relative;
}
.section.core-features {
  background-color: var(--_colors---white);
  border: 1px solid #50321714;
  padding-bottom: 50px;
  box-shadow: inset 0 0 64px -10px #5032170f;
}
.section.instant-insights-features {
  background-color: var(--_colors---white);
  border: 1px solid #50321714;
  box-shadow: inset 0 0 64px #5032170f;
}
.section.fleet-access-features {
  background-color: var(--_colors---card-bg);
}
.section.real-time-features {
  background-color: var(--_colors---primary);
}
.section.team-collaboration {
  background-color: var(--_colors---card-bg);
}
.section.about-us-banner {
  background-color: var(--_colors---card-bg);
  padding-top: 180px;
  padding-bottom: 95px;
}
.section.our-purpose, .section.team-member {
  background-color: var(--_colors---white);
  border: 1px solid #50321714;
  box-shadow: inset 0 0 64px -10px #5032170f;
}
.section.our-reach {
  background-color: var(--_colors---card-bg);
}
.section.featured-blog {
  background-color: var(--_colors---white);
  border: 1px solid #50321714;
  box-shadow: inset 0 0 64px -10px #5032170f;
}
.section.blog {
  background-color: var(--_colors---card-bg);
}
.section.blog-details, .section.privacy-policy, .section.changelog {
  background-color: var(--_colors---white);
  border: 1px solid #50321714;
  box-shadow: inset 0 0 64px -10px #5032170f;
}
.section.integration-main {
  background-color: var(--_colors---white);
  border: 1px solid #50321714;
  box-shadow: inset 0 2px 64px -10px #5032170f;
}
.section.pricing-table {
  background-color: var(--_colors---card-bg);
}
.section.contact-us, .section.style-guide, .section.license-section, .section.download-section {
  background-color: var(--_colors---white);
  border: 1px solid #50321714;
  box-shadow: inset 0 0 64px -10px #5032170f;
}
.section.drives-us {
  background-color: var(--_colors---white);
  border: 1px dashed #50321714;
  box-shadow: inset 0 0 64px -10px #5032170f;
}
.section.job-post {
  background-color: var(--_colors---card-bg);
}
.section.why-join-us {
  background-color: var(--_colors---white);
  border: 1px solid #50321714;
  box-shadow: inset 0 0 64px -10px #5032170f;
}
.section.hiring-testimonial {
  background-color: var(--_colors---card-bg);
}
.section.login-section {
  background-color: var(--_colors---card-bg);
  padding-top: 180px;
}
.section.checkout {
  min-height: auto;
  padding-left: 0;
  padding-right: 0;
}
.section.integrations-home {
  background-color: var(--_colors---white);
  border: 1px solid #e49b5914;
}
.navbar-container {
  padding-left: 24px;
  padding-right: 24px;
}
.navbar-content {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.nav-menu {
  background-color: var(--_colors---white);
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
  display: flex;
  box-shadow: 0 14px 30px #0000000d;
}
.nav-link {
  color: var(--_colors---gray-text-color);
  border-radius: 12px;
  padding: 14px 12px;
  font-family: Inter, sans-serif;
  line-height: 25.6px;
  transition: all .3s;
}
.nav-link:hover, .nav-link[aria-current="page"] {
  background-color: var(--_colors---card-bg);
  color: var(--_colors---primary);
}
.navbar-button-wrapper {
  grid-column-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.primary-button {
  background-color: var(--_colors---primary);
  color: var(--_colors---white);
  font-size: var(--regular-text);
  text-transform: capitalize;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12.01px 24.9px #33217e0f;
}
.primary-button.white-button {
  background-color: var(--_colors---white);
  color: var(--_colors---primary);
}
.primary-button.white-button.pricing-details {
  width: 100%;
  transition: color .4s, background-color .4s;
  box-shadow: 0 12.01px 24.9px #33217e0f;
}
.primary-button.white-button.pricing-details:hover, .primary-button.white-button.pricing-hover:hover {
  background-color: var(--_colors---primary);
  color: var(--_colors---white);
}
.primary-button.submit-button {
  background-image: url('../images/Primary-Button-Arrow.svg');
  background-position: 102px;
  background-repeat: no-repeat;
  background-size: auto;
  padding-right: 48px;
}
.primary-button.submit-button.password-protected {
  background-position: 90px;
  padding-left: 33px;
  padding-right: 58px;
}
.primary-button.real-time-features-button {
  background-color: #ffffff14;
}
.primary-button.job-post {
  padding-left: 40px;
  padding-right: 40px;
}
.primary-button.pricing-hover {
  transition: all .2s;
}
.primary-button.pricing-hover:hover {
  background-color: var(--_colors---white);
  color: var(--_colors---primary);
}
.primary-button-single {
  grid-column-gap: 5px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.primary-button-single.hover-out {
  position: absolute;
  top: auto;
  bottom: auto;
  right: auto;
}
.primary-button-arrow {
  font-family: "Fa Solid 900", Arial, sans-serif;
}
.container {
  width: 100%;
  max-width: 1270px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.banner-content {
  grid-row-gap: 60px;
  flex-flow: column;
  display: flex;
  overflow: clip;
}
.banner-typography {
  width: 100%;
  max-width: 695px;
  margin-left: auto;
  margin-right: auto;
}
.banner-title-description {
  text-align: center;
  margin-bottom: 30px;
}
.banner-title {
  margin-bottom: 24px;
}
.banner-description {
  width: 100%;
  max-width: 555px;
  font-family: var(--_fonts---inter);
  color: var(--_colors---primary);
  font-size: var(--regular-l);
  line-height: var(--_letter-spacing---line-height-regular-xl);
  margin-left: auto;
  margin-right: auto;
}
.banner-form-wrapper {
  width: 100%;
  max-width: 545px;
  margin-left: auto;
  margin-right: auto;
}
.banner-form-block {
  margin-bottom: 0;
}
.banner-form-single {
  grid-column-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.banner-form-text-field {
  background-color: var(--_colors---white);
  height: 56px;
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-text);
  border: 1px #000;
  border-radius: 12px;
  margin-bottom: 0;
  padding-left: 24px;
  padding-right: 24px;
  box-shadow: 0 12.01px 24.9px #7e3b210f;
}
.banner-form-text-field::placeholder {
  color: var(--_colors---primary);
}
.banner-bottom-content {
  margin-bottom: -34px;
}
.banner-image-elements {
  width: 100%;
  max-width: 1055px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 8px;
  position: relative;
  overflow: hidden;
}
.banner-image-flex-wrapper {
  z-index: 1;
  justify-content: space-between;
  display: flex;
  position: relative;
}
.banner-image-left-card {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 305px;
  display: flex;
  position: relative;
}
.banner-image-card-one {
  z-index: 1;
  width: 100%;
  max-width: 175px;
  margin-left: auto;
  position: relative;
}
.banner-hero-image {
  border-radius: 9.22px;
}
.banner-hero-image.one {
  z-index: 1;
  width: 100%;
  max-width: 113px;
  position: relative;
}
.banner-hero-image.two {
  width: 100%;
  max-width: 151px;
  margin-left: auto;
  display: block;
}
.banner-image-right-card {
  grid-row-gap: 36px;
  flex-flow: column;
  width: 100%;
  max-width: 376px;
  display: flex;
  position: relative;
}
.banner-hero-image-card {
  z-index: 1;
  width: 100%;
  max-width: 242px;
  position: relative;
}
.banner-hero-tag-wrapper {
  background-color: var(--_colors---white);
  border-radius: 3.92px;
  padding: 4px;
  display: inline-block;
  position: absolute;
  inset: auto 0% 20px auto;
}
.banner-hero-tag-text {
  background-color: var(--_colors---card-bg);
  color: var(--_colors---primary);
  padding: 9px 14px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 100%;
  display: inline-block;
}
.banner-hero-image-card-two {
  z-index: 1;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 245px;
  margin-left: auto;
  display: flex;
  position: relative;
}
.banner-hero-image-card-two.cta-two {
  position: absolute;
  inset: 35px 0% auto auto;
}
.banner-hero-tag-two {
  background-color: var(--_colors---card-bg);
  border-radius: 14.25px;
  padding: 4px;
  display: inline-block;
  position: absolute;
}
.banner-hero-tag-two-text {
  background-color: var(--_colors---white);
  color: var(--_colors---primary);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 100%;
  display: inline-block;
}
.banner-image-right-card-image-wrap {
  width: 100%;
  max-width: 285px;
  padding-bottom: 22px;
  position: relative;
}
.banner-image-right-card-image-two {
  width: 100%;
  max-width: 263px;
  margin-left: auto;
  display: block;
  box-shadow: 16px 16px 40px #0000000a;
}
.banner-image-number-wrap {
  background-color: var(--_colors---white);
  border: 1px solid #50321714;
  border-radius: 100%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 40px;
  height: 40px;
  display: flex;
  position: absolute;
  inset: auto auto 0% 0%;
}
.banner-image-number-single {
  border: 1px solid var(--_colors---card-bg);
  background-color: var(--_colors---card-bg);
  border-radius: 100%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 31px;
  height: 31px;
  display: flex;
}
.banner-image-number {
  color: var(--_colors---primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
}
.banner-shape {
  width: 100%;
  max-width: 666px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: absolute;
  inset: 110px 0 0%;
}
.banner-plane-element-image {
  width: 100%;
  max-width: 341px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 55px 0 auto;
}
.banner-element {
  width: 100%;
  max-width: 24px;
  position: absolute;
  inset: -8px 137px auto auto;
}
.banner-image-right-card-shape {
  position: absolute;
  inset: 0% auto auto 148px;
}
.banner-image-left-card-shape {
  position: absolute;
  inset: 122px auto auto 54px;
}
.every-role-container {
  width: 100%;
  max-width: 1290px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.section-title-wrapper {
  text-align: center;
  margin-bottom: 60px;
}
.section-title-wrapper.mb80px {
  margin-bottom: 80px;
}
.section-title-wrapper.integration-section-title {
  width: 100%;
  max-width: 545px;
  margin-left: auto;
  margin-right: auto;
}
.section-title-wrapper.integration-section-title.home-main {
  margin-bottom: 100px;
  position: sticky;
  top: 200px;
}
.section-title-wrapper.pricing-plan-section-title {
  width: 100%;
  max-width: 545px;
  margin-left: auto;
  margin-right: auto;
}
.section-title-wrapper.custom-roadmaps-section-title-wrapper {
  width: 100%;
  max-width: 565px;
  margin-left: auto;
  margin-right: auto;
}
.section-title-wrapper.our-purpose {
  width: 100%;
  max-width: 565px;
  margin-bottom: 85px;
  margin-left: auto;
  margin-right: auto;
}
.section-title-wrapper.team-member-title {
  width: 100%;
  max-width: 565px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
}
.section-title-wrapper.our-reach-title {
  width: 100%;
  max-width: 605px;
  margin-left: auto;
  margin-right: auto;
}
.section-title-wrapper.job-post {
  width: 100%;
  max-width: 560px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
}
.section-title-wrapper.why-join-us {
  width: 100%;
  max-width: 690px;
  margin-left: auto;
  margin-right: auto;
}
.subtitle-wrapper {
  grid-column-gap: 6px;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}
.subtitle-wrapper.alignment-left {
  justify-content: flex-start;
  align-items: center;
}
.subtitle-text {
  color: var(--_colors---primary);
  line-height: 150%;
}
.subtitle-text.white, .section-title.white-color {
  color: var(--_colors---white);
}
.section-title.white-color.every-role-title {
  width: 100%;
  max-width: 615px;
  margin-left: auto;
  margin-right: auto;
}
.section-title.mb20px {
  margin-bottom: 20px;
}
.section-title.core-features {
  width: 100%;
  max-width: 665px;
  margin-left: auto;
  margin-right: auto;
}
.section-title.our-leader {
  width: 100%;
  max-width: 565px;
  margin-bottom: 24px;
}
.every-role-grid {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}
.every-role-card {
  position: relative;
}
.every-role-card-shape {
  border: 5px solid #ffffff0a;
  border-radius: 12px;
  width: 100%;
  height: 435px;
  position: absolute;
  inset: 0% auto auto;
}
.every-role-card-shape.core-features {
  border-color: #50321714;
}
.every-role-card-content {
  z-index: 1;
  grid-row-gap: 12px;
  flex-flow: column;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  padding-top: 15px;
  padding-left: 10.2px;
  padding-right: 10.2px;
  display: flex;
  position: relative;
}
.every-role-card-image-wrapper {
  text-align: center;
}
.every-role-card-image {
  width: 100%;
  max-width: 381px;
  margin-left: auto;
  margin-right: auto;
}
.every-role-card-image.one {
  border-radius: 8px;
  max-width: 381px;
}
.every-role-card-image.two {
  border-radius: 8px;
}
.every-role-card-typography {
  background-color: #573a20;
  border-radius: 8px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 24px;
  display: flex;
}
.every-role-card-typography.core-features-card {
  background-color: #f5f5f5;
}
.every-role-card-title {
  color: var(--_colors---white);
  font-size: var(--h4);
  letter-spacing: 0;
  margin-bottom: 12px;
  font-weight: 400;
}
.every-role-card-title.core-features {
  color: var(--_colors---primary);
  font-weight: 400;
}
.every-role-card-description {
  color: #fffc;
  font-family: Inter, sans-serif;
  line-height: 26px;
}
.every-role-card-description.one {
  width: 100%;
  max-width: 255px;
}
.every-role-card-description.one.core-features {
  color: var(--_colors---body);
}
.every-role-card-description.two {
  width: 100%;
  max-width: 320px;
}
.every-role-card-description.two.core-features, .every-role-card-description.three.core-features {
  color: var(--_colors---body);
}
.every-role-card-title-description {
  margin-bottom: 24px;
}
.link-block-button {
  grid-column-gap: 7px;
  color: var(--_colors---primary);
  justify-content: flex-start;
  align-items: center;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  position: relative;
}
.link-block-button.white {
  color: var(--_colors---white);
}
.link-block-button-arrow {
  font-family: "Fa Solid 900", Arial, sans-serif;
}
.footer-wrapper {
  grid-row-gap: 40px;
  background-color: var(--_colors---white);
  border-radius: 12px;
  flex-flow: column;
  padding: 40px 64px;
  display: flex;
}
.footer-top-content {
  border-bottom: 1px solid #0000001f;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 40px;
  display: flex;
}
.footer-details {
  width: 100%;
  max-width: 460px;
}
.footer-logo-wrapper {
  margin-bottom: 16px;
}
.footer-details-text {
  color: var(--_colors---text-color);
  line-height: 24px;
}
.footer-social-media-wrapper {
  grid-column-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.footer-social-media {
  background-color: var(--_colors---white);
  border: 1px solid #00000014;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  transition: all .3s;
  display: flex;
}
.footer-social-media:hover {
  transform: translate(0, -5px);
}
.footer-menu-wrapper {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.footer-menu-title-wrapper {
  margin-bottom: 24px;
}
.footer-menu-title {
  color: var(--_colors---primary);
  font-weight: 400;
}
.footer-menu-list {
  grid-row-gap: 16px;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
  display: flex;
}
.footer-menu-text-link {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  line-height: 29px;
  text-decoration: none;
  transition: all .4s;
}
.footer-menu-text-link:hover {
  padding-left: 10px;
}
.footer-information-wrapper {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}
.footer-information-text {
  color: var(--_colors---text-color);
  font-family: Inter, sans-serif;
  line-height: 28px;
  display: inline-block;
}
.cta-typography {
  text-align: center;
  width: 100%;
  max-width: 655px;
  margin-bottom: 95px;
  margin-left: auto;
  margin-right: auto;
}
.cta-title-description {
  margin-bottom: 45px;
}
.section-description {
  color: var(--_colors---text-color);
  font-size: var(--regular-l);
  line-height: 28px;
}
.cta-button-wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.cta-image-wrapper {
  width: 100%;
  max-width: 1095px;
  min-height: 440px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.cta-image-content {
  width: 100%;
  max-width: 770px;
  height: 440px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: clip;
}
.cta-app-image {
  width: 100%;
  max-width: 331px;
  margin-top: 54px;
}
.cta-box-image {
  width: 100%;
  max-width: 409px;
  height: 365px;
  position: absolute;
  inset: auto 0% -170px auto;
}
.cta-location-icon {
  z-index: 1;
  width: 100%;
  max-width: 114px;
  position: absolute;
  inset: 111px 215px auto auto;
}
.cta-element-shape {
  position: absolute;
  inset: 26px 33px auto auto;
}
.cta-element {
  width: 100%;
  max-width: 23px;
  position: absolute;
  inset: 0% auto auto 385px;
}
.faq-content {
  grid-row-gap: 64px;
  flex-flow: column;
  display: flex;
}
.faq-top-content {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.faq-section-title-wrapper {
  width: 100%;
  max-width: 395px;
  position: sticky;
  top: 140px;
}
.faq-wrapper {
  grid-row-gap: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  flex-flow: column;
  width: 100%;
  max-width: 710px;
  padding: 20px;
  display: flex;
}
.faq-accordion-ans {
  color: var(--_colors---body);
  line-height: 26px;
}
.faq-accordion-title-wrap {
  grid-column-gap: 10px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.faq-accordion-content-wrap {
  padding-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
}
.faq-accordion-ans-wrap {
  background-color: #0000;
  position: static;
  overflow: hidden;
}
.faq-accordion-link {
  width: 100%;
  padding: 15px;
  display: block;
}
.faq-single-accordion-wrap {
  z-index: 1;
  background-color: var(--_colors---white);
  border: 1px solid #0000000f;
  border-radius: 10px;
  width: 100%;
  display: block;
}
.faq-accordion-title {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  white-space: normal;
  font-weight: 500;
  line-height: 28px;
}
.faq-icon-wrapper {
  z-index: 1;
  background-color: var(--_colors---white);
  border: 1px solid #00000014;
  border-radius: 6px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 56px;
  height: 56px;
  display: flex;
  position: relative;
}
.faq-typography-card {
  background-color: var(--_colors---card-bg);
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  display: flex;
}
.faq-title-description {
  grid-row-gap: 14px;
  flex-flow: column;
  display: flex;
}
.faq-title {
  color: var(--_colors---primary);
  line-height: 130%;
}
.faq-details-text {
  color: var(--_colors---text-color);
  font-family: Inter, sans-serif;
  line-height: 25px;
}
.testimonial-content {
  grid-row-gap: 56px;
  flex-flow: column;
  display: flex;
}
.testimonial-top-content {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.testimonial-section-title-wrapper {
  width: 100%;
  max-width: 550px;
}
.testimonial-image-wrapper {
  width: 100%;
  max-width: 445px;
}
.testimonial-image {
  border-radius: 16px;
  width: 100%;
}
.testimonial-grid {
  grid-column-gap: 24px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}
.testimonial-card {
  border: 1px solid #573a20;
  border-radius: 8px;
  padding: 26px 24px;
  transition: all .3s;
}
.testimonial-card:hover {
  background-color: #573a20;
}
.testimonial-author-wrapper {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  display: flex;
}
.testimonial-author-single {
  grid-column-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.testimonial-author-name {
  color: var(--_colors---white);
  font-size: var(--h5);
  letter-spacing: 0;
  line-height: 130%;
}
.testimonial-card-description-text {
  color: #ffffffd6;
  line-height: var(--_letter-spacing---line-height-regular);
}
.integration-content {
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}
.integration-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.integration-card {
  border: 1px #50321714;
  border-style: none solid;
  padding: 24px;
}
.integration-logo-wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 50px;
  margin-bottom: 16px;
  display: flex;
}
.integration-card-description {
  color: var(--_colors---text-color);
  line-height: var(--_letter-spacing---line-height-regular);
  margin-bottom: 26px;
}
.link-block-button-wrapper {
  display: inline-block;
}
.integration-bottom-content {
  border-top: 1px solid #50321714;
  justify-content: space-between;
  align-items: center;
  padding-top: 40px;
  display: flex;
}
.pricing-plan-content {
  justify-content: space-between;
  display: flex;
}
.pricing-individual-card {
  width: 100%;
  max-width: 465px;
}
.pricing-card {
  background-color: #fafafa;
  border: 1px solid #50321714;
  border-radius: 16px;
  flex-flow: column;
  justify-content: space-between;
  min-height: 670px;
  padding: 24px;
  display: flex;
}
.pricing-card.teams-card {
  background-color: #f3f3f3;
  border-color: #fff6;
}
.pricing-name-description {
  margin-bottom: 24px;
}
.pricing-name {
  color: var(--_colors---primary);
  font-size: var(--h5);
  letter-spacing: 0;
  margin-bottom: 8px;
  line-height: 130%;
}
.pricing-short-details {
  color: #2e2e2fad;
  line-height: var(--_letter-spacing---line-height-regular);
}
.pricing-price-wrapper {
  background-color: var(--_colors---white);
  border-radius: 16px;
  margin-bottom: 48px;
  padding: 16px;
  position: relative;
}
.discounted-price {
  color: #5032174d;
  margin-bottom: 10px;
  font-size: 32px;
  line-height: 100%;
  text-decoration: line-through;
  display: inline-block;
}
.pricing-packages-wrapper {
  grid-column-gap: 2px;
  align-items: flex-end;
  display: flex;
}
.pricing-price {
  color: var(--_colors---primary);
  font-size: 48px;
  font-weight: 500;
  line-height: 100%;
}
.pricing-packages-text {
  color: #5032174d;
  padding-bottom: 5px;
}
.pricing-list {
  grid-row-gap: 20px;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 20px;
  display: flex;
}
.pricing-list-item-text {
  color: #2e2e2f;
  font-size: var(--regular-l);
  line-height: 28.8px;
}
.pricing-teams-card {
  width: 100%;
  max-width: 750px;
}
.pricing-list-wrapper {
  grid-column-gap: 29px;
  grid-row-gap: 29px;
  justify-content: space-between;
  max-width: 600px;
  display: flex;
}
.pricing-tag {
  background-color: var(--_colors---card-bg);
  color: #2e2e2f;
  letter-spacing: .16px;
  border-radius: 100px;
  padding: 8px 12px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  display: inline-block;
  position: absolute;
  inset: 20px 20px auto auto;
}
.custom-roadmaps-content {
  position: relative;
}
.custom-roadmaps-tabs {
  grid-column-gap: 99px;
  grid-row-gap: 16px;
  grid-template: "Area"
  / 1fr 1.085fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.custom-roadmaps-tabs-menu {
  flex-flow: column;
  display: flex;
}
.roadmaps-tabs-menu-link {
  background-color: #fff0;
  border-bottom: 1px solid #50321733;
  padding: 22px 0;
}
.roadmaps-tabs-menu-link[aria-current="page"] {
  background-color: #fff0;
}
.roadmaps-tabs-menu-title {
  color: #503217b3;
  font-size: 22px;
  font-weight: 500;
  line-height: 116%;
  display: inline-block;
}
.roadmaps-tabs-menu-ans-wrap {
  overflow: hidden;
}
.roadmaps-tabs-menu-ans {
  width: 100%;
  max-width: 440px;
  font-family: var(--_fonts---inter);
  color: #5b5b5bb8;
  line-height: var(--_letter-spacing---line-height-regular);
  padding-top: 15px;
}
.custom-roadmaps-image-card.roadmaps-unique-card {
  background-image: url('../images/Roadmaps-Unique-Card-Bg.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border: 4px solid #fff;
  border-radius: 16px;
  min-height: 522px;
  position: relative;
}
.roadmaps-unique-card-one {
  border-radius: 12px;
  width: 100%;
  max-width: 367px;
  position: absolute;
  inset: 64px auto auto 37px;
}
.roadmaps-unique-card-two {
  border-radius: 12px;
  width: 100%;
  max-width: 367px;
  position: absolute;
  inset: auto 26px 28px auto;
  box-shadow: -32.58px 0 43.78px #00000005;
}
.manage-card {
  border: 1px solid #00000014;
  border-radius: 10px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 545px;
  display: flex;
  position: relative;
}
.manage-card-type {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 500px;
  display: flex;
  position: relative;
}
.manage-card-type-single {
  z-index: 1;
  grid-row-gap: 168px;
  flex-flow: column;
  display: flex;
  position: relative;
}
.manage-card-type-single.one {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 160px;
}
.manage-card-type-single.two {
  grid-row-gap: 350px;
  justify-content: flex-start;
  align-items: center;
}
.manage-card-type-single.three {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 160px;
}
.manage-card-type-tag {
  grid-column-gap: 6px;
  background-color: var(--_colors---card-bg);
  border: 1px solid #0000000f;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  display: flex;
  position: relative;
}
.manage-card-type-tag-text {
  color: #000000eb;
  letter-spacing: -.15px;
  font-family: Inter, sans-serif;
  font-size: 15px;
}
.manage-card-type-shape {
  width: 100%;
  max-width: 243px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: auto auto auto 110px;
}
.manage-card-type-icon {
  z-index: 9;
  width: 100%;
  max-width: 177px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: auto 0;
}
.seamlessly-integrated-card {
  text-align: center;
}
.seamlessly-integrated-card-image {
  border-radius: 16px;
  width: 100%;
  max-width: 588px;
  margin-left: auto;
  margin-right: auto;
}
.not-found-wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}
.not-found-content {
  text-align: center;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.not-found-image-wrapper {
  margin-bottom: 10px;
}
.page-not-found-text {
  color: var(--_colors---primary);
  font-size: var(--regular-l);
  margin-bottom: 30px;
  line-height: 28px;
}
.password-protected-content {
  text-align: center;
  width: 100%;
  max-width: 610px;
  margin-left: auto;
  margin-right: auto;
}
.password-protected-image-wrapper {
  text-align: center;
  margin-bottom: 30px;
}
.password-protected-title-description {
  margin-bottom: 30px;
}
.password-protected-title {
  font-size: var(--h1);
  margin-bottom: 10px;
}
.password-protected-description {
  color: var(--_colors---primary);
  font-size: var(--regular-l);
  line-height: 28px;
}
.password-protected-text-field {
  display: none;
}
.password-protected-form-flex {
  grid-column-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.password-protected-form-text-field {
  background-color: var(--_colors---white);
  height: 56px;
  color: var(--_colors---body);
  font-size: var(--regular-text);
  border: 1px #000;
  border-radius: 12px;
  margin-bottom: 0;
  padding-left: 24px;
  padding-right: 24px;
  font-weight: 500;
  box-shadow: 0 12.01px 24.9px #33217e0f;
}
.password-protected-form-text-field::placeholder {
  color: var(--_colors---body);
}
.inner-banner-content {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.inner-banner-content.mb90px {
  margin-bottom: 80px;
}
.inner-banner-text-link-wrapper {
  grid-column-gap: 5px;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}
.inner-banner-text-link {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  line-height: 28px;
  text-decoration: none;
}
.inner-banner-text-link-arrow {
  color: var(--_colors---primary);
  font-size: var(--regular-l);
  line-height: 28px;
}
.inner-banner-title-wrapper.feature-banner {
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.inner-banner-title-wrapper.about-banner-title {
  width: 100%;
  max-width: 810px;
  margin-left: auto;
  margin-right: auto;
}
.inner-banner-title-wrapper.blog-banner {
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.inner-banner-title-wrapper.integration {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.inner-banner-title-wrapper.contact-us-banner {
  width: 100%;
  max-width: 605px;
  margin-left: auto;
  margin-right: auto;
}
.inner-banner-title-wrapper.download-banner {
  width: 100%;
  max-width: 605px;
  margin-bottom: 45px;
  margin-left: auto;
  margin-right: auto;
}
.inner-banner-title-wrapper.hiring-banner-title-wrapper {
  width: 100%;
  max-width: 785px;
  margin-bottom: 64px;
  margin-left: auto;
  margin-right: auto;
}
.inner-banner-title.pricing-banner {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.features-content {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.features-image-wrapper {
  width: 100%;
  max-width: 593px;
}
.features-image {
  border-radius: 16px;
  overflow: hidden;
}
.features-typography {
  width: 100%;
  max-width: 548px;
}
.features-subtitle-wrapper {
  grid-column-gap: 6px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}
.features-subtitle {
  color: var(--_colors---primary);
  font-size: var(--regular-text);
  line-height: 150%;
}
.features-subtitle.white-text {
  color: var(--_colors---white);
}
.features-title-description {
  margin-bottom: 24px;
}
.features-title {
  margin-bottom: 16px;
}
.features-title.instant-insights {
  max-width: 400px;
}
.features-title.white-text {
  color: var(--_colors---white);
}
.features-title.white-text.real-time {
  max-width: 435px;
}
.features-title.team-collaboration {
  max-width: 420px;
}
.features-description {
  width: 100%;
  max-width: 480px;
  color: var(--_colors---body);
  line-height: 26px;
}
.features-description.white-text {
  color: #ffffffb8;
}
.features-description.team-collaboration {
  max-width: 495px;
}
.features-list {
  grid-row-gap: 8px;
  color: var(--_colors---body);
  flex-flow: column;
  margin-bottom: 55px;
  padding-left: 30px;
  display: flex;
}
.features-list.white {
  color: #ffffffb8;
}
.features-list-text {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  line-height: 26px;
}
.features-list-text.white-list {
  color: #ffffffb8;
}
.primary-button-wrapper {
  display: inline-block;
}
.about-us-banner-content {
  grid-column-gap: 10px;
  justify-content: space-between;
  display: flex;
}
.about-biffco-card {
  background-color: var(--_colors---white);
  border-radius: 20px;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  max-width: 397px;
  min-height: 458px;
  padding: 32px;
  display: flex;
}
.about-biffco-card-top-content {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.about-biffco-card-icon-wrapper {
  width: 100%;
  max-width: 65px;
  height: 65px;
  margin-bottom: 32px;
}
.about-biffco-card-icon {
  background-color: #f4ece5;
  border-radius: 100%;
}
.about-biffco-card-title-description {
  width: 100%;
}
.about-biffco-card-title {
  font-size: var(--h5);
  letter-spacing: 0;
  margin-bottom: 16px;
  line-height: 130%;
}
.about-biffco-card-description {
  color: var(--_colors---body);
  font-size: var(--regular-l);
  line-height: 28px;
}
.trackers-card-wrapper {
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  max-width: 820px;
  display: flex;
}
.about-top-trackers-card {
  grid-column-gap: 10px;
  justify-content: space-between;
  display: flex;
}
.about-top-trackers-left-card {
  grid-row-gap: 24px;
  flex-flow: column;
  width: 100%;
  max-width: 398px;
  display: flex;
}
.trackers-connected-card {
  background-color: var(--_colors---white);
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  padding: 22px 24px;
  display: flex;
}
.trackers-connected-card-typography {
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}
.trackers-connected-card-title {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  font-weight: 500;
  line-height: 28px;
}
.trackers-connected-card-text {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  line-height: 26px;
}
.trackers-connected-card-icon-wrap {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.trackers-connected-card-icon-single {
  border: 2px solid var(--_colors---white);
  background-color: #fff7f1;
  border-radius: 100%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  margin-right: -10px;
  display: flex;
}
.trackers-connected-card-icon-single.last {
  margin-right: 0;
}
.focusing-card {
  background-color: var(--_colors---white);
  border-radius: 20px;
  flex-flow: column;
  justify-content: space-between;
  min-height: 204px;
  padding: 24px;
  display: flex;
}
.focusing-card-number {
  color: var(--_colors---primary);
  font-size: var(--h1);
  letter-spacing: -2.16px;
  font-weight: 500;
  line-height: 116%;
}
.about-top-trackers-right-card {
  background-color: var(--_colors---white);
  border-radius: 20px;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  max-width: 397px;
  padding: 24px;
  display: flex;
}
.teams-productivity-title-description {
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}
.about-author-wrapper {
  grid-column-gap: 10px;
  background-color: var(--_colors---white);
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  display: flex;
}
.about-author-wrapper.blog-details {
  background-color: var(--_colors---card-bg);
  margin-top: 30px;
}
.about-author-single {
  grid-column-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.about-author-image {
  width: 100%;
  max-width: 59px;
}
.about-author-name {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  margin-bottom: 2px;
  line-height: 28px;
}
.about-author-bio {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  line-height: 26px;
}
.about-author-social-media-wrapper {
  grid-column-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.copy-link-button {
  grid-column-gap: 8px;
  background-color: var(--_colors---white);
  cursor: pointer;
  border: 1px solid #eaedf014;
  border-radius: 8px;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 16px;
  display: flex;
  box-shadow: 0 1px 2px #1018280d;
}
.copy-link-button-text {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.about-author-social-media {
  background-color: var(--_colors---white);
  width: 40px;
  max-width: 40px;
  height: 40px;
  color: var(--_colors---primary);
  font-family: "Fa Brands 400", Arial, sans-serif;
  font-size: var(--regular-text);
  border: 1px solid #eaedf014;
  border-radius: 8px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: all .3s;
  display: flex;
  box-shadow: 0 1px 2px #1018280d;
}
.about-author-social-media:hover {
  transform: translate(0, -5px);
}
.our-purpose-content {
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1130px;
  display: flex;
}
.our-purpose-wrapper {
  grid-row-gap: 95px;
  flex-flow: column;
  display: flex;
}
.our-purpose-image-wrapper {
  width: 100%;
  max-width: 530px;
}
.our-purpose-image {
  border-radius: 16px;
  width: 100%;
}
.our-purpose-typography {
  width: 100%;
  max-width: 440px;
}
.our-purpose-icon-wrapper {
  background-color: #50321714;
  border-radius: 8px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 60px;
  height: 60px;
  margin-bottom: 32px;
  display: flex;
}
.our-purpose-title-description {
  margin-bottom: 20px;
}
.our-purpose-title {
  font-size: var(--h4);
  letter-spacing: 0;
  margin-bottom: 12px;
  font-weight: 400;
  display: inline-block;
}
.our-purpose-description {
  color: var(--_colors---body);
  line-height: 26px;
}
.our-purpose-list {
  grid-row-gap: 8px;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 30px;
  display: flex;
}
.our-purpose-list-item {
  color: var(--_colors---body);
}
.our-purpose-list-item-text {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  font-size: var(--regular-text);
  line-height: 26px;
}
.our-leader-content {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.our-leader-image-wrapper {
  width: 100%;
  max-width: 499px;
}
.our-leader-image {
  border-radius: 20px;
  width: 100%;
}
.our-leader-typography {
  width: 100%;
  max-width: 614px;
}
.our-leader-description {
  color: var(--_colors---body);
  font-size: var(--regular-l);
  line-height: 28px;
}
.our-leader-description-wrapper {
  grid-row-gap: 24px;
  flex-flow: column;
  margin-bottom: 32px;
  display: flex;
}
.our-leader-author-wrapper {
  grid-column-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 24px;
  display: flex;
}
.our-leader-author-image {
  width: 100%;
  max-width: 56px;
}
.our-leader-author-name {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  font-weight: 400;
  line-height: 28px;
}
.our-leader-author-bio {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  line-height: 25px;
}
.our-leader-signature {
  color: var(--_colors---primary);
  letter-spacing: -1.2px;
  font-family: Mr De Haviland, sans-serif;
  font-size: 60px;
  line-height: 110%;
  display: inline-block;
  position: static;
}
.team-member-grid {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  grid-template-rows: auto;
}
.team-member-wrapper {
  grid-row-gap: 30px;
  flex-flow: column;
  display: flex;
}
.team-member-single {
  grid-column-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.team-member-image-wrapper {
  width: 100%;
  max-width: 100px;
}
.team-member-image {
  border-radius: 8px;
}
.team-member-typography {
  grid-row-gap: 2px;
  flex-flow: column;
  display: flex;
}
.team-member-name {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  font-weight: 500;
  line-height: 28px;
}
.team-member-text {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  line-height: 25px;
}
.our-reach-image-wrapper {
  text-align: center;
  position: relative;
}
.our-reach-map-image-shape {
  background-image: linear-gradient(#f3f3f300, #f3f3f38a 27%, #f3f3f3 67%);
  width: 100%;
  min-height: 500px;
  position: absolute;
  inset: auto auto 0% 0%;
}
.our-reach-details-wrapper {
  text-align: left;
  justify-content: space-between;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
  inset: auto 0 0%;
}
.our-reach-details-single {
  align-items: flex-start;
  display: flex;
}
.our-reach-details-single.spain-office {
  grid-column-gap: 24px;
  width: 100%;
  max-width: 400px;
}
.our-reach-details-icon-wrapper {
  width: 100%;
  max-width: 70px;
}
.our-reach-details-information-title {
  font-size: var(--h5);
  letter-spacing: 0;
  margin-bottom: 16px;
}
.our-reach-details-information-text {
  color: var(--_colors---body);
  font-size: var(--regular-l);
  line-height: 28px;
}
.our-reach-details-information-text.spain-office {
  width: 100%;
  max-width: 306px;
}
.our-reach-details-line {
  background-color: #89898966;
  width: 1px;
}
.featured-blog-section-title-wrapper {
  margin-bottom: 60px;
}
.featured-blog-section-title {
  font-size: var(--h3);
  letter-spacing: 0;
}
.featured-blog-content {
  grid-column-gap: 16px;
  justify-content: space-between;
  display: flex;
}
.featured-blog-left-content {
  width: 100%;
  max-width: 706px;
}
.featured-blog-left-card-image-wrap {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  display: block;
  overflow: hidden;
}
.featured-blog-left-card-image {
  width: 100%;
}
.featured-blog-left-typography {
  padding-top: 24px;
  padding-left: 24px;
}
.blog-date-wrapper {
  grid-column-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}
.blog-date {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
}
.featured-blog-name {
  color: var(--_colors---primary);
  font-size: var(--h5);
  font-weight: 500;
  line-height: 130%;
  text-decoration: none;
}
.featured-blog-title-description {
  grid-row-gap: 12px;
  flex-flow: column;
  margin-bottom: 30px;
  display: flex;
}
.featured-blog-description {
  color: #5b5b5bb8;
  width: 100%;
  max-width: 670px;
  font-size: var(--regular-l);
  font-weight: 400;
  line-height: 28px;
}
.featured-blog-right-content {
  width: 100%;
  max-width: 502px;
}
.featured-blog-right-collection-list {
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}
.featured-blog-right-card-image-wrap {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  display: block;
  overflow: hidden;
}
.featured-blog-right-card-typography {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 24px 24px 0;
  display: flex;
}
.featured-blog-right-card-name {
  color: var(--_colors---primary);
  margin-bottom: 24px;
  font-size: 28px;
  font-weight: 500;
  line-height: 130%;
  text-decoration: none;
}
.blog-collection-list {
  grid-column-gap: 23px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-image-wrapper {
  border-radius: 16px;
  margin-bottom: 16px;
  display: block;
  overflow: hidden;
}
.blog-typography {
  padding-left: 12px;
  padding-right: 12px;
}
.blog-post-name {
  color: var(--_colors---primary);
  font-size: 28px;
  font-weight: 500;
  line-height: 130%;
  text-decoration: none;
}
.blog-details-content {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.blog-details-left-content {
  width: 100%;
  max-width: 720px;
}
.blog-details-image-wrapper {
  margin-bottom: 32px;
}
.blog-details-image {
  border-radius: 20px;
}
.blog-details-rich-content h4 {
  color: var(--_colors---primary);
  margin-bottom: 14px;
  font-weight: 400;
}
.blog-details-rich-content p {
  color: var(--_colors---body);
  font-size: var(--regular-text);
  margin-bottom: 30px;
  line-height: 26px;
}
.blog-details-rich-content ul {
  grid-row-gap: 16px;
  flex-flow: column;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-left: 20px;
  display: flex;
}
.blog-details-rich-content li {
  color: var(--_colors---body);
  line-height: 25px;
}
.blog-details-rich-content figure {
  border-radius: 20px;
  margin-top: 32px;
  margin-bottom: 32px;
  overflow: hidden;
}
.blog-details-rich-content blockquote {
  background-color: var(--_colors---card-bg);
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  background-image: url('../images/Quote-Icon.svg');
  background-position: 32px 30px;
  background-repeat: no-repeat;
  background-size: auto;
  border-left-style: none;
  border-radius: 20px;
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 30px 32px 30px 95px;
  line-height: 28px;
}
.blog-details-right-content {
  grid-row-gap: 40px;
  flex-flow: column;
  width: 100%;
  max-width: 412px;
  display: flex;
  position: sticky;
  top: 140px;
}
.boost-card {
  background-color: var(--_colors---card-bg);
  border-radius: 20px;
  padding: 32px;
}
.boost-card-icon-wrapper {
  background-color: var(--_colors---white);
  border: 1px solid #50321714;
  border-radius: 100%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 75px;
  height: 75px;
  margin-bottom: 24px;
  display: flex;
  box-shadow: 0 2px .23px 4.25px #f3f3f3;
}
.boost-card-title-description {
  margin-bottom: 24px;
}
.boost-card-title {
  font-size: var(--h4);
  letter-spacing: 0;
  margin-bottom: 18px;
  font-weight: 400;
  line-height: 120%;
}
.boost-card-description {
  color: var(--_colors---body);
  font-size: var(--regular-l);
  letter-spacing: -.36px;
  line-height: 28px;
}
.table-of-content-card {
  background-color: var(--_colors---card-bg);
  border-radius: 20px;
  padding: 32px;
}
.table-of-content-card-title-wrapper {
  margin-bottom: 16px;
}
.table-of-content-card-title {
  font-size: var(--h4);
  letter-spacing: 0;
  font-weight: 400;
}
.table-of-content-list {
  grid-row-gap: 12px;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 25px;
  display: flex;
}
.table-of-content-list-item {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  font-size: var(--regular-text);
  line-height: 22px;
}
.more-blog-section-title-wrapper {
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
  display: flex;
}
.more-blog-section-title-single {
  width: 100%;
  max-width: 320px;
}
.inner-banner-subtitle {
  color: var(--_colors---primary);
  font-size: var(--regular-l);
  line-height: 28px;
}
.privacy-policy-content {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.privacy-policy-rich-content-wrapper {
  width: 100%;
  max-width: 732px;
}
.privacy-policy-rich-content h4 {
  margin-bottom: 24px;
  font-weight: 400;
}
.privacy-policy-rich-content p {
  color: var(--_colors---body);
  margin-bottom: 24px;
  line-height: 26px;
}
.privacy-policy-rich-content ul {
  grid-row-gap: 8px;
  flex-flow: column;
  margin-top: 24px;
  margin-bottom: 30px;
  padding-left: 20px;
  display: flex;
}
.privacy-policy-rich-content li {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  line-height: 26px;
}
.privacy-policy-rich-content h2 {
  font-size: var(--h4);
  letter-spacing: 0;
  margin-bottom: 24px;
  font-weight: 400;
}
.privacy-policy-table-of-content {
  width: 100%;
  max-width: 412px;
  position: sticky;
  top: 140px;
}
.changelog-content {
  grid-column-gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 951px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.changelog-line {
  width: 100%;
  max-width: 16px;
}
.changelog-wrapper {
  grid-row-gap: 66px;
  flex-flow: column;
  width: 100%;
  max-width: 912px;
  display: flex;
}
.changelog-date-wrapper {
  margin-bottom: 24px;
}
.changelog-date {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  line-height: 28px;
}
.changelog-card {
  background-color: var(--_colors---card-bg);
  border-radius: 20px;
  padding: 32px;
}
.changelog-card-title {
  font-size: var(--h4);
  letter-spacing: 0;
  margin-bottom: 24px;
  font-weight: 400;
}
.changelog-card-description {
  color: var(--_colors---body);
  font-size: var(--regular-text);
  line-height: 26px;
}
.integration-banner-icon {
  position: absolute;
}
.integration-banner-icon.one {
  inset: auto auto 120px 148px;
}
.integration-banner-icon.two {
  inset: 99px 380px auto auto;
}
.integration-banner-icon.three {
  inset: auto 120px 82px auto;
}
.integration-main-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}
.integration-main-card {
  background-color: var(--_colors---card-bg);
  border-radius: 20px;
  padding: 32px;
}
.integration-main-card-icon {
  margin-bottom: 16px;
}
.integration-main-card-title-description {
  margin-bottom: 32px;
}
.integration-main-card-title {
  font-size: var(--h5);
  letter-spacing: 0;
  margin-bottom: 24px;
  line-height: 130%;
}
.integration-main-card-description {
  color: var(--_colors---gray-text-color);
  line-height: 26px;
}
.pricing-table-content {
  padding-left: 20px;
  padding-right: 20px;
}
.pricing-table-flex-wrapper {
  justify-content: space-between;
  align-items: center;
  padding-right: 26px;
  display: flex;
}
.pricing-price-card-name-wrapper {
  width: 100%;
  max-width: 150px;
}
.pricing-content {
  width: 100%;
  max-width: 876px;
}
.pricing-grid {
  grid-column-gap: 100px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}
.pricing-price-packaging-text {
  grid-column-gap: 10px;
  align-items: flex-end;
  margin-bottom: 16px;
  display: flex;
}
.pricing-price-text {
  color: var(--_colors---primary);
  font-size: var(--h3);
  letter-spacing: -1.38px;
  font-weight: 500;
  line-height: 100%;
}
.pricing-packaging-text {
  color: var(--_colors---body);
  font-size: var(--regular-l);
}
.pricing-title {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  font-weight: 500;
  line-height: 28px;
}
.pricing-table-wrapper {
  padding-top: 32px;
}
.pricing-table-wrapper.last {
  padding-top: 40px;
}
.pricing-header {
  margin-bottom: 32px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.pricing-header.padding-none {
  padding-top: 0;
  padding-bottom: 0;
}
.pricing-table-title {
  font-size: var(--h5);
  letter-spacing: 0;
  line-height: 130%;
}
.pricing-table-title-single {
  text-align: center;
}
.pricing-table-single {
  grid-row-gap: 24px;
  border-bottom: 1px solid #5032171a;
  flex-flow: column;
  padding-bottom: 40px;
  display: flex;
}
.pricing-table-single-content {
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  min-height: 30px;
  display: flex;
}
.pricing-table-name {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  font-weight: 500;
}
.pricing-table-box-content {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.pricing-table-text {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
}
.pricing-table-line {
  background-color: var(--_colors---primary);
  width: 100%;
  max-width: 18px;
  height: 2px;
}
.pricing-plan-details {
  grid-column-gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.pricing-plan-details-card {
  width: 100%;
  max-width: 465px;
  position: sticky;
  top: 140px;
}
.pricing-details-typography {
  width: 100%;
  max-width: 705px;
}
.pricing-details-description-card {
  background-color: var(--_colors---card-bg);
  border-radius: 24px;
  margin-bottom: 80px;
  padding: 32px;
}
.about-pricing-details-rich-content h5 {
  color: var(--_colors---primary);
  margin-bottom: 20px;
  line-height: 130%;
}
.about-pricing-details-rich-content p {
  color: var(--_colors---body);
  font-size: var(--regular-l);
  line-height: 28px;
}
.subscription-choices-title-description {
  margin-bottom: 70px;
}
.subscription-choices-title {
  color: var(--_colors---primary);
  font-size: var(--h4);
  letter-spacing: 0;
  margin-bottom: 8px;
  font-weight: 400;
  line-height: 38px;
}
.subscription-choices-text {
  color: var(--_colors---body);
  font-size: var(--regular-l);
  line-height: 28px;
}
.subscription-choices-rich-wrapper {
  grid-column-gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 610px;
  padding-left: 20px;
  display: flex;
}
.subscription-choices-rich-content ul {
  grid-row-gap: 28px;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
  display: flex;
}
.subscription-choices-rich-content li {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-text);
  line-height: 26px;
}
.subscription-choices-single-title {
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  letter-spacing: 0;
  margin-bottom: 32px;
  font-weight: 500;
}
.contact-us-content {
  justify-content: space-between;
  align-items: flex-start;
}
.contact-us-details-card {
  background-color: var(--_colors---card-bg);
  border-radius: 24px;
  padding: 30px;
}
.contact-us-details-card-title-description {
  margin-bottom: 60px;
}
.contact-us-details-card-title {
  font-size: var(--h3);
  letter-spacing: 0;
  margin-bottom: 12px;
}
.contact-us-details-card-description {
  width: 100%;
  max-width: 440px;
  color: var(--_colors---body);
  line-height: 26px;
}
.contact-us-details-card-wrapper {
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.contact-us-details-card-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
}
.contact-us-details-card-single {
  background-color: var(--_colors---white);
  border-radius: 16px;
  flex-flow: column;
  justify-content: space-between;
  min-height: 155px;
  padding: 20px;
  display: flex;
}
.contact-us-details-card-icon-title {
  grid-column-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.contact-us-details-title {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  font-weight: 500;
  line-height: 28px;
}
.contact-us-details-card-text {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-text);
  font-weight: 400;
  line-height: 26px;
}
.contact-us-details-form-wrapper {
  background-color: var(--_colors---card-bg);
  border-radius: 24px;
  padding: 30px;
}
.contact-us-grid {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  align-items: start;
}
.contact-us-details-form-block {
  margin-bottom: 0;
}
.contact-us-details-form-single-wrapper {
  grid-row-gap: 30px;
  flex-flow: column;
  display: flex;
}
.contact-us-details-form-flex {
  grid-column-gap: 20px;
  display: flex;
}
.contact-us-form-single {
  width: 100%;
}
.contact-us-form-text-field {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-text);
  margin-bottom: 10px;
  font-weight: 400;
  line-height: 26px;
}
.contact-us-form-input-field {
  background-color: var(--_colors---white);
  height: 60px;
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  font-size: var(--regular-text);
  border: 1px #000;
  border-radius: 14px;
  margin-bottom: 0;
  padding: 10px 20px;
}
.contact-us-form-input-field::placeholder {
  color: var(--_colors---body);
}
.contact-us-details-textarea {
  background-color: var(--_colors---white);
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 200px;
  color: var(--_colors---body);
  font-size: var(--regular-text);
  border: 1px #000;
  border-radius: 14px;
  margin-bottom: 0;
  padding: 15px;
}
.contact-us-details-textarea::placeholder {
  color: var(--_colors---body);
}
.style-guide-content {
  width: 100%;
  max-width: 1165px;
  margin-left: auto;
  margin-right: auto;
}
.style-guide-wrapper {
  grid-row-gap: 60px;
  flex-flow: column;
  display: flex;
}
.style-guide-single {
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}
.style-guide-title-wrapper {
  background-color: var(--_colors---card-bg);
  border-radius: 24px;
  padding: 30px;
}
.style-guide-title {
  color: var(--_colors---primary);
  font-size: var(--h5);
  letter-spacing: 0;
  line-height: 130%;
  display: inline-block;
}
.style-guide-color-palette-grid {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
}
.style-guide-color-palette {
  border-radius: 24px;
  flex-flow: column;
  justify-content: flex-end;
  min-height: 280px;
  padding: 30px;
  display: flex;
}
.style-guide-color-palette.primary {
  background-color: var(--_colors---primary);
}
.style-guide-color-palette.body {
  background-color: var(--_colors---body);
}
.style-guide-color-palette-name {
  color: var(--_colors---white);
  margin-bottom: 10px;
}
.style-guide-color-palette-code {
  color: var(--_colors---white);
  font-size: var(--h5);
  letter-spacing: 0;
  line-height: 130%;
}
.style-guide-typography-card {
  grid-row-gap: 30px;
  background-color: var(--_colors---card-bg);
  border-radius: 24px;
  flex-flow: column;
  padding: 30px;
  display: flex;
}
.style-guide-typography-single {
  grid-column-gap: 24px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.style-guide-typography-single.center {
  justify-content: flex-start;
  align-items: center;
}
.style-guide-typography-size {
  color: var(--_colors---primary);
  font-size: var(--h5);
  font-weight: 500;
  line-height: 130%;
}
.style-guide-typography-name.regular-xl {
  font-family: var(--_fonts---inter);
  color: var(--_colors---primary);
  font-size: var(--regular-l);
  line-height: 28px;
  font-weight: var(--medium);
}
.style-guide-typography-name.regular-l {
  color: var(--_colors---primary);
  font-size: var(--regular-l);
  font-weight: var(--_fonts---normal);
}
.style-guide-typography-name.regular-r {
  color: var(--_colors---primary);
  font-size: var(--regular-text);
  font-weight: var(--_fonts---normal);
}
.style-guide-font-size {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-text);
  line-height: 100%;
}
.style-guide-button-wrapper {
  background-color: var(--_colors---card-bg);
  border-radius: 24px;
  padding: 30px;
}
.style-guide-button-grid {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
}
.inner-banner-description {
  color: var(--_colors---primary);
  margin-top: 16px;
  line-height: 26px;
}
.license-content {
  width: 100%;
  max-width: 1165px;
  margin-left: auto;
  margin-right: auto;
}
.license-wrapper {
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}
.license-grid {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
}
.license-card {
  background-color: var(--_colors---card-bg);
  border-radius: 24px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 65px 15px;
  display: flex;
}
.license-card-icon-wrapper {
  background-color: var(--_colors---white);
  border: 1px solid #50321714;
  border-radius: 100%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 120px;
  height: 120px;
  margin-bottom: 32px;
  display: flex;
  box-shadow: 0 0 .23px 4.25px #f3f3f3;
}
.license-card-title-wrapper {
  text-align: center;
  margin-bottom: 24px;
}
.license-card-button-wrapper {
  width: 100%;
  max-width: 338px;
}
.download-banner-button-wrapper {
  grid-column-gap: 12px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.download-button {
  grid-column-gap: 20px;
  text-align: left;
  border-radius: 100px;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 45px 16px 32px;
  text-decoration: none;
  display: flex;
}
.download-button.mac-button {
  background-color: var(--_colors---primary);
  text-decoration: none;
}
.download-button.windows {
  background-color: #50321714;
}
.download-button-text-wrapper {
  flex-flow: column;
  display: flex;
}
.download-button-text {
  color: var(--_colors---white);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  font-weight: 500;
  line-height: 28px;
}
.download-button-text.bottom {
  color: #fffc;
  font-size: var(--regular-text);
  line-height: 25px;
}
.download-button-text.bottom.windows-text {
  color: var(--_colors---body);
}
.download-button-text.windows {
  color: var(--_colors---primary);
}
.download-content {
  width: 100%;
  max-width: 1165px;
  margin-left: auto;
  margin-right: auto;
}
.download-grid {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
}
.download-description-text {
  width: 100%;
  max-width: 370px;
  color: var(--_colors---body);
  font-size: var(--regular-l);
  margin-top: 24px;
  margin-left: auto;
  margin-right: auto;
  line-height: 28px;
}
.hiring-details-wrapper {
  grid-column-gap: 32px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.hiring-details-single {
  grid-column-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.hiring-details-text {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  font-weight: 500;
  line-height: 28px;
}
.drives-us-content {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.drives-us-section-title-wrapper {
  width: 100%;
  max-width: 460px;
}
.drives-us-wrapper {
  width: 100%;
  max-width: 640px;
}
.drives-us-grid {
  grid-column-gap: 20px;
  grid-row-gap: 48px;
  grid-template-rows: auto;
}
.drives-us-icon-wrapper {
  background-color: #50321714;
  border-radius: 12px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 62px;
  height: 62px;
  margin-bottom: 20px;
  display: flex;
}
.drives-us-icon-wrapper.mb32 {
  margin-bottom: 32px;
}
.drives-us-title {
  font-size: var(--h4);
  letter-spacing: 0;
  margin-bottom: 12px;
}
.drives-us-title.mb20 {
  margin-bottom: 20px;
}
.drives-us-description {
  width: 100%;
  max-width: 280px;
  color: var(--_colors---body);
  font-size: var(--regular-l);
  line-height: 28px;
}
.drives-us-description.why-join-us {
  max-width: 100%;
}
.job-post-content {
  width: 100%;
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}
.job-post-tabs {
  text-align: center;
}
.job-post-tab-menu {
  border: 1px solid #50321714;
  border-radius: 100px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 450px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px;
  display: flex;
  box-shadow: inset 0 0 5px 1px #ffffff40, inset 0 0 .5px #00000042;
}
.job-post-tab-link {
  grid-column-gap: 8px;
  opacity: .4;
  color: var(--_colors---primary);
  background-color: #fff0;
  border-radius: 100px;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 20px;
  font-weight: 500;
  line-height: 150%;
  display: flex;
}
.job-post-tab-link[aria-current="page"] {
  opacity: 1;
  background-color: #5032171a;
}
.job-post-tab-content {
  text-align: left;
}
.job-post-wrapper {
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.job-post-card {
  border: 1px solid #5032171a;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 32px;
  display: flex;
}
.job-post-title {
  font-size: var(--h5);
  letter-spacing: 0;
  margin-bottom: 8px;
}
.job-post-details {
  grid-column-gap: 7px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.job-post-details-text {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  line-height: 28px;
}
.job-post-details-circle {
  background-color: var(--_colors---body);
  border-radius: 100%;
  width: 6px;
  height: 6px;
}
.why-join-us-grid {
  grid-column-gap: 55px;
  grid-row-gap: 65px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}
.hiring-testimonial-wrapper {
  padding-bottom: 48px;
  overflow: hidden;
}
.hiring-testimonial-slider {
  background-color: #fff0;
  width: 100%;
  height: 100%;
}
.hiring-testimonial-card {
  grid-column-gap: 10px;
  background-color: var(--_colors---white);
  border: 1px solid #eaedf0;
  border-radius: 24px;
  justify-content: space-between;
  padding: 32px;
  display: flex;
}
.hiring-testimonial-image-wrapper {
  width: 100%;
  max-width: 324px;
}
.hiring-testimonial-image {
  border-radius: 12px;
  width: 100%;
}
.hiring-testimonial-slider-arrow {
  display: none;
}
.hiring-testimonial-slider-nav {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  inset: auto auto -48px;
}
.hiring-testimonial-card-typography {
  width: 100%;
  max-width: 790px;
}
.hiring-testimonial-card-icon {
  margin-bottom: 24px;
}
.hiring-testimonial-card-description {
  color: var(--_colors---body);
  font-family: Inter Tight, sans-serif;
  font-size: var(--h5);
  font-weight: 500;
  line-height: 130%;
}
.hiring-testimonial-details-wrap {
  border-bottom: 1px solid #50321714;
  padding-bottom: 32px;
}
.hiring-testimonial-author-wrapper {
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  display: flex;
}
.hiring-testimonial-author-name {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  margin-bottom: 4px;
  font-weight: 500;
  line-height: 28px;
}
.hiring-testimonial-author-bio {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
}
.dropdown-column-wrapper {
  background-color: #0000;
  width: 710px;
  padding-top: 20px;
  overflow: hidden;
  transform: translate(-170px);
}
.dropdown-title-wrapper {
  margin-bottom: 24px;
}
.dropdown-menu-text-link-text {
  grid-column-gap: 10px;
  color: var(--_colors---primary);
  font-size: var(--regular-l);
  align-items: center;
  line-height: 28px;
  text-decoration: none;
  display: flex;
}
.dropdown-menu-text-link-text[aria-current="page"] {
  border-bottom: 1px solid #fff;
}
.dropdown-menu-text-link-text.mb0 {
  margin-bottom: 0;
}
.dropdown-menu-wrapper {
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.dropdown-toggle {
  color: var(--_colors---gray-text-color);
  border-radius: 12px;
  align-items: center;
  padding: 14px 13px;
  line-height: 25.5px;
  display: flex;
}
.dropdown-toggle:hover {
  background-color: var(--_colors---card-bg);
  color: var(--_colors---primary);
}
.dropdown-title {
  color: var(--_colors---body);
  font-size: var(--regular-l);
  margin-top: 0;
  margin-bottom: 0;
  line-height: 28px;
}
.dropdown-pd {
  grid-column-gap: 10px;
  background-color: var(--_colors---white);
  border: 1px solid #00000014;
  border-radius: 24px;
  flex-flow: wrap;
  justify-content: space-between;
  padding: 40px 60px;
  display: flex;
  position: relative;
}
.dropdown-toggle-arrow {
  margin-left: 8px;
  font-family: "Fa Solid 900", Arial, sans-serif;
  font-size: 13px;
}
.cta-card-one {
  width: 100%;
  max-width: 242px;
  position: absolute;
  inset: auto auto 49px 0%;
}
.footer-information-text-link {
  color: var(--_colors---text-color);
  text-decoration: underline;
}
.login-content {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.login-typography {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 545px;
  display: flex;
}
.login-link-block {
  grid-column-gap: 6px;
  color: var(--_colors---primary);
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  text-decoration: none;
  display: flex;
}
.login-title {
  margin-bottom: 24px;
}
.login-list {
  grid-row-gap: 12px;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
  display: flex;
}
.login-list-item {
  grid-column-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.login-list-item-text {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  line-height: 28px;
}
.login-wrapper {
  background-color: var(--_colors---white);
  border-radius: 20px;
  width: 100%;
  max-width: 552px;
  padding: 32px;
}
.login-heading-description {
  grid-row-gap: 4px;
  text-align: center;
  flex-flow: column;
  margin-bottom: 10px;
  display: flex;
}
.login-heading {
  font-size: var(--h4);
  letter-spacing: 0;
  font-weight: 400;
  line-height: 36px;
}
.login-description {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  font-size: var(--regular-l);
  line-height: 28px;
}
.login-form-block {
  margin-bottom: 16px;
}
.login-form-wrapper {
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.login-form-text-field {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-text);
  margin-bottom: 6px;
  font-weight: 400;
  line-height: 26px;
}
.login-form-input-field {
  background-color: var(--_colors---white);
  height: 50px;
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  font-size: var(--regular-text);
  border: 1px solid #bfbfbf;
  border-radius: 8px;
  margin-bottom: 0;
  padding: 8px 16px;
  line-height: 25.6px;
  box-shadow: 0 1px 2px #1018280d;
}
.login-form-input-field::placeholder {
  color: var(--_colors---body);
}
.login-form-checkbox-text-link {
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  margin-bottom: 4px;
  display: flex;
}
.login-form-checkbox-wrapper {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
  display: flex;
}
.login-form-checkbox {
  border: 1px solid #bfbfbf;
  border-radius: 4px;
  width: 16px;
  height: 16px;
  margin-top: 0;
  margin-right: 8px;
}
.login-form-checkbox.is-checked {
  margin-top: 0;
}
.login-form-checkbox-text {
  color: var(--_colors---body);
  font-family: Inter, sans-serif;
  font-size: var(--regular-text);
  margin-bottom: 0;
  font-weight: 400;
  line-height: 26px;
}
.login-form-text-link {
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-text);
  text-decoration: none;
}
.login-form-submit-button {
  background-color: var(--_colors---primary);
  height: 48px;
  color: var(--_colors---white);
  font-size: var(--regular-text);
  border-radius: 12px;
  font-weight: 500;
}
.login-social-media-wrapper {
  grid-row-gap: 16px;
  text-align: center;
  flex-flow: column;
  display: flex;
}
.login-social-media-link-block {
  grid-column-gap: 12px;
  background-color: var(--_colors---white);
  color: var(--_colors---primary);
  font-family: Inter, sans-serif;
  font-size: var(--regular-text);
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 11px;
  text-decoration: none;
  display: flex;
  box-shadow: 0 1px 2px #1018280d;
}
.login-social-media-text {
  color: #503217b3;
  font-family: Inter, sans-serif;
  font-size: var(--regular-text);
  line-height: 25px;
}
.login-social-media-text-link {
  color: var(--_colors---primary);
  text-decoration: none;
}
.checkout-sticky {
  top: 140px;
}
.checkout-header {
  background-color: var(--_colors---white);
  border-radius: 14px;
  margin-bottom: 20px;
  padding: 20px;
}
.checkout-title {
  letter-spacing: -.4px;
  font-size: 32px;
  font-weight: 400;
}
.checkout-content {
  background-color: var(--_colors---white);
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 20px;
}
.checkout-text {
  color: var(--_colors---primary);
  margin-bottom: 10px;
  font-weight: 400;
  line-height: 26px;
}
.checkout-input-field {
  background-color: var(--_colors---white);
  border-color: #ddd;
  border-radius: 14px;
  height: 48px;
  padding: 10px 20px;
}
.navbar-cart-quantity {
  background-color: #fff0;
  border-style: none;
  width: auto;
  max-width: 80px;
  height: auto;
  margin-bottom: 0;
  padding: 0;
  display: none;
}
.cart-pack-text {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 100%;
}
.navbar-cart-icon-wrap {
  grid-column-gap: 8px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.navbar-cart-quantity-wrap {
  grid-column-gap: 5px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  display: none;
}
.cart-name {
  color: var(--_colors---primary);
  font-size: var(--h6);
  margin-bottom: 12px;
  font-weight: 500;
  line-height: 100%;
}
.cart-remove-button {
  color: var(--_colors---gray-text-color);
  font-size: 18px;
  font-weight: 500;
  text-decoration: underline;
}
.cart-close-button-icon {
  filter: invert();
}
.navbar-cart-button {
  background-color: #fff0;
  justify-content: center;
  align-items: center;
  padding: 0;
  position: relative;
}
.cart-line-item {
  margin-bottom: 28px;
}
.cart-footer {
  border-top-color: #00000014;
  padding: 28px 0 36px;
}
.cart-container {
  background-color: var(--_colors---white);
  min-width: 526px;
  max-width: 526px;
  box-shadow: none;
  border: 1px solid #00000014;
  border-radius: 14px;
  padding-left: 35px;
  padding-right: 35px;
}
.cart-footer-subtotal-title {
  color: var(--_colors---primary);
  font-size: 20px;
}
.cart-item {
  grid-column-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  padding-top: 28px;
  padding-bottom: 0;
}
.cart-price {
  color: var(--_colors---body);
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 100%;
}
.cart-image {
  display: none;
}
.error-state {
  color: #000103;
  text-align: center;
  border-radius: 5px;
  margin-left: 0;
  margin-right: 0;
  padding-top: 14px;
  padding-bottom: 14px;
}
.cart-list {
  padding: 0 0 28px;
}
.cart-wrapper {
  background-color: #50321799;
  border-radius: 20px;
}
.cart-close-button {
  cursor: pointer;
  width: auto;
  height: auto;
}
.cart-footer-price {
  color: var(--_colors---primary);
  font-size: 24px;
  font-weight: 500;
}
.cart-header {
  border-bottom-color: #00000014;
  padding: 28px 0;
}
.cart-quantity {
  color: #fff;
  background-color: #fff0;
  border-radius: 0;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-width: auto;
  height: auto;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 100%;
}
.cart-div {
  margin-left: 0;
  margin-right: 0;
}
.cart-header-title {
  font-size: var(--h3);
  letter-spacing: -1.14px;
}
.cart-quantity-wrap {
  background-color: var(--_colors---primary);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  display: flex;
  position: absolute;
  top: -8px;
  bottom: 0%;
  left: 9px;
}
.success-message {
  background-color: var(--_colors---primary);
  color: var(--_colors---white);
  border-radius: 4px;
}
.navbar-logo-wrap {
  width: 100%;
  max-width: 189.234px;
}
.link-block-button-line {
  background-color: var(--_colors---primary);
  width: 100%;
  height: 1px;
  position: absolute;
  inset: auto auto 0% 0%;
}
.link-block-button-line.white {
  background-color: var(--_colors---white);
}
.custom-roadmaps-button-wrapper {
  padding-bottom: 30px;
  display: inline-block;
  position: absolute;
  inset: auto auto 0% 0%;
}
.every-role-single-card {
  background-color: #f5f5f5;
  border-radius: 8px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 248px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.every-role-single-card-one {
  width: 100%;
  max-width: 242px;
  height: 196px;
  position: absolute;
  inset: 15px auto auto -50px;
}
.every-role-single-card-two {
  z-index: 1;
  width: 100%;
  max-width: 170px;
  position: absolute;
  inset: auto 33px 39px auto;
}
.every-role-single-card-three {
  width: 100%;
  max-width: 304px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 35px 0 auto;
}
.every-role-single-card-four {
  z-index: 1;
  width: 100%;
  max-width: 339px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: auto 0 34px;
}
.every-role-single-card-five {
  z-index: 1;
  width: 100%;
  max-width: 339px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 19px 0 auto;
}
.every-role-single-card-six {
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: auto 0 20px;
}
.empty-state {
  background-color: var(--_colors---card-bg);
  text-align: center;
  border-radius: 4px;
  padding: 16px;
}
.integrations-home-content {
  grid-row-gap: 40px;
  flex-flow: column;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.integrations-card {
  background-color: var(--_colors---card-bg);
  border-radius: 12px;
  padding: 20px 20px 30px;
  position: sticky;
  top: 140px;
}
.integrations-card.two {
  top: 180px;
}
.integrations-card.three {
  top: 200px;
}
.integrations-card-image-wrapper {
  grid-column-gap: 30px;
  background-color: var(--_colors---white);
  border: 1px solid #50321714;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  min-height: 290px;
  margin-bottom: 30px;
  padding: 10px;
  display: flex;
}
.integrations-card-title {
  color: var(--_colors---primary);
  font-size: var(--h5);
  line-height: var(--_letter-spacing---line-height-heading);
  font-weight: var(--_fonts---medium);
  margin-bottom: 14px;
  display: inline-block;
}
.integrations-card-title-description {
  margin-bottom: 30px;
}
.circle {
  background-color: #0158ff;
  border-radius: 1000px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: -4px;
  right: -4px;
}
.unlock-full-access {
  color: #0158ff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
}
.promo-cards {
  z-index: 10;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  align-items: flex-end;
  display: flex;
  position: fixed;
  bottom: 20px;
  right: 20px;
}
.buy-template-button {
  background-color: #7c7c7c26;
  border-top-left-radius: 1.4rem;
  border-top-right-radius: 1.4rem;
  justify-content: center;
  align-items: center;
  min-width: 20rem;
  position: fixed;
  inset: auto 0% 0% auto;
}
.buy-template-button:hover {
  box-shadow: 4px 4px 25px #0003;
}
.buy-template-button.frosted-glass {
  z-index: 1000;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 16rem;
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
  position: relative;
  bottom: auto;
  right: auto;
}
.buy-template-button.frosted-glass:hover {
  border-width: 1px;
  border-color: #0158ff;
}
.image {
  width: 28px;
  height: 28px;
}
.promo-text {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
  text-decoration: none;
}
.all-access-card {
  background-color: #7c7c7c26;
  border-top-left-radius: 1.4rem;
  border-top-right-radius: 1.4rem;
  justify-content: center;
  align-items: center;
  min-width: 20rem;
  position: fixed;
  inset: auto 0% 0% auto;
}
.all-access-card:hover {
  box-shadow: 4px 4px 25px #0003;
}
.all-access-card.frosted-glass {
  z-index: 1000;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 230px;
  min-width: 16rem;
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
  position: relative;
  bottom: auto;
  right: auto;
}
.all-access-card.frosted-glass:hover {
  border-width: 1px;
  border-color: #0158ff;
}
@media screen and (max-width: 991px) {
body {
    --regular-text: 15px;
    --h1: 62px;
    --h2: 46px;
    --h3: 46px;
    --h4: 26px;
    --medium: 500;
    --h5: 24px;
    --h6: 24px;
    --regular-l: 17px;
    --_letter-spacing---line-height-regular: 26px;
    --_letter-spacing---line-height-heading: 116%;
    --_letter-spacing---h1: -2.16px;
    --_letter-spacing---h2: -1.62px;
    --_letter-spacing---h3: -1.38px;
    --_letter-spacing---line-height-regular-xl: 28px;
  }
.page-container {
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
  }
.navbar {
    border-radius: 14px;
    padding-top: 15px;
    padding-bottom: 15px;
    top: 15px;
    left: 15px;
    right: 15px;
  }
.section {
    border-radius: 14px;
  }
.section.banner {
    padding-top: 120px;
  }
.section.inner-banner {
    padding-top: 140px;
    padding-bottom: 80px;
  }
.section.instant-insights-features, .section.fleet-access-features, .section.real-time-features, .section.team-collaboration {
    padding-top: 20px;
    padding-bottom: 20px;
  }
.section.about-us-banner {
    padding-top: 140px;
    padding-bottom: 80px;
  }
.navbar-container {
    padding-left: 15px;
    padding-right: 15px;
  }
.nav-menu {
    border-radius: 0 0 10px 10px;
    justify-content: flex-start;
    padding: 20px;
  }
.nav-link {
    margin-bottom: 10px;
    padding: 0;
  }
.nav-link:hover {
    background-color: #f3f3f300;
  }
.nav-link[aria-current="page"] {
    background-color: #f3f3f300;
    border-radius: 0;
  }
.nav-link.mb0 {
    margin-bottom: 0;
  }
.primary-button {
    padding-top: 13px;
    padding-bottom: 13px;
  }
.primary-button.submit-button {
    padding-left: 20px;
  }
.container.checkout {
    flex-flow: column;
  }
.banner-typography {
    max-width: 620px;
  }
.banner-title {
    letter-spacing: -1.16px;
    margin-bottom: 16px;
  }
.banner-description {
    max-width: 500px;
    line-height: 27px;
  }
.banner-form-text-field {
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
  }
.banner-image-elements {
    max-width: 705px;
  }
.banner-image-left-card {
    max-width: 220px;
  }
.banner-image-card-one {
    max-width: 120px;
  }
.banner-hero-image.one {
    max-width: 90px;
  }
.banner-hero-image.two {
    max-width: 120px;
  }
.banner-image-right-card {
    grid-row-gap: 16px;
    max-width: 240px;
  }
.banner-hero-image-card {
    max-width: 210px;
  }
.banner-hero-tag-text {
    padding: 8px 10px;
  }
.banner-hero-image-card-two {
    max-width: 190px;
  }
.banner-hero-tag-two-text {
    font-size: 12px;
    font-weight: 600;
  }
.banner-image-right-card-image-wrap {
    max-width: 200px;
  }
.banner-shape {
    max-width: 500px;
    top: 45px;
  }
.banner-plane-element-image {
    max-width: 240px;
    top: 30px;
  }
.banner-element {
    max-width: 20px;
    right: 110px;
  }
.banner-image-right-card-shape {
    display: none;
  }
.banner-image-left-card-shape {
    display: none;
    left: -23px;
  }
.section-title-wrapper {
    margin-bottom: 40px;
  }
.section-title-wrapper.mb80px {
    margin-bottom: 50px;
  }
.section-title-wrapper.integration-section-title {
    margin-bottom: 40px;
  }
.section-title-wrapper.integration-section-title.home-main {
    margin-bottom: 60px;
  }
.section-title-wrapper.pricing-plan-section-title {
    max-width: 450px;
  }
.section-title-wrapper.custom-roadmaps-section-title-wrapper {
    max-width: 490px;
    margin-bottom: 40px;
  }
.section-title-wrapper.our-purpose {
    max-width: 500px;
    margin-bottom: 40px;
  }
.section-title-wrapper.team-member-title {
    margin-bottom: 40px;
  }
.section-title-wrapper.our-reach-title {
    max-width: 500px;
  }
.section-title-wrapper.why-join-us {
    max-width: 600px;
  }
.subtitle-wrapper {
    margin-bottom: 15px;
  }
.subtitle-wrapper.alignment-left.mobile-center {
    justify-content: center;
    align-items: center;
  }
.section-title {
    letter-spacing: -.8px;
  }
.section-title.white-color.every-role-title {
    letter-spacing: -.8px;
    max-width: 550px;
  }
.section-title.white-color.testimonial {
    font-size: 42px;
  }
.section-title.mb20px {
    margin-bottom: 15px;
  }
.section-title.our-leader {
    max-width: 100%;
  }
.every-role-grid {
    grid-template-columns: 1fr 1fr;
  }
.every-role-card-shape {
    border-width: 4px;
    height: 390px;
  }
.every-role-card-content {
    padding-left: 5px;
    padding-right: 5px;
  }
.every-role-card-typography {
    padding: 16px;
  }
.every-role-card-title {
    margin-bottom: 10px;
  }
.every-role-card-description.one {
    max-width: 100%;
    line-height: 25px;
  }
.footer-wrapper {
    grid-row-gap: 30px;
    padding: 20px;
  }
.footer-top-content {
    grid-column-gap: 10px;
    padding-bottom: 30px;
  }
.footer-details {
    max-width: 400px;
  }
.footer-social-media-wrapper {
    grid-column-gap: 10px;
  }
.footer-social-media {
    width: 52px;
    height: 52px;
  }
.footer-social-media-icon {
    width: 100%;
    max-width: 26px;
  }
.footer-menu-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 16px;
    flex-flow: wrap;
  }
.footer-menu-list {
    grid-row-gap: 12px;
  }
.footer-menu-text-link {
    font-size: 16px;
    line-height: 26px;
  }
.footer-information-wrapper {
    padding-top: 16px;
    padding-bottom: 16px;
  }
.cta-typography {
    max-width: 600px;
    margin-bottom: 60px;
  }
.cta-title-description {
    margin-bottom: 30px;
  }
.cta-image-wrapper {
    max-width: 715px;
    min-height: 350px;
  }
.cta-image-content {
    max-width: 715px;
    height: 360px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 60px;
  }
.cta-app-image {
    max-width: 220px;
    margin-top: 30px;
  }
.cta-box-image {
    max-width: 250px;
    height: 223.094px;
    bottom: -60px;
    right: 60px;
  }
.cta-location-icon {
    max-width: 70px;
    top: 120px;
    right: 250px;
  }
.cta-element-shape {
    width: 100%;
    max-width: 200px;
    right: 150px;
  }
.faq-content {
    grid-row-gap: 40px;
  }
.faq-top-content {
    grid-row-gap: 40px;
    flex-flow: column;
  }
.faq-section-title-wrapper {
    text-align: center;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    position: static;
  }
.faq-wrapper {
    border-radius: 12px;
    max-width: 100%;
    padding: 16px;
  }
.faq-accordion-content-wrap {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
.faq-accordion-title {
    font-size: 18px;
  }
.faq-plus {
    width: 100%;
    max-width: 16px;
  }
.faq-icon-wrapper {
    max-width: 40px;
    height: 40px;
  }
.faq-typography-card {
    padding: 20px;
  }
.faq-title-description {
    grid-row-gap: 5px;
  }
.testimonial-content {
    grid-row-gap: 40px;
  }
.testimonial-top-content {
    grid-row-gap: 35px;
    flex-flow: column;
  }
.testimonial-section-title-wrapper {
    text-align: center;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
  }
.testimonial-image-wrapper {
    display: none;
  }
.testimonial-grid {
    grid-column-gap: 16px;
    grid-template-columns: 1fr 1fr;
  }
.testimonial-card {
    padding: 20px;
  }
.integration-card {
    padding: 10px;
  }
.integration-logo-wrapper {
    min-height: 40px;
    margin-bottom: 10px;
  }
.integration-logo {
    width: 100%;
    max-width: 120px;
  }
.integration-card-description {
    margin-bottom: 20px;
  }
.integration-bottom-content {
    padding-top: 24px;
  }
.pricing-plan-content {
    grid-row-gap: 20px;
    flex-flow: column;
  }
.pricing-individual-card {
    max-width: 100%;
  }
.pricing-card {
    border-radius: 14px;
    min-height: auto;
    padding: 20px;
  }
.pricing-price-wrapper {
    margin-bottom: 24px;
  }
.pricing-price {
    font-size: 38px;
  }
.pricing-list {
    grid-row-gap: 10px;
    margin-bottom: 30px;
  }
.pricing-list-wrapper {
    max-width: 100%;
  }
.custom-roadmaps-tabs {
    grid-column-gap: 20px;
    grid-row-gap: 30px;
    grid-template-columns: 1fr;
  }
.roadmaps-tabs-menu-link {
    padding-top: 20px;
    padding-bottom: 20px;
  }
.seamlessly-integrated-card-image {
    max-width: 100%;
  }
.password-protected-title {
    letter-spacing: -1px;
    font-size: 56px;
  }
.inner-banner-content.mb90px {
    margin-bottom: 60px;
  }
.inner-banner-title-wrapper.about-banner-title {
    max-width: 600px;
  }
.inner-banner-title-wrapper.hiring-banner-title-wrapper {
    max-width: 600px;
    margin-bottom: 20px;
  }
.inner-banner-title {
    letter-spacing: -1px;
    font-size: 58px;
    line-height: 124%;
  }
.inner-banner-title.pricing-banner {
    max-width: 500px;
  }
.features-content {
    grid-row-gap: 30px;
    flex-flow: column;
  }
.features-image-wrapper {
    order: -1;
    max-width: 100%;
  }
.features-image {
    width: 100%;
  }
.features-typography {
    max-width: 100%;
  }
.features-title-description {
    margin-bottom: 20px;
  }
.features-title {
    letter-spacing: -1px;
    font-size: 40px;
    line-height: 124%;
  }
.features-title.instant-insights, .features-title.white-text.real-time, .features-title.team-collaboration {
    max-width: 100%;
  }
.features-list {
    margin-bottom: 30px;
  }
.primary-button-wrapper.desktop {
    display: none;
  }
.about-us-banner-content {
    grid-row-gap: 10px;
    flex-flow: column;
  }
.about-biffco-card {
    grid-row-gap: 16px;
    border-radius: 14px;
    max-width: 100%;
    min-height: auto;
    padding: 20px;
  }
.about-biffco-card-title-description {
    max-width: 500px;
  }
.trackers-card-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    max-width: 100%;
  }
.about-top-trackers-card {
    grid-column-gap: 10px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.about-top-trackers-left-card {
    grid-row-gap: 10px;
    max-width: 100%;
  }
.trackers-connected-card, .focusing-card {
    border-radius: 14px;
  }
.about-top-trackers-right-card {
    border-radius: 14px;
    max-width: 100%;
  }
.about-author-wrapper {
    border-radius: 14px;
    padding: 20px;
  }
.about-author-wrapper.blog-details {
    margin-top: 10px;
  }
.about-author-single {
    grid-column-gap: 14px;
  }
.our-purpose-content {
    grid-row-gap: 24px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 100%;
  }
.our-purpose-wrapper {
    grid-row-gap: 40px;
  }
.our-purpose-image-wrapper {
    order: -1;
    max-width: 100%;
  }
.our-purpose-typography {
    max-width: 100%;
  }
.our-purpose-icon-wrapper {
    margin-bottom: 20px;
  }
.our-purpose-title {
    margin-bottom: 10px;
  }
.our-leader-content {
    grid-row-gap: 24px;
    flex-flow: column;
  }
.our-leader-image-wrapper, .our-leader-typography {
    max-width: 100%;
  }
.team-member-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.team-member-single {
    grid-column-gap: 16px;
  }
.team-member-image-wrapper {
    max-width: 90px;
  }
.team-member-name {
    line-height: 27px;
  }
.our-reach-map-image-shape {
    min-height: 200px;
  }
.our-reach-details-wrapper {
    grid-column-gap: 20px;
  }
.our-reach-details-single.spain-office {
    grid-column-gap: 16px;
    max-width: 300px;
  }
.our-reach-details-icon-wrapper {
    max-width: 60px;
  }
.our-reach-details-information-text.spain-office {
    max-width: 225px;
  }
.featured-blog-section-title-wrapper {
    margin-bottom: 40px;
  }
.featured-blog-content {
    grid-row-gap: 30px;
    flex-flow: column;
  }
.featured-blog-left-typography {
    padding-left: 0;
  }
.featured-blog-name {
    line-height: 140%;
  }
.featured-blog-right-content {
    max-width: 100%;
  }
.featured-blog-right-collection-list {
    grid-column-gap: 16px;
    grid-row-gap: 24px;
    flex-flow: row;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.featured-blog-right-card-image-wrap {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
.featured-blog-right-card-typography {
    padding-left: 0;
    padding-right: 0;
  }
.featured-blog-right-card-name {
    margin-bottom: 20px;
    font-size: 24px;
  }
.blog-collection-list {
    grid-column-gap: 20px;
    grid-row-gap: 30px;
    grid-template-columns: 1fr 1fr;
  }
.blog-image-wrapper {
    border-radius: 12px;
  }
.blog-image {
    width: 100%;
  }
.blog-typography {
    padding-left: 0;
    padding-right: 0;
  }
.blog-post-name {
    font-size: 24px;
  }
.blog-details-content {
    grid-row-gap: 40px;
    flex-flow: column;
  }
.blog-details-rich-content ul {
    grid-row-gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
.blog-details-rich-content figure {
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
.blog-details-rich-content blockquote {
    margin-top: 20px;
    margin-bottom: 20px;
  }
.blog-details-right-content {
    order: -1;
    max-width: 100%;
    position: static;
  }
.table-of-content-card {
    border-radius: 14px;
  }
.privacy-policy-content {
    grid-row-gap: 30px;
    flex-flow: column;
  }
.privacy-policy-rich-content-wrapper {
    max-width: 100%;
  }
.privacy-policy-rich-content ul {
    grid-row-gap: 6px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
.privacy-policy-table-of-content {
    order: -1;
    max-width: 100%;
    position: static;
  }
.changelog-wrapper {
    grid-row-gap: 40px;
  }
.changelog-card {
    border-radius: 14px;
    padding: 24px;
  }
.integration-banner-icon {
    display: none;
  }
.integration-main-grid {
    grid-template-columns: 1fr 1fr;
  }
.integration-main-card {
    border-radius: 16px;
    padding: 20px;
  }
.pricing-table-content {
    width: 1100px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: auto;
  }
.pricing-table-wrapper.last {
    padding-top: 20px;
  }
.pricing-header {
    margin-bottom: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
.pricing-table-single {
    grid-row-gap: 16px;
    padding-bottom: 20px;
  }
.pricing-plan-details {
    grid-row-gap: 40px;
    flex-flow: column;
  }
.pricing-plan-details-card {
    max-width: 100%;
    position: static;
  }
.pricing-details-description-card {
    border-radius: 16px;
    margin-bottom: 30px;
    padding: 16px;
  }
.about-pricing-details-rich-content h5 {
    margin-bottom: 10px;
  }
.subscription-choices-title-description {
    margin-bottom: 40px;
  }
.subscription-choices-rich-wrapper {
    padding-left: 0;
  }
.subscription-choices-rich-content ul {
    grid-row-gap: 15px;
  }
.subscription-choices-single-title {
    font-size: 18px;
  }
.contact-us-details-card {
    border-radius: 16px;
    padding: 20px;
  }
.contact-us-details-card-title-description {
    margin-bottom: 30px;
  }
.contact-us-details-card-wrapper {
    grid-row-gap: 10px;
  }
.contact-us-details-card-grid {
    grid-column-gap: 10px;
  }
.contact-us-details-card-single {
    border-radius: 10px;
    min-height: 130px;
  }
.contact-us-details-form-wrapper {
    border-radius: 16px;
    padding: 20px;
  }
.contact-us-grid {
    grid-template-columns: 1fr;
  }
.contact-us-details-form-single-wrapper {
    grid-row-gap: 10px;
  }
.contact-us-details-form-flex {
    grid-column-gap: 10px;
  }
.contact-us-form-input-field {
    border-radius: 10px;
    height: 48px;
    padding-left: 16px;
    padding-right: 16px;
  }
.contact-us-details-textarea {
    min-height: 140px;
  }
.style-guide-title-wrapper {
    border-radius: 14px;
    padding: 16px;
  }
.style-guide-color-palette-grid {
    grid-column-gap: 16px;
  }
.style-guide-color-palette {
    border-radius: 14px;
    min-height: 180px;
    padding: 20px;
  }
.style-guide-color-palette-name {
    letter-spacing: -.5px;
    margin-bottom: 8px;
    font-size: 32px;
  }
.style-guide-color-palette-code {
    font-size: 22px;
  }
.style-guide-typography-card {
    grid-row-gap: 22px;
    border-radius: 14px;
  }
.style-guide-button-wrapper {
    border-radius: 14px;
    padding: 16px;
  }
.style-guide-button-grid {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.inner-banner-description {
    margin-top: 10px;
  }
.license-card {
    border-radius: 16px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
.license-card-icon-wrapper {
    max-width: 95px;
    height: 95px;
    margin-bottom: 16px;
  }
.license-card-icon {
    width: 100%;
    max-width: 48px;
  }
.license-card-title {
    letter-spacing: -.56px;
    font-size: 38px;
  }
.download-button {
    grid-column-gap: 10px;
    padding: 10px 30px 10px 15px;
  }
.download-button-text.windows {
    line-height: 27px;
  }
.download-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.download-description-text {
    max-width: 280px;
    line-height: 27px;
  }
.hiring-details-wrapper {
    grid-column-gap: 15px;
    grid-row-gap: 10px;
    flex-flow: wrap;
  }
.drives-us-content {
    grid-row-gap: 40px;
    flex-flow: column;
  }
.drives-us-section-title-wrapper {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
.drives-us-wrapper {
    max-width: 100%;
  }
.drives-us-icon-wrapper.mb32 {
    margin-bottom: 20px;
  }
.drives-us-description.why-join-us {
    font-size: 16px;
    line-height: 26px;
  }
.job-post-tab-menu {
    margin-bottom: 40px;
  }
.job-post-tab-link {
    padding-top: 10px;
    padding-bottom: 10px;
  }
.job-post-card {
    padding: 20px;
  }
.why-join-us-grid {
    grid-column-gap: 20px;
    grid-row-gap: 30px;
  }
.hiring-testimonial-card {
    grid-row-gap: 20px;
    border-radius: 20px;
    flex-flow: column;
    padding: 24px;
  }
.hiring-testimonial-slider-nav {
    bottom: -52px;
  }
.hiring-testimonial-card-description {
    font-size: 24px;
    font-weight: 400;
  }
.hiring-testimonial-author-wrapper {
    padding-top: 20px;
  }
.menu-dropdown-wrapper {
    margin-bottom: 10px;
    display: block;
  }
.dropdown-column-wrapper {
    overflow: visible;
    transform: translate(0);
  }
.dropdown-column-wrapper.is-open {
    width: 100%;
    transform: translate(0%);
  }
.dropdown-toggle {
    justify-content: flex-start;
    padding: 0;
  }
.dropdown-toggle:hover {
    color: #503217;
    background-color: #f3f3f300;
  }
.dropdown-pd {
    border-radius: 14px;
    padding: 20px;
  }
.integration-icon {
    width: 100%;
    max-width: 42px;
  }
.cta-card-one {
    max-width: 208px;
  }
.login-typography {
    display: none;
  }
.login-wrapper {
    margin-left: auto;
    margin-right: auto;
  }
.checkout-div-block {
    width: 100%;
    margin-right: 0;
  }
.checkout-sticky {
    flex-basis: 0;
    width: 100%;
  }
.checkout-header, .checkout-content {
    border-radius: 10px;
    padding: 16px;
  }
.checkout-input-field {
    border-radius: 10px;
    height: 46px;
  }
.menu-button {
    background-color: #0000;
    padding: 0;
  }
.menu-button.is-open {
    background-color: #0000;
  }
.pricing-table-main {
    overflow: auto;
  }
.star-text {
    font-size: 16px;
  }
.checkout-row {
    flex-flow: column;
  }
.cart-wrapper {
    border-radius: 14px;
  }
.navbar-logo-wrap {
    width: auto;
    max-width: none;
  }
.custom-roadmaps-button-wrapper {
    padding-top: 30px;
    padding-bottom: 0;
    position: static;
  }
.every-role-single-card-four, .every-role-single-card-five {
    max-width: 280px;
  }
}
@media screen and (max-width: 767px) {
body {
    --regular-text: 15px;
    --h1: 48px;
    --h2: 34px;
    --h3: 32px;
    --h4: 24px;
    --medium: 500;
    --h5: 22px;
    --h6: 22px;
    --regular-l: 16px;
    --_letter-spacing---line-height-regular: 26px;
    --_letter-spacing---line-height-heading: 116%;
    --_letter-spacing---h1: -2.16px;
    --_letter-spacing---h2: -1.62px;
    --_letter-spacing---h3: -1.38px;
    --_letter-spacing---line-height-regular-xl: 28px;
  }
.page-container {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
.navbar {
    border-radius: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
    top: 10px;
  }
.section {
    border-radius: 10px;
    padding-top: 65px;
    padding-bottom: 65px;
  }
.section.inner-banner {
    padding-top: 120px;
    padding-bottom: 70px;
  }
.section.about-us-banner {
    padding-top: 120px;
    padding-bottom: 65px;
  }
.section.login-section {
    padding-top: 120px;
  }
.navbar-container {
    padding-left: 10px;
    padding-right: 10px;
  }
.navbar-logo {
    padding-left: 0;
  }
.primary-button {
    border-radius: 10px;
    padding: 12px 20px;
  }
.primary-button.job-post {
    padding-left: 24px;
    padding-right: 24px;
  }
.banner-typography {
    max-width: 430px;
  }
.banner-title {
    line-height: 120%;
  }
.banner-description {
    line-height: 26px;
  }
.banner-form-text-field {
    height: 48px;
    padding-left: 16px;
    padding-right: 16px;
  }
.banner-bottom-content {
    margin-bottom: -20px;
  }
.banner-image-elements {
    max-width: 430px;
  }
.banner-image-left-card {
    grid-row-gap: 10px;
    max-width: 185px;
  }
.banner-image-card-one {
    max-width: 100px;
    margin-left: 40px;
  }
.banner-hero-image.one {
    max-width: 75px;
  }
.banner-hero-image.two {
    max-width: 80px;
  }
.banner-image-right-card {
    grid-row-gap: 29px;
    justify-content: space-between;
    max-width: 180px;
  }
.banner-hero-image-card-two {
    max-width: 160px;
  }
.banner-image-right-card-image-wrap {
    max-width: 155px;
    padding-bottom: 0;
  }
.banner-image-right-card-image-two {
    max-width: 154px;
  }
.banner-image-number-wrap {
    display: none;
  }
.banner-shape {
    max-width: 350px;
  }
.banner-plane-element-image {
    max-width: 140px;
    top: 50px;
    left: 0;
  }
.banner-element {
    right: 69px;
  }
.section-title-wrapper.mb80px {
    margin-bottom: 40px;
  }
.section-title-wrapper.integration-section-title {
    max-width: 400px;
  }
.section-title-wrapper.integration-section-title.home-main {
    margin-bottom: 40px;
  }
.section-title-wrapper.pricing-plan-section-title {
    max-width: 360px;
  }
.section-title-wrapper.custom-roadmaps-section-title-wrapper {
    max-width: 380px;
    margin-bottom: 30px;
  }
.section-title-wrapper.our-purpose {
    max-width: 400px;
    margin-bottom: 40px;
  }
.section-title-wrapper.team-member-title {
    max-width: 340px;
  }
.section-title-wrapper.our-reach-title {
    max-width: 380px;
  }
.section-title-wrapper.job-post {
    max-width: 400px;
  }
.section-title-wrapper.why-join-us {
    max-width: 450px;
  }
.subtitle-wrapper {
    margin-bottom: 10px;
  }
.section-title {
    letter-spacing: -.6px;
    line-height: 130%;
  }
.section-title.white-color.every-role-title {
    letter-spacing: -.6px;
    max-width: 420px;
    line-height: 130%;
  }
.section-title.white-color.testimonial {
    font-size: 34px;
  }
.section-title.mb20px {
    margin-bottom: 10px;
  }
.section-title.our-leader {
    letter-spacing: -.2px;
    margin-bottom: 20px;
    font-size: 30px;
  }
.every-role-grid {
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
  }
.every-role-card-content {
    padding-top: 10px;
  }
.every-role-card-image, .every-role-card-image.one {
    max-width: 100%;
  }
.every-role-card-description {
    line-height: 25px;
  }
.every-role-card-description.three {
    max-width: 320px;
  }
.every-role-card-title-description {
    margin-bottom: 20px;
  }
.footer-wrapper {
    padding: 15px;
  }
.footer-top-content {
    grid-row-gap: 16px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
  }
.footer-logo-wrapper {
    margin-bottom: 10px;
  }
.footer-social-media {
    width: 42px;
    height: 42px;
  }
.footer-social-media-icon {
    max-width: 20px;
  }
.footer-menu-wrapper {
    grid-row-gap: 24px;
  }
.footer-menu-single {
    width: 100%;
    max-width: 167.109px;
  }
.footer-menu-title-wrapper {
    margin-bottom: 20px;
  }
.footer-menu-list {
    grid-row-gap: 10px;
  }
.footer-menu-text-link {
    font-size: 16px;
  }
.footer-information-wrapper {
    padding-top: 12px;
    padding-bottom: 12px;
  }
.footer-information-text {
    width: 100%;
    max-width: 320px;
    line-height: 25px;
  }
.cta-typography {
    max-width: 460px;
    margin-bottom: 50px;
  }
.cta-title-description {
    margin-bottom: 24px;
  }
.section-description.cta-mobile {
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    line-height: 26px;
  }
.cta-image-wrapper {
    max-width: 430px;
    min-height: 270px;
  }
.cta-image-content {
    max-width: 430px;
    height: 270px;
    padding-left: 40px;
  }
.cta-app-image {
    max-width: 140px;
  }
.cta-box-image {
    max-width: 180px;
    height: 160.625px;
    right: 20px;
  }
.cta-location-icon {
    max-width: 30px;
    top: 120px;
    right: 160px;
  }
.cta-element-shape {
    max-width: 120px;
    right: 100px;
  }
.cta-element {
    left: 140px;
  }
.faq-section-title-wrapper {
    max-width: 380px;
  }
.faq-wrapper {
    padding: 10px;
  }
.faq-accordion-ans {
    font-size: 16px;
    line-height: 150%;
  }
.faq-accordion-content-wrap {
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
  }
.faq-accordion-link {
    padding: 10px;
  }
.faq-single-accordion-wrap {
    border-radius: 8px;
  }
.faq-accordion-title {
    font-size: 17px;
  }
.faq-plus {
    max-width: 14px;
  }
.faq-icon-wrapper {
    max-width: 35px;
    height: 35px;
  }
.faq-typography-card {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: wrap;
    justify-content: space-between;
    padding: 10px;
  }
.testimonial-section-title-wrapper {
    max-width: 400px;
  }
.testimonial-grid {
    grid-template-columns: 1fr;
  }
.testimonial-card {
    padding: 16px;
  }
.testimonial-author-wrapper {
    margin-bottom: 20px;
  }
.integration-grid {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: 1fr 1fr;
  }
.integration-card-description {
    max-width: 160px;
    margin-bottom: 16px;
    line-height: 25px;
  }
.pricing-card {
    padding: 16px;
  }
.pricing-price-wrapper {
    border-radius: 10px;
    padding: 10px;
  }
.discounted-price {
    font-size: 24px;
  }
.pricing-list {
    grid-row-gap: 8px;
  }
.pricing-list-item-text {
    line-height: 26px;
  }
.pricing-list-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: wrap;
  }
.pricing-tag {
    padding-top: 5px;
    padding-bottom: 5px;
    top: 10px;
    right: 10px;
  }
.roadmaps-tabs-menu-title {
    font-size: 20px;
  }
.roadmaps-tabs-menu-ans {
    padding-top: 10px;
  }
.custom-roadmaps-image-card.roadmaps-unique-card {
    border-radius: 14px;
    min-height: 400px;
  }
.roadmaps-unique-card-one {
    max-width: 280px;
    top: 24px;
  }
.roadmaps-unique-card-two {
    max-width: 260px;
  }
.manage-card {
    min-height: auto;
    padding: 20px;
  }
.manage-card-type {
    max-width: 400px;
  }
.manage-card-type-single.one {
    max-width: 96px;
  }
.manage-card-type-single.two {
    grid-row-gap: 320px;
  }
.manage-card-type-single.three {
    max-width: 133px;
  }
.manage-card-type-tag {
    grid-column-gap: 4px;
    padding-left: 5px;
    padding-right: 5px;
  }
.manage-card-type-tag-icon {
    width: 100%;
    max-width: 18px;
  }
.manage-card-type-tag-text {
    font-size: 14px;
  }
.manage-card-type-shape {
    max-width: 220px;
    left: 70px;
  }
.manage-card-type-icon {
    max-width: 150px;
    left: -10px;
  }
.not-found-content {
    max-width: 300px;
  }
.password-protected-image-wrapper {
    margin-bottom: 10px;
  }
.password-protected-title {
    font-size: 42px;
  }
.password-protected-description {
    width: 100%;
    max-width: 365px;
    margin-left: auto;
    margin-right: auto;
    line-height: 26px;
  }
.password-protected-form-flex {
    grid-column-gap: 10px;
  }
.password-protected-form-text-field {
    height: 46px;
    padding-left: 16px;
    padding-right: 16px;
  }
.inner-banner-content.mb90px {
    margin-bottom: 50px;
  }
.inner-banner-text-link-wrapper {
    margin-bottom: 10px;
  }
.inner-banner-title-wrapper.about-banner-title {
    max-width: 400px;
  }
.inner-banner-title-wrapper.download-banner {
    margin-bottom: 30px;
  }
.inner-banner-title-wrapper.hiring-banner-title-wrapper {
    max-width: 400px;
  }
.inner-banner-title {
    font-size: 42px;
  }
.features-title {
    letter-spacing: -.5px;
    font-size: 28px;
  }
.features-title.instant-insights {
    letter-spacing: -.5px;
  }
.about-biffco-card {
    border-radius: 12px;
    padding: 16px;
  }
.about-biffco-card-icon-wrapper {
    margin-bottom: 16px;
  }
.about-biffco-card-description {
    font-size: 14px;
    line-height: 24px;
  }
.about-top-trackers-card {
    grid-row-gap: 10px;
    grid-template-columns: 1fr;
  }
.trackers-connected-card {
    border-radius: 12px;
    padding: 16px;
  }
.focusing-card {
    min-height: 160px;
    padding: 16px;
  }
.focusing-card-number {
    order: -1;
  }
.about-top-trackers-right-card {
    grid-row-gap: 10px;
    padding: 16px;
  }
.about-author-wrapper {
    grid-row-gap: 10px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
  }
.about-author-single {
    grid-column-gap: 10px;
  }
.about-author-image {
    max-width: 50px;
  }
.about-author-name {
    line-height: 26px;
  }
.about-author-social-media-wrapper {
    grid-column-gap: 10px;
  }
.copy-link-button {
    padding: 8px;
  }
.about-author-social-media {
    width: 36px;
    max-width: 36px;
    height: 36px;
  }
.our-purpose-image {
    border-radius: 10px;
  }
.our-purpose-icon-wrapper {
    max-width: 55px;
    height: 55px;
    margin-bottom: 16px;
  }
.our-purpose-title-description {
    margin-bottom: 16px;
  }
.our-purpose-list {
    grid-row-gap: 6px;
  }
.our-leader-description {
    font-size: 15px;
    line-height: 25px;
  }
.our-leader-description-wrapper {
    grid-row-gap: 10px;
    margin-bottom: 20px;
  }
.our-leader-author-wrapper {
    grid-column-gap: 10px;
  }
.our-leader-signature {
    letter-spacing: -1px;
    font-size: 42px;
  }
.team-member-single {
    grid-row-gap: 10px;
    text-align: center;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }
.our-reach-map-image-shape {
    min-height: 120px;
  }
.our-reach-details-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 16px;
    flex-flow: row;
    justify-content: space-between;
  }
.our-reach-details-single.spain-office {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    max-width: 188px;
  }
.our-reach-details-icon-wrapper {
    max-width: 46px;
  }
.our-reach-details-information-title {
    margin-bottom: 10px;
  }
.our-reach-details-information-text.spain-office {
    max-width: 188px;
    font-size: 15px;
    line-height: 25px;
  }
.featured-blog-left-typography {
    padding-top: 20px;
  }
.featured-blog-description {
    line-height: 26px;
  }
.featured-blog-right-collection-list {
    grid-template-columns: 1fr;
  }
.featured-blog-right-card-typography {
    padding-top: 20px;
  }
.featured-blog-right-card-name {
    font-size: 22px;
  }
.blog-collection-list {
    grid-template-columns: 1fr;
  }
.blog-post-name {
    width: 100%;
    max-width: 300px;
    display: block;
  }
.blog-details-image-wrapper {
    margin-bottom: 24px;
  }
.blog-details-image {
    border-radius: 14px;
  }
.blog-details-rich-content h4 {
    line-height: 120%;
  }
.blog-details-rich-content p {
    margin-bottom: 20px;
  }
.blog-details-rich-content ul {
    grid-row-gap: 8px;
  }
.blog-details-rich-content blockquote {
    background-position: 16px 14px;
    border-radius: 12px;
    padding: 16px 16px 16px 70px;
    line-height: 26px;
  }
.boost-card {
    border-radius: 14px;
    padding: 16px;
  }
.boost-card-icon-wrapper {
    max-width: 65px;
    height: 65px;
    margin-bottom: 20px;
  }
.table-of-content-card {
    border-radius: 12px;
    padding: 20px;
  }
.table-of-content-list {
    grid-row-gap: 10px;
  }
.more-blog-section-title-wrapper {
    grid-row-gap: 16px;
    text-align: center;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
  }
.more-blog-section-title-single {
    max-width: 100%;
  }
.privacy-policy-rich-content h4 {
    margin-bottom: 15px;
  }
.privacy-policy-rich-content ul {
    margin-top: 16px;
    margin-bottom: 16px;
  }
.changelog-line {
    display: none;
  }
.changelog-wrapper {
    grid-row-gap: 24px;
  }
.changelog-date-wrapper {
    margin-bottom: 20px;
  }
.changelog-card {
    padding: 20px;
  }
.changelog-card-title {
    margin-bottom: 16px;
  }
.integration-main-grid {
    grid-template-columns: 1fr;
  }
.integration-main-card-title {
    margin-bottom: 16px;
  }
.pricing-table-content {
    width: 890px;
  }
.pricing-table-flex-wrapper {
    padding-right: 16px;
  }
.pricing-price-packaging-text {
    grid-column-gap: 5px;
  }
.pricing-header {
    padding-top: 10px;
    padding-bottom: 10px;
  }
.pricing-table-single {
    grid-row-gap: 10px;
  }
.pricing-plan-details {
    grid-row-gap: 30px;
  }
.pricing-details-description-card {
    border-radius: 14px;
    margin-bottom: 24px;
  }
.subscription-choices-title-description {
    margin-bottom: 30px;
  }
.subscription-choices-rich-wrapper {
    grid-row-gap: 24px;
    flex-flow: wrap;
  }
.subscription-choices-rich-content ul {
    grid-row-gap: 8px;
  }
.subscription-choices-single-title {
    margin-bottom: 20px;
  }
.contact-us-details-card {
    padding: 16px;
  }
.contact-us-details-card-description {
    line-height: 25px;
  }
.contact-us-details-card-single {
    min-height: 120px;
    padding: 16px;
  }
.contact-us-details-textarea {
    min-height: 110px;
  }
.style-guide-wrapper {
    grid-row-gap: 40px;
  }
.style-guide-single {
    grid-row-gap: 20px;
  }
.style-guide-color-palette-grid {
    grid-column-gap: 10px;
    grid-row-gap: 20px;
  }
.style-guide-color-palette {
    min-height: 140px;
    padding: 16px;
  }
.style-guide-color-palette-name {
    letter-spacing: 0;
    font-size: 23px;
    font-weight: 400;
  }
.style-guide-color-palette-code {
    font-size: 18px;
    font-weight: 400;
  }
.style-guide-typography-card {
    grid-row-gap: 20px;
    padding: 20px;
  }
.style-guide-button-wrapper {
    padding: 16px;
  }
.inner-banner-description {
    line-height: 25px;
  }
.license-grid {
    grid-column-gap: 10px;
  }
.license-card {
    padding-top: 20px;
    padding-bottom: 20px;
  }
.license-card-icon-wrapper {
    max-width: 75px;
    height: 75px;
    margin-bottom: 10px;
  }
.license-card-icon {
    max-width: 32px;
  }
.license-card-title {
    font-size: 28px;
  }
.download-banner-button-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: wrap;
  }
.download-button {
    grid-column-gap: 5px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 15px;
  }
.download-button-icon {
    width: 100%;
    max-width: 30px;
  }
.download-description-text {
    margin-top: 20px;
    line-height: 26px;
  }
.hiring-details-text {
    font-weight: 400;
    line-height: 26px;
  }
.drives-us-section-title-wrapper {
    max-width: 360px;
  }
.drives-us-grid {
    grid-column-gap: 5px;
    grid-row-gap: 30px;
  }
.drives-us-icon-wrapper {
    max-width: 55px;
    height: 55px;
  }
.drives-us-icon-wrapper.mb32 {
    border-radius: 8px;
    margin-bottom: 10px;
  }
.drives-us-icon {
    width: 100%;
    max-width: 35px;
  }
.drives-us-title.mb20 {
    margin-bottom: 10px;
  }
.drives-us-description {
    max-width: 100%;
    font-size: 15px;
    line-height: 25px;
  }
.drives-us-description.why-join-us {
    font-size: 15px;
  }
.job-post-card {
    grid-row-gap: 16px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
  }
.why-join-us-grid {
    grid-column-gap: 10px;
    grid-row-gap: 24px;
    grid-template-columns: 1fr 1fr;
  }
.hiring-testimonial-card {
    padding: 20px;
  }
.hiring-testimonial-image-wrapper {
    max-width: 100%;
  }
.hiring-testimonial-card-description {
    font-size: 19px;
  }
.hiring-testimonial-author-wrapper {
    grid-row-gap: 16px;
    flex-flow: wrap;
  }
.dropdown-title-wrapper {
    margin-bottom: 20px;
  }
.dropdown-menu-text-link-text {
    line-height: 26px;
  }
.dropdown-menu-wrapper {
    grid-row-gap: 10px;
  }
.dropdown-toggle {
    font-size: 16px;
  }
.dropdown-pd {
    grid-row-gap: 20px;
    border-radius: 12px;
    padding: 16px;
  }
.integration-icon {
    max-width: 30px;
  }
.cta-card-one {
    max-width: 200px;
  }
.login-wrapper {
    border-radius: 16px;
    max-width: 460px;
    padding: 20px;
  }
.checkout-header {
    margin-bottom: 14px;
    padding: 14px;
  }
.checkout-title {
    font-size: 24px;
  }
.checkout-input-field {
    height: 42px;
  }
.menu-button {
    width: 100%;
    max-width: 45px;
  }
.star-text {
    font-size: 9px;
  }
.cart-footer {
    padding-top: 24px;
    padding-bottom: 24px;
  }
.cart-container {
    min-width: 420px;
    max-width: 420px;
    padding-left: 20px;
    padding-right: 20px;
  }
.cart-wrapper {
    border-radius: 10px;
  }
.cart-footer-price {
    font-size: 22px;
  }
.cart-header {
    padding-top: 24px;
    padding-bottom: 24px;
  }
.cart-header-title {
    font-size: 28px;
  }
.custom-roadmaps-button-wrapper {
    padding-top: 24px;
  }
.integrations-card-image-wrapper {
    grid-column-gap: 15px;
    min-height: 200px;
  }
.buy-template-button.frosted-glass, .all-access-card.frosted-glass {
    border-top-right-radius: 1.4rem;
  }
}
@media screen and (max-width: 479px) {
body {
    --regular-text: 15px;
    --h1: 32px;
    --h2: 28px;
    --h3: 25px;
    --h4: 24px;
    --medium: 500;
    --h5: 20px;
    --h6: 20px;
    --regular-l: 16px;
    --_letter-spacing---line-height-regular: 25px;
    --_letter-spacing---line-height-heading: 116%;
    --_letter-spacing---h1: -1px;
    --_letter-spacing---h2: -.8px;
    --_letter-spacing---h3: -.6px;
    --_letter-spacing---line-height-regular-xl: 28px;
  }
h1 {
    letter-spacing: -1px;
  }
h2 {
    letter-spacing: -.8px;
  }
h3 {
    letter-spacing: -.6px;
  }
.page-container {
    grid-row-gap: 16px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }
.navbar {
    padding-top: 10px;
    padding-bottom: 10px;
    left: 10px;
    right: 10px;
  }
.section {
    padding-top: 50px;
    padding-bottom: 50px;
  }
.section.banner {
    padding-top: 100px;
  }
.section.inner-banner {
    padding-top: 110px;
    padding-bottom: 60px;
  }
.section.instant-insights-features, .section.fleet-access-features, .section.real-time-features, .section.team-collaboration {
    padding-top: 10px;
    padding-bottom: 10px;
  }
.section.about-us-banner {
    padding-top: 100px;
    padding-bottom: 60px;
  }
.section.login-section {
    padding-top: 100px;
  }
.nav-menu {
    padding: 16px;
  }
.primary-button {
    padding-top: 11px;
    padding-bottom: 11px;
  }
.primary-button.submit-button {
    background-position: 62%;
    border-radius: 8px;
    width: 100%;
    padding-left: 16px;
    padding-right: 35px;
    font-size: 15px;
    font-weight: 400;
  }
.primary-button.submit-button.password-protected {
    background-position: 60%;
  }
.primary-button-arrow {
    width: 100%;
    max-width: 10px;
  }
.container {
    padding-left: 10px;
    padding-right: 10px;
  }
.banner-typography {
    max-width: 360px;
  }
.banner-title-description {
    margin-bottom: 24px;
  }
.banner-title {
    letter-spacing: -1px;
    margin-bottom: 10px;
    font-size: 34px;
    line-height: 125%;
  }
.banner-description {
    font-size: 15px;
    line-height: 25px;
  }
.banner-form-single {
    grid-row-gap: 10px;
    flex-flow: wrap;
  }
.banner-form-text-field {
    border-radius: 8px;
    height: 46px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 15px;
  }
.banner-bottom-content {
    margin-bottom: 0;
  }
.banner-image-elements {
    max-width: 300px;
  }
.banner-image-flex-wrapper {
    min-height: 160px;
    padding-bottom: 5px;
  }
.banner-image-left-card {
    max-width: 150px;
    margin-top: auto;
  }
.banner-image-card-one {
    max-width: 80px;
    display: none;
  }
.banner-hero-image.one {
    max-width: 65px;
  }
.banner-hero-image.two {
    max-width: 75px;
  }
.banner-image-right-card {
    max-width: 124px;
  }
.banner-hero-image-card {
    max-width: 146px;
  }
.banner-hero-tag-wrapper {
    padding: 2px;
  }
.banner-hero-tag-text {
    padding: 6px 8px;
  }
.banner-hero-image-card-two.cta-two {
    max-width: 130px;
    top: 0;
  }
.banner-hero-tag-two {
    border-radius: 8px;
    padding: 2px;
  }
.banner-hero-tag-two-text {
    border-radius: 8px;
    padding: 6px;
  }
.banner-image-right-card-image-wrap, .banner-image-right-card-image-two {
    display: none;
  }
.banner-shape {
    max-width: 250px;
    top: 70px;
  }
.banner-plane-element-image {
    max-width: 120px;
    inset: 20px 0 auto -95px;
  }
.every-role-container {
    padding-left: 10px;
    padding-right: 10px;
  }
.section-title-wrapper, .section-title-wrapper.mb80px {
    margin-bottom: 35px;
  }
.section-title-wrapper.integration-section-title {
    max-width: 300px;
  }
.section-title-wrapper.pricing-plan-section-title {
    max-width: 280px;
  }
.section-title-wrapper.custom-roadmaps-section-title-wrapper {
    max-width: 320px;
  }
.section-title-wrapper.our-purpose, .section-title-wrapper.our-reach-title, .section-title-wrapper.job-post {
    max-width: 300px;
  }
.section-title {
    letter-spacing: -.3px;
  }
.section-title.white-color.testimonial {
    font-size: 25px;
  }
.section-title.our-leader {
    margin-bottom: 16px;
    font-size: 20px;
  }
.every-role-card-shape {
    border-width: 3px;
    border-radius: 8px;
    height: 90%;
  }
.every-role-card-content {
    grid-row-gap: 10px;
    margin-top: 3px;
    margin-left: 3px;
    margin-right: 3px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }
.every-role-card-typography {
    padding: 12px;
  }
.every-role-card-title {
    margin-bottom: 8px;
  }
.every-role-card-description {
    font-size: 14px;
    line-height: 24px;
  }
.every-role-card-description.one {
    max-width: 280px;
  }
.every-role-card-description.two {
    max-width: 300px;
  }
.every-role-card-description.three {
    width: 100%;
    max-width: 300px;
  }
.link-block-button.white {
    font-weight: 400;
  }
.footer-wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }
.footer-menu-single {
    width: auto;
    max-width: none;
  }
.footer-menu-list {
    grid-row-gap: 10px;
  }
.footer-menu-text-link {
    font-size: 15px;
    line-height: 100%;
  }
.cta-typography {
    max-width: 360px;
    margin-bottom: 40px;
  }
.cta-image-wrapper {
    max-width: 300px;
    min-height: 200px;
  }
.cta-image-content {
    max-width: 300px;
    height: 200px;
    padding-left: 0;
  }
.cta-app-image {
    max-width: 100px;
  }
.cta-box-image {
    max-width: 120px;
    height: 107.078px;
    bottom: -20px;
    right: 10px;
  }
.cta-location-icon {
    max-width: 24px;
    top: 80px;
    right: 120px;
  }
.cta-element-shape {
    display: none;
  }
.cta-element {
    left: 100px;
  }
.faq-content {
    grid-row-gap: 24px;
  }
.faq-section-title-wrapper {
    max-width: 300px;
  }
.faq-wrapper {
    border-radius: 10px;
  }
.faq-accordion-ans {
    font-size: 14px;
    line-height: 140%;
  }
.faq-accordion-title-wrap {
    align-items: flex-start;
  }
.faq-accordion-content-wrap {
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
.faq-accordion-title {
    font-size: 17px;
    line-height: 27px;
  }
.faq-icon-wrapper {
    max-width: 28px;
    height: 28px;
  }
.testimonial-section-title-wrapper {
    max-width: 300px;
  }
.testimonial-card {
    padding: 12px;
  }
.testimonial-author-name {
    font-weight: 400;
  }
.testimonial-card-description-text {
    font-size: 14px;
    line-height: 24px;
  }
.integration-bottom-content {
    grid-column-gap: 5px;
  }
.pricing-card {
    border-radius: 12px;
    padding: 12px;
  }
.pricing-name-description {
    margin-bottom: 20px;
  }
.pricing-name {
    margin-bottom: 5px;
  }
.pricing-short-details {
    line-height: 25px;
  }
.pricing-price-wrapper {
    margin-bottom: 20px;
  }
.discounted-price {
    font-size: 22px;
  }
.pricing-price {
    font-size: 30px;
  }
.pricing-list {
    grid-row-gap: 5px;
  }
.pricing-list.mb0 {
    margin-bottom: 0;
  }
.pricing-list-item-text {
    font-size: 15px;
    line-height: 25px;
  }
.pricing-tag {
    padding: 4px 8px;
  }
.roadmaps-tabs-menu-link {
    padding-top: 16px;
    padding-bottom: 16px;
  }
.roadmaps-tabs-menu-title {
    font-size: 18px;
  }
.roadmaps-tabs-menu-ans {
    font-size: 13px;
    line-height: 23px;
  }
.custom-roadmaps-image-card.roadmaps-unique-card {
    min-height: 300px;
  }
.roadmaps-unique-card-one {
    max-width: 210px;
    top: 20px;
    left: 15px;
  }
.roadmaps-unique-card-two {
    max-width: 180px;
    bottom: 20px;
    right: 15px;
  }
.manage-card {
    padding: 15px 10px;
  }
.manage-card-type {
    max-width: 270px;
  }
.manage-card-type-single.one {
    grid-row-gap: 100px;
    width: auto;
    max-width: none;
  }
.manage-card-type-single.two {
    grid-row-gap: 220px;
  }
.manage-card-type-single.three {
    grid-row-gap: 100px;
    width: auto;
    max-width: none;
  }
.manage-card-type-tag {
    padding: 4px;
  }
.manage-card-type-tag-icon {
    display: none;
  }
.manage-card-type-tag-text {
    font-size: 12px;
  }
.manage-card-type-shape {
    max-width: 150px;
    left: 0;
    right: 0;
  }
.manage-card-type-icon {
    max-width: 96px;
  }
.password-protected-title {
    letter-spacing: -.8px;
    font-size: 30px;
  }
.password-protected-description {
    font-size: 14px;
    line-height: 24px;
  }
.password-protected-form-flex {
    grid-row-gap: 15px;
    flex-flow: column;
  }
.inner-banner-content.mb90px {
    margin-bottom: 40px;
  }
.inner-banner-title-wrapper.feature-banner, .inner-banner-title-wrapper.about-banner-title {
    max-width: 300px;
  }
.inner-banner-title-wrapper.contact-us-banner {
    max-width: 380px;
  }
.inner-banner-title {
    letter-spacing: -.5px;
    font-size: 32px;
    line-height: 124%;
  }
.inner-banner-title.pricing-banner {
    max-width: 300px;
  }
.inner-banner-title.feature-banner-title {
    font-size: 30px;
  }
.features-title {
    letter-spacing: 0;
    font-size: 20px;
  }
.features-description {
    line-height: 25px;
  }
.features-list {
    grid-row-gap: 5px;
    margin-bottom: 24px;
    padding-left: 20px;
  }
.about-biffco-card {
    border-radius: 10px;
    padding: 12px;
  }
.about-biffco-card-icon-wrapper {
    max-width: 55px;
    height: 55px;
  }
.about-biffco-card-description {
    font-size: 14px;
  }
.trackers-connected-card {
    border-radius: 10px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px;
  }
.trackers-connected-card-typography {
    margin-bottom: 16px;
  }
.trackers-connected-card-text {
    font-size: 14px;
    line-height: 24px;
  }
.trackers-connected-card-icon-wrap {
    grid-column-gap: 5px;
  }
.trackers-connected-card-icon-single {
    margin-right: 0;
  }
.focusing-card {
    border-radius: 10px;
    min-height: auto;
    padding: 12px;
  }
.focusing-card-number {
    letter-spacing: 0;
  }
.about-top-trackers-right-card {
    border-radius: 10px;
    padding: 10px;
  }
.about-author-wrapper {
    padding: 10px;
  }
.our-purpose-description {
    line-height: 25px;
  }
.our-purpose-list {
    grid-row-gap: 5px;
    padding-left: 24px;
  }
.our-leader-image {
    border-radius: 10px;
  }
.our-leader-signature {
    font-size: 32px;
  }
.team-member-grid {
    grid-column-gap: 5px;
    grid-row-gap: 16px;
  }
.team-member-name {
    font-size: 17px;
    font-weight: 400;
    line-height: 25px;
  }
.team-member-text {
    font-size: 12px;
    line-height: 22px;
  }
.our-reach-map-image, .our-reach-map-image-shape {
    display: none;
  }
.our-reach-details-wrapper {
    grid-row-gap: 15px;
    flex-flow: wrap;
    position: static;
  }
.our-reach-details-line {
    display: none;
  }
.featured-blog-section-title {
    letter-spacing: -.2px;
  }
.featured-blog-left-card-image-wrap {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
.featured-blog-title-description {
    margin-bottom: 20px;
  }
.featured-blog-right-card-image-wrap {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
.featured-blog-right-card-typography {
    padding-top: 16px;
  }
.featured-blog-right-card-name {
    margin-bottom: 16px;
    font-size: 20px;
  }
.blog-image-wrapper {
    border-radius: 10px;
  }
.blog-post-name {
    max-width: 290px;
    font-size: 22px;
  }
.blog-details-image-wrapper {
    margin-bottom: 20px;
  }
.blog-details-image {
    border-radius: 10px;
  }
.blog-details-rich-content p {
    line-height: 25px;
  }
.blog-details-rich-content ul {
    grid-row-gap: 6px;
  }
.blog-details-rich-content blockquote {
    background-position: 10px 14px;
    background-size: 30px;
    padding: 10px 10px 10px 50px;
  }
.boost-card-title {
    margin-bottom: 10px;
  }
.table-of-content-card {
    padding: 16px;
  }
.table-of-content-list {
    padding-left: 20px;
  }
.table-of-content-list-text {
    font-size: 14px;
  }
.privacy-policy-rich-content h4 {
    font-size: 22px;
    line-height: 130%;
  }
.privacy-policy-rich-content li {
    line-height: 25px;
  }
.changelog-wrapper {
    grid-row-gap: 20px;
  }
.changelog-date-wrapper {
    margin-bottom: 16px;
  }
.changelog-card {
    border-radius: 12px;
    padding: 14px;
  }
.changelog-card-description {
    line-height: 25px;
  }
.integration-main-grid {
    grid-row-gap: 16px;
  }
.integration-main-card {
    border-radius: 12px;
    padding: 16px;
  }
.integration-main-card-icon {
    width: 100%;
    max-width: 52px;
  }
.integration-main-card-title-description {
    margin-bottom: 20px;
  }
.pricing-table-content {
    width: 800px;
  }
.pricing-details-description-card {
    border-radius: 12px;
    padding: 12px;
  }
.subscription-choices-title {
    margin-bottom: 5px;
  }
.subscription-choices-rich-content ul {
    grid-row-gap: 6px;
  }
.contact-us-details-card {
    border-radius: 10px;
    padding: 12px;
  }
.contact-us-details-card-grid {
    grid-template-columns: 1fr;
  }
.contact-us-details-card-single {
    min-height: 120px;
  }
.contact-us-details-form-wrapper {
    border-radius: 10px;
    padding: 12px;
  }
.contact-us-details-form-flex {
    grid-row-gap: 10px;
    flex-flow: column;
  }
.contact-us-form-input-field {
    height: 42px;
    padding: 10px;
  }
.contact-us-details-textarea {
    border-radius: 10px;
    min-height: 100px;
    padding: 10px;
  }
.style-guide-title-wrapper {
    border-radius: 10px;
    padding: 10px;
  }
.style-guide-color-palette {
    border-radius: 10px;
    min-height: 110px;
    padding: 10px;
  }
.style-guide-color-palette-name {
    font-size: 22px;
  }
.style-guide-color-palette-code {
    font-size: 16px;
  }
.style-guide-typography-card {
    border-radius: 10px;
    padding: 16px;
  }
.style-guide-typography-single {
    grid-column-gap: 10px;
  }
.style-guide-typography-single.none {
    display: none;
  }
.style-guide-button-wrapper {
    border-radius: 10px;
  }
.license-grid, .download-grid {
    grid-template-columns: 1fr;
  }
.hiring-details-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 6px;
  }
.hiring-details-text {
    font-size: 14px;
    line-height: 24px;
  }
.drives-us-section-title-wrapper {
    max-width: 260px;
  }
.drives-us-grid {
    grid-template-columns: 1fr 1fr;
  }
.drives-us-single {
    text-align: center;
  }
.drives-us-icon-wrapper {
    margin-left: auto;
    margin-right: auto;
  }
.drives-us-icon-wrapper.mb32 {
    margin-bottom: 16px;
  }
.drives-us-icon {
    max-width: 28px;
  }
.drives-us-description {
    font-size: 14px;
    line-height: 24px;
  }
.job-post-tab-menu {
    flex-flow: row;
    padding: 5px;
  }
.job-post-tab-link {
    padding: 8px 10px;
  }
.job-post-tab-link-icon {
    display: none;
  }
.why-join-us-grid {
    grid-template-columns: 1fr;
  }
.hiring-testimonial-card {
    padding: 16px;
  }
.hiring-testimonial-card-icon {
    width: 100%;
    max-width: 36px;
    margin-bottom: 20px;
  }
.hiring-testimonial-card-description {
    font-size: 18px;
    line-height: 140%;
  }
.hiring-testimonial-details-wrap {
    padding-bottom: 24px;
  }
.hiring-testimonial-author-logo {
    width: 100%;
    max-width: 140px;
  }
.dropdown-menu-text-link-text {
    font-size: 15px;
    line-height: 24px;
  }
.dropdown-pd {
    padding: 12px;
  }
.integration-icon {
    max-width: 24px;
  }
.cta-card-one {
    max-width: 160px;
    display: none;
  }
.login-wrapper {
    border-radius: 14px;
    max-width: 100%;
    padding: 16px;
  }
.login-form-wrapper {
    grid-row-gap: 16px;
  }
.login-form-input-field {
    height: 42px;
  }
.login-form-checkbox-text-link {
    grid-row-gap: 10px;
    flex-flow: wrap;
  }
.checkout-title {
    font-size: 22px;
  }
.checkout-content {
    padding: 12px;
  }
.checkout-input-field {
    height: 38px;
  }
.menu-button {
    max-width: 35px;
  }
.star-text {
    display: none;
  }
.cart-pack-text {
    font-size: 15px;
  }
.cart-remove-button {
    font-size: 16px;
  }
.cart-line-item {
    margin-bottom: 24px;
  }
.cart-container {
    border-radius: 0;
    min-width: 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
.cart-footer-subtotal-title, .cart-footer-price {
    font-size: 18px;
  }
.cart-header {
    padding-top: 20px;
    padding-bottom: 20px;
  }
.cart-quantity {
    font-size: 14px;
    top: 6px;
    left: 13px;
  }
.cart-header-title {
    letter-spacing: -1px;
    font-size: 28px;
  }
.every-role-single-card {
    min-height: 200px;
  }
.integrations-home-content {
    grid-row-gap: 20px;
  }
.integrations-card {
    padding: 16px 16px 20px;
  }
.integrations-card-image-wrapper {
    grid-column-gap: 8px;
    min-height: 140px;
  }
.integrations-card-logo {
    max-width: 80px;
  }
.integrations-card-integrations-pulse {
    width: 100%;
    max-width: 18px;
  }
.integrations-image {
    max-width: 80px;
  }
.buy-template-button.frosted-glass, .all-access-card.frosted-glass {
    border-radius: 10px;
  }
}
/* ======================================================================
   4. Components (hand-written)
   ====================================================================== */
/* ---------------------------------------------------------------------------
   Trackeo components — hand-written vanilla replacements for everything the
   Webflow runtime used to do (webflow.js widgets + IX2 interactions).

   Every value below comes from Trackeo's OWN ix2 payload (durations, easings, offsets, scales) or from its own design CSS, so the motion matches the export.
   Webflow's "outQuart" easing == cubic-bezier(.165, .84, .44, 1).

   NOTE: this layer loads AFTER the design layer, so it overrides it. Only add
   behaviour the runtime provided — never re-layout what the design already does.
   --------------------------------------------------------------------------- */

:root {
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-in-sine: cubic-bezier(.47, 0, .745, .715);
  --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
}
/* --- page intro (IX2 "0.4S Delay": opacity 0 -> 1, 400ms delay, 500ms) ----- */
.js body.page-fade { opacity: 0; }
.js body.page-fade.is-loaded { opacity: 1; transition: opacity .5s ease; }
html:not(.js) body.page-fade { opacity: 1; }
/* --- scroll reveals (IX2 presets slideInBottom / growIn / slideInLeft) ----- */
.js .reveal-up, .js .reveal-grow, .js .reveal-left {
  opacity: 0;
  transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart);
  will-change: opacity, transform;
}
.js .reveal-up { transform: translateY(100px); }
.js .reveal-grow { transform: scale(.75); }
.js .reveal-left { transform: translateX(-100px); }
.js .reveal-up.is-visible, .js .reveal-grow.is-visible, .js .reveal-left.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js .reveal-up, .js .reveal-grow, .js .reveal-left {
    opacity: 1; transform: none; transition: none;
  }
}
/* elements the runtime hid at rest (inline display:none) */
.is-hidden { display: none; }
/* The nav toggle, dropdown toggles and FAQ toggles were <div>s driven by
   webflow.js; they are real <button>s here. This strips the UA button chrome —
   and ONLY that. :where() contributes zero specificity, so every padding, background and layout value in the design layer still wins, even though this
   sheet loads after it. */
:where([data-nav-toggle], [data-dropdown-toggle], [data-accordion-toggle]) {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* The dropped widget base rules (.w-nav-brand, .w-nav-link, .w-dropdown-toggle, .w-tab-link) also carried `text-decoration: none`. Restore just that, on the
   elements that used them, or the browser default underlines the nav.
   (The footer logo/social/credit links ARE underlined in the original — leave
   those alone.) */
.navbar-logo, .nav-link, .tab-link, .cart-close-button, [data-dropdown-toggle] { text-decoration: none; }
/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar { z-index: 1000; }
/* replaces the dropped .w-nav-button base rule (the widget was JS-driven) */
.menu-button { display: none; }
.hamburger-svg { display: block; width: 100%; height: auto; }
.hamburger-line {
  stroke: var(--_colors---primary, #503217);
  stroke-width: 2.2;
  stroke-linecap: round;
  transform-origin: 16px 16px;
  transition: transform .35s var(--ease-out-quart), opacity .2s ease;
}
.menu-button[aria-expanded="true"] .hamburger-line.top { transform: translateY(5px) rotate(45deg); }
.menu-button[aria-expanded="true"] .hamburger-line.mid { opacity: 0; }
.menu-button[aria-expanded="true"] .hamburger-line.bot { transform: translateY(-5px) rotate(-45deg); }
@media screen and (max-width: 991px) {
.menu-button { display: block; }
.nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100vh - 140px);
    overflow: auto;
  }
.navbar.is-open .nav-menu { display: flex; }
}
/* ==========================================================================
   Nav dropdown (IX2 a-11 / a-12) — height 0 -> auto (200ms inOutQuad), opacity 200ms, arrow rotates -180deg (300ms).
   ========================================================================== */
[data-dropdown] { position: relative; display: inline-block; text-align: left; }
.dropdown-toggle-arrow {
  display: inline-block;
  transition: transform .3s ease;
}
[data-dropdown-toggle][aria-expanded="true"] .dropdown-toggle-arrow {
  transform: rotate(-180deg);
}
[data-dropdown-list] {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 900;
  display: none;
  height: 0;
  opacity: 0;
  transition: height .2s var(--ease-in-out-quad), opacity .2s ease .2s;
}
[data-dropdown-list].is-open { display: block; }
[data-dropdown-list].is-open.is-shown { opacity: 1; }
@media screen and (max-width: 991px) {
[data-dropdown] { display: block; width: 100%; }
[data-dropdown-list] { position: static; }
}
/* ==========================================================================
   FAQ accordion (IX2 a-3 / a-4) — panel height 0 -> auto + fade, icon +45deg
   ========================================================================== */
[data-accordion-panel] {
  display: none;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height .5s ease, opacity .5s ease;
}
[data-accordion-panel].is-open { display: block; }
[data-accordion-panel].is-open.is-shown { opacity: 1; }
.faq-plus { transition: transform .3s ease; }
[data-accordion-toggle][aria-expanded="true"] .faq-plus { transform: rotate(45deg); }
/* ==========================================================================
   Tabs (roadmaps / features / hiring)
   ========================================================================== */
.tabs { position: relative; }
.tab-menu { position: relative; }
.tab-content { position: relative; display: block; overflow: hidden; }
.tab-pane { position: relative; display: none; }
.tab-pane.is-active { display: block; }
.tab-link { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* IX2 a-6 / a-7: answer height 0 -> auto (300ms), title colour .7 -> 1 alpha */
.roadmaps-tabs-menu-ans-wrap {
  height: 0;
  overflow: hidden;
  transition: height .3s ease;
}
.roadmaps-tabs-menu-link[aria-current="page"] .roadmaps-tabs-menu-ans-wrap { height: auto; }
.roadmaps-tabs-menu-title { transition: color .3s ease; }
.roadmaps-tabs-menu-link[aria-current="page"] .roadmaps-tabs-menu-title {
  color: var(--_colors---primary, #503217);
}
/* ==========================================================================
   Slider (hiring testimonials)
   ========================================================================== */
[data-slider] { position: relative; }
[data-slider-mask] { position: relative; overflow: hidden; width: 100%; }
.slider-track {
  display: flex;
  transition: transform .5s var(--ease-out-quart);
  will-change: transform;
}
[data-slide] { flex: 0 0 100%; width: 100%; white-space: normal; text-align: left; }
/* the design positions the dot row with `inset: auto auto -48px`, which needs the
   `position: absolute` the dropped .w-slider-nav base rule used to supply */
[data-slider-nav] {
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.slider-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #5032174d;
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}
.slider-dot.is-active {
  width: 26px;
  border-radius: 6px;
  background-color: var(--_colors---primary, #503217);
}
.slider-dot:focus-visible {
  outline: 2px solid var(--_colors---primary, #503217);
  outline-offset: 3px;
}
/* ==========================================================================
   Hovers the runtime used to drive
   ========================================================================== */

/* IX2 a / a-2 — primary button label roll (hover-in 0 -> -200%, hover-out 200% -> 0) */
.primary-button-single { transition: transform .3s var(--ease-in-sine); }
.primary-button-single.hover-out { transform: translateY(200%); }
.primary-button:hover .primary-button-single.hover-in { transform: translateY(-200%); }
.primary-button:hover .primary-button-single.hover-out { transform: translateY(0); }
/* The design slides footer links right on hover with `padding-left: 10px`. The
   menu row is a content-sized flex row, so growing the widest link in a column
   can widen that column and nudge its neighbours. Same 10px slide, expressed as
   a transform, so the row can never reflow. */
.footer-menu-text-link { display: inline-block; }
.footer-menu-text-link:hover { padding-left: 0; transform: translateX(10px); }
/* IX2 a-32 / a-33 — link-block underline sweeps 0% -> 100% */
.link-block-button-line { width: 0; transition: width .3s var(--ease-in-out-quad); }
.link-block-button:hover .link-block-button-line { width: 100%; }
/* IX2 a-17 / a-18 — "every role" card frame grows 435px -> 490px */
.every-role-card-shape { transition: height .3s var(--ease-in-out-quad); }
.every-role-single-card:hover .every-role-card-shape, .every-role-card:hover .every-role-card-shape { height: 490px; }
/* IX2 a-24..a-29 — card images zoom to 1.1 on card hover */
.featured-blog-left-card-image-wrap, .featured-blog-right-card-image-wrap, .blog-image-wrapper { overflow: hidden; }
.featured-blog-left-card-image, .featured-blog-right-card-image, .blog-image { transition: transform .6s var(--ease-out-quart); }
.featured-blog-left-card:hover .featured-blog-left-card-image, .featured-blog-right-card:hover .featured-blog-right-card-image, .blog-single:hover .blog-image { transform: scale(1.1); }
/* ==========================================================================
   Looping ambient motion (IX2 a-20 / a-21 / a-23, all PAGE_START loops)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* a-20 "Manage Card": tags + icon pulse 1 -> .9 -> 1 */
  .manage-card-type-tag,
  .manage-card-type-icon { animation: trk-pulse 1.4s ease-in-out infinite; }

  /* a-21 "Integration Icon": 1 -> .8 -> 1 over 2.2s */
  .integration-icon { animation: trk-breathe 2.2s ease-in-out infinite; }

  /* a-23 "CTA Card": the floating collage drifts on a 4s cycle */
  .cta-app-image { animation: trk-float-up 4s ease-in-out infinite; }
  .cta-card-one { animation: trk-float-up-sm 4s ease-in-out infinite; }
  .banner-hero-image-card-two.cta-two { animation: trk-float-down 4s ease-in-out infinite; }
  .cta-box-image { animation: trk-drift 4s ease-in-out infinite; }
  .cta-location-icon { animation: trk-breathe-sm 4s ease-in-out infinite; }
  .cta-element { animation: trk-spin 4s linear infinite; }
  .cta-element-shape { animation: trk-rock 4s ease-in-out infinite; }
}
@keyframes trk-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(.9); }
}
@keyframes trk-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(.8); }
}
@keyframes trk-breathe-sm {
0%, 100% { transform: scale(1.1); }
50% { transform: scale(1); }
}
@keyframes trk-float-up {
0%, 100% { transform: translateY(-50px); }
50% { transform: translateY(0); }
}
@keyframes trk-float-up-sm {
0%, 100% { transform: translateY(-35px); }
50% { transform: translateY(0); }
}
@keyframes trk-float-down {
0%, 100% { transform: translateY(50px); }
50% { transform: translateY(0); }
}
@keyframes trk-drift {
0%, 100% { transform: translate(-20px, -30px); }
50% { transform: translate(0, 0); }
}
@keyframes trk-spin {
0% { transform: translateX(30px) rotate(0deg); }
100% { transform: translateX(0) rotate(360deg); }
}
@keyframes trk-rock {
0%, 100% { transform: rotate(-25deg); }
50% { transform: rotate(0deg); }
}
/* IX2 a-16 — hero collage follows the pointer (main.js sets --px on the section) */
.banner-image-card-one { transform: translateX(calc(25px * var(--px, 1))); }
.banner-hero-image-card { transform: translateY(calc(-40px * var(--px, 1))); }
.banner-hero-image-card-two:not(.cta-two) { transform: translateX(calc(-30px * var(--px, 1))); }
.banner-image-right-card-image-wrap {
  transform: translate(calc(20px * var(--px, 1)), calc(-29px * var(--px, 1)));
}
.banner-element {
  transform: translateX(calc(-35px * var(--px, 1))) rotate(calc(360deg * (1 - var(--px, 1))));
}
.banner-image-card-one, .banner-hero-image-card, .banner-hero-image-card-two:not(.cta-two), .banner-image-right-card-image-wrap, .banner-element { transition: transform .6s ease-out; }
/* ==========================================================================
   MDX blog bodies
   ========================================================================== */
/* Markdown wraps blockquote text in a <p>, which the HTML export did not have.
   `.blog-details-rich-content p` would otherwise recolour and re-space the
   quote, so let that paragraph inherit the blockquote's own typography. */
.blog-details-rich-content blockquote p {
  color: inherit;
  font: inherit;
  line-height: inherit;
  margin: 0;
}

/* ==========================================================================
   Cart (localStorage) — the design's own markup, re-driven by main.js
   ========================================================================== */
[data-cart-modal] { display: none; }
/* `flex`, not `block`: this selector outranks
   .wf-commerce-commercecartcontainerwrapper--cartType-modal, which is what
   centres the panel over the backdrop. `block` left it pinned top-left. */
[data-cart-modal].is-open { display: flex; }
.cart-quantity-wrap { display: flex; }
[data-cart-count] { min-width: 1em; text-align: center; }
.cart-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #50321714;
}
.cart-list-item:last-child { border-bottom: 0; }
.cart-list-item-image {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background-color: var(--_colors---card-bg, #f3f3f3);
}
.cart-list-item-info { flex: 1; min-width: 0; }
.cart-list-item-name {
  color: var(--_colors---primary, #503217);
  font-weight: 500;
  line-height: 1.35;
}
.cart-list-item-price { color: var(--_colors---body, #5b5b5b); font-size: 14px; }
.cart-list-item-qty { display: flex; align-items: center; gap: 8px; }
.cart-qty-button {
  width: 24px;
  height: 24px;
  border: 1px solid #50321733;
  border-radius: 6px;
  background: none;
  color: var(--_colors---primary, #503217);
  cursor: pointer;
  line-height: 1;
}
.cart-qty-button:hover { background-color: var(--_colors---card-bg, #f3f3f3); }
.cart-remove-button {
  border: 0;
  background: none;
  padding: 0 0 0 6px;
  color: var(--_colors---body, #5b5b5b);
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
}
/* checkout / order summary rows */
.summary-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #50321714;
}
.summary-item:last-child { border-bottom: 0; }
.summary-item-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  background-color: var(--_colors---card-bg, #f3f3f3);
}
.summary-item-info { flex: 1; min-width: 0; }
.summary-item-name { color: var(--_colors---primary, #503217); font-weight: 500; }
.summary-item-meta { color: var(--_colors---body, #5b5b5b); font-size: 14px; }
.summary-item-price { color: var(--_colors---primary, #503217); font-weight: 500; }
/* ==========================================================================
   Forms (demo submit handled in main.js)
   ========================================================================== */
[data-form-done], [data-form-fail] { display: none; }
[data-form-done].is-shown, [data-form-fail].is-shown { display: block; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--_colors---primary, #503217);
  outline-offset: 1px;
}
/* keyboard focus for the controls the runtime used to own */
[data-dropdown-toggle]:focus-visible, [data-accordion-toggle]:focus-visible, [data-nav-toggle]:focus-visible, .tab-link:focus-visible {
  outline: 2px solid var(--_colors---primary, #503217);
  outline-offset: 3px;
}