@layer hubspot, reset;

@layer properties {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif,
                system-ui,
                sans-serif,
                "Apple Color Emoji",
                "Segoe UI Emoji",
                "Segoe UI Symbol",
                "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace,
                SFMono-Regular,
                Menlo,
                Monaco,
                Consolas,
                "Liberation Mono",
                "Courier New",
                monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer theme {
  :root, :host {
    --it-color-beige-100: oklch(94% .004 85);
    --it-color-beige-200: oklch(90% .004 85);
    --it-color-beige-300: oklch(86% .008 89);
    --it-color-beige-400: oklch(83% .004 85);
    --it-color-beige-550: oklch(97% .004 78);
    --it-color-green-100: oklch(37% .032 178);
    --it-color-green-200: oklch(39% .048 177);
    --it-color-green-300: oklch(41% .056 175);
    --it-color-green-400: oklch(46% .076 174);
    --it-color-green-500: oklch(53% .028 178);
    --it-color-green-550: oklch(70% .016 181);
    --it-color-green-700: oklch(37% .012 178);
    --it-color-orange-100: oklch(68% .212 41);
    --it-color-orange-200: oklch(71% .192 44);
    --it-color-orange-300: oklch(74% .172 46);
    --it-color-orange-400: oklch(75% .16 47);
    --it-color-orange-500: oklch(96% .02 52);
    --it-color-gray-500: oklch(74.76% 0 0);
    --it-color-gray-700: oklch(56.24% 0 0);
    --it-color-status-default: oklch(37% 0 90);
    --it-color-status-success: oklch(46% .076 174);
    --it-color-status-error: oklch(59% .2 26);
    --it-color-shades-base: oklch(75% 0 90);
    --it-color-shades-semi: oklch(93% 0 90);
    --it-color-shades-light: #fcfcfc;
    --it-color-shades-dark: oklch(29% 0 90);
    --it-color-state-inactive: oklch(89% 0 106);
    --it-color-state-inactive-text: oklch(78% 0 90);
    --it-color-brand-orange: var(--it-color-orange-100);
    --it-color-brand-green: var(--it-color-green-100);
    --it-color-brand-beige: var(--it-color-beige-100);
    --it-color-brand-white: #fff;
    --it-color-disabled-form: oklch(89% 0 106);
    --it-color-hover-beige: var(--it-color-beige-550);
    --it-color-orange-hover: var(--it-color-orange-400);
    --it-color-orange-plain: var(--it-color-orange-500);
    --it-body-bg: var(--it-color-beige-100);
    --it-focus-outline-color: oklch(56.35% .2408 260.82);
    --it-font-poppins: "Poppins", sans-serif;
    --it-font-dmserif: "Dm Serif", serif;
    --it-font-size-base-multipler: 1rem;
    --it-container-xl: 1320px;
    --it-container-desktop: 1120px;
    --it-container-tablet: 960px;
    --it-container-mobile: 720px;
    --it-container-margin-desktop: 24px;
    --it-container-margin-tablet: 24px;
    --it-container-margin-mobile: 24px;
    --it-container-padding-x-desktop: var(--it-gutter);
    --it-container-padding-x-mobile: 35px;
    --it-gutter: 24px;
    --it-shadow-input: 0px 4px 4px 0px #c9c7c333;
    --it-shadow-card: 0 3px 6px 0 #0000001a;
    --it-radius-small: calc(4 / 16 * 1rem);
    --it-radius-medium: calc(8 / 16 * 1rem);
    --it-radius-big: calc(10 / 16 * 1rem);
    --it-radius-large: calc(30 / 16 * 1rem);
    --it-radius-full: 9999px;
    --it-control-border-color: transparent;
    --it-control-border-width: 2px;
    --it-control-border-radius: var(--it-radius-large);
    --it-control-bg: white;
    --it-control-bg-focus: var(--it-color-brand-beige);
    --it-control-bg-disabled: var(--it-color-beige-100);
    --it-control-color: var(--it-color-brand-green);
    --it-control-color-placeholder: var(--it-color-gray-700);
    --it-control-color-disabled: var(--it-color-shades-base);
    --it-control-border-color-hover: var(--it-color-green-400);
    --it-control-border-color-focus: var(--it-color-orange-400);
    --it-control-shadow: 0 3px 6px 0 #00000029;
    --it-text-transform-x: 10px;
    --it-text-transition: transform .325s ease-in-out;
    --it-btn-focus-outline: var(--it-focus-outline-color);
    --it-btn-orange-active: oklch(72% .18 55);
    --it-btn-orange-disabled-color: oklch(83% .1 60);
    --it-btn-green-active: oklch(40% .04 170);
    --it-btn-green-disabled-color: oklch(80% .032 173);
  }
}

@layer base {
  html[lang^="ja"] body, html[lang^="zh"] body, html[lang^="ko"] body {
    line-break: strict;
    overflow-wrap: normal;
    word-break: break-all;
  }

  p {
    margin: 0 0 1.4rem;
  }

  a {
    cursor: pointer;
  }

  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--it-font-dmserif);
    margin: 0 0 1.4rem;
  }

  h1, .h1 {
    font-family: var(--it-font-poppins);
    font-size: calc(75 / 16 * var(--it-font-size-base-multipler));
    font-weight: 600;
    line-height: 1;
  }

  h2, .h2 {
    font-size: calc(60 / 16 * var(--it-font-size-base-multipler));
    line-height: 1.1;
  }

  h3, .h3 {
    font-size: calc(50 / 16 * var(--it-font-size-base-multipler));
    line-height: 1;
  }

  h4, .h4 {
    font-size: calc(40 / 16 * var(--it-font-size-base-multipler));
    line-height: 1.15;
  }

  h5, .h5 {
    font-family: var(--it-font-poppins);
    font-size: calc(34 / 16 * var(--it-font-size-base-multipler));
    font-weight: 600;
    line-height: 1.2;
  }

  h6, .h6 {
    font-size: calc(36 / 16 * var(--it-font-size-base-multipler));
    font-weight: 600;
    line-height: 1.2;
  }

  .lead {
    font-size: calc(36 / 16 * var(--it-font-size-base-multipler));
    line-height: 1.15;
    font-family: var(--it-font-poppins);
  }

  li {
    margin-bottom: 8px;
  }

  .info {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }

  ul {
    padding-left: 22px;
    list-style: outside;
  }

  ul.no-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
  }

  .input .hs-form-checkbox, .input .hs-form-booleancheckbox {
    padding-left: 0;
  }

  pre {
    overflow: auto;
  }

  code {
    vertical-align: bottom;
  }

  blockquote {
    border-left: 2px solid;
    margin: 0 0 1.4rem;
    padding-left: .7rem;
  }

  hr {
    border: none;
    border-bottom: 1px solid #ccc;
  }

  img {
    word-break: normal;
    font-size: .583rem;
  }

  br {
    content: "";
    margin-bottom: var(--it-gutter);
    display: block;
  }

  strong {
    font-weight: 500;
  }

  input:not(:is([type="checkbox"], [type="radio"], [type="submit"], [type="range"])), textarea {
    border: 2px solid var(--it-control-border-color);
    border-radius: var(--it-control-border-radius);
    width: 100%;
    box-shadow: var(--it-control-shadow);
    background: var(--it-control-bg);
    padding: 8px 32px;
    font-size: 1.25rem;
    line-height: 1.85;
    transition: background-color .125s ease-out, outline .125s ease-out, border-color .125s ease-out;

    &::placeholder {
      color: var(--it-control-color-placeholder);
    }

    &:hover {
      background: var(--it-control-bg-focus);
    }

    &:focus, &:focus-visible, &[data-state="open"] {
      outline: 2px solid var(--it-focus-outline-color);
      outline-offset: 2px;
    }

    &[aria-invalid="true"] {
      border-color: var(--it-color-status-error);
    }
  }

  .form-error, .hsfc-ErrorAlert {
    color: var(--it-color-status-error);
    margin: 8px 0 0 3px;
    font-size: .75rem;
    line-height: 1;
    display: block;
  }

  input[type="checkbox"], .hsfc-CheckboxInput {
    --border-color: var(--it-control-border-color);
    --bg-color: white;
    all: unset;
    border: 2px solid var(--border-color);
    box-sizing: border-box;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    background-color: var(--bg-color);
    width: 24px;
    height: 24px;
    box-shadow: var(--it-control-shadow);
    border-radius: 2px;
    transition: border-color .15s, background-color .15s;
  }

  input[type="checkbox"]:disabled {
    --bg-color: var(--it-color-beige-100);
    --color: var(--it-control-color-disabled);
    --border-color: var(--bg-color);
    pointer-events: none;
  }

  input[type="checkbox"]:not(:disabled):hover {
    --border-color: var(--it-control-border-color-hover);
  }

  input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%3E%20%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E");
  }

  input[type="checkbox"]:checked:not([disabled]) {
    --bg-color: var(--it-color-brand-orange);
    --border-color: var(--bg-color);
  }
}

@layer components {
  .button, .btn, .hsfc-Button {
    --base-color: var(--it-color-brand-orange);
    --bg: var(--base-color);
    --border-color: var(--base-color);
    --border-width: 2px;
    --transition-speed: .15s;
    --padding-y: 12px;
    --padding-x: 38px;
    --color: white;
    --font-size: 1.125rem;
    --line-height: 1.35;
    --font-weight: 400;
    --icon-color: var(--base-color);
    --icon-spacing: 14px;
    --icon-size: 36px;
    --text-shift: -18px;
    cursor: pointer;
    color: var(--color);
    padding: var(--padding-y) var(--padding-x);
    transition: all var(--transition-speed) ease-out;
    background-color: var(--bg);
    border-color: var(--border-color);
    border-width: var(--border-width);
    border-radius: var(--it-radius-full);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: var(--font-weight);
    border-style: solid;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    gap: .25rem;
    display: inline-flex;
    position: relative;

    &:focus, &:focus-visible {
      outline: 1.5px solid var(--it-btn-focus-outline);
      outline-offset: 1px;
    }

    &.disabled, &[disabled], &:disabled {
      pointer-events: none;
      cursor: default;

      & > .inline-icon {
        display: none;
      }
    }

    &:hover:not(.disabled):not(:disabled):not([disabled]):not(.no-icon), &:focus:not(.disabled):not(:disabled):not([disabled]):not(.no-icon), &:active:not(.disabled):not(:disabled):not([disabled]):not(.no-icon) {
      & > .text {
        transform: translateX(var(--text-shift));
        transition-duration: .325s;
      }

      & > .inline-icon {
        opacity: 1;
        visibility: inherit;
        transition-duration: .275s;
        transition-delay: 75ms;
        transition-timing-function: ease-out;
      }
    }

    & > .text {
      transition: transform .25s ease-in-out;
    }

    & > .inline-icon {
      right: var(--icon-spacing);
      width: var(--icon-size);
      height: var(--icon-size);
      color: var(--icon-color);
      opacity: 0;
      visibility: hidden;
      transition: opacity .225s ease-in, visibility .225s ease-in;
      transition-delay: 0;
      background: #fff;
      border-radius: 50%;
      justify-content: center;
      align-items: center;
      display: flex;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);

      & > svg {
        width: 100%;
        padding: 20%;
      }
    }
  }

  .button.primary, .btn.btn-primary {
    &:active {
      --bg: var(--it-btn-orange-active);
    }

    &.disabled, &[disabled], &:disabled {
      --bg: #fff;
      --color: var(--it-btn-orange-disabled-color);
      --border-color: var(--it-btn-orange-disabled-color);
    }
  }

  .button.secondary, .btn.btn-secondary {
    --base-color: var(--it-color-brand-green);

    &:active {
      --bg: var(--it-btn-green-active);
    }

    &.disabled, &[disabled], &:disabled {
      --bg: #fff;
      --color: var(--it-btn-green-disabled-color);
      --border-color: var(--it-btn-green-disabled-color);
    }
  }

  .button.text, .btn.btn-text, .button.icon, .button-icon, .btn.btn-icon {
    &:hover, &:focus {
      & > .inline-icon {
        background: var(--base-color);
        color: #fff;
      }
    }

    &:active {
      & > .inline-icon {
        background: var(--it-btn-green-active);
        color: #fff;
      }
    }

    & > .inline-icon {
      opacity: 1;
      visibility: inherit;
      border: 1.5px solid var(--base-color);
      color: var(--base-color);
      background: none;
      transition: background .325s ease-out, border-color .325s ease-out, color .325s ease-out;
      position: static;
      transform: none;
    }
  }

  .button.text, .btn.btn-text {
    --base-color: var(--it-color-brand-green);
    --bg: transparent;
    --color: var(--base-color);
    --font-size: calc(15 / 16 * 1rem);
    --line-height: calc(22 / 15);
    --font-weight: 500;
    transition: var(--it-text-transition);
    border: 0;
    border-radius: 0;
    padding: 0;

    &:hover, &:focus {
      transform: translateX(var(--it-text-transform-x));

      & > .text {
        transform: none;
      }
    }

    &:active {
      --color: var(--it-btn-green-active);
      --base-color: var(--it-btn-green-active);
      transform: translateX(var(--it-text-transform-x));

      & > .text {
        transform: none;
      }
    }

    &:focus, &:focus-visible {
      outline: 1.5px solid var(--it-btn-focus-outline);
      outline-offset: 4px;
      border-radius: var(--it-radius-full);
    }

    &.disabled, &[disabled], &:disabled {
      --color: var(--it-btn-green-disabled-color);
      --base-color: var(--it-btn-green-disabled-color);
      opacity: 1;

      & > .inline-icon {
        border-color: var(--it-btn-green-disabled-color);
        color: var(--it-btn-green-disabled-color);
        background: #fff;
        display: flex;
      }
    }

    & > .inline-icon {
      margin-left: 10px;
    }
  }

  .button.text.white, .btn.btn-text.btn-white {
    --base-color: var(--it-color-brand-white);
    --color: var(--it-color-brand-white);
    --font-weight: 400;

    &:active {
      --color: var(--it-color-beige-550);
      --base-color: var(--it-color-beige-550);
    }

    &.disabled, &:disabled {
      --color: var(--it-color-brand-beige);
      --base-color: var(--it-color-brand-beige);
    }

    &:hover, &:focus, &:active {
      & > .inline-icon {
        background: var(--it-color-brand-white);
        color: var(--it-color-brand-green);
      }
    }
  }

  .button.text.orange, .btn.btn-text.btn-orange {
    --base-color: var(--it-color-brand-orange);
    --color: var(--it-color-brand-orange);
    --font-weight: 400;

    &:active {
      --color: var(--it-color-orange-300);
      --base-color: var(--it-color-orange-300);
    }

    &.disabled, &:disabled {
      --color: var(--it-color-orange-400);
      --base-color: var(--it-color-orange-400);
    }
  }

  .button.text.text-only, .btn.btn-text.btn-text-only {
    --font-size: calc(12 / 16 * 1rem);
    --line-height: calc(16 / 12);
    --font-weight: 400;

    &:hover, &:focus, &:active {
      transform: none;
    }

    &:focus, &:focus-visible {
      outline: 1.5px solid var(--it-btn-focus-outline);
      outline-offset: 4px;
      border-radius: var(--it-radius-full);
    }

    &:hover, &:active {
      text-underline-offset: 4px;
      text-decoration: underline;
    }
  }

  .button.outline, .btn.btn-outline {
    --bg: transparent;
    --color: var(--base-color);
    --border-color: var(--base-color);

    &:hover {
      --bg: var(--base-color);
      --color: #fff;
    }

    &:focus {
      --bg: transparent;
      --color: var(--base-color);
    }

    &:active {
      --bg: var(--base-color);
      --color: #fff;
      opacity: .8;
    }

    &.disabled, &[disabled], &:disabled {
      --bg: transparent;
    }
  }

  .button.small, .btn.btn-sm {
    --font-size: .75rem;
    --padding-x: 1.25rem;
    --padding-y: .25rem;
    --icon-size: 22px;
    --icon-spacing: 6px;
    --text-shift: -10px;
  }

  .button.large, .btn.btn-lg {
    --font-size: 1.375rem;
    --padding-x: 48px;
    --padding-y: 16px;
    --icon-size: 42px;
    --icon-spacing: 18px;
    --text-shift: -22px;
  }

  .button.text.large, .btn.btn-text.btn-lg {
    --font-size: calc(28 / 16 * 1rem);
  }

  .button.text.small, .btn.btn-text.btn-sm {
    --font-size: calc(15 / 16 * 1rem);
  }

  .button.icon, .button-icon, .btn.btn-icon {
    --bg: transparent;
    --color: var(--it-color-brand-orange);
    --border-width: 0;
    --padding-x: 0;
    --padding-y: 0;
    --min-height: calc(32 / 16 * 1rem);
    --icon-size: calc(32 / 16 * 1rem);
    height: var(--icon-size);
    width: var(--icon-size);
    padding: 0;

    & > svg, & > .inline-icon {
      width: 100%;
      height: 100%;
    }
  }

  .button.no-icon:not(.outline):not(.btn-outline), .btn.no-icon:not(.outline):not(.btn-outline) {
    &:hover {
      --bg: transparent;
      --color: var(--base-color);
      --border-color: var(--base-color);
    }
  }

  .button.outline.no-icon, .btn.btn-outline.no-icon {
    &:hover {
      --bg: var(--base-color);
      --color: #fff;
    }
  }

  form, fieldset {
    gap: var(--it-gutter);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .form-fieldset, fieldset {
    margin-bottom: 1rem;
  }

  .form-fieldset-legend, fieldset > legend {
    margin-bottom: .75rem;
    font-weight: 600;
    display: block;
  }

  select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M16.59%208.58984L12%2013.1698L7.41%208.58984L6%209.99984L12%2015.9998L18%209.99984L16.59%208.58984Z%22%20fill%3D%22currentColor%22%20%2F%3E%20%3C%2Fsvg%3E");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding-right: 48px;
  }

  select[multiple].form-control, textarea {
    resize: vertical;
    min-height: 13.25rem;
  }

  .form-checkbox-inner {
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    display: flex;
  }

  .form-checkbox-inner label {
    cursor: pointer;
  }

  .multi-checkbox {
    --columns: 1;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: .25rem 1rem;
    display: grid;
  }

  .burgermenu {
    cursor: pointer;
    background: none;
    border: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 11px;
    width: 36px;
    height: 36px;
    margin-left: auto;
    padding: 0;
    display: inline-flex;

    & .bar-item {
      background: currentColor;
      width: 100%;
      height: 2px;
      transition: transform .225s ease-in-out;
      display: block;
    }
  }

  .burgermenu.open {
    & .bar-item:first-child {
      transform: translateY(6px) rotate(45deg);
    }

    & .bar-item:last-child {
      transform: translateY(-6px) rotate(-45deg);
    }
  }

  ol {
    --it-ol-marker-size: calc(28 / 16 * 1rem);
    --it-ol-marker-font-size: calc(20 / 16 * 1rem);
    --it-ol-marker-bg: var(--it-color-brand-green);
    --it-ol-marker-color: var(--it-color-shades-light);
    --it-ol-text-color: inherit;
    counter-reset: ordered-list-item;
    margin: 0;
    padding-left: 0;
    list-style: none;

    & > li {
      counter-increment: ordered-list-item;
      color: var(--it-ol-text-color);
      align-items: center;
      margin-bottom: 12px;
      display: flex;

      &:last-child {
        margin-bottom: 0;
      }

      &:before {
        content: counter(ordered-list-item);
        width: var(--it-ol-marker-size);
        height: var(--it-ol-marker-size);
        border-radius: var(--it-radius-full);
        background: var(--it-ol-marker-bg);
        color: var(--it-ol-marker-color);
        font-family: var(--it-font-dmserif);
        font-size: var(--it-ol-marker-font-size);
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        margin-right: 2rem;
        line-height: 1;
        display: inline-flex;
      }
    }

    &.marker-orange {
      --it-ol-marker-bg: var(--it-color-brand-orange);
    }

    &.marker-green {
      --it-ol-marker-bg: var(--it-color-brand-green);
    }

    &.marker-beige {
      --it-ol-marker-bg: var(--it-color-brand-beige);
      --it-ol-marker-color: var(--it-color-brand-green);
    }

    &.marker-text-light {
      --it-ol-marker-color: var(--it-color-shades-light);
    }

    &.marker-text-green {
      --it-ol-marker-color: var(--it-color-brand-green);
    }

    &.marker-text-orange {
      --it-ol-marker-color: var(--it-color-brand-orange);
    }

    &.text-orange {
      --it-ol-text-color: var(--it-color-brand-orange);
    }

    &.text-green {
      --it-ol-text-color: var(--it-color-brand-green);
    }

    &.marker-sm {
      --it-ol-marker-size: calc(15 / 16 * 1rem);
      --it-ol-marker-font-size: calc(10 / 16 * 1rem);
    }

    &.marker-md {
      --it-ol-marker-size: calc(28 / 16 * 1rem);
      --it-ol-marker-font-size: calc(20 / 16 * 1rem);
    }

    &.marker-lg {
      --it-ol-marker-size: calc(60 / 16 * 1rem);
      --it-ol-marker-font-size: calc(40 / 16 * 1rem);
    }

    &.bordered, &.border-beige, &.border-green, &.border-orange {
      & > li {
        border-bottom: 1px solid var(--it-ol-border-color);
        padding-bottom: 12px;

        &:last-child {
          border-bottom: none;
          padding-bottom: 0;
        }
      }
    }

    &.bordered, &.border-beige {
      --it-ol-border-color: var(--it-color-beige-300);
    }

    &.border-green {
      --it-ol-border-color: var(--it-color-green-550);
    }

    &.border-orange {
      --it-ol-border-color: var(--it-color-orange-300);
    }

    &[style*="upper-roman"], &.counter-upper-roman {
      & > li:before {
        content: counter(ordered-list-item, upper-roman);
      }
    }

    &[style*="upper-alpha"], &.counter-upper-alpha {
      & > li:before {
        content: counter(ordered-list-item, upper-alpha);
      }
    }

    &[style*="lower-roman"], &.counter-lower-roman {
      & > li:before {
        content: counter(ordered-list-item, lower-roman);
      }
    }

    &[style*="lower-alpha"], &.counter-lower-alpha {
      & > li:before {
        content: counter(ordered-list-item, lower-alpha);
      }
    }

    &[style*="lower-greek"], &.counter-lower-greek {
      & > li:before {
        content: counter(ordered-list-item, lower-greek);
      }
    }
  }

  .checked-list {
    margin: 0;
    padding-left: 0;
    list-style: none;

    & > li {
      align-items: center;
      margin-bottom: 12px;
      padding: 0 0 0 2.5em;
      display: flex;
      position: relative;

      &:last-child {
        margin-bottom: 0;
      }

      &:before {
        content: "";
        background: var(--it-color-brand-green);
        z-index: 1;
        width: 1.1em;
        height: 1.1em;
        position: absolute;
        top: .2em;
        left: 0;
        mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2027%2027%22%3E%20%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M13.333%200c7.36%200%2013.334%205.973%2013.334%2013.333s-5.974%2013.334-13.334%2013.334S0%2020.693%200%2013.333%205.973%200%2013.333%200m-2.668%2015.466-3.467-3.467-1.866%201.867%205.333%205.333L21.332%208.532l-1.866-1.866z%22%2F%3E%20%3C%2Fsvg%3E");
      }

      &:after {
        content: "";
        background: #fff;
        border-radius: 50%;
        width: 1.1em;
        height: 1.1em;
        position: absolute;
        top: .2em;
        left: 0;
        transform: scale(.8);
      }

      & > :is(p, h1, h2, h3, h4, h5, h6) {
        margin: 0;
      }
    }
  }

  .card {
    border-radius: var(--it-radius-large);
    box-shadow: var(--it-shadow-card);
    background: #fff;
    flex-direction: column;
    gap: 1rem;
    padding: 1.125rem 2rem;
    display: flex;
  }

  .card-header {
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    display: flex;
  }

  .card-body {
    flex: 1;
  }

  .card-footer {
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    display: flex;
  }

  .card ul {
    margin: 0;
    padding-left: 0;
    list-style: none;

    & > li {
      align-items: center;
      margin-bottom: 12px;
      padding: 0 0 0 55px;
      display: flex;
      position: relative;

      &:last-child {
        margin-bottom: 0;
      }

      &:before {
        content: "";
        background: var(--it-color-brand-green);
        width: 30px;
        height: 30px;
        position: absolute;
        top: .4em;
        left: 0;
        mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2027%2027%22%3E%20%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M13.333%200c7.36%200%2013.334%205.973%2013.334%2013.333s-5.974%2013.334-13.334%2013.334S0%2020.693%200%2013.333%205.973%200%2013.333%200m-2.668%2015.466-3.467-3.467-1.866%201.867%205.333%205.333L21.332%208.532l-1.866-1.866z%22%2F%3E%20%3C%2Fsvg%3E");
      }

      & > :is(p, h1, h2, h3, h4, h5, h6) {
        margin: 0;
      }
    }
  }
}

@layer utilities {
  .sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .icon {
    flex-shrink: 0;
  }
}

@layer app;

.custom-slider {
  -webkit-appearance: none;
  appearance: none;
  background: var(--it-color-beige-300);
  border-radius: 5px;
  outline: none;
  width: 100%;
  height: 10px;
}

.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: 8px solid var(--it-color-brand-orange);
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

.custom-slider::-moz-range-thumb {
  border: 8px solid var(--it-color-brand-orange);
  cursor: pointer;
  box-sizing: content-box;
  background: #fff;
  border-radius: 50%;
  width: 15px;
  height: 15px;
}

.custom-slider::-moz-range-track {
  background: none;
  border: none;
}

@custom-media --xl screen and (width >= 1400px);

@custom-media --desktop screen and (width <= 1199px);

@custom-media --tablet screen and (width <= 991px);

@custom-media --mobile screen and (width <= 767px);

body {
  --bs-gutter-x: calc(var(--it-gutter) / 2);
  font-family: var(--it-font-poppins);
  overflow-wrap: break-word;
  color: var(--it-color-brand-green);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.5;
}

@media screen and (width <= 767px) {
  :root, :host {
    --it-font-size-base-multipler: .8rem;
  }

  body {
    font-size: 1.125rem;
  }

  .container, .container-fluid {
    padding-right: var(--it-container-padding-x-mobile);
    padding-left: var(--it-container-padding-x-mobile);
  }
}