/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/ReviewSubmitPage.vue?vue&type=style&index=0&id=780d0e6d&scoped=true&lang=scss&global=true ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&family=DM+Sans:wght@400;500;700&display=swap);
/*!************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/Index.vue?vue&type=style&index=0&id=34dde848&lang=scss&global=true ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&family=DM+Sans:wght@400;500;700&display=swap);
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/TextColumns.vue?vue&type=style&index=0&id=1d6d71e5&lang=scss&scoped=true ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.text-columns[data-v-1d6d71e5] {
  display: flex;
  justify-content: center;
  padding: 4rem 0;
}
@media (min-width: 768px) {
.text-columns[data-v-1d6d71e5] {
    padding: 4rem 0;
}
}
@media (min-width: 1024px) {
.text-columns[data-v-1d6d71e5] {
    padding: 8rem 0 4rem 0;
    gap: 0;
}
}
.text-columns.secondary[data-v-1d6d71e5] {
  background-color: var(--color-secondary-bg);
}
.text-columns.single .headline[data-v-1d6d71e5] {
  grid-column: 1/-1;
}
.text-columns .headline[data-v-1d6d71e5] {
  grid-column: 1/-1;
  margin-bottom: 0.5rem;
}
@media (min-width: 1024px) {
.text-columns .headline[data-v-1d6d71e5] {
    grid-column: 1/span 5;
    margin-bottom: 0;
}
}
.text-columns .body[data-v-1d6d71e5] {
  grid-column: 1/-1;
}
@media (min-width: 1024px) {
.text-columns .body[data-v-1d6d71e5] {
    grid-column: 7/span 6;
}
}
.text-columns .body[data-v-1d6d71e5] {
  display: flex;
  padding: 0.25rem 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.25rem;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
.examples-hero .text-columns[data-v-1d6d71e5] {
    padding-bottom: 6.4375rem;
}
}
@media (min-width: 1024px) {
.examples-hero .text-columns .headline[data-v-1d6d71e5] {
    grid-column: 1/span 6;
}
}
@media (min-width: 1024px) {
.examples-hero .text-columns .body[data-v-1d6d71e5] {
    grid-column: 7/span 5;
}
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/Features.vue?vue&type=style&index=0&id=f09827d0&lang=scss&global=true ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.features {
  display: flex;
  justify-content: center;
  overflow: visible;
  padding: 0 0 48px;
}
.features-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1260px;
  padding: 0 24px;
  box-sizing: border-box;
  overflow: visible;
}
@media (min-width: 768px) {
.features-wrapper {
    gap: 32px;
    padding: 0 2rem;
}
}
@media (min-width: 1024px) {
.features-wrapper {
    gap: 40px;
    padding: 0 72px;
}
}
.feature-card {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: 1.5rem;
  background-color: var(--Asphalt-15);
}
@media (min-width: 768px) {
.feature-card {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 44%);
    min-height: 532px;
}
}
@media (min-width: 1024px) {
.feature-card {
    position: sticky;
    top: 104px;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 48%);
    height: 532px;
    transform: scale(var(--feature-card-scale, 1));
    transform-origin: top center;
    will-change: transform;
}
.feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--Asphalt-100);
    opacity: var(--feature-card-overlay-opacity, 0);
    pointer-events: none;
}
}
@media (min-width: 1280px) {
.feature-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.feature-card:nth-child(1) {
  z-index: 1;
}
.feature-card:nth-child(2) {
  z-index: 2;
}
.feature-card:nth-child(3) {
  z-index: 3;
}
.feature-card:nth-child(4) {
  z-index: 4;
}
.feature-text {
  order: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 320px;
  padding: 32px;
}
@media (min-width: 768px) {
.feature-text {
    order: 1;
    min-height: 0;
    padding: 40px;
}
}
@media (min-width: 1280px) {
.feature-text {
    padding: 3.5rem;
}
}
.feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border: 0.5px solid var(--Asphalt-100);
  border-radius: 8px;
  color: var(--Asphalt-100);
  font-family: var(--font-headline-family);
  font-size: 12px;
  font-weight: 450;
  line-height: 1;
}
.feature-chip-mark {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background-color: var(--Asphalt-100);
}
.feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  flex: 1;
  width: 100%;
  max-width: 600px;
  gap: 0.75rem;
}
.feature-copy .h4,
.feature-copy .b2 {
  margin: 0;
  width: 100%;
}
.feature-copy .b2 {
  max-width: none;
  color: var(--Asphalt-50);
}
.feature-copy button {
  margin-top: 1rem;
  color: var(--Asphalt-50);
}
.feature-visual {
  position: relative;
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 532px;
  min-height: 280px;
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--Asphalt-20);
  background-image: radial-gradient(var(--Asphalt-30) 1px, transparent 1px);
  background-size: 16px 16px;
}
@media (min-width: 768px) {
.feature-visual {
    order: 2;
    min-height: 100%;
    justify-self: end;
}
}
.feature-visual picture,
.feature-visual img,
.feature-visual video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-visual picture {
  overflow: hidden;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/icons/UXfolioLogoIcon.vue?vue&type=style&index=0&id=79d25537&lang=scss&scoped=true ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
svg path[data-v-79d25537] {
  fill: var(--color-banner-text);
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/Imprint.vue?vue&type=style&index=0&id=87a9e36a&lang=scss&scoped=true ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************/
.legal-information[data-v-87a9e36a] {
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding-bottom: calc(2 * var(--gridRow));
}
.legal-information .item-1 .box[data-v-87a9e36a] {
  justify-content: center;
}
.legal-information .item-2 h3[data-v-87a9e36a], .legal-information .item-2 p[data-v-87a9e36a], .legal-information .item-2 ul[data-v-87a9e36a] {
  margin-bottom: 1.5rem;
}
.legal-information .item-2 li[data-v-87a9e36a]::marker {
  color: var(--color-text);
}
.legal-information .item-2 li p[data-v-87a9e36a] {
  margin-bottom: 0;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/TermsAndConditions.vue?vue&type=style&index=0&id=626b39d6&lang=scss&scoped=true ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.legal-information[data-v-626b39d6] {
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding-bottom: calc(2 * var(--gridRow));
}
.legal-information .item-1 .box[data-v-626b39d6] {
  justify-content: center;
}
.legal-information .item-2 h3[data-v-626b39d6], .legal-information .item-2 p[data-v-626b39d6], .legal-information .item-2 ul[data-v-626b39d6] {
  margin-bottom: 1.5rem;
}
.legal-information .item-2 li[data-v-626b39d6]::marker {
  color: var(--color-text);
}
.legal-information .item-2 li p[data-v-626b39d6] {
  margin-bottom: 0;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/PrivacyPolicy.vue?vue&type=style&index=0&id=54e2adc8&lang=scss&scoped=true ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************/
.legal-information[data-v-54e2adc8] {
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding-bottom: calc(2 * var(--gridRow));
}
.legal-information .item-1 .box[data-v-54e2adc8] {
  justify-content: center;
}
.legal-information .item-2 h3[data-v-54e2adc8], .legal-information .item-2 p[data-v-54e2adc8], .legal-information .item-2 ul[data-v-54e2adc8] {
  margin-bottom: 1.5rem;
}
.legal-information .item-2 li[data-v-54e2adc8]::marker {
  color: var(--color-text);
}
.legal-information .item-2 li p[data-v-54e2adc8] {
  margin-bottom: 0;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/Input.vue?vue&type=style&index=0&id=5746a87f&lang=scss&scoped=true ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo-input[data-v-5746a87f] {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 4px;
}
.inside-label[data-v-5746a87f] {
  font: var(--font-b2);
  font-size: 12px;
  height: 22px;
  line-height: 1;
  display: none;
  color: var(--color-form-elem-label);
}
.inside-label.focus[data-v-5746a87f] {
  color: var(--color-form-elem-label-focus);
  position: absolute;
  font-size: 12px;
  display: block;
  left: 1rem;
  top: 8px;
}
input[data-v-5746a87f] {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  margin: 0;
  font: var(--font-b2);
  font-size: 14px;
  height: 48px;
  padding: 0 1rem;
  background-color: var(--color-bg);
  border: solid 2px var(--color-form-elem-border);
  color: var(--color-form-elem-text);
}
input[data-v-5746a87f]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--color-form-elem-text);
  opacity: 1; /* Firefox */
}
input[data-v-5746a87f]:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--color-form-elem-text);
}
input[data-v-5746a87f]::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--color-form-elem-text);
}
input[data-v-5746a87f]:hover {
  color: var(--color-form-elem-text-hover);
  border-color: var(--color-form-elem-border-hover);
}
input[data-v-5746a87f]:focus {
  color: var(--color-form-elem-text-focus);
  border-color: var(--color-form-elem-border-focus);
  outline: none;
}
input.down[data-v-5746a87f] {
  padding-bottom: 8px;
  padding-top: 23px;
}
input[readonly][data-v-5746a87f] {
  background-color: var(--color-form-elem-bg-disabled);
  border-color: var(--color-form-elem-border-disabled);
  color: var(--color-form-elem-text-disabled);
  cursor: pointer;
}
input[readonly][data-v-5746a87f]:focus {
  border-color: var(--color-form-elem-border-focus);
}
input[disabled][data-v-5746a87f] {
  color: var(--color-form-elem-text-disabled);
  background-color: var(--color-form-elem-bg-disabled);
  border-color: var(--color-form-elem-border-disabled);
  cursor: not-allowed;
}
input.alert[data-v-5746a87f] {
  border-color: var(--color-form-elem-border-error);
}
input[type=number][data-v-5746a87f] {
  padding: 0 28px 0 12px;
  /* Chrome, Safari, Edge, Opera */
}
input[type=number][data-v-5746a87f]::-webkit-outer-spin-button, input[type=number][data-v-5746a87f]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number][data-v-5746a87f] {
  /* Firefox */
  -moz-appearance: textfield;
}
.assist[data-v-5746a87f] {
  font: var(--font-b2);
  font-size: 12px;
  margin-top: 8px;
}
.alert-message[data-v-5746a87f] {
  font: var(--font-b2);
  font-size: 12px;
  margin-top: 8px;
  padding-left: 18px;
  color: var(--color-form-elem-border-error);
}
.feedback[data-v-5746a87f] {
  font: var(--font-b2);
  font-size: 12px;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}
.feedback .success[data-v-5746a87f] {
  color: var(--Success60);
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/FaqSection.vue?vue&type=style&index=0&id=78f0810a&lang=scss&scoped=true ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.faq-section[data-v-78f0810a] {
  padding: 96px 0;
  background-color: var(--Asphalt-20);
}
.faq-section-wrapper[data-v-78f0810a] {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
.faq-section-wrapper[data-v-78f0810a] {
    padding: 0 2rem;
}
}
@media (min-width: 1024px) {
.faq-section-wrapper[data-v-78f0810a] {
    padding: 0 72px;
}
}
.faq-section-layout[data-v-78f0810a] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1024px) {
.faq-section-layout[data-v-78f0810a] {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 4rem;
}
}
.faq-section-intro[data-v-78f0810a] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.faq-section-intro .h4[data-v-78f0810a] {
  margin: 0;
  font-weight: 400;
  color: var(--Asphalt-100);
}
.faq-section-heading-highlight[data-v-78f0810a] {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.faq-section-heading-highlight-text[data-v-78f0810a] {
  position: relative;
  z-index: 1;
}
.faq-section-heading-highlight img[data-v-78f0810a] {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: auto;
  margin-top: calc(-0.35em + 2px);
  pointer-events: none;
  z-index: 0;
}
.faq-section-list[data-v-78f0810a] {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.faq-section-list-item[data-v-78f0810a] {
  border-top: 1px solid var(--Asphalt-30);
}
.faq-section-list-item[data-v-78f0810a]:first-child {
  border-top: none;
}
.faq-section-question[data-v-78f0810a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 0;
  text-align: left;
  cursor: pointer;
  gap: 1.5rem;
}
.faq-section-question .h6[data-v-78f0810a] {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-weight: 400;
  color: var(--Asphalt-100);
  text-align: left;
}
.faq-section-list-item.is-open > .faq-section-question[data-v-78f0810a] {
  padding: 24px 0 16px;
}
.faq-section-icon[data-v-78f0810a] {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--Asphalt-100);
}
.faq-section-icon svg[data-v-78f0810a] {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 24px;
  height: 24px;
  transition: opacity 200ms ease, transform 200ms ease;
}
.faq-section-icon .faq-section-icon-add[data-v-78f0810a] {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.faq-section-icon .faq-section-icon-remove[data-v-78f0810a] {
  opacity: 0;
  transform: rotate(-90deg) scale(0.85);
}
.faq-section-icon.is-open .faq-section-icon-add[data-v-78f0810a] {
  opacity: 0;
  transform: rotate(90deg) scale(0.85);
}
.faq-section-icon.is-open .faq-section-icon-remove[data-v-78f0810a] {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.faq-section-answer[data-v-78f0810a] {
  padding: 0 0 24px;
  text-align: left;
}
.faq-section-answer .b3[data-v-78f0810a] {
  margin: 0;
  color: var(--Asphalt-50);
}
.faq-section-answer .b3[data-v-78f0810a] p {
  margin: 0 0 16px;
}
.faq-section-answer .b3[data-v-78f0810a] p:last-child {
  margin-bottom: 0;
}
.faq-section-answer .b3[data-v-78f0810a] a {
  color: var(--Asphalt-100);
  text-decoration: underline;
}
.faq-answer-enter-active[data-v-78f0810a],
.faq-answer-leave-active[data-v-78f0810a] {
  overflow: hidden;
  transition: max-height 220ms ease, opacity 220ms ease, padding-bottom 220ms ease, transform 220ms ease;
}
.faq-answer-enter-from[data-v-78f0810a],
.faq-answer-leave-to[data-v-78f0810a] {
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
  transform: translateY(-0.5rem);
}
.faq-answer-enter-to[data-v-78f0810a],
.faq-answer-leave-from[data-v-78f0810a] {
  max-height: 20rem;
  opacity: 1;
  padding-bottom: 24px;
  transform: translateY(0);
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/TextArea.vue?vue&type=style&index=0&id=696d4696&lang=scss&scoped=true ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ufo-textarea[data-v-696d4696] {
  --focusBorderColor: var(--Asphalt);
  --labelColor: var(--Asphalt-60, #484747);
  --textColor: var(--Asphalt-70, #3D3D3D);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  font: var(--font-b2);
  font-size: 14px;
  background-color: var(--color-bg);
  border: solid 2px var(--color-form-elem-border);
  color: var(--color-form-elem-text);
}
.ufo-textarea.focus[data-v-696d4696] {
  color: var(--color-form-elem-text-focus);
  border-color: var(--color-form-elem-border-focus);
}
.ufo-textarea.focus label[data-v-696d4696] {
  color: var(--color-form-elem-label-focus);
}
.ufo-textarea[data-v-696d4696]:hover:not(.focus) {
  color: var(--color-form-elem-text-hover);
  border-color: var(--color-form-elem-border-hover);
}
.ufo-textarea.error[data-v-696d4696] {
  border-color: var(--color-form-elem-border-error);
}
.ufo-textarea.disabled[data-v-696d4696] {
  cursor: not-allowed;
  color: var(--color-form-elem-text-disabled);
  background-color: var(--color-form-elem-bg-disabled);
  border-color: var(--color-form-elem-border-disabled);
}
.ufo-textarea .disabled[data-v-696d4696] {
  cursor: not-allowed;
  color: var(--color-form-elem-text-disabled);
  background-color: var(--color-form-elem-bg-disabled);
  border-color: var(--color-form-elem-border-disabled);
}
.inside-label[data-v-696d4696] {
  font: var(--font-b2);
  font-size: 14px;
  height: 22px;
  line-height: 1;
  color: var(--color-form-elem-label);
  padding: 0.5rem 1rem 0 1rem;
  margin-bottom: 0;
}
.inside-label.focus[data-v-696d4696] {
  color: var(--color-form-elem-label-focus);
  font-size: 12px;
}
textarea[data-v-696d4696] {
  font: var(--font-b2);
  font-size: 14px;
  background-color: var(--color-bg);
  border: none;
  color: var(--color-form-elem-text);
  line-height: 1.24;
  padding: 4px 16px 16px;
  height: 100%;
}
textarea[data-v-696d4696]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--color-form-elem-text);
  opacity: 1; /* Firefox */
}
textarea[data-v-696d4696]:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--color-form-elem-text);
}
textarea[data-v-696d4696]::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--color-form-elem-text);
}
textarea[data-v-696d4696]:focus {
  outline: none;
}
.alert-message[data-v-696d4696] {
  font: var(--font-b2);
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-top: 6px;
  color: var(--color-form-elem-border-error);
}
.text-area-container[data-v-696d4696] {
  padding-bottom: 23px;
  width: 100%;
  height: 100%;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/icons/SubscriptionPlanIcons.vue?vue&type=style&index=0&id=471dcde1&lang=scss&scoped=true ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
svg path[data-v-471dcde1] {
  fill: var(--color-text);
  stroke: var(--color-text);
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/Hero.vue?vue&type=style&index=0&id=4ad7ea56&lang=scss&scoped=true ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/
.hero[data-v-4ad7ea56] {
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  height: 43rem;
  max-height: 43rem;
  padding-bottom: 0;
}
@media (min-width: 768px) {
.hero[data-v-4ad7ea56] {
    height: 48rem;
    max-height: 48rem;
}
}
@media (min-width: 1024px) {
.hero[data-v-4ad7ea56] {
    height: min(max(100dvh - 5.75rem, 50rem), 54rem);
}
}
.hero > .content[data-v-4ad7ea56],
.hero .grid-20[data-v-4ad7ea56] {
  height: 100%;
}
.hero .tagline[data-v-4ad7ea56] {
  grid-column: 1/-1 !important;
  grid-row-start: 2 !important;
  justify-self: center;
  width: 100%;
}
.hero .tagline .box[data-v-4ad7ea56] {
  align-items: center;
  background-color: transparent;
}
.hero .tagline h1[data-v-4ad7ea56] {
  text-align: center;
  margin: 0 auto;
}
.hero .tagline .hero-highlight[data-v-4ad7ea56] {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.hero .tagline .hero-highlight img[data-v-4ad7ea56] {
  position: absolute;
  left: 50%;
  bottom: -0.12em;
  width: 115%;
  max-width: none;
  transform: translateX(-50%);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: hero-marker-draw-4ad7ea56 700ms cubic-bezier(0.16, 1, 0.3, 1) 1700ms forwards;
  pointer-events: none;
}
.hero .tagline .hero-highlight-text[data-v-4ad7ea56] {
  position: relative;
  z-index: 1;
}
.hero .tagline .box-content[data-v-4ad7ea56] {
  max-width: 56rem;
  margin: 0 auto;
  opacity: 0;
  animation: hero-content-rise-4ad7ea56 700ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}
@media (min-width: 1024px) {
.hero .tagline[data-v-4ad7ea56] {
    grid-column: 1/-1 !important;
}
}
.hero .cta[data-v-4ad7ea56] {
  --rowStart: calc( var(--grid-first-item-row-end) + 3);
  grid-column: 1/-1;
  grid-row: var(--rowStart)/span 1;
  justify-self: center;
  z-index: 1;
  align-self: center;
  justify-content: center;
  transform: translateY(calc(var(--gridRow) * -0.5));
  border-left: solid 0.5px transparent;
  border-right: solid 0.5px transparent;
}
.hero .cta button[data-v-4ad7ea56] {
  width: auto;
  opacity: 0;
  animation: hero-content-rise-4ad7ea56 700ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}
@media (min-width: 480px) {
.hero.v2 .tagline h1[data-v-4ad7ea56], .hero.v3 .tagline h1[data-v-4ad7ea56] {
    max-width: 90%;
}
}
@media (min-width: 558px) {
.hero.v2 .tagline h1[data-v-4ad7ea56], .hero.v3 .tagline h1[data-v-4ad7ea56] {
    max-width: 100%;
}
}
@media (min-width: 1264px) {
.hero.v2 .tagline h1[data-v-4ad7ea56], .hero.v3 .tagline h1[data-v-4ad7ea56] {
    max-width: 90%;
}
}
.hero .hero-portfolio-cards[data-v-4ad7ea56] {
  position: absolute;
  left: 50%;
  top: calc(50% + 6.5rem);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: min(90vw, 82rem);
  height: clamp(16rem, 28vw, 26rem);
  pointer-events: auto;
  opacity: 0;
  animation: hero-cards-rise-4ad7ea56 850ms cubic-bezier(0.16, 1, 0.3, 1) 950ms forwards;
}
.hero .portfolio-card[data-v-4ad7ea56] {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(17rem, 30vw, 28rem);
  box-sizing: border-box;
  overflow: hidden;
  border: 6px solid var(--asphalt10, #FEFEFE);
  border-radius: 20px;
  box-shadow: 0 1.25rem 3rem rgba(15, 15, 15, 0.14), 0 0.25rem 0.75rem rgba(15, 15, 15, 0.08);
  backface-visibility: hidden;
  cursor: default;
  pointer-events: auto;
  transform-origin: center bottom;
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1), z-index 0ms linear 120ms;
  will-change: transform;
}
.hero .portfolio-card.v5-position-left[data-v-4ad7ea56],
.hero .portfolio-card.v5-position-right[data-v-4ad7ea56] {
  cursor: pointer;
}
.hero .portfolio-card.v5-position-center[data-v-4ad7ea56] {
  cursor: default;
  pointer-events: none;
}
.hero .portfolio-card img[data-v-4ad7ea56] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero .portfolio-card.v5-position-left[data-v-4ad7ea56] {
  z-index: 1;
  transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
.hero .portfolio-card.v5-position-center[data-v-4ad7ea56] {
  z-index: 4;
  transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
.hero .portfolio-card.v5-position-right[data-v-4ad7ea56] {
  z-index: 2;
  transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
.hero .portfolio-card.side[data-v-4ad7ea56] {
  width: clamp(17rem, 30vw, 28rem);
}
@media (max-width: 767px) {
.hero .hero-portfolio-cards[data-v-4ad7ea56] {
    top: calc(50% + 5.5rem);
    height: 17rem;
    width: 150vw;
}
.hero .portfolio-card[data-v-4ad7ea56] {
    width: 18rem;
}
.hero .portfolio-card.side[data-v-4ad7ea56] {
    width: 18rem;
}
}
@keyframes hero-card-left-4ad7ea56 {
0%, 22.66%, 100% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
22.67% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
33.33%, 55.99% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
56% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
66.66%, 89.32% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
89.33% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
99.9% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
}
@keyframes hero-card-center-4ad7ea56 {
0%, 22.66%, 100% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
22.67% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
33.33%, 55.99% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
56% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
66.65% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
66.66%, 89.32% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
89.33% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
}
@keyframes hero-card-right-4ad7ea56 {
0%, 22.66%, 100% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
22.67% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
33.32% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
33.33%, 55.99% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
56% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
66.66%, 89.32% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
89.33% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
}
@keyframes hero-content-rise-4ad7ea56 {
from {
    opacity: 0;
    transform: translateY(1.5rem);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@keyframes hero-cards-rise-4ad7ea56 {
from {
    opacity: 0;
    transform: translateX(-50%) translateY(4rem);
}
to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
}
@keyframes hero-marker-draw-4ad7ea56 {
from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
}
to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}
}
@media (prefers-reduced-motion: reduce) {
.hero .tagline .box-content[data-v-4ad7ea56] {
    opacity: 1;
    animation: none;
}
.hero .tagline .hero-highlight img[data-v-4ad7ea56] {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    animation: none;
}
.hero .cta button[data-v-4ad7ea56] {
    opacity: 1;
    animation: none;
}
.hero .hero-portfolio-cards[data-v-4ad7ea56] {
    opacity: 1;
    animation: none;
}
.hero .portfolio-card[data-v-4ad7ea56] {
    transition: none;
}
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/ExamplesPage.vue?vue&type=style&index=0&id=29fe1b26&lang=scss&scoped=true ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************/
.examples-hero[data-v-29fe1b26] {
  display: flex;
  justify-content: center;
}
.examples-hero[data-v-29fe1b26] .text-columns {
  width: 100%;
  padding: 4rem 0;
  text-align: center;
}
.examples-hero[data-v-29fe1b26] .grid-12 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
}
.examples-hero[data-v-29fe1b26] .headline,
.examples-hero[data-v-29fe1b26] .body {
  width: 100%;
  align-items: center;
}
.examples-hero[data-v-29fe1b26] .body .b2 {
  color: var(--Asphalt-60);
}
.examples[data-v-29fe1b26] {
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/EduPartnership.vue?vue&type=style&index=0&id=7139419c&lang=scss&scoped=true ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************/
.edu-partnership[data-v-7139419c] {
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding-bottom: calc(2 * var(--gridRow));
}
@media (min-width: 1024px) {
.edu-partnership .grid-item.item-1[data-v-7139419c] {
    grid-column: 1/span calc(8 + var(--gridFixer));
    grid-row-start: 3;
}
}
@media (min-width: 1100px) {
.edu-partnership .grid-item.item-1[data-v-7139419c] {
    grid-column: 1/span calc(7 + var(--gridFixer));
}
}
@media (min-width: 768px) {
.edu-partnership .grid-item.item-2[data-v-7139419c] {
    grid-column: 1/span calc(6 + var(--gridFixer));
}
}
@media (min-width: 901px) {
.edu-partnership .grid-item.item-2[data-v-7139419c] {
    grid-column: 1/span calc(8 + var(--gridFixer));
}
}
@media (min-width: 1024px) {
.edu-partnership .grid-item.item-2[data-v-7139419c] {
    grid-column: calc(10 + var(--gridFixer))/span calc(5 + var(--gridFixer));
}
}
.edu-partnership .grid-item.item-2 h3[data-v-7139419c] {
  text-align: center;
}
.edu-partnership .grid-item.item-3[data-v-7139419c] {
  grid-row-start: calc(1 + var(--grid-first-item-row-end) + var(--grid-second-item-row-end) + 3);
}
@media (min-width: 768px) {
.edu-partnership .grid-item.item-3[data-v-7139419c] {
    grid-row-start: calc(var(--grid-first-item-row-end) + 3);
    grid-column: calc(8 + var(--gridFixer))/span calc(5 + var(--gridFixer));
}
}
@media (min-width: 901px) {
.edu-partnership .grid-item.item-3[data-v-7139419c] {
    grid-column: calc(10 + var(--gridFixer))/span calc(5 + var(--gridFixer));
}
}
@media (min-width: 1024px) {
.edu-partnership .grid-item.item-3[data-v-7139419c] {
    grid-row-start: calc(1 + var(--grid-first-item-row-end) + 3);
    grid-column: 1/span calc(8 + var(--gridFixer));
}
}
@media (min-width: 1100px) {
.edu-partnership .grid-item.item-3[data-v-7139419c] {
    grid-column: 1/span calc(7 + var(--gridFixer));
}
}
.edu-partnership .grid-item.item-3 h3[data-v-7139419c], .edu-partnership .grid-item.item-3 p[data-v-7139419c], .edu-partnership .grid-item.item-3 ul[data-v-7139419c] {
  margin-bottom: 1.5rem;
}
.edu-partnership .grid-item.item-3 li[data-v-7139419c]::marker {
  color: var(--color-text);
}
.edu-partnership .grid-item.item-3 li p[data-v-7139419c] {
  margin-bottom: 0;
}
.edu-partnership .edu-form[data-v-7139419c] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.edu-partnership .edu-form h3[data-v-7139419c] {
  margin-bottom: 2.375rem;
}
.edu-partnership .edu-form form[data-v-7139419c] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
.edu-partnership .edu-form form[data-v-7139419c] {
    max-width: 23.3rem;
}
}
.edu-partnership .edu-form .text-area-container[data-v-7139419c] {
  padding-bottom: 0;
}
.edu-partnership .edu-form button[data-v-7139419c] {
  width: 100%;
}
.edu-partnership .edu-form-submitted[data-v-7139419c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.edu-partnership .edu-form-submitted h3[data-v-7139419c] {
  margin-bottom: 0.75rem;
}
@media (min-width: 1200px) {
.edu-partnership .edu-form-submitted[data-v-7139419c] {
    padding: 7rem 0;
}
.edu-partnership .edu-form-submitted p[data-v-7139419c] {
    max-width: 80%;
}
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/Banner.vue?vue&type=style&index=0&id=04098c47&lang=scss&scoped=true ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.banner[data-v-04098c47] {
  display: flex;
  justify-content: center;
}
.banner .content[data-v-04098c47] {
  display: flex;
  flex-direction: column;
  padding: 2rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
  text-align: center;
}
@media (min-width: 768px) {
.banner .content[data-v-04098c47] {
    height: 13.5rem;
    flex-direction: row;
    padding: 2.125rem 4rem;
    align-self: stretch;
}
}
@media (min-width: 1024px) {
.banner .content[data-v-04098c47] {
    gap: 3rem;
}
}
.banner svg[data-v-04098c47] {
  max-height: 2.5rem;
}
.banner.neutral[data-v-04098c47] {
  background-color: var(--color-banner-bg);
  color: var(--color-banner-text);
}
.banner.color[data-v-04098c47] {
  background-color: var(--Volt);
  --color-banner-text: var(--Asphalt);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Asphalt);
  --color-btn-secondary-text: var(--Asphalt);
  --color-btn-secondary-bg-hover: var(--Asphalt);
  --color-btn-secondary-text-hover: var(--Snow);
}
.banner .text[data-v-04098c47] {
  display: flex;
  gap: 3rem;
  align-items: center;
}
.banner .text h2[data-v-04098c47] {
  color: var(--color-banner-text);
}
@media (min-width: 768px) {
.banner .text h2[data-v-04098c47] {
    text-align: left;
}
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/icons/CheckMark.vue?vue&type=style&index=0&id=3fd51802&lang=scss&scoped=true ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/
svg path[data-v-3fd51802] {
  fill: var(--color-text);
  stroke: var(--color-text);
}
svg rect[data-v-3fd51802] {
  fill: var(--tag-bg);
  stroke: var(--tag-bg);
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/InlineNavigation.vue?vue&type=style&index=0&id=8f5d6b30&lang=scss&scoped=true ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.inline-nav[data-v-8f5d6b30] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.inline-nav .title[data-v-8f5d6b30] {
  color: #737373;
  font-family: var(--font-headline-family);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 103%;
  letter-spacing: -0.0225rem;
  min-width: max-content;
}
@media (min-width: 768px) {
.inline-nav .title[data-v-8f5d6b30] {
    font-size: 0.875rem;
}
}
@media (min-width: 1024px) {
.inline-nav .title[data-v-8f5d6b30] {
    font-size: 1.125rem;
}
}
.inline-nav .items[data-v-8f5d6b30] {
  display: flex;
  gap: 1.5rem;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: 34px;
  overflow-y: scroll;
  /* Hide scrollbar for Chrome, Safari and Opera */
}
.inline-nav .items[data-v-8f5d6b30]::-webkit-scrollbar {
  display: none;
}
.inline-nav .items[data-v-8f5d6b30] {
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.inline-nav button[data-v-8f5d6b30] {
  color: var(--Asphalt, #0F0F0F);
  font-family: var(--font-headline-family);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 103%;
  letter-spacing: -0.0225rem;
}
.examples .inline-nav[data-v-8f5d6b30] {
  justify-content: flex-start;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/GridSectionBackground.vue?vue&type=style&index=0&id=5cf4fc82&lang=scss&scoped=true ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.grid-20[data-v-5cf4fc82] {
  position: relative;
}
.grid-20 .grid-bg[data-v-5cf4fc82] {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 131.2px);
}
.grid-20 .grid-bg.pull[data-v-5cf4fc82] {
  left: -100%;
}
.grid-20 .grid-bg.push[data-v-5cf4fc82] {
  right: -100%;
  left: unset;
}
.grid-20 .gradient[data-v-5cf4fc82] {
  position: absolute;
  z-index: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  height: 100%;
}
.grid-20 .gradient.in[data-v-5cf4fc82] {
  top: 0;
  background-image: linear-gradient(180deg, var(--color-bg) 13.12%, var(--color-bg-rgba) 100%);
}
.grid-20 .gradient.out[data-v-5cf4fc82] {
  top: 131.2px;
  background-image: linear-gradient(180deg, var(--color-bg-rgba) 37.12%, var(--color-bg) 100%);
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/Examples.vue?vue&type=style&index=0&id=3a513e24&lang=scss&scoped=true ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.examples[data-v-3a513e24] {
  display: flex;
  justify-content: center;
  overflow-y: hidden;
  background-color: var(--color-secondary-bg);
}
.examples .content[data-v-3a513e24] {
  display: flex;
  padding: 1rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  /* Hide scrollbar for Chrome, Safari and Opera */
}
.examples .content[data-v-3a513e24]::-webkit-scrollbar {
  display: none;
}
.examples .content[data-v-3a513e24] {
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
@media (min-width: 500px) {
.examples .content[data-v-3a513e24] {
    flex-direction: row;
    padding: 2rem;
    overflow-y: scroll;
}
}
@media (min-width: 1024px) {
.examples .content[data-v-3a513e24] {
    padding: 2rem 72px;
}
}
.examples .example[data-v-3a513e24] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  cursor: pointer;
  flex: 1;
}
.examples .example[data-v-3a513e24]:after {
  content: "";
  width: 100%;
  height: 6px;
  background-color: transparent;
}
@media (min-width: 1024px) {
.examples .example[data-v-3a513e24]:after {
    height: 8px;
}
}
.examples .example[data-v-3a513e24]:hover:after {
  background-color: var(--Volt);
}
.examples .example:hover img[data-v-3a513e24] {
  transform: translateY(var(--scrollDistance));
  transition: transform 4s linear;
}
.examples .example .visual[data-v-3a513e24] {
  --scrollDistance: -468px;
}
.examples .example .visual.case-study[data-v-3a513e24] {
  --scrollDistance: -702px;
}
@supports (aspect-ratio: 1/1) {
.examples .example .visual[data-v-3a513e24] {
    aspect-ratio: 22.4/14.6;
}
}
.examples .example .visual[data-v-3a513e24] {
  overflow: hidden;
  border: solid 1px var(--color-examples-border);
}
@media (min-width: 500px) {
.examples .example .visual[data-v-3a513e24] {
    height: 14.9rem;
}
}
@media (min-width: 1024px) {
.examples .example .visual[data-v-3a513e24] {
    width: unset;
    height: unset;
}
@supports not (aspect-ratio: 1/1) {
.examples .example .visual[data-v-3a513e24] {
      height: 16.875rem;
}
}
.examples .example .visual[data-v-3a513e24] {
    --scrollDistance: -540px;
}
.examples .example .visual.case-study[data-v-3a513e24] {
    --scrollDistance: -810px;
}
}
.examples .example img[data-v-3a513e24] {
  width: 100%;
  height: auto;
  transform: translateY(0);
  transition: transform 1s;
}
.examples .example .text[data-v-3a513e24] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  align-self: stretch;
  font-size: 1.125rem;
}
.examples .example .text > .b2[data-v-3a513e24]::first-letter {
  text-transform: capitalize;
}
@media (min-width: 1024px) {
.examples .example .text[data-v-3a513e24] {
    font-size: 1.1875rem;
}
}
.examples .example .text .user[data-v-3a513e24] {
  font-weight: 500;
}
.examples .control[data-v-3a513e24] {
  display: flex;
  padding-bottom: 4rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
.examples .control button.inline svg[data-v-3a513e24] {
  transform: rotate(90deg);
}
.examples-page .examples-list[data-v-3a513e24] {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.examples-page .examples-list .example[data-v-3a513e24] {
  flex: 0 1 calc((100% - 4rem) / 3);
}
.example-full-size[data-v-3a513e24] {
  min-height: 500px;
}
.related-examples .examples-list[data-v-3a513e24] {
  padding-top: 0;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/ToggleSwitch.vue?vue&type=style&index=0&id=33f65083&lang=scss&scoped=true ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.switch[data-v-33f65083] {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  float: right;
  margin: 0 0 -5px 0;
}
.switch input[data-v-33f65083] {
  display: none;
}
.switch .slider[data-v-33f65083] {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 150ms;
  border-radius: 14px;
  background-color: var(--Asphalt-70);
}
.switch .slider[data-v-33f65083]:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  transition: 150ms;
  border-radius: 50%;
  background-color: var(--Asphalt-10);
}
.switch .slider:before.dark[data-v-33f65083] {
  box-shadow: 0 0 4px 1px rgba(15, 15, 15, 0.2);
}
.switch.dark .slider[data-v-33f65083] {
  background-color: var(--Asphalt-20);
}
.switch.dark .slider[data-v-33f65083]:before {
  background-color: var(--Asphalt-90);
}
.switch input:checked + .slider[data-v-33f65083] {
  background-color: var(--Asphalt-70);
}
.switch.dark input:checked + .slider[data-v-33f65083] {
  background-color: var(--Asphalt-20);
}
.switch input:checked + .slider[data-v-33f65083]:before {
  transform: translateX(16px);
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/ExampleFullPage.vue?vue&type=style&index=0&id=32bed60a&lang=scss&scoped=true ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/
.examples-hero[data-v-32bed60a] {
  display: flex;
  justify-content: center;
}
.examples-hero[data-v-32bed60a] .text-columns {
  width: 100%;
  padding: 4rem 0;
  text-align: center;
}
.examples-hero[data-v-32bed60a] .grid-12 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
}
.examples-hero[data-v-32bed60a] .headline,
.examples-hero[data-v-32bed60a] .body {
  width: 100%;
  align-items: center;
}
.examples-hero[data-v-32bed60a] .body .b2 {
  color: var(--Asphalt-60);
}
.examples[data-v-32bed60a] {
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content[data-v-32bed60a] {
  margin: 0 auto;
}
.text[data-v-32bed60a] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  align-self: stretch;
  font-size: 1.125rem;
  padding-top: 1.56rem;
}
.text > .b2[data-v-32bed60a]::first-letter {
  text-transform: capitalize;
}
@media (min-width: 1024px) {
.text[data-v-32bed60a] {
    font-size: 1.1875rem;
}
}
.text .user[data-v-32bed60a] {
  font-weight: 500;
}
.text .title[data-v-32bed60a] {
  color: #91939A;
}
.example-full-size img[data-v-32bed60a] {
  width: 100%;
  height: auto;
  border: solid 1px var(--color-examples-border);
}
.example-info[data-v-32bed60a] {
  overflow: hidden;
  padding-bottom: calc(2 * var(--gridRow));
}
.example-info .item-1[data-v-32bed60a] {
  display: none;
}
.example-info .item-2 .text[data-v-32bed60a] {
  padding: 1.125rem 0;
}
.example-info .item-2 button.inline[data-v-32bed60a] {
  font-size: 0.875rem;
}
.example-info .item-2 .actions-container[data-v-32bed60a] {
  display: flex;
  gap: 36px;
}
.related-examples.text-columns[data-v-32bed60a] {
  padding: 4rem 0;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/MoreFeatures.vue?vue&type=style&index=0&id=57cceae6&lang=scss&scoped=true ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.more-features[data-v-57cceae6] {
  display: flex;
  justify-content: center;
  padding: 0 0 6rem;
}
.more-features-wrapper[data-v-57cceae6] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1260px;
  padding: 0 24px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
.more-features-wrapper[data-v-57cceae6] {
    padding: 0 2rem;
}
}
@media (min-width: 1024px) {
.more-features-wrapper[data-v-57cceae6] {
    padding: 0 72px;
}
}
.more-features-grid[data-v-57cceae6] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
}
@media (min-width: 768px) {
.more-features-grid[data-v-57cceae6] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.more-feature-card[data-v-57cceae6],
.more-features-cta[data-v-57cceae6] {
  border-radius: 1rem;
  background-color: var(--Asphalt-15);
}
.more-feature-card[data-v-57cceae6] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 336px;
  padding: 0;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 560ms ease-out, transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.more-feature-card.is-visible[data-v-57cceae6] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.more-feature-card[data-v-57cceae6]:nth-child(2) {
  transition-delay: 70ms;
}
.more-feature-card[data-v-57cceae6]:nth-child(3) {
  transition-delay: 140ms;
}
.more-feature-card .h5[data-v-57cceae6] {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 40px 40px 0;
  text-align: center;
}
.more-feature-card .more-feature-card-image[data-v-57cceae6] {
  width: 100%;
  max-width: none;
  height: auto;
  margin-top: auto;
  align-self: stretch;
  display: block;
  overflow: hidden;
}
.more-feature-card .more-feature-card-image img[data-v-57cceae6] {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
.more-feature-card[data-v-57cceae6] {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}
}
.more-features-cta[data-v-57cceae6] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  margin-top: 1.5rem;
  padding: 2rem;
  box-sizing: border-box;
}
.more-features-cta .h5[data-v-57cceae6] {
  margin: 0;
}
.more-features-cta .more-features-cta-copy[data-v-57cceae6] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.more-features-cta .cta-highlight-words[data-v-57cceae6] {
  position: relative;
  display: inline-block;
}
.more-features-cta .cta-highlight-text[data-v-57cceae6] {
  position: relative;
  z-index: 1;
}
.more-features-cta .cta-highlight-words img[data-v-57cceae6] {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 0;
  width: 112%;
  height: auto;
  max-width: none;
  margin-top: -6px;
  transform: translateX(-50%);
  pointer-events: none;
}
@media (min-width: 768px) {
.more-features-cta[data-v-57cceae6] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/icons/CloseTopicIcon.vue?vue&type=style&index=0&id=676cc6f3&lang=scss&scoped=true ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************/
svg path[data-v-676cc6f3] {
  fill: var(--color-text);
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/IconButton.vue?vue&type=style&index=0&id=261545b4&lang=scss&scoped=true ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.public-page-icon-button[data-v-261545b4] {
  --color-icon-btn-color: var(--Asphalt-50);
  --color-icon-btn-color-hover: var(--Asphalt);
  --color-icon-btn-label-color: var(--Asphalt-10);
  --color-icon-btn-label-bg: var(--Asphalt-90);
}
.public-page-icon-button.dark[data-v-261545b4] {
  --color-icon-btn-color: var(--Asphalt-40);
  --color-icon-btn-color-hover: var(--Asphalt-10);
  --color-icon-btn-label-color: var(--Asphalt);
  --color-icon-btn-label-bg: var(--Asphalt-20);
}
.public-page-icon-button[data-v-261545b4] {
  background-color: transparent;
  border: none;
  font: var(--font-c1);
  text-transform: capitalize;
  color: var(--color-icon-btn-color);
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
  padding: 0;
}
.public-page-icon-button[data-v-261545b4]:focus {
  outline: none;
}
.public-page-icon-button[data-v-261545b4]:hover {
  color: var(--color-icon-btn-color-hover);
}
.public-page-icon-button svg[data-v-261545b4] {
  width: 24px;
  height: 24px;
}
.public-page-icon-button.tooltip-on[tooltip][data-v-261545b4] {
  position: relative;
}
.public-page-icon-button.tooltip-on[tooltip][data-v-261545b4]::after {
  content: attr(tooltip);
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%) translateY(-100%);
  background: var(--color-icon-btn-label-bg);
  font: var(--font-c1);
  color: var(--color-icon-btn-label-color);
  letter-spacing: 0.12px;
  text-align: center;
  text-transform: none;
  border-radius: 4px;
  pointer-events: none;
  padding: 8px 12px;
  z-index: 99;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.2s ease-in-out, top 0.2s ease-in-out;
}
.public-page-icon-button.tooltip-on[tooltip][data-v-261545b4]:hover::before, .public-page-icon-button.tooltip-on[tooltip][data-v-261545b4]:hover::after {
  opacity: 1;
}
.public-page-icon-button.tooltip-on[tooltip-position=top][data-v-261545b4]::before, .public-page-icon-button.tooltip-on[tooltip-position=top][data-v-261545b4]::after {
  left: 50%;
}
.public-page-icon-button.tooltip-on[tooltip-position=top-right][data-v-261545b4]::after {
  left: -3px;
  top: -40px;
  transform: translateX(0px) translateY(0%);
}
.public-page-icon-button.tooltip-on[tooltip-position=top-right][data-v-261545b4]::before {
  left: 6px;
  top: -12px;
  transform: translateY(50%);
  content: "";
  position: absolute;
  border-width: 6px;
  border-style: solid;
  border-color: var(--color-icon-btn-label-bg) transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 98;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/UsefulInformation.vue?vue&type=style&index=0&id=1613182a&lang=scss&scoped=true ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.useful-information[data-v-1613182a] {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.useful-information[data-v-1613182a]:not(.expanded) {
  padding-bottom: calc(2 * var(--gridRow));
}
.useful-information .grid-item[data-v-1613182a] {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-top: solid 0.5px transparent;
  border-left: solid 0.5px transparent;
  position: relative;
  z-index: 1;
}
.useful-information .grid-item .box[data-v-1613182a] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg);
}
.useful-information .title[data-v-1613182a] {
  grid-column: 1/-1;
  grid-row: 2/span 3;
}
@media (min-width: 1024px) {
.useful-information .title[data-v-1613182a] {
    grid-column: 1/span calc(6 + var(--gridFixer));
    grid-row: 3/span 3;
}
}
@media (min-width: 1100px) {
.useful-information .title[data-v-1613182a] {
    grid-column: 1/span calc(5 + var(--gridFixer));
}
}
.useful-information .title .box[data-v-1613182a] {
  padding: 1.5rem 1rem;
}
@media (min-width: 1024px) {
.useful-information .title .box[data-v-1613182a] {
    padding: 1.5rem;
}
}
.useful-information .info[data-v-1613182a] {
  --addRowOnExpand: 5;
  grid-column: 1/-1;
  grid-row: 6/span var(--rowNumber);
}
@media (min-width: 1024px) {
.useful-information .info[data-v-1613182a] {
    grid-column: calc(8 + var(--gridFixer))/span calc(7 + var(--gridFixer));
    grid-row: 3/span var(--rowNumber);
}
}
.useful-information .info.expanded[data-v-1613182a] {
  grid-row: 6/span calc(var(--rowNumber) + var(--addRowOnExpand));
}
@media (min-width: 1024px) {
.useful-information .info.expanded[data-v-1613182a] {
    grid-row: 3/span calc(var(--rowNumber) + var(--addRowOnExpand));
}
}
.useful-information .info .topic[data-v-1613182a] {
  width: 100%;
  position: relative;
}
.useful-information .info .topic.expanded[data-v-1613182a]:before {
  content: "";
  width: 8px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--Volt);
}
.useful-information .info .topic-control[data-v-1613182a] {
  display: flex;
  height: var(--gridRow);
  padding: 0 1.12rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  cursor: pointer;
}
.useful-information .info .topic-control svg[data-v-1613182a] {
  max-height: 38px;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
.useful-information .info .topic-control[data-v-1613182a] {
    padding: 0 1.125rem 0 2.4375rem;
}
.useful-information .info .topic-control svg[data-v-1613182a] {
    max-height: unset;
}
}
.useful-information .info .point-outside[data-v-1613182a] {
  transform: rotate(-90deg);
}
.useful-information .info .point-outside.expanded[data-v-1613182a] {
  transform: rotate(-135deg);
}
.useful-information .info .topic-content[data-v-1613182a] {
  height: 0;
  overflow: hidden;
}
.useful-information .info .topic-content.expanded[data-v-1613182a] {
  height: max-content;
}
.useful-information .info .topic-text[data-v-1613182a] {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem 2.25rem 1.125rem;
  align-items: flex-start;
  gap: 0.625rem;
  align-self: stretch;
}
@media (min-width: 1024px) {
.useful-information .info .topic-text[data-v-1613182a] {
    padding: 1.5rem 2.0625rem 2.25rem 2.4375rem;
}
}
.useful-information .info .topic-text .s3[data-v-1613182a] {
  margin-bottom: 0.625rem;
}
.useful-information.examples-info .info[data-v-1613182a] {
  --addRowOnExpand: 8;
}
.useful-information.pricing-info .info[data-v-1613182a] {
  --addRowOnExpand: 5;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/logos/MicrosoftLogo.vue?vue&type=style&index=0&id=488ff0d4&lang=scss&scoped=true ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************/
svg[data-v-488ff0d4] {
  height: 48px;
  width: auto;
  max-width: 122px;
}
svg path[data-v-488ff0d4] {
  fill: currentColor;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/TestimonialSection.vue?vue&type=style&index=0&id=76a114e1&lang=scss&scoped=true ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.testimonial-section[data-v-76a114e1] {
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 36rem;
}
@media (min-width: 1024px) {
.testimonial-section[data-v-76a114e1] {
    height: var(--testimonial-section-height, 480px);
    min-height: var(--testimonial-section-height, 480px);
}
}
.testimonial-section[data-v-76a114e1] >  .content {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100%;
  padding: 0;
}
.testimonial-section[data-v-76a114e1] .grid-20 {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100%;
}
.testimonial-section[data-v-76a114e1] .grid-bg {
  height: 100%;
}
.testimonial-section[data-v-76a114e1] .grid-bg.pull,
.testimonial-section[data-v-76a114e1] .grid-bg.push {
  display: none;
}
.testimonial-section-content[data-v-76a114e1] {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  box-sizing: border-box;
  width: 100%;
  padding: 64px 24px;
}
@media (min-width: 768px) {
.testimonial-section-content[data-v-76a114e1] {
    padding: 80px 2rem;
}
}
@media (min-width: 1024px) {
.testimonial-section-content[data-v-76a114e1] {
    padding: 96px 72px;
}
}
.testimonial-section-marker-quote[data-v-76a114e1] {
  display: block;
  width: auto;
  height: 44px;
}
.testimonial-section-quote[data-v-76a114e1] {
  width: 100%;
  max-width: 680px;
  margin: 0;
  font-size: 23px;
  text-align: center;
}
@media (min-width: 768px) {
.testimonial-section-quote[data-v-76a114e1] {
    font-size: 25px;
}
}
@media (min-width: 1024px) {
.testimonial-section-quote[data-v-76a114e1] {
    font-size: 26px;
}
}
.testimonial-section-attribution[data-v-76a114e1] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  max-width: 680px;
}
.testimonial-section-author[data-v-76a114e1] {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.testimonial-section-author-image[data-v-76a114e1] {
  display: block;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
}
.testimonial-section-author-info[data-v-76a114e1] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.testimonial-section-author-name[data-v-76a114e1],
.testimonial-section-author-title[data-v-76a114e1] {
  margin: 0;
}
.testimonial-section-author-title[data-v-76a114e1] {
  color: var(--Asphalt-50);
}
.testimonial-section-company-logo[data-v-76a114e1] {
  display: block;
  width: auto;
  height: 40px;
}
.testimonial-section-company-logo[data-v-76a114e1] path {
  fill: var(--Asphalt-50);
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/GridSectionContentBox.vue?vue&type=style&index=0&id=215ba7e6&lang=scss&scoped=true ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.grid-item[data-v-215ba7e6] {
  border-top: solid 0.5px transparent;
  border-left: solid 0.5px transparent;
  position: relative;
  z-index: 1;
}
.grid-item .box[data-v-215ba7e6] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  background-color: var(--color-bg);
}
.grid-item .box-content[data-v-215ba7e6] {
  min-height: max-content;
  width: 100%;
  padding: 0 24px;
}
@media (min-width: 1024px) {
.grid-item .box-content[data-v-215ba7e6] {
    padding: 0 1.5rem;
}
}
.grid-item.item-1 .box[data-v-215ba7e6] {
  justify-content: center;
}
.grid-item.item-1[data-v-215ba7e6] {
  grid-column: 1/-1;
  grid-row: 2/span var(--grid-first-item-row-end);
}
@media (min-width: 1024px) {
.grid-item.item-1[data-v-215ba7e6] {
    grid-column: 1/span calc(6 + var(--gridFixer));
    grid-row-start: 3;
}
}
@media (min-width: 1100px) {
.grid-item.item-1[data-v-215ba7e6] {
    grid-column: 1/span calc(5 + var(--gridFixer));
}
}
.grid-item.item-2[data-v-215ba7e6] {
  grid-column: 1/-1;
  grid-row: calc(var(--grid-first-item-row-end) + 3)/span var(--grid-second-item-row-end);
}
@media (min-width: 1024px) {
.grid-item.item-2[data-v-215ba7e6] {
    grid-column: calc(8 + var(--gridFixer))/span calc(7 + var(--gridFixer));
    grid-row-start: 3;
}
}
.grid-item.item-3[data-v-215ba7e6] {
  grid-column: 1/-1;
  grid-row: calc(var(--grid-first-item-row-end) + 3)/span var(--grid-third-item-row-end);
}
@media (min-width: 1024px) {
.grid-item.item-3[data-v-215ba7e6] {
    grid-column: calc(8 + var(--gridFixer))/span calc(7 + var(--gridFixer));
    grid-row: calc(1 + var(--grid-first-item-row-end) + 3)/span var(--grid-third-item-row-end);
    border-left: solid 2px transparent;
}
}
.grid-item.long-content .box-content[data-v-215ba7e6] {
  padding: 1.5rem 1rem;
}
@media (min-width: 1024px) {
.grid-item.long-content .box-content[data-v-215ba7e6] {
    padding: 1.5rem;
}
}
.grid-item.long-content h3[data-v-215ba7e6], .grid-item.long-content p[data-v-215ba7e6] {
  margin-bottom: 1.5rem;
}
.grid-item.short-content .box[data-v-215ba7e6] {
  justify-content: center;
}
.grid-item.short-content .box-content[data-v-215ba7e6] {
  padding: 1.5rem 1rem;
}
@media (min-width: 1024px) {
.grid-item.short-content .box-content[data-v-215ba7e6] {
    padding: 1.5rem;
}
}
.grid-item.pricing-col .box[data-v-215ba7e6] {
  justify-content: flex-start;
}
.grid-item.pricing-col .box-content[data-v-215ba7e6] {
  padding: 2rem 1rem 0;
}
@media (min-width: 768px) {
.grid-item.pricing-col .box-content[data-v-215ba7e6] {
    padding: 2rem 2rem;
}
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/Pricing.vue?vue&type=style&index=0&id=6f134b88&lang=scss&scoped=true ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************/
main[data-v-6f134b88] {
  --text-secondary: var(--Asphalt-50);
  --tag-bg: var(--Asphalt-20);
  --details: var(--Asphalt-60);
  --tableBg: var(--Asphalt-15);
  --tooltipBg: var(--Asphalt-90);
}
main.dark[data-v-6f134b88] {
  --text-secondary: var(--Asphalt-15);
  --tag-bg: var(--Asphalt-70);
  --details: var(--Asphalt-40);
  --tableBg: var(--Asphalt-95);
  --tooltipBg: var(--Asphalt-10);
}
.pricing-hero[data-v-6f134b88] {
  display: flex;
  justify-content: center;
}
.pricing-hero[data-v-6f134b88] .text-columns {
  width: 100%;
  padding: 4rem 0;
  text-align: center;
}
.pricing-hero[data-v-6f134b88] .grid-12 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
}
.pricing-hero[data-v-6f134b88] .headline,
.pricing-hero[data-v-6f134b88] .body {
  width: 100%;
  align-items: center;
}
.pricing-hero[data-v-6f134b88] .body .b2 {
  color: var(--Asphalt-60);
}
.pricing-table[data-v-6f134b88] {
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding-bottom: calc(var(--gridRow) * 2 + 1px);
}
.pricing-table .grid-item .box[data-v-6f134b88] {
  justify-content: flex-start;
}
.pricing-table .grid-item.item-1[data-v-6f134b88] {
  grid-row-start: 2;
}
@media (min-width: 1024px) {
.pricing-table .grid-item.item-1[data-v-6f134b88] {
    grid-column: 1/span calc(6 + var(--gridFixer));
    grid-row: 4/span var(--grid-first-item-row-end);
}
}
.pricing-table .grid-item.item-2[data-v-6f134b88] {
  grid-row: calc(var(--grid-first-item-row-end) + 5)/span var(--grid-second-item-row-end);
}
@media (min-width: 1024px) {
.pricing-table .grid-item.item-2[data-v-6f134b88] {
    grid-row-start: 4;
}
.pricing-table .grid-item.item-2.has-badge[data-v-6f134b88] {
    grid-row-start: 3;
}
}
.pricing-table .grid-item.item-2.item-switch-box[data-v-6f134b88] {
  grid-row-start: calc(var(--grid-first-item-row-end) + 3);
  grid-row-end: calc(var(--grid-first-item-row-end) + 3);
}
@media (min-width: 1024px) {
.pricing-table .grid-item.item-2.item-switch-box[data-v-6f134b88] {
    grid-row-start: 1;
    grid-row-end: 2;
}
}
.pricing-table .grid-item.item-2.item-switch-box[data-v-6f134b88] .box-content {
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pricing-table .grid-item.item-2.item-switch-box .switch-container[data-v-6f134b88] {
  display: flex;
  justify-content: center;
  gap: 16px;
  font: var(--font-b2);
  color: var(--text-secondary);
}
.pricing-table .plan[data-v-6f134b88] {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
@media (min-width: 768px) {
.pricing-table .plan[data-v-6f134b88] {
    gap: 44px;
}
}
@media (min-width: 1024px) {
.pricing-table .plan[data-v-6f134b88] {
    gap: 44px;
}
}
.pricing-table .badge[data-v-6f134b88] {
  color: var(--Asphalt);
  font-family: var(--font-body-family);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 124%;
  letter-spacing: 0.0125rem;
  background-color: var(--Volt);
  display: flex;
  padding: 0.375rem 0.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  align-self: stretch;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.pricing-table .plan-head[data-v-6f134b88] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.pricing-table .plan-head .plan-tag[data-v-6f134b88] {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  align-items: center;
  background-color: var(--tag-bg);
}
.pricing-table .plan-head .price[data-v-6f134b88] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pricing-table .plan-head .details[data-v-6f134b88] {
  color: var(--details);
}
.pricing-table .cycle-switch[data-v-6f134b88] {
  height: 3.25rem;
}
@media (min-width: 768px) {
.pricing-table .cycle-switch[data-v-6f134b88] {
    height: 4rem;
}
}
@media (min-width: 1024px) {
.pricing-table .cycle-switch[data-v-6f134b88] {
    height: 4.125rem;
}
}
.pricing-table .cycle-switch[data-v-6f134b88] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
}
.pricing-table .cycle-switch .switch[data-v-6f134b88] {
  display: flex;
  padding: 0.625rem 0.75rem;
  justify-content: center;
  align-items: center;
  background-color: var(--color-cycle-switch-bg);
}
.pricing-table .cycle-switch .cycle[data-v-6f134b88] {
  display: flex;
  flex-direction: row;
  padding: 0.75rem 1.5rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font: var(--font-b2);
  font-weight: 500;
  color: var(--color-cycle-text-inactive);
}
.pricing-table .cycle-switch .cycle.active[data-v-6f134b88] {
  font-weight: 700;
  color: var(--color-cycle-text-active);
  background-color: var(--color-cycle-active-bg);
}
.pricing-table .cycle-switch .cycle[data-v-6f134b88] {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
.pricing-table .cycle-switch .line[data-v-6f134b88] {
  height: 0.0625rem;
  background-color: var(--color-cycle-switch-bg);
  flex: 1 0 0;
}
.pricing-table .feature-list[data-v-6f134b88] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pricing-table .feature[data-v-6f134b88] {
  display: flex;
  padding: 0.375rem 0.75rem;
  align-items: center;
  gap: 0.625rem;
}
.pricing-table .feature.strong[data-v-6f134b88] {
  font-weight: 600;
}
.pricing-details[data-v-6f134b88] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: 44px;
  padding-top: 44px;
}
@media (min-width: 768px) {
.pricing-details[data-v-6f134b88] {
    gap: 64px;
    padding: 64px;
}
}
.pricing-details .pricing-details-toggle[data-v-6f134b88] .inline-arrow {
  transform: rotate(90deg);
}
.pricing-details .comparison-table[data-v-6f134b88] {
  width: 100%;
  overflow: hidden;
  max-width: 1116px;
}
.pricing-details .row[data-v-6f134b88] {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.pricing-details .row[data-v-6f134b88] {
    grid-template-columns: 1.5fr 1fr 1fr;
}
}
.pricing-details .cell[data-v-6f134b88] {
  padding: 12px 16px;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 16px;
  font: var(--font-b2);
  color: var(--color-text);
}
.pricing-details .cell.plan[data-v-6f134b88] {
  justify-content: center;
}
.pricing-details .feature[data-v-6f134b88] {
  text-align: left;
}
.pricing-details .feature button[data-v-6f134b88] {
  color: var(--Asphalt-30);
}
.pricing-details .feature button[tooltip-position=top-right][data-v-6f134b88]:hover {
  color: var(--Asphalt-30);
  cursor: default;
}
.pricing-details .header[data-v-6f134b88] {
  font: var(--font-s2);
  color: var(--color-text);
  text-align: center;
  padding-bottom: 24px;
}
.pricing-details .header .feature[data-v-6f134b88] {
  justify-content: space-between;
  cursor: pointer;
}
@media (min-width: 768px) {
.pricing-details .header .feature[data-v-6f134b88] {
    cursor: default;
}
}
.pricing-details .row[data-v-6f134b88]:nth-child(even):not(.header) {
  background-color: var(--tableBg);
}
.pricing-details .footer[data-v-6f134b88] {
  padding-top: 24px;
}
.pricing-details .footer .cell[data-v-6f134b88] {
  justify-content: center;
}
.pricing-details .statement[data-v-6f134b88] {
  max-width: 684px;
  color: var(--Asphalt-50);
  font: var(--font-c2);
  text-align: center;
}
.pricing-details .statement a[data-v-6f134b88] {
  font-weight: 600;
  color: var(--Asphalt-50);
}
.pricing-details .statement a[data-v-6f134b88]:hover {
  text-decoration: underline;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/SmallCenterHero.vue?vue&type=style&index=0&id=9bdec66a&lang=scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************/
.hero {
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  height: 43rem;
  max-height: 43rem;
  padding-bottom: 0;
}
@media (min-width: 768px) {
.hero {
    height: 48rem;
    max-height: 48rem;
}
}
@media (min-width: 1024px) {
.hero {
    height: min(max(100dvh - 5.75rem, 50rem), 54rem);
}
}
.hero > .content,
.hero .grid-20 {
  height: 100%;
}
.hero .tagline {
  grid-column: 1/-1 !important;
  grid-row-start: 2 !important;
  justify-self: center;
  width: 100%;
}
.hero .tagline .box {
  align-items: center;
  background-color: transparent;
}
.hero .tagline h1 {
  text-align: center;
  margin: 0 auto;
}
.hero .tagline .hero-highlight {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.hero .tagline .hero-highlight img {
  position: absolute;
  left: 50%;
  bottom: -0.12em;
  width: 115%;
  max-width: none;
  transform: translateX(-50%);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: hero-marker-draw 700ms cubic-bezier(0.16, 1, 0.3, 1) 1700ms forwards;
  pointer-events: none;
}
.hero .tagline .hero-highlight-text {
  position: relative;
  z-index: 1;
}
.hero .tagline .box-content {
  max-width: 56rem;
  margin: 0 auto;
  opacity: 0;
  animation: hero-content-rise 700ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}
@media (min-width: 1024px) {
.hero .tagline {
    grid-column: 1/-1 !important;
}
}
.hero .cta {
  --rowStart: calc( var(--grid-first-item-row-end) + 3);
  grid-column: 1/-1;
  grid-row: var(--rowStart)/span 1;
  justify-self: center;
  z-index: 1;
  align-self: center;
  justify-content: center;
  transform: translateY(calc(var(--gridRow) * -0.5));
  border-left: solid 0.5px transparent;
  border-right: solid 0.5px transparent;
}
.hero .cta button {
  width: auto;
  opacity: 0;
  animation: hero-content-rise 700ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}
@media (min-width: 480px) {
.hero.v2 .tagline h1, .hero.v3 .tagline h1 {
    max-width: 90%;
}
}
@media (min-width: 558px) {
.hero.v2 .tagline h1, .hero.v3 .tagline h1 {
    max-width: 100%;
}
}
@media (min-width: 1264px) {
.hero.v2 .tagline h1, .hero.v3 .tagline h1 {
    max-width: 90%;
}
}
.hero .hero-portfolio-cards {
  position: absolute;
  left: 50%;
  top: calc(50% + 6.5rem);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: min(90vw, 82rem);
  height: clamp(16rem, 28vw, 26rem);
  pointer-events: auto;
  opacity: 0;
  animation: hero-cards-rise 850ms cubic-bezier(0.16, 1, 0.3, 1) 950ms forwards;
}
.hero .portfolio-card {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(17rem, 30vw, 28rem);
  box-sizing: border-box;
  overflow: hidden;
  border: 6px solid var(--asphalt10, #FEFEFE);
  border-radius: 20px;
  box-shadow: 0 1.25rem 3rem rgba(15, 15, 15, 0.14), 0 0.25rem 0.75rem rgba(15, 15, 15, 0.08);
  backface-visibility: hidden;
  cursor: default;
  pointer-events: auto;
  transform-origin: center bottom;
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1), z-index 0ms linear 120ms;
  will-change: transform;
}
.hero .portfolio-card.v5-position-left,
.hero .portfolio-card.v5-position-right {
  cursor: pointer;
}
.hero .portfolio-card.v5-position-center {
  cursor: default;
  pointer-events: none;
}
.hero .portfolio-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero .portfolio-card.v5-position-left {
  z-index: 1;
  transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
.hero .portfolio-card.v5-position-center {
  z-index: 4;
  transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
.hero .portfolio-card.v5-position-right {
  z-index: 2;
  transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
.hero .portfolio-card.side {
  width: clamp(17rem, 30vw, 28rem);
}
@media (max-width: 767px) {
.hero .hero-portfolio-cards {
    top: calc(50% + 5.5rem);
    height: 17rem;
    width: 150vw;
}
.hero .portfolio-card {
    width: 18rem;
}
.hero .portfolio-card.side {
    width: 18rem;
}
}
@keyframes hero-card-left {
0%, 22.66%, 100% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
22.67% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
33.33%, 55.99% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
56% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
66.66%, 89.32% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
89.33% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
99.9% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
}
@keyframes hero-card-center {
0%, 22.66%, 100% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
22.67% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
33.33%, 55.99% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
56% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
66.65% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
66.66%, 89.32% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
89.33% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
}
@keyframes hero-card-right {
0%, 22.66%, 100% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
22.67% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
33.32% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
33.33%, 55.99% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
56% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
66.66%, 89.32% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
89.33% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
}
@keyframes hero-content-rise {
from {
    opacity: 0;
    transform: translateY(1.5rem);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@keyframes hero-cards-rise {
from {
    opacity: 0;
    transform: translateX(-50%) translateY(4rem);
}
to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
}
@keyframes hero-marker-draw {
from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
}
to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}
}
@media (prefers-reduced-motion: reduce) {
.hero .tagline .box-content {
    opacity: 1;
    animation: none;
}
.hero .tagline .hero-highlight img {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    animation: none;
}
.hero .cta button {
    opacity: 1;
    animation: none;
}
.hero .hero-portfolio-cards {
    opacity: 1;
    animation: none;
}
.hero .portfolio-card {
    transition: none;
}
}
.tagline.referral-tagline {
  text-align: center;
}
@media (max-width: 390px) {
.tagline.referral-tagline {
    grid-column: 1/span 12 !important;
}
}
@media (min-width: 736px) {
.tagline.referral-tagline {
    grid-column: 2/span 8 !important;
}
}
@media (min-width: 769px) {
.tagline.referral-tagline {
    grid-column: 2/span 10 !important;
}
}
@media (min-width: 901px) {
.tagline.referral-tagline {
    grid-column: 2/span 12 !important;
}
}
@media (min-width: 1001px) {
.tagline.referral-tagline {
    grid-column: 3/span 12 !important;
}
}
@media (min-width: 1200px) {
.tagline.referral-tagline {
    grid-column: 4/span 12 !important;
}
}
@media (min-width: 1300px) {
.tagline.referral-tagline {
    grid-column: 5/span 12 !important;
}
}
.tagline.referral-tagline .box {
  height: unset;
  position: relative;
}
.tagline.referral-tagline .box .box-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (max-width: 390px) {
.tagline.referral-tagline .box .box-content {
    padding: 40px 16px;
}
}
@media (min-width: 390px) {
.tagline.referral-tagline .box .box-content {
    padding: 40px 16px;
}
}
@media (min-width: 736px) {
.tagline.referral-tagline .box .box-content {
    padding: 40px 20px;
}
}
@media (min-width: 1024px) {
.tagline.referral-tagline .box .box-content {
    padding: 36px;
}
}
.tagline.referral-tagline .box .discount-illustration {
  position: absolute;
  top: -34px;
  right: -34px;
  transform: rotate(15deg);
}
@media (max-width: 390px) {
.tagline.referral-tagline .box .discount-illustration {
    transform: unset;
}
.tagline.referral-tagline .box .discount-illustration img {
    width: 70px;
    height: 70px;
}
.tagline.referral-tagline .box .discount-illustration {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
}
.tagline.referral-tagline .box .cta.referral {
  display: grid;
}
.tagline.referral-tagline .box .cta.referral button {
  padding: 12px 24px;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/ReviewSubmitPage.vue?vue&type=style&index=0&id=780d0e6d&scoped=true&lang=scss&global=true (1) ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
[data-v-780d0e6d],[data-v-780d0e6d]::before,[data-v-780d0e6d]::after {
  box-sizing: border-box;
}
html[data-v-780d0e6d] {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15; /* 1. Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  -moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
  tab-size: 4; /* 3 */
}

/*
Sections
========
*/
body[data-v-780d0e6d] {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr[data-v-780d0e6d] {
  height: 0; /* 1 */
  color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/
h1[data-v-780d0e6d],
h2[data-v-780d0e6d],
h3[data-v-780d0e6d],
h4[data-v-780d0e6d],
p[data-v-780d0e6d] {
  margin: 0;
}

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title][data-v-780d0e6d] {
  text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/
b[data-v-780d0e6d],
strong[data-v-780d0e6d] {
  font-weight: bold;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code[data-v-780d0e6d],
kbd[data-v-780d0e6d],
samp[data-v-780d0e6d],
pre[data-v-780d0e6d] {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small[data-v-780d0e6d] {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub[data-v-780d0e6d],
sup[data-v-780d0e6d] {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub[data-v-780d0e6d] {
  bottom: -0.25em;
}
sup[data-v-780d0e6d] {
  top: -0.5em;
}

/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table[data-v-780d0e6d] {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button[data-v-780d0e6d],
input[data-v-780d0e6d],
optgroup[data-v-780d0e6d],
select[data-v-780d0e6d],
textarea[data-v-780d0e6d] {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
*/
button[data-v-780d0e6d],
select[data-v-780d0e6d] {
  text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button[data-v-780d0e6d],
[type=button][data-v-780d0e6d],
[type=reset][data-v-780d0e6d],
[type=submit][data-v-780d0e6d] {
  -webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/
[data-v-780d0e6d]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/
[data-v-780d0e6d]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
[data-v-780d0e6d]:-moz-ui-invalid {
  box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend[data-v-780d0e6d] {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress[data-v-780d0e6d] {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
[data-v-780d0e6d]::-webkit-inner-spin-button,[data-v-780d0e6d]::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search][data-v-780d0e6d] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
[data-v-780d0e6d]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
[data-v-780d0e6d]::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary[data-v-780d0e6d] {
  display: list-item;
}
[data-v-780d0e6d] {
  box-sizing: border-box;
}
[data-v-780d0e6d]:root {
  --Asphalt: #0F0F0F;
  --Asphalt-10: #FEFEFE;
  --Asphalt-15: #F9F9F9;
  --Asphalt-20: #EEEEEE;
  --Asphalt-30: #D1D1D1;
  --Asphalt-40: #A2A2A2;
  --Asphalt-50: #707070;
  --Asphalt-60: #484747;
  --Asphalt-70: #3D3D3D;
  --Asphalt-80: #333333;
  --Asphalt-90: #262626;
  --Asphalt-95: #1A1A1A;
  --Asphalt-100: #0F0F0F;
  --Snow: #FEFEFE;
  --Volt: #DCFA37;
  --Rain: #91939A;
  --Frost: #EEF0F6;
  --Stone: #3D3F45;
  --Success60: #10B981;
  --Error-40: #F87171;
  --Error-60: #DC2626;
  --Linear: linear-gradient(180deg, var(--Rain, #91939A) 37.12%, transparent 74.17%);
  --headlineFont: "Bricolage Grotesque", sans-serif;
  --font-headline-family: "Bricolage Grotesque", sans-serif;
  --bodyFont: "Work Sans", sans-serif;
  --font-body-family: "Work Sans", sans-serif;
  --font-h0: 500 54px/1.24 var(--font-headline-family);
  --font-h1: 500 44px/1.1 var(--font-headline-family);
  --font-h2: 500 36px/1.1 var(--font-headline-family);
  --font-h3: 500 32px/1.2 var(--font-headline-family);
  --font-h4: 500 24px/1.3 var(--font-headline-family);
  --font-h5: 400 16px/1.2 var(--font-headline-family);
  --font-h6: 400 14px/1.2 var(--font-headline-family);
  --font-s1: 500 1.6875rem/1.2 var(--font-headline-family);
  --font-s2: 500 1.1875rem/1.4 var(--font-headline-family);
  --font-s3: 600 0.8125rem/1.2 var(--font-body-family);
  --font-s4: 400 18px/1.2 var(--font-body-family);
  --font-b1: 400 15px/1.2 var(--font-body-family);
  --font-b2: 400 14px/1.2 var(--font-body-family);
  --font-b3: 400 0.75rem/1.35 var(--font-body-family);
  --font-c1: 400 0.75rem/1.3 var(--font-body-family);
  --font-c2: 400 0.75rem/1.3 var(--font-body-family);
}
@media (min-width: 768px) {
[data-v-780d0e6d]:root {
    --font-h0: 500 72px/1.22 var(--font-headline-family);
    --font-h1: 500 56px/1.1 var(--font-headline-family);
    --font-h2: 500 44px/1.1 var(--font-headline-family);
    --font-h3: 500 36px/1.2 var(--font-headline-family);
    --font-h4: 500 26px/1.3 var(--font-headline-family);
    --font-h5: 400 18px/1.2 var(--font-headline-family);
    --font-h6: 400 16px/1.2 var(--font-headline-family);
    --font-s1: 500 1.8125rem/1.2 var(--font-headline-family);
    --font-s2: 500 1.3125rem/1.2 var(--font-headline-family);
    --font-s3: 600 0.9375rem/1.2 var(--font-body-family);
    --font-s4: 400 20px/1.2 var(--font-body-family);
    --font-b1: 400 16px/1.2 var(--font-body-family);
    --font-b2: 400 15px/1.2 var(--font-body-family);
    --font-b3: 400 13px/1.35 var(--font-body-family);
    --font-c1: 400 0.875rem/1.3 var(--font-body-family);
    --font-c2: 400 0.75rem/1.3 var(--font-body-family);
}
}
@media (min-width: 1024px) {
[data-v-780d0e6d]:root {
    --font-h0: 500 4.5rem/1.2 var(--font-headline-family);
    --font-h1: 500 64px/1.2 var(--font-headline-family);
    --font-h2: 500 48px/1.2 var(--font-headline-family);
    --font-h3: 500 40px/1.2 var(--font-headline-family);
    --font-h4: 500 28px/1.3 var(--font-headline-family);
    --font-h5: 400 20px/1.2 var(--font-headline-family);
    --font-h6: 400 18px/1.2 var(--font-headline-family);
    --font-s1: 500 3rem/1.2 var(--font-headline-family);
    --font-s2: 500 1.5rem/1.2 var(--font-headline-family);
    --font-s3: 600 1.0625rem/1.3 var(--font-body-family);
    --font-s4: 400 24px/1.2 var(--font-body-family);
    --font-s5: 500 18px/1.2 var(--font-headline-family);
    --font-b1: 400 18px/1.4 var(--font-body-family);
    --font-b2: 400 16px/1.3 var(--font-body-family);
    --font-b3: 400 14px/1.4 var(--font-body-family);
    --font-c1: 400 0.875rem/1.3 var(--font-body-family);
    --font-c2: 400 0.75rem/1.3 var(--font-body-family);
}
}
.light-mode[data-v-780d0e6d] {
  --color-text: var(--Asphalt);
  --color-bg: var(--Snow);
  --color-bg-rgba: rgba(254, 254, 254, 0);
  --color-secondary-bg: #F3F3F3;
  --color-navigation-bg: rgba(254, 254, 254, 0.70);
  --color-examples-border: var(--Frost);
  --bannerBgColor: #212121;
  --color-btn-primary-bg: var(--Asphalt-100);
  --color-btn-primary-border: transparent;
  --color-btn-primary-text: var(--Asphalt-10);
  --color-btn-primary-bg-hover: var(--Asphalt-100);
  --color-btn-primary-text-hover: var(--Asphalt-10);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Asphalt);
  --color-btn-secondary-text: var(--Asphalt);
  --color-btn-secondary-bg-hover: var(--Asphalt);
  --color-btn-secondary-text-hover: var(--Snow);
  --color-btn-tertiary-bg: var(--Asphalt);
  --color-btn-tertiary-border: var(--Asphalt);
  --color-btn-tertiary-text: var(--Snow);
  --color-btn-tertiary-bg-hover: #393939;
  --color-btn-tertiary-border-hover: #393939;
  --color-btn-tertiary-text-hover: var(--Asphalt);
  --color-btn-inline-bg: transparent;
  --color-btn-inline-border: transparent;
  --color-btn-inline-text: var(--Asphalt);
  --color-btn-inline-text-hover: var(--Asphalt);
  --color-nav-link-text: var(--Asphalt);
  --color-form-elem-bg-disabled: var(--carbon20);
  --color-form-elem-border: var(--Asphalt-30);
  --color-form-elem-border-hover: var(--Asphalt-40);
  --color-form-elem-border-focus: var(--Asphalt);
  --color-form-elem-border-disabled: var(--Asphalt-30);
  --color-form-elem-border-error: var(--Error-60);
  --color-form-elem-label: var(--Asphalt-60);
  --color-form-elem-label-hover: var(--Asphalt-60);
  --color-form-elem-label-focus: var(--Asphalt-60);
  --color-form-elem-label-disabled: var(--Asphalt-60);
  --color-form-elem-text: var(--Asphalt-70);
  --color-form-elem-text-hover: var(--Asphalt-70);
  --color-form-elem-text-focus: var(--Asphalt-80);
  --color-form-elem-text-disabled: var(--Asphalt-70);
  --color-banner-bg: #212121;
  --color-banner-text: var(--Snow);
}
.light-mode .banner[data-v-780d0e6d]:not(.color) {
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Snow);
  --color-btn-secondary-text: var(--Snow);
  --color-btn-secondary-bg-hover: var(--Snow);
  --color-btn-secondary-text-hover: var(--Asphalt);
}
.light-mode[data-v-780d0e6d] {
  --color-cycle-text-inactive: var(--Stone);
  --color-cycle-text-active: var(--Asphalt);
  --color-cycle-switch-bg: #EDEDED;
  --color-cycle-active-bg: var(--Snow);
}
.dark-mode[data-v-780d0e6d] {
  --color-text: var(--Snow);
  --color-bg: var(--Asphalt);
  --color-bg-rgba: rgba(15, 15, 15, 0);
  --color-secondary-bg: #212121;
  --color-navigation-bg: rgba(15, 15, 15, 0.70);
  --color-examples-border: var(--Stone);
  --bannerBgColor: #F3F3F3;
  --color-btn-primary-bg: var(--Volt);
  --color-btn-primary-border: transparent;
  --color-btn-primary-text: var(--Asphalt);
  --color-btn-primary-bg-hover: var(--Snow);
  --color-btn-primary-text-hover: var(--Asphalt);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Snow);
  --color-btn-secondary-text: var(--Snow);
  --color-btn-secondary-bg-hover: var(--Snow);
  --color-btn-secondary-text-hover: var(--Asphalt);
  --color-btn-tertiary-bg: var(--Snow);
  --color-btn-tertiary-border: var(--Snow);
  --color-btn-tertiary-text: var(--Asphalt);
  --color-btn-tertiary-bg-hover: #393939;
  --color-btn-tertiary-border-hover: #393939;
  --color-btn-tertiary-text-hover: var(--Asphalt-10);
  --color-btn-inline-bg: transparent;
  --color-btn-inline-border: transparent;
  --color-btn-inline-text: var(--Snow);
  --color-btn-inline-text-hover: var(--Snow);
  --color-nav-link-text: var(--Snow);
  --color-banner-bg: #F3F3F3;
  --color-banner-text: var(--Asphalt);
  --color-form-elem-bg-disabled: var(--carbon20);
  --color-form-elem-border: var(--Asphalt-50);
  --color-form-elem-border-hover: var(--Asphalt-40);
  --color-form-elem-border-focus: var(--Asphalt-30);
  --color-form-elem-border-disabled: var(--Asphalt-50);
  --color-form-elem-border-error: var(--Error-40);
  --color-form-elem-label: var(--Asphalt-40);
  --color-form-elem-label-hover: var(--Asphalt-40);
  --color-form-elem-label-focus: var(--Asphalt-30);
  --color-form-elem-label-disabled: var(--Asphalt-40);
  --color-form-elem-text: var(--Asphalt-30);
  --color-form-elem-text-hover: var(--Asphalt-20);
  --color-form-elem-text-focus: var(--Asphalt-10);
  --color-form-elem-text-disabled: var(--Asphalt-30);
}
.dark-mode .banner[data-v-780d0e6d] {
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Asphalt);
  --color-btn-secondary-text: var(--Asphalt);
  --color-btn-secondary-bg-hover: var(--Asphalt);
  --color-btn-secondary-text-hover: var(--Snow);
}
.dark-mode[data-v-780d0e6d] {
  --color-cycle-text-inactive: var(--Snow);
  --color-cycle-text-active: var(--Asphalt);
  --color-cycle-switch-bg: var(--Stone);
  --color-cycle-active-bg: var(--Snow);
}
body[data-v-780d0e6d] {
  background-color: var(--background-fill-color, var(--color-bg));
}
.h0[data-v-780d0e6d] {
  font: var(--font-h0);
  color: var(--color-text);
}
.h1[data-v-780d0e6d] {
  font: var(--font-h1);
  color: var(--color-text);
}
.h2[data-v-780d0e6d] {
  font: var(--font-h2);
  color: var(--color-text);
}
.h3[data-v-780d0e6d] {
  font: var(--font-h3);
  color: var(--color-text);
}
.h4[data-v-780d0e6d] {
  font: var(--font-h4);
  color: var(--color-text);
}
.h5[data-v-780d0e6d] {
  font: var(--font-h5);
  color: var(--color-text);
}
.h6[data-v-780d0e6d] {
  font: var(--font-h6);
  color: var(--color-text);
}
.s1[data-v-780d0e6d] {
  font: var(--font-s1);
  color: var(--color-text);
}
.s2[data-v-780d0e6d] {
  font: var(--font-s2);
  color: var(--color-text);
}
.s3[data-v-780d0e6d] {
  font: var(--font-s3);
  color: var(--color-text);
}
.s4[data-v-780d0e6d] {
  font: var(--font-s4);
  color: var(--color-text);
}
.s5[data-v-780d0e6d] {
  font: var(--font-s5);
  color: var(--color-text);
}
.b1[data-v-780d0e6d] {
  font: var(--font-b1);
  color: var(--color-text);
}
.b2[data-v-780d0e6d] {
  font: var(--font-b2);
  color: var(--color-text);
}
.b3[data-v-780d0e6d] {
  font: var(--font-b3);
  color: var(--color-text);
}
.c1[data-v-780d0e6d] {
  font: var(--font-c1);
  color: var(--color-text);
}
.c2[data-v-780d0e6d] {
  font: var(--font-c2);
  color: var(--color-text);
}
.content[data-v-780d0e6d] {
  width: 100%;
  max-width: 1440px;
  padding: 0 24px;
}
@media (min-width: 768px) {
.content[data-v-780d0e6d] {
    padding: 0 2rem;
}
}
@media (min-width: 1024px) {
.content[data-v-780d0e6d] {
    padding: 0 72px;
}
}
.grid-12[data-v-780d0e6d] {
  --gridGap: 1rem;
  width: 100%;
  max-width: 1440px;
  padding: 0 24px;
  display: grid;
  gap: var(--gridGap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 768px) {
.grid-12[data-v-780d0e6d] {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    padding: 0 2rem;
}
}
@media (min-width: 1024px) {
.grid-12[data-v-780d0e6d] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: 0 72px;
}
}
.grid-20[data-v-780d0e6d] {
  --gridGap: 0;
  --colNum: 20;
}
@media (max-width: 1300px) {
.grid-20[data-v-780d0e6d] {
    --colNum: 18;
}
}
@media (max-width: 1200px) {
.grid-20[data-v-780d0e6d] {
    --colNum: 16;
}
}
@media (max-width: 1000px) {
.grid-20[data-v-780d0e6d] {
    --colNum: 14;
}
}
@media (max-width: 900px) {
.grid-20[data-v-780d0e6d] {
    --colNum: 12;
}
}
@media (max-width: 768px) {
.grid-20[data-v-780d0e6d] {
    --colNum: 10;
}
}
@media (max-width: 480px) {
.grid-20[data-v-780d0e6d] {
    --colNum: 8;
}
}
@media (max-width: 360px) {
.grid-20[data-v-780d0e6d] {
    --colNum: 6;
}
}
.grid-20[data-v-780d0e6d] {
  --gridFixer: 0;
}
@media (min-width: 1001px) {
.grid-20[data-v-780d0e6d] {
    --gridFixer: 1;
}
}
@media (min-width: 1201px) {
.grid-20[data-v-780d0e6d] {
    --gridFixer: 2;
}
}
@media (min-width: 1301px) {
.grid-20[data-v-780d0e6d] {
    --gridFixer: 3;
}
}
.grid-20[data-v-780d0e6d] {
  width: 100%;
  max-width: 1440px;
  display: grid;
  grid-template-columns: repeat(var(--colNum), minmax(0, var(--gridRow)));
  grid-auto-rows: var(--gridRow);
  gap: 0;
}
@media (min-width: 1456px) {
.grid-20[data-v-780d0e6d] {
    grid-template-columns: repeat(var(--colNum), minmax(0, 65.6px));
    grid-auto-rows: 65.6px;
}
}
.divider[data-v-780d0e6d] {
  height: 0.5rem;
  align-self: stretch;
  background-color: var(--Volt);
}
@media (min-width: 1024px) {
.divider[data-v-780d0e6d] {
    height: 0.75rem;
}
}
p a[data-v-780d0e6d] {
  color: var(--color-text);
  text-decoration: underline;
}
p a[data-v-780d0e6d]:hover {
  color: var(--color-text);
  text-decoration: underline;
}
nav a[data-v-780d0e6d] {
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0.25rem 0;
  gap: 0.5rem;
  color: var(--color-nav-link-text);
  font-family: var(--font-headline-family);
  font-size: 0.75rem;
  font-weight: 450;
  line-height: 1;
  letter-spacing: -0.0225rem;
}
@media (min-width: 768px) {
nav a[data-v-780d0e6d] {
    font-size: 0.875rem;
    letter-spacing: -0.0175rem;
}
}
@media (min-width: 1024px) {
nav a[data-v-780d0e6d] {
    font-size: 1.125rem;
    letter-spacing: -0.0225rem;
}
}
nav a[data-v-780d0e6d] {
  position: relative;
}
nav a[data-v-780d0e6d]::after {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-nav-link-text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease-in-out;
}
nav a[data-v-780d0e6d]:hover, nav a.router-link-active[data-v-780d0e6d] {
  color: var(--color-text);
}
nav a[data-v-780d0e6d]:hover::after, nav a.router-link-active[data-v-780d0e6d]::after {
  transform: scaleX(1);
}
nav a span[data-v-780d0e6d] {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
nav a span[data-v-780d0e6d]::after {
  content: attr(data-label);
  content: attr(data-label)/"";
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: 700;
}
@media speech {
nav a span[data-v-780d0e6d]::after {
    display: none;
}
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/PortfolioCustomization.vue?vue&type=style&index=0&id=ff03d1f4&lang=scss&scoped=true ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.portfolio-customization[data-v-ff03d1f4] {
  position: relative;
  overflow: hidden;
  background-color: var(--Asphalt-100);
  background-image: radial-gradient(rgba(254, 254, 254, 0.12) 1px, transparent 1px);
  background-size: 16px 16px;
  padding: 96px 0;
}
.portfolio-customization-wrapper[data-v-ff03d1f4] {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
.portfolio-customization-wrapper[data-v-ff03d1f4] {
    padding: 0 2rem;
}
}
@media (min-width: 1024px) {
.portfolio-customization-wrapper[data-v-ff03d1f4] {
    padding: 0 72px;
}
}
.portfolio-customization-layout[data-v-ff03d1f4] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: stretch;
}
@media (max-width: 767px) {
.portfolio-customization-layout[data-v-ff03d1f4] {
    gap: 2rem;
}
}
@media (min-width: 1024px) {
.portfolio-customization-layout[data-v-ff03d1f4] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 4rem;
}
}
.portfolio-customization-copy[data-v-ff03d1f4] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  min-height: 340px;
}
@media (max-width: 767px) {
.portfolio-customization-copy[data-v-ff03d1f4] {
    gap: 3rem;
    justify-content: flex-start;
    min-height: 0;
}
}
@media (min-width: 1024px) {
.portfolio-customization-copy[data-v-ff03d1f4] {
    min-height: 480px;
}
}
.portfolio-customization-copy .h4[data-v-ff03d1f4] {
  margin: 0;
  color: var(--Asphalt-10);
  font-weight: 400;
}
.portfolio-customization-heading-highlight[data-v-ff03d1f4] {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.portfolio-customization-heading-highlight-text[data-v-ff03d1f4] {
  position: relative;
  z-index: 1;
}
.portfolio-customization-heading-highlight img[data-v-ff03d1f4] {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 120%;
  height: auto;
  margin-top: calc(-0.35em + 2px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}
.portfolio-customization-list[data-v-ff03d1f4] {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.portfolio-customization-list-item[data-v-ff03d1f4] {
  border-top: 1px solid var(--Asphalt-70);
}
.portfolio-customization-list-item[data-v-ff03d1f4]:first-child {
  border-top: none;
}
.portfolio-customization-list-item:hover .h5[data-v-ff03d1f4] {
  color: var(--Asphalt-10);
}
.portfolio-customization-list-item.is-selected .h5[data-v-ff03d1f4] {
  color: var(--Asphalt-10);
}
.portfolio-customization-list-item.is-selected .portfolio-customization-list-arrow[data-v-ff03d1f4] {
  color: var(--Asphalt-10);
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 1023px) {
.portfolio-customization-list-item.is-selected .portfolio-customization-list-arrow[data-v-ff03d1f4] {
    transform: translateX(0) rotate(90deg);
}
}
.portfolio-customization-list-button[data-v-ff03d1f4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 24px 0;
  border: 0;
  background: transparent;
  font: inherit;
  letter-spacing: normal;
  text-align: left;
  cursor: pointer;
  gap: 0;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.portfolio-customization-list-button[data-v-ff03d1f4]:focus, .portfolio-customization-list-button[data-v-ff03d1f4]:focus-visible, .portfolio-customization-list-button[data-v-ff03d1f4]:active {
  outline: none;
  box-shadow: none;
  border: 0;
}
.portfolio-customization-list-button .h5[data-v-ff03d1f4] {
  margin: 0;
  color: var(--Asphalt-40);
  font-weight: 400;
  line-height: 1.2;
  transition: color 220ms ease;
}
.portfolio-customization-list-arrow[data-v-ff03d1f4] {
  flex-shrink: 0;
  margin-left: 1rem;
  color: var(--Asphalt-40);
  opacity: 0;
  transform: translateX(-0.375rem);
  transition: color 220ms ease, opacity 220ms ease, transform 220ms ease;
  width: 24px;
  height: 24px;
}
@media (max-width: 1023px) {
.portfolio-customization-list-arrow[data-v-ff03d1f4] {
    transform: translateX(-0.375rem) rotate(90deg);
}
}
.portfolio-customization-list-arrow path[data-v-ff03d1f4] {
  fill: currentColor;
}
.portfolio-customization-visual[data-v-ff03d1f4] {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 340px;
}
@media (max-width: 767px) {
.portfolio-customization-visual[data-v-ff03d1f4] {
    min-height: 220px;
}
}
@media (min-width: 1024px) {
.portfolio-customization-visual[data-v-ff03d1f4] {
    min-height: 480px;
}
}
.portfolio-customization-video-frame[data-v-ff03d1f4] {
  position: absolute;
  right: -8rem;
  bottom: -5rem;
  width: min(58vw, 760px);
  aspect-ratio: 16/10;
  box-sizing: border-box;
  overflow: hidden;
  padding: 8px;
  border-radius: 20px;
  background: rgba(254, 254, 254, 0.08);
}
@media (min-width: 1024px) {
.portfolio-customization-video-frame[data-v-ff03d1f4] {
    top: 14rem;
    width: min(58vw, 760px);
    aspect-ratio: auto;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.portfolio-customization-video-frame[data-v-ff03d1f4] {
    right: -13rem;
    bottom: -4rem;
    width: 90vw;
}
}
@media (max-width: 767px) {
.portfolio-customization-video-frame[data-v-ff03d1f4] {
    right: -32vw;
    bottom: -1.5rem;
    width: 120vw;
}
}
.portfolio-customization-video-mask[data-v-ff03d1f4] {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--Asphalt-100);
}
.portfolio-customization-video[data-v-ff03d1f4] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/TemplatesSection.vue?vue&type=style&index=0&id=43c15272&lang=scss&scoped=true ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.templates-section[data-v-43c15272] {
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 30rem;
}
@media (min-width: 768px) {
.templates-section[data-v-43c15272] {
    min-height: 34rem;
}
}
@media (min-width: 1024px) {
.templates-section[data-v-43c15272] {
    height: 664px;
    min-height: 664px;
}
}
.templates-section[data-v-43c15272] >  .content {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  height: 100%;
  min-height: 100%;
}
.templates-section[data-v-43c15272] .grid-20 {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100%;
}
.templates-section[data-v-43c15272] .grid-bg {
  height: 100%;
}
.templates-section[data-v-43c15272] .grid-bg.pull,
.templates-section[data-v-43c15272] .grid-bg.push {
  display: none;
}
.templates-section-content[data-v-43c15272] {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  pointer-events: none;
}
.templates-section-content[data-v-43c15272] > * {
  pointer-events: auto;
}
.templates-section-intro[data-v-43c15272] {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 96px 24px 3rem;
  text-align: center;
}
@media (min-width: 768px) {
.templates-section-intro[data-v-43c15272] {
    padding: 96px 2rem 3rem;
}
}
@media (min-width: 1024px) {
.templates-section-intro[data-v-43c15272] {
    gap: 2rem;
    padding: 96px 72px 4rem;
}
}
.templates-section-intro .h3[data-v-43c15272] {
  margin: 0;
  max-width: 600px;
  color: var(--Asphalt-100);
}
.templates-section-heading-highlight[data-v-43c15272] {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.templates-section-heading-highlight-text[data-v-43c15272] {
  position: relative;
  z-index: 1;
}
.templates-section-heading-highlight img[data-v-43c15272] {
  position: absolute;
  left: 50%;
  bottom: -0.26em;
  z-index: 0;
  width: 112%;
  height: 0.72em;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}
.templates-section-carousel[data-v-43c15272] {
  --template-slide-gap: 24px;
  --template-slide-width: 200px;
  flex-shrink: 0;
  width: 100%;
  margin-top: auto;
  overflow: hidden;
}
@media (min-width: 768px) {
.templates-section-carousel[data-v-43c15272] {
    --template-slide-gap: 28px;
    --template-slide-width: 248px;
}
}
@media (min-width: 1024px) {
.templates-section-carousel[data-v-43c15272] {
    --template-slide-gap: 32px;
    --template-slide-width: 324px;
}
}
.template-marquee[data-v-43c15272] {
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.template-marquee .rail[data-v-43c15272] {
  display: flex;
  align-items: flex-start;
}
.template-slides[data-v-43c15272] {
  display: flex;
  align-items: flex-start;
  gap: var(--template-slide-gap);
  padding-right: var(--template-slide-gap);
}
.template-slide[data-v-43c15272] {
  flex-shrink: 0;
  width: var(--template-slide-width);
}
@media (min-width: 1024px) {
.template-slide[data-v-43c15272] {
    border-radius: 12px;
}
}
.template-slide[data-v-43c15272] {
  box-sizing: border-box;
}
.template-slide .template-slide-preview[data-v-43c15272] {
  display: block;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.template-slide img[data-v-43c15272] {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border: 6px solid var(--asphalt10, #FEFEFE);
  border-radius: 16px;
  box-shadow: 0 0.75rem 1.75rem rgba(15, 15, 15, 0.06), 0 0.125rem 0.5rem rgba(15, 15, 15, 0.04);
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/logos/AppleLogo.vue?vue&type=style&index=0&id=ed27de80&lang=scss&scoped=true ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/
svg[data-v-ed27de80] {
  height: 48px;
  width: auto;
  max-width: 122px;
}
svg path[data-v-ed27de80] {
  fill: currentColor;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/logos/AmazonLogo.vue?vue&type=style&index=0&id=2ed068c4&lang=scss&scoped=true ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************/
svg[data-v-2ed068c4] {
  height: 48px;
  width: auto;
  max-width: 122px;
}
svg path[data-v-2ed068c4] {
  fill: currentColor;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/logos/DisneyLogo.vue?vue&type=style&index=0&id=7e354514&lang=scss&scoped=true ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************/
svg[data-v-7e354514] {
  height: 48px;
  width: auto;
  max-width: 122px;
}
svg path[data-v-7e354514] {
  fill: currentColor;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/logos/ExpediaLogo.vue?vue&type=style&index=0&id=f2477f8c&lang=scss&scoped=true ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************/
svg[data-v-f2477f8c] {
  height: 48px;
  width: auto;
  max-width: 122px;
}
svg path[data-v-f2477f8c] {
  fill: currentColor;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/logos/SalesForceLogo.vue?vue&type=style&index=0&id=7db1da7f&lang=scss&scoped=true ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************/
svg[data-v-7db1da7f] {
  height: 48px;
  width: auto;
  max-width: 122px;
}
svg path[data-v-7db1da7f] {
  fill: currentColor;
}
svg path.text[data-v-7db1da7f] {
  fill: var(--color-secondary-bg);
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/logos/OracleLogo.vue?vue&type=style&index=0&id=849f7384&lang=scss&scoped=true ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************/
svg[data-v-849f7384] {
  height: 48px;
  width: auto;
  max-width: 122px;
}
svg path[data-v-849f7384] {
  fill: currentColor;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/logos/GoogleLogo.vue?vue&type=style&index=0&id=bafa880e&scoped=true&lang=scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************/
svg[data-v-bafa880e] {
  height: 48px;
  width: auto;
  max-width: 122px;
}
svg path[data-v-bafa880e] {
  fill: currentColor;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/LogoWall.vue?vue&type=style&index=0&id=91dd4c20&lang=scss&scoped=true ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.logo-wall[data-v-91dd4c20] {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.logo-wall .content[data-v-91dd4c20] {
  display: flex;
  padding: 2rem 1rem 0 1rem;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 768px) {
.logo-wall .content[data-v-91dd4c20] {
    padding: 2rem;
    gap: 1rem;
}
}
@media (min-width: 1024px) {
.logo-wall .content[data-v-91dd4c20] {
    padding: 3rem 72px 0 72px;
    gap: 1.25rem;
}
}
.logo-wall .content .b3[data-v-91dd4c20] {
  color: var(--Asphalt-50);
}
.logo-wall .content .b3 span[data-v-91dd4c20] {
  color: var(--Asphalt-70);
  font-weight: 600;
}
.logo-wall .logo-wall-wrapper[data-v-91dd4c20] {
  padding: 24px 0;
  border-right: 1px solid var(--color-secondary-bg);
  border-left: 1px solid var(--color-secondary-bg);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
.logo-wall .logo-marquee[data-v-91dd4c20] {
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
}
.logo-wall .logo-marquee .rail[data-v-91dd4c20] {
  display: flex;
}
.logo-wall .logos[data-v-91dd4c20] {
  align-self: flex-start;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 3.75rem;
  padding: 0 3.75rem 0 0;
  overflow: hidden;
  color: var(--Asphalt-50);
  opacity: 1;
}
@media (min-width: 1024px) {
.logo-wall .logos[data-v-91dd4c20] {
    width: 100%;
    justify-content: space-evenly;
}
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/icons/CloseIcon.vue?vue&type=style&index=0&id=804abec4&lang=scss&scoped=true ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/
svg path[data-v-804abec4] {
  fill: var(--color-text);
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/publicPages/components/CookieConsentBox.vue?vue&type=style&index=0&id=19c5d9b0&lang=scss&scoped=true ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.cookie-consent-box[data-v-19c5d9b0] {
  display: flex;
  width: 22.6rem;
  max-width: 100%;
  padding: 1rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  background-color: var(--color-navigation-bg);
  backdrop-filter: blur(14px);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
}
@media (min-width: 768px) {
.cookie-consent-box[data-v-19c5d9b0] {
    width: 30.6rem;
    padding: 1.125rem 1.125rem 1.5rem 2rem;
}
}
@media (min-width: 1024px) {
.cookie-consent-box[data-v-19c5d9b0] {
    padding: 1.125rem 1.125rem 1.5rem 4rem;
}
}
.cookie-consent-box .top[data-v-19c5d9b0] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}
.cookie-consent-box .top p[data-v-19c5d9b0] {
  padding: 0.5rem 0;
}
.cookie-consent-box .bottom[data-v-19c5d9b0] {
  display: flex;
  gap: 1rem;
}
.cookie-consent-box .close[data-v-19c5d9b0] {
  background: none;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
}
.cookie-consent-box .close[data-v-19c5d9b0]:focus, .cookie-consent-box .close[data-v-19c5d9b0]:hover {
  outline: none;
}
.cookie-setting-container .container .row[data-v-19c5d9b0] {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  gap: 15px;
  align-items: center;
}
.cookie-setting-container .container .row h3[data-v-19c5d9b0] {
  font: var(--font-s3);
  color: var(--color-text);
  margin-bottom: 8px;
}
.cookie-setting-container .container .row p[data-v-19c5d9b0] {
  font: var(--font-c2);
  color: var(--color-text);
}
.cookie-setting-container .container .row .switch-data p[data-v-19c5d9b0] {
  color: var(--Success60);
}
.cookie-setting-container .container .row .switch-data .switch[data-v-19c5d9b0] {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  float: right;
  margin: 0 0 -5px 0;
}
.cookie-setting-container .container .row .switch-data .switch input[data-v-19c5d9b0] {
  display: none;
}
.cookie-setting-container .container .row .switch-data .switch .slider[data-v-19c5d9b0] {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 150ms;
  border-radius: 20px;
  background-color: var(--Asphalt-30);
}
.cookie-setting-container .container .row .switch-data .switch .slider.dark[data-v-19c5d9b0] {
  background-color: var(--Asphalt-60);
}
.cookie-setting-container .container .row .switch-data .switch .slider[data-v-19c5d9b0]:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  transition: 150ms;
  border-radius: 50%;
  background-color: var(--Asphalt-10);
}
.cookie-setting-container .container .row .switch-data .switch .slider:before.dark[data-v-19c5d9b0] {
  box-shadow: 0 0 4px 1px rgba(15, 15, 15, 0.2);
}
.cookie-setting-container .container .row .switch-data .switch input:checked + .slider[data-v-19c5d9b0] {
  background-color: var(--Success60);
}
.cookie-setting-container .container .row .switch-data .switch input:checked + .slider[data-v-19c5d9b0]:before {
  transform: translateX(20px);
}
.cookie-setting-container .container .row .switch-data .switch input:disabled + .slider[data-v-19c5d9b0] {
  background-color: var(--Asphalt-40);
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/scripts/view/Index.vue?vue&type=style&index=0&id=34dde848&lang=scss&global=true (1) ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************/
/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15; /* 1. Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  -moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
  tab-size: 4; /* 3 */
}

/*
Sections
========
*/
body {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
  text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bold;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
  box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
* {
  box-sizing: border-box;
}
:root {
  --Asphalt: #0F0F0F;
  --Asphalt-10: #FEFEFE;
  --Asphalt-15: #F9F9F9;
  --Asphalt-20: #EEEEEE;
  --Asphalt-30: #D1D1D1;
  --Asphalt-40: #A2A2A2;
  --Asphalt-50: #707070;
  --Asphalt-60: #484747;
  --Asphalt-70: #3D3D3D;
  --Asphalt-80: #333333;
  --Asphalt-90: #262626;
  --Asphalt-95: #1A1A1A;
  --Asphalt-100: #0F0F0F;
  --Snow: #FEFEFE;
  --Volt: #DCFA37;
  --Rain: #91939A;
  --Frost: #EEF0F6;
  --Stone: #3D3F45;
  --Success60: #10B981;
  --Error-40: #F87171;
  --Error-60: #DC2626;
  --Linear: linear-gradient(180deg, var(--Rain, #91939A) 37.12%, transparent 74.17%);
  --headlineFont: "Bricolage Grotesque", sans-serif;
  --font-headline-family: "Bricolage Grotesque", sans-serif;
  --bodyFont: "Work Sans", sans-serif;
  --font-body-family: "Work Sans", sans-serif;
  --font-h0: 500 54px/1.24 var(--font-headline-family);
  --font-h1: 500 44px/1.1 var(--font-headline-family);
  --font-h2: 500 36px/1.1 var(--font-headline-family);
  --font-h3: 500 32px/1.2 var(--font-headline-family);
  --font-h4: 500 24px/1.3 var(--font-headline-family);
  --font-h5: 400 16px/1.2 var(--font-headline-family);
  --font-h6: 400 14px/1.2 var(--font-headline-family);
  --font-s1: 500 1.6875rem/1.2 var(--font-headline-family);
  --font-s2: 500 1.1875rem/1.4 var(--font-headline-family);
  --font-s3: 600 0.8125rem/1.2 var(--font-body-family);
  --font-s4: 400 18px/1.2 var(--font-body-family);
  --font-b1: 400 15px/1.2 var(--font-body-family);
  --font-b2: 400 14px/1.2 var(--font-body-family);
  --font-b3: 400 0.75rem/1.35 var(--font-body-family);
  --font-c1: 400 0.75rem/1.3 var(--font-body-family);
  --font-c2: 400 0.75rem/1.3 var(--font-body-family);
}
@media (min-width: 768px) {
:root {
    --font-h0: 500 72px/1.22 var(--font-headline-family);
    --font-h1: 500 56px/1.1 var(--font-headline-family);
    --font-h2: 500 44px/1.1 var(--font-headline-family);
    --font-h3: 500 36px/1.2 var(--font-headline-family);
    --font-h4: 500 26px/1.3 var(--font-headline-family);
    --font-h5: 400 18px/1.2 var(--font-headline-family);
    --font-h6: 400 16px/1.2 var(--font-headline-family);
    --font-s1: 500 1.8125rem/1.2 var(--font-headline-family);
    --font-s2: 500 1.3125rem/1.2 var(--font-headline-family);
    --font-s3: 600 0.9375rem/1.2 var(--font-body-family);
    --font-s4: 400 20px/1.2 var(--font-body-family);
    --font-b1: 400 16px/1.2 var(--font-body-family);
    --font-b2: 400 15px/1.2 var(--font-body-family);
    --font-b3: 400 13px/1.35 var(--font-body-family);
    --font-c1: 400 0.875rem/1.3 var(--font-body-family);
    --font-c2: 400 0.75rem/1.3 var(--font-body-family);
}
}
@media (min-width: 1024px) {
:root {
    --font-h0: 500 4.5rem/1.2 var(--font-headline-family);
    --font-h1: 500 64px/1.2 var(--font-headline-family);
    --font-h2: 500 48px/1.2 var(--font-headline-family);
    --font-h3: 500 40px/1.2 var(--font-headline-family);
    --font-h4: 500 28px/1.3 var(--font-headline-family);
    --font-h5: 400 20px/1.2 var(--font-headline-family);
    --font-h6: 400 18px/1.2 var(--font-headline-family);
    --font-s1: 500 3rem/1.2 var(--font-headline-family);
    --font-s2: 500 1.5rem/1.2 var(--font-headline-family);
    --font-s3: 600 1.0625rem/1.3 var(--font-body-family);
    --font-s4: 400 24px/1.2 var(--font-body-family);
    --font-s5: 500 18px/1.2 var(--font-headline-family);
    --font-b1: 400 18px/1.4 var(--font-body-family);
    --font-b2: 400 16px/1.3 var(--font-body-family);
    --font-b3: 400 14px/1.4 var(--font-body-family);
    --font-c1: 400 0.875rem/1.3 var(--font-body-family);
    --font-c2: 400 0.75rem/1.3 var(--font-body-family);
}
}
.light-mode {
  --color-text: var(--Asphalt);
  --color-bg: var(--Snow);
  --color-bg-rgba: rgba(254, 254, 254, 0);
  --color-secondary-bg: #F3F3F3;
  --color-navigation-bg: rgba(254, 254, 254, 0.70);
  --color-examples-border: var(--Frost);
  --bannerBgColor: #212121;
  --color-btn-primary-bg: var(--Asphalt-100);
  --color-btn-primary-border: transparent;
  --color-btn-primary-text: var(--Asphalt-10);
  --color-btn-primary-bg-hover: var(--Asphalt-100);
  --color-btn-primary-text-hover: var(--Asphalt-10);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Asphalt);
  --color-btn-secondary-text: var(--Asphalt);
  --color-btn-secondary-bg-hover: var(--Asphalt);
  --color-btn-secondary-text-hover: var(--Snow);
  --color-btn-tertiary-bg: var(--Asphalt);
  --color-btn-tertiary-border: var(--Asphalt);
  --color-btn-tertiary-text: var(--Snow);
  --color-btn-tertiary-bg-hover: #393939;
  --color-btn-tertiary-border-hover: #393939;
  --color-btn-tertiary-text-hover: var(--Asphalt);
  --color-btn-inline-bg: transparent;
  --color-btn-inline-border: transparent;
  --color-btn-inline-text: var(--Asphalt);
  --color-btn-inline-text-hover: var(--Asphalt);
  --color-nav-link-text: var(--Asphalt);
  --color-form-elem-bg-disabled: var(--carbon20);
  --color-form-elem-border: var(--Asphalt-30);
  --color-form-elem-border-hover: var(--Asphalt-40);
  --color-form-elem-border-focus: var(--Asphalt);
  --color-form-elem-border-disabled: var(--Asphalt-30);
  --color-form-elem-border-error: var(--Error-60);
  --color-form-elem-label: var(--Asphalt-60);
  --color-form-elem-label-hover: var(--Asphalt-60);
  --color-form-elem-label-focus: var(--Asphalt-60);
  --color-form-elem-label-disabled: var(--Asphalt-60);
  --color-form-elem-text: var(--Asphalt-70);
  --color-form-elem-text-hover: var(--Asphalt-70);
  --color-form-elem-text-focus: var(--Asphalt-80);
  --color-form-elem-text-disabled: var(--Asphalt-70);
  --color-banner-bg: #212121;
  --color-banner-text: var(--Snow);
}
.light-mode .banner:not(.color) {
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Snow);
  --color-btn-secondary-text: var(--Snow);
  --color-btn-secondary-bg-hover: var(--Snow);
  --color-btn-secondary-text-hover: var(--Asphalt);
}
.light-mode {
  --color-cycle-text-inactive: var(--Stone);
  --color-cycle-text-active: var(--Asphalt);
  --color-cycle-switch-bg: #EDEDED;
  --color-cycle-active-bg: var(--Snow);
}
.dark-mode {
  --color-text: var(--Snow);
  --color-bg: var(--Asphalt);
  --color-bg-rgba: rgba(15, 15, 15, 0);
  --color-secondary-bg: #212121;
  --color-navigation-bg: rgba(15, 15, 15, 0.70);
  --color-examples-border: var(--Stone);
  --bannerBgColor: #F3F3F3;
  --color-btn-primary-bg: var(--Volt);
  --color-btn-primary-border: transparent;
  --color-btn-primary-text: var(--Asphalt);
  --color-btn-primary-bg-hover: var(--Snow);
  --color-btn-primary-text-hover: var(--Asphalt);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Snow);
  --color-btn-secondary-text: var(--Snow);
  --color-btn-secondary-bg-hover: var(--Snow);
  --color-btn-secondary-text-hover: var(--Asphalt);
  --color-btn-tertiary-bg: var(--Snow);
  --color-btn-tertiary-border: var(--Snow);
  --color-btn-tertiary-text: var(--Asphalt);
  --color-btn-tertiary-bg-hover: #393939;
  --color-btn-tertiary-border-hover: #393939;
  --color-btn-tertiary-text-hover: var(--Asphalt-10);
  --color-btn-inline-bg: transparent;
  --color-btn-inline-border: transparent;
  --color-btn-inline-text: var(--Snow);
  --color-btn-inline-text-hover: var(--Snow);
  --color-nav-link-text: var(--Snow);
  --color-banner-bg: #F3F3F3;
  --color-banner-text: var(--Asphalt);
  --color-form-elem-bg-disabled: var(--carbon20);
  --color-form-elem-border: var(--Asphalt-50);
  --color-form-elem-border-hover: var(--Asphalt-40);
  --color-form-elem-border-focus: var(--Asphalt-30);
  --color-form-elem-border-disabled: var(--Asphalt-50);
  --color-form-elem-border-error: var(--Error-40);
  --color-form-elem-label: var(--Asphalt-40);
  --color-form-elem-label-hover: var(--Asphalt-40);
  --color-form-elem-label-focus: var(--Asphalt-30);
  --color-form-elem-label-disabled: var(--Asphalt-40);
  --color-form-elem-text: var(--Asphalt-30);
  --color-form-elem-text-hover: var(--Asphalt-20);
  --color-form-elem-text-focus: var(--Asphalt-10);
  --color-form-elem-text-disabled: var(--Asphalt-30);
}
.dark-mode .banner {
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Asphalt);
  --color-btn-secondary-text: var(--Asphalt);
  --color-btn-secondary-bg-hover: var(--Asphalt);
  --color-btn-secondary-text-hover: var(--Snow);
}
.dark-mode {
  --color-cycle-text-inactive: var(--Snow);
  --color-cycle-text-active: var(--Asphalt);
  --color-cycle-switch-bg: var(--Stone);
  --color-cycle-active-bg: var(--Snow);
}
body {
  background-color: var(--background-fill-color, var(--color-bg));
}
.h0 {
  font: var(--font-h0);
  color: var(--color-text);
}
.h1 {
  font: var(--font-h1);
  color: var(--color-text);
}
.h2 {
  font: var(--font-h2);
  color: var(--color-text);
}
.h3 {
  font: var(--font-h3);
  color: var(--color-text);
}
.h4 {
  font: var(--font-h4);
  color: var(--color-text);
}
.h5 {
  font: var(--font-h5);
  color: var(--color-text);
}
.h6 {
  font: var(--font-h6);
  color: var(--color-text);
}
.s1 {
  font: var(--font-s1);
  color: var(--color-text);
}
.s2 {
  font: var(--font-s2);
  color: var(--color-text);
}
.s3 {
  font: var(--font-s3);
  color: var(--color-text);
}
.s4 {
  font: var(--font-s4);
  color: var(--color-text);
}
.s5 {
  font: var(--font-s5);
  color: var(--color-text);
}
.b1 {
  font: var(--font-b1);
  color: var(--color-text);
}
.b2 {
  font: var(--font-b2);
  color: var(--color-text);
}
.b3 {
  font: var(--font-b3);
  color: var(--color-text);
}
.c1 {
  font: var(--font-c1);
  color: var(--color-text);
}
.c2 {
  font: var(--font-c2);
  color: var(--color-text);
}
.content {
  width: 100%;
  max-width: 1440px;
  padding: 0 24px;
}
@media (min-width: 768px) {
.content {
    padding: 0 2rem;
}
}
@media (min-width: 1024px) {
.content {
    padding: 0 72px;
}
}
.grid-12 {
  --gridGap: 1rem;
  width: 100%;
  max-width: 1440px;
  padding: 0 24px;
  display: grid;
  gap: var(--gridGap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 768px) {
.grid-12 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    padding: 0 2rem;
}
}
@media (min-width: 1024px) {
.grid-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: 0 72px;
}
}
.grid-20 {
  --gridGap: 0;
  --colNum: 20;
}
@media (max-width: 1300px) {
.grid-20 {
    --colNum: 18;
}
}
@media (max-width: 1200px) {
.grid-20 {
    --colNum: 16;
}
}
@media (max-width: 1000px) {
.grid-20 {
    --colNum: 14;
}
}
@media (max-width: 900px) {
.grid-20 {
    --colNum: 12;
}
}
@media (max-width: 768px) {
.grid-20 {
    --colNum: 10;
}
}
@media (max-width: 480px) {
.grid-20 {
    --colNum: 8;
}
}
@media (max-width: 360px) {
.grid-20 {
    --colNum: 6;
}
}
.grid-20 {
  --gridFixer: 0;
}
@media (min-width: 1001px) {
.grid-20 {
    --gridFixer: 1;
}
}
@media (min-width: 1201px) {
.grid-20 {
    --gridFixer: 2;
}
}
@media (min-width: 1301px) {
.grid-20 {
    --gridFixer: 3;
}
}
.grid-20 {
  width: 100%;
  max-width: 1440px;
  display: grid;
  grid-template-columns: repeat(var(--colNum), minmax(0, var(--gridRow)));
  grid-auto-rows: var(--gridRow);
  gap: 0;
}
@media (min-width: 1456px) {
.grid-20 {
    grid-template-columns: repeat(var(--colNum), minmax(0, 65.6px));
    grid-auto-rows: 65.6px;
}
}
.divider {
  height: 0.5rem;
  align-self: stretch;
  background-color: var(--Volt);
}
@media (min-width: 1024px) {
.divider {
    height: 0.75rem;
}
}
p a {
  color: var(--color-text);
  text-decoration: underline;
}
p a:hover {
  color: var(--color-text);
  text-decoration: underline;
}
nav a {
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0.25rem 0;
  gap: 0.5rem;
  color: var(--color-nav-link-text);
  font-family: var(--font-headline-family);
  font-size: 0.75rem;
  font-weight: 450;
  line-height: 1;
  letter-spacing: -0.0225rem;
}
@media (min-width: 768px) {
nav a {
    font-size: 0.875rem;
    letter-spacing: -0.0175rem;
}
}
@media (min-width: 1024px) {
nav a {
    font-size: 1.125rem;
    letter-spacing: -0.0225rem;
}
}
nav a {
  position: relative;
}
nav a::after {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-nav-link-text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease-in-out;
}
nav a:hover, nav a.router-link-active {
  color: var(--color-text);
}
nav a:hover::after, nav a.router-link-active::after {
  transform: scaleX(1);
}
nav a span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
nav a span::after {
  content: attr(data-label);
  content: attr(data-label)/"";
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: 700;
}
@media speech {
nav a span::after {
    display: none;
}
}
.divider {
  height: 8px;
}
header {
  border-radius: 0.16606rem;
  background-color: var(--color-bg);
  display: flex;
  justify-content: center;
  position: sticky;
  -webkit-position: sticky;
  top: 0;
  z-index: 30;
}
header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--Asphalt-20);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
header.show-border::after {
  opacity: 1;
}
header .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
@media (min-width: 768px) {
header .logo {
    display: flex;
    flex: 1 0 0;
    justify-content: flex-start;
}
}
@media (max-width: 1023px) {
header .logo {
    width: auto;
}
header .logo a {
    width: 6rem;
}
header .logo svg {
    width: 100%;
}
}
header nav {
  display: flex;
  align-items: center;
  gap: 1.71556rem;
  align-self: stretch;
}
header nav svg {
  display: none;
}
header nav button.login {
  margin: 0.625rem 0;
}
@media (max-width: 767px) {
header nav {
    order: 3;
    width: 100%;
    height: 0;
    overflow: hidden;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
header nav.on {
    height: calc(100vh - 5.1rem);
    padding-top: 1.63rem;
}
header nav a {
    width: 100%;
    font-size: 1.1875rem;
    height: 4rem;
    display: flex;
    justify-content: space-between;
}
header nav a svg {
    display: block;
}
}
@media (min-width: 768px) {
header nav button.login {
    display: none;
}
}
header .actions {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 768px) {
header .actions {
    flex: 1 0 0;
    justify-content: flex-end;
}
}
@media (max-width: 767px) {
header .actions button.login {
    display: none;
}
}
@media (min-width: 768px) {
header .actions button.toggler {
    display: none;
}
}
footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
footer .top-footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  padding: 1rem 0;
}
@media (min-width: 768px) {
footer .top-footer {
    flex-direction: row;
    padding: 4rem 0;
    gap: 3.75rem;
}
}
@media (min-width: 1280px) {
footer .top-footer {
    padding: 7.5rem 0;
}
}
footer .top-footer .site-map {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 1rem;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 768px) {
footer .top-footer .site-map {
    padding-top: 0.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    gap: unset;
    width: unset;
}
}
@media (min-width: 1200px) {
footer .top-footer .site-map {
    width: 59.25rem;
    max-width: 100%;
}
}
footer .top-footer .site-map .category {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
@media (min-width: 768px) {
footer .top-footer .site-map .category {
    flex: 50%;
    width: unset;
    margin-bottom: 0.87rem;
}
}
@media (min-width: 1200px) {
footer .top-footer .site-map .category {
    flex: 1 0 0;
    margin-bottom: 0;
}
}
@media (max-width: 768px) {
footer .top-footer .site-map .category {
    gap: 0;
}
footer .top-footer .site-map .category nav {
    height: 0;
    overflow: hidden;
    display: none;
}
footer .top-footer .site-map .category.expanded nav {
    height: max-content;
    display: flex;
}
footer .top-footer .site-map .category.expanded .footer-category-arrow {
    transform: rotate(-90deg);
}
}
footer .top-footer .site-map .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.0625rem;
  width: 100%;
  padding: 0.75rem 0;
  color: var(--color-text);
  font-family: var(--font-headline-family);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.5;
}
footer .top-footer .site-map .title .footer-category-arrow {
  flex-shrink: 0;
  color: currentColor;
  transform: rotate(90deg);
  transition: transform 200ms ease;
}
@media (min-width: 768px) {
footer .top-footer .site-map .title {
    height: 3rem;
    font-size: 1.125rem;
    font-weight: 500;
}
footer .top-footer .site-map .title .footer-category-arrow {
    display: none;
}
}
footer .top-footer .site-map nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
}
footer .top-footer .site-map nav a {
  font-size: 0.875rem;
}
footer .bottom-footer {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  gap: 1rem;
}
@media (min-width: 768px) {
footer .bottom-footer {
    flex-direction: row;
    align-items: center;
    padding: 1.5rem 0;
}
}
footer .bottom-footer .cc {
  padding: 0.875rem 0;
}
footer .controls {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
footer .controls button {
  font-size: 0.75rem;
}
footer .controls .footer-back-to-top-arrow {
  transform: rotate(-90deg);
}
.landing-cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  height: 2.75rem;
  padding: 0 20px;
  font-family: var(--font-headline-family);
  font-weight: 500;
  line-height: 1;
  font-size: 0.875rem;
  letter-spacing: -0.015rem;
  border: 2px solid;
  transition: all 200ms ease-in-out;
  gap: 0.375rem;
}
.landing-cta svg {
  width: 1.25rem;
  height: 1.25rem;
}
@media (min-width: 768px) {
.landing-cta {
    height: 3rem;
    font-size: 1rem;
    letter-spacing: -0.0175rem;
    padding: 0 20px;
}
}
@media (min-width: 1024px) {
.landing-cta {
    height: 3.375rem;
    font-size: 1.125rem;
    letter-spacing: -0.0225rem;
    padding: 0 20px;
    gap: 0.5rem;
}
.landing-cta svg {
    width: 1.5rem;
    height: 1.5rem;
}
}
.landing-cta:focus {
  outline: none;
}
.landing-cta span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.landing-cta span::after {
  content: attr(data-label);
  content: attr(data-label)/"";
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: 700;
}
@media speech {
.landing-cta span::after {
    display: none;
}
}
.landing-cta.primary, .landing-cta.submit {
  box-sizing: border-box;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  padding: 0 20px;
  border-radius: 8px;
  background-color: var(--color-btn-primary-bg);
  border-color: var(--color-btn-primary-border);
  color: var(--color-btn-primary-text);
  font-size: 16px;
  font-weight: 450;
  letter-spacing: 0;
}
.landing-cta.primary svg path, .landing-cta.submit svg path {
  fill: var(--color-btn-primary-text);
  transition: fill 300ms ease-in-out;
}
.landing-cta.primary:not(.toggler):hover svg, .landing-cta.submit:not(.toggler):hover svg {
  transform: translateX(3px);
}
.landing-cta.secondary {
  box-sizing: border-box;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 450;
  letter-spacing: 0;
  border-width: 1px;
  background-color: var(--color-btn-secondary-bg);
  border-color: var(--color-btn-secondary-border);
  color: var(--color-btn-secondary-text);
  border-radius: 8px;
}
.landing-cta.secondary svg path {
  fill: var(--color-btn-secondary-text);
  transition: fill 300ms ease-in-out;
}
.landing-cta.secondary:not(.toggler):hover svg {
  transform: translateX(3px);
}
.landing-cta.tertiary {
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  font-size: 14px;
  font-weight: 450;
  background-color: var(--color-btn-tertiary-bg);
  border-color: var(--color-btn-tertiary-border);
  color: var(--color-btn-tertiary-text);
  border-radius: 8px;
}
.landing-cta.tertiary svg {
  transform: translateY(-1px);
}
.landing-cta.tertiary:hover svg {
  transform: translate(3px, -1px);
}
.landing-cta.inline {
  background-color: var(--color-btn-inline-bg);
  border-color: var(--color-btn-inline-border);
  color: var(--color-btn-inline-text);
  padding: 0.25rem 0;
  position: relative;
  border: none;
  height: unset;
}
.landing-cta.inline svg path {
  fill: var(--color-btn-inline-text);
  transition: fill 200ms ease-in-out;
}
.landing-cta.inline::after {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--color-nav-link-text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease-in-out;
}
.landing-cta.inline:hover::after, .landing-cta.inline.active::after {
  transform: scaleX(1);
}
.landing-cta.has-arrow {
  gap: 4px;
  padding-left: 20px;
  padding-right: 20px;
}
.landing-cta.has-arrow .button-arrow-icon {
  transition: transform 220ms ease-in-out;
}
.landing-cta.has-arrow:hover .button-arrow-icon {
  transform: translateX(3px);
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow {
  position: relative;
  overflow: hidden;
  gap: 0;
  padding-left: 20px;
  padding-right: 20px;
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow .button-arrow-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  opacity: 0;
  transform: translate(-12px, -50%);
  transition: transform 220ms ease-in-out, opacity 180ms ease-in-out;
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow span {
  transition: transform 220ms ease-in-out;
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow.tertiary .button-arrow-icon {
  top: 50%;
  transform: translate(-12px, -50%);
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow:hover .button-arrow-icon {
  opacity: 1;
  transform: translate(0, -50%);
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow:hover span {
  transform: translateX(8px);
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow:hover.tertiary span {
  transform: translateX(6px);
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow:hover.tertiary .button-arrow-icon {
  transform: translate(0, -50%);
}
.public-page-icon-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.landing ::selection {
  background: var(--Volt);
  color: black;
}
.landing .logo svg path {
  fill: var(--color-text);
}
.landing .features-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 24px 64px;
  text-align: center;
}
.landing .features-intro .h3 {
  max-width: 640px;
  margin: 0;
}
.landing .features-intro .features-intro-highlight {
  position: relative;
  display: inline-block;
}
.landing .features-intro .features-intro-highlight-text {
  position: relative;
  z-index: 1;
}
.landing .features-intro .features-intro-highlight img {
  position: absolute;
  left: 50%;
  bottom: -0.26em;
  z-index: 0;
  width: 112%;
  height: 0.72em;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

/*# sourceMappingURL=public-pages.e2754d2c826700e19a1d.css.map*/