:root {
  --system--text_medium: #ccd3da;
  --desktop--h1-docs: 2.5rem;
  --system--text_light: #ecf2f8;
  --desktop--h2: 3.375rem;
  --tablet--h2: 2.625rem;
  --mobile--h2: 2rem;
  --desktop--h4: 1rem;
  --desktop--h6: .75rem;
  --tablet--p-base: .9375rem;
  --githubdark--purple: #cea5fb;
  --system--top_nav_bg: rgba(13, 15, 17, .01);
  --system--stroke_light: #4a545f;
  --system--card_bg: #2d343b;
  --shadow-blue-transparent: rgba(74, 97, 122, .3);
  --system--topnav_dropdown_item_hover: #d9e5f1;
  --secretly--accent_blue: #1157df;
  --desktop--p-s: .875rem;
  --secretly--accent_blue_hover: #114bbb;
  --secretly--accent_blue_pressed: #093383;
  --system--light_on_hover: rgba(255, 255, 255, .2);
  --desktop--h3: 1.5rem;
  --secretly--accent_blue_light: #2567e7;
  --githubdark--background: #1b1f23;
  --system--body_bg: #1f252b;
  --desktop--p-base: 1rem;
  --tablet--h1_hero: 3.375rem;
  --mobile--h1: 2.5rem;
  --githubdark--sky_blue: #a2d2fb;
  --githubdark--green: #7ce38b;
  --desktop--h-xl: 4.5rem;
  --system--stroke_dark: #3c454e;
  --system--text_dark: #9da5ad;
  --desktop--p-m: 1.375rem;
  --tablet--p-m: 1.25rem;
  --mobile--p-m: 1.1rem;
  --desktop--p-l: 1.5rem;
  --tablet--p-l: var(--desktop--p-m);
  --mobile--p-l: var(--tablet--p-m);
  --tablet--p-s: .8125rem;
  --desktop--codeblock: .8125rem;
  --system--card_bg_hover: #3f4953;
  --desktop--h3-docs: 1.25rem;
  --medium-purple\<deleted\|variable-2c48cbab\>: #af72f1;
  --desktop--h2-docs: 28px;
  --tablet--h3: 1.375rem;
  --system--warning: #ffc839;
  --system--alert: #fa5c51;
  --black-2\<deleted\|variable-59506282\>: #0d0f11;
  --blueish-black-background\<deleted\|variable-7353a913\>: #161b23;
  --githubdark--current_line: #1f242c;
  --githubdark--textdarkanimation: #5c6a77;
  --githubdark--animationred: #d08282;
  --githubdark--red: #fa7970;
  --system--shadow_on_hover: rgba(13, 15, 17, .5);
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  color: var(--system--text_medium);
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 150%;
}

h1 {
  font-family: Inter Tight, sans-serif;
  font-size: var(--desktop--h1-docs);
  letter-spacing: .2px;
  margin-top: 0;
  margin-bottom: 40px;
  font-weight: 500;
  line-height: 100%;
}

h2 {
  color: var(--system--text_light);
  font-family: Inter Tight, sans-serif;
  font-size: var(--desktop--h2);
  letter-spacing: .3px;
  margin-bottom: 15px;
  font-weight: 600;
  line-height: 110%;
}

h3 {
  letter-spacing: .5px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Inter Tight, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 130%;
}

h4 {
  font-family: Inter, sans-serif;
  font-size: var(--desktop--h4);
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 150%;
}

h5 {
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 0;
  font-weight: 500;
  line-height: 150%;
}

h6 {
  font-size: var(--desktop--h6);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 18px;
}

p {
  margin-bottom: 15px;
  font-family: Inter, sans-serif;
}

a {
  border-bottom: 0px solid var(--system--text_light);
  color: var(--githubdark--purple);
  -webkit-text-stroke-color: var(--system--text_light);
  text-decoration: none;
}

a:hover {
  color: var(--githubdark--purple);
  -webkit-text-stroke-color: var(--githubdark--purple);
}

ul {
  margin-top: 25px;
  margin-bottom: 25px;
  padding-left: 30px;
}

ol {
  margin-top: 15px;
  margin-bottom: 25px;
  padding-left: 30px;
}

label {
  font-size: 14px;
  font-weight: 400;
  display: block;
}

.mainnav {
  z-index: 2000;
  float: none;
  clear: none;
  background-color: var(--system--top_nav_bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: fixed;
  top: -1px;
  bottom: auto;
  left: -1px;
  right: -1px;
}

.container {
  color: var(--system--text_medium);
  max-width: 1400px;
  padding-left: 70px;
  padding-right: 70px;
}

.container.heroimage {
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
  min-height: auto;
  padding-top: 40px;
}

.container.headercontainer {
  max-width: 760px;
  margin-bottom: 40px;
  padding-left: 0;
  padding-right: 0;
}

.container.topnavbarcontainer {
  background-color: rgba(0, 0, 0, 0);
  margin-left: auto;
  margin-right: auto;
  padding: 12px 70px;
}

.container.popup {
  align-items: center;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.container.animation {
  max-width: 1600px;
  padding-left: 0;
  padding-right: 0;
}

.container.animation.hidden {
  display: none;
}

.container.login {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.navbar-wrapper {
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.navbar-brand {
  grid-column-gap: 10px;
  align-items: center;
  display: flex;
}

.navbar-brand.w--current {
  grid-column-gap: 8px;
  align-items: center;
  display: flex;
}

.nav-menu-wrapper {
  display: block;
}

.nav-menu-two {
  color: #ecf2f8;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
}

.nav-link {
  color: var(--system--text_light);
  letter-spacing: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 10px 18px;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  display: inline-block;
}

.nav-link:hover {
  background-color: var(--shadow-blue-transparent);
  color: var(--system--text_light);
  border-radius: 40px;
}

.nav-link:focus-visible {
  outline-offset: 0px;
  color: #0050bd;
  border-radius: 4px;
  outline: 2px solid #0050bd;
}

.nav-link[data-wf-focus-visible] {
  outline-offset: 0px;
  color: #0050bd;
  border-radius: 4px;
  outline: 2px solid #0050bd;
}

.nav-link:visited {
  color: var(--system--text_light);
  -webkit-text-stroke-color: var(--system--text_light);
}

.nav-link.w--current {
  background-color: var(--shadow-blue-transparent);
  color: var(--system--text_light);
  border-radius: 40px;
}

.nav-dropdown {
  color: #ecf2f8;
  margin-left: 5px;
  margin-right: 5px;
}

.nav-dropdown-toggle {
  color: #ecf2f8;
  letter-spacing: .25px;
  padding: 10px 35px 10px 15px;
  font-size: 14px;
  line-height: 20px;
}

.nav-dropdown-toggle:hover {
  background-color: var(--shadow-blue-transparent);
  color: rgba(236, 242, 248, .6);
  border-radius: 60px;
}

.nav-dropdown-toggle:focus-visible {
  outline-offset: 0px;
  color: #0050bd;
  border-radius: 5px;
  outline: 2px solid #0050bd;
}

.nav-dropdown-toggle[data-wf-focus-visible] {
  outline-offset: 0px;
  color: #0050bd;
  border-radius: 5px;
  outline: 2px solid #0050bd;
}

.nav-dropdown-icon {
  margin-right: 10px;
}

.nav-dropdown-list {
  background-color: #fff;
  border-radius: 12px;
}

.nav-dropdown-list.w--open {
  padding-top: 10px;
  padding-bottom: 10px;
}

.nav-dropdown-list.shadow-three.mobile-shadow-hide.w--open {
  background-color: rgba(0, 0, 0, 0);
  margin-top: 0;
  padding-top: 10px;
  padding-bottom: 0;
}

.nav-dropdown-link {
  color: var(--system--card_bg);
  border-radius: 12px;
  min-width: 200px;
  margin-top: 3px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 15px;
  font-size: 14px;
}

.nav-dropdown-link:hover {
  background-color: var(--system--topnav_dropdown_item_hover);
  color: var(--system--stroke_light);
}

.nav-dropdown-link:focus-visible {
  outline-offset: 0px;
  color: var(--system--text_light);
  border: 0 solid rgba(0, 0, 0, 0);
  outline: 2px solid #0050bd;
}

.nav-dropdown-link[data-wf-focus-visible] {
  outline-offset: 0px;
  color: var(--system--text_light);
  border: 0 solid rgba(0, 0, 0, 0);
  outline: 2px solid #0050bd;
}

.nav-dropdown-link:visited {
  -webkit-text-stroke-color: transparent;
}

.nav-dropdown-link.w--current {
  background-color: var(--system--stroke_light);
  color: var(--system--text_light);
  font-weight: 500;
}

.nav-dropdown-link.firstchild {
  margin-top: 0;
}

.nav-dropdown-link.firstchild.w--current {
  color: var(--system--stroke_light);
  background-color: #cbddf0;
  margin-top: 0;
}

.button-primary {
  background-color: var(--secretly--accent_blue);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: var(--desktop--p-s);
  text-transform: none;
  border-radius: 100px;
  padding: 10px 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  transition: all .2s;
}

.button-primary:hover {
  background-color: var(--secretly--accent_blue_hover);
  color: #fff;
}

.button-primary:active {
  background-color: #43464d;
}

.button-primary.large {
  background-color: var(--secretly--accent_blue);
  order: 0;
  align-self: center;
  padding: 15px 32px;
  font-size: 1.5rem;
  font-weight: 500;
}

.button-primary.large:hover {
  background-color: var(--secretly--accent_blue_hover);
}

.button-primary.large:active {
  background-color: var(--secretly--accent_blue_pressed);
}

.button-primary.large.hero {
  border: 0px solid var(--system--text_light);
  box-shadow: 0 4px 16px 0 var(--secretly--accent_blue_pressed), inset -1px 1px 4px 0 var(--system--light_on_hover);
  font-size: var(--desktop--h3);
  text-align: center;
  border-radius: 200px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 35px;
  display: inline-block;
}

.button-primary.large.hero:hover {
  background-color: var(--secretly--accent_blue_light);
  box-shadow: 0 10px 60px -5px var(--secretly--accent_blue_pressed), inset 0 1px 2px 0 var(--system--light_on_hover);
  transform: translate(0, -1px);
}

.button-primary.medium {
  margin-top: 15px;
  padding: 12px 25px;
  font-size: 16px;
}

.button-primary.medium._160px {
  width: 180px;
}

.body {
  aspect-ratio: auto;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--githubdark--background);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--githubdark--background);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--githubdark--background);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--githubdark--background);
  background-color: var(--system--body_bg);
  font-size: var(--desktop--p-base);
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
  overflow-x: hidden;
}

.text-block {
  color: #ecf2f8;
}

.lastitem {
  margin-right: 20px;
}

.heroheading {
  color: var(--system--text_light);
  text-align: center;
  margin: 0 auto 25px;
  font-family: Inter Tight, sans-serif;
  font-size: 80px;
  font-weight: 600;
  display: block;
}

.heroheading.gradient {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(#ecf2f8, #c7d6e5);
  -webkit-background-clip: text;
  background-clip: text;
  height: 180px;
}

.herobraket {
  color: #89929b;
  padding-left: 2px;
  padding-right: 2px;
  font-size: 70px;
  font-weight: 400;
  line-height: 54px;
}

.herobraket.blue {
  color: var(--githubdark--sky_blue);
}

.herobraket.purple {
  color: var(--githubdark--purple);
}

.herobraket.green {
  color: var(--githubdark--green);
}

.herospan {
  color: #7ce38b;
  font-weight: 400;
}

.herospan.blue {
  color: #a2d2fb;
  -webkit-text-stroke-color: var(--githubdark--sky_blue);
  font-weight: 400;
}

.herospan.purple {
  color: #cea5fb;
  -webkit-text-stroke-color: var(--githubdark--purple);
}

.herospan.green {
  -webkit-text-stroke-color: var(--githubdark--green);
}

.section {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: block;
  overflow: visible;
}

.section.footer {
  background-color: var(--system--card_bg);
  background-image: linear-gradient(180deg, var(--system--body_bg), rgba(22, 27, 34, 0)), url('../images/pattern_25x25.png');
  background-position: 0 0, 0 0;
  background-size: auto, 26px;
}

.section.underfooter {
  margin-top: 0;
  padding-top: 20px;
  padding-bottom: 30px;
}

.section.hero {
  background-image: linear-gradient(rgba(44, 57, 90, .8), rgba(24, 26, 32, 0) 60%);
  width: 100%;
  padding-top: 180px;
  overflow: hidden;
}

.section._2linemargin {
  padding-top: 120px;
}

.section._4linemargin {
  margin-top: 120px;
}

.section._4linemargin.mainpageanimation {
  background-image: linear-gradient(to bottom, var(--system--body_bg), rgba(31, 37, 43, 0) 51%, var(--system--body_bg)), url('../images/pattern_25x25.png');
  background-position: 0 0, 0 0;
  background-size: auto, 26px;
}

.section._6linemargin {
  margin-top: 180px;
}

.section.popup {
  z-index: 2000;
  background-color: rgba(27, 31, 35, .8);
  width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.section.announcement {
  height: 100vh;
}

.herocodeline {
  object-fit: none;
  flex-direction: row;
  flex: none;
  justify-content: center;
  align-self: stretch;
  align-items: flex-start;
  margin-top: 12px;
  margin-bottom: 12px;
  display: flex;
  position: static;
  transform: translate(0);
}

.fade {
  z-index: 1000;
  background-image: linear-gradient(90deg, var(--system--body_bg), rgba(22, 27, 34, 0));
  width: 100px;
  height: 400px;
  min-height: auto;
  margin-top: -37px;
  position: absolute;
  top: auto;
  bottom: auto;
  left: 0;
  right: auto;
}

.fade.right {
  transform-style: preserve-3d;
  left: auto;
  right: 0;
  transform: rotateX(0)rotateY(180deg)rotateZ(0);
}

.specialheading {
  z-index: 1000;
  color: var(--system--text_light);
  font-family: Inter Tight, sans-serif;
  font-size: var(--desktop--h-xl);
  text-align: center;
  justify-content: center;
  width: 800px;
  margin: 30px auto 50px;
  font-weight: 600;
  line-height: 110%;
  display: block;
  position: relative;
}

.blockwithicon {
  grid-column-gap: 10px;
  flex-direction: row;
  max-width: 240px;
  font-family: Inter Tight, sans-serif;
  display: flex;
}

.blockwithicon.borderright {
  border-right: 1px solid var(--system--stroke_dark);
}

.paragraphicon {
  display: block;
}

.paragraphicon.neutral {
  outline-offset: 0px;
  color: var(--githubdark--sky_blue);
  outline: 3px #8ea1b4;
  transform: none;
}

.paragraphicon.grey {
  color: var(--system--text_dark);
}

._5-3-grid {
  grid-column-gap: 24px;
  grid-row-gap: 0px;
  grid-template: "."
  / 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  padding-top: 30px;
  padding-left: 80px;
  padding-right: 80px;
  display: flex;
}

.h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
  font-family: Inter Tight, sans-serif;
  font-size: 42px;
  font-weight: 600;
  line-height: 120%;
}

.tagline {
  color: var(--system--text_dark);
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
  display: block;
}

.tagline.small {
  font-size: var(--desktop--p-s);
}

.tagline.small.announcement {
  color: var(--system--stroke_light);
  background-image: linear-gradient(#c7d6e5, #c7d6e5);
  border-radius: 40px;
  margin-top: 10px;
  padding: 8px 15px;
  font-weight: 600;
  display: inline-block;
}

.taglinebraket {
  padding-left: 5px;
  padding-right: 5px;
  font-size: 1.0625rem;
  font-weight: 400;
  display: inline-block;
}

.taglinebody {
  display: inline;
}

.featuresblock {
  grid-row-gap: 40px;
  border: 1px solid var(--system--stroke_light);
  background-color: var(--system--card_bg);
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
  border-radius: 16px;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
  position: relative;
  overflow: hidden;
}

.featuresblock.lightted {
  grid-row-gap: 40px;
  border-color: var(--system--stroke_dark);
  background-color: var(--system--card_bg);
  opacity: 1;
  transition: all .2s;
  box-shadow: 0 0 0 -6px rgba(0, 0, 0, .2), 0 0 rgba(0, 0, 0, .8), inset -1px 1px 1px -3px rgba(204, 211, 218, .6);
}

.featuresblock.lightted:hover {
  box-shadow: 5px -5px 20px -17px #90aed4, -7px 7px 20px -10px rgba(0, 0, 0, .5), inset -1px 1px 1px -1px rgba(204, 211, 218, .9);
}

.guidelinegrid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.buttonsecondary {
  background-color: var(--secretly--accent_blue);
  color: #fff;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 100px;
  padding: 12px 16px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  transition: all .2s;
}

.buttonsecondary:hover {
  background-color: var(--secretly--accent_blue_hover);
  color: #fff;
}

.buttonsecondary:active {
  background-color: #43464d;
}

.buttonsecondary.medium {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border: 0px solid var(--system--stroke_light);
  background-color: var(--secretly--accent_blue);
  color: var(--system--text_light);
  text-align: left;
  letter-spacing: .4px;
  border-radius: 40px;
  flex-wrap: nowrap;
  order: 0;
  justify-content: center;
  align-self: center;
  align-items: center;
  max-width: 220px;
  padding: 15px 14px 15px 20px;
  font-family: Inter Tight, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 100%;
  text-decoration: none;
  display: flex;
}

.buttonsecondary.medium:hover {
  background-color: var(--secretly--accent_blue_hover);
  color: var(--system--text_light);
  -webkit-text-stroke-color: transparent;
}

.buttontext {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 100%;
  position: relative;
  bottom: 0;
}

.buttoniconright {
  text-align: left;
  mix-blend-mode: normal;
  width: auto;
  margin-left: 5px;
  padding-right: 4px;
  position: relative;
  top: 1px;
}

.callout {
  color: var(--system--text_light);
  font-size: var(--desktop--h2);
  margin-top: 20px;
  margin-bottom: 30px;
}

.calloutcontainer {
  margin-top: 100px;
  padding-left: 15%;
  padding-right: 15%;
}

.footercontainer {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 8fr 2fr 2fr 2fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  margin: 80px auto 60px;
  display: grid;
}

.footerlogo {
  flex-direction: column;
  justify-content: space-between;
  display: flex;
}

.footercol {
  width: auto;
}

.footerrightcol {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  display: flex;
}

.footerheader {
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 120%;
  position: relative;
}

.footermenuitem {
  color: var(--system--text_dark);
  font-size: var(--desktop--p-s);
  letter-spacing: .2px;
  white-space: nowrap;
  margin-bottom: 5px;
  text-decoration: none;
  transition: all .2s;
  display: block;
}

.footermenuitem:hover {
  color: var(--system--text_light);
  text-decoration: none;
}

.footermenuitem:visited {
  color: var(--system--text_dark);
}

.footercreditscontainer {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: var(--system--text_dark);
  grid-template-rows: auto;
  grid-template-columns: 3fr 1.5fr 1.5fr 6fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  display: flex;
  position: relative;
}

.div-block-4 {
  display: flex;
}

.image-4 {
  flex: none;
  width: 24px;
  max-width: none;
  height: 22px;
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 0;
  padding-right: 0;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.rich-text-block {
  clear: none;
  display: block;
}

.column {
  padding-right: 20px;
  position: -webkit-sticky;
  position: sticky;
  top: 120px;
}

.column-2 {
  padding-left: 20px;
}

.sidebarnavcontainer {
  color: var(--system--text_light);
  width: 100%;
  text-decoration: none;
  overflow: hidden;
}

.sidebarnavcontainer.w--current {
  overflow: visible;
}

.text-block-6 {
  color: var(--system--text_light);
  text-decoration: none;
}

.sidebarnav-icon {
  color: var(--system--text_light);
}

.sidebarnavitem {
  margin-bottom: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  overflow: visible;
}

.sidebarnavitem:active {
  font-weight: 400;
}

.sidebarnavitem:focus {
  font-weight: 600;
}

.sidebarnavdroplist {
  color: var(--system--text_dark);
  -webkit-text-stroke-color: transparent;
  background-color: rgba(0, 0, 0, 0);
  flex-flow: column;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
  position: relative;
}

.sidebarnav-link {
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.sidebarnavdroplist-div {
  clear: none;
  opacity: 1;
  color: var(--system--text_dark);
  flex-flow: row;
  align-content: flex-start;
  justify-content: flex-start;
  align-self: flex-start;
  align-items: stretch;
  padding-top: 5px;
  padding-bottom: 5px;
  text-decoration: none;
  display: flex;
  position: static;
}

.sidebarnavdroplist-div:hover {
  color: var(--githubdark--purple);
}

.sidebarnavdroplist-div:active {
  font-weight: 400;
}

.sidebarnavdroplist-div:focus {
  color: var(--githubdark--purple);
  font-weight: 600;
}

.sidebarnav-bullet {
  max-width: none;
  padding-right: 5px;
}

.leed {
  color: var(--system--text_light);
  font-family: Inter, sans-serif;
  font-size: var(--desktop--p-m);
  letter-spacing: -.2px;
  max-width: 560px;
  font-weight: 400;
  line-height: 130%;
}

.leed.centerflag {
  text-align: center;
  letter-spacing: -.3px;
  margin-left: auto;
  margin-right: auto;
}

.leed.centerflag._4col {
  max-width: 660px;
}

.leed.centerflag.l-size {
  font-size: var(--desktop--p-l);
  max-width: 610px;
}

.text {
  letter-spacing: normal;
  margin-left: auto;
  margin-right: auto;
}

.text.small {
  font-size: var(--desktop--p-s);
  letter-spacing: -.2px;
}

.text.small.grey {
  color: var(--system--text_dark);
  line-height: 150%;
}

.footercredits {
  opacity: .5;
  color: var(--system--text_dark);
  font-size: var(--desktop--h6);
  white-space: nowrap;
  font-weight: 500;
  line-height: 28px;
}

.footercredits:hover {
  opacity: .75;
  color: var(--system--text_dark);
}

.image-5 {
  align-self: flex-start;
}

.lessonstextblock {
  float: none;
  border-radius: 0;
  flex-direction: column;
  justify-content: flex-end;
  padding: 25px 30px 60px;
  display: flex;
}

.lessonimgblock {
  background-color: rgba(0, 0, 0, 0);
  border: 1px #000;
  border-radius: 10px;
  margin-bottom: 0;
  padding-top: 25px;
  padding-left: 25px;
  padding-right: 25px;
  overflow: hidden;
}

.centerflag {
  color: var(--system--text_light);
  text-align: center;
  margin-top: 0;
}

.first {
  margin-top: 140px;
  margin-bottom: 60px;
  position: relative;
}

.col {
  width: 56%;
}

.col.sticky {
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  overflow: visible;
}

.col.sticky.sidebar {
  width: 20%;
}

.col.sticky.sidebar.right {
  width: 14%;
}

.docscallout {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border: 1px solid var(--system--card_bg);
  background-color: var(--system--card_bg);
  color: #fff;
  border-radius: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px 30px 20px 20px;
  display: flex;
}

.anchorlink {
  color: var(--system--text_light);
  align-items: flex-end;
  text-decoration: none;
  display: flex;
  position: relative;
}

.anchorlink:hover, .anchorlink:visited {
  color: var(--system--text_light);
}

.postlistitem {
  -webkit-text-fill-color: inherit;
  background-image: url('../images/listMarker.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  background-clip: border-box;
  padding-top: 0;
  padding-bottom: 15px;
  padding-left: 30px;
  list-style-type: none;
}

.inlinecodeitem {
  border: 1px solid var(--system--stroke_dark);
  background-color: var(--system--card_bg);
  font-family: Roboto Mono, sans-serif;
  font-size: var(--desktop--codeblock);
  white-space: nowrap;
  border-radius: 4px;
  margin-left: 2px;
  margin-right: 2px;
  padding: 0 3px 2px;
  line-height: 17px;
  display: inline-block;
}

.inlinecodeitem.inlinecodeitemstyling {
  border-color: var(--system--stroke_light);
  background-color: var(--system--card_bg_hover);
}

.inlinecodeitem.heroinlinecodeitemstyling {
  border-color: var(--system--stroke_dark);
  background-color: var(--system--card_bg);
  color: var(--system--text_light);
  margin-left: 6px;
  margin-right: 6px;
  padding: 7px 15px 8px;
}

.docsh3 {
  color: var(--system--text_light);
  font-size: var(--desktop--h3-docs);
  font-weight: 500;
  line-height: 120%;
}

.postembeded {
  border: 1px solid var(--system--stroke_dark);
  background-color: var(--system--card_bg);
  font-size: var(--desktop--codeblock);
  white-space: nowrap;
  border-radius: 8px;
  width: 100%;
}

.sidebarlink {
  color: var(--system--text_light);
  font-size: var(--desktop--p-s);
  align-self: flex-start;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 5px 0;
  display: block;
}

.sidebarlink.w--current {
  color: var(--githubdark--purple);
}

.sidebarlink.dropdown {
  white-space: normal;
  align-items: stretch;
  padding-left: 25px;
  display: block;
}

.sidebarlink.dropdown.w--current {
  color: var(--githubdark--purple);
  cursor: pointer;
  padding-left: 35px;
  transition: all .2s;
}

.nav-menu-2 {
  float: none;
  flex-flow: column;
  flex: 1;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}

.container-3 {
  color: var(--system--text_light);
  align-items: flex-start;
  display: flex;
}

.navbar {
  background-color: rgba(0, 0, 0, 0);
}

.dropdown {
  width: 100%;
  height: 44px;
  margin-left: auto;
  margin-right: auto;
  position: static;
  overflow: hidden;
}

.dropdown-list {
  background-color: rgba(0, 0, 0, 0);
  display: block;
  position: relative;
}

.tablehead {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: minmax(100px, .6fr) minmax(100px, .6fr) minmax(200px, 1fr);
  grid-auto-columns: 1fr;
  padding-top: 0;
}

.tableheading {
  color: var(--system--text_dark);
  font-size: var(--desktop--codeblock);
  text-align: left;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 20px 10px 0;
  font-weight: 500;
}

.tooltip {
  border-bottom: 1px dashed var(--medium-purple\<deleted\|variable-2c48cbab\>);
  color: var(--githubdark--purple);
  -webkit-text-stroke-color: var(--githubdark--purple);
  padding-right: 0;
}

.tooltip.text-button {
  display: inline-block;
}

.navbarcontent {
  background-color: rgba(0, 0, 0, 0);
  font-size: 14px;
}

.sidebarlinkcontent {
  color: var(--system--text_dark);
  letter-spacing: 0;
  text-transform: none;
  align-self: flex-start;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 4px 5px;
  font-size: .813rem;
  display: block;
}

.sidebarlinkcontent:hover, .sidebarlinkcontent.w--current {
  color: var(--system--text_light);
}

.sidebarlinkcontent.second {
  padding-left: 20px;
}

.sidebarlinkcontent.third {
  padding-left: 40px;
}

.calloutparagraph {
  color: var(--system--text_dark);
  font-size: var(--desktop--p-s);
  letter-spacing: 0;
  margin-bottom: 0;
  font-weight: 400;
  transition: all .2s;
}

.calloutparagraph.bold {
  color: var(--githubdark--green);
  font-weight: 600;
}

.docsh2 {
  font-size: var(--desktop--h2-docs);
  line-height: 120%;
}

.docsh2.anchorlink {
  letter-spacing: 0;
}

.postimage {
  border: 1px solid var(--system--card_bg);
  border-radius: 8px;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 20px;
}

.anchorlinkicon {
  opacity: 1;
  color: var(--system--text_light);
  order: -1;
  align-self: auto;
  margin-left: -34px;
  padding-right: 10px;
  display: flex;
}

.anchorlinkicon.h1 {
  padding-bottom: 40px;
  display: block;
}

.anchorlinkicon.h4 {
  padding-bottom: 3px;
  padding-right: 10px;
  display: block;
}

.anchorlinkicon.h2 {
  margin-bottom: 0;
  padding-bottom: 10px;
  display: block;
}

.anchorlinkicon.h3 {
  padding-bottom: 6px;
  display: block;
}

.buttonwithimage {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  background-color: var(--system--card_bg);
  color: var(--system--text_light);
  border-radius: 8px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 150px;
  padding: 20px;
  transition: all .3s cubic-bezier(.215, .61, .355, 1);
  display: flex;
}

.buttonwithimage:hover {
  background-color: var(--system--card_bg_hover);
  color: var(--system--text_light);
}

.buttonwithimage:visited {
  color: var(--system--text_light);
}

.buttonwithimage.postlink {
  justify-content: space-between;
  min-height: 200px;
  padding-bottom: 25px;
}

.postgrid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: start;
  margin-top: 10px;
  margin-bottom: 25px;
}

.buttonimage {
  background-color: rgba(0, 0, 0, 0);
  align-self: flex-end;
  width: 20px;
  height: 20px;
  line-height: 130%;
}

.nextchapterbutton {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border: 1px solid var(--system--card_bg);
  background-color: var(--system--body_bg);
  color: var(--system--text_light);
  letter-spacing: normal;
  border-radius: 8px;
  flex: 1;
  grid-template-rows: auto;
  grid-template-columns: 4fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 0;
  padding: 25px 15px 25px 30px;
  display: grid;
}

.nextchapterbutton:hover {
  background-color: var(--system--card_bg);
}

._2-col-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.nextchapterbuttontag {
  color: rgba(236, 242, 248, .3);
  font-family: Inter, sans-serif;
  font-size: var(--desktop--h6);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.nextchapterbuttontag.rightflag {
  text-align: right;
}

.nextchapterbuttonheading {
  color: var(--system--text_dark);
  margin-top: 0;
  margin-bottom: 3px;
}

.nextchapterbuttonheading.rightflag {
  text-align: right;
}

.image-10 {
  opacity: .3;
  padding-right: 10px;
}

.tablecontainer {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  max-width: 728px;
  margin: 10px auto 25px;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  overflow: auto;
}

.div-block-7 {
  background-color: var(--system--text_light);
  border: 1px solid #333a42;
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}

.headerfeatureblock {
  color: var(--system--text_light);
  font-size: var(--desktop--h3);
  margin-top: 0;
}

.lessonheading {
  color: var(--system--text_light);
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.35rem;
}

.fadetop {
  background-image: linear-gradient(to bottom, rgba(31, 36, 44, 0), var(--system--body_bg));
  width: 100%;
  height: 200px;
  margin-top: -200px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}

.fadetop.announcement {
  z-index: 1000;
  background-image: linear-gradient(180deg, var(--system--body_bg) 22%, rgba(31, 36, 44, 0));
  pointer-events: none;
  height: 300px;
  position: absolute;
  top: 200px;
  bottom: auto;
  left: 0%;
  right: 0%;
}

.digest {
  grid-column-gap: 20px;
  border: 1px none var(--system--stroke_light);
  background-color: var(--system--card_bg);
  border-radius: 8px;
  margin: 60px -40px;
  padding: 42px 50px 45px 40px;
  display: block;
}

.summaryparagraph {
  border-bottom: 1px solid var(--system--stroke_dark);
  color: var(--system--text_medium);
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 15px;
  font-size: 16px;
}

.summaryparagraph.last {
  border-bottom-style: none;
}

.green {
  color: var(--githubdark--green);
  margin-bottom: 0;
}

.div-block-9 {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex-direction: column;
  display: flex;
}

.div-block-11 {
  grid-column-gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  display: flex;
}

._2colpostgrid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  justify-content: start;
  margin-top: 25px;
  margin-bottom: 50px;
}

.summarynumbered {
  grid-column-gap: 10px;
  display: flex;
}

.callouticon.alert {
  color: var(--system--warning);
  position: relative;
  top: 2px;
}

.callouticon.info {
  color: var(--githubdark--purple);
  padding-top: 1px;
}

.callouticon.arrow {
  opacity: 1;
  color: var(--system--text_dark);
  position: relative;
  bottom: 4px;
  transform: scale(.8);
}

.blue {
  color: var(--githubdark--sky_blue);
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
}

.noheader {
  margin-top: 60px;
}

.sidebarheading {
  color: #b1b4b8;
  letter-spacing: 0;
  text-transform: none;
  align-self: flex-start;
  width: 100%;
  margin: 0 auto;
  font-size: 13px;
  font-weight: 400;
  display: block;
}

.sidebarheading.w--current {
  color: var(--system--text_light);
}

.iconwithtagline {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
}

.iconwithtagline.gap-15 {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.minuspadding {
  margin-top: -80px;
  padding: 0 165px;
  position: relative;
}

.tabbutton {
  color: var(--system--text_light);
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
  border-radius: 40px;
  margin-left: 0;
  margin-right: 0;
  padding: 4px 12px;
  display: block;
}

.tabbutton:hover, .tabbutton.w--current {
  background-color: var(--system--text_light);
  color: var(--githubdark--background);
}

.tabsmenucontainer {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: center;
  display: flex;
}

.backgroundglow {
  -webkit-text-fill-color: inherit;
  object-fit: fill;
  background-image: url('../images/Ellipse-259.png');
  background-position: 0 0;
  background-size: auto;
  background-clip: content-box;
  border-radius: 0%;
  width: 100%;
  height: 400px;
  margin-bottom: -355px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.pilltag {
  grid-column-gap: 10px;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.pilltag.hero {
  align-items: center;
  margin-bottom: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.pilltagh6 {
  border: 1px solid var(--system--text_light);
  color: var(--system--text_light);
  text-align: center;
  border-radius: 4px;
  width: auto;
  margin-top: 0;
  margin-bottom: 10px;
  padding: 6px 8px;
  line-height: 120%;
  display: block;
}

.pilltagh6.red {
  border-color: var(--system--alert);
  color: var(--system--alert);
  font-family: Inter, sans-serif;
}

.pilltagh6.blue {
  border-color: var(--githubdark--sky_blue);
  color: var(--githubdark--sky_blue);
}

.heroinlinetext {
  overflow-wrap: normal;
}

.div-block-14 {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-flow: column;
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
}

.button-secondary {
  border: 1px solid var(--system--text_light);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: var(--desktop--p-s);
  letter-spacing: .1px;
  text-transform: none;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 100px;
  padding: 10px 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  transition: all .2s;
}

.button-secondary:hover {
  background-color: var(--system--text_light);
  color: var(--black-2\<deleted\|variable-59506282\>);
}

.button-secondary:active {
  background-color: #43464d;
}

.popupwindow {
  background-color: #2a2e33;
  background-image: linear-gradient(#2a2e33, rgba(56, 77, 102, .5)), url('../images/pattern_10x10.png');
  background-position: 0 0, 0 0;
  background-size: auto, 10px;
  border: 1px solid #434c56;
  border-radius: 16px;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: auto;
  max-width: 500px;
  max-height: 100vh;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px 35px 40px;
  display: block;
  position: absolute;
  top: auto;
  bottom: auto;
  left: 0%;
  right: 0%;
}

.input {
  background-color: var(--system--body_bg);
  color: var(--system--text_medium);
  border: 1px solid #384049;
  border-radius: 8px;
  height: 48px;
  margin-bottom: 15px;
  font-size: 1em;
}

.input:focus {
  background-color: var(--blueish-black-background\<deleted\|variable-7353a913\>);
  border: 1px solid #58626d;
  box-shadow: 0 0 10px rgba(88, 98, 109, .2);
}

.input::placeholder {
  color: #5c646d;
  font-size: 1em;
  font-weight: 400;
}

.input.multiline {
  height: 144px;
}

.popupcloseicon {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 10px;
  bottom: auto;
  left: auto;
  right: 10px;
}

.form-block {
  margin-top: 25px;
}

.form {
  padding-top: 10px;
}

.div-block-15 {
  justify-content: center;
  display: flex;
}

.div-block-15.hidden {
  display: none;
}

.forlargescreen {
  position: static;
}

.forsmallscreen {
  display: none;
}

.featuresparagraph {
  max-width: 300px;
}

.featuresbottomcontent {
  align-self: center;
  position: relative;
}

.featuresbottomcontent.integration {
  height: auto;
  padding-left: 0;
  position: relative;
}

.featuresbottomcontent.login {
  grid-row-gap: 10px;
  flex-direction: column;
  display: flex;
}

.featurestopcontent {
  padding: 30px;
  position: relative;
}

._3-col-grid {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 40px;
  display: grid;
}

._3-col-grid.hidden {
  display: none;
}

.featuressmallblock {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  border: 1px solid var(--system--stroke_light);
  background-color: var(--system--card_bg);
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
  border-radius: 8px;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 30px;
  display: flex;
  overflow: hidden;
}

.fadefrombottom {
  z-index: 2;
  background-image: linear-gradient(to top, #2d343b, rgba(45, 52, 59, 0));
  height: 100px;
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.lightspot {
  z-index: 0;
  opacity: .73;
  background-image: radial-gradient(circle closest-side, #3b526b, rgba(45, 52, 59, 0));
  width: 700px;
  height: 800px;
  position: absolute;
  top: -150%;
  bottom: auto;
  left: auto;
  right: -100%;
}

.popupheading {
  font-size: 32px;
}

.textbutton {
  grid-column-gap: 5px;
  border: 1px solid var(--system--text_medium);
  opacity: 1;
  color: var(--system--text_medium);
  -webkit-text-stroke-color: var(--system--text_medium);
  border-radius: 30px;
  margin-top: 10px;
  padding: 6px 11px 6px 13px;
  line-height: 24px;
  transition: all .2s;
  display: inline-block;
}

.textbutton:hover {
  background-color: var(--system--text_medium);
  color: var(--system--card_bg);
}

.iconarrow {
  float: right;
  height: 24px;
}

.textbuttonlink {
  float: left;
  letter-spacing: 0;
  padding-right: 3px;
  font-size: .875rem;
}

.image-19 {
  height: 48px;
}

.image-20 {
  height: 22px;
}

.dropdownicon {
  margin-right: 10px;
}

.docsnumberedlist {
  flex-flow: column;
}

.articlesource {
  color: var(--system--text_dark);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-top: 0;
  font-size: 12px;
}

.quotebloc {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-left: 2px solid var(--githubdark--green);
  color: #fff;
  background-image: none;
  margin-top: 0;
  margin-bottom: 25px;
  margin-left: -20px;
  padding: 7px 30px 7px 20px;
  display: flex;
}

.codecontainer {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  overflow: auto;
}

.codecontainer.inlist {
  width: 100%;
  max-width: none;
}

.wrapper {
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: auto;
}

.prevchapterbutton {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border: 1px solid var(--system--card_bg);
  background-color: var(--system--body_bg);
  color: var(--system--text_light);
  letter-spacing: normal;
  border-radius: 8px;
  flex: 1;
  grid-template-rows: auto;
  grid-template-columns: 1fr 4fr;
  grid-auto-columns: 1fr;
  margin-top: 0;
  padding: 25px 30px 25px 15px;
  display: grid;
}

.prevchapterbutton:hover {
  background-color: var(--system--card_bg_hover);
}

.bottombuttonswrapper {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  margin-top: 60px;
  display: flex;
}

.tablecaption {
  display: none;
}

.tablecell {
  object-fit: fill;
  min-width: 160px;
  padding: 10px 20px 10px 0;
}

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

.tablecell.bold {
  font-weight: 600;
}

.table-row {
  border-top: 1px solid var(--system--stroke_dark);
}

.table-row.first {
  border-top-style: none;
}

._2-8-2-layout {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-wrap: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: minmax(200px, 2fr) repeat(auto-fit, minmax(470px, 8fr)) minmax(200px, 2fr);
  grid-auto-columns: 1fr;
  align-content: stretch;
  justify-content: space-between;
  justify-items: start;
  display: flex;
}

.list-item {
  list-style-type: decimal;
}

._2-8-2-layout-test {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-wrap: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: minmax(200px, 2fr) repeat(auto-fit, minmax(470px, 8fr)) minmax(200px, 2fr);
  grid-auto-columns: 1fr;
  justify-content: space-between;
  justify-items: start;
  display: flex;
}

.div-block-18 {
  background-image: url('../images/light.png');
  background-position: 50% 90%;
  background-size: 200%;
  height: 400px;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
}

.image-21 {
  border-radius: 10px;
  width: 100%;
}

.postimagewrapper {
  margin-left: -40px;
  margin-right: -40px;
}

.guidesblock {
  background-color: var(--system--card_bg);
  background-image: linear-gradient(to bottom, var(--system--card_bg), var(--system--body_bg) 70%);
  box-shadow: none;
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
  border: 1px solid #2c363f;
  border-radius: 24px;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
  position: relative;
  overflow: hidden;
}

.guidesblock.flat {
  background-color: var(--system--body_bg);
  box-shadow: none;
  background-image: none;
  border-style: none;
  align-content: space-around;
  justify-content: flex-start;
  height: 100%;
  transition: all .2s;
}

.guidesblock.flat:hover {
  background-color: #242b32;
  border-color: #435373;
  box-shadow: 0 0 30px -5px rgba(81, 118, 189, .5);
}

.guidesblock.narrow {
  background-color: #000;
  width: 420px;
}

.guidesblock.wide {
  width: 630px;
}

.linkblockheader {
  color: var(--system--text_light);
  margin-top: 3px;
  margin-bottom: 5px;
}

.linkblocktextwrapper {
  float: none;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
}

.anchorlinkiconwrapper.h3 {
  padding-bottom: 7px;
}

.anchorlinkiconwrapper.h2 {
  margin-bottom: 11px;
}

.anchorlinkiconwrapper.h1 {
  padding-bottom: 43px;
}

.iconwrapper {
  padding-left: 5px;
  padding-right: 5px;
}

.iconwrapper.chevron {
  padding-top: 5px;
}

.iconwrapper.light {
  color: var(--system--stroke_light);
}

.code-copy {
  background-color: var(--system--stroke_dark);
  color: var(--system--text_light);
  font-size: var(--desktop--codeblock);
  letter-spacing: .2px;
  border-radius: 6px;
  padding: 9px 15px;
  line-height: 150%;
  position: absolute;
  top: 10px;
  bottom: auto;
  left: auto;
  right: 10px;
}

.code-copy:hover {
  background-color: var(--system--stroke_light);
  color: var(--system--text_light);
}

.feedbackblock {
  grid-column-gap: 20px;
  align-items: center;
  display: flex;
}

.feedbackblockheader {
  margin-bottom: 0;
}

.feedbackblockbutton {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  border: 1px solid var(--system--text_light);
  color: var(--system--text_light);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 7px 12px 7px 6px;
  display: flex;
  position: relative;
}

.feedbackblockbutton:hover {
  background-color: var(--system--text_light);
  color: var(--githubdark--background);
}

.html-embed {
  padding-top: 0;
  position: relative;
  top: 3px;
}

.buttonswrapper {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  display: flex;
}

.tooltiplable {
  color: var(--githubdark--current_line);
  font-size: var(--desktop--h6);
}

.tooltipblock {
  background-color: var(--githubdark--green);
  border-radius: 4px;
  justify-content: center;
  align-self: auto;
  align-items: center;
  padding: 3px 10px;
  display: flex;
  position: relative;
}

.html-embed-2 {
  text-align: center;
  position: absolute;
  bottom: -12px;
}

.tooltipwrapper {
  width: 100px;
  position: absolute;
  top: -95%;
  bottom: auto;
  left: -6px;
  right: 0%;
}

.landingform {
  border: 1px solid var(--secretly--accent_blue_light);
  border-radius: 9px;
  display: flex;
}

.submit-button {
  background-color: var(--secretly--accent_blue);
  font-size: var(--desktop--h4);
  border: 1px #000;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 10px 20px;
  transition: all .2s;
}

.submit-button:hover {
  background-color: var(--secretly--accent_blue_hover);
}

.text-field {
  font-size: var(--desktop--p-base);
  border: 1px #000;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  height: auto;
  margin-bottom: 0;
  padding: 12px 15px;
}

.text-field::placeholder {
  color: var(--system--text_medium);
}

.headerwrapper {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.headerwrapper.gradient {
  align-items: center;
}

.problemblock {
  border-radius: 20px;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 120px 60px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.upwrapper {
  z-index: 1;
  padding-top: 70px;
  padding-bottom: 80px;
  position: relative;
}

.downwrapper {
  z-index: 1;
  justify-content: space-between;
  display: flex;
  position: relative;
}

.factoid {
  max-width: 200px;
}

.factoidnumber {
  font-family: Inter Tight, sans-serif;
  font-size: var(--desktop--h2);
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 100%;
}

.h2special {
  max-width: 750px;
  margin-top: 0;
}

.bgblur {
  z-index: 0;
  box-shadow: none;
  filter: none;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  background-image: linear-gradient(rgba(89, 102, 116, .6), rgba(35, 38, 41, .8));
  border-radius: 20px;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.gradient {
  background-image: linear-gradient(to bottom, var(--system--text_light) 50%, #9cb0c3);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  display: flex;
}

.tab-box {
  background-color: var(--system--stroke_light);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  width: 360px;
  padding: 0 30px;
}

.tab-box.w--current {
  background-color: var(--system--text_medium);
  padding-top: 0;
  padding-bottom: 0;
}

.tab-link-tab-2 {
  background-color: var(--system--body_bg);
}

.tabs-menu-main {
  justify-content: center;
  display: flex;
}

.tabs-content {
  height: 0;
}

.mainpagetabs {
  padding-top: 30px;
}

.progressbar {
  background-color: var(--system--card_bg);
  border-radius: 2px;
  height: 2px;
  margin-bottom: 20px;
  overflow: hidden;
}

.progress {
  background-color: var(--system--text_light);
  width: 100%;
  height: 2px;
}

.tabheader, .tabsparagraph {
  color: var(--system--stroke_light);
}

.div-block-19 {
  text-align: center;
}

.row {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  display: flex;
}

.div-block-20 {
  background-image: url('../images/bg_lines.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 1600px;
  width: 100vw;
  max-width: 1600px;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: auto;
  right: auto;
}

.div-block-21 {
  background-image: radial-gradient(circle farthest-corner at 50% 50%, var(--secretly--accent_blue_hover), rgba(39, 91, 193, 0) 61%);
  mix-blend-mode: normal;
  border-radius: 300px;
  width: 600px;
  height: 600px;
  position: absolute;
  top: -15%;
  bottom: 0%;
  left: -25%;
  right: auto;
}

.animationcontainer {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

.image-22 {
  position: relative;
}

.fullwideblockimg {
  min-width: 630px;
  height: 250px;
}

.fullwideblockimg.dotted {
  background-image: url('../images/pattern_25x25.png');
  background-position: 0 0;
  background-size: 26px;
}

.fullwideblockimg.reobfuscation {
  position: relative;
  top: 6px;
}

.ctawrapper {
  background-color: var(--secretly--accent_blue);
  box-shadow: 0 5px 20px 0 rgba(147, 178, 242, .15), -28px 28px 80px -10px #0e3172, 28px -28px 80px -10px var(--secretly--accent_blue_pressed);
  background-image: url('../images/pattern_25x25_lightBlue.png');
  background-position: 0 0;
  background-size: 26px;
  border-radius: 24px;
  min-height: 360px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.ctasection {
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-self: center;
  align-items: stretch;
  padding-left: 80px;
  padding-right: 80px;
  position: relative;
}

.ctaheader {
  white-space: nowrap;
  font-size: 42px;
}

.ctaform {
  border: 1px solid var(--secretly--accent_blue_light);
  border-radius: 9px;
  display: flex;
  box-shadow: 0 30px 60px -4px rgba(0, 0, 0, .25), 0 10px 20px -4px rgba(0, 0, 0, .25);
}

.ctaimage {
  z-index: 0;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 90px;
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: auto;
  right: -145px;
}

.ctaimage.hidden {
  align-self: center;
  width: 300px;
}

.image-23 {
  position: absolute;
}

.gradientstroke {
  background-image: linear-gradient(to bottom, var(--githubdark--sky_blue), var(--secretly--accent_blue_pressed));
  border-radius: 25px;
  padding: 1px;
}

.gradientstroke.light {
  background-image: linear-gradient(to bottom, var(--system--stroke_light), var(--githubdark--current_line));
  position: relative;
}

.gradientstroke.semi-light {
  background-image: linear-gradient(to bottom, var(--system--stroke_light), var(--system--card_bg));
}

.gradientstroke.r8 {
  background-color: #808b96;
  background-image: linear-gradient(#717b86, #57606b);
  border-radius: 9px;
}

.div-block-23 {
  width: 40px;
}

.swipetag.mobile {
  display: none;
}

.arrowswipe.reflected {
  transform-style: preserve-3d;
}

.div-block-25 {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  display: flex;
}

.iconspecial {
  position: absolute;
}

.leftsection {
  grid-row-gap: 20px;
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

.animationcodeitem {
  border: 1px solid var(--system--stroke_dark);
  background-color: var(--system--card_bg);
  font-family: Roboto Mono, sans-serif;
  font-size: var(--desktop--codeblock);
  white-space: nowrap;
  border-radius: 4px;
  flex: none;
  margin-left: 2px;
  margin-right: 2px;
  padding: 0 3px 2px;
  line-height: 17px;
}

.animationcodeitem.inlinecodeitemstyling {
  border-color: var(--system--stroke_light);
  background-color: var(--system--card_bg_hover);
}

.animationcodeitem.heroinlinecodeitemstyling {
  border-color: var(--system--stroke_dark);
  background-color: var(--system--card_bg);
  color: var(--system--text_light);
  margin-left: 0;
  margin-right: 0;
  padding: 7px 15px 8px;
}

.animationcodecontainer {
  background-color: var(--githubdark--background);
  border-radius: 20px;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, .2);
}

.mainanimation {
  flex: none;
  width: 1600px;
  height: 372px;
  margin-left: auto;
  margin-right: auto;
}

.problembg {
  z-index: -1;
  background-image: linear-gradient(rgba(56, 66, 77, .6), rgba(20, 24, 28, .8)), url('../images/iconsGrid.png');
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
  background-size: auto, 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.text-block-7 {
  color: var(--githubdark--textdarkanimation);
  font-family: Roboto Mono, sans-serif;
  font-size: var(--desktop--p-s);
  display: inline;
}

.assemblyblock {
  color: var(--githubdark--textdarkanimation);
  font-family: Roboto Mono, sans-serif;
  font-size: var(--desktop--p-s);
  white-space: nowrap;
  background-image: linear-gradient(#303a44, #29313a);
  border-radius: 4px;
  padding: 4px 10px 5px;
  font-weight: 400;
  display: inline-block;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .15);
}

.assemblyblock.red {
  color: var(--githubdark--animationred);
  background-image: linear-gradient(#e63a15, #4b2b2a);
}

.coderow {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.mainanimationcontainer {
  justify-content: center;
  margin-top: 89px;
  margin-bottom: 89px;
  display: flex;
}

.animationwrapper {
  position: relative;
}

.codeblockswrapper {
  grid-row-gap: 10px;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.sourcecodewrapper {
  border: 1px solid var(--system--stroke_dark);
  background-color: var(--system--stroke_dark);
  box-shadow: 0 0 60px 0 var(--githubdark--background), inset 0 2px 4px 0 rgba(255, 255, 255, .15);
  font-family: Roboto Mono, sans-serif;
  font-size: var(--desktop--p-s);
  background-image: linear-gradient(#38424d, #14181c);
  border-radius: 8px;
  width: 440px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 14%;
  left: -50%;
  right: -50%;
  overflow: hidden;
}

.sourcecodecontainerhead {
  background-image: linear-gradient(to bottom, var(--githubdark--background), rgba(31, 37, 43, 0));
  color: var(--system--text_dark);
  font-family: Roboto Mono, sans-serif;
  font-size: var(--desktop--p-s);
  text-align: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 18px 27px;
  display: flex;
  position: absolute;
}

.text-block-8 {
  flex: 1;
}

.html-embed-4 {
  position: absolute;
}

.sourcecode {
  grid-column-gap: 15px;
  color: var(--system--stroke_light);
  white-space: nowrap;
  padding-left: 18px;
  padding-right: 18px;
  display: flex;
}

.paragraph-2 {
  color: var(--system--stroke_light);
}

.paragraph-3 {
  color: var(--githubdark--textdarkanimation);
}

.light {
  color: var(--system--text_light);
}

.red {
  color: var(--githubdark--red);
}

.loginblock {
  box-shadow: none;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 400px;
  min-height: 360px;
  margin-top: 30vh;
  display: flex;
  overflow: visible;
}

.loginblock.flat {
  background-color: var(--system--body_bg);
  box-shadow: none;
  background-image: none;
  border-style: none;
  align-content: space-around;
  justify-content: flex-start;
  height: 100%;
  transition: all .2s;
}

.loginblock.flat:hover {
  background-color: #242b32;
  border-color: #435373;
  transform: translate(0, -5px);
  box-shadow: 0 0 30px -5px rgba(81, 118, 189, .5);
}

.loginblock.narrow {
  background-color: #000;
  width: 420px;
}

.loginblock.wide {
  width: 630px;
}

.loginbutton {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: var(--system--stroke_light);
  color: var(--system--text_medium);
  font-size: var(--desktop--p-s);
  letter-spacing: 0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 400;
  line-height: 130%;
  transition: background-color .2s;
  display: flex;
}

.loginbutton:hover {
  color: var(--system--text_medium);
  background-color: #687583;
}

.loginheader {
  font-size: var(--desktop--h3-docs);
}

.loginlogo {
  margin-top: -64px;
  margin-left: auto;
  margin-right: auto;
}

.loginsection {
  background-image: linear-gradient(to bottom, rgba(44, 57, 90, .8), rgba(48, 58, 78, .3) 27%, var(--system--body_bg) 59%, var(--system--body_bg));
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: visible;
}

.loginsection.footer {
  background-color: var(--system--card_bg);
  background-image: linear-gradient(to bottom, var(--system--body_bg), rgba(22, 27, 34, 0)), url('../images/pattern_25x25.png');
  background-position: 0 0, 0 0;
  background-size: auto, 26px;
  border-radius: 0 0 24px 24px;
}

.loginsection.underfooter {
  margin-top: 0;
  padding-top: 20px;
  padding-bottom: 30px;
}

.loginsection.hero {
  background-image: linear-gradient(rgba(44, 57, 90, .8), rgba(24, 26, 32, 0) 60%);
  overflow: hidden;
}

.loginsection._2linemargin {
  padding-top: 120px;
}

.loginsection._4linemargin {
  margin-top: 120px;
}

.loginsection._4linemargin.mainpageanimation {
  background-image: linear-gradient(to bottom, var(--system--body_bg), rgba(31, 37, 43, 0) 51%, var(--system--body_bg)), url('../images/pattern_25x25.png');
  background-position: 0 0, 0 0;
  background-size: auto, 26px;
}

.loginsection._6linemargin {
  margin-top: 180px;
}

.loginsection.popup {
  z-index: 2000;
  background-color: rgba(27, 31, 35, .8);
  width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.div-block-27 {
  justify-content: center;
  align-items: center;
  padding-bottom: 30px;
  display: flex;
}

.featurestopcontentlogin {
  padding: 20px 30px 15px;
  position: relative;
}

.preloader {
  z-index: 100;
  background-color: var(--system--body_bg);
  justify-content: center;
  align-items: center;
  padding-bottom: 80px;
  display: flex;
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.image-24 {
  opacity: .1;
  width: 100px;
}

.formwrapper {
  max-width: 400px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
}

.code-block {
  font-size: var(--desktop--p-s);
  border-radius: 8px;
}

.better-stack-badge {
  color: rgba(255, 255, 255, 0);
  width: 25px;
  height: 25px;
  position: relative;
  top: -5px;
  overflow: hidden;
}

.div-block-28 {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  display: flex;
}

.div-block-29 {
  display: flex;
}

.footerlogowrapper {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.footerlogowrapper.status {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
}

.heading-5 {
  color: var(--system--text_dark);
}

.unorderedlist.no-bullets {
  list-style-type: none;
}

.unorderedlist.no-bullets.insidecallout {
  padding-left: 44px;
}

.dropdown-toggle {
  display: block;
}

.dropdown-toggle-2 {
  color: var(--system--text_dark);
  padding: 0;
  display: flex;
}

.icon {
  position: static;
}

.icon-2 {
  position: relative;
}

.text-block-9 {
  aspect-ratio: auto;
}

.dropdown-toggle-3 {
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  display: flex;
}

.accordion {
  color: var(--system--text_dark);
  width: 100%;
}

.accordion-paragraph {
  white-space: break-spaces;
  margin-bottom: 0;
}

.accordion-paragraph.small {
  font-size: var(--desktop--p-s);
}

.dropdown-toggle-4 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  color: var(--system--text_dark);
  padding: 0;
  display: flex;
}

.dropdown-list-2 {
  position: relative;
}

.dropdown-list-2.w--open {
  background-color: #2d343c;
}

.chevron-animated {
  color: var(--system--warning);
  width: 24px;
  height: 24px;
}

.list-2 {
  padding-left: 60px;
  list-style-type: none;
}

.purple {
  color: var(--githubdark--purple);
}

.html-embed-5 {
  float: right;
  color: var(--githubdark--textdarkanimation);
}

.hidden {
  display: none;
}

.announcement-block {
  text-align: center;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 80px;
  position: relative;
}

.img-wrapper {
  margin-bottom: 60px;
}

.circle {
  background-color: rgba(217, 217, 217, .01);
  border-radius: 100%;
  position: absolute;
  top: -600px;
  box-shadow: 0 0 40px rgba(243, 218, 255, .5), inset 0 10px 20px rgba(243, 218, 255, .15), 0 4px 100px rgba(243, 218, 255, .5);
}

.circle.large {
  width: 1500px;
  height: 1500px;
}

.circle.medium {
  width: 1200px;
  height: 1200px;
}

.circle.small {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  width: 900px;
  height: 900px;
}

.circle.smalest {
  width: 600px;
  height: 600px;
}

.special-container {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: none;
  height: 100vh;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.announcement-paragraph {
  font-size: 24px;
  line-height: 130%;
}

.teaser-h {
  font-size: 54px;
  font-weight: 500;
}

.teaser-h.gradient {
  text-align: center;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: var(--tablet--h2);
  }

  h3 {
    font-size: 22px;
  }

  h4 {
    margin-top: 30px;
  }

  p {
    font-size: var(--tablet--p-base);
  }

  ul {
    padding-left: 5px;
  }

  .container {
    max-width: 100%;
    padding-left: 40px;
    padding-right: 40px;
  }

  .container.heroimage {
    background-size: 97%;
    padding-top: 60px;
  }

  .container.headercontainer {
    margin-bottom: 20px;
    padding-left: 12%;
    padding-right: 12%;
  }

  .container.hero {
    z-index: 1000;
    position: relative;
  }

  .container.topnavbarcontainer {
    padding-left: 40px;
    padding-right: 40px;
    display: block;
  }

  .nav-menu-wrapper {
    background-color: rgba(0, 0, 0, 0);
  }

  .nav-menu-two {
    grid-column-gap: 15px;
    border-radius: 50px;
    justify-content: space-around;
    align-items: center;
    display: flex;
    box-shadow: 0 8px 50px rgba(0, 0, 0, .05);
  }

  .nav-link {
    padding-left: 15px;
    padding-right: 15px;
  }

  .nav-dropdown-list.shadow-three.w--open {
    position: absolute;
  }

  .button-primary.large {
    padding: 15px 24px;
    font-size: 20px;
  }

  .button-primary.large.hero {
    max-width: 187px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .menu-button {
    padding: 12px;
  }

  .menu-button.w--open {
    color: #fff;
    background-color: #a6b1bf;
  }

  .body {
    font-size: 15px;
  }

  .heroheading {
    font-size: var(--tablet--h1_hero);
    margin-bottom: 20px;
    line-height: 105%;
  }

  .herobraket {
    font-size: 45px;
  }

  .section {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .section.first {
    margin-top: 100px;
  }

  .section._4linemargin {
    margin-top: 90px;
  }

  .herocodeline {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .fade {
    width: 60px;
    height: 360px;
    margin-top: 0;
  }

  .specialheading {
    align-self: center;
    width: auto;
    max-width: 80%;
    margin-top: 20px;
    font-size: 48px;
    display: block;
  }

  .blockwithicon {
    max-width: 265px;
    padding-left: 15px;
    padding-right: 15px;
  }

  ._5-3-grid {
    grid-column-gap: 0px;
    grid-row-gap: 20px;
    flex-wrap: wrap;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    padding: 30px 120px 0 33px;
  }

  .taglinebraket {
    bottom: 1px;
  }

  .featuresblock {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    height: 400px;
  }

  .featuresblock.lightted {
    grid-row-gap: 20px;
    flex-flow: column;
    justify-content: space-between;
    height: 450px;
  }

  .guidelinegrid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr;
  }

  .buttonsecondary.medium {
    width: 160px;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 6px 20px;
  }

  .buttontext {
    font-size: 15px;
  }

  .buttoniconright {
    width: 16px;
  }

  .callout {
    max-width: none;
    font-size: 36px;
  }

  .calloutcontainer {
    margin-top: 40px;
    padding-left: 80px;
    padding-right: 80px;
  }

  .footercontainer {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .footerheader {
    font-size: 14px;
  }

  .footermenuitem {
    letter-spacing: 0;
    margin-bottom: 5px;
    font-size: 15px;
  }

  .footercreditscontainer {
    flex-direction: column;
  }

  .div-block-4 {
    align-self: center;
  }

  .leed {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
  }

  .leed.centerflag {
    font-size: 20px;
  }

  .leed.centerflag._4col {
    font-size: var(--tablet--p-m);
    max-width: 480px;
  }

  .leed.centerflag.l-size {
    font-size: var(--tablet--p-l);
    max-width: 560px;
  }

  .text {
    letter-spacing: -.15px;
    font-size: 15px;
  }

  .text.small.grey {
    font-size: var(--tablet--p-s);
    letter-spacing: 0;
  }

  .footercredits {
    font-size: 14px;
  }

  .lessonstextblock {
    padding-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .lessonimgblock {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .col {
    width: 100%;
    min-width: auto;
    min-height: auto;
  }

  .col.sticky {
    position: static;
  }

  .col.sticky.sidebar {
    width: 100%;
  }

  .content {
    max-width: none;
  }

  .anchorlink {
    position: relative;
  }

  .inlinecodeitem.heroinlinecodeitemstyling {
    padding: 5px 12px 6px;
  }

  .docsh3 {
    font-size: 22px;
  }

  .sidebarlink {
    padding: 15px 20px;
  }

  .sidebarlink:hover {
    background-color: var(--system--card_bg);
  }

  .sidebarlink.dropdown {
    padding-left: 40px;
  }

  .nav-menu-2 {
    background-color: var(--system--stroke_light);
    border-radius: 0 0 8px 8px;
    font-size: 15px;
    position: absolute;
  }

  .dropdown {
    height: auto;
  }

  .dropdown-list {
    display: block;
  }

  .navbarcontent {
    display: none;
  }

  .calloutparagraph {
    font-size: var(--tablet--p-base);
  }

  .docsh2 {
    order: -1;
    font-size: 26px;
  }

  .anchorlinkicon {
    order: 1;
    margin-left: 10px;
    padding-right: 0;
  }

  .anchorlinkicon.h4 {
    margin-left: 5px;
  }

  .anchorlinkicon.h2 {
    order: 1;
  }

  .anchorlinkicon.h3 {
    margin-left: 5px;
  }

  .postgrid {
    grid-template-columns: 1fr 1fr;
  }

  .buttondropopen {
    float: none;
    background-color: var(--system--card_bg);
    border-radius: 8px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: auto;
    height: 54px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 20px;
    display: block;
  }

  .buttondropopen.w--open {
    background-color: var(--system--stroke_light);
    border-radius: 8px 8px 0 0;
  }

  ._2-col-grid {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: 1fr 1fr;
  }

  .tablecontainer {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .openmenulink {
    float: left;
    color: var(--system--text_light);
    flex-direction: row;
    flex: 0 auto;
    font-size: 18px;
    display: block;
  }

  .image-12 {
    float: right;
    height: 24px;
  }

  .headerfeatureblock {
    font-size: var(--tablet--h3);
    position: relative;
  }

  .digest {
    margin-left: -20px;
    margin-right: -20px;
  }

  ._2colpostgrid {
    grid-template-columns: 1fr 1fr;
  }

  .minuspadding {
    padding-left: 0;
    padding-right: 0;
  }

  .pilltag.hero {
    margin-bottom: 10px;
  }

  .featuresparagraph {
    position: relative;
  }

  .featuresbottomcontent {
    align-items: flex-end;
    display: flex;
  }

  .featuresbottomcontent.integration {
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    height: auto;
    padding-left: 10px;
    overflow: hidden;
  }

  .featuresbottomcontent.login {
    align-items: stretch;
  }

  .featurestopcontent {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
  }

  .featuressmallblock {
    height: 380px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .lottie-animation {
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
  }

  .lightspot {
    width: 500px;
    height: 500px;
    top: -300px;
    right: -63%;
  }

  .dropdownicon {
    display: none;
  }

  .container-6 {
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  .codecontainer {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .codecontainer.inlist {
    max-width: 728px;
  }

  ._2-8-2-layout {
    flex-direction: column;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
  }

  .listheader {
    margin-top: 0;
  }

  ._2-8-2-layout-test {
    flex-direction: column;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
  }

  .guidesblock.flat {
    border-radius: 24px;
  }

  .guidesblock.narrow {
    width: 340px;
    height: 400px;
  }

  .guidesblock.wide {
    width: 340px;
  }

  .linkblocktextwrapper {
    padding: 0;
  }

  .anchorlinkiconwrapper {
    order: 1;
  }

  .feedbackblock {
    align-items: center;
  }

  .feedbackblockheader {
    margin-top: 0;
  }

  .problemblock {
    grid-row-gap: 40px;
    background-size: 180%, auto;
    padding-left: 70px;
    padding-right: 70px;
  }

  .upwrapper {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .downwrapper {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
  }

  .factoid {
    max-width: 240px;
  }

  .factoidnumber {
    font-size: var(--tablet--h2);
  }

  .h2special {
    font-size: var(--tablet--h2);
    max-width: 560px;
  }

  .row {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-direction: row;
  }

  .animationcontainer {
    margin-left: -200px;
    margin-right: -200px;
  }

  .fullwideblockimg {
    min-width: 540px;
  }

  .ctawrapper {
    flex-direction: column;
    align-items: center;
    min-height: 240px;
    overflow: visible;
  }

  .ctasection {
    text-align: center;
    align-self: stretch;
    padding-top: 30px;
    padding-bottom: 0;
  }

  .ctaheader {
    margin-top: 80px;
  }

  .ctaimage {
    opacity: 1;
    border-radius: 64px;
    width: 260px;
    top: 58%;
    right: auto;
  }

  .ctaimage.hidden {
    border-radius: 40px;
    width: 200px;
    display: block;
    top: -100%;
    bottom: 0%;
  }

  .swiftlogo {
    height: 24px;
  }

  .heading {
    font-size: var(--tablet--h2);
  }

  .singlelineform {
    margin-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
  }

  .heading-2 {
    font-size: var(--tablet--h2);
  }

  .div-block-25 {
    order: -1;
    align-self: center;
  }

  .animationcodeitem.heroinlinecodeitemstyling {
    padding: 5px 12px 6px;
  }

  .mainanimation {
    width: 1376px;
    height: 320px;
  }

  .coderow {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-direction: row;
  }

  .loginblock.flat {
    border-radius: 24px;
  }

  .loginblock.narrow {
    width: 340px;
    height: 400px;
  }

  .loginblock.wide {
    width: 340px;
  }

  .loginsection {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .loginsection.first {
    margin-top: 100px;
  }

  .loginsection._4linemargin {
    margin-top: 90px;
  }

  .featurestopcontentlogin {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
  }

  .nav-menu-container {
    min-width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .div-block-28 {
    align-self: center;
  }

  .unorderedlist.no-bullets {
    padding-left: 30px;
  }

  .circle.large {
    bottom: 122px;
  }

  .circle.medium {
    position: absolute;
    bottom: 522px;
  }

  .circle.small {
    top: -611px;
  }
}

@media screen and (max-width: 767px) {
  h2 {
    font-size: var(--tablet--h2);
    max-width: 400px;
    margin-top: 25px;
  }

  h3 {
    margin-top: 40px;
    font-size: 20px;
  }

  h4 {
    margin-top: 25px;
    font-size: 17px;
    font-weight: 600;
  }

  p {
    margin-bottom: 10px;
    font-size: 15px;
  }

  ul {
    padding-left: 5px;
  }

  li {
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 10px;
  }

  .container {
    padding: 0 20px;
    position: relative;
  }

  .container.headercontainer {
    margin-bottom: 20px;
    padding-left: 0%;
    padding-right: 0%;
  }

  .container.lessons {
    padding-left: 10px;
    padding-right: 10px;
  }

  .navbar-brand {
    padding-left: 0;
  }

  .nav-menu-two {
    border-top: 1px solid var(--system--stroke_light);
    background-color: var(--system--card_bg);
    border-radius: 0 0 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 30px;
  }

  .nav-link {
    padding: 0;
    font-size: 18px;
    display: inline-block;
  }

  .nav-dropdown {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
    display: block;
  }

  .nav-dropdown-toggle {
    padding: 0;
  }

  .nav-dropdown-icon {
    margin-right: -15px;
    display: none;
  }

  .nav-dropdown-list.shadow-three {
    box-shadow: 0 8px 50px rgba(0, 0, 0, .05);
  }

  .nav-dropdown-list.shadow-three.w--open {
    position: relative;
  }

  .nav-dropdown-list.shadow-three.mobile-shadow-hide {
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0);
    display: block;
    position: relative;
  }

  .nav-dropdown-link {
    color: var(--system--text_medium);
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 16px;
  }

  .nav-dropdown-link.firstchild {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .mobile-margin-top-10 {
    flex: 0 auto;
    width: 100%;
    margin-top: 10px;
  }

  .button-primary {
    padding: 12px 20px;
    font-size: 15px;
    display: block;
  }

  .button-primary.large {
    font-size: 18px;
  }

  .button-primary.large.hero {
    padding-left: 30px;
    padding-right: 30px;
  }

  .menu-button.w--open {
    background-color: rgba(0, 0, 0, 0);
  }

  .text-block {
    color: var(--system--text_light);
    font-size: 18px;
  }

  .lastitem {
    padding-bottom: 40px;
  }

  .heroheading {
    font-size: var(--mobile--h1);
    line-height: 110%;
  }

  .herobraket {
    font-size: 38px;
    line-height: 46px;
  }

  .section, .section.hero {
    margin-top: 60px;
  }

  .section._6linemargin {
    margin-top: 160px;
  }

  .specialheading {
    max-width: 90%;
    margin-top: 20px;
    font-size: 42px;
  }

  .blockwithicon {
    grid-row-gap: 20px;
    max-width: 190px;
    padding-bottom: 10px;
    padding-left: 0;
    padding-right: 0;
  }

  .blockwithicon.borderright {
    border-bottom: 1px solid var(--system--stroke_light);
    border-right-style: none;
  }

  .paragraphicon {
    transform: none;
  }

  ._5-3-grid {
    grid-column-gap: 10px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 45px;
  }

  .h2 {
    font-size: 28px;
  }

  .h2.large {
    font-size: 42px;
  }

  .tagline {
    flex: 0 auto;
    margin-top: 0;
    margin-bottom: 10px;
  }

  .tagline.small.announcement {
    margin-top: 10px;
  }

  .taglinebraket {
    bottom: -1px;
  }

  .featuresblock {
    height: 420px;
  }

  .featuresblock.lightted {
    height: 500px;
  }

  .guidelinegrid {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    padding-left: 30px;
    padding-right: 30px;
  }

  .buttonsecondary.medium {
    justify-content: center;
    max-width: 200px;
  }

  .callout {
    font-size: 32px;
  }

  .calloutcontainer {
    padding-left: 90px;
    padding-right: 90px;
  }

  .footercontainer {
    grid-row-gap: 30px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 80px;
  }

  .footerlogo {
    flex-flow: row;
    align-items: center;
  }

  .footerheader {
    font-size: 15px;
  }

  .footermenuitem {
    font-size: 13px;
  }

  .footercreditscontainer {
    flex-direction: column;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr 1fr;
  }

  .div-block-4 {
    order: -1;
    justify-content: flex-start;
  }

  .leed {
    max-width: 460px;
    font-size: 18px;
  }

  .leed.centerflag {
    font-size: 18px;
  }

  .leed.centerflag.l-size {
    font-size: var(--mobile--p-l);
    max-width: 480px;
  }

  .text {
    font-size: 15px;
    line-height: 140%;
  }

  .footercredits {
    position: static;
  }

  .lessonstextblock {
    padding-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .lessonimgblock {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .first {
    margin-top: 100px;
  }

  .docscallout {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .postlistitem {
    padding-bottom: 15px;
    padding-left: 30px;
    font-size: 16px;
  }

  .sidebarlink, .dropdown {
    width: auto;
  }

  .tablehead {
    max-width: 700px;
  }

  .docsh2 {
    font-size: 26px;
  }

  .postimage {
    border-radius: 0;
  }

  .postgrid {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  .buttondropopen.w--open {
    width: auto;
  }

  .nextchapterbutton {
    order: -1;
  }

  ._2-col-grid {
    grid-template-columns: 1fr;
  }

  .nextchapterbuttontag.rightflag, .nextchapterbuttonheading.rightflag {
    text-align: left;
  }

  .tablecontainer {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
  }

  .div-block-7 {
    background-color: rgba(0, 0, 0, 0);
    border-style: none;
    padding: 0;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0);
  }

  .digest {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .summaryparagraph {
    font-size: 15px;
  }

  ._2colpostgrid {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  .tabsmenucontainer {
    margin-top: 20px;
  }

  .backgroundglow {
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: -389px;
  }

  .featuresparagraph {
    font-size: var(--tablet--p-base);
  }

  .featuressmallblock {
    height: 320px;
    padding: 20px 15px;
  }

  .fadefrombottom {
    height: 50px;
  }

  .navbarlistitem {
    align-self: flex-start;
    padding-bottom: 25px;
  }

  .quotebloc {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .codecontainer {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
  }

  .codecontainer.inlist {
    max-width: none;
  }

  .prevchapterbutton {
    grid-template-columns: 4fr 1fr;
  }

  .bottombuttonswrapper {
    flex-direction: column;
  }

  .postimagewrapper {
    margin-left: -20px;
    margin-right: -20px;
  }

  .guidesblock {
    justify-content: flex-start;
  }

  .guidesblock.narrow, .guidesblock.wide {
    width: auto;
  }

  .html-embed {
    transform: translate(.9px);
  }

  .buttonswrapper {
    font-size: var(--desktop--p-s);
  }

  .scaledicon {
    transform: scale(.9);
  }

  .submit-button, .text-field {
    font-size: var(--tablet--p-base);
  }

  .text-field::placeholder {
    font-size: var(--tablet--p-base);
  }

  .headerwrapper.gradient {
    padding-left: 0;
    padding-right: 0;
  }

  .problemblock {
    padding-top: 25px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .downwrapper {
    align-content: stretch;
    justify-content: center;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .factoid {
    max-width: 160px;
  }

  .h2special {
    font-size: var(--mobile--h2);
    max-width: 400px;
  }

  .row {
    flex-direction: column;
  }

  .fullwideblockimg {
    min-width: auto;
  }

  .ctasection {
    padding-left: 40px;
    padding-right: 40px;
  }

  .ctaheader {
    white-space: normal;
    max-width: 440px;
  }

  .swiftlogo {
    height: 24px;
  }

  .singlelineform {
    margin-bottom: 70px;
  }

  .div-block-25 {
    order: -1;
    justify-content: flex-start;
  }

  .mainanimation {
    width: 1032px;
    height: 240px;
  }

  .coderow {
    flex-direction: column;
  }

  .loginblock {
    justify-content: flex-start;
  }

  .loginblock.narrow, .loginblock.wide {
    width: auto;
  }

  .loginsection, .loginsection.hero {
    margin-top: 0;
  }

  .loginsection._6linemargin {
    margin-top: 160px;
  }

  .list-2 {
    padding-left: 30px;
  }

  .announcement-block {
    max-width: 400px;
  }

  .img-wrapper {
    margin-bottom: 40px;
  }

  .image-26 {
    width: 200px;
  }

  .announcement-paragraph {
    font-size: 20px;
    line-height: 140%;
  }

  .teaser-h {
    max-width: none;
    font-size: 42px;
  }
}

@media screen and (max-width: 479px) {
  h2 {
    font-size: var(--mobile--h2);
    margin-top: 15px;
    margin-bottom: 10px;
  }

  h3 {
    font-size: 20px;
  }

  h6 {
    font-size: 11px;
  }

  p {
    line-height: 150%;
  }

  ul {
    padding-left: 5px;
  }

  .container {
    align-content: center;
    align-items: stretch;
    padding-left: 15px;
    padding-right: 15px;
  }

  .container.heroimage {
    min-height: auto;
    padding-top: 30px;
    padding-left: 5px;
    padding-right: 5px;
    overflow: hidden;
  }

  .container.headercontainer {
    padding-left: 15px;
    padding-right: 15px;
  }

  .container.hero {
    z-index: 1;
    align-items: stretch;
    padding-left: 6px;
    padding-right: 6px;
  }

  .container.lessons {
    padding-left: 10px;
    padding-right: 10px;
  }

  .container.topnavbarcontainer {
    padding: 12px 10px;
  }

  .container.popup {
    display: block;
  }

  .container.login {
    justify-content: center;
    height: 80vh;
    padding-top: 0;
  }

  .navbar-wrapper {
    padding-left: 5px;
  }

  .navbar-brand {
    grid-column-gap: 10px;
    align-items: center;
    display: flex;
  }

  .nav-menu-two {
    flex-direction: column;
  }

  .nav-link:hover {
    background-color: rgba(0, 0, 0, 0);
  }

  .nav-dropdown-link {
    padding-bottom: 15px;
  }

  .nav-dropdown-link:hover {
    background-color: rgba(0, 0, 0, 0);
  }

  .nav-dropdown-link.firstchild.w--current {
    background-color: rgba(0, 0, 0, 0);
    font-weight: 400;
  }

  .button-primary.large {
    text-align: center;
    width: 220px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 24px;
    font-size: 16px;
    display: block;
    position: static;
  }

  .button-primary.large.hero {
    width: auto;
    max-width: 160px;
    padding: 15px 35px;
    font-size: 18px;
  }

  .button-primary.medium._160px {
    width: 100%;
  }

  .heroheading {
    font-size: var(--mobile--h1);
    padding-left: 0;
    padding-right: 0;
  }

  .herobraket {
    font-size: 35px;
    line-height: 35px;
  }

  .section {
    margin-top: 90px;
    overflow: hidden;
  }

  .section.hero {
    margin-top: 0;
    padding-top: 100px;
  }

  .section.first {
    margin-top: 140px;
  }

  .section._4linemargin {
    overflow: hidden;
  }

  .section._4linemargin.outerglow {
    overflow: visible;
  }

  .section._6linemargin {
    margin-top: 140px;
    overflow: visible;
  }

  .section.popup {
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
  }

  .section.announcement {
    margin-top: 0;
  }

  .herocodeline.toright {
    display: flex;
  }

  .fade {
    width: 50px;
  }

  .fade.right.special {
    height: 150px;
    top: 0%;
    bottom: 0%;
    left: auto;
    right: 0%;
  }

  .specialheading {
    max-width: 100%;
    margin-top: 20px;
    font-size: 36px;
  }

  .blockwithicon {
    max-width: none;
  }

  ._5-3-grid {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template: "."
                   "."
                   "."
                   / 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    padding-left: 15px;
    padding-right: 15px;
  }

  .h2 {
    font-size: 22px;
  }

  .h2.large {
    font-size: 42px;
    font-weight: 500;
  }

  .tagline {
    text-align: left;
    letter-spacing: 0;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 100%;
    position: relative;
    bottom: 2px;
  }

  .taglinebraket {
    padding-left: 3px;
    padding-right: 3px;
    font-size: 15px;
    bottom: -1px;
  }

  .featuresblock {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    height: 360px;
    display: flex;
    overflow: hidden;
  }

  .featuresblock.lightted {
    -webkit-text-fill-color: inherit;
    background-clip: content-box;
    height: auto;
  }

  .guidelinegrid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    padding-left: 0;
    padding-right: 0;
  }

  .buttonsecondary.medium {
    justify-content: center;
    width: auto;
    max-width: none;
  }

  .callout {
    text-align: center;
    font-size: 32px;
  }

  .calloutcontainer {
    flex: 0 auto;
    align-self: center;
    padding-left: 0;
    padding-right: 0;
    display: block;
  }

  .footercontainer {
    grid-column-gap: 0px;
    grid-row-gap: 20px;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr 1fr;
    margin-top: 60px;
    margin-bottom: 40px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .footerlogo {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .footerheader, .footermenuitem {
    font-size: 13px;
  }

  .footercreditscontainer {
    grid-column-gap: 0px;
    grid-row-gap: 20px;
    grid-template: "."
                   "Area"
                   / 3fr;
    grid-auto-columns: 1fr;
  }

  .div-block-4 {
    order: -1;
    justify-content: flex-start;
  }

  .leed {
    font-size: var(--tablet--p-base);
    letter-spacing: -.15px;
    line-height: 140%;
  }

  .leed.centerflag {
    font-size: 18px;
  }

  .leed.centerflag._4col {
    font-size: var(--mobile--p-m);
    max-width: 400px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .leed.centerflag.l-size {
    font-size: var(--mobile--p-l);
  }

  .text {
    letter-spacing: -.15px;
    font-size: 15px;
    font-weight: 400;
    line-height: 140%;
  }

  .lessonstextblock {
    padding: 5px 20px 35px;
  }

  .lessonimgblock {
    margin-bottom: 0;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .centerflag {
    margin-top: 5px;
  }

  .first {
    margin-top: 100px;
  }

  .content {
    position: relative;
  }

  .docscallout {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-direction: row;
    padding: 15px;
  }

  .anchorlink.w--current {
    flex-flow: row;
    align-content: space-around;
  }

  .postlistitem {
    padding-left: 25px;
  }

  .inlinecodeitem.heroinlinecodeitemstyling {
    padding: 4px 10px 5px;
    font-size: 12px;
  }

  .postembeded {
    overflow-wrap: break-word;
  }

  .sidebarlink {
    background-color: var(--system--card_bg);
  }

  .sidebarlink:hover {
    background-color: var(--system--stroke_light);
  }

  .nav-menu-2 {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
  }

  .navbar {
    z-index: 1;
    position: relative;
  }

  .dropdown-list {
    display: block;
  }

  .tablehead {
    grid-template-columns: minmax(100px, .6fr) minmax(160px, .6fr) minmax(200px, 1fr);
    align-content: stretch;
    justify-content: start;
    justify-items: start;
    padding-left: 3px;
    padding-right: 3px;
    overflow: visible;
  }

  .docsh2 {
    margin-top: 30px;
  }

  .anchorlinkicon {
    order: 1;
    display: none;
    transform: scale(.8);
  }

  .anchorlinkicon.h4 {
    margin-left: 0;
  }

  .postgrid {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  .buttondropopen {
    clear: none;
    object-fit: fill;
    border-radius: 8px;
    flex-flow: row;
    align-items: flex-start;
    height: 54px;
    padding-top: 15px;
    padding-bottom: 15px;
    display: block;
    position: static;
  }

  .buttondropopen:hover {
    background-color: var(--system--stroke_light);
    color: var(--system--text_light);
  }

  .buttondropopen.w--open {
    float: none;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    width: 100%;
    height: 54px;
    position: static;
  }

  .buttondropopen.w--open:hover {
    color: var(--system--text_light);
  }

  .nextchapterbutton {
    order: -1;
  }

  ._2-col-grid {
    padding-left: 0;
    padding-right: 0;
  }

  .nextchapterbuttontag.rightflag, .nextchapterbuttonheading.rightflag {
    text-align: left;
  }

  .image-10 {
    padding-right: 10px;
  }

  .tablecontainer {
    align-content: center;
    align-items: stretch;
    margin-left: 0;
    margin-right: 0;
    display: block;
    overflow: auto;
  }

  .openmenulink {
    float: left;
    clear: none;
    padding-bottom: 0;
    font-size: 16px;
    display: block;
    position: static;
  }

  .openmenulink:hover {
    color: var(--system--text_light);
  }

  .image-12 {
    float: right;
    clear: none;
    height: 24px;
    position: relative;
    bottom: 2px;
  }

  .headerfeatureblock {
    margin-top: 0;
    position: relative;
  }

  .lessonheading {
    margin-top: 10px;
  }

  .fadetop {
    height: 150px;
    margin-top: -150px;
  }

  .fadetop.announcement {
    margin-top: 0;
    top: 0;
  }

  .digest {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
  }

  ._2colpostgrid {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  .noheader {
    margin-top: 30px;
  }

  .minuspadding {
    margin-top: -20px;
  }

  .tabsmenucontainer {
    grid-column-gap: 40px;
    margin-top: 15px;
  }

  .pilltag {
    flex-direction: row;
    font-size: 14px;
  }

  .popupwindow {
    z-index: 1000;
    border-radius: 0;
    flex: 0 auto;
    justify-content: flex-start;
    margin: -90px auto 0;
    padding-top: 30px;
    display: flex;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
  }

  .input {
    height: 40px;
  }

  .forlargescreen {
    display: none;
  }

  .forsmallscreen {
    z-index: 0;
    display: block;
    position: relative;
  }

  .featuresparagraph {
    padding-right: 30px;
    position: relative;
  }

  .featuresbottomcontent.integration {
    height: auto;
    padding-left: 10px;
    overflow: hidden;
  }

  .featurestopcontent {
    padding-top: 25px;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
  }

  ._3-col-grid.hidden {
    display: none;
  }

  .featuressmallblock {
    height: auto;
    min-height: 320px;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    overflow: hidden;
  }

  .lottie-animation {
    width: 120%;
    margin-left: -10%;
    margin-right: -10%;
    display: block;
  }

  .lottie-animation.integration {
    flex: none;
    width: 130%;
    margin-left: 0%;
    position: relative;
    top: 20px;
  }

  .fadefrombottom {
    -webkit-text-fill-color: inherit;
    background-clip: content-box;
    overflow: hidden;
  }

  .lightspot {
    top: -300px;
    right: -80%;
    overflow: hidden;
  }

  .textbutton {
    margin-top: 10px;
    padding: 5px 8px 5px 11px;
  }

  .textbuttonlink {
    font-size: 13px;
  }

  .image-19 {
    height: 50px;
  }

  .image-20 {
    height: 25px;
  }

  .navbarlistitem {
    padding-bottom: 20px;
  }

  .lottie-animation-2 {
    width: 24px;
  }

  .quotebloc {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-direction: row;
    padding: 15px;
  }

  .article {
    position: relative;
  }

  .codecontainer {
    align-content: center;
    align-items: stretch;
    margin-left: 0;
    margin-right: 0;
    display: block;
    overflow: auto;
  }

  .prevchapterbutton {
    grid-template-columns: 4fr 1fr;
  }

  ._2-8-2-layout {
    grid-template-rows: auto auto;
    position: relative;
  }

  .listheader {
    margin-top: 0;
  }

  ._2-8-2-layout-test {
    grid-template-rows: auto auto;
    position: relative;
  }

  .postimagewrapper {
    margin-left: -20px;
    margin-right: -20px;
  }

  .guidesblock {
    border-radius: 20px;
    justify-content: space-between;
    height: 360px;
    display: flex;
    overflow: hidden;
  }

  .guidesblock.flat {
    border-radius: 20px;
    justify-content: flex-start;
  }

  .guidesblock.narrow, .guidesblock.wide {
    max-width: 94vw;
    margin-left: auto;
    margin-right: auto;
  }

  .linkblockheader {
    margin-top: 10px;
  }

  .feedbackblock {
    grid-row-gap: 20px;
    flex-direction: column;
    align-items: flex-start;
  }

  .feedbackblockbutton {
    font-size: var(--desktop--p-s);
  }

  .html-embed, .scaledicon {
    transform: scale(.9);
  }

  .submit-button {
    border-style: solid;
    border-color: var(--secretly--accent_blue_light);
    background-color: var(--secretly--accent_blue_light);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: 0 10px 20px -4px rgba(0, 0, 0, .25), 0 30px 60px -4px rgba(0, 0, 0, .25);
  }

  .submit-button:hover {
    background-color: var(--secretly--accent_blue);
  }

  .text-field {
    border-style: solid;
    border-color: var(--system--text_medium);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

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

  .problemblock {
    grid-row-gap: 30px;
    background-size: 380%, auto;
    padding: 50px 20px 55px;
  }

  .upwrapper {
    padding-top: 0;
    padding-bottom: 0;
  }

  .downwrapper {
    flex-flow: row;
    justify-content: flex-start;
    width: 850px;
    max-width: none;
    padding: 10px 30px 10px 0;
    overflow: visible;
  }

  .factoid {
    max-width: 200px;
  }

  .factoid.firstchild {
    margin-left: 30px;
  }

  .factoidnumber {
    font-size: var(--mobile--h1);
    font-weight: 500;
  }

  .tab-box {
    padding-left: 0;
    padding-right: 0;
  }

  .tabs-menu-main {
    grid-row-gap: 30px;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
  }

  .animationcontainer {
    margin-left: -220px;
    margin-right: -220px;
  }

  .fullwideblockimg {
    min-width: 460px;
  }

  .ctawrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    border-radius: 20px;
  }

  .ctasection {
    padding: 0 15px;
  }

  .ctaheader {
    margin-top: 90px;
    font-size: 2rem;
  }

  .ctaform {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    box-shadow: none;
    border-style: none;
    flex-direction: column;
    align-items: stretch;
  }

  .ctaimage.hidden {
    width: 120px;
  }

  .gradientstroke {
    border-radius: 21px;
  }

  .gradientstroke.light {
    width: 100%;
    max-width: 360px;
  }

  .gradientstroke.r8 {
    background-image: linear-gradient(#697480, #4d5b6b);
  }

  .swiftlogo {
    height: 20px;
  }

  .singlelineform {
    margin-bottom: 60px;
  }

  .heading-2 {
    font-size: var(--mobile--h2);
  }

  .horscrollwrapper {
    margin-left: -15px;
    margin-right: -35px;
    position: static;
    overflow: scroll;
  }

  .swipetag {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    color: var(--system--text_dark);
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .swipetag.mobile {
    justify-content: flex-start;
    padding-top: 0;
    padding-left: 10px;
    display: flex;
  }

  .arrowswipe.reflected {
    transform: rotateX(0)rotateY(180deg)rotateZ(0);
  }

  .arrowswipe.reflected.hidden {
    display: none;
  }

  .heading-3, .heading-4 {
    font-size: var(--mobile--h2);
  }

  .paragraph {
    font-size: var(--tablet--p-base);
  }

  .div-block-24 {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    border: 1px solid var(--system--stroke_light);
    background-color: rgba(0, 0, 0, 0);
    border-radius: 30px;
    align-items: center;
    padding: 3px 10px 0 9px;
    display: flex;
  }

  .div-block-25 {
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: center;
  }

  .animationcodeitem.heroinlinecodeitemstyling {
    padding: 4px 10px 5px;
    font-size: 12px;
  }

  .mainanimation {
    width: 946px;
    height: 220px;
  }

  .loginblock {
    width: 100vw;
    min-width: auto;
    min-height: auto;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
  }

  .loginblock.flat {
    border-radius: 20px;
    justify-content: flex-start;
  }

  .loginblock.narrow, .loginblock.wide {
    max-width: 94vw;
    margin-left: auto;
    margin-right: auto;
  }

  .loginbutton {
    background-color: #434b54;
  }

  .loginbutton:hover {
    background-color: #5a646e;
  }

  .loginsection {
    margin-top: 0;
    overflow: hidden;
  }

  .loginsection.hero {
    margin-top: 0;
  }

  .loginsection.first {
    margin-top: 140px;
  }

  .loginsection._4linemargin {
    overflow: hidden;
  }

  .loginsection._4linemargin.outerglow {
    overflow: visible;
  }

  .loginsection._6linemargin {
    margin-top: 140px;
    overflow: visible;
  }

  .loginsection.popup {
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
  }

  .featurestopcontentlogin {
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
  }

  .unorderedlist.no-bullets {
    list-style-type: none;
  }

  .announcement-block {
    max-width: 300px;
    padding-top: 80px;
  }

  .image-26 {
    width: 200px;
  }
}

#w-node-_7ac973e1-cd2c-045b-a0bc-f08fe7c4e2f1-29a93519, #w-node-_34c6d24b-bff0-ee0b-3ad3-c912b167cf32-29a93519, #w-node-a6b623c8-4c84-0d4f-5716-dd9dce253438-29a93519, #w-node-_207ddc57-b667-0ece-79f3-1a732e649e0c-29a93519, #w-node-_59f84b2c-a6ae-4bda-d4af-a966ac9bc280-29a93519, #w-node-fd131efb-cead-36fa-a766-45b6b357e8c4-29a93519 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_2ca15306-ea25-369d-8f3f-d71becce9fb4-ecce9fb1 {
  order: -9999;
}

#w-node-cf64a50c-89c0-31a5-e49a-23ead82d5ff5-ecce9fb1 {
  order: 4;
}

#w-node-_2ca15306-ea25-369d-8f3f-d71becce9fb6-ecce9fb1 {
  order: 2;
}

#w-node-_2ca15306-ea25-369d-8f3f-d71becce9fc1-ecce9fb1 {
  order: 3;
}

#w-node-ca2b7ad2-5d3c-457f-2203-e4cf48e2edc3-b6f13fd8 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-_2de692c7-0ba6-c3e6-606b-2d9e72b28a8c-b6f13fd8, #w-node-_2de692c7-0ba6-c3e6-606b-2d9e72b28a8c-0ce0fbf4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_806ca24c-d51c-86fe-339d-d306566a0394-0ce0fbf4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-b791e498-9f7d-b178-6873-e37e9fc0fa72-9fc0fa71 {
  order: -9999;
}

#w-node-b791e498-9f7d-b178-6873-e37e9fc0fa77-9fc0fa71 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
  justify-self: end;
}

#w-node-_24476bed-0932-88e2-d932-115f39220ab5-39220ab5 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-_2de692c7-0ba6-c3e6-606b-2d9e72b28a8c-9ada25d3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_806ca24c-d51c-86fe-339d-d306566a0394-9ada25d3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-_9a24fcf3-753b-10ac-b6bf-3bb7f993f333-f993f332 {
  order: 9999;
}

#w-node-_9a24fcf3-753b-10ac-b6bf-3bb7f993f338-f993f332 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
  justify-self: start;
}

#w-node-_2de692c7-0ba6-c3e6-606b-2d9e72b28a8c-a31be8fd {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-bdfb58d9-4290-b8c7-d9be-4a6604e562c6-a31be8fd {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-_2de692c7-0ba6-c3e6-606b-2d9e72b28a8c-cd9a8438 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_806ca24c-d51c-86fe-339d-d306566a0394-cd9a8438 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-_2de692c7-0ba6-c3e6-606b-2d9e72b28a8c-cf45a928 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_806ca24c-d51c-86fe-339d-d306566a0394-cf45a928 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-_2de692c7-0ba6-c3e6-606b-2d9e72b28a8c-ac06c5d7 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_806ca24c-d51c-86fe-339d-d306566a0394-ac06c5d7 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-_2de692c7-0ba6-c3e6-606b-2d9e72b28a8c-73516705 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_806ca24c-d51c-86fe-339d-d306566a0394-73516705 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-a98fbd29-0a7b-b19e-c13d-7c389a5c6e26-28150fe8 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-a98fbd29-0a7b-b19e-c13d-7c389a5c6fcd-28150fe8 {
  align-self: center;
  justify-self: end;
}

#w-node-a98fbd29-0a7b-b19e-c13d-7c389a5c6fce-28150fe8 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-b29e3c85-ddac-de14-f415-a70c0ad61a63-dc68f30f {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_2b30d706-2a16-1c83-9749-574ee9ec4c22-b569baae {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

#w-node-_2de692c7-0ba6-c3e6-606b-2d9e72b28a8c-b569baae {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-bdfb58d9-4290-b8c7-d9be-4a6604e562c6-b569baae {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: start;
}

@media screen and (max-width: 991px) {
  #w-node-_7ac973e1-cd2c-045b-a0bc-f08fe7c4e2f1-29a93519 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-_24476bed-0932-88e2-d932-115f39220ab5-39220ab5, #w-node-_2b30d706-2a16-1c83-9749-574ee9ec4c22-b569baae {
    justify-self: stretch;
  }
}

@media screen and (max-width: 767px) {
  #w-node-_207ddc57-b667-0ece-79f3-1a732e649e0c-29a93519, #w-node-_59f84b2c-a6ae-4bda-d4af-a966ac9bc280-29a93519, #w-node-fd131efb-cead-36fa-a766-45b6b357e8c4-29a93519 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_2ca15306-ea25-369d-8f3f-d71becce9fb4-ecce9fb1 {
    order: 9999;
    grid-area: span 1 / span 3 / span 1 / span 3;
  }

  #w-node-cf64a50c-89c0-31a5-e49a-23ead82d5ff5-ecce9fb1, #w-node-_2ca15306-ea25-369d-8f3f-d71becce9fc1-ecce9fb1 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-ca2b7ad2-5d3c-457f-2203-e4cf48e2edc3-b6f13fd8 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    align-self: start;
  }

  #w-node-b791e498-9f7d-b178-6873-e37e9fc0fa72-9fc0fa71, #w-node-_9a24fcf3-753b-10ac-b6bf-3bb7f993f333-f993f332 {
    order: -9999;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_7ac973e1-cd2c-045b-a0bc-f08fe7c4e2f1-29a93519, #w-node-_34c6d24b-bff0-ee0b-3ad3-c912b167cf32-29a93519 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-a6b623c8-4c84-0d4f-5716-dd9dce253438-29a93519 {
    grid-area: 3 / 1 / 4 / 2;
  }

  #w-node-_207ddc57-b667-0ece-79f3-1a732e649e0c-29a93519, #w-node-_59f84b2c-a6ae-4bda-d4af-a966ac9bc280-29a93519, #w-node-fd131efb-cead-36fa-a766-45b6b357e8c4-29a93519 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_2ca15306-ea25-369d-8f3f-d71becce9fb4-ecce9fb1 {
    order: 9999;
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-cf64a50c-89c0-31a5-e49a-23ead82d5ff5-ecce9fb1 {
    order: 3;
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_2ca15306-ea25-369d-8f3f-d71becce9fb6-ecce9fb1 {
    order: -9999;
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_2ca15306-ea25-369d-8f3f-d71becce9fc1-ecce9fb1 {
    order: 2;
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}