.asset {
      line-height: 0;
      position: relative
    }

    .asset--mobile-shadow {
      overflow: hidden
    }

    @media(max-width: calc(1024px - 1px)) {
      .asset--mobile-shadow {
        max-width: 450px;
        margin: 0 auto
      }
    }

    .asset--mobile-shadow img {
      position: relative;
      z-index: 2
    }

    .asset--mobile-shadow:before {
      content: "";
      display: block
    }

    @media(max-width: calc(1024px - 1px)) {
      .asset--mobile-shadow:before {
        transform: translateX(-50%);
        position: absolute;
        bottom: -25px;
        left: 50%;
        width: 125%;
        height: 50px;
        background-image: url("../images/shadow.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: bottom;
        z-index: 1;
        opacity: .25
      }
    }

    .video-controls {
      height: 100%;
      position: relative;
      width: 100%;
      z-index: 10;
      pointer-events: none
    }

    .video-controls .video-controls__button {
      align-items: center;
      background: #fff;
      border: 1px solid #e8eaed;
      border-radius: 50%;
      bottom: 20px;
      cursor: pointer;
      display: flex;
      position: absolute;
      height: 40px;
      justify-content: center;
      right: 20px;
      width: 40px;
      pointer-events: all
    }

    .video-controls .video-controls__button .pause-icon {
      display: none
    }

    .video-controls .video-controls__button .play-icon {
      display: block;
      position: relative;
      left: 3px
    }

    .video-controls .video-controls__button svg rect,
    .video-controls .video-controls__button svg path {
      transition: fill .3s ease;
      fill: #3c4043
    }

    .video-controls .video-controls__button:hover {
      cursor: pointer
    }

    .video-controls .video-controls__button:hover svg rect,
    .video-controls .video-controls__button:hover svg path {
      fill: #1a73e8
    }

    .video-controls .video-controls__button.is-playing .pause-icon {
      display: block
    }

    .video-controls .video-controls__button.is-playing .play-icon {
      display: none
    }

    .video-controls .video-controls-label {
      display: none
    }

    .video-controls--5050slide {
      height: 0;
      position: absolute;
      bottom: 0
    }

    @media(max-width: calc(1024px - 1px)) {
      .video-controls--5050slide {
        display: none
      }
    }

    .video-controls--fullwidth-cards {
      height: 0;
      position: absolute;
      bottom: 0
    }

    @media(max-width: calc(1024px - 1px)) {
      .video-controls--fullwidth-cards {
        display: none
      }
    }

    .video-controls--absolute {
      position: absolute
    }

    .video-controls--industry-tablet {
      aspect-ratio: 600/533;
      position: absolute;
      width: 600px;
      height: auto
    }

    @media(max-width: calc(1024px - 1px)) {
      .video-controls--industry-tablet {
        width: 550px
      }
    }

    .video-controls--industry-mobile {
      aspect-ratio: 319/285;
      position: absolute;
      width: 319px;
      height: auto;
      transform: translateY(-32px)
    }

    .video-controls--feature {
      position: absolute
    }

    @media(max-width: calc(1024px - 1px)) {
      .video-controls--feature {
        top: -35px
      }
    }

    .video-controls--circle-video {
      position: absolute;
      max-width: 450px
    }

    .video-controls--circle-video .video-controls__button {
      bottom: 0
    }

    .fullbleed-5050--aerial-view-3d-customization .video-controls--feature {
      width: 450px
    }

    @media(max-width: calc(1024px - 1px)) {
      .fullbleed-5050--aerial-view-3d-customization .video-controls--feature {
        width: 100%;
        top: 0
      }
    }

    .fullwidth-cards__cards__card .video-controls--feature {
      top: 0
    }

    .button {
      --background-color: #1a73e8;
      --background-color-hover: #185abc;
      --background-color-focus: #185abc;
      --background-color-active: #185abc;
      --background-color-disabled: #f8f9fa;
      --box-shadow: none;
      --box-shadow-hover: 0px 1px 2px rgba(60, 64, 67, 0.3), 0px 1px 4px rgba(60, 64, 67, 0.25);
      --box-shadow-focus: 0px 1px 2px rgba(60, 64, 67, 0.3), 0px 1px 4px rgba(60, 64, 67, 0.25);
      --box-shadow-focus-accessible: 0 0 0 4px #1a73e8;
      --box-shadow-active: 0px 1px 2px rgba(60, 64, 67, 0.3), 0px 1px 4px rgba(60, 64, 67, 0.25);
      --box-shadow-disabled: none;
      --color: #fff;
      --color-hover: #fff;
      --color-focus: #fff;
      --color-active: #fff;
      --color-disabled: #9aa0a6;
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .25px;
      line-height: 20px;
      align-items: center;
      -moz-appearance: none;
      appearance: none;
      -webkit-appearance: none;
      background: var(--background-color);
      border: 1px solid transparent;
      border-radius: 4px;
      box-shadow: var(--box-shadow);
      color: var(--color);
      cursor: pointer;
      display: inline-flex;
      justify-content: center;
      padding: 12px 24px;
      text-decoration: none;
      text-rendering: optimizeLegibility;
      transition: background-color .2s, box-shadow .2s, color .2s
    }

    .button:hover {
      background: var(--background-color-hover);
      box-shadow: var(--box-shadow-hover);
      color: var(--color-hover)
    }

    .button:focus {
      background: var(--background-color-focus);
      box-shadow: var(--box-shadow-focus-accessible);
      color: var(--color-focus)
    }

    .button:focus:not(:focus-visible) {
      box-shadow: var(--box-shadow-focus)
    }

    .button:active {
      background: var(--background-color-active);
      box-shadow: var(--box-shadow-active);
      color: var(--color-active)
    }

    .button:disabled {
      background: var(--background-color-disabled);
      box-shadow: var(--box-shadow-disabled);
      color: var(--color-disabled)
    }

    .button[disabled] {
      pointer-events: none
    }

    .button--medium {
      --background-color: #fff;
      --background-color-hover: linear-gradient(0deg, rgba(26, 115, 232, 0.04), rgba(26, 115, 232, 0.04)), #fff;
      --background-color-focus: linear-gradient(0deg, rgba(26, 115, 232, 0.12), rgba(26, 115, 232, 0.12)), #fff;
      --background-color-active: linear-gradient(0deg, rgba(26, 115, 232, 0.1), rgba(26, 115, 232, 0.1)), #fff;
      --background-color-disabled: #f8f9fa;
      --box-shadow: 0 0 0 1px #dadce0;
      --box-shadow-hover: 0 0 0 1px #1a73e8;
      --box-shadow-focus: 0 0 0 1px #1a73e8;
      --box-shadow-focus-accessible: 0 0 0 2px #1a73e8;
      --box-shadow-active: 0 0 0 1px #1a73e8;
      --box-shadow-disabled: 0 0 0 1px #dadce0;
      --color: #1a73e8;
      --color-hover: #174ea6;
      --color-focus: #174ea6;
      --color-active: #174ea6;
      --color-disabled: #9aa0a6
    }

    .button--medium.button--reversed {
      --background-color: #000;
      --box-shadow: 0 0 0 1px #fff;
      --box-shadow-disabled: 0 0 0 1px #9aa0a6;
      --color: #fff
    }

    .button--low {
      --background-color: transparent;
      --background-color-hover: rgba(26, 115, 232, 0.04);
      --background-color-focus: rgba(26, 115, 232, 0.12);
      --background-color-active: rgba(26, 115, 232, 0.1);
      --background-color-disabled: transparent;
      --box-shadow: none;
      --box-shadow-hover: none;
      --box-shadow-focus: none;
      --box-shadow-focus-accessible: 0 0 0 2px #1a73e8;
      --box-shadow-active: none;
      --box-shadow-disabled: none;
      --color: #1a73e8;
      --color-hover: #174ea6;
      --color-focus: #174ea6;
      --color-active: #174ea6;
      --color-disabled: #9aa0a6
    }

    .button--low.button--reversed {
      --color: #669df6
    }

    .button--low.button--reversed-white {
      --color: #fff
    }

    .button--tonal {
      --background-color: #e8f0fe;
      --background-color-hover: linear-gradient(0deg, rgba(26, 115, 232, 0.04), rgba(26, 115, 232, 0.04)), #e8f0fe;
      --background-color-focus: linear-gradient(0deg, rgba(26, 115, 232, 0.12), rgba(26, 115, 232, 0.12)), #e8f0fe;
      --background-color-active: linear-gradient(0deg, rgba(26, 115, 232, 0.1), rgba(26, 115, 232, 0.1)), #e8f0fe;
      --background-color-disabled: transparent;
      --box-shadow: none;
      --box-shadow-hover: 0px 1px 2px rgba(60, 64, 67, 0.3), 0px 1px 4px rgba(60, 64, 67, 0.25);
      --box-shadow-focus: 0px 1px 2px rgba(60, 64, 67, 0.3), 0px 1px 4px rgba(60, 64, 67, 0.25);
      --box-shadow-focus-accessible: 0 0 0 2px #1a73e8;
      --box-shadow-active: 0px 1px 2px rgba(60, 64, 67, 0.3), 0px 1px 4px rgba(60, 64, 67, 0.25);
      --box-shadow-disabled: none;
      --color: #1a73e8;
      --color-hover: #174ea6;
      --color-focus: #174ea6;
      --color-active: #174ea6;
      --color-disabled: #9aa0a6
    }

    .button--transparent-white {
      --background-color: transparent;
      --background-color-hover: #fff;
      --background-color-focus: #fff;
      --background-color-active: #fff;
      --background-color-disabled: transparent;
      --box-shadow: none;
      --box-shadow-hover: none;
      --box-shadow-focus: none;
      --box-shadow-focus-accessible: 0 0 0 2px #1a73e8;
      --box-shadow-active: none;
      --box-shadow-disabled: none;
      --color: #fff;
      --color-hover: #174ea6;
      --color-focus: #174ea6;
      --color-active: #174ea6;
      --color-disabled: #9aa0a6;
      border: 1px solid #fff;
      border-radius: 4px;
      padding: 12px 24px
    }

    .button--link,
    .button--link-large {
      background-color: transparent;
      border-radius: 0;
      color: #1a73e8;
      padding: 0;
      position: relative
    }

    .button--link:visited,
    .button--link-large:visited {
      color: #1a73e8
    }

    .button--link:focus,
    .button--link-large:focus,
    .button--link:hover,
    .button--link-large:hover {
      background-color: transparent;
      box-shadow: none;
      color: #1a73e8
    }

    .button--link:focus:after,
    .button--link-large:focus:after,
    .button--link:hover:after,
    .button--link-large:hover:after {
      background-color: #1a73e8;
      bottom: 0;
      content: "";
      display: block;
      height: 2px;
      left: 0;
      position: absolute;
      right: 0
    }

    .button--link:focus:focus,
    .button--link-large:focus:focus,
    .button--link:hover:focus {
      box-shadow: 0 0 0 2px #aecbfa
    }

    .button--link:active,
    .button--link-large:active {
      background-color: transparent
    }

    .button--link:focus,
    .button--link-large:focus {
      background-color: transparent
    }

    .button--link-large {
      font-size: 19px !important;
      line-height: 24px !important
    }

    .button--link-large span {
      font-size: 19px !important;
      line-height: 24px !important
    }

    .button--link-cta {
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 500
    }

    .button--icon {
      background-color: transparent;
      border-radius: 0;
      padding: 0 30px 0 0;
      position: relative
    }

    .button--icon:after {
      background-color: #1a73e8;
      bottom: 0;
      content: "";
      display: block;
      height: 2px;
      left: 0;
      position: absolute;
      right: 30px;
      opacity: 0;
      transition: opacity .3s ease
    }

    .button--icon span {
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 500;
      color: #1a73e8;
      display: inline-block;
      position: relative
    }

    .button--icon span:after {
      content: attr(icon);
      font-size: 140%;
      font-family: "Material Icons";
      position: absolute;
      right: -32px;
      top: 50%;
      transform: translate3d(0, -50%, 0);
      -webkit-font-feature-settings: "liga"
    }

    .button--icon:visited {
      color: #1a73e8
    }

    .button--icon:focus,
    .button--icon:hover {
      background-color: transparent;
      box-shadow: none
    }

    .button--icon:focus:after,
    .button--icon:hover:after {
      opacity: 1
    }

    .button--icon:focus:focus,
    .button--icon:hover:focus {
      box-shadow: 0 0 0 2px #aecbfa
    }

    .button--icon:active {
      background-color: transparent
    }

    .button--icon:focus {
      background-color: transparent
    }

    .button--icon svg {
      margin-left: 10px
    }

    .button--icon-left {
      background-color: transparent;
      border-radius: 0;
      padding: 0 0 0 30px;
      position: relative
    }

    .button--icon-left:after {
      background-color: #1a73e8;
      bottom: 0;
      content: "";
      display: block;
      height: 2px;
      left: 30px;
      position: absolute;
      opacity: 0;
      transition: opacity .3s ease
    }

    .button--icon-left span {
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 500;
      color: #1a73e8;
      display: inline-block;
      position: relative
    }

    .button--icon-left span:after {
      content: attr(icon);
      font-size: 140%;
      font-family: "Material Icons";
      position: absolute;
      left: -30px;
      top: 50%;
      transform: translate3d(0, -50%, 0);
      -webkit-font-feature-settings: "liga"
    }

    .button--icon-left:visited {
      color: #1a73e8
    }

    .button--icon-left:focus,
    .button--icon-left:hover {
      background-color: transparent;
      box-shadow: none
    }

    .button--icon-left:focus:after,
    .button--icon-left:hover:after {
      opacity: 1
    }

    .button--icon-left:focus:focus,
    .button--icon-left:hover:focus {
      box-shadow: 0 0 0 2px #aecbfa
    }

    .button--icon-left:active {
      background-color: transparent
    }

    .button--icon-left:focus {
      background-color: transparent
    }

    .button--icon-left svg {
      margin-left: 10px
    }

    .button--badge {
      display: block;
      padding: 0;
      background-color: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      line-height: 0
    }

    .button--tag {
      --color: #5f6368;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 500;
      background: transparent;
      padding: 3.5px 16px;
      border: 1px solid #1967d2;
      border-radius: 33px
    }

    .button--tag:hover,
    .button--tag:focus {
      color: #fff;
      background: #1967d2
    }

    @media(max-width: 325px) {
      .button--tag {
        font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        color: #3c4043;
        padding: 3.5px 14px
      }
    }

    .button--default-pill {
      font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
      font-size: 14px;
      line-height: 24px;
      letter-spacing: .15px;
      color: #3c4043;
      background: transparent;
      border-radius: 33px;
      border: 1px solid rgba(128, 134, 139, .7);
      color: #80868b;
      font-weight: bold;
      letter-spacing: 2px;
      margin-left: 0 !important;
      margin-right: auto;
      margin-bottom: 16px;
      padding: 10px 32px;
      pointer-events: none;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap
    }

    .button--default-pill:hover {
      background-color: initial;
      box-shadow: initial;
      color: #80868b;
      cursor: default
    }

    @media(min-width: 1024px) {
      .button--default-pill:not(:last-child) {
        margin-right: 16px
      }
    }

    .button--pill {
      font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
      font-size: 14px;
      line-height: 24px;
      letter-spacing: .15px;
      color: #3c4043;
      background-color: #fff;
      border-radius: 33px;
      border: 1px solid #1a73e8;
      color: #80868b;
      font-weight: bold;
      letter-spacing: 2px;
      margin-left: 0 !important;
      margin-right: auto;
      margin-bottom: 16px;
      padding: 10px 32px;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap
    }

    @media(min-width: 1024px) {
      .button--pill:not(:last-child) {
        margin-right: 16px
      }
    }

    .button--pill:hover {
      background-color: #1a73e8;
      box-shadow: 0px 2px 8px rgba(0, 0, 0, .25);
      color: #fff
    }

    .button--pill:focus {
      border: 1px solid #fff
    }

    .button+.button {
      margin-left: 10px
    }

    @media(max-width: calc(1024px - 1px)) {
      .button--laptop-desktop-only {
        display: none !important
      }
    }

    @media(min-width: 1024px) {
      .button--mobile-tablet-only {
        display: none !important
      }
    }

    .container {
      margin: 0 auto
    }

    @media(max-width: calc(600px - 1px)) {
      .container {
        padding: 0 24px;
        max-width: 600px
      }
    }

    @media(min-width: 600px)and (max-width: calc(1024px - 1px)) {
      .container {
        padding: 0 min(5vw, 72px);
        max-width: 600px
      }
    }

    @media(min-width: 1024px)and (max-width: calc(1440px - 1px)) {
      .container {
        padding: 0 min(5vw, 72px)
      }
    }

    @media(min-width: 1440px) {
      .container {
        padding: 0 min(5vw, 72px);
        max-width: 1440px
      }
    }

    .container-grid {
      margin: 0 auto;
      display: grid;
      -moz-column-gap: var(--grid-column-gap);
      column-gap: var(--grid-column-gap)
    }

    @media(max-width: calc(600px - 1px)) {
      .container-grid {
        padding: 0 24px;
        max-width: 600px
      }
    }

    @media(min-width: 600px)and (max-width: calc(1024px - 1px)) {
      .container-grid {
        padding: 0 min(5vw, 72px);
        max-width: 600px
      }
    }

    @media(min-width: 1024px)and (max-width: calc(1440px - 1px)) {
      .container-grid {
        padding: 0 min(5vw, 72px)
      }
    }

    @media(min-width: 1440px) {
      .container-grid {
        padding: 0 min(5vw, 72px);
        max-width: 1440px
      }
    }

    @media(max-width: calc(600px - 1px)) {
      .container-grid {
        --grid-column-gap: 24px
      }
    }

    @media(min-width: 600px)and (max-width: calc(1024px - 1px)) {
      .container-grid {
        --grid-column-gap: 24px
      }
    }

    @media(min-width: 1024px)and (max-width: calc(1440px - 1px)) {
      .container-grid {
        --grid-column-gap: 44px
      }
    }

    @media(min-width: 1440px) {
      .container-grid {
        --grid-column-gap: 64px
      }
    }

    @media(max-width: calc(600px - 1px)) {
      .container-grid {
        grid-template-columns: repeat(4, 1fr)
      }
    }

    @media(min-width: 600px)and (max-width: calc(1024px - 1px)) {
      .container-grid {
        grid-template-columns: repeat(4, 1fr)
      }
    }

    @media(min-width: 1024px)and (max-width: calc(1440px - 1px)) {
      .container-grid {
        grid-template-columns: repeat(12, 1fr)
      }
    }

    @media(min-width: 1440px) {
      .container-grid {
        grid-template-columns: repeat(12, 1fr)
      }
    }

    [data-html] ul {
      list-style: disc
    }

    [data-html]>*:last-child {
      margin-bottom: 0
    }

    [data-html] h3 {
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 24px;
      line-height: 32px;
      font-weight: 400;
      font-style: normal
    }

    @media(min-width: 600px) {
      [data-html] h3 {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -0.25px
      }
    }

    @media(min-width: 1024px) {
      [data-html] h3 {
        font-size: 36px;
        line-height: 44px
      }
    }

    [data-html] h4 {
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 20px;
      line-height: 28px;
      margin: 16px 0
    }

    @media(min-width: 600px) {
      [data-html] h4 {
        font-size: 24px;
        line-height: 32px
      }
    }

    @media(min-width: 1024px) {
      [data-html] h4 {
        font-size: 28px;
        line-height: 36px
      }
    }

    [data-html] p {
      margin-top: 0;
      margin-bottom: 4px
    }

    .language-selector {
      border: 1px solid #dadce0;
      border-radius: 6px;
      cursor: pointer;
      height: 38px;
      list-style: none;
      min-width: 200px;
      padding: 0;
      position: relative
    }

    .language-selector[hidden] {
      display: block
    }

    .language-selector__arrow {
      position: absolute;
      top: 50%;
      right: 10px;
      pointer-events: none;
      transform: translate3d(0, -50%, 0);
      transition: transform .2s linear
    }

    .language-selector__arrow.expanded {
      transform: rotate(-180deg)
    }

    .language-selector__arrow svg {
      display: block
    }

    .language-selector__list {
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid #dadce0;
      border-radius: 6px;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: opacity .1s cubic-bezier(0, 0, 0.38, 0.9), max-height .3s cubic-bezier(0, 0, 0.38, 0.9);
      visibility: hidden;
      width: 100%
    }

    .language-selector__list--footer {
      max-height: 100px;
      top: -344px
    }

    .language-selector__list-container {
      position: relative
    }

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

    .language-selector__list-item {
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .25px;
      line-height: 20px;
      color: #3c4043;
      list-style-position: inside;
      padding: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: background-color .1s linear, color .1s linear;
      white-space: nowrap
    }

    .language-selector__list-item:hover {
      background-color: #f1f3f4
    }

    .language-selector__list-item:focus {
      background-color: #e4f7fb
    }

    .language-selector__selected {
      display: flex;
      align-items: center;
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .25px;
      line-height: 20px;
      color: #3c4043;
      height: 100%;
      list-style-position: inside;
      overflow: hidden;
      padding: 0 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%
    }

    .language-selector__list--open {
      background: #fff;
      box-shadow: 0px 12px 34px rgba(32, 52, 89, .15);
      max-height: 308px;
      opacity: 1;
      overflow: auto;
      padding: 10px 0;
      visibility: visible;
      z-index: 1
    }

    [data-degu-youtube-modal-video-id] {
      cursor: pointer
    }

    .degu-youtube-modal {
      display: none;
      height: 100%;
      left: 0;
      opacity: 0;
      position: fixed;
      top: 0;
      transform: scale(1.15);
      transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
      visibility: hidden;
      width: 100%;
      z-index: 2000
    }

    .degu-youtube-modal--enabled {
      display: block
    }

    .degu-youtube-modal--visible {
      opacity: 1;
      transform: scale(1);
      visibility: visible
    }

    .degu-youtube-modal__x {
      align-items: center;
      background: #000;
      border: 2px solid rgba(99, 96, 96, .6);
      border-radius: 50%;
      color: #fff;
      cursor: pointer;
      display: flex;
      font-size: 50px;
      height: 50px;
      justify-content: center;
      line-height: 50px;
      opacity: .8;
      overflow: hidden;
      position: absolute;
      right: 3.69853vw;
      text-align: center;
      top: 3.69853vw;
      transition: all .3s;
      width: 50px;
      z-index: 2003
    }

    .degu-youtube-modal__x:before {
      content: "×";
      display: block;
      font-family: "arial", sans-serif;
      font-size: 40px;
      height: 40px;
      line-height: 1;
      text-align: center;
      margin-top: 2px;
      width: 40px
    }

    .degu-youtube-modal__x:hover {
      color: #000;
      background: #fff
    }

    .degu-youtube-modal__mask {
      background: #000;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 2001
    }

    .degu-youtube-modal__player {
      height: calc(100vh - 7.39707vw);
      left: 50%;
      max-height: .5625;
      max-width: 1.7777777778;
      position: absolute;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 77.80879vw;
      z-index: 2002
    }

    @-webkit-keyframes fade-in {
      0% {
        opacity: 0
      }

      100% {
        opacity: 1
      }
    }

    @keyframes fade-in {
      0% {
        opacity: 0
      }

      100% {
        opacity: 1
      }
    }

    @-webkit-keyframes fade-out {
      0% {
        opacity: 1
      }

      100% {
        opacity: 0
      }
    }

    @keyframes fade-out {
      0% {
        opacity: 1
      }

      100% {
        opacity: 0
      }
    }

    @-webkit-keyframes arrow {
      0% {
        transform: translate3d(0, 0, 0)
      }

      50% {
        transform: translate3d(20px, 0, 0)
      }

      100% {
        transform: translate3d(0, 0, 0)
      }
    }

    @keyframes arrow {
      0% {
        transform: translate3d(0, 0, 0)
      }

      50% {
        transform: translate3d(20px, 0, 0)
      }

      100% {
        transform: translate3d(0, 0, 0)
      }
    }

    @-webkit-keyframes zoom {
      0% {
        transform: scale(1)
      }

      100% {
        transform: scale(1.1)
      }
    }

    @keyframes zoom {
      0% {
        transform: scale(1)
      }

      100% {
        transform: scale(1.1)
      }
    }

    @-webkit-keyframes fade-up {
      0% {
        opacity: 0;
        transform: translate3d(0, 35px, 0)
      }

      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
      }
    }

    @keyframes fade-up {
      0% {
        opacity: 0;
        transform: translate3d(0, 35px, 0)
      }

      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
      }
    }

    .sf-sort {
      position: relative;
      z-index: 2;
      padding: 0 24px
    }

    @media(min-width: 1024px) {
      .sf-sort {
        padding: 0 64px
      }
    }

    .sf-sort__chapter {
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
      position: relative
    }

    .sf-sort__chapter__background,
    .sf-sort__chapter__background img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      -o-object-fit: cover;
      object-fit: cover
    }

    .sf-sort__chapter__inner {
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column
    }

    @media(min-width: 1024px) {
      .sf-sort__chapter__inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 16px 0 0
      }
    }

    @media(min-width: 1024px) {
      .sf-sort__chapter__inner svg {
        margin-right: 16px;
        margin-top: -5px
      }
    }

    .sf-sort__chapter__headline,
    .sf-sort__chapter__subheadline,
    .sf-sort__chapter__inner svg {
      position: relative;
      z-index: 1
    }

    .sf-sort__chapter__headline {
      color: #202124;
      font-family: "Google Sans Display", "Google Sans", "Roboto", Arial, sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 28px;
      line-height: 36px;
      margin: 16px 0 0;
      text-align: center;
      z-index: 1
    }

    @media(min-width: 600px) {
      .sf-sort__chapter__headline {
        font-size: 40px;
        line-height: 48px;
        letter-spacing: -0.5px
      }
    }

    @media(min-width: 1024px) {
      .sf-sort__chapter__headline {
        font-size: 48px;
        line-height: 56px
      }
    }

    @media(min-width: 1024px) {
      .sf-sort__chapter__headline {
        margin: 0
      }
    }

    .sf-sort__chapter__subheadline {
      font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
      font-size: 18px;
      line-height: 28px;
      color: #3c4043;
      margin: 16px 0 0;
      text-align: center;
      z-index: 1
    }

    .sf-sort__controls {
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 24px;
      row-gap: 16px
    }

    @media(min-width: 1024px) {
      .sf-sort__controls {
        row-gap: 20px
      }
    }

    @media(min-width: 1440px) {
      .sf-sort__controls {
        display: flex;
        flex-direction: row
      }
    }

    .sf-sort__text-row {
      display: flex;
      flex-direction: column;
      -moz-column-gap: 4px;
      column-gap: 4px;
      row-gap: 16px;
      position: relative;
      align-items: center
    }

    @media(min-width: calc(480px + 1px)) {
      .sf-sort__text-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: no-wrap
      }
    }

    .sf-sort__text-row:first-child {
      z-index: 2
    }

    @media(min-width: 1024px) {
      .sf-sort__text-row {
        row-gap: 20px
      }
    }

    @media(max-width: calc(1024px - 1px)) {
      .sf-sort__text-row {
        width: 100%
      }
    }

    @media(min-width: 1440px) {
      .sf-sort__text-row:last-child {
        margin-left: 8px
      }
    }

    .sf-sort__text {
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 20px;
      line-height: 28px;
      white-space: nowrap
    }

    @media(min-width: 600px) {
      .sf-sort__text {
        font-size: 24px;
        line-height: 32px
      }
    }

    @media(min-width: 1024px) {
      .sf-sort__text {
        font-size: 28px;
        line-height: 36px
      }
    }

    @media(max-width: calc(1024px - 1px)) {
      .sf-sort__cta {
        margin-top: 8px
      }
    }

    @media(min-width: 1024px) {
      .sf-sort__cta {
        margin-left: 16px
      }
    }

    .sf-sort--card {
      padding: 0;
      border-radius: 24px;
      box-shadow: 0px 12px 34px rgba(32, 52, 89, .25)
    }

    .sf-sort--card img {
      border-radius: 24px
    }

    @media(min-width: 1440px) {
      .sf-sort--card .sf-sort__text-row {
        margin-right: 8px
      }
    }

    .sf-sort--card .sf-sort__chapter__inner {
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column
    }

    .sf-sort--card .sf-sort__chapter__inner img {
      position: relative;
      height: 58px;
      width: 48px;
      z-index: 1
    }

    .sf-sort--card .sf-sort__chapter {
      padding: 30px 24px
    }

    .sf-sort--card .sf-sort__controls {
      flex-wrap: wrap;
      margin: 0;
      padding: 40px 24px;
      background: #1a73e8;
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 24px
    }

    .sf-sort--card .sf-select {
      --select-color: #fff;
      --select-background: transparent;
      --select-arrow-color: #fff;
      max-width: calc(100% - 48px)
    }

    .sf-sort--card .sf-select:focus-within {
      --select-background: #fff;
      --select-color: #1a73e8;
      --select-arrow-color: #1a73e8
    }

    .sf-sort--card .sf-select::before {
      transition: all .3s ease-in
    }

    .sf-sort--card .sf-select:hover:not(:focus-within) {
      --select-background: #1967d2
    }

    .sf-sort--card .sf-select--active {
      --select-background: #fff;
      --select-color: #1a73e8;
      --select-arrow-color: #1a73e8
    }

    .sf-sort--card .sf-select--open {
      --select-color: #1a73e8;
      --select-arrow-color: #1a73e8;
      max-width: 100%
    }

    @media(min-width: calc(480px + 1px)) {
      .sf-sort--card .sf-select--open {
        max-width: calc(100% - 48px)
      }
    }

    .sf-sort--card .sf-sort__text {
      color: #fff
    }

    @keyframes fade-in {
      0% {
        opacity: 0
      }

      100% {
        opacity: 1
      }
    }

    @keyframes fade-out {
      0% {
        opacity: 1
      }

      100% {
        opacity: 0
      }
    }

    @keyframes arrow {
      0% {
        transform: translate3d(0, 0, 0)
      }

      50% {
        transform: translate3d(20px, 0, 0)
      }

      100% {
        transform: translate3d(0, 0, 0)
      }
    }

    @keyframes zoom {
      0% {
        transform: scale(1)
      }

      100% {
        transform: scale(1.1)
      }
    }

    @keyframes fade-up {
      0% {
        opacity: 0;
        transform: translate3d(0, 35px, 0)
      }

      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
      }
    }

    .sf-select {
      --select-width: 100%;
      --select-height: 48px;
      --select-border: #E4E4E4;
      --select-padding: 24px;
      --select-background: #fff;
      --select-color: #1a73e8;
      --select-arrow-color: #1a73e8;
      position: relative;
      cursor: pointer;
      color: var(--select-color);
      box-sizing: border-box
    }

    @media(min-width: 1024px) {
      .sf-select {
        transition: width 0ms ease 500ms
      }
    }

    @media(min-width: 1024px) {
      .sf-select {
        --select-height: 60px
      }
    }

    .sf-select:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: var(--select-width);
      height: var(--select-height);
      min-height: 100%;
      box-sizing: border-box;
      border: 1px solid var(--select-border);
      border-radius: 30px;
      background: var(--select-background);
      z-index: 0;
      transition: height 500ms cubic-bezier(0.34, 1.56, 0.64, 1), width 500ms cubic-bezier(0.22, 1, 0.36, 1), background 500ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 750ms;
      transition-delay: 100ms;
      min-width: 100%;
      white-space: nowrap
    }

    @media(max-width: calc(1024px - 1px)) {
      .sf-select:before {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% + 1px)
      }
    }

    .sf-select--open {
      --select-color: #1a73e8;
      --select-arrow-color: #1a73e8;
      --select-width: var(--select-max-width);
      --select-height: calc(100% + var(--select-max-height));
      position: relative;
      width: 100%
    }

    @media(max-width: calc(1024px - 1px)) {
      .sf-select--open {
        max-width: 360px
      }
    }

    .sf-select--open:before {
      background-color: #fff;
      color: #1a73e8;
      box-shadow: 0px 12px 34px rgba(32, 52, 89, .25);
      transition-delay: 25ms;
      transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1)
    }

    .sf-select--open .sf-select__arrow {
      transform: translate3d(0, -55%, 0) rotate(-180deg)
    }

    .sf-select__arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 16px;
      z-index: 1;
      transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
      padding: 0 !important
    }

    .sf-select__arrow svg {
      display: block
    }

    .sf-select__arrow path {
      stroke: var(--select-arrow-color)
    }

    .sf-select__list {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding-bottom: 12px;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      cursor: none
    }

    @media(min-width: 1024px) {
      .sf-select__list {
        min-width: var(--select-max-width);
        transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1)
      }
    }

    .sf-select li {
      padding-left: 12px;
      padding-right: 12px
    }

    @media(min-width: calc(480px + 1px)) {
      .sf-select li {
        padding-left: var(--select-padding);
        padding-right: var(--select-padding)
      }
    }

    .sf-select__list-container {
      position: relative
    }

    .sf-select__list-item {
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-weight: 400;
      font-size: 20px;
      line-height: 28px;
      padding: 5px 0
    }

    @media(min-width: 1024px) {
      .sf-select__list-item {
        font-size: 24px;
        line-height: 32px
      }
    }

    .sf-select__list-item--label {
      color: #80868b;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .5px;
      line-height: 24px;
      text-transform: uppercase;
      pointer-events: none
    }

    .sf-select__list-item--label span {
      margin-left: -8px
    }

    .sf-select__list-item--active {
      background-color: #d2e3fc
    }

    @media(min-width: 1024px) {

      .sf-select__list-item:hover,
      .sf-select__list-item:focus {
        background-color: #1a73e8;
        color: #fff
      }
    }

    .sf-select__list-item:active {
      background-color: transparent;
      color: #1a73e8
    }

    .sf-select__list--open {
      height: var(--select-height);
      opacity: 1;
      overflow: auto;
      visibility: visible;
      pointer-events: all;
      cursor: pointer;
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px
    }

    @media(min-width: 1024px) {
      .sf-select__list--open {
        transition-delay: 150ms
      }
    }

    .sf-select__selected {
      display: flex;
      align-items: center;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 20px;
      line-height: 28px;
      position: relative;
      z-index: 1;
      padding-top: 12px;
      padding-bottom: 12px;
      padding-right: calc(var(--select-padding) + 24px) !important
    }

    @media(min-width: 600px) {
      .sf-select__selected {
        font-size: 24px;
        line-height: 32px
      }
    }

    @media(min-width: 1024px) {
      .sf-select__selected {
        font-size: 28px;
        line-height: 36px
      }
    }

    .sf-select__selected:focus {
      outline-color: #1a73e8
    }

    .sf-select--impact-calculator {
      min-width: 225px
    }

    .sf-select--resource-skin {
      --select-width: 100%;
      width: 100%
    }

    @media(min-width: calc(480px + 1px)) {
      .sf-select--resource-skin {
        min-width: 320px
      }
    }

    @keyframes fade-in {
      0% {
        opacity: 0
      }

      100% {
        opacity: 1
      }
    }

    @keyframes fade-out {
      0% {
        opacity: 1
      }

      100% {
        opacity: 0
      }
    }

    @keyframes arrow {
      0% {
        transform: translate3d(0, 0, 0)
      }

      50% {
        transform: translate3d(20px, 0, 0)
      }

      100% {
        transform: translate3d(0, 0, 0)
      }
    }

    @keyframes zoom {
      0% {
        transform: scale(1)
      }

      100% {
        transform: scale(1.1)
      }
    }

    @keyframes fade-up {
      0% {
        opacity: 0;
        transform: translate3d(0, 35px, 0)
      }

      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
      }
    }

    .sf-expandable-card__grid__card__wrap {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      background-color: #f8f9fa;
      border-radius: 24px;
      flex-wrap: wrap;
      height: 100%;
      justify-content: flex-start;
      overflow: hidden;
      transform: translateZ(0);
      width: 100%
    }

    @media(min-width: 1440px) {
      .sf-expandable-card__grid__card__wrap {
        justify-content: center
      }
    }

    .sf-expandable-card__grid__card {
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
      box-shadow: 0px 12px 34px rgba(32, 52, 89, .15);
      border-radius: 24px;
      color: #fff;
      flex-direction: column;
      margin-bottom: 40px;
      position: relative;
      transition: all .5s cubic-bezier(0.85, 0, 0.15, 1);
      width: 100%
    }

    @media(min-width: 600px) {
      .sf-expandable-card__grid__card {
        display: flex;
        flex-direction: row;
        margin: 10px;
        max-width: 628px;
        width: calc(50% - 20px);
        flex-wrap: wrap
      }
    }

    .sf-expandable-card__grid__card--expanded {
      height: auto;
      max-width: 100%;
      width: 100%
    }

    .sf-expandable-card__grid__card--expanded .sf-expandable-card__grid__card__bottom {
      height: auto;
      max-height: 1000px
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card--expanded .sf-expandable-card__grid__card__inner {
        height: initial
      }
    }

    .sf-expandable-card__grid__card--expanded .sf-expandable-card__grid__card__inner__more {
      height: auto;
      margin-top: 24px;
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: all .35s cubic-bezier(0.85, 0, 0.15, 1);
      transition-delay: .5s
    }

    .sf-expandable-card__grid__card--expanded .sf-expandable-card__grid__card__image__asset__expanded {
      opacity: 1
    }

    .sf-expandable-card__grid__card--expanded .sf-expandable-card__grid__card__image {
      height: 500px
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card--expanded .sf-expandable-card__grid__card__image {
        height: auto
      }
    }

    .sf-expandable-card__grid__card--expanded .sf-expandable-card__grid__card__image__asset {
      opacity: 0
    }

    .sf-expandable-card__grid__card--expanded .sf-expandable-card__grid__card__inner__see {
      opacity: 0;
      pointer-events: none
    }

    .sf-expandable-card__grid__card--expanded .sf-expandable-card__grid__card__close {
      opacity: 1;
      transition: opacity .35s cubic-bezier(0.85, 0, 0.15, 1);
      transition-delay: .5s
    }

    .sf-expandable-card__grid__card__inner {
      order: 1;
      padding: 42px 32px;
      position: relative;
      width: 100%;
      z-index: 2
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card__inner {
        flex: 0 0 50%;
        order: 0;
        width: 50%;
        height: 100%
      }
    }

    .sf-expandable-card__grid__card__inner--blue .sf-expandable-card__grid__card__inner__eyebrow {
      color: #1a73e8
    }

    .sf-expandable-card__grid__card__inner--blue .sf-expandable-card__grid__card__inner__more__subtitle {
      color: #1a73e8
    }

    .sf-expandable-card__grid__card__inner--blue .sf-expandable-card__grid__card__inner__more__stats {
      background-color: #e8f0fe
    }

    .sf-expandable-card__grid__card__inner--green .sf-expandable-card__grid__card__inner__eyebrow {
      color: #1e8e3e
    }

    .sf-expandable-card__grid__card__inner--green .sf-expandable-card__grid__card__inner__more__subtitle {
      color: #1e8e3e
    }

    .sf-expandable-card__grid__card__inner--green .sf-expandable-card__grid__card__inner__more__stats {
      background-color: #e6f4ea
    }

    .sf-expandable-card__grid__card__inner--yellow .sf-expandable-card__grid__card__inner__eyebrow {
      color: #ea8600
    }

    .sf-expandable-card__grid__card__inner--yellow .sf-expandable-card__grid__card__inner__more__subtitle {
      color: #ea8600
    }

    .sf-expandable-card__grid__card__inner--yellow .sf-expandable-card__grid__card__inner__more__stats {
      background-color: #fef7e0
    }

    .sf-expandable-card__grid__card__inner--orange .sf-expandable-card__grid__card__inner__eyebrow {
      color: #e37400
    }

    .sf-expandable-card__grid__card__inner--orange .sf-expandable-card__grid__card__inner__more__subtitle {
      color: #e37400
    }

    .sf-expandable-card__grid__card__inner--orange .sf-expandable-card__grid__card__inner__more__stats {
      background-color: #fef7e0
    }

    .sf-expandable-card__grid__card__inner--cyan .sf-expandable-card__grid__card__inner__eyebrow {
      color: #098591
    }

    .sf-expandable-card__grid__card__inner--cyan .sf-expandable-card__grid__card__inner__more__subtitle {
      color: #098591
    }

    .sf-expandable-card__grid__card__inner--cyan .sf-expandable-card__grid__card__inner__more__stats {
      background-color: #e4f7fb
    }

    .sf-expandable-card__grid__card__inner--teal .sf-expandable-card__grid__card__inner__eyebrow {
      color: #098591
    }

    .sf-expandable-card__grid__card__inner--teal .sf-expandable-card__grid__card__inner__more__subtitle {
      color: #098591
    }

    .sf-expandable-card__grid__card__inner--teal .sf-expandable-card__grid__card__inner__more__stats {
      background-color: #e4f7fb
    }

    .sf-expandable-card__grid__card__inner--red .sf-expandable-card__grid__card__inner__eyebrow {
      color: #b31412
    }

    .sf-expandable-card__grid__card__inner--red .sf-expandable-card__grid__card__inner__more__subtitle {
      color: #b31412
    }

    .sf-expandable-card__grid__card__inner--red .sf-expandable-card__grid__card__inner__more__stats {
      background-color: #fce8e6
    }

    .sf-expandable-card__grid__card__inner__eyebrow {
      font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
      font-size: 14px;
      line-height: 24px;
      font-weight: 700;
      letter-spacing: 2px;
      color: #202124;
      text-transform: uppercase
    }

    .sf-expandable-card__grid__card__inner__title {
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 20px;
      line-height: 28px;
      margin-top: 24px
    }

    @media(min-width: 600px) {
      .sf-expandable-card__grid__card__inner__title {
        font-size: 24px;
        line-height: 32px
      }
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card__inner__title {
        font-size: 28px;
        line-height: 36px
      }
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card__inner__title {
        font-size: 24px;
        line-height: 32px
      }
    }

    .sf-expandable-card__grid__card__image {
      display: flex;
      height: 200px;
      order: 0;
      overflow: hidden;
      pointer-events: none;
      position: relative;
      width: 100%;
      z-index: 1
    }

    @media(min-width: 600px) {
      .sf-expandable-card__grid__card__image {
        height: 250px
      }
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card__image {
        min-height: 400px;
        height: 100%;
        order: 1;
        width: 50%;
        flex: 1
      }
    }

    .sf-expandable-card__grid__card__image__asset {
      transform: scale(1);
      transition: transform 500ms cubic-bezier(0.85, 0, 0.15, 1);
      will-change: transform;
      display: block;
      position: absolute;
      height: 100%;
      width: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      z-index: 0
    }

    .sf-expandable-card__grid__card__image__asset__expanded {
      transform: scale(1);
      transition: transform 500ms cubic-bezier(0.85, 0, 0.15, 1);
      will-change: transform;
      position: absolute;
      height: 100%;
      width: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      opacity: 0;
      z-index: 0
    }

    .sf-expandable-card__grid__card:hover .sf-expandable-card__grid__card__image__asset,
    .sf-expandable-card__grid__card:hover .sf-expandable-card__grid__card__image__asset__expanded {
      transform: scale(1.1);
      transition: transform 500ms cubic-bezier(0.85, 0, 0.15, 1)
    }

    .sf-expandable-card__grid__card__inner__see {
      bottom: 42px;
      cursor: pointer;
      left: 32px;
      position: absolute
    }

    .sf-expandable-card__grid__card__inner__see .button {
      font-size: 20px;
      line-height: 28px
    }

    .sf-expandable-card__grid__card__inner__see .button:hover {
      color: #1a73e8
    }

    .sf-expandable-card__grid__card__close {
      background: transparent;
      border: none;
      cursor: pointer;
      opacity: 0;
      position: absolute;
      right: 0;
      top: 0;
      margin: 0;
      padding: 0;
      transform: translate3d(24px, -24px, 0);
      z-index: 3;
      border: none;
      background: transparent
    }

    .sf-expandable-card__grid__card__close svg {
      height: 72px;
      pointer-events: none;
      width: 72px
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card__close svg {
        height: 72px;
        width: 72px
      }
    }

    .sf-expandable-card__grid__card__inner__more {
      display: flex;
      flex-direction: column;
      height: 80px;
      opacity: 0;
      transform: translate3d(0, 30px, 0)
    }

    .sf-expandable-card__grid__card__inner__more__subtitle {
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 24px
    }

    .sf-expandable-card__grid__card__inner__more__copy {
      font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: .1px;
      color: #3c4043;
      margin: 0 0 24px
    }

    .sf-expandable-card__grid__card__inner__more__buttons {
      display: flex;
      align-items: center;
      display: flex;
      flex-direction: column
    }

    .sf-expandable-card__grid__card__inner__more__buttons .button:not(:last-child) {
      margin-bottom: 20px
    }

    @media(min-width: 600px) {
      .sf-expandable-card__grid__card__inner__more__buttons {
        display: flex;
        flex-direction: row
      }

      .sf-expandable-card__grid__card__inner__more__buttons .button:not(:last-child) {
        margin-bottom: 0
      }

      .sf-expandable-card__grid__card__inner__more__buttons .button:not(:first-child) {
        margin-right: 40px
      }
    }

    .sf-expandable-card__grid__card__inner__more__disclaimer {
      font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
      font-size: 15px;
      font-weight: 400;
      line-height: 19px;
      letter-spacing: .1px;
      color: #3c4043;
      margin: 24px 0
    }

    .sf-expandable-card__grid__card__bottom {
      background-color: #fff;
      height: 0;
      order: 2;
      width: 100%
    }

    .sf-expandable-card__grid__card__bottom__inner {
      display: flex;
      flex-direction: column;
      padding: 32px 32px 16px
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card__bottom__inner {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap
      }
    }

    .sf-expandable-card__grid__card__bottom__inner__row {
      display: flex;
      flex-direction: column;
      flex: 1
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card__bottom__inner__row {
        display: flex;
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap
      }
    }

    .sf-expandable-card__grid__card__bottom__inner__label {
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 16px
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card__bottom__inner__label {
        margin-right: 48px;
        margin-top: 8px
      }
    }

    .sf-expandable-card__grid__card__bottom__inner__pill {
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-weight: 700;
      font-size: 14px;
      line-height: 24px;
      letter-spacing: 2px;
      color: #5f6368;
      border-radius: 33px;
      border: 1px solid rgba(128, 134, 139, .7);
      margin-right: auto;
      margin-bottom: 16px;
      padding: 10px 32px;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card__bottom__inner__pill:not(:last-child) {
        margin-right: 16px
      }
    }

    .sf-expandable-card__grid__card__inner__more__stats {
      display: flex;
      justify-content: center;
      display: flex;
      flex-direction: column;
      font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: .1px;
      color: #3c4043;
      align-items: flex-start;
      margin-bottom: 24px;
      padding: 20px;
      display: flex;
      flex-direction: row
    }

    .sf-expandable-card__grid__card__inner__more__stats .stat-figure {
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 24px;
      line-height: 32px;
      font-weight: 400;
      font-style: normal
    }

    @media(min-width: 600px) {
      .sf-expandable-card__grid__card__inner__more__stats .stat-figure {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -0.25px
      }
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card__inner__more__stats .stat-figure {
        font-size: 36px;
        line-height: 44px
      }
    }

    .sf-expandable-card__grid__card__inner__more__stats__stat {
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .sf-expandable-card__grid__card__inner__more__stats__stat:not(:last-child) {
      margin-bottom: 20px
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card__inner__more__stats__stat:not(:last-child) {
        margin-bottom: 0;
        margin-right: 20px
      }
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card--column .sf-expandable-card__grid__card__wrap {
        display: flex;
        flex-direction: column
      }
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card--column .sf-expandable-card__grid__card__image {
        flex: inherit;
        min-height: initial;
        height: 200px;
        order: 0;
        width: 100%
      }
    }

    @media(min-width: 1024px) {
      .sf-expandable-card__grid__card--column .sf-expandable-card__grid__card__inner {
        order: 1;
        width: 100%
      }
    }

    .sf-cards--show {
      transition: opacity 500ms cubic-bezier(0.85, 0, 0.15, 1), transform 500ms cubic-bezier(0.85, 0, 0.15, 1) !important;
      opacity: 1
    }

    .sf-cards--filtered,
    .sf-cards--hide {
      position: absolute !important;
      overflow: hidden !important;
      clip: rect(0 0 0 0) !important;
      height: 0 !important;
      width: 0 !important;
      margin: -1px !important;
      padding: 0 !important;
      border: 0 !important;
      border: 0 !important;
      opacity: 0;
      transform: translateY(35px);
      visibility: hidden
    }

    .sf-cards--filtered img,
    .sf-cards--filtered video,
    .sf-cards--hide img,
    .sf-cards--hide video {
      display: none !important
    }

    @keyframes fade-in {
      0% {
        opacity: 0
      }

      100% {
        opacity: 1
      }
    }

    @keyframes fade-out {
      0% {
        opacity: 1
      }

      100% {
        opacity: 0
      }
    }

    @keyframes arrow {
      0% {
        transform: translate3d(0, 0, 0)
      }

      50% {
        transform: translate3d(20px, 0, 0)
      }

      100% {
        transform: translate3d(0, 0, 0)
      }
    }

    @keyframes zoom {
      0% {
        transform: scale(1)
      }

      100% {
        transform: scale(1.1)
      }
    }

    @keyframes fade-up {
      0% {
        opacity: 0;
        transform: translate3d(0, 35px, 0)
      }

      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
      }
    }

    .sf-full-card {
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
      box-shadow: 0px 12px 34px rgba(32, 52, 89, .15);
      border-radius: 24px;
      flex-direction: column;
      margin-bottom: 40px;
      overflow: hidden;
      position: relative;
      transition: all .5s cubic-bezier(0.85, 0, 0.15, 1);
      min-height: 500px;
      width: 100%
    }

    @media(min-width: 600px) {
      .sf-full-card {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
        margin: 10px;
        min-height: 320px;
        width: 100%;
        flex-wrap: wrap
      }
    }

    @media(min-width: 1024px) {
      .sf-full-card {
        max-width: calc(50% - 20px)
      }
    }

    .sf-full-card--dark {
      background: #000
    }

    .sf-full-card--dark .sf-full-card__content__copy__eyebrow,
    .sf-full-card--dark .sf-full-card__content__copy__title {
      color: #fff
    }

    .sf-full-card--dark .sf-full-card__content__buttons .button {
      color: #fff
    }

    .sf-full-card--dark .sf-full-card__content__buttons .button:hover {
      color: #fff
    }

    .sf-full-card--dark .sf-full-card__content__buttons .button:hover:after {
      background: #fff
    }

    .sf-full-card--blue .sf-full-card__content__copy__eyebrow {
      color: #1a73e8
    }

    .sf-full-card--green .sf-full-card__content__copy__eyebrow {
      color: #1e8e3e
    }

    .sf-full-card--yellow .sf-full-card__content__copy__eyebrow {
      color: #ea8600
    }

    .sf-full-card--cyan .sf-full-card__content__copy__eyebrow {
      color: #098591
    }

    .sf-full-card--red .sf-full-card__content__copy__eyebrow {
      color: #b31412
    }

    .sf-full-card__content {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      align-self: flex-end;
      align-items: flex-start;
      justify-content: space-between;
      order: 2;
      padding: 24px;
      width: 100%
    }

    @media(min-width: 600px) {
      .sf-full-card__content {
        order: 1;
        min-height: 100%;
        padding: 32px 0 32px 32px;
        width: 50%
      }
    }

    .sf-full-card__content__copy {
      display: flex;
      flex-direction: column
    }

    .sf-full-card__content__copy__eyebrow {
      font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
      font-size: 14px;
      line-height: 24px;
      font-weight: 700;
      letter-spacing: 2px;
      color: #202124;
      text-transform: uppercase
    }

    .sf-full-card__content__copy__title {
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 20px;
      line-height: 28px;
      margin: 30px 0 40px
    }

    @media(min-width: 600px) {
      .sf-full-card__content__copy__title {
        font-size: 24px;
        line-height: 32px
      }
    }

    @media(min-width: 1024px) {
      .sf-full-card__content__copy__title {
        font-size: 28px;
        line-height: 36px
      }
    }

    @media(min-width: 1024px) {
      .sf-full-card__content__copy__title {
        font-size: 24px;
        line-height: 32px
      }
    }

    .sf-full-card__image {
      display: block;
      height: 100%;
      order: 1;
      overflow: hidden;
      width: 100%
    }

    @media(min-width: 1024px) {
      .sf-full-card__image {
        order: 2
      }
    }

    .sf-full-card__image__asset {
      -o-object-fit: cover;
      object-fit: cover;
      -o-object-position: center top;
      object-position: center top;
      height: 100%;
      width: 100%
    }

    @media(min-width: 1024px)and (max-width: calc(1440px - 1px)) {
      .sf-full-card__image__asset {
        -o-object-position: right top;
        object-position: right top
      }
    }

    .sf-full-card__content__copy,
    .sf-full-card__content__buttons {
      display: flex;
      flex-direction: column
    }

    .sf-full-card__content__buttons .button {
      font-size: 20px;
      line-height: 28px
    }

    .sf-full-card__content__buttons .button:hover {
      color: #1a73e8
    }

    @keyframes fade-in {
      0% {
        opacity: 0
      }

      100% {
        opacity: 1
      }
    }

    @keyframes fade-out {
      0% {
        opacity: 1
      }

      100% {
        opacity: 0
      }
    }

    @keyframes arrow {
      0% {
        transform: translate3d(0, 0, 0)
      }

      50% {
        transform: translate3d(20px, 0, 0)
      }

      100% {
        transform: translate3d(0, 0, 0)
      }
    }

    @keyframes zoom {
      0% {
        transform: scale(1)
      }

      100% {
        transform: scale(1.1)
      }
    }

    @keyframes fade-up {
      0% {
        opacity: 0;
        transform: translate3d(0, 35px, 0)
      }

      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
      }
    }

    .demo-cards__grid__card {
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
      border-radius: 24px;
      box-shadow: 0px 12px 34px rgba(32, 52, 89, .15);
      position: relative;
      width: 100%;
      transition: all .5s cubic-bezier(0.85, 0, 0.15, 1);
      margin: 10px 0
    }

    .demo-cards__grid__card:focus {
      outline: 1px solid #174ea6
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card {
        --height: auto;
        flex-wrap: wrap
      }
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card {
        max-width: calc(50% - 20px);
        margin: 10px
      }
    }

    @media(min-width: 1440px) {
      .demo-cards__grid__card {
        max-width: calc(33.3% - 20px)
      }
    }

    .demo-cards__grid__card__wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
      flex: 1;
      flex-wrap: wrap;
      transform: translateZ(0);
      width: 100%
    }

    .demo-cards__grid__card__dialog {
      align-content: flex-start;
      align-items: flex-start;
      display: flex;
      height: 100vh;
      justify-content: center;
      left: 0;
      overflow: auto;
      padding-top: 60px;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 99
    }

    @media(max-width: calc(1024px - 1px)) {
      .demo-cards__grid__card__dialog {
        display: none
      }
    }

    .demo-cards__grid__card__dialog .demo-cards__grid__card--expanded {
      max-width: 858px !important
    }

    .demo-cards__grid__card__overlay {
      background: rgba(255, 255, 255, .9);
      height: 100%;
      left: 0;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1
    }

    .demo-cards__grid__card--expanded {
      height: auto
    }

    @media(min-width: 600px) {
      .demo-cards__grid__card--expanded {
        max-width: calc(100% - 20px) !important
      }
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card--expanded {
        min-height: 795px;
        max-width: calc(66% - 20px) !important;
        z-index: 2
      }
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card--expanded .demo-cards__grid__card__inner {
        border-radius: 0;
        display: flex;
        flex-direction: row
      }
    }

    .demo-cards__grid__card--expanded .demo-cards__grid__card__image {
      display: none
    }

    .demo-cards__grid__card--expanded .demo-cards__grid__card__video {
      max-height: 300px
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card--expanded .demo-cards__grid__card__video {
        height: 300px;
        max-height: 300px
      }
    }

    .demo-cards__grid__card--expanded .demo-cards__grid__card__bottom {
      height: auto;
      max-height: 1000px
    }

    .demo-cards__grid__card--expanded .demo-cards__grid__card__inner__title-wrap {
      flex: 1;
      margin-bottom: 24px
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card--expanded .demo-cards__grid__card__inner__title-wrap {
        flex: 0 0 50%
      }
    }

    .demo-cards__grid__card--expanded .demo-cards__grid__card__inner {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0
    }

    .demo-cards__grid__card--expanded .demo-cards__grid__card__inner__more {
      height: auto;
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: all .35s cubic-bezier(0.85, 0, 0.15, 1);
      transition-delay: .15s;
      visibility: visible
    }

    .demo-cards__grid__card--expanded .demo-cards__grid__card__video {
      display: block
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card--expanded .demo-cards__grid__card__image__asset {
        opacity: 0
      }
    }

    .demo-cards__grid__card--expanded .demo-cards__grid__card__inner__see,
    .demo-cards__grid__card--expanded .demo-cards__grid__card__inner__pill {
      opacity: 0;
      pointer-events: none
    }

    .demo-cards__grid__card--expanded .demo-cards__grid__card__close {
      opacity: 1;
      transition: opacity .35s cubic-bezier(0.85, 0, 0.15, 1);
      transition-delay: .15s
    }

    .demo-cards__grid__card__inner {
      display: flex;
      flex-direction: column;
      background-color: #f8f9fa;
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 24px;
      order: 2;
      flex: 1;
      padding: 32px 24px;
      position: relative;
      width: 100%;
      z-index: 2
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card__inner {
        padding: 32px
      }
    }

    .demo-cards__grid__card__inner--blue .demo-cards__grid__card__inner__eyebrow {
      color: #1a73e8
    }

    .demo-cards__grid__card__inner--blue .demo-cards__grid__card__inner__more__subtitle {
      color: #1a73e8
    }

    .demo-cards__grid__card__inner--blue .demo-cards__grid__card__inner__more__stats {
      background-color: #e8f0fe
    }

    .demo-cards__grid__card__inner--green .demo-cards__grid__card__inner__eyebrow {
      color: #1e8e3e
    }

    .demo-cards__grid__card__inner--green .demo-cards__grid__card__inner__more__subtitle {
      color: #1e8e3e
    }

    .demo-cards__grid__card__inner--green .demo-cards__grid__card__inner__more__stats {
      background-color: #e6f4ea
    }

    .demo-cards__grid__card__inner--yellow .demo-cards__grid__card__inner__eyebrow {
      color: #ea8600
    }

    .demo-cards__grid__card__inner--yellow .demo-cards__grid__card__inner__more__subtitle {
      color: #ea8600
    }

    .demo-cards__grid__card__inner--yellow .demo-cards__grid__card__inner__more__stats {
      background-color: #fef7e0
    }

    .demo-cards__grid__card__inner--cyan .demo-cards__grid__card__inner__eyebrow {
      color: #098591
    }

    .demo-cards__grid__card__inner--cyan .demo-cards__grid__card__inner__more__subtitle {
      color: #098591
    }

    .demo-cards__grid__card__inner--cyan .demo-cards__grid__card__inner__more__stats {
      background-color: #e4f7fb
    }

    .demo-cards__grid__card__inner--red .demo-cards__grid__card__inner__eyebrow {
      color: #b31412
    }

    .demo-cards__grid__card__inner--red .demo-cards__grid__card__inner__more__subtitle {
      color: #b31412
    }

    .demo-cards__grid__card__inner--red .demo-cards__grid__card__inner__more__stats {
      background-color: #fce8e6
    }

    .demo-cards__grid__card__inner__eyebrow {
      font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
      font-size: 14px;
      line-height: 24px;
      font-weight: 700;
      letter-spacing: 2px;
      color: #202124;
      text-transform: uppercase
    }

    .demo-cards__grid__card__inner__title {
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 20px;
      line-height: 28px;
      color: #202124;
      margin-top: 24px
    }

    .demo-cards__grid__card__image,
    .demo-cards__grid__card__video {
      border-top-left-radius: 24px;
      border-top-right-radius: 24px;
      display: block;
      order: 1;
      overflow: hidden;
      pointer-events: none;
      position: relative;
      width: 100%;
      z-index: 1
    }

    @media(min-width: 1024px) {

      .demo-cards__grid__card__image,
      .demo-cards__grid__card__video {
        max-height: 195px
      }
    }

    .demo-cards__grid__card__image video,
    .demo-cards__grid__card__video video {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover
    }

    .demo-cards__grid__card__video {
      display: none
    }

    .demo-cards__grid__card__image__asset {
      transform: scale(1);
      transition: transform 500ms cubic-bezier(0.85, 0, 0.15, 1);
      will-change: transform;
      display: block;
      width: 100%;
      z-index: 0
    }

    .demo-cards__grid__card__image__asset__expanded,
    .demo-cards__grid__card__video__asset__expanded {
      display: block;
      position: absolute;
      height: 100%;
      width: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      z-index: 0
    }

    .demo-cards__grid__card:hover .demo-cards__grid__card__image__asset {
      transform: scale(1.1);
      transition: transform 500ms cubic-bezier(0.85, 0, 0.15, 1)
    }

    .demo-cards__grid__card__inner__see {
      bottom: 42px;
      cursor: pointer;
      left: 24px;
      position: absolute
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card__inner__see {
        left: 32px
      }
    }

    .demo-cards__grid__card__inner__see .button {
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 20px;
      line-height: 28px;
      color: #1a73e8;
      font-weight: 400
    }

    .demo-cards__grid__card__inner__see .button:hover {
      color: #1a73e8
    }

    .demo-cards__grid__card__inner__see .button span {
      font-size: inherit;
      line-height: inherit;
      font-weight: inherit
    }

    .demo-cards__grid__card__inner__pill {
      color: #202124;
      font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      bottom: 44px;
      cursor: pointer;
      right: 24px;
      position: absolute;
      padding: 2px 10px;
      color: #5f6368;
      background: #f1f3f4;
      border-radius: 20px;
      pointer-events: none
    }

    .demo-cards__grid__card__close {
      -webkit-appearance: none;
      background: transparent;
      border: none;
      cursor: pointer;
      opacity: 0;
      position: absolute;
      right: 0;
      top: 0;
      transform: translate3d(24px, -24px, 0);
      z-index: 1
    }

    .demo-cards__grid__card__close svg {
      height: 72px;
      pointer-events: none;
      width: 72px
    }

    .demo-cards__grid__card__close--modal {
      z-index: 6
    }

    .demo-cards__grid__card__inner__title-wrap {
      display: flex;
      flex-direction: column;
      flex: 0 0 100%
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card__inner__title-wrap {
        padding-right: 24px
      }
    }

    .demo-cards__grid__card__inner__more {
      display: flex;
      flex-direction: column;
      height: 80px;
      opacity: 0;
      transform: translate3d(0, 30px, 0);
      visibility: hidden;
      width: 100%
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card__inner__more {
        padding-top: 30px
      }
    }

    .demo-cards__grid__card__inner__more__subtitle {
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 24px
    }

    .demo-cards__grid__card__inner__more__copy {
      font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: .1px;
      color: #3c4043;
      color: #202124;
      margin: 0 0 24px
    }

    .demo-cards__grid__card__inner__more__copy ul {
      display: inline-block;
      list-style: none;
      margin: 0;
      padding: 0
    }

    .demo-cards__grid__card__inner__more__buttons {
      display: flex;
      flex-direction: column;
      align-items: flex-start
    }

    .demo-cards__grid__card__inner__more__buttons .button:not(:last-child) {
      margin-bottom: 20px
    }

    @media(min-width: 600px) {
      .demo-cards__grid__card__inner__more__buttons {
        display: flex;
        flex-direction: row
      }

      .demo-cards__grid__card__inner__more__buttons .button:not(:last-child) {
        margin-bottom: 0
      }

      .demo-cards__grid__card__inner__more__buttons .button:not(:first-child) {
        margin-right: 40px
      }
    }

    .demo-cards__grid__card__inner__more__buttons a>* {
      pointer-events: none
    }

    .demo-cards__grid__card__inner__more__disclaimer {
      font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: .1px;
      color: #3c4043;
      color: #202124;
      margin: 24px 0
    }

    .demo-cards__grid__card__bottom {
      background-color: #fff;
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 24px;
      height: 0;
      order: 3;
      overflow: hidden;
      width: 100%
    }

    .demo-cards__grid__card__bottom__inner {
      display: flex;
      flex-direction: column;
      padding: 32px 32px 16px
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card__bottom__inner {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap
      }
    }

    .demo-cards__grid__card__bottom__inner__row {
      display: flex;
      flex-direction: column;
      flex: 1
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card__bottom__inner__row {
        display: flex;
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap
      }
    }

    .demo-cards__grid__card__bottom__inner__label {
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 20px;
      line-height: 28px;
      color: #80868b;
      margin-bottom: 16px
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card__bottom__inner__label {
        margin-top: 7px;
        margin-right: 36px
      }
    }

    .demo-cards__grid__card__inner__more__stats {
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
      font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: .1px;
      color: #3c4043;
      color: #202124;
      margin-bottom: 24px;
      padding: 20px;
      display: flex;
      flex-direction: row
    }

    .demo-cards__grid__card__inner__more__stats .stat-figure {
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 24px;
      line-height: 32px;
      font-weight: 400;
      font-style: normal
    }

    @media(min-width: 600px) {
      .demo-cards__grid__card__inner__more__stats .stat-figure {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -0.25px
      }
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card__inner__more__stats .stat-figure {
        font-size: 36px;
        line-height: 44px
      }
    }

    .demo-cards__grid__card__inner__more__stats__stat {
      display: flex;
      flex-direction: column
    }

    .demo-cards__grid__card__inner__more__stats__stat:not(:last-child) {
      margin-bottom: 20px
    }

    @media(min-width: 1024px) {
      .demo-cards__grid__card__inner__more__stats__stat:not(:last-child) {
        margin-bottom: 0;
        margin-right: 20px
      }
    }

    :root {
      --breakpoint-tablet: 600px;
      --breakpoint-laptop: 1024px;
      --breakpoint-desktop: 1440px
    }

    html,
    body {
      font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: .1px;
      color: #3c4043;
      color: #3c4043;
      margin: 0;
      padding: 0;
      scroll-padding-top: var(--header-height);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
    }

    @media(min-width: 1024px) {

      html,
      body {
        font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
        font-size: 18px;
        line-height: 28px;
        color: #3c4043
      }
    }

    html *,
    body * {
      box-sizing: border-box
    }

    html *:focus,
    body *:focus {
      outline: 0;
      box-shadow: 0 0 0 2px #1a73e8
    }

    html *:focus:not(:focus-visible),
    body *:focus:not(:focus-visible) {
      outline: 0;
      box-shadow: none
    }

    .skip-to-content {
      color: #202124;
      font-family: "Google Sans", "Roboto", Arial, sans-serif;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: .1px;
      line-height: 24px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      color: #174ea6;
      background: linear-gradient(0deg, rgba(26, 115, 232, 0.12), rgba(26, 115, 232, 0.12)), #fff;
      border: 2px solid #1a73e8;
      border-radius: 4px;
      box-shadow: none !important;
      outline: none;
      position: absolute;
      padding: 12px 24px;
      top: 125px;
      left: 28px;
      opacity: 0
    }

    .skip-to-content:focus {
      opacity: 1
    }

    .js-focus-visible *:focus:not(.focus-visible) {
      box-shadow: none
    }

    .help {
      background: #000;
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      line-height: 14px;
      padding: 4px 8px;
      position: absolute
    }

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

    [role=heading] {
      color: #202124
    }

    a {
      color: #1a73e8;
      font-weight: 500;
      text-decoration: none;
      transition: color .3s ease
    }

    a:hover {
      color: #185abc
    }

    sup {
      vertical-align: top;
      font-size: .8em;
      position: relative;
      top: -0.3em
    }

    .main {
      position: relative
    }

    .breadcrumb-schema {
      display: none
    }

    @media print {
      body {
        max-width: 100% !important;
        zoom: 90%
      }

      @page {
        size: portrait
      }
    }

    .nowrap {
      white-space: nowrap
    }

    @media(max-width: calc(1024px - 1px)) {
      .laptop-desktop-only {
        display: none !important
      }
    }

    @media(min-width: 1024px) {
      .mobile-tablet-only {
        display: none !important
      }
    }

    @media(max-width: calc(600px - 1px)) {
      .tablet-gt-only {
        display: none !important
      }
    }

    @media(min-width: 1024px) {
      .tablet-only {
        display: none !important
      }
    }

    @media(max-width: calc(600px - 1px)) {
      .tablet-only {
        display: none !important
      }
    }

    @media(min-width: 600px) {
      .mobile-only {
        display: none !important
      }
    }

    .no-scroll {
      overflow: hidden
    }

    .only-screenreaders {
      height: 1px;
      width: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute
    }
  </style>




  <script src="./assets/main.min.js" defer="" nonce=""></script>



  <link rel="stylesheet" href="./assets/cookienotificationbar.min.css">




</head>



<body class="webp">




  <div class="main">


    <style>
      :root {
        --header-height: 64px
      }

      .header {
        background: #fff;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12), inset 0 -1px 0 0 #dadce0;
        left: 0;
        position: fixed;
        top: 0;
        transition: transform .3s ease;
        width: 100%;
        z-index: 90
      }

      .sf-card {
        width: 100%;
        z-index: 1
      }


      @media(max-width: calc(1024px - 1px)) {
        .header {
          height: var(--header-height)48px3px
        }
      }

      @media(max-width: calc(768px - 1px)) {
        .header {
          box-shadow: none
        }
      }

      @media(max-width: calc(1024px - 1px)) {
        .header--sticky {
          transform: translateY(calc(0px - var(--header-height)))
        }
      }

      .header--below-fold .header__nav__aside {
        transform: translateY(var(--header-height))
      }

      .header__top {
        border-bottom: 1px solid #dadce0;
        position: relative;
        z-index: 3
      }

      .header__top .header__container {
        justify-content: space-between
      }

      .header__container {
        margin: 0 auto;
        max-width: 2560px !important;
        padding: 0 15px 0 0 !important;
        display: flex;
        align-items: center;
        grid-gap: 0 20px;
        height: var(--header-height)
      }

      @media(max-width: calc(600px - 1px)) {
        .header__container {
          padding: 0 24px;
          max-width: 600px
        }
      }

      @media(min-width: 600px)and (max-width: calc(1024px - 1px)) {
        .header__container {
          padding: 0 min(5vw, 72px);
          max-width: 600px
        }
      }

      @media(min-width: 1024px)and (max-width: calc(1440px - 1px)) {
        .header__container {
          padding: 0 min(5vw, 72px)
        }
      }

      @media(min-width: 1440px) {
        .header__container {
          padding: 0 min(5vw, 72px);
          max-width: 1440px
        }
      }

      @media(max-width: 360px) {
        .header__container {
          padding-left: 13px !important
        }
      }

      .header__logo {
        display: flex;
        align-items: center
      }

      .header__logo .link__label {
        display: none
      }

      .header__lockup {
        display: flex;
        align-items: center;
        grid-gap: 5px;
        background: #fff;
        position: relative;
        z-index: 2
      }

      @media(max-width: calc(1024px - 1px)) {
        .header__lockup {
          align-self: flex-start;
          flex-grow: 1;
          height: 100%;
          padding: 0 15px 0 9px
        }

        .header__lockup .link {
          margin-left: 0 !important
        }
      }

      @media(max-width: 360px) {
        .header__lockup {
          grid-gap: 0;
          padding-left: 0
        }

        .header__lockup .link img {
          transform: scale(0.92)
        }

        .header__lockup .link__label {
          font-size: 92%
        }
      }

      .header__lockup .link {
        display: flex;
        align-items: center;
        color: #202124;
        font-family: "Google Sans", "Roboto", Arial, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 20px;
        line-height: 28px;
        color: #5f6368;
        font-size: 22px !important;
        line-height: 28px !important;
        margin-left: 9px;
        grid-gap: 5px
      }

      @media(min-width: 600px) {
        .header__lockup .link {
          font-size: 24px;
          line-height: 32px
        }
      }

      @media(min-width: 1024px) {
        .header__lockup .link {
          font-size: 28px;
          line-height: 36px
        }
      }

      @media(min-width: calc(767px + 1px)) {
        .header__menu-button {
          display: none
        }
      }

      .header__aside {
        display: flex;
        align-items: center;
        z-index: 1;
        grid-gap: 20px
      }

      @media(max-width: calc(600px - 1px)) {
        .header__aside {
          display: none
        }
      }

      .header__aside .language-selector select {
        border: 1px solid #dadce0 !important;
        border-radius: 6px;
        height: 38px;
        margin: 0;
        max-width: 200px;
        padding-left: 14px;
        white-space: nowrap
      }

      .header__aside__buttons {
        display: flex;
        -moz-column-gap: 16px;
        column-gap: 16px
      }

      .header__aside__buttons .button--link {
        color: #5f6368
      }

      .header__aside__buttons .button--link::after {
        display: none !important
      }

      .header__aside__buttons .button--link:hover {
        color: #202124
      }

      @media(max-width: calc(768px - 1px)) {
        .header__aside__buttons--group2 {
          display: none
        }
      }

      @media(min-width: calc(1303px + 1px)) {
        .header__bottom {
          display: none
        }
      }

      @media(max-width: calc(768px - 1px)) {
        .header__bottom {
          display: none
        }
      }

      .header__bottom .header__container {
        padding-left: 0 !important;
        position: relative;
        flex-wrap: wrap
      }

      @media(max-width: calc(767px - 1px)) {
        .header__bottom .header__container {
          display: flex;
          flex-direction: column;
          grid-gap: 0;
          padding: 0 !important
        }
      }

      .header__lockup__title {
        padding-left: 8px
      }

      .header__nav {
        color: #202124;
        font-family: "Google Sans", "Roboto", Arial, sans-serif;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: .1px;
        line-height: 24px;
        display: flex;
        align-items: center;
        flex-grow: 1;
        height: 100%;
        margin-left: 20px
      }

      @media(max-width: calc(768px - 1px)) {
        .header__nav {
          display: none
        }
      }

      @media(min-width: calc(1303px + 1px)) {
        .header__nav {
          display: none
        }
      }

      .header__nav--desktop {
        display: flex;
        margin-left: min(3.3333333333vw, 48px)
      }

      @media(max-width: calc(1303px - 1px)) {
        .header__nav--desktop {
          display: none
        }
      }

      .header__nav__item {
        display: flex;
        align-items: center;
        border-top: 2px solid #fff;
        border-bottom: 1px solid #dadce0;
        height: 100%
      }

      @media(min-width: calc(1303px + 1px)) {
        .header__nav__item {
          border-bottom: 1px solid #fff
        }
      }

      @media(min-width: calc(767px + 1px)) {
        .header__nav__item:not(last-child) {
          margin-right: min(3.3333333333vw, 48px)
        }
      }

      .header__nav__item a {
        cursor: pointer
      }

      .header__nav__item summary {
        align-items: center;
        display: flex;
        cursor: pointer;
        height: 100%;
        justify-content: flex-start;
        list-style: none;
        color: #5f6368
      }

      @media(min-width: 1024px) {
        .header__nav__item summary {
          align-items: flex-start;
          padding-top: 18px
        }
      }

      .header__nav__item summary::-webkit-details-marker {
        display: none
      }

      .header__nav__item:hover>a,
      .header__nav__item:hover>div[tabindex],
      .header__nav__item:hover>summary,
      .header__nav__item:active>a,
      .header__nav__item:active>div[tabindex],
      .header__nav__item:active>summary,
      .header__nav__item:focus>a,
      .header__nav__item:focus>div[tabindex],
      .header__nav__item:focus>summary,
      .header__nav__item--current>a,
      .header__nav__item--current>div[tabindex],
      .header__nav__item--current>summary {
        color: #202124 !important
      }

      .header__nav__item--current {
        border-bottom: 3px solid #1a73e8
      }

      .header__nav__item--has-subnav {
        background-image: url("/static/images/icons/expand.svg");
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 22px
      }

      .header__nav__item--has-subnav:hover,
      .header__nav__item--has-subnav:active,
      .header__nav__item--has-subnav:focus,
      .header__nav__item--has-subnav.header__nav__item--current {
        background-image: url("/static/images/icons/expand-active.svg")
      }

      .header__nav__item--has-subnav:active .header__nav__subnav,
      .header__nav__item--has-subnav:focus .header__nav__subnav,
      .header__nav__item--has-subnav:focus-within .header__nav__subnav {
        opacity: 1;
        pointer-events: auto
      }

      .header__nav__item [opens-subnav] {
        width: 100%
      }

      @media(max-width: calc(768px - 1px)) {
        .header__nav__item--mobile-subnav-disabled {
          background-image: none !important;
          pointer-events: none !important
        }

        .header__nav__item--mobile-subnav-disabled>div[tabindex] {
          color: #80868b !important
        }
      }

      .header__nav__item--only-mobile {
        padding-left: 40px !important
      }

      @media(min-width: calc(767px + 1px)) {
        .header__nav__item--only-mobile {
          display: none
        }
      }

      .header__nav__item>a,
      .header__nav__item>div[tabindex] {
        display: flex;
        align-items: center;
        color: #5f6368;
        height: 100%;
        white-space: nowrap
      }

      .header__nav__item>div[tabindex] {
        cursor: default
      }

      @media(max-width: calc(1024px - 1px)) {
        .header__nav__item>div[tabindex] {
          cursor: pointer
        }
      }

      .header__nav__subnav {
        display: flex;
        flex-direction: row;
        background: #fff;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12), inset 0 -1px 0 0 #dadce0;
        left: 0;
        max-height: calc(100vh - 2*var(--header-height));
        opacity: 0;
        overflow-y: auto;
        padding: 33px 72px 64px;
        pointer-events: none;
        position: absolute;
        top: var(--header-height);
        transition: opacity .3s ease;
        width: 100%
      }

      .header__nav__subnav.open {
        opacity: 1;
        pointer-events: auto
      }

      .header__nav__subnav--columns {
        padding-bottom: 0
      }

      @media(min-width: 600px) {
        .header__nav__subnav--columns {
          display: flex;
          flex-direction: column;
          padding-left: 40px;
          padding-right: 40px
        }
      }

      @media(min-width: 1440px) {
        .header__nav__subnav--columns {
          display: flex;
          flex-direction: row;
          padding-left: 72px;
          padding-right: 72px
        }
      }

      @media(min-width: 600px) {
        .header__nav__subnav--columns .header__nav__subnav__meta {
          max-width: 100%;
          display: flex;
          flex-direction: row;
          gap: 24px;
          margin-bottom: 24px
        }

        .header__nav__subnav--columns .header__nav__subnav__meta .header__nav__subnav__button {
          white-space: nowrap;
          margin-top: 0
        }
      }

      @media(min-width: 1440px) {
        .header__nav__subnav--columns .header__nav__subnav__meta {
          max-width: 226px;
          display: block
        }

        .header__nav__subnav--columns .header__nav__subnav__meta .header__nav__subnav__button {
          margin-top: 36px
        }
      }

      .header__nav__subnav--columns .header__nav__subnav__meta__content {
        flex-grow: 1
      }

      .header__nav__subnav--columns .header__nav__subnav__links {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        grid-row-gap: 40px;
        border-bottom: 64px solid transparent
      }

      @media(min-width: 600px)and (max-width: calc(1024px - 1px)) {
        .header__nav__subnav--columns .header__nav__subnav__links {
          margin-left: 0;
          -moz-column-gap: 24px;
          column-gap: 24px
        }
      }

      @media(min-width: 1024px)and (max-width: calc(1440px - 1px)) {
        .header__nav__subnav--columns .header__nav__subnav__links {
          margin-left: 0;
          -moz-column-gap: 24px;
          column-gap: 24px
        }
      }

      @media(min-width: 1024px) {
        .header__nav__subnav--columns .header__nav__subnav__links {
          justify-content: space-between;
          width: 100%
        }
      }

      .header__nav__subnav--columns .header__nav__subnav__items {
        display: flex;
        flex-direction: column;
        grid-gap: 12px 20px
      }

      @media(min-width: 1024px) {
        .header__nav__subnav--columns .header__nav__subnav__items__group {
          min-width: 200px
        }
      }

      .header__nav__subnav--columns .header__nav__subnav__items__group__icon {
        margin-bottom: 8px;
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center
      }

      .header__nav__subnav--columns .header__nav__subnav__items__group__title {
        color: #202124;
        font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: .2px;
        line-height: 24px;
        font-size: 20px;
        color: #202124;
        margin-bottom: 12px;
        text-transform: none
      }

      .header__nav__subnav--columns .header__nav__subnav__item {
        display: inline-block;
        margin-top: 4px;
        white-space: nowrap;
        width: auto
      }

      @media(min-width: 600px) {
        .header__nav__subnav--columns .header__nav__subnav__item {
          margin-right: 0
        }
      }

      @media(min-width: 1440px) {
        .header__nav__subnav--columns .header__nav__subnav__item {
          margin-right: 80px
        }
      }

      .header__nav__subnav--columns .header__nav__subnav__item .link {
        display: inline-block
      }

      .header__nav__subnav--columns .header__nav__subnav__item .link::before {
        border-radius: 4px;
        width: calc(100% + 4px);
        left: -2px;
        height: calc(100% + 4px);
        top: -2px
      }

      .header__nav__subnav--columns .header__nav__subnav__item__external-links a {
        margin-left: 8px;
        padding-right: 14px;
        position: relative
      }

      .header__nav__subnav--columns .header__nav__subnav__item__external-links a::after {
        background-image: url("/static/images/icons/external-link.svg");
        background-position: right center;
        background-repeat: no-repeat;
        background-size: 12px;
        content: "";
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 12px
      }

      @media(min-width: 600px) {
        .header__nav__subnav--columns .header__nav__subnav__item__external-links a {
          margin-left: 0;
          margin-right: 8px
        }
      }

      .header__nav__subnav--columns .header__nav__subnav__item__external-links a::after {
        display: inline-block
      }

      .header__nav__subnav--rows .header__nav__subnav__item a {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        grid-gap: 8px
      }

      .header__nav__subnav--rows .header__nav__subnav__item--current .link {
        position: relative
      }

      @media(min-width: 1024px) {
        .header__nav__subnav--rows .header__nav__subnav__item--current .link:before {
          content: "";
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: #e8f0fe;
          width: calc(100% + 48px);
          height: calc(100% + 20px);
          margin-top: -4px;
          border-radius: 24px
        }
      }

      .header__nav__subnav__back-button {
        display: none
      }

      .header__nav__subnav__close-button {
        align-items: center;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: none;
        border-radius: 48px;
        border: 0;
        color: #5f6368;
        cursor: pointer;
        display: flex;
        height: 48px;
        justify-content: center;
        position: absolute;
        right: 42px;
        top: 25px;
        width: 48px;
        z-index: 12
      }

      .header__nav__subnav__close-button:hover {
        background: #fff
      }

      .header__nav__subnav__close-button:active,
      .header__nav__subnav__close-button:focus {
        background: #f1f3f4
      }

      .header__nav__subnav__meta {
        max-width: 226px
      }

      .header__nav__subnav__title {
        color: #202124;
        font-family: "Google Sans", "Roboto", Arial, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 8px
      }

      @media(min-width: 600px) {
        .header__nav__subnav__title {
          font-size: 24px;
          line-height: 32px
        }
      }

      @media(min-width: 1024px) {
        .header__nav__subnav__title {
          font-size: 28px;
          line-height: 36px
        }
      }

      .header__nav__subnav__body,
      .header__nav__subnav__blurb {
        font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: .1px;
        color: #3c4043
      }

      .header__nav__subnav__blurb {
        border-top: 1px solid #bdc1c6;
        margin-top: 45px;
        padding-top: 45px
      }

      .header__nav__subnav__button {
        margin-top: 36px
      }

      .header__nav__subnav__button--alt-margin {
        margin-top: 16px
      }

      .header__nav__subnav__links {
        margin-left: 75px
      }

      .header__nav__subnav__items {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        grid-gap: 28px 20px
      }

      .header__nav__subnav__items__group {
        margin-bottom: 20px
      }

      .header__nav__subnav__items__group:last-child {
        margin-bottom: 0
      }

      .header__nav__subnav__items__group__title {
        font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .8px;
        line-height: 16px;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 24px;
        letter-spacing: .5px;
        color: #80868b;
        margin-bottom: 20px
      }

      .header__nav__subnav__item {
        display: flex;
        flex-direction: column;
        margin-top: 14px;
        margin-right: 80px;
        position: relative;
        width: 120px
      }

      .header__nav__subnav__item a {
        display: flex;
        flex-direction: column;
        box-shadow: none;
        color: #3c4043;
        height: 100%;
        position: relative;
        z-index: 0
      }

      .header__nav__subnav__item a.link--blue {
        color: #1a73e8
      }

      .header__nav__subnav__item a.link--external .link__label {
        position: relative
      }

      .header__nav__subnav__item a.link--external .link__label::after {
        background-image: url("/static/images/icons/external-link.svg");
        background-position: right center;
        background-repeat: no-repeat;
        background-size: 12px;
        content: "";
        height: 24px;
        position: absolute;
        width: 16px;
        display: inline
      }

      .header__nav__subnav__item a>* {
        flex-grow: 1
      }

      .header__nav__subnav__item a::before {
        border-radius: 10px;
        content: "";
        background-color: #e8f0fe;
        display: none;
        width: calc(100% + 48px);
        left: -24px;
        height: calc(100% + 24px);
        top: -12px;
        position: absolute;
        z-index: -1
      }

      @media(max-width: calc(1024px - 1px)) {
        .header__nav__subnav__item a::before {
          border-radius: 4px;
          width: calc(100% + 4px);
          left: -2px;
          height: calc(100% + 4px);
          top: -2px
        }
      }

      .header__nav__subnav__item a:hover {
        text-decoration: underline
      }

      .header__nav__subnav__item a:focus {
        outline: 0;
        text-decoration: underline
      }

      .header__nav__subnav__item a:focus::before {
        display: block
      }

      .header__nav__subnav__item a:focus:not(:focus-visible)::before {
        display: none;
        color: #1967d2
      }

      .header__nav__subnav__item img {
        flex-grow: 0;
        width: auto;
        height: auto
      }

      .header__nav__subnav__item--current>.link {
        background: #e8f0fe
      }

      .header__nav__subnav__item__external-links a {
        display: inline-block
      }

      .header__nav__subnav__item__external-links a::before {
        border-radius: 4px;
        width: calc(100% + 4px);
        left: -2px;
        height: calc(100% + 4px);
        top: -2px
      }

      .header__nav__aside {
        display: none
      }

      @media(max-width: calc(1024px - 1px)) {
        .header__nav__aside {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #fff;
          border-bottom: 1px solid #dadce0;
          box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12), inset 0 -1px 0 0 #dadce0;
          flex-grow: 1;
          height: var(--header-height);
          position: absolute;
          top: 0;
          transition: transform .3s ease;
          width: 100%;
          z-index: 1
        }
      }

      .header__menu-button {
        background: transparent;
        border: 0;
        cursor: pointer;
        line-height: 0;
        padding: 10px
      }

      .header__mobile__nav {
        height: 100vh;
        left: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        position: fixed;
        top: 0;
        transition: opacity .3s ease;
        width: 100vw;
        z-index: 100
      }

      @media(min-width: 1024px) {
        .header__mobile__nav {
          visibility: hidden
        }
      }

      .header__mobile__nav.open {
        opacity: 1;
        pointer-events: auto
      }

      .header__mobile__nav.open .header__nav {
        transform: translateX(0)
      }

      .header__mobile__nav .header__mobile__nav__mask {
        background-color: #000;
        opacity: .85;
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 101
      }

      .header__mobile__nav .header__lockup {
        flex-grow: 0;
        height: var(--header-height);
        margin-bottom: 26px;
        padding: 0 14px;
        width: 100%
      }

      @media(max-width: 360px) {
        .header__mobile__nav .header__lockup {
          padding-left: 3px
        }

        .header__mobile__nav .header__lockup .link img {
          transform: scale(0.92)
        }

        .header__mobile__nav .header__lockup .link__label {
          font-size: 92%
        }
      }

      .header__mobile__nav .header__nav__close-button {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        width: var(--header-height);
        height: var(--header-height);
        padding: 0
      }

      .header__mobile__nav .header__nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-color: #fff;
        grid-gap: 4px;
        max-width: 360px;
        margin: 0;
        position: relative;
        width: 100%;
        transform: translateX(-360px);
        transition: transform .3s ease;
        z-index: 102
      }

      .header__mobile__nav .header__nav__item--has-subnav>div[tabindex] {
        color: #202124
      }

      .header__mobile__nav .header__nav__item>a {
        width: 100%
      }

      .header__mobile__nav .header__nav__item[opens-subnav] {
        cursor: pointer
      }

      .header__mobile__nav .header__nav__item,
      .header__mobile__nav .header__nav__subnav__item {
        display: flex;
        align-items: center;
        border: 0 !important;
        height: 48px;
        padding-left: 20px;
        width: 100%
      }

      @media(max-width: 360px) {

        .header__mobile__nav .header__nav__item,
        .header__mobile__nav .header__nav__subnav__item {
          padding-left: 10px
        }
      }

      .header__mobile__nav .header__nav__item--current,
      .header__mobile__nav .header__nav__subnav__item--current {
        background-color: #e8f0fe
      }

      .header__mobile__nav .header__nav__item--has-subnav,
      .header__mobile__nav .header__nav__subnav__item--has-subnav {
        background-image: url("/static/images/icons/menu-arrow.svg");
        background-position-x: calc(100% - 24px)
      }

      .header__mobile__nav .header__nav__item--has-subnav .header__nav__subnav,
      .header__mobile__nav .header__nav__subnav__item--has-subnav .header__nav__subnav {
        transform: translateX(-360px)
      }

      .header__mobile__nav .header__nav__item--has-subnav .header__nav__subnav.open,
      .header__mobile__nav .header__nav__subnav__item--has-subnav .header__nav__subnav.open {
        transform: translateX(0)
      }

      .header__mobile__nav .header__nav__subnav {
        display: flex;
        flex-direction: column;
        border-right: 1px solid #dadce0;
        box-shadow: none;
        height: calc(100vh - var(--header-height));
        left: 0;
        max-width: 360px;
        opacity: 1;
        overflow-y: auto;
        padding: 0;
        pointer-events: auto;
        position: absolute;
        top: var(--header-height);
        transition: transform .3s ease;
        width: 100%
      }

      .header__mobile__nav .header__nav__subnav[subnav-id=products] .header__nav__subnav__meta {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0
      }

      .header__mobile__nav .header__nav__subnav[subnav-id=products] .header__nav__subnav__title {
        display: none
      }

      .header__mobile__nav .header__nav__subnav__meta,
      .header__mobile__nav .header__nav__subnav__items__group__title {
        border-bottom: 1px solid #dadce0;
        padding-bottom: 13px;
        margin: 17px 33px 8px 20px;
        max-width: none
      }

      @media(max-width: 360px) {

        .header__mobile__nav .header__nav__subnav__meta,
        .header__mobile__nav .header__nav__subnav__items__group__title {
          margin-left: 10px
        }
      }

      .header__mobile__nav .header__nav__subnav__back-button {
        background-color: transparent;
        border: 0;
        display: block;
        cursor: pointer;
        padding: 10px;
        margin-bottom: 9px;
        transform: rotate(180deg) translateX(10px)
      }

      .header__mobile__nav .header__nav__subnav__title {
        color: #202124;
        font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: .2px;
        line-height: 24px;
        color: #80868b
      }

      .header__mobile__nav .header__nav__subnav__body {
        display: none
      }

      .header__mobile__nav .header__nav__subnav__button {
        border-bottom: 1px solid #dadce0;
        margin-bottom: 20px;
        margin-top: 0
      }

      .header__mobile__nav .header__nav__subnav__button .button {
        font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: .1px;
        color: #3c4043;
        background: transparent;
        box-shadow: none;
        border: 0;
        color: #3c4043 !important;
        font-weight: 500;
        padding: 20px 0
      }

      .header__mobile__nav .header__nav__subnav__links {
        display: block;
        margin: 0
      }

      .header__mobile__nav .header__nav__subnav__items {
        grid-gap: 0
      }

      .header__mobile__nav .header__nav__subnav__item {
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        white-space: nowrap;
        margin: 0
      }

      .header__mobile__nav .header__nav__subnav__item a {
        height: auto
      }

      .header__mobile__nav .header__nav__subnav__item img {
        display: none
      }

      .header__mobile__nav .header__nav__subnav__item__external-links {
        margin-left: 2px
      }

      .header__mobile__nav .header__nav__subnav__item__external-links a {
        background-size: 10px;
        margin-left: 3px;
        font-size: 14px
      }

      .header__mobile__nav .header__nav__subnav__items__group__icon {
        display: none
      }

      .header__mobile__nav .header__nav__subnav__items__group__title {
        color: #202124;
        font-family: "Google Sans Text", "Roboto", Arial, sans-serif;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: .2px;
        line-height: 24px;
        color: #80868b
      }

      .header__mobile__aside__buttons {
        display: none;
        gap: 16px;
        justify-content: center;
        padding: 8px 0
      }

      @media(max-width: calc(768px - 1px)) {
        .header__mobile__aside__buttons {
          display: flex
        }
      }

      .main {
        margin-top: var(--header-height)
      }

      @media(min-width: 768px)and (max-width: 1303px) {
        .main {
          margin-top: calc(var(--header-height)*2)
        }
      }