/**
 * Base:
 * Typography
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700&display=swap");
* {
  margin: 0;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  outline: none;
  border: 0;
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  background-color: #F7F7F7;
  font-family: "Inter";
}

img {
  max-width: 100%;
}

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

li {
  list-style-type: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.h1, .h2, .h3, .page-article .main-content article .article-body h1, .h4, .page-article .main-content article .article-body h2, .h5, .page-article .main-content article .article-body h3, .h6, .page-article .main-content article .article-body h4 {
  font-weight: 700;
  font-family: "Barlow Condensed";
}
/* Apply uppercase only to top-level headings (h1/h2 in-article, plus .h1-.h4 classes used in the page chrome). h3/h4 inside articles intentionally render in sentence case to create clear visual hierarchy vs h2. */
.h1, .h2, .h3, .h4,
.page-article .main-content article .article-body h1,
.page-article .main-content article .article-body h2 {
  text-transform: uppercase;
}
.h1 {
  font-size: 64px;
  line-height: 52px;
  letter-spacing: -1px;
}
.h2 {
  font-size: 56px;
  line-height: 44px;
  letter-spacing: -0.8px;
}
.h3, .page-article .main-content article .article-body h1 {
  font-size: 48px;
  line-height: 40px;
  letter-spacing: -0.8px;
}
.h4, .page-article .main-content article .article-body h2 {
  font-size: 40px;
  line-height: 32px;
  letter-spacing: -0.8px;
}
.h5, .page-article .main-content article .article-body h3 {
  font-size: 32px;
  line-height: 24px;
  letter-spacing: -0.6px;
}
.h6, .page-article .main-content article .article-body h4 {
  font-size: 24px;
  line-height: 20px;
  letter-spacing: -0.3px;
}
@media (max-width: 900px) {
  .h1 {
    font-size: 56px;
    line-height: 48px;
    letter-spacing: -2.27px;
  }
  .h2 {
    font-size: 42px;
    line-height: 36px;
    letter-spacing: -1.05px;
  }
  .h3, .page-article .main-content article .article-body h1 {
    font-size: 32px;
    line-height: 28px;
    letter-spacing: -0.45px;
  }
  .h4, .page-article .main-content article .article-body h2 {
    font-size: 24px;
    line-height: 24px;
    letter-spacing: -0.8px;
  }
  .h5, .page-article .main-content article .article-body h3 {
    font-size: 22px;
    line-height: 20px;
    letter-spacing: -0.2px;
  }
}

.subheading, .page-article .main-content aside section h3 {
  text-transform: uppercase;
  font-family: "Barlow Condensed";
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -0.1px;
  font-weight: 700;
}

.headline {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.03px;
  font-weight: 400;
}
.headline-medium, .page-article .main-content article .article-body p span[class*=large], .link-headline {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.03px;
  font-weight: 450;
}
.headline-bold {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.1px;
  font-weight: 600;
}
@media (max-width: 900px) {
  .headline {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0px;
  }
  .headline-medium, .page-article .main-content article .article-body p span[class*=large], .link-headline {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.03px;
    font-weight: 500;
  }
  .headline-bold {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0px;
  }
}

.body-regular, .page-article .main-content article .article-body p,
.page-article .main-content article .article-body p span,
.page-article .main-content article .article-body li,
.page-article .main-content article .article-body li span {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 450;
}
.body-medium {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 500;
}
.body-bold, .page-article .main-content article .article-header .article-author-name, .page-article .main-content article .article-body ol li::before {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.04px;
  font-weight: 600;
}
.body strong, p strong {
  font-weight: 700;
}

a, .link, .link-headline {
  color: #141F33;
}

.link, .link-headline {
  transition: all 100ms;
}
.link-headline {
  text-decoration: underline;
}
@media (hover: hover) {
  .link:hover, .link-headline:hover {
    opacity: 0.7;
  }
}

.subhead, .subhead-bold, .page-search .search-results .search-result .result-votes, .subhead-medium, .page-search .search-results .search-result .result-meta, .page-article .main-content aside section a, .powered-by-zendesk a, .header-support .breadcrumbs li,
.header-support .breadcrumbs li a {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.02px;
}
.subhead strong, .subhead-bold strong, .page-search .search-results .search-result .result-votes strong, .subhead-medium strong, .page-search .search-results .search-result .result-meta strong, .page-article .main-content aside section a strong, .powered-by-zendesk a strong, .header-support .breadcrumbs li strong {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.02px;
  font-weight: 600;
}
.subhead-medium, .page-search .search-results .search-result .result-meta, .page-article .main-content aside section a, .powered-by-zendesk a, .header-support .breadcrumbs li,
.header-support .breadcrumbs li a {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  font-weight: 500;
}
.subhead-bold, .page-search .search-results .search-result .result-votes {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  font-weight: 600;
}
@media (hover: hover) {
  .subhead[class*=action]:hover, [class*=action].subhead-medium:hover, .page-search .search-results .search-result [class*=action].result-meta:hover, .page-article .main-content aside section a[class*=action]:hover, .powered-by-zendesk a[class*=action]:hover, .header-support .breadcrumbs li[class*=action]:hover,
  .header-support .breadcrumbs li a[class*=action]:hover, [class*=action].subhead-bold:hover, .page-search .search-results .search-result [class*=action].result-votes:hover {
    opacity: 0.7;
  }
}

.caption-1, .page-article .main-content article .article-header .article-updated, .header-main #google-translate-element select {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  font-weight: 500;
}
.caption-1-bold {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  font-weight: 600;
}
.caption-1-custom {
  font-family: "Barlow Condensed";
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
}
.caption-1 a, .page-article .main-content article .article-header .article-updated a, .header-main #google-translate-element select a, .caption-1 .link, .page-article .main-content article .article-header .article-updated .link, .header-main #google-translate-element select .link, .caption-1 .link-headline, .page-article .main-content article .article-header .article-updated .link-headline, .header-main #google-translate-element select .link-headline {
  text-decoration: underline;
}
@media (hover: hover) {
  .caption-1[class*=action]:hover, .page-article .main-content article .article-header [class*=action].article-updated:hover, .header-main #google-translate-element select[class*=action]:hover {
    opacity: 0.7;
  }
}
.caption-2, .page-home .header-main #google-translate-element .goog-te-gadget {
  font-size: 11px;
  line-height: 12px;
  letter-spacing: -0.1px;
  font-weight: 500;
}
.caption-2-bold {
  font-size: 11px;
  line-height: 12px;
  letter-spacing: -0.1px;
  font-weight: 600;
}
.caption-2-custom, label.input-label {
  font-family: "Barlow Condensed";
  font-size: 11px;
  line-height: 12px;
  letter-spacing: 0.8px;
  font-weight: 600;
  text-transform: uppercase;
}
.caption-2 a, .page-home .header-main #google-translate-element .goog-te-gadget a, .caption-2 .link, .page-home .header-main #google-translate-element .goog-te-gadget .link, .caption-2 .link-headline, .page-home .header-main #google-translate-element .goog-te-gadget .link-headline {
  text-decoration: underline;
}

.text-button-1, .page-home .hero form.search input[type=submit], .text-button-2, .header-support form.search input[type=submit], .button-small {
  text-transform: uppercase;
  font-family: "Barlow Condensed";
  transition: all 100ms;
  display: inline-block;
  position: relative;
}
.text-button-1, .page-home .hero form.search input[type=submit] {
  font-size: 18px;
  line-height: 16px;
  letter-spacing: 0.1px;
  font-weight: 700;
}
.text-button-2, .header-support form.search input[type=submit], .button-small {
  font-size: 16px;
  line-height: 12px;
  letter-spacing: -0.2px;
  font-weight: 700;
}
@media (hover: hover) {
  .text-button-1:hover, .page-home .hero form.search input[type=submit]:hover, .text-button-2:hover, .header-support form.search input[type=submit]:hover, .button-small:hover {
    opacity: 0.7;
  }
}

label.input-label {
  color: #666D7A;
  display: block;
}

.text-blue {
  color: #3651F1;
}
.text-light {
  color: #666D7A;
}
.text-lighter {
  color: #ACB0B7;
}
.text-white {
  color: #FFF;
}
.text-grey-2 {
  color: #434B5B;
}
.text-grey-5 {
  color: #ACB0B7;
}
.text-grey-4 {
  color: #898F99;
}
.text-primary-1 {
  color: #3651F1;
}
.text-primary-2 {
  color: #5E73F3;
}
.text-bold {
  font-weight: 600;
  letter-spacing: 0;
}
.text-upper {
  text-transform: uppercase;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}

input {
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  display: inline-block;
}

textarea,
input[type=text],
input[type=search] {
  width: 100%;
}

.button, .button-small {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.button-small {
  padding: 10px 12px 12px;
  border-radius: 10px;
  transition: 200ms;
}
@media (hover: hover) {
  .button-small:hover {
    opacity: 0.9;
    transition: opacity 200ms;
  }
}
.button.fill-primary-4, .fill-primary-4.button-small {
  background-color: #9AA8F8;
  color: #FFF;
}
.button.outline-grey-a3, .outline-grey-a3.button-small {
  box-shadow: inset 0 0 0 1.5px rgba(20, 31, 51, 0.09);
  color: #434B5B;
}

.header-main {
  width: 100%;
  padding: 24px 0;
  background-color: #FFF;
}
.header-main .logo {
  width: 122px;
  height: 48px;
  background: var(--logo-default);
  background-size: cover;
}
.header-main #google-translate-element .goog-te-gadget,
.header-main #google-translate-element .goog-logo-link {
  font-family: "Inter";
}
.header-main #google-translate-element .goog-te-gadget > div {
  width: 100%;
  align-items: center;
  position: relative;
}
.header-main #google-translate-element .goog-te-gadget > div:not([class*=hidden]) {
  display: flex;
}
.header-main #google-translate-element .goog-te-gadget > div::after {
  content: "";
  display: block;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: var(--ic-chevron-down);
  background-size: 100%;
  position: absolute;
  right: 8px;
  pointer-events: none;
}
.header-main #google-translate-element select {
  width: 100%;
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(20, 31, 51, 0.09);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.page-home .header-main {
  background-color: transparent;
  position: absolute;
}
.page-home .header-main .logo {
  background: var(--logo-white);
}
.page-home .header-main #google-translate-element .goog-te-gadget,
.page-home .header-main #google-translate-element .goog-logo-link {
  color: #FFF;
}
.page-home .header-main #google-translate-element .goog-te-gadget > div::after {
  content: "";
  display: block;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #FFF;
  -webkit-mask: var(--ic-chevron-down);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask: var(--ic-chevron-down);
  mask-repeat: no-repeat;
  mask-size: 100%;
}
.page-home .header-main #google-translate-element select {
  box-shadow: inset 0 0 0 1.5px #FFF;
  border-radius: 8px;
}

.header-support {
  width: 100%;
  padding-bottom: 32px;
  background-color: #FFF;
}
.header-support .breadcrumbs {
  align-items: center;
  gap: 4px;
}
.header-support .breadcrumbs:not([class*=hidden]) {
  display: flex;
}
.header-support .breadcrumbs li,
.header-support .breadcrumbs li a {
  color: #898F99;
}
.header-support .breadcrumbs li + li {
  align-items: center;
  gap: 4px;
}
.header-support .breadcrumbs li + li:not([class*=hidden]) {
  display: flex;
}
.header-support .breadcrumbs li + li::before {
  content: "";
  display: block;
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: var(--ic-chevron-right);
  background-size: 100%;
}
.header-support form.search {
  justify-content: space-between;
  align-items: center;
  box-shadow: inset 0 0 0 1.5px rgba(20, 31, 51, 0.09);
  border-radius: 12px;
  padding: 10px 16px 10px;
  width: 100%;
  max-width: 380px;
}
.header-support form.search:not([class*=hidden]) {
  display: flex;
}
.header-support form.search input[type=search] {
  font-family: "Inter";
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0px;
  font-weight: 500;
  color: #141F33;
}
.header-support form.search input[type=submit] {
  order: 2;
  display: inline-block;
  width: 22px;
  height: 22px;
  background: #434B5B;
  -webkit-mask: var(--ic-search);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask: var(--ic-search);
  mask-repeat: no-repeat;
  mask-size: 100%;
}
.header-support form.search input[type=submit]:hover {
  opacity: 1;
}
.header-support .header-meta {
  padding: 24px 0 12px;
}
.header-support .page-description {
  margin-top: 20px;
  max-width: 580px;
}
.header-support .button-follow {
  margin-top: 32px;
}
.header-support .button-follow .dropdown-toggle {
  align-items: center;
  gap: 8px;
  vertical-align: initial;
}
.header-support .button-follow .dropdown-toggle:not([class*=hidden]) {
  display: flex;
}
.header-support .button-follow .dropdown-toggle::after {
  content: "";
  display: block;
  display: inline-block;
  width: 14px;
  height: 12px;
  background-image: var(--ic-chevron-down);
  background-size: 100%;
  transform: translateY(1px);
}
@media (max-width: 500px) {
  .header-support .header-actions {
    flex-direction: column;
  }
  .header-support .breadcrumbs {
    margin-bottom: 16px;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .header-support .breadcrumbs::-webkit-scrollbar {
    display: none;
  }
  .header-support .breadcrumbs li {
    flex-shrink: 0;
  }
}

.footer-main {
  width: 100%;
  padding: 40px 0 8px;
}
.footer-main .logo {
  width: 118px;
  height: 56px;
  background: var(--logo-grey);
  background-size: cover;
}

.powered-by-zendesk {
  justify-content: center;
  padding: 0 0 56px;
  height: auto;
}
.powered-by-zendesk:not([class*=hidden]) {
  display: flex;
}
.powered-by-zendesk a {
  font-family: "Inter";
}

@keyframes rotate {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.loader {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50vh;
  right: 50vw;
  z-index: -1;
  transition: all 100ms;
}
.loader .spinner {
  animation: rotate 1.5s linear infinite;
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #ACB0B7;
  -webkit-mask: var(--ic-loader);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask: var(--ic-loader);
  mask-repeat: no-repeat;
  mask-size: 100%;
}
.loader.hidden {
  opacity: 0;
}

.page-section .page-content .list-row, .page-category .page-content .list-row, .page-home .rows .list-row {
  transition: 200ms;
}
.page-section .page-content .list-row a, .page-category .page-content .list-row a, .page-home .rows .list-row a {
  padding: 16px 16px 18px 24px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.page-section .page-content .list-row a:not([class*=hidden]), .page-category .page-content .list-row a:not([class*=hidden]), .page-home .rows .list-row a:not([class*=hidden]) {
  display: flex;
}
.page-section .page-content .list-row a::after, .page-category .page-content .list-row a::after, .page-home .rows .list-row a::after {
  content: "";
  display: block;
  transition: all 120ms;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: var(--ic-chevron-right);
  background-size: 100%;
  flex-shrink: 0;
}
.page-section .page-content .list-row:not(:last-child), .page-category .page-content .list-row:not(:last-child), .page-home .rows .list-row:not(:last-child) {
  position: relative;
}
.page-section .page-content .list-row:not(:last-child)::after, .page-category .page-content .list-row:not(:last-child)::after, .page-home .rows .list-row:not(:last-child)::after {
  content: "";
  display: block;
  width: calc(100% - 24px);
  height: 2px;
  position: absolute;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 0 0 #F3F3F4, inset 0 -1.5px 0 0 #F3F3F4, inset 0 0 0 0 #F3F3F4, inset -0 0 0 0 #F3F3F4;
}
@media (hover: hover) {
  .page-section .page-content .list-row:hover, .page-category .page-content .list-row:hover, .page-home .rows .list-row:hover {
    transition: 200ms;
  }
  .page-section .page-content .list-row:hover a, .page-category .page-content .list-row:hover a, .page-home .rows .list-row:hover a {
    transition: all 120ms;
    opacity: 0.5;
  }
  .page-section .page-content .list-row:hover a::after, .page-category .page-content .list-row:hover a::after, .page-home .rows .list-row:hover a::after {
    content: "";
    display: block;
    transition: all 120ms;
    transform: translateX(3px);
  }
}
@media (max-width: 500px) {
  .page-section .page-content .list-row a, .page-category .page-content .list-row a, .page-home .rows .list-row a {
    padding: 16px 16px 18px 20px;
  }
  .page-section .page-content .list-row:not(:last-child)::after, .page-category .page-content .list-row:not(:last-child)::after, .page-home .rows .list-row:not(:last-child)::after {
    content: "";
    display: block;
    width: calc(100% - 20px);
    height: 2px;
  }
}

.page-search .search-results .subheading, .page-category .page-content .subheading, .page-home .rows .subheading {
  padding: 24px;
}
@media (max-width: 500px) {
  .page-search .search-results .subheading, .page-category .page-content .subheading, .page-home .rows .subheading {
    padding: 24px 20px;
  }
}

.page-category .page-content .view-all, .page-home .rows .view-all {
  padding: 24px 16px 20px 24px;
  justify-content: space-between;
  align-items: center;
  transition: all 120ms;
  transition: 200ms;
}
.page-category .page-content .view-all:not([class*=hidden]), .page-home .rows .view-all:not([class*=hidden]) {
  display: flex;
}
.page-category .page-content .view-all::after, .page-home .rows .view-all::after {
  content: "";
  display: block;
  transition: all 120ms;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #ACB0B7;
  -webkit-mask: var(--ic-chevron-right);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask: var(--ic-chevron-right);
  mask-repeat: no-repeat;
  mask-size: 100%;
}
@media (hover: hover) {
  .page-category .page-content .view-all:hover, .page-home .rows .view-all:hover {
    transition: 200ms;
    transition: all 120ms;
    opacity: 0.7;
  }
  .page-category .page-content .view-all:hover::after, .page-home .rows .view-all:hover::after {
    content: "";
    display: block;
    transition: all 120ms;
    transform: translateX(3px);
  }
}
@media (max-width: 500px) {
  .page-category .page-content .view-all, .page-home .rows .view-all {
    padding: 24px 16px 28px 20px;
  }
}

.page-home .hero {
  padding: 132px 0 100px;
  background-size: cover;
}
.page-home .hero .hero-title {
  color: #FFF;
  max-width: 420px;
  margin-bottom: 24px;
}
.page-home .hero .hero-title span {
  color: #D6DCFC;
}
.page-home .hero form.search {
  justify-content: space-between;
  align-items: center;
  box-shadow: inset 0 0 0 1.8px rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 11px 18px 13px;
}
.page-home .hero form.search:not([class*=hidden]) {
  display: flex;
}
.page-home .hero form.search input[type=search] {
  font-family: "Inter";
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 450;
  color: #FFF;
}
.page-home .hero form.search input[type=submit] {
  color: #FFF;
  order: 2;
  padding-left: 22px;
  z-index: 10;
}
.page-home .hero form.search input[type=submit]:hover {
  opacity: 1;
}
.page-home .hero form.search::after {
  content: "";
  display: block;
  display: inline-block;
  width: 22px;
  height: 22px;
  background: white;
  -webkit-mask: var(--ic-search);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask: var(--ic-search);
  mask-repeat: no-repeat;
  mask-size: 100%;
  flex-shrink: 0;
  pointer-events: none;
  -webkit-transform: translate(18px, 1px);
  -ms-transform: translate(18px, 1px);
  transform: translate(18px, 1px);
}

.page-home .whats-new a {
  background-color: #FFF;
  gap: 12px;
  width: 100%;
  padding: 12px 0 14px;
}

.page-home .main-categories {
  padding: 56px 0 48px;
}
.page-home .main-categories .category-card {
  padding: 24px;
  background-color: #FFF;
  border-radius: 20px;
  align-items: center;
  gap: 20px;
  transition: 200ms;
}
.page-home .main-categories .category-card:not([class*=hidden]) {
  display: flex;
}
.page-home .main-categories .category-card .category-name {
  margin-bottom: 4px;
}
.page-home .main-categories .category-card .category-articles-count {
  color: #666D7A;
}
@media (hover: hover) {
  .page-home .main-categories .category-card:hover {
    transition: 200ms;
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);
  }
}
@media (max-width: 1180px) {
  .page-home .main-categories .grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 800px) {
  .page-home .main-categories .grid {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
}
@media (max-width: 500px) {
  .page-home .main-categories .category-card {
    padding: 20px;
  }
}

.page-home .rows .section-card {
  padding: 8px 0;
  background-color: #FFF;
  border-radius: 20px;
}
.page-article .main-content {
  padding-top: 40px;
}
.page-article .main-content .container {
  gap: 20px;
}
.page-article .main-content .container:not([class*=hidden]) {
  display: flex;
}
.page-article .main-content article {
  width: 100%;
  max-width: 780px;
}
.page-article .main-content aside {
  width: 100%;
  max-width: 380px;
}
@media (max-width: 900px) {
  .page-article .main-content {
    padding-top: 24px;
  }
  .page-article .main-content .container {
    flex-direction: column;
  }
}

.page-article .main-content .container {
  position: relative;
}

.page-article .main-content article {
  padding: 64px;
  background-color: #FFF;
  border-radius: 30px;
  opacity: 0;
}
.page-article .main-content article .article-header .article-info {
  box-shadow: inset 0 0 0 0 rgba(20, 31, 51, 0.09), inset 0 -1px 0 0 rgba(20, 31, 51, 0.09), inset 0 0 0 0 rgba(20, 31, 51, 0.09), inset -0 0 0 0 rgba(20, 31, 51, 0.09);
}
.page-article .main-content article .article-header .article-author {
  padding: 24px 0 32px;
}
.page-article .main-content article .article-header .article-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
}
.page-article .main-content article .article-header .article-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-article .main-content article .article-header .article-meta {
  flex-direction: column;
  margin-left: 12px;
}
.page-article .main-content article .article-header .article-meta:not([class*=hidden]) {
  display: flex;
}
.page-article .main-content article .article-header .article-updated {
  color: #666D7A;
}
.page-article .main-content article .article-body {
  padding: 24px 0 40px;
  word-wrap: break-word;
}
.page-article .main-content article .article-body .wysiwyg-font-size-large {
  font-size: inherit;
}
.page-article .main-content article .article-body p,
.page-article .main-content article .article-body p span,
.page-article .main-content article .article-body li,
.page-article .main-content article .article-body li span {
  font-weight: 450 !important;
}
.page-article .main-content article .article-body p a,
.page-article .main-content article .article-body p span a,
.page-article .main-content article .article-body li a,
.page-article .main-content article .article-body li span a {
  text-decoration: underline;
  font-weight: 600 !important;
  transition: 40ms;
}
@media (hover: hover) {
  .page-article .main-content article .article-body p a:hover,
  .page-article .main-content article .article-body p span a:hover,
  .page-article .main-content article .article-body li a:hover,
  .page-article .main-content article .article-body li span a:hover {
    opacity: 0.6;
    transition: opacity 40ms;
  }
}
.page-article .main-content article .article-body p span[class*=large] {
  display: inline-block;
  margin-bottom: 8px;
}
.page-article .main-content article .article-body ul,
.page-article .main-content article .article-body ol {
  padding-left: 16px;
}
.page-article .main-content article .article-body ul li {
  list-style-type: disc;
}
/* Differentiate nested unordered lists so level-2 and level-3 bullets read distinctly (disc -> circle -> square, matching browser defaults). Helps readers — and authors — spot wrong nesting at a glance. */
.page-article .main-content article .article-body ul ul li {
  list-style-type: circle;
}
.page-article .main-content article .article-body ul ul ul li {
  list-style-type: square;
}
.page-article .main-content article .article-body ul li + li {
  margin-top: 4px;
}
.page-article .main-content article .article-body ol {
  counter-reset: item;
  list-style-position: inside;
}
.page-article .main-content article .article-body ol li {
  counter-increment: item;
  gap: 8px;
}
.page-article .main-content article .article-body ol li:not([class*=hidden]) {
  display: flex;
}
.page-article .main-content article .article-body ol li::before {
  content: counter(item) ".";
  display: block;
  width: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}
/* Nested ordered lists: the flex + ::before counter layout above only works reliably at the top level. For any <ol> inside another <ol>, fall back to the browser's native ordered-list rendering so numbering and indentation stay correct. */
.page-article .main-content article .article-body ol ol {
  list-style: decimal outside;
  list-style-position: outside;
  padding-left: 24px;
  counter-reset: none;
}
.page-article .main-content article .article-body ol ol li:not([class*=hidden]) {
  display: list-item;
  list-style-type: decimal;
  counter-increment: none;
  gap: 0;
}
.page-article .main-content article .article-body ol ol li::before {
  content: none;
  display: none;
}
/* The flex <li> above places its direct children (counter ::before, text, any nested list) on a single row. When an <li> contains a nested list, we need the list to drop onto a new line below the text instead of sitting to its right. flex-wrap + flex-basis:100% forces the nested list onto its own row. row-gap:0 stops the shorthand gap:8px from also adding 8px of vertical space between the text row and the nested-list row. */
.page-article .main-content article .article-body ol li {
  flex-wrap: wrap;
  row-gap: 0;
}
.page-article .main-content article .article-body ol li > ol,
.page-article .main-content article .article-body ol li > ul {
  flex-basis: 100%;
  margin-top: 4px;
  padding-left: 40px;
}
/* For 3rd-level (and deeper) nesting, reduce padding. The first nesting step needs 40px because it jumps from the flex/counter layout of the top-level <li> into a native list-item; subsequent nesting is list-item inside list-item, which already produces its own visual offset, so a smaller padding keeps the indent rhythm consistent. */
.page-article .main-content article .article-body ol ol li > ol,
.page-article .main-content article .article-body ol ol li > ul,
.page-article .main-content article .article-body ol ul li > ol,
.page-article .main-content article .article-body ol ul li > ul {
  padding-left: 24px;
}
.page-article .main-content article .article-body ol li + li {
  margin-top: 4px;
}
.page-article .main-content article .article-body h2 + p {
  margin-top: 16px;
}
.page-article .main-content article .article-body h2 + ol, .page-article .main-content article .article-body h2 + ul {
  margin-top: 20px;
}
.page-article .main-content article .article-body h2 + h3 {
  margin-top: 32px;
}
/* Theme only handled h2/h3 followed by something. The reverse case (a list ending and a heading starting) had zero spacing, making headings crash into the last list item. */
.page-article .main-content article .article-body ol + h2,
.page-article .main-content article .article-body ul + h2,
.page-article .main-content article .article-body p + h2 {
  margin-top: 40px;
}
.page-article .main-content article .article-body ol + h3,
.page-article .main-content article .article-body ul + h3,
.page-article .main-content article .article-body p + h3 {
  margin-top: 32px;
}
.page-article .main-content article .article-body h3 + p {
  margin-top: 16px;
}
.page-article .main-content article .article-body h3 + ol, .page-article .main-content article .article-body h3 + ul {
  margin-top: 20px;
}
.page-article .main-content article .article-body h3 + h4 {
  margin-top: 8px;
}
.page-article .main-content article .article-body h4 + p {
  margin-top: 8px;
}
.page-article .main-content article .article-body h4 + ul,
.page-article .main-content article .article-body h4 + ol {
  margin-top: 16px;
}
.page-article .main-content article .article-body p + p {
  margin-top: 4px;
}
.page-article .main-content article .article-body p + h2 {
  margin-top: 16px;
}
.page-article .main-content article .article-body p + h3 {
  margin-top: 20px;
}
.page-article .main-content article .article-body p + h4 {
  margin-top: 20px;
}
.page-article .main-content article .article-body p + ul, .page-article .main-content article .article-body p + ol {
  margin-top: 8px;
}
.page-article .main-content article .article-body img,
.page-article .main-content article .article-body iframe {
  margin: 24px 0;
}
.page-article .main-content article .article-body iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.page-article .main-content article .article-body img {
  height: auto;
  max-width: 100%;
}
.page-article .main-content article .article-body ul + p,
.page-article .main-content article .article-body ol + p {
  margin-top: 16px;
}
.page-article .main-content article .article-body ul + h2,
.page-article .main-content article .article-body ol + h2 {
  margin-top: 32px;
}
/* Style <hr> as a subtle branded separator so authors don't need to use <p>&nbsp;</p> as a workaround for section breaks. */
.page-article .main-content article .article-body hr {
  border: 0;
  border-top: 1px solid #E3E5EB;
  margin: 32px 0;
}
.page-article .main-content article .article-footer {
  padding: 40px 0 56px;
  box-shadow: inset 0 1px 0 0 rgba(20, 31, 51, 0.09), inset 0 -0 0 0 rgba(20, 31, 51, 0.09), inset 0 0 0 0 rgba(20, 31, 51, 0.09), inset -0 0 0 0 rgba(20, 31, 51, 0.09);
}
.page-article .main-content article .article-footer .vote-question {
  margin-bottom: 12px;
}
.page-article .main-content article .article-footer .article-vote-controls {
  gap: 8px;
  margin-right: 16px;
}
.page-article .main-content article .article-footer .article-vote-controls:not([class*=hidden]) {
  display: flex;
}
.page-article .main-content article .article-footer .article-vote-controls .article-vote-up,
.page-article .main-content article .article-footer .article-vote-controls .article-vote-down {
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: rgba(20, 31, 51, 0.04);
  transition: 120ms;
}
.page-article .main-content article .article-footer .article-vote-controls .article-vote-up:not([class*=hidden]),
.page-article .main-content article .article-footer .article-vote-controls .article-vote-down:not([class*=hidden]) {
  display: flex;
}
@media (hover: hover) {
  .page-article .main-content article .article-footer .article-vote-controls .article-vote-up:hover,
  .page-article .main-content article .article-footer .article-vote-controls .article-vote-down:hover {
    transform: scale(1.08);
    transition: all 120ms;
  }
}
.page-article .main-content article .article-footer .article-vote-controls .article-vote-up::after {
  content: "";
  display: block;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: #ACB0B7;
  -webkit-mask: var(--ic-like);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask: var(--ic-like);
  mask-repeat: no-repeat;
  mask-size: 100%;
}
.page-article .main-content article .article-footer .article-vote-controls .article-vote-up.article-voted {
  background-color: rgba(54, 81, 241, 0.08);
}
.page-article .main-content article .article-footer .article-vote-controls .article-vote-up.article-voted::after {
  content: "";
  display: block;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: #7C8DF5;
  -webkit-mask: var(--ic-like);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask: var(--ic-like);
  mask-repeat: no-repeat;
  mask-size: 100%;
}
.page-article .main-content article .article-footer .article-vote-controls .article-vote-down::after {
  content: "";
  display: block;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: #ACB0B7;
  -webkit-mask: var(--ic-like);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask: var(--ic-like);
  mask-repeat: no-repeat;
  mask-size: 100%;
  transform: rotate(180deg);
}
.page-article .main-content article .article-footer .article-vote-controls .article-vote-down.article-voted {
  background-color: rgba(20, 31, 51, 0.09);
}
.page-article .main-content article .article-footer .article-vote-controls .article-vote-down.article-voted::after {
  content: "";
  display: block;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: #666D7A;
  -webkit-mask: var(--ic-like);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask: var(--ic-like);
  mask-repeat: no-repeat;
  mask-size: 100%;
}
@media (max-width: 900px) {
  .page-article .main-content article {
    padding: 24px 20px;
    border-radius: 20px;
  }
}
@media (max-width: 500px) {
  .page-article .main-content article .article-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .page-article .main-content article .article-footer:not([class*=hidden]) {
    display: flex;
  }
}

.page-article .main-content aside {
  padding-left: 40px;
}
.page-article .main-content aside section {
  padding-top: 56px;
}
.page-article .main-content aside section h3 {
  color: #ACB0B7;
  margin-bottom: 24px;
}
.page-article .main-content aside section li + li {
  margin-top: 8px;
}
.page-article .main-content aside section a {
  display: block;
}
.page-article .main-content aside section a:hover {
  opacity: 0.5;
}
@media (max-width: 900px) {
  .page-article .main-content aside {
    padding-left: 0;
  }
  .page-article .main-content aside section {
    padding-top: 40px;
  }
}

.page-category .page-content {
  padding: 48px 0;
}
.page-category .page-content .page-title {
  margin-bottom: 48px;
}
.page-category .page-content .section-wrapper + .section-wrapper {
  margin-top: 24px;
}
.page-category .page-content .section-card {
  padding: 8px 0;
  background-color: #FFF;
  border-radius: 20px;
}
.page-section .page-content {
  padding: 48px 0;
}
.page-section .page-content .page-title {
  margin-bottom: 48px;
}
.page-section .page-content .section-card {
  padding: 8px 0;
  background-color: #FFF;
  border-radius: 20px;
}
.page-search .search-results {
  padding: 48px 0;
}
.page-search .search-results .page-title {
  margin-bottom: 48px;
}
.page-search .search-results .section-card {
  padding: 8px 0;
  background-color: #FFF;
  border-radius: 20px;
}
.page-search .search-results .search-result {
  padding: 16px 16px 18px 24px;
}
.page-search .search-results .search-result .result-votes {
  color: #5E73F3;
  margin-left: 16px;
  align-items: center;
}
.page-search .search-results .search-result .result-votes:not([class*=hidden]) {
  display: flex;
}
.page-search .search-results .search-result .result-votes::before {
  content: "";
  display: block;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: var(--ic-like);
  background-size: 100%;
  margin-right: 4px;
}
.page-search .search-results .search-result .result-description {
  color: #434B5B;
  margin: 8px 0 12px;
}
.page-search .search-results .search-result .result-meta {
  color: #898F99;
}
.page-search .search-results .search-result:not(:last-child) {
  position: relative;
}
.page-search .search-results .search-result:not(:last-child)::after {
  content: "";
  display: block;
  width: calc(100% - 24px);
  height: 2px;
  position: absolute;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 0 0 #F3F3F4, inset 0 -1.5px 0 0 #F3F3F4, inset 0 0 0 0 #F3F3F4, inset -0 0 0 0 #F3F3F4;
}

.flex:not([class*=hidden]), .flex-repel:not([class*=hidden]) {
  display: flex;
}
.flex-repel {
  justify-content: space-between;
  align-items: flex-start;
}
.flex-repel:not([class*=hidden]) {
  display: flex;
}
.flex.align-center, .align-center.flex-repel {
  align-items: center;
}
.flex.justify-center, .justify-center.flex-repel {
  justify-content: center;
}

.grid {
  display: grid;
  grid-gap: 20px;
  row-gap: 20px;
}
.grid.col-3 {
  display: grid;
  grid-gap: 20px;
  row-gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
}

.container, .container-6 {
  width: 100%;
  max-width: 1220px;
  padding: 0 20px;
  margin-inline: auto;
}
.container-6 {
  width: 100%;
  max-width: 620px;
}

.fade-content {
  opacity: 0;
  transition: opacity 600ms 200ms;
}

/*# sourceMappingURL=style.css.map */