svg.fa {
    height: 1em;
    width: 1em;
    display: inline-flex;
    align-self: center;
    fill: currentColor;
    flex-shrink: 0
  }

  .align-baseline {
    position: relative;
    top: .125em
  }

  :root {
    --regular: "AppFontRegular", Helvetica, Arial, sans-serif;
    --light: "AppFontLight", Helvetica, Arial, sans-serif;
    --medium: "AppFontMedium", Helvetica, Arial, sans-serif;
    --light-italic: "AppFontItalic", Helvetica, Arial, sans-serif;
    --vh: 100vh;
    --su-complete-box-height: 160px;
    --su-learning-path-offset: calc(var(--su-complete-box-height) / 2)
  }

  html {
    font-family: var(--regular);
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal !important;
    letter-spacing: -0.01em;
    word-spacing: .1em;
  }

  /* 针对中文字符的优化 */
  html:lang(zh),
  html:lang(zh-CN) {
    letter-spacing: 0;
    word-spacing: 0;
  }

  * {
    box-sizing: border-box;
  }

  *,
  *::after,
  *::before {
    box-sizing: inherit
  }

  a {
    color: #09f;
    text-decoration: none;
    cursor: pointer
  }

  a:hover {
    color: #0188e4
  }

  *:focus {
    outline: none
  }

  input:focus {
    box-shadow: 0 0 2pt 1pt #acafb2
  }

  h1,
  h2,
  .headline {
    margin-top: 0;
    font-family: var(--light);
    font-weight: normal
  }

  h1,
  .headline {
    color: #09f;
    font-size: 40px;
    margin-bottom: 26px;
    line-height: 44px
  }

  .l-hero h1,
  .l-hero .headline {
    color: #fff
  }

  .content-headline {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 24px;
    font-family: var(--light);
    color: #09f;
    font-weight: normal
  }

  .content-headline>small {
    display: block;
    color: #495354;
    font-family: var(--light);
    font-size: 16px;
    line-height: 24px
  }

  .content-headline .fa {
    cursor: pointer
  }

  .content-headline .fa.bookmark--loading {
    cursor: initial
  }

  .content-headline button {
    font-size: 24px;
    flex-shrink: 0
  }

  .content-headline#study_unit_headline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: -10px
  }

  @media screen and (max-width : 1023px) {
    .content-headline#study_unit_headline {
      margin-bottom: 16px
    }
  }

  .content-headline#study_unit_headline>div {
    margin: 10px auto 0 0;
    padding-right: 15px;
    flex: 1 0 auto;
    max-width: 100%
  }

  .content-headline#study_unit_headline>div>* {
    margin-left: 4px
  }

  .content-headline#study_unit_headline .badge-progress {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin: 10px 0 5px;
    font-size: 10px;
    text-transform: uppercase;
    font-family: var(--medium)
  }

  .content-headline#study_unit_headline .badge-progress .fa {
    cursor: default
  }

  .content-headline#study_unit_headline .badge-progress.incomplete {
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    color: #acafb2
  }

  .content-headline#study_unit_headline .badge-progress.complete {
    background-color: #ffc026;
    color: #966c09;
    -webkit-mask: linear-gradient(-60deg, black 0%, black 40%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.7) 41%, black 41%, black 42%, rgba(0, 0, 0, 0.7) 42%, rgba(0, 0, 0, 0.7) 44%, black 44%, black 100%) right/300% 100%;
    background-repeat: no-repeat;
    animation: shimmer 10s ease-in-out 2s infinite
  }

  .recommendation .recommendation-name {
    font-family: var(--light);
    color: #09f;
    font-size: 16px;
    line-height: 21px;
    margin-bottom: 0;
    margin-top: 0;
  }

  .recommendation .recommendation-quote {
    font-family: var(--light);
    color: #495354;
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 40px;
    margin-top: 0;
    text-wrap: balance;
  }

  .recommendation .recommendation-info {
    font-family: var(--light);
    color: #495354;
    font-size: 16px;
    line-height: 21px;
    margin-bottom: 0;
    margin-top: 0;
  }

  .containers.components .content>h1 {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 30px;
    font-family: var(--light);
    color: #09f;
    font-weight: normal;
    border-bottom: none;
    padding-bottom: 0
  }

  .containers.components .content h2 {
    font-family: var(--light);
    color: #495354;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 22px
  }

  .containers.components .content h2.listingbox__title {
    font-size: 24px;
    line-height: 30px;
    margin-top: 0;
    font-family: var(--regular);
    color: #09f;
    font-weight: normal;
    clear: none
  }

  @media screen and (max-width : 479px) {
    .containers.components .content h2.listingbox__title {
      font-size: 16px;
      line-height: 16px;
      margin-bottom: 13px
    }
  }

  .containers.components .content section:not(:first-child) h2:not(.listingbox__title) {
    margin-top: 40px
  }

  .listing-headline {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 30px;
    font-family: var(--light);
    color: #09f;
    font-weight: normal;
    padding-bottom: 32px;
    border-bottom: 1px solid #d8d8d8
  }

  .listing-headline+.listing-subheadline {
    margin-top: -3px
  }

  .listing-headline--borderless {
    border-bottom: none;
    padding-bottom: 0
  }

  .listing-subheadline {
    font-size: 18px;
    line-height: 21px;
    margin-bottom: 30px;
    font-family: var(--light);
    color: #09f;
    font-weight: normal
  }

  .listing-subheadline+p.small {
    margin-top: -11px
  }

  .listing-subheadline.listing-subheadline--highlight {
    font-family: var(--regular)
  }

  h2 {
    color: #09f;
    font-size: 36px;
    line-height: 40px;
    margin-bottom: 30px;
    clear: both
  }

  @media screen and (max-width : 479px) {
    h2 {
      font-size: 24px;
      line-height: 30px
    }
  }

  h3 {
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 24px;
    margin-top: 0;
    font-family: var(--regular);
    color: #09f;
    font-weight: normal
  }

  h4 {
    font-size: 14px;
    line-height: 21px;
    margin-top: 0;
    font-family: var(--light);
    color: #09f;
    font-weight: normal;
    margin-bottom: 0
  }

  h5 {
    margin-top: 0;
    font-family: var(--regular);
    color: #09f;
    line-height: 21px;
    margin-bottom: 18px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: normal
  }

  hr {
    height: 1px;
    background: #d8d8d8;
    border: none
  }

  p {
    font-family: var(--light);
    color: #495354;
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 40px;
    margin-top: 0
  }

  p.lead {
    font-size: 24px;
    line-height: 32px
  }

  p.small {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 22px
  }

  p.tiny {
    font-family: var(--regular);
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0
  }

  p.highlight {
    color: #09f
  }

  strong {
    font-weight: 600;
    font-family: var(--medium)
  }

  small {
    font-size: 80%
  }

  .underline {
    text-decoration: underline
  }

  ul {
    margin-left: 20px;
    padding: 0
  }

  ul.unstyled {
    list-style-type: none;
    margin-left: 0
  }

  form {
    margin-top: 30px;
    margin-bottom: 30px
  }

  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
  }

  textarea,
  input[type=tel],
  input[type=text],
  input[type=password],
  input[type=email] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    padding: 10px;
    color: #676f77;
    font-size: 16px
  }

  textarea::placeholder,
  input[type=tel]::placeholder,
  input[type=text]::placeholder,
  input[type=password]::placeholder,
  input[type=email]::placeholder {
    color: #ddd
  }

  textarea:disabled,
  input[type=tel]:disabled,
  input[type=text]:disabled,
  input[type=password]:disabled,
  input[type=email]:disabled {
    background-color: #f3f3f3
  }

  input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0
  }

  input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0
  }

  input[type=search]::-webkit-search-decoration,
  input[type=search]::-webkit-search-cancel-button,
  input[type=search]::-webkit-search-results-button,
  input[type=search]::-webkit-search-results-decoration {
    display: none
  }

  .controls {
    position: relative
  }

  .error>.controls>textarea,
  .error>.controls>input[type=text],
  .error>.controls>input[type=password],
  .error>.controls>input[type=email] {
    border: 1px solid #ec8e8e;
    background-color: #fee4e4
  }

  input[type=text],
  input[type=password],
  input[type=email] {
    height: 45px
  }

  label {
    color: #495354;
    margin-top: 0;
    font-family: var(--regular);
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 9px;
    display: block;
    clear: both
  }

  .CybotCookiebotDialogDetailBodyContentCookieContainerButton label {
    display: inline
  }

  select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    padding: 10px;
    color: #676f77;
    font-size: 16px;
    height: 45px;
    background: rgba(0, 0, 0, 0) url("/assets/arrow_down-9c0d01f76785c85294c7456f0dd265a14875124ef21271c0a8b4d45c5e37dcdf.digested.webp") no-repeat scroll right 15px center;
    font-size: 14px;
    color: #495354;
    max-width: 100%
  }

  select.valid {
    border-color: #5ed29f
  }

  select.invalid {
    border-color: #ec8e8e
  }

  .error>label {
    color: #ec8e8e
  }

  input[type=checkbox]:not(.CybotCookiebotDialogBodyLevelButton) {
    display: none
  }

  input[type=checkbox]+label>span:first-child:not(.CybotCookiebotDialogBodyLevelButtonSlider),
  input[type=checkbox]+span:not(.CybotCookiebotDialogBodyLevelButtonSlider) {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-top: -2px;
    vertical-align: top;
    background: url("/assets/check_radio_sheet-fdcb576697bb5685c22f87e0deb7dd254e7f5bb894786349594ea12b2368ae31.digested.webp") -10px -10px no-repeat;
    cursor: pointer
  }

  input[type=checkbox]:checked+label>span:first-child,
  input[type=checkbox]:checked+span {
    background: url("/assets/check_radio_sheet-fdcb576697bb5685c22f87e0deb7dd254e7f5bb894786349594ea12b2368ae31.digested.webp") -45px -10px no-repeat
  }

  input[type=radio]:not(.CybotCookiebotDialogBodyLevelButton) {
    display: none
  }

  input[type=radio]+label>span:first-child:not(.CybotCookiebotDialogBodyLevelButtonSlider),
  input[type=radio]+span:not(.CybotCookiebotDialogBodyLevelButtonSlider) {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-top: -4px;
    vertical-align: top;
    background: url("/assets/check_radio_sheet-fdcb576697bb5685c22f87e0deb7dd254e7f5bb894786349594ea12b2368ae31.digested.webp") -44px -45px no-repeat;
    cursor: pointer
  }

  input[type=radio]:checked+label>span:first-child,
  input[type=radio]:checked+span {
    background: url("/assets/check_radio_sheet-fdcb576697bb5685c22f87e0deb7dd254e7f5bb894786349594ea12b2368ae31.digested.webp") -9px -45px no-repeat
  }

  input[type=radio]:checked+label {
    color: #09f
  }

  button:disabled>.btn-block {
    background-color: #676f77
  }

  .help-inline {
    margin-top: 5px;
    color: #ec8e8e;
    font-size: 14px
  }

  .pull-right {
    float: right
  }

  .pull-left {
    float: left
  }

  .clear-all {
    clear: both
  }

  .text-center {
    text-align: center
  }

  .text-right {
    text-align: right
  }

  .text-bold {
    font-family: var(--medium);
    font-weight: 400
  }

  .text-stroke {
    text-decoration: line-through
  }

  .red {
    color: #ec8e8e
  }

  .green {
    color: #5ed29f
  }

  .hide {
    display: none
  }

  .invisible {
    opacity: 0;
    pointer-events: none
  }

  .hide-it {
    display: none !important
  }

  @media screen and (max-width : 1023px) {
    .hide-md {
      display: none !important
    }
  }

  @media screen and (max-width : 1023px) {
    .show-md {
      display: block !important
    }
  }

  @media screen and (max-width : 763px) {
    .show-sm-flex {
      display: flex !important
    }
  }

  @media screen and (max-width : 763px) {
    .hide-sm {
      display: none !important
    }
  }

  @media screen and (max-width : 1023px)and (min-width : 480px) {
    .hide-sm-md-only {
      display: none !important
    }
  }

  @media screen and (max-width : 479px) {
    .hide-xs {
      display: none !important
    }
  }

  @media screen and (min-width : 1024px) {
    .hide-lg {
      display: none !important
    }
  }

  @media screen and (min-width : 764px) {
    .hide-md-lg-only {
      display: none !important
    }
  }

  .no-scroll {
    overflow: hidden !important
  }

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



  .shopify-buy-frame--toggle {
    display: none !important
  }

  .atlas-ebook-banner .ad-banner {
    background-color: #3a5062;
    border-radius: 3px;
    display: flex;
    gap: 30px;
    padding: 30px;
    color: #fff;
    width: 600px;
    max-width: 100%;
    margin: 50px auto 70px;
    font-size: 14px;
    text-align: center
  }

  .dashboard__hero .atlas-ebook-banner .ad-banner {
    margin: 40px auto 8px
  }

  @media screen and (max-width : 763px) {
    .dashboard__hero .atlas-ebook-banner .ad-banner {
      margin: 30px 0 8px;
      padding: 20px
    }
  }

  @media screen and (max-width : 763px) {
    .atlas-ebook-banner .ad-banner {
      flex-direction: column;
      width: 100%;
      margin: 0 0 30px
    }
  }

  .atlas-ebook-banner .ad-banner .shopify-buy-frame {
    max-width: 100% !important;
    position: relative;
    margin-top: -16px;
    margin-bottom: 8px
  }

  .atlas-ebook-banner .ad-banner .image {
    flex: 1 1 40%;
    position: relative
  }

  @media screen and (max-width : 763px) {
    .atlas-ebook-banner .ad-banner .image {
      display: none
    }
  }

  .atlas-ebook-banner .ad-banner .image img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -30px;
    height: 180%;
    width: auto
  }

  .atlas-ebook-banner .ad-banner .content {
    flex: 1 1 60%;
    background-color: #3a5062;
    position: relative;
    z-index: 1
  }

  @media screen and (max-width : 763px) {
    .atlas-ebook-banner .ad-banner .content {
      flex: 1
    }
  }

  .atlas-ebook-banner .ad-banner .subtitle {
    color: #09f;
    text-transform: uppercase;
    margin-bottom: 8px
  }

  .atlas-ebook-banner .ad-banner .description {
    font-size: 18px;
    font-family: var(--light);
    margin-bottom: 16px;
    line-height: 1.2
  }

  .atlas-ebook-banner .ad-banner .price {
    font-size: 36px;
    color: #ec8e8e;
    margin-bottom: 16px;
    line-height: 1.2;
    font-family: var(--light)
  }

  .atlas-ebook-banner.atlas-ebook-banner--dashboard {
    margin-bottom: 20px
  }

  @media screen and (max-width : 763px) {
    .atlas-ebook-banner.atlas-ebook-banner--dashboard {
      margin-bottom: 0
    }
  }

  .atlas-ebook-banner.atlas-ebook-banner--dashboard .ad-banner {
    padding: 20px;
    text-align: left
  }

  @media screen and (max-width : 763px) {
    .atlas-ebook-banner.atlas-ebook-banner--dashboard .ad-banner {
      margin-bottom: 0
    }
  }

  .atlas-ebook-banner.atlas-ebook-banner--dashboard .content {
    display: flex;
    align-items: center;
    flex: 1 1 85%
  }

  @media screen and (max-width : 479px) {
    .atlas-ebook-banner.atlas-ebook-banner--dashboard .content {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 14px
    }
  }

  .atlas-ebook-banner.atlas-ebook-banner--dashboard .wrapper {
    flex: 1 1 auto
  }

  .atlas-ebook-banner.atlas-ebook-banner--dashboard .subtitle {
    font-size: 12px
  }

  .atlas-ebook-banner.atlas-ebook-banner--dashboard .description {
    font-size: 16px;
    font-family: var(--light);
    margin-bottom: 0;
    line-height: 1.2;
    display: inline
  }

  .atlas-ebook-banner.atlas-ebook-banner--dashboard .description strong {
    font-family: var(--light)
  }

  .atlas-ebook-banner.atlas-ebook-banner--dashboard .price {
    display: inline;
    font-size: 18px;
    color: #ec8e8e;
    margin-bottom: 0;
    line-height: 1.2;
    font-family: var(--medium)
  }

  .atlas-ebook-banner.atlas-ebook-banner--dashboard .image {
    flex: 1 1 15%;
    position: relative
  }

  @media screen and (max-width : 763px) {
    .atlas-ebook-banner.atlas-ebook-banner--dashboard .image {
      display: none
    }
  }

  .atlas-ebook-banner.atlas-ebook-banner--dashboard .image img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -10px;
    height: 150px;
    width: auto
  }

  .atlas-ebook-banner.atlas-ebook-banner--dashboard .timer {
    text-align: center;
    opacity: .7;
    font-size: 10px
  }

  .atlas-ebook-banner.atlas-ebook-banner--dashboard .buy-button {
    display: flex;
    flex-direction: column;
    width: 110px;
    flex: 0 1 auto
  }

  .atlas-ebook-banner.atlas-ebook-banner--dashboard .shopify-buy-frame {
    width: 110px
  }

  body {
    margin: 0
  }

  body.modal-open {
    overflow: hidden
  }

  .l-container {
    margin: 0 auto;
    max-width: 940px
  }

  @media screen and (max-width : 1023px) {
    .l-container {
      padding: 0 32px
    }
  }

  @media screen and (max-width : 479px) {
    .l-container {
      padding: 0 15px
    }
  }

  .l-container--light-bg {
    background-color: #f7f7f7;
    padding-bottom: 1px
  }

  .l-container--narrow {
    max-width: 500px
  }

  .l-topbar {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: right;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px
  }

  .l-topbar #desktop_changelog {
    position: absolute;
    display: block;
    vertical-align: middle;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0
  }

  .l-topbar #desktop_changelog #HW_badge_cont {
    width: 100%;
    height: 100%
  }

  .l-topbar #desktop_changelog #HW_badge {
    left: -5px;
    top: -2px;
    background: #ec8e8e
  }

  .l-topbar #desktop_changelog #HW_badge.HW_softHidden {
    background: rgba(0, 0, 0, 0)
  }

  .l-topbar .l-topbar-item {
    padding: 0 15px;
    font-size: 12px;
    font-family: var(--regular);
    position: relative
  }

  .l-topbar .badge.badge,
  .l-topbar .btn.btn-tiny {
    margin-left: 10px
  }

  .l-topbar .dropdown-toggle {
    display: inline-block;
    padding: 7px 0
  }

  .l-topbar .dropdown-toggle>span {
    display: inline-block
  }

  .l-topbar .logo {
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 0;
    z-index: 1
  }

  .l-topbar .logo svg,
  .l-topbar .logo {
    display: block;
    max-width: 100px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px
  }

  .no-nav .l-topbar {
    height: 0
  }

  @media screen and (max-width : 1023px) {
    .l-topbar {
      display: none
    }
  }

  .l-topbar *:last-child {
    padding-right: 0
  }

  .dropdown {
    display: inline-block;
    padding: 0px 15px;
    position: relative
  }

  .dropdown>.dropdown-toggle>.fa {
    margin-left: 3px
  }

  .dropdown>.border-hiding {
    display: none
  }

  .dropdown>.dropdown-menu {
    display: none;
    position: absolute;
    top: 30px;
    right: -1px;
    z-index: 1000;
    display: none;
    padding-top: 15px;
    margin: 0;
    background-color: #f7f7f7;
    border: 1px solid #d8d8d8;
    border-radius: 2px 0 2px 2px;
    text-align: left;
    width: 260px;
    line-height: 1.2
  }

  .dropdown>.dropdown-menu ul {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0
  }

  .dropdown>.dropdown-menu .dropdown-divider {
    height: 1px;
    background-color: #d8d8d8;
    width: 100%;
    margin-bottom: 15px
  }

  .dropdown>.dropdown-menu li {
    margin: 0 14px 15px 8px
  }

  .dropdown>.dropdown-menu li button {
    line-height: 1.2;
    color: #495354
  }

  .dropdown>.dropdown-menu li>a {
    color: #495354
  }

  .dropdown>.dropdown-menu li .fa {
    color: #09f;
    margin-right: 5px;
    width: 15px
  }

  .dropdown>.dropdown-menu li.active {
    color: #09f
  }

  .dropdown>.dropdown-menu li.active button {
    color: #09f
  }

  .dropdown.open,
  .dropdown:hover {
    padding: 0px 14px;
    background-color: #f7f7f7;
    border-left: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8
  }

  .dropdown.open>.dropdown-menu,
  .dropdown:hover>.dropdown-menu {
    display: block
  }

  .dropdown.open>.border-hiding,
  .dropdown:hover>.border-hiding {
    position: absolute;
    display: block;
    right: 0;
    height: 1px;
    background-color: #f7f7f7;
    top: 30px;
    z-index: 1100;
    width: 100%
  }

  .open>.dropdown-menu {
    display: block
  }

  .l-hero--nav {
    background: #3a5062 none repeat scroll center center
  }

  .l-hero--nav>.l-container {
    height: 100%
  }

  @media screen and (max-width : 1023px) {
    .l-hero--nav {
      display: none
    }
  }

  .l-navigation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style-type: none;
    height: 100px
  }

  .l-navigation>.l-navigation__item {
    display: inline-block;
    margin-left: 20px;
    position: relative
  }

  .l-navigation>.l-navigation__item>a {
    font: 400 16px var(--medium);
    text-transform: uppercase;
    color: #fff;
    display: block;
    margin-bottom: -10px;
    padding-bottom: 10px
  }

  .l-navigation>.l-navigation__item>a.active {
    color: #09f
  }

  .l-navigation>.l-navigation__item>a>.fa {
    margin-right: 7px;
    text-transform: none
  }

  .l-navigation>.l-navigation__item .popover {
    display: none;
    background-color: #fff;
    text-align: left;
    padding: 20px 0;
    max-width: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1)
  }

  .l-navigation>.l-navigation__item .popover[x-placement^=bottom] .arrow:after {
    border-bottom-color: #fff
  }

  .l-navigation>.l-navigation__item .popover .arrow {
    left: calc(50% - 10px)
  }

  .l-navigation>.l-navigation__item .popover a {
    font-family: var(--regular);
    font-size: 14px;
    line-height: 30px;
    padding: 0 30px;
    color: #676f77;
    display: block
  }

  .l-navigation>.l-navigation__item .popover a.active {
    color: #09f
  }

  .l-navigation>.l-navigation__item .popover a:hover {
    display: block;
    background-color: #f3f3f3
  }

  .l-navigation>.l-navigation__item>a.btn {
    margin: 0;
    padding: 10px 16px 10px 14px;
    margin: 0;
    align-items: center;
    display: inline-flex
  }

  .l-navigation>.l-navigation__item>a.btn.active {
    color: #fff
  }

  .l-navigation>.l-navigation__item:hover>.popover {
    display: block;
    top: 27px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
  }

  .l-navigation>.l-navigation__item .l-navigation__sub-item {
    position: relative
  }

  .l-navigation>.l-navigation__item .l-navigation__sub-item:hover {
    background-color: #f3f3f3
  }

  .l-navigation>.l-navigation__item .l-navigation__sub-item:hover>.popover {
    display: block;
    top: -20px;
    white-space: nowrap
  }

  .l-navigation__tagline {
    display: block;
    margin-right: auto;
    margin-left: 120px;
    font-family: var(--light);
    color: #fff;
    font-size: 14px
  }

  @media screen and (max-width : 1023px) {
    .l-navigation__tagline {
      margin-left: 0;
      margin-right: 0;
      font-size: 10px
    }
  }

  .l-topbar-mobile {
    display: none
  }

  @media screen and (max-width : 1023px) {
    .l-topbar-mobile {
      background-color: #3a5062;
      display: flex;
      align-items: center;
      width: 100%;
      height: 58px;
      position: fixed !important;
      top: 0 !important;
      left: 0;
      z-index: 9999 !important;
      max-width: 100%;
      transform: none !important;
      transition: none !important;
    }

    /* 确保 topbar 始终可见，覆盖 headroom 效果 */
    .l-topbar-mobile.headroom,
    .l-topbar-mobile.headroom-pinned,
    .l-topbar-mobile.headroom-unpinned {
      position: fixed !important;
      top: 0 !important;
      transform: translateY(0) !important;
      transition: none !important;
    }

    /* 为页面内容添加顶部间距，避免被固定顶栏遮挡 */
    .slideout-panel {
      padding-top: 58px;
    }

    /* 确保页面内容不被遮挡 */
    body.home .l-hero {
      margin-top: 0;
      padding-top: 20px;
    }
  }

  .l-topbar-mobile>.nav-mobile-icons {
    margin-left: auto
  }

  .l-topbar-mobile>.nav-mobile-icons .fa {
    color: #fff;
    font-size: 30px;
    cursor: pointer
  }

  .l-topbar-mobile>.nav-mobile-icons>.toggle-button {
    padding: 10px;
    transform: translateX(10px)
  }

  .l-topbar-mobile>.mobile-logo {
    display: none;
    padding: 12px;
    margin-left: -12px;
    overflow: hidden
  }

  .l-topbar-mobile>.mobile-logo svg {
    display: block;
    border-radius: 2px
  }

  @media screen and (max-width : 1023px) {
    .l-topbar-mobile>.mobile-logo {
      display: block
    }
  }

  .l-topbar-mobile>.btn.btn-tiny.btn--premium {
    margin-right: 10px;
    flex-shrink: 0
  }

  .HW_badge_cont {
    z-index: 1 !important
  }

  .l-hero--subsection {
    background-color: #2d3e4d;
    padding: 15px 0;
    position: relative;

  }

  @media screen and (max-width : 1023px) {
    .l-hero--subsection {
      padding: 10px 0
    }

    .l-hero--subsection.headroom {
      transition: transform .25s linear
    }

    .l-hero--subsection.headroom-pinned {
      transform: translateY(0)
    }

    .l-hero--subsection.headroom-unpinned {
      transform: translateY(-58px)
    }
  }

  .trust-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px
  }

  .trust-items .item {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    text-wrap: pretty
  }

  .trust-items .item .primary {
    font-family: var(--medium);
    font-weight: 600;
  }

  .trust-items .item .primary .light {
    font-family: var(--light)
  }

  .trust-items .item .secondary {
    font-family: var(--light)
  }

  @media screen and (max-width : 1023px) {
    .trust-items {
      grid-template-columns: 1fr
    }

    .trust-items .item {
      grid-row: 1;
      grid-column: 1;
      opacity: 0;
      transition: opacity .5s ease-in-out;
      text-align: center
    }

    .trust-items .item.is-visible {
      opacity: 1
    }

    .trust-items img {
      display: none
    }
  }

  .l-hero {
    background: #3a5062 none repeat scroll center center
  }

  @media screen and (max-width : 1023px) {
    .l-hero {
      margin-bottom: 0px;
      padding-top: 58px;
      padding-bottom: 50px
    }
  }

  .l-hero.l-hero--max {
    min-height: calc(100vh - 30px);
    padding-top: 110px
  }

  .no-nav .l-hero.l-hero--max {
    min-height: 100vh
  }

  @media screen and (max-width : 1023px) {
    .l-hero.l-hero--max {
      min-height: 100vh;
      padding-top: 12px
    }
  }

  .l-hero>.l-container>.l-flex-row {
    margin-top: 55px
  }

  @media screen and (max-width : 1023px) {
    .l-hero>.l-container>.l-flex-row {
      margin-top: 0
    }
  }

  .l-hero>.l-container>h1,
  .l-hero>.l-container>.headline {
    max-width: 70%
  }

  @media screen and (max-width : 1023px) {

    .l-hero>.l-container>h1,
    .l-hero>.l-container>.headline {
      max-width: 100%
    }
  }

  @media screen and (max-width : 479px) {

    .l-hero>.l-container>h1,
    .l-hero>.l-container>.headline {
      font-size: 30px;
      line-height: 34px;
      margin-bottom: 18px
    }
  }

  .l-hero>.l-container>h1.headline-centered,
  .l-hero>.l-container>.headline.headline-centered {
    max-width: 100%;
    text-align: center
  }

  @media screen and (max-width : 479px) {

    .l-hero>.l-container>h1.headline-centered,
    .l-hero>.l-container>.headline.headline-centered {
      margin-bottom: 0px
    }
  }

  .l-hero>.l-container>h1.headline-centered>h1,
  .l-hero>.l-container>.headline.headline-centered>h1 {
    margin-bottom: 15px
  }

  @media screen and (max-width : 479px) {

    .l-hero>.l-container>h1.headline-centered>h1,
    .l-hero>.l-container>.headline.headline-centered>h1 {
      font-size: 18px;
      line-height: 24px
    }
  }

  .l-hero>.l-container>h1.headline-centered>h2,
  .l-hero>.l-container>h1.headline-centered .h2,
  .l-hero>.l-container>.headline.headline-centered>h2,
  .l-hero>.l-container>.headline.headline-centered .h2 {
    font-size: 24px;
    color: #fff;
    line-height: 1.5
  }

  @media screen and (max-width : 479px) {

    .l-hero>.l-container>h1.headline-centered>h2,
    .l-hero>.l-container>h1.headline-centered .h2,
    .l-hero>.l-container>.headline.headline-centered>h2,
    .l-hero>.l-container>.headline.headline-centered .h2 {
      margin-bottom: 0px
    }
  }

  .l-hero>.l-container .headline__img {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    margin-bottom: 5px
  }

  .l-hero>.l-container .sub-headline {
    color: #b8b7b7;
    max-width: 70%
  }

  @media screen and (max-width : 1023px) {
    .l-hero>.l-container .sub-headline {
      max-width: 100%
    }
  }

  .ab-benefits-bullet-list--original .sub-headline {
    color: #fff !important;
    margin-bottom: 30px
  }

  .ab-benefits-bullet-list--original .benefits__list {
    font-family: var(--light);
    list-style: none;
    margin: 0;
    color: #fff;
    font-size: 18px;
    text-wrap: balance;
    text-align: left
  }

  @media screen and (max-width : 479px) {
    .ab-benefits-bullet-list--original .benefits__list {
      font-size: 14px
    }
  }

  .ab-benefits-bullet-list--original .benefits__list li {
    display: flex
  }

  .ab-benefits-bullet-list--original .benefits__list li .circle {
    flex: 0 0 auto;
    margin: 0px 10px 0 0
  }

  .ab-benefits-bullet-list--original .benefits__list li .green {
    font-family: var(--medium)
  }

  .ab-benefits-bullet-list--original .benefits__list li+li {
    margin-top: 20px
  }

  .l-flex-row {
    display: flex;
    flex-direction: row;
    align-items: center
  }

  @media screen and (max-width : 1023px) {
    .l-flex-row {
      flex-direction: column
    }
  }

  .l-flex-row>* {
    flex: 1 1 auto;
    width: 100%
  }

  @media screen and (max-width : 1023px) {
    .l-flex-row>* {
      margin-bottom: 50px
    }
  }

  .l-flex-row>*+* {
    margin-left: 20px
  }

  @media screen and (max-width : 1023px) {
    .l-flex-row>*+* {
      margin-left: 0
    }
  }

  .l-flex-row--reverse>* {
    flex: 1
  }

  @media screen and (max-width : 1023px) {
    .l-flex-row--reverse>* {
      margin-left: 0
    }
  }

  .l-flex-row--reverse>*+* {
    margin-left: 0;
    margin-right: 20px
  }

  @media screen and (max-width : 1023px) {
    .l-flex-row--reverse>*+* {
      margin: 0
    }
  }

  @media screen and (min-width : 1024px) {
    .l-flex-row--reverse {
      flex-direction: row-reverse
    }
  }

  .l-flex-row--top {
    align-items: flex-start
  }

  .l-flex-row--center {
    justify-content: center
  }

  .middlebar {
    transition: box-shadow 2s linear;
    background-color: #f7f7f7;
    line-height: 60px;
    font-size: 14px;
    font-family: var(--regular);
    color: #495354;
    min-height: 60px;
    position: sticky;
    top: 0;
    z-index: 500
  }

  @media screen and (max-width : 1023px) {
    .middlebar {
      line-height: 57px;
      min-height: 57px;
      width: 100%;
      top: 57px;
      box-shadow: 0 5px 5px rgba(0, 0, 0, .2)
    }

    .middlebar.headroom {
      transition: transform .25s linear
    }

    .middlebar.headroom-pinned {
      transform: translateY(0)
    }

    .middlebar.headroom-unpinned {
      transform: translateY(-57px)
    }
  }

  .middlebar a {
    color: #495354
  }

  .middlebar .sidebar-toggle {
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 5px
  }

  @media screen and (max-width : 1023px) {
    .middlebar .sidebar-toggle {
      display: block
    }
  }

  .middlebar .sidebar-toggle a {
    cursor: pointer;
    display: inline-block;
    min-height: 48px
  }

  .middlebar .sidebar-toggle a.extended {
    color: #09f
  }

  .middlebar .filter-dropdown>a {
    display: inline-block;
    min-width: 48px;
    min-height: 48px;
    text-align: center
  }

  .middlebar .filter-dropdown--active>a {
    color: #09f
  }

  @media screen and (max-width : 479px) {
    .middlebar .filter-dropdown--active>a .fa {
      color: #676f77
    }
  }

  .middlebar .filter-dropdown span {
    display: inline-flex
  }

  .middlebar .filter-dropdown .fa {
    margin-left: 5px
  }

  @media screen and (max-width : 479px) {
    .middlebar .filter-dropdown .fa {
      font-size: 25px;
      vertical-align: middle;
      margin-right: -8px;
      color: #acafb2
    }
  }

  .middlebar form {
    margin: 0;
    position: relative
  }

  .middlebar form>input[type=text] {
    float: right;
    margin-top: 12px;
    width: 160px;
    font-size: 14px;
    padding: 10px 40px 10px 15px;
    border: 1px solid #d8d8d8;
    background-color: #fff;
    height: 35px;
    margin-left: 20px;
    line-height: normal
  }

  .middlebar form>input[type=text]::placeholder {
    color: #495354
  }

  @media screen and (max-width : 763px) {
    .middlebar form>input[type=text] {
      display: none
    }
  }

  .middlebar form>button[type=submit] {
    width: 48px;
    height: 48px;
    border: none;
    right: -8px;
    position: absolute;
    top: 4px;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    padding: 0
  }

  .middlebar form>button[type=submit]>.fa {
    color: #acafb2;
    font-size: 20px
  }

  @media screen and (max-width : 763px) {
    .middlebar form>button[type=submit]>.fa {
      font-size: 25px;
      margin-right: -5px;
      margin-top: 0;
      color: #acafb2
    }
  }

  @media screen and (max-width : 763px) {
    .middlebar form>button[type=submit] {
      position: inherit;
      float: right
    }
  }

  .breadcrumbs {
    display: flex;
    align-items: flex-start;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #acafb2
  }

  .breadcrumbs a>.fa {
    margin-right: 5px
  }

  .breadcrumbs a:hover {
    color: #09f
  }

  @media screen and (max-width : 479px) {
    .breadcrumbs a {
      display: none
    }
  }

  .breadcrumbs>.fa {
    margin: 0 8px;
    top: unset
  }

  @media screen and (max-width : 1023px) {
    .breadcrumbs>.fa {
      top: .125em
    }
  }

  @media screen and (max-width : 1023px) {
    .breadcrumbs {
      display: none
    }
  }

  .breadcrumbs span {
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .breadcrumbs span.parent {
    flex: 0 1 auto;
    max-width: 200px
  }

  .breadcrumbs span.last {
    flex: 0 1 auto
  }

  .breadcrumbs-mobile {
    font-size: 14px;
    margin: 10px 0 5px;
    display: none
  }

  @media screen and (max-width : 1023px) {
    .breadcrumbs-mobile {
      display: block
    }

    .breadcrumbs-mobile>span {
      display: none
    }

    .breadcrumbs-mobile>.fa {
      display: none;
      margin-left: 8px;
      color: #acafb2
    }

    .breadcrumbs-mobile>.parent {
      display: inline
    }

    .breadcrumbs-mobile>.parent a {
      color: #495354;
      font-family: var(--light)
    }

    .breadcrumbs-mobile>.parent a:hover {
      color: #09f
    }

    .breadcrumbs-mobile>.parent+.fa {
      display: inline-block
    }
  }

  .l-flex-row>.sidebar {
    flex: 0 0 218px
  }

  @media screen and (min-width : 1024px) {
    .l-flex-row>.sidebar {
      position: -webkit-sticky;
      position: sticky;
      top: 100px
    }
  }

  @media screen and (max-width : 1023px) {
    .l-flex-row>.sidebar {
      margin-bottom: 25px;
      margin-left: -32px;
      margin-top: -40px;
      background-color: #f7f7f7;
      max-height: 0;
      padding: 0 32px;
      overflow: hidden;
      transition: max-height .45s linear;
      position: fixed;
      top: 150px;
      width: 100%;
      z-index: 700;
      box-shadow: 0 5px 5px rgba(0, 0, 0, .2)
    }

    .l-flex-row>.sidebar.headroom {
      transition: top .25s linear
    }

    .l-flex-row>.sidebar.headroom-pinned {
      top: 150px
    }

    .l-flex-row>.sidebar.headroom-unpinned {
      top: 93px
    }
  }

  @media screen and (max-width : 479px) {
    .l-flex-row>.sidebar {
      margin-left: -15px;
      padding: 0 15px;
      width: 100%
    }
  }

  .l-flex-row>.sidebar.extended {
    max-height: calc(100vh - 53px);
    overflow-y: auto
  }

  @media screen and (max-width : 479px) {
    .l-flex-row>.sidebar.extended {
      padding-bottom: 15px
    }
  }

  .l-main {
    padding-top: 40px
  }

  .l-main.l-main-dashboard {
    padding-top: 0;
    margin-bottom: 30px;
    overflow-x: hidden
  }

  @media screen and (max-width : 1023px) {
    .l-main {
      padding-top: 20px
    }
  }

  .l-main .content {
    word-break: break-word;
    min-width: 0
  }

  @media screen and (min-width : 1024px) {
    .sub-navigation {
      max-height: calc(100vh - 100px);
      overflow-y: auto
    }
  }

  .sub-navigation ul {
    padding: 0;
    margin: 0;
    font: 14px/20px var(--regular);
    list-style-type: none
  }

  @media screen and (max-width : 1023px) {
    .sub-navigation ul {
      font: 400 14px var(--regular);
      color: #495354;
      margin: 0
    }
  }

  .sub-navigation ul>li {
    margin-bottom: 10px
  }

  @media screen and (max-width : 1023px) {
    .sub-navigation ul>li {
      border-top: 1px solid #e6e6e6;
      margin-bottom: 0px
    }
  }

  .sub-navigation ul>li>a {
    color: #495354
  }

  @media screen and (max-width : 1023px) {
    .sub-navigation ul>li>a {
      padding-top: 12px;
      padding-bottom: 12px;
      display: block;
      margin-right: 35px
    }
  }

  .sub-navigation ul>li>a:hover {
    color: #0188e4
  }

  .sub-navigation ul>li>span {
    padding-left: 3px
  }

  .sub-navigation ul>li .page-menu-caret {
    display: inline;
    white-space: nowrap
  }

  @media screen and (max-width : 1023px) {
    .sub-navigation ul>li .page-menu-caret {
      display: none
    }
  }

  .sub-navigation ul>li .fa {
    cursor: pointer;
    vertical-align: text-bottom;
    color: #495354
  }

  @media screen and (min-width : 1024px) {
    .sub-navigation ul>li .fa {
      opacity: 0
    }
  }

  @media screen and (max-width : 1023px) {
    .sub-navigation ul>li .fa {
      float: right;
      margin-top: -37px;
      padding: 10px
    }
  }

  .sub-navigation ul>li .fa:hover {
    color: #09f
  }

  .sub-navigation ul>li>ul {
    margin-left: 15px;
    max-height: 0;
    overflow: hidden
  }

  @media screen and (min-width : 1024px) {
    .sub-navigation ul>li>ul>li:first-child {
      margin-top: 10px
    }
  }

  .sub-navigation ul>li>ul>li:last-child {
    margin-bottom: 0px
  }

  .sub-navigation ul>li:hover .fa {
    opacity: 1
  }

  .sub-navigation ul>li.active>a {
    color: #09f
  }

  .sub-navigation ul>li.active>.fa {
    color: #09f
  }

  .sub-navigation ul>li.active>.fa,
  .sub-navigation ul>li.opened>.fa {
    content: "";
    opacity: 1
  }

  .sub-navigation ul>li.active>ul,
  .sub-navigation ul>li.opened>ul {
    max-height: 1000px
  }

  .sub-navigation>.btn.btn--premium {
    margin-top: 15px;
    animation: fade_in 1.5s linear
  }

  .sub-navigation>.btn.btn--premium.hide {
    display: none
  }

  .border-right {
    border-right: 1px solid #d8d8d8
  }

  .divider {
    clear: both;
    border-bottom: 1px solid #d8d8d8;
    margin: 30px 0
  }

  .divider-margin-bottom {
    clear: both;
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 30px
  }

  .btn {
    transition: all .2s ease-out;
    display: inline-flex;
    gap: 4px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font: 400 16px var(--medium);
    padding: 0px 20px;
    line-height: 18px;
    height: 45px;
    border-radius: 2px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    border: 0;
    margin-right: 14px;
    background-color: #adb3b9;
    cursor: pointer;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
    white-space: normal
  }

  .btn:hover,
  .btn:focus,
  .btn:active {
    outline: none;
    color: #fff;
    background-color: #676f77
  }

  .btn.btn-primary {
    background-color: #09f
  }

  .btn.btn-primary:hover,
  .btn.btn-primary:focus,
  .btn.btn-primary:active {
    background-color: #0188e4
  }

  .btn.btn-primary:disabled,
  .btn.btn-primary.loading {
    background-color: #676f77;
    cursor: not-allowed
  }

  .btn.btn-disabled {
    cursor: default;
    background-color: #adb3b9 !important
  }

  .btn.btn-disabled:hover {
    cursor: default;
    background-color: #adb3b9 !important
  }

  .btn.btn-red {
    background-color: #ec8e8e
  }

  .btn.btn-red:hover,
  .btn.btn-red:focus {
    background-color: #ec7676
  }

  .btn.btn--premium {
    background-color: #40252b
  }

  .btn.btn--premium:hover {
    background-color: #270c12
  }

  .btn.btn--white {
    background-color: #fff;
    color: #09f;
    border: 1px solid #09f
  }

  .btn.btn--white:hover,
  .btn.btn--white:focus,
  .btn.btn--white:active {
    background-color: rgba(0, 153, 255, .0784313725);
    color: #0188e4;
    border: 1px solid #0188e4
  }

  .btn.btn--white:disabled {
    background-color: #fff;
    border-color: #676f77;
    color: #676f77;
    cursor: not-allowed
  }

  .btn.btn--white>.ladda-spinner>div>div>div {
    background: #09f !important
  }

  .btn.btn--red {
    background-color: #fff;
    color: #ec8e8e;
    border: 1px solid #ec8e8e
  }

  .btn.btn--red:hover,
  .btn.btn--red:focus,
  .btn.btn--red:active {
    background-color: #fdedee;
    color: #ec7676;
    border: 1px solid #ec7676
  }

  .btn.btn--red:disabled {
    background-color: #fff;
    border-color: #676f77;
    color: #676f77;
    cursor: not-allowed
  }

  .btn.btn--red>.ladda-spinner>div>div>div {
    background: #ec8e8e !important
  }

  .btn.btn-light {
    background-color: #cceaff;
    color: #09f
  }

  .btn.btn--link {
    background-color: rgba(0, 0, 0, 0);
    color: #09f
  }

  .btn.btn--link:hover,
  .btn.btn--link:active {
    background-color: rgba(0, 153, 255, .0784313725);
    color: #0188e4;
    box-shadow: none
  }

  .btn.btn-block {
    display: flex;
    margin-bottom: 10px;
    float: none;
    margin-right: 0;
    width: 100%
  }

  .btn.btn-small {
    margin-right: 0;
    line-height: 15px;
    height: 32px;
    font-size: 10px;
    padding: 0 12px
  }

  @media screen and (max-width : 1023px) {
    .btn.btn-small {
      display: inline-flex
    }
  }

  .btn.btn-tiny {
    margin-right: 0;
    line-height: 20px;
    height: 20px;
    border-radius: 4px;
    padding: 0 6px;
    margin: 0;
    text-transform: uppercase;
    font: 400 10px var(--medium)
  }

  @media screen and (max-width : 1023px) {
    .btn.btn-tiny {
      display: inline-flex
    }
  }

  .btn.btn-big {
    height: 58px;
    padding: 0 37px;
    margin-right: 0
  }

  @media screen and (max-width : 1023px) {
    .btn.btn-big {
      display: inline-flex
    }
  }

  @media screen and (max-width : 479px) {
    .btn.btn-big {
      padding: 0px 20px;
      height: 45px
    }
  }

  .btn.btn-outline {
    border: 1px solid #d8d8d8;
    background-color: #fff;
    color: #acafb2
  }

  .btn.btn-outline:not([disabled]):focus,
  .btn.btn-outline:not([disabled]):hover {
    color: #09f;
    border-color: #09f
  }

  .btn.btn-outline:disabled {
    cursor: not-allowed
  }

  .btn.btn-pill {
    border-radius: 100px
  }

  .btn--mobile-sidebar {
    background-color: #3b5063;
    width: 63px;
    text-transform: none;
    padding: 0 10px;
    width: auto
  }

  .btn.text-left {
    justify-content: flex-start
  }

  .btn.pull-right {
    margin-right: 0
  }

  .btn>.attached {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-left: -20px;
    height: 45px;
    border-right: 1px solid #fff;
    width: 45px;
    margin-right: 15px
  }

  .btn+a:not(.btn) {
    display: inline-flex;
    font-size: 14px;
    color: #495354;
    margin-top: 14px
  }

  .btn.btn-link {
    background-color: rgba(0, 0, 0, 0);
    color: #09f;
    padding: 0 10px
  }

  .btn.btn-text-link {
    background-color: rgba(0, 0, 0, 0);
    color: #09f;
    padding: 0;
    margin: 0;
    height: auto;
    text-transform: unset;
    font-family: inherit;
    font-size: inherit
  }

  @media screen and (max-width : 1023px) {
    .btn.btn-text-link {
      display: inline-flex
    }
  }

  .btn.btn-text-link.btn-red {
    color: #ec8e8e
  }

  .btn.btn-text-link.btn-red:hover,
  .btn.btn-text-link.btn-red:focus {
    color: #ec7676;
    background-color: rgba(0, 0, 0, 0)
  }

  .btn.btn-text-link:disabled {
    color: #676f77;
    cursor: not-allowed
  }

  @media screen and (max-width : 1023px) {
    .btn {
      display: flex;
      margin-right: 0px
    }

    .btn+.btn {
      margin-top: 5px
    }
  }

  .btn-group {
    display: flex;
    justify-content: center;
    margin: 10px 0 20px;
    list-style: none;
    padding: 0
  }

  .btn-group .active,
  .btn-group .active:active,
  .btn-group .active:focus {
    background-color: #09f;
    color: #fff
  }

  .btn-group .btn {
    margin: 0;
    border-radius: 0;
    min-width: 180px;
    border-right: 0
  }

  .btn-group .btn:hover {
    border-right: 0
  }

  .btn-group li:first-of-type .btn {
    border-radius: 2px 0 0 2px
  }

  .btn-group li:last-of-type .btn {
    border-radius: 0 2px 2px 0;
    border-right: 1px solid #09f
  }

  .btn-toggle-group {
    display: flex;
    justify-content: center;
    margin-bottom: 20px
  }

  .btn-toggle-group:empty {
    display: none
  }

  .btn-toggle-group .container {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    margin: 0 auto;
    border-radius: 3px;
    background-color: #fff
  }

  .btn-toggle-group .toggle {
    border-radius: 2px;
    padding: 8px;
    min-width: 120px;
    font-size: 14px;
    font-family: var(--medium);
    color: #495354;
    border: 0;
    appearance: none;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    transition: background-color .25s ease
  }

  .btn-toggle-group .toggle:not(.active):hover {
    background-color: #ebf7ff
  }

  .btn-toggle-group .toggle.active {
    background-color: #09f;
    color: #fff
  }

  .btn-toggle-group .toggle .subtitle {
    font-family: var(--light);
    font-size: 11px
  }

  .l-hero .hero-video-button {
    float: right;
    font-size: 170px;
    color: #09f;
    padding-right: 100px;
    padding-top: 175px;
    cursor: pointer;
    padding-left: 100px
  }

  .l-hero .hero-video-button:hover {
    color: #0188e4
  }

  @media screen and (max-width : 1023px) {
    .l-hero .hero-video-button {
      display: none
    }
  }

  .btn--block-no-styles {
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
    margin-bottom: 10px
  }

  .btn--block-no-styles>.btn-block {
    margin-bottom: 0
  }

  .circle-group {
    margin-top: 30px;
    margin-bottom: 30px
  }

  .circle {
    transition: background-color .2s ease-out, color .2s ease-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: #09f;
    color: #fff;
    margin-right: 3px;
    margin-bottom: 3px;
    font-size: 20px;
    text-decoration: none;
    flex-shrink: 0
  }

  .circle:not(.circle--no-hover):hover {
    background-color: #0188e4;
    color: #fff
  }

  .circle.white {
    background-color: #fff;
    color: #09f
  }

  .circle.white:hover {
    color: #fff;
    background-color: #09f
  }

  .circle.green {
    background-color: #5ed29f
  }

  .circle.green:hover {
    background-color: #5ed29f
  }

  .circle.red {
    background-color: #ec8e8e
  }

  .circle.red:hover {
    background-color: #ec8e8e
  }

  .circle.gray {
    background-color: #676f77
  }

  .circle.gray:hover {
    background-color: #676f77
  }

  .circle--light-gray {
    background-color: #c0c9d1
  }

  .circle--light-gray:hover {
    background-color: #676f77
  }

  .circle--medium-gray {
    background-color: #aaa
  }

  .circle.circle-small {
    height: 20px;
    width: 20px;
    font-size: 8px;
    margin-bottom: 0
  }

  .circle.circle--half-medium {
    height: 25px;
    width: 25px;
    font-size: 12px;
    margin-bottom: 0
  }

  .circle.circle-medium {
    height: 30px;
    width: 30px;
    min-width: 30px;
    font-size: 14px;
    margin-bottom: 0;
    margin-right: 0
  }

  .circle.circle--big {
    height: 50px;
    width: 50px;
    font-size: 18px;
    margin-bottom: 0
  }

  .well {
    border: 1px solid #d8d8d8;
    background-color: #f1f1f1;
    border-radius: 2px;
    color: #495354;
    font-size: 14px;
    padding: 20px;
    margin-bottom: 30px;
    line-height: 20px;
    overflow: auto
  }

  .well.well-light {
    padding: 40px;
    background-color: #fff
  }

  .well.well--article-highlight,
  .well.well--highlight {
    background-color: #ebf7ff;
    border-color: #ebf7ff;
    font-size: 16px;
    line-height: 26px
  }

  .well.well--red {
    background-color: #ec8e8e;
    border-color: #ec8e8e;
    text-align: center
  }

  .well.well--red>p {
    font-family: var(--regular);
    margin-bottom: 0;
    color: #fff
  }

  .well.well--toc {
    background-color: #fff;
    padding: 30px;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 37px;
    clear: both
  }

  .well.well--toc>.well--toc__open-cta {
    display: none
  }

  .well.well--toc.well--toc--truncated {
    max-height: 180px;
    overflow: hidden;
    position: relative
  }

  .well.well--toc.well--toc--truncated>.well--toc__open-cta {
    display: flex;
    align-items: center;
    height: 48px;
    background-color: #f7f7f7;
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-left: -30px;
    color: #09f;
    text-align: left;
    font-size: 13px;
    font-family: var(--regular);
    cursor: pointer;
    padding: 2.5px 30px;
    border-top: 1px solid #d8d8d8;
    box-shadow: 0px 20px 50px 50px #f5f5f5
  }

  .well.well--toc>.well--toc__headline {
    font-size: 18px;
    color: #09f;
    line-height: 18px;
    margin-bottom: 30px
  }

  .well.well--toc ol {
    counter-reset: item;
    margin: 0;
    padding-left: 30px
  }

  .well.well--toc>ol:first-of-type {
    padding: 0
  }

  .well.well--toc li {
    display: block;
    margin-bottom: 0
  }

  .well.well--toc li>a>.fa {
    vertical-align: middle
  }

  .well.well--toc li:before {
    content: counters(item, ".") ". ";
    counter-increment: item
  }

  .well.well--toc+h2,
  .well.well--toc+section>h2 {
    border-top: none;
    padding-top: 0
  }

  .box {
    background-color: #fff;
    border-radius: 4px;
    color: #495354;
    font-size: 14px;
    padding: 28px;
    margin-bottom: 30px;
    line-height: 20px;
    width: 100%
  }

  @media screen and (min-width : 1024px) {
    .box--small {
      width: auto;
      flex: 0 0 65%
    }
  }

  @media screen and (min-width : 1024px) {
    .box--tiny {
      width: auto;
      flex: 0 0 50%
    }
  }

  .box.box--no-padding {
    padding: 0
  }

  .box>.box__banner {
    border-radius: 4px 4px 0 0;
    text-align: center;
    background-color: #5ed29f;
    padding: 12px 20px;
    font-size: 15px;
    line-height: 26px;
    font-family: var(--regular);
    color: #fff
  }

  @media screen and (max-width : 479px) {
    .box>.box__banner {
      line-height: 20px
    }
  }

  .box>h2 {
    font-size: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 23px
  }

  .box p {
    font-size: 14px;
    font-family: var(--regular)
  }

  .box>ul {
    font-size: 16px;
    line-height: 24px;
    color: #676f77
  }

  .box form:not(.link-form) [type=submit] {
    float: right;
    margin-right: 0
  }

  @media screen and (max-width : 479px) {
    .box form:not(.link-form) [type=submit] {
      width: 100%;
      float: none
    }
  }

  .landing-header {
    background-color: #3a5062
  }

  .landing-topbar {
    height: 80px;
    border-bottom: 1px solid #76868f
  }

  @media screen and (max-width : 763px) {
    .landing-topbar {
      border-bottom: none
    }
  }

  .landing-topbar>.landing-topbar-container {
    text-align: right
  }

  @media screen and (max-width : 763px) {
    .landing-topbar>.landing-topbar-container {
      text-align: center
    }
  }

  .landing-topbar>.landing-topbar-container>a:not(.logo) {
    color: #fff;
    font-size: 14px;
    font-family: var(--light);
    display: inline-block;
    line-height: 40px;
    margin-left: 40px;
    margin-top: 19px
  }

  @media screen and (max-width : 763px) {
    .landing-topbar>.landing-topbar-container>a:not(.logo) {
      display: none
    }
  }

  .landing-topbar>.landing-topbar-container>a:not(.logo).registration-link {
    border-radius: 3px;
    padding: 0 15px;
    background-color: #4d6b84
  }

  .landing-topbar .logo {
    float: left
  }

  .landing-topbar .logo svg,
  .landing-topbar .logo {
    max-width: 100px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px
  }

  @media screen and (max-width : 763px) {
    .landing-topbar .logo {
      float: none
    }
  }

  .landing-hero {
    padding-top: 65px;
    padding-bottom: 158px;
    text-align: center
  }

  @media screen and (max-width : 1023px) {
    .l-hero .landing-hero {
      padding-bottom: 108px
    }
  }

  .landing-hero--without-image-overlap {
    padding-top: 73px;
    padding-bottom: 183px
  }

  @media screen and (max-width : 1023px) {
    .l-hero .landing-hero--without-image-overlap {
      padding-top: 95px;
      padding-bottom: 108px
    }
  }

  .landing-hero header:not(landing-new)>p {
    font-size: 45px;
    line-height: 55px;
    margin-bottom: 36px;
    color: #fff;
    font-family: var(--light)
  }

  @media screen and (max-width : 479px) {
    .landing-hero header:not(landing-new)>p {
      font-size: 32px;
      line-height: 41px
    }
  }

  .landing-hero header:not(landing-new)>h1 {
    font-size: 17px;
    line-height: 21px;
    color: #fff;
    margin-bottom: 22px;
    font-family: var(--light)
  }

  .landing-hero header.landing-new>h1 {
    font-size: 45px;
    line-height: 55px;
    margin-bottom: 36px;
    color: #fff;
    font-family: var(--light)
  }

  @media screen and (max-width : 479px) {
    .landing-hero header.landing-new>h1 {
      font-size: 32px;
      line-height: 41px
    }
  }

  .landing-hero header.landing-new>p {
    font-size: 17px;
    line-height: 21px;
    color: #fff;
    margin-bottom: 22px;
    font-family: var(--light)
  }

  .landing-hero p {
    color: #fff;
    margin-bottom: 0
  }

  .landing-hero .btn-big {
    margin-bottom: 27px
  }

  .landing-hero>p.secondary-cta {
    font-family: var(--regular);
    font-size: 15px;
    line-height: 20px
  }

  .landing-hero>p.secondary-cta>a {
    color: #fff;
    text-decoration: underline
  }

  .landing-multiscreen {
    text-align: center;
    padding-bottom: 40px
  }

  .landing-multiscreen .img-placeholder {
    margin: -96px 0 51px;
    display: flex;
    align-items: center;
    aspect-ratio: 780/458
  }

  .landing-multiscreen img {
    display: block;
    width: 100%
  }

  .landing-multiscreen p {
    font-size: 18px;
    line-height: 28px
  }

  @media screen and (max-width : 1023px) {
    .landing-multiscreen p {
      margin-bottom: 0;
      text-align: left
    }
  }

  @media screen and (min-width : 1024px) {
    .landing-multiscreen>.l-container {
      padding: 0 5%
    }
  }

  @media screen and (max-width : 1023px) {
    .landing-multiscreen {
      padding-bottom: 50px
    }

    .landing-multiscreen h2 {
      text-align: left
    }
  }

  .landing-header--light {
    background-color: #fff;
    overflow: hidden;
    position: relative
  }

  .landing-header--light .landing-topbar {
    border-bottom: none;
    background-color: #f7f7f7
  }

  .landing-header--light .landing-topbar>.landing-topbar-container>a {
    color: #4d6b84
  }

  .landing-header--light .landing-topbar>.landing-topbar-container>a.registration-link {
    color: #fff
  }

  .landing-header--light .l-hero {
    background-color: #f7f7f7;
    padding-bottom: 25px
  }

  @media screen and (max-width : 1023px) {
    .landing-header--light .l-hero {
      padding-bottom: 50px
    }
  }

  .landing-header--light .l-hero .hero-inner {
    width: 50%;
    padding-top: 150px;
    padding-bottom: 150px
  }

  @media screen and (max-width : 1023px) {
    .landing-header--light .l-hero .hero-inner {
      text-align: center;
      width: 100%;
      padding-top: 40px;
      padding-bottom: 0
    }
  }

  .landing-header--light .l-hero .hero-inner h1 {
    color: #09f
  }

  .landing-header--light .l-hero img {
    position: absolute;
    margin-left: 160px
  }

  @media screen and (max-width : 1023px) {
    .landing-header--light .l-hero img {
      display: block;
      position: initial;
      margin: 0 auto;
      width: 90%
    }
  }

  @media screen and (max-width : 763px) {
    .landing-header--light .l-hero img {
      width: 100%
    }
  }

  .landing-device-shot,
  .landing-screenshot,
  .landing-illustration-didactic {
    overflow: hidden;
    background-color: #f7f7f7;
    padding-top: 100px
  }

  .landing-device-shot>.l-flex-row,
  .landing-screenshot>.l-flex-row,
  .landing-illustration-didactic>.l-flex-row {
    min-height: 430px
  }

  .landing-device-shot>.l-flex-row .image,
  .landing-screenshot>.l-flex-row .image,
  .landing-illustration-didactic>.l-flex-row .image {
    margin-bottom: -5px
  }

  .landing-device-shot p,
  .landing-screenshot p,
  .landing-illustration-didactic p {
    font-size: 18px;
    line-height: 28px
  }

  .landing-device-shot p:last-child,
  .landing-screenshot p:last-child,
  .landing-illustration-didactic p:last-child {
    margin-bottom: 0
  }

  @media screen and (max-width : 1023px) {

    .landing-device-shot,
    .landing-screenshot,
    .landing-illustration-didactic {
      padding-top: 0
    }

    .landing-device-shot .l-container,
    .landing-screenshot .l-container,
    .landing-illustration-didactic .l-container {
      overflow: hidden
    }

    .landing-device-shot h2,
    .landing-screenshot h2,
    .landing-illustration-didactic h2 {
      margin-top: 50px
    }

    .landing-device-shot img,
    .landing-screenshot img,
    .landing-illustration-didactic img {
      max-width: 100%
    }
  }

  .landing-illustration-didactic {
    padding-top: 0
  }

  .landing-illustration-didactic__image {
    position: relative;
    min-height: 430px
  }

  @media screen and (max-width : 1023px) {
    .landing-illustration-didactic__image {
      margin-bottom: 0;
      min-height: 0
    }
  }

  .landing-illustration-didactic__image>img {
    display: block;
    position: absolute;
    bottom: 0;
    right: -315px
  }

  @media screen and (max-width : 1023px) {
    .landing-illustration-didactic__image>img {
      position: relative;
      width: 100%;
      right: auto
    }
  }

  @media screen and (max-width : 479px) {
    .landing-illustration-didactic__image>img {
      max-width: 120%
    }
  }

  .landing-screenshot {
    padding-top: 0
  }

  .landing-screenshot--large>.l-flex-row {
    min-height: 606px
  }

  .landing-screenshot--large>.l-flex-row>div:first-of-type {
    padding: 80px 0
  }

  @media screen and (max-width : 1023px) {
    .landing-screenshot--large>.l-flex-row>div:first-of-type {
      padding: 0
    }
  }

  .landing-screenshot--large>.l-flex-row>.landing-screenshot__image {
    align-self: stretch
  }

  .landing-screenshot .text {
    min-width: 60%
  }

  .landing-screenshot__image {
    position: relative;
    min-height: 430px
  }

  @media screen and (max-width : 1023px) {
    .landing-screenshot__image {
      margin-bottom: 0;
      min-height: 0
    }
  }

  .landing-screenshot__image>img {
    display: block;
    position: absolute;
    bottom: 0
  }

  @media screen and (max-width : 1023px) {
    .landing-screenshot__image>img {
      position: relative;
      width: 100%
    }
  }

  @media screen and (max-width : 479px) {
    .landing-screenshot__image>img {
      max-width: 120%
    }
  }

  .landing-screenshot p:last-child {
    margin-bottom: 0
  }

  .landing-student .image {
    max-width: 40%
  }

  .landing-student img {
    margin-top: 70px;
    margin-bottom: -5px
  }

  @media screen and (max-width : 1023px) {
    .landing-student img {
      margin-top: 0;
      max-width: 100%;
      text-align: left
    }
  }

  .landing-student p:last-child {
    margin-bottom: 0
  }

  @media screen and (max-width : 1023px) {
    .landing-student .image {
      max-width: 100%;
      width: 100%
    }

    .landing-student .l-container {
      overflow: hidden
    }
  }

  .landing-illustration img {
    max-width: 100%;
    margin-bottom: 50px
  }

  @media screen and (max-width : 1023px) {
    .landing-illustration h2 {
      margin-top: 50px
    }
  }

  .landing-illustration p {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 0
  }

  .landing-illustration ul {
    font-size: 18px;
    line-height: 28px;
    color: #495354;
    font-family: var(--light)
  }

  @media screen and (max-width : 1023px) {
    .landing-illustration .l-container {
      overflow: hidden
    }
  }

  @media screen and (min-width : 1024px) {
    .landing-cta>.l-container {
      padding: 0 5%
    }
  }

  .speech-bubble {
    padding: 43px 50px 41px;
    background-color: #f7f7f7;
    position: relative;
    width: 550px
  }

  @media screen and (max-width : 1023px) {
    .speech-bubble {
      width: 100%;
      margin-top: 20px
    }
  }

  @media screen and (max-width : 479px) {
    .speech-bubble {
      padding: 23px 30px 21px
    }
  }

  .speech-bubble p:last-child {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 0
  }

  .speech-bubble:after {
    content: "";
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
    top: 50px;
    left: -47px;
    bottom: auto;
    border-width: 0 47px 47px 0;
    border-color: rgba(0, 0, 0, 0) #f7f7f7
  }

  @media screen and (max-width : 1023px) {
    .speech-bubble:after {
      bottom: -47px;
      right: 50%;
      left: auto;
      top: auto;
      border-width: 0 0 47px 47px
    }
  }

  @media screen and (max-width : 479px) {
    .speech-bubble:after {
      right: 20%
    }
  }

  .landing-ebook-intro {
    padding-top: 100px;
    padding-bottom: 80px
  }

  @media screen and (max-width : 1023px) {
    .landing-ebook-intro {
      padding-top: 50px;
      padding-bottom: 50px
    }
  }

  .landing-ebook-topic {
    padding: 20px 0
  }

  @media screen and (max-width : 1023px) {
    .landing-ebook-topic {
      padding: 80px 0 30px
    }
  }

  .landing-ebook-topic .l-flex-row {
    min-height: 320px
  }

  .landing-ebook-topic .image {
    flex: 0 0 30%;
    text-align: center
  }

  .landing-ebook-topic h2 {
    font-size: 30px
  }

  .landing-ebook-topic p {
    margin-bottom: 5px
  }

  .landing-ebook-faq {
    margin-top: 80px;
    margin-bottom: 50px
  }

  .landing-ebook-faq h2 {
    margin-bottom: 80px
  }

  @media screen and (max-width : 1023px) {
    .landing-ebook-faq h2 {
      text-align: left;
      margin-bottom: 40px
    }
  }

  .landing-ebook-faq h3 {
    font-family: var(--light)
  }

  .landing-ebook-faq p {
    margin-bottom: 20px
  }

  .landing-footer--light {
    background-color: #3a5062;
    text-align: right;
    padding-bottom: 20px;
    max-width: 100%
  }

  .landing-footer--light a {
    color: #fff;
    opacity: .4
  }

  .landing-panic__content .divider {
    margin: 0 auto;
    max-width: 940px
  }

  .section.section--videos {
    background-color: var(--light) -blue
  }

  .section.section--articles {
    background-color: var(--light) -yellow
  }

  .section h2 {
    font-family: var(--regular);
    font-size: 44px;
    line-height: 50px
  }

  @media screen and (max-width : 1023px) {
    .section h2 {
      font-size: 38px;
      line-height: 42px
    }
  }

  @media screen and (max-width : 763px) {
    .section h2 {
      font-size: 30px;
      line-height: 40px
    }
  }

  .section li {
    font-family: var(--light);
    color: #495354;
    font-size: 21px;
    line-height: 31px
  }

  @media screen and (max-width : 479px) {
    .section li {
      font-size: 18px;
      line-height: 26px
    }
  }

  .section img {
    display: block;
    max-width: 100%
  }

  .landing-features {
    padding-top: 20px;
    margin-bottom: 40px;
    margin-left: 0
  }

  @media screen and (max-width : 1023px) {
    .landing-features {
      padding-top: 10px;
      margin-bottom: 30px
    }
  }

  .landing-features li {
    list-style: none;
    margin-bottom: 20px;
    padding-left: 45px;
    position: relative
  }

  .landing-features li .bullet-circle {
    position: absolute;
    left: 0;
    background: #495354;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    color: #fff;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 34px;
    font-size: 16px
  }

  .inline-testimonial {
    padding: 30px 0;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    color: #495354;
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 30px
  }

  .inline-testimonial img {
    height: 80px;
    width: 80px;
    float: left;
    border-radius: 40px;
    margin-right: 20px;
    margin-top: -7px
  }

  .inline-testimonial .testimonial__quote {
    font-family: var(--light)
  }

  .inline-testimonial .testimonial__name {
    font-family: var(--medium)
  }

  .breaking-cta~.testimonials {
    margin-top: 50px
  }

  @media screen and (max-width : 1023px) {
    .testimonials .testimonials-header {
      margin-bottom: 0
    }
  }

  .testimonials .testimonials-header p:last-child {
    margin-bottom: 0
  }

  .testimonials .testimonials-header h2 {
    margin-top: 10px;
    margin-bottom: 40px;
    font-size: 54px;
    line-height: 60px
  }

  @media screen and (max-width : 763px) {
    .testimonials .testimonials-header h2 {
      font-size: 30px;
      line-height: 36px
    }
  }

  .testimonials .testimonials-header p {
    font-size: 26px;
    line-height: 36px
  }

  .testimonials .testimonial {
    text-align: left;
    margin-top: 20px;
    font-size: 14px;
    padding: 20px
  }

  @media screen and (max-width : 1023px) {
    .testimonials .testimonial {
      margin-top: 20px
    }
  }

  @media screen and (max-width : 763px) {
    .testimonials .testimonial {
      margin-top: 0;
      margin-bottom: 5px
    }
  }

  .testimonials .l-flex-row {
    align-items: flex-start
  }

  .testimonials .testimonial__quote {
    line-height: 26px;
    margin-bottom: 20px;
    font-family: var(--light);
    font-weight: 100;
    color: #676f77
  }

  .testimonials .testimonial__row>img,
  .testimonials .testimonial__row>div {
    display: inline-block;
    vertical-align: middle
  }

  .testimonials .testimonial__avatar {
    width: 48px;
    height: 48px;
    float: left;
    border-radius: 100px;
    margin-right: 10px
  }

  .testimonials .testimonial-name {
    color: #09f;
    line-height: 24px
  }

  .testimonials .testimonial__meta {
    width: calc(100% - 58px);
    color: #676f77
  }

  @media screen and (max-width : 763px) {
    .testimonials .testimonials-header {
      margin: 20px 0
    }
  }

  .start-learning-cta {
    background: #3a5062
  }

  .start-learning-cta h2 {
    font-family: var(--light);
    text-align: center;
    color: #fff
  }

  @media screen and (min-width : 1024px) {
    .start-learning-cta h2 {
      margin: 0 -60px 20px
    }
  }

  .start-learning-cta .signup-form p {
    color: #fff;
    font-family: var(--regular)
  }

  @media screen and (max-width : 763px) {
    .start-learning-cta h2 {
      margin: 0
    }
  }

  body.colorblind-lp .l-hero {
    background: #3a5062 url("/assets/eye_background-e4d00cfa95a72cceb863d9c4a8cc4368a60494efa95901a08f6e089486319698.digested.webp") no-repeat scroll 50% 0
  }

  @media screen and (max-width : 479px) {
    body.colorblind-lp .l-hero {
      background-image: url("/assets/eye_background_xs-c5ac0606e3630959709ddea5aba896d3441945ec99fcb6eba2d0ceb529b2babe.digested.webp")
    }
  }

  body.printatlas-lp .l-hero {
    background: #3a5062 no-repeat scroll 50% 0
  }

  .printatlas-lp .ctas {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px
  }

  .printatlas-lp .ctas .btn {
    margin: 0
  }

  .printatlas-lp .ctas .btn img {
    margin-top: 4px
  }

  .printatlas-lp .ctas .btn-outline {
    border-color: #09f;
    color: #09f;
    background-color: rgba(0, 0, 0, 0)
  }

  .printatlas-lp .landing-hero {
    padding: 20px 0 0
  }

  .printatlas-lp .landing-hero .landing-atlas-hero {
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    padding: 0 40px
  }

  @media screen and (min-width : 1024px) {
    .printatlas-lp .landing-hero .landing-atlas-hero {
      flex-direction: row;
      padding: 0
    }
  }

  .printatlas-lp .landing-hero .landing-atlas-hero .image {
    position: relative;
    transform: translateY(60px);
    flex: 0 1 45%
  }

  @media screen and (min-width : 1024px) {
    .printatlas-lp .landing-hero .landing-atlas-hero .image {
      margin-right: 60px
    }
  }

  .printatlas-lp .landing-hero .landing-atlas-hero .image img {
    width: 100%;
    height: auto;
    max-width: 450px;
    transform: scale(1.2)
  }

  @media screen and (min-width : 1024px) {
    .printatlas-lp .landing-hero .landing-atlas-hero .image img {
      max-width: none
    }
  }

  .printatlas-lp .landing-hero .landing-atlas-hero header {
    flex: 0 1 55%;
    padding: 40px 0 0;
    text-align: center
  }

  @media screen and (min-width : 1024px) {
    .printatlas-lp .landing-hero .landing-atlas-hero header {
      text-align: left
    }
  }

  @media screen and (min-width : 1024px) {
    .printatlas-lp .landing-hero .landing-atlas-hero header {
      padding: 100px 0
    }
  }

  .printatlas-lp .landing-hero .landing-atlas-hero header h1 {
    margin: 8px 0 12px
  }

  .printatlas-lp .landing-hero .landing-atlas-hero header p {
    line-height: 1.5;
    margin-bottom: 0
  }

  @media screen and (min-width : 1024px) {
    .printatlas-lp .landing-hero .landing-atlas-hero header .ctas {
      justify-content: flex-start
    }
  }

  .printatlas-lp .landing-hero .landing-atlas-hero header .ctas-secondary {
    padding-top: 14px;
    color: #fff;
    font-size: 14px
  }

  body.printatlas-lp footer {
    margin-top: 0
  }

  .landing-atlas-benefits {
    padding: 100px 0 40px
  }

  @media screen and (min-width : 764px) {
    .landing-atlas-benefits {
      padding: 140px 0 40px
    }
  }

  @media screen and (min-width : 1024px) {
    .landing-atlas-benefits {
      padding: 140px 0 120px
    }
  }

  .landing-atlas-benefits .l-flex-row {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap
  }

  .landing-atlas-benefits .item {
    flex: 1 1 100%;
    margin: 0;
    padding: 0 12px 24px;
    text-align: center
  }

  @media screen and (min-width : 764px) {
    .landing-atlas-benefits .item {
      flex: 0 1 50%
    }
  }

  @media screen and (min-width : 1024px) {
    .landing-atlas-benefits .item {
      flex: 0 1 25%
    }
  }

  .landing-atlas-benefits .item .image {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: center;
    height: 100px;
    margin-bottom: 16px
  }

  .landing-atlas-benefits .item h2 {
    font-size: 24px;
    margin-bottom: 16px;
    line-height: 1.2
  }

  .landing-atlas-benefits .item p {
    font-size: 16px;
    margin-bottom: 0
  }

  .landing-atlas-about {
    background-color: #f7f7f7;
    padding: 40px 0 0;
    position: relative
  }

  @media screen and (min-width : 1024px) {
    .landing-atlas-about {
      padding: 80px 0;
      min-height: 430px
    }
  }

  .landing-atlas-about .text {
    flex: 1 1 100%
  }

  .landing-atlas-about .text p:last-child {
    margin-bottom: 0
  }

  @media screen and (min-width : 1024px) {
    .landing-atlas-about .text {
      flex: 0 1 50%;
      padding-right: 40px
    }
  }

  .landing-atlas-about .image {
    background-color: #3a5062;
    width: 100%;
    overflow: hidden;
    padding: 40px
  }

  @media screen and (min-width : 1024px) {
    .landing-atlas-about .image {
      position: absolute;
      left: 55%;
      width: 45%;
      top: 0;
      bottom: 0;
      right: 0;
      padding: 50px
    }
  }

  .landing-atlas-about .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center
  }

  @media screen and (min-width : 1024px) {
    .landing-atlas-about .image img {
      width: 150%;
      object-position: left
    }
  }

  .landing-atlas-content-overview {
    padding: 40px 0
  }

  @media screen and (min-width : 1024px) {
    .landing-atlas-content-overview {
      padding: 80px 0
    }
  }

  .landing-atlas-content-overview h2 {
    text-align: center
  }

  .landing-atlas-content-overview .l-flex-row {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    gap: 10px;
    align-items: flex-start
  }

  @media screen and (min-width : 764px) {
    .landing-atlas-content-overview .l-flex-row {
      grid-template-columns: repeat(2, 50%)
    }
  }

  @media screen and (min-width : 1024px) {
    .landing-atlas-content-overview .l-flex-row {
      grid-template-columns: repeat(3, 33%)
    }
  }

  .landing-atlas-content-overview .l-flex-row>* {
    width: auto
  }

  .landing-atlas-content-overview .item {
    margin: 0;
    padding: 24px;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    transition: box-shadow .25s ease;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0)
  }

  .landing-atlas-content-overview .item .header {
    display: flex
  }

  .landing-atlas-content-overview .item .content {
    flex: 1 1 auto
  }

  .landing-atlas-content-overview .item .actions {
    flex: 0 0 44px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end
  }

  .landing-atlas-content-overview .item .actions svg {
    transition: transform .25s ease
  }

  .landing-atlas-content-overview .item .subtitle {
    font-size: 14px;
    margin-bottom: 4px
  }

  .landing-atlas-content-overview .item .title {
    font-size: 18px
  }

  .landing-atlas-content-overview .item .chapters {
    padding: 8px 0 0;
    margin: 0;
    height: 0;
    overflow: hidden;
    transition: height .25s ease
  }

  .landing-atlas-content-overview .item .chapters li {
    margin-left: 28px
  }

  .landing-atlas-content-overview .item .chapters li+li {
    margin-top: 8px
  }

  .landing-atlas-content-overview .item.open .chapters {
    height: auto
  }

  .landing-atlas-content-overview .item.open .actions svg {
    transform: rotate(180deg)
  }

  .landing-atlas-content-overview .item:not(.open):hover,
  .landing-atlas-content-overview .item:not(.open):focus {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2)
  }

  .landing-atlas-content-overview .item:nth-child(1) {
    background-color: #0095ce
  }

  .landing-atlas-content-overview .item:nth-child(2) {
    background-color: #354652
  }

  .landing-atlas-content-overview .item:nth-child(3) {
    background-color: #61ba92
  }

  .landing-atlas-content-overview .item:nth-child(4) {
    background-color: #c46a68
  }

  .landing-atlas-content-overview .item:nth-child(5) {
    background-color: #816f61
  }

  .landing-atlas-content-overview .item:nth-child(6) {
    background-color: #83a97e
  }

  .landing-atlas-content-overview .item:nth-child(7) {
    background-color: #9278a9
  }

  .landing-atlas-content-overview .item:nth-child(8) {
    background-color: #bcb693
  }

  .landing-atlas-content-overview .item:nth-child(9) {
    background-color: #f1bc49
  }

  .landing-atlas-testimonials {
    background-color: #f7f7f7;
    padding: 40px 0
  }

  @media screen and (min-width : 1024px) {
    .landing-atlas-testimonials {
      padding: 80px 0
    }
  }

  .landing-atlas-testimonials .testimonials-header h2 {
    font-size: 36px;
    margin: 0 0 30px;
    line-height: 1.2
  }

  body.home .l-hero {
    background: #3a5062 none repeat scroll center center;
    background-image: linear-gradient(180deg, #3A5062 0%, #2d3e4d 100%);
    background-size: 100%;
    position: relative;
    margin-bottom: 40px;
    height: 574px
  }

  @media screen and (max-width : 1023px) {
    body.home .l-hero {
      padding: 30px 0
    }
  }

  @media screen and (max-width : 763px) {
    body.home .l-hero {
      height: auto;
      margin-bottom: 0;
      top: -60px;
      padding-bottom: 30px;
      padding-top: 0
    }
  }

  body.home .l-hero>.l-container:first-of-type {
    position: absolute;
    display: flex;
    align-items: center;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
  }

  body.home .l-hero>.l-container:first-of-type h1 {
    font-size: 48px;
    line-height: 1.2;

  }

  @media screen and (max-width : 763px) {
    body.home .l-hero>.l-container:first-of-type h1 {
      font-size: 36px;
    }


  }

  body.home .l-hero>.l-container:first-of-type p {
    font-family: var(--regular);
    color: #fff;
    margin-bottom: 30px;

  }

  @media screen and (max-width : 763px) {
    body.home .l-hero>.l-container:first-of-type p {
      font-size: 16px
    }
  }

  body.home .l-hero>.l-container:first-of-type h1,
  body.home .l-hero>.l-container:first-of-type p,
  body.home .l-hero>.l-container:first-of-type .btn {
    position: relative;
    z-index: 1
  }

  @media screen and (max-width : 763px) {
    body.home .l-hero>.l-container:first-of-type .hero {
      text-align: center;
      max-width: 100%
    }
  }

  @media screen and (max-width : 1023px) {
    body.home .l-hero>.l-container:first-of-type {
      position: absolute
    }
  }

  @media screen and (max-width : 763px) {
    body.home .l-hero>.l-container:first-of-type {
      position: relative;
      justify-content: center
    }
  }



  body.home .hero__image {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%
  }

  @media screen and (max-width : 1023px) {

    body.home .hero__image {
      height: auto;
      mask-image: linear-gradient(180deg, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
      position: relative;
      width: 100%;
      max-width: 400px;
      top: 0;
      z-index: 1000;
      right: 0;
      top: 0;
      margin-bottom: 20px;
      padding: 0 15px;
    }
  }

  @media screen and (max-width : 763px) {
    body.home .hero__image {
      position: relative;
      width: 100%;
      max-width: 400px;
      top: 0;
      z-index: 1000;
      right: 0;
      top: 0;
      margin-bottom: 20px;
      padding: 0 15px
    }
  }

  body.home footer {
    margin-top: 0
  }

  .benefits .benefits__list {
    list-style: none;
    margin: 0 0 30px;
    font-size: 18px;

    span {
      color: #495354
    }
  }

  .benefits .benefits__list li {
    display: flex
  }

  .benefits .benefits__list li .circle {
    flex: 0 0 auto;
    margin-right: 10px
  }

  .benefits .benefits__list li+li {
    margin-top: 20px
  }

  .benefits .benefits__row {
    display: flex;
    align-items: center;
    padding: 40px 0;
    border-bottom: none;
  }

  @media screen and (max-width : 1023px) {
    .benefits .benefits__row {
      display: flex;
      min-height: 0
    }
  }

  @media screen and (max-width : 763px) {
    .benefits .benefits__row {
      flex-direction: column;
      align-items: center;
      justify-content: center
    }
  }

  .benefits .benefits__row:last-of-type {
    padding-bottom: 80px
  }

  .benefits .benefits__row .image {
    min-width: 40%;
    margin-right: 30px;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .benefits .benefits__row .image>img {
    max-width: 100%;
    height: auto
  }

  @media screen and (max-width : 1023px) {
    .benefits .benefits__row .image {
      margin: 0 40px 0 0
    }
  }

  @media screen and (max-width : 763px) {
    .benefits .benefits__row .image {
      margin: 40px 0
    }
  }

  .benefits .benefits__row--equal>.image {
    flex: 0 1 40%;
    min-width: 0;
    margin-right: 40px
  }

  @media screen and (max-width : 1023px) {
    .benefits .benefits__row--equal>.image {
      margin-right: 0
    }
  }

  .benefits .benefits__row--feature {
    display: block;
    margin: 0 -40px
  }

  @media screen and (max-width : 1023px) {
    .benefits .benefits__row--feature {
      margin: 0 -32px
    }
  }

  @media screen and (max-width : 479px) {
    .benefits .benefits__row--feature {
      margin: 0 -15px
    }
  }

  .benefits .benefits__row--feature .content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 552px;
    margin-right: 40px
  }

  @media screen and (max-width : 1023px) {
    .benefits .benefits__row--feature .content {
      display: block;
      height: auto;
      margin: 0;
      aspect-ratio: 16/9
    }
  }

  .benefits .benefits__row--feature .content .video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #3a5062 none no-repeat scroll 50% 0;
    background-size: cover;
    min-height: 0;
    border-radius: 3px;
    aspect-ratio: 16/9;
    z-index: 1
  }

  @media screen and (max-width : 1023px) {
    .benefits .benefits__row--feature .content .video {
      border-radius: 0;
      position: relative
    }
  }

  .benefits .benefits__row--feature .text {
    border-radius: 3px;
    margin-right: -40px;
    background-color: #3a5062;
    padding: 30px;
    color: #fff;
    z-index: 3;
    max-width: 525px
  }

  @media screen and (max-width : 1023px) {
    .benefits .benefits__row--feature .text {
      z-index: 2;
      position: relative;
      margin: -70px 32px 0
    }
  }

  @media screen and (max-width : 763px) {
    .benefits .benefits__row--feature .text {
      margin: -70px 15px 0
    }
  }

  @media screen and (max-width : 479px) {
    .benefits .benefits__row--feature .text {
      margin-top: -30px;
      padding: 20px
    }
  }

  .benefits .benefits__row--feature .text .benefits__list {
    margin-bottom: 0;
    font-family: var(--light)
  }

  .benefits .benefits__row--feature .text .benefits__list .circle {
    margin-top: 6px
  }

  .benefits .benefits__row--feature .text .green {
    font-family: var(--medium)
  }

  .benefits .benefits__row--feature .text h2 {
    color: #fff;
    margin-bottom: 0
  }

  .benefits .benefits__row--feature .text .subtitle {
    font-size: 18px;
    font-family: var(--light);
    margin-bottom: 20px
  }

  .topics {
    padding: 80px 0 0
  }

  .topics .text-center p {
    margin-bottom: 0
  }

  .topics__topicboxes {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    gap: 20px
  }

  .topics__topicboxes .topicbox {
    display: flex;
    flex-direction: column;
    background-color: #f3f3f3;
    border-radius: 2px;
    border: 1px solid #d8d8d8;
    overflow: hidden;
    flex: 1 1 30%;
    height: auto
  }

  @media screen and (max-width : 763px) {
    .topics__topicboxes .topicbox {
      flex-basis: 48%;
      margin-bottom: 0
    }
  }

  @media screen and (max-width : 479px) {
    .topics__topicboxes .topicbox {
      flex-basis: 100%
    }
  }

  .topics__topicboxes .topicbox__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    flex: 1
  }

  .topics__topicboxes .topicbox__img {
    position: relative;
    height: 300px;
    aspect-ratio: 1/1;
    flex: 0 0 auto
  }

  @media screen and (max-width : 763px) {
    .topics__topicboxes .topicbox__img {
      height: 180px
    }
  }

  .topics__topicboxes .topicbox__img img {
    position: relative;
    object-fit: contain;
    height: 100%;
    width: 100%;
    background-color: #fff
  }

  .topics__topicboxes .topicbox__title {
    margin-bottom: 10px
  }

  .topics__topicboxes .topicbox__description {
    color: #495354;
    font-size: 14px;
    font-family: var(--light);
    line-height: 1.5;
    margin-bottom: 10px
  }

  .topics__topicboxes .topicbox__cta {
    color: #495354;
    font-size: 12px;
    text-decoration: underline;
    margin-top: auto
  }

  .quality-commitment {
    padding-top: 80px;
    text-align: center;
    text-wrap: balance
  }

  @media screen and (max-width : 763px) {
    .quality-commitment {
      text-wrap: initial
    }
  }

  .quality {
    display: flex;
    margin-bottom: 30px
  }

  @media screen and (max-width : 763px) {
    .quality {
      gap: 20px;
      display: inline-flex;
      flex-direction: column
    }
  }

  .quality__img {
    width: 100px;
    height: 100px;
    flex-shrink: 0
  }

  @media screen and (max-width : 763px) {
    .quality__img {
      width: 60px;
      height: 60px
    }
  }

  .quality__img>img {
    width: 100%;
    height: 100%
  }

  .quality__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 33%;
    gap: 15px
  }

  @media screen and (max-width : 763px) {
    .quality__item {
      flex-direction: row
    }
  }

  .quality__desc {
    margin-bottom: 0
  }

  @media screen and (max-width : 763px) {
    .quality__desc {
      text-align: left
    }
  }

  @media screen and (max-width : 479px) {
    .quality__desc {
      font-size: 14px
    }
  }

  .experts {
    text-align: center;
    padding: 80px 0
  }

  .experts p {
    text-wrap: pretty
  }

  .experts__team {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 40px;
    gap: 30px 10px
  }

  @media screen and (max-width : 763px) {
    .experts__team {
      flex-wrap: wrap;
      justify-content: center
    }
  }

  .experts .expert {
    flex: 1 1 100px
  }

  .experts .img {
    height: 80px;
    width: 80px;
    flex-shrink: 0;
    margin: 0 auto 15px
  }

  @media screen and (max-width : 1023px) {
    .experts .img {
      height: 65px;
      width: 65px;
      margin-bottom: 10px
    }
  }

  .experts .img>img {
    width: 100%;
    height: 100%;
    border-radius: 50%
  }

  .experts .details {
    font-size: 14px
  }

  @media screen and (max-width : 1023px) {
    .experts .details {
      font-size: 12px
    }
  }

  .experts .name {
    font-family: var(--medium)
  }

  .experts .title {
    font-family: var(--light)
  }

  .callout {
    background-color: #3a5062;
    text-align: center;
    padding: 80px 15px;
    margin-bottom: 0
  }

  .callout .btn.btn-primary {
    display: inline-flex
  }

  .callout h2 {
    color: #fff
  }

  .ab-benefits-bullet-list--variant {
    display: none
  }

  @media screen and (max-width : 1023px) {
    .ab-benefits-bullet-list .l-hero {
      height: auto !important;
      padding: 0 !important
    }

    .ab-benefits-bullet-list .l-hero>.l-container:first-of-type {
      position: relative !important
    }
  }

  .ab-benefits-bullet-list .ab-benefits-bullet-list--original {
    display: none
  }

  .ab-benefits-bullet-list .ab-benefits-bullet-list--variant {
    display: block;
    width: 60%
  }

  @media screen and (max-width : 1023px) {
    .ab-benefits-bullet-list .ab-benefits-bullet-list--variant {
      width: 100%;
      display: flex;
      flex-direction: row-reverse
    }
  }

  @media screen and (max-width : 763px) {
    .ab-benefits-bullet-list .ab-benefits-bullet-list--variant {
      text-align: left !important;
      flex-direction: column;
      align-items: center;
      padding: 0 15px 30px
    }

    body.home .hero__image {
      z-index: 1;
      mask-image: linear-gradient(180deg, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
    }

    body.home .hero .contents {
      margin-top: -150px;
      z-index: 1001;
      padding: 0;
    }

  }

  .ab-benefits-bullet-list .ab-benefits-bullet-list--variant .contents {
    position: relative;
    z-index: 1001;
    padding: 30px 0
  }



  /* 修复 contents 区域 h1 标题左对齐 */
  .contents h1,
  .ab-benefits-bullet-list .ab-benefits-bullet-list--variant .contents h1 {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  @media screen and (max-width : 1023px) {

    .contents h1,
    .ab-benefits-bullet-list .ab-benefits-bullet-list--variant .contents h1 {
      text-align: left !important;
      margin-left: 0 !important;
    }
  }

  @media screen and (max-width : 479px) {

    .contents h1,
    .ab-benefits-bullet-list .ab-benefits-bullet-list--variant .contents h1 {
      text-align: left !important;
      margin-left: 0 !important;
      font-size: 28px !important;
      line-height: 32px !important;
    }
  }

  .ab-benefits-bullet-list .ab-benefits-bullet-list--variant h1 br {
    display: none
  }

  @media screen and (max-width : 763px) {
    .ab-benefits-bullet-list .ab-benefits-bullet-list--variant h1 {
      margin-bottom: 20px !important
    }

    .ab-benefits-bullet-list .ab-benefits-bullet-list--variant h1 strong {
      color: #fff !important
    }
  }

  .ab-benefits-bullet-list .ab-benefits-bullet-list--variant .hero__image {
    height: 100%
  }

  @media screen and (max-width : 1023px) {
    .ab-benefits-bullet-list .ab-benefits-bullet-list--variant .hero__image {
      width: 100%;
      height: auto;
      mask-image: linear-gradient(180deg, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
      position: relative;
      width: 100%;
      max-width: 400px;
      top: 0;
      z-index: 1000;
      right: 0;
      top: 0;
      margin-bottom: 20px;
      padding: 0 15px
    }
  }

  .ab-benefits-bullet-list--original .benefits__list {
    font-family: var(--light);
    list-style: none;
    margin: 0 0 30px;
    color: #fff;
    font-size: 18px;
    text-wrap: balance;
    text-align: left
  }

  @media screen and (max-width : 479px) {
    .ab-benefits-bullet-list .ab-benefits-bullet-list--original .benefits__list {
      font-size: 14px
    }
  }

  .ab-benefits-bullet-list .ab-benefits-bullet-list--original .benefits__list li {
    display: flex
  }

  .ab-benefits-bullet-list .ab-benefits-bullet-list--original .benefits__list li .circle {
    flex: 0 0 auto;
    margin: 6px 10px 0 0
  }

  .ab-benefits-bullet-list .ab-benefits-bullet-list--original .benefits__list li .green {
    font-family: var(--medium)
  }

  .ab-benefits-bullet-list .ab-benefits-bullet-list--original .benefits__list li+li {
    margin-top: 20px
  }

  .ab-benefits-bullet-list .ab-benefits-bullet-list--original .supporting-text {
    font-family: var(--light);
    font-size: 12px;
    color: #fff;
    margin-top: 10px
  }

  @media screen and (max-width : 1023px) {
    .ab-benefits-bullet-list .ab-benefits-bullet-list--original .supporting-text br {
      display: none
    }

    .ab-benefits-bullet-list--original {
      width: 100%;
      display: flex;
      flex-direction: row-reverse;
    }
  }

  @media screen and (max-width : 1023px) {
    .success-stories {
      margin-top: 40px
    }
  }

  .success-stories .headline {
    font-family: var(--light);
    font-size: 36px;
    line-height: 48px;
    text-align: center
  }

  @media screen and (max-width : 479px) {
    .success-stories .headline {
      font-size: 24px;
      line-height: 30px
    }
  }

  .success-stories .headline__subtitle {
    font-family: var(--light);
    font-size: 18px;
    line-height: 30px;
    text-align: center
  }

  .success-stories section.success-stories__welcome {
    padding: 92px 0;
    font-family: var(--light);
    color: #495354;
    text-align: center
  }

  @media screen and (max-width : 763px) {
    .success-stories section.success-stories__welcome {
      padding: 60px 0
    }
  }

  @media screen and (max-width : 479px) {
    .success-stories section.success-stories__welcome {
      padding: 0 0 50px
    }
  }

  .success-stories section.success-stories__welcome>.headline {
    font-size: 54px;
    line-height: 62px;
    margin-bottom: 40px
  }

  @media screen and (max-width : 763px) {
    .success-stories section.success-stories__welcome>.headline {
      font-size: 38px;
      line-height: 46px;
      margin-bottom: 54px
    }

    .ab-benefits-bullet-list--original {
      text-align: left !important;
      flex-direction: column;
      align-items: center;
      padding: 0 15px 30px;
    }

  }

  @media screen and (max-width : 479px) {
    .success-stories section.success-stories__welcome>.headline {
      font-size: 28px;
      line-height: 34px;
      margin-bottom: 40px;
      padding-top: 60px
    }

  }

  .success-stories section.success-stories__welcome>.headline__subtitle {
    margin-bottom: 62px
  }

  @media screen and (max-width : 763px) {
    .success-stories section.success-stories__welcome>.headline__subtitle {
      margin-bottom: 32px
    }
  }

  .success-stories section.success-stories__welcome>.headline__subtitle>p {
    margin-bottom: 0
  }

  .success-stories section.success-stories__welcome>.headline__subtitle>ul {
    color: #495354;
    line-height: 30px
  }

  .success-stories section.success-stories__welcome>a {
    text-align: center
  }

  .success-stories section.success-stories__welcome>.success-stories__registered-users {
    display: flex;
    justify-content: center
  }

  .success-stories section.success-stories__welcome>.success-stories__registered-users>.success-stories__counters {
    display: flex;
    margin-bottom: 46px;
    text-align: center
  }

  @media screen and (max-width : 479px) {
    .success-stories section.success-stories__welcome>.success-stories__registered-users>.success-stories__counters {
      margin-bottom: 18px
    }
  }

  .success-stories section.success-stories__welcome .counters-caption {
    margin-bottom: 0
  }

  .success-stories section.success-stories__welcome .show-success-stories {
    text-align: center
  }

  .success-stories section.success-stories__get-inspired {
    padding: 92px 0 80px 0
  }

  @media screen and (max-width : 763px) {
    .success-stories section.success-stories__get-inspired {
      padding: 72px 0 60px 0
    }
  }

  @media screen and (max-width : 479px) {
    .success-stories section.success-stories__get-inspired {
      padding: 32px 0 20px 0
    }
  }

  .success-stories section.success-stories__get-inspired>.headline {
    margin-bottom: 81px;
    text-wrap: pretty
  }

  @media screen and (max-width : 763px) {
    .success-stories section.success-stories__get-inspired>.headline {
      margin-bottom: 41px
    }
  }

  .success-stories section.success-stories__get-inspired>.get-inspired__slider {
    margin-bottom: 87px;
    display: flex
  }

  @media screen and (max-width : 763px) {
    .success-stories section.success-stories__get-inspired>.get-inspired__slider {
      margin-bottom: 44px;
      height: auto;
      width: 100%;
      flex-direction: column
    }
  }

  .success-stories section.success-stories__get-inspired>.get-inspired__slider>.get-inspired__img {
    width: 50%;
    height: auto;
    background-image: url("/assets/slider_image-64f9647eecc1fb8a7ff6cb95d35a2e55904e75cd28636fe704a02a2f6d2a30e8.digested.jpg");
    background-repeat: no-repeat;
    background-position: right top
  }

  @media screen and (max-width : 763px) {
    .success-stories section.success-stories__get-inspired>.get-inspired__slider>.get-inspired__img {
      display: none
    }
  }

  .success-stories section.success-stories__get-inspired>.get-inspired__slider>.get-inspired__content {
    display: flex;
    align-items: center;
    min-height: 290px;
    padding: 0 85px;
    background-color: #3a5062;
    width: 50%;
    height: 100%;
    text-align: center
  }

  @media screen and (max-width : 763px) {
    .success-stories section.success-stories__get-inspired>.get-inspired__slider>.get-inspired__content {
      justify-content: center;
      width: 100%;
      padding: 0 20px;
      background-image: linear-gradient(-45deg, rgba(45, 51, 57, 0.5) 0%, rgba(45, 51, 57, 0.7) 59%, rgba(45, 51, 57, 0.9) 100%), url("/assets/slider_image-64f9647eecc1fb8a7ff6cb95d35a2e55904e75cd28636fe704a02a2f6d2a30e8.digested.jpg");
      background-size: cover;
      background-position: right 0
    }
  }

  .success-stories section.success-stories__get-inspired>.get-inspired__slider>.get-inspired__content p {
    color: #fff;
    font-family: var(--light);
    font-size: 18px;
    line-height: 34px
  }

  .success-stories section.success-stories__get-inspired>.get-inspired__slider>.get-inspired__content p.quote {
    font-family: var(--light);
    font-size: 18px;
    line-height: 34px;
    margin-bottom: 35px
  }

  .success-stories section.success-stories__get-inspired>.get-inspired__slider>.get-inspired__content p.author {
    font-family: var(--light);
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0
  }

  .success-stories section.success-stories__global-users {
    padding: 92px 0 92px 0
  }

  @media screen and (max-width : 763px) {
    .success-stories section.success-stories__global-users {
      padding: 72px 0 60px 0
    }
  }

  @media screen and (max-width : 479px) {
    .success-stories section.success-stories__global-users {
      padding: 32px 0 20px 0
    }
  }

  .success-stories section.success-stories__global-users>.headline {
    margin-bottom: 42px
  }

  .success-stories section.success-stories__global-users>.headline__subtitle {
    margin-bottom: 82px
  }

  .success-stories section.success-stories__global-users>.global-users__map {
    display: block;
    margin-bottom: 83px
  }

  @media screen and (max-width : 479px) {
    .success-stories section.success-stories__global-users>.global-users__map {
      margin-bottom: 0
    }
  }

  .success-stories section.success-stories__global-users>.global-users__map>img {
    width: 100%
  }

  .success-stories section.success-stories__global-users>.global-users__continent-counters {
    display: flex;
    justify-content: space-around
  }

  @media screen and (max-width : 479px) {
    .success-stories section.success-stories__global-users>.global-users__continent-counters {
      display: none
    }
  }

  .success-stories section.success-stories__global-users>.global-users__continent-counters>.global-users__continent-counter {
    font-size: 18px;
    line-height: 28px;
    text-align: center
  }

  .success-stories section.success-stories__global-users>.global-users__continent-counters>.global-users__continent-counter>.continent-counter__name {
    color: #09f;
    margin-bottom: 4px
  }

  .success-stories section.success-stories__global-users>.global-users__continent-counters>.global-users__continent-counter>.continent-counter__value {
    color: #495354;
    margin-bottom: 0
  }

  .success-stories section.success-stories__tell-your-story {
    background-color: #3a5062;
    padding: 92px 0 92px 0;
    text-align: center;
    margin-bottom: -50px
  }

  @media screen and (min-width : 1024px) {
    .success-stories section.success-stories__tell-your-story {
      background-image: url("/assets/tell_your_story_left_bg-c4121e5e9d557a39d1db9f96271a2e6730b5464d77ede4f5c2813e263e40ec6d.digested.webp"), url("/assets/tell_your_story_right_bg-637f44ad91d8d331bb617c0ce01a3c7fb5921be54382dd0d6938087339de000a.digested.webp");
      background-position: -20% bottom, 120% top;
      background-size: auto, auto;
      background-repeat: no-repeat, no-repeat
    }
  }

  @media screen and (min-width : 1360px) {
    .success-stories section.success-stories__tell-your-story {
      background-position: bottom left, top right
    }
  }

  @media screen and (max-width : 763px) {
    .success-stories section.success-stories__tell-your-story {
      padding: 72px 0 60px 0
    }
  }

  @media screen and (max-width : 479px) {
    .success-stories section.success-stories__tell-your-story {
      padding: 52px 0 50px 0
    }
  }

  .success-stories section.success-stories__tell-your-story>.l-container {
    max-width: 635px
  }

  @media screen and (max-width : 1023px) {
    .success-stories section.success-stories__tell-your-story>.l-container {
      max-width: 100%
    }
  }

  .success-stories section.success-stories__tell-your-story .headline {
    margin-bottom: 58px;
    color: #fff
  }

  .success-stories section.success-stories__tell-your-story p.headline__subtitle {
    color: #fff
  }

  .success-story-cards__caption {
    text-align: center
  }

  .success-story-cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%
  }

  @media screen and (max-width : 1023px) {
    .success-story-cards {
      flex-direction: column
    }
  }

  .success-story-cards .success-story-card {
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 2px;
    min-height: 150px;
    font-family: var(--light);
    margin-bottom: 20px;
    padding: 20px;
    display: block;
    margin-right: 20px;
    width: 450px;
    min-width: 290px;
    display: flex;
    align-items: center
  }

  @media screen and (max-width : 1023px) {
    .success-story-cards .success-story-card {
      min-height: 121px;
      margin-right: 0;
      width: 100%
    }
  }

  .success-story-cards .success-story-card:hover {
    background-color: #f7f7f7
  }

  .success-story-cards .success-story-card>.student-card__img {
    margin-right: 20px
  }

  .success-story-cards .success-story-card>.student-card__img>img {
    width: 75px;
    height: 75px
  }

  .success-story-cards .success-story-card>.student-card__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden
  }

  .success-story-cards .success-story-card>.student-card__info p.student-name {
    color: #09f;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0
  }

  .success-story-cards .success-story-card>.student-card__info p.student-details {
    color: #495354;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0
  }

  .success-story-cards .success-story-card>.student-card__info p.read-more {
    color: #495354;
    text-decoration: underline;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0
  }

  .success-story {
    font-family: var(--light)
  }

  @media screen and (max-width : 1023px) {
    .success-story {
      margin-top: 40px
    }
  }

  .success-story h2 {
    font-family: var(--light);
    color: #3a5062;
    font-size: 30px;
    line-height: 36px
  }

  .success-story h3 {
    margin-bottom: 30px;
    line-height: 30px;
    font-size: 20px;
    font-family: var(--light)
  }

  .success-story .success_story__profile-picture {
    width: 144px
  }

  .success-story .text-with-image {
    margin-bottom: 30px
  }

  .success-story .text-with-image>img {
    float: right;
    padding-left: 30px;
    padding-top: 10px
  }

  @media screen and (max-width : 763px) {
    .success-story .text-with-image>img {
      float: none;
      padding-left: 0;
      padding-top: 0
    }
  }

  .success-story p {
    line-height: 30px;
    margin-bottom: 30px;
    font-size: 16px;
    font-style: normal
  }

  .success-story p.i {
    font-family: var(--light-italic)
  }

  .success-story p.intro {
    margin-bottom: 42px
  }

  .success-story p.before-quote {
    margin-bottom: 36px
  }

  .success-story strong {
    font-family: var(--regular)
  }

  .success-story img.illustration {
    max-width: 100%;
    display: block;
    margin-bottom: 60px
  }

  .success-story .success-story__hero {
    text-align: center;
    padding-top: 101px
  }

  @media screen and (max-width : 479px) {
    .success-story .success-story__hero {
      padding-top: 50px
    }
  }

  .success-story .success-story__hero>h1 {
    font-family: var(--light);
    font-size: 36px;
    line-height: 48px;
    max-width: 780px;
    margin: 0 auto 56px auto
  }

  .success-story .success-story__hero>.headline-quote {
    color: #3a5062;
    font-family: var(--light-italic);
    font-size: 24px;
    line-height: 40px;
    margin: 0 auto 136px auto;
    max-width: 630px
  }

  @media screen and (max-width : 1023px) {
    .success-story .success-story__hero>.headline-quote {
      width: auto
    }
  }

  .success-story .success-story__profile {
    text-align: center;
    margin-top: -70px;
    margin-bottom: 50px
  }

  @media screen and (max-width : 1023px) {
    .success-story .success-story__profile {
      margin-bottom: 30px
    }
  }

  .success-story .success-story__profile>img {
    margin-bottom: 33px
  }

  .success-story .success-story__profile>.profile__name {
    color: #09f;
    font-family: var(--light);
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    margin-bottom: 9px
  }

  .success-story .success-story__profile>.profile__description {
    padding: 0 200px
  }

  @media screen and (max-width : 1023px) {
    .success-story .success-story__profile>.profile__description {
      padding: 0 20px
    }
  }

  .success-story .questionnaire {
    border: 1px solid #eaeaea;
    font-size: 16px;
    line-height: 30px;
    font-family: var(--light);
    margin-bottom: 90px;
    display: flex
  }

  @media screen and (max-width : 1023px) {
    .success-story .questionnaire {
      display: block
    }
  }

  .success-story .questionnaire>.questionnaire__content {
    background-color: #f7f7f7;
    width: 50%;
    padding: 40px 47px;
    display: flex;
    flex-direction: column;
    justify-content: center
  }

  @media screen and (max-width : 1023px) {
    .success-story .questionnaire>.questionnaire__content {
      width: auto;
      padding: 26px
    }
  }

  @media screen and (max-width : 479px) {
    .success-story .questionnaire>.questionnaire__content {
      padding: 16px
    }
  }

  .success-story .questionnaire .questionnaire__image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    width: 50%
  }

  @media screen and (max-width : 1023px) {
    .success-story .questionnaire .questionnaire__image {
      width: auto
    }
  }

  .success-story .questionnaire .questionnaire__image>img {
    max-height: 386px;
    max-width: 100%
  }

  .success-story .questionnaire .questionnaire__question {
    color: #09f
  }

  .success-story .questionnaire .questionnaire__answer {
    color: #495354;
    margin-bottom: 19px
  }

  .success-story .questionnaire .questionnaire__answer:last-child {
    margin-bottom: 0
  }

  .success-story .content {
    padding: 0 81px
  }

  @media screen and (max-width : 1023px) {
    .success-story .content {
      padding: 0 16px
    }
  }

  .success-story .content .content__picture {
    margin: 0 0 30px 0;
    max-width: 100%
  }

  .success-story .content>section {
    padding-bottom: 60px;
    margin-bottom: 60px;
    border-bottom: 2px solid #eaeaea
  }

  .success-story .content>section:last-of-type {
    border-bottom: 0;
    margin-bottom: 0
  }

  @media screen and (max-width : 1023px) {
    .success-story .content>section {
      padding-bottom: 30px;
      margin-bottom: 30px
    }
  }

  .success-story .content>section p:last-child {
    margin-bottom: 0
  }

  .success-story .quote {
    background-color: #f7f7f7;
    text-align: center;
    font-family: var(--light-italic);
    color: #3a5062;
    margin-bottom: 46px;
    padding: 50px;
    line-height: 40px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center
  }

  @media screen and (max-width : 1023px) {
    .success-story .quote {
      padding: 30px 20px;
      line-height: 27px;
      font-size: 18px
    }
  }

  .success-story .quote.last-quote {
    margin-bottom: 42px
  }

  .success-story .story-cta {
    background-color: #3a5062;
    padding: 72px 80px 80px 80px;
    margin: 0 auto 63px 0
  }

  @media screen and (max-width : 1023px) {
    .success-story .story-cta {
      margin: 0 auto 30px 0;
      padding: 30px
    }
  }

  .success-story .story-cta p {
    color: #fff
  }

  .success-story .story-cta .cta-content {
    margin-bottom: 66px
  }

  .success-story .story-cta .logged-in p:last-of-type {
    margin-bottom: 0
  }

  .success-story .story-cta .logged-in>.upgrade-to-premium {
    margin-bottom: 66px
  }

  .success-story .story-cta .logged-out p>a {
    text-decoration: underline
  }

  .student-reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 90px
  }

  @media screen and (max-width : 1023px) {
    .student-reviews {
      margin-bottom: 50px
    }
  }

  @media screen and (max-width : 763px) {
    .student-reviews {
      grid-template-columns: repeat(2, 1fr)
    }
  }

  @media screen and (max-width : 479px) {
    .student-reviews {
      grid-template-columns: 1fr
    }
  }

  .student-reviews .card {
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    overflow: hidden;
    color: #495354;
    display: flex;
    flex-direction: column
  }

  .student-reviews .card .content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column
  }

  .student-reviews .card .text {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical
  }

  .student-reviews .card .text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5
  }

  .student-reviews .card .text p+p {
    margin-top: 10px
  }

  .student-reviews .card .text p:first-child::before {
    content: "“"
  }

  .student-reviews .card .text p:last-child::after {
    content: "”"
  }

  .student-reviews .card .read-less-link {
    display: none
  }

  .student-reviews .card .text-container {
    margin-bottom: 20px
  }

  .student-reviews .card .text-container.open .text {
    display: block
  }

  .student-reviews .card .text-container.open .read-less-link {
    display: block;
    margin-top: 5px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    color: #495354;
    text-decoration: underline
  }

  .student-reviews .card .read-more-link {
    display: none
  }

  .student-reviews .card .read-more-link.show {
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    color: #495354;
    text-decoration: underline
  }

  .student-reviews .card .info {
    margin-top: auto
  }

  .student-reviews .card .name {
    font-family: var(--medium);
    font-size: 14px;
    margin-top: auto
  }

  .student-reviews .card .meta {
    font-family: var(--light);
    font-size: 12px
  }

  .student-reviews .card .stars {
    color: #ffc026;
    margin-top: 8px
  }

  .student-reviews .card .image {
    width: 100%;
    aspect-ratio: 1;
    position: relative
  }

  .student-reviews .card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
  }

  .student-reviews .card .image .badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12px
  }

  .counter {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    font-family: var(--light);
    font-size: 60px;
    margin-right: 9px;
    padding-top: 4px
  }

  @media screen and (max-width : 1023px) {
    .counter {
      height: 70px;
      font-size: 42px;
      margin-right: 5px
    }
  }

  @media screen and (max-width : 479px) {
    .counter {
      height: 36px;
      font-size: 22px;
      margin-right: 5px
    }
  }

  .counter.counter__digit {
    width: 100px;
    background: linear-gradient(to bottom, #f7f7f7 0%, #f7f7f7 50%, #eeeeee 50%, #eeeeee 50%, #eeeeee 100%);
    color: #09f;
    border-radius: 8px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2)
  }

  @media screen and (max-width : 1023px) {
    .counter.counter__digit {
      width: 70px
    }
  }

  @media screen and (max-width : 479px) {
    .counter.counter__digit {
      width: 36px
    }
  }

  .inline-quiz footer {
    margin: 0
  }

  .inline-quiz .l-hero--max {
    display: flex;
    align-items: center
  }

  .inline-quiz .l-hero--max>.l-container {
    width: 100%;
    padding: 0
  }

  .inline-quiz #initial_screen {
    text-align: center;
    padding: 0 15px
  }

  .inline-quiz #initial_screen h1 {
    font-size: 36px;
    line-height: 1.5;
    text-wrap: pretty
  }

  @media screen and (max-width : 479px) {
    .inline-quiz #initial_screen h1 {
      font-size: 24px
    }
  }

  .inline-quiz .quiz-options {
    display: flex;
    justify-content: center;
    gap: 20px
  }

  @media screen and (max-width : 479px) {
    .inline-quiz .quiz-options {
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      gap: 8px
    }
  }

  .inline-quiz .quiz-options .btn-primary {
    min-width: 200px;
    min-height: 120px;
    font-size: 18px;
    text-transform: none;
    font-family: var(--regular);
    flex-direction: column;
    gap: 12px;
    margin: 0
  }


  @keyframes spinner {
    to {
      transform: rotate(360deg)
    }
  }

  .spinner {
    position: relative
  }

  .image>.spinner {
    position: absolute;
    top: 50%;
    left: 50%
  }

  .spinner::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #09f;
    animation: spinner .6s linear infinite
  }

  .contentbox-image {
    position: relative
  }

  .loading {
    position: relative
  }

  .loading:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: hsla(0, 0%, 100%, .8);
    z-index: 1000
  }


  @media screen and (max-width: 1023px) {
    .slideout-panel {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: hidden;
    }

    .slideout-panel .l-container {
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 15px !important;
      padding-right: 15px !important;
      margin: 0 !important;
    }

    /* 确保所有子元素不超出容器 */
    .slideout-panel * {
      max-width: 100%;
      box-sizing: border-box;
    }


    /* 修复hero容器 */
    body.home .l-hero>.l-container:first-of-type {
      width: 100% !important;
      padding: 0 15px !important;
    }
  }

  /* 确保整体页面不会横向滚动 */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* 修复可能导致横向滚动的元素 */
  .l-hero--subsection .trust-items {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  @media screen and (max-width: 479px) {
    .slideout-panel .l-container {
      padding-left: 15px !important;
      padding-right: 15px !important;
    }

    /* 确保按钮和文本不会超出屏幕 */
    .btn {
      max-width: 100%;
      word-wrap: break-word;
    }

    /* 修复小屏幕下的文本换行 */
    h1,
    h2,
    p {
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
  }

  /* 额外的移动端固定顶栏修复 */
  @media screen and (max-width : 479px) {
    .l-topbar-mobile {
      height: 50px !important;
    }

    .slideout-panel {
      padding-top: 50px !important;
    }

    body.home .l-hero {
      padding-top: 15px;
    }
  }

  /* 确保在所有情况下顶栏都固定在顶部 */
  .l-topbar-mobile.l-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    transform: none !important;
  }

  .recommendations {
    margin: 70px 0 58px 0;
  }