/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *





















 */

html {
  margin: 0;
  height: 100%;
}

body {
  margin: 0;
  background: var(--ds-color-gray-700);
  color: var(--ds-color-white);
  font: var(--ds-font-body-s);
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: var(--ds-color-primary-500);
}

a,
button {
  transition: color 150ms ease-in-out, background 150ms ease-in-out,
    border-color 150ms ease-in-out;
}

input,
textarea,
select {
  font: inherit;
}

img {
  max-width: 100%;
}

ul {
  padding-left: 1.2em;
}

.modal {
  display: none;
}

body.embed > *,
body.embed .ds-article-back-button,
body.embed gh-cta,
body.embed .ds-blog-related {
  display: none;
}

body.embed > main {
  display: block;
}
/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+css-extras&plugins=line-numbers */
code[class*='language-'],
pre[class*='language-'] {
  color: var(--ds-color-gray-200);
  background: 0 0;
  font-family: 'Roboto Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
    monospace;
  font-size: 14px;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
pre[class*='language-'] {
  padding: 18px;
  margin: 48px 0;
  overflow: auto;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
  background: var(--ds-color-gray-900);
  border-radius: 12px;
}
:not(pre) > code[class*='language-'] {
  white-space: normal;
}
.token.block-comment,
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
  color: #999;
}
.token.punctuation {
  color: var(--ds-color-gray-200);
}
.token.attr-name,
.token.deleted,
.token.namespace,
.token.tag {
  color: #e2777a;
}
.token.function-name {
  color: #6196cc;
}
.token.boolean,
.token.function,
.token.number {
  color: #f08d49;
}
.token.class-name,
.token.constant,
.token.property,
.token.symbol {
  color: #f8c555;
}
.token.atrule,
.token.builtin,
.token.important,
.token.keyword,
.token.selector {
  color: #cc99cd;
}
.token.attr-value,
.token.char,
.token.regex,
.token.string,
.token.variable {
  color: #7ec699;
}
.token.entity,
.token.operator,
.token.url {
  color: #67cdcc;
}
.token.bold,
.token.important {
  font-weight: 700;
}
.token.italic {
  font-style: italic;
}
.token.entity {
  cursor: help;
}
.token.inserted {
  color: green;
}
pre[class*='language-'].line-numbers {
  position: relative;
  padding-left: 64px;
  counter-reset: linenumber;
}

pre[class*='language-'].line-numbers:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  bottom: 0;
  background: var(--ds-color-gray-700);
}
pre[class*='language-'].line-numbers > code {
  position: relative;
  white-space: inherit;
}
.line-numbers .line-numbers-rows {
  display: block;
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -64px;
  width: 48px;
  letter-spacing: -1px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
}
.line-numbers-rows > span:before {
  content: counter(linenumber);
  color: var(--ds-color-gray-300);
  display: block;
  padding-right: 16px;
  text-align: right;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/Roboto-Regular-20000d75440612ea9275ebd2723e3fa8730d6bbfd445ed31bad745bec6164d8b.ttf);
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/Roboto-Medium-6dd38ee27a77b8ce1172b15c8fa10ea0e588a54505741f5d397ebf466c199fa6.ttf);
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/RobotoCondensed-Regular-515b3a9526fc43b37c4ecbfdae2409ff89bd04fe03d83dfa9c51e0f40630e777.ttf);
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/RobotoCondensed-Bold-7cc1d8d17b69a7127155cb03e5f220a6c536432d7c5d6ccf118712f08a0d7285.ttf);
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/RobotoMono-Regular-19c9d50fa97b4fb7e689f152834cf8211c6c27d47d6c9a76c611bc048bf031c2.ttf);
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/RobotoMono-Italic-f0b2e383a6acdf8de6e1a3216496195f3e8d6fd5f132e108015992e511111d70.ttf);
}
html {
  /* Colors */

  --ds-color-gray-900: #12121c;
  --ds-color-gray-800: #202225;
  --ds-color-gray-700: #2f3136;
  --ds-color-gray-600: #3f4146;
  --ds-color-gray-500: #636468;
  --ds-color-gray-400: #88898c;
  --ds-color-gray-300: #b9bbbe;
  --ds-color-gray-200: #d9dbde;
  --ds-color-white: white;

  --ds-color-primary-700: #0077cc;
  --ds-color-primary-500: #00aef0;
  --ds-color-secondary-500: #00b0ff;

  --ds-color-newsletter-500: #ac59b5;

  --ds-color-success-700: #13770c;
  --ds-color-success-500: #43ac3c;
  --ds-color-success-400: #6bd364;
  --ds-color-warning-500: #ffbb00;
  --ds-color-error-500: #ff4500;
  --ds-color-error-400: #ff5d35;

  --ds-color-danger-700: #e01a3b;
  --ds-color-warning-700: #ffbb00;

  --ds-color-wtm-700: #533ed6;
  --ds-color-wtm-500: #715dee;
  --ds-color-wtm-400: #9280ff;

  --ds-color-wtm-violet: #db70e6;
  --ds-color-wtm-teal: #80ffe8;
  --ds-color-wtm-pink: #ff80db;

  --ds-color-gradient-newsletter: linear-gradient(
    103.06deg,
    #ac59b5 0%,
    #129bf2 74.57%
  );

  --ds-color-gradient-browser: linear-gradient(
    141.55deg,
    #ff7e74 15.08%,
    #00aef0 75.66%
  );

  --ds-color-gradient-home: linear-gradient(
    141.55deg,
    #00aef0 15.08%,
    #ff7e74 75.66%
  );

  --ds-color-gradient-enterprise: linear-gradient(
    141.55deg,
    #129bf2 0%,
    #a276ff 100%
  );

  --ds-color-gradient-gray: linear-gradient(
    180deg,
    var(--ds-color-gray-700) 0%,
    var(--ds-color-gray-800) 100%
  );

  --ds-color-gradient-wtm: linear-gradient(
    152deg,
    #8572ff 8.16%,
    #01aef1 92.34%
  );

  /* Fonts */

  --ds-font-family-display: 'Roboto Condensed', sans-serif;
  --ds-font-family-headline: var(--ds-font-family-display);
  --ds-font-family-button: var(--ds-font-family-display);

  --ds-font-family-body: 'Roboto', sans-serif;
  --ds-font-family-label: var(--ds-font-family-body);

  --ds-font-display-3xl: 700 40px / 40px var(--ds-font-family-display);
  --ds-font-display-2xl: 700 40px / 40px var(--ds-font-family-display);
  --ds-font-display-xl: 700 32px / 32px var(--ds-font-family-display);
  --ds-font-display-l: 700 32px / 32px var(--ds-font-family-display);
  --ds-font-display-m: 700 24px / 24px var(--ds-font-family-display);
  --ds-font-display-s: 700 20px / 20px var(--ds-font-family-display);
  --ds-font-display-xs: 700 18px / 18px var(--ds-font-family-display);
  --ds-font-display-2xs: 700 16px / 16px var(--ds-font-family-display);

  --ds-font-headline-xl: 400 32px / 38px var(--ds-font-family-headline);
  --ds-font-headline-l: 400 26px / 30px var(--ds-font-family-headline);
  --ds-font-headline-m: 400 24px / 28px var(--ds-font-family-headline);
  --ds-font-headline-s2: 400 22px / 26px var(--ds-font-family-headline);
  --ds-font-headline-s: 400 20px / 24px var(--ds-font-family-headline);
  --ds-font-headline-xs: 400 20px / 24px var(--ds-font-family-headline);
  --ds-font-headline-2xs: 400 16px / 20px var(--ds-font-family-headline);

  --ds-font-blockquote: 400 20px / 28px var(--ds-font-family-headline);

  --ds-font-button-m: 700 18px / 20px var(--ds-font-family-button);
  --ds-font-button-s: 700 16px / 18px var(--ds-font-family-button);

  --ds-font-label-2xl: 500 20px / 24px var(--ds-font-family-label);
  --ds-font-label-xl: 500 18px / 22px var(--ds-font-family-label);
  --ds-font-label-l: 500 16px / 20px var(--ds-font-family-label);
  --ds-font-label-m: 500 14px / 18px var(--ds-font-family-label);
  --ds-font-label-s: 500 12px / 16px var(--ds-font-family-label);
  --ds-font-label-xs: 500 12px / 16px var(--ds-font-family-label);

  --ds-font-body-2xl: 400 20px / 28px var(--ds-font-family-body);
  --ds-font-body-xl: 400 18px / 26px var(--ds-font-family-body);
  --ds-font-body-l: 400 16px / 24px var(--ds-font-family-body);
  --ds-font-body-m: 400 14px / 20px var(--ds-font-family-body);
  --ds-font-body-s: 400 12px / 18px var(--ds-font-family-body);
  --ds-font-body-xs: 400 12px / 18px var(--ds-font-family-body);

  /* Layout Sizing */

  --ds-layout-spacing-5xl: 64px;
  --ds-layout-spacing-4xl: 40px;
  --ds-layout-spacing-3xl: 64px;
  --ds-layout-spacing-2xl: 40px;
  --ds-layout-spacing-xl: 32px;
  --ds-layout-spacing-l: 16px;
  --ds-layout-spacing-m: 16px;
  --ds-layout-spacing-s: 8px;
  --ds-layout-spacing-xs: 4px;

  --ds-layout-spacing-section: 16px;

  --ds-layout-padding: 20px;

  --ds-layout-container-max-width: 100%;

  --ds-layout-z-index-modal: 1000;

  --ds-text-transform-uppercase: uppercase;

  /* Global overwrites */
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}

@media screen and (min-width: 768px) {
  html {
    --ds-font-display-3xl: 700 88px / 88px var(--ds-font-family-display);
    --ds-font-display-2xl: 700 72px / 72px var(--ds-font-family-display);
    --ds-font-display-xl: 700 58px / 58px var(--ds-font-family-display);
    --ds-font-display-l: 700 40px / 40px var(--ds-font-family-display);
    --ds-font-display-m: 700 32px / 32px var(--ds-font-family-display);
    --ds-font-display-s: 700 24px / 24px var(--ds-font-family-display);
    --ds-font-display-xs: 700 20px / 20px var(--ds-font-family-display);
    --ds-font-display-2xs: 700 16px / 16px var(--ds-font-family-display);

    --ds-font-headline-xl: 400 58px / 64px var(--ds-font-family-headline);
    --ds-font-headline-l: 400 40px / 48px var(--ds-font-family-headline);
    --ds-font-headline-m: 400 32px / 38px var(--ds-font-family-headline);
    --ds-font-headline-s2: 400 28px / 32px var(--ds-font-family-headline);
    --ds-font-headline-s: 400 24px / 28px var(--ds-font-family-headline);
    --ds-font-headline-xs: 400 20px / 24px var(--ds-font-family-headline);
    --ds-font-headline-2xs: 400 16px / 20px var(--ds-font-family-headline);

    --ds-font-blockquote: 400 24px / 32px var(--ds-font-family-headline);

    --ds-font-button-m: 700 22px / 24px var(--ds-font-family-button);
    --ds-font-button-s: 700 18px / 20px var(--ds-font-family-button);

    --ds-font-label-2xl: 500 22px / 26px var(--ds-font-family-label);
    --ds-font-label-xl: 500 20px / 24px var(--ds-font-family-label);
    --ds-font-label-l: 500 18px / 22px var(--ds-font-family-label);
    --ds-font-label-m: 500 16px / 20px var(--ds-font-family-label);
    --ds-font-label-s: 500 14px / 18px var(--ds-font-family-label);
    --ds-font-label-xs: 500 12px / 16px var(--ds-font-family-label);

    --ds-font-body-2xl: 400 22px / 30px var(--ds-font-family-body);
    --ds-font-body-xl: 400 20px / 28px var(--ds-font-family-body);
    --ds-font-body-l: 400 18px / 26px var(--ds-font-family-body);
    --ds-font-body-m: 400 16px / 24px var(--ds-font-family-body);
    --ds-font-body-s: 400 14px / 20px var(--ds-font-family-body);
    --ds-font-body-xs: 400 12px / 18px var(--ds-font-family-body);

    --ds-layout-spacing-l: 24px;
    --ds-layout-spacing-section: 40px;

    --ds-layout-container-max-width: 768px;
  }
}

@media screen and (min-width: 992px) {
  html {
    --ds-layout-container-max-width: 958px;
    --ds-layout-spacing-4xl: 80px;
    --ds-layout-spacing-5xl: 80px;
  }
}

@media screen and (min-width: 1280px) {
  html {
    --ds-layout-container-max-width: 1240px;
  }
}

/* Typography Classes */

.ds-display-3xl {
  font: var(--ds-font-display-3xl);
}
.ds-display-2xl {
  font: var(--ds-font-display-2xl);
}
.ds-display-xl {
  font: var(--ds-font-display-xl);
}
.ds-display-l {
  font: var(--ds-font-display-l);
}
.ds-display-m {
  font: var(--ds-font-display-m);
}
.ds-display-s {
  font: var(--ds-font-display-s);
}
.ds-display-xs {
  font: var(--ds-font-display-xs);
}
.ds-display-2xs {
  font: var(--ds-font-display-2xs);
}

.ds-display-3xl,
.ds-display-2xl,
.ds-display-xl,
.ds-display-l,
.ds-display-m,
.ds-display-s,
.ds-display-xs,
.ds-display-2xs {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  text-wrap: balance;
}

.ds-headline-xl {
  font: var(--ds-font-headline-xl);
}
.ds-headline-l {
  font: var(--ds-font-headline-l);
}
.ds-headline-m {
  font: var(--ds-font-headline-m);
}
.ds-headline-s2 {
  font: var(--ds-font-headline-s2);
}
.ds-headline-s {
  font: var(--ds-font-headline-s);
}
.ds-headline-xs {
  font: var(--ds-font-headline-xs);
}
.ds-headline-2xs {
  font: var(--ds-font-headline-2xs);
}

.ds-headline-xl,
.ds-headline-l,
.ds-headline-m,
.ds-headline-s2,
.ds-headline-s,
.ds-headline-xs,
.ds-headline-2xs {
  margin: 0;
  padding: 0;
}

.ds-button-m {
  font: var(--ds-font-button-m);
}
.ds-button-s {
  font: var(--ds-font-button-s);
}

.ds-button-m,
.ds-button-s {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-layout-spacing-s);
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.ds-label-2xl {
  font: var(--ds-font-label-2xl);
}
.ds-label-xl {
  font: var(--ds-font-label-xl);
}
.ds-label-l {
  font: var(--ds-font-label-l);
}
.ds-label-m {
  font: var(--ds-font-label-m);
}
.ds-label-s {
  font: var(--ds-font-label-s);
}
.ds-label-xs {
  font: var(--ds-font-label-xs);
}

.ds-label-2xl,
.ds-label-xl,
.ds-label-l,
.ds-label-m,
.ds-label-s,
.ds-label-xs {
  margin: 0;
  padding: 0;
}

.ds-body-2xl {
  font: var(--ds-font-body-2xl);
}
.ds-body-xl {
  font: var(--ds-font-body-xl);
}
.ds-body-l {
  font: var(--ds-font-body-l);
}
.ds-body-m {
  font: var(--ds-font-body-m);
}
.ds-body-s {
  font: var(--ds-font-body-s);
}
.ds-body-xs {
  font: var(--ds-font-body-xs);
}

.ds-body-2xl,
.ds-body-xl,
.ds-body-l,
.ds-body-m,
.ds-body-s {
  margin: 0;
  padding: 0;
}

.ds-body-2xl a,
.ds-body-xl a,
.ds-body-l a,
.ds-body-m a,
.ds-body-s a,
.ds-anchor {
  color: inherit;
  text-decoration: underline;
}

.ds-anchor:hover {
  color: var(--ds-color-white);
}

.ds-text-center {
  text-align: center;
}

.ds-text-right {
  text-align: right;
}

.ds-text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-text-clear-underscore {
  text-decoration: none;
}

.ds-nowrap {
  white-space: nowrap;
}

.ds-lowercase {
  text-transform: lowercase;
}

.ds-uppercase {
  text-transform: uppercase;
}

/* UI Components */

.ds-main {
  max-width: 100%;
  border-bottom: 2px solid var(--ds-color-gray-600);
  overflow-x: hidden;
}

.ds-section,
.ds-section-with-img {
  padding: 64px var(--ds-layout-padding);
}

@media screen and (min-width: 768px) {
  .ds-section,
  .ds-section-with-img {
    padding: 80px var(--ds-layout-padding);
  }
}

.ds-section-header {
  max-width: 800px;
  margin: 0 auto;
}

.ds-section-with-img {
  display: grid;
  justify-items: start;
  grid-gap: var(--ds-layout-spacing-l);
}

.ds-section-with-img img {
  max-width: 400px;
  width: 100%;
  display: block;
  grid-row: 1;
  justify-self: center;
}

@media screen and (min-width: 768px) {
  .ds-section-with-img {
    align-items: start;
    grid: 1fr / 3fr 2fr;
    grid-gap: var(--ds-layout-spacing-l);
  }

  .ds-section-with-img img {
    justify-self: end;
    grid-column: 2;
    margin-top: -40px;
  }
}

.ds-section-divider {
  border-bottom: 2px solid var(--ds-color-gray-800);
}

.ds-bg-gray-800 .ds-section-divider {
  border-color: var(--ds-color-gray-700);
}

.ds-section-cta {
  display: flex;
  flex-flow: column-reverse;
  position: relative;
  padding: var(--ds-layout-spacing-l) var(--ds-layout-padding);
}

.ds-section-cta h1,
.ds-section-cta h2,
.ds-section-cta p {
  max-width: max-content;
}

.ds-section-cta-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-section-cta-img > *:first-child {
  max-width: 170%;
}

.ds-section-cta-short .ds-section-cta-img > *:first-child {
  max-width: 100%;
}

@media screen and (min-width: 768px) {
  .ds-section-cta {
    flex-flow: column;
    justify-content: center;
    min-height: 480px;
    padding: 80px var(--ds-layout-padding);
  }

  .ds-section-cta-img > *:first-child {
    max-width: 100%;
  }

  .ds-section-cta > * {
    position: relative;
    z-index: 1;
    max-width: 70%;
  }

  .ds-section-cta-img {
    z-index: 0;
    position: absolute;
    left: 42%;
    top: 50%;
    transform: translateY(-50%);
    width: 880px;
    max-width: none;
  }

  .ds-section-cta-short {
    padding: 64px var(--ds-layout-padding);
    min-height: 410px;
  }

  .ds-section-cta-short .ds-section-cta-img > *:first-child {
    width: 480px;
  }
}

@media screen and (min-width: 992px) {
  .ds-section-cta {
    min-height: 700px;
  }

  .ds-section-cta > * {
    max-width: 60%;
  }

  .ds-section-cta-img {
    left: 30%;
    width: 1180px;
    max-width: none;
  }

  .ds-section-cta-short {
    padding: 80px var(--ds-layout-padding);
    min-height: 410px;
  }
}

@media screen and (min-width: 1280px) {
  .ds-section-cta {
    padding: 120px var(--ds-layout-padding);
  }

  .ds-section-cta > * {
    max-width: min(55%, 580px);
  }

  .ds-section-cta-img {
    max-width: none;
    left: 25%;
  }

  .ds-section-cta-short {
    padding: 80px var(--ds-layout-padding);
    min-height: 410px;
  }

  .ds-section-cta-short .ds-section-cta-img {
    width: 1300px;
  }
}

.ds-section-cta-icon-row {
  display: grid;
  grid: 1fr / min-content 1fr;
  grid-gap: var(--ds-layout-spacing-s);
  align-items: center;
  font: var(--ds-font-body-l);
}

.ds-section-cta-icon-row svg {
  width: 24px;
  height: 24px;
}

@media screen and (min-width: 768px) {
  .ds-section-cta-icon-row {
    grid-gap: var(--ds-layout-spacing-m);
    font: var(--ds-font-headline-s);
  }

  .ds-section-cta-icon-row svg {
    width: 32px;
    height: 32px;
  }
}

.ds-section-wave {
  height: 54px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
  color: var(--ds-color-gray-800);
  overflow: hidden;
}

.ds-section-wave-bottom svg {
  margin-top: -24px;
}

.ds-section-wave svg {
  flex: 0 0 auto;
  display: block;
}

.ds-section-two-columns {
  display: flex;
  flex-flow: column;
  gap: var(--ds-layout-spacing-l);
}

.ds-section-two-columns a {
  color: inherit;
  text-decoration: underline;
}

.ds-section-two-columns img {
  max-width: 580px;
}

@media screen and (min-width: 768px) {
  .ds-section-two-columns {
    display: grid;
    grid: auto / 1fr min(50%, 532px);
    gap: var(--ds-layout-spacing-4xl);
    justify-content: space-between;
    align-items: center;
  }

  .ds-section-two-columns-reverse {
    grid: auto / min(50%, 532px) 1fr;
    grid-auto-flow: column;
  }

  .ds-section-two-columns-reverse img {
    grid-column: 2;
  }
}

.ds-container {
  max-width: var(--ds-layout-container-max-width);
  margin: 0 auto;
  padding-left: var(--ds-layout-padding);
  padding-right: var(--ds-layout-padding);
}

.ds-container-short {
  --ds-layout-container-max-width: 640px;
}

.ds-list {
  margin: 0;
  padding: 0;
  padding-left: 32px;
}

.ds-list li {
  font: inherit;
  padding-left: 8px;
}

.ds-button,
.ds-button-large,
.ds-button-small {
  cursor: pointer;
  display: inline-flex;
  gap: var(--ds-layout-spacing-s);
  align-items: center;
  justify-content: center;
  vertical-align: top;
  text-transform: uppercase;
  text-align: center;
  color: var(--ds-color-white);
  background: var(--ds-color-primary-500);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--ds-color-primary-500);
}

@media screen and (min-width: 768px) {
  .ds-button,
  .ds-button-large {
    font: var(--ds-font-button-m);
  }
}

.ds-button:hover,
.ds-button-large:hover,
.ds-button-small:hover {
  background-color: var(--ds-color-primary-700);
  border: 1px solid var(--ds-color-primary-700);
}

.ds-button:focus,
.ds-button-large:focus,
.ds-button-small:focus {
  outline: none;
}

.ds-button:focus-visible,
.ds-button-large:focus-visible,
.ds-button-small:focus-visible {
  box-shadow: 0 0 0 4px var(--ds-color-gray-500);
}

.ds-button[disabled],
.ds-button-large[disabled],
.ds-button-small[disabled] {
  background: var(--ds-color-gray-600);
  border-color: var(--ds-color-gray-600);
  color: var(--ds-color-gray-400);
  cursor: not-allowed;
}

.ds-button[disabled]:hover,
.ds-button-large[disabled]:hover,
.ds-button-small[disabled]:hover {
  background: var(--ds-color-gray-600);
  border-color: var(--ds-color-gray-600);
  color: var(--ds-color-gray-400);
}

.ds-button {
  padding: 12px 20px;
  border-radius: 48px;
  font: var(--ds-font-button-s);
  width: 100%;
}

@media screen and (min-width: 768px) {
  .ds-button {
    padding: 13px 20px;
    border-radius: 40px;
    font: var(--ds-font-button-m);
    width: auto;
  }
}

.ds-button-small {
  padding: 8px 16px;
  border-radius: 24px;
  font: var(--ds-font-button-s);
}

.ds-button-small svg {
  width: 20px;
  height: 20px;
}

.ds-button-large {
  font: var(--ds-font-button-m);
  padding: 11px 24px;
  border-radius: 50px;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .ds-button-large {
    padding: 15px 24px;
    width: auto;
  }
}

input + .ds-button,
input + .ds-button-large {
  width: auto;
}

.ds-button-outline {
  background: var(--ds-color-gray-700);
  border: 1px solid var(--ds-color-gray-600);
}

.ds-button-outline:hover {
  border-color: white;
  background: var(--ds-color-gray-700);
}

.ds-button-outline.active {
  color: var(--ds-color-gray-800);
  background: var(--ds-color-white);
}

.ds-button-transparent {
  background: transparent;
  border: none;
  box-shadow: none;
}

.ds-button-transparent:hover {
  background: var(--ds-color-gray-700);
  border: none;
  box-shadow: none;
}

.ds-button-success {
  background: var(--ds-color-success-700);
  border: 1px solid var(--ds-color-success-700);
}

.ds-button-success:hover {
  background: var(--ds-color-success-700);
  border: 1px solid var(--ds-color-success-700);
}

.ds-button-danger {
  background: var(--ds-color-danger-700);
  border: 1px solid var(--ds-color-danger-700);
}

.ds-button-danger:hover {
  background: var(--ds-color-danger-700);
  border: 1px solid var(--ds-color-danger-700);
}

.ds-button-warning {
  background: var(--ds-color-warning-700);
  color: var(--ds-color-gray-900);
  border: 1px solid var(--ds-color-warning-700);
}

.ds-button-warning:hover {
  background: var(--ds-color-warning-700);
  border: 1px solid var(--ds-color-warning-700);
}

.ds-button-wtm {
  background: var(--ds-color-wtm-500);
  border: 1px solid var(--ds-color-wtm-500);
}

.ds-button-wtm:hover {
  background: var(--ds-color-wtm-700);
  border: 1px solid var(--ds-color-wtm-700);
}

@media screen and (min-width: 768px) {
  .ds-button-wide {
    min-width: 400px;
  }
}

.ds-icon-button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-color-white);
  font: var(--ds-font-body-xl);
  gap: 8px;
}

.ds-icon-button:hover {
  color: var(--ds-color-primary-500);
  background: transparent;
  border: none;
}

.ds-icon-button.ds-button-wtm:hover {
  color: var(--ds-color-wtm-400);
}

.ds-button-full-width {
  width: 100%;
}

.ds-badge {
  font: var(--ds-font-body-xs);
  color: var(--ds-color-white);
  display: inline-block;
  background: var(--ds-color-gray-800);
  border: 1px solid var(--ds-color-gray-600);
  border-radius: 4px;
  padding: 4px 8px;
}

.ds-textbox {
  color: var(--ds-color-gray-400);
  background: var(--ds-color-gray-800);
  padding: var(--ds-layout-spacing-m);
  border-radius: 8px;
}

.ds-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: rgba(18, 18, 28, 0.6);
  backdrop-filter: blur(4px);
  z-index: var(--ds-layout-z-index-modal);
  padding: var(--ds-layout-spacing-m);
  opacity: 0;
  visibility: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
}

.ds-modal.ds-modal-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}

.ds-modal-content {
  position: relative;
  display: flex;
  flex-flow: column;
  background: var(--ds-color-gray-700);
  box-shadow: 30px 60px 120px rgba(0, 0, 0, 0.6);
  border-radius: 16px;
  width: 100%;
  max-width: 900px;
  padding: min(5vw, 60px) var(--ds-layout-spacing-m);
}

.ds-modal-content > * {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.ds-modal-content .ds-button {
  min-width: 200px;
}

.ds-modal-content .ds-modal-close + * {
  max-width: calc(100% - 90px);
}

.ds-modal-close {
  z-index: 1000;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 20px;
  right: 20px;
  background: var(--ds-color-gray-700);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: var(--ds-color-white);
  cursor: pointer;
}

.ds-modal-close svg {
  width: 32px;
  height: 32px;
}

.ds-modal-actions {
  display: flex;
  flex-flow: column nowrap;
  gap: 16px;
}

.ds-modal-video .ds-modal-content {
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}

.ds-modal-video .ds-modal-content * {
  max-width: none;
}

@media screen and (min-width: 768px) {
  .ds-modal-close {
    position: absolute;
    top: 40px;
    right: 40px;
  }

  .ds-modal-actions {
    flex-flow: row;
  }

  .ds-modal-actions > * {
    flex: 1;
  }
}

.ds-product-grid {
  display: flex;
  flex-flow: column;
  gap: var(--ds-layout-spacing-m);
}

.ds-product-grid > * {
  display: flex;
  align-items: center;
  gap: var(--ds-layout-spacing-m);
  background: var(--ds-color-gray-700);
  border: 1px solid var(--ds-color-gray-600);
  box-shadow: 30px 60px 80px rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  padding: var(--ds-layout-spacing-l);
}

.ds-product-grid a {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
}

.ds-product-grid svg {
  min-width: 120px;
  min-height: 120px;
  max-width: 120px;
  max-height: 120px;
}

@media screen and (min-width: 992px) {
  .ds-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .ds-product-grid > * {
    flex-flow: column;
  }

  .ds-product-grid svg {
    min-width: 160px;
    min-height: 160px;
    max-width: 160px;
    max-height: 160px;
  }
}

@media screen and (min-width: 1280px) {
  .ds-product-grid {
    gap: var(--ds-layout-spacing-2xl);
  }
}

.ds-learn-more {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px 10px 0px;
  background: linear-gradient(180deg, rgba(18, 18, 28, 0) 0%, #12121c 100%);
  transition: opacity 0.3s ease-in-out;
}

.ds-learn-more a {
  padding: 10px;
}

.ds-learn-more.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.ds-faq {
  max-width: 800px;
  margin: 0 auto;
  color: var(--ds-color-gray-300);
}

.ds-faq h3 {
  font: var(--ds-font-headline-s);
  border-top: 1px solid var(--ds-color-gray-600);
  padding-top: 24px;
  color: var(--ds-color-white);
}

.ds-faq h3:first-child {
  border-top: none;
  padding-top: 0;
}

.ds-faq p,
.ds-faq ul {
  font: var(--ds-font-body-l);
  margin-bottom: 16px;
}

.ds-faq li {
  font: var(--ds-font-body-l);
}

.ds-faq p + h3 {
  margin-top: 24px;
}

.ds-faq-button {
  margin: 32px 0 0;
  text-align: center;
}

.ds-faq-help {
  margin: 40px auto 0;
  border-radius: 16px;
  padding: 40px 24px;
}

.ds-faq-container {
  max-width: 640px;
  margin: 0 auto;
  box-sizing: content-box;
}

@media screen and (min-width: 768px) {
  .ds-faq-help {
    margin-top: 64px;
  }

  .ds-faq-button {
    margin-top: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .ds-faq-help {
    margin-top: 80px;
  }
}

.ds-testimonials {
  margin: 0 -20px;
  padding: 0 40px;
}

.ds-testimonials-section > .ds-section-header {
  margin-bottom: 24px;
}

.ds-testimonials-gallery {
  display: flex;
  gap: 24px;
}

.ds-testimonials-gallery > div {
  width: 100%;
}

.ds-testimonials-card {
  display: flex;
  flex-flow: column nowrap;
  flex-shrink: 0;
  gap: 24px;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--ds-color-gray-900);
  background: linear-gradient(
      180deg,
      rgba(18, 19, 23, 0.5) 0%,
      rgba(18, 19, 23, 0) 100%
    ),
    no-repeat 16px 12px
      url("data:image/svg+xml,%3Csvg width='64' height='51' viewBox='0 0 64 51' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M51.7863 0L64 6.68507C61.503 8.42428 59.1145 10.3265 56.8346 12.3918C54.5547 14.3485 52.4919 16.4138 50.6463 18.5878C48.8007 20.7618 47.335 23.0445 46.2494 25.4359C45.2723 27.8273 44.7294 30.3274 44.6209 32.9362L41.6896 30.3274C42.5581 29.8926 43.4266 29.6209 44.2952 29.5122C45.1637 29.4035 46.0322 29.3491 46.9008 29.3491C50.592 29.3491 53.5776 30.3274 55.8575 32.284C58.1374 34.1319 59.2773 36.6864 59.2773 39.9474C59.2773 43.0997 58.1374 45.7085 55.8575 47.7738C53.6862 49.8391 50.8092 50.8718 47.2265 50.8718C43.3181 50.8718 40.1696 49.7304 37.7812 47.4477C35.3927 45.165 34.1985 41.5236 34.1985 36.5233C34.1985 32.7188 34.6327 29.1317 35.5013 25.762C36.4784 22.2836 37.7269 19.0226 39.2468 15.979C40.7668 12.8266 42.6124 9.94609 44.7837 7.33727C46.955 4.61977 49.2892 2.17401 51.7863 0ZM17.4249 0L29.6387 6.68507C27.1416 8.42428 24.7532 10.3265 22.4733 12.3918C20.1934 14.3485 18.1306 16.4138 16.285 18.5878C14.5479 20.7618 13.1366 23.0445 12.0509 25.4359C10.9652 27.8273 10.3681 30.3274 10.2595 32.9362L7.32824 30.3274C8.30534 29.8926 9.17388 29.6209 9.93384 29.5122C10.8024 29.4035 11.6709 29.3491 12.5394 29.3491C16.3393 29.3491 19.3249 30.3274 21.4962 32.284C23.7761 34.1319 24.916 36.6864 24.916 39.9474C24.916 43.0997 23.7761 45.7085 21.4962 47.7738C19.3249 49.8391 16.4478 50.8718 12.8651 50.8718C8.95674 50.8718 5.80831 49.7304 3.41985 47.4477C1.13995 45.165 0 41.5236 0 36.5233C0 32.7188 0.434267 29.1317 1.3028 25.762C2.17133 22.2836 3.36556 19.0226 4.8855 15.979C6.514 12.8266 8.35963 9.94609 10.4224 7.33727C12.5937 4.61977 14.9279 2.17401 17.4249 0Z' fill='%23121317' /%3E%3C/svg%3E%0A");

  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.15),
    0px -2px 0px 0px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.ds-testimonials-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ds-testimonials-author {
  display: flex;
  flex-flow: column;
}

.ds-testimonials-source {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ds-testimonials-source svg {
  width: 14px;
  height: 14px;
}

.ds-testimonials-desc {
  max-width: 500px;
  margin: 40px auto 0;
}

.ds-testimonials-stars {
  display: grid;
  grid: min-content 1fr / max-content 1fr;
  gap: 2px 16px;
  margin: 20px auto 0;
  max-width: 480px;
}

.ds-testimonials-stars img:first-child {
  grid-row: span 2;
}

.ds-testimonials.ds-testimonials-size-1 button {
  display: none;
}

@media screen and (min-width: 768px) {
  .ds-testimonials-card {
    padding: 32px;
  }

  .ds-testimonials-gallery > div {
    width: calc(50% - 12px);
  }

  .ds-testimonials.ds-testimonials-size-2 button {
    display: none;
  }
}

@media screen and (min-width: 992px) {
  .ds-testimonials-gallery > div {
    width: calc(100% / 3 - 16px);
  }

  .ds-testimonials.ds-testimonials-size-3 button {
    display: none;
  }
}

/* Form Components */

.ds-form-field {
  font: var(--ds-font-body-l);
  font-weight: 400;
  color: var(--ds-color-white);
  background: var(--ds-color-gray-800);
  padding: 10px 20px;
  border: 1px solid var(--ds-color-gray-600);
  border-radius: 24px;
  outline: none;
}

.ds-form-field-large {
  font: var(--ds-font-body-xl);
  font-weight: 400;
}

.ds-form-field::placeholder {
  color: var(--ds-color-gray-400);
}

.ds-form-field:hover {
  border: 1px solid var(--ds-color-white);
}

.ds-form-field:focus {
  outline: none;
}

.ds-form-field:focus-visible {
  box-shadow: 0 0 0 4px var(--ds-color-gray-500);
}

.ds-form-field.ds-form-field-center-placeholder::placeholder {
  text-align: center;
}

.ds-form-field.ds-form-field-center-placeholder::ms-input-placeholder {
  text-align: center;
}

.ds-form-error .ds-form-field,
.ds-form-field.ds-form-error {
  border: 1px solid var(--ds-color-error-400);
}

select.ds-form-field {
  appearance: none;
  background: var(--ds-color-gray-800) no-repeat top 50% right 16px
    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.96967 8.46967C4.26256 8.17678 4.73744 8.17678 5.03033 8.46967L12 15.4393L18.9697 8.46967C19.2626 8.17678 19.7374 8.17678 20.0303 8.46967C20.3232 8.76256 20.3232 9.23744 20.0303 9.53033L12.5303 17.0303C12.2374 17.3232 11.7626 17.3232 11.4697 17.0303L3.96967 9.53033C3.67678 9.23744 3.67678 8.76256 3.96967 8.46967Z' fill='white'/%3E%3C/svg%3E%0A");
}

input.ds-form-field::file-selector-button {
  display: none;
}

input.ds-form-field::-webkit-search-cancel-button {
  position: relative;
  right: -10px;
  margin-left: -24px;
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  color: var(--ds-color-gray-300);
  cursor: pointer;
  border-radius: 12px;
  background: center no-repeat;
  background-size: cover;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.11101 2.17971C5.26216 1.41054 6.61553 1 8 1C8.91926 1 9.82951 1.18106 10.6788 1.53284C11.5281 1.88463 12.2997 2.40024 12.9497 3.05025C13.5998 3.70026 14.1154 4.47194 14.4672 5.32121C14.8189 6.17049 15 7.08075 15 8C15 9.38447 14.5895 10.7378 13.8203 11.889C13.0511 13.0401 11.9579 13.9373 10.6788 14.4672C9.3997 14.997 7.99224 15.1356 6.63437 14.8655C5.2765 14.5954 4.02922 13.9287 3.05026 12.9497C2.07129 11.9708 1.4046 10.7235 1.13451 9.36563C0.86441 8.00776 1.00303 6.6003 1.53285 5.32121C2.06266 4.04213 2.95987 2.94888 4.11101 2.17971ZM6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L6.58579 8L5.29289 9.29289C4.90237 9.68342 4.90237 10.3166 5.29289 10.7071C5.68342 11.0976 6.31658 11.0976 6.70711 10.7071L8 9.41421L9.29289 10.7071C9.68342 11.0976 10.3166 11.0976 10.7071 10.7071C11.0976 10.3166 11.0976 9.68342 10.7071 9.29289L9.41421 8L10.7071 6.70711C11.0976 6.31658 11.0976 5.68342 10.7071 5.29289C10.3166 4.90237 9.68342 4.90237 9.29289 5.29289L8 6.58579L6.70711 5.29289Z' fill='%2388898c'/%3E%3C/svg%3E%0A");
}

.ds-form-checkbox {
  width: 16px;
  height: 16px;
  background: var(--ds-color-gray-800) no-repeat center;
  border: 1px solid var(--ds-color-gray-500);
  border-radius: 4px;
  display: block;
  appearance: none;
}

.ds-form-checkbox:checked {
  border-color: var(--ds-color-primary-500);
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC41ODkzIDIuNDEwMDhDMTAuOTE0NyAyLjczNTUxIDEwLjkxNDcgMy4yNjMxMiAxMC41ODkzIDMuNTg4NTVMNS4wODkyOCA5LjA4ODU1QzQuNzYzODYgOS40MTM5NyA0LjIzNjI0IDkuNDEzOTcgMy45MTA4MiA5LjA4ODU1TDEuNDEwODIgNi41ODg1NUMxLjA4NTM5IDYuMjYzMTIgMS4wODUzOSA1LjczNTUxIDEuNDEwODIgNS40MTAwOEMxLjczNjI0IDUuMDg0NjYgMi4yNjM4NiA1LjA4NDY2IDIuNTg5MjggNS40MTAwOEw0LjUwMDA1IDcuMzIwODVMOS40MTA4MiAyLjQxMDA4QzkuNzM2MjQgMi4wODQ2NiAxMC4yNjM5IDIuMDg0NjYgMTAuNTg5MyAyLjQxMDA4WiIgZmlsbD0iIzAwQUVGMCIvPgo8L3N2Zz4=');
}

.ds-form-checkbox:focus {
  outline: none;
}

.ds-form-checkbox:focus-visible {
  box-shadow: 0 0 0 4px var(--ds-color-gray-600);
}

.ds-form-checkbox.ds-form-error {
  border-color: var(--ds-color-error-400);
}

.ds-form-label {
  margin: 0;
  font-weight: inherit;
}

.ds-form-label input[type='radio'] {
  width: 24px;
  height: 24px;
  background: var(--ds-color-gray-800);
  border: 1px solid var(--ds-color-gray-500);
  border-radius: 12px;
  appearance: none;
}

.ds-form-label input[type='radio']:checked {
  border-color: var(--ds-color-primary-500);
  background: var(--ds-color-gray-800) no-repeat center
    url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.8838 0.754774C15.3719 1.24291 15.3719 2.03433 14.8838 2.52247L6.6338 10.7725C6.14566 11.2606 5.35424 11.2606 4.8661 10.7725L1.1161 7.02247C0.627966 6.53434 0.627966 5.74291 1.1161 5.25477C1.60424 4.76664 2.39566 4.76664 2.8838 5.25477L5.74995 8.12093L13.1161 0.754774C13.6042 0.266638 14.3957 0.266638 14.8838 0.754774Z' fill='%2300AEF0'/%3E%3C/svg%3E%0A");
}

.ds-form-label-checkbox {
  display: grid;
  grid: auto / min-content 1fr;
  gap: 8px;
}

.ds-form-error-msg {
  color: var(--ds-color-error-400);
  margin: 0;
}

.ds-form-error-msg:empty {
  display: none;
}

.ds-form-field-container {
  display: flex;
  flex-flow: column nowrap;
  gap: 8px;
  margin: 24px 0;
}

.ds-form-field-container:first-child {
  margin-top: 0;
}

.ds-form-field-row {
  display: flex;
  flex-flow: row wrap;
  gap: 16px;
  margin: 24px 0;
}

.ds-form-field-row > * {
  flex: 1;
  margin: 0;
  min-width: 200px;
}

.ds-form-field-row > * .ds-form-field {
  width: 100%;
}

.ds-carousel {
  position: relative;
}

.ds-carousel-prev,
.ds-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.ds-carousel-prev {
  left: 2px;
}

.ds-carousel-next {
  right: 2px;
}

.ds-carousel-prev:active,
.ds-carousel-next:active {
  transform: translateY(-50%) scale(0.9);
}

.ds-carousel-slider {
  display: flex;
  flex-flow: row nowrap;
  overflow: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ds-carousel-slider::-webkit-scrollbar {
  display: none;
}

.ds-carousel-slider > * {
  scroll-snap-align: start;
}

.ds-shop-discount {
  color: white;
  font: var(--ds-font-label-xs);
  display: inline-block;
  padding: 4px;
  margin-left: 4px;
  margin-bottom: 2px;
  vertical-align: middle;
  text-align: center;
  border-radius: 4px;
  background: var(--ds-color-error-500);
  white-space: nowrap;
}

/* UI Helpers */

.ds-overflow {
  overflow: visible;
}

/* Colors */

.ds-color-gray-900 {
  color: var(--ds-color-gray-900);
}
.ds-color-gray-800 {
  color: var(--ds-color-gray-800);
}
.ds-color-gray-700 {
  color: var(--ds-color-gray-700);
}
.ds-color-gray-600 {
  color: var(--ds-color-gray-600);
}
.ds-color-gray-500 {
  color: var(--ds-color-gray-500);
}
.ds-color-gray-400 {
  color: var(--ds-color-gray-400);
}
.ds-color-gray-300 {
  color: var(--ds-color-gray-300);
}
.ds-color-gray-200 {
  color: var(--ds-color-gray-200);
}
.ds-color-white {
  color: var(--ds-color-white);
}

.ds-color-primary-700 {
  color: var(--ds-color-primary-700);
}
.ds-color-primary-500 {
  color: var(--ds-color-primary-500);
}
.ds-color-secondary-500 {
  color: var(--ds-color-secondary-500);
}

.ds-color-newsletter-500 {
  color: var(--ds-color-newsletter-500);
}

.ds-color-success-500 {
  color: var(--ds-color-success-500);
}
.ds-color-success-400 {
  color: var(--ds-color-success-400);
}
.ds-color-warning-500 {
  color: var(--ds-color-warning-500);
}
.ds-color-error-500 {
  color: var(--ds-color-error-500);
}
.ds-color-error-400 {
  color: var(--ds-color-error-400);
}

.ds-color-wtm-700 {
  color: var(--ds-color-wtm-700);
}
.ds-color-wtm-500 {
  color: var(--ds-color-wtm-500);
}
.ds-color-wtm-400 {
  color: var(--ds-color-wtm-400);
}
.ds-color-wtm-violet {
  color: var(--ds-color-wtm-violet);
}
.ds-color-wtm-teal {
  color: var(--ds-color-wtm-teal);
}
.ds-color-wtm-pink {
  color: var(--ds-color-wtm-pink);
}

.ds-color-gradient-newsletter {
  background: var(--ds-color-gradient-newsletter);
}

.ds-color-gradient-browser {
  background: var(--ds-color-gradient-browser);
}

.ds-color-gradient-home {
  background: var(--ds-color-gradient-home);
}

.ds-color-gradient-enterprise {
  background: var(--ds-color-gradient-enterprise);
}

.ds-color-gradient-gray {
  background: var(--ds-color-gradient-gray);
}

.ds-color-gradient-wtm {
  background: var(--ds-color-gradient-wtm);
}

.ds-color-gradient-newsletter,
.ds-color-gradient-browser,
.ds-color-gradient-home,
.ds-color-gradient-enterprise,
.ds-color-gradient-gray,
.ds-color-gradient-wtm {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* Backgrounds */

.ds-bg-gray-900 {
  background-color: var(--ds-color-gray-900);
}
.ds-bg-gray-800 {
  background-color: var(--ds-color-gray-800);
}
.ds-bg-gray-700 {
  background-color: var(--ds-color-gray-700);
}
.ds-bg-gray-600 {
  background-color: var(--ds-color-gray-600);
}
.ds-bg-gray-500 {
  background-color: var(--ds-color-gray-500);
}
.ds-bg-gray-400 {
  background-color: var(--ds-color-gray-400);
}
.ds-bg-gray-300 {
  background-color: var(--ds-color-gray-300);
}
.ds-bg-white {
  background-color: var(--ds-color-white);
}
.ds-bg-gradient-gray {
  background: var(--ds-color-gradient-gray);
}

/* Margins */

.ds-margin-section {
  margin: var(--ds-layout-spacing-section) 0;
}

.ds-margin-v-5xl {
  margin: var(--ds-layout-spacing-5xl) 0;
}
.ds-margin-v-4xl {
  margin: var(--ds-layout-spacing-4xl) 0;
}
.ds-margin-v-3xl {
  margin: var(--ds-layout-spacing-3xl) 0;
}
.ds-margin-v-2xl {
  margin: var(--ds-layout-spacing-2xl) 0;
}
.ds-margin-v-xl {
  margin: var(--ds-layout-spacing-xl) 0;
}
.ds-margin-v-l {
  margin: var(--ds-layout-spacing-l) 0;
}
.ds-margin-v-m {
  margin: var(--ds-layout-spacing-m) 0;
}
.ds-margin-v-s {
  margin: var(--ds-layout-spacing-s) 0;
}
.ds-margin-v-xs {
  margin: var(--ds-layout-spacing-xs) 0;
}

.ds-margin-h-5xl {
  margin: 0 var(--ds-layout-spacing-5xl);
}
.ds-margin-h-4xl {
  margin: 0 var(--ds-layout-spacing-4xl);
}
.ds-margin-h-3xl {
  margin: 0 var(--ds-layout-spacing-3xl);
}
.ds-margin-h-2xl {
  margin: 0 var(--ds-layout-spacing-2xl);
}
.ds-margin-h-xl {
  margin: 0 var(--ds-layout-spacing-xl);
}
.ds-margin-h-l {
  margin: 0 var(--ds-layout-spacing-l);
}
.ds-margin-h-m {
  margin: 0 var(--ds-layout-spacing-m);
}
.ds-margin-h-s {
  margin: 0 var(--ds-layout-spacing-s);
}
.ds-margin-h-xs {
  margin: 0 var(--ds-layout-spacing-xs);
}

.ds-margin-t-5xl {
  margin-top: var(--ds-layout-spacing-5xl);
}
.ds-margin-t-4xl {
  margin-top: var(--ds-layout-spacing-4xl);
}
.ds-margin-t-3xl {
  margin-top: var(--ds-layout-spacing-3xl);
}
.ds-margin-t-2xl {
  margin-top: var(--ds-layout-spacing-2xl);
}
.ds-margin-t-xl {
  margin-top: var(--ds-layout-spacing-xl);
}
.ds-margin-t-l {
  margin-top: var(--ds-layout-spacing-l);
}
.ds-margin-t-m {
  margin-top: var(--ds-layout-spacing-m);
}
.ds-margin-t-s {
  margin-top: var(--ds-layout-spacing-s);
}
.ds-margin-t-xs {
  margin-top: var(--ds-layout-spacing-xs);
}

.ds-margin-r-5xl {
  margin-right: var(--ds-layout-spacing-5xl);
}
.ds-margin-r-4xl {
  margin-right: var(--ds-layout-spacing-4xl);
}
.ds-margin-r-3xl {
  margin-right: var(--ds-layout-spacing-3xl);
}
.ds-margin-r-2xl {
  margin-right: var(--ds-layout-spacing-2xl);
}
.ds-margin-r-xl {
  margin-right: var(--ds-layout-spacing-xl);
}
.ds-margin-r-l {
  margin-right: var(--ds-layout-spacing-l);
}
.ds-margin-r-m {
  margin-right: var(--ds-layout-spacing-m);
}
.ds-margin-r-s {
  margin-right: var(--ds-layout-spacing-s);
}
.ds-margin-r-xs {
  margin-right: var(--ds-layout-spacing-xs);
}

.ds-margin-b-5xl {
  margin-bottom: var(--ds-layout-spacing-5xl);
}
.ds-margin-b-4xl {
  margin-bottom: var(--ds-layout-spacing-4xl);
}
.ds-margin-b-3xl {
  margin-bottom: var(--ds-layout-spacing-3xl);
}
.ds-margin-b-2xl {
  margin-bottom: var(--ds-layout-spacing-2xl);
}
.ds-margin-b-xl {
  margin-bottom: var(--ds-layout-spacing-xl);
}
.ds-margin-b-l {
  margin-bottom: var(--ds-layout-spacing-l);
}
.ds-margin-b-m {
  margin-bottom: var(--ds-layout-spacing-m);
}
.ds-margin-b-s {
  margin-bottom: var(--ds-layout-spacing-s);
}
.ds-margin-b-xs {
  margin-bottom: var(--ds-layout-spacing-xs);
}

.ds-margin-l-5xl {
  margin-left: var(--ds-layout-spacing-5xl);
}
.ds-margin-l-4xl {
  margin-left: var(--ds-layout-spacing-4xl);
}
.ds-margin-l-3xl {
  margin-left: var(--ds-layout-spacing-3xl);
}
.ds-margin-l-2xl {
  margin-left: var(--ds-layout-spacing-2xl);
}
.ds-margin-l-xl {
  margin-left: var(--ds-layout-spacing-xl);
}
.ds-margin-l-l {
  margin-left: var(--ds-layout-spacing-l);
}
.ds-margin-l-m {
  margin-left: var(--ds-layout-spacing-m);
}
.ds-margin-l-s {
  margin-left: var(--ds-layout-spacing-s);
}
.ds-margin-l-xs {
  margin-left: var(--ds-layout-spacing-xs);
}

.ds-row {
  display: flex;
  flex-flow: row nowrap;
  gap: 8px;
}

.ds-flex-wrap {
  flex-wrap: wrap;
}

.ds-column {
  display: flex;
  flex-flow: column nowrap;
  gap: 8px;
}

.ds-gap-0 {
  gap: 0;
}
.ds-gap-4 {
  gap: 4px;
}
.ds-gap-8 {
  gap: 8px;
}
.ds-gap-16 {
  gap: 16px;
}
.ds-gap-24 {
  gap: 24px;
}

.ds-flex-inline {
  display: inline-flex;
}

.ds-flex-items-center {
  align-items: center;
}

.ds-flex-justify-center {
  justify-content: center;
}

.ds-flex-justify-right {
  justify-content: flex-end;
}

.ds-flex-grow {
  flex: 1;
}
.ds-article-main {
  overflow: visible;
}

.ds-hidden-article .ds-article-header {
  border: none;
  padding-bottom: 0;
  margin-bottom: 40px;
  padding-top: 40px;
}

.ds-article {
  color: var(--ds-color-gray-200);
  padding-bottom: 80px;
}

.ds-article h1 {
  font: var(--ds-font-display-xl);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ds-color-white);
  text-align: center;
  margin: 16px 0 24px;
}

.ds-article-container h2 {
  font: var(--ds-font-headline-l);
  margin: 64px 0 24px;
  color: var(--ds-color-white);
}

.ds-article-container h2:first-child {
  margin-top: 0;
}

.ds-article-container h3 {
  font: var(--ds-font-headline-m);
  margin: 48px 0 24px;
  color: var(--ds-color-white);
}

.ds-article-container h2 + h3 {
  margin-top: 24px;
}

.ds-article-container h4 {
  font: var(--ds-font-headline-s2);
  margin: 40px 0 24px;
  color: var(--ds-color-white);
}

.ds-article-container h5 {
  margin: 32px 0 12px;
  padding: 8px;
  width: 76px;
  font: var(--ds-font-display-xs);
  text-transform: uppercase;
  text-align: center;
  color: var(--ds-color-white);
  background: var(--ds-color-gray-700);
  border-radius: 8px;
}

.ds-article h1 strong,
.ds-article-container h2 strong,
.ds-article-container h3 strong,
.ds-article-container h4 strong,
.ds-article-container h5 strong {
  font-weight: inherit;
}

.ds-article-container p {
  font: var(--ds-font-body-xl);
  margin: 24px 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.ds-article-container p + p {
  margin-top: 32px;
}

.ds-article-container h5 + p {
  margin-top: 12px;
}

.ds-article-container p strong,
.ds-article-container li strong {
  color: var(--ds-color-white);
  font-weight: 500;
}

.ds-article-container p code {
  display: inline-block;
  padding: 2px 6px;
  font-size: 0.8em;
  border-radius: 4px;
  background: var(--ds-color-gray-900);
}

.ds-article-container li {
  font: var(--ds-font-body-xl);
  margin-bottom: 24px;
}

.ds-article-container a:not(.ds-button, .ds-button-large) {
  color: var(--ds-color-primary-500);
  text-decoration: none;
}

.ds-article-container a:hover:not(.ds-button, .ds-button-large) {
  text-decoration: underline;
}

.ds-article-container .block-img {
  border-radius: 16px;
  overflow: hidden;
  margin: 64px 0 48px;
  outline: 1px solid var(--ds-color-gray-900);
}

.ds-article-container .block-img img {
  display: block;
  width: 100%;
  height: auto;
}

.ds-article-container gh-cta {
  margin: 64px 0;
}

.ds-article-header .ds-article-container gh-cta {
  margin: 40px 0;
}

.ds-article-container gh-cta:last-child {
  margin-bottom: 0;
}

.ds-article-container blockquote {
  margin: 48px 0;
  padding-left: 32px;
  border-left: 2px solid var(--ds-color-primary-500);
  color: var(--ds-color-white);
}

.ds-article-container blockquote p {
  font: var(--ds-font-blockquote);
  margin: 0;
}

.ds-article-container blockquote p::before {
  content: '\201C';
}

.ds-article-container blockquote p::after {
  content: '\201D';
}

.ds-article-container blockquote cite {
  display: block;
  margin-top: 16px;
  font: var(--ds-font-label-l);
  color: var(--ds-color-gray-400);
}

.ds-article-container {
  max-width: 640px;
  margin: 0 auto;
  box-sizing: content-box;
}

.ds-article-header {
  max-width: 1200px;
  margin: 0 auto 40px;
  box-sizing: border-box;
}

.ds-article-header.ds-article-hidden {
  border: none;
  padding-bottom: 0;
  margin-bottom: 40px;
  padding-top: 40px;
}

.ds-article-header > h1 {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.ds-article-header > p {
  font: var(--ds-font-headline-xs);
  text-align: center;
  margin: 0 0 8px;
  text-transform: uppercase;
  text-align: center;
}

.ds-article-header .ds-article-container h2 {
  font: var(--ds-font-headline-m);
  margin-top: 24px;
}

.ds-article-header > img {
  display: block;
  margin: 24px auto;
  width: 940px;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

a.ds-article-back-button {
  margin: 16px 0 24px;
}

.ds-article-testimonials {
  margin: 80px 0;
}

.ds-article-testimonials p {
  font: inherit;
}
.ds-article-testimonials-items {
  margin: 16px 0;
  display: flex;
  flex-flow: column;
  gap: 8px;
}

.ds-article-testimonials-items > * {
  flex: 1;
}

.ds-article-testimonials-items *:first-child:last-child > div:first-child {
  font: var(--ds-font-headline-m);
}

.ds-article .ds-testimonials-section {
  padding-bottom: 0;
}

@media screen and (min-width: 768px) {
  .ds-article-container .block-img {
    margin: 64px 0;
  }

  .ds-article-container gh-cta {
    margin: 80px 0;
  }

  a.ds-article-back-button {
    margin: 24px 0 40px;
  }

  .ds-article-header {
    margin-bottom: 64px;
  }

  .ds-article-header > p {
    margin-bottom: 16px;
  }

  .ds-article-header .ds-article-container h2 {
    margin-top: 40px;
  }

  .ds-article-header > img {
    margin: 40px auto;
  }

  .ds-article-testimonials-items {
    flex-flow: row;
  }
}

@media screen and (min-width: 992px) {
  .ds-article-container h2 {
    margin: 80px 0 24px;
  }

  .ds-article-container h3 {
    margin: 64px 0 24px;
  }

  .ds-article-container h4 {
    margin: 56px 0 24px;
  }

  .ds-article-header h2 {
    margin-top: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .ds-article-header {
    padding-bottom: 40px;
    margin-bottom: 80px;
    border-bottom: 1px solid var(--ds-color-gray-600);
  }
}
.ds-account-card {
  display: flex;
  flex-flow: column;
  gap: 24px;
  padding: 24px 16px;
  border-radius: 16px;
  background: var(--ds-color-gray-800, #202225);
}

.ds-account-card-field {
  display: flex;
  flex-flow: column;
  gap: 8px;
  align-items: flex-start;
}

.ds-account-card-divider {
  width: 100%;
  height: 1px;
  background: var(--ds-color-gray-700);
}

.ds-account-card .ds-button,
.ds-account-card .ds-button-small {
  min-width: 120px;
}

.ds-account-profile {
  display: flex;
  flex-flow: column;
  gap: 20px;
  margin: 20px 0;
}

.ds-account-profile .ds-form-checkbox {
  margin-top: 5px;
}

.ds-account-verification {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 16px;
  padding: 16px;
  align-items: center;
  margin-bottom: 24px;
}

.ds-account-verification-button {
  display: grid;
  grid-template-columns: max-content;
  grid-column: span 2;
}

.ds-account-profile-form {
  max-width: 480px;
  margin: 0 auto;
}

.ds-account-cancel-model-form {
  max-width: 730px;
}

.ds-account-cancel-model-form button {
  min-width: 350px;
}

.ds-account-section {
  margin: 40px 0;
}

.ds-account-contribution-badge {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: var(--ds-color-gray-800);
  border-radius: 20px;
  max-width: 560px;
  margin: 40px auto;
}

.ds-account-contribution-badge svg {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}

.ds-account-contribution-cards {
  display: flex;
  flex-flow: column;
  gap: 8px;
  margin: 40px 0;
}

.ds-account-contribution-cards > div {
  flex: 1;
  text-align: center;
  display: grid;
  grid-template-rows: max-content 1fr;
  gap: 16px;
  padding: 16px;
  max-width: 680px;
  border-radius: 16px;
  border: 1px solid var(--ds-color-gray-600);
  background: var(--ds-color-gray-700);
  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.1) inset,
    0px 40px 60px 0px rgba(0, 0, 0, 0.2);
}

.ds-account-contribution-cards .ds-account-card-divider {
  background: var(--ds-color-gray-500);
}

.ds-account-support-section,
.ds-account-profile-section {
  margin-top: 8px;
}

.ds-account-support {
  position: relative;
  max-width: 600px;
  margin: 20px 0 40px;
}

.ds-account-support-info {
  display: none;
}

.ds-account-invoices {
  display: flex;
  flex-flow: column;
  gap: 8px;
  margin: 24px 0;
}

.ds-account-invoices > div {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 16px;
  gap: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--ds-gray-600);
  background: var(--ds-gray-700);
  box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.1) inset,
    0px 40px 60px 0px rgba(0, 0, 0, 0.2);
}

.ds-account-invoices > .ds-account-invoice-label {
  display: none;
}

.ds-account-invoice-status,
.ds-account-invoice-desc {
  grid-column: span 2;
}

.ds-account-badge {
  display: inline-block;
  padding: 4px 8px;
  font: var(--ds-font-label-m);
  border-radius: 4px;
}

.ds-account-badge.pending {
  background: var(--ds-color-primary-700);
}

.ds-account-badge.failed {
  background: var(--ds-color-error-500);
}

.ds-account-badge.paid {
  background: var(--ds-color-success-700);
}

.ds-account-container {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.ds-account-contribution-actions {
  display: flex;
  flex-flow: column;
  gap: 8px;
  margin: 0px auto;
  max-width: max-content;
}

@keyframes ds-account-flash {
  0% {
    opacity: 0;
    transform: translateX(30%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.ds-account-flash {
  display: flex;
  align-items: center;
  gap: 16px;
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 8px 8px 8px 16px;
  border-radius: 12px;
  background: var(--ds-color-gray-600);
  box-shadow: 30px 60px 160px 0px rgba(0, 0, 0, 0.4);
  color: var(--ds-color-white);
  animation: ds-account-flash 0.3s ease-in-out;
}

.ds-account-flash-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ds-color-success-500);
  padding: 4px;
  color: var(--ds-color-white);
}

.ds-account-flash-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--ds-color-gray-300);
  cursor: pointer;
}

.ds-account-flash-close:hover {
  color: var(--ds-color-white);
}

.ds-account-flash.error {
  color: var(--ds-color-error-500);
}

.ds-account-flash.error .ds-account-flash-icon {
  background: var(--ds-color-error-500);
}

@media screen and (min-width: 768px) {
  .ds-account-card {
    padding: 40px;
    gap: 40px;
  }

  .ds-account-verification {
    gap: 16px;
    grid-template-columns: max-content 1fr max-content;
    margin-top: -16px;
    padding: 16px;
  }

  .ds-account-verification-button {
    grid-column: auto;
  }

  .ds-account-profile-form {
    margin-top: 40px;
  }

  .ds-account-card-field {
    display: grid;
    grid: max-content max-content / 1fr max-content;
    grid-auto-flow: column;
    align-items: end;
  }

  .ds-account-card-field > div:not(:first-child) {
    grid-row: span 2;
  }

  .ds-account-section {
    margin: 80px 0;
  }

  .ds-account-support {
    margin-top: 40px;
  }

  .ds-account-support-section,
  .ds-account-profile-section {
    margin-top: 24px;
  }

  .ds-account-invoices {
    display: grid;
    gap: 16px 24px;
    grid-template-columns: max-content 1fr repeat(2, max-content);
    grid-auto-flow: dense;
    align-items: center;
  }

  .ds-account-invoices > div {
    display: contents;
  }

  .ds-account-invoices > .ds-account-invoice-label {
    display: block;
  }

  .ds-account-invoice-date {
    grid-column: 1 / 2;
  }

  .ds-account-invoice-desc {
    font: var(--ds-font-body-m);
    grid-column: 2 / 3;
  }

  .ds-account-invoice-status {
    grid-column: 4 / 5;
  }

  .ds-account-invoice-desc-label {
    grid-column: 2 / 3;
  }

  .ds-account-invoice-field .ds-account-invoice-label {
    display: none;
  }
}

@media screen and (min-width: 992px) {
  .ds-account-profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .ds-main-account {
    padding-bottom: 100px;
  }

  .ds-account-contribution-cards {
    flex-flow: row nowrap;
    justify-content: center;
    margin: 64px 0;
  }

  .ds-account-contribution-cards > div {
    padding: 24px 32px;
  }

  .ds-account-contribution-cards a {
    padding-left: 8px;
    padding-right: 8px;
  }

  .ds-account-support-section,
  .ds-account-profile-section {
    margin-top: 40px;
  }

  .ds-account-support-info {
    display: block;
    position: absolute;
    top: 350px;
    left: calc(100% + 32px);
    width: 275px;
  }

  .ds-account-support-info::after {
    content: '';
    position: absolute;
    top: 25%;
    left: -8px;
    width: 16px;
    height: 16px;
    background: var(--ds-color-gray-800);
    transform: rotate(45deg);
  }

  .ds-account-flash {
    bottom: auto;
    top: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .ds-account-contribution-cards {
    gap: 40px;
    margin: 64px 0;
  }
}
.ds-auth {
  display: grid;
  grid: max-content 1fr max-content / auto;
  height: 100%;
  color: var(--ds-color-gray-300);
}

.ds-auth-main {
  max-width: var(--ds-layout-container-max-width);
  width: 100%;
  padding: 0 var(--ds-layout-padding) 80px;
  margin: 0 auto;
}

.ds-auth-main h1 {
  margin: 40px 0 44px;
}

.ds-auth-main h1 + h2 {
  margin: -36px 0 60px;
}

.ds-auth-main h2 + div:has(a) {
  margin-top: -20px;
}

.ds-auth-main p a {
  color: var(--ds-color-white);
}

.ds-auth-main form {
  max-width: 480px;
  margin: 0 auto;
}

.ds-auth-form-field-row {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}

.ds-auth-forgot-buttons {
  display: grid;
  grid: auto / 1fr 1fr;
  gap: 24px;
}

.ds-auth-infobox {
  display: grid;
  grid: max-content max-content / min-content 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--ds-color-gray-600);
}

.ds-auth-infobox svg {
  grid-row: 1 / span 2;
}

.ds-auth .ds-form-label-checkbox a {
  color: var(--ds-color-white);
}

.ds-auth-paddle-thank-you {
  border-radius: 12px;
  padding: 40px;
}

.ds-auth-paddle-thank-you p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 768px) {
  .ds-auth-main h1 {
    margin: 40px 0 64px;
  }

  .ds-auth-main h1 + h2 {
    margin: -48px 0 80px;
  }

  .ds-auth-main h2 + div:has(a) {
    margin-top: -40px;
  }

  .ds-auth-infobox {
    padding: 16px;
  }
}
.ds-blog-container {
  margin-top: 24px;
  margin-bottom: 40px;
}

.ds-blog-title-container {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.ds-blog-title {
  position: relative;
}

.ds-blog-rss-button {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  height: 40px;
  margin-left: 16px;
  display: grid;
  grid-template-columns: max-content;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  gap: 8px;
  font: var(--ds-font-label-m);
  background: rgba(32, 34, 37, 0.5);
  color: var(--ds-color-white);
  border-radius: 100px;
}

.ds-blog-rss-button span {
  display: none;
}

.ds-blog-rss-button:hover,
.ds-blog-rss-button:focus,
.ds-blog-rss-button:active {
  color: var(--ds-color-primary-500);
  background: rgba(32, 34, 37, 1);
}

.ds-blog-categories {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  margin: 16px calc(var(--ds-layout-padding) * -1);
  padding: 0 var(--ds-layout-padding);
  scrollbar-width: none;
}

.ds-blog-categories::-webkit-scrollbar {
  display: none;
}

.ds-blog-categories a {
  flex-shrink: 0;
}

.ds-blog-categories a.active {
  background: white;
  color: var(--ds-color-gray-800);
}

.ds-blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 24px 0;
}

.ds-blog-related {
  padding-top: 40px;
  padding-bottom: 40px;
}

.ds-blog-related .ds-blog-grid {
  margin: 0;
}

.ds-blog-post {
  display: flex;
  flex-flow: column nowrap;
}

.ds-blog-post-img {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  padding-top: 56.25;
  aspect-ratio: 16 / 9;
  background: var(--ds-color-gray-800);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.ds-blog-post-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.4, 0.15, 0, 1);
}

.ds-blog-post-content {
  padding: 4px;
  margin-top: 4px;
  border-radius: 16px;
  transition: background 0.3s cubic-bezier(0.4, 0.15, 0, 1);
}

.ds-blog-post-content div:first-child {
  text-transform: uppercase;
}

.ds-blog-post:hover img {
  transform: translateY(4px) scale(1.1);
}

.ds-blog-post:hover .ds-blog-post-content {
  background: var(--ds-color-gray-800);
}

.ds-blog-grid.span .ds-blog-post:first-child {
  grid-column: span 2;
}

.ds-blog-grid.span .ds-blog-post:first-child h4 {
  font: var(--ds-font-label-xl);
  font-weight: 500;
}

.ds-blog-faq {
  margin-top: 0px;
  padding-bottom: 80px;
}

@media screen and (min-width: 768px) {
  .ds-blog-container {
    margin-top: 32px;
  }

  .ds-blog-rss-button {
    grid-template-columns: max-content max-content;
  }

  .ds-blog-rss-button span {
    display: inline;
  }

  .ds-blog-categories {
    margin: 24px 0;
    padding: 0;
    gap: 8px;
    flex-flow: row wrap;
    justify-content: center;
  }

  .ds-blog-grid {
    gap: 40px;
    margin: 40px 0;
  }

  .ds-blog-grid.span .ds-blog-post:first-child {
    flex-flow: row nowrap;
  }

  .ds-blog-grid.span .ds-blog-post:first-child .ds-blog-post-img {
    max-width: 580px;
    flex: 4;
  }

  .ds-blog-grid.span .ds-blog-post:first-child .ds-blog-post-content {
    flex: 3 1;
    display: flex;
    flex-flow: column;
    justify-content: center;
    margin: 0 0 0 12px;
    padding: 12px;
  }

  .ds-blog-grid.span .ds-blog-post:first-child h4 {
    font: var(--ds-font-headline-s);
    font-weight: 500;
  }

  .ds-blog-post-content {
    padding: 12px;
  }

  .ds-blog-faq {
    margin-top: 0px;
    padding-bottom: 120px;
  }
}

@media screen and (min-width: 992px) {
  .ds-blog-container {
    margin-bottom: 64px;
  }

  .ds-blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ds-blog-grid.span .ds-blog-post:first-child {
    grid-column: span 3;
  }

  .ds-blog-grid.span .ds-blog-post:first-child .ds-blog-post-content {
    margin-left: 24px;
    padding: 16px;
  }

  .ds-blog-grid.span .ds-blog-post:first-child h4 {
    font: var(--ds-font-headline-l);
    font-weight: 500;
  }

  .ds-blog-grid.span .ds-blog-post:first-child div:last-child {
    font: var(--ds-font-label-l);
    font-weight: 500;
  }
}

@media screen and (min-width: 1280px) {
  .ds-blog-related {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .ds-blog-grid.span .ds-blog-post:first-child {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 991px) {
  .ds-blog-related .ds-blog-grid {
    grid-template-rows: 1fr;
    grid-auto-rows: 0;
    overflow: hidden;
  }
}
.ds-contribution .ds-body-l a,
.ds-contribution .ds-body-m a {
  color: var(--ds-color-primary-500);
  text-decoration: none;
}

.ds-contribution .ds-section-two-columns a {
  text-decoration: none;
}

.ds-contribution-section-cta {
  display: flex;
  flex-flow: column-reverse;
  padding-top: 32px;
  padding-bottom: 0;
}

.ds-contribution-section-cta > *:first-child {
  max-width: 240px;
  margin: 0 auto;
}

.ds-contribution-section-cta-button {
  display: flex;
  flex-flow: column;
  margin: 24px 0;
  gap: 8px;
}

.ds-contribution-shop-button {
  position: relative;
}

.ds-contribution-section-cta-products {
  display: grid;
  grid: auto / max-content 1fr;
  gap: 24px;
  margin: 24px 0;
}

.ds-contribution-section-cta-products > div:nth-child(odd) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--ds-color-gray-800);
  margin-right: -8px;
}

@media screen and (min-width: 768px) {
  .ds-contribution-section-cta > div > p {
    max-width: 520px;
  }

  .ds-contribution-section-cta-button {
    flex-flow: row;
  }

  .ds-contribution-shop-button .ds-shop-discount {
    position: absolute;
    top: -16px;
    right: -16px;
  }

  .ds-contribution-section-cta-products {
    grid: auto / repeat(2, max-content 1fr);
    gap: 40px;
    margin: 32px 0;
  }

  .ds-contribution-section-cta-products > div:nth-child(odd) {
    margin-right: -24px;
  }
}

@media screen and (min-width: 1024px) {
  .ds-contribution-section-cta {
    display: grid;
    grid: auto / 1fr max-content;
    gap: 40px;
    padding-top: 40px;
  }

  .ds-contribution-section-cta > *:first-child {
    max-width: 320px;
  }

  .ds-contribution-section-cta-button {
    margin: 40px 0 40px;
  }
}

.ds-contribution-info {
  flex-flow: column-reverse;
}

.ds-contribution-support {
  display: flex;
  flex-flow: column;
  gap: 40px;
  max-width: 594px;
  margin: 0 auto;
  padding-bottom: var(--ds-layout-spacing-2xl);
}

@media screen and (min-width: 1280px) {
  .ds-contribution-support {
    display: grid;
    grid: auto / min(50%, 480px) 1fr;
    align-items: center;
    max-width: 100%;
  }
}

.ds-contribution-pricing {
  display: flex;
  flex-flow: column;
  gap: 8px;
  border-radius: 16px;
  border: 1px solid var(--ds-color-gray-600);
  box-shadow: 30px 60px 160px rgba(0, 0, 0, 0.4);
  padding: 24px 16px;
  text-align: center;
}

.ds-contribution-pricing.yearly .monthly,
.ds-contribution-pricing.yearly .one-time,
.ds-contribution-pricing.monthly .yearly,
.ds-contribution-pricing.monthly .one-time,
.ds-contribution-pricing.one-time .monthly,
.ds-contribution-pricing.one-time .yearly {
  display: none;
}

.ds-contribution-pricing a.contributor {
  display: none;
}

.ds-contribution-pricing a.contributor.active {
  display: inline-block;
}

.ds-contribution-pricing-description {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.ds-contribution-pricing-payment {
  display: flex;
  flex-flow: column;
  align-self: center;
  gap: 16px;
  padding: 0 8px;
}

.ds-contribution-pricing-payment label {
  display: flex;
  flex-flow: row;
  column-gap: 8px;
  text-align: left;
}

.ds-contribution-pricing-payment label input {
  grid-row: span 2;
  align-self: start;
}

.ds-contribution-pricing-table {
  display: flex;
  gap: 8px;
  margin: 0 -8px 32px;
}

.ds-contribution-pricing-table button {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  background: none;
  border: 1px solid var(--ds-color-gray-500);
  border-radius: 8px;
  padding: 16px 12px;
  margin: 1px;
  flex: 1;
}

.ds-contribution-pricing-table button div {
  display: flex;
  flex-flow: column;
}

.ds-contribution-pricing-table button.selected {
  border-color: var(--ds-color-primary-500);
  border-width: 2px;
  margin: 0;
}

.ds-contribution-pricing-table button.selected div {
  color: var(--ds-color-primary-500);
}

@media screen and (min-width: 768px) {
  .ds-contribution-pricing {
    padding: 24px;
  }

  .ds-contribution-pricing-table {
    margin-left: 0px;
    margin-right: 0px;
  }

  .ds-contribution-pricing-table button div {
    display: block;
  }

  .ds-contribution-pricing > a {
    margin: 16px 16px 8px;
  }

  .ds-contribution-pricing-logos {
    display: flex;
    margin: 16px -24px -24px;
  }
}

@media screen and (min-width: 1280px) {
  .ds-contribution-pricing {
    padding: 40px 32px;
  }

  .ds-contribution-pricing-payment {
    display: flex;
    flex-flow: row;
    justify-content: center;
  }

  .ds-contribution-pricing > a {
    margin: 16px 0px 8px;
  }

  .ds-contribution-pricing-logos {
    display: flex;
    margin: 16px -40px -40px;
  }
}

.ds-contribution-platform {
  min-width: 240px;
  text-transform: none;
  font: var(--ds-font-body-l);
}

.ds-contribution-platform svg {
  width: 32px;
  height: 32px;
}

.ds-contribution-share a {
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 64px;
  background: var(--ds-color-gray-900);
  border-color: var(--ds-color-gray-900);
}

.ds-contribution-share a:hover {
  border-color: var(--ds-color-gray-500);
  background: var(--ds-color-gray-900);
}
.ds-comparison {
  color: var(--ds-color-gray-300);
}

.ds-comparison-header {
  display: flex;
  align-items: flex-end;
  position: relative;
  text-align: center;
  background: var(--ds-color-gray-700);
  padding-bottom: 8px;
  padding-top: 0;
}

.ds-comparison-header h1 {
  margin-top: 0;
}

.ds-comparison-header::before {
  z-index: 0;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ds-color-gray-800)
    url("data:image/svg+xml,%3Csvg width='1440' height='525' viewBox='0 0 1440 525' fill='none' xmlns='http://www.w3.org/2000/svg' style='background: %232f3136'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-560 0H0C132.548 0 240 107.452 240 240C240 242.827 239.951 245.642 239.854 248.445C239.951 251.616 240 254.927 240 258.38C240 499.88 461 499.88 720 499.88C979 499.88 1199 499.88 1199 258.38C1199 248.822 1199.38 240.358 1200.1 232.915C1203.85 103.644 1309.82 0 1440 0H2000V549H1440V549.38H0V549H-560V0Z' fill='%23202225'/%3E%3C/svg%3E")
    no-repeat center bottom;
  height: 525px;
}

.ds-comparison-header * {
  position: relative;
  z-index: 1;
}

.ds-comparison-header h2 {
  margin: 24px 0 8px;
}

.ds-comparison-header p {
  margin: 8px 0 0px;
  padding-bottom: 32px;
}

.ds-comparison-header gh-cta {
  margin: 0 0 60px;
}

.ds-comparison-header gh-cta::part(container) {
  border-color: var(--ds-color-gray-500);
}

.ds-comparison-button {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.ds-comparison-button a {
  text-decoration: none;
}

.ds-comparison-body *:first-child {
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  .ds-comparison-header {
    padding-bottom: 0px;
    padding-top: 80px;
  }

  .ds-comparison-header img {
    display: block;
    margin: 40px auto;
  }

  .ds-comparison-button {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}
.ds-header.ds-header-home {
  background: var(--ds-color-gray-800);
}

.ds-home-header {
  overflow: hidden;
}

#ds-home-header-animation {
  background: url('https://images.prismic.io/ghostery/20c83a12-ea8f-45e0-9e1d-c14c8362ed40_bg_animation.png?auto=format')
    no-repeat center 1px;
  background-size: contain;
}

.ds-home-section-cta h2 {
  max-width: 230px;
}

.ds-home-section-cta-button p {
  max-width: 100%;
}

.ds-home-section-cta-video {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: -8px;
}

.ds-home-video-container {
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
}

.ds-home-video {
  max-width: 100%;
}

.ds-home-tools {
  position: relative;
  z-index: 2;
  display: flex;
  flex-flow: column nowrap;
  gap: 16px;
  padding-bottom: 40px;
}

.ds-home-tools > a {
  display: flex;
  flex-flow: column nowrap;
  text-align: center;
  align-items: center;
  gap: 16px;
  padding: 40px 0 0;
  background: linear-gradient(
    180deg,
    rgba(18, 19, 23, 0.5) 0%,
    rgba(18, 19, 23, 0) 100%
  );
  border: 1px solid var(--ds-color-gray-900);
  border-radius: 16px;
  box-shadow: 0px 40px 60px 0px #00000033, 0px 2px 0px 0px #ffffff1a inset;
  overflow: hidden;
}

.ds-home-tools > a:hover {
  background: var(--ds-color-gray-800);
}

.ds-home-tools > a:hover > div:last-child {
  background: rgba(255, 255, 255, 0.1);
}

.ds-home-tools > a:active {
  background: var(--ds-color-gray-900);
}

.ds-home-tools > a:active > div:last-child {
  background: transparent;
}

.ds-home-tools > a > div:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  align-self: stretch;
  border-top: 1px solid var(--ds-color-gray-900);
  box-shadow: inset 0 1px 0 var(--ds-color-gray-600);
}

.ds-home-tools-features {
  display: grid;
  grid-template-columns: max-content 1fr;
  text-align: left;
  align-items: center;
  gap: 8px;
  padding: 4px 24px;
  flex: 1;
}

.ds-home-features-section {
  padding-bottom: 0;
}

.ds-home-features-header {
  display: flex;
  gap: 24px;
  align-items: center;
}

.ds-home-features-header div {
  display: flex;
  flex-flow: column;
  gap: 4px;
}

.ds-home-products a:hover {
  color: var(--ds-color-primary-500);
}

.ds-home-products .ds-home-learn-more:hover {
  color: var(--ds-color-white);
}

.ds-home-logos {
  margin: 0 -20px;
  padding: 0 40px;
}

.ds-home-logos-prev {
  left: 2px;
}

.ds-home-logos-next {
  right: 2px;
}

.ds-home-logos-container img {
  flex: 0 0 calc(100% / 3);
  aspect-ratio: 2;
  min-width: 0;
  object-fit: contain;
}

@media screen and (min-width: 768px) {
  .ds-header.ds-header-home {
    background: var(--ds-color-gray-800);
    box-shadow: inset 0 48px 0px var(--ds-color-gray-800),
      inset 0 49px 0px var(--ds-color-gray-600);
  }

  .ds-header.ds-header-home .ds-header-other a.active {
    background: var(--ds-color-gray-700);
  }

  .ds-home-section-cta h2 {
    max-width: none;
  }

  .ds-home-section-cta-button,
  .ds-home-section-cta-button p {
    max-width: max-content;
  }

  .ds-home-logos {
    margin: 0;
  }

  .ds-home-logos-container img {
    flex: 0 0 calc(100% / 4);
  }
}

@media screen and (min-width: 768px) {
  .ds-home-tools {
    flex-flow: row nowrap;
    justify-content: center;
    gap: 8px;
  }

  .ds-home-tools > a {
    flex: 1;
    max-width: 400px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .ds-home-section-cta > div:last-child {
    width: 100%;
    max-width: 100%;
  }

  .ds-home-tools-features {
    padding: 0;
  }
}

@media screen and (min-width: 992px) {
  .ds-home-section-cta > div:last-child {
    max-width: 70%;
  }
}

@media screen and (min-width: 1280px) {
  .ds-home-section-cta > div:last-child {
    max-width: 65%;
  }

  .ds-home-tools {
    gap: 24px;
  }

  .ds-home-logos-container img {
    flex: 0 0 calc(100% / 6);
  }
}
.ds-header {
  position: relative;
  height: 72px;
}

.ds-header * {
  -webkit-tap-highlight-color: transparent;
}

.ds-header-container {
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  display: grid;
  grid: auto / min-content 1fr min-content;
  align-content: start;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

@media screen and (max-width: 767px) {
  .ds-header-container.open {
    position: fixed;
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    --webkit-overflow-scrolling: touch;
    background: var(--ds-color-gray-800);
  }

  .ds-header-container.open .ds-header-logo,
  .ds-header-container.open .ds-header-menu-button {
    background: var(--ds-color-gray-700);
  }
}

.ds-header-logo {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  grid-column: 1 / 3;
  padding: 16px 20px;
}

.ds-header-logo a {
  display: flex;
}

.ds-header-menu-button {
  display: grid;
  place-items: center;
  padding: 16px 20px;
  grid-column: 3;
}

.ds-header-menu-button button {
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  width: 40px;
  height: 40px;
  background: var(--ds-color-gray-600);
  border: none;
  border-radius: 20px;
  color: white;
}

.ds-header-menu-button .ds-header-menu-close {
  display: none;
}

.open .ds-header-menu-button .ds-header-menu-close {
  display: block;
}

.open .ds-header-menu-button .ds-header-menu-open {
  display: none;
}

.ds-header-actions {
  display: flex;
  flex-flow: column;
  gap: 8px;
  padding: 20px;
  grid-column: 1 / 4;
  background: var(--ds-color-gray-800);
}

.ds-header-list {
  display: flex;
  flex-flow: column;
  grid-column: 1 / 4;
  color: white;
  border-top: 1px solid var(--ds-color-gray-600);
  border-bottom: 1px solid var(--ds-color-gray-600);
  margin-bottom: 16px;
  background: var(--ds-color-gray-700);
}

.ds-header-list p {
  padding: 24px 24px 0;
}

.ds-header-list a {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  margin-left: 24px;
  padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--ds-color-gray-600);
  color: white;
  font: var(--ds-font-label-l);
}

.ds-header-list a::after {
  position: absolute;
  top: 0;
  right: 24px;
  bottom: 0;
  content: '';
  display: block;
  width: 24px;
  background: center center no-repeat
    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.46967 3.96967C8.76256 3.67678 9.23744 3.67678 9.53033 3.96967L17.0303 11.4697C17.3232 11.7626 17.3232 12.2374 17.0303 12.5303L9.53033 20.0303C9.23744 20.3232 8.76256 20.3232 8.46967 20.0303C8.17678 19.7374 8.17678 19.2626 8.46967 18.9697L15.4393 12L8.46967 5.03033C8.17678 4.73744 8.17678 4.26256 8.46967 3.96967Z' fill='white'/%3E%3C/svg%3E%0A");
}

.ds-header-list a:last-of-type {
  border-bottom: none;
}

.ds-header-list a:hover {
  color: var(--ds-color-primary-500);
}

.ds-header-more-menu {
  display: none;
}

.ds-header-list a.ds-header-whotracksme-search,
.ds-header-list gh-wtm-search-input {
  display: none;
}

@media screen and (min-width: 768px) {
  .ds-header,
  .ds-header-container.open {
    height: auto;
  }

  .ds-header {
    position: static;
  }

  .ds-header-type-pages {
    background: var(--ds-color-gray-700);
    box-shadow: inset 0 48px 0px var(--ds-color-gray-800),
      inset 0 49px 0px var(--ds-color-gray-600);
  }

  .ds-header-type-account .ds-header-actions > a {
    display: none;
  }

  .ds-header-container {
    position: static;
    grid: min-content min-content / min-content 1fr max-content;
    max-width: var(--ds-layout-container-max-width);
    height: auto;
    padding: 0px var(--ds-layout-padding);
    margin: 0 auto;
    gap: 8px;
    background: none;
    overflow: visible;
  }

  .ds-header-logo {
    grid-area: 2 / 1 / 3 / 2;
    background: none;
    padding: 20px 4px 20px 0;
  }

  .ds-header-list {
    flex-flow: row;
    align-items: center;
    gap: 14px 24px;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
  }

  .ds-header-list a {
    position: relative;
    border: none;
    padding: 0;
    margin: 0;
    font: var(--ds-font-label-s);
    gap: 3px;
  }

  .ds-header-list a svg,
  .ds-header-list a img {
    width: 18px;
    height: 18px;
  }

  .ds-header-list a::after {
    display: none;
  }

  .ds-header-list .ds-header-list-item-mobile {
    display: none;
  }

  .ds-header-menu-button {
    display: none;
  }

  .ds-header-privacy-suite {
    grid-area: 1 / 1 / 2 / 4;
    flex-wrap: wrap;
    padding: 16px 0 0;
  }

  .ds-header-privacy-suite p {
    width: 100%;
    padding: 0;
  }

  .ds-header-privacy-suite a {
    position: relative;
    z-index: 1;
  }

  .ds-header-privacy-suite a.active::before {
    z-index: -1;
    content: '';
    display: block;
    position: absolute;
    top: -10px;
    left: -12px;
    right: -12px;
    bottom: -9px;
    background: var(--ds-color-gray-700);
    border: 1px solid var(--ds-color-gray-600);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
  }

  .ds-header-other {
    column-gap: 0px;
    grid-area: 2 / 2 / 3 / 3;
  }

  .ds-header-other a {
    padding: 10px 16px;
    border-radius: 24px;
  }

  .ds-header-other a.active {
    color: var(--ds-color-white);
    background: var(--ds-color-gray-800);
  }

  .ds-header-actions {
    grid-area: 2 / 3 / 3 / 4;
    flex-flow: row-reverse;
    align-items: center;
    background: none;
    padding: 0;
  }

  .ds-header-privacy-suite p {
    display: none;
  }

  .ds-header-privacy-suite {
    gap: 8px 24px;
  }

  .ds-header-privacy-suite a {
    padding-bottom: 6px;
  }

  .ds-header-more-menu {
    display: block;
    position: relative;
  }

  .ds-header-more-menu input {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    cursor: pointer;
  }

  .ds-header-more-menu input:hover + label {
    color: var(--ds-color-primary-500);
  }

  .ds-header-more-menu label {
    text-transform: none;
    max-width: 280px;
    justify-content: flex-start;
    font: var(--ds-font-label-m);
    transition: color 0.2s ease-in-out;
  }

  .ds-header-more-menu label span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ds-header-more-menu label svg {
    flex-shrink: 0;
  }

  .ds-header-more-menu-dropdown {
    display: none;
  }

  .ds-header-more-menu-dropdown > * {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;
  }

  .ds-header-more-menu-dropdown > div {
    border-bottom: 1px solid var(--ds-color-gray-600);
  }

  .ds-header-more-menu-dropdown > a:hover {
    color: var(--ds-color-primary-500);
  }

  .ds-header-more-menu input:checked ~ .ds-header-more-menu-dropdown {
    z-index: 1000;
    display: flex;
    flex-flow: column;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    border-radius: 8px;
    border: 1px solid var(--ds-color-gray-600);
    background: var(--ds-color-gray-700);
    box-shadow: 30px 60px 160px 0px rgba(0, 0, 0, 0.4);
  }

  .ds-header-whotracksme-menu-dropdown {
    width: 180px;
  }

  .ds-header-list .ds-header-whotracksme-menu-dropdown > a {
    border-radius: 0;
    padding: 0;
    margin: 12px 16px;
    font: var(--ds-font-label-s);
  }

  .ds-header-list .ds-header-whotracksme-menu-dropdown > a svg {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }

  .ds-header-whotracksme-menu-dropdown > div {
    padding: 0;
    margin: 0 16px;
  }

  .ds-header-user-menu-dropdown {
    width: 360px;
  }

  .ds-header-more-menu input:checked ~ label svg:last-child {
    transform: rotate(180deg);
  }

  .ds-header-list .ds-header-list-contributor-badge {
    height: 34px;
    width: 34px;
    margin: -8px -12px -8px 2px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .ds-header-my-account {
    padding: 0;
    width: 38px;
    height: 38px;
  }

  .ds-header-my-account svg {
    width: 24px;
    height: 24px;
  }

  .ds-header-my-account span {
    display: none;
  }

  .ds-header-list .ds-shop-discount {
    position: absolute;
    top: -12px;
    right: -16px;
  }
}

@media screen and (min-width: 992px) {
  .ds-header-container {
    gap: 6px;
  }

  .ds-header-logo {
    padding-right: 36px;
  }

  .ds-header-privacy-suite {
    gap: 8px 40px;
  }

  .ds-header-privacy-suite a.active::before {
    bottom: -7px;
    left: -16px;
    right: -16px;
  }

  .ds-header-list a {
    font: var(--ds-font-label-m);
  }

  .ds-header-more-menu label {
    max-width: 350px;
  }

  .ds-header-other {
    column-gap: 8px;
  }

  .ds-header-list a.ds-header-whotracksme-search {
    display: flex;
    justify-content: center;
    height: 38px;
    width: 40px;
    padding-left: 0;
    padding-right: 0;
    color: var(--ds-color-white);
    font: var(--ds-font-body-m);
    border: 2px solid var(--ds-color-gray-600);
    margin: 0 24px 0 12px;
  }

  .ds-header-list a.ds-header-whotracksme-search span {
    display: none;
  }

  .ds-header-list a.ds-header-whotracksme-search:hover {
    color: var(--ds-color-primary-500);
    border: 2px solid var(--ds-color-gray-500);
  }

  .ds-header-list gh-wtm-search-input input {
    height: 38px;
    color: var(--ds-color-white);
    font: var(--ds-font-body-m);
    flex: 1;
    border-width: 2px;
  }

  .ds-header-list gh-wtm-search-input input:hover,
  .ds-header-list gh-wtm-search-input input:focus {
    box-shadow: none;
    border: double 2px transparent;
    background-image: linear-gradient(
        var(--ds-color-gray-800),
        var(--ds-color-gray-800)
      ),
      var(--ds-color-gradient-wtm);
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }

  .ds-header-list gh-wtm-search-input input::-webkit-search-cancel-button {
    right: -18px;
  }

  .ds-header-list a.ds-header-whotracksme-menu-search {
    display: none;
  }
}

@media screen and (min-width: 1280px) {
  .ds-header-logo {
    padding-right: 60px;
  }

  .ds-header-privacy-suite p {
    display: block;
    width: auto;
    margin: 0;
    padding-bottom: 6px;
  }

  .ds-header-more-menu label {
    max-width: 400px;
  }

  .ds-header-type-account .ds-header-actions > a.ds-header-actions-home {
    display: block;
  }

  .ds-header-type-account
    .ds-header-more-menu-dropdown
    .ds-header-actions-home {
    display: none;
  }

  .ds-header-list a.ds-header-whotracksme-search {
    flex: 1;
    color: var(--ds-color-gray-400);
    width: auto;
  }

  .ds-header-list a.ds-header-whotracksme-search span {
    display: inline;
  }

  .ds-header-list gh-wtm-search-input {
    display: flex;
    margin: 0 24px 0 12px;
  }
}

.ds-footer {
  position: relative;
  overflow: hidden;
  padding: 40px 16px;
}

.ds-footer-logo {
  display: flex;
  justify-content: center;
}

.ds-footer-container {
  display: flex;
  flex-flow: column;
  gap: 40px;
  width: 100%;
  max-width: var(--ds-layout-container-max-width);
  margin: 0 auto;
}

.ds-footer-socials {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.ds-footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  gap: 8px;
  color: var(--ds-color-gray-300);
}

.ds-footer-nav-container {
  display: grid;
  grid: auto / repeat(2, 1fr);
  gap: 24px;
}

.ds-footer-nav {
  display: flex;
  flex-flow: column;
  align-items: start;
  gap: 4px;
  font: var(--ds-font-label-s);
}

.ds-footer-nav p {
  text-transform: uppercase;
  margin-bottom: 6px;
}

.ds-footer-nav a {
  display: flex;
  align-items: center;
  height: 36px;
  color: white;
  gap: 4px;
  white-space: nowrap;
}

.ds-footer-nav a:hover,
.ds-footer-socials a:hover {
  color: var(--ds-color-primary-500);
}

.ds-footer-nav svg,
.ds-footer-nav img {
  width: 16px;
  height: 16px;
}

.ds-footer-notice {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 24px 40px;
  padding-top: 40px;
  margin: 0 -16px;
  font: var(--ds-font-label-xs);
  border-top: 1px solid var(--ds-color-gray-700);
}

.ds-footer-copyrights {
  display: flex;
  align-items: center;
  column-gap: 8px;
}

.ds-footer-copyrights svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ds-footer-copyrights p {
  margin: 0;
}

.ds-footer-nav-bottom {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.ds-footer-nav-bottom a {
  display: flex;
  align-items: center;
  height: 40px;
  color: var(--ds-color-gray-400);
}

.ds-footer-nav-bottom a:hover {
  color: var(--ds-color-white);
}

.ds-footer-nav .ds-footer-status {
  display: flex;
  gap: 8px;
}

.ds-footer-nav .ds-footer-status-icon {
  width: 8px;
  height: 8px;
  border-radius: 6px;
  background: var(--ds-color-error-500);
}

.ds-footer-summary {
  padding-top: 0;
  border-top: 1px solid var(--ds-color-gray-600);
}

.ds-footer-summary .ds-footer-notice {
  border-top: none;
}

.ds-footer-badge {
  color: var(--ds-color-white);
  padding: 2px 4px;
  font: var(--ds-font-label-xs);
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background: var(--ds-color-success-500);
}

@media screen and (min-width: 768px) {
  .ds-footer {
    padding: 40px;
  }

  .ds-footer-summary {
    padding-top: 0;
  }

  .ds-footer-logo {
    justify-content: start;
  }

  .ds-footer-notice {
    flex-flow: row wrap;
    margin: 0 -40px;
    padding: 40px 40px 0;
  }

  .ds-footer-socials {
    margin-left: -8px;
  }
}

@media screen and (min-width: 992px) {
  .ds-footer {
    padding: 40px 40px 24px;
  }

  .ds-footer-summary {
    padding-top: 0;
  }

  .ds-footer-nav-container {
    grid: repeat(2, max-content) / repeat(3, 1fr);
    grid-auto-flow: column;
  }

  .ds-footer-nav a {
    height: 24px;
  }

  .ds-footer-notice {
    padding-top: 24px;
    justify-content: space-between;
  }

  .ds-footer-socials {
    margin-left: 0px;
    gap: 4px;
  }
}

@media screen and (min-width: 1280px) {
  .ds-footer-container {
    display: grid;
    grid: auto / 1fr 4fr;
  }

  .ds-footer-nav-container {
    gap: 40px;
  }

  .ds-footer-notice {
    font: var(--ds-font-body-s);
    grid-column: span 2;
    border-top: none;
  }

  .ds-footer-notice::before {
    position: absolute;
    left: 0;
    right: 0;
    content: '';
    display: block;
    height: 1px;
    margin-top: -90px;
    background: var(--ds-color-gray-700);
  }

  .ds-footer-socials a {
    width: 40px;
    height: 40px;
  }
}

.ds-menu {
  position: relative;
  background: var(--ds-color-gray-800);
}

.ds-menu::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(270deg, #2f3136 0%, rgba(47, 49, 54, 0) 100%);
  pointer-events: none;
}

.ds-menu-container {
  display: flex;
  flex-flow: row;
  overflow-x: auto;
  gap: 12px;
  padding: 16px var(--ds-layout-padding);
  background: var(--ds-color-gray-700);
  border-top: 2px solid var(--ds-color-gray-800);
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  margin: 0 auto;
}

.ds-menu-container::-webkit-scrollbar {
  display: none;
}

.ds-menu-container a {
  white-space: nowrap;
  padding: 8px;
  color: var(--ds-color-gray-300);
}

.ds-menu-container a.active {
  color: var(--ds-color-white);
  border-bottom: 2px solid var(--ds-color-primary-500);
}

@media screen and (min-width: 768px) {
  .ds-menu {
    padding: var(--ds-layout-padding);
  }

  .ds-menu::after {
    display: none;
  }

  .ds-menu-container {
    border-radius: 16px;
    justify-content: center;
    gap: 16px;
    max-width: calc(
      var(--ds-layout-container-max-width) - var(--ds-layout-padding) * 2
    );
  }

  .ds-menu-container a {
    padding: 16px;
  }
}

.ds-notification {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.ds-notification > p {
  flex: 1;
}

.ds-notification > a,
.ds-notification > button {
  width: auto;
}

.ds-notification > img {
  display: none;
}

.ds-notification > button {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-color: var(--ds-color-gray-300);
}

.ds-notification > button:hover {
  background: transparent;
  border-color: var(--ds-color-gray-400);
}

.ds-notification > button svg {
  width: 16px;
  height: 16px;
}

@media screen and (min-width: 768px) {
  .ds-notification > img {
    display: block;
  }
}

@media screen and (min-width: 992px) {
  .ds-notification > p {
    font: var(--ds-font-display-xs);
  }
}

.ds-notification-donate-container {
  padding: 8px;
}

.ds-notification-donate {
  display: flex;
  flex-flow: column;
  align-items: start;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  background: var(--ds-color-gray-600, #3f4146);
}

.ds-notification-donate-icon {
  display: none;
}

.ds-notification-donate-text {
  flex: 1 1;
}

.ds-notification-donate-icon svg path {
  fill: var(--ds-color-wtm-700);
}

.ds-notification-donate.light {
  background: #dbd5ff;
  color: #412dbf;
}

.ds-notification-donate.success {
  background: #d8ffd5;
  color: #0c5007;
}

.ds-notification-donate.success .ds-notification-donate-icon {
  background: var(--ds-color-success-400);
}

.ds-notification-donate.success .ds-notification-donate-icon svg path {
  fill: #13770c;
}

.ds-notification-donate.danger {
  background: #ffd5dc;
  color: #500713;
}

.ds-notification-donate.danger .ds-notification-donate-icon {
  background: #ff96a8;
}

.ds-notification-donate.danger .ds-notification-donate-icon svg path {
  fill: #e01a3b;
}

.ds-notification-donate.warning {
  background: #fff4d5;
  color: #713800;
}

.ds-notification-donate.warning .ds-notification-donate-icon {
  background: #ffe396;
}

.ds-notification-donate.warning .ds-notification-donate-icon svg path {
  fill: #e88700;
}

@media screen and (min-width: 768px) {
  .ds-notification-donate-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 24px;
    background: var(--ds-color-wtm-400, #9280ff);
  }
  .ds-notification-donate {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
  }
}
/* From */

.ds-newsletter-form {
  min-height: 200px;
}

@media screen and (min-width: 768px) {
  .ds-newsletter-form {
    max-width: 540px;
  }
}

.ds-newsletter-form-label {
  display: grid;
  grid: 1fr / min-content 1fr;
  grid-gap: var(--ds-layout-spacing-s) var(--ds-layout-spacing-m);
}

.ds-newsletter-form-label input {
  margin-top: 2px;
}

.ds-newsletter-form-label .ds-form-error-msg {
  grid-column: 1 / span 2;
}

.ds-newsletter-form-label .ds-form-error-msg:empty {
  display: block;
}

.ds-newsletter-form-label .ds-form-error-msg:empty:before {
  display: inline-block;
  content: ' ';
  min-height: 1em;
}

.ds-newsletter-form-email {
  position: relative;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .ds-newsletter-form-email {
    max-width: 380px;
  }
}

.ds-newsletter-form-textfield {
  color: var(--ds-color-newsletter-500);
  width: 100%;
  padding: 11px 146px 11px 20px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border: double 1px transparent;
  border-radius: 32px;
  background-image: linear-gradient(
      var(--ds-color-gray-800),
      var(--ds-color-gray-800)
    ),
    var(--ds-color-gradient-newsletter);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

@media screen and (min-width: 768px) {
  .ds-newsletter-form-email {
    max-width: 420px;
  }

  .ds-newsletter-form-textfield {
    padding: 17px 146px 17px 24px;
  }
}

.ds-newsletter-form-textfield::placeholder {
  background: var(--ds-color-gradient-newsletter);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  opacity: 1;
}

.ds-newsletter-form-email button {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  padding: 0 16px;
}

@media screen and (min-width: 768px) {
  .ds-newsletter-form-email button {
    padding: 0 24px;
  }
}

/* cards */

.ds-newsletter-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  grid-gap: var(--ds-layout-spacing-3xl) var(--ds-layout-spacing-2xl);
  margin: 40px 0px var(--ds-layout-spacing-4xl);
}

.ds-newsletter-card {
  display: grid;
  grid-auto-rows: max-content;
  grid-gap: 12px;
  text-decoration: none;
}

@media screen and (min-width: 768px) {
  .ds-newsletter-card {
    grid-gap: 16px;
  }
}

.ds-newsletter-card:hover .ds-newsletter-card-headline {
  color: var(--ds-color-primary-500);
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .ds-newsletter-cards.ds-newsletter-cards-hidden
    .ds-newsletter-card:last-child {
    display: none;
  }
}

.ds-newsletter-card-img {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  padding-top: 66%;
  background: var(--ds-color-gray-800);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.ds-newsletter-card-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-auto-rows: min-content;
  align-content: center;
  justify-content: center;
  justify-items: center;
  gap: var(--ds-layout-spacing-s);
  font-family: var(--ds-font-family-headline);
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
}

.ds-newsletter-card-img::after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--ds-color-primary-500);
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease opacity;
}

.ds-newsletter-card-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.2s ease transform;
}

.ds-newsletter-card:hover .ds-newsletter-card-img img {
  transform: scale(1.05);
}

.ds-newsletter-card:hover .ds-newsletter-card-img::after {
  opacity: 0.1;
}

.ds-newsletter-card-info {
  display: grid;
  grid-gap: 8px;
}

.ds-newsletter-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.ds-newsletter-card-tags {
  font: var(--ds-font-body-2xl);
  line-height: 30px;
  max-height: 66px;
  overflow: hidden;
}

.ds-newsletter-card-full .ds-newsletter-card-desc {
  display: block;
}

.ds-newsletter-card-full .ds-newsletter-card-tags {
  max-height: none;
  overflow: visible;
}

/* Editions */

.ds-newsletter-editions {
  padding-top: var(--ds-layout-spacing-xl);
  margin-top: calc(var(--ds-layout-spacing-xl) * -1);
}

.ds-newsletter-edition {
  max-width: 528px;
  margin-top: -46px;
}

/* Success */

@media screen and (max-width: 767px) {
  .ds-newsletter-success-cta {
    display: flex;
    flex-flow: column-reverse;
    align-items: center;
    padding-top: var(--ds-layout-spacing-l);
  }

  .ds-newsletter-success-cta img {
    max-width: 220px;
  }
}
.ds-extension-mentions {
  display: grid;
  grid: auto-flow / repeat(auto-fit, minmax(135px, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: 80px;
  gap: var(--ds-layout-spacing-m);
}

.ds-extension-mentions > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--ds-color-white);
  border-radius: 8px;
  padding: var(--ds-layout-spacing-s);
}

.ds-extension-mentions svg {
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  .ds-extension-footer-cta .ds-section-cta-img > *:first-child {
    margin-left: -31%;
  }
}

.ds-extension-video-cta {
  position: absolute;
  bottom: 2%;
  left: 8%;
  padding-top: 8px;
  padding-bottom: 8px;
}

@media screen and (min-width: 768px) {
  .ds-extension-video-cta {
    bottom: 0px;
    left: 20%;
  }
}

@media screen and (min-width: 992px) {
  .ds-extension-title {
    max-width: 628px;
  }

  h2.ds-extension-subtitle {
    max-width: 590px;
  }

  .ds-extension-video-cta {
    bottom: 14px;
    left: 32%;
  }
}

@media screen and (min-width: 1280px) {
  .ds-extension-video-cta {
    left: 50%;
  }
}

.ds-extension-video {
  z-index: 1000;
  position: relative;
}

.ds-extension-video video {
  display: block;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateY(-35%);
}

.ds-extension-press-logos {
  padding: 24px 0;
}

@media screen and (min-width: 768px) {
  .ds-extension-video {
    margin-bottom: -15%;
  }
  .ds-extension-video video {
    transform: translateY(-60%);
  }
}

@media screen and (min-width: 1024px) {
  .ds-extension-video {
    margin-bottom: -15%;
  }
}

@media screen and (min-width: 1280px) {
  .ds-extension-video {
    margin-bottom: -12%;
  }
  .ds-extension-video video {
    transform: translateY(-60%);
  }
}
.ds-support-faq {
  padding: 40px 0;
}

.ds-support-faq h1 {
  margin-bottom: 24px;
}

.ds-support-faq-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ds-support-faq-categories h3 {
  width: 100%;
}

.ds-support-faq-section h2 {
  margin-bottom: 32px;
  margin-top: 40px;
}

.ds-support-faq-section:last-of-type .ds-support-faq-answer:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.ds-support-faq-answer {
  border-bottom: 1px solid var(--ds-color-gray-600);
  padding-bottom: 24px;
  margin-bottom: 24px;
  margin-top: 8px;
}

.ds-support-faq-answer br {
  display: none;
}

.ds-support-faq-answer li,
.ds-support-faq-answer p {
  font: var(--ds-font-body-l);
}

.ds-support-faq-answer ul,
.ds-support-faq-answer ol {
  padding-left: 24px;
}

.ds-support-faq-answer p,
.ds-support-faq-answer ul,
.ds-support-faq-answer ol,
.ds-support-faq-answer li {
  margin-bottom: 1em;
}

.ds-support-faq-answer p:last-child,
.ds-support-faq-answer ul:last-child,
.ds-support-faq-answer ol:last-child,
.ds-support-faq-answer li:last-child {
  margin-bottom: 0;
}

.ds-support-faq-answer a {
  color: white;
  text-decoration: underline;
}

.ds-support-faq-help {
  margin: 0 0 40px;
}

@media screen and (min-width: 768px) {
  .ds-support-faq {
    padding: 64px 0;
  }

  .ds-support-faq-section h2 {
    margin-bottom: 40px;
    margin-top: 64px;
  }

  .ds-support-faq-help {
    margin: 0 0 64px;
  }
}

@media screen and (min-width: 992px) {
  .ds-support-faq {
    padding: 80px 0;
  }

  .ds-support-faq-help {
    margin: 0 0 80px;
  }
}

@media screen and (min-width: 1280px) {
  .ds-support-faq {
    position: relative;
    display: grid;
    grid: max-content 1fr / 270px 1fr;
    align-items: start;
    gap: 80px;
    max-width: none;
  }

  .ds-support-faq h1 {
    grid-column: 2 / 3;
  }

  .ds-support-faq-categories {
    position: sticky;
    top: 24px;
    align-self: start;
    flex-flow: column nowrap;
    align-items: start;
    gap: 24px;
  }

  .ds-support-faq-categories a {
    font: var(--ds-font-headline-xs);
    font-weight: 400;
    text-transform: none;
    background: none;
    padding: 0;
    border: none;
    border-radius: 0px;
  }

  .ds-support-faq-categories a:hover {
    padding: 0;
    border: none;
    background: none;
  }

  .ds-support-faq-categories a.active {
    padding-left: 16px;
    border-left: 2px solid var(--ds-color-primary-500);
  }

  .ds-support-faq-section:first-of-type {
    margin-top: -64px;
  }
}
.ds-static {
  margin-bottom: 50px;
  max-width: 660px;
}

.ds-static h1,
.ds-static h2,
.ds-static h3,
.ds-static h4 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ds-color-white);
}

.ds-static h1 {
  font: var(--ds-font-headline-xl);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 50px;
}

.ds-static h2 {
  font: var(--ds-font-headline-l);
  text-align: left;
}

.ds-static h3 {
  font: var(--ds-font-headline-m);
  text-align: left;
}

.ds-static h4 {
  font: var(--ds-font-headline-s);
  text-align: left;
}

.ds-static p {
  font: var(--ds-font-body-l);
  color: var(--ds-color-gray-300);
  text-align: left;
}

.ds-static a > span {
  font: var(--ds-font-body-l);
}

.ds-static strong {
  color: var(--ds-color-gray-200);
}

.ds-static em {
  color: var(--ds-color-gray-300);
}

.ds-static ul {
  text-align: left;
  padding-left: 2em;
}

.ds-static li {
  font: var(--ds-font-body-l);
}

.ds-static table {
  width: 100%;
  text-align: left;
}

.ds-static table tr {
  border-top: 1px solid var(--ds-color-gray-800);
}

.ds-static table td,
.ds-static table th {
  padding: 6px 13px;
  border: 1px solid var(--ds-color-gray-800);
}

.ds-static pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: var(--ds-color-gray-800);
  border-radius: 3px;
  text-align: left;
}

.ds-static pre code {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
  word-break: normal;
  white-space: pre;
}

.ds-static pre code::after,
.ds-static pre code::before {
  content: normal;
  letter-spacing: -0.2em;
}

/* Privacy Policy */

.ds-static-policy {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
}

.ds-static-policy h1 {
  font: var(--ds-font-display-xl);
  background: linear-gradient(129deg, #129bf2 6.95%, #f77d7a 84.11%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 24px;
}

.ds-static-policy div#doc h1 {
  display: none;
}

.ds-static-policy h1 + p {
  font: var(--ds-font-body-xl);
  color: #f2f4f7;
  text-align: center;
  margin: 24px 0 80px;
}
.ds-search-header {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 72px);
  min-height: calc(100svh - 72px);
  padding: 0 var(--ds-layout-padding) 72px;
}

.ds-search-header .ds-section-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.ds-search-header-content {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin: 0 auto;
  width: 100%;
}

.ds-search-header-content svg {
  max-width: calc(100% - 36px);
}

.ds-search-header-input {
  position: relative;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 100%;
  padding: 12px;
  text-align: center;
  background: var(--ds-color-gray-800);
  border: 2px solid var(--ds-color-gray-600);
  border-radius: 8px;
}
.ds-search-header-input:hover {
  background: linear-gradient(
        var(--ds-color-gray-800),
        var(--ds-color-gray-800)
      )
      padding-box,
    linear-gradient(to bottom right, #67a73a, #00aef0) border-box;
  border: 2px solid transparent;
}

.ds-search-header-input span {
  display: block;
  background: linear-gradient(141.55deg, #67a73a 15.08%, #00aef0 75.66%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.ds-search-header-input svg {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.ds-search-header-select a[hidden] {
  display: none;
}

.ds-search-header-select select {
  appearance: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: no-repeat center center var(--ds-color-gray-700)
    url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.308058 1.05806C0.552136 0.813981 0.947864 0.813981 1.19194 1.05806L7 6.86612L12.8081 1.05806C13.0521 0.813981 13.4479 0.813981 13.6919 1.05806C13.936 1.30214 13.936 1.69786 13.6919 1.94194L7.44194 8.19194C7.19786 8.43602 6.80214 8.43602 6.55806 8.19194L0.308058 1.94194C0.0639806 1.69786 0.0639806 1.30214 0.308058 1.05806Z' fill='white'/%3E%3C/svg%3E%0A");
  color: transparent;
  border: 1px solid var(--ds-color-gray-600);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.ds-search-header-select select:hover {
  border-color: var(--ds-color-white);
}

.ds-search-card-section {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 8px;
  margin-top: 160px;
  padding: 40px 20px;
  border-radius: 16px;
}

.ds-search-card-section p a {
  color: var(--ds-color-white);
  text-decoration: underline;
}

.ds-search-card-section > svg {
  margin-top: -150px;
}

.ds-search-card-section > * {
  max-width: 800px;
}

.ds-search-footer {
  border-top: 1px solid var(--ds-color-gray-800);
  padding: 120px var(--ds-layout-padding);
}

@media screen and (min-width: 768px) {
  .ds-search-header {
    min-height: calc(100vh - 120px);
    min-height: calc(100svh - 120px);
    padding-bottom: 120px;
  }

  .ds-search-header-content {
    max-width: 640px;
  }

  .ds-search-footer {
    padding: 120px 0;
  }
}

@media screen and (min-width: 992px) {
  .ds-search-card-section {
    margin-top: 200px;
  }

  .ds-search-footer {
    padding-top: 164px;
    padding-bottom: 164px;
  }
}

.ds-search-section-dense {
  padding-top: 80px;
  padding-bottom: 20px;
}
p.ds-enterprise-get-a-quote {
  display: flex;
  flex-flow: column;
  max-width: 100%;
  gap: 12px;
}

.ds-enterprise-copy-email-address {
  width: 240px;
  flex-flow: row wrap;
  gap: 0 8px;
  justify-content: start;
  cursor: pointer;
  position: relative;
  font: var(--ds-font-body-m);
  text-transform: none;
}

.ds-enterprise-copy-email-address:hover,
.ds-enterprise-copy-email-address:focus,
.ds-enterprise-copy-email-address:active {
  color: var(--ds-color-primary-500);
  background: none;
}

.ds-enterprise-copy-email-address.copied::after {
  box-sizing: border-box;
  content: attr(data-copied);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  font: var(--ds-font-body-m);
  color: var(--ds-color-white);
  background: var(--ds-color-gray-600);
  padding: 16px;
  border-radius: 8px;
  text-wrap: balance;
}

.ds-enterprise-features {
  position: relative;
  z-index: 2;
  margin-top: -200px;
}

.ds-enterprise-browser-logos svg {
  width: 48px;
  height: 48px;
  margin: 0 var(--ds-layout-spacing-xs);
}

.ds-enterprise-bullet {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0 16px;
  margin-bottom: 24px;
}

.ds-enterprise-product {
  align-items: start;
}

.ds-enterprise-bullet svg {
  grid-row: span 2;
}

.ds-enterprise-bullet a {
  font-weight: 500;
}

.ds-enterprise-slider-images {
  display: none;
}

.ds-enterprise-slider-desc {
  display: flex;
  flex-flow: column nowrap;
  gap: 40px;
}

.ds-enterprise-slider-desc > div {
  display: grid;
  grid: auto / max-content 1fr;
  grid-gap: 8px 20px;
}

.ds-enterprise-slider-icon {
  display: block;
  align-self: start;
  grid-row: span 2;
  color: var(--ds-color-gray-400);
  background: var(--ds-color-gray-800);
  padding: 16px;
  border-radius: 36px;
}

.ds-enterprise-slider-icon svg {
  display: block;
  width: 40px;
  height: 40px;
}

.ds-enterprise-form-fields {
  display: flex;
  flex-flow: row wrap;
  gap: 24px 16px;
}

.ds-enterprise-form-fields > div {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}

.ds-enterprise-form-fields > p {
  width: 100%;
}

.ds-enterprise-form-name {
  max-width: 440px;
  flex: 1;
}

.ds-enterprise-form.success,
.ds-enterprise-form + .ds-enterprise-form-success {
  display: none;
}

.ds-enterprise-form.success + .ds-enterprise-form-success {
  display: block;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .ds-enterprise-features {
    flex-flow: row wrap;
  }

  .ds-enterprise-features > div {
    max-width: 50%;
    flex: 1 1 30%;
    flex-flow: column;
    text-align: center;
  }

  .ds-enterprise-features > div:first-child {
    min-width: 50%;
  }
}

@media screen and (min-width: 768px) {
  p.ds-enterprise-get-a-quote {
    flex-flow: row;
    align-items: center;
    max-width: max-content;
  }

  .ds-enterprise-features {
    margin-top: -210px;
  }

  .ds-enterprise-slider-images {
    display: block;
    position: relative;
    aspect-ratio: 2/1;
    margin-bottom: 64px;
  }

  @keyframes ds-enterprise-slider-fade-in-fade-out {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    28% {
      opacity: 1;
    }
    33% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

  .ds-enterprise-slider-images img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    object-fit: contain;
    animation: ds-enterprise-slider-fade-in-fade-out 18s infinite;
  }

  .ds-enterprise-slider-images img:nth-child(1) {
    animation-delay: 0s;
  }

  .ds-enterprise-slider-images img:nth-child(2) {
    animation-delay: 6s;
  }

  .ds-enterprise-slider-images img:nth-child(3) {
    animation-delay: 12s;
  }

  .ds-enterprise-slider-desc {
    display: flex;
    flex-flow: row;
    gap: 32px;
  }

  .ds-enterprise-slider-desc > div {
    position: relative;
    flex: 1;
    display: flex;
    flex-flow: column;
    gap: 12px;
  }

  .ds-enterprise-slider-desc > div::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ds-color-gray-800);
    border-radius: 2px;
  }

  @keyframes enterprise-slider-width {
    0% {
      opacity: 1;
      width: 0;
    }
    30% {
      opacity: 1;
      width: 100%;
    }
    35% {
      width: 100%;
      opacity: 0;
    }
    100% {
      width: 100%;
      opacity: 0;
    }
  }

  .ds-enterprise-slider-desc > div::after {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ds-color-primary-500);
    border-radius: 2px;
    width: 0px;
    animation: enterprise-slider-width 18s infinite both;
  }

  .ds-enterprise-slider-desc > div:nth-child(1)::after {
    animation-delay: 0s;
  }

  .ds-enterprise-slider-desc > div:nth-child(2)::after {
    animation-delay: 6s;
  }

  .ds-enterprise-slider-desc > div:nth-child(3)::after {
    animation-delay: 12s;
  }

  @keyframes enterprise-slider-background {
    0% {
      background: var(--ds-color-gray-800);
    }
    5% {
      background: var(--ds-color-primary-500);
      color: white;
    }
    28% {
      background: var(--ds-color-primary-500);
      color: white;
    }
    33% {
      background: var(--ds-color-gray-800);
      color: var(--ds-color-gray-400);
    }
  }

  .ds-enterprise-slider-icon {
    margin-bottom: 8px;
    animation: enterprise-slider-background 18s infinite both;
  }

  .ds-enterprise-slider-desc > div:nth-child(1) .ds-enterprise-slider-icon {
    animation-delay: 0s;
  }

  .ds-enterprise-slider-desc > div:nth-child(2) .ds-enterprise-slider-icon {
    animation-delay: 6s;
  }

  .ds-enterprise-slider-desc > div:nth-child(3) .ds-enterprise-slider-icon {
    animation-delay: 12s;
  }
}

@media screen and (min-width: 992px) {
  .ds-enterprise-features {
    margin-left: -20px;
    margin-right: -20px;
    grid: auto / repeat(5, 1fr);
  }

  .ds-enterprise-features > div {
    text-align: center;
  }

  .ds-enterprise-features > div svg {
    min-width: 128px;
    min-height: 128px;
    max-width: 128px;
    max-height: 128px;
  }
}

@media screen and (min-width: 1280px) {
  .ds-enterprise-features {
    margin-left: 0;
    margin-right: 0;
  }

  .ds-enterprise-features > div svg {
    min-width: 160px;
    min-height: 160px;
    max-width: 160px;
    max-height: 160px;
  }
}
.ds-status-info {
  margin-top: 24px;
}

.ds-status-info-item {
  display: grid;
  grid: auto / max-content 1fr;
  gap: 12px 16px;
  padding: 16px;
  border: 1px solid var(--ds-color-gray-600);
  border-top: none;
}

.ds-status-info-item svg {
  grid-row: span 2;
}

.ds-status-info-item span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ds-status-info-item:last-child {
  border-radius: 0 0 8px 8px;
}

.ds-status-info-header {
  display: block;
  text-align: center;
  padding: 16px;
  border: none;
  border-radius: 8px 8px 0 0;
  background: var(--ds-color-success-400);
}

.ds-status-info-header.error {
  background: var(--ds-color-warning-500);
}

.ds-status-message h2 {
  font: var(--ds-font-headline-m);
}

.ds-status-message p,
.ds-status-message ul {
  font: var(--ds-font-body-xl);
}

@media screen and (min-width: 768px) {
  .ds-status-info {
    margin-top: 40px;
  }

  .ds-status-info-item {
    padding: 32px 40px;
    grid: auto / max-content 1fr max-content;
    place-content: center;
  }

  .ds-status-info-item svg {
    grid-row: 1;
  }
}
.ds-wtm-link {
  color: var(--ds-color-wtm-400);
  text-decoration: underline;
  font: var(--ds-font-label-m);
}

.ds-wtm-link:hover {
  color: var(--ds-color-wtm-500);
}

.ds-wtm-white-link {
  color: white;
  text-decoration: underline;
}

.ds-wtm-white-link:hover {
  color: var(--ds-color-wtm-400);
}

.ds-wtm-category-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid var(--ds-color-gray-700);
  background: var(--ds-color-gray-800);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
  font: var(--ds-font-label-m);
}

.ds-wtm-category-badge-tooltip {
  z-index: 1000;
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: max(160px, 100%);
  padding: 4px;
  text-align: center;
  border-radius: 4px;
  background: var(--ds-color-gray-900);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
}

.ds-wtm-category-badge:hover .ds-wtm-category-badge-tooltip {
  display: block;
}

.ds-wtm-section {
  padding: 20px 0;
}

.ds-wtm-section-card {
  display: flex;
  flex-flow: column;
  gap: 8px;
  padding: 20px;
  border-radius: 16px;
  background: var(--ds-color-gray-800);
  border: 1px solid var(--ds-color-gray-700);
  box-shadow: 1px 3px 8px 0px rgba(39, 44, 49, 0.03),
    8px 14px 38px 0px rgba(39, 44, 49, 0.06);
}

.ds-wtm-section-card.small {
  padding: 16px;
}

.ds-wtm-section-card.medium {
  padding: 24px;
}

.ds-wtm-entities {
  display: flex;
  flex-flow: column;
  gap: 16px;
}

.ds-wtm-entities > p {
  grid-column: 1/-1;
}

.ds-wtm-entities > a {
  display: block;
  min-width: 200px;
  flex: 1;
  color: white;
}

.ds-wtm-entities > a.hidden,
.ds-wtm-entities.cards > a.hidden {
  display: none;
}

.ds-wtm-entities.cards {
  gap: 16px;
}

.ds-wtm-entities.cards > a {
  display: grid;
  gap: 0px 4px;
  grid-template-columns: max-content 1fr;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(18, 19, 23, 0.4);
  background: linear-gradient(
    180deg,
    rgba(47, 49, 54, 0.5) 0%,
    rgba(47, 49, 54, 0.1) 100%
  );
  white-space: nowrap;
  color: inherit;
}

.ds-wtm-entities.cards > a > div:first-child {
  grid-row: 1 / 3;
  margin-top: 5px;
}

.ds-wtm-header {
  display: flex;
  flex-flow: column;
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.ds-wtm-header > div {
  display: flex;
  flex-flow: column;
  gap: 16px;
}

.ds-wtm-header-facts {
  list-style: none;
  display: flex;
  flex-flow: column;
  gap: 4px;
  padding: 0;
}

.ds-wtm-header-facts > li {
  display: grid;
  align-items: center;
  grid: auto / max-content 1fr;
  gap: 4px 16px;
  border-radius: 16px;
  background: var(--ds-color-gray-800);
  padding: 16px;
}

.ds-wtm-header-facts > li svg {
  grid-row: 1 / 3;
}

.ds-wtm-result {
  padding: 40px 0;
}

.ds-wtm-table-container {
  overflow-x: auto;
}

.ds-wtm-table {
  width: 100%;
  border-collapse: collapse;
}

.ds-wtm-table th:hover {
  color: var(--ds-color-wtm-400);
}

.ds-wtm-table th svg {
  display: none;
  transition: none;
}

.ds-wtm-table th.active svg {
  display: inline-block;
  margin-bottom: -2px;
  transform: rotate(180deg);
}

.ds-wtm-table th.active.desc svg {
  transform: rotate(0deg);
}

.ds-wtm-table th button {
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: var(--ds-font-label-s);
  text-transform: uppercase;
  transition: none;
}

.ds-wtm-table th,
.ds-wtm-table td {
  padding: 8px;
}

.ds-wtm-table thead tr {
  background: var(--ds-color-gray-700);
  text-align: left;
}

.ds-wtm-table thead tr th:first-child,
.ds-wtm-table tbody tr td:first-child {
  border-radius: 8px 0 0 8px;
}

.ds-wtm-table thead tr th:last-child,
.ds-wtm-table tbody tr td:last-child {
  border-radius: 0 8px 8px 0;
}

.ds-wtm-table thead th {
  font: var(--ds-font-label-s);
  text-transform: uppercase;
  white-space: nowrap;
}

.ds-wtm-table tr:hover td {
  background: rgb(255, 255, 255, 0.02);
}

.ds-wtm-table td {
  font: var(--ds-font-body-m);
  transition: all 0.2s ease;
}

.ds-wtm-table td a {
  display: block;
  margin: -8px;
  padding: 8px;
}

@media screen and (min-width: 768px) {
  .ds-wtm-section {
    padding: 40px 0;
  }

  .ds-wtm-section-card {
    padding: 40px 64px;
  }

  .ds-wtm-section-card.small {
    padding: 24px;
  }

  .ds-wtm-section-card.medium {
    padding: 32px;
  }

  .ds-wtm-entities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .ds-wtm-header {
    display: grid;
    grid-template-columns: 5fr 4fr;
    align-items: center;
    gap: 40px;
  }
}

@media screen and (min-width: 992px) {
  .ds-wtm-entities {
    gap: 32px 16px;
    grid-template-columns: repeat(3, 1fr);
  }

  .ds-wtm-header {
    grid-template-columns: 2fr 3fr;
  }

  .ds-wtm-header-facts {
    flex-flow: row;
  }

  .ds-wtm-header-facts > li {
    display: flex;
    flex-flow: column;
    flex: 1;
    text-align: center;
    padding: 24px 16px;
  }
}

@media screen and (min-width: 1280px) {
  .ds-wtm-entities {
    grid-template-columns: repeat(3, 1fr);
  }

  .ds-wtm-entities.cards {
    grid-template-columns: repeat(4, 1fr);
  }

  .ds-wtm-header {
    grid-template-columns: 1fr 1fr;
  }
}

/* Home page */

.ds-wtm-home-product-grid {
  position: relative;
  z-index: 1;
  margin-top: -180px;
}

.ds-wtm-home-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
}

.ds-wtm-home-categories > li {
  display: inline-block;
}

.ds-wtm-home-facts {
  display: grid;
  grid: auto-flow / repeat(2, 1fr);
  gap: 8px;
}

.ds-wtm-home-fact {
  position: relative;
  display: flex;
  padding: 22px 14px;
  border-radius: 16px;
  border: 1px solid #3f4146;
  background: var(--Gray800, #202225);
}

.ds-wtm-home-fact svg {
  display: none;
}

.ds-wtm-home-fact-desc {
  display: flex;
  flex-flow: column;
  gap: 8px;
}

.ds-wtm-home-fact-hover {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.ds-wtm-home-fact > *:not(.ds-wtm-home-fact-hover) {
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.ds-wtm-home-fact:hover > *:not(.ds-wtm-home-fact-hover) {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.95);
}

.ds-wtm-home-fact:hover > .ds-wtm-home-fact-hover {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

@media screen and (min-width: 768px) {
  .ds-wtm-home-product-grid {
    margin-top: -200px;
    flex-flow: row wrap;
  }

  .ds-wtm-home-product-grid > * {
    flex-flow: column;
    max-width: calc(50% - var(--ds-layout-spacing-m));
  }

  .ds-wtm-home-facts {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
    grid-auto-rows: 1fr;
  }

  .ds-wtm-home-fact {
    align-items: center;
    padding: 30px 40px;
  }

  .ds-wtm-home-fact svg {
    display: block;
  }

  .ds-wtm-home-fact.wide {
    justify-content: space-around;
    grid-column: span 2;
    gap: 40px;
  }

  .ds-wtm-home-fact.last {
    grid-column: 2 / 4;
  }
}

@media screen and (min-width: 992px) {
  .ds-wtm-home-product-grid {
    margin-top: -230px;
  }

  .ds-wtm-home-product-grid > * {
    max-width: 100%;
  }

  .ds-wtm-home-facts {
    grid-template-columns: repeat(4, 1fr);
  }

  .ds-wtm-home-fact.last {
    grid-column: span 2;
  }
}

/* Tracker details */

.ds-wtm-tracker-header {
  margin: 20px 0;
  display: grid;
  grid: auto / 1fr 1fr;
  gap: 20px;
}

.ds-wtm-tracker-header > div {
  grid-column: span 2;
}

.ds-wtm-tracker-header .ds-wtm-tracker-header-rank,
.ds-wtm-tracker-header .ds-wtm-tracker-header-operates {
  grid-column: span 1;
}

.ds-wtm-tracker-data {
  display: flex;
  flex-flow: column;
  gap: 40px;
  margin-bottom: 20px;
}

.ds-wtm-tracker-more {
  position: relative;
  z-index: 1000;
  padding-bottom: 4px;
}

.ds-wtm-tracker-more-button {
  cursor: pointer;
}

.ds-wtm-tracker-more-dropdown {
  display: none;
  position: absolute;
  flex-flow: column;
  width: 100%;
  top: 100%;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--ds-color-gray-600);
  background: var(--ds-color-gray-700);
  box-shadow: 30px 60px 160px 0px rgba(0, 0, 0, 0.4);
}

.ds-wtm-tracker-more:hover .ds-wtm-tracker-more-dropdown,
.ds-wtm-tracker-more:focus-within .ds-wtm-tracker-more-dropdown {
  display: flex;
}

.ds-wtm-tracker-type {
  display: flex;
  flex-flow: row nowrap;
  gap: 8px;
}

.ds-wtm-tracker-type svg {
  flex-shrink: 0;
}

.ds-wtm-tracker-site-types {
  display: grid;
  grid: auto / max-content 1fr;
  gap: 8px;
  align-items: center;
}

.ds-wtm-tracker-site-types-name {
  position: relative;
  padding: 0 4px;
}

.ds-wtm-tracker-site-types-name span {
  position: relative;
  z-index: 1;
}

.ds-wtm-tracker-site-types-progress {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--ds-color-gray-700);
  border-radius: 4px;
}

.wtm-tracker-suggest-choice {
  display: flex;
  flex-flow: column;
  padding: 16px;
  background: var(--ds-color-gray-800);
  border-radius: 8px;
}

.wtm-tracker-suggest-choice a {
  margin-top: 16px;
}

@media screen and (max-width: 767px) {
  .ds-wtm-tracker-reach {
    padding: 0;
  }

  .ds-wtm-tracker-reach .ds-wtm-section-card {
    border-radius: 0;
  }
}

@media screen and (min-width: 768px) {
  .ds-wtm-tracker-header {
    margin: 40px 0;
    gap: 40px;
  }

  .ds-wtm-tracker-header > div {
    grid-column: span 1;
  }

  .ds-wtm-tracker-header .ds-wtm-tracker-suggest {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
  }

  .ds-wtm-tracker-date-range {
    text-align: right;
    margin: 0 -20px -20px 0;
  }

  .ds-wtm-tracker-reach .ds-wtm-section-card {
    margin-bottom: 40px;
  }

  .wtm-tracker-suggest-choice {
    display: grid;
    grid: auto / 1fr max-content;
  }

  .wtm-tracker-suggest-choice a {
    margin: 0;
    grid-area: 1 / 2 / 3 / 3;
  }
}

@media screen and (min-width: 992px) {
  .ds-wtm-tracker-header {
    display: flex;
  }

  .ds-wtm-tracker-header > div:first-child {
    flex: 1;
  }

  .ds-wtm-tracker-header > div {
    min-width: 15%;
  }

  .ds-wtm-tracker-data {
    display: grid;
    grid: auto / 1fr 1fr;
    gap: 64px 40px;
  }

  .ds-wtm-entities.ds-wtm-tracker-similar-trackers {
    display: grid;
    grid: auto / repeat(2, 1fr);
  }
}

@media screen and (min-width: 1280px) {
  .ds-wtm-entities.ds-wtm-tracker-similar-trackers {
    display: grid;
    grid: auto / repeat(2, 1fr);
  }
}

/* Website details */

.ds-wtm-website-header {
  display: flex;
  flex-flow: column;
  gap: 32px;
  margin-top: 24px;
  padding-bottom: 24px;
}

.ds-wtm-website-header-link {
  background: white;
  border-radius: 16px;
  padding: 16px;
  color: var(--ds-color-gray-800);
  display: flex;
  flex-flow: column;
  gap: 8px;
}

.ds-wtm-website-header-link svg {
  display: none;
}

.ds-wtm-website-header-link p {
  margin: 0;
}

.ds-wtm-website-trackers {
  padding-top: 0px;
  padding-bottom: 40px;
}

.ds-wtm-website-info {
  display: flex;
  flex-flow: column;
  gap: 20px;
  padding-top: 30px;
  padding-bottom: 20px;
}

@media screen and (min-width: 768px) {
  .ds-wtm-website-header {
    padding-bottom: 64px;
  }

  .ds-wtm-website-header-link {
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
  }

  .ds-wtm-website-header-link svg {
    display: block;
  }

  .ds-wtm-website-info {
    display: flex;
    flex-flow: row;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .ds-wtm-website-header {
    flex-flow: row-reverse;

    justify-content: space-between;
    align-items: start;
  }

  .ds-wtm-website-header-link {
    padding: 24px;
  }

  .ds-wtm-website-facts {
    display: grid;
    grid: auto / 1fr 1fr;
  }
}

/* Search */

.ds-wtm-search-input {
  padding-top: 8px;
  padding-bottom: 8px;
}

.ds-wtm-search-input input {
  border-width: 2px;
}

.ds-wtm-search-input input:focus,
.ds-wtm-search-input input:hover {
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border: double 2px transparent;
  background-image: linear-gradient(
      var(--ds-color-gray-800),
      var(--ds-color-gray-800)
    ),
    var(--ds-color-gradient-wtm);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

@media screen and (min-width: 1280px) {
  .ds-wtm-search-input {
    display: none;
  }
}

/* Explorer */

.ds-wtm-explorer-header {
  display: flex;
  flex-flow: column;
  gap: 20px;
  padding-top: 20px;
  align-items: center;
}

gh-wtm-explorer {
  display: flex;
  min-height: 800px;
}

@media screen and (min-width: 768px) {
  .ds-wtm-explorer-header {
    padding-top: 40px;
    display: grid;
    grid: auto / minmax(50%, 560px) 1fr;
    justify-items: center;
  }
}
.ds-privacy-reports-card {
  max-width: 980px;
  margin: 0 auto 32px;
  display: flex;
  flex-flow: column;
  gap: 20px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--ds-color-gray-600);
  background: var(--ds-color-gray-800);
  box-shadow: 30px 60px 160px 0px rgba(0, 0, 0, 0.4);
}

.ds-privacy-reports-card img {
  overflow: hidden;
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  border-radius: 7px;
}

@media screen and (min-width: 768px) {
  .ds-privacy-reports-card {
    padding: 40px;
    gap: 40px;
    flex-flow: row;
  }
}

@media screen and (min-width: 992px) {
  .ds-privacy-reports-card img {
    width: 288px;
    height: 288px;
  }
}