/*
  Shared site design system for every page outside the consulting templates.

  The consulting pages remain the visual reference and keep their own isolated
  stylesheets. This file owns the common shell, type, content, surfaces, actions,
  and static code presentation for the rest of the site.
*/

body.af-site-template {
  --af-site-font: "Inter", sans-serif;
  --af-site-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --af-site-text: #ffffff;
  --af-site-text-muted: rgba(255, 255, 255, 0.78);
  --af-site-text-faint: rgba(255, 255, 255, 0.62);
  --af-site-surface: rgba(255, 255, 255, 0.055);
  --af-site-surface-strong: rgba(255, 255, 255, 0.08);
  --af-site-border: rgba(255, 255, 255, 0.14);
  --af-site-accent: rgba(184, 255, 129, 0.88);
  --af-site-radius: 8px;
  --af-site-width: 76rem;
  --af-site-reading-width: 52rem;
  --af-site-wide-reading-width: 66rem;
  --af-site-gutter: 1rem;
  --af-site-section-gap: clamp(3rem, 7vw, 6rem);
  color: var(--af-site-text);
  font-family: var(--af-site-font);
  overflow-x: hidden;
}

body.af-site-template .g-drawer {
  overflow: hidden;
}

body.af-site-template,
body.af-site-template *,
body.af-site-template *::before,
body.af-site-template *::after {
  box-sizing: border-box;
}

body.af-site-template .g-load-transition__container {
  animation: none;
  opacity: 1;
}

body.af-site-template .g-load-transition__overlay {
  display: none;
}

body.af-site-template :is(
  .g-wrapper,
  .g-core-header__container,
  .g-post-header__container,
  .g-post-grid__container,
  .g-core-grid__container,
  .g-newsletter__container,
  .g-footer__container
) {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--af-site-width);
  padding-left: var(--af-site-gutter);
  padding-right: var(--af-site-gutter);
  width: 100%;
}

body.af-site-template :is(.g-core-content, .g-post-content) {
  color: var(--af-site-text);
  font-family: var(--af-site-font);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--af-site-gutter);
  padding-right: var(--af-site-gutter);
  width: 100%;
}

body.af-site-template .g-core-content {
  max-width: var(--af-site-width);
}

body.af-site-template .g-post-content {
  max-width: var(--af-site-reading-width);
}

body.af-site-template:is(.legal-page, .newsletter-page, .trademark-page) .g-core-content {
  max-width: var(--af-site-reading-width);
}

body.af-site-template :is(.g-core-header__main, .g-post-header__main) {
  max-width: var(--af-site-reading-width);
}

body.af-site-template :is(
  .company-title-overlay,
  .download-title-overlay,
  .error-title-overlay,
  .newsletter-title-overlay,
  .partner-title-overlay,
  .trademark-title-overlay
) {
  padding-left: max(var(--af-site-gutter), calc((100% - var(--af-site-width)) / 2 + var(--af-site-gutter))) !important;
  padding-right: max(var(--af-site-gutter), calc((100% - var(--af-site-width)) / 2 + var(--af-site-gutter))) !important;
}

body.af-site-template.af-simple-core-hero .core-title-overlay {
  height: 100% !important;
  padding-left: max(var(--af-site-gutter), calc((100% - var(--af-site-width)) / 2 + var(--af-site-gutter))) !important;
  padding-right: max(var(--af-site-gutter), calc((100% - var(--af-site-width)) / 2 + var(--af-site-gutter))) !important;
}

body.af-site-template.af-standard-page {
  background: #050505;
}

body.af-site-template.af-standard-page .g-main-container {
  background: transparent;
}

body.af-site-template.af-standard-page .g-core-content {
  padding-bottom: clamp(4rem, 7vw, 6rem);
  padding-top: clamp(3rem, 6vw, 4.75rem);
}

body.af-site-template.af-standard-page [id] {
  scroll-margin-top: 6.5rem;
}

body.af-site-template.af-standard-page .g-core-header.af-standard-hero {
  align-items: start;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 50%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.76) 100%),
    var(--core-header-bg-image) !important;
  background-position: center var(--af-standard-hero-bg-y, 50%) !important;
  background-size: cover !important;
  display: grid;
  height: auto !important;
  min-height: clamp(28rem, 64svh, 40rem) !important;
  overflow: hidden;
  padding: clamp(7.5rem, 17svh, 10.5rem) 0 clamp(4rem, 8svh, 5.5rem) !important;
  position: relative;
}

body.af-site-template.af-standard-page .g-core-header.af-standard-hero .g-wrapper {
  display: none;
}

body.af-site-template.af-standard-page .af-standard-hero__content {
  margin: 0 auto;
  max-width: var(--af-site-width);
  padding-left: var(--af-site-gutter);
  padding-right: var(--af-site-gutter);
  position: relative;
  width: 100%;
  z-index: 2;
}

body.af-site-template.af-standard-page .af-standard-hero__kicker {
  color: var(--af-site-accent) !important;
  font-family: var(--af-site-font) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
  margin: 0 0 1rem !important;
  text-transform: uppercase;
}

body.af-site-template.af-standard-page .af-standard-hero__content .g-core-header__title {
  font-size: 4.4rem !important;
  line-height: 1.03 !important;
  margin: 0 !important;
  max-width: 12.5ch;
}

body.af-site-template.af-standard-page .af-standard-hero__lede {
  color: var(--af-site-text-muted) !important;
  font-family: var(--af-site-font) !important;
  font-size: 1.16rem !important;
  line-height: 1.65 !important;
  margin: 1.2rem 0 0 !important;
  max-width: 46rem;
}

body.af-site-template.af-standard-page .af-standard-hero__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.75rem;
}

body.af-site-template.af-standard-page .af-standard-hero__link {
  align-items: center;
  color: #fff !important;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 700;
  min-height: 2.9rem;
  text-decoration-color: rgba(255, 255, 255, 0.48) !important;
  text-underline-offset: 0.18em;
}

body.af-site-template.af-standard-page .af-standard-hero__link:hover,
body.af-site-template.af-standard-page .af-standard-hero__link:focus-visible {
  text-decoration-color: var(--af-site-accent) !important;
}

body.af-site-template.af-standard-page .g-core-header.af-standard-hero .g-home-slide__bottom {
  bottom: 1.5rem;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 3;
}

body.af-site-template.af-standard-page .g-core-header.af-standard-hero .g-home-scroll {
  opacity: 0.78;
}

body.af-site-template :is(.g-core-header__title, .g-post-header__title) {
  color: var(--af-site-text) !important;
  font-family: var(--af-site-font) !important;
  font-size: 3rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  overflow-wrap: anywhere;
}

body.af-site-template :is(.g-core-header__excerpt, .g-post-header__excerpt) {
  color: var(--af-site-text-muted) !important;
  font-family: var(--af-site-font) !important;
  font-size: 1.2rem !important;
  line-height: 1.625 !important;
  max-width: 48rem;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--af-site-text) !important;
  font-family: var(--af-site-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(h1) {
  font-size: 2.5rem !important;
  line-height: 1.12 !important;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(h2) {
  font-size: 2rem !important;
  line-height: 1.3 !important;
  margin-bottom: 1rem;
  margin-top: 2.75rem;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(h3) {
  font-size: 1.35rem !important;
  line-height: 1.3 !important;
  margin-bottom: 0.75rem;
  margin-top: 2.25rem;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(h4, h5, h6) {
  font-size: 1.08rem !important;
  line-height: 1.4 !important;
  margin-bottom: 0.6rem;
  margin-top: 1.75rem;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(p, li, dd) {
  color: var(--af-site-text-muted) !important;
  font-family: var(--af-site-font) !important;
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(p) {
  margin-bottom: 1.3rem;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(ul, ol) {
  color: var(--af-site-text-muted) !important;
  margin-bottom: 1.5rem;
  margin-top: 0.75rem;
  padding-left: 1.35rem;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(li + li) {
  margin-top: 0.4rem;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(strong, b) {
  color: var(--af-site-text) !important;
  font-weight: 700 !important;
}

body.af-site-template :is(.g-core-content, .g-post-content) a:not(.g-button):not(.kg-btn) {
  color: var(--af-site-text) !important;
  text-decoration-color: rgba(255, 255, 255, 0.58) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em !important;
}

body.af-site-template :is(.g-core-content, .g-post-content) a:not(.g-button):not(.kg-btn):hover {
  text-decoration-color: var(--af-site-accent) !important;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(hr) {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--af-site-border) !important;
  height: 0 !important;
  margin: 3rem 0 !important;
  max-width: none !important;
  padding: 0 !important;
  position: static !important;
  width: 100% !important;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(hr)::before,
body.af-site-template :is(.g-core-content, .g-post-content) :where(hr)::after {
  content: none !important;
  display: none !important;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(blockquote) {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--af-site-border) !important;
  border-left: 3px solid var(--af-site-accent) !important;
  border-radius: var(--af-site-radius) !important;
  color: var(--af-site-text) !important;
  margin: 2rem 0;
  padding: 1.2rem 1.35rem !important;
}

body.af-site-template :is(.g-core-content, .g-post-content) blockquote > :last-child {
  margin-bottom: 0;
}

body.af-site-template :is(
  .g-post-card,
  .g-core-card,
  .g-search-result,
  .g-search-recent,
  .g-core-content .kg-bookmark-container,
  .g-core-content .kg-toggle-card,
  .g-core-content .kg-product-card-container,
  .g-post-content .kg-bookmark-container,
  .g-post-content .kg-toggle-card,
  .g-post-content .kg-product-card-container,
  .g-auth-form,
  .g-member-plan,
  .g-account-box
) {
  background: var(--af-site-surface) !important;
  border: 1px solid var(--af-site-border) !important;
  border-radius: var(--af-site-radius) !important;
  box-shadow: none !important;
}

body.af-site-template :is(.g-post-card, .g-core-card, .g-search-result, .g-search-recent) {
  overflow: hidden;
}

body.af-site-template :is(.g-post-card__title, .g-core-card__title, .g-search-result__title, .g-search-recent__title) {
  color: var(--af-site-text) !important;
  font-family: var(--af-site-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

body.af-site-template :is(.g-post-card__excerpt, .g-core-card__excerpt, .g-post-card__meta, .g-core-card__meta) {
  color: var(--af-site-text-muted) !important;
  font-family: var(--af-site-font) !important;
}

body.af-site-template :is(
  a.g-button,
  button.g-button,
  .button,
  .btn,
  .g-core-content .kg-btn,
  .g-post-content .kg-btn,
  .kg-header-card-button,
  .kg-product-card-button,
  .core-title-overlay__cta,
  .main-menu-cta a,
  input[type="submit"]
) {
  background: #fff !important;
  border: 1px solid #fff !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #000 !important;
  font-family: var(--af-site-font) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  padding: 0.9rem 1.4rem !important;
  text-decoration: none !important;
}

body.af-site-template :is(
  a.g-button,
  button.g-button,
  .button,
  .btn,
  .g-core-content .kg-btn,
  .g-post-content .kg-btn,
  .kg-header-card-button,
  .kg-product-card-button,
  .core-title-overlay__cta,
  .main-menu-cta a,
  input[type="submit"]
):hover {
  background: transparent !important;
  color: #fff !important;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(img, video, iframe) {
  height: auto;
  max-width: 100%;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(img) {
  border-radius: var(--af-site-radius) !important;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(figure) {
  margin-left: 0;
  margin-right: 0;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(figcaption) {
  color: var(--af-site-text-faint);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 0.7rem;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(table) {
  border-collapse: collapse;
  color: var(--af-site-text-muted);
  display: block;
  margin: 2rem 0;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(th, td) {
  border: 1px solid var(--af-site-border);
  padding: 0.8rem 0.9rem;
  text-align: left;
  vertical-align: top;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(th) {
  background: var(--af-site-surface-strong);
  color: var(--af-site-text);
  font-weight: 600;
}

body.af-site-template :is(.g-core-content, .g-post-content) :where(input, textarea, select) {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid var(--af-site-border) !important;
  border-radius: 6px !important;
  color: var(--af-site-text) !important;
  font-family: var(--af-site-font) !important;
}

body.af-site-template :is(.g-core-content, .g-post-content) code:not(pre code):not(.af-code) {
  background: rgba(184, 255, 129, 0.1) !important;
  border: 1px solid rgba(184, 255, 129, 0.2) !important;
  border-radius: 5px !important;
  color: #d7ff9d !important;
  font-family: var(--af-site-mono) !important;
  font-size: 0.9em !important;
  padding: 0.1em 0.34em !important;
  white-space: break-spaces;
}

body.af-site-template :is(.g-core-content, .g-post-content) pre.af-code-block {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)), #05070c !important;
  border: 1px solid rgba(184, 255, 129, 0.18) !important;
  border-radius: var(--af-site-radius) !important;
  color: #eaf2ff !important;
  font-family: var(--af-site-mono) !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
  margin: 1.75rem 0 !important;
  overflow: auto !important;
  padding: 3rem 1.25rem 1.25rem !important;
  position: relative;
  tab-size: 2 !important;
  white-space: pre !important;
}

body.af-site-template :is(.g-core-content, .g-post-content) pre.af-code-block::before {
  color: rgba(255, 255, 255, 0.58);
  content: attr(data-code-language);
  font-family: var(--af-site-font);
  font-size: 0.7rem;
  font-weight: 700;
  left: 1.25rem;
  letter-spacing: 0.08em;
  line-height: 1;
  position: absolute;
  text-transform: uppercase;
  top: 1.05rem;
}

body.af-site-template :is(.g-core-content, .g-post-content) pre.af-code-block > code,
body.af-site-template :is(.g-core-content, .g-post-content) pre.af-code-block > .highlight {
  background: transparent !important;
  border: 0 !important;
  color: inherit;
  display: block;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  min-width: max-content;
  padding: 0 !important;
}

body.af-site-template :is(.g-core-content, .g-post-content) pre.af-code-block .hljs {
  background: transparent !important;
  padding: 0 !important;
}

body.af-site-template :is(.g-core-content, .g-post-content) pre.af-code-block--prehighlighted :is(.c, .c1, .cm, .cp) {
  color: #9aa9bd;
  font-style: italic;
}

body.af-site-template :is(.g-core-content, .g-post-content) pre.af-code-block--prehighlighted :is(.k, .kc, .kd, .kn, .kp, .kr, .kt) {
  color: #ffcc66;
}

body.af-site-template :is(.g-core-content, .g-post-content) pre.af-code-block--prehighlighted :is(.nf, .fm) {
  color: #b8f06a;
}

body.af-site-template :is(.g-core-content, .g-post-content) pre.af-code-block--prehighlighted :is(.s, .s1, .s2, .sb, .sc, .sd) {
  color: #ffb86b;
}

body.af-site-template :is(.g-core-content, .g-post-content) pre.af-code-block--prehighlighted :is(.m, .mi, .mf, .mh) {
  color: #b8a7ff;
}

body.af-site-template :is([class^="icon-"], [class*=" icon-"]) {
  font-family: "Galerie" !important;
}

body.af-site-template :is(.af-code-hero, .af-code-hero *, .core-title-overlay__statement--code, .core-title-overlay__statement--code *) {
  font-family: var(--af-site-mono) !important;
}

@media (min-width: 45rem) {
  body.af-site-template {
    --af-site-gutter: 2rem;
  }
}

@media (max-width: 44.99rem) {
  body.af-site-template :is(.g-core-header__title, .g-post-header__title) {
    font-size: 2.15rem !important;
    line-height: 1.12 !important;
  }

  body.af-site-template.af-standard-page .g-core-header.af-standard-hero {
    min-height: 30rem !important;
    padding-bottom: 4.5rem !important;
    padding-top: 7rem !important;
  }

  body.af-site-template.af-standard-page .af-standard-hero__content .g-core-header__title {
    font-size: 2.35rem !important;
    line-height: 1.08 !important;
    max-width: 12ch;
  }

  body.af-site-template.af-standard-page .af-standard-hero__lede {
    font-size: 1.02rem !important;
    line-height: 1.6 !important;
  }

  body.af-site-template :is(.g-core-content, .g-post-content) :where(h1) {
    font-size: 2rem !important;
  }

  body.af-site-template :is(.g-core-content, .g-post-content) :where(h2) {
    font-size: 1.65rem !important;
  }

  body.af-site-template :is(.g-core-content, .g-post-content) :where(h3) {
    font-size: 1.2rem !important;
  }

  body.af-site-template :is(.g-core-content, .g-post-content) :where(p, li, dd) {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  body.af-site-template :is(.g-core-content, .g-post-content) pre.af-code-block {
    border-left: 0 !important;
    border-radius: 0 !important;
    border-right: 0 !important;
    margin-left: calc(var(--af-site-gutter) * -1) !important;
    margin-right: calc(var(--af-site-gutter) * -1) !important;
    padding-left: var(--af-site-gutter) !important;
    padding-right: var(--af-site-gutter) !important;
  }

  body.af-site-template :is(.g-core-content, .g-post-content) pre.af-code-block::before {
    left: var(--af-site-gutter);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.af-site-template *,
  body.af-site-template *::before,
  body.af-site-template *::after {
    scroll-behavior: auto !important;
  }
}